halleyx-ui-framework 11.7.43 → 11.7.45

package/dist/src/assets/styles/tree.css

@@ -0,0 +1,882 @@
+.hlx-tree-area {
+  position: absolute;
+  display: flex;
+  flex-wrap: wrap;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+  font-size: 10px;
+  justify-content: center;
+  margin: 18px;
+  padding: 0;
+}
+.hlx-tree-area.drag-border {
+  border: 0.4px dashed var(--hlx-border-color);
+}
+.hlx-tree-area > li {
+  min-height: 400px;
+  min-width: 400px;
+}
+.hlx-tree-area:not(:empty):before, .hlx-tree-area:not(:empty):after,
+.hlx-tree-area ul:not(:empty):before,
+.hlx-tree-area ul:not(:empty):after,
+.hlx-tree-area li:not(:empty):before,
+.hlx-tree-area li:not(:empty):after {
+  display: block;
+  position: absolute;
+  content: "";
+}
+.hlx-tree-area ul,
+.hlx-tree-area li {
+  position: relative;
+  margin: 0;
+  padding: 0;
+}
+.hlx-tree-area li {
+  list-style: none;
+}
+.hlx-tree-area li > div.card {
+  color: var(--hlx-text-color-tree);
+  display: inline-table;
+  position: relative;
+  border-radius: 5px;
+  border: 1px solid var(--hlx-border-color);
+  width: 200px;
+  height: 100px;
+  min-height: 100px;
+  padding: 5px;
+  overflow: visible;
+}
+.hlx-tree-area li > div.card:hover {
+  border-color: var(--hlx-color-primary);
+  cursor: pointer;
+  cursor: pointer;
+}
+.hlx-tree-area li > div > p {
+  line-height: 18px;
+  font-size: 12px;
+  font-weight: 600;
+}
+.hlx-tree-area li > div > p.head-label {
+  color: var(--hlx-text-color-tree);
+  font-weight: 700;
+  margin-top: 0;
+  text-align: center;
+  font-size: 14px !important;
+  background-color: var(--hlx-color-primary);
+  color: white;
+  border-radius: 5px;
+}
+.hlx-tree-area.horizontal {
+  min-height: 600px;
+  min-width: 600px;
+}
+.hlx-tree-area.horizontal > li > div.card {
+  margin: 0 !important;
+}
+.hlx-tree-area.horizontal > li > div.card i {
+  bottom: 37% !important;
+}
+.hlx-tree-area.horizontal > li > ul > :first-child:before {
+  height: 51%;
+  top: 53%;
+}
+.hlx-tree-area.horizontal > li:last-child:before {
+  height: 50%;
+  bottom: calc(50% - 6px);
+  top: auto;
+}
+.hlx-tree-area.horizontal li {
+  display: flex;
+  align-items: center;
+  margin-left: 24px;
+}
+.hlx-tree-area.horizontal li div.card {
+  margin: 12px 0 0 6px;
+  margin-left: 14px;
+  min-width: 150px;
+  min-height: 90px;
+  display: flex;
+  justify-content: center;
+  align-content: center;
+}
+.hlx-tree-area.horizontal li div.card div.header.grid {
+  text-align: center;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  flex-wrap: wrap;
+  padding: 4px 0;
+  border: none;
+  color: getCssVar("color", "primary", "dark");
+  font-weight: bold;
+  height: auto;
+}
+.hlx-tree-area.horizontal li div.card i {
+  color: var(--hlx-color-primary);
+  position: absolute;
+  bottom: 42%;
+  z-index: 100;
+  right: -0.55em !important;
+  cursor: pointer;
+  font-size: var(--hlx-font-size-xs);
+}
+.hlx-tree-area.horizontal li:before {
+  position: absolute;
+  border-left: 1px solid var(--hlx-border-color);
+  height: 100%;
+  font-weight: 700;
+  width: 0;
+  top: 0;
+}
+.hlx-tree-area.horizontal li:first-child:before {
+  height: 51%;
+  top: 55%;
+}
+.hlx-tree-area.horizontal li:last-child:before {
+  height: 50%;
+  bottom: calc(50% - 6px);
+  top: auto;
+}
+.hlx-tree-area.horizontal li:after {
+  border-top: 1px solid var(--hlx-border-color);
+  height: 0;
+  width: 15px;
+  font-weight: 700;
+  top: calc(50% + 6px);
+}
+.hlx-tree-area.horizontal li ul:after {
+  border-top: 1px solid var(--hlx-border-color);
+  height: 0;
+  width: 25px;
+  font-weight: 700;
+  top: calc(50% + 6px);
+}
+.hlx-tree-area.horizontal li:only-child:before {
+  content: none;
+}
+.hlx-tree-area.horizontal li ul:after {
+  left: 0;
+}
+.hlx-tree-area.horizontal > li:only-child {
+  margin-left: 0;
+}
+.hlx-tree-area.horizontal > li:only-child:before, .hlx-tree-area.horizontal > li:only-child:after {
+  content: none;
+}
+.hlx-tree-area.cascade li {
+  margin-left: 24px;
+}
+.hlx-tree-area.cascade li div {
+  margin-top: 12px;
+}
+.hlx-tree-area.cascade li:before {
+  border-left: 1px solid var(--hlx-border-color);
+  height: 100%;
+  width: 0;
+  top: 0;
+  left: -12px;
+}
+.hlx-tree-area.cascade li:after {
+  border-top: 1px solid var(--hlx-border-color);
+  width: 12px;
+  left: -12px;
+  top: 24px;
+}
+.hlx-tree-area.cascade li:last-child:before {
+  height: 24px;
+  top: 0;
+}
+.hlx-tree-area.cascade > li:first-child:before {
+  top: 24px;
+}
+.hlx-tree-area.cascade > li:only-child {
+  margin-left: 0;
+}
+.hlx-tree-area.cascade > li:only-child:before, .hlx-tree-area.cascade > li:only-child:after {
+  content: none;
+}
+.hlx-tree-area.vertical {
+  display: flex;
+}
+.hlx-tree-area.vertical ul {
+  display: flex;
+  justify-content: center;
+}
+.hlx-tree-area.vertical li {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.hlx-tree-area.vertical li div.card {
+  margin: 12px 6px;
+  min-width: 150px;
+  min-height: 90px;
+  display: flex;
+  justify-content: center;
+  align-content: center;
+}
+.hlx-tree-area.vertical li div.card div.box {
+  padding: 10px 10px 0px !important;
+}
+.hlx-tree-area.vertical li div.card div.box .grid {
+  width: 100%;
+}
+.hlx-tree-area.vertical li div.card i {
+  color: var(--hlx-color-primary);
+  position: absolute;
+  bottom: -0.5em;
+  z-index: 100;
+  font-size: var(--hlx-font-size-xs);
+  right: 46% !important;
+  cursor: pointer;
+}
+.hlx-tree-area.vertical li:before {
+  border-left: 1px solid var(--hlx-border-color);
+  height: 12px;
+  width: 0;
+  top: 0;
+}
+.hlx-tree-area.vertical li:after {
+  border-top: 1px solid var(--hlx-border-color);
+  height: 0;
+  width: 100%;
+}
+.hlx-tree-area.vertical li:first-child:after {
+  border-top: 1px solid var(--hlx-border-color);
+  height: 0;
+  width: 50%;
+  left: 50%;
+}
+.hlx-tree-area.vertical li:last-child:after {
+  border-top: 1px solid var(--hlx-border-color);
+  height: 0;
+  width: 50%;
+  right: 50%;
+}
+.hlx-tree-area.vertical li:only-child:after {
+  content: none;
+}
+.hlx-tree-area.vertical li ul:before {
+  border-left: 1px solid var(--hlx-border-color);
+  height: 12px;
+  width: 0;
+  top: -12px;
+}
+.hlx-tree-area.vertical li ul:after {
+  border-left: 1px solid var(--hlx-border-color);
+  height: 12px;
+  width: 0;
+  top: -12px;
+}
+.hlx-tree-area.vertical > li:only-child:before, .hlx-tree-area.vertical > li:only-child:after {
+  content: none;
+}
+.hlx-tree-area .hlx-tree-area-upc.vertical.cascade-4 > li > ul > li > ul > li > ul > li, .hlx-tree-area .hlx-tree-area-upc.vertical.cascade-3 > li > ul > li > ul > li, .hlx-tree-area .hlx-tree-area-upc.vertical.cascade-2 > li > ul > li, .hlx-tree-area .hlx-tree-area-upc.vertical.cascade-1 > li, .hlx-tree-area .hlx-tree-area-upc.vertical .cascade, .hlx-tree-area-upc.vertical .hlx-tree-area .cascade, .hlx-tree-area.vertical.cascade-4 > li > ul > li > ul > li > ul > li, .hlx-tree-area.vertical.cascade-3 > li > ul > li > ul > li, .hlx-tree-area.vertical.cascade-2 > li > ul > li, .hlx-tree-area.vertical.cascade-1 > li, .hlx-tree-area.vertical .cascade {
+  flex-direction: column;
+  align-items: start;
+  padding: 0 12px;
+}
+.hlx-tree-area .hlx-tree-area-upc.vertical.cascade-4 > li > ul > li > ul > li > ul > li:before, .hlx-tree-area .hlx-tree-area-upc.vertical.cascade-3 > li > ul > li > ul > li:before, .hlx-tree-area .hlx-tree-area-upc.vertical.cascade-2 > li > ul > li:before, .hlx-tree-area .hlx-tree-area-upc.vertical.cascade-1 > li:before, .hlx-tree-area .hlx-tree-area-upc.vertical .cascade:before, .hlx-tree-area-upc.vertical .hlx-tree-area .cascade:before, .hlx-tree-area.vertical.cascade-4 > li > ul > li > ul > li > ul > li:before, .hlx-tree-area.vertical.cascade-3 > li > ul > li > ul > li:before, .hlx-tree-area.vertical.cascade-2 > li > ul > li:before, .hlx-tree-area.vertical.cascade-1 > li:before, .hlx-tree-area.vertical .cascade:before {
+  left: 24px;
+}
+.hlx-tree-area .hlx-tree-area-upc.vertical.cascade-4 > li > ul > li > ul > li > ul > li:after, .hlx-tree-area .hlx-tree-area-upc.vertical.cascade-3 > li > ul > li > ul > li:after, .hlx-tree-area .hlx-tree-area-upc.vertical.cascade-2 > li > ul > li:after, .hlx-tree-area .hlx-tree-area-upc.vertical.cascade-1 > li:after, .hlx-tree-area .hlx-tree-area-upc.vertical .cascade:after, .hlx-tree-area-upc.vertical .hlx-tree-area .cascade:after, .hlx-tree-area.vertical.cascade-4 > li > ul > li > ul > li > ul > li:after, .hlx-tree-area.vertical.cascade-3 > li > ul > li > ul > li:after, .hlx-tree-area.vertical.cascade-2 > li > ul > li:after, .hlx-tree-area.vertical.cascade-1 > li:after, .hlx-tree-area.vertical .cascade:after {
+  left: 0;
+}
+.hlx-tree-area .hlx-tree-area-upc.vertical.cascade-4 > li > ul > li > ul > li > ul > li:first-child:after, .hlx-tree-area .hlx-tree-area-upc.vertical.cascade-3 > li > ul > li > ul > li:first-child:after, .hlx-tree-area .hlx-tree-area-upc.vertical.cascade-2 > li > ul > li:first-child:after, .hlx-tree-area .hlx-tree-area-upc.vertical.cascade-1 > li:first-child:after, .hlx-tree-area .hlx-tree-area-upc.vertical .cascade:first-child:after, .hlx-tree-area-upc.vertical .hlx-tree-area .cascade:first-child:after, .hlx-tree-area.vertical.cascade-4 > li > ul > li > ul > li > ul > li:first-child:after, .hlx-tree-area.vertical.cascade-3 > li > ul > li > ul > li:first-child:after, .hlx-tree-area.vertical.cascade-2 > li > ul > li:first-child:after, .hlx-tree-area.vertical.cascade-1 > li:first-child:after, .hlx-tree-area.vertical .cascade:first-child:after {
+  left: 24px;
+  width: 100%;
+}
+.hlx-tree-area .hlx-tree-area-upc.vertical.cascade-4 > li > ul > li > ul > li > ul > li:last-child:after, .hlx-tree-area .hlx-tree-area-upc.vertical.cascade-3 > li > ul > li > ul > li:last-child:after, .hlx-tree-area .hlx-tree-area-upc.vertical.cascade-2 > li > ul > li:last-child:after, .hlx-tree-area .hlx-tree-area-upc.vertical.cascade-1 > li:last-child:after, .hlx-tree-area .hlx-tree-area-upc.vertical .cascade:last-child:after, .hlx-tree-area-upc.vertical .hlx-tree-area .cascade:last-child:after, .hlx-tree-area.vertical.cascade-4 > li > ul > li > ul > li > ul > li:last-child:after, .hlx-tree-area.vertical.cascade-3 > li > ul > li > ul > li:last-child:after, .hlx-tree-area.vertical.cascade-2 > li > ul > li:last-child:after, .hlx-tree-area.vertical.cascade-1 > li:last-child:after, .hlx-tree-area.vertical .cascade:last-child:after {
+  left: 0;
+  width: 24px;
+}
+.hlx-tree-area .hlx-tree-area-upc.vertical.cascade-4 > li > ul > li > ul > li > ul > li ul, .hlx-tree-area .hlx-tree-area-upc.vertical.cascade-3 > li > ul > li > ul > li ul, .hlx-tree-area .hlx-tree-area-upc.vertical.cascade-2 > li > ul > li ul, .hlx-tree-area .hlx-tree-area-upc.vertical.cascade-1 > li ul, .hlx-tree-area .hlx-tree-area-upc.vertical .cascade ul, .hlx-tree-area-upc.vertical .hlx-tree-area .cascade ul, .hlx-tree-area.vertical.cascade-4 > li > ul > li > ul > li > ul > li ul, .hlx-tree-area.vertical.cascade-3 > li > ul > li > ul > li ul, .hlx-tree-area.vertical.cascade-2 > li > ul > li ul, .hlx-tree-area.vertical.cascade-1 > li ul, .hlx-tree-area.vertical .cascade ul,
+.hlx-tree-area .hlx-tree-area-upc.vertical.cascade-4 > li > ul > li > ul > li > ul > li li,
+.hlx-tree-area .hlx-tree-area-upc.vertical.cascade-3 > li > ul > li > ul > li li,
+.hlx-tree-area .hlx-tree-area-upc.vertical.cascade-2 > li > ul > li li,
+.hlx-tree-area .hlx-tree-area-upc.vertical.cascade-1 > li li,
+.hlx-tree-area .hlx-tree-area-upc.vertical .cascade li,
+.hlx-tree-area-upc.vertical .hlx-tree-area .cascade li,
+.hlx-tree-area.vertical.cascade-4 > li > ul > li > ul > li > ul > li li,
+.hlx-tree-area.vertical.cascade-3 > li > ul > li > ul > li li,
+.hlx-tree-area.vertical.cascade-2 > li > ul > li li,
+.hlx-tree-area.vertical.cascade-1 > li li,
+.hlx-tree-area.vertical .cascade li {
+  display: block;
+}
+.hlx-tree-area .hlx-tree-area-upc.vertical.cascade-4 > li > ul > li > ul > li > ul > li ul:before, .hlx-tree-area .hlx-tree-area-upc.vertical.cascade-3 > li > ul > li > ul > li ul:before, .hlx-tree-area .hlx-tree-area-upc.vertical.cascade-2 > li > ul > li ul:before, .hlx-tree-area .hlx-tree-area-upc.vertical.cascade-1 > li ul:before, .hlx-tree-area .hlx-tree-area-upc.vertical .cascade ul:before, .hlx-tree-area-upc.vertical .hlx-tree-area .cascade ul:before, .hlx-tree-area.vertical.cascade-4 > li > ul > li > ul > li > ul > li ul:before, .hlx-tree-area.vertical.cascade-3 > li > ul > li > ul > li ul:before, .hlx-tree-area.vertical.cascade-2 > li > ul > li ul:before, .hlx-tree-area.vertical.cascade-1 > li ul:before, .hlx-tree-area.vertical .cascade ul:before,
+.hlx-tree-area .hlx-tree-area-upc.vertical.cascade-4 > li > ul > li > ul > li > ul > li ul:after,
+.hlx-tree-area .hlx-tree-area-upc.vertical.cascade-3 > li > ul > li > ul > li ul:after,
+.hlx-tree-area .hlx-tree-area-upc.vertical.cascade-2 > li > ul > li ul:after,
+.hlx-tree-area .hlx-tree-area-upc.vertical.cascade-1 > li ul:after,
+.hlx-tree-area .hlx-tree-area-upc.vertical .cascade ul:after,
+.hlx-tree-area-upc.vertical .hlx-tree-area .cascade ul:after,
+.hlx-tree-area.vertical.cascade-4 > li > ul > li > ul > li > ul > li ul:after,
+.hlx-tree-area.vertical.cascade-3 > li > ul > li > ul > li ul:after,
+.hlx-tree-area.vertical.cascade-2 > li > ul > li ul:after,
+.hlx-tree-area.vertical.cascade-1 > li ul:after,
+.hlx-tree-area.vertical .cascade ul:after,
+.hlx-tree-area .hlx-tree-area-upc.vertical.cascade-4 > li > ul > li > ul > li > ul > li li:before,
+.hlx-tree-area .hlx-tree-area-upc.vertical.cascade-3 > li > ul > li > ul > li li:before,
+.hlx-tree-area .hlx-tree-area-upc.vertical.cascade-2 > li > ul > li li:before,
+.hlx-tree-area .hlx-tree-area-upc.vertical.cascade-1 > li li:before,
+.hlx-tree-area .hlx-tree-area-upc.vertical .cascade li:before,
+.hlx-tree-area-upc.vertical .hlx-tree-area .cascade li:before,
+.hlx-tree-area.vertical.cascade-4 > li > ul > li > ul > li > ul > li li:before,
+.hlx-tree-area.vertical.cascade-3 > li > ul > li > ul > li li:before,
+.hlx-tree-area.vertical.cascade-2 > li > ul > li li:before,
+.hlx-tree-area.vertical.cascade-1 > li li:before,
+.hlx-tree-area.vertical .cascade li:before,
+.hlx-tree-area .hlx-tree-area-upc.vertical.cascade-4 > li > ul > li > ul > li > ul > li li:after,
+.hlx-tree-area .hlx-tree-area-upc.vertical.cascade-3 > li > ul > li > ul > li li:after,
+.hlx-tree-area .hlx-tree-area-upc.vertical.cascade-2 > li > ul > li li:after,
+.hlx-tree-area .hlx-tree-area-upc.vertical.cascade-1 > li li:after,
+.hlx-tree-area .hlx-tree-area-upc.vertical .cascade li:after,
+.hlx-tree-area-upc.vertical .hlx-tree-area .cascade li:after,
+.hlx-tree-area.vertical.cascade-4 > li > ul > li > ul > li > ul > li li:after,
+.hlx-tree-area.vertical.cascade-3 > li > ul > li > ul > li li:after,
+.hlx-tree-area.vertical.cascade-2 > li > ul > li li:after,
+.hlx-tree-area.vertical.cascade-1 > li li:after,
+.hlx-tree-area.vertical .cascade li:after {
+  border: none;
+}
+.hlx-tree-area .hlx-tree-area-upc.vertical.cascade-4 > li > ul > li > ul > li > ul > li div, .hlx-tree-area .hlx-tree-area-upc.vertical.cascade-3 > li > ul > li > ul > li div, .hlx-tree-area .hlx-tree-area-upc.vertical.cascade-2 > li > ul > li div, .hlx-tree-area .hlx-tree-area-upc.vertical.cascade-1 > li div, .hlx-tree-area .hlx-tree-area-upc.vertical .cascade div, .hlx-tree-area-upc.vertical .hlx-tree-area .cascade div, .hlx-tree-area.vertical.cascade-4 > li > ul > li > ul > li > ul > li div, .hlx-tree-area.vertical.cascade-3 > li > ul > li > ul > li div, .hlx-tree-area.vertical.cascade-2 > li > ul > li div, .hlx-tree-area.vertical.cascade-1 > li div, .hlx-tree-area.vertical .cascade div {
+  margin: 0;
+  margin-top: 12px;
+}
+.hlx-tree-area .hlx-tree-area-upc.vertical.cascade-4 > li > ul > li > ul > li > ul > li li, .hlx-tree-area .hlx-tree-area-upc.vertical.cascade-3 > li > ul > li > ul > li li, .hlx-tree-area .hlx-tree-area-upc.vertical.cascade-2 > li > ul > li li, .hlx-tree-area .hlx-tree-area-upc.vertical.cascade-1 > li li, .hlx-tree-area .hlx-tree-area-upc.vertical .cascade li, .hlx-tree-area-upc.vertical .hlx-tree-area .cascade li, .hlx-tree-area.vertical.cascade-4 > li > ul > li > ul > li > ul > li li, .hlx-tree-area.vertical.cascade-3 > li > ul > li > ul > li li, .hlx-tree-area.vertical.cascade-2 > li > ul > li li, .hlx-tree-area.vertical.cascade-1 > li li, .hlx-tree-area.vertical .cascade li {
+  margin-left: 24px;
+}
+.hlx-tree-area .hlx-tree-area-upc.vertical.cascade-4 > li > ul > li > ul > li > ul > li li:before, .hlx-tree-area .hlx-tree-area-upc.vertical.cascade-3 > li > ul > li > ul > li li:before, .hlx-tree-area .hlx-tree-area-upc.vertical.cascade-2 > li > ul > li li:before, .hlx-tree-area .hlx-tree-area-upc.vertical.cascade-1 > li li:before, .hlx-tree-area .hlx-tree-area-upc.vertical .cascade li:before, .hlx-tree-area-upc.vertical .hlx-tree-area .cascade li:before, .hlx-tree-area.vertical.cascade-4 > li > ul > li > ul > li > ul > li li:before, .hlx-tree-area.vertical.cascade-3 > li > ul > li > ul > li li:before, .hlx-tree-area.vertical.cascade-2 > li > ul > li li:before, .hlx-tree-area.vertical.cascade-1 > li li:before, .hlx-tree-area.vertical .cascade li:before {
+  border-left: 1px solid var(--hlx-border-color);
+  height: 100%;
+  width: 0;
+  top: 0;
+  left: -12px;
+}
+.hlx-tree-area .hlx-tree-area-upc.vertical.cascade-4 > li > ul > li > ul > li > ul > li li:after, .hlx-tree-area .hlx-tree-area-upc.vertical.cascade-3 > li > ul > li > ul > li li:after, .hlx-tree-area .hlx-tree-area-upc.vertical.cascade-2 > li > ul > li li:after, .hlx-tree-area .hlx-tree-area-upc.vertical.cascade-1 > li li:after, .hlx-tree-area .hlx-tree-area-upc.vertical .cascade li:after, .hlx-tree-area-upc.vertical .hlx-tree-area .cascade li:after, .hlx-tree-area.vertical.cascade-4 > li > ul > li > ul > li > ul > li li:after, .hlx-tree-area.vertical.cascade-3 > li > ul > li > ul > li li:after, .hlx-tree-area.vertical.cascade-2 > li > ul > li li:after, .hlx-tree-area.vertical.cascade-1 > li li:after, .hlx-tree-area.vertical .cascade li:after {
+  border-top: 1px solid var(--hlx-border-color);
+  width: 12px;
+  height: 0;
+  left: -12px;
+  top: 24px;
+  content: "";
+}
+.hlx-tree-area .hlx-tree-area-upc.vertical.cascade-4 > li > ul > li > ul > li > ul > li li:last-child:before, .hlx-tree-area .hlx-tree-area-upc.vertical.cascade-3 > li > ul > li > ul > li li:last-child:before, .hlx-tree-area .hlx-tree-area-upc.vertical.cascade-2 > li > ul > li li:last-child:before, .hlx-tree-area .hlx-tree-area-upc.vertical.cascade-1 > li li:last-child:before, .hlx-tree-area .hlx-tree-area-upc.vertical .cascade li:last-child:before, .hlx-tree-area-upc.vertical .hlx-tree-area .cascade li:last-child:before, .hlx-tree-area.vertical.cascade-4 > li > ul > li > ul > li > ul > li li:last-child:before, .hlx-tree-area.vertical.cascade-3 > li > ul > li > ul > li li:last-child:before, .hlx-tree-area.vertical.cascade-2 > li > ul > li li:last-child:before, .hlx-tree-area.vertical.cascade-1 > li li:last-child:before, .hlx-tree-area.vertical .cascade li:last-child:before {
+  height: 24px;
+  top: 0;
+}
+.hlx-tree-area div.card {
+  box-sizing: border-box;
+  height: -moz-max-content;
+  height: max-content;
+  line-height: 1.5;
+  padding: 10px 0 10px 10px;
+  border-radius: 7px;
+}
+.hlx-tree-area div.card .card-body {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.hlx-tree-area div.card:hover .grid.header {
+  color: getCssVar("color", "primary", "dark");
+}
+.hlx-tree-area div.card .grid {
+  width: 90%;
+  margin: 0 !important;
+  height: -moz-max-content;
+  min-height: -moz-max-content !important;
+  min-height: max-content !important;
+  gap: 10%;
+  display: grid;
+  font-size: 14px;
+  line-height: 1.5;
+  grid-template-columns: max-content auto;
+  align-items: center;
+  justify-content: center;
+}
+.hlx-tree-area div.card .grid.header {
+  width: -moz-max-content;
+  width: max-content;
+  display: flex;
+  flex-direction: column;
+  font-size: 16px;
+  font-weight: bold;
+  padding: 0;
+  border: none;
+  color: var(--hlx-color-primary);
+}
+.hlx-tree-area div.card .grid .key {
+  color: #565553;
+  font-weight: 600;
+}
+.hlx-tree-area div.card .grid .value {
+  color: #969393;
+}
+.hlx-tree-area .hide {
+  display: none !important;
+}
+.hlx-tree-area .icon-circle-filled-minus:before {
+  font-size: large;
+}
+.hlx-tree-area .icon-circle-filled-plus:before {
+  font-size: large;
+}
+
+@media only screen and (max-width: 768px) {
+  .hlx-tree-area-upc {
+    cursor: grabbing !important;
+    -webkit-user-select: none !important;
+       -moz-user-select: none !important;
+            user-select: none !important;
+    transform: translate(0px, 0px) scale(0.6) !important;
+  }
+}
+.hlx-tree-area-upc {
+  position: absolute;
+  display: flex;
+  flex-wrap: wrap;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+  font-size: 10px;
+  justify-content: center;
+  margin: 18px;
+  padding: 0;
+}
+.hlx-tree-area-upc.drag-border {
+  border: 0.4px dashed var(--hlx-border-color);
+}
+.hlx-tree-area-upc > li {
+  min-height: 400px;
+  min-width: 400px;
+}
+.hlx-tree-area-upc:not(:empty):before, .hlx-tree-area-upc:not(:empty):after,
+.hlx-tree-area-upc ul:not(:empty):before,
+.hlx-tree-area-upc ul:not(:empty):after,
+.hlx-tree-area-upc li:not(:empty):before,
+.hlx-tree-area-upc li:not(:empty):after {
+  display: block;
+  position: absolute;
+  content: "";
+}
+.hlx-tree-area-upc ul,
+.hlx-tree-area-upc li {
+  position: relative;
+  margin: 0;
+  padding: 0;
+}
+.hlx-tree-area-upc li {
+  list-style: none;
+}
+.hlx-tree-area-upc li > div.card {
+  color: var(--hlx-text-color-tree);
+  display: inline-table;
+  position: relative;
+  border-radius: 5px;
+  border: 1px solid var(--hlx-border-color);
+  max-width: 300px;
+  min-width: 200px;
+  max-height: 200px;
+  min-height: 100px;
+  padding: 5px;
+  overflow: visible;
+}
+.hlx-tree-area-upc li > div.card:hover {
+  border-color: var(--hlx-color-primary);
+  cursor: pointer;
+  cursor: pointer;
+}
+.hlx-tree-area-upc li > div > p {
+  line-height: 18px;
+  font-size: 12px;
+  font-weight: 600;
+}
+.hlx-tree-area-upc li > div > p.head-label {
+  color: var(--hlx-text-color-tree);
+  font-weight: 700;
+  margin-top: 0;
+  text-align: center;
+  font-size: 14px !important;
+  background-color: var(--hlx-color-primary);
+  color: white;
+  border-radius: 5px;
+}
+.hlx-tree-area-upc.horizontal {
+  min-height: 600px;
+  min-width: 600px;
+}
+.hlx-tree-area-upc.horizontal > li > div.card {
+  margin: 0 !important;
+}
+.hlx-tree-area-upc.horizontal > li > div.card .downIcon {
+  bottom: 37% !important;
+}
+.hlx-tree-area-upc.horizontal > li > ul > :first-child:before {
+  height: 51%;
+  top: 53%;
+}
+.hlx-tree-area-upc.horizontal > li:last-child:before {
+  height: 50%;
+  bottom: calc(50% - 6px);
+  top: auto;
+}
+.hlx-tree-area-upc.horizontal li {
+  display: flex;
+  align-items: center;
+  margin-left: 24px;
+}
+.hlx-tree-area-upc.horizontal li div.card {
+  margin: 12px 0 0 6px;
+  margin-left: 14px;
+  min-width: 150px;
+  min-height: 90px;
+  display: flex;
+  justify-content: center;
+  align-content: center;
+}
+.hlx-tree-area-upc.horizontal li div.card div.header.grid {
+  text-align: center;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  flex-wrap: wrap;
+  padding: 4px 0;
+  border: none;
+  color: getCssVar("color", "primary", "dark");
+  font-weight: bold;
+  height: auto;
+}
+.hlx-tree-area-upc.horizontal li div.card .downIcon {
+  color: var(--hlx-color-primary);
+  position: absolute;
+  bottom: 42%;
+  z-index: 100;
+  right: -0.55em !important;
+  cursor: pointer;
+  font-size: var(--hlx-font-size-xs);
+}
+.hlx-tree-area-upc.horizontal li:before {
+  position: absolute;
+  border-left: 1px solid #54bd95;
+  height: 100%;
+  font-weight: 700;
+  width: 0;
+  top: 0;
+}
+.hlx-tree-area-upc.horizontal li:first-child:before {
+  height: 51%;
+  top: 55%;
+}
+.hlx-tree-area-upc.horizontal li:last-child:before {
+  height: 50%;
+  bottom: calc(50% - 6px);
+  top: auto;
+}
+.hlx-tree-area-upc.horizontal li:after {
+  border-top: 1px solid #54bd95;
+  height: 0;
+  width: 15px;
+  font-weight: 700;
+  top: calc(50% + 6px);
+}
+.hlx-tree-area-upc.horizontal li ul:after {
+  border-top: 1px solid #54bd95;
+  height: 0;
+  width: 25px;
+  font-weight: 700;
+  top: calc(50% + 6px);
+}
+.hlx-tree-area-upc.horizontal li:only-child:before {
+  content: none;
+}
+.hlx-tree-area-upc.horizontal li ul:after {
+  left: 0;
+}
+.hlx-tree-area-upc.horizontal > li:only-child {
+  margin-left: 0;
+}
+.hlx-tree-area-upc.horizontal > li:only-child:before, .hlx-tree-area-upc.horizontal > li:only-child:after {
+  content: none;
+}
+.hlx-tree-area-upc.cascade li {
+  margin-left: 24px;
+}
+.hlx-tree-area-upc.cascade li div {
+  margin-top: 12px;
+}
+.hlx-tree-area-upc.cascade li:before {
+  border-left: 1px solid #54bd95;
+  height: 100%;
+  width: 0;
+  top: 0;
+  left: -12px;
+}
+.hlx-tree-area-upc.cascade li:after {
+  border-top: 1px solid #54bd95;
+  width: 12px;
+  left: -12px;
+  top: 24px;
+}
+.hlx-tree-area-upc.cascade li:last-child:before {
+  height: 24px;
+  top: 0;
+}
+.hlx-tree-area-upc.cascade > li:first-child:before {
+  top: 24px;
+}
+.hlx-tree-area-upc.cascade > li:only-child {
+  margin-left: 0;
+}
+.hlx-tree-area-upc.cascade > li:only-child:before, .hlx-tree-area-upc.cascade > li:only-child:after {
+  content: none;
+}
+.hlx-tree-area-upc.vertical {
+  display: flex;
+}
+.hlx-tree-area-upc.vertical ul {
+  display: flex;
+  justify-content: center;
+}
+.hlx-tree-area-upc.vertical li {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.hlx-tree-area-upc.vertical li div.card {
+  margin: 12px 6px;
+  min-width: 150px;
+  min-height: 90px;
+  display: flex;
+  justify-content: center;
+  align-content: center;
+}
+.hlx-tree-area-upc.vertical li div.card div.box {
+  padding: 10px 10px 0px !important;
+}
+.hlx-tree-area-upc.vertical li div.card div.box .grid {
+  width: 100%;
+}
+.hlx-tree-area-upc.vertical li div.card .collapseIcon {
+  background-color: white;
+  color: var(--hlx-color-primary);
+  position: absolute;
+  bottom: -0.4em;
+  z-index: 100;
+  font-size: var(--hlx-font-size-xs);
+  right: 47.5% !important;
+  cursor: pointer;
+  width: 9px;
+  height: 8px;
+  border-radius: 100%;
+}
+.hlx-tree-area-upc.vertical li div.card .downIcon {
+  color: var(--hlx-color-primary);
+  position: relative;
+  bottom: 0.5em;
+  z-index: 100;
+  font-size: var(--hlx-font-size-xs);
+  right: 45.5% !important;
+  cursor: pointer;
+}
+.hlx-tree-area-upc.vertical li:before {
+  border-left: 1px solid #54bd95;
+  height: 12px;
+  width: 0;
+  top: 0;
+}
+.hlx-tree-area-upc.vertical li:after {
+  border-top: 1px solid #54bd95;
+  height: 0;
+  width: 100%;
+}
+.hlx-tree-area-upc.vertical li:first-child:after {
+  border-top: 1px solid #54bd95;
+  height: 0;
+  width: 50%;
+  left: 50%;
+}
+.hlx-tree-area-upc.vertical li:last-child:after {
+  border-top: 1px solid #54bd95;
+  height: 0;
+  width: 50%;
+  right: 50%;
+}
+.hlx-tree-area-upc.vertical li:only-child:after {
+  content: none;
+}
+.hlx-tree-area-upc.vertical li ul:before {
+  border-left: 1px solid #54bd95;
+  height: 12px;
+  width: 0;
+  top: -12px;
+}
+.hlx-tree-area-upc.vertical li ul:after {
+  border-left: 1px solid #54bd95;
+  height: 12px;
+  width: 0;
+  top: -12px;
+}
+.hlx-tree-area-upc.vertical > li:only-child:before, .hlx-tree-area-upc.vertical > li:only-child:after {
+  content: none;
+}
+.hlx-tree-area-upc.vertical.cascade-4 > li > ul > li > ul > li > ul > li, .hlx-tree-area-upc.vertical.cascade-3 > li > ul > li > ul > li, .hlx-tree-area-upc.vertical.cascade-2 > li > ul > li, .hlx-tree-area-upc.vertical.cascade-1 > li, .hlx-tree-area-upc.vertical .cascade, .hlx-tree-area-upc .hlx-tree-area.vertical .cascade, .hlx-tree-area.vertical .hlx-tree-area-upc .cascade, .hlx-tree-area-upc .hlx-tree-area.vertical.cascade-1 > li, .hlx-tree-area-upc .hlx-tree-area.vertical.cascade-2 > li > ul > li, .hlx-tree-area-upc .hlx-tree-area.vertical.cascade-3 > li > ul > li > ul > li, .hlx-tree-area-upc .hlx-tree-area.vertical.cascade-4 > li > ul > li > ul > li > ul > li {
+  flex-direction: column;
+  align-items: start;
+  padding: 0 12px;
+}
+.hlx-tree-area-upc.vertical.cascade-4 > li > ul > li > ul > li > ul > li:before, .hlx-tree-area-upc.vertical.cascade-3 > li > ul > li > ul > li:before, .hlx-tree-area-upc.vertical.cascade-2 > li > ul > li:before, .hlx-tree-area-upc.vertical.cascade-1 > li:before, .hlx-tree-area-upc.vertical .cascade:before, .hlx-tree-area-upc .hlx-tree-area.vertical .cascade:before, .hlx-tree-area.vertical .hlx-tree-area-upc .cascade:before, .hlx-tree-area-upc .hlx-tree-area.vertical.cascade-1 > li:before, .hlx-tree-area-upc .hlx-tree-area.vertical.cascade-2 > li > ul > li:before, .hlx-tree-area-upc .hlx-tree-area.vertical.cascade-3 > li > ul > li > ul > li:before, .hlx-tree-area-upc .hlx-tree-area.vertical.cascade-4 > li > ul > li > ul > li > ul > li:before {
+  left: 24px;
+}
+.hlx-tree-area-upc.vertical.cascade-4 > li > ul > li > ul > li > ul > li:after, .hlx-tree-area-upc.vertical.cascade-3 > li > ul > li > ul > li:after, .hlx-tree-area-upc.vertical.cascade-2 > li > ul > li:after, .hlx-tree-area-upc.vertical.cascade-1 > li:after, .hlx-tree-area-upc.vertical .cascade:after, .hlx-tree-area-upc .hlx-tree-area.vertical .cascade:after, .hlx-tree-area.vertical .hlx-tree-area-upc .cascade:after, .hlx-tree-area-upc .hlx-tree-area.vertical.cascade-1 > li:after, .hlx-tree-area-upc .hlx-tree-area.vertical.cascade-2 > li > ul > li:after, .hlx-tree-area-upc .hlx-tree-area.vertical.cascade-3 > li > ul > li > ul > li:after, .hlx-tree-area-upc .hlx-tree-area.vertical.cascade-4 > li > ul > li > ul > li > ul > li:after {
+  left: 0;
+}
+.hlx-tree-area-upc.vertical.cascade-4 > li > ul > li > ul > li > ul > li:first-child:after, .hlx-tree-area-upc.vertical.cascade-3 > li > ul > li > ul > li:first-child:after, .hlx-tree-area-upc.vertical.cascade-2 > li > ul > li:first-child:after, .hlx-tree-area-upc.vertical.cascade-1 > li:first-child:after, .hlx-tree-area-upc.vertical .cascade:first-child:after, .hlx-tree-area-upc .hlx-tree-area.vertical .cascade:first-child:after, .hlx-tree-area.vertical .hlx-tree-area-upc .cascade:first-child:after, .hlx-tree-area-upc .hlx-tree-area.vertical.cascade-1 > li:first-child:after, .hlx-tree-area-upc .hlx-tree-area.vertical.cascade-2 > li > ul > li:first-child:after, .hlx-tree-area-upc .hlx-tree-area.vertical.cascade-3 > li > ul > li > ul > li:first-child:after, .hlx-tree-area-upc .hlx-tree-area.vertical.cascade-4 > li > ul > li > ul > li > ul > li:first-child:after {
+  left: 24px;
+  width: 100%;
+}
+.hlx-tree-area-upc.vertical.cascade-4 > li > ul > li > ul > li > ul > li:last-child:after, .hlx-tree-area-upc.vertical.cascade-3 > li > ul > li > ul > li:last-child:after, .hlx-tree-area-upc.vertical.cascade-2 > li > ul > li:last-child:after, .hlx-tree-area-upc.vertical.cascade-1 > li:last-child:after, .hlx-tree-area-upc.vertical .cascade:last-child:after, .hlx-tree-area-upc .hlx-tree-area.vertical .cascade:last-child:after, .hlx-tree-area.vertical .hlx-tree-area-upc .cascade:last-child:after, .hlx-tree-area-upc .hlx-tree-area.vertical.cascade-1 > li:last-child:after, .hlx-tree-area-upc .hlx-tree-area.vertical.cascade-2 > li > ul > li:last-child:after, .hlx-tree-area-upc .hlx-tree-area.vertical.cascade-3 > li > ul > li > ul > li:last-child:after, .hlx-tree-area-upc .hlx-tree-area.vertical.cascade-4 > li > ul > li > ul > li > ul > li:last-child:after {
+  left: 0;
+  width: 24px;
+}
+.hlx-tree-area-upc.vertical.cascade-4 > li > ul > li > ul > li > ul > li ul, .hlx-tree-area-upc.vertical.cascade-3 > li > ul > li > ul > li ul, .hlx-tree-area-upc.vertical.cascade-2 > li > ul > li ul, .hlx-tree-area-upc.vertical.cascade-1 > li ul, .hlx-tree-area-upc.vertical .cascade ul, .hlx-tree-area-upc .hlx-tree-area.vertical .cascade ul, .hlx-tree-area.vertical .hlx-tree-area-upc .cascade ul, .hlx-tree-area-upc .hlx-tree-area.vertical.cascade-1 > li ul, .hlx-tree-area-upc .hlx-tree-area.vertical.cascade-2 > li > ul > li ul, .hlx-tree-area-upc .hlx-tree-area.vertical.cascade-3 > li > ul > li > ul > li ul, .hlx-tree-area-upc .hlx-tree-area.vertical.cascade-4 > li > ul > li > ul > li > ul > li ul,
+.hlx-tree-area-upc.vertical.cascade-4 > li > ul > li > ul > li > ul > li li,
+.hlx-tree-area-upc.vertical.cascade-3 > li > ul > li > ul > li li,
+.hlx-tree-area-upc.vertical.cascade-2 > li > ul > li li,
+.hlx-tree-area-upc.vertical.cascade-1 > li li,
+.hlx-tree-area-upc.vertical .cascade li,
+.hlx-tree-area-upc .hlx-tree-area.vertical .cascade li,
+.hlx-tree-area.vertical .hlx-tree-area-upc .cascade li,
+.hlx-tree-area-upc .hlx-tree-area.vertical.cascade-1 > li li,
+.hlx-tree-area-upc .hlx-tree-area.vertical.cascade-2 > li > ul > li li,
+.hlx-tree-area-upc .hlx-tree-area.vertical.cascade-3 > li > ul > li > ul > li li,
+.hlx-tree-area-upc .hlx-tree-area.vertical.cascade-4 > li > ul > li > ul > li > ul > li li {
+  display: block;
+}
+.hlx-tree-area-upc.vertical.cascade-4 > li > ul > li > ul > li > ul > li ul:before, .hlx-tree-area-upc.vertical.cascade-3 > li > ul > li > ul > li ul:before, .hlx-tree-area-upc.vertical.cascade-2 > li > ul > li ul:before, .hlx-tree-area-upc.vertical.cascade-1 > li ul:before, .hlx-tree-area-upc.vertical .cascade ul:before, .hlx-tree-area-upc .hlx-tree-area.vertical .cascade ul:before, .hlx-tree-area.vertical .hlx-tree-area-upc .cascade ul:before, .hlx-tree-area-upc .hlx-tree-area.vertical.cascade-1 > li ul:before, .hlx-tree-area-upc .hlx-tree-area.vertical.cascade-2 > li > ul > li ul:before, .hlx-tree-area-upc .hlx-tree-area.vertical.cascade-3 > li > ul > li > ul > li ul:before, .hlx-tree-area-upc .hlx-tree-area.vertical.cascade-4 > li > ul > li > ul > li > ul > li ul:before,
+.hlx-tree-area-upc.vertical.cascade-4 > li > ul > li > ul > li > ul > li ul:after,
+.hlx-tree-area-upc.vertical.cascade-3 > li > ul > li > ul > li ul:after,
+.hlx-tree-area-upc.vertical.cascade-2 > li > ul > li ul:after,
+.hlx-tree-area-upc.vertical.cascade-1 > li ul:after,
+.hlx-tree-area-upc.vertical .cascade ul:after,
+.hlx-tree-area-upc .hlx-tree-area.vertical .cascade ul:after,
+.hlx-tree-area.vertical .hlx-tree-area-upc .cascade ul:after,
+.hlx-tree-area-upc .hlx-tree-area.vertical.cascade-1 > li ul:after,
+.hlx-tree-area-upc .hlx-tree-area.vertical.cascade-2 > li > ul > li ul:after,
+.hlx-tree-area-upc .hlx-tree-area.vertical.cascade-3 > li > ul > li > ul > li ul:after,
+.hlx-tree-area-upc .hlx-tree-area.vertical.cascade-4 > li > ul > li > ul > li > ul > li ul:after,
+.hlx-tree-area-upc.vertical.cascade-4 > li > ul > li > ul > li > ul > li li:before,
+.hlx-tree-area-upc.vertical.cascade-3 > li > ul > li > ul > li li:before,
+.hlx-tree-area-upc.vertical.cascade-2 > li > ul > li li:before,
+.hlx-tree-area-upc.vertical.cascade-1 > li li:before,
+.hlx-tree-area-upc.vertical .cascade li:before,
+.hlx-tree-area-upc .hlx-tree-area.vertical .cascade li:before,
+.hlx-tree-area.vertical .hlx-tree-area-upc .cascade li:before,
+.hlx-tree-area-upc .hlx-tree-area.vertical.cascade-1 > li li:before,
+.hlx-tree-area-upc .hlx-tree-area.vertical.cascade-2 > li > ul > li li:before,
+.hlx-tree-area-upc .hlx-tree-area.vertical.cascade-3 > li > ul > li > ul > li li:before,
+.hlx-tree-area-upc .hlx-tree-area.vertical.cascade-4 > li > ul > li > ul > li > ul > li li:before,
+.hlx-tree-area-upc.vertical.cascade-4 > li > ul > li > ul > li > ul > li li:after,
+.hlx-tree-area-upc.vertical.cascade-3 > li > ul > li > ul > li li:after,
+.hlx-tree-area-upc.vertical.cascade-2 > li > ul > li li:after,
+.hlx-tree-area-upc.vertical.cascade-1 > li li:after,
+.hlx-tree-area-upc.vertical .cascade li:after,
+.hlx-tree-area-upc .hlx-tree-area.vertical .cascade li:after,
+.hlx-tree-area.vertical .hlx-tree-area-upc .cascade li:after,
+.hlx-tree-area-upc .hlx-tree-area.vertical.cascade-1 > li li:after,
+.hlx-tree-area-upc .hlx-tree-area.vertical.cascade-2 > li > ul > li li:after,
+.hlx-tree-area-upc .hlx-tree-area.vertical.cascade-3 > li > ul > li > ul > li li:after,
+.hlx-tree-area-upc .hlx-tree-area.vertical.cascade-4 > li > ul > li > ul > li > ul > li li:after {
+  border: none;
+}
+.hlx-tree-area-upc.vertical.cascade-4 > li > ul > li > ul > li > ul > li div, .hlx-tree-area-upc.vertical.cascade-3 > li > ul > li > ul > li div, .hlx-tree-area-upc.vertical.cascade-2 > li > ul > li div, .hlx-tree-area-upc.vertical.cascade-1 > li div, .hlx-tree-area-upc.vertical .cascade div, .hlx-tree-area-upc .hlx-tree-area.vertical .cascade div, .hlx-tree-area.vertical .hlx-tree-area-upc .cascade div, .hlx-tree-area-upc .hlx-tree-area.vertical.cascade-1 > li div, .hlx-tree-area-upc .hlx-tree-area.vertical.cascade-2 > li > ul > li div, .hlx-tree-area-upc .hlx-tree-area.vertical.cascade-3 > li > ul > li > ul > li div, .hlx-tree-area-upc .hlx-tree-area.vertical.cascade-4 > li > ul > li > ul > li > ul > li div {
+  margin: 0;
+  margin-top: 12px;
+}
+.hlx-tree-area-upc.vertical.cascade-4 > li > ul > li > ul > li > ul > li li, .hlx-tree-area-upc.vertical.cascade-3 > li > ul > li > ul > li li, .hlx-tree-area-upc.vertical.cascade-2 > li > ul > li li, .hlx-tree-area-upc.vertical.cascade-1 > li li, .hlx-tree-area-upc.vertical .cascade li, .hlx-tree-area-upc .hlx-tree-area.vertical .cascade li, .hlx-tree-area.vertical .hlx-tree-area-upc .cascade li, .hlx-tree-area-upc .hlx-tree-area.vertical.cascade-1 > li li, .hlx-tree-area-upc .hlx-tree-area.vertical.cascade-2 > li > ul > li li, .hlx-tree-area-upc .hlx-tree-area.vertical.cascade-3 > li > ul > li > ul > li li, .hlx-tree-area-upc .hlx-tree-area.vertical.cascade-4 > li > ul > li > ul > li > ul > li li {
+  margin-left: 24px;
+}
+.hlx-tree-area-upc.vertical.cascade-4 > li > ul > li > ul > li > ul > li li:before, .hlx-tree-area-upc.vertical.cascade-3 > li > ul > li > ul > li li:before, .hlx-tree-area-upc.vertical.cascade-2 > li > ul > li li:before, .hlx-tree-area-upc.vertical.cascade-1 > li li:before, .hlx-tree-area-upc.vertical .cascade li:before, .hlx-tree-area-upc .hlx-tree-area.vertical .cascade li:before, .hlx-tree-area.vertical .hlx-tree-area-upc .cascade li:before, .hlx-tree-area-upc .hlx-tree-area.vertical.cascade-1 > li li:before, .hlx-tree-area-upc .hlx-tree-area.vertical.cascade-2 > li > ul > li li:before, .hlx-tree-area-upc .hlx-tree-area.vertical.cascade-3 > li > ul > li > ul > li li:before, .hlx-tree-area-upc .hlx-tree-area.vertical.cascade-4 > li > ul > li > ul > li > ul > li li:before {
+  border-left: 1px solid #54bd95;
+  height: 100%;
+  width: 0;
+  top: 0;
+  left: -12px;
+}
+.hlx-tree-area-upc.vertical.cascade-4 > li > ul > li > ul > li > ul > li li:after, .hlx-tree-area-upc.vertical.cascade-3 > li > ul > li > ul > li li:after, .hlx-tree-area-upc.vertical.cascade-2 > li > ul > li li:after, .hlx-tree-area-upc.vertical.cascade-1 > li li:after, .hlx-tree-area-upc.vertical .cascade li:after, .hlx-tree-area-upc .hlx-tree-area.vertical .cascade li:after, .hlx-tree-area.vertical .hlx-tree-area-upc .cascade li:after, .hlx-tree-area-upc .hlx-tree-area.vertical.cascade-1 > li li:after, .hlx-tree-area-upc .hlx-tree-area.vertical.cascade-2 > li > ul > li li:after, .hlx-tree-area-upc .hlx-tree-area.vertical.cascade-3 > li > ul > li > ul > li li:after, .hlx-tree-area-upc .hlx-tree-area.vertical.cascade-4 > li > ul > li > ul > li > ul > li li:after {
+  border-top: 1px solid #54bd95;
+  width: 12px;
+  height: 0;
+  left: -12px;
+  top: 24px;
+  content: "";
+}
+.hlx-tree-area-upc.vertical.cascade-4 > li > ul > li > ul > li > ul > li li:last-child:before, .hlx-tree-area-upc.vertical.cascade-3 > li > ul > li > ul > li li:last-child:before, .hlx-tree-area-upc.vertical.cascade-2 > li > ul > li li:last-child:before, .hlx-tree-area-upc.vertical.cascade-1 > li li:last-child:before, .hlx-tree-area-upc.vertical .cascade li:last-child:before, .hlx-tree-area-upc .hlx-tree-area.vertical .cascade li:last-child:before, .hlx-tree-area.vertical .hlx-tree-area-upc .cascade li:last-child:before, .hlx-tree-area-upc .hlx-tree-area.vertical.cascade-1 > li li:last-child:before, .hlx-tree-area-upc .hlx-tree-area.vertical.cascade-2 > li > ul > li li:last-child:before, .hlx-tree-area-upc .hlx-tree-area.vertical.cascade-3 > li > ul > li > ul > li li:last-child:before, .hlx-tree-area-upc .hlx-tree-area.vertical.cascade-4 > li > ul > li > ul > li > ul > li li:last-child:before {
+  height: 24px;
+  top: 0;
+}
+.hlx-tree-area-upc div.card {
+  box-sizing: border-box;
+  height: -moz-max-content;
+  height: max-content;
+  line-height: 1.5;
+  padding: 10px 0 10px 10px;
+  border-radius: 7px;
+}
+.hlx-tree-area-upc div.card .card-body {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 5px;
+  line-height: normal !important;
+}
+.hlx-tree-area-upc div.card:hover .grid.header {
+  color: getCssVar("color", "primary", "dark");
+}
+.hlx-tree-area-upc div.card .grid {
+  width: 90%;
+  margin: 0 !important;
+  height: -moz-max-content;
+  min-height: -moz-max-content !important;
+  min-height: max-content !important;
+  gap: 5%;
+  display: grid;
+  font-size: 14px;
+  line-height: 1.5;
+  grid-template-columns: max-content auto;
+  align-items: center;
+  justify-content: center;
+}
+.hlx-tree-area-upc div.card .grid.header {
+  width: -moz-max-content;
+  width: max-content;
+  display: flex;
+  flex-direction: row;
+  font-size: 14px;
+  text-align: center;
+  font-family: QuickSand;
+  font-weight: 600;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  padding: 0;
+  border: none;
+  color: #191a15;
+}
+.hlx-tree-area-upc div.card .grid .key {
+  color: #565553;
+  font-weight: 600;
+}
+.hlx-tree-area-upc div.card .grid .value {
+  color: #969393;
+}
+.hlx-tree-area-upc .hide {
+  display: none !important;
+}
+.hlx-tree-area-upc .icon-circle-filled-minus:before {
+  font-size: large;
+}
+.hlx-tree-area-upc .icon-circle-filled-plus:before {
+  font-size: large;
+}/*# sourceMappingURL=tree.css.map */