:root {
--dark-grey: #333333;
--main-color: #001bff;
--font-size: 16px;
--line-height: 1.2;
}
.ai-table-of-contents {
margin: 4rem 0;
position: relative;
}
.ai-table-of-contents .toc-headline {
font-size: 22px;
color: var(--dark-grey);
font-weight: 600;
display: block;
cursor: pointer;
}
.ai-table-of-contents .toggle-toc {
position: absolute;
top: 0;
right: 1rem;
font-size: 30px;
cursor: pointer;
font-weight: 800;
color: var(--main-color);
}
.ai-table-of-contents ul {
padding: 0;
padding-left: 1rem;
}
.ai-table-of-contents li {
position: relative;
padding-left: 1rem;
list-style: none;
line-height: var(--line-height);
font-weight: 400;
margin: .3rem 0;
transition: .2s ease all;
}
.ai-table-of-contents li:hover {
padding-left: 1.1rem;
}
.ai-table-of-contents li a {
font-size: var(--font-size);
line-height: var(--line-height);
text-decoration: none;
color: var(--main-color);
}
.ai-table-of-contents li:before {
content: '';
-webkit-transform: translateX(-0.75em) rotate(45deg);
transform: translateX(-0.75em) rotate(45deg);
height: 0.5em;
width: 0.5em;
border-top: solid 2px var(--dark-grey);
border-right: solid 2px var(--dark-grey);
border-radius: 0;
background: 0 0;
position: absolute;
display: block;
top: 7px;
left: 0;
}
.ai-table-of-contents li>ul {
padding-left: 0.7rem;
padding-bottom: 1rem;
}