.login-logo {
    width: auto;
    margin: 50px 0 25px 0;
    text-align: center;
}

    .login-logo img {
        height: auto;
        width: 200px;
        display: inline-block;
    }

.login {
    width: 400px;
    margin: 0 auto;
    font-size: .9rem;
    line-height: .9rem;
    background: var(--color-lightest);
    white-space: nowrap;
    border-radius: 20px;
}

    .login h1 {
        font-size: 1.1rem;
        line-height: 1.1rem;
        letter-spacing: normal;
        color: var(--color-lightest);
        font-weight: 600;
        margin: 0;
        background: var(--color-1);
        padding: 15px;
        border-top-right-radius: 20px;
        border-top-left-radius: 20px;
        display: block;
        text-align: center;
    }

    .login .fields {
        padding: 20px;
    }

        .login .fields input[type='text'],
        .login .fields input[type='password'],
        .login .fields input[type='email'],
        .login .fields input[type='number'] {
            width: 100%;
            margin-bottom: 10px;
            display: block;
        }

        .login .fields input[type='checkbox'] {
            margin-top: 10px;
            width: 16px;
            height: 16px;
        }

        .login .fields label {
            margin: 0 0 0 10px;
            position: relative;
            top: -4px;
        }

        .login .fields .button {
            float: right;
            background-repeat: no-repeat;
            background-position: center;
            background-size: 16px 16px;
        }

    .login .alert-box {
        top: 0;
    }

p.login-help {
    font-size: .9rem;
    line-height: 1.1rem;
    margin: 20px auto;
    position: relative;
    text-align: center;
    width: auto;
}

/* Login page has no nav sidebar, so center the register modal in the viewport
   (overrides the nav-offset left calc in modal.css) and match the login card width. */
.login.modal.modal-small {
    left: 50%;
    width: 300px;
    min-width: 300px;
}

/* Instance picker shown inside the login card when a sign-in matches more than one client database. */
.login .instance-list {
    padding: 20px;
}

.login .instance-filter {
    width: 100%;
    margin-bottom: 15px;
    display: block;
}

.login .instance-help {
    margin: 0 0 15px 0;
    font-size: .9rem;
    line-height: 1.1rem;
    white-space: normal;
    text-align: center;
}

.login .instance-item {
    display: block;
    width: 100%;
    margin-bottom: 10px;
    padding: 12px 15px;
    text-align: left;
    background: var(--color-lightest);
    border: 1px solid var(--color-light);
    border-radius: var(--button-radius);
    cursor: pointer;
    font-size: .9rem;
    line-height: 1.1rem;
    white-space: normal;
}

    .login .instance-item:hover {
        background: var(--color-2);
        color: var(--color-lightest);
    }

    .login .instance-item:disabled {
        opacity: .6;
        cursor: default;
    }

    .login .instance-item.loading {
        position: relative;
        cursor: wait;
        opacity: .8;
        color: transparent;
    }

        .login .instance-item.loading::after {
            content: "\f3f4";
            display: inline-block;
            position: absolute;
            top: 50%;
            left: 15px;
            transform: translateY(-50%);
            font-family: var(--font-icon);
            font-weight: 500;
            color: var(--color-1);
            animation: spin 1s infinite linear;
        }

.login .instance-back {
    margin: 15px 0 0 0;
    text-align: center;
    font-size: .9rem;
    line-height: 1.1rem;
    white-space: normal;
}