/* tree.css */

ul.tree
{
  margin-top: 2px;
  margin-left: 0;
}

ul.tree,
ul.tree ul,
ul.tree li
{
  list-style: none;
  margin-left:6px;
  padding-left: 1px;
  text-align: left;
}

ul.tree li
{
  text-align: left;
  color: #606060;
  vertical-align: middle;
  white-space: nowrap;
  padding-left:0px;
  list-style-type: none;
  line-height: 18px;
  background-size: 16px 16px;
  background-position: 1px 1px;
  background-repeat: no-repeat;
}

ul.tree li > button
{
  padding:0;
  width:9px;
  height:9px;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center center;
  border:none;
  text-align: center;
  margin-left: -11px;
  margin-right: 2px;
  vertical-align: middle;
  outline: none;
  box-shadow: none;
}

ul.tree li.expanded > button
{
  background-image: url(images/collapse.svg);
}

ul.tree li.collapsed > button
{
  background-image: url(images/expand.svg);
}

ul.tree li > button:hover
{
  background-color: transparent;
  cursor: pointer;
}

ul.tree li > button:focus
{
  outline-style: dotted;
  outline-color: black;
  outline-offset: 1px;
  outline-width: 1px;
}

ul.tree li a
{
  margin-left: 18px;
  padding: 1px;
  line-height: 18px;
  text-decoration: none;
  color: #606060;
  background-position: left center;
  vertical-align: middle;
  user-drag: none;
  user-select: none;
  -webkit-user-drag: none;
  -webkit-user-select: none;
}

ul.tree li a:hover
{
  animation: item_hover 1s;
  background-color: #D0D0D0;
  color:black;
}

ul.tree li a:focus
{
  outline-style: dotted;
  outline-color: black;
  outline-offset: 1px;
  outline-width: 1px;
}

ul.tree li.collapsed > ul
{
  display: none;
}

ul.tree li.expanded > ul
{
  display: block;
}