/* This fragment is responsible for displaying the document structure; it depends on the specific document */
div.hidden {
  display: none;
}
div#content {
  padding: 1em;
}
div.treeview {
  border-right: thin solid black;
}

/* This fragment is responsible for displaying the tree itself */
div.treeview {
  ul {
    padding: 0 0 0 1em;
  }
  ul li details {
    padding: 0;
    margin: 0;
  }
  ul li,
  ul li details summary {
    list-style-type: none;
    margin: 0;
    padding: 0;
  }
  ul li {
    padding: 0.5ex;
  }
  ul li a {
    text-decoration: none;
    padding: 2px;
  }
  ul li a.current {
    background-color: blue;
    color: white;
  }
  ul li a:hover {
    padding: 1px;
    border: 1px dotted black;
  }
  ul li:not(:has(details))::before,
  details > summary::before {
    content: "";
    text-align: left;
    vertical-align: top;
    padding: 0 1.5em 0 0;
    background-image: none;
    background-repeat: no-repeat;
    background-position: top right 4px;
    background-color: transparent;
  }
  ul li:not(:has(details))::before {
    background-image: url("images/leaf.svg");
    content: "\2003";
  }
  details[open] > summary::before {
    background-image: url("images/folder-opened.svg");
    content: url("images/minus.svg");
  }
  details:not([open]) > summary::before {
    background-image: url("images/folder-closed.svg");
    content: url("images/plus.svg");
  }
/* Custom node icons */  
  ul li.icon-warning::before {
    background-image: url("images/warning.svg");
  }
  ul li.icon-warning > details[open] > summary::before,
  ul li.icon-warning > details:not([open]) > summary::before {
    background-image: url("images/warning.svg");
  }
}