#auth-pages {
  max-width: 720px; // 360 + 360 / 2
  overflow: hidden;

  .btn-primary {
    @include respond-to(handhelds) {
      height: 50px;
    }
  }

  .subtitle {
    margin: 0;
    @include respond-to(handhelds) {
      font-size: 14px;
    }
  }

  .input-wrapper {
    margin-top: 49px;

    @include respond-to(handhelds) {
      margin-top: 41px;
      width: 100%;
      padding: 0 16px;
    }
  }

  .tabs-container {
    height: 100%;
    transform: translateX(0);
    width: 100%;

    &.animated {
      transition: .42s transform;
    }

    > div {
      /* justify-content: center; */
      /* &.active {
        flex-direction: row;
      } */

      &:before, &:after {
        content: " ";
        flex: 1;
        min-height: 3rem;
        /* height: 105px; */
        width: 100%;
      }

      > div {
        height: 810px;
        padding: 0;
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
      }
    }
  }

  @media (max-height: 858px) {
    height: auto;

    /* .tabs-container > div > div {
      height: auto;
    } */
  }

  .page-password {
    .input-wrapper {
      @include respond-to(handhelds) {
        margin-top: 31px;
      }

      .btn-primary {
        margin-top: 1rem;
      }
    }
  }
}

.page-sign, .page-signUp {
  .auth-image {
    width: 7.5rem;
    height: 7.5rem;
    margin-bottom: 1.5rem;

    @include respond-to(not-handhelds) {
      width: 10rem;
      height: 10rem;
      margin-bottom: 1.5rem;
    }
  }
}

.sign-logo {
  max-width: 100%;
  max-height: 100%;
}

.page-sign, .page-signQR {
  .qr {
    margin-top: 1.5rem;
  }

  p.qr-description {
    color: #707579;
    line-height: 1.85;
    text-align: left;
    margin-left: auto;
    margin-right: auto;
  }
}

.page-signQR {
  .auth-image {
    @include respond-to(handhelds) {
      width: 166px;
      height: 166px;
    }
  }
}

/* .page-signQR {
  .auth-image {
    position: relative;

    .sign-logo {
      width: 36px;
      height: 36px;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background-color: #fff;
      border-radius: 50%;
    }
  }
} */

.page-signUp {
  .auth-image {
    margin-top: 10px;
    margin-bottom: 14px;

    @include respond-to(handhelds) {
      margin-bottom: 24px;
    }

  }

  #signUp {
    @include respond-to(handhelds) {
      margin-top: 100px;
    }
  }
}