.geoviewer {
  &__widget.has-refs {
    display: flex;
    gap: 1rem;
    flex-direction: column;
    @media (min-width: @device-width-large) {
      flex-direction: row;
    }
    .geoviewer__map {
      @media (min-width: @device-width-large) {
        width: 70%;
      }
    }
    .geoviewer__refs {
      @media (min-width: @device-width-large) {
        margin: 0;
        width: 30%;
      }
    }
  }
  &-map {
    width: 100%;
    min-height: 500px;
  }
  &__refs {
    list-style-type: none;
    padding: 0;
    margin: 1rem 0;
    width: 100%;

    li {
      div {
        font-size: 0.9rem;
        font-style: italic;
        border: 1px solid #ccc;
        padding: 0.5rem 0.75rem;
        p {
          margin: 0;
        }
      }
      button {
        border-radius: 0;
        display: block;
        width: 100%;
        position: relative;
        text-align: left;
        border-bottom: 1px solid #ccc;
      }
    }
  }
  .leaflet-map-pane canvas {
    z-index: 1;
  }
  .leaflet-map-pane svg {
    z-index: 2;
  }
  .leaflet-tile-pane {
    z-index: 3;
  }
  .leaflet-pane {
    z-index: 4;
  }
  .leaflet-overlay-pane {
    z-index: 4;
  }
  .leaflet-shadow-pane {
    z-index: 5;
  }
  .leaflet-marker-pane {
    z-index: 6;
  }
  .leaflet-tooltip-pane {
    z-index: 7;
  }
  .leaflet-popup-pane {
    z-index: 7;
  }
  .leaflet-zoom-box {
    z-index: 8;
  }
  .leaflet-top,
  .leaflet-bottom {
    z-index: 9;
  }
}
