ul[role="tree"] {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 120%;
}

ul[role="tree"] li {
  margin: 0;
  padding: 0;
  list-style: none;
}

[role="treeitem"][aria-expanded="false"] + [role="group"] {
  display: none;
}

[role="treeitem"][aria-expanded="true"] + [role="group"] {
  display: block;
}

[role="treeitem"].doc::before {
  font-family: "Font Awesome 5 Free";
  content: "\f15c";
  display: inline-block;
  padding-right: 2px;
  padding-left: 5px;
  vertical-align: middle;
}

[role="treeitem"][aria-expanded="false"] > ul {
  display: none;
}

[role="treeitem"][aria-expanded="true"] > ul {
  display: block;
}

[role="treeitem"][aria-expanded="false"] > span::before {
  font-family: "Font Awesome 5 Free";
  content: "\f07b";
  display: inline-block;
  padding-right: 3px;
  vertical-align: middle;
  font-weight: 900;
}

[role="treeitem"][aria-expanded="true"] > span::before {
  font-family: "Font Awesome 5 Free";
  content: "\f07c";
  display: inline-block;
  padding-right: 3px;
  vertical-align: middle;
  font-weight: 900;
}

[role="treeitem"],
[role="treeitem"] span {
  width: 9em;
  margin: 0;
  padding: 0.125em;
  display: block;
}

/* disable default keyboard focus styling for treeitems
   Keyboard focus is styled with the following CSS */
[role="treeitem"]:focus {
  outline: 0;
}

[role="treeitem"][aria-selected="true"] {
  padding-left: 4px;
  border-left: 5px solid #005a9c;
}

[role="treeitem"].focus,
[role="treeitem"] span.focus {
  border-color: black;
  background-color: #eee;
}

[role="treeitem"].hover,
[role="treeitem"] span:hover {
  padding-left: 4px;
  background-color: #ddd;
  border-left: 5px solid #333;
}