/* ========================================================= 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

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