* {
	margin: 0;
	padding: 0;
}


body{
	display: block;
	position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;

	background-color: #ecf0f5;

	font-size: 16px;
	font-family: 'Aller', Lato, Verdana;
}

/* Content Wrapper */
#WRAPPER {
	display: block;
	position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;

	background-color: #eee;

	overflow: hidden;
}

/* Page Header */
#HEADER{
	display: block;
	position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: calc( 3.5em - 1px );

	background: #fff;
	/* background: -webkit-linear-gradient(top right, #2428ff, #00E288); */

	color: #fff;
	font-family: inherit;

	border-bottom: 1px solid #ddd;

	overflow: hidden;
}

/* Page Menu */
#MENU{
	display: flex;
	position: absolute;
		top: 3.5em;
		left: 0;
		width: calc( 15em - 1px );
		height: calc( 100% - 3.5em );

	background-color: #fff;

	border-right: 1px solid #ddd;

	flex-direction: column;
	justify-content: flex-start;
	flex-wrap: nowrap;

	transition: width .2s ease-in-out;
}

/* Page container */
#CONTAINER{
	display: flex;
	position: absolute;
		top: 3.5em;
		left: 15em;
		width:  calc( 100% - 15em );
		height: calc( 100% - 3.5em );

	overflow: hidden;
	overflow-y: auto;

	transition: left .2s ease-in-out,
			   width .2s ease-in-out;
}

#WRAPPER.min #CONTAINER{
	left: 3.5em;
	width: calc( 100% - 3.5em );
}


/* Notification Stack */
#WRAPPER #NOTIF-STACK{
	display: none;
	position: absolute;
		top: 4em;
		left: calc( 100% - 15em );
		width: 14em;
		min-height: 2em;
		height: auto;

	border: 1px solid #ddd;
	border-radius: 3px;

	background-color: #fff;

	overflow: hidden;

	z-index: 101;
}

#WRAPPER #NOTIF-STACK.active{
	display: block;
}

/* Login form authentication */
#WRAPPER #LOGIN-FORM{
	display: none;
	position: absolute;
	top: 4em;
	left: calc( 100% - 21em );
	width: 20em;
	min-height: 2em;
	height: auto;

	border: 1px solid #ddd;
	border-radius: 3px;

	background-color: #fff;

	overflow: hidden;

	z-index: 101;
}

#WRAPPER #LOGIN-FORM.active{
	display: block;
}