@keyframes underline {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}
@keyframes opacity {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes stretch {
  0% {
    height: 0;
  }
  100% {
    height: 80px;
  }
}
@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translate(-50%, -100%);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}
@keyframes bounce {
  0% {
    transform: translateZ(0);
  }
  to {
    transform: translate3d(0, -15px, 0);
  }
}
@keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeout {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes spin {
  100% {
    transform: rotate(-360deg);
  }
}

@keyframes opendrawer {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}
@keyframes closedrawer {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(100%);
  }
}

@keyframes opendrawerRTL {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}
@keyframes closedrawerRTL {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}
@keyframes fadeInOverlay {
  from {
    opacity: 0;
  }
  to {
    opacity: 0.15;
  }
}
@keyframes fadeOutOverlay {
  from {
    opacity: 0.15;
  }
  to {
    opacity: 0;
  }
}

.duration-50 {
  animation-duration: 50ms;
}
.duration-150 {
  animation-duration: 150ms;
}
.duration-300 {
  animation-duration: 300ms;
}
.duration-400 {
  animation-duration: 400ms;
}
.duration-500 {
  animation-duration: 500ms;
}
.duration-700 {
  animation-duration: 700ms;
}
.duration-800 {
  animation-duration: 800ms;
}
.duration-1000 {
  animation-duration: 1000ms;
}
.slide-in {
  animation: slide-right 500ms cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
.slide-out {
  animation: slide-left 300ms cubic-bezier(0.39, 0.575, 0.565, 1) both;
}
.fade-in {
  animation: fade-in 300ms ease-in-out both;
}
.fade-out {
  animation: fade-out 150ms ease-in-out both;
}
.expand-top {
  animation: scale-up-top 700ms ease-in-out both;
}
.collapse-top {
  animation: scale-down-top 400ms cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}