@font-face{
	font-family: 'Vazir';
	src: url('../fonts/Vazir-Regular-FD.ttf'),
		 url('../fonts/Vazir-Regular-FD.eot'),
		 url('../fonts/Vazir-Regular-FD.woff'),
		 url('../fonts/Vazir-Regular-FD.woff2');
}
*{
			font-family:Vazir;
            margin:0;
            padding:0;
            box-sizing:border-box;
}

section{
    margin-top:4px;
    padding:2px;
}
.legbody{
	background:#DCDCDC;
}
.logreg{
	text-decoration:none;
	font-size:12px;
}
.paa{
	text-decoration:none;
	font-size:12px;
	color:white;
}
li{
	list-style:none;
}
#menuBar{
	width:170px;
	height:auto;
	font-size:16px;
	visibility:hidden;
	position:fixed;
	top:1px;
	right:0;
	margin:0;
	border:1px solid lightgray;
}
#underMok{
	width:160px;
	max-height:460px;
	background:#800000;	
	font-size:16px;
	display:none;
	position:fixed;
	top:1px;
	right:170px;
	overflow:scroll;
	z-index:5;
}
@media screen and (max-height: 400px){
    #underMok{
        height:255px;
        top:1px;
    }
}
#underCounseling{
	width:160px;
	height:auto;
	background:#800000;	
	font-size:16px;
	display:none;
	position:fixed;
	top:33px;
	right:170px;	
	border:1px white solid;
	z-index:5;
}
#underBrands{
	width:160px;
	max-height:460px;
	background:#800000;	
	font-size:16px;
	display:none;
	position:fixed;
	top:1px;
	right:170px;	
	border:1px white solid;
	overflow-y:scroll;
	z-index:5;
}
#underAccount{
	width:180px;
	max-height:460px;
	background:#800000;	
	font-size:16px;
	display:none;
	position:fixed;
	top:195px;
	right:170px;	
	border:1px white solid;
	z-index:5;
}
@media screen and (max-height:400px){
    #underBrands{
        height:255px;
        top:1px;
    }
}
.loglabeles{
	font-weight:bold;
	margin-bottom:2px;
}
.regsec1{
	width:360px;
	height:420px;
	border:2px black solid;
	border-radius:10px 10px 0 0;
}
.regform{
	height:22rem;
}
.logsec1{
	width:20.5rem;
	height:22.5rem;
	border:2px black solid;
	border-radius:10px 10px 0 0;	
}
.logsec2{
	height:3.5rem;
	background-color:gray; 
	display:flex; 
	justify-content:center; 
	align-items:center;
	border-radius:8px 8px 0px 0px
}
.logh4{
	color:lightgray;
	font-weight:700; 
}
.logsec3{
	height:1.5rem
}
.logform{
	height:17rem;
}
.logsec4{
	height:50px
}
.loginput{
	background-color:gray; 
	color:white; 
	width:90px; 
	height:45px
}
.loginput2{
	cursor:pointer;
	width:16px;
	height:16px
}
.loglabel2{
	color:green;
	font-size:14px;
	padding-left:7px;
}
.loga{
	background-color:gray; 
	color:white; 
	width:90px; 
	height:45px
}
.showconf{
	cursor:pointer
}

.logo1{
	width:55px;
	height:55px;
	border-radius:50%;
	margin:5px;
}
.shopping{
	width:35px;
	height:35px;
	float:left;
	margin:4px;
	padding:3px;
	background:white;
	display:flex;
	align-items:center;
	justify-content:center;
	border-radius:50%;
	margin:14px;
}
.shopp{
	width:25px;
	height:25px;
}
.shopcounter{
	width:16px;
	height:16px;
	border-radius:50%;
	background:black;
	color:aquamarine;
	position:absolute;
	font-size:12px;
	left:12px;
	top:12px;
	display:flex;
	justify-content:center;
	align-items:center;
}
.me{	
	padding:6px;
	color:#DCDCDC;
}
.me:hover{
	background:gold;
	color:black;
}
.mokSup{
	background:white;
	color:black;
	cursor:pointer;
	border-bottom:1px solid lightgray;
}
.counselingSup{
	background:white;
	color:black;
	cursor:pointer;
	padding:8px;
	border-bottom:1px solid lightgray;
}
.brandsSup{
	background:white;
	color:black;
	cursor:pointer;
	padding:8px;
		border-bottom:1px solid lightgray;
}
.education{
	background:white;
	color:black;
	cursor:pointer;
	padding:8px;
	border-bottom:1px solid lightgray;
}
.accountSup{
	background:white;
	color:black;
	cursor:pointer;
	padding:8px;
	border-bottom:1px solid lightgray;
}
.contact{
	background:white;
	color:black;
	cursor:pointer;
	padding:8px;
	border-bottom:1px solid lightgray;
}
body nav img.menuIcon{
	width:30px;
	height:30px;
	cursor:pointer;
	margin-right:22px;
}
.mokSup:hover #underMok{
	display:block;
}
.generalSup:hover #underGeneral{
	display:block;
}
.weightSup:hover #underWeight{
	display:block;
}
.counselingSup:hover #underCounseling{
	display:block;
}
.brandsSup:hover #underBrands{
	display:block;
}
.accountSup:hover #underAccount{
	display:block;
}
#underBrands a{
	text-decoration:none;
	color:#DCDCDC;
	cursor:pointer;
}
#underAccount a{
	text-decoration:none;
	color:#DCDCDC;
	cursor:pointer;
}
.overlay{
    display:flex;
    justify-content:center;
    align-items: center;
    position:fixed;
    top:0;
    right:0;
    background-color:gray;
    width:100%;
    height:100%;
    opacity:0.5;
    z-index:8;
    cursor: none;
}
    .overlay #exp::after{
    content:"";
	display:block;
	height:2px;
	background:#0ff;
	animation:draw 4s ease infinite;
}
.pa-head{
    width:33%;
    height:35%;
    font-size:14px;
}
.showpass{
    cursor:pointer;
}
#comments_pop{
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    width:70vw;
    max-height:340px;
    position:fixed;
    top:120px;
    left:55px;
    overflow-x:hidden;
    overflow-y:scroll;
    color:gray;
    background:lightcyan;
    border:1px solid black;
    border-radius:5px;
    display:none;
}
#com_pop{
     display:flex;
    flex-direction:column;
    justify-content:space-between;
    width:70vw;
    max-height:340px;
    position:fixed;
    top:120px;
    left:55px;
    overflow-x:hidden;
    overflow-y:scroll;
    color:gray;
    background:lightcyan;
    border:1px solid black;
    border-radius:5px;
    z-index:20;
    display:none;
}

@keyframes draw{
	from{
		width:0;
	}
	to{
		width:100%;
	}
}