#botaoPagarme {
	background-color: #4CAF50; /* Cor de fundo */
	color: white; /* Cor do texto */
	padding: 12px 24px; /* Espaçamento interno */
	font-size: 16px; /* Tamanho da fonte */
	border: none; /* Sem borda */
	border-radius: 4px; /* Borda arredondada */
	cursor: pointer; /* Cursor do mouse */
	transition: background-color 0.3s; /* Transição suave de cor de fundo */
}

#botaoPagarme:hover {
	background-color: #45a049; /* Cor de fundo ao passar o mouse */
}

#botaoPagarme:disabled {
	background-color: #cccccc; /* Cor de fundo quando desabilitado */
	cursor: not-allowed; /* Cursor padrão quando desabilitado */
}

body {
	margin: 0;
	padding: 0;
	font-family: Arial, sans-serif;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	height: 100vh;
	background-color: #f0f0f0;
}

#content {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

#state {
	margin-bottom: 10px;
	width: fit-content; /* Para que o tamanho do campo seja baseado no conteúdo */
}

.logo-container {
	display: flex;
	justify-content: center; /* Centraliza as imagens horizontalmente */
	align-items: center; /* Centraliza as imagens verticalmente */
	margin-bottom: 20px;
}

.logo-Pagarme {
	width: 300px;
	height: auto;
	margin-bottom: 20px;
	background-color: grey;
}

.logo-ai9 {
	width: 300px;
	height: auto;
	margin-bottom: 20px;
	background-color: grey;
}

.logo-container img {
	width: 200px; /* Largura fixa para todas as imagens */
	height: auto; /* Altura automática para manter a proporção */
}

#logo_plus {
	width: 66.67px; /* Largura do logo do sinal de mais (1/3 do tamanho dos outros logotipos) */
	margin: 0 20px; /* Espaçamento horizontal entre as imagens */
}