.slider_range {
    height: 3px;
    margin-top: 1rem;
    margin-bottom: 1rem;
    margin-inline: 9px;
}

.slider_range .noUi-connect {
    background: var(--primary-color);
}

.slider_range .noUi-handle {
    height: 16px;
    width: 16px;
    top: -6.5px;
    right: -5px;
    border-radius: 9px;
    border: none;
}

.slider_range .noUi-handle:after,
.slider_range .noUi-handle:before{
    display: none !important;
}

.noUi-target{
    background: #bb09003b;
    box-shadow: none;
    border: none;
}

.noUi-tooltip{
    background-color: var(--primary-color);
    box-shadow: #b8090070 0px 0px 14px;
    color: white;
    border: none;
    border-radius: 10px;
    padding-inline: 10px;
    z-index: 100000;
    font-size: .75rem;
    transition: opacity 200ms ease-in-out;
    opacity: 0;
}

.noUi-handle:hover .noUi-tooltip {
    opacity: 1;
}

.noUi-touch-area{
    background: var(--primary-color);
    border-radius: 50%;
    cursor: pointer;
    transition: box-shadow 200ms ease-in-out;
    position: relative;
}
.noUi-touch-area:hover{
    box-shadow: #b8090050 0px 0px 0px 5px;
}
.noUi-touch-area:active{
    box-shadow: #b8090050 0px 0px 0px 10px;
}

.noUi-touch-area::after{
    content: '';
    height: 11px;
    width: 11px;
    border-radius: 50%;
    background: #FFF;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

:root[data-bs-theme="dark"]{
    .noUi-handle{
        box-shadow: inset 0 0 1px #040404, inset 0 1px 7px #0d0e0f, 0 3px 6px -3px #0d0e0f;
    }
}