/* Admin hierarchy connector cleanup */
.hierarchyCanvas {
  --hierarchy-line: #d4deeb;
  --hierarchy-line-soft: #e7edf5;
}

.hierarchyRoot,
.hierarchyLead,
.hierarchyBranches {
  position: relative !important;
  z-index: 2 !important;
}

.hierarchySpine {
  height: 44px !important;
  margin: 0 12% !important;
  z-index: 1 !important;
}

.hierarchySpine::before {
  top: 0 !important;
  height: 21px !important;
  background: var(--hierarchy-line) !important;
}

.hierarchySpine::after {
  top: 21px !important;
  left: 0 !important;
  right: 0 !important;
  background: linear-gradient(
    90deg,
    transparent 0 2px,
    var(--hierarchy-line) 2px calc(100% - 2px),
    transparent calc(100% - 2px)
  ) !important;
}

.hierarchyBranch {
  isolation: isolate !important;
  overflow: visible !important;
  padding-top: 18px !important;
}

.hierarchyBranch::before {
  top: -23px !important;
  height: 23px !important;
  background: var(--hierarchy-line) !important;
  z-index: -1 !important;
}

.hierarchyBranch > span {
  position: relative !important;
  z-index: 3 !important;
  background: #fff !important;
  box-shadow: 0 0 0 8px #fff !important;
}

.hierarchyNode {
  z-index: 2 !important;
}

.branchSplit {
  margin-top: 4px !important;
  padding-top: 10px !important;
}

.branchSplit:empty {
  display: none !important;
}

.branchSplit::before {
  top: 0 !important;
  left: 27% !important;
  right: 27% !important;
  background: var(--hierarchy-line) !important;
}

.branchSplit .hierarchyNode::before {
  top: -10px !important;
  height: 10px !important;
  background: var(--hierarchy-line) !important;
}

.hierarchyBranch.default {
  padding-top: 31px !important;
}

.hierarchyBranch.default .hierarchyNode {
  margin-top: 4px !important;
}

@media (width <= 1100px) {
  .hierarchySpine {
    display: none !important;
  }

  .hierarchyBranch > span {
    box-shadow: none !important;
  }

  .branchSplit {
    padding-top: 0 !important;
  }
}