.animated-gradient{
  background: 
  radial-gradient(circle at 0% 0%, rgba(255, 255, 255, 0.03) 0%, transparent 50%),
  radial-gradient(circle at 100% 0%, rgba(255, 255, 255, 0.03) 0%, transparent 50%),
  radial-gradient(circle at 100% 100%, rgba(255, 255, 255, 0.03) 0%, transparent 50%),
  radial-gradient(circle at 0% 100%, rgba(255, 255, 255, 0.03) 0%, transparent 50%),
  linear-gradient(135deg, #1a1a1a 0%, #2c2c2c 50%, #0a0a0a 100%);
  background-size: 200% 200%;
  animation: gradientAnimation 15s ease-in-out infinite;
}

@keyframes gradientAnimation {
    0% {
      background-position: 0% 50%;
    }

    50% {
      background-position: 100% 50%;
    }

    100% {
      background-position: 0% 50%;
    }
  }

  .progress-bar {
    margin: 0 16px 0 !important;
  }

  .inputs>button,
  select {
    margin: 0 10px;
  }

  canvas {
    display: block;
    margin-bottom: 0.5rem;
    width: 100%;
    height: 60px;
  }

  @keyframes fadeIn {
    from {
      opacity: 0;
    }

    to {
      opacity: 1;
    }
  }

  @keyframes fadeOut {
    from {
      opacity: 1;
    }

    to {
      opacity: 0;
    }
  }

  @keyframes scaleIn {
    from {
      transform: translate(-50%, -50%) scale(0.95);
      opacity: 0;
    }

    to {
      transform: translate(-50%, -50%) scale(1);
      opacity: 1;
    }
  }

  @keyframes scaleOut {
    from {
      transform: translate(-50%, -50%) scale(1);
      opacity: 1;
    }

    to {
      transform: translate(-50%, -50%) scale(0.95);
      opacity: 0;
    }
  }

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

  .fade-out {
    animation: fadeOut 0.3s ease-in;
  }

  .scale-in {
    animation: scaleIn 0.3s ease-out;
  }

  .scale-out {
    animation: scaleOut 0.3s ease-in;
  }