body {
    margin: 0;
    padding: 0;
    font-family: 'Lato', sans-serif;
}
.flex {
    display: flex;
}
.container {
    max-width: 100vw;
    max-height: 100vh;
}
.space-between {
    justify-content: space-between;
}
.foto-principal {
    flex: 6;
    max-height: 100vh;
}
.foto-principal > div {
    height: 100vh;
    background-size: cover;
    background-repeat: no-repeat
}
.login-container {
    flex: 3;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    box-shadow: -10px 0px 0px rgba(0, 0, 0, 0.05);
}
.login-box {
    width: 60%;
    z-index: 2
}
.logo {
    margin: 0 0;
}
.logo > svg {
    width: 100%;
    height: 100%;
}

.form-control {
    width: 100%;
    margin: 3px 0;
}

.form-control > input {
    width: 100%;
    padding: .7em;
    background: #FFFFFF;
    border: 1px solid #CCCCCC;
    box-sizing: border-box;
    border-radius: 4px;
    margin: 3px 0;
    font-family: 'Lato' !important;
    color: #333 !important;
}

.form-control > label {
    font-size: 15px;
    color: #333333;
}

.form-control .esqueceuSenha {
    font-size: 12px;
    align-self: flex-end;
    color: #999999;
}
.button {
    width: 100%;
    border-radius: 4px;
    margin: 3px 0;
    padding: .7em;
    border: none;
}
.button:hover {
    cursor: pointer;
}

button.bgBlue:active {
    background: #1086cc;
}
button.bgOrange:active {
    background: #dd5837;
}
button.bgWhite {
    transition: all .3s;
}
button.bgWhite:hover {
    transition: all .3s;
    transform: scale(1.05);
}
button.bgTransparent {
    transition: all .3s;
}
button.bgTransparent:hover {
    transition: all .3s;
    transform: scale(1.05);
}

.bgBlue {
    background: #42A7E1;
    color: white;
    border: 1px solid;
}
.bgOrange {
    background: #FF7A59;
    color: white;
    border: 1px solid;
}
.download-suporte {
    text-align: center;
    margin: 1em;
    color: #999999;
    font-size: .8em
}

.download-suporte a:hover {
    color: #777;
}

.login-footer {
    text-align: center;
    margin: 2em 0 .5em 0;
}
.login-footer p {
    color: rgba(0,0,0,.5);
}
.login-footer p > .textHeader {
    color: #333333;
    font-weight: bolder !important;
    display: block;
    margin: .2em;
    font-size: 1em !important;
}
.bgWhite {
    background-color: white;
}
.bgTransparent{
    background-color: transparent;
}
.bgGreen {
    background-color: #3DA446;
}
.borderBlue {
    border: 1px solid #42A7E1;
    color: #42A7E1;
}
.borderGreen {
    border: 1px solid #3DA446;
    color: #3DA446;
}

a {
    color: inherit;
    cursor: pointer;
    text-decoration: none;
}
.poligono {
    width: 100%;
    height: 50%;
    background: rgba(234, 242, 249, 0.3);
    position: absolute;
    bottom: 0;
    -webkit-clip-path: polygon(0 17%, 100% 34%, 100% 100%, 0% 100%);
    clip-path: polygon(0 17%, 100% 34%, 100% 100%, 0% 100%);
}

.invertido {
    -webkit-clip-path: polygon(0 34%, 100% 17%, 100% 100%, 0% 100%);
    clip-path: polygon(0 34%, 100% 17%, 100% 100%, 0% 100%);
}

.errors {
    color: red;
    align-self: flex-start;
    font-size: .8em;
    text-align: justify;
}
.errors > ul {
    padding: 0;
    list-style: none;
}
#recuperarAcesso {
    margin: 1em 0 0 0;
}
.sucesso {
    color: #3da446;
}

.carregamento {
    background: rgba(255,255,255,.7);
    position: absolute;
    z-index: 3;
    width: 100%;
    height: 100%;
    display: none;
    justify-content: center;
    align-items: center;
}
.carregamento > img {
    width: 200px;
    height: 200px;
    box-sizing: border-box;
}

.password-expired p > .textHeader{
    color: #000000;
    font-weight: 500 !important;
    display: block;
    margin: 0.5em;
    font-size: 1.4em !important;
    text-align: center;
}

.password-expired p{
    text-align: center;
    font-weight: unset;
    font-size: 1em !important;
    color: #595959;
}


/* #################################################################################################################*/

/*
      ##Device = Desktops
      ##Screen = 1281px to higher resolution desktops
    */

@media (min-width: 1367px){

    .login-box {
        width: 50%;
    }
    .login-footer {
        margin: 4em 0 0 .5em;
        font-size: .8em;
    }

    .login-footer p > .textHeader {
        font-size: 1em !important;
    }
}

/*
  ##Device = Desktops
  ##Screen = 1281px to higher resolution desktops
*/

@media (min-width: 1281px) and (max-width: 1366px){
    .login-box {
        width: 60%;
    }
    .login-footer {
        margin: 2em 0 .5em 0;
        font-size: .8em;
    }
    .poligono {
        height: 46%;
    }
}
/*
  ##Device = Laptops, Desktops
  ##Screen = B/w 1025px to 1280px
*/

@media (min-width: 1025px) and (max-width: 1280px) {
    .login-footer {
        margin: 4em 0 .5em 0;
        font-size: .7em;
    }
    .poligono {
        height: 46%;
    }
}

/*
  ##Device = Tablets, Ipads (portrait)
  ##Screen = B/w 768px to 1024px
*/

@media (min-width: 768px) and (max-width: 1024px) {

    .foto-principal {
        flex: 3
    }

    .login-container {
        flex: 2
    }

    .login-footer {
        margin: 3em 0 0 .5em;
        font-size: .7em;
    }

    .login-box {
        width: 70%;
        border-radius: 10px;
        box-sizing: border-box;
        padding: 1em;
    }
    .poligono {
        height: 45%;
    }

}

/*
  ##Device = Tablets, Ipads (landscape)
  ##Screen = B/w 768px to 1024px
*/

@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {


}

/*
  ##Device = Low Resolution Tablets, Mobiles (Landscape)
  ##Screen = B/w 481px to 767px
*/

@media (min-width: 481px) and (max-width: 767px) {

    .foto-principal {
        flex: 1
    }

    .login-container {
        flex: 1
    }
    .foto-principal {
        display: block;
        width: 150%;
    }

    .login-container {
        z-index: 2;
        align-items: flex-start;
        max-height: 100vh;
        overflow-y: scroll;
    }

    .login-box {
        width: 80%;
        background: white;
        padding: 2em;
        border-radius: 10px;
        box-sizing: border-box;
    }
    .login-footer {
        margin: 2em 0 0 .5em;
        font-size: .8em;
    }

}

/*
  ##Device = Most of the Smartphones Mobiles (Portrait)
  ##Screen = B/w 320px to 479px
*/

@media (max-width: 480px) {
    .foto-principal {
        display: block;
        position: fixed;
        width: 150%;
    }
    .login-container {
        z-index: 2;
        height: 100vh;
        background: rgba(255,255,255,.83);
    }
    .login-box {
        width: 80%;
        border-radius: 10px;
        box-sizing: border-box;
        padding: 1em;
    }
    .login-footer {
        margin: 2em 0 0 .5em;
        font-size: .7em;
    }
}

@media (max-height: 600px) {
    .login-container {
        padding-top: 1em;
        align-items: flex-start;
        max-height: 100vh;
        overflow-y: scroll;
    }
}