:root {

  --color-preto: #2C2D31;
  --color-cinza-menu: #383E41;
  --color-verde: #0D9F85;
  --color-tabela: #EEEEEE;
  --color-line: #D2D2D2;
  --color-white: #fff;
  --color-preto-full: #000000;
  --color-grey: #4B4B4B;
  --color-grey-busca: #D9D9D9;
  --color-grey-texto: #686868;
}

@font-face {
  font-family: "PoppinsMedium";
  src: url('../fonts/Poppins-Medium.otf');
}

@font-face {
  font-family: "PoppinsRegular";
  src: url('../fonts/Poppins-Regular.otf');
}

.navbar-bg {
  background-color: #011010;
}



.hamburger,
.hamburger:after,
.hamburger:before {
  background: #ffffff !important;

}

.column-title {
  user-drag: none;
  user-select: none;
  pointer-events: none;
}

.img-menu {
  height: auto;
  width: 25px;
}

.nav-link.active {
  background-color: #141414 !important;
}


.img-home {
  width: 483px;
  height: auto;
  border-radius: 20px;
}

@media screen and (max-width: 1310px) {
  .img-home {
    width: 100%;
  }
}

@media screen and (max-width: 768px) {
  .img-home {
    width: 100%;
  }
}



.text-dark {
  color: #ffffff !important;
}

.btn-new-lead,
.btn-new-lead:active {
  background-color: #40BAAB;
  color: #ffffff;
  padding: 9px 35px;
  border: none;
}

.btn-new-lead:hover {
  background-color: #c1bb09;
  border: none;
}

.error-message {
  color: red;
  margin-top: 10px;
}

.table-container {
  overflow-x: auto;
  white-space: nowrap;

}

.pagination {
  padding-top: 20px;
}

.custom-menu li {
  display: inline-block;
  text-align: left;
  margin-left: 20px;
  /* Adicione margem direita para espaçamento entre os itens do menu */
}

.separador-menu {
  border-bottom: 1px solid #606060;
}

.menu-arrow {
  float: right;
  margin-top: 6px;
  /* Ajuste a margem superior conforme necessário para alinhar a seta verticalmente com o texto */
}

.nav-item {
  height: 50px;
}

/* Estilo padrão para os links */
.custom-menu .nav-link {
  position: relative;
  padding-left: 10px;
  /* Espaçamento à esquerda para o ícone */
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Estilo para o ícone */
.custom-menu .nav-link i {
  margin-right: 10px;
  /* Espaçamento à direita para o ícone */
  transition: transform 0.3s ease;
  /* Adiciona a transição para a animação do ícone */
}

/* Efeito de hover */
.custom-menu .nav-link:hover {
  background-color: #3a3a3a;
  /* Cor de fundo no hover */
  color: #fff;
  /* Cor do texto no hover */
  padding-left: 20px;
  /* Aumentar o espaço à esquerda para o ícone no hover */
}

/* Animação do ícone no hover */
.custom-menu .nav-link:hover i {
  transform: translateX(5px);
  /* Move o ícone para a direita no hover */
}



.board {
  display: flex;
  justify-content: start;
  gap: 10px;
  padding: 10px 0px 0px 0px;
  overflow-y: auto;
}

.column {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0px 20px 0px 20px;
  background-color: var(--color-tabela);
  min-width: 330px;
  border-radius: 20px;
  overflow-x: auto;
  min-height: 75vh;
  max-height: 78vh;
  overflow-y: visible;
  
}
.fixo {
  position: sticky;
  top: 0;
  z-index: 2;
  background-color: var(--color-tabela);
  padding-top: 10px;
}
::-webkit-scrollbar {
  width: 8px; /* Largura da barra de rolagem vertical */
  height: 8px;

}
::-webkit-scrollbar-thumb {
  background-color: #ccc; /* Cor da barra de rolagem */
  border-radius: 3px; /* Borda arredondada da barra de rolagem */
}
::-webkit-scrollbar-thumb:hover {
  background-color: var(--color-preto); /* Cor da barra de rolagem */
  border-radius: 3px; /* Borda arredondada da barra de rolagem */
}
::-webkit-scrollbar-track {
  background-color: var(--color-tabela); /* Cor do fundo da barra de rolagem */
}
.column h3 {
  margin: 0 0 10px;
  padding: 0;
  font-size: 14px;
  text-align: left;
  text-transform: uppercase;
}

.infoColuna {
  font-size: 14px;
  font-family: 'PoppinsMedium';
  display: flex;
  padding-top: 10px;
  text-transform: uppercase;
  justify-content: space-evenly;
}

.infoColuna span {
  color: var(--color-verde);
  font-family: 'PoppinsRegular';
  position: sticky;
  top: 0;
  z-index: 2;
}

.separador {
  border-bottom: 1px solid var(--color-line);
  width: 100%;
}




/* Estilo para cartões */
.kanban-card {
  background-color: white;
  padding: 20px 20px 20px 20px;
  border-radius: 5px;
  cursor: grab;
  z-index: 333;
  /* Adicione um cursor de agarrar para indicar que os cartões são arrastáveis */
}

.kanban-card.dragging {
  opacity: 0.6;
  /* Estilo para quando o cartão está sendo arrastado */
}

.kanban-card .kanban-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  user-select: none;
  margin-bottom: 10px;
}

.kanban-card .kanban-card-title {
  font-size: 16px;
  font-weight: bold;
  user-select: none;
}

.kanban-card .kanban-card-assignee {
  font-size: 16px;
}

.kanban-card .kanban-card-body p {
  margin: 0;
}

.kanban-card .kanban-card-footer {
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
}
.kanban-card .nomeLead {
  font-family: 'PoppinsMedium';
  font-size: 16px;
  color: var(--color-preto-full);
}

.kanban-card .vendedorLead {
  font-family: 'PoppinsRegular';
  font-size: 13px;
  color: var(--color-grey-texto);

}

.kanban-card .telefoneLead {
  font-family: 'PoppinsRegular';
  font-size: 14px;
  color: var(--color-grey-texto);
  margin-top: 10px;
}

.kanban-card .valorLead {
  font-family: 'PoppinsRegular';
  font-size: 14px;
  color: var(--color-grey-texto);
  margin-top: 6px;
}

/* Estilos do modal */
.modal-confirm {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.4);
}

.modal-new{
  background-color: #fff;
  width: 400px;
  height: 240px;
  margin: 15% auto;
  padding: 20px;
  border: 1px solid #888;
  border-radius: 10px;
}

/* Estilo do botão OK */
.modal-btn-ok {
  background-color: #2d82ff;
  border-radius: 5px;
  color: #fff;
  width: 110px;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
}

/* Estilo do botão Cancelar */
.modal-btn-cancel {
  background-color: transparent;
  color: #333;
  width: 60px;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
}

.titulo-modal {
  text-align: center;
}

.texto-modal {
  text-align: center;
}

.status-novolead {
  font-size: 10px !important;
    background-color: #2d82ff !important;
    padding: 5px !important;
    color: #fff;
    border-radius: 20px;
}

.status-primeirocont {
  font-size: 10px !important;
  background-color: #450159 !important;
  padding: 5px !important;
  color: #fff;
  border-radius: 20px;
}
.status-emcontato {
  font-size: 10px !important;
  background-color: #2079b2 !important;
  padding: 5px !important;
  color: #fff;
  border-radius: 20px;
}
.status-proposta {
  font-size: 10px !important;
  background-color: #ecc71a !important;
  padding: 5px !important;
  color: #fff;
  border-radius: 20px;
}
.status-fechamento {
  font-size: 10px !important;
  background-color: #3b8b2c !important;
  padding: 5px !important;
  color: #fff;
  border-radius: 20px;
}
.status-naoatendeu {
  font-size: 10px !important;
  background-color: #e92524 !important;
  padding: 5px !important;
  color: #fff;
  border-radius: 20px;
}



.campo-data{
  width: 180px;
    margin-left: 5px ;
    margin-right: 13px;
}

.campo-name{
  text-align: center;
  line-height: 2; /* Ajuste esse valor conforme necessário para centralizar verticalmente o texto. */
}

.canvas {
  max-width: 800px; /* Ajuste conforme necessário para responsividade */
  margin: 0 auto;
}

.grafico{
  margin-top: 50px !important;
}

.custom-chart {
  height: 265px !important;
  width: auto !important;
}

.texto-tabela{
  font-size: 14px;
}


span.status-envio {
  font-size: 13px !important;
    background-color: #2d82ff !important;
    padding: 7px 10px !important;
    margin-bottom: 10px;
    color: #fff;
    border-radius: 20px;
}
span.status-instalacao {
  font-size: 13px !important;    
  background-color: #ecc71a !important;
    padding: 7px 10px !important;
    margin-bottom: 10px;
    color: #fff;
    border-radius: 20px;
}
span.status-manutencao {
  font-size: 13px !important;  
  background-color: #c1bb09 !important;
  padding: 7px 10px !important;
  margin-bottom: 10px;

  color: #fff;
  border-radius: 20px;
}
span.status-instalado {
  font-size: 13px !important;  
  background-color: #3b8b2c !important;
  padding: 7px 10px !important;
  margin-bottom: 10px;

  color: #fff;
  border-radius: 20px;
}


/* Página Leads campo busca e botão (2024) */

.filtro {
  display: flex;
  flex-direction: row;
  align-items: start;
  justify-content: start;
}

.filtro .campo-busca {
  padding: 10px;
  margin: 0;
  border: 1px solid #ccc;
  border-radius: 0 4px 4px 0;
  font-size: 16px;
  width: 600px;
  overflow: auto;
  background-color: var(--color-grey-busca);
}

.filtro .busca-icon {
  padding: 15px;
  color: var(--color-white);
  margin: 0;
  background-color: var(--color-grey);
  border-radius: 4px 0 0 4px;
  font-size: 16px;
}

.btn-verde {
  background-color: var(--color-verde);
  border-radius: 5px;
  color: var(--color-white) !important;
  padding: 11px 21px;
  font-family: 'PoppinsMedium';
  font-size: 15px;
  text-transform: uppercase;
}

.btn-outline {
  background-color: transparent;
  border-radius: 5px;
  color: var(--color-verde) !important;
  border: 1px solid var(--color-verde);
  padding: 11px 21px;
  font-family: 'PoppinsMedium';
  font-size: 15px;
  text-transform: uppercase;
}

.main .selectVendedor {
  display: flex;
  margin-left: auto;
  flex-direction: row;
  justify-content: end;
  align-items: center;
}

.selectVendedor label {
  white-space: nowrap;
  margin: 0;

}

.selectVendedor label {
  font-family: 'PoppinsMedium';

}

.selectVendedor select {
  width: 280px;
}



/* Menu 2024 */

.sidebar {
  direction: ltr;
  max-width: 120px !important;
  min-width: 120px !important;
  background: transparent !important;
  z-index: 9999 !important;
}

.sidebar, .sidebar-content{
  background: transparent !important;
}


.menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 120px;
  height: 100vh;
  background-color: #333;
  color: var(--color-preto);
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: start;
  z-index: 99;
}

.menu .seta {
  position: absolute;
  top: 10px;
  left: 100px;
}

.menu .seta a {
  padding: 8px;
  background-color: var(--color-verde);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 20px;
}

.menu .seta img {
  height: 20px;
  margin: 0;
}

.menu .logo img {
  height: 90px;
}

.menu .nav a {
  margin-top: 15px;
  padding: 20px;
  align-items: center;
  border-radius: 10px;
}

.menu .nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}

.menu .nav img {
  width: 25px;
}

.menu-up {
  position: fixed;
  top: 0;
  left: 0;
  width: 325px;
  height: 100vh;
  background-color: #333;
  color: var(--color-preto);
  z-index: 99999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: start;
  
}

.menu-up .seta {
  position: absolute;
  top: 10px;
  left: 308px;
}

.menu-up .seta a {
  padding: 8px;
  background-color: var(--color-verde);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 20px;
}

.menu-up .seta img {
  height: 20px;
  margin: 0;
  transform: rotate(180deg);
}

.menu-up .logo img {
  height: 90px;
}

.menu-up .nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}

.menu-up .nav img {
  width: 25px;
}

.menu-up .nav span {
  color: var(--color-white);
  padding-left: 40px;
  text-transform: uppercase;
  font-family: 'PoppinsRegular', 'Rubik', 'sans-serif';
  text-decoration: none;
}

.menu-up .nav a {
  margin-top: 15px;
  padding: 20px;
  width: 250px;
  align-items: center;
  border-radius: 10px;
}

.nav a:hover {
  background-color: var(--color-cinza-menu);
  text-decoration: none;

}

.active {
  background-color: var(--color-cinza-menu);
}

.hidden {
  display: none !important;
  z-index: 1 !important;
}

.botoesLead{
  z-index: 2;
}


.kanban-card{
  z-index: 1 !important;
}