@media screen and (max-device-width: 768px) {
	:root{
		--headBarHeight: 50px;
	}

	/*.navLeft{padding: 0;}*/
	.headerBar .btn.sml{font-size: 1em;}

	/*Nav*/
	.main.filled{padding-top: 0;}
	.main.filled > div{max-width: 100%;}
	.navLeft{background-color: var(--highlight); color: var(--dark); padding: 0;}

	.navLeft .childBtn{padding: 10px; box-sizing: border-box; display: none;}
	.navLeft .childBtn.active{display: block;}
	.navLeft .btn i{margin: 0 15px;}
	.navLeft .childBtn .btn{box-sizing: border-box; padding-left: 30px;}
	.navLeft .childBtn .btn i{display: none;}

	.navLeft .btn .expand{color: var(--dark);}
	.navLeft .btn .expand:hover{background-color: var(--midtone); color: var(--dark);}
	.navLeft .btn .primary{text-transform: uppercase;}
	.navLeft .btn:hover{background-color: var(--light); color: var(--dark);}
	.navLeft .btn .primary,
	.navLeft .childBtn .btn{color: var(--dark);}
	.navLeft .btn .primary:hover, .navLeft .btn .primary.active{background-color: var(--midtone); color: var(--dark);}
	.navLeft .childBtn:hover,
	.navLeft .childBtn.active{background-color: var(--light); color: var(--dark);}
	.navLeft .childBtn .btn:hover,
	.navLeft .childBtn .btn.active{background-color: var(--highlight); color: var(--dark);}

	#getModalAddMaterialFromBulk { max-height: unset; }

	/* Expand/Collapse Headers */
	.main .sectionBox.collapsableOuter .collapsableHeader { flex-direction: row; }
	.main .sectionBox.collapsableOuter .collapsableHeader span:last-of-type { justify-content: flex-start; }
}