/**
 * @file
 * Webform elements (overrides of webform module CSS).
 *
 * Every block-level element uses the same bottom margin as .form-item
 * (--imtm-form-gap) so the whole form keeps one vertical rhythm.
 */

/* ------------------------------------------------------------------------
 * Vertical rhythm of non-.form-item elements.
 * --------------------------------------------------------------------- */

.webform-submission-form > .webform-message,
.webform-section-wrapper > .webform-message,
.fieldset-wrapper > .webform-message,
.webform-element-more,
.webform-flexbox,
.webform-submission-form .webform-multiple-add,
.form-item--webform-table,
.form-item--webform-likert {
  margin-bottom: var(--imtm-form-gap);
}

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

/* Hidden elements must not leave gaps (states API). */
.js-webform-states-hidden {
  margin: 0;
}

/* ------------------------------------------------------------------------
 * Sections.
 * --------------------------------------------------------------------- */

.webform-section {
  margin: 2rem 0 var(--imtm-form-gap);
}

.webform-section:first-child {
  margin-top: 0;
}

.webform-section-title {
  padding-bottom: 0.625rem;
  margin: 0 0 1.25rem;
  font-size: 1.375rem;
  font-weight: 700;
  line-height: var(--imtm-line-height-heading);
  color: var(--imtm-color-text);
  border-bottom: 2px solid var(--imtm-color-blue);
}

.webform-section-wrapper > :last-child {
  margin-bottom: 0;
}

/* ------------------------------------------------------------------------
 * Flexbox rows and composites (name, address, contact, email confirm).
 * --------------------------------------------------------------------- */

.webform-flexbox {
  margin-top: 0;
}

.webform-flexbox:last-child {
  margin-bottom: 0;
}

/* Below 768px webform stacks the columns; the items keep their margins. */
@media (max-width: 767.98px) {
  .webform-flexbox {
    margin-bottom: 0;
  }

  .form-composite .webform-flexbox:last-child > .webform-flex:last-child > .webform-flex--container > .form-item {
    margin-bottom: 0;
  }
}

@media (min-width: 768px) {
  .webform-flexbox,
  .form-composite > .webform-flexbox,
  .webform-flexbox .webform-flexbox {
    gap: 0 1.25rem;
    margin: 0 0 var(--imtm-form-gap);
  }

  .form-composite .fieldset-wrapper > div > .webform-flexbox:last-child,
  .form-composite .fieldset-wrapper > .webform-flexbox:last-child {
    margin-bottom: 0;
  }

  .webform-flex--container {
    margin: 0;
  }

  /* Keep inputs aligned when labels wrap to different heights. */
  .webform-flexbox {
    align-items: flex-end;
  }

  .webform-flexbox > .webform-flex > .webform-flex--container > .form-item {
    margin: 0;
  }
}

fieldset.webform-composite-hidden-title {
  margin: 0 0 var(--imtm-form-gap);
}

/* Select/radios/checkboxes "other…" text input. */
.webform-select-other-input,
.webform-radios-other-input,
.webform-checkboxes-other-input,
.webform-buttons-other-input {
  margin: 0.5rem 0 0;
}

.webform-select-other .fieldset-wrapper > .form-item:first-child,
.webform-radios-other .fieldset-wrapper > .form-item:first-child,
.webform-checkboxes-other .fieldset-wrapper > .form-item:first-child {
  margin-bottom: 0;
}

.webform-radios-other .fieldset-wrapper > .webform-radios-other-input,
.webform-checkboxes-other .fieldset-wrapper > .webform-checkboxes-other-input {
  width: auto;
  /* max-width also caps the inline width jQuery sets while sliding down. */
  max-width: calc(100% - var(--imtm-form-check-size) - 0.625rem);
  margin-left: calc(var(--imtm-form-check-size) + 0.625rem);
}

/* ------------------------------------------------------------------------
 * Options display (side by side, columns, buttons).
 * --------------------------------------------------------------------- */

.webform-options-display-side-by-side {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
}

.webform-options-display-side-by-side > div,
.webform-options-display-side-by-side .form-item {
  display: flex;
  margin: 0;
}

.webform-options-display-two-columns,
.webform-options-display-three-columns {
  column-gap: 1.5rem;
  margin-top: 0;
}

.webform-options-display-two-columns .form-item,
.webform-options-display-three-columns .form-item,
.webform-options-display-two-columns div.form-item,
.webform-options-display-three-columns div.form-item {
  margin: 0 0 0.5rem;
  break-inside: avoid;
}

/* Options rendered as buttons. */
.webform-options-display-buttons,
.form-composite.webform-fieldset--title-inline .fieldset-wrapper > div.webform-options-display-buttons {
  gap: 0.5rem;
  margin: 0;
}

.webform-options-display-buttons .webform-options-display-buttons-wrapper {
  margin: 0;
}

.webform-options-display-buttons .form-item {
  margin: 0;
}

.webform-options-display-buttons label.webform-options-display-buttons-label {
  min-height: var(--imtm-control-height);
  padding: 0.5rem 1rem;
  font-weight: 700;
  color: var(--imtm-form-label-color);
  cursor: pointer;
  background-color: var(--imtm-color-white);
  border: 1px solid var(--imtm-form-control-border);
  border-radius: var(--imtm-radius);
  transition: background-color var(--imtm-transition), border-color var(--imtm-transition), color var(--imtm-transition);
}

.webform-options-display-buttons input:hover + label.webform-options-display-buttons-label {
  color: var(--imtm-color-text);
  border-color: var(--imtm-color-darkred);
}

.webform-options-display-buttons input:focus + label.webform-options-display-buttons-label {
  color: var(--imtm-form-label-color);
  border-color: var(--imtm-form-control-border);
  box-shadow: none;
}

.webform-options-display-buttons input:focus-visible + label.webform-options-display-buttons-label,
.webform-options-display-buttons input:checked:focus-visible + label.webform-options-display-buttons-label {
  outline: var(--imtm-focus-outline);
  outline-offset: var(--imtm-focus-outline-offset);
  box-shadow: none;
}

.webform-options-display-buttons input:checked + label.webform-options-display-buttons-label,
.webform-options-display-buttons input:checked:focus + label.webform-options-display-buttons-label {
  color: var(--imtm-color-white);
  background-color: var(--imtm-color-darkred);
  border-color: var(--imtm-color-darkred);
  box-shadow: none;
}

@media (max-width: 600px) {
  .webform-options-display-buttons .webform-options-display-buttons-wrapper {
    margin: 0 0 0.5rem;
  }
}

/* ------------------------------------------------------------------------
 * Text counter, help tooltip, "more" element.
 * --------------------------------------------------------------------- */

.text-count-wrapper {
  margin-top: 0.375rem;
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--imtm-form-help-color);
  text-align: right;
}

.text-count-wrapper.webform-counter-warning,
.text-count-overflow-wrapper {
  font-weight: 700;
  color: var(--imtm-form-error-color);
}

input.form-text.webform-counter-warning,
textarea.form-textarea.webform-counter-warning,
.form-element.webform-counter-warning {
  background: var(--imtm-form-error-bg);
  border-color: var(--imtm-form-error-color);
}

.webform-element-help {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.125rem;
  height: 1.125rem;
  margin: 0 0.25rem;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1;
  color: var(--imtm-color-white);
  vertical-align: 0.1em;
  cursor: help;
  background: var(--imtm-color-text);
  border: 0;
  border-radius: 50%;
}

.webform-element-help:focus-visible {
  outline: var(--imtm-focus-outline);
  outline-offset: var(--imtm-focus-outline-offset);
}

.webform-element-more--link a {
  display: inline-flex;
  gap: 0.5rem;
  align-items: center;
  font-weight: 700;
  color: var(--imtm-color-darkred);
  text-decoration: none;
  border-radius: 2px;
}

.webform-element-more--link a:hover {
  color: var(--imtm-button-primary-hover);
  text-decoration: underline;
}

.webform-element-more--link a:focus-visible {
  outline: var(--imtm-focus-outline);
  outline-offset: var(--imtm-focus-outline-offset);
}

/* Replace the ► / ▼ glyphs with a chevron. */
.webform-element-more--link::before,
.webform-element-more.is-open .webform-element-more--link::before {
  content: none;
}

.webform-element-more--link a::before {
  display: inline-block;
  width: 0.45rem;
  height: 0.45rem;
  content: "";
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--imtm-transition);
}

.webform-element-more.is-open .webform-element-more--link a::before {
  transform: translateY(-2px) rotate(135deg);
}

.webform-element-more--content {
  padding: 0.75rem 1rem;
  margin-top: 0.5rem;
  background: var(--imtm-color-surface-light);
  border-left: 3px solid var(--imtm-color-blue);
  border-radius: 0 var(--imtm-radius) var(--imtm-radius) 0;
}

/* ------------------------------------------------------------------------
 * Horizontal rule.
 * --------------------------------------------------------------------- */

hr.webform-horizontal-rule {
  margin: 0 0 var(--imtm-form-gap);
  color: var(--imtm-color-gray-50);
  opacity: 1;
}

hr.webform-horizontal-rule:not([class*='webform-horizontal-rule--']) {
  border-top: 1px solid var(--imtm-color-gray-25);
}

/* ------------------------------------------------------------------------
 * Date and time.
 * --------------------------------------------------------------------- */

.form-type-datelist .container-inline,
.form-type-datetime .container-inline {
  gap: 0.5rem;
}

.form-type-datelist input[type='text'] {
  max-width: 6rem;
}

/* jQuery timepicker dropdown. */
.ui-timepicker-wrapper {
  font-family: var(--imtm-font-family);
  border: 1px solid var(--imtm-form-control-border);
  border-radius: var(--imtm-radius);
  box-shadow: var(--imtm-shadow-sm);
}

/* ------------------------------------------------------------------------
 * Range (value output on the right).
 * --------------------------------------------------------------------- */

.form-item.form-item--range {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 1rem;
  align-items: center;
}

.form-item--range > .form-item__label,
.form-item--range > .form-item__description,
.form-item--range > .form-item__error-message {
  grid-column: 1 / -1;
}

.form-item--range > .form-element--range {
  display: block;
}

.form-item--range > .form-item__prefix,
.form-item--range > .form-item__suffix {
  display: flex;
  padding: 0;
  background: none;
  border: 0;
}

.form-item--range .webform-range-output-delimiter {
  display: none;
}

.form-item--range .form-item {
  display: block;
  margin: 0;
}

.form-item--range .form-item .form-element--text {
  width: 4.5rem !important; /* Overrides webform's inline width. */
  min-height: var(--imtm-button-height-small);
  padding: 0.25rem 0.5rem;
  text-align: center;
}

/* Output above the slider ("left" output keeps prefix order). */
.form-item--range > .form-item__prefix {
  order: -1;
}

/* Bubble output. */
.form-type-range output {
  padding: 0.125rem 0.5rem;
  font-size: 0.875rem;
  color: var(--imtm-color-white);
  background: var(--imtm-color-text);
  border: 0;
  border-radius: var(--imtm-radius);
  opacity: 1;
}

/* ------------------------------------------------------------------------
 * Colour (swatch joined to the hex value input).
 * --------------------------------------------------------------------- */

.form-item.form-item--color {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
}

.form-item--color > .form-item__label,
.form-item--color > .form-item__description,
.form-item--color > .form-item__error-message {
  flex-basis: 100%;
}

.form-item.form-item--color > input.form-color {
  float: none !important; /* webform.element.color.js sets an inline float. */
  width: var(--imtm-control-height);
  min-width: var(--imtm-control-height);
  height: var(--imtm-control-height);
  min-height: var(--imtm-control-height);
  padding: 0.25rem;
  margin: 0;
  border: 1px solid var(--imtm-form-control-border);
  border-radius: var(--imtm-radius);
}

.form-item.form-item--color > input.form-color:has(+ label + input.form-color-output) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.form-item.form-item--color > input.form-color.form-color-output {
  width: 7.5rem;
  padding: 0.5rem 0.75rem;
  font-family: var(--imtm-font-family-mono);
  font-size: 0.9375rem;
  color: var(--imtm-color-text);
  text-transform: lowercase;
  cursor: text;
  border-left: 0;
  border-radius: 0 var(--imtm-radius) var(--imtm-radius) 0;
}

.form-item.form-item--color > input.form-color-output:focus {
  position: relative;
  z-index: 1;
  border-color: var(--imtm-focus-color, #1f6e80);
  outline: var(--imtm-focus-outline);
  outline-offset: 0;
}

/* ------------------------------------------------------------------------
 * Rating (jQuery RateIt) and scale.
 * --------------------------------------------------------------------- */

.form-item--webform-rating .rateit {
  display: block;
}

.form-item--webform-rating .rateit-range:focus {
  outline: 0;
}

.form-item--webform-rating .rateit-range:focus-visible {
  outline: var(--imtm-focus-outline);
  outline-offset: 4px;
  border-radius: 2px;
}

.webform-scale {
  display: block;
}

.webform-scale-options,
.webform-scale-flexbox .webform-scale-options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  white-space: normal;
}

.webform-scale-option {
  display: block;
}

.webform-scale-options .form-item,
.webform-scale-medium .form-item,
.webform-scale-large .form-item,
.webform-scale-small .form-item {
  display: block;
  margin: 0;
}

.webform-scale-options input + label,
.webform-scale-medium input + label,
.webform-scale-options input + label.form-item__label--option {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
  color: var(--imtm-form-label-color);
  cursor: pointer;
  background-color: var(--imtm-color-white);
  border: 1px solid var(--imtm-form-control-border);
  border-radius: 50%;
  transition: background-color var(--imtm-transition), border-color var(--imtm-transition), color var(--imtm-transition);
}

.webform-scale-small input + label {
  width: 2rem;
  height: 2rem;
  font-size: 0.875rem;
}

.webform-scale-large input + label {
  width: 3rem;
  height: 3rem;
  font-size: 1.125rem;
}

.webform-scale-square input + label,
.webform-scale-flexbox input + label {
  border-radius: var(--imtm-radius);
}

.webform-scale-flexbox input + label {
  width: 100%;
}

.webform-scale-options input:hover + label {
  color: var(--imtm-color-darkred);
  border-color: var(--imtm-color-darkred);
}

.webform-scale-options input:focus + label {
  color: var(--imtm-form-label-color);
  border-color: var(--imtm-form-control-border);
  box-shadow: none;
}

.webform-scale-options input:focus-visible + label {
  outline: var(--imtm-focus-outline);
  outline-offset: var(--imtm-focus-outline-offset);
}

.webform-scale-options input:checked + label,
.webform-scale-options input:checked:focus + label {
  color: var(--imtm-color-white);
  background-color: var(--imtm-color-darkred);
  border-color: var(--imtm-color-darkred);
  box-shadow: none;
}

.webform-scale-options input.error + label {
  border-color: var(--imtm-form-error-color);
}

.webform-scale-text {
  margin: 0.375rem 0 0;
  font-size: 0.875rem;
  color: var(--imtm-form-help-color);
}

@media (max-width: 768px) {
  .webform-scale-medium .form-item,
  .webform-scale-large .form-item {
    margin: 0;
  }

  .webform-scale-medium input + label {
    width: 2.5rem;
    height: 2.5rem;
    font-size: 1rem;
  }

  .webform-scale-large input + label {
    width: 2.75rem;
    height: 2.75rem;
    font-size: 1rem;
  }
}

/* ------------------------------------------------------------------------
 * Tables inside forms (likert, table element, multiple values).
 * --------------------------------------------------------------------- */

.webform-submission-form .table {
  margin-bottom: 0;
}

.webform-likert-table.table tbody tr:nth-of-type(odd) > *,
.webform-table.table tbody tr:nth-of-type(odd) > *,
.webform-multiple-table .table tbody tr:nth-of-type(odd) > * {
  box-shadow: none;
}

.webform-likert-table.table thead th,
.webform-table.table thead th {
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--imtm-form-label-color);
  background: var(--imtm-color-surface-light);
  border-bottom: 1px solid var(--imtm-color-gray-50);
}

.webform-likert-table.table td,
.webform-table.table td {
  padding: 0.75rem;
  border-bottom: 1px solid var(--imtm-color-gray-25);
}

/* Table element: own scroll container on small screens. */
.form-item--webform-table {
  overflow-x: auto;
}

.webform-table.table {
  display: table;
  overflow: visible;
}

.webform-table td .form-item,
.webform-table tr td .form-item {
  margin: 0;
}

/* Likert. */
.form-item--webform-likert > .form-item__label {
  margin-bottom: 0.5rem;
}

.webform-likert-table.table td:first-child .form-item {
  margin: 0;
}

.webform-likert-table.table td:first-child .form-item__label {
  margin: 0;
  font-weight: 400;
  color: var(--imtm-color-text);
}

.webform-likert-table .form-item--radio {
  justify-content: center;
  margin: 0;
}

.webform-likert-table .form-item--radio > .form-element--radio {
  margin: 0;
}

.webform-likert-table .form-item--radio > .form-item__label--option {
  flex: 0 0 auto;
}

.webform-likert-table tbody tr:hover > td {
  background: var(--imtm-color-surface-light);
}

@media (max-width: 768px) {
  .form-type-webform-likert .webform-likert-table.table {
    display: block;
    overflow: visible;
  }

  .form-type-webform-likert .webform-likert-table tbody {
    display: block;
  }

  .form-type-webform-likert .webform-likert-table tr {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--imtm-color-gray-25);
  }

  .form-type-webform-likert .webform-likert-table tr:first-child {
    padding-top: 0;
  }

  .form-type-webform-likert .webform-likert-table.table td {
    display: block;
    width: auto;
    padding: 0;
    border: 0;
  }

  .form-type-webform-likert .webform-likert-table.table td:first-child {
    flex-basis: 100%;
  }

  .form-type-webform-likert .webform-likert-table.table td:first-child .form-item__label {
    font-weight: 700;
    color: var(--imtm-form-label-color);
  }

  .webform-likert-table tbody tr:hover > td {
    background: none;
  }

  .webform-likert-table .form-item--radio {
    justify-content: flex-start;
  }

  .webform-likert-table .form-item--radio > .form-element--radio {
    margin-right: 0.5rem;
  }

  /* Answer texts become visible next to their radios. */
  .webform-likert-table .webform-likert-label.visually-hidden {
    position: static !important;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
    white-space: normal;
  }
}

/* ------------------------------------------------------------------------
 * Multiple values (table with drag handles and add/remove icons).
 * --------------------------------------------------------------------- */

.webform-multiple-table {
  margin-bottom: 0.75rem;
}

.webform-multiple-table .table {
  display: table;
  overflow: visible;
}

.webform-multiple-table .table thead:has(.visually-hidden) {
  display: none;
}

.webform-multiple-table .table thead th {
  padding: 0.5rem;
  font-size: 0.875rem;
  background: none;
  border-bottom: 1px solid var(--imtm-color-gray-50);
}

.webform-multiple-table .table td {
  padding: 0.375rem 0.5rem;
  vertical-align: middle;
  border-bottom: 1px solid var(--imtm-color-gray-25);
}

.webform-multiple-table .table tr:first-child td {
  padding-top: 0;
}

.webform-multiple-table .table td:first-child {
  padding-left: 0;
}

.webform-multiple-table .table td:last-child {
  padding-right: 0;
}

.webform-multiple-table .table td .form-item {
  margin: 0;
}

.webform-multiple-table td.webform-multiple-table--handle {
  width: 1%;
  padding-left: 0;
}

.webform-multiple-table a.tabledrag-handle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2.25rem;
  margin: 0;
  float: none;
}

.webform-multiple-table a.tabledrag-handle .handle {
  width: 1rem;
  height: 1rem;
  padding: 0;
  margin: 0;
  background-position: center;
  background-size: 1rem;
}

.webform-multiple-table td.webform-multiple-table--operations,
.webform-multiple-table td.webform-multiple-table--operations-two {
  width: 1%;
  padding: 0.375rem 0 0.375rem 0.5rem;
  white-space: nowrap;
}

.webform-multiple-table td.webform-multiple-table--operations input[type='image'].form-submit {
  box-sizing: border-box;
  width: 2.25rem;
  min-width: 2.25rem;
  max-width: 2.25rem;
  height: 2.25rem;
  min-height: 2.25rem;
  padding: 0.5625rem;
  margin: 0;
  vertical-align: middle;
  cursor: pointer;
  background: var(--imtm-color-white);
  border: 1px solid var(--imtm-form-control-border);
  border-radius: var(--imtm-radius);
  opacity: 1;
  object-fit: contain;
  transition: background-color var(--imtm-transition), border-color var(--imtm-transition);
}

.webform-multiple-table td.webform-multiple-table--operations input[type='image'].form-submit + input[type='image'].form-submit {
  margin-left: 0.375rem;
}

.webform-multiple-table td.webform-multiple-table--operations input[type='image'].form-submit:hover {
  background: var(--imtm-color-surface);
  border-color: var(--imtm-form-control-border-hover);
}

.webform-multiple-table td.webform-multiple-table--operations input[type='image'].form-submit:focus-visible {
  outline: var(--imtm-focus-outline);
  outline-offset: var(--imtm-focus-outline-offset);
}

.webform-multiple-table .webform-multiple-sort-weight {
  width: 5rem;
}

/* "Show row weights" sits under the table, aligned right, not floated. */
.tabledrag-toggle-weight-wrapper.webform-multiple-tabledrag-toggle-weight {
  display: flex;
  justify-content: flex-end;
  float: none;
  margin: 0.5rem 0 0;
}

/* Add N more items row. */
.webform-multiple-add.container-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: stretch;
}

.webform-multiple-add .form-item,
.webform-multiple-add .form-submit {
  margin: 0;
}

.webform-multiple-add .form-item {
  display: flex;
}

.webform-multiple-add .form-element--text[type='number'] {
  width: 4.5rem;
  min-height: var(--imtm-button-height-small);
  padding: 0.25rem 0.5rem;
}

.webform-multiple-add .form-item__suffix {
  padding: 0.25rem 0.75rem;
  font-size: 0.875rem;
}

/* Small screens: keep each row on one line (handle, field, icons). */
@media (max-width: 768px) {
  .webform-multiple-table-responsive .table,
  .webform-multiple-table-responsive tbody {
    display: block;
  }

  .webform-multiple-table-responsive tr {
    display: flex;
    gap: 0.25rem 0.5rem;
    align-items: center;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--imtm-color-gray-25);
  }

  .webform-multiple-table-responsive .table td,
  .webform-multiple-table-responsive td {
    display: block;
    flex: 0 0 auto;
    padding: 0;
    border: 0;
  }

  .webform-multiple-table-responsive tr > td:not(.webform-multiple-table--handle):not(.webform-multiple-table--operations):not(.webform-multiple-table--weight) {
    flex: 1 1 0;
    min-width: 0;
  }

  .webform-multiple-table-responsive td.webform-multiple-table--operations,
  .webform-multiple-table-responsive td.webform-multiple-table--handle {
    position: static;
    width: auto;
    padding: 0;
  }

  .webform-multiple-table .webform-multiple-sort-weight {
    width: 4rem;
  }

  .webform-multiple-table-responsive td.webform-multiple-table--weight {
    width: auto;
  }

  /* Single-element multiples: the field label stays hidden (no header). */
  .webform-multiple-table-responsive:has(thead .visually-hidden) td > div > label.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
  }
}

/* ------------------------------------------------------------------------
 * Managed file preview, terms of service.
 * --------------------------------------------------------------------- */

.webform-managed-file-preview-wrapper,
.webform-managed-file-preview-wrapper.form-item {
  display: inline-block;
  padding: 0.5rem;
  border: 1px solid var(--imtm-color-gray-25);
  border-radius: var(--imtm-radius);
}

.webform-terms-of-service-details {
  padding: 0.75rem 1rem;
  margin: 0.5rem 0 0;
  background: var(--imtm-color-surface-light);
  border: 1px solid var(--imtm-color-gray-25);
  border-radius: var(--imtm-radius);
}

.form-type-webform-terms-of-service .form-item__label--option a {
  font-weight: 700;
  color: var(--imtm-color-darkred);
}

/* Modal/slideout terms: the (empty) description holder leaves no gap. */
.form-type-webform-terms-of-service > .form-item__description {
  margin: 0;
}

/* ------------------------------------------------------------------------
 * Wizard progress, confirmation.
 * --------------------------------------------------------------------- */

.webform-progress-tracker .progress-step.is-active .progress-marker::before,
.webform-progress-tracker .progress-step.is-complete .progress-marker::before {
  background-color: var(--imtm-color-darkred);
}

.webform-confirmation__back a {
  font-weight: 700;
  color: var(--imtm-color-darkred);
}

/* ------------------------------------------------------------------------
 * Dialogs (terms of service modal, jQuery UI).
 * --------------------------------------------------------------------- */

.ui-dialog.ui-widget {
  padding: 0;
  font-family: var(--imtm-font-family);
  border: 1px solid var(--imtm-color-gray-25);
  border-radius: var(--imtm-radius-lg);
  box-shadow: var(--imtm-shadow-tile);
}

.ui-dialog .ui-dialog-titlebar {
  padding: 0.875rem 1.25rem;
  font-size: 1.1rem;
  color: var(--imtm-color-text);
  background: var(--imtm-color-surface-light);
  border: 0;
  border-bottom: 1px solid var(--imtm-color-gray-25);
  border-radius: var(--imtm-radius-lg) var(--imtm-radius-lg) 0 0;
}

.ui-dialog .ui-dialog-content {
  padding: 1.25rem;
  color: var(--imtm-color-text);
}

.ui-dialog .ui-dialog-titlebar-close:focus-visible {
  outline: var(--imtm-focus-outline);
  outline-offset: var(--imtm-focus-outline-offset);
}

/* ------------------------------------------------------------------------
 * Term checkboxes in a scroll box.
 * --------------------------------------------------------------------- */

.webform-term-checkboxes-scroll .fieldset-wrapper {
  max-height: 14rem;
  padding: 0.75rem 1rem;
  overflow: auto;
  border: 1px solid var(--imtm-form-control-border);
  border-radius: var(--imtm-radius);
}

/* ------------------------------------------------------------------------
 * Sticky table headers (core .sticky-header, e.g. likert) would stack
 * above the sticky site header (z-index 500): not sticky inside forms.
 * --------------------------------------------------------------------- */

form table.sticky-header thead {
  position: static;
  z-index: auto;
}