body > .tree ul > li:first-child::before
  top: 12px

li
  .leaf
    display: flex
    flex-direction: row
    color: #005a9aff

    .folder-icon
      padding: 0 2 0 2
      cursor: pointer

    .node-link
      a
        cursor: pointer
      & > .node-text
        color: #000000

    a.settings
      cursor: pointer
      display: block
      padding: 0 2 0 2
      text-decoration: none
      visibility: hidden
      z-index: 1
    &:hover
      a.settings
        visibility: visible

.forest
  & > .tree
    margin-top: 20px

.tree
  ul
    li
      position: relative
      &::after
        content: " "
        height: 1px
        position: absolute
        top: 12px
      &::before
        bottom: -12px
        content: " "
        height: 7px
        position: absolute
        top: 5px
      &:not(:first-child):last-child::before
        display: none
      &:only-child::before
        bottom: 7px
        content: " "
        display: list-item
        //height: 7px
        position: absolute
        width: 1px
        top: 5px
      &.with-children
        &::after
          background-color: #000
        &::before
          background-color: #000

  .lefthanded
    .leaf
      justify-content : flex-end
    ul
      margin-right : 5px
      li
        margin-right: 10px
        padding-right: 5px
        &.with-children
          &::after
            right: -10px
            width: 5px
          &::before
            right: -10px
            width: 1px
          &:only-child::before
            //right: 1px
  .righthanded
    .leaf
      justify-content : flex-start
    ul
      margin-left : 5px
      li
        margin-left: 10px
        padding-left: 5px
        &.with-children
          &::after
            left: -10px
            width: 5px
          &::before
            left: -10px
            width: 1px
          &:only::before
            background-color: #000
            right: 10px

  .file-dropped
    background-color: #d8dfe5
  .node-actions
    padding-left: 5px
    .update-button
      &.enabled
        cursor: pointer
      &.disabled
        cursor: wait
  .node
    margin-top: 1px
    &.node-type-valid
      .text
        text-decoration: underline

// based on https://codeburst.io/how-to-pure-css-pie-charts-w-css-variables-38287aea161e
.progress-pie
  background: rgba(51, 122, 183, 0.1)
  border-radius: 100%
  height: calc(var(--size, 14) * 1px)
  overflow: hidden
  position: relative
  width: calc(var(--size, 14) * 1px)

  .progress-pie-segment
    --a: calc(var(--over50, 0) * -100%)
    --b: calc((1 + var(--over50, 0)) * 100%)
    --degrees: calc((var(--offset, 0) / 100) * 360)
    -webkit-clip-path: polygon(var(--a) var(--a), var(--b) var(--a), var(--b) var(--b), var(--a) var(--b))
    clip-path: polygon(var(--a) var(--a), var(--b) var(--a), var(--b) var(--b), var(--a) var(--b))
    height: 100%
    position: absolute
    transform: translate(0, -50%) rotate(90deg) rotate(calc(var(--degrees) * 1deg))
    transform-origin: 50% 100%
    width: 100%
    z-index: calc(1 + var(--over50))

    &:after,
    &:before
      background: var(--bg, rgb(51, 122, 183))
      content: ''
      height: 100%
      position: absolute
      width: 100%

    &:before
      --degrees: calc((var(--value, 45) / 100) * 360)
      transform: translate(0, 100%) rotate(calc(var(--degrees) * 1deg))
      transform-origin: 50% 0%

    &:after
      opacity: var(--over50, 0)

#node-popup-tooltip
  .tree
    .node
      margin-top: 5px
    .children
      .node
        padding-left: 15px

.panel-actions
  .almost-useable
    color: orange
  .development-in-progress
    color: red
  .ok-to-use
    color: black

.forest-layout
  background-color: #fff
  position: fixed
  top: 3.7em
  width: 15%
  z-index: 900
.left-handed
  .forest-layout
    left: 80%
.right-handed
  .forest-layout
    left: 2%
