html{ height:100%; }
body.observation-map{ height:100%; }

.visible { visibility: visible; opacity: 1; transition: opacity 1s linear; }
.hidden { visibility: hidden; opacity: 0; transition: visibility 0s 1s, opacity 1s linear; }

/************** DISTRICT FORECAST **************/
#district_forecast_info{
	font-size: 16px;
	font-weight: 400;
}
#d_zone_img{ background:#fff; border: 1px solid #001D3D; }
#district_forecast_info{ font-weight: 500; padding: 0 }
#district_forecast_info h2{ font-weight: 300; font-size:32px; margin: 0 0 20px 0; color: #fff; text-transform: uppercase;}
#district_forecast_info h3{ font-weight: 700; font-size:16px; margin: 0 0 20px 0; }
#district_forecast_info h3.hd{ font-size: 18px; font-weight: 500; }
#d_forecast td{ padding: 3px 0 3px 10px; }
.d_updated{ font-size: 14px; }
.high{ color:#F78104; }
.low{ color:#93D3D3; }

/************** MAP CANVAS **************/
#map_canvas{
	overflow:hidden;
	position: relative;
	height: 100%;
}
#map{ 
	height:600px; 
	width:100%; 
	z-index: 999999; 
}

.live #display_info{ position: absolute; left: 0; bottom: 0; z-index: 999; width: 100% }
/************** STATION INFO **************/
#display_info{ font-size:14px; padding-left: 40px; }
#display_info h1{ font-size: 26px; } }


#station_info .close{ color:#fff; }
#feature_infos hr{ border-top: 1px solid rgba(207,238,247,0.5); margin:0 }
#feature_infos h1{
	font-size:20px;
	margin:10px 0 0 0;
	font-weight:300;
}
#feature_infos h1 small{ font-weight:300; }
#feature_infos .form-group{ margin:0 0 3px 0; }
#feature_infos .form-group .col-form-label{ padding:0  }
#feature_infos #more_data{
	overflow:hidden;
	padding:0;
}
#feature_infos label{ font-weight:500; text-transform:uppercase; }
#feature_infos .block-label{ 
	text-transform:uppercase; 
	letter-spacing:2px; 
	font-size:13px; 
	text-align:center; 
	margin:0; 
	background-color: var(--dark-teal-3); 
	color: #fff;
	padding: 3px 0;
}
#feature_infos .block-label-time{ 
	text-transform:uppercase; 
	letter-spacing:2px; 
	font-size:12px; 
	text-align:center; 
	margin:0 0 5px 0; 
}
#feature_infos .profile_desc{ line-height:1.1; font-size:12px; }
#more_info{ 
	background:var(--dark-teal-3);
	border-color: var(--dark-teal-3);
	color:#fff;
	text-transform:uppercase;
}
#close{ 
	background:none; 
	border:1px solid rgba(207,238,247,0.5); 
	text-transform:uppercase; 
	letter-spacing:2px; 
	font-size:16px; 
	font-weight:300; 
	padding:3px 5px;
	line-height:1;
}
.stn-head img{ margin:0 5px 0 0; }
.block-sep{ clear:both; height:1px; margin:3px 0; }

.elem_block{ width:100%; float:left; }

#ssec_logo{ position:absolute; z-index:500; width:60px; bottom:35px; left:10px; opacity:0.6; }

.observation-map #footer .copyright{ margin:0; font-size:12px; padding:5px }

@media screen and (width <= 575px) {
	
	#display_info h1{ font-size: 22px; }
	#display_info {
		padding-left: 30px;
		padding-right: 30px;
	}
	#display_info hr{ margin: 5px 0; }
	
	body, #display_info{ font-size: 12px; }

	#station_info h2{ font-size: 20px;  }

	#feature_infos .block-label-time{ letter-spacing: 1px; }
 
	.footer{ font-size: 10px; }
}