@patternfly/patternfly/components/Form/form.css

Assets, source, tooling, and content for PatternFly 4

.pf-v5-c-form {
  --pf-v5-c-form--GridGap: var(--pf-v5-global--gutter--md);
  --pf-v5-c-form__group--m-action--MarginTop: var(--pf-v5-global--spacer--xl);
  --pf-v5-c-form--m-horizontal__group-label--md--GridColumnWidth: 9.375rem;
  --pf-v5-c-form--m-horizontal__group-label--md--GridColumnGap: var(--pf-v5-global--spacer--md);
  --pf-v5-c-form--m-horizontal__group-control--md--GridColumnWidth: 1fr;
  --pf-v5-c-form--m-limit-width--MaxWidth: 55rem;
  --pf-v5-c-form--m-horizontal__group-label--md--PaddingTop: calc((((((var(--pf-v5-global--FontSize--md) * var(--pf-v5-global--LineHeight--md)) + (2 * var(--pf-v5-global--BorderWidth--sm))) - var(--pf-v5-global--FontSize--md)) / 2) + var(--pf-v5-global--FontSize--md)) - ((((var(--pf-v5-global--FontSize--sm) * var(--pf-v5-global--LineHeight--sm)) - var(--pf-v5-global--FontSize--sm)) / 2) + var(--pf-v5-global--FontSize--sm)) + var(--pf-v5-global--BorderWidth--sm));
  --pf-v5-c-form__group-label--PaddingBottom: var(--pf-v5-global--spacer--sm);
  --pf-v5-c-form--m-horizontal__group-label--m-no-padding--md--PaddingTop: 0;
  --pf-v5-c-form--m-horizontal__group-label--m-no-padding--md--TranslateY: calc(((((var(--pf-v5-global--FontSize--sm) * var(--pf-v5-global--LineHeight--sm)) - var(--pf-v5-global--FontSize--sm)) / 2) + var(--pf-v5-global--FontSize--sm)) - ((((var(--pf-v5-global--FontSize--md) * var(--pf-v5-global--LineHeight--sm)) - var(--pf-v5-global--FontSize--md)) / 2) + var(--pf-v5-global--FontSize--md)));
  --pf-v5-c-form__label--FontSize: var(--pf-v5-global--FontSize--sm);
  --pf-v5-c-form__label--LineHeight: var(--pf-v5-global--LineHeight--sm);
  --pf-v5-c-form__label--m-disabled--Color: var(--pf-v5-global--disabled-color--100);
  --pf-v5-c-form__label--hover--Cursor: pointer;
  --pf-v5-c-form__label--m-disabled--hover--Cursor: not-allowed;
  --pf-v5-c-form__label-text--FontWeight: var(--pf-v5-global--FontWeight--bold);
  --pf-v5-c-form__label-required--MarginLeft: var(--pf-v5-global--spacer--xs);
  --pf-v5-c-form__label-required--FontSize: var(--pf-v5-global--FontSize--sm);
  --pf-v5-c-form__label-required--Color: var(--pf-v5-global--danger-color--100);
  --pf-v5-c-form__group-label-help--BackgroundColor: transparent;
  --pf-v5-c-form__group-label-help--PaddingTop: var(--pf-v5-global--spacer--xs);
  --pf-v5-c-form__group-label-help--PaddingRight: var(--pf-v5-global--spacer--xs);
  --pf-v5-c-form__group-label-help--PaddingBottom: var(--pf-v5-global--spacer--xs);
  --pf-v5-c-form__group-label-help--PaddingLeft: var(--pf-v5-global--spacer--xs);
  --pf-v5-c-form__group-label-help--MarginTop: calc(var(--pf-v5-c-form__group-label-help--PaddingTop) * -1);
  --pf-v5-c-form__group-label-help--MarginRight: calc(var(--pf-v5-c-form__group-label-help--PaddingRight) * -1);
  --pf-v5-c-form__group-label-help--MarginBottom: calc(var(--pf-v5-c-form__group-label-help--PaddingBottom) * -1);
  --pf-v5-c-form__group-label-help--MarginLeft: calc(var(--pf-v5-c-form__group-label-help--PaddingLeft) * -1 + var(--pf-v5-global--spacer--xs));
  --pf-v5-c-form__group-label-help--FontSize: var(--pf-v5-global--FontSize--sm);
  --pf-v5-c-form__group-label-help--TranslateY: 0.125rem;
  --pf-v5-c-form__group-label-help--Color: var(--pf-v5-global--Color--200);
  --pf-v5-c-form__group-label-help--hover--Color: var(--pf-v5-global--Color--100);
  --pf-v5-c-form__group-label-help--focus--Color: var(--pf-v5-global--Color--100);
  --pf-v5-c-form__group-label--m-info--Gap: var(--pf-v5-global--spacer--sm);
  --pf-v5-c-form__group-label-info--FontSize: var(--pf-v5-global--FontSize--sm);
  --pf-v5-c-form--m-horizontal__group-label--m-info--Gap: var(--pf-v5-global--spacer--sm);
  --pf-v5-c-form__group-control--m-inline--child--MarginRight: var(--pf-v5-global--spacer--lg);
  --pf-v5-c-form__group-control__helper-text--MarginBottom: var(--pf-v5-global--spacer--xs);
  --pf-v5-c-form__group-control--m-stack--Gap: var(--pf-v5-global--spacer--sm);
  --pf-v5-c-form__group-control--m-stack__helper-text--MarginTop: calc(var(--pf-v5-c-form__group-control--m-stack--Gap) * -1 + var(--pf-v5-c-form__helper-text--MarginTop--base));
  --pf-v5-c-form__actions--child--MarginTop: var(--pf-v5-global--spacer--sm);
  --pf-v5-c-form__actions--child--MarginRight: var(--pf-v5-global--spacer--sm);
  --pf-v5-c-form__actions--child--MarginBottom: var(--pf-v5-global--spacer--sm);
  --pf-v5-c-form__actions--child--MarginLeft: var(--pf-v5-global--spacer--sm);
  --pf-v5-c-form__actions--MarginTop: calc(var(--pf-v5-c-form__actions--child--MarginTop) * -1);
  --pf-v5-c-form__actions--MarginRight: calc(var(--pf-v5-c-form__actions--child--MarginRight) * -1);
  --pf-v5-c-form__actions--MarginBottom: calc(var(--pf-v5-c-form__actions--child--MarginBottom) * -1);
  --pf-v5-c-form__actions--MarginLeft: calc(var(--pf-v5-c-form__actions--child--MarginLeft) * -1);
  --pf-v5-c-form__helper-text--MarginTop--base: var(--pf-v5-global--spacer--xs);
  --pf-v5-c-form__helper-text--MarginTop: var(--pf-v5-c-form__helper-text--MarginTop--base);
  --pf-v5-c-form__helper-text--FontSize: var(--pf-v5-global--FontSize--sm);
  --pf-v5-c-form__helper-text--Color: var(--pf-v5-global--Color--100);
  --pf-v5-c-form__helper-text-icon--FontSize: var(--pf-v5-global--FontSize--md);
  --pf-v5-c-form__helper-text-icon--MarginRight: var(--pf-v5-global--spacer--xs);
  --pf-v5-c-form__helper-text--m-success--Color: var(--pf-v5-global--success-color--200);
  --pf-v5-c-form__helper-text--m-warning--Color: var(--pf-v5-global--warning-color--200);
  --pf-v5-c-form__helper-text--m-error--Color: var(--pf-v5-global--danger-color--100);
  --pf-v5-c-form__section--MarginTop: var(--pf-v5-global--spacer--xl);
  --pf-v5-c-form__section--Gap: var(--pf-v5-global--gutter--md);
  --pf-v5-c-form__section-title--FontSize: var(--pf-v5-global--FontSize--lg);
  --pf-v5-c-form__section-title--FontWeight: var(--pf-v5-global--FontWeight--bold);
  --pf-v5-c-form__section-title--MarginBottom: calc(var(--pf-v5-global--spacer--sm) * -1);
  --pf-v5-c-form__field-group--border-width-base: var(--pf-v5-global--BorderWidth--sm);
  --pf-v5-c-form__field-group--BorderTopWidth: var(--pf-v5-c-form__field-group--border-width-base);
  --pf-v5-c-form__field-group--BorderTopColor: var(--pf-v5-global--BorderColor--100);
  --pf-v5-c-form__field-group--BorderBottomWidth: var(--pf-v5-c-form__field-group--border-width-base);
  --pf-v5-c-form__field-group--BorderBottomColor: var(--pf-v5-global--BorderColor--100);
  --pf-v5-c-form__field-group--field-group--MarginTop: calc(var(--pf-v5-c-form--GridGap) * -1);
  --pf-v5-c-form__field-group--GridTemplateColumns--toggle: calc(var(--pf-v5-global--spacer--md) * 2 + var(--pf-v5-c-form__field-group-toggle-icon--MinWidth) + var(--pf-v5-global--spacer--xs));
  --pf-v5-c-form__field-group-toggle--PaddingTop: var(--pf-v5-global--spacer--md);
  --pf-v5-c-form__field-group-toggle--PaddingRight: var(--pf-v5-global--spacer--xs);
  --pf-v5-c-form__field-group__field-group__field-group-toggle--PaddingTop: var(--pf-v5-global--spacer--lg);
  --pf-v5-c-form__field-group-header-toggle--BorderWidth--base: var(--pf-v5-global--BorderWidth--sm);
  --pf-v5-c-form__field-group__field-group--field-group__field-group-toggle--after--BorderTopWidth: var(--pf-v5-c-form__field-group-header-toggle--BorderWidth--base);
  --pf-v5-c-form__field-group-toggle-button--MarginTop: calc(var(--pf-v5-global--spacer--form-element) * -1);
  --pf-v5-c-form__field-group-toggle-button--MarginBottom: calc(var(--pf-v5-global--spacer--form-element) * -1);
  --pf-v5-c-form__field-group-toggle-icon--Transition: var(--pf-v5-global--Transition);
  --pf-v5-c-form__field-group-toggle-icon--MinWidth: var(--pf-v5-global--FontSize--md);
  --pf-v5-c-form__field-group-toggle-icon--Rotate: 0;
  --pf-v5-c-form__field-group--m-expanded__toggle-icon--Rotate: 90deg;
  --pf-v5-c-form__field-group-header--PaddingTop: var(--pf-v5-global--spacer--md);
  --pf-v5-c-form__field-group-header--PaddingBottom: var(--pf-v5-global--spacer--md);
  --pf-v5-c-form__field-group-header--GridColumn: 1 / 3;
  --pf-v5-c-form__field-group__field-group__field-group-header--PaddingTop: var(--pf-v5-global--spacer--lg);
  --pf-v5-c-form__field-group__field-group__field-group-header--PaddingBottom: var(--pf-v5-global--spacer--lg);
  --pf-v5-c-form__field-group-toggle--field-group-header--GridColumn: 2 / 3;
  --pf-v5-c-form__field-group__field-group--field-group__field-group-header--after--BorderTopWidth: var(--pf-v5-c-form__field-group-header-toggle--BorderWidth--base);
  --pf-v5-c-form__field-group-header-description--MarginTop: var(--pf-v5-global--spacer--xs);
  --pf-v5-c-form__field-group-header-description--Color: var(--pf-v5-global--Color--200);
  --pf-v5-c-form__field-group-header-actions--MarginTop: calc(var(--pf-v5-global--spacer--form-element) * -1);
  --pf-v5-c-form__field-group-header-actions--MarginBottom: calc(var(--pf-v5-global--spacer--form-element) * -1);
  --pf-v5-c-form__field-group-header-actions--MarginLeft: var(--pf-v5-global--spacer--sm);
  --pf-v5-c-form__field-group-body--PaddingTop: var(--pf-v5-global--spacer--lg);
  --pf-v5-c-form__field-group-body--PaddingBottom: var(--pf-v5-global--spacer--lg);
  --pf-v5-c-form__field-group-body--Gap: var(--pf-v5-c-form--GridGap);
  --pf-v5-c-form__field-group-body--GridColumn: 2 / 3;
  --pf-v5-c-form__field-group__field-group__field-group-body--GridColumn: 1 / 3;
  --pf-v5-c-form__field-group__field-group__field-group-toggle--field-group-body--GridColumn: 2 / 3;
  --pf-v5-c-form__field-group-body__field-group--last-child--MarginBottom: calc(var(--pf-v5-c-form__field-group-body--PaddingBottom) * -1);
  display: grid;
  gap: var(--pf-v5-c-form--GridGap);
}
.pf-v5-c-form.pf-m-horizontal.pf-m-align-right .pf-v5-c-form__label {
  text-align: end;
}
@media screen and (min-width: 768px) {
  .pf-v5-c-form.pf-m-horizontal {
    --pf-v5-c-form__group-label--PaddingBottom: 0;
  }
  .pf-v5-c-form.pf-m-horizontal .pf-v5-c-form__group {
    display: grid;
    grid-template-columns: var(--pf-v5-c-form--m-horizontal__group-label--md--GridColumnWidth) var(--pf-v5-c-form--m-horizontal__group-control--md--GridColumnWidth);
    grid-column-gap: var(--pf-v5-c-form--m-horizontal__group-label--md--GridColumnGap);
  }
  .pf-v5-c-form.pf-m-horizontal .pf-v5-c-form__group-label {
    padding-block-start: var(--pf-v5-c-form--m-horizontal__group-label--md--PaddingTop);
  }
  .pf-v5-c-form.pf-m-horizontal .pf-v5-c-form__group-label.pf-m-no-padding-top {
    --pf-v5-c-form--m-horizontal__group-label--md--PaddingTop: var(--pf-v5-c-form--m-horizontal__group-label--m-no-padding--md--PaddingTop);
    transform: translateY(var(--pf-v5-c-form--m-horizontal__group-label--m-no-padding--md--TranslateY));
  }
  .pf-v5-c-form.pf-m-horizontal .pf-v5-c-form__group-label.pf-m-info {
    flex-direction: column;
    gap: var(--pf-v5-c-form--m-horizontal__group-label--m-info--Gap);
    align-items: flex-start;
  }
  .pf-v5-c-form.pf-m-horizontal .pf-v5-c-form__group-label-main {
    flex-grow: 0;
  }
  .pf-v5-c-form.pf-m-horizontal .pf-v5-c-form__group-control {
    grid-column: 2;
  }
}
@media screen and (min-width: 0) {
  .pf-v5-c-form.pf-m-horizontal-on-xs {
    --pf-v5-c-form__group-label--PaddingBottom: 0;
  }
  .pf-v5-c-form.pf-m-horizontal-on-xs .pf-v5-c-form__group {
    display: grid;
    grid-template-columns: var(--pf-v5-c-form--m-horizontal__group-label--md--GridColumnWidth) var(--pf-v5-c-form--m-horizontal__group-control--md--GridColumnWidth);
    grid-column-gap: var(--pf-v5-c-form--m-horizontal__group-label--md--GridColumnGap);
  }
  .pf-v5-c-form.pf-m-horizontal-on-xs .pf-v5-c-form__group-label {
    padding-block-start: var(--pf-v5-c-form--m-horizontal__group-label--md--PaddingTop);
  }
  .pf-v5-c-form.pf-m-horizontal-on-xs .pf-v5-c-form__group-label.pf-m-no-padding-top {
    --pf-v5-c-form--m-horizontal__group-label--md--PaddingTop: var(--pf-v5-c-form--m-horizontal__group-label--m-no-padding--md--PaddingTop);
    transform: translateY(var(--pf-v5-c-form--m-horizontal__group-label--m-no-padding--md--TranslateY));
  }
  .pf-v5-c-form.pf-m-horizontal-on-xs .pf-v5-c-form__group-label.pf-m-info {
    flex-direction: column;
    gap: var(--pf-v5-c-form--m-horizontal__group-label--m-info--Gap);
    align-items: flex-start;
  }
  .pf-v5-c-form.pf-m-horizontal-on-xs .pf-v5-c-form__group-label-main {
    flex-grow: 0;
  }
  .pf-v5-c-form.pf-m-horizontal-on-xs .pf-v5-c-form__group-control {
    grid-column: 2;
  }
}
@media (min-width: 576px) {
  .pf-v5-c-form.pf-m-horizontal-on-sm {
    --pf-v5-c-form__group-label--PaddingBottom: 0;
  }
  .pf-v5-c-form.pf-m-horizontal-on-sm .pf-v5-c-form__group {
    display: grid;
    grid-template-columns: var(--pf-v5-c-form--m-horizontal__group-label--md--GridColumnWidth) var(--pf-v5-c-form--m-horizontal__group-control--md--GridColumnWidth);
    grid-column-gap: var(--pf-v5-c-form--m-horizontal__group-label--md--GridColumnGap);
  }
  .pf-v5-c-form.pf-m-horizontal-on-sm .pf-v5-c-form__group-label {
    padding-block-start: var(--pf-v5-c-form--m-horizontal__group-label--md--PaddingTop);
  }
  .pf-v5-c-form.pf-m-horizontal-on-sm .pf-v5-c-form__group-label.pf-m-no-padding-top {
    --pf-v5-c-form--m-horizontal__group-label--md--PaddingTop: var(--pf-v5-c-form--m-horizontal__group-label--m-no-padding--md--PaddingTop);
    transform: translateY(var(--pf-v5-c-form--m-horizontal__group-label--m-no-padding--md--TranslateY));
  }
  .pf-v5-c-form.pf-m-horizontal-on-sm .pf-v5-c-form__group-label.pf-m-info {
    flex-direction: column;
    gap: var(--pf-v5-c-form--m-horizontal__group-label--m-info--Gap);
    align-items: flex-start;
  }
  .pf-v5-c-form.pf-m-horizontal-on-sm .pf-v5-c-form__group-label-main {
    flex-grow: 0;
  }
  .pf-v5-c-form.pf-m-horizontal-on-sm .pf-v5-c-form__group-control {
    grid-column: 2;
  }
}
@media (min-width: 768px) {
  .pf-v5-c-form.pf-m-horizontal-on-md {
    --pf-v5-c-form__group-label--PaddingBottom: 0;
  }
  .pf-v5-c-form.pf-m-horizontal-on-md .pf-v5-c-form__group {
    display: grid;
    grid-template-columns: var(--pf-v5-c-form--m-horizontal__group-label--md--GridColumnWidth) var(--pf-v5-c-form--m-horizontal__group-control--md--GridColumnWidth);
    grid-column-gap: var(--pf-v5-c-form--m-horizontal__group-label--md--GridColumnGap);
  }
  .pf-v5-c-form.pf-m-horizontal-on-md .pf-v5-c-form__group-label {
    padding-block-start: var(--pf-v5-c-form--m-horizontal__group-label--md--PaddingTop);
  }
  .pf-v5-c-form.pf-m-horizontal-on-md .pf-v5-c-form__group-label.pf-m-no-padding-top {
    --pf-v5-c-form--m-horizontal__group-label--md--PaddingTop: var(--pf-v5-c-form--m-horizontal__group-label--m-no-padding--md--PaddingTop);
    transform: translateY(var(--pf-v5-c-form--m-horizontal__group-label--m-no-padding--md--TranslateY));
  }
  .pf-v5-c-form.pf-m-horizontal-on-md .pf-v5-c-form__group-label.pf-m-info {
    flex-direction: column;
    gap: var(--pf-v5-c-form--m-horizontal__group-label--m-info--Gap);
    align-items: flex-start;
  }
  .pf-v5-c-form.pf-m-horizontal-on-md .pf-v5-c-form__group-label-main {
    flex-grow: 0;
  }
  .pf-v5-c-form.pf-m-horizontal-on-md .pf-v5-c-form__group-control {
    grid-column: 2;
  }
}
@media (min-width: 992px) {
  .pf-v5-c-form.pf-m-horizontal-on-lg {
    --pf-v5-c-form__group-label--PaddingBottom: 0;
  }
  .pf-v5-c-form.pf-m-horizontal-on-lg .pf-v5-c-form__group {
    display: grid;
    grid-template-columns: var(--pf-v5-c-form--m-horizontal__group-label--md--GridColumnWidth) var(--pf-v5-c-form--m-horizontal__group-control--md--GridColumnWidth);
    grid-column-gap: var(--pf-v5-c-form--m-horizontal__group-label--md--GridColumnGap);
  }
  .pf-v5-c-form.pf-m-horizontal-on-lg .pf-v5-c-form__group-label {
    padding-block-start: var(--pf-v5-c-form--m-horizontal__group-label--md--PaddingTop);
  }
  .pf-v5-c-form.pf-m-horizontal-on-lg .pf-v5-c-form__group-label.pf-m-no-padding-top {
    --pf-v5-c-form--m-horizontal__group-label--md--PaddingTop: var(--pf-v5-c-form--m-horizontal__group-label--m-no-padding--md--PaddingTop);
    transform: translateY(var(--pf-v5-c-form--m-horizontal__group-label--m-no-padding--md--TranslateY));
  }
  .pf-v5-c-form.pf-m-horizontal-on-lg .pf-v5-c-form__group-label.pf-m-info {
    flex-direction: column;
    gap: var(--pf-v5-c-form--m-horizontal__group-label--m-info--Gap);
    align-items: flex-start;
  }
  .pf-v5-c-form.pf-m-horizontal-on-lg .pf-v5-c-form__group-label-main {
    flex-grow: 0;
  }
  .pf-v5-c-form.pf-m-horizontal-on-lg .pf-v5-c-form__group-control {
    grid-column: 2;
  }
}
@media (min-width: 1200px) {
  .pf-v5-c-form.pf-m-horizontal-on-xl {
    --pf-v5-c-form__group-label--PaddingBottom: 0;
  }
  .pf-v5-c-form.pf-m-horizontal-on-xl .pf-v5-c-form__group {
    display: grid;
    grid-template-columns: var(--pf-v5-c-form--m-horizontal__group-label--md--GridColumnWidth) var(--pf-v5-c-form--m-horizontal__group-control--md--GridColumnWidth);
    grid-column-gap: var(--pf-v5-c-form--m-horizontal__group-label--md--GridColumnGap);
  }
  .pf-v5-c-form.pf-m-horizontal-on-xl .pf-v5-c-form__group-label {
    padding-block-start: var(--pf-v5-c-form--m-horizontal__group-label--md--PaddingTop);
  }
  .pf-v5-c-form.pf-m-horizontal-on-xl .pf-v5-c-form__group-label.pf-m-no-padding-top {
    --pf-v5-c-form--m-horizontal__group-label--md--PaddingTop: var(--pf-v5-c-form--m-horizontal__group-label--m-no-padding--md--PaddingTop);
    transform: translateY(var(--pf-v5-c-form--m-horizontal__group-label--m-no-padding--md--TranslateY));
  }
  .pf-v5-c-form.pf-m-horizontal-on-xl .pf-v5-c-form__group-label.pf-m-info {
    flex-direction: column;
    gap: var(--pf-v5-c-form--m-horizontal__group-label--m-info--Gap);
    align-items: flex-start;
  }
  .pf-v5-c-form.pf-m-horizontal-on-xl .pf-v5-c-form__group-label-main {
    flex-grow: 0;
  }
  .pf-v5-c-form.pf-m-horizontal-on-xl .pf-v5-c-form__group-control {
    grid-column: 2;
  }
}
@media (min-width: 1450px) {
  .pf-v5-c-form.pf-m-horizontal-on-2xl {
    --pf-v5-c-form__group-label--PaddingBottom: 0;
  }
  .pf-v5-c-form.pf-m-horizontal-on-2xl .pf-v5-c-form__group {
    display: grid;
    grid-template-columns: var(--pf-v5-c-form--m-horizontal__group-label--md--GridColumnWidth) var(--pf-v5-c-form--m-horizontal__group-control--md--GridColumnWidth);
    grid-column-gap: var(--pf-v5-c-form--m-horizontal__group-label--md--GridColumnGap);
  }
  .pf-v5-c-form.pf-m-horizontal-on-2xl .pf-v5-c-form__group-label {
    padding-block-start: var(--pf-v5-c-form--m-horizontal__group-label--md--PaddingTop);
  }
  .pf-v5-c-form.pf-m-horizontal-on-2xl .pf-v5-c-form__group-label.pf-m-no-padding-top {
    --pf-v5-c-form--m-horizontal__group-label--md--PaddingTop: var(--pf-v5-c-form--m-horizontal__group-label--m-no-padding--md--PaddingTop);
    transform: translateY(var(--pf-v5-c-form--m-horizontal__group-label--m-no-padding--md--TranslateY));
  }
  .pf-v5-c-form.pf-m-horizontal-on-2xl .pf-v5-c-form__group-label.pf-m-info {
    flex-direction: column;
    gap: var(--pf-v5-c-form--m-horizontal__group-label--m-info--Gap);
    align-items: flex-start;
  }
  .pf-v5-c-form.pf-m-horizontal-on-2xl .pf-v5-c-form__group-label-main {
    flex-grow: 0;
  }
  .pf-v5-c-form.pf-m-horizontal-on-2xl .pf-v5-c-form__group-control {
    grid-column: 2;
  }
}
.pf-v5-c-form.pf-m-limit-width {
  max-width: var(--pf-v5-c-form--m-limit-width--MaxWidth);
}

.pf-v5-c-form__group {
  min-width: 0;
}
.pf-v5-c-form__group.pf-m-action {
  margin-block-start: var(--pf-v5-c-form__group--m-action--MarginTop);
  overflow: hidden;
}

.pf-v5-c-form__section {
  display: grid;
  gap: var(--pf-v5-c-form__section--Gap);
}
.pf-v5-c-form__section + .pf-v5-c-form__group:not(.pf-m-action), .pf-v5-c-form__section:not(:first-child) {
  margin-block-start: var(--pf-v5-c-form__section--MarginTop);
}

.pf-v5-c-form__section-title {
  margin-block-end: var(--pf-v5-c-form__section-title--MarginBottom);
  font-size: var(--pf-v5-c-form__section-title--FontSize);
  font-weight: var(--pf-v5-c-form__section-title--FontWeight);
}

.pf-v5-c-form__group-label {
  --pf-v5-c-form__helper-text--MarginTop: 0;
  padding-block-end: var(--pf-v5-c-form__group-label--PaddingBottom);
}
.pf-v5-c-form__group-label.pf-m-info {
  display: flex;
  gap: var(--pf-v5-c-form__group-label--m-info--Gap);
  align-items: flex-end;
}

.pf-v5-c-form__group-label-main {
  flex-grow: 1;
}

.pf-v5-c-form__group-label-info {
  font-size: var(--pf-v5-c-form__group-label-info--FontSize);
}

.pf-v5-c-form__label {
  font-size: var(--pf-v5-c-form__label--FontSize);
  line-height: var(--pf-v5-c-form__label--LineHeight);
}
.pf-v5-c-form__label::selection {
  background-color: none;
}
.pf-v5-c-form__label:not(.pf-m-disabled):hover {
  cursor: var(--pf-v5-c-form__label--hover--Cursor);
}
.pf-v5-c-form__label.pf-m-disabled {
  color: var(--pf-v5-c-form__label--m-disabled--Color);
}
.pf-v5-c-form__label.pf-m-disabled:hover {
  cursor: var(--pf-v5-c-form__label--m-disabled--hover--Cursor);
}

.pf-v5-c-form__label-text {
  font-weight: var(--pf-v5-c-form__label-text--FontWeight);
}

.pf-v5-c-form__label-required {
  margin-inline-start: var(--pf-v5-c-form__label-required--MarginLeft);
  font-size: var(--pf-v5-c-form__label-required--FontSize);
  color: var(--pf-v5-c-form__label-required--Color);
}

.pf-v5-c-form__group-label-help {
  padding-block-start: var(--pf-v5-c-form__group-label-help--PaddingTop);
  padding-block-end: var(--pf-v5-c-form__group-label-help--PaddingBottom);
  padding-inline-start: var(--pf-v5-c-form__group-label-help--PaddingLeft);
  padding-inline-end: var(--pf-v5-c-form__group-label-help--PaddingRight);
  margin-block-start: var(--pf-v5-c-form__group-label-help--MarginTop);
  margin-block-end: var(--pf-v5-c-form__group-label-help--MarginBottom);
  margin-inline-start: var(--pf-v5-c-form__group-label-help--MarginLeft);
  margin-inline-end: var(--pf-v5-c-form__group-label-help--MarginRight);
  font-size: var(--pf-v5-c-form__group-label-help--FontSize);
  line-height: 1;
  color: var(--pf-v5-c-form__group-label-help--Color);
  cursor: pointer;
  background-color: var(--pf-v5-c-form__group-label-help--BackgroundColor);
  border: 0;
  transform: translateY(var(--pf-v5-c-form__group-label-help--TranslateY));
}
.pf-v5-c-form__group-label-help:hover {
  --pf-v5-c-form__group-label-help--Color: var(--pf-v5-c-form__group-label-help--hover--Color);
}
.pf-v5-c-form__group-label-help:focus-within {
  --pf-v5-c-form__group-label-help--Color: var(--pf-v5-c-form__group-label-help--focus--Color);
}

.pf-v5-c-form__group-control {
  min-width: 0;
}
.pf-v5-c-form__group-control.pf-m-inline {
  display: flex;
  flex-flow: row wrap;
}
.pf-v5-c-form__group-control.pf-m-inline > * {
  margin-inline-end: var(--pf-v5-c-form__group-control--m-inline--child--MarginRight);
}
.pf-v5-c-form__group-control.pf-m-inline > :last-child {
  --pf-v5-c-form__group-control--m-inline--child--MarginRight: 0;
}
.pf-v5-c-form__group-control.pf-m-stack {
  --pf-v5-c-form__helper-text--MarginTop: var(--pf-v5-c-form__group-control--m-stack__helper-text--MarginTop);
  display: grid;
  gap: var(--pf-v5-c-form__group-control--m-stack--Gap);
}
.pf-v5-c-form__group-control .pf-v5-c-form__helper-text:first-child {
  --pf-v5-c-form__helper-text--MarginTop: 0;
  margin-block-end: var(--pf-v5-c-form__group-control__helper-text--MarginBottom);
}

.pf-v5-c-form__helper-text {
  margin-block-start: var(--pf-v5-c-form__helper-text--MarginTop);
  font-size: var(--pf-v5-c-form__helper-text--FontSize);
  color: var(--pf-v5-c-form__helper-text--Color);
}
.pf-v5-c-form__helper-text.pf-m-error {
  --pf-v5-c-form__helper-text--Color: var(--pf-v5-c-form__helper-text--m-error--Color);
}
.pf-v5-c-form__helper-text.pf-m-success {
  --pf-v5-c-form__helper-text--Color: var(--pf-v5-c-form__helper-text--m-success--Color);
}
.pf-v5-c-form__helper-text.pf-m-warning {
  --pf-v5-c-form__helper-text--Color: var(--pf-v5-c-form__helper-text--m-warning--Color);
}
.pf-v5-c-form__helper-text.pf-m-inactive {
  display: none;
}
.pf-v5-c-form__helper-text.pf-m-hidden {
  visibility: hidden;
  opacity: 0;
}

.pf-v5-c-form__helper-text-icon {
  margin-inline-end: var(--pf-v5-c-form__helper-text-icon--MarginRight);
  font-size: var(--pf-v5-c-form__helper-text-icon--FontSize);
}

.pf-v5-c-form__fieldset {
  border: 0;
}

.pf-v5-c-form__actions {
  display: flex;
  flex-wrap: wrap;
  margin-block-start: var(--pf-v5-c-form__actions--MarginTop);
  margin-block-end: var(--pf-v5-c-form__actions--MarginBottom);
  margin-inline-start: var(--pf-v5-c-form__actions--MarginLeft);
  margin-inline-end: var(--pf-v5-c-form__actions--MarginRight);
}
.pf-v5-c-form__actions > * {
  margin-block-start: var(--pf-v5-c-form__actions--child--MarginTop);
  margin-block-end: var(--pf-v5-c-form__actions--child--MarginBottom);
  margin-inline-start: var(--pf-v5-c-form__actions--child--MarginLeft);
  margin-inline-end: var(--pf-v5-c-form__actions--child--MarginRight);
}

.pf-v5-c-form__field-group {
  --pf-v5-c-form__field-group--BorderTopWidth: var(--pf-v5-c-form__field-group--border-width-base);
  display: grid;
  grid-template-columns: minmax(var(--pf-v5-c-form__field-group--GridTemplateColumns--toggle), max-content) 1fr;
  border-block-start: var(--pf-v5-c-form__field-group--BorderTopWidth) solid var(--pf-v5-c-form__field-group--BorderTopColor);
  border-block-end: var(--pf-v5-c-form__field-group--BorderBottomWidth) solid var(--pf-v5-c-form__field-group--BorderBottomColor);
}
.pf-v5-c-form__field-group:last-child {
  --pf-v5-c-form__field-group--BorderBottomWidth: 0;
}
.pf-v5-c-form__field-group + .pf-v5-c-form__field-group, .pf-v5-c-form__field-group:first-child {
  --pf-v5-c-form__field-group--BorderTopWidth: 0;
}
.pf-v5-c-form__field-group + .pf-v5-c-form__field-group {
  margin-block-start: var(--pf-v5-c-form__field-group--field-group--MarginTop);
}
.pf-v5-c-form__field-group .pf-v5-c-form__field-group {
  --pf-v5-c-form__field-group-body--GridColumn: var(--pf-v5-c-form__field-group__field-group__field-group-body--GridColumn);
  --pf-v5-c-form__field-group-toggle--PaddingTop: var(--pf-v5-c-form__field-group__field-group__field-group-toggle--PaddingTop);
  --pf-v5-c-form__field-group-header--PaddingTop: var(--pf-v5-c-form__field-group__field-group__field-group-header--PaddingTop);
  --pf-v5-c-form__field-group-header--PaddingBottom: var(--pf-v5-c-form__field-group__field-group__field-group-header--PaddingBottom);
  --pf-v5-c-form__field-group-body--PaddingTop: 0;
}
.pf-v5-c-form__field-group .pf-v5-c-form__field-group .pf-v5-c-form__field-group-toggle ~ .pf-v5-c-form__field-group-body {
  --pf-v5-c-form__field-group-body--GridColumn: var(--pf-v5-c-form__field-group__field-group__field-group-toggle--field-group-body--GridColumn);
}
.pf-v5-c-form__field-group.pf-m-expanded > .pf-v5-c-form__field-group-toggle {
  --pf-v5-c-form__field-group-toggle-icon--Rotate: var(--pf-v5-c-form__field-group--m-expanded__toggle-icon--Rotate);
}

.pf-v5-c-form__field-group-toggle {
  grid-row: 1/2;
  grid-column: 1/2;
  padding-block-start: var(--pf-v5-c-form__field-group-toggle--PaddingTop);
  padding-inline-end: var(--pf-v5-c-form__field-group-toggle--PaddingRight);
}
.pf-v5-c-form__field-group-toggle + .pf-v5-c-form__field-group-header {
  --pf-v5-c-form__field-group-header--GridColumn: var(--pf-v5-c-form__field-group-toggle--field-group-header--GridColumn);
}

.pf-v5-c-form__field-group-toggle-button {
  margin-block-start: var(--pf-v5-c-form__field-group-toggle-button--MarginTop);
  margin-block-end: var(--pf-v5-c-form__field-group-toggle-button--MarginBottom);
}

.pf-v5-c-form__field-group-toggle-icon {
  display: inline-block;
  min-width: var(--pf-v5-c-form__field-group-toggle-icon--MinWidth);
  text-align: center;
  transition: var(--pf-v5-c-form__field-group-toggle-icon--Transition);
  transform: rotate(var(--pf-v5-c-form__field-group-toggle-icon--Rotate));
}
:where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-form__field-group-toggle-icon {
  scale: -1 1;
}

.pf-v5-c-form__field-group-header {
  display: flex;
  grid-row: 1/2;
  grid-column: var(--pf-v5-c-form__field-group-header--GridColumn);
  align-items: flex-start;
  padding-block-start: var(--pf-v5-c-form__field-group-header--PaddingTop);
  padding-block-end: var(--pf-v5-c-form__field-group-header--PaddingBottom);
}

.pf-v5-c-form__field-group-header-main {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.pf-v5-c-form__field-group-header-title {
  display: flex;
}

.pf-v5-c-form__field-group-header-title-text {
  flex-grow: 1;
}

.pf-v5-c-form__field-group-header-description {
  margin-block-start: var(--pf-v5-c-form__field-group-header-description--MarginTop);
  color: var(--pf-v5-c-form__field-group-header-description--Color);
}

.pf-v5-c-form__field-group-header-actions {
  margin-block-start: var(--pf-v5-c-form__field-group-header-actions--MarginTop);
  margin-block-end: var(--pf-v5-c-form__field-group-header-actions--MarginBottom);
  margin-inline-start: var(--pf-v5-c-form__field-group-header-actions--MarginLeft);
  white-space: nowrap;
}

.pf-v5-c-form__field-group-body {
  display: grid;
  grid-column: var(--pf-v5-c-form__field-group-body--GridColumn);
  gap: var(--pf-v5-c-form__field-group-body--Gap);
  padding-block-start: var(--pf-v5-c-form__field-group-body--PaddingTop);
  padding-block-end: var(--pf-v5-c-form__field-group-body--PaddingBottom);
}
.pf-v5-c-form__field-group-body > .pf-v5-c-form__field-group:first-child {
  --pf-v5-c-form__field-group-toggle--PaddingTop: 0;
  --pf-v5-c-form__field-group-header--PaddingTop: 0;
}
.pf-v5-c-form__field-group-body > .pf-v5-c-form__field-group:last-child {
  margin-block-end: var(--pf-v5-c-form__field-group-body__field-group--last-child--MarginBottom);
}

:where(.pf-v5-theme-dark) .pf-v5-c-form {
  --pf-v5-c-form__helper-text--m-success--Color: var(--pf-v5-global--success-color--100);
}