@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&family=Lexend:wght@100;200;300;400;500;600;700;800;900&family=Roboto:ital,wght@0,300;0,400;0,500;0,700;0,900;1,400;1,500;1,700&display=swap");@import url("https://fonts.googleapis.com/css2?family=Lexend:wght@100;200;300;400;500;600;700;800;900&display=swap");

.retirement__chart-holder {
    font-family: Lexend,Inter,sans-serif;
    overflow: hidden;
}

.retirement__chart {
    height: auto;
    position: relative;
    width: 100%;
}

.retirement__form {
    align-items: center;
    background-color: #fff;
    border-top: 4px solid #313155;
    box-shadow: 0 16px 27px 0 #42424212;
    display: flex;
    flex-direction: column;
    gap: 30px;
    justify-content: center;
    padding: 30px 5px 55px;
    text-align: center
}

.retirement__form-title {
    color: #313155;
    font-family: Lexend;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: .5px;
    line-height: 18px;
    text-align: center
}

.retirement__form-item {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center
}

.retirement__form-item.inactive {
    display: none;
}

.retirement__form-item label {
    font-weight: 500;
    margin-bottom: 5px
}

.retirement__form-item input,.retirement__form-item label, .retirement__form-item select {
    color: #313155;
    font-family: Lexend;
    font-size: 14px;
    letter-spacing: .5px;
    line-height: 18px;
    text-align: center
}

.retirement__form-item input, .retirement__form-item select {
    border: 1px solid #313155;
    border-radius: 5px;
    font-weight: 400;
    padding: 11px
}

.retirement__form-item select {
    background: #FFFFFF;
}

.retirement__form-item input[name=age],.retirement__form-item input[name=retirement-age],.retirement__form-item input[name=return],.retirement__form-item input[name=provider-fee] {
    max-width: 90px
}

.retirement__form-item input[name=balance],.retirement__form-item input[name=contribution] {
    max-width: 100px
}

.retirement__form-item input::-webkit-inner-spin-button,.retirement__form-item input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    appearance: none;
    margin: 0
}

.retirement__form-item-flex {
    align-items: center;
    display: flex;
    gap: 10px
}

.retirement__form-item-button {
    align-items: center;
    border: 1px solid #313155;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    height: 18px;
    justify-content: center;
    transition: background-color .3s cubic-bezier(.3,0,.22,1);
    width: 18px
}

.retirement__form-item-button:hover {
    background-color: #313155
}

.retirement__form-item-button:hover .retirement__form-item-button-span {
    background-color: #fff
}

.retirement__form-item-button-span {
    background-color: #313155;
    height: 1px;
    transition: background-color .3s cubic-bezier(.3,0,.22,1);
    width: 10px
}

.retirement__form-item-plus-button-span:first-of-type {
    transform: translateX(4px)
}

.retirement__form-item-plus-button-span:last-of-type {
    transform: rotate(90deg) translateY(4px)
}

.retirement__result {
    grid-gap: 35px;
    border: 2px solid #313155;
    border-radius: 4px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin-top: 50px;
    padding: 25px 50px
}

.retirement__result-card {
    border-right: 1px solid #31315533;
    padding-right: 15px;
    text-align: center;
}

.retirement__result-card-title {
    text-align: center;
    font-weight: bold;
    -webkit-text-stroke: 1px;
}


.retirement__result-difference {
    color: #313155;
    font-family: Lexend;
    font-size: 17px;
    margin-top: 10px;
    text-align: center;
}

.retirement__result-difference span {
    font-weight: bold;
    font-size: 18px;
    

}

.retirement__result-difference span#latest-retirement-difference {
    color: #4CBB17;
    font-size: 30px;
}

.retirement__result-card:last-of-type {
    border-right: none;
    padding-right: 0
}

.retirement__result-card-heading {
    color: #313155;
    font-family: Lexend;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: .5px;
    line-height: 18px;
    margin-bottom: 10px
}

.retirement__result-card-number {
    color: #50957d;
    font-family: Lexend;
    font-size: 29px;
    font-weight: 700;
    letter-spacing: .5px;
    line-height: 22px
}

.price-input {
    position: relative
}

.price-input input {
    padding-left: 40px;
    text-align: left
}

.price-input:before {
    content: "$";
    font-family: Lexend;
    font-size: 14px;
    left: 25px;
    position: absolute;
    top: 10.5px
}

.percentage-input {
    position: relative
}

.percentage-input input {
    padding-right: 43px;
    text-align: right
}

.percentage-input:before {
    content: "%";
    font-family: Lexend;
    font-size: 14px;
    position: absolute;
    right: 27px;
    top: 11px
}

.info-popup-trigger {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='17' fill='none'%3E%3Cpath fill='%23313155' d='M8.006 0A7.214 7.214 0 0 0 3.79 1.376C2.542 2.273 1.57 3.55.995 5.041a8.743 8.743 0 0 0-.432 4.718 8.374 8.374 0 0 0 2.077 4.18c1.061 1.142 2.413 1.92 3.886 2.235a7.094 7.094 0 0 0 4.385-.464c1.386-.619 2.572-1.665 3.405-3.008a8.613 8.613 0 0 0 1.28-4.536c-.003-2.165-.803-4.24-2.226-5.772C11.947.864 10.018.002 8.006 0Zm0 14.698c-1.2 0-2.374-.383-3.373-1.101a6.454 6.454 0 0 1-2.236-2.932 6.994 6.994 0 0 1-.345-3.774 6.7 6.7 0 0 1 1.661-3.345A5.952 5.952 0 0 1 6.822 1.76a5.675 5.675 0 0 1 3.508.371 6.191 6.191 0 0 1 2.725 2.406 6.89 6.89 0 0 1 1.023 3.63c-.002 1.731-.642 3.392-1.78 4.617-1.139 1.224-2.682 1.913-4.292 1.915Zm0-6.94a.733.733 0 0 0-.536.238.85.85 0 0 0-.223.578v2.45c0 .216.08.424.223.577.142.153.335.239.536.239a.733.733 0 0 0 .537-.24.849.849 0 0 0 .222-.576v-2.45a.849.849 0 0 0-.222-.578.733.733 0 0 0-.537-.239Zm0-3.267a.902.902 0 0 0-.527.172 1.008 1.008 0 0 0-.35.458c-.071.187-.09.392-.053.59.036.198.127.38.26.522a.93.93 0 0 0 .485.28c.184.04.375.019.548-.058a.967.967 0 0 0 .426-.376c.104-.168.16-.365.16-.567 0-.271-.1-.53-.278-.722a.916.916 0 0 0-.67-.299Z'/%3E%3C/svg%3E");
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: contain;
    cursor: pointer;
    display: inline-block;
    height: 12px;
    position: relative;
    right: -2px;
    top: -1px;
    width: 12px
}

.retirement__legend-title {
    color: #313155;
    font-family: Lexend;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: .5px;
    line-height: 23px;
    text-align: right
}

.retirement__download-btn {
    cursor: pointer;
    margin-top: 40px;
    width: max-content
}

@media screen and (max-width: 992px) {
    .retirement__form {
        padding: 30px 30px 55px
    }

    .retirement__result {
        padding: 20px
    }

    .retirement__result-card {
        border-right: none;
        padding-right: 0
    }

    .retirement__result-card:last-of-type {
        padding-bottom: 0
    }

    .retirement__form-item input[name=age],.retirement__form-item input[name=retirement-age],.retirement__form-item input[name=return] {
        max-width: 105px
    }

    .retirement__form-item input[name=balance],.retirement__form-item input[name=contribution] {
        max-width: 120px
    }

    .price-input input {
        padding-left: 66px
    }

    .price-input:before {
        left: 55px
    }

    .percentage-input input {
        padding-right: 48px
    }

    .percentage-input:before {
        right: 33px
    }
}

@media screen and (max-width: 567px) {
    .retirement__chart {
        height: 500px;
    }

    .retirement__legend-title {
        font-size: 12px;
        text-align: center;
    }

    .retirement__result-card-title {
        font-size: 14px;
    }

    .retirement__result-card-heading {
        font-size: 13px
    }

    .retirement__result-card-number {
        font-size: 22px
    }
}