html, body, #map {
  width: 100%;
  height: 100%;
  min-width: 1280px;
  min-height: 700px;
}

#map {
  position: absolute;
  top: 0px;
  left: 0px;
  background: white;
  cursor: default;
}

body.modal-open {
  overflow-y: auto;
}

.tooltip {
  z-index: 100070;
}

.modal {
  position: absolute;
}

.glyphicon-triangle-top, .glyphicon-triangle-bottom {
  color: black;
}

.headerIcon {
  margin-right: -10px;
  font-size: 12px !important;
  color: white;
}

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

.glyphicon:hover {
  opacity: 1;
}

span.glyphicon.intro-fa {
  opacity: 1;
  color: navy;
  font-size: 18px;
  margin: 0;
}

.glyphicon-info-sign {
  margin-right: 5px;
}

.fa {
  margin-left: 15px;
  cursor: pointer;
  font-size: 0.8em;
  opacity: 0.8;
}

.fa:hover {
  opacity: 1;
}

a {
  cursor: pointer;
}

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

.header, .header h2, .header h4, #headerControls{
  min-width: 1280px;
}

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

.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: 30pt;
}

#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;
}

#helpDiv, #backgroundDiv {
  display: flex;
  justify-content: center;
  min-height: 700px;
}

#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%;
  position: absolute;
  top: 65px;
  left: 0px;
  height: 45px;
  display: block;
  color: #b3d9ff;
  padding: 1px 9px;
  border-bottom: solid 1px black;
}

.cl_select {
  background: white;
  border-radius: 4px;
  padding: 3px;
  border: 1px solid #666666;
  color: #666666;
  font-size: 13px;
  background: lightgray;
  background: linear-gradient(#f2f2f2, #cccccc);
  height: 25px;
  cursor: pointer;
}

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

.layerList {
  display: inline-block;
  float: left;
  margin: 2px 5px;
  padding: 3px 1px;
}

.layerList span {
  opacity: 1;
}

.layerListDropdown {
  display: inline-block;
  position: absolute;
  background: white;
  border: 1px gray solid;
  border-radius: 0px 0px 4px 4px;
  color: #666666;
  font-size: 13px;
  z-index: 2000;
  display: none;
}

.layerName {
  padding: 0px 5px;
}

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

#baselayerList {
  width: 155px;
  margin-left: 0px;
}

#baselayerListDropdown {
  width: 155px;
}

#birdList {
  width: 222px;
}

#birdListDropdown {
  width: 222px;
  max-height: 526px;
  overflow-y: auto;
}

#bingGeoLocate {
  float: right;
}

#bingGeocoderInput {
  border-radius: 4px;
  border: 1px solid gray;
  padding: 2px 5px;
  height: 25px;
  color: #333333;
}

#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: 2px;
}

#bingGeocoderSubmit.glyphicon-remove {
  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;
}

#panelTools {
  width: max-content;
  height: 34px;
  display: inline-block;
  float: left;
}

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

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

.hcPanelDivs>span, .hcPanelDivs>a>span {
  font-size: 18px;
  opacity: 1;
  margin-left: 5px;
  top: 5px;
  color: #b3d9ff;
}

.hcPanelDivs>p, .hcPanelDivs>a>p {
  display: inline-block;
  margin: 4px 5px 0px 5px;
  font-size: 14px;
  font-weight: bold;
  position: relative;
  top: 1px;
  color: #b3d9ff;
}

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

#wildOpen {
  float: left;
  margin: 4px 5px 0px 5px;
  font-size: 18px;
  font-weight: bold;
  position: relative;
  top: 2px;
  color: #b3d9ff;
}  

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

.legend {
  position: absolute;
  top: 55px;
  left: 20px;
  z-index: 400;
  cursor: move;
  background: rgb(189,201,191);
  //background: steelblue;
  color: black;
  text-align: center;
  padding: 5px;
  border: 1px solid #333333;
  border-radius: 4px;
  display: none;
  opacity: 0;
}

.legTitle {
  color: white;
  padding: 0 5px;
  height: 30px;
  background: #4d5980;
  background: linear-gradient(rgb(23 26 28), #434d70);
  border-radius: 4px 4px 0px 0px;
  margin: 0px;
  font-size: 1.4em;
  text-align: center;
  font-weight: bold;
}

#idDiv {
  top: calc(100% - 100px);
}

#info {
  border: 1px solid #333333;
  border-radius: 0 0 4px 4px;
  background: white;
}

#infoP {
  display: inline-block;
  margin:0;
  white-space: pre;
  color: black;
  margin: 5px;
}

#legendDiv {
  position: absolute;
  top: 85px;
  left: 15px;
  width: auto;
  min-width: 169px;
  margin: 0px;
  z-index: 1002;
  border-radius: 4px;
  box-shadow: 5px 5px 5px rgba(0,0,0,0.3);
  //display: none;
  opacity: 0;
  visibility: hidden;
  border: 1px solid black;
}

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

.legTitle.occHeader {
  padding-left: 5px;
}

.exitDiv {
  text-align: right;
  float: right;
  height: 100%;
}

#legendDefault {
  font-style: italic;
  padding: 5px;
  background: white;
  border-radius: 0px 0px 4px 4px;
  font-size: 13px;
}

#legendImgDiv {
  display: none;
  text-align: center;
  padding: 0px 5px 5px 5px;
  overflow: hidden;
  margin-top: 5px;
}

#legendPrev, #legendNext {
  margin: 0px;
  visibility: hidden;
}

.legImgDiv {
  overflow: hidden;
  margin: auto;
  border: 1px solid black;
  border-radius: 4px;
}

.legendImg {
  //border: 1px solid #333333;
  display: block;
  //margin: auto;
  //border-radius: 4px;
  position: relative;
}

.legendTitle {
  margin: 20px 5px 5px 5px;
  font-size: 18px;
  white-space: nowrap;
}

.legendTrans {
  font-size: 13px;
  color: #333333;
  display: block;
  margin: 0px 5px;
}

.layerTitle {
  margin: 0px 2px 7px 2px;
  font-weight: bold;
  display: inline-block;
  font-size: 1em;
}

.helpTitle {
  text-align: left;
  font-size: 24px;
  padding: 5px 15px 0px 15px;
  font-variant: small-caps;
  color: white;
  border-bottom: 1px solid gray;
  background: #4d5980;
  background: linear-gradient(#56638f, #434d70);
  border-radius: 4px 4px 0px 0px;
}

input[type=range] {
  height: 12px;
  -webkit-appearance: none;
  margin: 0px;
  width: 142px;
  display: inline-block;
  background: none;
}
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;
}

.msgBackgroundDiv {
  width: 100%;
  min-width: 1262px;
  min-height: 700px;
  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: 1100px;
  height: 700px;
  //min-width: 1200px;
  padding: 15px;
}  

#splashWelcome {
  font-size: 20px;
  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);
  text-align: center;
}

#hideWelcome {
  position: relative;
  top: 12px;
  font-size: 24px;
}

#welcomeSpp {
  text-align: center;
  padding: 0;
}

#welcomeSpp li {
  display: inline-block;
  font-weight: bold;
  width: 25%;
  background: lightgray;
  margin: 0 2%;
  padding: 3px;
  border: 1px solid #333333;
  border-radius: 4px;
}

#welcomeSpp li>a:hover {
  text-decoration: none;
}

.welcomeLaunch {
  font-weight: bold;
  color: #337ab7;
  opacity: 1;
  margin: 0;
}

.welcomeLaunch:hover {
  color: #23527c;
  cursor: pointer;
}

#splashGIF {
  margin: 0px 20px 0px 60px;
  width: 623px;
  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: 15px;
  position: relative;
  top: -300px;
  height: 50px;
  font-size: 25px;
  border-color: darkgray;
  box-shadow: 9px 9px 8px 2px rgba(0,0,0,0.2);
  background: lightgray;
  background: linear-gradient(lightgray, darkgray);
  text-shadow: 0px 2px white;
}

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

#splashButton:active {
  background: silver;
}

.introjs-tooltip {
  max-width: 840px;
  width: max-content;
}

#downloadDiv {
  position: absolute;
  top: 85px;
  right: 50px;
  width: 220px;
  margin: 0px;
  z-index: 1000;
  border-radius: 4px;
  box-shadow: 5px 5px 5px rgba(0,0,0,0.3);
  display: none;
  opacity: 0;
  border: 1px solid black;
}  

#dlOptions {
  padding: 10px;
}

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

#dlButton, #exportFileButtonA, #exportResultsA, #silvDefsA {
  color: white;
  width: 100%;
  height: 100%;
  display: inline-block;
}

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

.legendBtn {
  margin: auto;
  margin-bottom: 5px;
  width: calc(100% - 100px);
  font-weight: bold;
  font-size: 15px;
  text-shadow: 0px 2px black;
  box-shadow: none;
  //background: #008000;
  //background: linear-gradient(#00cc00, #004d00);
  background: #00ff00;
  background: linear-gradient(#1aff1a, #00b300);
  border-radius: 4px;
  border: solid 2px #333333;
  padding-bottom: 2px;
  text-align: center;
}

.legendBtn.inactive {
  background: red;
  background: linear-gradient(#ff3333, #990000);
}

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

.legendBtn:active {
  //background: silver;
  box-shadow: 3px 3px 7px 1px rgba(0,0,0,0.4) inset;
}

#drawDiv {
  position: absolute;
  top: 75px;
  left: 270px;
  width: 310px;
  margin: 0px;
  z-index: 1000;
  border-radius: 4px;
  box-shadow: 5px 5px 5px rgba(0,0,0,0.3);
  display: none;
  opacity: 0;
  border: 2px solid black;
}

#drawDiv input:hover {
  border-color: black;
}  

#drawSourceDiv {
  //height: 97px;
  border-bottom: 1px solid #666666;
}

#drawSourceDiv .inactive {
  opacity: 0.3;
  //background: rgba(255,255,255,0.8);
  background: red;
  background: linear-gradient(#ff3333, #990000);
}

#drawSourceDiv .inactive:hover {
  opacity: 1;
  border-color: aqua;
  //background: red;
  background: linear-gradient(#f775t5, #fd0101);
  //background: linear-gradient(#80ffff, #00b3b3);
}

#drawSourceDiv .disabled {
  opacity: 0.3;
  pointer-events: none;
}

#drawSourceDiv>div {
  display: inline-block;
  text-align: center;
  width: 29%;
  margin: 5px 40px;
  border-radius: 4px;
  border: 2px solid #333333;
  //background: rgba(0,255,0,0.7);
  //background: #008000;
  //background: linear-gradient(#00cc00, #004d00);
  background: #00ff00;
  background: linear-gradient(#1aff1a, #00b300);
  cursor: pointer;
  //text-shadow: 0px 2px black;
}

#drawSourceDiv>div:hover {
  border-color: aqua;
}

#drawSourceDiv span {
  font-size: 28px;
  margin: 2px 0 0 0;
  opacity: 1;
  color: black;
}

#drawSourceDiv p {
  margin: -2px;
  font-size: 20px;
  font-weight: bold;
  color: black;
}

#drawCreateDiv {
  //height: 100px;
  border-bottom: 1px solid #666666;
}

#drawToolbar, #measureTool, #basalTool {
  display: block;
  margin: 5px;
  margin-bottom: 10px;
  padding: 3px;
  text-align: center;
}

#drawToolbar {
  background: rgba(207,183,142);
  //background: rgba(255, 255, 0,0.5);
  //background: rgba(102,0,102,0.3);
  border-radius: 4px;
  border: 1px solid black;
  box-shadow: 3px 3px 3px rgba(0,0,0,0.4);
  margin: 5px 10px;
  height: 91px;
}

#drawImport {
  background: rgba(255, 255, 0,0.5);
  //background: rgba(102,0,102,0.3);
  border-radius: 4px;
  border: 1px solid black;
  box-shadow: 3px 3px 3px rgba(0,0,0,0.4);
  margin: 5px 10px;
  //height: 72px;
  padding: 3px;
  text-align: center;
  display: none;
}

#drawImport label {
  margin-top: 5px;
}

#drawImport input, #measureTool input, #basalTool input, #exportActualDiv input {
  position: relative;
  top: 2px;
  margin-right: 5px;
  cursor: pointer;
}

#importFile {
  color: #333;
  font-weight: bold;
  font-size: 13px;
  border: 1px solid;
  border-radius: 0 4px 4px 0;
  background: beige;
  width: 100%;
  cursor: text;
}

#importFileButton.inactive, #measureMetricDiv.inactive, .legendBtn.inactive, .hcPanelDivs.inactive {
  opacity: 0.5;
  pointer-events: none;
}

#importFileButton, #exportFileButton, #exportResults, #silvDefsDiv {
  margin: auto;
  width: 50%;
  color: white;
  cursor: pointer;
}

#drawMeasureDiv, #drawBasalDiv, #drawTSTDiv, #shapeDiv, #beestepDiv {
  //height: 100px;
  border-bottom: 1px solid #666666;
}

#measureTool, #basalTool, #tstTool {
  background: rgba(255, 255, 0,0.5);
  //background: rgba(255,153,0,0.5);
  border-radius: 4px;
  border: 1px solid black;
  box-shadow: 3px 3px 3px rgba(0,0,0,0.4);
  margin: 5px 10px;
  padding: 3px;
  text-align: center;
}

#basalTool {
  background: rgba(255, 255, 0,0.5);
  //background: rgba(70, 130, 180,0.5);
  //padding: 0px;
}

#tstTool {
  background: rgba(255, 255, 0,0.5);
  //padding: 0px;
}


#basalAreaUnits {
  width: auto;
}

#measureMetricDiv {
  background: rgba(207,183,142);
  //background: rgba(255, 255, 0,0.5);
  //background: rgba(0,204,0,0.5);
  border-radius: 4px;
  border: 1px solid black;
  box-shadow: 3px 3px 3px rgba(0,0,0,0.4);
  margin: 5px 10px;
  padding-left: 10px;
  text-align: left;
}

#measureMetricDiv .leaflet-draw {
  margin-bottom: 0px;
}

#measureMetricDiv .leaflet-draw-actions {
  display: none !important;
}

#openSourceMetrics input, #basalTool input, #tstTool input {
  width: 75px;
  border-radius: 4px;
  border: 1px solid black;
  margin-left: 5px;
  text-align: center;
  cursor: text;
  line-height: 1.1;
}

.leaflet-draw {
  display: inline-block;
  margin-top: 5px;
  margin-bottom: 24px;
}

.leaflet-draw-toolbar {
  margin: 0px;
  box-shadow: none;
}

.leaflet-draw-toolbar.leaflet-bar.leaflet-draw-toolbar-top {
  margin-right: 40px;
}

#measureMetricDiv .leaflet-draw-toolbar.leaflet-bar.leaflet-draw-toolbar-top {
  margin-right: 0px;
}

.leaflet-draw-toolbar.leaflet-bar a {
  display: inline-block;
  margin-left: 3px;
  margin-right: 3px;
  width: 27px !important;
  height: 27px!important;
  border-radius: 4px !important;
  border: 1px solid #333333;
}

.leaflet-draw-toolbar.leaflet-bar a:hover {
  display: inline-block;
  border-color: black;
}

.leaflet-draw-section {
  display: inline-block;
}

.leaflet-draw-actions {
  top: 27px !important;
  left: 0px !important;
}

.leaflet-draw-actions>li>a {
  border-radius: 4px !important;
  background: #4d5980;
  background: linear-gradient(#56638f, #434d70);
  border: 1px solid black !important;
  font-size: 12px;
  height: 28px;
}

.leaflet-draw-actions>li>a:hover {
  background: linear-gradient(#434d70, #56638f);
  border-color: white !important;
}

#shapeDiv {
  width: 100%;
  height: 100%;
  padding: 5px;
  background: rgba(207,183,142);
  //background: lightgray;
}

.shape {
  width: 50%;
  display: inline-block;
  text-align: center;
}

.shapeTitle {
  color: #333333;
  font-weight: 700;
  text-align: center;
  margin: -2px;
  font-size: 14px;
}

.shapeVals {
  width: 129px;
  background: white;
  border: 1px solid #333333;
  border-radius: 4px;
  margin: 5px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  font-weight: bold;
  color: #333333;
  text-align: center;
}

.shapeVals:hover {
  //background: rgba(255,255,255, 1);
  color: black;
  border-color: black;
}

.shapeUnit {
  background: rgba(255,255,255,0.8);
  border: 1px solid #333333;
  border-radius: 4px;
  margin: 0px 5px 0px 5px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  font-weight: 700;
  text-align: center;
  color: #333333;
  width: 129px;
  height: 22px;
  cursor: pointer;
}

.shapeUnit:hover {
  background: rgba(255,255,255,1);
  color: black;
  border-color: aqua;
}

#hcRunDiv {
  float: none;
  top: 0px;
  height: auto;
  width: 60%;
  text-align: center;
  border: 2px solid #333333;
  //background: #008000;
  //background: linear-gradient(#00cc00, #004d00);
  background: #00ff00;
  background: linear-gradient(#1aff1a, #00b300);
  margin: 5px;
  border-radius: 4px;
  //margin-left: 20%;
  padding: 0;
  text-shadow: 0px 2px black;
}

#hcRunDiv:hover {
  border: 2px solid aqua;
}

#hcRunDiv.inactive {
  background: red;
  background: linear-gradient(#ff3333, #990000);
}

#hcRunDiv span {
  font-size: 22px;
  color: white;
  position: relative;
  top: 2px;
  margin: 0;
  margin-right: 5px;
}

#hcRunDiv p {
  font-size: 22px;
  color: white;
  position: relative;
  margin: 0;
}

#outDiv {
  position: absolute;
  top: 75px;
  left: 600px;
  width: 480px;
  margin: 0px;
  z-index: 1000;
  border-radius: 4px;
  box-shadow: 5px 5px 5px rgba(0,0,0,0.3);
  display: block;
  opacity: 0;
  visibility: hidden;
  color: white;
  border: 2px solid black;
}

#beestepDiv {
  display: block;
  color: black;
}

#BMPoutDiv {
  background: rgba(207,183,142);
  border-radius: 4px;
  border: 1px solid black;
  box-shadow: 3px 3px 3px rgba(0,0,0,0.4);
  margin: 5px 10px;
  padding-left: 10px;
  text-align: left;
  color=black;
}


#songsDiv {
  position: absolute;
  top: 215px;
  left: 580px;
  width: 100%;
  max-width: 316px;
  min-width: 316px;
  margin: 0px;
  z-index: 1000;
  border-radius: 4px;
  box-shadow: 5px 5px 5px rgba(0,0,0,0.3);
  display: none;
  opacity: 0;
  border: 1px solid black;
  text-align: center;
}

#songs {
  margin: 5px;
}

#birdPic {
  border: 1px solid #333333;
  margin: 5px;
  border-radius: 4px;
  width: 294px;
  height: 233.83px;
}

#birdSong {
  background: none;
}

#species {
  //font-style: italic;
  font-weight: bold;
  margin: 0;
}

.radio {
  display: inline-block;
  cursor: pointer;
}

.radioLabel {
  display: inline-block;
  margin-left: 5px;
  cursor: pointer;
}

#matureRad {
  margin-left: 50px;
}

#matureSongSelect {
  display: none;
}

#graphsDiv {
  position: absolute;
  top: 73px;
  left: 580px;
  width: 100%;
  max-width: 700px;
  min-width: 700px;
  margin: 0px;
  z-index: 1000;
  border-radius: 4px;
  box-shadow: 5px 5px 5px rgba(0,0,0,0.3);
  display: none;
  opacity: 0;
  border: 1px solid black;
  text-align: center;
}

#graphTitles {
  background: white;
  text-align: left;
  border-bottom: 1px solid #333333;
}

.graphTitle {
  display: inline-block;
  width: 27.5%;
  margin: 0;
  font-size: 14px;
  font-weight: bold;
  text-align: center;
  color: #4d5980;
}

#graphs {
  max-height: 600px;
  min-height: 203px;
  overflow: auto;
}

.graphSppP {
  font-size: 18px;
  font-weight: bold;
  margin: 0;
  color: white;
  //background: mediumseagreen;
  border-radius: 4px 4px 0 0;
  text-align: left;
  padding-left: 5px;
}

.graphSppP.shrub {
  background: darkorange;
}

.graphSppP.mature {
  background: darkviolet;
}

.remove-spp {
  color: red;
  position: relative;
  top: -22px;
  right: 5px;
  background: white;
  padding: 2px;
  border-radius: 10px;
}

.sppGraphs {
  background: white;
  border: 1px solid #333333;
  border-radius: 4px;
  margin: 5px;
}

.graphDiv {
  display: inline-block;
  margin-left: 5px;
  margin-right: 5px;
  margin-top: 5px;
}

.graphDiv p {
  font-weight: bold;
  margin: 0;
}

.line {
  fill: none;
  stroke: blue;
  stroke-width: 2px;
}

.graphOp.habOcc {
  color: black;
  margin-left: 3px;
  margin-right: 0;
}

.point1, .point2 {
  cursor: pointer;
}

.point2Pos, .graphOp.habOcc.point2Pos {
  fill: green;
  color: green;
}

.point2Neg, .graphOp.habOcc.point2Neg {
  fill: red;
  color: red;
}

.axis {
  font-size: 12px;
}

.domain {
  fill: none;
  stroke-width: 2px;
  stroke: black;
}

.graphOp {
  display: inline-block;
  position: relative;
  top: -70px;
  font-size: 30px;
  font-weight: bold;
  margin: 0 10px 0 10px;
  color: darkgrey;
}

#infoDiv {
  width: 50%;
  height: 95%;
  background: rgba(255,255,255,1);
  border: 1px solid black;
  border-radius: 4px;
  font-size: 18px;
  align-self: center;
  min-height: 540px;
  min-width: 1000px;
  margin: auto;
}

#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% - 172px);
}

#helpContent h3 {
  margin-top: 40px;
}

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

#help-sources img {
  width: 100%;
  margin-bottom: 25px;
}

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

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

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

.a_flex {
  display: inline-flex;
}

#usfs {
  height: 80px;
  margin-top: 9px;
  margin-left: 5px;
}

#umass {
  height: 80px;
}

#nfwf {
height: 80px;
  margin-top: 9px;
  margin-right: 3px;
}

#epa {
  height: 80px;
}

#dummy {
  height: 80px;
  margin-left: 25px;
}

#dummy1 {
  height: 80px;
  margin-right: -25px;
}

#hiram {
  height: 80px;
}

#nrcs {
  height: 80px;
}

.fundersP {
  text-align: center;
}

#infoDivContent img {
  width: 850px;
  border: 1px solid black;
  border-radius: 4px;
  margin: 5px 0 2px 0;
}

#waitingDiv {
  background: rgba(0,255,0,0.9);
  width: 208px;
  height: 225px;
  padding: 30px;
  border: 2px solid white;
  border-radius: 4px;
  margin: auto;
  position: absolute;
  left: calc(50% - 104px);
  top: calc(50% - 118px);
  display: none;
  z-index: 1003;
}

#waitingDiv img {
  border-radius: 4px;
  border: 1px solid #333;
}

#waitingDiv h3 {
  text-align:center;
  color:white;
  font-size: 27px;
  font-weight:bold;
  text-shadow:0 2px black;
  margin-top: 10px;
}

#exportDiv {
  position: absolute;
  top: 85px;
  left: 580px;
  //right: 445px;
  width: 100%;
  width: 320px;
  margin: 0px;
  z-index: 1000;
  border-radius: 4px;
  box-shadow: 5px 5px 5px rgba(0,0,0,0.3);
  display: none;
  opacity: 0;
  border: 1px solid black;
}

#exportDefaultDiv {
  padding: 5px;
  background: white;
  border-radius: 4px;
}

#exportActualDiv {
  padding: 5px;
  display: none;
  text-align: center;
  border-radius: 4px;
}

#resultsDiv {
  position: absolute;
  top: 85px;
  //left: 678px;
  right: 45px;
  width: 522px;
  margin: 0px;
  z-index: 1000;
  border-radius: 4px;
  box-shadow: 5px 5px 5px rgba(0,0,0,0.3);
  display: none;
  opacity: 0;
  border: 1px solid black;
}

#resultsDefaultDiv {
  padding: 5px;
  background: white;
  border-radius: 4px;
}

#resultsActualDiv {
  padding: 5px;
  background: white;
  width: calc(100% - 10px);
  margin: 0 5px 5px 5px;
  display: none;
  max-height: 500px;
  //overflow-y: auto;
  text-align: center;
  border-radius: 4px;
  border: 1px solid;
}

#resultsActualDiv th, #resultsActualDiv td {
  text-align: center;
}

#conValDiv {
  padding: 5px;
  background: gainsboro;
  border: 1px solid #333333;
  border-radius: 4px;
  margin: 0 6px;
}

#conVal, #likelySpp {
  width: 140px;
  border-radius: 4px;
  border: 1px solid black;
  text-align: center;
  cursor: text;
  background: white;
  margin-left: 10px;
  display: inline-block;
}

#conVal p, #likelySpp p {
  margin: 0;
  display: inline-block;
}

#resultsTable {
  width: 100%;
  font-size: 13px;
}

#resultsTable thead {
  background: gray;
  background: -webkit-linear-gradient(darkgray, gray);
  background: linear-gradient(#56638f, #434d70);
  border: 1px solid black;
  font-weight: bold;
  color: white;
}

#resultsTable .likely {
  background: rgba(0,255,0,0.4);
}

#resultsTable .likely:hover {
  background: rgba(0,102,0,0.5);
}

#resultsTable thead tr {
  position: relative;
  display: block;
  width: 100%;
}

#resultsTable thead th {
  border-right: 1px solid black;
  text-align: left;
  padding-left: 3px;
  vertical-align: bottom;
}

#resultsTable thead th:last-child {
  border-right: none;
}

#resultsTable tbody {
  display: block;
  overflow-y: auto;
  height: 353px;
  //margin-left: 1px;
}

#resultsTable tbody tr {
  //position: relative;
  //display: block;
}

#resultsTable td {
  border: 1px solid gray;
  border-collapse: collapse;
}

#resultsTable th:nth-child(1), #resultsTable td:nth-child(1) {
  width: 178px;
  cursor: pointer;
}

#resultsTable td:nth-child(1) {
  //color: dodgerblue;
  text-decoration: underline;
}

#resultsTable td:nth-child(1):hover {
  color: #00004d;
}

#resultsTable th:nth-child(3), #resultsTable td:nth-child(3) {
  display: none;
}

#resultsTable th, #resultsTable td {
  width: 94px;
}

#resultsTable th:nth-child(5), #resultsTable td:nth-child(5) {
  width: 61px;
}

#resultsTable th:nth-child(6), #resultsTable td:nth-child(6) {
  width: 52px;
}

#resultsTable .glyphicon-stats {
  font-size: 13.9px;
  margin: 0;
}

#resultsTable tbody tr:hover {
  color: black;
  background: lightblue;
  //cursor: pointer;
}

td.mature, .radioLabel.mature {
  color: darkviolet;
}

td.shrub, .radioLabel.shrub {
  color: darkorange;
}

#groupSelDiv {
  text-align: center;
}

.groupLab.mature {
  background: darkviolet;
  color: white;
}

.groupLab.shrub {
  background: darkorange;
  color: white;
}

.groupLab.likely {
  background: lime;
  color: white;
  margin-right: 5px;
}

.groupLab {
  margin-left: 5px;
  margin-right: 35px;
  position: relative;
  top: -2px;
  cursor: pointer;
  padding: 0 3px;
  border: 1px solid #333333;
  border-radius: 4px;
  background: white;
}

.groupRad {
  cursor: pointer;
}

.sortTitle {
    
}

.sort {
  float: right;
  margin: 0;
  margin-right: 3px;
  opacity: 0.25;
}

.sort:hover {
  opacity: 0.75;
  color: white;
}

.sort.active:hover {
  color: aqua;
}

.sort.active {
  opacity: 1;
}

#baTable {
  text-align: center;
  width: 100%;
}

#baTable th {
  text-align: center;
}

#baTable thead {
  background-color: #337ab7;
  color: white;
}

#baTable td, #baTable th {
  border: 1px solid gray;
  border-collapse: collapse;
}

#baTable a {
  font-style: italic;
}

#exportResults, #silvDefsDiv {
  width: 40%;
  display: inline-block;
  margin-left: 5%;
  margin-right: 5%;
  height: 48px;
}

#exportResults {
  position: relative;
  top: -10px;
}

#silvDefsDiv {
  background: linear-gradient(#56638f, #434d70);
}

#exportResultsA {
  padding-top: 11px;
}

.btnGlyph {
  color: white;
  margin-right: 5px;
  margin-left: 0;
  opacity: 1;
}

.mockA {
  //color: dodgerblue;
  color: blue;
  text-decoration: underline;
  font-weight: bold;
  cursor: pointer;
}

.mockA.mockA_dark {
  color: blue;
}

.mockA:hover, .mockA_dark:hover {
  color: #00004d;
  text-decoration: underline;
}

#adjustResults {
  //margin-bottom: 5px;
}

.adjustDiv {
  width: 31.3%;
  margin: 5px;
  display: inline-block;
  text-align: center;
  background: chartreuse;
  border-radius: 4px;
  border: 1px solid black;
}

.adjustDiv p {
  margin: 0;
  font-weight: bold;
}

#silvDiv {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: rgba(0,0,0,0.75);
  z-index: 100000;
  display: none;
  padding: 25px;
}

#silvTitleDiv {
  width: 60%;
  background: none;
  margin: auto;
}

#silvTitle {
  font-size: 30px;
  height: 40px;
}

#treatDiv {
  width: 100%;
  height: calc(100% - 40px);
  background: white;
  border-radius: 0 0 4px 4px;
  padding: 2% 6%;
  overflow: auto;
  width: 60%;
  margin: auto;
  text-align: center;
}

#treatDiv p {
  font-size: 16px;
  text-align: left;
}

#treatDiv h3 {
  text-align: left;
}

.silvImg {
  margin-bottom: 20px;
  width: 100%;
  max-width: 650px;
  border: 1px solid #333333;
  border-radius: 4px;
  box-shadow: 6px 6px 12px;
}

#silvAddDiv {
  background: linear-gradient(#1aff1a, #00b300);
  padding: 10px;
  border: 1px solid #333333;
  border-radius: 8px;
  color: black;
}
  
#outputDiv {
  padding: 5px;
  overflow-Y: auto;
  height: calc(100% - 42px);
}

#outputDiv>p {
  margin: 0px;
}

#alertDiv, #importErrorDiv {
  position: absolute;
  top: calc(50% - 23px);
  left: calc(50% - 152px);
  margin: 0px;
  z-index: 1000;
  border-radius: 4px;
  box-shadow: 5px 5px 5px rgba(0,0,0,0.3);
  display: none;
  opacity: 1;
  border: 1px solid black;
  width: 302px;
}

.helpTitle {
  text-align: left;
  font-size: 24px;
  padding: 5px 15px 0px 15px;
  font-variant: small-caps;
  color: white;
  border-bottom: 1px solid gray;
  background: #4d5980;
  background: linear-gradient(#56638f, #434d70);
  border-radius: 4px 4px 0px 0px;
}

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

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

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

.leaflet-top {
    padding-top: 90px;
}

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

.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);
}

.rangeLabels {
  padding: 0;
  margin: 0;
  margin-left: 2px;
  list-style: none;
}

.rangeLabels li {
  position: relative;
  float: left;
  width: 51px;
  text-align: center;
  color: gray;
  font-size: 12px;
  font-weight: bold;
  cursor: pointer;
  top: -4px;
}

.rangeLabels li.first_li {
  text-align: left;
  padding-left: 10px;
}

.rangeLabels li.last_li {
  text-align: right;
  padding-right: 10px;
}

   
.rangeLabels li::before {
  position: absolute;
  top: -25px;
  right: 0;
  left: 0;
  content: "";
  margin: 0 auto;
  width: 0px;
  height: 0px;
  background: #b2b2b2;
  border-radius: 50%;
}

.occPlus {
  color: darkgreen;
}

.occMinus {
  color: red;
}

.sliderHeading {
  background: gray;
  background: -webkit-linear-gradient(darkgray, gray);
  background: linear-gradient(#56638f, #434d70);
  border-bottom: 1px solid black;
  font-weight: bold;
  color: white;
  margin-bottom: 5px !important;
}
  
.sliderTitle {
  position: relative;
  top: -7px;
  height: 30px;
}

.sliderReset {
  right: 7px;
  float: right;
  margin-top: -25px;
  font-size: 13px;
  font-weight: bolder;
  opacity: 0.8;
  color: white;
}

.d3Tooltip {
  background: rgba(0,0,0,0.7);
  border-style: solid;
  border-color: white;
  border-width: 2px;
  border-radius: 4px;
  color: yellow;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1em;
  font-weight: bold;
  padding: 7px;
  position: absolute;
  z-index: 3000;
  visibility: hidden;
  white-space: nowrap;
  width: 92px;
  text-align: center;
}



@media print {
  #headerControls, #printDownload {
    display: none;
  }

  a[href]:after {
    content: none;
  }
}
}