.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;
    }