body{
	font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.5;
	color: #212529;
	text-align: left;
}

#district-select{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.selected path{
	fill: #ff00ff;
}
.map-district path:hover{
	fill: #ffff00;
}
#district-map-div{
	max-width: 500px;
	display: inline-block;
	vertical-align: middle;
}
#district-map-div p{
	text-align: center;
}
#Layer_1{
	width: 100%;
	height: auto;
}
#district-status{
	min-width: 300px;
	display: inline-block;
	vertical-align: middle;
	background-color: rgb(135, 206, 235);
	border: 1px solid rgba(0,0,0,.125);
	border-radius: .25rem;
	padding: .5em;
	flex: 1 0 auto;
}
#district-status span{
	display: block;
}
#district-status #status-station-name{
	font-size: 1.1em;
}
#district-status #status-station-last-update{
	font-size: .6em;
}
#district-status #status-station-temp{
	font-size: 2.5em;
	font-weight: bold;
}
#district-status #status-station-wind{
	font-size: .8em;
}
#district-status #status-station-precip{
	font-size: .9em;
}
#district-status #status-station-rh{
	font-size: .9em;
}
#product-select{
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
}
.product-button{
	padding: 15px 20px;
	background: #a692c0;
	color: white;
	font-size: 1.25em;
	margin: 20px;
	border-radius: 16px;
}
.product-button.selected{
	background: #603b8e;
}
.product-button.disabled{
	cursor: default;
	background: #EEEEEE;
}
#obs-panel{
	display: none;
}
#obs-controls #obs-gdd.disabled{
	color: lightgray;
}
.dates-select{
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
}
.dates-select div{
	margin: 1em 1em;
	text-align: center;

}
.dates-select select, .dates-select input{
	display: block;
}
.chart-header *{
	display: block;
	margin-top: .25em;
}
.chart-header .station-label{
	font-size: 1.25em;
}
.chart-header .csv-download{
	margin-top: 1.5em;
	color: #007bff;
}
.chart-header .csv-download:hover{
	color: #0056b3;
	text-decoration: underline;
}
.chart-header .chart-stats{
	text-align: right;
}
#sat-panel{
	display: none;
}

#cl-ch-panel{
}
.scale-button{
	padding: 10px;
	background: #a692c0;
	color: white;
	font-size: 1em;
	margin: 10px;
	border-radius: 16px;
}
.scale-button.selected{
	background: #603b8e;
}
#cl-ch-season-selector,#cl-ch-monthly-selector{
	display: none;
}

#fcst-panel{
	display: none;
}

.panel{
	display: block;
	box-shadow: 0px 1px 3px 0px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 2px 1px -1px rgba(0,0,0,0.12);
	border-radius: 4px;
	box-sizing: border-box;
	width: calc(100% - 24px);
	margin: 12px;
	padding: 16px;
	font-size: 1.5em;
}

/* controls box */
.controls-boxes{
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	align-items: stretch;
}

.controls-box{
	background-color: rgba(250, 244, 244, 0.5);
	border-width: 2px;
	border-style: solid;
	border-color: #e9e9e9;
	padding: 10px;
	border-radius: 16px;
	width: 40%;
	text-align: center;
	margin: .5em 2em;
	flex: 1 0 auto;
}
#obs-panel .controls-box{
}
#cl-ch-panel .controls-box{
}

.controls-title{
	display: block;
	margin: .5em;
	font-weight: bold;
	text-align: center;

}

/* toggle switch */
.toggle-switch {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  width: 40px;
  height: 15px;
}

.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-switch-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
  border-radius: 34px;
}

.toggle-switch-slider:before {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  left: -2.5px;
  bottom: -2.5px;
  background-color: #9c27b0;
  -webkit-transition: .4s;
  transition: .4s;
  border-radius: 50%;
}

.toggle-switch-slider.disabled:before{
	background-color: lightgray;
}

input:checked + .toggle-switch-slider {
  background-color: #c287cc;
}

input:focus + .toggle-switch-slider {
  box-shadow: 0 0 1px #c287cc;
}

input:checked + .toggle-switch-slider:before {
  -webkit-transform: translateX(23px);
  -ms-transform: translateX(23px);
  transform: translateX(23px);
}

/* date picker */
input[type="date"]{
	vertical-align: middle;
	font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
        font-size: .75em;

}

/* spinner */
.chart-spinner {
  display: inline-block;
  position: relative;
}
#district-select .chart-spinner{
	width: 100%;
	height:100%;
}
#obs-panel .chart-spinner{
	width: 100%;
	height: 500px;
}
#cl-ch-panel .chart-spinner{
	width: 100%;
	height: 500px;
}
.chart-spinner div {
  display: inline-block;
  position: absolute;
  left: 8px;
  width: 4%;
  background: #000;
  animation: chart-spinner 1.2s cubic-bezier(0, 0.5, 0.5, 1) infinite;
}
.chart-spinner div:nth-child(1) {
  left: 40%;
  animation-delay: -0.24s;
}
.chart-spinner div:nth-child(2) {
  left: 48%;
  animation-delay: -0.12s;
}
.chart-spinner div:nth-child(3) {
  left: 56%;
  animation-delay: 0;
}
@keyframes chart-spinner {
  0% {
    top: 25%;
    height: 50%;
  }
  50%, 100% {
    top: 40%;
    height: 20%;
  }
}