.slider {
    width: 100% !important;
    height: 5px !important;
    opacity: 1 !important;
    appearance: none !important; /*remove the default styling applied by the browser*/
    border-radius: 5px !important;
    margin: 0px !important;
    background: linear-gradient(to right, #0a58ca var(--progress), #F3F7F9 var(--progress));
}

    .slider:hover {
        opacity: 1 !important;
    }

.slider-marker-labels {
    display: flex;
    align-items: center;
    flex-direction: column;
    line-height: 12px;
    position: absolute;
    /*top: 5px;*/
    transform: translateX(-50%);
}

    .slider-marker-labels > .key {
        color: #0a58ca !important;
        font-size: 0.7em;
        font-weight: 700 !important;
    }

    .slider-marker-labels > .value {
        color: #198754 !important;
        font-size: 0.7em;
        font-weight: 700 !important;
    }

/* Customizing the thumb in Chrome/Safari/Edge */
.slider::-webkit-slider-thumb {
    background-color: #0a58ca !important; /* Change color */
    border-radius: 50% !important; /* Make it circular */
    border: 1 solid white !important;
    width: 20px !important; /* Adjust size */
    height: 20px !important;
    cursor: pointer !important; /* Change cursor on hover */
}

/* Customizing the thumb in Firefox */
.slider::-moz-range-thumb {
    background-color: #0a58ca !important;
    border-radius: 50% !important;
    border: 1 solid white !important;
    width: 20px !important;
    height: 20px !important;
    cursor: pointer !important;
    border: none !important; /* Remove default border */
}