body {
    padding-top: 5px; /* Altura da navbar fixa */
    margin: 0;
    overflow-x: hidden; /* Evita rolagem horizontal indesejada */
    padding-bottom: 30px; /* Ajuste conforme a altura do rodapé */
}

.navbar {
    padding: 0.5rem 1rem;
    flex-wrap: wrap;
}

.navbar-nav .nav-link {
    padding-right: 0.5rem;
    padding-left: 0.5rem;
}

/* Ajusta a imagem do item para caber na tela */
.item-image {
    width: 100%; /* Faz a imagem ocupar a largura disponível */
    max-width: 200px; /* Define um tamanho máximo para a imagem */
    height: auto; /* Mantém a proporção da imagem */
    object-fit: contain;
}


/* Ajusta a tabela para dispositivos móveis */
.table-responsive {
    overflow-x: auto; /* Permite rolagem horizontal se necessário */
    -webkit-overflow-scrolling: touch; /* Melhora a rolagem em dispositivos touch */
    max-height: 1000vh; /* Limita a altura máxima da tabela à altura da tela */
    overflow-y: auto; /* Permite rolagem vertical se a tabela for muito alta */
}

/* Ajustes específicos para dispositivos móveis */
@media (max-width: 768px) {
    .form-control {
        font-size: 0.8rem; /* Reduz ainda mais o tamanho da fonte em telas pequenas */
        padding: 0.4rem; /* Reduz o padding em telas pequenas */
    }
    .btn {
        font-size: 0.8rem; /* Reduz o tamanho da fonte do botão em telas pequenas */
        padding: 0.4rem 0.8rem; /* Reduz o padding do botão em telas pequenas */
    }
    .watermark {
        height: 40%; /* Ajuste a altura da marca d'água em dispositivos móveis */
        background-size: 100% auto; /* Ajusta o tamanho da imagem para manter a proporção */
    }
    .navbar-nav {
        flex-direction: column;
    }
    .navbar {
        padding-top: 15px;
    }
    .container {
        padding-top: 40px;
    }
    .input-group {
        flex-direction: column;
    }
    .input-group .form-control, .input-group .input-group-append {
        width: 100%;
    }
    .input-group .input-group-append {
        margin-top: 10px;
    }
    .fixed-header th {
        font-size: 14px;
    }
    .scrollable-table-responsive {
        max-height: 50vh;
        overflow-y: auto;
    }
}
.red {
    color: red;
    font-weight: bold;
}

.green {
    color: rgb(100, 200, 80);
    font-weight: bold;
}
@media (max-width: 660px) {
    body {
        padding-top: 60px; /* Ajusta o padding para dispositivos móveis */
    }

    .container {
        padding-top: 10px;
    }
}
@media (max-width: 480px) {
    body {
        padding-top: 60px; /* Ajusta o padding para dispositivos móveis */
    }
    .container {
        padding-top: 20px;
    }
    .navbar .nav-link {
        font-size: 0.8rem; /* Reduz o tamanho da fonte */
        padding: 0.25rem 0.5rem; /* Reduz o padding para economizar espaço */
    }
}
@media (max-width: 420px) {
    body {
        padding-top: 40px; /* Ajusta o padding para dispositivos móveis */
    }
    .container {
        padding-top: 20px;
    }
    .navbar .nav-link {
        font-size: 0.8rem; /* Reduz o tamanho da fonte */
        padding: 0.25rem 0.5rem; /* Reduz o padding para economizar espaço */
    }

    .navbar {
        padding: 0.25rem 0.5rem; /* Reduz o padding da navbar */
    }
}
@media (max-width: 300px) {
    html {
        font-size: 75%; /* Reduz o tamanho da fonte base em 25% */
    }
    h1 {
        font-size: 120%; 
    }
    body {
        padding-top: 40px; /* Ajusta o padding para dispositivos móveis */
    }
}
.watermark {
    position: fixed;
    top: 20%;
    left: 50%;
    transform: translateX(-50%);
    width: 70%;
    height: 70%;
    background-image: url("marca_agua2.png");
    background-size: 70% auto;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.1;
    z-index: -1;  
}

table {
    width: 100%;
    border-collapse: collapse;
}

th, td {
    padding: 8px;
    border-bottom: 1px solid #ddd;
}

th {
    background-color: #f2f2f2;
    text-align: left;
}

tr:hover {
    background-color: #f9f9f9; /* Destaca a linha ao passar o mouse */
}

/* Reduz o tamanho dos campos do formulário */
.form-control {
    font-size: 0.9rem; /* Reduz o tamanho da fonte */
    padding: 0.5rem; /* Reduz o padding */
    margin-bottom: 0.75rem; /* Ajusta a margem inferior */
}

/* Reduz o tamanho do botão */
.btn {
    font-size: 0.9rem; /* Reduz o tamanho da fonte */
    padding: 0.5rem 1rem; /* Reduz o padding */
}

/* Ajusta o textarea */
textarea.form-control {
    min-height: 100px; /* Define uma altura mínima menor para o textarea */
}
.table-container {
    max-height: 95vh; /* Limita a altura a 95% da altura da tela */
    overflow-y: auto; /* Adiciona rolagem vertical se o conteúdo for maior */
    margin-bottom: 20px; /* Espaço abaixo da tabela (opcional) */
}

/* Estilo para o rodapé */
footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    background-color: #f8f9fa; /* Cor de fundo do rodapé */
    padding: 10px;
    text-align: center;
    z-index: 1000; /* Garante que o rodapé fique acima de outros elementos */
}