.map-container {
    height: 21em;
    width: 50vw;
}

.map-container {
    margin-top: 1em;
}
#map, .map-body {
    width: 100%;
    height: 100%;
}
#map {
    height: calc(100% + 1.5em);
}
    .Full-View {
        position: fixed !important;
        top: 5%;
        left: 5%;
        width: 90vw;
        height: 90vh;
        z-index: 999;
        border: 2px solid #444;
        box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
        background: #fff;
    }
.map-body {
    position: relative;
    overflow: hidden;
    border-radius: 1em;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
}

.custom-buttons, #toggleViewBtn {
    position: absolute;
    bottom: 1em;
    right: 2em;
    z-index: 700;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#toggleViewBtn {
    height:fit-content;
    padding: 0 .8em;
    border-radius:.5em;
    right: unset;
    top: .5em;
    left: 43%;
    background:#fff;
}

.map-btn {
    background-color: #ffffffdd;
    border: none;
    padding: .25em .5em;
    border-radius: .5em;
    font-size: .9em;
    color: #333;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    transition: 0.2s;
}

    .map-btn:hover {
        background-color: #e2eaff;
        color: #1a237e;
    }

.leaflet-control-layers {
    text-align: right;
    font-size: 13px;
}