html, body { 
	width: 100%;
	height: 100%;
	margin: 0px;
	/* font-family: 'Open Sans', sans-serif; */
	font-family: 'Roboto', sans-serif;
	padding: 0px 0px 1px 0px;
} 

.header-shadow-content {
	margin: 0px 0px 0px 0px;
	width: 100%;
	height: 10px;
	background: url(../images/head_shadow.png) center;	
}

/*** Commented out 9/15/22 ck **/
/* .hr_green { background-color:rgba(209,235,209,1); color: #000; }
.hr_yellow { background-color:rgba(244,242,87,1); color: #000; }
.hr_orange { background-color:rgba(246,150,50,1); color: #000; }
.hr_red { background-color:rgba(210,20,25,1); color: #fff; }
.hr_magenta { background-color:rgba(139,25,145,1); color: #fff; } */

/* .hr_green { background-color:hsla(120,39%,87%,1); color: #000; }
.hr_yellow { background-color:hsla(59,88%,65%,1); color: #000; }
.hr_orange { background-color:hsla(31,92%,58%,1); color: #000; }
.hr_red { background-color:hsla(358,83%,45%,1); color: #fff; }
.hr_magenta { background-color:hsla(297,71%,33%,1); color: #fff; } */


/*** official colors 4/7/23 ***/
.hr_green { background-color:rgba(232,249,231,1) !important; color: #000; } 
.hr_yellow { background-color:rgba(244,242,87,1); color: #000; }
.hr_orange { background-color:rgba(246,150,50,1); color: #000; }
.hr_red { background-color:rgba(226,47,51,1); color: #fff; }
.hr_magenta { background-color:rgba(122,14,127,1); color: #fff; }

/** override bootstrap table properties **/
.table { 
	--bs-table-bg: tranparent !important;
	--bs-table-color: tranparent !important;
 }

/* .hr_green { background-color:#E8F9E7; color: #000; }
.hr_yellow { background-color:#F4F257; color: #000; }
.hr_orange { background-color:#F69632; color: #000; }
.hr_red { background-color:#E22F33; color: #fff; }
.hr_magenta { background-color:#7A0E7F; color: #fff; } */




/* **************general**************** */

#heatrisk-readout {
	position:absolute;
	top:10px;
	right:45%;
	width:210px;
	height:30px;
	background: white;
	text-align:center;
	filter: alpha(opacity=90);
	-moz-opacity: 0.9;
	opacity: 0.9;
	border: 1px solid #777;
	/* border-radius: 5px; */
	font-weight: bold;
	font-size: 1.2em;
	padding-top:3px;
	padding-left:5px;
	z-index:999;
}

#heatrisk-update {
	position:absolute;
	top:10px;
	left:55px;
	width:215px;
	height:30px;
	background: white;
	text-align:center;
	filter: alpha(opacity=90);
	-moz-opacity: 0.9;
	opacity: 0.9;
	border: 1px solid #777;
	/* border-radius: 5px; */
	/* font-weight: bold; */
	font-size: 0.8em;
	padding-top:6px;
	padding-left:5px;
	z-index:999;
}

#heatrisk-disclaimer {
	position:related;
	top:35px;
	right:45%;
	width:550px;
	height:22px;
	background: white;
	text-align:center;
	filter: alpha(opacity=90);
	-moz-opacity: 0.9;
	opacity: 0.9;
	border: 1px solid #777;
	border-radius: 5px;
	font-weight: bold;
	font-size: 0.9em;
	padding:2px;
	z-index:900;
}

.bg-highlight {
	border-radius: 6px;
	border-color: rgb(33, 37, 41);
}

/* **************override**************** */

@media (min-width: 1300px) { .container { width: 1290px; }}

.esriPopupWrapper .contentPane {
	background-color: #fff;
}

.popover .popover-content ul{ 
    padding-left: 7px;
}


#map-canvas {
	cursor: crosshair;
}

.leaflet-popup-content {
	width:auto !important;
}

.fcst-popup-div {
	opacity: 0.8;
}

img{
    image-rendering: -moz-crisp-edges;
    image-rendering: pixelated; /* Chrome 41+ creates blockiness */
    image-rendering: -o-crisp-edges;
    image-rendering: optimize-contrast;
    -ms-interpolation-mode: nearest-neighbor;
}

.label {
    font-weight: 700;
    text-transform: uppercase;
    text-align: center;
    margin-top: -1em;
}

.label div {
	position: relative;
	left: -60%;
}

.nav-pills .nav-link.active, .nav-pills .show>.nav-link {
    color: #fff;
    /* background-color: #5c636a; */
	background-color: #0058a6;
}

.btn-sm.active {
	background-color: #0058a6;
}

/** leaflet grouped layer control **/
.leaflet-control-layers-group-name{font-weight:700;margin-bottom:.2em;margin-left:3px}.leaflet-control-layers-group{margin-bottom:.5em}.leaflet-control-layers-scrollbar{overflow-y:scroll;padding-right:10px}

.leaflet-container img.leaflet-image-layer {
	max-width: none !important;
}

.leaflet-control-slider {
	margin-bottom: 25px !important;
}