:root{
	--grayBorder: 		#b7b8ba;
	--grayBackground: 	#f5f5f5;
	--corpGrey: 		#D8DADC;
	--bannerGrey:		#d2d4d5;
	--corpBlue:			#063D79;
	--effectBlue:		#042b54;
	--effectBlue2:		#021629;
	--effectSpecial:	#841938;
	--tileSize:			64px;
	
	
	--borderRadius: 	0.8vw;
	--borderWidth: 		0.3vw;
	--screenborderDist:	0.3vw;
	--manualCols:		9;
	
	background: var(--effectBlue);
}


* {
  box-sizing: border-box;
  margin: 0;
}

@media only screen and (max-width: 599px){
	#warning{
		visibility: visible;
		color:	white;
		font-family: "Roboto", sans-serif;
		font-size: 10vw;
		padding: 5vw;
		text-align: center;
	}
	* {
	visibility: hidden
	}
}
@media only screen and (min-width: 600px){
	#warning {
		visibility: hidden;
	}
}

.grid-container{
	display: grid;
	grid-template-columns: minmax(0,2fr) minmax(0,1fr);
	grid-template-rows: 1fr 1fr 8fr;
	position: fixed;
	top: 0px;
	bottom: 0px;

}

.grid-item{
	padding: 0px;
	margin: 0px;
	display: inline;
}


#uniBanner{
	background: var(--bannerGrey);
	height: 100%;
}


#banner{
	max-height: 100%;
	max-width: 100%;
}


#sponsoring{
	background: var(--bannerGrey);
	height: 100%;
	display: grid;
	row-gap: 2%;
}


#sponsor{
	font-size: 1vw;
}

#partnerLogo{
	max-height: 60%;
	max-width: 100%;
}


/*-----IN EVA-DIV-----*/
/*EVA-MAIN, CHILD OF EVA-DIV, (2nd row, 1st col), GRID (in order to place tiles)*/
#eva-main {
	grid-column: 1;
	grid-row:3;
	
	display: 		grid;
    justify-items: 	center;
    align-items: 	center;
	min-height: 	70vh;
	max-height: 	100vh;
	overflow-y: auto;
	overflow-x: auto;	

    background-color: 	var(--corpGrey);
    border-style: 		solid;
	border-color: 		var(--grayBorder);
	border-width: 		var(--borderWidth) 0px var(--borderWidth) var(--borderWidth);
    border-radius: 		var(--borderRadius) 0px 0px var(--borderRadius);
	margin: 0px 0px var(--screenborderDist) var(--screenborderDist);
}

/*EVA-CONTROL, CHILD OF EVA-DIV (2nd row, 2nd col)*/
#eva-control {
	grid-column: 2;
	grid-row: 3;

	padding: 	1vw;
	overflow: auto;

	background-color: 	var(--corpGrey);
	font-family: 		sans-serif;
	font-size:			1.25vw;
	border-style: 		solid;
	border-color: 		var(--grayBorder);
	border-width: 		0px var(--borderWidth) var(--borderWidth) var(--borderWidth);
    border-radius: 		0px 0px var(--borderRadius) 0px;
	color: 				var(--corpBlue);
	margin: 0px var(--screenborderDist) var(--screenborderDist) 0px;
} 


/*MAINBUTTON-CONTAINER, CHILD OF EVA-DIV (1st row, 2nd col), GRID (5x1)*/
	/*KIDS: 5x tab-selector (Scenario Editor, Scenario Manager, Configuration, Simulation Player, About)*/
#mainbutton-container {
	grid-column: 2;
	grid-row:2;
	display: 		grid;
	column-gap: 	0px;
	place-items: 	stretch;
	margin: var(--screenborderDist) var(--screenborderDist) 0px 0px;
	overflow-wrap: break-word;
}

#eva-control > div{
	display: grid;
	row-gap: 0.5vw;
	justify-items: center;
	
}
	
/*MAP-EDITOR-CONTROL: CHILD OF EVA-CONTROL (Scenario-Editor), GRID(2x2)
	/*KIDS: MAP-EDITOR-CONTROL-A, MAP-EDITOR-CONTROL-B, FLOORMAP-CONTAINER*/
/* Nur äußerer map-editor-control, in dem Pfeile a, Pfeile b und tiles (floormap-container) liegen */
#eva-control > #map-editor-control{	
		column-gap: 			1vw;
		grid-template-areas: 	"extension-a extension-b"
								"tileSet tileSet";	
		
}	

/*----MAP-EDITOR-CONTROL (Scenario-Editor)----*/

	/*CHILDREN OF MAP-EDITOR-CONTROL*/
/* Nur die inneren map-editor-controls (also die Container für Pfeile a, Pfeile b) */
.inner-map-editor-control{
	display: 				grid;
	grid-template-columns: 	repeat(3, 2.5vw);
	
	background-color: 	var(--corpBlue);
	border-radius: 		var(--borderRadius);
	border: 			var(--borderWidth) solid var(--grayBorder);
	
}

	/*CHILD OF MAP-EDITOR-CONTROL*/
#map-editor-control-a {
	grid-area: extension-a; 
	justify-self: right;
}

	/*CHILD OF MAP-EDITOR-CONTROL*/
#map-editor-control-b {
	grid-area: extension-b; 
	justify-self: left;
}

	/*CHILD OF MAP-EDITOR-CONTROL*/
#floor-map-container {
	grid-area: tileSet;
}

/*-----------------------------------------NEXT LAYER------------------------------------------*/

.autoCols {
	grid-template-columns: repeat(auto-fit, var(--tileSize));
	width: 20vw;
}

.manualCols {
	grid-template-columns: repeat(var(--manualCols), var(--tileSize));
}

#content-table {
	
	display: grid;
	padding: calc(var(--tileSize)/4);
	/*border: var(--borderWidth) solid #000000;*/
	border: calc(var(--tileSize)/6) solid #000000;
	
	/*border-radius: var(--borderRadius);*/
	border-radius: calc(var(--tileSize)/2);
	
	
	background-color: #ffffff;
	width: min-content;
}

/*#content-table{
	display: grid;
	grid-template-columns: repeat(auto-fit, var(--tileSize));
	padding: 2%;
	border: var(--borderWidth) solid #000000;
	border-radius: var(--borderRadius);
	background-color: #ffffff;
}*/


/*#eva-control #content-table{
	width: 20vw;
	
}*/



#insert-at-pos{
	grid-column: 1/6;
	justify-self: center;
	width: 90%;
}

#simulation-navigation-control{
	display: grid;
	grid-template-columns: 5vw repeat(4, 4vw) 5vw;
	background-color: var(--effectBlue);
	border-radius: var(--borderRadius);
	border: var(--borderWidth) solid var(--grayBorder);
	column-gap: 0.3vw;
}

	/*-CHILD OF SIMULATION-NAVIGATION-CONTROL-*/
#eva-player-status-table{
    display: grid;
    grid-template-columns: minmax(0,1fr) minmax(0,1fr);
	border: var(--borderWidth) solid #bfbfbf;
	border-radius: var(--borderRadius);
	padding: 2%;
	margin: 2%;
}

#eva-player-status-table p{
	padding: 2%;
}