:root{
	
	/* colors */
		/* grey */
	--grayBorder: 		#b7b8ba;
	--grayBackground: 	#f5f5f5;
	--corpGrey: 		#D8DADC;
	--bannerGrey:		#d2d4d5;
	--effectGrey:		#bbbcbd;
	--effectGrey2:		#9fa0a1;
	--effectGreyLight:	#e6e7e8;
	
		/* blue */
	--corpBlue:			#063D79;
	--effectBlue:		#042b54;
	--effectBlue2:		#021629;
	--effectBlueLight: 	#6d96c2;
	
		/* magenta (highlight color) */
	--effectSpecial:	#841938;	
	
	/* sizes */
	--borderRadius: 		0.8vw;
	--borderWidth: 			0.3vw;
	--textboxRadius: 		0.8vw;
	--textboxBorderWidth: 	0.2vw;
	--screenborderDist:		0.3vw;
	
	--tileSize:				64px;
	--nrTabs:				5;
	--manualCols:			9;
	
	
	background: var(--effectBlue);
}

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


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;
}

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

label {
	justify-self: left;
}

.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;
}

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

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

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

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

.box-pane{
	position: relative;
	width: 100%;
}

.box-span{
	background:  var(--effectGrey);
	font-family: sans-serif;
	color: var(--corpBlue);
	font-weight: bold;
	text-align: center;
	position: absolute;
	top: 0px;
	left: 10%;
	width: 80%;
	height:1.75vw;
	
	border: var(--textboxBorderWidth) solid;
	border-radius: var(--borderRadius);
	border-color: var(--effectBlue);
	
	
}

.box-content-pane{
	border-radius: var(--textboxRadius);
	padding: 1vw 0.5vw 0.5vw 0.5vw;
	margin-top: 0.8vw;
	margin-bottom: 0.8vw;
	border: var(--textboxBorderWidth) solid;
	border-color: var(--effectBlue);
	background: var(--effectGrey);
	/*display: grid;
	justify-items: center;*/
}

.box-content-pane > .textarea-input{
	left: 4%;
	position: relative;
}

.box-content-pane.button{

	display: grid;
	row-gap: 1em;
	column-gap: var(--screenborderDist);
	grid-template-columns: 1fr 12fr;
	align-items: start;
	
}

.textarea-input{
	background-color: white;
	color: black;
	box-sizing: border-box;
	border-style: double;
	border-color: #b7b8ba;
	resize: none;
	width: 90%;
	font-family: monospace;
	font-size: 1vw;
}

.textarea-valid{
	border-color: green;
}

.textarea-invalid{
	border-color:red;
}

.textarea-empty{
	border-color: black;
}

#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;
	
}

	#position-pane button{
		position: static;
	}

#tab-content-pane *{
	margin: 2%;
}

#tab-content-pane input[type="text"] {
	height: 1.5vw;
	width: 2.5vw;
	font-size: 1.25vw;
}	

/*#manager-insert-element input[type="text"]{
	height: 2em;
}*/