/* Nitro UI Grid */
lwa {
	margin:64px 0 0 var(--lwa-width-nav);
	display:block;
	
	> lwaNav {
		display:flex;
		flex-direction:column;
		position:fixed;
		top:0;
		left:0;
		width:var(--lwa-width-nav);
		height:100%;
		z-index:7;
		border-top: var(--lwa-border);
		border-right: var(--lwa-border);
		background:var(--lwa-bg-color);
		box-shadow: var(--lwa-shadow-1);
		
		> lwaNavBrand {
			flex:0 0 64px;
			display:flex;
			flex-direction:row;
			flex-wrap:nowrap;
			border-bottom:var(--lwa-border);
		}
		> lwaNavMenu {
			flex:1 1 auto;
			overflow-y:auto;
			overflow-x:hidden;
		}
		> lwaNavFoot {
			flex: 0 0 64px;
			border-top:var(--lwa-border);
		}
	}
	> lwaHead {
		display:flex;
		flex-direction:row;
		flex-wrap:nowrap;
		position:fixed;
		top:0;
		left:0;
		width:calc(100% - var(--lwa-width-nav));
		height:64px;
		z-index:6;
		margin:0 0 0 var(--lwa-width-nav);
		background:var(--lwa-bg-color);
		border-top: var(--lwa-border);
		border-bottom:var(--lwa-border);
		box-shadow: var(--lwa-shadow-1);
		
		> lwaHeadStart,
		> lwaHeadEnd {
			flex:0 0 260px;
			
		}
		> lwaHeadMid {
			flex:1 1 auto;
		}
	}
	> lwaMain {
		display:block;
		background: var(--lwa-bg-color-2);
		
		> lwaMainBody {
			display:block;
			margin:0 var(--lwa-width-aside) 0 0;
			overflow-y: auto;
			overflow-x: hidden;
			height: 100%;
			max-height: calc(100vh - 64px);
			scroll-behavior: smooth;
			
			> lwaMainBodyContent {
				display:block;
			}
			
			> lwaMainBodyFoot {
				display:block;
			}
		}
		> lwaMainAside {
			display:block;
			position:fixed;
			top:0;
			right:0;
			width:var(--lwa-width-aside);
			height:calc(100vh - 64px);
			margin:64px 0 0 0;
			padding:20px;
			overflow-y: auto;
			overflow-x: hidden;
			z-index:7;
			border-left:var(--lwa-border);
			
			&.loading::before {
				display:block;
				height:calc(100% - 35px);
				width:100%;
				content:"Loading ...";
				color:var(--lwa-gray-2);
				vertical-align: middle;
				text-align:center;
        line-height: calc(100vh - 64px - 55px);
				padding-top:35px;
			}
			&.loading::after {
				display: block;
				height: calc(100% - 40px);
				width: 100%;
				content: "";
				background: url(/images/0/load/load-square-blocks__GIF--200x200.gif) center center no-repeat;
				vertical-align: middle;
				margin-top: 0px;
				background-size: 60px 60px;
				position: absolute;
				top: 0;
				left: 0;
				opacity:0.5;
			}
		}
	}
}

/* Viewports */
/* Widescreen [> 1200px] */
/* Desktop [0-1199px] */
@media only screen and (max-width: 1199px) {
	lwa {
		margin:64px 0 0 84px;
		
		> lwaHead {
			margin:0 0 0 84px;
			width:calc(100% - 84px);
			
			> lwaHeadStart, > lwaHeadEnd {
				flex: 0 0 160px;
			}
		}
		
    > lwaNav {
			width:84px;
			
			> lwaNavFoot {
				flex:0 0 84px;
			}
		}
	}
}
/* Tablet [0-991px] */
@media only screen and (max-width: 991px) {
	lwa {
    > lwaMain {
			> lwaMainBody {
				margin:0 var(--lwa-width-aside-tablet) 0 0;
			}
			> lwaMainAside {
				display:none;
				width: var(--lwa-width-aside-tablet);
			}
		}
	}
}

/* Mobile [0-767px] */
@media only screen and (max-width: 767px) {
	lwa {
		padding:64px 0;
		height:100%;
		margin:0;
		
		> lwaNav {
			margin: 0;
			top: auto;
			bottom: 0;
			left:0;
			display: block;
			width: 100%;
			height: 64px;
			border-right: 0;
			border-top: var(--lwa-border);
			z-index:9;
			background:var(--lwa-bg-color);
			
			> lwaNavBrand {
				position:fixed;
				top:0;
				left:0;
				border-bottom:0;
			}
			
			> lwaNavMenu {
				overflow:hidden;
			}
			> lwaNavFoot {
				display:none;
			}
		}
		> lwaHead {
			margin:0;
			width:100%;
			padding-left:64px;
			
			> lwaHeadStart, > lwaHeadMid {
				flex: 0 0 0;
			}
			> lwaHeadEnd {
				flex: 1 1 auto;
			}
		}
    > lwaMain {
			height: 100%;
			
			> lwaMainBody {
				margin:0;
			}
			> lwaMainAside {
				display:none;
			}
		}
	}
}

.lwa-grid-1 {
	@media only screen and (max-width: 991px) {
		lwa {
			> lwaMain {
				> lwaMainBody {
					margin:0;
				}
				> lwaMainAside {
					width:0;
					border:0;
				}
			}
		}	
	}
}