orgchart 4.0.1 → 5.0.0

package/README.md

@@ -9,7 +9,7 @@
 # [React Version](https://github.com/dabeng/react-orgchart)
 
 ## Foreword
-First of all, thanks a lot for [wesnolte](https://github.com/wesnolte)'s great work:blush: -- [jOrgChart](https://github.com/wesnolte/jOrgChart). The thought that using nested tables to build out the tree-like orgonization chart is amazing. This idea is more simple and direct than its counterparts based on svg
+First of all, thanks a lot for [wesnolte](https://github.com/wesnolte)'s great work:blush: -- [jOrgChart](https://github.com/wesnolte/jOrgChart). The thought that using nested tables to build out the tree-like organization chart is amazing. This idea is more simple and direct than its counterparts based on svg
 Unfortunately, it's long time not to see the update of jOrgChart. on the other hand, I got some interesting ideas to add, so I choose to create a new repo. 
 - Since version 3.0, we use nested ul to construct tree-like chart instead of nested table.
 - Since version 4.0, users build up the ajax datasoure by themselves.
@@ -23,7 +23,7 @@ Unfortunately, it's long time not to see the update of jOrgChart. on the other h
 - Supports exporting chart as a picture or pdf document.
 - Supports pan and zoom.
 - Allows user to customize the internal structure for every node.
-- Users can adopt multiple solutions to build up a huge organization chart(please refer to multiple-layers or hybrid layout sections).
+- Users can adopt multiple solutions to build up a huge organization chart(please refer hybrid layout sections).
 - touch-enabled plugin for mobile device.
 
 ## CDN
@@ -47,7 +47,7 @@ $ npm install orgchart
 require('orgchart') will load orgchart plugin onto the jQuery object. The orgchart module itself does not export anything.
 
 ## [Demos on github pages](https://dabeng.github.io/OrgChart/)
-## [Demos based on nested ul](https://codepen.io/collection/nWqvzY)
+## [Demos based on nested ul](https://codepen.io/collection/xKmPeK)
 ## [Demos based on nested table](https://codepen.io/collection/AWxGVb/) (obsolete)
 
 ### online demos
@@ -119,10 +119,6 @@ That's where getHierarchy() comes in.
 
 It's a so easy task, we just need to append id or className property to node data.
 
-- [I want a multiple-layers chart](https://dabeng.github.io/OrgChart/multiple-layers.html)
-
-In fact, this is a wonderful solution to display a orgchart which includes a huge number of node data.
-
 - [I want a hybrid(horizontal + vertical) chart](https://dabeng.github.io/OrgChart/vertical-level.html)
 
 This feature is inspired by the issues([Aligning Children Vertical](https://github.com/dabeng/OrgChart/issues/46), [Hybrid(horizontal + vertical) OrgChart](https://github.com/dabeng/OrgChart/issues/61)). Thank [mfahadi](https://github.com/mfahadi) and [Destructrix](https://github.com/Destructrix) for their constructive suggestions:blush: Special thanks to [tedliang](https://github.com/tedliang) for his wonderful hybrid mode solution.
@@ -169,6 +165,47 @@ You need the solution based on new datasource structure with **levelOffset data
 
 **compact data property** is designed for your use case. Once node data includes a "compact" prop with truthy value, itself and its descendant nodes will be arranged with compact mode.
 
+- [ I want to visualize genealogy/pedigree/family tree information](https://dabeng.github.io/OrgChart/family-tree.html)
+
+![family-tree](http://dabeng.github.io/OrgChart/img/family-tree.png)
+
+We use the following two-dimensional array datasource to build up the Family Tree.
+```
+var datascource = [
+  [
+    { 'id': '8', 'name': 'Lao Ye', 'title': 'Grandfather', 'gender': 'male' },
+    { 
+      'id': '1', 'name': 'Lao Lao', 'title': 'Grandmother', 'gender': 'female', 'outsider': true,
+      'children': [
+        [
+          { 'id': '2', 'name': 'Bo miao', 'title': 'Aunt', 'gender': 'female'}
+        ],
+        [
+          { 'id': '3', 'name': 'Su Miao', 'title': 'Mother', 'gender': 'female',
+            'children': [
+              [
+              
+                { 'id': '12', 'name': 'Pang Pang', 'title': 'Wife', 'gender': 'female', 'outsider': true,
+                  'children': [
+                    [{ 'id': '7', 'name': 'Dan Dan', 'title': 'Daughter', 'gender': 'female' }],
+                    [{ 'id': '6', 'name': 'Er Dan', 'title': 'Daughter', 'gender': 'female' }],
+                  ]
+                },
+                { 'id': '5', 'name': 'Hei Hei', 'title': 'Me', 'gender': 'male' },
+              ]
+            ]
+          },
+          { 'id': '9', 'name': 'Tie Hua', 'title': 'Father', 'gender': 'male', 'outsider': true }
+        ],
+        [
+          { 'id': '10', 'name': 'Hong miao', 'title': 'Aunt', 'gender': 'female'}
+        ]
+      ]
+    }
+  ]
+];
+```
+
 ### how to start up demos locally
 
 - you have to install node.js v6+ because our unit tests are based on jsdom v11

package/README.zh-cn.md

@@ -105,10 +105,6 @@ $ npm install orgchart
 
 我们只需要把css的样式与数据源中的id字段或css类字段关联起来就好。
 
-- [我想实现一个多层级（而非深度）的组织结构图](https://dabeng.github.io/OrgChart/multiple-layers.html)
-
-如果你的组织层级很多，二每个层级下的节点也很多，那么上面的方案可以采纳尝试。
-
 - [我想构造一个混合布局的（水平方向 + 垂直方向）组织结构图](https://dabeng.github.io/OrgChart/vertical-level.html)
 
 这个特性的灵感来源于这两个话题的讨论--[Aligning Children Vertical](https://github.com/dabeng/OrgChart/issues/46), [Hybrid(horizontal + vertical) OrgChart](https://github.com/dabeng/OrgChart/issues/61)。感谢[mfahadi](https://github.com/mfahadi)和[Destructrix](https://github.com/Destructrix)建设性的讨论:blush:尤其感谢[tedliang](https://github.com/tedliang)提供了非常棒的混合布局的解决方案。
@@ -125,6 +121,74 @@ $ npm install orgchart
 
 没问题，我们推荐使用ES6的模版字符串。
 
+- [我想将节点安置在特定的层级. 咋做 ?](https://dabeng.github.io/OrgChart/level-offset.html)
+
+![level-offset](http://dabeng.github.io/OrgChart/img/level-offset.png)
+
+你需要的是一个复合的解决方案： **levelOffset data prop** + callback createNode() + CSS custom properties(variables)
+
+- [我想构造一个组织结构图，每个节点宽度都可以不同的](https://dabeng.github.io/OrgChart/nodes-of-different-widths.html)
+
+![nodes-of-different-widths](http://dabeng.github.io/OrgChart/img/nodes-of-different-widths.png)
+
+- [我想在混合布局中实现拖/放功能](https://dabeng.github.io/OrgChart/drag-drop-hybrid-chart.html)
+
+- [我想指定从某一分支开始，其下所有子节点都以垂直样式显示](https://dabeng.github.io/OrgChart/data-prop-hybrid.html)
+
+![data-prop-hybrid](http://dabeng.github.io/OrgChart/img/data-prop-hybrid.png)
+
+**hybrid data property** 就派上用场了. 在数据源的某个节点中提供"hybrid"属性，那么它的所有后代节点都会垂直布局.
+
+- [我想用Font Awesome图标代替内置的图标](https://dabeng.github.io/OrgChart/custom-icons.html)
+
+- [子节点众多的时候，我想以一种压缩起来的展示方式尽可能节省空间](https://dabeng.github.io/OrgChart/data-prop-compact.html)
+
+![data-prop-compact](http://dabeng.github.io/OrgChart/img/data-prop-compact.png)
+
+**compact data property** 就派上用场了. 在数据源的某个节点里提供了"compact"属性，并赋为真值，那么它和它的子节点就会展示为压缩模式。
+
+- [我想构造族谱，家谱，宗谱的关系图](https://dabeng.github.io/OrgChart/family-tree.html)
+
+![family-tree](http://dabeng.github.io/OrgChart/img/family-tree.png)
+
+我们使用如下的二维数组数据源来构建家谱。“outsider”代表外姓人。
+
+```
+var datascource = [
+  [
+    { 'id': '8', 'name': 'Lao Ye', 'title': 'Grandfather', 'gender': 'male' },
+    { 
+      'id': '1', 'name': 'Lao Lao', 'title': 'Grandmother', 'gender': 'female', 'outsider': true,
+      'children': [
+        [
+          { 'id': '2', 'name': 'Bo miao', 'title': 'Aunt', 'gender': 'female'}
+        ],
+        [
+          { 'id': '3', 'name': 'Su Miao', 'title': 'Mother', 'gender': 'female',
+            'children': [
+              [
+              
+                { 'id': '12', 'name': 'Pang Pang', 'title': 'Wife', 'gender': 'female', 'outsider': true,
+                  'children': [
+                    [{ 'id': '7', 'name': 'Dan Dan', 'title': 'Daughter', 'gender': 'female' }],
+                    [{ 'id': '6', 'name': 'Er Dan', 'title': 'Daughter', 'gender': 'female' }],
+                  ]
+                },
+                { 'id': '5', 'name': 'Hei Hei', 'title': 'Me', 'gender': 'male' },
+              ]
+            ]
+          },
+          { 'id': '9', 'name': 'Tie Hua', 'title': 'Father', 'gender': 'male', 'outsider': true }
+        ],
+        [
+          { 'id': '10', 'name': 'Hong miao', 'title': 'Aunt', 'gender': 'female'}
+        ]
+      ]
+    }
+  ]
+];
+```
+
 ### 本地运行orgchart
 
 - 必须安装node.js v6+，因为我们的单元测试是基于jsdom v11。

package/README.zh-tw.md

@@ -105,10 +105,6 @@ $ npm install orgchart
 
 我們只需要把css的樣式與數據源中的id字段或css類字段關聯起來就好。
 
-- [我想實現一個多層級（而非深度）的組織結構圖](https://dabeng.github.io/OrgChart/multiple-layers.html)
-
-如果你的組織層級很多，二每個層級下的節點也很多，那麽上面的方案可以采納嘗試。
-
 - [我想構造一個混合布局的（水平方向 + 垂直方向）組織結構圖](https://dabeng.github.io/OrgChart/vertical-level.html)
 
 這個特性的靈感來源于這兩個話題的討論--[Aligning Children Vertical](https://github.com/dabeng/OrgChart/issues/46), [Hybrid(horizontal + vertical) OrgChart](https://github.com/dabeng/OrgChart/issues/61)。感謝[mfahadi](https://github.com/mfahadi)和[Destructrix](https://github.com/Destructrix)建設性的討論:blush:尤其感謝[tedliang](https://github.com/tedliang)提供了非常棒的混合布局的解決方案。
@@ -125,6 +121,74 @@ $ npm install orgchart
 
 沒問題，我們推薦使用ES6的模版字符串。
 
+- [我想將節點安置在特定的層級。 咋做 ?](https://dabeng.github.io/OrgChart/level-offset.html)
+
+![level-offset](http://dabeng.github.io/OrgChart/img/level-offset.png)
+
+你需要的是一個復合的解決方案： **levelOffset data prop** + callback createNode() + CSS custom properties(variables)
+
+- [我想構造一個組織結構圖，每個節點寬度都可以不同的](https://dabeng.github.io/OrgChart/nodes-of-different-widths.html)
+
+![nodes-of-different-widths](http://dabeng.github.io/OrgChart/img/nodes-of-different-widths.png)
+
+- [我想在混合布局中實現拖/放功能](https://dabeng.github.io/OrgChart/drag-drop-hybrid-chart.html)
+
+- [我想指定從某一分支開始，其下所有子節點都以垂直樣式顯示](https://dabeng.github.io/OrgChart/data-prop-hybrid.html)
+
+![data-prop-hybrid](http://dabeng.github.io/OrgChart/img/data-prop-hybrid.png)
+
+**hybrid data property** 就派上用場了。 在數據源的某個節點中提供"hybrid"屬性，那麽它的所有後代節點都會垂直布局。
+
+- [我想用Font Awesome圖標代替內置的圖標](https://dabeng.github.io/OrgChart/custom-icons.html)
+
+- [子節點眾多的時候，我想以一種壓縮起來的展示方式盡可能節省空間](https://dabeng.github.io/OrgChart/data-prop-compact.html)
+
+![data-prop-compact](http://dabeng.github.io/OrgChart/img/data-prop-compact.png)
+
+**compact data property** 就派上用場了。在數據源的某個節點裏提供了"compact"屬性，並賦為真值，那麽它和它的子節點就會展示為壓縮模式。
+
+- [我想構造族譜，家譜，宗譜的關系圖](https://dabeng.github.io/OrgChart/family-tree.html)
+
+![family-tree](http://dabeng.github.io/OrgChart/img/family-tree.png)
+
+我們使用如下的二維數組數據源來構建家譜。“outsider”代表外姓人。
+
+```
+var datascource = [
+  [
+    { 'id': '8', 'name': 'Lao Ye', 'title': 'Grandfather', 'gender': 'male' },
+    { 
+      'id': '1', 'name': 'Lao Lao', 'title': 'Grandmother', 'gender': 'female', 'outsider': true,
+      'children': [
+        [
+          { 'id': '2', 'name': 'Bo miao', 'title': 'Aunt', 'gender': 'female'}
+        ],
+        [
+          { 'id': '3', 'name': 'Su Miao', 'title': 'Mother', 'gender': 'female',
+            'children': [
+              [
+              
+                { 'id': '12', 'name': 'Pang Pang', 'title': 'Wife', 'gender': 'female', 'outsider': true,
+                  'children': [
+                    [{ 'id': '7', 'name': 'Dan Dan', 'title': 'Daughter', 'gender': 'female' }],
+                    [{ 'id': '6', 'name': 'Er Dan', 'title': 'Daughter', 'gender': 'female' }],
+                  ]
+                },
+                { 'id': '5', 'name': 'Hei Hei', 'title': 'Me', 'gender': 'male' },
+              ]
+            ]
+          },
+          { 'id': '9', 'name': 'Tie Hua', 'title': 'Father', 'gender': 'male', 'outsider': true }
+        ],
+        [
+          { 'id': '10', 'name': 'Hong miao', 'title': 'Aunt', 'gender': 'female'}
+        ]
+      ]
+    }
+  ]
+];
+```
+
 ### 本地運行orgchart
 
 - 必須安裝node.js v6+，因爲我們的單元測試是基于jsdom v11。

package/demo/family-tree.html

@@ -0,0 +1,97 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>Organization Chart Plugin</title>
+  <link rel="icon" href="img/logo.png">
+  <link rel="stylesheet" href="css/jquery.orgchart.css">
+  <link rel="stylesheet" href="css/style.css">
+  <style type="text/css">
+    .orgchart { background: #fff; }
+    #chart-container {
+      height: 850px;
+    }
+    .orgchart .node {
+      padding: 3px 8px;
+    }
+    .orgchart .node .avatar {
+      border-radius: 60px;
+      box-shadow: rgba(99, 99, 99, 0.8) 0px 2px 8px 0px;
+    }
+    .orgchart .couple:has(> .nodes) > .node:first-child::after {
+      top: 148px;
+    }
+    .orgchart .couple::after  {
+      top: 148px;
+      width: 30px;
+      left: calc(50% - 15px);
+    }
+    .orgchart .couple:first-child:not(:only-child)::before {
+      width: calc(100% - 74px);
+      left: 74px;
+    }
+    .orgchart .hierarchy.couple:only-child::before {
+      width: 152px;
+      left: calc(50% - 76px);
+    }
+    .orgchart .couple:last-child:not(:only-child)::before {
+      width: calc(50% + 76px);
+    }
+  </style>
+</head>
+<body>
+  <div id="chart-container"></div>
+
+  <script type="text/javascript" src="js/jquery.min.js"></script>
+  <script type="text/javascript" src="js/jquery.orgchart.js"></script>
+  <script type="text/javascript">
+    $(function() {
+
+      var datascource = [
+        [
+          { 'id': '8', 'name': 'Lao Ye', 'title': 'Grandfather', 'gender': 'male' },
+          { 
+            'id': '1', 'name': 'Lao Lao', 'title': 'Grandmother', 'gender': 'female', 'outsider': true,
+            'children': [
+              [
+                { 'id': '2', 'name': 'Bo miao', 'title': 'Aunt', 'gender': 'female'}
+              ],
+              [
+                { 'id': '3', 'name': 'Su Miao', 'title': 'Mother', 'gender': 'female',
+                  'children': [
+                    [
+                    
+                      { 'id': '12', 'name': 'Pang Pang', 'title': 'Wife', 'gender': 'female', 'outsider': true,
+                        'children': [
+                          [{ 'id': '7', 'name': 'Dan Dan', 'title': 'Daughter', 'gender': 'female' }],
+                          [{ 'id': '6', 'name': 'Er Dan', 'title': 'Daughter', 'gender': 'female' }],
+                        ]
+                      },
+                      { 'id': '5', 'name': 'Hei Hei', 'title': 'Me', 'gender': 'male' },
+                    ]
+                  ]
+                },
+                { 'id': '9', 'name': 'Tie Hua', 'title': 'Father', 'gender': 'male', 'outsider': true }
+              ],
+              [
+                { 'id': '10', 'name': 'Hong miao', 'title': 'Aunt', 'gender': 'female'}
+              ]
+            ]
+          }
+        ]
+      ];
+
+    var oc = $('#chart-container').orgchart({
+      'data' : datascource,
+      'nodeContent': 'title',
+      'nodeID': 'id',
+      'createNode': function($node, data) {
+        $node.prepend(`<img class="avatar" src="https://dabeng.github.io/OrgChart/img/avatar/${data.id}.jpg" crossorigin="anonymous" />`);
+      }
+    });
+
+
+  });
+  </script>
+  </body>
+</html>

package/demo/index.html

@@ -13,7 +13,7 @@
       background-color: #000;
     }
     section {
-      width: 30rem;
+      width: 36rem;
       margin-top: 200px;
       margin-left: auto;
       margin-right: auto;
@@ -130,7 +130,6 @@
     <li><a href="get-hierarchy.html" target="_blank">getHierarchy() method</a></li>
     <li><a href="integrate-map.html" target="_blank">itegrate orgchart with map info</a></li>
     <li><a href="local-datasource.html" target="_blank">local datasource</a></li>
-    <li><a href="multiple-layers.html" target="_blank">multiple-layers chart</a></li>
     <li><a href="ondemand-loading-data.html" target="_blank">load data on-demand</a></li>
     <li><a href="option-createNode.html" target="_blank">createNode callback</a></li>
     <li><a href="pan-zoom.html" target="_blank">pan and zoom the chart</a></li>
@@ -148,6 +147,7 @@
     <li><a href="data-prop-hybrid.html" target="_blank">create hybrid chart with data prop "hybrid"</a></li>
     <li><a href="custom-icons.html" target="_blank">use fontawesome icons instead of built-in icons</a></li>
     <li><a href="data-prop-compact.html" target="_blank">layout for children which is too many</a></li>
+    <li><a href="family-tree.html" target="_blank">visualize genealogy/pedigree/family tree information</a></li>
   </ol>
   </section>
 </body>

package/demo/option-createNode.html

@@ -21,12 +21,12 @@
     .orgchart .node .second-menu {
       display: none;
       position: absolute;
-      top: 0;
-      right: -70px;
+      bottom: -35px;
+      right: 0;
       border-radius: 35px;
       box-shadow: 0 0 10px 1px #999;
       background-color: #fff;
-      z-index: 1;
+      z-index: 3;
     }
     .orgchart .node .second-menu .avatar {
       width: 60px;

package/dist/css/jquery.orgchart.css

@@ -83,6 +83,7 @@
   list-style: none;
   padding-left: 0;
   margin: 0;
+  justify-content: center;
 }
 
 .orgchart .hierarchy {
@@ -100,6 +101,62 @@
   box-sizing: border-box;
 }
 
+/* 本姓人与上一层父母的连线，借助伪元素::before实现 */
+/* 处理同一层中特殊的首节点 */
+.orgchart .couple:first-child:not(:only-child)::before {
+  width: calc(100% - 69px); /* half width of hierarchy - half width of node - node's padding - node's border width */
+  left: 69px;
+}
+
+/* 处理同一层中特殊的末节点 */
+.orgchart .couple:last-child:not(:only-child)::before {
+  width: calc(50% + 71px);
+  left: 0px;
+}
+
+.orgchart .hierarchy.couple:only-child::before {
+  width: 142px; /* half of node's width + link's width */
+  left: calc(50% - 71px); /* half width of node - half of link width */
+}
+
+/* 在family tree中，一个夫妻组合里，本姓人只有一个，外姓人可能有多个 */
+/* 我们通过水平的连线来表示他们存在婚姻关系，借助伪元素::after实现 */
+.orgchart .hierarchy.spouse:not(.couple)::after {
+  content: "";
+  position: absolute;
+  border-top: 2px solid rgba(217, 83, 79, 0.8);
+  box-sizing: border-box;
+  z-index: 0;
+  top: 24px;
+  width: var(--ft-width);
+  left: var(--ft-left-offset);
+}
+
+/* 一夫一妻情况下的连线 */
+.orgchart .couple {
+  white-space: nowrap;
+}
+
+.orgchart .couple:has(> .nodes) > .node:first-child::after {
+  content: "";
+  position: absolute;
+  top: 24px;
+  left: calc(100% + 1px);
+  width: 2px;
+  height: 33px;
+  background-color: rgba(217, 83, 79, 0.8);
+}
+.orgchart .couple::after {
+  content: "";
+  position: absolute;
+  border-top: 2px solid rgba(217, 83, 79, 0.8);
+  box-sizing: border-box;
+  z-index: 0;
+  top: 24px;
+  width: 20px;
+  left: calc(50% - 10px); /* half of hierarchy - node's padding width - node's border with */
+}
+
 .orgchart .hierarchy:first-child::before,
 .orgchart .hierarchy.isSiblingsCollapsed.left-sibs::before {
   left: calc(50% - 1px);
@@ -111,7 +168,7 @@
   width: calc(50% + 1px);
 }
 
-.orgchart .hierarchy:not(.hidden):only-child::before {
+.orgchart .hierarchy:not(.hidden):not(.spouse):only-child::before {
   width: 2px;
 }
 
@@ -122,17 +179,17 @@
 .orgchart .isSiblingsCollapsed.left-sibs:last-child:before,
 .orgchart .isCollapsedSibling::before,
 .orgchart .isCollapsedSibling .hierarchy::before,
-.orgchart .isChildrenCollapsed > .node:not(:only-child)::after,
+.orgchart .hierarchy.isChildrenCollapsed:not(.couple) > .node:has(+ .nodes)::after,
 .orgchart .isCollapsedDescendant::before,
 .orgchart .isCollapsedDescendant > .node::before,
 .orgchart .isCollapsedDescendant > .node::after,
 .orgchart .isAncestorsCollapsed:only-child::before,
-.orgchart .isAncestorsCollapsed > .node::before {
+.orgchart .isAncestorsCollapsed > .node:not(.outsider)::before {
   content: none;
 }
 
 /* excluding leaf node */
-.orgchart .node:not(:only-child)::after {
+.orgchart .hierarchy:not(.couple) > .node:has(+ .nodes)::after {
   content: "";
   position: absolute;
   bottom: -12px; /* -(background square size + node's border width) */
@@ -155,7 +212,7 @@
   background-color: rgba(238, 217, 54, 0.5);
 }
 /* excluding root node */
-.orgchart > ul > li > ul li > .node::before {
+.orgchart > ul > li > ul li > .node:not(.outsider)::before {
   content: "";
   position: absolute;
   top: var(--top, -12px); /* -(fallback value = background square size + border width of node) */ 
@@ -165,7 +222,17 @@
   background-color: rgba(217, 83, 79, 0.8);
 }
 
-.orgchart > ul > li > ul li.isSiblingsCollapsed > .node::before {
+.orgchart > ul > li > ul li > .node.outsider::before {
+  content: "";
+  position: absolute;
+  top: var(--top, -12px);
+  left: calc(50% - 1px);
+  width: 0;
+  height: var(--height, 10px);
+  border-right: 2px dotted rgba(217, 83, 79, 0.8);
+}
+
+.orgchart > ul > li > ul .isSiblingsCollapsed > .node::before {
   top: var(--top-cross-point, -12px);
   height: var(--height-cross-point, 10px);
 }
@@ -179,6 +246,8 @@
   padding: 3px;
   border: 2px dashed transparent;
   text-align: center;
+  transition: transform 0.3s, opacity 0.3s;
+  z-index: 1;
 }
 
 .orgchart.l2r .node, .orgchart.r2l .node {
@@ -190,7 +259,7 @@
   background-color: rgba(238, 217, 54, 0.5);
   transition: .5s;
   cursor: default;
-  z-index: 20;
+  z-index: 2;
 }
 
 .orgchart .node.focused {
@@ -420,10 +489,6 @@
   padding: 0.5rem 1rem;
 }
 
-.orgchart .node {
-  transition: transform 0.3s, opacity 0.3s;
-}
-
 .orgchart .slide-down {
   opacity: 0;
   transform: translateY(40px);
@@ -479,8 +544,8 @@
   margin-bottom: 0;
 }
 
-.orgchart .nodes.vertical .node::before,
-.orgchart .nodes.vertical .node::after {
+.orgchart .nodes.vertical .hierarchy .node::before,
+.orgchart .nodes.vertical .hierarchy .node::after {
   content: none;
 }
 
@@ -500,6 +565,10 @@
   border-width: 0 0 2px 2px;
 }
 
+.orgchart .nodes.vertical .hierarchy:only-child::before {
+  width: 11px;
+}
+
 .orgchart .nodes.vertical .hierarchy::before {
   top: 0px;
   height: 26px; /* node top half's height(25px) + half width of line */
@@ -627,7 +696,7 @@
   margin-bottom: 0;
 }
 
-.orgchart .node.compact .node:not(:only-child)::after {
+.orgchart .node.compact .node:has(+ .nodes)::after {
   content: unset;
 }
 

package/dist/css/jquery.orgchart.min.css

@@ -1 +1 @@
-.orgchart{box-sizing:border-box;display:inline-block;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;background-image:linear-gradient(to top,rgba(200,0,0,.15) 5%,rgba(0,0,0,0) 5%),linear-gradient(to right,rgba(200,0,0,.15) 5%,rgba(0,0,0,0) 5%),linear-gradient(to bottom,rgba(200,0,0,.15) 5%,rgba(0,0,0,0) 5%),linear-gradient(to left,rgba(200,0,0,.15) 5%,rgba(0,0,0,0) 5%);background-size:10px 10px;padding:20px 20px 0 20px}.orgchart .hidden,.orgchart~.hidden{display:none!important}.orgchart.b2t{transform:rotate(180deg)}.orgchart.l2r{position:absolute;transform:rotate(-90deg) rotateY(180deg);transform-origin:left top;text-align:center}.orgchart.r2l{position:absolute;transform:rotate(90deg);transform-origin:left top;text-align:center}.orgchart~.mask{position:absolute;top:0;right:0;bottom:0;left:0;z-index:999;text-align:center;background-color:rgba(0,0,0,.3)}.orgchart~.mask .spinner{position:absolute;top:calc(50% - 50px);left:calc(50% - 50px)}.orgchart>.spinner::before,.orgchart~.mask .spinner::before{width:100px;height:100px;border-width:10px;border-radius:50px;border-top-color:rgba(68,157,68,.8);border-bottom-color:rgba(68,157,68,.8);border-left-color:rgba(68,157,68,.8)}.orgchart .nodes{display:flex;list-style:none;padding-left:0;margin:0}.orgchart .hierarchy{position:relative}.orgchart .hierarchy::before{content:"";position:absolute;top:-11px;left:0;width:100%;border-top:2px solid rgba(217,83,79,.8);box-sizing:border-box}.orgchart .hierarchy.isSiblingsCollapsed.left-sibs::before,.orgchart .hierarchy:first-child::before{left:calc(50% - 1px);width:calc(50% + 1px)}.orgchart .hierarchy.isSiblingsCollapsed.right-sibs::before,.orgchart .hierarchy:last-child::before{width:calc(50% + 1px)}.orgchart .hierarchy:not(.hidden):only-child::before{width:2px}.orgchart .isAncestorsCollapsed:only-child::before,.orgchart .isAncestorsCollapsed>.node::before,.orgchart .isChildrenCollapsed>.node:not(:only-child)::after,.orgchart .isCollapsedDescendant::before,.orgchart .isCollapsedDescendant>.node::after,.orgchart .isCollapsedDescendant>.node::before,.orgchart .isCollapsedSibling .hierarchy::before,.orgchart .isCollapsedSibling::before,.orgchart .isSiblingsCollapsed.left-sibs.right-sibs::before,.orgchart .isSiblingsCollapsed.left-sibs:last-child:before,.orgchart .isSiblingsCollapsed.right-sibs:first-child:before,.orgchart .isSiblingsCollapsed:not(.left-sibs):not(.right-sibs)::before,.orgchart>.nodes>.hierarchy::before{content:none}.orgchart .node:not(:only-child)::after{content:"";position:absolute;bottom:-12px;left:calc(50% - 1px);width:2px;height:10px;background-color:rgba(217,83,79,.8)}.orgchart ul li .node.allowedDrop{border-color:rgba(68,157,68,.9)}.orgchart ul li .node.currentDropTarget{background-color:rgba(68,157,68,.9)}.orgchart ul li .node.selected{background-color:rgba(238,217,54,.5)}.orgchart ul li .node:hover{background-color:rgba(238,217,54,.5)}.orgchart>ul>li>ul li>.node::before{content:"";position:absolute;top:var(--top,-12px);left:calc(50% - 1px);width:2px;height:var(--height,10px);background-color:rgba(217,83,79,.8)}.orgchart>ul>li>ul li.isSiblingsCollapsed>.node::before{top:var(--top-cross-point,-12px);height:var(--height-cross-point,10px)}.orgchart .node{box-sizing:border-box;display:inline-block;position:relative;margin:0 0 20px 0;padding:3px;border:2px dashed transparent;text-align:center}.orgchart.l2r .node,.orgchart.r2l .node{width:50px;height:140px}.orgchart .node:hover{background-color:rgba(238,217,54,.5);transition:.5s;cursor:default;z-index:20}.orgchart .node.focused{background-color:rgba(238,217,54,.5)}.orgchart .ghost-node{position:fixed;left:-10000px;top:-10000px}.orgchart .ghost-node rect{fill:#fff;stroke:#bf0000}.orgchart .node.allowedDrop{border-color:rgba(68,157,68,.9)}.orgchart .node>.spinner{position:absolute;top:calc(50% - 1rem);left:calc(50% - 1rem)}.orgchart .node>.spinner::before{width:2rem;height:2rem;border-width:.2rem;border-radius:1rem;border-top-color:rgba(68,157,68,.8);border-bottom-color:rgba(68,157,68,.8);border-left-color:rgba(68,157,68,.8)}.orgchart .node .title{box-sizing:border-box;width:130px;text-align:center;font-size:12px;font-weight:700;height:20px;line-height:20px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background-color:rgba(217,83,79,.8);color:#fff;border-radius:4px 4px 0 0}.orgchart.b2t .node .title{transform:rotate(-180deg);transform-origin:center bottom}.orgchart.l2r .node .title{transform:rotate(-90deg) translate(-45px,-45px) rotateY(180deg);transform-origin:bottom center}.orgchart.r2l .node .title{transform:rotate(-90deg) translate(-45px,-45px);transform-origin:bottom center}.orgchart .node .title .parentNodeSymbol{float:left}.orgchart .node .title .parentNodeSymbol::before{color:#fff}.orgchart .node .title .parentNodeSymbol::after{background-color:#fff}.orgchart .node .content{box-sizing:border-box;width:130px;height:20px;line-height:20px;font-size:10px;border:1px solid rgba(217,83,79,.8);border-width:0 1px 1px 1px;border-radius:0 0 .25rem .25rem;text-align:center;background-color:#fff;color:#333;text-overflow:ellipsis;white-space:nowrap}.orgchart.b2t .node .content{transform:rotate(180deg);transform-origin:center top}.orgchart.l2r .node .content{transform:rotate(-90deg) translate(-45px,-45px) rotateY(180deg);transform-origin:top center;width:130px}.orgchart.r2l .node .content{transform:rotate(-90deg) translate(-45px,-45px);transform-origin:top center;width:130px}.orgchart .node .edge{position:absolute;cursor:default;transition:.2s}.orgchart .node .edge::before{border-color:rgba(68,157,68,.5)}.orgchart.noncollapsable .node .edge{display:none}.orgchart .node .edge:hover{cursor:pointer}.orgchart .edge:hover::before{border-color:#449d44}.orgchart .node .verticalEdge{width:calc(100% - 6px);height:10px;left:3px}.orgchart .node .verticalEdge::before{position:absolute;left:calc(50% - 5px)}.orgchart .node .topEdge{top:-2px}.orgchart .node .topEdge.oci-chevron-up::before{top:2px}.orgchart .node .topEdge.oci-chevron-down::before{bottom:3px}.orgchart .node .bottomEdge{bottom:-2px}.orgchart .node .bottomEdge.oci-chevron-up::before{bottom:-3px}.orgchart .node .bottomEdge.oci-chevron-down::before{bottom:1px}.orgchart .node .horizontalEdge{width:10px;height:calc(100% - 6px);top:3px}.orgchart .node .rightEdge{right:-2px}.orgchart .node .leftEdge{left:-2px}.orgchart .node .horizontalEdge::before{position:absolute;top:calc(50% - 5px)}.orgchart .node .leftEdge.oci-chevron-right::before{left:-3px}.orgchart .node .leftEdge.oci-chevron-left::before{left:1px}.orgchart .node .rightEdge.oci-chevron-left::before{right:-3px}.orgchart .node .rightEdge.oci-chevron-right::before{right:1px}.orgchart .node .toggleBtn{position:absolute;left:-2px;bottom:-2px;width:16px;height:16px}.orgchart .node .toggleBtn::before{background-color:rgba(68,157,68,.6);position:absolute;left:0;bottom:0}.orgchart .node .toggleBtn:hover::before{background-color:#449d44}.oc-export-btn{margin-left:.5rem;padding:.5rem 1rem}.orgchart .node{transition:transform .3s,opacity .3s}.orgchart .slide-down{opacity:0;transform:translateY(40px)}.orgchart.l2r .node.slide-down,.orgchart.r2l .node.slide-down{transform:translateY(130px)}.orgchart .slide-up{opacity:0;transform:translateY(-40px)}.orgchart.l2r .node.slide-up,.orgchart.r2l .node.slide-up{transform:translateY(-130px)}.orgchart .slide-right{opacity:0;transform:translateX(130px)}.orgchart.l2r .node.slide-right,.orgchart.r2l .node.slide-right{transform:translateX(40px)}.orgchart .slide-left{opacity:0;transform:translateX(-130px)}.orgchart.l2r .node.slide-left,.orgchart.r2l .node.slide-left{transform:translateX(-40px)}.orgchart .nodes.vertical{display:block;padding-left:10px}.orgchart .nodes.vertical .nodes{list-style:none;display:block;margin:0;padding-left:10px;text-align:left}.orgchart .nodes.vertical .node{margin-bottom:0}.orgchart .nodes.vertical .node::after,.orgchart .nodes.vertical .node::before{content:none}.orgchart .nodes.vertical .hierarchy{position:relative;text-align:left}.orgchart .nodes.vertical .hierarchy::after,.orgchart .nodes.vertical .hierarchy::before{box-sizing:border-box;content:'';position:absolute;left:-6px;border-color:rgba(217,83,79,.8);border-style:solid;border-width:0 0 2px 2px}.orgchart .nodes.vertical .hierarchy::before{top:0;height:26px;width:11px}.orgchart .nodes.vertical .hierarchy::after{bottom:0;height:calc(100% - 24px)}.orgchart .nodes.vertical .hierarchy:last-child::after{border-width:2px 0 0 0}.orgchart .nodes.vertical>.hierarchy:first-child::before{box-sizing:border-box;top:-11px;height:35px;width:calc(50% + 2px);border-width:2px 0 0 2px}.orgchart .nodes.vertical>.hierarchy:first-child::after{box-sizing:border-box;top:24px;width:11px;border-width:2px 0 0 2px}.orgchart .nodes.vertical>.hierarchy:first-child:last-child::after{border-width:2px 0 0 0}.orgchart .node.compact{position:static;display:grid;width:140px;height:50px;background-color:#eee}.orgchart .node.compact.looseMode{display:grid;width:unset;height:unset}.orgchart .node.compact>.node{display:none}.orgchart .node.compact.looseMode>.node{display:inline-block}.orgchart .node.compact>.node.compact{position:relative}.orgchart .node.compact>.node.compact.looseMode{display:grid}.orgchart .node.compact.even,.orgchart .node.compact.even:hover{background-color:#eee}.orgchart .node.compact.odd,.orgchart .node.compact.odd:hover{background-color:#fff}.orgchart .node.compact.even>.node.focused,.orgchart .node.compact.even>.node.selected,.orgchart .node.compact.even>.node:hover{background-color:#fff}.orgchart .node.compact.odd>.node.focused,.orgchart .node.compact.odd>.node.selected,.orgchart .node.compact.odd>.node:hover{background-color:#eee}.orgchart .node.compact::before{top:var(--top-cross-point,-10px)}.orgchart .node.compact>.content{position:absolute;top:25px;left:5px}.orgchart .node.compact.looseMode>.title{margin-top:5px;margin-left:5px}.orgchart .node.compact.looseMode>.content{top:30px;left:10px}.orgchart .node.compact>.node.compact.looseMode>.title{margin-top:5px;margin-left:5px}.orgchart .node.compact>.node.compact>.content{position:absolute;top:23px;left:3px}.orgchart .node.compact>.node.compact.looseMode>.content{top:28px;left:8px}.orgchart .node.compact .node{margin-bottom:0}.orgchart .node.compact .node:not(:only-child)::after{content:unset}.orgchart .backToCompactSymbol,.orgchart .backToLooseSymbol{cursor:pointer}.orgchart .node.compact>.backToCompactSymbol{position:absolute;top:5px;left:5px}.orgchart .node.compact.looseMode>.backToCompactSymbol{top:10px;left:10px}.orgchart .node.compact>.node.compact.looseMode>.backToCompactSymbol{top:8px;left:8px}.orgchart .node.compact>.node.compact>.backToCompactSymbol{position:absolute;top:3px;left:3px}.orgchart .node.compact>.backToLooseSymbol{position:absolute;top:25px;right:5px}.orgchart .node.compact>.node.compact>.backToLooseSymbol{position:absolute;top:23px;right:3px}.orgchart .node.compact .backToCompactSymbol::before{border-top-color:rgba(68,157,68,.6)}.orgchart .node.compact .backToLooseSymbol::before{border-bottom-color:rgba(68,157,68,.6)}.orgchart .node.compact .backToCompactSymbol:hover::before{border-top-color:#449d44}.orgchart .node.compact .backToLooseSymbol:hover::before{border-bottom-color:#449d44}.oci{display:inline-block;position:relative;font-style:normal;font-family:Arial}.oci-menu::before{content:"≡";display:inline-block;width:1rem;height:1rem;text-align:center;line-height:1rem;color:#000;font-size:1rem}.oci-chevron-up::before{content:"";box-sizing:border-box;width:10px;height:10px;display:inline-block;border:3px solid #000;transform:rotate(45deg);border-right:unset;border-bottom:unset}.oci-chevron-down::before{content:"";box-sizing:border-box;width:10px;height:10px;display:inline-block;border:3px solid #000;transform:rotate(45deg);border-top:unset;border-left:unset}.oci-chevron-left::before{content:"";box-sizing:border-box;width:10px;height:10px;display:inline-block;border:3px solid #000;transform:rotate(45deg);border-top:unset;border-right:unset}.oci-chevron-right::before{content:"";box-sizing:border-box;width:10px;height:10px;display:inline-block;border:3px solid #000;transform:rotate(45deg);border-left:unset;border-bottom:unset}.oci-corner-top-left::before{content:"";display:inline-block;border-top:20px solid #000;border-right:20px solid transparent}.oci-corner-top-right::before{content:"";display:inline-block;box-sizing:border-box;width:0;height:0;border-top:20px solid #000;border-left:20px solid transparent}.oci-corner-bottom-right::before{content:"";display:inline-block;box-sizing:border-box;width:0;height:0;border-bottom:20px solid #000;border-left:20px solid transparent}.oci-corner-bottom-left::before{content:"";display:inline-block;box-sizing:border-box;width:0;height:0;border-bottom:20px solid #000;border-right:20px solid transparent}.oci-plus-square::before{content:"﹢";display:inline-block;width:16px;height:16px;text-align:center;line-height:16px;background-color:#000;color:#fff;font-weight:700}.oci-minus-square::before{content:"﹣";display:inline-block;width:16px;height:16px;text-align:center;line-height:16px;background-color:#000;color:#fff;font-weight:700}.oci-arrow-square-up::before{content:"⬆";display:inline-block;width:1rem;height:1rem;text-align:center;line-height:1rem;background-color:#000;color:#fff;font-weight:700}.oci-arrow-square-down::before{content:"⬇";display:inline-block;width:1rem;height:1rem;text-align:center;line-height:1rem;background-color:#000;color:#fff;font-weight:700}.oci-info-circle::before{content:"i";display:inline-block;width:1rem;height:1rem;border-radius:.5rem;background-color:#000;color:#fff;text-align:center;font-weight:700}.oci-spinner::before{content:"";vertical-align:text-bottom;display:inline-block;box-sizing:border-box;width:1rem;height:1rem;border:.1rem solid #000;border-right-color:transparent;border-radius:.625rem;animation:oci-infinite-spinning .75s linear infinite}@keyframes oci-infinite-spinning{from{transform:rotate(0)}to{transform:rotate(360deg)}}
+.orgchart{box-sizing:border-box;display:inline-block;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;background-image:linear-gradient(to top,rgba(200,0,0,.15) 5%,rgba(0,0,0,0) 5%),linear-gradient(to right,rgba(200,0,0,.15) 5%,rgba(0,0,0,0) 5%),linear-gradient(to bottom,rgba(200,0,0,.15) 5%,rgba(0,0,0,0) 5%),linear-gradient(to left,rgba(200,0,0,.15) 5%,rgba(0,0,0,0) 5%);background-size:10px 10px;padding:20px 20px 0 20px}.orgchart .hidden,.orgchart~.hidden{display:none!important}.orgchart.b2t{transform:rotate(180deg)}.orgchart.l2r{position:absolute;transform:rotate(-90deg) rotateY(180deg);transform-origin:left top;text-align:center}.orgchart.r2l{position:absolute;transform:rotate(90deg);transform-origin:left top;text-align:center}.orgchart~.mask{position:absolute;top:0;right:0;bottom:0;left:0;z-index:999;text-align:center;background-color:rgba(0,0,0,.3)}.orgchart~.mask .spinner{position:absolute;top:calc(50% - 50px);left:calc(50% - 50px)}.orgchart>.spinner::before,.orgchart~.mask .spinner::before{width:100px;height:100px;border-width:10px;border-radius:50px;border-top-color:rgba(68,157,68,.8);border-bottom-color:rgba(68,157,68,.8);border-left-color:rgba(68,157,68,.8)}.orgchart .nodes{display:flex;list-style:none;padding-left:0;margin:0;justify-content:center}.orgchart .hierarchy{position:relative}.orgchart .hierarchy::before{content:"";position:absolute;top:-11px;left:0;width:100%;border-top:2px solid rgba(217,83,79,.8);box-sizing:border-box}.orgchart .couple:first-child:not(:only-child)::before{width:calc(100% - 69px);left:69px}.orgchart .couple:last-child:not(:only-child)::before{width:calc(50% + 71px);left:0}.orgchart .hierarchy.couple:only-child::before{width:142px;left:calc(50% - 71px)}.orgchart .hierarchy.spouse:not(.couple)::after{content:"";position:absolute;border-top:2px solid rgba(217,83,79,.8);box-sizing:border-box;z-index:0;top:24px;width:var(--ft-width);left:var(--ft-left-offset)}.orgchart .couple{white-space:nowrap}.orgchart .couple:has(>.nodes)>.node:first-child::after{content:"";position:absolute;top:24px;left:calc(100% + 1px);width:2px;height:33px;background-color:rgba(217,83,79,.8)}.orgchart .couple::after{content:"";position:absolute;border-top:2px solid rgba(217,83,79,.8);box-sizing:border-box;z-index:0;top:24px;width:20px;left:calc(50% - 10px)}.orgchart .hierarchy.isSiblingsCollapsed.left-sibs::before,.orgchart .hierarchy:first-child::before{left:calc(50% - 1px);width:calc(50% + 1px)}.orgchart .hierarchy.isSiblingsCollapsed.right-sibs::before,.orgchart .hierarchy:last-child::before{width:calc(50% + 1px)}.orgchart .hierarchy:not(.hidden):not(.spouse):only-child::before{width:2px}.orgchart .hierarchy.isChildrenCollapsed:not(.couple)>.node:has(+.nodes)::after,.orgchart .isAncestorsCollapsed:only-child::before,.orgchart .isAncestorsCollapsed>.node:not(.outsider)::before,.orgchart .isCollapsedDescendant::before,.orgchart .isCollapsedDescendant>.node::after,.orgchart .isCollapsedDescendant>.node::before,.orgchart .isCollapsedSibling .hierarchy::before,.orgchart .isCollapsedSibling::before,.orgchart .isSiblingsCollapsed.left-sibs.right-sibs::before,.orgchart .isSiblingsCollapsed.left-sibs:last-child:before,.orgchart .isSiblingsCollapsed.right-sibs:first-child:before,.orgchart .isSiblingsCollapsed:not(.left-sibs):not(.right-sibs)::before,.orgchart>.nodes>.hierarchy::before{content:none}.orgchart .hierarchy:not(.couple)>.node:has(+.nodes)::after{content:"";position:absolute;bottom:-12px;left:calc(50% - 1px);width:2px;height:10px;background-color:rgba(217,83,79,.8)}.orgchart ul li .node.allowedDrop{border-color:rgba(68,157,68,.9)}.orgchart ul li .node.currentDropTarget{background-color:rgba(68,157,68,.9)}.orgchart ul li .node.selected{background-color:rgba(238,217,54,.5)}.orgchart ul li .node:hover{background-color:rgba(238,217,54,.5)}.orgchart>ul>li>ul li>.node:not(.outsider)::before{content:"";position:absolute;top:var(--top,-12px);left:calc(50% - 1px);width:2px;height:var(--height,10px);background-color:rgba(217,83,79,.8)}.orgchart>ul>li>ul li>.node.outsider::before{content:"";position:absolute;top:var(--top,-12px);left:calc(50% - 1px);width:0;height:var(--height,10px);border-right:2px dotted rgba(217,83,79,.8)}.orgchart>ul>li>ul .isSiblingsCollapsed>.node::before{top:var(--top-cross-point,-12px);height:var(--height-cross-point,10px)}.orgchart .node{box-sizing:border-box;display:inline-block;position:relative;margin:0 0 20px 0;padding:3px;border:2px dashed transparent;text-align:center;transition:transform .3s,opacity .3s;z-index:1}.orgchart.l2r .node,.orgchart.r2l .node{width:50px;height:140px}.orgchart .node:hover{background-color:rgba(238,217,54,.5);transition:.5s;cursor:default;z-index:2}.orgchart .node.focused{background-color:rgba(238,217,54,.5)}.orgchart .ghost-node{position:fixed;left:-10000px;top:-10000px}.orgchart .ghost-node rect{fill:#fff;stroke:#bf0000}.orgchart .node.allowedDrop{border-color:rgba(68,157,68,.9)}.orgchart .node>.spinner{position:absolute;top:calc(50% - 1rem);left:calc(50% - 1rem)}.orgchart .node>.spinner::before{width:2rem;height:2rem;border-width:.2rem;border-radius:1rem;border-top-color:rgba(68,157,68,.8);border-bottom-color:rgba(68,157,68,.8);border-left-color:rgba(68,157,68,.8)}.orgchart .node .title{box-sizing:border-box;width:130px;text-align:center;font-size:12px;font-weight:700;height:20px;line-height:20px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background-color:rgba(217,83,79,.8);color:#fff;border-radius:4px 4px 0 0}.orgchart.b2t .node .title{transform:rotate(-180deg);transform-origin:center bottom}.orgchart.l2r .node .title{transform:rotate(-90deg) translate(-45px,-45px) rotateY(180deg);transform-origin:bottom center}.orgchart.r2l .node .title{transform:rotate(-90deg) translate(-45px,-45px);transform-origin:bottom center}.orgchart .node .title .parentNodeSymbol{float:left}.orgchart .node .title .parentNodeSymbol::before{color:#fff}.orgchart .node .title .parentNodeSymbol::after{background-color:#fff}.orgchart .node .content{box-sizing:border-box;width:130px;height:20px;line-height:20px;font-size:10px;border:1px solid rgba(217,83,79,.8);border-width:0 1px 1px 1px;border-radius:0 0 .25rem .25rem;text-align:center;background-color:#fff;color:#333;text-overflow:ellipsis;white-space:nowrap}.orgchart.b2t .node .content{transform:rotate(180deg);transform-origin:center top}.orgchart.l2r .node .content{transform:rotate(-90deg) translate(-45px,-45px) rotateY(180deg);transform-origin:top center;width:130px}.orgchart.r2l .node .content{transform:rotate(-90deg) translate(-45px,-45px);transform-origin:top center;width:130px}.orgchart .node .edge{position:absolute;cursor:default;transition:.2s}.orgchart .node .edge::before{border-color:rgba(68,157,68,.5)}.orgchart.noncollapsable .node .edge{display:none}.orgchart .node .edge:hover{cursor:pointer}.orgchart .edge:hover::before{border-color:#449d44}.orgchart .node .verticalEdge{width:calc(100% - 6px);height:10px;left:3px}.orgchart .node .verticalEdge::before{position:absolute;left:calc(50% - 5px)}.orgchart .node .topEdge{top:-2px}.orgchart .node .topEdge.oci-chevron-up::before{top:2px}.orgchart .node .topEdge.oci-chevron-down::before{bottom:3px}.orgchart .node .bottomEdge{bottom:-2px}.orgchart .node .bottomEdge.oci-chevron-up::before{bottom:-3px}.orgchart .node .bottomEdge.oci-chevron-down::before{bottom:1px}.orgchart .node .horizontalEdge{width:10px;height:calc(100% - 6px);top:3px}.orgchart .node .rightEdge{right:-2px}.orgchart .node .leftEdge{left:-2px}.orgchart .node .horizontalEdge::before{position:absolute;top:calc(50% - 5px)}.orgchart .node .leftEdge.oci-chevron-right::before{left:-3px}.orgchart .node .leftEdge.oci-chevron-left::before{left:1px}.orgchart .node .rightEdge.oci-chevron-left::before{right:-3px}.orgchart .node .rightEdge.oci-chevron-right::before{right:1px}.orgchart .node .toggleBtn{position:absolute;left:-2px;bottom:-2px;width:16px;height:16px}.orgchart .node .toggleBtn::before{background-color:rgba(68,157,68,.6);position:absolute;left:0;bottom:0}.orgchart .node .toggleBtn:hover::before{background-color:#449d44}.oc-export-btn{margin-left:.5rem;padding:.5rem 1rem}.orgchart .slide-down{opacity:0;transform:translateY(40px)}.orgchart.l2r .node.slide-down,.orgchart.r2l .node.slide-down{transform:translateY(130px)}.orgchart .slide-up{opacity:0;transform:translateY(-40px)}.orgchart.l2r .node.slide-up,.orgchart.r2l .node.slide-up{transform:translateY(-130px)}.orgchart .slide-right{opacity:0;transform:translateX(130px)}.orgchart.l2r .node.slide-right,.orgchart.r2l .node.slide-right{transform:translateX(40px)}.orgchart .slide-left{opacity:0;transform:translateX(-130px)}.orgchart.l2r .node.slide-left,.orgchart.r2l .node.slide-left{transform:translateX(-40px)}.orgchart .nodes.vertical{display:block;padding-left:10px}.orgchart .nodes.vertical .nodes{list-style:none;display:block;margin:0;padding-left:10px;text-align:left}.orgchart .nodes.vertical .node{margin-bottom:0}.orgchart .nodes.vertical .hierarchy .node::after,.orgchart .nodes.vertical .hierarchy .node::before{content:none}.orgchart .nodes.vertical .hierarchy{position:relative;text-align:left}.orgchart .nodes.vertical .hierarchy::after,.orgchart .nodes.vertical .hierarchy::before{box-sizing:border-box;content:'';position:absolute;left:-6px;border-color:rgba(217,83,79,.8);border-style:solid;border-width:0 0 2px 2px}.orgchart .nodes.vertical .hierarchy:only-child::before{width:11px}.orgchart .nodes.vertical .hierarchy::before{top:0;height:26px;width:11px}.orgchart .nodes.vertical .hierarchy::after{bottom:0;height:calc(100% - 24px)}.orgchart .nodes.vertical .hierarchy:last-child::after{border-width:2px 0 0 0}.orgchart .nodes.vertical>.hierarchy:first-child::before{box-sizing:border-box;top:-11px;height:35px;width:calc(50% + 2px);border-width:2px 0 0 2px}.orgchart .nodes.vertical>.hierarchy:first-child::after{box-sizing:border-box;top:24px;width:11px;border-width:2px 0 0 2px}.orgchart .nodes.vertical>.hierarchy:first-child:last-child::after{border-width:2px 0 0 0}.orgchart .node.compact{position:static;display:grid;width:140px;height:50px;background-color:#eee}.orgchart .node.compact.looseMode{display:grid;width:unset;height:unset}.orgchart .node.compact>.node{display:none}.orgchart .node.compact.looseMode>.node{display:inline-block}.orgchart .node.compact>.node.compact{position:relative}.orgchart .node.compact>.node.compact.looseMode{display:grid}.orgchart .node.compact.even,.orgchart .node.compact.even:hover{background-color:#eee}.orgchart .node.compact.odd,.orgchart .node.compact.odd:hover{background-color:#fff}.orgchart .node.compact.even>.node.focused,.orgchart .node.compact.even>.node.selected,.orgchart .node.compact.even>.node:hover{background-color:#fff}.orgchart .node.compact.odd>.node.focused,.orgchart .node.compact.odd>.node.selected,.orgchart .node.compact.odd>.node:hover{background-color:#eee}.orgchart .node.compact::before{top:var(--top-cross-point,-10px)}.orgchart .node.compact>.content{position:absolute;top:25px;left:5px}.orgchart .node.compact.looseMode>.title{margin-top:5px;margin-left:5px}.orgchart .node.compact.looseMode>.content{top:30px;left:10px}.orgchart .node.compact>.node.compact.looseMode>.title{margin-top:5px;margin-left:5px}.orgchart .node.compact>.node.compact>.content{position:absolute;top:23px;left:3px}.orgchart .node.compact>.node.compact.looseMode>.content{top:28px;left:8px}.orgchart .node.compact .node{margin-bottom:0}.orgchart .node.compact .node:has(+.nodes)::after{content:unset}.orgchart .backToCompactSymbol,.orgchart .backToLooseSymbol{cursor:pointer}.orgchart .node.compact>.backToCompactSymbol{position:absolute;top:5px;left:5px}.orgchart .node.compact.looseMode>.backToCompactSymbol{top:10px;left:10px}.orgchart .node.compact>.node.compact.looseMode>.backToCompactSymbol{top:8px;left:8px}.orgchart .node.compact>.node.compact>.backToCompactSymbol{position:absolute;top:3px;left:3px}.orgchart .node.compact>.backToLooseSymbol{position:absolute;top:25px;right:5px}.orgchart .node.compact>.node.compact>.backToLooseSymbol{position:absolute;top:23px;right:3px}.orgchart .node.compact .backToCompactSymbol::before{border-top-color:rgba(68,157,68,.6)}.orgchart .node.compact .backToLooseSymbol::before{border-bottom-color:rgba(68,157,68,.6)}.orgchart .node.compact .backToCompactSymbol:hover::before{border-top-color:#449d44}.orgchart .node.compact .backToLooseSymbol:hover::before{border-bottom-color:#449d44}.oci{display:inline-block;position:relative;font-style:normal;font-family:Arial}.oci-menu::before{content:"≡";display:inline-block;width:1rem;height:1rem;text-align:center;line-height:1rem;color:#000;font-size:1rem}.oci-chevron-up::before{content:"";box-sizing:border-box;width:10px;height:10px;display:inline-block;border:3px solid #000;transform:rotate(45deg);border-right:unset;border-bottom:unset}.oci-chevron-down::before{content:"";box-sizing:border-box;width:10px;height:10px;display:inline-block;border:3px solid #000;transform:rotate(45deg);border-top:unset;border-left:unset}.oci-chevron-left::before{content:"";box-sizing:border-box;width:10px;height:10px;display:inline-block;border:3px solid #000;transform:rotate(45deg);border-top:unset;border-right:unset}.oci-chevron-right::before{content:"";box-sizing:border-box;width:10px;height:10px;display:inline-block;border:3px solid #000;transform:rotate(45deg);border-left:unset;border-bottom:unset}.oci-corner-top-left::before{content:"";display:inline-block;border-top:20px solid #000;border-right:20px solid transparent}.oci-corner-top-right::before{content:"";display:inline-block;box-sizing:border-box;width:0;height:0;border-top:20px solid #000;border-left:20px solid transparent}.oci-corner-bottom-right::before{content:"";display:inline-block;box-sizing:border-box;width:0;height:0;border-bottom:20px solid #000;border-left:20px solid transparent}.oci-corner-bottom-left::before{content:"";display:inline-block;box-sizing:border-box;width:0;height:0;border-bottom:20px solid #000;border-right:20px solid transparent}.oci-plus-square::before{content:"﹢";display:inline-block;width:16px;height:16px;text-align:center;line-height:16px;background-color:#000;color:#fff;font-weight:700}.oci-minus-square::before{content:"﹣";display:inline-block;width:16px;height:16px;text-align:center;line-height:16px;background-color:#000;color:#fff;font-weight:700}.oci-arrow-square-up::before{content:"⬆";display:inline-block;width:1rem;height:1rem;text-align:center;line-height:1rem;background-color:#000;color:#fff;font-weight:700}.oci-arrow-square-down::before{content:"⬇";display:inline-block;width:1rem;height:1rem;text-align:center;line-height:1rem;background-color:#000;color:#fff;font-weight:700}.oci-info-circle::before{content:"i";display:inline-block;width:1rem;height:1rem;border-radius:.5rem;background-color:#000;color:#fff;text-align:center;font-weight:700}.oci-spinner::before{content:"";vertical-align:text-bottom;display:inline-block;box-sizing:border-box;width:1rem;height:1rem;border:.1rem solid #000;border-right-color:transparent;border-radius:.625rem;animation:oci-infinite-spinning .75s linear infinite}@keyframes oci-infinite-spinning{from{transform:rotate(0)}to{transform:rotate(360deg)}}