:root {
    --kt-primary: #e36817 !important;
    --kt-primary-active:#e36817 !important;
    --kt-text-primary: #e36817 !important;
    --kt-highlight-btn-color-hover: #e36817 !important;
    --kt-menu-link-color-hover: #e36817 !important;
    --kt-menu-link-color-show: #e36817 !important;
    --kt-menu-link-color-here: #e36817 !important;
    --kt-menu-link-color-active: #e36817 !important;
    --tagify-dd-color-primary: #e36817 !important;
    --bs-primary: #e36817 !important;
    --bs-link-color: #e36817 !important;
    --bs-link-hover-color: #e36817 !important;
    --kt-component-active-bg: #e36817 !important;
    --kt-component-hover-color:#e36817 !important;
    --kt-component-checked-bg: #e36817 !important;
    --kt-btn-link-color: #e36817 !important;
    --kt-btn-link-hover-color: #e36817 !important;
    --kt-form-check-input-checked-bg-color:  #e36817 !important;
    --kt-form-check-input-checked-border-color: #e36817 !important;
    --kt-form-check-input-indeterminate-bg-color: #e36817 !important;
    --kt-form-check-input-indeterminate-border-color: #e36817 !important;
    --kt-nav-pills-link-active-bg: #e36817 !important;
    --kt-dropdown-link-active-bg: #e36817 !important;
    --kt-pagination-focus-color: #e36817 !important;
    --kt-pagination-hover-color: #e36817 !important;
    --kt-pagination-active-bg: #e36817 !important;
    --kt-accordion-button-active-color: #e36817 !important;
    --kt-accordion-icon-active-color: #e36817 !important;
    --kt-list-group-active-bg: #e36817 !important;
    --kt-list-group-active-border-colorg: #e36817 !important;
    --kt-breadcrumb-active-color: #e36817 !important;
    --kt-scrolltop-bg-color: #e36817 !important;
    --kt-scrolltop-bg-color-hover: #e36817 !important;
    --kt-ribbon-label-bg: #e36817 !important;
    --kt-form-check-input-checked-bg-color-solid: #e36817 !important;
    --kt-danger: #e36817 !important;
}

.link-primary {
    color: #e36817 !important;
}

/* Garante que a barra de busca esteja visível */
#search-container {
    display: block !important;
    width: 100%;
    padding-bottom: 10px;
}

/* Garante que o campo de busca do DataTables tenha um tamanho adequado */
#search-container .dataTables_filter {
    display: flex !important;
    justify-content: flex-end; /* Alinha a busca à direita */
    width: 100%;
}

#search-container .dataTables_filter input {
    width: 250px !important; /* Define um tamanho adequado para a barra */
    max-width: 100%;
    padding: 6px 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
}

#loader1 {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    z-index: 9998;
    left: 0%;
    top: 0vh;
    width: 100%;
    height: 100vh;
    opacity: 1;
    background: rgba(255, 255, 255, 0.8);
    transition: opacity 3s ease-out, top 1s ease-out !important;

}

.swal2-over-loader {
    z-index: 9999 !important;
}

#loader1.hide {
    transition: opacity 3s ease-out, top 1s ease-out !important;
    opacity: 0;
    top: -100vh;
}


.loader {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: inline-block;
    position: relative;
    background: linear-gradient(0deg, #e36817 33%, #dd9d72 100%);
    box-sizing: border-box;
    animation: rotation 1s linear infinite;
}


.loader::after {
    content: '';
    box-sizing: border-box;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .5);
}

@keyframes rotation {
    0% {
        transform: rotate(0deg)
    }

    100% {
        transform: rotate(360deg)
    }
}

.linha-destaque:hover {
	background-color: #fff5e6 !important;
	color: #d35400 !important;
    
}

.linha-destaque:hover td,
.linha-destaque:hover a {
	color: #d35400 !important;
}

.linha-destaque:hover .text-hover-primary {
	color: #d35400 !important;
}


.chat-box {
    background: #ffffff;
    max-width: 400px;
    width: 400px;
    max-height: 80vh; /* Limite vertical em relação à altura da tela */
    margin: 20px auto;
    padding: 15px 0;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    display: flex;
    flex-direction: column;
  }
  
    .msg {
      display: inline-block;
      padding: 6px 12px;
      margin: 4px 0;
      border-radius: 8px;
      max-width: 80%;
      font-size: 14px;
      line-height: 1.4;
      word-wrap: break-word;
      position: relative;
    }
    .msg.recebida {
      background: #f1f0f0;
      align-self: flex-start;
      margin-left: 15px;
    }
    .msg.enviada {
      background: #dcf8c6;
      align-self: flex-end;
      margin-left: auto;
    }
    .hora {
      font-size: 10px;
      color: #555;
      text-align: right;
      margin-top: 3px;
    }
    .dia {
      text-align: center;
      font-size: 12px;
      color: #888;
      margin: 15px 0 10px;
    }
    .conversa {
      display: flex;
      flex-direction: column;
      gap: 6px;
      overflow-y: auto;
      padding-right: 5px;
      max-height: 100%;
      flex-grow: 1;
      scroll-behavior: smooth;
  }
  
  .conversa::-webkit-scrollbar {
    width: 6px;
  }
  .conversa::-webkit-scrollbar-thumb {
    background-color: rgba(0,0,0,0.2);
    border-radius: 5px;
  }
  
  
  
    .msg a {
      color: #0d6efd;
      text-decoration: underline;
  }
  
  [data-theme="dark"] .chat-box {
    background-color: #1e1e2d;
    border: 1px solid #2e2e3e;
  }
  
  [data-theme="dark"] .conversa {
    scrollbar-color: #444 #1e1e2d;
    scrollbar-width: thin;
  }
  
  [data-theme="dark"] .msg.recebida {
    background-color: #2e2e3e;
    color: #e0e0e0;
  }
  
  [data-theme="dark"] .msg.enviada {
    background-color: #3c503f;
    color: #e0e0e0;
  }
  
  [data-theme="dark"] .dia {
    color: #bbb;
  }
  
  [data-theme="dark"] .hora {
    color: #aaa;
  }
  
  [data-theme="dark"] .msg a {
    color: #91cfff;
    text-decoration: underline;
  }
  
  [data-theme="dark"] .msg {
    border: 1px solid #333;
  }
  
  [data-theme="dark"] .conversa::-webkit-scrollbar {
    width: 6px;
  }
  [data-theme="dark"] .conversa::-webkit-scrollbar-thumb {
    background: #444;
    border-radius: 3px;
  }
  [data-theme="dark"] .conversa::-webkit-scrollbar-track {
    background: #1e1e2d;
  }
  
  /* Modo claro */
  .lead-nome {
    font-weight: bold;
    font-size: 16px;
    color: #000;
  }
  
  .lead-numero {
    font-size: 12px;
    color: #888;
  }
  
  /* Modo escuro */
  [data-theme="dark"] .lead-nome {
    color: #f5f5f5;
  }
  
  [data-theme="dark"] .lead-numero {
    color: #bbb;
  }
  
  .btn-voltar {
    font-size: 24px;
    color: #000;
    text-decoration: none;
    margin-right: 5px;
  }
  
  [data-theme="dark"] .btn-voltar {
    color: #fff;
  }
  
  
  .linha-divisoria {
    width: 100%;
    height: 1px;
    background: linear-gradient(to right, #ddd, #bbb, #ddd);
  }
  
  [data-theme="dark"] .linha-divisoria {
    background: linear-gradient(to right, #333, #555, #333);
  }
  
  .composer {
    display: flex;
    align-items: center;
    padding: 8px;
    border-top: 1px solid #ddd;
  }
  .icon-btn {
    background: none;
    border: none;
    font-size: 20px;
    margin: 0 4px;
    position: relative;
    cursor: pointer;
  }
  .input-msg {
    flex: 1;
    padding: 6px 10px;
    border-radius: 20px;
    border: 1px solid #ccc;
    margin: 0 4px;
    outline: none;
  }
  emoji-picker {
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    border-radius: 8px;
    z-index: 1000;
    background: #fff;
  }
  


  
  .card-bordered {
    border: 1px solid #E4E6EF !important;
    border-radius: 0.65rem !important;
}

.symbol-40px img {
    object-fit: cover;
}

#clientesChart {
    min-height: 300px;
}

/* Estilo para os botões de período (Semana, Mês, Ano) */
.btn-outline-primary.active,
.btn-outline-primary:active,
.show > .btn-outline-primary.dropdown-toggle {
    background-color: #d35400 !important;
    color: #ffffff !important;
    border-color: #d35400 !important;
}

.btn-outline-primary:hover {
    background-color: #d35400 !important;
    color: #ffffff !important;
    border-color: #d35400 !important;
}
  