@charset "utf-8";
/* CSS Document */

.header-div{
	width:100%;
	top:0px;
	right:0px;
	height:60px;
	position:fixed;
    background:#ecf0f1;
	z-index:340;
}

.header-div .header-div-in{
	width:98%;
	margin:auto;
}
.header-div .header-div-in .logo-div{
	width:200px;
	float:left;
	margin-left:15px;
	overflow:hidden;
}
.header-div .header-div-in .logo-div img{
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}





.header-div .header-div-in .header-nav-div{
	float:left;
	margin-left:25px;
}
.header-div .header-div-in .header-nav-div li{
	height:40px;
	line-height:40px;
	margin:10px 3px 0px 10px;
	color:var(--main-color);
	font-size:12px;
	min-width:90px;
	padding: 0px 10px;
	list-style:none;
	float:left;
	text-align:center;
	border-radius:3px;
	transition:all ease 0.2s;
	-webkit-transition:all ease 0.2s;
	-ms-transition:all ease 0.2s;
	-o-transition:all ease 0.2s;
	-moz-transition:all ease 0.2s;
	cursor:pointer;
}
.header-div .header-div-in .header-nav-div li:hover, .header-div .header-div-in .header-nav-div .active-li{
	color: var(--main-color);
	background: var(--white-color);
}



@media all and (max-width:800px) {
.header-div .header-div-in .header-nav-div{
	display:none;
}
}
















.header-div .header-div-in .notification{
	min-width:40px;
	height:32.5px;
	padding-top:7.5px;
	color:var(--main-color);
	text-align:center;
	font-size:20px;
	float:right;
	margin:10px 0px 0px 5px;
	border-radius:3px;
	transition:all ease 0.2s;
	-webkit-transition:all ease 0.2s;
	-ms-transition:all ease 0.2s;
	-o-transition:all ease 0.2s;
	-moz-transition:all ease 0.2s;
	cursor:pointer;
}
.header-div .header-div-in .notification:hover{
	background: rgba(255,255,255,.4);
}

.header-div .header-div-in .notification div{
	width:15px;
	height:15px;
	background: var(--close-color);
	border-radius:100%;
	float:right;
	margin-right:5px;
	margin-left:-10px;
	color:#FCFCFC;
	line-height:15px;
	font-size:8px;
	text-align:center;
	position:relative;
}









.header-div .header-div-in .header-profile-pix-div{
	margin:10px;
	width:37px;
	height:37px;
	overflow:hidden;
	border-radius:3px;
	float:right;
	transition:all ease 0.2s;
	-webkit-transition:all ease 0.2s;
	-ms-transition:all ease 0.2s;
	-o-transition:all ease 0.2s;
	-moz-transition:all ease 0.2s;
	cursor:pointer;
	border: rgba(255,255,255,1) 1px solid;
	background:#FCFCFC;
}
.header-div .header-div-in .header-profile-pix-div:hover{
	border: rgba(255,255,255,1) 1px solid;
}

.header-div .header-div-in .header-profile-pix-div img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    box-sizing: border-box;
}



.header-div .header-div-in .toggle-profile-div{
	top:60px;
	padding:10px 10px 15px 10px;
	width:290px;
	background:#F4F4F4;
	height: auto;
	position:absolute;
	right:1%;
	display:none;
	border-radius:3px;
}
.header-div .header-div-in .toggle-profile-div:after{
	content:"";
	width:0px;
	height:0px;
	position: absolute;
	border:15px solid;
	border-color:  transparent  transparent  #F4F4F4 transparent;
	right:20px;
	top:-20px;
}

.header-div .header-div-in .toggle-profile-pix-div{
	width:80px;
	height:80px;
	overflow:hidden;
	border:#ecf0f1 2px solid;
	border-radius:3px;
	float:left;
	background:#FCFCFC;
}
.header-div .header-div-in .toggle-profile-pix-div img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    box-sizing: border-box;
}
.header-div .header-div-in .toggle-profile-name{
	margin-top:10px;
	width:200px;
	height:18px;
	font-size:16px;
	float:right;
	line-height:18px;
	overflow:hidden;
	color:#04091E;
}
.header-div .header-div-in .toggle-profile-others{
	margin-top:2px;
	width:200px;
	height:30px;
	font-size:12px;
	float:right;
	line-height:16px;
	overflow:hidden;
	color:#7f8c8d;
}
.header-div .header-div-in .logout-btn{
	min-width:90px;
	margin-top:7px;
	margin-right:5px;
	padding:7px;
	background:var(--sub-body-color);
	border:none;
	color:#ecf0f1;
	font-family:body-font;
	font-size:12px;
	transition:all ease 0.2s;
	-webkit-transition:all ease 0.2s;
	-ms-transition:all ease 0.2s;
	-o-transition:all ease 0.2s;
	-moz-transition:all ease 0.2s;
cursor:pointer;
float:right;
}


.header-div .header-div-in .logout-btn:hover{
	opacity:.8;
}




.header-div .header-div-in .menu-div{
	display:none;
	padding-top:15px;
	width:50px;
	height:45px;
	float:left;
	text-align:center;
	font-size:30px;
	background:rgba(255, 255, 255,.2);
	color:var(--white-color);
	cursor:pointer;
	-moz-transition:all 0.2s ease-in 02s;
	transition:all 0.2s ease-in 0.2s;
	-webkit-transition:all 0.2s ease-in 0.2s;
	-ms-transition:all 0.2s ease-in 0.2s;
	-o-transition:all 0.2s ease-in 0.2s;
}
.header-div .header-div-in .menu-div:hover{
	opacity:.7;
}

@media all and (max-width:800px) {
.header-div .header-div-in .menu-div{
	display:block;
}
.header-div .header-div-in{
	width:100%;
}
}


@media all and (max-width:370px) {
.header-div .header-div-in .logo-div{
	width:160px;
	margin-left:5px;
	margin-top:5px;
}
}
































.side-nav-div{
	position:fixed;
	width:100px;
	left:0px;
	height:calc(100% - 60px);
	bottom:0px;
	background:#ecf0f1;
	-moz-box-shadow:    inset 0 0 7px #bdc3c7;
   	-webkit-box-shadow: inset 0 0 7px #bdc3c7;
   	box-shadow:inset 0 0 7px #bdc3c7;
	z-index:120;
}
#side-nav-div{
	left:-100px;
}
.side-nav-div .nav-div, .side-nav-div .active-li{
	height:60px;
	padding-top:10px;
	text-align:center;
	border-bottom:rgba(204,204,204,.5) 1px solid;
	line-height:20px;
	font-size:12px;
	cursor:pointer;
	-moz-transition:all 0.2s ease-in 02s;
	transition:all 0.2s ease-in 0.2s;
	-webkit-transition:all 0.2s ease-in 0.2s;
	-ms-transition:all 0.2s ease-in 0.2s;
	-o-transition:all 0.2s ease-in 0.2s;
	border-left:#ecf0f1 4px solid;
}
.side-nav-div .nav-div:hover,  .side-nav-div .active-li{
	background:#DBDDDE;
	border-left:var(--active-color) 4px solid;
}
.side-nav-div .nav-div .icon{
	height:30px;
	width:30px;
	margin:auto;
	font-size:30px;
	text-align:center;
	line-height:30px;
}
.hidden{
	display:none;
}


@media all and (max-width:700px) {
.side-nav-div{
	left:-100px;
}
}






.side-nav-bg-sub-div{
	background:rgba(0,0,0,.8);
	position:fixed;
	width:calc(100% - 100px);
	height:calc(100% - 60px);
	bottom:0px;
	left:-100%;
	z-index:100;
}
.side-nav-bg-sub-div .nav-div{
	background:#DBDDDE;
	position:absolute;
	width:200px;
	height:100%;
}
.side-nav-bg-sub-div .nav-div .link{
	height:20px;
	line-height:20px;
	font-size: 12px;
	border-bottom:#ecf0f1 1px solid;
	color:var(--sub-body-color);
	padding:10px;
	cursor:pointer;
	-moz-transition:all 0.2s ease-in 02s;
	transition:all 0.2s ease-in 0.2s;
	-webkit-transition:all 0.2s ease-in 0.2s;
	-ms-transition:all 0.2s ease-in 0.2s;
	-o-transition:all 0.2s ease-in 0.2s;
}
.side-nav-bg-sub-div .nav-div .link .num{
	height:20px;
	line-height:20px;
	min-width:20px;
	padding:0px 5px;
	background:var(--active-color);
	color:var(--white-color);
	text-align:center;
	font-size:12px;
	float:right;
	border-radius:3px;
}
.side-nav-bg-sub-div .nav-div .link:hover{
	background:#ecf0f1;
}

.side-nav-bg-sub-div .nav-back-div{
	position:absolute;
	width:calc(100% - 200px);
	height:100%;
	right:0px;
	cursor: pointer;
}