:root{
	--tScale:1;
}

*{
	font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif
}

body{
	background-color: black;
	padding: 1%;
}

h1{
	color: white;
}

button{
	color:black;
}

.interfaceWrapper{
	display: flex;
	height:100%;
	width: 100%;
}

.rightWindow{
	background-color: yellow;
	flex:1;
	overflow: hidden;
	min-width: 30%;
}
.leftwindow {
	resize: horizontal;
	overflow-x: scroll;
	float:left;
}

#dataout{
	overflow-y: scroll;
	height:86%;
}
.mapItem
{
	white-space: pre-wrap;
	display: block;	
	border-style: solid;
	border-color: black;
	border-width: 1%;
	padding: 1%;
	margin: .4%;
	padding-left: 3%;
	padding-right: 0;
	margin-right: 0;
	font-weight: bold;
	position: relative;
	height:fit-content;

}

.itemSection{
	display: block;
	align-items:flex-end;
	margin-right: 1%;
}

.terrestrial{
	background-color: green;
}

.physical{
	background-color: red;
}

.outWindow{
	margin: 1%;
	padding: 2%;
	word-wrap: break-word;
	overflow-y: scroll;
	resize:vertical;
	background-color: grey;
	max-height: 70%;
}

.flatMap{
	width: 26vw;
	height:26vw;
	background-color: white;
	overflow:scroll;
	position: relative;
}

.indexMarker{
	float:right;
	text-align: right;
	font-size: small;
	position: absolute;
	top:1em;
	right: 3%;
}

.markercircle{
	--translateX:0px;
	--translateY: 0px;

	transform: translate(var(--translateX), var(--translateY));
	opacity: 50%;
	
}

.viewportOut{
		width: 400px;
		height: 300px;
		overflow: hidden;
		/* Clips content outside this area */
		position: relative;
		border: 2px solid black;
	}

.solidMapOut{
	border: 2px solid black;
	overflow: hidden;
}

#mapWindow{
	width: 90%;
	height: 40%;

}

#JSONOUT{
	font-size: small;
}