/*==========================================================================
  ghaska-forms.css — FINAL v3
  Aggressive specificity + !important throughout to defeat Bootstrap 3
  and any theme overrides.
==========================================================================*/

/* ═══════════════════════════════════════════════════════════════════════
   1. STEP BAR
   Root problem: Bootstrap 3 .row uses float:left on all children.
   A <ul> inside .row has its <li>s floated, breaking flex completely.
   Solution: The step wrapper must be a DIRECT child of the form (not
   inside any col-*), with overflow:hidden reset and flex forced.
═══════════════════════════════════════════════════════════════════════ */
.ghaska-steps-outer {
    width: 100% !important;
    float: none !important;
    clear: both !important;
    display: block !important;
    padding: 0 0 32px 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    overflow: visible !important;
}

ul.form-steps,
.form-steps {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    position: relative !important;
    width: 100% !important;
    overflow: visible !important;
}

/* Invisible grey connecting line */
ul.form-steps::before,
.form-steps::before {
    content: '' !important;
    position: absolute !important;
    top: 19px !important;
    left: 12.5% !important;
    right: 12.5% !important;
    height: 2px !important;
    background: #dde2e8 !important;
    z-index: 0 !important;
    pointer-events: none !important;
}

/* Blue line extending right from completed steps */
ul.form-steps .step.completed::after,
.form-steps .step.completed::after {
    content: '' !important;
    position: absolute !important;
    top: 19px !important;
    left: 50% !important;
    right: -50% !important;
    height: 2px !important;
    background: #003660 !important;
    z-index: 1 !important;
    pointer-events: none !important;
}

/* Each step: equal flex, column layout, centered */
ul.form-steps li.step,
.form-steps .step {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    max-width: none !important;
    width: auto !important;
    float: none !important;       /* override Bootstrap li float */
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    position: relative !important;
    cursor: pointer !important;
    padding: 0 4px !important;
    margin: 0 !important;
    z-index: 2 !important;
    user-select: none !important;
    -webkit-user-select: none !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Circle number */
ul.form-steps .step-number,
.form-steps .step-number {
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    background: #e8eaed !important;
    color: #9aa0a6 !important;
    border: 2px solid #e8eaed !important;
    position: relative !important;
    z-index: 3 !important;
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
    transition: background .25s, color .25s, border-color .25s, transform .2s, box-shadow .2s !important;
    line-height: 1 !important;
}

/* Active step */
ul.form-steps .step.active .step-number,
.form-steps .step.active .step-number {
    background: #003660 !important;
    color: #fff !important;
    border-color: #003660 !important;
    transform: scale(1.12) !important;
    box-shadow: 0 0 0 5px rgba(0,54,96,.14) !important;
}

/* Completed step */
ul.form-steps .step.completed .step-number,
.form-steps .step.completed .step-number {
    background: #fac012 !important;
    color: #fff !important;
    border-color: #fac012 !important;
}

/* Hover (inactive) */
ul.form-steps .step:not(.active):hover .step-number,
.form-steps .step:not(.active):hover .step-number {
    border-color: #003660 !important;
    background: #d2dce8 !important;
    color: #003660 !important;
}

/* Step label */
ul.form-steps .step-text,
.form-steps .step-text {
    display: block !important;
    margin-top: 8px !important;
    font-size: 9px !important;
    font-weight: 700 !important;
    letter-spacing: .07em !important;
    text-transform: uppercase !important;
    color: #aab5c0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
    line-height: 1.3 !important;
    transition: color .2s !important;
}
ul.form-steps .step.active .step-text,
.form-steps .step.active .step-text   { color: #003660 !important; font-weight: 800 !important; }
ul.form-steps .step.completed .step-text,
.form-steps .step.completed .step-text{ color: #c9a100 !important; }

/* ═══════════════════════════════════════════════════════════════════════
   2. SECTION LABELS
═══════════════════════════════════════════════════════════════════════ */
.form-section-label {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
    color: #8c95a0 !important;
    margin: 20px 0 14px !important;
    padding-bottom: 8px !important;
    border-bottom: 2px solid #f0f2f5 !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    background: transparent !important;
}
.form-section-label i { color: #fac012 !important; font-size: 13px !important; }

/* ═══════════════════════════════════════════════════════════════════════
   3. NAVIGATION BUTTONS
═══════════════════════════════════════════════════════════════════════ */
.step-nav {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 10px !important;
    padding-top: 20px !important;
    margin-top: 16px !important;
    border-top: 1px solid #eef0f3 !important;
    width: 100% !important;
    float: none !important;
    clear: both !important;
    position: relative !important;
    z-index: 20 !important;
    box-sizing: border-box !important;
}
.step-nav .ghaska-btn-prev { margin-right: auto !important; }

.ghaska-btn-prev,
.ghaska-btn-next,
.ghaska-btn-submit {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 11px 26px !important;
    border: none !important;
    border-radius: 6px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    letter-spacing: .02em !important;
    text-decoration: none !important;
    line-height: 1.2 !important;
    outline: none !important;
    position: relative !important;
    z-index: 20 !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    transition: background .2s, transform .15s, box-shadow .15s !important;
    white-space: nowrap !important;
    min-height: 42px !important;
}

.ghaska-btn-prev                  { background: #f0f2f5 !important; color: #555 !important; }
.ghaska-btn-prev:hover             { background: #e2e5e9 !important; color: #333 !important; text-decoration: none !important; }
.ghaska-btn-next                  { background: #003660 !important; color: #fff !important; }
.ghaska-btn-next:hover,
.ghaska-btn-next:focus             { background: #fac012 !important; color: #fff !important; transform: translateY(-1px) !important; box-shadow: 0 4px 14px rgba(250,192,18,.35) !important; text-decoration: none !important; }
.ghaska-btn-submit                { background: #fac012 !important; color: #fff !important; }
.ghaska-btn-submit:hover,
.ghaska-btn-submit:focus           { background: #e0a800 !important; color: #fff !important; transform: translateY(-1px) !important; text-decoration: none !important; }

/* ═══════════════════════════════════════════════════════════════════════
   4. CUSTOM RADIO BUTTONS
═══════════════════════════════════════════════════════════════════════ */
.ghaska-radio-group {
    display: flex !important;
    flex-direction: row !important;
    gap: 20px !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    margin-top: 8px !important;
}

/* Scoped under .ghaska-radio-group (not the bare label.ghaska-radio-label
   selector) so its specificity (0-2-1) beats section 13's
   ".ghaska-form label, .form-step label { display:inline !important; }"
   (0-1-1, declared later in this file) — without this, that later rule
   wins the tie and the radio dot ends up stacked above its text instead
   of inline beside it. gic-submit-form.blade.php and events/register.blade.php
   each used to carry a private page-level copy of this same fix; fixing it
   here means every .ghaska-radio-group (including the membership forms,
   which never had their own copy) gets it for free. */
.ghaska-radio-group label.ghaska-radio-label {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px !important;
    cursor: pointer !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #444 !important;
    user-select: none !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.4 !important;
}

label.ghaska-radio-label input[type="radio"] {
    position: absolute !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    pointer-events: none !important;
    margin: 0 !important;
}

label.ghaska-radio-label .radio-dot {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    border-radius: 50% !important;
    border: 2px solid #bcc3cb !important;
    background: #fff !important;
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: border-color .2s, background .2s !important;
    position: relative !important;
    box-sizing: border-box !important;
}

label.ghaska-radio-label .radio-dot::after {
    content: '' !important;
    width: 10px !important;
    height: 10px !important;
    border-radius: 50% !important;
    background: #003660 !important;
    opacity: 0 !important;
    transform: scale(0) !important;
    transition: opacity .18s, transform .18s !important;
    display: block !important;
}

label.ghaska-radio-label input[type="radio"]:checked ~ .radio-dot {
    border-color: #003660 !important;
    background: #eef4fb !important;
}
label.ghaska-radio-label input[type="radio"]:checked ~ .radio-dot::after {
    opacity: 1 !important;
    transform: scale(1) !important;
}

label.ghaska-radio-label:hover .radio-dot { border-color: #fac012 !important; }

/* ═══════════════════════════════════════════════════════════════════════
   5. ASSOCIATE TYPE CARDS
═══════════════════════════════════════════════════════════════════════ */
.type-toggle-group {
    display: flex !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
    margin: 8px 0 !important;
}
.type-toggle-group > label {
    flex: 1 1 160px !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    border: 2px solid #e0e4e9 !important;
    border-radius: 8px !important;
    padding: 12px 16px !important;
    cursor: pointer !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    color: #555 !important;
    margin: 0 !important;
    transition: border-color .2s, background .2s !important;
}
.type-toggle-group > label > input[type="radio"] { display: none !important; }
.type-toggle-group > label.type-opt--selected    { border-color: #003660 !important; background: #eef4fb !important; color: #003660 !important; }
.type-toggle-group .type-icon                    { font-size: 20px !important; }

/* ═══════════════════════════════════════════════════════════════════════
   6. ELIGIBILITY MODAL BUTTONS — sc-contact-btn
═══════════════════════════════════════════════════════════════════════ */
button.sc-contact-btn,
.elig-card button.sc-contact-btn,
.elig-card .sc-contact-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    width: 100% !important;
    background: #003660 !important;
    color: #fff !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    padding: 10px 16px !important;
    border-radius: 6px !important;
    border: none !important;
    cursor: pointer !important;
    text-transform: uppercase !important;
    letter-spacing: .04em !important;
    text-decoration: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    transition: background .2s, transform .15s !important;
    box-sizing: border-box !important;
    line-height: 1.2 !important;
}
button.sc-contact-btn:hover,
.elig-card .sc-contact-btn:hover {
    background: #fac012 !important;
    color: #fff !important;
    transform: translateY(-1px) !important;
    text-decoration: none !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   7. PROFILE IMAGE UPLOAD
═══════════════════════════════════════════════════════════════════════ */
.profile-upload-wrap {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 16px !important;
    flex-wrap: wrap !important;
    margin-bottom: 4px !important;
}
.profile-preview-circle {
    width: 80px !important; height: 80px !important;
    border-radius: 50% !important; object-fit: cover !important;
    border: 3px solid #dde2e8 !important;
    display: none !important; flex-shrink: 0 !important;
}
.profile-placeholder-circle {
    width: 80px !important; height: 80px !important;
    border-radius: 50% !important;
    background: #f5f7fa !important;
    border: 3px dashed #c5cdd6 !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    color: #b0bac3 !important; font-size: 1.8rem !important;
    flex-shrink: 0 !important; cursor: pointer !important;
    transition: border-color .2s, background .2s, color .2s !important;
    box-sizing: border-box !important;
}
.profile-placeholder-circle:hover { border-color: #003660 !important; background: #eef4fb !important; color: #003660 !important; }
.profile-upload-info { font-size: 12px !important; color: #8c95a0 !important; }
.profile-upload-info .profile-upload-label { display: inline-block !important; margin-bottom: 4px !important; font-weight: 600 !important; color: #003660 !important; cursor: pointer !important; text-decoration: underline !important; transition: color .15s !important; }
.profile-upload-info .profile-upload-label:hover { color: #fac012 !important; }

/* ═══════════════════════════════════════════════════════════════════════
   9. REVIEW PDF CARD
═══════════════════════════════════════════════════════════════════════ */
.review-pdf-wrap { background: #fff !important; border: 1px solid #dde2e8 !important; border-radius: 10px !important; overflow: hidden !important; box-shadow: 0 2px 12px rgba(0,0,0,.08) !important; margin-bottom: 20px !important; }
.review-pdf-header { background: linear-gradient(135deg,#003660,#004d8c) !important; color: #fff !important; padding: 28px 24px 0 !important; text-align: center !important; }
.review-pdf-header .ghana-bar { display: flex !important; height: 5px !important; margin-top: 20px !important; }
.review-pdf-header .ghana-bar span { flex: 1 !important; }
.review-pdf-header .ghana-bar .r { background: #CE1126 !important; }
.review-pdf-header .ghana-bar .y { background: #FCD116 !important; }
.review-pdf-header .ghana-bar .g { background: #006B3F !important; }
.review-pdf-avatar { width: 130px !important; height: 130px !important; border-radius: 50% !important; object-fit: cover !important; border: 5px solid rgba(255,255,255,.95) !important; display: block !important; margin: 0 auto 14px !important; box-shadow: 0 4px 20px rgba(0,0,0,.25) !important; }
.review-pdf-avatar-placeholder { width: 130px !important; height: 130px !important; border-radius: 50% !important; background: rgba(255,255,255,.15) !important; border: 5px solid rgba(255,255,255,.5) !important; display: none !important; align-items: center !important; justify-content: center !important; margin: 0 auto 14px !important; color: rgba(255,255,255,.6) !important; font-size: 3rem !important; }
.review-pdf-name  { font-size: 20px !important; font-weight: 700 !important; margin: 0 0 4px !important; }
.review-pdf-meta  { font-size: 13px !important; opacity: .8 !important; margin: 0 0 2px !important; }
.review-pdf-badge { display: inline-block !important; background: #fac012 !important; color: #fff !important; font-size: 10px !important; font-weight: 700 !important; letter-spacing: .06em !important; padding: 2px 12px !important; border-radius: 20px !important; text-transform: uppercase !important; margin: 6px 0 16px !important; }
.review-pdf-body { padding: 0 24px 20px !important; }
.review-section { margin-top: 20px !important; border: 1px solid #eef0f3 !important; border-radius: 8px !important; overflow: hidden !important; }
.review-section-header { display: flex !important; align-items: center !important; justify-content: space-between !important; background: #f8f9fb !important; padding: 8px 14px !important; border-bottom: 1px solid #eef0f3 !important; }
.review-section-title { font-size: 11px !important; font-weight: 700 !important; letter-spacing: .06em !important; text-transform: uppercase !important; color: #555 !important; }
.review-edit-btn { display: inline-flex !important; align-items: center !important; gap: 5px !important; font-size: 11px !important; font-weight: 700 !important; text-transform: uppercase !important; background: #003660 !important; color: #fff !important; border: none !important; border-radius: 8px !important; padding: 4px 10px !important; cursor: pointer !important; transition: background .2s !important; }
.review-edit-btn:hover { background: #fac012 !important; color: #003660 !important; }
.review-grid { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)) !important; }
.review-field { padding: 10px 14px !important; border-bottom: 1px solid #f5f6f8 !important; border-right: 1px solid #f5f6f8 !important; }
.review-field--full { grid-column: 1 / -1 !important; }
.review-label { display: block !important; font-size: 10px !important; font-weight: 700 !important; letter-spacing: .05em !important; text-transform: uppercase !important; color: #aab0b8 !important; margin-bottom: 3px !important; }
.review-value { font-size: 13px !important; color: #333 !important; word-break: break-word !important; font-weight: 500 !important; }
.review-value.is-empty { color: #ccc !important; font-style: italic !important; }
.review-pdf-actions { display: flex !important; gap: 10px !important; justify-content: flex-end !important; padding: 12px 24px !important; border-top: 1px solid #eef0f3 !important; background: #fafbfc !important; }
.review-download-btn { display: inline-flex !important; align-items: center !important; gap: 7px !important; background: #003660 !important; color: #fff !important; border: none !important; border-radius: 6px !important; padding: 9px 20px !important; cursor: pointer !important; font-size: 13px !important; font-weight: 600 !important; transition: background .2s !important; }
.review-download-btn:hover { background: #fac012 !important; color: #fff !important; }

/* ═══════════════════════════════════════════════════════════════════════
   10. ELIGIBILITY CARDS
═══════════════════════════════════════════════════════════════════════ */
.elig-cards { display: flex !important; gap: 16px !important; flex-wrap: wrap !important; }
.elig-card { flex: 1 1 200px !important; border: 2px solid #eef0f3 !important; border-radius: 10px !important; padding: 20px 18px !important; text-align: center !important; transition: border-color .2s, box-shadow .2s !important; }
.elig-card:hover { border-color: #fac012 !important; box-shadow: 0 4px 16px rgba(0,0,0,.08) !important; }
.elig-card .elig-icon { font-size: 2.2rem !important; margin-bottom: 10px !important; display: block !important; }
.elig-card .elig-type { font-size: 13px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: .06em !important; color: #003660 !important; margin-bottom: 6px !important; }
.elig-card .elig-badge { display: inline-block !important; font-size: 9px !important; font-weight: 700 !important; background: #fac012 !important; color: #fff !important; padding: 2px 10px !important; border-radius: 20px !important; text-transform: uppercase !important; letter-spacing: .04em !important; margin-bottom: 10px !important; }
.elig-card .elig-desc { font-size: 13px !important; color: #666 !important; line-height: 1.6 !important; }
.elig-card .elig-criteria { list-style: none !important; padding: 0 !important; margin: 10px 0 0 !important; text-align: left !important; }
.elig-card .elig-criteria li { font-size: 12px !important; color: #555 !important; padding: 3px 0 !important; display: flex !important; align-items: flex-start !important; gap: 6px !important; }
.elig-card .elig-criteria li i { color: #fac012 !important; flex-shrink: 0 !important; margin-top: 2px !important; }
.eligibility-info-link { display: inline-flex !important; align-items: center !important; gap: 6px !important; font-size: 13px !important; font-weight: 600 !important; color: #003660 !important; cursor: pointer !important; border: none !important; background: none !important; padding: 4px 0 !important; text-decoration: underline !important; transition: color .2s !important; }
.eligibility-info-link:hover { color: #fac012 !important; }

/* ═══════════════════════════════════════════════════════════════════════
   11. MISC
═══════════════════════════════════════════════════════════════════════ */
.conditional-section { transition: opacity .2s; }
@media print {
    .review-edit-btn, .review-pdf-actions, .step-nav, .form-steps { display: none !important; }
    .review-pdf-wrap { box-shadow: none !important; border: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════
   12. FORM-STEP CONTAINER  — wraps all rows for one step
═══════════════════════════════════════════════════════════════════════ */
.form-step {
    padding: 0 !important;
    overflow: visible !important;
}
/* Clearfix after each row inside a step — covers Bootstrap 3 float collapse */
.form-step .row::after,
.ghaska-form .row::after {
    content: '' !important;
    display: table !important;
    clear: both !important;
}
/* step-nav sits outside .row, needs its own clear */
.form-step > .step-nav {
    clear: both !important;
    overflow: hidden !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   13. LABEL REQUIRED STAR — inline, no drop-down
═══════════════════════════════════════════════════════════════════════ */
.ghaska-form label,
.form-step label {
    display: inline !important;
    margin-bottom: 0 !important;
}
.ghaska-form .form-group > label,
.form-step .form-group > label {
    display: block !important;
    margin-bottom: 6px !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    color: #444 !important;
}
.ghaska-form label .text-danger,
.form-step label .text-danger,
.ghaska-form label span.text-danger,
.form-step label span.text-danger {
    display: inline !important;
    margin-left: 3px !important;
    font-size: inherit !important;
    vertical-align: baseline !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   14. CAPTCHA — layout row only. The member/associate/alumni application
       forms now use the exact same markup shape AND the exact same field
       CSS as the GIC abstract submission form (.captcha-wrapper >
       .captcha-input + .captcha-img + .captcha-refresh, all flat siblings,
       matching the shared <x-captcha/> component's structure) — that CSS
       is copied verbatim into membership-main-page.blade.php's own
       <style> push, the same way gic-submit-form.blade.php carries its
       own copy, rather than living here as a shared rule (this stylesheet
       is also loaded by application-status.blade.php, which uses the same
       <x-captcha/> component but intentionally keeps style.css's default
       look — a shared bare-class rule here would silently change that
       page too).
═══════════════════════════════════════════════════════════════════════ */

/* Outer row — overrides Bootstrap 3 float collapse */
.captcha-row {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    float: none !important;
    clear: both !important;
    gap: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

@media (max-width: 600px) {
    .captcha-row { flex-direction: column !important; align-items: flex-start !important; }
}

/* ═══════════════════════════════════════════════════════════════════════
   15. CHECKBOX CONSENT LABELS — larger text, no background
═══════════════════════════════════════════════════════════════════════ */
.ghaska-checkbox label,
.ghaska-checkbox + label,
div.ghaska-checkbox > label {
    font-size: 15px !important;
    line-height: 1.6 !important;
    color: #444 !important;
    font-weight: 500 !important;
    background: transparent !important;
    background-color: transparent !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   16. FORM BOTTOM SPACING — prevent last step-nav touching footer
═══════════════════════════════════════════════════════════════════════ */
.ghaska-form {
    padding-bottom: 60px !important;
}
.ghaska-form .form-step:last-child .step-nav,
.ghaska-form .step-nav {
    margin-bottom: 40px !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   17. FLASH ALERTS — matches contact page <x-main-alert> style
       Centred text, icon on left, consistent with Bootstrap alert
═══════════════════════════════════════════════════════════════════════ */
.ghaska-form .alert,
.ghaska-flash-area .alert {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    padding: 14px 20px !important;
    border-radius: 6px !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    margin-bottom: 18px !important;
    border: 1px solid transparent !important;
    line-height: 1.5 !important;
}
.ghaska-form .alert i,
.ghaska-flash-area .alert i {
    font-size: 18px !important;
    flex-shrink: 0 !important;
}
/* Bootstrap alert colours (already exist on page, just reinforce) */
.ghaska-form .alert-success { background: #dff0d8 !important; border-color: #d6e9c6 !important; color: #3c763d !important; }
.ghaska-form .alert-danger  { background: #f2dede !important; border-color: #ebccd1 !important; color: #a94442 !important; }
.ghaska-form .alert-warning { background: #fcf8e3 !important; border-color: #faebcc !important; color: #8a6d3b !important; }
.ghaska-form .alert-info    { background: #d9edf7 !important; border-color: #bce8f1 !important; color: #31708f !important; }