ptut-vhost/webpack/scss/layout.scss

@import 'constants';

* {
	margin: 0;
	padding: 0;
}

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

	background: $bg-color;

	font-size: 16px;
	font-family: 'Open Sans';

	color: #333;
}



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

	background: $bg-color;


	&.login{
		background: #ddd;
	}
}


#cont404{
	display: flex;
	position: fixed;
		top: calc( 50% - #{$c404-bubble-width / 2} - 2em );
		left: calc( 50% - #{$c404-bubble-width / 2} - 2em );
		width: #{$c404-bubble-width};
		height: $c404-bubble-width;

	padding: 2em;

	background-color: #fff;
	border: 1px solid #ddd;
	box-shadow: 0 0 5px #ddd;

	border-radius: 50% / 50%;

	font-size: 3vh;
	color: #444;

	flex-direction: column;
	justify-content: space-around;
	align-items: center;

	p{
		text-align: center;
	}

	svg{

		path{ fill: #888 !important; }
		transform: translateY(0em) scale(2);
		cursor: pointer;

		transition: transform .2s ease-in-out;
		&:hover{
			transform: translateY(-.5em) scale(2);
			path{ fill: #222 !important; }
		}
	}
}



/* [4] Popup background - window
==========================================*/
#POPUP{
	display: none;
	position: fixed;
		top: 50%;
		left: 50%;
		min-width: 50%;
		max-width: 50%;
		min-height: 30%;
		max-height: 50%;

	// flex properties
	flex-direction: column;
	justify-content: space-between;

	border-radius: 5px;

	background: #fff;
	color: #34495e;

	box-shadow: -10px 10px 0 rgba(26, 33, 40, .8);

	-webkit-transform: translateX(-50%) translateY(-50%);
	transform: translateX(-50%) translateY(-50%);

	z-index: 1000;

	&.active{
		display: flex;
	}


	& > .header{
		display: block;
		position: relative;
			width: calc( 100% - 2*1em );

		padding: 1em;

		border-radius: 5px 5px 0 0;
		border-bottom: 2px solid #ecf0f1;

		font-size: 1.1em;
		font-weight: bold;
	}

	& > .body{
		display: block;
		position: relative;
			width: calc( 100% - 2*1em );

		padding: 1em;

		b, strong{
			color: #5630ed;
		}
	}

	& > .footer{
		display: flex;
		position: relative;
			width: calc( 100% - 2*1em );

		padding: 1em;

		background-color: #ecf0f1;

		border-radius: 0 0 5px 5px;

		// flex props.
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: flex-end;

		& button{
			left: auto;
			margin: 0 1em;
			-webkit-transform: none;
			transform: none;
		}

	}
}


#POPUP-BG{
	display: none;
	position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;

	background: #29333f;
	background: rgba(41, 51, 63, .8);

	z-index: 999;
}

#POPUP.active ~ #POPUP-BG{
	display: block;
}