/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */

#WizardApp {
  height: 100%;
}

#WizardApp > div {
  position: relative;
  height: 100%;
}

#WizardApp .enrollment-tooltip {
  max-width: 32rem;
}

@media screen and (max-width: 768px) {
  #WizardApp .enrollment-tooltip {
    max-width: 60vw;
  }
}

.wizard-page {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: white;
}

.fade-enter {
  opacity: 0;
  z-index: 1;
}

.fade-enter.fade-enter-active {
  opacity: 1;
  transition: opacity 250ms ease-in;
}

.fade-exit {
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
}