.article-layout{

/* display:grid; */

/* grid-template-columns:300px 1fr; */

/* gap:40px; */

/* align-items:start; */
}
.tit{
    color: #000000;
    font-size: 18px !important;
    font-weight: 400 !important;
    margin: 10px 0 15px !important;
    width: 100%;
    display: flex;
}

.toc-sidebar{

/* position:sticky; */

/* top:120px; */

display: flex;

flex-direction: column;

align-items: flex-start;
}

.toc-sidebar h3{

font-size:22px;

margin-bottom:25px;

font-weight:700;

}

#toc-list{

margin: 0 0 20px;

padding:0;

list-style:none;

position:relative;

display: flex;

flex-direction: column;

align-items: flex-start;
}

#toc-list:before{

content:"";

position:absolute;

right:14px;

top:0;

bottom:0;

width:2px;

background:#ececec;

}

#toc-list li{

position:relative;

margin-bottom:15px;

padding-right: 29px !important;
}

#toc-list li:before{

content:"";

position:absolute;

right:7px;

top:18px;

width: 16px;

height: 16px;

background: #E1E6EA;

border-radius:50%;

transition:.3s;
}

#toc-list a{

display:block;

padding:12px 18px;

background: #E1E6EA;

border-radius: 8px;

text-decoration:none;

color: #000000;

font-weight: 400;

font-size: 15px;

transition:.3s;
}

#toc-list a:hover{

background:#111;

color:#fff;

}

#toc-list a.active{

background: #7b9ebc;

color: #fff;
}

#toc-list li:has(a.active):before{

background: #7b9ebc;

transform:scale(1.3);
}



/* مستويات العناوين */

#toc-list .h3{

padding-right:25px;

}

#toc-list .h4{

padding-right:40px;

}

#toc-list .h5{

padding-right:55px;

}

#toc-list .h6{

padding-right:70px;

}



@media(max-width:991px){

.article-layout{

grid-template-columns:1fr;

}

.toc-sidebar{

position:relative;

top:auto;

margin-bottom: 10px;
}

}


.article-content h2,
.article-content h3,
.article-content h4,
.article-content h5,
.article-content h6{
    scroll-margin-top:100px;
    color: #2E7CBE;
    font-weight: 600;
    margin-top: 30px;
}

.article-content ul{
    color: #000;
    padding: 0 16px;
    line-height: normal;
}
.article-content ul li{
    list-style: disc;
}