:host {
  background-color: #F5F5F5;
  border-top: 1px solid #d5d5d5;
  border-right: 1px solid #d5d5d5;
  touch-action: none;
}

:host(.drag) {
  background-color: lightgoldenrodyellow;
}

.drag {
  background-color: yellow;
}

.prefix {
  color: #B0B0B0;
}


#dragHint {
  display: none;
  position: absolute;
  transform: translateY(3px)translateX(3px);
  background-color: rgba(0, 0, 0, 0.6);
  align-items: center;
  justify-content: center;
  z-index: 99999;
  border-radius: 30px;
  padding-left: 5px;
  padding-right: 5px;
}

:host(.drag) #dragHint {
  display: flex;
}

#dragHintText {
  text-align: center;
  line-height: 1em;
  /*   font-size: 1.5em; */
  color: white;
}

li a {
  display: inline-block;
  padding: 2px;
}

li.subitem>a {
  display: inline-block;
  padding-bottom: 1px;
}


ul li a:hover {
  min-width: 200px;
  background-color: gray;
  color: white;
  cursor: pointer
}

ul li ul li {
  width: 400px;
  padding-left: 10px;
}

ul li ul li.subitem:hover>a {
  background-color: gray;
  color: white;
  cursor: pointer
}

ul {
  margin: 0;
  list-style-type: none;
  padding: 0;
}

ul li {
  margin: 0px;
  padding: 0px;
  font-size: 10pt;
}

ul li.subitem {
  margin: 0px;
  padding: 0px 0px 0px 5px;
  font-size: 10pt;

}

ul li.subitem.level1>a {
  font-size: 14pt;
  padding-left: 0px;
  color: rgb(0, 78, 151);
  font-weight: bold;

}

ul li.subitem.level2>a {
  font-size: 10pt;
  padding-left: 5px;
}

ul li.subitem.level2.comment>a {
  font-size: 10pt;
  padding-left: 0px;
  color: rgb(0, 78, 151);
}

ul li.subitem.level3>a {
  font-size: 10pt;
  padding-left: 10px;
  color: gray
}

ul li.subitem.level4>a {
  font-size: 10pt;
  padding-left: 15px;
  color: lightgray
}

ul li.subitem.level5>a {
  font-size: 9pt;
  padding-left: 20px;
  color: lightgray
}

ul li.subitem.level6>a {
  padding-left: 25px;
  color: lightgray
}

ul li.subitem.selected>a {
  background-color: rgba(215, 215, 215);
  cursor: pointer
}

ul li.class>a {
  color: rgb(0, 78, 151);
}

ul li.method .tag {
  color: lightgray;
  font-size: 8pt;
}

ul li.method.private a {
  color: gray;
  font-style: italic;
}

ul li.method.important a {
  font-weight: bold;
}

ul li.method.deprecated a,
ul li.method.Refactor a,
ul li.method.TODO a,
ul li.method.HACK a {
  color: darkred;
}

ul li.method>span.mod {
  color: gray;
  font-size: 8pt;
}

ul li.comment {
  font-style: italic;
}


ul li .fa-folder {
  color: #e99a01;

}


ul li a {
  display: box;
  white-space: nowrap;
  text-decoration: none;
  color: #444444;
}

.selected>a {
  background-color: rgba(215, 215, 215);
  cursor: pointer
}

.cursor>a {
  border: 1px inset black;
  cursor: pointer
}

#details .tab {
  display: inline;
}

#details .tab a {
  background-color: lightgray;
  color: gray;
}


#details .tab.selected a {
  background-color: rgb(250, 250, 250);
  color: rgb(0, 78, 151);
}

#details .tab a:hover {
  min-width: 0px;
  background-color: gray;
  color: white;
  cursor: pointer
}

#row {
  display: flex;
  height: 100%;
  width: 100%;
}

#details {
  background-color: rgb(250, 250, 250);
  flex: 45%;
}

#navbar {
  flex: 55%
}

#details,
#navbar {
  white-space: nowrap;
  height: 100%;
  overflow: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
}

#filter-hint {
  color: black;
  background: rgba(255, 255, 255, 0.9);
}

#filter-container {
  height: 0px;
  left: 20px;
  overflow: visible;
  z-index: 100000000;
}

.filtered-out {
  height: 0px;
}

.filtered-out>a,
.filtered-out>span {
  color: rgba(0, 0, 0, 0.2);
  font-size: 0pt !important;
  height: 0px !important;
}


ul li.figure>a {
  background-color: lightblue;
  color: white;
  font-size: 6pt;
  margin-left: 30px;
}