.slick-row .cell-actions {
  text-align: left;
}

.slick-row.selected .cell-selection {
  background-color: transparent; /* show default selected row background */
}

.slick-cell span[data-cell-type="row-header-selector"] {
  display: block;
  text-align: center;
}

/*
  SlickGrid, To fix the issue of width misalignment between Column Header &
  actual Column in Mozilla Firefox browser
  Ref: https://github.com/mleibman/SlickGrid/issues/742
*/
.slickgrid, .slickgrid *, .slick-header-column {
  box-sizing: content-box;
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  -ms-box-sizing: content-box;
}

.slick-cell.selected span[data-cell-type="row-header-selector"] {
  color: $color-primary-fg;
}

.slick-cell.cell-move-handle {
  font-weight: bold;
  text-align: right;
  border-right: solid  $border-color;
  background: $color-gray-lighter;
  cursor: move;

  &:hover {
    background: $color-gray-light;
  }
}

.cell-selection {
  border-right-color: $border-color;
  border-right-style: solid;
  background: $color-gray-lighter;
  color:  $color-gray;
  text-align: right;
  font-size: 10px;
}

.slick-row.selected .cell-move-handle {
  background: $color-warning-light;
}

.slick-row.complete {
  background-color: $color-success-light;
  color:  $color-gray-dark;
}

.slick-row:hover .slick-cell{
  border-top: $table-hover-border;
  border-bottom: $table-hover-border;
  background-color: $table-hover-bg-color;
}

.slick-row .slick-cell {
  border-bottom: $panel-border;
  border-right: $panel-border;
  z-index: 0;
}

.slick-cell.active {
  border: 1px solid transparent;
  border-right: 1px solid $color-gray-light;
  border-bottom-color: $color-gray-light;
}

.ui-widget-content.slick-row {
  &.even,  &.odd {
    background: none;
    background-color: $table-bg;
  }
}