/* Styling for thicker sliders */
.rc-slider-track {
    height: 10px !important;
    background-color: #2185d0 !important;
}

.rc-slider-rail {
    height: 10px !important;
    background-color: #e0e1e2 !important;
    border-radius: 6px !important;
}

.rc-slider-handle {
    border: solid 2px #2185d0 !important;
    background-color: #fff !important;
    width: 24px !important;
    height: 24px !important;
    margin-top: -6px !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2) !important;
}

/* Maintain styling on hover */
.rc-slider-track:hover,
.rc-slider:hover .rc-slider-track {
    background-color: #2185d0 !important;
}

.rc-slider-handle:hover,
.rc-slider-handle:active,
.rc-slider-handle:focus {
    border-color: #1678c2 !important;
    box-shadow: 0 0 0 5px rgba(33, 133, 208, 0.2) !important;
    background-color: white !important;
}

/* Style for the marks (numbers) on the slider */
.rc-slider-mark-text {
    font-size: 18px; /* Adjust size as needed */
    font-weight: 500; /* Adjust weight as needed */
    color: #333; /* Change color as needed */
}

/* Style for the marks when they are active */
.rc-slider-mark-text-active {
    color: #2185d0; /* Change to match your theme's primary color */
}