flatTree.style.css

:host
{
  display: flex;
  flex-direction: column;
  height:100%;
}

cdk-virtual-scroll-viewport,
.default-container
{
  flex: 1 0 auto;
  overflow-x: hidden;
}

.render-node-text
{
  white-space: nowrap;
  cursor:default;
}

.padding-block-container
{
  position:absolute;
  left:0;
  top:0;
  height:1.5em;
  width: 0px;
  white-space:nowrap;
}

span[renderText]
{
  white-space: nowrap;
  overflow: hidden;
}

.padding-block
{
  display: inline-block;
  width: 1em;
  height:1.5em;
  position:relative;
}

.padding-block[hidemargin="false"]:before
{
  pointer-events: none;
  content: ' ';
  position:absolute;
  width:100%;
  height:100%;
  left:0.5em;
  top:-0.75em;
  border-left:rgba(128,128,128,0.6) 1px dashed;
}

.render-node-text
{
  opacity: 0.8;
}

.render-node-text:hover
{
  opacity: 1.0;
}

.render-node-level-1
{
  position:relative;
  white-space: nowrap;
}

.render-node-level-1:before
{
  pointer-events: none;
  content: ' ';
  height:1.5em;
  width: 1.5em;
  bottom: 0.25em;
  left: -0.5em;
  position: absolute;
  border-left: rgba(128,128,128,0.6) 1px dashed;
  border-bottom: rgba(128,128,128,0.6) 1px dashed;
}

.render-node-level-0 
{
  margin-left: 0em;
}
.render-node-level-1
{
  margin-left: 1em;
}
.render-node-level-2
{
  margin-left: 2em;
}
.render-node-level-3
{
  margin-left: 3em;
}
.render-node-level-4
{
  margin-left: 4em;
}
.render-node-level-5
{
  margin-left: 5em;
}
.render-node-level-6
{
  margin-left: 6em;
}
.render-node-level-7
{
  margin-left: 7em;
}
.render-node-level-8
{
  margin-left: 8em;
}
.render-node-level-9
{
  margin-left: 9em;
}
.render-node-level-10
{
  margin-left: 10em;
}



.render-node-level-0  > .padding-block-container
{
  left: -0em;
}
.render-node-level-1 > .padding-block-container
{
  left: -1em;
}
.render-node-level-2 > .padding-block-container
{
  left: -2em;
}
.render-node-level-3 > .padding-block-container
{
  left: -3em;
}
.render-node-level-4 > .padding-block-container
{
  left: -4em;
}
.render-node-level-5 > .padding-block-container
{
  left: -5em;
}
.render-node-level-6 > .padding-block-container
{
  left: -6em;
}
.render-node-level-7 > .padding-block-container
{
  left: -7em;
}
.render-node-level-8 > .padding-block-container
{
  left: -8em;
}
.render-node-level-9 > .padding-block-container
{
  left: -9em;
}
.render-node-level-10 > .padding-block-container
{
  left: -10em;
}

.r-270
{
  transform: rotate(270deg);
}

[renderNode]
{
  height: 15px;
}