/* static/css/login.css */

body {
    font-family: 'Arial', sans-serif; /* Fonte mais simples e elegante */
    background-color: #e0f7fa;
    color: #333;
	min-height: 100vh;
	margin: 0;
}

.flash-message {
	padding: 10px;
	margin: 10px 0;
	border-radius: 5px;
	display: inline-block;  /* Isso fará a largura se ajustar ao conteúdo */
	animation: fadeIn 0.5s;
}

.flash-message.error {
	color: #721c24;
	background-color: #f8d7da;
	border: 1px solid #f5c6cb;
	
}

.flash-message.success {
	color: #155724;
	background-color: #d4edda;
	border: 1px solid;
	border-color: #c3e6cb;
}

@keyframes fadeIn {
from { opacity: 0; transform: translateY(-10px); }
to { opacity: 1; transform: translateY(0); }
}

.form-control {
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid;
	border-color: #b0c4de;
    letter-spacing: normal; /* Reduz o espaçamento das letras */
}


.form-control:focus {
    box-shadow: 0 0 5px rgba(0, 70, 153, 0.3);
    border-color: #004499;
}

.form-label {
    color: #333;
    margin-bottom: 0.5rem; /* Espaço abaixo das labels */
    display: block; /* Garante que as labels não se sobreponham */
}

.btn {
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.btn-primary {
    background-color: #004499;
    border-color: #004499;
}

.btn-primary:hover {
    background-color: #0056b3;
    border-color: #0056b3;
}

.btn-danger {
    background-color: #dc3545;
    border-color: #dc3545;
}

.btn-danger:hover {
    background-color: #c82333;
    border-color: #bd2130;
}

@media (max-width: 768px) {
    .container-fluid {
        padding: 0 15px; /* Adiciona padding em dispositivos menores */
    }
}