.ticket-list {
  > thead > tr > th,
  > tbody > tr > td {
    padding: @table-cell-padding @table-cell-padding + 4px;
  }
  > thead > tr > th {
    background: none;
    color:#000;
    white-space: nowrap;
    cursor: pointer;
    border-bottom-width: 1px;
    font-weight: normal;
  }
  td {
    a {
      padding: @table-cell-padding @table-cell-padding + 4px;
      margin: -@table-cell-padding -(@table-cell-padding + 4px);
      display: block;
      color: inherit;
      text-decoration: none;
    }
  }
  .sortable {
    padding-left: @table-cell-padding + 6px;
    a {
      margin-left: -(@table-cell-padding + 6px);
      padding-left: @table-cell-padding + 6px;
    }
    .fa {
      float: left;
      line-height: inherit;
      margin-left: -(@table-cell-padding + 6px);
    }
  }
  .createdAt {
    width:1%;
    white-space: nowrap;
  }
  .key {
    width:1%;
    white-space: nowrap;
  }
  .priority, .status {
    width:1%;
    text-transform: capitalize;
    white-space: nowrap;
  }
  td.key {
    color: #000;
    font-weight: bold;
  }
  td.createdAt {
    color: lighten(@text-color, 60%)
  }
  td.status {
    background: #f8f8f8;
  }
  .subject {
    a {
      font-weight: bold;
      color: @mainColor;
      &:hover {
        color: darken(@mainColor, 15%);
      }
    }
  }
  tr:hover .subject {
    a {
      color: darken(@mainColor, 15%);
    }
  }
  .message {
    font-size: 36px;
    text-align: center;
    &:hover {
      > td {
        background: #fff;
      }
    }
    td {
      padding: @table-cell-padding * 12;
    }
    a {
      color: #41ffd4;
      display: inline-block;
      background: #41ffd4;
      border: 2px solid #41ffd4;
      border-radius: 40px;
      overflow: hidden;
      position: relative;
      text-transform: uppercase;
      margin: 0 5px;
      padding: 5px;
      height: 40px;
      line-height: 26px;
      text-indent: 30px;
      vertical-align: middle;
      width: 40px;
      &:hover,
      &:focus {
        &:before,
        &:after {
          border-color: #fff;
        }
      }
      &:before {
        content: '';
        border-right: 2px solid @mainColor;
        position: absolute;
        top: 11px;
        left: 17px;
        line-height: 10px;
        height: 14px;
        width: 0;
      }
      &:after {
        content: '';
        border-top: 2px solid @mainColor;
        position: absolute;
        top: 17px;
        left: 11px;
        height: 0;
        width: 14px;
      }
    }
  }


  @media (max-width: @screen-xs-max) {
    font-size: 10px;
    tbody > tr > td {
      vertical-align: middle;
    }
    th.key, td.key {
      display: none;
    }
    .sortable {
      .fa { display: none; }
      .fa-sort-desc,
      .fa-sort-asc {
        & + span {
          border-bottom: 2px @mainColor solid;
        }
      }
    }
    td {
      .key {
        font-weight: bold;
        color:@text-color;
      }
    }
    td.subject {
      font-size: 14px;
    }
    .priority,
    .status {
      text-align: center;
    }
  }
}

.sortby-label {
  padding-left: 14px;
  margin-top: -10px;
  font-size: 10px;
  color: lighten(@text-color, 60%);
}


