#map {  
        position: relative;
            max-width: 1200px;
            margin: 20px auto;
            height:60vh;
            border-radius: 15px; 
            
           /* box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); */
        }
        .leaflet-popup-content-wrapper, .leaflet-popup-tip {
            border-radius: 50px; 
        }
        .leaflet-popup-content {
            padding: 1rem;
            font-size: 0.875rem; 
            color: #374151; 
            margin:0!important;
        }

        .leaflet-popup-content p {
            margin-top:10px!important;
            margin-bottom:10px!important;
        }

        .leaflet-popup-content strong {
            display: block;
            margin-bottom: 0.25rem;
            font-size: 1rem; 
            color: #1F2937; 
        }

        .leaflet-left .leaflet-control {
            margin-left:26px!important;
        }

        .leaflet-top .leaflet-control {
            margin-top: 26px!important;
        }

        .leaflet-container .leaflet-control-attribution {
            margin-right:27px!important;
        }


        /* Overlay */

        #marker-overlay {
position: absolute;
    top: 5%;
    right: 1%;
    width: 40%;
    max-width: 700px;
    height: 80%;
    background-color: white;
    box-shadow: -2px 0 5px rgba(0, 0, 0, 0.2);
    transform: translateX(110%);
    transition: transform 0.3s ease-in-out;
    z-index: 1001;
    padding: 20px;
    overflow-y: auto;
}

#marker-overlay.visible {
    transform: translateX(0); /* Slide it into view */
}

.overlay-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #ccc;
    padding-bottom: 10px;
    margin-bottom: 10px;
}

.overlay-header h3 {
    margin: 0;
    font-size: 1.25rem;
    color: #1F2937;
}

#close-overlay {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: #4a4a4a;
}

.overlay-content p {
    margin-top: 10px;
    margin-bottom: 10px;
    color: #374151;
}

.overlay-content strong {
    display: block;
    font-size: 1rem;
    margin-bottom: 0.25rem;
    color: #1F2937;
}

#map p {
    font-size:12px!important;
}

#map .type {
    color:rgb(22, 154, 22);
}
#map .title, #map .type {
    font-weight: bold;
}

#marker-overlay {
    cursor:default;
}

#marker-overlay p, #marker-overlay h3, #marker-overlay li, #marker-overlay strong {
    cursor: text;
}

.map h3 {
    text-transform: uppercase;
    font-weight: bold;
    text-align: center;
}


.map {
    margin: 60px auto;
}

.map .description {
    width:100%;
    margin:auto;
}

.map .colors {
   display:flex;
   gap:30px;

}

.map .colors .red, .map .colors .green {
    display: flex;
    gap:10px;
    align-items: center;
    margin-bottom: 0;
}
.map .colors .red::before {
    content:"";
    width:30px;
    height:30px;
    display: block;
    background-color: #cb2940;
    border-radius:50%;
    
}

.map .colors .green::before {
    content:"";
    width:30px;
    height:30px;
    display: block;
    background-color: #2cad28;
    border-radius:50%;
    
}