.map {
    /* height: 400px; */
    height: 45vh;
    min-height: 350px;
    text-transform: none;
    position: relative;
}

.wwabox {
    width: 15px;
    border: solid 1px black;
    margin-right: 2px;
    display: inline-block;
    line-height: 10px;
    margin: 0.2em 0.5em 0 0;
}

#lbl {
    font-size: 14px;
    font-family: Arial;
}

#legend {
    font-size: 14px;
    font-family: Arial;
}

/* Override Bootstrap 276px max-width for popovers */
.popover {
    max-width: 313px;
}

.popover-body {
    /* max-width: 400px; */
    scrollbar-gutter: stable;
    max-height: 50vh;
    overflow-y: auto;
}

.popover-close {
    position: absolute;
    top: -0.75rem;
    left: -0.75rem;
}

#main-forecast-table {
    border-collapse: separate;
}

#forecast-carousel {
    overflow-x: hidden;
}

#forecast-title {
    min-height: 36px;
}

tr > th + th {
    border-left-width: 1.8rem !important;
    border-left-style: solid !important;
    border-color: transparent !important;
}

tr > td + td {
    border-left-width: 1.8rem !important;
    border-left-style: solid !important;
    border-color: transparent !important;
}

/* for CMS overrides */
.footer-legal {
    display: none;
}

.header {
    display: none;
}

/* for custom btns need to use em and set font-size below */
.get-location {
    top: 4.5em !important;
    left: .5em;
}

.download-screenshot {
    top: 6.5em !important;
    left: .5em;
}

.esri-layers {
    top: .5em !important;
    left: auto;
    right: .5em;
    #layer-collapse{
        overflow-y: scroll;
        max-height: 325px;
        max-width: 65vw;
        font-size: 1rem;
    }
}

.ol-touch .ol-overlaycontainer-stopevent {
    font-size: 1.25rem !important;
}

/* ol-touch not working with chrome browser on ios unless you include the important flag */
.ol-touch .ol-control button {
    font-size: inherit !important;
}

.ol-zoom-extent {
    top: 8.5em;
    left: .5em !important;
}

.ol-touch .ol-zoom-extent {
    top: 8.5em;
    left: .5em !important;
}

.ol-full-screen {
    bottom: .5em !important;
    left: .5em !important;
    top: auto;
    right: auto;
}

.ol-touch .ol-full-screen {
    bottom: .5em !important;
    left: .5em !important;
    top: auto;
    right: auto;
}


.chevron-animate {
    --fa-animation-duration: 500ms;
    --fa-animation-iteration-count: 0.5;
    animation-fill-mode: forwards;
}

@keyframes spinner {
    to {
      transform: rotate(360deg);
    }
  }

  .spinner:after {
    content: "";
    box-sizing: border-box;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 40px;
    height: 40px;
    margin-top: -20px;
    margin-left: -20px;
    border-radius: 50%;
    border: 5px solid rgba(180, 180, 180, 0.6);
    border-top-color: rgba(0, 0, 0, 0.6);
    animation: spinner 0.6s linear infinite;
  }