#map {
    position: fixed;
    right: 0;
    top: 8vh;
    width: 100vw;
    height: 83vh;
    transform: translateY(92vh);
    transition: transform 0.6s ease 0.3s; /* <--- Added delay here */
    transform-origin: bottom;
    z-index: 2;
}
nav.fade ~ content #map{
    top: 0;
    height: 100vh;
    transition: none;
}

@keyframes adjustMapHeight{
    from{height:100vh}
    to{height:83vh}
}
.main-content.mapShown #map{
    transform: translateY(0);
    background-color: #444444;
    border-left: #c0c0c0 solid 1px;
    /* animation: adjustMapHeight ease .3s forwards; */
    /* animation-delay: 1s; */

    & .leaflet-popup.light{
        opacity:.5;
    }

    /* Fadeout and fadein for marker icons */
    & .leaflet-marker-icon{

        &.saved{
            filter: hue-rotate(140deg);
        }

        &.fadeout {
            animation: fadeout ease .4s forwards;
        }

        &.fadein {
            opacity: 0;
            animation: fadein ease .5s forwards;
        }
    }
}

body.darkMode{
    & .main-content.mapShown #map{
        border-left: #222222 solid 1px;
    }
}

.custom-div-icon{
    z-index: 999!important;
    & div{
        background: linear-gradient(red, blue);
        box-shadow: var(--gray-dark-box-shadow);
        width: 38px;
        position: relative;
        height: 38px;
        clip-path: path("M20 0 C34 0 40 13 20 40 C0 13 6 0 20 0 Z");

        &:after {
            content: '';
            position: absolute;
            top: 10px;
            left: 15px;
            width: 9px;
            height: 9px;
            background: white;
            border-radius: 50%;
        }
    }

    &:before {
        content: '';
        position: absolute;
        top: 50%;
        left: -5%;
        width: 200%;
        height: 200%;
        z-index: 0;
        background: rgba(255, 133, 62, 0.3);
        border: rgba(62, 168, 255, 0.35) solid 1px;
        border-radius: 50%;
        pointer-events: none;
    }
}

.leaflet-pane.fadein{
    animation: fadein ease .4s forwards;
}
.leaflet-pane.fadeout{
    animation: fadeout ease .4s forwards;
}

@media only screen and (min-width: 763px) {
    

    .main-content.mapShown #map{
        transform: scaleX(1) translateX(0);
        height: 92vh;
        animation:none;
    }
}

@media only screen and (min-width: 1030px) {
    #map{
        width:min(52%, 850px);
        transform: scaleX(0) translateX(min(52%, 850px));
        transform-origin: right;
        height: 92vh;
    }
}