.toc,
.toc * {
	-webkit-box-sizing: border-box;
	box-sizing: border-box
}

/* 若存在头部使用了fixed或absolute定位，会出现定位没达到预期效果; 
可将所有的标题padding-top等于头部的高, margin-top等于头部高的相反值，这样可以解决定位不准切不会影响布局； */
*[data-toc] h1,
*[data-toc] h2,
*[data-toc] h3,
*[data-toc] h4,
*[data-toc] h5,
*[data-toc] h6 {
	margin-top: -145px  ! important;  
	padding-top: 145px  ! important;  
}

/* 宽度小于768 */
@media screen and (max-width:768px) {

	.toc {
		width: inherit;
		max-width: 250px;
		color: #333;
		position: relative;
		border-top-left-radius: 6px;
		border-bottom-left-radius: 6px;
		box-shadow: 0  1px  4px   #444;
	}
	.toc-link {
		margin-bottom: 8px;
		margin-top: 8px;
		display: block;
		padding: .2rem 2rem;
		font-size: 12px;
		text-decoration: none;
		color: #555;
		position: relative;
		word-break: break-word;
	}
}

/* 宽度大于768 */
@media screen and (min-width:768px) {

	.toc {
		width: inherit;
		max-width: 250px;
		color: #333;
		position: relative;
		padding-right: 30px;
	}
	.toc-link {
		display: block;
		padding: 20px 16px 0 0;
		font-size: 16px;
		text-decoration: none;
		color: #555;
		position: relative;
		word-break: break-word;
	}
}





.toc.shadow {
	-webkit-box-shadow: 0 0 .5rem #eee;
	box-shadow: 0 0 .5rem #eee
}

.toc.toc-fixed {
	position: fixed;
 /* width: 100%; */
	/* top: 24px; */
	z-index: 10
}

.toc-hightlight {
	width: 100%;
	
	/* background: #eee; */
	position: absolute;
	left: 0;
	top: 0;
	
	/* border-left: 3px solid #009a61; */
	-webkit-transition: .2s;
	-o-transition: .2s;
	transition: .2s
	
}

.toc-brand {
   
  	margin-bottom: 24px;
	padding: 0 1.25rem 2rem 1.25rem  ;
	font-weight: 700;
	font-size: 17px;
	line-height: inherit;
	white-space: nowrap;
	display: block;
	width: 100%;
	overflow: hidden;
	-o-text-overflow: ellipsis;
	text-overflow: ellipsis;
 
	border-bottom: 1px solid #ccc;

    }

.toc,
.toc .toc-brand {
	-webkit-transition: .3s ease-in-out;
	-o-transition: .3s ease-in-out;
	transition: .3s ease-in-out
}

.toc.toc-hidden {
	width: 0
}

.toc.toc-hidden .toc-brand {
	padding: initial
}

.toc-navbar {
	position: relative;
	display: block;
	scroll-behavior: smooth
	
}

.toc-navbar::-webkit-scrollbar-thumb:horizontal {
	width: 5px;
	/* background-color: #ccc; */
	border-radius: 6px
}

.toc-navbar::-webkit-scrollbar-track-piece {
	/* background-color: #fff; */
	border-radius: 0
}

.toc-navbar::-webkit-scrollbar {
	width: 10px;
	height: 8px
}

.toc-navbar::-webkit-scrollbar-thumb:vertical {
	height: 50px;
	/* background-color: #999; */
	border-radius: 4px;
	outline: #fff solid 2px;
	outline-offset: -2px;
	border: 2px solid #fff
}

.toc-navbar::-webkit-scrollbar-thumb:hover {
	height: 50px;
	/* background-color: #9f9f9f; */
	border-radius: 4px
}

.toc-nav {
    /* margin-top: 12px; */
	display: block;
	padding-left: 0;
	margin-bottom: 0;
	-webkit-transition: .3s;
	-o-transition: .3s;
	transition: .3s
}

.toc-newbrand{
 
	/* height: 44px; */
	/* background-color: green; */
}



.toc-link:before {
 
	word-break: break-word;
	height: .25rem;
	width: .25rem;
	/* background: #555; */
	position: absolute;
	top: .8rem;
	left: 1rem
}

.toc-link.active:before,
.toc-link:hover:before {
	/* background: red */
}

.toc-link.active,
.toc-link:hover {
	color: #FF6C00;
}

.toc-link.ml-1 {
	margin-left: 1rem !important
}

.toc-link.ml-2 {
	margin-left: 2rem !important
}

.toc-link.ml-3 {
	margin-left: 3rem !important
}

.toc-link.ml-4 {
	margin-left: 4rem !important
}

.toc-link.ml-5 {
	margin-left: 5rem !important
}

.toc-link.ml-6 {
	margin-left: 6rem !important
}