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

#datepicker_div {
  display: flex;
  align-items: center;
  gap: 5px;
}

#container {
  display: flex;
  width: 100%;
  height: 100vh;
  margin-bottom: 12px;
  gap: 12px;
}

#data-div {
  display: flex;
  flex-direction: column;
  flex: 3.5;
}

#map-div {
  flex: 1;
}

#data-card {
  height: 100%;
}

#slider-div {
  flex: 0.5;
  min-height: 60px;
}

#tiff-div {
  flex: 6;
  height: 900px;
}

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

#month_label_div {
  position: relative;
  height: 20px;
  margin-top: 8px;
  pointer-events: none;
  overflow: visible;
  padding-left: 25px;
  padding-right: 25px;
}


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

.graph-3d {
  height: 830px !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;
}

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

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