body { 
	/*margin: 0 1% 1% 1%;*/
	margin: 0 0 0 0;
	background-color: #fefbfa;
	font-family: Univers,arial,sans-serif;
	font-size: 1em;
}
#map { 
	position: absolute;
	left: 0em;
	right: 0em;
	top: 3em;
	bottom: 0em;
	z-index: 0;
	border: 1px solid black;
	background-color: white;}
#howto {    /*div with instructions*/
	position:relative;
	text-align: left;
	padding: 5px 3px 5px 5px;
}
#menu-main2 {   /* main menu div */
	position: absolute;
	min-height: 160px;
	max-height: 90%;
	left: 0em;
	top: 6.5em;
	bottom: 5.5em;
	width: 25em;
	max-width: 90%;
	border: none;
	z-index: 20;
	overflow-y: auto;
	overflow-x: hidden;	
}
#menu-main2{   /* main menu div */
	position: absolute;
	top: 2.5em;
	bottom: 2em;
	left: 0em;
	width: 20em;
        max-width: 98%;
        z-index: 20;
        overflow-y: visible;
        overflow-x: hidden;
	background-color: white;
	/*background-color:rgba(255,255,255,0.90);*/
	border: 2px solid #427E93;
	
}
#menu-main input[type=button], select, #menu-top{
	height: 2em;
}
#logo-top{
	width: auto;
	height: 2.5em;
}
#menu-top{
        position: absolute;
        top: 0em;
        left: 1px;
        right: 1px;
	height: 2.5em;
	word-wrap: break-word;
	z-index: 20;
        border-bottom: 2px solid black;
}
#menu-top div{
	/*padding: 0 0.25em;*/ 
}
.flex-container{
	display: flex;
	flex-flow: wrap;
	/*flex-wrap: nowrap;*/
}
.top-menu-item{
        height: inherit;
        display: inline-block;
        font-size: 1.1em;
	vertical-align: middle;
	white-space: nowrap;
	line-height: 2em;
	/*background-color: #326070;*/
	/*color: white;*/
	background-color: white;
	color: #427E93;
	flex-grow: 1;
	text-align: center;
}
.legend-container{
	display: flex;
	flex-wrap: nowrap;
	white-space: nowrap;
	flex-grow: 2;
}
#menu-control{
	display: flex;
	height: inherit;
	width: inherit;
	padding: 0px 2px;
	word-wrap: break-word;
}
.menu-icons{
	vertical-align: middle;
	white-space: nowrap;
	line-height: 2em;
        background-color: white;
}
.menu-sub-icon{
	display: inline-block; 
}
.menu-sub-icon i{
	font-size: 1.375em;
	text-align: center;
}
#menu-content2 {   /* main menu div */
	/*border: 2px solid #57758D;*/
	width: inherit;
	height: inherit;
        -webkit-touch-callout: none; /* iOS Safari */
        -webkit-user-select: none; /* Safari */
        -khtml-user-select: none; /* Konqueror HTML */
        -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
        user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */
}
#stuffold {   /* main menu div */
	float: left;
	position: relative;
	top: 1px;
	bottom: 1em;
	left: 2em;
	z-index: 20;
	margin:10px 0 0 10px;
	width: 25em;

	height: 55em;
	text-align:center;

	border-radius: 2px;
	overflow-y: auto;
	overflow-x: hidden;	
	 }
#mouse_position {     
	display: none;
	width: 15%;
	position: absolute;
	left: 84%;
	top: 4%;
	color: black;


}
#search{    /* "stations and networks" div */
	padding: 2px;
	display: block;
	text-align: center;	
	background-color:rgba(255,255,255,0.80);}
#searchby {
	margin-top: 10px; }
}
#popup {
	/*background-color: #000059;*/
	background-color: #427E93;
	padding: 5px;
	}
.base {       /* borders and overlays in layers div */
	text-align: left;
	margin: 2% 1% 5% 1%;}
.menuitem {   /* style for titles of menu sections */
	font-size: 1em;
	display: block;
	border: 2px solid #57758D;
	color: black;
	background-color: white;
	text-decoration:none;
	text-align: center;  
	vertical-align: middle;  
}
.menu-header-legend {   /* style for titles of menu sections */
	font-size: 1.1em;
	font-weight: bold;
	text-align: center;  
	vertical-align: middle;
	height: auto;
	padding-top: 0.33em;
	padding-bottom: 0.33em;
}
.menu-header, .menu-header-close{   /* style for titles of menu sections */
	font-size: 1.1em;
	color: white;
	text-decoration:none;
	vertical-align: middle;
	height: auto;
	margin-top: 2px;
	margin-bottom: 2px;
	padding-top: 0.33em;
	padding-bottom: 0.33em;
	padding-left: 3em;
	cursor: pointer;
	}
.menu-header{
	/*background-color: #326070;*/
	/*color: white;*/
	background-color: #404040;
	color: white;
}
.menu-header::before{
	position:absolute;
	left: 1em;	
	font-family: "Font Awesome 5 Free";
	content: "\f077";
}
.menu-header-close{
	color: white;
	background-color: #427E93;
}
.map-button:hover, .menu-button:hover, .menu-button-close:hover, .menu-button-open:hover {
	background-color: #404040;
	color: white;
}
.menu-header-close::before{
	position:absolute;
	left: 1em;	
	font-family: "Font Awesome 5 Free";
	content: "\f078";
}
.menu-content-old{
	margin-left: 2px;
	margin-right: 2px;
}
.menu-content2{
	padding: 5px;
	background-color: white;
	color: black;
}
.info{
	font-size: 1.1em;
	/*background-color: #000059;*/
	background-color: #427E93;
	color: white;
	text-decoration:none;
	text-align: center;  
	/*padding: 0px 5px;*/
}
.subtitle{
	height: 100%;
	}
.heading {
	width: 35%;
	height: 50px;
	color:white;
	/*background-color: #000059;*/
	background-color: #427E93;
	text-align:center;
	margin: auto;
	margin-bottom: 0%;
	border-radius: 5px;
	box-shadow: 0px 0px 20px 5px #e5e5f2;
	padding: 2px;}
form {
	text-align: center;
	margin: 0%; }
a.menu:link {
	color: white;
	text-decoration:none;}
a.menu:visited {
	color: white; }
a.btn:link {
	text-decoration: underline; }
.arr{
	width: 1em;
	height: 1em;    
}
.title {
	text-decoration: underline;
	text-align: center; }
/* styling for network boxes */
.asos-network-text{  color: #FFC33B;}
.asos-network-bg{  color: #000000;  background-color: #FFC33B;}
.asos-network{  background-color: #000000;  color: #FFC33B;  padding: 1px;  border: 1px solid black;}
.awos-network-text{  color: #009F81;}
.awos-network-bg{  color: #000000;  background-color: #009F81;}
.awos-network{  background-color: #000000;  color: #009F81;  padding: 1px;  border: 1px solid black;}
.buoy-network-text{  color: #FF5AAF;}
.buoy-network-bg{  color: #000000;  background-color: #FF5AAF;}
.buoy-network{  background-color: #000000;  color: #FF5AAF;  padding: 1px;  border: 1px solid black;}
.cman-network-text{  color: #00FCCF;}
.cman-network-bg{  color: #000000;  background-color: #00FCCF;}
.cman-network{  background-color: #000000;  color: #00FCCF;  padding: 1px;  border: 1px solid black;}
.cocorahs-network-text{  color: #9F0162;}
.cocorahs-network-bg{  color: #FFFFFF;  background-color: #9F0162;}
.cocorahs-network{  background-color: #FFFFFF;  color: #9F0162;  padding: 1px;  border: 1px solid black;}
.coop-network-text{  color: #FFB2FD;}
.coop-network-bg{  color: #000000;  background-color: #FFB2FD;}
.coop-network{  background-color: #000000;  color: #FFB2FD;  padding: 1px;  border: 1px solid black;}
.ecoext-network-text{  color: #009F1B;}
.ecoext-network-bg{  color: #000000;  background-color: #009F1B;}
.ecoext-network{  background-color: #000000;  color: #009F1B;  padding: 1px;  border: 1px solid black;}
.econet-network-text{  color: #A40122;}
.econet-network-bg{  color: #FFFFFF;  background-color: #A40122;}
.econet-network{  background-color: #FFFFFF;  color: #A40122;  padding: 1px;  border: 1px solid black;}
.nos-network-text{  color: #008DF9;}
.nos-network-bg{  color: #000000;  background-color: #008DF9;}
.nos-network{  background-color: #000000;  color: #008DF9;  padding: 1px;  border: 1px solid black;}
.raws-network-text{  color: #FF6E3A;}
.raws-network-bg{  color: #000000;  background-color: #FF6E3A;}
.raws-network{  background-color: #000000;  color: #FF6E3A;  padding: 1px;  border: 1px solid black;}
.threadex-network-text{  color: #666666;}
.threadex-network-bg{  color: #FFFFFF;  background-color: #666666;}
.threadex-network{  background-color: #FFFFFF;  color: #666666;  padding: 1px;  border: 1px solid black;}
.uscrn-network-text{  color: #8400CD;}
.uscrn-network-bg{  color: #FFFFFF;  background-color: #8400CD;}
.uscrn-network{  background-color: #FFFFFF;  color: #8400CD;  padding: 1px;  border: 1px solid black;}
#table {
	margin:auto;}
#metadatastyle{
	padding: 0px 0% 5px 30%;
	display:inline;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 5px;
	text-decoration: underline;}
#infotext {
	display: inline; 
	padding: 5px;}
#colorpalette{
	margin:0;
	width: 20px;
	height: 20px;
	float:left;}
.ol-zoom{
	position: absolute;
	top: 0.1em;
	left: 0em;
	right: auto;
	bottom: auto;
	margin: 2px;
}
.ol-zoom .ol-zoom-in{
	position: absolute;
	left: 2.25em;
	width: 1.5em;
}
.ol-zoom .ol-zoom-out{
	position: absolute;
	left: 4em;
	width: 1.5em;
}
#map-controls{
	background-color: #427E93;
}
.map-button{
	color: white;
	/*background-color: rgba(0,60,136,.7);*/
	/*background-color: #427E93;*/
	background-color: #427E93;
}
.map-button-old{
	/*color: rgba(0,60,136,.7);*/
	color: #427E93;
	background-color: white;
}
.map-button,.menu-button,.menu-button-close,.menu-button-open{
	position: relative;
	display: inline-block;
	/*font-size: 1.25em;*/
	cursor: pointer;
	border: none;
}
.menu-button, .map-button{
	margin: 0.1em 0;
}
.menu-button i, .map-button i{    	
	padding: 0.1em 0.25em;
	font-size: 1.375em;
	border-radius: 4px;
}
.menu-button-close-old, .menu-button-open-old{
	position: relative;
	display: inline-block;
	font-size: 1em;
	height: auto;
	width: auto;
    	margin: 2px;
	cursor: pointer;
}
.menu-button-open{
	color: white;
	/*background-color: #000059;*/
	background-color: #427E93;
}
.menu-button-close{
	color: white;
	background-color: #404040;
}
#choose_legend_div, .menu-button, .menu-button-close, .menu-button-open,.hourly, .daily{
	cursor: pointer;
}
#download_button {
    	/*left: 2.5em;*/
    	/*right: auto;*/
	/*top: 0.1em;*/
    	/*bottom: auto;*/
    	margin: 2px; 
	z-index: 1;
}
.arrow-up, .arrow-down{
	float: right;
	position: relative;
	right: 1em;
	/* top: 10px; */
	text-decoration: none;
	/*padding: 0 5px 0 5px; */
}
.menu-icon{
	float: left;
	position: relative;
	left: 0.5em;
	/*color: white;*/
	width: 1em;
	height: 1em;
	/*background-color: #000059;*/
	/*border: 2px solid #000059;*/
}
.arrow-down2{
	-webkit-transform: rotate(90deg);
	-moz-transform: rotate(90deg);
	-o-transform: rotate(90deg);
	-ms-transform: rotate(90deg);
	transform: rotate(90deg); }
.arrow-up2{
	-webkit-transform: rotate(-90deg);
	-moz-transform: rotate(-90deg);
	-o-transform: rotate(-90deg);
	-ms-transform: rotate(-90deg);
	transform: rotate(-90deg); }

#menu_icon {
	float: left;
	padding-left: 5px;
	padding-bottom: 5px;
	cursor: pointer;
	/*-webkit-transform: rotate(180deg);*/
	/*-moz-transform: rotate(180deg);*/
	/*-o-transform: rotate(180deg);*/
	/*-ms-transform: rotate(180deg);*/
	/*transform: rotate(180deg);*/
}

#bases {
	position: relative;
	margin: 10px; }
#total_legend {
	height: 1.5em;
	width: inherit;
	display: inline-block;
	margin: 0;
	background-color:rgba(255,255,255,0.80);
	text-align: center;
}
#legend, #numbers{
	display: flex;
	flex-wrap: wrap;
        flex-direction: row;
	/*font-size: 0.75em;*/
	/*height: 1.5em;*/       
	line-height: 1.5em;       
	text-align: center;
	background-color: white;
        
}
#legend div{
	font-weight: bold;
	margin: 3px 0;
	padding: 0 3px;
}
div.color{
	vertical-align: middle;
	text-align: center;
	word-wrap: normal;
}
.legend_button {
	position:fixed;
	bottom: 96%;
	margin: 5px 0 0px 0px;
	z-index: 100;}

#legend_button{ 
	z-index: 100; }


#datediv {	
	background-color:rgba(255,255,255,0.80);
	padding: 5px;
	}

#overlaydiv {
	background-color:rgba(255,255,255,0.80);
	padding: 5px;
	text-align: left;}

#go {
	background-color: white;
	border-radius: 4px;
	border: 1px solid #000059;
	width: 100%;
	box-shadow: 0 8px 16px 0 rgba(0,0,0,.2); }

#stationCount {
	float: right;
	position: relative;
	
	padding: 2px;
	text-align: center;
	border-radius: 4px;
	background-color: rgba(255,255,255,1);
	color: black;
 }

#menu-close2{
	width: auto;
	height: 30px;
	max-height: 30px;
	vertical-align: middle;
	margin: 1em;
	background-color: #000059;
}
.legend_button {
	display: none; }
	

#logo_bottom {
	display: none;
	opacity:1;
	position: absolute; 
	right: 1.25em;
	bottom: 2em;
	height: 60px;
	width: auto;
}
/* Items for NWS WWA */
/* Styles for the map popup */
#map_popup {
 display: block;
 width: 250px;
 background-color: #FFFFFF;
 border-radius: 4px;
 padding: 5px;
 box-shadow: 2px 2px 1px rgba(0, 0, 0, 0.75);
 font-size: 12px;
 font-family: UniversLight,arial,sans-serif;
}
#map_popup:after {
 content: '';
/* position: absolute; */
/* top: 100%; */
/* left: 50%; */
 margin-left: -8px;
 width: 0;
 height: 0;
 border-top: solid 8px #FFFFFF;
 border-left: solid 8px transparent;
 border-right: solid 8px transparent;
}
.map_popup_title {
 display: block;
 padding: 4px;
 background-color: #CEDAEF;
 border-bottom: 2px solid #3E61A2;
 color: #3E61A2;
 font-size: 14px;
 font-weight: bold;
}
.map_popup_close {
 float: right;
 cursor: pointer;
}
.ui-slider .ui-slider-handle {
    height: 15px;
    width: 5px;
    padding-right: 5px; //add this
}


/* Responsive */
@media (max-width: 800px) {
  .flex-container2 {
  }
}

#map-controls > button > i{
  font-size: 1rem;
}
:root{
  --bs-body-font-family: Univers;
}
.accordion-button:not(.collapsed){
  --bs-accordion-btn-bg: white;
  --bs-accordion-active-bg: #666;
  --bs-accordion-active-color: white;
}
.accordion-button:not(.collapsed)::after{
   --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

.accordion-button.collapsed{
  --bs-accordion-btn-bg: #427E93;
  --bs-accordion-btn-color: white;
  --bs-accordion-active-color: white;
  --bs-accordion-active-bg: #666;
}
.accordion-button.collapsed::after{
   --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}
.btn-primary{
  --bs-btn-bg: #427E93;
  --bs-btn-color: white;
  --bs-btn-hover-bg: #008473;
  --bs-btn-hover-color: white;
  --bs-btn-disabled-bg: #999999;
}