/*NOTE: mobile first (xs) */
body, html {
	margin: 0;
	padding: 0;
	min-height: 100vh;
	position: relative;
}

#mainWrapper {
	max-width: 1024px;
	margin: 0 auto;
	padding: 50px 0 0 0;
	min-height: 100vh;
	position: relative;
}

header {
	width: 100%;
	height: 50px;
	position: fixed;
	left: 0;
	top: 0;
	z-index: 100;
	padding: 5px;
}

header h1 {
	float: left;
    margin: 10px 0 0 10px;
    padding: 0;
    font-size: 16px; 
	color: var(--HeaderColor);
	white-space: nowrap;
	max-width: 45%;
	overflow: hidden;
	text-overflow: ellipsis;
}

header #mainLogo { 
	background-image: var(--ApplicationLogoIconUrl); 
	background-position: left center; background-repeat: no-repeat; background-size: contain;
	width: 50px; height: 40px; float: left;
	display: block; 
}

.action-container a { 
	display: block; 
	position: relative; 
	float: right; 
	margin: 5px 3px; 
	width: 34px; 
	height: 30px; 
	font-size: 18px; 
}

#globalActions { display: none; }

.action-container div {
	position: absolute;
	right: 0;
	top: 50px;
	min-width: 100px;
	background-color: var(--HeaderColor);
	color: var(--HeaderBGColor);
	border-style: solid;
	border-width: 1px;
	border-color: var(--HeaderBorderColor);
	-webkit-box-shadow: -3px 3px 3px rgba(0, 0, 0, .25);
	box-shadow: -3px 3px 3px rgba(0, 0, 0, .25);
}
.action-container div a { color: var(--HeaderBGColor); }

.action-container div.collapsing {
	-webkit-transition-duration: .10s;
    -o-transition-duration: .10s;
    transition-duration: .10s;
}
#headerSmartBox {
	position: absolute;
	left: 0;
	top: 70px;
	z-index: 10;
	background-color: var(--HeaderBGColor);
	border-style: solid;
	border-width: 1px;
	border-color: var(--HeaderBorderColor);
	padding: 10px;
	width: 100%;
}
#headerSmartBox.collapsed { display: none; }
#headerSmartBox .smart-box-wrapper { background-color: var(--HeaderBGColor);  }

#wrapper main {
	margin: 0;
	padding: 1px;
	position: relative;
}
#wrapper main.disabled {
	pointer-events: none;
	opacity: .3;
}

#msgWrapper {
	position: fixed;
	top: 20px;
	padding: 0 5px 0 5px;
	z-index: 10001;
	width: 100%;
}
#interfaceMessage { 
	display: none; margin: 0 auto; max-width: 1024px; 
	-webkit-box-shadow: 5px 5px 5px rgba(0, 0, 0, .25);
	box-shadow: 5px 5px 5px rgba(0, 0, 0, .25); 
}

/**SM */
@media screen and (min-width: 992px) {
	#mainWrapper { padding-top: 85px; }
	#wrapper main {
		margin: 0 20px;
	}

	header {
		height: 80px;
	}
		header #mainLogo {
			background-image: var(--ApplicationLogoUrl);
			background-position: center center;
			width: 250px;
			height: 60px;
			max-width: none;
		}
	header h1 {
		font-size: 24px;
		margin-top: 18px;
	}

	#headerActions {
		margin-top: 5px;
	}
	.action-container a { 
		width: 50px; 
		height: 40px; 
		font-size: 24px; 
		margin-top: 10px;
	}

	.action-container div.collapse a { color: var(--HeaderColor); }
	.action-container div.collapse a:hover { color: var(--HeaderLinkHoverColor); }
	header .action-container div.collapse {
		display: block;
		position: relative;
		float: right;
		top: auto;
		background-color: var(--HeaderBGColor); color: var(--HeaderColor); border: none;
		-webkit-box-shadow: none;
			box-shadow: none; 
	}

	header .action-container .action-collapse {
		display: none !important;
	}
	#headerSmartBox { left: 260px; top: 80px; max-width: 350px; }
}