/* start general navigation (tabs) */
	#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%;
	}
	
	#tab-selector-container{
		display: grid;
		grid-template-columns: repeat(4, 25%);
	}
/* end general navigation (tabs) */


/* start navigation in scenario editor */
	.map-editor-control-button{
		width: 2.5vw;
		height: 2.5vw;
		padding: 0px;
		margin: 0px;
	}

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

	/* 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;
	} 
	
	.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);
		}

	/* enlarge-canvas-buttons (container) */
	#map-editor-control-a {
		grid-area: extension-a; 
		justify-self: right;
	}
	
	/* shrink-canvas-buttons (container) */
	#map-editor-control-b {
		grid-area: extension-b; 
		justify-self: left;
	}
/* end navigation in scenario editor */


/* start navigation in simulation player */
	
	/* container for simulation-buttons */
	#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;
	}
	
	.sim-nav-button{
		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;
	}
/* end navigation in simulation player */