@include media-breakpoint-down(md) {
	body.container,
	.app .container{
		max-width: 100%;
		padding-left: .25rem;
		padding-right: .25rem;
	}
	body.container{
		background: #fff;
	}
}
@include media-breakpoint-up(lg) {
	body.container{
		&,
		.container{
			padding-left: 0;
			padding-right: 0;
		}
		@include box-shadow(0 1px 1px rgba(0,0,0,0.1));
		.app-aside{
			left: inherit;
			right: auto;
			&.lg  ~ .app-content .app-header{
				width: 60rem - $aside-lg-width;
			}
			&.sm  ~ .app-content .app-header{
				width: 60rem - $aside-sm-width;
			}
			&.folded  ~ .app-content .app-header{
				width: 60rem - $aside-folded-width;
			}
			&.folded.md  ~ .app-content .app-header{
				width: 60rem - $aside-folded-md-width;
			}
			&.folded.md.hides  ~ .app-content .app-header{
				width: 100%;
			}
			~ .app-content .app-header{
				width: 60rem - $aside-width;
			}
		}
		.app-header{
			left: inherit;
			right: auto;
			margin-left: 0;
			width: 60rem;
		}
	}
}

@include media-breakpoint-up(xl) {
	body.container{
		.app-aside{
			&.lg  ~ .app-content .app-header{
				width: 72.25rem - $aside-lg-width;
			}
			&.sm  ~ .app-content .app-header{
				width: 72.25rem - $aside-sm-width;
			}
			&.folded  ~ .app-content .app-header{
				width: 72.25rem - $aside-folded-width;
			}
			&.folded.md  ~ .app-content .app-header{
				width: 72.25rem - $aside-folded-md-width;
			}
		  &.folded.md.show  ~ .app-content .app-header,
		  &.folded.md.hides  ~ .app-content .app-header{
			width: 100%;
			left: 0;
			right: 0;
		  }
		  &.folded.md.show{
			left: 0;
		  }
			~ .app-content .app-header{
				width: 72.25rem - $aside-width;
			}
		}
		.app-header{
			width: 72.25rem;
		}
	}
}
