/* pointer-events:none so elements don't interfere with range selector*/
* {
	font-family: "Helvetica", "Arial", "sans-serif", "Century Gothic";
}
/* disable double tap zoom on touch devices */


:root {
	--margin: 15px;
	--background1:white;
	--fontcolor:rgb(0,0,0);
	--graphcolor:rgb(0,0,0);
	--graphcolorlight:rgba(0,0,0,0.2);
	--selectcolor: rgb(239, 239, 239);
	--selectcolor_hover: rgb(221, 221, 221);
	--buttonwide: 150px;
	--buttonnormal: 80px;
	--linkcolor: rgb(3,122,255);
	--modalcolor: rgba(255,255,255,0.5);
	--modalcolor_nobackdropfilter: rgba(255,255,255,1);
	--modalpadding: 100px;
	--hoverline_color: rgb(0,0,0);
}

/*
@media (prefers-color-scheme: dark) {
	:root {
		*/
[data-theme="dark"] {
	--background1:rgb(28,28,28);
	--fontcolor:rgb(240,240,240);
	--graphcolor:rgb(220,220,220);
	--graphcolorlight:rgba(150,150,150,0.8);
	--selectcolor: rgb(99, 99, 99);
	--selectcolor_hover: rgb(70, 70, 70);
	--modalcolor: rgba(100,100,100,0.6);
	--modalcolor_nobackdropfilter: rgb(45,45,45);
	--hoverline_color: rgb(175,175,175);
}
	/*
	}
}
*/

/*Overrides for Small Screens*/
@media (max-width:600px) { 
	:root {
		--margin: 0;
		--modalpadding: 0px;
		--buttonwide: 120px;
		--buttonnormal: 70px;
	}
}

* {
	touch-action: manipulation;
	-webkit-touch-callout: none; /*prevent the long touch text highlight on iOS*/
	color: var(--fontcolor);
}
/*For Spinner*/
html.wait, html.wait * {
	cursor:wait !important;
	pointer-events: none !important;
}
a.link {
  color: var(--linkcolor);
  text-decoration: none;
}
.legend, .ylegend, .ylegend2, .xlegend, .focus>text, .tick>text {
	fill: var(--fontcolor);
}
.boxwhisker>line {
	stroke: var(--graphcolor);
}

html, body {
	margin: 0px;
	background-color: var(--background1);
	-webkit-text-size-adjust: 100%; /*preserves html font size when orientation changes */
}
#wrapper {
	position: relative;
	min-height: 101vh;  /*important b/c we want the scroll bar to plot
											 If the scroll bar is not there on load, it screws up the
											 width calculations./*
	overflow-x: hidden; /*Keep any overflow specifications off, this will break
												the stick header.  You could do overflow-x: hidden with
												height:100%, but that will break the mobile UI minimize
												on scroll*/
}
.mainsvg {
	/*float: left; Float left will break the image capture and sticky header*/
	touch-action: pan-y pinch-zoom;
	/* Disable long press select on graph */
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	background: var(--background1);
	user-select: none;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
#mapid {
	height: 400px;
	width: 300px;
}
#maplocations {
	width: 300px;
	background: var(--background1);
	border: none;
	appearance: none;
}
#settingstable {
	border-spacing: 5px;
}
#settingstabletitlemain{
	font-size: 1.2em;
}
.settingstabletitle {
	font-weight: bold;
	font-size: 1.1em;
}
#settingstable td {
	vertical-align: middle;
}
#settingstable tr > :nth-child(1) {
	width: 300px;
	text-align: left;
}
#settingstable tr > :nth-child(2) {
	text-align: center;
	width: 90px;
}
#settingstable .border {
	width: 20px;
	border: 2px solid black;
	display: inline-block;
}
#settingstable .center {
	display: inline-block;
	width: 120px;
}
#settingstable tr > :nth-child(3) {
	width: 250px;
	text-align: center;
}
/* For Mozilla Firefox */
::-moz-selection {
	color: none;
	background: none;
}
#maplegendtext {
	color: black;
	background-color: rgba(0, 255, 255, 0.8);
	padding: 5px;
	border-radius: 10px;
	margin-top: 1.1em;
	font-size: 1.1em;
	text-align: center;
	animation: fadein 1s;
	-moz-animation: fadein 1s; /* Firefox */
	-webkit-animation: fadein 1s; /* Safari and Chrome */
	-o-animation: fadein 1s; /* Opera */
	font-weight: 400;
}
@keyframes fadein {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}
@-moz-keyframes fadein {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}
@-webkit-keyframes fadein {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}
@-o-keyframes fadein {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}
.select2-selection__rendered {
	color: var(--linkcolor) !important;
	font-weight: bold;
}
/* Don't display the drop down arrow */
.select2-selection__arrow {
	display: none;
}
/*remove blue outline after selection on select box */
span.select2-selection.select2-selection--single {
	outline: none;
	border: none;
}
.select2-container--default .select2-selection--single .select2-selection__rendered, .select2-results, .select2-search, .select2-search--dropdown, .select2-container--default, .select2-selection--single {
	background-color: var(--background1) !important;
}
.select2-search__field {
	background-color: var(--selectcolor);
}

.focus circle {
	fill: none;
	stroke: steelblue;
	pointer-events: none;
}
.hover-line {
	stroke: var(--hoverline_color);
	stroke-width: 1px;
	stroke-dasharray: 3, 3;
	pointer-events: none;
}
.area,
.box,
.boxmedian,
.boxwhisker,
.circle,
.bar {
	pointer-events: none;
}
/* select tag g attribute "clip-path"
    select tag text in tag g */
g[clip-path],
g > text {
	pointer-events: none;
}

.parent {
	text-align: center;
}
.yaxis,
.yaxis2,
.xaxis {
	--base-size: 0.65;
}
.ylegend,
.ylegend2 {
	--base-size: 0.85;
}
.legendtext {
	--base-size: 0.9;
}
.mousereadout {
	--base-size: 1.1;
}
#probexceeddiv {
	padding-top: 1em;
}
#probexceeddiv > label {
	vertical-align: middle;
	margin-left: 1em;
	line-height: 1.75em;
}
#probexceeddiv > label > * {
	vertical-align: middle;
	height: 1.75em;
	background-color: rgb(239, 239, 239);
	border: none;
	color:black;
}
#probexceeddiv > label > *:focus {
	outline: none;
}
#probexceedinput {
	width: 4em;
	height: 1.75em;
	vertical-align: middle;
	color:black;
}
#probexceeddiv > select {
	cursor: pointer;
}
#probexceeddiv option {
	color: black;
}
.slidershort {
	-webkit-appearance: none;
	/* Missing semicolon below? */
	width: 200px;
	margin: 0;
	/* background: rgb(209,207,212); */
	background: var(--selectcolor);
	outline: none;
	opacity: 1;
}
.slidershort:hover {
	opacity: 0.7;
}

.slidershort::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 1.75em;
	height: 1.75em;
	background: rgb(44, 234, 147);
	border-style: solid;
	border-color: black;
	border-width: 1px;
	cursor: pointer;
}

.slidershort::-moz-range-thumb {
	width: 1.75em;
	height: 1.75em;
	background: rgb(44, 234, 147);
	border-style: solid;
	border-width: 1px;
	border-color: black;
	cursor: pointer;
}

.sliderdiv {
	transition: 0.5s;
	display: inline-block;
}
/* .slidercontainer {
	display: table-cell;
	vertical-align: middle;
} */

.nouislider {
	height:0.5em !important;
}
.slidertext {
	margin:0.5em 0;
	font-size: 0.8em;
}

.slider {
	width: 100%;
	-webkit-appearance: none;
	height: 0.6em;
	margin: 0;
	background:var(--selectcolor);
	outline: none;
	opacity: 1;
	vertical-align: middle;
	border: none;
	border-radius: 0;
}
.sliderreverse {
	direction: rtl;
}

.slider:hover {
	opacity: 0.7;
}

.noUi-handle:before, .noUi-handle:after {
	display: none;
}
.noUi-handle {
	outline: none;
	box-shadow: none;
}
.noUi-handle:focus {
  outline: none;
}
.noUi-base {
	background:var(--selectcolor);
}
.noUi-handle, .noUi-handle-lower, .slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 22px !important;
	height: 22px !important;
	border-radius: 100% !important;
	background: rgb(44, 234, 147);
	border-style: solid;
	border-color: black;
	border-width: 0.0px;
	cursor: pointer;
	vertical-align: middle;
}

.slider::-moz-range-thumb {
	width: 22px;
	height: 22px;
	border-radius: 100%;
	background: rgb(44, 234, 147);
	border-style: solid;
	border-width: 1px;
	border-color: black;
	cursor: pointer;
	vertical-align: middle;
}


.contact {
	text-align: center;
	font-size: 0.8em;
	padding: 0.3em;
}
.disclaimer {
	text-align: center;
	font-size: 0.7em;
	padding-bottom: 1em;
}
.red {
	color: red;
	font-weight: bold;
}

.inner {
	/* this will stack divs on top of each other */
	position: absolute;
	/* text-align: center; */
	/* vertical-align: middle; */
}

#blur {
	letter-spacing: 0.2em;
	font-size: 1.7em;
	line-height: 2em;
	color: rgb(0,0,0,0.6);
	margin-left: 1em;
	color: var(--fontcolor);;
}
table,
th,
td {
	/* border: 1px solid black; */
	vertical-align: top;
	border: 0;
	padding: 0;
}
td.content {
	padding-top: 15px;
}
#logotable {
	margin: 0;
	border-collapse: collapse;
}
table {
	margin: auto;
}
#custompoint {
	text-decoration: none;
	color: var(--linkcolor)
}

.focustext,
.readouttext {
	/*
  
  */
	--base-size: 0.9;
	text-shadow: -1px -1px 1px #000, 1px -1px 1px #000, -1px 1px 1px #000, 1px 1px 1px #000,
		0px -1px 1px #000, 0px 1px 1px #000, -1px 0px 1px #000, 1px 0px 1px #000, 0px 0px 1px #000,
		0px 0px 2px #000, 00px 0px 3px #000, 0px 0px 4px #000, 0px 0px 5px #000;
	fill: white !important;
	font-family: "Helvetica", "Century Gothic", "Arial", "sans-serif";

	/*
  font-weight:bold;  
    color: white;
    -webkit-text-stroke: 3px #E21F03;
    */
}
#title, #datetitle {
	text-align: center;
	font-weight: bold;
	font-size: 1em;
	margin: 0%;
}

.boxwhiskerinfo {
	display:inline;
	font-size: 0.75em;
}
.boxwhiskerinfolink {
	cursor: pointer;
	display: inline;
	color: var(--linkcolor);
}
#titles {
	top: 0px;
	padding-top: 0.0em;
	background-color: var(--background1);
	position: -webkit-sticky;
  position: -moz-sticky;
  position: -ms-sticky;
  position: -o-sticky;
	position: sticky;
	text-align: center;
}
label.short {
	width: 80px;
	display: inline-block;
	text-align: left;
	line-height: 1em;
}
.fa-cog {
	background-color: rgba(0, 0, 0, 0) !important;
}
/* Dropdown Button */
.dropbtn {
	vertical-align: bottom;
	background-color: var(--selectcolor);
	color: var(--fontcolor);
	padding: 0px;
	height: 22px;
	padding-left: 5px;
	padding-right: 5px;
	border: none;
	margin: 4px 2px 0 2px;
	width: var(--buttonwide);
	outline: none; /*removed blue outline when selected */
}
.pointer {
	cursor: pointer;
	width: 40px;
	height: 22px;
}
/* select the td elements in tools */
#tools td {
	vertical-align: bottom;
	padding: 10px;
}
.smallbutton {
	vertical-align: bottom;
	width: 30px;
	cursor: pointer;
}
.smallbutton:active,
.pointer:active {
	background-color: rgb(44, 234, 147);
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
	position: relative;
	display: inline-block;
	vertical-align: bottom;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
	display: none;
	position: absolute;
	background-color: var(--selectcolor);
	min-width: var(--buttonwide);
	max-height: 400px;
	margin: 0 2px 0 2px; /*left/right should match the margin in dropbtn*/
	overflow: auto;
	z-index: 2;
}

/* Links inside the dropdown */
.dropdown-content div {
	color: var(--fontcolor);
	padding: 4px 16px;
	text-decoration: none;
	display: block;
	cursor: pointer;
}
.menu {
	width: var(--buttonwide);
}
.brush {
	touch-action: none;
}
.datemenu {
	width: var(--buttonnormal);
	min-width: var(--buttonnormal);
}
/* Change color of dropdown links on hover */
.dropdown-content div:hover {
	background-color: var(--selectcolor_hover)
}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
	display: block;
}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
	background-color: rgb(44, 234, 147);
}

.tooltip {
	position: relative;
	display: inline-block;
	border-bottom: 1px dotted black;
	padding-top: 2%;
}

.tooltip .tooltiptext {
	visibility: hidden;
	width: 300px;
	background-color: black;
	color: #fff;
	text-align: left;
	border-radius: 6px;
	padding: 10px;
	margin-left: 0px;

	/* Position the tooltip */
	position: absolute;
	z-index: 10;
}

.tooltip:hover .tooltiptext {
	visibility: visible;
}

/* The Modal (background) */
.modal {
	/*display: none; /* Hidden by default */
	visibility: hidden;
	position: fixed; /* Stay in place */
	z-index: 999; /* Sit on top */
	left: 0;
	top: 0;
	width: 100%; /* Full width */
	height: 100%; /* Full height */
	text-align: center;
	overflow: auto; /* Enable scroll if needed */
	overflow-x: hidden; /*disable left right movement*/
	background-color: rgba(0, 0, 0, 0.0); /* Black w/ opacity */
}
/* Modal Content */
.modal-content {
	backdrop-filter: blur(15px);
	-webkit-backdrop-filter: blur(15px);
	background-color: var(--modalcolor_nobackdropfilter);
	margin: auto;
	margin-top: var(--modalpadding); /* Location of the box */
	padding: 20px;
	border: 1px solid #888;
	min-width: 300px;
	max-width: 1000px;
	width: 90%;
	opacity: 0.0;
	transform: scale(0.5);
	-webkit-transition: 0.4s;
	-moz-transition: 0.4s;
	-o-transition: 0.4s;
	transition: 0.4s;
}
@supports ((-webkit-backdrop-filter: blur(2em)) or (backdrop-filter: blur(2em))) {
	.modal-content {
		backdrop-filter: blur(15px);
		-webkit-backdrop-filter: blur(15px);
		background-color: var(--modalcolor);
	}
}


.modalactive {
	visibility: visible;
	opacity: 1;
	transform: scale(1.0);
}

/* The Close Button */
.close {
	color: var(--fontcolor);
	float: right;
	font-size: 2em;
	font-weight: bold;
}
.close:hover,
.close:focus {
	opacity: 0.5;
	text-decoration: none;
	cursor: pointer;
}

/* Styling for table of custom forecast elements */
#customgrouptableid {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
}
.custom-element {
	display: flex;
	align-items: center;
	margin: 0 5px 3px 0;	
}


/* DONE Modal Content */

/* For toggle switch */
.switch {
	vertical-align: bottom;
	position: relative;
	display: inline-block;
	width: 40px;
	height: 20px;
}
.switch input {
	display: none;
}
.toggleswitch {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #ccc;
	-webkit-transition: 0.6s;
	transition: 0.6s;
}
.toggleswitch:before {
	position: absolute;
	content: "";
	height: 15px;
	width: 15px;
	left: 2.5px;
	bottom: 2.5px;
	background-color: white;
	-webkit-transition: 0.6s;
	transition: 0.6s;
}
input:checked + .toggleswitch {
	background-color: rgb(44, 234, 147);
}
input:focus + .toggleswitch {
	box-shadow: 0 0 1px rgb(44, 234, 147);
}
input:checked + .toggleswitch:before {
	-webkit-transform: translateX(20px);
	-ms-transform: translateX(20px);
	transform: translateX(20px);
}
/* Rounded sliders */
.toggleswitch.round {
	border-radius: 34px;
}
.toggleswitch.round:before {
	border-radius: 50%;
}
/* Done toggle switch */
label.short {
	width: 180px;
	padding-left: 10px;
	display: inline-block;
	text-align: left;
	line-height: 1em;
}
div.shorter {
	display:inline;
	vertical-align: middle;
}
/*
label.shorter {
	width: 50px;
	float:left;
	text-align: left;
	padding-left: 20px;
	line-height: 1.75em;
	font-size: 0.9em;
}
*/

.fa-chart-bar {
	background-color: rgb(44, 234, 147);
}
.fa-balance-scale-left {
	background-color: rgb(110, 240, 255);
}

/* --------- NEW CLASSES FOR SIDE DRAWER --------- */

#flex-wrapper {
	display: flex;
}

#main-content {
	flex: 1;
	transition: all 0.5s;
}
#main-content-table {
	float: left;
	margin-left: var(--margin);
	margin-right: var(--margin);
	border-collapse: collapse;
}

#main-map {
	margin-top: 20px;
}
#main {
	display: inline-grid;
	grid-template-columns: 1fr 1fr;
}

#map-btn {
	position: absolute;
	top: 0;
	right: 0;
	width: 35px;
	height: 35px;
	background-color: #2cea93;
	border: none;
	transition: all 0.5s;
	margin:auto;
	text-align:center;
}
#map-btn-i, #togglecharts {
	color:black;
}
#map-btn-i {
	/*center the icon*/
	font-size: 1.0rem;
	display: inline-block;
	width: 100%;
}

#map-btn:hover {
	cursor: pointer;
	background-color: #71cce9;
}

#map-btn:focus {
	outline: none;
}

#side-drawer {
	position: absolute;
	background: var(--background1);
	overflow: hidden;
	right: 0;
	width:310px;
	text-align: center;
	transition: all 0.5s;
}

.hide-drawer {
	width:0 !important;
}

#slider-wrapper {
	margin-bottom: 10px;
	display: flex;
}

#slider-wrapper .slidercontainer {
	padding-right: 10px;
}