@charset "UTF-8";
body {
  background: #222;
  color: #ddd;
}

.container {
  position: relative;
  display: block;
  width: 100%;
}

details {
  position: relative;
  width: auto;
  height: auto;
  overflow: hidden;
  max-height: 2.5em !important;
  transition: all 0.1s ease;
}

details ::-webkit-details-marker {
  display: none;
}

details > summary {
  position: relative;
  margin-top: 0.25em;
  color: #99e;
  padding: 0.1em 0.5em 0.2em;
  background: #444;
}

details > summary:before {
  content: "⊞";
  color: #eee;
  font-size: 0.5em;
  margin-right: 0.5em;
}

details[open] > summary {
  background: #66e;
  color: #eee;
}
details[open] > summary:before {
  content: "⊟";
  color: #ccc;
}

.folder {
  margin: 0 0 0.5em 0.86em;
  padding: 0.5em 0em 0.5em 1.5em;
  border-left: 0.1em #ccc dotted;
  border-bottom: 0.1em #ccc dotted;
}

.folder p {
  margin: 0;
}

details[open] {
  height: auto;
  max-height: 99em !important;
  transition: all 1.2s ease;
}

details:not([open]) .folder {
  height: 0px !important;
}