/* =======================================================================
  Login-Formular
========================================================================== */

/* Wrapper: Zentrieren des Formulars auf der Seite (div)*/
#login-wrapper {
    display: flex;
    padding: 0 10%;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

/* Gesamte Box (div)*/
#login-box {
    width: 360px;
    border: 2px solid darkgrey;
    background-color: #fff;
    border-radius: 2px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2),
                0 4px 6px rgba(0, 0, 0, 0.1);
    padding: 20px;
    box-sizing: border-box;
}

/* Logo-Bild (img) */
#login-logo {
  width: 100%;
  height: auto;
  display: block;
  margin: 0 auto 10px auto;
}

/* Titel-Zeile (div) */
#login-main {
    font-size: 24px;
    text-align: center;
    margin-top: 20px;
    color: var(--color-font-main);
}

/* Status-Zeile (div) */
#login-status {
    text-align: center;
    margin: 10px 0;
}

/* Wrapper eigentliches Formular (div) */
.login-form
{
    padding: 15px;
}

/* Flex-Zeile für Passwort-Label + Link */
.input-label-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-top: 10px;
}

/* Labels: ├ťber dem Feld */
.flat-label {
    display: block;
    font-size: 14px;
    color: var(--color-font-label);
    margin-bottom: 4px;
}

/* Inputs: Text */
  .flat-text {
    width: 100%;
    padding: 8px;
    box-sizing: border-box;
    margin-bottom: 12px;
    border: 1px solid #ccc;
    border-radius: 2px;
}

/* ========================================================== */
/* Passwort vergessen (Link)
/* ========================================================== */

.login-reset-password-link {
    font-size: 12px;
    color: #039ee6;
    text-decoration: none;
}

.login-reset-password-link:hover {
    text-decoration: underline;
}


/* ========================================================== */
/* Registrieren (Link)
/* ========================================================== */

#login-register-link {
    margin: 10px auto;
    font-size: 14px;
    color: #039ee6;
    text-decoration: none;
}

#login-register-link:hover {
    text-decoration: underline;
}



.login-button {
    width: 100%;
    padding: 10px;
}

.login-button {
    width: 100%;
    padding: 10px;
}