html,
body {
  margin: 0;
  height: 100vh; 
}


/*
html,
body {
  margin: 0;
  height: 100%;
}

  .map {
        width: 100%;
        height: calc(100vh - 56px);
      }

*/




/* Need to set the heiught to 100VH in order for map to appear.. 100% height does not work. Below . 
refers to class map # refers to div. Also, subtract 56 as this is the nav bar height, so we don't pop out from the bottom of hte 
screen with teh 100vh! (which is viewport height)*/
  .map {
        width: 100%;
        height: calc(100vh - 56px);
      }

/* THE WIND OBS TIMER LABEL ON THE MAP  - STYLE OF HTE LABEL  */
.leaflet-control-obstimer {
  background-color: rgba(255, 255, 255, 0.9);
  padding: 0 5px;
  margin: 0 !important;
  border-radius: 2px;
  color: #333;
  white-space:nowrap; 
  font: 12px/1.5 "Helvetica Neue", Arial, Helvetica, sans-serif;
}

/* THE WIND OBS TIMER LABEL ON THE MAP - TO CENTER IT */

.leaflet-center {
    left: 50%;
    transform: translate(-50%, 0%);
}

.leaflet-middle {
    top: 50%;
    position: absolute;
    z-index: 1000;
    pointer-events: none;
  transform: translate(0%, -50%);

}

.leaflet-center.leaflet-middle {
  transform: translate(-50%, -50%);
}






/* REMOVE WHITE SPACE DOWN LEFT AND RIGHT SIDE OF MAP  */
.row > * {
    flex-shrink: 0;
    width: 100%;
    max-width: 100%;
    padding-right: 0px;
    padding-left: 0px;
    margin-top: var(--bs-gutter-y);
}

/* LAYER SELECTION BOX - ICON CHANGE  */
.ol-layerswitcher-image > button:before,
.ol-layerswitcher-image > button:after,
.ol-layerswitcher > button:before,
.ol-layerswitcher > button:after {
  content: "";
  position:absolute;
  width: .45em;
  height: .45em;
  border-radius: 0.15em;
  -webkit-transform: scaleY(.8) rotate(45deg);
  transform: scaleY(.8) rotate(45deg) translate(-2px,1px);
}

.ol-layerswitcher-image > button,
.ol-layerswitcher > button {
  background-color: white;
  float: right;
  z-index: 10;
  position: relative;
  font-size: 1.7em;
  height: 1.0em;
  width: 1.0em;
}


/* LABLE ANNOTATION  */
.leaflet-popup-close-button {
            display:none;
        }

.leaflet-label-overlay {
            width: max-content;;
            height: auto;
  
            text-shadow:
            -1px -1px 0 #000,
            1px -1px 0 #000,
            -1px 1px 0 #000,
            1px 1px 0 #000;
            /*background-color: transparent;*/
            /* background-color: blue; */

            /* margin-top: -50px; */
            position:absolute;

            margin: auto;
            text-align: center;
            /* for forcing text on one line 
            overflow: hidden; 
            white-space: nowrap;*/
            white-space: pre-line;           
        }

/* EMAIL SPAM BLOCKER */
span.blockspam {
  display: none;
}


/* BUSY SPINNER */
#spinner {
   display: none;
}


/* ZOOM ONTROL LEAFLET - ADJUST FOR IPHONE ADDRESS BAR SO YOU CAN SEE ZOOM BUTTON ON IHPONE */

.leaflet-bottom {
bottom: 0;
}

.leaflet-bottom .leaflet-control-zoom {
bottom:50%;
transform: translateY(-150%);
}



/* FIX WHICH STOPS WHITE LIENS APPEAR ON TILES AS A RESULT OF ADDING FAVIRON LOGO TO NAV BAR */ 
img.leaflet-tile, img.leaflet-marker-icon, img.leaflet-marker-shadow {
    /* work-around from here: https://github.com/Leaflet/Leaflet/issues/161 */
    outline: 1px solid transparent;
    /* work-around from here: https://bugs.chromium.org/p/chromium/issues/detail?id=600120 */
    mix-blend-mode: plus-lighter;
}


/* HORIZONTAL SEPARATOR ON POPOUT COLOUR CHART PAGE */

/* Solid border */
hr.solid {
  border-top: 3px solid #bbb;
}