@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700);
@import url(https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700);
@import url(https://fonts.googleapis.com/css?family=Courier:300,400,500,600,700);
@import url(https://fonts.googleapis.com/css?family=Roboto:300,400,500,600,700);
@import url(https://fonts.googleapis.com/css2?family=Material+Icons);
@import url(fonts/face_fonts.css);

@font-face {
	font-family: 'Vazir';
	font-style: normal;
	font-weight: 300;
	src: url(fonts/Vazir.woff) format('woff');
}
@font-face {
	font-family: 'Vazir';
	font-style: normal;
	font-weight: 400;
	src: url(fonts/Vazir.woff) format('woff');
}
@font-face {
	font-family: 'Vazir';
	font-style: normal;
	font-weight: 600;
	src: url(fonts/Vazir.woff) format('woff');
}
@font-face {
	font-family: 'Vazir';
	font-style: normal;
	font-weight: 700;
	src: url(fonts/Vazir.woff) format('woff');
}
*{
	font-family: "Vazir",Arial ,Courier ,Roboto ,sans-serif;
	direction: rtl;
	text-align: right;
}
.alert {
	padding: 20px;
	background-color: #f44336;
	color: white;
	position: fixed;
z-index: 9999;
top: -300px;
width: 100%;
-webkit-transition-property: all;
transition-property: all;
-webkit-transition-duration: 1s;
transition-duration: 1s;
-webkit-transition-delay: 0s;
transition-delay: 0s;
  }
  
  .closebtn {
	margin-left: 15px;
	color: white;
	font-weight: bold;
	float: right;
	font-size: 22px;
	line-height: 20px;
	cursor: pointer;
	transition: 0.3s;
  }
  
  .closebtn:hover {
	color: black;
  }
html{
	font-size:20px;
}
body,h1,h2,h3,h4,h5 {
	font-family: "Poppins",Courier,Roboto,sans-serif
}
hr{
  background-color: red;
}
body {
	font-size:16px;
	background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAIAAABLbSncAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAChJREFUeNpiPHPmDAMMGBsbw9lMDDgA6RKM%2F%2F%2F%2Fh3POnj1LCzsAAgwAQtYIcFfEyzkAAAAASUVORK5CYII%3D);
}

#bg2{
	background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAYAAADgzO9IAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAACdJREFUeNpi/P//PwMMMDIySsHYTAw4AE4JRiCGawca+4x8owACDAC/5gciLeKkUQAAAABJRU5ErkJggg==) #eee;
}

header{
	color: #fff !important;
	background-color: #ac4142 !important;
}
.b-red2{
	color: #fff ;
	background-color: #ac4142 ;
	border: none;
display: inline-block;
padding: 8px 16px;
vertical-align: middle;
overflow: hidden;
text-decoration: none;
color: inherit;
background-color: inherit;
text-align: center;
cursor: pointer;
white-space: nowrap;
}
.b-red2:hover{
	background-color: #6b2829 ;
}
main nav {
	z-index: 4 !important;
	width: 300px !important;
	font-weight: bold ;
	top: 0px ;
	display: block ;
	color: #fff !important;
	background-color: #464C50 !important;
	-webkit-transition-property: all;
	transition-property: all;
-webkit-transition-duration: .3s;
	transition-duration: .3s;
-webkit-transition-delay: 0s;
	transition-delay: 0s;
}
#pro > div > div{
	float: right !important;
}
#pro img {
	overflow: hidden;
	border-radius: 50%;
}
h2{
	font-size:1.5rem;
}
.w3-half img{
	margin-bottom:-6px;
	margin-top:16px;
	opacity:0.8;
	cursor:pointer
}
.w3-half img:hover{
	opacity:1
}
.w3-container img{
	opacity:0.8;
	cursor:pointer;
}
.w3-container img:hover{
	opacity:1
}
@media (max-width:992px){
	nav {
	right: 0px ;
}
}
body,h1,h2,h3,h4,h5 {
	font-family: "Vazir", sans-serif
}
.t-m-r{
	transition:margin-right .4s;
}
.t-m-l{
	transition:margin-left .4s;
}
.a{
	border: none;
	border-radius: 8px;
	font-size: 15px !important;
	text-align: right !important;
	padding: 8px 16px;
	vertical-align: middle;
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	background-color: inherit;
	text-align: center;
	cursor: pointer;
	white-space: nowrap;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	display: block;
}
ul{
	list-style: none;
	margin: 0;
	padding: 0;
}
.a span{
	color: #B0B0B1;
	padding-left: 10px;
	display: inline-block;
	transition: 0.5s;
}
.a:hover {
	color: #fff !important;
	background-color: #f44336 !important;
}
.a:hover span{
	color: #fff;
	transition: 0.2s;
	padding-left: 10px;
	padding-right: 5px;
	opacity: 1;
}
.Header::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: hsla(0,0%,7%,.25);
	pointer-events: none;
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(3px);
}
.Header{
	margin-right: 300px;
	padding-right: 40px;
	background-color: #111;
	background: url(images/bg.jpg) no-repeat center center;
	background-size: auto;
	background-size: auto;
	background-size: cover;
	color: #fff;
	position: relative;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding-top: 80px;
	text-shadow: 1px 1px 1px #111;
}
.section{
	min-height: 100vh;
	margin-top:75px;
	padding-top: 70px;
}
.section > .title{
	font-size: 2vw;
}
.section > p{
	text-align: justify;
	line-height: 2;
}
CSSp:lang(en_US) {
	font-family : Arial;
	font-size : 12px;
}
p:lang(fa_IR) {
	font-family : Tahoma;
	font-size : 20px;
}
:lang(en) {
	font-family : 'Courier New', Courier, monospace;
	font-weight: 600;
	font-size : 18px;
}
header{
	background-color: #ac4142;
	color: #fff;
	z-index: 99 !important;
}
.onlineusers, .onlineusers:active, .onlineusers:focus {
	position: fixed;
	z-index: 1 !important;
	border-radius: 50px;
	border-top-left-radius: 50px;
	border-bottom-left-radius: 50px;
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
	font-size: 16px;
	display: block;
	color: #fff;
	box-shadow: 0 12px 17px 5px rgba(0,0,0,.17);
	background: #fff;
	bottom: 30px;
	left: -60px;
	text-decoration: none;
	padding: 7px 20px 7px 10px;
	border: 2px solid #eee;
	cursor: pointer;
	-webkit-transition-property: all;
	transition-property: all;
	-webkit-transition-duration: 1s;
	transition-duration: 1s;
	-webkit-transition-delay: 0s;
	transition-delay: 0s;
}
.onlineusers:hover{
	left: -2px;
}
.onlineusers a{
	color: #1ec71b;
	font-size: 12px;
	font-weight: 700;
}
.onlineusers::before {
	content: " ";
	width: 8px;
	height: 8px;
	border-radius: 100px;
	background: #3fbf27;
	position: absolute;
	right: 7px;
	top: 15px;
	transition: opacity .5s;
	animation: blink-animation 2 infinite;
	-webkit-animation: blink-animation 2s infinite;
}
.menubtn, .menubtn:active, .menubtn:focus, .menubtn:hover {
	position: fixed;
	border: 0;
	border-radius: 50px;
	font-size: 16px;
	display: block;
	color: #fff;
	cursor: pointer;
	box-shadow: 0 12px 17px 5px rgba(0, 0, 0, .17);
	background-image: linear-gradient(to right, #10c0c6 0%, #50df8f 51%, #10c0c6 100%);
	background-size: 400%;
	animation: explorecoloranimate 5s linear infinite;
	top: 11px;
	left: 60px;
	margin-left: -49px;
	text-decoration: none;
	padding: 7px 45px 7px 16px;
	z-index: 998;
	transition: bottom .3s;
	transition-timing-function: ease-in-out
}
.menubtn i, .menubtn:active i, .menubtn:focus i, .menubtn:hover i {
	position: absolute;
	display: inline-block;
	right: 15px;
	top: 8px;
	width: 20px;
	height: 20px;
	background: url(icons/menu.svg) center center no-repeat;
	background-size: 100% 100%
}
.menubtn .hide {
	display: block!important;
	bottom: -100px
}

@media (max-width:992px){
	.Header{
	margin-right: 0;
	}
 .section > .title{
	font-size: 5vw;
	}
 #b-center-main {
	display: none!important;
	}
 main nav{
	right: -400px;
	}
#menux:checked ~ main nav{
	right: 0;
}
#bgm{
	opacity: 0;
	-webkit-transition-duration: .3s;
	transition-duration: .3s;
-webkit-transition-delay: .0s;
	transition-delay: .0s;
background: rgba(0,0,0,.5);
visibility: visible;
-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
	z-index: 0;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;

}
#menux:checked ~ main #bgm{
	opacity: 1;
	position:fixed;
	z-index: 3;
}
}
@keyframes explorecoloranimate {
	0% {
	background-position: 0}
to {
	background-position: 400%}
}
@-webkit-keyframes fadein {
	0% {
	top: 0;
	opacity: 0}
to {
	top: 30px;
	opacity: 1}
}
@keyframes fadein {
	0% {
	top: 0;
	opacity: 0}
to {
	top: 30px;
	opacity: 1}
}
@-webkit-keyframes fadeout {
	0% {
	top: 30px;
	opacity: 1}
to {
	top: 0;
	opacity: 0}
}
@keyframes fadeout {
	0% {
	top: 30px;
	opacity: 1}
to {
	top: 0;
	opacity: 0}
}
@keyframes blink-animation {
	0%, to {
	opacity: 0}
50% {
	opacity: 1}
}
@-webkit-keyframes blink-animation {
	0%, to {
	opacity: 0}
50% {
	opacity: 1}
}

main {
	width: 100%;
	max-width: 2224px;
	background-color: #fff;
	-webkit-transition-property: all;
	transition-property: all;
	-webkit-transition-duration: 1s;
	transition-duration: 1s;
	-webkit-transition-delay: 0s;
	transition-delay: 0s;
	margin: auto;
	position: relative;
	z-index: 4;
  overflow: hidden;
}
main footer{
	color: #000 ;
	background: #f1f1f1 ;
	margin-top: 75px;
	padding-left: 58px;
	padding-top: 32px ;
	padding-bottom: 32px ;
	-webkit-transition-property: all;
	transition-property: all;
-webkit-transition-duration: .3s;
	transition-duration: .3s;
-webkit-transition-delay: 0s;
	transition-delay: 0s;
}

#center-main:checked ~ main {
	max-width: 1224px;
	margin: 0 auto;
	-webkit-transition-property: all;
	transition-property: all;
	-webkit-transition-duration: .3s;
	transition-duration: .3s;
	-webkit-transition-delay: 0s;
	transition-delay: 0s;
}
#c-darckmode:checked ~ main{
	background: #19262e !important;
	color:#fff;
}
#c-darckmode:checked ~ main nav{
	background: #1B2D39 !important;
}
#c-darckmode:checked ~ main table td{
	background: #1B2D39 !important;
	color: #fff;
}
#c-darckmode:checked ~ main table th {
    border: 1px #ffa2a2 solid;
    background: #ac4142 !important;
}
#c-darckmode:checked ~ main footer{
	background: #0f181f !important;
	color: #fff;
}
/*-- DefultMode --*/
table{
	width: 100%;
}
table .tagHelp-tblLeft{
	text-align: left !important;
	direction: ltr;
	padding-left: 10px;
	font-family: Courier;
}
.tagHelp-tblLeft b{
	font-family: Courier;
}
.tag{
	color: #f44336;
	direction: ltr;
	font-family: Courier;
}
#DefultMode th{
	border:1px #767676 solid;
	background:#767676;
	background:-moz-linear-gradient(top, #767676 0%, #686868 100%);
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #767676), color-stop(100%, #686868));
	background:-webkit-linear-gradient(top, #767676 0%, #686868 100%);
	background:-o-linear-gradient(top, #767676 0%, #686868 100%);
	background:-ms-linear-gradient(top, #767676 0%, #686868 100%);
	filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#767676', endColorstr='#686868', GradientType=0 );
	background:linear-gradient(top, #767676 0%, #686868 100%);
	filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#767676', endColorstr='#686868', GradientType=0 );
	background:linear-gradient(top, #767676 0%, #686868 100%);
	color:#FFF;
	height:30px;
	border-radius: 5px;
	text-align: center;
}
#DefultMode td {
	word-break: break-all;
	border:1px #CCC solid;
	background: #ffffff;
	/* Old browsers */ background: -moz-linear-gradient(top, #ffffff 0%, #e5e5e5 100%);
	/* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#e5e5e5));
	/* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #ffffff 0%,#e5e5e5 100%);
	/* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #ffffff 0%,#e5e5e5 100%);
	/* Opera 11.10+ */ background: -ms-linear-gradient(top, #ffffff 0%,#e5e5e5 100%);
	/* IE10+ */ background: linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%);
	/* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=0 );
	/* IE6-9 */ height:30px;
	border-radius: 5px;
	text-align: center;
}
#DefultMode th .title {
	text-align:center;
}
/*-- w3_Mode --*/#w3_Mode th{
	text-align: center;
	color: #fff;
	background-color: #464c50;
	border-radius: 5px;
}
#w3_Mode td{
	width: 100%;
	border:1px #CCC solid;
	border-radius: 5px;
	padding: 5px 15px;
}
#w3_Mode th .title {
	text-align:center;
}

/* ------------------ Popup Box ------------------ */
#bg{
  visibility: hidden;
  position: fixed;
  z-index: 5;
  top: 0;
	bottom: 0;
	right: 0;
	left: 0;
  align-items: center;
	justify-content: center;
  display:flex;
  background: rgba(0,0,0,0);
	-webkit-transition-property: all;
	        transition-property: all;
	-webkit-transition-duration: .3s;
	        transition-duration: .3s;
	-webkit-transition-delay: 0s;
	        transition-delay: 0s;
}
#open-pbox:checked ~ #bg{
	-webkit-transition-duration: .3s;
	        transition-duration: .3s;
	-webkit-transition-delay: .0s;
	        transition-delay: .0s;
	background: rgba(0,0,0,.5);
	visibility: visible;
	-webkit-backdrop-filter: blur(3px);
	        backdrop-filter: blur(3px);
}

#open-pbox:checked ~ #bg .box{
  transform: scale(1) ;/*translateY(0px);*/
	-webkit-transition-duration: .1s;
	        transition-duration: .1s;
	-webkit-transition-delay: .0s;
	        transition-delay: .0s;
	opacity: 1;
}
#bg .box {
	max-height: 400px;
	max-width: 260px;
	min-width: 260px;
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	margin: 20px;
	background: white;
	border-radius: 12px;
	overflow: hidden;
	opacity: 0;
	transform: scale(0) ;/*translateY(1000px);*/
	-webkit-transition-property: all;
	transition-property: all;
	-webkit-transition-duration: .2s;
	transition-duration: .2s;
	-webkit-transition-delay: 0s;
	transition-delay: 0s;
	overflow-y: auto;
}
/* ------------------ Start:Respansive-PopBox ------------------ */
@media only screen and (max-width: 767px){
	#bg .box {
	max-width: 40%;
	height: 90%;
}
}
/* ------------------ End:Respansive-PopBox ------------------ */
#bg .box .head {
	flex-grow: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 15px 0;
}
#bg .box .head .logo-wrap {
  flex-direction: column;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: rgb(0 0 0 / 45%) 0px 2px 4px -1px;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  overflow: hidden;
  background-image: url(http://rozup.ir/view/3343444/settings.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 80%;
}
#bg .box .head .logo-wrap img {
	height: auto;
	width: 76px;
}
#bg .box .title {
	font-size: 18px;
	text-align: center;
	margin-bottom: 0;
	color: black;
	padding: 0px 30px;
}
#bg .box .desc {
	text-align: center;
	font-size: 14px;
	margin-bottom: 15px;
	line-height: 20px;
	color: rgb(154, 154, 154);
	padding: 0px 30px;
}
#bg .stars {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 20px;
}
#bg .box .rate-btn {
	font-weight: bold;
	color: rgb(56, 151, 240);
	font-size: 14px;
	text-decoration: none;
}
#bg .box .rate-btn:hover {
	font-weight: bold;
	color: rgb(56, 151, 240);
	font-size: 14px;
	text-decoration: none;
}
#bg .box .btn {
	font-size: 14px;
	user-select: none;
	color: rgb(38, 38, 38);
	height: 48px;
	display: flex;
  justify-content: flex-start;
	align-items: center;
	cursor: pointer;
	border-top: 1px solid rgb(219, 219, 219);
	text-decoration: none;
	background-color: #0000;
	transition: background-color .2s , font-size .1s;
	font-weight: 200;
}
#bg .box .btn:hover {
	background-color: #f9f9f9;
	font-weight: 700;
}
#bg .box input[type="text"],input[type="password"]{
	margin: 0px 8px 10px 8px;
	height: 30px;
	padding:0 5px 1px 0;
	border:1px solid #dadada;
	font:18px S Yekan;
	border-radius:3px;
	-moz-border-radius:3px;
	-o-border-radius:3px;
	-webkit-border-radius:3px;
	-ms-border-radius:3px;
	-khtml-border-radius:3px;
}
#modal-container.two {
	transform: scale(1);
}
#modal-container.two .modal-background {
	background: rgba(0, 0, 0, 0);
	animation: fadeIn 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}
#modal-container.two .modal-background .modal {
	opacity: 0;
	animation: scaleUp 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}
#modal-container.two + .content {
	animation: scaleBack 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}
#modal-container.two.out {
	animation: quickScaleDown 0s 0.5s linear forwards;
}
#modal-container.two.out .modal-background {
	animation: fadeOut 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}
#modal-container.two.out .modal-background .modal {
	animation: scaleDown 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}
#modal-container.two.out + .content {
	animation: scaleForward 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}
@keyframes fadeIn {
	0% {
	background: rgba(0, 0, 0, 0);
	-webkit-backdrop-filter: blur(0px);
	backdrop-filter: blur(0px);
	display:none;
	}
 1%{
	display: flex;
	}
 100% {
	background-color: rgba(0, 0, 0, 0.51);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	display: flex;
	}
}
@keyframes fadeOut {
	0% {
	background: rgba(0, 0, 0, 0.51);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	display: flex;
	}
 99%{
	display:none;
	}
 100% {
	background: rgba(0, 0, 0, 0);
	-webkit-backdrop-filter: blur(0px);
	backdrop-filter: blur(0px);
	display:none;
	}
}
@keyframes scaleUp {
	0% {
	transform: scale(0.8) translateY(1000px);
	opacity: 0;
	}
 100% {
	transform: scale(1) translateY(0px);
	opacity: 1;
	}
}
@keyframes scaleDown {
	0% {
	transform: scale(1) translateY(0px);
	opacity: 1;
	}
 100% {
	transform: scale(0.8) translateY(1000px);
	opacity: 0;
	}
}
@keyframes scaleBack {
	0% {
	transform: scale(1);
	}
 100% {
	transform: scale(0.85);
	}
}
@keyframes scaleForward {
	0% {
	transform: scale(0.85);
	}
 100% {
	transform: scale(1);
	}
}
@keyframes quickScaleDown {
	0% {
	transform: scale(1);
	}
 99.9% {
	transform: scale(1);
	}
 100% {
	transform: scale(0);
	}
}
.pL_10{padding-left:10px!important}
.pL_20{padding-left:20px!important}
.pL_30{padding-left:30px!important}
.pL_40{padding-left:40px!important}
.pL_50{padding-left:50px!important}
.pL_60{padding-left:60px!important}
.pL_70{padding-left:70px!important}
.pL_80{padding-left:80px!important}

.children {
    display: none;
	padding-right: 30px;
}