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

#map-logo {
  position: absolute;
  bottom: 10px;   /* distance from bottom */
  left: 85%;     /* distance from left */
  width: 120px;    /* adjust as needed */
  height: auto;
  z-index: 1000;  /* make sure it stays above the map */
  opacity: 0.9;   /* optional slight transparency */
  pointer-events: none; /* optional, prevents logo from blocking map clicks */
}

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

.ol-zoom {
    /* Override default top/left positioning */
    top: auto !important;
    left: auto !important;
    
    /* Set your desired new position (e.g., bottom right) */
    bottom: 80%; /* Adjust as needed */
    right: 0.9%; /* Adjust as needed */
}


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

/* 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;
}

.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;
}

/* Data Filter Select Styling */
#banner {
  position: absolute;
  top: 45%;
  left: 1.5%;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 8px;
  padding: 10px 10px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  font-family: sans-serif;
  font-size:8px;
  z-index: 2000;
}

/* Toggle style */
.toggle-container {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 10px 0;
}

.toggle-container input[type="checkbox"] {
  display: none;
}

.toggle-switch {
  position: relative;
  width: 36px;
  height: 18px;
  border-radius: 36px;
  background: linear-gradient(to bottom, #b3b3b3, #e6e6e6);
  cursor: pointer;
  transition: all 0.3s ease;
}

.toggle-switch::after {
  content: '';
  position: absolute;
  top: 1px;
  left: 1px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: #fff;
  transition: all 0.3s ease;
}

.toggle-container input:checked + .toggle-switch {
  background: linear-gradient(to bottom, #4cd964, #5de24e);
}

.toggle-container input:checked + .toggle-switch::after {
  transform: translateX(18px);
}


.toggle-container input:checked + label {
  background: linear-gradient(to bottom, #4cd964, #5de24e);
}

.toggle-container input:checked + label::after {
  transform: translateX(25px);
}

.toggle-text {
  cursor: pointer;
  user-select: none;
  font-size: 8px;
}


.banner-toggle {
  font-size: 8px;
  font-weight: bold;
  color: #666;
  line-height: 1;
}

.scenario-banner-content {
  padding: 0 10px 10px 10px;
  max-height: 450px;
  overflow-y: auto;
  transition: max-height 0.3s ease-out;
}

.health-banner-content {
  padding: 0 10px 10px 10px;
  max-height: 450px;
  overflow-y: auto;
  transition: max-height 0.3s ease-out;
}

.race-banner-content {
  padding: 0 10px 10px 10px;
  max-height: 450px;
  overflow-y: auto;
  transition: max-height 0.3s ease-out;
}

.numeric-banner-content {
  padding: 0 10px 10px 10px;
  max-height: 450px;
  overflow-y: auto;
  transition: max-height 0.3s ease-out;
}

/* Filter Group Styling */
.filter-group {
  display: flex;
  flex-direction: column;
  margin-bottom: 8px;
  font-size:8px;
}

.filter-group label {
  font-weight: 600;
  margin-bottom: 4px;
}

.filter-group select {
  padding: 4px;
}

.select-option {
  padding: 4px; 
  font-size: 8px;
}

/* Spinner Styling */
.spinner {
  width: 40px;
  height: 40px;
  border: 4px solid rgba(0,0,0,0.2);
  border-top-color: #000;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

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

/* Legend Styling */
.legend-divider {
    position:relative;
    border: none;
    border-top: 2px solid black;
    margin: 4px 0 0 0;
}

.legend-item {
    display: flex;
    align-items: center;
    margin-bottom: 2px;
    margin-top: 2px;    
}

/* Leaflet pop-up Options */
.popupText {
    font-size: 8px;
    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: 1;
    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: 12px;
    margin-bottom: 0px;
}