.maplibregl-ctrl-bottom-right {

    display: none !important;

}



.maplibregl-ctrl-top-right {

    top: 35% !important;

    right: 8px !important;

}



.maplibregl-ctrl {

    padding: 10px 5px;

    border-top-right-radius: 20px;

    border-top-left-radius: 20px;

    border-bottom-right-radius: 20px;

    border-bottom-left-radius: 20px;

}



.maplibregl-popup-tip {

    margin-top: 0px;

    border-top-color: rgb(34, 34, 34, 0.8) !important;

}



.maplibregl-popup-content {

    background: rgb(34, 34, 34, 0.8) !important;

    color: white !important;

    padding: 8px 10px !important;

    border-radius: 10px !important;

}



.maplibregl-popup-content>button {

    color: white !important;

    display: none !important;

}



.maplibregl-ctrl-compass {

    display: none !important;

}



#compass {

    position: absolute;

    left: 5px;

    bottom: 0px;

    z-index: 0;

    cursor: pointer;

}



#compass .circle {

    position: relative;

    width: 60px;

    height: 60px;

    background-image: url(../images/compass_circle.png);

    background-size: cover;

    display: inline-block;

}



#compass .needle {

    position: fixed;

    /* top: 50%;

      left: 50%;

      transform: translate(-50%, -50%) rotate(0deg); */

    height: 60px;

    background-size: cover;

}



.distance-container {

    position: absolute;

    z-index: 9999;

    background-color: rgba(0, 0, 0, 0.5);

    color: #fff;

    font-size: 12px;

    line-height: 10px;

    display: block;

    margin: 0;

    border-radius: 3px;

    bottom: 70px;

    right: 70px;

}



#shadow {

    position: absolute;

    top: 10px;

    display: none;

    width: 20%;

    height: 100px;

    left: 30%;

    color: #fff;

}



#shadow>div {

    width: 100%;

    text-align: center;

}



#shadow>input {

    width: 100%;

}



@media all and (max-width: 768px) {

    #compass .circle {

        width: 40px;

        height: 40px;

    }



    #compass .needle {

        height: 40px;

    }



    #shadow {

        position: absolute;

        /* Ensure positioning is set */

        bottom: 100px;

        width: 40%;

        left: 30%;

    }



    .distance-container {

        right: 65px;

    }

}



/* Style for the range input */

input[type="range"] {

    -webkit-appearance: none;

    -moz-appearance: none;

    appearance: none;

    width: 100%;

    height: 10px;

    background: #222;

    border-radius: 5px;

    outline: none;

    transition: background 0.5s ease;

}



/* Style for the thumb */

input[type="range"]::-webkit-slider-thumb {

    -webkit-appearance: none;

    appearance: none;

    width: 18px;

    height: 18px;

    background: #fff;

    border-radius: 50%;

    cursor: pointer;

}



input[type="range"]::-moz-range-thumb {

    width: 18px;

    height: 18px;

    background: #fff;

    border-radius: 50%;

    cursor: pointer;

}



.highlightbackground {

    animation: blink 1s infinite alternate;

}



@keyframes blink {

    0% {

        width: 30px;

        /* Set initial width */

        height: 30px;

        /* Set initial height */

    }



    50% {

        box-shadow: 0 0 30px 15px rgba(0, 0, 0, 0);

        /* Thicker shadow during 50% */

        width: 40px;

        /* Increase width */

        height: 40px;

        /* Increase height */

    }



    100% {

        width: 30px;

        /* Reset to initial width */

        height: 30px;

        /* Reset to initial height */

    }

}





/* ############# panpview controls ############# */

#controls {

    position: absolute;

    bottom: 0;

    z-index: 2;

    text-align: center;

    width: 100%;

    padding-bottom: 5px;

    pointer-events: none;

}



.ctrl {

    font-size: 20px;

    padding: 0px 5px;

    /* width: 40px; */

    text-align: center;

    /* background: rgba(200, 200, 200, 0.8); */

    background-color: rgb(34, 34, 34, 0.8);

    display: inline-block;

    cursor: pointer;

    pointer-events: auto;

    border-radius: 5px;

}



.ctrl img{

    width: 50px;

    margin-top: 5px;

}



/* .ctrl:hover {

    background-color: rgb(34, 34, 34, 0.5);

} */



.pnlm-zoom-controls{

      display: none !important;

}

/* .pnlm-controls-container {

    display: none !important;

} */



.pnlm-compass{

    left: 5px !important;

}