/**
 * @file
 * Form items and controls (core markup).
 *
 * Classes come from templates/form/* and imtm_preprocess_input() and friends;
 * core class names (fieldset-legend, container-inline, …) are styled where
 * core markup is used unchanged. Webform-only widgets are in webform.css.
 *
 * Focus: every control shows a solid 2px outline in --imtm-focus-color
 * (≥3:1 contrast) when focused from the keyboard; text controls also show it
 * on mouse focus so the active field is always obvious.
 */

/* ------------------------------------------------------------------------
 * Form item wrapper, labels, descriptions, errors.
 * --------------------------------------------------------------------- */

.form-item {
  margin: 0 0 var(--imtm-form-gap);
}

.form-item__label {
  display: block;
  margin-bottom: 0.375rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--imtm-form-label-color);
}

.form-item__label--option {
  display: inline;
  margin-bottom: 0;
  font-weight: 400;
  line-height: var(--imtm-line-height);
  color: var(--imtm-color-text);
  cursor: pointer;
}

.form-item__label--required::after,
.fieldset-legend.js-form-required::after,
.fieldset-legend.form-required::after,
legend.form-required::after,
.details__summary.js-form-required::after {
  margin-left: 0.2em;
  font-weight: 700;
  color: var(--imtm-form-error-color);
  content: "*";
}

/* Checkbox/radio inside a required group: the group shows the star. */
.form-checkboxes .form-item__label--required::after,
.form-radios .form-item__label--required::after {
  content: none;
}

.form-item__description,
.fieldset-wrapper > .description,
.webform-element-description,
.details__description {
  margin-top: 0.375rem;
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--imtm-form-help-color);
}

.form-item__description > :last-child {
  margin-bottom: 0;
}

/* Description shown above the control. */
.form-item__label + .form-item__description {
  margin-top: -0.125rem;
  margin-bottom: 0.5rem;
}

/* Inline error (inline_form_errors) and invalid controls. */
.form-item__error-message {
  display: flex;
  gap: 0.375rem;
  align-items: baseline;
  margin-top: 0.375rem;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--imtm-form-error-color);
}

.form-item__error-message::before {
  font-family: FontAwesome;
  font-weight: 400;
  content: "\f06a";
}

.form-item--error > .form-item__label,
.form-item:has(> .form-element.error) > .form-item__label,
.form-item:has(> .form-textarea-wrapper > .form-element.error) > .form-item__label,
fieldset:has(.form-element.error) > legend .fieldset-legend {
  color: var(--imtm-form-error-color);
}

/* ------------------------------------------------------------------------
 * Text-like controls, selects, textareas, file inputs.
 * --------------------------------------------------------------------- */

.form-element--text,
.form-element--select,
.form-element--textarea,
.form-element--file {
  display: block;
  width: 100%;
  max-width: 100%;
  min-height: var(--imtm-control-height);
  padding: 0.5rem 0.85rem;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 400;
  line-height: var(--imtm-line-height);
  color: var(--imtm-color-text);
  background-color: var(--imtm-color-white);
  background-clip: padding-box;
  border: 1px solid var(--imtm-form-control-border);
  border-radius: var(--imtm-radius);
  box-shadow: none;
  transition: border-color var(--imtm-transition), box-shadow var(--imtm-transition), outline-color var(--imtm-transition);
}

.form-element--text:hover,
.form-element--select:hover,
.form-element--textarea:hover,
.form-element--file:hover {
  border-color: var(--imtm-form-control-border-hover);
}

.form-element--text:focus,
.form-element--select:focus,
.form-element--textarea:focus,
.form-element--file:focus-visible {
  border-color: var(--imtm-focus-color, #1f6e80);
  outline: var(--imtm-focus-outline);
  outline-offset: 0;
  box-shadow: none;
}

.form-element::placeholder {
  color: var(--imtm-form-placeholder-color);
  opacity: 1;
}

.form-element:disabled,
.form-element[readonly] {
  color: var(--imtm-color-text);
  cursor: not-allowed;
  background-color: var(--imtm-form-control-bg-disabled);
  border-color: var(--imtm-color-gray-50);
  opacity: 1;
}

.form-element[readonly] {
  cursor: default;
}

.form-item--disabled > .form-item__label {
  color: var(--imtm-color-text-muted);
}

/* Invalid controls (server-side validation adds .error). */
.form-element.error,
.form-item--error > .form-element,
.form-item--error > .form-managed-file .form-element--file {
  background-color: var(--imtm-form-error-bg);
  border-color: var(--imtm-color-danger);
  box-shadow: inset 3px 0 0 var(--imtm-color-danger);
}

.form-element--checkbox.error,
.form-element--radio.error {
  box-shadow: none;
}

.form-element.error:focus,
.form-item--error > .form-element:focus {
  border-color: var(--imtm-form-error-color);
  outline-color: var(--imtm-form-error-color);
}

.form-element--textarea {
  min-height: 8rem;
  resize: vertical;
}

/* Number, date and time fields only need their content width. */
.form-element--text[type='number'] {
  max-width: 12rem;
}

.form-element--text[type='date'],
.form-element--text[type='time'],
.form-element--text[type='datetime-local'],
.form-element--text[type='month'],
.form-element--text[type='week'] {
  display: inline-block;
  width: auto;
  min-width: 10rem;
}

.form-element--text::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: 0.7;
}

.form-element--text::-webkit-calendar-picker-indicator:hover {
  opacity: 1;
}

/* Selects with a custom chevron. */
.form-element--select {
  padding-right: 2.5rem;
  text-overflow: ellipsis;
  appearance: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23565658' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 0.85rem center;
  background-size: 14px 10px;
}

.form-element--select[multiple],
.form-element--select[size]:not([size='1']) {
  padding: 0.375rem;
  background-image: none;
}

.form-element--select[multiple] option,
.form-element--select[size]:not([size='1']) option {
  padding: 0.25rem 0.5rem;
  border-radius: calc(var(--imtm-radius) - 2px);
}

.form-element--select[multiple] option:checked {
  color: var(--imtm-color-white);
  background: var(--imtm-color-darkred) linear-gradient(var(--imtm-color-darkred), var(--imtm-color-darkred));
}

/* File input: native control with a styled selector button. */
.form-element--file {
  padding: 0.3125rem;
  overflow: hidden;
  color: var(--imtm-color-text);
  cursor: pointer;
}

.form-element--file::file-selector-button {
  padding: 0.3rem 0.9rem;
  margin-right: 0.85rem;
  font: inherit;
  font-weight: 700;
  color: var(--imtm-form-label-color);
  cursor: pointer;
  background-color: var(--imtm-color-surface);
  border: 1px solid var(--imtm-color-gray-50);
  border-radius: calc(var(--imtm-radius) - 2px);
  transition: background-color var(--imtm-transition), border-color var(--imtm-transition);
}

.form-element--file:hover::file-selector-button {
  background-color: var(--imtm-color-gray-25);
  border-color: var(--imtm-form-control-border-hover);
}

/* Colour picker (core): a square swatch. */
.form-element--color {
  display: block;
  width: var(--imtm-control-height);
  height: var(--imtm-control-height);
  padding: 0.25rem;
  cursor: pointer;
  background-color: var(--imtm-color-white);
  border: 1px solid var(--imtm-form-control-border);
  border-radius: var(--imtm-radius);
}

.form-element--color::-webkit-color-swatch-wrapper {
  padding: 0;
}

.form-element--color::-webkit-color-swatch {
  border: 0;
  border-radius: calc(var(--imtm-radius) - 3px);
}

.form-element--color::-moz-color-swatch {
  border: 0;
  border-radius: calc(var(--imtm-radius) - 3px);
}

.form-element--color:focus-visible {
  outline: var(--imtm-focus-outline);
  outline-offset: var(--imtm-focus-outline-offset);
}

/* Range slider. */
.form-element--range {
  display: block;
  width: 100%;
  height: 1.75rem;
  padding: 0;
  margin: 0;
  cursor: pointer;
  background: transparent;
  appearance: none;
}

.form-element--range::-webkit-slider-runnable-track {
  height: 0.375rem;
  background: var(--imtm-color-gray-25);
  border-radius: 1rem;
}

.form-element--range::-moz-range-track {
  height: 0.375rem;
  background: var(--imtm-color-gray-25);
  border-radius: 1rem;
}

.form-element--range::-moz-range-progress {
  height: 0.375rem;
  background: var(--imtm-color-darkred);
  border-radius: 1rem;
}

.form-element--range::-webkit-slider-thumb {
  width: 1.25rem;
  height: 1.25rem;
  margin-top: -0.4375rem;
  appearance: none;
  background: var(--imtm-color-darkred);
  border: 2px solid var(--imtm-color-white);
  border-radius: 50%;
  box-shadow: 0 0 0 1px var(--imtm-color-darkred);
  transition: transform var(--imtm-transition);
}

.form-element--range::-moz-range-thumb {
  width: 1rem;
  height: 1rem;
  background: var(--imtm-color-darkred);
  border: 2px solid var(--imtm-color-white);
  border-radius: 50%;
  box-shadow: 0 0 0 1px var(--imtm-color-darkred);
}

.form-element--range:hover::-webkit-slider-thumb {
  transform: scale(1.1);
}

.form-element--range:focus {
  outline: 0;
}

.form-element--range:focus-visible {
  outline: var(--imtm-focus-outline);
  outline-offset: var(--imtm-focus-outline-offset);
  border-radius: var(--imtm-radius);
}

/* ------------------------------------------------------------------------
 * Checkboxes and radios.
 * --------------------------------------------------------------------- */

.form-element--checkbox,
.form-element--radio {
  flex-shrink: 0;
  width: var(--imtm-form-check-size);
  height: var(--imtm-form-check-size);
  /* Centre the box on the first line of a 1.5 line-height label. */
  margin: calc((1.5em - var(--imtm-form-check-size)) / 2) 0.625rem 0 0;
  vertical-align: top;
  cursor: pointer;
  appearance: none;
  background-color: var(--imtm-color-white);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  border: 1.5px solid var(--imtm-form-control-border);
  border-radius: 0.25rem;
  transition: background-color var(--imtm-transition), border-color var(--imtm-transition);
  print-color-adjust: exact;
}

.form-element--radio {
  border-radius: 50%;
}

.form-element--checkbox:hover,
.form-element--radio:hover,
.form-item--checkbox:hover > .form-element--checkbox,
.form-item--radio:hover > .form-element--radio {
  border-color: var(--imtm-color-darkred);
}

.form-element--checkbox:focus,
.form-element--radio:focus {
  outline: 0;
}

.form-element--checkbox:focus-visible,
.form-element--radio:focus-visible {
  outline: var(--imtm-focus-outline);
  outline-offset: var(--imtm-focus-outline-offset);
}

.form-element--checkbox:checked,
.form-element--radio:checked {
  background-color: var(--imtm-color-darkred);
  border-color: var(--imtm-color-darkred);
}

.form-element--checkbox:checked {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e");
}

.form-element--checkbox:indeterminate {
  background-color: var(--imtm-color-darkred);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e");
  border-color: var(--imtm-color-darkred);
}

.form-element--radio:checked {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='1.6' fill='%23fff'/%3e%3c/svg%3e");
}

.form-element--checkbox.error,
.form-element--radio.error {
  background-color: var(--imtm-form-error-bg);
  border-color: var(--imtm-form-error-color);
}

.form-element--checkbox.error:checked,
.form-element--radio.error:checked {
  background-color: var(--imtm-color-darkred);
}

.form-element--checkbox:disabled,
.form-element--radio:disabled {
  cursor: not-allowed;
  background-color: var(--imtm-form-control-bg-disabled);
  border-color: var(--imtm-color-gray-50);
}

.form-element--checkbox:disabled:checked,
.form-element--radio:disabled:checked {
  background-color: var(--imtm-color-gray-75);
}

.form-element--checkbox:disabled + .form-item__label--option,
.form-element--radio:disabled + .form-item__label--option {
  color: var(--imtm-color-text-muted);
  cursor: not-allowed;
}

.form-item--checkbox,
.form-item--radio {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}

.form-item--checkbox > .form-item__label--option,
.form-item--radio > .form-item__label--option {
  flex: 1 1 0;
  min-width: 0;
}

.form-item--checkbox > .form-item__description,
.form-item--radio > .form-item__description,
.form-item--checkbox > .form-item__error-message,
.form-item--radio > .form-item__error-message {
  flex-basis: 100%;
  padding-left: calc(var(--imtm-form-check-size) + 0.625rem);
  margin-top: 0.25rem;
}

/* Options inside a group sit closer together. */
.form-checkboxes > .form-item,
.form-radios > .form-item,
.form-checkboxes .form-item--checkbox,
.form-radios .form-item--radio {
  margin: 0 0 0.5rem;
}

.form-composite .form-item--checkbox,
.form-composite .form-item--radio,
.js-webform-radios > .form-item,
.js-webform-checkboxes > .form-item {
  margin: 0 0 0.5rem;
}

.form-checkboxes > .form-item:last-child,
.form-radios > .form-item:last-child,
.js-webform-radios > .form-item:last-child,
.js-webform-checkboxes > .form-item:last-child {
  margin-bottom: 0;
}

.container-inline .form-item--checkbox {
  width: 33%;
}

/* ------------------------------------------------------------------------
 * Fieldsets.
 * --------------------------------------------------------------------- */

/* Plain fieldsets (fieldset element) as light cards with a heading. */
fieldset.js-form-wrapper:not(.container-inline):not(.webform-composite-hidden-title):not(.form-composite):not(.fieldgroup) {
  padding: 1.25rem 1.5rem 1.5rem;
  margin: 0 0 1.5rem;
  background: var(--imtm-color-white);
  border: 1px solid var(--imtm-color-gray-25);
  border-radius: var(--imtm-radius-lg);
}

fieldset > legend {
  float: left;
  width: 100%;
  padding: 0;
  margin: 0 0 0.375rem;
  font-size: 1rem;
  line-height: 1.35;
}

fieldset > legend + * {
  clear: left;
}

.fieldset-legend {
  display: block;
  font-weight: 700;
  color: var(--imtm-form-label-color);
}

fieldset.js-form-wrapper:not(.container-inline):not(.webform-composite-hidden-title):not(.form-composite):not(.fieldgroup) > legend {
  padding-bottom: 0.75rem;
  margin-bottom: 1.25rem;
  border-bottom: 1px solid var(--imtm-color-gray-25);
}

fieldset.js-form-wrapper:not(.container-inline):not(.webform-composite-hidden-title):not(.form-composite):not(.fieldgroup) > legend .fieldset-legend {
  font-size: 1.15rem;
  color: var(--imtm-color-text);
}

/* The last item in a group carries no bottom margin. */
.fieldset-wrapper > :last-child,
.details__wrapper > :last-child {
  margin-bottom: 0;
}

/* Grouped controls (radios, checkboxes, composites). */
fieldset.form-composite,
fieldset.fieldgroup {
  margin: 0 0 var(--imtm-form-gap);
}

fieldset.form-composite > .fieldset-wrapper > .description,
fieldset.form-composite > .fieldset-wrapper > .form-item__description {
  margin-top: 0.5rem;
}

/* ------------------------------------------------------------------------
 * Inline groups (date + time, date lists, add-more rows).
 * --------------------------------------------------------------------- */

.container-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: flex-start;
}

.form-item .container-inline {
  margin: 0;
}

.container-inline > .form-item,
.container-inline > div > .form-item {
  margin: 0;
}

.container-inline .form-element--text,
.container-inline .form-element--select {
  display: inline-block;
  width: auto;
  max-width: 100%;
}

.form-type-datelist .form-element--select {
  min-width: 5.5rem;
}

/* ------------------------------------------------------------------------
 * Field prefix/suffix as add-ons joined to the input.
 * --------------------------------------------------------------------- */

.form-item:has(> .form-item__prefix),
.form-item:has(> .form-item__suffix) {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
}

.form-item:has(> .form-item__prefix) > :is(.form-item__label, .form-item__description, .form-item__error-message),
.form-item:has(> .form-item__suffix) > :is(.form-item__label, .form-item__description, .form-item__error-message) {
  flex-basis: 100%;
}

.form-item:has(> .form-item__prefix) > .form-element,
.form-item:has(> .form-item__suffix) > .form-element {
  flex: 1 1 0;
  width: auto;
  min-width: 0;
}

.form-item:has(> .form-item__prefix) > .form-element {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.form-item:has(> .form-item__suffix) > .form-element {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.form-item:has(> .form-item__prefix) > .form-element:focus,
.form-item:has(> .form-item__suffix) > .form-element:focus {
  position: relative;
  z-index: 1;
}

.form-item__prefix,
.form-item__suffix {
  display: flex;
  align-items: center;
  padding: 0.5rem 0.85rem;
  margin: 0;
  color: var(--imtm-form-help-color);
  white-space: nowrap;
  background-color: var(--imtm-color-surface-light);
  border: 1px solid var(--imtm-form-control-border);
}

.form-item__prefix {
  border-right: 0;
  border-radius: var(--imtm-radius) 0 0 var(--imtm-radius);
}

.form-item__suffix {
  border-left: 0;
  border-radius: 0 var(--imtm-radius) var(--imtm-radius) 0;
}

/* ------------------------------------------------------------------------
 * Form actions.
 * --------------------------------------------------------------------- */

.form-actions,
.webform-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  padding-top: 0.5rem;
  margin: 1.5rem 0 1rem;
}

.form-actions .button,
.form-actions .form-submit,
.webform-actions .button,
.webform-actions .form-submit {
  margin: 0;
}

/* ------------------------------------------------------------------------
 * Managed file widget (core file field and webform managed_file).
 * --------------------------------------------------------------------- */

.form-managed-file {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
  align-items: center;
}

.form-managed-file > .form-element--file {
  flex: 1 1 16rem;
}

.form-managed-file > .file,
.form-managed-file .webform-managed-file-preview,
.form-managed-file .form-item--checkbox > .form-item__label--option .file {
  display: inline-flex;
  gap: 0.5rem;
  align-items: center;
  min-height: var(--imtm-button-height-small);
  padding: 0.25rem 0.75rem;
  margin: 0;
  overflow-wrap: anywhere;
  background: var(--imtm-color-surface-light);
  border: 1px solid var(--imtm-color-gray-25);
  border-radius: var(--imtm-radius);
}

.form-managed-file .file a {
  font-weight: 700;
  color: var(--imtm-color-text);
}

.form-managed-file .file-size {
  font-size: 0.875rem;
  color: var(--imtm-form-help-color);
}

.form-managed-file > .form-submit {
  margin: 0;
}

/* Multi-file widget: one row per file with its checkbox. */
.form-managed-file > .form-item--checkbox {
  flex-basis: 100%;
  align-items: center;
  margin: 0;
}

/* ------------------------------------------------------------------------
 * Multiple-value widgets and table drag (core).
 * --------------------------------------------------------------------- */

.field-multiple-table {
  margin-bottom: 0.5rem;
}

.field-multiple-table th {
  font-size: 1rem;
  font-weight: 700;
  background-color: var(--imtm-color-surface-light);
}

.draggable a.tabledrag-handle {
  overflow: visible;
}

a.tabledrag-handle .handle {
  width: 21px;
  height: 21px;
  margin: -0.4em 0.5em 0;
  background-repeat: no-repeat;
  background-position: 5px 3px;
}

a.tabledrag-handle:focus-visible {
  outline: var(--imtm-focus-outline);
  outline-offset: 0;
  border-radius: var(--imtm-radius);
}

/* ------------------------------------------------------------------------
 * Vertical tabs (core JS markup).
 * --------------------------------------------------------------------- */

.vertical-tabs {
  background: var(--imtm-color-white);
}

.vertical-tabs .details {
  box-shadow: none;
}

.vertical-tabs .details__wrapper {
  padding: 1.125rem 1.125rem 0;
  margin: 0;
}

/* ------------------------------------------------------------------------
 * Password strength / confirmation (user edit form).
 * --------------------------------------------------------------------- */

.password-strength__meter {
  height: 0.4rem;
  margin-top: 0.5rem;
  overflow: hidden;
  background-color: var(--imtm-color-surface);
  border-radius: 1rem;
}

.password-strength__indicator {
  height: 100%;
  background-color: var(--imtm-color-success);
  border-radius: 1rem;
}

.password-strength__indicator.is-weak {
  background-color: var(--imtm-color-danger);
}

.password-strength__indicator.is-fair {
  background-color: #ffc107;
}

.password-strength__title,
.password-confirm,
.password-suggestions {
  margin-top: 0.4rem;
  font-size: 0.875rem;
}

.password-suggestions {
  padding: 0.75rem 1rem;
  background: var(--imtm-color-surface-light);
  border-radius: var(--imtm-radius);
}

/* Responsive images inside forms (image widget previews). */
.form-item img {
  max-width: 100%;
  height: auto;
}

/* ------------------------------------------------------------------------
 * CAPTCHA (captcha module).
 * --------------------------------------------------------------------- */

fieldset.captcha {
  padding: 1rem 1.25rem 1.25rem;
  margin: 0 0 var(--imtm-form-gap);
  background: var(--imtm-color-surface-light);
  border: 1px solid var(--imtm-color-gray-25);
  border-radius: var(--imtm-radius-lg);
}

fieldset.captcha > legend.captcha__title {
  float: left;
  width: 100%;
  margin-bottom: 0.75rem;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--imtm-form-label-color);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

fieldset.captcha > legend.captcha__title::after {
  content: none;
}

.captcha__element {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
  align-items: flex-start;
  clear: left;
}

.captcha__image-wrapper {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.captcha__image-wrapper {
  flex: 0 0 auto;
  max-width: 100%;
}

.captcha__image-wrapper .reload-captcha-wrapper {
  flex: 0 0 auto;
}

.captcha__image-wrapper .reload-captcha {
  width: 2.25rem;
  height: 2.25rem;
  background-color: var(--imtm-color-white);
  background-position: center;
  background-size: 1rem;
  border: 1px solid var(--imtm-form-control-border);
  border-radius: var(--imtm-radius);
  opacity: 1;
}

.captcha__image-wrapper .reload-captcha:hover {
  border-color: var(--imtm-form-control-border-hover);
}

.captcha__image-wrapper .reload-captcha:focus-visible {
  outline: var(--imtm-focus-outline);
  outline-offset: var(--imtm-focus-outline-offset);
}

.captcha__image-wrapper img {
  display: block;
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
  height: auto;
  background: var(--imtm-color-white);
  border: 1px solid var(--imtm-color-gray-25);
  border-radius: var(--imtm-radius);
}

.captcha__element > .form-item {
  flex: 1 1 14rem;
  margin: 0;
}

.captcha__description {
  margin: 0.75rem 0 0;
  font-size: 0.875rem;
  color: var(--imtm-form-help-color);
}

/* ------------------------------------------------------------------------
 * Small screens.
 * --------------------------------------------------------------------- */

@media (max-width: 575.98px) {
  fieldset.js-form-wrapper:not(.container-inline):not(.webform-composite-hidden-title):not(.form-composite):not(.fieldgroup) {
    padding: 1rem 1rem 1.25rem;
  }

  /* Full-width main action is easier to hit. */
  .form-actions > .form-submit:only-child,
  .webform-actions > .form-submit:only-child {
    width: 100%;
  }
}