.user-page {
  .sidebar-container {
    margin-bottom: 10px;
    ul {
      li {
        position: relative;
        &:before {
          content: '';
          position: absolute;
          top: 100%;
          width: 0px;
          height: 1px;
          transition: all 0.3s;
          display: block;
          background-color: $title-color;
        }
        &:hover,
        &.active {
          // background-color: lighten($title-color, 15%);
          &:before {
            width: 50px;
          }
          a {
            // color: #fff;
          }
        }
        a {
          display: block;
          padding: 8px 8px 8px 0;
        }
      }
    }
  }
}

// ===== STATISTIC ===== //
.statistic-page {
  .statistic-item-container {
    margin-bottom: 8px;
    padding      : 12px 8px;
    text-align   : center;
    color: $title-color;
    border: 1px solid $gray-color2;
    cursor: pointer;
    &:hover {
      color: #fff;
      background-color: $subtitle-color;
      box-shadow: 0px 0px 5px 1px rgba($title-color, 0.5);
    }
  }
}
// === END STATISTIC === //


// === ORDER HISTORY === //
.user-order-history-page {
  .order-item-container {
    margin-bottom: 10px;
    background-color: $gray-color1;
    padding: 25px 25px 15px 15px;
    position: relative;
    border-radius: 3px;

    &.paid {
      background-color: #4caf50;
      color: #fff;
      .paid {
        color: #4caf50;
        background-color: #fff;
      }
    }

    .paid {
      position        : absolute;
      top             : 5px;
      right           : 5px;
      width           : 25px;
      height          : 25px;
      display         : flex;
      justify-content : center;
      align-items     : center;
      border-radius   : 50%;
      background-color: #fff;
      color           : $title-color;
      cursor          : pointer;
    }

    ul {
      li:nth-child(n+2) {
        display: flex;
        justify-content: space-between;
      }
      li:last-child {
        justify-content: flex-end;
      }
    }

  }
}
// === END ORDER HISTORY === //


// === USER ORDER DETAIL === //
.user-order-details-page {
  .order-detail-container {
    ul {
      li {
        display: flex;
        margin-bottom: 10px;
        .img {
          max-width: 60px;
          img {
            width: 100%;
          }
        }
        .subtotal {
          display: flex;
          flex: 1;
          justify-content: flex-end;
          margin: auto;
        }
        .info {
          margin-left: 10px;
          max-width: 500px;
          p {
            margin-bottom: 0px;
            &.name {
              font-weight: bold;
            }
          }
        }
      }
    }
  }

  .summary {
    ul {
      li {
        display        : flex;
        justify-content: space-between;
      }
    }
  }

}
// === USER END ORDER DETAIL === //