@color-border: #E8E8E8;
@base-size: 32;
@color-hui: #999999;
@color-border-hui: #999999;
@color-red: #E31739;
@color-font-hui: #999999;
@color-font-hei: #656565;

#user-coupon-container {
  .tab-block {
    display: flex;
    justify-content: space-around;
    align-items: center;

    .tab {
      width: 20%;
      padding: .5em;
      text-align: center;
      font-size: .8em;

      &.active {
        border-bottom: 1px solid @color-red;
      }
    }
  }

  .coupon-list {
    .coupon-item {
      width: 98%;
      height: 5.5em;
      margin: 0.5em auto;
      background-color: #fff;
      display: flex;
      padding: .3em 0;
      border-radius: .5em;

      .price {
        width: 32%;
        text-align: center;
        background-color: #DE7E8E;
        color: #fff;
        display: flex;
        flex-direction: column;
        justify-content: center;

        .p1 {
          margin-bottom: 1em;

          b {
            font-size: 1.8em;
          }
        }
      }

      .info {
        padding-left: .5em;
        display: flex;
        flex: 1;
        flex-direction: column;
        justify-content: space-between;

        .title {
          font-size: .9em;
          padding-top: .5em;

          span {
            font-size: .5em;
            background-color: #DE7E8E;
            color: #fff;
            padding: .3em;
            border-radius: .5em;
            font-weight: normal;
          }
        }

        .rule-time {
          display: flex;
          justify-content: space-between;
          width: 100%;

          .time-tips {
            .time {
              color: @color-font-hei;
              font-size: .7em;
              margin-bottom: .8em;
            }

            .tips {
              color: @color-font-hei;
              font-size: .7em;

              .tips-con {
                display: none;
              }
            }
          }
          .use-btn {
            height: 1.3em;
            font-size: 0.7em;
            border: #DE7E8E 1px solid;
            color: #DE7E8E;
            padding: 0.4em;
            border-radius: 0.5em;
          }
        }
      }
    }

    .no-content {
      text-align: center;
      padding: 2em;
    }
  }
}