/*
 * @author JBData 2018-07
 */
/* html {text-align: center;} */
/* body {background: rgba(255,255,255,1.0); background-color: rgba(255,255,255,1.0); font-family: 'comic sans', Arial, sans-serif;} */
body {font-family: 'comic sans', Arial, sans-serif; margin: 1px}
table.global {background: #FFF; color: #000; border-width: 0px; border-style: solid; border-color: gray; border-collapse: collapse }
th.border {border-width: 1px; border-style: solid; border-color: gray;}
tr.border {border-width: 1px; border-style: solid; border-color: gray;}
td.border {border-width: 1px; border-style: solid; border-color: gray;}

/* body {font: Arial;} */
a:link {text-decoration: none;}
#MapboxContainer {width: 100%; height: 100%; border: 1px solid lightgray;}
/* #Mapbox {position: relative; top:0; bottom:0; width: 100%; height: 250px;} */
#Mapbox {position: relative; top:0; bottom:0; width: 100%; height: 510px;}
#Status1 {display: block; font-family: 'comic sans', Arial, sans-serif; font-size: 12px; font-weight: bold;}
#Status2 {display: block; font-family: 'comic sans', Arial, sans-serif; font-size: 12px; font-weight: bold;}
.mapboxgl-popup {max-width: 400px; font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;}
#Play {height: 25px; width: 50px; font: 'comic sans', 14px Arial, sans-serif;}
.buttonStyle {height: 25px; width: 140px; font: 'comic sans', 14px Arial, sans-serif;}
.buttonStyle2 {height: 25px; width: 140px; font: 'comic sans', 14px Arial, sans-serif; font-weight: bold;}
.buttonStyle1 {height: 25px; width: 150px; font: 'comic sans', 14px Arial, sans-serif; color:blue; font-weight: bold;}
.info {padding: 6px 8px; font: 14px/16px Arial, Helvetica, sans-serif; background: white; background: rgba(255,255,255,0.8); box-shadow: 0 0 15px rgba(0,0,0,0.2); border-radius: 5px; } 
.info h4 { margin: 0 0 5px; color: #777;}
.legend {text-align: left; line-height: 18px; color: #555;} 
.legend i {width: 18px; height: 18px; float: left; margin-right: 8px; opacity: 0.7;}
/* #control {position: absolute; margin: 10px; width: 240px; background-color: white; padding: 10px 20px;} */
#control {margin: 0px; width: 170px; background-color: white; border: 0px solid lightgray; padding: 10px 10px;}
h1 { font-size: 20px; line-height: 30px;}
h2 { font-size: 14px; line-height: 20px; margin-bottom: 10px;}
.session {margin: 0px; border: 0px solid lightgray;}
.row {margin: 0px; height: 18px; width: 100%;}
/* .colors {background: linear-gradient(to right, #2DC4B2, #3BB3C3, #669EC4, #8B88B6, #A2719B, #AA5E79); margin-bottom: 5px;} */
.colors {background: linear-gradient(to right, #A4A4A4, #FF0000); margin-bottom: 5px;} 
.labelRight {width: 47%; display: inline-block; text-align: right; border: 0px solid lightgray;}
.labelLeft {width: 47%; display: inline-block; text-align: left; border: 0px solid lightgray;}
.filters {display: inline-block;}
.heatmap {width: 15%; display: inline-block; text-align: center;}
.polluantLabel {font-size: 12px;}
.checkboxLabel {font-size: 12px; padding-left: 10px;}
.checkbox-container input[type="checkbox"]{display:inline-block;}
.checkbox-container label{display:inline;}
/* Slider */
#SliderLabel {display: block; border: 0px solid black; width: 170px; font-family: 'comic sans', Arial, sans-serif; font-size: 12px; font-weight: bold;}
#TimeSlider {margin: 10px; height: 12px; width: 92%;}
/* noUiSlider */
#noUISliderContainerDiv {height: 70px;}
.noUi-tooltip {display: none;}
.noUi-active .noUi-tooltip {display: block;}
/* plotly range slider */
#RSliderLabel {display: block; border: 0px solid black; width: 170px; font-family: 'comic sans', Arial, sans-serif; font-size: 12px; font-weight: bold;}
#RSlider {height: 180px; border: 0px solid black;}
#RSliderContainer {border: 0px solid red;}
#cont {position: relative; width: 400px;}
#zero {position:absolute; left:50%; color: lightgray;}
/* #rangeInput {margin-top: 20px; width: 410px;} */
/* Material */
#menu_container_0 {
  margin-top: 40px;
  margin-left: 0px;
  /*margin-top:70px;*/
  position: absolute;
}
md-checkbox {margin: 8px; cursor: pointer; padding-left: 0px; padding-right: 0; line-height: 26px; min-width: 18px; min-height: 18px;}
/* md-radio-button.md-checked.P6001 .md-off {border-color: blue;} */
/* md-checkbox.md-checked.P6001 .md-icon {background-color: rgba(0, 255, 0, 0.87);} */
md-radio-button.md-checked.P1 .md-on {background-color: rgba(255, 165, 0, 1.00);}
md-radio-button.md-checked.P1 .md-off {border-color: rgba(47, 79, 79, 1.00);}
md-radio-button.md-checked.P5 .md-on {background-color: rgba(139, 0, 139, 1.00);}
md-radio-button.md-checked.P5 .md-off {border-color: rgba(47, 79, 79, 1.00);}
md-radio-button.md-checked.P7 .md-on {background-color: rgba(0, 139, 139, 1.00);}
md-radio-button.md-checked.P7 .md-off {border-color: rgba(47, 79, 79, 1.00);}
md-radio-button.md-checked.P8 .md-on {background-color: rgba(165, 42, 42, 1.00);}
md-radio-button.md-checked.P8 .md-off {border-color: rgba(47, 79, 79, 1.00);}
md-radio-button.md-checked.P10 .md-on {background-color: rgba(20, 20, 20, 1.00);}
md-radio-button.md-checked.P10 .md-off {border-color: rgba(47, 79, 79, 1.00);}
md-radio-button.md-checked.P6001 .md-on {background-color: rgba(128, 0, 128, 1.00);}
md-radio-button.md-checked.P6001 .md-off {border-color: rgba(47, 79, 79, 1.00);}
#PlayPauseButton {width: 30px; height: 40px; padding-left: 0px; padding-right: 0px; padding-bottom: 0px; padding-top: 0px;} 
#PlayPauseIcon {width: 40px; height: 40px; font-size: 40px;}
.md-icon-button.size-16 {width: 40px; height: 40px; font-size: 40px;}
.material-icons.size-16 {font-size: 16px;}
.material-icons {font-size: 30px;}
.material-radios {font-size: 14px;}
md-checkbox.md-checked.material-radios .md-icon {background-color: rgba(0, 255, 0, 0.47);}
md-checkbox.md-checked.material-checkbox .md-icon {background-color: rgba(0, 0, 255, 0.8);}
md-checkbox {font-size: 14px;}
md-radio-button.md-checked.material-radios .md-on {background-color: rgba(0, 255, 0, 0.87);}
md-radio-button.md-checked.material-radios .md-off {border-color: rgba(47, 79, 79, 1.00);}
#checkBoxContainerDiv { margin-top: 0px; margin-bottom: 0px; margin-right: 0px; margin-left: 0px; }
#red-slider .md-sign, #red-slider .md-sign { background-color: blue; border-top-color: blue; }
#red-slider .md-sign:after, #red-slider .md-sign { border-top-color: blue; }