#map-container {
    position: relative;
    width: 60vh;
    height: 60vh;
    /* Adjust height as needed */
    /* margin-top: 20px; */
    /* max-width: 1024px; */
    margin: auto 0;
    display: flex;
    flex-direction: column;

    #map {
        position: absolute;
        /* top: 0;
        left: 0; */
        width: 100%;
        /* height: calc(100% - 50px); */
        height: 100%;
        aspect-ratio: auto;
        display: block;
        border-radius: 8px;
        z-index: 2;
    }

    #map-pins-saved-list {
        position: relative;
        top: 60.2vh;
        user-select: none;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        z-index: 5;

        p {
            float: left;
            padding-left: 5px;
            padding-right: 5px;
            margin: calc(.375rem - 2px);
            color: whitesmoke;
            cursor: pointer;
            border: 1px solid #bdc6d0;
            border-radius: .2rem;
            background-color: gray;

            span {
                float: right;
                /* padding-right: 3px; */
                padding-left: 3px;
                /* margin-right: 1px; */
                margin-left: 3px;
                font-weight: 700;
                color: #bdc6d0;
            }

            span:hover {
                color: white;
            }
        }
    }

    #map-pins,
    #map-pins-saved {
        width: 100%;
        height: 100%;
        position: absolute;

        .pin-pointer {
            cursor: pointer;
        }

        .lunch-box {
            /* border: 1px solid red; */
            z-index: 100;
            position: absolute;
            text-align: center;
            text-indent: 0;
            z-index: 2;
        }

        .lunch-box-I {
            height: 6.5%;
            width: 14.5%;
        }

        .lunch-box-G {
            height: 6.6%;
            width: 13.6%;
        }

        .lunch-box-G-AntiRotate {
            transform: rotate(225deg) !important;
        }


        .lunch-box-G-text {
            margin: -12px 0 0 -10px;
        }

        .lunch-box-B {
            height: 6.3%;
            width: 14.8%;
        }

        .lunch-box-B-AntiRotate {
            transform: rotate(135deg) !important;
        }


        .lunch-box-B-text {
            margin: 5px 0 0 2px;
        }

        .lunch-box-L {
            height: 6.6%;
            width: 13.6%;
        }

        .lunch-box-L-AntiRotate {
            transform: rotate(45deg) !important;
        }


        .lunch-box-L-text {
            margin: -15px 0 0 15px;
        }

        .I1 {
            top: 68.2%;
            left: 52.8%;
        }

        .I2 {
            top: 76.1%;
            left: 52.8%;
        }

        .I3 {
            top: 84.1%;
            left: 52.8%;
        }

        .I4 {
            top: 68.2%;
            left: 32.2%;
        }

        .I5 {
            top: 76.1%;
            left: 32.2%;
        }

        .I6 {
            top: 84.1%;
            left: 32.2%;
        }

        .G1 {
            top: 53.1%;
            left: 32.2%;
            transform-origin: top left;
            transform: rotate(90deg);
        }

        .G2 {
            top: 53.1%;
            left: 24.2%;
            transform-origin: top left;
            transform: rotate(90deg);
        }

        .G3 {
            top: 53.1%;
            left: 16.1%;
            transform-origin: top left;
            transform: rotate(90deg);
        }

        .G4 {
            top: 33.6%;
            left: 32.2%;
            transform-origin: top left;
            transform: rotate(90deg);
        }

        .G5 {
            top: 33.6%;
            left: 24.2%;
            transform-origin: top left;
            transform: rotate(90deg);
        }

        .G6 {
            top: 33.6%;
            left: 16.1%;
            transform-origin: top left;
            transform: rotate(90deg);
        }


        .B1 {
            top: 32.2%;
            left: 47.0%;
            transform-origin: top left;
            transform: rotate(180deg);
        }

        .B2 {
            top: 24.1%;
            left: 47.0%;
            transform-origin: top left;
            transform: rotate(180deg);
        }

        .B3 {
            top: 16.3%;
            left: 47.0%;
            transform-origin: top left;
            transform: rotate(180deg);
        }

        .B4 {
            top: 32.2%;
            left: 67.8%;
            transform-origin: top left;
            transform: rotate(180deg);
        }

        .B5 {
            top: 24.1%;
            left: 67.8%;
            transform-origin: top left;
            transform: rotate(180deg);
        }

        .B6 {
            top: 16.3%;
            left: 67.8%;
            transform-origin: top left;
            transform: rotate(180deg);
        }


        .L1 {
            top: 47.3%;
            left: 67.9%;
            transform-origin: top left;
            transform: rotate(270deg);
        }

        .L2 {
            top: 47.3%;
            left: 75.9%;
            transform-origin: top left;
            transform: rotate(270deg);
        }

        .L3 {
            top: 47.3%;
            left: 83.9%;
            transform-origin: top left;
            transform: rotate(270deg);
        }

        .L4 {
            top: 66.9%;
            left: 67.9%;
            transform-origin: top left;
            transform: rotate(270deg);
        }

        .L5 {
            top: 66.9%;
            left: 75.9%;
            transform-origin: top left;
            transform: rotate(270deg);
        }

        .L6 {
            top: 66.9%;
            left: 83.9%;
            transform-origin: top left;
            transform: rotate(270deg);
        }

    }

    .map-marker {
        width: 20px;
        height: 20px;
        background-color: #ff0000;
        /* Red color */
        border: 2px solid #ffffff;
        /* White border */
        border-radius: 50%;
        /* Circle shape */
        position: relative;
        transform: translate(-50%, -50%);
    }

    .text {
        position: absolute;
        font-size: 15px;
        font-family: Arial, sans-serif;
        text-align: left;
        border-radius: 6px;
        white-space: nowrap;
        background: rgba(97, 96, 96, 0.8);
        color: white;
        display: inline-block;
        border: 1px solid gray;
        /* red border */
        text-indent: 0;
        margin: -26px 0 0 0px;
        z-index: 50;

        transform-origin: top left;
        transform: rotate(-45deg);
        animation-name: bounce;
        animation-fill-mode: both;
        animation-duration: 1s;
    }
}

/* Player heads */
.player_head {
    position: absolute;
    width: 16px;
    height: 16px;
    z-index: 3;
    transition: all 0.5s;
    transform: translate(-50%, -50%);

    img {
        /* height: 100% !important; */
        border-radius: 2px !important;
    }
}

/* Map Markers*/

.pin {
    width: 15px;
    height: 15px;
    border-radius: 50% 50% 50% 0;
    background: #89849b;
    position: absolute;
    transform: rotate(-45deg);
    /* left: 50%;
    top: 50%; */
    margin: -19px 0 0 -7px;
    -webkit-animation-name: bounce;
    -moz-animation-name: bounce;
    -o-animation-name: bounce;
    -ms-animation-name: bounce;
    animation-name: bounce;
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    -o-animation-fill-mode: both;
    -ms-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-duration: 1s;
    -moz-animation-duration: 1s;
    -o-animation-duration: 1s;
    -ms-animation-duration: 1s;
    animation-duration: 1s;
    color: white;
    z-index: 10;
}

.pin-saved {
    background: goldenrod !important;
}

.pulse-saved:after {
    -webkit-box-shadow: 0 0 1px 2px gold !important;
    box-shadow: 0 0 1px 2px gold !important;
}

.pin:after {
    content: '';
    width: 7px;
    height: 7px;
    margin: 4px 0px 0px -4px;
    background: #2f2f2f;
    position: absolute;
    border-radius: 50%;
}

.pulse {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 50%;
    height: 14px;
    width: 14px;
    position: absolute;
    /* left: 50%;
    top: 50%; */
    margin: -8px 0px 0px -6px;
    transform: rotateX(55deg);
    z-index: 5;
}



.pulse:after {
    content: "";
    border-radius: 50%;
    height: 40px;
    width: 40px;
    position: absolute;
    margin: -15px 0px 0 -21px;
    animation: pulsate 1s ease-out;
    animation-iteration-count: infinite;
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    -webkit-box-shadow: 0 0 1px 2px #89849b;
    box-shadow: 0 0 1px 2px #89849b;
    -webkit-animation-delay: 1.1s;
    -moz-animation-delay: 1.1s;
    -o-animation-delay: 1.1s;
    -ms-animation-delay: 1.1s;
    animation-delay: 1.1s;
}

@keyframes pulsate {
    0% {
        transform: scale(0.1, 0.1);
        opacity: 0;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        filter: alpha(opacity=0);
    }

    50% {
        opacity: 1;
        -ms-filter: none;
        filter: none;
    }

    100% {
        transform: scale(1.2, 1.2);
        opacity: 0;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        filter: alpha(opacity=0);
    }
}

@keyframes bounce {
    0% {
        opacity: 0;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        filter: alpha(opacity=0);
        transform: translateY(-2000px) rotate(-45deg);
    }

    60% {
        opacity: 1;
        -ms-filter: none;
        filter: none;
        transform: translateY(30px) rotate(-45deg);
    }

    80% {
        transform: translateY(-10px) rotate(-45deg);
    }

    100% {
        transform: translateY(0) rotate(-45deg);
    }
}