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

.toc-wrap {
     padding: 2px;
     position: fixed;
     top: 30%;
     right: -25px;
     z-index: 99;
     background: #FFFFFF;
     box-shadow: 0px 4px 20px -1px rgba(0, 7, 136, 0.2);
     border-radius: 4px 4px 0px 0px;
     transform: rotate(-90deg);
     -webkit-transform-origin: 50%  51%;
}

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

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

.toc-aside {
     position: fixed;
     width: 300px;
     height: 450px;
     background: #fff;
     box-shadow: 0px 4px 20px -1px rgba(0, 7, 136, 0.2);
     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: 15px;
     text-decoration: none;
     font-size: 16px;
     color: #000;
     border-bottom: 1px solid #000;
}

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

.toc-headline {
     padding: 15px 15px 0;
     color: #000;
     margin: 0;
}

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

.toc-aside ul li {
     list-style-type: none;
}

.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;
}