body, html {
	height: 100%;
	margin: 0;
	font-family: Arial, sans-serif;
	background: #3b4865;
	display: flex;
	justify-content: center;
	align-items: center;
	font-family: 'Montserrat', sans-serif; /* Usando Montserrat */
	line-height:10px;

}

body {
	background-color: none;
}

.custom-row {
	display: block !important; /* Altera o comportamento de display para block */
	margin-left: 0 !important; /* Remove o margin-left */
	flex-wrap: nowrap !important; /* Remove o wrap dos flex items */
}

/* Estilos para corrigir o preenchimento automático no Chrome e Safari */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
	background-color: white !important; /* Garante que o fundo seja sempre branco */
	-webkit-box-shadow: 0 0 0px 1000px white inset !important; /* Remove qualquer sombra do preenchimento automático */
	font-family: inherit !important; /* Garante que a fonte herde o estilo padrão */
	font-size: 16px !important; /* Ajusta o tamanho da fonte */
	color: inherit !important; /* Mantém a cor do texto original */
	line-height: 1.5 !important; /* Ajusta o espaçamento vertical */
	transition: background-color 5000s ease-in-out 0s; /* Evita que o estilo mude imediatamente */
}


.login-parent {
	display: flex;
	flex-direction: row;
	min-width: 350px;
	height: 80vh; /* Melhor proporção vertical */
	min-height: 600px; /* Garante altura mínima */
	border-radius: 5px;
	box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3), 0 6px 6px rgba(0, 0, 0, 0.22);
	overflow: hidden;
}


.illustration-container {
	position: relative; /* necessário para o ::after funcionar corretamente */
	width: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #00ADEF;
	padding: 0;
	overflow: hidden;
	height: 100%;
}

	.illustration-container::after {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.1); /* escurecimento sutil */
		z-index: 1;
		pointer-events: none;
	}

	/* Eleva a imagem acima do overlay para que continue visível */
	.illustration-container img {
		position: relative;
		z-index: 0;
		width: auto;
		height: 100%;
		object-fit: contain;
	}
.login-container {
	
}
.login-container {
	width: 50%;
	height: 100%; /* ESSENCIAL para alinhar verticalmente */
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 40px;
	background-color: rgba(255, 255, 255, 1); /* levemente transparente */
	box-sizing: border-box;
}



.btn-warning {

	border: none;
	padding: 10px 20px;

	border-radius: 5px;
}

h6 {
	margin-bottom: 20px;
	font-size: 1.2rem;
	color: #333;
}

label {
	font-weight: bold;
}

.text-white {
	color: #fff;
}


/* Responsividade para telas menores */
@media (max-width: 768px) {
	/* Remove a imagem da esquerda em telas pequenas */
	.illustration-container {
		display: none;
	}

	/* Faz o formulário ocupar 100% da largura em telas menores */
	.login-container {
		width: 100%;
		padding: 20px;
		max-width: 400px; /* Define um limite máximo de largura no celular */
	}

	.btn-warning {
		width: 100%;
	}

	/* Exibe a logo no topo do formulário no celular */
	.logo-mobile-system {
		display: block; /* Exibe a logo do sistema no celular */
		text-align: center;
		margin-bottom: 20px;
	}

	/* Ajusta a largura do formulário para evitar que pareça esmagado */
	form {
		width: 100%;
	}


	h6 {
		font-size: 1.1rem;
	}
}

/* Ajustes adicionais para telas muito pequenas */
@media (max-width: 480px) {
	h6 {
		font-size: 1rem;
	}


	.btn-warning {
		padding: 8px;
	}

	.content-container {
		padding: 10px;
	}
}



/* Estilo para os inputs */
/* Estilo para os inputs */
.form-control {
	background-color: #f5f5f5; /* Fundo claro */
	border: 1px solid #ddd; /* Borda leve */
	border-radius: 5px; /* Bordas arredondadas */
	padding: 10px;
	font-size: 1rem;
	width: 100%; /* Define a largura como 100% do contêiner pai */
	max-width: 400px; /* Define um limite máximo de largura */
	transition: all 0.3s ease; /* Transição suave */
	box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1); /* Sombra interna leve */
}

	/* Efeito ao focar no input */
	.form-control:focus {
		border-color: #00adef; /* Cor de borda azul ao focar */
		box-shadow: 0 0 5px rgba(0, 173, 239, 0.5); /* Efeito de sombra ao focar */
		background-color: #fff; /* Fundo branco ao focar */
		outline: none; /* Remover o outline padrão */
	}

/* Estilo para os labels */
label {
	font-weight: bold;
	font-size: 1rem;
	color: #333;
	margin-bottom: 5px;
}

/* Estilo para o select */
select.form-control {
	appearance: none; /* Remove as setas padrão de alguns browsers */
	background-image: url('data:image/svg+xml;charset=US-ASCII,%3csvg xmlns%3d%22http://www.w3.org/2000/svg%22 width%3d%2210%22 height%3d%225%22 viewBox%3d%220 0 10 5%22%3e%3cpath fill%3d%22%2300adef%22 d%3d%22M0 0l5 5 5-5z%22/%3e%3c/svg%3e'); /* Custom dropdown icon */
	background-repeat: no-repeat;
	background-position: right 10px center;
	background-size: 12px;
	padding-right: 30px; /* Ajuste o espaço para o ícone */
	border-radius: 3px;
	border: 1px solid #ddd;
	padding: 10px 10px; /* Ajuste do padding vertical e horizontal */
	height: auto; /* Define altura automática */
	line-height: 1.5; /* Ajusta o espaçamento vertical do texto */
	transition: border-color 0.3s ease;
}

	/* Efeito ao focar no select */
	select.form-control:focus {
		border-color: #00adef;
		box-shadow: 0 0 5px rgba(0, 173, 239, 0.5);
		background-color: #fff;
		outline: none;
	}


/* Container para os inputs com label flutuante */
.floating-label {
	position: relative;
	margin-bottom: 20px;
}

	.floating-label input {
		background-color: white; /* Fundo sempre branco */
		border-radius: 5px;
		padding: 10px;
		font-size: 1rem;
		width: 100%; /* O input vai ocupar 100% da largura do container */
		max-width: 600px; /* Aumenta a largura máxima do input */
		transition: all 0.3s ease;
		outline: none; /* Remove a borda padrão do input ao focar */
		border: 1px solid #ddd; /* Define uma borda leve */
	}

	.floating-label label {
		position: absolute;
		top: 50%;
		left: 15px;
		color: #aaa;
		font-size: 1rem;
		pointer-events: none;
		transform: translateY(-50%);
		transition: all 0.3s ease;
	}

	.floating-label select:focus + label,
	.floating-label select:not([value=""]) + label, /* Verifica se o select tem um valor */
	.floating-label input:focus + label,
	.floating-label input:not(:placeholder-shown) + label {
		top: -10px;
		left: 10px;
		font-size: 0.8rem;
		background-color: white;
		padding: 0 5px;
		transform: none;
	}

	/* Remove o contorno padrão (borda azul) ao focar no input */
	.floating-label input:focus,
	.floating-label select:focus {
		outline: none; /* Remove o contorno de foco */
		border-color: rgba(0, 0, 0, 0.1); /* Define uma cor de borda ao focar */
		box-shadow: none; /* Remove qualquer sombra extra */
	}

.spinner-border {
	width: 1rem;
	height: 1rem;
	border: 0.15em solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	display: inline-block;
	vertical-align: middle;
	animation: spinner-border 0.75s linear infinite;
}

@keyframes spinner-border {
	to {
		transform: rotate(360deg);
	}
}