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

.sidebar-toggle:hover .hamburger,
.sidebar-toggle:hover .hamburger:after,
.sidebar-toggle:hover .hamburger:before {
  background: #09E4DF !important;
}

.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: #060b57 !important;
}

.logo {
  height: auto;
  width: 220px;
  padding-bottom: 20px;
}

.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%;
}}

.sidebar,
.sidebar-content {
  background: #060b57;
}

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

.btn-new-lead,
.btn-new-lead:active {
  background-color: #40BAAB;
  color: #ffffff;
  padding: 9px 45px;
  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: space-between;
  overflow-x: auto; /* Adiciona uma barra de rolagem horizontal quando necessário */
}

.column {
  flex: 1;
  background-color: #f7f8fa;
  border: 1px solid #ddd;
  border-radius: 5px;
  padding: 10px;
  margin: 10px;
  min-height:600px;
  min-width: 269px;
  max-width: 432px;
  overflow-y: auto; /* Adiciona uma barra de rolagem vertical quando necessário */
  max-height: 400px; /* Define a altura máxima da coluna antes da barra de rolagem aparecer */
}

.column h3 {
  margin: 0 0 10px;
  padding: 0;
  font-size: 14px;
  text-align: left;
  text-transform: uppercase;
}

.card {
  background-color: #ffffff;
  border: 1px solid #ddd;
  border-radius: 5px;
  padding: 10px;
  margin: 5px 0;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);
  cursor: pointer;
}

.card:hover {
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}



/* Estilo para cartões */
.kanban-card {
  border: 1px solid #ddd;
  background-color: #fff;
  margin-bottom: 10px;
  padding: 10px;
  
  cursor: grab; /* 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;
}

/* 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;
}