html, body{
    height: 100%;
}

.central-background{ 
    background-color: #FFFFFF;
    min-height: 100%;
}

hr#linha-logotipo{
    border-color: #BBBBBB;
}

#titulo-missao{
    margin-top: 2em;
}

#alertaAmbienteHomologacaoLogin{
    margin-top: 2em;
    margin-bottom: -100px;
    background-color: #f0ad4e;
    color: white;
}

form.form-login{
    margin-bottom: 3em;
}
label.mostrar-senha{
    cursor: pointer;
    display: inline;
    font-weight: normal;
}
#frm-login-btn-entrar{
    margin-top: 1em;
    width: 100%;
}
#frm-login-btn-redefinir{
    width: 100%;
}

#frm-login-btn-recuperar-senha{
    float: right;
    margin-top: 2em;
}

.bloco-orientacoes{
    margin-bottom: 2em;
}
.link-orientacoes{
    display: block;
}

.rodape{
    margin-top: 4em;
}
.rodape .rodape-esquerda,
.rodape .rodape-direita{
    margin-bottom: 2em;
    text-align: center;
}

/* Telas maiores que 768px (tablets, monitores, ...) */
@media all and (min-width: 768px) {
    .central-background{ 
        padding: 0 2em;
    }
    
    .corpo-login{
        margin-top: 5em;
    }    
    
    form.form-login{
        margin-bottom: 2em;
    }    
    #frm-login-btn-entrar{
        width: auto;
        float: right;
    }
    
    .rodape{
        margin-top: 10em;
    }    
    .rodape .rodape-esquerda{
        text-align: left;
    }
    .rodape .rodape-direita{
        text-align: right;
    }
}

.glyphicon-refresh-animate {
    -animation: spin .7s infinite linear;
    -webkit-animation: spin2 .7s infinite linear;
}

@-webkit-keyframes spin2 {
    from { -webkit-transform: rotate(0deg);}
    to { -webkit-transform: rotate(360deg);}
}

@keyframes spin {
    from { transform: scale(1) rotate(0deg);}
    to { transform: scale(1) rotate(360deg);}
}

#status-login,
#status-redefinicao-senha{
    margin-top: 1em;
   /* border: solid 1px;*/
    padding: 1em;
    background-color: white;
}



.containerBlocoLoginForm{
    background-color: #fff;
    height: 100%;
}
.containerLogoIFTM{
    margin: 4em 0 2em 0;
}
img#logotipo-compacto{
    display: block;
    margin: 2em auto;
    width: 150px;
}
img#logotipo-medio{
    display: block;
    margin: 5em auto 3em auto;
}
img#logotipo-wide{
    width: 80%;
    max-width: 350px;
}

.containerBlocoLoginAddOn{
    background-color: #72B0CF;
    height: 100%;
    padding: 5% 10%;
    display: flex;
    flex-direction: column;
}
.btnBlocoLoginAddOn{
    /*margin: 1em auto;*/
}
.btnBlocoLoginAddOn img{
    height: 20px;
    margin-right: 1em;
}
.blocoRodapeLogin{
    margin-top: 3em;
}

.blocoAlertaLogin{
    box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
}
.blocoAlertaLogin .btnAlerta{
    margin-top: 1em;
}

#marcaIftmRodapeLogin{
    width: 200px;
}

/* Telas maiores que 768px (tablets, monitores, ...) */
@media all and (min-width: 992px) {
    .containerBlocoLogin{
        height: 400px;
        box-shadow: rgb(0 0 0 / 16%) 0px 3px 6px, rgb(0 0 0 / 23%) 0px 3px 6px;
    }

    .containerBlocoLogin .progress{
        margin-bottom: 0;
    }

    .containerBlocoLoginAlturaExtendida{
        height: 650px;
    }

    .center-screen {
        min-height: 82vh;
    }
    .vertical-center {
        padding-top: 20vh;
    }

    .containerLogoIFTM{
        margin: 4em 0 2em 0;
    }
    img#logotipo-compacto{
        display: block;
        margin: 3em auto;
    }
    img#logotipo-medio{
        display: block;
        margin: 5em auto 3em auto;
    }
    img#logotipo-wide{
        width: 80%;
        max-width: 350px;
    }

    .containerBlocoLoginAddOn{
        padding: 5%;
    }
    .btnBlocoLoginAddOn{
        margin: 1em auto;
    }

    .wide-background{
        background: rgb(238,238,238);
        background: linear-gradient(308deg, rgba(238,238,238,1) 0%, rgba(144,167,176,1) 100%);
        background-attachment:fixed;
    }


}