body {
    /*background-color: #509d2d;*/
    position: relative;
}

#price {
    height: 100%;
    width: 100%;
    padding-top: 100px;
}
hr {
    color: white;
}

.value-box {
    display: inline-block;
    padding: 5px 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #f9f9f9;
    margin-top: 10px;
    font-size: 16px;
}

/* Apply styles directly to the input element */
#salaryValue input {
    padding: 5px 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #f9f9f9;
    font-size: 16px;
    width: auto; /* Allow the input field to adjust its width based on content */
}

/* Styling the range slider */
input[type="range"] {
    /* Change the color of the slider track */
    --range-track-color: transparent;

    /* Change the color of the slider thumb */
    /*--range-thumb-color: #313131;*/
    --range-thumb-color: #509d2d;

    /* Remove default styles */
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 10px;
    background-color: var(--range-track-color);
    border-radius: 5px;
    outline: none;
    margin: 5px 0;
}

/* Styling the slider thumb */
input[type="range"]::-webkit-slider-thumb {
    /* Change the color of the slider thumb */
    background-color: var(--range-thumb-color);
    width: 20px;
    height: 20px;
    border-radius: 50%;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

/* Additional styling for Firefox */
input[type="range"]::-moz-range-thumb {
    /* Change the color of the slider thumb */
    background-color: var(--range-thumb-color);
    width: 20px;
    height: 20px;
    border-radius: 50%;
    cursor: pointer;
}