﻿#service-center-section-title {
    font-family: 'Archivo', sans-serif;
    font-size: 24px;
    font-weight: 900;
    line-height: 1.33;
    text-transform: uppercase;
    color: var(--dark-blue);
    margin: 1rem 0;
}

#map-state-container {
    position: relative;
}
#map-state-container .un-clickable {
    pointer-events: none;
}
#map-state-container .clickable {
    pointer-events: auto;
}

#map-state-overlay {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;

    display: grid;
    grid: auto-flow / 1fr minmax(auto, 1200px) 1fr;
}
#map-state-overlay .blur {
    backdrop-filter: blur(10px);
}
#map-state-overlay .frame {
    position: relative;
}

#map-state {
    min-height: 400px;
}

#map-state-location-list {
    box-sizing: border-box;
    position: absolute;
    top: .5rem; bottom: .5rem; left: .5rem;
    width: 405px;
    padding: 0 1rem;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(10px);
    display: grid;
    grid: calc(100% - 100px) auto / auto-flow;
    gap: 1rem;
}
#map-state-location-list .scroll {
    overflow: auto;
    max-height: 100%;
}
#map-state-location-list .near-me {
    display: flex;
    justify-content: center;
    align-items: center;
    border-top: 2px solid var(--gray);
}
#map-state-location-list .near-me button {
    font-size: 22px;
    font-weight: 600;
    color: var(--blue);
    text-decoration: underline;
}
#map-state-location-list h2 {
    color: var(--blue);
    margin: 1rem 0;
    font-size: 24px;
    font-weight: 900;
}
#map-state-location-list li {
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
    margin: 1rem 0;
}
#map-state-location-list ul {
    list-style: none;
    font-size: 26px;
    font-weight: 900;
    color: var(--dark-blue);
}
#map-state-location-list ul ul {
    font-size: 22px;
    font-weight: 600;
    color: var(--black);
    margin-left: 2rem;
}
    #map-state-location-list .states-city-location {
        cursor: pointer;
        background: none;
        font-size: inherit;
        font-weight: inherit;
        color: inherit;
    }

        #map-state-location-list .states-city-location.active {
            color: var(--orange);
        }



@media (max-width: 787px) {

    #map-state-location-list {
        width: calc(100% - 1rem);
        display: inline-table;
    }

    #service-center-section-title {
        line-height: 1.2;
    }
}