diff --git a/pom.xml b/pom.xml
index 74b2a87..b563e67 100644
--- a/pom.xml
+++ b/pom.xml
@@ -2,7 +2,7 @@
 	<modelVersion>4.0.0</modelVersion>
 	<groupId>com.flowingcode.vaadin.addons</groupId>
 	<artifactId>orgchart-addon</artifactId>
-	<version>4.2.3-SNAPSHOT</version>
+	<version>5.0.0-SNAPSHOT</version>
 	<name>OrgChart Add-on</name>
 
     <properties>
@@ -192,10 +192,7 @@
 				  <licenseName>apache_v2</licenseName>
 				  <addJavaLicenseAfterPackage>false</addJavaLicenseAfterPackage>
 				  <excludes>
-					<exclude>**/font-awesome.css</exclude>
-					<exclude>**/jquery.orgchart.js</exclude>
-					<exclude>**/jquery.orgchart.min.js</exclude>
-					<exclude>**/jquery.orgchart.min.css</exclude>
+					<exclude>**/font-awesome.css</exclude>			
 				  </excludes>
 				</configuration>
 			</plugin>
@@ -290,6 +287,7 @@
                             </execution>
                         </executions>
                     </plugin>
+                    
                     <plugin>
                         <groupId>org.apache.maven.plugins</groupId>
                         <artifactId>maven-javadoc-plugin</artifactId>
diff --git a/src/main/java/com/flowingcode/vaadin/addons/orgchart/OrgChart.java b/src/main/java/com/flowingcode/vaadin/addons/orgchart/OrgChart.java
index f6ac884..9699bce 100644
--- a/src/main/java/com/flowingcode/vaadin/addons/orgchart/OrgChart.java
+++ b/src/main/java/com/flowingcode/vaadin/addons/orgchart/OrgChart.java
@@ -28,9 +28,9 @@
 import com.vaadin.flow.component.ComponentEvent;
 import com.vaadin.flow.component.ComponentEventListener;
 import com.vaadin.flow.component.Tag;
+import com.vaadin.flow.component.dependency.CssImport;
 import com.vaadin.flow.component.dependency.JsModule;
 import com.vaadin.flow.component.dependency.NpmPackage;
-import com.vaadin.flow.component.dependency.StyleSheet;
 import com.vaadin.flow.component.html.Div;
 import com.vaadin.flow.shared.Registration;
 import java.util.List;
@@ -45,14 +45,15 @@
  * @author pbartolo
  */
 @SuppressWarnings("serial")
-// @NpmPackage(value = "orgchart", version = "2.1.4")
-@NpmPackage(value = "html2canvas", version = "^0.5.0-beta4")
-@NpmPackage(value = "jquery", version = "3.4.1")
+@NpmPackage(value = "orgchart", version = "3.7.0")
+@NpmPackage(value = "html2canvas", version = "1.4.1")
+@NpmPackage(value = "jquery", version = "3.6.2")
 @JsModule("jquery/dist/jquery.js")
-@JsModule("./orgchart/dist/js/jquery.orgchart.js")
-@StyleSheet("context://frontend/jquery.orgchart.min.css")
+@JsModule("orgchart/dist/js/jquery.orgchart.js")
+@CssImport("orgchart/dist/css/jquery.orgchart.min.css")
 @Tag("fc-orgchart")
 @JsModule("./fc-orgchart.js")
+@CssImport("./fc-orgchart-styles.css")
 public class OrgChart extends Div {
 
   private OrgChartItem orgChartItem;
diff --git a/src/main/resources/META-INF/frontend/orgchart/dist/js/jquery.orgchart.js b/src/main/resources/META-INF/frontend/orgchart/dist/js/jquery.orgchart.js
deleted file mode 100644
index b9925cf..0000000
--- a/src/main/resources/META-INF/frontend/orgchart/dist/js/jquery.orgchart.js
+++ /dev/null
@@ -1,1424 +0,0 @@
-/*
- * jQuery OrgChart Plugin
- * https://github.com/dabeng/OrgChart
- *
- * Copyright 2016, dabeng
- * https://github.com/dabeng
- *
- * Licensed under the MIT license:
- * http://www.opensource.org/licenses/MIT
- */
-'use strict';
-
-import jQuery from "jquery";
-
-(function (factory) {
-  if (typeof module === 'object' && typeof module.exports === 'object') {
-    factory(jQuery, window, document);
-  } else {
-    factory(jQuery, window, document);
-  }
-}(function ($, window, document, undefined) {
-  var OrgChart = function (elem, opts) {
-    this.$chartContainer = $(elem);
-    this.opts = opts;
-    this.defaultOptions = {
-      'nodeTitle': 'name',
-      'nodeId': 'id',
-      'toggleSiblingsResp': false,
-      'visibleLevel': 999,
-      'chartClass': '',
-      'exportButton': false,
-      'exportFilename': 'OrgChart',
-      'exportFileextension': 'png',
-      'parentNodeSymbol': 'fa-users',
-      'draggable': false,
-      'direction': 't2b',
-      'pan': false,
-      'zoom': false,
-      'zoominLimit': 7,
-      'zoomoutLimit': 0.5
-    };
-  };
-  //
-  OrgChart.prototype = {
-    //
-    init: function (opts) {
-      var that = this;
-      this.options = $.extend({}, this.defaultOptions, this.opts, opts);
-      // build the org-chart
-      var $chartContainer = this.$chartContainer;
-      if (this.$chart) {
-        this.$chart.remove();
-      }
-      var data = this.options.data;
-      var $chart = this.$chart = $('<div>', {
-        'data': { 'options': this.options },
-        'class': 'orgchart' + (this.options.chartClass !== '' ? ' ' + this.options.chartClass : '') + (this.options.direction !== 't2b' ? ' ' + this.options.direction : ''),
-        'click': function(event) {
-          if (!$(event.target).closest('.node').length) {
-            $chart.find('.node.focused').removeClass('focused');
-          }
-        }
-      });
-      if (typeof MutationObserver !== 'undefined') {
-        this.triggerInitEvent();
-      }
-      if ($.type(data) === 'object') {
-        if (data instanceof $) { // ul datasource
-          this.buildHierarchy($chart, this.buildJsonDS(data.children()), 0, this.options);
-        } else { // local json datasource
-          this.buildHierarchy($chart, this.options.ajaxURL ? data : this.attachRel(data, '00'));
-        }
-      } else {
-        $chart.append('<i class="fa fa-circle-o-notch fa-spin spinner"></i>');
-        $.ajax({
-          'url': data,
-          'dataType': 'json'
-        })
-        .done(function(data, textStatus, jqXHR) {
-          that.buildHierarchy($chart, that.options.ajaxURL ? data : that.attachRel(data, '00'), 0, that.options);
-        })
-        .fail(function(jqXHR, textStatus, errorThrown) {
-          console.log(errorThrown);
-        })
-        .always(function() {
-          $chart.children('.spinner').remove();
-        });
-      }
-      $chartContainer.append($chart);
-
-      // append the export button
-      if (this.options.exportButton && !$chartContainer.find('.oc-export-btn').length) {
-        this.attachExportButton();
-      }
-
-      if (this.options.pan) {
-        this.bindPan();
-      }
-
-      if (this.options.zoom) {
-        this.bindZoom();
-      }
-
-      return this;
-    },
-    //
-    triggerInitEvent: function () {
-      var that = this;
-      var mo = new MutationObserver(function (mutations) {
-        mo.disconnect();
-        initTime:
-        for (var i = 0; i < mutations.length; i++) {
-          for (var j = 0; j < mutations[i].addedNodes.length; j++) {
-            if (mutations[i].addedNodes[j].classList.contains('orgchart')) {
-              if (that.options.initCompleted && typeof that.options.initCompleted === 'function') {
-                that.options.initCompleted(that.$chart);
-                var initEvent = $.Event('init.orgchart');
-                that.$chart.trigger(initEvent);
-                break initTime;
-              }
-            }
-          }
-        }
-      });
-      mo.observe(this.$chartContainer[0], { childList: true });
-    },
-    //
-    attachExportButton: function () {
-      var that = this;
-      var $exportBtn = $('<button>', {
-        'class': 'oc-export-btn' + (this.options.chartClass !== '' ? ' ' + this.options.chartClass : ''),
-        'text': 'Export',
-        'click': function(e) {
-          e.preventDefault();
-          that.export();
-        }
-      });
-      this.$chartContainer.append($exportBtn);
-    },
-    setOptions: function (opts, val) {
-      if (typeof opts === 'string') {
-        if (opts === 'pan') {
-          if (val) {
-            this.bindPan();
-          } else {
-            this.unbindPan();
-          }
-        }
-        if (opts === 'zoom') {
-          if (val) {
-            this.bindZoom();
-          } else {
-            this.unbindZoom();
-          }
-        }
-      }
-      if (typeof opts === 'object') {
-        if (opts.data) {
-          this.init(opts);
-        } else {
-          if (typeof opts.pan !== 'undefined') {
-            if (opts.pan) {
-              this.bindPan();
-            } else {
-              this.unbindPan();
-            }
-          }
-          if (typeof opts.zoom !== 'undefined') {
-            if (opts.zoom) {
-              this.bindZoom();
-            } else {
-              this.unbindZoom();
-            }
-          }
-        }
-      }
-
-      return this;
-    },
-    //
-    panStartHandler: function (e) {
-      var $chart = $(e.delegateTarget);
-      if ($(e.target).closest('.node').length || (e.touches && e.touches.length > 1)) {
-        $chart.data('panning', false);
-        return;
-      } else {
-        $chart.css('cursor', 'move').data('panning', true);
-      }
-      var lastX = 0;
-      var lastY = 0;
-      var lastTf = $chart.css('transform');
-      if (lastTf !== 'none') {
-        var temp = lastTf.split(',');
-        if (lastTf.indexOf('3d') === -1) {
-          lastX = parseInt(temp[4]);
-          lastY = parseInt(temp[5]);
-        } else {
-          lastX = parseInt(temp[12]);
-          lastY = parseInt(temp[13]);
-        }
-      }
-      var startX = 0;
-      var startY = 0;
-      if (!e.targetTouches) { // pand on desktop
-        startX = e.pageX - lastX;
-        startY = e.pageY - lastY;
-      } else if (e.targetTouches.length === 1) { // pan on mobile device
-        startX = e.targetTouches[0].pageX - lastX;
-        startY = e.targetTouches[0].pageY - lastY;
-      } else if (e.targetTouches.length > 1) {
-        return;
-      }
-      $chart.on('mousemove touchmove',function(e) {
-        if (!$chart.data('panning')) {
-          return;
-        }
-        var newX = 0;
-        var newY = 0;
-        if (!e.targetTouches) { // pand on desktop
-          newX = e.pageX - startX;
-          newY = e.pageY - startY;
-        } else if (e.targetTouches.length === 1) { // pan on mobile device
-          newX = e.targetTouches[0].pageX - startX;
-          newY = e.targetTouches[0].pageY - startY;
-        } else if (e.targetTouches.length > 1) {
-          return;
-        }
-        var lastTf = $chart.css('transform');
-        if (lastTf === 'none') {
-          if (lastTf.indexOf('3d') === -1) {
-            $chart.css('transform', 'matrix(1, 0, 0, 1, ' + newX + ', ' + newY + ')');
-          } else {
-            $chart.css('transform', 'matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, ' + newX + ', ' + newY + ', 0, 1)');
-          }
-        } else {
-          var matrix = lastTf.split(',');
-          if (lastTf.indexOf('3d') === -1) {
-            matrix[4] = ' ' + newX;
-            matrix[5] = ' ' + newY + ')';
-          } else {
-            matrix[12] = ' ' + newX;
-            matrix[13] = ' ' + newY;
-          }
-          $chart.css('transform', matrix.join(','));
-        }
-      });
-    },
-    //
-    panEndHandler: function (e) {
-      if (e.data.chart.data('panning')) {
-        e.data.chart.data('panning', false).css('cursor', 'default').off('mousemove');
-      }
-    },
-    //
-    bindPan: function () {
-      this.$chartContainer.css('overflow', 'hidden');
-      this.$chart.on('mousedown touchstart', this.panStartHandler);
-      $(document).on('mouseup touchend', { 'chart': this.$chart }, this.panEndHandler);
-    },
-    //
-    unbindPan: function () {
-      this.$chartContainer.css('overflow', 'auto');
-      this.$chart.off('mousedown touchstart', this.panStartHandler);
-      $(document).off('mouseup touchend', this.panEndHandler);
-    },
-    //
-    zoomWheelHandler: function (e) {
-      var oc = e.data.oc;
-      e.preventDefault();
-      var newScale  = 1 + (e.originalEvent.deltaY > 0 ? -0.2 : 0.2);
-      oc.setChartScale(oc.$chart, newScale);
-    },
-    //
-    zoomStartHandler: function (e) {
-      if(e.touches && e.touches.length === 2) {
-        var oc = e.data.oc;
-        oc.$chart.data('pinching', true);
-        var dist = oc.getPinchDist(e);
-        oc.$chart.data('pinchDistStart', dist);
-      }
-    },
-    zoomingHandler: function (e) {
-      var oc = e.data.oc;
-      if(oc.$chart.data('pinching')) {
-        var dist = oc.getPinchDist(e);
-        oc.$chart.data('pinchDistEnd', dist);
-      }
-    },
-    zoomEndHandler: function (e) {
-      var oc = e.data.oc;
-      if(oc.$chart.data('pinching')) {
-        oc.$chart.data('pinching', false);
-        var diff = oc.$chart.data('pinchDistEnd') - oc.$chart.data('pinchDistStart');
-        if (diff > 0) {
-          oc.setChartScale(oc.$chart, 1.2);
-        } else if (diff < 0) {
-          oc.setChartScale(oc.$chart, 0.8);
-        }
-      }
-    },
-    //
-    bindZoom: function () {
-      this.$chartContainer.on('wheel', { 'oc': this }, this.zoomWheelHandler);
-      this.$chartContainer.on('touchstart', { 'oc': this }, this.zoomStartHandler);
-      $(document).on('touchmove', { 'oc': this }, this.zoomingHandler);
-      $(document).on('touchend', { 'oc': this }, this.zoomEndHandler);
-    },
-    unbindZoom: function () {
-      this.$chartContainer.off('wheel', this.zoomWheelHandler);
-      this.$chartContainer.off('touchstart', this.zoomStartHandler);
-      $(document).off('touchmove', this.zoomingHandler);
-      $(document).off('touchend', this.zoomEndHandler);
-    },
-    //
-    getPinchDist: function (e) {
-      return Math.sqrt((e.touches[0].clientX - e.touches[1].clientX) * (e.touches[0].clientX - e.touches[1].clientX) +
-      (e.touches[0].clientY - e.touches[1].clientY) * (e.touches[0].clientY - e.touches[1].clientY));
-    },
-    //
-    setChartScale: function ($chart, newScale) {
-      var opts = $chart.data('options');
-      var lastTf = $chart.css('transform');
-      var matrix = '';
-      var targetScale = 1;
-      if (lastTf === 'none') {
-        $chart.css('transform', 'scale(' + newScale + ',' + newScale + ')');
-      } else {
-        matrix = lastTf.split(',');
-        if (lastTf.indexOf('3d') === -1) {
-          targetScale = Math.abs(window.parseFloat(matrix[3]) * newScale);
-          if (targetScale > opts.zoomoutLimit && targetScale < opts.zoominLimit) {
-            $chart.css('transform', lastTf + ' scale(' + newScale + ',' + newScale + ')');
-          }
-        } else {
-          targetScale = Math.abs(window.parseFloat(matrix[1]) * newScale);
-          if (targetScale > opts.zoomoutLimit && targetScale < opts.zoominLimit) {
-            $chart.css('transform', lastTf + ' scale3d(' + newScale + ',' + newScale + ', 1)');
-          }
-        }
-      }
-    },
-    //
-    buildJsonDS: function ($li) {
-      var that = this;
-      var subObj = {
-        'name': $li.contents().eq(0).text().trim(),
-        'relationship': ($li.parent().parent().is('li') ? '1': '0') + ($li.siblings('li').length ? 1: 0) + ($li.children('ul').length ? 1 : 0)
-      };
-      $.each($li.data(), function(key, value) {
-         subObj[key] = value;
-      });
-      $li.children('ul').children().each(function() {
-        if (!subObj.children) { subObj.children = []; }
-        subObj.children.push(that.buildJsonDS($(this)));
-      });
-      return subObj;
-    },
-    //
-    attachRel: function (data, flags) {
-      var that = this;
-      data.relationship = flags + (data.children && data.children.length > 0 ? 1 : 0);
-      if (data.children) {
-        data.children.forEach(function(item) {
-          that.attachRel(item, '1' + (data.children.length > 1 ? 1 : 0));
-        });
-      }
-      return data;
-    },
-    //
-    loopChart: function ($chart) {
-      var that = this;
-      var $tr = $chart.find('tr:first');
-      var subObj = { 'id': $tr.find('.node')[0].id };
-      $tr.siblings(':last').children().each(function() {
-        if (!subObj.children) { subObj.children = []; }
-        subObj.children.push(that.loopChart($(this)));
-      });
-      return subObj;
-    },
-    //
-    getHierarchy: function () {
-      if (typeof this.$chart === 'undefined') {
-        return 'Error: orgchart does not exist'
-      } else {
-        if (!this.$chart.find('.node').length) {
-          return 'Error: nodes do not exist'
-        } else {
-          var valid = true;
-          this.$chart.find('.node').each(function () {
-            if (!this.id) {
-              valid = false;
-              return false;
-            }
-          });
-          if (!valid) {
-            return 'Error: All nodes of orghcart to be exported must have data-id attribute!';
-          }
-        }
-      }
-      return this.loopChart(this.$chart);
-    },
-    // detect the exist/display state of related node
-    getNodeState: function ($node, relation) {
-      var $target = {};
-      var relation = relation || 'self';
-      if (relation === 'parent') {
-        $target = $node.closest('.nodes').siblings(':first');
-        if ($target.length) {
-          if ($target.is('.hidden') || (!$target.is('.hidden') && $target.closest('.nodes').is('.hidden'))) {
-            return { 'exist': true, 'visible': false };
-          }
-          return { 'exist': true, 'visible': true };
-        }
-      } else if (relation === 'children') {
-        $target = $node.closest('tr').siblings(':last');
-        if ($target.length) {
-          if (!$target.is('.hidden')) {
-            return { 'exist': true, 'visible': true };
-          }
-          return { 'exist': true, 'visible': false };
-        }
-      } else if (relation === 'siblings') {
-        $target = $node.closest('table').parent().siblings();
-        if ($target.length) {
-          if (!$target.is('.hidden') && !$target.parent().is('.hidden')) {
-            return { 'exist': true, 'visible': true };
-          }
-          return { 'exist': true, 'visible': false };
-        }
-      } else {
-        $target = $node;
-        if ($target.length) {
-          if (!(($target.closest('.nodes').length && $target.closest('.nodes').is('.hidden')) ||
-            ($target.closest('table').parent().length && $target.closest('table').parent().is('.hidden')) ||
-            ($target.parent().is('li') && ($target.closest('ul').is('.hidden') || $target.closest('verticalNodes').is('.hidden')))
-          )) {
-            return { 'exist': true, 'visible': true };
-          }
-          return { 'exist': true, 'visible': false };
-        }
-      }
-      return { 'exist': false, 'visible': false };
-    },
-    // find the related nodes
-    getRelatedNodes: function ($node, relation) {
-      if (!$node || !($node instanceof $) || !$node.is('.node')) {
-        return $();
-      }
-      if (relation === 'parent') {
-        return $node.closest('.nodes').parent().children(':first').find('.node');
-      } else if (relation === 'children') {
-        return $node.closest('tr').siblings('.nodes').children().find('.node:first');
-      } else if (relation === 'siblings') {
-        return $node.closest('table').parent().siblings().find('.node:first');
-      } else {
-        return $();
-      }
-    },
-    hideParentEnd: function (event) {
-      $(event.target).removeClass('sliding');
-      event.data.upperLevel.addClass('hidden').slice(1).removeAttr('style');
-    },
-    // recursively hide the ancestor node and sibling nodes of the specified node
-    hideParent: function ($node) {
-      var $upperLevel = $node.closest('.nodes').siblings();
-      if ($upperLevel.eq(0).find('.spinner').length) {
-        $node.closest('.orgchart').data('inAjax', false);
-      }
-      // hide the sibling nodes
-      if (this.getNodeState($node, 'siblings').visible) {
-        this.hideSiblings($node);
-      }
-      // hide the lines
-      var $lines = $upperLevel.slice(1);
-      $lines.css('visibility', 'hidden');
-      // hide the superior nodes with transition
-      var $parent = $upperLevel.eq(0).find('.node');
-      if (this.getNodeState($parent).visible) {
-        $parent.addClass('sliding slide-down').one('transitionend', { 'upperLevel': $upperLevel }, this.hideParentEnd);
-      }
-      // if the current node has the parent node, hide it recursively
-      if (this.getNodeState($parent, 'parent').visible) {
-        this.hideParent($parent);
-      }
-    },
-    showParentEnd: function (event) {
-      var $node = event.data.node;
-      $(event.target).removeClass('sliding');
-      if (this.isInAction($node)) {
-        this.switchVerticalArrow($node.children('.topEdge'));
-      }
-    },
-    // show the parent node of the specified node
-    showParent: function ($node) {
-      // just show only one superior level
-      var $upperLevel = $node.closest('.nodes').siblings().removeClass('hidden');
-      // just show only one line
-      $upperLevel.eq(2).children().slice(1, -1).addClass('hidden');
-      // show parent node with animation
-      var $parent = $upperLevel.eq(0).find('.node');
-      this.repaint($parent[0]);
-      $parent.addClass('sliding').removeClass('slide-down').one('transitionend', { 'node': $node }, this.showParentEnd.bind(this));
-    },
-    stopAjax: function ($nodeLevel) {
-      if ($nodeLevel.find('.spinner').length) {
-        $nodeLevel.closest('.orgchart').data('inAjax', false);
-      }
-    },
-    isVisibleNode: function (index, elem) {
-      return this.getNodeState($(elem)).visible;
-    },
-    //
-    hideChildrenEnd: function (event) {
-      var $node = event.data.node;
-      event.data.animatedNodes.removeClass('sliding');
-      if (event.data.isVerticalDesc) {
-        event.data.lowerLevel.addClass('hidden');
-      } else {
-        event.data.animatedNodes.closest('.nodes').prevAll('.lines').removeAttr('style').addBack().addClass('hidden');
-        event.data.lowerLevel.last().find('.verticalNodes').addClass('hidden');
-      }
-      if (this.isInAction($node)) {
-        this.switchVerticalArrow($node.children('.bottomEdge'));
-      }
-    },
-    // recursively hide the descendant nodes of the specified node
-    hideChildren: function ($node) {
-      var $lowerLevel = $node.closest('tr').siblings();
-      this.stopAjax($lowerLevel.last());
-      var $animatedNodes = $lowerLevel.last().find('.node').filter(this.isVisibleNode.bind(this));
-      var isVerticalDesc = $lowerLevel.last().is('.verticalNodes') ? true : false;
-      if (!isVerticalDesc) {
-        $animatedNodes.closest('table').closest('tr').prevAll('.lines').css('visibility', 'hidden');
-      }
-      this.repaint($animatedNodes.get(0));
-      $animatedNodes.addClass('sliding slide-up').eq(0).one('transitionend', { 'animatedNodes': $animatedNodes, 'lowerLevel': $lowerLevel, 'isVerticalDesc': isVerticalDesc, 'node': $node }, this.hideChildrenEnd.bind(this));
-    },
-    //
-    showChildrenEnd: function (event) {
-      var $node = event.data.node;
-      event.data.animatedNodes.removeClass('sliding');
-      if (this.isInAction($node)) {
-        this.switchVerticalArrow($node.children('.bottomEdge'));
-      }
-    },
-    // show the children nodes of the specified node
-    showChildren: function ($node) {
-      var that = this;
-      var $levels = $node.closest('tr').siblings();
-      var isVerticalDesc = $levels.is('.verticalNodes') ? true : false;
-      var $animatedNodes = isVerticalDesc
-        ? $levels.removeClass('hidden').find('.node').filter(this.isVisibleNode.bind(this))
-        : $levels.removeClass('hidden').eq(2).children().find('.node:first').filter(this.isVisibleNode.bind(this));
-      // the two following statements are used to enforce browser to repaint
-      this.repaint($animatedNodes.get(0));
-      $animatedNodes.addClass('sliding').removeClass('slide-up').eq(0).one('transitionend', { 'node': $node, 'animatedNodes': $animatedNodes }, this.showChildrenEnd.bind(this));
-    },
-    //
-    hideSiblingsEnd: function (event) {
-      var $node = event.data.node;
-      var $nodeContainer = event.data.nodeContainer;
-      var direction = event.data.direction;
-      event.data.lines.removeAttr('style');
-      var $siblings = direction ? (direction === 'left' ? $nodeContainer.prevAll(':not(.hidden)') : $nodeContainer.nextAll(':not(.hidden)')) : $nodeContainer.siblings();
-      $nodeContainer.closest('.nodes').prev().children(':not(.hidden)')
-        .slice(1, direction ? $siblings.length * 2 + 1 : -1).addClass('hidden');
-      event.data.animatedNodes.removeClass('sliding');
-      $siblings.find('.node:gt(0)').filter(this.isVisibleNode.bind(this))
-        .removeClass('slide-left slide-right').addClass('slide-up');
-      $siblings.find('.lines, .nodes, .verticalNodes').addClass('hidden')
-        .end().addClass('hidden');
-
-      if (this.isInAction($node)) {
-        this.switchHorizontalArrow($node);
-      }
-    },
-    // hide the sibling nodes of the specified node
-    hideSiblings: function ($node, direction) {
-      var that = this;
-      var $nodeContainer = $node.closest('table').parent();
-      if ($nodeContainer.siblings().find('.spinner').length) {
-        $node.closest('.orgchart').data('inAjax', false);
-      }
-      if (direction) {
-        if (direction === 'left') {
-          $nodeContainer.prevAll().find('.node').filter(this.isVisibleNode.bind(this)).addClass('sliding slide-right');
-        } else {
-          $nodeContainer.nextAll().find('.node').filter(this.isVisibleNode.bind(this)).addClass('sliding slide-left');
-        }
-      } else {
-        $nodeContainer.prevAll().find('.node').filter(this.isVisibleNode.bind(this)).addClass('sliding slide-right');
-        $nodeContainer.nextAll().find('.node').filter(this.isVisibleNode.bind(this)).addClass('sliding slide-left');
-      }
-      var $animatedNodes = $nodeContainer.siblings().find('.sliding');
-      var $lines = $animatedNodes.closest('.nodes').prevAll('.lines').css('visibility', 'hidden');
-      $animatedNodes.eq(0).one('transitionend', { 'node': $node, 'nodeContainer': $nodeContainer, 'direction': direction, 'animatedNodes': $animatedNodes, 'lines': $lines }, this.hideSiblingsEnd.bind(this));
-    },
-    //
-    showSiblingsEnd: function (event) {
-      var $node = event.data.node;
-      event.data.visibleNodes.removeClass('sliding');
-      if (this.isInAction($node)) {
-        this.switchHorizontalArrow($node);
-        $node.children('.topEdge').removeClass('fa-chevron-up').addClass('fa-chevron-down');
-      }
-    },
-    //
-    showRelatedParentEnd: function(event) {
-      $(event.target).removeClass('sliding');
-    },
-    // show the sibling nodes of the specified node
-    showSiblings: function ($node, direction) {
-      var that = this;
-      // firstly, show the sibling td tags
-      var $siblings = $();
-      if (direction) {
-        if (direction === 'left') {
-          $siblings = $node.closest('table').parent().prevAll().removeClass('hidden');
-        } else {
-          $siblings = $node.closest('table').parent().nextAll().removeClass('hidden');
-        }
-      } else {
-        $siblings = $node.closest('table').parent().siblings().removeClass('hidden');
-      }
-      // secondly, show the lines
-      var $upperLevel = $node.closest('table').closest('tr').siblings();
-      if (direction) {
-        $upperLevel.eq(2).children('.hidden').slice(0, $siblings.length * 2).removeClass('hidden');
-      } else {
-        $upperLevel.eq(2).children('.hidden').removeClass('hidden');
-      }
-      // thirdly, do some cleaning stuff
-      if (!this.getNodeState($node, 'parent').visible) {
-        $upperLevel.removeClass('hidden');
-        var parent = $upperLevel.find('.node')[0];
-        this.repaint(parent);
-        $(parent).addClass('sliding').removeClass('slide-down').one('transitionend', this.showRelatedParentEnd);
-      }
-      // lastly, show the sibling nodes with animation
-      var $visibleNodes = $siblings.find('.node').filter(this.isVisibleNode.bind(this));
-      this.repaint($visibleNodes.get(0));
-      $visibleNodes.addClass('sliding').removeClass('slide-left slide-right');
-      $visibleNodes.eq(0).one('transitionend', { 'node': $node, 'visibleNodes': $visibleNodes }, this.showSiblingsEnd.bind(this));
-    },
-    // start up loading status for requesting new nodes
-    startLoading: function ($edge) {
-      var $chart = this.$chart;
-      if (typeof $chart.data('inAjax') !== 'undefined' && $chart.data('inAjax') === true) {
-        return false;
-      }
-
-      $edge.addClass('hidden');
-      $edge.parent().append('<i class="fa fa-circle-o-notch fa-spin spinner"></i>')
-        .children().not('.spinner').css('opacity', 0.2);
-      $chart.data('inAjax', true);
-      $('.oc-export-btn' + (this.options.chartClass !== '' ? '.' + this.options.chartClass : '')).prop('disabled', true);
-      return true;
-    },
-    // terminate loading status for requesting new nodes
-    endLoading: function ($edge) {
-      var $node = $edge.parent();
-      $edge.removeClass('hidden');
-      $node.find('.spinner').remove();
-      $node.children().removeAttr('style');
-      this.$chart.data('inAjax', false);
-      $('.oc-export-btn' + (this.options.chartClass !== '' ? '.' + this.options.chartClass : '')).prop('disabled', false);
-    },
-    // whether the cursor is hovering over the node
-    isInAction: function ($node) {
-      return $node.children('.edge').attr('class').indexOf('fa-') > -1 ? true : false;
-    },
-    //
-    switchVerticalArrow: function ($arrow) {
-      $arrow.toggleClass('fa-chevron-up').toggleClass('fa-chevron-down');
-    },
-    //
-    switchHorizontalArrow: function ($node) {
-      var opts = this.options;
-      if (opts.toggleSiblingsResp && (typeof opts.ajaxURL === 'undefined' || $node.closest('.nodes').data('siblingsLoaded'))) {
-        var $prevSib = $node.closest('table').parent().prev();
-        if ($prevSib.length) {
-          if ($prevSib.is('.hidden')) {
-            $node.children('.leftEdge').addClass('fa-chevron-left').removeClass('fa-chevron-right');
-          } else {
-            $node.children('.leftEdge').addClass('fa-chevron-right').removeClass('fa-chevron-left');
-          }
-        }
-        var $nextSib = $node.closest('table').parent().next();
-        if ($nextSib.length) {
-          if ($nextSib.is('.hidden')) {
-            $node.children('.rightEdge').addClass('fa-chevron-right').removeClass('fa-chevron-left');
-          } else {
-            $node.children('.rightEdge').addClass('fa-chevron-left').removeClass('fa-chevron-right');
-          }
-        }
-      } else {
-        var $sibs = $node.closest('table').parent().siblings();
-        var sibsVisible = $sibs.length ? !$sibs.is('.hidden') : false;
-        $node.children('.leftEdge').toggleClass('fa-chevron-right', sibsVisible).toggleClass('fa-chevron-left', !sibsVisible);
-        $node.children('.rightEdge').toggleClass('fa-chevron-left', sibsVisible).toggleClass('fa-chevron-right', !sibsVisible);
-      }
-    },
-    //
-    repaint: function (node) {
-      if (node) {
-        node.style.offsetWidth = node.offsetWidth;
-      }
-    },
-    //
-    nodeEnterLeaveHandler: function (event) {
-      var $node = $(event.delegateTarget), flag = false;
-      var $topEdge = $node.children('.topEdge');
-      var $rightEdge = $node.children('.rightEdge');
-      var $bottomEdge = $node.children('.bottomEdge');
-      var $leftEdge = $node.children('.leftEdge');
-      if (event.type === 'mouseenter') {
-        if ($topEdge.length) {
-          flag = this.getNodeState($node, 'parent').visible;
-          $topEdge.toggleClass('fa-chevron-up', !flag).toggleClass('fa-chevron-down', flag);
-        }
-        if ($bottomEdge.length) {
-          flag = this.getNodeState($node, 'children').visible;
-          $bottomEdge.toggleClass('fa-chevron-down', !flag).toggleClass('fa-chevron-up', flag);
-        }
-        if ($leftEdge.length) {
-          this.switchHorizontalArrow($node);
-        }
-      } else {
-        $node.children('.edge').removeClass('fa-chevron-up fa-chevron-down fa-chevron-right fa-chevron-left');
-      }
-    },
-    //
-    nodeClickHandler: function (event) {
-      this.$chart.find('.focused').removeClass('focused');
-      $(event.delegateTarget).addClass('focused');
-    },
-    // load new nodes by ajax
-    loadNodes: function (rel, url, $edge) {
-      var that = this;
-      var opts = this.options;
-      $.ajax({ 'url': url, 'dataType': 'json' })
-      .done(function (data) {
-        if (that.$chart.data('inAjax')) {
-          if (rel === 'parent') {
-            if (!$.isEmptyObject(data)) {
-              that.addParent($edge.parent(), data);
-            }
-          } else if (rel === 'children') {
-            if (data.children.length) {
-              that.addChildren($edge.parent(), data[rel]);
-            }
-          } else {
-            that.addSiblings($edge.parent(), data.siblings ? data.siblings : data);
-          }
-        }
-      })
-      .fail(function () {
-        console.log('Failed to get ' + rel + ' data');
-      })
-      .always(function () {
-        that.endLoading($edge);
-      });
-    },
-    //
-    HideFirstParentEnd: function (event) {
-      var $topEdge = event.data.topEdge;
-      var $node = $topEdge.parent();
-      if (this.isInAction($node)) {
-        this.switchVerticalArrow($topEdge);
-        this.switchHorizontalArrow($node);
-      }
-    },
-    //
-    topEdgeClickHandler: function (event) {
-      event.stopPropagation();
-      var that = this;
-      var $topEdge = $(event.target);
-      var $node = $(event.delegateTarget);
-      var parentState = this.getNodeState($node, 'parent');
-      if (parentState.exist) {
-        var $parent = $node.closest('table').closest('tr').siblings(':first').find('.node');
-        if ($parent.is('.sliding')) { return; }
-        // hide the ancestor nodes and sibling nodes of the specified node
-        if (parentState.visible) {
-          this.hideParent($node);
-          $parent.one('transitionend', { 'topEdge': $topEdge }, this.HideFirstParentEnd.bind(this));
-        } else { // show the ancestors and siblings
-          this.showParent($node);
-        }
-      } else { // load the new parent node of the specified node by ajax request
-        // start up loading status
-        if (this.startLoading($topEdge)) {
-          var opts = this.options;
-          var url = $.isFunction(opts.ajaxURL.parent) ? opts.ajaxURL.parent($node.data('nodeData')) : opts.ajaxURL.parent + $node[0].id;
-          this.loadNodes('parent', url, $topEdge);
-        }
-      }
-    },
-    //
-    bottomEdgeClickHandler: function (event) {
-      event.stopPropagation();
-      var $bottomEdge = $(event.target);
-      var $node = $(event.delegateTarget);
-      var childrenState = this.getNodeState($node, 'children');
-      if (childrenState.exist) {
-        var $children = $node.closest('tr').siblings(':last');
-        if ($children.find('.sliding').length) { return; }
-        // hide the descendant nodes of the specified node
-        if (childrenState.visible) {
-          this.hideChildren($node);
-        } else { // show the descendants
-          this.showChildren($node);
-        }
-      } else { // load the new children nodes of the specified node by ajax request
-        if (this.startLoading($bottomEdge)) {
-          var opts = this.options;
-          var url = $.isFunction(opts.ajaxURL.children) ? opts.ajaxURL.children($node.data('nodeData')) : opts.ajaxURL.children + $node[0].id;
-          this.loadNodes('children', url, $bottomEdge);
-        }
-      }
-    },
-    //
-    hEdgeClickHandler: function (event) {
-      event.stopPropagation();
-      var $hEdge = $(event.target);
-      var $node = $(event.delegateTarget);
-      var opts = this.options;
-      var siblingsState = this.getNodeState($node, 'siblings');
-      if (siblingsState.exist) {
-        var $siblings = $node.closest('table').parent().siblings();
-        if ($siblings.find('.sliding').length) { return; }
-        if (opts.toggleSiblingsResp) {
-          var $prevSib = $node.closest('table').parent().prev();
-          var $nextSib = $node.closest('table').parent().next();
-          if ($hEdge.is('.leftEdge')) {
-            if ($prevSib.is('.hidden')) {
-              this.showSiblings($node, 'left');
-            } else {
-              this.hideSiblings($node, 'left');
-            }
-          } else {
-            if ($nextSib.is('.hidden')) {
-              this.showSiblings($node, 'right');
-            } else {
-              this.hideSiblings($node, 'right');
-            }
-          }
-        } else {
-          if (siblingsState.visible) {
-            this.hideSiblings($node);
-          } else {
-            this.showSiblings($node);
-          }
-        }
-      } else {
-        // load the new sibling nodes of the specified node by ajax request
-        if (this.startLoading($hEdge)) {
-          var nodeId = $node[0].id;
-          var url = (this.getNodeState($node, 'parent').exist) ?
-            ($.isFunction(opts.ajaxURL.siblings) ? opts.ajaxURL.siblings($node.data('nodeData')) : opts.ajaxURL.siblings + nodeId) :
-            ($.isFunction(opts.ajaxURL.families) ? opts.ajaxURL.families($node.data('nodeData')) : opts.ajaxURL.families + nodeId);
-          this.loadNodes('siblings', url, $hEdge);
-        }
-      }
-    },
-    //
-    expandVNodesEnd: function (event) {
-      event.data.vNodes.removeClass('sliding');
-    },
-    //
-    collapseVNodesEnd: function (event) {
-      event.data.vNodes.removeClass('sliding').closest('ul').addClass('hidden');
-    },
-    // event handler for toggle buttons in Hybrid(horizontal + vertical) OrgChart
-    toggleVNodes: function (event) {
-      var $toggleBtn = $(event.target);
-      var $descWrapper = $toggleBtn.parent().next();
-      var $descendants = $descWrapper.find('.node');
-      var $children = $descWrapper.children().children('.node');
-      if ($children.is('.sliding')) { return; }
-      $toggleBtn.toggleClass('fa-plus-square fa-minus-square');
-      if ($descendants.eq(0).is('.slide-up')) {
-        $descWrapper.removeClass('hidden');
-        this.repaint($children.get(0));
-        $children.addClass('sliding').removeClass('slide-up').eq(0).one('transitionend', { 'vNodes': $children }, this.expandVNodesEnd);
-      } else {
-        $descendants.addClass('sliding slide-up').eq(0).one('transitionend', { 'vNodes': $descendants }, this.collapseVNodesEnd);
-        $descendants.find('.toggleBtn').removeClass('fa-minus-square').addClass('fa-plus-square');
-      }
-    },
-    //
-    createGhostNode: function (event) {
-      var $nodeDiv = $(event.target);
-      var opts = this.options;
-      var origEvent = event.originalEvent;
-      var isFirefox = /firefox/.test(window.navigator.userAgent.toLowerCase());
-      var ghostNode, nodeCover;
-      if (!document.querySelector('.ghost-node')) {
-        ghostNode = document.createElementNS("http://www.w3.org/2000/svg", "svg");
-        ghostNode.classList.add('ghost-node');
-        nodeCover = document.createElementNS('http://www.w3.org/2000/svg','rect');
-        ghostNode.appendChild(nodeCover);
-        $nodeDiv.closest('.orgchart').append(ghostNode);
-      } else {
-        ghostNode = $nodeDiv.closest('.orgchart').children('.ghost-node').get(0);
-        nodeCover = $(ghostNode).children().get(0);
-      }
-      var transValues = $nodeDiv.closest('.orgchart').css('transform').split(',');
-      var isHorizontal = opts.direction === 't2b' || opts.direction === 'b2t';
-      var scale = Math.abs(window.parseFloat(isHorizontal ? transValues[0].slice(transValues[0].indexOf('(') + 1) : transValues[1]));
-      ghostNode.setAttribute('width', isHorizontal ? $nodeDiv.outerWidth(false) : $nodeDiv.outerHeight(false));
-      ghostNode.setAttribute('height', isHorizontal ? $nodeDiv.outerHeight(false) : $nodeDiv.outerWidth(false));
-      nodeCover.setAttribute('x',5 * scale);
-      nodeCover.setAttribute('y',5 * scale);
-      nodeCover.setAttribute('width', 120 * scale);
-      nodeCover.setAttribute('height', 40 * scale);
-      nodeCover.setAttribute('rx', 4 * scale);
-      nodeCover.setAttribute('ry', 4 * scale);
-      nodeCover.setAttribute('stroke-width', 1 * scale);
-      var xOffset = origEvent.offsetX * scale;
-      var yOffset = origEvent.offsetY * scale;
-      if (opts.direction === 'l2r') {
-        xOffset = origEvent.offsetY * scale;
-        yOffset = origEvent.offsetX * scale;
-      } else if (opts.direction === 'r2l') {
-        xOffset = $nodeDiv.outerWidth(false) - origEvent.offsetY * scale;
-        yOffset = origEvent.offsetX * scale;
-      } else if (opts.direction === 'b2t') {
-        xOffset = $nodeDiv.outerWidth(false) - origEvent.offsetX * scale;
-        yOffset = $nodeDiv.outerHeight(false) - origEvent.offsetY * scale;
-      }
-      if (isFirefox) { // hack for old version of Firefox(< 48.0)
-        nodeCover.setAttribute('fill', 'rgb(255, 255, 255)');
-        nodeCover.setAttribute('stroke', 'rgb(191, 0, 0)');
-        var ghostNodeWrapper = document.createElement('img');
-        ghostNodeWrapper.src = 'data:image/svg+xml;utf8,' + (new XMLSerializer()).serializeToString(ghostNode);
-        origEvent.dataTransfer.setDragImage(ghostNodeWrapper, xOffset, yOffset);
-      } else {
-        origEvent.dataTransfer.setDragImage(ghostNode, xOffset, yOffset);
-      }
-    },
-    //
-    filterAllowedDropNodes: function ($dragged) {
-      var opts = this.options;
-      var $dragZone = $dragged.closest('.nodes').siblings().eq(0).find('.node:first');
-      var $dragHier = $dragged.closest('table').find('.node');
-      this.$chart.data('dragged', $dragged)
-        .find('.node').each(function (index, node) {
-          if ($dragHier.index(node) === -1) {
-            if (opts.dropCriteria) {
-              if (opts.dropCriteria($dragged, $dragZone, $(node))) {
-                $(node).addClass('allowedDrop');
-              }
-            } else {
-              $(node).addClass('allowedDrop');
-            }
-          }
-        });
-    },
-    //
-    dragstartHandler: function (event) {
-      event.originalEvent.dataTransfer.setData('text/html', 'hack for firefox');
-      // if users enable zoom or direction options
-      if (this.$chart.css('transform') !== 'none') {
-        this.createGhostNode(event);
-      }
-      this.filterAllowedDropNodes($(event.target));
-    },
-    //
-    dragoverHandler: function (event) {
-      event.preventDefault();
-      if (!$(event.delegateTarget).is('.allowedDrop')) {
-        event.originalEvent.dataTransfer.dropEffect = 'none';
-      }
-    },
-    //
-    dragendHandler: function (event) {
-      this.$chart.find('.allowedDrop').removeClass('allowedDrop');
-    },
-    //
-    dropHandler: function (event) {
-      var $dropZone = $(event.delegateTarget);
-      var $dragged = this.$chart.data('dragged');
-      var $dragZone = $dragged.closest('.nodes').siblings().eq(0).children();
-      var dropEvent = $.Event('nodedrop.orgchart');
-      this.$chart.trigger(dropEvent, { 'draggedNode': $dragged, 'dragZone': $dragZone.children(), 'dropZone': $dropZone });
-      if (dropEvent.isDefaultPrevented()) {
-        return;
-      }
-      // firstly, deal with the hierarchy of drop zone
-      if (!$dropZone.closest('tr').siblings().length) { // if the drop zone is a leaf node
-        $dropZone.append('<i class="edge verticalEdge bottomEdge fa"></i>')
-          .parent().attr('colspan', 2)
-          .parent().after('<tr class="lines"><td colspan="2"><div class="downLine"></div></td></tr>'
-          + '<tr class="lines"><td class="rightLine"></td><td class="leftLine"></td></tr>'
-          + '<tr class="nodes"></tr>')
-          .siblings(':last').append($dragged.find('.horizontalEdge').remove().end().closest('table').parent());
-      } else {
-        var dropColspan = parseInt($dropZone.parent().attr('colspan')) + 2;
-        var horizontalEdges = '<i class="edge horizontalEdge rightEdge fa"></i><i class="edge horizontalEdge leftEdge fa"></i>';
-        $dropZone.closest('tr').next().addBack().children().attr('colspan', dropColspan);
-        if (!$dragged.find('.horizontalEdge').length) {
-          $dragged.append(horizontalEdges);
-        }
-        $dropZone.closest('tr').siblings().eq(1).children(':last').before('<td class="leftLine topLine"></td><td class="rightLine topLine"></td>')
-          .end().next().append($dragged.closest('table').parent());
-        var $dropSibs = $dragged.closest('table').parent().siblings().find('.node:first');
-        if ($dropSibs.length === 1) {
-          $dropSibs.append(horizontalEdges);
-        }
-      }
-      // secondly, deal with the hierarchy of dragged node
-      var dragColspan = parseInt($dragZone.attr('colspan'));
-      if (dragColspan > 2) {
-        $dragZone.attr('colspan', dragColspan - 2)
-          .parent().next().children().attr('colspan', dragColspan - 2)
-          .end().next().children().slice(1, 3).remove();
-        var $dragSibs = $dragZone.parent().siblings('.nodes').children().find('.node:first');
-        if ($dragSibs.length ===1) {
-          $dragSibs.find('.horizontalEdge').remove();
-        }
-      } else {
-        $dragZone.removeAttr('colspan')
-          .find('.bottomEdge').remove()
-          .end().end().siblings().remove();
-      }
-    },
-    //
-    touchstartHandler: function (event) {
-        console.log("orgChart: touchstart 1: touchHandled=" + this.touchHandled + ", touchMoved=" + this.touchMoved + ", target=" + event.target.innerText);
-        if (this.touchHandled)
-            return;
-        this.touchHandled = true;
-        this.touchMoved = false;     // this is so we can work out later if this was a 'press' or a 'drag' touch
-        event.preventDefault();
-    },
-    //
-    touchmoveHandler: function (event) {
-      if (!this.touchHandled)
-        return;
-      event.preventDefault();
-      if (!this.touchMoved) {
-        var nodeIsSelected = $(this).hasClass('focused');
-        console.log("orgChart: touchmove 1: " + event.touches.length + " touches, we have not moved, so simulate a drag start", event.touches);
-        // TODO: visualise the start of the drag (as would happen on desktop)
-        this.simulateMouseEvent(event, 'dragstart');
-      }
-      this.touchMoved = true;
-      var $touching = $(document.elementFromPoint(event.touches[0].clientX, event.touches[0].clientY));
-      var $touchingNode = $touching.closest('div.node');
- 
-      if ($touchingNode.length > 0) {
-        var touchingNodeElement = $touchingNode[0];
-        // TODO: simulate the dragover visualisation
-        if ($touchingNode.is('.allowedDrop')) {
-            console.log("orgChart: touchmove 2: this node (" + touchingNodeElement.id + ") is allowed to be a drop target");
-            this.touchTargetNode = touchingNodeElement;
-        } else {
-            console.log("orgChart: touchmove 3: this node (" + touchingNodeElement.id + ") is NOT allowed to be a drop target");
-            this.touchTargetNode = null;
-        }
-      } else {
-        console.log("orgchart: touchmove 4: not touching a node");
-        this.touchTargetNode = null;
-      }
-    },
-    //
-    touchendHandler: function (event) {
-      console.log("orgChart: touchend 1: touchHandled=" + this.touchHandled + ", touchMoved=" + this.touchMoved + ", " + event.target.innerText + " ");
-      if (!this.touchHandled) {
-          console.log("orgChart: touchend 2: not handled by us, so aborting");
-          return;
-      }
-      if (this.touchMoved) {
-          // we've had movement, so this was a 'drag' touch
-          if (this.touchTargetNode) {
-              console.log("orgChart: touchend 3: moved to a node, so simulating drop");
-              var fakeEventForDropHandler = { delegateTarget: this.touchTargetNode };
-              this.dropHandler(fakeEventForDropHandler);
-              this.touchTargetNode = null;
-          }
-          console.log("orgChart: touchend 4: simulating dragend");
-          this.simulateMouseEvent(event, 'dragend');
-      }
-      else {
-          // we did not move, so assume this was a 'press' touch
-          console.log("orgChart: touchend 5: moved, so simulating click");
-          this.simulateMouseEvent(event, 'click');
-      }
-      this.touchHandled = false;
-    },
-    // simulate a mouse event (so we can fake them on a touch device)
-    simulateMouseEvent: function (event, simulatedType) {
-      // Ignore multi-touch events
-      if (event.originalEvent.touches.length > 1) {
-        return;
-      }
-      var touch = event.originalEvent.changedTouches[0];
-      var simulatedEvent = document.createEvent('MouseEvents');
-      simulatedEvent.initMouseEvent(
-        simulatedType,    // type
-        true,             // bubbles                    
-        true,             // cancelable                 
-        window,           // view                       
-        1,                // detail                     
-        touch.screenX,    // screenX                    
-        touch.screenY,    // screenY                    
-        touch.clientX,    // clientX                    
-        touch.clientY,    // clientY                    
-        false,            // ctrlKey                    
-        false,            // altKey                     
-        false,            // shiftKey                   
-        false,            // metaKey                    
-        0,                // button                     
-        null              // relatedTarget              
-      );
-      // Dispatch the simulated event to the target element
-      event.target.dispatchEvent(simulatedEvent);
-    },
-    //
-    bindDragDrop: function ($node) {
-      $node.on('dragstart', this.dragstartHandler.bind(this))
-        .on('dragover', this.dragoverHandler.bind(this))
-        .on('dragend', this.dragendHandler.bind(this))
-        .on('drop', this.dropHandler.bind(this))
-        .on('touchstart', this.touchstartHandler.bind(this))
-        .on('touchmove', this.touchmoveHandler.bind(this))
-        .on('touchend', this.touchendHandler.bind(this));
-    },
-    // create node
-    createNode: function (data) {
-      var that = this;
-      var opts = this.options;
-      var level = data.level;
-      if (data.children) {
-        $.each(data.children, function (index, child) {
-          child.parentId = data.id;
-        });
-      }
-      // construct the content of node
-      var $nodeDiv = $('<div' + (opts.draggable ? ' draggable="true"' : '') + (data[opts.nodeId] ? ' id="' + data[opts.nodeId] + '"' : '') + (data.parentId ? ' data-parent="' + data.parentId + '"' : '') + '>')
-        .addClass('node ' + (data.className || '') +  (level > opts.visibleLevel ? ' slide-up' : ''));
-      if (opts.nodeTemplate) {
-        $nodeDiv.append(opts.nodeTemplate(data));
-      } else {
-        $nodeDiv.append('<div class="title">' + data[opts.nodeTitle] + '</div>')
-          .append(typeof opts.nodeContent !== 'undefined' ? '<div class="content">' + (data[opts.nodeContent] || '') + '</div>' : '');
-      }
-      //
-      var nodeData = $.extend({}, data);
-      delete nodeData.children;
-      $nodeDiv.data('nodeData', nodeData);
-      // append 4 direction arrows or expand/collapse buttons
-      var flags = data.relationship || '';
-      if (opts.verticalLevel && level >= opts.verticalLevel) {
-        if ((level + 1) > opts.verticalLevel && Number(flags.substr(2,1))) {
-          var icon = level + 1 > opts.visibleLevel ? 'plus' : 'minus';
-          $nodeDiv.append('<i class="toggleBtn fa fa-' + icon + '-square"></i>');
-        }
-      } else {
-        if (Number(flags.substr(0,1))) {
-          $nodeDiv.append('<i class="edge verticalEdge topEdge fa"></i>');
-        }
-        if(Number(flags.substr(1,1))) {
-          $nodeDiv.append('<i class="edge horizontalEdge rightEdge fa"></i>' +
-            '<i class="edge horizontalEdge leftEdge fa"></i>');
-        }
-        if(Number(flags.substr(2,1))) {
-          $nodeDiv.append('<i class="edge verticalEdge bottomEdge fa"></i>')
-            .children('.title').prepend('<i class="fa '+ opts.parentNodeSymbol + ' symbol"></i>');
-        }
-      }
-
-      $nodeDiv.on('mouseenter mouseleave', this.nodeEnterLeaveHandler.bind(this));
-      $nodeDiv.on('click', this.nodeClickHandler.bind(this));
-      $nodeDiv.on('click', '.topEdge', this.topEdgeClickHandler.bind(this));
-      $nodeDiv.on('click', '.bottomEdge', this.bottomEdgeClickHandler.bind(this));
-      $nodeDiv.on('click', '.leftEdge, .rightEdge', this.hEdgeClickHandler.bind(this));
-      $nodeDiv.on('click', '.toggleBtn', this.toggleVNodes.bind(this));
-
-      if (opts.draggable) {
-        this.bindDragDrop($nodeDiv);
-        this.touchHandled = false;
-        this.touchMoved = false;
-        this.touchTargetNode = null;
-      }
-      // allow user to append dom modification after finishing node create of orgchart
-      if (opts.createNode) {
-        opts.createNode($nodeDiv, data);
-      }
-
-      return $nodeDiv;
-    },
-    // recursively build the tree
-    buildHierarchy: function ($appendTo, data) {
-      var that = this;
-      var opts = this.options;
-      var level = 0;
-      if (data.level) {
-        level = data.level;
-      } else {
-        level = data.level = $appendTo.parentsUntil('.orgchart', '.nodes').length + 1;
-      }
-      // Construct the node
-      var childrenData = data.children;
-      var hasChildren = childrenData ? childrenData.length : false;
-      var $nodeWrapper;
-      if (Object.keys(data).length > 2) {
-        var $nodeDiv = this.createNode(data);
-        if (opts.verticalLevel && level >= opts.verticalLevel) {
-          $appendTo.append($nodeDiv);
-        }else {
-          $nodeWrapper = $('<table>');
-          $appendTo.append($nodeWrapper.append($('<tr/>').append($('<td' + (hasChildren ? ' colspan="' + childrenData.length * 2 + '"' : '') + '></td>').append($nodeDiv))));
-        }
-      }
-      // Construct the lower level(two "connectiong lines" rows and "inferior nodes" row)
-      if (hasChildren) {
-        var isHidden = (level + 1 > opts.visibleLevel || data.collapsed) ? ' hidden' : '';
-        var isVerticalLayer = (opts.verticalLevel && (level + 1) >= opts.verticalLevel) ? true : false;
-        var $nodesLayer;
-        if (isVerticalLayer) {
-          $nodesLayer = $('<ul>');
-          if (isHidden && level + 1 > opts.verticalLevel) {
-            $nodesLayer.addClass(isHidden);
-          }
-          if (level + 1 === opts.verticalLevel) {
-            $appendTo.children('table').append('<tr class="verticalNodes' + isHidden + '"><td></td></tr>')
-              .find('.verticalNodes').children().append($nodesLayer);
-          } else {
-            $appendTo.append($nodesLayer);
-          }
-        } else {
-          var $upperLines = $('<tr class="lines' + isHidden + '"><td colspan="' + childrenData.length * 2 + '"><div class="downLine"></div></td></tr>');
-          var lowerLines = '<tr class="lines' + isHidden + '"><td class="rightLine"></td>';
-          for (var i=1; i<childrenData.length; i++) {
-            lowerLines += '<td class="leftLine topLine"></td><td class="rightLine topLine"></td>';
-          }
-          lowerLines += '<td class="leftLine"></td></tr>';
-          $nodesLayer = $('<tr class="nodes' + isHidden + '">');
-          if (Object.keys(data).length === 2) {
-            $appendTo.append($upperLines).append(lowerLines).append($nodesLayer);
-          } else {
-            $nodeWrapper.append($upperLines).append(lowerLines).append($nodesLayer);
-          }
-        }
-        // recurse through children nodes
-        $.each(childrenData, function () {
-          var $nodeCell = isVerticalLayer ? $('<li>') : $('<td colspan="2">');
-          $nodesLayer.append($nodeCell);
-          this.level = level + 1;
-          that.buildHierarchy($nodeCell, this);
-        });
-      }
-    },
-    // build the child nodes of specific node
-    buildChildNode: function ($appendTo, data) {
-      $appendTo.find('td:first').attr('colspan', data.length * 2);
-      this.buildHierarchy($appendTo, { 'children': data });
-    },
-    // exposed method
-    addChildren: function ($node, data) {
-      this.buildChildNode($node.closest('table'), data);
-      if (!$node.children('.bottomEdge').length) {
-        $node.append('<i class="edge verticalEdge bottomEdge fa"></i>');
-      }
-      if (!$node.find('.symbol').length) {
-        $node.children('.title').prepend('<i class="fa '+ this.options.parentNodeSymbol + ' symbol"></i>');
-      }
-      if (this.isInAction($node)) {
-        this.switchVerticalArrow($node.children('.bottomEdge'));
-      }
-    },
-    // build the parent node of specific node
-    buildParentNode: function ($currentRoot, data) {
-      data.relationship = data.relationship || '001';
-      var $table = $('<table>')
-        .append($('<tr>').append($('<td colspan="2">').append(this.createNode(data))))
-        .append('<tr class="lines"><td colspan="2"><div class="downLine"></div></td></tr>')
-        .append('<tr class="lines"><td class="rightLine"></td><td class="leftLine"></td></tr>');
-      this.$chart.prepend($table)
-        .children('table:first').append('<tr class="nodes"><td colspan="2"></td></tr>')
-        .children('tr:last').children().append(this.$chart.children('table').last());
-    },
-    // exposed method
-    addParent: function ($currentRoot, data) {
-      this.buildParentNode($currentRoot, data);
-      if (!$currentRoot.children('.topEdge').length) {
-        $currentRoot.children('.title').after('<i class="edge verticalEdge topEdge fa"></i>');
-      }
-      if (this.isInAction($currentRoot)) {
-        this.switchVerticalArrow($currentRoot.children('.topEdge'));
-      }
-    },
-    // subsequent processing of build sibling nodes
-    complementLine: function ($oneSibling, siblingCount, existingSibligCount) {
-      var lines = '';
-      for (var i = 0; i < existingSibligCount; i++) {
-        lines += '<td class="leftLine topLine"></td><td class="rightLine topLine"></td>';
-      }
-      $oneSibling.parent().prevAll('tr:gt(0)').children().attr('colspan', siblingCount * 2)
-        .end().next().children(':first').after(lines);
-    },
-    // build the sibling nodes of specific node
-    buildSiblingNode: function ($nodeChart, data) {
-      var newSiblingCount = $.isArray(data) ? data.length : data.children.length;
-      var existingSibligCount = $nodeChart.parent().is('td') ? $nodeChart.closest('tr').children().length : 1;
-      var siblingCount = existingSibligCount + newSiblingCount;
-      var insertPostion = (siblingCount > 1) ? Math.floor(siblingCount/2 - 1) : 0;
-      // just build the sibling nodes for the specific node
-      if ($nodeChart.parent().is('td')) {
-        var $parent = $nodeChart.closest('tr').prevAll('tr:last');
-        $nodeChart.closest('tr').prevAll('tr:lt(2)').remove();
-        this.buildChildNode($nodeChart.parent().closest('table'), data);
-        var $siblingTds = $nodeChart.parent().closest('table').children('tr:last').children('td');
-        if (existingSibligCount > 1) {
-          this.complementLine($siblingTds.eq(0).before($nodeChart.closest('td').siblings().addBack().unwrap()), siblingCount, existingSibligCount);
-        } else {
-          this.complementLine($siblingTds.eq(insertPostion).after($nodeChart.closest('td').unwrap()), siblingCount, 1);
-        }
-      } else { // build the sibling nodes and parent node for the specific ndoe
-        this.buildHierarchy($nodeChart.closest('.orgchart'), data);
-        this.complementLine($nodeChart.next().children('tr:last').children().eq(insertPostion).after($('<td colspan="2">').append($nodeChart)),
-          siblingCount, 1);
-      }
-    },
-    //
-    addSiblings: function ($node, data) {
-      this.buildSiblingNode($node.closest('table'), data);
-      $node.closest('.nodes').data('siblingsLoaded', true);
-      if (!$node.children('.leftEdge').length) {
-        $node.children('.topEdge').after('<i class="edge horizontalEdge rightEdge fa"></i><i class="edge horizontalEdge leftEdge fa"></i>');
-      }
-      if (this.isInAction($node)) {
-        this.switchHorizontalArrow($node);
-        $node.children('.topEdge').removeClass('fa-chevron-up').addClass('fa-chevron-down');
-      }
-    },
-    //
-    removeNodes: function ($node) {
-      var $parent = $node.closest('table').parent();
-      var $sibs = $parent.parent().siblings();
-      if ($parent.is('td')) {
-        if (this.getNodeState($node, 'siblings').exist) {
-          $sibs.eq(2).children('.topLine:lt(2)').remove();
-          $sibs.slice(0, 2).children().attr('colspan', $sibs.eq(2).children().length);
-          $parent.remove();
-        } else {
-          $sibs.eq(0).children().removeAttr('colspan')
-            .find('.bottomEdge').remove()
-            .end().end().siblings().remove();
-        }
-      } else {
-        $parent.add($parent.siblings()).remove();
-      }
-    },
-    //
-    export: function (exportFilename, exportFileextension) {
-      var that = this;
-      exportFilename = (typeof exportFilename !== 'undefined') ?  exportFilename : this.options.exportFilename;
-      exportFileextension = (typeof exportFileextension !== 'undefined') ?  exportFileextension : this.options.exportFileextension;
-      if ($(this).children('.spinner').length) {
-        return false;
-      }
-      var $chartContainer = this.$chartContainer;
-      var $mask = $chartContainer.find('.mask');
-      if (!$mask.length) {
-        $chartContainer.append('<div class="mask"><i class="fa fa-circle-o-notch fa-spin spinner"></i></div>');
-      } else {
-        $mask.removeClass('hidden');
-      }
-      var sourceChart = $chartContainer.addClass('canvasContainer').find('.orgchart:not(".hidden")').get(0);
-      var flag = that.options.direction === 'l2r' || that.options.direction === 'r2l';
-      html2canvas(sourceChart, {
-        'width': flag ? sourceChart.clientHeight : sourceChart.clientWidth,
-        'height': flag ? sourceChart.clientWidth : sourceChart.clientHeight,
-        'onclone': function (cloneDoc) {
-          $(cloneDoc).find('.canvasContainer').css('overflow', 'visible')
-            .find('.orgchart:not(".hidden"):first').css('transform', '');
-        },
-        'onrendered': function (canvas) {
-          $chartContainer.find('.mask').addClass('hidden');
-          if (exportFileextension.toLowerCase() === 'pdf') {
-            var doc = {};
-            var docWidth = Math.floor(canvas.width * 0.2646);
-            var docHeight = Math.floor(canvas.height * 0.2646);
-            if (docWidth > docHeight) {
-              doc = new jsPDF('l', 'mm', [docWidth, docHeight]);
-            } else {
-              doc = new jsPDF('p', 'mm', [docHeight, docWidth]);
-            }
-            doc.addImage(canvas.toDataURL(), 'png', 0, 0);
-            doc.save(exportFilename + '.pdf');
-          } else {
-            var isWebkit = 'WebkitAppearance' in document.documentElement.style;
-            var isFf = !!window.sidebar;
-            var isEdge = navigator.appName === 'Microsoft Internet Explorer' || (navigator.appName === "Netscape" && navigator.appVersion.indexOf('Edge') > -1);
-
-            if ((!isWebkit && !isFf) || isEdge) {
-              window.navigator.msSaveBlob(canvas.msToBlob(), exportFilename + '.png');
-            } else {
-              var selector = '.oc-download-btn' + (that.options.chartClass !== '' ? '.' + that.options.chartClass : '');
-              if (!$chartContainer.find(selector).length) {
-                $chartContainer.append('<a class="oc-download-btn' + (that.options.chartClass !== '' ? ' ' + that.options.chartClass : '') + '"'
-                  + ' download="' + exportFilename + '.png"></a>');
-              }
-              $chartContainer.find(selector).attr('href', canvas.toDataURL())[0].click();
-            }
-          }
-        }
-      })
-      .then(function () {
-        $chartContainer.removeClass('canvasContainer');
-      }, function () {
-        $chartContainer.removeClass('canvasContainer');
-      });
-    }
-  };
-
-  $.fn.orgchart = function (opts) {
-    return new OrgChart(this, opts).init();
-  };
-
-}));
diff --git a/src/main/resources/META-INF/resources/frontend/fc-orgchart-styles.css b/src/main/resources/META-INF/resources/frontend/fc-orgchart-styles.css
new file mode 100644
index 0000000..19beda9
--- /dev/null
+++ b/src/main/resources/META-INF/resources/frontend/fc-orgchart-styles.css
@@ -0,0 +1,27 @@
+/*-
+ * #%L
+ * OrgChart Add-on
+ * %%
+ * Copyright (C) 2017 - 2023 Flowing Code S.A.
+ * %%
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * #L%
+ */
+ 
+.orgchart .node {
+	width: 140px;
+}
+
+.orgchart .node .content {
+	overflow: hidden;
+}
\ No newline at end of file
diff --git a/src/main/resources/META-INF/resources/frontend/jquery.orgchart.min.css b/src/main/resources/META-INF/resources/frontend/jquery.orgchart.min.css
deleted file mode 100644
index 3b39c8a..0000000
--- a/src/main/resources/META-INF/resources/frontend/jquery.orgchart.min.css
+++ /dev/null
@@ -1 +0,0 @@
-.orgchart{box-sizing:border-box;display:inline-block;min-height:202px;min-width:202px;-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(90deg,rgba(200,0,0,.15) 10%,rgba(0,0,0,0) 10%),linear-gradient(rgba(200,0,0,.15) 10%,rgba(0,0,0,0) 10%);background-size:10px 10px;border:1px dashed transparent;padding:20px}.orgchart .hidden,.orgchart~.hidden{display:none}.orgchart.b2t{transform:rotate(180deg)}.orgchart.l2r{position:absolute;transform:rotate(-90deg) rotateY(180deg);transform-origin:left top}.orgchart .verticalNodes ul{list-style:none;margin:0;padding-left:18px;text-align:left}.orgchart .verticalNodes ul:first-child{margin-top:2px}.orgchart .verticalNodes>td::before{content:'';border:1px solid rgba(217,83,79,.8)}.orgchart .verticalNodes>td>ul>li:first-child::before{box-sizing:border-box;top:-4px;height:30px;width:calc(50% - 2px);border-width:2px 0 0 2px}.orgchart .verticalNodes ul>li{position:relative}.orgchart .verticalNodes ul>li::after,.orgchart .verticalNodes ul>li::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 .verticalNodes ul>li::before{top:-4px;height:30px;width:11px}.orgchart .verticalNodes ul>li::after{top:1px;height:100%}.orgchart .verticalNodes ul>li:first-child::after{box-sizing:border-box;top:24px;width:11px;border-width:2px 0 0 2px}.orgchart .verticalNodes ul>li:last-child::after{box-sizing:border-box;border-width:2px 0 0}.orgchart.r2l{position:absolute;transform:rotate(90deg);transform-origin:left top}.orgchart>.spinner{font-size:100px;margin-top:30px;color:rgba(68,157,68,.8)}.orgchart table{border-spacing:0;border-collapse:separate}.orgchart>table:first-child{margin:20px auto}.orgchart td{text-align:center;vertical-align:top;padding:0}.orgchart .lines:nth-child(3) td{box-sizing:border-box;height:20px}.orgchart .lines .topLine{border-top:2px solid rgba(217,83,79,.8)}.orgchart .lines .rightLine{border-right:1px solid rgba(217,83,79,.8);float:none;border-radius:0}.orgchart .lines .leftLine{border-left:1px solid rgba(217,83,79,.8);float:none;border-radius:0}.orgchart .lines .downLine{background-color:rgba(217,83,79,.8);margin:0 auto;height:20px;width:2px;float:none}.orgchart .node{box-sizing:border-box;display:inline-block;position:relative;margin:0;padding:3px;border:2px dashed transparent;text-align:center;width:130px}.orgchart.l2r .node,.orgchart.r2l .node{width:50px;height:130px}.orgchart .node>.spinner{position:absolute;top:calc(50% - 15px);left:calc(50% - 15px);vertical-align:middle;font-size:30px;color:rgba(68,157,68,.8)}.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 .title{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(-40px,-40px) rotateY(180deg);transform-origin:bottom center;width:120px}.orgchart.r2l .node .title{transform:rotate(-90deg) translate(-40px,-40px);transform-origin:bottom center;width:120px}.orgchart .node .title .symbol{float:left;margin-top:4px;margin-left:2px}.orgchart .node .content{box-sizing:border-box;width:100%;height:20px;font-size:11px;line-height:18px;border:1px solid rgba(217,83,79,.8);border-radius:0 0 4px 4px;text-align:center;background-color:#fff;color:#333;overflow:hidden;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(-40px,-40px) rotateY(180deg);transform-origin:top center;width:120px}.orgchart.r2l .node .content{transform:rotate(-90deg) translate(-40px,-40px);transform-origin:top center;width:120px}.orgchart .node .edge{font-size:15px;position:absolute;color:rgba(68,157,68,.5);cursor:default;transition:.2s}.orgchart.noncollapsable .node .edge{display:none}.orgchart .edge:hover{color:#449d44;cursor:pointer}.orgchart .node .verticalEdge{width:calc(100% - 10px);width:-webkit-calc(100% - 10px);width:-moz-calc(100% - 10px);left:5px}.orgchart .node .topEdge{top:-4px}.orgchart .node .bottomEdge{bottom:-4px}.orgchart .node .horizontalEdge{width:15px;height:calc(100% - 10px);height:-webkit-calc(100% - 10px);height:-moz-calc(100% - 10px);top:5px}.orgchart .node .rightEdge{right:-4px}.orgchart .node .leftEdge{left:-4px}.orgchart .node .horizontalEdge::before{position:absolute;top:calc(50% - 7px)}.orgchart .node .rightEdge::before{right:3px}.orgchart .node .leftEdge::before{left:3px}.orgchart .node .toggleBtn{position:absolute;left:5px;bottom:-2px;color:rgba(68,157,68,.6)}.orgchart .node .toggleBtn:hover{color:rgba(68,157,68,.8)}.oc-export-btn{display:inline-block;position:absolute;right:5px;top:5px;padding:6px 12px;margin-bottom:0;font-size:14px;font-weight:400;line-height:1.42857143;text-align:center;white-space:nowrap;vertical-align:middle;touch-action:manipulation;cursor:pointer;user-select:none;color:#fff;background-color:#5cb85c;border:1px solid transparent;border-color:#4cae4c;border-radius:4px}.oc-export-btn[disabled]{cursor:not-allowed;box-shadow:none;opacity:.3}.oc-export-btn:active,.oc-export-btn:focus,.oc-export-btn:hover{background-color:#449d44;border-color:#347a34}.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% - 54px);left:calc(50% - 54px);color:rgba(255,255,255,.8);font-size:108px}.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)}
\ No newline at end of file
diff --git a/src/test/resources/META-INF/resources/frontend/styles/orgchart/demo-styles.css b/src/test/resources/META-INF/resources/frontend/styles/orgchart/demo-styles.css
index 3539c5a..dcd326d 100644
--- a/src/test/resources/META-INF/resources/frontend/styles/orgchart/demo-styles.css
+++ b/src/test/resources/META-INF/resources/frontend/styles/orgchart/demo-styles.css
@@ -36,7 +36,6 @@
 	
 .orgchart .node .content { 
 	border-radius: 0 !important; 
-	border-bottom-width: 0 !important; 
 }
 
 .orgchart .node .content:first-of-type { 
@@ -54,15 +53,11 @@ vaadin-checkbox.smallcheckbox {
 	font-size: small;
 }
 
-fc-orgchart p {
-	max-width:calc(100% - 70px);
-}
-
 .orgchart {
 	padding: 0;
 }
 
-.image-title-demo .orgchart .title .symbol {
+.image-title-demo .orgchart .title .parentNodeSymbol {
 	display:none
 }
 
diff --git a/src/test/resources/META-INF/resources/frontend/styles/orgchart/hybrid-demo-styles.css b/src/test/resources/META-INF/resources/frontend/styles/orgchart/hybrid-demo-styles.css
index d4c72c9..e2a8775 100644
--- a/src/test/resources/META-INF/resources/frontend/styles/orgchart/hybrid-demo-styles.css
+++ b/src/test/resources/META-INF/resources/frontend/styles/orgchart/hybrid-demo-styles.css
@@ -22,7 +22,8 @@
 }
 
 .hybrid-chart .orgchart .node .title {
-	height: 80px !important;
+	height: 95px !important;
+	width: 210px;
 	text-align: left;
 	line-height: 18px;
 	font-size: 11px;
@@ -57,30 +58,22 @@
 	margin-right: 4px;
 }
 
-.hybrid-chart .orgchart .title .symbol {
+.hybrid-chart .orgchart .title .parentNodeSymbol {
 	display: none
 }
 
-.hybrid-chart .orgchart .lines .rightLine {
-	border-right-color: var(--lumo-body-text-color);
+.hybrid-chart .orgchart .node:not(:only-child)::after{
+	background-color: var(--lumo-body-text-color);
 }
 
-.hybrid-chart .orgchart .lines .leftLine {
-    border-left-color: var(--lumo-body-text-color);
-}
-
-.hybrid-chart .orgchart .lines .topLine {
-	border-top-color: var(--lumo-body-text-color);
-}
-
-.hybrid-chart .orgchart .verticalNodes>td::before {
+.hybrid-chart .orgchart .hierarchy::before {
     border-color: var(--lumo-body-text-color);
 }
 
-.hybrid-chart .orgchart .lines .downLine {
+.hybrid-chart .orgchart>ul>li>ul li>.node::before {
     background-color: var(--lumo-body-text-color); 
 }
 
-.hybrid-chart .orgchart .verticalNodes ul>li::after, .hybrid-chart .orgchart .verticalNodes ul>li::before {
+.hybrid-chart .orgchart .nodes.vertical .hierarchy::after, .hybrid-chart .orgchart .nodes.vertical .hierarchy::before {
     border-color: var(--lumo-body-text-color);
 }
\ No newline at end of file