@charset "UTF-8";
/*                                                            __/\
            _           _       ____   ___ ____   ___     ___/_  `.  .-"""-.
   __ _  __| |_ __ ___ (_)_ __ |___ \ / _ \___ \ / _ \    \__,`   \-'  /   )`----')  
  / _` |/ _` | '_ ` _ \| | '_ \  __) | | | |__) | | | |       )        \  ((`""""`  
 | (_| | (_| | | | | | | | | | |/ __/| |_| / __/| |_| |    ___Y  ,    .'7 /|   
 @admin2020 _|_| |_| |_|_|_| |_|_____|\___/_____|\___/    (_,___/...-` (_/_/  */  

/*base-height: 24px;*/


/* COMPONENTS
================================================================*/
#header {}
#header-hamburger {}
#header-logo {}
#header-dashboard {}
#header-search {}
#header-profile {}


/* MOBILE 
================================================================*/
#header-hamburger {
	display: none;
	position: absolute;
	top: 0;
	right: 0;
	color: white;
	padding: 10px;
	font-size: 25px;
	cursor: pointer;
}
@media (max-width: 768px) {
	#header-hamburger {
		display: block !important;
	}
}




/* LOGO
================================================================*/
#header-logo {
	width: 339px;
	padding: 26px 0 0 12px;
}

#header-logo a img {
	width: 100%;
} 

/* small desktop */
@media (max-width: 1350px) and (min-width: 768px) {
	#header-logo {
		width: 240px;
		padding: 34px 12px 0 12px;
	}
}

@media (max-width: 768px) {
	#header-logo {
		padding: 0;
		height: 60px;
	}
	#header-logo img {
		margin: 12px 0 0 12px;
		width: 100%;
		max-width: 280px;
	}	
}



 /*HEADER DASHBOARD
================================================================h*/
#header-dashboard {
	position: absolute;
	left: 370px;
	top: 0px;
	width: auto;
	white-space: nowrap;
}

/* small desktop */
@media (max-width: 1350px) and (min-width: 768px) {
	#header-dashboard {left: 240px;}
}

@media (max-width: 768px) {
	#header-dashboard   {
		height: 60px;
		display: block;
		position: static;
		white-space: normal;
	}
	
}




/*HEADER SEARCH
================================================================h*/
 
#header-search {
	position: absolute;
	top: 0;
	right: 96px;
	text-align: right;
	width: auto;
	padding: 29px 24px;
	height: 96px;
}

.header-search-row {
	margin-left: 12px;
	display: inline-block;
	vertical-align: top;
}
.header-search-row-dd {
	width: 120px;
	width: 90px;
}


#header-search #headerSearchDropdown {
	height: 36px;
	border: 0px;
	border-radius: 0;
	background: #fff;
	/*transition: background .2s;	*/
}
#header-search #headerSearchDropdown:hover {
	background: #fff;
}

#header-search .input-adminsearch {
	/*height: 48px;*/
	height: 36px;
	width: 240px;
	padding: 12px ;
	font-size: 13px;
	border-radius: 0;
	outline: none;
	border: 0;
	/*background-color: #666;*/
	/*background-color: #9c9c9c;*/
	background-color: #fff;
	/*transition: background .2s;		*/
}
#header-search .input-adminsearch:active,
#header-search .input-adminsearch:focus,
#header-search .input-adminsearch:hover {
	border: 0;
	box-shadow: 0 0 0;
	background-color: #fff;
}


.header-search-row .custom-input {
	width: 240px;
}


/* small desktop */
@media (max-width: 1350px) and (min-width: 768px) {
	#header-search { right: 60px;}
	#header-search .input-adminsearch {width: 120px;}
}

/*mobile*/
@media (max-width: 768px) {
	#header-search  {
		display: none;
	}
}




/*HEADER PROFILE
================================================================*/

#header-profile {
	position: absolute;
	right: 0;
	top: 0px;
}

#header-profile.db-node {
	position: absolute;
	right: 0;
}
#header-profile.db-node .db-node-dropdown {
	right: 0;
}

@media (max-width: 768px) {
	#header-profile {
		display: none !important;
	}
}




/* HEADER WIDGET
================================================================*/

.header-widget{}
.header-widget-label{}
.header-widget-icon{}
.header-widget-icon-all{}
.header-widget-number{}
.header-widget-dropdown{}
.header-widget-dropdown a{} /* aka .item */


/*animations*/
.header-widget,
.header-widget-icon-all, 
.header-widget-dropdown a,
.header-widget-dropdown .item  {
	transition: .2s
}


/*base*/
.header-widget {
	height: 96px;
	width: 84px;
	display: inline-block;
    text-decoration: none;
    padding: 21px 0;
    background: #232323;
    color: white;
    position: relative;
    text-align: center;
    vertical-align: top;
}

.header-widget.active,
.header-widget:hover {
	color: #D9EDF7;
	background: #545454;
}


/*label*/
.header-widget-label{
	font-size: 14px;
}


/*number*/
.header-widget-number {
	font-size: 15px;
	font-weight: bold;
	font-family: arial;
	background: #0F90EB;
	border-radius: 10px;
	color: white;
	padding: 0 5px;
	text-align: center;
	position: absolute;
	right: 16px;
	top: 40px;
	line-height: 18px;
}
.header-widget-number.red {
	background: red;
}


/*icon*/
.header-widget-icon {
	font-size: 25px;
	color: white;
	display: block;
	margin-top: 7px;
}
.header-widget-icon-all {
	color: #666;
}
.header-widget:hover .header-widget-icon-all {
	color: #fff;
}
 

/*dropdown*/
.header-widget-dropdown {
	position: absolute;
	top: 96px;
	background: #545454;
	position: absolute;
	white-space: nowrap;
	text-align: left;
	z-index: 101;
	box-shadow: 0px 5px 5px rgba(0,0,0,.5);
}

.header-widget.active .header-widget-dropdown a, 
.header-widget.active .header-widget-dropdown .item,
.header-widget:hover .header-widget-dropdown a, 
.header-widget:hover .header-widget-dropdown .item {
	height: 48px;
	line-height: 48px;
}

.header-widget-dropdown a, 
.header-widget-dropdown .item {
	color: white;
	text-decoration: none;
	display: block;
	padding: 0 12px;
	height: 0px;
	overflow: hidden;
}
.header-widget-dropdown a:hover {
	background: #0F90EB;
}

/* small desktop*/
@media (max-width: 1350px) and (min-width: 768px) {
	.header-widget {
		width: 60px;
	}
}

@media (max-width: 768px) {
	.header-widget {
		padding: 4px;
		height: 60px;
		width: auto;
		min-width: 60px;
	}
	.header-widget-icon {
		margin-top: 7px;
	}
	.header-widget-dropdown {
		left: 0px;
		top: 60px;
	}
	.header-widget-number {
	    right: 3px;
	    top: 22px;
	}
	.header-widget-label {
		display: none;
	}	

}

