.form-bg{
    background-color: #f6f6f6;
}

.login-img {
    width: 90%;
}
.authfy-login{
    width: 70%;
}
.btn-color{
    background-color: #0273cf;
}
.btn-color:hover{
    background-color: #015eab;
}

/* ============================================================
   Responsive login (<= 991.98px)

   The two panels sit side by side on desktop. Stacked on a
   phone the branding panel's vh-100 adds a whole blank screen
   between the form and the logo, so it is relaxed to auto here.
   Desktop is untouched.
   ============================================================ */
@media (max-width: 991.98px) {

    .authfy-login {
        width: 100%;
        padding: 0 1rem;
    }

    /* Kill the full-viewport branding panel when stacked */
    .vh-100 {
        height: auto !important;
        min-height: 0 !important;
        padding: 1.5rem 1rem !important;
    }

    .login-img {
        width: 60%;
        max-width: 220px;
        height: auto;
    }

    /* 16px avoids iOS zooming in on focus */
    .form-control,
    input[type="text"],
    input[type="password"],
    input[type="email"],
    input[type="tel"] {
        font-size: 16px !important;
        min-height: 46px;
    }

    .btn-color,
    button[type="submit"] {
        min-height: 46px;
    }

    /* "Remember me" / "Forgot password" stop colliding */
    .remember-row {
        margin-top: 1.25rem !important;
    }

    .remember-row > [class*="col-"] {
        width: 100%;
        float: none;
        text-align: center;
        margin-bottom: .35rem;
    }

    img {
        max-width: 100%;
    }
}

@media (max-width: 575.98px) {

    .authfy-login {
        padding: 0 .75rem;
    }

    .login-img {
        width: 52%;
    }
}