.toc-container { border: 3px solid #000; margin: 0 auto 30px; position: relative; box-shadow: 0 10px 10px #00000029; max-width:600px; }
.toc-container .toc-toggle { text-align: center; display: block; padding: 16px; cursor:pointer; position: relative; }
.toc-container .toc-wrapper { height: 0; position:relative; overflow: hidden; transition: 0.4s ease-in-out; }
.toc-container ul.table-of-contents { position: absolute; margin-bottom: 0; transform-origin: 50% 0; padding: 16px 20px; list-style: none; width:100%; }
.toc-container .toc-toggle::before { 
    --size: 6px;
    content: "";
    box-sizing: border-box;
    position: absolute; right: 20px; top: 50%; margin-top: calc(var(--size) * -0.5); height: var(--size); width: var(--size); 
    border-top: var(--size) solid #000; border-left: var(--size) solid transparent; border-bottom: 0px solid transparent; border-right: var(--size) solid transparent;
    transition: 0.2s;

}
.toc-container .toc-toggle.open::before { transform: rotate(180deg); }
.toc-container ul.table-of-contents li:not(:last-child) { border-bottom: 1px solid #dadada; }
.toc-container ul.table-of-contents li a { padding: 9px 0; display: block; font-weight: 400; font-size: 20px; }


@media (min-width: 991px) {
    .toc-container.hide-desktop { display: none; }
}

@media (max-width: 990px) {
    .toc-container.hide-mobile { display: none; }
}