html
, body {
    height: 100%;
}

body {
    font: 16px/24px system-ui;
    color: #000;
    background: #fff;
}

.h-wrapper {
    height: 100%;
    min-height: 100%;
}

.h-fixed {
    padding: 0 16px;
}

.h-person-data-wrap {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.h-person-data-content {
    flex-grow: 1;
    overflow: auto;
    padding: 24px 0 0;
}

.h-person-data-content h2 {
    font-size: 20px;
    line-height: 28px;
    font-weight: 500;
    margin: 0 0 24px;
}

.h-person-data-content h2.finish-icon {
    background: url("data:image/png;base64,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") 50% 0 no-repeat;
    background-size: 128px 128px;
    padding: 152px 0 0;
    text-align: center;
}

.person-data-content-header {
    padding: 0 0 20px;
}
.person-data-content-header h2 {
    font-size: 20px;
    line-height: 28px;
    font-weight: 500;
    margin: 0 0 4px;
}

.person-data-step {
    font-size: 14px;
    line-height: 28px;
    color: rgba(0, 0, 0, 0.64);
    margin: 0 0 4px;
}
.person-data-steps-progress {
    height: 4px;
    background: rgba(0, 0, 0, 0.16);
    border-radius: 4px;
    position: relative;
}
.person-data-steps-progress-bar {
    height: 100%;
    background: #0B57D0;
    border-radius: 4px;
    position: absolute;
    top: 0;
    left: 0;
}

.h-person-data-content h3 {
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
    margin: 0 0 16px;
}

.h-person-data-content h4 {
    font-size: 16px;
    line-height: 24px;
    font-weight: 500;
    margin: 0 0 12px;
}
.h-person-data-content h4.m-top {
    margin-top: 36px;
}
.h-person-data-footer h4.m-bott {
    margin-bottom: 16px;
}

.h-person-data-content a {
    color: #0B57D0;
    text-decoration: none;
}

.person-data-phone-form {
    padding: 0 0 16px;
}

.person-data-phone-form label {
    display: block;
    font-size: 12px;
    line-height: 16px;
    color: rgba(0, 0, 0, 0.72);
    margin: 0 0 8px;
}

.person-data-input-wrap {
    position: relative;
}

.person-data-input-wrap .phone-code {
    position: absolute;
    top: 50%;
    left: 16px;
    transform: translateY(-50%);
}

.person-data-phone-form input.text {
    box-sizing: border-box;
    display: block;
    margin: 0;
    padding: 12px 16px;
    width: 100%;
    height: 44px;
    border: 1px solid rgba(0, 0, 0, 0.24);
    border-radius: 8px;
    font: 16px/24px system-ui;
    color: #000;
    background: #fff;
}

.person-data-input-wrap.with-phone-code input.text {
    padding-left: 36px;
}

.person-data-phone-form input.text.error {
    border-color: rgba(255, 59, 56, 0.48);
}

.person-data-phone-info {
    padding: 8px 0 16px;
    font-size: 14px;
    line-height: 20px;
    color: rgba(0, 0, 0, 0.72);
}

.person-data-phone-error-message {
    padding: 8px 0 16px;
    font-size: 14px;
    line-height: 20px;
    color: #ff3b38;
}

.person-data-phone-btn {
    padding: 0 0 36px;
}
.person-data-phone-btn.padd2 {
    padding: 16px 0 0;
}

.person-data-phone-list a {
    display: block;
    padding: 12px 0;
}

.person-data-content-copy p {
    margin: 0 0 16px;
}

.person-data-content-btn {
    padding: 10px 0 25px;
}

.person-data-finish-list {
    padding: 0 0 36px;
}
.person-data-finish-list li {
    margin: 0 0 12px;
    padding: 0 0 0 36px;
    position: relative;
    font-size: 18px;
    line-height: 24px;
}
.person-data-finish-list li.skipped {
    color: rgba(0, 0, 0, 0.72);
}
.person-data-finish-icon {
    display: block;
    font-size: 24px;
    width: 24px;
    position: absolute;
    top: 0;
    left: 0;
}
.person-data-finish-icon.green {
    color: #189A2E;
}
.person-data-finish-icon.grey {
    color: rgba(0,0,0,.48);
}


.h-person-data-footer {
    flex-shrink: 0;
    padding: 0 0 24px;
    position: relative;
}

.h-person-data-footer:before {
    content: "";
    display: block;
    width: 100%;
    height: 48px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.00) 0%, #FFF 100%);
    position: absolute;
    top: -48px;
    left: 0;
}

.person-data-btn {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0 8px;
    margin: 0;
    padding: 16px;
    background: #0B57D0;
    border: none;
    border-radius: 8px;
    width: 100%;
    min-height: 56px;
    font: 700 16px/24px system-ui;
    color: #fff;
}
.person-data-btn:disabled {
    opacity: .5;
}
.person-data-btn-border {
    background: #fff;
    border: 1px solid #000;
    color: #000;
}
.person-data-btn + .person-data-btn {
    margin-top: 8px;
}

.person-data-btn .ph {
    font-size: 24px;
    opacity: .7;
}

.person-data-footer-btns {
    display: flex;
    align-items: center;
}

.person-data-footer-btns li {
    width: 50%;
    font-size: 14px;
    line-height: 20px;
}

.person-data-footer-btns a {
    display: block;
    text-align: center;
    color: #0B57D0;
    text-decoration: none;
}

.person-data-footer-btns-icon {
    display: block;
    margin: 0 0 8px;
    font-size: 32px;
    color: rgba(11,87, 208, .72);
}