//
// Layout
// --------------------------------------------------

div.row,
ul.row { margin: 0 -@layoutAppSeparator/2; }
.row-merge { margin: 0 !important; }
div[class*="col-xs-"],
div[class*="col-sm-"],
div[class*="col-md-"],
div[class*="col-lg-"],
li[class*="col-xs-"],
li[class*="col-sm-"],
li[class*="col-md-"],
li[class*="col-lg-"] { padding: 0 @layoutAppSeparator/2; }

#content > .innerLR { padding-left: @layoutAppSeparator; padding-right: @layoutAppSeparator; }
#content > .innerTB { padding-top: @layoutAppSeparator; padding-bottom: @layoutAppSeparator; }
#content > .innerAll { padding: @layoutAppSeparator; }
#content {
	> h1, > h2, > h3, > h4 {
		padding: 0 @layoutAppSeparator @layoutAppSeparator;
		margin: 0;
	}
	> .innerLR {
		> h1, > h2, > h3, > h4 {
			margin: 0;
		}
	}
}

// borders
.border-top { border-top : 1px solid @contentBorder; }
.border-right { border-right: 1px solid @contentBorder; }
.border-bottom { border-bottom: 1px solid @contentBorder !important; }
.border-left { border-left: 1px solid @contentBorder; }

// Grid
// -------------------------

.separator-h { height: @layoutAppSeparator; }

.layout-app {
	margin: 0 @layoutAppSeparator 0;
	position: relative;
	.container {
		padding: 0;
	}
	.row-app {
		background: @containerBg;
		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: @layoutAppSeparatorTablet;
		border-left: none;
		border-right: none;
		position: relative;
		&:after {
			content: "";
			display: block;
			position: absolute;
			left: 0;
			right: -1px;
			top: 0;
			bottom: 0;
			background: #eaeaea;
		}
	}
	.col-separator {
		position: relative;
		margin: 0;
		overflow-x: hidden;
		overflow-y: auto;
	}
}
.app .row-app { overflow: hidden; }

@media (max-width: 767px) {
	.layout-app {
		.col-separator-h {
			height: @layoutAppSeparator;
		}
	}
}
@media (min-width: 1200px)
{
	html,
	html.app {
		.layout-app {
			margin: 0;
			.col-separator {
				position: relative;
				margin-right: @layoutAppSeparator;
				overflow: visible;
			}
			.col-separator-first { margin-left: @layoutAppSeparator; }
			.col-separator-last { margin-right: 0; }
			.col-separator-h {
				height: @layoutAppSeparator;
			}
		}
	}
	html.app {
		.layout-app {
			margin: 0;
			.col-separator {
				overflow-x: hidden;
				overflow-y: auto;
			}
		}
	}
}

@media (max-width: 991px) {
	
	.row-merge {
		> [class*="col-md-"] ~ [class*="col-md-"] {
			position: relative;
			&:after { position: absolute; top: 0; bottom: auto; left: 0; right: 0; width: auto; height: 1px; background: @contentBorder; content: ""; }
		}
	}

	html, html.app {
		.row-app {
			> [class*="col-sm-"] {
				~ [class*="col-sm-12"] {
					margin-top: @layoutAppSeparator;
					position: relative;
					overflow: visible !important;
					&:after {
						background: #eaeaea;
						position: absolute;
						top: -@layoutAppSeparator;
						left: 0;
						right: 0;
						height: @layoutAppSeparator;
						content: "";
					}
				}
			}

			> [class*="col-sm-"],
			> [class*="col-md-"] {
				~ [class*="col-md-"] {
					&:after {
						bottom: auto;
						width: auto;
						left: 0;
						right: 0;
						height: 1px;
						content: "";
					}
				}
			}
		}
	}
}

// .layoutAppTop (@navbarMainHeight) when (@navbarMainHeight = 0) {
// 	top: @layoutAppTop;
// }
// .layoutAppTop (@navbarMainHeight) when (@navbarMainHeight > 0) {
// 	top: @layoutAppTop + @navbarMainHeight;
// }

@media (max-width: 991px) {
	html.app .layout-app {
		[class*="col-sm-12"],
		[class*="col-md-12"] {
			> .col-separator {
				left: 0;
				right: 0;

				.col-separator { 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 (max-width: 1199px) {

	.layout-app {
		[class*="col-lg-4"] {
			&[class*="col-sm-"] {
				.col-separator { margin-right: @layoutAppSeparatorTablet; }
				.col-separator-last-sm { margin-right: 0; }
			}
			&[class*="col-sm-12"] {
				.col-separator { margin-right: 0; }
			}
		}
	}

	html, 
	html.app {
		
		.row { margin: 0 -@layoutAppSeparatorTablet/2; }
		.row-merge { margin: 0; }
		.layout-app > .row-app { margin: 0; }

		div[class*="col-xs-"],
		div[class*="col-sm-"],
		div[class*="col-md-"],
		div[class*="col-lg-"] { padding: 0 @layoutAppSeparatorTablet/2; }

		[class*="col-sm-12"],
		[class*="col-md-12"] {
			> .col-separator {
				margin-left: 0;
				margin-right: 0;
				.col-separator { margin-right: @layoutAppSeparatorTablet; }
				.col-separator-last { margin-right: 0; }
			}
		}
		.row-app {
			> [class*="col-sm-"],
			> [class*="col-md-"] {
				~ [class*="col-sm-"],
				~ [class*="col-md-"] {
					position: relative;
					&:after {
						background: #eaeaea;
						position: absolute;
						top: 0;
						bottom: 0;
						left: auto;
						right: auto;
						height: auto;
						width: 1px;
						content: "";
					}
				}
				~ [class*="col-md-12"] {
					margin-top: @layoutAppSeparator;
					position: relative;
					overflow: visible !important;
					&:after {
						background: #eaeaea;
						position: absolute;
						top: -@layoutAppSeparator;
						left: 0;
						right: 0;
						height: @layoutAppSeparator;
						content: "";
					}
				}
			}
		}
	}
}

@media (min-width: 1200px) {
	html.app {
		&,
		body, 
		body .container-fluid {
			min-height: 100%;
			height: 100%; 
			overflow: hidden;
		}
		#content {
			height: 100%;
			// padding: 0;
		}
		.layout-app {
			position: absolute;
			// .layoutAppTop(@navbarMainHeight);
			// bottom: @footerHeight;
			top: @layoutAppTop;
			bottom: 0;
			width: 100%;
			
			.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;

				> 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; }
		}
	}
}

// Content
// -------------------------

.contentPaddingTop (@navbarMainHeight) when (@navbarMainHeight > 0) {
	padding-top: @navbarMainHeight;
}

.container-fluid {
	background: @containerBg;
	padding-bottom: @layoutAppSeparator + @footerHeight;
}

#content { 
	position: relative;
	overflow: hidden;
	min-width: 320px;
	min-height: 500px;
	padding: 0;
	background: @containerBg;
	.contentPaddingTop(@navbarMainHeight + @layoutAppSeparator);
}

.sidebar.sidebar-discover {
	#content {
		margin-left: @menuSidebarDiscoverWidth;
	}
}

@media (max-width: 767px) {
	.container-fluid {
		position: relative;
		overflow-x: hidden;
	}
}

@media (min-width: 768px) {
	#content {
		overflow: visible;
	}
}

.col-fs { left: 0 !important; right: 0 !important; margin: 0; top: 0 !important; }
.img-responsive { width: 100%; }

.fa-6x { font-size: 80px; }
.nicescroll-rails { display: none; }