:root{
	--header-container-height: 94px;		
	--header-container-width: 1350px;
	--header-logo-height: 31.875px;				
	--header-logo-width: 255px;
	--header-navigation-elements-count: 3;		
	--header-navigation-margin-left: 50px;		
	--header-navigation-margin-right: 0px;
	--header-navigation-width: calc(var(--header-container-width) - var(--header-logo-width) - var(--header-navigation-margin-left) - var(--header-navigation-margin-right));
	--header-navigation-elements-width: calc(var(--header-navigation-width) / var(--header-navigation-elements-count));
}


/*--------------------------*/
/* Header Rules (All Pages) */
/*--------------------------*/
div#header {
    background-color:#333333;
	box-shadow: 0 3px 7px 0 rgba(0, 0, 0, 0.225);
	/*
	height: 64px;
	position: fixed;
	width: 100%;
	z-index: 1000;
	top:0px;
	left: 0px;*/
}
/*
body.browser-firefox div#header,
body.browser-safari div#header { 
	box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.225); 
}*/
div#header,
div#header a{
    color: white;
}
div#header-container { 
	/* height: 64px; */
	margin: 0 auto;
	/*width: var(--header-container-width); */
	/*width: 90%;*/
}
div#header-container > .row{
} 

img#header-logo-sevenshapesschool-dark,
img#header-logo-sevenshapesschool-light { 
	/*
	margin-top: 10px; 
	*/
	height: var(--header-logo-height); 
	width: var(--header-logo-width); 
}
img#header-logo-sevenshapesschool-dark { display: none; }
img#header-logo-sevenshapesschool-light { display: block; }
div#header-logo { 
	/*
	float: left; 
	height: var(--header-container-height); 
	width: var(--header-logo-width);
	*/
	/* padding: 0 0 0 1rem; */
 }
 div#header-logo a{ 
	display: inline-flex;
	padding: 1rem;
 }
div#header-logo img { 
	/*
	margin-top: calc((var(--header-container-height) - var(--header-logo-height)) / 2); 
	*/
}
div#header-navigation
{
	font-size: 12px;
	height: 100% !important;
	/*
	height: var(--header-container-height);		
	width: var(--header-navigation-width);
	*/
}
div#header-navigation ul,
div#header-navigation li,
div#header-navigation li a
{
	display: flex;
}
/*--------------------------------*/
/* Header Rules (Index Page Only) */
/*--------------------------------*/
/*
body#page-index div#header { 
	background-color: #FFFFFF;
	box-shadow: 0 5px 25px 0 rgba(0, 69, 107, 0.35);
 }
body#page-index.browser-edge div#header {
	 box-shadow: 0 5px 21px 0 rgba(0, 69, 107, 0.35);
}
body#page-index.browser-firefox div#header, body#page-index.browser-safari div#header { 
	box-shadow: 0 5px 16px 0 rgba(0, 69, 107, 0.35); 
}
body#page-index img#header-logo-sevenshapesschool-dark { display: block; }
body#page-index img#header-logo-sevenshapesschool-light { display: none; }

*/

#header form{ 
    margin-top: .5rem;
    font-size: 0.8em;
}
#header select{
    font-size: 1em;
    margin: 0px;
}
#header .info{
	font-size: 0.8em;
}
#header .info i{
	vertical-align: top
}
#header .username{
	color: #e14747;
	line-height: 1.1em;
	font-weight: 600;
	text-decoration: none;
	cursor: default;
}
#header .status{
	color: #e14747;
	text-transform: uppercase;
	line-height: 1.1em;
}
/*
#header #logout i.material-icons{
    font-size: 2em;
    margin-left: 0rem;
    vertical-align: middle;
}
*/
#header #logout a:hover{
	text-decoration: none;
}
#header #logout a:hover span{
	text-decoration: underline;
}

#header a.logout{
	color:#FFEC52;
	display: flex;
	align-items: center;	
	font-family: 'Fredoka One', cursive;	
	font-size: 1.175rem;		
	font-weight: normal;		
	letter-spacing: 0.08em;	
	padding: 0 20px;
	text-align: center;
    text-decoration: none;
	box-sizing:initial;
	transition: background-color 400ms ease;
    padding: 20px;
}

#header a.logout i {
}

#header a.logout:hover{
	background-color:#FFEC52;
	color: #333333;
}