:root {
	--collor-main: #194587;
	--main-light: #e6f1f7;
	--siap-gray-bg: #f0f2f5;
}

.login-bg-container {
	background-color: #c9e6f3;

}

.login-card {
	width: 900px;
	max-width: 95%; /* Responsividade garantida */
	background-color: white !important;
}

.login-inner-header {
	background-color: var(--collor-main) !important;
}

/* Corpo interno (logos e formulário) */
.login-inner-body {
	background-color: white !important;
}

/* Rodapé interno */
.login-inner-footer {
	background-color: var(--siap-gray-bg); /* Cor de fundo cinza claro */
	border: 1px solid #d6d6d6;
}
/* Estilo para a coluna de logos (esquerda) */
.logo-column {
	display: flex;
	flex-direction: column;
	justify-content: center; /* Centraliza o grupo de logos */
	align-items: center; /* Centraliza as logos no eixo cruzado */
}

/* Estilo para cada item de logo */
.logo-item {
	text-align: center !important; /* Força o alinhamento central */
}

.logo-item img {
	max-width: 250px;
}

/* Ajuste de margem em telas menores para a coluna de logos */
@media (max-width: 768px) {
	.logo-column {
		border-right: none !important; /* Remove a borda vertical no mobile */
		border-bottom: 1px solid #e0e0e0; /* Adiciona uma borda horizontal */
	}
}

/* Estilo para o título do formulário */
.text-primary-siap {
	color: var(--collor-main) !important;
}

/* ---------------------------------------------------- */
/* 4. VERIFICAÇÃO (CAPTCHA) E BOTÃO */
/* ---------------------------------------------------- */
.credentials-box {
	background-color: var(--siap-gray-bg);
}

.captcha-box {
	background-color: var(--siap-gray-bg);
}

.captcha-texto {
	background-color: var(--main-light);
	color: var(--collor-main);
	border: 1px solid #ceebc3; /* Adiciona uma borda sólida e sutil */
}

/* Estilo para os ícones do Bootstrap Icons */
.captcha-icon i {
	font-size: 30px; /* Tamanho do ícone ligeiramente reduzido */
	line-height: 1; /* Ajuda no alinhamento vertical */
	color: var(
		--collor-main
	); /* Define a cor dos ícones para o verde padrão do SIAP */
}

.captcha-icon {
	cursor: pointer;
	opacity: 0.6;
	padding: 5px;
	border: 2px solid transparent;
	border-radius: 5px;
	transition: all 0.2s;
}

.captcha-icon:hover {
	opacity: 1;
}

.captcha-icon.selected {
	opacity: 1;
	border-color: var(--collor-main); /* Borda verde no ícone selecionado */
}

.btn-primary-siap {
	background-color: var(--collor-main) !important;
	border-color: var(--collor-main) !important;
}

.link-senha-siap {
	color: var(--collor-main) !important;
}

/* Estilo para a logo no rodapé */
.footer-logo {
	height: 1.3em; /* Define a altura da logo para ser um pouco maior que a fonte */
	width: auto; /* Mantém a proporção */
	vertical-align: text-bottom; /* Alinha a logo com a base do texto */
}