@charset "utf-8";
/* CSS Document */

/* Área de login
/* ............. */

/* enfeite do background */
.background {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: opacity(0.2) blur(3px) grayscale(0.5);
	z-index: -1;
}

/* área de formatação principal */
div#corpoLogin {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: stretch;
}

	div#areaLogotipo,
	div#espacoLogin {
		position: relative;
		width: 100%;
		text-align: center;
		margin: 20px 0 0 0;
	}

	div#areaLogotipo img {
		width: 200px;
		margin: 50px 0 20px;
	}

		div#areaLogin {
			height: 50vh;
			margin: 50px 0;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
		}

			div#areaLogin #areaFormulario,
			div#areaLogin #statusLogin {
				width: 30%;
			}

			div#areaLogin #statusLogin {
				text-align: center;
				font-weight: bold;
				color: var(--erro);
			}

				div#areaLogin #statusLogin span {
					color: var(--fonte) !important;
				}

		#areaLogin a:hover {
			font-weight: bold;
		}

/* área de opções de login */
div#opcoesLogin {
	margin-bottom: 40px;
	word-break: break-word;
}

	div#opcoesLogin label#ckLogado {
		float: left;
		text-align: left;
		width: 43%;
	}

	div#opcoesLogin p#txtRecuperar {
		float: right;
		text-align: right;
		user-select: none;
		width: 43%;
	}

/* área de recuperação da senha */
div#recuperacaoLogin {
	display: none;
}

	div#recuperacaoLogin #txtVoltarLogin {
		user-select: none;
	}

/* área do recaptcha */
div#areaRecaptcha {
	display: none;
	width: 100%;
}

	div#areaRecaptcha .g-recaptcha {
		justify-content: center;
		display: flex;
		margin-top: 20px;
	}

/* Inputs do Formulário
/* .................... */

.inputLogin {
	position: relative;
	width: 100%;
	margin: 0 auto;
}

	.inputLogin input {
		width: 90%;
		padding: 15px 5% !important;
		background-color: transparent;
		border: 1px solid var(--padraoTexto);
		color: var(--fonte);
		text-align: center;
	}

		.inputLogin label {
			position: absolute;
			top: 25px;
			transform: translate(0, 10px) scale(0.9);
			width: 113%;
			transform-origin: left;
			transition: 0.25s;
			left: -5px;
			padding: 0px;
			z-index: -1;
		}

			.inputLogin input:focus-visible ~ label,
			.inputLogin input:valid ~ label {
				width: 100%;
				transform: translate(0, -30px) scale(1);
			}
	
	.inputLogin .verSenha {
		position: absolute;
		top: 32px;
		right: 20px;
		width: 30px;
		height: 25px;
		cursor: pointer;
	}

		.inputLogin .iconSenha {
			background: url(../../imagens/gestor/senha.png);
			width: 30px;
			height: 25px;
		}

		.inputLogin .iconSenhaOff {
			background-position: 0px -25px;
			opacity: 0.5;
		}

.inputLogin input,
#areaLogin input[type="button"] {
	padding: 10px 30px;
	border-radius: 5px;
	margin: 20px 0;
}

	#areaLogin input[type="button"]:active,
	#areaLogin input[type="button"] { 
		padding: 10px 50px;
		border-radius: 5px;
		background: var(--backgroundDestaque); 
		border: 1px solid var(--bordarHover);
		color: var(--fonte);
		cursor: pointer;
		transition: 0.2s;
	}

	#areaLogin input[type="button"]:hover { 
		background: var(--padrao);
		border: 1px solid var(--padraoTexto); 
		color: var(--background);
	}

#ckLogado {
	position: relative;
	cursor: pointer;
	user-select: none;
	padding-left: 25px;
}
  
	#ckLogado input {
		display: none;
	}

		#ckLogado input:checked ~ .marcacao:after {
			display: block;
		}

		#ckLogado input:checked ~ .marcacao {
			background-color: transparent
		}

	#ckLogado .marcacao {
		position: absolute;
		top: -1px;
		left: 0;
		height: 15px;
		width: 15px;
		background-color: transparent;
		border: 1px solid var(--fonte);
	}

		#ckLogado .marcacao::after {
			content: "";
			position: absolute;
			display: none;
			left: 5px;
			top: 2px;
			width: 3px;
			height: 7px;
			transform: rotate(45deg);
			border: solid var(--fonte);
			border-width: 0 2px 2px 0;
		}

/* Dispositivos mobile
/* ................... */

@media only screen and (max-width: 750px) {

	div#areaLogin #areaFormulario,
	div#areaLogin #statusLogin {
		width: 60% !important;
	}

}