:root {
    --midwest-color: #4a75b7;      /* Change this to manually adjust Midwest */
    --northeast-color: #baa252;    /* Change this to manually adjust Northeast */
    --south-color: #29373d;        /* Change this to manually adjust South */
    --west-color: #70482b;         /* Change this to manually adjust West */
}


.filters-container {
  margin-bottom: 1.4rem; /* change as needed for tab alignment */
}




#map {
    width: 100%;  /* Adjust this percentage as needed */
    height: 100%; /* Adjust this percentage as needed */
    border-radius: 8px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}


.info.legend {
    background: white;
    padding: 10px;
    border-radius: 5px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
    line-height: 1.5;
    font-size: 16px;
    font-family: 'Roboto Condensed', Arial, sans-serif;
    color: #00333a;
}
.info.legend h4 {
    margin: 0;
    padding: 0;
    font-weight: bold;
    color: #00333a;
    text-wrap: wrap;
}
.info.legend i {
    width: 18px;
    height: 18px;
    float: left;
    margin-right: 8px;
    opacity: 0.9;
}


/* Custom styles for the Leaflet popups */
.leaflet-popup-content {
    font-family: 'Roboto Condensed', sans-serif !important; /* Ensure the font is applied */
    color: #00333a !important; /* Default text color */
    font-size: 14.5px !important; /* Default font size */
}

.leaflet-popup-content a {
    color: #2d5ef9 !important; /* Link color */
    text-decoration: none; /* Underline links */
}

.leaflet-popup-content a:hover {
    color: #2d5ef96d !important; /* Hover color for the link */
}

/* Optional: Style the popup title (if using <b> for bold text) */
.leaflet-popup-content b {
    font-weight: 600; /* Make bold text bold */
}
