/*************************************************************************************
|>> ":root" -> Configuração de variaveis Geral do Style Como: Cores, Fontes, etc... <<|
**************************************************************************************/
:root {
    /* Cores Principais */
    --cor-principal: rgb(0, 123, 255);
    --cor-secundaria: rgb(255, 255, 255);
    /* Fim - Cores Principais */

    /* Tela de Manuteção */
    --manutecao-gradiante-background-1: rgb(0, 123, 255);
    --manutecao-gradiante-background-2:rgb(255, 255, 255);
    /* Fim - Tela de Manuteção */

    /* Tela de Login  */
    --login-gradiante-background-1: rgb(0, 123, 255);
    --login-gradiante-background-2:rgb(255, 255, 255);
    /* Fim - Tela de Login  */
    
    /* Configuração Geral da Barra de Navegação */
    --navbar-background-color-principal: var(--cor-principal);
    --navbar-box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
    --navbar-cor-texto: rgb(255, 255, 255);
    --navbar-border-lef: 3px dotted rgb(255, 255, 255);
    --navbar-max-width: 70%;
    --navbar-background-color-dropdown-1-2-perfil-1-2-hover: rgb(0, 68, 141);
    --navbar-color-texto-dropdown-1-2-perfil-1-2-hover: rgb(255, 255, 255);
    --navbar-background-color-dropdown-1-2-perfil-1-2-open: rgb(0, 68, 141);
    --navbar-color-texto-dropdown-1-2-perfil-1-2-open: rgb(255, 255, 255);
    --navbar-background-color-submenu-1-2-perfil-1-2: rgb(0, 68, 141);
    --navbar-color-texto-submenu-1-2-perfil-1-2: rgb(255, 255, 255);
    --navbar-background-color-submenu-1-2-perfil-1-2-hover: rgb(0, 68, 141);
    --navbar-color-texto-submenu-1-2-perfil-1-2-hover: rgb(255, 255, 255);
    --navbar-background-color-linha-hamburguer: rgb(255, 255, 255);
    /* Fim - Configuração Geral da Barra de Navegação */

    /* Configurações Geral do Conteiner */
    --container-background: rgb(255, 255, 255);
    --container-box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
    --container-max-width: 90%;
    --container-max-width-mobile: 95%;
    --container-margin: 30px auto;
    --container-margin-mobile: 15px auto;
    --container-padding: 20px;
    --container-padding-mobile: 10px;
    --container-border-radius: 8px;
    --container-margin-bottom: 30px;
    --container-padding-bottom: 20px;
    --container-border-bottom: 2px solid var(--cor-principal);
    --container-titulo-cor: rgb(5, 41, 80);
    --container-titulo-font-size: 28px;
    --container-titulo-font-size-mobile: 22px;
    /* Fim - Configurações Geral do Conteiner */

    /* Configurações dos formulários, inputs e labels */
    /* label */
    --label-cor-texto: rgb(65, 62, 62);
    --font-weight-label: 600;
    /* Fim - label */

    /* input */
    --input-border: 2px solid rgb(167, 163, 163);
    --input-border-hover: 2px solid var(--cor-principal);
    --input-border-radius: 6px;
    --input-padding: 10px;
    /* Fim- input */

    /* form */
    --form-background-color: rgb(223, 227, 230);
    --form-border: 2px solid rgb(202, 203, 204);
    --form-border-radius: 10px;
    /* Fim - form */
    /* Fim - Configurações dos formulários, inputs e labels */

    /* Confiração Geral dos Botões */
    --btn-font-weight: 600;
    --btn-border-radius: 6px;
    --btn-transition: 0.3s;
    /* Fim - Confiração Geral dos Botões */

    /* Configurações dos botões - Entra ( Class="btn-filtro" ) */
    --btn-filtro-background: rgb(50, 58, 71);
    --btn-filtro-background-hover: rgb(0, 47, 97);
    --btn-filtro-color: rgb(255, 255, 255);
    /* Fim - Configurações dos botões - Entra ( Class="btn-filtro" ) */
    
    /* Configurações dos botões - Entra ( Class="btn-entrar" ) */
    --btn-entrar-background: rgb(0, 123, 255);
    --btn-entrar-background-hover: rgb(0, 47, 97);
    --btn-entrar-color: rgb(255, 255, 255);
    /* Fim - Configurações dos botões - Entra ( Class="btn-entrar" ) */

    
    /* Configuração Geral do Botão - Busca ( Class="btn-buscar" ) */
    --btn-buscar-background: rgb(0, 123, 255);
    --btn-buscar-background-hover: rgb(1, 62, 128);
    --btn-buscar-color: rgb(255, 255, 255);
    /* Fim - Configuração Geral do Botão - Busca ( Class="btn-buscar" ) */


    /* Configuração Geral do Botão - Editar ( Class="btn-editar" ) */
    --btn-editar-background: rgb(0, 123, 255);
    --btn-editar-background-hover: rgb(1, 62, 128);
    --btn-editar-color: rgb(255, 255, 255);
    /* Fim - Configuração Geral do Botão - Editar ( Class="btn-editar" ) */


    /* Configuração Geral do Botão - Upload ( Class="btn-upload" ) */
    --btn-upload-background: rgb(0, 247, 255);
    --btn-upload-background-hover: rgb(0, 117, 121);
    --btn-upload-color: rgb(0, 0, 0);
    /* Fim - Configuração Geral do Botão - Upload ( Class="btn-upload" ) */


    /* Configuração Geral do Botão - limpar ( Class="btn-limpar" ) */
    --btn-limpar-background: rgb(255, 0, 0);
    --btn-limpar-background-hover: rgb(158, 3, 3);
    --btn-limpar-color-texto: rgb(255, 255, 255);
    /* Fim - Configuração Geral do Botão - limpar ( Class="btn-limpar" ) */


    /* Configuração Geral do Botão - delete ( Class="btn-delete" ) */
    --btn-delete-background: rgb(255, 0, 0);
    --btn-delete-background-hover: rgb(158, 3, 3);
    --btn-delete-color-texto: rgb(255, 255, 255);
    /* Fim - Configuração Geral do Botão - delete ( Class="btn-delete" ) */


    /* Configuração Geral do Botão - Salvar ( Class="btn-salvar" )  */
    --btn-salvar-background: rgb(37, 172, 69);
    --btn-salvar-background-hover: rgb(18, 104, 37);
    --btn-salvar-color-texto: rgb(255, 255, 255);
    /* Fim - Configuração Geral do Botão - Salvar ( Class="btn-salvar" )  */


    /* Configuração Geral do Botão - Cadastro ( Class="btn-cadastro" )  */
    --btn-cadastro-background: rgb(37, 172, 69);
    --btn-cadastro-background-hover: rgb(18, 104, 37);
    --btn-cadastro-color-texto: rgb(255, 255, 255);
    /* Fim - Configuração Geral do Botão - Cadastro ( Class="btn-cadastro"" )  */


    /* Configuração Geral do Botão - toggle ( Class="btn-toggle" ) */
    --btn-toggle-background: rgb(251, 255, 0);
    --btn-toggle-background-hover: rgb(117, 119, 0);
    --btn-toggle-color-texto: rgb(0, 0, 0);
    /* Fim - Configuração Geral do Botão - toggle ( Class="btn-toggle" ) */

    /* Configuração Geral do Botão - toggle ( Class="btn-lista-capitulo" ) */
    --btn-lista-capitulo-background: rgb(255, 174, 0);
    --btn-lista-capitulo-background-hover: rgb(110, 80, 25);
    --btn-lista-capitulo-color-texto: rgb(0, 0, 0);
    /* Fim - Configuração Geral do Botão - toggle ( Class="btn-lista-capitulo" ) */


    /* Configuração Geral do Botão - Cancelar Edição ( Class="btn-cancelar-editar" ) */
    --btn-editar-cancelar-background: rgb(175, 172, 172);
    --btn-editar-cancelar-background-hover: rgb(57, 58, 58);
    --btn-editar-cancelar-color-texto: rgb(0, 123, 255);
    /* Fim - Configuração Geral do Botão - Cancelar Edição ( Class="btn-cancelar-editar" ) */


    /* Configurações Geral do Select Filtro - ( Class="select-filtro" ) */
    --select-filtro-border: 2px solid rgb(167, 163, 163);
    --select-filtro-padding: 10px;
    --select-filtro-border-radius: 6px;
    --select-filtro-background: rgb(255, 255, 255);
    /* Fim - Configurações Geral do Select Filtro - ( Class="select-filtro" ) */


    /* Configurações de Status */
    --status-ativo: rgb(37, 172, 69);
    --status-inativo: rgb(255, 0, 0);
    /* Fim - Configurações de Status */

    /* Configuração Especificar da Tabela */
    --container-tabela-overflow: auto;
    --container-tabela-max-height: 470px;
    --container-tabela-border-radius: 8px;
    --tabela-th-border-radius: 20px;
    --tabela-width: 100%;
    --tabela-border-collapse: collapse;
    --tabela-th-background: rgb(214, 224, 233);
    --tabela-th-padding: 12px;
    --tabela-th-font-weight: 600;
    --tabela-th-color: rgb(0, 0, 0);
    --tabela-th-text-align: center;
    --tabela-td-padding: 10px 15px;
    --tabela-td-text-align: center;
    --tabela-td-border-bottom: 1px solid var(--cor-principal);
    --tabela-sem-dados-text-align: center;
    --tabela-sem-dados-padding: 40px;
    --tabela-sem-dados-font-size: 18px;
    --tabela-sem-dados-font-weight: 600;
    --tabela-sem-dados-color: rgb(167, 163, 163);  
    --tabela-sem-dados-border-bottom: 1px solid var(--cor-principal);
    --tabela-sem-dados-background-color: rgb(255, 255, 255);
    /* Fim - Configuração Especificar da Tabela */


    /* Configuração geral dos Botões de Ação da Tabela */
    --btn-grupo-acao-display: flex;
    --btn-grupo-acao-gap: 10px;
    --btn-grupo-acao-justify-content: center;
    --btn-acao-width: 35px;
    --btn-acao-height: 35px;
    --btn-acao-display: flex;
    --btn-acao-justify-content: center;
    --btn-acao-align-items: center;
    --btn-acao-border-radius: 8px;
    --btn-acao-text-decoration: none;
    --btn-acao-color: rgb(255, 255, 255);
    --btn-acao-transition: 0.3s;
    /* Fim - Configuração geral dos Botões de Ação da Tabela */

}

/************************************************************
|>> Confiração do Geral do Body, main <<|
************************************************************/
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Arial;
}
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
main {
    flex: 1;
    width: 100%;
}