html,
body,
.full-height-wrapper {
  height: 100%;
}

/** Single column layout */
@media only screen and (max-width: 780px) {
  #tree-range-select-buttons {
    height: fit-content;
    max-height: 35vh !important;
  }

  details.controls {
    max-width: calc(100% - .6rem) !important;
    margin-right: 20px !important;
  }
}

/** Two column layout */
@media only screen and (min-width: 780px) and (max-width: 1200px) {
  .rows-on-mobile {
    display: flex;
    flex-direction: column;
    flex-grow: 0;
  }

  details#summary-accordion {
    flex: 0 0 fit-content;
  }

  details#summary-accordion div.summary {
    height: 40vh;
  }

  details#controls-accordion {
    /* min-height: 0px; */
    flex: 0 2;
    flex-basis: fit-content;
  }

  .layout-columns {
    display: flex;
    width: 100%;
    /* Why does this overflow? Details elements? */
    height: 90%;
  }

  #summary-accordion {
    flex: 1 2 500px;
    width: 100%;
  }

  #tree-range-select-buttons {
    height: fit-content !important;
    overflow: hidden !important;
  }

  #tree_root {
    flex: 2 1 500px;
    min-width: 500px;
    overflow: auto;
    mask-image: linear-gradient(to bottom, black calc(100% - 48px), transparent 100%);
  }

  .summary,
  details>div {
    overflow: auto;
    mask-image: linear-gradient(to bottom, black calc(100% - 48px), transparent 100%);
    /* Why does this overflow? Details elements? */
    height: 80vh !important;
  }
}

/** Three column layout */
@media only screen and (min-width: 1200px) {
  .rows-on-mobile {
    display: flex;
    flex-direction: row;
    flex: 1 2 700px;
  }

  .layout-columns {
    display: flex;
    width: 100%;
    /* Why does this overflow? Details elements? */
    height: 90%;
  }

  #summary-accordion {
    flex: 1 2 500px;
    width: fit-content;
  }

  #tree-range-select-buttons {
    height: fit-content !important;
    overflow: hidden !important;
  }

  #tree_root {
    flex: 2 1 500px;
    min-width: 500px;
    overflow: auto;
    mask-image: linear-gradient(to bottom, black calc(100% - 48px), transparent 100%);
  }

  .summary,
  details>div {
    overflow: auto;
    mask-image: linear-gradient(to bottom, black calc(100% - 48px), transparent 100%);
    /* Why does this overflow? Details elements? */
    height: 80vh !important;
  }
}

/** Safari only block for when it's needed again. */
@supports (-webkit-backdrop-filter: blur(10px)) {}

/**
 * Set some different heights for species images based on the rough available space.
 */

@media only screen and (min-width: 780px) and (max-width: 1200px) and (max-height: 1000px) {
  .tree_box img {
    max-height: 50px !important;
  }
}

@media only screen and (min-width: 1200px) and (max-height: 1000px) {
  .tree_box img {
    max-height: 60px !important;
  }
}

@media only screen and (min-width: 780px) and (min-height: 1000px) and (max-height: 2000px) {
  .tree_box img {
    max-height: 60px !important;
  }
}

@media only screen and (min-width: 780px) and (min-height: 2000px) {
  .tree_box img {
    max-height: 100px !important;
  }
}