:root {
    /*
        Primary:    A cor mais presente no design
        Secondary:  A segunda cor mais presente no design, muitas vezes usado como contraste em relação 
                    a cor primária
        Accent:     Uma cor usada como destaque
        Focused:    Geralmente usada em itens selecionados (ex: linhas da grid)
        Hovered:    Usada para indicar que o mouse está sob o elemento
    */
    --primary-background-color: #ffffff;
    --primary-text-color: rgba(0, 0, 0, 0.7);
    --primary-border-color: #666666;
    /**/
    --secondary-background-color: #f0f0f0; /* Equivalente a rgba(0, 0, 0, 0.06) */
    --secondary-text-color: rgba(0, 0, 0, 0.55);
    --secondary-border-color: rgba(0, 0, 0, 0.09);
    /**/
    --accent-background-color: rgba(0, 0, 0, 0.5);
    --accent-text-color: white;
    --accent-border-color: #ddd;
    /**/
    --focused-background-color: rgba(143, 201, 255, 0.2);
    --focused-text-color: rgba(0, 0, 0, 0.9);
    --focused-border-color: #ddd;
    /**/
    --hovered-background-color: rgba(0, 0, 0, 0.1);
    --hovered-text-color: rgba(0, 0, 0, 0.9);
    --hovered-border-color: #ddd;
    /**/
    --success-background-color: rgba(92, 184, 92, 0.9);
    --success-text-color: white;
    --success-textonly-color: rgba(92, 184, 92, 1);
    --success-border-color: rgba(92, 184, 92, 1);
    --success-focused-background-color: var(--success-background-color);
    --success-focused-text-color: var(--success-text-color);
    --success-focused-border-color: var(--success-border-color);
    /**/
    --warning-background-color: rgba(240, 173, 78, 0.9);
    --warning-text-color: white;
    --warning-textonly-color: rgba(240, 173, 78, 1);
    --warning-border-color: rgba(240, 173, 78, 1);
    --warning-focused-background-color: var(--warning-background-color);
    --warning-focused-text-color: var(--warning-text-color);
    --warning-focused-border-color: var(--warning-border-color);
    /**/
    --danger-background-color: rgba(217, 83, 79, 0.9);
    --danger-text-color: white;
    --danger-textonly-color: rgba(217, 83, 79, 1);
    --danger-border-color: rgba(217, 83, 79, 1);
    --danger-focused-background-color: var(--danger-background-color);
    --danger-focused-text-color: var(--danger-text-color);
    --danger-focused-border-color: var(--danger-border-color);
    /**/
    --info-background-color: rgba(51, 122, 183, 0.9);
    --info-text-color: white;
    --info-textonly-color: rgba(51, 122, 183, 1);
    --info-border-color: rgba(51, 122, 183, 1);
    --info-focused-background-color: var(--info-background-color);
    --info-focused-text-color: var(--info-text-color);
    --info-focused-border-color: var(--info-border-color);
    /**/
    --badge-background-color: #fff;
    --badge-text-color: #fff;
    /*
        Header:     Usada para destacar elementos (ex: uma linha menos fina no topo de um box)
        Separator:  Usado para dar um contorno nos principais elementos da tela
    */
    --header-border-color: #666666;
    --header-bg-color: var(--primary-background-color);
    --separator-border-color: rgb(228, 228, 228);
    /*
        ContentArea: Conteúdo principal da página
        SideNav:    Principal menu (vertical) de navegação do portal
        Header:     Barra horizontal com as informações mais gerais sobre o sistema
        NavTabs:    Trata-se de um sub-menu de navegação específico da página que foi carregada
        Footer:     Rodapé da página
        BreadCrumb: O caminho da página atual
    */
    --contentarea-background-color: var(--secondary-background-color);
    --sidenav-background-color: var(--primary-background-color);
    --sidenav-background-submenu-color: var(--secondary-background-color);
    --sidenav-background-active-color: var(--secondary-background-color);
    --content-header-background-color: var(--primary-background-color);
    --content-navtabs-background-color: var(--primary-background-color);
    --content-navtabs-background-active-color: var(--primary-background-color);
    --footer-background-color: var(--primary-background-color);
    --breadcrumb-color: var(--secondary-text-color);
    --breadcrumb-active-color: var(--primary-text-color);
    /*
        Contém as principais definições para as caixinhas presentes no portal
    */
    --box-background-color: var(--primary-background-color);
    /*
        Definições feitas para elementos de listagens (grid, treelist, list, etc)
    */
    --rowdata-alt-background-color: var(--secondary-background-color);
    --rowdata-focused-background-color: var(--focused-background-color);
    --rowdata-hovered-background-color: var(--hovered-background-color);
    --pager-focused-text-color: #666;
    --pager-focused-background-color: #666;
    /**/
    --logo-text-color: #666666;
    --label-color: var(--primary-text-color);
    --title-color: var(--primary-text-color);
    /**/
    --positive-number-color: #006633;
    --negative-number-color: #FF0099;
    --zero-number-color: #666666;
}