.project.range {
    display: flex;
    flex-direction: column;
    padding-block: 13px;
    padding-inline: 18px;
}

.project .range__label {
    display: flex;
    align-items: center;
    gap: 12px;
}

.project .range__label .icon-price {
    color: hsla(0, 0%, 62%, 1);
}

.project .range__label span {
    color: hsla(0, 0%, 62%, 1);
    font-weight: 600;
    font-family: var(--opensans);
}

/* input-range */
.project .range__input {
    width: 100%;
    padding: 0;
    -webkit-appearance: none;
    height: 3px;
    border: none;
    background: #9F9F9F;
}

/* ball */
.project .range__input::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 19px;
    width: 19px;
    background: var(--white);
    box-shadow: 1px 2px 7px rgba(0, 0, 0, 0.25);
    border-radius: 50%;
    cursor: grabbing;
}

/* progress */
.range__wrapper {
    position: relative;
}

.range__indicator .value {
    display: block;
    position: relative;
    height: 21px;
    margin-block: 4px;
    width: max-content;
    left: 50%;
    transform: translateX(-50%);
    color: var(--color-primary);
    font-weight: 600;
    font-size: var(--fs-14);

}

.range__progress {
    position: absolute;
    top: 14px;
    width: 0%;
    height: 3px;
    border-radius: 50px;
    background: var(--color-primary);
}

/*
only work for in firefox 😥
.project .range__input::-moz-range-progress{
    background: var(--color-primary);
} */

/* min and max */

.project .range__minAndMaxValue {
    display: flex;
    justify-content: space-between;
    padding-top: 8px;
}

.project .range__min-value,
.project .range__max-value {
    color: #9F9F9F;
    font-family: var(--opensans);
    font-weight: 600;
    font-size: var(--fs-14);
}

/* style range min and max */
.project .range__min-value.rangeActive,
.project .range__max-value.rangeActive {
    color: var(--color-primary);

}

/* hide indicator if the indicator is in min or max */
.project .range__indicator .value.hide {
    opacity: 0;
}

@media (min-width:768px) {
    .project.range {
        flex-direction: row;
        justify-content: space-between;
        gap: 16px;
    }

    .project.range .range__label {
        padding-top: 8px;
    }

    .project.range .range__container {
        width: 100%;
    }
}


/* range superficie */
.range-jqueryUI{
    padding-block-start: 32px;
}
.range-jqueryUI #slider-range {
    height: 3px !important;
    background: #9F9F9F !important;
    pointer-events: all;
}

.range-jqueryUI #slider-range .ui-slider-range {
    background: var(--color-primary);
    height: 3px !important;
}


.range-jqueryUI #slider-range .ui-slider-handle {
    top: -8px;
    border: 0;
    height: 19px;
    width: 19px;
    background: var(--white);
    box-shadow: 1px 2px 7px rgba(0, 0, 0, 0.25);
    border-radius: 50%;
    cursor: grabbing;
}

.range-jqueryUI #slider-range .ui-slider-handle.ui-state-active{
    border: none;
}

.range-jqueryUI .range__minAndMaxValue{
    display: flex;
    justify-content: space-between;
    padding-top:16px ;
}

.range-jqueryUI .range__minAndMaxValue .range__min-value,
.range-jqueryUI .range__minAndMaxValue .range__max-value{
    font-family: var(--opensans);
    font-size: var(--fs-14);
    font-weight: 600;
    color: var(--color-primary);
}

.range-jqueryUI .range__minAndMaxValue .label{
    color: hsla(0, 0%, 62%, 1);
    font-family: var(--opensans);
    font-size: var(--fs-14);
    font-weight: 400;
    margin: 0;
}