@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes popIn {
  0% {
    opacity: 0;
    transform: scale(0.98);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes popInSk {
  0%,
  100% {
    opacity: 0;
    transform: scale(0.95);
  }
  50% {
    opacity: 1;
    transform: scale(1);
  }
  75% {
    opacity: 0.5;
    transform: scale(1);
  }
}

@keyframes shrinkIn {
  0% {
    opacity: 0;
    transform: scale(1.05);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes slideUp {
  0% {
    opacity: 0;
    transform: translateY(10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideDown {
  0% {
    opacity: 0;
    transform: translateY(-20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideLeft {
  0% {
    opacity: 0;
    transform: translateX(10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.animFadeIn,
.animPopIn,
.animPopInSk,
.animShrinkIn,
.animSlideUp,
.animSlideLeft {
  animation-duration: var(--animation-duration, 0s);
  animation-timing-function: var(--animation-easing, ease);
  animation-delay: var(--animation-delay, 0s);
  animation-iteration-count: var(--animation-iteration-count, 1);
  animation-fill-mode: var(--animation-fill-mode, none);
}

.animFadeIn {
  animation-name: fadeIn;
}

.animPopIn {
  animation-name: popIn;
}

.animPopInSk {
  animation-name: popInSk;
}

.animShrinkIn {
  animation-name: shrinkIn;
}

.animSlideUp {
  animation-name: slideUp;
}

.animSlideLeft {
  animation-name: slideLeft;
}