/* Slider Handle */
.custom-slider .rc-slider-handle,
.custom-slider-vertical .rc-slider-handle {
    width: var(--handle-width, 1.2%); /* Default to ~1.2% for 1 substance in 83 */
    height: 20px;

    margin-top: -6px; /* Centers the handle vertically for horizontal slider */
    background-color: #555;
    border: none;
    border-radius: 50%; /* Make the handle circular */
    cursor: pointer;
    transition: width 0.3s, height 0.3s;
    transform: translateX(-50%); /* Center the handle horizontally for horizontal slider */
    box-shadow: none; /* Remove any box shadow */
}

/* Adjust handle dimensions for vertical slider */
.custom-slider-vertical .rc-slider-handle {
    width: 20px; /* Fixed width for vertical handles */
    transform: translateY(-50%); /* Center the handle vertically */
    margin-left: -6px; /* Centers the handle horizontally for vertical slider */
}

/* Adjust left handle width dynamically for horizontal slider */
.custom-slider .rc-slider-handle:first-child {
    width: calc(var(--handle-width, 1.2%) * (var(--right-handle-pos, 1) - var(--left-handle-pos, 0))); /* Adjust width based on slider handle positions */
}

/* Adjust height for vertical slider's first handle */
.custom-slider-vertical .rc-slider-handle:first-child {
    height: calc(var(--handle-width, 1.2%) * (var(--right-handle-pos, 1) - var(--left-handle-pos, 0))); /* Adjust height based on slider handle positions */
}

/* Slider Handle Hover and Active States */
.custom-slider .rc-slider-handle:hover,
.custom-slider-vertical .rc-slider-handle:hover {
    background-color: #777; /* Slightly lighter on hover */
}

.custom-slider .rc-slider-handle:active,
.custom-slider-vertical .rc-slider-handle:active {
    background-color: #999; /* Even lighter when active */
}

/* Slider Track */
.custom-slider .rc-slider-track,
.custom-slider-vertical .rc-slider-track {
    background-color: #555; /* Change track color to dark grey */
    height: 10px;
    margin-top: -3px;
}

/* Ensure vertical slider track adapts to vertical orientation */
.custom-slider-vertical .rc-slider-track {
    width: 10px;
    margin-left: -3px;
}

/* Prevent text selection on handles */
.rc-slider-handle {
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */
    -user-select: none;
}






/* --------------

*/


/* Slider Rail */
.custom-slider-single-handle .rc-slider-rail {
    height: 8px;
    background-color: #ddd;
    border-radius: 4px;
}

/* Slider Track - Remove the dark trail by making it transparent */
.custom-slider-single-handle .rc-slider-track {
    height: 8px;
    background-color: transparent; /* Makes the track transparent */
    border-radius: 4px;
}

/* Slider Handle */
.custom-slider-single-handle .rc-slider-handle {
    width: var(--handle-width, 25%); /* Default to 25% */
    height: 20px;
    margin-top: -6px; /* Centers the handle vertically */
    background-color: #555;
    border: none;
    border-radius: 0; /* Make the handle rectangular */
    cursor: pointer;
    transition: width 0.3s;
    transform: translateX(-100%); /* Align left edge */
    box-shadow: none; /* Remove any box shadow */
}

/* Slider Handle Hover and Active States (Optional) */
.custom-slider-single-handle .rc-slider-handle:hover {
    background-color: #777; /* Slightly lighter on hover */
}

.custom-slider-single-handle .rc-slider-handle:active {
    background-color: #999; /* Even lighter when active */
}

/* Tooltip customization (optional) */
.rc-slider-tooltip {
    /* display: none; Hide tooltip for a cleaner scrollbar look */
opacity: 0.6;
}



/* Remove Marks (Optional) */
.custom-slider-single-handle .rc-slider-mark {
    display: none; /* Hides the marks if any */
}