/* DASH SPECIFIC STYLES */

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

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

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

#btn-previous, #btn-next {
  width: 49%;
}

.DateInput,
.DateInput_input {
  height: 36px;
}

#data-export {
  margin-right: 12px;
}

.DateInput {
  width: 40%;
}

@media (max-width: 1550px) {
  .DateInput_input {
    width: 115%;
  }
}

#pillow-map > div.js-plotly-plot > div > div > svg:nth-child(1) {
  background-color: transparent !important;
}

.spatial-controls-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px;
  gap: 10px;
}

#map-div {
  padding-right: 16px;
}

#pillow-graph {
  height: 94.125vh;
}

#pillow-map {
  height: 50vh;
}


@media (min-width: 1550px) {
  #pillow-graph {
    height: 86.25vh;
  }
  
  #pillow-map {
    height: 53vh;
  }
}