body.login-page { 
    width: 100%; height: 100%; 
    background-color: #f3f3f3; 
    display:-ms-flexbox; 
    display:flex; 
    align-items:center;
    justify-content:center; 
    margin-bottom:0;
}

.login-page-wrapper {
    position:relative;
    background-color: #FFFFFF;
    border-top: 3px solid #000000;
    border-left: 1px solid #d6d6d6;
    border-right: 1px solid #d6d6d6;
}

/*
    Logo header
*/
.login-page-wrapper .login-page-logo-wrapper { position:absolute;top:-80px; width:100%;}
.login-page-wrapper .login-page-logo-wrapper  .login-page-logo { 
    background-image: url('../Images/Static/FlexxWare-base/logo.png');
	background-position: left center; 
    background-repeat: no-repeat; 
    width:100%; height: 80px; 
}

/*
    Content
*/
.login-page-wrapper .login-page-content { 
    position:relative; 
    width: 380px; 
    transition: width 0.2s;
    padding-bottom: 40px;
    overflow:hidden;
}

.login-page-wrapper .login-page-content h2 { font-weight: normal; margin-bottom: 10px; }
.login-page-wrapper .login-page-content .login-page-form { padding: 30px 30px 25px;  }
.login-page-wrapper .login-page-content .login-page-form .field + .field { margin-top: 15px; }
.login-page-wrapper .login-page-content .login-page-form .field .in-field-button { font-size: 11px; float:right; }
.login-page-wrapper .login-page-content .login-page-form .login-form-bottom { margin-top: 25px; line-height: 32px; }
.login-page-wrapper .login-form-bottom button.login-button { float: right; }
.login-page-wrapper .login-form-bottom .login-status { float:right; display:inline-block; margin-right:10px; }
.login-page-wrapper .login-form-bottom .login-status span.login-feedback { display: none; }
.login-page-wrapper .login-form-bottom .login-status.feedback span.login-feedback { display: inline; }


/* We need more width when showing some explanation */
.login-page-wrapper .login-page-content.with-explanation { width: 820px; }
.login-page-wrapper .login-page-content .login-with-explanation { white-space:nowrap; overflow:hidden; }
.login-page-wrapper .login-page-content .login-with-explanation p { white-space:normal; margin-bottom: 10px; }
.login-page-wrapper .login-page-content .login-with-explanation .login-with-explanation-block { vertical-align: top; display:inline-block; }
.login-page-wrapper .login-page-content .login-with-explanation .login-with-explanation-block.form-block { width: 320px; }
.login-page-wrapper .login-page-content .login-with-explanation .login-with-explanation-block.explanation-block { width: 430px; padding: 0 20px; }



/*
    Two factor authentication
*/
.login-page-wrapper .login-page-content .mobile-stores { width: 140px; float:left; margin-left: 40px; padding-top: 15px; }
.login-page-wrapper .login-page-content .mobile-stores img { max-width: 130px; max-height: 100px; width:auto; height: auto; }





/*
    Footer bar login page
*/
.login-page-wrapper .footer { background-color: #000000; }
.login-page-wrapper .footer .footer-content { width: 100%; }
.login-page-wrapper .footer .footer-content span.powered-by-flexx { margin-left:10px; }
.login-page-wrapper .footer .footer-content span.text { margin-right:10px;}