/* #region Custom Range Input */

div.custom-range-input {
    position: relative;
    height: 8px;
    background-color: var(--primary-100);

    border-radius: 4px;
}

div.custom-range-input span.ui-slider-handle {
    opacity: 0;
    outline: none;
}

div:has(> div.custom-range-input) div.thumb > div {
    /* Element Style */
    width: 16px;
    height: 16px;
    background-color: white;
    top: -4px;

    /* Border style */
    border-radius: 50%;
    border: 4px solid var(--primary-600);

    /* Makes sure the track is always behind the thumb */
    position: absolute;
    z-index: 1;
}

div:has(> div.custom-range-input) div.thumb,
div:has(> div.custom-range-input) div.track,
div:has(> div.custom-range-input) div.dots {
    pointer-events: none;

    /* Track trail height */
    height: 8px;

    /* Positions track trail */
    position: absolute;
    top: -1px;

    /* Track trail style */
    border-radius: 4px;
}

div:has(> div.custom-range-input) div.track {
    background-color: var(--primary-600);
}

div:has(> div.custom-range-input) div.dots > div {
    position: absolute;
    height: 8px;
    width: 8px;
    background-color: white;

    border-radius: 4px;
    border: 1px solid var(--primary-600);
}

div.legend-slider span {
    font-size: 16px;
    line-height: 120%;
    cursor: pointer;
    user-select: none;
}

div.legend-slider span.slider-selected {
    font-weight: bolder;
}

.ui-widget-content {
    border: none !important;
    border-radius: 50px !important;
    background: none !important;
}

/* #endregion Custom Range Input */