.document-menu-item-sub-title{
    margin: 0!important;
    padding-left: 0!important;
    background-color: #d6d6d6!important;
}
.document-container {
    position: relative;
    clear: both;
}

.document-body {
    margin-top: 20px;
    background-color: #fff;
}

.document-body {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.document-menu {
    padding: 0;
    max-height: 100vh;
    min-width: 266px;
    overflow-y: auto;
    flex: 20%;
    display: flex;
    /* background-color: #fff; */
    background-color: #343131;
    color: black;
    border: 1px solid white;
    flex-direction: column;
}

.document-detail {
    padding: 20px;
    flex: 80%;
    text-align: center;
    max-height: 100vh;
    overflow-y: auto;
    border: 1px solid #eee;
}

.document-menu-item {
    display: flex;
    flex-direction: column;
    flex: 100%;
}
.document-menu-item>a{
    display: block;
}
.document-menu-item-sub {
    /* flex: 100%; */
    align-items: center;
    width: 100%;
}
.document-menu-item-sub-title>li {
    display: block;
    box-sizing: 0 0 5px black;
    box-sizing: border-box;
    width: 100%;
}
.document-menu-item-sub-title>a {
    text-decoration: none;
    color: white;
}

.document-menu-item-sub-inner {
    width: inherit;
}
.document-menu-item-title {
    border-bottom: solid 1px #c9c9c9;
    border-top: solid 1px #c9c9c9;
    background-color: #fcfcfc;
}

@media screen and (max-width: 768px) {
    .document-body {
        flex-direction: column;
    }
    .document-menu {
        flex: 1;
        text-align: center;
    }
    .document-detail {
        flex: 1;
    }
    .document-menu-item-title {
        display: block;
        background: linear-gradient(180deg, #dee2e6 0%, #f8f9fa 100%);
    }
    .document-menu-item-sub-title{
        padding-left: 0px!important;
    }
}