#toc {
        position: relative;
        margin: 24px auto 0px auto;
        max-width: 760px;
    }

    #table-of-contents {
        position: relative;
        display: flex;
        flex-direction: column;
        max-width: 100%;
        gap: 6px;
        margin: 0 auto;
        padding:24px 0;
        font-family: 'Manrope', sans-serif;
        border-top: 1px solid #e5e5e5;
        border-bottom: 1px solid #E5E5E5;
    }

    .toc-header-wrapper {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    #table-of-contents .toc-header {
        display: block;
        font-size: 18px;
        line-height: 1;
        color: #000000;
        font-family: 'Manrope', sans-serif;
        font-weight: 600;
        font-style: normal;
        letter-spacing: -0.1px;
    }

    .toc-toggle-btn {
        background: none;
        border: none;
        cursor: pointer;
        transition: all 0.5s ease;
        opacity: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        width: 24px;
        height: 24px;
        background-color: #fff;
        border-radius: 99px;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBmaWxsPSJub25lIiBzdHJva2U9IiMwMDAiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIyIiBkPSJtNyAxMGw1IDVsNS01Ii8+PC9zdmc+');
    }

    .toc-toggle-expanded {
        transform: rotate(0deg);
    }

    .toc-toggle-collapsed {
        transform: rotate(-90deg);
    }

    .toc-toggle-btn:hover {
        opacity: 1;
    }

    #table-of-contents ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .toc-list-expanded {
        max-height: 1000px;
        overflow: visible;
        display: block;
        transition: max-height 0.3s ease, opacity 0.3s ease;
        opacity: 1;
    }

    .toc-list-collapsed {
        max-height: 0;
        overflow: hidden;
        display: none;
        opacity: 0;
        transition: max-height 0.3s ease, opacity 0.3s ease;
    }

    #table-of-contents .toc-sublist {
        list-style: none;
        padding: 0;
        margin: 0;
        margin-top: 8px;
    }

    #table-of-contents li {
        padding: 0;
        transition: background-color 0.3s ease, border-color 0.3s ease;
    }

    #table-of-contents a {
        text-decoration: none;
        color: #000000;
        transition: color 0.3s ease, opacity 0.3s ease;
        font-family: 'Manrope', sans-serif;
        font-weight: 400;
        display: block;
        font-size: 15px;
        line-height: 20px;
        letter-spacing:0.15px;
        opacity: 0.5;
    }

    #table-of-contents a:hover {
        opacity: 1;
    }

    .toc-level-2 {
        margin: 8px 0 0 0;
    }

    .toc-level-3 {
        margin: 8px 0 0 12px;
    }

    #table-of-contents li.active > a {
        opacity: 1;
    }

    @media screen and (max-width:1200px) {
        #toc {
            max-width: 620px;
        }
    }

    @media screen and (max-width:960px) {
        #toc {
            max-width: 600px;        
        }
    }

    @media screen and (max-width:640px) {
        #toc {
            max-width: calc(100% - 40px);
        }
        #table-of-contents {
            padding:20px 0;
        }
    }