:root {
	--active-arrow: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 2 20 20' version='1.1' aria-hidden='true'><path d='M4,11L13,13L11,4'></path></svg>");
	--collapsed-arrow: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 2 20 20' version='1.1'><path d='M5,5L13.5,10L5,15'></path></svg>");
	--expanded-arrow: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 2 20 20' version='1.1' aria-hidden='true'><path d='M3,6L8,13.5L13,6'></path></svg>");
	--crumb-chevron: url("data:image/svg+xml,<svg viewBox='0 2 20 20' fill='none' stroke='black'  xmlns='http://www.w3.org/2000/svg'><path d='M5.5,6L10,10L5.5,14' stroke-width='1.5' stroke-linecap='round'/></svg>");
	--moddable-blue: #002f87;
}

.toc-arrow {
	background-color: black;
	content: ' ';
	display: inline-block;
	-webkit-mask-image: var(--expanded-arrow);
	mask-image: var(--expanded-arrow);
	vertical-align: middle;
	width: 20px; height: 20px;
}
.toc-collapsed .toc-arrow {
	-webkit-mask-image: var(--collapsed-arrow);
	mask-image: var(--collapsed-arrow);
}
.toc-collapsed:active .toc-arrow {
	-webkit-mask-image: var(--active-arrow);
	mask-image: var(--active-arrow);
}
.toc-collapsed:hover .toc-arrow {
	background-color: var(--moddable-blue);
}
.toc-expanded .toc-arrow {
	-webkit-mask-image: var(--expanded-arrow);
	mask-image: var(--expanded-arrow);
}
.toc-expanded:active .toc-arrow {
	-webkit-mask-image: var(--active-arrow);
	mask-image: var(--active-arrow);
}
.toc-expanded:hover .toc-arrow {
	background-color: var(--moddable-blue);
}

#doc-bar {
  	background-color: #f6f8fa;
  	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
	overflow-x: auto;
	position: fixed;
	width: 100%;
	top: 60px;
	height: 2.5rem;
	z-index: 2;
	
	user-select: none;
	-webkit-user-select: none;
	cursor: default;
}

#doc-title {
	color:black;
  	font-size: 0.9rem;
  	font-weight: 400;
  	line-height: 2.5rem;
	margin-left: auto;
	margin-right: auto;
	width: 100%;
	max-width: 1200px;
}
#doc-menu {
	padding-left: 10px;
	padding-right: 10px;
}
#doc-menu:hover {
	color: var(--moddable-blue);
}
.doc-crumb {
	padding-right: 10px;
}
.doc-crumb::before {
	background-color: gray;
	content: ' ';
	display: inline-block;
	-webkit-mask-image: var(--crumb-chevron);
	mask-image: var(--crumb-chevron);
	vertical-align: middle;
	width: 20px;
	height: 20px;
}

#doc-layout {
	display: block;
	margin-top:8rem;
	width: 100%;
}
#doc-toc {
  	background-color: #fff;
  	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  	border-right: 1px solid rgba(0, 0, 0, 0.1);
  	
	display: none;
	position: fixed;
	width:20rem;
	top: 8rem; max-height: calc(100vh - 8rem);
  	
	overflow-y: auto;
	user-select: none;
	-webkit-user-select: none;
	cursor: default;
}
#doc-article {
	display: block;
	margin: 20px;
}

@media (min-width: 992px) {
	#doc-layout {
		display: flex;
		flex-wrap: wrap;
		
		margin-left: auto;
		margin-right: auto;
		max-width: 1200px;
	}
	#doc-toc {
		border: 0;
  		background-color: #fff;
		display: block;
		flex: 0 0 20rem;
				
		position: -webkit-sticky;
		position: sticky;
		top: 8rem; height: calc(100vh - 8rem);
	}
	#doc-article {
		flex: 1;
		overflow-x: auto;
	}
}

.toc-space {
	height: 10px;
}
.toc-folder {
	color:black;
  	font-size: 0.9rem;
  	font-weight: 400;
  	line-height: 20px;
	padding-left: 10px;
	padding-top: 5px;
	padding-bottom: 5px;
}
.toc-folder:hover {
	color: var(--moddable-blue);
}
.toc-files {
	display: none;
	overflow: hidden;
	padding-left: 20px;
}
.toc-file {
	color:black;
  	font-size: 1rem;
  	font-weight: 300;
	padding-left: 30px;
	padding-right: 10px;
	padding-top: 5px;
	padding-bottom: 5px;
}
.toc-file:hover {
	color: var(--moddable-blue);
	text-decoration:underline;
}
#toc-selected-file {
	font-weight: 800;
}
#toc-selected-file:hover {
	color:black;
	text-decoration:none;
}