/* Alterando a cor de fundo da sidebar */
.brand-link {
    background-color: #003366!important; /* Cor de fundo da sidebar */
}

aside.main-sidebar  {
    background-color: #003399!important; /* Cor de fundo da sidebar */
}

/* Alterando a cor de fundo quando a sidebar está colapsada */
.sidebar-collapse aside {
    background-color: #003399!important; /* Cor de fundo da sidebar colapsada */
}

/* Alterando a cor do texto e ícones da sidebar */
.nav-sidebar>.nav-item .nav-link {
    color: #ffffff !important; /* Cor do texto */
}

.nav-sidebar>.nav-item .nav-icon {
    color: #ffffff !important; /* Cor dos ícones */
}

/* Alterando a cor do texto do item ativo */
.nav-sidebar>.nav-item.active>.nav-link {
    background-color: #007bff !important; /* Cor de fundo do item ativo */
    color: #ffffff !important; /* Cor do texto do item ativo */
}

/* Alterando a cor do badge (se presente) */
.nav-sidebar>.nav-item .badge {
    /* background-color: #ff5733 !important; Cor do badge */
}

/* Alterando a cor do cabeçalho da sidebar */
.sidebar-header {
    background-color: #003399!important; /* Cor de fundo do cabeçalho */
    color: #ffffff !important; /* Cor do texto do cabeçalho */
}

/* --------------------------------------- */
.bg-warning, .bg-orange {
    color: #FFFFFF !important;
}

/* /////////////////////////////// */
.info a {
    display: block;
    white-space: nowrap;      /* Garante que o texto não quebre para a linha seguinte */
    overflow: hidden;         /* Esconde o conteúdo que ultrapassar o limite */
    text-overflow: ellipsis;  /* Exibe os três pontinhos quando o texto é cortado */
    text-decoration: none;    /* Remove o sublinhado, se desejar */
}

/* /////////////////////////////// */
.truncate-text {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
    display: block !important;
}

/* /////////////////////////////// */
.dataTables_paginate, .dataTables_filter {
    text-align: right !important;
    float: right !important;
}

.dataTables_filter {
    margin-top: 6px !important;
}

.dataTables_filter input {
    width: 25vw !important;
}

/* ////////////////////////////////////// */
.centralizar-td {
    text-align: center;
    vertical-align: middle;
}

/* ////////////////////////////////////////// */
div.dt-buttons.btn-group.flex-wrap {
    margin-bottom: 6px !important;
}

/* ///////////////////////////////////////// */
ul.pagination {
    margin-top: -39px !important;
}

/* ///////////////////////////////////////// */
.icon-btn {
    margin-right: 10px !important;
}

/* ///////////////////////////////////////// */
/* Estiliza o menu do ColVis */
.dropdown-menu {
    padding-top: 0px !important;
    padding-bottom: 0px !important;
}

/* Altera a cor de fundo do item ativo no dropdown do ColVis para TODOS os menus */
div.dt-button-collection a.dt-button.active {
    background-color: #17a2b8 !important; /* Cor de fundo do botão ativo */
    color: #ffffff !important; /* Cor do texto */
    border-color: #003399 !important;
}

/* Efeito ao pressionar o botão ativo */
div.dt-button-collection a.dt-button.active:active {
    background-color: #003366 !important; 
}

/* ,,,,,,,,,,,,,,,,,,,,,,,,, */
.dropdown-menu.custom-width {
    min-width: 550px !important; /* Define a largura mínima */
    max-width: 550px !important; /* Define a largura máxima */
    width: 550px !important; /* Define a largura fixa */
}

/* --------------------------------------- */
.ne {
    opacity: 0.5;
}

/* --------------------------------------- */
/* Altera a cor do switch quando ativado no modo escuro */
.dark-mode .custom-control-input:checked ~ .custom-control-label::before {
    background-color: #555 !important; /* Cor escura para o switch */
    border-color: #444 !important; /* Cor da borda */
}

/* --------------------------------------- */
#toast-container {
    width: 400px !important;
    max-width: 400px !important;
}

#toast-container > .toast {
    min-width: 400px !important;
    max-width: 400px !important;
    white-space: normal !important;
    word-wrap: break-word !important;
}

/* --------------------------------------- */
.modal, .modal-footer, .modal-header, .card-footer {
    opacity: 0.9 !important;
}

/* --------------------------------------- */
.dark-mode .main-header {
    background-color: #343a40 !important; /* Ajuste a cor conforme necessário */
    color: #ffffff !important;
}

.dark-mode .main-header .navbar-nav .nav-link {
    color: #ffffff !important;
}

.dark-mode .main-header .navbar-nav .nav-icon {
    color: #ffffff !important;
}

.dark-mode .main-header .navbar-nav .dropdown-menu {
    background-color: #343a40 !important;
    color: #ffffff !important;
}

.dark-mode .main-header .navbar-nav .dropdown-menu a {
    color: #ffffff !important;
}

.dark-mode .main-header .navbar-nav .dropdown-menu a:hover {
    background-color: #495057 !important;
    color: #ffffff !important;
}

/* Estilo para o modo escuro aplicado aos elementos card bg-light */
.dark-mode .card.bg-light {
    background-color: #343a40 !important; /* Ajuste a cor conforme necessário */
    color: #ffffff !important;
}

.dark-mode .card.bg-light .card-header {
    background-color: #495057 !important; /* Ajuste a cor conforme necessário */
    color: #ffffff !important;
}

.dark-mode .card.bg-light .card-body {
    background-color: #343a40 !important; /* Ajuste a cor conforme necessário */
    color: #ffffff !important;
}

.dark-mode .card.bg-light  {
    background-color: #495057 !important; /* Ajuste a cor conforme necessário */
    color: #ffffff !important;
}

/* --------------------------------------- */
.priority-label {
    border-radius: 3px;  /* Cantos arredondados */
    height: 30px;  /* Mesma altura dos botões do DataTables */
    text-align: center;
    vertical-align: middle;
    display: flex;  /* Adiciona flexbox */
    align-items: center;  /* Centraliza verticalmente */
    justify-content: center;  /* Centraliza horizontalmente */
    width: 100%;  /* Largura total */
    padding: 0 12px
}

/* --------------------------------------- */
.no-wrap-datatables {
    white-space: nowrap; /* Impede a quebra de linha */
    text-align: left; /* Justifica o texto à esquerda */
}

table.dataTable thead {
    border-bottom: 1px solid #ddd !important; /* Linha mais fina */
}

table.dataTable thead th {
    border-bottom: none !important; /* Remove borda dupla */
    padding-bottom: 10px; /* Ajusta espaçamento */
}

table.dataTable tbody tr:first-child {
    border-top: none !important; /* Remove linha grossa extra */
}

mark {
    padding-top:2px;
    padding-bottom:3px;
    padding-left:0;
    padding-right: 0;
    background:none;
    font-weight:bold;
    color:#dc1f4f;
}	

/* --------------------------------------- */
.dataTables_info {
    border: #DDDDDD 1px solid !important;
    margin-top: 12px !important;
    display: flex !important;
    align-items: center !important; /* Centraliza verticalmente */
    justify-content: center !important; /* Centraliza horizontalmente */
    padding: 0 10px !important; /* Espaçamento interno */
    height: 40px !important;
    border-radius: 3px !important;
    color: #007bff !important;
    width: fit-content !important; /* Define a largura baseada no conteúdo */
    max-width: 100% !important; /* Evita que ultrapasse a área disponível */
}

/* --------------------------------------- */
.custom-file-label::after {
    content: "Selecionar"; /* Novo texto do botão */
    border-left: 1px solid rgba(0, 0, 0, 0.1);
    padding: 0.375rem 0.75rem;
}

.dropdownRisk {
    border-color: #CED4DA; /* Altera a cor da borda */
    border-radius: 0.25rem; /* Mantém o arredondamento padrão */
}

.dropdownRisk::after {
    display: none; /* Remove a seta do dropdown */
}

/* --------------------------------------- */
.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    color: white;
    font-size: 18px;
    z-index: 1059;
}

.image1x1 {
    aspect-ratio: 1 / 1; /* Mantém o formato quadrado */
    object-fit: cover;
    display: block;
}

/* --------------------------------------- */
.no-padding {
    padding: 4px !important;
}

/* --------------------------------------- */
.dt-button-info {
    background-color: rgba(0, 0, 0, 0.8); /* Fundo escuro transparente */
    color: #666; /* Texto branco */
    font-size: 16px; /* Tamanho da fonte maior */
    padding: 15px; /* Mais espaçamento */
    border-radius: 8px; /* Bordas mais arredondadas */
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.5); /* Sombra suave */
    border: 1px solid #222; /* Borda mais escura */
}

/* Modifica a estrutura interna */
.dt-button-info h2 {
    font-size: 18px !important; /* Aumenta o tamanho do título */
    font-weight: bold !important; /* Deixa o título em negrito */
    border: none !important; /* Remove borda do título */
    margin-bottom: 5px !important; /* Reduz o espaço abaixo do título */
    border-radius: 3px !important;
    background-color: #17a2b8 !important;
    color: #ffffff !important;
    opacity: 0.8!important; /* Opacidade reduzida */
}

div.dt-button-info {
    border: 1px solid #17a2b8 !important;
    border-radius: 5px !important;
    opacity: 0.95 !important; /* Opacidade reduzida */
}

/* --------------------------------------- */
/* Afasta o botão adicional (Cadastrar usuário) 20px à direita do grupo */
.dt-buttons .btn-adicional {
    border-left: rgba(255, 255, 255, 0.4) 1px solid; /* Borda com 50% de transparência */
}

/* --------------------------------------- */
.badge-teal {
    background-color: #20c997; /* Mesma cor do card-teal */

}.alert-teal {
    background-color: #20c997; /* Mesma cor do card-teal */
    color: white;
}
.btn-teal {
    background-color: #20c997; /* Mesma cor do card-teal */
    color: white;
    border-color: #008080; /* Cor da borda igual ao card */
}

.btn-teal:hover {
    background-color: #008080; /* Um tom mais escuro no hover */
    color: white;
}

.btn-orange {
    background-color: #fd7e14; /* Laranja do Bootstrap */
    color: white;
    border-color: #e86400; /* Um tom mais escuro para o contorno */
}

.btn-orange:hover {
    background-color: #e86400; /* Tom mais escuro no hover */
    color: white;
}

.card-title {
    color: white;
}

/* --------------------------------------- */
@keyframes blink {
    0% { opacity: 1; }
    50% { opacity: 0; }
    100% { opacity: 1; }
}

.blink {
    animation: blink 2s infinite;
}

/* --------------------------------------- */
.card-footer {
    padding: 12px;
}

/* --------------------------------------- */
.status-number {
    display: none;
}

.clickable-status {
    border: none !important;
}

/* Garantir que o texto dos botões com classe .btn-warning seja branco */
.btn-warning, .btn-warning:hover, .btn-warning:active, .btn-warning:visited, .btn-warning:focus {
    color: white;
}

/* Regra para .card-orange */
.localTituloVer.card-orange .nav-tabs .nav-link {
    color: white !important; /* Texto branco por padrão */
}

.localTituloVer.card-orange .nav-tabs .nav-link.active,
.localTituloVer.card-orange .nav-tabs .nav-link.active:hover,
.localTituloVer.card-orange .nav-tabs .nav-link.active:focus {
    color: black !important; /* Texto preto quando a aba estiver ativa */
}

.localTituloVer.card-orange .nav-tabs .nav-link:hover,
.localTituloVer.card-orange .nav-tabs .nav-link:focus {
    color: white !important; /* Texto branco no hover e focus (exceto quando ativa) */
}

/* Regra para .card-warning */
.localTituloVer.card-warning .nav-tabs .nav-link {
    color: white !important; /* Texto branco por padrão */
}

.localTituloVer.card-warning .nav-tabs .nav-link.active,
.localTituloVer.card-warning .nav-tabs .nav-link.active:hover,
.localTituloVer.card-warning .nav-tabs .nav-link.active:focus {
    color: black !important; /* Texto preto quando a aba estiver ativa */
}

.localTituloVer.card-warning .nav-tabs .nav-link:hover,
.localTituloVer.card-warning .nav-tabs .nav-link:focus {
    color: white !important; /* Texto branco no hover e focus (exceto quando ativa) */
}

/* --------------------------------------- */
body:not(.dark-mode) .modal-footer, body:not(.dark-mode) .card-footer {
    background-color: #EFEFEF !important; border-top: 1px solid #DDD !important;
}

/* --------------------------------------- */
/* Aplica a cor apenas no modo normal */
body:not(.dark-mode) .textDataTable {
    color: #4c5773 !important;
}

body:not(.dark-mode) {
    color: #4c5773 !important;
}

.tooltip-inner {
    opacity: 0.76 !important; /* Ajuste conforme necessário */
}

/* --------------------------------------- */
/* Estilo da notificação */
.notificacao {
    position: fixed;
    top: 86px;
    right: 30px;
    width: 330px;
    color: white;
    font-size: 20px;
    text-align: center;
    padding: 15px;
    border-radius: 10px;
    box-shadow: 5px 4px 8px rgba(0, 0, 0, 0.4); /* Sombra suave */
    animation: piscar 1s infinite alternate, tremer 0.3s infinite;
    cursor: pointer;
    z-index: 1060;
    opacity: 1;
    visibility: hidden;
    transition: opacity 0.3s ease-in-out;
}

.botoes {
    margin-top: 10px;
}

@keyframes tremer {
    0% { transform: translateX(0px); }
    25% { transform: translateX(-3px); }
    50% { transform: translateX(3px); }
    75% { transform: translateX(-3px); }
    100% { transform: translateX(3px); }
}
/* --------------------------------------- */
#notificacaoSocorro {

    visibility: hidden;
    opacity: 0;
}


/* --------------------------------------- */
.bg-opacity::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.5); /* Ajuste a opacidade */
    z-index: 0; /* Fica atrás do conteúdo */
    border-radius: inherit; /* Mantém os cantos arredondados */
    
}

.bg-opacity > * {
    
    position: relative;
    z-index: 1; /* Mantém os conteúdos acima do fundo */
}