html, 
body {
	min-height		: 100%; 
}

body {
	background		: url('/cms3t/res/images/wallpapers/zen/WebsiteZen.jpg') no-repeat 50% 50% #f3f5f9 fixed;
	background-size		: cover;
	color			: gray;

	font-family: 'Open Sans', sans-serif; font-size: 16px; font-weight: normal;
}

.bgOverlay {
	position		: fixed;
	left			: 0;
	right			: 0;
	top			: 0;
	bottom			: 0;

	background		: rgba(255,255,255, 0.0);
	
	transition		: background 1000ms ease-in-out 0ms;
}

.startup .bgOverlay {
	background		: /**/ #F1EBED /*/ #f3f5f9 /**/;
}

.loginBox, .loginBox *  {
	box-sizing		: border-box;
}

.loginBox {
	position		: absolute;
/*	top			: calc(50% - 100px); */
	top			: 50%;
	left			: 0;
	right			: 0;

	height			: 72px;
	margin-top		: -36px;

	overflow		: hidden;

	transition		: all 500ms ease-in-out 0ms; 
}

.loginBox.loading {
/*	margin-top		: 0 !important; */
}

.loginBox form {
	display			: block;
	width			: 350px;
	margin			: auto;
}

.loginBox .formLogo {
	text-align		: center;
	height			: 72px;
}


.loginBox .formBody {
	margin			: 48px 0px;
}

.loginBox.loading .formBody {
	height			: 0px;
}

.loginBox label {
	display			: block;
	font-size		: 120%;
	text-align		: center;
}

.loginBox .formSteps .step {
	overflow		: hidden;
	opacity			: 0;

	transition		: opacity 200ms ease-in-out 0ms, height 200ms ease-in-out 0ms;
}

.loginBox .formSteps .step.current {
	opacity			: 1;
}

.loginBox .formSteps .step:not(.current) {
	height			: 0px !important;
}

.loginBox .formSubmit {
	margin			: 48px 0px;
}

.loginBox .mwInput {
	margin			: 24px 0px;
	padding			: 0px 48px;  
	background		: rgba(255,255,255, 0.5);
}

.loginBox .mwInput.icon {
/*	padding-left		: 48px; */ 
}

.loginBox input {
	display			: block;

	width			: 100%;
	height			: 48px;
	line-height		: 48px;
	
	padding			: /* 0px 20px; */ 0px;
	border			: none; 

	background		: transparent;
	
	color: gray; font-family: 'Open Sans', sans-serif; font-size: 16px; font-weight: normal; text-align: center; text-transform: none;
}

.loginBox input[type=submit] {
	width			: 150px;
	margin-right		: auto;
	margin-left		: auto;
	
	background: #2EB7A0; color: white; font-weight: bold; text-transform: uppercase;
	
	cursor			: pointer;
}

.mwInput.code input
{
	display			: inline-block;
	position		: relative;	
	width			: 36px;
	font-size		: 150%;
}

/*/
.mwInput.code input
{
	caret-color		: transparent; 
}

.mwInput.code input:focus
{
	border-bottom		: 1px solid black;
}
/**/

.mwInput.code label.divider
{
	display			: inline-block;
	width			: 36px;
	text-align		: center;
	font-size		: 200%;	
}

.loginBox .mwInput.icon { position: relative; }
.loginBox .mwInput.icon:after { content: ''; display: block; width: 36px; height: 36px; margin: 6px; position: absolute; top: 50%; margin-top: -18px; pointer-events: none; background: url('/cms3t/res/images/auth/icons.36x.png') no-repeat transparent; background-position: 36px 0px; }
.loginBox .mwInput.icon:after, .loginBox .mwInput.icon.left:after { left: 0; right: auto; margin-left: 6px; margin-right: 0px; }
.loginBox .mwInput.icon.center:after { left: 50%; right: auto; margin-left: -18px; margin-right: 0px; }
.loginBox .mwInput.icon.right:after { left: auto; right: 0; margin-left: 0px; margin-right: 6px; }
.loginBox .mwInput.icon.password:after { background-position: -0px 0px; }
.loginBox .mwInput.icon.password:hover:after { background-position: -0px -36px; }
.loginBox .mwInput.icon.login:after { background-position: -36px 0px; }
.loginBox .mwInput.icon.login:hover:after { background-position: -36px -36px; }

#mwAuth_status {
	display			: none;

	background		: rgba(255,255,255, 0.5);

	color: gray; font-family: 'Open Sans', sans-serif; font-size: 16px; font-weight: normal; text-align: center; text-transform: none;
}

#mwAuth_status .status {
	padding			: 12px 20px;
	line-height		: 24px;
}

#mwAuth_status .status.error {
	color			: #FF0000;
}