@font-face {
    font-family: SEB;
    src: url(../fonts/SEBSansSerif-Regular.woff2);
    font-weight: 400;
}

@font-face {
    font-family: SEB;
    src: url(../fonts/SEBSansSerif-Medium.woff2);
    font-weight: 500;
}

@font-face {
    font-family: SEB;
    src: url(../fonts/SEBSansSerif-Bold.woff2);
    font-weight: 600;
}

body {
    margin: 0;
    font-family: 'SEB';
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    height: 100%;
    font-weight: 400;
}

label {
    padding-bottom: 4px;
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: 500;
    color: #333;
}

.main {
    display: flex;
    flex-direction: column;
    flex: 1 0 auto;
}

.login_wrap {
    padding: 2.12rem 1rem 5rem;
    max-width: 53.25em;
    width: 100%;
    margin: 0 auto;
}

.title_block {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.title {
    font-size: 32px;
    margin: 0;
    font-weight: 400;
    color: #333;
}

.title_block > svg {
    width: 24px;
}

.subtitle {
    margin: 0;
    font-weight: 400;
    font-size: 20px;
    margin-bottom: 2.5rem;
}

.method_block {
    border-bottom: 1px solid #b3b3b3;
    margin-bottom: 1.5rem;
}

.method_btn {
    background: inherit;
    border: none;
    padding: .5rem 1rem;
    border-radius: .25rem .25rem 0 0;
    font-size: 16px;
    font-family: 'SEB';
    color: #0062bc;
    cursor: pointer;
}

.method_btn:hover {
    background: #e7e7e7;
}

.active {
    border: 1px solid #b3b3b3;
    border-bottom-color: #fff;
    color: #333;
    font-weight: 500;
    margin-bottom: -1px;
}

.login_block {
    display: flex;
    flex-direction: column;
    max-width: 340px;
    margin-bottom: 25px;
}

.input_block {
    display: flex;
    flex-direction: column;
    margin-bottom: 24px;
}

.input_form {
    background-color: #fff;
    color: #333;
    border-color: gray;
    height: 44px;
    outline: none;
    display: block;
    width: 100%;
    padding: .375rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    appearance: none;
    border: 1px solid #868686;
    border-radius: .375rem;
    box-sizing: border-box;
}

.mark_block {
    display: flex;
    align-items: baseline;
    margin-bottom: 20px;
    margin-left: 10px;
}

.checkbox_text {
    margin-left: 10px;
}

.text_checkbox_block {
    display: flex;
    align-items: center;
}

.text_chx {
    color: #333;
    font-size: 1rem;
    line-height: 1.25rem;
}

.text_chx2 {
    font-size: .875rem;
    line-height: 1rem;
    font-weight: 400;
    color: #737373;
}

.external-link {
}

.ck {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    cursor: pointer;
    user-select: none;
    --ck-size: 18px;
    --ck-bg: #fff;
    --ck-bd: #c8c8d0;
    --ck-act: #333333;
    --ck-tick: #fff;
}

.ck__input {
    /* Скрываем визуально, но оставляем в потоке для доступности */
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.ck__box {
    width: var(--ck-size);
    height: var(--ck-size);
    border: 1px solid #000000;
    border-radius: 4px;
    background: var(--ck-bg);
    box-sizing: border-box;
    display: inline-grid;
    place-items: center;
    transition: .15s border-color, .15s background-color, .15s box-shadow;
}

.ck__box::after {
    content: "";
    width: 10px;
    height: 6px;
    border: 2px solid var(--ck-tick);
    border-top: none;
    border-right: none;
    transform: translateY(-1px) rotate(-45deg) scale(0);
    transition: .12s transform;
}

/* checked */
.ck__input:checked + .ck__box {
    background: var(--ck-act);
    border-color: var(--ck-act);
}

.ck__input:checked + .ck__box::after {
    transform: translateY(-1px) rotate(-45deg) scale(1);
}

/* hover */
.ck:hover .ck__box {
    border-color: #9aa0b3;
}

/* focus-visible для клавиатуры */
.ck__input:focus-visible + .ck__box {
    box-shadow: 0 0 0 3px rgba(106,92,255,.35);
}

/* disabled */
.ck__input:disabled + .ck__box {
    opacity: .6;
    cursor: not-allowed;
}

.ck__input:disabled ~ * {
    cursor: not-allowed;
}

.text_chx2 > a {
    font-weight: 600;
}

@media screen and (max-width: 600px) {
    .text_chx2 > br {
        display: none;
    }
}

.ng-star-inserted > .col-md-12 > p > a {
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: 500;
}

.fa-info-circle {
    width: 16px;
    margin-left: 6px;
}

i.external-link {
    position: relative;
    width: 21px;
    height: 21px;
    display: inline-block
}

i.external-link:after {
    content: "";
    background-repeat: no-repeat;
    background-position: center;
    display: inline-block;
    width: 21px;
    height: 21px;
    position: absolute;
    top: 6px;
    left: -1px;
    background-size: cover;
}

i.external-link:after {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 19 18' width='21' height='17' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.8534 3.75H5.73482C5.12339 3.75 4.62775 4.25367 4.62775 4.875V13.125C4.62775 13.7463 5.12339 14.25 5.73482 14.25H13.8534C14.4648 14.25 14.9605 13.7463 14.9605 13.125V4.875C14.9605 4.25367 14.4648 3.75 13.8534 3.75ZM13.715 13.125H5.87321C5.83651 13.125 5.80131 13.1102 5.77536 13.0838C5.7494 13.0574 5.73482 13.0217 5.73482 12.9844V5.01562C5.73482 4.97833 5.7494 4.94256 5.77536 4.91619C5.80131 4.88982 5.83651 4.875 5.87321 4.875H13.715C13.7517 4.875 13.7869 4.88982 13.8129 4.91619C13.8388 4.94256 13.8534 4.97833 13.8534 5.01562V12.9844C13.8534 13.0217 13.8388 13.0574 13.8129 13.0838C13.7869 13.1102 13.7517 13.125 13.715 13.125ZM12.4695 6L9.33283 6.0034C9.17998 6.0034 9.05606 6.12933 9.05606 6.28465V6.93516C9.05606 7.0927 9.18342 7.21952 9.33843 7.21636L10.6762 7.16618L6.92297 10.9801C6.81489 11.0899 6.81489 11.268 6.92297 11.3779L7.45414 11.9176C7.56222 12.0274 7.73746 12.0274 7.84554 11.9176L11.5987 8.10366L11.5494 9.46305C11.5462 9.62058 11.671 9.74998 11.8261 9.74998H12.4662C12.6191 9.74998 12.743 9.62405 12.743 9.46873L12.7463 6.28125C12.7463 6.12593 12.6224 6 12.4695 6Z' fill='%230062bc'/%3E%3C/svg%3E%0A")
}

.btn {
    font-family: 'SEB';
    font-weight: 500;
    line-height: 1.5rem;
    background-color: #007ac7;
    border: none;
    padding: .625rem 1rem;
    color: #fff;
    font-size: 16px;
    cursor: pointer;
    border-radius: 4px;
}

.faq_block {
    border-top: 1px solid #b3b3b3;
    padding: 15px 0;
}

.faq_block > .title {
    font-size: 24px;
    margin-bottom: 10px;
}

.text {
    font-size: 16px;
    color: #333;
}

.link {
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    color: #0062bc;
}

/* 
Header & Footer
*/
header {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #fff;
    border-bottom: 1px solid #ccc;
    height: 56px;
}

.logo {
    padding-left: 3.5rem;
    font-weight: 500;
}

.logo:before {
    content: "";
    display: inline-block;
    background-image: url("data:image/svg+xml,%3Csvg class='seb-logo' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 800'%3E%3Cpath d='M0 0h800v800H0z' fill='%2360cd18'/%3E%3Cpath d='M290.55 348.35l-25.87 19.32c-12.22-10.51-28-12.57-36.65-12.57s-18 2.51-19.37 8.82c-1.38 6.12 4.31 10.88 14.08 13.53 11.14 3 21.29 5.66 36.92 10.12 23.24 6.63 39.13 16.69 39.13 40 0 32.14-28.53 48.8-66.75 48.8s-64.26-19.91-72-29.2l27.35-20.45c19.21 16.75 32.57 19.11 43.74 19.11 12.81 0 24.79-2.75 26.33-10 1.25-5.82-3.58-10.45-14.49-13-12.35-2.85-22.77-5.14-34.4-8.2-31.52-8.27-40.41-26.6-40.41-43.06 0-22.67 21.1-45.95 59.69-45.95 39.57 0 62.74 22.67 62.74 22.67m164.9-20.4H340.12V472.1h117.45v-33.24h-76.94v-23.22h53v-31.8h-53v-23h74.83zM310.27 505.37h9V294.63h-9zm162.45 0h9V294.63h-9zm29.8-33.27h92.64c24.77 0 44.84-14.93 44.84-38.84 0-18.65-12.21-31-29.32-36.47a9.6 9.6 0 0 0-1.66-.21 10.36 10.36 0 0 0 1.66-.29c9.8-3.88 20.66-14.21 20.66-31.8 0-22.31-19.74-36.54-44.1-36.54h-84.72zm40.7-114.17h32.36c7.45 0 13.48 5.88 13.48 12.64s-6 12.66-13.48 12.66h-32.36zm39.58 82.13h-39.58v-26.29h39.58a13.15 13.15 0 0 1 0 26.28z' fill='%23fff'/%3E%3C/svg%3E");
    height: 3.5rem;
    width: 3.5rem;
    position: absolute;
    top: 0;
    left: 0;
}

.logo {
    width: 120px;
}

footer {
    flex: 0 0 auto;
}

.fa {
    margin-left: -85%;
}

.fa-size {
    font-size: 3em;
}

.col-ffff-6 {
    width: 100%;
}

.footer {
    overflow: hidden;
    position: relative;
}

.footer__bottom-bar {
    height: 104px;
    font-size: 1rem;
    line-height: 1.5rem;
    border-top: 1px solid #eeeeee;
    background-color: #fff;
}

.footer__container {
    display: flex;
    flex-direction: row;
    height: 100%;
    padding-left: 1rem;
    justify-content: left;
    align-items: center;
}

.footer__copyright {
    margin-top: auto;
    margin-bottom: auto;
    margin-left: 1rem;
    margin-right: 1rem;
}

.footer__links {
    padding-right: 45px;
    display: flex;
    flex-wrap: wrap;
}

.footer__links a {
    cursor: pointer;
    text-decoration: none;
    font-weight: 500!important;
    color: #0062bc;
}

.footer__links a:hover {
    text-decoration: underline;
}

.footer__link {
    white-space: nowrap;
}

.footer__link:not(:last-child) {
    margin-right: 2rem;
    position: relative;
}

.footer__link:not(:last-child):after {
    content: "|";
    position: absolute;
    top: -2px;
    left: calc(100% + 14px);
}

.footer i.external-link:after {
    top: 4px;
}

.footer fa-icon {
    display: inline-flex;
    align-self: flex-end;
    font-size: 11px;
    margin-right: 5px;
}

.mobile_method {
    display: none;
}

.cselect {
    display: none;
}

.error_block {
    background-color: #fce8e8 !important;
    border: 1px solid #F47171 !important;
    padding: 16px;
    border-radius: 4px;
    font-size: 16px;
    width: 100%;
    margin-bottom: 24px;
}

.erron_text {
    display: flex;
    flex-direction: row;
    align-items: center;
    color: #333;
    font-size: 16px;
    gap: 10px;
    margin: 0;
}

.erron_text > svg {
    width: 23px;
    color: #9f000a;
}

@media screen and (max-width: 768px) {
    .login_wrap {
        padding: 0;
    }

    .method_block {
        display: none;
    }

    .cselect {
        display: block;
        margin-bottom: 24px;
    }

    .subtitle {
        margin-bottom: 5px;
        font-size: 16px;
        font-weight: 500;
    }

    .mobile_method {
        display: block;
        width: 100%;
        height: 45px;
        border-radius: 4px;
        padding: 5px;
        box-sizing: border-box;
        margin-bottom: 25px;
        color: #333;
        border-color: gray;
    }

    .mobile_method {
        position: absolute;
        left: -9999px;
        width: 1px;
        height: 1px;
        opacity: 0;
    }

    /* 3) Кастомный select */
    .cselect {
        position: relative;
        width: 100%;
        font: 14px/1.2 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    }

    .cselect__btn {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 12px 14px;
        border-radius: 4px;
        background: rgba(255,255,255,.06);
        color: #333;
        cursor: pointer;
        user-select: none;
        border: 1px solid #808080;
        height: 44px;
        box-sizing: border-box;
        font-family: 'SEB';
        font-size: 16px;
    }

    .cselect__btn:focus {
        outline: 2px solid rgba(255,255,255,.35);
        outline-offset: 2px;
    }

    .cselect__arrow {
        width: 10px;
        height: 10px;
        border-right: 2px solid currentColor;
        border-bottom: 2px solid currentColor;
        transform: rotate(45deg);
        opacity: .8;
        transition: transform .15s ease;
        margin-left: 10px;
        flex: 0 0 auto;
    }

    .cselect.is-open .cselect__arrow {
        transform: rotate(-135deg);
    }

    .cselect__list {
        position: absolute;
        left: 0;
        right: 0;
        top: calc(100% + 8px);
        z-index: 1000;
        margin: 0;
        padding: 0;
        list-style: none;
        border: 1px solid #1a1a1a;
        background: rgb(255 255 255 / 95%);
        backdrop-filter: blur(10px);
        box-shadow: 0 18px 50px rgba(0,0,0,.35);
        display: none;
        max-height: 260px;
        overflow: auto;
        border-bottom-left-radius: 4px;
        border-bottom-right-radius: 4px;
        font-family: 'SEB';
        font-size: 16px;
    }

    .cselect.is-open .cselect__list {
        display: block;
    }

    .cselect__option {
        padding: 10px 10px;
        color: #333;
        cursor: pointer;
        border-bottom: 1px solid #ccc;
    }

    .cselect__option:hover, .cselect__option.is-active {
        background: rgba(255,255,255,.10);
    }

    .cselect__option.is-selected {
        background: #1a1a1a;
        font-weight: 400;
        color: #ccc;
    }

    .login_block {
        display: flex;
        margin: auto;
        max-width: 760px;
    }

    .main {
        padding: 1.5rem 1rem 5rem;
    }

    .btn {
        width: 100%;
        margin-bottom: 25px;
    }
}