.pf-v6-c-popover[data-popper-reference-hidden="true"] { visibility: hidden; pointer-events: none; } .pf-v6-c-button { --pf-v6-c-button--Display: inline-flex; --pf-v6-c-button--AlignItems: baseline; --pf-v6-c-button--JustifyContent: center; --pf-v6-c-button--Gap: var(--pf-t--global--spacer--gap--text-to-element--default); --pf-v6-c-button--MinWidth: calc(1em * var(--pf-v6-c-button--LineHeight) + var(--pf-v6-c-button--PaddingBlockStart) + var(--pf-v6-c-button--PaddingBlockEnd)); --pf-v6-c-button--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--default); --pf-v6-c-button--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--default); --pf-v6-c-button--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--default); --pf-v6-c-button--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--default); --pf-v6-c-button--Color: var(--pf-t--global--text--color--regular); --pf-v6-c-button--LineHeight: var(--pf-t--global--font--line-height--body); --pf-v6-c-button--FontWeight: var(--pf-t--global--font--weight--body--default); --pf-v6-c-button--FontSize: var(--pf-t--global--font--size--body--default); --pf-v6-c-button--BackgroundColor: transparent; --pf-v6-c-button--BorderColor: transparent; --pf-v6-c-button--BorderWidth: var(--pf-t--global--border--width--action--default); --pf-v6-c-button--BorderRadius: var(--pf-t--global--border--radius--pill); --pf-v6-c-button--TextDecorationLine: none; --pf-v6-c-button--TextDecorationStyle: none; --pf-v6-c-button--TextDecorationColor: currentcolor; --pf-v6-c-button--TransitionDelay: 0s; --pf-v6-c-button--TransitionDuration: var(--pf-t--global--motion--duration--fade--default); --pf-v6-c-button--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--accelerate); --pf-v6-c-button--TransitionProperty: color, background, border-color; --pf-v6-c-button--ScaleX: 1; --pf-v6-c-button--ScaleY: 1; --pf-v6-c-button--border--offset: 0; --pf-v6-c-button--hover--BackgroundColor: transparent; --pf-v6-c-button--hover--BorderColor: transparent; --pf-v6-c-button--hover--BorderWidth: var(--pf-t--global--border--width--action--hover); --pf-v6-c-button--hover--TextDecorationLine: none; --pf-v6-c-button--hover--TextDecorationStyle: none; --pf-v6-c-button--hover--TextDecorationColor: currentcolor; --pf-v6-c-button--hover--ScaleX: 1; --pf-v6-c-button--hover--ScaleY: 1; --pf-v6-c-button--m-clicked--BackgroundColor: transparent; --pf-v6-c-button--m-clicked--BorderColor: transparent; --pf-v6-c-button--m-clicked--BorderWidth: var(--pf-t--global--border--width--action--clicked); --pf-v6-c-button--m-primary--Color: var(--pf-t--global--text--color--on-brand--default); --pf-v6-c-button--m-primary--BackgroundColor: var(--pf-t--global--color--brand--default); --pf-v6-c-button--m-primary__icon--Color: var(--pf-t--global--icon--color--on-brand--default); --pf-v6-c-button--m-primary--hover--Color: var(--pf-t--global--text--color--on-brand--hover); --pf-v6-c-button--m-primary--hover--BackgroundColor: var(--pf-t--global--color--brand--hover); --pf-v6-c-button--m-primary--hover__icon--Color: var(--pf-t--global--icon--color--on-brand--hover); --pf-v6-c-button--m-primary--m-clicked--Color: var(--pf-t--global--text--color--on-brand--clicked); --pf-v6-c-button--m-primary--m-clicked--BackgroundColor: var(--pf-t--global--color--brand--clicked); --pf-v6-c-button--m-primary--m-clicked__icon--Color: var(--pf-t--global--icon--color--on-brand--clicked); --pf-v6-c-button--m-secondary--Color: var(--pf-t--global--text--color--brand--default); --pf-v6-c-button--m-secondary--BorderColor: var(--pf-t--global--border--color--brand--default); --pf-v6-c-button--m-secondary--TransitionDuration: var(--pf-t--global--motion--duration--fade--short); --pf-v6-c-button--m-secondary__icon--Color: var(--pf-t--global--icon--color--brand--default); --pf-v6-c-button--m-secondary--hover--Color: var(--pf-t--global--text--color--brand--hover); --pf-v6-c-button--m-secondary--hover--BorderColor: var(--pf-t--global--border--color--brand--hover); --pf-v6-c-button--m-secondary--hover__icon--Color: var(--pf-t--global--icon--color--brand--hover); --pf-v6-c-button--m-secondary--m-clicked--Color: var(--pf-t--global--text--color--brand--clicked); --pf-v6-c-button--m-secondary--m-clicked--BorderColor: var(--pf-t--global--border--color--brand--clicked); --pf-v6-c-button--m-secondary--m-clicked__icon--Color: var(--pf-t--global--icon--color--brand--clicked); --pf-v6-c-button--m-secondary--m-danger--Color: var(--pf-t--global--text--color--status--danger--default); --pf-v6-c-button--m-secondary--m-danger--BorderColor: var(--pf-t--global--border--color--status--danger--default); --pf-v6-c-button--m-secondary--m-danger__icon--Color: var(--pf-t--global--icon--color--status--danger--default); --pf-v6-c-button--m-secondary--m-danger--hover--Color: var(--pf-t--global--text--color--status--danger--hover); --pf-v6-c-button--m-secondary--m-danger--hover--BorderColor: var(--pf-t--global--border--color--status--danger--hover); --pf-v6-c-button--m-secondary--m-danger--hover__icon--Color: var(--pf-t--global--icon--color--status--danger--hover); --pf-v6-c-button--m-secondary--m-danger--m-clicked--Color: var(--pf-t--global--text--color--status--danger--clicked); --pf-v6-c-button--m-secondary--m-danger--m-clicked--BorderColor: var(--pf-t--global--border--color--status--danger--clicked); --pf-v6-c-button--m-secondary--m-danger--m-clicked__icon--Color: var(--pf-t--global--icon--color--status--danger--clicked); --pf-v6-c-button--m-tertiary--Color: var(--pf-t--global--text--color--brand--default); --pf-v6-c-button--m-tertiary--BorderColor: var(--pf-t--global--border--color--default); --pf-v6-c-button--m-tertiary--TransitionDuration: var(--pf-t--global--motion--duration--fade--short); --pf-v6-c-button--m-tertiary__icon--Color: var(--pf-t--global--icon--color--brand--default); --pf-v6-c-button--m-tertiary--hover--Color: var(--pf-t--global--text--color--brand--hover); --pf-v6-c-button--m-tertiary--hover--BorderColor: var(--pf-t--global--border--color--hover); --pf-v6-c-button--m-tertiary--hover__icon--Color: var(--pf-t--global--icon--color--brand--hover); --pf-v6-c-button--m-tertiary--m-clicked--Color: var(--pf-t--global--text--color--brand--clicked); --pf-v6-c-button--m-tertiary--m-clicked--BorderColor: var(--pf-t--global--border--color--clicked); --pf-v6-c-button--m-tertiary--m-clicked__icon--Color: var(--pf-t--global--icon--color--brand--clicked); --pf-v6-c-button--m-link--BorderRadius: var(--pf-t--global--border--radius--small); --pf-v6-c-button--m-link--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--plain--default); --pf-v6-c-button--m-link--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--plain--default); --pf-v6-c-button--m-link--Color: var(--pf-t--global--text--color--brand--default); --pf-v6-c-button--m-link--BackgroundColor: var(--pf-t--global--background--color--action--plain--default); --pf-v6-c-button--m-link__icon--Color: var(--pf-t--global--icon--color--brand--default); --pf-v6-c-button--m-link--hover--Color: var(--pf-t--global--text--color--brand--hover); --pf-v6-c-button--m-link--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover); --pf-v6-c-button--m-link--hover__icon--Color: var(--pf-t--global--text--color--brand--hover); --pf-v6-c-button--m-link--m-clicked--Color: var(--pf-t--global--text--color--brand--clicked); --pf-v6-c-button--m-link--m-clicked--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked); --pf-v6-c-button--m-link--m-clicked__icon--Color: var(--pf-t--global--text--color--brand--clicked); --pf-v6-c-button--m-link--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--plain--compact); --pf-v6-c-button--m-link--m-small--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--plain--compact); --pf-v6-c-button--m-link--BorderWidth: var(--pf-t--global--border--width--action--plain--default); --pf-v6-c-button--m-link--m-clicked--BorderWidth: var(--pf-t--global--border--width--action--plain--clicked); --pf-v6-c-button--m-link--hover--BorderWidth: var(--pf-t--global--border--width--action--plain--hover); --pf-v6-c-button--m-link--BorderColor: var(--pf-t--global--border--color--high-contrast); --pf-v6-c-button--m-link--m-clicked--BorderColor: var(--pf-t--global--border--color--high-contrast); --pf-v6-c-button--m-link--hover--BorderColor: var(--pf-t--global--border--color--high-contrast); --pf-v6-c-button--m-link--m-danger--Color: var(--pf-t--global--text--color--status--danger--default); --pf-v6-c-button--m-link--m-danger--BackgroundColor: var(--pf-t--global--background--color--action--plain--default); --pf-v6-c-button--m-link--m-danger__icon--Color: var(--pf-t--global--text--color--status--danger--default); --pf-v6-c-button--m-link--m-danger--hover--Color: var(--pf-t--global--text--color--status--danger--hover); --pf-v6-c-button--m-link--m-danger--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover); --pf-v6-c-button--m-link--m-danger--hover__icon--Color: var(--pf-t--global--text--color--status--danger--hover); --pf-v6-c-button--m-link--m-danger--m-clicked--Color: var(--pf-t--global--text--color--status--danger--clicked); --pf-v6-c-button--m-link--m-danger--m-clicked--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked); --pf-v6-c-button--m-link--m-danger--m-clicked__icon--Color: var(--pf-t--global--text--color--status--danger--clicked); --pf-v6-c-button--m-link--m-inline--Display: inline-flex; --pf-v6-c-button--m-link--m-inline--JustifyContent: flex-start; --pf-v6-c-button--m-link--m-inline--FontSize: initial; --pf-v6-c-button--m-link--m-inline--LineHeight: initial; --pf-v6-c-button--m-link--m-inline--FontWeight: initial; --pf-v6-c-button--m-link--m-inline--PaddingBlockStart: 0; --pf-v6-c-button--m-link--m-inline--PaddingInlineEnd: 0; --pf-v6-c-button--m-link--m-inline--PaddingBlockEnd: 0; --pf-v6-c-button--m-link--m-inline--PaddingInlineStart: 0; --pf-v6-c-button--m-link--m-inline--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--default); --pf-v6-c-button--m-link--m-inline--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--default); --pf-v6-c-button--m-link--m-inline--hover--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--hover); --pf-v6-c-button--m-link--m-inline--hover--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--hover); --pf-v6-c-button--m-link--m-inline__progress--InsetInlineStart: var(--pf-t--global--spacer--xs); --pf-v6-c-button--m-link--m-inline--m-in-progress--PaddingInlineStart: calc(var(--pf-v6-c-button--m-link--m-inline__progress--InsetInlineStart) + 1rem + var(--pf-t--global--spacer--sm)); --pf-v6-c-button--m-link--m-inline--disabled--Color: var(--pf-t--global--text--color--disabled); --pf-v6-c-button--m-link--m-inline--disabled__icon--Color: var(--pf-t--global--icon--color--disabled); --pf-v6-c-button--span--m-link--m-inline--Display: inline; --pf-v6-c-button--span--m-link--m-inline__icon--m-start--MarginInlineEnd: var(--pf-t--global--spacer--gap--text-to-element--default); --pf-v6-c-button--span--m-link--m-inline__icon--m-end--MarginInlineStart: var(--pf-t--global--spacer--gap--text-to-element--default); --pf-v6-c-button--m-link--m-inline--Color: var(--pf-t--global--text--color--brand--default); --pf-v6-c-button--m-link--m-inline__icon--Color: var(--pf-t--global--icon--color--brand--default); --pf-v6-c-button--m-link--m-inline--TextDecorationColor: currentcolor; --pf-v6-c-button--m-link--m-inline--hover--Color: var(--pf-t--global--text--color--brand--hover); --pf-v6-c-button--m-link--m-inline--hover__icon--Color: var(--pf-t--global--icon--color--brand--hover); --pf-v6-c-button--m-link--m-inline--hover--TextDecorationColor: currentcolor; --pf-v6-c-button--m-plain--BorderRadius: var(--pf-t--global--border--radius--small); --pf-v6-c-button--m-plain--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--plain--default); --pf-v6-c-button--m-plain--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--plain--default); --pf-v6-c-button--m-plain--Color: var(--pf-t--global--icon--color--regular); --pf-v6-c-button--m-plain__icon--Color: var(--pf-t--global--text--color--regular); --pf-v6-c-button--m-plain--BackgroundColor: var(--pf-t--global--background--color--action--plain--default); --pf-v6-c-button--m-plain--hover--Color: var(--pf-t--global--icon--color--regular); --pf-v6-c-button--m-plain--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover); --pf-v6-c-button--m-plain--m-clicked--Color: var(--pf-t--global--icon--color--regular); --pf-v6-c-button--m-plain--m-clicked--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked); --pf-v6-c-button--m-plain--disabled--Color: var(--pf-t--global--text--color--disabled); --pf-v6-c-button--m-plain--disabled__icon--Color: var(--pf-t--global--icon--color--disabled); --pf-v6-c-button--m-plain--disabled--BackgroundColor: transparent; --pf-v6-c-button--m-plain--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--plain--compact); --pf-v6-c-button--m-plain--m-small--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--plain--compact); --pf-v6-c-button--m-plain--BorderWidth: var(--pf-t--global--border--width--action--plain--default); --pf-v6-c-button--m-plain--m-clicked--BorderWidth: var(--pf-t--global--border--width--action--plain--clicked); --pf-v6-c-button--m-plain--hover--BorderWidth: var(--pf-t--global--border--width--action--plain--hover); --pf-v6-c-button--m-plain--BorderColor: transparent; --pf-v6-c-button--m-plain--m-clicked--BorderColor: var(--pf-t--global--border--color--high-contrast); --pf-v6-c-button--m-plain--hover--BorderColor: var(--pf-t--global--border--color--high-contrast); --pf-v6-c-button--m-plain--m-no-padding--MinWidth: auto; --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockStart: 0; --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineEnd: 0; --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockEnd: 0; --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineStart: 0; --pf-v6-c-button--m-plain--m-no-padding--m-small--PaddingInlineStart: 0; --pf-v6-c-button--m-plain--m-no-padding--m-small--PaddingInlineEnd: 0; --pf-v6-c-button--m-plain--m-no-padding__icon--Color: var(--pf-t--global--icon--color--subtle); --pf-v6-c-button--m-plain--m-no-padding--BackgroundColor: transparent; --pf-v6-c-button--m-plain--m-no-padding--hover__icon--Color: var(--pf-t--global--icon--color--regular); --pf-v6-c-button--m-plain--m-no-padding--hover--BackgroundColor: transparent; --pf-v6-c-button--m-plain--m-no-padding--m-clicked--BackgroundColor: transparent; --pf-v6-c-button--m-plain--m-no-padding--border--offset: calc(0.125rem * -1); --pf-v6-c-button--m-control--BorderRadius: var(--pf-t--global--border--radius--small); --pf-v6-c-button--m-control--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--default); --pf-v6-c-button--m-control--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default); --pf-v6-c-button--m-control--Color: var(--pf-t--global--text--color--regular); --pf-v6-c-button--m-control--BackgroundColor: var(--pf-t--global--background--color--control--default); --pf-v6-c-button--m-control--BorderColor: var(--pf-t--global--border--color--default); --pf-v6-c-button--m-control--BorderWidth: var(--pf-t--global--border--width--control--default); --pf-v6-c-button--m-control__icon--Color: var(--pf-t--global--icon--color--regular); --pf-v6-c-button--m-control--hover--Color: var(--pf-t--global--text--color--regular); --pf-v6-c-button--m-control--hover--BackgroundColor: var(--pf-t--global--background--color--control--default); --pf-v6-c-button--m-control--hover--BorderColor: var(--pf-t--global--border--color--hover); --pf-v6-c-button--m-control--hover--BorderWidth: var(--pf-t--global--border--width--control--hover); --pf-v6-c-button--m-control--hover__icon--Color: var(--pf-t--global--icon--color--regular); --pf-v6-c-button--m-control--m-clicked--Color: var(--pf-t--global--text--color--regular); --pf-v6-c-button--m-control--m-clicked--BackgroundColor: var(--pf-t--global--background--color--control--default); --pf-v6-c-button--m-control--m-clicked--BorderColor: var(--pf-t--global--border--color--clicked); --pf-v6-c-button--m-control--m-clicked--BorderWidth: var(--pf-t--global--border--width--control--clicked); --pf-v6-c-button--m-control--m-clicked__icon--Color: var(--pf-t--global--icon--color--regular); --pf-v6-c-button--m-control--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--compact); --pf-v6-c-button--m-control--m-small--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--compact); --pf-v6-c-button--m-stateful--BorderRadius: var(--pf-t--global--border--radius--small); --pf-v6-c-button--m-stateful--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--default); --pf-v6-c-button--m-stateful--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default); --pf-v6-c-button--m-stateful--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--compact); --pf-v6-c-button--m-stateful--m-small--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--compact); --pf-v6-c-button--m-read--BackgroundColor: var(--pf-t--global--background--color--control--default); --pf-v6-c-button--m-read--BorderColor: var(--pf-t--global--border--color--default); --pf-v6-c-button--m-read--hover--BackgroundColor: var(--pf-t--global--background--color--control--default); --pf-v6-c-button--m-read--hover--BorderColor: var(--pf-t--global--border--color--hover); --pf-v6-c-button--m-read--m-clicked--BackgroundColor: var(--pf-t--global--background--color--control--default); --pf-v6-c-button--m-read--m-clicked--BorderColor: var(--pf-t--global--border--color--clicked); --pf-v6-c-button--m-unread--Color: var(--pf-t--global--text--color--status--unread--on-default--default); --pf-v6-c-button--m-unread--BackgroundColor: var(--pf-t--global--color--status--unread--default); --pf-v6-c-button--m-unread__icon--Color: var(--pf-t--global--icon--color--status--unread--on-default--default); --pf-v6-c-button--m-unread--hover--Color: var(--pf-t--global--text--color--status--unread--on-default--hover); --pf-v6-c-button--m-unread--hover--BackgroundColor: var(--pf-t--global--color--status--unread--hover); --pf-v6-c-button--m-unread--hover__icon--Color: var(--pf-t--global--icon--color--status--unread--on-default--hover); --pf-v6-c-button--m-unread--m-clicked--Color: var(--pf-t--global--text--color--status--unread--on-default--clicked); --pf-v6-c-button--m-unread--m-clicked--BackgroundColor: var(--pf-t--global--color--status--unread--clicked); --pf-v6-c-button--m-unread--m-clicked__icon--Color: var(--pf-t--global--icon--color--status--unread--on-default--clicked); --pf-v6-c-button--m-attention--Color: var(--pf-t--global--text--color--status--unread--on-attention--default); --pf-v6-c-button--m-attention--BackgroundColor: var(--pf-t--global--color--status--unread--attention--default); --pf-v6-c-button--m-attention__icon--Color: var(--pf-t--global--icon--color--status--unread--on-attention--default); --pf-v6-c-button--m-attention--hover--Color: var(--pf-t--global--text--color--status--unread--on-attention--hover); --pf-v6-c-button--m-attention--hover--BackgroundColor: var(--pf-t--global--color--status--unread--attention--hover); --pf-v6-c-button--m-attention--hover__icon--Color: var(--pf-t--global--icon--color--status--unread--on-attention--hover); --pf-v6-c-button--m-attention--m-clicked--Color: var(--pf-t--global--text--color--status--unread--on-attention--clicked); --pf-v6-c-button--m-attention--m-clicked--BackgroundColor: var(--pf-t--global--color--status--unread--attention--clicked); --pf-v6-c-button--m-attention--m-clicked__icon--Color: var(--pf-t--global--icon--color--status--unread--on-attention--clicked); --pf-v6-c-button--m-warning--Color: var(--pf-t--global--text--color--status--on-warning--default); --pf-v6-c-button--m-warning--BackgroundColor: var(--pf-t--global--color--status--warning--default); --pf-v6-c-button--m-warning__icon--Color: var(--pf-t--global--icon--color--status--on-warning--default); --pf-v6-c-button--m-warning--hover--Color: var(--pf-t--global--text--color--status--on-warning--hover); --pf-v6-c-button--m-warning--hover--BackgroundColor: var(--pf-t--global--color--status--warning--hover); --pf-v6-c-button--m-warning--hover__icon--Color: var(--pf-t--global--icon--color--status--on-warning--hover); --pf-v6-c-button--m-warning--m-clicked--Color: var(--pf-t--global--text--color--status--on-warning--clicked); --pf-v6-c-button--m-warning--m-clicked--BackgroundColor: var(--pf-t--global--color--status--warning--clicked); --pf-v6-c-button--m-warning--m-clicked__icon--Color: var(--pf-t--global--icon--color--status--on-warning--clicked); --pf-v6-c-button--m-danger--Color: var(--pf-t--global--text--color--status--on-danger--default); --pf-v6-c-button--m-danger--BackgroundColor: var(--pf-t--global--color--status--danger--default); --pf-v6-c-button--m-danger__icon--Color: var(--pf-t--global--icon--color--status--on-danger--default); --pf-v6-c-button--m-danger--hover--Color: var(--pf-t--global--text--color--status--on-danger--hover); --pf-v6-c-button--m-danger--hover--BackgroundColor: var(--pf-t--global--color--status--danger--hover); --pf-v6-c-button--m-danger--hover__icon--Color: var(--pf-t--global--icon--color--status--on-danger--hover); --pf-v6-c-button--m-danger--m-clicked--Color: var(--pf-t--global--text--color--status--on-danger--clicked); --pf-v6-c-button--m-danger--m-clicked--BackgroundColor: var(--pf-t--global--color--status--danger--clicked); --pf-v6-c-button--m-danger--m-clicked__icon--Color: var(--pf-t--global--icon--color--status--on-danger--clicked); --pf-v6-c-button--m-display-lg--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--spacious); --pf-v6-c-button--m-display-lg--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--spacious); --pf-v6-c-button--m-display-lg--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--spacious); --pf-v6-c-button--m-display-lg--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--spacious); --pf-v6-c-button--m-display-lg--FontWeight: var(--pf-t--global--font--weight--body--bold); --pf-v6-c-button--m-link--m-display-lg--FontSize: var(--pf-t--global--font--size--body--lg); --pf-v6-c-button--m-small--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--compact); --pf-v6-c-button--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--compact); --pf-v6-c-button--m-small--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--compact); --pf-v6-c-button--m-small--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--compact); --pf-v6-c-button--disabled--Color: var(--pf-t--global--text--color--on-disabled); --pf-v6-c-button--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default); --pf-v6-c-button--disabled--TextDecorationColor: currentcolor; --pf-v6-c-button--disabled--BorderColor: transparent; --pf-v6-c-button--disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled); --pf-v6-c-button__icon--Color: var(--pf-t--global--icon--color--regular); --pf-v6-c-button--hover__icon--Color: var(--pf-t--global--icon--color--regular); --pf-v6-c-button--m-clicked__icon--Color: var(--pf-t--global--icon--color--regular); --pf-v6-c-button__icon--MarginInlineStart: 0; --pf-v6-c-button__icon--MarginInlineEnd: 0; --pf-v6-c-button__icon--m-start--MarginInlineEnd: 0; --pf-v6-c-button__icon--m-end--MarginInlineStart: 0; --pf-v6-c-button--m-notify__icon--AnimationDuration--notify: var(--pf-t--global--motion--duration--3xl); --pf-v6-c-button--m-notify__icon--AnimationTimingFunction--notify: var(--pf-t--global--motion--timing-function--default); --pf-v6-c-button__icon--TransitionDelay: 0s; --pf-v6-c-button__icon--TransitionTimingFunction: auto; --pf-v6-c-button__icon--TransitionDuration: 0s; --pf-v6-c-button__icon--TransitionProperty: none; --pf-v6-c-button__icon--Rotate: 0deg; --pf-v6-c-button--hover__icon--TransitionTimingFunction: auto; --pf-v6-c-button--hover__icon--TransitionDuration: 0s; --pf-v6-c-button--hover__icon--TransitionProperty: none; --pf-v6-c-button--hover__icon--Rotate: 0deg; --pf-v6-c-button__icon--ScaleX: 1; --pf-v6-c-button__icon--ScaleY: 1; --pf-v6-c-button--hover__icon--ScaleX: 1; --pf-v6-c-button--hover__icon--ScaleY: 1; --pf-v6-c-button--m-favorite__icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default); --pf-v6-c-button--m-favorite__icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default); --pf-v6-c-button--m-favorited__icon--Color: var(--pf-t--global--color--favorite--default); --pf-v6-c-button--m-favorited--hover__icon--Color: var(--pf-t--global--color--favorite--hover); --pf-v6-c-button--m-favorited__icon--AnimationDuration: var(--pf-t--global--motion--duration--icon--long); --pf-v6-c-button--m-favorited__icon--AnimationTimingFunction: var(--pf-t--global--motion--timing-function--default); --pf-v6-c-button__icon--favorite--Opacity: 1; --pf-v6-c-button__icon--favorited--Opacity: 0; --pf-v6-c-button--m-favorited__icon--favorite--Opacity: 0; --pf-v6-c-button--m-favorited__icon--favorited--Opacity: 1; --pf-v6-c-button__icon--favorite--TransitionDuration: var(--pf-t--global--motion--duration--icon--default); --pf-v6-c-button__progress--width: calc(var(--pf-t--global--icon--size--lg) + var(--pf-t--global--spacer--sm)); --pf-v6-c-button__progress--Opacity: 0; --pf-v6-c-button__progress--TranslateY: -50%; --pf-v6-c-button__progress--TranslateX: 0; --pf-v6-c-button__progress--InsetBlockStart: 50%; --pf-v6-c-button__progress--InsetInlineStart: var(--pf-t--global--spacer--control--horizontal--default); --pf-v6-c-button__progress--Color: var(--pf-v6-c-button__icon--Color); --pf-v6-c-button--m-progress--PaddingInlineEnd: calc(var(--pf-t--global--spacer--control--horizontal--default) + var(--pf-v6-c-button__progress--width) / 2); --pf-v6-c-button--m-progress--PaddingInlineStart: calc(var(--pf-t--global--spacer--control--horizontal--default) + var(--pf-v6-c-button__progress--width) / 2); --pf-v6-c-button--m-in-progress--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default); --pf-v6-c-button--m-in-progress--PaddingInlineStart: calc(var(--pf-t--global--spacer--control--horizontal--default) + var(--pf-v6-c-button__progress--width)); --pf-v6-c-button--m-in-progress--m-plain--Color: var(--pf-t--global--icon--color--brand--default); --pf-v6-c-button--m-in-progress--m-plain__progress--InsetInlineStart: 50%; --pf-v6-c-button--m-in-progress--m-plain__progress--TranslateX: -50%; --pf-v6-c-button--m-settings__icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--long); --pf-v6-c-button--m-settings__icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--accelerate); --pf-v6-c-button--m-settings--hover__icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--long); --pf-v6-c-button--m-settings--hover__icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate); --pf-v6-c-button--m-settings--hover__icon--Rotate: 60deg; --pf-v6-c-button--m-primary__c-badge--BorderColor: var(--pf-t--global--border--color--alt); --pf-v6-c-button--m-block--Display: flex; --pf-v6-c-button--m-block--Width: 100%; --pf-v6-c-button--hamburger-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate); --pf-v6-c-button--hamburger-icon--TransitionDuration: var(--pf-t--global--motion--duration--md); --pf-v6-c-button--hamburger-icon--top--path--base: path("M1,1 L9,1"); --pf-v6-c-button--hamburger-icon--middle--path--base: path("M1,5 L9,5"); --pf-v6-c-button--hamburger-icon--arrow--path--base: path("M1,5 L1,5 L1,5"); --pf-v6-c-button--hamburger-icon--bottom--path--base: path("M9,9 L1,9"); --pf-v6-c-button--hamburger-icon--top--path: var(--pf-v6-c-button--hamburger-icon--top--path--base); --pf-v6-c-button--hamburger-icon--middle--path: var(--pf-v6-c-button--hamburger-icon--middle--path--base); --pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--path--base); --pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--path--base); --pf-v6-c-button--hamburger-icon--top--collapse--path: path("M5,1 L9,1"); --pf-v6-c-button--hamburger-icon--arrow--collapse--path: path("M3,7 L1,5 L3,3"); --pf-v6-c-button--hamburger-icon--bottom--collapse--path: path("M9,9 L5,9"); --pf-v6-c-button--m-hamburger__icon--m-expand--ScaleX: -1; } .pf-v6-c-button { position: relative; display: var(--pf-v6-c-button--Display); gap: var(--pf-v6-c-button--Gap); align-items: var(--pf-v6-c-button--AlignItems); justify-content: var(--pf-v6-c-button--JustifyContent); min-width: var(--pf-v6-c-button--MinWidth); padding-block-start: var(--pf-v6-c-button--PaddingBlockStart); padding-block-end: var(--pf-v6-c-button--PaddingBlockEnd); padding-inline-start: var(--pf-v6-c-button--PaddingInlineStart); padding-inline-end: var(--pf-v6-c-button--PaddingInlineEnd); font-size: var(--pf-v6-c-button--FontSize, inherit); font-weight: var(--pf-v6-c-button--FontWeight, inherit); line-height: var(--pf-v6-c-button--LineHeight, inherit); color: var(--pf-v6-c-button--Color); text-align: center; text-decoration-line: var(--pf-v6-c-button--TextDecorationLine); text-decoration-style: var(--pf-v6-c-button--TextDecorationStyle); text-decoration-color: var(--pf-v6-c-button--TextDecorationColor); white-space: nowrap; cursor: pointer; -webkit-user-select: none; user-select: none; background: var(--pf-v6-c-button--BackgroundColor) radial-gradient(circle, transparent 1%, color-mix(in srgb, currentcolor 15%, transparent) 2%) center/15000% 15000%; border: 0; border-start-start-radius: var(--pf-v6-c-button--BorderStartStartRadius, var(--pf-v6-c-button--BorderRadius)); border-start-end-radius: var(--pf-v6-c-button--BorderStartEndRadius, var(--pf-v6-c-button--BorderRadius)); border-end-start-radius: var(--pf-v6-c-button--BorderEndStartRadius, var(--pf-v6-c-button--BorderRadius)); border-end-end-radius: var(--pf-v6-c-button--BorderEndEndRadius, var(--pf-v6-c-button--BorderRadius)); transition-delay: var(--pf-v6-c-button--TransitionDelay); transition-timing-function: var(--pf-v6-c-button--TransitionTimingFunction); transition-duration: var(--pf-v6-c-button--TransitionDuration); transition-property: var(--pf-v6-c-button--TransitionProperty); scale: var(--pf-v6-c-button--ScaleX) var(--pf-v6-c-button--ScaleY); } .pf-v6-c-button::after { position: absolute; inset: var(--pf-v6-c-button--border--offset); pointer-events: none; content: ""; border: var(--pf-v6-c-button--BorderWidth) solid; border-color: var(--pf-v6-c-button--BorderColor); border-radius: inherit; transition: inherit; } .pf-v6-c-button.pf-m-primary { --pf-v6-c-button--Color: var(--pf-v6-c-button--m-primary--Color); --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--m-primary--BackgroundColor); --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--m-primary__icon--Color); --pf-v6-c-button--hover--Color: var(--pf-v6-c-button--m-primary--hover--Color); --pf-v6-c-button--hover--BackgroundColor: var(--pf-v6-c-button--m-primary--hover--BackgroundColor); --pf-v6-c-button--hover__icon--Color: var(--pf-v6-c-button--m-primary--hover__icon--Color); --pf-v6-c-button--m-clicked--Color: var(--pf-v6-c-button--m-primary--m-clicked--Color); --pf-v6-c-button--m-clicked--BackgroundColor: var(--pf-v6-c-button--m-primary--m-clicked--BackgroundColor); --pf-v6-c-button--m-clicked__icon--Color: var(--pf-v6-c-button--m-primary--m-clicked__icon--Color); } .pf-v6-c-button.pf-m-primary .pf-v6-c-badge.pf-m-unread { --pf-v6-c-badge--BorderColor: var(--pf-v6-c-button--m-primary__c-badge--BorderColor); } .pf-v6-c-button.pf-m-secondary { --pf-v6-c-button--Color: var(--pf-v6-c-button--m-secondary--Color); --pf-v6-c-button--BorderColor: var(--pf-v6-c-button--m-secondary--BorderColor); --pf-v6-c-button--TransitionDuration: var(--pf-v6-c-button--m-secondary--TransitionDuration); --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--m-secondary__icon--Color); --pf-v6-c-button--hover--Color: var(--pf-v6-c-button--m-secondary--hover--Color); --pf-v6-c-button--hover--BorderColor: var(--pf-v6-c-button--m-secondary--hover--BorderColor); --pf-v6-c-button--hover__icon--Color: var(--pf-v6-c-button--m-secondary--hover__icon--Color); --pf-v6-c-button--m-clicked--Color: var(--pf-v6-c-button--m-secondary--m-clicked--Color); --pf-v6-c-button--m-clicked--BorderColor: var(--pf-v6-c-button--m-secondary--m-clicked--BorderColor); --pf-v6-c-button--m-clicked__icon--Color: var(--pf-v6-c-button--m-secondary--m-clicked__icon--Color); --pf-v6-c-button--m-danger--Color: var(--pf-v6-c-button--m-secondary--m-danger--Color); --pf-v6-c-button--m-danger__icon--Color: var(--pf-v6-c-button--m-secondary--m-danger__icon--Color); --pf-v6-c-button--m-danger--hover--Color: var(--pf-v6-c-button--m-secondary--m-danger--hover--Color); --pf-v6-c-button--m-danger--hover__icon--Color: var(--pf-v6-c-button--m-secondary--m-danger--hover__icon--Color); --pf-v6-c-button--m-danger--m-clicked--Color: var(--pf-v6-c-button--m-secondary--m-danger--m-clicked--Color); --pf-v6-c-button--m-danger--m-clicked__icon--Color: var(--pf-v6-c-button--m-secondary--m-danger--m-clicked__icon--Color); } .pf-v6-c-button.pf-m-secondary.pf-m-danger { --pf-v6-c-button--m-secondary--BorderColor: var(--pf-v6-c-button--m-secondary--m-danger--BorderColor); --pf-v6-c-button--m-secondary--hover--BorderColor: var(--pf-v6-c-button--m-secondary--m-danger--hover--BorderColor); --pf-v6-c-button--m-secondary--m-clicked--BorderColor: var(--pf-v6-c-button--m-secondary--m-danger--m-clicked--BorderColor); --pf-v6-c-button--m-danger--BackgroundColor: transparent; --pf-v6-c-button--m-danger--hover--BackgroundColor: transparent; --pf-v6-c-button--m-danger--m-clicked--BackgroundColor: transparent; } .pf-v6-c-button.pf-m-tertiary { --pf-v6-c-button--Color: var(--pf-v6-c-button--m-tertiary--Color); --pf-v6-c-button--BorderColor: var(--pf-v6-c-button--m-tertiary--BorderColor); --pf-v6-c-button--TransitionDuration: var(--pf-v6-c-button--m-tertiary--TransitionDuration); --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--m-tertiary__icon--Color); --pf-v6-c-button--hover--Color: var(--pf-v6-c-button--m-tertiary--hover--Color); --pf-v6-c-button--hover--BorderColor: var(--pf-v6-c-button--m-tertiary--hover--BorderColor); --pf-v6-c-button--hover__icon--Color: var(--pf-v6-c-button--m-tertiary--hover__icon--Color); --pf-v6-c-button--m-clicked--Color: var(--pf-v6-c-button--m-tertiary--m-clicked--Color); --pf-v6-c-button--m-clicked--BorderColor: var(--pf-v6-c-button--m-tertiary--m-clicked--BorderColor); --pf-v6-c-button--m-clicked__icon--Color: var(--pf-v6-c-button--m-tertiary--m-clicked__icon--Color); } .pf-v6-c-button.pf-m-link { --pf-v6-c-button--PaddingInlineEnd: var(--pf-v6-c-button--m-link--PaddingInlineEnd); --pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-button--m-link--PaddingInlineStart); --pf-v6-c-button--Color: var(--pf-v6-c-button--m-link--Color); --pf-v6-c-button--BorderWidth: var(--pf-v6-c-button--m-link--BorderWidth); --pf-v6-c-button--hover--BorderColor: var(--pf-v6-c-button--m-link--hover--BorderColor); --pf-v6-c-button--hover--BorderWidth: var(--pf-v6-c-button--m-link--hover--BorderWidth); --pf-v6-c-button--m-clicked--BorderColor: var(--pf-v6-c-button--m-link--m-clicked--BorderColor); --pf-v6-c-button--m-clicked--BorderWidth: var(--pf-v6-c-button--m-link--m-clicked--BorderWidth); --pf-v6-c-button--BorderColor: var(--pf-v6-c-button--m-link--BorderColor); --pf-v6-c-button--BorderRadius: var(--pf-v6-c-button--m-link--BorderRadius); --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--m-link--BackgroundColor); --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--m-link__icon--Color); --pf-v6-c-button--hover--Color: var(--pf-v6-c-button--m-link--hover--Color); --pf-v6-c-button--hover--BackgroundColor: var(--pf-v6-c-button--m-link--hover--BackgroundColor); --pf-v6-c-button--hover__icon--Color: var(--pf-v6-c-button--m-link--hover__icon--Color); --pf-v6-c-button--m-clicked--Color: var(--pf-v6-c-button--m-link--m-clicked--Color); --pf-v6-c-button--m-clicked--BackgroundColor: var(--pf-v6-c-button--m-link--m-clicked--BackgroundColor); --pf-v6-c-button--m-clicked__icon--Color: var(--pf-v6-c-button--m-link--m-clicked__icon--Color); --pf-v6-c-button--m-small--PaddingInlineEnd: var(--pf-v6-c-button--m-link--m-small--PaddingInlineEnd); --pf-v6-c-button--m-small--PaddingInlineStart: var(--pf-v6-c-button--m-link--m-small--PaddingInlineStart); } .pf-v6-c-button.pf-m-link.pf-m-inline { --pf-v6-c-button--Display: var(--pf-v6-c-button--m-link--m-inline--Display); --pf-v6-c-button--JustifyContent: var(--pf-v6-c-button--m-link--m-inline--JustifyContent); --pf-v6-c-button--FontSize: var(--pf-v6-c-button--m-link--m-inline--FontSize); --pf-v6-c-button--LineHeight: var(--pf-v6-c-button--m-link--m-inline--LineHeight); --pf-v6-c-button--FontWeight: var(--pf-v6-c-button--m-link--m-inline--FontWeight); --pf-v6-c-button--PaddingBlockStart: var(--pf-v6-c-button--m-link--m-inline--PaddingBlockStart); --pf-v6-c-button--PaddingInlineEnd: var(--pf-v6-c-button--m-link--m-inline--PaddingInlineEnd); --pf-v6-c-button--PaddingBlockEnd: var(--pf-v6-c-button--m-link--m-inline--PaddingBlockEnd); --pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-button--m-link--m-inline--PaddingInlineStart); --pf-v6-c-button--BackgroundColor: transparent; --pf-v6-c-button__progress--InsetInlineStart: var(--pf-v6-c-button--m-link--m-inline__progress--InsetInlineStart); --pf-v6-c-button--TextDecorationLine: var(--pf-v6-c-button--m-link--m-inline--TextDecorationLine); --pf-v6-c-button--TextDecorationStyle: var(--pf-v6-c-button--m-link--m-inline--TextDecorationStyle); --pf-v6-c-button--hover--TextDecorationLine: var(--pf-v6-c-button--m-link--m-inline--hover--TextDecorationLine); --pf-v6-c-button--hover--TextDecorationStyle: var(--pf-v6-c-button--m-link--m-inline--hover--TextDecorationStyle); --pf-v6-c-button--hover--BackgroundColor: transparent; --pf-v6-c-button--m-clicked--BackgroundColor: transparent; --pf-v6-c-button--disabled--BackgroundColor: transparent; --pf-v6-c-button--disabled--Color: var(--pf-v6-c-button--m-link--m-inline--disabled--Color); --pf-v6-c-button--disabled__icon--Color: var(--pf-v6-c-button--m-link--m-inline--disabled__icon--Color); --pf-v6-c-button--m-link--Color: var(--pf-v6-c-button--m-link--m-inline--Color); --pf-v6-c-button--m-link__icon--Color: var(--pf-v6-c-button--m-link--m-inline__icon--Color); --pf-v6-c-button--TextDecorationColor: var(--pf-v6-c-button--m-link--m-inline--TextDecorationColor); --pf-v6-c-button--hover--TextDecorationColor: var(--pf-v6-c-button--m-link--m-inline--hover--TextDecorationColor); --pf-v6-c-button--m-link--hover--Color: var(--pf-v6-c-button--m-link--m-inline--hover--Color); --pf-v6-c-button--m-link--hover__icon--Color: var(--pf-v6-c-button--m-link--m-inline--hover__icon--Color); --pf-v6-c-button--BorderWidth: 0; --pf-v6-c-button--hover--BorderWidth: 0; --pf-v6-c-button--m-clicked--BorderWidth: 0; text-align: start; white-space: normal; background: transparent; outline-offset: 0.125rem; } span.pf-v6-c-button.pf-m-link.pf-m-inline { --pf-v6-c-button--m-link--m-inline--Display: var(--pf-v6-c-button--span--m-link--m-inline--Display); --pf-v6-c-button__icon--m-start--MarginInlineEnd: var(--pf-v6-c-button--span--m-link--m-inline__icon--m-start--MarginInlineEnd); --pf-v6-c-button__icon--m-end--MarginInlineStart: var(--pf-v6-c-button--span--m-link--m-inline__icon--m-end--MarginInlineStart); } .pf-v6-c-button.pf-m-link.pf-m-danger { --pf-v6-c-button--m-danger--Color: var(--pf-v6-c-button--m-link--m-danger--Color); --pf-v6-c-button--m-danger--BackgroundColor: var(--pf-v6-c-button--m-link--m-danger--BackgroundColor); --pf-v6-c-button--m-danger__icon--Color: var(--pf-v6-c-button--m-link--m-danger__icon--Color); --pf-v6-c-button--m-danger--hover--Color: var(--pf-v6-c-button--m-link--m-danger--hover--Color); --pf-v6-c-button--m-danger--hover--BackgroundColor: var(--pf-v6-c-button--m-link--m-danger--hover--BackgroundColor); --pf-v6-c-button--m-danger--hover__icon--Color: var(--pf-v6-c-button--m-link--m-danger--hover__icon--Color); --pf-v6-c-button--m-danger--m-clicked--Color: var(--pf-v6-c-button--m-link--m-danger--m-clicked--Color); --pf-v6-c-button--m-danger--m-clicked--BackgroundColor: var(--pf-v6-c-button--m-link--m-danger--m-clicked--BackgroundColor); --pf-v6-c-button--m-danger--m-clicked__icon--Color: var(--pf-v6-c-button--m-link--m-danger--m-clicked__icon--Color); } .pf-v6-c-button.pf-m-link.pf-m-display-lg { --pf-v6-c-button--FontSize: var(--pf-v6-c-button--m-link--m-display-lg--FontSize); } .pf-v6-c-button.pf-m-warning { --pf-v6-c-button--Color: var(--pf-v6-c-button--m-warning--Color); --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--m-warning--BackgroundColor); --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--m-warning__icon--Color); --pf-v6-c-button--hover--Color: var(--pf-v6-c-button--m-warning--hover--Color); --pf-v6-c-button--hover--BackgroundColor: var(--pf-v6-c-button--m-warning--hover--BackgroundColor); --pf-v6-c-button--hover__icon--Color: var(--pf-v6-c-button--m-warning--hover__icon--Color); --pf-v6-c-button--m-clicked--Color: var(--pf-v6-c-button--m-warning--m-clicked--Color); --pf-v6-c-button--m-clicked--BackgroundColor: var(--pf-v6-c-button--m-warning--m-clicked--BackgroundColor); --pf-v6-c-button--m-clicked__icon--Color: var(--pf-v6-c-button--m-warning--m-clicked__icon--Color); } .pf-v6-c-button.pf-m-danger { --pf-v6-c-button--Color: var(--pf-v6-c-button--m-danger--Color); --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--m-danger--BackgroundColor); --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--m-danger__icon--Color); --pf-v6-c-button--hover--Color: var(--pf-v6-c-button--m-danger--hover--Color); --pf-v6-c-button--hover--BackgroundColor: var(--pf-v6-c-button--m-danger--hover--BackgroundColor); --pf-v6-c-button--hover__icon--Color: var(--pf-v6-c-button--m-danger--hover__icon--Color); --pf-v6-c-button--m-clicked--Color: var(--pf-v6-c-button--m-danger--m-clicked--Color); --pf-v6-c-button--m-clicked--BackgroundColor: var(--pf-v6-c-button--m-danger--m-clicked--BackgroundColor); --pf-v6-c-button--m-clicked__icon--Color: var(--pf-v6-c-button--m-danger--m-clicked__icon--Color); } .pf-v6-c-button.pf-m-control { --pf-v6-c-button--BorderRadius: var(--pf-v6-c-button--m-control--BorderRadius); --pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-button--m-control--PaddingInlineStart); --pf-v6-c-button--PaddingInlineEnd: var(--pf-v6-c-button--m-control--PaddingInlineEnd); --pf-v6-c-button--Color: var(--pf-v6-c-button--m-control--Color); --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--m-control--BackgroundColor); --pf-v6-c-button--BorderColor: var(--pf-v6-c-button--m-control--BorderColor); --pf-v6-c-button--BorderWidth: var(--pf-v6-c-button--m-control--BorderWidth); --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--m-control__icon--Color); --pf-v6-c-button--hover--Color: var(--pf-v6-c-button--m-control--hover--Color); --pf-v6-c-button--hover--BackgroundColor: var(--pf-v6-c-button--m-control--hover--BackgroundColor); --pf-v6-c-button--hover--BorderColor: var(--pf-v6-c-button--m-control--hover--BorderColor); --pf-v6-c-button--hover--BorderWidth: var(--pf-v6-c-button--m-control--hover--BorderWidth); --pf-v6-c-button--hover__icon--Color: var(--pf-v6-c-button--m-control--hover__icon--Color); --pf-v6-c-button--m-clicked--Color: var(--pf-v6-c-button--m-control--m-clicked--Color); --pf-v6-c-button--m-clicked--BackgroundColor: var(--pf-v6-c-button--m-control--m-clicked--BackgroundColor); --pf-v6-c-button--m-clicked--BorderColor: var(--pf-v6-c-button--m-control--m-clicked--BorderColor); --pf-v6-c-button--m-clicked--BorderWidth: var(--pf-v6-c-button--m-control--m-clicked--BorderWidth); --pf-v6-c-button--m-clicked__icon--Color: var(--pf-v6-c-button--m-control--m-clicked__icon--Color); --pf-v6-c-button--m-small--PaddingInlineEnd: var(--pf-v6-c-button--m-control--m-small--PaddingInlineEnd); --pf-v6-c-button--m-small--PaddingInlineStart: var(--pf-v6-c-button--m-control--m-small--PaddingInlineStart); } .pf-v6-c-button.pf-m-stateful { --pf-v6-c-button--BorderRadius: var(--pf-v6-c-button--m-stateful--BorderRadius); --pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-button--m-stateful--PaddingInlineStart); --pf-v6-c-button--PaddingInlineEnd: var(--pf-v6-c-button--m-stateful--PaddingInlineEnd); --pf-v6-c-button--m-small--PaddingInlineEnd: var(--pf-v6-c-button--m-stateful--m-small--PaddingInlineEnd); --pf-v6-c-button--m-small--PaddingInlineStart: var(--pf-v6-c-button--m-stateful--m-small--PaddingInlineStart); } .pf-v6-c-button.pf-m-read { --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--m-read--BackgroundColor); --pf-v6-c-button--BorderColor: var(--pf-v6-c-button--m-read--BorderColor); --pf-v6-c-button--hover--BackgroundColor: var(--pf-v6-c-button--m-read--hover--BackgroundColor); --pf-v6-c-button--hover--BorderColor: var(--pf-v6-c-button--m-read--hover--BorderColor); --pf-v6-c-button--m-clicked--BackgroundColor: var(--pf-v6-c-button--m-read--m-clicked--BackgroundColor); --pf-v6-c-button--m-clicked--BorderColor: var(--pf-v6-c-button--m-read--m-clicked--BorderColor); } .pf-v6-c-button.pf-m-unread { --pf-v6-c-button--Color: var(--pf-v6-c-button--m-unread--Color); --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--m-unread--BackgroundColor); --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--m-unread__icon--Color); --pf-v6-c-button--hover--Color: var(--pf-v6-c-button--m-unread--hover--Color); --pf-v6-c-button--hover--BackgroundColor: var(--pf-v6-c-button--m-unread--hover--BackgroundColor); --pf-v6-c-button--hover__icon--Color: var(--pf-v6-c-button--m-unread--hover__icon--Color); --pf-v6-c-button--m-clicked--Color: var(--pf-v6-c-button--m-unread--m-clicked--Color); --pf-v6-c-button--m-clicked--BackgroundColor: var(--pf-v6-c-button--m-unread--m-clicked--BackgroundColor); --pf-v6-c-button--m-clicked__icon--Color: var(--pf-v6-c-button--m-unread--m-clicked__icon--Color); } .pf-v6-c-button.pf-m-attention { --pf-v6-c-button--Color: var(--pf-v6-c-button--m-attention--Color); --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--m-attention--BackgroundColor); --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--m-attention__icon--Color); --pf-v6-c-button--hover--Color: var(--pf-v6-c-button--m-attention--hover--Color); --pf-v6-c-button--hover--BackgroundColor: var(--pf-v6-c-button--m-attention--hover--BackgroundColor); --pf-v6-c-button--hover__icon--Color: var(--pf-v6-c-button--m-attention--hover__icon--Color); --pf-v6-c-button--m-clicked--Color: var(--pf-v6-c-button--m-attention--m-clicked--Color); --pf-v6-c-button--m-clicked--BackgroundColor: var(--pf-v6-c-button--m-attention--m-clicked--BackgroundColor); --pf-v6-c-button--m-clicked__icon--Color: var(--pf-v6-c-button--m-attention--m-clicked__icon--Color); } .pf-v6-c-button.pf-m-plain { --pf-v6-c-button--BorderWidth: var(--pf-v6-c-button--m-plain--BorderWidth); --pf-v6-c-button--hover--BorderColor: var(--pf-v6-c-button--m-plain--hover--BorderColor); --pf-v6-c-button--hover--BorderWidth: var(--pf-v6-c-button--m-plain--hover--BorderWidth); --pf-v6-c-button--m-clicked--BorderColor: var(--pf-v6-c-button--m-plain--m-clicked--BorderColor); --pf-v6-c-button--m-clicked--BorderWidth: var(--pf-v6-c-button--m-plain--m-clicked--BorderWidth); --pf-v6-c-button--BorderColor: var(--pf-v6-c-button--m-plain--BorderColor); --pf-v6-c-button--BorderRadius: var(--pf-v6-c-button--m-plain--BorderRadius); --pf-v6-c-button--Color: var(--pf-v6-c-button--m-plain--Color); --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--m-plain__icon--Color); --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--m-plain--BackgroundColor); --pf-v6-c-button--PaddingInlineEnd: var(--pf-v6-c-button--m-plain--PaddingInlineEnd); --pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-button--m-plain--PaddingInlineStart); --pf-v6-c-button__progress--Color: var(--pf-v6-c-button--m-in-progress--m-plain--Color); --pf-v6-c-button--hover--Color: var(--pf-v6-c-button--m-plain--hover--Color); --pf-v6-c-button--hover--BackgroundColor: var(--pf-v6-c-button--m-plain--hover--BackgroundColor); --pf-v6-c-button--m-clicked--Color: var(--pf-v6-c-button--m-plain--m-clicked--Color); --pf-v6-c-button--m-clicked--BackgroundColor: var(--pf-v6-c-button--m-plain--m-clicked--BackgroundColor); --pf-v6-c-button--disabled--Color: var(--pf-v6-c-button--m-plain--disabled--Color); --pf-v6-c-button--disabled__icon--Color: var(--pf-v6-c-button--m-plain--disabled__icon--Color); --pf-v6-c-button--disabled--BackgroundColor: var(--pf-v6-c-button--m-plain--disabled--BackgroundColor); --pf-v6-c-button--m-small--PaddingInlineEnd: var(--pf-v6-c-button--m-plain--m-small--PaddingInlineEnd); --pf-v6-c-button--m-small--PaddingInlineStart: var(--pf-v6-c-button--m-plain--m-small--PaddingInlineStart); } .pf-v6-c-button.pf-m-plain.pf-m-no-padding { --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--m-plain--m-no-padding__icon--Color); --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--m-plain--m-no-padding--BackgroundColor); --pf-v6-c-button--hover--BackgroundColor: var(--pf-v6-c-button--m-plain--m-no-padding--hover--BackgroundColor); --pf-v6-c-button--m-clicked--BackgroundColor: var(--pf-v6-c-button--m-plain--m-no-padding--m-clicked--BackgroundColor); --pf-v6-c-button--PaddingBlockStart: var(--pf-v6-c-button--m-plain--m-no-padding--PaddingBlockStart); --pf-v6-c-button--PaddingBlockEnd: var(--pf-v6-c-button--m-plain--m-no-padding--PaddingBlockEnd); --pf-v6-c-button--PaddingInlineEnd: var(--pf-v6-c-button--m-plain--m-no-padding--PaddingInlineEnd); --pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-button--m-plain--m-no-padding--PaddingInlineStart); --pf-v6-c-button--m-small--PaddingInlineEnd: var(--pf-v6-c-button--m-plain--m-no-padding--m-small--PaddingInlineEnd); --pf-v6-c-button--m-small--PaddingInlineStart: var(--pf-v6-c-button--m-plain--m-no-padding--m-small--PaddingInlineStart); --pf-v6-c-button--border--offset: var(--pf-v6-c-button--m-plain--m-no-padding--border--offset); min-width: var(--pf-v6-c-button--m-plain--m-no-padding--MinWidth); background: var(--pf-v6-c-button--BackgroundColor); } .pf-v6-c-button.pf-m-block { --pf-v6-c-button--Display: var(--pf-v6-c-button--m-block--Display); width: var(--pf-v6-c-button--m-block--Width); } .pf-v6-c-button.pf-m-small { --pf-v6-c-button--PaddingBlockStart: var(--pf-v6-c-button--m-small--PaddingBlockStart); --pf-v6-c-button--PaddingInlineEnd: var(--pf-v6-c-button--m-small--PaddingInlineEnd); --pf-v6-c-button--PaddingBlockEnd: var(--pf-v6-c-button--m-small--PaddingBlockEnd); --pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-button--m-small--PaddingInlineStart); } .pf-v6-c-button.pf-m-display-lg { --pf-v6-c-button--PaddingBlockStart: var(--pf-v6-c-button--m-display-lg--PaddingBlockStart); --pf-v6-c-button--PaddingInlineEnd: var(--pf-v6-c-button--m-display-lg--PaddingInlineEnd); --pf-v6-c-button--PaddingBlockEnd: var(--pf-v6-c-button--m-display-lg--PaddingBlockEnd); --pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-button--m-display-lg--PaddingInlineStart); --pf-v6-c-button--FontSize: var(--pf-v6-c-button--m-display-lg--FontSize); } .pf-v6-c-button.pf-m-favorite .pf-v6-c-button__icon { display: grid; transition-timing-function: var(--pf-v6-c-button--m-favorite__icon--TransitionTimingFunction); transition-duration: var(--pf-v6-c-button--m-favorite__icon--TransitionDuration); transition-property: color; } .pf-v6-c-button.pf-m-favorited { --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--m-favorited__icon--Color); --pf-v6-c-button--m-plain--m-no-padding__icon--Color: var(--pf-v6-c-button--m-favorited__icon--Color); --pf-v6-c-button--hover__icon--Color: var(--pf-v6-c-button--m-favorited--hover__icon--Color); --pf-v6-c-button--m-plain--m-no-padding--hover__icon--Color: var(--pf-v6-c-button--m-favorited--hover__icon--Color); --pf-v6-c-button__icon--favorite--Opacity: var(--pf-v6-c-button--m-favorited__icon--favorite--Opacity); --pf-v6-c-button__icon--favorited--Opacity: var(--pf-v6-c-button--m-favorited__icon--favorited--Opacity); } .pf-v6-c-button.pf-m-favorited .pf-v6-c-button__icon { animation-name: pf-v6-c-button-icon-favorited; animation-duration: var(--pf-v6-c-button--m-favorited__icon--AnimationDuration); animation-timing-function: var(--pf-v6-c-button--m-favorited__icon--AnimationTimingFunction); } .pf-v6-c-button.pf-m-settings { --pf-v6-c-button__icon--TransitionProperty: rotate; --pf-v6-c-button__icon--TransitionDuration: var(--pf-v6-c-button--m-settings__icon--TransitionDuration); --pf-v6-c-button__icon--TransitionTimingFunction: var(--pf-v6-c-button--m-settings__icon--TransitionTimingFunction); --pf-v6-c-button--hover__icon--TransitionProperty: rotate; --pf-v6-c-button--hover__icon--TransitionDuration: var(--pf-v6-c-button--m-settings--hover__icon--TransitionDuration); --pf-v6-c-button--hover__icon--TransitionTimingFunction: var(--pf-v6-c-button--m-settings--hover__icon--TransitionTimingFunction); --pf-v6-c-button--hover__icon--Rotate: var(--pf-v6-c-button--m-settings--hover__icon--Rotate); } .pf-v6-c-button.pf-m-hamburger { --pf-v6-c-button__icon--TransitionDelay: var(--pf-v6-c-button--hamburger-icon--TransitionDuration); --pf-v6-c-button__icon--TransitionDuration: 0s; --pf-v6-c-button__icon--TransitionProperty: scale; --pf-v6-c-button--hover__icon--TransitionDelay: var(--pf-v6-c-button--hamburger-icon--TransitionDuration); --pf-v6-c-button--hover__icon--TransitionDuration: 0s; --pf-v6-c-button--hover__icon--TransitionProperty: scale; } .pf-v6-c-button.pf-m-hamburger.pf-m-expand { --pf-v6-c-button--hamburger-icon--top--path: var(--pf-v6-c-button--hamburger-icon--top--collapse--path); --pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--collapse--path); --pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--collapse--path); --pf-v6-c-button__icon--TransitionDelay: 0s; --pf-v6-c-button__icon--ScaleX: var(--pf-v6-c-button--m-hamburger__icon--m-expand--ScaleX); --pf-v6-c-button--hover__icon--TransitionDelay: 0s; --pf-v6-c-button--hover__icon--ScaleX: var(--pf-v6-c-button--m-hamburger__icon--m-expand--ScaleX); } .pf-v6-c-button.pf-m-hamburger.pf-m-collapse { --pf-v6-c-button--hamburger-icon--top--path: var(--pf-v6-c-button--hamburger-icon--top--collapse--path); --pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--collapse--path); --pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--collapse--path); --pf-v6-c-button__icon--TransitionDelay: 0s; --pf-v6-c-button__icon--ScaleX: 1; --pf-v6-c-button--hover__icon--TransitionDelay: 0s; --pf-v6-c-button--hover__icon--ScaleX: 1; } .pf-v6-c-button:hover, .pf-v6-c-button:focus { --pf-v6-c-button--Color: var(--pf-v6-c-button--hover--Color); --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--hover--BackgroundColor); --pf-v6-c-button--BorderColor: var(--pf-v6-c-button--hover--BorderColor); --pf-v6-c-button--BorderWidth: var(--pf-v6-c-button--hover--BorderWidth); --pf-v6-c-button--ScaleX: var(--pf-v6-c-button--hover--ScaleX); --pf-v6-c-button--ScaleY: var(--pf-v6-c-button--hover--ScaleY); --pf-v6-c-button--m-plain--m-no-padding__icon--Color: var(--pf-v6-c-button--m-plain--m-no-padding--hover__icon--Color); --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--hover__icon--Color); --pf-v6-c-button__icon--TransitionTimingFunction: var(--pf-v6-c-button--hover__icon--TransitionTimingFunction); --pf-v6-c-button__icon--TransitionDuration: var(--pf-v6-c-button--hover__icon--TransitionDuration); --pf-v6-c-button__icon--TransitionProperty: var(--pf-v6-c-button--hover__icon--TransitionProperty); --pf-v6-c-button__icon--Rotate: var(--pf-v6-c-button--hover__icon--Rotate); --pf-v6-c-button__icon--ScaleX: var(--pf-v6-c-button--hover__icon--ScaleX); --pf-v6-c-button__icon--ScaleY: var(--pf-v6-c-button--hover__icon--ScaleY); text-decoration-line: var(--pf-v6-c-button--hover--TextDecorationLine); text-decoration-style: var(--pf-v6-c-button--hover--TextDecorationStyle); text-decoration-color: var(--pf-v6-c-button--hover--TextDecorationColor); outline-offset: var(--pf-t--global--focus-ring--position--offset); } .pf-v6-c-button:active, .pf-v6-c-button.pf-m-clicked { --pf-v6-c-button--Color: var(--pf-v6-c-button--m-clicked--Color); --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--m-clicked--BackgroundColor); --pf-v6-c-button--BorderWidth: var(--pf-v6-c-button--m-clicked--BorderWidth); --pf-v6-c-button--BorderColor: var(--pf-v6-c-button--m-clicked--BorderColor); --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--m-clicked__icon--Color); } .pf-v6-c-button:active { background-size: 100% 100%; transition-duration: 0s; } .pf-v6-c-button:disabled, .pf-v6-c-button.pf-m-disabled { pointer-events: none; } .pf-v6-c-button:disabled, .pf-v6-c-button.pf-m-disabled, .pf-v6-c-button.pf-m-aria-disabled { color: var(--pf-v6-c-button--disabled--Color); text-decoration-color: var(--pf-v6-c-button--disabled--TextDecorationColor); background: var(--pf-v6-c-button--disabled--BackgroundColor); } .pf-v6-c-button:disabled::after, .pf-v6-c-button.pf-m-disabled::after, .pf-v6-c-button.pf-m-aria-disabled::after { border-color: transparent; } .pf-v6-c-button:disabled .pf-v6-c-button__icon, .pf-v6-c-button.pf-m-disabled .pf-v6-c-button__icon, .pf-v6-c-button.pf-m-aria-disabled .pf-v6-c-button__icon { color: var(--pf-v6-c-button--disabled__icon--Color); } .pf-v6-c-button.pf-m-aria-disabled { --pf-v6-c-button--m-link--m-inline--hover--TextDecorationLine: var(--pf-v6-c-button--TextDecorationLine); --pf-v6-c-button--m-link--m-inline--hover--TextDecorationStyle: var(--pf-v6-c-button--TextDecorationStyle); cursor: default; } .pf-v6-c-button.pf-m-progress { --pf-v6-c-button--PaddingInlineEnd: var(--pf-v6-c-button--m-progress--PaddingInlineEnd); --pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-button--m-progress--PaddingInlineStart); } .pf-v6-c-button.pf-m-in-progress { --pf-v6-c-button--m-link--m-inline--PaddingInlineStart: var(--pf-v6-c-button--m-link--m-inline--m-in-progress--PaddingInlineStart); } .pf-v6-c-button.pf-m-in-progress:not(.pf-m-plain) { --pf-v6-c-button--PaddingInlineEnd: var(--pf-v6-c-button--m-in-progress--PaddingInlineEnd); --pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-button--m-in-progress--PaddingInlineStart); } .pf-v6-c-button.pf-m-in-progress.pf-m-plain { --pf-v6-c-button__progress--InsetInlineStart: var(--pf-v6-c-button--m-in-progress--m-plain__progress--InsetInlineStart); --pf-v6-c-button__progress--TranslateX: var(--pf-v6-c-button--m-in-progress--m-plain__progress--TranslateX); } .pf-v6-c-button.pf-m-in-progress.pf-m-plain > :not(.pf-v6-c-button__progress) { opacity: 0; } .pf-v6-c-button.pf-m-notify .pf-v6-c-button__icon { animation-name: pf-v6-c-button-icon-notify; animation-duration: var(--pf-v6-c-button--m-notify__icon--AnimationDuration--notify); animation-timing-function: var(--pf-v6-c-button--m-notify__icon--AnimationTimingFunction--notify); } .pf-v6-c-button__icon { margin-inline-start: var(--pf-v6-c-button__icon--MarginInlineStart); margin-inline-end: var(--pf-v6-c-button__icon--MarginInlineEnd); color: var(--pf-v6-c-button__icon--Color); transition-delay: var(--pf-v6-c-button__icon--TransitionDelay); transition-timing-function: var(--pf-v6-c-button__icon--TransitionTimingFunction); transition-duration: var(--pf-v6-c-button__icon--TransitionDuration); transition-property: var(--pf-v6-c-button__icon--TransitionProperty); rotate: var(--pf-v6-c-button__icon--Rotate); scale: var(--pf-v6-c-button__icon--ScaleX) var(--pf-v6-c-button__icon--ScaleY); } .pf-v6-c-button__icon.pf-m-start { --pf-v6-c-button__icon--MarginInlineEnd: var(--pf-v6-c-button__icon--m-start--MarginInlineEnd); } .pf-v6-c-button__icon.pf-m-end { --pf-v6-c-button__icon--MarginInlineStart: var(--pf-v6-c-button__icon--m-end--MarginInlineStart); } .pf-v6-c-button__icon-favorite, .pf-v6-c-button__icon-favorited { grid-area: 1/1/1/1; transition-duration: var(--pf-v6-c-button__icon--favorite--TransitionDuration); transition-property: opacity; } .pf-v6-c-button__icon-favorite { opacity: var(--pf-v6-c-button__icon--favorite--Opacity); } .pf-v6-c-button__icon-favorited { opacity: var(--pf-v6-c-button__icon--favorited--Opacity); } .pf-v6-c-button__progress { position: absolute; inset-block-start: var(--pf-v6-c-button__progress--InsetBlockStart); inset-inline-start: var(--pf-v6-c-button__progress--InsetInlineStart); line-height: 1; color: var(--pf-v6-c-button__progress--Color); transform: translate(var(--pf-v6-c-button__progress--TranslateX), var(--pf-v6-c-button__progress--TranslateY)); } .pf-v6-c-button__progress .pf-v6-c-spinner { --pf-v6-c-spinner--Color: currentcolor; } .pf-v6-c-button__text { text-decoration: inherit; } .pf-v6-c-button__count { display: inline-flex; align-items: center; } .pf-v6-c-button--hamburger-icon path { fill: none; stroke: currentcolor; stroke-linecap: round; stroke-linejoin: round; transition: d var(--pf-v6-c-button--hamburger-icon--TransitionDuration) var(--pf-v6-c-button--hamburger-icon--TransitionTimingFunction); } .pf-v6-c-button--hamburger-icon--top { d: var(--pf-v6-c-button--hamburger-icon--top--path); } .pf-v6-c-button--hamburger-icon--middle { d: var(--pf-v6-c-button--hamburger-icon--middle--path); } .pf-v6-c-button--hamburger-icon--arrow { d: var(--pf-v6-c-button--hamburger-icon--arrow--path); } .pf-v6-c-button--hamburger-icon--bottom { d: var(--pf-v6-c-button--hamburger-icon--bottom--path); } @keyframes pf-v6-c-button-icon-notify { 33% { transform: rotate(30deg); } 66% { transform: rotate(-60deg); } } @keyframes pf-v6-c-button-icon-favorited { 50% { scale: 1.5; } }.pf-v6-c-spinner { --pf-v6-c-spinner--diameter: var(--pf-t--global--icon--size--2xl); --pf-v6-c-spinner--Width: var(--pf-v6-c-spinner--diameter); --pf-v6-c-spinner--Height: var(--pf-v6-c-spinner--diameter); --pf-v6-c-spinner--Color: var(--pf-t--global--icon--color--brand--default); --pf-v6-c-spinner--AnimationDuration: 1.4s; --pf-v6-c-spinner--AnimationTimingFunction: linear; --pf-v6-c-spinner--StrokeWidth: 10; --pf-v6-c-spinner__path--StrokeWidth: var(--pf-v6-c-spinner--StrokeWidth); --pf-v6-c-spinner__path--AnimationTimingFunction: ease-in-out; --pf-v6-c-spinner--m-xs--diameter: var(--pf-t--global--icon--size--sm); --pf-v6-c-spinner--m-sm--diameter: var(--pf-t--global--icon--size--md); --pf-v6-c-spinner--m-md--diameter: var(--pf-t--global--icon--size--lg); --pf-v6-c-spinner--m-lg--diameter: var(--pf-t--global--icon--size--xl); --pf-v6-c-spinner--m-xl--diameter: var(--pf-t--global--icon--size--2xl); --pf-v6-c-spinner--m-inline--diameter: 1em; } .pf-v6-c-spinner { width: var(--pf-v6-c-spinner--Width); height: var(--pf-v6-c-spinner--Height); overflow: hidden; animation: pf-v6-c-spinner-animation-rotate calc(var(--pf-v6-c-spinner--AnimationDuration) * 2) var(--pf-v6-c-spinner--AnimationTimingFunction) infinite; } .pf-v6-c-spinner.pf-m-inline { --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-inline--diameter); } .pf-v6-c-spinner.pf-m-xs { --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-xs--diameter); --pf-v6-c-spinner--StrokeWidth: 15; } .pf-v6-c-spinner.pf-m-sm { --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-sm--diameter); } .pf-v6-c-spinner.pf-m-md { --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-md--diameter); } .pf-v6-c-spinner.pf-m-lg { --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-lg--diameter); } .pf-v6-c-spinner.pf-m-xl { --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-xl--diameter); } .pf-v6-c-spinner__path { width: 100%; height: 100%; stroke: var(--pf-v6-c-spinner--Color); stroke-dasharray: 283; stroke-dashoffset: 280; stroke-linecap: round; stroke-width: var(--pf-v6-c-spinner--StrokeWidth); transform-origin: 50% 50%; animation: pf-v6-c-spinner-animation-dash var(--pf-v6-c-spinner--AnimationDuration) var(--pf-v6-c-spinner__path--AnimationTimingFunction) infinite; } @keyframes pf-v6-c-spinner-animation-rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes pf-v6-c-spinner-animation-dash { 0% { stroke-dashoffset: 280; transform: rotate(0); } 15% { stroke-width: calc(var(--pf-v6-c-spinner__path--StrokeWidth) - 4); } 40% { stroke-dasharray: 220; stroke-dashoffset: 150; } 100% { stroke-dashoffset: 280; transform: rotate(720deg); } }.pf-v6-c-badge { --pf-v6-c-badge--BorderColor: transparent; --pf-v6-c-badge--BorderWidth: var(--pf-t--global--border--width--regular); --pf-v6-c-badge--BorderRadius: var(--pf-t--global--border--radius--pill); --pf-v6-c-badge--FontSize: var(--pf-t--global--font--size--body--sm); --pf-v6-c-badge--FontWeight: var(--pf-t--global--font--weight--body--bold); --pf-v6-c-badge--PaddingInlineEnd: var(--pf-t--global--spacer--sm); --pf-v6-c-badge--PaddingInlineStart: var(--pf-t--global--spacer--sm); --pf-v6-c-badge--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default); --pf-v6-c-badge--MinWidth: var(--pf-t--global--spacer--xl); --pf-v6-c-badge__toggle-icon--MarginInlineStart: var(--pf-t--global--spacer--xs); --pf-v6-c-badge__toggle-icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default); --pf-v6-c-badge--m-read--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default); --pf-v6-c-badge--m-read--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default); --pf-v6-c-badge--m-read--BorderColor: var(--pf-t--global--border--color--high-contrast); --pf-v6-c-badge--m-read__toggle-icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default); --pf-v6-c-badge--m-unread--BackgroundColor: var(--pf-t--global--color--brand--default); --pf-v6-c-badge--m-unread--Color: var(--pf-t--global--text--color--on-brand--default); --pf-v6-c-badge--m-unread__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--default); --pf-v6-c-badge--m-disabled--Color: var(--pf-t--global--text--color--on-disabled); --pf-v6-c-badge--m-disabled--BorderColor: var(--pf-t--global--border--color--disabled); --pf-v6-c-badge--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default); } .pf-v6-c-badge { position: relative; display: inline-block; min-width: var(--pf-v6-c-badge--MinWidth); padding-inline-start: var(--pf-v6-c-badge--PaddingInlineStart); padding-inline-end: var(--pf-v6-c-badge--PaddingInlineEnd); font-size: var(--pf-v6-c-badge--FontSize); font-weight: var(--pf-v6-c-badge--FontWeight); color: var(--pf-v6-c-badge--Color); text-align: center; white-space: nowrap; background-color: var(--pf-v6-c-badge--BackgroundColor); border-radius: var(--pf-v6-c-badge--BorderRadius); } .pf-v6-c-badge::after { position: absolute; inset: 0; pointer-events: none; content: ""; border: var(--pf-v6-c-badge--BorderWidth) solid var(--pf-v6-c-badge--BorderColor); border-radius: inherit; } .pf-v6-c-badge.pf-m-read { --pf-v6-c-badge--BorderColor: var(--pf-v6-c-badge--m-read--BorderColor); --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-read--Color); --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-read--BackgroundColor); --pf-v6-c-badge__toggle-icon--Color: var(--pf-v6-c-badge--m-read__toggle-icon--Color); } .pf-v6-c-badge.pf-m-unread { --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-unread--Color); --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-unread--BackgroundColor); --pf-v6-c-badge__toggle-icon--Color: var(--pf-v6-c-badge--m-unread__toggle-icon--Color); } .pf-v6-c-badge.pf-m-disabled { --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-disabled--Color); --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-disabled--BackgroundColor); } .pf-v6-c-badge.pf-m-disabled::after { border-color: var(--pf-v6-c-badge--m-disabled--BorderColor); } .pf-v6-c-badge__toggle-icon { margin-inline-start: var(--pf-v6-c-badge__toggle-icon--MarginInlineStart); color: var(--pf-v6-c-badge__toggle-icon--Color); }.pf-v6-c-backdrop { --pf-v6-c-backdrop--Position: fixed; --pf-v6-c-backdrop--ZIndex: var(--pf-t--global--z-index--lg); --pf-v6-c-backdrop--BackgroundColor: var(--pf-t--global--background--color--backdrop--default); } .pf-v6-c-backdrop { position: var(--pf-v6-c-backdrop--Position); inset-block-start: 0; inset-inline-start: 0; z-index: var(--pf-v6-c-backdrop--ZIndex); width: 100%; height: 100%; background-color: var(--pf-v6-c-backdrop--BackgroundColor); } .pf-v6-c-backdrop__open { overflow: hidden; }.pf-v6-l-bullseye { --pf-v6-l-bullseye--Padding: 0; } .pf-v6-l-bullseye { display: flex; align-items: center; justify-content: center; height: 100%; padding: var(--pf-v6-l-bullseye--Padding); margin: 0; }.pf-v6-c-modal-box { --pf-v6-c-modal-box--BackgroundColor: var(--pf-t--global--background--color--floating--default); --pf-v6-c-modal-box--BorderColor: var(--pf-t--global--border--color--high-contrast); --pf-v6-c-modal-box--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular); --pf-v6-c-modal-box--BorderRadius: var(--pf-t--global--border--radius--large); --pf-v6-c-modal-box--BoxShadow: var(--pf-t--global--box-shadow--lg); --pf-v6-c-modal-box--ZIndex: var(--pf-t--global--z-index--xl); --pf-v6-c-modal-box--Width: 100%; --pf-v6-c-modal-box--MaxWidth: calc(100% - var(--pf-t--global--spacer--xl)); --pf-v6-c-modal-box--m-sm--sm--MaxWidth: 35rem; --pf-v6-c-modal-box--m-md--Width: 52.5rem; --pf-v6-c-modal-box--m-lg--lg--MaxWidth: 70rem; --pf-v6-c-modal-box--MaxHeight: calc(100% - var(--pf-t--global--spacer--2xl)); --pf-v6-c-modal-box--m-align-top--spacer: var(--pf-t--global--spacer--sm); --pf-v6-c-modal-box--m-align-top--xl--spacer: var(--pf-t--global--spacer--xl); --pf-v6-c-modal-box--m-align-top--InsetBlockStart: var(--pf-v6-c-modal-box--m-align-top--spacer); --pf-v6-c-modal-box--m-align-top--MaxHeight: calc(100% - min(var(--pf-v6-c-modal-box--m-align-top--spacer), var(--pf-t--global--spacer--2xl)) - var(--pf-v6-c-modal-box--m-align-top--spacer)); --pf-v6-c-modal-box--m-align-top--MaxWidth: calc(100% - min(var(--pf-v6-c-modal-box--m-align-top--spacer) * 2, var(--pf-t--global--spacer--xl))); --pf-v6-c-modal-box--m-danger__title-icon--Color: var(--pf-t--global--icon--color--status--danger--default); --pf-v6-c-modal-box--m-warning__title-icon--Color: var(--pf-t--global--icon--color--status--warning--default); --pf-v6-c-modal-box--m-success__title-icon--Color: var(--pf-t--global--icon--color--status--success--default); --pf-v6-c-modal-box--m-info__title-icon--Color: var(--pf-t--global--icon--color--status--info--default); --pf-v6-c-modal-box--m-custom__title-icon--Color: var(--pf-t--global--icon--color--status--custom--default); --pf-v6-c-modal-box__header--PaddingBlockStart: var(--pf-t--global--spacer--lg); --pf-v6-c-modal-box__header--PaddingBlockEnd: var(--pf-t--global--spacer--sm); --pf-v6-c-modal-box__header--PaddingInlineEnd: var(--pf-t--global--spacer--lg); --pf-v6-c-modal-box__header--PaddingInlineStart: var(--pf-t--global--spacer--lg); --pf-v6-c-modal-box__header--Gap: var(--pf-t--global--spacer--md); --pf-v6-c-modal-box__header-main--Gap: var(--pf-t--global--spacer--md); --pf-v6-c-modal-box__header-main--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--default); --pf-v6-c-modal-box__title--LineHeight: var(--pf-t--global--font--line-height--heading); --pf-v6-c-modal-box__title--FontFamily: var(--pf-t--global--font--family--heading); --pf-v6-c-modal-box__title--FontWeight: var(--pf-t--global--font--weight--heading--default); --pf-v6-c-modal-box__title--FontSize: var(--pf-t--global--font--size--heading--md); --pf-v6-c-modal-box__title-icon--MarginInlineEnd: var(--pf-t--global--spacer--sm); --pf-v6-c-modal-box__title-icon--Color: var(--pf-t--global--icon--color--regular); --pf-v6-c-modal-box__description--FontSize: var(--pf-t--global--font--size--body--sm); --pf-v6-c-modal-box__description--Color: var(--pf-t--global--text--color--subtle); --pf-v6-c-modal-box__body--MinHeight: calc(var(--pf-t--global--font--size--body--default) * var(--pf-t--global--font--line-height--body)); --pf-v6-c-modal-box__body--PaddingBlockStart: var(--pf-t--global--spacer--lg); --pf-v6-c-modal-box__body--PaddingInlineEnd: var(--pf-t--global--spacer--lg); --pf-v6-c-modal-box__body--PaddingInlineStart: var(--pf-t--global--spacer--lg); --pf-v6-c-modal-box__body--last-child--PaddingBlockEnd: var(--pf-t--global--spacer--lg); --pf-v6-c-modal-box__header--body--PaddingBlockStart: var(--pf-t--global--spacer--sm); --pf-v6-c-modal-box__close--InsetBlockStart: var(--pf-v6-c-modal-box__header--PaddingBlockStart); --pf-v6-c-modal-box__close--InsetInlineEnd: var(--pf-v6-c-modal-box__header--PaddingInlineEnd); --pf-v6-c-modal-box__close--sibling--MarginInlineEnd: calc(var(--pf-t--global--spacer--xl) + var(--pf-t--global--spacer--sm)); --pf-v6-c-modal-box__footer--PaddingBlockStart: var(--pf-t--global--spacer--lg); --pf-v6-c-modal-box__footer--PaddingInlineEnd: var(--pf-t--global--spacer--lg); --pf-v6-c-modal-box__footer--PaddingBlockEnd: var(--pf-t--global--spacer--lg); --pf-v6-c-modal-box__footer--PaddingInlineStart: var(--pf-t--global--spacer--lg); --pf-v6-c-modal-box__footer--c-button--MarginInlineEnd: var(--pf-t--global--spacer--md); --pf-v6-c-modal-box__footer--c-button--sm--MarginInlineEnd: calc(var(--pf-v6-c-modal-box__footer--c-button--MarginInlineEnd) / 2); } @media (min-width: 75rem) { .pf-v6-c-modal-box { --pf-v6-c-modal-box--m-align-top--spacer: var(--pf-v6-c-modal-box--m-align-top--xl--spacer); } } .pf-v6-c-modal-box { position: relative; z-index: var(--pf-v6-c-modal-box--ZIndex); display: flex; flex-direction: column; width: var(--pf-v6-c-modal-box--Width); max-width: var(--pf-v6-c-modal-box--MaxWidth); max-height: var(--pf-v6-c-modal-box--MaxHeight); overflow: auto; background-color: var(--pf-v6-c-modal-box--BackgroundColor); border: var(--pf-v6-c-modal-box--BorderWidth) solid var(--pf-v6-c-modal-box--BorderColor); border-radius: var(--pf-v6-c-modal-box--BorderRadius); box-shadow: var(--pf-v6-c-modal-box--BoxShadow); } .pf-v6-c-modal-box.pf-m-sm { --pf-v6-c-modal-box--Width: var(--pf-v6-c-modal-box--m-sm--sm--MaxWidth); } .pf-v6-c-modal-box.pf-m-md { --pf-v6-c-modal-box--Width: var(--pf-v6-c-modal-box--m-md--Width); } .pf-v6-c-modal-box.pf-m-lg { --pf-v6-c-modal-box--Width: var(--pf-v6-c-modal-box--m-lg--lg--MaxWidth); } .pf-v6-c-modal-box.pf-m-align-top { inset-block-start: var(--pf-v6-c-modal-box--m-align-top--InsetBlockStart); align-self: flex-start; max-width: var(--pf-v6-c-modal-box--m-align-top--MaxWidth); max-height: var(--pf-v6-c-modal-box--m-align-top--MaxHeight); } .pf-v6-c-modal-box__title.pf-m-danger, .pf-v6-c-modal-box.pf-m-danger { --pf-v6-c-modal-box__title-icon--Color: var(--pf-v6-c-modal-box--m-danger__title-icon--Color); } .pf-v6-c-modal-box__title.pf-m-warning, .pf-v6-c-modal-box.pf-m-warning { --pf-v6-c-modal-box__title-icon--Color: var(--pf-v6-c-modal-box--m-warning__title-icon--Color); } .pf-v6-c-modal-box__title.pf-m-success, .pf-v6-c-modal-box.pf-m-success { --pf-v6-c-modal-box__title-icon--Color: var(--pf-v6-c-modal-box--m-success__title-icon--Color); } .pf-v6-c-modal-box__title.pf-m-custom, .pf-v6-c-modal-box.pf-m-custom { --pf-v6-c-modal-box__title-icon--Color: var(--pf-v6-c-modal-box--m-custom__title-icon--Color); } .pf-v6-c-modal-box__title.pf-m-info, .pf-v6-c-modal-box.pf-m-info { --pf-v6-c-modal-box__title-icon--Color: var(--pf-v6-c-modal-box--m-info__title-icon--Color); } .pf-v6-c-modal-box__close { position: absolute; inset-block-start: var(--pf-v6-c-modal-box__close--InsetBlockStart); inset-inline-end: var(--pf-v6-c-modal-box__close--InsetInlineEnd); } .pf-v6-c-modal-box__close + * { margin-inline-end: var(--pf-v6-c-modal-box__close--sibling--MarginInlineEnd); } .pf-v6-c-modal-box__header { display: flex; flex-direction: column; flex-shrink: 0; gap: var(--pf-v6-c-modal-box__header--Gap); padding-block-start: var(--pf-v6-c-modal-box__header--PaddingBlockStart); padding-block-end: var(--pf-v6-c-modal-box__header--PaddingBlockEnd); padding-inline-start: var(--pf-v6-c-modal-box__header--PaddingInlineStart); padding-inline-end: var(--pf-v6-c-modal-box__header--PaddingInlineEnd); } .pf-v6-c-modal-box__header.pf-m-help { display: flex; flex-direction: row; } .pf-v6-c-modal-box__header + .pf-v6-c-modal-box__body { --pf-v6-c-modal-box__body--PaddingBlockStart: var(--pf-v6-c-modal-box__header--body--PaddingBlockStart); } .pf-v6-c-modal-box__header-main { display: flex; flex-direction: column; flex-grow: 1; gap: var(--pf-v6-c-modal-box__header-main--Gap); min-width: 0; padding-block-start: var(--pf-v6-c-modal-box__header-main--PaddingBlockStart); } .pf-v6-c-modal-box__title, .pf-v6-c-modal-box__title-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pf-v6-c-modal-box__title { flex: 0 0 auto; font-family: var(--pf-v6-c-modal-box__title--FontFamily); font-size: var(--pf-v6-c-modal-box__title--FontSize); font-weight: var(--pf-v6-c-modal-box__title--FontWeight); line-height: var(--pf-v6-c-modal-box__title--LineHeight); } .pf-v6-c-modal-box__title.pf-m-icon { display: flex; } .pf-v6-c-modal-box__title-icon { margin-inline-end: var(--pf-v6-c-modal-box__title-icon--MarginInlineEnd); color: var(--pf-v6-c-modal-box__title-icon--Color); } .pf-v6-c-modal-box__description { padding-block-start: var(--pf-v6-c-modal-box__description--PaddingBlockStart); font-size: var(--pf-v6-c-modal-box__description--FontSize); color: var(--pf-v6-c-modal-box__description--Color); } .pf-v6-c-modal-box__body { flex: 1 1 auto; min-height: var(--pf-v6-c-modal-box__body--MinHeight); padding-block-start: var(--pf-v6-c-modal-box__body--PaddingBlockStart); padding-inline-start: var(--pf-v6-c-modal-box__body--PaddingInlineStart); padding-inline-end: var(--pf-v6-c-modal-box__body--PaddingInlineEnd); overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; word-break: break-word; -webkit-overflow-scrolling: touch; } .pf-v6-c-modal-box__body:last-child { padding-block-end: var(--pf-v6-c-modal-box__body--last-child--PaddingBlockEnd); } .pf-v6-c-modal-box__footer { display: flex; flex: 0 0 auto; align-items: center; padding-block-start: var(--pf-v6-c-modal-box__footer--PaddingBlockStart); padding-block-end: var(--pf-v6-c-modal-box__footer--PaddingBlockEnd); padding-inline-start: var(--pf-v6-c-modal-box__footer--PaddingInlineStart); padding-inline-end: var(--pf-v6-c-modal-box__footer--PaddingInlineEnd); } .pf-v6-c-modal-box__footer > .pf-v6-c-button:not(:last-child) { margin-inline-end: var(--pf-v6-c-modal-box__footer--c-button--MarginInlineEnd); } @media screen and (min-width: 36rem) { .pf-v6-c-modal-box__footer > .pf-v6-c-button:not(:last-child) { --pf-v6-c-modal-box__footer--c-button--MarginInlineEnd: var(--pf-v6-c-modal-box__footer--c-button--sm--MarginInlineEnd); } }.pf-v6-c-tooltip { --pf-v6-c-tooltip--MaxWidth: 18.75rem; --pf-v6-c-tooltip--BoxShadow: var(--pf-t--global--box-shadow--md); --pf-v6-c-tooltip__content--PaddingBlockStart: var(--pf-t--global--spacer--sm); --pf-v6-c-tooltip__content--PaddingInlineEnd: var(--pf-t--global--spacer--md); --pf-v6-c-tooltip__content--PaddingBlockEnd: var(--pf-t--global--spacer--sm); --pf-v6-c-tooltip__content--PaddingInlineStart: var(--pf-t--global--spacer--md); --pf-v6-c-tooltip__content--Color: var(--pf-t--global--text--color--inverse); --pf-v6-c-tooltip__content--BackgroundColor: var(--pf-t--global--background--color--inverse--default); --pf-v6-c-tooltip__content--FontSize: var(--pf-t--global--font--size--body--sm); --pf-v6-c-tooltip__content--BorderRadius: var(--pf-t--global--border--radius--small); --pf-v6-c-tooltip__arrow--Width: 0.9375rem; --pf-v6-c-tooltip__arrow--Height: 0.9375rem; --pf-v6-c-tooltip__arrow--BackgroundColor: var(--pf-t--global--background--color--inverse--default); --pf-v6-c-tooltip__arrow--BoxShadow: var(--pf-t--global--box-shadow--md); --pf-v6-c-tooltip__arrow--m-top--TranslateX: -50%; --pf-v6-c-tooltip__arrow--m-top--TranslateY: 50%; --pf-v6-c-tooltip__arrow--m-top--Rotate: 45deg; --pf-v6-c-tooltip__arrow--m-right--TranslateX: -50%; --pf-v6-c-tooltip__arrow--m-right--TranslateY: -50%; --pf-v6-c-tooltip__arrow--m-right--Rotate: 45deg; --pf-v6-c-tooltip__arrow--m-bottom--TranslateX: -50%; --pf-v6-c-tooltip__arrow--m-bottom--TranslateY: -50%; --pf-v6-c-tooltip__arrow--m-bottom--Rotate: 45deg; --pf-v6-c-tooltip__arrow--m-left--TranslateX: 50%; --pf-v6-c-tooltip__arrow--m-left--TranslateY: -50%; --pf-v6-c-tooltip__arrow--m-left--Rotate: 45deg; } .pf-v6-c-tooltip { position: relative; max-width: var(--pf-v6-c-tooltip--MaxWidth); box-shadow: var(--pf-v6-c-tooltip--BoxShadow); } .pf-v6-c-tooltip:is(.pf-m-top, .pf-m-top-left, .pf-m-top-right) { --pf-v6-c-tooltip__arrow--InsetBlockEnd: var(--pf-v6-c-tooltip--m-top--InsetBlockEnd, 0); --pf-v6-c-tooltip__arrow--InsetInlineStart: var(--pf-v6-c-tooltip--m-top--InsetInlineStart, 50%); --pf-v6-c-tooltip__arrow--TranslateX: var(--pf-v6-c-tooltip__arrow--m-top--TranslateX); --pf-v6-c-tooltip__arrow--TranslateY: var(--pf-v6-c-tooltip__arrow--m-top--TranslateY); --pf-v6-c-tooltip__arrow--Rotate: var(--pf-v6-c-tooltip__arrow--m-top--Rotate); } .pf-v6-c-tooltip:is(.pf-m-bottom, .pf-m-bottom-left, .pf-m-bottom-right) { --pf-v6-c-tooltip__arrow--InsetBlockStart: var(--pf-v6-c-tooltip--m-bottom--InsetBlockStart, 0); --pf-v6-c-tooltip__arrow--InsetInlineStart: var(--pf-v6-c-tooltip--m-bottom--InsetInlineStart, 50%); --pf-v6-c-tooltip__arrow--TranslateX: var(--pf-v6-c-tooltip__arrow--m-bottom--TranslateX); --pf-v6-c-tooltip__arrow--TranslateY: var(--pf-v6-c-tooltip__arrow--m-bottom--TranslateY); --pf-v6-c-tooltip__arrow--Rotate: var(--pf-v6-c-tooltip__arrow--m-bottom--Rotate); } .pf-v6-c-tooltip:is(.pf-m-left, .pf-m-left-top, .pf-m-left-bottom) { --pf-v6-c-tooltip__arrow--InsetBlockStart: var(--pf-v6-c-tooltip--m-left--InsetBlockStart, 50%); --pf-v6-c-tooltip__arrow--InsetInlineEnd: var(--pf-v6-c-tooltip--m-left--InsetInlineEnd, 0); --pf-v6-c-tooltip__arrow--TranslateX: var(--pf-v6-c-tooltip__arrow--m-left--TranslateX); --pf-v6-c-tooltip__arrow--TranslateY: var(--pf-v6-c-tooltip__arrow--m-left--TranslateY); --pf-v6-c-tooltip__arrow--Rotate: var(--pf-v6-c-tooltip__arrow--m-left--Rotate); } .pf-v6-c-tooltip:is(.pf-m-right, .pf-m-right-top, .pf-m-right-bottom) { --pf-v6-c-tooltip__arrow--InsetBlockStart: var(--pf-v6-c-tooltip--m-right--InsetBlockStart, 50%); --pf-v6-c-tooltip__arrow--InsetInlineStart: var(--pf-v6-c-tooltip--m-right--InsetInlineStart, 0); --pf-v6-c-tooltip__arrow--TranslateX: var(--pf-v6-c-tooltip__arrow--m-right--TranslateX); --pf-v6-c-tooltip__arrow--TranslateY: var(--pf-v6-c-tooltip__arrow--m-right--TranslateY); --pf-v6-c-tooltip__arrow--Rotate: var(--pf-v6-c-tooltip__arrow--m-right--Rotate); } .pf-v6-c-tooltip:is(.pf-m-left-top, .pf-m-right-top) { --pf-v6-c-tooltip__arrow--InsetBlockStart: 0; --pf-v6-c-tooltip__arrow--TranslateY: var(--pf-v6-c-tooltip__arrow--m-top--TranslateY); } .pf-v6-c-tooltip:is(.pf-m-left-bottom, .pf-m-right-bottom) { --pf-v6-c-tooltip__arrow--InsetBlockStart: auto; --pf-v6-c-tooltip__arrow--InsetBlockEnd: 0; } .pf-v6-c-tooltip:is(.pf-m-top-left, .pf-m-bottom-left) { --pf-v6-c-tooltip__arrow--InsetInlineStart: 0; --pf-v6-c-tooltip__arrow--TranslateX: var(--pf-v6-c-tooltip__arrow--m-left--TranslateX); } .pf-v6-c-tooltip:is(.pf-m-top-right, .pf-m-bottom-right) { --pf-v6-c-tooltip__arrow--InsetInlineEnd: 0; --pf-v6-c-tooltip__arrow--InsetInlineStart: auto; } .pf-v6-c-tooltip__content { position: relative; padding-block-start: var(--pf-v6-c-tooltip__content--PaddingBlockStart); padding-block-end: var(--pf-v6-c-tooltip__content--PaddingBlockEnd); padding-inline-start: var(--pf-v6-c-tooltip__content--PaddingInlineStart); padding-inline-end: var(--pf-v6-c-tooltip__content--PaddingInlineEnd); font-size: var(--pf-v6-c-tooltip__content--FontSize); color: var(--pf-v6-c-tooltip__content--Color); text-align: center; word-break: break-word; background-color: var(--pf-v6-c-tooltip__content--BackgroundColor); border-radius: var(--pf-v6-c-tooltip__content--BorderRadius); } .pf-v6-c-tooltip__content.pf-m-text-align-left { text-align: start; } .pf-v6-c-tooltip__arrow { position: absolute; top: var(--pf-v6-c-tooltip__arrow--InsetBlockStart, auto); right: var(--pf-v6-c-tooltip__arrow--InsetInlineEnd, auto); bottom: var(--pf-v6-c-tooltip__arrow--InsetBlockEnd, auto); left: var(--pf-v6-c-tooltip__arrow--InsetInlineStart, auto); width: var(--pf-v6-c-tooltip__arrow--Width); height: var(--pf-v6-c-tooltip__arrow--Height); pointer-events: none; background-color: var(--pf-v6-c-tooltip__arrow--BackgroundColor); box-shadow: var(--pf-v6-c-tooltip__arrow--BoxShadow); transform: translateX(var(--pf-v6-c-tooltip__arrow--TranslateX, 0)) translateY(var(--pf-v6-c-tooltip__arrow--TranslateY, 0)) rotate(var(--pf-v6-c-tooltip__arrow--Rotate, 0)); }.pf-v6-c-background-image { --pf-v6-c-background-image--BackgroundColor: var(--pf-t--global--background--color--primary--default); --pf-v6-c-background-image--BackgroundImage: none; --pf-v6-c-background-image--BackgroundSize--min-width: 200px; --pf-v6-c-background-image--BackgroundSize--width: 60%; --pf-v6-c-background-image--BackgroundSize--max-width: 600px; --pf-v6-c-background-image--BackgroundSize: clamp(var(--pf-v6-c-background-image--BackgroundSize--min-width), var(--pf-v6-c-background-image--BackgroundSize--width), var(--pf-v6-c-background-image--BackgroundSize--max-width)); } .pf-v6-c-background-image { --pf-v6-c-background-image--BackgroundPosition: bottom right; position: fixed; inset-block-start: 0; inset-inline-start: 0; z-index: -1; width: 100%; height: 100%; background-color: var(--pf-v6-c-background-image--BackgroundColor); background-image: var(--pf-v6-c-background-image--BackgroundImage); background-repeat: no-repeat; background-position: var(--pf-v6-c-background-image--BackgroundPosition); background-size: var(--pf-v6-c-background-image--BackgroundSize); } :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-background-image { --pf-v6-c-background-image--BackgroundPosition: bottom left; }.pf-v6-c-breadcrumb { --pf-v6-c-breadcrumb__item--FontSize: var(--pf-t--global--font--size--body--sm); --pf-v6-c-breadcrumb__item--LineHeight: var(--pf-t--global--font--line-height--body); --pf-v6-c-breadcrumb__item--MarginInlineEnd: var(--pf-t--global--spacer--sm); --pf-v6-c-breadcrumb__item-divider--Color: var(--pf-t--global--icon--color--regular); --pf-v6-c-breadcrumb__item-divider--MarginInlineEnd: var(--pf-t--global--spacer--sm); --pf-v6-c-breadcrumb__item-divider--FontSize: var( --pf-t--global--font--size--body--sm); --pf-v6-c-breadcrumb__link--PaddingInlineStart: var(--pf-t--global--spacer--sm); --pf-v6-c-breadcrumb__link--PaddingInlineEnd: var(--pf-t--global--spacer--sm); --pf-v6-c-breadcrumb__link--Color: var(--pf-t--global--text--color--link--default); --pf-v6-c-breadcrumb__link--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--default); --pf-v6-c-breadcrumb__link--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--default); --pf-v6-c-breadcrumb__link--hover--Color: var(--pf-t--global--text--color--link--hover); --pf-v6-c-breadcrumb__link--hover--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--hover); --pf-v6-c-breadcrumb__link--hover--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--hover); --pf-v6-c-breadcrumb__link--m-current--Color: var(--pf-t--global--text--color--regular); --pf-v6-c-breadcrumb__link--BackgroundColor: transparent; --pf-v6-c-breadcrumb__heading--FontSize: var( --pf-t--global--font--size--body--sm); --pf-v6-c-breadcrumb__menu-toggle--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) * -1); --pf-v6-c-breadcrumb__menu-toggle--MarginInlineEnd: var(--pf-t--global--spacer--xs); --pf-v6-c-breadcrumb__menu-toggle--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) * -1); --pf-v6-c-breadcrumb__menu-toggle--MarginInlineStart: var(--pf-t--global--spacer--xs); } .pf-v6-c-breadcrumb { display: inline-flex; } .pf-v6-c-breadcrumb__list { display: flex; flex-wrap: wrap; align-items: center; } .pf-v6-c-breadcrumb__item { display: flex; align-items: baseline; font-size: var(--pf-v6-c-breadcrumb__item--FontSize); font-weight: var(--pf-v6-c-breadcrumb__item--FontWeight); line-height: var(--pf-v6-c-breadcrumb__item--LineHeight); white-space: nowrap; list-style: none; } .pf-v6-c-breadcrumb__item:first-child:has(.pf-v6-c-breadcrumb__link) { --pf-v6-c-breadcrumb__link--PaddingInlineStart: 0; } .pf-v6-c-breadcrumb__item:not(:last-child) { margin-inline-end: var(--pf-v6-c-breadcrumb__item--MarginInlineEnd); } .pf-v6-c-breadcrumb__item-divider { margin-inline-end: var(--pf-v6-c-breadcrumb__item-divider--MarginInlineEnd); font-size: var(--pf-v6-c-breadcrumb__item-divider--FontSize); line-height: 1; color: var(--pf-v6-c-breadcrumb__item-divider--Color); } :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-breadcrumb__item-divider { scale: -1 1; } .pf-v6-c-breadcrumb__link { padding-inline-start: var(--pf-v6-c-breadcrumb__link--PaddingInlineStart); padding-inline-end: var(--pf-v6-c-breadcrumb__link--PaddingInlineEnd); font-size: inherit; font-weight: var(--pf-v6-c-breadcrumb__link--FontWeight); line-height: inherit; color: var(--pf-v6-c-breadcrumb__link--Color); text-decoration-line: var(--pf-v6-c-breadcrumb__link--TextDecorationLine); text-decoration-style: var(--pf-v6-c-breadcrumb__link--TextDecorationStyle); word-break: break-word; background-color: var(--pf-v6-c-breadcrumb__link--BackgroundColor); } .pf-v6-c-breadcrumb__link:is(:hover, :focus) { --pf-v6-c-breadcrumb__link--Color: var(--pf-v6-c-breadcrumb__link--hover--Color); --pf-v6-c-breadcrumb__link--TextDecorationLine: var(--pf-v6-c-breadcrumb__link--hover--TextDecorationLine); --pf-v6-c-breadcrumb__link--TextDecorationStyle: var(--pf-v6-c-breadcrumb__link--hover--TextDecorationStyle); } .pf-v6-c-breadcrumb__link.pf-m-current { cursor: default; } .pf-v6-c-breadcrumb__link.pf-m-current, .pf-v6-c-breadcrumb__link.pf-m-current:is(:hover, :focus) { color: var(--pf-v6-c-breadcrumb__link--m-current--Color); text-decoration-line: none; } button.pf-v6-c-breadcrumb__link { border: none; } .pf-v6-c-breadcrumb__dropdown { margin-block-start: var(--pf-v6-c-breadcrumb__menu-toggle--MarginBlockStart); margin-block-end: var(--pf-v6-c-breadcrumb__menu-toggle--MarginBlockEnd); margin-inline-start: var(--pf-v6-c-breadcrumb__menu-toggle--MarginInlineStart); margin-inline-end: var(--pf-v6-c-breadcrumb__menu-toggle--MarginInlineEnd); } .pf-v6-c-breadcrumb__heading { display: inline; font-size: var(--pf-v6-c-breadcrumb__heading--FontSize); } .pf-v6-c-breadcrumb__link, .pf-v6-c-breadcrumb__heading { white-space: normal; } .pf-v6-c-breadcrumb__list > :first-child .pf-v6-c-breadcrumb__item-divider { display: none; }.pf-v6-c-form-control { --pf-v6-c-form-control--ColumnGap: var(--pf-t--global--spacer--gap--text-to-element--default); --pf-v6-c-form-control--Color: var(--pf-t--global--text--color--regular); --pf-v6-c-form-control--FontSize: var(--pf-t--global--font--size--body--default); --pf-v6-c-form-control--LineHeight: var(--pf-t--global--font--line-height--body); --pf-v6-c-form-control--Resize: none; --pf-v6-c-form-control--OutlineOffset: -6px; --pf-v6-c-form-control--BorderRadius: var(--pf-t--global--border--radius--small); --pf-v6-c-form-control--before--BorderWidth: var(--pf-t--global--border--width--control--default); --pf-v6-c-form-control--before--BorderStyle: solid; --pf-v6-c-form-control--before--BorderColor: var(--pf-t--global--border--color--default); --pf-v6-c-form-control--before--BorderRadius: var(--pf-v6-c-form-control--BorderRadius); --pf-v6-c-form-control--after--BorderWidth: var(--pf-t--global--border--width--control--default); --pf-v6-c-form-control--after--BorderStyle: solid; --pf-v6-c-form-control--after--BorderColor: transparent; --pf-v6-c-form-control--after--BorderRadius: var(--pf-v6-c-form-control--BorderRadius); --pf-v6-c-form-control--BackgroundColor: var(--pf-t--global--background--color--control--default); --pf-v6-c-form-control--Width: 100%; --pf-v6-c-form-control--inset--base: var(--pf-t--global--spacer--control--horizontal--default); --pf-v6-c-form-control--PaddingBlockStart--base: var(--pf-t--global--spacer--control--vertical--default); --pf-v6-c-form-control--PaddingBlockEnd--base: var(--pf-t--global--spacer--control--vertical--default); --pf-v6-c-form-control--PaddingInlineEnd--base: var(--pf-v6-c-form-control--inset--base); --pf-v6-c-form-control--PaddingInlineStart--base: var(--pf-v6-c-form-control--inset--base); --pf-v6-c-form-control--PaddingBlockStart: var(--pf-v6-c-form-control--PaddingBlockStart--base); --pf-v6-c-form-control--PaddingBlockEnd: var(--pf-v6-c-form-control--PaddingBlockEnd--base); --pf-v6-c-form-control--PaddingInlineEnd: var(--pf-v6-c-form-control--PaddingInlineEnd--base); --pf-v6-c-form-control--PaddingInlineStart: var(--pf-v6-c-form-control--PaddingInlineStart--base); --pf-v6-c-form-control__utilities--input--PaddingInlineEnd: var(--pf-v6-c-form-control__input--PaddingInlineEnd); --pf-v6-c-form-control__utilities--select--PaddingInlineEnd: var(--pf-v6-c-form-control__select--PaddingInlineEnd); --pf-v6-c-form-control__utilities--textarea--PaddingInlineEnd: var(--pf-v6-c-form-control__textarea--PaddingInlineEnd); --pf-v6-c-form-control__input--PaddingBlockStart: var(--pf-v6-c-form-control--PaddingBlockStart--base); --pf-v6-c-form-control__input--PaddingBlockEnd: var(--pf-v6-c-form-control--PaddingBlockEnd--base); --pf-v6-c-form-control__input--PaddingInlineEnd: var(--pf-v6-c-form-control--PaddingInlineEnd--base); --pf-v6-c-form-control__input--PaddingInlineStart: var(--pf-v6-c-form-control--PaddingInlineStart--base); --pf-v6-c-form-control__select--PaddingBlockStart: var(--pf-v6-c-form-control--PaddingBlockStart--base); --pf-v6-c-form-control__select--PaddingBlockEnd: var(--pf-v6-c-form-control--PaddingBlockEnd--base); --pf-v6-c-form-control__select--PaddingInlineEnd: var(--pf-v6-c-form-control--PaddingInlineEnd--base); --pf-v6-c-form-control__select--PaddingInlineStart: var(--pf-v6-c-form-control--PaddingInlineStart--base); --pf-v6-c-form-control__textarea--PaddingBlockStart: var(--pf-v6-c-form-control--PaddingBlockStart--base); --pf-v6-c-form-control__textarea--PaddingBlockEnd: var(--pf-v6-c-form-control--PaddingBlockEnd--base); --pf-v6-c-form-control__textarea--PaddingInlineEnd: var(--pf-v6-c-form-control--PaddingInlineEnd--base); --pf-v6-c-form-control__textarea--PaddingInlineStart: var(--pf-v6-c-form-control--PaddingInlineStart--base); --pf-v6-c-form-control--hover--after--BorderWidth: var(--pf-t--global--border--width--control--hover); --pf-v6-c-form-control--hover--after--BorderColor: var(--pf-t--global--border--color--hover); --pf-v6-c-form-control--m-success--hover--after--BorderColor: var(--pf-t--global--border--color--status--success--hover); --pf-v6-c-form-control--m-warning--hover--after--BorderColor: var(--pf-t--global--border--color--status--warning--hover); --pf-v6-c-form-control--m-error--hover--after--BorderColor: var(--pf-t--global--border--color--status--danger--hover); --pf-v6-c-form-control--m-expanded--after--BorderWidth: var(--pf-t--global--border--width--control--clicked); --pf-v6-c-form-control--m-expanded--after--BorderColor: var(--pf-t--global--border--color--clicked); --pf-v6-c-form-control--m-placeholder--Color: var(--pf-t--global--text--color--placeholder); --pf-v6-c-form-control--m-placeholder--child--Color: var(--pf-t--global--text--color--regular); --pf-v6-c-form-control--m-disabled--Color: var(--pf-t--global--text--color--on-disabled); --pf-v6-c-form-control--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default); --pf-v6-c-form-control--m-disabled--after--BorderColor: transparent; --pf-v6-c-form-control--m-readonly--BackgroundColor: var(--pf-t--global--background--color--control--read-only); --pf-v6-c-form-control--m-readonly--BorderColor: var(--pf-t--global--border--color--control--read-only); --pf-v6-c-form-control--m-readonly--hover--after--BorderColor: revert; --pf-v6-c-form-control--m-readonly--m-plain--BackgroundColor: transparent; --pf-v6-c-form-control--m-readonly--m-plain--BorderColor: transparent; --pf-v6-c-form-control--m-readonly--m-plain--inset--base: 0; --pf-v6-c-form-control--m-readonly--m-plain--OutlineOffset: 0; --pf-v6-c-form-control--icon--width: var(--pf-v6-c-form-control--FontSize); --pf-v6-c-form-control--m-success--after--BorderWidth: var(--pf-t--global--border--width--control--default); --pf-v6-c-form-control--m-success--after--BorderColor: var(--pf-t--global--border--color--status--success--default); --pf-v6-c-form-control--m-success--PaddingInlineEnd: initial; --pf-v6-c-form-control__select--m-success--m-status--PaddingInlineEnd: initial; --pf-v6-c-form-control__input--m-success--PaddingInlineEnd: calc(var(--pf-v6-c-form-control--m-icon--icon--width) + var(--pf-v6-c-form-control--ColumnGap) + var(--pf-v6-c-form-control__utilities--input--PaddingInlineEnd)); --pf-v6-c-form-control__select--m-success--PaddingInlineEnd: calc(var(--pf-v6-c-form-control--m-icon--icon--width) + var(--pf-v6-c-form-control--m-icon--icon--spacer) + var(--pf-v6-c-form-control__utilities--Gap) + var(--pf-v6-c-form-control--ColumnGap) + var(--pf-v6-c-form-control__utilities--select--PaddingInlineEnd)); --pf-v6-c-form-control__textarea--m-success--PaddingInlineEnd: calc(var(--pf-v6-c-form-control--m-icon--icon--width) + var(--pf-v6-c-form-control--ColumnGap) + var(--pf-v6-c-form-control__utilities--textarea--PaddingInlineEnd)); --pf-v6-c-form-control--m-warning--after--BorderWidth: var(--pf-t--global--border--width--control--default); --pf-v6-c-form-control--m-warning--after--BorderColor: var(--pf-t--global--border--color--status--warning--default); --pf-v6-c-form-control--m-warning--PaddingInlineEnd: initial; --pf-v6-c-form-control__select--m-warning--m-status--PaddingInlineEnd: initial; --pf-v6-c-form-control__input--m-warning--PaddingInlineEnd: calc(var(--pf-v6-c-form-control--m-icon--icon--width) + var(--pf-v6-c-form-control--ColumnGap) + var(--pf-v6-c-form-control__utilities--input--PaddingInlineEnd)); --pf-v6-c-form-control__select--m-warning--PaddingInlineEnd: calc(var(--pf-v6-c-form-control--m-icon--icon--width) + var(--pf-v6-c-form-control--m-icon--icon--spacer) + var(--pf-v6-c-form-control__utilities--Gap) + var(--pf-v6-c-form-control--ColumnGap) + var(--pf-v6-c-form-control__utilities--select--PaddingInlineEnd)); --pf-v6-c-form-control__textarea--m-warning--PaddingInlineEnd: calc(var(--pf-v6-c-form-control--m-icon--icon--width) + var(--pf-v6-c-form-control--ColumnGap) + var(--pf-v6-c-form-control__utilities--textarea--PaddingInlineEnd)); --pf-v6-c-form-control--m-error--after--BorderWidth: var(--pf-t--global--border--width--control--default); --pf-v6-c-form-control--m-error--after--BorderColor: var(--pf-t--global--border--color--status--danger--default); --pf-v6-c-form-control--m-error--PaddingInlineEnd: initial; --pf-v6-c-form-control__select--m-error--m-status--PaddingInlineEnd: initial; --pf-v6-c-form-control--m-error--icon--width: var(--pf-v6-c-form-control--FontSize); --pf-v6-c-form-control__input--m-error--PaddingInlineEnd: calc(var(--pf-v6-c-form-control--m-icon--icon--width) + var(--pf-v6-c-form-control--ColumnGap) + var(--pf-v6-c-form-control__utilities--input--PaddingInlineEnd)); --pf-v6-c-form-control__select--m-error--PaddingInlineEnd: calc(var(--pf-v6-c-form-control--m-icon--icon--width) + var(--pf-v6-c-form-control--m-icon--icon--spacer) + var(--pf-v6-c-form-control__utilities--Gap) + var(--pf-v6-c-form-control--ColumnGap) + var(--pf-v6-c-form-control__utilities--select--PaddingInlineEnd)); --pf-v6-c-form-control__textarea--m-error--PaddingInlineEnd: calc(var(--pf-v6-c-form-control--m-icon--icon--width) + var(--pf-v6-c-form-control--ColumnGap) + var(--pf-v6-c-form-control__utilities--textarea--PaddingInlineEnd)); --pf-v6-c-form-control--m-icon--PaddingInlineEnd: calc(var(--pf-v6-c-form-control--m-icon--icon--width) + var(--pf-v6-c-form-control--ColumnGap) + var(--pf-v6-c-form-control__utilities--input--PaddingInlineEnd)); --pf-v6-c-form-control--m-icon--icon--width: var(--pf-v6-c-form-control--FontSize); --pf-v6-c-form-control--m-icon--icon--spacer: calc(var(--pf-t--global--spacer--control--horizontal--default) / 2); --pf-v6-c-form-control--m-icon--icon--PaddingInlineEnd: calc(var(--pf-v6-c-form-control--icon--width) + var(--pf-v6-c-form-control__utilities--Gap) + var(--pf-v6-c-form-control--m-icon--icon--width) + var(--pf-v6-c-form-control--ColumnGap) + var(--pf-v6-c-form-control__utilities--input--PaddingInlineEnd)); --pf-v6-c-form-control--textarea--Width: var(--pf-v6-c-form-control--Width); --pf-v6-c-form-control--textarea--Height: auto; --pf-v6-c-form-control--textarea--PaddingBlockStart--offset: calc(-1 * var(--pf-v6-c-form-control--OutlineOffset)); --pf-v6-c-form-control--textarea--PaddingBlockEnd--offset: calc(-1 * var(--pf-v6-c-form-control--OutlineOffset)); --pf-v6-c-form-control--textarea--PaddingInlineEnd--offset: calc(-1 * var(--pf-v6-c-form-control--OutlineOffset)); --pf-v6-c-form-control--textarea--PaddingInlineStart--offset: calc(-1 * var(--pf-v6-c-form-control--OutlineOffset)); --pf-v6-c-form-control__icon--Color: var(--pf-t--global--icon--color--regular); --pf-v6-c-form-control__icon--FontSize: var(--pf-t--global--icon--size--font--body--default); --pf-v6-c-form-control__icon--m-status--Color: var(--pf-t--global--icon--color--regular); --pf-v6-c-form-control--m-success__icon--m-status--Color: var(--pf-t--global--icon--color--status--success--default); --pf-v6-c-form-control--m-warning__icon--m-status--Color: var(--pf-t--global--icon--color--status--warning--default); --pf-v6-c-form-control--m-error__icon--m-status--Color: var(--pf-t--global--icon--color--status--danger--default); --pf-v6-c-form-control__utilities--Gap: var(--pf-t--global--spacer--gap--group--horizontal); --pf-v6-c-form-control__utilities--PaddingBlockStart: var(--pf-v6-c-form-control--PaddingBlockStart); --pf-v6-c-form-control__utilities--PaddingInlineEnd: var(--pf-v6-c-form-control--PaddingInlineEnd--base); --pf-v6-c-form-control__utilities--textarea--PaddingBlockStart: calc(var(--pf-v6-c-form-control__textarea--PaddingBlockStart) - var(--pf-v6-c-form-control--textarea--PaddingBlockStart--offset)); --pf-v6-c-form-control__toggle-icon--PaddingInlineStart: 0; --pf-v6-c-form-control__toggle-icon--PaddingInlineEnd: 0; --pf-v6-c-form-control__toggle-icon--Color: var(--pf-t--global--icon--color--regular); --pf-v6-c-form-control__toggle-icon--FontSize: var(--pf-t--global--icon--size--font--body--default); --pf-v6-c-form-control--m-disabled__toggle-icon--Color: var(--pf-t--global--icon--color--disabled); } .pf-v6-c-form-control { position: relative; display: grid; grid-template-columns: 1fr auto; column-gap: var(--pf-v6-c-form-control--ColumnGap); align-items: start; width: var(--pf-v6-c-form-control--Width); font-size: var(--pf-v6-c-form-control--FontSize); line-height: var(--pf-v6-c-form-control--LineHeight); resize: var(--pf-v6-c-form-control--Resize); background-color: var(--pf-v6-c-form-control--BackgroundColor); border-radius: var(--pf-v6-c-form-control--BorderRadius); } .pf-v6-c-form-control::before, .pf-v6-c-form-control::after { position: absolute; inset: 0; pointer-events: none; content: ""; } .pf-v6-c-form-control::before { border-color: var(--pf-v6-c-form-control--before--BorderColor); border-style: var(--pf-v6-c-form-control--before--BorderStyle); border-width: var(--pf-v6-c-form-control--before--BorderWidth); border-radius: var(--pf-v6-c-form-control--before--BorderRadius); } .pf-v6-c-form-control::after { border: var(--pf-v6-c-form-control--after--BorderWidth) var(--pf-v6-c-form-control--after--BorderStyle) var(--pf-v6-c-form-control--after--BorderColor); border-radius: var(--pf-v6-c-form-control--before--BorderRadius); } .pf-v6-c-form-control > :is(input, select, textarea) { grid-row: 1/2; grid-column: 1/-1; padding-block-start: var(--pf-v6-c-form-control--PaddingBlockStart); padding-block-end: var(--pf-v6-c-form-control--PaddingBlockEnd); padding-inline-start: var(--pf-v6-c-form-control--PaddingInlineStart); padding-inline-end: var(--pf-v6-c-form-control--PaddingInlineEnd); color: var(--pf-v6-c-form-control--Color); appearance: none; background-color: transparent; border: none; border-radius: var(--pf-v6-c-form-control--BorderRadius); outline-offset: var(--pf-v6-c-form-control--OutlineOffset); } .pf-v6-c-form-control > ::placeholder { color: var(--pf-v6-c-form-control--m-placeholder--Color); } .pf-v6-c-form-control > :is(input, select) { text-overflow: ellipsis; } .pf-v6-c-form-control > select { background-color: var(--pf-v6-c-form-control--BackgroundColor); } .pf-v6-c-form-control > select * { color: var(--pf-v6-c-form-control--Color); } .pf-v6-c-form-control:has(input) { --pf-v6-c-form-control--PaddingBlockStart: var(--pf-v6-c-form-control__input--PaddingBlockStart); --pf-v6-c-form-control--PaddingBlockEnd: var(--pf-v6-c-form-control__input--PaddingBlockEnd); --pf-v6-c-form-control--PaddingInlineStart: var(--pf-v6-c-form-control__input--PaddingInlineStart); --pf-v6-c-form-control--PaddingInlineEnd: var(--pf-v6-c-form-control__input--PaddingInlineEnd); --pf-v6-c-form-control__utilities--PaddingInlineEnd: var(--pf-v6-c-form-control__utilities--input--PaddingInlineEnd); } .pf-v6-c-form-control.pf-m-textarea { padding-block-start: var(--pf-v6-c-form-control--textarea--PaddingBlockStart--offset); padding-block-end: var(--pf-v6-c-form-control--textarea--PaddingBlockEnd--offset); padding-inline-start: var(--pf-v6-c-form-control--textarea--PaddingInlineStart--offset); padding-inline-end: var(--pf-v6-c-form-control--textarea--PaddingInlineEnd--offset); } .pf-v6-c-form-control.pf-m-textarea.pf-m-success, .pf-v6-c-form-control.pf-m-textarea.pf-m-warning, .pf-v6-c-form-control.pf-m-textarea.pf-m-error { --pf-v6-c-form-control--m-status--PaddingInlineEnd--offset: calc(var(--pf-v6-c-form-control__icon--FontSize) + var(--pf-v6-c-form-control--ColumnGap)); } .pf-v6-c-form-control.pf-m-textarea:has(textarea) { --pf-v6-c-form-control--PaddingBlockStart: calc(var(--pf-v6-c-form-control__textarea--PaddingBlockStart) - var(--pf-v6-c-form-control--textarea--PaddingBlockStart--offset)); --pf-v6-c-form-control--PaddingBlockEnd: calc(var(--pf-v6-c-form-control__textarea--PaddingBlockEnd) - var(--pf-v6-c-form-control--textarea--PaddingBlockEnd--offset)); --pf-v6-c-form-control--PaddingInlineStart: calc(var(--pf-v6-c-form-control__textarea--PaddingInlineStart) - var(--pf-v6-c-form-control--textarea--PaddingInlineStart--offset)); --pf-v6-c-form-control--PaddingInlineEnd: calc(var(--pf-v6-c-form-control__textarea--PaddingInlineEnd) - var(--pf-v6-c-form-control--textarea--PaddingInlineEnd--offset) + var(--pf-v6-c-form-control--m-status--PaddingInlineEnd--offset, 0px)); --pf-v6-c-form-control__utilities--PaddingInlineEnd: var(--pf-v6-c-form-control__utilities--textarea--PaddingInlineEnd); } .pf-v6-c-form-control.pf-m-textarea > textarea { outline-offset: 0; scrollbar-gutter: stable; } .pf-v6-c-form-control.pf-m-textarea .pf-v6-c-form-control__utilities { padding-block-start: var(--pf-v6-c-form-control__utilities--textarea--PaddingBlockStart); } .pf-v6-c-form-control.pf-m-readonly { --pf-v6-c-form-control--BackgroundColor: var(--pf-v6-c-form-control--m-readonly--BackgroundColor); --pf-v6-c-form-control--before--BorderColor: var(--pf-v6-c-form-control--m-readonly--BorderColor); } .pf-v6-c-form-control.pf-m-readonly:hover { --pf-v6-c-form-control--hover--after--BorderColor: var(--pf-v6-c-form-control--m-readonly--hover--after--BorderColor); } .pf-v6-c-form-control.pf-m-readonly:not(.pf-m-success, .pf-m-warning, .pf-m-error) { --pf-v6-c-form-control--hover--after--BorderColor: var(--pf-v6-c-form-control--m-readonly--hover--after--BorderColor); } .pf-v6-c-form-control.pf-m-readonly.pf-m-plain { --pf-v6-c-form-control--m-readonly--BackgroundColor: var(--pf-v6-c-form-control--m-readonly--m-plain--BackgroundColor); --pf-v6-c-form-control--m-readonly--BorderColor: var(--pf-v6-c-form-control--m-readonly--m-plain--BorderColor); --pf-v6-c-form-control--inset--base: var(--pf-v6-c-form-control--m-readonly--m-plain--inset--base); --pf-v6-c-form-control--before--BorderStyle: none; --pf-v6-c-form-control--after--BorderStyle: none; --pf-v6-c-form-control--OutlineOffset: var(--pf-v6-c-form-control--m-readonly--m-plain--OutlineOffset); } .pf-v6-c-form-control.pf-m-expanded { --pf-v6-c-form-control--after--BorderColor: var(--pf-v6-c-form-control--m-expanded--after--BorderColor); --pf-v6-c-form-control--after--BorderWidth: var(--pf-v6-c-form-control--m-expanded--after--BorderWidth); } .pf-v6-c-form-control.pf-m-disabled { --pf-v6-c-form-control--BackgroundColor: var(--pf-v6-c-form-control--m-disabled--BackgroundColor); --pf-v6-c-form-control--Color: var(--pf-v6-c-form-control--m-disabled--Color); --pf-v6-c-form-control--m-placeholder--Color: var(--pf-v6-c-form-control--m-disabled--Color); --pf-v6-c-form-control__toggle-icon--Color: var(--pf-v6-c-form-control--m-disabled__toggle-icon--Color); --pf-v6-c-form-control--before--BorderStyle: none; --pf-v6-c-form-control--after--BorderStyle: none; cursor: not-allowed; } .pf-v6-c-form-control.pf-m-error { --pf-v6-c-form-control--after--BorderColor: var(--pf-v6-c-form-control--m-error--after--BorderColor); --pf-v6-c-form-control--hover--after--BorderColor: var(--pf-v6-c-form-control--m-error--hover--after--BorderColor); --pf-v6-c-form-control__icon--m-status--Color: var(--pf-v6-c-form-control--m-error__icon--m-status--Color); --pf-v6-c-form-control--after--BorderWidth: var(--pf-v6-c-form-control--m-error--after--BorderWidth); } @media (prefers-reduced-motion: no-preference) { .pf-v6-c-form-control.pf-m-error { translate: var(--pf-v6-global--danger-jiggle--TranslateX, 0); animation-name: pf-v6-global-danger-jiggle-motion; animation-duration: var(--pf-v6-global--danger-jiggle--AnimationDuration--Transform); animation-timing-function: var(--pf-v6-global--danger-jiggle--AnimationTimingFunction--Transform); animation-fill-mode: both; } } .pf-v6-c-form-control.pf-m-error .pf-v6-c-form-control__icon.pf-m-status { --pf-v6-c-form-control--TransitionDuration--Opacity: var(--pf-t--global--motion--duration--fade--default); --pf-v6-c-form-control--TransitionTimingFunction--Opacity: var(--pf-t--global--motion--timing-function--default); animation-name: pf-v6-global-fade-in; animation-duration: var(--pf-v6-c-form-control--TransitionDuration--Opacity); animation-timing-function: var(--pf-v6-c-form-control--TransitionTimingFunction--Opacity); } .pf-v6-c-form-control.pf-m-error > textarea { padding-inline-end: var(--pf-v6-c-form-control--m-error--PaddingInlineEnd, var(--pf-v6-c-form-control__textarea--m-error--PaddingInlineEnd)); } .pf-v6-c-form-control.pf-m-error > input { padding-inline-end: var(--pf-v6-c-form-control--m-error--PaddingInlineEnd, var(--pf-v6-c-form-control__input--m-error--PaddingInlineEnd)); } .pf-v6-c-form-control.pf-m-error > select { padding-inline-end: var(--pf-v6-c-form-control__select--m-error--m-status--PaddingInlineEnd, var(--pf-v6-c-form-control__select--m-error--PaddingInlineEnd)); } .pf-v6-c-form-control.pf-m-error.pf-m-icon > :is(input) { padding-inline-end: var(--pf-v6-c-form-control--m-icon--icon--PaddingInlineEnd); } .pf-v6-c-form-control.pf-m-success { --pf-v6-c-form-control--after--BorderColor: var(--pf-v6-c-form-control--m-success--after--BorderColor); --pf-v6-c-form-control--hover--after--BorderColor: var(--pf-v6-c-form-control--m-success--hover--after--BorderColor); --pf-v6-c-form-control__icon--m-status--Color: var(--pf-v6-c-form-control--m-success__icon--m-status--Color); --pf-v6-c-form-control--after--BorderWidth: var(--pf-v6-c-form-control--m-success--after--BorderWidth); } .pf-v6-c-form-control.pf-m-success > textarea { padding-inline-end: var(--pf-v6-c-form-control--m-success--PaddingInlineEnd, var(--pf-v6-c-form-control__textarea--m-success--PaddingInlineEnd)); } .pf-v6-c-form-control.pf-m-success > input { padding-inline-end: var(--pf-v6-c-form-control--m-success--PaddingInlineEnd, var(--pf-v6-c-form-control__input--m-success--PaddingInlineEnd)); } .pf-v6-c-form-control.pf-m-success > select { padding-inline-end: var(--pf-v6-c-form-control__select--m-success--m-status--PaddingInlineEnd, var(--pf-v6-c-form-control__select--m-success--PaddingInlineEnd)); } .pf-v6-c-form-control.pf-m-success.pf-m-icon > :is(input) { padding-inline-end: var(--pf-v6-c-form-control--m-icon--icon--PaddingInlineEnd); } .pf-v6-c-form-control.pf-m-warning { --pf-v6-c-form-control--after--BorderColor: var(--pf-v6-c-form-control--m-warning--after--BorderColor); --pf-v6-c-form-control--hover--after--BorderColor: var(--pf-v6-c-form-control--m-warning--hover--after--BorderColor); --pf-v6-c-form-control__icon--m-status--Color: var(--pf-v6-c-form-control--m-warning__icon--m-status--Color); --pf-v6-c-form-control--after--BorderWidth: var(--pf-v6-c-form-control--m-warning--after--BorderWidth); } .pf-v6-c-form-control.pf-m-warning > textarea { padding-inline-end: var(--pf-v6-c-form-control--m-warning--PaddingInlineEnd, var(--pf-v6-c-form-control__textarea--m-warning--PaddingInlineEnd)); } .pf-v6-c-form-control.pf-m-warning > input { padding-inline-end: var(--pf-v6-c-form-control--m-warning--PaddingInlineEnd, var(--pf-v6-c-form-control__input--m-warning--PaddingInlineEnd)); } .pf-v6-c-form-control.pf-m-warning > select { padding-inline-end: var(--pf-v6-c-form-control__select--m-warning--m-status--PaddingInlineEnd, var(--pf-v6-c-form-control__select--m-warning--PaddingInlineEnd)); } .pf-v6-c-form-control.pf-m-warning.pf-m-icon > :is(input) { padding-inline-end: var(--pf-v6-c-form-control--m-icon--icon--PaddingInlineEnd); } .pf-v6-c-form-control:hover { --pf-v6-c-form-control--after--BorderColor: var(--pf-v6-c-form-control--hover--after--BorderColor); --pf-v6-c-form-control--after--BorderWidth: var(--pf-v6-c-form-control--hover--after--BorderWidth); } .pf-v6-c-form-control.pf-m-icon { --pf-v6-c-form-control--PaddingInlineEnd: var(--pf-v6-c-form-control--m-icon--PaddingInlineEnd); } .pf-v6-c-form-control:has(select) { --pf-v6-c-form-control--PaddingBlockStart: var(--pf-v6-c-form-control__select--PaddingBlockStart); --pf-v6-c-form-control--PaddingBlockEnd: var(--pf-v6-c-form-control__select--PaddingBlockEnd); --pf-v6-c-form-control--PaddingInlineStart: var(--pf-v6-c-form-control__select--PaddingInlineStart); --pf-v6-c-form-control--PaddingInlineEnd: calc(var(--pf-v6-c-form-control__select--PaddingInlineEnd) + var(--pf-v6-c-form-control__icon--FontSize)); --pf-v6-c-form-control__utilities--PaddingInlineEnd: var(--pf-v6-c-form-control__utilities--select--PaddingInlineEnd); } .pf-v6-c-form-control:has(select) .pf-v6-c-form-control__utilities { padding-inline-end: var(--pf-v6-c-form-control__utilities--select--PaddingInlineEnd); } .pf-v6-c-form-control.pf-m-placeholder > select { --pf-v6-c-form-control--Color: var(--pf-v6-c-form-control--m-placeholder--Color); } .pf-v6-c-form-control.pf-m-placeholder > select * { color: var(--pf-v6-c-form-control--m-placeholder--child--Color); } .pf-v6-c-form-control.pf-m-placeholder > select *:disabled { color: revert; } .pf-v6-c-form-control > textarea { width: 100%; height: 100%; vertical-align: bottom; resize: none; } .pf-v6-c-form-control.pf-m-resize-vertical { --pf-v6-c-form-control--Resize: vertical; overflow: auto; } .pf-v6-c-form-control.pf-m-resize-horizontal { --pf-v6-c-form-control--Resize: horizontal; overflow: auto; } .pf-v6-c-form-control.pf-m-resize-both { --pf-v6-c-form-control--Resize: both; overflow: auto; } .pf-v6-c-form-control__icon { font-size: var(--pf-v6-c-form-control__icon--FontSize); color: var(--pf-v6-c-form-control__icon--Color); } .pf-v6-c-form-control__icon.pf-m-status { --pf-v6-c-form-control__icon--Color: var(--pf-v6-c-form-control__icon--m-status--Color); } .pf-v6-c-form-control__toggle-icon { grid-row: 1/2; grid-column: 3; padding-inline-start: var(--pf-v6-c-form-control__toggle-icon--PaddingInlineStart); padding-inline-end: var(--pf-v6-c-form-control__toggle-icon--PaddingInlineEnd); font-size: var(--pf-v6-c-form-control__toggle-icon--FontSize); color: var(--pf-v6-c-form-control__toggle-icon--Color); pointer-events: none; } .pf-v6-c-form-control__utilities { display: flex; flex-wrap: nowrap; grid-row: 1/2; grid-column: 2; gap: var(--pf-v6-c-form-control__utilities--Gap); padding-block-start: var(--pf-v6-c-form-control__utilities--PaddingBlockStart); padding-inline-end: var(--pf-v6-c-form-control__utilities--PaddingInlineEnd); pointer-events: none; }.pf-v6-c-menu { --pf-v6-c-menu--RowGap: var(--pf-t--global--spacer--sm); --pf-v6-c-menu--Width: auto; --pf-v6-c-menu--MinWidth: auto; --pf-v6-c-menu--PaddingBlockStart: var(--pf-t--global--spacer--sm); --pf-v6-c-menu--PaddingBlockEnd: var(--pf-t--global--spacer--sm); --pf-v6-c-menu--BackgroundColor: var(--pf-t--global--background--color--floating--default); --pf-v6-c-menu--BoxShadow: var(--pf-t--global--box-shadow--md); --pf-v6-c-menu--Color: var(--pf-t--global--text--color--regular); --pf-v6-c-menu--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular); --pf-v6-c-menu--BorderColor: var(--pf-t--global--border--color--high-contrast); --pf-v6-c-menu--BorderRadius: var(--pf-t--global--border--radius--small); --pf-v6-c-menu--OutlineOffset: calc(var(--pf-t--global--border--width--control--default) * -3); --pf-v6-c-menu--ZIndex: var(--pf-t--global--z-index--sm); --pf-v6-c-menu--button--disabled--Color: var(--pf-t--global--text--color--disabled); --pf-v6-c-menu--icon--disabled--Color: var(--pf-t--global--icon--color--disabled); --pf-v6-c-menu--TransitionDuration: 0s; --pf-v6-c-menu--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default); --pf-v6-c-menu--m-plain--BoxShadow: none; --pf-v6-c-menu__content--RowGap: var(--pf-v6-c-menu--RowGap); --pf-v6-c-menu__content--Height: auto; --pf-v6-c-menu__content--MaxHeight: none; --pf-v6-c-menu--m-scrollable__content--MaxHeight: 18.75rem; --pf-v6-c-menu__search--PaddingBlockStart: var(--pf-t--global--spacer--sm); --pf-v6-c-menu__search--PaddingBlockEnd: var(--pf-t--global--spacer--sm); --pf-v6-c-menu__search--PaddingInlineStart: var(--pf-t--global--spacer--md); --pf-v6-c-menu__search--PaddingInlineEnd: var(--pf-t--global--spacer--md); --pf-v6-c-menu__footer--BoxShadow: none; --pf-v6-c-menu__footer--BorderColor: transparent; --pf-v6-c-menu__footer--BorderWidth: 0; --pf-v6-c-menu--m-scrollable__footer--BoxShadow: var(--pf-t--global--box-shadow--md--top); --pf-v6-c-menu--m-scrollable__footer--BorderColor: var(--pf-t--global--border--color--high-contrast); --pf-v6-c-menu--m-scrollable__footer--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular); --pf-v6-c-menu__list-item--Color: var(--pf-t--global--text--color--regular); --pf-v6-c-menu__list-item--BackgroundColor: var(--pf-t--global--background--color--action--plain--default); --pf-v6-c-menu__list-item--BorderWidth: var(--pf-t--global--border--width--action--plain--default); --pf-v6-c-menu__list-item--hover--BorderWidth: var(--pf-t--global--border--width--action--plain--hover); --pf-v6-c-menu__list-item--BorderColor: var(--pf-t--global--border--color--high-contrast); --pf-v6-c-menu__list-item--TransitionDuration: var(--pf-t--global--motion--duration--fade--short); --pf-v6-c-menu__list-item--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default); --pf-v6-c-menu__list-item--TransitionProperty: background-color; --pf-v6-c-menu__list-item--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover); --pf-v6-c-menu__list-item--m-danger--Color: var(--pf-t--global--text--color--status--danger--default); --pf-v6-c-menu__list-item--m-load__item--Color: var(--pf-t--global--text--color--link--default); --pf-v6-c-menu__list-item--has--menu-action--PaddingInlineEnd: var(--pf-t--global--spacer--lg); --pf-v6-c-menu__list--divider--MarginBlockStart: var(--pf-t--global--spacer--sm); --pf-v6-c-menu__list--divider--MarginBlockEnd: var(--pf-t--global--spacer--sm); --pf-v6-c-menu__item--PaddingBlockStart: var(--pf-t--global--spacer--sm); --pf-v6-c-menu__item--PaddingBlockEnd: var(--pf-t--global--spacer--sm); --pf-v6-c-menu__item--PaddingInlineStart: var(--pf-t--global--spacer--lg); --pf-v6-c-menu__item--PaddingInlineEnd: var(--pf-t--global--spacer--lg); --pf-v6-c-menu__item--FontSize: var(--pf-t--global--font--size--body--default); --pf-v6-c-menu__item--LineHeight: var(--pf-t--global--font--line-height--body); --pf-v6-c-menu__item--FontWeight: var(--pf-t--global--font--weight--body--default); --pf-v6-c-menu__item--Color: var(--pf-t--global--text--color--regular); --pf-v6-c-menu__item--BackgroundColor: var(--pf-t--global--background--color--action--plain--default); --pf-v6-c-menu__item--m-disabled--Color: var(--pf-t--global--text--color--disabled); --pf-v6-c-menu__header--PaddingBlockStart: var(--pf-t--global--spacer--sm); --pf-v6-c-menu__header--PaddingBlockEnd: var(--pf-t--global--spacer--sm); --pf-v6-c-menu__header--PaddingInlineStart: var(--pf-t--global--spacer--lg); --pf-v6-c-menu__header--PaddingInlineEnd: var(--pf-t--global--spacer--lg); --pf-v6-c-menu__group-title--PaddingBlockStart: var(--pf-t--global--spacer--sm); --pf-v6-c-menu__group-title--PaddingBlockEnd: var(--pf-t--global--spacer--sm); --pf-v6-c-menu__group-title--PaddingInlineStart: var(--pf-t--global--spacer--lg); --pf-v6-c-menu__group-title--PaddingInlineEnd: var(--pf-t--global--spacer--lg); --pf-v6-c-menu__breadcrumb--PaddingBlockStart: 0; --pf-v6-c-menu__breadcrumb--PaddingBlockEnd: 0; --pf-v6-c-menu__breadcrumb--PaddingInlineStart: var(--pf-t--global--spacer--lg); --pf-v6-c-menu__breadcrumb--PaddingInlineEnd: var(--pf-t--global--spacer--lg); --pf-v6-c-menu__footer--PaddingBlockStart: var(--pf-t--global--spacer--sm); --pf-v6-c-menu__footer--PaddingBlockEnd: var(--pf-t--global--spacer--sm); --pf-v6-c-menu__footer--PaddingInlineStart: var(--pf-t--global--spacer--lg); --pf-v6-c-menu__footer--PaddingInlineEnd: var(--pf-t--global--spacer--lg); --pf-v6-c-menu__item-main--ColumnGap: var(--pf-t--global--spacer--sm); --pf-v6-c-menu__group-title--Color: var(--pf-t--global--text--color--subtle); --pf-v6-c-menu__item-description--FontSize: var(--pf-t--global--font--size--body--sm); --pf-v6-c-menu__item-description--Color: var(--pf-t--global--text--color--subtle); --pf-v6-c-menu__item-action--FontSize: var(--pf-t--global--font--size--body--default); --pf-v6-c-menu__item-action--icon--size: var(--pf-v6-c-menu__item-action--FontSize, var(--pf-t--global--icon--size--md)); --pf-v6-c-menu__item-action--m-favorited--Color: var(--pf-t--global--icon--color--favorite--clicked); --pf-v6-c-menu__item-action--button--MinWidth: calc(var(--pf-v6-c-menu__item-action--icon--size) + var(--pf-t--global--spacer--sm) * 2); --pf-v6-c-menu__item-select-icon--Color: var(--pf-t--global--icon--color--subtle); --pf-v6-c-menu__item--m-selected__item-select-icon--Color: var(--pf-t--global--icon--color--brand--default); --pf-v6-c-menu__item-external--Color: var(--pf-t--global--icon--color--brand--default); --pf-v6-c-menu--m-flyout__menu--top-offset: 0px; --pf-v6-c-menu--m-flyout__menu--left-offset: 0px; --pf-v6-c-menu--m-flyout__menu--m-left--right-offset: 0px; --pf-v6-c-menu--m-flyout__Zindex: var(--pf-t--global--z-index--sm); --pf-v6-c-menu--m-flyout__menu--InsetBlockStart: calc(var(--pf-v6-c-menu__list--PaddingBlockStart) * -1 + var(--pf-v6-c-menu--m-flyout__menu--top-offset)); --pf-v6-c-menu--m-flyout__menu--InsetInlineEnd: auto; --pf-v6-c-menu--m-flyout__menu--InsetBlockEnd: auto; --pf-v6-c-menu--m-flyout__menu--InsetInlineStart: calc(100% + var(--pf-v6-c-menu--m-flyout__menu--left-offset)); --pf-v6-c-menu--m-flyout__menu--m-top--InsetBlockEnd: calc(var(--pf-v6-c-menu__list--PaddingBlockStart) * -1); --pf-v6-c-menu--m-flyout__menu--m-left--InsetInlineEnd: calc(100% + var(--pf-v6-c-menu--m-flyout__menu--m-left--right-offset)); --pf-v6-c-menu--m-drilldown__content--TransitionDuration--height: var(--pf-t--global--motion--duration--slide-in--default); --pf-v6-c-menu--m-drilldown__content--TransitionDuration--transform: var(--pf-t--global--motion--duration--slide-in--default); --pf-v6-c-menu--m-drilldown__content--Transition: height var(--pf-v6-c-menu--m-drilldown__content--TransitionDuration--height); --pf-v6-c-menu--m-drilldown--c-menu--InsetBlockStart: 0; --pf-v6-c-menu--m-drilldown--c-menu--TransitionDuration--transform: 0s; --pf-v6-c-menu--m-drilldown--c-menu--Transition: transform var(--pf-v6-c-menu--m-drilldown--c-menu--TransitionDuration--transform); --pf-v6-c-menu--m-drilldown__list--TransitionDuration--transform: 0s; --pf-v6-c-menu--m-drilldown__list--Transition: transform var(--pf-v6-c-menu--m-drilldown__list--TransitionDuration--transform); --pf-v6-c-menu--m-drilled-in--c-menu__list-item--m-current-path--c-menu--ZIndex: var(--pf-t--global--z-index--xs); } @media (prefers-reduced-motion: no-preference) { .pf-v6-c-menu { --pf-v6-c-menu--TransitionDuration: var(--pf-t--global--motion--duration--fade--default); } } @media (prefers-reduced-motion: no-preference) { .pf-v6-c-menu { --pf-v6-c-menu--m-drilldown__content--Transition: transform var(--pf-v6-c-menu--m-drilldown__content--TransitionDuration--transform), height var(--pf-v6-c-menu--m-drilldown__content--TransitionDuration--height); } } @media (prefers-reduced-motion: no-preference) { .pf-v6-c-menu { --pf-v6-c-menu--m-drilldown--c-menu--TransitionDuration--transform: var(--pf-t--global--motion--duration--slide-in--default); } } @media (prefers-reduced-motion: no-preference) { .pf-v6-c-menu { --pf-v6-c-menu--m-drilldown__list--TransitionDuration--transform: var(--pf-t--global--motion--duration--slide-in--default); } } .pf-v6-c-menu__content, .pf-v6-c-menu__list-item, .pf-v6-c-menu__item-main, .pf-v6-c-menu__breadcrumb, .pf-v6-c-menu__item-check, .pf-v6-c-menu__item-action, .pf-v6-c-menu__item-action-icon { display: flex; } .pf-v6-c-menu__list, .pf-v6-c-menu__group { --pf-v6-hidden-visible--visible--Display: grid; --pf-v6-hidden-visible--hidden--Display: none; --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display); display: var(--pf-v6-hidden-visible--Display); } .pf-v6-c-menu__list.pf-m-hidden, .pf-v6-c-menu__group.pf-m-hidden { --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display); } @media screen and (min-width: 36rem) { .pf-v6-c-menu__list.pf-m-hidden-on-sm, .pf-v6-c-menu__group.pf-m-hidden-on-sm { --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display); } .pf-v6-c-menu__list.pf-m-visible-on-sm, .pf-v6-c-menu__group.pf-m-visible-on-sm { --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display); } } @media screen and (min-width: 48rem) { .pf-v6-c-menu__list.pf-m-hidden-on-md, .pf-v6-c-menu__group.pf-m-hidden-on-md { --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display); } .pf-v6-c-menu__list.pf-m-visible-on-md, .pf-v6-c-menu__group.pf-m-visible-on-md { --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display); } } @media screen and (min-width: 62rem) { .pf-v6-c-menu__list.pf-m-hidden-on-lg, .pf-v6-c-menu__group.pf-m-hidden-on-lg { --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display); } .pf-v6-c-menu__list.pf-m-visible-on-lg, .pf-v6-c-menu__group.pf-m-visible-on-lg { --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display); } } @media screen and (min-width: 75rem) { .pf-v6-c-menu__list.pf-m-hidden-on-xl, .pf-v6-c-menu__group.pf-m-hidden-on-xl { --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display); } .pf-v6-c-menu__list.pf-m-visible-on-xl, .pf-v6-c-menu__group.pf-m-visible-on-xl { --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display); } } @media screen and (min-width: 90.625rem) { .pf-v6-c-menu__list.pf-m-hidden-on-2xl, .pf-v6-c-menu__group.pf-m-hidden-on-2xl { --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display); } .pf-v6-c-menu__list.pf-m-visible-on-2xl, .pf-v6-c-menu__group.pf-m-visible-on-2xl { --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display); } } .pf-v6-c-menu__list, .pf-v6-c-menu__list-item, .pf-v6-c-menu__breadcrumb, .pf-v6-c-menu__footer { position: relative; } .pf-v6-c-menu__list-item:is(.pf-m-disabled, :disabled, .pf-m-aria-disabled, [aria-disabled=true]), .pf-v6-c-menu__item-action:is(.pf-m-disabled, :disabled, .pf-m-aria-disabled, [aria-disabled=true]) { --pf-v6-c-menu__item--Color: var(--pf-v6-c-menu__item--m-disabled--Color); --pf-v6-c-menu__item-toggle-icon--Color: var(--pf-v6-c-menu--icon--disabled--Color); --pf-v6-c-menu__item-external--Color: transparent; --pf-v6-c-menu__item-select-icon--Color: transparent; --pf-v6-c-menu__item-description--Color: var(--pf-v6-c-menu--icon--disabled--Color); --pf-v6-c-menu__list-item--BackgroundColor: transparent; --pf-v6-c-menu__list-item--hover--BackgroundColor: transparent; --pf-v6-c-menu__list-item--hover--BorderColor: transparent; } .pf-v6-c-menu__list-item:is(.pf-m-disabled, :disabled), .pf-v6-c-menu__item-action:is(.pf-m-disabled, :disabled) { pointer-events: none; } .pf-v6-c-menu__list-item.pf-m-aria-disabled .pf-v6-c-menu__item, .pf-v6-c-menu__item-action.pf-m-aria-disabled .pf-v6-c-menu__item { cursor: default; } [class*=pf-v6-c-menu]:is([hidden]) { display: none; } .pf-v6-c-menu { display: grid; row-gap: var(--pf-v6-c-menu--RowGap); width: var(--pf-v6-c-menu--Width); min-width: var(--pf-v6-c-menu--MinWidth); padding-block-start: var(--pf-v6-c-menu--PaddingBlockStart); padding-block-end: var(--pf-v6-c-menu--PaddingBlockEnd); overflow: hidden; color: var(--pf-v6-c-menu--Color); background-color: var(--pf-v6-c-menu--BackgroundColor); border: var(--pf-v6-c-menu--BorderWidth) solid var(--pf-v6-c-menu--BorderColor); border-radius: var(--pf-v6-c-menu--BorderRadius); box-shadow: var(--pf-v6-c-menu--BoxShadow); transition-timing-function: var(--pf-v6-c-menu--TransitionTimingFunction) !important; transition-duration: var(--pf-v6-c-menu--TransitionDuration) !important; } .pf-v6-c-menu .pf-v6-c-menu { min-width: 100%; } .pf-v6-c-menu .pf-v6-c-menu__content .pf-v6-c-menu .pf-v6-c-menu__content { overflow: visible; } .pf-v6-c-menu .pf-v6-c-menu__content .pf-v6-c-menu { min-width: 100%; border-radius: 0; } .pf-v6-c-menu.pf-m-flyout, .pf-v6-c-menu.pf-m-flyout .pf-v6-c-menu, .pf-v6-c-menu .pf-v6-c-menu.pf-m-flyout, .pf-v6-c-menu.pf-m-flyout .pf-v6-c-menu__content { overflow: visible; } .pf-v6-c-menu .pf-v6-c-menu.pf-m-flyout, .pf-v6-c-menu.pf-m-flyout .pf-v6-c-menu { position: absolute; inset-block-start: var(--pf-v6-c-menu--m-flyout__menu--InsetBlockStart); inset-block-end: var(--pf-v6-c-menu--m-flyout__menu--InsetBlockEnd); inset-inline-start: var(--pf-v6-c-menu--m-flyout__menu--InsetInlineStart); inset-inline-end: var(--pf-v6-c-menu--m-flyout__menu--InsetInlineEnd); z-index: var(--pf-v6-c-menu--m-flyout__Zindex); border-radius: var(--pf-v6-c-menu--BorderRadius); } .pf-v6-c-menu .pf-v6-c-menu.pf-m-flyout .pf-v6-c-menu__content, .pf-v6-c-menu.pf-m-flyout .pf-v6-c-menu .pf-v6-c-menu__content { overflow-y: visible; } .pf-v6-c-menu.pf-m-top { --pf-v6-c-menu--m-flyout__menu--InsetBlockStart: auto; --pf-v6-c-menu--m-flyout__menu--InsetBlockEnd: var(--pf-v6-c-menu--m-flyout__menu--m-top--InsetBlockEnd); } .pf-v6-c-menu.pf-m-left { --pf-v6-c-menu--m-flyout__menu--InsetInlineEnd: var(--pf-v6-c-menu--m-flyout__menu--m-left--InsetInlineEnd); --pf-v6-c-menu--m-flyout__menu--InsetInlineStart: auto; } .pf-v6-c-menu.pf-m-drilldown > .pf-v6-c-menu__content { overflow: hidden; transition: var(--pf-v6-c-menu--m-drilldown__content--Transition); } .pf-v6-c-menu.pf-m-drilldown :where(.pf-v6-c-menu) { padding: 0; border: 0; } .pf-v6-c-menu.pf-m-drilldown.pf-m-drilled-in > .pf-v6-c-menu__content > .pf-v6-c-menu__list, .pf-v6-c-menu.pf-m-drilldown.pf-m-drilled-in > .pf-v6-c-menu__list { transform: translateX(-100%); } :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-menu.pf-m-drilldown.pf-m-drilled-in > .pf-v6-c-menu__content > .pf-v6-c-menu__list, .pf-v6-c-menu.pf-m-drilldown.pf-m-drilled-in > .pf-v6-c-menu__list { transform: translateX(calc(-100% * var(--pf-v6-global--inverse--multiplier))); } .pf-v6-c-menu.pf-m-drilldown > .pf-v6-c-menu__content .pf-v6-c-menu { position: absolute; inset-block-start: var(--pf-v6-c-menu--m-drilldown--c-menu--InsetBlockStart); inset-inline-start: 100%; width: 100%; box-shadow: none; transition: var(--pf-v6-c-menu--m-drilldown--c-menu--Transition); } .pf-v6-c-menu.pf-m-drilldown > .pf-v6-c-menu__content .pf-v6-c-menu.pf-m-drilled-in { transform: translateX(-100%); } :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-menu.pf-m-drilldown > .pf-v6-c-menu__content .pf-v6-c-menu.pf-m-drilled-in { transform: translateX(calc(-100% * var(--pf-v6-global--inverse--multiplier))); } .pf-v6-c-menu.pf-m-drilldown .pf-v6-c-menu__list { overflow: hidden; visibility: visible; transition: var(--pf-v6-c-menu--m-drilldown__list--Transition); } .pf-v6-c-menu.pf-m-drilldown .pf-v6-c-menu__list .pf-v6-c-menu__list { --pf-v6-c-menu__list--PaddingBlockStart: 0; --pf-v6-c-menu__list--PaddingBlockEnd: 0; } .pf-v6-c-menu.pf-m-drilldown .pf-v6-c-menu__list-item.pf-m-current-path .pf-v6-c-menu { z-index: var(--pf-v6-c-menu--m-drilled-in--c-menu__list-item--m-current-path--c-menu--ZIndex); } .pf-v6-c-menu.pf-m-drilldown .pf-v6-c-menu__list-item.pf-m-current-path > .pf-v6-c-menu { overflow: visible; } .pf-v6-c-menu.pf-m-drilldown .pf-v6-c-menu__list-item.pf-m-static > .pf-v6-c-menu { position: static; } .pf-v6-c-menu.pf-m-drilldown .pf-v6-c-menu__list-item.pf-m-static:hover { background-color: transparent; } .pf-v6-c-menu.pf-m-drilldown .pf-v6-c-menu__list-item:not(.pf-m-current-path) .pf-v6-c-menu { display: none; } .pf-v6-c-menu.pf-m-drilldown .pf-v6-c-menu__item { outline-offset: var(--pf-v6-c-menu--OutlineOffset); } .pf-v6-c-menu.pf-m-drilled-in > .pf-v6-c-menu__content > .pf-v6-c-menu__list { overflow: visible; visibility: hidden; } .pf-v6-c-menu.pf-m-drilled-in > .pf-v6-c-menu__content > .pf-v6-c-menu__list > .pf-v6-c-divider, .pf-v6-c-menu.pf-m-drilled-in > .pf-v6-c-menu__content > .pf-v6-c-menu__list > .pf-v6-c-menu__list-item:not(.pf-m-current-path) { display: none; } .pf-v6-c-menu.pf-m-drilled-in > .pf-v6-c-menu__content > .pf-v6-c-menu__list > .pf-v6-c-menu__list-item.pf-m-current-path { visibility: hidden; } .pf-v6-c-menu.pf-m-plain { --pf-v6-c-menu--BoxShadow: var(--pf-v6-c-menu--m-plain--BoxShadow); } .pf-v6-c-menu.pf-m-scrollable { --pf-v6-c-menu__content--MaxHeight: var(--pf-v6-c-menu--m-scrollable__content--MaxHeight); --pf-v6-c-menu__footer--BoxShadow: var(--pf-v6-c-menu--m-scrollable__footer--BoxShadow); --pf-v6-c-menu__footer--BorderColor: var(--pf-v6-c-menu--m-scrollable__footer--BorderColor); --pf-v6-c-menu__footer--BorderWidth: var(--pf-v6-c-menu--m-scrollable__footer--BorderWidth); --pf-v6-c-menu__footer--PaddingBlockStart: calc(var(--pf-v6-c-menu__item--PaddingBlockStart) + var(--pf-v6-c-menu--RowGap)); --pf-v6-c-menu__footer--PaddingBlockEnd: calc(var(--pf-v6-c-menu__item--PaddingBlockStart) + var(--pf-v6-c-menu--RowGap)); overflow: hidden; } .pf-v6-c-menu.pf-m-scrollable:has(.pf-v6-c-menu__footer) { --pf-v6-c-menu--PaddingBlockEnd: 0; } .pf-v6-c-menu.pf-m-scrollable .pf-v6-c-menu__content, .pf-v6-c-menu.pf-m-scrollable .pf-v6-c-menu__list { overflow-y: auto; } .pf-v6-c-menu.pf-m-scrollable .pf-v6-c-menu__content { position: relative; z-index: var(--pf-v6-c-menu--ZIndex); margin-block-start: calc(var(--pf-v6-c-menu--RowGap) * -1); margin-block-end: calc(var(--pf-v6-c-menu--RowGap) * -1); } .pf-v6-c-menu.pf-m-scrollable .pf-v6-c-menu__list { padding-block-start: var(--pf-v6-c-menu--RowGap); padding-block-end: var(--pf-v6-c-menu--RowGap); } .pf-v6-c-menu__header { padding-block-start: var(--pf-v6-c-menu__header--PaddingBlockStart); padding-block-end: var(--pf-v6-c-menu__header--PaddingBlockEnd); padding-inline-start: var(--pf-v6-c-menu__header--PaddingInlineStart); padding-inline-end: var(--pf-v6-c-menu__header--PaddingInlineEnd); } .pf-v6-c-menu__search { padding-block-start: var(--pf-v6-c-menu__search--PaddingBlockStart); padding-block-end: var(--pf-v6-c-menu__search--PaddingBlockEnd); padding-inline-start: var(--pf-v6-c-menu__search--PaddingInlineStart); padding-inline-end: var(--pf-v6-c-menu__search--PaddingInlineEnd); } .pf-v6-c-menu__footer { padding-block-start: var(--pf-v6-c-menu__footer--PaddingBlockStart); padding-block-end: var(--pf-v6-c-menu__footer--PaddingBlockEnd); padding-inline-start: var(--pf-v6-c-menu__footer--PaddingInlineStart); padding-inline-end: var(--pf-v6-c-menu__footer--PaddingInlineEnd); border-block-start: var(--pf-v6-c-menu__footer--BorderWidth) solid var(--pf-v6-c-menu__footer--BorderColor); box-shadow: var(--pf-v6-c-menu__footer--BoxShadow); } .pf-v6-c-menu__content { flex-direction: column; row-gap: var(--pf-v6-c-menu__content--RowGap); height: var(--pf-v6-c-menu__content--Height); max-height: var(--pf-v6-c-menu__content--MaxHeight); } .pf-v6-c-menu__content .pf-v6-c-menu__content { --pf-v6-c-menu__content--Height: auto; } .pf-v6-c-menu__list :where(.pf-v6-c-divider:is(li)) { margin-block-start: var(--pf-v6-c-menu__list--divider--MarginBlockStart); margin-block-end: var(--pf-v6-c-menu__list--divider--MarginBlockEnd); } .pf-v6-c-menu__list-item { align-items: baseline; min-width: 0; transition-timing-function: var(--pf-v6-c-menu__list-item--TransitionTimingFunction); transition-duration: var(--pf-v6-c-menu__list-item--TransitionDuration); transition-property: var(--pf-v6-c-menu__list-item--TransitionProperty); } .pf-v6-c-menu__list-item > * { position: relative; } .pf-v6-c-menu__list-item::before { position: absolute; inset: 0; content: ""; background-color: var(--pf-v6-c-menu__list-item--BackgroundColor); border-block-start: var(--pf-v6-c-menu__list-item--BorderWidth) solid var(--pf-v6-c-menu__list-item--BorderColor); border-block-end: var(--pf-v6-c-menu__list-item--BorderWidth) solid var(--pf-v6-c-menu__list-item--BorderColor); transition: inherit; } .pf-v6-c-menu__list-item.pf-m-load { --pf-v6-c-menu__item--Color: var(--pf-v6-c-menu__list-item--m-load__item--Color); } .pf-v6-c-menu__list-item.pf-m-loading { justify-content: center; overflow: hidden; pointer-events: none; } .pf-v6-c-menu__list-item.pf-m-loading .pf-v6-c-menu__item-text { text-align: center; } .pf-v6-c-menu__list-item.pf-m-danger { --pf-v6-c-menu__item--Color: var(--pf-v6-c-menu__list-item--m-danger--Color); } .pf-v6-c-menu__list-item.pf-m-danger:is(:hover, :focus) { --pf-v6-c-menu__item--Color: var(--pf-v6-c-menu__list-item--m-danger--hover--Color, var(--pf-v6-c-menu__list-item--m-danger--Color)); } .pf-v6-c-menu__list-item:has(.pf-v6-c-menu__item-action) { padding-inline-end: var(--pf-v6-c-menu__list-item--has--menu-action--PaddingInlineEnd); } .pf-v6-c-menu__list-item.pf-m-focus, .pf-v6-c-menu__list-item:focus-within, .pf-v6-c-menu__list-item:has(> :hover) { --pf-v6-c-menu__list-item--BackgroundColor: var(--pf-v6-c-menu__list-item--hover--BackgroundColor); --pf-v6-c-menu__list-item--BorderWidth: var(--pf-v6-c-menu__list-item--hover--BorderWidth); } .pf-v6-c-menu__list-item.pf-m-focus .pf-v6-c-menu__item-select-icon, .pf-v6-c-menu__list-item.pf-m-focus .pf-v6-c-menu__item-external-icon, .pf-v6-c-menu__list-item:focus-within .pf-v6-c-menu__item-select-icon, .pf-v6-c-menu__list-item:focus-within .pf-v6-c-menu__item-external-icon, .pf-v6-c-menu__list-item:has(> :hover) .pf-v6-c-menu__item-select-icon, .pf-v6-c-menu__list-item:has(> :hover) .pf-v6-c-menu__item-external-icon { opacity: 1; } .pf-v6-c-menu__item { flex-basis: 100%; flex-direction: column; min-width: 0; padding-block-start: var(--pf-v6-c-menu__item--PaddingBlockStart); padding-block-end: var(--pf-v6-c-menu__item--PaddingBlockEnd); padding-inline-start: var(--pf-v6-c-menu__item--PaddingInlineStart); padding-inline-end: var(--pf-v6-c-menu__item--PaddingInlineEnd); font-size: var(--pf-v6-c-menu__item--FontSize); font-weight: var(--pf-v6-c-menu__item--FontWeight); line-height: var(--pf-v6-c-menu__item--LineHeight); color: var(--pf-v6-c-menu__item--Color); text-align: start; text-decoration-line: none; background-color: var(--pf-v6-c-menu__item--BackgroundColor); border: 0; outline-offset: var(--pf-v6-c-menu--OutlineOffset); --pf-v6-hidden-visible--visible--Display: flex; --pf-v6-hidden-visible--hidden--Display: none; --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display); display: var(--pf-v6-hidden-visible--Display); } .pf-v6-c-menu__item.pf-m-hidden { --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display); } @media screen and (min-width: 36rem) { .pf-v6-c-menu__item.pf-m-hidden-on-sm { --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display); } .pf-v6-c-menu__item.pf-m-visible-on-sm { --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display); } } @media screen and (min-width: 48rem) { .pf-v6-c-menu__item.pf-m-hidden-on-md { --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display); } .pf-v6-c-menu__item.pf-m-visible-on-md { --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display); } } @media screen and (min-width: 62rem) { .pf-v6-c-menu__item.pf-m-hidden-on-lg { --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display); } .pf-v6-c-menu__item.pf-m-visible-on-lg { --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display); } } @media screen and (min-width: 75rem) { .pf-v6-c-menu__item.pf-m-hidden-on-xl { --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display); } .pf-v6-c-menu__item.pf-m-visible-on-xl { --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display); } } @media screen and (min-width: 90.625rem) { .pf-v6-c-menu__item.pf-m-hidden-on-2xl { --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display); } .pf-v6-c-menu__item.pf-m-visible-on-2xl { --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display); } } :where(label).pf-v6-c-menu__item { cursor: pointer; } .pf-v6-c-menu__item.pf-m-selected { --pf-v6-c-menu__item-select-icon--Color: var(--pf-v6-c-menu__item--m-selected__item-select-icon--Color); } .pf-v6-c-menu__item:is(:hover, :focus, .pf-m-selected) .pf-v6-c-menu__item-select-icon, .pf-v6-c-menu__item:is(:hover, :focus, .pf-m-selected) .pf-v6-c-menu__item-external-icon { opacity: 1; } .pf-v6-c-menu__item:is(:hover, :focus, .pf-m-selected) .pf-v6-c-menu__item-external-icon { color: var(--pf-v6-c-menu__item-external--Color); } .pf-v6-c-menu__item-select-icon { color: var(--pf-v6-c-menu__item-select-icon--Color); } .pf-v6-c-menu__item-main { column-gap: var(--pf-v6-c-menu__item-main--ColumnGap); align-items: center; width: 100%; } .pf-v6-c-menu__item-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex-grow: 1; } .pf-v6-c-menu__group-title { padding-block-start: var(--pf-v6-c-menu__group-title--PaddingBlockStart); padding-block-end: var(--pf-v6-c-menu__group-title--PaddingBlockEnd); padding-inline-start: var(--pf-v6-c-menu__group-title--PaddingInlineStart); padding-inline-end: var(--pf-v6-c-menu__group-title--PaddingInlineEnd); font-size: var(--pf-v6-c-menu__group-title--FontSize, inherit); font-weight: var(--pf-v6-c-menu__group-title--FontWeight, inherit); color: var(--pf-v6-c-menu__group-title--Color); } .pf-v6-c-menu__item-description { font-size: var(--pf-v6-c-menu__item-description--FontSize); color: var(--pf-v6-c-menu__item-description--Color); word-break: break-word; } .pf-v6-c-menu__item-check .pf-v6-c-check { --pf-v6-c-check__input--TranslateY: none; } .pf-v6-c-menu__item-toggle-icon { color: var(--pf-v6-c-menu__item-toggle-icon--Color, inherit); } :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-menu__item-toggle-icon { scale: -1 1; } .pf-v6-c-menu__item-icon { color: var(--pf-v6-c-menu__item--icon--Color, inherit); } .pf-v6-c-menu__item-select-icon, .pf-v6-c-menu__item-external-icon { opacity: 0; } .pf-v6-c-menu__item-toggle-icon.pf-m-favorited, .pf-v6-c-menu__item-toggle-icon.pf-m-favorited:hover, .pf-v6-c-menu__item-toggle-icon.pf-m-favorited .pf-v6-c-button:not(.pf-m-favorited), .pf-v6-c-menu__item-action.pf-m-favorited, .pf-v6-c-menu__item-action.pf-m-favorited:hover, .pf-v6-c-menu__item-action.pf-m-favorited .pf-v6-c-button:not(.pf-m-favorited) { --pf-v6-c-button--m-plain__icon--Color: var(--pf-v6-c-menu__item-action--m-favorited--Color); } .pf-v6-c-menu__item-toggle-icon.pf-m-favorited:is(:hover, :focus), .pf-v6-c-menu__item-toggle-icon.pf-m-favorited:hover:is(:hover, :focus), .pf-v6-c-menu__item-toggle-icon.pf-m-favorited .pf-v6-c-button:not(.pf-m-favorited):is(:hover, :focus), .pf-v6-c-menu__item-action.pf-m-favorited:is(:hover, :focus), .pf-v6-c-menu__item-action.pf-m-favorited:hover:is(:hover, :focus), .pf-v6-c-menu__item-action.pf-m-favorited .pf-v6-c-button:not(.pf-m-favorited):is(:hover, :focus) { --pf-v6-c-button--hover__icon--Color: var(--pf-v6-c-menu__item-action--m-favorited--Color); } .pf-v6-c-menu__breadcrumb { --pf-v6-c-breadcrumb__item--FontSize: var(--pf-v6-c-menu__breadcrumb--FontSize); padding-block-start: var(--pf-v6-c-menu__breadcrumb--PaddingBlockStart); padding-block-end: var(--pf-v6-c-menu__breadcrumb--PaddingBlockEnd); padding-inline-start: var(--pf-v6-c-menu__breadcrumb--PaddingInlineStart); padding-inline-end: var(--pf-v6-c-menu__breadcrumb--PaddingInlineEnd); } .pf-v6-c-menu__breadcrumb .pf-v6-c-menu { min-width: auto; padding-block-start: var(--pf-v6-c-menu--PaddingBlockStart); padding-block-end: var(--pf-v6-c-menu--PaddingBlockEnd); } .pf-v6-c-menu__breadcrumb .pf-v6-c-menu__content { height: auto; } .pf-v6-c-menu__breadcrumb .pf-v6-c-menu-toggle { --pf-v6-c-menu-toggle--BorderWidth: 0; --pf-v6-c-menu-toggle--BorderColor: transparent; outline-offset: var(--pf-v6-c-menu--OutlineOffset); }.pf-v6-c-check { --pf-v6-c-check--GridGap: var(--pf-t--global--spacer--gap--group--vertical) var(--pf-t--global--spacer--gap--text-to-element--default); --pf-v6-c-check--AccentColor: var(--pf-t--global--color--brand--default); --pf-v6-c-check--m-standalone--MinHeight: calc(var(--pf-v6-c-check__label--FontSize) * var(--pf-v6-c-check__label--LineHeight)); --pf-v6-c-check__label--disabled--Color: var(--pf-t--global--text--color--disabled); --pf-v6-c-check__label--Color: var(--pf-t--global--text--color--regular); --pf-v6-c-check__label--FontWeight: var(--pf-t--global--font--weight--body--default); --pf-v6-c-check__label--FontSize: var(--pf-t--global--font--size--body--default); --pf-v6-c-check__label--LineHeight: var(--pf-t--global--font--line-height--body); --pf-v6-c-check__description--FontSize: var(--pf-t--global--font--size--body--sm); --pf-v6-c-check__description--Color: var(--pf-t--global--text--color--subtle); --pf-v6-c-check__label-required--MarginInlineStart: var(--pf-t--global--spacer--xs); --pf-v6-c-check__label-required--FontSize: var(--pf-t--global--font--size--body--sm); --pf-v6-c-check__label-required--Color: var(--pf-t--global--color--status--danger--default); --pf-v6-c-check__input--TranslateY: calc((var(--pf-v6-c-check__label--LineHeight) * var(--pf-v6-c-check__label--FontSize) / 2 ) - 50%); } .pf-v6-c-check { display: grid; grid-template-columns: auto 1fr; grid-gap: var(--pf-v6-c-check--GridGap); accent-color: var(--pf-v6-c-check--AccentColor); } .pf-v6-c-check.pf-m-standalone { display: inline-grid; grid-template-columns: auto; min-height: var(--pf-v6-c-check--m-standalone--MinHeight); } .pf-v6-c-check.pf-m-standalone .pf-v6-c-check__input { align-self: center; transform: none; } .pf-v6-c-check__input { align-self: start; font-size: var(--pf-v6-c-check__label--FontSize); line-height: var(--pf-v6-c-check__label--LineHeight); transform: translateY(var(--pf-v6-c-check__input--TranslateY)); } .pf-v6-c-check__label { font-size: var(--pf-v6-c-check__label--FontSize); font-weight: var(--pf-v6-c-check__label--FontWeight); line-height: var(--pf-v6-c-check__label--LineHeight); color: var(--pf-v6-c-check__label--Color); } .pf-v6-c-check__description { grid-column: 2; font-size: var(--pf-v6-c-check__description--FontSize); color: var(--pf-v6-c-check__description--Color); } .pf-v6-c-check__body { grid-column: 2; } .pf-v6-c-check__label, .pf-v6-c-check__input { justify-self: start; } label.pf-v6-c-check, .pf-v6-c-check__label, .pf-v6-c-check__input { cursor: pointer; } .pf-v6-c-check__label:disabled, .pf-v6-c-check__label.pf-m-disabled, .pf-v6-c-check__input:disabled, .pf-v6-c-check__input.pf-m-disabled { --pf-v6-c-check__label--Color: var(--pf-v6-c-check__label--disabled--Color); cursor: not-allowed; } .pf-v6-c-check__label-required { margin-inline-start: var(--pf-v6-c-check__label-required--MarginInlineStart); font-size: var(--pf-v6-c-check__label-required--FontSize); color: var(--pf-v6-c-check__label-required--Color); }.pf-v6-c-menu-toggle { --pf-v6-c-menu-toggle--Gap: var(--pf-t--global--spacer--gap--text-to-element--default); --pf-v6-c-menu-toggle--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--default); --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default); --pf-v6-c-menu-toggle--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--default); --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--default); --pf-v6-c-menu-toggle--MinWidth: calc(var(--pf-v6-c-menu-toggle--FontSize) * var(--pf-v6-c-menu-toggle--LineHeight) + var(--pf-v6-c-menu-toggle--PaddingBlockStart) + var(--pf-v6-c-menu-toggle--PaddingBlockEnd)); --pf-v6-c-menu-toggle--FontSize: var(--pf-t--global--font--size--body--default); --pf-v6-c-menu-toggle--Color: var(--pf-t--global--text--color--regular); --pf-v6-c-menu-toggle--LineHeight: var(--pf-t--global--font--line-height--body); --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-t--global--background--color--control--default); --pf-v6-c-menu-toggle--BorderRadius: var(--pf-t--global--border--radius--small); --pf-v6-c-menu-toggle--BorderColor: var(--pf-t--global--border--color--default); --pf-v6-c-menu-toggle--BorderWidth: var(--pf-t--global--border--width--control--default); --pf-v6-c-menu-toggle--border--ZIndex: var(--pf-t--global--z-index--xs); --pf-v6-c-menu-toggle--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default); --pf-v6-c-menu-toggle--TransitionDuration: var(--pf-t--global--motion--duration--fade--short); --pf-v6-c-menu-toggle--TransitionProperty: color, background-color, border-width, border-color; --pf-v6-c-menu-toggle--hover--Color: var(--pf-t--global--text--color--regular); --pf-v6-c-menu-toggle--hover--BackgroundColor: var(--pf-t--global--background--color--control--default); --pf-v6-c-menu-toggle--hover--BorderWidth: var(--pf-t--global--border--width--control--hover); --pf-v6-c-menu-toggle--hover--BorderColor: var(--pf-t--global--border--color--hover); --pf-v6-c-menu-toggle--hover__toggle-icon--Color: var(--pf-t--global--icon--color--regular); --pf-v6-c-menu-toggle--expanded--Color: var(--pf-t--global--text--color--regular); --pf-v6-c-menu-toggle--expanded--BackgroundColor: var(--pf-t--global--background--color--control--default); --pf-v6-c-menu-toggle--expanded--BorderWidth: var(--pf-t--global--border--width--control--clicked); --pf-v6-c-menu-toggle--expanded--BorderColor: var(--pf-t--global--border--color--clicked); --pf-v6-c-menu-toggle--expanded__toggle-icon--Color: var(--pf-t--global--icon--color--regular); --pf-v6-c-menu-toggle--disabled--Color: var(--pf-t--global--text--color--on-disabled); --pf-v6-c-menu-toggle--disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled); --pf-v6-c-menu-toggle--disabled__toggle-icon--Color: var(--pf-t--global--icon--color--on-disabled); --pf-v6-c-menu-toggle--disabled__status-icon--Color: var(--pf-t--global--icon--color--on-disabled); --pf-v6-c-menu-toggle--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default); --pf-v6-c-menu-toggle__icon--MinHeight: calc(var(--pf-v6-c-menu-toggle--FontSize) * var(--pf-v6-c-menu-toggle--LineHeight)); --pf-v6-c-menu-toggle__icon--Color: var(--pf-t--global--icon--color--regular); --pf-v6-c-menu-toggle__icon--TransitionDelay: 0s; --pf-v6-c-menu-toggle__icon--TransitionDuration: 0s; --pf-v6-c-menu-toggle__icon--TransitionProperty: none; --pf-v6-c-menu-toggle--hover__icon--TransitionDelay: 0s; --pf-v6-c-menu-toggle--hover__icon--TransitionDuration: 0s; --pf-v6-c-menu-toggle--hover__icon--TransitionProperty: none; --pf-v6-c-menu-toggle__icon--Rotate: 0deg; --pf-v6-c-menu-toggle--hover__icon--Rotate: 0deg; --pf-v6-c-menu-toggle__toggle-icon--MinHeight: calc(var(--pf-v6-c-menu-toggle--FontSize) * var(--pf-v6-c-menu-toggle--LineHeight)); --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-t--global--icon--color--regular); --pf-v6-c-menu-toggle--m-primary--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--default); --pf-v6-c-menu-toggle--m-primary--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--default); --pf-v6-c-menu-toggle--m-primary--Color: var(--pf-t--global--text--color--on-brand--default); --pf-v6-c-menu-toggle--m-primary--BackgroundColor: var(--pf-t--global--color--brand--default); --pf-v6-c-menu-toggle--m-primary--BorderRadius: var(--pf-t--global--border--radius--pill); --pf-v6-c-menu-toggle--m-primary--BorderColor: transparent; --pf-v6-c-menu-toggle--m-primary--hover--Color: var(--pf-t--global--text--color--on-brand--hover); --pf-v6-c-menu-toggle--m-primary--hover--BackgroundColor: var(--pf-t--global--color--brand--hover); --pf-v6-c-menu-toggle--m-primary--hover--BorderColor: transparent; --pf-v6-c-menu-toggle--m-primary--expanded--Color: var(--pf-t--global--text--color--on-brand--clicked); --pf-v6-c-menu-toggle--m-primary--expanded--BackgroundColor: var(--pf-t--global--color--brand--clicked); --pf-v6-c-menu-toggle--m-primary--expanded--BorderColor: transparent; --pf-v6-c-menu-toggle--m-primary__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--default); --pf-v6-c-menu-toggle--m-primary--hover__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--hover); --pf-v6-c-menu-toggle--m-primary--expanded__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--clicked); --pf-v6-c-menu-toggle--m-primary--m-small--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--compact); --pf-v6-c-menu-toggle--m-primary--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--compact); --pf-v6-c-menu-toggle--m-secondary--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--default); --pf-v6-c-menu-toggle--m-secondary--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--default); --pf-v6-c-menu-toggle--m-secondary--BackgroundColor: transparent; --pf-v6-c-menu-toggle--m-secondary--Color: var(--pf-t--global--text--color--brand--default); --pf-v6-c-menu-toggle--m-secondary--BorderColor: var(--pf-t--global--border--color--brand--default); --pf-v6-c-menu-toggle--m-secondary--BorderRadius: var(--pf-t--global--border--radius--pill); --pf-v6-c-menu-toggle--m-secondary--hover--Color: var(--pf-t--global--text--color--brand--hover); --pf-v6-c-menu-toggle--m-secondary--hover--BorderWidth: var(--pf-t--global--border--width--action--hover); --pf-v6-c-menu-toggle--m-secondary--hover--BorderColor: var(--pf-t--global--border--color--brand--hover); --pf-v6-c-menu-toggle--m-secondary--expanded--Color: var(--pf-t--global--text--color--brand--clicked); --pf-v6-c-menu-toggle--m-secondary--expanded--BackgroundColor: transparent; --pf-v6-c-menu-toggle--m-secondary--expanded--BorderWidth: var(--pf-t--global--border--width--action--clicked); --pf-v6-c-menu-toggle--m-secondary--expanded--BorderColor: var(--pf-t--global--border--color--brand--clicked); --pf-v6-c-menu-toggle--m-secondary__toggle-icon--Color: var(--pf-t--global--icon--color--brand--default); --pf-v6-c-menu-toggle--m-secondary--hover__toggle-icon--Color: var(--pf-t--global--icon--color--brand--hover); --pf-v6-c-menu-toggle--m-secondary--expanded__toggle-icon--Color: var(--pf-t--global--icon--color--brand--clicked); --pf-v6-c-menu-toggle--m-secondary--m-small--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--compact); --pf-v6-c-menu-toggle--m-secondary--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--compact); --pf-v6-c-menu-toggle--m-full-height--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--spacious); --pf-v6-c-menu-toggle--m-full-height--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--spacious); --pf-v6-c-menu-toggle--m-split-button--child--disabled--Color: var(--pf-t--global--text--color--on-disabled); --pf-v6-c-menu-toggle--m-split-button--child--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default); --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartWidth: var(--pf-t--global--border--width--action--default); --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor: var(--pf-t--global--border--color--default); --pf-v6-c-menu-toggle--m-split-button--child--BorderRadius: var(--pf-t--global--border--radius--pill); --pf-v6-c-menu-toggle--m-split-button--child--disabled--BorderInlineStartColor: var(--pf-t--global--icon--color--on-disabled); --pf-v6-c-menu-toggle--m-split-button--pill--child--PaddingInlineStart--offset: var(--pf-t--global--spacer--control--horizontal--default); --pf-v6-c-menu-toggle--m-split-button--pill--child--PaddingInlineEnd--offset: var(--pf-t--global--spacer--control--horizontal--default); --pf-v6-c-menu-toggle--m-split-button--m-small--pill--child--PaddingInlineStart--offset: var(--pf-t--global--spacer--control--horizontal--compact); --pf-v6-c-menu-toggle--m-split-button--m-small--pill--child--PaddingInlineEnd--offset: var(--pf-t--global--spacer--control--horizontal--compact); --pf-v6-c-menu-toggle--m-split-button--m-primary--child--BackgroundColor: var(--pf-t--global--color--brand--default); --pf-v6-c-menu-toggle--m-split-button--m-primary--child--hover--BackgroundColor: var(--pf-t--global--color--brand--hover); --pf-v6-c-menu-toggle--m-split-button--m-primary--child--BorderInlineStartColor: var(--pf-t--global--border--color--alt); --pf-v6-c-menu-toggle--m-split-button--m-primary--expanded--child--BackgroundColor: var(--pf-t--global--color--brand--clicked); --pf-v6-c-menu-toggle--m-split-button--m-secondary--child--BorderInlineStartColor: var(--pf-t--global--color--brand--default); --pf-v6-c-menu-toggle__button--BackgroundColor: transparent; --pf-v6-c-menu-toggle__button--Gap: var(--pf-t--global--spacer--gap--text-to-element--default); --pf-v6-c-menu-toggle__button--AlignSelf: baseline; --pf-v6-c-menu-toggle__button--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--plain); --pf-v6-c-menu-toggle__button--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--plain); --pf-v6-c-menu-toggle__button--MinWidth: calc(var(--pf-v6-c-menu-toggle--FontSize) * var(--pf-v6-c-menu-toggle--LineHeight) + var(--pf-v6-c-menu-toggle--PaddingBlockStart) + var(--pf-v6-c-menu-toggle--PaddingBlockEnd)); --pf-v6-c-menu-toggle__button--m-text--PaddingInlineStart: var(--pf-t--global--spacer--sm); --pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--default); --pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default); --pf-v6-c-menu-toggle--m-small__button--toggle-icon--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--compact); --pf-v6-c-menu-toggle--m-small__button--toggle-icon--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--compact); --pf-v6-c-menu-toggle--m-plain--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--plain--default); --pf-v6-c-menu-toggle--m-plain--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--plain--default); --pf-v6-c-menu-toggle--m-plain--Color: var(--pf-t--global--icon--color--regular); --pf-v6-c-menu-toggle--m-plain--BackgroundColor: var(--pf-t--global--background--color--action--plain--default); --pf-v6-c-menu-toggle--m-plain--BorderColor: var(--pf-t--global--border--color--high-contrast); --pf-v6-c-menu-toggle--m-plain--BorderWidth: var(--pf-t--global--border--width--action--plain--default); --pf-v6-c-menu-toggle--m-plain--hover--BorderWidth: var(--pf-t--global--border--width--action--plain--hover); --pf-v6-c-menu-toggle--m-plain--expanded--BorderWidth: var(--pf-t--global--border--width--action--plain--clicked); --pf-v6-c-menu-toggle--m-plain--BorderRadius: var(--pf-t--global--border--radius--small); --pf-v6-c-menu-toggle--m-plain--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover); --pf-v6-c-menu-toggle--m-plain--expanded--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked); --pf-v6-c-menu-toggle--m-plain--disabled--Color: var(--pf-t--global--text--color--disabled); --pf-v6-c-menu-toggle--m-plain--disabled__icon--Color: var(--pf-t--global--icon--color--disabled); --pf-v6-c-menu-toggle--m-plain--disabled__toggle-icon--Color: var(--pf-t--global--icon--color--disabled); --pf-v6-c-menu-toggle--m-plain--disabled--BackgroundColor: transparent; --pf-v6-c-menu-toggle--m-plain--m-small--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--plain--compact); --pf-v6-c-menu-toggle--m-plain--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--plain--compact); --pf-v6-c-menu-toggle--m-typeahead__button--AlignSelf: stretch; --pf-v6-c-menu-toggle--m-small--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--compact); --pf-v6-c-menu-toggle--m-small--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--compact); --pf-v6-c-menu-toggle--m-small--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--compact); --pf-v6-c-menu-toggle--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--compact); --pf-v6-c-menu-toggle__status-icon--Color: var(--pf-t--global--icon--color--regular); --pf-v6-c-menu-toggle__status-icon--m-danger--TransitionDuration--Opacity: var(--pf-t--global--motion--duration--icon--default); --pf-v6-c-menu-toggle__status-icon--m-danger--TransitionTimingFunction--Opacity: var(--pf-t--global--motion--timing-function--default); --pf-v6-c-menu-toggle--m-success--BorderColor: var(--pf-t--global--border--color--status--success--default); --pf-v6-c-menu-toggle--m-success__status-icon--Color: var(--pf-t--global--icon--color--status--success--default); --pf-v6-c-menu-toggle--m-warning--BorderColor: var(--pf-t--global--border--color--status--warning--default); --pf-v6-c-menu-toggle--m-warning__status-icon--Color: var(--pf-t--global--icon--color--status--warning--default); --pf-v6-c-menu-toggle--m-danger--BorderColor: var(--pf-t--global--border--color--status--danger--default); --pf-v6-c-menu-toggle--m-danger__status-icon--Color: var(--pf-t--global--icon--color--status--danger--default); --pf-v6-c-menu-toggle--m-danger--AnimationDuration--Transform: var(--pf-t--global--motion--duration--fade--default); --pf-v6-c-menu-toggle--m-danger--AnimationTimingFunction--Transform: var(--pf-t--global--motion--timing-function--default); --pf-v6-c-menu-toggle--m-placeholder--Color: var(--pf-t--global--text--color--placeholder); --pf-v6-c-menu-toggle__controls--Gap: var(--pf-t--global--spacer--sm); --pf-v6-c-menu-toggle--m-settings__icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--long); --pf-v6-c-menu-toggle--m-settings__icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--accelerate); --pf-v6-c-menu-toggle--m-settings--hover__icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--long); --pf-v6-c-menu-toggle--m-settings--hover__icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate); --pf-v6-c-menu-toggle--m-settings--hover__icon--Rotate: 60deg; } .pf-v6-c-menu-toggle { position: relative; display: inline-flex; gap: var(--pf-v6-c-menu-toggle--Gap); align-items: center; justify-content: center; min-width: var(--pf-v6-c-menu-toggle--MinWidth); max-width: 100%; padding-block-start: var(--pf-v6-c-menu-toggle--PaddingBlockStart); padding-block-end: var(--pf-v6-c-menu-toggle--PaddingBlockEnd); padding-inline-start: var(--pf-v6-c-menu-toggle--PaddingInlineStart); padding-inline-end: var(--pf-v6-c-menu-toggle--PaddingInlineEnd); font-size: var(--pf-v6-c-menu-toggle--FontSize); line-height: var(--pf-v6-c-menu-toggle--LineHeight); color: var(--pf-v6-c-menu-toggle--Color); cursor: pointer; background-color: var(--pf-v6-c-menu-toggle--BackgroundColor); border: 0; transition-timing-function: var(--pf-v6-c-menu-toggle--TransitionTimingFunction); transition-duration: var(--pf-v6-c-menu-toggle--TransitionDuration); transition-property: var(--pf-v6-c-menu-toggle--TransitionProperty); } .pf-v6-c-menu-toggle, .pf-v6-c-menu-toggle::before { border-radius: var(--pf-v6-c-menu-toggle--BorderRadius); } .pf-v6-c-menu-toggle::before { position: absolute; inset-block-start: 0; inset-block-end: 0; inset-inline-start: 0; inset-inline-end: 0; z-index: var(--pf-v6-c-menu-toggle--border--ZIndex); pointer-events: none; content: ""; border: var(--pf-v6-c-menu-toggle--BorderWidth) solid var(--pf-v6-c-menu-toggle--BorderColor); transition: inherit; } .pf-v6-c-menu-toggle.pf-m-primary { --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-primary--PaddingInlineStart); --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-primary--PaddingInlineEnd); --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--m-primary--Color); --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--m-primary--BackgroundColor); --pf-v6-c-menu-toggle--BorderRadius: var(--pf-v6-c-menu-toggle--m-primary--BorderRadius); --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-primary--BorderColor); --pf-v6-c-menu-toggle--hover--Color: var(--pf-v6-c-menu-toggle--m-primary--hover--Color); --pf-v6-c-menu-toggle--hover--BackgroundColor: var(--pf-v6-c-menu-toggle--m-primary--hover--BackgroundColor); --pf-v6-c-menu-toggle--hover--BorderColor: var(--pf-v6-c-menu-toggle--m-primary--hover--BorderColor); --pf-v6-c-menu-toggle--expanded--Color: var(--pf-v6-c-menu-toggle--m-primary--expanded--Color); --pf-v6-c-menu-toggle--expanded--BackgroundColor: var(--pf-v6-c-menu-toggle--m-primary--expanded--BackgroundColor); --pf-v6-c-menu-toggle--expanded--BorderColor: var(--pf-v6-c-menu-toggle--m-primary--expanded--BorderColor); --pf-v6-c-menu-toggle--hover__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-primary--hover__toggle-icon--Color); --pf-v6-c-menu-toggle--expanded__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-primary--expanded__toggle-icon--Color); --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-primary__toggle-icon--Color); --pf-v6-c-menu-toggle--m-small--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-primary--m-small--PaddingInlineStart); --pf-v6-c-menu-toggle--m-small--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-primary--m-small--PaddingInlineEnd); } .pf-v6-c-menu-toggle.pf-m-secondary { --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-secondary--PaddingInlineStart); --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-secondary--PaddingInlineEnd); --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--m-secondary--Color); --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--m-secondary--BackgroundColor); --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-secondary--BorderColor); --pf-v6-c-menu-toggle--BorderRadius: var(--pf-v6-c-menu-toggle--m-secondary--BorderRadius); --pf-v6-c-menu-toggle--hover--Color: var(--pf-v6-c-menu-toggle--m-secondary--hover--Color); --pf-v6-c-menu-toggle--hover--BorderWidth: var(--pf-v6-c-menu-toggle--m-secondary--hover--BorderWidth); --pf-v6-c-menu-toggle--hover--BorderColor: var(--pf-v6-c-menu-toggle--m-secondary--hover--BorderColor); --pf-v6-c-menu-toggle--expanded--Color: var(--pf-v6-c-menu-toggle--m-secondary--expanded--Color); --pf-v6-c-menu-toggle--expanded--BackgroundColor: var(--pf-v6-c-menu-toggle--m-secondary--expanded--BackgroundColor); --pf-v6-c-menu-toggle--expanded--BorderWidth: var(--pf-v6-c-menu-toggle--m-secondary--expanded--BorderWidth); --pf-v6-c-menu-toggle--hover__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-secondary--hover__toggle-icon--Color); --pf-v6-c-menu-toggle--expanded__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-secondary--expanded__toggle-icon--Color); --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-secondary__toggle-icon--Color); --pf-v6-c-menu-toggle--m-small--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-secondary--m-small--PaddingInlineStart); --pf-v6-c-menu-toggle--m-small--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-secondary--m-small--PaddingInlineEnd); } .pf-v6-c-menu-toggle.pf-m-full-height { --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-full-height--PaddingInlineEnd); --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-full-height--PaddingInlineStart); --pf-v6-c-menu-toggle--BorderBlockStartWidth: var(--pf-v6-c-menu-toggle--m-full-height__toggle--BorderBlockStartWidth); align-items: center; height: 100%; } .pf-v6-c-menu-toggle.pf-m-full-width { width: 100%; } .pf-v6-c-menu-toggle.pf-m-plain { --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-plain--PaddingInlineStart); --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-plain--PaddingInlineEnd); --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--m-plain--Color); --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--m-plain--BackgroundColor); --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-plain--BorderColor); --pf-v6-c-menu-toggle--BorderWidth: var(--pf-v6-c-menu-toggle--m-plain--BorderWidth); --pf-v6-c-menu-toggle--BorderRadius: var(--pf-v6-c-menu-toggle--m-plain--BorderRadius); --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--m-plain--BackgroundColor); --pf-v6-c-menu-toggle--hover--BackgroundColor: var(--pf-v6-c-menu-toggle--m-plain--hover--BackgroundColor); --pf-v6-c-menu-toggle--expanded--BackgroundColor: var(--pf-v6-c-menu-toggle--m-plain--expanded--BackgroundColor); --pf-v6-c-menu-toggle--disabled--Color: var(--pf-v6-c-menu-toggle--m-plain--disabled--Color); --pf-v6-c-menu-toggle--disabled__icon--Color: var(--pf-v6-c-menu-toggle--m-plain--disabled__icon--Color); --pf-v6-c-menu-toggle--disabled__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-plain--disabled__icon--Color); --pf-v6-c-menu-toggle--disabled--BackgroundColor: var(--pf-v6-c-menu-toggle--m-plain--disabled--BackgroundColor); --pf-v6-c-menu-toggle--m-small--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-plain--m-small--PaddingInlineStart); --pf-v6-c-menu-toggle--m-small--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-plain--m-small--PaddingInlineEnd); } .pf-v6-c-menu-toggle.pf-m-plain::before { --pf-v6-c-menu-toggle--BorderWidth: var(--pf-v6-c-menu-toggle--m-plain--BorderWidth); --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-plain--BorderColor); } .pf-v6-c-menu-toggle:is(:hover, :focus) { --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--hover--Color); --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--hover--BackgroundColor); --pf-v6-c-menu-toggle--BorderWidth: var(--pf-v6-c-menu-toggle--hover--BorderWidth); --pf-v6-c-menu-toggle--m-plain--BorderWidth: var(--pf-v6-c-menu-toggle--m-plain--hover--BorderWidth); --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--hover--BorderColor); --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-v6-c-menu-toggle--hover__toggle-icon--Color); --pf-v6-c-menu-toggle__icon--TransitionDelay: var(--pf-v6-c-menu-toggle--hover__icon--TransitionDelay); --pf-v6-c-menu-toggle__icon--TransitionDuration: var(--pf-v6-c-menu-toggle--hover__icon--TransitionDuration); --pf-v6-c-menu-toggle__icon--TransitionProperty: var(--pf-v6-c-menu-toggle--hover__icon--TransitionProperty); --pf-v6-c-menu-toggle__icon--Rotate: var(--pf-v6-c-menu-toggle--hover__icon--Rotate); } .pf-v6-c-menu-toggle:is(.pf-m-expanded, [aria-expanded=true]) { --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--expanded--Color); --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--expanded--BackgroundColor); --pf-v6-c-menu-toggle--BorderWidth: var(--pf-v6-c-menu-toggle--expanded--BorderWidth); --pf-v6-c-menu-toggle--m-plain--BorderWidth: var(--pf-v6-c-menu-toggle--m-plain--expanded--BorderWidth); --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--expanded--BorderColor); --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-v6-c-menu-toggle--expanded__toggle-icon--Color); } .pf-v6-c-menu-toggle.pf-m-primary::before, .pf-v6-c-menu-toggle:is(:disabled, .pf-m-disabled)::before { border: 0; } .pf-v6-c-menu-toggle.pf-m-small { --pf-v6-c-menu-toggle--PaddingBlockStart: var(--pf-v6-c-menu-toggle--m-small--PaddingBlockStart); --pf-v6-c-menu-toggle--PaddingBlockEnd: var(--pf-v6-c-menu-toggle--m-small--PaddingBlockEnd); --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-small--PaddingInlineStart); --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-small--PaddingInlineEnd); --pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-small__button--toggle-icon--PaddingInlineStart); --pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-small__button--toggle-icon--PaddingInlineEnd); --pf-v6-c-menu-toggle--m-split-button--pill--child--PaddingInlineStart--offset: var(--pf-v6-c-menu-toggle--m-split-button--m-small--pill--child--PaddingInlineStart--offset); --pf-v6-c-menu-toggle--m-split-button--pill--child--PaddingInlineEnd--offset: var(--pf-v6-c-menu-toggle--m-split-button--m-small--pill--child--PaddingInlineEnd--offset); } .pf-v6-c-menu-toggle.pf-m-success { --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-success--BorderColor); --pf-v6-c-menu-toggle__status-icon--Color: var(--pf-v6-c-menu-toggle--m-success__status-icon--Color); } .pf-v6-c-menu-toggle.pf-m-warning { --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-warning--BorderColor); --pf-v6-c-menu-toggle__status-icon--Color: var(--pf-v6-c-menu-toggle--m-warning__status-icon--Color); } .pf-v6-c-menu-toggle.pf-m-danger { --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-danger--BorderColor); --pf-v6-c-menu-toggle__status-icon--Color: var(--pf-v6-c-menu-toggle--m-danger__status-icon--Color); } @media screen and (prefers-reduced-motion: no-preference) { .pf-v6-c-menu-toggle.pf-m-danger { transform: translateX(var(--pf-v6-c-menu-toggle--m-danger--TranslateX, 0)); animation-name: pf-v6-c-menu-toggle-m-danger-motion; animation-duration: var(--pf-v6-c-menu-toggle--m-danger--AnimationDuration--Transform); animation-timing-function: var(--pf-v6-c-menu-toggle--m-danger--AnimationTimingFunction--Transform); animation-fill-mode: both; } } .pf-v6-c-menu-toggle.pf-m-danger .pf-v6-c-menu-toggle__status-icon { animation-name: pf-v6-c-menu-toggle-status-icon-fade-in; animation-duration: var(--pf-v6-c-menu-toggle__status-icon--m-danger--TransitionDuration--Opacity); animation-timing-function: var(--pf-v6-c-menu-toggle__status-icon--m-danger--TransitionTimingFunction--Opacity); } @keyframes pf-v6-c-menu-toggle-status-icon-fade-in { from { opacity: 0; } to { opacity: 1; } } .pf-v6-c-menu-toggle.pf-m-settings { --pf-v6-c-menu-toggle__icon--TransitionProperty: rotate; --pf-v6-c-menu-toggle__icon--TransitionDuration: var(--pf-v6-c-menu-toggle--m-settings__icon--TransitionDuration); --pf-v6-c-menu-toggle__icon--TransitionTimingFunction: var(--pf-v6-c-menu-toggle--m-settings__icon--TransitionTimingFunction); --pf-v6-c-menu-toggle--hover__icon--TransitionProperty: rotate; --pf-v6-c-menu-toggle--hover__icon--TransitionDuration: var(--pf-v6-c-menu-toggle--m-settings--hover__icon--TransitionDuration); --pf-v6-c-menu-toggle--hover__icon--TransitionTimingFunction: var(--pf-v6-c-menu-toggle--m-settings--hover__icon--TransitionTimingFunction); --pf-v6-c-menu-toggle--hover__icon--Rotate: var(--pf-v6-c-menu-toggle--m-settings--hover__icon--Rotate); } .pf-v6-c-menu-toggle.pf-m-placeholder { --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--m-placeholder--Color); } .pf-v6-c-menu-toggle:is(:disabled, .pf-m-disabled) { --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--disabled--Color); --pf-v6-c-menu-toggle__icon--Color: var(--pf-v6-c-menu-toggle--disabled__icon--Color); --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-v6-c-menu-toggle--disabled__toggle-icon--Color); --pf-v6-c-menu-toggle__status-icon--Color: var(--pf-v6-c-menu-toggle--disabled__status-icon--Color); --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--disabled--BackgroundColor); } .pf-v6-c-menu-toggle:is(:disabled, .pf-m-disabled), .pf-v6-c-menu-toggle:is(:disabled, .pf-m-disabled) .pf-v6-c-button { pointer-events: none; } @property --pf-v6-c-menu-toggle--m-danger--TranslateX { syntax: ""; inherits: false; initial-value: 0; } @media (prefers-reduced-motion: no-preference) { @keyframes pf-v6-c-menu-toggle-m-danger-motion { 33% { --pf-v6-c-menu-toggle--m-danger--TranslateX: -2px; } 66% { --pf-v6-c-menu-toggle--m-danger--TranslateX: 3px; } } } .pf-v6-c-menu-toggle.pf-m-split-button { --pf-v6-c-menu-toggle--Gap: 0; --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor: var(--pf-v6-c-menu-toggle--BorderColor); padding: 0; } .pf-v6-c-menu-toggle.pf-m-split-button > * { position: relative; padding-block-start: var(--pf-v6-c-menu-toggle--PaddingBlockStart); padding-block-end: var(--pf-v6-c-menu-toggle--PaddingBlockEnd); padding-inline-start: var(--pf-v6-c-menu-toggle--PaddingInlineStart); padding-inline-end: var(--pf-v6-c-menu-toggle--PaddingInlineEnd); } .pf-v6-c-menu-toggle.pf-m-split-button > :first-child { border-start-start-radius: var(--pf-v6-c-menu-toggle--BorderRadius); border-end-start-radius: var(--pf-v6-c-menu-toggle--BorderRadius); } .pf-v6-c-menu-toggle.pf-m-split-button > :last-child { border-start-end-radius: var(--pf-v6-c-menu-toggle--BorderRadius); border-end-end-radius: var(--pf-v6-c-menu-toggle--BorderRadius); } .pf-v6-c-menu-toggle.pf-m-split-button > .pf-v6-c-check { --pf-v6-c-check__label--Color: currentcolor; --pf-v6-c-check__label--disabled--Color: currentcolor; align-items: center; align-self: stretch; } .pf-v6-c-menu-toggle.pf-m-split-button > .pf-v6-c-check .pf-v6-c-check__input { --pf-v6-c-check__input--TranslateY: 0; align-self: center; } .pf-v6-c-menu-toggle.pf-m-split-button > :not(:first-child) { border-inline-start: var(--pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartWidth) solid var(--pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor); } .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary { --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor: var(--pf-v6-c-menu-toggle--m-split-button--m-primary--child--BorderInlineStartColor); } .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary > .pf-v6-c-menu-toggle__button, .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary > .pf-v6-c-check { background-color: var(--pf-v6-c-menu-toggle--m-split-button--m-primary--child--BackgroundColor); } .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary > .pf-v6-c-menu-toggle__button:is(:hover, :focus), .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary > .pf-v6-c-check:is(:hover, :focus) { --pf-v6-c-menu-toggle--m-split-button--m-primary--child--BackgroundColor: var(--pf-v6-c-menu-toggle--m-split-button--m-primary--child--hover--BackgroundColor); } .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary.pf-m-expanded { --pf-v6-c-menu-toggle--m-split-button--m-primary--child--BackgroundColor: var(--pf-v6-c-menu-toggle--m-split-button--m-primary--expanded--child--BackgroundColor); } .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-secondary { --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor: var(--pf-v6-c-menu-toggle--m-split-button--m-secondary--child--BorderInlineStartColor); } .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary .pf-v6-c-menu-toggle__button:not(:has(.pf-v6-c-menu-toggle__controls:only-child)):first-child, .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary .pf-v6-c-check:not(.pf-m-standalone):first-child, .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-secondary .pf-v6-c-menu-toggle__button:not(:has(.pf-v6-c-menu-toggle__controls:only-child)):first-child, .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-secondary .pf-v6-c-check:not(.pf-m-standalone):first-child { padding-inline-end: var(--pf-v6-c-menu-toggle--m-split-button--pill--child--PaddingInlineEnd--offset); } .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary .pf-v6-c-menu-toggle__button:not(:has(.pf-v6-c-menu-toggle__controls:only-child)):last-child, .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary .pf-v6-c-check:not(.pf-m-standalone):last-child, .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-secondary .pf-v6-c-menu-toggle__button:not(:has(.pf-v6-c-menu-toggle__controls:only-child)):last-child, .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-secondary .pf-v6-c-check:not(.pf-m-standalone):last-child { padding-inline-start: var(--pf-v6-c-menu-toggle--m-split-button--pill--child--PaddingInlineStart--offset); } .pf-v6-c-menu-toggle.pf-m-split-button:is(.pf-m-disabled, :disabled) { --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor: var(--pf-v6-c-menu-toggle--m-split-button--child--disabled--BorderInlineStartColor); } .pf-v6-c-menu-toggle.pf-m-split-button:is(.pf-m-disabled, :disabled) > .pf-v6-c-menu-toggle__button, .pf-v6-c-menu-toggle.pf-m-split-button:is(.pf-m-disabled, :disabled) > .pf-v6-c-check { color: var(--pf-v6-c-menu-toggle--m-split-button--child--disabled--Color); background-color: var(--pf-v6-c-menu-toggle--m-split-button--child--disabled--BackgroundColor); } .pf-v6-c-menu-toggle.pf-m-split-button:is(.pf-m-disabled, :disabled)::before { content: none; } .pf-v6-c-menu-toggle.pf-m-typeahead { --pf-v6-c-menu-toggle__button--AlignSelf: var(--pf-v6-c-menu-toggle--m-typeahead__button--AlignSelf); --pf-v6-c-menu-toggle--Gap: 0; align-items: stretch; padding: 0; } .pf-v6-c-menu-toggle.pf-m-typeahead .pf-v6-c-menu-toggle__button { --pf-v6-c-menu-toggle__button--PaddingInlineEnd: 0; } .pf-v6-c-menu-toggle.pf-m-typeahead .pf-v6-c-menu-toggle__controls { --pf-v6-c-menu-toggle__button--PaddingInlineEnd: 0; display: flex; align-items: stretch; } .pf-v6-c-menu-toggle.pf-m-typeahead .pf-v6-c-text-input-group { --pf-v6-c-text-input-group__utilities--MarginInlineEnd: 0; flex: 1; } .pf-v6-c-menu-toggle__button { gap: var(--pf-v6-c-menu-toggle__button--Gap); align-self: var(--pf-v6-c-menu-toggle__button--AlignSelf); min-width: var(--pf-v6-c-menu-toggle__button--MinWidth); padding-inline-start: var(--pf-v6-c-menu-toggle__button--PaddingInlineStart); padding-inline-end: var(--pf-v6-c-menu-toggle__button--PaddingInlineEnd); color: inherit; background-color: var(--pf-v6-c-menu-toggle__button--BackgroundColor); border: 0; } .pf-v6-c-menu-toggle__button.pf-m-text { display: inline-flex; align-items: baseline; } .pf-v6-c-menu-toggle.pf-m-split-button > .pf-v6-c-check.pf-m-standalone, .pf-v6-c-menu-toggle__button:has(> .pf-v6-c-menu-toggle__controls:only-child) { padding-inline-start: var(--pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineStart); padding-inline-end: var(--pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineEnd); } .pf-v6-c-menu-toggle__text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .pf-v6-c-menu-toggle__count { display: flex; flex-wrap: nowrap; } .pf-v6-c-menu-toggle__icon.pf-m-avatar .pf-v6-c-avatar, .pf-v6-c-menu-toggle__icon.pf-m-avatar img, .pf-v6-c-menu-toggle__icon.pf-m-avatar svg, .pf-v6-c-menu-toggle:not(.pf-m-plain) .pf-v6-c-menu-toggle__icon { margin-block-start: calc(var(--pf-v6-c-menu-toggle--PaddingBlockStart) * -1); margin-block-end: calc(var(--pf-v6-c-menu-toggle--PaddingBlockEnd) * -1); } .pf-v6-c-menu-toggle__icon { flex-shrink: 0; transition-delay: var(--pf-v6-c-menu-toggle__icon--TransitionDelay); transition-duration: var(--pf-v6-c-menu-toggle__icon--TransitionDuration); transition-property: var(--pf-v6-c-menu-toggle__icon--TransitionProperty); rotate: var(--pf-v6-c-menu-toggle__icon--Rotate); } .pf-v6-c-menu-toggle__icon :where(picture, img) { vertical-align: middle; } .pf-v6-c-menu-toggle__controls { display: flex; gap: var(--pf-v6-c-menu-toggle__controls--Gap); align-items: center; justify-content: center; margin-inline-start: auto; } .pf-v6-c-menu-toggle__toggle-icon { min-height: var(--pf-v6-c-menu-toggle__toggle-icon--MinHeight); color: var(--pf-v6-c-menu-toggle__toggle-icon--Color, inherit); } .pf-v6-c-menu-toggle__status-icon { color: var(--pf-v6-c-menu-toggle__status-icon--Color, inherit); }.pf-v6-c-input-group { --pf-v6-c-input-group--Gap: var(--pf-t--global--spacer--gap--control-to-control--default); --pf-v6-c-input-group__item--offset: var(--pf-t--global--border--width--control--default); --pf-v6-c-input-group__item--BorderWidth--base: var(--pf-t--global--border--width--control--default); --pf-v6-c-input-group__item--BorderColor--base: var(--pf-t--global--border--color--default); --pf-v6-c-input-group__item--BackgroundColor: transparent; --pf-v6-c-input-group__item--AlignItems: start; --pf-v6-c-input-group__item--m-box--PaddingInlineEnd: var(--pf-t--global--spacer--sm); --pf-v6-c-input-group__item--m-box--PaddingInlineStart: var(--pf-t--global--spacer--sm); --pf-v6-c-input-group__item--m-box--BackgroundColor: var(--pf-t--global--background--color--secondary--default); --pf-v6-c-input-group__item--m-box--BorderWidth: var(--pf-v6-c-input-group__item--BorderWidth--base); --pf-v6-c-input-group__item--m-box--BorderRadius: var(--pf-t--global--border--radius--small); --pf-v6-c-input-group__item--m-box--BorderBlockStartColor: var(--pf-v6-c-input-group__item--BorderColor--base); --pf-v6-c-input-group__item--m-box--BorderInlineEndColor: var(--pf-v6-c-input-group__item--BorderColor--base); --pf-v6-c-input-group__item--m-box--BorderBlockEndColor: var(--pf-v6-c-input-group__item--BorderColor--base); --pf-v6-c-input-group__item--m-box--BorderInlineStartColor: var(--pf-v6-c-input-group__item--BorderColor--base); --pf-v6-c-input-group__item--m-plain--BackgroundColor: transparent; --pf-v6-c-input-group__text--FontSize: var(--pf-t--global--font--size--body--default); --pf-v6-c-input-group__text--Color: var(--pf-t--global--text--color--regular); --pf-v6-c-input-group__item--m-disabled__text--Color: var(--pf-t--global--text--color--on-disabled); --pf-v6-c-input-group__item--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default); --pf-v6-c-input-group__item--m-search-text-input--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default); --pf-v6-c-input-group__item--m-search-text-input--TransitionDuration--expand--fade: var(--pf-t--global--motion--duration--fade--default); --pf-v6-c-input-group__item--m-search-text-input--TransitionDuration--collapse--fade: var(--pf-t--global--motion--duration--fade--short); --pf-v6-c-input-group__item--m-search-text-input--TransitionDuration--expand--slide: var(--pf-t--global--motion--duration--fade--default); --pf-v6-c-input-group__item--m-search-text-input--TransitionDuration--collapse--slide: var(--pf-t--global--motion--duration--fade--short); --pf-v6-c-input-group__item--m-search-text-input--TransitionDuration--fade: var(--pf-v6-c-input-group__item--m-search-text-input--TransitionDuration--collapse--fade); --pf-v6-c-input-group__item--m-search-text-input--TransitionDuration--slide: var(--pf-v6-c-input-group__item--m-search-text-input--TransitionDuration--collapse--slide); --pf-v6-c-input-group__item--m-search-text-input--ScaleX: 1; --pf-v6-c-input-group__item--m-search-text-input--TransformOriginX--expand-start: 100%; --pf-v6-c-input-group__item--m-search-text-input--TransformOriginX--expand-end: 0; --pf-v6-c-input-group__item--m-search-text-input--TransformOriginX: var(--pf-v6-c-input-group__item--m-search-text-input--TransformOriginX--expand-end); --pf-v6-c-input-group__item--m-search-expand--TransitionTimingFunction:var(--pf-t--global--motion--timing-function--default); --pf-v6-c-input-group__item--m-search-expand--TransitionDuration--expand--fade: 0s; --pf-v6-c-input-group__item--m-search-expand--TransitionDuration--collapse--fade: 0s; --pf-v6-c-input-group__item--m-search-expand--TransitionDuration--fade: var(--pf-v6-c-input-group__item--m-search-expand--TransitionDuration--expand--fade); --pf-v6-c-input-group__item--m-search-action--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default); --pf-v6-c-input-group__item--m-search-action--TransitionDuration--expand--fade: var(--pf-t--global--motion--duration--fade--default); --pf-v6-c-input-group__item--m-search-action--TransitionDuration--collapse--fade: var(--pf-t--global--motion--duration--fade--short); --pf-v6-c-input-group__item--m-search-action--TransitionDuration--fade: var(--pf-v6-c-input-group__item--m-search-action--TransitionDuration--collapse--fade); } @media (prefers-reduced-motion: no-preference) { .pf-v6-c-input-group { --pf-v6-c-input-group__item--m-search-text-input--ScaleX: .7; } } .pf-v6-c-input-group { display: flex; gap: var(--pf-v6-c-input-group--Gap); width: 100%; } .pf-v6-c-input-group.pf-m-search-expandable:not(.pf-m-expanded) { --pf-v6-c-input-group--Gap: 0; transition: gap 0s var(--pf-v6-c-input-group__item--m-search-text-input--TransitionDuration--fade); } .pf-v6-c-input-group.pf-m-search-expandable .pf-v6-c-input-group__item.pf-m-search-input { flex-grow: 1; max-width: var(--pf-v6-c-input-group__item--m-search-text-input--MaxWidth, 0); visibility: var(--pf-v6-c-input-group__item--m-search-text-input--Visibility, hidden); opacity: var(--pf-v6-c-input-group__item--m-search-text-input--Opacity, 0); transition-delay: 0s, 0s, var(--pf-v6-c-input-group__item--m-search-text-input--TransitionDuration--fade), var(--pf-v6-c-input-group__item--m-search-text-input--TransitionDuration--fade); transition-timing-function: var(--pf-v6-c-input-group__item--m-search-text-input--TransitionTimingFunction); transition-duration: var(--pf-v6-c-input-group__item--m-search-text-input--TransitionDuration--fade), var(--pf-v6-c-input-group__item--m-search-text-input--TransitionDuration--slide), 0s, 0s; transition-property: opacity, scale, visibility, max-width; transform-origin: var(--pf-v6-c-input-group__item--m-search-text-input--TransformOriginX) center; scale: var(--pf-v6-c-input-group__item--m-search-text-input--ScaleX) 1; } .pf-v6-c-input-group.pf-m-search-expandable .pf-v6-c-input-group__item.pf-m-search-expand { max-width: var(--pf-v6-c-input-group__item--m-search-expand--MaxWidth, 100%); visibility: var(--pf-v6-c-input-group__item--m-search-expand--Visibility, visible); opacity: var(--pf-v6-c-input-group__item--m-search-expand--Opacity, 1); transition-delay: var(--pf-v6-c-input-group__item--m-search-action--TransitionDuration--fade); transition-timing-function: var(--pf-v6-c-input-group__item--m-search-expand--TransitionTimingFunction); transition-duration: var(--pf-v6-c-input-group__item--m-search-expand--TransitionDuration--fade), 0s, 0s; transition-property: opacity, visibility, max-width; } .pf-v6-c-input-group.pf-m-search-expandable .pf-v6-c-input-group__item.pf-m-search-action { max-width: var(--pf-v6-c-input-group__item--m-search-action--MaxWidth, 0); visibility: var(--pf-v6-c-input-group__item--m-search-action--Visibility, hidden); opacity: var(--pf-v6-c-input-group__item--m-search-action--Opacity, 0); transition-delay: 0s, var(--pf-v6-c-input-group__item--m-search-action--TransitionDuration--fade), var(--pf-v6-c-input-group__item--m-search-action--TransitionDuration--fade); transition-timing-function: var(--pf-v6-c-input-group__item--m-search-action--TransitionTimingFunction); transition-duration: var(--pf-v6-c-input-group__item--m-search-action--TransitionDuration--fade), 0s, 0s; transition-property: opacity, visibility, max-width; } .pf-v6-c-input-group.pf-m-search-expandable.pf-m-expand-start { --pf-v6-c-input-group__item--m-search-text-input--TransformOriginX: var(--pf-v6-c-input-group__item--m-search-text-input--TransformOriginX--expand-start); } .pf-v6-c-input-group.pf-m-search-expandable.pf-m-expanded { --pf-v6-c-input-group__item--m-search-text-input--MaxWidth: 100%; --pf-v6-c-input-group__item--m-search-text-input--Visibility: visible; --pf-v6-c-input-group__item--m-search-text-input--Opacity: 1; --pf-v6-c-input-group__item--m-search-text-input--TransitionDuration--fade: var(--pf-v6-c-input-group__item--m-search-text-input--TransitionDuration--expand--fade); --pf-v6-c-input-group__item--m-search-text-input--TransitionDuration--slide: var(--pf-v6-c-input-group__item--m-search-text-input--TransitionDuration--expand--slide); --pf-v6-c-input-group__item--m-search-text-input--ScaleX: 1; --pf-v6-c-input-group__item--m-search-action--MaxWidth: 100%; --pf-v6-c-input-group__item--m-search-action--Visibility: visible; --pf-v6-c-input-group__item--m-search-action--Opacity: 1; --pf-v6-c-input-group__item--m-search-action--TransitionDuration--fade: var(--pf-v6-c-input-group__item--m-search-action--TransitionDuration--expand--fade); --pf-v6-c-input-group__item--m-search-expand--MaxWidth: 0; --pf-v6-c-input-group__item--m-search-expand--Visibility: hidden; --pf-v6-c-input-group__item--m-search-expand--Opacity: 0; --pf-v6-c-input-group__item--m-search-expand--TransitionDuration--fade: var(--pf-v6-c-input-group__item--m-search-expand--TransitionDuration--collapse--fade); } .pf-v6-c-input-group.pf-m-search-expandable.pf-m-expanded .pf-v6-c-input-group__item:is(.pf-m-search-input, .pf-m-search-expand, .pf-m-search-action) { transition-delay: 0s; } .pf-v6-c-input-group__item { position: relative; display: flex; align-items: var(--pf-v6-c-input-group__item--AlignItems); min-width: var(--pf-v6-c-input-group__item--MinWidth, revert); max-width: var(--pf-v6-c-input-group__item--MaxWidth, revert); background-color: var(--pf-v6-c-input-group__item--BackgroundColor); border-block-start-color: var(--pf-v6-c-input-group__item--m-box--BorderBlockStartColor); border-block-end-color: var(--pf-v6-c-input-group__item--m-box--BorderBlockEndColor); border-inline-start-color: var(--pf-v6-c-input-group__item--m-box--BorderInlineStartColor); border-inline-end-color: var(--pf-v6-c-input-group__item--m-box--BorderInlineEndColor); } .pf-v6-c-input-group__item.pf-m-box { --pf-v6-c-input-group__item--BackgroundColor: var(--pf-v6-c-input-group__item--m-box--BackgroundColor); padding-inline-start: var(--pf-v6-c-input-group__item--m-box--PaddingInlineStart); padding-inline-end: var(--pf-v6-c-input-group__item--m-box--PaddingInlineEnd); border: var(--pf-v6-c-input-group__item--m-box--BorderWidth) solid; border-block-start-color: var(--pf-v6-c-input-group__item--m-box--BorderBlockStartColor); border-block-end-color: var(--pf-v6-c-input-group__item--m-box--BorderBlockEndColor); border-inline-start-color: var(--pf-v6-c-input-group__item--m-box--BorderInlineStartColor); border-inline-end-color: var(--pf-v6-c-input-group__item--m-box--BorderInlineEndColor); border-radius: var(--pf-v6-c-input-group__item--m-box--BorderRadius); } .pf-v6-c-input-group__item.pf-m-plain { --pf-v6-c-input-group__item--BackgroundColor: var(--pf-v6-c-input-group__item--m-plain--BackgroundColor); border: none; } .pf-v6-c-input-group__item.pf-m-disabled { --pf-v6-c-input-group__item--BackgroundColor: var(--pf-v6-c-input-group__item--m-disabled--BackgroundColor); --pf-v6-c-input-group__text--Color: var(--pf-v6-c-input-group__item--m-disabled__text--Color); } .pf-v6-c-input-group__item.pf-m-fill { flex-grow: 1; } .pf-v6-c-input-group__text { align-self: center; font-size: var(--pf-v6-c-input-group__text--FontSize); color: var(--pf-v6-c-input-group__text--Color); } label.pf-v6-c-input-group__text { cursor: pointer; }.pf-v6-c-calendar-month { --pf-v6-c-calendar-month--BackgroundColor: var(--pf-t--global--background--color--primary--default); --pf-v6-c-calendar-month--PaddingBlockStart: var(--pf-t--global--spacer--lg); --pf-v6-c-calendar-month--PaddingInlineEnd: var(--pf-t--global--spacer--lg); --pf-v6-c-calendar-month--PaddingBlockEnd: var(--pf-t--global--spacer--md); --pf-v6-c-calendar-month--PaddingInlineStart: var(--pf-t--global--spacer--lg); --pf-v6-c-calendar-month--FontSize: var(--pf-t--global--font--size--sm); --pf-v6-c-calendar-month__header--MarginBlockEnd: var(--pf-t--global--spacer--md); --pf-v6-c-calendar-month__header--Gap: var(--pf-t--global--spacer--gap--control-to-control--default); --pf-v6-c-calendar-month__header-year--Width: 9ch; --pf-v6-c-calendar-month__header-nav-control--MarginInlineEnd: 0; --pf-v6-c-calendar-month__header-nav-control--MarginInlineStart: 0; --pf-v6-c-calendar-month__days--BorderBlockEndWidth: var(--pf-t--global--border--width--divider--default); --pf-v6-c-calendar-month__days--BorderBlockEndColor: var(--pf-t--global--border--color--default); --pf-v6-c-calendar-month__day--PaddingBlockEnd: var(--pf-t--global--spacer--md); --pf-v6-c-calendar-month__day--FontWeight: var(--pf-t--global--font--weight--body--default); --pf-v6-c-calendar-month__day--Color: var(--pf-t--global--text--color--regular); --pf-v6-c-calendar-month__dates-cell--PaddingBlockStart: 0.125rem; --pf-v6-c-calendar-month__dates-cell--PaddingInlineEnd: 0.125rem; --pf-v6-c-calendar-month__dates-cell--PaddingBlockEnd: 0.125rem; --pf-v6-c-calendar-month__dates-cell--PaddingInlineStart: 0.125rem; --pf-v6-c-calendar-month__dates-row--first-child__dates-cell--PaddingBlockStart: var(--pf-t--global--spacer--sm); --pf-v6-c-calendar-month__dates-cell--m-current__date--BackgroundColor: var(--pf-t--global--background--color--secondary--default); --pf-v6-c-calendar-month__dates-cell--m-selected__date--BackgroundColor: var(--pf-t--global--color--brand--default); --pf-v6-c-calendar-month__dates-cell--m-selected__date--hover--BackgroundColor: var(--pf-t--global--color--brand--default); --pf-v6-c-calendar-month__dates-cell--m-selected__date--focus--BackgroundColor: var(--pf-t--global--color--brand--default); --pf-v6-c-calendar-month__dates-cell--m-selected__date--focus--after--BorderColor: var(--pf-t--global--border--color--brand--default); --pf-v6-c-calendar-month__dates-cell--m-selected__date--Color: var(--pf-t--global--text--color--on-brand--default); --pf-v6-c-calendar-month__dates-cell--before--BackgroundColor: transparent; --pf-v6-c-calendar-month__dates-cell--before--InsetBlockStart: 0; --pf-v6-c-calendar-month__dates-cell--before--InsetInlineEnd: 0; --pf-v6-c-calendar-month__dates-cell--before--InsetBlockEnd: var(--pf-v6-c-calendar-month__dates-cell--PaddingBlockEnd); --pf-v6-c-calendar-month__dates-cell--before--InsetInlineStart: 0; --pf-v6-c-calendar-month__dates-cell--after--BorderColor: var(--pf-t--global--border--color--high-contrast); --pf-v6-c-calendar-month__dates-cell--after--BorderBlockStartWidth: 0; --pf-v6-c-calendar-month__dates-cell--after--BorderBlockEndWidth: 0; --pf-v6-c-calendar-month__dates-cell--m-in-range--before--BackgroundColor: var(--pf-t--global--background--color--secondary--default); --pf-v6-c-calendar-month__dates-cell--m-in-range--m-start-range--before--InsetInlineStart: 50%; --pf-v6-c-calendar-month__dates-cell--m-in-range--m-end-range--before--InsetInlineEnd: 50%; --pf-v6-c-calendar-month__dates-cell--m-in-range__date--hover--BackgroundColor: var(--pf-t--global--background--color--secondary--default); --pf-v6-c-calendar-month__dates-cell--m-in-range__date--hover--BorderWidth: var(--pf-t--global--border--width--regular); --pf-v6-c-calendar-month__dates-cell--m-in-range__date--hover--BorderColor: var(--pf-t--global--border--color--hover); --pf-v6-c-calendar-month__dates-cell--m-in-range__date--focus--BackgroundColor: var(--pf-t--global--background--color--secondary--default); --pf-v6-c-calendar-month__dates-cell--m-in-range--after--BorderBlockStartWidth: var(--pf-t--global--border--width--high-contrast--regular); --pf-v6-c-calendar-month__dates-cell--m-in-range--after--BorderBlockEndWidth: var(--pf-t--global--border--width--high-contrast--regular); --pf-v6-c-calendar-month__dates-cell--m-adjacent-month__date--Color: var(--pf-t--global--text--color--subtle); --pf-v6-c-calendar-month__date--Width: 4ch; --pf-v6-c-calendar-month__date--Height: 4ch; --pf-v6-c-calendar-month__date--BorderWidth: 0; --pf-v6-c-calendar-month__date--BorderColor: transparent; --pf-v6-c-calendar-month__date--BorderRadius: var(--pf-t--global--border--radius--large); --pf-v6-c-calendar-month__date--Color: var(--pf-t--global--text--color--regular); --pf-v6-c-calendar-month__date--BackgroundColor: transparent; --pf-v6-c-calendar-month__date--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default); --pf-v6-c-calendar-month__date--disabled--Color: var(--pf-t--global--text--color--on-disabled); --pf-v6-c-calendar-month__date--after--BorderWidth: 0; --pf-v6-c-calendar-month__date--after--BorderColor: transparent; --pf-v6-c-calendar-month__date--after--OutlineOffset: 0; --pf-v6-c-calendar-month__date--hover--BackgroundColor: var(--pf-t--global--background--color--secondary--default); --pf-v6-c-calendar-month__date--hover--BorderWidth: var(--pf-t--global--border--width--regular); --pf-v6-c-calendar-month__date--hover--BorderColor: var(--pf-t--global--border--color--hover); --pf-v6-c-calendar-month__date--focus--Color: var(--pf-t--global--icon--color--on-brand--clicked); --pf-v6-c-calendar-month__date--focus--BackgroundColor: var(--pf-t--global--color--brand--default); --pf-v6-c-calendar-month__date--focus--after--BorderColor: var(--pf-t--global--border--color--hover); --pf-v6-c-calendar-month__date--focus--after--BorderWidth: var(--pf-t--global--border--width--regular); --pf-v6-c-calendar-month__date--after--focus--OutlineOffset: -2px; --pf-v6-c-calendar-month__dates-cell--m-current__date--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular); --pf-v6-c-calendar-month__dates-cell--m-current__date--BorderColor: var(--pf-t--global--border--color--high-contrast); --pf-v6-c-calendar-month__dates-cell--m-selected__date--BorderWidth: var(--pf-t--global--border--width--high-contrast--strong); --pf-v6-c-calendar-month__dates-cell--m-selected__date--BorderColor: transparent; } .pf-v6-c-calendar-month { display: inline-flex; flex-direction: column; padding-block-start: var(--pf-v6-c-calendar-month--PaddingBlockStart); padding-block-end: var(--pf-v6-c-calendar-month--PaddingBlockEnd); padding-inline-start: var(--pf-v6-c-calendar-month--PaddingInlineStart); padding-inline-end: var(--pf-v6-c-calendar-month--PaddingInlineEnd); font-size: var(--pf-v6-c-calendar-month--FontSize); background-color: var(--pf-v6-c-calendar-month--BackgroundColor); } .pf-v6-c-calendar-month__header { display: flex; gap: var(--pf-v6-c-calendar-month__header--Gap); margin-block-end: var(--pf-v6-c-calendar-month__header--MarginBlockEnd); } .pf-v6-c-calendar-month__header-nav-control { margin-inline-start: var(--pf-v6-c-calendar-month__header-nav-control--MarginInlineStart); margin-inline-end: var(--pf-v6-c-calendar-month__header-nav-control--MarginInlineEnd); } :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-calendar-month__header-nav-control { scale: -1 1; } .pf-v6-c-calendar-month__header-month { flex-grow: 1; } .pf-v6-c-calendar-month__header-month > .pf-v6-c-menu-toggle { width: 100%; } .pf-v6-c-calendar-month__header-year { width: var(--pf-v6-c-calendar-month__header-year--Width); } .pf-v6-c-calendar-month__calendar { table-layout: fixed; } .pf-v6-c-calendar-month__days { color: var(--pf-v6-c-calendar-month__day--Color); border-block-end: var(--pf-v6-c-calendar-month__days--BorderBlockEndWidth) solid var(--pf-v6-c-calendar-month__days--BorderBlockEndColor); } .pf-v6-c-calendar-month__day { padding-block-end: var(--pf-v6-c-calendar-month__day--PaddingBlockEnd); font-weight: var(--pf-v6-c-calendar-month__day--FontWeight); text-align: center; } .pf-v6-c-calendar-month__dates-row:first-child { --pf-v6-c-calendar-month__dates-cell--PaddingBlockStart: var(--pf-v6-c-calendar-month__dates-row--first-child__dates-cell--PaddingBlockStart); } .pf-v6-c-calendar-month__dates-cell { --pf-v6-c-calendar-month__dates-cell--before--InsetBlockStart: var(--pf-v6-c-calendar-month__dates-cell--PaddingBlockStart); position: relative; padding-block-start: var(--pf-v6-c-calendar-month__dates-cell--PaddingBlockStart); padding-block-end: var(--pf-v6-c-calendar-month__dates-cell--PaddingBlockEnd); padding-inline-start: var(--pf-v6-c-calendar-month__dates-cell--PaddingInlineStart); padding-inline-end: var(--pf-v6-c-calendar-month__dates-cell--PaddingInlineEnd); text-align: center; } .pf-v6-c-calendar-month__dates-cell::before { position: absolute; inset-block-start: var(--pf-v6-c-calendar-month__dates-cell--before--InsetBlockStart); inset-block-end: var(--pf-v6-c-calendar-month__dates-cell--before--InsetBlockEnd); inset-inline-start: var(--pf-v6-c-calendar-month__dates-cell--before--InsetInlineStart); inset-inline-end: var(--pf-v6-c-calendar-month__dates-cell--before--InsetInlineEnd); pointer-events: none; content: ""; background-color: var(--pf-v6-c-calendar-month__dates-cell--before--BackgroundColor); border: solid var(--pf-v6-c-calendar-month__dates-cell--after--BorderColor); border-width: var(--pf-v6-c-calendar-month__dates-cell--after--BorderBlockStartWidth) 0 var(--pf-v6-c-calendar-month__dates-cell--after--BorderBlockEndWidth); } .pf-v6-c-calendar-month__dates-cell.pf-m-current { --pf-v6-c-calendar-month__date--BackgroundColor: var(--pf-v6-c-calendar-month__dates-cell--m-current__date--BackgroundColor); --pf-v6-c-calendar-month__date--BorderWidth: var(--pf-v6-c-calendar-month__dates-cell--m-current__date--BorderWidth); --pf-v6-c-calendar-month__date--BorderColor: var(--pf-v6-c-calendar-month__dates-cell--m-current__date--BorderColor); } .pf-v6-c-calendar-month__dates-cell.pf-m-in-range { --pf-v6-c-calendar-month__dates-cell--after--BorderBlockStartWidth: var(--pf-v6-c-calendar-month__dates-cell--m-in-range--after--BorderBlockStartWidth); --pf-v6-c-calendar-month__dates-cell--after--BorderBlockEndWidth: var(--pf-v6-c-calendar-month__dates-cell--m-in-range--after--BorderBlockEndWidth); --pf-v6-c-calendar-month__dates-cell--before--BackgroundColor: var(--pf-v6-c-calendar-month__dates-cell--m-in-range--before--BackgroundColor); --pf-v6-c-calendar-month__date--hover--BackgroundColor: var(--pf-v6-c-calendar-month__dates-cell--m-in-range__date--hover--BackgroundColor); --pf-v6-c-calendar-month__date--hover--BorderWidth: var(--pf-v6-c-calendar-month__dates-cell--m-in-range__date--hover--BorderWidth); --pf-v6-c-calendar-month__date--hover--BorderColor: var(--pf-v6-c-calendar-month__dates-cell--m-in-range__date--hover--BorderColor); --pf-v6-c-calendar-month__date--focus--BackgroundColor: var(--pf-v6-c-calendar-month__dates-cell--m-in-range__date--focus--BackgroundColor); } .pf-v6-c-calendar-month__dates-cell.pf-m-start-range { --pf-v6-c-calendar-month__dates-cell--before--InsetInlineStart: var(--pf-v6-c-calendar-month__dates-cell--m-in-range--m-start-range--before--InsetInlineStart); } .pf-v6-c-calendar-month__dates-cell.pf-m-end-range { --pf-v6-c-calendar-month__dates-cell--before--InsetInlineEnd: var(--pf-v6-c-calendar-month__dates-cell--m-in-range--m-end-range--before--InsetInlineEnd); } .pf-v6-c-calendar-month__dates-cell.pf-m-adjacent-month { --pf-v6-c-calendar-month__date--Color: var(--pf-v6-c-calendar-month__dates-cell--m-adjacent-month__date--Color); } .pf-v6-c-calendar-month__dates-cell.pf-m-selected { --pf-v6-c-calendar-month__date--BackgroundColor: var(--pf-v6-c-calendar-month__dates-cell--m-selected__date--BackgroundColor); --pf-v6-c-calendar-month__date--Color: var(--pf-v6-c-calendar-month__dates-cell--m-selected__date--Color); --pf-v6-c-calendar-month__date--BorderWidth: var(--pf-v6-c-calendar-month__dates-cell--m-selected__date--BorderWidth); --pf-v6-c-calendar-month__date--BorderColor: var(--pf-v6-c-calendar-month__dates-cell--m-selected__date--BorderColor); --pf-v6-c-calendar-month__date--hover--BackgroundColor: var(--pf-v6-c-calendar-month__dates-cell--m-selected__date--hover--BackgroundColor); --pf-v6-c-calendar-month__date--hover--BorderWidth: var(--pf-v6-c-calendar-month__dates-cell--m-selected__date--BorderWidth); --pf-v6-c-calendar-month__date--focus--BackgroundColor: var(--pf-v6-c-calendar-month__dates-cell--m-selected__date--focus--BackgroundColor); --pf-v6-c-calendar-month__date--focus--after--BorderColor: var(--pf-v6-c-calendar-month__dates-cell--m-selected__date--focus--after--BorderColor); --pf-v6-c-calendar-month__date--after--OutlineOffset: var(--pf-v6-c-calendar-month__date--after--focus--OutlineOffset); } .pf-v6-c-calendar-month__dates-cell.pf-m-disabled { --pf-v6-c-calendar-month__dates-cell--before--BackgroundColor: transparent; --pf-v6-c-calendar-month__dates-cell--after--BorderBlockStartWidth: 0; --pf-v6-c-calendar-month__dates-cell--after--BorderBlockEndWidth: 0; --pf-v6-c-calendar-month__date--BackgroundColor: transparent; } .pf-v6-c-calendar-month__date { position: relative; display: inline-flex; align-items: center; justify-content: center; width: var(--pf-v6-c-calendar-month__date--Width); height: var(--pf-v6-c-calendar-month__date--Height); line-height: 1; color: var(--pf-v6-c-calendar-month__date--Color); background-color: var(--pf-v6-c-calendar-month__date--BackgroundColor); border: 0; } .pf-v6-c-calendar-month__date::before { position: absolute; inset: 0; content: ""; border: var(--pf-v6-c-calendar-month__date--BorderWidth) solid var(--pf-v6-c-calendar-month__date--BorderColor); } .pf-v6-c-calendar-month__date::after { position: absolute; inset-block-start: var(--pf-v6-c-calendar-month__date--after--OutlineOffset); inset-block-end: var(--pf-v6-c-calendar-month__date--after--OutlineOffset); inset-inline-start: var(--pf-v6-c-calendar-month__date--after--OutlineOffset); inset-inline-end: var(--pf-v6-c-calendar-month__date--after--OutlineOffset); content: ""; border: var(--pf-v6-c-calendar-month__date--after--BorderWidth) solid var(--pf-v6-c-calendar-month__date--after--BorderColor); } .pf-v6-c-calendar-month__date, .pf-v6-c-calendar-month__date::before, .pf-v6-c-calendar-month__date::after { border-radius: var(--pf-v6-c-calendar-month__date--BorderRadius); } .pf-v6-c-calendar-month__date:hover, .pf-v6-c-calendar-month__date.pf-m-hover { --pf-v6-c-calendar-month__date--BackgroundColor: var(--pf-v6-c-calendar-month__date--hover--BackgroundColor); --pf-v6-c-calendar-month__date--BorderWidth: var(--pf-v6-c-calendar-month__date--hover--BorderWidth); --pf-v6-c-calendar-month__date--BorderColor: var(--pf-v6-c-calendar-month__date--hover--BorderColor); } .pf-v6-c-calendar-month__date:focus, .pf-v6-c-calendar-month__date.pf-m-focus { --pf-v6-c-calendar-month__date--after--BorderColor: var(--pf-v6-c-calendar-month__date--focus--after--BorderColor); --pf-v6-c-calendar-month__date--after--BorderWidth: var(--pf-v6-c-calendar-month__date--focus--after--BorderWidth); outline: 0; } .pf-v6-c-calendar-month__date:disabled { --pf-v6-c-calendar-month__date--BackgroundColor: var(--pf-v6-c-calendar-month__date--disabled--BackgroundColor); --pf-v6-c-calendar-month__date--Color: var(--pf-v6-c-calendar-month__date--disabled--Color); --pf-v6-c-calendar-month__date--hover--focus--BorderColor: transparent; pointer-events: none; }.pf-v6-c-radio { --pf-v6-c-radio--GridGap: var(--pf-t--global--spacer--sm) var(--pf-t--global--spacer--sm); --pf-v6-c-radio--AccentColor: var(--pf-t--global--icon--color--brand--default); --pf-v6-c-radio--m-standalone--MinHeight: calc(var(--pf-v6-c-radio__label--FontSize) * var(--pf-v6-c-radio__label--LineHeight)); --pf-v6-c-radio__label--disabled--Color: var(--pf-t--global--text--color--disabled); --pf-v6-c-radio__label--Color: var(--pf-t--global--text--color--regular); --pf-v6-c-radio__label--FontWeight: var(--pf-t--global--font--weight--body--default); --pf-v6-c-radio__label--FontSize: var(--pf-t--global--font--size--body--default); --pf-v6-c-radio__label--LineHeight: var(--pf-t--global--font--line-height--body); --pf-v6-c-radio__description--FontSize: var(--pf-t--global--font--size--body--sm); --pf-v6-c-radio__description--Color: var(--pf-t--global--text--color--subtle); --pf-v6-c-radio__input--first-child--MarginInlineStart: 0.0625rem; --pf-v6-c-radio__input--last-child--MarginInlineEnd: 0.0625rem; --pf-v6-c-radio__body--MarginBlockStart: var(--pf-t--global--spacer--sm); --pf-v6-c-radio__input--TranslateY: calc((var(--pf-v6-c-radio__label--LineHeight) * var(--pf-v6-c-radio__label--FontSize) / 2 ) - 50%); } .pf-v6-c-radio { display: grid; grid-template-columns: auto 1fr; grid-gap: var(--pf-v6-c-radio--GridGap); align-items: baseline; accent-color: var(--pf-v6-c-radio--AccentColor); } .pf-v6-c-radio.pf-m-standalone { display: inline-grid; grid-template-columns: auto; min-height: var(--pf-v6-c-radio--m-standalone--MinHeight); } .pf-v6-c-radio.pf-m-standalone .pf-v6-c-radio__input { align-self: center; transform: none; } .pf-v6-c-radio__input { align-self: start; font-size: var(--pf-v6-c-radio__label--FontSize); line-height: var(--pf-v6-c-radio__label--LineHeight); transform: translateY(var(--pf-v6-c-radio__input--TranslateY)); } .pf-v6-c-radio__input:first-child { margin-inline-start: var(--pf-v6-c-radio__input--first-child--MarginInlineStart); } .pf-v6-c-radio__input:last-child { margin-inline-end: var(--pf-v6-c-radio__input--last-child--MarginInlineEnd); } .pf-v6-c-radio__label { font-size: var(--pf-v6-c-radio__label--FontSize); font-weight: var(--pf-v6-c-radio__label--FontWeight); line-height: var(--pf-v6-c-radio__label--LineHeight); color: var(--pf-v6-c-radio__label--Color); } .pf-v6-c-radio__description { grid-column: 2; font-size: var(--pf-v6-c-radio__description--FontSize); color: var(--pf-v6-c-radio__description--Color); } .pf-v6-c-radio__body { grid-column: 2; margin-block-start: var(--pf-v6-c-radio__body--MarginBlockStart); } .pf-v6-c-radio__label, .pf-v6-c-radio__input { justify-self: start; } label.pf-v6-c-radio, .pf-v6-c-radio__label, .pf-v6-c-radio__input { cursor: pointer; } .pf-v6-c-radio__label:disabled, .pf-v6-c-radio__label.pf-m-disabled, .pf-v6-c-radio__input:disabled, .pf-v6-c-radio__input.pf-m-disabled { --pf-v6-c-radio__label--Color: var(--pf-v6-c-radio__label--disabled--Color); cursor: not-allowed; }.pf-v6-c-popover { --pf-v6-c-popover--FontSize: var(--pf-t--global--font--size--body--sm); --pf-v6-c-popover--MinWidth: calc(var(--pf-v6-c-popover__content--PaddingInlineStart) + var(--pf-v6-c-popover__content--PaddingInlineEnd) + 18.75rem); --pf-v6-c-popover--MaxWidth: calc(var(--pf-v6-c-popover__content--PaddingInlineStart) + var(--pf-v6-c-popover__content--PaddingInlineEnd) + 18.75rem); --pf-v6-c-popover--BoxShadow: var(--pf-t--global--box-shadow--md); --pf-v6-c-popover--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular); --pf-v6-c-popover--BorderColor: var(--pf-t--global--border--color--high-contrast); --pf-v6-c-popover--BorderRadius: var(--pf-t--global--border--radius--medium); --pf-v6-c-popover--m-danger__title-icon--Color: var(--pf-t--global--icon--color--status--danger--default); --pf-v6-c-popover--m-warning__title-icon--Color: var(--pf-t--global--icon--color--status--warning--default); --pf-v6-c-popover--m-success__title-icon--Color: var(--pf-t--global--icon--color--status--success--default); --pf-v6-c-popover--m-info__title-icon--Color: var(--pf-t--global--icon--color--status--info--default); --pf-v6-c-popover--m-custom__title-icon--Color: var(--pf-t--global--icon--color--status--custom--default); --pf-v6-c-popover__content--BackgroundColor: var(--pf-t--global--background--color--floating--default); --pf-v6-c-popover__content--PaddingBlockStart: var(--pf-t--global--spacer--md); --pf-v6-c-popover__content--PaddingInlineEnd: var(--pf-t--global--spacer--md); --pf-v6-c-popover__content--PaddingBlockEnd: var(--pf-t--global--spacer--md); --pf-v6-c-popover__content--PaddingInlineStart: var(--pf-t--global--spacer--md); --pf-v6-c-popover__content--BorderRadius: var(--pf-t--global--border--radius--medium); --pf-v6-c-popover__arrow--Width: 0.9375rem; --pf-v6-c-popover__arrow--Height: 0.9375rem; --pf-v6-c-popover__arrow--BoxShadow: var(--pf-t--global--box-shadow--md); --pf-v6-c-popover__arrow--BackgroundColor: var(--pf-t--global--background--color--floating--default); --pf-v6-c-popover__arrow--m-top--TranslateX: -50%; --pf-v6-c-popover__arrow--m-top--TranslateY: 50%; --pf-v6-c-popover__arrow--m-top--Rotate: 45deg; --pf-v6-c-popover__arrow--m-right--TranslateX: -50%; --pf-v6-c-popover__arrow--m-right--TranslateY: -50%; --pf-v6-c-popover__arrow--m-right--Rotate: 45deg; --pf-v6-c-popover__arrow--m-bottom--TranslateX: -50%; --pf-v6-c-popover__arrow--m-bottom--TranslateY: -50%; --pf-v6-c-popover__arrow--m-bottom--Rotate: 45deg; --pf-v6-c-popover__arrow--m-left--TranslateX: 50%; --pf-v6-c-popover__arrow--m-left--TranslateY: -50%; --pf-v6-c-popover__arrow--m-left--Rotate: 45deg; --pf-v6-c-popover__arrow--m-inline-top--InsetBlockStart: var(--pf-t--global--border--radius--medium); --pf-v6-c-popover__arrow--m-inline-bottom--InsetBlockEnd: var(--pf-t--global--border--radius--medium); --pf-v6-c-popover__arrow--m-block-left--InsetInlineStart: var(--pf-t--global--border--radius--medium); --pf-v6-c-popover__arrow--m-block-right--InsetInlineEnd: var(--pf-t--global--border--radius--medium); --pf-v6-c-popover__close--InsetBlockStart: calc(var(--pf-v6-c-popover__content--PaddingBlockStart) - var(--pf-t--global--spacer--control--vertical--default)); --pf-v6-c-popover__close--InsetInlineEnd: var(--pf-v6-c-popover__content--PaddingInlineEnd); --pf-v6-c-popover__close--sibling--PaddingInlineEnd: var(--pf-t--global--spacer--2xl); --pf-v6-c-popover__header--MarginBlockEnd: var(--pf-t--global--spacer--sm); --pf-v6-c-popover__title-text--Color: var(--pf-t--global--text--color--regular); --pf-v6-c-popover__title-text--FontWeight: var(--pf-t--global--font--weight--body--bold); --pf-v6-c-popover__title-text--FontSize: var(--pf-t--global--font--size--body--default); --pf-v6-c-popover__title-icon--MarginInlineEnd: var(--pf-t--global--spacer--sm); --pf-v6-c-popover__title-icon--Color: var(--pf-t--global--icon--color--regular); --pf-v6-c-popover__title-icon--FontSize: var(--pf-t--global--icon--size--font--body--default); --pf-v6-c-popover__footer--MarginBlockStart: var(--pf-t--global--spacer--md); } .pf-v6-c-popover { position: relative; min-width: var(--pf-v6-c-popover--MinWidth); max-width: var(--pf-v6-c-popover--MaxWidth); font-size: var(--pf-v6-c-popover--FontSize); border: var(--pf-v6-c-popover--BorderWidth) solid var(--pf-v6-c-popover--BorderColor); border-radius: var(--pf-v6-c-popover--BorderRadius); box-shadow: var(--pf-v6-c-popover--BoxShadow); } .pf-v6-c-popover.pf-m-no-padding { --pf-v6-c-popover__content--PaddingBlockStart: 0px; --pf-v6-c-popover__content--PaddingInlineEnd: 0px; --pf-v6-c-popover__content--PaddingBlockEnd: 0px; --pf-v6-c-popover__content--PaddingInlineStart: 0px; } .pf-v6-c-popover.pf-m-width-auto { --pf-v6-c-popover--MinWidth: auto; --pf-v6-c-popover--MaxWidth: none; } .pf-v6-c-popover:is(.pf-m-top, .pf-m-top-left, .pf-m-top-right) { --pf-v6-c-popover__arrow--InsetBlockEnd: var(--pf-v6-c-popover--m-top--InsetBlockEnd, 0); --pf-v6-c-popover__arrow--InsetInlineStart: var(--pf-v6-c-popover--m-top--InsetInlineStart, 50%); --pf-v6-c-popover__arrow--TranslateX: var(--pf-v6-c-popover__arrow--m-top--TranslateX); --pf-v6-c-popover__arrow--TranslateY: var(--pf-v6-c-popover__arrow--m-top--TranslateY); --pf-v6-c-popover__arrow--Rotate: var(--pf-v6-c-popover__arrow--m-top--Rotate); } .pf-v6-c-popover:is(.pf-m-bottom, .pf-m-bottom-left, .pf-m-bottom-right) { --pf-v6-c-popover__arrow--InsetBlockStart: var(--pf-v6-c-popover--m-bottom--InsetBlockStart, 0); --pf-v6-c-popover__arrow--InsetInlineStart: var(--pf-v6-c-popover--m-bottom--InsetInlineStart, 50%); --pf-v6-c-popover__arrow--TranslateX: var(--pf-v6-c-popover__arrow--m-bottom--TranslateX); --pf-v6-c-popover__arrow--TranslateY: var(--pf-v6-c-popover__arrow--m-bottom--TranslateY); --pf-v6-c-popover__arrow--Rotate: var(--pf-v6-c-popover__arrow--m-bottom--Rotate); } .pf-v6-c-popover:is(.pf-m-left, .pf-m-left-top, .pf-m-left-bottom) { --pf-v6-c-popover__arrow--InsetBlockStart: var(--pf-v6-c-popover--m-left--InsetBlockStart, 50%); --pf-v6-c-popover__arrow--InsetInlineEnd: var(--pf-v6-c-popover--m-left--InsetInlineEnd, 0); --pf-v6-c-popover__arrow--TranslateX: var(--pf-v6-c-popover__arrow--m-left--TranslateX); --pf-v6-c-popover__arrow--TranslateY: var(--pf-v6-c-popover__arrow--m-left--TranslateY); --pf-v6-c-popover__arrow--Rotate: var(--pf-v6-c-popover__arrow--m-left--Rotate); } .pf-v6-c-popover:is(.pf-m-right, .pf-m-right-top, .pf-m-right-bottom) { --pf-v6-c-popover__arrow--InsetBlockStart: var(--pf-v6-c-popover--m-right--InsetBlockStart, 50%); --pf-v6-c-popover__arrow--InsetInlineStart: var(--pf-v6-c-popover--m-right--InsetInlineStart, 0); --pf-v6-c-popover__arrow--TranslateX: var(--pf-v6-c-popover__arrow--m-right--TranslateX); --pf-v6-c-popover__arrow--TranslateY: var(--pf-v6-c-popover__arrow--m-right--TranslateY); --pf-v6-c-popover__arrow--Rotate: var(--pf-v6-c-popover__arrow--m-right--Rotate); } .pf-v6-c-popover:is(.pf-m-left-top, .pf-m-right-top) { --pf-v6-c-popover__arrow--InsetBlockStart: var(--pf-v6-c-popover__arrow--m-inline-top--InsetBlockStart); --pf-v6-c-popover__arrow--TranslateY: var(--pf-v6-c-popover__arrow--m-top--TranslateY); } .pf-v6-c-popover:is(.pf-m-left-bottom, .pf-m-right-bottom) { --pf-v6-c-popover__arrow--InsetBlockStart: auto; --pf-v6-c-popover__arrow--InsetBlockEnd: var(--pf-v6-c-popover__arrow--m-inline-bottom--InsetBlockEnd); } .pf-v6-c-popover:is(.pf-m-top-left, .pf-m-bottom-left) { --pf-v6-c-popover__arrow--InsetInlineStart: var(--pf-v6-c-popover__arrow--m-block-left--InsetInlineStart); --pf-v6-c-popover__arrow--TranslateX: var(--pf-v6-c-popover__arrow--m-left--TranslateX); } .pf-v6-c-popover:is(.pf-m-top-right, .pf-m-bottom-right) { --pf-v6-c-popover__arrow--InsetInlineEnd: var(--pf-v6-c-popover__arrow--m-block-right--InsetInlineEnd); --pf-v6-c-popover__arrow--InsetInlineStart: auto; } .pf-v6-c-popover.pf-m-danger { --pf-v6-c-popover__title-icon--Color: var(--pf-v6-c-popover--m-danger__title-icon--Color); } .pf-v6-c-popover.pf-m-warning { --pf-v6-c-popover__title-icon--Color: var(--pf-v6-c-popover--m-warning__title-icon--Color); } .pf-v6-c-popover.pf-m-success { --pf-v6-c-popover__title-icon--Color: var(--pf-v6-c-popover--m-success__title-icon--Color); } .pf-v6-c-popover.pf-m-custom { --pf-v6-c-popover__title-icon--Color: var(--pf-v6-c-popover--m-custom__title-icon--Color); } .pf-v6-c-popover.pf-m-info { --pf-v6-c-popover__title-icon--Color: var(--pf-v6-c-popover--m-info__title-icon--Color); } .pf-v6-c-popover__content { position: relative; padding-block-start: var(--pf-v6-c-popover__content--PaddingBlockStart); padding-block-end: var(--pf-v6-c-popover__content--PaddingBlockEnd); padding-inline-start: var(--pf-v6-c-popover__content--PaddingInlineStart); padding-inline-end: var(--pf-v6-c-popover__content--PaddingInlineEnd); background-color: var(--pf-v6-c-popover__content--BackgroundColor); border-radius: var(--pf-v6-c-popover__content--BorderRadius); } .pf-v6-c-popover__close { position: absolute; inset-block-start: var(--pf-v6-c-popover__close--InsetBlockStart); inset-inline-end: var(--pf-v6-c-popover__close--InsetInlineEnd); } .pf-v6-c-popover__close + * { padding-inline-end: var(--pf-v6-c-popover__close--sibling--PaddingInlineEnd); } .pf-v6-c-popover__arrow { position: absolute; top: var(--pf-v6-c-popover__arrow--InsetBlockStart, auto); right: var(--pf-v6-c-popover__arrow--InsetInlineEnd, auto); bottom: var(--pf-v6-c-popover__arrow--InsetBlockEnd, auto); left: var(--pf-v6-c-popover__arrow--InsetInlineStart, auto); width: var(--pf-v6-c-popover__arrow--Width); height: var(--pf-v6-c-popover__arrow--Height); pointer-events: none; background-color: var(--pf-v6-c-popover__arrow--BackgroundColor); border: var(--pf-v6-c-popover--BorderWidth) solid var(--pf-v6-c-popover--BorderColor); box-shadow: var(--pf-v6-c-popover__arrow--BoxShadow); transform: translateX(var(--pf-v6-c-popover__arrow--TranslateX, 0)) translateY(var(--pf-v6-c-popover__arrow--TranslateY, 0)) rotate(var(--pf-v6-c-popover__arrow--Rotate, 0)); } .pf-v6-c-popover__header { margin-block-end: var(--pf-v6-c-popover__header--MarginBlockEnd); } .pf-v6-c-popover__title { display: flex; flex: 0 0 auto; } .pf-v6-c-popover__title-icon { margin-inline-end: var(--pf-v6-c-popover__title-icon--MarginInlineEnd); font-size: var(--pf-v6-c-popover__title-icon--FontSize); color: var(--pf-v6-c-popover__title-icon--Color); } .pf-v6-c-popover__title-text { min-width: 0; font-size: var(--pf-v6-c-popover__title-text--FontSize); font-weight: var(--pf-v6-c-popover__title-text--FontWeight); color: var(--pf-v6-c-popover__title-text--Color); overflow-wrap: break-word; } .pf-v6-c-popover__body { word-wrap: break-word; } .pf-v6-c-popover__footer { margin-block-start: var(--pf-v6-c-popover__footer--MarginBlockStart); }:where(html, body, p, ol, ul, li, dl, dt, dd, blockquote, figure, fieldset, legend, textarea, pre, iframe, hr, h1, h2, h3, h4, h5, h6) { padding: 0; margin: 0; } *, *::before, *::after { box-sizing: border-box; scrollbar-color: var(--pf-t--global--border--color--default) transparent; } *::-webkit-scrollbar-thumb { background-color: var(--pf-t--global--border--color--default); border-radius: var(--pf-t--global--spacer--xs); } *::-webkit-scrollbar-track { background-color: transparent; } *::-webkit-scrollbar { max-width: var(--pf-t--global--spacer--sm); max-height: var(--pf-t--global--spacer--sm); } :where(html, body) { height: 100%; } :where(body) { font-family: var(--pf-t--global--font--family--body); font-size: var(--pf-t--global--font--size--body--default); font-weight: var(--pf-t--global--font--weight--body--default); line-height: var(--pf-t--global--font--line-height--body); color: var(--pf-t--global--text--color--regular); } :where(h1, h2, h3, h4, h5, h6) { font-size: 100%; font-weight: var(--pf-t--global--font--weight--body--default); } :where(ul) { list-style: none; } :where(button, input, optgroup, select, textarea) { margin: 0; font-family: inherit; font-size: 100%; line-height: var(--pf-t--global--font--line-height--body); color: var(--pf-t--global--text--color--regular); } :where(img, embed, iframe, object, audio, video) { max-width: 100%; height: auto; } :where(iframe) { border: 0; } :where(table) { border-spacing: 0; border-collapse: collapse; } :where(td, th) { padding: 0; text-align: start; } :where(code, pre) { font-family: var(--pf-t--global--font--family--mono); } :where(a) { color: var(--pf-t--global--text--color--link--default); text-decoration-line: var(--pf-t--global--text-decoration--link--line--default); } :where(a:hover, a:focus) { color: var(--pf-t--global--text--color--link--hover); text-decoration-line: var(--pf-t--global--text-decoration--link--line--hover); } :where(a, button) { cursor: pointer; } :where(:root) { color-scheme: light; } :where(.pf-v6-theme-dark) { color-scheme: dark; } .pf-v6-screen-reader { position: fixed; inset-block-start: 0; inset-inline-start: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .pf-v6-screen-reader.pf-m-full-size { width: 100%; height: 100%; } .pf-v6-screen-reader.pf-m-absolute { position: absolute; } .pf-v6-m-tabular-nums { font-variant-numeric: tabular-nums; } .pf-v6-m-legacy-font { --pf-t--global--font--family--body: var(--pf-t--global--font--family--body--legacy); --pf-t--global--font--family--heading: var(--pf-t--global--font--family--heading--legacy); --pf-t--global--font--family--mono: var(--pf-t--global--font--family--mono--legacy); --pf-t--global--font--weight--body: var(--pf-t--global--font--weight--body--legacy); --pf-t--global--font--weight--body--bold: var(--pf-t--global--font--weight--body--bold--legacy); --pf-t--global--font--weight--heading: var(--pf-t--global--font--weight--heading--legacy); --pf-t--global--font--weight--heading--bold: var(--pf-t--global--font--weight--heading--bold--legacy); } .pf-v6-m-dir-rtl { --pf-v6-global--inverse--multiplier: -1; direction: rtl; } .pf-v6-m-dir-ltr { --pf-v6-global--inverse--multiplier: 1; direction: ltr; } :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-m-mirror-inline-rtl { scale: -1 1; } .pf-v6-m-no-motion { --pf-t--global--delay--400: 1ms !important; --pf-t--global--delay--300: 1ms !important; --pf-t--global--delay--200: 1ms !important; --pf-t--global--delay--100: 1ms !important; --pf-t--global--duration--600: 1ms !important; --pf-t--global--duration--500: 1ms !important; --pf-t--global--duration--400: 1ms !important; --pf-t--global--duration--300: 1ms !important; --pf-t--global--duration--200: 1ms !important; --pf-t--global--duration--100: 1ms !important; --pf-t--global--duration--50: 1ms !important; } :root { --pf-v6-global--danger-jiggle--AnimationDuration--Transform: var(--pf-t--global--motion--duration--fade--default); --pf-v6-global--danger-jiggle--AnimationTimingFunction--Transform: var(--pf-t--global--motion--timing-function--default); } @property --pf-v6-global--danger-jiggle--TranslateX { syntax: ""; inherits: false; initial-value: 0; } @keyframes pf-v6-global-danger-jiggle-motion { 33% { --pf-v6-global--danger-jiggle--TranslateX: -2px; } 66% { --pf-v6-global--danger-jiggle--TranslateX: 3px; } } @keyframes pf-v6-global-fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes pf-v6-global-fade-out { from { opacity: 1; } to { opacity: 0; } } @font-face { font-family: "Red Hat Text"; font-style: normal; font-weight: 400 500; src: url("/assets/RedHatTextVF-wYvZ7prR.woff2") format("woff2-variations"); font-display: fallback; } @font-face { font-family: "Red Hat Text"; font-style: italic; font-weight: 400 500; src: url("/assets/RedHatTextVF-Italic-Dkj_WqbA.woff2") format("woff2-variations"); font-display: fallback; } @font-face { font-family: "Red Hat Display"; font-style: normal; font-weight: 400 700; src: url("/assets/RedHatDisplayVF-CYDHf1NI.woff2") format("woff2-variations"); font-display: fallback; } @font-face { font-family: "Red Hat Display"; font-style: italic; font-weight: 400 700; src: url("/assets/RedHatDisplayVF-Italic-CRpusWc8.woff2") format("woff2-variations"); font-display: fallback; } @font-face { font-family: "Red Hat Mono"; font-style: normal; font-weight: 400; src: url("/assets/RedHatMonoVF-C4fMH6Vz.woff2") format("woff2-variations"); font-display: fallback; } @font-face { font-family: "Red Hat Mono"; font-style: italic; font-weight: 400; src: url("/assets/RedHatMonoVF-Italic-DGQo2ogW.woff2") format("woff2-variations"); font-display: fallback; } @font-face { font-family: "pf-v6-pficon"; src: url("/assets/pf-v6-pficon-Dy6oiu9u.woff2") format("woff2"); } .pf-v6-pficon-zone:before, .pf-v6-pficon-warning-triangle:before, .pf-v6-pficon-volume:before, .pf-v6-pficon-virtual-machine:before, .pf-v6-pficon-users:before, .pf-v6-pficon-user:before, .pf-v6-pficon-unplugged:before, .pf-v6-pficon-unlocked:before, .pf-v6-pficon-unknown:before, .pf-v6-pficon-trend-up:before, .pf-v6-pficon-trend-down:before, .pf-v6-pficon-treeview:before, .pf-v6-pficon-topology:before, .pf-v6-pficon-thumb-tack:before, .pf-v6-pficon-tenant:before, .pf-v6-pficon-task:before, .pf-v6-pficon-storage-domain:before, .pf-v6-pficon-spinner2:before, .pf-v6-pficon-spinner:before, .pf-v6-pficon-severity-undefined:before, .pf-v6-pficon-severity-none:before, .pf-v6-pficon-severity-moderate:before, .pf-v6-pficon-severity-minor:before, .pf-v6-pficon-severity-important:before, .pf-v6-pficon-severity-critical:before, .pf-v6-pficon-services:before, .pf-v6-pficon-service:before, .pf-v6-pficon-service-catalog:before, .pf-v6-pficon-server:before, .pf-v6-pficon-server-group:before, .pf-v6-pficon-security:before, .pf-v6-pficon-screen:before, .pf-v6-pficon-save:before, .pf-v6-pficon-running:before, .pf-v6-pficon-resources-full:before, .pf-v6-pficon-resources-empty:before, .pf-v6-pficon-resources-almost-full:before, .pf-v6-pficon-resources-almost-empty:before, .pf-v6-pficon-resource-pool:before, .pf-v6-pficon-repository:before, .pf-v6-pficon-replicator:before, .pf-v6-pficon-remove2:before, .pf-v6-pficon-registry:before, .pf-v6-pficon-regions:before, .pf-v6-pficon-rebooting:before, .pf-v6-pficon-rebalance:before, .pf-v6-pficon-project:before, .pf-v6-pficon-process-automation:before, .pf-v6-pficon-private:before, .pf-v6-pficon-print:before, .pf-v6-pficon-port:before, .pf-v6-pficon-plugged:before, .pf-v6-pficon-pficon-vcenter:before, .pf-v6-pficon-pficon-template:before, .pf-v6-pficon-pficon-sort-common-desc:before, .pf-v6-pficon-pficon-sort-common-asc:before, .pf-v6-pficon-pficon-satellite:before, .pf-v6-pficon-pficon-network-range:before, .pf-v6-pficon-pficon-history:before, .pf-v6-pficon-pficon-dragdrop:before, .pf-v6-pficon-pending:before, .pf-v6-pficon-paused:before, .pf-v6-pficon-panel-open:before, .pf-v6-pficon-panel-close:before, .pf-v6-pficon-package:before, .pf-v6-pficon-os-image:before, .pf-v6-pficon-orders:before, .pf-v6-pficon-optimize:before, .pf-v6-pficon-openstack:before, .pf-v6-pficon-openshift:before, .pf-v6-pficon-open-drawer-right:before, .pf-v6-pficon-on:before, .pf-v6-pficon-on-running:before, .pf-v6-pficon-ok:before, .pf-v6-pficon-off:before, .pf-v6-pficon-not-started:before, .pf-v6-pficon-new-process:before, .pf-v6-pficon-network:before, .pf-v6-pficon-namespaces:before, .pf-v6-pficon-multicluster:before, .pf-v6-pficon-monitoring:before, .pf-v6-pficon-module:before, .pf-v6-pficon-migration:before, .pf-v6-pficon-middleware:before, .pf-v6-pficon-messages:before, .pf-v6-pficon-memory:before, .pf-v6-pficon-maintenance:before, .pf-v6-pficon-locked:before, .pf-v6-pficon-key:before, .pf-v6-pficon-integration:before, .pf-v6-pficon-infrastructure:before, .pf-v6-pficon-info:before, .pf-v6-pficon-in-progress:before, .pf-v6-pficon-import:before, .pf-v6-pficon-home:before, .pf-v6-pficon-history:before, .pf-v6-pficon-help:before, .pf-v6-pficon-globe-route:before, .pf-v6-pficon-folder-open:before, .pf-v6-pficon-folder-close:before, .pf-v6-pficon-flavor:before, .pf-v6-pficon-filter:before, .pf-v6-pficon-export:before, .pf-v6-pficon-error-circle-o:before, .pf-v6-pficon-equalizer:before, .pf-v6-pficon-enterprise:before, .pf-v6-pficon-enhancement:before, .pf-v6-pficon-edit:before, .pf-v6-pficon-domain:before, .pf-v6-pficon-disconnected:before, .pf-v6-pficon-degraded:before, .pf-v6-pficon-data-source:before, .pf-v6-pficon-data-sink:before, .pf-v6-pficon-data-processor:before, .pf-v6-pficon-critical-risk:before, .pf-v6-pficon-cpu:before, .pf-v6-pficon-container-node:before, .pf-v6-pficon-connected:before, .pf-v6-pficon-cluster:before, .pf-v6-pficon-cloud-tenant:before, .pf-v6-pficon-cloud-security:before, .pf-v6-pficon-close:before, .pf-v6-pficon-chat:before, .pf-v6-pficon-catalog:before, .pf-v6-pficon-bundle:before, .pf-v6-pficon-builder-image:before, .pf-v6-pficon-build:before, .pf-v6-pficon-blueprint:before, .pf-v6-pficon-bell:before, .pf-v6-pficon-automation:before, .pf-v6-pficon-attention-bell:before, .pf-v6-pficon-asleep:before, .pf-v6-pficon-arrow:before, .pf-v6-pficon-applications:before, .pf-v6-pficon-ansible-tower:before, .pf-v6-pficon-add-circle-o:before { font-family: "pf-v6-pficon"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-style: normal; font-variant: normal; font-weight: normal; text-decoration-line: none; text-transform: none; } .pf-v6-pficon-add-circle-o:before { content: "\e61b"; } .pf-v6-pficon-ansible-tower:before { content: "\e950"; } .pf-v6-pficon-applications:before { content: "\e936"; } .pf-v6-pficon-arrow:before { content: "\e929"; } .pf-v6-pficon-asleep:before { content: "\e92e"; } .pf-v6-pficon-attention-bell:before { content: "\e951"; } .pf-v6-pficon-automation:before { content: "\e937"; } .pf-v6-pficon-bell:before { content: "\e952"; } .pf-v6-pficon-blueprint:before { content: "\e915"; } .pf-v6-pficon-build:before { content: "\e902"; } .pf-v6-pficon-builder-image:before { content: "\e800"; } .pf-v6-pficon-bundle:before { content: "\e918"; } .pf-v6-pficon-catalog:before { content: "\e953"; } .pf-v6-pficon-chat:before { content: "\e954"; } .pf-v6-pficon-close:before { content: "\e60b"; } .pf-v6-pficon-cloud-security:before { content: "\e903"; } .pf-v6-pficon-cloud-tenant:before { content: "\e904"; } .pf-v6-pficon-cluster:before { content: "\e620"; } .pf-v6-pficon-connected:before { content: "\e938"; } .pf-v6-pficon-container-node:before { content: "\e621"; } .pf-v6-pficon-cpu:before { content: "\e927"; } .pf-v6-pficon-critical-risk:before { content: "\e976"; } .pf-v6-pficon-data-processor:before { content: "\e97b"; } .pf-v6-pficon-data-sink:before { content: "\e978"; } .pf-v6-pficon-data-source:before { content: "\e979"; } .pf-v6-pficon-degraded:before { content: "\e91b"; } .pf-v6-pficon-disconnected:before { content: "\e955"; } .pf-v6-pficon-domain:before { content: "\e919"; } .pf-v6-pficon-edit:before { content: "\e60a"; } .pf-v6-pficon-enhancement:before { content: "\e93a"; } .pf-v6-pficon-enterprise:before { content: "\e906"; } .pf-v6-pficon-equalizer:before { content: "\e956"; } .pf-v6-pficon-error-circle-o:before { content: "\e926"; } .pf-v6-pficon-export:before { content: "\e616"; } .pf-v6-pficon-filter:before { content: "\e943"; } .pf-v6-pficon-flavor:before { content: "\e957"; } .pf-v6-pficon-folder-close:before { content: "\e607"; } .pf-v6-pficon-folder-open:before { content: "\e606"; } .pf-v6-pficon-globe-route:before { content: "\e958"; } .pf-v6-pficon-help:before { content: "\e605"; } .pf-v6-pficon-history:before { content: "\e617"; } .pf-v6-pficon-home:before { content: "\e618"; } .pf-v6-pficon-import:before { content: "\e615"; } .pf-v6-pficon-in-progress:before { content: "\e933"; } .pf-v6-pficon-info:before { content: "\e92b"; } .pf-v6-pficon-infrastructure:before { content: "\e93d"; } .pf-v6-pficon-integration:before { content: "\e948"; } .pf-v6-pficon-key:before { content: "\e924"; } .pf-v6-pficon-locked:before { content: "\e923"; } .pf-v6-pficon-maintenance:before { content: "\e932"; } .pf-v6-pficon-memory:before { content: "\e908"; } .pf-v6-pficon-messages:before { content: "\e603"; } .pf-v6-pficon-middleware:before { content: "\e917"; } .pf-v6-pficon-migration:before { content: "\e931"; } .pf-v6-pficon-module:before { content: "\e959"; } .pf-v6-pficon-monitoring:before { content: "\e95a"; } .pf-v6-pficon-multicluster:before { content: "\e97c"; } .pf-v6-pficon-namespaces:before { content: "\e95b"; } .pf-v6-pficon-network:before { content: "\e909"; } .pf-v6-pficon-new-process:before { content: "\e95c"; } .pf-v6-pficon-not-started:before { content: "\e95d"; } .pf-v6-pficon-off:before { content: "\e92d"; } .pf-v6-pficon-ok:before { content: "\e602"; } .pf-v6-pficon-on-running:before { content: "\e925"; } .pf-v6-pficon-on:before { content: "\e92c"; } .pf-v6-pficon-open-drawer-right:before { content: "\e977"; } .pf-v6-pficon-openshift:before { content: "\e95e"; } .pf-v6-pficon-openstack:before { content: "\e95f"; } .pf-v6-pficon-optimize:before { content: "\e93e"; } .pf-v6-pficon-orders:before { content: "\e93f"; } .pf-v6-pficon-os-image:before { content: "\e960"; } .pf-v6-pficon-package:before { content: "\e961"; } .pf-v6-pficon-panel-close:before { content: "\e962"; } .pf-v6-pficon-panel-open:before { content: "\e963"; } .pf-v6-pficon-paused:before { content: "\e92f"; } .pf-v6-pficon-pending:before { content: "\e964"; } .pf-v6-pficon-pficon-dragdrop:before { content: "\e965"; } .pf-v6-pficon-pficon-history:before { content: "\e966"; } .pf-v6-pficon-pficon-network-range:before { content: "\e967"; } .pf-v6-pficon-pficon-satellite:before { content: "\e968"; } .pf-v6-pficon-pficon-sort-common-asc:before { content: "\e94e"; } .pf-v6-pficon-pficon-sort-common-desc:before { content: "\e94f"; } .pf-v6-pficon-pficon-template:before { content: "\e94c"; } .pf-v6-pficon-pficon-vcenter:before { content: "\e969"; } .pf-v6-pficon-plugged:before { content: "\e96a"; } .pf-v6-pficon-port:before { content: "\e96b"; } .pf-v6-pficon-print:before { content: "\e612"; } .pf-v6-pficon-private:before { content: "\e914"; } .pf-v6-pficon-process-automation:before { content: "\e949"; } .pf-v6-pficon-project:before { content: "\e96c"; } .pf-v6-pficon-rebalance:before { content: "\e91c"; } .pf-v6-pficon-rebooting:before { content: "\e96d"; } .pf-v6-pficon-regions:before { content: "\e90a"; } .pf-v6-pficon-registry:before { content: "\e623"; } .pf-v6-pficon-remove2:before { content: "\e96e"; } .pf-v6-pficon-replicator:before { content: "\e624"; } .pf-v6-pficon-repository:before { content: "\e90b"; } .pf-v6-pficon-resource-pool:before { content: "\e90c"; } .pf-v6-pficon-resources-almost-empty:before { content: "\e91d"; } .pf-v6-pficon-resources-almost-full:before { content: "\e912"; } .pf-v6-pficon-resources-empty:before { content: "\e96f"; } .pf-v6-pficon-resources-full:before { content: "\e913"; } .pf-v6-pficon-running:before { content: "\e970"; } .pf-v6-pficon-save:before { content: "\e601"; } .pf-v6-pficon-screen:before { content: "\e971"; } .pf-v6-pficon-security:before { content: "\e946"; } .pf-v6-pficon-server-group:before { content: "\e91a"; } .pf-v6-pficon-server:before { content: "\e90d"; } .pf-v6-pficon-service-catalog:before { content: "\e972"; } .pf-v6-pficon-service:before { content: "\e61e"; } .pf-v6-pficon-services:before { content: "\e947"; } .pf-v6-pficon-severity-critical:before { content: "\e97e"; } .pf-v6-pficon-severity-important:before { content: "\e97f"; } .pf-v6-pficon-severity-minor:before { content: "\e980"; } .pf-v6-pficon-severity-moderate:before { content: "\e981"; } .pf-v6-pficon-severity-none:before { content: "\e982"; } .pf-v6-pficon-severity-undefined:before { content: "\e983"; } .pf-v6-pficon-spinner:before { content: "\e973"; } .pf-v6-pficon-spinner2:before { content: "\e613"; } .pf-v6-pficon-storage-domain:before { content: "\e90e"; } .pf-v6-pficon-task:before { content: "\e974"; } .pf-v6-pficon-tenant:before { content: "\e916"; } .pf-v6-pficon-thumb-tack:before { content: "\e920"; } .pf-v6-pficon-topology:before { content: "\e608"; } .pf-v6-pficon-treeview:before { content: "\e97d"; } .pf-v6-pficon-trend-down:before { content: "\e900"; } .pf-v6-pficon-trend-up:before { content: "\e901"; } .pf-v6-pficon-unknown:before { content: "\e935"; } .pf-v6-pficon-unlocked:before { content: "\e922"; } .pf-v6-pficon-unplugged:before { content: "\e942"; } .pf-v6-pficon-user:before { content: "\e91e"; } .pf-v6-pficon-users:before { content: "\e91f"; } .pf-v6-pficon-virtual-machine:before { content: "\e90f"; } .pf-v6-pficon-volume:before { content: "\e910"; } .pf-v6-pficon-warning-triangle:before { content: "\e975"; } .pf-v6-pficon-zone:before { content: "\e911"; } .pf-v6-svg { width: 1em; height: 1em; vertical-align: -0.125em; } :root { --pf-v6-global--inverse--multiplier: 1; --pf-t--color--black: #000000; --pf-t--color--blue--10: #e0f0ff; --pf-t--color--blue--20: #b9dafc; --pf-t--color--blue--30: #92c5f9; --pf-t--color--blue--40: #4394e5; --pf-t--color--blue--50: #0066cc; --pf-t--color--blue--60: #004d99; --pf-t--color--blue--70: #003366; --pf-t--color--blue--80: #032142; --pf-t--color--gray--10: #f2f2f2; --pf-t--color--gray--20: #e0e0e0; --pf-t--color--gray--30: #c7c7c7; --pf-t--color--gray--40: #a3a3a3; --pf-t--color--gray--50: #707070; --pf-t--color--gray--60: #4d4d4d; --pf-t--color--gray--70: #383838; --pf-t--color--gray--80: #292929; --pf-t--color--gray--90: #1f1f1f; --pf-t--color--gray--95: #151515; --pf-t--color--green--10: #e9f7df; --pf-t--color--green--20: #d1f1bb; --pf-t--color--green--30: #afdc8f; --pf-t--color--green--40: #87bb62; --pf-t--color--green--50: #63993d; --pf-t--color--green--60: #3d7317; --pf-t--color--green--70: #204d00; --pf-t--color--green--80: #183301; --pf-t--color--orange--10: #ffe8cc; --pf-t--color--orange--20: #fccb8f; --pf-t--color--orange--30: #f8ae54; --pf-t--color--orange--40: #f5921b; --pf-t--color--orange--50: #ca6c0f; --pf-t--color--orange--60: #9e4a06; --pf-t--color--orange--70: #732e00; --pf-t--color--orange--80: #4d1f00; --pf-t--color--purple--10: #ece6ff; --pf-t--color--purple--20: #d0c5f4; --pf-t--color--purple--30: #b6a6e9; --pf-t--color--purple--40: #876fd4; --pf-t--color--purple--50: #5e40be; --pf-t--color--purple--60: #3d2785; --pf-t--color--purple--70: #21134d; --pf-t--color--purple--80: #1b0d33; --pf-t--color--red--10: #fce3e3; --pf-t--color--red--20: #fbc5c5; --pf-t--color--red--30: #f9a8a8; --pf-t--color--red--40: #f56e6e; --pf-t--color--red--50: #ee0000; --pf-t--color--red--60: #a60000; --pf-t--color--red--70: #5f0000; --pf-t--color--red--80: #3f0000; --pf-t--color--red-orange--10: #ffe3d9; --pf-t--color--red-orange--20: #fbbea8; --pf-t--color--red-orange--30: #f89b78; --pf-t--color--red-orange--40: #f4784a; --pf-t--color--red-orange--50: #f0561d; --pf-t--color--red-orange--60: #b1380b; --pf-t--color--red-orange--70: #731f00; --pf-t--color--red-orange--80: #4c1405; --pf-t--color--teal--10: #daf2f2; --pf-t--color--teal--20: #b9e5e5; --pf-t--color--teal--30: #9ad8d8; --pf-t--color--teal--40: #63bdbd; --pf-t--color--teal--50: #37a3a3; --pf-t--color--teal--60: #147878; --pf-t--color--teal--70: #004d4d; --pf-t--color--teal--80: #003333; --pf-t--color--white: #ffffff; --pf-t--color--yellow--10: #fff4cc; --pf-t--color--yellow--20: #ffe072; --pf-t--color--yellow--30: #ffcc17; --pf-t--color--yellow--40: #dca614; --pf-t--color--yellow--50: #b98412; --pf-t--color--yellow--60: #96640f; --pf-t--color--yellow--70: #73480b; --pf-t--color--yellow--80: #54330b; --pf-t--global--background--color--500: rgba(21, 21, 21, 0.2000); --pf-t--global--background--color--600: rgba(199, 199, 199, 0.2500); --pf-t--global--background--color--action--plain--default: rgba(255, 255, 255, 0.0000); --pf-t--global--border--color--high-contrast: rgba(255, 255, 255, 0.0000); --pf-t--global--border--radius--0: 0px; --pf-t--global--border--radius--100: 4px; --pf-t--global--border--radius--200: 6px; --pf-t--global--border--radius--300: 16px; --pf-t--global--border--radius--400: 24px; --pf-t--global--border--radius--500: 999px; --pf-t--global--border--width--100: 1px; --pf-t--global--border--width--200: 2px; --pf-t--global--border--width--300: 3px; --pf-t--global--border--width--400: 4px; --pf-t--global--border--width--action--plain--clicked: 0px; --pf-t--global--border--width--action--plain--default: 0px; --pf-t--global--border--width--action--plain--hover: 0px; --pf-t--global--border--width--high-contrast--extra-strong: 0px; --pf-t--global--border--width--high-contrast--regular: 0px; --pf-t--global--border--width--high-contrast--strong: 0px; --pf-t--global--box-shadow--X--100: -10px; --pf-t--global--box-shadow--X--200: -4px; --pf-t--global--box-shadow--X--300: -1px; --pf-t--global--box-shadow--X--400: 0px; --pf-t--global--box-shadow--X--50: -20px; --pf-t--global--box-shadow--X--500: 1px; --pf-t--global--box-shadow--X--600: 4px; --pf-t--global--box-shadow--X--700: 10px; --pf-t--global--box-shadow--X--800: 20px; --pf-t--global--box-shadow--Y--100: -10px; --pf-t--global--box-shadow--Y--200: -4px; --pf-t--global--box-shadow--Y--300: -1px; --pf-t--global--box-shadow--Y--400: 0px; --pf-t--global--box-shadow--Y--50: -20px; --pf-t--global--box-shadow--Y--500: 1px; --pf-t--global--box-shadow--Y--600: 4px; --pf-t--global--box-shadow--Y--700: 10px; --pf-t--global--box-shadow--Y--800: 20px; --pf-t--global--box-shadow--blur--100: 4px; --pf-t--global--box-shadow--blur--200: 9px; --pf-t--global--box-shadow--blur--300: 20px; --pf-t--global--box-shadow--color--100: rgba(41, 41, 41, 0.1500); --pf-t--global--box-shadow--color--200: rgba(41, 41, 41, 0.2000); --pf-t--global--box-shadow--spread--100: 0px; --pf-t--global--box-shadow--spread--200: -4px; --pf-t--global--box-shadow--spread--300: -8px; --pf-t--global--box-shadow--spread--400: -20px; --pf-t--global--breakpoint--100: 0rem; --pf-t--global--breakpoint--200: 36rem; --pf-t--global--breakpoint--250: 40rem; --pf-t--global--breakpoint--300: 48rem; --pf-t--global--breakpoint--350: 60rem; --pf-t--global--breakpoint--400: 62rem; --pf-t--global--breakpoint--500: 75rem; --pf-t--global--breakpoint--550: 80rem; --pf-t--global--breakpoint--600: 90.625rem; --pf-t--global--color--nonstatus--green--400: #3d7019; --pf-t--global--color--status--success--150: #3d7019; --pf-t--global--delay--100: 0ms; --pf-t--global--delay--200: 50ms; --pf-t--global--delay--300: 100ms; --pf-t--global--delay--400: 7000ms; --pf-t--global--duration--100: 100ms; --pf-t--global--duration--200: 200ms; --pf-t--global--duration--300: 300ms; --pf-t--global--duration--400: 400ms; --pf-t--global--duration--50: 50ms; --pf-t--global--duration--500: 500ms; --pf-t--global--duration--600: 600ms; --pf-t--global--focus-ring--position--inset: -4px; --pf-t--global--focus-ring--position--offset: 2px; --pf-t--global--focus-ring--width--inset: 3px; --pf-t--global--focus-ring--width--offset: 2px; --pf-t--global--font--family--100: "Red Hat Text", "RedHatText", "Noto Sans Arabic", "Noto Sans Hebrew", "Noto Sans JP", "Noto Sans KR", "Noto Sans Malayalam", "Noto Sans SC", "Noto Sans TC", "Noto Sans Thai", Helvetica, Arial, sans-serif; --pf-t--global--font--family--200: "Red Hat Display", "RedHatDisplay", "Noto Sans Arabic", "Noto Sans Hebrew", "Noto Sans JP", "Noto Sans KR", "Noto Sans Malayalam", "Noto Sans SC", "Noto Sans TC", "Noto Sans Thai", Helvetica, Arial, sans-serif; --pf-t--global--font--family--300: "Red Hat Mono", "RedHatMono", "Courier New", Courier, monospace; --pf-t--global--font--line-height--100: 1.3; --pf-t--global--font--line-height--200: 1.5; --pf-t--global--font--size--100: 0.75rem; --pf-t--global--font--size--200: 0.875rem; --pf-t--global--font--size--300: 1rem; --pf-t--global--font--size--400: 1.125rem; --pf-t--global--font--size--500: 1.25rem; --pf-t--global--font--size--600: 1.5rem; --pf-t--global--font--size--700: 1.75rem; --pf-t--global--font--size--800: 2.25rem; --pf-t--global--font--weight--100: 400; --pf-t--global--font--weight--200: 500; --pf-t--global--font--weight--300: 500; --pf-t--global--font--weight--400: 700; --pf-t--global--icon--size--100: 0.75rem; --pf-t--global--icon--size--200: 0.875rem; --pf-t--global--icon--size--250: 1rem; --pf-t--global--icon--size--300: 1.5rem; --pf-t--global--icon--size--400: 3.5rem; --pf-t--global--icon--size--500: 6rem; --pf-t--global--spacer--100: 0.25rem; --pf-t--global--spacer--200: 0.5rem; --pf-t--global--spacer--300: 1rem; --pf-t--global--spacer--400: 1.5rem; --pf-t--global--spacer--500: 2rem; --pf-t--global--spacer--600: 3rem; --pf-t--global--spacer--700: 4rem; --pf-t--global--spacer--800: 5rem; --pf-t--global--text-decoration--line--100: none; --pf-t--global--text-decoration--line--200: underline; --pf-t--global--text-decoration--style--100: solid; --pf-t--global--text-decoration--style--200: dashed; --pf-t--global--timing-function--100: cubic-bezier(.4, 0, .7, .2); --pf-t--global--timing-function--200: cubic-bezier(.4, 0, .2, 1); --pf-t--global--timing-function--300: cubic-bezier(0, 0, .2, 1); --pf-t--global--z-index--100: 100; --pf-t--global--z-index--200: 200; --pf-t--global--z-index--300: 300; --pf-t--global--z-index--400: 400; --pf-t--global--z-index--500: 500; --pf-t--global--z-index--600: 600; --pf-t--global--background--color--100: var(--pf-t--color--white); --pf-t--global--background--color--200: var(--pf-t--color--gray--10); --pf-t--global--background--color--300: var(--pf-t--color--gray--20); --pf-t--global--background--color--400: var(--pf-t--color--gray--80); --pf-t--global--background--color--450: var(--pf-t--color--gray--70); --pf-t--global--background--color--action--plain--clicked: var(--pf-t--global--background--color--600); --pf-t--global--background--color--action--plain--hover: var(--pf-t--global--background--color--600); --pf-t--global--background--color--backdrop--default: var(--pf-t--global--background--color--500); --pf-t--global--background--color--highlight--100: var(--pf-t--color--yellow--30); --pf-t--global--background--color--highlight--200: var(--pf-t--color--yellow--40); --pf-t--global--background--color--tertiary--default: var(--pf-t--global--background--color--600); --pf-t--global--border--color--100: var(--pf-t--color--gray--30); --pf-t--global--border--color--200: var(--pf-t--color--gray--40); --pf-t--global--border--color--300: var(--pf-t--color--gray--50); --pf-t--global--border--color--400: var(--pf-t--color--gray--60); --pf-t--global--border--color--50: var(--pf-t--color--gray--20); --pf-t--global--border--radius--large: var(--pf-t--global--border--radius--400); --pf-t--global--border--radius--medium: var(--pf-t--global--border--radius--300); --pf-t--global--border--radius--pill: var(--pf-t--global--border--radius--500); --pf-t--global--border--radius--sharp: var(--pf-t--global--border--radius--0); --pf-t--global--border--radius--small: var(--pf-t--global--border--radius--200); --pf-t--global--border--radius--tiny: var(--pf-t--global--border--radius--100); --pf-t--global--border--width--action--clicked: var(--pf-t--global--border--width--200); --pf-t--global--border--width--action--default: var(--pf-t--global--border--width--100); --pf-t--global--border--width--action--hover: var(--pf-t--global--border--width--200); --pf-t--global--border--width--box--clicked: var(--pf-t--global--border--width--200); --pf-t--global--border--width--box--default: var(--pf-t--global--border--width--100); --pf-t--global--border--width--box--hover: var(--pf-t--global--border--width--100); --pf-t--global--border--width--box--status--default: var(--pf-t--global--border--width--200); --pf-t--global--border--width--box--status--read: var(--pf-t--global--border--width--100); --pf-t--global--border--width--control--clicked: var(--pf-t--global--border--width--200); --pf-t--global--border--width--control--default: var(--pf-t--global--border--width--100); --pf-t--global--border--width--control--hover: var(--pf-t--global--border--width--100); --pf-t--global--border--width--divider--clicked: var(--pf-t--global--border--width--100); --pf-t--global--border--width--divider--default: var(--pf-t--global--border--width--100); --pf-t--global--border--width--divider--hover: var(--pf-t--global--border--width--100); --pf-t--global--border--width--extra-strong: var(--pf-t--global--border--width--300); --pf-t--global--border--width--main--default: var(--pf-t--global--border--width--400); --pf-t--global--border--width--regular: var(--pf-t--global--border--width--100); --pf-t--global--border--width--strong: var(--pf-t--global--border--width--200); --pf-t--global--box-shadow--X--lg--bottom: var(--pf-t--global--box-shadow--X--400); --pf-t--global--box-shadow--X--lg--default: var(--pf-t--global--box-shadow--X--400); --pf-t--global--box-shadow--X--lg--left: var(--pf-t--global--box-shadow--X--50); --pf-t--global--box-shadow--X--lg--right: var(--pf-t--global--box-shadow--X--800); --pf-t--global--box-shadow--X--lg--top: var(--pf-t--global--box-shadow--X--400); --pf-t--global--box-shadow--X--md--bottom: var(--pf-t--global--box-shadow--X--400); --pf-t--global--box-shadow--X--md--default: var(--pf-t--global--box-shadow--X--400); --pf-t--global--box-shadow--X--md--left: var(--pf-t--global--box-shadow--X--100); --pf-t--global--box-shadow--X--md--right: var(--pf-t--global--box-shadow--X--700); --pf-t--global--box-shadow--X--md--top: var(--pf-t--global--box-shadow--X--400); --pf-t--global--box-shadow--X--sm--bottom: var(--pf-t--global--box-shadow--X--400); --pf-t--global--box-shadow--X--sm--default: var(--pf-t--global--box-shadow--X--400); --pf-t--global--box-shadow--X--sm--left: var(--pf-t--global--box-shadow--X--200); --pf-t--global--box-shadow--X--sm--right: var(--pf-t--global--box-shadow--X--600); --pf-t--global--box-shadow--X--sm--top: var(--pf-t--global--box-shadow--X--400); --pf-t--global--box-shadow--Y--lg--bottom: var(--pf-t--global--box-shadow--Y--800); --pf-t--global--box-shadow--Y--lg--default: var(--pf-t--global--box-shadow--Y--700); --pf-t--global--box-shadow--Y--lg--left: var(--pf-t--global--box-shadow--Y--400); --pf-t--global--box-shadow--Y--lg--right: var(--pf-t--global--box-shadow--Y--400); --pf-t--global--box-shadow--Y--lg--top: var(--pf-t--global--box-shadow--Y--50); --pf-t--global--box-shadow--Y--md--bottom: var(--pf-t--global--box-shadow--Y--700); --pf-t--global--box-shadow--Y--md--default: var(--pf-t--global--box-shadow--Y--600); --pf-t--global--box-shadow--Y--md--left: var(--pf-t--global--box-shadow--Y--400); --pf-t--global--box-shadow--Y--md--right: var(--pf-t--global--box-shadow--Y--400); --pf-t--global--box-shadow--Y--md--top: var(--pf-t--global--box-shadow--Y--100); --pf-t--global--box-shadow--Y--sm--bottom: var(--pf-t--global--box-shadow--Y--600); --pf-t--global--box-shadow--Y--sm--default: var(--pf-t--global--box-shadow--Y--500); --pf-t--global--box-shadow--Y--sm--left: var(--pf-t--global--box-shadow--Y--400); --pf-t--global--box-shadow--Y--sm--right: var(--pf-t--global--box-shadow--Y--400); --pf-t--global--box-shadow--Y--sm--top: var(--pf-t--global--box-shadow--Y--200); --pf-t--global--box-shadow--blur--lg: var(--pf-t--global--box-shadow--blur--300); --pf-t--global--box-shadow--blur--md: var(--pf-t--global--box-shadow--blur--200); --pf-t--global--box-shadow--blur--sm: var(--pf-t--global--box-shadow--blur--100); --pf-t--global--box-shadow--color--lg--default: var(--pf-t--global--box-shadow--color--100); --pf-t--global--box-shadow--color--lg--directional: var(--pf-t--global--box-shadow--color--200); --pf-t--global--box-shadow--color--md--default: var(--pf-t--global--box-shadow--color--100); --pf-t--global--box-shadow--color--md--directional: var(--pf-t--global--box-shadow--color--100); --pf-t--global--box-shadow--color--sm--default: var(--pf-t--global--box-shadow--color--100); --pf-t--global--box-shadow--color--sm--directional: var(--pf-t--global--box-shadow--color--200); --pf-t--global--box-shadow--spread--lg--default: var(--pf-t--global--box-shadow--spread--100); --pf-t--global--box-shadow--spread--lg--directional: var(--pf-t--global--box-shadow--spread--400); --pf-t--global--box-shadow--spread--md--default: var(--pf-t--global--box-shadow--spread--100); --pf-t--global--box-shadow--spread--md--directional: var(--pf-t--global--box-shadow--spread--300); --pf-t--global--box-shadow--spread--sm--default: var(--pf-t--global--box-shadow--spread--100); --pf-t--global--box-shadow--spread--sm--directional: var(--pf-t--global--box-shadow--spread--200); --pf-t--global--breakpoint--2xl: var(--pf-t--global--breakpoint--600); --pf-t--global--breakpoint--height--2xl: var(--pf-t--global--breakpoint--550); --pf-t--global--breakpoint--height--lg: var(--pf-t--global--breakpoint--300); --pf-t--global--breakpoint--height--md: var(--pf-t--global--breakpoint--250); --pf-t--global--breakpoint--height--sm: var(--pf-t--global--breakpoint--100); --pf-t--global--breakpoint--height--xl: var(--pf-t--global--breakpoint--350); --pf-t--global--breakpoint--lg: var(--pf-t--global--breakpoint--400); --pf-t--global--breakpoint--md: var(--pf-t--global--breakpoint--300); --pf-t--global--breakpoint--sm: var(--pf-t--global--breakpoint--200); --pf-t--global--breakpoint--xl: var(--pf-t--global--breakpoint--500); --pf-t--global--breakpoint--xs: var(--pf-t--global--breakpoint--100); --pf-t--global--color--brand--100: var(--pf-t--color--blue--40); --pf-t--global--color--brand--200: var(--pf-t--color--blue--50); --pf-t--global--color--brand--300: var(--pf-t--color--blue--60); --pf-t--global--color--brand--400: var(--pf-t--color--blue--70); --pf-t--global--color--brand--500: var(--pf-t--color--blue--80); --pf-t--global--color--disabled--100: var(--pf-t--color--gray--30); --pf-t--global--color--disabled--200: var(--pf-t--color--gray--40); --pf-t--global--color--disabled--300: var(--pf-t--color--gray--60); --pf-t--global--color--favorite--100: var(--pf-t--color--yellow--30); --pf-t--global--color--favorite--200: var(--pf-t--color--yellow--40); --pf-t--global--color--favorite--300: var(--pf-t--color--yellow--70); --pf-t--global--color--favorite--400: var(--pf-t--color--yellow--80); --pf-t--global--color--nonstatus--blue--100: var(--pf-t--color--blue--20); --pf-t--global--color--nonstatus--blue--200: var(--pf-t--color--blue--30); --pf-t--global--color--nonstatus--blue--300: var(--pf-t--color--blue--40); --pf-t--global--color--nonstatus--blue--400: var(--pf-t--color--blue--60); --pf-t--global--color--nonstatus--blue--500: var(--pf-t--color--blue--70); --pf-t--global--color--nonstatus--gray--100: var(--pf-t--color--gray--20); --pf-t--global--color--nonstatus--gray--200: var(--pf-t--color--gray--30); --pf-t--global--color--nonstatus--gray--300: var(--pf-t--color--gray--40); --pf-t--global--color--nonstatus--gray--400: var(--pf-t--color--gray--60); --pf-t--global--color--nonstatus--gray--50: var(--pf-t--color--gray--10); --pf-t--global--color--nonstatus--gray--500: var(--pf-t--color--gray--70); --pf-t--global--color--nonstatus--green--100: var(--pf-t--color--green--20); --pf-t--global--color--nonstatus--green--200: var(--pf-t--color--green--30); --pf-t--global--color--nonstatus--green--300: var(--pf-t--color--green--40); --pf-t--global--color--nonstatus--green--500: var(--pf-t--color--green--70); --pf-t--global--color--nonstatus--orange--100: var(--pf-t--color--orange--20); --pf-t--global--color--nonstatus--orange--200: var(--pf-t--color--orange--30); --pf-t--global--color--nonstatus--orange--300: var(--pf-t--color--orange--40); --pf-t--global--color--nonstatus--orange--400: var(--pf-t--color--orange--60); --pf-t--global--color--nonstatus--orange--500: var(--pf-t--color--orange--70); --pf-t--global--color--nonstatus--orangered--100: var(--pf-t--color--red-orange--20); --pf-t--global--color--nonstatus--orangered--200: var(--pf-t--color--red-orange--30); --pf-t--global--color--nonstatus--orangered--300: var(--pf-t--color--red-orange--40); --pf-t--global--color--nonstatus--orangered--400: var(--pf-t--color--red-orange--60); --pf-t--global--color--nonstatus--orangered--500: var(--pf-t--color--red-orange--70); --pf-t--global--color--nonstatus--purple--100: var(--pf-t--color--purple--20); --pf-t--global--color--nonstatus--purple--200: var(--pf-t--color--purple--30); --pf-t--global--color--nonstatus--purple--300: var(--pf-t--color--purple--40); --pf-t--global--color--nonstatus--purple--400: var(--pf-t--color--purple--50); --pf-t--global--color--nonstatus--purple--500: var(--pf-t--color--purple--60); --pf-t--global--color--nonstatus--red--100: var(--pf-t--color--red--20); --pf-t--global--color--nonstatus--red--200: var(--pf-t--color--red--30); --pf-t--global--color--nonstatus--red--300: var(--pf-t--color--red--40); --pf-t--global--color--nonstatus--red--400: var(--pf-t--color--red--60); --pf-t--global--color--nonstatus--red--500: var(--pf-t--color--red--70); --pf-t--global--color--nonstatus--teal--100: var(--pf-t--color--teal--20); --pf-t--global--color--nonstatus--teal--200: var(--pf-t--color--teal--30); --pf-t--global--color--nonstatus--teal--300: var(--pf-t--color--teal--40); --pf-t--global--color--nonstatus--teal--400: var(--pf-t--color--teal--70); --pf-t--global--color--nonstatus--teal--500: var(--pf-t--color--teal--80); --pf-t--global--color--nonstatus--yellow--100: var(--pf-t--color--yellow--20); --pf-t--global--color--nonstatus--yellow--200: var(--pf-t--color--yellow--30); --pf-t--global--color--nonstatus--yellow--300: var(--pf-t--color--yellow--40); --pf-t--global--color--nonstatus--yellow--400: var(--pf-t--color--yellow--70); --pf-t--global--color--nonstatus--yellow--500: var(--pf-t--color--yellow--80); --pf-t--global--color--severity--critical--100: var(--pf-t--color--red-orange--60); --pf-t--global--color--severity--important--100: var(--pf-t--color--orange--50); --pf-t--global--color--severity--important--200: var(--pf-t--color--orange--60); --pf-t--global--color--severity--minor--100: var(--pf-t--color--gray--50); --pf-t--global--color--severity--minor--200: var(--pf-t--color--gray--80); --pf-t--global--color--severity--moderate--100: var(--pf-t--color--yellow--40); --pf-t--global--color--severity--moderate--200: var(--pf-t--color--yellow--70); --pf-t--global--color--severity--none--100: var(--pf-t--color--blue--40); --pf-t--global--color--severity--none--200: var(--pf-t--color--blue--60); --pf-t--global--color--severity--undefined--100: var(--pf-t--color--gray--30); --pf-t--global--color--severity--undefined--200: var(--pf-t--color--gray--60); --pf-t--global--color--status--custom--100: var(--pf-t--color--teal--60); --pf-t--global--color--status--custom--200: var(--pf-t--color--teal--70); --pf-t--global--color--status--custom--300: var(--pf-t--color--teal--80); --pf-t--global--color--status--danger--100: var(--pf-t--color--red-orange--60); --pf-t--global--color--status--danger--200: var(--pf-t--color--red-orange--70); --pf-t--global--color--status--danger--300: var(--pf-t--color--red-orange--80); --pf-t--global--color--status--info--100: var(--pf-t--color--purple--50); --pf-t--global--color--status--info--200: var(--pf-t--color--purple--60); --pf-t--global--color--status--info--300: var(--pf-t--color--purple--70); --pf-t--global--color--status--success--100: var(--pf-t--color--green--60); --pf-t--global--color--status--success--200: var(--pf-t--color--green--70); --pf-t--global--color--status--success--300: var(--pf-t--color--green--80); --pf-t--global--color--status--warning--100: var(--pf-t--color--yellow--30); --pf-t--global--color--status--warning--200: var(--pf-t--color--yellow--40); --pf-t--global--color--status--warning--300: var(--pf-t--color--yellow--50); --pf-t--global--color--status--warning--400: var(--pf-t--color--yellow--60); --pf-t--global--color--status--warning--500: var(--pf-t--color--yellow--70); --pf-t--global--color--status--warning--600: var(--pf-t--color--yellow--80); --pf-t--global--focus-ring--color--100: var(--pf-t--color--blue--50); --pf-t--global--focus-ring--color--200: var(--pf-t--color--blue--60); --pf-t--global--font--family--body: var(--pf-t--global--font--family--100); --pf-t--global--font--family--heading: var(--pf-t--global--font--family--200); --pf-t--global--font--family--mono: var(--pf-t--global--font--family--300); --pf-t--global--font--line-height--body: var(--pf-t--global--font--line-height--200); --pf-t--global--font--line-height--heading: var(--pf-t--global--font--line-height--100); --pf-t--global--font--size--2xl: var(--pf-t--global--font--size--600); --pf-t--global--font--size--3xl: var(--pf-t--global--font--size--700); --pf-t--global--font--size--4xl: var(--pf-t--global--font--size--800); --pf-t--global--font--size--lg: var(--pf-t--global--font--size--400); --pf-t--global--font--size--md: var(--pf-t--global--font--size--300); --pf-t--global--font--size--sm: var(--pf-t--global--font--size--200); --pf-t--global--font--size--xl: var(--pf-t--global--font--size--500); --pf-t--global--font--size--xs: var(--pf-t--global--font--size--100); --pf-t--global--font--weight--body--bold: var(--pf-t--global--font--weight--200); --pf-t--global--font--weight--body--default: var(--pf-t--global--font--weight--100); --pf-t--global--font--weight--heading--bold: var(--pf-t--global--font--weight--400); --pf-t--global--font--weight--heading--default: var(--pf-t--global--font--weight--300); --pf-t--global--icon--color--100: var(--pf-t--color--gray--90); --pf-t--global--icon--color--150: var(--pf-t--color--gray--60); --pf-t--global--icon--color--200: var(--pf-t--color--gray--50); --pf-t--global--icon--color--300: var(--pf-t--color--white); --pf-t--global--icon--size--2xl: var(--pf-t--global--icon--size--400); --pf-t--global--icon--size--3xl: var(--pf-t--global--icon--size--500); --pf-t--global--icon--size--lg: var(--pf-t--global--icon--size--250); --pf-t--global--icon--size--md: var(--pf-t--global--icon--size--200); --pf-t--global--icon--size--sm: var(--pf-t--global--icon--size--100); --pf-t--global--icon--size--xl: var(--pf-t--global--icon--size--300); --pf-t--global--motion--delay--default: var(--pf-t--global--delay--300); --pf-t--global--motion--delay--long: var(--pf-t--global--delay--400); --pf-t--global--motion--delay--none: var(--pf-t--global--delay--100); --pf-t--global--motion--delay--short: var(--pf-t--global--delay--200); --pf-t--global--motion--duration--2xl: var(--pf-t--global--duration--500); --pf-t--global--motion--duration--3xl: var(--pf-t--global--duration--600); --pf-t--global--motion--duration--lg: var(--pf-t--global--duration--300); --pf-t--global--motion--duration--md: var(--pf-t--global--duration--200); --pf-t--global--motion--duration--sm: var(--pf-t--global--duration--100); --pf-t--global--motion--duration--xl: var(--pf-t--global--duration--400); --pf-t--global--motion--duration--xs: var(--pf-t--global--duration--50); --pf-t--global--motion--timing-function--accelerate: var(--pf-t--global--timing-function--100); --pf-t--global--motion--timing-function--decelerate: var(--pf-t--global--timing-function--300); --pf-t--global--motion--timing-function--default: var(--pf-t--global--timing-function--200); --pf-t--global--spacer--2xl: var(--pf-t--global--spacer--600); --pf-t--global--spacer--3xl: var(--pf-t--global--spacer--700); --pf-t--global--spacer--4xl: var(--pf-t--global--spacer--800); --pf-t--global--spacer--lg: var(--pf-t--global--spacer--400); --pf-t--global--spacer--md: var(--pf-t--global--spacer--300); --pf-t--global--spacer--sm: var(--pf-t--global--spacer--200); --pf-t--global--spacer--xl: var(--pf-t--global--spacer--500); --pf-t--global--spacer--xs: var(--pf-t--global--spacer--100); --pf-t--global--text--color--100: var(--pf-t--color--gray--95); --pf-t--global--text--color--200: var(--pf-t--color--gray--60); --pf-t--global--text--color--250: var(--pf-t--color--gray--70); --pf-t--global--text--color--300: var(--pf-t--color--white); --pf-t--global--text--color--400: var(--pf-t--color--red-orange--40); --pf-t--global--text--color--500: var(--pf-t--color--red-orange--70); --pf-t--global--text--color--link--100: var(--pf-t--color--blue--50); --pf-t--global--text--color--link--200: var(--pf-t--color--blue--60); --pf-t--global--text--color--link--250: var(--pf-t--color--blue--70); --pf-t--global--text--color--link--300: var(--pf-t--color--purple--50); --pf-t--global--text--color--link--350: var(--pf-t--color--purple--60); --pf-t--global--text-decoration--editable-text--line--default: var(--pf-t--global--text-decoration--line--200); --pf-t--global--text-decoration--editable-text--line--hover: var(--pf-t--global--text-decoration--line--200); --pf-t--global--text-decoration--editable-text--style--default: var(--pf-t--global--text-decoration--style--200); --pf-t--global--text-decoration--editable-text--style--hover: var(--pf-t--global--text-decoration--style--200); --pf-t--global--text-decoration--help-text--line--default: var(--pf-t--global--text-decoration--line--200); --pf-t--global--text-decoration--help-text--line--hover: var(--pf-t--global--text-decoration--line--200); --pf-t--global--text-decoration--help-text--style--default: var(--pf-t--global--text-decoration--style--200); --pf-t--global--text-decoration--help-text--style--hover: var(--pf-t--global--text-decoration--style--200); --pf-t--global--text-decoration--link--line--default: var(--pf-t--global--text-decoration--line--200); --pf-t--global--text-decoration--link--line--hover: var(--pf-t--global--text-decoration--line--200); --pf-t--global--text-decoration--link--style--default: var(--pf-t--global--text-decoration--style--100); --pf-t--global--text-decoration--link--style--hover: var(--pf-t--global--text-decoration--style--100); --pf-t--global--z-index--2xl: var(--pf-t--global--z-index--600); --pf-t--global--z-index--lg: var(--pf-t--global--z-index--400); --pf-t--global--z-index--md: var(--pf-t--global--z-index--300); --pf-t--global--z-index--sm: var(--pf-t--global--z-index--200); --pf-t--global--z-index--xl: var(--pf-t--global--z-index--500); --pf-t--global--z-index--xs: var(--pf-t--global--z-index--100); --pf-t--global--background--color--action--plain--alt--clicked: var(--pf-t--global--background--color--100); --pf-t--global--background--color--action--plain--alt--hover: var(--pf-t--global--background--color--100); --pf-t--global--background--color--control--read-only: var(--pf-t--global--background--color--200); --pf-t--global--background--color--disabled--default: var(--pf-t--global--color--disabled--100); --pf-t--global--background--color--floating--clicked: var(--pf-t--global--background--color--200); --pf-t--global--background--color--floating--default: var(--pf-t--global--background--color--100); --pf-t--global--background--color--floating--hover: var(--pf-t--global--background--color--200); --pf-t--global--background--color--highlight--clicked: var(--pf-t--global--background--color--highlight--200); --pf-t--global--background--color--highlight--default: var(--pf-t--global--background--color--highlight--100); --pf-t--global--background--color--inverse--clicked: var(--pf-t--global--background--color--450); --pf-t--global--background--color--inverse--default: var(--pf-t--global--background--color--400); --pf-t--global--background--color--inverse--hover: var(--pf-t--global--background--color--450); --pf-t--global--background--color--primary--clicked: var(--pf-t--global--background--color--200); --pf-t--global--background--color--primary--default: var(--pf-t--global--background--color--100); --pf-t--global--background--color--primary--hover: var(--pf-t--global--background--color--200); --pf-t--global--background--color--secondary--clicked: var(--pf-t--global--background--color--300); --pf-t--global--background--color--secondary--default: var(--pf-t--global--background--color--200); --pf-t--global--background--color--secondary--hover: var(--pf-t--global--background--color--300); --pf-t--global--border--color--clicked: var(--pf-t--global--color--brand--200); --pf-t--global--border--color--control--read-only: var(--pf-t--global--border--color--50); --pf-t--global--border--color--default: var(--pf-t--global--border--color--100); --pf-t--global--border--color--disabled: var(--pf-t--global--color--disabled--200); --pf-t--global--border--color--hover: var(--pf-t--global--color--brand--100); --pf-t--global--border--color--nonstatus--blue--clicked: var(--pf-t--global--color--nonstatus--blue--300); --pf-t--global--border--color--nonstatus--blue--default: var(--pf-t--global--color--nonstatus--blue--200); --pf-t--global--border--color--nonstatus--blue--hover: var(--pf-t--global--color--nonstatus--blue--300); --pf-t--global--border--color--nonstatus--gray--clicked: var(--pf-t--global--color--nonstatus--gray--300); --pf-t--global--border--color--nonstatus--gray--default: var(--pf-t--global--color--nonstatus--gray--200); --pf-t--global--border--color--nonstatus--gray--hover: var(--pf-t--global--color--nonstatus--gray--300); --pf-t--global--border--color--nonstatus--green--clicked: var(--pf-t--global--color--nonstatus--green--300); --pf-t--global--border--color--nonstatus--green--default: var(--pf-t--global--color--nonstatus--green--200); --pf-t--global--border--color--nonstatus--green--hover: var(--pf-t--global--color--nonstatus--green--300); --pf-t--global--border--color--nonstatus--orange--clicked: var(--pf-t--global--color--nonstatus--orange--300); --pf-t--global--border--color--nonstatus--orange--default: var(--pf-t--global--color--nonstatus--orange--200); --pf-t--global--border--color--nonstatus--orange--hover: var(--pf-t--global--color--nonstatus--orange--300); --pf-t--global--border--color--nonstatus--orangered--clicked: var(--pf-t--global--color--nonstatus--orangered--300); --pf-t--global--border--color--nonstatus--orangered--default: var(--pf-t--global--color--nonstatus--orangered--200); --pf-t--global--border--color--nonstatus--orangered--hover: var(--pf-t--global--color--nonstatus--orangered--300); --pf-t--global--border--color--nonstatus--purple--clicked: var(--pf-t--global--color--nonstatus--purple--300); --pf-t--global--border--color--nonstatus--purple--default: var(--pf-t--global--color--nonstatus--purple--200); --pf-t--global--border--color--nonstatus--purple--hover: var(--pf-t--global--color--nonstatus--purple--300); --pf-t--global--border--color--nonstatus--red--clicked: var(--pf-t--global--color--nonstatus--red--300); --pf-t--global--border--color--nonstatus--red--default: var(--pf-t--global--color--nonstatus--red--200); --pf-t--global--border--color--nonstatus--red--hover: var(--pf-t--global--color--nonstatus--red--300); --pf-t--global--border--color--nonstatus--teal--clicked: var(--pf-t--global--color--nonstatus--teal--300); --pf-t--global--border--color--nonstatus--teal--default: var(--pf-t--global--color--nonstatus--teal--200); --pf-t--global--border--color--nonstatus--teal--hover: var(--pf-t--global--color--nonstatus--teal--300); --pf-t--global--border--color--nonstatus--yellow--clicked: var(--pf-t--global--color--nonstatus--yellow--300); --pf-t--global--border--color--nonstatus--yellow--default: var(--pf-t--global--color--nonstatus--yellow--200); --pf-t--global--border--color--nonstatus--yellow--hover: var(--pf-t--global--color--nonstatus--yellow--300); --pf-t--global--border--color--on-secondary: var(--pf-t--global--border--color--300); --pf-t--global--border--color--status--warning--clicked: var(--pf-t--global--color--status--warning--300); --pf-t--global--border--color--status--warning--default: var(--pf-t--global--color--status--warning--200); --pf-t--global--border--color--status--warning--hover: var(--pf-t--global--color--status--warning--300); --pf-t--global--color--brand--clicked: var(--pf-t--global--color--brand--300); --pf-t--global--color--brand--default: var(--pf-t--global--color--brand--200); --pf-t--global--color--brand--hover: var(--pf-t--global--color--brand--300); --pf-t--global--color--favorite--clicked: var(--pf-t--global--color--favorite--200); --pf-t--global--color--favorite--default: var(--pf-t--global--color--favorite--100); --pf-t--global--color--favorite--hover: var(--pf-t--global--color--favorite--200); --pf-t--global--color--nonstatus--blue--clicked: var(--pf-t--global--color--nonstatus--blue--200); --pf-t--global--color--nonstatus--blue--default: var(--pf-t--global--color--nonstatus--blue--100); --pf-t--global--color--nonstatus--blue--hover: var(--pf-t--global--color--nonstatus--blue--200); --pf-t--global--color--nonstatus--gray--clicked: var(--pf-t--global--color--nonstatus--gray--200); --pf-t--global--color--nonstatus--gray--default: var(--pf-t--global--color--nonstatus--gray--100); --pf-t--global--color--nonstatus--gray--hover: var(--pf-t--global--color--nonstatus--gray--200); --pf-t--global--color--nonstatus--green--clicked: var(--pf-t--global--color--nonstatus--green--200); --pf-t--global--color--nonstatus--green--default: var(--pf-t--global--color--nonstatus--green--100); --pf-t--global--color--nonstatus--green--hover: var(--pf-t--global--color--nonstatus--green--200); --pf-t--global--color--nonstatus--orange--clicked: var(--pf-t--global--color--nonstatus--orange--200); --pf-t--global--color--nonstatus--orange--default: var(--pf-t--global--color--nonstatus--orange--100); --pf-t--global--color--nonstatus--orange--hover: var(--pf-t--global--color--nonstatus--orange--200); --pf-t--global--color--nonstatus--orangered--clicked: var(--pf-t--global--color--nonstatus--orangered--200); --pf-t--global--color--nonstatus--orangered--default: var(--pf-t--global--color--nonstatus--orangered--100); --pf-t--global--color--nonstatus--orangered--hover: var(--pf-t--global--color--nonstatus--orangered--200); --pf-t--global--color--nonstatus--purple--clicked: var(--pf-t--global--color--nonstatus--purple--200); --pf-t--global--color--nonstatus--purple--default: var(--pf-t--global--color--nonstatus--purple--100); --pf-t--global--color--nonstatus--purple--hover: var(--pf-t--global--color--nonstatus--purple--200); --pf-t--global--color--nonstatus--red--clicked: var(--pf-t--global--color--nonstatus--red--200); --pf-t--global--color--nonstatus--red--default: var(--pf-t--global--color--nonstatus--red--100); --pf-t--global--color--nonstatus--red--hover: var(--pf-t--global--color--nonstatus--red--200); --pf-t--global--color--nonstatus--teal--clicked: var(--pf-t--global--color--nonstatus--teal--200); --pf-t--global--color--nonstatus--teal--default: var(--pf-t--global--color--nonstatus--teal--100); --pf-t--global--color--nonstatus--teal--hover: var(--pf-t--global--color--nonstatus--teal--200); --pf-t--global--color--nonstatus--yellow--clicked: var(--pf-t--global--color--nonstatus--yellow--200); --pf-t--global--color--nonstatus--yellow--default: var(--pf-t--global--color--nonstatus--yellow--100); --pf-t--global--color--nonstatus--yellow--hover: var(--pf-t--global--color--nonstatus--yellow--200); --pf-t--global--color--status--custom--clicked: var(--pf-t--global--color--status--custom--200); --pf-t--global--color--status--custom--default: var(--pf-t--global--color--status--custom--100); --pf-t--global--color--status--custom--hover: var(--pf-t--global--color--status--custom--200); --pf-t--global--color--status--danger--clicked: var(--pf-t--global--color--status--danger--200); --pf-t--global--color--status--danger--default: var(--pf-t--global--color--status--danger--100); --pf-t--global--color--status--danger--hover: var(--pf-t--global--color--status--danger--200); --pf-t--global--color--status--info--clicked: var(--pf-t--global--color--status--info--200); --pf-t--global--color--status--info--default: var(--pf-t--global--color--status--info--100); --pf-t--global--color--status--info--hover: var(--pf-t--global--color--status--info--200); --pf-t--global--color--status--success--clicked: var(--pf-t--global--color--status--success--200); --pf-t--global--color--status--success--default: var(--pf-t--global--color--status--success--100); --pf-t--global--color--status--success--hover: var(--pf-t--global--color--status--success--200); --pf-t--global--color--status--warning--clicked: var(--pf-t--global--color--status--warning--200); --pf-t--global--color--status--warning--default: var(--pf-t--global--color--status--warning--100); --pf-t--global--color--status--warning--hover: var(--pf-t--global--color--status--warning--200); --pf-t--global--focus-ring--color--default: var(--pf-t--global--focus-ring--color--100); --pf-t--global--font--size--body--default: var(--pf-t--global--font--size--sm); --pf-t--global--font--size--body--lg: var(--pf-t--global--font--size--md); --pf-t--global--font--size--body--sm: var(--pf-t--global--font--size--xs); --pf-t--global--font--size--heading--h1: var(--pf-t--global--font--size--2xl); --pf-t--global--font--size--heading--h2: var(--pf-t--global--font--size--xl); --pf-t--global--font--size--heading--h3: var(--pf-t--global--font--size--lg); --pf-t--global--font--size--heading--h4: var(--pf-t--global--font--size--md); --pf-t--global--font--size--heading--h5: var(--pf-t--global--font--size--md); --pf-t--global--font--size--heading--h6: var(--pf-t--global--font--size--md); --pf-t--global--icon--color--disabled: var(--pf-t--global--color--disabled--200); --pf-t--global--icon--color--inverse: var(--pf-t--global--icon--color--300); --pf-t--global--icon--color--on-disabled: var(--pf-t--global--color--disabled--300); --pf-t--global--icon--color--regular: var(--pf-t--global--icon--color--100); --pf-t--global--icon--color--severity--critical--default: var(--pf-t--global--color--severity--critical--100); --pf-t--global--icon--color--severity--important--default: var(--pf-t--global--color--severity--important--100); --pf-t--global--icon--color--severity--minor--default: var(--pf-t--global--color--severity--minor--100); --pf-t--global--icon--color--severity--moderate--default: var(--pf-t--global--color--severity--moderate--100); --pf-t--global--icon--color--severity--none--default: var(--pf-t--global--color--severity--none--100); --pf-t--global--icon--color--severity--undefined--default: var(--pf-t--global--color--severity--undefined--100); --pf-t--global--icon--color--status--warning--clicked: var(--pf-t--global--color--status--warning--300); --pf-t--global--icon--color--status--warning--default: var(--pf-t--global--color--status--warning--200); --pf-t--global--icon--color--status--warning--hover: var(--pf-t--global--color--status--warning--300); --pf-t--global--icon--color--subtle: var(--pf-t--global--icon--color--200); --pf-t--global--icon--size--font--2xl: var(--pf-t--global--font--size--2xl); --pf-t--global--icon--size--font--3xl: var(--pf-t--global--font--size--3xl); --pf-t--global--icon--size--font--4xl: var(--pf-t--global--font--size--4xl); --pf-t--global--icon--size--font--lg: var(--pf-t--global--font--size--lg); --pf-t--global--icon--size--font--md: var(--pf-t--global--font--size--md); --pf-t--global--icon--size--font--sm: var(--pf-t--global--font--size--sm); --pf-t--global--icon--size--font--xl: var(--pf-t--global--font--size--xl); --pf-t--global--icon--size--font--xs: var(--pf-t--global--font--size--xs); --pf-t--global--motion--duration--fade--default: var(--pf-t--global--motion--duration--md); --pf-t--global--motion--duration--fade--long: var(--pf-t--global--motion--duration--lg); --pf-t--global--motion--duration--fade--short: var(--pf-t--global--motion--duration--sm); --pf-t--global--motion--duration--icon--default: var(--pf-t--global--motion--duration--sm); --pf-t--global--motion--duration--icon--long: var(--pf-t--global--motion--duration--md); --pf-t--global--motion--duration--icon--short: var(--pf-t--global--motion--duration--xs); --pf-t--global--motion--duration--slide-in--default: var(--pf-t--global--motion--duration--xl); --pf-t--global--motion--duration--slide-in--long: var(--pf-t--global--motion--duration--2xl); --pf-t--global--motion--duration--slide-in--short: var(--pf-t--global--motion--duration--lg); --pf-t--global--motion--duration--slide-out--default: var(--pf-t--global--motion--duration--xl); --pf-t--global--motion--duration--slide-out--long: var(--pf-t--global--motion--duration--2xl); --pf-t--global--motion--duration--slide-out--short: var(--pf-t--global--motion--duration--lg); --pf-t--global--spacer--action--horizontal--compact: var(--pf-t--global--spacer--md); --pf-t--global--spacer--action--horizontal--default: var(--pf-t--global--spacer--lg); --pf-t--global--spacer--action--horizontal--plain--compact: var(--pf-t--global--spacer--xs); --pf-t--global--spacer--action--horizontal--plain--default: var(--pf-t--global--spacer--sm); --pf-t--global--spacer--action--horizontal--spacious: var(--pf-t--global--spacer--xl); --pf-t--global--spacer--control--horizontal--compact: var(--pf-t--global--spacer--sm); --pf-t--global--spacer--control--horizontal--default: var(--pf-t--global--spacer--md); --pf-t--global--spacer--control--horizontal--plain: var(--pf-t--global--spacer--sm); --pf-t--global--spacer--control--horizontal--spacious: var(--pf-t--global--spacer--lg); --pf-t--global--spacer--control--vertical--compact: var(--pf-t--global--spacer--xs); --pf-t--global--spacer--control--vertical--default: var(--pf-t--global--spacer--sm); --pf-t--global--spacer--control--vertical--plain: var(--pf-t--global--spacer--sm); --pf-t--global--spacer--control--vertical--spacious: var(--pf-t--global--spacer--md); --pf-t--global--spacer--gap--action-to-action--default: var(--pf-t--global--spacer--md); --pf-t--global--spacer--gap--action-to-action--plain: var(--pf-t--global--spacer--xs); --pf-t--global--spacer--gap--control-to-control--default: var(--pf-t--global--spacer--xs); --pf-t--global--spacer--gap--group--horizontal: var(--pf-t--global--spacer--md); --pf-t--global--spacer--gap--group--vertical: var(--pf-t--global--spacer--sm); --pf-t--global--spacer--gap--group-to-group--horizontal--compact: var(--pf-t--global--spacer--sm); --pf-t--global--spacer--gap--group-to-group--horizontal--default: var(--pf-t--global--spacer--2xl); --pf-t--global--spacer--gap--group-to-group--vertical--compact: var(--pf-t--global--spacer--md); --pf-t--global--spacer--gap--group-to-group--vertical--default: var(--pf-t--global--spacer--lg); --pf-t--global--spacer--gap--text-to-element--compact: var(--pf-t--global--spacer--xs); --pf-t--global--spacer--gap--text-to-element--default: var(--pf-t--global--spacer--sm); --pf-t--global--spacer--gutter--default: var(--pf-t--global--spacer--md); --pf-t--global--spacer--inset--page-chrome: var(--pf-t--global--spacer--lg); --pf-t--global--text--color--disabled: var(--pf-t--global--color--disabled--200); --pf-t--global--text--color--inverse: var(--pf-t--global--text--color--300); --pf-t--global--text--color--link--default: var(--pf-t--global--text--color--link--100); --pf-t--global--text--color--link--hover: var(--pf-t--global--text--color--link--200); --pf-t--global--text--color--link--visited: var(--pf-t--global--text--color--link--300); --pf-t--global--text--color--on-disabled: var(--pf-t--global--color--disabled--300); --pf-t--global--text--color--on-highlight: var(--pf-t--global--text--color--100); --pf-t--global--text--color--regular: var(--pf-t--global--text--color--100); --pf-t--global--text--color--required: var(--pf-t--global--text--color--400); --pf-t--global--text--color--status--warning--clicked: var(--pf-t--global--color--status--warning--300); --pf-t--global--text--color--status--warning--default: var(--pf-t--global--color--status--warning--200); --pf-t--global--text--color--status--warning--hover: var(--pf-t--global--color--status--warning--300); --pf-t--global--text--color--subtle: var(--pf-t--global--text--color--200); --pf-t--global--text-decoration--offset--default: var(--pf-t--global--spacer--xs); --pf-t--global--text-decoration--width--default: var(--pf-t--global--border--width--regular); --pf-t--global--background--color--control--default: var(--pf-t--global--background--color--primary--default); --pf-t--global--border--color--alt: var(--pf-t--global--background--color--primary--default); --pf-t--global--border--color--brand--clicked: var(--pf-t--global--color--brand--clicked); --pf-t--global--border--color--brand--default: var(--pf-t--global--color--brand--default); --pf-t--global--border--color--brand--hover: var(--pf-t--global--color--brand--hover); --pf-t--global--border--color--main--default: var(--pf-t--global--background--color--primary--default); --pf-t--global--border--color--status--custom--clicked: var(--pf-t--global--color--status--custom--clicked); --pf-t--global--border--color--status--custom--default: var(--pf-t--global--color--status--custom--default); --pf-t--global--border--color--status--custom--hover: var(--pf-t--global--color--status--custom--hover); --pf-t--global--border--color--status--danger--clicked: var(--pf-t--global--color--status--danger--clicked); --pf-t--global--border--color--status--danger--default: var(--pf-t--global--color--status--danger--default); --pf-t--global--border--color--status--danger--hover: var(--pf-t--global--color--status--danger--hover); --pf-t--global--border--color--status--info--clicked: var(--pf-t--global--color--status--info--clicked); --pf-t--global--border--color--status--info--default: var(--pf-t--global--color--status--info--default); --pf-t--global--border--color--status--info--hover: var(--pf-t--global--color--status--info--hover); --pf-t--global--border--color--status--success--clicked: var(--pf-t--global--color--status--success--clicked); --pf-t--global--border--color--status--success--default: var(--pf-t--global--color--status--success--default); --pf-t--global--border--color--status--success--hover: var(--pf-t--global--color--status--success--hover); --pf-t--global--color--status--read--on-primary: var(--pf-t--global--background--color--secondary--default); --pf-t--global--color--status--unread--attention--clicked: var(--pf-t--global--color--status--danger--clicked); --pf-t--global--color--status--unread--attention--default: var(--pf-t--global--color--status--danger--default); --pf-t--global--color--status--unread--attention--hover: var(--pf-t--global--color--status--danger--hover); --pf-t--global--color--status--unread--clicked: var(--pf-t--global--color--brand--clicked); --pf-t--global--color--status--unread--default: var(--pf-t--global--color--brand--default); --pf-t--global--color--status--unread--hover: var(--pf-t--global--color--brand--hover); --pf-t--global--icon--color--brand--clicked: var(--pf-t--global--color--brand--clicked); --pf-t--global--icon--color--brand--default: var(--pf-t--global--color--brand--default); --pf-t--global--icon--color--brand--hover: var(--pf-t--global--color--brand--hover); --pf-t--global--icon--color--favorite--clicked: var(--pf-t--global--color--favorite--clicked); --pf-t--global--icon--color--favorite--default: var(--pf-t--global--color--favorite--default); --pf-t--global--icon--color--favorite--hover: var(--pf-t--global--color--favorite--hover); --pf-t--global--icon--color--nonstatus--on-blue--clicked: var(--pf-t--global--icon--color--regular); --pf-t--global--icon--color--nonstatus--on-blue--default: var(--pf-t--global--icon--color--regular); --pf-t--global--icon--color--nonstatus--on-blue--hover: var(--pf-t--global--icon--color--regular); --pf-t--global--icon--color--nonstatus--on-gray--clicked: var(--pf-t--global--icon--color--regular); --pf-t--global--icon--color--nonstatus--on-gray--default: var(--pf-t--global--icon--color--regular); --pf-t--global--icon--color--nonstatus--on-gray--hover: var(--pf-t--global--icon--color--regular); --pf-t--global--icon--color--nonstatus--on-green--clicked: var(--pf-t--global--icon--color--regular); --pf-t--global--icon--color--nonstatus--on-green--default: var(--pf-t--global--icon--color--regular); --pf-t--global--icon--color--nonstatus--on-green--hover: var(--pf-t--global--icon--color--regular); --pf-t--global--icon--color--nonstatus--on-orange--clicked: var(--pf-t--global--icon--color--regular); --pf-t--global--icon--color--nonstatus--on-orange--default: var(--pf-t--global--icon--color--regular); --pf-t--global--icon--color--nonstatus--on-orange--hover: var(--pf-t--global--icon--color--regular); --pf-t--global--icon--color--nonstatus--on-orangered--clicked: var(--pf-t--global--icon--color--regular); --pf-t--global--icon--color--nonstatus--on-orangered--default: var(--pf-t--global--icon--color--regular); --pf-t--global--icon--color--nonstatus--on-orangered--hover: var(--pf-t--global--icon--color--regular); --pf-t--global--icon--color--nonstatus--on-purple--clicked: var(--pf-t--global--icon--color--regular); --pf-t--global--icon--color--nonstatus--on-purple--default: var(--pf-t--global--icon--color--regular); --pf-t--global--icon--color--nonstatus--on-purple--hover: var(--pf-t--global--icon--color--regular); --pf-t--global--icon--color--nonstatus--on-red--clicked: var(--pf-t--global--icon--color--regular); --pf-t--global--icon--color--nonstatus--on-red--default: var(--pf-t--global--icon--color--regular); --pf-t--global--icon--color--nonstatus--on-red--hover: var(--pf-t--global--icon--color--regular); --pf-t--global--icon--color--nonstatus--on-teal--clicked: var(--pf-t--global--icon--color--regular); --pf-t--global--icon--color--nonstatus--on-teal--default: var(--pf-t--global--icon--color--regular); --pf-t--global--icon--color--nonstatus--on-teal--hover: var(--pf-t--global--icon--color--regular); --pf-t--global--icon--color--nonstatus--on-yellow--clicked: var(--pf-t--global--icon--color--regular); --pf-t--global--icon--color--nonstatus--on-yellow--default: var(--pf-t--global--icon--color--regular); --pf-t--global--icon--color--nonstatus--on-yellow--hover: var(--pf-t--global--icon--color--regular); --pf-t--global--icon--color--on-brand--clicked: var(--pf-t--global--icon--color--inverse); --pf-t--global--icon--color--on-brand--default: var(--pf-t--global--icon--color--inverse); --pf-t--global--icon--color--on-brand--hover: var(--pf-t--global--icon--color--inverse); --pf-t--global--icon--color--status--custom--clicked: var(--pf-t--global--color--status--custom--clicked); --pf-t--global--icon--color--status--custom--default: var(--pf-t--global--color--status--custom--default); --pf-t--global--icon--color--status--custom--hover: var(--pf-t--global--color--status--custom--hover); --pf-t--global--icon--color--status--danger--clicked: var(--pf-t--global--color--status--danger--clicked); --pf-t--global--icon--color--status--danger--default: var(--pf-t--global--color--status--danger--default); --pf-t--global--icon--color--status--danger--hover: var(--pf-t--global--color--status--danger--hover); --pf-t--global--icon--color--status--info--clicked: var(--pf-t--global--color--status--info--clicked); --pf-t--global--icon--color--status--info--default: var(--pf-t--global--color--status--info--default); --pf-t--global--icon--color--status--info--hover: var(--pf-t--global--color--status--info--hover); --pf-t--global--icon--color--status--on-custom--clicked: var(--pf-t--global--icon--color--inverse); --pf-t--global--icon--color--status--on-custom--default: var(--pf-t--global--icon--color--inverse); --pf-t--global--icon--color--status--on-custom--hover: var(--pf-t--global--icon--color--inverse); --pf-t--global--icon--color--status--on-danger--clicked: var(--pf-t--global--icon--color--inverse); --pf-t--global--icon--color--status--on-danger--default: var(--pf-t--global--icon--color--inverse); --pf-t--global--icon--color--status--on-danger--hover: var(--pf-t--global--icon--color--inverse); --pf-t--global--icon--color--status--on-info--clicked: var(--pf-t--global--icon--color--inverse); --pf-t--global--icon--color--status--on-info--default: var(--pf-t--global--icon--color--inverse); --pf-t--global--icon--color--status--on-info--hover: var(--pf-t--global--icon--color--inverse); --pf-t--global--icon--color--status--on-success--clicked: var(--pf-t--global--icon--color--inverse); --pf-t--global--icon--color--status--on-success--default: var(--pf-t--global--icon--color--inverse); --pf-t--global--icon--color--status--on-success--hover: var(--pf-t--global--icon--color--inverse); --pf-t--global--icon--color--status--on-warning--clicked: var(--pf-t--global--icon--color--regular); --pf-t--global--icon--color--status--on-warning--default: var(--pf-t--global--icon--color--regular); --pf-t--global--icon--color--status--on-warning--hover: var(--pf-t--global--icon--color--regular); --pf-t--global--icon--color--status--success--clicked: var(--pf-t--global--color--status--success--clicked); --pf-t--global--icon--color--status--success--default: var(--pf-t--global--color--status--success--default); --pf-t--global--icon--color--status--success--hover: var(--pf-t--global--color--status--success--hover); --pf-t--global--icon--color--status--unread--on-attention--clicked: var(--pf-t--global--icon--color--inverse); --pf-t--global--icon--color--status--unread--on-attention--default: var(--pf-t--global--icon--color--inverse); --pf-t--global--icon--color--status--unread--on-attention--hover: var(--pf-t--global--icon--color--inverse); --pf-t--global--icon--color--status--unread--on-default--clicked: var(--pf-t--global--icon--color--inverse); --pf-t--global--icon--color--status--unread--on-default--default: var(--pf-t--global--icon--color--inverse); --pf-t--global--icon--color--status--unread--on-default--hover: var(--pf-t--global--icon--color--inverse); --pf-t--global--icon--size--font--body--default: var(--pf-t--global--font--size--body--default); --pf-t--global--icon--size--font--body--lg: var(--pf-t--global--font--size--body--lg); --pf-t--global--icon--size--font--body--sm: var(--pf-t--global--font--size--body--sm); --pf-t--global--icon--size--font--heading--h1: var(--pf-t--global--font--size--heading--h1); --pf-t--global--icon--size--font--heading--h2: var(--pf-t--global--font--size--heading--h2); --pf-t--global--icon--size--font--heading--h3: var(--pf-t--global--font--size--heading--h3); --pf-t--global--icon--size--font--heading--h4: var(--pf-t--global--font--size--heading--h4); --pf-t--global--icon--size--font--heading--h5: var(--pf-t--global--font--size--heading--h5); --pf-t--global--icon--size--font--heading--h6: var(--pf-t--global--font--size--heading--h6); --pf-t--global--text--color--brand--clicked: var(--pf-t--global--color--brand--clicked); --pf-t--global--text--color--brand--default: var(--pf-t--global--color--brand--default); --pf-t--global--text--color--brand--hover: var(--pf-t--global--color--brand--hover); --pf-t--global--text--color--nonstatus--on-blue--clicked: var(--pf-t--global--text--color--regular); --pf-t--global--text--color--nonstatus--on-blue--default: var(--pf-t--global--text--color--regular); --pf-t--global--text--color--nonstatus--on-blue--hover: var(--pf-t--global--text--color--regular); --pf-t--global--text--color--nonstatus--on-gray--clicked: var(--pf-t--global--text--color--regular); --pf-t--global--text--color--nonstatus--on-gray--default: var(--pf-t--global--text--color--regular); --pf-t--global--text--color--nonstatus--on-gray--hover: var(--pf-t--global--text--color--regular); --pf-t--global--text--color--nonstatus--on-green--clicked: var(--pf-t--global--text--color--regular); --pf-t--global--text--color--nonstatus--on-green--default: var(--pf-t--global--text--color--regular); --pf-t--global--text--color--nonstatus--on-green--hover: var(--pf-t--global--text--color--regular); --pf-t--global--text--color--nonstatus--on-orange--clicked: var(--pf-t--global--text--color--regular); --pf-t--global--text--color--nonstatus--on-orange--default: var(--pf-t--global--text--color--regular); --pf-t--global--text--color--nonstatus--on-orange--hover: var(--pf-t--global--text--color--regular); --pf-t--global--text--color--nonstatus--on-orangered--clicked: var(--pf-t--global--text--color--regular); --pf-t--global--text--color--nonstatus--on-orangered--default: var(--pf-t--global--text--color--regular); --pf-t--global--text--color--nonstatus--on-orangered--hover: var(--pf-t--global--text--color--regular); --pf-t--global--text--color--nonstatus--on-purple--clicked: var(--pf-t--global--text--color--regular); --pf-t--global--text--color--nonstatus--on-purple--default: var(--pf-t--global--text--color--regular); --pf-t--global--text--color--nonstatus--on-purple--hover: var(--pf-t--global--text--color--regular); --pf-t--global--text--color--nonstatus--on-red--clicked: var(--pf-t--global--text--color--regular); --pf-t--global--text--color--nonstatus--on-red--default: var(--pf-t--global--text--color--regular); --pf-t--global--text--color--nonstatus--on-red--hover: var(--pf-t--global--text--color--regular); --pf-t--global--text--color--nonstatus--on-teal--clicked: var(--pf-t--global--text--color--regular); --pf-t--global--text--color--nonstatus--on-teal--default: var(--pf-t--global--text--color--regular); --pf-t--global--text--color--nonstatus--on-teal--hover: var(--pf-t--global--text--color--regular); --pf-t--global--text--color--nonstatus--on-yellow--clicked: var(--pf-t--global--text--color--regular); --pf-t--global--text--color--nonstatus--on-yellow--default: var(--pf-t--global--text--color--regular); --pf-t--global--text--color--nonstatus--on-yellow--hover: var(--pf-t--global--text--color--regular); --pf-t--global--text--color--on-brand--clicked: var(--pf-t--global--text--color--inverse); --pf-t--global--text--color--on-brand--default: var(--pf-t--global--text--color--inverse); --pf-t--global--text--color--on-brand--hover: var(--pf-t--global--text--color--inverse); --pf-t--global--text--color--placeholder: var(--pf-t--global--text--color--subtle); --pf-t--global--text--color--status--custom--clicked: var(--pf-t--global--color--status--custom--clicked); --pf-t--global--text--color--status--custom--default: var(--pf-t--global--color--status--custom--default); --pf-t--global--text--color--status--custom--hover: var(--pf-t--global--color--status--custom--hover); --pf-t--global--text--color--status--danger--clicked: var(--pf-t--global--color--status--danger--clicked); --pf-t--global--text--color--status--danger--default: var(--pf-t--global--color--status--danger--default); --pf-t--global--text--color--status--danger--hover: var(--pf-t--global--color--status--danger--hover); --pf-t--global--text--color--status--info--clicked: var(--pf-t--global--color--status--info--clicked); --pf-t--global--text--color--status--info--default: var(--pf-t--global--color--status--info--default); --pf-t--global--text--color--status--info--hover: var(--pf-t--global--color--status--info--hover); --pf-t--global--text--color--status--on-custom--clicked: var(--pf-t--global--text--color--inverse); --pf-t--global--text--color--status--on-custom--default: var(--pf-t--global--text--color--inverse); --pf-t--global--text--color--status--on-custom--hover: var(--pf-t--global--text--color--inverse); --pf-t--global--text--color--status--on-danger--clicked: var(--pf-t--global--icon--color--inverse); --pf-t--global--text--color--status--on-danger--default: var(--pf-t--global--text--color--inverse); --pf-t--global--text--color--status--on-danger--hover: var(--pf-t--global--text--color--inverse); --pf-t--global--text--color--status--on-info--clicked: var(--pf-t--global--text--color--inverse); --pf-t--global--text--color--status--on-info--default: var(--pf-t--global--text--color--inverse); --pf-t--global--text--color--status--on-info--hover: var(--pf-t--global--text--color--inverse); --pf-t--global--text--color--status--on-success--clicked: var(--pf-t--global--text--color--inverse); --pf-t--global--text--color--status--on-success--default: var(--pf-t--global--text--color--inverse); --pf-t--global--text--color--status--on-success--hover: var(--pf-t--global--text--color--inverse); --pf-t--global--text--color--status--on-warning--clicked: var(--pf-t--global--text--color--regular); --pf-t--global--text--color--status--on-warning--default: var(--pf-t--global--text--color--regular); --pf-t--global--text--color--status--on-warning--hover: var(--pf-t--global--text--color--regular); --pf-t--global--text--color--status--success--clicked: var(--pf-t--global--color--status--success--clicked); --pf-t--global--text--color--status--success--default: var(--pf-t--global--color--status--success--default); --pf-t--global--text--color--status--success--hover: var(--pf-t--global--color--status--success--hover); --pf-t--global--text--color--status--unread--on-attention--clicked: var(--pf-t--global--text--color--inverse); --pf-t--global--text--color--status--unread--on-attention--default: var(--pf-t--global--text--color--inverse); --pf-t--global--text--color--status--unread--on-attention--hover: var(--pf-t--global--text--color--inverse); --pf-t--global--text--color--status--unread--on-default--clicked: var(--pf-t--global--text--color--inverse); --pf-t--global--text--color--status--unread--on-default--default: var(--pf-t--global--text--color--inverse); --pf-t--global--text--color--status--unread--on-default--hover: var(--pf-t--global--text--color--inverse); --pf-t--global--color--status--read--on-secondary: var(--pf-t--global--background--color--control--default); --pf-t--global--font--size--heading--xs: var(--pf-t--global--font--size--md); --pf-t--global--font--size--heading--sm: var(--pf-t--global--font--size--lg); --pf-t--global--font--size--heading--md: var(--pf-t--global--font--size--xl); --pf-t--global--font--size--heading--lg: var(--pf-t--global--font--size--2xl); --pf-t--global--font--size--heading--xl: var(--pf-t--global--font--size--3xl); --pf-t--global--font--size--heading--2xl: var(--pf-t--global--font--size--4xl); --pf-t--global--font--family--body--legacy: redhattext, helvetica, arial, sans-serif; --pf-t--global--font--family--heading--legacy: redhatdisplay, helvetica, arial, sans-serif; --pf-t--global--font--family--mono--legacy: redhatmono, liberationmono, consolas, sfmono-regular, menlo, monaco, courier new, monospace; --pf-t--global--font--weight--body--legacy: 400; --pf-t--global--font--weight--body--bold--legacy: 700; --pf-t--global--font--weight--heading--legacy: 400; --pf-t--global--font--weight--heading--bold--legacy: 700; --pf-t--global--box-shadow--sm: var(--pf-t--global--box-shadow--X--sm--default) var(--pf-t--global--box-shadow--Y--sm--default) var(--pf-t--global--box-shadow--blur--sm) var(--pf-t--global--box-shadow--spread--sm--default) var(--pf-t--global--box-shadow--color--sm--default); --pf-t--global--box-shadow--sm--top: var(--pf-t--global--box-shadow--X--sm--top) var(--pf-t--global--box-shadow--Y--sm--top) var(--pf-t--global--box-shadow--blur--sm) var(--pf-t--global--box-shadow--spread--sm--directional) var(--pf-t--global--box-shadow--color--sm--directional); --pf-t--global--box-shadow--sm--bottom: var(--pf-t--global--box-shadow--X--sm--bottom) var(--pf-t--global--box-shadow--Y--sm--bottom) var(--pf-t--global--box-shadow--blur--sm) var(--pf-t--global--box-shadow--spread--sm--directional) var(--pf-t--global--box-shadow--color--sm--directional); --pf-t--global--box-shadow--sm--left: var(--pf-t--global--box-shadow--X--sm--left) var(--pf-t--global--box-shadow--Y--sm--left) var(--pf-t--global--box-shadow--blur--sm) var(--pf-t--global--box-shadow--spread--sm--directional) var(--pf-t--global--box-shadow--color--sm--directional); --pf-t--global--box-shadow--sm--right: var(--pf-t--global--box-shadow--X--sm--right) var(--pf-t--global--box-shadow--Y--sm--right) var(--pf-t--global--box-shadow--blur--sm) var(--pf-t--global--box-shadow--spread--sm--directional) var(--pf-t--global--box-shadow--color--sm--directional); --pf-t--global--box-shadow--md: var(--pf-t--global--box-shadow--X--md--default) var(--pf-t--global--box-shadow--Y--md--default) var(--pf-t--global--box-shadow--blur--md) var(--pf-t--global--box-shadow--spread--md--default) var(--pf-t--global--box-shadow--color--md--default); --pf-t--global--box-shadow--md--top: var(--pf-t--global--box-shadow--X--md--top) var(--pf-t--global--box-shadow--Y--md--top) var(--pf-t--global--box-shadow--blur--md) var(--pf-t--global--box-shadow--spread--md--directional) var(--pf-t--global--box-shadow--color--md--directional); --pf-t--global--box-shadow--md--bottom: var(--pf-t--global--box-shadow--X--md--bottom) var(--pf-t--global--box-shadow--Y--md--bottom) var(--pf-t--global--box-shadow--blur--md) var(--pf-t--global--box-shadow--spread--md--directional) var(--pf-t--global--box-shadow--color--md--directional); --pf-t--global--box-shadow--md--left: var(--pf-t--global--box-shadow--X--md--left) var(--pf-t--global--box-shadow--Y--md--left) var(--pf-t--global--box-shadow--blur--md) var(--pf-t--global--box-shadow--spread--md--directional) var(--pf-t--global--box-shadow--color--md--directional); --pf-t--global--box-shadow--md--right: var(--pf-t--global--box-shadow--X--md--right) var(--pf-t--global--box-shadow--Y--md--right) var(--pf-t--global--box-shadow--blur--md) var(--pf-t--global--box-shadow--spread--md--directional) var(--pf-t--global--box-shadow--color--md--directional); --pf-t--global--box-shadow--lg: var(--pf-t--global--box-shadow--X--lg--default) var(--pf-t--global--box-shadow--Y--lg--default) var(--pf-t--global--box-shadow--blur--lg) var(--pf-t--global--box-shadow--spread--lg--default) var(--pf-t--global--box-shadow--color--lg--default); --pf-t--global--box-shadow--lg--top: var(--pf-t--global--box-shadow--X--lg--top) var(--pf-t--global--box-shadow--Y--lg--top) var(--pf-t--global--box-shadow--blur--lg) var(--pf-t--global--box-shadow--spread--lg--directional) var(--pf-t--global--box-shadow--color--lg--directional); --pf-t--global--box-shadow--lg--bottom: var(--pf-t--global--box-shadow--X--lg--bottom) var(--pf-t--global--box-shadow--Y--lg--bottom) var(--pf-t--global--box-shadow--blur--lg) var(--pf-t--global--box-shadow--spread--lg--directional) var(--pf-t--global--box-shadow--color--lg--directional); --pf-t--global--box-shadow--lg--left: var(--pf-t--global--box-shadow--X--lg--left) var(--pf-t--global--box-shadow--Y--lg--left) var(--pf-t--global--box-shadow--blur--lg) var(--pf-t--global--box-shadow--spread--lg--directional) var(--pf-t--global--box-shadow--color--lg--directional); --pf-t--global--box-shadow--lg--right: var(--pf-t--global--box-shadow--X--lg--right) var(--pf-t--global--box-shadow--Y--lg--right) var(--pf-t--global--box-shadow--blur--lg) var(--pf-t--global--box-shadow--spread--lg--directional) var(--pf-t--global--box-shadow--color--lg--directional); --pf-t--global--list-style: disc outside; --pf-t--temp--dev--tbd: #BC11E0; } :root:where(.pf-v6-theme-dark) { --pf-t--global--background--color--action--plain--default: rgba(0, 0, 0, 0.0000); --pf-t--global--border--color--high-contrast: rgba(255, 255, 255, 0.0000); --pf-t--global--dark--background--color--500: rgba(21, 21, 21, 0.8000); --pf-t--global--dark--background--color--600: rgba(199, 199, 199, 0.1500); --pf-t--global--dark--box-shadow--color--100: rgba(0, 0, 0, 0.5000); --pf-t--global--dark--box-shadow--color--200: rgba(0, 0, 0, 0.7000); --pf-t--global--background--color--action--plain--clicked: var(--pf-t--global--dark--background--color--600); --pf-t--global--background--color--action--plain--hover: var(--pf-t--global--dark--background--color--600); --pf-t--global--background--color--backdrop--default: var(--pf-t--global--dark--background--color--500); --pf-t--global--background--color--tertiary--default: var(--pf-t--global--dark--background--color--600); --pf-t--global--box-shadow--color--lg--default: var(--pf-t--global--dark--box-shadow--color--100); --pf-t--global--box-shadow--color--lg--directional: var(--pf-t--global--dark--box-shadow--color--200); --pf-t--global--box-shadow--color--md--default: var(--pf-t--global--dark--box-shadow--color--100); --pf-t--global--box-shadow--color--md--directional: var(--pf-t--global--dark--box-shadow--color--200); --pf-t--global--box-shadow--color--sm--default: var(--pf-t--global--dark--box-shadow--color--100); --pf-t--global--box-shadow--color--sm--directional: var(--pf-t--global--dark--box-shadow--color--200); --pf-t--global--dark--background--color--100: var(--pf-t--color--gray--95); --pf-t--global--dark--background--color--200: var(--pf-t--color--gray--80); --pf-t--global--dark--background--color--300: var(--pf-t--color--gray--70); --pf-t--global--dark--background--color--400: var(--pf-t--color--gray--10); --pf-t--global--dark--background--color--450: var(--pf-t--color--gray--20); --pf-t--global--dark--background--color--highlight--100: var(--pf-t--color--yellow--20); --pf-t--global--dark--background--color--highlight--200: var(--pf-t--color--yellow--30); --pf-t--global--dark--border--color--100: var(--pf-t--color--gray--50); --pf-t--global--dark--border--color--200: var(--pf-t--color--gray--40); --pf-t--global--dark--border--color--300: var(--pf-t--color--gray--30); --pf-t--global--dark--border--color--50: var(--pf-t--color--gray--60); --pf-t--global--dark--color--brand--100: var(--pf-t--color--blue--30); --pf-t--global--dark--color--brand--200: var(--pf-t--color--blue--20); --pf-t--global--dark--color--brand--300: var(--pf-t--color--blue--10); --pf-t--global--dark--color--disabled--100: var(--pf-t--color--gray--40); --pf-t--global--dark--color--disabled--200: var(--pf-t--color--gray--50); --pf-t--global--dark--color--disabled--300: var(--pf-t--color--gray--70); --pf-t--global--dark--color--disabled--400: var(--pf-t--color--gray--90); --pf-t--global--dark--color--favorite--100: var(--pf-t--color--yellow--30); --pf-t--global--dark--color--favorite--200: var(--pf-t--color--yellow--20); --pf-t--global--dark--color--nonstatus--blue--100: var(--pf-t--color--blue--30); --pf-t--global--dark--color--nonstatus--blue--200: var(--pf-t--color--blue--20); --pf-t--global--dark--color--nonstatus--blue--300: var(--pf-t--color--blue--10); --pf-t--global--dark--color--nonstatus--gray--100: var(--pf-t--color--gray--60); --pf-t--global--dark--color--nonstatus--gray--200: var(--pf-t--color--gray--50); --pf-t--global--dark--color--nonstatus--gray--300: var(--pf-t--color--gray--40); --pf-t--global--dark--color--nonstatus--gray--50: var(--pf-t--color--gray--70); --pf-t--global--dark--color--nonstatus--green--100: var(--pf-t--color--green--30); --pf-t--global--dark--color--nonstatus--green--200: var(--pf-t--color--green--20); --pf-t--global--dark--color--nonstatus--green--300: var(--pf-t--color--green--10); --pf-t--global--dark--color--nonstatus--orange--100: var(--pf-t--color--orange--30); --pf-t--global--dark--color--nonstatus--orange--200: var(--pf-t--color--orange--20); --pf-t--global--dark--color--nonstatus--orange--300: var(--pf-t--color--orange--10); --pf-t--global--dark--color--nonstatus--orangered--100: var(--pf-t--color--red-orange--30); --pf-t--global--dark--color--nonstatus--orangered--200: var(--pf-t--color--red-orange--20); --pf-t--global--dark--color--nonstatus--orangered--300: var(--pf-t--color--red-orange--10); --pf-t--global--dark--color--nonstatus--purple--100: var(--pf-t--color--purple--30); --pf-t--global--dark--color--nonstatus--purple--200: var(--pf-t--color--purple--20); --pf-t--global--dark--color--nonstatus--purple--300: var(--pf-t--color--purple--10); --pf-t--global--dark--color--nonstatus--red--100: var(--pf-t--color--red--30); --pf-t--global--dark--color--nonstatus--red--200: var(--pf-t--color--red--20); --pf-t--global--dark--color--nonstatus--red--300: var(--pf-t--color--red--10); --pf-t--global--dark--color--nonstatus--teal--100: var(--pf-t--color--teal--30); --pf-t--global--dark--color--nonstatus--teal--200: var(--pf-t--color--teal--20); --pf-t--global--dark--color--nonstatus--teal--300: var(--pf-t--color--teal--10); --pf-t--global--dark--color--nonstatus--yellow--100: var(--pf-t--color--yellow--30); --pf-t--global--dark--color--nonstatus--yellow--200: var(--pf-t--color--yellow--20); --pf-t--global--dark--color--nonstatus--yellow--300: var(--pf-t--color--yellow--10); --pf-t--global--dark--color--severity--critical--100: var(--pf-t--color--red-orange--50); --pf-t--global--dark--color--severity--critical--200: var(--pf-t--color--red-orange--40); --pf-t--global--dark--color--severity--important--100: var(--pf-t--color--orange--40); --pf-t--global--dark--color--severity--minor--100: var(--pf-t--color--gray--30); --pf-t--global--dark--color--severity--moderate--100: var(--pf-t--color--yellow--30); --pf-t--global--dark--color--severity--none--100: var(--pf-t--color--blue--30); --pf-t--global--dark--color--severity--undefined--100: var(--pf-t--color--gray--40); --pf-t--global--dark--color--status--custom--100: var(--pf-t--color--teal--40); --pf-t--global--dark--color--status--custom--200: var(--pf-t--color--teal--30); --pf-t--global--dark--color--status--custom--300: var(--pf-t--color--teal--20); --pf-t--global--dark--color--status--danger--100: var(--pf-t--color--red-orange--50); --pf-t--global--dark--color--status--danger--200: var(--pf-t--color--red-orange--40); --pf-t--global--dark--color--status--danger--250: var(--pf-t--color--red-orange--30); --pf-t--global--dark--color--status--danger--300: var(--pf-t--color--red-orange--20); --pf-t--global--dark--color--status--info--100: var(--pf-t--color--purple--30); --pf-t--global--dark--color--status--info--200: var(--pf-t--color--purple--20); --pf-t--global--dark--color--status--info--300: var(--pf-t--color--purple--10); --pf-t--global--dark--color--status--success--100: var(--pf-t--color--green--40); --pf-t--global--dark--color--status--success--200: var(--pf-t--color--green--30); --pf-t--global--dark--color--status--success--300: var(--pf-t--color--green--20); --pf-t--global--dark--color--status--warning--100: var(--pf-t--color--yellow--30); --pf-t--global--dark--color--status--warning--200: var(--pf-t--color--yellow--20); --pf-t--global--dark--focus-ring--color--100: var(--pf-t--color--blue--30); --pf-t--global--dark--icon--color--100: var(--pf-t--color--gray--10); --pf-t--global--dark--icon--color--200: var(--pf-t--color--gray--40); --pf-t--global--dark--icon--color--300: var(--pf-t--color--gray--90); --pf-t--global--dark--text--color--100: var(--pf-t--color--white); --pf-t--global--dark--text--color--200: var(--pf-t--color--gray--30); --pf-t--global--dark--text--color--300: var(--pf-t--color--gray--90); --pf-t--global--dark--text--color--400: var(--pf-t--color--red-orange--30); --pf-t--global--dark--text--color--link--100: var(--pf-t--color--blue--20); --pf-t--global--dark--text--color--link--200: var(--pf-t--color--blue--10); --pf-t--global--dark--text--color--link--300: var(--pf-t--color--purple--30); --pf-t--global--dark--text--color--link--400: var(--pf-t--color--purple--20); --pf-t--global--background--color--action--plain--alt--clicked: var(--pf-t--global--dark--background--color--200); --pf-t--global--background--color--action--plain--alt--hover: var(--pf-t--global--dark--background--color--200); --pf-t--global--background--color--control--default: var(--pf-t--global--dark--background--color--300); --pf-t--global--background--color--control--read-only: var(--pf-t--global--dark--background--color--300); --pf-t--global--background--color--disabled--default: var(--pf-t--global--dark--color--disabled--100); --pf-t--global--background--color--floating--clicked: var(--pf-t--global--dark--background--color--200); --pf-t--global--background--color--floating--default: var(--pf-t--global--dark--background--color--300); --pf-t--global--background--color--floating--hover: var(--pf-t--global--dark--background--color--200); --pf-t--global--background--color--highlight--clicked: var(--pf-t--global--dark--background--color--highlight--200); --pf-t--global--background--color--highlight--default: var(--pf-t--global--dark--background--color--highlight--100); --pf-t--global--background--color--inverse--clicked: var(--pf-t--global--dark--background--color--450); --pf-t--global--background--color--inverse--default: var(--pf-t--global--dark--background--color--400); --pf-t--global--background--color--inverse--hover: var(--pf-t--global--dark--background--color--450); --pf-t--global--background--color--primary--clicked: var(--pf-t--global--dark--background--color--300); --pf-t--global--background--color--primary--default: var(--pf-t--global--dark--background--color--200); --pf-t--global--background--color--primary--hover: var(--pf-t--global--dark--background--color--300); --pf-t--global--background--color--secondary--clicked: var(--pf-t--global--dark--background--color--200); --pf-t--global--background--color--secondary--default: var(--pf-t--global--dark--background--color--100); --pf-t--global--background--color--secondary--hover: var(--pf-t--global--dark--background--color--200); --pf-t--global--border--color--clicked: var(--pf-t--global--dark--color--brand--200); --pf-t--global--border--color--control--read-only: var(--pf-t--global--dark--border--color--50); --pf-t--global--border--color--default: var(--pf-t--global--dark--border--color--200); --pf-t--global--border--color--disabled: var(--pf-t--global--dark--color--disabled--200); --pf-t--global--border--color--hover: var(--pf-t--global--dark--color--brand--100); --pf-t--global--border--color--nonstatus--blue--clicked: var(--pf-t--global--dark--color--nonstatus--blue--200); --pf-t--global--border--color--nonstatus--blue--default: var(--pf-t--global--dark--color--nonstatus--blue--100); --pf-t--global--border--color--nonstatus--blue--hover: var(--pf-t--global--dark--color--nonstatus--blue--200); --pf-t--global--border--color--nonstatus--gray--clicked: var(--pf-t--global--dark--color--nonstatus--gray--300); --pf-t--global--border--color--nonstatus--gray--default: var(--pf-t--global--dark--color--nonstatus--gray--200); --pf-t--global--border--color--nonstatus--gray--hover: var(--pf-t--global--dark--color--nonstatus--gray--300); --pf-t--global--border--color--nonstatus--green--clicked: var(--pf-t--global--dark--color--nonstatus--green--200); --pf-t--global--border--color--nonstatus--green--default: var(--pf-t--global--dark--color--nonstatus--green--100); --pf-t--global--border--color--nonstatus--green--hover: var(--pf-t--global--dark--color--nonstatus--green--200); --pf-t--global--border--color--nonstatus--orange--clicked: var(--pf-t--global--dark--color--nonstatus--orange--200); --pf-t--global--border--color--nonstatus--orange--default: var(--pf-t--global--dark--color--nonstatus--orange--100); --pf-t--global--border--color--nonstatus--orange--hover: var(--pf-t--global--dark--color--nonstatus--orange--200); --pf-t--global--border--color--nonstatus--orangered--clicked: var(--pf-t--global--dark--color--nonstatus--orangered--200); --pf-t--global--border--color--nonstatus--orangered--default: var(--pf-t--global--dark--color--nonstatus--orangered--100); --pf-t--global--border--color--nonstatus--orangered--hover: var(--pf-t--global--dark--color--nonstatus--orangered--200); --pf-t--global--border--color--nonstatus--purple--clicked: var(--pf-t--global--dark--color--nonstatus--purple--200); --pf-t--global--border--color--nonstatus--purple--default: var(--pf-t--global--dark--color--nonstatus--purple--100); --pf-t--global--border--color--nonstatus--purple--hover: var(--pf-t--global--dark--color--nonstatus--purple--200); --pf-t--global--border--color--nonstatus--red--clicked: var(--pf-t--global--dark--color--nonstatus--red--200); --pf-t--global--border--color--nonstatus--red--default: var(--pf-t--global--dark--color--nonstatus--red--100); --pf-t--global--border--color--nonstatus--red--hover: var(--pf-t--global--dark--color--nonstatus--red--200); --pf-t--global--border--color--nonstatus--teal--clicked: var(--pf-t--global--dark--color--nonstatus--teal--200); --pf-t--global--border--color--nonstatus--teal--default: var(--pf-t--global--dark--color--nonstatus--teal--100); --pf-t--global--border--color--nonstatus--teal--hover: var(--pf-t--global--dark--color--nonstatus--teal--200); --pf-t--global--border--color--nonstatus--yellow--clicked: var(--pf-t--global--dark--color--nonstatus--yellow--200); --pf-t--global--border--color--nonstatus--yellow--default: var(--pf-t--global--dark--color--nonstatus--yellow--100); --pf-t--global--border--color--nonstatus--yellow--hover: var(--pf-t--global--dark--color--nonstatus--yellow--200); --pf-t--global--border--color--on-secondary: var(--pf-t--global--dark--border--color--200); --pf-t--global--color--brand--clicked: var(--pf-t--global--dark--color--brand--200); --pf-t--global--color--brand--default: var(--pf-t--global--dark--color--brand--100); --pf-t--global--color--brand--hover: var(--pf-t--global--dark--color--brand--200); --pf-t--global--color--favorite--clicked: var(--pf-t--global--dark--color--favorite--200); --pf-t--global--color--favorite--default: var(--pf-t--global--dark--color--favorite--100); --pf-t--global--color--favorite--hover: var(--pf-t--global--dark--color--favorite--200); --pf-t--global--color--nonstatus--blue--clicked: var(--pf-t--global--dark--color--nonstatus--blue--200); --pf-t--global--color--nonstatus--blue--default: var(--pf-t--global--dark--color--nonstatus--blue--100); --pf-t--global--color--nonstatus--blue--hover: var(--pf-t--global--dark--color--nonstatus--blue--200); --pf-t--global--color--nonstatus--gray--clicked: var(--pf-t--global--dark--color--nonstatus--gray--200); --pf-t--global--color--nonstatus--gray--default: var(--pf-t--global--dark--color--nonstatus--gray--100); --pf-t--global--color--nonstatus--gray--hover: var(--pf-t--global--dark--color--nonstatus--gray--200); --pf-t--global--color--nonstatus--green--clicked: var(--pf-t--global--dark--color--nonstatus--green--200); --pf-t--global--color--nonstatus--green--default: var(--pf-t--global--dark--color--nonstatus--green--100); --pf-t--global--color--nonstatus--green--hover: var(--pf-t--global--dark--color--nonstatus--green--200); --pf-t--global--color--nonstatus--orange--clicked: var(--pf-t--global--dark--color--nonstatus--orange--200); --pf-t--global--color--nonstatus--orange--default: var(--pf-t--global--dark--color--nonstatus--orange--100); --pf-t--global--color--nonstatus--orange--hover: var(--pf-t--global--dark--color--nonstatus--orange--200); --pf-t--global--color--nonstatus--orangered--clicked: var(--pf-t--global--dark--color--nonstatus--orangered--200); --pf-t--global--color--nonstatus--orangered--default: var(--pf-t--global--dark--color--nonstatus--orangered--100); --pf-t--global--color--nonstatus--orangered--hover: var(--pf-t--global--dark--color--nonstatus--orangered--200); --pf-t--global--color--nonstatus--purple--clicked: var(--pf-t--global--dark--color--nonstatus--purple--200); --pf-t--global--color--nonstatus--purple--default: var(--pf-t--global--dark--color--nonstatus--purple--100); --pf-t--global--color--nonstatus--purple--hover: var(--pf-t--global--dark--color--nonstatus--purple--200); --pf-t--global--color--nonstatus--red--clicked: var(--pf-t--global--dark--color--nonstatus--red--200); --pf-t--global--color--nonstatus--red--default: var(--pf-t--global--dark--color--nonstatus--red--100); --pf-t--global--color--nonstatus--red--hover: var(--pf-t--global--dark--color--nonstatus--red--200); --pf-t--global--color--nonstatus--teal--clicked: var(--pf-t--global--dark--color--nonstatus--teal--200); --pf-t--global--color--nonstatus--teal--default: var(--pf-t--global--dark--color--nonstatus--teal--100); --pf-t--global--color--nonstatus--teal--hover: var(--pf-t--global--dark--color--nonstatus--teal--200); --pf-t--global--color--nonstatus--yellow--clicked: var(--pf-t--global--dark--color--nonstatus--yellow--200); --pf-t--global--color--nonstatus--yellow--default: var(--pf-t--global--dark--color--nonstatus--yellow--100); --pf-t--global--color--nonstatus--yellow--hover: var(--pf-t--global--dark--color--nonstatus--yellow--200); --pf-t--global--color--status--custom--clicked: var(--pf-t--global--dark--color--status--custom--200); --pf-t--global--color--status--custom--default: var(--pf-t--global--dark--color--status--custom--100); --pf-t--global--color--status--custom--hover: var(--pf-t--global--dark--color--status--custom--200); --pf-t--global--color--status--danger--clicked: var(--pf-t--global--dark--color--status--danger--200); --pf-t--global--color--status--danger--default: var(--pf-t--global--dark--color--status--danger--100); --pf-t--global--color--status--danger--hover: var(--pf-t--global--dark--color--status--danger--200); --pf-t--global--color--status--info--clicked: var(--pf-t--global--dark--color--status--info--200); --pf-t--global--color--status--info--default: var(--pf-t--global--dark--color--status--info--100); --pf-t--global--color--status--info--hover: var(--pf-t--global--dark--color--status--info--200); --pf-t--global--color--status--success--clicked: var(--pf-t--global--dark--color--status--success--200); --pf-t--global--color--status--success--default: var(--pf-t--global--dark--color--status--success--100); --pf-t--global--color--status--success--hover: var(--pf-t--global--dark--color--status--success--200); --pf-t--global--color--status--warning--clicked: var(--pf-t--global--dark--color--status--warning--200); --pf-t--global--color--status--warning--default: var(--pf-t--global--dark--color--status--warning--100); --pf-t--global--color--status--warning--hover: var(--pf-t--global--dark--color--status--warning--200); --pf-t--global--focus-ring--color--default: var(--pf-t--global--dark--focus-ring--color--100); --pf-t--global--icon--color--brand--clicked: var(--pf-t--global--dark--color--brand--300); --pf-t--global--icon--color--brand--default: var(--pf-t--global--dark--color--brand--200); --pf-t--global--icon--color--brand--hover: var(--pf-t--global--dark--color--brand--300); --pf-t--global--icon--color--disabled: var(--pf-t--global--dark--color--disabled--200); --pf-t--global--icon--color--inverse: var(--pf-t--global--dark--icon--color--300); --pf-t--global--icon--color--on-disabled: var(--pf-t--global--dark--color--disabled--300); --pf-t--global--icon--color--regular: var(--pf-t--global--dark--icon--color--100); --pf-t--global--icon--color--severity--critical--default: var(--pf-t--global--dark--color--severity--critical--100); --pf-t--global--icon--color--severity--important--default: var(--pf-t--global--dark--color--severity--important--100); --pf-t--global--icon--color--severity--minor--default: var(--pf-t--global--dark--color--severity--minor--100); --pf-t--global--icon--color--severity--moderate--default: var(--pf-t--global--dark--color--severity--moderate--100); --pf-t--global--icon--color--severity--none--default: var(--pf-t--global--dark--color--severity--none--100); --pf-t--global--icon--color--severity--undefined--default: var(--pf-t--global--dark--color--severity--undefined--100); --pf-t--global--icon--color--subtle: var(--pf-t--global--dark--icon--color--200); --pf-t--global--text--color--brand--clicked: var(--pf-t--global--dark--color--brand--300); --pf-t--global--text--color--brand--default: var(--pf-t--global--dark--color--brand--200); --pf-t--global--text--color--brand--hover: var(--pf-t--global--dark--color--brand--300); --pf-t--global--text--color--disabled: var(--pf-t--global--dark--color--disabled--200); --pf-t--global--text--color--inverse: var(--pf-t--global--dark--text--color--300); --pf-t--global--text--color--link--default: var(--pf-t--global--dark--text--color--link--100); --pf-t--global--text--color--link--hover: var(--pf-t--global--dark--text--color--link--200); --pf-t--global--text--color--link--visited: var(--pf-t--global--dark--text--color--link--300); --pf-t--global--text--color--on-disabled: var(--pf-t--global--dark--color--disabled--300); --pf-t--global--text--color--on-highlight: var(--pf-t--global--dark--text--color--300); --pf-t--global--text--color--regular: var(--pf-t--global--dark--text--color--100); --pf-t--global--text--color--required: var(--pf-t--global--dark--text--color--400); --pf-t--global--text--color--status--danger--clicked: var(--pf-t--global--dark--color--status--danger--300); --pf-t--global--text--color--status--danger--default: var(--pf-t--global--dark--color--status--danger--250); --pf-t--global--text--color--status--danger--hover: var(--pf-t--global--dark--color--status--danger--300); --pf-t--global--text--color--subtle: var(--pf-t--global--dark--text--color--200); --pf-t--global--border--color--alt: var(--pf-t--global--background--color--primary--default); --pf-t--global--border--color--brand--clicked: var(--pf-t--global--color--brand--clicked); --pf-t--global--border--color--brand--default: var(--pf-t--global--color--brand--default); --pf-t--global--border--color--brand--hover: var(--pf-t--global--color--brand--hover); --pf-t--global--border--color--main--default: var(--pf-t--global--background--color--primary--default); --pf-t--global--border--color--status--custom--clicked: var(--pf-t--global--color--status--custom--clicked); --pf-t--global--border--color--status--custom--default: var(--pf-t--global--color--status--custom--default); --pf-t--global--border--color--status--custom--hover: var(--pf-t--global--color--status--custom--hover); --pf-t--global--border--color--status--danger--clicked: var(--pf-t--global--color--status--danger--clicked); --pf-t--global--border--color--status--danger--default: var(--pf-t--global--color--status--danger--default); --pf-t--global--border--color--status--danger--hover: var(--pf-t--global--color--status--danger--hover); --pf-t--global--border--color--status--info--clicked: var(--pf-t--global--color--status--info--clicked); --pf-t--global--border--color--status--info--default: var(--pf-t--global--color--status--info--default); --pf-t--global--border--color--status--info--hover: var(--pf-t--global--color--status--info--hover); --pf-t--global--border--color--status--success--clicked: var(--pf-t--global--color--status--success--clicked); --pf-t--global--border--color--status--success--default: var(--pf-t--global--color--status--success--default); --pf-t--global--border--color--status--success--hover: var(--pf-t--global--color--status--success--hover); --pf-t--global--border--color--status--warning--clicked: var(--pf-t--global--color--status--warning--clicked); --pf-t--global--border--color--status--warning--default: var(--pf-t--global--color--status--warning--default); --pf-t--global--border--color--status--warning--hover: var(--pf-t--global--color--status--warning--hover); --pf-t--global--color--status--read--on-primary: var(--pf-t--global--background--color--secondary--default); --pf-t--global--color--status--read--on-secondary: var(--pf-t--global--background--color--control--default); --pf-t--global--color--status--unread--attention--clicked: var(--pf-t--global--color--status--danger--clicked); --pf-t--global--color--status--unread--attention--default: var(--pf-t--global--color--status--danger--default); --pf-t--global--color--status--unread--attention--hover: var(--pf-t--global--color--status--danger--hover); --pf-t--global--color--status--unread--clicked: var(--pf-t--global--color--brand--clicked); --pf-t--global--color--status--unread--default: var(--pf-t--global--color--brand--default); --pf-t--global--color--status--unread--hover: var(--pf-t--global--color--brand--hover); --pf-t--global--icon--color--favorite--clicked: var(--pf-t--global--color--favorite--clicked); --pf-t--global--icon--color--favorite--default: var(--pf-t--global--color--favorite--default); --pf-t--global--icon--color--favorite--hover: var(--pf-t--global--color--favorite--hover); --pf-t--global--icon--color--nonstatus--on-blue--clicked: var(--pf-t--global--icon--color--inverse); --pf-t--global--icon--color--nonstatus--on-blue--default: var(--pf-t--global--icon--color--inverse); --pf-t--global--icon--color--nonstatus--on-blue--hover: var(--pf-t--global--icon--color--inverse); --pf-t--global--icon--color--nonstatus--on-gray--clicked: var(--pf-t--global--icon--color--regular); --pf-t--global--icon--color--nonstatus--on-gray--default: var(--pf-t--global--icon--color--regular); --pf-t--global--icon--color--nonstatus--on-gray--hover: var(--pf-t--global--icon--color--regular); --pf-t--global--icon--color--nonstatus--on-green--clicked: var(--pf-t--global--icon--color--inverse); --pf-t--global--icon--color--nonstatus--on-green--default: var(--pf-t--global--icon--color--inverse); --pf-t--global--icon--color--nonstatus--on-green--hover: var(--pf-t--global--icon--color--inverse); --pf-t--global--icon--color--nonstatus--on-orange--clicked: var(--pf-t--global--icon--color--inverse); --pf-t--global--icon--color--nonstatus--on-orange--default: var(--pf-t--global--icon--color--inverse); --pf-t--global--icon--color--nonstatus--on-orange--hover: var(--pf-t--global--icon--color--inverse); --pf-t--global--icon--color--nonstatus--on-orangered--clicked: var(--pf-t--global--icon--color--inverse); --pf-t--global--icon--color--nonstatus--on-orangered--default: var(--pf-t--global--icon--color--inverse); --pf-t--global--icon--color--nonstatus--on-orangered--hover: var(--pf-t--global--icon--color--inverse); --pf-t--global--icon--color--nonstatus--on-purple--clicked: var(--pf-t--global--icon--color--inverse); --pf-t--global--icon--color--nonstatus--on-purple--default: var(--pf-t--global--icon--color--inverse); --pf-t--global--icon--color--nonstatus--on-purple--hover: var(--pf-t--global--icon--color--inverse); --pf-t--global--icon--color--nonstatus--on-red--clicked: var(--pf-t--global--icon--color--inverse); --pf-t--global--icon--color--nonstatus--on-red--default: var(--pf-t--global--icon--color--inverse); --pf-t--global--icon--color--nonstatus--on-red--hover: var(--pf-t--global--icon--color--inverse); --pf-t--global--icon--color--nonstatus--on-teal--clicked: var(--pf-t--global--icon--color--inverse); --pf-t--global--icon--color--nonstatus--on-teal--default: var(--pf-t--global--icon--color--inverse); --pf-t--global--icon--color--nonstatus--on-teal--hover: var(--pf-t--global--icon--color--inverse); --pf-t--global--icon--color--nonstatus--on-yellow--clicked: var(--pf-t--global--icon--color--inverse); --pf-t--global--icon--color--nonstatus--on-yellow--default: var(--pf-t--global--icon--color--inverse); --pf-t--global--icon--color--nonstatus--on-yellow--hover: var(--pf-t--global--icon--color--inverse); --pf-t--global--icon--color--on-brand--clicked: var(--pf-t--global--icon--color--inverse); --pf-t--global--icon--color--on-brand--default: var(--pf-t--global--icon--color--inverse); --pf-t--global--icon--color--on-brand--hover: var(--pf-t--global--icon--color--inverse); --pf-t--global--icon--color--status--custom--clicked: var(--pf-t--global--color--status--custom--clicked); --pf-t--global--icon--color--status--custom--default: var(--pf-t--global--color--status--custom--default); --pf-t--global--icon--color--status--custom--hover: var(--pf-t--global--color--status--custom--hover); --pf-t--global--icon--color--status--danger--clicked: var(--pf-t--global--color--status--danger--clicked); --pf-t--global--icon--color--status--danger--default: var(--pf-t--global--color--status--danger--default); --pf-t--global--icon--color--status--danger--hover: var(--pf-t--global--color--status--danger--hover); --pf-t--global--icon--color--status--info--clicked: var(--pf-t--global--color--status--info--clicked); --pf-t--global--icon--color--status--info--default: var(--pf-t--global--color--status--info--default); --pf-t--global--icon--color--status--info--hover: var(--pf-t--global--color--status--info--hover); --pf-t--global--icon--color--status--on-custom--clicked: var(--pf-t--global--icon--color--inverse); --pf-t--global--icon--color--status--on-custom--default: var(--pf-t--global--icon--color--inverse); --pf-t--global--icon--color--status--on-custom--hover: var(--pf-t--global--icon--color--inverse); --pf-t--global--icon--color--status--on-danger--clicked: var(--pf-t--global--icon--color--inverse); --pf-t--global--icon--color--status--on-danger--default: var(--pf-t--global--icon--color--inverse); --pf-t--global--icon--color--status--on-danger--hover: var(--pf-t--global--icon--color--inverse); --pf-t--global--icon--color--status--on-info--clicked: var(--pf-t--global--icon--color--inverse); --pf-t--global--icon--color--status--on-info--default: var(--pf-t--global--icon--color--inverse); --pf-t--global--icon--color--status--on-info--hover: var(--pf-t--global--icon--color--inverse); --pf-t--global--icon--color--status--on-success--clicked: var(--pf-t--global--icon--color--inverse); --pf-t--global--icon--color--status--on-success--default: var(--pf-t--global--icon--color--inverse); --pf-t--global--icon--color--status--on-success--hover: var(--pf-t--global--icon--color--inverse); --pf-t--global--icon--color--status--on-warning--clicked: var(--pf-t--global--icon--color--inverse); --pf-t--global--icon--color--status--on-warning--default: var(--pf-t--global--icon--color--inverse); --pf-t--global--icon--color--status--on-warning--hover: var(--pf-t--global--icon--color--inverse); --pf-t--global--icon--color--status--success--clicked: var(--pf-t--global--color--status--success--clicked); --pf-t--global--icon--color--status--success--default: var(--pf-t--global--color--status--success--default); --pf-t--global--icon--color--status--success--hover: var(--pf-t--global--color--status--success--hover); --pf-t--global--icon--color--status--unread--on-attention--clicked: var(--pf-t--global--icon--color--inverse); --pf-t--global--icon--color--status--unread--on-attention--default: var(--pf-t--global--icon--color--inverse); --pf-t--global--icon--color--status--unread--on-attention--hover: var(--pf-t--global--icon--color--inverse); --pf-t--global--icon--color--status--unread--on-default--clicked: var(--pf-t--global--icon--color--inverse); --pf-t--global--icon--color--status--unread--on-default--default: var(--pf-t--global--icon--color--inverse); --pf-t--global--icon--color--status--unread--on-default--hover: var(--pf-t--global--icon--color--inverse); --pf-t--global--icon--color--status--warning--clicked: var(--pf-t--global--color--status--warning--clicked); --pf-t--global--icon--color--status--warning--default: var(--pf-t--global--color--status--warning--default); --pf-t--global--icon--color--status--warning--hover: var(--pf-t--global--color--status--warning--hover); --pf-t--global--text--color--nonstatus--on-blue--clicked: var(--pf-t--global--text--color--inverse); --pf-t--global--text--color--nonstatus--on-blue--default: var(--pf-t--global--text--color--inverse); --pf-t--global--text--color--nonstatus--on-blue--hover: var(--pf-t--global--text--color--inverse); --pf-t--global--text--color--nonstatus--on-gray--clicked: var(--pf-t--global--text--color--regular); --pf-t--global--text--color--nonstatus--on-gray--default: var(--pf-t--global--text--color--regular); --pf-t--global--text--color--nonstatus--on-gray--hover: var(--pf-t--global--text--color--regular); --pf-t--global--text--color--nonstatus--on-green--clicked: var(--pf-t--global--text--color--inverse); --pf-t--global--text--color--nonstatus--on-green--default: var(--pf-t--global--text--color--inverse); --pf-t--global--text--color--nonstatus--on-green--hover: var(--pf-t--global--text--color--inverse); --pf-t--global--text--color--nonstatus--on-orange--clicked: var(--pf-t--global--text--color--inverse); --pf-t--global--text--color--nonstatus--on-orange--default: var(--pf-t--global--text--color--inverse); --pf-t--global--text--color--nonstatus--on-orange--hover: var(--pf-t--global--text--color--inverse); --pf-t--global--text--color--nonstatus--on-orangered--clicked: var(--pf-t--global--text--color--inverse); --pf-t--global--text--color--nonstatus--on-orangered--default: var(--pf-t--global--text--color--inverse); --pf-t--global--text--color--nonstatus--on-orangered--hover: var(--pf-t--global--text--color--inverse); --pf-t--global--text--color--nonstatus--on-purple--clicked: var(--pf-t--global--text--color--inverse); --pf-t--global--text--color--nonstatus--on-purple--default: var(--pf-t--global--text--color--inverse); --pf-t--global--text--color--nonstatus--on-purple--hover: var(--pf-t--global--text--color--inverse); --pf-t--global--text--color--nonstatus--on-red--clicked: var(--pf-t--global--text--color--inverse); --pf-t--global--text--color--nonstatus--on-red--default: var(--pf-t--global--text--color--inverse); --pf-t--global--text--color--nonstatus--on-red--hover: var(--pf-t--global--text--color--inverse); --pf-t--global--text--color--nonstatus--on-teal--clicked: var(--pf-t--global--text--color--inverse); --pf-t--global--text--color--nonstatus--on-teal--default: var(--pf-t--global--text--color--inverse); --pf-t--global--text--color--nonstatus--on-teal--hover: var(--pf-t--global--text--color--inverse); --pf-t--global--text--color--nonstatus--on-yellow--clicked: var(--pf-t--global--text--color--inverse); --pf-t--global--text--color--nonstatus--on-yellow--default: var(--pf-t--global--text--color--inverse); --pf-t--global--text--color--nonstatus--on-yellow--hover: var(--pf-t--global--text--color--inverse); --pf-t--global--text--color--on-brand--clicked: var(--pf-t--global--text--color--inverse); --pf-t--global--text--color--on-brand--default: var(--pf-t--global--text--color--inverse); --pf-t--global--text--color--on-brand--hover: var(--pf-t--global--text--color--inverse); --pf-t--global--text--color--placeholder: var(--pf-t--global--text--color--subtle); --pf-t--global--text--color--status--custom--clicked: var(--pf-t--global--color--status--custom--clicked); --pf-t--global--text--color--status--custom--default: var(--pf-t--global--color--status--custom--default); --pf-t--global--text--color--status--custom--hover: var(--pf-t--global--color--status--custom--hover); --pf-t--global--text--color--status--info--clicked: var(--pf-t--global--color--status--info--clicked); --pf-t--global--text--color--status--info--default: var(--pf-t--global--color--status--info--default); --pf-t--global--text--color--status--info--hover: var(--pf-t--global--color--status--info--hover); --pf-t--global--text--color--status--on-custom--clicked: var(--pf-t--global--text--color--inverse); --pf-t--global--text--color--status--on-custom--default: var(--pf-t--global--text--color--inverse); --pf-t--global--text--color--status--on-custom--hover: var(--pf-t--global--text--color--inverse); --pf-t--global--text--color--status--on-danger--clicked: var(--pf-t--global--text--color--inverse); --pf-t--global--text--color--status--on-danger--default: var(--pf-t--global--text--color--inverse); --pf-t--global--text--color--status--on-danger--hover: var(--pf-t--global--text--color--inverse); --pf-t--global--text--color--status--on-info--clicked: var(--pf-t--global--text--color--inverse); --pf-t--global--text--color--status--on-info--default: var(--pf-t--global--text--color--inverse); --pf-t--global--text--color--status--on-info--hover: var(--pf-t--global--text--color--inverse); --pf-t--global--text--color--status--on-success--clicked: var(--pf-t--global--text--color--inverse); --pf-t--global--text--color--status--on-success--default: var(--pf-t--global--text--color--inverse); --pf-t--global--text--color--status--on-success--hover: var(--pf-t--global--text--color--inverse); --pf-t--global--text--color--status--on-warning--clicked: var(--pf-t--global--text--color--inverse); --pf-t--global--text--color--status--on-warning--default: var(--pf-t--global--text--color--inverse); --pf-t--global--text--color--status--on-warning--hover: var(--pf-t--global--text--color--inverse); --pf-t--global--text--color--status--success--clicked: var(--pf-t--global--color--status--success--clicked); --pf-t--global--text--color--status--success--default: var(--pf-t--global--color--status--success--default); --pf-t--global--text--color--status--success--hover: var(--pf-t--global--color--status--success--hover); --pf-t--global--text--color--status--unread--on-attention--clicked: var(--pf-t--global--text--color--inverse); --pf-t--global--text--color--status--unread--on-attention--default: var(--pf-t--global--text--color--inverse); --pf-t--global--text--color--status--unread--on-attention--hover: var(--pf-t--global--text--color--inverse); --pf-t--global--text--color--status--unread--on-default--clicked: var(--pf-t--global--text--color--inverse); --pf-t--global--text--color--status--unread--on-default--default: var(--pf-t--global--text--color--inverse); --pf-t--global--text--color--status--unread--on-default--hover: var(--pf-t--global--text--color--inverse); --pf-t--global--text--color--status--warning--clicked: var(--pf-t--global--color--status--warning--clicked); --pf-t--global--text--color--status--warning--default: var(--pf-t--global--color--status--warning--default); --pf-t--global--text--color--status--warning--hover: var(--pf-t--global--color--status--warning--hover); } :root:where(.pf-v6-theme-high-contrast) { --pf-t--global--background--color--500: rgba(21, 21, 21, 0.2000); --pf-t--global--background--color--600: rgba(199, 199, 199, 0.2500); --pf-t--global--background--color--action--plain--default: rgba(255, 255, 255, 0.0000); --pf-t--global--border--radius--0: 0px; --pf-t--global--border--radius--100: 4px; --pf-t--global--border--radius--200: 6px; --pf-t--global--border--radius--300: 16px; --pf-t--global--border--radius--400: 24px; --pf-t--global--border--radius--500: 999px; --pf-t--global--border--width--100: 1px; --pf-t--global--border--width--200: 2px; --pf-t--global--border--width--300: 3px; --pf-t--global--border--width--400: 4px; --pf-t--global--border--width--action--plain--default: 0px; --pf-t--global--box-shadow--X--100: -10px; --pf-t--global--box-shadow--X--200: -4px; --pf-t--global--box-shadow--X--300: -1px; --pf-t--global--box-shadow--X--400: 0px; --pf-t--global--box-shadow--X--50: -20px; --pf-t--global--box-shadow--X--500: 1px; --pf-t--global--box-shadow--X--600: 4px; --pf-t--global--box-shadow--X--700: 10px; --pf-t--global--box-shadow--X--800: 20px; --pf-t--global--box-shadow--Y--100: -10px; --pf-t--global--box-shadow--Y--200: -4px; --pf-t--global--box-shadow--Y--300: -1px; --pf-t--global--box-shadow--Y--400: 0px; --pf-t--global--box-shadow--Y--50: -20px; --pf-t--global--box-shadow--Y--500: 1px; --pf-t--global--box-shadow--Y--600: 4px; --pf-t--global--box-shadow--Y--700: 10px; --pf-t--global--box-shadow--Y--800: 20px; --pf-t--global--box-shadow--blur--100: 4px; --pf-t--global--box-shadow--blur--200: 9px; --pf-t--global--box-shadow--blur--300: 20px; --pf-t--global--box-shadow--color--100: rgba(41, 41, 41, 0.1500); --pf-t--global--box-shadow--color--200: rgba(41, 41, 41, 0.2000); --pf-t--global--box-shadow--spread--100: 0px; --pf-t--global--box-shadow--spread--200: -4px; --pf-t--global--box-shadow--spread--300: -8px; --pf-t--global--box-shadow--spread--400: -20px; --pf-t--global--breakpoint--100: 0rem; --pf-t--global--breakpoint--200: 36rem; --pf-t--global--breakpoint--250: 40rem; --pf-t--global--breakpoint--300: 48rem; --pf-t--global--breakpoint--350: 60rem; --pf-t--global--breakpoint--400: 62rem; --pf-t--global--breakpoint--500: 75rem; --pf-t--global--breakpoint--550: 80rem; --pf-t--global--breakpoint--600: 90.625rem; --pf-t--global--color--nonstatus--green--400: #3d7019; --pf-t--global--color--status--success--150: #3d7019; --pf-t--global--focus-ring--position--inset: -4px; --pf-t--global--focus-ring--position--offset: 2px; --pf-t--global--focus-ring--width--inset: 3px; --pf-t--global--focus-ring--width--offset: 2px; --pf-t--global--font--family--100: "Red Hat Text", "RedHatText", "Noto Sans Arabic", "Noto Sans Hebrew", "Noto Sans JP", "Noto Sans KR", "Noto Sans Malayalam", "Noto Sans SC", "Noto Sans TC", "Noto Sans Thai", Helvetica, Arial, sans-serif; --pf-t--global--font--family--200: "Red Hat Display", "RedHatDisplay", "Noto Sans Arabic", "Noto Sans Hebrew", "Noto Sans JP", "Noto Sans KR", "Noto Sans Malayalam", "Noto Sans SC", "Noto Sans TC", "Noto Sans Thai", Helvetica, Arial, sans-serif; --pf-t--global--font--family--300: "Red Hat Mono", "RedHatMono", "Courier New", Courier, monospace; --pf-t--global--font--line-height--100: 1.3; --pf-t--global--font--line-height--200: 1.5; --pf-t--global--font--size--100: 0.75rem; --pf-t--global--font--size--200: 0.875rem; --pf-t--global--font--size--300: 1rem; --pf-t--global--font--size--400: 1.125rem; --pf-t--global--font--size--500: 1.25rem; --pf-t--global--font--size--600: 1.5rem; --pf-t--global--font--size--700: 1.75rem; --pf-t--global--font--size--800: 2.25rem; --pf-t--global--font--weight--100: 400; --pf-t--global--font--weight--200: 500; --pf-t--global--font--weight--300: 500; --pf-t--global--font--weight--400: 700; --pf-t--global--icon--size--100: 0.75rem; --pf-t--global--icon--size--200: 0.875rem; --pf-t--global--icon--size--250: 1rem; --pf-t--global--icon--size--300: 1.5rem; --pf-t--global--icon--size--400: 3.5rem; --pf-t--global--icon--size--500: 6rem; --pf-t--global--spacer--100: 0.25rem; --pf-t--global--spacer--200: 0.5rem; --pf-t--global--spacer--300: 1rem; --pf-t--global--spacer--400: 1.5rem; --pf-t--global--spacer--500: 2rem; --pf-t--global--spacer--600: 3rem; --pf-t--global--spacer--700: 4rem; --pf-t--global--spacer--800: 5rem; --pf-t--global--text-decoration--line--100: none; --pf-t--global--text-decoration--line--200: underline; --pf-t--global--text-decoration--style--100: solid; --pf-t--global--text-decoration--style--200: dashed; --pf-t--global--z-index--100: 100; --pf-t--global--z-index--200: 200; --pf-t--global--z-index--300: 300; --pf-t--global--z-index--400: 400; --pf-t--global--z-index--500: 500; --pf-t--global--z-index--600: 600; --pf-t--global--background--color--100: var(--pf-t--color--white); --pf-t--global--background--color--200: var(--pf-t--color--gray--10); --pf-t--global--background--color--300: var(--pf-t--color--gray--20); --pf-t--global--background--color--400: var(--pf-t--color--gray--80); --pf-t--global--background--color--450: var(--pf-t--color--gray--70); --pf-t--global--background--color--action--plain--clicked: var(--pf-t--global--background--color--600); --pf-t--global--background--color--action--plain--hover: var(--pf-t--global--background--color--600); --pf-t--global--background--color--backdrop--default: var(--pf-t--global--background--color--500); --pf-t--global--background--color--highlight--100: var(--pf-t--color--yellow--30); --pf-t--global--background--color--highlight--200: var(--pf-t--color--yellow--40); --pf-t--global--background--color--tertiary--default: var(--pf-t--global--background--color--600); --pf-t--global--border--color--100: var(--pf-t--color--gray--30); --pf-t--global--border--color--200: var(--pf-t--color--gray--40); --pf-t--global--border--color--300: var(--pf-t--color--gray--50); --pf-t--global--border--color--400: var(--pf-t--color--gray--60); --pf-t--global--border--color--50: var(--pf-t--color--gray--20); --pf-t--global--border--color--nonstatus--green--default: var(--pf-t--global--color--nonstatus--green--400); --pf-t--global--border--color--status--success--default: var(--pf-t--global--color--status--success--150); --pf-t--global--border--radius--large: var(--pf-t--global--border--radius--400); --pf-t--global--border--radius--medium: var(--pf-t--global--border--radius--300); --pf-t--global--border--radius--pill: var(--pf-t--global--border--radius--500); --pf-t--global--border--radius--sharp: var(--pf-t--global--border--radius--0); --pf-t--global--border--radius--small: var(--pf-t--global--border--radius--200); --pf-t--global--border--radius--tiny: var(--pf-t--global--border--radius--100); --pf-t--global--border--width--action--clicked: var(--pf-t--global--border--width--200); --pf-t--global--border--width--action--default: var(--pf-t--global--border--width--100); --pf-t--global--border--width--action--hover: var(--pf-t--global--border--width--200); --pf-t--global--border--width--action--plain--clicked: var(--pf-t--global--border--width--200); --pf-t--global--border--width--action--plain--hover: var(--pf-t--global--border--width--100); --pf-t--global--border--width--box--clicked: var(--pf-t--global--border--width--300); --pf-t--global--border--width--box--default: var(--pf-t--global--border--width--100); --pf-t--global--border--width--box--hover: var(--pf-t--global--border--width--200); --pf-t--global--border--width--box--status--default: var(--pf-t--global--border--width--200); --pf-t--global--border--width--box--status--read: var(--pf-t--global--border--width--100); --pf-t--global--border--width--control--clicked: var(--pf-t--global--border--width--200); --pf-t--global--border--width--control--default: var(--pf-t--global--border--width--100); --pf-t--global--border--width--control--hover: var(--pf-t--global--border--width--200); --pf-t--global--border--width--divider--clicked: var(--pf-t--global--border--width--100); --pf-t--global--border--width--divider--default: var(--pf-t--global--border--width--100); --pf-t--global--border--width--divider--hover: var(--pf-t--global--border--width--100); --pf-t--global--border--width--extra-strong: var(--pf-t--global--border--width--300); --pf-t--global--border--width--main--default: var(--pf-t--global--border--width--200); --pf-t--global--border--width--regular: var(--pf-t--global--border--width--100); --pf-t--global--border--width--strong: var(--pf-t--global--border--width--200); --pf-t--global--box-shadow--X--lg--bottom: var(--pf-t--global--box-shadow--X--400); --pf-t--global--box-shadow--X--lg--default: var(--pf-t--global--box-shadow--X--400); --pf-t--global--box-shadow--X--lg--left: var(--pf-t--global--box-shadow--X--50); --pf-t--global--box-shadow--X--lg--right: var(--pf-t--global--box-shadow--X--800); --pf-t--global--box-shadow--X--lg--top: var(--pf-t--global--box-shadow--X--400); --pf-t--global--box-shadow--X--md--bottom: var(--pf-t--global--box-shadow--X--400); --pf-t--global--box-shadow--X--md--default: var(--pf-t--global--box-shadow--X--400); --pf-t--global--box-shadow--X--md--left: var(--pf-t--global--box-shadow--X--100); --pf-t--global--box-shadow--X--md--right: var(--pf-t--global--box-shadow--X--700); --pf-t--global--box-shadow--X--md--top: var(--pf-t--global--box-shadow--X--400); --pf-t--global--box-shadow--X--sm--bottom: var(--pf-t--global--box-shadow--X--400); --pf-t--global--box-shadow--X--sm--default: var(--pf-t--global--box-shadow--X--400); --pf-t--global--box-shadow--X--sm--left: var(--pf-t--global--box-shadow--X--200); --pf-t--global--box-shadow--X--sm--right: var(--pf-t--global--box-shadow--X--600); --pf-t--global--box-shadow--X--sm--top: var(--pf-t--global--box-shadow--X--400); --pf-t--global--box-shadow--Y--lg--bottom: var(--pf-t--global--box-shadow--Y--800); --pf-t--global--box-shadow--Y--lg--default: var(--pf-t--global--box-shadow--Y--700); --pf-t--global--box-shadow--Y--lg--left: var(--pf-t--global--box-shadow--Y--400); --pf-t--global--box-shadow--Y--lg--right: var(--pf-t--global--box-shadow--Y--400); --pf-t--global--box-shadow--Y--lg--top: var(--pf-t--global--box-shadow--Y--50); --pf-t--global--box-shadow--Y--md--bottom: var(--pf-t--global--box-shadow--Y--700); --pf-t--global--box-shadow--Y--md--default: var(--pf-t--global--box-shadow--Y--600); --pf-t--global--box-shadow--Y--md--left: var(--pf-t--global--box-shadow--Y--400); --pf-t--global--box-shadow--Y--md--right: var(--pf-t--global--box-shadow--Y--400); --pf-t--global--box-shadow--Y--md--top: var(--pf-t--global--box-shadow--Y--100); --pf-t--global--box-shadow--Y--sm--bottom: var(--pf-t--global--box-shadow--Y--600); --pf-t--global--box-shadow--Y--sm--default: var(--pf-t--global--box-shadow--Y--500); --pf-t--global--box-shadow--Y--sm--left: var(--pf-t--global--box-shadow--Y--400); --pf-t--global--box-shadow--Y--sm--right: var(--pf-t--global--box-shadow--Y--400); --pf-t--global--box-shadow--Y--sm--top: var(--pf-t--global--box-shadow--Y--200); --pf-t--global--box-shadow--blur--lg: var(--pf-t--global--box-shadow--blur--300); --pf-t--global--box-shadow--blur--md: var(--pf-t--global--box-shadow--blur--200); --pf-t--global--box-shadow--blur--sm: var(--pf-t--global--box-shadow--blur--100); --pf-t--global--box-shadow--color--lg--default: var(--pf-t--global--box-shadow--color--100); --pf-t--global--box-shadow--color--lg--directional: var(--pf-t--global--box-shadow--color--200); --pf-t--global--box-shadow--color--md--default: var(--pf-t--global--box-shadow--color--100); --pf-t--global--box-shadow--color--md--directional: var(--pf-t--global--box-shadow--color--100); --pf-t--global--box-shadow--color--sm--default: var(--pf-t--global--box-shadow--color--100); --pf-t--global--box-shadow--color--sm--directional: var(--pf-t--global--box-shadow--color--200); --pf-t--global--box-shadow--spread--lg--default: var(--pf-t--global--box-shadow--spread--100); --pf-t--global--box-shadow--spread--lg--directional: var(--pf-t--global--box-shadow--spread--400); --pf-t--global--box-shadow--spread--md--default: var(--pf-t--global--box-shadow--spread--100); --pf-t--global--box-shadow--spread--md--directional: var(--pf-t--global--box-shadow--spread--300); --pf-t--global--box-shadow--spread--sm--default: var(--pf-t--global--box-shadow--spread--100); --pf-t--global--box-shadow--spread--sm--directional: var(--pf-t--global--box-shadow--spread--200); --pf-t--global--breakpoint--2xl: var(--pf-t--global--breakpoint--600); --pf-t--global--breakpoint--height--2xl: var(--pf-t--global--breakpoint--550); --pf-t--global--breakpoint--height--lg: var(--pf-t--global--breakpoint--300); --pf-t--global--breakpoint--height--md: var(--pf-t--global--breakpoint--250); --pf-t--global--breakpoint--height--sm: var(--pf-t--global--breakpoint--100); --pf-t--global--breakpoint--height--xl: var(--pf-t--global--breakpoint--350); --pf-t--global--breakpoint--lg: var(--pf-t--global--breakpoint--400); --pf-t--global--breakpoint--md: var(--pf-t--global--breakpoint--300); --pf-t--global--breakpoint--sm: var(--pf-t--global--breakpoint--200); --pf-t--global--breakpoint--xl: var(--pf-t--global--breakpoint--500); --pf-t--global--breakpoint--xs: var(--pf-t--global--breakpoint--100); --pf-t--global--color--brand--100: var(--pf-t--color--blue--40); --pf-t--global--color--brand--200: var(--pf-t--color--blue--50); --pf-t--global--color--brand--300: var(--pf-t--color--blue--60); --pf-t--global--color--brand--400: var(--pf-t--color--blue--70); --pf-t--global--color--brand--500: var(--pf-t--color--blue--80); --pf-t--global--color--disabled--100: var(--pf-t--color--gray--30); --pf-t--global--color--disabled--200: var(--pf-t--color--gray--40); --pf-t--global--color--disabled--300: var(--pf-t--color--gray--60); --pf-t--global--color--favorite--100: var(--pf-t--color--yellow--30); --pf-t--global--color--favorite--200: var(--pf-t--color--yellow--40); --pf-t--global--color--favorite--300: var(--pf-t--color--yellow--70); --pf-t--global--color--favorite--400: var(--pf-t--color--yellow--80); --pf-t--global--color--nonstatus--blue--100: var(--pf-t--color--blue--20); --pf-t--global--color--nonstatus--blue--200: var(--pf-t--color--blue--30); --pf-t--global--color--nonstatus--blue--300: var(--pf-t--color--blue--40); --pf-t--global--color--nonstatus--blue--400: var(--pf-t--color--blue--60); --pf-t--global--color--nonstatus--blue--500: var(--pf-t--color--blue--70); --pf-t--global--color--nonstatus--gray--100: var(--pf-t--color--gray--20); --pf-t--global--color--nonstatus--gray--200: var(--pf-t--color--gray--30); --pf-t--global--color--nonstatus--gray--300: var(--pf-t--color--gray--40); --pf-t--global--color--nonstatus--gray--400: var(--pf-t--color--gray--60); --pf-t--global--color--nonstatus--gray--50: var(--pf-t--color--gray--10); --pf-t--global--color--nonstatus--gray--500: var(--pf-t--color--gray--70); --pf-t--global--color--nonstatus--green--100: var(--pf-t--color--green--20); --pf-t--global--color--nonstatus--green--200: var(--pf-t--color--green--30); --pf-t--global--color--nonstatus--green--300: var(--pf-t--color--green--40); --pf-t--global--color--nonstatus--green--500: var(--pf-t--color--green--70); --pf-t--global--color--nonstatus--orange--100: var(--pf-t--color--orange--20); --pf-t--global--color--nonstatus--orange--200: var(--pf-t--color--orange--30); --pf-t--global--color--nonstatus--orange--300: var(--pf-t--color--orange--40); --pf-t--global--color--nonstatus--orange--400: var(--pf-t--color--orange--60); --pf-t--global--color--nonstatus--orange--500: var(--pf-t--color--orange--70); --pf-t--global--color--nonstatus--orangered--100: var(--pf-t--color--red-orange--20); --pf-t--global--color--nonstatus--orangered--200: var(--pf-t--color--red-orange--30); --pf-t--global--color--nonstatus--orangered--300: var(--pf-t--color--red-orange--40); --pf-t--global--color--nonstatus--orangered--400: var(--pf-t--color--red-orange--60); --pf-t--global--color--nonstatus--orangered--500: var(--pf-t--color--red-orange--70); --pf-t--global--color--nonstatus--purple--100: var(--pf-t--color--purple--20); --pf-t--global--color--nonstatus--purple--200: var(--pf-t--color--purple--30); --pf-t--global--color--nonstatus--purple--300: var(--pf-t--color--purple--40); --pf-t--global--color--nonstatus--purple--400: var(--pf-t--color--purple--50); --pf-t--global--color--nonstatus--purple--500: var(--pf-t--color--purple--60); --pf-t--global--color--nonstatus--red--100: var(--pf-t--color--red--20); --pf-t--global--color--nonstatus--red--200: var(--pf-t--color--red--30); --pf-t--global--color--nonstatus--red--300: var(--pf-t--color--red--40); --pf-t--global--color--nonstatus--red--400: var(--pf-t--color--red--60); --pf-t--global--color--nonstatus--red--500: var(--pf-t--color--red--70); --pf-t--global--color--nonstatus--teal--100: var(--pf-t--color--teal--20); --pf-t--global--color--nonstatus--teal--200: var(--pf-t--color--teal--30); --pf-t--global--color--nonstatus--teal--300: var(--pf-t--color--teal--40); --pf-t--global--color--nonstatus--teal--400: var(--pf-t--color--teal--70); --pf-t--global--color--nonstatus--teal--500: var(--pf-t--color--teal--80); --pf-t--global--color--nonstatus--yellow--100: var(--pf-t--color--yellow--20); --pf-t--global--color--nonstatus--yellow--200: var(--pf-t--color--yellow--30); --pf-t--global--color--nonstatus--yellow--300: var(--pf-t--color--yellow--40); --pf-t--global--color--nonstatus--yellow--400: var(--pf-t--color--yellow--70); --pf-t--global--color--nonstatus--yellow--500: var(--pf-t--color--yellow--80); --pf-t--global--color--severity--critical--100: var(--pf-t--color--red-orange--60); --pf-t--global--color--severity--important--100: var(--pf-t--color--orange--50); --pf-t--global--color--severity--important--200: var(--pf-t--color--orange--60); --pf-t--global--color--severity--minor--100: var(--pf-t--color--gray--50); --pf-t--global--color--severity--minor--200: var(--pf-t--color--gray--80); --pf-t--global--color--severity--moderate--100: var(--pf-t--color--yellow--40); --pf-t--global--color--severity--moderate--200: var(--pf-t--color--yellow--70); --pf-t--global--color--severity--none--100: var(--pf-t--color--blue--40); --pf-t--global--color--severity--none--200: var(--pf-t--color--blue--60); --pf-t--global--color--severity--undefined--100: var(--pf-t--color--gray--30); --pf-t--global--color--severity--undefined--200: var(--pf-t--color--gray--60); --pf-t--global--color--status--custom--100: var(--pf-t--color--teal--60); --pf-t--global--color--status--custom--200: var(--pf-t--color--teal--70); --pf-t--global--color--status--custom--300: var(--pf-t--color--teal--80); --pf-t--global--color--status--danger--100: var(--pf-t--color--red-orange--60); --pf-t--global--color--status--danger--200: var(--pf-t--color--red-orange--70); --pf-t--global--color--status--danger--300: var(--pf-t--color--red-orange--80); --pf-t--global--color--status--info--100: var(--pf-t--color--purple--50); --pf-t--global--color--status--info--200: var(--pf-t--color--purple--60); --pf-t--global--color--status--info--300: var(--pf-t--color--purple--70); --pf-t--global--color--status--success--100: var(--pf-t--color--green--60); --pf-t--global--color--status--success--200: var(--pf-t--color--green--70); --pf-t--global--color--status--success--300: var(--pf-t--color--green--80); --pf-t--global--color--status--warning--100: var(--pf-t--color--yellow--30); --pf-t--global--color--status--warning--200: var(--pf-t--color--yellow--40); --pf-t--global--color--status--warning--300: var(--pf-t--color--yellow--50); --pf-t--global--color--status--warning--400: var(--pf-t--color--yellow--60); --pf-t--global--color--status--warning--500: var(--pf-t--color--yellow--70); --pf-t--global--color--status--warning--600: var(--pf-t--color--yellow--80); --pf-t--global--focus-ring--color--100: var(--pf-t--color--blue--50); --pf-t--global--focus-ring--color--200: var(--pf-t--color--blue--60); --pf-t--global--font--family--body: var(--pf-t--global--font--family--100); --pf-t--global--font--family--heading: var(--pf-t--global--font--family--200); --pf-t--global--font--family--mono: var(--pf-t--global--font--family--300); --pf-t--global--font--line-height--body: var(--pf-t--global--font--line-height--200); --pf-t--global--font--line-height--heading: var(--pf-t--global--font--line-height--100); --pf-t--global--font--size--2xl: var(--pf-t--global--font--size--600); --pf-t--global--font--size--3xl: var(--pf-t--global--font--size--700); --pf-t--global--font--size--4xl: var(--pf-t--global--font--size--800); --pf-t--global--font--size--lg: var(--pf-t--global--font--size--400); --pf-t--global--font--size--md: var(--pf-t--global--font--size--300); --pf-t--global--font--size--sm: var(--pf-t--global--font--size--200); --pf-t--global--font--size--xl: var(--pf-t--global--font--size--500); --pf-t--global--font--size--xs: var(--pf-t--global--font--size--100); --pf-t--global--font--weight--body--bold: var(--pf-t--global--font--weight--200); --pf-t--global--font--weight--body--default: var(--pf-t--global--font--weight--100); --pf-t--global--font--weight--heading--bold: var(--pf-t--global--font--weight--400); --pf-t--global--font--weight--heading--default: var(--pf-t--global--font--weight--300); --pf-t--global--icon--color--100: var(--pf-t--color--gray--90); --pf-t--global--icon--color--150: var(--pf-t--color--gray--60); --pf-t--global--icon--color--200: var(--pf-t--color--gray--50); --pf-t--global--icon--color--300: var(--pf-t--color--white); --pf-t--global--icon--color--brand--clicked: var(--pf-t--color--blue--70); --pf-t--global--icon--color--brand--default: var(--pf-t--color--blue--60); --pf-t--global--icon--color--brand--hover: var(--pf-t--color--blue--70); --pf-t--global--icon--color--status--success--default: var(--pf-t--global--color--status--success--150); --pf-t--global--icon--size--2xl: var(--pf-t--global--icon--size--400); --pf-t--global--icon--size--3xl: var(--pf-t--global--icon--size--500); --pf-t--global--icon--size--lg: var(--pf-t--global--icon--size--250); --pf-t--global--icon--size--md: var(--pf-t--global--icon--size--200); --pf-t--global--icon--size--sm: var(--pf-t--global--icon--size--100); --pf-t--global--icon--size--xl: var(--pf-t--global--icon--size--300); --pf-t--global--spacer--2xl: var(--pf-t--global--spacer--600); --pf-t--global--spacer--3xl: var(--pf-t--global--spacer--700); --pf-t--global--spacer--4xl: var(--pf-t--global--spacer--800); --pf-t--global--spacer--lg: var(--pf-t--global--spacer--400); --pf-t--global--spacer--md: var(--pf-t--global--spacer--300); --pf-t--global--spacer--sm: var(--pf-t--global--spacer--200); --pf-t--global--spacer--xl: var(--pf-t--global--spacer--500); --pf-t--global--spacer--xs: var(--pf-t--global--spacer--100); --pf-t--global--text--color--100: var(--pf-t--color--gray--95); --pf-t--global--text--color--200: var(--pf-t--color--gray--60); --pf-t--global--text--color--250: var(--pf-t--color--gray--70); --pf-t--global--text--color--300: var(--pf-t--color--white); --pf-t--global--text--color--400: var(--pf-t--color--red-orange--40); --pf-t--global--text--color--500: var(--pf-t--color--red-orange--70); --pf-t--global--text--color--brand--clicked: var(--pf-t--color--blue--80); --pf-t--global--text--color--brand--default: var(--pf-t--color--blue--70); --pf-t--global--text--color--brand--hover: var(--pf-t--color--blue--80); --pf-t--global--text--color--link--100: var(--pf-t--color--blue--50); --pf-t--global--text--color--link--200: var(--pf-t--color--blue--60); --pf-t--global--text--color--link--250: var(--pf-t--color--blue--70); --pf-t--global--text--color--link--300: var(--pf-t--color--purple--50); --pf-t--global--text--color--link--350: var(--pf-t--color--purple--60); --pf-t--global--text-decoration--editable-text--line--default: var(--pf-t--global--text-decoration--line--200); --pf-t--global--text-decoration--editable-text--line--hover: var(--pf-t--global--text-decoration--line--200); --pf-t--global--text-decoration--editable-text--style--default: var(--pf-t--global--text-decoration--style--200); --pf-t--global--text-decoration--editable-text--style--hover: var(--pf-t--global--text-decoration--style--200); --pf-t--global--text-decoration--help-text--line--default: var(--pf-t--global--text-decoration--line--200); --pf-t--global--text-decoration--help-text--line--hover: var(--pf-t--global--text-decoration--line--200); --pf-t--global--text-decoration--help-text--style--default: var(--pf-t--global--text-decoration--style--200); --pf-t--global--text-decoration--help-text--style--hover: var(--pf-t--global--text-decoration--style--200); --pf-t--global--text-decoration--link--line--default: var(--pf-t--global--text-decoration--line--200); --pf-t--global--text-decoration--link--line--hover: var(--pf-t--global--text-decoration--line--200); --pf-t--global--text-decoration--link--style--default: var(--pf-t--global--text-decoration--style--100); --pf-t--global--text-decoration--link--style--hover: var(--pf-t--global--text-decoration--style--100); --pf-t--global--z-index--2xl: var(--pf-t--global--z-index--600); --pf-t--global--z-index--lg: var(--pf-t--global--z-index--400); --pf-t--global--z-index--md: var(--pf-t--global--z-index--300); --pf-t--global--z-index--sm: var(--pf-t--global--z-index--200); --pf-t--global--z-index--xl: var(--pf-t--global--z-index--500); --pf-t--global--z-index--xs: var(--pf-t--global--z-index--100); --pf-t--global--background--color--control--read-only: var(--pf-t--global--background--color--200); --pf-t--global--background--color--disabled--default: var(--pf-t--global--color--disabled--100); --pf-t--global--background--color--floating--clicked: var(--pf-t--global--background--color--200); --pf-t--global--background--color--floating--default: var(--pf-t--global--background--color--100); --pf-t--global--background--color--floating--hover: var(--pf-t--global--background--color--200); --pf-t--global--background--color--highlight--clicked: var(--pf-t--global--background--color--highlight--200); --pf-t--global--background--color--highlight--default: var(--pf-t--global--background--color--highlight--100); --pf-t--global--background--color--inverse--clicked: var(--pf-t--global--background--color--450); --pf-t--global--background--color--inverse--default: var(--pf-t--global--background--color--400); --pf-t--global--background--color--inverse--hover: var(--pf-t--global--background--color--450); --pf-t--global--background--color--primary--clicked: var(--pf-t--global--background--color--200); --pf-t--global--background--color--primary--default: var(--pf-t--global--background--color--100); --pf-t--global--background--color--primary--hover: var(--pf-t--global--background--color--200); --pf-t--global--background--color--secondary--clicked: var(--pf-t--global--background--color--300); --pf-t--global--background--color--secondary--default: var(--pf-t--global--background--color--200); --pf-t--global--background--color--secondary--hover: var(--pf-t--global--background--color--300); --pf-t--global--border--color--clicked: var(--pf-t--global--color--brand--400); --pf-t--global--border--color--control--read-only: var(--pf-t--global--border--color--50); --pf-t--global--border--color--default: var(--pf-t--global--border--color--400); --pf-t--global--border--color--disabled: var(--pf-t--global--color--disabled--200); --pf-t--global--border--color--hover: var(--pf-t--global--color--brand--300); --pf-t--global--border--color--nonstatus--blue--clicked: var(--pf-t--global--color--nonstatus--blue--500); --pf-t--global--border--color--nonstatus--blue--default: var(--pf-t--global--color--nonstatus--blue--400); --pf-t--global--border--color--nonstatus--blue--hover: var(--pf-t--global--color--nonstatus--blue--500); --pf-t--global--border--color--nonstatus--gray--clicked: var(--pf-t--global--color--nonstatus--gray--500); --pf-t--global--border--color--nonstatus--gray--default: var(--pf-t--global--color--nonstatus--gray--400); --pf-t--global--border--color--nonstatus--gray--hover: var(--pf-t--global--color--nonstatus--gray--500); --pf-t--global--border--color--nonstatus--green--clicked: var(--pf-t--global--color--nonstatus--green--500); --pf-t--global--border--color--nonstatus--green--hover: var(--pf-t--global--color--nonstatus--green--500); --pf-t--global--border--color--nonstatus--orange--clicked: var(--pf-t--global--color--nonstatus--orange--500); --pf-t--global--border--color--nonstatus--orange--default: var(--pf-t--global--color--nonstatus--orange--400); --pf-t--global--border--color--nonstatus--orange--hover: var(--pf-t--global--color--nonstatus--orange--500); --pf-t--global--border--color--nonstatus--orangered--clicked: var(--pf-t--global--color--nonstatus--orangered--500); --pf-t--global--border--color--nonstatus--orangered--default: var(--pf-t--global--color--nonstatus--orangered--400); --pf-t--global--border--color--nonstatus--orangered--hover: var(--pf-t--global--color--nonstatus--orangered--500); --pf-t--global--border--color--nonstatus--purple--clicked: var(--pf-t--global--color--nonstatus--purple--500); --pf-t--global--border--color--nonstatus--purple--default: var(--pf-t--global--color--nonstatus--purple--400); --pf-t--global--border--color--nonstatus--purple--hover: var(--pf-t--global--color--nonstatus--purple--500); --pf-t--global--border--color--nonstatus--red--clicked: var(--pf-t--global--color--nonstatus--red--500); --pf-t--global--border--color--nonstatus--red--default: var(--pf-t--global--color--nonstatus--red--400); --pf-t--global--border--color--nonstatus--red--hover: var(--pf-t--global--color--nonstatus--red--500); --pf-t--global--border--color--nonstatus--teal--clicked: var(--pf-t--global--color--nonstatus--teal--500); --pf-t--global--border--color--nonstatus--teal--default: var(--pf-t--global--color--nonstatus--teal--400); --pf-t--global--border--color--nonstatus--teal--hover: var(--pf-t--global--color--nonstatus--teal--500); --pf-t--global--border--color--nonstatus--yellow--clicked: var(--pf-t--global--color--nonstatus--yellow--500); --pf-t--global--border--color--nonstatus--yellow--default: var(--pf-t--global--color--nonstatus--yellow--400); --pf-t--global--border--color--nonstatus--yellow--hover: var(--pf-t--global--color--nonstatus--yellow--500); --pf-t--global--border--color--on-secondary: var(--pf-t--global--border--color--400); --pf-t--global--border--color--status--success--clicked: var(--pf-t--global--color--status--success--200); --pf-t--global--border--color--status--success--hover: var(--pf-t--global--color--status--success--200); --pf-t--global--border--color--status--warning--clicked: var(--pf-t--global--color--status--warning--600); --pf-t--global--border--color--status--warning--default: var(--pf-t--global--color--status--warning--500); --pf-t--global--border--color--status--warning--hover: var(--pf-t--global--color--status--warning--600); --pf-t--global--border--width--high-contrast--extra-strong: var(--pf-t--global--border--width--extra-strong); --pf-t--global--border--width--high-contrast--regular: var(--pf-t--global--border--width--regular); --pf-t--global--border--width--high-contrast--strong: var(--pf-t--global--border--width--strong); --pf-t--global--color--brand--clicked: var(--pf-t--global--color--brand--400); --pf-t--global--color--brand--default: var(--pf-t--global--color--brand--300); --pf-t--global--color--brand--hover: var(--pf-t--global--color--brand--400); --pf-t--global--color--favorite--clicked: var(--pf-t--global--color--favorite--400); --pf-t--global--color--favorite--default: var(--pf-t--global--color--favorite--300); --pf-t--global--color--favorite--hover: var(--pf-t--global--color--favorite--400); --pf-t--global--color--nonstatus--blue--clicked: var(--pf-t--global--color--nonstatus--blue--200); --pf-t--global--color--nonstatus--blue--default: var(--pf-t--global--color--nonstatus--blue--100); --pf-t--global--color--nonstatus--blue--hover: var(--pf-t--global--color--nonstatus--blue--200); --pf-t--global--color--nonstatus--gray--clicked: var(--pf-t--global--color--nonstatus--gray--100); --pf-t--global--color--nonstatus--gray--default: var(--pf-t--global--color--nonstatus--gray--50); --pf-t--global--color--nonstatus--gray--hover: var(--pf-t--global--color--nonstatus--gray--100); --pf-t--global--color--nonstatus--green--clicked: var(--pf-t--global--color--nonstatus--green--200); --pf-t--global--color--nonstatus--green--default: var(--pf-t--global--color--nonstatus--green--100); --pf-t--global--color--nonstatus--green--hover: var(--pf-t--global--color--nonstatus--green--200); --pf-t--global--color--nonstatus--orange--clicked: var(--pf-t--global--color--nonstatus--orange--200); --pf-t--global--color--nonstatus--orange--default: var(--pf-t--global--color--nonstatus--orange--100); --pf-t--global--color--nonstatus--orange--hover: var(--pf-t--global--color--nonstatus--orange--200); --pf-t--global--color--nonstatus--orangered--clicked: var(--pf-t--global--color--nonstatus--orangered--200); --pf-t--global--color--nonstatus--orangered--default: var(--pf-t--global--color--nonstatus--orangered--100); --pf-t--global--color--nonstatus--orangered--hover: var(--pf-t--global--color--nonstatus--orangered--200); --pf-t--global--color--nonstatus--purple--clicked: var(--pf-t--global--color--nonstatus--purple--200); --pf-t--global--color--nonstatus--purple--default: var(--pf-t--global--color--nonstatus--purple--100); --pf-t--global--color--nonstatus--purple--hover: var(--pf-t--global--color--nonstatus--purple--200); --pf-t--global--color--nonstatus--red--clicked: var(--pf-t--global--color--nonstatus--red--200); --pf-t--global--color--nonstatus--red--default: var(--pf-t--global--color--nonstatus--red--100); --pf-t--global--color--nonstatus--red--hover: var(--pf-t--global--color--nonstatus--red--200); --pf-t--global--color--nonstatus--teal--clicked: var(--pf-t--global--color--nonstatus--teal--200); --pf-t--global--color--nonstatus--teal--default: var(--pf-t--global--color--nonstatus--teal--100); --pf-t--global--color--nonstatus--teal--hover: var(--pf-t--global--color--nonstatus--teal--200); --pf-t--global--color--nonstatus--yellow--clicked: var(--pf-t--global--color--nonstatus--yellow--200); --pf-t--global--color--nonstatus--yellow--default: var(--pf-t--global--color--nonstatus--yellow--100); --pf-t--global--color--nonstatus--yellow--hover: var(--pf-t--global--color--nonstatus--yellow--200); --pf-t--global--color--status--custom--clicked: var(--pf-t--global--color--status--custom--300); --pf-t--global--color--status--custom--default: var(--pf-t--global--color--status--custom--200); --pf-t--global--color--status--custom--hover: var(--pf-t--global--color--status--custom--300); --pf-t--global--color--status--danger--clicked: var(--pf-t--global--color--status--danger--300); --pf-t--global--color--status--danger--default: var(--pf-t--global--color--status--danger--200); --pf-t--global--color--status--danger--hover: var(--pf-t--global--color--status--danger--300); --pf-t--global--color--status--info--clicked: var(--pf-t--global--color--status--info--300); --pf-t--global--color--status--info--default: var(--pf-t--global--color--status--info--200); --pf-t--global--color--status--info--hover: var(--pf-t--global--color--status--info--300); --pf-t--global--color--status--success--clicked: var(--pf-t--global--color--status--success--300); --pf-t--global--color--status--success--default: var(--pf-t--global--color--status--success--200); --pf-t--global--color--status--success--hover: var(--pf-t--global--color--status--success--300); --pf-t--global--color--status--warning--clicked: var(--pf-t--global--color--status--warning--600); --pf-t--global--color--status--warning--default: var(--pf-t--global--color--status--warning--500); --pf-t--global--color--status--warning--hover: var(--pf-t--global--color--status--warning--600); --pf-t--global--focus-ring--color--default: var(--pf-t--global--focus-ring--color--200); --pf-t--global--font--size--body--default: var(--pf-t--global--font--size--sm); --pf-t--global--font--size--body--lg: var(--pf-t--global--font--size--md); --pf-t--global--font--size--body--sm: var(--pf-t--global--font--size--xs); --pf-t--global--font--size--heading--h1: var(--pf-t--global--font--size--2xl); --pf-t--global--font--size--heading--h2: var(--pf-t--global--font--size--xl); --pf-t--global--font--size--heading--h3: var(--pf-t--global--font--size--lg); --pf-t--global--font--size--heading--h4: var(--pf-t--global--font--size--md); --pf-t--global--font--size--heading--h5: var(--pf-t--global--font--size--md); --pf-t--global--font--size--heading--h6: var(--pf-t--global--font--size--md); --pf-t--global--icon--color--disabled: var(--pf-t--global--color--disabled--200); --pf-t--global--icon--color--inverse: var(--pf-t--global--icon--color--300); --pf-t--global--icon--color--on-disabled: var(--pf-t--global--color--disabled--300); --pf-t--global--icon--color--regular: var(--pf-t--global--icon--color--100); --pf-t--global--icon--color--severity--critical--default: var(--pf-t--global--color--severity--critical--100); --pf-t--global--icon--color--severity--important--default: var(--pf-t--global--color--severity--important--200); --pf-t--global--icon--color--severity--minor--default: var(--pf-t--global--color--severity--minor--200); --pf-t--global--icon--color--severity--moderate--default: var(--pf-t--global--color--severity--moderate--200); --pf-t--global--icon--color--severity--none--default: var(--pf-t--global--color--severity--none--200); --pf-t--global--icon--color--severity--undefined--default: var(--pf-t--global--color--severity--undefined--200); --pf-t--global--icon--color--status--danger--clicked: var(--pf-t--global--color--status--danger--200); --pf-t--global--icon--color--status--danger--default: var(--pf-t--global--color--status--danger--100); --pf-t--global--icon--color--status--danger--hover: var(--pf-t--global--color--status--danger--200); --pf-t--global--icon--color--status--success--clicked: var(--pf-t--global--color--status--success--200); --pf-t--global--icon--color--status--success--hover: var(--pf-t--global--color--status--success--200); --pf-t--global--icon--color--status--warning--clicked: var(--pf-t--global--color--status--warning--600); --pf-t--global--icon--color--status--warning--default: var(--pf-t--global--color--status--warning--500); --pf-t--global--icon--color--status--warning--hover: var(--pf-t--global--color--status--warning--600); --pf-t--global--icon--color--subtle: var(--pf-t--global--icon--color--150); --pf-t--global--icon--size--font--2xl: var(--pf-t--global--font--size--2xl); --pf-t--global--icon--size--font--3xl: var(--pf-t--global--font--size--3xl); --pf-t--global--icon--size--font--4xl: var(--pf-t--global--font--size--4xl); --pf-t--global--icon--size--font--lg: var(--pf-t--global--font--size--lg); --pf-t--global--icon--size--font--md: var(--pf-t--global--font--size--md); --pf-t--global--icon--size--font--sm: var(--pf-t--global--font--size--sm); --pf-t--global--icon--size--font--xl: var(--pf-t--global--font--size--xl); --pf-t--global--icon--size--font--xs: var(--pf-t--global--font--size--xs); --pf-t--global--spacer--action--horizontal--compact: var(--pf-t--global--spacer--md); --pf-t--global--spacer--action--horizontal--default: var(--pf-t--global--spacer--lg); --pf-t--global--spacer--action--horizontal--plain--compact: var(--pf-t--global--spacer--xs); --pf-t--global--spacer--action--horizontal--plain--default: var(--pf-t--global--spacer--sm); --pf-t--global--spacer--action--horizontal--spacious: var(--pf-t--global--spacer--xl); --pf-t--global--spacer--control--horizontal--compact: var(--pf-t--global--spacer--sm); --pf-t--global--spacer--control--horizontal--default: var(--pf-t--global--spacer--md); --pf-t--global--spacer--control--horizontal--plain: var(--pf-t--global--spacer--sm); --pf-t--global--spacer--control--horizontal--spacious: var(--pf-t--global--spacer--lg); --pf-t--global--spacer--control--vertical--compact: var(--pf-t--global--spacer--xs); --pf-t--global--spacer--control--vertical--default: var(--pf-t--global--spacer--sm); --pf-t--global--spacer--control--vertical--plain: var(--pf-t--global--spacer--sm); --pf-t--global--spacer--control--vertical--spacious: var(--pf-t--global--spacer--md); --pf-t--global--spacer--gap--action-to-action--default: var(--pf-t--global--spacer--md); --pf-t--global--spacer--gap--action-to-action--plain: var(--pf-t--global--spacer--xs); --pf-t--global--spacer--gap--control-to-control--default: var(--pf-t--global--spacer--xs); --pf-t--global--spacer--gap--group--horizontal: var(--pf-t--global--spacer--md); --pf-t--global--spacer--gap--group--vertical: var(--pf-t--global--spacer--sm); --pf-t--global--spacer--gap--group-to-group--horizontal--compact: var(--pf-t--global--spacer--sm); --pf-t--global--spacer--gap--group-to-group--horizontal--default: var(--pf-t--global--spacer--2xl); --pf-t--global--spacer--gap--group-to-group--vertical--compact: var(--pf-t--global--spacer--md); --pf-t--global--spacer--gap--group-to-group--vertical--default: var(--pf-t--global--spacer--lg); --pf-t--global--spacer--gap--text-to-element--compact: var(--pf-t--global--spacer--xs); --pf-t--global--spacer--gap--text-to-element--default: var(--pf-t--global--spacer--sm); --pf-t--global--spacer--gutter--default: var(--pf-t--global--spacer--md); --pf-t--global--spacer--inset--page-chrome: var(--pf-t--global--spacer--lg); --pf-t--global--text--color--disabled: var(--pf-t--global--color--disabled--200); --pf-t--global--text--color--inverse: var(--pf-t--global--text--color--300); --pf-t--global--text--color--link--default: var(--pf-t--global--text--color--link--200); --pf-t--global--text--color--link--hover: var(--pf-t--global--text--color--link--250); --pf-t--global--text--color--link--visited: var(--pf-t--global--text--color--link--350); --pf-t--global--text--color--on-disabled: var(--pf-t--global--color--disabled--300); --pf-t--global--text--color--on-highlight: var(--pf-t--global--text--color--100); --pf-t--global--text--color--regular: var(--pf-t--global--text--color--100); --pf-t--global--text--color--required: var(--pf-t--global--text--color--500); --pf-t--global--text--color--status--success--clicked: var(--pf-t--global--color--status--success--200); --pf-t--global--text--color--status--success--default: var(--pf-t--global--color--status--success--200); --pf-t--global--text--color--status--success--hover: var(--pf-t--global--color--status--success--200); --pf-t--global--text--color--status--warning--clicked: var(--pf-t--global--color--status--warning--600); --pf-t--global--text--color--status--warning--default: var(--pf-t--global--color--status--warning--500); --pf-t--global--text--color--status--warning--hover: var(--pf-t--global--color--status--warning--600); --pf-t--global--text--color--subtle: var(--pf-t--global--text--color--250); --pf-t--global--text-decoration--offset--default: var(--pf-t--global--spacer--xs); --pf-t--global--text-decoration--width--default: var(--pf-t--global--border--width--regular); --pf-t--global--background--color--action--plain--alt--clicked: var(--pf-t--global--background--color--primary--default); --pf-t--global--background--color--action--plain--alt--hover: var(--pf-t--global--background--color--primary--default); --pf-t--global--background--color--control--default: var(--pf-t--global--background--color--primary--default); --pf-t--global--border--color--alt: var(--pf-t--global--background--color--primary--default); --pf-t--global--border--color--brand--clicked: var(--pf-t--global--color--brand--clicked); --pf-t--global--border--color--brand--default: var(--pf-t--global--color--brand--default); --pf-t--global--border--color--brand--hover: var(--pf-t--global--color--brand--hover); --pf-t--global--border--color--high-contrast: var(--pf-t--global--border--color--default); --pf-t--global--border--color--main--default: var(--pf-t--global--border--color--default); --pf-t--global--border--color--status--custom--clicked: var(--pf-t--global--color--status--custom--clicked); --pf-t--global--border--color--status--custom--default: var(--pf-t--global--color--status--custom--default); --pf-t--global--border--color--status--custom--hover: var(--pf-t--global--color--status--custom--hover); --pf-t--global--border--color--status--danger--clicked: var(--pf-t--global--color--status--danger--clicked); --pf-t--global--border--color--status--danger--default: var(--pf-t--global--color--status--danger--default); --pf-t--global--border--color--status--danger--hover: var(--pf-t--global--color--status--danger--hover); --pf-t--global--border--color--status--info--clicked: var(--pf-t--global--color--status--info--clicked); --pf-t--global--border--color--status--info--default: var(--pf-t--global--color--status--info--default); --pf-t--global--border--color--status--info--hover: var(--pf-t--global--color--status--info--hover); --pf-t--global--color--status--read--on-primary: var(--pf-t--global--background--color--secondary--default); --pf-t--global--color--status--unread--attention--clicked: var(--pf-t--global--color--status--danger--clicked); --pf-t--global--color--status--unread--attention--default: var(--pf-t--global--color--status--danger--default); --pf-t--global--color--status--unread--attention--hover: var(--pf-t--global--color--status--danger--hover); --pf-t--global--color--status--unread--clicked: var(--pf-t--global--color--brand--clicked); --pf-t--global--color--status--unread--default: var(--pf-t--global--color--brand--default); --pf-t--global--color--status--unread--hover: var(--pf-t--global--color--brand--hover); --pf-t--global--icon--color--favorite--clicked: var(--pf-t--global--color--favorite--clicked); --pf-t--global--icon--color--favorite--default: var(--pf-t--global--color--favorite--default); --pf-t--global--icon--color--favorite--hover: var(--pf-t--global--color--favorite--hover); --pf-t--global--icon--color--nonstatus--on-blue--clicked: var(--pf-t--global--icon--color--regular); --pf-t--global--icon--color--nonstatus--on-blue--default: var(--pf-t--global--icon--color--regular); --pf-t--global--icon--color--nonstatus--on-blue--hover: var(--pf-t--global--icon--color--regular); --pf-t--global--icon--color--nonstatus--on-gray--clicked: var(--pf-t--global--icon--color--regular); --pf-t--global--icon--color--nonstatus--on-gray--default: var(--pf-t--global--icon--color--regular); --pf-t--global--icon--color--nonstatus--on-gray--hover: var(--pf-t--global--icon--color--regular); --pf-t--global--icon--color--nonstatus--on-green--clicked: var(--pf-t--global--icon--color--regular); --pf-t--global--icon--color--nonstatus--on-green--default: var(--pf-t--global--icon--color--regular); --pf-t--global--icon--color--nonstatus--on-green--hover: var(--pf-t--global--icon--color--regular); --pf-t--global--icon--color--nonstatus--on-orange--clicked: var(--pf-t--global--icon--color--regular); --pf-t--global--icon--color--nonstatus--on-orange--default: var(--pf-t--global--icon--color--regular); --pf-t--global--icon--color--nonstatus--on-orange--hover: var(--pf-t--global--icon--color--regular); --pf-t--global--icon--color--nonstatus--on-orangered--clicked: var(--pf-t--global--icon--color--regular); --pf-t--global--icon--color--nonstatus--on-orangered--default: var(--pf-t--global--icon--color--regular); --pf-t--global--icon--color--nonstatus--on-orangered--hover: var(--pf-t--global--icon--color--regular); --pf-t--global--icon--color--nonstatus--on-purple--clicked: var(--pf-t--global--icon--color--regular); --pf-t--global--icon--color--nonstatus--on-purple--default: var(--pf-t--global--icon--color--regular); --pf-t--global--icon--color--nonstatus--on-purple--hover: var(--pf-t--global--icon--color--regular); --pf-t--global--icon--color--nonstatus--on-red--clicked: var(--pf-t--global--icon--color--regular); --pf-t--global--icon--color--nonstatus--on-red--default: var(--pf-t--global--icon--color--regular); --pf-t--global--icon--color--nonstatus--on-red--hover: var(--pf-t--global--icon--color--regular); --pf-t--global--icon--color--nonstatus--on-teal--clicked: var(--pf-t--global--icon--color--regular); --pf-t--global--icon--color--nonstatus--on-teal--default: var(--pf-t--global--icon--color--regular); --pf-t--global--icon--color--nonstatus--on-teal--hover: var(--pf-t--global--icon--color--regular); --pf-t--global--icon--color--nonstatus--on-yellow--clicked: var(--pf-t--global--icon--color--regular); --pf-t--global--icon--color--nonstatus--on-yellow--default: var(--pf-t--global--icon--color--regular); --pf-t--global--icon--color--nonstatus--on-yellow--hover: var(--pf-t--global--icon--color--regular); --pf-t--global--icon--color--on-brand--clicked: var(--pf-t--global--icon--color--inverse); --pf-t--global--icon--color--on-brand--default: var(--pf-t--global--icon--color--inverse); --pf-t--global--icon--color--on-brand--hover: var(--pf-t--global--icon--color--inverse); --pf-t--global--icon--color--status--custom--clicked: var(--pf-t--global--color--status--custom--clicked); --pf-t--global--icon--color--status--custom--default: var(--pf-t--global--color--status--custom--default); --pf-t--global--icon--color--status--custom--hover: var(--pf-t--global--color--status--custom--hover); --pf-t--global--icon--color--status--info--clicked: var(--pf-t--global--color--status--info--clicked); --pf-t--global--icon--color--status--info--default: var(--pf-t--global--color--status--info--default); --pf-t--global--icon--color--status--info--hover: var(--pf-t--global--color--status--info--hover); --pf-t--global--icon--color--status--on-custom--clicked: var(--pf-t--global--icon--color--inverse); --pf-t--global--icon--color--status--on-custom--default: var(--pf-t--global--icon--color--inverse); --pf-t--global--icon--color--status--on-custom--hover: var(--pf-t--global--icon--color--inverse); --pf-t--global--icon--color--status--on-danger--clicked: var(--pf-t--global--icon--color--inverse); --pf-t--global--icon--color--status--on-danger--default: var(--pf-t--global--icon--color--inverse); --pf-t--global--icon--color--status--on-danger--hover: var(--pf-t--global--icon--color--inverse); --pf-t--global--icon--color--status--on-info--clicked: var(--pf-t--global--icon--color--inverse); --pf-t--global--icon--color--status--on-info--default: var(--pf-t--global--icon--color--inverse); --pf-t--global--icon--color--status--on-info--hover: var(--pf-t--global--icon--color--inverse); --pf-t--global--icon--color--status--on-success--clicked: var(--pf-t--global--icon--color--inverse); --pf-t--global--icon--color--status--on-success--default: var(--pf-t--global--icon--color--inverse); --pf-t--global--icon--color--status--on-success--hover: var(--pf-t--global--icon--color--inverse); --pf-t--global--icon--color--status--on-warning--clicked: var(--pf-t--global--icon--color--inverse); --pf-t--global--icon--color--status--on-warning--default: var(--pf-t--global--icon--color--inverse); --pf-t--global--icon--color--status--on-warning--hover: var(--pf-t--global--icon--color--inverse); --pf-t--global--icon--color--status--unread--on-attention--clicked: var(--pf-t--global--icon--color--inverse); --pf-t--global--icon--color--status--unread--on-attention--default: var(--pf-t--global--icon--color--inverse); --pf-t--global--icon--color--status--unread--on-attention--hover: var(--pf-t--global--icon--color--inverse); --pf-t--global--icon--color--status--unread--on-default--clicked: var(--pf-t--global--icon--color--inverse); --pf-t--global--icon--color--status--unread--on-default--default: var(--pf-t--global--icon--color--inverse); --pf-t--global--icon--color--status--unread--on-default--hover: var(--pf-t--global--icon--color--inverse); --pf-t--global--icon--size--font--body--default: var(--pf-t--global--font--size--body--default); --pf-t--global--icon--size--font--body--lg: var(--pf-t--global--font--size--body--lg); --pf-t--global--icon--size--font--body--sm: var(--pf-t--global--font--size--body--sm); --pf-t--global--icon--size--font--heading--h1: var(--pf-t--global--font--size--heading--h1); --pf-t--global--icon--size--font--heading--h2: var(--pf-t--global--font--size--heading--h2); --pf-t--global--icon--size--font--heading--h3: var(--pf-t--global--font--size--heading--h3); --pf-t--global--icon--size--font--heading--h4: var(--pf-t--global--font--size--heading--h4); --pf-t--global--icon--size--font--heading--h5: var(--pf-t--global--font--size--heading--h5); --pf-t--global--icon--size--font--heading--h6: var(--pf-t--global--font--size--heading--h6); --pf-t--global--text--color--nonstatus--on-blue--clicked: var(--pf-t--global--text--color--regular); --pf-t--global--text--color--nonstatus--on-blue--default: var(--pf-t--global--text--color--regular); --pf-t--global--text--color--nonstatus--on-blue--hover: var(--pf-t--global--text--color--regular); --pf-t--global--text--color--nonstatus--on-gray--clicked: var(--pf-t--global--text--color--regular); --pf-t--global--text--color--nonstatus--on-gray--default: var(--pf-t--global--text--color--regular); --pf-t--global--text--color--nonstatus--on-gray--hover: var(--pf-t--global--text--color--regular); --pf-t--global--text--color--nonstatus--on-green--clicked: var(--pf-t--global--text--color--regular); --pf-t--global--text--color--nonstatus--on-green--default: var(--pf-t--global--text--color--regular); --pf-t--global--text--color--nonstatus--on-green--hover: var(--pf-t--global--text--color--regular); --pf-t--global--text--color--nonstatus--on-orange--clicked: var(--pf-t--global--text--color--regular); --pf-t--global--text--color--nonstatus--on-orange--default: var(--pf-t--global--text--color--regular); --pf-t--global--text--color--nonstatus--on-orange--hover: var(--pf-t--global--text--color--regular); --pf-t--global--text--color--nonstatus--on-orangered--clicked: var(--pf-t--global--text--color--regular); --pf-t--global--text--color--nonstatus--on-orangered--default: var(--pf-t--global--text--color--regular); --pf-t--global--text--color--nonstatus--on-orangered--hover: var(--pf-t--global--text--color--regular); --pf-t--global--text--color--nonstatus--on-purple--clicked: var(--pf-t--global--text--color--regular); --pf-t--global--text--color--nonstatus--on-purple--default: var(--pf-t--global--text--color--regular); --pf-t--global--text--color--nonstatus--on-purple--hover: var(--pf-t--global--text--color--regular); --pf-t--global--text--color--nonstatus--on-red--clicked: var(--pf-t--global--text--color--regular); --pf-t--global--text--color--nonstatus--on-red--default: var(--pf-t--global--text--color--regular); --pf-t--global--text--color--nonstatus--on-red--hover: var(--pf-t--global--text--color--regular); --pf-t--global--text--color--nonstatus--on-teal--clicked: var(--pf-t--global--text--color--regular); --pf-t--global--text--color--nonstatus--on-teal--default: var(--pf-t--global--text--color--regular); --pf-t--global--text--color--nonstatus--on-teal--hover: var(--pf-t--global--text--color--regular); --pf-t--global--text--color--nonstatus--on-yellow--clicked: var(--pf-t--global--text--color--regular); --pf-t--global--text--color--nonstatus--on-yellow--default: var(--pf-t--global--text--color--regular); --pf-t--global--text--color--nonstatus--on-yellow--hover: var(--pf-t--global--text--color--regular); --pf-t--global--text--color--on-brand--clicked: var(--pf-t--global--text--color--inverse); --pf-t--global--text--color--on-brand--default: var(--pf-t--global--text--color--inverse); --pf-t--global--text--color--on-brand--hover: var(--pf-t--global--text--color--inverse); --pf-t--global--text--color--placeholder: var(--pf-t--global--text--color--subtle); --pf-t--global--text--color--status--custom--clicked: var(--pf-t--global--color--status--custom--clicked); --pf-t--global--text--color--status--custom--default: var(--pf-t--global--color--status--custom--default); --pf-t--global--text--color--status--custom--hover: var(--pf-t--global--color--status--custom--hover); --pf-t--global--text--color--status--danger--clicked: var(--pf-t--global--color--status--danger--clicked); --pf-t--global--text--color--status--danger--default: var(--pf-t--global--color--status--danger--default); --pf-t--global--text--color--status--danger--hover: var(--pf-t--global--color--status--danger--hover); --pf-t--global--text--color--status--info--clicked: var(--pf-t--global--color--status--info--clicked); --pf-t--global--text--color--status--info--default: var(--pf-t--global--color--status--info--default); --pf-t--global--text--color--status--info--hover: var(--pf-t--global--color--status--info--hover); --pf-t--global--text--color--status--on-custom--clicked: var(--pf-t--global--text--color--inverse); --pf-t--global--text--color--status--on-custom--default: var(--pf-t--global--text--color--inverse); --pf-t--global--text--color--status--on-custom--hover: var(--pf-t--global--text--color--inverse); --pf-t--global--text--color--status--on-danger--clicked: var(--pf-t--global--icon--color--inverse); --pf-t--global--text--color--status--on-danger--default: var(--pf-t--global--text--color--inverse); --pf-t--global--text--color--status--on-danger--hover: var(--pf-t--global--text--color--inverse); --pf-t--global--text--color--status--on-info--clicked: var(--pf-t--global--text--color--inverse); --pf-t--global--text--color--status--on-info--default: var(--pf-t--global--text--color--inverse); --pf-t--global--text--color--status--on-info--hover: var(--pf-t--global--text--color--inverse); --pf-t--global--text--color--status--on-success--clicked: var(--pf-t--global--text--color--inverse); --pf-t--global--text--color--status--on-success--default: var(--pf-t--global--text--color--inverse); --pf-t--global--text--color--status--on-success--hover: var(--pf-t--global--text--color--inverse); --pf-t--global--text--color--status--on-warning--clicked: var(--pf-t--global--text--color--inverse); --pf-t--global--text--color--status--on-warning--default: var(--pf-t--global--text--color--inverse); --pf-t--global--text--color--status--on-warning--hover: var(--pf-t--global--text--color--inverse); --pf-t--global--text--color--status--unread--on-attention--clicked: var(--pf-t--global--text--color--inverse); --pf-t--global--text--color--status--unread--on-attention--default: var(--pf-t--global--text--color--inverse); --pf-t--global--text--color--status--unread--on-attention--hover: var(--pf-t--global--text--color--inverse); --pf-t--global--text--color--status--unread--on-default--clicked: var(--pf-t--global--text--color--inverse); --pf-t--global--text--color--status--unread--on-default--default: var(--pf-t--global--text--color--inverse); --pf-t--global--text--color--status--unread--on-default--hover: var(--pf-t--global--text--color--inverse); --pf-t--global--color--status--read--on-secondary: var(--pf-t--global--background--color--control--default); } :root:where(.pf-v6-theme-high-contrast.pf-v6-theme-dark) { --pf-t--global--background--color--action--plain--default: rgba(0, 0, 0, 0.0000); --pf-t--global--dark--background--color--500: rgba(21, 21, 21, 0.8000); --pf-t--global--dark--background--color--600: rgba(199, 199, 199, 0.1500); --pf-t--global--dark--box-shadow--color--100: rgba(0, 0, 0, 0.5000); --pf-t--global--dark--box-shadow--color--200: rgba(0, 0, 0, 0.7000); --pf-t--global--background--color--action--plain--clicked: var(--pf-t--global--dark--background--color--600); --pf-t--global--background--color--action--plain--hover: var(--pf-t--global--dark--background--color--600); --pf-t--global--background--color--backdrop--default: var(--pf-t--global--dark--background--color--500); --pf-t--global--background--color--primary--default: var(--pf-t--color--black); --pf-t--global--background--color--tertiary--default: var(--pf-t--global--dark--background--color--600); --pf-t--global--box-shadow--color--lg--default: var(--pf-t--global--dark--box-shadow--color--100); --pf-t--global--box-shadow--color--lg--directional: var(--pf-t--global--dark--box-shadow--color--200); --pf-t--global--box-shadow--color--md--default: var(--pf-t--global--dark--box-shadow--color--100); --pf-t--global--box-shadow--color--md--directional: var(--pf-t--global--dark--box-shadow--color--200); --pf-t--global--box-shadow--color--sm--default: var(--pf-t--global--dark--box-shadow--color--100); --pf-t--global--box-shadow--color--sm--directional: var(--pf-t--global--dark--box-shadow--color--200); --pf-t--global--dark--background--color--100: var(--pf-t--color--gray--95); --pf-t--global--dark--background--color--200: var(--pf-t--color--gray--80); --pf-t--global--dark--background--color--300: var(--pf-t--color--gray--70); --pf-t--global--dark--background--color--400: var(--pf-t--color--gray--10); --pf-t--global--dark--background--color--450: var(--pf-t--color--gray--20); --pf-t--global--dark--background--color--highlight--100: var(--pf-t--color--yellow--20); --pf-t--global--dark--background--color--highlight--200: var(--pf-t--color--yellow--30); --pf-t--global--dark--border--color--100: var(--pf-t--color--gray--50); --pf-t--global--dark--border--color--200: var(--pf-t--color--gray--40); --pf-t--global--dark--border--color--300: var(--pf-t--color--gray--30); --pf-t--global--dark--border--color--50: var(--pf-t--color--gray--60); --pf-t--global--dark--color--brand--100: var(--pf-t--color--blue--30); --pf-t--global--dark--color--brand--200: var(--pf-t--color--blue--20); --pf-t--global--dark--color--brand--300: var(--pf-t--color--blue--10); --pf-t--global--dark--color--disabled--100: var(--pf-t--color--gray--40); --pf-t--global--dark--color--disabled--200: var(--pf-t--color--gray--50); --pf-t--global--dark--color--disabled--300: var(--pf-t--color--gray--70); --pf-t--global--dark--color--disabled--400: var(--pf-t--color--gray--90); --pf-t--global--dark--color--favorite--100: var(--pf-t--color--yellow--30); --pf-t--global--dark--color--favorite--200: var(--pf-t--color--yellow--20); --pf-t--global--dark--color--nonstatus--blue--100: var(--pf-t--color--blue--30); --pf-t--global--dark--color--nonstatus--blue--200: var(--pf-t--color--blue--20); --pf-t--global--dark--color--nonstatus--blue--300: var(--pf-t--color--blue--10); --pf-t--global--dark--color--nonstatus--gray--100: var(--pf-t--color--gray--60); --pf-t--global--dark--color--nonstatus--gray--200: var(--pf-t--color--gray--50); --pf-t--global--dark--color--nonstatus--gray--300: var(--pf-t--color--gray--40); --pf-t--global--dark--color--nonstatus--gray--50: var(--pf-t--color--gray--70); --pf-t--global--dark--color--nonstatus--green--100: var(--pf-t--color--green--30); --pf-t--global--dark--color--nonstatus--green--200: var(--pf-t--color--green--20); --pf-t--global--dark--color--nonstatus--green--300: var(--pf-t--color--green--10); --pf-t--global--dark--color--nonstatus--orange--100: var(--pf-t--color--orange--30); --pf-t--global--dark--color--nonstatus--orange--200: var(--pf-t--color--orange--20); --pf-t--global--dark--color--nonstatus--orange--300: var(--pf-t--color--orange--10); --pf-t--global--dark--color--nonstatus--orangered--100: var(--pf-t--color--red-orange--30); --pf-t--global--dark--color--nonstatus--orangered--200: var(--pf-t--color--red-orange--20); --pf-t--global--dark--color--nonstatus--orangered--300: var(--pf-t--color--red-orange--10); --pf-t--global--dark--color--nonstatus--purple--100: var(--pf-t--color--purple--30); --pf-t--global--dark--color--nonstatus--purple--200: var(--pf-t--color--purple--20); --pf-t--global--dark--color--nonstatus--purple--300: var(--pf-t--color--purple--10); --pf-t--global--dark--color--nonstatus--red--100: var(--pf-t--color--red--30); --pf-t--global--dark--color--nonstatus--red--200: var(--pf-t--color--red--20); --pf-t--global--dark--color--nonstatus--red--300: var(--pf-t--color--red--10); --pf-t--global--dark--color--nonstatus--teal--100: var(--pf-t--color--teal--30); --pf-t--global--dark--color--nonstatus--teal--200: var(--pf-t--color--teal--20); --pf-t--global--dark--color--nonstatus--teal--300: var(--pf-t--color--teal--10); --pf-t--global--dark--color--nonstatus--yellow--100: var(--pf-t--color--yellow--30); --pf-t--global--dark--color--nonstatus--yellow--200: var(--pf-t--color--yellow--20); --pf-t--global--dark--color--nonstatus--yellow--300: var(--pf-t--color--yellow--10); --pf-t--global--dark--color--severity--critical--100: var(--pf-t--color--red-orange--50); --pf-t--global--dark--color--severity--critical--200: var(--pf-t--color--red-orange--40); --pf-t--global--dark--color--severity--important--100: var(--pf-t--color--orange--40); --pf-t--global--dark--color--severity--minor--100: var(--pf-t--color--gray--30); --pf-t--global--dark--color--severity--moderate--100: var(--pf-t--color--yellow--30); --pf-t--global--dark--color--severity--none--100: var(--pf-t--color--blue--30); --pf-t--global--dark--color--severity--undefined--100: var(--pf-t--color--gray--40); --pf-t--global--dark--color--status--custom--100: var(--pf-t--color--teal--40); --pf-t--global--dark--color--status--custom--200: var(--pf-t--color--teal--30); --pf-t--global--dark--color--status--custom--300: var(--pf-t--color--teal--20); --pf-t--global--dark--color--status--danger--100: var(--pf-t--color--red-orange--50); --pf-t--global--dark--color--status--danger--200: var(--pf-t--color--red-orange--40); --pf-t--global--dark--color--status--danger--250: var(--pf-t--color--red-orange--30); --pf-t--global--dark--color--status--danger--300: var(--pf-t--color--red-orange--20); --pf-t--global--dark--color--status--info--100: var(--pf-t--color--purple--30); --pf-t--global--dark--color--status--info--200: var(--pf-t--color--purple--20); --pf-t--global--dark--color--status--info--300: var(--pf-t--color--purple--10); --pf-t--global--dark--color--status--success--100: var(--pf-t--color--green--40); --pf-t--global--dark--color--status--success--200: var(--pf-t--color--green--30); --pf-t--global--dark--color--status--success--300: var(--pf-t--color--green--20); --pf-t--global--dark--color--status--warning--100: var(--pf-t--color--yellow--30); --pf-t--global--dark--color--status--warning--200: var(--pf-t--color--yellow--20); --pf-t--global--dark--focus-ring--color--100: var(--pf-t--color--blue--30); --pf-t--global--dark--icon--color--100: var(--pf-t--color--gray--10); --pf-t--global--dark--icon--color--200: var(--pf-t--color--gray--40); --pf-t--global--dark--icon--color--300: var(--pf-t--color--gray--90); --pf-t--global--dark--text--color--100: var(--pf-t--color--white); --pf-t--global--dark--text--color--200: var(--pf-t--color--gray--30); --pf-t--global--dark--text--color--300: var(--pf-t--color--gray--90); --pf-t--global--dark--text--color--400: var(--pf-t--color--red-orange--30); --pf-t--global--dark--text--color--link--100: var(--pf-t--color--blue--20); --pf-t--global--dark--text--color--link--200: var(--pf-t--color--blue--10); --pf-t--global--dark--text--color--link--300: var(--pf-t--color--purple--30); --pf-t--global--dark--text--color--link--400: var(--pf-t--color--purple--20); --pf-t--global--background--color--action--plain--alt--clicked: var(--pf-t--global--background--color--primary--default); --pf-t--global--background--color--action--plain--alt--hover: var(--pf-t--global--background--color--primary--default); --pf-t--global--background--color--control--default: var(--pf-t--global--dark--background--color--100); --pf-t--global--background--color--control--read-only: var(--pf-t--global--dark--background--color--300); --pf-t--global--background--color--disabled--default: var(--pf-t--global--dark--color--disabled--200); --pf-t--global--background--color--floating--clicked: var(--pf-t--global--dark--background--color--300); --pf-t--global--background--color--floating--default: var(--pf-t--global--dark--background--color--200); --pf-t--global--background--color--floating--hover: var(--pf-t--global--dark--background--color--300); --pf-t--global--background--color--highlight--clicked: var(--pf-t--global--dark--background--color--highlight--200); --pf-t--global--background--color--highlight--default: var(--pf-t--global--dark--background--color--highlight--100); --pf-t--global--background--color--inverse--clicked: var(--pf-t--global--dark--background--color--450); --pf-t--global--background--color--inverse--default: var(--pf-t--global--dark--background--color--400); --pf-t--global--background--color--inverse--hover: var(--pf-t--global--dark--background--color--450); --pf-t--global--background--color--primary--clicked: var(--pf-t--global--dark--background--color--200); --pf-t--global--background--color--primary--hover: var(--pf-t--global--dark--background--color--200); --pf-t--global--background--color--secondary--clicked: var(--pf-t--global--dark--background--color--200); --pf-t--global--background--color--secondary--default: var(--pf-t--global--dark--background--color--100); --pf-t--global--background--color--secondary--hover: var(--pf-t--global--dark--background--color--200); --pf-t--global--border--color--alt: var(--pf-t--global--background--color--primary--default); --pf-t--global--border--color--clicked: var(--pf-t--global--dark--color--brand--200); --pf-t--global--border--color--control--read-only: var(--pf-t--global--dark--border--color--50); --pf-t--global--border--color--default: var(--pf-t--global--dark--border--color--300); --pf-t--global--border--color--disabled: var(--pf-t--global--dark--color--disabled--100); --pf-t--global--border--color--hover: var(--pf-t--global--dark--color--brand--100); --pf-t--global--border--color--nonstatus--blue--clicked: var(--pf-t--global--dark--color--nonstatus--blue--200); --pf-t--global--border--color--nonstatus--blue--default: var(--pf-t--global--dark--color--nonstatus--blue--100); --pf-t--global--border--color--nonstatus--blue--hover: var(--pf-t--global--dark--color--nonstatus--blue--200); --pf-t--global--border--color--nonstatus--gray--clicked: var(--pf-t--global--dark--color--nonstatus--gray--300); --pf-t--global--border--color--nonstatus--gray--default: var(--pf-t--global--dark--color--nonstatus--gray--200); --pf-t--global--border--color--nonstatus--gray--hover: var(--pf-t--global--dark--color--nonstatus--gray--300); --pf-t--global--border--color--nonstatus--green--clicked: var(--pf-t--global--dark--color--nonstatus--green--200); --pf-t--global--border--color--nonstatus--green--default: var(--pf-t--global--dark--color--nonstatus--green--100); --pf-t--global--border--color--nonstatus--green--hover: var(--pf-t--global--dark--color--nonstatus--green--200); --pf-t--global--border--color--nonstatus--orange--clicked: var(--pf-t--global--dark--color--nonstatus--orange--200); --pf-t--global--border--color--nonstatus--orange--default: var(--pf-t--global--dark--color--nonstatus--orange--100); --pf-t--global--border--color--nonstatus--orange--hover: var(--pf-t--global--dark--color--nonstatus--orange--200); --pf-t--global--border--color--nonstatus--orangered--clicked: var(--pf-t--global--dark--color--nonstatus--orangered--200); --pf-t--global--border--color--nonstatus--orangered--default: var(--pf-t--global--dark--color--nonstatus--orangered--100); --pf-t--global--border--color--nonstatus--orangered--hover: var(--pf-t--global--dark--color--nonstatus--orangered--200); --pf-t--global--border--color--nonstatus--purple--clicked: var(--pf-t--global--dark--color--nonstatus--purple--200); --pf-t--global--border--color--nonstatus--purple--default: var(--pf-t--global--dark--color--nonstatus--purple--100); --pf-t--global--border--color--nonstatus--purple--hover: var(--pf-t--global--dark--color--nonstatus--purple--200); --pf-t--global--border--color--nonstatus--red--clicked: var(--pf-t--global--dark--color--nonstatus--red--200); --pf-t--global--border--color--nonstatus--red--default: var(--pf-t--global--dark--color--nonstatus--red--100); --pf-t--global--border--color--nonstatus--red--hover: var(--pf-t--global--dark--color--nonstatus--red--200); --pf-t--global--border--color--nonstatus--teal--clicked: var(--pf-t--global--dark--color--nonstatus--teal--200); --pf-t--global--border--color--nonstatus--teal--default: var(--pf-t--global--dark--color--nonstatus--teal--100); --pf-t--global--border--color--nonstatus--teal--hover: var(--pf-t--global--dark--color--nonstatus--teal--200); --pf-t--global--border--color--nonstatus--yellow--clicked: var(--pf-t--global--dark--color--nonstatus--yellow--200); --pf-t--global--border--color--nonstatus--yellow--default: var(--pf-t--global--dark--color--nonstatus--yellow--100); --pf-t--global--border--color--nonstatus--yellow--hover: var(--pf-t--global--dark--color--nonstatus--yellow--200); --pf-t--global--border--color--on-secondary: var(--pf-t--global--dark--border--color--300); --pf-t--global--color--brand--clicked: var(--pf-t--global--dark--color--brand--200); --pf-t--global--color--brand--default: var(--pf-t--global--dark--color--brand--100); --pf-t--global--color--brand--hover: var(--pf-t--global--dark--color--brand--200); --pf-t--global--color--favorite--clicked: var(--pf-t--global--dark--color--favorite--200); --pf-t--global--color--favorite--default: var(--pf-t--global--dark--color--favorite--100); --pf-t--global--color--favorite--hover: var(--pf-t--global--dark--color--favorite--200); --pf-t--global--color--nonstatus--blue--clicked: var(--pf-t--global--dark--color--nonstatus--blue--200); --pf-t--global--color--nonstatus--blue--default: var(--pf-t--global--dark--color--nonstatus--blue--100); --pf-t--global--color--nonstatus--blue--hover: var(--pf-t--global--dark--color--nonstatus--blue--200); --pf-t--global--color--nonstatus--gray--clicked: var(--pf-t--global--dark--color--nonstatus--gray--100); --pf-t--global--color--nonstatus--gray--default: var(--pf-t--global--dark--color--nonstatus--gray--50); --pf-t--global--color--nonstatus--gray--hover: var(--pf-t--global--dark--color--nonstatus--gray--100); --pf-t--global--color--nonstatus--green--clicked: var(--pf-t--global--dark--color--nonstatus--green--200); --pf-t--global--color--nonstatus--green--default: var(--pf-t--global--dark--color--nonstatus--green--100); --pf-t--global--color--nonstatus--green--hover: var(--pf-t--global--dark--color--nonstatus--green--200); --pf-t--global--color--nonstatus--orange--clicked: var(--pf-t--global--dark--color--nonstatus--orange--200); --pf-t--global--color--nonstatus--orange--default: var(--pf-t--global--dark--color--nonstatus--orange--100); --pf-t--global--color--nonstatus--orange--hover: var(--pf-t--global--dark--color--nonstatus--orange--200); --pf-t--global--color--nonstatus--orangered--clicked: var(--pf-t--global--dark--color--nonstatus--orangered--200); --pf-t--global--color--nonstatus--orangered--default: var(--pf-t--global--dark--color--nonstatus--orangered--100); --pf-t--global--color--nonstatus--orangered--hover: var(--pf-t--global--dark--color--nonstatus--orangered--200); --pf-t--global--color--nonstatus--purple--clicked: var(--pf-t--global--dark--color--nonstatus--purple--200); --pf-t--global--color--nonstatus--purple--default: var(--pf-t--global--dark--color--nonstatus--purple--100); --pf-t--global--color--nonstatus--purple--hover: var(--pf-t--global--dark--color--nonstatus--purple--200); --pf-t--global--color--nonstatus--red--clicked: var(--pf-t--global--dark--color--nonstatus--red--200); --pf-t--global--color--nonstatus--red--default: var(--pf-t--global--dark--color--nonstatus--red--100); --pf-t--global--color--nonstatus--red--hover: var(--pf-t--global--dark--color--nonstatus--red--200); --pf-t--global--color--nonstatus--teal--clicked: var(--pf-t--global--dark--color--nonstatus--teal--200); --pf-t--global--color--nonstatus--teal--default: var(--pf-t--global--dark--color--nonstatus--teal--100); --pf-t--global--color--nonstatus--teal--hover: var(--pf-t--global--dark--color--nonstatus--teal--200); --pf-t--global--color--nonstatus--yellow--clicked: var(--pf-t--global--dark--color--nonstatus--yellow--200); --pf-t--global--color--nonstatus--yellow--default: var(--pf-t--global--dark--color--nonstatus--yellow--100); --pf-t--global--color--nonstatus--yellow--hover: var(--pf-t--global--dark--color--nonstatus--yellow--200); --pf-t--global--color--status--custom--clicked: var(--pf-t--global--dark--color--status--custom--300); --pf-t--global--color--status--custom--default: var(--pf-t--global--dark--color--status--custom--200); --pf-t--global--color--status--custom--hover: var(--pf-t--global--dark--color--status--custom--300); --pf-t--global--color--status--danger--clicked: var(--pf-t--global--dark--color--status--danger--250); --pf-t--global--color--status--danger--default: var(--pf-t--global--dark--color--status--danger--200); --pf-t--global--color--status--danger--hover: var(--pf-t--global--dark--color--status--danger--250); --pf-t--global--color--status--info--clicked: var(--pf-t--global--dark--color--status--info--200); --pf-t--global--color--status--info--default: var(--pf-t--global--dark--color--status--info--100); --pf-t--global--color--status--info--hover: var(--pf-t--global--dark--color--status--info--200); --pf-t--global--color--status--success--clicked: var(--pf-t--global--dark--color--status--success--300); --pf-t--global--color--status--success--default: var(--pf-t--global--dark--color--status--success--200); --pf-t--global--color--status--success--hover: var(--pf-t--global--dark--color--status--success--300); --pf-t--global--color--status--warning--clicked: var(--pf-t--global--dark--color--status--warning--200); --pf-t--global--color--status--warning--default: var(--pf-t--global--dark--color--status--warning--100); --pf-t--global--color--status--warning--hover: var(--pf-t--global--dark--color--status--warning--200); --pf-t--global--focus-ring--color--default: var(--pf-t--global--dark--focus-ring--color--100); --pf-t--global--icon--color--brand--clicked: var(--pf-t--global--dark--color--brand--300); --pf-t--global--icon--color--brand--default: var(--pf-t--global--dark--color--brand--200); --pf-t--global--icon--color--brand--hover: var(--pf-t--global--dark--color--brand--300); --pf-t--global--icon--color--disabled: var(--pf-t--global--dark--color--disabled--200); --pf-t--global--icon--color--inverse: var(--pf-t--global--dark--icon--color--300); --pf-t--global--icon--color--on-disabled: var(--pf-t--global--dark--color--disabled--300); --pf-t--global--icon--color--regular: var(--pf-t--global--dark--icon--color--100); --pf-t--global--icon--color--severity--critical--default: var(--pf-t--global--dark--color--severity--critical--200); --pf-t--global--icon--color--severity--important--default: var(--pf-t--global--dark--color--severity--important--100); --pf-t--global--icon--color--severity--minor--default: var(--pf-t--global--dark--color--severity--minor--100); --pf-t--global--icon--color--severity--moderate--default: var(--pf-t--global--dark--color--severity--moderate--100); --pf-t--global--icon--color--severity--none--default: var(--pf-t--global--dark--color--severity--none--100); --pf-t--global--icon--color--severity--undefined--default: var(--pf-t--global--dark--color--severity--undefined--100); --pf-t--global--icon--color--subtle: var(--pf-t--global--dark--icon--color--200); --pf-t--global--text--color--brand--clicked: var(--pf-t--global--dark--color--brand--300); --pf-t--global--text--color--brand--default: var(--pf-t--global--dark--color--brand--200); --pf-t--global--text--color--brand--hover: var(--pf-t--global--dark--color--brand--300); --pf-t--global--text--color--disabled: var(--pf-t--global--dark--color--disabled--200); --pf-t--global--text--color--inverse: var(--pf-t--global--dark--text--color--300); --pf-t--global--text--color--link--default: var(--pf-t--global--dark--text--color--link--100); --pf-t--global--text--color--link--hover: var(--pf-t--global--dark--text--color--link--200); --pf-t--global--text--color--link--visited: var(--pf-t--global--dark--text--color--link--400); --pf-t--global--text--color--on-disabled: var(--pf-t--global--dark--color--disabled--400); --pf-t--global--text--color--on-highlight: var(--pf-t--global--dark--text--color--300); --pf-t--global--text--color--regular: var(--pf-t--global--dark--text--color--100); --pf-t--global--text--color--required: var(--pf-t--global--dark--text--color--400); --pf-t--global--text--color--status--danger--clicked: var(--pf-t--global--dark--color--status--danger--300); --pf-t--global--text--color--status--danger--default: var(--pf-t--global--dark--color--status--danger--300); --pf-t--global--text--color--status--danger--hover: var(--pf-t--global--dark--color--status--danger--300); --pf-t--global--text--color--subtle: var(--pf-t--global--dark--text--color--200); --pf-t--global--border--color--brand--clicked: var(--pf-t--global--color--brand--clicked); --pf-t--global--border--color--brand--default: var(--pf-t--global--color--brand--default); --pf-t--global--border--color--brand--hover: var(--pf-t--global--color--brand--hover); --pf-t--global--border--color--high-contrast: var(--pf-t--global--border--color--default); --pf-t--global--border--color--main--default: var(--pf-t--global--border--color--default); --pf-t--global--border--color--status--custom--clicked: var(--pf-t--global--color--status--custom--clicked); --pf-t--global--border--color--status--custom--default: var(--pf-t--global--color--status--custom--default); --pf-t--global--border--color--status--custom--hover: var(--pf-t--global--color--status--custom--hover); --pf-t--global--border--color--status--danger--clicked: var(--pf-t--global--color--status--danger--clicked); --pf-t--global--border--color--status--danger--default: var(--pf-t--global--color--status--danger--default); --pf-t--global--border--color--status--danger--hover: var(--pf-t--global--color--status--danger--hover); --pf-t--global--border--color--status--info--clicked: var(--pf-t--global--color--status--info--clicked); --pf-t--global--border--color--status--info--default: var(--pf-t--global--color--status--info--default); --pf-t--global--border--color--status--info--hover: var(--pf-t--global--color--status--info--hover); --pf-t--global--border--color--status--success--clicked: var(--pf-t--global--color--status--success--clicked); --pf-t--global--border--color--status--success--default: var(--pf-t--global--color--status--success--default); --pf-t--global--border--color--status--success--hover: var(--pf-t--global--color--status--success--hover); --pf-t--global--border--color--status--warning--clicked: var(--pf-t--global--color--status--warning--clicked); --pf-t--global--border--color--status--warning--default: var(--pf-t--global--color--status--warning--default); --pf-t--global--border--color--status--warning--hover: var(--pf-t--global--color--status--warning--hover); --pf-t--global--color--status--read--on-primary: var(--pf-t--global--background--color--secondary--default); --pf-t--global--color--status--read--on-secondary: var(--pf-t--global--background--color--control--default); --pf-t--global--color--status--unread--attention--clicked: var(--pf-t--global--color--status--danger--clicked); --pf-t--global--color--status--unread--attention--default: var(--pf-t--global--color--status--danger--default); --pf-t--global--color--status--unread--attention--hover: var(--pf-t--global--color--status--danger--hover); --pf-t--global--color--status--unread--clicked: var(--pf-t--global--color--brand--clicked); --pf-t--global--color--status--unread--default: var(--pf-t--global--color--brand--default); --pf-t--global--color--status--unread--hover: var(--pf-t--global--color--brand--hover); --pf-t--global--icon--color--favorite--clicked: var(--pf-t--global--color--favorite--clicked); --pf-t--global--icon--color--favorite--default: var(--pf-t--global--color--favorite--default); --pf-t--global--icon--color--favorite--hover: var(--pf-t--global--color--favorite--hover); --pf-t--global--icon--color--nonstatus--on-blue--clicked: var(--pf-t--global--icon--color--inverse); --pf-t--global--icon--color--nonstatus--on-blue--default: var(--pf-t--global--icon--color--inverse); --pf-t--global--icon--color--nonstatus--on-blue--hover: var(--pf-t--global--icon--color--inverse); --pf-t--global--icon--color--nonstatus--on-gray--clicked: var(--pf-t--global--icon--color--regular); --pf-t--global--icon--color--nonstatus--on-gray--default: var(--pf-t--global--icon--color--regular); --pf-t--global--icon--color--nonstatus--on-gray--hover: var(--pf-t--global--icon--color--regular); --pf-t--global--icon--color--nonstatus--on-green--clicked: var(--pf-t--global--icon--color--inverse); --pf-t--global--icon--color--nonstatus--on-green--default: var(--pf-t--global--icon--color--inverse); --pf-t--global--icon--color--nonstatus--on-green--hover: var(--pf-t--global--icon--color--inverse); --pf-t--global--icon--color--nonstatus--on-orange--clicked: var(--pf-t--global--icon--color--inverse); --pf-t--global--icon--color--nonstatus--on-orange--default: var(--pf-t--global--icon--color--inverse); --pf-t--global--icon--color--nonstatus--on-orange--hover: var(--pf-t--global--icon--color--inverse); --pf-t--global--icon--color--nonstatus--on-orangered--clicked: var(--pf-t--global--icon--color--inverse); --pf-t--global--icon--color--nonstatus--on-orangered--default: var(--pf-t--global--icon--color--inverse); --pf-t--global--icon--color--nonstatus--on-orangered--hover: var(--pf-t--global--icon--color--inverse); --pf-t--global--icon--color--nonstatus--on-purple--clicked: var(--pf-t--global--icon--color--inverse); --pf-t--global--icon--color--nonstatus--on-purple--default: var(--pf-t--global--icon--color--inverse); --pf-t--global--icon--color--nonstatus--on-purple--hover: var(--pf-t--global--icon--color--inverse); --pf-t--global--icon--color--nonstatus--on-red--clicked: var(--pf-t--global--icon--color--inverse); --pf-t--global--icon--color--nonstatus--on-red--default: var(--pf-t--global--icon--color--inverse); --pf-t--global--icon--color--nonstatus--on-red--hover: var(--pf-t--global--icon--color--inverse); --pf-t--global--icon--color--nonstatus--on-teal--clicked: var(--pf-t--global--icon--color--inverse); --pf-t--global--icon--color--nonstatus--on-teal--default: var(--pf-t--global--icon--color--inverse); --pf-t--global--icon--color--nonstatus--on-teal--hover: var(--pf-t--global--icon--color--inverse); --pf-t--global--icon--color--nonstatus--on-yellow--clicked: var(--pf-t--global--icon--color--inverse); --pf-t--global--icon--color--nonstatus--on-yellow--default: var(--pf-t--global--icon--color--inverse); --pf-t--global--icon--color--nonstatus--on-yellow--hover: var(--pf-t--global--icon--color--inverse); --pf-t--global--icon--color--on-brand--clicked: var(--pf-t--global--icon--color--inverse); --pf-t--global--icon--color--on-brand--default: var(--pf-t--global--icon--color--inverse); --pf-t--global--icon--color--on-brand--hover: var(--pf-t--global--icon--color--inverse); --pf-t--global--icon--color--status--custom--clicked: var(--pf-t--global--color--status--custom--clicked); --pf-t--global--icon--color--status--custom--default: var(--pf-t--global--color--status--custom--default); --pf-t--global--icon--color--status--custom--hover: var(--pf-t--global--color--status--custom--hover); --pf-t--global--icon--color--status--danger--clicked: var(--pf-t--global--color--status--danger--clicked); --pf-t--global--icon--color--status--danger--default: var(--pf-t--global--color--status--danger--default); --pf-t--global--icon--color--status--danger--hover: var(--pf-t--global--color--status--danger--hover); --pf-t--global--icon--color--status--info--clicked: var(--pf-t--global--color--status--info--clicked); --pf-t--global--icon--color--status--info--default: var(--pf-t--global--color--status--info--default); --pf-t--global--icon--color--status--info--hover: var(--pf-t--global--color--status--info--hover); --pf-t--global--icon--color--status--on-custom--clicked: var(--pf-t--global--icon--color--inverse); --pf-t--global--icon--color--status--on-custom--default: var(--pf-t--global--icon--color--inverse); --pf-t--global--icon--color--status--on-custom--hover: var(--pf-t--global--icon--color--inverse); --pf-t--global--icon--color--status--on-danger--clicked: var(--pf-t--global--icon--color--inverse); --pf-t--global--icon--color--status--on-danger--default: var(--pf-t--global--icon--color--inverse); --pf-t--global--icon--color--status--on-danger--hover: var(--pf-t--global--icon--color--inverse); --pf-t--global--icon--color--status--on-info--clicked: var(--pf-t--global--icon--color--inverse); --pf-t--global--icon--color--status--on-info--default: var(--pf-t--global--icon--color--inverse); --pf-t--global--icon--color--status--on-info--hover: var(--pf-t--global--icon--color--inverse); --pf-t--global--icon--color--status--on-success--clicked: var(--pf-t--global--icon--color--inverse); --pf-t--global--icon--color--status--on-success--default: var(--pf-t--global--icon--color--inverse); --pf-t--global--icon--color--status--on-success--hover: var(--pf-t--global--icon--color--inverse); --pf-t--global--icon--color--status--on-warning--clicked: var(--pf-t--global--icon--color--inverse); --pf-t--global--icon--color--status--on-warning--default: var(--pf-t--global--icon--color--inverse); --pf-t--global--icon--color--status--on-warning--hover: var(--pf-t--global--icon--color--inverse); --pf-t--global--icon--color--status--success--clicked: var(--pf-t--global--color--status--success--clicked); --pf-t--global--icon--color--status--success--default: var(--pf-t--global--color--status--success--default); --pf-t--global--icon--color--status--success--hover: var(--pf-t--global--color--status--success--hover); --pf-t--global--icon--color--status--unread--on-attention--clicked: var(--pf-t--global--icon--color--inverse); --pf-t--global--icon--color--status--unread--on-attention--default: var(--pf-t--global--icon--color--inverse); --pf-t--global--icon--color--status--unread--on-attention--hover: var(--pf-t--global--icon--color--inverse); --pf-t--global--icon--color--status--unread--on-default--clicked: var(--pf-t--global--icon--color--inverse); --pf-t--global--icon--color--status--unread--on-default--default: var(--pf-t--global--icon--color--inverse); --pf-t--global--icon--color--status--unread--on-default--hover: var(--pf-t--global--icon--color--inverse); --pf-t--global--icon--color--status--warning--clicked: var(--pf-t--global--color--status--warning--clicked); --pf-t--global--icon--color--status--warning--default: var(--pf-t--global--color--status--warning--default); --pf-t--global--icon--color--status--warning--hover: var(--pf-t--global--color--status--warning--hover); --pf-t--global--text--color--nonstatus--on-blue--clicked: var(--pf-t--global--text--color--inverse); --pf-t--global--text--color--nonstatus--on-blue--default: var(--pf-t--global--text--color--inverse); --pf-t--global--text--color--nonstatus--on-blue--hover: var(--pf-t--global--text--color--inverse); --pf-t--global--text--color--nonstatus--on-gray--clicked: var(--pf-t--global--text--color--regular); --pf-t--global--text--color--nonstatus--on-gray--default: var(--pf-t--global--text--color--regular); --pf-t--global--text--color--nonstatus--on-gray--hover: var(--pf-t--global--text--color--regular); --pf-t--global--text--color--nonstatus--on-green--clicked: var(--pf-t--global--text--color--inverse); --pf-t--global--text--color--nonstatus--on-green--default: var(--pf-t--global--text--color--inverse); --pf-t--global--text--color--nonstatus--on-green--hover: var(--pf-t--global--text--color--inverse); --pf-t--global--text--color--nonstatus--on-orange--clicked: var(--pf-t--global--text--color--inverse); --pf-t--global--text--color--nonstatus--on-orange--default: var(--pf-t--global--text--color--inverse); --pf-t--global--text--color--nonstatus--on-orange--hover: var(--pf-t--global--text--color--inverse); --pf-t--global--text--color--nonstatus--on-orangered--clicked: var(--pf-t--global--text--color--inverse); --pf-t--global--text--color--nonstatus--on-orangered--default: var(--pf-t--global--text--color--inverse); --pf-t--global--text--color--nonstatus--on-orangered--hover: var(--pf-t--global--text--color--inverse); --pf-t--global--text--color--nonstatus--on-purple--clicked: var(--pf-t--global--text--color--inverse); --pf-t--global--text--color--nonstatus--on-purple--default: var(--pf-t--global--text--color--inverse); --pf-t--global--text--color--nonstatus--on-purple--hover: var(--pf-t--global--text--color--inverse); --pf-t--global--text--color--nonstatus--on-red--clicked: var(--pf-t--global--text--color--inverse); --pf-t--global--text--color--nonstatus--on-red--default: var(--pf-t--global--text--color--inverse); --pf-t--global--text--color--nonstatus--on-red--hover: var(--pf-t--global--text--color--inverse); --pf-t--global--text--color--nonstatus--on-teal--clicked: var(--pf-t--global--text--color--inverse); --pf-t--global--text--color--nonstatus--on-teal--default: var(--pf-t--global--text--color--inverse); --pf-t--global--text--color--nonstatus--on-teal--hover: var(--pf-t--global--text--color--inverse); --pf-t--global--text--color--nonstatus--on-yellow--clicked: var(--pf-t--global--text--color--inverse); --pf-t--global--text--color--nonstatus--on-yellow--default: var(--pf-t--global--text--color--inverse); --pf-t--global--text--color--nonstatus--on-yellow--hover: var(--pf-t--global--text--color--inverse); --pf-t--global--text--color--on-brand--clicked: var(--pf-t--global--text--color--inverse); --pf-t--global--text--color--on-brand--default: var(--pf-t--global--text--color--inverse); --pf-t--global--text--color--on-brand--hover: var(--pf-t--global--text--color--inverse); --pf-t--global--text--color--placeholder: var(--pf-t--global--text--color--subtle); --pf-t--global--text--color--status--custom--clicked: var(--pf-t--global--color--status--custom--clicked); --pf-t--global--text--color--status--custom--default: var(--pf-t--global--color--status--custom--default); --pf-t--global--text--color--status--custom--hover: var(--pf-t--global--color--status--custom--hover); --pf-t--global--text--color--status--info--clicked: var(--pf-t--global--color--status--info--clicked); --pf-t--global--text--color--status--info--default: var(--pf-t--global--color--status--info--default); --pf-t--global--text--color--status--info--hover: var(--pf-t--global--color--status--info--hover); --pf-t--global--text--color--status--on-custom--clicked: var(--pf-t--global--text--color--inverse); --pf-t--global--text--color--status--on-custom--default: var(--pf-t--global--text--color--inverse); --pf-t--global--text--color--status--on-custom--hover: var(--pf-t--global--text--color--inverse); --pf-t--global--text--color--status--on-danger--clicked: var(--pf-t--global--text--color--inverse); --pf-t--global--text--color--status--on-danger--default: var(--pf-t--global--text--color--inverse); --pf-t--global--text--color--status--on-danger--hover: var(--pf-t--global--text--color--inverse); --pf-t--global--text--color--status--on-info--clicked: var(--pf-t--global--text--color--inverse); --pf-t--global--text--color--status--on-info--default: var(--pf-t--global--text--color--inverse); --pf-t--global--text--color--status--on-info--hover: var(--pf-t--global--text--color--inverse); --pf-t--global--text--color--status--on-success--clicked: var(--pf-t--global--text--color--inverse); --pf-t--global--text--color--status--on-success--default: var(--pf-t--global--text--color--inverse); --pf-t--global--text--color--status--on-success--hover: var(--pf-t--global--text--color--inverse); --pf-t--global--text--color--status--on-warning--clicked: var(--pf-t--global--text--color--inverse); --pf-t--global--text--color--status--on-warning--default: var(--pf-t--global--text--color--inverse); --pf-t--global--text--color--status--on-warning--hover: var(--pf-t--global--text--color--inverse); --pf-t--global--text--color--status--success--clicked: var(--pf-t--global--color--status--success--clicked); --pf-t--global--text--color--status--success--default: var(--pf-t--global--color--status--success--default); --pf-t--global--text--color--status--success--hover: var(--pf-t--global--color--status--success--hover); --pf-t--global--text--color--status--unread--on-attention--clicked: var(--pf-t--global--text--color--inverse); --pf-t--global--text--color--status--unread--on-attention--default: var(--pf-t--global--text--color--inverse); --pf-t--global--text--color--status--unread--on-attention--hover: var(--pf-t--global--text--color--inverse); --pf-t--global--text--color--status--unread--on-default--clicked: var(--pf-t--global--text--color--inverse); --pf-t--global--text--color--status--unread--on-default--default: var(--pf-t--global--text--color--inverse); --pf-t--global--text--color--status--unread--on-default--hover: var(--pf-t--global--text--color--inverse); --pf-t--global--text--color--status--warning--clicked: var(--pf-t--global--color--status--warning--clicked); --pf-t--global--text--color--status--warning--default: var(--pf-t--global--color--status--warning--default); --pf-t--global--text--color--status--warning--hover: var(--pf-t--global--color--status--warning--hover); } :is(.pf-v6-m-dir-rtl, [dir=rtl]) { --pf-v6-global--inverse--multiplier: -1; }/** * ============================================================================= * IBERIA DESIGN SYSTEM - GLOBAL STYLES (BUNDLED) * ============================================================================= * * Archivo CSS bundled que contiene todos los tokens del sistema de diseño. * Este archivo se genera para distribución y no debe editarse directamente. * Para modificar tokens, edita los archivos individuales en src/tokens/ * * CONTENIDO: * 0. Fonts: Declaraciones @font-face para fuentes corporativas * 1. Colors: Tokens de color primitivos y semánticos * 2. Typography: Familias y pesos (tamaños via PatternFly tokens) * 3. Styles: Border radius y border width * 4. Grid: Breakpoints, columnas y spacing * 5. PatternFly Overrides: Tokens globales de PatternFly sobrescritos * 6. Semantic: Tokens legacy/PatternFly (para compatibilidad) */ /* ============================================ IBERIA FONTS - @font-face declarations ============================================ */ /* Iberia Headline - Light (300) */ @font-face { font-family: 'Iberia Headline'; src: url('../fonts/headline/IberiaHeadline-Light.otf') format('opentype'); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: 'Iberia Headline'; src: url('../fonts/headline/IberiaHeadline-LightItalic.otf') format('opentype'); font-weight: 300; font-style: italic; font-display: swap; } /* Iberia Headline - Regular (400) */ @font-face { font-family: 'Iberia Headline'; src: url('../fonts/headline/IberiaHeadline.otf') format('opentype'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Iberia Headline'; src: url('../fonts/headline/IberiaHeadline-Italic.otf') format('opentype'); font-weight: 400; font-style: italic; font-display: swap; } /* Iberia Headline - Bold (700) */ @font-face { font-family: 'Iberia Headline'; src: url('../fonts/headline/IberiaHeadline-Bold.otf') format('opentype'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'Iberia Headline'; src: url('../fonts/headline/IberiaHeadline-BoldIt.otf') format('opentype'); font-weight: 700; font-style: italic; font-display: swap; } /* Iberia Text - Regular (400) */ @font-face { font-family: 'Iberia Text'; src: url('../fonts/text/IberiaText.otf') format('opentype'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Iberia Text'; src: url('../fonts/text/IberiaText-Italic.otf') format('opentype'); font-weight: 400; font-style: italic; font-display: swap; } /* Iberia Text - Bold (700) */ @font-face { font-family: 'Iberia Text'; src: url('../fonts/text/IberiaText-Bold.otf') format('opentype'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'Iberia Text'; src: url('../fonts/text/IberiaText-BoldItalic.otf') format('opentype'); font-weight: 700; font-style: italic; font-display: swap; } /** * ============================================================================= * IBERIA DESIGN SYSTEM - COLOR TOKENS * ============================================================================= * * Este archivo contiene todos los tokens de color del sistema de diseño de Iberia. * Los tokens están organizados en dos categorías principales: * * 1. COLORES PRIMITIVOS: Valores de color puros organizados por familia y escala. * - Primary: Red, Yellow, Orange, Green, Blue * - Secondary: Fucsia, Pink, Teal, Brown, Purple * - Operations: Sky Blue, Tangelo, Indigo * - Neutral: Escala de grises * * 2. TOKENS SEMÁNTICOS: Referencias a colores primitivos con significado contextual. * - Background: Fondos de componentes y estados * - Border: Bordes y separadores * - Text: Colores de texto * - Interactive: Estados interactivos (hover, active, disabled) * - Icon: Colores de iconos * * CONVENCIÓN DE NOMBRES: * - Los colores con sufijo "-iberia" (ej: red-500-iberia) son los colores * corporativos principales de la marca. * - La escala va de 50 (más claro) a 900 (más oscuro). * * USO: * - Usar tokens semánticos siempre que sea posible para mantener consistencia. * - Los colores primitivos solo deben usarse directamente en casos excepcionales. * * @example * .button-primary { * background-color: var(--semantic-interactive-primary-red-default); * color: var(--semantic-text-primary-inverse); * } * * .alert-error { * background-color: var(--semantic-background-error-subtle-02); * border-color: var(--semantic-border-error); * color: var(--semantic-text-error); * } */ :root { /* ============================================ PRIMARY COLORS ============================================ */ /** * Primary Red - Color corporativo principal de Iberia * Uso: Acciones principales, CTAs, elementos de marca */ --primary-red-red-50: #fffafa; --primary-red-red-100: #ffebed; --primary-red-red-200: #fccfd3; --primary-red-red-300: #fa9ea8; --primary-red-red-400: #f4384b; --primary-red-red-500-iberia: #d7192d; --primary-red-red-600: #b9191a; --primary-red-red-700: #a8191a; --primary-red-red-800: #9b1718; --primary-red-red-900: #8e1516; /** * Primary Yellow - Color de advertencia y atención * Uso: Warnings, destacados, badges de atención */ --primary-yellow-yellow-50: #fffae0; --primary-yellow-yellow-100: #fff1ad; --primary-yellow-yellow-200: #ffe87a; --primary-yellow-yellow-300: #ffe047; --primary-yellow-yellow-400: #ffd714; --primary-yellow-yellow-500-iberia: #fcd100; --primary-yellow-yellow-600: #e0ba00; --primary-yellow-yellow-700: #c7a400; --primary-yellow-yellow-800: #ad8f00; --primary-yellow-yellow-900: #947a00; /** * Primary Orange - Color de alerta * Uso: Alertas, notificaciones importantes, estados de precaución */ --primary-orange-orange-50: #fffbf5; --primary-orange-orange-100: #ffeccc; --primary-orange-orange-200: #ffd999; --primary-orange-orange-300: #ffcc75; --primary-orange-orange-400: #ffc766; --primary-orange-orange-500-iberia: #ffa100; --primary-orange-orange-600: #e59100; --primary-orange-orange-700: #cc8100; --primary-orange-orange-800: #b27100; --primary-orange-orange-900: #805100; /** * Primary Green - Color de éxito * Uso: Estados de éxito, confirmaciones, validaciones positivas */ --primary-green-green-50: #f0faf5; --primary-green-green-100: #e1f4ea; --primary-green-green-200: #d2efe0; --primary-green-green-300: #ade1c7; --primary-green-green-400: #7acfa4; --primary-green-green-500-iberia: #019e4f; --primary-green-green-600: #017f3f; --primary-green-green-700: #016f37; --primary-green-green-800: #015b2d; --primary-green-green-900: #014723; /** * Primary Blue - Color informativo * Uso: Enlaces, información, estados informativos */ --primary-blue-blue-50: #f5faff; --primary-blue-blue-100: #d6ebff; --primary-blue-blue-200: #b2d9ff; --primary-blue-blue-300: #80bfff; --primary-blue-blue-400: #4da6ff; --primary-blue-blue-500-iberia: #0080ff; --primary-blue-blue-600: #0066cc; --primary-blue-blue-700: #004d99; --primary-blue-blue-800: #004080; --primary-blue-blue-900: #00264d; /* ============================================ SECONDARY COLORS ============================================ */ /** * Secondary Fucsia * Uso: Acentos, elementos decorativos, categorías especiales */ --secondary-fucsia-fucsia-50: #ffcaeb; --secondary-fucsia-fucsia-100: #ffa2dd; --secondary-fucsia-fucsia-200: #ff6fcb; --secondary-fucsia-fucsia-300: #ff3cb8; --secondary-fucsia-fucsia-400: #ff09a5; --secondary-fucsia-fucsia-500: #d50087; --secondary-fucsia-fucsia-600-iberia: #a20067; --secondary-fucsia-fucsia-700: #7e0251; --secondary-fucsia-fucsia-800: #3c0026; --secondary-fucsia-fucsia-900: #2a011c; /** * Secondary Pink * Uso: Acentos suaves, elementos femeninos, categorías especiales */ --secondary-pink-pink-50: #fef5f9; --secondary-pink-pink-100: #ffe7f2; --secondary-pink-pink-200: #f7c9dc; --secondary-pink-pink-300: #f09dbf; --secondary-pink-pink-400: #e971a2; --secondary-pink-pink-500-iberia: #e24585; --secondary-pink-pink-600: #d3216a; --secondary-pink-pink-700: #a71a53; --secondary-pink-pink-800: #7b133d; --secondary-pink-pink-900: #4f0c27; /** * Secondary Teal * Uso: Elementos diferenciadores, acentos complementarios */ --secondary-teal-teal-50: #eefffd; --secondary-teal-teal-100: #b5fff4; --secondary-teal-teal-200: #90f8e9; --secondary-teal-teal-300: #61eeda; --secondary-teal-teal-400: #2bccb5; --secondary-teal-teal-500: #1ba894; --secondary-teal-teal-600-iberia: #008673; --secondary-teal-teal-700: #005347; --secondary-teal-teal-800: #07463d; --secondary-teal-teal-900: #0c342e; /** * Secondary Brown * Uso: Elementos premium, tonos tierra, acentos cálidos */ --secondary-brown-brown-50: #fbf9f7; --secondary-brown-brown-100: #efece8; --secondary-brown-brown-200: #dad2ca; --secondary-brown-brown-300-iberia: #c5b9ac; --secondary-brown-brown-400: #b0a08e; --secondary-brown-brown-500: #9b8670; --secondary-brown-brown-600: #7f6d59; --secondary-brown-brown-700: #615344; --secondary-brown-brown-800: #43392f; --secondary-brown-brown-900: #392b1e; /** * Secondary Purple * Uso: Elementos premium, categorías especiales */ --secondary-purple-purple-50: #f6f0f5; --secondary-purple-purple-100: #ebe3ea; --secondary-purple-purple-200: #d6c5d3; --secondary-purple-purple-300: #c1a7bc; --secondary-purple-purple-400: #a67f9f; --secondary-purple-purple-500: #94678b; --secondary-purple-purple-600-iberia: #7a5573; --secondary-purple-purple-700: #553e51; --secondary-purple-purple-800: #453041; --secondary-purple-purple-900: #332330; /* ============================================ OPERATIONS COLORS Colores específicos para la vertical de operaciones ============================================ */ /** * Operations Sky Blue * Uso: Elementos específicos de operaciones aéreas */ --operations-sky-blue-sky-blue-50: #f0fbfc; --operations-sky-blue-sky-blue-100: #d7f7fa; --operations-sky-blue-sky-blue-200: #c5eff5; --operations-sky-blue-sky-blue-300: #99e3ed; --operations-sky-blue-sky-blue-400: #84dfeb; --operations-sky-blue-sky-blue-500: #6ed8e6; --operations-sky-blue-sky-blue-600: #42ccde; --operations-sky-blue-sky-blue-700: #1c909f; --operations-sky-blue-sky-blue-800: #0c4248; --operations-sky-blue-sky-blue-900: #02363c; /** * Operations Tangelo * Uso: Alertas operacionales, estados urgentes */ --operations-tangelo-tangelo-50: #fff5ec; --operations-tangelo-tangelo-100: #ffe3cc; --operations-tangelo-tangelo-200: #ffc799; --operations-tangelo-tangelo-300: #ffab66; --operations-tangelo-tangelo-400: #ff8f33; --operations-tangelo-tangelo-500: #ff8017; --operations-tangelo-tangelo-600: #ff7300; --operations-tangelo-tangelo-700: #cc5c00; --operations-tangelo-tangelo-800: #994500; --operations-tangelo-tangelo-900: #662e00; /** * Operations Indigo * Uso: Estados especiales, elementos destacados en operaciones */ --operations-indigo-indigo-50: #f3f0ff; --operations-indigo-indigo-100: #e3daff; --operations-indigo-indigo-200: #bea7ff; --operations-indigo-indigo-300: #9874ff; --operations-indigo-indigo-400: #7241ff; --operations-indigo-indigo-500: #4c0eff; --operations-indigo-indigo-600: #3800da; --operations-indigo-indigo-700: #2b00a7; --operations-indigo-indigo-800: #1e0074; --operations-indigo-indigo-900: #110041; /* ============================================ NEUTRAL COLORS Escala de grises para textos, fondos y bordes ============================================ */ --neutral-neutral-50: #ffffff; --neutral--neutral-100: #fafafa; --neutral--neutral-200: #eeeeee; --neutral--neutral-300: #dddddd; --neutral--neutral-400: #cccccc; --neutral--neutral-500: #b1b1b1; --neutral--neutral-600: #999999; --neutral--neutral-700: #666666; --neutral--neutral-800: #333333; --neutral-neutral-900: #000000; /* ============================================ SEMANTIC TOKENS - BACKGROUND Tokens semánticos para fondos de componentes ============================================ */ /** Fondos base de la aplicación */ --semantic-background-base: var(--neutral-neutral-50); --semantic-background-base-inverse: var(--neutral--neutral-800); --semantic-background-base-01: var(--neutral--neutral-100); --semantic-background-base-02: var(--neutral--neutral-200); --semantic-background-base-03: var(--neutral--neutral-300); --semantic-background-disabled: var(--neutral--neutral-300); /** Fondos de marca */ --semantic-background-brand: var(--primary-red-red-500-iberia); --semantic-background-brand-subtle-01: var(--primary-red-red-200); --semantic-background-brand-subtle-02: var(--primary-red-red-50); --semantic-background-brand-subtle-03: var(--primary-red-red-100); /** Fondos de estado */ --semantic-background-success-subtle-01: var(--primary-green-green-300); --semantic-background-success-subtle-02: var(--primary-green-green-100); --semantic-background-alert-subtle-01: var(--primary-orange-orange-300); --semantic-background-alert-subtle-02: var(--primary-orange-orange-100); --semantic-background-error-subtle-01: var(--primary-red-red-300); --semantic-background-error-subtle-02: var(--primary-red-red-100); --semantic-background-warning-subtle-01: var(--primary-yellow-yellow-200); --semantic-background-warning-subtle-02: var(--primary-yellow-yellow-50); --semantic-background-info-subtle-01: var(--primary-blue-blue-300); --semantic-background-info-subtle-02: var(--primary-blue-blue-100); /* ============================================ SEMANTIC TOKENS - BORDER Tokens semánticos para bordes y separadores ============================================ */ /** Bordes generales */ --semantic-border-primary: var(--neutral--neutral-300); --semantic-border-subtle: var(--neutral--neutral-200); --semantic-border-subtle-01: var(--neutral--neutral-300); --semantic-border-subtle-02: var(--neutral--neutral-400); --semantic-border-disabled: var(--neutral--neutral-300); --semantic-border-inverse: var(--neutral-neutral-50); --semantic-border-inverse-subtle: var(--neutral--neutral-200); /** Bordes de interacción (focus, hover, visited) */ --semantic-border-focus-red: var(--primary-red-red-500-iberia); --semantic-border-focus-red-subtle: var(--primary-red-red-300); --semantic-border-hover-red: var(--primary-red-red-600); --semantic-border-visited-red: var(--primary-red-red-700); --semantic-border-focus-black: var(--neutral-neutral-900); --semantic-border-hover-black: var(--neutral--neutral-800); --semantic-border-visited-black: var(--neutral--neutral-700); /** Bordes de estado */ --semantic-border-success: var(--primary-green-green-500-iberia); --semantic-border-error: var(--primary-red-red-500-iberia); --semantic-border-alert: var(--primary-orange-orange-500-iberia); --semantic-border-warning: var(--primary-yellow-yellow-500-iberia); --semantic-border-info: var(--primary-blue-blue-500-iberia); /* ============================================ SEMANTIC TOKENS - TEXT Tokens semánticos para colores de texto ============================================ */ /** Texto principal */ --semantic-text-primary: var(--neutral--neutral-800); --semantic-text-secondary: var(--neutral--neutral-700); --semantic-text-primary-inverse: var(--neutral-neutral-50); --semantic-text-secondary-inverse: var(--neutral--neutral-200); --semantic-text-brand: var(--primary-red-red-500-iberia); --semantic-text-label: var(--neutral--neutral-800); --semantic-text-placeholder: var(--neutral--neutral-500); --semantic-text-helper: var(--neutral--neutral-600); --semantic-text-disabled: var(--neutral--neutral-600); /** Texto de estado */ --semantic-text-error: var(--primary-red-red-600); --semantic-text-alert: var(--primary-orange-orange-700); --semantic-text-info: var(--primary-blue-blue-600); --semantic-text-success: var(--primary-green-green-600); --semantic-text-warning: var(--primary-yellow-yellow-700); /** Enlaces inline - Tema claro */ --semantic-text-inline-light: var(--primary-red-red-500-iberia); --semantic-text-inline-light-hover: var(--primary-red-red-700); --semantic-text-inline-light-focused: var(--primary-red-red-500-iberia); --semantic-text-inline-light-visited: var(--primary-red-red-300); /** Enlaces inline - Tema oscuro */ --semantic-text-inline-dark: var(--neutral-neutral-50); --semantic-text-inline-dark-hover: var(--neutral--neutral-300); --semantic-text-inline-dark-focused: var(--neutral-neutral-50); --semantic-text-inline-dark-visited: var(--neutral--neutral-400); /* ============================================ SEMANTIC TOKENS - INTERACTIVE Tokens para elementos interactivos (botones, enlaces, etc.) ============================================ */ --semantic-interactive-disabled: var(--neutral--neutral-400); /** Interactivo primario rojo (CTA principal) */ --semantic-interactive-primary-red-default: var(--primary-red-red-500-iberia); --semantic-interactive-primary-red-hover: var(--primary-red-red-600); --semantic-interactive-primary-red-selected: var(--primary-red-red-700); /** Interactivo primario negro (CTA secundario) */ --semantic-interactive-primary-black-default: var(--neutral-neutral-900); --semantic-interactive-primary-black-hover: var(--neutral--neutral-800); --semantic-interactive-primary-black-selected: var(--neutral--neutral-700); /** Interactivo inverso (sobre fondos oscuros) */ --semantic-interactive-inverse-default: var(--neutral-neutral-50); --semantic-interactive-inverse-hover: var(--neutral--neutral-100); --semantic-interactive-inverse-selected: var(--neutral--neutral-200); /* ============================================ SEMANTIC TOKENS - ICON Tokens para colores de iconos ============================================ */ --semantic-icon-default: var(--neutral-neutral-900); --semantic-icon-inverse: var(--neutral-neutral-50); --semantic-icon-help: var(--neutral--neutral-600); --semantic-icon-disabled: var(--neutral--neutral-500); --semantic-icon-active: var(--primary-red-red-500-iberia); --semantic-icon-hover: var(--primary-red-red-600); --semantic-icon-visited: var(--primary-red-red-700); /** Iconos de estado */ --semantic-icon-info: var(--primary-blue-blue-600); --semantic-icon-warning: var(--primary-yellow-yellow-700); --semantic-icon-success: var(--primary-green-green-600); --semantic-icon-error: var(--primary-red-red-600); --semantic-icon-alert: var(--primary-orange-orange-700); } /** * ============================================================================= * IBERIA DESIGN SYSTEM - TYPOGRAPHY TOKENS * ============================================================================= * * Este archivo contiene los tokens tipográficos del sistema de diseño. * * NOTA: Los tamaños de fuente (font-size) y alturas de línea (line-height) * se gestionan a través de los tokens nativos de PatternFly. * Ver: https://www.patternfly.org/tokens/all-patternfly-tokens * * CONTENIDO: * - Font Family: Familias tipográficas corporativas * - Font Weight: Pesos de fuente * - Font Style: Estilos de fuente (normal, italic) * * FAMILIAS TIPOGRÁFICAS: * - Iberia Headline: Títulos y encabezados principales * - Iberia Text: Cuerpo de texto y contenido general * - Arial/Helvetica/Noto: Fallbacks del sistema * * USO: * @example * .headline { * font-family: var(--font-family-iberia-headline); * font-weight: var(--font-weight-bold); * } * * .body-text { * font-family: var(--font-family-iberia-text); * font-weight: var(--font-weight-regular); * } */ :root { /* ============================================ FONT FAMILY Familias tipográficas del sistema ============================================ */ /** Fuentes del sistema (fallbacks) */ --font-family-arial: 'Arial', sans-serif; --font-family-helvetica: 'Helvetica Neue', sans-serif; --font-family-noto: 'Noto Sans', sans-serif; /** Fuentes corporativas Iberia */ --font-family-iberia-headline: 'Iberia Headline', sans-serif; --font-family-iberia-text: 'Iberia Text', sans-serif; /* ============================================ FONT WEIGHT Pesos de fuente disponibles ============================================ */ /** Light (300) - Texto decorativo, grandes tamaños */ --font-weight-light: 300; /** Regular (400) - Cuerpo de texto por defecto */ --font-weight-regular: 400; /** Bold (700) - Énfasis, títulos, CTAs */ --font-weight-bold: 700; /* ============================================ FONT STYLE Estilos de fuente ============================================ */ --font-style-normal: normal; --font-style-italic: italic; } /** * ============================================================================= * IBERIA DESIGN SYSTEM - STYLE TOKENS * ============================================================================= * * Este archivo contiene los tokens de estilo para bordes del sistema de diseño. * * CONTENIDO: * - Border Radius: Valores de redondeo de esquinas * - Border Width: Grosores de borde * * USO: * @example * .card { * border-radius: var(--radius-md); * border: var(--border-thin) solid var(--semantic-border-primary); * } * * .button { * border-radius: var(--radius-sm); * } * * .avatar { * border-radius: var(--radius-round); * } */ :root { /* ============================================ BORDER RADIUS Valores para redondeo de esquinas ============================================ */ /** Sin redondeo - Bordes completamente rectos */ --radius-sharp: 0px; /** Extra pequeño - Redondeo mínimo */ --radius-xs: 2px; /** Pequeño - Botones pequeños, inputs compactos */ --radius-sm: 4px; /** Mediano - Botones, cards, inputs estándar */ --radius-md: 8px; /** Grande - Cards destacadas, modales */ --radius-lg: 16px; /** Extra grande - Contenedores principales */ --radius-xlg: 24px; /** Extra extra grande - Secciones hero */ --radius-xxlg: 32px; /** Redondo - Avatares, badges circulares, pills */ --radius-round: 999px; /* ============================================ BORDER WIDTH Grosores de borde para diferentes énfasis ============================================ */ /** Sin borde */ --border-none: 0px; /** Fino - Separadores sutiles, bordes por defecto */ --border-thin: 1px; /** Por defecto - Bordes estándar de componentes */ --border-default: 1.5px; /** Medio - Énfasis moderado, estados hover */ --border-medium: 2px; /** Fuerte - Alto énfasis, estados focus */ --border-strong: 2.5px; /** Extra fuerte - Máximo énfasis, bordes destacados */ --border-xstrong: 3px; } /** * ============================================================================= * IBERIA DESIGN SYSTEM - GRID & SPACING TOKENS * ============================================================================= * * Este archivo contiene los tokens de layout y espaciado del sistema de diseño. * * CONTENIDO: * - Breakpoints: Puntos de ruptura para responsive design * - Grid Columns: Número de columnas por breakpoint * - Spacing: Sistema de espaciado consistente * * SISTEMA DE ESPACIADO: * - Condense (00-07): Espaciados compactos (0-24px) * - Medium (01-05): Espaciados medianos (32-80px) * - Large (01-05): Espaciados grandes (120-240px) * * USO CON MEDIA QUERIES: * @example * .container { * padding: var(--spacing-condense-03); * } * * @media (min-width: 768px) { * .container { * padding: var(--spacing-condense-05); * } * } * * @media (min-width: 1024px) { * .container { * padding: var(--spacing-medium-01); * } * } * * NOTA: Los breakpoints están definidos como custom properties para referencia, * pero deben usarse como valores literales en media queries ya que CSS * no permite variables en media queries. */ :root { /* ============================================ BREAKPOINTS Puntos de ruptura para diseño responsive ============================================ */ /** Mobile - Smartphones (375px) */ --breakpoint-mobile: 375px; /** Tablet - Tablets y dispositivos medianos (768px) */ --breakpoint-tablet: 768px; /** Desktop mínimo - Laptops pequeños (1024px) */ --breakpoint-desktop-min: 1024px; /** Desktop - Monitores estándar (1440px) */ --breakpoint-desktop: 1440px; /* ============================================ GRID COLUMNS Número de columnas del sistema de grid ============================================ */ /** Mobile: 4 columnas */ --grid-columns-mobile: 4; /** Tablet: 8 columnas */ --grid-columns-tablet: 8; /** Desktop: 12 columnas */ --grid-columns-desktop: 12; /* ============================================ SPACING Sistema de espaciado consistente ============================================ */ /** Espaciado base (16px) */ --spacing-base: 16px; /* ----- Spacing Condense (compacto) ----- */ /** Para espaciados pequeños en componentes */ --spacing-condense-00: 0px; --spacing-condense-01: 2px; --spacing-condense-02: 4px; --spacing-condense-03: 8px; --spacing-condense-04: 12px; --spacing-condense-05: 16px; --spacing-condense-06: 20px; --spacing-condense-07: 24px; /* ----- Spacing Medium ----- */ /** Para espaciados entre secciones y componentes */ --spacing-medium-01: 32px; --spacing-medium-02: 40px; --spacing-medium-03: 48px; --spacing-medium-04: 56px; --spacing-medium-05: 80px; /* ----- Spacing Large ----- */ /** Para espaciados de secciones y layouts principales */ --spacing-large-01: 120px; --spacing-large-02: 144px; --spacing-large-03: 168px; --spacing-large-04: 192px; --spacing-large-05: 240px; } /** * ============================================================================= * PATTERNFLY GLOBAL TOKEN OVERRIDES * ============================================================================= * * Este archivo sobrescribe los tokens globales de PatternFly con los colores * del Iberia Design System. * * Al sobrescribir estos tokens a nivel :root, TODOS los componentes de * PatternFly (Button, Badge, Switch, Progress, etc.) usarán automáticamente * los colores de Iberia. * * Referencia: node_modules/@patternfly/react-styles/css/components/Button/button.css */ :root { /* ============================================ BRAND COLORS Afecta: Primary Button, Badge, Toggle, etc. ============================================ */ /* Fondo del botón primary */ --pf-t--global--color--brand--default: var(--semantic-interactive-primary-red-default); --pf-t--global--color--brand--hover: var(--semantic-interactive-primary-red-hover); --pf-t--global--color--brand--clicked: var(--semantic-interactive-primary-red-selected); /* ============================================ TEXT ON BRAND Texto e iconos sobre fondos brand (primary button) ============================================ */ --pf-t--global--text--color--on-brand--default: var(--semantic-text-primary-inverse); --pf-t--global--text--color--on-brand--hover: var(--semantic-text-primary-inverse); --pf-t--global--text--color--on-brand--clicked: var(--semantic-text-primary-inverse); --pf-t--global--icon--color--on-brand--default: var(--semantic-text-primary-inverse); --pf-t--global--icon--color--on-brand--hover: var(--semantic-text-primary-inverse); --pf-t--global--icon--color--on-brand--clicked: var(--semantic-text-primary-inverse); /* ============================================ BRAND TEXT Texto de secondary, tertiary y link buttons ============================================ */ --pf-t--global--text--color--brand--default: var(--primary-red-red-500-iberia); --pf-t--global--text--color--brand--hover: var(--primary-red-red-600); --pf-t--global--text--color--brand--clicked: var(--primary-red-red-700); /* ============================================ BRAND BORDER Borde del secondary button ============================================ */ --pf-t--global--border--color--brand--default: var(--semantic-border-focus-red); --pf-t--global--border--color--brand--hover: var(--semantic-border-hover-red); --pf-t--global--border--color--brand--clicked: var(--semantic-border-visited-red); /* ============================================ BRAND ICONS Iconos en secondary, tertiary y link buttons ============================================ */ --pf-t--global--icon--color--brand--default: var(--primary-red-red-500-iberia); --pf-t--global--icon--color--brand--hover: var(--primary-red-red-600); --pf-t--global--icon--color--brand--clicked: var(--primary-red-red-700); /* ============================================ BORDER RADIUS Esquinas cuadradas estilo Iberia (2px) ============================================ */ --pf-t--global--border--radius--pill: var(--radius-xs); /* ============================================ TYPOGRAPHY - FONT FAMILIES Sobrescribe las fuentes de Red Hat por Iberia ============================================ */ /* Token base para texto body (reemplaza Red Hat Text) */ --pf-t--global--font--family--100: 'Iberia Text', Arial, Helvetica, sans-serif; /* Token base para headings (reemplaza Red Hat Display) */ --pf-t--global--font--family--200: 'Iberia Headline', Arial, Helvetica, sans-serif; /* Tokens semánticos que usan los anteriores */ --pf-t--global--font--family--body: var(--pf-t--global--font--family--100); --pf-t--global--font--family--heading: var(--pf-t--global--font--family--200); } /* ============================================ COMPONENT-SPECIFIC OVERRIDES Estilos que no se pueden hacer via tokens globales. Incluye overrides de propiedades CSS reales para contrarrestar CSS resets a nivel de tag (ej: button { background-color: transparent }) ============================================ */ /* Button: propiedades reales + tipografía Iberia */ .pf-v6-c-button { font-family: var(--font-family-iberia-text); color: var(--pf-v6-c-button--Color); background-color: var(--pf-v6-c-button--BackgroundColor); } /* Tipografía Iberia para Title (headings) */ .pf-v6-c-title { --pf-v6-c-title--FontFamily: var(--font-family-iberia-headline); } /* FormControl: propiedades reales + tipografía Iberia */ .pf-v6-c-form-control { font-family: var(--font-family-iberia-text); background-color: var(--pf-v6-c-form-control--BackgroundColor); } /* CalendarMonth: celda con más padding para acomodar etiquetas debajo */ .pf-v6-c-calendar-month__dates-cell { --pf-v6-c-calendar-month__dates-cell--PaddingBlockEnd: 1.2em; padding-block-end: 1.2em !important; } /* CalendarMonth: ajustar fondo del rango para que no ocupe todo el padding extra */ .pf-v6-c-calendar-month__dates-cell.pf-m-in-range::before, .pf-v6-c-calendar-month__dates-cell.pf-m-start-range::before, .pf-v6-c-calendar-month__dates-cell.pf-m-end-range::before { --pf-v6-c-calendar-month__dates-cell--before--InsetBlockEnd: 1.2em; inset-block-end: 1.2em !important; } /* CalendarMonth: botón mantiene tamaño original para círculo perfecto */ .pf-v6-c-calendar-month__date { position: relative; } /* CalendarMonth: día seleccionado estilo Iberia */ .pf-v6-c-calendar-month__dates-cell.pf-m-selected { --pf-v6-c-calendar-month__dates-cell--m-selected__date--BackgroundColor: var( --primary-red-red-500-iberia ); --pf-v6-c-calendar-month__dates-cell--m-selected__date--hover--BackgroundColor: var( --primary-red-red-500-iberia ); --pf-v6-c-calendar-month__dates-cell--m-selected__date--focus--BackgroundColor: var( --primary-red-red-500-iberia ); --pf-v6-c-calendar-month__dates-cell--m-selected__date--Color: var(--neutral-neutral-50); --pf-v6-c-calendar-month__dates-cell--m-selected__date--focus--after--BorderColor: var( transparent ); --pf-v6-c-calendar-month__dates-cell--m-selected__date--BorderColor: transparent; --pf-v6-c-calendar-month__date--BorderRadius: 999px; } /* CalendarMonth: rango seleccionado estilo Iberia */ .pf-v6-c-calendar-month__dates-cell.pf-m-in-range { --pf-v6-c-calendar-month__dates-cell--m-in-range--before--BackgroundColor: #d7192d2e; --pf-v6-c-calendar-month__date--hover--BackgroundColor: #d7192d2e; --pf-v6-c-calendar-month__date--focus--BackgroundColor: #d7192d2e; --pf-v6-c-calendar-month__dates-cell--after--BorderColor: transparent; } /* CalendarMonth: día actual en negrita y subrayado (sin fondo gris) */ .pf-v6-c-calendar-month__dates-cell.pf-m-current { --pf-v6-c-calendar-month__dates-cell--m-current__date--BackgroundColor: transparent; --pf-v6-c-calendar-month__dates-cell--m-current__date--BorderWidth: 0; --pf-v6-c-calendar-month__dates-cell--m-current__date--BorderColor: transparent; } .pf-v6-c-calendar-month__dates-cell.pf-m-current .pf-v6-c-calendar-month__date { font-weight: 700; text-decoration: underline; } /* CalendarMonth: días no seleccionables (disabled) - solo texto en gris, sin fondo */ .pf-v6-c-calendar-month__dates-cell.pf-m-disabled { --pf-v6-c-calendar-month__date--BackgroundColor: transparent; --pf-v6-c-calendar-month__date--disabled--BackgroundColor: transparent; --pf-v6-c-calendar-month__date--disabled--Color: var(--neutral--neutral-500); } .pf-v6-c-calendar-month__date:disabled { --pf-v6-c-calendar-month__date--BackgroundColor: transparent !important; background-color: transparent !important; color: var(--neutral--neutral-500); } :root { /* Crew OCC Custom Tokens - extending PatternFly semantic tokens */ /* Primary Colors */ --crew-occ-color-primary: var(--pf-t--global--color--brand--default, #0066cc); --crew-occ-color-primary-hover: var(--pf-t--global--color--brand--hover, #004d99); --crew-occ-color-primary-active: var(--pf-t--global--color--brand--clicked, #003366); /* Secondary Colors */ --crew-occ-color-secondary: var(--pf-t--global--color--nonstatus--gray--default, #6a6e73); --crew-occ-color-secondary-hover: var(--pf-t--global--color--nonstatus--gray--hover, #4f5255); --crew-occ-color-secondary-active: var(--pf-t--global--color--nonstatus--gray--clicked, #3c3f42); /* Status Colors */ --crew-occ-color-danger: var(--pf-t--global--color--status--danger--default, #c9190b); --crew-occ-color-danger-hover: var(--pf-t--global--color--status--danger--hover, #a30000); --crew-occ-color-warning: var(--pf-t--global--color--status--warning--default, #f0ab00); --crew-occ-color-warning-hover: var(--pf-t--global--color--status--warning--hover, #c58c00); --crew-occ-color-success: var(--pf-t--global--color--status--success--default, #3e8635); --crew-occ-color-success-hover: var(--pf-t--global--color--status--success--hover, #1e4f18); --crew-occ-color-info: var(--pf-t--global--color--status--info--default, #2b9af3); --crew-occ-color-info-hover: var(--pf-t--global--color--status--info--hover, #0066cc); /* Background Colors */ --crew-occ-background-primary: var(--pf-t--global--background--color--primary--default, #ffffff); --crew-occ-background-secondary: var( --pf-t--global--background--color--secondary--default, #f0f0f0 ); --crew-occ-background-tertiary: var( --pf-t--global--background--color--tertiary--default, #e0e0e0 ); /* Text Colors */ --crew-occ-text-primary: var(--pf-t--global--text--color--regular, #151515); --crew-occ-text-secondary: var(--pf-t--global--text--color--subtle, #6a6e73); --crew-occ-text-on-brand: var(--pf-t--global--text--color--on-brand--default, #ffffff); --crew-occ-text-link: var(--pf-t--global--text--color--link--default, #0066cc); /* Spacing */ --crew-occ-spacing-xs: var(--pf-t--global--spacer--xs, 0.25rem); --crew-occ-spacing-sm: var(--pf-t--global--spacer--sm, 0.5rem); --crew-occ-spacing-md: var(--pf-t--global--spacer--md, 1rem); --crew-occ-spacing-lg: var(--pf-t--global--spacer--lg, 1.5rem); --crew-occ-spacing-xl: var(--pf-t--global--spacer--xl, 2rem); --crew-occ-spacing-2xl: var(--pf-t--global--spacer--2xl, 3rem); /* Font Sizes */ --crew-occ-font-size-xs: var(--pf-t--global--font--size--xs, 0.75rem); --crew-occ-font-size-sm: var(--pf-t--global--font--size--sm, 0.875rem); --crew-occ-font-size-md: var(--pf-t--global--font--size--md, 1rem); --crew-occ-font-size-lg: var(--pf-t--global--font--size--lg, 1.125rem); --crew-occ-font-size-xl: var(--pf-t--global--font--size--xl, 1.25rem); --crew-occ-font-size-2xl: var(--pf-t--global--font--size--2xl, 1.5rem); /* Font Weights */ --crew-occ-font-weight-normal: var(--pf-t--global--font--weight--body--default, 400); --crew-occ-font-weight-bold: var(--pf-t--global--font--weight--body--bold, 700); --crew-occ-font-weight-heading: var(--pf-t--global--font--weight--heading--default, 700); /* Line Heights */ --crew-occ-line-height-sm: var(--pf-t--global--font--line-height--sm, 1.3); --crew-occ-line-height-md: var(--pf-t--global--font--line-height--body, 1.5); /* Border Radius */ --crew-occ-border-radius-sm: var(--pf-t--global--border--radius--small, 3px); --crew-occ-border-radius-md: var(--pf-t--global--border--radius--medium, 6px); --crew-occ-border-radius-lg: var(--pf-t--global--border--radius--large, 12px); --crew-occ-border-radius-pill: var(--pf-t--global--border--radius--pill, 9999px); /* Border Width */ --crew-occ-border-width-sm: var(--pf-t--global--border--width--regular, 1px); --crew-occ-border-width-md: var(--pf-t--global--border--width--strong, 2px); /* Border Colors */ --crew-occ-border-color-default: var(--pf-t--global--border--color--default, #d2d2d2); --crew-occ-border-color-strong: var(--pf-t--global--border--color--strong, #8a8d90); /* Shadows */ --crew-occ-shadow-sm: var(--pf-t--global--box-shadow--sm, 0 1px 2px rgba(0, 0, 0, 0.06)); --crew-occ-shadow-md: var(--pf-t--global--box-shadow--md, 0 4px 8px rgba(0, 0, 0, 0.1)); --crew-occ-shadow-lg: var(--pf-t--global--box-shadow--lg, 0 8px 16px rgba(0, 0, 0, 0.15)); /* Transitions */ --crew-occ-transition-fast: 150ms ease-in-out; --crew-occ-transition-normal: 250ms ease-in-out; --crew-occ-transition-slow: 400ms ease-in-out; /* Z-index */ --crew-occ-z-dropdown: 100; --crew-occ-z-sticky: 200; --crew-occ-z-fixed: 300; --crew-occ-z-modal-backdrop: 400; --crew-occ-z-modal: 500; --crew-occ-z-popover: 600; --crew-occ-z-tooltip: 700; } /* Dark theme support */ .pf-v6-theme-dark { --crew-occ-background-primary: var(--pf-t--global--background--color--primary--default, #1b1d21); --crew-occ-background-secondary: var( --pf-t--global--background--color--secondary--default, #212427 ); --crew-occ-background-tertiary: var( --pf-t--global--background--color--tertiary--default, #292c30 ); --crew-occ-text-primary: var(--pf-t--global--text--color--regular, #e0e0e0); --crew-occ-text-secondary: var(--pf-t--global--text--color--subtle, #a2a5a8); --crew-occ-border-color-default: var(--pf-t--global--border--color--default, #444548); --crew-occ-border-color-strong: var(--pf-t--global--border--color--strong, #6a6e73); } /** * Estilos personalizados para Modal de Iberia * * Ajusta el espaciado interno y el color del botón de cierre */ /* Aplicar padding al contenido del modal */ .pf-v5-c-modal-box__body, .pf-v6-c-modal-box__body { padding: 1.5rem !important; } /* Padding del header para separar título de los bordes */ .pf-v5-c-modal-box__header, .pf-v6-c-modal-box__header { padding: 1.5rem !important; padding-bottom: 1rem !important; } /* Separación del título */ .pf-v5-c-modal-box__title, .pf-v6-c-modal-box__title { margin-bottom: 0 !important; padding-bottom: 0 !important; } /* Color del icono del botón de cierre (X) - rojo Iberia usando variable de PatternFly */ .pf-v5-c-modal-box__close .pf-v5-c-button, .pf-v6-c-modal-box__close .pf-v6-c-button { --pf-v5-c-button__icon--Color: var(--primary-red-red-500-iberia, #d7192d) !important; --pf-v6-c-button__icon--Color: var(--primary-red-red-500-iberia, #d7192d) !important; } /* Hover del botón de cierre */ .pf-v5-c-modal-box__close .pf-v5-c-button:hover, .pf-v6-c-modal-box__close .pf-v6-c-button:hover { --pf-v5-c-button__icon--Color: var(--primary-red-red-600-iberia, #b81528) !important; --pf-v6-c-button__icon--Color: var(--primary-red-red-600-iberia, #b81528) !important; background-color: rgba(215, 25, 45, 0.1) !important; } /* Ocultar focus ring del botón de cierre salvo con navegación por teclado */ .pf-v5-c-modal-box__close .pf-v5-c-button:focus:not(:focus-visible), .pf-v6-c-modal-box__close .pf-v6-c-button:focus:not(:focus-visible) { outline: none !important; box-shadow: none !important; background-color: transparent !important; } /* Asegurar padding consistente en el footer si existe */ .pf-v5-c-modal-box__footer, .pf-v6-c-modal-box__footer { padding: 1rem 1.5rem 1.5rem 1.5rem !important; } /** * Estilos personalizados para CalendarMonth de Iberia * * Todos los selectores están prefijados con `.iberia-calendar-month` para: * 1. Aumentar la especificidad CSS y evitar que proyectos consumidores los sobreescriban. * 2. Aislar los estilos al ámbito del componente sin depender únicamente de !important. * * Los selectores de mes y año mantienen su comportamiento nativo de PatternFly. */ /* ─── Contenedor raíz ─────────────────────────────────────────────── */ /* Fuentes de Iberia + anchura adaptativa + esquinas redondeadas */ .iberia-calendar-month .pf-v5-c-calendar-month, .iberia-calendar-month .pf-v6-c-calendar-month { font-family: var(--font-family-iberia-text) !important; --pf-v6-c-calendar-month__header-year--Width: 100px; width: 100% !important; border-radius: 12px !important; box-sizing: border-box !important; padding-bottom: 46px !important; } /* ─── Grid de días: padding lateral y tabla 100 % ─────────────────── */ .iberia-calendar-month .pf-v5-c-calendar-month__calendar, .iberia-calendar-month .pf-v6-c-calendar-month__calendar { padding-left: 16px !important; padding-right: 16px !important; padding-bottom: 0 !important; box-sizing: border-box !important; } .iberia-calendar-month .pf-v5-c-calendar-month__calendar table, .iberia-calendar-month .pf-v6-c-calendar-month__calendar table { width: 100% !important; } /* ─── Celdas de día: alto suficiente para círculo + label ─────────── */ .iberia-calendar-month .pf-v5-c-calendar-month__dates-cell, .iberia-calendar-month .pf-v6-c-calendar-month__dates-cell { height: 58px !important; vertical-align: middle !important; /* El área de contenido de la celda será exactamente igual a la altura del botón (4ch) */ --pf-v6-c-calendar-month__dates-cell--PaddingBlockStart: calc( (58px - var(--pf-v6-c-calendar-month__date--Height, 4ch)) / 2 ); --pf-v6-c-calendar-month__dates-cell--PaddingBlockEnd: calc( (58px - var(--pf-v6-c-calendar-month__date--Height, 4ch)) / 2 ); --pf-v6-c-calendar-month__dates-cell--before--InsetBlockEnd: calc( (58px - var(--pf-v6-c-calendar-month__date--Height, 4ch)) / 2 ); } /* ─── Sin selección explícita: ocultar highlight del día ──────────── */ .iberia-calendar-month--no-selection .pf-v5-c-calendar-month__dates-cell.pf-m-selected .pf-v5-c-calendar-month__date, .iberia-calendar-month--no-selection .pf-v6-c-calendar-month__dates-cell.pf-m-selected .pf-v6-c-calendar-month__date { background-color: transparent !important; color: inherit !important; --pf-v6-c-calendar-month__date--m-selected--BackgroundColor: transparent; --pf-v6-c-calendar-month__date--m-selected--Color: inherit; } .iberia-calendar-month--no-selection .pf-v5-c-calendar-month__dates-cell.pf-m-selected .pf-v5-c-calendar-month__date::before, .iberia-calendar-month--no-selection .pf-v6-c-calendar-month__dates-cell.pf-m-selected .pf-v6-c-calendar-month__date::before { background-color: transparent !important; } /* ─── Header nativo de PF oculto (reemplazado por header estático) ─ */ .iberia-calendar-month .pf-v5-c-calendar-month__header, .iberia-calendar-month .pf-v6-c-calendar-month__header { visibility: hidden !important; height: 0 !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; } .iberia-calendar-month .pf-v5-c-calendar-month, .iberia-calendar-month .pf-v6-c-calendar-month { padding-top: 0 !important; } /* ─── Cabecera estática de mes/año ────────────────────────────────── */ .iberia-calendar-month__static-header { display: flex; align-items: center; justify-content: center; padding: 20px 16px 8px; } .iberia-calendar-month__static-header-text { font-family: var(--font-family-iberia-headline) !important; font-size: 20px; font-weight: 400; line-height: 100%; text-align: center; color: #333333; flex: 1; } .iberia-calendar-month__nav-arrow { display: flex; align-items: center; justify-content: center; background: transparent; border: none; cursor: pointer; color: var(--primary-red-red-500-iberia) !important; padding: 4px; border-radius: 4px; transition: color 0.2s ease; } .iberia-calendar-month__nav-arrow:hover { color: var(--primary-red-red-600) !important; } .iberia-calendar-month__nav-arrow:focus-visible { outline: 2px solid var(--primary-red-red-500-iberia); outline-offset: 2px; } .iberia-calendar-month__nav-arrow:focus:not(:focus-visible) { outline: none; } /* ─── Foco: solo visible en navegación por teclado ────────────────── */ /* PatternFly usa ::after con variables CSS en lugar de outline */ .iberia-calendar-month .pf-v5-c-calendar-month__date:focus:not(:focus-visible), .iberia-calendar-month .pf-v6-c-calendar-month__date:focus:not(:focus-visible) { outline: none !important; box-shadow: none !important; --pf-v6-c-calendar-month__date--after--BorderColor: transparent !important; --pf-v6-c-calendar-month__date--after--BorderWidth: 0 !important; --pf-v6-c-calendar-month__date--after--OutlineOffset: 0 !important; } /* ─── Botón de leyenda ────────────────────────────────────────────── */ /* ─── Círculo coloreado alrededor del día ───────────────────────────── */ .iberia-calendar-month .calendar-day-circle { display: flex; align-items: center; justify-content: center; width: var(--pf-v6-c-calendar-month__date--Width, 4ch); height: var(--pf-v6-c-calendar-month__date--Height, 4ch); flex-shrink: 0; border-radius: 50%; color: #ffffff; font-size: 14px; font-weight: bold; line-height: 1; box-sizing: border-box; } .iberia-calendar-month .calendar-day-circle-label { position: absolute; bottom: -1.2em; left: 50%; transform: translateX(-50%); font-size: 0.65em; line-height: 1; white-space: nowrap; } /* Botón PF que contiene un círculo: desactivar hover/selected oval y dar espacio */ .iberia-calendar-month .pf-v5-c-calendar-month__date:has(.calendar-day-circle), .iberia-calendar-month .pf-v6-c-calendar-month__date:has(.calendar-day-circle) { padding: 0 !important; background: transparent !important; overflow: visible !important; } /* Desactivar el ::after (hover/selected ring) de PF en celdas con círculo */ .iberia-calendar-month .pf-v5-c-calendar-month__date:has(.calendar-day-circle)::after, .iberia-calendar-month .pf-v6-c-calendar-month__date:has(.calendar-day-circle)::after { display: none !important; } .iberia-calendar-month .calendar-legend-button { position: absolute; bottom: 12px; right: 18px; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background-color: transparent; border: none; border-radius: 50%; cursor: pointer; transition: all 0.2s ease; padding: 0; z-index: 10; } .iberia-calendar-month .calendar-legend-button:hover { filter: brightness(0.8); } .iberia-calendar-month .calendar-legend-button:focus-visible { outline: 2px solid var(--primary-red-red-500-iberia); outline-offset: 2px; } .iberia-calendar-month .calendar-legend-button:active { transform: scale(0.95); } /*# sourceMappingURL=index.css.map */:root { line-height: 1.5; font-weight: 400; color: rgba(255, 255, 255, 0.87); background-color: #242424; } html, body { height: 100%; } body { margin: 0; min-width: 320px; min-height: 100dvh; } button { border-radius: 8px; border: 1px solid transparent; padding: 0.6em 1.2em; font-size: 1em; font-weight: 500; font-family: inherit; background-color: #1a1a1a; cursor: pointer; transition: border-color 0.25s; } button:hover { border-color: #646cff; } button:focus, button:focus-visible { outline: 4px auto -webkit-focus-ring-color; } @media (prefers-color-scheme: light) { :root { color: #213547; background-color: #ffffff; } a:hover { color: #747bff; } button { background-color: #f9f9f9; } } /*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */ @layer properties { @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { *, :before, :after, ::backdrop { --tw-rotate-x: initial; --tw-rotate-y: initial; --tw-rotate-z: initial; --tw-skew-x: initial; --tw-skew-y: initial; --tw-border-style: solid; --tw-leading: initial; --tw-font-weight: initial; } } } @layer theme { :root, :host { --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; --color-white: #fff; --spacing: .25rem; --text-sm: .875rem; --text-sm--line-height: calc(1.25 / .875); --text-base: 1rem; --text-base--line-height: calc(1.5 / 1); --text-lg: 1.125rem; --text-lg--line-height: calc(1.75 / 1.125); --text-xl: 1.25rem; --text-xl--line-height: calc(1.75 / 1.25); --text-3xl: 1.875rem; --text-3xl--line-height: calc(2.25 / 1.875); --text-4xl: 2.25rem; --text-4xl--line-height: calc(2.5 / 2.25); --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --leading-tight: 1.25; --leading-snug: 1.375; --radius-xl: .75rem; --radius-4xl: 2rem; --default-font-family: var(--font-sans); --default-mono-font-family: var(--font-mono); } } @layer base { *, :after, :before, ::backdrop { box-sizing: border-box; border: 0 solid; margin: 0; padding: 0; } ::file-selector-button { box-sizing: border-box; border: 0 solid; margin: 0; padding: 0; } html, :host { -webkit-text-size-adjust: 100%; tab-size: 4; line-height: 1.5; font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"); font-feature-settings: var(--default-font-feature-settings, normal); font-variation-settings: var(--default-font-variation-settings, normal); -webkit-tap-highlight-color: transparent; } hr { height: 0; color: inherit; border-top-width: 1px; } abbr:where([title]) { -webkit-text-decoration: underline dotted; text-decoration: underline dotted; } h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; } a { color: inherit; -webkit-text-decoration: inherit; -webkit-text-decoration: inherit; -webkit-text-decoration: inherit; text-decoration: inherit; } b, strong { font-weight: bolder; } code, kbd, samp, pre { font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace); font-feature-settings: var(--default-mono-font-feature-settings, normal); font-variation-settings: var(--default-mono-font-variation-settings, normal); font-size: 1em; } small { font-size: 80%; } sub, sup { vertical-align: baseline; font-size: 75%; line-height: 0; position: relative; } sub { bottom: -.25em; } sup { top: -.5em; } table { text-indent: 0; border-color: inherit; border-collapse: collapse; } :-moz-focusring { outline: auto; } progress { vertical-align: baseline; } summary { display: list-item; } ol, ul, menu { list-style: none; } img, svg, video, canvas, audio, iframe, embed, object { vertical-align: middle; display: block; } img, video { max-width: 100%; height: auto; } button, input, select, optgroup, textarea { font: inherit; font-feature-settings: inherit; font-variation-settings: inherit; letter-spacing: inherit; color: inherit; opacity: 1; background-color: #0000; border-radius: 0; } ::file-selector-button { font: inherit; font-feature-settings: inherit; font-variation-settings: inherit; letter-spacing: inherit; color: inherit; opacity: 1; background-color: #0000; border-radius: 0; } :where(select:is([multiple], [size])) optgroup { font-weight: bolder; } :where(select:is([multiple], [size])) optgroup option { padding-inline-start: 20px; } ::file-selector-button { margin-inline-end: 4px; } ::placeholder { opacity: 1; } @supports (not ((-webkit-appearance: -apple-pay-button))) or (contain-intrinsic-size: 1px) { ::placeholder { color: currentColor; } @supports (color: color-mix(in lab, red, red)) { ::placeholder { color: color-mix(in oklab, currentcolor 50%, transparent); } } } textarea { resize: vertical; } ::-webkit-search-decoration { -webkit-appearance: none; } ::-webkit-date-and-time-value { min-height: 1lh; text-align: inherit; } ::-webkit-datetime-edit { display: inline-flex; } ::-webkit-datetime-edit-fields-wrapper { padding: 0; } ::-webkit-datetime-edit { padding-block: 0; } ::-webkit-datetime-edit-year-field { padding-block: 0; } ::-webkit-datetime-edit-month-field { padding-block: 0; } ::-webkit-datetime-edit-day-field { padding-block: 0; } ::-webkit-datetime-edit-hour-field { padding-block: 0; } ::-webkit-datetime-edit-minute-field { padding-block: 0; } ::-webkit-datetime-edit-second-field { padding-block: 0; } ::-webkit-datetime-edit-millisecond-field { padding-block: 0; } ::-webkit-datetime-edit-meridiem-field { padding-block: 0; } ::-webkit-calendar-picker-indicator { line-height: 1; } :-moz-ui-invalid { box-shadow: none; } button, input:where([type="button"], [type="reset"], [type="submit"]) { appearance: button; } ::file-selector-button { appearance: button; } ::-webkit-inner-spin-button { height: auto; } ::-webkit-outer-spin-button { height: auto; } [hidden]:where(:not([hidden="until-found"])) { display: none !important; } } @layer components; @layer utilities { .fixed { position: fixed; } .static { position: static; } .col-span-1 { grid-column: span 1 / span 1; } .col-span-2 { grid-column: span 2 / span 2; } .col-span-3 { grid-column: span 3 / span 3; } .col-span-4 { grid-column: span 4 / span 4; } .col-span-5 { grid-column: span 5 / span 5; } .col-start-2 { grid-column-start: 2; } .row-span-2 { grid-row: span 2 / span 2; } .row-span-3 { grid-row: span 3 / span 3; } .row-start-2 { grid-row-start: 2; } .my-3 { margin-block: calc(var(--spacing) * 3); } .mt-1 { margin-top: calc(var(--spacing) * 1); } .mt-2 { margin-top: calc(var(--spacing) * 2); } .mt-5 { margin-top: calc(var(--spacing) * 5); } .mt-8 { margin-top: calc(var(--spacing) * 8); } .mt-10 { margin-top: calc(var(--spacing) * 10); } .mb-1 { margin-bottom: calc(var(--spacing) * 1); } .block { display: block; } .flex { display: flex; } .grid { display: grid; } .inline { display: inline; } .h-5 { height: calc(var(--spacing) * 5); } .h-15 { height: calc(var(--spacing) * 15); } .h-full { height: 100%; } .w-5 { width: calc(var(--spacing) * 5); } .w-96 { width: calc(var(--spacing) * 96); } .w-\[220px\] { width: 220px; } .w-fit { width: fit-content; } .w-full { width: 100%; } .min-w-0 { min-width: calc(var(--spacing) * 0); } .flex-1 { flex: 1; } .shrink-0 { flex-shrink: 0; } .transform { transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, ); } .grid-cols-\[min-content_auto\] { grid-template-columns: min-content auto; } .flex-col { flex-direction: column; } .flex-wrap { flex-wrap: wrap; } .items-center { align-items: center; } .justify-between { justify-content: space-between; } .justify-center { justify-content: center; } .gap-1 { gap: calc(var(--spacing) * 1); } .gap-2 { gap: calc(var(--spacing) * 2); } .gap-3 { gap: calc(var(--spacing) * 3); } .gap-4 { gap: calc(var(--spacing) * 4); } .gap-5 { gap: calc(var(--spacing) * 5); } .gap-6 { gap: calc(var(--spacing) * 6); } .gap-x-4 { column-gap: calc(var(--spacing) * 4); } .gap-y-1 { row-gap: calc(var(--spacing) * 1); } .truncate { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .rounded-4xl { border-radius: var(--radius-4xl); } .rounded-xl { border-radius: var(--radius-xl); } .border { border-style: var(--tw-border-style); border-width: 1px; } .border-2 { border-style: var(--tw-border-style); border-width: 2px; } .border-b { border-bottom-style: var(--tw-border-style); border-bottom-width: 1px; } .border-\[\#D7192D\] { border-color: #d7192d; } .border-\[\#DDDDDD\] { border-color: #ddd; } .border-\[\#FA9EA8\] { border-color: #fa9ea8; } .bg-\[\#D7192D\] { background-color: #d7192d; } .bg-\[\#FA9EA8\] { background-color: #fa9ea8; } .bg-\[\#FFEBED\] { background-color: #ffebed; } .bg-\[\#FFF1F3\] { background-color: #fff1f3; } .bg-white { background-color: var(--color-white); } .p-2 { padding: calc(var(--spacing) * 2); } .p-3 { padding: calc(var(--spacing) * 3); } .p-5 { padding: calc(var(--spacing) * 5); } .px-2 { padding-inline: calc(var(--spacing) * 2); } .px-3 { padding-inline: calc(var(--spacing) * 3); } .px-8 { padding-inline: calc(var(--spacing) * 8); } .px-12 { padding-inline: calc(var(--spacing) * 12); } .py-1 { padding-block: calc(var(--spacing) * 1); } .py-3 { padding-block: calc(var(--spacing) * 3); } .pt-16 { padding-top: calc(var(--spacing) * 16); } .pb-3 { padding-bottom: calc(var(--spacing) * 3); } .pb-10 { padding-bottom: calc(var(--spacing) * 10); } .text-center { text-align: center; } .text-3xl { font-size: var(--text-3xl); line-height: var(--tw-leading, var(--text-3xl--line-height)); } .text-4xl { font-size: var(--text-4xl); line-height: var(--tw-leading, var(--text-4xl--line-height)); } .text-base { font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); } .text-lg { font-size: var(--text-lg); line-height: var(--tw-leading, var(--text-lg--line-height)); } .text-sm { font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); } .text-xl { font-size: var(--text-xl); line-height: var(--tw-leading, var(--text-xl--line-height)); } .leading-none { --tw-leading: 1; line-height: 1; } .leading-snug { --tw-leading: var(--leading-snug); line-height: var(--leading-snug); } .leading-tight { --tw-leading: var(--leading-tight); line-height: var(--leading-tight); } .font-bold { --tw-font-weight: var(--font-weight-bold); font-weight: var(--font-weight-bold); } .font-medium { --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); } .font-normal { --tw-font-weight: var(--font-weight-normal); font-weight: var(--font-weight-normal); } .font-semibold { --tw-font-weight: var(--font-weight-semibold); font-weight: var(--font-weight-semibold); } .whitespace-nowrap { white-space: nowrap; } .text-\[\#3B3B3B\] { color: #3b3b3b; } .text-\[\#5B5B5B\] { color: #5b5b5b; } .text-\[\#7A1020\] { color: #7a1020; } .text-\[\#D7192D\] { color: #d7192d; } .text-white { color: var(--color-white); } @media (min-width: 40rem) { .sm\:px-0 { padding-inline: calc(var(--spacing) * 0); } } @media (min-width: 48rem) { .md\:p-4 { padding: calc(var(--spacing) * 4); } } .scrollbar::-webkit-scrollbar { width: 4px; } .scrollbar::-webkit-scrollbar-track { background: #ddd; border-radius: 100vh; } .scrollbar::-webkit-scrollbar-thumb { background: #d7192d; border-radius: 100vh; } .scrollbar-hide::-webkit-scrollbar { display: none; } .scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; } } @font-face { font-family: iberiaheadline; font-weight: 400; font-style: normal; src: url("/assets/fonts/IberiaHeadline.otf"); } @font-face { font-family: iberiaheadline; font-weight: 700; font-style: normal; src: url("/assets/fonts/IberiaHeadlineBold.otf"); } @font-face { font-family: iberiaheadline; font-weight: 400; font-style: italic; src: url("/assets/fonts/IberiaHeadlineItalic.otf"); } @font-face { font-family: iberiatext; font-weight: 400; font-style: normal; src: url("/assets/fonts/IberiaText.otf"); } @font-face { font-family: iberiatext; font-weight: 700; font-style: normal; src: url("/assets/fonts/IberiaTextBold.otf"); } @font-face { font-family: iberiatext; font-weight: 400; font-style: italic; src: url("/assets/fonts/IberiaTextItalic.otf"); } #root { width: 100%; height: 100%; } .app-shell { flex-direction: column; height: 100dvh; min-height: 100dvh; display: flex; overflow: hidden; } .app-shell__header { flex-shrink: 0; } .app-shell__content { flex-direction: column; flex: 1; min-height: 0; display: flex; overflow: hidden; } .app-shell__route-view { flex: 1; justify-content: center; min-height: 0; display: flex; } @property --tw-rotate-x { syntax: "*"; inherits: false } @property --tw-rotate-y { syntax: "*"; inherits: false } @property --tw-rotate-z { syntax: "*"; inherits: false } @property --tw-skew-x { syntax: "*"; inherits: false } @property --tw-skew-y { syntax: "*"; inherits: false } @property --tw-border-style { syntax: "*"; inherits: false; initial-value: solid; } @property --tw-leading { syntax: "*"; inherits: false } @property --tw-font-weight { syntax: "*"; inherits: false } /*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */ @layer properties { @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { *, :before, :after, ::backdrop { --tw-rotate-x: initial; --tw-rotate-y: initial; --tw-rotate-z: initial; --tw-skew-x: initial; --tw-skew-y: initial; --tw-border-style: solid; --tw-leading: initial; --tw-font-weight: initial; } } } @layer theme { :root, :host { --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; --color-white: #fff; --spacing: .25rem; --text-sm: .875rem; --text-sm--line-height: calc(1.25 / .875); --text-base: 1rem; --text-base--line-height: calc(1.5 / 1); --text-lg: 1.125rem; --text-lg--line-height: calc(1.75 / 1.125); --text-xl: 1.25rem; --text-xl--line-height: calc(1.75 / 1.25); --text-3xl: 1.875rem; --text-3xl--line-height: calc(2.25 / 1.875); --text-4xl: 2.25rem; --text-4xl--line-height: calc(2.5 / 2.25); --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --leading-tight: 1.25; --leading-snug: 1.375; --radius-xl: .75rem; --radius-4xl: 2rem; --default-font-family: var(--font-sans); --default-mono-font-family: var(--font-mono); } } @layer base { *, :after, :before, ::backdrop { box-sizing: border-box; border: 0 solid; margin: 0; padding: 0; } ::file-selector-button { box-sizing: border-box; border: 0 solid; margin: 0; padding: 0; } html, :host { -webkit-text-size-adjust: 100%; tab-size: 4; line-height: 1.5; font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"); font-feature-settings: var(--default-font-feature-settings, normal); font-variation-settings: var(--default-font-variation-settings, normal); -webkit-tap-highlight-color: transparent; } hr { height: 0; color: inherit; border-top-width: 1px; } abbr:where([title]) { -webkit-text-decoration: underline dotted; text-decoration: underline dotted; } h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; } a { color: inherit; -webkit-text-decoration: inherit; -webkit-text-decoration: inherit; -webkit-text-decoration: inherit; text-decoration: inherit; } b, strong { font-weight: bolder; } code, kbd, samp, pre { font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace); font-feature-settings: var(--default-mono-font-feature-settings, normal); font-variation-settings: var(--default-mono-font-variation-settings, normal); font-size: 1em; } small { font-size: 80%; } sub, sup { vertical-align: baseline; font-size: 75%; line-height: 0; position: relative; } sub { bottom: -.25em; } sup { top: -.5em; } table { text-indent: 0; border-color: inherit; border-collapse: collapse; } :-moz-focusring { outline: auto; } progress { vertical-align: baseline; } summary { display: list-item; } ol, ul, menu { list-style: none; } img, svg, video, canvas, audio, iframe, embed, object { vertical-align: middle; display: block; } img, video { max-width: 100%; height: auto; } button, input, select, optgroup, textarea { font: inherit; font-feature-settings: inherit; font-variation-settings: inherit; letter-spacing: inherit; color: inherit; opacity: 1; background-color: #0000; border-radius: 0; } ::file-selector-button { font: inherit; font-feature-settings: inherit; font-variation-settings: inherit; letter-spacing: inherit; color: inherit; opacity: 1; background-color: #0000; border-radius: 0; } :where(select:is([multiple], [size])) optgroup { font-weight: bolder; } :where(select:is([multiple], [size])) optgroup option { padding-inline-start: 20px; } ::file-selector-button { margin-inline-end: 4px; } ::placeholder { opacity: 1; } @supports (not ((-webkit-appearance: -apple-pay-button))) or (contain-intrinsic-size: 1px) { ::placeholder { color: currentColor; } @supports (color: color-mix(in lab, red, red)) { ::placeholder { color: color-mix(in oklab, currentcolor 50%, transparent); } } } textarea { resize: vertical; } ::-webkit-search-decoration { -webkit-appearance: none; } ::-webkit-date-and-time-value { min-height: 1lh; text-align: inherit; } ::-webkit-datetime-edit { display: inline-flex; } ::-webkit-datetime-edit-fields-wrapper { padding: 0; } ::-webkit-datetime-edit { padding-block: 0; } ::-webkit-datetime-edit-year-field { padding-block: 0; } ::-webkit-datetime-edit-month-field { padding-block: 0; } ::-webkit-datetime-edit-day-field { padding-block: 0; } ::-webkit-datetime-edit-hour-field { padding-block: 0; } ::-webkit-datetime-edit-minute-field { padding-block: 0; } ::-webkit-datetime-edit-second-field { padding-block: 0; } ::-webkit-datetime-edit-millisecond-field { padding-block: 0; } ::-webkit-datetime-edit-meridiem-field { padding-block: 0; } ::-webkit-calendar-picker-indicator { line-height: 1; } :-moz-ui-invalid { box-shadow: none; } button, input:where([type="button"], [type="reset"], [type="submit"]) { appearance: button; } ::file-selector-button { appearance: button; } ::-webkit-inner-spin-button { height: auto; } ::-webkit-outer-spin-button { height: auto; } [hidden]:where(:not([hidden="until-found"])) { display: none !important; } } @layer components; @layer utilities { .fixed { position: fixed; } .static { position: static; } .col-span-1 { grid-column: span 1 / span 1; } .col-span-2 { grid-column: span 2 / span 2; } .col-span-3 { grid-column: span 3 / span 3; } .col-span-4 { grid-column: span 4 / span 4; } .col-span-5 { grid-column: span 5 / span 5; } .col-start-2 { grid-column-start: 2; } .row-span-2 { grid-row: span 2 / span 2; } .row-span-3 { grid-row: span 3 / span 3; } .row-start-2 { grid-row-start: 2; } .my-3 { margin-block: calc(var(--spacing) * 3); } .mt-1 { margin-top: calc(var(--spacing) * 1); } .mt-2 { margin-top: calc(var(--spacing) * 2); } .mt-5 { margin-top: calc(var(--spacing) * 5); } .mt-8 { margin-top: calc(var(--spacing) * 8); } .mt-10 { margin-top: calc(var(--spacing) * 10); } .mb-1 { margin-bottom: calc(var(--spacing) * 1); } .block { display: block; } .flex { display: flex; } .grid { display: grid; } .inline { display: inline; } .h-5 { height: calc(var(--spacing) * 5); } .h-15 { height: calc(var(--spacing) * 15); } .h-full { height: 100%; } .w-5 { width: calc(var(--spacing) * 5); } .w-96 { width: calc(var(--spacing) * 96); } .w-\[220px\] { width: 220px; } .w-fit { width: fit-content; } .w-full { width: 100%; } .min-w-0 { min-width: calc(var(--spacing) * 0); } .flex-1 { flex: 1; } .shrink-0 { flex-shrink: 0; } .transform { transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, ); } .grid-cols-\[min-content_auto\] { grid-template-columns: min-content auto; } .flex-col { flex-direction: column; } .flex-wrap { flex-wrap: wrap; } .items-center { align-items: center; } .justify-between { justify-content: space-between; } .justify-center { justify-content: center; } .gap-1 { gap: calc(var(--spacing) * 1); } .gap-2 { gap: calc(var(--spacing) * 2); } .gap-3 { gap: calc(var(--spacing) * 3); } .gap-4 { gap: calc(var(--spacing) * 4); } .gap-5 { gap: calc(var(--spacing) * 5); } .gap-6 { gap: calc(var(--spacing) * 6); } .gap-x-4 { column-gap: calc(var(--spacing) * 4); } .gap-y-1 { row-gap: calc(var(--spacing) * 1); } .truncate { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .rounded-4xl { border-radius: var(--radius-4xl); } .rounded-xl { border-radius: var(--radius-xl); } .border { border-style: var(--tw-border-style); border-width: 1px; } .border-2 { border-style: var(--tw-border-style); border-width: 2px; } .border-b { border-bottom-style: var(--tw-border-style); border-bottom-width: 1px; } .border-\[\#D7192D\] { border-color: #d7192d; } .border-\[\#DDDDDD\] { border-color: #ddd; } .border-\[\#FA9EA8\] { border-color: #fa9ea8; } .bg-\[\#D7192D\] { background-color: #d7192d; } .bg-\[\#FA9EA8\] { background-color: #fa9ea8; } .bg-\[\#FFEBED\] { background-color: #ffebed; } .bg-\[\#FFF1F3\] { background-color: #fff1f3; } .bg-white { background-color: var(--color-white); } .p-2 { padding: calc(var(--spacing) * 2); } .p-3 { padding: calc(var(--spacing) * 3); } .p-5 { padding: calc(var(--spacing) * 5); } .px-2 { padding-inline: calc(var(--spacing) * 2); } .px-3 { padding-inline: calc(var(--spacing) * 3); } .px-8 { padding-inline: calc(var(--spacing) * 8); } .px-12 { padding-inline: calc(var(--spacing) * 12); } .py-1 { padding-block: calc(var(--spacing) * 1); } .py-3 { padding-block: calc(var(--spacing) * 3); } .pt-16 { padding-top: calc(var(--spacing) * 16); } .pb-3 { padding-bottom: calc(var(--spacing) * 3); } .pb-10 { padding-bottom: calc(var(--spacing) * 10); } .text-center { text-align: center; } .text-3xl { font-size: var(--text-3xl); line-height: var(--tw-leading, var(--text-3xl--line-height)); } .text-4xl { font-size: var(--text-4xl); line-height: var(--tw-leading, var(--text-4xl--line-height)); } .text-base { font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); } .text-lg { font-size: var(--text-lg); line-height: var(--tw-leading, var(--text-lg--line-height)); } .text-sm { font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); } .text-xl { font-size: var(--text-xl); line-height: var(--tw-leading, var(--text-xl--line-height)); } .leading-none { --tw-leading: 1; line-height: 1; } .leading-snug { --tw-leading: var(--leading-snug); line-height: var(--leading-snug); } .leading-tight { --tw-leading: var(--leading-tight); line-height: var(--leading-tight); } .font-bold { --tw-font-weight: var(--font-weight-bold); font-weight: var(--font-weight-bold); } .font-medium { --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); } .font-normal { --tw-font-weight: var(--font-weight-normal); font-weight: var(--font-weight-normal); } .font-semibold { --tw-font-weight: var(--font-weight-semibold); font-weight: var(--font-weight-semibold); } .whitespace-nowrap { white-space: nowrap; } .text-\[\#3B3B3B\] { color: #3b3b3b; } .text-\[\#5B5B5B\] { color: #5b5b5b; } .text-\[\#7A1020\] { color: #7a1020; } .text-\[\#D7192D\] { color: #d7192d; } .text-white { color: var(--color-white); } @media (min-width: 40rem) { .sm\:px-0 { padding-inline: calc(var(--spacing) * 0); } } @media (min-width: 48rem) { .md\:p-4 { padding: calc(var(--spacing) * 4); } } .scrollbar::-webkit-scrollbar { width: 4px; } .scrollbar::-webkit-scrollbar-track { background: #ddd; border-radius: 100vh; } .scrollbar::-webkit-scrollbar-thumb { background: #d7192d; border-radius: 100vh; } .scrollbar-hide::-webkit-scrollbar { display: none; } .scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; } } @font-face { font-family: iberiaheadline; font-weight: 400; font-style: normal; src: url("/assets/fonts/IberiaHeadline.otf"); } @font-face { font-family: iberiaheadline; font-weight: 700; font-style: normal; src: url("/assets/fonts/IberiaHeadlineBold.otf"); } @font-face { font-family: iberiaheadline; font-weight: 400; font-style: italic; src: url("/assets/fonts/IberiaHeadlineItalic.otf"); } @font-face { font-family: iberiatext; font-weight: 400; font-style: normal; src: url("/assets/fonts/IberiaText.otf"); } @font-face { font-family: iberiatext; font-weight: 700; font-style: normal; src: url("/assets/fonts/IberiaTextBold.otf"); } @font-face { font-family: iberiatext; font-weight: 400; font-style: italic; src: url("/assets/fonts/IberiaTextItalic.otf"); } .info-flight { background-color: #fafafa; flex-direction: column; flex: 1; width: 100%; max-width: 100vw; min-height: 0; display: flex; overflow: hidden; } .info-flight__layout { flex-direction: column; flex: 1; gap: .75rem; min-height: 0; display: flex; } .info-flight__content { flex: 1; grid-template-rows: auto minmax(0, 1fr) minmax(0, 1fr) auto; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .75rem; min-height: 0; display: grid; } .info-flight__card { flex-direction: column; min-height: 0; display: flex; } .info-flight__panel-body { flex: 1; min-height: 0; padding-right: .25rem; overflow: auto; } .info-flight__flight-summary { flex: 1; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: center; gap: 1rem; min-height: 0; display: grid; } .info-flight__summary-item { text-align: center; min-width: 0; } .info-flight__actions { align-items: center; } .info-flight__panel-body::-webkit-scrollbar { width: .4rem; } .info-flight__panel-body::-webkit-scrollbar-thumb { background-color: #c8c8c8; border-radius: 999px; } @media (max-height: 820px) { .info-flight__layout, .info-flight__content { gap: .5rem; } } .pf-v6-c-check__label { font-size: var(--text-lg); line-height: var(--tw-leading, var(--text-lg--line-height)); --tw-leading: var(--leading-snug); line-height: var(--leading-snug); } .pf-v6-c-check__input { margin-top: calc(var(--spacing) * 1); height: calc(var(--spacing) * 3); width: calc(var(--spacing) * 3); } .feedback-modal { border-radius: .75rem; padding: 0; } .feedback-modal .pf-v6-c-modal-box__close { inset-inline-end: 1.5rem; top: 1.5rem; } .feedback-modal .pf-v6-c-modal-box__close .pf-v6-c-button.pf-m-plain { color: #d7192d; } .feedback-modal .pf-v6-c-modal-box__close .pf-v6-c-button.pf-m-plain:hover, .feedback-modal .pf-v6-c-modal-box__close .pf-v6-c-button.pf-m-plain:focus, .feedback-modal .pf-v6-c-modal-box__close .pf-v6-c-button.pf-m-plain:active { color: #b51627; background-color: #0000; border-color: #0000; } .feedback-modal .pf-v6-c-modal-box__close .pf-v6-c-button.pf-m-plain svg { width: 1.5rem; height: 1.5rem; } @property --tw-rotate-x { syntax: "*"; inherits: false } @property --tw-rotate-y { syntax: "*"; inherits: false } @property --tw-rotate-z { syntax: "*"; inherits: false } @property --tw-skew-x { syntax: "*"; inherits: false } @property --tw-skew-y { syntax: "*"; inherits: false } @property --tw-border-style { syntax: "*"; inherits: false; initial-value: solid; } @property --tw-leading { syntax: "*"; inherits: false } @property --tw-font-weight { syntax: "*"; inherits: false } .login-background { background-size: 170% auto; background-repeat: no-repeat; background-position: center; } .login-page { height: calc(100vh - 5.375rem); } .login-box { background-color: white; padding: 2.5rem; border-radius: 0.5rem; max-width: 36rem; max-height: 356px; button { width: 100%; font-size: 1rem; line-height: 1.5rem; padding-top: 0.75rem; padding-bottom: 0.75rem; background-color: rgb(215 25 45 / var(--tw-bg-opacity, 1)); border-radius: 0.125rem; } } /*$vite$:1*/