/* Base styles for the Django application */
/* Reset some default styles */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }

/* body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
} */


/* Estilo para o cabeçalho */
h2 {
    text-align: center;
    margin-bottom: 20px;
    font-size: 24px;
    color: #4CAF50;
}


/* Estilo para o cabeçalho */
h3 {
    text-align: center;
    margin-bottom: 20px;
    font-size: 16px;
    color: #056408;
}

/* Style for the header */
/* .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: aquamarine;
    padding: 10px 20px;
} */

.container {
    /* max-width: 600px; */
    margin: 0 auto;
    padding: 20px;
    background-color: rgb(255, 255, 255); /* #ffffff; */
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    max-width: 100%;   /* Garante que o container não ultrapasse a largura da tela */
    width: 100%; /* Faz o container ocupar toda a largura disponível */
}

/* linha horizontal com botões de ação */
.action-buttons {   
    display: flex; /* Adiciona flexbox para alinhar os botões horizontalmente */
    justify-content: center; /* Centraliza os botões horizontalmente */
    gap: 10px; /* Espaçamento entre os botões */
    margin-top: 20px; /* Espaçamento superior */
    /* quebra de linha se texto for maior que o expaço */
    text-overflow: clip;
}

.action-buttons button, 
.action-buttons a {
    background-color: #4CAF50; /* Cor de fundo */
    color: white; /* Cor do texto */
    border: none;
    padding: 10px 0; /* Espaçamento interno ajustado */
    border-radius: 4px; /* Bordas arredondadas */
    cursor: pointer;
    text-decoration: none; /* Remove o sublinhado dos links */
    font-size: 12px; /* Tamanho da fonte */
    font-weight: bold; /* Negrito no texto */
    text-align: center;
    /* white-space: nowrap; /* Garante que o texto não quebre em várias linhas */
    max-width: 140px; /* Define a largura máxima dos botões */
    width: 100%;
    white-space: normal;
    overflow-wrap: break-word;
    /* margin-bottom: 5px; Espaçamento inferior */
    transition: background-color 0.3s ease;
    /* centraliza o botão verticalmente */
    position: relative; /* Necessário para o tooltip */
    /* elimina linha no box externo do botão */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.action-buttons .save-button {
    background-color: #09b90f;
    color: #fff;
    /* border: none; */
    /* padding: 10px 10px; */
    /* border-radius: 4px; */
    /* cursor: pointer; */
}

.action-buttons .cancel-button {
    background-color: #f44336;
    color: #fff;
    /* border: none; */
    /* padding: 10px 10px; */
    /* border-radius: 4px; */
    /* cursor: pointer; */
}

.action-buttons .back-button {
    background-color: #ccc;
}

.action-buttons .cancel-button:hover {
    background-color: #97120d;
}

.action-buttons .save-button:hover {
    background-color: #007b00;
}

.action-buttons .back-button:hover {
    background-color: #616060;
}

.action-buttons :disabled {
    background-color: #828282;
    color: #c7c7c7;
}


/* Botões de ação */
.generic-button {
    /* display: flex; */
    justify-content: center; /* Centraliza os botões horizontalmente */
    /* margin-top: 20px; */
    /*margin-bottom: 20px; /* Espaçamento inferior */
    
}

.action-buttons button:not(:disabled):hover,
.action-buttons a:not(:disabled):hover {
    background-color: #333; /* Cor de fundo ao passar o mouse */
    color: #fff; /* Cor do texto ao passar o mouse */
}

/* Tooltip (texto de ajuda ao passar o mouse) */
.action-buttons button[title]:hover::after,
.action-buttons a[title]:hover::after {
    content: attr(title); /* Exibe o texto do atributo 'title' */
    position: absolute;
    background-color: #333;
    color: #fff;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    top: 100%; /* Exibe abaixo do botão */
    left: 50%;
    transform: translateX(-50%);
    margin-top: 5px;
    z-index: 10;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.2s ease-in-out;
}

.action-buttons button[title]:hover::before,
.action-buttons a[title]:hover::before {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 2px;
    border-width: 5px;
    border-style: solid;
    border-color: #333; /* transparent transparent transparent; */
    z-index: 10;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.2s ease-in-out;
}

.action-buttons button[title]::after,
.action-buttons a[title]::after {
    opacity: 0;
    visibility: hidden;
}



/* Mensagens */
.messages {
    margin: 20px auto; /* Centraliza horizontalmente */
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    display: flex; /* Adiciona flexbox */
    margin-bottom: 20px;
    justify-content: space-between;
    font-family: 'Arial', sans-serif;
    
}

.alert {
    padding: 20px;
    border-radius: 4px;
    margin-bottom: 10px;
    font-size: 14px;
}

.alert-success {
    background-color: #d4edda;
    color: #155724;
    border: 4px solid #c3e6cb;
}

.alert-error {
    background-color: #f8d7da;
    color: #721c24;
    border: 4px solid #f5c6cb;
}

.upload-icon {
    width: 50px; /* Define a largura da imagem */
    height: 50px; /* Define a altura da imagem */
    
    padding: 10px 10px;
    display: block; 
    cursor: pointer; 
}

/* Alinhamento horizontal */
.horizontal-container {
    display: flex; /* Alinha os itens horizontalmente */
    align-items: center; /* Centraliza verticalmente */
    gap: 10px; /* Espaçamento entre o menu e o botão Home */
    /* padding: 0 0 0 106px ; */
    
}

.vertical-container {
    flex-direction: column; /* Empilha os elementos verticalmente */
    align-items: center; /* Centraliza verticalmente */
    gap: 10px; /* Espaçamento entre o menu e o botão Home */
}