*, html, body { margin:0; padding:0; font-size: 10px; font-family:"Arial", "Helvetica"; font-weight: 400; color: #333; }
a img { border:none; }
.clearfix:after{ content: "."; visibility: hidden; display: block; height: 0; clear: both; }

body { background-color: #fff; }

#wrapper { background-color: #eee; padding: 3.5em 0 6.5em;  }

#wrapper header { display: block; width: 90em; margin: 0 auto }
#wrapper header #logo { display: block; width: 215px; height: 50px; text-indent: -9999em; background: url('../assets/colruytgroup.png') no-repeat; margin: 0 auto; }
#wrapper header #language { display: block; float: right; }
#wrapper header #language ul { list-style: none; }
#wrapper header #language ul li { display: inline-block; float: left; height: 2em; width: 2em; margin-left: 5px; background-color: #ddd; text-align: center; line-height: 2em; }
#wrapper header #language ul li.active { background-color: #fff; }
#wrapper header #language ul li a { text-transform: uppercase; text-decoration: none; font-size: 1.2em; font-weight: 300; }
#wrapper header #main { display: block; width: 90em; margin-top: 4em; }
#wrapper header #main ul { list-style: none; }
#wrapper header #main ul li { display: inline-block; float: left; width: 29.8em; background-color: #ddd; text-align: center; height: 4.5em; line-height: 4.5em; margin-right: 0.3em; }
#wrapper header #main ul li.lastChild { margin-right: 0; }
#wrapper header #main ul li.active { background-color: #fff; }
#wrapper header #main ul li a { text-transform: uppercase; text-decoration: none; display: block; font-size: 1.5em; font-weight: 300; }

#wrapper #form { display: block; width: 90em; background-color: #fff; margin: 0 auto; padding-bottom: 3em; }
#wrapper #form #title { padding: 4em 0; margin-left: 31.5em; width: 58.5em; } 
#wrapper #form #title h2 { font-size: 2.5em; text-transform: uppercase; }

#wrapper #form #accountmgmt ul { list-style: none; }
#wrapper #form #accountmgmt ul li { margin-bottom: 1.5em; line-height: 3em; }
#wrapper #form #accountmgmt ul li:after { content: "."; visibility: hidden; display: block; height: 0; clear: both; }
#wrapper #form #accountmgmt ul li span { display: inline-block; font-size: 1.5em; color: #999; }
#wrapper #form #accountmgmt ul li span.errorMessage { font-size: 1.2em; line-height: 1.4em; color: #f00; font-weight: 300; text-align: left; float: right; width: 20em; }
#wrapper #form #accountmgmt ul li.col span.reqField { font-size: 1.2em; line-height: 1.4em; color: #f00; font-weight: 300; text-align: right; }
#wrapper #form #accountmgmt ul li.col { margin-left: 31.5em; }
#wrapper #form #accountmgmt ul li.col span { font-size: 1.5em; line-height: 1.5em; font-weight: 300; color: #999; }
#wrapper #form #accountmgmt ul li.col span.note { font-size: 1.2em; line-height: 1.4em; font-weight: 300; color: #333; }
#wrapper #form #accountmgmt ul li.col span.note a { display: block; font-weight: 300; font-size: 1em; color: #333; float: left; }
#wrapper #form #accountmgmt ul li label { float: left; width: 30.5em; text-align:right; padding-right: 1em; line-height: 3em; }
#wrapper #form #accountmgmt ul li label span { font-size: 1.5em; font-weight: 400; color: #333; }
#wrapper #form #accountmgmt ul li input { background-color: #eee; border: 1px solid #ccc; outline: none; width: 21.7em; padding: 0.35em; font-size: 1.5em; font-weight: 300; float: left; }
#wrapper #form #accountmgmt ul li input.error { border: 0.1em solid #f00; }
#wrapper #form #accountmgmt ul li input[type='password'] { font-family:"Arial"; }
#wrapper #form #accountmgmt ul li.col button { background-color: #ED7118; border: none; outline: none; width: 18em; line-height: 4.5em; height: 4.5em; margin-top: 3em; }
#wrapper #form #accountmgmt ul li.col button span { display: block; font-size: 1.5em; color: #fff; cursor: pointer; text-transform: uppercase; font-weight: 400; }

#wrapper #result { display: block; width: 58.5em; background-color: #fff; margin: 0 auto; padding-bottom: 3em; padding-left: 31.5em; }
#wrapper #result #title { padding: 4em 0; width: 58.5em; } 
#wrapper #result #title h2 { font-size: 2.5em; text-transform: uppercase; }
#wrapper #result #title p { font-size: 2.5em; margin-top: 1.5em; color: #333; }
#wrapper #result #title p strong { font-size: 1em; font-weight: 600; }
#wrapper #result p { font-size: 2em; font-weight: 300; color: #777; }
#wrapper #result.centerText { padding-left: 0; width: 90em; text-align: center; }

footer { display: block; width: 90em; height: 10em; margin: 0 auto; background: url('../assets/enseignes.png') no-repeat; }
footer[data-lang="fr"] { background: url('../assets/enseignes_fr.png') no-repeat; }

#wrapper #form #accountmgmt ul li.col.passwordRow { position: relative; }
#wrapper #form #accountmgmt ul li.col #passwordCheck { height: 1em; display: block; }
#wrapper #form #accountmgmt ul li.col #passwordStrength { height: 1em; width:33.5em; background:#f6f6f6; display: block; margin: 1.5em 0 -0.75em 0; }
#wrapper #form #accountmgmt ul li.col #passwordStrength.strength0, #wrapper #form #accountmgmt ul li.col #passwordStrength.strength1 { width: 10em; background: #ff0000; }
#wrapper #form #accountmgmt ul li.col #passwordStrength.strength2 { width: 22em; background: #ffff00; }
#wrapper #form #accountmgmt ul li.col #passwordStrength.strength3 { width: 33.5em; background: #33cc00; }
#wrapper #form #accountmgmt ul li.col #passwordInfo { width:17.5em; padding:1em; background:#fefefe; border:0.1em solid #ddd; position: absolute; left: 35em; top: 0; display: none; }
#wrapper #form #accountmgmt ul li.col #passwordInfo p { font-size: 1.25em; font-weight: 600; margin: 0; line-height: 1.5em; }
#wrapper #form #accountmgmt ul li.col #passwordInfo ul { list-style: none; }
#wrapper #form #accountmgmt ul li.col #passwordInfo ul li { height: 1.5em; line-height: 1.5em; margin: 0; }

.invalid { color:#ec3f41; }
.valid { color:#3a7d34; }
#wrapper #form #accountmgmt ul li.col #successMessage { color: #3C0; }
#wrapper #form #accountmgmt ul li.col #errorMessage { color: #f00; }

#wrapper #form #accountmgmt ul li span.successMessage { font-size: 1.2em; line-height: 1.4em; color: green; font-weight: 300; text-align: left; float: right; width: 20em; }
#wrapper #form #accountmgmt ul li input.success { border: 0.1em solid green; }
#wrapper #form #accountmgmt ul li span.req { font-size: 1.2em; line-height: 1.4em; color: #f00; font-weight: 300; text-align: right; }