.member-card {
  width: 100%;
  //height: 60px;
  border-radius: 15px;
  display: flex;
  justify-content: start;
  align-items: center;
  flex-direction: column;
  background: white;
  padding: 13px 20px;

  .header {
    width: 100%;
    padding-bottom: 2px;
    display: flex;
    justify-content: space-between;

    .left {
      font-weight: bold;
      font-size: 15px;
      color: #333333;
      display: flex;
      align-items: center;

      .grade {
        width: 53px;
        height: 13px;
        margin-left: 5px;
      }
    }

    .btn-tag {
      //width: 74px;
      height: 30px;
      border-radius: 15px;
      font-size: 12px;
      font-weight: bold;
      color: #63421a;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }

  .footer {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .progress-bar-container {
      width: 100%;
      margin: 2px 0;

      .progress-bar-background {
        width: 100%;
        height: 15px;
        background-color: #FEF1E6;
        border-radius: 10px;
        overflow: hidden;
      }

      .progress-bar-foreground {
        height: 100%;
        background-color: #FF5E27;
        border-radius: 10px;
        transition: width 0.3s ease-in-out;
      }
    }

    .right {
      font-weight: 500;
      font-size: 12px;
      color: #999999;
      display: flex;
      justify-content: center;
      align-items: center;

      .img {
        width: 6px;
        height: 7px;
        margin-left: 5px;
      }
    }
  }
}