@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700;800;900&display=swap");

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: #f1f1f1 !important;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

section {
    flex: 1 0 auto;
    width: 100%;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "Raleway", sans-serif;
}

.p-gpqr,
dt,
label {
    font-family: "Poppins", sans-serif;
}

.conteudo {
    position: relative;
    padding: 1rem;
    background: #fff;
    border-radius: 0.4rem;
    box-shadow: 0 7px 14px 0 rgba(60, 66, 87, 0.1),
        0 3px 6px 0 rgba(0, 0, 0, 0.07);
    margin: 10px auto;
}

/*------ scroll bar ---------------------*/

::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px grey;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    background: #23252652;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: #232526;
}

/* Error */
.error-container {
    align-items: center;
    display: flex;
    flex-direction: column;
    height: 100vh;
    justify-content: center;
}

.requerimento-atrasado {
    background-color: #fff3cd !important;
}

/*======================================================== 
    Estilo para os loading
    ========================================================*/
.carregando {
    top: 45%;
    left: 50%;
    position: absolute;
    transform: translate(-50%, -50%);
    width: 150px;
    background: #fff;
    height: 10px;
    border-radius: 7px;
    overflow: hidden;
}

.progresso {
    width: 1px;
    height: 10px;
    border-radius: 7px;
    background: #212529;
    transition: 0.5s;
    animation: loading_44 10s cubic-bezier(0.4, 1.01, 1, 1) infinite;
}

@keyframes loading_44 {
    0% {
        width: 0%;
    }

    50% {
        width: 100%;
    }

    100% {
        width: 0%;
    }
}

/*==============================================
    MENU STYLES    
    =============================================*/
.menu-gpqr {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    height: 200px;
    margin-bottom: 10px;
    padding: 10px;
    text-decoration: none;
    color: #000;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 16px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s;
}

.menu-gpqr:hover {
    transform: scale(1.04);
    color: #000;
}

.bot-link {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
  height: 70px;
  z-index: 10;
  position: absolute;
  right: 20px;
  flex-direction: row;
}

.bot-link li {
  display: flex;
  align-items: center;
  flex-direction: row;
  font-size: 35px;
}

.bot-link i {
  font-size: 40px;
  color: #bd4141;
  transition: color 0.3s;
}

.assistente-text {
  display: inline-block;
  margin-left: 10px;
  transform: translateX(50px);
  opacity: 0;
  transition: transform 0.4s ease, opacity 0.4s ease;
  white-space: nowrap;
  font-size: 20px;
  color: #a03f3f;
}

#btnAssis:hover .assistente-text {
  transform: translateX(0);
  opacity: 1;
}

#btnAssis:hover i {
  color: #b14c48ef;
}
.card-header{
    color:#212529
}
.dark-mode .card-header{
    background-color:rgba(51, 48, 48, 0.77);
    color: #fff;
}
#btn-limpar-chat{ 
    font-size: 20px;
    color: #c43934ef;
}

/*==============================================
    FOOTER STYLES     
    =============================================*/
.footer {
    display: flex;
    align-items: center;
    justify-content: space-around;
    background: rgb(255, 255, 255);
    background: linear-gradient(180deg,
            rgba(255, 255, 255, 1) 0%,
            rgba(216, 216, 216, 1) 100%);
    width: 100%;
    height: 70px;
    position: relative;
}

.footer li{
    margin-right: 15px;
}

#assistenteModal .card {
  width: 100% !important;
  max-width: none !important;
  height: 80vh !important;
  overflow-y: auto !important;
}


.footer span {
    font-family: "Poppins", sans-serif;
}

/*==============================================
    TABLE STYLES     
    =============================================*/
.table-responsive {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.table-gpqr {
    margin-top: 24px;
    background: rgba(255, 255, 255, 0.52);
    border-radius: 0.4rem;
    box-shadow: 0 3px 20px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(10.4px);
    -webkit-backdrop-filter: blur(10.4px);
    border: 1px solid rgba(255, 255, 255, 0.53);
}

.thead-fixed {
    position: sticky;
    top: 70px;
    z-index: 1000;
}

.mt-custom {
    margin-top: 7rem !important;
}

.table-gpqr th,
td {
    padding: 0.95rem !important;
}

.table-gpqr th a {
    color: #404950;
    text-decoration: none;
}

/*==============================================
    FORM STYLES     
    =============================================*/
.form {
    border-radius: 16px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

input[type="checkbox"] {
    accent-color: #333;
    width: 18px;
    height: 18px;
}

/*==============================================
    PAGINATION STYLES     
    =============================================*/
.pagination-gpqr {
    display: flex;
    justify-content: center;
    list-style: none;
}

.pagination-gpqr li {
    margin: 0 5px;
}

.pagination-gpqr a {
    display: block;
    padding: 8px 12px;
    text-decoration: none;
    background-color: #f7f7f7;
    border-radius: 4px;
    transition: background-color 0.2s;
}

.pagination-gpqr a:hover {
    background-color: #ddd;
}

.pagination-gpqr .active a {
    background-color: #333;
    color: #fff;
}

/*==============================================
    NAVBAR STYLES     
    =============================================*/

.navbar-gpqr {
    background: #fff;
    height: 70px;
    gap: 1rem;
    text-align: center;
    padding: 0 24px;
}


.navbar-ul-gpqr {
    gap: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 15px;
}

.navbar-ul-gpqr li a {
    color: #232526;
    display: flex;
    align-items: center;
    gap: 8px;
}

.navbar-ul-gpqr li a:hover,
.navbar-ul-gpqr li a:active,
.navbar-ul-gpqr li a:focus {
    color: #232526;
    border-bottom: 1px solid #232526;
}

#logoImage {
    margin-left: 20px;
}

.perfil {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 15px;
    font-family: Poppins, sans-serif;
    margin-right: 20px;
}

.perfil img {
    height: 45px;
    width: 45px;
    border-radius: 50%;
    display: block;
    transition: all 0.4s ease;
}

.perfil img:hover {
    border: 1px solid;
    border-color: #cc1f1a;
    box-shadow: 0 0 10px red;
}

.text-danger {
    font-size: 12px;
    transition: all 0.3s ease;
}

.text-danger:hover {
    text-underline-offset: 6px;
}

#text-danger:hover {
    text-decoration: underline;
    font-size: 13px;
    text-underline-offset: 6px;
    transition: all 0.5s ease;
}


#btnSair :hover {
    color: #cc1f1a;
}


.navbar-es-gpqr {
    color: #000000 !important;
}

.navbar-es-gpqr:hover {
    color: #000000 !important;
}

.navbar-es-gpqr.active {
    background-color: #6C757D !important;
    color: #0a0a0a !important;
}


/*==============================================
    AJUDA STYLES     
    =============================================*/
.ajuda-gpqr {
    gap: 20px;
}

.ajuda-gpqr li {
    border-radius: 8px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    transition: transform 0.2s;
}

.ajuda-gpqr li:hover,
.ajuda-gpqr li:active,
.ajuda-gpqr li:focus {
    cursor: pointer;
    transform: scale(1.04);
    filter: brightness(0.1);
}

.ajuda-gpqr li a {
    padding: 8px;
    text-decoration: none;
    color: #333;
    font-family: Poppins, sans-serif;
}

.text-gpqr {
    font-weight: 900;
    color: #970000;
}

.text-assistente {
    font-size: 50px;
    font-weight: 1500;
    color: #ca6969;
}

.bg-gpqr {
    color: #970000;
}

/*==============================================
    MESSAGE(FLASH) STYLES     
    =============================================*/
.message {
    position: sticky;
    z-index: 1;
    padding: 1rem;
    background: #eff8ff;
    color: #2779bd;
    border-color: #6cb2eb;
    border-width: 1px;
    border-style: solid;
    border-radius: 4px;
    margin-bottom: 2rem;
}

.message.hidden {
    display: none;
}

.message.success {
    background: #e3fcec;
    color: #1f9d55;
    border-color: #51d88a;
}

.message.warning {
    background: #fffabc;
    color: #8d7b00;
    border-color: #d3b800;
}

.message.error {
    background: #fcebea;
    color: #cc1f1a;
    border-color: #ef5753;
}

.error-message {
    color: #df2f2f;
}


/*==========================================
    CORES DAS TABELAS NO MODO LIGHT  
    =========================================*/

.table-success-subtle {
    --bs-table-color: #000;
    --bs-table-bg: #d1e7dd;
    --bs-table-striped-bg: #c7dbd2;
    --bs-table-striped-color: #000;
}

.table-primary-subtle {
    --bs-table-color: #000;
    --bs-table-bg: #cfe2ff;
    --bs-table-striped-bg: #c5d7f2;
    --bs-table-striped-color: #000;
}

.table-info-subtle {
    --bs-table-color: #000;
    --bs-table-bg: #cff4fc;
    --bs-table-striped-bg: #c5e8ef;
    --bs-table-striped-color: #000;
}

.table-warning-subtle {
    --bs-table-color: #000;
    --bs-table-bg: #fff3cd;
    --bs-table-striped-bg: #f2e7c3;
    --bs-table-striped-color: #000;
}

.table-secondary-subtle {
    --bs-table-color: #000;
    --bs-table-bg: #e2e3e5;
    --bs-table-striped-bg: #d7d8da;
    --bs-table-striped-color: #000;
}

.table-danger-subtle {
    --bs-table-color: #000;
    --bs-table-bg: #f8d7da;
    --bs-table-striped-bg: #eccccf;
    --bs-table-striped-color: #000;
}

/*==========================================
    CORES DE ACABAMENTO     
    =========================================*/

.table-indigo {
    --bs-table-color: #000;
    --bs-table-bg: #decaff;
    --bs-table-striped-bg: #d2baf9;
    --bs-table-striped-color: #000;
}

.btn-outline-indigo {
    --bs-btn-color: var(--bs-indigo) !important;
    --bs-btn-border-color: var(--bs-indigo) !important;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--bs-indigo);
}

.border-indigo {
    --bs-border-opacity: 1;
    border-color: var(--bs-indigo, var(--bs-border-opacity)) !important;
}

.text-indigo {
    --bs-text-opacity: 1;
    color: var(--bs-indigo, var(--bs-text-opacity)) !important;
}

.table-pink {
    --bs-table-color: #000;
    --bs-table-bg: #D58EBF;
    --bs-table-striped-bg: #D58EBF;
    --bs-table-striped-color: #000;
}

.btn-outline-pink {
    --bs-btn-color: var(--bs-pink) !important;
    --bs-btn-border-color: var(--bs-pink) !important;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--bs-pink);
}

.border-pink {
    --bs-border-opacity: 1;
    border-color: var(--bs-pink, var(--bs-border-opacity)) !important;
}

.text-pink {
    --bs-text-opacity: 1;
    color: var(--bs-pink, var(--bs-text-opacity)) !important;
}

.table-orange {
    --bs-table-color: #000;
    --bs-table-bg: #fddeb5;
    --bs-table-striped-bg: #fddeb5;
    --bs-table-striped-color: #000;
}

.btn-outline-orange {
    --bs-btn-color: var(--bs-orange) !important;
    --bs-btn-border-color: var(--bs-orange) !important;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--bs-orange);
}

.border-orange {
    --bs-border-opacity: 1;
    border-color: var(--bs-orange, var(--bs-border-opacity)) !important;
}

.text-orange {
    --bs-text-opacity: 1;
    color: var(--bs-orange, var(--bs-text-opacity)) !important;
}

/*==========================================
    ROTULOS CORREIOS(GRAL) TIPO OBJETO LC
    ==========================================*/
.correios-fundo {
    background-color: #D0D1D3
}

/*================================================================================
    ESTILOS PARA PÁGINA DE Favoritos E MODAL DE CONFIGURAÇÃO
================================================================================*/

/* Estilos para os cards de atalho */
.atalho-card-display {
    display: flex;
    padding: 1rem;
    border: 1px solid #b6b3b3;
    border-radius: 3rem;
    text-decoration: none;
    color: #212529;
    background-color: #fff;
    transition: all 0.2s ease-in-out !important;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;   
    align-items: center;       
    text-align: center; 
    margin-bottom: 1.5rem;
}

.atalho-card-display:hover {
    transform: translateY(-5px);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, .1);
}

.atalho-card-display i {
    font-size: 2.5rem;
    margin-bottom: 0.75rem;
    justify-content: center;               
    align-items: center;        
    width: 100%; 
}
.atalho-card-display h5 {
    font-size: 0.9rem;
    margin-bottom: 0;
    font-weight: 500;
}

/* Estilos para o botão de adicionar (+) */
#btnAbrirModalSalvar {
    background-color: #86858523;
    border-color: #141414;
    color: #000000 !important;
    border-radius: 50px !important;
    padding: 12px 15px !important;
    line-height: 1;
    box-shadow: none !important;
}
#btnAbrirModalSalvar i {
    background-color: transparent !important;
}
#btnAbrirModalSalvar:hover {
    background-color: #cecbcbbb;
}

/* Estilos para a modal de seleção */
#modalAddPersonalizacao .modal-title {
    color: #333;
    font-weight: bold;
}
#select-class {
    cursor: pointer;
    padding: 10px;
    border: 1px solid #eee; 
    border-radius: 5px;
    width: 100%;
    display: block;
    transition: background-color 0.2s, color 0.2s, transform 0.2s, box-shadow 0.2s;
}
#select-class:hover {
    background-color: #f0f0f0;
    transform: translateY(-2px);
    box-shadow: 0 0.3rem 0.7rem rgba(0, 0, 0, 0.1);
    cursor: pointer;
}
#modalAddPersonalizacao .modal-body label i {
    display: block;
    margin-bottom: 10px;
    font-size: 2.5em;
}
#modalAddPersonalizacao .modal-body h5 {
    font-size: 0.9em;
    margin-bottom: 0;
}
#modalAddPersonalizacao .menu-checkbox {
    display: none;
}

#modalAddPersonalizacao .modal-body .col-lg-4 {
    margin-bottom: 15px;
    padding: 0; 
}
#modalAddPersonalizacao .modal-body .col-lg-4.sub-item-col {
    padding-left: 1px;
}
#modalAddPersonalizacao .modal-body .item-principal-label {
    font-weight: bold;
    font-size: 1.3em;
    color: #f04444;
    display: absolute;  
}
#modalAddPersonalizacao .modal-body .item-principal-label i {
    font-size: 1em;
    margin-bottom: 0;
    display: inline-block;
    margin-right: 8px;
}

/* Estilo para o checkbox marcado */
#modalAddPersonalizacao input[type="checkbox"]:checked + label {
    background-color: #eff2f5;
    border: 1px solid #788491;
}
#modalAddPersonalizacao input[type="checkbox"]:checked + label i,
#modalAddPersonalizacao input[type="checkbox"]:checked + label h5 {
    color: #151616;
}

.text-alert{
    color:#000;
}

.sub-itens-group {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.8s ease, opacity 0.8s ease;
}

.sub-itens-group.aberto {
  max-height: 1000px; /* valor alto o suficiente para caber o conteúdo */
  opacity: 1;
}

.modal-dialog {
  overflow-y: auto;
}

.modal-open {
  padding-right: 0 !important; /* impede que o Bootstrap adicione padding pra compensar scrollbar */
}
 
/*==============================================
                RELATÓRIOS MENSAIS
    =============================================*/

/*Estilos para checkbox*/
.checkbox-hidden {
    display: none;
}

.checkbox-label {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    margin: 10px;
    cursor: pointer;
    font-size: 14px;
    color: gray;
    transition: color 0.2s;
}

.checkbox-label i {
    font-size: 24px;
    margin-bottom: 5px;
}

input[type="checkbox"]:checked+.checkbox-label {
    color: #DB3545;
}

/*Estilos para o icones e titulos*/

.title-icon i {
    margin-right: 12px;
}

/*================================================== 
    Estilos para checkbox no modal de permições 
    =================================================*/
.checkbox-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.checkbox-buttons input[type="checkbox"] {
    display: none;
}

.checkbox-buttons label {
    padding: 0.5rem 1rem;
    border: 1px solid #9f9fa0;
    border-radius: 0.5rem;
    background-color: #fff;
    color: #797979;
    cursor: pointer;
    user-select: none;
    transition: all 0.2s;
}

.checkbox-buttons input[type="checkbox"]:checked + label {
    background-color: #93949441;
    color: #000000;
    border-color: #020202;
}

/*============================================================================================================================================ 
                                                            Estilos para Assistente 
    =========================================================================================================================================*/

/*==================================================================
    ESTILOS DA NOVA INTERFACE DE Assistente
====================================================================*/

#mensagens-container {
    height: 65vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 20px;
}

#header-chat {
    display: flex;
    align-items: center;
}

.digitando-indicador {
    font-style: italic;
    color: #6c757d;
    padding: 0 20px;
    height: 1rem;
    display: none;
}

#modalAddPersonalizacao .modal-body .col-lg-4 {
    margin-bottom: 15px;
    padding: 0; 
}
#modalAddPersonalizacao .modal-body .col-lg-4.sub-item-col {
    padding-left: 1px;
}
#modalAddPersonalizacao .modal-body .item-principal-label {
    font-weight: bold;
    font-size: 1.3em;
    color: #f04444;
    display: absolute;  
}
#modalAddPersonalizacao .modal-body .item-principal-label i {
    font-size: 1em;
    margin-bottom: 0;
    display: inline-block;
    margin-right: 8px;
}

/* ==================================================================
    MODO CLARO (TEMA PADRÃO)
====================================================================*/

#mensagens-container {
    background-color: #f7f7f7;
}

/* --- Balões de Mensagem (Modo Claro) --- */
.mensagem-chat {
    max-width: 75%;
    padding: 10px 18px;
    border-radius: 18px;
    border-color: #ca6969;
    line-height: 1.45;
    word-wrap: break-word;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.mensagem-recebida {
    background-color: #dfdfdf;
    color: #212529;
    align-self: flex-start;
}

.mensagem-enviada {
    background-color: #df736d;
    color: #ffffff;
    align-self: flex-end;
}

.mensagem-chat small {
    font-size: 0.75rem;
    display: block;
    margin-top: 5px;
    text-align: right;
    opacity: 0.8;
}

.mensagem-enviada small {
    color: rgba(255, 255, 255, 0.8);
}

#especial_Nenhum {
    display: none;
}

label[for="especial_Nenhum"] {
    display: none;
}
/*==================================================================================================================================================================
                                                            ESTILOS DO MODO ESCURO
  ====================================================================================================================================================================*/

/*================================================== 
    Estilo para a estrutura do site no Modo Escuro 
    =================================================*/

body.dark-mode {
    background-color: #212529d7 !important;
}

body.dark-mode .conteudo {
    background: #212529;
    box-shadow: -4px -1px 14px 0 rgb(0 0 0), 0 3px 6px 0 rgb(0 0 0);
}

body.dark-mode ::-webkit-scrollbar {
    width: 10px;
}

body.dark-mode ::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px #717171;
    border-radius: 10px;
}

body.dark-mode ::-webkit-scrollbar-thumb {
    background: #6c757d;
    border-radius: 10px;
}

body.dark-mode ::-webkit-scrollbar-thumb:hover {
    background: #6c757d75;
}

body.dark-mode .menu-gpqr {
    color: #ffffff;
    background: #0000002d;
    box-shadow: inset 0px 0px 12px 0px rgba(0, 0, 0);
}

body.dark-mode .menu-gpqr:hover {
    color: #ffffff;
}

body.dark-mode .footer {
    background: #212529;
}

body.dark-mode .footer span {
    color: #ffffff;
}

body.dark-mode .table-gpqr {
    background: #0000;
    border-color: #2b2f32;
}

body.dark-mode .table-gpqr th a {
    color: #fff;
    text-decoration: underline;
}

body.dark-mode .table-gpqr .black th a {
    color: #000;
    text-decoration: underline;
}

body.dark-mode .form {
    background: var(--bs-secondary-text-emphasis);
}

body.dark-mode .ajuda-gpqr {
    gap: 20px;
}

body.dark-mode .ajuda-gpqr li {
    border-radius: 8px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    transition: transform 0.2s;
    background-color: #40454b;
}

body.dark-mode .ajuda-gpqr li:hover,
body.dark-mode .ajuda-gpqr li:active,
body.dark-mode .ajuda-gpqr li:focus {
    cursor: pointer;
    transform: scale(1.04);
    filter: brightness(1.5);
    background-color: #000000;
    color: white;
}

body.dark-mode .ajuda-gpqr li a {
    padding: 8px;
    text-decoration: none;
    color: #ffffff;
    font-family: Poppins, sans-serif;
    background: #00000000;
}

/*======================================================== 
    Estilo para os loading do Modo Escuro 
    ========================================================*/

body.dark-mode .carregando {
    top: 45%;
    left: 50%;
    position: absolute;
    transform: translate(-50%, -50%);
    width: 150px;
    background: #212529;
    height: 10px;
    border-radius: 7px;
    overflow: hidden;
}

body.dark-mode .progresso {
    width: 1px;
    height: 10px;
    border-radius: 7px;
    background: #fff;
    transition: 0.5s;
    animation: loading_44 10s cubic-bezier(0.4, 1.01, 1, 1) infinite;
}

@keyframes loading_44 {
    0% {
        width: 0%;
    }

    50% {
        width: 100%;
    }

    100% {
        width: 0%;
    }
}



/*======================================================== 
    Estilo para os formularios e selects do Modo Escuro 
    ========================================================*/

body.dark-mode .form-select {
    color: #ffffff !important;
    background-color: #000000 !important;
    border-color: #ffffff6b !important;
}

body.dark-mode .form-control {
    color: #ffffff !important;
    background-color: #000000 !important;
    border-color: #ffffff6b !important;
}


body.dark-mode .select2-selection__choice,
body.dark-mode .select2-container--default,
body.dark-mode .select2-selection--multiple {
    background: black !important;
}

body.dark-mode .select2-results__options {
    color: #fff;
    background: #000;
}

body.dark-mode .select2-container--default .select2-results__option[aria-selected=true] {
    background-color: #dddddd88 !important;
}

body.dark-mode .select2-results__option--highlighted[aria-selected] {
    background-color: #ddddddb9 !important;
}

body.dark-mode ::placeholder {
    color: #999 !important;
}

body.dark-mode .modal-content {
    color: white !important;
    background-color: #212529 !important;
}

body.dark-mode input[type="date"]::-webkit-calendar-picker-indicator,
body.dark-mode input[type="time"]::-webkit-calendar-picker-indicator {
    filter: invert(1);
}

body.dark-mode .form-control:disabled {
    background-color: #212529 !important;
    opacity: 1;
}

body.dark-mode .disabled-input {
    background-color: #212529 !important;
    color: #777 !important;
    cursor: not-allowed;
}

body.dark-mode .border {
    border: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
}

/*==========================================
    Estilo para os Botões no Modo Escuro 
    ==========================================*/

body.dark-mode .custom-btn {
    width: fit-content;
    color: #fff;
    border-radius: 5px;
    padding: 10px 25px;
    background: #5f5f5f78;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    display: inline-block;
    box-shadow: inset 2px 2px 2px 0px rgba(255, 255, 255, 0.5),
        7px 7px 20px 0px rgba(0, 0, 0, 0.1), 4px 4px 5px 0px rgba(0, 0, 0, 0.1);
    outline: none;
    text-decoration: none;
    box-shadow: inset 0px 0px 2px 0px rgb(0, 0, 0);
    font-weight: 500;
}

body.dark-mode .btn-gpqr-view {
    border: none;
    color: #fff;
}

body.dark-mode .btn-gpqr-view:active {
    top: 2px;
    color: #000;
}

body.dark-mode .btn-voltar:hover {
    color: #7e7e7e;
}

body.dark-mode .btn-editar {
    border: 2px solid #ffc107;
    color: white;
}

body.dark-mode .btn-excluir {
    border: 2px solid #dc3545;
    color: white;
}

body.dark-mode .btn-pdf {
    border: 2px solid #5bc0de;
    font-weight: 500;
    color: #fff;
}

body.dark-mode .btn-pdf:hover {
    background-color: #5bc0de;
    transition: 0.3s;
    color: #000;
}

body.dark-mode .btn-detalhes {
    border: 2px solid #6c757d;
    font-weight: 500;
    color: #fff;
}

body.dark-mode .btn-detalhes:hover {
    background-color: #6c757d;
    transition: 0.3s;
    color: #fff;
}

body.dark-mode .btn-ativar {
    border: 2px solid #5cb85c;
    font-weight: 500;
    color: #fff;
}

body.dark-mode .btn-ativar:hover {
    background-color: #5cb85c;
    transition: 0.3s;
    color: #000;
}

body.dark-mode .btn-editar:hover {
    color: #000;
}

body.dark-mode .btn-excluir:hover {
    color: #fff;
}

body.dark-mode .btn-confirmar {
    border: 2px solid #0d6dfd;
    font-weight: 500;
    color: #fff;
}

body.dark-mode .btn-dispensar {
    border: 2px solid #dc3545;
    font-weight: 500;
    color: #fff;
}

body.dark-mode .btn-confirmar:hover {
    background-color: #0d6dfd;
    transition: 0.3s;
    color: #fff;
}

body.dark-mode .btn-dispensar:hover {
    background-color: #dc3545;
    transition: 0.3s;
    color: #fff;
}

body.dark-mode .btn-ver {
    border: 2px solid #6c757d;
    font-weight: 500;
    color: white
}

body.dark-mode .btn-ver:hover {
    background-color: #6c757d;
    transition: 0.3s;
    color: #fff;
}

body.dark-mode .btn-lancar {
    margin-left: 10px;
    background-color: #363738;
}

body.dark-mode .btn-lancar:hover {
    margin-left: 10px;
    background-color: rgba(0, 0, 0, 0.418);
}

body.dark-mode .btn-excluirv {
    margin-left: 10px;
    background-color: #DB3545;
}

body.dark-mode .btn-excluirv:hover {
    margin-left: 10px;
    background-color: rgba(134, 77, 83, 53);
}


body.dark-mode .btn-outline-secondary {
    color: #fff;
    border: 2px solid #6c757d;
    font-weight: 500;
}

body.dark-mode .btn-outline-secondary:hover {
    color: #fff;
    border: 2px solid #6c757d;
    transition: 0.3s;
    font-weight: 500;
}

body.dark-mode .btn-outline-success {
    color: #fff;
    border: 2px solid #198754;
    font-weight: 500;
}

body.dark-mode .btn-liberacao {
    --bs-btn-color: var(--bs-orange) !important;
    --bs-btn-border-color: var(--bs-orange) !important;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--bs-orange) !important;
    --bs-btn-bg: none;
}

/*==========================================
    Estilo para as Navbars no Modo Escuro 
    ==========================================*/

body.dark-mode .navbar-gpqr {
    background: #232526;
    height: 70px;
    gap: 1rem;
}

body.dark-mode .navbar-ul-gpqr {
    gap: 10px;
}

body.dark-mode .navbar-ul-gpqr li a {
    color: #ddd;
    display: flex;
    align-items: center;
    gap: 8px;
}

body.dark-mode .navbar-ul-gpqr li a:hover,
body.dark-mode .navbar-ul-gpqr li a:active,
body.dark-mode .navbar-ul-gpqr li a:focus {
    color: #fff;
    border-bottom: 1px solid white;
}


body.dark-mode .navbar-es-gpqr {
    color: #ffffff !important;
    font-weight: 300;
}

body.dark-mode .navbar-es-gpqr:hover {
    color: #ffffff !important;
}

body.dark-mode .navbar-es-gpqr.active {
    background-color: #6C757D !important;
    color: #ffffff !important;
}


/*===========================================
    Estilo para as Tabelas no Modo Escuro 
    ===========================================*/

body.dark-mode .tabela-dark {
    --bs-table-color: #fff;
    --bs-table-bg: #212529;
    --bs-table-border-color: #373b3e;
    --bs-table-striped-bg: #2c3034;
    --bs-table-striped-color: #fff;
    --bs-table-active-bg: #373b3e;
    --bs-table-active-color: #fff;
    --bs-table-hover-bg: #323539;
    --bs-table-hover-color: #fff;
    color: var(--bs-table-color);
    border-color: var(--bs-table-border-color);
}

body.dark-mode .table-aguarde {
    --bs-table-color: #000;
    --bs-table-bg: #6c757d;
    --bs-table-striped-color: #000;
    --bs-table-striped-bg: #8b99a5;
}

body.dark-mode .table-primary {
    --bs-table-color: #fff;
    --bs-table-bg: #242529;
    --bs-table-striped-bg: #2c3034;
    --bs-table-striped-color: #fff;
}

body.dark-mode .table-secondary {
    --bs-table-color: #fff;
    --bs-table-bg: #242529;
    --bs-table-striped-bg: #2c3034;
    --bs-table-striped-color: #fff;
}

body.dark-mode .table-success {
    --bs-table-color: #fff;
    --bs-table-bg: #242529;
    --bs-table-striped-bg: #2c3034;
    --bs-table-striped-color: #fff;
}

body.dark-mode .table-danger {
    --bs-table-color: #fff;
    --bs-table-bg: #242529;
    --bs-table-striped-bg: #2c3034;
    --bs-table-striped-color: #fff;
}

body.dark-mode .table-warning {
    --bs-table-color: #fff;
    --bs-table-bg: #242529;
    --bs-table-striped-bg: #2c3034;
    --bs-table-striped-color: #fff;
}

body.dark-mode .table-info {
    --bs-table-color: #fff;
    --bs-table-bg: #242529;
    --bs-table-striped-bg: #2c3034;
    --bs-table-striped-color: #fff;
}

body.dark-mode .table-indigo {
    --bs-table-color: #fff;
    --bs-table-bg: #242529;
    --bs-table-striped-bg: #2c3034;
    --bs-table-striped-color: #fff;
}

body.dark-mode .table-pink {
    --bs-table-color: #fff;
    --bs-table-bg: #242529;
    --bs-table-striped-bg: #2c3034;
    --bs-table-striped-color: #fff;
}

body.dark-mode .table-orange {
    --bs-table-color: #fff;
    --bs-table-bg: #242529;
    --bs-table-striped-bg: #2c3034;
    --bs-table-striped-color: #fff;
}

body.dark-mode .borda-aguarde {
    border: 2px solid #adb5bd;
}

body.dark-mode .borda-aguarde-confirma {
    border-left: 2px solid #adb5bd;
    border-right: 2px solid#adb5bd;
}

body.dark-mode .borda-primary {
    border: 2px solid #07377c;
}

body.dark-mode .borda-primary-confirma {
    border-left: 2px solid #07377c;
    border-right: 2px solid#07377c;
}

body.dark-mode .borda-secondary {
    border: 2px solid #4d5359;
}

body.dark-mode .borda-secondary-confirma {
    border-left: 2px solid #4d5359;
    border-right: 2px solid#4d5359;
}

body.dark-mode .borda-success {
    border: 2px solid #004e00;
}

body.dark-mode .borda-success-confirma {
    border-left: 2px solid #004e00;
    border-right: 2px solid#004e00;
}

body.dark-mode .borda-danger {
    border: 2px solid #6c2e34;
}

body.dark-mode .borda-danger-confirma {
    border-left: 2px solid #6c2e34;
    border-right: 2px solid#6c2e34;
}

body.dark-mode .borda-warning {
    border: 2px solid #6c5102;
}

body.dark-mode .borda-warning-confirma {
    border-left: 2px solid #6c5102;
    border-right: 2px solid#6c5102;
}

body.dark-mode .borda-info {
    border: 2px solid #004b5a;
}

body.dark-mode .borda-info-confirma {
    border-left: 2px solid #004b5a;
    border-right: 2px solid#004b5a;
}

body.dark-mode .borda-indigo {
    border: 2px solid #493070;
}

body.dark-mode .borda-indigo-confirma {
    border-left: 2px solid #493070;
    border-right: 2px solid#493070;
}

body.dark-mode .borda-pink {
    border: 2px solid #FF80D9;
}

body.dark-mode .borda-pink-confirma {
    border-left: 2px solid #FF80D9;
    border-right: 2px solid#FF80D9;
}


body.dark-mode .borda-orange {
    border: 2px solid #6e3200;
}

body.dark-mode .borda-orange-confirma {
    border-left: 2px solid #6e3200;
    border-right: 2px solid #6e3200;
}

body.dark-mode .borda-botton {
    border-bottom: 1px solid black;
}

body.dark-mode .table-success-subtle {
    --bs-table-color: #000;
    --bs-table-bg: rgb(0 96 52);
    --bs-table-striped-bg: rgb(0 102 55);
    --bs-table-striped-color: #000;
}

body.dark-mode .table-primary-subtle {
    --bs-table-color: #000;
    --bs-table-bg: rgb(24, 90, 189);
    --bs-table-striped-bg: rgb(27, 102, 214);
    --bs-table-striped-color: #000;
}

body.dark-mode .table-info-subtle {
    --bs-table-color: #000;
    --bs-table-bg: rgb(0 124 149);
    --bs-table-striped-bg: rgb(0 132 159);
    --bs-table-striped-color: #000;
}

body.dark-mode .table-warning-subtle {
    --bs-table-color: #000;
    --bs-table-bg: #9f7700;
    --bs-table-striped-bg: #a97e00;
    --bs-table-striped-color: #000;
}

body.dark-mode .table-secondary-subtle {
    --bs-table-color: #000;
    --bs-table-bg: rgb(108, 117, 125);
    --bs-table-striped-bg: rgb(130, 139, 146);
    --bs-table-striped-color: #000;
}

body.dark-mode .table-danger-subtle {
    --bs-table-color: #000;
    --bs-table-bg: rgb(141 46 55);
    --bs-table-striped-bg: rgb(153 51 61);
    --bs-table-striped-color: #000;
}

/*============================================================
    Estilo para Títulos e Textos específicos no Modo Escuro 
    ============================================================*/

body.dark-mode .text-gpqr {
    font-weight: 900;
    color: rgb(255, 98, 98);
}

body.dark-mode tr {
    color: white;
}

body.dark-mode .p {
    color: white !important;
    background-color: white !important;
}

body.dark-mode .w {
    color: white;
}

body.dark-mode .texto-light {
    --bs-text-opacity: 1;
    color: rgba(var(--bs-light-rgb), var(--bs-text-opacity));
}

/*========================================
    Estilo para os alertas no Modo Escuro 
    ========================================*/

body.dark-mode .message.success {
    background: #1e5231;
    color: #ffffff;
    border-color: #56b17c;
}

body.dark-mode .message.error {
    background-color: rgb(85, 16, 16);
    color: white;
    border-color: rgb(185, 36, 36);
}

body.dark-mode .message.warning {
    background: #383400;
    color: #fff;
    border-color: #d3b800;
}

/*==================================
    Outros estilos do Modo Escuro 
    ==================================*/

body.dark-mode .pagina {
    color: white;
}

body.dark-mode .correios-fundo {
    background: #343a40;
}

body.dark-mode .cake-error {
    color: white;
    background: #0c0c0c;
}

/*========================================
    Estilo para o botão do Modo Escuro 
    ========================================*/


.troca {
    font-size: 13px;
    position: relative;
    display: inline-block;
    width: 3.5em;
    height: 2em;
}

.troca input {
    opacity: 0;
    width: 0;
    height: 0;
}

.botao {
    --background: #212529;
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--background);
    transition: .5s;
    border-radius: 30px;
}

.botao:before {
    position: absolute;
    content: "";
    height: 1.4em;
    width: 1.4em;
    border-radius: 50%;
    left: 10%;
    bottom: 15%;
    box-shadow: inset 8px -4px 0px 0px #ffffff;
    background: var(--background);
    transition: .5s;
}

input:checked+.botao {
    background-color: #fff;
}

input:checked+.botao:before {
    transform: translateX(100%);
    box-shadow: inset 15px -4px 0px 15px #232526;
}

/*========================================
    Estilo para o modal do Modo Escuro 
    ========================================*/

body.dark-mode #modalAddPersonalizacao .modal-body {
    background-color: #1c1c1c; 
    color: #f1f1f1; 
}
body.dark-mode #select-class:hover {
    background-color: #333; 
}
body.dark-mode #modalAddPersonalizacao .modal-body .col-lg-4 {
    border-color: #444;
}


body.dark-mode .select2-selection__choice,
body.dark-mode .select2-container--default,
body.dark-mode .select2-selection--multiple {
    background: black !important;
}

body.dark-mode .select2-results__options {
    color: #fff;
    background: #000;
}

body.dark-mode .select2-container--default .select2-results__option[aria-selected=true] {
    background-color: #dddddd88 !important;
}

body.dark-mode .select2-results__option--highlighted[aria-selected] {
    background-color: #ddddddb9 !important;
}

.dark-mode .atalho-card-display {
    border: 1px solid #dddddd4f;
    color: #fff;
    background-color: #212529; 
    transition: background-color 0.3s, color 0.3s;
}

.atalho-card-display:hover {
    transform: translateY(-5px);
    box-shadow: 0 0.5rem 1rem rgba(117, 117, 117, 0.308);
}

.dark-mode #modalAddPersonalizacaoLabel {
    color: #fff;
}

.dark-mode #modalAddPersonalizacao input[type="checkbox"]:checked + label {
    background-color: #32353a; /* cor mais escura */
    border: 1px solid #a1a1a1; /* um cinza escuro */
    
}

.dark-mode #modalAddPersonalizacao input[type="checkbox"]:checked + label i,
.dark-mode #modalAddPersonalizacao input[type="checkbox"]:checked + label h5 {
    color: #ccc; /* ou #fff, conforme o contraste desejado */
}

body.dark-mode .btn-close {
  filter: invert(1);
}

.dark-mode #btnAbrirModalSalvar{
    background-color: #cecbcb2c;
    border-color: #fff;
    color: #fff !important;
    border-radius: 50px !important;
    padding: 12px 15px !important;
    line-height: 1;
    box-shadow: none !important;
}
.dark-mode #btnAbrirModalSalvar:hover{
    background-color: #cecbcb18;
    border-color: #ffffff93;
    color: #ffffffad !important;
}

.dark-mode .text-alert{
    color:#fff;
}

/*==================================================================
    MODO ESCURO PARA A INTERFACE DE Assistente
====================================================================*/

body.dark-mode .card {
    background-color: #2a2a2a;
    color: #f1f1f1;
    border: 1px solid #3a3a3a;
}

body.dark-mode #lista-contatos {
    border-right: 1px solid #3a3a3a; 
}

body.dark-mode #mensagens-container {
    background-color: #1e1e1e; 
}

body.dark-mode #lista-contatos .list-group-item {
    background-color: transparent;
    color: #f1f1f1;
    border-color: #3a3a3a;
}

body.dark-mode #lista-contatos .list-group-item:hover {
    background-color: #333333;
}

body.dark-mode #lista-contatos .list-group-item.active {
    background-color: #6d3734;
    border-color: #9b2a2a;
    color: white;
}

body.dark-mode .mensagem-chat {
    box-shadow: none; 
}

body.dark-mode .mensagem-recebida {
    background-color: #383838; 
    color: #f1f1f1;
}

body.dark-mode .mensagem-enviada {
    background-color: #7a3636;
    color: #ffffff;
}

body.dark-mode .mensagem-chat small {
    color: rgba(255, 255, 255, 0.6);
}

body.dark-mode .digitando-indicador {
    color: #a0a0a0;
}

body.dark-mode .card-footer {
    background-color: #2a2a2a !important;
    border-top: 1px solid #3a3a3a;
}
/*================================================== 
    Estilos modo escuro para checkbox no modal de permições 
    =================================================*/

body.dark-mode #caixa-de-texto {
    background-color: #383838;
    color: #f1f1f1;
    border: 1px solid transparent;
}

body.dark-mode #caixa-de-texto:focus {
    border-color: #b22222;
}

#table-escala{
    table-layout: fixed;
    width: 100%;
    text-align: center;
}