/*  --  LAYOUT  --  */
body.nav-sidebar #layout-container {
	height: 100%;
	}
body.nav-sidebar #layout-container #layout-nav {
	position: fixed;
	z-index: 800;
	left: 0;
	top: 0;
	width: 240px;
	height: 100%;
	background-color: rgba(255, 255, 255, 1);
/*	border-right: 2px solid rgba(0,0,0,0.5);*/
	}
body.nav-sidebar #layout-container #layout-field {
	margin-left: 242px;
	margin-right: 1.5em;
	margin-top: 1em;
	padding-left: 2em;
	}

/*  --  LIST  --  */
body.nav-sidebar #layout-container #layout-nav .nav.nav-list {
/*	height: 100%;*/
	padding-top: 0.5em;
/*	border-top: 1px solid rgba(127, 127, 127, 0.5);*/
	margin-left: 0.5em;
	margin-right: 0.75em;
	}
body.nav-sidebar #layout-container #layout-nav .nav.nav-list .nav-list-sub-item {
	padding-left: 20px;
	}
body.nav-sidebar #layout-container #layout-nav .nav.nav-list .nav-header {
	font-size: 1em;
	color: inherited;
	color: rgba(0,0,0,0.66);
	border-bottom: 1px solid rgba(127, 127, 127, 0.25);
	}
body.nav-sidebar #layout-container #layout-nav .nav.nav-list a {
	padding: 3px 15px;
	}

/*  List > Bootstrap 4  */
body.nav-sidebar #layout-container #layout-nav .nav.nav-list .nav-link {
	font-size: 0.95em;
	padding: 3px 15px;
	}
body.nav-sidebar #layout-container #layout-nav .nav.nav-list .nav-link.nav-header {
	text-transform: uppercase;
	font-weight: bold;
	font-size: 0.9em;
	}

/*  --  BRAND  --  */
body.nav-sidebar #layout-container #layout-nav div.brand {
	text-align: left;
	margin-top: 0.5em;
	margin-left: 0.65em;
	font-size: 1.4em;
	line-height: 2em;
	}
body.nav-sidebar #layout-container #layout-nav div.brand > a,
body.nav-sidebar #layout-container #layout-nav div.brand > a:active,
body.nav-sidebar #layout-container #layout-nav div.brand > a:hover,
body.nav-sidebar #layout-container #layout-nav div.brand > a:visited {
	color: #444;
	text-decoration: none;
	}
body.nav-sidebar #layout-container #layout-nav div.brand > img,
body.nav-sidebar #layout-container #layout-nav div.brand > a > img {
	max-width: 64px;
	max-height: 64px;
	}

/*  --  RESPONSIVE  --  */
@media (min-width: 768px) {
	body #layout-container #layout-field {
		margin-top: 45px;
		}
	body.nav-sidebar #layout-container #layout-field {
		margin-left: 240px;
		}
	body #layout-container #nav-sidebar-toggle {
		display: none;
		}
	}
@media (max-width: 767px) {
	body.nav-sidebar #layout-container #layout-field {
	/*  Field  */
		min-height: 95vh;
		margin-left: 0;
		margin-right: 0;
		margin-top: 2.5vh;
		margin-bottom: 2.5vh;
		-webkit-transition: 0.5s ease;
		-moz-transition: 0.5s ease;
		-o-transition: 0.5s ease;
		-ms-transition: 0.5s ease;
		transition: 0.5s ease;
		}
	body.nav-sidebar.nav-sidebar-open #layout-container #layout-field {
		filter: blur(5px);
		}
	/*  Field Mask  */
	body.nav-sidebar #nav-sidebar-field-mask {
		position: fixed;
		left: -100vw;
		top: 0;
		z-index: 799;
		width: 100vw;
		height: 100vh;
		background-color: rgba(0, 0, 0, 0);
		-webkit-transition: background-color 0.5s ease;
		-moz-transition: background-color 0.5s ease;
		-o-transition: background-color 0.5s ease;
		-ms-transition: background-color 0.5s ease;
		transition: background-color 0.5s ease;
		}
	body.nav-sidebar.nav-sidebar-open #nav-sidebar-field-mask {
		background-color: rgba(0, 0, 0, 0.5);
		}
	/*  Sidebar Nav Layout Container  */
	body.nav-sidebar #layout-container #layout-nav {
		position: fixed;
		top: 0;
		left: -100vw;
		height: 100%;
	/*	border-right: 1px solid rgba(0,0,0,0.25);*/
		-webkit-box-shadow: -6px 0px 20px 0px rgba(0,0,0,0.75);
		-moz-box-shadow: -6px 0px 20px 0px rgba(0,0,0,0.75);
		box-shadow: -6px 0px 20px 0px rgba(0,0,0,0.75);
		}
	/*  Siderbar Nav Toggle  */
	body.nav-sidebar #layout-container #nav-sidebar-toggle {
		display: block;
		position: fixed;
		top: 0;
		left: -0.5em;
		padding: 0.5em;
		font-size: 2em;
		cursor: pointer;
		}
	}