#login {
    text-align: center;
    margin-top: 1.25rem;
}

#main {
    min-height: 22rem;
}

.login-card-row {
    margin-top: 3rem;
    padding-bottom: 3rem;
}

.login-card {
    max-width: 34rem;
    margin: 0 auto;
    padding: 1.75rem 2rem 1.25rem;
    border: 1px solid rgba(255, 255, 255, .8);
    border-radius: .5rem .5rem 0 0;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 .75rem 2rem rgba(27, 67, 91, .2);
}

.login-card h1 {
    margin: 0 0 1.25rem;
    color: #164b67;
    font-size: 1.65rem;
    font-weight: 700;
    text-align: center;
}

.login-form input[type="email"],
.login-form input[type="password"] {
    height: 2.85rem;
    border-radius: .3rem;
    background-color: #fff;
}

.login-submit {
    display: block;
    width: 100%;
    margin: .75rem 0 .5rem;
    background-color: #087da3;
    font-size: 1rem;
    font-weight: 700;
}

.login-submit:hover,
.login-submit:focus {
    background-color: #066887;
}

.login-recovery {
    margin-top: .75rem;
    text-align: center;
}

.login-signup-cta {
    max-width: 34rem;
    margin: 0 auto 1.5rem;
    padding: .9rem 1.25rem;
    border-radius: 0 0 .5rem .5rem;
    background: #2e7081;
    box-shadow: 0 .5rem 1.25rem rgba(27, 67, 91, .14);
    color: #fff;
    text-align: center;
}

.login-signup-cta a {
    margin-left: .35rem;
    color: #fff;
    font-weight: 700;
    text-decoration: underline;
}

.user-quick-links {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.65rem;
}

.user-quick-links .username {
    margin-top: 0;
}

/* Top bar: keep the username vertically centred without squeezing the course button. */
.user-quick-links #quick {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.65rem;
}

.user-quick-links #quick > .columns {
    width: auto;
    float: none;
    padding: 0;
}

.user-quick-links #quick .username {
    display: block;
    float: none;
    min-height: 50px;
    max-width: 16rem;
    margin-top: 0;
    overflow: hidden;
    line-height: 50px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-quick-links #quick .buy {
    white-space: nowrap;
}

#island li.island-label-visible {
    display: inline;
}

.message {
    margin: 0.75rem 0;
    padding: 0.75rem 1rem;
    border: 1px solid #f0c36d;
    background: #fff8e5;
    color: #6b4f00;
}

.message.error {
    border-color: #e7a3a3;
    background: #fff0f0;
    color: #8a1f11;
}

@media (max-width: 40rem) {
    .login-card-row {
        margin-top: 1.5rem;
        padding-bottom: 1.75rem;
    }

    .login-card {
        padding: 1.25rem 1rem 1rem;
    }

    .login-signup-cta a {
        display: block;
        margin: .35rem 0 0;
    }
}