@charset "utf-8";

#auth { float: left; width: 100%; min-height: 500px; padding: 40px 0;}
#auth .centro { margin: 0 auto; width: 450px; max-width: 85%;}

#auth .form { float: left; width: 100%;}
#auth .form .c1 { float: left; width: 96%; margin: 10px 0 20px 2%; position: relative;}
#auth .form .c2 { float: left; width: 47%; margin: 10px 0 20px 2%; position: relative;}
#auth .form .nomecampo { float: left; width: 100%; margin: 0 0 4px; font-size: 1.1em;}
#auth .form .nomecampo em { font-style: normal; font-size: 0.8em; color: rgb(200 100 100);}
#auth .form .campo { float: left; width: 96%; height: 50px; padding: 0 2%; outline: 1px solid rgb(90 90 90 / 60%);}
#auth .form .campo.nascimento { width: 30%; padding: 0; text-align: center;}
#auth .form .campo.nascimento.mes { margin: 0 0 0 4.3%;}
#auth .form .campo.nascimento.ano { float: right;}
#auth .form .escolha { float: left; width: 96%; height: 50px; padding: 0 2%; outline: 1px solid rgb(90 90 90 / 60%);}
#auth .form .length { position: absolute; bottom: 13px; right: -22px; font-size: 0.9em;}
#auth .form .senha { position: absolute; width: 30px; height: 30px; right: 8px; bottom: 10px; z-index: 1; background-position: 50%; background-repeat: no-repeat;}
#auth .form .senha.mostrar { background-image: url('../../imagens/geral/senha-mostrar.png?');}
#auth .form .senha.ocultar { background-image: url('../../imagens/geral/senha-ocultar.png?');}

#auth .form .submit { float: left; width: 50%; padding: 20px 0; margin: 20px 25%; background-color: rgb(25 141 77); text-transform: uppercase; font-weight: bold; font-size: 1.4em; color: rgb(255 255 255);}
#auth .form .submit:hover { background-color: rgb(19 128 47);}
#auth .form .submit.disabled { background-color: rgb(150 150 150); cursor: inherit;}
#auth .form .submit.disabled:hover { background-color: rgb(150 150 150);}

#auth .form .instrucao { float: left; width: 100%; margin: 10px 0 30px;}
#auth .form .instrucao h3 { float: left; width: 100%; text-transform: uppercase; text-align: center; font-size: 1em;}

#auth .form .opcoes { float: left; width: 80%; margin: 20px 10% 0;}
#auth .form .opcoes a { float: left; width: 100%; padding: 8px 0; margin: 4px 0; outline: 1px solid rgb(90 90 90 / 40%); text-transform: uppercase; text-align: center;}
#auth .form .opcoes a:hover { background-color: rgb(90 90 90 / 5%);}

#auth .form .politica { float: left; width: 96%; margin: 0 2% 20px; position: relative;}
#auth .form .politica .marque { display: none;}
#auth .form .politica .marque + label { float: left; width: 100%; cursor: pointer;}
#auth .form .politica .marque + label b { float: left; margin: 8px 0 0 30px; font-weight: normal; font-style: italic; cursor: pointer;}
#auth .form .politica .marque + label b a { font-weight: bold;}
#auth .form .politica .marque + label em { position: absolute; width: 25px; height: 25px; top: 0; left: 0; background-image: url('../../imagens/geral/checked-no.png'); background-repeat: no-repeat; background-position: 50%;}
#auth .form .politica .marque:checked + label em { background-image: url('../../imagens/geral/checked-ok.png');}

@media only screen and (max-width: 800px){
  #auth .form .opcoes { width: 100%; margin: 20px 0 0;}
  #auth .form .submit { width: 80%; margin: 20px 10%;}
}
@media only screen and (max-width: 500px){
  #auth .form .c2 { width: 96%;}
}
@media only screen and (max-width: 400px){
  #auth .form .usuario input { width: 140px;}
}