.orcamento-valor,
.orcamento-gasto {
    font-weight: bold;
}

.orcamento-valor {
    color: #4caf50;
}

.orcamento-gasto {
    color: #f44336;
}

.orcamento-percentual {
    color: #ff9800;
    font-weight: bold;
}

.orcamento-container.bg-vermelho-claro {
    background-color: #ffe6e6;
}

.orcamento-container.bg-white {
    background-color: #fff;
}

.receita {
    background-color: #4caf50; /* Verde */
}

.receita:hover {
    background-color: #388e3c; /* Verde mais escuro */
}

.despesa {
    background-color: #f44336; /* Vermelho */
}

.despesa:hover {
    background-color: #c62828; /* Vermelho mais escuro */
}

.tipo-debito {
    background-color: #daa520;
}

.tipo-credito {
    background-color: #a2a2a2;
}

.divider {
    background-color: #69121b;
}

.categoria-LearnTech {
    background-color: #FFF8DC; /* Mais claro que Dourado */
}
.categoria-BrasilEstudo {
    background-color: #F0FFF0; /* Mais claro que Verde claro */
}
.categoria-VouDeMeia {
    background-color: #FFCCCB; /* Mais claro que Laranja Vermelho */
}
.categoria-Anhanguera {
    background-color: #B0E0E6; /* Mais claro que Azul Cádmio */
}
.categoria-Escritorio {
    background-color: #D8BFD8; /* Mais claro que Azul Violeta */
}
.categoria-Outros {
    background-color: #EED5B7; /* Mais claro que Marrom Chocolate */
}
.categoria-Resgates {
    background-color: #c0ebff; /* Mais claro que Rosa Profundo */
}
.categoria-TransfConta {
    background-color: #ffc0f2; /* Mais claro que Rosa Profundo */
}


/* Despesas */
.categoria-Casa {
    background-color: #E0FFFF; /* Mais claro que Azul Céu */
}
.categoria-Saude {
    background-color: #98FB98; /* Mais claro que Verde Lime */
}
.categoria-Alimentacao {
    background-color: #FFB6C1; /* Mais claro que Tomate */
}
.categoria-Veiculo {
    background-color: #FFDAB9; /* Mais claro que Laranja */
}
.categoria-Ensino {
    background-color: #b9fff0; /* Mais claro que Laranja */
}
.categoria-Emprestimos {
    background-color: #FA8072; /* Mais claro que Carmesim */
}
.categoria-ViagensSP {
    background-color: #B0E0E6; /* Mais claro que Verde Agua */
}
.categoria-GastosPJ {
    background-color: #CD5C5C; /* Mais claro que Marrom Escuro */
}
.categoria-Celular {
    background-color: #B0C4DE; /* Mais claro que Azul Aço */
}
.categoria-Orgaos {
    background-color: #AFEEEE; /* Mais claro que Azul Turquesa */
}
.categoria-Makita {
    background-color: #DDA0DD; /* Mais claro que Violeta Escuro */
}
.categoria-GastosGerais {
    background-color: #b6ffc8; /* Mais claro que Rosa Quente */
}
.categoria-GastosExtras {
    background-color: #D8BFD8; /* Mais claro que Azul Ardosia */
}
.categoria-Assinaturas {
    background-color: #8FBC8F; /* Mais claro que Verde Oliva Escuro */
}
.categoria-LegadoCartao {
    background-color: #F5DEB3; /* Mais claro que Ouro Velho */
}
.categoria-TransfContas {
    background-color: #b3e6f5; /* Mais claro que Ouro Velho */
}
.categoria-Outro {
    background-color: #f5e3b3; /* Mais claro que Ouro Velho */
}

@media screen and (min-width: 1024px) {

    body {
        font-family: Arial, sans-serif;
        background-color: #f4f4f9;
        color: #333;
        margin: 0;
        padding: 0;

    }

    header {
        background-color: #0077cc;
        padding: 0 20px;
        height: 70px;  /* Adjust this height as needed */
        display: flex;
        align-items: center;
    }

    nav {
        display: flex;
        justify-content: space-between;
        width: 100%;
    }

    .logo img {
        height: 50px;
    }

    .menu {
        display: flex;
        gap: 20px;
        align-items: center;  /* Center items vertically within the menu */
    }

    .menu a {
        color: #fff;
        text-decoration: none;
        font-weight: bold;
    }

    .menu a.logout {
        background-color: #ff4d4d;
        padding: 5px 10px;
        border-radius: 5px;
    }

    .menu a:hover {
        text-decoration: underline;
    }

    main {
        padding: 0px;
        max-width: 800px;
        margin: 0 auto;
    }

    .messages {
        list-style-type: none;
        padding: 0;
    }

    .messages li {
        background-color: #ffeb3b;
        padding: 10px;
        margin: 10px 0;
        border-left: 5px solid #ff9800;
    }

    /* Estilo para o container da página inicial */
    .index-container {
        display: flex;
        justify-content: center; /* Centraliza horizontalmente */
        align-items: center; /* Centraliza verticalmente */
        height: 85vh; /* Ocupa toda a altura da viewport */
        padding: 20px;
        box-sizing: border-box;
    }

    .balance-container {
        display: flex;
        flex-direction: column;
        justify-content: center; /* Centraliza verticalmente o conteúdo dentro do balance-container */
        align-items: center; /* Centraliza horizontalmente */
        padding: 20px;
        box-sizing: border-box;
        background-color: #fff;
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        width: 100%; /* Ajuste conforme necessário */
        max-width: 500px; /* Ajuste o tamanho máximo conforme necessário */
    }

    .balance-details {
        text-align: left; /* Alinha o conteúdo à esquerda */
        margin-bottom: 20px;
    }

    .balance-label {
        display: block;
        font-size: 0.75em; /* Pequeno */
        color: #888; /* Cinza */
        margin-bottom: 5px; /* Pequeno espaçamento abaixo do rótulo */
    }

    .balance-amount {
        font-size: 2em; /* Tamanho grande */
        color: #000; /* Preto */
        font-weight: bold;
        margin: 0; /* Remove margem padrão para melhor alinhamento */
    }

    .actions {
        display: flex;
        justify-content: center;
        gap: 10px;
    }

    .actions2 {
        display: flex;
        justify-content: center;
        gap: 10px;
        margin-top: 20px;
    }

    .button {
        display: inline-block;
        padding: 10px 20px;
        border-radius: 5px;
        text-decoration: none;
        font-weight: bold;
        color: #fff;
        text-align: center;
    }


    /* Estilo específico para a página de login */
    .login-body {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        background-color: #f4f4f9;
    }

    .login-container {
        background-color: #fff;
        padding: 40px;
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        text-align: center;
        width: 300px;
    }

    .login-container .logo img {
        height: 50px;
        margin-bottom: 20px;
    }

    .login-container h1 {
        font-size: 1.5em;
        color: #0077cc;
        margin-bottom: 20px;
    }

    .login-container form {
        display: flex;
        flex-direction: column;
    }

    .login-container label {
        margin-bottom: 5px;
        font-weight: bold;
    }

    .login-container input {
        padding: 10px;
        margin-bottom: 20px;
        border: 1px solid #ccc;
        border-radius: 5px;
    }

    .login-container button {
        background-color: #0077cc;
        color: #fff;
        padding: 10px;
        border: none;
        border-radius: 5px;
        font-weight: bold;
        cursor: pointer;
    }

    .login-container button:hover {
        background-color: #005fa3;
    }

    .form-page {
        display: flex;
        flex-direction: column;
        justify-content: center; /* Centraliza verticalmente */
        align-items: center; /* Centraliza horizontalmente */
        padding: 20px;
        box-sizing: border-box;
        background-color: #f4f4f9; /* Cor de fundo para a página */
        min-height: 85vh; /* Garante que ocupe toda a altura da viewport */
    }

    .form-page h1 {
        margin-bottom: 20px;
        color: #333; /* Cor do título */
    }

    .form-page form {
        display: flex;
        flex-direction: column;
        width: 100%;
        max-width: 500px; /* Ajusta conforme necessário */
        background-color: #fff; /* Cor de fundo do formulário */
        padding: 20px;
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    }

    .form-page {
        display: flex; /* Alinha os filhos em linha */
        gap: 20px; /* Espaçamento entre os campos */
        margin-bottom: 15px;
    }

    .form-group-inline {
        margin-top: 15px;
        display: flex; /* Alinha os filhos em linha */
        gap: 20px; /* Espaçamento entre os campos */
        margin-bottom: 15px;
    }

    .form-page .form-group {
        display: flex;
        flex-direction: column;
        width: 100%; /* Ocupa toda a largura disponível */
    }

    .form-page label {
        margin-bottom: 5px;
        font-weight: bold;
        color: #333; /* Cor do texto do rótulo */
    }

    .form-page input, 
    .form-page select {
        padding: 10px;
        border: 1px solid #ccc;
        border-radius: 5px;
        font-size: 1em;
        width: 100%; /* Ocupa toda a largura do container */
        box-sizing: border-box;
    }

    .value-container {
        display: flex;
        align-items: center;
        width: 100%; /* Ajusta para a largura do contêiner */
    }

    .currency-symbol {
        background-color: #f4f4f4; /* Cor de fundo para o símbolo */
        padding: 10px;
        border: 1px solid #ccc;
        border-radius: 5px 0 0 5px; /* Cantos arredondados apenas do lado esquerdo */
        color: #333; /* Cor do símbolo */
        font-size: 1em;
        text-align: center;
    }

    .form-page input[type="number"] {
        border-radius: 0 5px 5px 0; /* Cantos arredondados apenas do lado direito */
        margin-left: -1px; /* Remove a borda duplicada */
    }

    /* Estilo para o botão de incluir receita */
    .btn-receita {
        margin-top: 20px;
        background-color: green; /* Cor verde para receita */
        color: white; /* Cor do texto em branco */
        border: none; /* Remove a borda padrão */
        padding: 10px 20px; /* Ajusta o padding do botão */
        border-radius: 5px; /* Adiciona bordas arredondadas */
        cursor: pointer; /* Muda o cursor para pointer */
        font-size: 16px; /* Ajusta o tamanho da fonte */
    }

    .btn-receita:hover {
        background-color: darkgreen; /* Cor verde mais escura no hover */
    }

    /* Estilo para o botão de incluir despesa */
    .btn-despesa {
        margin-top: 20px;
        background-color: red; /* Cor vermelha para despesa */
        color: white; /* Cor do texto em branco */
        border: none; /* Remove a borda padrão */
        padding: 10px 20px; /* Ajusta o padding do botão */
        border-radius: 5px; /* Adiciona bordas arredondadas */
        cursor: pointer; /* Muda o cursor para pointer */
        font-size: 16px; /* Ajusta o tamanho da fonte */
    }

    .btn-despesa:hover {
        background-color: darkred; /* Cor vermelha mais escura no hover */
    }

    .button-container {
        display: flex;
        justify-content: space-between; /* Alinha os botões à esquerda */
        gap: 10px; /* Espaço entre os botões */
        margin-top: 20px; /* Espaço acima dos botões */
        width: 100%;
    }

    .btn-ajuste {
        background-color: #28a745; /* Cor de fundo verde para "Salvar" */
        color: white;
        padding: 10px 20px;
        border: none;
        border-radius: 8px;
        cursor: pointer;
        width: 40%;
    }

    .btn-cancelar {
        background-color: #dc3545; /* Cor de fundo vermelho para "Cancelar" */
        color: white;
        padding: 10px 20px;
        border-radius: 8px;
        border: none;
        cursor: pointer;
        width: 100%;
    }

    .btn-ajuste:hover {
        background-color: #0b6420; /* Cor de fundo verde para "Salvar" */
        color: white;
    }

    .btn-cancelar:hover {
        background-color: #69121b; /* Cor de fundo vermelho para "Cancelar" */
        color: white;
    }


    /* Estilo para o bloco de lançamentos */
    .lancamento-bloco {
        background-color: #fff;
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        padding: 15px;
        margin-bottom: 20px;
        position: relative;
    }

    .lancamento-header {
        display: flex;
        justify-content: space-between;
        font-size: 0.9em;
        color: #666;
        margin-bottom: 15px;
    }

    .lancamento-item {
        margin-bottom: 10px;
        border-bottom: 1px solid #eee;
        padding-bottom: 10px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .lancamento-esquerda {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .lancamento-subitem {
        margin-left: 20px;
        display: flex;
        flex-direction: column; /* Organiza os itens em coluna */
        /* Adiciona um espaço abaixo de cada subitem */
    }

    .lancamento-subitem .nome {
        justify-content: center;
        font-weight: bold; /* Deixa o nome em negrito */
        margin-bottom: 5px; /* Adiciona um espaço entre o nome e as informações */
    }

    .lancamento-subitem .info {
        font-size: 0.9em; /* Ajusta o tamanho da fonte das informações */
        color: #555; /* Define uma cor mais suave para as informações */
    }

    .lancamento-subitem .info span {
        display: block; /* Faz com que cada span ocupe uma linha */
        margin-bottom: 2px; /* Adiciona um pequeno espaço entre os spans */
    }

    .lancamento-lista {
        margin-top: 10px;
    }

    .valor {
        width: 100px;
        font-weight: bold;
        background-color: transparent;
    }

    .valor:hover {
        font-weight: bold;
        background-color: transparent;
    }

    .valor.receita {
        color: green;
    }

    .valor.despesa {
        color: black;
    }

    .info {
        display: flex;
        gap: 10px;
    }

    .nome {
        margin: 0;
        font-size: 1em;
    }

    .tipo {
        font-size: 0.9em;
        color: #333;
        border-radius: 8px;
        padding: 5px;
        width: 50px;
        text-align: center;
    }

    .categoria {
        font-size: 0.9em;
        color: #333;
        border-radius: 8px;
        padding: 5px;
        width: 90px;
        text-align: center;
    }

    .parcela {
        margin-left: 20px;
        font-size: 0.9em;
        color: #333;
    }

    .acoes {
        display: flex;
        gap: 10px;
    }

    .btn-icon {
        background-color: transparent;
        border: none;
        padding: 0;
        border-radius: 8px; 
        width: 30px; /* Aumenta a largura da caixa */
        height: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Adiciona sombra */
        cursor: pointer; /* Muda o cursor para uma mão quando passa em cima */
        transition: background-color 0.3s, box-shadow 0.3s;
    }

    .btn-warning {
        background-color: #f0ad4e; /* Cor personalizada para o botão de editar */
    }

    .btn-danger {
        background-color: #d9534f; /* Cor personalizada para o botão de excluir */
    }

    .btn-icon img {
        width: 18px; /* Ajuste o tamanho do ícone conforme necessário */
        height: 18px; /* Ajuste o tamanho do ícone conforme necessário */
    }

    .btn-icon:hover {
    /* Cor de fundo quando o botão é hoverado */
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Aumenta a sombra quando o botão é hoverado */
    }

    .toggle-btn {
        background-color: #007bff;
        color: white;
        border: none;
        padding: 10px;
        cursor: pointer;
        font-size: 16px;
        border-radius: 5px;
        margin-right: 5px;
    }

    .header-container-futuros {
        display: flex;
        align-items: center;
    }

    .lancamento-bloco2 {
        margin-top: 30px;
    }

    .orcamento-header {
        color: #333;
        font-size: 1.8em;
        text-align: center;
        margin-bottom: 20px;
    }

    .orcamento-bloco {
        padding: 15px;
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        margin-bottom: 10px;
    }

    .orcamento-item {
        margin: 5px 0;
    }

    .orcamento-valor, .orcamento-gasto, .orcamento-saldo, .orcamento-percentual {
        font-weight: bold;
    }

    .orcamento-info {
        display: flex;
        flex-direction: column;
    }

    .orcamento-detalhes {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-bottom: 10px;
        border-bottom: 1px solid #eee;
    }

    .orcamento-categoria {
        padding: 20px;
        border-radius: 10px;
        text-align: center;
        font-weight: bold;
        font-size: 1.2em;
        color: black;
    }

    .orcamento-info {
        text-align: right;
    }

    .orcamento-item {
        margin: 5px 0;
    }

    .orcamento-filter {
        display: flex;
        align-items: center;
        justify-content: end;
        gap: 10px;
        margin-bottom: 20px;
    }
    .orcamento-filter label {
        font-size: 1em;
        font-weight: bold;
        color: #333;
    }
    .orcamento-filter input[type="month"] {
        padding: 8px;
        border: 1px solid #ccc;
        border-radius: 5px;
        font-size: 1em;
    }
    .orcamento-filter button {
        background-color: #0077cc;
        color: #fff;
        padding: 8px 15px;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        font-size: 1em;
    }
    .orcamento-filter button:hover {
        background-color: #005fa3;
    }
    
    .fixas-title {
        text-align: center;
    }
    
    .fixas-container {
        max-width: 600px;
        margin: 20px auto;
        background-color: #fff;
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0,0,0,0.1);
        padding: 20px;
    }
    .fixas-container h1 {
        text-align: center;
        margin-bottom: 20px;
        color: #333;
    }
    .fixas-form {
        display: flex;
        gap: 10px;
        margin-bottom: 20px;
    }
    .fixas-form input[type="text"] {
        flex: 1;
        padding: 10px;
        border: 1px solid #ccc;
        border-radius: 5px;
        font-size: 1em;
    }
    .fixas-form button {
        background-color: #0077cc;
        color: #fff;
        padding: 10px 15px;
        border: none;
        border-radius: 5px;
        cursor: pointer;
    }
    .fixas-form button:hover {
        background-color: #005fa3;
    }
    .fixas-list {
        list-style: none;
        padding: 0;
    }
    .fixas-list li {
        display: flex;
        align-items: center;
        justify-content: space-between;
        background-color: #f4f4f9;
        margin-bottom: 10px;
        padding: 10px;
        border-radius: 5px;
    }
    .fixas-list li label {
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 1em;
        color: #333;
    }
    .fixas-list li button {
        background-color: #d9534f;
        color: #fff;
        border: none;
        border-radius: 5px;
        padding: 5px 10px;
        cursor: pointer;
    }
    .fixas-list li button:hover {
        background-color: #c9302c;
    }
    
    .fixas-item-toggle {
        display: inline-flex;
        align-items: center;
    }
    .fixas-item-toggle span {
        margin-left: 8px;
    }
    
    .titlez{
        text-align: center;
    }
    
    /* Página Reports */
    .reports-container {
        max-width: 900px;
        border-radius: 10px;
        
    }
    
    /* Report Section */
    .report-section {
        text-align: center;
        margin-bottom: 40px;
        padding: 20px;
        background-color: #fff;
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0,0,0,0.1);
    }
    
    /* Reports Filter */
    .reports-filter {
        display: flex;
        flex-wrap: wrap;
        gap: 15px;
        margin-bottom: 20px;
        justify-content: center;
    }
    .reports-filter label {
        font-size: 1em;
        font-weight: bold;
        color: #333;
        padding: 8px;
    
    }
    .reports-filter input[type="month"] {
        padding: 8px;
        border: 1px solid #ccc;
        border-radius: 5px;
        font-size: 1em;
    }
    .reports-filter button {
        background-color: #0077cc;
        color: #fff;
        padding: 8px 15px;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        font-size: 1em;
    }
    .reports-filter button:hover {
        background-color: #005fa3;
    }

}

@media screen and (max-device-width: 480px) 
    and (orientation: portrait) {

    body {
        font-family: Arial, sans-serif;
        background-color: #f4f4f9;
        color: #333;
        margin: 0;
        padding: 0;

    }

    header {
        background-color: #0077cc;
        padding: 0 20px;
        height: 70px;  /* Adjust this height as needed */
        display: flex;
        align-items: center;
    }

    nav {
        display: flex;
        justify-content: space-between;
        width: 100%;
    }

    .logo img {
        height: 35px;
        padding-right: 10px;
    }

    .menu {
        display: flex;
        gap: 10px;
        font-size: 10px;
        align-items: center;  /* Center items vertically within the menu */
    }

    .menu a {
        color: #fff;
        text-decoration: none;
        font-weight: bold;
    }

    .menu a.logout {
        background-color: #ff4d4d;
        padding: 5px 5px;
        border-radius: 5px;
    }

    .menu a:hover {
        text-decoration: underline;
    }

    main {
        padding: 0px;
        max-width: 95%;
        margin: 0 auto;
    }

    .messages {
        list-style-type: none;
        padding: 0;
    }

    .messages li {
        background-color: #ffeb3b;
        padding: 10px;
        margin: 10px 0;
        border-left: 5px solid #ff9800;
    }

    /* Estilo para o container da página inicial */
    .index-container {
        display: flex;
        justify-content: center; /* Centraliza horizontalmente */
        align-items: center; /* Centraliza verticalmente */
        height: 75vh; /* Ocupa toda a altura da viewport */
        padding: 20px;
        box-sizing: border-box;
    }

    .balance-container {
        display: flex;
        flex-direction: column;
        justify-content: center; /* Centraliza verticalmente o conteúdo dentro do balance-container */
        align-items: center; /* Centraliza horizontalmente */
        padding: 20px;
        box-sizing: border-box;
        background-color: #fff;
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        width: 100%; /* Ajuste conforme necessário */
        max-width: 500px; /* Ajuste o tamanho máximo conforme necessário */
    }

    .balance-details {
        text-align: left; /* Alinha o conteúdo à esquerda */
        margin-bottom: 20px;
    }

    .balance-label {
        display: block;
        font-size: 0.75em; /* Pequeno */
        color: #888; /* Cinza */
        margin-bottom: 5px; /* Pequeno espaçamento abaixo do rótulo */
    }

    .balance-amount {
        font-size: 2em; /* Tamanho grande */
        color: #000; /* Preto */
        font-weight: bold;
        margin: 0; /* Remove margem padrão para melhor alinhamento */
    }

    .actions {
        display: flex;
        justify-content: center;
        gap: 10px;
    }

    .actions2 {
        display: flex;
        justify-content: center;
        gap: 10px;
        margin-top: 20px;
    }

    .button {
        display: inline-block;
        padding: 10px 20px;
        border-radius: 5px;
        text-decoration: none;
        font-weight: bold;
        color: #fff;
        text-align: center;
    }


    /* Estilo específico para a página de login */
    .login-body {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 85vh;
        background-color: #f4f4f9;
    }

    .login-container {
        background-color: #fff;
        padding: 40px;
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        text-align: center;
        width: 85%;
        margin: 0 20px;
    }

    .login-container .logo img {
        height: 50px;
        margin-bottom: 20px;
    }

    .login-container h1 {
        font-size: 1.5em;
        color: #0077cc;
        margin-bottom: 20px;
    }

    .login-container form {
        display: flex;
        flex-direction: column;
    }

    .login-container label {
        margin-bottom: 5px;
        font-weight: bold;
    }

    .login-container input {
        padding: 10px;
        margin-bottom: 20px;
        border: 1px solid #ccc;
        border-radius: 5px;
    }

    .login-container button {
        background-color: #0077cc;
        color: #fff;
        padding: 10px;
        border: none;
        border-radius: 5px;
        font-weight: bold;
        cursor: pointer;
    }

    .login-container button:hover {
        background-color: #005fa3;
    }

    .form-page {
        display: flex;
        flex-direction: column;
        justify-content: center; /* Centraliza verticalmente */
        align-items: center; /* Centraliza horizontalmente */
        padding: 20px;
        box-sizing: border-box;
        background-color: #f4f4f9; /* Cor de fundo para a página */
        min-height: 85vh; /* Garante que ocupe toda a altura da viewport */
    }

    .form-page h1 {
        margin-bottom: 20px;
        color: #333; /* Cor do título */
    }

    .form-page form {
        display: flex;
        flex-direction: column;
        width: 100%;
        max-width: 500px; /* Ajusta conforme necessário */
        background-color: #fff; /* Cor de fundo do formulário */
        padding: 20px;
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    }

    .form-page {
        display: flex; /* Alinha os filhos em linha */
        gap: 20px; /* Espaçamento entre os campos */
        margin-bottom: 15px;
    }

    .form-group-inline {
        margin-top: 15px;
        display: flex; /* Alinha os filhos em linha */
        gap: 20px; /* Espaçamento entre os campos */
        margin-bottom: 15px;
    }

    .form-page .form-group {
        display: flex;
        flex-direction: column;
        width: 100%; /* Ocupa toda a largura disponível */
    }

    .form-page label {
        margin-bottom: 5px;
        font-weight: bold;
        color: #333; /* Cor do texto do rótulo */
    }

    .form-page input, 
    .form-page select {
        padding: 10px;
        border: 1px solid #ccc;
        border-radius: 5px;
        font-size: 1em;
        width: 100%; /* Ocupa toda a largura do container */
        box-sizing: border-box;
    }

    .value-container {
        display: flex;
        align-items: center;
        width: 100%; /* Ajusta para a largura do contêiner */
    }

    .currency-symbol {
        background-color: #f4f4f4; /* Cor de fundo para o símbolo */
        padding: 10px;
        border: 1px solid #ccc;
        border-radius: 5px 0 0 5px; /* Cantos arredondados apenas do lado esquerdo */
        color: #333; /* Cor do símbolo */
        font-size: 1em;
        text-align: center;
    }

    .form-page input[type="number"] {
        border-radius: 0 5px 5px 0; /* Cantos arredondados apenas do lado direito */
        margin-left: -1px; /* Remove a borda duplicada */
    }

    /* Estilo para o botão de incluir receita */
    .btn-receita {
        margin-top: 20px;
        background-color: green; /* Cor verde para receita */
        color: white; /* Cor do texto em branco */
        border: none; /* Remove a borda padrão */
        padding: 10px 20px; /* Ajusta o padding do botão */
        border-radius: 5px; /* Adiciona bordas arredondadas */
        cursor: pointer; /* Muda o cursor para pointer */
        font-size: 16px; /* Ajusta o tamanho da fonte */
    }

    .btn-receita:hover {
        background-color: darkgreen; /* Cor verde mais escura no hover */
    }

    /* Estilo para o botão de incluir despesa */
    .btn-despesa {
        margin-top: 20px;
        background-color: red; /* Cor vermelha para despesa */
        color: white; /* Cor do texto em branco */
        border: none; /* Remove a borda padrão */
        padding: 10px 20px; /* Ajusta o padding do botão */
        border-radius: 5px; /* Adiciona bordas arredondadas */
        cursor: pointer; /* Muda o cursor para pointer */
        font-size: 16px; /* Ajusta o tamanho da fonte */
    }

    .btn-despesa:hover {
        background-color: darkred; /* Cor vermelha mais escura no hover */
    }

    .button-container {
        display: flex;
        justify-content: space-between; /* Alinha os botões à esquerda */
        gap: 10px; /* Espaço entre os botões */
        margin-top: 20px; /* Espaço acima dos botões */
        width: 100%;
    }

    .btn-ajuste {
        background-color: #28a745; /* Cor de fundo verde para "Salvar" */
        color: white;
        padding: 10px 20px;
        border: none;
        border-radius: 8px;
        cursor: pointer;
        width: 40%;
    }

    .btn-cancelar {
        background-color: #dc3545; /* Cor de fundo vermelho para "Cancelar" */
        color: white;
        padding: 10px 20px;
        border-radius: 8px;
        border: none;
        cursor: pointer;
        width: 100%;
    }

    .btn-ajuste:hover {
        background-color: #0b6420; /* Cor de fundo verde para "Salvar" */
        color: white;
    }

    .btn-cancelar:hover {
        background-color: #69121b; /* Cor de fundo vermelho para "Cancelar" */
        color: white;
    }


    /* Estilo para o bloco de lançamentos */
    .lancamento-bloco {
        background-color: #fff;
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        padding: 15px;
        margin-bottom: 20px;
        position: relative;
    }

    .lancamento-header {
        display: flex;
        justify-content: space-between;
        font-size: 0.9em;
        color: #666;
        margin-bottom: 15px;
    }

    .lancamento-item {
        margin-bottom: 10px;
        border-bottom: 1px solid #eee;
        padding-bottom: 10px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .lancamento-esquerda {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .lancamento-subitem {
        margin-left: 0px;
        display: flex;
        flex-direction: column; /* Organiza os itens em coluna */
        /* Adiciona um espaço abaixo de cada subitem */
    }

    .lancamento-subitem .nome {
        justify-content: center;
        font-weight: bold; /* Deixa o nome em negrito */
        margin-bottom: 5px;
        font-size: 0.8em; /* Adiciona um espaço entre o nome e as informações */
    }

    .lancamento-subitem .info {
        font-size: 0.7em; /* Ajusta o tamanho da fonte das informações */
        color: #555; /* Define uma cor mais suave para as informações */
    }

    .lancamento-subitem .info span {
        display: block; /* Faz com que cada span ocupe uma linha */
        margin-bottom: 2px; /* Adiciona um pequeno espaço entre os spans */
    }

    .lancamento-lista {
        margin-top: 10px;
    }

    .valor {
        width: 100px;
        font-weight: bold;
        background-color: transparent;
    }

    .valor:hover {
        font-weight: bold;
        background-color: transparent;
    }

    .valor.receita {
        color: green;
    }

    .valor.despesa {
        color: black;
    }

    .info {
        display: flex;
        gap: 10px;
    }

    .nome {
        margin: 0;
        font-size: 1em;
    }

    .tipo {
        font-size: 0.9em;
        color: #333;
        border-radius: 8px;
        padding: 5px;
        width: 4em;
        text-align: center;
    }

    .categoria {
        font-size: 0.9em;
        color: #333;
        border-radius: 8px;
        padding: 5px;
        width: 7em;
        text-align: center;
    }

    .parcela {
        margin-left: 0px;
        font-size: 0.7em;
        color: #333;
    }

    .acoes {
        display: flex;
        gap: 10px;
    }

    .btn-icon {
        background-color: transparent;
        border: none;
        padding: 0;
        border-radius: 8px; 
        width: 2em; /* Aumenta a largura da caixa */
        height: 2em;
        align-items: center;
        justify-content: center;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Adiciona sombra */
        cursor: pointer; /* Muda o cursor para uma mão quando passa em cima */
        transition: background-color 0.3s, box-shadow 0.3s;
    }

    .btn-warning {
        background-color: #f0ad4e; /* Cor personalizada para o botão de editar */
    }

    .btn-danger {
        background-color: #d9534f; /* Cor personalizada para o botão de excluir */
    }

    .btn-icon img {
        width: 1em; /* Ajuste o tamanho do ícone conforme necessário */
        height: 1em; /* Ajuste o tamanho do ícone conforme necessário */
    }

    .btn-icon:hover {
    /* Cor de fundo quando o botão é hoverado */
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Aumenta a sombra quando o botão é hoverado */
    }

    .toggle-btn {
        background-color: #007bff;
        color: white;
        border: none;
        padding: 10px;
        cursor: pointer;
        font-size: 16px;
        border-radius: 5px;
        margin-right: 5px;
    }

    .header-container-futuros {
        display: flex;
        align-items: center;
    }

    .lancamento-bloco2 {
        margin-top: 30px;
    }

    .orcamento-header {
        color: #333;
        font-size: 1.8em;
        text-align: center;
        margin-bottom: 20px;
    }

    .orcamento-bloco {
        padding: 15px;
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        margin-bottom: 10px;
    }

    .orcamento-item {
        margin: 5px 0;
    }

    .orcamento-valor, .orcamento-gasto, .orcamento-saldo, .orcamento-percentual {
        font-weight: bold;
    }

    .orcamento-info {
        display: flex;
        flex-direction: column;
    }

    .orcamento-detalhes {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-bottom: 10px;
        border-bottom: 1px solid #eee;
    }

    .orcamento-categoria {
        padding: 20px;
        border-radius: 10px;
        text-align: center;
        font-weight: bold;
        font-size: 1.2em;
        color: black;
    }

    .orcamento-info {
        text-align: right;
        font-size: 0.8em;
    }

    .orcamento-item {
        margin: 5px 0;
    }

    .fixas-title {
        text-align: center;
    }

    .fixas-container {
        margin: 10px auto;
        padding: 10px;
        background-color: #fff;
        border-radius: 10px;
        box-shadow: 0 0 8px rgba(0,0,0,0.2);
        max-width: 95%;
        text-align: center;
      }
      .fixas-form {
        display: flex;
        flex-direction: row;
        justify-content: center;
        gap: 5px;
        margin-top: 20px;
        margin-bottom: 20px;
      }
      .fixas-form input[type="text"] {
        width: 80%;
        padding: 5px;
        font-size: 0.9em;
        border: 1px solid #ccc;
        border-radius: 5px;
      }
      .fixas-form button {
        padding: 5px 10px;
        font-size: 0.9em;
        border: none;
        border-radius: 5px;
        background-color: #0077cc;
        color: #fff;
        cursor: pointer;
      }
      .fixas-form button:hover {
        background-color: #005fa3;
      }
      .fixas-list {
        list-style: none;
        padding: 0;
        margin: 0 auto;
        max-width: 95%;
        text-align: left;
      }
      .fixas-list li {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 5px;
        padding: 5px;
        margin: 5px auto;
        border-radius: 5px;
        background-color: #f4f4f9;
        max-width: 95%;
      }
      .fixas-item-toggle {
        display: inline-flex;
        align-items: center;
        flex: 1;
      }
      .fixas-item-toggle span {
        margin-left: 5px;
        font-size: 0.9em;
      }
      .fixas-list li button {
        padding: 5px;
        min-width: 40px;
        font-size: 0.9em;
      }
    
      /* Página Orçamento */
      .orcamento-filter {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 5px;
        margin-bottom: 15px;
      }
      .orcamento-filter label {
        font-size: 1.2em;
        margin-right: 5px;
      }
      .orcamento-filter input[type="month"] {
        flex: 1;
        padding: 10px;
        font-size: 1em;
      }
      .orcamento-filter button {
        padding: 10px 15px;
        font-size: 1em;
      }
    
      /* Página Reports */
      .reports-container {
        margin: 10px auto;
        padding: 10px;
        background-color: #fff;
        border-radius: 10px;
        box-shadow: 0 0 8px rgba(0,0,0,0.2);
        max-width: 95%;
        text-align: center;
      }
      .reports-filter {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 5px;
        margin-bottom: 10px;
        flex-wrap: nowrap;
      }
      .reports-filter label {
        font-size: 0.9em;
        margin-right: 5px;
      }
      .reports-filter input[type="month"] {
        flex: 1;
        padding: 5px;
        font-size: 0.7em;
      }
      .reports-filter button {
        padding: 5px 10px;
        font-size: 0.9em;
      }
      .reports-totals {
        font-size: 0.7em !important; /* Reduz o tamanho da fonte */
        padding: 5px !important;
        text-align: center !important;
        margin-bottom: 10px;
      }

}