fleet/frontend/components/forms/RegistrationForm/_styles.scss

.user-registration {
  @include vertical-card-layout;

  &__container {
    transition: left 300ms ease, opacity 300ms ease;
    z-index: 1;

    &--admin {
      left: 0;
      top: unquote("max(60%, 625px)");
    }

    &--org {
      left: calc(100% + 220px);
      top: unquote("max(60%, 480px)");
      display: none;
    }

    &--fleet {
      left: calc(150% + 220px);
      top: unquote("max(60%, 480px)");
      display: none;
    }

    &--confirmation {
      left: calc(200% + 220px);
      top: unquote("max(60%, 480px)");
      display: none;
    }

    &--complete {
      padding: 0;

      .user-registration__title {
        font-size: $large;
        font-weight: $bold;
        color: $core-fleet-black;
        padding: 25px 35px;
      }
    }
  }

  &__form {
    @include breakpoint(tablet) {
    }

    &--step1-complete {
      .user-registration__container--admin {
        left: -600px;
        display: none;
      }

      .user-registration__container--org {
        left: 0;
        display: block;
      }

      .user-registration__container--fleet {
        left: calc(100% + 220px);
        display: none;
      }

      .user-registration__container--confirmation {
        left: calc(150% + 220px);
        display: none;
      }
    }

    &--step2-complete {
      .user-registration__container--admin {
        left: calc(-50% - 600px);
        display: none;
      }

      .user-registration__container--org {
        left: -600px;
        display: none;
      }

      .user-registration__container--fleet {
        left: 0;
        display: block;
      }

      .user-registration__container--confirmation {
        left: calc(100% + 220px);
        display: none;
      }
    }

    &--step3-complete {
      .user-registration__container--admin {
        left: calc(-100% - 600px);
        display: none;
      }

      .user-registration__container--org {
        left: calc(-50% - 600px);
        display: none;
      }

      .user-registration__container--fleet {
        left: -600px;
        display: none;
      }

      .user-registration__container--confirmation {
        left: 0;
        display: block;
      }
    }

    &::before {
      left: auto;
      right: 50%;
    }

    &--step1-active {
      &::before {
        display: none;
      }
    }
  }

  &__description {
    font-size: $x-small;
    font-weight: $regular;
    color: $core-fleet-black;
  }

  &__title {
    font-size: 18px;
    font-weight: $bold;
    color: $core-fleet-black;
    margin: 0;
    padding: 0;
  }
}