:root {
    --cinza-escuro-1: #343a40;
    --cinza-escuro-2: #51585f;
    --cinza-claro-1: #aaaaaa;
    --cinza-claro-2: #f2f2f2;
    --cinza-claro-3: #f8f9fa;
}

/* Principais */

html, body {
    height: 100%;
}

header#header_system span.sys-appname  {
    font-size: 1.4rem;
    text-shadow: 1px 1px 1px #dee2e6;
}

header#header_system span.sys-appname a.link-appname {          /* Sim, é um span com um link dentro. Tem que arrumar */
    text-decoration: none;
    color: inherit;
}

header#header_system span.sys-appname a.link-appname:hover {
    text-decoration: none;
    color: inherit;
}

header#header_system > .navbar {
    border-bottom: 1px solid #dee2e6;
    padding-left: 60px;
}

.dropdown-menu-right .dropdown-divider {
    border-top: 1px solid transparent;
}


@media only screen and (min-width: 1600px)
{
    main#main_system
    {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    main#main_system > *:not(#box_login):not(#box-sem-empresa):not(#container_sucesso):not(#breadcrumb_block):not(#modal_comparar_dados):not(.modal)
    {
        width: 1530px;
    }
}

#mensagem_div_topo .mensagem 
{
    position: fixed;
    z-index: 10000;
    top: 20px;
    min-width: 40%;
    border-radius: 50px;
}

/* .tela-principal, .tela-manutencao {
    margin-bottom: 3rem;
} */

.loader
{
    display: flex;
    justify-content: center;
    align-items: center;
    
    background: rgba(0, 0, 0, 0.9);
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 9000;
}

.loader > .loader-image
{
    height: 64px;
    /* filter: blur(1px); Sem esse blur parece dar um ar maior de sofisticação */        
}

footer#footer_system 
{
    padding-left: 60px;
}

/* Formulários */

.form-group
{
    margin-bottom: .75rem;
}

input 
{
    border-top-right-radius: .25em !important;
    border-bottom-right-radius: .25em !important;
}

::placeholder
{
    color: var(--cinza-claro-1) !important;
}

.bootstrap-select > .dropdown-toggle
{
    border: 1px solid #ced4da;
}

.input-group > .form-control:not(:last-child) 
{
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}


/* label 
{
    margin-bottom: .1rem;
} */

/* Tabela */

/* Espaçamento das linhas na tela principal */
.table-sm td, .table-sm th 
{
    vertical-align: middle;
    padding: .785rem;
}

.tr-click
{
    cursor: pointer;
}

/* Espaçamento após uma tabela DataTables nas telas principais das páginas */
section.wrapper-tabela-principal.with-datatables {
    margin-bottom: 3rem;
}

/* Espaçamento após uma tabela DataTables em uma guia da tela de manutenção */
[role="tabpanel"] section.wrapper-tabela-principal.with-datatables {
    margin-bottom: 1.5rem;
}

/* Paginação */
footer.paginacao > nav > ul
{
    margin-top: 1rem;
    margin-bottom: 0;
}

/* Botões de Ação */

.crud-actions
{
    position: fixed;
    right: 1.5rem;
    bottom: 3rem;
    z-index: 10;
}

.crud-actions button {
    box-shadow: 2px 2px 8px 0px #dee2e6;
}

/* Card de manutenção */

article.tela-manutencao section.card > header.card-header h2 {
    font-size: 1rem;
    font-weight: bold;
    margin-bottom: 0;
}

/* Outros elementos */

/* ícone de senhas */
.input-right-icon 
{
    float: right;
    right: 4px;
    margin-left: -20px;
    margin-top: 11px;
    position: relative;
    z-index: 100;
    cursor: pointer;
}

.tela-manutencao {
    display: none;
}

/* Estilo do ícone de campos obrigatórios */

.required-fields {      
    float: right;
    margin-bottom: 1.25rem;
    margin-right: 1.25rem;
}

/* Datetimepicker */

.datetimepicker-days td.day.disabled {
    cursor: not-allowed !important;
}

.hidden-visually {
    border: 0;
    height: 1px;
    width: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: fixed;
    white-space: nowrap;
  }