.tree-view {
  .toggle-children {
    cursor: pointer;
  }

  .column-headers {
    border-bottom: 2px solid black;

    td { vertical-align: middle; }
  }

  & tbody > tr.children td { padding: 5px 0; }


  & tbody > tr.parent:hover > td {
    -webkit-box-shadow: 0 3px 6px 0px rgba(0, 0, 0, 0.16), 0 -2px 6px 0px rgba(0, 0, 0, 0.16);
    box-shadow: 0 3px 6px 0px rgba(0, 0, 0, 0.16), 0 -2px 6px 0px rgba(0, 0, 0, 0.16);
  }
  & tbody > tr.parent:hover > td { position: relative; background-color: #fff; }
  & tbody > tr.parent:hover > td:before {
    content: "";
    width: 8px;
    height: 100%;
    background-color: #fff;
    position: absolute;
    left: -4px;
    top: 0;
    z-index: 1;
  }

  .parent {
    & > .toggle-children {
      &::before {
        font: normal normal normal 14px/1 FontAwesome;
        position: absolute;
        content: "\f105";
        top: 6px;
        left: 10px;
        z-index: 10;
      }
    }

    & > .children {
      height: 0;
      overflow: hidden;
    }
  }

  .parent.collapsed {
    & > .toggle-children {
      &::before {
        content: "\f107";
        left: 7px;
      }
    }

    & > .children {
      height: auto;
    }
  }
  .parent:not(:hover) > .head .control-icon { color: #fff; }
  //.parent:hover > .head .control-icon { color: #337ab7;}
  //.parent:hover > .head .control-icon:hover { background: #ddd;}

  // ---------------------------------------------------------------------------
  // L A Y O U T  +  D E S I G N -----------------------------------------------
  // ---------------------------------------------------------------------------
  margin: 0;

  border: none;
  border-radius: 3px;

  tbody + tbody { border: none; } // reset BS border

  .document {
    border-top: 1px solid #ccc;
  }
  .document:first-child {
    border-top: none;
  }

  .document > .cell.key { width: 33.33333333%; }
  .document > .cell.key.shorten { width: 23.33333333%; }

  .parent {
    .children {
      margin-left: 10px;
    }
  }

  .parent.collapsed > .head > .cell {
    // background-color: #F8F8F8;
  }

  .head {
    &:hover {
      background-color: #eee;
    }
  }

  .cell {
    padding-top: 3px;
    padding-bottom: 4px;
    height: 28px;

    &.key, &.value {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    &.key {
      padding-right: 0px;
      padding-left: 10px;
      small {
        color: #aaa;
      }
    }
    &.value {
      padding-left: 5px;
    }
    &.actions {
      padding-right: 10px;
      padding-left: 0px;
    }
  }

  .children .cell.key {
    padding-left: 20px;
  }
  .children {
    font-size: 13px;
  }

  .children td {
    border-top: 1px solid #ccc;
  }

  .value-type-label {
    width: 18px;
    display: inline-block;
    font-size: 9px;
    padding: 1px 2px;
    text-align: center;
    background-color: #F2F2F2;
    border-radius: 2px;
  }

  .field-number {
    .value, .value-type-label { color: #1E20E8; }
  }

  .field-null {
    .value {
      color: #aaa;
      font-style: italic;
    }
    .value-type-label { color: #E81EA6; }
  }

  .field-boolean {
    .value { font-weight: bold; }
    .value-type-label { color: #E81EA6; }
  }

  .field-array, .field-object {
    .value { color: #aaa; }
  }

  .field-id .value-type-label { color: #3CA2D7; }
  .field-date .value-type-label { color: #AE681B; }
  .field-array .value-type-label { color: #EA5454; }
  .field-object .value-type-label { color: #3AAC55; }

  .pinned-column {
    overflow: hidden;
  }

  .pinned-column:hover {
    // overflow: visible;
    // background: #fff;
    // box-shadow: 0px 0px 3px gray;
  }
}
