body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--l);
}

.ioe-login {
    --c: var(--io-red);
}
.ioe-login .btn {
    width: 100%;
}

.card-login {
    max-width: 384px;
    padding: var(--l) var(--l) var(--s) var(--l);
}
/* "Please sign in to access your iungo app." */
.login-text {
    padding: 0 0 var(--s) 0;
    line-height: 1.5; 
}
/* error message container */
.error {
    border: 1px solid white;
    padding: var(--btn-padding);
    border-radius: 8px;
    margin-bottom: 20px;
}
.error.error--display {
    border-color:     #f5c6cb;
    background-color: #f8d7da;
    color:            #dc3545;
}
/* password input */
.password-wrapper {
    position: relative; 
}
.eye-icon {
    position: absolute;
    top: 2px;
    right: 12px;
    cursor: pointer;
    opacity: 0.4;
    font-size: 18px;
    user-select: none;
}
/* copyright */
.login-legal {
    font-size: var(--font-size--s);
    color: var(--lightgrey);
    text-align: center;
    padding: var(--s) 0;
}
/* card pointing to iungo.gmbh */
.card-public {
    max-width: 384px;
    padding: var(--m) var(--l);
    display: flex;
    flex-direction: column;
    align-items: center;
}