.on-boarding-holder { position: relative; }
.on-boarding-aside,
.login-aside { position: fixed; height: 100%; width: calc(550px + 6vw); display: none; font-family: 'Open Sans', sans-serif; font-style: normal; font-weight: 100; }
    .on-boarding-aside.background,
    .login-aside.background { background-repeat: no-repeat; background-size: cover; }
    .on-boarding-aside.background-image { background-image: url(../../images/SelfServe/donors.png); background-position: center; }
    .login-aside.background-image { background-image: url(../../images/SelfServe/flashsale.jpg); background-position: 65% 35%; }
    .on-boarding-aside.overlay { background-color: rgba(83, 95, 119,1); opacity: 0.75; }
    .on-boarding-aside.content { }
.on-boarding-aside-header { position: absolute; top: 0px; width: 100%; padding: 24px 24px; }
.on-boarding-aside-body,
.login-aside-body { position: absolute; left: 8%; top: 45%; -ms-transform: translateY(-50%); transform: translateY(-50%); width: 82%; text-align: center; }
    .on-boarding-aside-body h1,
    .login-aside-body h1 { color: #eeeeee; }
.on-boarding-aside-body-content,
.login-aside-body-content { color: #eeeeee; margin-top: 20px; }
.on-boarding-aside-footer { position: absolute; bottom: 40px; left: 10%; width: 80%; text-align: center; }
    .on-boarding-aside-footer .col-xs-3 { padding-right: 5px; padding-left: 5px; }
.on-boarding-main { position: fixed; height: 100%; width: 100%; left: 0px; background-color: whitesmoke; overflow: auto; }
.on-boarding-form, .login-form { position: absolute; top: 0px; left: 0px; margin-top: 10px; max-width: 100%; }
.on-boarding-form-header { text-align: center; }
    .on-boarding-form-header img { width: 200px; margin-bottom: 15px; }
.on-boarding-form-body,
.login-form-body { background-color: white; border-style: solid; border-color: #A3BAC6; border-width: 1px; padding: 20px; font-size: 0.9907rem; min-height: 612px; }
.on-boarding-form h1 { font-weight: bold; text-align: center; }
.on-boarding-form label { line-height: 1.375rem; font-weight: 400; }
.on-boarding-form input[type=text], input[type=password], select { height: 40px; padding: 10px; border-width: 1px; border-style: solid; border-color: #A3BAC6; }
.on-boarding-form select { padding: 6px; }
.on-boarding-form input[type=checkbox], input[type=radio] { vertical-align: top; margin-top: 5px; }
.on-boarding-form .btn { border-radius: unset }
.on-boarding-form textarea { margin-top: 10px; border-width: 1px; border-style: solid; border-color: #A3BAC6; }
.on-boarding-form input, select, textarea, option, button { outline: none !important; }
.on-boarding-logo-header { max-width: 160px; height: auto; }
.on-boarding-logo-footer { height: auto; max-width: 100%; max-height: 55px; margin-top: 0px; /*border:1px solid #fff;*/ }
.login-form h3 { text-align: center; font-size: 27px; }
.login-form label { color: #333; font-size: 15px; }
.login-form input[type=text], input[type=password] { height: 40px; padding: 10px; border-width: 1px; border-style: solid; border-color: #A3BAC6; }
.login-form input, select, textarea, option, button { outline: none !important; }
.login-learn-more-btn { color: #ffffff; background-color: unset; border:solid 2px #fff; border-color: #fff; border-radius:3px; display: inline-block; padding: 12px 20px; margin-bottom: 0; font-size: 22px; font-weight: normal; line-height: 1.42857143; text-align: center; white-space: nowrap; vertical-align: middle; -ms-touch-action: manipulation; touch-action: manipulation; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; text-decoration: none; }
    .login-learn-more-btn:hover, .login-learn-more-btn:focus { text-decoration: none; color: white; }
.login-btn { padding: 10px 45px; font-size: 17px; }
.login-bottom-box { border-left: 1px solid #ccc; border-right: 1px solid #ccc; border-bottom: 1px solid #ccc; background-color: #eee; width: 100%; max-width: 500px; padding: 15px 10px; display: inline-block; text-align: center; font-size: 11px; }
.err-info { display: none; margin-bottom: 10px; color: #fff; padding: 6px 10px 6px 10px; background-color: #bd4949; font-size: 13px; text-align: center; }
.progress-marker { font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; color: white; }
    .progress-marker::after { z-index: unset !important; }
.progress-clickable { cursor: pointer; }
.text-align-center { text-align: center; }
.d-inline-block { display: inline-block }
.row { margin-top: 10px; }
.margin-top-5 { margin-top: 5px; }
.margin-top-20 { margin-top: 20px; }
.margin-top-40 { margin-top: 40px; }
.margin-top-39 { margin-top: 39px; }
.no-padding { padding: 0px !important; }
.no-padding-top { padding-top: 0px !important; }
.no-padding-bottom { padding-bottom: 0px !important; }
.no-margin { margin: 0px !important; }
.line-height-40 { line-height: 40px; }
.radio-label, .checkbox-label { max-width: calc(100% - 18px); }
.is-active .progress-title { font-weight: 700; }
.font-size-xxl { font-size: 3.5rem; }
.font-size-xl { font-size: 1.5rem; }
.font-size-l { font-size: 1.2rem; }
.font-size-m { font-size: 1rem; }
.font-size-sm { font-size: 0.8rem; }
.font-size-xs { font-size: 0.7rem; }
.min-height-unset { min-height: unset; }
.padding-40px { padding: 40px; }
.width-550px-8vw { width: calc(550px + 8vw); }
.login-contact-us-link,
.login-contact-us-link :hover,
.login-contact-us-link :focus { color: white !important; text-decoration: underline; }
.g-recaptcha { transform: scale(0.85); -webkit-transform: scale(0.85); transform-origin: 0 0; -webkit-transform-origin: 0 0; }
.field-placeholder { font-size: 0.82rem; line-height: 24px; }
.reg-page-subtitle { font-size: 12px; line-height: 18px; font-weight: normal; }
.help-block { font-size: 12px; }

@media (min-width: 375px) {
    .g-recaptcha { transform: scale(1); -webkit-transform: scale(1); transform-origin: 0 0; -webkit-transform-origin: 0 0; }
}

@media (min-width: 375px) and (max-height: 672px) {
    .on-boarding-form, .login-form { top: 0px; left: 50%; -ms-transform: translateX(-50%); transform: translateX(-50%); width: 374px; margin-top: 10px; max-width: 100%; }
    .login-form { width: 380px; }
}

@media (max-width: 374px) and (min-height: 673px) {
    .on-boarding-form, .login-form { top: 50%; left: 0px; -ms-transform: translateY(-50%); transform: translateY(-50%); }
}


@media (min-width: 375px) and (min-height: 673px) {
    .on-boarding-form, .login-form { top: 50%; left: 50%; -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 374px; }
    .login-form { width: 380px; }
}

@media (max-height: 800px) {
    .on-boarding-form, .login-form { top:10%; -ms-transform: translate(-50%, 0%); transform: translate(-50%, 0%); }
}
@media (max-width: 420px) {
    .on-boarding-form, .login-form { top:2%; left:50%; -ms-transform: translate(-50%, 0%); transform: translate(-50%, 0%); }
}

@media (min-width: 1072px) {
    .on-boarding-aside,
    .login-aside { display: block; }
    .on-boarding-main { left: calc(550px + 6vw); width: calc(100% - 550px - 6vw); }
    .on-boarding-form-header { display: none; }
}

.text-align-left { text-align: left !important; }
.margin-bottom-0 { margin-bottom: 0px !important; }