/* stylelint-disable declaration-block-no-duplicate-properties */

.transition-wrapper:not(.kirk-snackbar-container) {
  height: calc(100vh - 56px);
  height: -webkit-fill-available;
  height: stretch;
}

.transition-wrapper--inTransition {
  overflow: hidden;
}

@media (min-width: 800px) {
  .transition-wrapper:not(.kirk-snackbar-container) {
    height: calc(100vh - 72px);
    height: -webkit-fill-available;
    height: stretch;
  }

  .page-wrapper {
    min-height: calc(100vh - 72px);
    min-height: -webkit-fill-available;
    min-height: stretch;
  }
}

/* stylelint-enable */

@keyframes slideInY {
  0% {
    transform: translate3d(0, 100vh, 0);
  }

  100% {
    transform: translate3d(0, 0, 0);
  }
}

@keyframes slideOutY {
  0% {
    transform: translate3d(0, 0, 0);
  }

  100% {
    transform: translate3d(0, 100vh, 0);
  }
}

@keyframes slideFromRightToLeft {
  0% {
    transform: translate3d(0, 0, 0);
  }

  100% {
    transform: translate3d(-100vw, 0, 0);
  }
}

@keyframes slideFromLeftToRight {
  0% {
    transform: translate3d(0, 0, 0);
  }

  100% {
    transform: translate3d(100vw, 0, 0);
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes fadeOut {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

/* disable page transitions, for e2e */

.reduced-motion .default,
.reduced-motion .fade,
.reduced-motion .slideX,
.reduced-motion .slideY {
  animation-duration: .1ms !important; /* stylelint-disable-line declaration-no-important */
  transition-duration: .1ms !important; /* stylelint-disable-line declaration-no-important */
}

/* default cases for no route history */

/* =============================== */

.default-forward-enter-active,
.default-backward-enter-active {
  position: fixed;
  top: 56px;
  left: 0;
  right: 0;
  z-index: 2;
  background-color: white;
}

@media (min-width: 800px) {
  .default-forward-enter-active,
  .default-backward-enter-active {
    top: 72px;
  }
}

.default-forward-enter-active {
  animation: fadeIn 350ms ease-in-out forwards;
}

.default-forward-exit-active {
  animation: fadeOut 350ms ease-in-out forwards;
}

.default-backward-enter-active {
  animation: fadeIn 350ms ease-in-out forwards;
}

.default-backward-exit-active {
  animation: fadeOut 350ms ease-in-out forwards;
}

/* fadeIn */

/* =============================== */

.fade-forward-enter-active,
.fade-backward-enter-active {
  position: fixed;
  top: 56px;
  left: 0;
  right: 0;
  z-index: 2;
  background-color: white;
}

@media (min-width: 800px) {
  .fade-forward-enter-active,
  .fade-backward-enter-active {
    top: 72px;
  }
}

.fade-forward-enter-active {
  animation: fadeIn 350ms ease-in-out forwards;
}

.fade-forward-exit-active {
  animation: fadeOut 350ms ease-in-out forwards;
}

.fade-backward-enter-active {
  animation: fadeIn 350ms ease-in-out forwards;
}

.fade-backward-exit-active {
  animation: fadeOut 350ms ease-in-out forwards;
}

/* slideX */

/* =============================== */

.transition-wrapper--inTransition.slideX {
  display: block;
}

.slideX-forward-enter,
.slideX-backward-enter,
.slideX-forward-exit,
.slideX-backward-exit {
  width: 100vw;
}

/* Position: fixed for entering element so it ignores scroll position during transition */

.slideX-forward-enter,
.slideX-backward-enter {
  position: fixed;
  top: 56px;
}

.slideX-forward-enter {
  left: 100vw;
}

.slideX-backward-enter {
  left: -100vw;
}

.slideX-forward-enter-active {
  animation: slideFromRightToLeft 350ms ease-in-out forwards;
}

.slideX-forward-exit-active {
  animation: slideFromRightToLeft 350ms ease-in-out forwards;
}

.slideX-backward-enter-active {
  animation: slideFromLeftToRight 350ms ease-in-out forwards;
}

.slideX-backward-exit-active {
  animation: slideFromLeftToRight 350ms ease-in-out forwards;
}

/* slideY */

/* =============================== */

.slideY-forward-enter-active,
.slideY-backward-enter-active {
  position: fixed;
  top: 56px;
  left: 0;
  right: 0;
  z-index: 2;
  background-color: white;
}

@media (min-width: 800px) {
  .slideY-forward-enter-active,
  .slideY-backward-enter-active {
    top: 72px;
  }
}

.slideY-forward-enter-active {
  animation: slideInY 350ms ease-in-out forwards;
}

.slideY-forward-exit-active {
  animation: fadeOut 350ms ease-in-out forwards;
}

.slideY-backward-enter-active {
  animation: fadeIn 350ms ease-in-out forwards;
}

.slideY-backward-exit-active {
  animation: slideOutY 350ms ease-in-out forwards;
}

/* fadeIn for tabs */

/* =============================== */

/**
* NOT USING KEYFRAMES HERE:
* Safari does not like to have its class assigne to a keyframe being removed
* and as a results it breaks the layout on itinerary pseudo-element
*/

.fade-tabs-enter {
  opacity: 0;
}

.fade-tabs-enter-done {
  opacity: 1;
}

.fade-tabs-enter-active {
  opacity: 1;
  transition: opacity 350ms;
  /* Adding an animation delay to make sure we scroll the page
  * to the correct offset of the page before starting the animation
  */
  transition-delay: 450ms;
}


/*# sourceMappingURL=app-09494c58479d11b65399.map*/