@import "https://fonts.googleapis.com/css?family=Roboto+Condensed&display=swap";
/*///////////////////////////////////////////////////////*/
/*Set up pre-defined colors*/
:root{
  --teal-30:#B2ECE4;
  --teal-50:#80DFD2;
  --teal-80:#00BFA5;
  --teal-100:#00897B;

  --foo: true;

  --deep-brown-10:#D6D1CA;
  --deep-brown-20:#BFB7B0;
  --deep-brown-30:#ACA199;
  --deep-brown-50:#968B83;
  --deep-brown-70:#847779;
  --deep-brown-80:#6F6259;
  --deep-brown-100:#372E2C;


  --grayy:#6F6259;
  --black:#1B1716DD;
  --solid-black:#1B1716;
  --black:rgba(27, 23, 22, 0.9);
  --transparent:rgba(0,0,0,0);
  --white:#FFF;
  --almost-transparent:#BFB7B0DD;
  --orange:#FF834C;
  --transparent-teal:rgba(0, 137, 123, 0.3);



  --slider-border-radius:2px;
}
/*///////////////////////////////////////////////////////*/

html, body{
        height: 100%;
        margin: 0;
        padding: 0;
        background-color: var(--black);
        font-size: 16px;
        font-family: 'Roboto Condensed', sans-serif;
        font-weight: 100;
      }
@media only screen and (max-width: 1600px) {
  html, body{
    font-size: 14px!important;
  }
}
@media only screen and (max-width: 1400px) {
  html, body{
    font-size: 12px!important;
  }
}
@media only screen and (max-width: 1200px) {
  html, body{
    font-size: 12px!important;
  }
}
@media only screen and (max-width: 992) {
  html, body{
    font-size: 11px!important;
  }
}
@media only screen and (max-width: 768) {
  html, body{
    font-size: 10px!important;
  }
}
@media only screen and (max-width: 576px) {
  html, body{
    font-size: 10px!important;
  }
}
@media only screen and (max-width: 400px) {
  html, body{
    font-size: 10px!important;
  }
}
/*///////////////////////////////////////////////////////*/
.custom-hidden {display: none;}
.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}
.vcenter {
    display: inline-block;
    vertical-align: middle!important;
    float: none;
}
/*Colors*/
.gray{
  color:var(--deep-brown-70);
}
.teal{
  color:var(--teal-100)!important;
}
.teal80{
  color:var(--teal-80)!important;
}
.teal-study-area-label{
  color:var(--teal-80)!important;
}
.bg-teal{background-color: var(--teal-100)!important}
.bg-gray{background-color: var(--deep-brown-100)!important;
color:var(--deep-brown-20)!important;}
.bg-black,.btn{
  background-color: var(--black)!important;
  margin:0px!important;
  color:var(--white)!important;
  outline:none!important;
  vertical-align:middle!important;

}
.bg-solid-black{background-color: var(--solid-black)!important;
color:var(--white)!important;}
.time-lapse-active{
  background-color: var(--teal-100)!important;
  color:var(--deep-brown-70)!important;
}
.time-lapse-slider-handle-label {
    /*width: 3em;*/
    /*height: 1.6em;*/
    /*top: 50%;*/
    padding-top:1.1em;
    margin-left:-2.2em;
    /*margin-top: .8em;*/
    /*margin-left: -.7em;*/
    font-size:0.7em;
    width:5em;
    color:var(--teal-100)!important;
    text-align: center;
    /*line-height: 1.6em;*/
  }
.info-page{
  color:var(--deep-brown-70)!important;
  padding-top:4em;
}
.simple-bg-black{
  background-color: var(--black)!important;
  color:var(--white)!important;
}
.bg-transparent{
  background-color: var(--almost-transparent)!important;
  /*color:var(--white)!important;*/
  color:#000!important;
}
.list-group-item,.list-group,.list-group-title{
  background-color: var(--deep-brown-10)!important;
  padding-left:0px;
  padding-right:0px;
  /*color:var(--white)!important;*/
}

.text-black{
  color:var(--black)!important;
}
table {border: none!important;}
/*///////////////////////////////////////////////////////*/

.main-container{
  position: absolute;
}

.map{
  width:100%;
  height:100%;
  position:absolute;
  z-index:1;
}

.search-box,.form-control{height:1.5em;}

kbd{border: 1px solid #999;}
/*///////////////////////////////////////////////////////////*/
/*misc styling*/
ul, li{list-style-type:none;}
th{font-weight:  600!important}
.select-layer-name{margin:0;color:var(--teal-100);}
/*///////////////////////////////////////////////////////////*/
/*Sidebar styling*/
.sidebar-toggler{
  position:absolute;top:1%;left:1%;z-index:5;font-size:1.9em!important;border-radius: 1px;
}
.sidebar-toggler:hover{font-size:1.9em!important;}
.sidebar-toggler:active {
  transform: translate(4px) translateY(4px);
}
.teal-hover:hover{color:var(--teal-100)!important;}
.sidebar{
  overflow-y: auto;
  max-height:calc(100% - 1.7em);;
  background-color: var(--black)!important;
  z-index:3;
}

/*///////////////////////////////////////////////////////////*/
/*Bottombar styling*/
.bottombar{
  position:absolute;
  bottom:0.0%;
  left:0%;
  width:100%;
  color:var(--white);
  background-color: var(--black)!important;
  /*max-height:1.7em;*/
  font-size:1em;
  z-index:2;
}
.image-icon-bar{
  max-height:1.3em;
  float:right;
  margin:0.1em;
  border-radius: 0px;
  background:rgba(255,255,255,0.2);
}
.home-image-icon-bar{
  max-height:2em;
  float:right;
  margin:0.3em;
  border-radius: 0px;
  /*background:rgba(255,255,255,0.2);*/
}
.support-icons{
  max-width:4em;
  max-height:3em;
}
.support-text{
  color: var(--teal-100)!important;
}
.text-capitalize { text-transform: uppercase!important; }

.table-bordered td{    border-right: 1px solid #000!important;border-left: 1px solid #000!important;}
.chart-table  {
  max-height:30em;
  max-width:90em;
  overflow-y:auto; 
  overflow-x:auto; 
  font-size: 0.8em;

}
.chart-table-graph-container {
  max-height:50em;
  max-width:90em;
  overflow-x:auto; 
  overflow-y:auto; 


}
.chart-table-first-row { position: sticky!important; top: 0!important;}
.chart-table-first-column { position: sticky; left: 0;}

/*///////////////////////////////////////////////////////////*/
/*Legend div styling*/
.legendDiv{
  position:absolute;
  bottom:1.7em;
  right:0%;
  overflow-y:auto;
  max-height:60%;
  color:var(--white);
  background-color: var(--black)!important;
  z-index:2;
}

.legend div span {
display: inline-block;
height: 0.9em;
margin-right: 0.3em;
width: 0.9em;
font-size:0.9em;
}

.legend-title {
  text-align: left;
  margin-bottom: 0.3em;
  font-weight: bold;
  font-size: 90%;
  }
.my-legend .legend-scale ul {
  margin: 0;
  margin-bottom: 0.3em;
  padding: 0;
  float: left;
  list-style: none;
  }
.my-legend .legend-scale ul li {
  font-size: 80%;
  list-style: none;
  margin-left: 0;
  line-height: 1em;
  margin-bottom: 0.3em;
  }
.my-legend ul.legend-labels li span {
  display: block;
  float: left;
  height: 1em;
  width: 2em;
  margin-right: 0.3em;
  margin-left: 0;
  border: 1px solid #999;
  }
.my-legend .legend-source {
  font-size: 70%;
  color: #999;
  clear: both;
  }
.my-legend a {
  color: #777;
  }
.leftLabel{float:left;}
.rightLabel{float:right;} 
.colorRamp{width:100%;height:1.5em;}
.legend-colorRamp{font-size: 0.9em;width:100%;}
/*///////////////////////////////////////////////////////////*/
/*Layer styling*/


.layer-spinner{
  color: var(--black)!important;
  font-size:0.9em!important;
}
.layer-container{margin-bottom:1px;}
.time-lapse-layer-range-container{
  float:right;
  width:30%;
  margin-top:-0.8em;

}
.time-lapse-label-container{
  padding-bottom:2em;
}
.simple-time-lapse-layer-range{

    /*height: 0.1rem;*/
    
    /*vertical-align:bottom;*/
    /*display:inline-block;*/
    /*vertical-align:bottom;*/
    margin-top:1.8em;
    cursor:pointer;
  }
  .simple-time-lapse-layer-range-first{

    /*height: 0.1rem;*/
    
    /*vertical-align:bottom;*/
    /*display:inline-block;*/
    /*vertical-align:bottom;*/
    margin-top:1.5em;
    cursor:pointer;
  }

.simple-layer-opacity-range{float:right;

    /*height: 0.1rem;*/
    
    width:30%;
    display:inline-block;
    vertical-align:bottom;
    margin-top:0.7rem;
    cursor:pointer;}

.layer-span, .layer-spinner,.layer-container,.toggle_radio,.collapse-title,.nav-item,ul{
  cursor:pointer;
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Opera and Firefox */
}


/*///////////////////////////////////////////////////////////*/
/*Radio toggle styling*/
.toggle_radio{
  position: relative;
  background: rgba(255,255,255,.5);
  margin: 4px auto;
  overflow: hidden;
  padding: 0 !important;
  -webkit-border-radius: var(--slider-border-radius);
  -moz-border-radius: var(--slider-border-radius);
  border-radius: var(--slider-border-radius);
  position: relative;
  float:left;
  height: 26px;
  width: 214px;
}
.toggle_radio > * {
  float: left;
}
.toggle_radio input[type=radio]{
  display: none;
  /*position: fixed;*/
}
.toggle_radio label{
  background:#FFF;
  color: #000;
  z-index: 0;
  display: block;
  width: 100px;
  height: 20px;
  margin: 3px 3px;
  -webkit-border-radius: var(--slider-border-radius);
  -moz-border-radius: var(--slider-border-radius);
  border-radius: var(--slider-border-radius);
  cursor: pointer;
  z-index: 1;

  text-align: center;

}
.toggle_option_slider{
  /*display: none;*/
  /*background: red;*/
  width: 100px;
  height: 20px;
  position: absolute;
  top: 3px;
  -webkit-border-radius: var(--slider-border-radius);
  -moz-border-radius: var(--slider-border-radius);
  border-radius: var(--slider-border-radius);
  -webkit-transition: all .4s ease;
  -moz-transition: all .4s ease;
  -o-transition: all .4s ease;
  -ms-transition: all .4s ease;
  transition: all .4s ease;
}

.first_toggle:checked ~ .toggle_option_slider{
  background: var(--transparent-teal);
  left: 3px;
  font-weight: 900!important;
}
.second_toggle:checked ~ .toggle_option_slider{
  background: var(--transparent-teal);
  left: 109px;
  font-weight: 900!important;
}
.third_toggle:checked ~ .toggle_option_slider{
  background: var(--transparent-teal);
  left: 215px;
}
/*///////////////////////////////////////////////////////*/
/*Scroll bar styling*/
::-webkit-scrollbar {
    width: 0.7em;
}

::-webkit-scrollbar-track {
     -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
}

::-webkit-scrollbar-thumb {
    background: var(--deep-brown-70); 
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}
.flexcroll::-webkit-scrollbar {
    width: 0.7em;
}

/* Track */
.flexcroll::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
}
/* Handle */
.flexcroll::-webkit-scrollbar-thumb {
  background: var(--deep-brown-70); 
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}
.flexcroll{
  scrollbar-color: var(--deep-brown-70) rgba(0,0,0,0.3);
  scrollbar-width: thin;
  scrollbar-height: thin;
  -webkit-scrollbar-color: var(--deep-brown-70) rgba(0,0,0,0.3);
  -webkit-scrollbar-width: thin;
  -webkit-scrollbar-height: thin;
}

.fa{
  font-size:1.1em;
  color:#FFF;
  cursor:pointer;
  }

/*///////////////////////////////////////////////////////////*/
/*Panel styling*/
.panel-heading{
  border-top: 0.04em solid var(--deep-brown-10);
  border-bottom: 0.04em solid var(--deep-brown-10);
  background-color: var(--transparent)!important;
  color:var(--white)!important;
}

.bg-white, .panel-body{
  background-color: var(--deep-brown-10)!important;
  margin:0px!important;
  color:#000!important;
  outline:none!important;
}
.bg-download-select{
  
  background-color: var(--deep-brown-10)!important;
  margin:0px!important;
  color:var(--teal-100)!important;
  outline:none!important;
}
.bg-download-select::selection {
  color: red; 
  background: yellow;
}
.panel-title > a:after {
    float: right !important;
    font-family: FontAwesome;
    content:"\f068";
    padding-right: 5px;   
}

.panel-title.collapsed > a:after {
    float: right !important;
    content:"\f067";
}
.sub-panel-title{
  padding-top:0.8em;
}
.sub-panel-title > a:after {
  float: left !important;
  font-family: FontAwesome;
  content:"\f077" !important;
  padding-right: 5px;
}

.sub-panel-title.collapsed > a:after {
  float: left !important;
  content:"\f078" !important;
}

.sub-sub-panel-title.collapsed> a, .sub-panel-title.collapsed> a{
  font-weight: 100!important;
  color:var(--black)!important;
}

.sub-sub-panel-title > a , .sub-panel-title > a{
  font-weight: 900!important;
  /*color:var(--orange)!important;*/
}

.sub-sub-panel-title > a:after {
    float: left !important;
    font-family: FontAwesome;
    content:"\f205" !important;
    padding-right: 5px;
    color:var(--teal-100);
}

.sub-sub-panel-title.collapsed > a:after {
  float: left !important;
  content:"\f204" !important;
  color:var(--black);
}

.sub-panel-title, .sub-sub-panel-title{
  background-color: var(--deep-brown-10)!important;
  color:var(--black);
  font-weight: bold!important;
  /*background-color:var(--deep-brown-20);*/
  font-size:1.1em;
  border-top: 0.1em solid var(--deep-brown-30);
}

.collapse-title {
  color:var(--white);
}

.sub-sub-panel-title:hover,.sub-panel-title:hover,.collapse-title:hover,.panel-title:hover,.dropdown-item:hover,.nav-link:hover, .hover-teal:hover, a:hover{ 
  text-decoration: none;
  font-weight: 1000!important;;
  cursor:pointer;
}

.panel-title:hover{
  color:var(--teal-100)!important;
}

.card{
  border-radius: 0px!important;
  background-color: var(--white)!important;
}
/*///////////////////////////////////////////////////////////*/
/*Google Maps info window styling*/
.gm-style-iw{
  border-radius: 1px!important;
}
/*///////////////////////////////////////////////////////////*/
.dropdown{cursor: pointer;}



.btn{padding:0.3em;}
.btn:active{background-color: var(--teal-100)!important;
            transform: scale3d(1.05, 1, 1);}
.btn:hover{font-weight: 300}
.color-button{
  border-radius:0.2em;
  height:2.1em;
  width:2.1em;
  border:0.1em solid black;
  vertical-align: middle!important;
}}
/*///////////////////////////////////////////////////////////*/
/*Dropdown styling*/

.dropdown-menu:hover{
  display: block;
  cursor:pointer;
}
.dropdown-item{
  padding:0px!important;
}
input[type = 'checkbox'],label,input[type = 'radio']{
                cursor:pointer;
              }
input[type=checkbox],input[type=radio] { display:none; } /* to hide the checkbox itself */
input[type=checkbox] + label:before ,input[type=radio] + label:before{
  font-family: FontAwesome;
  display: inline-block;
}


input[type=checkbox] + label:before,input[type=radio].form-check-input + label:before { content: "\f10c"; } /* unchecked icon */
input[type=checkbox] + label:before,input[type=radio].form-check-input + label:before { letter-spacing: 0.2em; } /* space between checkbox and label */

input[type=checkbox]:checked + label:before,input[type=radio].form-check-input:checked + label:before { content: "\f111"; color:#00897B;} /* checked icon */
input[type=checkbox]:checked + label:before,input[type=radio].form-check-input:checked + label:before { letter-spacing: 0.2em; } /* allow space for check mark */

/*///////////////////////////////////////////////////////////*/
/*Modal styling*/

/*.fa-rotate-45 {
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
}*/
.close{color:#FFF;}
.modal-content{
  border-radius: 0!important;
}
.modal-content{
   
    /*max-width:70em;*/
    /*overflow-x: auto;*/
    max-width:70em!important;
}
/*.modal-backdrop{
        display:none !important;
        backdrop: 'static';
    }*/
/*///////////////////////////////////////////////////////////*/
/*Dual slider styling*/

.ui-slider{
  height: .15em ;
}
.ui-slider-horizontal .ui-slider-handle {
  
  top: -.45em ; 
  border-radius:0em ;
  margin-left: -0.3em ;
  width: 0.6em ;
  height: 1em ;
  border: 0.1em solid var(--deep-brown-100); 

}
 .ui-widget-content .ui-state-default {
    background: var(--deep-brown-100)!important;  
}
.ui-slider-horizontal{ 
  height: .15em ;
  background:var(--deep-brown-70);  
  border: 0.05em solid var(--deep-brown-100);          
}
.ui-slider-horizontal .ui-slider-range{ 
  height: .25em ;
  background:var(--deep-brown-100);           
}
.ui-slider-horizontal .ui-slider-handle .ui-state-focus{
  border-radius: 0em!important;
}
/*///////////////////////////////////////////////////////////*/
/*Tree dropdown styling*/
/*Taken from https://www.w3schools.com/howto/howto_js_treeview.asp*/
/* Remove default bullets */
ul, #myUL {
  list-style-type: none;
}

/* Remove margins and padding from the parent ul */
#myUL {
  margin: 0;
  padding: 0;
}

/* Style the caret/arrow */
.caret {
  cursor: pointer;
  user-select: none; /* Prevent text selection */
}

/* Create the caret/arrow with a unicode, and style it */
.caret::before {
  font-family: FontAwesome;
  content:"\f07b";
  color: var(--teal-100);
  display: inline-block;
  margin-right: 0.2em;
  /*padding-left:0.5em;*/
}

/* Rotate the caret/arrow icon when clicked on (using JavaScript) */
.caret-down::before {
  font-family: FontAwesome;
  content:"\f07c";
  color: var(--teal-100);
  
}

/* Hide the nested list */
.nested {
  display: none;
  
}

/* Show the nested list when the user clicks on the caret/arrow (with JavaScript) */
.active {
   display: block;
   padding-left:1.2em;
   
}
/*
.ui-slider-horizontal .ui-slider-handle {

  top: -.45em ; 
  border-radius:0em ;
  margin-left: -0.3em ;
  width: 0.6em ;
  height: 1em ;
  border: 0.1em solid black; 
  background-color: rgba(0,0,0,0.5);
}*/



/*#Progress {
    position: relative;
    width: 100%;
    height: 10px;
    background-color: gray;
    border-radius:  5px;
}
#Bar {
    position: absolute;
    width: 1%;
    height: 100%;
    background-color: var(--white);
    border-radius:  5px;
}*/

/*.toggle-on  { background-color: var(--orange)!important;}
.toggle-off  { background-color: var(--deep-brown-80)!important;}
.toggle-on:hover{background-color: var(--orange);}
.toggle{width:100%;}*/


 

