.loader-white {
  border: 4px solid rgba(255, 255, 255, 0.3);
  border-top: 4px solid #fff;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}


.blink {
  animation: blink-animation 1s steps(5, start) infinite;
}

@keyframes blink-animation {
  50% {
    opacity: 0;
  }
}

.metric-zero {
  background-color: #ff0000;
  /* Vermelho */
  border: 2px solid #ff4d4d;
  /* Borda vermelha */
  color: white;
  /* Texto branco */
}



a[title="Configurações"] .feather-settings,
a[title="Configurações"] .lucide-settings,
a[title="Configurações"] svg {
  transition: transform 0.8s cubic-bezier(.4, 0, .2, 1);
}

a[title="Configurações"]:hover .feather-settings,
a[title="Configurações"]:hover .lucide-settings,
a[title="Configurações"]:hover svg {
  transform: rotate(30deg);
}

a[title="Configurações"]:not(:hover) .feather-settings,
a[title="Configurações"]:not(:hover) .lucide-settings,
a[title="Configurações"]:not(:hover) svg {
  transform: rotate(-30deg);
}