.doc-section{
	min-height:100vh;
	padding: calc(var(--navbar-height) * 2) 0 var(--grid-lg);
	background-image:linear-gradient(to bottom, var(--mb-background) 90%, var(--mb-surface-variant))
}

.doc-section .doc-container {
	padding: 0 var(--grid-md);
}

.doc-section .doc-container .doc-nav{
	display:none
}

.doc-nav-sm {
	margin-top:8vh;
	background-color: var(--mb-surface);
	border-radius:var(--mb-border-radius-md);
	-webkit-border-radius:var(--mb-border-radius-md);
	-moz-border-radius:var(--mb-border-radius-md);
	-ms-border-radius:var(--mb-border-radius-md);
	-o-border-radius:var(--mb-border-radius-md);
	box-shadow:var(--mb-elevation-1-shadow);
	height: 5rem;
	overflow:hidden;
}

.doc-nav-sm .doc-nav-btn{
	display: flex;
	justify-content:space-between;
	align-items:center;
	margin:0;
	padding: var(--grid-md);
	width:100%;
	outline:none;
	box-shadow: none;
	border:none;
	background-color:transparent;
	background-image:linear-gradient(to right, rgba(11, 178, 159, 0), rgba(103, 184, 73, 0));
	color:var(--mb-on-surface);
	border-bottom:1px solid transparent
}

.doc-nav-sm .doc-nav-btn:hover,
.doc-nav-sm .doc-nav-collapse a:hover,
.doc-nav-sm .doc-nav-collapse a.active{	
	background-image:linear-gradient(to right, rgba(11, 178, 159, 0.08), rgba(103, 184, 73, 0.08));
}

.doc-nav-sm .doc-nav-collapse a.active{	
	color:var(--mb-primary)
}

.doc-nav-sm .doc-nav-btn p,
.doc-nav-sm .doc-nav-btn span {
	margin:0;
}

.doc-nav-sm .doc-nav-collapse{
	display: flex;
	flex-direction:column;
}

.doc-nav-sm .doc-nav-collapse a {
	text-decoration: none;
	color:var(--mb-on-surface-variant);
	padding:var(--grid-md);
	background-image:linear-gradient(to right, rgba(11, 178, 159, 0), rgba(103, 184, 73, 0));
}

.doc-section .doc-container .content h1{
	color:var(--mb-on-surface);
}

.doc-section .doc-container .content h1:first-of-type{
	font-size: var(--mb-font-size-title-lg);
	margin:0 0 0.6em;
}

.doc-section .doc-container .content h1:not(:first-of-type){
	font-size: var(--mb-font-size-title-md);
	line-height:1.4em;
	margin: 1.4em 0 1em
}

.doc-section .doc-container .content p{
	color:var(--mb-on-surface-variant);
	line-height:1.8em;
	margin-bottom: 1.2em
}

.doc-section .doc-container .content hr{
	border-color:var(--mb-outline-variant);
	margin-top:2rem;
}

@media(min-width:768px){
	.doc-section .doc-container {
		padding: 0 8vw;
	}
}

@media(min-width:992px){
	.doc-section .doc-container {
		display: grid;
		grid-template-columns: 33% 66%;
		grid-template-areas: "side-nav content";
		column-gap:var(--grid-xl);
	}
	
	.doc-section .doc-container .doc-nav{
		grid-area: side-nav;
		display:flex;
		flex-direction:column;
		height:calc(6rem + var(--grid-md) * 2) !important;
		padding:var(--grid-md);
		background-color: var(--mb-surface);
		border-radius:var(--mb-border-radius-md);
		-webkit-border-radius:var(--mb-border-radius-md);
		-moz-border-radius:var(--mb-border-radius-md);
		-ms-border-radius:var(--mb-border-radius-md);
		-o-border-radius:var(--mb-border-radius-md);
		box-shadow: var(--mb-elevation-4-shadow);
	}

	.doc-section .doc-container .doc-nav a{
		width:100%;
		justify-content:flex-start;
		margin:0 !important;
		padding: 0.4em 1.1em 0.45em 1.15em;
	}

	.doc-nav-sm {
		display:none;
	}

	.doc-section .doc-container .content{
		grid-area:content;
	}
}

@media(min-width:1400px){
	.doc-section .doc-container {
		padding:0 15vw;
		grid-template-columns: 33% 66%;
	}
}