/* Reference: IBM Carbon multistep forms with a vertical progress indicator. */
.registration-page .signin-shell { display: block; }
.registration-page .signin-side { min-height: 100svh; }
.registration-page .signin-header { width: 100%; max-width: 1280px; margin: 0 auto; padding: 28px 48px; border-bottom: 1px solid #eef0f4; }
.registration-page .signin-main { display: flex; justify-content: center; align-items: center; padding: 36px 48px; }
.register-layout { display: grid; grid-template-columns: 255px minmax(0, 480px); gap: 80px; width: min(100%, 815px); margin: 0 auto; }
.register-sidebar { border-right: 1px solid #e8ecf2; padding-right: 36px; }
.register-sidebar h1 { margin: 0; font-size: 34px; line-height: 1.13; letter-spacing: -1.2px; font-weight: 600; }
.register-progress { list-style: none; padding: 0; margin: 38px 0; }
.register-progress li { position: relative; }
.register-progress li:not(:last-child)::after { position: absolute; left: 13px; top: 39px; bottom: 1px; content: ''; width: 1px; background: #e1e6ee; }
.register-progress button { display: flex; align-items: center; gap: 13px; width: 100%; padding: 8px 0 24px; border: 0; background: none; text-align: left; color: #858e9c; font-size: 13px; font-weight: 500; cursor: pointer; }
.register-progress button:disabled { opacity: 1; cursor: default; }
.register-progress button[aria-current] { color: #1761da; font-weight: 600; }
.register-step-number { display: grid; place-items: center; flex: 0 0 28px; height: 28px; border: 1px solid #dce2eb; border-radius: 50%; font-size: 12px; background: #fff; }
.register-progress button[aria-current] .register-step-number { border-color: #1761da; background: #1761da; color: #fff; }
.register-progress button.is-complete { color: #26354a; }
.register-progress button.is-complete .register-step-number { color: #1761da; border-color: #a6c1ec; }
.register-signin { margin: 0; font-size: 12px; line-height: 1.9; color: #707987; }
.register-signin a { display: block; width: fit-content; color: #19212e; text-underline-offset: 4px; font-weight: 600; }
.register-mobile-signin { display: none; }
.register-form-pane { min-width: 0; min-height: 407px; }
.register-step { margin: 0; padding: 0; border: 0; min-width: 0; }
.register-step legend { width: 100%; padding: 0; margin: 0 0 28px; font-size: 25px; line-height: 1.25; letter-spacing: -.7px; font-weight: 600; }
.registration-fields { display: grid; gap: 20px; }
.registration-page .field { gap: 8px; }
.registration-page .field input, .registration-page .field select { height: 46px; }
.registration-page .field textarea { min-height: 92px; }
.registration-page .password-toggle { top: 3px; }
.register-actions { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 28px; }
.register-actions .primary-btn { max-width: 240px; margin-left: auto; }
.register-previous { padding: 12px 0; border: 0; background: transparent; color: #626e7e; cursor: pointer; font-size: 13px; }
.register-previous:hover { color: #1761da; }
.registration-page .signin-footer { padding: 22px; }
.register-layout.is-verifying .register-sidebar { padding-top: 5px; }
.register-layout.is-verifying .register-signin { margin-top: 30px; }
@media (max-width: 900px) { .register-layout { grid-template-columns: 210px minmax(0, 480px); gap: 40px; } .register-sidebar { padding-right: 24px; } .register-sidebar h1 { font-size: 30px; } }
@media (max-width: 700px) {
    .registration-page .signin-header { padding: 22px 24px; }
    .registration-page .signin-main { padding: 24px; align-items: flex-start; }
    .register-layout { display: block; max-width: 480px; }
    .register-sidebar { border: 0; padding: 0; }
    .register-sidebar h1 { font-size: 28px; }
    .register-progress { display: flex; justify-content: space-between; gap: 8px; margin: 23px 0 27px; }
    .register-progress li::after { display: none; }
    .register-progress button { gap: 7px; padding: 0; font-size: 11px; white-space: nowrap; }
    .register-step-number { flex-basis: 23px; height: 23px; font-size: 10px; }
    .register-signin { margin: 22px 0 0; position: static; }
    .register-signin a { display: inline; margin-left: 5px; }
    .register-sidebar > .register-signin { display: none; }
    .register-mobile-signin { display: block; margin-top: 24px; }
    .register-form-pane { min-height: 0; }
    .register-step legend { font-size: 21px; margin-bottom: 20px; }
    .registration-fields { gap: 16px; }
    .register-actions { margin-top: 24px; }
    .register-actions .primary-btn { max-width: none; }
    .register-layout .register-pair { grid-template-columns: 1fr 1fr; gap: 12px; }
    .register-layout.is-verifying .register-sidebar { margin-bottom: 26px; }
}
@media (max-height: 750px) and (min-width: 701px) { .registration-page .signin-header { padding-top: 20px; padding-bottom: 20px; } .registration-page .signin-main { padding-top: 24px; padding-bottom: 24px; } }

.registration-country-label { font-size: 13px; font-weight: 550; }
.registration-page .country-selected { height: 46px; min-height: 46px; background: #fcfcfd; border-color: #d7dde6; border-radius: 6px; font-size: 14px; }
.registration-page .country-selected > span { overflow: hidden; white-space: nowrap; }
.registration-page .country-selected .country-flag { flex-shrink: 0; }
.registration-page .country-options { position: absolute; min-width: 260px; max-width: calc(100vw - 48px); z-index: 20; margin: 0; box-shadow: 0 10px 30px #14203c1a; }
.registration-page .country-picker[data-above] .country-options { top: auto; bottom: calc(100% + 6px); }
.registration-page .country-option input { width: 1px; height: 1px; min-height: 0; padding: 0; }
.registration-page .country-options input[type="search"] { height: 38px; }