﻿.wrap-collapsible {
    margin-bottom: 1.2rem 0;
}
input[type='checkbox'].small-toggle {
    display: none;
}
input[type='checkbox'].toggle {
    display: none;
}/*.wrap-collapsible input[type='checkbox'] {
    display: none;
}*/
.lbl-toggle {
    display: block;
    font-weight: bold;
    font-size: 1.2rem;
    text-align: left;
    padding: .5rem;
    color: var(--collapseMainText);
    background: var(--collapseMainBg);
/*    border: 1px solid var(--collapseContentBorder);
    background: var(--collapseContentBg);*/
    cursor: pointer;
    border-radius: 7px;
    transition: all 0.25s ease-out;
    white-space: nowrap;
}

  .lbl-toggle:hover {
    color: var(--collapseMainText);
    background: var(--collapseMainBgHover);
  }

  .lbl-toggle::before {
    content: ' ';
    display: inline-block;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 5px solid currentColor;
    vertical-align: middle;
    margin-right: .7rem;
    transform: translateY(-2px);
    transition: transform .2s ease-out;
  }

.toggle:checked + .lbl-toggle::before {
  transform: rotate(90deg) translateX(-3px);
}

.collapsible-content {
    display: none;
    transition: max-height .25s ease-in-out;
}

.toggle:checked + .lbl-toggle + .collapsible-content {
    display: inherit;
}

.toggle:checked + .lbl-toggle {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

.collapsible-content .content-inner {
  background: var(--collapseContentBg);
  border-bottom: 1px solid var(--collapseContentBorder);
  border-left: 1px solid var(--collapseContentBorder);
  border-right: 1px solid var(--collapseContentBorder);
  border-bottom-left-radius: 7px;
  border-bottom-right-radius: 7px;
  padding: .5rem 1rem;
}




.small-collapsible {
    margin-bottom: 1.2rem 0;
}
/*    .small-collapsible input[type='checkbox'] {
        display: none;
    }*/

  .small-collapsible
  .small-lbl-toggle {
    display: block;
    font-weight: bold;
    font-size: 1.1rem;
    text-align: left;
    padding: .2rem .2rem .2rem .5rem;
    color: var(--smallcollapseMainText);
    background: var(--smallcollapseMainBg);
    cursor: pointer;
    border-radius: 7px;
    transition: all 0.25s ease-out;
    white-space: nowrap;
  }
    .small-collapsible
    .small-lbl-toggle.square {
        border-radius: 0px;
    }
  .small-collapsible
  .small-lbl-toolbar {
      padding: .2rem .2rem .2rem .5rem;
      color: var(--smallcollapseMainText);
      background: var(--smallcollapseMainBg);
      white-space: nowrap;
  }


.small-lbl-toggle:hover {
  background: var(--smallcollapseMainBgHover);
}

.small-lbl-toggle::before {
  content: ' ';
  display: inline-block;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 5px solid currentColor;
  vertical-align: middle;
  margin-right: .7rem;
  transform: translateY(-2px);
  transition: transform .2s ease-out;
}

.small-toggle:checked + .small-lbl-toggle::before {
  transform: rotate(90deg) translateX(-3px);
}

.small-collapsible-content {
    display: none;
    transition: max-height .25s ease-in-out;
}

.small-toggle:checked + .small-lbl-toggle + .small-collapsible-content {
    display: inherit;
}

.small-toggle:checked + .small-lbl-toggle {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

.small-collapsible-content .small-content-inner {
  background: var(--smallcollapseContentBg);
  color: var(--smallcollapseContentText);
  border-bottom: 1px solid var(--smallcollapseContentBorder);
  border-left: 1px solid var(--smallcollapseContentBorder);
  border-right: 1px solid var(--smallcollapseContentBorder);
  border-bottom-left-radius: 7px;
  border-bottom-right-radius: 7px;
  padding: .3rem .3rem;
}
.small-collapsible-content .small-content-inner.noborder {
    border-bottom: 0px;
    border-left: 0px;
    border-right: 0px;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
}



.tree-view-wrapper ul { list-style: none; line-height: 2em; padding-inline-start: 20px; }
.tree-view-wrapper details summary { cursor: pointer; }
.tree-view-wrapper details summary::-webkit-details-marker,.tree-view-wrapper details summary::marker {
  display: none; content: "";
}
.tree-view-wrapper ul li { position: relative; white-space:nowrap; }
.tree-view-wrapper ul li::before {
  position: absolute;
  left: -13px;
  top: 0px;
  border-left: 2px solid var(--smallcollapseContentBorder);
  border-bottom: 2px solid var(--smallcollapseContentBorder);
  content: "";
  width: 8px;
  height: 1em;
}
.tree-view-wrapper ul li::after {
  position: absolute;
  left: -13px;
  bottom: 0px;
  border-left: 2px solid var(--smallcollapseContentBorder);
  content: "";
  width: 8px;
  height: 100%;
}
.tree-view-wrapper ul li:last-child::after { display: none; }
ul.tree-view > li:after, ul.tree-view > li:before { display: none; }
.tree-view-wrapper.square ul summary::before { border-radius: 0; }
.tree-view-wrapper ul summary::before {
    position: relative;
    color: var(--bannerBg);
    /*background: var(--bannerText);*/
    display: inline-block;
    border-radius: 0;
    z-index: 999;
    border-style: solid;
    border-width: 2px 2px 0 0;
    border-color: var(--smallcollapseContentBorder);
    content: '';
    transform: rotate(45deg);
    vertical-align: central;
    transition: all .3s ease;
    outline: 3px solid transparent;
    height: 0.45em;
    left: -13px;
    top: -5px;
    width: 0.45em;
}

.tree-view-wrapper ul details[open] > summary:before {
    content: '';
    transform: rotate(135deg);
}

