/* Estilo básico para o corpo da página */
body {
    font-family: 'Arial', sans-serif;
    background-color: #f4f4f4;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    text-align: center;
}

/* Container principal */
.container {
    width: 100%;
    max-width: 100%;
    padding: 30px;
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
    margin: 20px;
    box-sizing: border-box;
}


/* Cabeçalho */
header {
    margin-bottom: 40px;
}

header h1 {
    font-size: 36px;
    color: #333;
    margin-bottom: 10px;
    text-transform: uppercase;
}

header p {
    font-size: 18px;
    color: #777;
}

h1, h2 {
            color: #1E3A8A;
            text-align: left;
        }
        h1 {
            font-size: 32px;
            margin-bottom: 20px;
        }
        h2 {
            font-size: 24px;
            margin-top: 20px;
        }
        p {
            font-size: 16px;
            margin-bottom: 10px;
            text-align: left;
        }
        ul {
            margin-left: 20px;
            list-style-type: square;
            text-align: left;
        }

/* Estilos para o formulário de seleção da estação */
.station-form {
    margin: 20px 0;
    text-align: center;
}

.station-form label {
    font-size: 16px;
    margin-right: 10px;
}

.station-form select {
    padding: 8px;
    font-size: 16px;
    border-radius: 5px;
    border: 1px solid #ddd;
}

.station-form button {
    padding: 10px 20px;
    font-size: 16px;
    margin-left: 10px;
    background-color: #000;  /* Azul claro */
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: 0.3s ease;
}

.station-form button:hover {
    background-color: #000;  /* Azul mais escuro */
}


/* Estilo da caixa de login */
.login-container {
    background-color: #fff;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
    width: 100%;
    max-width: 400px;
    box-sizing: border-box;
    margin: 0 15px; /* Adiciona margens laterais para não encostar na tela */
}

/* Cabeçalho da caixa de login */
.login-container h2 {
    margin-bottom: 20px;
    font-size: 24px;
    color: #333;
}

.error {
    color: red;
    margin-bottom: 15px;
    text-align: center;
    font-size: 14px;
}

/* Estilo do formulário de login */
form {
    display: flex;
    flex-direction: column;
    align-items: stretch; /* Alinha os inputs e botões para preencher o container */
}

label {
    margin-bottom: 2px;
	margin-top: 8px;
	font-weight: bold;
    font-size: 13px;
    color: #333;
    text-align: left;
}

.fuel_result_box {
    margin-bottom: 2px;
	margin-top: 8px;
	font-weight: bold;
    font-size: 13px;
    color: #333;
    text-align: left;
}

/* Estilo dos campos de entrada */
input[type="email"], input[type="password"] {
    width: 100%;
    padding: 12px;
    margin-bottom: 20px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 16px;
    box-sizing: border-box;
}

/* Tabela de Movimentos */
table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 30px;
    box-sizing: border-box;
    font-family: 'Arial', sans-serif;
}

/* Cabeçalho da Tabela */
table th {
    background-color: #4CAF50;
    color: white;
    font-size: 14px;
    font-weight: 600;
    padding: 15px;
    text-align: left;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
}

/* Células da Tabela */
table td {
    background-color: #f9f9f9;
    color: #333;
    padding: 12px 15px;
    text-align: left;
    font-size: 12px;
    border: 1px solid #ddd;
    border-bottom: 2px solid #eee;
}
/* Estilos para a tabela de movimentos */
.movements-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
    background-color: #f9f9f9;
    border-radius: 10px;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
}

.movements-table th, .movements-table td {
    padding: 12px 15px;
    text-align: left;
    border-bottom: 1px solid #ddd;
}

.movements-table th {
    background-color: #000;  /* Azul claro */
    color: white;
}

.movements-table tr:nth-child(even) {
    background-color: #f2f2f2;
}

.movements-table tr:hover {
    background-color: #e0e0e0;
}

.movements-table td {
    font-size: 14px;
}

/* Alternância de Linhas (para facilitar a leitura) */
table tbody tr:nth-child(odd) {
    background-color: #f4f4f4;
}

table tbody tr:nth-child(even) {
    background-color: #ffffff;
}

/* Efeito de hover para as linhas */
table tbody tr:hover {
    background-color: #e6f7e6; /* Cor suave quando passa o mouse */
    cursor: pointer;
}

/* Células específicas */
table td:nth-child(3), table td:nth-child(4) {
    text-align: right;
    font-weight: 500;
}

/* Responsável em itálico */
table td:nth-child(5) {
    font-style: italic;
    color: #555;
}

/* Estilo para o Caption da Tabela */
table caption {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 12px;
    color: #333;
    text-align: left;
}

/* Estilo da Tabela em dispositivos móveis */
@media (max-width: 768px) {
    /* Reduzir o tamanho da fonte e espaçamento */
    table th, table td {
        font-size: 14px;
        padding: 10px;
    }

    /* Tabela se ajusta ao tamanho da tela */
    table {
        width: 100%;
        overflow-x: auto;
    }

    /* Texto em negrito para cabeçalhos e alinhamento */
    table th {
        font-size: 16px;
        font-weight: 600;
    }
}

@media (max-width: 480px) {
    table th, table td {
        font-size: 12px;
        padding: 8px;
    }

    table caption {
        font-size: 16px;
    }
}

/* Estilo de mídia para responsividade */
@media (max-width: 768px) {
    body {
        padding: 10px;
    }

    .container {
        padding: 20px;
        margin: 10px;
    }

    header h1 {
        font-size: 28px;
    }

    header p {
        font-size: 16px;
    }

    form label {
        font-size: 14px;
    }

    form select, form button {
        font-size: 14px;
    }

    table th, table td {
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    header h1 {
        font-size: 22px;
    }

    form button {
        font-size: 14px;
    }

    table th, table td {
        font-size: 12px;
    }
}
/* Estilo para o Cabeçalho */
header {
    background-color: #FFF;  /* Azul escuro 1E3A8A*/
    color: white;
    padding: 20px 0;
    text-align: center;
    position: relative; /* Para permitir a posição do idioma no canto superior direito */
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
}

header .logo-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
}

header .logo {
    max-width: 100%; /* Ajusta a largura ao tamanho do container */
    height: auto; /* Mantém a proporção */
}

/* Responsividade para telas menores */
@media (max-width: 768px) {
    header .logo {
        max-width: 70%; /* Ajusta o tamanho para telas menores */
    }
}

@media (max-width: 480px) {
    header .logo {
        max-width: 50%; /* Ajusta ainda mais para dispositivos muito pequenos */
    }
}
header h1 {
    font-size: 36px;
    margin: 0;
    color: #fff;
}

header p {
    font-size: 16px;
    margin-top: 5px;
    color: #1E3A8A;
    text-align: center;
    text-transform: uppercase;
    font-weight: bolder;
}

/* grafico pagamentos*/

#paymentsChart {
    max-width: 650px;
    max-height: 650px;
    margin: 0 auto;
}

/* Estilo para a caixa de seleção de idioma */
.language-selector {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 10; /* Certifica que o selector de idioma aparece por cima de outros elementos */
}

.language-selector select {
    background-color: #fff;
    color: #333;
    font-size: 16px;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 5px;
    cursor: pointer;
    appearance: none; /* Para remover o estilo padrão de alguns navegadores */
    -webkit-appearance: none;
    -moz-appearance: none;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

/* Estilo da seta da caixa de seleção */
.language-selector select:focus {
    outline: none;
    border-color: #1E3A8A; /* Cor da borda quando o campo está em foco */
}

/* Seta personalizada */
.language-selector select::-ms-expand {
    display: none; /* Remove a seta padrão em IE */
}


/* Menu responsivo para telas menores */
@media (max-width: 768px) {
    
}
/* Ocultar o menu hambúrguer em telas maiores (desktop) */
@media (min-width: 769px) {
    
}

/* Estilo básico para a tabela */
table {
    width: 100%; /* Ocupa todo o espaço disponível */
    border-collapse: collapse;
    margin: 20px 0;
    font-size: 16px;
    text-align: left;
    background-color: #f9f9f9;
    border: 1px solid #ddd; /* Borda ao redor da tabela */
}

/* Cabeçalho da tabela */
table th {
    background-color: #000; /* Azul claro */
    color: white;
    padding: 10px;
    text-align: left;
}

/* Células da tabela */
table td {
    padding: 10px;
    border-bottom: 1px solid #ddd;
}

/* Alternância de cores para linhas */
table tr:nth-child(even) {
    background-color: #f2f2f2;
}

/* Contêiner responsivo */
.table-container {
    width: 100%; /* Ajusta ao tamanho do dispositivo */
    overflow-x: auto; /* Permite rolagem horizontal */
    -webkit-overflow-scrolling: touch; /* Suaviza o rolar em dispositivos móveis */
    margin-bottom: 20px;
}

/* Ajustes para telas pequenas */
@media (max-width: 768px) {
    table {
        font-size: 14px; /* Reduz tamanho da fonte */
    }

    table th, table td {
        padding: 8px; /* Ajusta o espaçamento */
    }
}

@media (max-width: 480px) {
    table {
        font-size: 12px; /* Fonte ainda menor para dispositivos muito pequenos */
    }

    table th, table td {
        padding: 6px;
    }
}
/* Container principal para centralizar e definir largura */
        .form-container {
            max-width: 100%;
            margin: 0 auto;
            padding: 20px;
            background-color: #f8f9fa;
            border-radius: 8px;
        }

        /* Estilo das zonas gráficas */
        .section-zone {
            background-color: #e9ecef;
            border: 1px solid #d6d8db;
            border-radius: 8px;
            padding: 15px;
            margin-bottom: 25px;
        }

        .section-zone h3 {
            font-size: 18px;
            margin-bottom: 15px;
            color: #495057;
            font-weight: bold;
        }

        .form-row {
            display: flex;
            flex-wrap: wrap;
            margin-bottom: 15px;
        }

        .form-row label {
            width: 100%;
            margin-right: 5%;
            margin-bottom: 5px;
            font-weight: 500;
			float: left;
        }

.checkbox-group{
            width: 100%;
	}

        .form-row input, .form-row select {
            width: 65%;
            padding: 8px;
            margin-bottom: 5px;
            border: 1px solid #ced4da;
            border-radius: 4px;
        }

        .form-row .half {
            width: 48%;
            margin-right: 4%;
        }

        .form-row .half:last-child {
            margin-right: 0;
        }

.form-row .third {
            width: 30%;
            margin-right: 3%;
        }

        .form-row .third:last-child {
            margin-right: 0;
        }

        /* Estilo do cabeçalho do formulário */
        .form-header {
            text-align: center;
            font-size: 24px;
            margin-bottom: 20px;
            color: #343a40;
        }

        /* Botão de envio */
        button {
            margin-top: 20px;
            padding: 12px 25px;
            background-color: #000;
            color: white;
            border: none;
            cursor: pointer;
            border-radius: 5px;
        }

        button:hover {
            background-color: #000;
        }

        /* Ajustes para telas menores */
        @media (max-width: 768px) {
            .form-row label, .form-row input, .form-row select {
                width: 100%;
                margin-right: 0;
            }

            .form-row .half {
                width: 100%;
                margin-right: 0;
            }
        }