p {
  margin-bottom: 0px !important;
  font-size: 20px;
}

#low-res-btn {
  background-color: #32383e;
  border: 1px solid black;
  padding: 8px;
  width: 25%;
}

#high-res-btn {
  background-color: #32383e;
  border: 1px solid black;
  padding: 8px;
  width: 25%;
}

#three-d-container {
  width: 50%;
}

#graphs {
  width: 50%;
}

#data-year-container {
  width: 100%;
}

#container {
  display: grid;
  width: 100%;
  height: auto;
  grid-template-columns: 25% 75%;
  grid-template-rows: 120px 900px;
  margin-bottom: 2px;
}

#map-div {
  grid-row: 1/3;
  grid-column: 1/2;
}

#data-card {
  height: 100%;
}

#slider-div {
  grid-row: 1/2;
  grid-column: 2/3;
}

body.light #slider-div {
  color: black;
}

body.light #slider-div-content > :first-child {
  color: black;
}

body.light #title-div {
  background-color: white;
  /* border: 1px solid black; */
  color: black;
}


#tiff-div {
  grid-row: 2/3;
  grid-column: 2/3;
}

.full-height {
  height: 100% !important;
}

.graph-body > div,
.graph-3d > div,
.map-loader > div {
  height: 100% !important;
}

.map-loader > div > div:first-of-type,
.graph-3d > div > div:first-of-type {
  height: 100% !important;
}

#fig_3d_surface {
  height: 100%;
}

#map_location_selector {
  height: 100%;
}

#slider_date_selector {
  padding: 0px 25px !important;
}

#slider_year_selector .Select .Select-control .Select-clear-zone {
  display: none;
}

.Select-control,
.Select-menu-outer,
.is-open > .Select-control {
  background-color: #272b30;
}

.Select,
.has-value.Select--single > .Select-control .Select-value .Select-value-label,
.has-value.is-pseudo-focused.Select--single
  > .Select-control
  .Select-value
  .Select-value-label {
  color: white;
}


body.light .Select,
body.light .has-value.Select--single > .Select-control .Select-value .Select-value-label,
body.light  .has-value.is-pseudo-focused.Select--single
  > .Select-control
  .Select-value
  .Select-value-label {
  color: black
}

body.light .Select-control,
body.light .Select-menu-outer,
body.light .is-open > .Select-control {
  background-color: white;
}


.form-check-input {
    height: 20px !important;
    width: 35px !important;
}

.form-check-input:checked {
  background-color: #00aaff !important; /* Change the color when checked */
}

#layout-btn {
  background-color: #272b30;
  border: 1px solid white;
  color: white;
  width: 90px;
  border-radius: 5px;
}

#layout-btn:hover {
  background-color: #030404;
  cursor: pointer;
}

body.light #layout-btn {
  background-color: white;
  border: 1px solid black;
  color: black;
}

body.light #layout-btn:hover {
  background-color: #fff;
}

@media screen and (max-width: 1400px) {
  #container {
    display: grid;
    width: 100%;
    height: auto;
    grid-template-columns: 100%;
    grid-template-rows: 150px 900px 900px;
    margin-bottom: 2px;
  }

  #slider-div {
    grid-row: 1/2;
    grid-column: 1;
  }

  #map-div {
    grid-row: 2/3;
    grid-column: 1;
  }

  #tiff-div {
    grid-row: 3/4;
    grid-column: 1;
  }
}