/* Track */
.noUi-target {
    height: 12px;
    background: var(--input-field); /* unfilled */
    border-color: var(--input-field);
    border: 0;
    border-radius: 9999px; /* pill */
    box-shadow: none;
    overflow: visible; /* lets the fill inherit rounded ends */
}

/* Filled (left) */
.noUi-connects {
    border-radius: 6px;
}

.noUi-connect {
    background: var(--primary-color);
    border-radius: 6px;
}

/* Handle */
.noUi-horizontal .noUi-handle {
    width: 22px;
    height: 22px;
    border: 0;
    border-radius: 50%;
    background: #d8d8d8;
    box-shadow: none;
    top: 50% !important;
    margin-top: 0 !important;
    transform: translateY(-25%);
    right: -11px;
}

/* remove default handle bars */
.noUi-handle:before,
.noUi-handle:after {
    display: none;
}

/* States (optional) */
.noUi-handle:focus {
    outline: none;
}

.noUi-state-drag .noUi-handle {
    filter: brightness(0.96);
}

.noUi-disabled,
.noUi-target[disabled] {
    opacity: 0.6;
}