/*GENERIC STYLES*/

:root{
	--grayBorder: 		#b7b8ba;
	--grayBackground: 	#f5f5f5;
	--corpGrey: 		#D8DADC;
	--bannerGrey:		#d2d4d5;
	--corpBlue:			#063D79;
	--effectBlue:		#042b54;
	--effectBlue2:		#021629;
	--effectSpecial:	#841938;

}

input[type=number] {
	width: 5vw;
	height: 1.4vw;
	font-size: 1.25vw;
	color: var(--corpBlue);
}


input[type=radio] {
	border: 0px;
	height: 1.25vw;
}

input[type=checkbox]{
	border: 0px;
	height: 1vw;
	width: 1vw;
	margin-right: 1vw;
}

#gridTileElement{
	display: grid;
	width: var(--tileSize);
	height: var(--tileSize);
	
}

#tileImg{
	grid-column: 1;
	grid-row: 1;
	z-index: 1;
}

#tileOverlayImg{
	grid-column: 1;
	grid-row: 1;
	z-index: 100;
	opacity:1;
}

.two-col-grid{
	display: grid;
	grid-template-columns: auto 6vw;
	column-gap: 1%;
	padding-bottom: 1%;
	justify-self: stretch;
	justify-items: center;
}

.map-editor-control-button{
	width: 2.5vw;
	height: 2.5vw;
	padding: 0px;
	margin: 0px;
}

.map-editor-control-button:hover{
	background-color: var(--effectSpecial);
}

.buttonContainer{
	display: grid;
	grid-row-gap: 0.5vw;
}

button{
	padding: 0;
	margin: 2%;
	border-style: none;
}

/* for round corners on hover of scenario editor (zoom-arrows) */
#ExtensionTL:hover{
	border-radius: var(--borderRadius) 0px 0px 0px;
}
#ExtensionTR:hover{
	border-radius: 0px var(--borderRadius) 0px 0px;
}
#ExtensionBL:hover{
	border-radius: 0px 0px 0px var(--borderRadius);
}
#ExtensionBR:hover{
	border-radius: 0px 0px var(--borderRadius) 0px;
} 

#position-pane{
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr 3fr;
	grid-template-rows: 1fr 1fr;
	column-gap: 0.1vw;
	
	justify-items: center;
	align-items: center;
	
}

.box-content-pane > div {
	display: grid;
	justify-items: center;
	align-items: center;
}

.sim-nav-button{
	/*height: 50px;*/
	width: 4vw;
}

/*for elements in simulation-navigation-control*/
.sim-nav-button:hover{
	background-color: var(--effectSpecial);
	width: 4vw;
}


#simulation-navigation-button-first{
	border-radius:  var(--borderRadius) 0px 0px var(--borderRadius);
	width: 5vw;
}

#simulation-navigation-button-first img{
	float: right;
	width: 4vw;
}

#simulation-navigation-button-last{
	border-radius: 0px var(--borderRadius) var(--borderRadius) 0px;
	width: 5vw;
}

#simulation-navigation-button-last img{
	float: left;
	width: 4vw;
}


#simulation-navigation-button-first:hover{
	border-radius:  var(--borderRadius) 0px 0px var(--borderRadius);
	background-color: var(--effectSpecial);
	width: 5vw;
}

#simulation-navigation-button-last:hover{
	border-radius: 0px var(--borderRadius) var(--borderRadius) 0px;
	background-color: var(--effectSpecial);
	width: 5vw;
}