:root {
    --color-black: #262a2c;
    --color-grey: #565656;
    --color-yellow: #fc0;
    --color-yellow-dark: #ebb50d;
}

#productLeasing {
    display: none;
}



#productLeasing label {
    font-weight: normal;
    text-transform: none;
}


#leasingPrograms {
    display: flex;
    justify-content: space-between;
    margin-bottom: 30px;
}

#leasingPrograms .leasing-program {
    width: 32%;
    padding: 15px;
    box-shadow: 2px 2px 20px rgb(0 0 0 / 10%);
}

.leasing-program__checkbox {
    height: 60px;
    overflow: hidden;
    position: relative;
    display: flex;
    justify-content: space-between;
}

.leasing-program__checkbox::after {
    content: '';
    display: block;
    width: 10%;
    border: 2px solid var(--color-yellow);
    position: absolute;
    bottom: 0;
}

.leasing-program__checkbox input {
    width: 25px;
    height: 25px;
    accent-color: var(--color-yellow);
}

.leasing-program__checkbox label {
    width: 90%;
    height: 40px;
    font-size: 17px;
    overflow: hidden;
    color: var(--color-grey);
}

.leasing-program__conditions ul {
    margin: 15px 0 0;
}

.leasing-program__condition {
    margin-bottom: 10px;
}

.leasing-program__condition::marker {
    color: var(--color-yellow);
}

.leasing-program__condition-item {
    display: flex;
}

.leasing-program__condition-title {
    width: 50%;
    font-size: 20px;
}

.leasing-program__condition-value {
    color: var(--color-yellow);
    font-weight: bold;
    font-size: 24px;
}





#leasingCalculator {
    display: flex;
    justify-content: space-between;
}

.leasing-calculator__input {
    width: 65%;
}

.leasing-calculator__field:not(:first-of-type) {
    margin-top: 40px;
}

.leasing-calculator__field-title {
    margin-bottom: 15px;
}

.leasing-calculator__field-title label {
    color: var(--color-grey);
    font-size: 16px;
}

.leasing-calculator__field-value {
    margin-bottom: 10px;
    font-size: 20px;
}

.leasing-calculator__field .leasing-calculator__field-input {
    display: flex;
    justify-content: space-between;
}

.leasing-calculator__field .slider-wrapper {
    width: 100%;
}

.leasing-calculator__field--downpayment .slider-wrapper {
    width: 90%;
}

.slider-wrapper .irs-min, .slider-wrapper .irs-max {
    top: 12px;
}

.slider-wrapper .irs-from, .slider-wrapper .irs-to, .slider-wrapper .irs-single, .slider-wrapper .irs-bar {
    background-color: var(--color-yellow);
}

.slider-wrapper .irs-single::before {
    border-top-color: var(--color-yellow);
}

.slider-wrapper .irs-handle {
    border-color: var(--color-yellow);
    background-color: var(--color-yellow);
}

.slider-wrapper .irs-handle.state_hover, .slider-wrapper .irs-handle:hover {
    border-color: var(--color-yellow-dark);
    background-color: var(--color-yellow-dark);
    cursor: pointer;
}

.leasing-calculator__field--prepayment .leasing-calculator__field-percent {
    border-bottom: 1px solid #c4c4c4;
    margin-bottom: 12px;
    width: 9%;
    text-align: center;
    font-size: 20px;
}

.leasing-calculator__field--period .leasing-calculator__field-input label {
    display: flex;
    align-items: center;
    font-size: 14px;
}

.leasing-calculator__field--period input {
    height: 25px;
    width: 25px;
    appearance: none;
    -webkit-appearance: none;
    border: 0.2rem solid #fff;
    background-color: #fff;
    border-radius: 50%;
    box-shadow: 0 0 0 1px #999;
}

.leasing-calculator__field--period input:hover {
    border-width: 0;
}

.leasing-calculator__field--period input:focus-visible {
    outline-offset: 0;
}

.leasing-calculator__field--period input:checked {
    box-shadow: 0 0 0 1px var(--color-yellow);
    background-color: var(--color-yellow);
    border-width: 0.2rem;
}

.leasing-calculator__field--period span {
    margin-left: 8px;
}

.leasing-calculator__output {
    width: 25%;

    /* display: flex;
    flex-direction: column;
    justify-content: space-between; */
}

.leasing-calculator__results {
    padding: 25px 15px;
    border: 1px solid #a0a0a0;
}   

.leasing-calculator__result:not(:first-of-type) {
    margin-top: 40px;
}

.leasing-calculator__result-title {
    color: var(--color-grey);
    margin-bottom: 15px;
    font-size: 16px;
}

.leasing-calculator__result-value {
    font-weight: bold;
    font-size: 18px;
}

.leasing-calculator__submit {
    margin-top: 20px;
}

.leasing-calculator__submit button {
    background: var(--color-yellow);
    color: var(--color-black);
    width: 100%;
}

.leasing-calculator__submit button::after {
    color: var(--color-black);
}