.login {
    --brand-hex: #00678a;
}

#login h1 a {
    background-image: url('../images/chs-logo.png');
    background-size: contain;
    height: 84px;
    padding: 0;
    width: 100%;
}

body.login {
    background-color: #fdfdfd;
}

body.login div#login {
    width: 400px;
}

body.login div#login form#loginform {
    border-radius: 0.4rem;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px -1px rgba(0, 0, 0, .1);
    border: 1px solid rgb(228, 228, 231);
}


body.login p.submit input {
    background-color: var(--brand-hex);

    &:hover {
        background-color: var(--brand-hex);
        opacity: 0.9;
    }
}

span.dashicons.dashicons-visibility {
    color: var(--brand-hex);
}

span.dashicons.dashicons-hidden {
    color: var(--brand-hex);
}

.login .button.wp-hide-pw:focus {
    border-color: #00678a !important;
    box-shadow: 0 0 0 1px #00678a !important;
}

.login input[type=password]:focus {
    border-color: var(--brand-hex);
    box-shadow: 0 0 0 1px var(--brand-hex);
}

.login input[type=text]:focus {
    border-color: #00678a !important;
    box-shadow: 0 0 0 1px #00678a !important;
}

.login form input[type=checkbox]:checked {
    border-color: var(--brand-hex);
    box-shadow: 0 0 0 1px var(--brand-hex);
}

.login .submit #wp-submit:focus {
    box-shadow: 0 0 0 1px #fff, 0 0 0 3px var(--brand-hex);
}

.login #backtoblog a:hover,
.login #nav a:hover,
.login h1 a:hover {
    color: var(--brand-hex);
}

.login .message, .login .notice {
    border-left: 4px solid var(--brand-hex);
}