::-webkit-scrollbar-track {
    background: rgba(0,0,0,.1);
    border-radius: 0;
}

::-webkit-scrollbar-thumb {
    cursor: pointer;
    border-radius: 5px;
    background: rgba(0,0,0,.25);
    transition: color .2s ease;
}

::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 10px;
    height: 10px;
}


.doc-container {
	
}

.doc-container.with-head {
	padding-top: 55px;
}

.doc-container .doc-head {
    position: fixed;
    flex: none;
    order: 1;
    top: 0;
    left: 0;
    right: 0;
    background: #fff;
    border-bottom: 1px solid #ddd;
    z-index: 20;
}

.doc-container .doc-head .toolbar {
    display: flex;
    height: 55px;
    padding: 0 0.8em;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: stretch;
}

.doc-container .doc-head .toolbar .title {
    color: #333;
    font-size: 18px;
    line-height: 55px;
    font-weight: 700;
    white-space: nowrap;
}

.doc-container .doc-head .toolbar .extra {
    margin-left: 15px;
	flex-grow: 1;
    text-align: right;
}

.doc-container .doc-head .toolbar .extra .ex-title {
	font-size: 18px;
    line-height: 24px;
    padding-top: 16px;
    color: #7a7a7a;
}

.doc-body {

}

.doc-body.with-sidebar {
	
}


.doc-body .sidebar {
    position: fixed;
    left: -280px;
    top: 0;
    bottom: 0;
    width: 280px;
    border-right: 1px solid #ddd;
    background-color: #fafafa;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    transition: left .25s ease;
}

.doc-container.with-head .doc-body .sidebar {
    top: 56px;
}

.doc-container .doc-body.with-sidebar .sidebar {
    left: 0;
}

.doc-body .sidebar .sidebar-header {
    position: relative;
    flex: none;
}

.doc-body .sidebar .sidebar-header .search-form {
    padding: 12px;
    border-bottom: 1px solid #ddd;
    flex: none;
}

.doc-body .sidebar .doc-list {
	flex: auto;
    overflow: hidden;
    position: relative;
}

.doc-body .sidebar .sidebar-copyright {
    flex: none;
    background: #fafafa;
    border-top: 1px solid #ddd;
    font-size: 12px;
    padding: 5px 0;
    text-align: center;
    line-height: 24px;
    position: absolute\9;
    bottom: 0\9;
    left: 0\9;
    right: 0\9;
}

.doc-body .workspace {
    transition: margin-left .25s ease;
}

.doc-body .workspace .article .art-body {
    max-width: 1120px;
    margin-left: auto!important;
    margin-right: auto!important;
    padding: 9px 24px;
    display: block;
}

.doc-body .workspace .article .art-markdown-body {
/*
    line-height: 1.2;
    font-size: 15px;
    word-wrap: break-word;
    color: #525252;
    font-family: Helvetica Neue,NotoSansHans-Regular,AvenirNext-Regular,arial,Hiragino Sans GB,Microsoft Yahei,WenQuanYi Micro Hei,serif;
*/
}

.doc-body .workspace .article .sidebar-tools {
    background: #fff;
    margin: 10px 10px;
    position: fixed;
    z-index: 20;
}


.doc-body .workspace .article .sidebar-tools>.tool-item {
    color: #7e888b;
    display: block;
    height: 30px;
    padding: 0 10px;
    text-transform: uppercase;
    line-height: 30px;
    position: relative;
    font-size: 14px;
    text-align: center;
    cursor: pointer;
	background-color: #f5f5f5;
}

.doc-body .workspace .article .sidebar-tools>.tool-item:hover {
	background-color: #dddddd;
    color: #03a9f4;
}


.doc-container .doc-body.with-sidebar #doc-sidebar-switch .fa-indent:before {
    content: "\f03b";
}

ul.chaper-list>li.chaper-level0 {
    padding-left: 10px;
}

ul.chaper-list>li.chaper-level1 {
	padding-left: 24px;
	
}

ul.chaper-list>li.chaper-level2 {
	padding-left: 38px;
}

ul.chaper-list>li i.fa {
	margin-right: 2px;
}

ul.chaper-list>li.is-group {
	font-weight: 600;
}

ul.chaper-list>li.is-group .fa {
    font-weight: 600;
}

ul.chaper-list>li.is-group .fa-file-o:before {
    content: "\f114";
}

.article h1, .article h2, .article h3, .article h4, .article h5, .article h6, .article .h1, .article .h2, .article .h3, .article .h4, .article .h5, .article .h6 {
    font-weight: 600;
}

@media only screen and (min-width: 600px) {
	.doc-container .doc-body.with-sidebar .workspace {
		margin-left: 280px;
	}
}