* { font-family: 'Poppins', sans-serif; }
body { background-image: none!important; }
section.login { height: 100vh; width: 100%; display: flex; }
div.logo { width: 50%; display: flex; align-items: center; justify-content: center; }
div.logo span.image { background-image: url('../new_images/logo/logo_admin.png'); background-repeat: no-repeat; background-position: center center; opacity: 0; animation: slide; animation-duration: 1.5s; animation-fill-mode: forwards; margin-left: -100%; width: 100%; max-width: 330px; display: inline-block; height: 100px; background-size: contain; }
div.formulario { background-color: #999; width: 50%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 15px; }
form { display: flex; flex-direction: column; animation-delay: .5s; animation-duration: 1.5s; animation-fill-mode: forwards; }
input[type="password"], input[type="text"] { border: 1px solid #ddd!important; height: 50px; box-shadow: none!important; margin-bottom: -1px; padding: 0 15px; }
input[type="text"] { border-top-left-radius: 8px!important; border-top-right-radius: 8px!important; }
input[type="password"] { border-bottom-left-radius: 8px!important; border-bottom-right-radius: 8px!important; }
button, .button { height: 50px; border: none!important; color: #000; background: #ddd; margin-top: 30px; border-radius: 8px; display: flex; cursor: pointer; justify-content: center; align-items: center; width: 100%; }
button:hover, .button:hover { color: #fff; background: #333; }
h1 { font-size: 40px; color: #fff; text-transform: capitalize; text-align: center; }
a.forget { color: #fff; text-align: center; margin-top: 30px; }
a.forget:hover { color: #000; }
.formEsqueci { display: none; }
.border-rounded { border-radius: 8px!important; margin-bottom: 30px; }
div.buttons { display: flex; gap: 20px; }
.copy { position: absolute; bottom: 20px; padding: 0 15px; }
.divCaptcha { display: flex; gap: 10px; margin: auto; margin-top: 15px; align-items: center; width: 100%; }
.divCaptcha div { display: flex; align-items: center; gap: 10px; }
section.login form h1 { min-width: 350px; }
section.login form h2 { min-width: 350px; color: #fff; border: none; text-align: center; font-size: 28px; }
.info { color:#fff; }
input#captcha { width: 160px; }
input.expired { background-color: #595959; }
#formToken { display:none; }
#formToken .token { max-width: 400px; text-align: center; margin: auto; }
#formToken .token input { width: 46px; font-size: 3em; margin: 0 3px; min-width: unset; padding: 0; text-align: center; text-transform: uppercase; color: #317dbd; }
#formToken #counter { width: 330px; color: #fff; padding-top: 10px; margin: auto; height: 15px; }
#tkn3 { margin-right: 8px !important; }
#formToken .info { max-width: 400px; font-size: 1.3em; text-align: center; margin: 20px auto; line-height: 1.3em; color: #999; }
#formToken .buttons a { margin: auto; color: #6ca7d7; font-size: 1.2em; }
#helpToken { display:none; background: rgb(255 255 255 / 95%); padding: 20px; position: absolute; width: 400px; }
#helpToken::before { content: " "; width: 0; height: 0; bottom: -15px; left: 203px; border-style: solid; border-width: 15px 15px 0 15px; border-color: rgb(255 255 255 / 95%) transparent transparent transparent; position: absolute; }
a.htClose { float: right; display: block; width: 20px; text-align: center; height: 20px; line-height: 20px; margin: -15px -15px 0 0; color: #555; }
#helpToken table { width: 100%; margin: 10px 0; }
#helpToken table td { width: 50%; border-right: 1px solid #aaa !important; padding: 10px; vertical-align: top; }
#helpToken table td:last-child { border: none !important; }
#helpToken table td .icon { display: block; text-align: center; padding-bottom: 20px; }
#helpToken table td .icon i { font-size: 4em; color: #6c8ba4; }
#helpToken table td p { font-size: 1.2em; text-align: center; }

#formRecover input[type="password"] { border: 1px solid #ddd!important; height: 50px; box-shadow: none!important; margin-bottom: -1px; padding: 0 15px; border-radius: unset !important; }
#formRecover #formNovaSenha { border-top-left-radius: 8px!important; border-top-right-radius: 8px!important; }
#formRecover #formRepeteSenha { border-bottom-left-radius: 8px!important; border-bottom-right-radius: 8px!important; }
.recoverPass h4 { border: none; text-align: center; color: #999; }
#validaSenha { margin-top: 20px; } 
#validaSenha h4 { margin: 0; } 
#ulRegras { color: #bbb; }
#ulRegras li { list-style: none; margin: 5px; }
#ulRegras li i { margin: 0 5px 0 -25px; }
#ulRegras li i.icon-check         { display:none; }
#ulRegras li i.icon-unchecked     { display:inline; }
#ulRegras li.rOK i.icon-check     { display:inline; color: #0C0; }
#ulRegras li.rOK i.icon-unchecked { display:none; }
#rDoc { font-weight:bold; }
#rDoc i.icon-unchecked { display:none !important; }
#rDoc i.icon-check { display:inline !important; color:#999 !important; }
#progresso { margin-top: 10px; }
#progresso > div { display: block; border: none; background-color: #999; height: 3px; }
#progresso > div > div { display: block; background-color: #000; height: 3px; }
#progresso.error   > div > div { background-color: #C00; }
#progresso.warning > div > div { background-color: #EC0; }
#progresso.success > div > div { background-color: #0C0; }
#validaSenha .progressBar span { text-shadow: none; }
#validaSenha .progressBar.error > span   { color: #C00 !important; }
#validaSenha .progressBar.warning > span { color: #EC0 !important; }
#validaSenha .progressBar.success > span { color: #0C0 !important; }

@keyframes slide {
	from { opacity: 0; margin-left: -100%; }
	to { opacity: 1; margin-left: 0; }
}
@keyframes show {
	from { opacity: 0; }
	to { opacity: 1; }
}
@media only screen and (max-width: 992px) {
	section.login { flex-direction: column; }
	div.logo { width: auto!important; height: 50%; }
	p.copy { display: none; }
	div.formulario { width: auto; height: 100%; padding: 30px 15px; }
	form { width: 100%; }
	.divCaptcha { flex-direction: column; }
	.divCaptcha div { display: flex; align-items: center; gap: 20px; }
}