.table-tree-grid {
  background: #dbe3e7 linear-gradient(to bottom, #edf2f5 0%,#edf2f5 50%,#ffffff 51%,#ffffff 100%) repeat-y 17px 26px; /* W3C */
  background-size: 100% 52px;
}
.treegrid-indent{
  height: 9px;
}

.treegrid-expander {
  width: 16px;
  height: 9px;
  .font-size(9);
  line-height: 10px;
  overflow: hidden;
  background-color: inherit;
  top: -1px;
  &:after {
    content: '';
    display: inline-block;
    border-top: 1px dotted grey;
    position: absolute;
    right: 1px;
    top: 5px;
    left: 4px;
  }
  .parent & {
    &:after {
      left: 9px
    }
  }
}
.vertical-dots {
  position: relative;
  &:after {
    content: '';
    display: block;
    border-left: 1px dotted grey;
    position: absolute;
    left: -12px;
    top: -5px;
    width: 0;
    bottom: -6px;
  }
  .parent & {
    &:after {
      top:11px
    }
    &:before {
      content: '';
      display: block;
      border-left: 1px dotted grey;
      position: absolute;
      left: -12px;
      top: -5px;
      width: 0;
      bottom: 13px;
    }
  }
}

span.treegrid-indent {
  position: relative;
  &:before {
    content: '';
    display: block;
    border-left: 1px dotted grey;
    position: absolute;
    right: 11px;
    top: -8px;
    width: 0;
    bottom: -8px;
  }
  &.remove-dots {
    &:before {
      display: none;
    }
  }
}
.tree-grid {
  .first {
    &.leaf:first-child {
      .vertical-dots {
        &:after {
          top: 8px;
          bottom: -5px;
        }
      }
    }
  }
  .last{
    .vertical-dots {
      &:after {
        bottom: 8px;
      }
    }
  }
}