:root {
    --color-light-neutral-translucent-1300: rgba(3, 3, 6, 0.88);
    --color-light-neutral-translucent-700: rgba(4, 4, 21, 0.47);
    --color-light-text-secondary: rgba(4, 4, 19, 0.55);
}
:root {
    --border-radius-12: 12px;
}
:root {
    --gap-0: 0px;
    --gap-4: 4px;
    --gap-12: 12px;
    --gap-16: 16px;
    --gap-20: 20px;
}
:root {
    --font-family-system:
        system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, sans-serif;
}
.component {
    position: relative;
    max-width: 343px;

    .formControl {
        .field {
            background-color: transparent;
        }
    }
}
@media (hover: hover) {
.component {

    .formControl {
        .field:hover {
                background-color: transparent;
        }
    }
}
    }
.component {

    .formControl {

            .field:before {
                border-bottom: 1px solid var(--color-light-neutral-translucent-700);
            }
    }

        .formControl.focused {
            .field {
                box-shadow: none;
            }
        }
}
@media (hover: hover) {
.component {

        .formControl.focused {
        .field:hover {
                    box-shadow: none;
        }
        }
}
    }
.component {

        .formControl.focused {
                .field:before {
                    border-bottom: 1px solid var(--color-light-neutral-translucent-1300);
                }
        }
}
.aspectRatioContainer {
    padding-bottom: 63%;
}
.content {
    position: absolute;
    top: var(--gap-0);
    right: var(--gap-0);
    bottom: var(--gap-0);
    left: var(--gap-0);
    display: flex;
    align-items: center;
    padding-left: var(--gap-20);
    padding-right: var(--gap-20);
    border-radius: var(--border-radius-12);
    box-sizing: border-box;
}
.label {
    left: var(--gap-0);
    transform: translateY(-3px);
    color: var(--color-light-text-secondary);

    transition:
        font-size 0.2s ease,
        line-height 0.2s ease,
        transform 0.2s ease;
    font-size: 20px;
    line-height: 28px;
    font-weight: 400;
    font-family: var(--font-family-system);
}
.focused .label,
.filled .label {
    color: var(--color-light-neutral-translucent-1300);
    transform: translateY(calc(-100% - 5px));

    font-size: 12px;

    line-height: 16px;

    font-weight: 400;

    font-family: var(--font-family-system);
}
.focused:before {
    transform: scale(1) !important;
}
.input {
    font-size: 20px;
    line-height: 28px;
    font-weight: 400;
    font-family: var(--font-family-system);

    color: var(--color-light-neutral-translucent-1300);
    caret-color: var(--color-light-neutral-translucent-1300);
    padding-left: var(--gap-0) !important;
    padding-bottom: 5px !important;
}
.bankLogo {
    position: absolute;
    top: var(--gap-16);
    left: var(--gap-16);
}
.bankLogo svg {
        display: block;
    }
.bankLogo svg g {
            fill: var(--color-light-neutral-translucent-1300);
        }
.brandLogo {
    position: absolute;
    bottom: var(--gap-20);
    right: var(--gap-20);
}
.brandLogo svg {
        display: block;
        fill: var(--color-light-neutral-translucent-1300);
    }
.usePhoto {
    display: block;
    margin: var(--gap-0);
    padding: var(--gap-0);
    text-decoration: none;
    background-color: transparent;
    border: 0;
    box-shadow: none;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
    cursor: pointer;
    outline: none;
    margin-bottom: var(--gap-4);
    align-self: flex-end;
    margin-right: calc(var(--gap-12) * -1);
}
.usePhoto svg {
        fill: var(--color-light-neutral-translucent-1300);
        display: block;
    }