html {
  overflow: auto;
}

body {
  overflow: hidden;
  padding: 0px;
  margin: 0px;
  font-family: "proxima-nova-alt", Helvetica, Arial, sans-serif;
}

body, html {
  width: 100%;
  height: 100%;
  min-width: 1262px;
  min-height: 750px;
  //overflow: hidden;
}

a {
  cursor: pointer;
}

a:focus, select:focus {
  text-decoration: none;
  outline: none;
}

h1 {
  font-size: 96px;
  margin-top: .3em;
  margin-bottom: 0;
}

h1, h2, h3 {
  text-rendering: optimizeLegibility;
}

#map {
  width: 100%;
  height: 100%;
  min-width: 1262px;
  min-height: 750px;
  position: absolute;
  left: 0px;
  top: 0px;
}

#legendMap {
  height: 550px;
  width: 100%;
  display: none;
  border-radius: 0 0 4px 4px;
}

.header {
  position: absolute;
  min-width: 1262px;
  width: 100%;
  top: 0;
  left: 0;
  background: #262c40;
  color: white;
  font-family: 'Open Sans', "proxima-nova-alt", Helvetica, Arial, sans-serif;
  z-index: 800;
}

.header a {
  color: white;
  font-weight: bold;
  letter-spacing: 0.1em;
  line-height: 1.5em;
}

.header a:visited {
  color: white;
}

.header .brand {
  font-variant: small-caps;
  font-size: 20pt;
}

#headerLinks {
  display: inline-block;
}

#headerLinks>a {
  margin-left: 25px;
  color: #b3d9ff;
}

#headerLinks>a:hover {
  text-decoration: none;
  color: white;
}

#printDownload>span{
  color: #b3d9ff;
  opacity: 1;
  font-size: 24px;
  margin: 3px 20px 0px 0px;
}

#printDownload>span:hover {
  color: white;
}

#headerControls {
  background: #4d5980;
  background: linear-gradient(#56638f, #434d70);
  width: 100%;
  min-width: 1262px;
  position: absolute;
  top: 40px;
  left: 0px;
  height: 40px;
  display: block;
  color: #b3d9ff;
  padding: 5px 15px;
}

#mapTools {
  width: 532px;
  height: 25px;
  display: inline-block;
  float: left;
}

#panelTools {
  width: 195px;
  height: 25px;
  display: inline-block;
  float: left;
}

.layerList {
  display: inline;
}

#curDataLayer {
  width: 200px;
  height: 30px;
  display: inline-block;
  float: left;
  color: rgba(255,0,0,0.5);
  font-weight: bold;
  font-size: 22px;
  margin-left: 15px;
  margin-right: 10px;
  text-align: center;
  padding-left: 5px;
  padding-right: 5px;
  background: rgba(255,255,255,0.5);
  border-radius: 4px;
  border: none;
}

#curDataLayer.activeLayer {
  border: solid 1px lime;
  color: lime;
  background: rgba(255,255,255,0.5);
}

#dataList {
  width: 170px;
  display: inline-block;
  float: left;
  padding: 3px 5px;
  margin: 2px 5px;
}

#dataListDropdown {
  width: 170px;
  display: inline-block;
  position: absolute;
  top: 30px;
  left: 366px;
  background: white;
  border: 1px gray solid;
  border-radius: 0px 0px 4px 4px;
  color: #666666;
  font-size: 13px;
  z-index: 2000;
  display: none;
  box-shadow: 5px 5px 5px rgba(0,0,0,0.3);
}

#overlayList {
  width: 181px;
  display: inline-block;
  float: left;
  padding: 3px 5px;
  margin: 2px 5px;
}

#overlayListDropdown {
  width: 181px;
  display: inline-block;
  position: absolute;
  top: 30px;
  left: 174px;
  background: white;
  border: 1px gray solid;
  border-radius: 0px 0px 4px 4px;
  color: #666666;
  font-size: 13px;
  z-index: 2000;
  display: none;
  box-shadow: 5px 5px 5px rgba(0,0,0,0.3);
}

#baselayerList {
  width: 149px;
  display: inline-block;
  float: left;
  margin-left: 0px;
  padding: 3px 5px;
  margin: 2px 5px 2px 1px;
}

#baselayerListDropdown {
  width: 149px;
  display: inline-block;
  position: absolute;
  top: 30px;
  left: 15px;
  background: white;
  border: 1px gray solid;
  border-radius: 0px 0px 4px 4px;
  color: #666666;
  font-size: 13px;
  z-index: 2000;
  display: none;
  box-shadow: 5px 5px 5px rgba(0,0,0,0.3);
}

.layerName {
  padding: 0px 5px;
}

.layerName:hover {
  color: black;
  background: #f2f2f2;
  cursor: pointer;
  border-radius: 0px 0px 4px 4px;
}

.activeSpecies {
  font-size: 11px;
}

.optDiv {
  border-top: 2px solid rgb(102, 102, 102);
}

.suboptDiv {
  background: gainsboro;
  padding-left: 15px;
}

#bingGeoLocate {
  float: right;
}

#bingGeocoderInput {
  border-radius: 4px;
  border: 1px solid gray;
  padding: 2px 5px;
  height: 24px;
  color: black;
  position: relative;
  top: 3px;
}

#bingGeocoderSubmit {
  margin-left: 0px;
  height: 25px;
  border: 1px solid lightgray;
  background: #00ff00;
  background: linear-gradient(#00ff00, #008000);
  color: #003300;
  opacity: 1;
  text-shadow: 0px 1px white;
  border-radius: 4px;
  position: relative;
  top: 3px;
}

#bingGeocoderSubmit.glyphicon-remove, #bingGeocoderSubmit.fa-times {
  background":"#ff0040;
  background: linear-gradient(rgb(255, 0, 64), rgb(179, 0, 45));
  color: rgb(153, 0, 0);
}

#bingGeocoderSubmit:hover {
  border-color: white;
}

#bingGeocoderInput:hover {
  color: black;
  border-color: black;
}

.hcPanelDivs {
  float: left;
  border-left: 1px solid #262c40;
  position: relative;
  top: -5px;
  height: 40px;
  padding: 8px 2px 5px 2px;
  cursor: pointer;
}

.hcPanelDivs:hover {
  background: rgba(255,255,255,0.2);
}

.hcPanelDivs>span {
  font-size: 18px;
  opacity: 1;
  margin-left: 5px;
  top: 0px;
}

.hcPanelDivs>p {
  display: inline-block;
  margin: 4px 5px 0px 5px;
  font-size: 15px;
  font-weight: bold;
  position: relative;
  top: -3px;
}

#hcAttributesDiv {
  border-right: 1px solid #262c40;
}

.introjs-tooltip {
  direction: ltr;
}

.crossings {
  stroke: black;
  fill: gray;
  opacity: 0.7;
}

.crossings:hover {
  cursor: crosshair;
  stroke: yellow;
  stroke-width: 2px;
  opacity: 1;
}

.pies {
  cursor: pointer;
}

.arc {
  //stroke: #828282;
  //stroke-width: 1px;
}

.arc:hover {
  stroke: yellow;
  stroke-width: 2px;
}

.catchments {
  fill: gray;
  //stroke: whitesmoke;
  stroke: lightgray;
  stroke-width: 1px;
  fill-opacity: 1;
  stroke-opacity: 1;
}

.catchments:hover {
  stroke: magenta;
  stroke-width: 2px;
  cursor: crosshair;
}

.streams {
  stroke: gray;
  stroke-width: 1.5px;
  fill: none;
}

.streams:hover {
  cursor: crosshair;
  stroke-width: 4px;
}

#loadingDiv {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0px;
  left: 0px;
  background: rgba(40,40,40,0.6);
  text-align: center;
  color: black;
  font-size: 4em;
}

#loading {
  margin-top: 200px;
}

#helpDiv, #disDiv {
  display: flex;
  justify-content: center;
  min-height: 750px;
  min-width: 1262px;
}

.introjs-tooltiptext p, h4{
  margin: 0px;
}

.modal {
  position: absolute;
  overflow-y: hidden !important;
  z-index: 3000;
}

.modal-dialog {
  //margin-top: 80px;
}

.modal-open {
  overflow: auto;
}

#infoDiv, #disclaimerDiv {
  width: 50%;
  height: 80%;
  background: rgba(255,255,255,1);
  border: 1px solid black;
  border-radius: 4px;
  font-size: 2em;
  align-self: center;
  min-height: 605px;
  min-width: 1000px;
}

#disclaimerDiv {
  height: auto;
  min-height: 0;
}

#infoDiv p {
  text-align: left;
  font-size: 16px;
  margin: 5px;
}

#disText {
  text-align: center;
  font-size: 16px;
  margin: 5px;
}

.helpHeader {
  font-size: 20px;
  text-align: left;
  background: rgba(0,0,255,0.2);
  padding: 4px;
}

#helpMenu {
  width: 150px;
  display: inline-block;
  float: left;
  margin: 10px;
  text-align: center;
  font-size: 20px;
}

#helpMenu li {
  background: lightgray;
  border-radius: 4px;
}

#helpContent {
  padding: 5px;
  display: inline-block;
  float: left;
  width: calc(100% - 175px);
  height: calc(100% - 193px);
}

.helpDivs {
  display: none;
  max-height: 100%;
  width: 100%;
  overflow-y: auto;
  padding-bottom: 5px;
}

.helpDivs li {
  font-size: 16px;
}

.helpDivs table, .helpDivs th, .helpDivs td {
  font-size: 14px;
  border: solid gray 1px;
  border-collapse: collapse;
  padding-left: 3px;
}

.helpDivs td:nth-child(1), .helpDivs th:nth-child(1) {
  width: 40%;
}

#app_crossings td:nth-child(1), #app_streams td:nth-child(1), #app_catchments td:nth-child(1), #app_crossings th:nth-child(1), #app_streams th:nth-child(1), #app_catchments th:nth-child(1) {
  width: 23%;
}

#app_crossings td:nth-child(2), #app_streams td:nth-child(2), #app_catchments td:nth-child(2), #app_crossings th:nth-child(2), #app_streams th:nth-child(2), #app_catchments th:nth-child(2) {
    width: 16%;
}

#help-videos {
  padding: 10px;
  height: 100%;
  width: 100%;
  cursor: pointer;
}

.video-js {
  width: 600px !important;
  height: 338px !important;
  background-color: white;
  margin: 20px auto 20px auto;
}

.video-js.vjs-ended .vjs-poster {
  display: block;
}

.vjs-tech {
  width: 600px !important;
  height: 338px !important;
}

#helpFunding {
  border: solid black 1px;
  border-radius: 4px;
  padding: 5px;
  margin: 5px;
  display: inline-block;
  float: left;
  width: calc(100% - 10px);
  position: absolute;
  bottom: 0px;
  left: 0px;
  background: white;
}

#fundingLeftImg {
  float: left;
  text-align: center;
  padding-left: 5px;
}

#maDOT {
  height: 60px;
  margin-top: 5px;
  display: block;
}

#usgs {
  height: 55px;
  margin-top: 10px;
}

#fundingRightImg {
  float: right;
  text-align: center;
  padding-right: 5px;
}

#doiLogo {
  height: 70px;
  display: block;
}

#usfs {
  height: 65px;
  margin-top: 5px;
}

#funders {
  text-align: center !important;
  margin-top: 10px !important;
  font-weight: bold;
  margin-top: 10px !important;
  font-size: 17px !important;
}

.brand {
  font-size: 22pt;
}

.tooltip {
  z-index: 3000;
}

.tooltip-inner {
  //max-width: 200px;
  //width: 200px;
  text-shadow: none;
}

.d3Tooltip {
  background: rgba(0,0,0,0.7);
  border-style: solid;
  border-color: white;
  border-width: 2px;
  border-radius: 8px;
  color: yellow;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
  font-weight: bold;
  padding: 7px;
  position: absolute;
  z-index: 3000;
  visibility: hidden;
  white-space: pre-wrap;
  width: 338px;
  height: 296px;
  overflow: hidden;
  text-align: center;
  box-shadow: 5px 5px 5px rgba(0,0,0,0.3);
}

.d3Tooltip span {
  color: white;
  padding: 2px;
  border: solid white 1px;
  border-radius: 4px;
  text-shadow: 1px 1px 1px black;
}

#piechart {
  width: 600px;
  height: 400px;
  margin-top: -55px;
}

.leaflet-container {
  background-color: white;
}

.leaflet-google-layer {
  padding-top: 0px !important;;
}

.leaflet-top {
  margin-top: 100px;
  //background: rgba(255,255,255,0.8);
  //border: solid black 1px;
  //border-radius: 4px;
  pointer-events: visible;
  cursor: initial;
  overflow: visible;
  max-width: 56px;
  min-height: 485px;
  height: 485px;
}

.leaflet-top.leaflet-left {
  z-index: 1002;
}

.leaflet-top .horBorder {
  padding-left: 2px;
  padding-right: 2px;
}

.leaflet-right, .leaflet-left, .leaflet-bottom, .leaflet-top {
  z-index: 1001;
}

.leaflet-bottom {
 z-index: 999;
}

.leaflet-touch .leaflet-control-layers, .leaflet-touch .leaflet-bar {
  border: 0px;
}

.leaflet-touch .leaflet-control-layers-toggle, .leaflet-touch .leaflet-bar a {
  width: 32px;
  height: 32px;
}

.leaflet-control {
  margin: 3px 10px 3px 10px !important;
  box-shadow: 0 1px 5px rgba(0,0,0,0.65);
  float: none;
}

.leaflet-control-layers-toggle {
  width: 32px;
  height: 32px;
}

.leaflet-control-layers {
  width: 32px;
}

.leaflet-control-layers-expanded {
  width: 165px;
  position: absolute;
  z-index: 1002;
  margin-top: 38px;
}

.leaflet-control-zoom {
  font-size: 20px;
}

.leaflet-bar {
  //box-shadow: none;
}

.leaflet-touch, .leaflet-bar a {
  opacity: 1;
  box-shadow: 0 1px 7px #999;
  border-radius: 4px;
  width: 32px;
  height: 32px;
  font-size: 1em;
  font-weight: bold;
  padding-top: 5px;
}

.leaflet-bar a:hover {
  width: 32px;
  height: 32px;
  opacity: 1;
}

.leaflet-bottom .leaflet-control-scale {
  margin-bottom: 0px;
  box-shadow: none;
}

.leaflet-control-scale-line, .leaflet-control-scale-line:not(:first-child) {
  background: rgba(255,255,0,0.4);
  border-style: solid;
  border-width: 1px;
  border-radius: 4px;
  border-color: black;
  margin: 5px;
  margin-left: 0px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  font-weight: bold;
  color: black;
  text-align: center;
}

.leaflet-control-scale-line:hover, .leaflet-control-scale-line:not(:first-child):hover {
  background: rgba(255,255,0,0.8);
}

.glyphicon {
  opacity: 0.5;
  margin-left: 20px;
  font-size: 15px;
  top: 2px;
  cursor: pointer;
}

.glyphicon:hover {
  opacity: 1;
}

.glyphicon-remove, .glyphicon-triangle-top, .glyphicon-triangle-bottom, .fa-times {
  color: black;
  //margin-right: -2px;
  //cursor: pointer;
}

.minimize-button{
  //padding: 0px 2px;
  //margin-right: 5px;
}

.controlHeader {
  font-weight: bold;
  margin: 1px;
}

#controlDiv {
  overflow: hidden;
}

#dataControlDiv {
  overflow: visible;
}

#outputControlDiv {
  min-height: 68px;
}

#controlToggle {
  background: rgba(0,0,0,0.6);
  border: solid 1px black;
  border-radius: 0px 4px 4px 0px;
  height: 100.5%;
  width: 13px;
  position: absolute;
  right: -13px;
  top: -1px;
  cursor: pointer;
}

#controlToggle:hover {
  background: rgba(0,0,0,0.9);
}

.control-caret {
  top: 49%;
  color: white;
  opacity: 1;
}

.introjs-tooltip-reposition {
  left: 10% !important;
  top: 25% !important;
}

.introjs-tooltiptext {
  width: 300px;
}

.hr {
  margin-top: 5px;
  margin-bottom: 5px;
}

.header_icon {
  height: 20px;
  width: 20px;
  margin: 2px;
  border: solid 1px black;
  border-radius: 2px;
  cursor: pointer;
}

.legend {
  width: 100%;
  background: rgba(255,255,255,0.9);
  border: solid;
  border-color: black;
  border-width: 1px;
  border-radius: 4px;
  margin: 0px;
  margin-top: 10px;
}

.legend ul {
  list-style-type: none;
  margin: 0;
}

#leftSideToolsDiv {
  position: absolute;
  top: 50px;
  left: 80px;
  width: 100%;
  max-width: 500px;
  min-width: 500px;
  margin: 0px;
  z-index: 1000;
  max-height: 85%;
  overflow-y: auto;
  overflow-x: visible;
  border-radius: 4px;
}

.legendTitle {
  text-align: left;
  font-size: 24px;
  padding: 5px 15px 0px 15px;
  font-variant: small-caps;
  color: white;
  border-bottom: 1px solid gray;
  background: #90b1d5; /* For browsers that do not support gradients */
  background: linear-gradient(#90b1d5, #598cc0); /* Standard syntax */
  border-radius: 4px 4px 0px 0px;
}

.legendHeader {
  background: rgba(0,0,255,0.2);
  border-top: solid black 1px;
}

#legendDiv {
  position: absolute;
  top: 85px;
  left: 145px;
  width: 100%;
  max-width: 250px;
  min-width: 250px;
  margin: 0px;
  z-index: 1000;
  border-radius: 4px;
  box-shadow: 5px 5px 5px rgba(0,0,0,0.3);
  display: none;
  opacity: 0;
}

#gsLegendDiv {
  position: absolute;
  top: 85px;
  left: 30px;
  width: auto;
  //max-width: 250px;
  //min-width: 250px;
  margin: 0px;
  z-index: 1000;
  border-radius: 4px;
  box-shadow: 5px 5px 5px rgba(0,0,0,0.3);
  display: none;
  opacity: 0;
}

#gsLegendImg {
  border-radius: 4px;
}

#topoLegendDiv {
  position: absolute;
  top: 85px;
  left: 30px;
  width: auto;
  //max-width: 250px;
  //min-width: 250px;
  margin: 0px;
  z-index: 1000;
  border-radius: 4px;
  box-shadow: 5px 5px 5px rgba(0,0,0,0.3);
  display: none;
  opacity: 0;
}

#topoLegendImgDiv {
  background-color: white;
  padding: 10px;
  padding-left: 20px;
  border-radius: 0 0 4px 4px;
}

#topoLegendMetDiv {
  background: white;
  font-weight: bold;
  text-align: center;
  padding-left: 5px;
  padding-right: 5px;
}

.colorLegDiv {
  width: 30px;
  height: 1px;
}

#topoLegMinP {
  margin: 0;
  position: absolute;
  top: 55px;
  left: 60px;
}

#topoLegMaxP {
  margin: 0;
  position: absolute;
  top: 145px;
  left: 60px;
}


#symbologyDiv {
  background: #e6f9ff;
  padding: 5px 0px 5px 15px;
  margin-bottom: 6px;
  border-bottom: 1px solid gray;
  border-top: solid 1px gray;
}

.layerSymbol {
  display: inline-block;
  width: 108px;
}

.legendSymbol {
  display: inline-block;
  height: 16px;
  width: 16px;
  margin-right: 8px;
  position: relative;
  top: -2px;
}

.legendMapped {
  font-size: 13px;
  font-weight: bold;
  color: #598cc0;
  display: inline-block;
  margin-right: 10px;
}

.legendTrans {
  font-size: 13px;
  color: gray;
  display: inline-block;
  margin-right: 10px;
  margin-bottom: 0px;
}

.legendHR {
  margin: 5px 0px 10px 0px;
  border-color: darkgray;
}

.legendUL {
  margin: 5px 0px 3px 0px;
}

.legendBtn {
  margin: 5px 15px 10px 15px;
  width: calc(100% - 30px);
  font-weight: bold;
  font-size: 15px;
  text-shadow: 0px 1px white;
  background: lightgray;
  background: linear-gradient(lightgray, darkgray);
  border-radius: 4px;
  border: solid 2px lightgray;
  height: 37px;
}

.legendBtn:hover {
  border: solid 2px white;
}

.legendBtn:active {
  background: silver;
}

.on_off {
  border-radius: 11px;
  float: right;
  border: 1px solid lightgray;
  position: relative;
  top: -3px;
}

.toggle-on.btn-xs {
  padding-right: 20px;
  background: #ffffe6;
  color: #00cc00;
  font-weight: bold;
  font-size: 13px;
  box-shadow: inset 0px 3px 5px rgba(0,0,0,0.125);
  webkit-box-shadow: inset 0px 3px 5px rgba(0,0,0,0.125);
}

.toggle-on.btn-xs:hover {
  background: #ffffb3;
}

.toggle-off.btn-xs {
  padding-left: 20px;
  font-weight: bold;
  color: darkgray;
}

.toggle-handle {
  border-radius: 10px;
  width: 40px;
  background: linear-gradient(#90b1d5, #598cc0);
  box-shadow: inset 0px 0px 5px 4px rgba(0,0,0,0.2);
  webkit-box-shadow: inset 0px 0px 5px 4px rgba(0,0,0,0.2);
}

.toggle-handle:hover {
  //background: linear-gradient(#c99c9c, #f47171);
  background: linear-gradient(#7ab87a, #52e052);
}

#legendDiv input[type="checkbox"] {
  float: left;
  margin-top: 4px;
  transform: scale(1.2) !important;
}

.legendImg {
  float: right;
  width: 20px;
  height: 20px;
  border-radius: 4px;
  margin-right: 43px;
}

.layerLegendDiv {
  border-top: solid gray 1px;
  border-bottom: solid gray 1px;
  padding: 10px 15px 10px 15px;
  background: white;
  margin-bottom: 6px;
}

#polFilterDiv {
  display: none;
  position: absolute;
  top: 85px;
  left: 380px;
  width: 100%;
  max-width: 429px;
  min-width: 429px;
  margin: 0px;
  z-index: 1000;
  max-height: 85%;
  overflow-y: auto;
  overflow-x: visible;
  border-radius: 4px;
  opacity: 0;
  box-shadow: 5px 5px 5px rgba(0,0,0,0.3);
}

#polFilterSelectDiv {
  text-align: center;
  padding: 10px 15px 10px 15px;
  //border-bottom: 1px solid gray; 
  border-top: 1px solid gray;
  background: white;
  height: 46px;
}

#polFilterConditions {
  max-height: 203px;
  overflow-y: auto;
  overflow-x: visible;
}

.polFilterCond {
  padding: 5px 0px 5px 15px;
  margin: 0px;
  border-top: 1px solid gray; 
  //border-bottom: 1px solid gray; 
  font-size: 13px;
  color: gray;
  background: white;
}

.polFilterCond:hover {
  //border-color: black;
  color: black;
}

.removeCond {
  color: red;
  margin-right: 15px;
}

#attributesDiv {
  display: none;
  position: absolute;
  top: 85px;
  left: 403px;
  width: auto;
  //max-width: 235px;
  min-width: 235px;
  margin: 0px;
  z-index: 1000;
  max-height: 85%;
  overflow-y: auto;
  overflow-x: visible;
  border-radius: 4px;
  opacity: 0;
  box-shadow: 5px 5px 5px rgba(0,0,0,0.3);
}

#attrShow {
  background: #b3bbcc;
  padding: 5px 15px;
  border-top: 1px solid gray;
  display: none;
}

.attrBtn {
  width: 170px;
  display: inline-block;
  margin: 5px 0px;
  background: #d5e7f6;
  color: navy;
  font-weight: bold;
  font-size: 16px;
  border: 1px solid #808bb3;
  border-radius: 4px;
  height: 37px;
}

.attrBtn:hover {
  //border-color: navy;
  //color: navy;
}

#attValuesDiv {
  max-height: 455px;
  overflow-y: auto;
  overflow-x: visible;
  //border-top: solid gray 1px;
  border-radius: 0px 0px 4px 4px;
  //border-bottom: solid gray 1px;
  background: white;
}

#attValuesTable {
  display: none;
  font-size: 13px;
  margin: 0px;
}

#noAttrText {
  margin: 5px 0px 5px 15px;
}

.attTRHead {
  background: #ccf3ff;
  color: #598cc0;
  font-size: 14px;
}

.attTR {
  background: #f2f2f2;
  color: rgba(0,0,0,0.6);
}
  
.attTR:hover {
  //background: rgba(255,255,255,1);
}

.attTRVis {
  background: white;
  color: black;
  //background: rgba(51, 204, 51, 0.2);
}

.attTRVis:hover {
  //background: rgba(65, 182, 196, 0.8);
  //background: rgba(51, 204, 51, 1);
  background: gainsboro;
}

.attTD, .attTH {
  border-top: 1px solid gray;
  border-collapse: collapse;
  padding: 3px;
  padding-left: 15px;
}

.categorical:hover {
  fill-opacity: 0.5;
}

#chartsDiv {
  display: none;
  position: absolute;
  top: 85px;
  right: 30px;
  max-width: 500px;
  min-width: 500px;
  margin: 0px;
  //max-height: 666px;
  overflow-y: visible;
  border-radius: 4px;
  z-index: 1000;
  opacity: 0;
  box-shadow: 5px 5px 5px rgba(0,0,0,0.3);
}

#plotsDiv {
  height: 643px;
  background: white;
  //border-radius: 0 0 4px 4px;
}

#plotsDiv img {
  width: 100%;
  position: absolute;
  top: 29px;
  //border-radius: 0 0 4px 4px;
  cursor: zoom-in;
}

#plotManualSelectDiv {
  padding: 5px;
  text-align: center;
}

#graphsDiv {
 margin-bottom: 5px;
}

.horBorder {
  border-top: 1px solid gray;
  //border-bottom: 0.5px solid black;
  background: white;
  padding: 5px 15px 5px 15px;
}

.horBorder:hover {
  //background: rgba(0,0,255,0.5);
}

.chartsSubTitle {
  color: black;
  margin: 0px;
}  

#filterLayers {
  position: absolute;
  bottom: 0px;
  left: -286px;
  background:  #4d4d4d;
  border: solid gray 1px;
  border-radius: 4px;
  padding: 5px 15px 5px 15px;
  width: 276px;
  display: none;
  border: 1px solid black;
  box-shadow: 5px 5px 5px rgba(0,0,0,0.3);
}

#addChartButton {
  background: #00ff00;
  background: linear-gradient(#00ff00, #008000);
}

#addChartButton.disabled {
  background: lightgray;
  opacity: 0.65;
  color: gray;
  border-color: gray;
}

.chartBtn {
  width: 116px;
  display: inline-block;
  margin: 15px 0px 5px 0px;
}

#cancelChartButton {
  background: #ff0040;
  background: linear-gradient(#ff0040, #b3002d);
  margin-left: 11px;
}

.addChartForm {
  width: 245px !important;
  margin-top: 5px;
  margin-bottom: 5px;
}

#addChartTriangle {
  position: absolute;
  top: 98px;
  left: 248px;
  color: #4d4d4d;
  opacity: 1;
  font-size: 23px;
}

.btn-glyph {
  color: #00b300;
  font-size: 20px;
  margin-left: 0px;
  opacity: 1;
}

.glyphLabel {
  display: inline-block;
  margin: 0px 0px 0px 15px;
  font-size: 14px;
  position: relative;
  top: -4px;
}

#addChartButtonGlyph {
  color: #003300;
}

#addChartButtonGlyph:hover {
  opacity: 1;
}

#addChartButtonGlyph.disabled {
  opacity: 0.5;
}

#addChartButtonGlyph.disabled:hover {
  opacity: 0.5;
}

#cancelChartButtonGlyph {
  color: #990000;
}

table {
  width: 100%;
  margin-bottom: 5px;
}

.cellDiv {
  text-align: center;
}

.filterTitle {
  font-weight: bold;
  margin: 2px;
  text-align: center;
  display: block;
}

.filterAttrList {
  border: solid 1px #666666;
  border-radius: 4px;
  font-size: 13px;
  text-align: left;
  color: #666666;
  //width: 108px;
  background: lightgray;
  background: linear-gradient(#f2f2f2, #cccccc);
  height: 25px;
  cursor: pointer;
  //background: white;
}

.filterAttrList:hover {
  color: black;
  border-color: black;
}

.filterAttrList option {
  background: white;
}

#polFilterDiv .filterAttrList {
  width: 154px;
}

input[type="checkbox"]  {
  margin: 0px 10px 0px 0px;
  position: relative;
  top: 2px;
  left: 4px;
  display: inline-block;
}

.linkLabel {
  margin: 0px 2px 0px 2px;
  font-weight: normal;
}

#totals {
  text-align: left;
}

.hoverDiv {
  padding-left: 15px;
  color: gray;
  font-size: 13px;
}

.hoverDiv:hover {
  color: black;
}

#charts {
  background: rgba(255,255,255,1);
  padding: 0px;
  max-height: 348px; //490px;
  margin-top: 5px;
  width: 400px;
  overflow-y: auto;
  overflow-x: hidden;
}

.msgBackgroundDiv {
  width: 100%;
  min-width: 1262px;
  min-height: 750px;
  height: 100%;
  z-index: 99999;
  position: absolute;
  display: none;
  justify-content: center;
  background: rgba(0,0,0,0.5);
}

#splashScreenDiv {
  align-self: center;
  background: white;
  border: 1px solid black;
  border-radius: 4px;
  font-size: 13px;
  color: black;
  width: 1200px;
  height: 715px;
  min-width: 1200px;
  padding: 15px;
}  

#splashWelcome {
  font-size: 33px;
  font-weight: bold;
  border-bottom: 1px solid gray;
  margin: -15px -15px 0px;
  padding: 0px 15px;
  border-radius: 4px 4px 0px 0px;
  border-bottom: 1px solid gray;
  color: white;
  background: #4d5980;
  background: linear-gradient(#56638f, #434d70);
}

#splashGIF {
  margin: 0px 20px 0px 60px;
  width: 680px;
  overflow: hidden;
  border: 1px solid;
  box-shadow: 9px 9px 8px 2px rgba(0,0,0,0.2);
  border-radius: 4px;
  display: inline-block;
}

#splashButton {
  width: 300px;
  margin-left: 50px;
  position: relative;
  top: -300px;
  height: 50px;
  font-size: 25px;
  border-color: darkgray;
  box-shadow: 9px 9px 8px 2px rgba(0,0,0,0.2);
}

#splashButton:hover {
  border-color: #262626;
}

#joinMessageDiv {
  align-self: center;
  background: white;
  border: 1px solid black;
  border-radius: 4px;
  font-size: 13px;
  color: black;
  width: 400px;
}

#joinMessageButtonDiv {
  text-align: center;
  padding: 10px;
}

#joinMessageButtonDiv > button {
  font-weight: bold;
  font-size: 15px;
  text-shadow: 0px 1px white;
  background: lightgray;
  background: linear-gradient(lightgray, darkgray);
  border-radius: 4px;
  border: solid 2px lightgray;
  height: 37px;
  margin: 0px 30px 10px 30px;
  width: 100px;
}

#joinMessageButtonDiv > button:hover {
  border-color: #262626;
}

.chart {
  padding: 5px 0px 5px 0px;
  margin: 0px;
  width: 380px;
  border-top: 1px solid darkgray;
}

.reset {
  padding-left: 14px;
  font-size: small;
  color: #aaa;
  font-weight: normal;
}

.title {
  margin: 0px 2px 0px 2px;
  font-size: 13px;
  color: #598cc0;
  font-weight: bold;
  height: 25px;
}

.background.bar {
  fill: #ccc;
  stroke: #ccc;
  shape-rendering: crispEdges;
}

.foreground.bar {
  fill: steelblue;
  stroke: steelblue;
  shape-rendering: crispEdges;
}

.axis path, .axis line {
  fill: none;
  stroke: #333333;
  shape-rendering: crispEdges;
}

.axis text {
  font: 10px sans-serif;
}

.brush rect.extent {
  fill: steelblue;
  fill-opacity: .125;
}

.brush .resize path {
  fill: #eee;
  stroke: #666;
}

.stats {
  margin: 0px, 2px, 0px, 2px;
}

.extent-input {
  width: 80px;
  text-align: center;
  border-radius: 4px;
}

.extent-input-p {
  display: inline-block;
  margin-left: 5px;
  margin-right: 5px;
}

.legTitle {
  color: white;
  padding: 5px 15px 0px 15px;
  height: 30px;
  background: linear-gradient(#90b1d5, #598cc0);
  border-radius: 4px 4px 0px 0px;
}

.legTitle:hover {
  //background: rgba(0,0,255,0.5)
}

.layerTitle {
  margin: 0px 10px 3px 0px;
  font-weight: bold;
  display: inline-block;
  font-size: 16px;
  color: #598cc0;
}

.pipe {
  margin-left: 8px;
  margin-right: 8px;
}

input[type=range] {
  height: 27px;
  -webkit-appearance: none;
  margin: 0px;
  width: 215px;
  display: inline-block;
  position: relative;
  top: 8px;
}
input[type=range]:focus {
  outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 10px;
  cursor: pointer;
  animate: 0.2s;
  box-shadow: inset 0px 3px 5px rgba(0,0,0,0.3);
  webkit-box-shadow: inset 0px 3px 5px rgba(0,0,0,0.3);
  background: #90b1d5; /* For browsers that do not support gradients */
  background: linear-gradient(to left, #90b1d5, #2a3b6f); /* Standard syntax */
  border-radius: 5px;
  border: 0px solid #000000;
}
input[type=range]:hover::-webkit-slider-runnable-track {
  background: orange; /* For browsers that do not support gradients */
  background: linear-gradient(to left, #90b1d5, #2a3b6f); /* Standard syntax */
}
input[type=range]::-webkit-slider-thumb {
  box-shadow: inset 0px 3px 5px rgba(0,0,0,0.3);
  webkit-box-shadow: inset 0px 3px 5px rgba(0,0,0,0.3);
  border: 1px solid #808080;
  height: 18px;
  width: 18px;
  border-radius: 12px;
  background: #FFFFFF;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -4.5px;
}
input[type=range]:focus::-webkit-slider-runnable-track {
  background: #90b1d5; /* For browsers that do not support gradients */
  background: linear-gradient(to left, #90b1d5, #2a3b6f); /* Standard syntax */
}
input[type=range]::-moz-range-track {
  width: 100%;
  height: 10px;
  cursor: pointer;
  animate: 0.2s;
  box-shadow: inset 0px 3px 5px rgba(0,0,0,0.3);
  webkit-box-shadow: inset 0px 3px 5px rgba(0,0,0,0.3);
  background: lightgray; /* For browsers that do not support gradients */
  background: lightgray; /* Standard syntax */
  border-radius: 5px;
  border: 0px solid #000000;
}
input[type=range]::-moz-range-progress {
  width: 100%;
  height: 10px;
  cursor: pointer;
  animate: 0.2s;
  box-shadow: inset 0px 3px 5px rgba(0,0,0,0.3);
  webkit-box-shadow: inset 0px 3px 5px rgba(0,0,0,0.3);
  background: #90b1d5; /* For browsers that do not support gradients */
  background: linear-gradient(to left, #90b1d5, #2a3b6f); /* Standard syntax */
  border-radius: 5px;
  border: 0px solid #000000;
}
input[type=range]::-moz-range-thumb {
  box-shadow: inset 0px 3px 5px rgba(0,0,0,0.3);
  webkit-box-shadow: inset 0px 3px 5px rgba(0,0,0,0.3);
  border: 1px solid #808080;
  height: 18px;
  width: 18px;
  border-radius: 12px;
  background: #FFFFFF;
  cursor: pointer;
}
input[type=range]::-ms-track {
  width: 100%;
  height: 10px;
  cursor: pointer;
  animate: 0.2s;
  background: transparent;
  border-color: transparent;
  color: transparent;
}
input[type=range]::-ms-fill-lower {
  background: #90b1d5; /* For browsers that do not support gradients */
  background: linear-gradient(to left, #90b1d5, #2a3b6f); /* Standard syntax */
  border: 0px solid #000000;
  border-radius: 10px;
  box-shadow: inset 0px 3px 5px rgba(0,0,0,0.3);
  webkit-box-shadow: inset 0px 3px 5px rgba(0,0,0,0.3);
}
input[type=range]::-ms-fill-upper {
  background: lightgray;
  border: 0px solid #000000;
  border-radius: 10px;
  box-shadow: inset 0px 3px 5px rgba(0,0,0,0.3);
  webkit-box-shadow: inset 0px 3px 5px rgba(0,0,0,0.3);
}
input[type=range]::-ms-thumb {
  margin-top: 1px;
  box-shadow: inset 0px 3px 5px rgba(0,0,0,0.3);
  webkit-box-shadow: inset 0px 3px 5px rgba(0,0,0,0.3);
  border: 1px solid #808080;
  height: 18px;
  width: 18px;
  border-radius: 12px;
  background: #FFFFFF;
  cursor: pointer;
}
input[type=range]:focus::-ms-fill-lower {
  background: #90b1d5; /* For browsers that do not support gradients */
  background: linear-gradient(to left, #90b1d5, #2a3b6f); /* Standard syntax */
}
input[type=range]:focus::-ms-fill-upper {
  background: lightgray;
}

.legAttrList {
  border: solid #666666 1px;
  border-radius: 4px;
  text-align: left;
  font-size: 13px;
  width: 245px;
  color: #666666;
  background: lightgray;
  background: linear-gradient(#f2f2f2, #cccccc);
  height: 25px;
  cursor: pointer;
}

.legAttrList:hover {
  color: black;
  border-color: black;
}

.legend-colors {
  padding: 0px;
  margin: 2px;
  display: flex;
  flex-direction: row;
}  

li.key {
  background: rgba(255,255,255,0.75);
  border-top-width: 15px;
  border-top-style: solid;
  //font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
  //font-weight: bold;
  text-align: left;
  padding-left: 1px;
  padding-right: 1px;
  display: inline-block;
  float: left;
  flex-grow: 1;
  flex-basis: 0;
}

li.key:hover {
  background: rgba(255,255,255,1);
     }

#addWeightContainer {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  z-index: 2000;
  background: rgba(0,0,0,0.5);
  position: relative;
}

#addWeight {
  padding: 10px;
  width: 350px;
  height: auto;
  background: lightgray;
  border-style: solid;
  border-color: black;
  border-width: 2px;
  border-radius: 4px;
  font-size: 1em;
  align-self: center;
  text-align: center;
  //z-index: 2001;
}

#downloadDiv {
  position: absolute;
  top: 40px;
  right: 50px;
  width: 100%;
  max-width: 200px;
  min-width: 200px;
  margin: 0px;
  z-index: 1000;
  border-radius: 4px;
  box-shadow: 5px 5px 5px rgba(0,0,0,0.3);
  display: none;
  opacity: 0;
}  

.dlLabel {
  margin: 0px 2px 0px 2px;
  font-weight: normal;
  font-size: 13px;
}

#dlButton {
  color: black;
  width: 100%;
  height: 100%;
  display: inline-block;
  padding-top: 5px;
}

#dlButton:hover, #dlButton:visited, #dlButton:focus {
  text-decoration: none;
}

#dlLayersDiv {
  padding: 5px 15px 5px 15px;
  background: white;
  border-top: 1px solid gray;
  border-bottom: 1px solid gray;
  margin-bottom: 5px;
}

#downloadDiv input[type=radio] {
  margin: 5px 0px;
  top: 2px;
  position: relative;
}

#download {
  background: rgba(255, 255, 255, 0.9);
  border-radius: 4px;
}

.gradDown {
  background: #90b1d5; /* For browsers that do not support gradients */
  background: linear-gradient(#90b1d5, #598cc0); /* Standard syntax */
  background: -webkit-linear-gradient(#90b1d5, #598cc0); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(#90b1d5, #598cc0); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(#90b1d5, #598cc0); /* For Firefox 3.6 to 15 */
}

.gradAcross {
  background: #90b1d5; /* For browsers that do not support gradients */
  background: linear-gradient(to right, #90b1d5, #598cc0); /* Standard syntax */
  background: -webkit-linear-gradient(left, #90b1d5, #598cc0); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(right, #90b1d5, #598cc0); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(right, #90b1d5, #598cc0); /* For Firefox 3.6 to 15 */
}

@media print { 
  //disable bootstrap @media print * to retain your CSS
  #legendDiv, #polFilterDiv, #attributesDiv, #attrSelectDiv, #chartsDiv {
//    top: 5px;
//    right: 5px;
  }

  .header, #headerControls, .leaflet-control-maxExtent, .leaflet-control-zoom, .leaflet-control-navbar, .leaflet-top.leaflet-left, .leaflet-control-attribution {
    display: none; 
  }
  
  #map {
    border: 1px solid black;
  }
}