/* --- Styles for IEv4 --- 
https://material.io/resources/color/#!/?view.left=0&view.right=0&primary.color=8bdc09&secondary.color=09a7dc|
https://fonts.google.com/specimen/Signika?sidebar.open=true&selection.family=Signika:wght@300;400;500;600;700
*/


/* --- BASIC SETTINGS --- */

body {
	
	font-family: 'Signika', sans-serif;
	font-size: 16px;
	
	
	margin: 0px;
	padding: 0px;
	
	width: 100vw;
	max-width: 100%;
	height: 100%;
	
	
	box-sizing: border-box;
	
}


ul, li, div, a {
	
	box-sizing: border-box;
	list-style-type: none;
}



div.pagecontainer {
	
	width: 100vw;
	max-width: 100%;
	height: 100%;
	
	background-color: #e1ecf0;

}

/* --- BASIC 3 HORIZONTAL BLOCKS --- */
div.topbar {	
	width: 100%;
	height: 92px;
	
	max-height: 92px;
	
	background-color: #ffffff;
	box-shadow: 10px 10px 8px #888888;
	
	display: flex; 
	flex-direction: row;
	justify-content: flex-start;
	
	flex-wrap: wrap;
	align-items: stretch;
		

	
}



div.middlebar {
	
	height: calc(100vh - 92px - 50px - 10px - 20px);
	min-height: calc(100vh - 92px - 50px - 10px - 20px);
	margin-top: 10px;
	margin-bottom: 20px;
	
	display: flex;  
	flex-direction: row;
	justify-content: flex-start;
	
	flex-wrap: wrap;
	
	 align-items: stretch;
}


div.bottombar {
		
	box-sizing: border-box;
	
	height: 50px;
	background-color: #ffffff;
	box-shadow: 10px 10px 8px #888888;
}



/* --- CONTENT OF TOPBAR--- */


div.logobox {	
	
	width: 280px;
	height: 100%;
	
	max-width: 280px;
	max-height: 92px;
	
	background-image: url("../media/IEV4_logo_temp_full.png");
	background-repeat: no-repeat;
	background-size: contain;
	
	
}


div.mainmenubox {
	
	width: calc(100% - 280px - 280px);
	height: 100%;

	
	
}


div.mainmenubox ul {
	
	
	
	margin: 0px;
	padding: 0px;
	
		
	padding-top: 2.6rem;
	padding-left: 2rem;
	
	
	width: 100%;
x	height: calc(100% - 2rem - 4px);
	height: 100%;
	
	display: flex;
	justify-content: flex-start;
	flex-wrap: wrap;
	
	list-style-type: none;
	
}	


div.mainmenubox ul li {
	
	display: inline-block;
	height: 100%;

	padding-right: 1.3rem;

	
	font-size: 1.3rem;
	font-weight: 400;
	
	
}	

div.mainmenubox ul li a {
	
	display: inline-block;
	height: calc(100% - 4px);
	width: 100%;
	
	border-bottom: 4px solid white;
	
	color: #000000;
	text-decoration: none;
}


div.mainmenubox ul li a:hover {

	color: #000000;	
	border-bottom: 4px solid #09a8dc;

}

div.mainmenubox ul li.selected a {
	color: #09a8dc;	
}

div.loginbox {
	
	width: 280px;
	height: 100%;
	
	max-width: 280px;
	max-height: 90px;
	
	border: 0px solid orange;
	
}


/* --- CONTENT OF MIDDLEBAR--- */

div.columnleft {
	
	width: 280px;
	margin-right: 10px;
	
	background-color: #ffffff;
	box-shadow: 10px 10px 8px #888888;
	
}

div.columnright {
	
	width: calc(100% - 280px - 10px);
	
	background-color: #ffffff;
	box-shadow: 10px 10px 8px #888888;
	
}	


/* --- CONTENT OF BOTTOMBAR--- */

div.bottombar span {
	
	display: inline-block;
	padding-left: 1rem;
	padding-top: 0.5rem;
}





/* --- CONTENT OF MIDDLEBAR COLUMNLEFT--- */

div.columnleft > div > div {
	
	
	
}

div.columnleft div.title {
	

	height: 30px;
	width: 100%;
	
	color: white;
	font-size: 1.2rem;
	
	padding-left: 1rem;
	display: flex;
	align-items: center;
	
	
	
}

div.columnleft div div.listbox, div.columnleft div div.listbox ul {
	
	padding-left: 0rem;
	margin-left: 0rem;
	
x	padding-left: 1rem;
	display: flex;
	flex-direction: column;
	
x	align-items: center;
	
}

	

div.columnleft > div > div.listbox ul li a {
	display: inline-block;
	width: 100%;
	height: 40px;
	xheight: 100%;
	
	padding-left: 1rem; 
	
	border-top: 1px solid #c7e19a;
	border-bottom: 1px solid #c7e19a;
}


div.columnleft div div.listbox ul.issub li a {
	padding-left: 1.5rem;	
	
}

div.columnleft div div.listbox ul li a span {
	
	display: inline-block;
	width: 15px;
	height:1rem;
	
	padding-top: 0px;
	
	background-repeat: no-repeat;
	background-size: contain;
	background-position: 70% 50%; 
	
}

div.columnleft div div.listbox ul li.ishome a span {
	
	background-image: url("../media/ui-icons/home-24px.svg");
	
}

div.columnleft div div.listbox ul li.ispage a span {
	
	background-image: url("../media/ui-icons/open__insert_drive_file-24px.svg");
	
}

div.columnleft div div.listbox ul li.istabel a span {
	
	background-image: url("../media/ui-icons/view_list-24px.svg");
	
}


div.columnleft > div.green > div.listbox ul li a:hover {
	background-color: #c0ff52;
}

div.columnleft div div.listbox ul li.ishome a:hover span {

  
  fill: #green;
}

div.columnleft > div.green > div.listbox ul li.selected a {
	background-color: #c0ff52;
}

	

div.columnleft div.green {
	
	width: 100%;
	background-color: #defbac;
	
}

div.columnleft div.green div.title {
	
	background-color: #54a900;
	
}

div.columnleft div.green div.mnufunctions {
	
	background-color: #8adb08;

}




div.columnleft div.blue {
	
	width: 100%;
	background-color: #cef0fc;
	
}

div.columnleft div.blue div.title {
	
	background-color: #0078aa;	
	
}