/* Custom styles for the slider */
#budgetSlider {
    width: 80%; /* Adjust the width of the slider */
    margin: 20px auto; /* Center the slider horizontally */
}

.slider-labels {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    font-weight: bold;
    color: #333; /* Change the color of the labels */
}

.ui-slider {
    position: relative;
    text-align: left;
    outline: none;
    border: none;
}

    .ui-slider .ui-slider-handle {
        position: absolute;
        width: 18px;
        height: 18px;
        border-radius: 50%;
        background-color: #007bff; /* Change the handle color */
        border: 2px solid #007bff; /* Change the handle border color */
        cursor: pointer;
    }

    .ui-slider .ui-slider-range {
        position: absolute;
        height: 100%;
        border-radius: 3px;
        background-color: #007bff; /* Change the range color */
    }

/* Title and labels styles */
.slider-title {
    text-align: center;
    font-weight: bold;
    margin-bottom: 10px;
}

.slider-labels {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #333;
    margin-bottom: 10px;
    font-weight: bold; /* Set labels to bold */
}

/* Adjustments for the slider and labels container */
#slider-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

    #slider-container > div {
        width: 80%;
    }

.labels-container {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 10px; /* Increase space between slider and labels */
}

.label-item {
    width: 25%;
    text-align: center;
}