.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; }
}