.auth {
  min-height: 100vh;
  padding: 24px 12px;

  &::before {
    background-image: url("./../images/background/bg-auth.png");
    filter: blur(50px);
    opacity: 0.13;
  }

  &-content {
    border-radius: 18px;
    background-color: #1c212f;
    border: 1px solid rgba(#fff, 0.08);
    padding: 52px 35px 35px;
    max-width: 381px;
  }

  .title {
    font-size: 20px;
    font-weight: 400;
    line-height: 33px;
    margin: 44px 0 5px;
    color: #dbe1f3;
  }

  .sub-title {
    font-size: 16px;
    line-height: 25px;
    color: #757d91;
    margin-bottom: 25px;
  }

  .form-group {
    margin-bottom: 11px;

    label {
      font-size: 12px;
      font-weight: 400;
      display: inline-block;
      line-height: 21px;
      color: #acb3c9;
      margin-bottom: 4px;
    }

    .form-control {
      padding: 0 16px;
      height: 42px;
      border-radius: 5px;
    }

    i {
      top: 50%;
      font-size: 14px;
      right: 14px;
      color: #303747;
      transform: translateY(-50%);
      cursor: pointer;

      &.showing {
        color: #8f2ffd;
      }
    }
  }

  &-link {
    font-size: 11px;
    line-height: 21px;
    color: #757d91;

    &:hover {
      color: #8f2ffd;
    }
  }

  .custom-check {
    margin: 19px 0 21px;
  }

  .button {
    &::before {
      background-image: linear-gradient(
        144.99deg,
        #8f2ffd 42.05%,
        #f6509c 111.39%
      );
      opacity: 0.54;
      @extend %radius-8;
      filter: blur(6px);
      right: -2px;
      bottom: -3px;
    }

    .btn {
      max-width: 100%;
      height: 49px;
      line-height: 49px;
    }
  }

  &-text-bottom {
    font-size: 16px;
    line-height: 24px;
    color: #757d91;
    margin-top: 19px;

    a {
      color: #dbe1f3;

      &:hover {
        color: #8f2ffd;
      }
    }
  }

  @include sm {
    &::before {
      background-size: cover;
      background-position: center;
    }
  }

  @include media("max", 399px) {
    &-content {
      padding: 40px 16px 24px;
    }
  }
}