.auth_page {
  @include display-flex;
  @include flex(1);
  @include flex-direction(column);
  background: url("/skin/images/pattern_1.png") repeat $background-color-light;
  min-height: 100vh;
  &.__animate {
    .auth_container {
      @include animation('animate-scale-opacity 0.3s');
    }
    .auth_copy {
      @include animation('animate-opacity-in 0.5s');
    }
  }
}

.auth_container {
  @include flex(1 0 auto);
  @include display-flex;
  @include flex-direction(column);
  @include justify-content(center);
  @include transition(all .2s ease);
  padding: 30px 0;
}

.auth_footer {
  color: $base-color-light;
  padding-bottom: 30px;
  text-align: center;
  .elites_copy {
    margin-top: 10px;
  }
}

.auth_header {
  margin-bottom: 30px;
  text-align: center;
  .auth_logo {
    margin-bottom: 15px;
    img {
      max-height: 18vh;
    }
  }
  .auth_header_ttl {
    color: #fff;
    font-size: 22px;
  }
}

.auth_form {
  background-color: #fff;
  border-radius: $border-radius-base;
  margin: 0 auto;
  padding: 20px 40px 30px;
  width: 480px;
  .title {
    font-size: 30px;
    font-weight: bold;
    height: 40px;
    margin-bottom: 30px;
    position: relative;
    text-align: center;
    .title_i {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
    }
  }
  #error {
    color: $red-color;
    margin-bottom: 20px;
    text-align: center;
  }
}

.auth_forms_wrap {
  height: 184px;
  overflow: hidden;
  position: relative;
}

.auth_forms_i {
  @include display-flex;
  @include flex-direction(column);
  @include justify-content(center);
  height: 184px;
}

.auth_forms_animate {
  @include transition(all .2s ease);
  position: relative;
  top: 0;
  &.__top {
    top: -184px;
  }
}

.title_lostpass {
  display: none;
}