.login-site {
    background-image: url("../img/bgetem_login_large_web.jpg");
    background-size: cover;
    background-position: left center;
    min-height: 80vh;
}

#kc-header, #kc-username, .kc-login-tooltip, .subtitle {
    display: none;
}

.pf-m-warning {
    padding: .75rem 1.25rem;
    border-radius: 0.25rem;
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
}

.pf-m-danger {
    padding: .75rem 1.25rem;
    border-radius: 0.25rem;
    margin-top: 1.5rem;
    background-color: #f8d7da;
    border-color: #f5c6cb;
    color: #721c24;
    margin-bottom: 1.5rem;
}


/* For the password component */
.progress-bar {
     width: 0;
 }

/* For Ultra-Wide, only works in newer Browsers */
@media (min-aspect-ratio: 21/9) {
    .login-site {
        min-height: 85vh;
    }
}

/* For Devices like iPad Pro */
@media screen and (max-width: 1024px) {
    .login-site {
        background-position: -125px center;
        min-height: 60vh;
    }
}

/* For Devices like iPad Air */
@media screen and (max-width: 820px) {
    .login-site {
        background-position: -150px center;
        min-height: 60vh;
    }
}

/* For Devices like iPad Mini */
@media screen and (max-width: 767px) {
    .login-site {
        background: unset;
    }
}

/* For mobile Devices like iPhone */
@media screen and (max-width: 576px) {
    .login-site {
        min-height: unset;
    }

    .login-site .card {
        border: unset!important;
        box-shadow: unset!important;
    }

    .login-site .card-body {
        padding-top: 10px;
        padding-bottom: 10px;
    }
}