html, body {
    height: 100%;
    margin: 0;
    display: flex;
    flex-direction: column;
}

.page {
    flex: 1;
    display: block;
    /*display: flex;*/
    flex-direction: column;
    align-items: center;
    padding: 20px;
}

.page-content {
    width: 100%;
    max-width: 400px;
    box-sizing: border-box;
}

/* Center the content on smaller screens */
@media (max-width: 768px) {
    .page {
        display: block;
    }
}

/* Fix the content to the bottom on larger screens */
@media (min-width: 769px) {
    .page {
        justify-content: flex-end;
    }
}

form {
    width: 100%;
}

footer {
    text-align: center;
    width: 100%;
    margin-top: auto;
}

.page-login {
    color: #ffffff;
}

/*.page-login:before {
    position: fixed;
    top: 0;
    left: 0;
    content: '';
    width: 100%;
    height: 100%;
    background-image: url("../images/login-bg.jpg");
    background-position-y: top;
    -webkit-background-size: cover;
    background-size: cover;
    z-index: -1;
}*/

.page-login:after {
    position: fixed;
    top: 0;
    left: 0;
    content: '';
    width: 100%;
    height: 100%;
    background-color: rgba(38, 50, 56, 0.85);
    background-color: #33507A;
    z-index: -1;
}

.page-login .brand {
    margin-bottom: 28px;
}

.page-login .brand-text {
    color: #ffffff;
    font-size: 18px;
    text-transform: uppercase;
}

.page-login .brand-subtext {
    color: #ffffff;
    font-size: 15px;
    text-transform: uppercase;
}

.page-login form {
    width: auto;
    margin: 30px 0;
}

.page-login form a {
    margin-left: 20px;
    color: rgba(255, 255, 255, 0.5);
}

.page-login .page-copyright {
    color: #ffffff;
}

.page-login .page-copyright .social .icon,
.page-login .page-copyright .social .icon:hover,
.page-login .page-copyright .social .icon:active {
    color: #ffffff;
}

.page-login .page-copyright {
    margin-top: 0;    
}

@media (max-width: 480px) {
    .page-login form {
        width: auto;
    }
}

.form-group {
    position: relative;
    width: 100%;
}

.form-control {
    padding-right: 30px; /* Espaço extra para o ícone */
}

.show_pass {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    color: #76838f;
}

@media (max-height: 500px) {
    .page-content {
        margin-bottom: 10px;
        padding: 10px;
    }
    
    .form-group input {
        font-size: 14px;
        padding: 10px;
    }

    .btn {
        font-size: 14px;
        padding: 10px;
    }
}

@media (max-width: 480px) {
    .page-content {
        padding: 10px;
    }
    
    .form-group input {
        font-size: 14px;
        padding: 10px;
    }

    .btn {
        font-size: 14px;
        padding: 10px;
    }
}

/** INICIO WHATSAPP ANIMADO **/
#fab-wpp { position: fixed; width: 64px; right: 2%; bottom: 3rem; z-index: 9998; }
#fab-wpp a { z-index: 99999; }
#fab-wpp .fab-action {
    transition: all 225ms ease-in-out;
    position: absolute;
    cursor: pointer;
    bottom: 0;
    display: flex;
    align-items: center;
    width: 64px;
    height: 64px;
    background-color: #34AF23;
    border-radius: 50%;
    text-align: center;
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
}


#fab-wpp .fab-action i { margin: 0 auto; color: #fff; font-size: 3rem; }
#fab-wpp{ width: 64px; height: 64px; transition: .3s; }
#fab-wpp::after,
#fab-wpp::before {
    content: ''; position: absolute; opacity: 0; border: 4px solid #34AF23; left: -10px; top: -10px; 
    right: -10px; bottom: -10px; -webkit-border-radius: 50%; animation: WaveWhatsApp 1.5s ease infinite;
}
#fab-wpp::after{animation-delay: .5s;}
#fab-wpp:hover::after{border: 4px solid #34AF23;}
#fab-wpp:hover::before{border: 4px solid #34AF23;}

@keyframes WaveWhatsApp { 
    0%   { transform: scale(0.5); } 
    50%  { opacity: 0.7; } 
    100% { transform: scale(1.1); opacity: 0; }
}
/** FINAL WHATSAPP ANIMADO **/