body, html{
	font-family: 'Quicksand', sans-serif;	
	position:absolute;
	margin:0;
	padding:0;
	z-index:1;
	width:100vw;
	height:100vh;
	background:black;
	user-select: none; 
}
#visualizer{
	position:absolute;
	top:0;
	left:0;
	width:100vw;
	height:100vh;
	z-index:2;
}

.visualizer_effects{
	filter: url(#nightvision);
}

.visualizer_effects::before {
  content: " ";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
  z-index: 3;
  background-size: 100% 2px, 3px 100%;
  pointer-events: none;
}

#data_ui{
	position:absolute;
	top:0;
	left:0;
	width:100vw;
	height:100vh;
	display:none;
	z-index:4;	
	pointer-events:none;
	font-family: 'Electrolize', sans-serif;
	color:rgba(255,255,255,0.5);
}
#data_ui_upper_left{
	position:relative;
	top:8vh;
	left:1vw;
	z-index:5;
	width:20vw;
	height:20vw;
	clear:both;
}
#data_ui_title{
	float:left;
	font-size:1em;
}
#data_ui_aircraft{
	clear:both;
	float:left;
	font-size:1em;
	margin-top:5px;
}

#data_ui_aircraft_list{
	clear:both;
}

#data_ui_aircraft_list li{
	width:100%;
	float:left;
	clear:both;
	text-align:left;
	list-style:square;
	margin-left:10px;
}

#data_ui_lower_left{
	position:absolute;
	top:86vh;
	left:1vw;
	z-index:5;
	width:20vw;
}
#data_ui_lower_right{
	position:absolute;
	top:86vh;
	right:1vw;
	z-index:5;
	width:20vw;
	height:10vh;
	text-align:right;
}
#data_ui_compass{
	position:absolute;
	top:50%;
	left:50%;
	margin-left:-256px;
	margin-top:-256px;
	z-index:5;
	width:512px;
	height:512px;
	opacity:0.9;
}
#data_ui_compass_img{
	width:100%;
	height:100%;
}
#data_ui_crosshairs{
	position:absolute;
	top:50%;
	left:50%;
	margin-left:-64px;
	margin-top:-64px;
	z-index:6;
	width:128px;
	height:128px;	
	background-repeat:no-repeat;
	background-size:cover;
	background:url('../images/crosshairs.png');
	opacity:0.3;
}
#fire_info{
	width:100%;
	text-align:left;
	float:left;
	font-size:1em;
	margin-top:5px;
}
#loc_info{
	width:100%;
	text-align:left;
	float:left;
	font-size:1em;
	margin-top:5px;
}
#alt_info{
	width:100%;
	text-align:left;
	float:left;
	font-size:1em;
	margin-top:5px;
}
#time_info{
	width:100%;
	float:left;
	font-size:1em;
	margin-top:5px;
}
#weather_info{
	width:100%;
	float:left;
	font-size:1em;
	margin-top:5px;
}
#wind_info{
	width:100%;
	float:left;
	font-size:1em;
	margin-top:5px;
}
#filters{
	display:none;
}
#loading_screen{
	position:absolute;
	top:0;
	left:0;
	width:100vw;
	height:100vh;
	z-index:7;
	background:#F1F2F3;
}
#loading_header{
	width:100%;
	background:#333;
}
#loading_logo{
	width:30%;
	margin:auto;
	padding-top:2%;
	padding-bottom:2%;
}
#loading_logo img{
	width:100%;
}
#loading_title{
	width:80%;
	margin:auto;
	margin-top:10px;
	text-align:center;
	font-size:28px;
	font-weight:bold;
}
#loading_item{
	width:80%;
	margin:auto;
	margin-top:10px;
	text-align:center;
	font-size:16px;
	font-weight:bold;	
}
#loading_loader{
	width:100px;
	height:100px;
	margin:auto;
	margin-top:30px;
}
#loading_loader img{
	width:100%;
}

#fire_video{
	display:none;
	width:256px;
	height:256px;
}
#fire_video_nv{
	display:none;
	width:256px;
	height:256px;
}
#smoke_video{
	display:none;
	width:256px;
	height:256px;
}
#ui{
	position:relative;
	margin:0;
	padding:0;
	top:0;
	right:0;
	height:100vh;
	width:100vw;
	display:block;
	pointer-events:none;
	z-index:6;
}

#ui_top{
	position:absolute;
	top:0;
	width:100vw;
	height:50px;
	background:#222222;
}

#ui_logo{
	float:left;
	padding-left:1vw;
	padding-top:0.5vh;
	width:100%:
}
#ui_logo img{
	width:100px;
}

#ui_title{
	float:left;
	margin-left:1vw;
	margin-top:1.5vh;
	font-size:1.2em;
	color:white;
}

#ui_buttons{
	float:right;
}

.ui_button{
	float:left;
	width:90px;
	height:30px;
	margin-top:10px;
	margin-right:7px;
	background:#333333;
	pointer-events:auto;
	cursor:pointer;
	box-shadow:5px 5px 15px rgba(10,10,10,0.6);
}
.indicator{
	float:left;
	height:20px;
	width:15px;
	margin-top:5px;
	margin-left:7px;
	background:#50e54e;
	border-radius:2px;
	box-shadow: 2px 2px 10px rgba(10,10,10,.5);
}
.ui_button_label{
	float:left;
	color:white;
	font-weight:bold;
	margin-top:6px;
	margin-left:8px;
	font-size:.8em;
}
.indicator_off{
	background:#111111;
}