:root { --pg-form-text: var(--pg-color-surface, #FFFFFF); --pg-form-muted: var(--pg-color-muted, #BCBEC0); --pg-form-input: var(--pg-color-ink, #0A0A0A); --pg-form-border: var(--pg-color-gray, #53565A); } .pg-hubspot-form, .hs-form-html { --hsf-global__font-family: Roboto, Arial, sans-serif; --hsf-global__color: var(--pg-form-text); --hsf-global-error__color: var(--pg-form-text); --hsf-background__background-color: transparent; --hsf-background__background-image: none; --hsf-background__padding: 0; --hsf-background__border-width: 0; --hsf-row__horizontal-spacing: 20px; --hsf-row__vertical-spacing: 20px; --hsf-module__vertical-spacing: 20px; --hsf-progressbar-progressLine__background-color: var(--pg-orange, #FF5F00); --hsf-progressbar-trackLine__background-color: var(--pg-form-border); --hsf-button__font-family: Roboto, Arial, sans-serif; --hsf-button__color: var(--pg-color-ink, #0A0A0A); --hsf-button__background-color: var(--pg-orange, #FF5F00); --hsf-button__background-image: none; --hsf-button__border-radius: 25px; --hsf-button__padding: 10px 36px; --hsf-button__box-shadow: none; --hsf-heading__color: var(--pg-form-text); --hsf-richtext__color: var(--pg-form-text); --hsf-field-label__color: var(--pg-form-text); --hsf-field-label-requiredindicator__color: var(--pg-orange, #FF5F00); --hsf-field-description__color: var(--pg-form-muted); --hsf-field-footer__color: var(--pg-form-muted); --hsf-field-input__color: var(--pg-form-text); --hsf-field-input__background-color: var(--pg-form-input); --hsf-field-input__placeholder-color: var(--pg-form-muted); --hsf-field-input__border-color: var(--pg-form-border); --hsf-field-input__border-width: 1px; --hsf-field-input__border-style: solid; --hsf-field-input__border-radius: 6px; --hsf-field-input__padding: 12px 14px; --hsf-field-textarea__color: var(--pg-form-text); --hsf-field-textarea__background-color: var(--pg-form-input); --hsf-field-textarea__placeholder-color: var(--pg-form-muted); --hsf-field-textarea__border-color: var(--pg-form-border); --hsf-field-textarea__border-width: 1px; --hsf-field-textarea__border-style: solid; --hsf-field-textarea__border-radius: 6px; --hsf-field-textarea__padding: 12px 14px; --hsf-field-checkbox__color: var(--pg-form-text); --hsf-field-checkbox__background-color: var(--pg-form-input); --hsf-field-checkbox__border-color: var(--pg-form-border); --hsf-field-radio__color: var(--pg-form-text); --hsf-field-radio__background-color: var(--pg-form-input); --hsf-field-radio__border-color: var(--pg-form-border); } [data-pg-form-theme="dark"], .pg-hubspot-form--dark { --pg-form-text: var(--pg-color-surface, #FFFFFF); --pg-form-muted: var(--pg-color-muted, #BCBEC0); --pg-form-input: var(--pg-color-ink, #0A0A0A); --pg-form-border: var(--pg-color-gray, #53565A); color-scheme: dark; } [data-pg-form-theme="light"], .pg-hubspot-form--light { --pg-form-text: var(--pg-color-ink, #0A0A0A); --pg-form-muted: var(--pg-color-gray, #53565A); --pg-form-input: var(--pg-color-surface, #FFFFFF); --pg-form-border: var(--pg-color-gray, #53565A); color-scheme: light; } .pg-hubspot-form { width: 100%; min-width: 0; background-color: var(--pg-form-input); color: var(--pg-form-text); font-family: var(--pg-font-family, Roboto, Arial, sans-serif); } .pg-hubspot-form *, .pg-hubspot-form *::before, .pg-hubspot-form *::after { box-sizing: border-box; } body.pg-hubspot-form { margin: 0; padding: 0; height: auto; min-height: 0; background: transparent; } .pg-hubspot-form .hs-form { margin: 0; max-width: 100%; font-family: inherit !important; } .pg-hubspot-form fieldset { max-width: 100% !important; width: 100% !important; min-width: 0; padding: 0; border: 0; margin: 0 !important; } .pg-hubspot-form fieldset:is(.form-columns-2, .form-columns-3) { display: flex; flex-wrap: wrap; column-gap: 20px; } .pg-hubspot-form fieldset.form-columns-2 > .hs-form-field { float: none !important; flex: 1 1 calc(50% - 10px); width: calc(50% - 10px) !important; min-width: 0; } .pg-hubspot-form fieldset.form-columns-3 > .hs-form-field { float: none !important; flex: 1 1 calc(33.333% - 14px); width: calc(33.333% - 14px) !important; min-width: 0; } .pg-hubspot-form .hs-dependent-field { width: 100%; } .pg-hubspot-form .hs-form-field { margin: 0 0 20px !important; } .pg-hubspot-form .hs-form-field > label { display: block; margin: 0 0 8px !important; color: var(--pg-form-text) !important; font-family: inherit !important; font-size: 14px !important; font-weight: 500 !important; line-height: 1.5 !important; text-transform: none !important; letter-spacing: normal !important; } .pg-hubspot-form .hs-form-required { color: var(--pg-orange, #FF5F00) !important; margin-left: 3px; } .pg-hubspot-form .input { margin-right: 0 !important; min-width: 0; } .pg-hubspot-form :is(input.hs-input, select.hs-input, textarea.hs-input):not(:where([type="checkbox"], [type="radio"], [type="hidden"], [type="file"])) { display: block; width: 100% !important; max-width: 100% !important; min-height: 48px !important; padding: 12px 14px !important; margin: 0 !important; border: 1px solid var(--pg-form-border) !important; border-radius: 6px !important; background: var(--pg-form-input) !important; color: var(--pg-form-text) !important; font-family: inherit !important; font-size: 16px !important; font-weight: 400; line-height: 1.5 !important; box-shadow: none !important; } .pg-hubspot-form textarea.hs-input { min-height: 128px !important; resize: vertical; } .pg-hubspot-form select.hs-input { appearance: auto; } .pg-hubspot-form :is(input.hs-input, textarea.hs-input)::placeholder { color: var(--pg-form-muted) !important; opacity: 1; } .pg-hubspot-form :is(input.hs-input, select.hs-input, textarea.hs-input):focus { border-color: var(--pg-orange, #FF5F00) !important; outline: 2px solid var(--pg-orange, #FF5F00) !important; outline-offset: 2px; } .pg-hubspot-form :is(input.hs-input, select.hs-input, textarea.hs-input).invalid, .pg-hubspot-form [aria-invalid="true"] { border-color: var(--pg-orange, #FF5F00) !important; } .pg-hubspot-form :is(input[type="checkbox"], input[type="radio"]).hs-input { flex: 0 0 18px; width: 18px !important; height: 18px !important; min-height: 18px !important; padding: 0 !important; margin: 3px 0 0 !important; accent-color: var(--pg-orange, #FF5F00); } .pg-hubspot-form .inputs-list { padding: 0 !important; margin: 0 !important; list-style: none; } .pg-hubspot-form .inputs-list li { padding: 0; margin: 0 0 10px; list-style: none; } .pg-hubspot-form :is(.hs-form-checkbox-display, .hs-form-radio-display, .hs-form-booleancheckbox-display) { display: flex !important; align-items: flex-start !important; gap: 10px; margin: 0 !important; color: var(--pg-form-text) !important; font-size: 14px !important; font-weight: 400 !important; line-height: 1.6 !important; } .pg-hubspot-form :is(.hs-form-checkbox-display, .hs-form-radio-display, .hs-form-booleancheckbox-display) > span { margin: 0 !important; } .pg-hubspot-form :is(.hs-field-desc, .hs-form-field .description) { margin: 6px 0 8px !important; color: var(--pg-form-muted) !important; font-size: 14px !important; line-height: 1.6 !important; } .pg-hubspot-form :is(.legal-consent-container, .hs-richtext, .hs-richtext p, .legal-consent-container p, .legal-consent-container span) { color: var(--pg-form-text) !important; font-size: 14px !important; line-height: 1.6 !important; } .pg-hubspot-form .hs-richtext { margin: 0 0 20px; } .pg-hubspot-form :is(.hs-richtext, .legal-consent-container) :is(h1,h2,h3,h4) { color: var(--pg-form-text) !important; font-size: 24px !important; line-height: 1.3 !important; margin: 0 0 16px; } .pg-hubspot-form a { color: var(--pg-orange, #FF5F00) !important; text-decoration: underline !important; text-underline-offset: 3px; overflow-wrap: anywhere; } .pg-hubspot-form :is(a, button, input[type="submit"]):focus-visible { outline: 2px solid var(--pg-orange, #FF5F00) !important; outline-offset: 3px; } .pg-hubspot-form :is(.hs-error-msgs, .hs_error_rollup) { padding: 0 !important; margin: 8px 0 16px !important; color: var(--pg-form-text) !important; list-style: none; } .pg-hubspot-form .hs-error-msgs li { list-style: none; } .pg-hubspot-form .hs-error-msg { display: block; margin: 0 !important; padding-left: 10px; border-left: 2px solid var(--pg-orange, #FF5F00); color: var(--pg-form-text) !important; font-size: 14px !important; font-weight: 500; line-height: 1.5 !important; } .pg-hubspot-form .hs-submit { clear: both; margin-top: 24px; } .pg-hubspot-form .hs-submit .actions { padding: 0 !important; margin: 0 !important; } .pg-hubspot-form :is(.hs-button, button[type="submit"], input[type="submit"]) { display: inline-flex; justify-content: center; align-items: center; width: auto !important; max-width: 100%; min-height: 44px; padding: 10px 36px !important; border: 2px solid var(--pg-orange, #FF5F00) !important; border-radius: 25px !important; background: var(--pg-orange, #FF5F00) !important; color: var(--pg-color-ink, #0A0A0A) !important; font-family: inherit !important; font-size: 14px !important; font-weight: 500 !important; line-height: 1.4 !important; text-align: center; text-transform: uppercase; white-space: normal; letter-spacing: normal !important; transform: none !important; box-shadow: none !important; cursor: pointer; } .pg-hubspot-form :is(.hs-button, button[type="submit"], input[type="submit"]):hover { border-color: var(--pg-orange, #FF5F00) !important; background: var(--pg-orange, #FF5F00) !important; color: var(--pg-color-ink, #0A0A0A) !important; } .pg-hubspot-form :is(.hs-button, button[type="submit"], input[type="submit"]):disabled { opacity: .6; cursor: wait; } .pg-hubspot-form input[type="file"] { width: 100%; max-width: 100%; color: var(--pg-form-text); font-size: 16px; } .pg-hubspot-form .submitted-message { position: static !important; width: 100%; margin: 0 !important; padding: 24px !important; border: 1px solid var(--pg-orange, #FF5F00) !important; border-radius: 8px !important; color: var(--pg-form-text) !important; font-size: 16px !important; line-height: 1.6 !important; text-align: left !important; } .pg-hubspot-form .submitted-message :is(p,span) { color: inherit !important; font-family: inherit !important; font-size: 16px !important; line-height: 1.6 !important; } .hsfc-Form :is(input, select, textarea) { font-size: 16px !important; } .hsfc-Form :is(label, .hsfc-Button) { font-size: 14px !important; } .pg-hubspot-form .hsfc-Form { font-family: inherit; } .pg-hubspot-form .hsfc-Form .hsfc-FieldLabel { font-size: 14px !important; font-weight: 500; line-height: 1.5; } .pg-hubspot-form .hsfc-Form :is(input,select,textarea):focus { border-color: var(--pg-orange, #FF5F00); outline: 2px solid var(--pg-orange, #FF5F00); outline-offset: 2px; } .pg-hubspot-form .hsfc-Form .hsfc-Button { min-height: 44px; padding: 10px 36px; border: 2px solid var(--pg-orange, #FF5F00); border-radius: 25px; background: var(--pg-orange, #FF5F00); color: var(--pg-color-ink, #0A0A0A); font-size: 14px !important; font-weight: 500; line-height: 1.4; text-transform: uppercase; box-shadow: none; } .pg-hubspot-form .hsfc-Form .hsfc-Button:hover { border-color: var(--pg-orange, #FF5F00); background: var(--pg-orange, #FF5F00); color: var(--pg-color-ink, #0A0A0A); } .pg-hubspot-form .hsfc-Form .hsfc-Button:focus-visible { outline: 2px solid var(--pg-orange, #FF5F00); outline-offset: 3px; } .pg-hubspot-form .hsfc-Form .hsfc-Button:disabled { opacity: .6; cursor: default; } .pg-hubspot-form .hsfc-NavigationRow__Buttons > .hsfc-Button:first-child:not(:last-child) { background: transparent; color: var(--pg-form-text); } .pg-hubspot-form .hsfc-NavigationRow__Buttons > .hsfc-Button:first-child:not(:last-child):hover { background: var(--pg-orange, #FF5F00); color: var(--pg-color-ink, #0A0A0A); } @media (max-width: 600px) { .pg-hubspot-form fieldset:is(.form-columns-2, .form-columns-3) > .hs-form-field { flex-basis: 100%; width: 100% !important; } .pg-hubspot-form :is(.hs-button, button[type="submit"], input[type="submit"]) { width: 100% !important; } }