/**
 * TOC Wrapper
 */
.custom-toc-wrapper {

    margin: 30px 0 !important;

    width: 100% !important;
}

/**
 * Mobile Header
 */
.custom-toc-header {

    display: none;
}

/**
 * TOC List
 */
.custom-toc-list {

    display: flex !important;

    flex-wrap: wrap !important;

    gap: 14px !important;
}

/**
 * TOC Link
 */
.custom-toc-wrapper .toc-link {

    text-decoration: none !important;

    position: relative !important;

    padding-right: 18px !important;

    transition: all 0.3s ease !important;
}

/**
 * Divider
 */
.custom-toc-wrapper .toc-link::after {

    content: "|" !important;

    position: absolute !important;

    right: 0 !important;

    color: #d4d4d4 !important;
}

/**
 * Remove Last Divider
 */
.custom-toc-wrapper .toc-link:last-child::after {

    display: none !important;
}

/**
 * Hover
 */
.custom-toc-wrapper .toc-link:hover {

    opacity: 0.8 !important;
}

/**
 * Mobile TOC
 */
@media (max-width: 768px) {

    .custom-toc-wrapper {

        border: 1px solid #ddd !important;

        border-radius: 10px !important;

        padding: 15px !important;
    }

    .custom-toc-header {

        display: block !important;

        font-size: 18px !important;

        font-weight: 700 !important;

        cursor: pointer !important;

        margin-bottom: 10px !important;
    }

    .custom-toc-list {

        display: none !important;

        flex-direction: column !important;

        gap: 10px !important;
    }

    .custom-toc-wrapper.active
    .custom-toc-list {

        display: flex !important;
    }
}