@charset "UTF-8";
/* -------------------------------------------
 *  Autogenerated by ⛋ Terrazzo. DO NOT EDIT!
 * ------------------------------------------- */
:root {
  /* Buttons and other elements nested inside controls. */
  --wpds-border-radius-xs: 1px;
  /* Standalone buttons, inputs, and compact controls. */
  --wpds-border-radius-sm: 2px;
  /* Menus, popovers, and other small portaled overlays. */
  --wpds-border-radius-md: 4px;
  /* Cards, dialogs, notices, and other larger content containers. */
  --wpds-border-radius-lg: 8px;
  /* Page and app shell surfaces. */
  --wpds-border-radius-xl: 12px;
  /* Extra small width */
  --wpds-border-width-xs: 1px;
  /* Small width */
  --wpds-border-width-sm: 2px;
  /* Medium width */
  --wpds-border-width-md: 4px;
  /* Large width */
  --wpds-border-width-lg: 8px;
  /* Border width for focus ring */
  --wpds-border-width-focus: 2px;
  /* Background color for surfaces with normal emphasis. */
  --wpds-color-background-surface-neutral: #fcfcfc;
  /* Background color for surfaces with strong emphasis. */
  --wpds-color-background-surface-neutral-strong: #fff;
  /* Background color for surfaces with weak emphasis. */
  --wpds-color-background-surface-neutral-weak: #f4f4f4;
  /* Background color for surfaces with brand tone and normal emphasis. */
  --wpds-color-background-surface-brand: #ecf0fa;
  /* Background color for surfaces with success tone and normal emphasis. */
  --wpds-color-background-surface-success: #c6f7cd;
  /* Background color for surfaces with success tone and weak emphasis. */
  --wpds-color-background-surface-success-weak: #ebffed;
  /* Background color for surfaces with info tone and normal emphasis. */
  --wpds-color-background-surface-info: #deebfa;
  /* Background color for surfaces with info tone and weak emphasis. */
  --wpds-color-background-surface-info-weak: #f3f9ff;
  /* Background color for surfaces with warning tone and normal emphasis. */
  --wpds-color-background-surface-warning: #fde6be;
  /* Background color for surfaces with warning tone and weak emphasis. */
  --wpds-color-background-surface-warning-weak: #fff7e1;
  /* Background color for surfaces with caution tone and normal emphasis. */
  --wpds-color-background-surface-caution: #fee995;
  /* Background color for surfaces with caution tone and weak emphasis. */
  --wpds-color-background-surface-caution-weak: #fff9ca;
  /* Background color for surfaces with error tone and normal emphasis. */
  --wpds-color-background-surface-error: #f6e6e3;
  /* Background color for surfaces with error tone and weak emphasis. */
  --wpds-color-background-surface-error-weak: #fff6f5;
  /* Background color for interactive elements with neutral tone and strong emphasis. */
  --wpds-color-background-interactive-neutral-strong: #2d2d2d;
  /* Background color for interactive elements with neutral tone and strong emphasis that are hovered, focused, or active. */
  --wpds-color-background-interactive-neutral-strong-active: #1e1e1e;
  /* Background color for interactive elements with neutral tone and strong emphasis, in their disabled state. */
  --wpds-color-background-interactive-neutral-strong-disabled: #e6e6e6;
  /* Background color for interactive elements with neutral tone and weak emphasis. */
  --wpds-color-background-interactive-neutral-weak: #0000;
  /* Background color for interactive elements with neutral tone and weak emphasis that are hovered, focused, or active. */
  --wpds-color-background-interactive-neutral-weak-active: #ededed;
  /* Background color for interactive elements with neutral tone and weak emphasis, in their disabled state. */
  --wpds-color-background-interactive-neutral-weak-disabled: #0000;
  /* Background color for interactive elements with brand tone and strong emphasis. */
  --wpds-color-background-interactive-brand-strong: #3858e9;
  /* Background color for interactive elements with brand tone and strong emphasis that are hovered, focused, or active. */
  --wpds-color-background-interactive-brand-strong-active: #2e49d9;
  /* Background color for interactive elements with brand tone and strong emphasis, in their disabled state. */
  --wpds-color-background-interactive-brand-strong-disabled: #e6e6e6;
  /* Background color for interactive elements with brand tone and weak emphasis. */
  --wpds-color-background-interactive-brand-weak: #0000;
  /* Background color for interactive elements with brand tone and weak emphasis that are hovered, focused, or active. */
  --wpds-color-background-interactive-brand-weak-active: #e6eaf4;
  /* Background color for interactive elements with brand tone and weak emphasis, in their disabled state. */
  --wpds-color-background-interactive-brand-weak-disabled: #0000;
  /* Background color for interactive elements with error tone and normal emphasis. */
  --wpds-color-background-interactive-error: #0000;
  /* Background color for interactive elements with error tone and normal emphasis that are hovered, focused, or active. */
  --wpds-color-background-interactive-error-active: #fff6f5;
  /* Background color for interactive elements with error tone and normal emphasis, in their disabled state. */
  --wpds-color-background-interactive-error-disabled: #0000;
  /* Background color for interactive elements with error tone and strong emphasis. */
  --wpds-color-background-interactive-error-strong: #cc1818;
  /* Background color for interactive elements with error tone and strong emphasis that are hovered, focused, or active. */
  --wpds-color-background-interactive-error-strong-active: #b90000;
  /* Background color for interactive elements with error tone and strong emphasis, in their disabled state. */
  --wpds-color-background-interactive-error-strong-disabled: #e6e6e6;
  /* Background color for interactive elements with error tone and weak emphasis. */
  --wpds-color-background-interactive-error-weak: #0000;
  /* Background color for interactive elements with error tone and weak emphasis that are hovered, focused, or active. */
  --wpds-color-background-interactive-error-weak-active: #f6e6e3;
  /* Background color for interactive elements with error tone and weak emphasis, in their disabled state. */
  --wpds-color-background-interactive-error-weak-disabled: #0000;
  /* Background color for tracks with a neutral tone and weak emphasis (eg. scrollbar track). */
  --wpds-color-background-track-neutral-weak: #f0f0f0;
  /* Background color for tracks with a neutral tone and normal emphasis (eg. slider or progressbar track). */
  --wpds-color-background-track-neutral: #dbdbdb;
  /* Background color for thumbs with a neutral tone and weak emphasis (eg. scrollbar thumb). */
  --wpds-color-background-thumb-neutral-weak: #8d8d8d;
  /* Background color for thumbs with a neutral tone and weak emphasis (eg. scrollbar thumb) that are hovered, focused, or active. */
  --wpds-color-background-thumb-neutral-weak-active: #6e6e6e;
  /* Background color for thumbs with a brand tone and normal emphasis (eg. slider thumb and filled track). */
  --wpds-color-background-thumb-brand: #3858e9;
  /* Background color for thumbs with a brand tone and normal emphasis (eg. slider thumb and filled track) that are hovered, focused, or active. */
  --wpds-color-background-thumb-brand-active: #3858e9;
  /* Background color for thumbs with a brand tone and normal emphasis (eg. slider thumb and filled track), in their disabled state. */
  --wpds-color-background-thumb-brand-disabled: #dbdbdb;
  /* Background color for thumbs with a neutral tone and weak emphasis (eg. scrollbar thumb), in their disabled state. */
  --wpds-color-background-thumb-neutral-weak-disabled: #dbdbdb;
  /* Foreground color for content like text with normal emphasis. */
  --wpds-color-foreground-content-neutral: #1e1e1e;
  /* Foreground color for content like text with weak emphasis. */
  --wpds-color-foreground-content-neutral-weak: #707070;
  /* Foreground color for content like text with success tone and normal emphasis. */
  --wpds-color-foreground-content-success: #002900;
  /* Foreground color for content like text with success tone and weak emphasis. */
  --wpds-color-foreground-content-success-weak: #008030;
  /* Foreground color for content like text with info tone and normal emphasis. */
  --wpds-color-foreground-content-info: #001b4f;
  /* Foreground color for content like text with info tone and weak emphasis. */
  --wpds-color-foreground-content-info-weak: #006bd7;
  /* Foreground color for content like text with warning tone and normal emphasis. */
  --wpds-color-foreground-content-warning: #2e1900;
  /* Foreground color for content like text with warning tone and weak emphasis. */
  --wpds-color-foreground-content-warning-weak: #926300;
  /* Foreground color for content like text with caution tone and normal emphasis. */
  --wpds-color-foreground-content-caution: #281d00;
  /* Foreground color for content like text with caution tone and weak emphasis. */
  --wpds-color-foreground-content-caution-weak: #826a00;
  /* Foreground color for content like text with error tone and normal emphasis. */
  --wpds-color-foreground-content-error: #470000;
  /* Foreground color for content like text with error tone and weak emphasis. */
  --wpds-color-foreground-content-error-weak: #cc1818;
  /* Foreground color for interactive elements with neutral tone and normal emphasis. */
  --wpds-color-foreground-interactive-neutral: #1e1e1e;
  /* Foreground color for interactive elements with neutral tone and normal emphasis that are hovered, focused, or active. */
  --wpds-color-foreground-interactive-neutral-active: #1e1e1e;
  /* Foreground color for interactive elements with neutral tone and normal emphasis, in their disabled state. */
  --wpds-color-foreground-interactive-neutral-disabled: #8d8d8d;
  /* Foreground color for interactive elements with neutral tone and strong emphasis. */
  --wpds-color-foreground-interactive-neutral-strong: #f0f0f0;
  /* Foreground color for interactive elements with neutral tone and strong emphasis that are hovered, focused, or active. */
  --wpds-color-foreground-interactive-neutral-strong-active: #f0f0f0;
  /* Foreground color for interactive elements with neutral tone and strong emphasis, in their disabled state. */
  --wpds-color-foreground-interactive-neutral-strong-disabled: #8d8d8d;
  /* Foreground color for interactive elements with neutral tone and weak emphasis. */
  --wpds-color-foreground-interactive-neutral-weak: #707070;
  /* Foreground color for interactive elements with neutral tone and weak emphasis that are hovered, focused, or active. */
  --wpds-color-foreground-interactive-neutral-weak-active: #1e1e1e;
  /* Foreground color for interactive elements with neutral tone and weak emphasis, in their disabled state. */
  --wpds-color-foreground-interactive-neutral-weak-disabled: #8d8d8d;
  /* Foreground color for interactive elements with brand tone and normal emphasis. */
  --wpds-color-foreground-interactive-brand: #3858e9;
  /* Foreground color for interactive elements with brand tone and normal emphasis that are hovered, focused, or active. */
  --wpds-color-foreground-interactive-brand-active: #0b0070;
  /* Foreground color for interactive elements with brand tone and normal emphasis, in their disabled state. */
  --wpds-color-foreground-interactive-brand-disabled: #8d8d8d;
  /* Foreground color for interactive elements with brand tone and strong emphasis. */
  --wpds-color-foreground-interactive-brand-strong: #eff0f2;
  /* Foreground color for interactive elements with brand tone and strong emphasis that are hovered, focused, or active. */
  --wpds-color-foreground-interactive-brand-strong-active: #eff0f2;
  /* Foreground color for interactive elements with brand tone and strong emphasis, in their disabled state. */
  --wpds-color-foreground-interactive-brand-strong-disabled: #8d8d8d;
  /* Foreground color for interactive elements with error tone and normal emphasis. */
  --wpds-color-foreground-interactive-error: #cc1818;
  /* Foreground color for interactive elements with error tone and normal emphasis that are hovered, focused, or active. */
  --wpds-color-foreground-interactive-error-active: #470000;
  /* Foreground color for interactive elements with error tone and normal emphasis, in their disabled state. */
  --wpds-color-foreground-interactive-error-disabled: #8d8d8d;
  /* Foreground color for interactive elements with error tone and strong emphasis. */
  --wpds-color-foreground-interactive-error-strong: #f2efef;
  /* Foreground color for interactive elements with error tone and strong emphasis that are hovered, focused, or active. */
  --wpds-color-foreground-interactive-error-strong-active: #f2efef;
  /* Foreground color for interactive elements with error tone and strong emphasis, in their disabled state. */
  --wpds-color-foreground-interactive-error-strong-disabled: #8d8d8d;
  /* Decorative stroke color used to define neutrally-toned surface boundaries with normal emphasis. */
  --wpds-color-stroke-surface-neutral: #dbdbdb;
  /* Decorative stroke color used to define neutrally-toned surface boundaries with weak emphasis. */
  --wpds-color-stroke-surface-neutral-weak: #f0f0f0;
  /* Decorative stroke color used to define neutrally-toned surface boundaries with strong emphasis. */
  --wpds-color-stroke-surface-neutral-strong: #8d8d8d;
  /* Decorative stroke color used to define brand-toned surface boundaries with normal emphasis. */
  --wpds-color-stroke-surface-brand: #b0bbd6;
  /* Decorative stroke color used to define brand-toned surface boundaries with strong emphasis. */
  --wpds-color-stroke-surface-brand-strong: #3858e9;
  /* Decorative stroke color used to define success-toned surface boundaries with normal emphasis. */
  --wpds-color-stroke-surface-success: #94d29e;
  /* Decorative stroke color used to define success-toned surface boundaries with strong emphasis. */
  --wpds-color-stroke-surface-success-strong: #008030;
  /* Decorative stroke color used to define info-toned surface boundaries with normal emphasis. */
  --wpds-color-stroke-surface-info: #a9c6e7;
  /* Decorative stroke color used to define info-toned surface boundaries with strong emphasis. */
  --wpds-color-stroke-surface-info-strong: #006bd7;
  /* Decorative stroke color used to define warning-toned surface boundaries with normal emphasis. */
  --wpds-color-stroke-surface-warning: #e1bc7c;
  /* Decorative stroke color used to define warning-toned surface boundaries with strong emphasis. */
  --wpds-color-stroke-surface-warning-strong: #926300;
  /* Decorative stroke color used to define caution-toned surface boundaries with normal emphasis. */
  --wpds-color-stroke-surface-caution: #cfc28d;
  /* Decorative stroke color used to define caution-toned surface boundaries with strong emphasis. */
  --wpds-color-stroke-surface-caution-strong: #826a00;
  /* Decorative stroke color used to define error-toned surface boundaries with normal emphasis. */
  --wpds-color-stroke-surface-error: #dab1aa;
  /* Decorative stroke color used to define error-toned surface boundaries with strong emphasis. */
  --wpds-color-stroke-surface-error-strong: #cc1818;
  /* Accessible stroke color used for interactive neutrally-toned elements with normal emphasis. */
  --wpds-color-stroke-interactive-neutral: #8d8d8d;
  /* Accessible stroke color used for interactive neutrally-toned elements with normal emphasis that are hovered, focused, or active. */
  --wpds-color-stroke-interactive-neutral-active: #6e6e6e;
  /* Accessible stroke color used for interactive neutrally-toned elements with normal emphasis, in their disabled state. */
  --wpds-color-stroke-interactive-neutral-disabled: #dbdbdb;
  /* Accessible stroke color used for interactive neutrally-toned elements with strong emphasis. */
  --wpds-color-stroke-interactive-neutral-strong: #6e6e6e;
  /* Accessible stroke color used for interactive brand-toned elements with normal emphasis. */
  --wpds-color-stroke-interactive-brand: #3858e9;
  /* Accessible stroke color used for interactive brand-toned elements with normal emphasis that are hovered, focused, or active. */
  --wpds-color-stroke-interactive-brand-active: #2337c8;
  /* Accessible stroke color used for interactive brand-toned elements with normal emphasis, in their disabled state. */
  --wpds-color-stroke-interactive-brand-disabled: #dbdbdb;
  /* Accessible stroke color used for interactive error-toned elements with normal emphasis. */
  --wpds-color-stroke-interactive-error: #cc1818;
  /* Accessible stroke color used for interactive error-toned elements with normal emphasis that are hovered, focused, or active. */
  --wpds-color-stroke-interactive-error-active: #9d0000;
  /* Accessible stroke color used for interactive error-toned elements with normal emphasis, in their disabled state. */
  --wpds-color-stroke-interactive-error-disabled: #dbdbdb;
  /* Accessible stroke color used for interactive error-toned elements with strong emphasis. */
  --wpds-color-stroke-interactive-error-strong: #cc1818;
  /* Accessible stroke color applied to focus rings. */
  --wpds-color-stroke-focus: #3858e9;
  /* Cursor style for interactive controls that are not links (e.g. buttons, checkboxes, and toggles). */
  --wpds-cursor-control: pointer;
  /* Extra small padding */
  --wpds-dimension-padding-xs: 4px;
  /* Small padding */
  --wpds-dimension-padding-sm: 8px;
  /* Medium padding */
  --wpds-dimension-padding-md: 12px;
  /* Large padding */
  --wpds-dimension-padding-lg: 16px;
  /* Extra large padding */
  --wpds-dimension-padding-xl: 20px;
  /* 2x extra large padding */
  --wpds-dimension-padding-2xl: 24px;
  /* 3x extra large padding */
  --wpds-dimension-padding-3xl: 32px;
  /* Extra small gap */
  --wpds-dimension-gap-xs: 4px;
  /* Small gap */
  --wpds-dimension-gap-sm: 8px;
  /* Medium gap */
  --wpds-dimension-gap-md: 12px;
  /* Large gap */
  --wpds-dimension-gap-lg: 16px;
  /* Extra large gap */
  --wpds-dimension-gap-xl: 24px;
  /* 2x extra large gap */
  --wpds-dimension-gap-2xl: 32px;
  /* 3x extra large gap */
  --wpds-dimension-gap-3xl: 40px;
  /* Notification indicators */
  --wpds-dimension-size-5xs: 4px;
  /* Visual size for small interactive elements like resize handles */
  --wpds-dimension-size-4xs: 8px;
  /* Small markers */
  --wpds-dimension-size-3xs: 12px;
  /* For small controls like checkboxes and radios, or small decorative icons */
  --wpds-dimension-size-2xs: 16px;
  /* For medium sized icons */
  --wpds-dimension-size-xs: 20px;
  /* For icons and small buttons */
  --wpds-dimension-size-sm: 24px;
  /* For medium-sized buttons and inputs */
  --wpds-dimension-size-md: 32px;
  /* Default size for buttons and inputs */
  --wpds-dimension-size-lg: 40px;
  /* Extra small surface width */
  --wpds-dimension-surface-width-xs: 240px;
  /* Small surface width */
  --wpds-dimension-surface-width-sm: 320px;
  /* Medium surface width */
  --wpds-dimension-surface-width-md: 400px;
  /* Large surface width */
  --wpds-dimension-surface-width-lg: 560px;
  /* Extra large surface width */
  --wpds-dimension-surface-width-xl: 720px;
  /* 2x extra large surface width */
  --wpds-dimension-surface-width-2xl: 960px;
  /* Micro-delays and transition offsets */
  --wpds-motion-duration-xs: 50ms;
  /* Micro-interactions like focus rings and state changes */
  --wpds-motion-duration-sm: 100ms;
  /* Standard transitions like menus and popovers */
  --wpds-motion-duration-md: 200ms;
  /* Deliberate animations like slides and reveals */
  --wpds-motion-duration-lg: 300ms;
  /* Extended animations like complex or multi-step transitions */
  --wpds-motion-duration-xl: 400ms;
  /* Nearly imperceptible easing for hover, color, and background transitions */
  --wpds-motion-easing-subtle: cubic-bezier( 0.15, 0, 0.15, 1 );
  /* General-purpose easing for on-screen movement like resizing, morphing, and layout shifts */
  --wpds-motion-easing-balanced: cubic-bezier( 0.4, 0, 0.2, 1 );
  /* Noticeable easing for enter/exit and spatial transitions like menus, popovers, dialogs, and drawers */
  --wpds-motion-easing-expressive: cubic-bezier( 0.25, 0, 0, 1 );
  /* Headings font family */
  --wpds-typography-font-family-heading: -apple-system, system-ui, 'Segoe UI',
  	'Roboto', 'Oxygen-Sans', 'Ubuntu', 'Cantarell', 'Helvetica Neue',
  	sans-serif;
  /* Body font family */
  --wpds-typography-font-family-body: -apple-system, system-ui, 'Segoe UI',
  	'Roboto', 'Oxygen-Sans', 'Ubuntu', 'Cantarell', 'Helvetica Neue',
  	sans-serif;
  /* Monospace font family */
  --wpds-typography-font-family-mono: 'Menlo', 'Consolas', monaco, monospace;
  /* Extra small font size */
  --wpds-typography-font-size-xs: 11px;
  /* Small font size */
  --wpds-typography-font-size-sm: 12px;
  /* Medium font size */
  --wpds-typography-font-size-md: 13px;
  /* Large font size */
  --wpds-typography-font-size-lg: 15px;
  /* Extra large font size */
  --wpds-typography-font-size-xl: 20px;
  /* 2X large font size */
  --wpds-typography-font-size-2xl: 32px;
  /* Extra small line height */
  --wpds-typography-line-height-xs: 16px;
  /* Small line height */
  --wpds-typography-line-height-sm: 20px;
  /* Medium line height */
  --wpds-typography-line-height-md: 24px;
  /* Large line height */
  --wpds-typography-line-height-lg: 28px;
  /* Extra large line height */
  --wpds-typography-line-height-xl: 32px;
  /* 2X large line height */
  --wpds-typography-line-height-2xl: 40px;
  /* Baseline text weight for body copy and UI text */
  --wpds-typography-font-weight-default: 400;
  /* Elevated text weight for labels, controls, and headings */
  --wpds-typography-font-weight-emphasis: 600;
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  :root {
    /* Border width for focus ring */
    --wpds-border-width-focus: 1.5px;
  }
}
[data-wpds-corner-radius=none],
:root:has([data-wpds-root-provider=true][data-wpds-corner-radius=none]) {
  /* Buttons and other elements nested inside controls. */
  --wpds-border-radius-xs: 0px;
  /* Standalone buttons, inputs, and compact controls. */
  --wpds-border-radius-sm: 0px;
  /* Menus, popovers, and other small portaled overlays. */
  --wpds-border-radius-md: 0px;
  /* Cards, dialogs, notices, and other larger content containers. */
  --wpds-border-radius-lg: 0px;
  /* Page and app shell surfaces. */
  --wpds-border-radius-xl: 0px;
}

[data-wpds-corner-radius=subtle],
:root:has([data-wpds-root-provider=true][data-wpds-corner-radius=subtle]) {
  /* Buttons and other elements nested inside controls. */
  --wpds-border-radius-xs: 1px;
  /* Standalone buttons, inputs, and compact controls. */
  --wpds-border-radius-sm: 2px;
  /* Menus, popovers, and other small portaled overlays. */
  --wpds-border-radius-md: 4px;
  /* Cards, dialogs, notices, and other larger content containers. */
  --wpds-border-radius-lg: 8px;
  /* Page and app shell surfaces. */
  --wpds-border-radius-xl: 12px;
}

[data-wpds-corner-radius=moderate],
:root:has([data-wpds-root-provider=true][data-wpds-corner-radius=moderate]) {
  /* Buttons and other elements nested inside controls. */
  --wpds-border-radius-xs: 6px;
  /* Standalone buttons, inputs, and compact controls. */
  --wpds-border-radius-sm: 8px;
  /* Menus, popovers, and other small portaled overlays. */
  --wpds-border-radius-md: 12px;
  /* Cards, dialogs, notices, and other larger content containers. */
  --wpds-border-radius-lg: 16px;
  /* Page and app shell surfaces. */
  --wpds-border-radius-xl: 20px;
}

[data-wpds-corner-radius=pronounced],
:root:has([data-wpds-root-provider=true][data-wpds-corner-radius=pronounced]) {
  /* Buttons and other elements nested inside controls. */
  --wpds-border-radius-xs: 18px;
  /* Standalone buttons, inputs, and compact controls. */
  --wpds-border-radius-sm: 20px;
  /* Menus, popovers, and other small portaled overlays. */
  --wpds-border-radius-md: 22px;
  /* Cards, dialogs, notices, and other larger content containers. */
  --wpds-border-radius-lg: 24px;
  /* Page and app shell surfaces. */
  --wpds-border-radius-xl: 26px;
}
/* stylelint-disable no-duplicate-selectors
-- Disabled due to copied styles from Bootstrap. */
/*
 * WordPress Design System tokens. `@use` this from any stylesheet that needs
 * `--wpds-*` custom properties.
 *
 * A CSS `@import` rather than `@use` because the package specifier resolves
 * through @wordpress/theme's exports map, which css-loader honours and Sass
 * does not; Sass passes the .css import through and css-loader inlines it.
 */
/* Copied from Bootstrap 3.4.1 and distilled */
* {
  box-sizing: border-box;
}

body {
  font-size: 14px;
  line-height: 1.42857143;
}

hr {
  margin-bottom: 20px;
  border: 0;
  border-top: 1px solid #eee;
}

label {
  display: inline-block;
  margin-bottom: 5px;
  font-weight: 700;
}

button,
input,
optgroup,
select {
  font: inherit;
}

input[type=checkbox],
input[type=radio] {
  margin: 4px 0 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  line-height: 1.1;
}

a {
  text-decoration: none;
}

img {
  vertical-align: middle;
}

.container {
  padding-left: 15px;
  padding-right: 15px;
}

.row {
  margin-left: -15px;
  margin-right: -15px;
}

.row::after {
  clear: both;
  display: table;
  content: " ";
}

.col-md-12,
.col-xs-12 {
  padding-left: 15px;
  padding-right: 15px;
}

.lead {
  font-weight: 300;
}

.text-center {
  text-align: center;
}

.form-control {
  padding: 6px 12px;
  color: #555;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
}

.btn {
  display: inline-block;
  cursor: pointer;
  border: 1px solid transparent;
  padding: 6px 12px;
}

.btn-lg {
  padding: 10px 16px;
  font-size: 18px;
  line-height: 1.3333333;
  border-radius: 6px;
}

.btn-success {
  background-color: #5cb85c;
  border-color: #4cae4c;
}

.pull-right {
  float: left !important;
}

/* End copy from Bootstrap */
html {
  background: #e5e5e5;
}

body {
  margin: 60px auto 24px;
  box-shadow: none;
  background: #e5e5e5;
  padding: 0;
}

.stepwizard-step p {
  margin-top: 10px;
}

.stepwizard-row {
  display: table-row;
}

.btn-jetpack {
  background: #069e08;
  color: #fff;
}
.btn-jetpack:hover {
  color: #fff;
}
.btn-jetpack {
  font-size: 16px;
}

.stepwizard {
  display: table;
  width: 100%;
  position: relative;
}

.stepwizard-step button[disabled] {
  opacity: 1 !important;
  filter: alpha(opacity=100) !important;
}

.stepwizard-row::before {
  top: 14px;
  bottom: 0;
  position: absolute;
  content: " ";
  width: 100%;
  height: 1px;
  background-color: #ccc;
  z-index: 0;
}

.stepwizard-step {
  display: table-cell;
  text-align: center;
  position: relative;
  width: 25%;
}

.btn-circle {
  width: 30px;
  height: 30px;
  text-align: center;
  padding: 6px 0;
  font-size: 12px;
  line-height: 1.428571429;
  border-radius: 15px;
}

.stepwizard-step .btn-default {
  color: #069e08 !important;
  border-color: #069e08;
  background: #fff;
  opacity: 1;
}

.stepwizard-step .btn-primary {
  color: #fff !important;
  background: #069e08 !important;
  border-color: #069e08;
}

.form-control:focus {
  border-color: #069e08;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px #2780e3;
}

.hide {
  display: none;
}

.btn-primary {
  color: #fff;
  background-color: #069e08;
  border-color: #069e08;
}

.btn-primary:hover {
  color: #fff;
  background-color: #007017;
  border-color: #007017;
}

#zbscrm-logo {
  margin-top: -50px;
}

#zbs_other_details {
  display: none;
  height: 150px;
  margin-bottom: 20px;
}

.setup-content textarea {
  width: 90%;
}

input[type=checkbox],
input[type=radio] {
  width: 20px;
}

.clear {
  clear: both;
}

.pos-rel {
  position: relative;
}

#crm-name {
  position: absolute;
  top: 7px;
  right: 30px;
  color: #fff;
}

/* Layout */
.ck_form.ck_minimal {
  /* divider image */
  background: #f9f9f9;
  font-family: "Helvetica Neue", Helvetica, Arial, Verdana, sans-serif;
  line-height: 1.5;
  overflow: hidden;
  color: #666;
  font-size: 16px;
  border: solid 1px #d1d1d1;
  box-shadow: none;
  clear: both;
  margin: 20px 0;
  text-align: center;
}

.ck_form.ck_minimal h3.ck_form_title {
  text-align: center;
  margin: 0 0 10px;
  font-size: 28px;
}

.ck_form.ck_minimal h4 {
  text-align: center;
  font-family: "Open Sans", Helvetica, Arial, sans-serif;
  text-transform: uppercase;
  font-size: 18px;
  font-weight: 400;
  padding-top: 0;
  margin-top: 0;
}

.ck_form.ck_minimal p {
  padding: 0;
}

.ck_form,
.ck_form * {
  box-sizing: border-box;
}

.ck_form.ck_minimal .ck_form_fields {
  width: 100%;
  float: right;
  padding: 5%;
}

/* Form fields */
.ck_errorArea {
  display: none; /* temporary */
}

#ck_success_msg {
  padding: 10px 10px 0;
  border: solid 1px #ddd;
  background: #eee;
}

.ck_form.ck_minimal input[type=text],
.ck_form.ck_minimal input[type=email] {
  font-size: 18px;
  padding: 10px 8px;
  width: 68%;
  border: 1px solid #d6d6d6; /* stroke */
  border-radius: 3px; /* border radius */
  background-color: #fff; /* layer fill content */
  float: right;
  margin: 0;
  margin-left: 2%;
  height: 42px;
}

.ck_form input[type=text]:focus,
.ck_form input[type=email]:focus {
  outline: none;
  border-color: #aaa;
}

.ck_form.ck_minimal .ck_subscribe_button {
  color: #fff;
  margin: 0;
  padding: 11px 0;
  font-size: 18px;
  background: #069e08;
  border-radius: 3px; /* border radius */
  cursor: pointer;
  border: none;
  text-shadow: none;
  width: 30%;
  float: right;
  height: 42px;
}

.ck_form.ck_minimal .ck_guarantee {
  color: #626262;
  font-size: 12px;
  text-align: center;
  padding: 15px 0 0;
  display: block;
  clear: both;
}

.ck_form .ck_powered_by {
  display: block;
  color: #aaa;
  font-size: 12px;
}

.ck_form .ck_powered_by:hover {
  display: block;
  color: #444;
}

.ck_converted_content {
  display: none;
  padding: 5%;
  background: #fff;
}

.ck_form.ck_minimal.width400 .ck_subscribe_button,
.ck_form.ck_minimal.width400 input[type=email] {
  width: 100%;
  float: none;
  margin-top: 5px;
}

.ck_slide_up,
.ck_modal,
.ck_slide_up .ck_minimal,
.ck_modal .ck_minimal {
  min-width: 400px;
}

.page .ck_form.ck_minimal {
  margin: 50px auto;
  max-width: 600px;
}

/* v6 */
.ck_slide_up.ck_form_v6,
.ck_modal.ck_form_v6,
.ck_slide_up.ck_form_v6 .ck_minimal,
.ck_modal.ck_form_v6 .ck_minimal {
  min-width: 0 !important;
}

@media all and (min-width: 801px) {
  .ck_modal.ck_form_v6 .ck_form.ck_minimal {
    margin-right: -300px;
    width: 600px;
  }
}
.ck_modal.ck_form_v6 .ck_minimal .ck_subscribe_form {
  padding-top: 20px;
}

.ck_slide_up.ck_form_v6 .ck_minimal .ck_subscribe_form {
  padding-top: 10px;
}

.ck_form_v6 #ck_success_msg {
  margin-top: 15px;
  padding: 0 10px;
}

.ck_slide_up.ck_form_v6 .ck_minimal + .ck_close_link {
  top: 5px;
}

.ck_slide_up.ck_form_v6 .ck_minimal h3.ck_form_title {
  margin-top: 5px;
}

/* WH OVERRIDES */
.setup-content label {
  margin-top: 8px;
  font-size: 18px;
  color: #069e08;
}

.setup-content h3 {
  font-size: 22px;
  margin-bottom: 26px;
  margin-top: 10px !important;
}

.setup-content select {
  width: auto !important;
  height: 39px !important;
  line-height: 39px !important;
  font-size: 17px !important;
}

hr {
  margin-top: 32px;
}

#demo-override-img {
  margin-bottom: 5px;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 4px;
}

h2.sbhomep {
  font-size: 22px;
  margin-top: 22px;
  margin-bottom: 26px;
  text-align: center;
}

p.sbhomep {
  text-align: center;
}

#sbSubPage {
  max-width: 100% !important;
}
#sbSubPage div img {
  width: 80% !important;
  display: block !important;
}

/* .slideThree from https://codepen.io/bbodine1/pen/novBm
  had to make most of it important tho!
*/
/* $activeColor: #c0392b; //red */
#switchBox {
  width: 140px;
  text-align: center;
  display: inline-block;
  margin-right: 120px;
  margin-left: 120px;
}
#switchBox .switchBoxLabel {
  font-size: 16px;
  color: #069e08;
}

.switchCheckbox {
  width: 80px !important;
  height: 26px !important;
  background: var(--wpds-color-background-interactive-neutral-strong) !important;
  margin: 20px auto !important;
  position: relative !important;
  border-radius: 50px !important;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.5), 0 1px 0 rgba(255, 255, 255, 0.2) !important;
  /*
   * "ON" and "OFF" both sit on the track and the knob covers whichever one does
   * not apply, so exactly one is legible at a time and the state is carried by
   * the word itself rather than by colour alone.
   *
   * Both take the foreground token paired with the track's background token,
   * which is about 12:1. "OFF" was #000 on #333, about 1.3:1; "ON" was #27ae60
   * on the same, about 3.0:1. Neither reached the 4.5:1 minimum.
   *
   * The white text-shadow that used to sit under "OFF" is gone with it: it was
   * there to lift black text off a dark track, and only muddies light text.
   */
}
.switchCheckbox::after {
  content: "OFF" !important;
  color: var(--wpds-color-foreground-interactive-neutral-strong) !important;
  position: absolute !important;
  left: 10px !important;
  z-index: 0 !important;
  font: 12px/26px Arial, sans-serif !important;
  font-weight: 700 !important;
}
.switchCheckbox::before {
  content: "ON";
  color: var(--wpds-color-foreground-interactive-neutral-strong) !important;
  position: absolute !important;
  right: 10px !important;
  z-index: 0 !important;
  font: 12px/26px Arial, sans-serif !important;
  font-weight: 700 !important;
}
.switchCheckbox {
  /*
   * The sliding knob. A span rather than a label now: the checkbox below covers
   * the whole pill and is the click target, which frees the real <label> to name
   * the control instead of being an empty box with a `for` attribute.
   */
}
.switchCheckbox .jpcrm-switch-knob {
  width: 34px;
  height: 20px;
  position: absolute;
  top: 3px;
  right: 3px;
  z-index: 1;
  background: var(--wpds-color-background-surface-neutral-strong);
  border-radius: 50px;
  transition: all 0.4s ease;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.3);
}
.switchCheckbox {
  /*
   * The checkbox itself, stretched over the whole pill. It was
   * `visibility: hidden`, which took all four toggles out of the tab order, so
   * they could not be reached or operated by keyboard at all.
   *
   * `appearance: none` with no background or border rather than `opacity: 0`:
   * a fully transparent element paints nothing, including its own focus
   * outline, so the ring below would never be seen. This way the control is
   * invisible but still paints an outline when focused.
   *
   * Covering the pill also makes the whole control clickable, where previously
   * only the 34px knob was.
   */
}
.switchCheckbox input[type=checkbox] {
  appearance: none;
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 50px;
  cursor: pointer;
  z-index: 2;
}
.switchCheckbox input[type=checkbox]:focus-visible {
  outline: var(--wpds-border-width-focus) solid var(--wpds-color-stroke-focus);
  outline-offset: 2px;
}
.switchCheckbox input[type=checkbox]:checked ~ .jpcrm-switch-knob {
  right: 43px;
}

/* end .switchCheckbox */
.switchbox-right {
  width: 20%;
  float: left;
  text-align: left;
}

/*
 * Layout for the wizard's side-by-side form rows. These were inline style
 * attributes, which no stylesheet could override. The values are unchanged, so
 * desktop renders as before; the narrow-screen block at the end of the file
 * stacks them.
 */
.jpcrm-wizard-field {
  width: 90%;
}

.jpcrm-wizard-field-col {
  width: 50%;
  float: right;
}

.jpcrm-wizard-field-input {
  width: 90%;
}

.jpcrm-wizard-split {
  width: 100%;
}

.jpcrm-wizard-split-narrow {
  width: 25%;
  float: right;
}

.jpcrm-wizard-split-wide {
  width: 75%;
  float: left;
}

.jpcrm-wizard-signup-input {
  width: 40%;
  margin-left: 5%;
  display: inline-block;
  font-size: 15px;
  line-height: 16px;
}

#zbscrm-logo img {
  max-width: 224px;
}

.zbscrm-setup-content {
  max-width: 800px;
  margin-right: auto;
  margin-left: auto;
}

@media (min-width: 992px) {
  .container {
    width: 100%;
  }
}
@media (min-width: 768px) {
  .container {
    width: 100%;
  }
}
.wizopt {
  margin-bottom: 24px;
}

.zbs-menu-opt {
  width: 31%;
  display: inline-block;
  margin-right: 1%;
  text-align: center;
  padding: 7px 0;
  padding-top: 12px;
  margin-bottom: 10px;
  border-radius: 4px;
}

.zbs-menu-opt:hover {
  cursor: pointer;
  background: #d9e5fb;
}

.zbs-menu-opt img {
  max-height: 280px;
  max-width: 100%;
}

.zbs-menu-opt-desc {
  font-size: 16px;
  font-weight: 600;
  margin-top: 6px;
  margin-bottom: 6px;
}

.zbs-extrainfo {
  padding: 12px;
  background: #d9e5fb;
  border-radius: 4px;
  color: #000;
}

#zbs-lead-header {
  color: #ccc;
}

p.lead {
  font-size: 18px;
  color: #000;
}

.zbs-eb-callout {
  width: 50%;
  float: right;
  margin-top: 17px;
  padding-right: 15px;
}

/*
 * The label wraps to two lines at tablet widths and below about 360px, and
 * left alone strands "services" on the second line. balance rather than
 * pretty: balance evens every line, which is what a short multi-line label
 * wants; pretty only tidies the last one. Centred to match, since balanced
 * lines are still unequal.
 */
.zbs-eb-callout .btn {
  text-wrap: balance;
  text-align: center;
}

.zbs-sync-wrap {
  padding: 12px;
  background: #f0f2eb;
  border-radius: 4px;
  color: #000;
  display: inline-block;
  height: 290px;
}
.zbs-sync-wrap h3 {
  color: #000;
  margin-top: 8px !important;
  margin-bottom: 14px !important;
  text-align: right;
  font-size: 18px;
}
.zbs-sync-wrap .zbs-sync-img {
  text-align: center;
  width: 50%;
  float: left;
}

/*
 * Copy on the left, logos on the right, centred against each other.
 *
 * Centring is what makes the stagger behave at every width. Where it is taller
 * than this box, as on a wide screen, it breaks out equally top and bottom the
 * way the composite banner did; where the box is the taller of the two, as
 * around 768px, it simply sits in the middle and breaks out of neither. The
 * fixed negative offset this replaced could not tell those cases apart, so it
 * pulled the group out of the top edge and left a gap at the bottom.
 *
 * Two things here are load-bearing. height: 100% gives the flex line the box's
 * height to centre against; without it the line is only as tall as its contents
 * and there is nothing to centre against. And this must stay a single-line
 * container: flex-wrap would make it multi-line, and a line in a multi-line
 * container takes its cross size from its own items, so align-items would
 * centre the stagger inside a line as tall as itself while align-content parked
 * that line at the top -- which looks exactly like no centring at all. Narrow
 * screens stack by switching direction to column, not by wrapping.
 *
 * float is ignored on flex items, so the 50% widths keep doing the column work
 * and their float declarations go inert rather than needing to be unpicked.
 */
.zbs-eb-wizard {
  display: flex;
  align-items: center;
  height: 100%;
}

/*
 * The extension logos that illustrate the bundle.
 *
 * These were one composite PNG. The geometry below reproduces that image's
 * layout, measured from it: a 411x427 canvas holding five 181x86 cards on four
 * rows, staggered, with the logo inside each card occupying about a third of
 * its height. Everything is expressed as a percentage of the container so it
 * scales the way the image did, and the container keeps the image's aspect
 * ratio so the stagger still breaks out of the callout box top and bottom.
 *
 * Gravity Forms is the one card that cannot match the others. Its current
 * lockup is 7.8:1 where the mark in the old image was 3.9:1, so at the shared
 * logo height it would need a card three quarters the width of the container.
 * It takes a row of its own in a wider card, and PayPal moves up beside Stripe.
 */
.jpcrm-bundle-logos {
  position: relative;
  display: block;
  aspect-ratio: 411/427;
}

.jpcrm-bundle-logo {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44.04%;
  height: 20.14%;
  background: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.jpcrm-bundle-logo img {
  display: block;
  max-width: 78%;
  max-height: 38%;
}

/* Row 1 */
.jpcrm-bundle-logo-woo {
  top: 3.51%;
  right: 36.5%;
}

/*
 * Woo's clear-space rule (see i/welcome-to-zbs/LOGOS.md) needs the logo's own
 * height free on every side, which caps it at a third of the card. It reads
 * better smaller in any case: "Woo" is short and bold where the wordmark it
 * replaced was long and light.
 */
.jpcrm-bundle-logo-woo img {
  max-height: 32%;
}

/* Row 2 */
.jpcrm-bundle-logo-twilio {
  top: 28.1%;
  right: 25.06%;
}

/*
 * Twilio ship their file with 16.7% vertical padding inside the viewBox: the
 * artwork is 40 units tall in a 48 unit box. Scaling the element up by that
 * ratio puts the mark itself at the same height as the others, rather than
 * altering their file to crop it.
 */
.jpcrm-bundle-logo-twilio img {
  max-height: 45.6%;
}

/* Row 3 */
.jpcrm-bundle-logo-stripe {
  top: 52.46%;
  right: 3.65%;
}

.jpcrm-bundle-logo-paypal {
  top: 52.46%;
  right: 52.8%;
}

/*
 * PayPal's file is cropped flush to its ink and the "y" descender is a quarter
 * of that height, so centring the box puts the body of the letterforms -- cap
 * height to baseline, which is what the eye reads as the logo -- 12.6% of the
 * height above the middle of the card. It looks like it is floating. Nudging it
 * down by exactly that much centres what is actually seen. The percentage
 * resolves against the element's own height, so it holds at every width.
 *
 * Only PayPal. Stripe's "p" descends too but half as far, and the ink hanging
 * below Twilio's and Gravity Forms' text is their icon, which is part of how
 * those marks are balanced and is not something to correct.
 */
.jpcrm-bundle-logo-paypal img {
  transform: translateY(12.6%);
}

/* Row 4, the wide one */
.jpcrm-bundle-logo-gravity-forms {
  top: 76.58%;
  right: 27.13%;
  width: 61.56%;
}

/*
 * Tablet widths.
 *
 * body is capped at 90% by WordPress's install-page stylesheet, inside an html
 * margin of 20px a side, so .zbscrm-setup-content stops reaching its 800px
 * design width below a 929px viewport: (929 - 40) * 0.9 = 800.1.
 *
 * Under that the callout column narrows enough for its button to wrap to two
 * lines, and the content outgrows .zbs-sync-wrap's fixed 290px height -- the
 * button ends up hanging out of the bottom of the box, over the rule below it.
 * An iPad Mini at 768px lands squarely in this range.
 *
 * Only the height needs to give. min-height is not an option: the logo image
 * deliberately overhangs the box by 30px at full width, so a minimum would
 * grow the box to enclose it and change the desktop rendering.
 */
@media (max-width: 928px) {
  .zbs-sync-wrap {
    height: auto;
  }
}
/*
 * Narrow screens.
 *
 * Deliberately last in the file: several of the rules below override
 * declarations of equal specificity (.zbs-eb-callout, .switchbox-right) that
 * appear late, so source order is what makes them win.
 */
@media (max-width: 600px) {
  /*
   * WordPress's install-page stylesheet (css/welcome-to-zbs/loadstyles.css)
   * puts a 20px margin on html and caps body at 90%, which together spend
   * 75px of a 390px viewport before any content is laid out.
   */
  html {
    margin: 0;
  }
  body {
    max-width: none;
  }
  /*
   * Three nested Bootstrap gutters (.container, .col-xs-12, .col-md-12) cost
   * another 90px. One outer gutter is enough at this width.
   */
  .zbscrm-setup-content {
    padding-right: 16px;
    padding-left: 16px;
  }
  .container,
  .col-xs-12,
  .col-md-12 {
    padding-right: 0;
    padding-left: 0;
  }
  /*
   * Bootstrap pairs that gutter padding with a -15px margin on .row. Zeroing
   * the padding alone leaves the negative margin to cancel the outer padding
   * above, putting text flush against the screen edge.
   */
  .row {
    margin-right: 0;
    margin-left: 0;
  }
  /* Stack the three menu-style screenshots one per row. */
  .zbs-menu-opt {
    width: 100%;
    margin-right: 0;
  }
  /*
   * Step 2's callout and its logo column stack. The callout is flattened by
   * display: contents below, so it needs no rule of its own here. The
   * descendant selector matches the nesting in .zbs-sync-wrap above -- a bare
   * .zbs-sync-img loses on specificity. order puts the logos after the copy
   * and before the call to action.
   */
  .zbs-sync-wrap {
    display: block;
  }
  .zbs-sync-wrap .zbs-sync-img {
    width: 100%;
    order: 2;
  }
  /*
   * The logos stop being a side column here and join the text flow, stacked
   * under the copy, which changes what the right size is. At the desktop card
   * size they tower over 14px body copy on a 24.5px line: a 70px card is close
   * to three lines tall. These are sized so the logo lands between the body
   * and heading sizes, putting the card at about two lines.
   *
   * The stagger goes with it. It reads as a composition beside the copy; in
   * the flow it just reads as overlap, so the cards line up instead.
   *
   * The group is capped at three standard cards. Left to fill the full width
   * it fits four on the first row at the wider end of this range, orphaning
   * the fifth; this holds it to 3-2, or 2-2-1 once the column is too narrow
   * for three.
   */
  .jpcrm-bundle-logos {
    position: static;
    aspect-ratio: auto;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    align-items: center;
    max-width: 320px;
    margin-right: auto;
    margin-left: auto;
  }
  .jpcrm-bundle-logo {
    position: static;
    width: 100px;
    height: 48px;
  }
  .jpcrm-bundle-logo-gravity-forms {
    width: 140px;
  }
  /*
   * Stacked, the call to action reads better after the logos than wedged
   * between them and the copy. display: contents flattens the callout so its
   * button becomes a sibling of the logos and can be ordered past them,
   * without moving anything in the markup.
   */
  .zbs-eb-wizard {
    flex-direction: column;
    /*
     * The base rule centres the two columns against each other. Here the
     * callout is flattened by display: contents, so that centring would apply
     * to its heading and paragraphs individually and pull the copy off the
     * left margin. Only the button is meant to be centred, and it says so
     * itself below.
     */
    align-items: stretch;
  }
  .zbs-eb-callout {
    display: contents;
  }
  /*
   * The paragraph above already carries a 24px bottom margin, and margins do
   * not collapse between flex items, so anything added here stacks on top of
   * it. It had 20px, which made the space above the logos nearly twice the
   * space below them. The button matches that 24px instead.
   */
  .zbs-eb-callout .btn {
    order: 3;
    align-self: center;
    margin-top: 24px;
  }
  /* Long currency and business-type labels widen an auto-width select. */
  .setup-content select {
    max-width: 100%;
  }
  /* Let the four step labels wrap instead of colliding. */
  .stepwizard-step p {
    font-size: 13px;
  }
  /*
   * Step 3's toggle is a fixed 80px, which a 20% column cannot hold once
   * the outer gutters are gone. Size the column to its contents instead.
   */
  .switchbox-right {
    width: 90px;
  }
  /* Rows that sit side by side on desktop stack here. */
  .jpcrm-wizard-field,
  .jpcrm-wizard-field-col,
  .jpcrm-wizard-field-input,
  .jpcrm-wizard-split-narrow,
  .jpcrm-wizard-split-wide,
  .jpcrm-wizard-signup-input {
    width: 100%;
    float: none;
  }
  .jpcrm-wizard-signup-input {
    margin-left: 0;
    margin-bottom: 8px;
  }
}