/* General slider styling */
.noUi-target {
    background: #f8f9fa; /* Light gray background for the track */
    border: 1px solid #ced4da; /* Subtle border for the track */
    border-radius: 10px; /* Rounded corners */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Slight shadow for depth */
    height: 12px; /* Track height */
    position: relative;
}

/* Connect (active range) styling */
.noUi-connect {
    background: #343a40; /* Dark gray/black gradient for the active range */
    border-radius: 10px; /* Match the track's rounded corners */
}

/* Handle styling */
.noUi-handle {
    background: #fff; /* White handle */
    border: 2px solid #343a40; /* Dark border to match the active range */
    border-radius: 50%; /* Circular handles */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Subtle shadow */
    cursor: grab; /* Grab cursor */
    height: 20px;
    width: 20px;
    margin-top: -5px; /* Align handle with the track */
}

    /* Handle on hover */
    .noUi-handle:hover {
        background: #343a40; /* Change handle to dark gray on hover */
        border-color: #212529; /* Darker border on hover */
    }

    /* Handle on active (dragging) */
    .noUi-handle:active {
        cursor: grabbing; /* Change cursor when dragging */
        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3); /* Add more shadow when active */
    }

/* Tooltip styling */
.noUi-tooltip {
    background: #343a40; /* Dark background for tooltip */
    border-radius: 4px;
    color: #fff; /* White text */
    font-size: 12px;
    padding: 5px 8px;
    position: absolute;
    text-align: center;
    top: -35px; /* Position above the handle */
    white-space: nowrap;
}

    /* Tooltip arrow */
    .noUi-tooltip::after {
        content: '';
        position: absolute;
        bottom: -6px;
        left: 50%;
        transform: translateX(-50%);
        border-width: 6px;
        border-style: solid;
        border-color: #343a40 transparent transparent transparent;
    }

/* Disabled slider styling */
.noUi-disabled {
    background: #e9ecef; /* Light gray background for disabled slider */
    cursor: not-allowed; /* Not-allowed cursor */
}