/*
    We use `postcss-cli` with `autoprefixer` to prefix the CSS:
    `BROWSERSLIST="last 2 versions, > 0.5%" postcss hq_styles.css -r -u autoprefixer --verbose --no-map`

    install related packages
    `yarn global add postcss-cli autoprefixer postcss`
*/

.login-form-area {
    background-color:#EFF3F4;
}

@media screen and (max-width: 1023px) {
    .login-form-area {
        background-color: transparent;
    }
}

.login-logo {
    margin: 0 auto 8px;
}

.hq-login-title {
    margin-top: 12px;
    margin-bottom: 24px;
    font-style: normal;
    font-weight: bold;
    font-size: 18px;
    line-height: 21px;
    color: #0099B5;
}

.form-control {
    border: 1px solid #C4C4C4;
    color: #454F5B;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.form-control input::-webkit-input-placeholder {
    color: #A8B1BB;
}

.form-control input::-moz-placeholder {
    color: #A8B1BB;
}

.form-control input:-ms-input-placeholder {
    color: #A8B1BB;
}

.form-control input::-ms-input-placeholder {
    color: #A8B1BB;
}

.form-control input::placeholder {
    color: #A8B1BB;
}

.form-control.error {
    border: 1px solid #D84F4F;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.form-control:hover, .form-control:focus-within {
    -webkit-box-shadow: 0 0 4px #48B4C2;
    box-shadow: 0 0 4px hsl(187, 50%, 52%);
}

.form-control:hover {
    border: 2px solid rgba(0, 153, 181, 0.6);
}

.form-control:focus-within, .form-control.error:focus-within {
    color: #454F5B;
    background-color: #ffffff;
    outline: 0;
    border: 2px solid #0099B5;
}

.login-form .btn-login {
    background-color: #0099B5;
}

.login-form .btn-login:hover {
    background-color: #008092;
}

.login-form .btn-login:active {
    background-color: #008092;
}

.login-form .btn-login:focus {
    background-color: #006A78;
}

.alert-error {
    color: #D84F4F;
}

.login-footer {
    color: #A8B1BB;
}

#reset-password-button-container > .reset-password-link {
    color: #0099B5;
}

.login-switch > a {
    color: #0099B5;
}