@charset "utf-8";

#auth { float: left; width: 100%; min-height: 550px; padding: 0 0 50px;}
#auth .exclusivo { float: left; width: 100%; padding: 12px 0 10px; background-color: rgb(255, 255, 255, 10%);}
#auth .exclusivo h3 { float: left; width: 100%; text-align: center; font-size: 1em; color: rgb(150, 150, 150);}
#auth .meio { margin: 0 auto; width: 500px; max-width: 90%;}

#auth .form { float: left; width: 100%; margin: 50px 0 30px;}
#auth .form .c1 { float: left; width: 100%; margin: 30px 0 0; position: relative;}
#auth .form .c1.align { text-align: center;}
#auth .form .nomecampo { float: left; width: 100%; margin: 0 0 4px; font-size: 1.3em;}
#auth .form .nomecampo em { font-style: normal; color: rgb(221, 29, 33);}
#auth .form .campo { float: left; width: 95.5%; height: 70px; padding: 0 2%; border: 1px solid rgb(150, 150, 150);}
#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 .campo.codigo { float: none; float: none; width: 15%; padding: 0; margin: 0 5px; text-align: center; font-size: 2em;}
#auth .form .recuperar { float: right; margin: 10px 3px 0 0;}
#auth .form .recuperar:hover { text-decoration: underline; color: rgb(33, 101, 128);}
#auth .form .importante { float: right; margin: 10px 3px 0 0;}
#auth .form .length { position: absolute; bottom: 23px; right: -22px; font-size: 1.2em; color: rgb(120, 120, 120);}
#auth .form .senha { position: absolute; width: 30px; height: 30px; right: 8px; bottom: 20px; z-index: 1; background-position: 50%; background-repeat: no-repeat;}
#auth .form .senha.mostrar { background-image: url('../imagens/senha-mostrar.png');}
#auth .form .senha.ocultar { background-image: url('../imagens/senha-ocultar.png');}
#auth .form .radio { float: left; width: 100%; margin: 10px 0 0; position: relative;}
#auth .form .radio .marque { display: none;}
#auth .form .radio .marque + label { float: left; width: 96%; padding: 15px 2% 14px; border: 1px solid rgb(200, 200, 200); background-color: rgb(235, 235, 235); cursor: pointer;}
#auth .form .radio .marque + label strong { float: left; width: 100%; text-align: center; font-size: 1.3em;}
#auth .form .radio .marque + label b { float: left; width: 100%; text-align: center; font-weight: normal;}
#auth .form .radio .marque + label em { position: absolute; width: 25px; height: 25px; top: 50%; left: -30px; margin: -15px 0 0; background-image: url('../imagens/checked-vazio.png'); background-repeat: no-repeat; background-position: 50%;}
#auth .form .radio .marque:checked + label { background-color: rgb(149, 247, 174); border: 1px solid rgb(118, 204, 143);}
#auth .form .radio .marque:checked + label em { background-image: url('../imagens/checked-ok.png');}
#auth .form .radio .marque:hover + label { background-color: rgb(149, 247, 174); border: 1px solid rgb(118, 204, 143);}
#auth .form .submit { float: left; width: 70%; padding: 20px 0; margin: 50px 15% 0; background-color: rgb(9, 11, 15); text-transform: uppercase; font-weight: bold; font-size: 1.4em; color: rgb(255, 255, 255);}
#auth .form .submit:hover { background-color: rgb(127, 193, 51);}
#auth .form .submit.disabled { background-color: rgb(200, 200, 200); color: rgb(140, 140, 140); cursor: inherit;}
#auth .form .submit.disabled:hover { background-color: rgb(200, 200, 200); color: rgb(140, 140, 140);}

#auth .instrucao { float: left; width: 100%;}
#auth .instrucao h3 { float: left; width: 90%; padding: 10px 5% 8px; margin: 0 0 10px; background-color: rgb(235, 235, 235); text-align: center; font-size: 1.1em; color: rgb(50, 50, 50);}
#auth .instrucao h4 { float: left; width: 100%; text-align: center; font-size: 1.1em; color: rgb(100, 100, 100);}

#auth .reenviar { float: left; width: 100%; margin: 20px 0 0; text-align: center; color: rgb(100, 100, 100);}
#auth .reenviar b { font-weight: normal;}
#auth .reenviar em { font-style: normal; color: rgb(33, 101, 128);}
#auth .reenviar em:hover { text-decoration: underline;}

#auth .utilidades { float: left; width: 100%;}
#auth .utilidades .link { float: left; width: 100%; padding: 10px 0; margin: 5px 0 0; border: 1px solid rgb(100, 100, 100, 40%); text-align: center; font-weight: normal; color: rgb(100, 100, 100);}
#auth .utilidades .link:hover { text-decoration: underline;}

#auth .bloqueado { float: left; width: 90%; padding: 50px 5% 40px; text-align: center; font-size: 1.2em; line-height: 1.5;}
#auth .bloqueado b { font-size: 1.2em;}
#auth .bloqueado a { color: rgb(33, 101, 128);}
#auth .bloqueado a:hover { text-decoration: underline;}

@media only screen and (max-width: 600px){
  #auth .form .campo.codigo { margin: 0 2px;}
}