@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; /*original: #d6d1ca possible new one: edeae3*/
  --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;

  --orange-10: #ffd7b5;
  --orange-30: #ffb38a;
  --orange-80: #ff9248;
  --orange-100: #ff6700;

  --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;
  }
}
@media (min-width: 1200px) {
  .custom-col-xl {
    -ms-flex: 0 0 10%;
    flex: 0 0 10%;
    max-width: 10%;
  }
}
@media (min-width: 992px) {
  .custom-col-lg {
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%;
  }
}
@media (min-width: 768px) {
  .custom-col-md {
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%;
  }
}
@media (min-width: 576px) {
  .custom-col-sm {
    -ms-flex: 0 0 41.666667%;
    flex: 0 0 41.666667%;
    max-width: 41.666667%;
  }
}
.custom-col-xl,
.custom-col-lg,
.custom-col-md,
.custom-col-sm {
  position: relative;
  width: 100%;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
}
/*/ //////////////////////////////////////////////////////*/
.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*/
.white {
  color: var(--deep-brown-20);
}

.gray {
  color: var(--deep-brown-70);
}

.dark-gray {
  color: var(--deep-brown-10);
}
.db-100 {
  color: var(--deep-brown-100) !important;
}
.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-tan {
  background-color: var(--deep-brown-20) !important;
  color: var(--deep-brown-100) !important;
}
.bg-black,
.btn {
  background-color: var(--black) !important;
  margin: 0px;
  color: var(--white);
  outline: none !important;
  vertical-align: middle !important;
}

#reRun-button {
  margin-bottom: 0.5rem !important;
}

.shepherd-button {
  background-color: var(--deep-brown-100) !important;
  padding: 0.1rem 0.2rem;
  font-size: 1.25rem;
}

.shepherd-header {
  padding: 0.75rem;
}

.shepherd-content,
.shepherd-title,
.shepherd-header,
.shepherd-text,
.shepherd-footer {
  background-color: var(--deep-brown-100) !important;
  color: var(--deep-brown-10) !important;
  overflow: auto;
}

.shepherd-title {
  font-size: 1.25rem;
  display: inline-block;
  max-width: 95%;
}

.shepherd-arrow:before {
  background-color: var(--teal-100) !important;
  outline-style: solid;
}
.shepherd-text > ul > li {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.shepherd-text > ul > li:not(:last-child) {
  border-bottom: 1px solid var(--deep-brown-10);
}
.eraser {
  color: var(--deep-brown-100) !important;
  cursor: pointer;
}

.eraser:active {
  transform: translate(3px) translateY(0px);
  color: var(--teal-100) !important;
}

.eraser-all {
  height: 0.8rem;
  cursor: pointer;
  /* display: table; */
  color: #000;
  background-color: var(--deep-brown-10);
  /* border: 1px solid var(--teal-100);; */
  /* font-family: 'Roboto'; */
  font-size: 0.8rem !important;
  margin-top: 0rem;
  margin-bottom: 0rem;
  margin-left: 0.25rem;
  padding-left: 0.25rem;
  padding-right: 0.25rem;
  border-radius: 0.2rem;
  padding-bottom: 0rem;
  /* margin-bottom: 0.5rem; */
}

.fa-eraser {
  color: var(--deep-brown-100) !important;
}

.eraser-all:active,
.fa-eraser:active {
  transform: translate(4px) translateY(0px);
  color: var(--teal-100) !important;
}

.eraser-all:hover {
  font-weight: 300;
}

.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 {
  padding-top: 1rem;
  margin-left: -1.7rem;
  font-size: 0.7rem;
  width: 4rem;
  color: var(--teal-100) !important;
  text-align: center;
}
.time-lapse-year-label{
  font-size: 1.25rem; 
  font-weight: bold;
  margin-top:0px;
  margin-bottom:0.25rem;
}
.info-page {
  color: var(--deep-brown-20) !important;
  /* padding-top:3rem; */
}

.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;*/
}

hr {
  border: 0;
  border-top: 0px solid var(--deep-brown-100);
}

.text-black {
  color: var(--black) !important;
}

table {
  border: none !important;
}

.dropdown-divider {
  margin-top: 0.2em;
  margin-bottom: 0em;
  padding-top: 0.2em;
  padding-bottom: 0.2em;
}

/*///////////////////////////////////////////////////////*/

/*/ ////////////////////*/

/* Add styling here you wish to add for screens with a width of 600px and wider */

.figure {
  display: right;
  float: right;
}

.figcaption {
  width: 50%;
  text-align: justify;
  font-size: 20em;
}

/*///////////////////////////*/

.container-beforeIntro {
  padding-right: -50px;
  padding-left: 100px;
  margin-right: -15px;
  margin-left: -15px;
}

.container-intro {
  padding-right: 25px;
  padding-left: 45px;
  margin-right: 0px;
  margin-left: -15px;
}

.main-container {
  position: absolute;
}

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

#forward-view-button {
  border-radius: 0px 3px 3px 0px;
}
.json-input-text-box {
  resize: vertical;
  max-height: 15rem;
}

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*/
button {
  -webkit-appearance: button;
}

.dashboard-results-toggler {
  position: absolute;
  top: 0%;
  margin-top: -0.2rem;
  z-index: 5;
  height: 3rem;
}

.sidebar-toggler {
  position: absolute;
  top: 0%;
  left: 0%;
  z-index: 5;
  /*margin-left:-0.1rem;*/
  margin-top: -0.2rem;
  height: 3rem;
  /*border: none;*/
  /*background: none;*/
}

.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;
  overflow-x:hidden;
  max-height: calc(100% - 1.7rem);
  background-color: var(--black) !important;
  z-index: 3;
  /* max-width: 600px; */
  resize: horizontal;
}

.vl {
  border-left: 1px solid var(--deep-brown-20);
  /* height: 1.25rem; */
  /* vertical-align: middle; */
  /* display: inline-block; */
  margin-left: 0.1rem;
  margin-right: 0.25rem;
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
}

.hl {
  background-color: var(--deep-brown-20);
  height: 0px;
  width: 100%;
  vertical-align: middle;
  display: inline-block;
  margin-left: 0rem;
  margin-right: 0rem;
  margin-top: 0rem;
  padding: 0;
}

.vl-home {
  border-left: 1px solid var(--deep-brown-20);
  height: 2.5rem;
  vertical-align: middle;
  display: inline-block;
  margin-left: 0.1rem;
  margin-right: 0.25rem;
  margin-top: 0rem;
  margin-bottom: 0.4rem;
}

.vl2 {
  border-left: 1px solid var(--deep-brown-100);
  height: 2rem;
  vertical-align: middle;
  display: inline-block;
  margin-left: 0rem;
  margin-right: 0rem;
}

.title-banner {
  font-weight: 100;
  font-family: "Roboto";
  margin-left: 2.5rem;
  margin-right: 0.5rem;
  margin-bottom: 0rem;
  margin-top: 0.25rem;
  font-size: 1.5rem;
  display: flex;
}

.title-banner-icon {
  height: 1.7rem;
  margin-left: 0rem;
  /* margin-right: 0.1rem; */
  margin-top: 0.25rem;
}

/* the noWrap class */
.noWrap {
  overflow-x: scroll;
  white-space: nowrap;
  padding: 0;
}

.search-bar {
  padding-left: 2.75rem;
  margin-bottom: 0.5rem;
  width: 95%;
  height: 1.75rem;
}
.search-bar > .btn {
  background-color: var(--deep-brown-10) !important;

  margin-left: 0px !important;
  margin-top: 0.25rem !important;
  cursor: auto !important;
  font-size: 1rem !important;
}
.search-bar > .btn > i {
  vertical-align: top;
}
.search-bar > input {
  text-align: left;
  width: 100%;
  color: var(--deep-brown-100) !important;
}
.search-bar > input::placeholder {
  text-align: left;
  font-size: 1rem;
}

/*///////////////////////////////////////////////////////////*/
/*Dashboard results styling*/
.dashboard-results-container {
  position: absolute;
  bottom: 0%;
  left: 0%;
  width: 100%;
  height: 0px;

  z-index: 2;
}

#dashboard-results-expander {
  height: 0.75rem;
  background-color: var(--teal-100);
  margin: 0;
  padding: 0;
  cursor: grab;
}

.dashboard-results {
  height: 100%;
  width: 100%;
  overflow-x: scroll;
  overflow-y: hidden;
  white-space: nowrap;
  color: var(--white);
  /* background-color: var(--black)!important; */
  margin: 0;
  padding: 0;
}

.dashboard-row-hover {
  background-color: var(--almost-transparent) !important;
  box-shadow: inset 0 0 0 9999px rgba(0, 0, 0, 0.075);
}

.dashboard-highlights {
  position: absolute;
  top: 0rem;
  right: 0%;
  /* max-width:35rem; */
  max-height: 100%;
  overflow-y: auto;
  overflow-x: auto;
  z-index: 2;
  padding-left: 0px;
  padding-right: 0px;
}

.dashboard-download-div {
  margin: 0.5rem;
}

.dashboard-download-button {
  background-color: var(--deep-brown-100) !important;
  margin-left: 2.5rem;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  border-radius: 0.1rem;
  color: var(--deep-brown-10) !important;
  font-family: "Roboto";

  font-size: 1rem;
  border: 1px solid var(--deep-brown-100);
}

.dashboard-download-icon {
  color: var(--deep-brown-10) !important;
}

.nav-tabs > li > a {
  color: var(--deep-brown-20);
  background-color: var(--deep-brown-100);
}

.nav-tabs .nav-link {
  border: 1px solid var(--deep-brown-20);
  border-top-left-radius: 0.25rem;
  border-top-right-radius: 0.25rem;
  height: 2rem;
  font-size: 0.85rem;
}

.nav-tabs .nav-link:active {
  background-color: var(--teal-100) !important;
  transform: scale3d(1.05, 1, 1);
  color: var(--deep-brown-100);
}

.nav-tabs > li > a:hover {
  color: var(--teal-100);
}

.nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link.active {
  color: var(--deep-brown-100);
  background-color: var(--deep-brown-20);
  font-weight: bold;
}

.highlights-table-tabs {
  max-width: 100%;
}

.highlights-row {
  font-size: 0.65rem;
}

.highlights-entry {
  padding: 0.1rem;
  word-wrap: break-word;
}

.highlights-insig {
  color: var(--deep-brown-80);
}

.highlights-sig {
  font-weight: 900;
  font-size: 0.75rem;
  color: var(--deep-brown-100);
}

.highlights-title {
  color: var(--deep-brown-20);
  font-family: "Roboto";
  font-size: 1.75rem;
  text-align: center;
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
  margin-left: 3rem !important;
  font-weight: 200;
}

.highlights-table-title {
  color: var(--deep-brown-20);
  font-family: "Roboto";
  font-size: 0.75rem;
  text-align: center;
  font-weight: 200;
}

.highlights-table-section-title {
  color: var(--deep-brown-20);
  background-color: var(--deep-brown-100) !important;
  font-family: "Roboto";
  font-size: 0.75rem;
  text-align: left;
  font-weight: 300;
}

.highlights-table {
  overflow-y: auto;
  padding-left: 0px !important;
}

.dataTables_filter {
  text-align: left !important;
  margin-left: 0.5rem;
  margin-top: 0.5rem;
  margin-bottom: 0.25rem;
  font-size: 0.75rem;
  color: var(--deep-brown-100);
  font-family: "Roboto";
}

div.dataTables_info {
  margin-left: 0.75rem;
}

.highlights-disclaimer {
  margin-top: 0.75rem;
  margin-left: 0.75rem;
  margin-right: 0.75rem;
  margin-bottom: 0.75rem;
  font-size: 0.75rem;
  max-width: 20rem;
  /* color: var(--deep-brown-20); */
}

.btn-group > .btn {
  padding-bottom: 0px;
  border-radius: 3px;
  color: var(--deep-brown-20);
  background-color: var(--deep-brown-100);
  font-size: 0.75rem;
  margin-top: 0.5rem;
}

.areaChart-download-btn-group {
  margin-left: 1.8rem;
}

.pac-container {
  background-color: var(--deep-brown-20);
}
.input-group-text,
.form-control {
  /* border: none; */
  height: 1.5rem;
}
.share-and-location-buttons {
  width: 1.8rem;
  margin-left: 2rem;
}
.hr {
  height: 1px;
  border: none;
  background-color: var(--deep-brown-20);
}

#dashboard-progress-container {
  padding-left: 1.75rem;
  padding-right: 1rem;
}

#areaChart-progress-container {
  width: 15rem;
  display: inline-block;
}

@keyframes color {
  to {
    background-color: var(--deep-brown-20);
  }
}

.progress-pulse {
  /* background-color: #222; */
  animation-name: color;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-direction: alternate-reverse;
  animation-timing-function: ease;
}

@keyframes Pulsate {
  from {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.progress-overlay {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: #88888888;
  z-index: 99999;
  animation: Pulsate 4s linear infinite;
}

.progressbar {
  background: var(--deep-brown-80);
  width: 100%;
  /* margin-left:0.5rem; */
  /* margin-right:0.5rem; */
  font-size: 1rem;
  height: 0.8rem;
  margin-top: 0.1rem;
  margin-bottom: 0.25rem;
}

.progress-spinner {
  /* margin-left:0.25rem; */
  margin-right: 0.25rem;
  margin-top: 0rem;
  margin-bottom: 0rem;
  height: 1rem;
  width: 1rem;
}

.progressbar span {
  display: block;
  /* border-radius: 2px; */
  text-align: center;
  color: #fff;
  transition: 300ms width linear;
  /*line-height: 1.2em;*/
  background: #00897b;
  /* max-width: 100%; */
  height: 0.8rem;
  font-size: 0.6rem;
  /* padding-bottom: 0.45rem; */
  padding-top: 1px;
  /* padding-top: 0.1rem; */
}

/*///////////////////////////////////////////////////////////*/
/*Bottombar styling*/
.bottombar {
  position: absolute;
  bottom: 0%;
  left: 5rem;
  /* width:100%; */
  color: var(--white);
  background-color: var(--black) !important;
  /*max-height:1.7em;*/
  font-size: 0.8rem;
  z-index: 999;
}

.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 {
  height: 1.5rem;
  float: right;
  margin: 0.2em;
  border-radius: 0px;
  /*background:rgba(255,255,255,0.2);*/
}

.support-icons {
  max-width: 4em;
  max-height: 3em;
}

.support-text {
  color: var(--deep-brown-100) !important;
}

.support-text:hover {
  /*color:var(--teal-100)!important;*/
  font-weight: bold;
}

.text-capitalize {
  text-transform: uppercase !important;
}

.table-bordered td {
  border-right: 1px solid #000 !important;
  border-left: 1px solid #000 !important;
}

.table {
  margin-bottom: 0.25rem;
}

#transition-period-table.table td,
#transition-period-table .table th {
  padding: 0.5rem;
}
.query-output-header-title {
  font-weight: bold;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  margin-top: 0rem;
  margin-bottom: 0rem;
}
.chart-table {
  max-height: 30rem;
  max-width: 90rem;
  overflow-y: auto;
  overflow-x: auto;
  font-size: 0.8rem;
}

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

.chart-table-first-row {
  position: sticky !important;
  top: 0 !important;
  z-index: 1;
}

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

.chartjs-chart,
.plotly-chart {
  /* max-width:30rem; */
  display: inline-block;
  height: 100%;
  /* width:33rem; */
  /* padding-top:0.5rem; */
  /* padding-bottom:0.5rem; */
  /* padding-left:0.5rem; */

  /* padding-right:0.5rem; */
}

.lcms-change-table-columns td {
  font-size: 12px;
  table-layout: fixed;
  padding: 15px 75px 0px 0px;
  /*top,right,bottom,left*/
  max-width: 1000px;
}

td {
  word-wrap: break-word;
}

/* .plotly-chart{ */
/* padding-top:0.75rem; */
/* margin-left:0.5rem; */
/* } */
.plotly-chart-download {
  display: none;
}

/*///////////////////////////////////////////////////////////*/
/*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;
} */

.legend-title {
  text-align: left;
  margin-bottom: 0.1rem;
  font-weight: bold;
  font-size: 0.9rem;
}

.legend .legend-row-container ul {
  margin: 0;
  padding: 0;
  float: left;
  list-style: none;
}

.legend .legend-row-container ul li {
  font-size: 0.75rem;
  margin-left: 0;
  line-height: 0.75rem;
  margin-bottom: 0.25rem;
}

.legend ul.legend-labels li span {
  display: block;
  float: left;
  height: 0.75rem;
  width: 1.5rem;
  margin-right: 0.3rem;
  margin-left: 0;
  border: 1px solid #999;
}

ul[id^="RAVG-Burn-Perimeters"][id$="class-container"] li span{
    /*legend style for RAVG Burn Perimeters layer*/
    border: 3px solid #00F;
}

.legend .legend-source {
    font-size: 70%;
    color: #999;
    clear: both;
}

.legend a {
  color: #777;
}

.leftLabel {
  float: left;
  font-size: 0.85rem;
}
.centerLabel {
  float: center;
  font-size: 0.85rem;
}
.rightLabel {
  float: right;
  font-size: 0.85rem;
}

.colorRamp {
  width: 100%;
  height: 1rem;
}

.legend-colorRamp {
  font-size: 0.9rem;
  width: 100%;
}

/*///////////////////////////////////////////////////////////*/
/*Layer styling*/

.layer-spinner {
  color: var(--black) !important;
  font-size: 0.9em !important;
}

.layer-container {
  margin-bottom: 1px;
}
.layer-label-container {
  display: inline;
  padding-left: 0.5rem;
}
.export-name-input {
  display: inline;
  margin-left: 0.5rem;
  padding-left: 0.25rem;
  padding-right: 0.25rem;
  /* border-top-left-radius: 3px !important; */
  /* border-bottom-left-radius: 3px !important; */
}
.layer-label-lcms {
  color: #cc4c02 !important;
}

.layer-label-tcc {
  color: #080 !important;
}
.layer-label-mtbs {
  color: #BB3b02 !important;
}
/* .layer-label-lcms,
.layer-label-tcc {
  text-shadow: -1px 0 var(--deep-brown-100), 0 1px var(--deep-brown-100),
    1px 0 var(--deep-brown-100), 0 -1px var(--deep-brown-100);
} */
.layer-list {
  padding-bottom: 1px;
  padding-top: 1px;
  padding-left: 0px;
  margin-bottom: 0px;
}

.time-lapse-layer-range-container {
  float: right;
  max-width: 10%;
  margin-top: -1rem;
}

.time-lapse-label-container {
  padding-bottom: 1rem;
  margin-bottom: 0.25rem;
}

/* .btn>i.fa{font-size: 0.95rem;} */
.timelapse-icon-bar > button.btn {
  padding-left: 0.3rem;
  padding-right: 0.3rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}
.timelapse-icon-bar {
  padding-left: 2rem;
  padding-top: 0.75rem;
}
.simple-time-lapse-layer-range {
  /*height: 0.1rem;*/

  /*vertical-align:bottom;*/
  /*display:inline-block;*/
  /*vertical-align:bottom;*/
  margin-top: 2rem;
  cursor: pointer;
  float: right;

  /*height: 0.1rem;*/

  min-width: 4rem;
}

.simple-time-lapse-layer-range-first {
  /*height: 0.1rem;*/

  /*vertical-align:bottom;*/
  /*display:inline-block;*/
  /*vertical-align:bottom;*/
  float: right;

  /*height: 0.1rem;*/

  min-width: 4rem;
  margin-top: 1.5rem;
  cursor: pointer;
}

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

  /*height: 0.1rem;*/

  min-width: 4rem;
  /* 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, 0.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);
  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;
  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 0.4s ease;
  -moz-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  -ms-transition: all 0.4s ease;
  transition: all 0.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;
}

.param-title {
  font-weight: bold;
  padding-top: 0.5rem;
  margin-bottom: 0rem;
}
#parameters-collapse-div,
#select-aoi-pane,
#pre-post-dates-div,
#support-collapse-div,
#download-collapse-div-lcms {
  padding-left: 2.5rem;
  padding-right: 2.5rem;
}
#layer-list-collapse-div,
#reference-layer-list-collapse-div,
#related-layer-list,
#legend-collapse-div,
#download-collapse-div,
.walk-through-popup {
  padding-left: 1rem;
  padding-right: 1.5rem;
}
/*///////////////////////////////////////////////////////*/
/*Scroll bar styling*/
::-webkit-scrollbar {
  width: 0.7rem;
  height: 0.7rem;
  cursor:pointer;
}

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

/* 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.1rem;
  color: #fff;
  cursor: pointer;
}

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

.bg-white,
.panel-body {
  background-color: var(--deep-brown-10) !important;
  margin: 0px !important;
  color: #000 !important;
  outline: none !important;
}

.panel-collapse .panel-body,
.sub-panel-collapse {
  padding-left: 3rem;
  padding-right: 2rem;
}

.bg-download-select {
  background-color: var(--deep-brown-10) !important;
  margin: 0px !important;
  color: var(--teal-100) !important;
  outline: none !important;
}
.download-selection-label {
  display: flex;
}

.panel-title {
  font-size: 1.25rem;
}

.h3 {
  font-size: 1rem;
}

.panel-title > a:after {
  float: right !important;
  font-family: FontAwesome;
  content: "\f068";
  padding-right: 5px;
}

.panel-title-svg-lg {
  width: 3rem;
  height: 3rem;
  margin-right: -0.5rem;
  margin-left: -1rem;
  margin-top: -1.25rem;
  margin-bottom: -1rem;
}

.panel-title-svg-sm {
  width: 1.75rem;
  height: 1.75rem;
  margin-right: 0rem;
  margin-left: -0.35rem;
  margin-top: -0.75rem;
  margin-bottom: -0.5rem;
}
.panel-title-svg-xsm,
img.layer-spinner {
  width: 1.15rem;
  margin-bottom: 0.25rem;
}
img.initial-loading-spinner {
  margin-left: -0.1rem;
}
.panel-title.collapsed > a:after {
  float: right !important;
  content: "\f067";
}

.sub-panel-title {
  padding-top: 0.8rem;
  margin-bottom: 0rem;
  padding-left: 0.9rem;
}

.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;
  padding-top: 0.35rem;
  padding-bottom: 0.35rem;

  /* border-top: 0.1em solid var(--deep-brown-30); */
}
.sub-sub-panel-title {
  padding-left: 1rem;
}
.collapse-title {
  color: var(--white);
}
.sub-sub-panel-title > a.collapse-title,
.sub-panel-title > a.collapse-title {
  padding-left: 0.5rem;
}
.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;
}
#parameters-collapse-div > div > .sub-panel-heading,
#pre-post-dates-div > div > .sub-panel-heading {
  margin-left: -2.5rem;
  margin-bottom: 1rem;
}
#parameters-collapse-div > .sub-panel-collapse,
#pre-post-dates-div > .sub-panel-collapse {
  padding-left: 0.5rem;
}
.accordion > h5:first-child {
  padding-left: 3rem;
  padding-top: 1rem;
  font-weight: bold;
}
.accordion > h5:not(:first-child) {
  padding-left: 2rem;
  padding-top: 1rem;
  font-weight: bold;
  border-top: 0.1rem solid var(--deep-brown-100);
  margin-left: 1rem;
  margin-right: 1.5rem;
}
#splash-toggle-container {
  /* padding-left: 1rem; */
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  font-weight: bold;
  border-top: 0.15rem solid var(--deep-brown-100);
}

.panel-title:hover {
  color: var(--teal-100) !important;
}
/* .sub-sub-panel-title {
  padding-left: 1rem !important;
} */
.card {
  border-radius: 0px !important;
  background-color: var(--white) !important;
}

/*///////////////////////////////////////////////////////////*/
/*Google Maps info window styling*/
.gm-style-iw {
  border-radius: 1px !important;
}

.gm-marker-label {
  background-color: #372e2c;
  bottom: 1rem;
  right: 60%;
  position: relative;
  font-size: 0.8rem;
  font-family: "Roboto Condensed", sans-serif;
}

/*///////////////////////////////////////////////////////////*/
.dropdown {
  cursor: pointer;
}

.btn.area-chart-download-btn {
  width: 2.25rem;
  padding: 0rem;
}

.btn {
  padding: 0.25rem 0.5rem;
}

.btn:active,
.drawing-mode-selector:active {
  background-color: var(--teal-100) !important;
  transform: scale3d(1.05, 1, 1);
}
.btn-on {
  background-color: var(--teal-100) !important;
}
.btn:hover,
.drawing-mode-selector: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;
}

.class-color-pickers {
  max-width: 7rem;
  height: 1.15rem;
  background-color: var(--deep-brown-10);

  border: 0px;
}

.class-color-pickers-table {
  border-bottom: 1px solid black !important;
  font-size: 0.85rem;
}
.class-color-pickers-table > thead {
  text-align: center;
}

/* .drawing-mode-selector{} */
/*///////////////////////////////////////////////////////////*/
/*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;
}

input[type="date"] {
  background: transparent;
  color: var(--deep-brown-100);
  background-color: var(--deep-brown-20);
  color-scheme: dark;
}
/* allow space for check mark */

textarea {
  resize: none;
  overflow: hidden;
  min-height: 4rem;
  max-height: 10rem;
}
.selectable-text-list {
  word-wrap: break-word;
  user-select: text;
  padding-left: 1rem;
  color: var(--deep-brown-100);
}
.checkboxList {
  padding-left: 0.2rem;
}

/*///////////////////////////////////////////////////////////*/
/*Export styling*/
.export-res-input {
  max-width: 2rem;
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}
.export-res-input-label {
  background-color: var(--deep-brown-20);
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
  max-width: 1.25rem;
  padding-left: 0.25rem;
  padding-right: 0.25rem;
  padding-top: 0rem;
  padding-bottom: 0rem;
}
.export-format-input {
  max-width: 6rem;

  padding-left: 0.25rem;
  padding-right: 0.25rem;
  height: 1.5rem;
  padding-top: 1px;
  padding-bottom: 1px;
}
select.form-control.export-format-input:not([size]):not([multiple]) {
  height: 1.5rem;
}
.export-tracking-row {
  justify-content: space-between;
  display: flex;
  font-size: 0.75rem;

  border-bottom: 1px solid var(--deep-brown-80);
  border-radius: 0.35rem;
  overflow-wrap: break-word;
  padding: 0.25rem;
}
/* .export-tracking-btn {
  
} */

.export-tracking-btn {
  background-color: #0000;
  margin: 0px !important;
  border: none;
}
.export-tracking-btn > i,
.export-tracking-row > .btn-group > i {
  margin-left: 0.2rem;
  margin-top: 0.1rem;
}
.export-tracking-btn:active {
  transform: translate(3px) translateY(3px);
}

.export-tracking-complete {
  background-color: var(--deep-brown-20);
}
.export-tracking-running {
  animation: export-pulse 5s infinite;
}

@keyframes export-pulse {
  0%,
  100% {
    background-color: var(--teal-30);
  }
  50% {
    background-color: var(--teal-80);
  }
}
.tracking-list {
  padding-left: 0rem;
}
/*///////////////////////////////////////////////////////////*/
/*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-md {
  max-width: 550px;
}

.modal-content {
  border-radius: 0 !important;
}

.modal-content {
  /*max-width:70em;*/
  /*overflow-x: auto;*/
  max-width: 90em !important;
}

/* Intro modal styling */
.logo {
  height: 3rem;
  display: inline;
  vertical-align: top;
  margin-bottom: 0.5rem;
  margin-left: -0.3rem;
}

.splash-title {
  overflow: hidden;
  padding-left: 1rem;
  padding-right: 1rem;
  display: inline;
}

.modal-full-screen-styling {
  background-color: rgba(230, 230, 230, 0.8);
}

.modal-content-full-screen-styling {
  background-color: rgba(230, 230, 230, 0.2);
  border-style: none;
}

.intro-modal-links,
.links {
  text-decoration: underline !important;
  font-size: 1rem;
  font-weight: bold;
  overflow-wrap: break-word;
  margin-right: 0.3rem;
  color: var(--black) !important;
}

.links-bottombar {
  text-decoration: underline !important;
  /* font-size: 0.5rem; */
  /* font-weight: bold; */
  margin-right: 0.3rem;
  color: var(--white) !important;
}

.intro-modal-links:active,
.dashboard-download-button:active,
.intro-modal-links:hover {
  font-weight: 1000;
}

.intro-list li {
  display: block;
}

.modal-content-not-full-screen-styling {
  background-color: rgba(230, 230, 230, 0.8);
  border-style: none;
}

/*///////////////////////////////////////////////////////////*/
/*Dual slider styling*/

/* .ui-slider{
  height: .5rem ;
} */
.ui-slider-horizontal .ui-slider-handle {
  top: -0.45rem;
  border-radius: 0rem;
  margin-left: -0.3rem;
  width: 0.6rem;
  height: 1rem;
  border: 0.1rem solid var(--deep-brown-100);
}

.ui-widget-content .ui-state-default {
  background: var(--deep-brown-100) !important;
}

.ui-slider-horizontal {
  height: 0.2rem;
  background: var(--deep-brown-70);
  border: 0.1rem solid var(--deep-brown-100);
}

/* .ui-slider-horizontal .ui-slider-range{  */
/* height: .15rem ; */
/* background:var(--deep-brown-100);            */
/* } */
.ui-slider-horizontal .ui-slider-handle .ui-state-focus {
  border-radius: 0rem !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;
  border-top: none;
  user-select: none;
  /* Prevent text selection */
  white-space: nowrap;
  padding-bottom: 1.5rem;
  font-size: 1.1rem;
}

/* /*padding: 15px 0px 15px 0px; /*top,right,bottom,left*/
/* 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.3em;
  padding-left: 0.25em;
}

/* 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;
}

#downloadTree {
  color: var(--deep-brown-100);
}
.caret.caret-down {
  font-weight: bold;
}
.download-btn {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-top: 0.1rem;
  padding-bottom: 0.1rem;
}
.carousel-img {
  width: 100%;
  max-width: 600px;
  max-height: 500px;
}

.textFade {
  animation: fadeInAnimation ease 20s;
  animation-delay: ease 0;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

.textFade2 {
  animation: fadeInAnimation ease 25s;
  animation-delay: ease 0;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

.textFade3 {
  animation: fadeInAnimation ease 30s;
  animation-delay: ease 0;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

.textFade4 {
  animation: fadeInAnimation ease 35s;
  animation-delay: ease 0;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

.textFade5 {
  animation: fadeInAnimation ease 40s;
  animation-delay: ease 0;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

.textFade6 {
  animation: fadeInAnimation ease 45s;
  animation-delay: ease 0;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

@keyframes fadeInAnimation {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

/*
.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%;}*/