@charset "utf-8";
@import url("https://use.typekit.net/jtc8est.css");

/* === BURSARY FORM: 100% WIDTH & TYPOGRAPHY OVERRIDE (form181) === */
/* Confirmed field IDs:
   fo181li1   = Full Name
   fo181li3   = Date of Birth (.date)
   fo181li4   = Email Address
   fo181li6   = Mailing Address (.complex)
   fo181li12  = Phone Number (.phone)
   fo181li13  = Canadian citizen/PR (radio)
   fo181li514 = Annual Program Tuition (.leftHalf, currency)
*/


/* ============================================================
   1. GLOBAL WIDTH RESET & TYPOGRAPHY
   ============================================================ */

html.embed body#public,
html.embed body#public * {
    font-family: proxima-nova, sans-serif, Arial, Helvetica !important;
}

html.embed body#public {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
}

html.embed body#public #container,
html.embed body#public .wufoo,
html.embed body#public #form181 {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Override Wufoo's default 64% width restriction */
html.embed body#public .wufoo li {
    width: 100% !important;
    margin: 0 !important;
    padding: 5px 20px !important;
    box-sizing: border-box !important;
}

/* Normalize list item spacing */
html.embed body#public #form181 .wufoo li {
    margin-bottom: 15px !important;
    padding-bottom: 0 !important;
}

/* Side-by-side column layout (.leftHalf / .rightHalf — set in Wufoo form builder) */
html.embed body#public #form181 li.leftHalf {
    width: 50% !important;
    float: left !important;
    clear: left !important;
}

html.embed body#public #form181 li.rightHalf {
    width: 50% !important;
    float: right !important;
    clear: none !important;
}

/* Non-column fields always clear floats */
html.embed body#public #form181 li.section,
html.embed body#public #form181 li:not(.leftHalf):not(.rightHalf) {
    clear: both !important;
}


/* ============================================================
   2. FORM TITLE & SUBTITLE
   ============================================================ */

html.embed body#public #container .info h2 {
    font-family: proxima-nova, sans-serif !important;
    font-weight: 700 !important;
    font-size: 2.2rem !important;
    color: #333 !important;
    margin-bottom: 5px !important;
}

html.embed body#public #container .info div {
    font-family: proxima-nova, sans-serif !important;
    font-size: 1.1rem !important;
    color: #646f7c !important;
}


/* ============================================================
   3. FIELD LABELS
   ============================================================ */

html.embed body#public #form181 label.desc {
    font-family: proxima-nova, sans-serif !important;
    font-weight: 700 !important;
    font-size: 1.05rem !important;
    color: #34495e !important;
    margin-bottom: 8px !important;
    display: block !important;
}


/* ============================================================
   4. INPUT / TEXTAREA / SELECT STYLING
   ============================================================ */

html.embed body#public #form181 li input[type="text"],
html.embed body#public #form181 li input[type="email"],
html.embed body#public #form181 li input[type="tel"],
html.embed body#public #form181 li textarea.textarea,
html.embed body#public #form181 li select.select {
    width: 100% !important;
    padding: 12px !important;
    border: 1px solid #dcdcdc !important;
    border-radius: 8px !important;
    box-sizing: border-box !important;
    font-size: 1rem !important;
    background-color: #fff !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
    transition: all 0.2s ease-in-out !important;
}

/* Focus / hover states */
html.embed body#public #form181 li.focused,
html.embed body#public #form181 li:hover {
    background-color: rgba(0, 120, 212, 0.03) !important;
    transition: background-color 0.3s ease !important;
}

html.embed body#public #form181 li input:focus,
html.embed body#public #form181 li textarea:focus,
html.embed body#public #form181 li select:focus {
    border-color: #0078d4 !important;
    box-shadow: 0 0 0 4px rgba(0, 120, 212, 0.15), 0 4px 12px rgba(0, 0, 0, 0.08) !important;
    outline: none !important;
    transform: translateY(-1px) !important;
    background-color: #fff !important;
}


/* ============================================================
   5. HELPER / INSTRUCTION TEXT (.instruct)
      Hidden by default; revealed on hover or focus
   ============================================================ */

html.embed body#public #form181 li .instruct,
html.embed body#public #form181 li span.instruct,
html.embed body#public #form181 li p.instruct {
    display: none !important;
    position: static !important;
    width: 100% !important;
    clear: both !important;
    padding: 10px 14px !important;
    margin-top: 8px !important;
    margin-bottom: 0 !important;
    background: #f1f5f9 !important;
    border-left: 3px solid #0078d4 !important;
    border-radius: 4px !important;
    font-size: 0.95rem !important;
    color: #475569 !important;
    line-height: 1.6 !important;
    font-style: normal !important;
    box-sizing: border-box !important;
}

/* Reveal on hover, keyboard focus, or Wufoo's .focused class */
html.embed body#public #form181 li:hover .instruct,
html.embed body#public #form181 li:focus-within .instruct,
html.embed body#public #form181 li.focused .instruct {
    display: block !important;
}

/* Bullet lists inside instruction text */
html.embed body#public #form181 li .instruct ul,
html.embed body#public #form181 li.section div ul,
html.embed body#public #form181 li.section p ul {
    list-style-type: disc !important;
    padding-left: 20px !important;
    margin: 6px 0 4px !important;
}

html.embed body#public #form181 li .instruct ul li,
html.embed body#public #form181 li.section div ul li,
html.embed body#public #form181 li.section p ul li {
    display: list-item !important;
    list-style-type: disc !important;
    width: auto !important;
    float: none !important;
    clear: none !important;
    padding: 0 !important;
    margin: 0 0 4px 0 !important;
    line-height: 1.45 !important;
    font-size: 0.95rem !important;
}


/* ============================================================
   6. FULL NAME (fo181li1) — side-by-side First / Last
   ============================================================ */

html.embed body#public #form181 li#fo181li1 {
    width: 100% !important;
    float: none !important;
    clear: both !important;
}

html.embed body#public #form181 li#fo181li1 label.desc {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    white-space: nowrap !important;
}

html.embed body#public #form181 li#fo181li1 label span.req {
    display: inline !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
}

html.embed body#public #form181 li#fo181li1 span {
    float: left !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

html.embed body#public #form181 li#fo181li1 span:first-of-type {
    width: 42% !important;
    margin-right: 4% !important;
}

html.embed body#public #form181 li#fo181li1 span:last-of-type {
    width: 54% !important;
}

html.embed body#public #form181 li#fo181li1 input.text {
    width: 100% !important;
    min-width: 100% !important;
    box-sizing: border-box !important;
}


/* ============================================================
   7. ALL DATE FIELDS (.date) — sub-labels below input boxes
      Applies to Date of Birth, Program Start Date, End Date, etc.
   ============================================================ */

html.embed body#public #form181 li#fo181li3 {
    clear: both !important;
}

/* Each date-segment span (input + MM/DD/YYYY label): column stack */
html.embed body#public #form181 li.date > span:not(.symbol):not([id^="cal"]) {
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: center !important;
    vertical-align: top !important;
    margin-right: 6px !important;
}

/* Sub-labels (MM, DD, YYYY) appear below the input */
html.embed body#public #form181 li.date > span:not(.symbol):not([id^="cal"]) label {
    font-size: 0.78rem !important;
    color: #888 !important;
    margin-top: 3px !important;
    display: block !important;
    text-align: center !important;
    font-weight: 400 !important;
}

/* The input boxes themselves */
html.embed body#public #form181 li.date input.text {
    text-align: center !important;
    padding: 10px 6px !important;
    line-height: 1 !important;
}

/* "/" slash separators — vertically centered alongside the inputs */
html.embed body#public #form181 li.date span.symbol {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    vertical-align: top !important;
    padding: 10px 2px 0 !important;
    font-size: 1.1rem !important;
    color: #888 !important;
    line-height: 1 !important;
}

/* Calendar icon */
html.embed body#public #form181 li.date span[id^="cal"] {
    display: inline-flex !important;
    align-items: flex-start !important;
    vertical-align: top !important;
    padding-top: 8px !important;
    margin-left: 4px !important;
}

html.embed body#public #form181 li.date span[id^="cal"] img.datepicker {
    display: block !important;
    cursor: pointer !important;
}


/* ============================================================
   8. EMAIL ADDRESS (fo181li4)
   ============================================================ */

/* ============================================================
   9. MAILING ADDRESS (fo181li6) — .complex field
   ============================================================ */

html.embed body#public #form181 li#fo181li6 {
    clear: both !important;
    width: 100% !important;
}

html.embed body#public #form181 li#fo181li6 .full {
    width: 100% !important;
    display: block !important;
    margin-bottom: 10px !important;
    box-sizing: border-box !important;
}

html.embed body#public #form181 li#fo181li6 input.addr {
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Hide Country dropdown — BC-only program */
html.embed body#public #form181 li#fo181li6 span.country {
    display: none !important;
}

/* Province / Postal label text injection */
html.embed body#public #form181 li#fo181li6 .state label,
html.embed body#public #form181 li#fo181li6 .zip label {
    font-size: 0 !important;
    color: transparent !important;
    display: flex !important;
    flex-direction: column !important;
    margin-top: 6px !important;
    height: 18px !important;
}

html.embed body#public #form181 li#fo181li6 .state label::before {
    content: "Province / Territory" !important;
    font-size: 11px !important;
    color: #333 !important;
    font-family: proxima-nova, sans-serif !important;
    visibility: visible !important;
    display: block !important;
}

html.embed body#public #form181 li#fo181li6 .zip label::before {
    content: "Postal Code" !important;
    font-size: 11px !important;
    color: #333 !important;
    font-family: proxima-nova, sans-serif !important;
    visibility: visible !important;
    display: block !important;
}


/* ============================================================
   10. PHONE NUMBER (fo181li12) — sub-labels below input boxes
   ============================================================ */

html.embed body#public #form181 li#fo181li12 {
    /* width and clear handled by .leftHalf/.rightHalf class */
    min-width: 0 !important;
}

/* Each phone-segment span (input + ### label): column stack */
html.embed body#public #form181 li.phone > span:not(.symbol),
html.embed body#public #form181 li#fo181li12 > span:not(.symbol) {
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: center !important;
    vertical-align: top !important;
    margin-right: 4px !important;
}

/* Sub-labels (###, ###, ####) appear below the input */
html.embed body#public #form181 li.phone > span:not(.symbol) label,
html.embed body#public #form181 li#fo181li12 > span:not(.symbol) label {
    font-size: 0.78rem !important;
    color: #888 !important;
    margin-top: 3px !important;
    display: block !important;
    text-align: center !important;
    font-weight: 400 !important;
}

/* "-" dash symbols — vertically centered alongside inputs */
html.embed body#public #form181 li#fo181li12 span.symbol {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    vertical-align: top !important;
    padding: 10px 4px 0 !important;
    font-size: 1.1rem !important;
    color: #666 !important;
    line-height: 1 !important;
}

html.embed body#public #form181 li#fo181li12 input.text {
    box-sizing: border-box !important;
}


/* ============================================================
   11. CANADIAN CITIZEN RADIO (fo181li13) + all radio fields
   ============================================================ */

html.embed body#public #form181 li fieldset {
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

html.embed body#public #form181 li fieldset legend.desc {
    font-family: proxima-nova, sans-serif !important;
    font-weight: 700 !important;
    font-size: 1.05rem !important;
    color: #34495e !important;
    margin-bottom: 12px !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    width: 100% !important;
    padding: 0 !important;
}

/* Keep required * inline with legend text */
html.embed body#public #form181 li fieldset legend.desc span.req {
    display: inline !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
    flex-shrink: 0 !important;
}

/* Radio option rows */
html.embed body#public #form181 li fieldset div {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    margin-top: 8px !important;
}

html.embed body#public #form181 li fieldset span {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

/* Radio button circles */
html.embed body#public #form181 li input[type="radio"] {
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    flex-shrink: 0 !important;
    cursor: pointer !important;
    accent-color: #0078d4 !important;
    margin: 0 !important;
}

/* Radio labels */
html.embed body#public #form181 li label.choice {
    font-family: proxima-nova, sans-serif !important;
    font-size: 1rem !important;
    font-weight: 500 !important;
    color: #34495e !important;
    cursor: pointer !important;
    line-height: 1.5 !important;
    margin: 0 !important;
}

html.embed body#public #form181 li label.choice .choice__text {
    font-size: 1rem !important;
    color: #34495e !important;
}

/* Selected radio or checkbox: bold the label */
html.embed body#public #form181 li input[type="radio"]:checked + label.choice,
html.embed body#public #form181 li input[type="checkbox"]:checked + label.choice {
    font-weight: 700 !important;
    color: #2c3e50 !important;
}

/* Yes/No pairs display horizontally */
html.embed body#public #form181 li#fo181li13 fieldset div {
    flex-direction: row !important;
    gap: 24px !important;
    flex-wrap: wrap !important;
}


/* ============================================================
   12. ANNUAL PROGRAM TUITION (fo181li514) — currency field
       Dollars and Cents labels appear below their input boxes
   ============================================================ */

html.embed body#public #form181 li#fo181li514 {
    /* width and clear handled by .leftHalf class */
    min-width: 0 !important;
}

/* $ sign — centered with the input boxes */
html.embed body#public #form181 li#fo181li514 span.symbol:not(.radix) {
    display: inline-flex !important;
    align-items: center !important;
    align-self: center !important;   /* works when li is a flex container */
    vertical-align: middle !important; /* works when li is a block container */
    font-size: 1.15rem !important;
    font-weight: 600 !important;
    color: #34495e !important;
    line-height: 1 !important;
    margin-right: 2px !important;
}

/* "." decimal point */
html.embed body#public #form181 li#fo181li514 span.symbol.radix {
    display: inline-flex !important;
    align-items: center !important;
    align-self: center !important;
    vertical-align: middle !important;
    font-size: 1.3rem !important;
    font-weight: 700 !important;
    color: #34495e !important;
    line-height: 1 !important;
    margin: 0 2px !important;
}

/* Dollars column (input on top, label below) */
html.embed body#public #form181 li#fo181li514 > span:not(.symbol):not(.cents) {
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: center !important;
    align-self: flex-start !important; /* stays at top when li is flex */
    vertical-align: top !important;
}

/* Cents column */
html.embed body#public #form181 li#fo181li514 span.cents {
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: center !important;
    align-self: flex-start !important;
    vertical-align: top !important;
}

/* Sub-labels ("Dollars", "Cents") below the inputs */
html.embed body#public #form181 li#fo181li514 > span:not(.symbol):not(.cents) label,
html.embed body#public #form181 li#fo181li514 span.cents label {
    font-size: 0.78rem !important;
    color: #888 !important;
    margin-top: 3px !important;
    display: block !important;
    text-align: center !important;
    font-weight: 400 !important;
}

/* Dollars input */
html.embed body#public #form181 li#fo181li514 input#Field514 {
    width: 120px !important;
    box-sizing: border-box !important;
}

/* Cents input — narrower */
html.embed body#public #form181 li#fo181li514 span.cents input {
    width: 60px !important;
    box-sizing: border-box !important;
}


/* ============================================================
   13. SECTION HEADERS
   ============================================================ */

html.embed body#public #form181 li.section h3 {
    color: #2c3e50 !important;
    border-bottom: 2px solid #d43f4d !important;
    padding-bottom: 10px !important;
    font-weight: 700 !important;
    font-size: 1.4rem !important;
    letter-spacing: 0.5px !important;
    margin-top: 30px !important;
    margin-bottom: 15px !important;
}

html.embed body#public #form181 li.section div,
html.embed body#public #form181 li.section p {
    font-size: 1rem !important;
    line-height: 1.5 !important;
    color: #444 !important;
    margin-top: 10px !important;
}


/* ============================================================
   14. DROPDOWN FIELDS
   ============================================================ */

html.embed body#public #form181 li[data-field-type="select"] {
    clear: both !important;
    width: 100% !important;
    padding: 10px 20px !important;
}

html.embed body#public #form181 li select.select {
    width: 100% !important;
    padding: 12px !important;
    border-radius: 8px !important;
    border: 1px solid #dcdcdc !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
    font-family: proxima-nova, sans-serif !important;
}


/* ============================================================
   15. FILE UPLOAD BUTTON
   ============================================================ */

html.embed body#public input[type="file"]::file-selector-button {
    background-color: #f8f9fa !important;
    color: #495057 !important;
    border: 1px solid #ced4da !important;
    padding: 8px 16px !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    font-family: proxima-nova, sans-serif !important;
    font-weight: 600 !important;
    font-size: 0.9rem !important;
    margin-right: 15px !important;
    transition: all 0.2s ease !important;
}

html.embed body#public input[type="file"]::file-selector-button:hover,
html.embed body#public input[type="file"]::-webkit-file-upload-button:hover {
    background-color: #e9ecef !important;
    border-color: #adb5bd !important;
}

html.embed body#public input[type="file"]::-webkit-file-upload-button {
    background-color: #f8f9fa !important;
    color: #495057 !important;
    border: 1px solid #ced4da !important;
    padding: 8px 16px !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    font-family: proxima-nova, sans-serif !important;
    font-weight: 600 !important;
    font-size: 0.9rem !important;
    margin-right: 15px !important;
    transition: all 0.2s ease !important;
}


/* ============================================================
   16. SUBMIT / NAVIGATION BUTTONS
   ============================================================ */

html.embed body#public #form181 .buttons {
    text-align: center !important;
    padding-top: 30px !important;
    margin-bottom: 20px !important;
}

html.embed body#public #form181 .buttons div {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 10px !important;
}

html.embed body#public #form181 .buttons input { order: 2 !important; }
html.embed body#public #form181 .buttons a    { order: 1 !important; margin-right: 0 !important; }

html.embed body#public #form181 .buttons .btTxt {
    background: linear-gradient(135deg, #0078d4 0%, #005a9e 100%) !important;
    color: #ffffff !important;
    border-radius: 8px !important;
    padding: 16px 48px !important;
    text-transform: uppercase !important;
    font-weight: 700 !important;
    font-size: 1.1rem !important;
    border: none !important;
    box-shadow: 0 4px 15px rgba(0, 120, 212, 0.4) !important;
    float: none !important;
    cursor: pointer !important;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    letter-spacing: 1px !important;
}

html.embed body#public #form181 .buttons .btTxt:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(0, 120, 212, 0.6) !important;
    background: linear-gradient(135deg, #0086f0 0%, #006cc1 100%) !important;
}

html.embed body#public #form181 .buttons .btTxt:active {
    transform: translateY(1px) !important;
    box-shadow: 0 2px 8px rgba(0, 120, 212, 0.4) !important;
}


/* ============================================================
   17. PROGRESS BAR
   ============================================================ */

html.embed body#public .pgStyle1,
html.embed body#public .pgStyle1 tbody,
html.embed body#public .pgStyle1 tr {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    margin-bottom: 15px !important;
    padding-bottom: 0 !important;
}

html.embed body#public .pgStyle1 {
    background: transparent !important;
    border: none !important;
    margin: 10px auto !important;
}

html.embed body#public .pgStyle1 td {
    border: none !important;
    vertical-align: middle !important;
}

html.embed body#public .pgStyle1 td var {
    background: #e0e0e0 !important;
    color: #fff !important;
    width: 30px !important;
    height: 30px !important;
    line-height: 30px !important;
    border-radius: 50% !important;
    font-weight: bold !important;
    font-size: 14px !important;
    box-shadow: none !important;
    border: none !important;
}

html.embed body#public .pgStyle1 td.selected var {
    background: #d43f4d !important;
    transform: scale(1.1) !important;
    box-shadow: 0 4px 10px rgba(212, 63, 77, 0.4) !important;
}

html.embed body#public .pgStyle1 td b {
    font-family: proxima-nova, sans-serif !important;
    font-size: 0.9rem !important;
    color: #95a5a6 !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

html.embed body#public .pgStyle1 td.selected b {
    color: #2c3e50 !important;
    font-weight: 800 !important;
}


/* ============================================================
   18. reCAPTCHA FOOTER TEXT
   ============================================================ */

html.embed body#public .recaptcha-text {
    text-align: center !important;
    margin: 20px auto 0 !important;
    display: block !important;
    color: #95a5a6 !important;
    font-size: 0.85rem !important;
    width: 100% !important;
}

html.embed body#public .recaptcha-text a {
    display: inline !important;
    color: #95a5a6 !important;
    text-decoration: underline !important;
    margin: 0 !important;
}


/* ============================================================
   19. CONFIRMATION PAGE FALLBACK
   ============================================================ */

@keyframes bursary-confirmFade {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

html.embed body#public .confirm {
    text-align: center !important;
    padding: 60px 30px 40px !important;
    max-width: 560px !important;
    margin: 0 auto !important;
    animation: bursary-confirmFade .6s ease-out both !important;
    font-family: proxima-nova, sans-serif !important;
    line-height: 1.7 !important;
    color: #4a5568 !important;
    font-size: 1.05rem !important;
}

html.embed body#public .confirm::before {
    content: "\2713" !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 72px !important;
    height: 72px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, #27ae60, #2ecc71) !important;
    color: #fff !important;
    font-size: 36px !important;
    font-weight: 700 !important;
    margin: 0 auto 28px !important;
    box-shadow: 0 6px 20px rgba(39, 174, 96, .25) !important;
}

html.embed body#public .confirm strong,
html.embed body#public .confirm b {
    display: block !important;
    font-size: 1.2rem !important;
    color: #2c3e50 !important;
    font-weight: 700 !important;
    margin: 22px 0 8px !important;
}

html.embed body#public .confirm strong:first-of-type,
html.embed body#public .confirm b:first-of-type {
    font-size: 1.5rem !important;
    margin-top: 0 !important;
    margin-bottom: 16px !important;
    letter-spacing: -.2px !important;
}

html.embed body#public .confirm p { margin-bottom: 14px !important; }


/* ============================================================
   20. RESPONSIVE ADDRESS (desktop 3-col / mobile stack)
   ============================================================ */

@media only screen and (min-width: 600px) {
    html.embed body#public #form181 li#fo181li6 .city,
    html.embed body#public #form181 li#fo181li6 .state,
    html.embed body#public #form181 li#fo181li6 .zip {
        width: 32% !important;
        float: left !important;
        margin-right: 1.3% !important;
        clear: none !important;
    }
    html.embed body#public #form181 li#fo181li6 .zip {
        margin-right: 0 !important;
    }
}

@media only screen and (max-width: 599px) {
    html.embed body#public #form181 li#fo181li6 .city,
    html.embed body#public #form181 li#fo181li6 .state,
    html.embed body#public #form181 li#fo181li6 .zip {
        width: 100% !important;
        float: none !important;
        margin-right: 0 !important;
        margin-bottom: 25px !important;
        clear: both !important;
    }
    html.embed body#public #form181 li#fo181li6 .state label,
    html.embed body#public #form181 li#fo181li6 .zip label {
        margin-top: 12px !important;
        height: 22px !important;
    }
}


/* ============================================================
   21. MOBILE — FULL RESPONSIVENESS
   ============================================================ */

@media only screen and (max-width: 640px) {

    html.embed body#public #form181 li#fo181li1,
    html.embed body#public #form181 li#fo181li3,
    html.embed body#public #form181 li#fo181li4,
    html.embed body#public #form181 li#fo181li6,
    html.embed body#public #form181 li#fo181li12,
    html.embed body#public #form181 li#fo181li13,
    html.embed body#public #form181 li#fo181li514 {
        width: 100% !important;
        float: none !important;
        clear: both !important;
        margin-right: 0 !important;
        margin-left: 0 !important;
    }

    /* Stack First / Last name */
    html.embed body#public #form181 li#fo181li1 span:first-of-type,
    html.embed body#public #form181 li#fo181li1 span:last-of-type {
        width: 100% !important;
        margin-right: 0 !important;
        display: block !important;
        margin-bottom: 10px !important;
    }

    /* Stack address sub-spans */
    html.embed body#public #form181 li.complex div span.left,
    html.embed body#public #form181 li.complex div span.right {
        width: 100% !important;
        float: none !important;
        margin-right: 0 !important;
        margin-left: 0 !important;
        display: block !important;
    }

    /* Yes/No radio stacks vertically on mobile */
    html.embed body#public #form181 li#fo181li13 fieldset div {
        flex-direction: column !important;
        gap: 12px !important;
    }

    html.embed body#public .wufoo li {
        padding: 5px 10px !important;
    }

    html.embed body#public #container,
    html.embed body#public #form181 {
        width: 100% !important;
        min-width: 0 !important;
    }

    html.embed body#public #container .info h2 {
        font-size: 1.8rem !important;
    }

    html.embed body#public #form181 .buttons {
        margin-top: 30px !important;
        padding-top: 40px !important;
    }

    html.embed body#public #form181 .buttons .btTxt {
        width: 100% !important;
        display: block !important;
        text-align: center !important;
        border-radius: 4px !important;
        background: linear-gradient(to bottom, #0078d4, #005a9e) !important;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2) !important;
    }

    html.embed body#public {
        padding-bottom: 50px !important;
    }

    html.embed body#public .pgStyle1,
    html.embed body#public .pgStyle1 tbody,
    html.embed body#public .pgStyle1 tr {
        display: block !important;
        width: 100% !important;
        text-align: center !important;
    }

    html.embed body#public .pgStyle1 td {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: auto !important;
        margin: 5px 8px 10px 8px !important;
        white-space: nowrap !important;
        vertical-align: middle !important;
    }

    html.embed body#public .pgStyle1 td:empty {
        display: none !important;
    }

    html.embed body#public .confirm {
        padding: 40px 20px 30px !important;
        font-size: .97rem !important;
    }

    html.embed body#public .confirm::before {
        width: 60px !important;
        height: 60px !important;
        font-size: 30px !important;
        margin-bottom: 22px !important;
    }

    html.embed body#public .confirm strong:first-of-type,
    html.embed body#public .confirm b:first-of-type {
        font-size: 1.25rem !important;
    }
}