.table-of-contents {
     background-color: #Fff;
}

.toc-wrap {
    padding: 2px;
    position: fixed;
    top: 17%;
    right: 0;
    z-index: 99;
    background: #FFFFFF;
    box-shadow: 0px 4px 24px rgb(183 37 101 / 75%);
    border-radius: 4px 4px 0px 0px;
    transform: rotate(-90deg);
    -webkit-transform-origin: 50%  51%;
    transform-origin: right bottom;
}

.toc-wrap::after {
     content: "";
     display: block;
     clear: both;
}

.toc-wrap .toggle-wrap {
     font-weight: 600;
     font-size: 26px;
     line-height: 30px;
     color: #811A3C;
}

.toc-aside {
     position: fixed;
     width: 300px;
     height: 450px;
     background: #fff;
     box-shadow: 0 4px 24px rgb(183 37 101 / 75%);
     border-radius: 4px 0 4px 0;
     right: -400px;
     top: 15%;
     bottom: 0;
     box-sizing: border-box;
     transition: all 0.4s ease;
     z-index: 1000;
}

.toc-aside.active {
     right: 0;
}

.toc-aside a {
	display: block;
    padding: 5px 15px;
    text-decoration: none;
    font-size: 15px;
    color: #000;
}

.toggle-close {
     position: absolute;
     left: -30px;
     background: #B72565;
     padding: 5px 10px;
     color: #fff;
     cursor: pointer;
}

.toc-headline {
    padding: 15px 15px 0;
    color: #000;
    margin: 0;
    font-size: 16px;
    font-weight: bold;
}

.toc-aside ul {
     max-height: 390px;
     overflow: auto;
}

.toc-aside ul ul {
     max-height: 100%;
     overflow: inherit;
}


.toc-aside ul {
	counter-reset: toc;
}
.toc-aside ul li a {
	counter-increment: toc;
}
.toc-aside li a:before {
	content: counters(toc, ".") ".";
	padding-right: 5px;
}

.toc-aside ul ul {
	margin-left: 15px;
}

.toc-aside ul ul ul {
	margin-left: 15px;
}


.toggle-wrap {
     padding: 10px;
     position: relative;
     cursor: pointer;
     float: left;

     /*disable selection*/
     -webkit-touch-callout: none;
     -webkit-user-select: none;
     -khtml-user-select: none;
     -moz-user-select: none;
     -ms-user-select: none;
     user-select: none;
}