
.collapsed > .items {
  display: none;
}
    .level-1 {
        max-width: 100%;
        padding-left: 40px;
        opacity: 1;
        visibility: visible;
        box-shadow: none;
        transform: translate(0);
    }

    .level-1 > .item {
      display: flex; /* Ensure icon and text are on the same line */
      align-items: center; /* Vertically align icon and text */
      justify-content: space-between; /* Space out text and caret */
    }

    .level-1 > .item > h3.text {
      display: flex; /* Ensure indicator and text are on the same line */
      align-items: center; /* Vertically align indicator and text */
      flex-grow: 1; /* Allow text to take up available space */
      margin: 0;
    }

    .has-active {
      /* Styles for has-active */
    }

    .item {
      position: relative;
      display: flex;
      width: 100%;
    }

    .item[role="button"] {
      justify-content: space-between;
    }

    .indicator {
      position: absolute;
        top: 6px;
        bottom: 6px;
        left: -10px;
        width: 2px;
        border-radius: 2px;
        transition: background-color .25s;
    }

    

    .text {
      flex-grow: 1;
      margin: 0;
    }

    .caret {
      cursor: pointer;
      padding: 5px;
    }

    .caret-icon {
      display: inline-block;
      transition: transform 0.2s ease-in-out;
      font-family: 'Font Awesome 6 Free';
      font-weight: 900;
      border: none;
      font-size: 0.8em;
      color: #888;
    }

  
    .level-1 .items {
      border-left: 1px solid #e2e2e3;
      padding-left: 10px;

    }

    .collapsible:not(.collapsed) > .items {
      display: block;
    }

    .has-active.level-2 > .indicator {
      background-color: #3451b2; /* Example active indicator color */
    }

    .link {
      display: flex;
      align-items: center;
      flex-grow: 1;
    }
    .link p{
      padding: 5px!important;
    }
    .item a {
    color: inherit;
    text-decoration: inherit;
    }

    .is-active > a,
    .is-active {
      color: #3451b2;
      font-weight: bold;
    }

    .is-active > a > .text,
    .is-active > .text {
      font-weight: bold;
    }
