.customer-messages-table-container {
  padding: 10px 0;
}

.customer-messages-table {
  tr.message-row {
    cursor          : pointer;
    background-color: #f4f7f7;
    position        : relative;
    &:hover {
      box-shadow: inset 1px 0 0 #dadce0,inset -1px 0 0 #dadce0,0 1px 2px 0 rgba(60,64,67,.3),0 1px 3px 1px rgba(60,64,67,.15);
      z-index   : 1;
    }
    td:first-child {
      .reply-status {
        color           : #aaa;
        font-weight     : bold;
        border-radius   : 50%;
        width           : 20px;
        height          : 20px;
        font-weight     : bold;
        display         : flex;
        justify-content : center;
        align-items     : center;
        float           : right;
      }
    }
    td:nth-child(n+2) {
      color: #aaa;
    }
  }
  tr.message-row.unread {
    background-color: #fff;
    td:nth-child(n+2) {
      font-weight: bold;
      color: #000;
    }
  }
  tr.message-row.unreply {
    td:first-child {
      .reply-status {
        color           : #fff;
        background-color: #000;
      }
    }
  }
}


.action-dropdown-container {
  position: relative;
  .action-dropdown-button {
    font-size: 20px;
    margin-left: 10px;
    cursor          : pointer;
    width           : 40px;
    height          : 40px;
    border-radius   : 50%;
    display         : flex;
    justify-content : center;
    align-items     : center;
    &:hover,
    &.active {
      background-color: darken(#f1f3f4, 20%);
      border          : 1px solid darken(#f1f3f4, 30%);
    }
  }
  .action-dropdown {
    width           : 220px;
    padding         : 4px 0;
    position        : absolute;
    top             : 100%;
    left            : 0;
    background-color: #fff;
    box-shadow      : 0 8px 10px 1px rgba(0,0,0,0.14),0 3px 14px 2px rgba(0,0,0,0.12),0 5px 5px -3px rgba(0,0,0,0.2);
    border-radius   : 4px;
    display         : none;
    z-index         : 1;
    .action-dropdown-item {
      cursor       : pointer;
      padding      : 4px 20px 4px 20px;
      border-bottom: 1px solid #f1f3f4;
      color        : #333;
      &:last-child {
        border-bottom: 0;
      }
      &:hover {
        background-color: #f1f3f4;
      }
    }
  }
}

.table-header-container {
  display    : flex;
  align-items: center;

  .customer-message-pagination {
    flex           : 1;
    text-align     : right;
    display        : flex;
    align-items    : center;
    justify-content: flex-end;

    .pagination-direction {
      cursor          : pointer;
      width           : 40px;
      height          : 40px;
      border-radius   : 50%;
      display         : flex;
      justify-content : center;
      align-items     : center;
      &:hover,
      &.active {
        background-color: darken(#f1f3f4, 20%);
        border          : 1px solid darken(#f1f3f4, 30%);
      }
    }
  }
}