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;
  /* color: #f19b60; commented by vikki*/
}

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

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

[role="treeitem"][aria-expanded="false"]>span::before,
[role="treeitem"][aria-expanded="false"]>a>span::before {
  font-family: "Font Awesome 5 Free";
  content: "\f07b";
  display: inline-block;
  padding-right: 3px;
  vertical-align: middle;
  font-weight: 900;
  /* color: #f19b60; commented by vikki */
  color: var(--r2d-primary-red) !important;
  font-size: 20px !important;
}

[role="treeitem"][aria-expanded="true"]>span::before,
[role="treeitem"][aria-expanded="true"]>a>span::before {
  font-family: "Font Awesome 5 Free";
  content: "\f07c";
  display: inline-block;
  padding-right: 3px;
  vertical-align: middle;
  font-weight: 900;
  /* color: #f19b60; commented by vikki*/
  color: var(--r2d-primary-red) !important;
  font-size: 20px !important;
}

[role="treeitem"],
[role="treeitem"] span,
[role="treeitem"] a span {
  /* width: 9em; commented by vikki */
  margin: 0;
  /* padding: 0.125em;commented by vikki */
  display: block;
  font-size: 18px;
  color: #ffffff;
  letter-spacing: 1.2px;
}

/* 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 #ffffff;
} */
/* Commented by Vikki */

/* [role="treeitem"].focus, commented by vikki*/
[role="treeitem"] span.focus,
[role="treeitem"] a span.focus {
  border-color: black;
  background-color: #ffffff;
  color: var(--r2d-primary-red);
}

/* [role="treeitem"].hover, commented by vikki */
[role="treeitem"] span:hover {
  /* padding-left: 4px; commented by vikki*/
  background-color: #ffffff;
  /* border-left: 5px solid #333; commented by vikki*/
  color: var(--r2d-primary-red);
  cursor: pointer;
}

.selected_dir span {
  /* background-color: #ffffff !important; commented by vikki */
  color: var(--r2d-primary-red) !important;

}