/* ========================================================= ASTRIS PME - HULK FORM BUILDER Advanced CSS ========================================================= */ /* ---------- BRAND COLOURS ---------- */ :root { --astris-dark: #2D2D34; --astris-blue: #7F9FB2; --astris-yellow: #FFCE34; --astris-grey: #DFE5E8; --astris-light: #EEF2F4; --astris-border: #C9D1D6; --astris-text: #151515; --astris-muted: #66747D; } /* ========================================================= GENERAL FORM ========================================================= */ form { font-family: Jost, Arial, sans-serif !important; color: var(--astris-text); width: 100%; } form * { box-sizing: border-box; } /* ---------- LABELS ---------- */ label { font-family: Jost, Arial, sans-serif !important; font-size: 15px !important; font-weight: 600 !important; color: var(--astris-text) !important; line-height: 1.4 !important; } /* Required asterisk */ label span, .required { color: #B42318; } /* ========================================================= INPUTS, SELECTS & TEXTAREAS ========================================================= */ input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="date"], input[type="time"], select, textarea { width: 100% !important; min-height: 46px !important; padding: 11px 13px !important; background: #FFFFFF !important; border: 1.5px solid var(--astris-border) !important; border-radius: 7px !important; color: var(--astris-text) !important; font-family: Jost, Arial, sans-serif !important; font-size: 15px !important; box-shadow: none !important; transition: border-color 0.2s ease, box-shadow 0.2s ease !important; } /* ---------- FOCUS ---------- */ input[type="text"]:focus, input[type="email"]:focus, input[type="tel"]:focus, input[type="number"]:focus, input[type="date"]:focus, input[type="time"]:focus, select:focus, textarea:focus { outline: none !important; border-color: var(--astris-blue) !important; box-shadow: 0 0 0 3px rgba(127, 159, 178, 0.18) !important; } /* ---------- TEXTAREA ---------- */ textarea { min-height: 115px !important; resize: vertical !important; } /* ---------- PLACEHOLDERS ---------- */ input::placeholder, textarea::placeholder { color: #899399 !important; opacity: 1 !important; } /* ========================================================= SELECT / DROPDOWN ========================================================= */ select { cursor: pointer !important; padding-right: 38px !important; background-color: #FFFFFF !important; color: var(--astris-text) !important; } /* First Please Select option */ select:invalid { color: #727C82 !important; } /* ========================================================= FIELD SPACING ========================================================= */ .form-group, .field, [class*="form-group"], [class*="field-wrapper"], [class*="field_container"] { margin-bottom: 18px !important; } /* ========================================================= SECTION HEADINGS ========================================================= */ /* Add an HTML element inside Hulk using:

Client Details

*/ .astris-section-title { display: block !important; width: 100% !important; margin: 26px 0 20px !important; padding: 11px 18px !important; background: var(--astris-grey) !important; border-radius: 5px !important; color: var(--astris-text) !important; font-family: Jost, Arial, sans-serif !important; font-size: 19px !important; font-weight: 700 !important; line-height: 1.25 !important; text-align: center !important; } /* First section can have less top space */ .astris-section-title:first-child { margin-top: 5px !important; } /* ========================================================= SUB HEADINGS ========================================================= */ /* HTML:

Carer / Family Contact

*/ .astris-subheading { width: 100% !important; margin: 25px 0 15px !important; color: var(--astris-text) !important; font-family: Jost, Arial, sans-serif !important; font-size: 17px !important; font-weight: 700 !important; text-align: center !important; } /* ========================================================= GREY QUESTION HEADINGS ========================================================= */ /* Example:

What equipment is the client currently using?

*/ .astris-question-title { display: inline-block !important; margin: 18px 0 9px !important; padding: 7px 11px !important; background: var(--astris-grey) !important; border-radius: 4px !important; color: var(--astris-text) !important; font-family: Jost, Arial, sans-serif !important; font-size: 13px !important; font-weight: 700 !important; line-height: 1.35 !important; text-transform: uppercase !important; } /* ========================================================= CLIENT MEASUREMENT BOXES ========================================================= */ /* If Hulk lets you assign custom CSS classes to a field, assign: astris-measurement-field */ .astris-measurement-field { background: var(--astris-light) !important; border-radius: 8px !important; padding: 13px !important; margin-bottom: 15px !important; } .astris-measurement-field label { display: block !important; margin-bottom: 7px !important; font-weight: 600 !important; } /* ========================================================= CM / KG UNIT STYLE ========================================================= */ /* If you are adding an HTML layout manually:

INPUT FIELD cm

*/ .astris-unit-field { display: flex !important; width: 100% !important; } .astris-unit-field input { border-radius: 7px 0 0 7px !important; } .astris-unit { display: flex !important; align-items: center !important; justify-content: center !important; min-width: 50px !important; padding: 0 12px !important; background: #F1F4F5 !important; border: 1.5px solid var(--astris-border) !important; border-left: 0 !important; border-radius: 0 7px 7px 0 !important; color: #4A555C !important; font-size: 14px !important; font-weight: 700 !important; } /* ========================================================= VISUAL OBSERVATION Tone / Rotation / Scoliosis / Kyphosis / Transfer ========================================================= */ /* Assign this class to those fields if Hulk supports Custom CSS Class: astris-observation */ .astris-observation { padding: 14px !important; margin-bottom: 15px !important; background: var(--astris-light) !important; border-radius: 8px !important; } .astris-observation label { display: block !important; margin-bottom: 7px !important; font-weight: 700 !important; } /* ========================================================= CHECKBOXES ========================================================= */ input[type="checkbox"] { width: 19px !important; height: 19px !important; min-height: 19px !important; margin: 0 8px 0 0 !important; accent-color: var(--astris-dark) !important; cursor: pointer !important; } input[type="radio"] { width: 19px !important; height: 19px !important; min-height: 19px !important; accent-color: var(--astris-dark) !important; cursor: pointer !important; } /* Checkbox text */ input[type="checkbox"] + label, input[type="radio"] + label { font-size: 15px !important; font-weight: 500 !important; } /* ========================================================= PREFERRED APPOINTMENT TABLE ========================================================= */ /* If you're able to put the AM / PM fields inside an HTML wrapper:

...

*/ .astris-availability { width: 100% !important; margin-top: 10px !important; border: 1px solid #DDE3E6 !important; border-radius: 9px !important; overflow: hidden !important; background: #FFFFFF !important; } .astris-availability-row { display: grid !important; grid-template-columns: minmax(180px, 1.6fr) 1fr 1fr !important; align-items: center !important; min-height: 58px !important; border-top: 1px solid #E4E8EA !important; } .astris-availability-row:first-child { border-top: 0 !important; } .astris-availability-header { min-height: 44px !important; background: #F3F5F6 !important; font-size: 13px !important; font-weight: 700 !important; } .astris-availability-cell { padding: 10px 14px !important; } .astris-availability-cell:not(:first-child) { border-left: 1px solid #E4E8EA !important; text-align: center !important; } /* ========================================================= CONDITIONAL FIELDS NDIS / ADDRESS OF TRIAL ========================================================= */ /* If Hulk lets you assign classes: astris-conditional */ .astris-conditional { margin-top: 16px !important; padding: 18px !important; background: #F8FAFB !important; border: 1px solid #DFE5E8 !important; border-radius: 9px !important; } /* ========================================================= HELP / DESCRIPTION TEXT ========================================================= */ .infoMessage, .help-text, .description, [class*="help"], [class*="description"] { color: var(--astris-muted) !important; font-family: Jost, Arial, sans-serif !important; font-size: 12px !important; line-height: 1.4 !important; } /* Keep your validation message */ .custom_number ~ .infoMessage { color: red !important; } /* ========================================================= PREVIOUS / NEXT BUTTONS ========================================================= */ button#prevBtn, button#nextBtn { color: #000000 !important; background: var(--astris-yellow) !important; border-radius: 7px !important; width: auto !important; min-width: 110px !important; min-height: 46px !important; padding: 11px 22px !important; font-size: 16px !important; font-weight: 600 !important; border: 0 !important; font-family: Jost, Arial, sans-serif !important; cursor: pointer !important; transition: opacity 0.2s ease, transform 0.2s ease !important; } button#prevBtn:hover, button#nextBtn:hover { opacity: 0.88 !important; transform: translateY(-1px) !important; } /* ========================================================= SUBMIT BUTTON ========================================================= */ button[type="submit"], input[type="submit"], button#submitBtn { color: #FFFFFF !important; background: var(--astris-dark) !important; border: 0 !important; border-radius: 7px !important; min-height: 46px !important; padding: 11px 24px !important; width: auto !important; font-family: Jost, Arial, sans-serif !important; font-size: 16px !important; font-weight: 600 !important; cursor: pointer !important; transition: opacity 0.2s ease, transform 0.2s ease !important; } button[type="submit"]:hover, input[type="submit"]:hover, button#submitBtn:hover { opacity: 0.9 !important; transform: translateY(-1px) !important; } /* ========================================================= HIDE HULK STEP INDICATOR ========================================================= */ .steps-wrapper { display: none !important; } /* ========================================================= NAVIGATION BUTTON ALIGNMENT ========================================================= */ div:has(> #prevBtn), div:has(> #nextBtn) { float: left !important; } /* ========================================================= FORM CARD / INNER AREA ========================================================= */ /* This catches common Hulk wrappers. If this changes the wrong part of your form, remove this particular section. */ form { background: #FFFFFF !important; border-radius: 10px !important; } /* ========================================================= MOBILE ========================================================= */ @media screen and (max-width: 749px) { input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="date"], input[type="time"], select, textarea { font-size: 16px !important; } .astris-section-title { font-size: 17px !important; margin-top: 20px !important; } .astris-observation { width: 100% !important; } .astris-availability-row { grid-template-columns: minmax(125px, 1.4fr) 0.8fr 0.8fr !important; } .astris-availability-cell { padding: 9px 7px !important; } button#prevBtn, button#nextBtn, button[type="submit"], input[type="submit"], button#submitBtn { min-height: 46px !important; padding: 10px 17px !important; } }

Power Wheelchairs

Manual Wheelchairs

Power Add-ons

Pushchairs

Alternate Indoor Seating

Hygiene & Toileting

Standers

Walkers & Gait Trainers

All Categories

Careflex

Klaxon

Magic Mobility

Motion Composites

Permobil

Rifton

Schuchmann

Spex

Our Top Brands

Power Wheelchairs

Manual Wheelchairs

Power Add-ons

Pushchairs

Alternate Indoor Seating

Hygiene & Toileting

Standers

Walkers & Gait Trainers

All Categories

Careflex

Klaxon

Magic Mobility

Motion Composites

Permobil

Rifton

Schuchmann

Spex

Our Top Brands

Search our store

Trial Form Updated

Client Trial & Assessment Form

Stay Connected

Our Products

Company

Contact

Legal

Astris PME. Made For Me.

Confirm your age

Come back when you're older

Enquiry List

Get Started