#table-of-contents-sidebar{
    width         : 20%;
	margin-right  : 23px;
    margin-top    : 104px;
    padding-right : 7px;
	position      : relative; /* or absolute depending on your layout */
    float         : left; /* Keeps it on the left for larger screens */
    overflow-x    : hidden; /* Prevent horizontal overflow */
    overflow-y    : auto;
    border-radius : 25px;
    box-shadow    : 0 4px 8px rgb(255, 204, 20); /* Add a subtle shadow to the border */
}
.tableofcontentstitle{
	text-align : center;
}

.h2-links li{
    line-height : 1.5;
    max-width   : 200px;
}
/* Mobile Styles */
@media screen and (max-width: 786px) {
  #table-of-contents-sidebar {
    margin: 0 auto !important;
    margin-top: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    float: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
  }

    /* Hide the list by default on mobile */
    .h2-links {
        display    : none;
        list-style : none;
        padding    : 0;
        margin     : 0;
    }

    /* Style the H2 to act as a button */
    .tableofcontentstitle {
        display       : block;
        width         : 100%;
        height        : fit-content;
        color         : #333;
        text-align    : left;
        padding       : 10px;
        font-size     : 18px;
        cursor        : pointer;
        border        : 1px solid #ddd;
        border-radius : 24px;
        box-shadow    : 0 2px 4px rgba(0, 0, 0, 0.1);
        margin        : 0; /* Remove default margin */
    }

    /* Add an arrow icon to the H2 */
    .tableofcontentstitle:after {
        content     : '\25BC'; /* Down arrow */
        float       : right;
        margin-left : 10px;
    }

    /* Style for the opened dropdown */
    .dropdown-container.active .h2-links {
        display    : block;
        padding    : 10px 0;
        border-top : 1px solid #ddd;
    }
    /* Change arrow direction when dropdown is active */
    .dropdown-container.active .tableofcontentstitle:after {
        content: '\25B2'; /* Up arrow */
    }

    /* Style the list items */
    .h2-links li {
        padding : 5px 0;
    }

    .h2-links li a {
        text-decoration : none;
    }
}