.hlx-tree-area {
  position: absolute;
  display: flex;
  flex-wrap: wrap;
  user-select: none;
  font-size: 10px;

  &.drag-border {
    border: 0.4px dashed var(--hlx-border-color);
  }
  & > li {
    min-height: 400px;
    min-width: 400px;
  }
  justify-content: center;
  $color: #222;
  $background-color: white;
  $border-weight: 1px;
  $margin: 12px;
  margin: calc($margin * 1.5);
  padding: 0;

  &:not(:empty):before,
  &:not(:empty):after,
  ul:not(:empty):before,
  ul:not(:empty):after,
  li:not(:empty):before,
  li:not(:empty):after {
    display: block;
    position: absolute;
    content: "";
  }

  ul,
  li {
    position: relative;
    margin: 0;
    padding: 0;
  }

  li {
    list-style: none;
  }
  li > div.card {
    color: var(--hlx-text-color-tree);
    display: inline-table;
    position: relative;
    border-radius: 5px;
    border: 1px solid var(--hlx-border-color);

    // background-color: $background-color;
    width: 200px;
    height: 100px;
    min-height: 100px;
    padding: 5px;
    overflow: visible;
    &:hover {
      border-color: var(--hlx-color-primary);
      cursor: pointer;
      cursor: pointer;
    }
  }
  li > div > p {
    line-height: 18px;
    font-size: 12px;
    font-weight: 600;
    &.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;
    }
  }
  //@Horizontal view
  &.horizontal {
    min-height: 600px;
    min-width: 600px;
    & > li > div.card {
      margin: 0 !important;
      i {
        bottom: 37% !important;
      }
    }
    & > li > ul > :first-child:before {
      height: 51%;
      top: 53%;
    }

    & > li:last-child:before {
      height: 50%;
      bottom: calc(50% - $margin/2);
      top: auto;
    }
    li {
      display: flex;
      align-items: center;
      margin-left: calc($margin * 2);

      div.card {
        // margin: 0px 0px 10px 15px;
        margin: $margin 0 0 calc($margin/2);
        margin-left: 14px;

        min-width: 150px;
        min-height: 90px;
        display: flex;
        justify-content: center;
        align-content: center;
        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;
        }
        // div.box {
        //   height: max-content;
        //   line-height: 1.5;
        //   &:hover{
        //     .grid {
        //       .key {
        //         color:getCssVar('color', 'primary','dark');
        //       }
        //   }
        // // }
        //   // padding: 10px 0 10px 10px;
        //   .grid {
        //     .key {
        //       // color: var(--bg-color);
        //     }
        //     .value {
        //       // color: var(--sub-color);
        //     }
        //   }
        // }

        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);
        }
      }

      &:before {
        position: absolute;
        border-left: $border-weight solid var(--hlx-border-color);
        height: 100%;
        font-weight: 700;
        width: 0;
        top: 0;
      }

      &:first-child:before {
        height: 51%;
        top: 55%;
      }

      &:last-child:before {
        height: 50%;
        bottom: calc(50% - $margin/2);
        top: auto;
      }

      &:after {
        border-top: $border-weight solid var(--hlx-border-color);
        height: 0;
        width: 15px;
        font-weight: 700;

        top: calc(50% + $margin/2);
      }

      ul:after {
        border-top: $border-weight solid var(--hlx-border-color);
        height: 0;
        width: 25px;
        font-weight: 700;
        top: calc(50% + $margin/2);
      }

      &:only-child:before {
        content: none;
      }

      ul:after {
        left: 0;
      }
    }

    & > li {
      &:only-child {
        margin-left: 0;
      }

      &:only-child:before,
      &:only-child:after {
        content: none;
      }
    }
  }

  &.cascade {
    li {
      margin-left: 2 * $margin;

      div {
        margin-top: $margin;
      }

      &:before {
        border-left: $border-weight solid var(--hlx-border-color);
        height: 100%;
        width: 0;
        top: 0;
        left: -$margin;
      }

      &:after {
        border-top: $border-weight solid var(--hlx-border-color);
        width: $margin;
        left: -$margin;
        top: calc($margin * 2);
      }

      &:last-child:before {
        height: calc($margin * 2);
        top: 0;
      }
    }

    & > li {
      &:first-child:before {
        top: calc($margin * 2);
      }

      &:only-child {
        margin-left: 0;
      }

      &:only-child:before,
      &:only-child:after {
        content: none;
      }
    }
  }

  &.vertical {
    display: flex;

    ul {
      display: flex;
      justify-content: center;
    }

    li {
      display: flex;
      flex-direction: column;
      align-items: center;

      div.card {
        margin: $margin calc($margin/2);
        min-width: 150px;
        min-height: 90px;
        display: flex;
        justify-content: center;
        align-content: center;
        div.box {
          padding: 10px 10px 0px !important;
          .grid {
            width: 100%;
          }
        }

        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;
        }

        // }
      }

      &:before {
        border-left: $border-weight solid var(--hlx-border-color);
        height: $margin;
        width: 0;
        top: 0;
      }

      &:after {
        border-top: $border-weight solid var(--hlx-border-color);
        height: 0;
        width: 100%;
      }

      &:first-child:after {
        border-top: $border-weight solid var(--hlx-border-color);
        height: 0;
        width: 50%;
        left: 50%;
      }

      &:last-child:after {
        border-top: $border-weight solid var(--hlx-border-color);
        height: 0;
        width: 50%;
        right: 50%;
      }

      &:only-child:after {
        content: none;
      }

      ul:before {
        border-left: $border-weight solid var(--hlx-border-color);
        height: $margin;
        width: 0;
        top: -$margin;
      }

      ul:after {
        border-left: $border-weight solid var(--hlx-border-color);
        height: $margin;
        width: 0;
        top: -$margin;
      }
    }

    & > li {
      &:only-child:before,
      &:only-child:after {
        content: none;
      }
    }
  }

  %subcascade {
    flex-direction: column;
    align-items: start;
    padding: 0 $margin;

    &:before {
      left: 2 * $margin;
    }

    &:after {
      left: 0;
    }

    &:first-child:after {
      left: 2 * $margin;
      width: 100%;
    }

    &:last-child:after {
      left: 0;
      width: 2 * $margin;
    }

    ul,
    li {
      display: block;
    }

    ul:before,
    ul:after,
    li:before,
    li:after {
      border: none;
    }

    div {
      margin: 0;
      margin-top: $margin;
    }

    li {
      margin-left: 2 * $margin;

      &:before {
        border-left: $border-weight solid var(--hlx-border-color);
        height: 100%;
        width: 0;
        top: 0;
        left: -$margin;
      }

      &:after {
        border-top: $border-weight solid var(--hlx-border-color);
        width: $margin;
        height: 0;
        left: -$margin;
        top: calc($margin * 2);
        content: "";
      }

      &:last-child:before {
        height: calc($margin * 2);
        top: 0;
      }
    }
  }

  &.vertical .cascade {
    @extend %subcascade;
  }

  &.vertical.cascade-1 {
    & > li {
      @extend %subcascade;
    }
  }

  &.vertical.cascade-2 {
    & > li > ul > li {
      @extend %subcascade;
    }
  }

  &.vertical.cascade-3 {
    & > li > ul > li > ul > li {
      @extend %subcascade;
    }
  }

  &.vertical.cascade-4 {
    & > li > ul > li > ul > li > ul > li {
      @extend %subcascade;
    }
  }
  $border: var(--hlx-border-color-dark);
  div.card {
    box-sizing: border-box;
    // max-width: 300px;
    height: max-content;

    line-height: 1.5;
    padding: 10px 0 10px 10px;
    border-radius: 7px;

    .card-body {
      display: flex;
      justify-content: center;
      align-items: center;
    }
    &:hover {
      .grid.header {
        color: getCssVar("color", "primary", "dark");
      }
    }
    .grid {
      &.header {
        width: max-content;
        display: flex;
        flex-direction: column;
        font-size: 16px;
        font-weight: bold;
        padding: 0;
        border: none;
        color: var(--hlx-color-primary);
      }
      width: 90%;
      margin: 0 !important;
      height: -webkit-max-content !important;
      height: -moz-max-content;
      min-height: -webkit-max-content !important;
      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: -webkit-max-content auto;
      grid-template-columns: max-content auto;
      align-items: center;
      justify-content: center;

      .key {
        color: #565553;
        font-weight: 600;
      }
      .value {
        color: #969393;
      }
    }
  }

  .hide {
    display: none !important;
  }
  .icon-circle-filled-minus:before {
    font-size: large;
  }
  .icon-circle-filled-plus:before {
    font-size: large;
  }
}
.hlx-tree-area-upc {
  // position: absolute;
  // display: flex;
  // flex-wrap: wrap;
  // // user-select: none;
  // font-size: 10px;

  // &.drag-border {
  //   border: 0.4px dashed var(--hlx-border-color);
  // }
  // & > li {
  //   min-height: 400px;
  //   min-width: 400px;
  // }
  // justify-content: center;
  $color: #222;
  $background-color: white;
  $border-weight: 2px;
  $margin: 35px;
  // margin: 0.5px;
  // padding: 0;

  &:not(:empty):before,
  &:not(:empty):after,
  ul:not(:empty):before,
  ul:not(:empty):after,
  li:not(:empty):before,
  li:not(:empty):after {
    display: block;
    position: absolute;
    content: "";
  }

  ul,
  li {
    position: relative;
    margin: 0;
    padding: 0;
  }

  li {
    list-style: none;
  }
  li > div.card {
    color: var(--hlx-text-color-tree);
    display: inline-table;
    position: relative;
    border-radius: 5px;
    border: 1px solid var(--hlx-border-color);

    // background-color: $background-color;
    max-width: 300px;
    min-width: 200px;
    max-height: 200px;
    min-height: 100px;
    padding: 5px;
    overflow: visible;
    &:hover {
      border-color: var(--hlx-color-primary);
      cursor: pointer;
      cursor: pointer;
    }
  }
  li > div > p {
    line-height: 18px;
    font-size: 12px;
    font-weight: 600;
    &.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;
    }
  }
  //@Horizontal view
  &.horizontal {
    min-height: 600px;
    min-width: 600px;
    & > li > div.card {
      margin: 0 !important;
      .downIcon {
        bottom: 37% !important;
      }
    }
    & > li > ul > :first-child:before {
      height: 51%;
      top: 53%;
    }

    & > li:last-child:before {
      height: 50%;
      bottom: calc(50% - $margin/2);
      top: auto;
    }
    li {
      display: flex;
      align-items: center;
      margin-left: calc($margin * 2);

      div.card {
        // margin: 0px 0px 10px 15px;
        margin: $margin 0 0 calc($margin/2);
        margin-left: 14px;

        min-width: 150px;
        min-height: 90px;
        display: flex;
        justify-content: center;
        align-content: center;
        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;
        }
        // div.box {
        //   height: max-content;
        //   line-height: 1.5;
        //   &:hover{
        //     .grid {
        //       .key {
        //         color:getCssVar('color', 'primary','dark');
        //       }
        //   }
        // // }
        //   // padding: 10px 0 10px 10px;
        //   .grid {
        //     .key {
        //       // color: var(--bg-color);
        //     }
        //     .value {
        //       // color: var(--sub-color);
        //     }
        //   }
        // }

        .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);
        }
      }

      &:before {
        position: absolute;
        border-left: $border-weight solid #54bd95;
        height: 100%;
        font-weight: 700;
        width: 0;
        top: 0;
      }

      &:first-child:before {
        height: 51%;
        top: 55%;
      }

      &:last-child:before {
        height: 50%;
        bottom: calc(50% - $margin/2);
        top: auto;
      }

      &:after {
        border-top: $border-weight solid #54bd95;
        height: 0;
        width: 15px;
        font-weight: 700;

        top: calc(50% + $margin/2);
      }

      ul:after {
        border-top: $border-weight solid #54bd95;
        height: 0;
        width: 25px;
        font-weight: 700;
        top: calc(50% + $margin/2);
      }

      &:only-child:before {
        content: none;
      }

      ul:after {
        left: 0;
      }
    }

    & > li {
      &:only-child {
        margin-left: 0;
      }

      &:only-child:before,
      &:only-child:after {
        content: none;
      }
    }
  }

  &.cascade {
    li {
      margin-left: 2 * $margin;

      div {
        margin-top: $margin;
      }

      &:before {
        border-left: $border-weight solid #54bd95;
        height: 100%;
        width: 0;
        top: 0;
        left: -$margin;
      }

      &:after {
        border-top: $border-weight solid #54bd95;
        width: $margin;
        left: -$margin;
        top: calc($margin * 2);
      }

      &:last-child:before {
        height: calc($margin * 2);
        top: 0;
      }
    }

    & > li {
      &:first-child:before {
        top: calc($margin * 2);
      }

      &:only-child {
        margin-left: 0;
      }

      &:only-child:before,
      &:only-child:after {
        content: none;
      }
    }
  }

  &.vertical {
    display: flex;

    ul {
      display: flex;
      justify-content: center;
    }

    li {
      display: flex;
      flex-direction: column;
      align-items: center;

      div.card {
        margin: $margin calc($margin/2);
        min-width: 150px;
        min-height: 90px;
        display: flex;
        justify-content: center;
        align-content: center;
        div.box {
          padding: 10px 10px 0px !important;
          .grid {
            width: 100%;
          }
        }
.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%;
}
        .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;
      }
          
        

        // }
      }

      &:before {
        border-left: $border-weight solid #54bd95;
        height: $margin;
        width: 0;
        top: 0;
      }

      &:after {
        border-top: $border-weight solid #54bd95;
        height: 0;
        width: 100%;
      }

      &:first-child:after {
        border-top: $border-weight solid #54bd95;
        height: 0;
        width: 50%;
        left: 50%;
      }

      &:last-child:after {
        border-top: $border-weight solid #54bd95;
        height: 0;
        width: 50%;
        right: 50%;
      }

      &:only-child:after {
        content: none;
      }

      ul:before {
        border-left: $border-weight solid #54bd95;
        height: $margin;
        width: 0;
        top: -$margin;
      }

      ul:after {
        border-left: $border-weight solid#54bd95 ;
        height: $margin;
        width: 0;
        top: -$margin;
      }
    }

    & > li {
      &:only-child:before,
      &:only-child:after {
        content: none;
      }
    }
  }

  %subcascade {
    flex-direction: column;
    align-items: start;
    padding: 0 $margin;

    &:before {
      left: 2 * $margin;
    }

    &:after {
      left: 0;
    }

    &:first-child:after {
      left: 2 * $margin;
      width: 100%;
    }

    &:last-child:after {
      left: 0;
      width: 2 * $margin;
    }

    ul,
    li {
      display: block;
    }

    ul:before,
    ul:after,
    li:before,
    li:after {
      border: none;
    }

    div {
      margin: 0;
      margin-top: $margin;
    }

    li {
      margin-left: 2 * $margin;

      &:before {
        border-left: $border-weight solid #54bd95;
        height: 100%;
        width: 0;
        top: 0;
        left: -$margin;
      }

      &:after {
        border-top: $border-weight solid #54bd95;
        width: $margin;
        height: 0;
        left: -$margin;
        top: calc($margin * 2);
        content: "";
      }

      &:last-child:before {
        height: calc($margin * 2);
        top: 0;
      }
    }
  }

  &.vertical .cascade {
    @extend %subcascade;
  }

  &.vertical.cascade-1 {
    & > li {
      @extend %subcascade;
    }
  }

  &.vertical.cascade-2 {
    & > li > ul > li {
      @extend %subcascade;
    }
  }

  &.vertical.cascade-3 {
    & > li > ul > li > ul > li {
      @extend %subcascade;
    }
  }

  &.vertical.cascade-4 {
    & > li > ul > li > ul > li > ul > li {
      @extend %subcascade;
    }
  }
  $border: var(--hlx-border-color-dark);
  div.card {
    box-sizing: border-box;
    // max-width: 300px;
    height: max-content;

    line-height: 1.5;
    padding: 10px 0 10px 10px;
    border-radius: 7px;

    .card-body {
      display: flex; 
      justify-content: center;
      align-items: center;
      padding: 5px;
      line-height: normal !important;
    }
    &:hover {
      .grid.header {
        color: getCssVar("color", "primary", "dark");
      }
    }
    .grid {
      &.header {
        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;
      }
      width: 90%;
      margin: 0 !important;
      height: -webkit-max-content !important;
      height: -moz-max-content;
      min-height: -webkit-max-content !important;
      min-height: -moz-max-content !important;
      min-height: max-content !important;
      gap: 12px;
      display: grid;
      font-size: 14px;
      line-height: 1.5;
      grid-template-columns: -webkit-max-content auto;
      grid-template-columns: max-content auto;
      align-items: center;
      justify-content: center;

      .key {
        color: #565553;
        font-weight: 600;
      }
      .value {
        color: #969393;
      }
    }
  }

  .hide {
    display: none !important;
  }
  .icon-circle-filled-minus:before {
    font-size: large;
  }
  .icon-circle-filled-plus:before {
    font-size: large;
  }
}