html { scroll-behavior: auto; }
#main-content { min-height: 300px }
#page-content, #page-content button, #page-content input, #page-content select { font-family: Roboto,sans-serif; }
#top-plain-bar { height: 90px; background: #013B44; display: flex; justify-content: center; align-items: center; }
#name-bar { height: 60px; display: flex; justify-content: center; align-items: center; background: #E8F6FA; font-size: 18px; font-weight: bold; color: #09A2B6; }
x-h1 { font-family: Oswald, sans-serif; font-size: 36px; margin-bottom: 40px; font-weight: 400; text-transform: uppercase; text-align: center; color: #246A71; }
x-h1:after { content: ''; width: 70px; height: 10px; background: #BFE6F1; display: block; margin: 10px auto 0; }
x-h2 { text-align: left; font-weight: 400; text-transform: uppercase; font-family: 'Oswald', sans-serif; border-left: solid 10px #BFE6F1; padding-left: 15px; color: #246A71; font-size: 30px; }
x-h3 { font-size: 18px; font-weight: bold; display: block; margin-bottom: 20px; color: #1F6470; }
x-h1, x-h2 { line-height: 1.1em; }
x-btn { text-align: center; margin-top: 50px; display: block; }
x-btn > .btn-g { font-size: 24px; font-weight: 900; width: 350px; height: 80px; border-radius: 20px; }
.helper-text { cursor: default; }
.tiptop > .c { background: #E8F6FA; color: #1F6470; border: solid 1px #7ED1E3; border-radius: 20px; }
.tiptop > .c > a { color: #EB3E17; font-weight: bold; }
.radios-lbl { margin-top: 50px; font-size: 16px; margin-bottom: 18px; font-weight: bold; }
.radios > label { margin-right: 50px; }
.radios > label > input { width: 20px; height: 20px; vertical-align: -4px; margin-right: 10px; }
.radios.vert { display: flex; flex-direction: column; align-items: flex-start; }
.radios.vert > label { margin-bottom: 15px; }
.chk-w { display: block; margin-bottom: 20px; }
.chk-w > label > input { width: 20px; height: 20px; vertical-align: -3px; margin-right: 5px; flex: none; }
input:invalid, select:invalid { scroll-margin-top: 180px; }
.intro { color: #1F6470; line-height: 1.6em; }
#dob-h { color: #246A71; font-weight: 900; font-size: 30px; text-align: center; margin-top: 40px; }
.reg-page > x-c { width: 768px; margin: 0 auto 100px; }
.helper-text { cursor: pointer; color: #EB3F16; text-decoration: underline; }
.tiptop > .c { background: #E8F6FA; border: solid 1px #7ED1E3; border-radius: 15px; color: #1F6470; }
.tiptop > .arrow { background: #E8F6FA; z-index: 10; }
.tiptop[data-tip-side=top] > .arrow { border-bottom: solid 1px #7ED1E3; border-right: solid 1px #7ED1E3; }
.tiptop[data-tip-side=bottom] > .arrow { border-top: solid 1px #7ED1E3; border-left: solid 1px #7ED1E3; }
x-row { display: flex; justify-content: space-between; margin-bottom: 26px; }
x-field { flex: 1; height: 46px; border: solid 1px #90AEB7; border-radius: 5px; background: white; position: relative; overflow: hidden; display: block; box-sizing: border-box; }
x-field > label { color: #7599A3; font-weight: normal; text-align: left; font-size: 12px; display: block; padding: 4px 13px 2px; transform: scale(1.3) translateY(6px); transform-origin: top left; transition: transform .3s; position: absolute; }
x-field > label > x-req { transition: opacity .3s; }
x-field > input, x-field > select { width: 100%; border: none; font-size: 16px; color: #405D79; font-weight: 600; padding: 0 13px; outline: none; background: none; height: 100%; padding-top: 16px; position: relative; box-sizing: border-box; }
x-field > input:autofill, x-field > select:autofill { margin-top: 24px; padding-top: 0; height: calc(100% - 24px); }
x-field > input[disabled] { color: #a0aebc; }
x-field.sm-lbl > label, x-field:has(input:autofill) > label { transform: none; text-transform: uppercase; }
x-field.sm-lbl > label > x-req { opacity: 0; }
x-field:not(:last-child) { margin-right: 48px; }
x-field-pair { flex: 1; display: flex; flex-wrap: wrap; }
x-field-pair > x-field:first-of-type { margin-right: 20px; }
x-field-pair > x-field:last-of-type { margin-right: 0; }
/* zip validation message wraps onto its own line directly under the state/zip pair */
x-field-pair > .err-msg { width: 100%; margin: 6px 0 4px; }
x-field-pair > .err-msg:empty { display: none; }
x-field-dummy { flex: 1; }
x-toggle { display: flex; border: solid 1px #90AEB7; border-radius: 5px; }
x-toggle > x-opt { width: 46px; display: flex; justify-content: center; align-items: center; cursor: pointer; }
x-toggle > x-opt:first-child { border-right: solid 1px #90AEB7; }
x-toggle > x-opt.active { background: #013B44; color: white; cursor: default; }
.progress { display: flex; justify-content: center; align-items: center; padding: 84px 40px 66px; }
.progress > x-num { width: 60px; height: 60px; background: #E8F6FA; display: flex; justify-content: center; align-items: center; border-radius: 99px; border: solid 1px #00B9D4; box-sizing: border-box; font-size: 30px; color: #00B9D4; }
.progress > x-num.active { background: #00B9D4; color: white; }
.progress > x-line { width: 182px; background: #ABDFED; height: 1px; }
.lower-info { background: linear-gradient(#E8F6FA,#FFF); text-align: center; }
.lower-info > img { position: relative; top: -35px; left: 25px; }
.lower-info > .line-1 { font-family: 'Oswald', sans-serif; text-transform: uppercase; font-weight: 300; font-size: 30px; color: #246A71; }
.lower-info > .line-2 { font-size: 18px; font-weight: bold; color: #1F6470; line-height: 2em; }
.lower-info > .line-3 { font-size: 18px; color: #1F6470; max-width: 700px; margin: 0 auto; }
.lower-info > .blue-bar { background: #BFE6F1; width: 70px; height: 10px; margin: 32px auto; }
/* Auto-advancing image carousel (slick). Each picture shows for 3s, then dissolves (2s cross-fade) to
the next. Used inside the step-1 "not ready" explanations (floated) and in the health-page
lower-info box (centered). */
.reg-slideshow { width: 284px; border-radius: 10px; box-shadow: 0 4px 4px 0 rgba(0,0,0,0.25); }
.reg-slideshow, .reg-slideshow .slick-list, .reg-slideshow .slick-track, .reg-slideshow .slick-slide { visibility: hidden; }
.reg-slideshow.slick-initialized, .reg-slideshow.slick-initialized .slick-list,
.reg-slideshow.slick-initialized .slick-track, .reg-slideshow.slick-initialized .slick-slide { visibility: visible; }
.reg-slideshow .slick-list { border-radius: 10px; }
.reg-slideshow img { display: block; width: 100%; border-radius: 10px; }
.dialog { }
.dialog > .c { background: #E8F6FA; border: solid 1px #95D8E8; padding: 40px 20px 40px; text-align: center; border-radius: 20px; }
.dialog > .c > .line-1 { font-size: 24px; font-weight: 900; color: #246A71; }
.dialog > .c > .line-2 { font-size: 18px; color: #1F6470; margin-top: 10px; }
.dialog > .c > .btn-w { margin-top: 20px; }
.dialog .digits { display: flex; justify-content: center; margin: 20px 0 30px; }
.dialog .digits > .digit { min-width: 0; max-width: 55px; font-size: 55px; color: #246A71; text-align: center; border: solid 1px #90AEB7; border-radius: 5px; box-shadow: inset 0 3px 6px #ccc; padding: 0; }
.dialog .digits > .digit:not(:last-child) { margin-right: 10px; }
.dialog .err-msg { margin-top: 10px; }
.dialog .resend { margin-top: 15px; font-size: 14px; color: #1F6470; }
.dialog .resend > .resend-link { color: #F47B20; text-decoration: underline; cursor: pointer; }
.dialog .resend > .resend-link.disabled { color: #999; text-decoration: none; cursor: default; pointer-events: none; }
.masked-phone { display: flex; border: solid 1px #90AEB7; border-radius: 5px; overflow: hidden; flex: 1; }
.masked-phone > .cc { border: none; border-right: solid 1px #ddd; width: 60px; text-align: center; font-size: 16px; color: #405D79; font-weight: 600; outline: none; }
.masked-phone > x-field { border: none; height: 44px; }
.masked-phone.err { border-color: #D8000C; }
x-row > .masked-phone:not(:last-child) { margin-right: 50px; }
/* --- Inline validation errors ("Registration Error Handling" design) ---
All invalid fields are flagged together on submit (see app.reg in site.js): the field is
outlined in red and a contextual red callout is shown right below its row, with a pointer
back up to the field. The callout clears as soon as the donor starts fixing that field. */
x-field.err, .masked-phone.err, x-toggle.err, x-field-pair.err { border-color: #D8000C; }
x-field.err > input, x-field.err > select { color: #D8000C; }
x-field.err > label { color: #D8000C; }
/* Radio/checkbox groups aren't outlined or recoloured - the callout alone flags them. */
.field-err { position: relative; background: #D8000C; color: #fff; border-radius: 8px; padding: 11px 16px 11px 44px; margin: 12px 0 6px; font-size: 14px; font-weight: 600; line-height: 1.4em; max-width: 560px; box-shadow: 0 2px 6px rgba(216,0,12,.25); }
.field-err:before { content: ''; position: absolute; top: -7px; left: var(--arrow-left, 26px); border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 8px solid #D8000C; }
.field-err:after { content: '!'; position: absolute; left: 14px; top: 50%; width: 20px; height: 20px; margin-top: -10px; border: solid 2px #fff; border-radius: 50%; text-align: center; line-height: 17px; font-weight: 900; font-size: 13px; box-sizing: border-box; }
.field-err:empty { display: none; }
/* The centered acknowledgement sections ("lower-info") center their checkbox, so center the callout
under it too - left-aligned it would sit at the far edge of the full-width section, nowhere near
the box it belongs to. Its own text stays left-aligned like every other callout. */
.lower-info > .field-err { margin-left: auto; margin-right: auto; text-align: left; }
@media(max-width:1023px) {
/* Stacked layout: the callout hugs the field it belongs to, and the usual field gap moves below
the callout (the field's own bottom margin would otherwise detach it from its message). */
x-field.err, .masked-phone.err, .chk-w.err, .radios.err, x-field-pair.err { margin-bottom: 0; }
.field-err { margin: 5px 0 20px; }
x-field-pair > .field-err { flex: 0 0 100%; }
}
.final-err { max-width: 768px; margin: 60px auto; padding: 0 20px; }
#page-intro { padding-bottom: 100px; }
#page-intro > .banner { height: 46vw; position: relative; margin-bottom: 20px; }
#page-intro > .banner > .slides, #page-intro > .banner .slick-list, #page-intro > .banner .slick-track, #page-intro > .banner .slide { height: 100%; }
#page-intro > .banner .slide { }
#page-intro > .banner .slide > .img { height: 100%; background-size: cover; background-position: bottom right; }
#page-intro > .banner > .slides-w { display: none; }
#page-intro > .banner > x-c { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
#page-intro > .banner > x-c > .blue-bar { background: #013B44; color: white; /* height: 112px; */ font-family: Oswald, sans-serif; text-transform: uppercase; font-size: 72px; padding: 2px 20px 2px 100px; }
#page-intro > .banner > x-c > x-t { border-left: solid 10px white; margin-left: 100px; padding-left: 12px; color: white; max-width: 650px; margin-top: 18px; }
#page-intro > .banner > x-c > x-t > x-h { font-family: Oswald, sans-serif; font-size: 36px; text-transform: uppercase; font-weight: bold; line-height: 1.3em; margin-top: -8px; }
#page-intro > .banner > x-c > x-t > x-t { font-size: 24px; font-weight: 900; text-transform: uppercase; margin-top: 20px; line-height: 1.7em; }
#page-intro > x-c { max-width: 800px; margin: 0 auto; padding: 0 20px; }
#page-intro > x-c > x-h1 { font-size: 48px; margin-bottom: 0; }
#page-intro .seeks-add { font-size: 21px; color: #1F6470; text-align: center; margin-top: 30px; line-height: 1.5em; margin-bottom: 40px; }
#page-intro .seeks-add > .helper-text, #page-intro .seeks-add > a { color: #EB3E17; cursor: pointer; }
#page-intro .dob-w { text-align: center; margin-top: 20px; position: relative; display: flex; justify-content: center; gap: 10px; align-items: center; }
#page-intro .dob-w select { border: solid 1px #90AEB7; border-radius: 5px; height: 44px; width: 180px; font-size: 16px; padding: 0 10px; }
#page-intro .note-35 { position: absolute; width: 280px; background: #02384B; border: solid 2px white; box-shadow: 0 4px 4px #aaa; color: white; padding: 15px 28px; box-sizing: border-box; border-radius: 10px; font-weight: 600; left: 570px; top: -60px; }
#page-intro .note-35 > a { text-decoration: underline; color: #F05125 }
#page-intro .note-35:not(.show) { display: none; }
#page-intro #under18-state-w { text-align: center; }
#page-intro #under18-ineligible { max-width: 500px; margin: 20px auto; font-size: 21px; color: #1F6470; text-align: center; margin-top: 30px; line-height: 1.5em; }
#page-intro #under18-ineligible > a { color: #EB3E17; }
#page-intro .steps { margin: 60px 0 }
#page-intro .steps > x-step { display: flex; align-items: center; margin-bottom: 50px; }
#page-intro .steps > x-step > x-step-num { color: #BFE6F1; display: flex; align-items: flex-end; width: 200px; }
#page-intro .steps > x-step > x-step-num > x-t { font-size: 36px; font-weight: bold; transform: rotate(-90deg) translate(50px, 0px); }
#page-intro .steps > x-step > x-step-num > x-num { font-size: 120px; font-weight: 900; margin-left: -20px; margin-top: 40px; }
#page-intro .steps > x-step > x-c { border-left: solid 15px #BFE6F1; margin-left: 60px; padding-left: 10px; color: #246A71; font-size: 24px; max-width: 220px; }
#page-intro .steps > x-step > x-c > x-h { font-family: Oswald, sans-serif; font-size: 30px; font-weight: 300; margin-bottom: 10px; }
#page-intro .steps > x-step > x-img > img { width: 240px; }
#page-step1 { display: none; color: #192A2A; padding-bottom: 88px; }
.reg-page > .back-link { display: block; text-align: center; margin-top: 30px; color: #246A71; font-size: 16px; cursor: pointer; }
#page-step1 .live-us-lbl { margin-bottom: 18px; /* margin-top: 40px; */ }
#register-reason-w { margin-top: 65px; /* font-size: 16px; */ }
#register-reason-w > x-h3 { margin-top: 30px; margin-bottom: 26px; }
#rating-w { margin-top: 50px; }
#rating-w > x-h2 { margin-bottom: 26px; }
#rating-w > x-h3 { margin-top: 30px; margin-bottom: 26px; }
#not-ready-w { border: solid 1px #95D8E8; border-radius: 20px; overflow: hidden; }
#not-ready-w > x-h { text-align: center; background: #95D7E8; padding: 32px 22px; line-height: 1.6em; }
#not-ready-w > x-c { background: #E8F6FA; padding: 36px 18px; }
#not-ready-w > x-c > .choice { margin-bottom: 20px; }
#not-ready-w > x-c > .choice > .exp:not(.show) { display: none; }
#not-ready-w > x-c > .choice > .exp { border-top: solid 10px #BFE6F1; border-bottom: solid 10px #BFE6F1; padding: 20px 0; color: #246A71; line-height: 1.6em; }
#not-ready-w > x-c > .choice > .exp > .points { margin: 10px 0; }
#not-ready-w > x-c > .choice > .exp > .reg-slideshow { float: right; width: 284px; margin: 0 0 10px 22px; }
#not-ready-w > x-c > x-h2 { margin-bottom: 40px; }
#not-ready-w.hide { display: none; }
#page-health { padding-bottom: 100px; }
#page-health > x-c { max-width: 768px; margin: 0 auto 80px; }
#page-health > x-c > x-h1 { margin-bottom: 40px; }
#page-health > x-c > .chk-w { font-size: 16px; margin-top: 28px; }
#page-health > x-c > .chk-w > label { display: flex; align-items: flex-start; }
#page-health > x-c > .chk-w > label > input { flex: none; margin-right: 10px; margin-top: -1px; }
#page-health > x-c > .chk-w.tight-row { margin-top: 0; margin-bottom: 6px; }
#page-health > x-c > .blue-bar { width: 70px; height: 10px; background: #BFE6F1; margin: 30px auto 40px; }
#page-health > .lower-info > .line-3 { margin-top: 20px; }
#page-health > .lower-info > .reg-slideshow { margin: 30px auto; }
#height-weight { display: flex; justify-content: space-between; margin-bottom: 50px; }
#height-weight > .part > x-lbl { margin-bottom: 6px; display: block; }
#height-weight > .part > .fields { display: flex; }
#height-weight > .part > .fields > x-field { width: 120px; }
#height-weight x-field:not(:last-child) { margin-right: 15px; }
#page-demog { padding-bottom: 100px; }
#page-demog .h-ancestry { margin: 35px 0 25px; }
#page-demog .h-background { margin-top: 40px; }
#page-demog .eth-grp { margin-bottom: 20px; }
#page-demog .eth-grp > x-h { display: flex; justify-content: space-between; background: #BFE6F1; border: solid 1px #66CBDF; font-size: 16px; height: 40px; padding: 0 0px 0 20px; align-items: center; border-radius: 5px; cursor: pointer; }
#page-demog .eth-grp > x-h > i { font-size: 28px; color: #004853; transition: transform .4s }
#page-demog .eth-grp > x-c { margin-top: 20px; margin-left: 20px; }
#page-demog .eth-grp:not(.open) > x-c { display: none; }
#page-demog .eth-grp.open > x-h > i { transform: rotate(90deg); }
#page-contact { padding-bottom: 100px; }
#page-contact > x-c { margin-bottom: 170px; }
#page-contact #social-media-h { margin-top: 40px; }
#page-contact #backup-contact-h { margin-top: 40px; }
#page-contact x-h3 { margin-top: 30px; }
#page-contact #social-media-h3, #page-contact #backup-contact-h3 { margin: 30px 0 30px; }
#page-contact #if-match-h { margin-top: 40px; margin-bottom: 30px; }
#page-contact #research-consent-w { max-width: 768px; margin: 55px auto 0; padding: 0 20px; }
#page-contact #research-consent-w > x-h3 { text-align: left; }
#page-contact #almost-done-w { max-width: 768px; margin: 0 auto; margin-top: 55px; padding: 0 20px; }
#page-contact #almost-done-w > x-h3 { text-align: left; }
#page-contact #almost-done-w > .chk-w { font-size: 16px; }
#page-contact #almost-done-w > .chk-w > label { display: flex; line-height: 1.5em; }
#page-contact #almost-done-w > .chk-w > label > input { margin-top: 1px; margin-right: 10px; }
#page-contact #almost-done-w > .chk-w a { color: #F05725; }
#page-contact #consent-t { text-align: left; background: #E8F6FA; font-size: 16px; border: solid 1px #95D8E8; max-height: 300px; overflow: auto; overscroll-behavior: contain; padding: 0 18px 18px; border-top-left-radius: 10px; border-bottom-left-radius: 10px; box-shadow: inset 3px 3px 6px #ddd; margin-bottom: 25px; position: relative; }
#page-contact #scroll-hint { position: sticky; top: 0; background: #B7D3D8; font-family: 'Roboto', sans-serif; font-size: 14px; padding: 15px 0; text-align: center; margin: -18px -18px 30px; z-index: 1; transition: opacity 0.3s; z-index: 10; color: #246A71; font-weight: bold; }
#page-contact #scroll-hint.hide { opacity: 0; pointer-events: none; }
#page-contact #consent-t > h3 { text-align: center; font-family: 'Oswald', sans-serif; font-weight: normal; font-size: 24px; color: #246A71; margin: 5px 10px 15px; }
#page-contact #consent-t > x-t { display: block; white-space: pre-line; line-height: 1.4em; }
#page-contact #consent-err { text-align: center; margin-bottom: 20px; }
#name-address > .opt,
x-c > .opt { color: #7599A3; font-size: 10px; margin-bottom: 8px; }
#social-media-w { }
#social-media-w > .opt { color: #7599A3; font-size: 10px; }
#social-media-w > .items { margin-top: 10px; }
#social-media-w > .items > x-field { max-width: 300px; margin-bottom: 20px; }
#social-media-w > .items > x-field > .icon-cancel { position: absolute; right: 10px; border: solid 1px #7ED1E3; border-radius: 99px; color: #7ED1E3; font-size: 14px; cursor: pointer; width: 22px; height: 22px; display: flex; justify-content: center; align-items: center; box-sizing: border-box; background: white; top: 10px; }
#social-media-w > .add-w { margin-top: 10px; }
#social-media-w > .add-w > .add { font-size: 18px; font-weight: bold; color: #00B9D4; cursor: pointer; }
#social-media-w > .add-w > .add > .icon-plus { border: solid 1px #7ED1E3; border-radius: 99px; color: #7ED1E3; font-size: 20px; cursor: inherit; width: 35px; height: 35px; display: inline-flex; justify-content: center; align-items: center; box-sizing: border-box; background: linear-gradient(#fff,#E8F6FA); vertical-align: 1px; margin-right: 5px; }
#social-media-w > .add-w > .choose { border: solid 1px #90AEB7; padding: 8px 20px; cursor: pointer; color: #7599A3; background: no-repeat; border-radius: 5px; }
#social-media-w > .add-w > .choose:hover, #social-media-w > .add-w > .add:hover { opacity: .8; }
#social-media-w:not(.empty) > .add-w > .choose, #social-media-w.empty > .add-w > .add { display: none; }
#social-media-w > .add-w { position: relative; }
.sm-popup { position: absolute; top: 0; left: 0; z-index: 10; background: white; border: solid 1px #95D8E8; border-radius: 10px; padding: 18px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25); }
.sm-popup > .icon-cancel { position: absolute; top: 8px; right: 8px; cursor: pointer; color: #7599A3; font-size: 14px; }
.sm-popup > .choices { text-align: left; font-size: 16px; }
.sm-popup .select { border: solid 1px #00B9D4; background: linear-gradient(#fff,#E8F6FA); color: #00B9D4; height: 40px; }
#page-payment { }
#page-payment > x-c { margin-top: 80px; text-align: center; }
#page-payment #cust-amount { margin-bottom: 20px; }
#page-payment #method-h { color: #1F6470; font-size: 24px; font-weight: bold; margin-bottom: 25px; }
#page-payment #method-w { display: flex; justify-content: center; }
#page-payment #method-w > .chk-w { margin: 0 30px; }
#page-payment #cc-fields { margin: 40px auto; max-width: 500px; }
#page-payment #f-main.method-pp #cc-fields { display: none; }
#page-payment #main-err { margin-top: 20px; }
#paypal-button-container { margin: 30px auto 0; max-width: 350px; }
#f-main.method-cc > #paypal-button-container { display: none; }
#f-main.method-pp > #cont-w { display: none; }
#page-payment > #page-c.free .hide-on-free { display: none; }
#sponsorship { margin-top: 45px; margin-bottom: 55px; }
#sponsorship:not(.has-sponsorship) > x-ctrls, #sponsorship:not(.has-sponsorship) > .err-msg { display: none; }
#sponsorship > x-ctrls { display: flex; justify-content: center; }
#sponsorship > x-ctrls > x-field { width: 200px; flex: none; margin-right: 20px; }
#sponsorship > x-ctrls > .btn-g { height: 44px; }
#sponsorship > .err-msg { margin-top: 10px; }
#page-c.sponsored #sponsorship { display: none; }
#sponsorship-det { display: flex; justify-content: center; margin: 40px; align-items: center; }
#sponsorship-det > x-t { background: #E8F6FA; border: solid 1px #95D8E8; border-radius: 10px; padding: 10px 35px; }
#sponsorship-det > .icon-cancel { cursor: pointer; }
#amount-box { background: #E8F6FA; border: solid 1px #95D8E8; border-radius: 20px; padding: 30px 35px; max-width: 540px; margin: 0 auto 60px; box-sizing: border-box; }
#amount-box > .rw { display: flex; justify-content: space-between; color: #1F6470; font-size: 24px; font-weight: bold; }
#amount-box > .test-kit { border-bottom: solid 1px #95D8E8; padding-bottom: 20px; }
#amount-box > .consider { margin-top: 20px; }
#amount-box > .amounts { text-align: left; margin-top: 25px; border-bottom: solid 1px #95D8E8; padding-bottom: 10px; margin-bottom: 20px; }
#amount-box > .amounts i-num { width: 40px; display: inline-block; }
#amount-box:not(.cust-amount) #cust-amount { display: none; }
#amount-box > .sponsor { border-bottom: solid 1px #95D8E8; padding-bottom: 20px; margin-top: 20px; }
#page-timetoswab > x-c { text-align: center; max-width: 400px; }
#page-timetoswab > x-c > x-h1 { line-height: 1.1em; margin-top: 40px; }
#page-timetoswab > x-c > x-h3 { font-size: 24px; }
#page-timetoswab > x-c > .check { font-size: 100px; }
#page-thanks { text-align: center; }
#page-thanks #page-c { margin-top: 80px; }
#page-thanks .sect { margin-top: 40px; }
#page-thanks .sect > x-h1 { font-size: 30px; margin-bottom: 30px; }
#stars-w { background: #E8F6FA; border: solid 1px #95D8E8; border-radius: 20px; padding: 38px; max-width: 572px; margin: 38px auto; }
#stars-w > x-h1 { font-size: 24px; margin-bottom: 30px; }
#stars-w > x-btn { margin-top: 40px; }
#stars-w > x-btn > .btn-g { width: 270px; height: 60px; border-radius: 10px; font-size: 24px; text-transform: none; }
#stars-w x-stars { display: flex; justify-content: center; margin-bottom: 20px }
#stars-w x-stars > x-star { width: 39px; height: 39px; background: url(/res/img/register/star-empty.png) center/contain no-repeat; margin: 0 5px; }
#stars-w x-stars > x-star.on { background-image: url(/res/img/register/star-full.png) }
#stars-w > .smiley > img { width: 100px; }
#stars-w > .appreciate { color: #1F6470; margin-top: 10px; }
#how-improve { border: solid 1px #00B9D4; width: 280px; font-size: 16px; padding: 15px 15px; border-radius: 5px; height: 80px; margin-bottom: -20px; }
#learn-more > .intro { margin-top: 28px; }
#get-involved > .links { display: flex; flex-direction: column; }
#get-involved > .links > a { color: #EB3F16; font-weight: bold; font-size: 18px; margin: 10px; }
#media-links > .links { display: flex; justify-content: center; align-items: flex-end; margin-top: 45px; }
#media-links > .links > a { text-decoration: none; margin: 0 30px; }
#media-links > .follow-up { width: 442px; max-width: 90%; margin-top: 30px; }
@media(min-width:1024px) {
#page-contact x-row { margin-bottom: 20px; }
#page-payment #cc-fields x-row { margin-bottom: 18px; }
#page-payment #cc-fields x-field:not(:last-child) { margin-right: 20px; }
}
@media(max-width:1023px) {
/* Stack the floated step-1 carousels below their explanation text on narrow screens. */
#not-ready-w > x-c > .choice > .exp > .reg-slideshow { float: none; width: 100%; max-width: 284px; margin: 16px auto 28px; }
.reg-slideshow { max-width: 100%; }
.progress { padding: 40px 20px 30px; }
.progress > x-num { width: 42px; height: 42px; font-size: 18px; }
.progress > x-line { width: 50px; }
.reg-page > x-c { width: auto; padding: 0 20px; }
x-btn { margin-top: 30px; }
x-btn > .btn-g { width: 270px; height: 60px; border-radius: 10px; }
x-row { flex-direction: column; margin: 0; }
x-field { margin-bottom: 20px; flex: none; }
x-field:not(:last-child) { margin-right: 0; }
/* State/Zip share the row: state narrower, zip wider */
x-field-pair > x-field:first-of-type { flex: 3; }
x-field-pair > x-field:last-of-type { flex: 5; }
.masked-phone { margin-bottom: 20px; }
.masked-phone > x-field { margin-bottom: 0; flex: 1; }
x-row > .masked-phone:not(:last-child) { margin-right: 0; }
.chk-w > label { display: flex; }
.chk-w > label > input { margin: 0 10px 0 0; }
/* The Information for Donors text is ~4,000px tall at phone widths, so the desktop 300px window
took ~15 separate swipes to reach the bottom (worse again with Android's system text-scaling,
which grows the text but not a px max-height). Size the box to the viewport instead; svh
accounts for the address bar where it's supported, and vh is the fallback where it isn't. */
#page-contact #consent-t { max-height: 60vh; max-height: 60svh; }
#page-contact #scroll-hint { padding: 10px 0; margin-bottom: 18px; }
.lower-info { padding: 0 20px; }
.lower-info > .chk-w > label { justify-content: center; }
#page-intro > .banner { height: 675px; text-align: center; }
#page-intro > .banner > x-c { justify-content: flex-start; margin-top: 35px; padding: 0 20px; }
#page-intro > .banner > x-c > .blue-bar { background: none; font-size: 48px; padding: 0; max-width: 300px; margin: 0 auto; line-height: 1em; }
#page-intro > .banner > x-c > x-t { border: none; margin: 20px 0 0; padding: 0; font-size: 18px; font-family: 'Roboto',sans-serif; }
#page-intro > .banner > x-c > x-t > x-h { display: none; }
#page-intro > .banner > x-c > x-t > x-t { font-size: 18px; line-height: 1.4em; margin-top: 0; }
#page-intro .dob-w { flex-direction: column; }
#page-intro > x-c > x-h1 { font-size: 36px; }
#page-intro .steps > x-step { flex-direction: column; }
#page-intro .steps > x-step > x-step-num { display: none; }
#page-intro .steps > x-step > x-c { border: none; text-align: center; margin: 20px; padding: 0; }
#page-intro .steps > x-step > x-c > x-h:after { content: ''; width: 70px; height: 10px; background: #BFE6F1; display: block; margin: 10px auto 0; }
#page-intro .seeks-add { font-size: 18px; }
#register-reason-w { margin-top: 40px; }
#height-weight { flex-direction: column; margin-bottom: 0; }
#height-weight > .part > .fields { }
#height-weight > .part > .fields > x-field { width: 95px; margin-bottom: 0; }
#height-weight #height-w { margin-bottom: 20px; }
#amount-box > .rw { font-size: 20px; }
#page-payment #cc-fields img { align-self: flex-end; }
#page-thanks #page-c { margin-top: 50px; }
#how-improve { width: 100%; box-sizing: border-box; }
}