@keyframes kdSlideDownIn {
  0% {
    transform: scaleY(0.8);
    transform-origin: 50% 0%;
    opacity: 0;
  }
  100% {
    transform: scaleY(1);
    transform-origin: 50% 0%;
    opacity: 1;
  }
}

@keyframes kdSlideDownOut {
  0% {
    transform: scaleY(1);
    transform-origin: 50% 0%;
    opacity: 1;
  }
  100% {
    transform: scaleY(0.9);
    transform-origin: 50% 0%;
    opacity: 0;
  }
}

@keyframes kdSlideUpIn {
  0% {
    transform-origin: 50% 100%;
    opacity: 0;
  }
  5% {
    transform: scaleY(0.8);
  }
  100% {
    transform: scaleY(1);
    transform-origin: 50% 100%;
    opacity: 1;
  }
}

@keyframes kdSlideUpOut {
  0% {
    transform: scaleY(1);
    transform-origin: 50% 100%;
    opacity: 1;
  }
  100% {
    transform: scaleY(0.9);
    transform-origin: 50% 100%;
    opacity: 0;
  }
}