:root{
	
	--corpBlue:			#063D79;
	--corpGrey: 		#D8DADC;
	
	--effectGrey:		#bbbcbd;
	--effectGrey2:		#9fa0a1;
	--effectGreyLight:	#e6e7e8;
	--effectBlueLight: 	#6d96c2;
	--effectBlue:		#042b54;
	--effectBlue2:		#021629;
	--grayBorder: 		#b7b8ba;
	
	--effectSpecial:	#841938;
	--nrTabs:			5;
}


	
.box-span {
	font-size: 1.15vw;
}

#tab-pane{
    border-radius: 0px 0px var(--borderRadius) var(--borderRadius);
	padding: 0px;
	margin: 0px;
	display:grid;
	font-family: "Roboto", sans-serif;
	color: var(--corpBlue);
	justify-self: stretch;
}

#tab-selector{
	text-align: center;
    border-radius: var(--borderRadius) var(--borderRadius) 0px 0px;
	border-width: var(--borderWidth) var(--borderWidth) 0px var(--borderWidth);
	border-color: var(--grayBorder);
	border-style: solid;
	font-size: 1.15vw;
	
}

.tab-active{
	background: var(--corpGrey);
	color: var(--corpBlue);
}

.tab-inactive{
	background: var(--corpBlue);
	color: #ffffff;
}

#tab-selector.tab-inactive:hover {
	
	background: var(--effectSpecial);
	color: white;
}

#tab-content-pane{
	background: var(--corpGrey);
	border-width: 0px var(--borderWidth) var(--borderWidth) var(--borderWidth);
	border-color: var(--grayBorder);
	border-style: solid;
	text-align: center;
	height: 7vw; 

}

#tab-content-pane button{
	position: relative;
}

#load-button{
	width: 90%;
}

#eva-control  button{
	color:	#ffffff;
	background: var(--corpBlue);
	border-style: none;
	border-width: var(--borderWidth);
	width: 90%;
	margin: 1% 1%;
	self-align: center;
	font-family: "Roboto", sans-serif;
	font-size: 1em;
	top: 50%;
}

#position-pane button{
	position: static;
}

#eva-control  button:hover{
	transform: scale(1.1);
	background-color: var(--effectSpecial);

}


#mainbutton-container {
	display: grid;
	font-family: "Roboto", sans-serif;
	grid-template-columns: repeat(var(--nrTabs), calc(100% / var(--nrTabs)));
}

#tab-selector-container{
	display: grid;
	grid-template-columns: repeat(4, 25%);
}