/* login2.css
   variante della pagina di accesso: foto a tutta pagina, modulo al centro
   senza riquadro e una fascia scura solo in fondo, dietro alla frase.
   Si usa al posto di login.css, non insieme 
*/

body.authentication-bg {
    background: url("/imagesgas/login.jpg") center center / cover no-repeat;
    min-height: 100vh;
}

body.authentication-bg {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

body.authentication-bg .account-pages {
    flex: 1 0 auto;
    min-height: auto;
    padding: 3rem 0;
}

body.authentication-bg .account-pages > .container {
    width: 100%;
}

.account-pages .col-login {
    max-width: 30rem;
}

.account-pages .card {
    background-color: rgba(0, 0, 0, 0.45);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.45);
}

/* logo del gruppo dentro al riquadro senza deformarlo */
.account-pages .auth-brand img {
    border-radius: 0.3rem;
    height: auto;
    max-width: 100%;
}

.account-pages .card,
.account-pages .card h2,
.account-pages .card h4,
.account-pages .card .form-label,
.account-pages .card a {
    color: #fff;
}

.account-pages .card .text-muted {
    color: rgba(255, 255, 255, 0.85) !important;
}

.account-pages .card .alert a {
    color: var(--ct-alert-link-color);
}

.account-pages .card .alert .text-muted {
    color: var(--ct-alert-color) !important;
}

.login-frase {
    flex: 0 0 auto;
    z-index: 1;
    padding: 5rem 1.5rem 2rem;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
    background-image: linear-gradient(to top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
    pointer-events: none;
}

@media (max-height: 860px), (max-width: 575.98px) {

    body.authentication-bg .account-pages {
        flex: 0 0 auto;
    }

    .login-frase {
        padding: 2rem 1.5rem;
        background-image: linear-gradient(to bottom,
                          rgba(0, 0, 0, 0),
                          rgba(0, 0, 0, 0.55) 25%,
                          rgba(0, 0, 0, 0.55) 75%,
                          rgba(0, 0, 0, 0));
    }
}

@media (max-width: 575.98px) {

    body.authentication-bg .account-pages {
        align-items: flex-start;
        padding: 1.5rem 0 0;
    }

    .account-pages .card-body {
        padding: 1.5rem !important;
    }
}