@layoutAppSeparator: 15px;

#content > .row-app { margin: 0; }

.layout-app {
	.box { border: 1px solid #efefef; }
	.row-app {
		background: #f5f5f5;
		margin: 0;
		> div[class*="col-"] { padding: 0; }
	}
	.col-separator {
		> .widget,
		> .widget-body,
		> .widget-stats,
		> .list-group { 
			margin: 0 !important; 
			border: none !important; 
		}
		background-color: #fff;
	}
	.reset-components {
		.widget,
		.widget-body,
		.widget-stats,
		.list-group { 
			margin: 0 !important; 
			border: none !important;
		}
		.list-group li {
			border-left: none !important;
			border-right: none !important;
		}
	}
	.col-separator-h {
		height: @layoutAppSeparator;
		border-left: none;
		border-right: none;
		position: relative;
		&:after {
			content: "";
			display: block;
			position: absolute;
			left: 0;
			right: -1px;
			top: 0;
			bottom: 0;
			background: #f5f5f5;
		}
	}
}

@media (min-width: 768px)
{
	html.app {
		.layout-app {
			.col-separator {
				position: relative;
				margin-right: @layoutAppSeparator;
				overflow-x: hidden;
				overflow-y: auto;
			}
			.col-separator-first { margin-left: @layoutAppSeparator; }
			.col-separator-last { margin-right: 0; }
		}
		@media (max-width: 991px) {
			[class*="col-sm-12"] {
				> .col-separator {
					margin-left: 0;
					margin-right: 0;
				}
				~ [class*="col-sm-12"] {
					margin-top: @layoutAppSeparator;
					position: relative;
					overflow: visible !important;
					&:after {
						background: #efefef;
						position: absolute;
						top: -@layoutAppSeparator;
						left: 0;
						right: 0;
						height: @layoutAppSeparator;
						content: "";
					}
				}
			}
		}
	}
}

@media (min-width: 992px)
{
	html.app {
		&,
		body, 
		body .container-fluid {
			min-height: 100%;
			height: 100%; 
			overflow: hidden;
		}
		#content {
			height: 100%;
			padding: 0;
		}
		.layout-app {
			position: absolute;
			bottom: 40px + 15px;
			top: 47px;
			// width: 100%;
			left: @sidebarWidth;
			right: 0;
			
			.col-table {
				display: table;
				height: 100%;
				width: 100%;
				position: absolute;
				table-layout:fixed;
				left: 0;
				right: 0;
			}

			.col-table-row {
				display: table-row;
				height: 100%;
				> .col-app > .col-app {
					position: absolute;
					width: 100%;
				}
			}

			.col-app {
				height: 100%;
				overflow-x: hidden;
				overflow-y: auto;
				position: relative;
			}

			.row-app {
				padding: 0;
				width: 100%;
				position: absolute;
				top: 0;
				bottom: 0;

				// .row { margin: 0; }
				// div[class*="col-"] { padding: 0; }

				> div[class*="col-"],
				.col-app {
					height: 100%;
					overflow-x: hidden;
					overflow-y: auto;
					position: relative;
				}
			}

			.col-separator {
				position: absolute;
				top: 0;
				bottom: 0;
				left: 0;
				right: @layoutAppSeparator;
				margin: 0;
				overflow-x: hidden;
				overflow-y: auto;
				&.col-unscrollable { overflow-y: hidden; overflow: hidden; }
			}
			.col-separator-first { left: @layoutAppSeparator; }
			.col-separator-last { right: 0px; }

			.col-scrollable { overflow-y: auto; overflow-x: hidden; }
			.col-unscrollable { overflow-y: hidden; }
		}
		@media (max-width: 991px) {
			[class*="col-sm-12"] {
				> .col-separator {
					left: 0;
					right: 0;
				}
				~ [class*="col-sm-12"] {
					margin-top: @layoutAppSeparator;
					position: relative;
					overflow: visible !important;
					&:after {
						background: #efefef;
						position: absolute;
						top: -@layoutAppSeparator;
						left: 0;
						right: 0;
						height: @layoutAppSeparator;
						content: "";
					}
				}
			}
		}
	}
}