*                   { margin: 0; padding: 0; }
a                   { color: #ae45a1; }
h2                  { color: #ae45a1; font-size: 22px; margin-bottom: 20px; font-weight: normal; }
body                { padding-top: 100px; font: 16px OpenSans; }
.hide               { display: none; }
.text, .select      { padding: 10px; border-radius: 3px; border: 1px solid #ddd; margin-bottom: 10px; }
.text, .select      { width: 100%; outline: none; font: 16px OpenSans; }
.textarea           { width: 100%; outline: none; font: 16px OpenSans; padding: 10px; resize: none; }
.textarea           { border-radius: 3px; border: 1px solid #ddd; margin-bottom: 10px; }
.text:focus         { border-color: #ae45a1; }
.button             { background: #ae45a1; color: #fff; padding: 7px 15px; border: none; }
.button             { border-radius: 3px; font: 16px OpenSans; cursor: pointer; }
button              { outline: none; }
.msg                { text-align: center; margin-bottom: 10px; }
.msg.success        { color: green; }

.logo               { display: block; font-size: 30px; text-align: center; color: #555; }
.logo               { font-family: OpenSansLight; margin-bottom: 50px; }
.logo span          { font-family: OpenSans; color: #ae45a1; }

#reset              { padding: 30px; color: #555;  }
#reset .disabled    { background: #999; }

#wrapper            { border: 1px solid #ddd; border-radius: 5px; margin: 0 auto; width: 800px; font-size: 0; }
#wrapper.small      { width: 500px; }
#wrapper p          { padding-bottom: 15px; }
#wrapper > *        { font: 16px OpenSans; }
#login              { display: inline-block; padding: 30px; width: calc(50% - 60px); border-right: 1px solid #ddd; }
#login .pwlost      { font-size: 12px; color: #555; position: relative; top: -5px; text-decoration: none; }
#register           { display: inline-block; vertical-align: top; padding: 30px; width: calc(50% - 65px); }
#register           { border-left: 1px solid #ddd; left: -1px; position: relative; }

#left               { display: inline-block; padding: 30px; width: calc(50% - 60px); border-right: 1px solid #ddd; }
#right              { display: inline-block; vertical-align: top; padding: 30px; width: calc(50% - 65px); }
#right              { border-left: 1px solid #ddd; left: -1px; position: relative; }
#right ul           { list-style-type: none; margin: 10px 0 20px 0; }
.center             { text-align: center; }
#content            { padding: 30px; }
#content label      { width: 40%; display: inline-block; }
#content .text      { width: 60%; display: inline-block; }
#content .select    { width: calc(60% - 1px); display: inline-block; margin-left: -4px; }
#content .phone     { width: 59%; display: inline-block; white-space: nowrap; }
#content .phone .cc { width: 24%; margin-right: 1%; }
#content .phone .ac { width: 24%; margin-right: 1%; }
#content .phone .no { width: 49%; }
#content .checkdiv  { margin-bottom: 10px; }
#content .checkdiv label { display: inline-block; width: auto; }

.portals            { font-size: 0; margin-top: 20px; }
.portals li         { display: inline-block; font-size: 14px; text-align: center; margin-bottom: 20px; padding-right: 20px; }
.portals li img     { display: block; margin: 0 auto; margin-bottom: 10px; box-shadow: 0 0 3px rgba(0,0,0,0.3); padding: 5px; }

input.valid         { border-color: green; }
input.invalid       { border: 1px solid red; }
div.invalid { background: red; color: white; }

.path               { list-style-type: none; font-size: 0; border: 1px solid #eee; margin: 0 auto; display: inline-block; }
.path               { border-radius: 5px; overflow: hidden; margin-bottom: 20px; width: 800px; background: #eee; text-align: left; }
.path li            { display: inline-block; vertical-align: top; font-size: 16px; padding: 20px 0 20px 45px; }
.path li            { position: relative; background: #eee; }
.path li.first      { padding-left: 20px; }
.path li.last       { padding-right: 20px; }
.path li:after,
.path li:before     { left: 100%; top: 0; border: solid transparent; content: ''; height: 0; width: 0; position: absolute; }
.path li:after,
.path li:before     { display: block; border-color: rgba(255, 255, 255, 0); border-left-color: #eee; border-width: 31px; z-index: 5;}
.path li:after      { border-left-color: #ccc; border-width: 32px; z-index: 1; margin-top: -1px; }
.path li.done       { background: #ae45a1; color: #fff; }
.path li.done:before { border-left-color: #ae45a1; }
.path li.done:after { border-left-color: #c67dbd; }

@media screen and (max-width: 800px) {
    body            { padding-top: 30px; }
    .logo           { margin-bottom: 30px; }
    .path           { display: none; }
    .msg            { margin: 0; }
    #wrapper        { margin: 30px; width: auto; border: none; }
    #content        { padding: 0; }
    #login          { display: block; width: auto; border: 1px solid #ddd; border-radius: 5px; margin-bottom: 30px; }
    #register       { display: block; width: auto; border: 1px solid #ddd; border-radius: 5px; }
}