/* Section to customize bootstrap standard colors */
  :root {
    --bs-blue: #0d6efd;
    --bs-indigo: #6610f2;
    --bs-purple: #7e0b80;
    --bs-pink: #d63384;
    --bs-red: #dc3545;
    --bs-orange: #fd7e14;
    --bs-yellow: #ffc107;
    --bs-green: #198754;
    --bs-teal: #20c997;
    --bs-cyan: #0dcaf0;
    --bs-black: #000;
    --bs-white: #fff;
    --bs-gray: #6c757d;
    --bs-gray-dark: #343a40;
  }
    
  summary {
    display: block; 
    cursor: pointer;
    outline: 0;
  }
  

  summary::marker {
      display: none;
    }
  
  /* this changes the text color of the leaf nodes */
  .tree-nav__item {
    display: block;
    white-space: nowrap;
    color: black;
    font-size: 1rem;
    line-height: 2.2rem;
    padding-left: 0.3rem;
    position: relative;
  }

/* this doesnt seem to change anything
  .tree-nav__item.is-expandable::before {
    border-left: 1px solid #333;
    content: "";
    height: 100%;
    left: 0.8rem;
    position: absolute;
    top: 2.4rem;
    height: calc(100% - 2.4rem);
  }
*/


/* this changes the identation of all elements */
  .tree-nav__item .tree-nav__item {
    margin-left: 2.4rem;
  }

/* This changes the identation of the icon against a leaf node */
.icon {
  padding-right: 0.7rem;
}

/* this rotates the icons in front of the SUMMARY nodes */
  .tree-nav__item.is-expandable[open] > .tree-nav__item-title::before {
    font-family: "ionicons";
    transform: rotate(90deg);
  }

/* This defines the identation between the icon and the title of a SUMMARY node */
  .tree-nav__item.is-expandable > .tree-nav__item-title {
    padding-left: 1.8rem;
  }


  /*  this changes the color (and sets all other properties) of the icons in front of all SUMMARY elements */   
  .tree-nav__item.is-expandable > .tree-nav__item-title::before {
    position: absolute;
    will-change: transform;
    transition: transform 300ms ease;
    font-family: "ionicons";
    color: #666;
    font-size: 0.9rem;
    content: "\f125";
    left: 0;
    display: inline-block;
    width: 1.6rem;
    text-align: center;
  }
  
 /* this changes the text color of all SUMMARY elements */
  .tree-nav__item-title {
    cursor: pointer;
    white-space: nowrap;
    display: block;
    outline: 0;
    color: black;
    font-size: 1rem;
    line-height: 2.2rem;
  }

 /* this doesnt seem to change anything */
  .tree-nav__item-title .icon {
    display: inline;
    padding-left: 3rem;
    margin-right: 0.8rem;
    color: blue;
    font-size: 1.1rem;
    position: relative;
  }


  .tree-nav__item-title::marker {
    display: none;
  }