/* ========== Login Card ========== */
.login-wrapper {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding-top: var(--spacing-24);
}

.login-card {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
    text-align: left;
    width: 420px;
}

.login-form-container{
    padding: unset;
    background: unset;
}

.logo-container {
    text-align: left;
    margin-top: var(--spacing-1_5);
    margin-bottom: var(--spacing-6);
}

.remember-me-container {
    display: flex;
    align-items: center;
    gap:var(--spacing-3);
    height: fit-content;
    width: inherit;
}

.remember-me-container label {
    font-family: var(--font-display);
    font-size: var(--text-sm-regular-size);
    line-height: var(--text-sm-regular-line);
    font-weight: 400;
    color: var(--login-form-text);
}

/* eye icon for showing and hiding password */
.password-field-eye-icon {
    float: right;
    transform: translateX(-100%);
    margin-top: 3px;
    position: relative;
    z-index: 2;
    color: var(--color-disabled);
    width: 50px;
    height: 0px;
}

.toggle-password {
    position: absolute;
    top: 25%;
    right: -55px;
    cursor: pointer;
}

.terminal-id-input{
    anchor-name: --login-form-terminal-id-input;
}

.terminal-info-icon {
    position: absolute;
    position-anchor: --login-form-terminal-id-input;
    position-area: top right;
    transform: translateX(-30px);
    color: var(--color-disabled);
    z-index: 2;
}