/* --- QUADRIDENT --- POWERHOUSE CONTROLLING / PUB / CSS / PGS / APP.CSS --------------------------------------------------- */


/* --- APP MAIN --- COMMON ELEMENTS ---------------------------------------------------------------------------------------- */


.center-content
{
	align-items			: center								;
	display				: flex									;
	flex-direction		: row									;
	justify-content		: center								;
}


/* --- APP MAIN --- STRUCTURAL ELEMENTS ------------------------------------------------------------------------------------ */


#login , #loading , #content
{
	height				: 100vh									;
	position			: relative								;
	width				: 100%									;
	z-index				: 0										;
}

#error-screen
{
	align-items			: center								;
	backdrop-filter		: blur(3px)								;
	display				: flex									;
	height				: 100dvh								;
	justify-content		: center								;
	left				: 0px									;
	position			: absolute								;
	top					: 0px									;
	width				: 100dvw								;
	z-index				: 100									;
}


/* --- APP MAIN --- LOG IN PAGE --- QUADRIDENT CI -------------------------------------------------------------------------- */


#ci
{
	align-items			: center								;
	display				: flex									;
	flex-direction		: row									;
	height				: 64px									;
	width				: 100%									;
}

@media ( orientation : landscape )
{ #ci { justify-content : left ; } }

@media ( orientation : portrait )
{ #ci { justify-content : center ; } }

#quadri-logo
{
	display				: block									;
	fill				: var(--quadri-fg-accent01)				;
	height				: 64px									;
	padding				: 8px 0 8px 8px							;
	stroke				: none									;
	width				: 64px									;
}

#quadri-text
{
	align-items			: center								;
	color				: var(--quadri-fg-accent01)				;
	display				: flex									;
	font-family			: CenturyGothic							;
	font-size			: 38px									;
	height				: 64px									;
	justify-content		: left									;
	margin-left			: -5px									;
	padding-top			: 10px									;
	width				: 200px									;
}


/* --- APP MAIN --- LOG IN PAGE --- LOG IN FORM ---------------------------------------------------------------------------- */


#form
{
	align-items			: center								;
	display				: flex									;
	flex-direction		: column								;
	height				: calc(100vh - 64px)					;
	justify-content		: center								;
	width				: 100%									;
}

#client-logo
{
	background-image	: url(../../res/img/Powerhouse.png)		;
	background-position	: center								;
	background-repeat	: no-repeat								;
	background-size		: contain								;
}

#email-hint , #pword-hint
{
	color				: var(--client-fg-standard)				;
}

#email-input , #pword-input
{
	border-color		: var(--client-fg-standard)				;
	border-style		: solid									;
	border-width		: 1px									;
	color				: var(--client-fg-standard)				;
}

#login-call
{
	align-items			: center								;
	background			: var(--client-fg-standard)				;
	color				: var(--quadri-fg-inverted)				;
	cursor				: pointer								;
	display				: flex									;
	flex-direction		: row									;
	justify-content		: center								;
}

#login-call:hover
{
	background			: var(--client-fg-accent01)				;
}

@media ( orientation : landscape )
{
	#client-logo
	{
		height			: 165px									;
		margin-bottom	: 60px									;
		width			: 384px									;
	}

	#email-hint , #pword-hint
	{
		font-size		: 14px									;
		height			: 20px									;
		margin-top		: 20px									;
		padding			: 0 8px									;
		width			: 384px									;
	}

	#email-input , #pword-input
	{
		border-radius	: 6px									;
		font-size		: 20px									;
		height			: 40px									;
		padding			: 0 8px									;
		width			: 384px									;
	}

	#login-call
	{
		border-radius	: 6px									;
		font-size		: 20px									;
		height			: 40px									;
		margin			: 40px 0 120px 0						;
		padding			: 0 8px									;
		width			: 384px									;
	}
}

@media ( orientation : portrait )
{
	#client-logo
	{
		height			: 220px									;
		margin-bottom	: 80px									;
		width			: 512px									;
	}

	#email-hint , #pword-hint
	{
		font-size		: 19px									;
		height			: 27px									;
		margin-top		: 27px									;
		padding			: 0 11px								;
		width			: 512px									;
	}

	#email-input , #pword-input
	{
		border-radius	: 8px									;
		font-size		: 27px									;
		height			: 53px									;
		padding			: 0 11px								;
		width			: 512px									;
	}

	#login-call
	{
		border-radius	: 8px									;
		font-size		: 27px									;
		height			: 53px									;
		margin			: 53px 0 160px 0						;
		padding			: 0 11px								;
		width			: 512px									;
	}
}


/* --- APP MAIN --- LOADING PAGE --- ELEMENTS ------------------------------------------------------------------------------ */


#loading-container
{
	display				: block									;
}

#quadri-load
{
	display				: block									;
	fill				: var(--quadri-fg-accent01)				;
	stroke				: none									;
}

#quadri-info
{
	align-items			: center								;
	color				: var(--client-fg-standard)				;
	display				: flex									;
	justify-content		: center								;
	text-align			: center								;
}

@media ( orientation : landscape )
{
	#loading-container
	{
		height			: 384px									;
		width			: 256px									;
	}

	#quadri-load
	{
		height			: 320px									;
		width			: 256px									;
	}

	#quadri-info
	{
		font-size		: 14px									;
		height			: 64px									;
		width			: 256px									;
	}
}

@media ( orientation : portrait )
{
	#loading-container
	{
		height			: 512px									;
		width			: 341px									;
	}

	#quadri-load
	{
		height			: 427px									;
		width			: 341px									;
	}

	#quadri-info
	{
		font-size		: 19px									;
		height			: 85px									;
		width			: 341px									;
	}
}


/* --- APP MAIN --- LOADING PAGE --- ANIMATION ----------------------------------------------------------------------------- */


@keyframes stretch
{
	000.0% { transform : translateY(-0.00px) scaleY(1.0) ; }
	002.5% { transform : translateY(-0.15px) scaleY(1.3) ; }
	005.0% { transform : translateY(-0.50px) scaleY(2.0) ; }
	007.5% { transform : translateY(-1.00px) scaleY(3.0) ; }
	010.0% { transform : translateY(-1.60px) scaleY(4.2) ; }
	012.5% { transform : translateY(-2.25px) scaleY(5.5) ; }
	015.0% { transform : translateY(-2.50px) scaleY(6.0) ; }
	017.5% { transform : translateY(-2.50px) scaleY(6.0) ; }
	020.0% { transform : translateY(-2.10px) scaleY(5.2) ; }
	022.5% { transform : translateY(-1.00px) scaleY(3.0) ; }
	025.0% { transform : translateY(-0.00px) scaleY(1.0) ; }
	100.0% { transform : translateY(-0.00px) scaleY(1.0) ; }
}

@keyframes shift
{
	000.0% { transform : translateY(-0.0px) ; }
	002.5% { transform : translateY(-0.3px) ; }
	005.0% { transform : translateY(-1.0px) ; }
	007.5% { transform : translateY(-2.0px) ; }
	010.0% { transform : translateY(-3.2px) ; }
	012.5% { transform : translateY(-4.5px) ; }
	015.0% { transform : translateY(-5.0px) ; }
	017.5% { transform : translateY(-5.0px) ; }
	020.0% { transform : translateY(-4.2px) ; }
	022.5% { transform : translateY(-2.0px) ; }
	025.0% { transform : translateY(-0.0px) ; }
	100.0% { transform : translateY(-0.0px) ; }
}

#dent-1 , #dent-2 , #dent-3 , #dent-4
{
	animation-name			  : shift							;
	animation-duration		  : 4s								;
	animation-iteration-count : infinite						;
	animation-timing-function : linear							;
}

#conn-1 , #conn-2 , #conn-3 , #conn-4
{
	animation-name			  : stretch							;
	animation-duration		  : 4s								;
	animation-iteration-count : infinite						;
	animation-timing-function : linear							;
	transform-box			  : fill-box						;
	transform-origin		  : center							;
}

#dent-1 , #conn-1
{
	animation-delay		: 0s									;
}

#dent-2 , #conn-2
{
	animation-delay		: 1s									;
}

#dent-3 , #conn-3
{
	animation-delay		: 2s									;
}

#dent-4 , #conn-4
{
	animation-delay		: 3s									;
}


/* --- APP MAIN --- ERROR DISPLAY ------------------------------------------------------------------------------------------ */


#error-display
{
	background			: var(--quadri-bg-errormsg)				;
	border				: 2px solid var(--quadri-fg-errormsg)	;
	height				: 256px									;
}

@media ( orientation : landscape )
{
	#error-display
	{
		height			: 256px									;
		width			: 384px									;
	}
}

@media ( orientation : portrait )
{
	#error-display
	{
		height			: 341px									;
		width			: 512px									;
	}
}


#error-caption
{
	align-items			: center								;
	color				: var(--quadri-fg-errormsg)				;
	display				: flex									;
	float				: left									;
	font-weight			: 600									;
	height				: 32px									;
	justify-content		: center								;
	margin-left			: 24px									;
	text-align			: center								;
	width				: calc(100% - 48px)						;
}


#error-confirm
{
	align-items			: center								;
	border				: 1px solid var(--client-fg-standard)	;
	border-radius		: 3px									;
	color				: var(--client-fg-standard)				;
	cursor				: pointer								;
	display				: flex									;
	float				: left									;
	height				: 16px									;
	justify-content		: center								;
	margin				: 4px 4px 12px 4px						;
	text-align			: center								;
	width				: 16px									;
}

#error-confirm:hover
{
	border				: 1px solid var(--quadri-fg-standard)	;
	color				: var(--quadri-fg-standard)				;
	font-weight			: 600									;
}

#error-message
{
	align-items			: start									;
	color				: var(--quadri-fg-standard)				;
	display				: flex									;
	height				: calc(100% - 32px)						;
	justify-content		: center								;
	padding				: 8px									;
	text-align			: center								;
	width				: 100%									;
}


/* --- END OF FILE --- APP.CSS --------------------------------------------------------------------------------------------- */