.ember-table {
  td {
    &input {
      width: 100%;
    }
    background: white;
    //setting background because when the columns are frozen we see it slide under.(transparent bg)
  }

  .ember-table-overflow {
    overflow: scroll !important;
  }

  &.mars-ember-table {
    table {
      border-collapse: separate;

      thead {
        th {
          background: #98bad6;
          text-align: center;
          user-select: auto !important;
          font-weight: normal;
          padding: 2.5px 0;
        }

        tr th {
          border-right: 1px solid white !important;
          //border-top: 1px solid #98bad6 !important;
        }
      }

      td.editableCell {
        padding: 1px 1px 1px 1px !important;
      }

      tr .icon-circle {
        padding: 4px 5px;

        i.i-circle {
          width: 10px;
          height: 10px;
          display: block;
          border-radius: 50%;
          background-color: #3eea31;
        }
      }
    }

    .is-first-column.fakeColspan2 div.et-cell-content {
      overflow: hidden;
      text-overflow: ellipsis !important;
      white-space: nowrap;
    }

    .is-first-column .et-cell-container {
      text-align: left;
    }

    td.is-fixed-left:not(.is-first-column) {
      z-index: 2 !important;
    }

    td.lessIndex:not(.is-first-column) {
      z-index: 1 !important;
    }

    .borderRightNone {
      border-right: none !important;
    }

    &.mars-row-edit-table {


      table th {
        touch-action: auto !important;
      }

      table thead tr {
        height: 50px;
      }

      table td {
        border-top: 1px solid #ddd;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      &.table-striped tbody tr:nth-of-type(odd) td {
        background-color: #f9f9f9
      }

      &.table-striped tbody tr:nth-of-type(even) td {
        background-color: #FFFFFF;
      }

      .action-component {
        .btn-save,
        .btn-edit,
        .btn-delete,
        .btn-deactive {
          background: none;
          width: 26px;
          height: 26px;
          cursor: pointer;
          float: left;
          margin: 0px 5px;

          i {
            width: 100%;
            height: 100%;
          }
        }
      }
    }
  }

  th.is-reorderable {
    cursor: grab
  }

  .et-reorder-main-indicator {
    position: absolute;
    background: 0 0;
    border-left: none;
    border-right: none;
    opacity: .8;
    z-index: 10
  }

  .et-reorder-main-indicator th {
    background: #e9f4fc
  }

  .et-reorder-drop-indicator {
    position: absolute;
    background: 0 0;
    border-left: none;
    border-right: #27618a solid 1px;
    opacity: .8;
    z-index: 10;
    height: 100%
  }

  &.ember-tree-table {
    .is-first-column {

      //hide check box because we want to display expand collapse icon.
      input[type=checkbox] {
        opacity: 0;
      }

      input[type="text"] {
        width: calc(100% - 30px);
      }

      .et-cell-content {
        display: inline;
      }

      &.expanded .depth-0 {
        background: url(../images/chi-arrowright.svg) no-repeat center center;
        background-size: 75%;
        transform: rotate(90deg);
        @include transition(all 0.4s ease-in-out);
      }

      &.collapsed .depth-0 {
        background: url(../images/chi-arrowright.svg) no-repeat center center;
        background-size: 75%;
        @include transition(all 0.4s ease-in-out);
      }

      .et-depth-indent {
        width: 20px;
        display: inline-block;
      }

    }
  }

}

.ember-table-wrapper-div {
  height: 500px;
}

.overFlowVisible {
  overflow: visible !important;
}

.textOverFlowVisible div{
  overflow: visible !important;
  text-overflow: clip !important;
}

.is-reordering.ember-table * {
  cursor: grabbing !important;
  user-select: none;

  .ember-table {
    user-select: none !important;
  }

  thead .ember-view {
    user-select: none !important;
  }

  tbody .ember-view {
    user-select: none !important;
  }

}

//only use this for test if you want load non visible rows in ember table.
.test-ember-table-wrapper {
  height: 2000px !important;
}