:root {
    --wmds-trans-dur: 0.25s;
    --wmds-white: #ffffff;
    --wmds-black: #000000;
    --wmds-gray-25: #FCFCFD;
    --wmds-gray-50: #f9fafb;
    --wmds-gray-100: #f3f4f6;
    --wmds-gray-200: #e5e7eb;
    --wmds-gray-300: #d2d6db;
    --wmds-gray-400: #9da4ae;
    --wmds-gray-500: #6c737f;
    --wmds-gray-600: #4d5761;
    --wmds-gray-700: #384250;
    --wmds-gray-800: #1F2A37;
    --wmds-gray-900: #111927;
    --wmds-blue-25: #F0F8FF;
    --wmds-blue-50: #E6F2FB;
    --wmds-blue-100: #CCE6F7;
    --wmds-blue-200: #99CCEF;
    --wmds-blue-300: #66B3E8;
    --wmds-blue-400: #3399E0;
    --wmds-blue-500: #0080D8;
    --wmds-blue-600: #006CB3;
    --wmds-blue-700: #005895;
    --wmds-blue-800: #00497C;
    --wmds-blue-900: #003D67;
    --wmds-red-25: #FFF9F6;
    --wmds-red-50: #FEF3EC;
    --wmds-red-100: #FEE7DA;
    --wmds-red-200: #FEC8B6;
    --wmds-red-300: #FCA391;
    --wmds-red-400: #F98075;
    --wmds-red-500: #F54848;
    --wmds-red-600: #D23442;
    --wmds-red-700: #B0243C;
    --wmds-red-800: #8E1635;
    --wmds-red-900: #750D31;
    --wmds-yellow-25: #FFFDF4;
    --wmds-yellow-50: #FEFBE8;
    --wmds-yellow-100: #FEF7D2;
    --wmds-yellow-200: #FEEEA5;
    --wmds-yellow-300: #FCE178;
    --wmds-yellow-400: #FAD456;
    --wmds-yellow-500: #F8C020;
    --wmds-yellow-600: #D59E17;
    --wmds-yellow-700: #B27F10;
    --wmds-yellow-800: #8F620A;
    --wmds-yellow-900: #774D06;
    --wmds-green-25: #F8FEF8;
    --wmds-green-50: #F1FDF1;
    --wmds-green-100: #E4FBE4;
    --wmds-green-200: #CBF8CF;
    --wmds-green-300: #AAEAB7;
    --wmds-green-400: #8DD6A3;
    --wmds-green-500: #66BB88;
    --wmds-green-600: #4AA075;
    --wmds-green-700: #338665;
    --wmds-green-800: #206C55;
    --wmds-green-900: #13594B
}

@font-face {
    font-family: Roboto;
    font-display: swap;
    src: url(fonts/Roboto-Regular.woff2) format("woff2"),url(fonts/Roboto-Regular.woff) format("woff");
    font-weight: 400;
    font-style: normal
}

@font-face {
    font-family: Roboto;
    font-display: swap;
    src: url(fonts/Roboto-Medium.woff2) format("woff2"),url(fonts/Roboto-Medium.woff) format("woff");
    font-weight: 500;
    font-style: normal
}

@font-face {
    font-family: Roboto;
    font-display: swap;
    src: url(fonts/Roboto-Bold.woff2) format("woff2"),url(fonts/Roboto-Bold.woff) format("woff");
    font-weight: 700;
    font-style: normal
}

html {
    font-family: "Roboto",sans-serif
}

*, *::before, *::after {
    box-sizing: border-box;
    scrollbar-width: thin
}

html {
    font-size: 16px;
    height: 100%
}

body {
    min-height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin: 0;
    padding: 0
}

p {
    margin-top: 0;
    margin-bottom: 1rem
}

ol, ul {
    padding-left: 2rem
}

a {
    -webkit-text-decoration: none;
    text-decoration: none;
    outline: none
}

    a:focus {
        outline: none
    }

    a:focus-visible {
        box-shadow: 0 0 0 2px #99CCEF;
        box-shadow: 0 0 0 2px var(--wmds-blue-200)
    }

h1, h2, h3, h4 {
    margin: 0
}

input, button, select, optgroup, textarea {
    border: 1px solid #e5e7eb;
    margin: 0;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    outline: none
}

    input:focus, button:focus, select:focus, optgroup:focus, textarea:focus {
        outline: none
    }

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

    input[type=number] {
        -moz-appearance: textfield
    }

button, select {
    text-transform: none
}

    input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, textarea:-webkit-autofill, textarea:-webkit-autofill:hover, textarea:-webkit-autofill:focus, select:-webkit-autofill, select:-webkit-autofill:hover, select:-webkit-autofill:focus {
        -webkit-box-shadow: 0 0 0px 1000px #ffffff inset;
        -webkit-box-shadow: 0 0 0px 1000px var(--wmds-white) inset
    }

.viewport {
    max-width: 580px;
    width: 100%;
    margin: 0 auto;
    padding: 1.5rem .75rem
}

.content {
    box-shadow: 0px 4px 16px rgba(0,43,70,.1);
    -webkit-backdrop-filter: blur(12px);
    /*backdrop-filter: blur(12px);*/
    padding: 40px;
    background: #ffffff;
    background: var(--wmds-white);
    border-radius: 20px;
    width: 100%;
    /*min-height: 670px;*/
    max-width: 580px;
    margin: auto;
}

.content__footer {
    margin-top: auto;
    padding-top: 60px;
    display: flex;
    justify-content: space-between;
    align-items: center
}

.header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem
}

.header__logo {
    display: block;
    width: 222px;
    height: 32px;
    background: url(../images/logo.svg) center center/contain no-repeat;
    border-radius: 3px
}

.header__exchanger_logo {
    display: block;
    width: 222px;
    height: 53px;
    background: url(../images/exchanger/logo.svg) center center/contain no-repeat;
    border-radius: 3px
}

.logged-user {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 1.5rem
}

.logged-user__avatar {
    width: 80px;
    height: 80px;
    border-radius: 100px;
    overflow: hidden;
    margin-bottom: .5rem
}

    .logged-user__avatar img {
        width: 100%;
        height: 100%;
        -o-object-fit: cover;
        object-fit: cover;
        border-radius: 100px
    }

.logged-user dl {
    text-align: center;
    margin: 0
}

    .logged-user dl dd {
        font-weight: 600;
        font-size: 1.25rem;
        color: #384250;
        color: var(--wmds-gray-700);
        line-height: 1.5rem;
        margin: 0
    }

    .logged-user dl dt {
        font-weight: 600;
        font-size: 1rem;
        line-height: 1.5rem;
        color: #6c737f;
        color: var(--wmds-gray-500)
    }

        .logged-user dl dt span {
            padding-left: .25rem;
            font-weight: 400;
            letter-spacing: .04em
        }

.logged-user_hidden .logged-user__avatar {
    background: #f3f4f6;
    background: var(--wmds-gray-100)
}

.logged-user_hidden dl dd {
    display: block;
    margin: 0 auto;
    margin-bottom: .5rem;
    border-radius: .25rem;
    height: 16px;
    width: 96px;
    background: #f3f4f6;
    background: var(--wmds-gray-100)
}

.logged-user_hidden dl dt {
    display: block;
    margin: 0 auto;
    border-radius: .25rem;
    height: 16px;
    width: 128px;
    background: #f3f4f6;
    background: var(--wmds-gray-100)
}

a {
    color: #0080D8;
    color: var(--wmds-blue-500);
    border-radius: 3px;
    transition: .2s
}

    a:hover, a:active {
        color: #006CB3;
        color: var(--wmds-blue-600)
    }

.common-text {
    font-weight: 400;
    font-size: 1rem;
    line-height: 1.5rem;
    letter-spacing: .04em;
    color: #6c737f;
    color: var(--wmds-gray-500)
}

.field-validation-error {
    font-weight: 400;
    font-size: .75rem;
    line-height: 1rem;
    margin-top: .5rem;
    transition: .2s;
    display: block;
    color: #F54848;
    color: var(--wmds-red-500);
    text-align: left
}

.title {
    color: #384250;
    color: var(--wmds-gray-700);
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.5rem;
    margin-bottom: 1rem
}

p {
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5rem;
    letter-spacing: .16px;
    margin-bottom: .75rem
}

.icon-reload {
    display: block;
    background: none;
    border: none;
    padding: 0;
    width: 1rem;
    height: 1rem;
    cursor: pointer
}

    .icon-reload svg, .icon-reload svg path {
        transition: .2s all
    }

.icon-eye::before {
    position: relative;
    top: -2px;
    font-size: 10px
}

.icon-eye-closed::before {
    position: relative;
    top: -2px;
    font-size: 11px
}

.icon-eye-closed::before, .icon-eye::before, .icon-reload::before, .icon-question::before {
    color: #d2d6db;
    color: var(--wmds-gray-300)
}

.icon-eye-closed:hover::before, .icon-eye-closed:active::before, .icon-eye-closed:focus::before, .icon-eye:hover::before, .icon-eye:active::before, .icon-eye:focus::before, .icon-reload:hover::before, .icon-reload:active::before, .icon-reload:focus::before, .icon-question:hover::before, .icon-question:active::before, .icon-question:focus::before {
    color: #9da4ae;
    color: var(--wmds-gray-400)
}

.icon-round-cross::before {
    color: #d2d6db;
    color: var(--wmds-gray-300)
}

.icon-round-cross:hover::before {
    color: #F54848;
    color: var(--wmds-red-500)
}

.icon-round-cross:active::before, .icon-round-cross:focus::before {
    color: #D23442;
    color: var(--wmds-red-600)
}

.help-link {
    font-weight: 500;
    font-size: .875rem;
    line-height: 1.25rem;
    color: #6c737f;
    color: var(--wmds-gray-500);
    transition: .2s;
    border-radius: 3px;
    cursor: pointer;
}

    .help-link:hover {
        color: #0080D8;
        color: var(--wmds-blue-500)
    }

    .help-link:active, .help-link:focus {
        color: #4d5761;
        color: var(--wmds-gray-600)
    }

h1.title, h2.title {
    font-size: 1.25rem;
    line-height: 1.5rem;
    margin-bottom: 1 rem;
    color: #384250;
    color: var(--wmds-gray-700)
}

h1.title_center, h2.title_center {
    text-align: center
}

h1.title {
    font-weight: 700;
    margin-bottom: 0
}

h2.title {
    font-weight: 600
}

.error {
    border-radius: 1rem;
    background: #f9fafb;
    background: var(--wmds-gray-50);
    padding: 1.5rem;
    margin-bottom: 1.5rem
}

    .error p {
        font-weight: 500;
        font-size: 1rem;
        line-height: 1.5rem;
        letter-spacing: .01em;
        color: #384250;
        color: var(--wmds-gray-700);
        margin-bottom: .75rem
    }

        .error p:last-of-type {
            margin-bottom: 0
        }

.error_critical {
    background: #FFF9F6;
    background: var(--wmds-red-25)
}

    .error_critical p {
        color: #F54848;
        color: var(--wmds-red-500)
    }

.sum {
    margin-bottom: 2rem
}

.sum__hint {
    font-size: .875rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.25rem;
    color: #6c737f;
    color: var(--wmds-gray-500);
    margin-bottom: .75rem
}

.sum__total {
    color: #384250;
    color: var(--wmds-gray-700);
    font-size: 2rem;
    font-weight: 600;
    line-height: 1.5rem
}

.paper {
    padding: 1.5rem;
    border-radius: 16px;
    background: #f9fafb;
    background: var(--wmds-gray-50);
    margin-bottom: 1rem
}

.paper__text {
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5rem;
    letter-spacing: .16px;
    color: #6c737f;
    color: var(--wmds-gray-500);
    margin-bottom: 0
}

    .paper__text + .paper__text {
        margin-top: .75rem
    }

.paper__text_dark {
    color: #384250;
    color: var(--wmds-gray-700)
}

.form-buttons {
    margin-top: 40px;
    display: flex;
    align-items: center
}

    .form-buttons .wmds-btn {
        flex: 1
    }

        .form-buttons .wmds-btn:first-child {
            flex: 0 1 265px;
            margin-right: 1rem
        }

.form-buttons_wide {
    margin-top: 0
}

    .form-buttons_wide .wmds-btn {
        flex: 1
    }

        .form-buttons_wide .wmds-btn:first-child {
            flex: 1;
            margin-right: 0
        }

        .form-buttons_wide .wmds-btn + .form-buttons_wide .wmds-btn {
            margin-top: .25rem
        }

.wmds-btn {
    display: inline-block;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: calc(.625rem - 1px) calc(1rem - 1px);
    min-height: 32px;
    border-radius: .5rem;
    transition: 0.25s all;
    transition: var(--wmds-trans-dur) all;
    -webkit-text-decoration: none;
    text-decoration: none;
    outline: none;
    cursor: pointer;
    color: #ffffff;
    color: var(--wmds-white);
    background: rgba(0,0,0,0);
    border: 1px solid rgba(0,0,0,0);
    font-weight: 500;
    font-size: .875rem;
    line-height: 1.25rem
}

    .wmds-btn:focus-visible {
        box-shadow: 0 0 0 3px #99CCEF;
        box-shadow: 0 0 0 3px var(--wmds-blue-200)
    }

    .wmds-btn[disabled] {
        pointer-events: none;
        cursor: pointer;
        color: #9da4ae;
        color: var(--wmds-gray-400)
    }

    .wmds-btn > img, .wmds-btn > svg, .wmds-btn > .wmds-icon {
        flex-shrink: 0;
        width: 1.5rem;
        height: 1.5rem;
        margin: 0 .25rem
    }

        .wmds-btn > img path, .wmds-btn > svg path, .wmds-btn > .wmds-icon path {
            transition: 0.25s all;
            transition: var(--wmds-trans-dur) all
        }

.wmds-btn-text {
    margin: 0 .25rem
}

.wmds-btn-round {
    border-radius: 100%;
    padding: calc(.5rem - 1px)
}

    .wmds-btn-round > img, .wmds-btn-round > svg, .wmds-btn-round > .wmds-icon {
        margin: 0
    }

.wmds-btn.wmds-btn-icon {
    padding: calc(.5rem - 1px) calc(1rem - 1px)
}

.wmds-btn-s {
    padding: calc(.325rem - 1px) calc(.75rem - 1px)
}

    .wmds-btn-s.wmds-btn-icon {
        padding: calc(.25rem - 1px) calc(.75rem - 1px)
    }

.wmds-btn-l {
    padding: calc(.625rem - 1px) calc(1.25rem - 1px);
    font-size: 1rem;
    line-height: 1.5rem
}

    .wmds-btn-l.wmds-btn-icon {
        padding: calc(.625rem - 1px) calc(1.25rem - 1px)
    }

.wmds-btn-xl {
    padding: calc(.75rem - 1px) calc(1.75rem - 1px);
    font-size: 1rem;
    line-height: 1.5rem
}

    .wmds-btn-xl.wmds-btn-icon {
        padding: calc(.75rem - 1px) calc(1.75rem - 1px)
    }

    .wmds-btn-xl.wmds-btn-round {
        padding: calc(.75rem - 1px)
    }

.wmds-btn-xxl {
    padding: calc(.875rem - 1px) calc(2.5rem - 1px);
    font-size: 1.125rem;
    line-height: 2rem
}

    .wmds-btn-xxl.wmds-btn-icon {
        padding: calc(1.125rem - 1px) calc(2.5rem - 1px)
    }

.wmds-btn-primary {
    background: #0080D8;
    background: var(--wmds-blue-500);
    border: 1px solid #0080D8;
    border: 1px solid var(--wmds-blue-500)
}

    .wmds-btn-primary:hover {
        background: #006CB3;
        background: var(--wmds-blue-600);
        border: 1px solid #006CB3;
        border: 1px solid var(--wmds-blue-600)
    }

    .wmds-btn-primary:active {
        background: #005895;
        background: var(--wmds-blue-700);
        border: 1px solid #005895;
        border: 1px solid var(--wmds-blue-700)
    }

    .wmds-btn-primary[disabled] {
        background: #f3f4f6;
        background: var(--wmds-gray-100);
        border: 1px solid #f3f4f6;
        border: 1px solid var(--wmds-gray-100)
    }

.wmds-btn-primary-stroke {
    background: rgba(0,0,0,0);
    border: 1px solid #0080D8;
    border: 1px solid var(--wmds-blue-500);
    color: #0080D8;
    color: var(--wmds-blue-500)
}

    .wmds-btn-primary-stroke:hover {
        background: #0080D8;
        background: var(--wmds-blue-500);
        border: 1px solid #0080D8;
        border: 1px solid var(--wmds-blue-500);
        color: #ffffff;
        color: var(--wmds-white)
    }

    .wmds-btn-primary-stroke:active {
        background: #006CB3;
        background: var(--wmds-blue-600);
        border: 1px solid #006CB3;
        border: 1px solid var(--wmds-blue-600);
        color: #ffffff;
        color: var(--wmds-white)
    }

    .wmds-btn-primary-stroke[disabled] {
        background: #f3f4f6;
        background: var(--wmds-gray-100);
        border: 1px solid #e5e7eb;
        border: 1px solid var(--wmds-gray-200);
        color: #9da4ae;
        color: var(--wmds-gray-400)
    }

.wmds-btn-secondary-colored {
    border: 1px solid #F0F8FF;
    border: 1px solid var(--wmds-blue-25);
    background: #F0F8FF;
    background: var(--wmds-blue-25);
    color: #0080D8;
    color: var(--wmds-blue-500)
}

    .wmds-btn-secondary-colored:hover {
        background: #E6F2FB;
        background: var(--wmds-blue-50);
        border: 1px solid #E6F2FB;
        border: 1px solid var(--wmds-blue-50)
    }

    .wmds-btn-secondary-colored:active {
        background: #0080D8;
        background: var(--wmds-blue-500);
        border: 1px solid #0080D8;
        border: 1px solid var(--wmds-blue-500);
        color: #ffffff;
        color: var(--wmds-white)
    }

    .wmds-btn-secondary-colored[disabled] {
        background: rgba(243,244,246,.5);
        border: 1px solid rgba(243,244,246,.5)
    }

.wmds-btn-secondary-stroke {
    border: 1px solid #e5e7eb;
    border: 1px solid var(--wmds-gray-200);
    background: #ffffff;
    background: var(--wmds-white);
    color: #384250;
    color: var(--wmds-gray-700)
}

    .wmds-btn-secondary-stroke:hover {
        background: #F0F8FF;
        background: var(--wmds-blue-25);
        border: 1px solid #CCE6F7;
        border: 1px solid var(--wmds-blue-100)
    }

    .wmds-btn-secondary-stroke:active {
        background: #F0F8FF;
        background: var(--wmds-blue-25);
        border: 1px solid #CCE6F7;
        border: 1px solid var(--wmds-blue-100);
        color: #0080D8;
        color: var(--wmds-blue-500)
    }

    .wmds-btn-secondary-stroke[disabled] {
        border: 1px solid #e5e7eb;
        border: 1px solid var(--wmds-gray-200)
    }

.wmds-btn-tertiary-gray {
    border: 1px solid #ffffff;
    border: 1px solid var(--wmds-white);
    background: #ffffff;
    background: var(--wmds-white);
    color: #384250;
    color: var(--wmds-gray-700)
}

    .wmds-btn-tertiary-gray:hover {
        background: #f3f4f6;
        background: var(--wmds-gray-100);
        border: 1px solid #f3f4f6;
        border: 1px solid var(--wmds-gray-100)
    }

    .wmds-btn-tertiary-gray:active {
        background: #f3f4f6;
        background: var(--wmds-gray-100);
        border: 1px solid #f3f4f6;
        border: 1px solid var(--wmds-gray-100);
        color: #0080D8;
        color: var(--wmds-blue-500)
    }

.wmds-btn-tertiary-colored {
    border: 1px solid #ffffff;
    border: 1px solid var(--wmds-white);
    background: #ffffff;
    background: var(--wmds-white);
    color: #0080D8;
    color: var(--wmds-blue-500)
}

    .wmds-btn-tertiary-colored:hover {
        background: #F0F8FF;
        background: var(--wmds-blue-25);
        border: 1px solid #F0F8FF;
        border: 1px solid var(--wmds-blue-25)
    }

    .wmds-btn-tertiary-colored:active {
        background: #E6F2FB;
        background: var(--wmds-blue-50);
        border: 1px solid #E6F2FB;
        border: 1px solid var(--wmds-blue-50)
    }

.wmds-btn-link-colored {
    border: 1px solid rgba(0,0,0,0);
    background: rgba(0,0,0,0);
    color: #0080D8;
    color: var(--wmds-blue-500)
}

    .wmds-btn-link-colored:hover {
        color: #006CB3;
        color: var(--wmds-blue-600)
    }

    .wmds-btn-link-colored:active {
        color: #0080D8;
        color: var(--wmds-blue-500)
    }

.inputs {
    margin-top: 1rem;
    margin-bottom: 1.5rem
}

.input {
    margin-bottom: 1.5rem;
    position: relative
}

    .input input {
        border-radius: .5rem;
        border: 1px solid #e5e7eb;
        border: 1px solid var(--wmds-gray-200);
        min-height: 48px;
        transition: .2s all;
        width: 100%;
        padding: 0 2.25rem 0 .75rem;
        font-weight: 400;
        font-size: 1rem;
        line-height: 1.5rem;
        letter-spacing: .01em;
        color: #384250;
        color: var(--wmds-gray-700);
        text-overflow: ellipsis
    }

        .input input:hover {
            border-color: #0080D8;
            border-color: var(--wmds-blue-500);
            background: #F0F8FF;
            background: var(--wmds-blue-25)
        }

        .input input:focus {
            border-color: #0080D8;
            border-color: var(--wmds-blue-500);
            background: #ffffff;
            background: var(--wmds-white);
            outline: none
        }

            .input input:focus + label {
                color: #0080D8;
                color: var(--wmds-blue-500);
                font-size: .75rem;
                line-height: 1rem
            }

        .input input + label {
            position: absolute;
            top: 0;
            left: .75rem;
            display: inline-block;
            transform: translate(0, -50%);
            background: rgba(0,0,0,0);
            padding: 0 .375rem;
            transition: .2s all;
            font-weight: 400;
            font-size: .75rem;
            line-height: 1rem;
            letter-spacing: .01em;
            color: #6c737f;
            color: var(--wmds-gray-500);
            pointer-events: none;
            white-space: nowrap;
            max-width: calc(100% - 1.75rem);
            overflow: hidden
        }

            .input input + label:before {
                content: "";
                width: 100%;
                height: 1px;
                top: 50%;
                position: absolute;
                left: 0;
                background: #ffffff;
                background: var(--wmds-white);
                z-index: -1;
                height: 5px;
                transform: translate(0, -50%);
            }

        .input input.input-validation-error {
            border: 1px solid #F54848;
            border: 1px solid var(--wmds-red-500)
        }

            .input input.input-validation-error:hover {
                border: 1px solid #0080D8;
                border: 1px solid var(--wmds-blue-500)
            }

@supports selector(:placeholder-shown) {
    .input input.input-validation-error:not(:-moz-placeholder-shown) {
        border: 1px solid #F54848;
        border: 1px solid var(--wmds-red-500)
    }

    .input input.input-validation-error:not(:placeholder-shown) {
        border: 1px solid #F54848;
        border: 1px solid var(--wmds-red-500)
    }

    .input input.input-validation-error:not(:-moz-placeholder-shown) + label {
        color: #F54848;
        color: var(--wmds-red-500)
    }

    .input input.input-validation-error:not(:placeholder-shown) + label {
        color: #F54848;
        color: var(--wmds-red-500)
    }

    .input input.input-validation-error:not(:-moz-placeholder-shown):hover {
        border: 1px solid #0080D8;
        border: 1px solid var(--wmds-blue-500)
    }

    .input input.input-validation-error:not(:placeholder-shown):hover {
        border: 1px solid #0080D8;
        border: 1px solid var(--wmds-blue-500)
    }

    .input input.input-validation-error:not(:-moz-placeholder-shown):hover + label {
        color: #0080D8;
        color: var(--wmds-blue-500)
    }

    .input input.input-validation-error:not(:placeholder-shown):hover + label {
        color: #0080D8;
        color: var(--wmds-blue-500)
    }
}

.input input.input-validation-error:focus {
    border: 1px solid #0080D8;
    border: 1px solid var(--wmds-blue-500)
}

    .input input.input-validation-error:focus + label {
        color: #0080D8;
        color: var(--wmds-blue-500)
    }

@supports selector(:placeholder-shown) {
    .input input + label {
        transform: translate(0, 50%);
        font-size: 1rem;
        line-height: 1.5rem
    }

        .input input + label:before {
            background: rgba(0,0,0,0)
        }

    .input input:hover + label {
        color: #0080D8;
        color: var(--wmds-blue-500)
    }

    .input input:not(:-moz-placeholder-shown) + label {
        transform: translate(0, -50%);
        font-size: .75rem;
        line-height: 1rem
    }

    .input input:focus + label, .input input:not(:placeholder-shown) + label {
        transform: translate(0, -50%);
        font-size: .75rem;
        line-height: 1rem
    }

    .input input:not(:-moz-placeholder-shown) + label:before {
        background: #fff
    }

    .input input:focus + label:before, .input input:not(:placeholder-shown) + label:before {
        background: #fff
    }
}

.input_error input {
    border: 1px solid #F54848;
    border: 1px solid var(--wmds-red-500)
}

@supports selector(:placeholder-shown) {
    .input_error input:focus:not(:-moz-placeholder-shown) {
        border: 1px solid #0080D8;
        border: 1px solid var(--wmds-blue-500)
    }

    .input_error input:focus:not(:placeholder-shown) {
        border: 1px solid #0080D8;
        border: 1px solid var(--wmds-blue-500)
    }

    .input_error input:not(:-moz-placeholder-shown) {
        border: 1px solid #e5e7eb;
        border: 1px solid var(--wmds-gray-200)
    }

    .input_error input:not(:placeholder-shown) {
        border: 1px solid #e5e7eb;
        border: 1px solid var(--wmds-gray-200)
    }

    .input_error input:not(:-moz-placeholder-shown):hover {
        border: 1px solid #0080D8;
        border: 1px solid var(--wmds-blue-500)
    }

    .input_error input:not(:placeholder-shown):hover {
        border: 1px solid #0080D8;
        border: 1px solid var(--wmds-blue-500)
    }
}

.input_error .custom-select-container.is-open .custom-select-opener {
    border: 1px solid #0080D8;
    border: 1px solid var(--wmds-blue-500)
}

.input_error .custom-select-opener {
    border: 1px solid #F54848;
    border: 1px solid var(--wmds-red-500)
}

.input_disabled input {
    background: #f3f4f6;
    background: var(--wmds-gray-100)
}

    .input_disabled input:hover, .input_disabled input:focus {
        border: 1px solid #e5e7eb;
        border: 1px solid var(--wmds-gray-200);
        background: #f3f4f6;
        background: var(--wmds-gray-100)
    }

        .input_disabled input:hover + label, .input_disabled input:focus + label {
            color: #6c737f;
            color: var(--wmds-gray-500)
        }

    .input_disabled input + label::before {
        background: #e5e7eb;
        background: var(--wmds-gray-200)
    }

@supports selector(:placeholder-shown) {
    .input_disabled input:not(:-moz-placeholder-shown) + label {
        background: linear-gradient(180deg, #ffffff 50%, #f3f4f6 50%);
        background: linear-gradient(180deg, var(--wmds-white) 50%, var(--wmds-gray-100) 50%);
        color: #6c737f !important;
        color: var(--wmds-gray-500) !important
    }

    .input_disabled input:not(:placeholder-shown) + label {
        background: linear-gradient(180deg, #ffffff 50%, #f3f4f6 50%);
        background: linear-gradient(180deg, var(--wmds-white) 50%, var(--wmds-gray-100) 50%);
        color: #6c737f !important;
        color: var(--wmds-gray-500) !important
    }
}

.input_disabled .input__button-copy {
    display: none
}

.input_readonly input:hover, .input_readonly input:focus {
    border: 1px solid #e5e7eb;
    border: 1px solid var(--wmds-gray-200);
    background: #ffffff;
    background: var(--wmds-white)
}

    .input_readonly input:hover + label, .input_readonly input:focus + label {
        color: #6c737f;
        color: var(--wmds-gray-500)
    }

@supports selector(:placeholder-shown) {
    .input_readonly input:not(:-moz-placeholder-shown) + label {
        color: #6c737f !important;
        color: var(--wmds-gray-500) !important
    }

    .input_readonly input:not(:placeholder-shown) + label {
        color: #6c737f !important;
        color: var(--wmds-gray-500) !important
    }
}

.input_button-left input {
    padding-left: 2.625rem;
    padding-right: .75rem
}

.input_button-left .input__button {
    left: .75rem
}

.input__wrapper {
    position: relative;
    z-index: 1
}

    .input__wrapper .icon {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        right: .75rem
    }

.input__hint {
    font-weight: 400;
    font-size: .75rem;
    line-height: 1rem;
    color: #6c737f;
    color: var(--wmds-gray-500);
    margin-top: .5rem;
    transition: .2s;
    display: block;
    text-align: left
}

    .input__hint + .input__wrapper {
        margin-top: .375rem
    }

.input__button {
    display: block;
    background: none;
    border: none;
    padding: 0;
    width: 1.5rem;
    height: 1.5rem;
    cursor: pointer;
    outline: none;
    transition: .2s all;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: .75rem;
    color: #d2d6db;
    color: var(--wmds-gray-300)
}

    .input__button:hover {
        color: #9da4ae;
        color: var(--wmds-gray-400)
    }

.lang-select {
    position: relative
}

.lang-select_active .lang-select__list {
    max-height: 200px;
    opacity: 1;
    visibility: visible
}

.lang-select_active .lang-select__toggle::after {
    transform: rotate(180deg)
}

.lang-select__toggle {
    display: flex;
    align-items: center;
    font-weight: 500;
    font-size: .75rem;
    line-height: 1rem;
    color: #9da4ae;
    color: var(--wmds-gray-400);
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    outline: none;
    transition: .2s all;
    position: relative
}

    .lang-select__toggle::after {
        content: url(../images/icons/wm-ic-24-chevron-down.svg);
        width: 24px;
        height: 24px
    }

    .lang-select__toggle:hover {
        color: #0080D8;
        color: var(--wmds-blue-500)
    }

    .lang-select__toggle:focus-visible {
        transition: .2s all;
        box-shadow: 0 0 0 2px #99CCEF;
        box-shadow: 0 0 0 2px var(--wmds-blue-200);
        border-radius: 3px
    }

    .lang-select__toggle::before {
        content: "";
        width: 24px;
        height: 24px;
        margin-right: .5rem
    }

.lang-select__toggle-ru::before {
    background: url(../images/icons/langs/ru.svg) center center/contain no-repeat
}

.lang-select__toggle-en::before {
    background: url(../images/icons/langs/en.svg) center center/contain no-repeat
}

.lang-select__toggle-tr::before {
    background: url(../images/icons/langs/tr.svg) center center/contain no-repeat
}

.lang-select__toggle-es::before {
    background: url(../images/icons/langs/es.svg) center center/contain no-repeat
}

.lang-select__toggle-pt::before {
    background: url(../images/icons/langs/pt.svg) center center/contain no-repeat
}

.lang-select__toggle-vi::before {
    background: url(../images/icons/langs/vi.svg) center center/contain no-repeat
}

.lang-select__item a::before {
    content: "";
    width: 24px;
    height: 24px;
    margin-right: .5rem
}

.lang-select__item-ru a::before {
    background: url(../images/icons/langs/ru.svg) center center/contain no-repeat
}

.lang-select__item-en a::before {
    background: url(../images/icons/langs/en.svg) center center/contain no-repeat
}

.lang-select__item-tr a::before {
    background: url(../images/icons/langs/tr.svg) center center/contain no-repeat
}

.lang-select__item-es a::before {
    background: url(../images/icons/langs/es.svg) center center/contain no-repeat
}

.lang-select__item-pt a::before {
    background: url(../images/icons/langs/pt.svg) center center/contain no-repeat
}

.lang-select__item-vi a::before {
    background: url(../images/icons/langs/vi.svg) center center/contain no-repeat
}

.lang-select__list {
    z-index: 1;
    margin: 0;
    padding: 0;
    list-style: none;
    position: absolute;
    bottom: 100%;
    left: -14px;
    background-color: #ffffff;
    background-color: var(--wmds-white);
    border: 1px solid #e5e7eb;
    border: 1px solid var(--wmds-gray-200);
    box-shadow: 0px 0px 4px rgba(0,0,0,.1);
    border-radius: .375rem;
    transition: .2s all;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    visibility: hidden
}

    .lang-select__list::-webkit-scrollbar {
        width: 4px;
        background-color: #e5e7eb;
        background-color: var(--wmds-gray-200);
        border-radius: 3px;
        margin-left: 10px
    }

    .lang-select__list::-webkit-scrollbar-thumb {
        border-radius: 3px;
        background-color: #0080D8;
        background-color: var(--wmds-blue-500);
        cursor: pointer
    }

.lang-select__item {
    padding: .25rem .75rem;
    font-weight: 500;
    font-size: .75rem;
    line-height: 1rem;
    transition: .2s all
}

    .lang-select__item:hover, .lang-select__item:focus-within {
        background: #f3f4f6;
        background: var(--wmds-gray-100)
    }

.lang-select__item_active a {
    color: #0080D8;
    color: var(--wmds-blue-500)
}

.lang-select__item a {
    display: flex;
    align-items: center;
    color: #6c737f;
    color: var(--wmds-gray-500)
}

    .lang-select__item a:focus, .lang-select__item a:focus-visible {
        box-shadow: none;
        color: #0080D8;
        color: var(--wmds-blue-500)
    }

.wmds-collapse-item:not(:first-child) {
    border-top: none
}

.wmds-collapse-item .wmds-collapse-item {
    border: none
}

    .wmds-collapse-item .wmds-collapse-item .collapse-toggle {
        box-shadow: none
    }

.wmds-collapse-wrapper.collapsing {
    overflow: hidden;
    height: 0;
    transition: height .25s ease-in-out
}

.wmds-collapse-wrapper.collapsed {
    display: none
}

.wmds-collapse-toggle {
    position: relative;
    width: 100%;
    display: block;
    cursor: pointer
}

.wmds-collapse-body:has(.collapse__item) {
    padding-bottom: 0
}

.details {
    padding-bottom: .75rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid #e5e7eb;
    border-bottom: 1px solid var(--wmds-gray-200)
}

.details__toggle {
    display: flex;
    justify-content: space-between;
    align-items: center
}

    .details__toggle.active .details__sum {
        color: #6c737f;
        color: var(--wmds-gray-500)
    }

    .details__toggle.active .details__arrow::after {
        transform: rotate(180deg)
    }

.details__sum {
    color: #9da4ae;
    color: var(--wmds-gray-400);
    font-size: 1.25rem;
    font-weight: 400;
    line-height: 1.5rem;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    transition: 0.25s;
    transition: var(--wmds-trans-dur)
}

.details__arrow {
    color: #9da4ae;
    color: var(--wmds-gray-400);
    font-size: .875rem;
    font-weight: 400;
    line-height: 1.25rem;
    display: flex;
    align-items: center;
    flex-shrink: 0
}

    .details__arrow::after {
        content: url(../images/icons/wm-ic-24-chevron-down.svg);
        width: 24px;
        height: 24px
    }

.details__content {
    padding-top: 1rem
}

.details__dl {
    margin: 0
}

.details__dt {
    color: #9da4ae;
    color: var(--wmds-gray-400);
    font-size: .875rem;
    font-weight: 400;
    line-height: 1.25rem
}

.details__dd {
    margin: 0;
    color: #384250;
    color: var(--wmds-gray-700);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5rem;
    letter-spacing: .16px;
    margin-bottom: .5rem;
    word-break: break-word;
}

    .details__dd:last-child {
        margin-bottom: 0
    }

.payment-info {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    background: #F0F8FF;
    background: var(--wmds-blue-25)
}

.payment-info__col {
    flex: 1
}

    .payment-info__col h3 {
        color: #6c737f;
        color: var(--wmds-gray-500);
        font-size: .875rem;
        font-weight: 400;
        line-height: 1.25rem;
        margin-bottom: .375rem
    }

    .payment-info__col p {
        color: #384250;
        color: var(--wmds-gray-700);
        font-size: 1rem;
        font-weight: 600;
        line-height: 1.5rem;
        margin-bottom: 0;
        display: flex;
        align-items: center
    }

        .payment-info__col p img {
            width: 24px;
            height: 24px;
            margin-right: .375rem
        }

.custom-select-container {
    position: relative
}

    .custom-select-container.is-disabled {
        opacity: .333
    }

    .custom-select-container select {
        visibility: hidden;
        position: absolute;
        top: 0;
        left: 0
    }

    .custom-select-container.is-open .custom-select-panel {
        max-height: 224px;
        overflow-y: auto
    }

    .custom-select-container.is-open::after {
        transform: translateY(-50%) rotate(180deg)
    }

    .custom-select-container::after {
        pointer-events: none;
        content: url(../images/icons/wm-ic-24-chevron-down.svg);
        width: 24px;
        height: 24px;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        right: .75rem
    }

.custom-select-opener {
    display: flex;
    align-items: center;
    cursor: pointer;
    width: 100%;
    border-radius: .5rem;
    border: 1px solid #e5e7eb;
    border: 1px solid var(--wmds-gray-200);
    min-height: 48px;
    transition: .2s all;
    width: 100%;
    padding: 0 2.25rem 0 .75rem;
    font-weight: 400;
    font-size: 1rem;
    line-height: 1.5rem;
    letter-spacing: .01em;
    color: #6c737f;
    color: var(--wmds-gray-500)
}

    .custom-select-opener:hover {
        border-color: #0080D8;
        border-color: var(--wmds-blue-500);
        background: #F0F8FF;
        background: var(--wmds-blue-25)
    }

    .custom-select-opener:focus {
        border-color: #0080D8;
        border-color: var(--wmds-blue-500);
        background: #ffffff;
        background: var(--wmds-white);
        outline: none
    }

.custom-select-panel {
    max-height: 0;
    transition: max-height .2s, overflow-y .1s .5s;
    border-radius: 16px;
    background: #ffffff;
    background: var(--wmds-white);
    box-shadow: 0px 4px 4px 0px rgba(0,0,0,.12),0px 2px 8px 0px rgba(0,0,0,.1);
    overflow: hidden;
    position: absolute;
    top: calc(100% + .5rem);
    z-index: 1;
    width: 100%
}

.custom-select-option {
    cursor: pointer;
    margin: 0 1rem;
    padding: .5rem;
    border-radius: 6px;
    transition: .2s;
    margin-bottom: .25rem
}

    .custom-select-option.is-selected {
        color: #0080D8;
        color: var(--wmds-blue-500);
        background: #F0F8FF;
        background: var(--wmds-blue-25);
        position: relative
    }

        .custom-select-option.is-selected:before {
            content: "";
            border-radius: .5px;
            position: absolute;
            top: .5rem;
            left: 0;
            height: calc(100% - 1rem);
            width: 2px;
            background: #0080D8;
            background: var(--wmds-blue-500)
        }

    .custom-select-option:hover {
        background: #f3f4f6;
        background: var(--wmds-gray-100)
    }

    .custom-select-option:active {
        color: #0080D8;
        color: var(--wmds-blue-500)
    }

    .custom-select-option:first-child {
        margin-top: 1rem
    }

    .custom-select-option:last-child {
        margin-bottom: 1rem
    }

.custom-select-optgroup > .custom-select-option {
    padding-left: 2em
}

.custom-select-optgroup::before {
    content: attr(data-label);
    display: block;
    padding: .5em;
    color: #888
}

.steps {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    padding: 1.25rem;
    border: 2px solid #f3f4f6;
    border: 2px solid var(--wmds-gray-100);
    margin-bottom: 1.5rem
}

.steps__step {
    display: flex;
    align-items: center;
    margin-right: 2rem
}

    .steps__step img {
        margin-right: 2rem;
        width: 40px;
        height: 40px
    }

    .steps__step::after {
        content: "";
        width: 24px;
        height: 2px;
        background-color: #f3f4f6;
        background-color: var(--wmds-gray-100);
        display: block
    }

    .steps__step:last-child {
        margin-right: 0
    }

        .steps__step:last-child img {
            margin-right: 0
        }

        .steps__step:last-child::after {
            display: none
        }

.bank-card {
    border-radius: 28px;
    background: #f9fafb;
    background: var(--wmds-gray-50);
    box-shadow: 0px 0px 6px 0px rgba(17,25,39,.04),0px 4px 8px 0px rgba(17,25,39,.1);
    padding: 2.5rem;
    margin-bottom: 1.5rem
}

.bank-card__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem
}

.bank-card__input {
    margin-bottom: 1rem
}

    .bank-card__input .input {
        margin-bottom: 0
    }

.bank-card__system {
    margin-top: .25rem;
    width: 58px;
    height: 40px;
    -o-object-fit: cover;
    object-fit: cover;
    border-radius: 5px
}

.bank-card__bank-name {
    display: flex;
    align-items: center;
    min-width: 0
}

    .bank-card__bank-name img {
        margin-right: .375rem;
        /*width: 40px;*/
        height: 40px;
        border-radius: 100px;
        overflow: hidden;
        -o-object-fit: cover;
        object-fit: cover;
        flex-shrink: 0
    }

    .bank-card__bank-name span {
        color: #111927;
        color: var(--wmds-gray-900);
        font-size: 1rem;
        font-weight: 600;
        line-height: 1.5rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis
    }

.bank-card__footer {
    display: flex;
    justify-content: space-between;
    align-items: center
}

.bank-card__lang {
    width: 24px;
    height: 24px
}

    .bank-card__lang img {
        width: 100%;
        height: 100%;
        -o-object-fit: cover;
        object-fit: cover
    }

.payment-status {
    padding: 1.5rem 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem
}

.payment-status__title {
    color: #384250;
    color: var(--wmds-gray-700);
    text-align: center;
    font-size: 1.25rem;
    font-weight: 500;
    line-height: 1.5rem;
    margin-bottom: 1rem;
    max-width: 350px
}

.payment-status__hint {
    color: #6c737f;
    color: var(--wmds-gray-500);
    font-size: .875rem;
    font-weight: 400;
    line-height: 1.25rem;
    margin-top: 1.25rem;
    text-align: center
}

.payment-status__clock-hour {
    animation: 600s infinite linear rotate;
    transform-origin: center
}

.payment-status__clock-minute {
    animation: 10s infinite linear rotate;
    transform-origin: center
}

@keyframes rotate {
    from {
        transform: rotate(0deg)
    }

    to {
        transform: rotate(360deg)
    }
}

.styled-modal {
    display: none;
    position: fixed;
    z-index: 9998;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    transition: opacity 0.25s ease;
    transition: opacity var(--wmds-trans-dur) ease;
    background: rgba(56,66,80,.5);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    padding: 1rem .75rem
}

.styled-modal__wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% - 2rem);
    max-width: 556px;
    background: #ffffff;
    background: var(--wmds-white);
    border-radius: 20px;
    padding: 2.5rem
}

.styled-modal__header {
    display: flex;
    align-items: center;
    margin-bottom: 1.5rem
}

    .styled-modal__header h2 {
        color: #384250;
        color: var(--wmds-gray-700);
        font-size: 1.25rem;
        font-weight: 600;
        line-height: 1.5rem;
        margin-bottom: 0
    }

.styled-modal__close {
    width: 24px;
    height: 24px;
    border: none;
    transition: .25s all;
    margin-left: auto;
    flex-shrink: 0;
    background: none;
    cursor: pointer;
    color: #9da4ae;
    color: var(--wmds-gray-400);
    padding: 0;
}

    .styled-modal__close:hover {
        color: #6c737f;
        color: var(--wmds-gray-500)
    }

    .styled-modal__close:active {
        color: #4d5761;
        color: var(--wmds-gray-600)
    }

    .styled-modal__close svg, .styled-modal__close img {
        pointer-events: none
    }

.styled-modal__content p {
    font-size: 1rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.5rem;
    letter-spacing: .16px;
    margin-bottom: 1.5rem
}

.styled-modal__footer {
    margin-top: 2.5rem
}

@media(max-width: 576px) {
    .content {
        padding: 2rem 1.5rem;
        min-height: auto
    }

    .bank-card {
        padding: 1.5rem
    }

    .styled-modal__wrapper {
        padding: 1.5rem 1rem
    }
}

@media(max-width: 425px) {
    .header__logo {
        background: url(../images/logo-cut.svg) center center/contain no-repeat;
        width: 140px
    }

    .content {
        padding: 1.5rem 1rem
    }

    .content__footer {
        padding-top: 40px
    }

    .steps__step {
        margin-right: 1rem
    }

        .steps__step img {
            margin-right: 1rem
        }

    .bank-card {
        padding: 1rem
    }

    .bank-card__header, .bank-card__input {
        margin-bottom: 1rem
    }

    .form-buttons {
        flex-direction: column
    }

        .form-buttons .wmds-btn {
            width: 100%
        }

            .form-buttons .wmds-btn:first-child {
                margin-right: 0;
                flex: 1
            }

            .form-buttons .wmds-btn + .form-buttons .wmds-btn {
                margin-top: .25rem
            }

    .payment-info {
        flex-wrap: wrap;
        align-items: flex-start
    }

    .payment-info__col {
        flex: 0 1 100%
    }
}

/* Banks */

ul.banks {
    margin: 0;
    padding: 0;
    overflow: hidden;
}

    ul.banks li {
        float: left;
        margin: 0 40px 0 0;
        padding: 0;
        list-style: none;
    }
    .lang-select__toggle::after {
    display: none !important; /* убираем псевдоэлемент со стрелкой */
}

.lang-select__toggle {
    background-image: none !important; /* если стрелка была фоном */
}