.paymentCompleted {
  &-main {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 24px 0;
    .avatar {
      width: 72px;
      height: 72px;
      border-radius: 50%;
    }
    .app-name {
      font-size: 1.1rem;
      font-weight: 600;
      padding-top: 16px;
    }
    .balance {
      font-size: 2.8rem;
      font-weight: 600;
      span {
        font-size: 1.8rem;
        position: relative;
        top: -3px;
      }
    }
    .done-text {
      font-size: 1rem;
      color: #fff;
      padding: 2px 12px;
      border-radius: 14px;
    }
    .completed,
    .completed_cb {
      background-color: #20bf7a;
    }
    .failed {
      background-color: #9b9b9b;
    }
    .unpaid,
    .unpaid_cb {
      background-color: #f4cf00;
    }
    .paytime-due {
      font-size: 0.8rem;
      color: #909090;
      padding: 12px 0 6px 0;
    }
    .paytime-text {
      font-size: 1.2rem;
      font-weight: 300;
      color: #242323;
    }
  }

  &-divider {
    border: 1px solid #eee;
  }

  &-points {
    display: flex;
    justify-content: space-between;
    padding: 12px 32px;
    .points-img {
      width: 60px;
      height: 60px;
    }
    .points-content {
      display: flex;
      flex-direction: column;
      .points-point {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        .point-text {
          font-size: 1rem;
          color: #606060;
        }
        .point-money {
          font-size: 1.4rem;
          color: #242323;
          font-weight: 500;
          .parity {
            font-size: 0.8rem;
          }
        }
      }
      .point-label {
        font-size: 0.8rem;
        color: #909090;
      }
    }
    .points-detail-text {
      align-self: flex-end;
      font-size: 0.8rem;
      color: #00b8f5;
      &:hover {
        cursor: pointer;
        filter: opacity(0.7);
        text-decoration: underline;
      }
    }
  }

  &-transaction {
    display: flex;
    justify-content: space-between;
    padding: 18px 24px;
    font-size: 0.8rem;
    color: #909090;
    .trans-copy {
      position: relative;
      top: -2px;
      margin-left: 4px;
      &:hover {
        cursor: pointer;
        filter: opacity(0.7);
      }
      &:active {
        transform: translateY(1px);
      }
    }
  }

  &-btn-container {
    width: 100%;
    padding: 8px 24px 24px 24px;
    .btn-block {
      width: 100%;
    }
  }
}