#map {
    width: 100%;
    height: 470px;
}

.ol-popup {
    background: white;
    padding: 6px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

#map .ol-control.layer-switcher {
    top: 0.5em !important;
    left: auto;
    right: 0.5em;
}

/* Map Overlap Styling */
#map .ol-control.layer-switcher {
    top: 3.5em !important;
    left: auto;
    right: 0.5em;
    transition: right 0.3s ease;
}

#map .ol-control.layer-switcher.sidebar-open {
    right: 330px;
}

/* Plume Button Styling */
.plume-control {
  top: 340px;
  left: 80px;
  position:absolute;
  z-index:5;
  border-style: solid; /* IMPORTANT */
}

.plume-btn {
  border: 2px solid #0439aa;
  background-color: #ffffff;
  border-style: solid; /* IMPORTANT */
  appearance: none;
}

.plume-btn:hover {background-color: #0439aa;
  color: white;
  box-shadow:0 8px 16px 0 rgba(0,0,0,0.6);
  border-style: solid; /* IMPORTANT */
}

/* Active (mouse down) */
.plume-btn:active {
  background: #e6e6e6;
  border-style: solid; /* IMPORTANT */
}

/* Focus (clicked / tabbed) */
.plume-btn:focus,
.plume-btn:focus-visible {
  outline: none;
  box-shadow: none;
  border-style: solid; /* IMPORTANT */
}

/* Home Button Styling */
.ol-home {
    top: 0.5em;
    left: auto;
    right: 0.5em;
    transition: right 0.3s ease;
}

.ol-home.sidebar-open {
    right: 330px;
}

.ol-control.ol-home button {
  background-color: #fff;
  border: none;
  color: #333;
  font-size: 1.4em;
  font-weight: 700;
  height: 38px;
  width: 38px;
  margin: 0;
  padding: 0;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  transition: background 0.2s ease;
}

.ol-control.ol-home button:hover,
.ol-control.ol-home button:focus {
    background-color: rgba(255,255,255,.6);
    color: #000;
}

/* Time Slider Styling */
#timeSlider {
  width: 100%;
  height: 10px;
  border-radius: 5px;  
  background: #d3d3d3;
  outline: none;
  opacity: 0.9;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

#timeSlider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 15px;
  height: 15px;
  border-radius: 50%; 
  background: #0404aa;
  cursor: pointer;
}

#timeSlider::-moz-range-thumb {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #0404aa;
  cursor: pointer;
}

/* Time Slider Labels */

.time-labels {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  margin-top: 4px;
}

.time-label {
  transform:rotate(45deg) translate(10px, 10px);
}



/* Leaflet pop-up Options */
.popupText {
    font-size: 12px;
    font-family: Arial;
    color: slategray;
}

/* The actual popup */
.infoPopup .popuptext {
    visibility: hidden;
    width: 400px;
    background-color: white;
    color: #1f1f1f;
    text-align: left;
    border-radius: 6px;
    border-style: solid;
    border-width: 2px;
    border-color: #1f1f1f;
    padding: 8px 8px;
    position: absolute;
    z-index: 10000;
    bottom: 20px; /* Intended for it to not cover the button */
    left: 50%;
    margin-left: -80px;
}
#infoPopupLow .popuptext {
  bottom: 0px; /* This is optimized for the top of the screen. Have several different styles for location on screen */
}
#infoPopupHigh .popuptext {
  bottom: -100px; /* This is optimized for the top of the screen. Have several different styles for location on screen */
}
#infoPopupMidHigh .popuptext {
  bottom: 200px; /* This is optimized for the top of the screen. Have several different styles for location on screen */
}
#infoPopupVeryHigh .popuptext {
  bottom: 300px; /* This is optimized for the top of the screen. Have several different styles for location on screen */
}

#infoPopupHighRight .popuptext {
  bottom: -100px; /* This is optimized for the top of the screen. Have several different styles for location on screen */
  left: -120px;
}
#infoPopupVeryHighRight .popuptext {
  bottom: -300px; /* This is optimized for the top of the screen. Have several different styles for location on screen */
  left: -120px;
}
#infoPopupRight .popuptext {
  left: -120px;
}
#infoPopupSlightRight .popuptext {
  left: 15%;
}
#infoPopupVeryVeryHighSlightRight .popuptext {
  bottom: -400px; /* This is optimized for the top of the screen. Have several different styles for location on screen */
  left: 15%;
}

/* Toggle this class - hide and show the popup */
.infoPopup .show {
  visibility: visible;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s;
}

.infoPopup .hide {
  visibility: hidden;
}

.closeBox{
    display: block;
    float: right;
    margin-top: -5px;
    margin-right: -5px;
}

.infoIcon{
    height: 15px;
    margin-bottom: -2px;
}

/*INfo Buffotn*/
.label-with-info {
    display: flex;
    align-items: center;   /* vertically align icon with text */
    gap: 6px;              /* space between label and icon */
}

/* Hover Tooltip */

.hover-tooltip {
  position: absolute;
  pointer-events: none;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  white-space: nowrap;
  z-index: 10; /* ensures it’s on top of the map */
  transform: translate(10px, -25px); /* small offset from cursor */
}