/*==================================================
  ArianFile UI Kit
  Component : Elementor TOC
  Version   : 3.0
==================================================*/


/*==================================
Container
==================================*/

.elementor-widget-table-of-contents{
    --toc-accent: var(--af-primary);
    --toc-bg: #fff;
    --toc-border: var(--af-border);
    --toc-radius: var(--af-radius-lg);
    --toc-shadow: var(--af-shadow-sm);

    background:var(--toc-bg);
    border:1px solid var(--toc-border);
    border-radius:var(--toc-radius);
    box-shadow:var(--toc-shadow);
    overflow:hidden;
}


/*==================================
Header
==================================*/

.elementor-toc__header{

    display:flex;
    align-items:center;
    justify-content:space-between;

    padding:18px 22px;

    border-bottom:1px solid var(--af-border);

    background:#fff;

}


.elementor-toc__header-title{

    margin:0;

    font-size:1.12rem;

    font-weight:700;

    color:var(--af-heading);

    line-height:1.6;

}


/*==================================
Toggle
==================================*/

.elementor-toc__toggle-button{

    color:var(--af-primary);

    transition:.25s;

}

.elementor-toc__toggle-button:hover{

    transform:rotate(180deg);

}


/*==================================
Body
==================================*/

.elementor-toc__body{

    padding:14px;

}


/*==================================
List
==================================*/

.elementor-toc__list-wrapper{

    list-style:none;

    padding:0;

    margin:0;

}


.elementor-toc__list-item{

    list-style:none;

    margin:2px 0;

}


.elementor-toc__list-item-text-wrapper{

    display:flex;

    align-items:center;

}


/*==================================
Bullet
==================================*/

.elementor-toc__list-item i{

    width:8px;

    height:8px;

    border-radius:50%;

    background:var(--af-primary);

    opacity:.22;

    margin-left:12px;

    font-size:0;

    transition:.25s;

}


/*==================================
Links
==================================*/

.elementor-toc__top-level{

    display:flex;

    align-items:center;

    flex:1;

    padding:11px 14px;

    border-radius:10px;

    text-decoration:none;

    color:var(--af-text);

    font-size:1rem;

    line-height:1.9;

    transition:.25s;

}


/*==================================
Hover
==================================*/

.elementor-toc__top-level:hover{

    background:rgba(43,204,217,.08);

    color:var(--af-primary);

    transform:translateX(-4px);

}


.elementor-toc__top-level:hover+i{

    opacity:1;

}


/*==================================
Active
==================================*/

.elementor-item-active{

    background:rgba(43,204,217,.10);

    color:var(--af-primary)!important;

    font-weight:700;

    position:relative;

}


.elementor-item-active::before{

    content:"";

    position:absolute;

    right:0;

    top:10px;

    bottom:10px;

    width:4px;

    border-radius:10px;

    background:var(--af-primary);

}


/*==================================
Nested List
==================================*/

.elementor-toc__list-wrapper ul{

    margin-right:22px;

    margin-top:6px;

}


/*==================================
Scrollbar
==================================*/

.elementor-toc__body{

    max-height:550px;

    overflow:auto;

}


.elementor-toc__body::-webkit-scrollbar{

    width:7px;

}


.elementor-toc__body::-webkit-scrollbar-thumb{

    background:#d9e7ec;

    border-radius:30px;

}


.elementor-toc__body::-webkit-scrollbar-thumb:hover{

    background:#b8d8df;

}


/*==================================
Responsive
==================================*/

@media(max-width:768px){

.elementor-toc__header{

padding:16px;

}

.elementor-toc__body{

padding:10px;

}

.elementor-toc__top-level{

font-size:.96rem;

padding:10px;

}

}