.dtoc-wrap{
--dtoc-bg: rgba(186, 204, 196, 0.4);
--dtoc-text: rgba(67, 67, 69, 0.65);
--dtoc-text-active: rgba(67, 67, 69, 1);
--dtoc-border-active: rgba(67, 67, 69, 1);
position: sticky;
top: var(--dtoc-top, 32px);
max-width: 100%;
}
.dtoc-box{
background: var(--dtoc-bg);
border-radius: 10px;
padding: 24px 22px;
max-height: 80vh;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: rgba(255,255,255,.6) transparent;
}
.dtoc-title{
font-family: Jost;
font-weight: 600;
font-size: 32px;
line-height: 42px;
text-transform: capitalize;
color: rgba(67, 67, 69, 1);
margin:0 0 16px 0;
}
.dtoc-list{
list-style:none;
margin:0;
padding:0;
display:flex;
flex-direction:column;
}
.dtoc-item{
border-left: 2px solid transparent;
padding: 10px 0 10px 16px;
transition: border-color .25s ease;
}
.dtoc-item a{
font-family: Poppins;
font-weight: 400;
font-size: 16px;
line-height: 26px;
text-transform: capitalize;
color: var(--dtoc-text);
text-decoration:none;
display:block;
transition: color .25s ease, font-weight .25s ease;
}
.dtoc-item.dtoc-active{
border-left-color: var(--dtoc-border-active);
}
.dtoc-item.dtoc-active a{
color: var(--dtoc-text-active);
font-weight:600;
}
.dtoc-item a:hover{ color: rgba(67, 67, 69, 1); }
.dtoc-wrap.dtoc-fixed{
position: fixed !important;
}
.dtoc-placeholder{
display:none;
}
.dtoc-box::-webkit-scrollbar {
width: 4px;
}
.dtoc-box::-webkit-scrollbar-track {
background: transparent;
}
.dtoc-box::-webkit-scrollbar-thumb {
background-color: rgba(255,255,255,.6);
border-radius: 10px;
}
@media (max-width: 900px){
.dtoc-wrap{ position:static; max-width:100%; top:auto; margin-bottom:32px; }
}