ul[role="tree_service"] {
    margin: 0;
    padding: 0;
    list-style: none;
    
  }
  
  ul[role="tree_service"] li {
    margin: 0;
    padding: 0;
    list-style: none;
    border: 1px dotted black;
    border-width: 1px 0 0px 1px; 
    padding-left: 10px;
  }
  ul[role="tree_service"] a {
    text-decoration: underline;
    border-color: transparent;
  }
  
  [role="treeitem_service"] ul {
    margin: 0;
    padding: 0;
    margin-left: 0.9em;
     
  }
  
  [role="treeitem_service"][aria-expanded="false"] > ul {
    display: none;
  }
  
  [role="treeitem_service"][aria-expanded="true"] > ul {
    display: block;
  }
  
  [role="treeitem_service"][aria-expanded="false"] > span::before {
    content: url(https://www.w3.org/TR/wai-aria-practices/examples/treeview/treeview-2/images/right-arrow-brown.png);
    position: relative;
    left: -0.25em;
  }
  
  [role="treeitem_service"][aria-expanded="true"] > span::before {
    content: url(https://www.w3.org/TR/wai-aria-practices/examples/treeview/treeview-2/images/down-arrow-brown.png);
    position: relative;
    left: -0.25em;
  }
  
  [role="treeitem_service"],
  [role="treeitem_service"] span {
    width: 100%;
    margin: 0;
    padding: 0.125em;
    border: 2px transparent solid;
    display: block;
  }
  
  /* disable default keyboard focus styling for treeitems
     Keyboard focus is styled with the following CSS */
  [role="treeitem_service"]:focus {
    outline: 0;
  }
  
  [role="treeitem_service"].focus,
  [role="treeitem_service"] span.focus {
    /*border-color: black;*/
    background-color: #eee;
  }
  
  [role="treeitem_service"].hover,
  [role="treeitem_service"] span.hover {
    background-color: #ddd;
  }