#savings-calc {
    background-color: #0D1E32;
    color: #FFF;
    padding: 45px 80px;
    border-radius: 16px;
    overflow: hidden;
    text-align: left;
    margin-top: 40px;
}
#savings-calc h3 {
    color: inherit;
    margin-bottom: 35px;
}

.form-calculations > div + div {
    margin-top: 50px;
}
.form-calculations p {
    margin-bottom: 0;
    font-size: 16px;
    line-height: 1.2;
}
.form-calculations p strong {
    text-transform: uppercase;
}

.range-slider + .range-slider {
    margin-top: 80px;
}
.calculator + .btn {
    margin-top: 30px;
}

@media (max-width: 991px) {
    .form-calculations {
        margin-bottom: 60px;
    }
}
@media (max-width: 575px) {
    #savings-calc {
        padding: 45px;
    }
}

.range-slider {
    --value-output: Clamp( var(--min), var(--value, 0), var(--max) );
    --value-offset-y: 5px;
    --text-value-output: var(--text-value, "");
    --completed-output: calc( (var(--value-output) - var(--min)) / (var(--max) - var(--min)) * 100 );

    position: relative;
    margin-bottom: 20px;
}

.range-slider label {
    display: block;
    margin-bottom: 55px;
    font-size: 12px;
    line-height: 1.2;
    font-weight: 400;
}
.range-slider > input {
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    cursor: pointer;
    width: 100%;
    height: 12px;
}
.range-slider > input::-webkit-slider-runnable-track {
    background: #7F9BBE;
    height: 8px;
    border-radius: 10px;
    width: 100%;
    cursor: pointer;
}
.range-slider > input::-moz-range-track {
    background: #7F9BBE;
    height: 8px;
    border-radius: 10px;
    width: 100%;
    cursor: pointer;
}
.range-slider > input::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    background-color: #CBE2FF;
    border: solid 2px #48C4D8;
    height: 20px;
    width: 20px;
    border-radius: 50%;
    margin-top: -6px;
}
.range-slider > input::-moz-range-thumb {
    -webkit-appearance: none;
    appearance: none;
    background-color: #CBE2FF;
    border: solid 2px #48C4D8;
    height: 18px;
    width: 18px;
    border-radius: 50%;
 }

.range-slider > input + output {
    --value: var(--value-output);
    --flip: -1.25;
    --x-offset: calc(var(--completed-output) * -1%);
    --pos: calc( ((var(--value) - var(--min)) / (var(--max) - var(--min))) * 100% );

    pointer-events: none;
    position: absolute;
    z-index: 5;
    padding: 2px 4px;
    left: var(--pos);
    transform: translate(var(--x-offset), calc( 150% * var(--flip) - (var(--y-offset, 0px) + var(--value-offset-y)) * var(--flip) ));
    transition: all 0.12s ease-out, left 0s;

    background-color: #48C4D8;
    color: #FFF;
    border-radius: 8px;
    min-width: 50px;
    min-height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    line-height: 1.2;
    font-weight: 700;
}
.range-slider > input + output::after {
    content: var(--prefix, "") var(--text-value-output) var(--suffix, "");
}
.range-slider::before {
    content: var(--prefix, "") var(--text-value-min) var(--suffix, "");
    left: 0;
}
.range-slider::after {
    content: var(--prefix, "") var(--text-value-max) var(--suffix, "");
    right: 0;
}
.range-slider::before,
.range-slider::after {
    pointer-events: none;
    position: absolute;
    z-index: 4;
    bottom: 23px; 
    padding: 2px 4px;

    background-color: #2A3E58;
    color: #FFF;
    border-radius: 8px;
    min-width: 50px;
    min-height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    line-height: 1.2;
    font-weight: 700;
}

.form-calculations .large-total {
    font-size: 61px;
    font-weight: 300;
    line-height: 1.2;
    display: inline-flex;
    align-items: flex-end;
    gap: 5px;
    background: rgb(108,192,212);
    background: -moz-linear-gradient(45deg, rgba(108,192,212,1) 0%, rgba(108,192,212,1) 20%, rgba(68,112,214,1) 70%, rgba(68,112,214,1) 85%, rgba(28,42,65,1) 100%);
    background: -webkit-linear-gradient(45deg, rgba(108,192,212,1) 0%,rgba(108,192,212,1) 20%,rgba(68,112,214,1) 70%,rgba(68,112,214,1) 85%,rgba(28,42,65,1) 100%);
    background: linear-gradient(45deg, rgba(108,192,212,1) 0%,rgba(108,192,212,1) 20%,rgba(68,112,214,1) 70%,rgba(68,112,214,1) 85%,rgba(28,42,65,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6cc0d4', endColorstr='#1c2a41',GradientType=1 );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}