:root {
    --car-price-block-padding: 0 8%;
    --car-price-block-color: #A6A6A6;
    --car-price-block-color-hover: #FFFFFF;
    --car-price-block-border-radius: 8px;
    --car-price-block-gap: 5px;
    --car-price-block-title-font-size: 44px;
    --car-price-block-subtitle-font-size: 32px;
    --car-price-block-comment-font-size: 28px;
    --car-price-block-title-font-weight: 300;
    --car-price-block-bold-title-font-weight: 400;
    --car-price-block-subtitle-font-weight: 200;
    --car-price-block-range-input-height: 40px;
    --car-price-block-range-input-track-height: 20px;
    --car-price-block-range-input-transition: transform .5s;
    --car-price-block-range-input-slider-height: 30px;
    --car-price-block-range-input-slider-width: 15px;
}

.car_price_block {
    padding: var(--car-price-block-padding);
    justify-content: start;
    flex-direction: column;
    align-items: center;
    display: flex;
    width: 100%;
}

.car_price_block > .car_price_title_block {
    gap: var(--car-price-block-gap);
    justify-content: space-between;
    flex-direction: row;
    align-items: center;
    display: flex;
    width: 100%;
}

.car_price_block > .car_price_title_block > span {
    font-weight: var(--car-price-block-title-font-weight);
    font-size: var(--car-price-block-title-font-size);
    margin-bottom: var(--car-price-block-gap);
    color: var(--car-price-block-color);
    text-align: start;
}

.car_price_block > .car_price_title_block > .car_price_deposit_price_block {
    gap: var(--car-price-block-gap);
    justify-content: end;
    flex-direction: row;
    align-items: center;
    display: flex;
}

.car_price_block > .car_price_title_block > .car_price_deposit_price_block > .car_price_deposit_price_label {
    font-weight: var(--car-price-block-subtitle-font-weight);
    font-size: var(--car-price-block-subtitle-font-size);
    color: var(--car-price-block-color);
}

.car_price_block > .car_price_title_block > .car_price_deposit_price_block > .car_price_deposit_price_value_label {
    font-weight: var(--car-price-block-bold-title-font-weight);
    font-size: var(--car-price-block-title-font-size);
    color: var(--car-price-block-color-hover);
}

.car_price_block > .car_price_title_days_block {
    height: var(--car-price-block-range-input-height);
    margin-bottom: var(--car-price-block-gap);
    justify-content: space-between;
    flex-direction: row;
    align-items: center;
    position: relative;
    display: flex;
    width: 100%;
}

.car_price_block > .car_price_title_days_block > span {
    font-weight: var(--car-price-block-title-font-weight);
    font-size: var(--car-price-block-subtitle-font-size);
    color: var(--car-price-block-color-hover);
    position: absolute;
    top: 0;
}

.car_price_range_label {
    width: 100%;
}

.car_price_range_label > input {
    margin: 0 auto calc(2 * var(--car-price-block-gap));
    -webkit-appearance: none;
    box-sizing: border-box;
    background: inherit;
    appearance: none;
    width: 100%;
}

.car_price_range_label > input::-webkit-slider-runnable-track {
    height: var(--car-price-block-range-input-track-height);
    border-radius: var(--car-price-block-border-radius);
    background: var(--car-price-block-color);
    width: 100%;
}

.car_price_range_label > input::-webkit-slider-thumb {
    transition: var(--car-price-block-range-input-transition);
    height: var(--car-price-block-range-input-slider-height);
    width: var(--car-price-block-range-input-slider-width);
    border-radius: var(--car-price-block-border-radius);
    background: var(--car-price-block-color-hover);
    -webkit-appearance: none;
    appearance: none;
    margin-top: -5px;
    cursor: pointer;
}

.car_price_block > .car_price_min_max_block {
    margin-bottom: var(--car-price-block-gap);
    gap: var(--car-price-block-gap);
    justify-content: space-between;
    flex-direction: row;
    align-items: center;
    display: flex;
    width: 100%;
}

.car_price_block > .car_price_min_max_block > span {
    font-weight: var(--car-price-block-title-font-weight);
    font-size: var(--car-price-block-comment-font-size);
    color: var(--car-price-block-color);
}

.car_price_block > .car_price_total_block {
    gap: var(--car-price-block-gap);
    justify-content: center;
    flex-direction: row;
    align-items: center;
    display: flex;
}

.car_price_block > .car_price_total_block > span {
    font-weight: var(--car-price-block-subtitle-font-weight);
    font-size: var(--car-price-block-title-font-size);
    color: var(--car-price-block-color);
}

.car_price_block > .car_price_total_block > span.total_price {
    font-weight: var(--car-price-block-bold-title-font-weight);
    font-size: var(--car-price-block-title-font-size);
    color: var(--car-price-block-color-hover);
}

@media only screen and (max-width: 1240px) {
    :root {
        --car-price-block-padding: 0 3%;
    }
}

@media only screen and (max-width: 560px) {
    :root {
        --car-price-block-title-font-size: 36px;
        --car-price-block-subtitle-font-size: 32px;
        --car-price-block-comment-font-size: 26px;
    }
}

@media only screen and (max-width: 400px) {
    :root {
        --car-price-block-title-font-size: 32px;
        --car-price-block-subtitle-font-size: 28px;
        --car-price-block-comment-font-size: 24px;
    }
}