.chat-list {
  display: block;
  float: right;
  width: 100%;
  overflow: scroll;
  height: 100%; }
  .chat-list .chat-list-item.first {
    background: #f0f8ff; }
  .chat-list .chat-list-item {
    float: right;
    width: 100%;
    position: relative;
    border-bottom: 1px solid #cecece; }
    .chat-list .chat-list-item .avatr {
      float: right;
      width: 13%;
      margin-top: 9px;
      position: relative; }
      .chat-list .chat-list-item .avatr span {
        float: right;
        height: 40px;
        width: 40px;
        border-radius: 50px;
        border: 1px solid #c2c2c2; }
        .chat-list .chat-list-item .avatr span i {
          text-align: center;
          float: right;
          width: 100%;
          font-size: 120%;
          line-height: 1.8;
          color: #5a5a5a; }
      .chat-list .chat-list-item .avatr img {
        float: right;
        height: 40px;
        width: 40px;
        border-radius: 50px;
        border: 1px solid #c2c2c2;
        background: #ededd2; }
      .chat-list .chat-list-item .avatr h2 {
        position: absolute;
        margin: 3px 0;
        text-align: center;
        width: 76%; }
    .chat-list .chat-list-item .item-body {
      float: right;
      width: 85%; }
      .chat-list .chat-list-item .item-body .title {
        float: right;
        width: 100%;
        margin-bottom: 3px; }
        .chat-list .chat-list-item .item-body .title b {
          float: right;
          margin-left: 5px;
          max-width: 50%;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap; }
        .chat-list .chat-list-item .item-body .title small {
          float: right;
          margin-top: 2px;
          margin-left: 5px; }
      .chat-list .chat-list-item .item-body .name {
        width: 83%;
        float: right; }
      .chat-list .chat-list-item .item-body .label {
        font-weight: 400;
        font-size: 11px;
        margin: 3px 0 2px 5px;
        float: right; }
      .chat-list .chat-list-item .item-body .time {
        float: left;
        font-size: 75%;
        margin-top: 3px; }
      .chat-list .chat-list-item .item-body .count {
        font-size: 80%;
        position: absolute;
        bottom: 12px;
        background: #623a80;
        color: #fff;
        right: 6px;
        top: 10px;
        padding: 2px;
        border-radius: 50px;
        width: 21px;
        height: 21px;
        text-align: center;
        zoom: .9; }
      .chat-list .chat-list-item .item-body .msg {
        float: right;
        width: 100%;
        max-height: 55px;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: normal;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        font-size: 90%;
        line-height: 1.2; }

.item-list {
  overflow-x: hidden;
  overflow-y: auto; }
  .item-list .row {
    margin: 0; }
  .item-list .loading {
    text-align: center;
    padding: 10px;
    color: #623a80;
    font-size: 30px; }

.item-list .item {
  position: relative;
  display: table;
  width: 100%;
  background: #FFF;
  min-height: 82px; }
  .item-list .item a {
    width: 100%;
    padding: 8px 10px;
    float: right; }

.item-list .item .action {
  position: absolute;
  width: 80px;
  height: 100%;
  top: 0;
  border: 0;
  color: #FFF;
  outline: none; }

.item-list .item .action:first-child::before, .item-list .item .action:last-child::before {
  position: absolute;
  top: 0;
  content: '';
  width: 2000px;
  height: 100%; }

.item-list .item .action:first-child {
  left: -80px; }

.item-list .item .action:first-child::before {
  right: 80px; }

.item-list .item .action:last-child {
  right: -80px; }

.item-list .item .action:last-child::before {
  left: 80px; }

.item-list .item .action, .item-list .item .action::before {
  background: #E74C3C; }

.item-list.example-3 .action {
  width: 140px; }

.item-list.example-3 .item .action:first-child {
  left: -140px; }

.item-list.example-3 .item .action:first-child::before {
  right: 140px; }

.item-list.example-3 .item .action:last-child {
  right: -140px; }

.item-list.example-3 .item .action:last-child::before {
  left: 140px; }