/* General styling for the range input */
input[type="range"] {
    -webkit-appearance: none; /* Remove default styling */
    width: 100%;
    height: 6px;
    background: #ddd;
    border-radius: 5px;
    outline: none;
}

    /* WebKit browsers */
    input[type="range"]::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 20px;
        height: 20px;
        border-radius: 50%; /* Makes it circular */
        background-color: #fcbe00;
        cursor: pointer;
        border: 2px solid #ddd;
    }

    /* For Firefox */
    input[type="range"]::-moz-range-thumb {
        width: 20px;
        height: 20px;
        border-radius: 50%; /* Makes it circular */
        background-color: #fcbe00;
        cursor: pointer;
        border: 2px solid #ddd;
    }

    /* Optional: Focus styling for accessibility */
    input[type="range"]:focus::-webkit-slider-thumb {
        box-shadow: 0 0 5px #fcbe00;
    }

    input[type="range"]:focus::-moz-range-thumb {
        box-shadow: 0 0 5px #fcbe00;
    }