body {
    background-color: var(--bg-alt);
}
#layout {
    padding-left: 0;
    text-align: center;
}
#header {
    padding-top: 0;
}
#header h1 {
    background-color: var(--primary);
    color: var(--white);
    padding: 10px 20px;
    height: auto;
}
#content {
    position: static;
    margin: 0;
}
#content h3 {
    text-align: center;
    color: var(--primary);
}
#alma-logo {
    display: block;
    margin: 2em;
}
@media (min-height: 800px) {
    #content h3 {
        margin-top: 3em;
    }
    #alma-logo {
        position: absolute;
        bottom: 0;
        right: 0;
    }
}
.reset-password {
    text-decoration: underline;
    color: var(--light-blue);
}
.login-form {
    background: var(--bg);
    border-radius: 5px;
    border: 2px solid var(--border-color);
    box-sizing: border-box;
    margin: 0 auto;
    max-width: 24rem;
    overflow: hidden;
    padding: 1rem 2rem;
    text-align: left;
    width: calc(100% - 3em);
}
.login-form .or {
    border-bottom: var(--border-dark);
    line-height: 0;
    margin: 2em 0;
    text-align: center;
}
.login-form .or span {
    background-color: var(--bg);
    color: var(--text-alt);
    font-size: 16px;
    height: 1em;
    padding: 0 0.5em;
}
.login-form .hint {
    color: var(--text-alt);
    font-size: 80%;
}
.login-form button {
    display: block;
    margin: 0 auto;
    width: calc(100% - 1rem);
}
.login-form label span {
    color: var(--text-alt);
    font-size: 90%;
    margin: 0 0 0 0.2rem;
}
.login-form input[type="text"],
.login-form input[type="email"],
.login-form input[type="password"] {
    font-size: 1.125rem;
}
/* fancy login input labels for browsers that support them */
@supports selector(:has(+ *)) and selector(&) {
    .login-form label:has(input:is([type="text"], [type="email"], [type="password"])):has(>span:first-child) {
        position: relative;
        margin-top: 1.5rem;
        & span {
            pointer-events:  none;
            position: absolute;
            top: 50%;
            left: 0.4em;
            font-size: 1rem;
            padding: 0 0.2rem;
            transform: translateY(-50%);
            transition: all 0.2s;
        }
        & input:focus {
            border: 1px solid var(--blue-dark) !important;
            box-shadow: none;
        }
        &:focus-within span {
            color: var(--blue-dark);
        }
        &:focus-within span,
        &:has(input:is(:valid, :disabled)) span {
            background: #fff;
            border-radius: 0.5rem;
            font-size: 90%;
            top: 0;
        }
    }
}
/* third party login buttons */
.third-party-logins {
    text-align: center;
}
.third-party-login {
    display: inline-block;
    margin: 0.5em;
    white-space: nowrap;
}
.third-party-login:hover,
.third-party-login:focus {
    outline: none;
    text-decoration: none;
    box-shadow: 0 0 2px rgba(0,0,0,0.12), 0 2px 2px rgba(0,0,0,0.24), 0 0 0 3px rgba(66, 133, 244, 0.3);
}
.third-party-login:active {
    box-shadow: 0 0 2px rgba(0,0,0,0.12), 0 2px 2px rgba(0,0,0,0.24);
}
.third-party-login img {
    float: left;
    padding: 8px;
    background-color: #fff;
}
.third-party-login span {
    font-size: 13px;
    margin: 0 10px;
    line-height: 37px;
}
.google-sign-in {
    font-family: 'roboto', sans-serif;
    border: 1px solid #4285f4;
    background-color: #4285f4;
    color: #fff;
}
.google-sign-in:active {
    background-color: #3367D6;
}
.google-sign-in img {
    width: 21px;
}
.ms-sign-in {
    font-family: 'Segoe UI Regular', sans-serif;
    border: 1px solid #8c8c8c;
    background-color: #fff;
    color: #5e5e5e;
}
.ms-sign-in span {
    font-weight: 600;
    margin-left: 0;
}