.dots {
  display: inline-block;
  width: 1.2em; /* Espaço fixo para os três pontos */
  text-align: left;
}

.dots::after {
  content: "";
  animation: dots 1.5s steps(4, end) infinite;
}

@keyframes dots {
  0% {
    content: "";
  }
  25% {
    content: ".";
  }
  50% {
    content: "..";
  }
  75% {
    content: "...";
  }
  100% {
    content: "";
  }
}

.larger-switch:checked {
  background-color: #0d6efd; /* Cor do switch quando ativo */
}

/* Para melhorar o visual do toggle quando ativado */
.larger-switch:checked + .form-check-label {
  font-weight: bold; /* Deixa o texto em negrito quando ativo */
}

.timeline-widget {
  scrollbar-width: thin;
  scrollbar-color: #ddd #f1f1f1;
}

.timeline-widget::-webkit-scrollbar {
  width: 8px;
}

.timeline-widget::-webkit-scrollbar-thumb {
  background-color: #bbb;
  border-radius: 4px;
}

.noty_bar {
  color: white;
  border-radius: 8px;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
  padding: 10px 20px;
  font-weight: bold;
  font-size: 16px;
  display: flex;
  align-items: center;
  transition: all 0.3s ease-in-out;
}

.noty_bar .noty_message {
  margin-left: 10px;
}

.noty_bar i {
  font-size: 18px;
}

.noty_bar.fade-in {
  animation: fadeIn 0.3s ease forwards;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Notificação de sucesso */
.noty_type__success,
.noty-success {
  background-color: rgb(25, 135, 84); /* Verde Bootstrap */
  color: white;
}

/* Notificação de alerta (warning) */
.noty_type__warning,
.noty-warning {
  background-color: rgb(255, 193, 7); /* Amarelo Bootstrap */
  color: black;
}

/* Notificação de perigo (danger) */
.noty_type__error,
.noty-error {
  background-color: rgb(220, 53, 69); /* Vermelho Bootstrap */
  color: white;
}

.panel-production-active {
  position: relative; /* Para garantir que a linha se mova dentro do card */
  overflow: hidden; /* Esconde qualquer parte da linha que sair da borda do card */
}

.panel-production-active.animate-line::before {
  content: ""; /* Cria um elemento antes do card */
  position: absolute;
  top: 0;
  left: -100%; /* A linha começa fora do card, à esquerda */
  width: 100%;
  height: 2px; /* Defina a altura da linha */
  background: linear-gradient(
    to right,
    rgba(0, 255, 0, 0),
    green,
    rgba(0, 255, 0, 0)
  ); /* Gradiente de transparência */
  animation: moveLine 2s linear 1; /* A animação acontece uma vez */
}

@keyframes moveLine {
  0% {
    left: -100%; /* Inicia fora do card */
  }
  100% {
    left: 100%; /* Termina fora do card, à direita */
  }
}

.panel-production-stopped {
  position: relative; /* Para garantir que a linha se mova dentro do card */
  overflow: hidden; /* Esconde qualquer parte da linha que sair da borda do card */
}

/* A linha estática no topo do card, com uma animação de cor */
.panel-production-stopped::before {
  content: ""; /* Cria um elemento antes do card */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px; /* Defina a altura da linha */
  background: linear-gradient(
    to right,
    #ff4e50,
    /* Tom de vermelho vibrante */ #ff6b6b,
    /* Vermelho suave */ #ff4e50
  ); /* Gradiente inicial com tons de vermelho */
  animation: colorChange 2s ease-in-out infinite alternate; /* Animação que muda a cor */
}

/* Animação para alterar as cores do gradiente */
@keyframes colorChange {
  0% {
    background: linear-gradient(to right, #ff4e50, #ff6b6b, #ff4e50);
  }
  50% {
    background: linear-gradient(
      to right,
      #ff1e1e,
      #ff5252,
      #ff1e1e
    ); /* Tons mais escuros e saturados de vermelho */
  }
  100% {
    background: linear-gradient(
      to right,
      #ff0000,
      #ff3d3d,
      #ff0000
    ); /* Vermelho puro com um leve tom escuro */
  }
}

/* Estilos para o card quando a produção está encerrada */
.panel-production-closed {
  position: relative;
  overflow: hidden;
}

/* Linha estática no topo do card, com a cor sólida 'secondary' do Bootstrap */
.panel-production-closed::before {
  content: ""; /* Cria um elemento antes do card */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px; /* Define a altura da linha */
  background-color: #6c757d; /* Bootstrap Secondary */
  opacity: 0.9; /* Leve transparência para suavizar a cor */
}

.time {
  font-size: 1rem; /* Tamanho da fonte, pode ajustar conforme necessário */
  font-weight: 600; /* Fonte um pouco mais ousada */
  color: #4a4a4a; /* Cor de texto moderna, um tom de cinza */
  margin-left: 20px; /* Espaço entre o título e o horário */
  background: #f0f0f0; /* Fundo mais suave */
  padding: 5px 10px; /* Padding para aumentar a área clicável e dar espaço ao texto */
  border-radius: 5px; /* Bordas arredondadas para um visual mais clean */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Sombrinha suave para dar profundidade */
  transition: all 0.3s ease; /* Transição suave para animações */
}

/* Efeito de hover */
.time:hover {
  background-color: #4e73df; /* Cor de fundo mais forte ao passar o mouse */
  color: white; /* Muda a cor do texto */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Aumenta a sombra ao passar o mouse */
  cursor: pointer; /* Muda o cursor para uma mãozinha */
}

footer .time {
  font-size: 1rem; /* Tamanho da fonte, pode ajustar conforme necessário */
  font-weight: 600; /* Fonte um pouco mais ousada */
  color: #4a4a4a; /* Cor de texto moderna, um tom de cinza */
  margin-left: 20px; /* Espaço entre o título e o horário */
  background-color: #4e73df; /* Cor de fundo mais forte ao passar o mouse */
  padding: 5px 10px; /* Padding para aumentar a área clicável e dar espaço ao texto */
  border-radius: 5px; /* Bordas arredondadas para um visual mais clean */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Sombrinha suave para dar profundidade */
  transition: all 0.3s ease; /* Transição suave para animações */
}

/* Efeito de hover */
footer > .time:hover {
  background-color: #4e73df; /* Cor de fundo mais forte ao passar o mouse */
  color: white; /* Muda a cor do texto */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Aumenta a sombra ao passar o mouse */
  cursor: pointer; /* Muda o cursor para uma mãozinha */
}

/* Para responsividade */
@media (max-width: 576px) {
  .time {
    font-size: 0.875rem; /* Reduz o tamanho da fonte em telas menores */
    padding: 4px 8px; /* Ajusta o padding */
  }
}

.datatable-header,
.datatable-footer {
  display: flex;
  justify-content: space-between;
}
.paginate_button {
  margin: 0.2rem;
}