input[type=range]::-webkit-slider-thumb {
    pointer-events: all;
    width: 24px;
    height: 24px;
    -webkit-appearance: none;
}

@property --num {
    syntax: '<integer>';
    initial-value: 0;
    inherits: false;
}

.scroller__inner {
    padding-block: 1rem;
    display: flex;
    flex-wrap: wrap;
}

.scroller[data-animated="true"] {
    overflow: hidden;
    -webkit-mask: linear-gradient(
        90deg,
        transparent,
        white 20%,
        white 80%,
        transparent
    );
    mask: linear-gradient(90deg, transparent, white 20%, white 80%, transparent);
}

.scroller[data-animated="true"] .scroller__inner {
    width: max-content;
    flex-wrap: nowrap;
    animation: scroll var(--_animation-duration, 40s)
    var(--_animation-direction, forwards) linear infinite;
}

.scroller[data-direction="right"] {
    --_animation-direction: reverse;
}

.scroller[data-direction="left"] {
    --_animation-direction: forwards;
}

.scroller[data-speed="fast"] {
    --_animation-duration: 30s;
}

.scroller[data-speed="slow"] {
    --_animation-duration: 60s;
}

@keyframes scroll {
    to {
        transform: translate(calc(-50%));
    }
}

#map * {
    border: none !important;
}

.custom-scrollbar::-webkit-scrollbar {
    width: 6px;
}

.custom-scrollbar::-webkit-scrollbar-track {
    border-radius: 999px;
    background: #f1f1f1;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 999px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: #555;
}

.noUi-target {
    background: #d4d4d4 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.noUi-horizontal {
    height: 10px !important;
}

.noUi-base {
    touch-action: none;
    position: relative;
    width: 100%;
    height: 100%;
}

/* Style the thumb */
.noUi-handle {
    width: 20px !important;
    height: 20px !important;
    border-radius: 50% !important;
    background-color: black !important;
    border: none !important;
    box-shadow: none !important;
}

/* Hide the default lines inside the thumb */
.noUi-handle:before,
.noUi-handle:after {
    display: none !important;
}
.noUi-connect {
    background-image: linear-gradient(to right, #AC7E08, #EDC04E) !important;
}

.bg-blur {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(30px);

    background: rgba(225, 225, 225, 0);

    mask-image: linear-gradient(to left, rgb(0, 0, 0) 30%, rgba(0, 0, 0, 0.8) 50%, rgba(0, 0, 0, 0) 100%);

    -webkit-mask-image: linear-gradient(to left, rgb(0, 0, 0) 30%, rgba(0, 0, 0, 0.8) 50%, rgba(0, 0, 0, 0) 100%);
    inset: -1rem 0;
}