.loading-overlay-chart-1 {
    position: relative;
}

.loading-spinner-chart-1 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
}

    .loading-spinner-chart-1::after {
        content: "Carregando..."; /* Texto ou ícone de loading */
    }


.loading-overlay-chart-2 {
    position: relative;
}

.loading-spinner-chart-2 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
}

    .loading-spinner-chart-2::after {
        content: "Carregando..."; /* Texto ou ícone de loading */
    }


.loading-overlay-chart-3 {
    position: relative;
}

.loading-spinner-chart-3 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
}

    .loading-spinner-chart-3::after {
        content: "Carregando..."; /* Texto ou ícone de loading */
    }


.loading-overlay-chart-4 {
    position: relative;
}

.loading-spinner-chart-4 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
}

    .loading-spinner-chart-4::after {
        content: "Carregando..."; /* Texto ou ícone de loading */
    }

.loading-overlay-chart-5 {
    position: relative;
}

.loading-spinner-chart-5 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
}

    .loading-spinner-chart-5::after {
        content: "Carregando..."; /* Texto ou ícone de loading */
    }

.loading-overlay-chart-6 {
    position: relative;
}

.loading-spinner-chart-6 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
}

    .loading-spinner-chart-6::after {
        content: "Carregando..."; /* Texto ou ícone de loading */
    }


.loading-overlay-chart-7 {
    position: relative;
}

.loading-spinner-chart-7 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
}

    .loading-spinner-chart-7::after {
        content: "Carregando..."; /* Texto ou ícone de loading */
    }

.loading-overlay-chart-8 {
    position: relative;
}

.loading-spinner-chart-8 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
}

    .loading-spinner-chart-8::after {
        content: "Carregando..."; /* Texto ou ícone de loading */
    }


.loading-overlay-chart-9 {
    position: relative;
}

.loading-spinner-chart-9 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
}

    .loading-spinner-chart-9::after {
        content: "Carregando..."; /* Texto ou ícone de loading */
    }


.loading-overlay-chart-10 {
    position: relative;
}

.loading-spinner-chart-10 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
}

    .loading-spinner-chart-10::after {
        content: "Carregando..."; /* Texto ou ícone de loading */
    }


.loading-overlay-chart-11 {
    position: relative;
}

.loading-spinner-chart-11 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
}

    .loading-spinner-chart-11::after {
        content: "Carregando..."; /* Texto ou ícone de loading */
    }


.loading-overlay-chart-12 {
    position: relative;
}

.loading-spinner-chart-12 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
}

    .loading-spinner-chart-12::after {
        content: "Carregando..."; /* Texto ou ícone de loading */
    }

.config-dropdown {
    display: none;
    position: absolute;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    padding: 5px 0;
    z-index: 2;
    width: 150px; /* Aumente a largura conforme necessário */
}

    .config-dropdown ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .config-dropdown li {
        padding: 5px 10px;
    }

    .config-dropdown a {
        text-decoration: none;
        color: #333;
        display: block;
        padding: 3px 10px;
    }

        .config-dropdown a:hover {
            color: white;
            background-color: #5e72e4;
            border-radius: 5px;
        }

.no-data-message-1 {
    font-size: 16px; /* Tamanho da fonte */
    text-align: center; /* Alinhamento de texto no centro */
    border: 1px solid #ccc; /* Borda com cor e espessura */
    border-radius: 5px; /* Borda arredondada */
    display: none; /* Inicialmente, esconda a div */
    position: absolute; /* Posição absoluta */
    top: 50%; /* Alinhe verticalmente no centro */
    left: 50%; /* Alinhe horizontalmente no centro */
    transform: translate(-50%, -50%); /* Centralize a mensagem */
    width: 100%; /* A largura se ajustará automaticamente ao conteúdo */
    max-width: 90%; /* Defina uma largura máxima para a mensagem */
    z-index: 1; /* Coloque a mensagem sobre o card */
}

    .no-data-message-1::after {
        content: "Não há dados disponíveis.";
    }


.no-data-message-2 {
    font-size: 16px; /* Tamanho da fonte */
    text-align: center; /* Alinhamento de texto no centro */
    border: 1px solid #ccc; /* Borda com cor e espessura */
    border-radius: 5px; /* Borda arredondada */
    display: none; /* Inicialmente, esconda a div */
    position: absolute; /* Posição absoluta */
    top: 50%; /* Alinhe verticalmente no centro */
    left: 50%; /* Alinhe horizontalmente no centro */
    transform: translate(-50%, -50%); /* Centralize a mensagem */
    width: 100%; /* A largura se ajustará automaticamente ao conteúdo */
    max-width: 90%; /* Defina uma largura máxima para a mensagem */
    z-index: 1; /* Coloque a mensagem sobre o card */
}

    .no-data-message-2::after {
        content: "Não há dados disponíveis."
    }

.no-data-message-3 {
    font-size: 16px; /* Tamanho da fonte */
    text-align: center; /* Alinhamento de texto no centro */
    border: 1px solid #ccc; /* Borda com cor e espessura */
    border-radius: 5px; /* Borda arredondada */
    display: none; /* Inicialmente, esconda a div */
    position: absolute; /* Posição absoluta */
    top: 50%; /* Alinhe verticalmente no centro */
    left: 50%; /* Alinhe horizontalmente no centro */
    transform: translate(-50%, -50%); /* Centralize a mensagem */
    width: 100%; /* A largura se ajustará automaticamente ao conteúdo */
    max-width: 90%; /* Defina uma largura máxima para a mensagem */
    z-index: 1; /* Coloque a mensagem sobre o card */
}

    .no-data-message-3::after {
        content: "Não há dados disponíveis.";
    }


.no-data-message-4 {
    font-size: 16px; /* Tamanho da fonte */
    text-align: center; /* Alinhamento de texto no centro */
    border: 1px solid #ccc; /* Borda com cor e espessura */
    border-radius: 5px; /* Borda arredondada */
    display: none; /* Inicialmente, esconda a div */
    position: absolute; /* Posição absoluta */
    top: 50%; /* Alinhe verticalmente no centro */
    left: 50%; /* Alinhe horizontalmente no centro */
    transform: translate(-50%, -50%); /* Centralize a mensagem */
    width: 100%; /* A largura se ajustará automaticamente ao conteúdo */
    max-width: 90%; /* Defina uma largura máxima para a mensagem */
    z-index: 1; /* Coloque a mensagem sobre o card */
}

    .no-data-message-4::after {
        content: "Não há dados disponíveis.";
    }



.no-data-message-5 {
    font-size: 16px; /* Tamanho da fonte */
    text-align: center; /* Alinhamento de texto no centro */
    border: 1px solid #ccc; /* Borda com cor e espessura */
    border-radius: 5px; /* Borda arredondada */
    display: none; /* Inicialmente, esconda a div */
    position: absolute; /* Posição absoluta */
    top: 50%; /* Alinhe verticalmente no centro */
    left: 50%; /* Alinhe horizontalmente no centro */
    transform: translate(-50%, -50%); /* Centralize a mensagem */
    width: 100%; /* A largura se ajustará automaticamente ao conteúdo */
    max-width: 90%; /* Defina uma largura máxima para a mensagem */
    z-index: 1; /* Coloque a mensagem sobre o card */
}

    .no-data-message-5::after {
        content: "Não há dados disponíveis."
    }

.no-data-message-6 {
    font-size: 16px; /* Tamanho da fonte */
    text-align: center; /* Alinhamento de texto no centro */
    border: 1px solid #ccc; /* Borda com cor e espessura */
    border-radius: 5px; /* Borda arredondada */
    display: none; /* Inicialmente, esconda a div */
    position: absolute; /* Posição absoluta */
    top: 50%; /* Alinhe verticalmente no centro */
    left: 50%; /* Alinhe horizontalmente no centro */
    transform: translate(-50%, -50%); /* Centralize a mensagem */
    width: 100%; /* A largura se ajustará automaticamente ao conteúdo */
    max-width: 90%; /* Defina uma largura máxima para a mensagem */
    z-index: 1; /* Coloque a mensagem sobre o card */
}

    .no-data-message-6::after {
        content: "Não há dados disponíveis."
    }


.no-data-message-7 {
    font-size: 16px; /* Tamanho da fonte */
    text-align: center; /* Alinhamento de texto no centro */
    border: 1px solid #ccc; /* Borda com cor e espessura */
    border-radius: 5px; /* Borda arredondada */
    display: none; /* Inicialmente, esconda a div */
    position: absolute; /* Posição absoluta */
    top: 50%; /* Alinhe verticalmente no centro */
    left: 50%; /* Alinhe horizontalmente no centro */
    transform: translate(-50%, -50%); /* Centralize a mensagem */
    width: 100%; /* A largura se ajustará automaticamente ao conteúdo */
    max-width: 90%; /* Defina uma largura máxima para a mensagem */
    z-index: 1; /* Coloque a mensagem sobre o card */
}

    .no-data-message-7::after {
        content: "Não há dados disponíveis."
    }


.no-data-message-8 {
    font-size: 16px; /* Tamanho da fonte */
    text-align: center; /* Alinhamento de texto no centro */
    border: 1px solid #ccc; /* Borda com cor e espessura */
    border-radius: 5px; /* Borda arredondada */
    display: none; /* Inicialmente, esconda a div */
    position: absolute; /* Posição absoluta */
    top: 50%; /* Alinhe verticalmente no centro */
    left: 50%; /* Alinhe horizontalmente no centro */
    transform: translate(-50%, -50%); /* Centralize a mensagem */
    width: 100%; /* A largura se ajustará automaticamente ao conteúdo */
    max-width: 90%; /* Defina uma largura máxima para a mensagem */
    z-index: 1; /* Coloque a mensagem sobre o card */
}

    .no-data-message-8::after {
        content: "Não há dados disponíveis."
    }