:root {--tree-line: 30px; --tree-margin: 25px; --anchor-line: 20px; --arrow-button-size: 28px;}
@media (max-width: 550px) {:root {--tree-line: 32px; --arrow-button-size: 36px; --anchor-line: 28px; --tree-margin: 18px;}}

.topic-tree li, .topic-tree ul {list-style-type: none; padding: 0; margin: 0;}
.topic-tree, .topic-tree ul {display: flex; flex-direction: column; gap: 3px; position: relative;}
.topic-tree li {display: flex; position: relative; flex-direction: row; justify-content: flex-start; gap: 4px; align-items: center;}
.topic-tree ul {padding-left: var(--tree-line); margin-left: var(--tree-margin);}

/* kulaté rozbalovací šipky */
.bullet-arrow {display: block; border-radius: 100%; border: 1px solid var(--lightGrayHover); width: var(--arrow-button-size); height: var(--arrow-button-size); min-height: auto; background: white url('https://www.umimeto.org/asset/global/img/icons-umime/icon-triangle-gray.svg') 55% 50% no-repeat; background-size: 65%; position: absolute; left: calc((var(--tree-line) + var(--arrow-button-size)/2 - 1px) * -1); top: 0; bottom: 0; margin: auto; z-index: 20; transition: 0.2s; cursor: pointer; z-index: 10; -webkit-tap-highlight-color: transparent;}
.bullet-arrow:hover {background-color: var(--lightGray); border: 1px solid var(--gray);}
.bullet-arrow[data-state="1"] {transform: rotate(45deg); animation: growAndShrink 0.5s ease-in-out 0.2s 2; }
.bullet-arrow[data-state="2"] {transform: rotate(90deg)}

@keyframes growAndShrink {
    0%, 100% {
      background-size: 65%;
    }
    50% {
      background-size: 85%;
    }
  }

/* odkazy a čáry před */
.topic-tree a:not(.tlacitko), .topic-tree > span {min-height: calc(var(--anchor-line) * 1.5); align-items: center; position: relative; padding: 3px 6px; background: white; border-radius: var(--unit);}
.topic-tree a:not(.show-only-sm), .topic-tree > span {display: inline-flex;}
.topic-tree a:last-child, .topic-tree > a:first-child {margin-right: auto;}
.topic-tree a:not(.tlacitko):hover {text-decoration: none; background-color: #ebf5fb;}

.topic-tree li:not(:last-of-type) > a:first-of-type:before {content:''; display: block; width: var(--tree-line); height: 2px; background: var(--gray); position: absolute; left: calc(var(--tree-line) * -1);}
.topic-tree li span:only-child, .topic-tree > span {font-weight: 600; background: var(--lightGray); margin-right: auto;}

/* před prvním linkem není vodorovná čára */
.topic-tree > a:first-child:before {display: none;}
.topic-tree ul.d-none {display: none;}
.topic-tree-line {width: var(--tree-line); border-bottom-left-radius: calc(var(--unit) * 1.15); border-left: 2px solid var(--gray); border-bottom: 2px solid var(--gray); position: absolute; left: 0; top: -3px; z-index: 1; opacity: 0;}