@charset "UTF-8";
/*                                                            __/\
            _           _       ____   ___ ____   ___     ___/_  `.  .-"""-.
   __ _  __| |_ __ ___ (_)_ __ |___ \ / _ \___ \ / _ \    \__,`   \-'  /   )`----')  
  / _` |/ _` | '_ ` _ \| | '_ \  __) | | | |__) | | | |       )        \  ((`""""`  
 | (_| | (_| | | | | | | | | | |/ __/| |_| / __/| |_| |    ___Y  ,    .'7 /|   
 @admin2020 _|_| |_| |_|_|_| |_|_____|\___/_____|\___/    (_,___/...-` (_/_/  */  



/* COMPONENTS
================================================================*/
#sidemenu {}
#sidemenu-close {}
.accordHeader {}
.accordContent {}


/* SIDEMENU
================================================================*/
@media (max-width: 768px) {
	#sidemenu {
		top: 120px;
		left: -240px;
		transition: left 0.1s;
	}
	#sidemenu.active {
		left:0;
		box-shadow: 5px 0px 5px rgba(0,0,0,.5);
	}
}



/* ACCORDION HEAD 
================================================================*/
.accordHeader {
	height: 48px;
	line-height: 48px;
	margin: 0 12px 12px;
	padding: 0 12px;
	background-color: #0F90EB;
	color: white;
	font-weight: bold;
	cursor: pointer;
	border-radius: 0;
	position: relative;
	transition: all 0.2s;
}

.accordHeader span,
.accordHeader a {
	font-family: 'Roboto', sans-serif;
	font-size: 15px;	
	font-weight: bold;
	color: white;
	text-decoration: none;
	display: block;
}

.accordHeader.active,
.accordHeader.active span { 
	background: #F5F5F5; 
	color:#232323 
}

.accordHeader:hover {
	padding-left: 24px;
	background-color: #3EA4EC;
}

.accordHeader.active:hover {
	padding-left: 24px;
	background-color: #F5F5F5;
}


.accordHeader img,
.accordHeader i {
	position: absolute;
	right: 12px;
	top: 16px;
	font-size: 18px;
	transition: right 0.2s;
}
.accordHeader:hover  img,
.accordHeader:hover i {
	right: 6px;
}


/* ACCORDION CONENT 
================================================================*/
.accordContent { 
	display:none; 
	margin: 0 12px 12px;
}
.accordContent.active { 
	display: block; 
}

.accordContent ul { 
	list-style-type:none; 
	margin: 0; 
	padding: 0; 
}

.accordContent li { 
	padding: 0 12px;	
	line-height: 24px;
	transition: all 0.2s;
}
.accordContent li:hover { 
	background-color: #545454;
	padding-left: 24px;
}
.accordContent li a { 
	color: white;
	text-decoration: none;
	display: block;
}
.accordContent li a i.fa {
	padding-right: 12px;
	font-size: 10px;
}


@media (max-width: 768px) {
	.accordContent  li { 
		line-height: 36px;
	}
}