

body
{
    background-color: var(--cinza-claro-2);
    color: var(--cinza-escuro-1);
}

#header_system > .navbar
{
    background-color: white;
    color: var(--cinza-escuro-1);
}

/* Main */

main#main_system
{
    min-height: 90%;
    padding-bottom: 3rem;
    
    background-color: white;
}

/* Dropdowns */

#header_system > .navbar .dropdown-menu, .dropdown-menu-right > a
{
    background-color: var(--cinza-escuro-1);
    color: var(--cinza-claro-3);
}

#header_system > .navbar .dropdown-menu li:hover a
{
    color: var(--cinza-escuro-1);
}

#header_system > .navbar .dropdown-menu a:hover
{
    color: var(--cinza-claro-3);
    background-color: var(--cinza-escuro-2) !important;
}

#header_system > .navbar .dropdown-menu li:active
{
    background-color: var(--cinza-claro-2);
}

.dropdown-item:active
{
    background-color: var(--cinza-claro-3);
    color: var(--cinza-escuro-1);
}

.dropdown-item.selected.active
{
    background-color: var(--cinza-escuro-1);
    color: var(--cinza-claro-3);
}

a.dropdown-item:hover > svg
{
    color: var(--cinza-escuro-1);
}

/* Os selects desabilitados estão sendo facilmente confundidos com os habilitados no design padrão  */
.bootstrap-select > button.btn-light:not(.disabled) {     
    background-color: #f3f5f6;
}

/* Isso dá ainda mais realce de que aquela option do select não pode ser selecionada */
.bootstrap-select > div.dropdown-menu li.disabled {
    cursor: not-allowed;
}

/* Paginação */

footer.paginacao a.page-link, #perfil.nav-link
{
    color: var(--cinza-escuro-1) !important;
}

footer.paginacao li.page-item.active .page-link
{
    background-color: var(--cinza-escuro-1) !important;
    border-color: var(--cinza-escuro-1) !important;
}

/* Clockpicker */

span.clockpicker-span-hours.text-primary
{
    color: var(--cinza-escuro-1) !important;
}

span.clockpicker-span-minutes.text-primary
{
    color: var(--cinza-escuro-1) !important;
}

.clockpicker-canvas line
{
    stroke: black !important;
}

.clockpicker-canvas-bearing, .clockpicker-canvas-fg
{
    fill: black !important;
}

.clockpicker-canvas-bg
{
    fill: var(--cinza-claro-1) !important;
}

.clockpicker-canvas-bg-trans
{
    fill: rgba(170, 170, 170, 0.5) !important;
}

.clockpicker-tick:hover
{ 
    background-color: rgba(170, 170, 170, 0.5) !important;
}