.top {
    margin: -30px 0px 0px 0px;
}

.content2 a {
    display: block;
    color: #252525;
    line-height: 1.5;
    padding: 10px 0px;
}

.content2 .active {
    font-weight: bold;
    color: #198754;
}

.content2 {
    background-color: white;
    font-style: normal;
    font-family: Public-Sans;
    font-size: 12pt;
    margin-left: 10px;
    display: none;
}

.collapsible2 {
    cursor: pointer;
    width: 135%;
    font-size: 13pt;
    margin-bottom: 15px;
    margin: 10px 0px;
}

.collapsible2:after {
    content: '\02795';
    float: right;
    font-size: 13px;
}

.collapsible2.active:after {
    content: "\2796";
    font-size: 13px;
}

.opennav {
    display: none;
}

@media only screen and (max-width: 991px) {
    #article-nav {
        display: none;
    }

    .content2 a {
        display: block;
        color: #252525;
        line-height: 1.5;
        padding: 5px 0;
    }

    .top {
        top: 20%;
        left: 0%;
        position: fixed;
        width: 280px;
        height: 50%;
        z-index: 2;
        background-color: #F6FFF3;
        overflow-y: scroll;
        overflow-x: hidden;
        position: fixed;
        border-width: 3px;
        border-style: solid;
        border-color: #00A057;
        border-left-width: 0px;
        padding: 10px 5px 0px 15px;
        margin:0;
    }

    .opennav {
        display: block !important;
        top: 20%;
        position: fixed;
        left: 0;
        background-color: #00A057;
        z-index: 2;
        border-radius: 0px 10px 10px 0px;
        border: 1px solid white;
        border-left-style: none;

    }

    .opennav i.active {
        transform: rotate(180deg);
    }


    .opennav i {
        display: flex;
        padding: 5px;
        color: white;
    }

    .content2 {
        overflow: hidden;
        background-color: #F6FFF3;
        font-style: none;
        font-size: 10pt;
        margin: 0px 15px 10px 15px;
    }

    .collapsible2 {
        cursor: pointer;
        width: 100%;
        font-size: 12pt;
        margin: 10px 0px;
    }

    .collapsible2 .active {
        font-weight: bold;
        color: #198754;
    }

    .collapsible2:after {
        content: "\2795";
        float: right;
        font-size: 12px;
    }

    .collapsible2.active:after {
        content: "\2796";
        font-size: 12px;
    }

    /* .tops::-webkit-scrollbar {
        width: 14px;
    }

    .tops::-webkit-scrollbar-thumb {
        border: 4px solid rgba(0, 0, 0, 0);
        background-clip: padding-box;
        border-radius: 9999px;
        background-color: #00A057;
    }

    .tops::-webkit-scrollbar-track {
        background: #00A057;
        border-left: 6px solid transparent;
        border-right: 6px solid transparent;
        border-top: 15px solid transparent;
        border-bottom: 15px solid transparent;
        background-clip: padding-box;
    } */

    /****************** Custom Scrollbar ******************/
    /* Width */
    .top::-webkit-scrollbar {
        width: 13px;
    }

    /* Track */
    .top::-webkit-scrollbar-track {
        background: lightgreen;
        border-left: 6px solid transparent;
        border-right: 6px solid transparent;
        border-top: 15px solid transparent;
        border-bottom: 15px solid transparent;
        background-clip: padding-box;
    }

    /* Handle */
    .top::-webkit-scrollbar-thumb {
        border: 4px solid rgba(0, 0, 0, 0);
        background-clip: padding-box;
        border-radius: 9999px;
        background-color: #54B254;
    }

    /******************************************************/

}