/* Estilos básicos */
header {
    text-align: center;
    font-size: medium;
}

footer {
    font-size: xx-small;
    background-color: rgb(3, 15, 63);
    color: #fff;
    padding: 7px 0;
    width: 100%;
    bottom: 0;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
    display: flex; /* Alinha as colunas horizontalmente */
    align-items: center; /* Alinha verticalmente no centro */
    justify-content: center; /* Centraliza o conteúdo horizontalmente */
    flex-wrap: wrap; /* Permite que o conteúdo vá para a linha seguinte se necessário */
    z-index: 1000;
}


.footer-content {
    max-width: 1200px;
    width: 100%;
    display: flex;
    justify-content: space-between; /* Distribui as colunas */
    align-items: center; /* Alinha verticalmente no centro */
}

.footer-left {
    flex: 2; /* Define a coluna da esquerda como 2 partes */
    margin-right: 10px; /* Adiciona espaço entre as colunas */
}

.footer-right {
    flex: 3; /* Define a coluna da direita como 3 partes */
    text-align: center; /* Centraliza o texto e os logotipos na coluna direita */
}
.footer-left p {
    margin: 5px 0; /* Reduz o espaçamento entre as linhas de texto */
}

.footer-divider {
    height: 60px; /* Ajuste a altura conforme necessário */
    border-left: 1px solid orange; /* Linha branca no meio */
    margin: 0 15px; /* Reduz o espaçamento nas laterais */
}

.footer-right {
    text-align: center; /* Centraliza o texto e os logotipos na coluna direita */
}

.footer-brands {
    display: flex;
    justify-content: center; /* Centraliza as imagens horizontalmente */
    flex-wrap: wrap; /* Permite que as imagens se movam para a linha abaixo se necessário */
    gap: 15px; /* Reduz o espaçamento entre as imagens */
    margin-top: 10px; /* Adiciona uma margem superior para separar do texto */
}

.footer-brands img {
    height: 35px; /* Aumenta a altura das imagens dos logotipos */
    width: auto; /* Mantenha a proporção das imagens */
    max-width: 100%; /* Garante que as imagens não excedam o contêiner */
    object-fit: contain; /* Mantém a imagem proporcional */
    margin: 0 10px; /* Adiciona margem entre as imagens, se necessário */
}

.sidebar {
    width: 40px; /* Largura da sidebar */
    height: 100%; /* Altura da sidebar */
    background-color: #030f3f; /* Cor de fundo da sidebar */
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 150px;
    position: fixed; /* Sidebar fixa à esquerda */
    z-index: 1;

}

.icon-link {
    color: white;
    text-decoration: none;
    margin: 15px 0;
    font-size: 15px; /* Tamanho dos ícones */
}

.icon-link:hover {
    color: orange; /* Cor ao passar o mouse */
}

.content {
    margin-left: 60px; /* Espaço para a sidebar */
    padding: 20px;
    width: calc(100% - 60px); /* Largura do conteúdo ajustada */
}


.logo-maxia {
    height: 15px; /* Ajuste o tamanho da logo específica */
    width: auto; /* Mantém a proporção da imagem */
}

.whatsapp-icon {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1000;
    background-color: transparent;
    color: #25D366;
    padding: 15px;
    transition: transform 0.3s ease;
}

.whatsapp-icon:hover {
    transform: scale(1.1);
}

.whatsapp-icon i {
    font-size: 40px; /* Tamanho do ícone */
}

.info-list {
    text-align: left;
    padding: 20px; /* Adicione um padding para espaçamento interno */
    font-size: medium;
}

main {
    font-size: medium;
    padding: 50px; /* Ajuste para não ficar tão grande em telas menores */
    text-align: center;
    background-color:  #030f3f;
    background-image: url('../images/backgroundtest2.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    justify-content: center;
    min-height: 100vh;
    display: block;
    align-items: center;
    width: 100%;
}

.form-control {
    height: 50px; /* Ajuste a altura conforme necessário */
    padding: 10px; /* Ajuste o padding para centralizar o texto */
    font-size: 16px; /* Ajuste o tamanho da fonte, se necessário */
}

/* Estilo do Container de Login */
.login-container {
    background-color: #ffffff;
    padding: 30px;
    margin-top: 30px; /* Adiciona margem superior para afastar do header */
    border: 2px solid #030f3f;
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15); /* Sombra mais suave */
    transition: transform 0.3s ease-in-out;
}

.login-container:hover {
    transform: translateY(-5px); /* Efeito de elevação ao passar o mouse */
}

.login-form h2 {
    font-weight: bold;
    color: #030f3f; /* Cor do título */
}

.login-form .form-group label {
    font-weight: 500;
    color: #333;
}

.login-form .form-control {
    border: 1px solid #ced4da;
    border-radius: 5px;
    padding: 10px;
    font-size: 16px;
}

.login-form .btn-primary {
    margin-top: 25px;
    background-color: #030f3f;
    border-color: #030f3f;
    transition: background-color 0.3s ease;
}

.login-form .btn-primary:hover {
    background-color: #ff9100;
    border-color: #ff9100;
}

.links a {
    color: #030f3f;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s ease;
}

.links a:hover {
    color: #ff9100;
}

.lock-container {
    margin-left: auto; /* Empurra o ícone para a direita */
    margin-right: 10px; /* Ajuste o espaço à direita, se necessário */
}

.lock-icon {
    color: #ff9100; /* Cor do cadeado */
    font-size: 15px; /* Tamanho menor do ícone */
    transition: transform 0.3s ease-in-out, color 0.3s ease-in-out;
}

.lock-icon:hover {
    transform: rotate(20deg); /* Efeito de rotação ao passar o mouse */
    color: #030f3f; /* Muda a cor ao passar o mouse */
}

.logout-icon {
    color: #ff9100; /* Cor do cadeado */
    font-size: 15px; /* Tamanho menor do ícone */
    transition: transform 0.3s ease-in-out, color 0.3s ease-in-out;
}

.logout-icon:hover{
    transform: rotate(20deg); /* Efeito de rotação ao passar o mouse */
    color: #030f3f; /* Muda a cor ao passar o mouse */
}

.email-icon.disabled {
    cursor: not-allowed;
}

/* Estilo para o container de informações */
.info-container {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
    background-color: #fff;
    border: 2px solid #030f3f;
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15); /* Sombra mais suave */
    transition: transform 0.3s ease-in-out;
    text-align: left;
}
.oficina-container {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
    background-color: #fff;
    border: 2px solid #030f3f;
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15); /* Sombra mais suave */
    transition: transform 0.3s ease-in-out;
    text-align: center;
    
}

.form-row-oficina {
    width:100%;
    flex-direction: column;
    align-items: center; /* Centraliza os campos horizontalmente */
}

.info-container h2 {
    font-size: 24px;
    color: #333;
}

.info-container .row {
    margin: 0;
}

.info-container .col-md-12 {
    padding: 0;
}

.info-container p {
    margin-bottom: 15px;
    font-size: 16px;
    color: #333;
}

.info-container i {
    color: #030f3f; /* Cor para ícones */
}

.info-container strong {
    font-weight: bold;
}
.status-yellow {
    color: #ffc107; /* Amarelo */
    font-weight: bold;
}

.navbar {
    font-size: medium;
    background-color: #030f3f;
    color: #030f3f;
    padding: 5px 10px;
    height: 70px;
    position: fixed;
    top: 0;
    width: 100%;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    z-index: 1000;
    text-align: center;
    justify-content: flex-start;
}

.navbar-toggler {
    border: none; /* Remove a borda do botão */
    font-size: 1.25rem; /* Aumenta o tamanho do ícone de colapso */
}

.navbar-toggler-icon {
    background-color: #ff9100; /* Altera a cor do ícone para destacá-lo */
}

/* Remove o fundo laranja do menu colapsável */
.navbar-collapse {
    background-color: transparent; /* Remove o fundo */
}

.navbar-nav .nav-item:last-child {
    border-bottom: none; /* Remove a linha da última opção */
}


/* Estilo geral para os links da navbar */
.navbar-nav .nav-link{
    color: #fff; /* Cor do texto por padrão */
    padding: 10px 15px; /* Espaçamento para melhor área clicável */
    text-decoration: none; /* Remover sublinhado */
}

/* Estilo para quando o mouse estiver sobre o link */
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus {
    color: #000; /* Texto preto ao passar o mouse */
    border-bottom: 2px solid orange; /* Borda inferior laranja */
    transition: background-color 0.3s ease, color 0.3s ease; /* Transição suave */
}

/* Estilo para o link ativo */
.navbar-nav .nav-link.active  {

    color: #000; /* Texto preto para link ativo */
    border-bottom: 2px solid orange; /* Borda inferior laranja para link ativo */
}
.navbar-toggler-icon {
    background-color: #030f3f;
}

.logo-navbar {
    display: inline-block; /* Garante que o link se ajuste ao tamanho da logo */
    height: 150px;
    width: auto;
    margin: 0;
    padding: 0;
}

.carousel-inner {
    width: 100%;
    height: auto;
    max-height: 400px; /* Limita a altura máxima em telas maiores */
    margin: 0 auto;
    border: 3px solid #030f3f;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.carousel-inner img {
    width: 100%;
    height: auto; /* Redimensiona a altura automaticamente */
}

.news-cards {
    padding: 2rem 0;
}

.news-cards .card {
    margin: 0 auto;
    border: 5px solid #030f3f;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
}

.news-cards .card-img-top {
    height: 200px;
    overflow: hidden;
}

.news-cards iframe {
    width: 100%;
    height: 100%;
}

.card-body {
    background-color: #030f3f; /* Cor de fundo do card-body */
    color: #ff9100; /* Cor do texto do card-body */
    padding: 15px; /* Ajuste o padding conforme necessário */
}

.card-body a {
    color: #ff9100; /* Cor do texto dos links */
}

.card-body a:hover {
    color: #ffffff; /* Cor do texto dos links ao passar o mouse */
}

/* Estilo da tabela */
.table {
    width: 100%; /* Largura total do container */
    border-collapse: collapse; /* Remove espaços entre as bordas das células */
    margin: 0 auto; /* Centraliza a tabela horizontalmente */
    font-size: 12px;
}

/* Estilo das células da tabela */
.table th, .table td {
    padding: 12px; /* Espaçamento interno das células */
    text-align: left; /* Alinha o texto à esquerda */
    border-bottom: 1px solid #ddd; /* Borda inferior leve */
}

/* Estilo do cabeçalho da tabela */
.table thead th {
    background-color: #030f3f; /* Cor de fundo do cabeçalho */
    color: #ffffff; /* Cor do texto do cabeçalho */
    font-weight: bold; /* Negrito no texto do cabeçalho */
}

/* Estilo das linhas da tabela */
.table tbody tr:nth-child(odd) {
    background-color: #f9f9f9; /* Cor de fundo das linhas ímpares */
}

.table tbody tr:hover {
    background-color: #f1f1f1; /* Cor de fundo ao passar o mouse */
}

/* Estilo para a seção de estatísticas */
.statistics-section {
    display: flex;
    justify-content: space-between;
    align-items: flex-start; /* Alinha os itens no início da linha */
    flex-wrap: nowrap; /* Impede que os gráficos quebrem para outra linha */
    gap: 20px; /* Espaçamento entre os gráficos */
}
.statistics-list {
    list-style-type: none;
    padding: 0;
    margin: 0;
    font-size: 14px; /* Tamanho da fonte menor */
}

.statistics-list li {
    padding: 4px 0; /* Menos espaçamento entre os itens */
    border-bottom: 1px solid #ddd; /* Linha de separação entre os itens */
}

.statistics-list li:last-child {
    border-bottom: none; /* Remove a borda do último item */
}

.page-title {
    margin-bottom: 20px; /* Espaçamento abaixo do título */
    font-size: 24px; /* Tamanho do texto do título */
    color: #030f3f; /* Cor do texto do título */
}

.dashboard-content {
    margin-top: 25px;
    background-color: #ffffff; /* Cor de fundo branca */
    padding: 30px; /* Padding para espaçamento interno */
    border-radius: 10px; /* Cantos arredondados */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15); /* Sombra suave */
}

.d-flex {
    display: flex;
    justify-content: space-between;
}

/* Estilo dos gráficos */
.chart-container {
    width: 24%; /* Cada gráfico ocupa 24% do container para garantir que quatro caibam lado a lado */
    display: flex;
    flex-direction: column;
    align-items: center; /* Centraliza os gráficos horizontalmente */
    min-width: 250px; /* Define um tamanho mínimo para que os gráficos não fiquem muito pequenos em telas menores */
    text-align: center;
}

.chart-container-linha{
    width: 1200px; /* Defina um valor maior para o gráfico */
    display: flex;
    flex-direction: column;
    align-items: center; /* Centraliza os gráficos horizontalmente */
    min-width: 250px; /* Define um tamanho mínimo para que os gráficos não fiquem muito pequenos em telas menores */
    text-align: center;
    overflow-x: auto; /* Habilita rolagem horizontal */
}


/* Ajusta o tamanho dos gráficos */
.chart-container canvas {
    width: 90% !important; /* Reduz o tamanho dos gráficos */
    max-width: 350px; /* Define uma largura máxima */
    height: auto !important; /* Mantém a proporção dos gráficos */
}

/* Ajusta o tamanho dos títulos dos gráficos */
.chart-container h3 {
    font-size: 16px; /* Ajusta o tamanho da fonte dos títulos */
    margin-bottom: 10px; /* Espaço abaixo dos títulos */
    color: #030f3f; /* Define a cor do título */
}

/* Estilo dos ícones */
.chart-container h3 i {
    margin-right: 8px; /* Espaço entre o ícone e o título */
    color: #007bff; /* Cor do ícone */
}

.separator {
    height: 350px; /* Ajuste a altura conforme necessário */
    border-left: 1px solid #030f3f; /* Linha branca no meio */
    margin: 0 15px; /* Reduz o espaçamento nas laterais */
}

.chart-total {
    margin-top: 10px; /* Espaçamento acima do total */
    font-size: 16px; /* Tamanho da fonte do total */
    color: #333; /* Cor do texto do total */
}

.info-button {
    margin-top: 10px; /* Espaçamento acima do botão */
    margin-bottom: 10px;
    padding: 5px 10px; /* Padding interno do botão */
    font-size: 14px; /* Tamanho da fonte do botão */
    color: #fff; /* Cor do texto do botão */
    background-color: #030f3f;
    border-color: #030f3f;
    transition: background-color 0.3s ease;
    border: none; /* Remove a borda do botão */
    border-radius: 5px; /* Cantos arredondados do botão */
    cursor: pointer; /* Cursor pointer para indicar clicável */
}

.info-button:hover {
    background-color: #ff9100;
    border-color: #ff9100;
}

.cadastro-button{

    margin-top: 10px; /* Espaçamento acima do botão */
    margin-bottom: 10px;
    padding: 10px 10px; /* Padding interno do botão */
    font-size: 14px; /* Tamanho da fonte do botão */
    color: #fff; /* Cor do texto do botão */
    background-color: #030f3f;
    border-color: #030f3f;
    transition: background-color 0.3s ease;
    border: none; /* Remove a borda do botão */
    border-radius: 5px; /* Cantos arredondados do botão */
    cursor: pointer; /* Cursor pointer para indicar clicável */
}

.cadastro-button:hover{
    background-color: #ff9100;
    border-color: #ff9100;
}

.d-none {
    display: none; /* Esconde os elementos com esta classe */
}

/* Estilo do modal */
.modal-content {
    background-color: #ffffff; /* Cor de fundo do modal */
    border: 2px solid #030f3f; /* Borda do modal */
    border-radius: 10px; /* Cantos arredondados */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15); /* Sombra suave */
}

.modal-body p {
    margin-bottom: 5px; /* Ajuste conforme necessário */
  }

.modal-header {
    border-bottom: 1px solid #ddd; /* Linha abaixo do cabeçalho */
    background-color: #030f3f; /* Cor de fundo do cabeçalho */
    color: #ffffff; /* Cor do texto do cabeçalho */
}

.modal-title {
    font-size: 20px; /* Tamanho da fonte do título */
    font-weight: bold; /* Negrito no título */
}

.modal-body {
    font-size: medium; /* Tamanho da fonte do corpo do modal */
    color: #333; /* Cor do texto do corpo do modal */
}

.modal-footer {
    border-top: 1px solid #ddd; /* Linha acima do rodapé */
    display: flex; /* Alinha os botões horizontalmente */
    justify-content: flex-end; /* Alinha os botões à direita */
}

.modal-footer .btn-primary {
    background-color: #030f3f; /* Cor de fundo do botão principal */
    border-color: #030f3f; /* Cor da borda do botão principal */
    transition: background-color 0.3s ease; /* Transição suave para a cor de fundo */
}

.modal-footer .btn-primary:hover {
    background-color: #ff9100; /* Cor de fundo do botão ao passar o mouse */
    border-color: #ff9100; /* Cor da borda do botão ao passar o mouse */
}

.modal-footer .btn-secondary {
    background-color: #6c757d; /* Cor de fundo do botão secundário */
    border-color: #6c757d; /* Cor da borda do botão secundário */
    transition: background-color 0.3s ease; /* Transição suave para a cor de fundo */
}

.modal-footer .btn-secondary:hover {
    background-color: #5a6268; /* Cor de fundo do botão secundário ao passar o mouse */
    border-color: #5a6268; /* Cor da borda do botão secundário ao passar o mouse */
}
.modal-body .small-text {
    font-size: 0.8rem; /* Ajuste o tamanho da fonte conforme necessário */
}

.tooltip {
    position: relative;
    display: inline-block;
}

.tooltip .tooltiptext {
    visibility: hidden;
    width: 180px;
    background-color: #f9f9f9;
    color: #555;
    text-align: center;
    border-radius: 5px;
    padding: 5px;
    border: 1px solid #ccc;
    position: absolute;
    z-index: 1;
    bottom: 125%; /* Posição acima do campo */
    left: 50%;
    margin-left: -90px;
    opacity: 0;
    transition: opacity 0.3s;
}

.tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    top: 100%; /* Parte inferior do tooltip */
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #ccc transparent transparent transparent;
}

.tooltip i {
    color: #007BFF;
    cursor: pointer;
    font-style: normal;
    font-weight: bold;
    font-size: 18px;
}

.tooltip .tooltiptext.show {
    visibility: visible;
    opacity: 1;
}

/* Consultas de Mídia */
@media (max-width: 768px) {
    main {
        padding: 20px;
    }

    footer {
        flex-direction: column; /* Empilha as colunas verticalmente */
        padding: 10px; /* Reduz o padding para o footer */
        font-size: small; /* Ajusta o tamanho da fonte */
        height: auto; /* Permite que o footer tenha altura variável */
    }

    .footer-content {
        flex-direction: column; /* Empilha o conteúdo verticalmente */
        align-items: center; /* Centraliza o conteúdo horizontalmente */
    }

    .footer-left, .footer-right {
        flex: none; /* Remove o crescimento flexível */
        width: 100%; /* Faz com que ambas as colunas ocupem toda a largura */
        text-align: center; /* Centraliza o texto */
    }

    .footer-left {
        margin-bottom: 10px; /* Adiciona espaço entre as colunas */
    }

    .footer-right {
        margin-bottom: 10px; /* Adiciona espaço entre as colunas */
    }

    .footer-brands img {
        height: 30px; /* Ajusta o tamanho das imagens dos logotipos */
    }
    
    .footer-divider {
        display: none; /* Remove a linha de separação em telas menores */
    }

    .login-container {
        padding: 20px;
        margin-top: 80px;
        text-align: center; /* Centraliza o texto e os campos do formulário */
    }
    .info-container {
        margin-top:80px;
    }

    .navbar {
        height: auto;
        padding: 5px 10px;
        z-index: 1000; /* Garantir que o z-index seja suficiente */
    }

    .navbar-toggler {
        font-size: 1.1rem; /* Ajuste o tamanho do ícone do colapso */
    }

    .navbar-nav {
        margin-top: 10px;
        text-align: center; /* Centralize o texto no menu colapsado */
    }

    .logo-navbar {
        height: 80px;
    }

    .navbar-nav .nav-item:last-child {
        border-bottom: none; /* Remove a linha da última opção */
    }


    .lock-container {
        margin-right: 0;
        margin-top: 10px; /* Adiciona uma margem superior para separar do menu */
    }

    .footer-brands img {
        height: 40px;
    }

    .news-cards .card-img-top {
        height: 150px;
    }

    .form-control {
        height: 45px; /* Ajusta a altura dos campos de entrada */
        font-size: 14px; /* Ajusta o tamanho da fonte */
        width: 100%; /* Faz com que os campos ocupem a largura total do contêiner */
        max-width: 500px; /* Define uma largura máxima para os campos */
        margin: 0 auto; /* Centraliza os campos horizontalmente */
        box-sizing: border-box; /* Inclui o padding e a borda no cálculo da largura total */
    }

    .form-row {
        flex-direction: column;
        align-items: center; /* Centraliza os campos horizontalmente */
    }

    .form-group {
        width: 100%; /* Faz com que os grupos de formulário ocupem toda a largura do contêiner */
        max-width: 500px; /* Define uma largura máxima para os grupos de formulário */
        margin: 0 auto; /* Centraliza os grupos de formulário horizontalmente */
    }



    .form-group label {
        font-size: 14px; /* Ajusta o tamanho da fonte dos rótulos */
    }
 

    .form-group.col-7, .form-group.col-5, .form-group.col-4, .form-group.col-8 {
        width: 100%; /* Ajusta a largura dos grupos de formulário */
    }

    .form-row .form-group {
        margin-right: 0;
        margin-left: 0;
        width: 100%; /* Faz com que os campos ocupem a largura total */
    }
    .carousel-inner {
        z-index: 500; /* Manter o z-index abaixo do header */
        margin-top: 100px; /* Ajuste a margem superior conforme necessário */
    }

    .btn-primary {
        width: 100%; /* Faz com que o botão ocupe a largura total */
        font-size: 16px; /* Ajusta o tamanho da fonte do botão */
        padding: 12px; /* Ajusta o padding do botão */
        max-width: 500px; /* Define uma largura máxima para o botão */
        margin: 0 auto; /* Centraliza o botão horizontalmente */
    }

     /* Ajustes para a tabela */
     .table {
        font-size: 14px; /* Ajusta o tamanho da fonte */
        overflow-x: auto; /* Adiciona rolagem horizontal se necessário */
        display: block; /* Faz a tabela se comportar como bloco para suportar rolagem */
        width: 100%; /* Garante que a tabela ocupe toda a largura disponível */
        max-width: 1100px; /* Define uma largura máxima para a tabela */
        margin: 20px auto; /* Adiciona margem ao redor da tabela */
    }

    .table th, .table td {
        padding: 8px; /* Ajusta o padding das células */
    }

    .table thead th {
        font-size: 12px; /* Ajusta o tamanho da fonte do cabeçalho */
    }

    .page-title {
        margin-bottom: 20px; /* Adiciona espaço abaixo do título */
        font-size: 24px; /* Ajusta o tamanho da fonte do título */
    }

    .search-field {
        margin-bottom: 20px; /* Adiciona espaço abaixo do campo de busca */
    }

    .chart-container {
        width: 100%; /* Ajusta a largura da seção de gráficos para ocupar 100% da largura disponível */
    }

    .separator {
        height: 300px; /* Ajuste a altura conforme necessário */
        border-left: none; /* Remove a linha de separação em telas menores */
        margin: 10px 0; /* Ajusta a margem */
    }

    .chart-total {
        font-size: 14px; /* Ajusta o tamanho da fonte do total */
    }

    .d-flex {
        flex-direction: column; /* Empilha os elementos verticalmente */
        align-items: center; /* Centraliza os elementos horizontalmente */
    }

    .info-button {
        font-size: 12px; /* Ajusta o tamanho da fonte do botão */
    }
}

@media (max-width: 576px) {
    .navbar {
        padding: 7px 0;
        z-index: 1000; /* Garantir que o z-index seja suficiente */
    }
    footer {
        padding: 5px; /* Reduz ainda mais o padding para telas muito pequenas */
        font-size: x-small; /* Ajusta o tamanho da fonte para telas menores */
    }

    .footer-content {
        padding: 0; /* Remove o padding interno do footer */
    }

    .footer-left, .footer-right {
        width: 100%; /* Garante que ambas as colunas ocupem toda a largura */
    }

    .footer-left {
        margin-bottom: 5px; /* Reduz o espaço entre as colunas */
    }

    .footer-right {
        margin-bottom: 5px; /* Reduz o espaço entre as colunas */
    }

    .footer-brands img {
        height: 25px; /* Ajusta o tamanho das imagens dos logotipos para telas muito pequenas */
    }
    

    .logo-navbar {
        height: 80px;
    }

    .login-container {
        padding: 20px;
        margin-top: 110px;
        font-size: small;
    }
    .info-container {
        margin-top:110px;
        font-size: small;
    }

    .carousel-inner {
        margin-top: 100px; /* Ajuste a margem superior conforme necessário */
        max-height: 300px;
        z-index: 500; /* Manter o z-index abaixo do header */
        
    }
    .form-control {
        height: 40px; /* Ajusta a altura dos campos de entrada */
        font-size: 12px; /* Ajusta o tamanho da fonte */
        max-width: 300px; /* Define uma largura máxima para os campos em telas menores */
        width: 100%; /* Faz com que os campos ocupem a largura total do contêiner */
    }

    .btn-primary {
        font-size: 14px; /* Ajuste o tamanho do botão */
        padding: 10px 20px; /* Ajuste o padding do botão */
    }

    .lock-icon {
        font-size: 18px;
    }

    .news-cards .card-img-top {
        height: 120px;
    }


    .form-group label {
        font-size: 12px; /* Ajusta o tamanho da fonte dos rótulos */
    }

    .btn-primary {
        font-size: 14px; /* Ajusta o tamanho da fonte do botão */
        padding: 10px; /* Ajusta o padding do botão */
        max-width: 300px; /* Define uma largura máxima para o botão em telas menores */
    }
     /* Ajustes para a tabela */
     .table {
        font-size: 12px; /* Ajusta o tamanho da fonte para telas muito pequenas */
        overflow-x: auto; /* Adiciona rolagem horizontal se necessário */
        display: block; /* Faz a tabela se comportar como bloco para suportar rolagem */
        width: 100%; /* Garante que a tabela ocupe toda a largura disponível */
        max-width: 100%; /* Ajusta a largura máxima da tabela para telas menores */
        margin: 10px auto; /* Adiciona margem ao redor da tabela */
    }

    .table th, .table td {
        padding: 5px; /* Ajusta o padding das células */
    }

    .page-title {
        font-size: 18px; /* Ajusta o tamanho da fonte do título */
        margin-bottom: 15px; /* Adiciona espaço abaixo do título */
    }

    .search-field {
        margin-bottom: 15px; /* Adiciona espaço abaixo do campo de busca */
    }

    .chart-container {
        width: 100%; /* Ajusta a largura da seção de gráficos para ocupar 100% da largura disponível */
    }

    .separator {
        height: 200px; /* Ajuste a altura conforme necessário */
    }

    .chart-total {
        font-size: 12px; /* Ajusta o tamanho da fonte do total */
    }
}