/* PatternFly component: Page/page */ .pf-v6-c-page { --pf-v6-c-page--BackgroundColor: var(--pf-t--global--background--color--secondary--default); --pf-v6-c-page--inset: var(--pf-t--global--spacer--inset--page-chrome); --pf-v6-c-page--c-masthead--ZIndex: var(--pf-t--global--z-index--md); --pf-v6-c-page__dock--Width: 15.625rem; --pf-v6-c-page__dock--desktop--Width: auto; --pf-v6-c-page__dock--ZIndex: var(--pf-t--global--z-index--md); --pf-v6-c-page__dock--TransitionDuration--slide: 0s; --pf-v6-c-page__dock--m-expanded--TransitionDuration--slide: 0s; --pf-v6-c-page__dock--TransitionTimingFunction--slide: var(--pf-t--global--motion--timing-function--decelerate); --pf-v6-c-page__dock-main--BackgroundColor: var(--pf-t--global--background--color--floating--default); --pf-v6-c-page__dock-main--desktop--BackgroundColor: var(--pf-t--global--background--color--glass--primary--default, var(--pf-t--global--background--color--primary--default)); --pf-v6-c-page__dock-main--BoxShadow: none; --pf-v6-c-page__dock--m-expanded__dock-main--BoxShadow: var(--pf-t--global--box-shadow--sm--right); --pf-v6-c-page__dock-main--desktop--BoxShadow: var(--pf-t--global--box-shadow--glass--default, none); --pf-v6-c-page__dock-main--BackdropFilter: var(--pf-t--global--background--filter--glass--blur--primary, revert); --pf-v6-c-page__dock-main--BorderInlineEndWidth: 0; --pf-v6-c-page__dock-main--BorderInlineEndColor: transparent; --pf-v6-c-page__dock-main--desktop--BorderInlineEndWidth: var(--pf-t--global--border--width--regular); --pf-v6-c-page__dock-main--desktop--BorderInlineEndColor: var(--pf-t--global--border--color--glass--default, var(--pf-t--global--border--color--subtle)); --pf-v6-c-page__dock--m-expanded__dock-main--BorderInlineEndWidth: var(--pf-t--global--border--width--glass--default, var(--pf-t--global--border--width--regular)); --pf-v6-c-page__dock--m-expanded__dock-main--BorderInlineEndColor: transparent; --pf-v6-c-page--m-dock__main-container--MaxHeight: calc(100% - var(--pf-t--global--spacer--inset--page-chrome) * 2); --pf-v6-c-page--m-dock__main-container--MarginBlockStart: var(--pf-t--global--spacer--inset--page-chrome); --pf-v6-c-page--m-dock__main-container--desktop--MarginBlockStart: var(--pf-t--global--spacer--inset--page-chrome); --pf-v6-c-page--m-dock--ColumnGap: var(--pf-t--global--spacer--inset--page-chrome); --pf-v6-c-page--m-dock--c-masthead--m-display-inline--GridTemplateColumns: min-content 1fr; --pf-v6-c-page__sidebar--ZIndex: var(--pf-t--global--z-index--sm); --pf-v6-c-page__sidebar--Width--base: 18.125rem; --pf-v6-c-page__sidebar--Width: var(--pf-v6-c-page__sidebar--Width--base); --pf-v6-c-page__sidebar--xl--Width: var(--pf-v6-c-page__sidebar--Width--base); --pf-v6-c-page__sidebar--BackgroundColor: var(--pf-t--global--background--color--floating--secondary--default); --pf-v6-c-page__sidebar--BackdropFilter: none; --pf-v6-c-page__sidebar--xl--BackdropFilter: var(--pf-t--global--background--filter--glass--blur--primary); --pf-v6-c-page__sidebar--xl--BackgroundColor: var(--pf-t--global--background--color--glass--primary--default, var(--pf-t--global--background--color--secondary--default)); --pf-v6-c-page__sidebar--BoxShadow: var(--pf-t--global--box-shadow--md--right); --pf-v6-c-page__sidebar--TransitionProperty: opacity; --pf-v6-c-page__sidebar--TransitionDuration: var(--pf-t--global--motion--duration--fade--default); --pf-v6-c-page__sidebar--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate); --pf-v6-c-page__sidebar--TranslateX: -100%; --pf-v6-c-page__sidebar--Opacity: 0; --pf-v6-c-page__sidebar--m-expanded--Opacity: 1; --pf-v6-c-page__sidebar--xl--Opacity: 1; --pf-v6-c-page__sidebar--TranslateZ: 0; --pf-v6-c-page__sidebar--m-expanded--TranslateX: 0; --pf-v6-c-page__sidebar--xl--TranslateX: 0; --pf-v6-c-page__sidebar--MarginBlockStart: 0; --pf-v6-c-page__sidebar--MarginInlineEnd: calc(var(--pf-t--global--spacer--inset--page-chrome) / 2); --pf-v6-c-page__sidebar--PaddingBlockEnd: var(--pf-t--global--spacer--lg); --pf-v6-c-page__sidebar--PaddingInlineStart: 0; --pf-v6-c-page__sidebar--PaddingInlineEnd: 0; --pf-v6-c-page__sidebar--BorderInlineEndWidth: var(--pf-t--global--border--width--high-contrast--regular); --pf-v6-c-page__sidebar--BorderInlineEndColor: var(--pf-t--global--border--color--high-contrast); } @media screen and (prefers-reduced-motion: no-preference) { .pf-v6-c-page { --pf-v6-c-page__sidebar--Opacity: 1; --pf-v6-c-page__sidebar--TransitionProperty: transform; --pf-v6-c-page__sidebar--TransitionDuration: var(--pf-t--global--motion--duration--slide-in--default); --pf-v6-c-page__dock--TransitionDuration--slide: var(--pf-t--global--motion--duration--slide-out--short); --pf-v6-c-page__dock--m-expanded--TransitionDuration--slide: var(--pf-t--global--motion--duration--slide-in--default); } } .pf-v6-c-page { --pf-v6-c-page__sidebar-main--PaddingBlockStart: 0; --pf-v6-c-page__sidebar-main--PaddingBlockEnd: 0; --pf-v6-c-page__sidebar-main--PaddingInlineStart: 0; --pf-v6-c-page__sidebar-main--PaddingInlineEnd: 0; --pf-v6-c-page__sidebar-main--MarginBlockStart: 0; --pf-v6-c-page__sidebar-main--MarginBlockEnd: 0; --pf-v6-c-page__sidebar-main--MarginInlineStart: 0; --pf-v6-c-page__sidebar-main--MarginInlineEnd: 0; --pf-v6-c-page__sidebar-main--BackgroundColor: transparent; --pf-v6-c-page__sidebar-main--BackdropFilter: none; --pf-v6-c-page__sidebar-main--BorderWidth: 0; --pf-v6-c-page__sidebar-main--BorderColor: transparent; --pf-v6-c-page__sidebar-main--BorderRadius: 0; --pf-v6-c-page__sidebar-main--BoxShadow: none; --pf-v6-c-page__sidebar-header--BorderBlockEndWidth: var(--pf-t--global--border--width--divider--default); --pf-v6-c-page__sidebar-header--BorderBlockEndColor: var(--pf-t--global--border--color--default); --pf-v6-c-page__sidebar-header--PaddingBlockStart: var(--pf-t--global--spacer--sm); --pf-v6-c-page__sidebar-header--PaddingBlockEnd: var(--pf-t--global--spacer--md); --pf-v6-c-page__sidebar-title--PaddingInlineStart: var(--pf-t--global--spacer--lg); --pf-v6-c-page__sidebar-title--FontSize: var(--pf-t--global--font--size--heading--xs); --pf-v6-c-page__sidebar-title--LineHeight: var(--pf-t--global--font--line-height--heading); --pf-v6-c-page__sidebar-title--FontFamily: var(--pf-t--global--font--family--heading); --pf-v6-c-page__sidebar-title--FontWeight: var(--pf-t--global--font--weight--heading--default); --pf-v6-c-page__sidebar-body--PaddingInlineEnd: calc(var(--pf-t--global--spacer--inset--page-chrome) / 2); --pf-v6-c-page__sidebar-body--PaddingInlineStart: var(--pf-t--global--spacer--inset--page-chrome); --pf-v6-c-page__sidebar-body--m-page-insets--PaddingInlineEnd: var(--pf-v6-c-page--inset); --pf-v6-c-page__sidebar-body--m-page-insets--PaddingInlineStart: var(--pf-v6-c-page--inset); --pf-v6-c-page__sidebar-body--m-context-selector--PaddingInlineEnd: var(--pf-t--global--spacer--md); --pf-v6-c-page__sidebar-body--m-context-selector--PaddingInlineStart: var(--pf-t--global--spacer--md); } @media screen and (min-width: 75rem) { .pf-v6-c-page { --pf-v6-c-page__sidebar--TranslateX: var(--pf-v6-c-page__sidebar--xl--TranslateX); --pf-v6-c-page__sidebar--Opacity: var(--pf-v6-c-page__sidebar--xl--Opacity); --pf-v6-c-page__sidebar--BorderInlineEndWidth: 0; --pf-v6-c-page__sidebar--BackgroundColor: var(--pf-v6-c-page__sidebar--xl--BackgroundColor); --pf-v6-c-page__sidebar--BackdropFilter: var(--pf-v6-c-page__sidebar--xl--BackdropFilter); } } .pf-v6-c-page { --pf-v6-c-page__main-container--ZIndex: var(--pf-t--global--z-index--xs); --pf-v6-c-page__main-container--GridArea: main; --pf-v6-c-page--masthead--main-container--GridArea: sidebar / sidebar / main / main; --pf-v6-c-page__main-container--MaxHeight: calc(100% - var(--pf-t--global--spacer--lg)); --pf-v6-c-page__main-container--AlignSelf: start; --pf-v6-c-page__main-container--BackgroundColor: var(--pf-t--global--background--color--glass--primary--default, var(--pf-t--global--background--color--primary--default)); --pf-v6-c-page__main-container--BackdropFilter: var(--pf-t--global--background--filter--glass--blur--primary); --pf-v6-c-page__main-container--MarginInlineStart: var(--pf-v6-c-page--inset); --pf-v6-c-page__main-container--MarginInlineEnd: var(--pf-v6-c-page--inset); --pf-v6-c-page__main-container--BorderRadius: var(--pf-t--global--border--radius--medium); --pf-v6-c-page__main-container--BorderBlockStartWidth: var(--pf-t--global--border--width--main--default); --pf-v6-c-page__main-container--BorderBlockEndWidth: var(--pf-t--global--border--width--main--default); --pf-v6-c-page__main-container--BorderInlineStartWidth: var(--pf-t--global--border--width--main--default); --pf-v6-c-page__main-container--BorderInlineEndWidth: var(--pf-t--global--border--width--main--default); --pf-v6-c-page__main-container--BorderColor: var(--pf-t--global--border--color--main--default); --pf-v6-c-page__main-container--BoxShadow: var(--pf-t--global--box-shadow--glass--default, none); --pf-v6-c-page__main-container--xs--AlignSelf: stretch; --pf-v6-c-page__main-container--xs--BorderRadius: 0; --pf-v6-c-page__main-container--xs--MarginInlineStart: 0; --pf-v6-c-page__main-container--xs--MaxHeight: 100%; --pf-v6-c-page__main-container--xs--MarginInlineEnd: 0; --pf-v6-c-page__main-container--xs--BorderBlockEndWidth: 0; --pf-v6-c-page__main-container--xs--BorderInlineStartWidth: 0px; --pf-v6-c-page__main-container--xs--BorderInlineEndWidth: 0px; } @media screen and (max-width: calc(48rem - 1px)) { .pf-v6-c-page { --pf-v6-c-page__main-container--MarginInlineStart: var(--pf-v6-c-page__main-container--xs--MarginInlineStart); --pf-v6-c-page__main-container--MarginInlineEnd: var(--pf-v6-c-page__main-container--xs--MarginInlineEnd); --pf-v6-c-page__main-container--BorderBlockEndWidth: var(--pf-v6-c-page__main-container--xs--BorderBlockEndWidth); --pf-v6-c-page__main-container--BorderInlineStartWidth: var(--pf-v6-c-page__main-container--xs--BorderInlineStartWidth); --pf-v6-c-page__main-container--BorderInlineEndWidth: var(--pf-v6-c-page__main-container--xs--BorderInlineEndWidth); } } .pf-v6-c-page { --pf-v6-c-page__main-section--PaddingBlockStart: var(--pf-t--global--spacer--md); --pf-v6-c-page__main-section--PaddingInlineEnd: var(--pf-t--global--spacer--lg); --pf-v6-c-page__main-section--PaddingBlockEnd: var(--pf-t--global--spacer--md); --pf-v6-c-page__main-section--PaddingInlineStart: var(--pf-t--global--spacer--lg); --pf-v6-c-page__main-section--RowGap: var(--pf-t--global--spacer--lg); --pf-v6-c-page__main-breadcrumb--main-section--PaddingBlockStart: var(--pf-t--global--spacer--md); --pf-v6-c-page__main-section--BackgroundColor: var(--pf-t--global--background--color--primary--default); --pf-v6-c-page__main-section--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default); --pf-v6-c-page__main-breadcrumb--page__main-tabs--PaddingBlockStart: var(--pf-t--global--spacer--md); --pf-v6-c-page__main-section--m-secondary--BorderBlockStartWidth: var(--pf-t--global--border--width--glass--default, var(--pf-t--global--border--width--high-contrast--regular)); --pf-v6-c-page__main-section--m-secondary--BorderBlockStartColor: var(--pf-t--global--border--color--subtle); --pf-v6-c-page__main-section--m-secondary--BorderBlockEndWidth: var(--pf-t--global--border--width--glass--default, var(--pf-t--global--border--width--high-contrast--regular)); --pf-v6-c-page__main-section--m-secondary--BorderBlockEndColor: var(--pf-t--global--border--color--subtle); --pf-v6-c-page--section--m-limit-width--MaxWidth: calc(125rem - var(--pf-v6-c-page__sidebar--Width)); --pf-v6-c-page--section--m-sticky-top--ZIndex: var(--pf-t--global--z-index--md); --pf-v6-c-page--section--m-sticky-top--BoxShadow: var(--pf-t--global--box-shadow--sm--bottom); --pf-v6-c-page--section--m-sticky-top--BorderBlockEndWidth: var(--pf-t--global--border--width--high-contrast--regular); --pf-v6-c-page--section--m-sticky-top--BorderBlockEndColor: var(--pf-t--global--border--color--high-contrast); --pf-v6-c-page--section--m-sticky-top--BackgroundColor: var(--pf-t--global--background--color--sticky--default); --pf-v6-c-page--section--m-sticky-bottom--ZIndex: var(--pf-t--global--z-index--md); --pf-v6-c-page--section--m-sticky-bottom--BoxShadow: var(--pf-t--global--box-shadow--sm--top); --pf-v6-c-page--section--m-sticky-bottom--BorderBlockStartWidth: var(--pf-t--global--border--width--high-contrast--regular); --pf-v6-c-page--section--m-sticky-bottom--BorderBlockStartColor: var(--pf-t--global--border--color--high-contrast); --pf-v6-c-page--section--m-sticky-bottom--BackgroundColor: var(--pf-t--global--background--color--sticky--default); --pf-v6-c-page--section--m-sticky-top--TransitionDuration: var(--pf-t--global--motion--duration--fade--short); --pf-v6-c-page--section--m-sticky-top--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default); --pf-v6-c-page--section--m-sticky-bottom--TransitionDuration: var(--pf-t--global--motion--duration--fade--short); --pf-v6-c-page--section--m-sticky-bottom--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default); --pf-v6-c-page--section--m-shadow-bottom--BoxShadow: var(--pf-t--global--box-shadow--sm--bottom); --pf-v6-c-page--section--m-shadow-bottom--ZIndex: var(--pf-t--global--z-index--xs); --pf-v6-c-page--section--m-shadow-bottom--BorderBlockEndWidth: var(--pf-t--global--border--width--high-contrast--regular); --pf-v6-c-page--section--m-shadow-bottom--BorderBlockEndColor: var(--pf-t--global--border--color--high-contrast); --pf-v6-c-page--section--m-shadow-top--BoxShadow: var(--pf-t--global--box-shadow--sm--top); --pf-v6-c-page--section--m-shadow-top--ZIndex: var(--pf-t--global--z-index--xs); --pf-v6-c-page--section--m-shadow-top--BorderBlockStartWidth: var(--pf-t--global--border--width--high-contrast--regular); --pf-v6-c-page--section--m-shadow-top--BorderBlockStartColor: var(--pf-t--global--border--color--high-contrast); --pf-v6-c-page__main-subnav--BackgroundColor: var(--pf-t--global--background--color--primary--default); --pf-v6-c-page__main-subnav--PaddingBlockStart: var(--pf-t--global--spacer--md); --pf-v6-c-page__main-subnav--PaddingBlockEnd: 0; --pf-v6-c-page__main-subnav--PaddingInlineStart: calc(var(--pf-t--global--spacer--lg) - var(--pf-v6-c-page__main-container--BorderInlineStartWidth)); --pf-v6-c-page__main-subnav--PaddingInlineEnd: calc(var(--pf-t--global--spacer--lg) - var(--pf-v6-c-page__main-container--BorderInlineEndWidth)); --pf-v6-c-page__main-subnav--m-sticky-top--PaddingBlockEnd: var(--pf-t--global--spacer--md); --pf-v6-c-page__main-breadcrumb--PaddingBlockStart: var(--pf-t--global--spacer--md); --pf-v6-c-page__main-breadcrumb--PaddingInlineEnd: calc(var(--pf-t--global--spacer--lg) - var(--pf-v6-c-page__main-container--BorderInlineEndWidth)); --pf-v6-c-page__main-breadcrumb--PaddingBlockEnd: 0; --pf-v6-c-page__main-breadcrumb--PaddingInlineStart: calc(var(--pf-t--global--spacer--lg) - var(--pf-v6-c-page__main-container--BorderInlineStartWidth)); --pf-v6-c-page__main-breadcrumb--BackgroundColor: var(--pf-t--global--background--color--primary--default); --pf-v6-c-page__main-breadcrumb--m-sticky-top--PaddingBlockEnd: var(--pf-t--global--spacer--md); --pf-v6-c-page__main-tabs--PaddingBlockStart: 0; --pf-v6-c-page__main-tabs--PaddingInlineEnd: 0; --pf-v6-c-page__main-tabs--PaddingBlockEnd: 0; --pf-v6-c-page__main-tabs--PaddingInlineStart: 0; --pf-v6-c-page__main-tabs--BackgroundColor: var(--pf-t--global--background--color--primary--default); --pf-v6-c-page__main-wizard--BackgroundColor: var(--pf-t--global--background--color--primary--default); --pf-v6-c-page__main-wizard--BorderBlockStartColor: var(--pf-t--global--border--color--default); --pf-v6-c-page__main-wizard--BorderBlockStartWidth: var(--pf-t--global--border--width--action--default); --pf-v6-c-page__drawer--c-drawer--BorderBlockStartWidth: var(--pf-t--global--border--width--high-contrast--regular); --pf-v6-c-page__drawer--c-drawer--BorderBlockStartColor: var(--pf-t--global--border--color--high-contrast); --pf-v6-c-page--BackgroundColor--glass: transparent; --pf-v6-c-page__sidebar--Width--base--glass: calc(18.125rem + var(--pf-t--global--spacer--inset--page-chrome) * 2); --pf-v6-c-page__sidebar--MarginBlockStart--glass: var(--pf-t--global--spacer--gutter--default); --pf-v6-c-page__sidebar-body--PaddingInlineStart--glass: var(--pf-t--global--spacer--md); --pf-v6-c-page__sidebar-body--PaddingInlineEnd--glass: var(--pf-t--global--spacer--md); --pf-v6-c-page__sidebar-main--PaddingBlockEnd--glass: var(--pf-v6-c-page__sidebar--PaddingBlockEnd); --pf-v6-c-page__sidebar-main--PaddingInlineStart--glass: var(--pf-v6-c-page__sidebar--PaddingInlineStart); --pf-v6-c-page__sidebar-main--PaddingInlineEnd--glass: var(--pf-v6-c-page__sidebar--PaddingInlineEnd); --pf-v6-c-page__sidebar-main--MarginBlockStart--glass: calc(var(--pf-t--global--spacer--xs) * -1); --pf-v6-c-page__sidebar-main--MarginBlockEnd--glass: calc(var(--pf-t--global--spacer--inset--page-chrome) - var(--pf-t--global--spacer--xs)); --pf-v6-c-page__sidebar-main--MarginInlineStart--glass: calc(var(--pf-t--global--spacer--inset--page-chrome) - var(--pf-t--global--spacer--xs)); --pf-v6-c-page__sidebar-main--MarginInlineEnd--glass: var(--pf-t--global--spacer--md); --pf-v6-c-page__sidebar-main--BackgroundColor--glass: var(--pf-v6-c-page__sidebar--BackgroundColor); --pf-v6-c-page__sidebar-main--BackdropFilter--glass: var(--pf-v6-c-page__sidebar--BackdropFilter); --pf-v6-c-page__sidebar-main--BorderWidth--glass: var(--pf-t--global--border--width--glass--default); --pf-v6-c-page__sidebar-main--BorderColor--glass: var(--pf-t--global--border--color--glass--default); --pf-v6-c-page__sidebar-main--BorderRadius--glass: var(--pf-t--global--border--radius--glass--default); --pf-v6-c-page__sidebar-main--BoxShadow--glass: var(--pf-t--global--box-shadow--glass--default); --pf-v6-c-page__sidebar-main--xl--MarginBlockStart--glass: 0; --pf-v6-c-page__sidebar-main--xl--MarginBlockEnd--glass: var(--pf-t--global--spacer--inset--page-chrome); --pf-v6-c-page__sidebar-main--xl--MarginInlineStart--glass: var(--pf-t--global--spacer--inset--page-chrome); --pf-v6-c-page__sidebar-main--xl--MarginInlineEnd--glass: var(--pf-t--global--spacer--gutter--default); --pf-v6-c-page__main-container--MarginBlockStart--glass: var(--pf-t--global--spacer--gutter--default); --pf-v6-c-page__main-container--MaxHeight--glass: calc(100% - var(--pf-t--global--spacer--inset--page-chrome) - var(--pf-t--global--spacer--gutter--default)); --pf-v6-c-page--m-dock__main-container--MaxHeight--glass: calc(100% - var(--pf-t--global--spacer--inset--page-chrome) - var(--pf-t--global--spacer--gutter--default)); --pf-v6-c-page--m-dock__main-container--MarginBlockStart--glass: var(--pf-t--global--spacer--gutter--default); } :where(.pf-v6-theme-glass) .pf-v6-c-page { --pf-v6-c-page--BackgroundColor: var(--pf-v6-c-page--BackgroundColor--glass); --pf-v6-c-page__sidebar--Width--base: var(--pf-v6-c-page__sidebar--Width--base--glass); --pf-v6-c-page__sidebar--MarginBlockStart: var(--pf-v6-c-page__sidebar--MarginBlockStart--glass); --pf-v6-c-page__sidebar-body--PaddingInlineStart: var(--pf-v6-c-page__sidebar-body--PaddingInlineStart--glass); --pf-v6-c-page__sidebar-body--PaddingInlineEnd: var(--pf-v6-c-page__sidebar-body--PaddingInlineEnd--glass); --pf-v6-c-page__sidebar-main--PaddingBlockEnd: var(--pf-v6-c-page__sidebar-main--PaddingBlockEnd--glass); --pf-v6-c-page__sidebar-main--PaddingInlineStart: var(--pf-v6-c-page__sidebar-main--PaddingInlineStart--glass); --pf-v6-c-page__sidebar-main--PaddingInlineEnd: var(--pf-v6-c-page__sidebar-main--PaddingInlineEnd--glass); --pf-v6-c-page__sidebar-main--MarginBlockStart: var(--pf-v6-c-page__sidebar-main--MarginBlockStart--glass); --pf-v6-c-page__sidebar-main--MarginBlockEnd: var(--pf-v6-c-page__sidebar-main--MarginBlockEnd--glass); --pf-v6-c-page__sidebar-main--MarginInlineStart: var(--pf-v6-c-page__sidebar-main--MarginInlineStart--glass); --pf-v6-c-page__sidebar-main--MarginInlineEnd: var(--pf-v6-c-page__sidebar-main--MarginInlineEnd--glass); --pf-v6-c-page__sidebar-main--BackgroundColor: var(--pf-v6-c-page__sidebar-main--BackgroundColor--glass); --pf-v6-c-page__sidebar-main--BackdropFilter: var(--pf-v6-c-page__sidebar-main--BackdropFilter--glass); --pf-v6-c-page__sidebar-main--BorderWidth: var(--pf-v6-c-page__sidebar-main--BorderWidth--glass); --pf-v6-c-page__sidebar-main--BorderColor: var(--pf-v6-c-page__sidebar-main--BorderColor--glass); --pf-v6-c-page__sidebar-main--BorderRadius: var(--pf-v6-c-page__sidebar-main--BorderRadius--glass); --pf-v6-c-page__sidebar-main--BoxShadow: var(--pf-v6-c-page__sidebar-main--BoxShadow--glass); --pf-v6-c-page__main-container--MarginBlockStart: var(--pf-v6-c-page__main-container--MarginBlockStart--glass); --pf-v6-c-page__main-container--MaxHeight: var(--pf-v6-c-page__main-container--MaxHeight--glass); --pf-v6-c-page--m-dock__main-container--MaxHeight: var(--pf-v6-c-page--m-dock__main-container--MaxHeight--glass); --pf-v6-c-page--m-dock__main-container--MarginBlockStart: var(--pf-v6-c-page--m-dock__main-container--MarginBlockStart--glass); } @media (min-width: 75rem) { .pf-v6-c-page { --pf-v6-c-page__sidebar-main--MarginBlockStart--glass: var(--pf-v6-c-page__sidebar-main--xl--MarginBlockStart--glass); --pf-v6-c-page__sidebar-main--MarginBlockEnd--glass: var(--pf-v6-c-page__sidebar-main--xl--MarginBlockEnd--glass); --pf-v6-c-page__sidebar-main--MarginInlineStart--glass: var(--pf-v6-c-page__sidebar-main--xl--MarginInlineStart--glass); --pf-v6-c-page__sidebar-main--MarginInlineEnd--glass: var(--pf-v6-c-page__sidebar-main--xl--MarginInlineEnd--glass); } } .pf-v6-c-page { display: grid; grid-template-areas: "header" "main"; grid-template-rows: max-content 1fr; grid-template-columns: 1fr; height: 100vh; height: 100dvh; max-height: 100%; background-color: var(--pf-v6-c-page--BackgroundColor); } @media (min-width: 75rem) { .pf-v6-c-page { --pf-v6-c-page__sidebar--Width: var(--pf-v6-c-page__sidebar--xl--Width); grid-template-areas: "header header" "sidebar main"; grid-template-columns: var(--pf-v6-c-page__sidebar--Width) 1fr; } } .pf-v6-c-page.pf-m-docked { --pf-v6-c-page--masthead--main-container--GridArea: main; --pf-v6-c-page__main-container--MaxHeight: var(--pf-v6-c-page--m-dock__main-container--MaxHeight); --pf-v6-c-page__main-container--MarginBlockStart: var(--pf-v6-c-page--m-dock__main-container--MarginBlockStart); grid-template-areas: "header header" "dock main"; grid-template-rows: max-content 1fr; grid-template-columns: auto 1fr; } @media (min-width: 62rem) { .pf-v6-c-page.pf-m-docked { --pf-v6-c-page__main-container--MarginBlockStart: var(--pf-v6-c-page--m-dock__main-container--desktop--MarginBlockStart); --pf-v6-c-page__main-container--MarginInlineStart: 0; grid-template-areas: "dock main"; grid-template-rows: auto; grid-template-columns: auto 1fr; column-gap: var(--pf-v6-c-page--m-dock--ColumnGap); } .pf-v6-c-page.pf-m-docked > .pf-v6-c-masthead { display: none; } } .pf-v6-c-page > .pf-v6-c-masthead .pf-v6-c-masthead__toggle .pf-v6-c-button.pf-m-hamburger:is(:hover, :focus-visible) { --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-page:where(:has(> .pf-v6-c-page__sidebar.pf-m-expanded)) > .pf-v6-c-masthead .pf-v6-c-masthead__toggle :is(.pf-v6-c-button.pf-m-hamburger, .pf-v6-c-button.pf-m-hamburger:hover, .pf-v6-c-button.pf-m-hamburger:focus-visible) { --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-collapse--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-collapse--ScaleX); } @media (min-width: 75rem) { .pf-v6-c-page > .pf-v6-c-masthead .pf-v6-c-masthead__toggle .pf-v6-c-button.pf-m-hamburger, .pf-v6-c-page:where(:has(> .pf-v6-c-page__sidebar.pf-m-expanded)) > .pf-v6-c-masthead .pf-v6-c-masthead__toggle :is(.pf-v6-c-button.pf-m-hamburger, .pf-v6-c-button.pf-m-hamburger:hover, .pf-v6-c-button.pf-m-hamburger:focus-visible) { --pf-v6-c-button--hamburger-icon--top--path: var(--pf-v6-c-button--hamburger-icon--top--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__icon--TransitionDelay: var(--pf-v6-c-button--hamburger-icon--TransitionDuration); --pf-v6-c-button--hover__icon--TransitionDelay: var(--pf-v6-c-button--hamburger-icon--TransitionDuration); } .pf-v6-c-page > .pf-v6-c-masthead .pf-v6-c-masthead__toggle .pf-v6-c-button.pf-m-hamburger:is(:hover, :focus-visible) { --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-collapse--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-collapse--ScaleX); } .pf-v6-c-page:where(:has(> .pf-v6-c-page__sidebar.pf-m-collapsed)) > .pf-v6-c-masthead .pf-v6-c-masthead__toggle .pf-v6-c-button.pf-m-hamburger:is(:hover, :focus-visible) { --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-page .pf-v6-c-page__dock.pf-m-expanded .pf-v6-c-masthead__toggle .pf-v6-c-button.pf-m-hamburger { --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-collapse--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-collapse--ScaleX); } @media (min-width: 62rem) { .pf-v6-c-page .pf-v6-c-page__dock .pf-v6-c-masthead__toggle .pf-v6-c-button.pf-m-hamburger, .pf-v6-c-page .pf-v6-c-page__dock.pf-m-expanded .pf-v6-c-masthead__toggle .pf-v6-c-button.pf-m-hamburger { --pf-v6-c-button--hamburger-icon--top--path: var(--pf-v6-c-button--hamburger-icon--top--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__icon--TransitionDelay: var(--pf-v6-c-button--hamburger-icon--TransitionDuration); --pf-v6-c-button--hover__icon--TransitionDelay: var(--pf-v6-c-button--hamburger-icon--TransitionDuration); } .pf-v6-c-page .pf-v6-c-page__dock .pf-v6-c-masthead__toggle .pf-v6-c-button.pf-m-hamburger:is(:hover, :focus-visible) { --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-page .pf-v6-c-page__dock.pf-m-text-expanded .pf-v6-c-masthead__toggle .pf-v6-c-button.pf-m-hamburger:is(:hover, :focus-visible) { --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-collapse--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-collapse--ScaleX); } } @media (min-width: 75rem) { .pf-v6-c-page > .pf-v6-c-masthead { --pf-v6-c-masthead--m-display-inline--GridTemplateColumns: var(--pf-v6-c-masthead--m-display-inline--breakpoint--xl--GridTemplateColumns); } } .pf-v6-c-page > .pf-v6-c-masthead { z-index: var(--pf-v6-c-page--c-masthead--ZIndex); grid-area: header; } .pf-v6-c-page.pf-m-docked > .pf-v6-c-masthead { --pf-v6-c-masthead--m-display-inline--GridTemplateColumns: var(--pf-v6-c-page--m-dock--c-masthead--m-display-inline--GridTemplateColumns); } .pf-v6-c-page__dock { position: fixed; inset-block-start: 0; inset-block-end: 0; inset-inline-start: 0; z-index: var(--pf-v6-c-page__dock--ZIndex); display: flex; visibility: hidden; flex-direction: column; grid-area: dock; width: var(--pf-v6-c-page__dock--Width); transition: translate var(--pf-v6-c-page__dock--TransitionDuration--slide) var(--pf-v6-c-page__dock--TransitionTimingFunction--slide), visibility 0s var(--pf-v6-c-page__dock--TransitionDuration--slide); translate: -100% 0; } :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-page__dock { translate: 100% 0; } .pf-v6-c-page__dock.pf-m-expanded { --pf-v6-c-page__dock--TransitionDuration--slide: var(--pf-v6-c-page__dock--m-expanded--TransitionDuration--slide); visibility: visible; translate: 0; transition: translate var(--pf-v6-c-page__dock--TransitionDuration--slide) var(--pf-v6-c-page__dock--TransitionTimingFunction--slide), visibility 0s 0s; } @media (min-width: 62rem) { .pf-v6-c-page__dock { position: revert; inset: revert; visibility: revert; width: auto; translate: 0; } } .pf-v6-c-page__dock .pf-v6-c-toolbar.pf-m-vertical :is(.pf-v6-c-toolbar__content-section, .pf-v6-c-toolbar__group, .pf-v6-c-toolbar__item) { align-items: stretch; } .pf-v6-c-page__dock.pf-m-text-expanded { width: var(--pf-v6-c-page__dock--Width); } .pf-v6-c-page__dock-main { flex-grow: 1; background-color: var(--pf-v6-c-page__dock-main--BackgroundColor); border-inline-end: var(--pf-v6-c-page__dock-main--BorderInlineEndWidth) solid var(--pf-v6-c-page__dock-main--BorderInlineEndColor); box-shadow: var(--pf-v6-c-page__dock-main--BoxShadow); backdrop-filter: var(--pf-v6-c-page__dock-main--BackdropFilter); } .pf-v6-c-page__dock.pf-m-expanded .pf-v6-c-page__dock-main { border-inline-end: var(--pf-v6-c-page__dock--m-expanded__dock-main--BorderInlineEndWidth) solid var(--pf-v6-c-page__dock--m-expanded__dock-main--BorderInlineEndColor); box-shadow: var(--pf-v6-c-page__dock--m-expanded__dock-main--BoxShadow); } @media (min-width: 62rem) { .pf-v6-c-page__dock-main { --pf-v6-c-page__dock-main--BorderInlineEndWidth: var(--pf-v6-c-page__dock-main--desktop--BorderInlineEndWidth); --pf-v6-c-page__dock-main--BackgroundColor: var(--pf-v6-c-page__dock-main--desktop--BackgroundColor); --pf-v6-c-page__dock-main--BorderInlineEndColor: var(--pf-v6-c-page__dock-main--desktop--BorderInlineEndColor); --pf-v6-c-page__dock-main--BoxShadow: var(--pf-v6-c-page__dock-main--desktop--BoxShadow); --pf-v6-c-page__dock--m-expanded__dock-main--BoxShadow: var(--pf-v6-c-page__dock-main--desktop--BoxShadow); --pf-v6-c-page__dock--m-expanded__dock-main--BorderInlineEndWidth: var(--pf-v6-c-page__dock-main--BorderInlineEndWidth); --pf-v6-c-page__dock--m-expanded__dock-main--BorderInlineEndColor: var(--pf-v6-c-page__dock-main--desktop--BorderInlineEndColor); } } .pf-v6-c-page__sidebar { z-index: var(--pf-v6-c-page__sidebar--ZIndex); display: flex; flex-direction: column; grid-area: sidebar; grid-row-start: 2; grid-column-start: 1; width: var(--pf-v6-c-page__sidebar--Width); padding-block-start: 0; padding-block-end: var(--pf-v6-c-page__sidebar--PaddingBlockEnd); padding-inline-start: var(--pf-v6-c-page__sidebar--PaddingInlineStart); padding-inline-end: var(--pf-v6-c-page__sidebar--PaddingInlineEnd); margin-block-start: var(--pf-v6-c-page__sidebar--MarginBlockStart); margin-inline-end: var(--pf-v6-c-page__sidebar--MarginInlineEnd); overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; background-color: var(--pf-v6-c-page__sidebar--BackgroundColor); border-inline-end: var(--pf-v6-c-page__sidebar--BorderInlineEndWidth) solid var(--pf-v6-c-page__sidebar--BorderInlineEndColor); opacity: var(--pf-v6-c-page__sidebar--Opacity); transition: var(--pf-v6-c-page__sidebar--TransitionProperty) var(--pf-v6-c-page__sidebar--TransitionDuration) var(--pf-v6-c-page__sidebar--TransitionTimingFunction); transform: translateX(var(--pf-v6-c-page__sidebar--TranslateX)) translateZ(var(--pf-v6-c-page__sidebar--TranslateZ)); } :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-page__sidebar { transform: translateX(calc(var(--pf-v6-c-page__sidebar--TranslateX) * var(--pf-v6-global--inverse--multiplier))) translateZ(var(--pf-v6-c-page__sidebar--TranslateZ)); } .pf-v6-c-page__sidebar.pf-m-expanded { --pf-v6-c-page__sidebar--TranslateX: var(--pf-v6-c-page__sidebar--m-expanded--TranslateX); --pf-v6-c-page__sidebar--Opacity: var(--pf-v6-c-page__sidebar--m-expanded--Opacity); box-shadow: var(--pf-v6-c-page__sidebar--BoxShadow); } @media screen and (min-width: 75rem) { .pf-v6-c-page__sidebar.pf-m-expanded { --pf-v6-c-page__sidebar--BoxShadow: var(--pf-v6-c-page__sidebar--BoxShadow); } } .pf-v6-c-page__sidebar.pf-m-collapsed { max-width: 0; overflow: hidden; } :where(.pf-v6-theme-glass) .pf-v6-c-page__sidebar { min-height: 0; padding: 0; overflow: revert; background: transparent; } :where(.pf-v6-theme-glass) .pf-v6-c-page__sidebar.pf-m-expanded { box-shadow: none; } :where(.pf-v6-theme-glass) .pf-v6-c-page__sidebar-main { overflow: auto; } .pf-v6-c-page__sidebar-main { display: flex; flex-grow: 1; flex-direction: column; padding-block-start: var(--pf-v6-c-page__sidebar-main--PaddingBlockStart); padding-block-end: var(--pf-v6-c-page__sidebar-main--PaddingBlockEnd); padding-inline-start: var(--pf-v6-c-page__sidebar-main--PaddingInlineStart); padding-inline-end: var(--pf-v6-c-page__sidebar-main--PaddingInlineEnd); margin-block-start: var(--pf-v6-c-page__sidebar-main--MarginBlockStart); margin-block-end: var(--pf-v6-c-page__sidebar-main--MarginBlockEnd); margin-inline-start: var(--pf-v6-c-page__sidebar-main--MarginInlineStart); margin-inline-end: var(--pf-v6-c-page__sidebar-main--MarginInlineEnd); background-color: var(--pf-v6-c-page__sidebar-main--BackgroundColor); border: var(--pf-v6-c-page__sidebar-main--BorderWidth) solid var(--pf-v6-c-page__sidebar-main--BorderColor); border-radius: var(--pf-v6-c-page__sidebar-main--BorderRadius); box-shadow: var(--pf-v6-c-page__sidebar-main--BoxShadow); backdrop-filter: var(--pf-v6-c-page__sidebar-main--BackdropFilter); } .pf-v6-c-page__sidebar-header { padding-block-start: var(--pf-v6-c-page__sidebar-header--PaddingBlockStart); padding-block-end: var(--pf-v6-c-page__sidebar-header--PaddingBlockEnd); border-block-end: var(--pf-v6-c-page__sidebar-header--BorderBlockEndWidth) solid var(--pf-v6-c-page__sidebar-header--BorderBlockEndColor); } .pf-v6-c-page__sidebar-title { padding-inline-start: var(--pf-v6-c-page__sidebar-title--PaddingInlineStart); font-family: var(--pf-v6-c-page__sidebar-title--FontFamily); font-size: var(--pf-v6-c-page__sidebar-title--FontSize); font-weight: var(--pf-v6-c-page__sidebar-title--FontWeight); line-height: var(--pf-v6-c-page__sidebar-title--LineHeight); } .pf-v6-c-page__sidebar-body { padding-inline-start: var(--pf-v6-c-page__sidebar-body--PaddingInlineStart); padding-inline-end: var(--pf-v6-c-page__sidebar-body--PaddingInlineEnd); } .pf-v6-c-page__sidebar-body:last-child { flex-grow: 1; } .pf-v6-c-page__sidebar-body.pf-m-page-insets { --pf-v6-c-page__sidebar-body--PaddingInlineEnd: var(--pf-v6-c-page__sidebar-body--m-page-insets--PaddingInlineEnd); --pf-v6-c-page__sidebar-body--PaddingInlineStart: var(--pf-v6-c-page__sidebar-body--m-page-insets--PaddingInlineStart); } .pf-v6-c-page__sidebar-body.pf-m-context-selector { --pf-v6-c-page__sidebar-body--PaddingInlineEnd: var(--pf-v6-c-page__sidebar-body--m-context-selector--PaddingInlineEnd); --pf-v6-c-page__sidebar-body--PaddingInlineStart: var(--pf-v6-c-page__sidebar-body--m-context-selector--PaddingInlineStart); } .pf-v6-c-page__sidebar-body.pf-m-inset-none { --pf-v6-c-page__sidebar-body--PaddingInlineEnd: 0; --pf-v6-c-page__sidebar-body--PaddingInlineStart: 0; } .pf-v6-c-page__sidebar-body.pf-m-fill { flex-grow: 1; } .pf-v6-c-page__sidebar-body.pf-m-no-fill { flex-grow: 0; } .pf-v6-c-page__main-subnav.pf-m-limit-width > .pf-v6-c-page__main-body, .pf-v6-c-page__main-breadcrumb.pf-m-limit-width > .pf-v6-c-page__main-body, .pf-v6-c-page__main-tabs.pf-m-limit-width > .pf-v6-c-page__main-body, .pf-v6-c-page__main-section.pf-m-limit-width > .pf-v6-c-page__main-body, .pf-v6-c-page__main-wizard.pf-m-limit-width > .pf-v6-c-page__main-body { max-width: var(--pf-v6-c-page--section--m-limit-width--MaxWidth); } .pf-v6-c-page__main-subnav.pf-m-limit-width.pf-m-align-center, .pf-v6-c-page__main-breadcrumb.pf-m-limit-width.pf-m-align-center, .pf-v6-c-page__main-tabs.pf-m-limit-width.pf-m-align-center, .pf-v6-c-page__main-section.pf-m-limit-width.pf-m-align-center, .pf-v6-c-page__main-wizard.pf-m-limit-width.pf-m-align-center { align-items: center; } .pf-v6-c-page__main-subnav.pf-m-limit-width.pf-m-align-center > .pf-v6-c-page__main-body, .pf-v6-c-page__main-breadcrumb.pf-m-limit-width.pf-m-align-center > .pf-v6-c-page__main-body, .pf-v6-c-page__main-tabs.pf-m-limit-width.pf-m-align-center > .pf-v6-c-page__main-body, .pf-v6-c-page__main-section.pf-m-limit-width.pf-m-align-center > .pf-v6-c-page__main-body, .pf-v6-c-page__main-wizard.pf-m-limit-width.pf-m-align-center > .pf-v6-c-page__main-body { width: 100%; } .pf-v6-c-page__main-breadcrumb, .pf-v6-c-page__main-tabs, .pf-v6-c-page__main-section, .pf-v6-c-page__main-wizard, .pf-v6-c-page__main-group, .pf-v6-c-page__main-subnav { display: flex; flex-shrink: 0; flex-direction: column; } .pf-v6-c-page__main-breadcrumb.pf-m-overflow-scroll, .pf-v6-c-page__main-tabs.pf-m-overflow-scroll, .pf-v6-c-page__main-section.pf-m-overflow-scroll, .pf-v6-c-page__main-wizard.pf-m-overflow-scroll, .pf-v6-c-page__main-group.pf-m-overflow-scroll, .pf-v6-c-page__main-subnav.pf-m-overflow-scroll { position: relative; flex-shrink: 1; overflow: auto; } .pf-v6-c-page__main-breadcrumb.pf-m-shadow-bottom, .pf-v6-c-page__main-tabs.pf-m-shadow-bottom, .pf-v6-c-page__main-section.pf-m-shadow-bottom, .pf-v6-c-page__main-wizard.pf-m-shadow-bottom, .pf-v6-c-page__main-group.pf-m-shadow-bottom, .pf-v6-c-page__main-subnav.pf-m-shadow-bottom { z-index: var(--pf-v6-c-page--section--m-shadow-bottom--ZIndex); border-block-end: var(--pf-v6-c-page--section--m-shadow-bottom--BorderBlockEndWidth) solid var(--pf-v6-c-page--section--m-shadow-bottom--BorderBlockEndColor); box-shadow: var(--pf-v6-c-page--section--m-shadow-bottom--BoxShadow); } .pf-v6-c-page__main-breadcrumb.pf-m-shadow-top, .pf-v6-c-page__main-tabs.pf-m-shadow-top, .pf-v6-c-page__main-section.pf-m-shadow-top, .pf-v6-c-page__main-wizard.pf-m-shadow-top, .pf-v6-c-page__main-group.pf-m-shadow-top, .pf-v6-c-page__main-subnav.pf-m-shadow-top { z-index: var(--pf-v6-c-page--section--m-shadow-top--ZIndex); border-block-start: var(--pf-v6-c-page--section--m-shadow-top--BorderBlockStartWidth) solid var(--pf-v6-c-page--section--m-shadow-top--BorderBlockStartColor); box-shadow: var(--pf-v6-c-page--section--m-shadow-top--BoxShadow); } .pf-v6-c-page__main-breadcrumb.pf-m-sticky-top, .pf-v6-c-page__main-tabs.pf-m-sticky-top, .pf-v6-c-page__main-section.pf-m-sticky-top, .pf-v6-c-page__main-wizard.pf-m-sticky-top, .pf-v6-c-page__main-group.pf-m-sticky-top, .pf-v6-c-page__main-subnav.pf-m-sticky-top { position: sticky; inset-block-start: 0; z-index: var(--pf-v6-c-page--section--m-sticky-top--ZIndex); background-color: var(--pf-v6-c-page--section--m-sticky-top--BackgroundColor); border-block-end: var(--pf-v6-c-page--section--m-sticky-top--BorderBlockEndWidth) solid var(--pf-v6-c-page--section--m-sticky-top--BorderBlockEndColor); box-shadow: var(--pf-v6-c-page--section--m-sticky-top--BoxShadow); } .pf-v6-c-page__main-breadcrumb.pf-m-sticky-bottom, .pf-v6-c-page__main-tabs.pf-m-sticky-bottom, .pf-v6-c-page__main-section.pf-m-sticky-bottom, .pf-v6-c-page__main-wizard.pf-m-sticky-bottom, .pf-v6-c-page__main-group.pf-m-sticky-bottom, .pf-v6-c-page__main-subnav.pf-m-sticky-bottom { position: sticky; inset-block-end: 0; z-index: var(--pf-v6-c-page--section--m-sticky-bottom--ZIndex); background-color: var(--pf-v6-c-page--section--m-sticky-bottom--BackgroundColor); border-block-start: var(--pf-v6-c-page--section--m-sticky-bottom--BorderBlockStartWidth) solid var(--pf-v6-c-page--section--m-sticky-bottom--BorderBlockStartColor); box-shadow: var(--pf-v6-c-page--section--m-sticky-bottom--BoxShadow); } @media (min-height: 0) { .pf-v6-c-page__main-breadcrumb.pf-m-sticky-top-on-sm-height, .pf-v6-c-page__main-tabs.pf-m-sticky-top-on-sm-height, .pf-v6-c-page__main-section.pf-m-sticky-top-on-sm-height, .pf-v6-c-page__main-wizard.pf-m-sticky-top-on-sm-height, .pf-v6-c-page__main-group.pf-m-sticky-top-on-sm-height, .pf-v6-c-page__main-subnav.pf-m-sticky-top-on-sm-height { position: sticky; inset-block-start: 0; z-index: var(--pf-v6-c-page--section--m-sticky-top--ZIndex); background-color: var(--pf-v6-c-page--section--m-sticky-top--BackgroundColor); border-block-end: var(--pf-v6-c-page--section--m-sticky-top--BorderBlockEndWidth) solid var(--pf-v6-c-page--section--m-sticky-top--BorderBlockEndColor); box-shadow: var(--pf-v6-c-page--section--m-sticky-top--BoxShadow); } .pf-v6-c-page__main-breadcrumb.pf-m-sticky-bottom-on-sm-height, .pf-v6-c-page__main-tabs.pf-m-sticky-bottom-on-sm-height, .pf-v6-c-page__main-section.pf-m-sticky-bottom-on-sm-height, .pf-v6-c-page__main-wizard.pf-m-sticky-bottom-on-sm-height, .pf-v6-c-page__main-group.pf-m-sticky-bottom-on-sm-height, .pf-v6-c-page__main-subnav.pf-m-sticky-bottom-on-sm-height { position: sticky; inset-block-end: 0; z-index: var(--pf-v6-c-page--section--m-sticky-bottom--ZIndex); background-color: var(--pf-v6-c-page--section--m-sticky-bottom--BackgroundColor); border-block-start: var(--pf-v6-c-page--section--m-sticky-bottom--BorderBlockStartWidth) solid var(--pf-v6-c-page--section--m-sticky-bottom--BorderBlockStartColor); box-shadow: var(--pf-v6-c-page--section--m-sticky-bottom--BoxShadow); } } @media (min-height: 40rem) { .pf-v6-c-page__main-breadcrumb.pf-m-sticky-top-on-md-height, .pf-v6-c-page__main-tabs.pf-m-sticky-top-on-md-height, .pf-v6-c-page__main-section.pf-m-sticky-top-on-md-height, .pf-v6-c-page__main-wizard.pf-m-sticky-top-on-md-height, .pf-v6-c-page__main-group.pf-m-sticky-top-on-md-height, .pf-v6-c-page__main-subnav.pf-m-sticky-top-on-md-height { position: sticky; inset-block-start: 0; z-index: var(--pf-v6-c-page--section--m-sticky-top--ZIndex); background-color: var(--pf-v6-c-page--section--m-sticky-top--BackgroundColor); border-block-end: var(--pf-v6-c-page--section--m-sticky-top--BorderBlockEndWidth) solid var(--pf-v6-c-page--section--m-sticky-top--BorderBlockEndColor); box-shadow: var(--pf-v6-c-page--section--m-sticky-top--BoxShadow); } .pf-v6-c-page__main-breadcrumb.pf-m-sticky-bottom-on-md-height, .pf-v6-c-page__main-tabs.pf-m-sticky-bottom-on-md-height, .pf-v6-c-page__main-section.pf-m-sticky-bottom-on-md-height, .pf-v6-c-page__main-wizard.pf-m-sticky-bottom-on-md-height, .pf-v6-c-page__main-group.pf-m-sticky-bottom-on-md-height, .pf-v6-c-page__main-subnav.pf-m-sticky-bottom-on-md-height { position: sticky; inset-block-end: 0; z-index: var(--pf-v6-c-page--section--m-sticky-bottom--ZIndex); background-color: var(--pf-v6-c-page--section--m-sticky-bottom--BackgroundColor); border-block-start: var(--pf-v6-c-page--section--m-sticky-bottom--BorderBlockStartWidth) solid var(--pf-v6-c-page--section--m-sticky-bottom--BorderBlockStartColor); box-shadow: var(--pf-v6-c-page--section--m-sticky-bottom--BoxShadow); } } @media (min-height: 48rem) { .pf-v6-c-page__main-breadcrumb.pf-m-sticky-top-on-lg-height, .pf-v6-c-page__main-tabs.pf-m-sticky-top-on-lg-height, .pf-v6-c-page__main-section.pf-m-sticky-top-on-lg-height, .pf-v6-c-page__main-wizard.pf-m-sticky-top-on-lg-height, .pf-v6-c-page__main-group.pf-m-sticky-top-on-lg-height, .pf-v6-c-page__main-subnav.pf-m-sticky-top-on-lg-height { position: sticky; inset-block-start: 0; z-index: var(--pf-v6-c-page--section--m-sticky-top--ZIndex); background-color: var(--pf-v6-c-page--section--m-sticky-top--BackgroundColor); border-block-end: var(--pf-v6-c-page--section--m-sticky-top--BorderBlockEndWidth) solid var(--pf-v6-c-page--section--m-sticky-top--BorderBlockEndColor); box-shadow: var(--pf-v6-c-page--section--m-sticky-top--BoxShadow); } .pf-v6-c-page__main-breadcrumb.pf-m-sticky-bottom-on-lg-height, .pf-v6-c-page__main-tabs.pf-m-sticky-bottom-on-lg-height, .pf-v6-c-page__main-section.pf-m-sticky-bottom-on-lg-height, .pf-v6-c-page__main-wizard.pf-m-sticky-bottom-on-lg-height, .pf-v6-c-page__main-group.pf-m-sticky-bottom-on-lg-height, .pf-v6-c-page__main-subnav.pf-m-sticky-bottom-on-lg-height { position: sticky; inset-block-end: 0; z-index: var(--pf-v6-c-page--section--m-sticky-bottom--ZIndex); background-color: var(--pf-v6-c-page--section--m-sticky-bottom--BackgroundColor); border-block-start: var(--pf-v6-c-page--section--m-sticky-bottom--BorderBlockStartWidth) solid var(--pf-v6-c-page--section--m-sticky-bottom--BorderBlockStartColor); box-shadow: var(--pf-v6-c-page--section--m-sticky-bottom--BoxShadow); } } @media (min-height: 60rem) { .pf-v6-c-page__main-breadcrumb.pf-m-sticky-top-on-xl-height, .pf-v6-c-page__main-tabs.pf-m-sticky-top-on-xl-height, .pf-v6-c-page__main-section.pf-m-sticky-top-on-xl-height, .pf-v6-c-page__main-wizard.pf-m-sticky-top-on-xl-height, .pf-v6-c-page__main-group.pf-m-sticky-top-on-xl-height, .pf-v6-c-page__main-subnav.pf-m-sticky-top-on-xl-height { position: sticky; inset-block-start: 0; z-index: var(--pf-v6-c-page--section--m-sticky-top--ZIndex); background-color: var(--pf-v6-c-page--section--m-sticky-top--BackgroundColor); border-block-end: var(--pf-v6-c-page--section--m-sticky-top--BorderBlockEndWidth) solid var(--pf-v6-c-page--section--m-sticky-top--BorderBlockEndColor); box-shadow: var(--pf-v6-c-page--section--m-sticky-top--BoxShadow); } .pf-v6-c-page__main-breadcrumb.pf-m-sticky-bottom-on-xl-height, .pf-v6-c-page__main-tabs.pf-m-sticky-bottom-on-xl-height, .pf-v6-c-page__main-section.pf-m-sticky-bottom-on-xl-height, .pf-v6-c-page__main-wizard.pf-m-sticky-bottom-on-xl-height, .pf-v6-c-page__main-group.pf-m-sticky-bottom-on-xl-height, .pf-v6-c-page__main-subnav.pf-m-sticky-bottom-on-xl-height { position: sticky; inset-block-end: 0; z-index: var(--pf-v6-c-page--section--m-sticky-bottom--ZIndex); background-color: var(--pf-v6-c-page--section--m-sticky-bottom--BackgroundColor); border-block-start: var(--pf-v6-c-page--section--m-sticky-bottom--BorderBlockStartWidth) solid var(--pf-v6-c-page--section--m-sticky-bottom--BorderBlockStartColor); box-shadow: var(--pf-v6-c-page--section--m-sticky-bottom--BoxShadow); } } @media (min-height: 80rem) { .pf-v6-c-page__main-breadcrumb.pf-m-sticky-top-on-2xl-height, .pf-v6-c-page__main-tabs.pf-m-sticky-top-on-2xl-height, .pf-v6-c-page__main-section.pf-m-sticky-top-on-2xl-height, .pf-v6-c-page__main-wizard.pf-m-sticky-top-on-2xl-height, .pf-v6-c-page__main-group.pf-m-sticky-top-on-2xl-height, .pf-v6-c-page__main-subnav.pf-m-sticky-top-on-2xl-height { position: sticky; inset-block-start: 0; z-index: var(--pf-v6-c-page--section--m-sticky-top--ZIndex); background-color: var(--pf-v6-c-page--section--m-sticky-top--BackgroundColor); border-block-end: var(--pf-v6-c-page--section--m-sticky-top--BorderBlockEndWidth) solid var(--pf-v6-c-page--section--m-sticky-top--BorderBlockEndColor); box-shadow: var(--pf-v6-c-page--section--m-sticky-top--BoxShadow); } .pf-v6-c-page__main-breadcrumb.pf-m-sticky-bottom-on-2xl-height, .pf-v6-c-page__main-tabs.pf-m-sticky-bottom-on-2xl-height, .pf-v6-c-page__main-section.pf-m-sticky-bottom-on-2xl-height, .pf-v6-c-page__main-wizard.pf-m-sticky-bottom-on-2xl-height, .pf-v6-c-page__main-group.pf-m-sticky-bottom-on-2xl-height, .pf-v6-c-page__main-subnav.pf-m-sticky-bottom-on-2xl-height { position: sticky; inset-block-end: 0; z-index: var(--pf-v6-c-page--section--m-sticky-bottom--ZIndex); background-color: var(--pf-v6-c-page--section--m-sticky-bottom--BackgroundColor); border-block-start: var(--pf-v6-c-page--section--m-sticky-bottom--BorderBlockStartWidth) solid var(--pf-v6-c-page--section--m-sticky-bottom--BorderBlockStartColor); box-shadow: var(--pf-v6-c-page--section--m-sticky-bottom--BoxShadow); } } .pf-v6-c-page__main-breadcrumb.pf-m-sticky-top-base, .pf-v6-c-page__main-tabs.pf-m-sticky-top-base, .pf-v6-c-page__main-section.pf-m-sticky-top-base, .pf-v6-c-page__main-wizard.pf-m-sticky-top-base, .pf-v6-c-page__main-group.pf-m-sticky-top-base, .pf-v6-c-page__main-subnav.pf-m-sticky-top-base { position: sticky; inset-block-start: 0; z-index: var(--pf-v6-c-page--section--m-sticky-top--ZIndex); box-shadow: none; } .pf-v6-c-page__main-breadcrumb.pf-m-sticky-top-base::before, .pf-v6-c-page__main-tabs.pf-m-sticky-top-base::before, .pf-v6-c-page__main-section.pf-m-sticky-top-base::before, .pf-v6-c-page__main-wizard.pf-m-sticky-top-base::before, .pf-v6-c-page__main-group.pf-m-sticky-top-base::before, .pf-v6-c-page__main-subnav.pf-m-sticky-top-base::before { position: absolute; inset: 0; z-index: -1; content: ""; background-color: var(--pf-v6-c-page--section--m-sticky-top--BackgroundColor); box-shadow: var(--pf-v6-c-page--section--m-sticky-top--BoxShadow); opacity: 0; transition-timing-function: var(--pf-v6-c-page--section--m-sticky-top--TransitionTimingFunction); transition-duration: var(--pf-v6-c-page--section--m-sticky-top--TransitionDuration); transition-property: opacity; } .pf-v6-c-page__main-breadcrumb.pf-m-sticky-top-base, .pf-v6-c-page__main-group.pf-m-sticky-top-base .pf-v6-c-page__main-breadcrumb:last-child, .pf-v6-c-page__main-tabs.pf-m-sticky-top-base, .pf-v6-c-page__main-group.pf-m-sticky-top-base .pf-v6-c-page__main-tabs:last-child, .pf-v6-c-page__main-section.pf-m-sticky-top-base, .pf-v6-c-page__main-group.pf-m-sticky-top-base .pf-v6-c-page__main-section:last-child, .pf-v6-c-page__main-wizard.pf-m-sticky-top-base, .pf-v6-c-page__main-group.pf-m-sticky-top-base .pf-v6-c-page__main-wizard:last-child, .pf-v6-c-page__main-group.pf-m-sticky-top-base, .pf-v6-c-page__main-group.pf-m-sticky-top-base .pf-v6-c-page__main-group:last-child, .pf-v6-c-page__main-subnav.pf-m-sticky-top-base, .pf-v6-c-page__main-group.pf-m-sticky-top-base .pf-v6-c-page__main-subnav:last-child { --pf-v6-c-page__main-breadcrumb--PaddingBlockEnd: var(--pf-v6-c-page__main-breadcrumb--m-sticky-top--PaddingBlockEnd); } .pf-v6-c-page__main-breadcrumb.pf-m-sticky-top-stuck::before, .pf-v6-c-page__main-tabs.pf-m-sticky-top-stuck::before, .pf-v6-c-page__main-section.pf-m-sticky-top-stuck::before, .pf-v6-c-page__main-wizard.pf-m-sticky-top-stuck::before, .pf-v6-c-page__main-group.pf-m-sticky-top-stuck::before, .pf-v6-c-page__main-subnav.pf-m-sticky-top-stuck::before { opacity: 1; } .pf-v6-c-page__main-breadcrumb.pf-m-sticky-bottom-base, .pf-v6-c-page__main-tabs.pf-m-sticky-bottom-base, .pf-v6-c-page__main-section.pf-m-sticky-bottom-base, .pf-v6-c-page__main-wizard.pf-m-sticky-bottom-base, .pf-v6-c-page__main-group.pf-m-sticky-bottom-base, .pf-v6-c-page__main-subnav.pf-m-sticky-bottom-base { position: sticky; inset-block-end: 0; z-index: var(--pf-v6-c-page--section--m-sticky-bottom--ZIndex); box-shadow: none; } .pf-v6-c-page__main-breadcrumb.pf-m-sticky-bottom-base::before, .pf-v6-c-page__main-tabs.pf-m-sticky-bottom-base::before, .pf-v6-c-page__main-section.pf-m-sticky-bottom-base::before, .pf-v6-c-page__main-wizard.pf-m-sticky-bottom-base::before, .pf-v6-c-page__main-group.pf-m-sticky-bottom-base::before, .pf-v6-c-page__main-subnav.pf-m-sticky-bottom-base::before { position: absolute; inset: 0; z-index: -1; content: ""; background-color: var(--pf-v6-c-page--section--m-sticky-bottom--BackgroundColor); box-shadow: var(--pf-v6-c-page--section--m-sticky-bottom--BoxShadow); opacity: 0; transition-timing-function: var(--pf-v6-c-page--section--m-sticky-bottom--TransitionTimingFunction); transition-duration: var(--pf-v6-c-page--section--m-sticky-bottom--TransitionDuration); transition-property: opacity; } .pf-v6-c-page__main-breadcrumb.pf-m-sticky-bottom-stuck::before, .pf-v6-c-page__main-tabs.pf-m-sticky-bottom-stuck::before, .pf-v6-c-page__main-section.pf-m-sticky-bottom-stuck::before, .pf-v6-c-page__main-wizard.pf-m-sticky-bottom-stuck::before, .pf-v6-c-page__main-group.pf-m-sticky-bottom-stuck::before, .pf-v6-c-page__main-subnav.pf-m-sticky-bottom-stuck::before { opacity: 1; } .pf-v6-c-page__main-container { display: flex; flex-direction: column; align-self: var(--pf-v6-c-page__main-container--AlignSelf); max-height: var(--pf-v6-c-page__main-container--MaxHeight); margin-block-start: var(--pf-v6-c-page__main-container--MarginBlockStart, 0); margin-inline-start: var(--pf-v6-c-page__main-container--MarginInlineStart); margin-inline-end: var(--pf-v6-c-page__main-container--MarginInlineEnd); background: var(--pf-v6-c-page__main-container--BackgroundColor); border: solid var(--pf-v6-c-page__main-container--BorderColor); border-block-start-width: var(--pf-v6-c-page__main-container--BorderBlockStartWidth); border-block-end-width: var(--pf-v6-c-page__main-container--BorderBlockEndWidth); border-inline-start-width: var(--pf-v6-c-page__main-container--BorderInlineStartWidth); border-inline-end-width: var(--pf-v6-c-page__main-container--BorderInlineEndWidth); border-radius: var(--pf-v6-c-page__main-container--BorderRadius); box-shadow: var(--pf-v6-c-page__main-container--BoxShadow); backdrop-filter: var(--pf-v6-c-page__main-container--BackdropFilter); } @media screen and (max-width: calc(48rem - 1px)) { .pf-v6-c-page__main-container { --pf-v6-c-page__main-container--AlignSelf: var(--pf-v6-c-page__main-container--xs--AlignSelf); --pf-v6-c-page__main-container--MaxHeight: var(--pf-v6-c-page__main-container--xs--MaxHeight); --pf-v6-c-page__main-container--BorderRadius: var(--pf-v6-c-page__main-container--xs--BorderRadius); } } .pf-v6-c-page__main-container, .pf-v6-c-page__drawer { z-index: var(--pf-v6-c-page__main-container--ZIndex); grid-area: var(--pf-v6-c-page__main-container--GridArea); overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; } @media screen and (min-width: 75rem) { .pf-v6-c-page.pf-m-no-sidebar, .pf-v6-c-masthead + .pf-v6-c-page__main-container, .pf-v6-c-page__sidebar.pf-m-collapsed + .pf-v6-c-page__main-container, .pf-v6-c-masthead + .pf-v6-c-page__drawer, .pf-v6-c-page__sidebar.pf-m-collapsed + .pf-v6-c-page__drawer { --pf-v6-c-page__main-container--GridArea: var(--pf-v6-c-page--masthead--main-container--GridArea); } .pf-v6-c-page__sidebar:not(.pf-m-collapsed) + .pf-v6-c-page__main-container, .pf-v6-c-page__sidebar:not(.pf-m-collapsed) + .pf-v6-c-page__drawer { --pf-v6-c-page__main-container--MarginInlineStart: 0; } } .pf-v6-c-page__main-container.pf-m-fill, .pf-v6-c-page__main-container:has(.pf-v6-c-page__main-wizard), .pf-v6-c-page__drawer.pf-m-fill, .pf-v6-c-page__drawer:has(.pf-v6-c-page__main-wizard) { align-self: stretch; } .pf-v6-c-page__main-container:focus, .pf-v6-c-page__drawer:focus { outline: 0; } :where(:root:not(.pf-v6-theme-glass)) .pf-v6-c-page__main-subnav.pf-m-plain, :where(:root.pf-v6-theme-glass) .pf-v6-c-page__main-subnav:not(.pf-m-no-plain-on-glass), :where(:root:not(.pf-v6-theme-glass)) .pf-v6-c-page__main-breadcrumb.pf-m-plain, :where(:root.pf-v6-theme-glass) .pf-v6-c-page__main-breadcrumb:not(.pf-m-no-plain-on-glass), :where(:root:not(.pf-v6-theme-glass)) .pf-v6-c-page__main-tabs.pf-m-plain, :where(:root.pf-v6-theme-glass) .pf-v6-c-page__main-tabs:not(.pf-m-no-plain-on-glass), :where(:root:not(.pf-v6-theme-glass)) .pf-v6-c-page__main-section.pf-m-plain, :where(:root.pf-v6-theme-glass) .pf-v6-c-page__main-section:not(.pf-m-no-plain-on-glass), :where(:root:not(.pf-v6-theme-glass)) .pf-v6-c-page__main-wizard.pf-m-plain, :where(:root.pf-v6-theme-glass) .pf-v6-c-page__main-wizard:not(.pf-m-no-plain-on-glass), :where(:root:not(.pf-v6-theme-glass)) .pf-v6-c-page__main-group.pf-m-plain, :where(:root.pf-v6-theme-glass) .pf-v6-c-page__main-group:not(.pf-m-no-plain-on-glass) { --pf-v6-c-page__main-section--BackgroundColor: transparent; --pf-v6-c-page__main-subnav--BackgroundColor: transparent; --pf-v6-c-page__main-breadcrumb--BackgroundColor: transparent; --pf-v6-c-page__main-tabs--BackgroundColor: transparent; --pf-v6-c-page__main-wizard--BackgroundColor: transparent; --pf-v6-c-page__main-group--BackgroundColor: transparent; } .pf-v6-c-page__main, .pf-v6-c-page__main-drawer, .pf-v6-c-page__main-group { display: flex; flex-grow: 1; flex-direction: column; } .pf-v6-c-page__main { overflow: auto; } .pf-v6-c-page__main-subnav { padding-block-start: var(--pf-v6-c-page__main-subnav--PaddingBlockStart); padding-block-end: var(--pf-v6-c-page__main-subnav--PaddingBlockEnd); padding-inline-start: var(--pf-v6-c-page__main-subnav--PaddingInlineStart); padding-inline-end: var(--pf-v6-c-page__main-subnav--PaddingInlineEnd); background-color: var(--pf-v6-c-page__main-subnav--BackgroundColor); } .pf-v6-c-page__main-subnav.pf-m-sticky-top, .pf-v6-c-page__main-subnav.pf-m-sticky-top-base { padding-block-end: var(--pf-v6-c-page__main-subnav--m-sticky-top--PaddingBlockEnd); } .pf-v6-c-page__main-breadcrumb { padding-block-start: var(--pf-v6-c-page__main-breadcrumb--PaddingBlockStart); padding-block-end: var(--pf-v6-c-page__main-breadcrumb--PaddingBlockEnd); padding-inline-start: var(--pf-v6-c-page__main-breadcrumb--PaddingInlineStart); padding-inline-end: var(--pf-v6-c-page__main-breadcrumb--PaddingInlineEnd); background-color: var(--pf-v6-c-page__main-breadcrumb--BackgroundColor); } .pf-v6-c-page__main-breadcrumb + .pf-v6-c-page__main-section { --pf-v6-c-page__main-section--PaddingBlockStart: var(--pf-v6-c-page__main-breadcrumb--main-section--PaddingBlockStart); } .pf-v6-c-page__main-breadcrumb.pf-m-sticky-top, .pf-v6-c-page__main-group.pf-m-sticky-top .pf-v6-c-page__main-breadcrumb:last-child { --pf-v6-c-page__main-breadcrumb--PaddingBlockEnd: var(--pf-v6-c-page__main-breadcrumb--m-sticky-top--PaddingBlockEnd); } @media (min-height: 0) { .pf-v6-c-page__main-breadcrumb.pf-m-sticky-top-on-sm-height, .pf-v6-c-page__main-group.pf-m-sticky-top-on-sm-height .pf-v6-c-page__main-breadcrumb:last-child { --pf-v6-c-page__main-breadcrumb--PaddingBlockEnd: var(--pf-v6-c-page__main-breadcrumb--m-sticky-top--PaddingBlockEnd); } } @media (min-height: 40rem) { .pf-v6-c-page__main-breadcrumb.pf-m-sticky-top-on-md-height, .pf-v6-c-page__main-group.pf-m-sticky-top-on-md-height .pf-v6-c-page__main-breadcrumb:last-child { --pf-v6-c-page__main-breadcrumb--PaddingBlockEnd: var(--pf-v6-c-page__main-breadcrumb--m-sticky-top--PaddingBlockEnd); } } @media (min-height: 48rem) { .pf-v6-c-page__main-breadcrumb.pf-m-sticky-top-on-lg-height, .pf-v6-c-page__main-group.pf-m-sticky-top-on-lg-height .pf-v6-c-page__main-breadcrumb:last-child { --pf-v6-c-page__main-breadcrumb--PaddingBlockEnd: var(--pf-v6-c-page__main-breadcrumb--m-sticky-top--PaddingBlockEnd); } } @media (min-height: 60rem) { .pf-v6-c-page__main-breadcrumb.pf-m-sticky-top-on-xl-height, .pf-v6-c-page__main-group.pf-m-sticky-top-on-xl-height .pf-v6-c-page__main-breadcrumb:last-child { --pf-v6-c-page__main-breadcrumb--PaddingBlockEnd: var(--pf-v6-c-page__main-breadcrumb--m-sticky-top--PaddingBlockEnd); } } @media (min-height: 80rem) { .pf-v6-c-page__main-breadcrumb.pf-m-sticky-top-on-2xl-height, .pf-v6-c-page__main-group.pf-m-sticky-top-on-2xl-height .pf-v6-c-page__main-breadcrumb:last-child { --pf-v6-c-page__main-breadcrumb--PaddingBlockEnd: var(--pf-v6-c-page__main-breadcrumb--m-sticky-top--PaddingBlockEnd); } } .pf-v6-c-page__main-tabs { padding-block-start: var(--pf-v6-c-page__main-tabs--PaddingBlockStart); padding-block-end: var(--pf-v6-c-page__main-tabs--PaddingBlockEnd); padding-inline-start: var(--pf-v6-c-page__main-tabs--PaddingInlineStart); padding-inline-end: var(--pf-v6-c-page__main-tabs--PaddingInlineEnd); background-color: var(--pf-v6-c-page__main-tabs--BackgroundColor); } .pf-v6-c-page__main-breadcrumb + .pf-v6-c-page__main-tabs { --pf-v6-c-page__main-tabs--PaddingBlockStart: var(--pf-v6-c-page__main-breadcrumb--page__main-tabs--PaddingBlockStart); } .pf-v6-c-page__main-section.pf-m-fill, .pf-v6-c-page__main-group.pf-m-fill, .pf-v6-c-page__main-wizard.pf-m-fill { flex-grow: 1; } .pf-v6-c-page__main-section.pf-m-no-fill, .pf-v6-c-page__main-group.pf-m-no-fill, .pf-v6-c-page__main-wizard.pf-m-no-fill { flex-grow: 0; } .pf-v6-c-page__main-section { gap: var(--pf-v6-c-page__main-section--RowGap); padding-block-start: var(--pf-v6-c-page__main-section--PaddingBlockStart); padding-block-end: var(--pf-v6-c-page__main-section--PaddingBlockEnd); padding-inline-start: calc(var(--pf-v6-c-page__main-section--PaddingInlineStart) - var(--pf-v6-c-page__main-container--BorderInlineStartWidth)); padding-inline-end: calc(var(--pf-v6-c-page__main-section--PaddingInlineEnd) - var(--pf-v6-c-page__main-container--BorderInlineEndWidth)); background-color: var(--pf-v6-c-page__main-section--BackgroundColor); } .pf-v6-c-page__main-section.pf-m-secondary { --pf-v6-c-page__main-section--BackgroundColor: var(--pf-v6-c-page__main-section--m-secondary--BackgroundColor); border-block-start: var(--pf-v6-c-page__main-section--m-secondary--BorderBlockStartWidth) solid var(--pf-v6-c-page__main-section--m-secondary--BorderBlockStartColor); border-block-end: var(--pf-v6-c-page__main-section--m-secondary--BorderBlockEndWidth) solid var(--pf-v6-c-page__main-section--m-secondary--BorderBlockEndColor); } .pf-v6-c-page__main-section.pf-m-padding { padding-block-start: var(--pf-v6-c-page__main-section--PaddingBlockStart); padding-block-end: var(--pf-v6-c-page__main-section--PaddingBlockEnd); padding-inline-start: calc(var(--pf-v6-c-page__main-section--PaddingInlineStart) - var(--pf-v6-c-page__main-container--BorderInlineStartWidth)); padding-inline-end: calc(var(--pf-v6-c-page__main-section--PaddingInlineEnd) - var(--pf-v6-c-page__main-container--BorderInlineEndWidth)); } .pf-v6-c-page__main-section.pf-m-no-padding { padding: 0; } @media (min-width: 36rem) { .pf-v6-c-page__main-section.pf-m-padding-on-sm { padding-block-start: var(--pf-v6-c-page__main-section--PaddingBlockStart); padding-block-end: var(--pf-v6-c-page__main-section--PaddingBlockEnd); padding-inline-start: calc(var(--pf-v6-c-page__main-section--PaddingInlineStart) - var(--pf-v6-c-page__main-container--BorderInlineStartWidth)); padding-inline-end: calc(var(--pf-v6-c-page__main-section--PaddingInlineEnd) - var(--pf-v6-c-page__main-container--BorderInlineEndWidth)); } .pf-v6-c-page__main-section.pf-m-no-padding-on-sm { padding: 0; } } @media (min-width: 48rem) { .pf-v6-c-page__main-section.pf-m-padding-on-md { padding-block-start: var(--pf-v6-c-page__main-section--PaddingBlockStart); padding-block-end: var(--pf-v6-c-page__main-section--PaddingBlockEnd); padding-inline-start: calc(var(--pf-v6-c-page__main-section--PaddingInlineStart) - var(--pf-v6-c-page__main-container--BorderInlineStartWidth)); padding-inline-end: calc(var(--pf-v6-c-page__main-section--PaddingInlineEnd) - var(--pf-v6-c-page__main-container--BorderInlineEndWidth)); } .pf-v6-c-page__main-section.pf-m-no-padding-on-md { padding: 0; } } @media (min-width: 62rem) { .pf-v6-c-page__main-section.pf-m-padding-on-lg { padding-block-start: var(--pf-v6-c-page__main-section--PaddingBlockStart); padding-block-end: var(--pf-v6-c-page__main-section--PaddingBlockEnd); padding-inline-start: calc(var(--pf-v6-c-page__main-section--PaddingInlineStart) - var(--pf-v6-c-page__main-container--BorderInlineStartWidth)); padding-inline-end: calc(var(--pf-v6-c-page__main-section--PaddingInlineEnd) - var(--pf-v6-c-page__main-container--BorderInlineEndWidth)); } .pf-v6-c-page__main-section.pf-m-no-padding-on-lg { padding: 0; } } @media (min-width: 75rem) { .pf-v6-c-page__main-section.pf-m-padding-on-xl { padding-block-start: var(--pf-v6-c-page__main-section--PaddingBlockStart); padding-block-end: var(--pf-v6-c-page__main-section--PaddingBlockEnd); padding-inline-start: calc(var(--pf-v6-c-page__main-section--PaddingInlineStart) - var(--pf-v6-c-page__main-container--BorderInlineStartWidth)); padding-inline-end: calc(var(--pf-v6-c-page__main-section--PaddingInlineEnd) - var(--pf-v6-c-page__main-container--BorderInlineEndWidth)); } .pf-v6-c-page__main-section.pf-m-no-padding-on-xl { padding: 0; } } @media (min-width: 90.625rem) { .pf-v6-c-page__main-section.pf-m-padding-on-2xl { padding-block-start: var(--pf-v6-c-page__main-section--PaddingBlockStart); padding-block-end: var(--pf-v6-c-page__main-section--PaddingBlockEnd); padding-inline-start: calc(var(--pf-v6-c-page__main-section--PaddingInlineStart) - var(--pf-v6-c-page__main-container--BorderInlineStartWidth)); padding-inline-end: calc(var(--pf-v6-c-page__main-section--PaddingInlineEnd) - var(--pf-v6-c-page__main-container--BorderInlineEndWidth)); } .pf-v6-c-page__main-section.pf-m-no-padding-on-2xl { padding: 0; } } .pf-v6-c-page__main-wizard { flex: 1 1; min-height: 0; background-color: var(--pf-v6-c-page__main-wizard--BackgroundColor); border-block-start: var(--pf-v6-c-page__main-wizard--BorderBlockStartWidth) solid var(--pf-v6-c-page__main-wizard--BorderBlockStartColor); } .pf-v6-c-page__main-wizard:first-child { --pf-v6-c-page__main-wizard--BorderBlockStartWidth: 0; } .pf-v6-c-page__main-wizard .pf-v6-c-page__main-body { min-height: 0; } .pf-v6-c-page__main-group { flex-shrink: 0; } .pf-v6-c-page__drawer > .pf-v6-c-drawer > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel { border-block-start: var(--pf-v6-c-page__drawer--c-drawer--BorderBlockStartWidth) solid var(--pf-v6-c-page__drawer--c-drawer--BorderBlockStartColor); } .pf-v6-c-page__drawer .pf-v6-c-page__main-container { align-self: revert; } .pf-v6-c-page__drawer .pf-v6-c-page__main-container.pf-m-fill { flex-grow: 1; } /* PatternFly component: Masthead/masthead */ .pf-v6-c-masthead { --pf-v6-c-masthead--RowGap: var(--pf-t--global--spacer--sm); --pf-v6-c-masthead--ColumnGap: var(--pf-t--global--spacer--gutter--default); --pf-v6-c-masthead--BorderWidth: var(--pf-t--global--border--width--divider--default); --pf-v6-c-masthead--PaddingBlock: var(--pf-t--global--spacer--md); --pf-v6-c-masthead--PaddingInline: var(--pf-t--global--spacer--inset--page-chrome); --pf-v6-c-masthead--BorderColor: var(--pf-t--global--border--color--default); --pf-v6-c-masthead--BackgroundColor: var(--pf-t--global--background--color--secondary--default); --pf-v6-c-masthead__main--ColumnGap: var(--pf-t--global--spacer--md); --pf-v6-c-masthead__main--MarginInlineEnd: var(--pf-t--global--spacer--inset--page-chrome); --pf-v6-c-masthead--m-docked__main--RowGap: var(--pf-t--global--spacer--gap--group--vertical); --pf-v6-c-masthead__logo--MaxHeight: 2.375rem; --pf-v6-c-masthead__logo--Width: 11.8125rem; --pf-v6-c-masthead__toggle--Size: var(--pf-t--global--icon--size--xl); --pf-v6-c-masthead__content--ColumnGap: var(--pf-t--global--spacer--md); --pf-v6-c-masthead--m-display-stack--ColumnGap: var(--pf-t--global--spacer--gutter--default); --pf-v6-c-masthead--m-display-stack--GridTemplateColumns: max-content 1fr; --pf-v6-c-masthead--m-display-stack__brand--GridColumn: -1 / 1; --pf-v6-c-masthead--m-display-stack__brand--Order: -1; --pf-v6-c-masthead--m-display-stack__brand--PaddingBlockEnd: var(--pf-v6-c-masthead--RowGap); --pf-v6-c-masthead--m-display-stack__brand--BorderBlockEnd: var(--pf-v6-c-masthead--BorderWidth) solid var(--pf-v6-c-masthead--BorderColor); --pf-v6-c-masthead--m-display-stack__content--GridColumn: 1; --pf-v6-c-masthead--m-display-stack__content--Order: 1; --pf-v6-c-masthead--m-display-stack__main--toggle--content--GridColumn: 2; --pf-v6-c-masthead--m-display-stack__main--Display: contents; --pf-v6-c-masthead--m-display-stack__main--ColumnGap: unset; --pf-v6-c-masthead--m-display-inline--ColumnGap: 0; --pf-v6-c-masthead--m-display-inline--GridTemplateColumns: min-content 1fr; --pf-v6-c-masthead--m-display-inline--breakpoint--xl--GridTemplateColumns: subgrid; --pf-v6-c-masthead--m-display-inline__brand--GridColumn: initial; --pf-v6-c-masthead--m-display-inline__brand--Order: initial; --pf-v6-c-masthead--m-display-inline__brand--PaddingBlockEnd: 0; --pf-v6-c-masthead--m-display-inline__brand--BorderBlockEnd: 0; --pf-v6-c-masthead--m-display-inline__main--GridColumn: 1; --pf-v6-c-masthead--m-display-inline__content--GridColumn: 2; --pf-v6-c-masthead--m-display-inline__content--Order: 0; --pf-v6-c-masthead--m-display-inline__main--toggle--content--GridColumn: 2; --pf-v6-c-masthead--m-display-inline__main--Display: flex; --pf-v6-c-masthead--m-display-inline__main--ColumnGap: var(--pf-t--global--spacer--md); --pf-v6-c-masthead--m-docked--GridTemplateRows: min-content 1fr; --pf-v6-c-masthead--m-docked--RowGap: var(--pf-t--global--spacer--gutter--default); --pf-v6-c-masthead--m-docked--PaddingBlockStart: var(--pf-t--global--spacer--lg); --pf-v6-c-masthead--m-docked--PaddingBlockEnd: var(--pf-t--global--spacer--lg); --pf-v6-c-masthead--m-docked--PaddingInlineStart: var(--pf-t--global--spacer--sm); --pf-v6-c-masthead--m-docked--PaddingInlineEnd: var(--pf-t--global--spacer--sm); --pf-v6-c-masthead--m-docked--BackgroundColor: var(--pf-t--global--background--color--glass--primary--default, var(--pf-t--global--background--color--primary--default)); --pf-v6-c-masthead--m-docked--BackdropFilter: var(--pf-t--global--background--filter--glass--blur--primary); --pf-v6-c-masthead--m-docked--c-toolbar--Height: 100%; --pf-v6-c-masthead__expandable-content--BoxShadow: var(--pf-t--global--box-shadow--md--bottom); --pf-v6-c-masthead__expandable-content--BorderBlockStart: var(--pf-v6-c-masthead--BorderWidth) solid var(--pf-v6-c-masthead--BorderColor); --pf-v6-c-masthead--c-toolbar--Width: 100%; --pf-v6-c-masthead--c-toolbar--PaddingBlock: 0; } .pf-v6-c-masthead .pf-v6-c-toolbar { --pf-v6-c-toolbar--Width: var(--pf-v6-c-masthead--c-toolbar--Width); --pf-v6-c-toolbar--PaddingBlockEnd: 0; --pf-v6-c-toolbar__content--MinWidth: 0; } .pf-v6-c-masthead { --pf-v6-c-masthead--ColumnGap: var(--pf-v6-c-masthead--m-display-stack--ColumnGap); --pf-v6-c-masthead--GridTemplateColumns: var(--pf-v6-c-masthead--m-display-stack--GridTemplateColumns); --pf-v6-c-masthead__brand--GridColumn: var(--pf-v6-c-masthead--m-display-stack__brand--GridColumn); --pf-v6-c-masthead__brand--Order: var(--pf-v6-c-masthead--m-display-stack__brand--Order); --pf-v6-c-masthead__brand--PaddingBlockEnd: var(--pf-v6-c-masthead--m-display-stack__brand--PaddingBlockEnd); --pf-v6-c-masthead__brand--BorderBlockEnd: var(--pf-v6-c-masthead--m-display-stack__brand--BorderBlockEnd); --pf-v6-c-masthead__main--GridColumn: unset; --pf-v6-c-masthead__content--GridColumn: var(--pf-v6-c-masthead--m-display-stack__content--GridColumn); --pf-v6-c-masthead__content--Order: var(--pf-v6-c-masthead--m-display-stack__content--Order); --pf-v6-c-masthead__main--toggle--content--GridColumn: var(--pf-v6-c-masthead--m-display-stack__main--toggle--content--GridColumn); --pf-v6-c-masthead__main--Display: var(--pf-v6-c-masthead--m-display-stack__main--Display); --pf-v6-c-masthead__main--ColumnGap: var(--pf-v6-c-masthead--m-display-stack__main--ColumnGap); } @media screen and (min-width: 48rem) { :where(:not(.pf-m-resize-observer)) .pf-v6-c-masthead { --pf-v6-c-masthead--ColumnGap: var(--pf-v6-c-masthead--m-display-inline--ColumnGap); --pf-v6-c-masthead--GridTemplateColumns: var(--pf-v6-c-masthead--m-display-inline--GridTemplateColumns); --pf-v6-c-masthead__brand--GridColumn: var(--pf-v6-c-masthead--m-display-inline__brand--GridColumn); --pf-v6-c-masthead__brand--Order: var(--pf-v6-c-masthead--m-display-inline__brand--Order); --pf-v6-c-masthead__brand--PaddingBlockEnd: var(--pf-v6-c-masthead--m-display-inline__brand--PaddingBlockEnd); --pf-v6-c-masthead__brand--BorderBlockEnd: var(--pf-v6-c-masthead--m-display-inline__brand--BorderBlockEnd); --pf-v6-c-masthead__main--GridColumn: var(--pf-v6-c-masthead--m-display-inline__main--GridColumn); --pf-v6-c-masthead__content--GridColumn: var(--pf-v6-c-masthead--m-display-inline__content--GridColumn); --pf-v6-c-masthead__content--Order: var(--pf-v6-c-masthead--m-display-inline__content--Order); --pf-v6-c-masthead__main--toggle--content--GridColumn: var(--pf-v6-c-masthead--m-display-inline__main--toggle--content--GridColumn); --pf-v6-c-masthead__main--Display: var(--pf-v6-c-masthead--m-display-inline__main--Display); --pf-v6-c-masthead__main--ColumnGap: var(--pf-v6-c-masthead--m-display-inline__main--ColumnGap); } } .pf-v6-c-masthead { display: grid; grid-template-rows: var(--pf-v6-c-masthead--GridTemplateRows); grid-template-columns: var(--pf-v6-c-masthead--GridTemplateColumns); row-gap: var(--pf-v6-c-masthead--RowGap); column-gap: var(--pf-v6-c-masthead--ColumnGap); align-items: start; min-width: 0; padding-block-start: var(--pf-v6-c-masthead--PaddingBlockStart, var(--pf-v6-c-masthead--PaddingBlock)); padding-block-end: var(--pf-v6-c-masthead--PaddingBlockEnd, var(--pf-v6-c-masthead--PaddingBlock)); padding-inline-start: var(--pf-v6-c-masthead--PaddingInlineStart, var(--pf-v6-c-masthead--PaddingInline)); padding-inline-end: var(--pf-v6-c-masthead--PaddingInlineEnd, var(--pf-v6-c-masthead--PaddingInline)); background-color: var(--pf-v6-c-masthead--BackgroundColor); } .pf-v6-c-masthead.pf-m-docked { --pf-v6-c-masthead--ColumnGap: var(--pf-v6-c-masthead--m-display-inline--ColumnGap); --pf-v6-c-masthead--GridTemplateColumns: var(--pf-v6-c-masthead--m-display-inline--GridTemplateColumns); --pf-v6-c-masthead__brand--GridColumn: var(--pf-v6-c-masthead--m-display-inline__brand--GridColumn); --pf-v6-c-masthead__brand--Order: var(--pf-v6-c-masthead--m-display-inline__brand--Order); --pf-v6-c-masthead__brand--PaddingBlockEnd: var(--pf-v6-c-masthead--m-display-inline__brand--PaddingBlockEnd); --pf-v6-c-masthead__brand--BorderBlockEnd: var(--pf-v6-c-masthead--m-display-inline__brand--BorderBlockEnd); --pf-v6-c-masthead__main--GridColumn: var(--pf-v6-c-masthead--m-display-inline__main--GridColumn); --pf-v6-c-masthead__content--GridColumn: var(--pf-v6-c-masthead--m-display-inline__content--GridColumn); --pf-v6-c-masthead__content--Order: var(--pf-v6-c-masthead--m-display-inline__content--Order); --pf-v6-c-masthead__main--toggle--content--GridColumn: var(--pf-v6-c-masthead--m-display-inline__main--toggle--content--GridColumn); --pf-v6-c-masthead__main--Display: var(--pf-v6-c-masthead--m-display-inline__main--Display); --pf-v6-c-masthead__main--ColumnGap: var(--pf-v6-c-masthead--m-display-inline__main--ColumnGap); --pf-v6-c-masthead--BackgroundColor: transparent; --pf-v6-c-masthead--GridTemplateRows: var(--pf-v6-c-masthead--m-docked--GridTemplateRows); --pf-v6-c-masthead--PaddingBlockStart: var(--pf-v6-c-masthead--m-docked--PaddingBlockStart); --pf-v6-c-masthead--PaddingBlockEnd: var(--pf-v6-c-masthead--m-docked--PaddingBlockEnd); --pf-v6-c-masthead--PaddingInlineStart: var(--pf-v6-c-masthead--m-docked--PaddingInlineStart); --pf-v6-c-masthead--PaddingInlineEnd: var(--pf-v6-c-masthead--m-docked--PaddingInlineEnd); --pf-v6-c-masthead--GridTemplateColumns: auto; --pf-v6-c-masthead--RowGap: var(--pf-v6-c-masthead--m-docked--RowGap); --pf-v6-c-masthead--m-display-inline--breakpoint--xl--GridTemplateColumns: auto; --pf-v6-c-masthead__main--GridColumn: auto; --pf-v6-c-masthead__content--GridColumn: auto; --pf-v6-c-masthead__main--MarginInlineEnd: 0; display: flex; flex-direction: column; align-items: stretch; height: 100%; border: 0; box-shadow: none; } .pf-v6-c-masthead.pf-m-docked .pf-v6-c-masthead__logo { width: revert; } .pf-v6-c-masthead.pf-m-docked .pf-v6-c-masthead__logo.pf-m-compact { display: none; max-width: 2.3125rem; max-height: revert; } .pf-v6-c-masthead.pf-m-docked .pf-v6-c-masthead__main { flex-direction: column; row-gap: var(--pf-v6-c-masthead--m-docked__main--RowGap); align-items: flex-start; } .pf-v6-c-masthead.pf-m-docked .pf-v6-c-masthead__content { flex-grow: 1; flex-direction: column; align-items: stretch; align-self: revert; } .pf-v6-c-masthead.pf-m-docked .pf-v6-c-toolbar { --pf-v6-c-toolbar--m-vertical--Width: auto; height: var(--pf-v6-c-masthead--m-docked--c-toolbar--Height); } @media (min-width: 62rem) { .pf-v6-c-masthead.pf-m-docked .pf-v6-c-masthead__main { align-items: center; } .pf-v6-c-masthead.pf-m-docked .pf-v6-c-masthead__logo { display: none; } .pf-v6-c-masthead.pf-m-docked .pf-v6-c-masthead__logo.pf-m-compact { display: revert; } } :is(.pf-v6-c-page__dock, .pf-v6-c-compass__dock).pf-m-text-expanded .pf-v6-c-masthead.pf-m-docked .pf-v6-c-masthead__logo { display: revert; } :is(.pf-v6-c-page__dock, .pf-v6-c-compass__dock).pf-m-text-expanded .pf-v6-c-masthead.pf-m-docked .pf-v6-c-masthead__logo.pf-m-compact { display: none; } :is(.pf-v6-c-page__dock, .pf-v6-c-compass__dock).pf-m-text-expanded .pf-v6-c-masthead.pf-m-docked .pf-v6-c-masthead__main { align-items: flex-start; } .pf-v6-c-masthead .pf-v6-c-toolbar__content-section { flex-wrap: nowrap; min-width: 0; } .pf-v6-c-masthead .pf-v6-c-toolbar__expandable-content { inset-block-start: 100%; border-block-start: var(--pf-v6-c-masthead__expandable-content--BorderBlockStart); box-shadow: var(--pf-v6-c-masthead__expandable-content--BoxShadow); } .pf-v6-c-masthead.pf-m-display-stack { --pf-v6-c-masthead--ColumnGap: var(--pf-v6-c-masthead--m-display-stack--ColumnGap); --pf-v6-c-masthead--GridTemplateColumns: var(--pf-v6-c-masthead--m-display-stack--GridTemplateColumns); --pf-v6-c-masthead__brand--GridColumn: var(--pf-v6-c-masthead--m-display-stack__brand--GridColumn); --pf-v6-c-masthead__brand--Order: var(--pf-v6-c-masthead--m-display-stack__brand--Order); --pf-v6-c-masthead__brand--PaddingBlockEnd: var(--pf-v6-c-masthead--m-display-stack__brand--PaddingBlockEnd); --pf-v6-c-masthead__brand--BorderBlockEnd: var(--pf-v6-c-masthead--m-display-stack__brand--BorderBlockEnd); --pf-v6-c-masthead__main--GridColumn: unset; --pf-v6-c-masthead__content--GridColumn: var(--pf-v6-c-masthead--m-display-stack__content--GridColumn); --pf-v6-c-masthead__content--Order: var(--pf-v6-c-masthead--m-display-stack__content--Order); --pf-v6-c-masthead__main--toggle--content--GridColumn: var(--pf-v6-c-masthead--m-display-stack__main--toggle--content--GridColumn); --pf-v6-c-masthead__main--Display: var(--pf-v6-c-masthead--m-display-stack__main--Display); --pf-v6-c-masthead__main--ColumnGap: var(--pf-v6-c-masthead--m-display-stack__main--ColumnGap); } .pf-v6-c-masthead.pf-m-display-inline { --pf-v6-c-masthead--ColumnGap: var(--pf-v6-c-masthead--m-display-inline--ColumnGap); --pf-v6-c-masthead--GridTemplateColumns: var(--pf-v6-c-masthead--m-display-inline--GridTemplateColumns); --pf-v6-c-masthead__brand--GridColumn: var(--pf-v6-c-masthead--m-display-inline__brand--GridColumn); --pf-v6-c-masthead__brand--Order: var(--pf-v6-c-masthead--m-display-inline__brand--Order); --pf-v6-c-masthead__brand--PaddingBlockEnd: var(--pf-v6-c-masthead--m-display-inline__brand--PaddingBlockEnd); --pf-v6-c-masthead__brand--BorderBlockEnd: var(--pf-v6-c-masthead--m-display-inline__brand--BorderBlockEnd); --pf-v6-c-masthead__main--GridColumn: var(--pf-v6-c-masthead--m-display-inline__main--GridColumn); --pf-v6-c-masthead__content--GridColumn: var(--pf-v6-c-masthead--m-display-inline__content--GridColumn); --pf-v6-c-masthead__content--Order: var(--pf-v6-c-masthead--m-display-inline__content--Order); --pf-v6-c-masthead__main--toggle--content--GridColumn: var(--pf-v6-c-masthead--m-display-inline__main--toggle--content--GridColumn); --pf-v6-c-masthead__main--Display: var(--pf-v6-c-masthead--m-display-inline__main--Display); --pf-v6-c-masthead__main--ColumnGap: var(--pf-v6-c-masthead--m-display-inline__main--ColumnGap); } .pf-v6-c-masthead.pf-m-inset-none { padding-inline-start: 0; padding-inline-end: 0; } .pf-v6-c-masthead.pf-m-inset-sm { padding-inline-start: var(--pf-t--global--spacer--sm); padding-inline-end: var(--pf-t--global--spacer--sm); } .pf-v6-c-masthead.pf-m-inset-md { padding-inline-start: var(--pf-t--global--spacer--md); padding-inline-end: var(--pf-t--global--spacer--md); } .pf-v6-c-masthead.pf-m-inset-lg { padding-inline-start: var(--pf-t--global--spacer--lg); padding-inline-end: var(--pf-t--global--spacer--lg); } .pf-v6-c-masthead.pf-m-inset-xl { padding-inline-start: var(--pf-t--global--spacer--xl); padding-inline-end: var(--pf-t--global--spacer--xl); } .pf-v6-c-masthead.pf-m-inset-2xl { padding-inline-start: var(--pf-t--global--spacer--2xl); padding-inline-end: var(--pf-t--global--spacer--2xl); } :where(.pf-v6-theme-glass) .pf-v6-c-masthead:not(.pf-m-docked) { background-color: var(--pf-t--global--background--color--glass--primary--default); border-block-end: var(--pf-t--global--border--width--glass--default) solid var(--pf-t--global--border--color--glass--default); box-shadow: var(--pf-t--global--box-shadow--glass--default); backdrop-filter: var(--pf-t--global--background--filter--glass--blur--primary); } .pf-v6-c-masthead__main { display: var(--pf-v6-c-masthead__main--Display); grid-column: var(--pf-v6-c-masthead__main--GridColumn); column-gap: var(--pf-v6-c-masthead__main--ColumnGap); align-items: center; margin-inline-end: var(--pf-v6-c-masthead__main--MarginInlineEnd); } .pf-v6-c-masthead__main:has(.pf-v6-c-masthead__toggle) ~ .pf-v6-c-masthead__content { --pf-v6-c-masthead__content--GridColumn: var(--pf-v6-c-masthead__main--toggle--content--GridColumn); } .pf-v6-c-masthead, .pf-v6-c-masthead__brand { position: relative; } .pf-v6-c-masthead__brand { display: flex; flex-shrink: 0; grid-column: var(--pf-v6-c-masthead__brand--GridColumn, revert); row-gap: var(--pf-v6-c-masthead__brand--RowGap, var(--pf-v6-c-masthead--RowGap)); align-self: stretch; order: var(--pf-v6-c-masthead__brand--Order, revert); min-width: 0.25rem; padding-block-end: var(--pf-v6-c-masthead__brand--PaddingBlockEnd); border-block-end: var(--pf-v6-c-masthead__brand--BorderBlockEnd); } .pf-v6-c-masthead__content { display: flex; flex-wrap: wrap; grid-column: var(--pf-v6-c-masthead__content--GridColumn); grid-column-end: -1; row-gap: var(--pf-v6-c-masthead__content-RowGap, var(--pf-v6-c-masthead--RowGap)); column-gap: var(--pf-v6-c-masthead__content--ColumnGap, var(--pf-v6-c-masthead--ColumnGap)); align-self: center; order: var(--pf-v6-c-masthead__content--Order); min-width: 0.25rem; } .pf-v6-c-masthead__logo { position: relative; width: var(--pf-v6-c-masthead__logo--Width); max-height: var(--pf-v6-c-masthead__logo--MaxHeight); } .pf-v6-c-masthead__logo > * { max-width: 100%; max-height: 100%; vertical-align: middle; } .pf-v6-c-masthead__toggle { --pf-v6-c-button--FontSize: var(--pf-v6-c-masthead__toggle--Size); } .pf-v6-c-masthead__expandable-content { row-gap: var(--pf-v6-c-masthead__expandable-content-RowGap, var(--pf-v6-c-masthead--RowGap)); background-color: var(--pf-v6-c-masthead--BackgroundColor); } .pf-v6-c-masthead.pf-m-display-stack { --pf-v6-c-masthead--ColumnGap: var(--pf-v6-c-masthead--m-display-stack--ColumnGap); --pf-v6-c-masthead--GridTemplateColumns: var(--pf-v6-c-masthead--m-display-stack--GridTemplateColumns); --pf-v6-c-masthead__brand--GridColumn: var(--pf-v6-c-masthead--m-display-stack__brand--GridColumn); --pf-v6-c-masthead__brand--Order: var(--pf-v6-c-masthead--m-display-stack__brand--Order); --pf-v6-c-masthead__brand--PaddingBlockEnd: var(--pf-v6-c-masthead--m-display-stack__brand--PaddingBlockEnd); --pf-v6-c-masthead__brand--BorderBlockEnd: var(--pf-v6-c-masthead--m-display-stack__brand--BorderBlockEnd); --pf-v6-c-masthead__main--GridColumn: unset; --pf-v6-c-masthead__content--GridColumn: var(--pf-v6-c-masthead--m-display-stack__content--GridColumn); --pf-v6-c-masthead__content--Order: var(--pf-v6-c-masthead--m-display-stack__content--Order); --pf-v6-c-masthead__main--toggle--content--GridColumn: var(--pf-v6-c-masthead--m-display-stack__main--toggle--content--GridColumn); --pf-v6-c-masthead__main--Display: var(--pf-v6-c-masthead--m-display-stack__main--Display); --pf-v6-c-masthead__main--ColumnGap: var(--pf-v6-c-masthead--m-display-stack__main--ColumnGap); } .pf-v6-c-masthead.pf-m-display-inline { --pf-v6-c-masthead--ColumnGap: var(--pf-v6-c-masthead--m-display-inline--ColumnGap); --pf-v6-c-masthead--GridTemplateColumns: var(--pf-v6-c-masthead--m-display-inline--GridTemplateColumns); --pf-v6-c-masthead__brand--GridColumn: var(--pf-v6-c-masthead--m-display-inline__brand--GridColumn); --pf-v6-c-masthead__brand--Order: var(--pf-v6-c-masthead--m-display-inline__brand--Order); --pf-v6-c-masthead__brand--PaddingBlockEnd: var(--pf-v6-c-masthead--m-display-inline__brand--PaddingBlockEnd); --pf-v6-c-masthead__brand--BorderBlockEnd: var(--pf-v6-c-masthead--m-display-inline__brand--BorderBlockEnd); --pf-v6-c-masthead__main--GridColumn: var(--pf-v6-c-masthead--m-display-inline__main--GridColumn); --pf-v6-c-masthead__content--GridColumn: var(--pf-v6-c-masthead--m-display-inline__content--GridColumn); --pf-v6-c-masthead__content--Order: var(--pf-v6-c-masthead--m-display-inline__content--Order); --pf-v6-c-masthead__main--toggle--content--GridColumn: var(--pf-v6-c-masthead--m-display-inline__main--toggle--content--GridColumn); --pf-v6-c-masthead__main--Display: var(--pf-v6-c-masthead--m-display-inline__main--Display); --pf-v6-c-masthead__main--ColumnGap: var(--pf-v6-c-masthead--m-display-inline__main--ColumnGap); } .pf-v6-c-masthead.pf-m-inset-none { padding-inline-start: 0; padding-inline-end: 0; } .pf-v6-c-masthead.pf-m-inset-sm { padding-inline-start: var(--pf-t--global--spacer--sm); padding-inline-end: var(--pf-t--global--spacer--sm); } .pf-v6-c-masthead.pf-m-inset-md { padding-inline-start: var(--pf-t--global--spacer--md); padding-inline-end: var(--pf-t--global--spacer--md); } .pf-v6-c-masthead.pf-m-inset-lg { padding-inline-start: var(--pf-t--global--spacer--lg); padding-inline-end: var(--pf-t--global--spacer--lg); } .pf-v6-c-masthead.pf-m-inset-xl { padding-inline-start: var(--pf-t--global--spacer--xl); padding-inline-end: var(--pf-t--global--spacer--xl); } .pf-v6-c-masthead.pf-m-inset-2xl { padding-inline-start: var(--pf-t--global--spacer--2xl); padding-inline-end: var(--pf-t--global--spacer--2xl); } @media (min-width: 36rem) { .pf-v6-c-masthead.pf-m-display-stack-on-sm { --pf-v6-c-masthead--ColumnGap: var(--pf-v6-c-masthead--m-display-stack--ColumnGap); --pf-v6-c-masthead--GridTemplateColumns: var(--pf-v6-c-masthead--m-display-stack--GridTemplateColumns); --pf-v6-c-masthead__brand--GridColumn: var(--pf-v6-c-masthead--m-display-stack__brand--GridColumn); --pf-v6-c-masthead__brand--Order: var(--pf-v6-c-masthead--m-display-stack__brand--Order); --pf-v6-c-masthead__brand--PaddingBlockEnd: var(--pf-v6-c-masthead--m-display-stack__brand--PaddingBlockEnd); --pf-v6-c-masthead__brand--BorderBlockEnd: var(--pf-v6-c-masthead--m-display-stack__brand--BorderBlockEnd); --pf-v6-c-masthead__main--GridColumn: unset; --pf-v6-c-masthead__content--GridColumn: var(--pf-v6-c-masthead--m-display-stack__content--GridColumn); --pf-v6-c-masthead__content--Order: var(--pf-v6-c-masthead--m-display-stack__content--Order); --pf-v6-c-masthead__main--toggle--content--GridColumn: var(--pf-v6-c-masthead--m-display-stack__main--toggle--content--GridColumn); --pf-v6-c-masthead__main--Display: var(--pf-v6-c-masthead--m-display-stack__main--Display); --pf-v6-c-masthead__main--ColumnGap: var(--pf-v6-c-masthead--m-display-stack__main--ColumnGap); } .pf-v6-c-masthead.pf-m-display-inline-on-sm { --pf-v6-c-masthead--ColumnGap: var(--pf-v6-c-masthead--m-display-inline--ColumnGap); --pf-v6-c-masthead--GridTemplateColumns: var(--pf-v6-c-masthead--m-display-inline--GridTemplateColumns); --pf-v6-c-masthead__brand--GridColumn: var(--pf-v6-c-masthead--m-display-inline__brand--GridColumn); --pf-v6-c-masthead__brand--Order: var(--pf-v6-c-masthead--m-display-inline__brand--Order); --pf-v6-c-masthead__brand--PaddingBlockEnd: var(--pf-v6-c-masthead--m-display-inline__brand--PaddingBlockEnd); --pf-v6-c-masthead__brand--BorderBlockEnd: var(--pf-v6-c-masthead--m-display-inline__brand--BorderBlockEnd); --pf-v6-c-masthead__main--GridColumn: var(--pf-v6-c-masthead--m-display-inline__main--GridColumn); --pf-v6-c-masthead__content--GridColumn: var(--pf-v6-c-masthead--m-display-inline__content--GridColumn); --pf-v6-c-masthead__content--Order: var(--pf-v6-c-masthead--m-display-inline__content--Order); --pf-v6-c-masthead__main--toggle--content--GridColumn: var(--pf-v6-c-masthead--m-display-inline__main--toggle--content--GridColumn); --pf-v6-c-masthead__main--Display: var(--pf-v6-c-masthead--m-display-inline__main--Display); --pf-v6-c-masthead__main--ColumnGap: var(--pf-v6-c-masthead--m-display-inline__main--ColumnGap); } } .pf-v6-c-masthead.pf-m-inset-none { padding-inline-start: 0; padding-inline-end: 0; } .pf-v6-c-masthead.pf-m-inset-sm { padding-inline-start: var(--pf-t--global--spacer--sm); padding-inline-end: var(--pf-t--global--spacer--sm); } .pf-v6-c-masthead.pf-m-inset-md { padding-inline-start: var(--pf-t--global--spacer--md); padding-inline-end: var(--pf-t--global--spacer--md); } .pf-v6-c-masthead.pf-m-inset-lg { padding-inline-start: var(--pf-t--global--spacer--lg); padding-inline-end: var(--pf-t--global--spacer--lg); } .pf-v6-c-masthead.pf-m-inset-xl { padding-inline-start: var(--pf-t--global--spacer--xl); padding-inline-end: var(--pf-t--global--spacer--xl); } .pf-v6-c-masthead.pf-m-inset-2xl { padding-inline-start: var(--pf-t--global--spacer--2xl); padding-inline-end: var(--pf-t--global--spacer--2xl); } @media (min-width: 48rem) { .pf-v6-c-masthead.pf-m-display-stack-on-md { --pf-v6-c-masthead--ColumnGap: var(--pf-v6-c-masthead--m-display-stack--ColumnGap); --pf-v6-c-masthead--GridTemplateColumns: var(--pf-v6-c-masthead--m-display-stack--GridTemplateColumns); --pf-v6-c-masthead__brand--GridColumn: var(--pf-v6-c-masthead--m-display-stack__brand--GridColumn); --pf-v6-c-masthead__brand--Order: var(--pf-v6-c-masthead--m-display-stack__brand--Order); --pf-v6-c-masthead__brand--PaddingBlockEnd: var(--pf-v6-c-masthead--m-display-stack__brand--PaddingBlockEnd); --pf-v6-c-masthead__brand--BorderBlockEnd: var(--pf-v6-c-masthead--m-display-stack__brand--BorderBlockEnd); --pf-v6-c-masthead__main--GridColumn: unset; --pf-v6-c-masthead__content--GridColumn: var(--pf-v6-c-masthead--m-display-stack__content--GridColumn); --pf-v6-c-masthead__content--Order: var(--pf-v6-c-masthead--m-display-stack__content--Order); --pf-v6-c-masthead__main--toggle--content--GridColumn: var(--pf-v6-c-masthead--m-display-stack__main--toggle--content--GridColumn); --pf-v6-c-masthead__main--Display: var(--pf-v6-c-masthead--m-display-stack__main--Display); --pf-v6-c-masthead__main--ColumnGap: var(--pf-v6-c-masthead--m-display-stack__main--ColumnGap); } .pf-v6-c-masthead.pf-m-display-inline-on-md { --pf-v6-c-masthead--ColumnGap: var(--pf-v6-c-masthead--m-display-inline--ColumnGap); --pf-v6-c-masthead--GridTemplateColumns: var(--pf-v6-c-masthead--m-display-inline--GridTemplateColumns); --pf-v6-c-masthead__brand--GridColumn: var(--pf-v6-c-masthead--m-display-inline__brand--GridColumn); --pf-v6-c-masthead__brand--Order: var(--pf-v6-c-masthead--m-display-inline__brand--Order); --pf-v6-c-masthead__brand--PaddingBlockEnd: var(--pf-v6-c-masthead--m-display-inline__brand--PaddingBlockEnd); --pf-v6-c-masthead__brand--BorderBlockEnd: var(--pf-v6-c-masthead--m-display-inline__brand--BorderBlockEnd); --pf-v6-c-masthead__main--GridColumn: var(--pf-v6-c-masthead--m-display-inline__main--GridColumn); --pf-v6-c-masthead__content--GridColumn: var(--pf-v6-c-masthead--m-display-inline__content--GridColumn); --pf-v6-c-masthead__content--Order: var(--pf-v6-c-masthead--m-display-inline__content--Order); --pf-v6-c-masthead__main--toggle--content--GridColumn: var(--pf-v6-c-masthead--m-display-inline__main--toggle--content--GridColumn); --pf-v6-c-masthead__main--Display: var(--pf-v6-c-masthead--m-display-inline__main--Display); --pf-v6-c-masthead__main--ColumnGap: var(--pf-v6-c-masthead--m-display-inline__main--ColumnGap); } } .pf-v6-c-masthead.pf-m-inset-none { padding-inline-start: 0; padding-inline-end: 0; } .pf-v6-c-masthead.pf-m-inset-sm { padding-inline-start: var(--pf-t--global--spacer--sm); padding-inline-end: var(--pf-t--global--spacer--sm); } .pf-v6-c-masthead.pf-m-inset-md { padding-inline-start: var(--pf-t--global--spacer--md); padding-inline-end: var(--pf-t--global--spacer--md); } .pf-v6-c-masthead.pf-m-inset-lg { padding-inline-start: var(--pf-t--global--spacer--lg); padding-inline-end: var(--pf-t--global--spacer--lg); } .pf-v6-c-masthead.pf-m-inset-xl { padding-inline-start: var(--pf-t--global--spacer--xl); padding-inline-end: var(--pf-t--global--spacer--xl); } .pf-v6-c-masthead.pf-m-inset-2xl { padding-inline-start: var(--pf-t--global--spacer--2xl); padding-inline-end: var(--pf-t--global--spacer--2xl); } @media (min-width: 62rem) { .pf-v6-c-masthead.pf-m-display-stack-on-lg { --pf-v6-c-masthead--ColumnGap: var(--pf-v6-c-masthead--m-display-stack--ColumnGap); --pf-v6-c-masthead--GridTemplateColumns: var(--pf-v6-c-masthead--m-display-stack--GridTemplateColumns); --pf-v6-c-masthead__brand--GridColumn: var(--pf-v6-c-masthead--m-display-stack__brand--GridColumn); --pf-v6-c-masthead__brand--Order: var(--pf-v6-c-masthead--m-display-stack__brand--Order); --pf-v6-c-masthead__brand--PaddingBlockEnd: var(--pf-v6-c-masthead--m-display-stack__brand--PaddingBlockEnd); --pf-v6-c-masthead__brand--BorderBlockEnd: var(--pf-v6-c-masthead--m-display-stack__brand--BorderBlockEnd); --pf-v6-c-masthead__main--GridColumn: unset; --pf-v6-c-masthead__content--GridColumn: var(--pf-v6-c-masthead--m-display-stack__content--GridColumn); --pf-v6-c-masthead__content--Order: var(--pf-v6-c-masthead--m-display-stack__content--Order); --pf-v6-c-masthead__main--toggle--content--GridColumn: var(--pf-v6-c-masthead--m-display-stack__main--toggle--content--GridColumn); --pf-v6-c-masthead__main--Display: var(--pf-v6-c-masthead--m-display-stack__main--Display); --pf-v6-c-masthead__main--ColumnGap: var(--pf-v6-c-masthead--m-display-stack__main--ColumnGap); } .pf-v6-c-masthead.pf-m-display-inline-on-lg { --pf-v6-c-masthead--ColumnGap: var(--pf-v6-c-masthead--m-display-inline--ColumnGap); --pf-v6-c-masthead--GridTemplateColumns: var(--pf-v6-c-masthead--m-display-inline--GridTemplateColumns); --pf-v6-c-masthead__brand--GridColumn: var(--pf-v6-c-masthead--m-display-inline__brand--GridColumn); --pf-v6-c-masthead__brand--Order: var(--pf-v6-c-masthead--m-display-inline__brand--Order); --pf-v6-c-masthead__brand--PaddingBlockEnd: var(--pf-v6-c-masthead--m-display-inline__brand--PaddingBlockEnd); --pf-v6-c-masthead__brand--BorderBlockEnd: var(--pf-v6-c-masthead--m-display-inline__brand--BorderBlockEnd); --pf-v6-c-masthead__main--GridColumn: var(--pf-v6-c-masthead--m-display-inline__main--GridColumn); --pf-v6-c-masthead__content--GridColumn: var(--pf-v6-c-masthead--m-display-inline__content--GridColumn); --pf-v6-c-masthead__content--Order: var(--pf-v6-c-masthead--m-display-inline__content--Order); --pf-v6-c-masthead__main--toggle--content--GridColumn: var(--pf-v6-c-masthead--m-display-inline__main--toggle--content--GridColumn); --pf-v6-c-masthead__main--Display: var(--pf-v6-c-masthead--m-display-inline__main--Display); --pf-v6-c-masthead__main--ColumnGap: var(--pf-v6-c-masthead--m-display-inline__main--ColumnGap); } } .pf-v6-c-masthead.pf-m-inset-none { padding-inline-start: 0; padding-inline-end: 0; } .pf-v6-c-masthead.pf-m-inset-sm { padding-inline-start: var(--pf-t--global--spacer--sm); padding-inline-end: var(--pf-t--global--spacer--sm); } .pf-v6-c-masthead.pf-m-inset-md { padding-inline-start: var(--pf-t--global--spacer--md); padding-inline-end: var(--pf-t--global--spacer--md); } .pf-v6-c-masthead.pf-m-inset-lg { padding-inline-start: var(--pf-t--global--spacer--lg); padding-inline-end: var(--pf-t--global--spacer--lg); } .pf-v6-c-masthead.pf-m-inset-xl { padding-inline-start: var(--pf-t--global--spacer--xl); padding-inline-end: var(--pf-t--global--spacer--xl); } .pf-v6-c-masthead.pf-m-inset-2xl { padding-inline-start: var(--pf-t--global--spacer--2xl); padding-inline-end: var(--pf-t--global--spacer--2xl); } @media (min-width: 75rem) { .pf-v6-c-masthead.pf-m-display-stack-on-xl { --pf-v6-c-masthead--ColumnGap: var(--pf-v6-c-masthead--m-display-stack--ColumnGap); --pf-v6-c-masthead--GridTemplateColumns: var(--pf-v6-c-masthead--m-display-stack--GridTemplateColumns); --pf-v6-c-masthead__brand--GridColumn: var(--pf-v6-c-masthead--m-display-stack__brand--GridColumn); --pf-v6-c-masthead__brand--Order: var(--pf-v6-c-masthead--m-display-stack__brand--Order); --pf-v6-c-masthead__brand--PaddingBlockEnd: var(--pf-v6-c-masthead--m-display-stack__brand--PaddingBlockEnd); --pf-v6-c-masthead__brand--BorderBlockEnd: var(--pf-v6-c-masthead--m-display-stack__brand--BorderBlockEnd); --pf-v6-c-masthead__main--GridColumn: unset; --pf-v6-c-masthead__content--GridColumn: var(--pf-v6-c-masthead--m-display-stack__content--GridColumn); --pf-v6-c-masthead__content--Order: var(--pf-v6-c-masthead--m-display-stack__content--Order); --pf-v6-c-masthead__main--toggle--content--GridColumn: var(--pf-v6-c-masthead--m-display-stack__main--toggle--content--GridColumn); --pf-v6-c-masthead__main--Display: var(--pf-v6-c-masthead--m-display-stack__main--Display); --pf-v6-c-masthead__main--ColumnGap: var(--pf-v6-c-masthead--m-display-stack__main--ColumnGap); } .pf-v6-c-masthead.pf-m-display-inline-on-xl { --pf-v6-c-masthead--ColumnGap: var(--pf-v6-c-masthead--m-display-inline--ColumnGap); --pf-v6-c-masthead--GridTemplateColumns: var(--pf-v6-c-masthead--m-display-inline--GridTemplateColumns); --pf-v6-c-masthead__brand--GridColumn: var(--pf-v6-c-masthead--m-display-inline__brand--GridColumn); --pf-v6-c-masthead__brand--Order: var(--pf-v6-c-masthead--m-display-inline__brand--Order); --pf-v6-c-masthead__brand--PaddingBlockEnd: var(--pf-v6-c-masthead--m-display-inline__brand--PaddingBlockEnd); --pf-v6-c-masthead__brand--BorderBlockEnd: var(--pf-v6-c-masthead--m-display-inline__brand--BorderBlockEnd); --pf-v6-c-masthead__main--GridColumn: var(--pf-v6-c-masthead--m-display-inline__main--GridColumn); --pf-v6-c-masthead__content--GridColumn: var(--pf-v6-c-masthead--m-display-inline__content--GridColumn); --pf-v6-c-masthead__content--Order: var(--pf-v6-c-masthead--m-display-inline__content--Order); --pf-v6-c-masthead__main--toggle--content--GridColumn: var(--pf-v6-c-masthead--m-display-inline__main--toggle--content--GridColumn); --pf-v6-c-masthead__main--Display: var(--pf-v6-c-masthead--m-display-inline__main--Display); --pf-v6-c-masthead__main--ColumnGap: var(--pf-v6-c-masthead--m-display-inline__main--ColumnGap); } } .pf-v6-c-masthead.pf-m-inset-none { padding-inline-start: 0; padding-inline-end: 0; } .pf-v6-c-masthead.pf-m-inset-sm { padding-inline-start: var(--pf-t--global--spacer--sm); padding-inline-end: var(--pf-t--global--spacer--sm); } .pf-v6-c-masthead.pf-m-inset-md { padding-inline-start: var(--pf-t--global--spacer--md); padding-inline-end: var(--pf-t--global--spacer--md); } .pf-v6-c-masthead.pf-m-inset-lg { padding-inline-start: var(--pf-t--global--spacer--lg); padding-inline-end: var(--pf-t--global--spacer--lg); } .pf-v6-c-masthead.pf-m-inset-xl { padding-inline-start: var(--pf-t--global--spacer--xl); padding-inline-end: var(--pf-t--global--spacer--xl); } .pf-v6-c-masthead.pf-m-inset-2xl { padding-inline-start: var(--pf-t--global--spacer--2xl); padding-inline-end: var(--pf-t--global--spacer--2xl); } @media (min-width: 90.625rem) { .pf-v6-c-masthead.pf-m-display-stack-on-2xl { --pf-v6-c-masthead--ColumnGap: var(--pf-v6-c-masthead--m-display-stack--ColumnGap); --pf-v6-c-masthead--GridTemplateColumns: var(--pf-v6-c-masthead--m-display-stack--GridTemplateColumns); --pf-v6-c-masthead__brand--GridColumn: var(--pf-v6-c-masthead--m-display-stack__brand--GridColumn); --pf-v6-c-masthead__brand--Order: var(--pf-v6-c-masthead--m-display-stack__brand--Order); --pf-v6-c-masthead__brand--PaddingBlockEnd: var(--pf-v6-c-masthead--m-display-stack__brand--PaddingBlockEnd); --pf-v6-c-masthead__brand--BorderBlockEnd: var(--pf-v6-c-masthead--m-display-stack__brand--BorderBlockEnd); --pf-v6-c-masthead__main--GridColumn: unset; --pf-v6-c-masthead__content--GridColumn: var(--pf-v6-c-masthead--m-display-stack__content--GridColumn); --pf-v6-c-masthead__content--Order: var(--pf-v6-c-masthead--m-display-stack__content--Order); --pf-v6-c-masthead__main--toggle--content--GridColumn: var(--pf-v6-c-masthead--m-display-stack__main--toggle--content--GridColumn); --pf-v6-c-masthead__main--Display: var(--pf-v6-c-masthead--m-display-stack__main--Display); --pf-v6-c-masthead__main--ColumnGap: var(--pf-v6-c-masthead--m-display-stack__main--ColumnGap); } .pf-v6-c-masthead.pf-m-display-inline-on-2xl { --pf-v6-c-masthead--ColumnGap: var(--pf-v6-c-masthead--m-display-inline--ColumnGap); --pf-v6-c-masthead--GridTemplateColumns: var(--pf-v6-c-masthead--m-display-inline--GridTemplateColumns); --pf-v6-c-masthead__brand--GridColumn: var(--pf-v6-c-masthead--m-display-inline__brand--GridColumn); --pf-v6-c-masthead__brand--Order: var(--pf-v6-c-masthead--m-display-inline__brand--Order); --pf-v6-c-masthead__brand--PaddingBlockEnd: var(--pf-v6-c-masthead--m-display-inline__brand--PaddingBlockEnd); --pf-v6-c-masthead__brand--BorderBlockEnd: var(--pf-v6-c-masthead--m-display-inline__brand--BorderBlockEnd); --pf-v6-c-masthead__main--GridColumn: var(--pf-v6-c-masthead--m-display-inline__main--GridColumn); --pf-v6-c-masthead__content--GridColumn: var(--pf-v6-c-masthead--m-display-inline__content--GridColumn); --pf-v6-c-masthead__content--Order: var(--pf-v6-c-masthead--m-display-inline__content--Order); --pf-v6-c-masthead__main--toggle--content--GridColumn: var(--pf-v6-c-masthead--m-display-inline__main--toggle--content--GridColumn); --pf-v6-c-masthead__main--Display: var(--pf-v6-c-masthead--m-display-inline__main--Display); --pf-v6-c-masthead__main--ColumnGap: var(--pf-v6-c-masthead--m-display-inline__main--ColumnGap); } } .pf-v6-c-masthead.pf-m-inset-none { padding-inline-start: 0; padding-inline-end: 0; } .pf-v6-c-masthead.pf-m-inset-sm { padding-inline-start: var(--pf-t--global--spacer--sm); padding-inline-end: var(--pf-t--global--spacer--sm); } .pf-v6-c-masthead.pf-m-inset-md { padding-inline-start: var(--pf-t--global--spacer--md); padding-inline-end: var(--pf-t--global--spacer--md); } .pf-v6-c-masthead.pf-m-inset-lg { padding-inline-start: var(--pf-t--global--spacer--lg); padding-inline-end: var(--pf-t--global--spacer--lg); } .pf-v6-c-masthead.pf-m-inset-xl { padding-inline-start: var(--pf-t--global--spacer--xl); padding-inline-end: var(--pf-t--global--spacer--xl); } .pf-v6-c-masthead.pf-m-inset-2xl { padding-inline-start: var(--pf-t--global--spacer--2xl); padding-inline-end: var(--pf-t--global--spacer--2xl); } /* PatternFly component: Nav/nav */ .pf-v6-c-nav { --pf-v6-c-nav__link--PaddingBlockStart: var(--pf-t--global--spacer--sm); --pf-v6-c-nav__link--PaddingBlockEnd: var(--pf-t--global--spacer--sm); --pf-v6-c-nav__link--PaddingInlineStart: var(--pf-t--global--spacer--md); --pf-v6-c-nav__link--PaddingInlineEnd: var(--pf-t--global--spacer--md); --pf-v6-c-nav__list--RowGap: var(--pf-t--global--spacer--sm); --pf-v6-c-nav__list--ColumnGap: var(--pf-t--global--spacer--xs); --pf-v6-c-nav--PaddingBlockStart: var(--pf-t--global--spacer--md); --pf-v6-c-nav--PaddingBlockEnd: var(--pf-t--global--spacer--md); --pf-v6-c-nav--PaddingInlineStart: 0; --pf-v6-c-nav--PaddingInlineEnd: 0; --pf-v6-c-nav--RowGap: var(--pf-t--global--spacer--lg); --pf-v6-c-nav--ColumnGap: 0; --pf-v6-c-nav--AlignItems: baseline; --pf-v6-c-nav--FontSize: var(--pf-t--global--font--size--body--default); --pf-v6-c-nav--FontWeight: var(--pf-t--global--font--weight--body--default); --pf-v6-c-nav--LineHeight: var(--pf-t--global--font--line-height--body); --pf-v6-c-nav--OutlineOffset: calc(var(--pf-t--global--spacer--xs) * -1); --pf-v6-c-nav--BackgroundColor: transparent; --pf-v6-c-nav__list--ScrollSnapTypeAxis: x; --pf-v6-c-nav__list--ScrollSnapTypeStrictness: proximity; --pf-v6-c-nav__list--ScrollSnapType: var(--pf-v6-c-nav__list--ScrollSnapTypeAxis) var(--pf-v6-c-nav__list--ScrollSnapTypeStrictness); --pf-v6-c-nav__item--ScrollSnapAlign: end; --pf-v6-c-nav__section-title--FontWeight: var(--pf-t--global--font--weight--body--bold); --pf-v6-c-nav__section-title--Color: var(--pf-t--global--text--color--regular); --pf-v6-c-nav__section-title--PaddingBlockStart: 0; --pf-v6-c-nav__section-title--PaddingBlockEnd: 0; --pf-v6-c-nav__section-title--PaddingInlineStart: var(--pf-v6-c-nav__link--PaddingInlineStart); --pf-v6-c-nav__section-title--PaddingInlineEnd: var(--pf-v6-c-nav__link--PaddingInlineEnd); --pf-v6-c-nav__item--RowGap: var(--pf-v6-c-nav__list--RowGap); --pf-v6-c-nav__item--accent--size: var(--pf-t--global--border--width--extra-strong); --pf-v6-c-nav__item--accent--color: var(--pf-t--global--color--brand--accent--default); --pf-v6-c-nav__item--accent--offset: calc(var(--pf-t--global--spacer--sm) * -1); --pf-v6-c-nav__item--accent--BorderRadius: var(--pf-t--global--border--radius--small); --pf-v6-c-nav__item--accent--ScaleY: 0; --pf-v6-c-nav__item--current--accent--ScaleY: 1; --pf-v6-c-nav__item--accent--TransitionDuration: 0; --pf-v6-c-nav__item--current--accent--TransitionDuration: var(--pf-t--global--motion--duration--fade--default); --pf-v6-c-nav__item--accent--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate); --pf-v6-c-nav__item__toggle-icon--Rotate: 0; --pf-v6-c-nav__item--m-expanded__toggle-icon--Rotate: -180deg; --pf-v6-c-nav__item__toggle-icon--TransitionDuration--transform: var(--pf-t--global--motion--duration--icon--default); --pf-v6-c-nav__item__toggle-icon--TransitionTimingFunction--transform: var(--pf-t--global--motion--timing-function--default); --pf-v6-c-nav__link--ColumnGap: var(--pf-t--global--spacer--sm); --pf-v6-c-nav__link--AlignItems: baseline; --pf-v6-c-nav__link--BorderRadius: var(--pf-t--global--border--radius--action--plain--default); --pf-v6-c-nav__link--BackgroundColor: var(--pf-t--global--background--color--action--plain--default); --pf-v6-c-nav__link--WhiteSpace: normal; --pf-v6-c-nav__link--Color: var(--pf-t--global--text--color--subtle); --pf-v6-c-nav__link--hover--Color: var(--pf-t--global--text--color--regular); --pf-v6-c-nav__link--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--alt--hover); --pf-v6-c-nav__link--m-current--BackgroundColor: var(--pf-t--global--background--color--action--plain--alt--clicked); --pf-v6-c-nav__link--m-current--Color: var(--pf-t--global--text--color--regular); --pf-v6-c-nav__link--BorderColor: var(--pf-t--global--border--color--high-contrast); --pf-v6-c-nav__link--BorderWidth: var(--pf-t--global--border--width--action--plain--default); --pf-v6-c-nav__link--hover--BorderWidth: var(--pf-t--global--border--width--action--plain--hover); --pf-v6-c-nav__link--m-current--BorderWidth: var(--pf-t--global--border--width--action--plain--clicked); --pf-v6-c-nav__link--TransitionDuration--background-color: var(--pf-t--global--motion--duration--fade--default); --pf-v6-c-nav__link--TransitionTimingFunction--background-color: var(--pf-t--global--motion--timing-function--default); --pf-v6-c-nav__link--m-current--TransitionDuration--color: var(--pf-t--global--motion--duration--fade--short); --pf-v6-c-nav__link--m-current--TransitionTimingFunction--color: var(--pf-t--global--motion--timing-function--default); --pf-v6-c-nav__link-icon--Color: var(--pf-t--global--icon--color--subtle); --pf-v6-c-nav__link--m-current__link-icon--Color: var(--pf-t--global--icon--color--regular); --pf-v6-c-nav__link-text--FontSize: initial; --pf-v6-c-nav__subnav--RowGap: var(--pf-t--global--border--width--extra-strong); --pf-v6-c-nav__subnav--PaddingBlockStart: var(--pf-v6-c-nav__item--RowGap); --pf-v6-c-nav__subnav--PaddingBlockEnd: var(--pf-v6-c-nav__item--RowGap); --pf-v6-c-nav__subnav--PaddingInlineStart: var(--pf-t--global--spacer--md); --pf-v6-c-nav__subnav--TransitionDuration--expand: var(--pf-t--global--motion--duration--fade--default); --pf-v6-c-nav__subnav--TransitionDuration--expand--slide: 0s; --pf-v6-c-nav__subnav--TransitionDuration--collapse: var(--pf-t--global--motion--duration--fade--short); --pf-v6-c-nav__subnav--TransitionDuration--collapse--slide: 0s; --pf-v6-c-nav__subnav--TransitionTimingFunction--expand: var(--pf-t--global--motion--timing-function--default); --pf-v6-c-nav__subnav--TranslateY: 0; --pf-v6-c-nav__subnav--hidden--TranslateY: 0; } @media screen and (prefers-reduced-motion: no-preference) { .pf-v6-c-nav { --pf-v6-c-nav__subnav--TransitionDuration--expand--slide: var(--pf-t--global--motion--duration--fade--default); --pf-v6-c-nav__subnav--TransitionDuration--collapse--slide: var(--pf-t--global--motion--duration--fade--short); --pf-v6-c-nav__subnav--hidden--TranslateY: -.5rem; } } .pf-v6-c-nav { --pf-v6-c-nav__scroll-button--BorderColor: var(--pf-t--global--border--color--default); --pf-v6-c-nav__scroll-button--BorderWidth: var(--pf-t--global--border--width--divider--default); --pf-v6-c-nav__scroll-button--first-of-type--c-button--BorderStartStartRadius: var(--pf-t--global--border--radius--pill); --pf-v6-c-nav__scroll-button--first-of-type--c-button--BorderEndStartRadius: var(--pf-t--global--border--radius--pill); --pf-v6-c-nav__scroll-button--last-of-type--c-button--BorderStartEndRadius: var(--pf-t--global--border--radius--pill); --pf-v6-c-nav__scroll-button--last-of-type--c-button--BorderEndEndRadius: var(--pf-t--global--border--radius--pill); --pf-v6-c-nav__toggle--PaddingInlineStart: var(--pf-t--global--spacer--sm); --pf-v6-c-nav__toggle--PaddingInlineEnd: var(--pf-t--global--spacer--sm); --pf-v6-c-nav__toggle--TranslateY: calc((var(--pf-v6-c-nav--LineHeight) * var(--pf-v6-c-nav--FontSize) / 2) - 50%); --pf-v6-c-nav--m-horizontal__list--PaddingBlockStart: 0; --pf-v6-c-nav--m-horizontal__list--PaddingBlockEnd: 0; --pf-v6-c-nav--m-horizontal__list--PaddingInlineStart: 0; --pf-v6-c-nav--m-horizontal__list--PaddingInlineEnd: 0; --pf-v6-c-nav--m-horizontal--m-scrollable__list--PaddingInlineStart: var(--pf-v6-c-nav__list--ColumnGap); --pf-v6-c-nav--m-horizontal--m-scrollable__list--PaddingInlineEnd: var(--pf-v6-c-nav__list--ColumnGap); --pf-v6-c-nav--m-horizontal--m-subnav--BackgroundColor: var(--pf-t--global--background--color--secondary--default); --pf-v6-c-nav--m-horizontal--m-subnav--BorderRadius: var(--pf-t--global--border--radius--pill); --pf-v6-c-nav--m-horizontal--m-subnav--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular); --pf-v6-c-nav--m-horizontal--m-subnav--BorderColor: var(--pf-t--global--border--color--high-contrast); --pf-v6-c-nav--m-horizontal--m-subnav__list--PaddingBlockStart: var(--pf-t--global--spacer--xs); --pf-v6-c-nav--m-horizontal--m-subnav__list--PaddingBlockEnd: var(--pf-t--global--spacer--xs); --pf-v6-c-nav--m-horizontal--m-subnav__list--PaddingInlineStart: var(--pf-t--global--spacer--md); --pf-v6-c-nav--m-horizontal--m-subnav__list--PaddingInlineEnd: var(--pf-t--global--spacer--md); --pf-v6-c-nav--m-horizontal--m-subnav--m-scrollable__list--PaddingInlineStart: var(--pf-v6-c-nav__list--ColumnGap); --pf-v6-c-nav--m-horizontal--m-subnav--m-scrollable__list--PaddingInlineEnd: var(--pf-v6-c-nav__list--ColumnGap); --pf-v6-c-nav--m-horizontal--m-subnav__link--PaddingBlockStart: var(--pf-t--global--spacer--xs); --pf-v6-c-nav--m-horizontal--m-subnav__link--PaddingBlockEnd: var(--pf-t--global--spacer--xs); --pf-v6-c-nav--m-horizontal--m-subnav__link--PaddingInlineStart: var(--pf-t--global--spacer--md); --pf-v6-c-nav--m-horizontal--m-subnav__link--PaddingInlineEnd: var(--pf-t--global--spacer--md); --pf-v6-c-nav--m-docked__list--RowGap: var(--pf-t--global--spacer--gap--action-to-action--plain); --pf-v6-c-nav--m-docked__link--PaddingInlineStart: var(--pf-t--global--spacer--sm); --pf-v6-c-nav--m-docked__link--PaddingInlineEnd: var(--pf-t--global--spacer--sm); --pf-v6-c-nav--m-docked__link--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover); --pf-v6-c-nav--m-docked__link--m-current--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked); } .pf-v6-c-nav, .pf-v6-c-nav__section, .pf-v6-c-nav__subnav, .pf-v6-c-nav__list, .pf-v6-c-nav__item { display: grid; } .pf-v6-c-nav { position: relative; row-gap: var(--pf-v6-c-nav--RowGap); column-gap: var(--pf-v6-c-nav--ColumnGap); max-width: 100%; padding-block-start: var(--pf-v6-c-nav--PaddingBlockStart); padding-block-end: var(--pf-v6-c-nav--PaddingBlockEnd); padding-inline-start: var(--pf-v6-c-nav--PaddingInlineStart); padding-inline-end: var(--pf-v6-c-nav--PaddingInlineEnd); font-size: var(--pf-v6-c-nav--FontSize); font-weight: var(--pf-v6-c-nav--FontWeight); line-height: var(--pf-v6-c-nav--LineHeight); background-color: var(--pf-v6-c-nav--BackgroundColor); } .pf-v6-c-nav.pf-m-overflow-hidden { overflow: hidden; } .pf-v6-c-nav.pf-m-inset { --pf-v6-c-nav--PaddingInlineStart: var(--pf-t--global--spacer--md); --pf-v6-c-nav--PaddingInlineEnd: var(--pf-t--global--spacer--md); } .pf-v6-c-nav.pf-m-fill { flex-grow: 1; } .pf-v6-c-nav.pf-m-docked { --pf-v6-c-nav--PaddingBlockStart: 0; --pf-v6-c-nav--PaddingBlockEnd: 0; --pf-v6-c-nav__list--RowGap: var(--pf-v6-c-nav--m-docked__list--RowGap); --pf-v6-c-nav__link--PaddingInlineStart: var(--pf-v6-c-nav--m-docked__link--PaddingInlineStart); --pf-v6-c-nav__link--PaddingInlineEnd: var(--pf-v6-c-nav--m-docked__link--PaddingInlineEnd); --pf-v6-c-nav__link--hover--BackgroundColor: var(--pf-v6-c-nav--m-docked__link--hover--BackgroundColor); --pf-v6-c-nav__link--m-current--BackgroundColor: var(--pf-v6-c-nav--m-docked__link--m-current--BackgroundColor); width: 100%; } @media (min-width: 62rem) { .pf-v6-c-nav.pf-m-docked { width: fit-content; } .pf-v6-c-nav.pf-m-docked .pf-v6-c-nav__link-text { display: none; } } :is(.pf-v6-c-page__dock, .pf-v6-c-compass__dock).pf-m-text-expanded .pf-v6-c-nav.pf-m-docked, .pf-v6-c-nav.pf-m-docked.pf-m-text-expanded { width: 100%; } :is(.pf-v6-c-page__dock, .pf-v6-c-compass__dock).pf-m-text-expanded .pf-v6-c-nav.pf-m-docked .pf-v6-c-nav__link-text, .pf-v6-c-nav.pf-m-docked.pf-m-text-expanded .pf-v6-c-nav__link-text { display: revert; } .pf-v6-c-nav .pf-v6-c-menu { --pf-v6-c-menu--MinWidth: 100%; } .pf-v6-c-nav .pf-v6-c-menu.pf-m-drilldown, .pf-v6-c-nav .pf-v6-c-menu.pf-m-drilldown .pf-v6-c-menu { --pf-v6-c-menu--PaddingBlockStart: 0; --pf-v6-c-menu--PaddingBlockEnd: 0; --pf-v6-c-menu--BackgroundColor: var(--pf-v6-c-nav--BackgroundColor); --pf-v6-c-menu--BoxShadow: none; --pf-v6-c-menu__list-item--hover--BackgroundColor: var(--pf-v6-c-nav__link--hover--BackgroundColor); } .pf-v6-c-nav .pf-v6-c-menu.pf-m-drilldown .pf-v6-c-menu__list, .pf-v6-c-nav .pf-v6-c-menu.pf-m-drilldown .pf-v6-c-menu .pf-v6-c-menu__list { row-gap: var(--pf-v6-c-nav__subnav--RowGap); } .pf-v6-c-nav .pf-v6-c-menu.pf-m-drilldown .pf-v6-c-menu__list-item::before, .pf-v6-c-nav .pf-v6-c-menu.pf-m-drilldown .pf-v6-c-menu .pf-v6-c-menu__list-item::before { border-radius: var(--pf-v6-c-nav__link--BorderRadius); } [class^=pf-v6-c-nav][hidden] { display: none; } .pf-v6-c-nav__nav, .pf-v6-c-nav__list, .pf-v6-c-nav__subnav { --pf-v6-c-nav__item--RowGap--row-offset: calc(var(--pf-v6-c-nav__list--RowGap) / 2 * -1); --pf-v6-c-nav__link--clickable-inset--Block: var(--pf-v6-c-nav__item--RowGap--row-offset); --pf-v6-c-nav__button--RowGap--row-offset: calc(var(--pf-v6-c-nav__item--RowGap) * -1); } .pf-v6-c-nav__list { row-gap: var(--pf-v6-c-nav__list--RowGap); column-gap: var(--pf-v6-c-nav__list--ColumnGap); min-height: 0; } .pf-v6-c-nav__subnav { --pf-v6-c-nav__list--RowGap: var(--pf-v6-c-nav__subnav--RowGap); visibility: visible; max-height: 99999px; padding-block-start: var(--pf-v6-c-nav__subnav--PaddingBlockStart); padding-block-end: var(--pf-v6-c-nav__subnav--PaddingBlockEnd); padding-inline-start: var(--pf-v6-c-nav__subnav--PaddingInlineStart); overflow-y: clip; translate: 0 var(--pf-v6-c-nav__subnav--TranslateY); transition-delay: 0s, 0s, var(--pf-v6-c-nav__subnav--TransitionDelay--expand--focus, 0s), var(--pf-v6-c-nav__subnav--TransitionDelay--expand--focus, 0s), var(--pf-v6-c-nav__subnav--TransitionDelay--expand--focus, 0s), var(--pf-v6-c-nav__subnav--TransitionDelay--expand--focus, 0s); transition-timing-function: var(--pf-v6-c-nav__subnav--TransitionTimingFunction--expand); transition-duration: var(--pf-v6-c-nav__subnav--TransitionDuration--expand), var(--pf-v6-c-nav__subnav--TransitionDuration--expand--slide), 0s, 0s, 0s, 0s; transition-property: opacity, translate, visibility, max-height, padding-block-start, padding-block-end; } .pf-v6-c-nav__subnav[hidden] { --pf-v6-c-nav__subnav--TransitionDelay--expand--focus: var(--pf-v6-c-nav__subnav--TransitionDuration--expand); --pf-v6-c-nav__subnav--TransitionDuration--expand: var(--pf-v6-c-nav__subnav--TransitionDuration--collapse); --pf-v6-c-nav__subnav--TransitionDuration--expand--slide: var(--pf-v6-c-nav__subnav--TransitionDuration--collapse--slide); --pf-v6-c-nav__subnav--PaddingBlockStart: 0; --pf-v6-c-nav__subnav--PaddingBlockEnd: 0; --pf-v6-c-nav__subnav--TranslateY: var(--pf-v6-c-nav__subnav--hidden--TranslateY); display: grid; visibility: hidden; max-height: 0; opacity: 0; } .pf-v6-c-nav__item { position: relative; scroll-snap-align: var(--pf-v6-c-nav__item--ScrollSnapAlign); } .pf-v6-c-nav__item::before { position: absolute; inset-block-start: 0; inset-block-end: 0; inset-inline-start: var(--pf-v6-c-nav__item--accent--offset); width: var(--pf-v6-c-nav__item--accent--size); pointer-events: none; content: var(--pf-v6-c-nav__item--accent--content, ""); background-color: var(--pf-v6-c-nav__item--accent--color); border-radius: var(--pf-v6-c-nav__item--accent--BorderRadius); scale: 1 var(--pf-v6-c-nav__item--accent--ScaleY); transition-timing-function: var(--pf-v6-c-nav__item--accent--TransitionTimingFunction); transition-duration: var(--pf-v6-c-nav__item--accent--TransitionDuration); transition-property: scale; } .pf-v6-c-nav__item > .pf-v6-c-nav__link[button] { margin-block-end: var(--pf-v6-c-nav__button--RowGap--row-offset); } .pf-v6-c-nav__item.pf-m-expanded:last-child > .pf-v6-c-nav__subnav { margin-block-end: calc(var(--pf-v6-c-nav__subnav--PaddingBlockEnd) * -1); } .pf-v6-c-nav__item:has(> .pf-v6-c-nav__link.pf-m-current) { --pf-v6-c-nav__item--accent--ScaleY: var(--pf-v6-c-nav__item--current--accent--ScaleY); --pf-v6-c-nav__item--accent--TransitionDuration: var(--pf-v6-c-nav__item--current--accent--TransitionDuration); } .pf-v6-c-nav__section { row-gap: var(--pf-v6-c-nav__section--RowGap, var(--pf-v6-c-nav__list--RowGap)); } .pf-v6-c-nav__section-title { padding-block-start: var(--pf-v6-c-nav__section-title--PaddingBlockStart); padding-block-end: var(--pf-v6-c-nav__section-title--PaddingBlockEnd); padding-inline-start: var(--pf-v6-c-nav__section-title--PaddingInlineStart); padding-inline-end: var(--pf-v6-c-nav__section-title--PaddingInlineEnd); font-size: var(--pf-v6-c-nav__section-title--FontSize, inherit); font-weight: var(--pf-v6-c-nav__section-title--FontWeight); color: var(--pf-v6-c-nav__section-title--Color); } .pf-v6-c-nav__link { position: relative; display: flex; column-gap: var(--pf-v6-c-nav__link--ColumnGap); align-items: var(--pf-v6-c-nav__link--AlignItems); padding-block-start: var(--pf-v6-c-nav__link--PaddingBlockStart); padding-block-end: var(--pf-v6-c-nav__link--PaddingBlockEnd); padding-inline-start: var(--pf-v6-c-nav__link--PaddingInlineStart); padding-inline-end: var(--pf-v6-c-nav__link--PaddingInlineEnd); font-size: var(--pf-v6-c-nav__link--FontSize, inherit); font-weight: var(--pf-v6-c-nav__link--FontWeight, inherit); line-height: var(--pf-v6-c-nav__link--LineHeight, inherit); color: var(--pf-v6-c-nav__link--Color); text-align: start; text-decoration-line: none; background-color: var(--pf-v6-c-nav__link--BackgroundColor); border: none; border-radius: var(--pf-v6-c-nav__link--BorderRadius); transition-timing-function: var(--pf-v6-c-nav__link--TransitionTimingFunction--background-color), var(--pf-v6-c-nav__link--m-current--TransitionTimingFunction--color); transition-duration: var(--pf-v6-c-nav__link--TransitionDuration--background-color), var(--pf-v6-c-nav__link--m-current--TransitionDuration--color); transition-property: background-color, color; } .pf-v6-c-nav__link::after { position: absolute; inset: 0; pointer-events: none; content: ""; border: var(--pf-v6-c-nav__link--BorderWidth) solid var(--pf-v6-c-nav__link--BorderColor); border-radius: inherit; } .pf-v6-c-nav__link:hover, .pf-v6-c-nav__link.pf-m-hover, .pf-v6-c-nav__link:focus { --pf-v6-c-nav__link--BorderWidth: var(--pf-v6-c-nav__link--hover--BorderWidth); color: var(--pf-v6-c-nav__link--hover--Color); background-color: var(--pf-v6-c-nav__link--hover--BackgroundColor); } .pf-v6-c-nav__link.pf-m-current, .pf-v6-c-nav__link.pf-m-current:hover { --pf-v6-c-nav__link-icon--Color: var(--pf-v6-c-nav__link--m-current__link-icon--Color); --pf-v6-c-nav__link--BorderWidth: var(--pf-v6-c-nav__link--m-current--BorderWidth); color: var(--pf-v6-c-nav__link--m-current--Color); background-color: var(--pf-v6-c-nav__link--m-current--BackgroundColor); } .pf-v6-c-nav__link-icon { min-width: 1lh; color: var(--pf-v6-c-nav__link-icon--Color); text-align: center; } .pf-v6-c-nav__link-text { font-size: var(--pf-v6-c-nav__link-text--FontSize, inherit); } .pf-v6-c-nav__toggle { flex: none; align-self: start; margin-inline-start: auto; transform: translateY(var(--pf-v6-c-nav__toggle--TranslateY)); } .pf-v6-c-nav__toggle-icon { display: inline-block; transform: rotate(var(--pf-v6-c-nav__item__toggle-icon--Rotate)); transition-timing-function: var(--pf-v6-c-nav__item__toggle-icon--TransitionTimingFunction--transform); transition-duration: var(--pf-v6-c-nav__item__toggle-icon--TransitionDuration--transform); transition-property: transform; } :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-nav__toggle-icon { scale: -1 1; } .pf-v6-c-nav__item:where(.pf-m-flyout) .pf-v6-c-nav__toggle-icon { --pf-v6-c-nav__item--m-expanded__toggle-icon--Rotate: 0; } .pf-v6-c-nav__link:where([aria-expanded=true]) .pf-v6-c-nav__toggle-icon { transform: rotate(var(--pf-v6-c-nav__item--m-expanded__toggle-icon--Rotate)); } .pf-v6-c-nav__scroll-button { position: relative; } .pf-v6-c-nav__scroll-button::before { position: absolute; inset: 0; content: ""; } .pf-v6-c-nav__scroll-button:first-of-type .pf-v6-c-button { --pf-v6-c-button--BorderStartStartRadius: var(--pf-v6-c-nav__scroll-button--first-of-type--c-button--BorderStartStartRadius); --pf-v6-c-button--BorderEndStartRadius: var(--pf-v6-c-nav__scroll-button--first-of-type--c-button--BorderEndStartRadius); } .pf-v6-c-nav__scroll-button:first-of-type::before { border-inline-end: var(--pf-v6-c-nav__scroll-button--BorderWidth) solid var(--pf-v6-c-nav__scroll-button--BorderColor); } .pf-v6-c-nav__scroll-button:last-of-type .pf-v6-c-button { --pf-v6-c-button--BorderStartEndRadius: var(--pf-v6-c-nav__scroll-button--last-of-type--c-button--BorderStartEndRadius); --pf-v6-c-button--BorderEndEndRadius: var(--pf-v6-c-nav__scroll-button--last-of-type--c-button--BorderEndEndRadius); } .pf-v6-c-nav__scroll-button:last-of-type::before { border-inline-start: var(--pf-v6-c-nav__scroll-button--BorderWidth) solid var(--pf-v6-c-nav__scroll-button--BorderColor); } .pf-v6-c-nav__scroll-button .pf-v6-c-button { outline-offset: var(--pf-v6-c-nav--OutlineOffset); } :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-nav__scroll-button .pf-v6-c-button > * { scale: -1 1; } .pf-v6-c-nav:where(.pf-m-horizontal) { --pf-v6-c-nav__item--accent--content: none; padding: 0; overflow: hidden; } .pf-v6-c-nav:where(.pf-m-horizontal), .pf-v6-c-nav:where(.pf-m-horizontal) .pf-v6-c-nav__section, .pf-v6-c-nav:where(.pf-m-horizontal) .pf-v6-c-nav__subnav, .pf-v6-c-nav:where(.pf-m-horizontal) .pf-v6-c-nav__list, .pf-v6-c-nav:where(.pf-m-horizontal) .pf-v6-c-nav__item { display: flex; } .pf-v6-c-nav:where(.pf-m-horizontal) .pf-v6-c-nav__list { padding-block-start: var(--pf-v6-c-nav--m-horizontal__list--PaddingBlockStart); padding-block-end: var(--pf-v6-c-nav--m-horizontal__list--PaddingBlockEnd); padding-inline-start: var(--pf-v6-c-nav--m-horizontal__list--PaddingInlineStart); padding-inline-end: var(--pf-v6-c-nav--m-horizontal__list--PaddingInlineEnd); overflow-x: auto; white-space: nowrap; scroll-snap-type: var(--pf-v6-c-nav__list--ScrollSnapType); scroll-padding-inline-end: var(--pf-v6-c-nav--m-horizontal__list--PaddingInlineEnd); -webkit-overflow-scrolling: touch; } .pf-v6-c-nav:where(.pf-m-horizontal) .pf-v6-c-nav__list::-webkit-scrollbar { display: none; } .pf-v6-c-nav:where(.pf-m-horizontal) .pf-v6-c-nav__list { scrollbar-width: none; -ms-overflow-style: -ms-autohiding-scrollbar; } .pf-v6-c-nav:where(.pf-m-horizontal) .pf-v6-c-nav__link { outline-offset: var(--pf-v6-c-nav--OutlineOffset); } .pf-v6-c-nav:where(.pf-m-horizontal).pf-m-subnav { --pf-v6-c-nav--BackgroundColor: var(--pf-v6-c-nav--m-horizontal--m-subnav--BackgroundColor); --pf-v6-c-nav--m-horizontal__list--PaddingBlockStart: var(--pf-v6-c-nav--m-horizontal--m-subnav__list--PaddingBlockStart); --pf-v6-c-nav--m-horizontal__list--PaddingBlockEnd: var(--pf-v6-c-nav--m-horizontal--m-subnav__list--PaddingBlockEnd); --pf-v6-c-nav--m-horizontal__list--PaddingInlineStart: var(--pf-v6-c-nav--m-horizontal--m-subnav__list--PaddingInlineStart); --pf-v6-c-nav--m-horizontal__list--PaddingInlineEnd: var(--pf-v6-c-nav--m-horizontal--m-subnav__list--PaddingInlineEnd); --pf-v6-c-nav--m-horizontal--m-scrollable__list--PaddingInlineStart: var(--pf-v6-c-nav--m-horizontal--m-subnav--m-scrollable__list--PaddingInlineStart); --pf-v6-c-nav--m-horizontal--m-scrollable__list--PaddingInlineEnd: var(--pf-v6-c-nav--m-horizontal--m-subnav--m-scrollable__list--PaddingInlineEnd); --pf-v6-c-nav__link--PaddingBlockStart: var(--pf-v6-c-nav--m-horizontal--m-subnav__link--PaddingBlockStart); --pf-v6-c-nav__link--PaddingBlockEnd: var(--pf-v6-c-nav--m-horizontal--m-subnav__link--PaddingBlockEnd); border: var(--pf-v6-c-nav--m-horizontal--m-subnav--BorderWidth) solid var(--pf-v6-c-nav--m-horizontal--m-subnav--BorderColor); border-radius: var(--pf-v6-c-nav--m-horizontal--m-subnav--BorderRadius); } .pf-v6-c-nav:where(.pf-m-horizontal).pf-m-scrollable { --pf-v6-c-nav--m-horizontal__list--PaddingInlineStart: var(--pf-v6-c-nav--m-horizontal--m-scrollable__list--PaddingInlineStart); --pf-v6-c-nav--m-horizontal__list--PaddingInlineEnd: var(--pf-v6-c-nav--m-horizontal--m-scrollable__list--PaddingInlineEnd); } /* PatternFly component: Avatar/avatar */ .pf-v6-c-avatar { --pf-v6-c-avatar--BorderColor: transparent; --pf-v6-c-avatar--BorderWidth: 0; --pf-v6-c-avatar--BorderRadius: var(--pf-t--global--border--radius--pill); --pf-v6-c-avatar--Width: 2.25rem; --pf-v6-c-avatar--Height: 2.25rem; --pf-v6-c-avatar--FontSize: calc(2.25rem / 1.414); --pf-v6-c-avatar--m-sm--Width: 1.5rem; --pf-v6-c-avatar--m-sm--Height: 1.5rem; --pf-v6-c-avatar--m-sm--FontSize: calc(1.5rem / 1.414); --pf-v6-c-avatar--m-md--Width: 2.25rem; --pf-v6-c-avatar--m-md--Height: 2.25rem; --pf-v6-c-avatar--m-md--FontSize: calc(2.25rem / 1.414); --pf-v6-c-avatar--m-lg--Width: 4.5rem; --pf-v6-c-avatar--m-lg--Height: 4.5rem; --pf-v6-c-avatar--m-lg--FontSize: calc(4.5rem / 1.414); --pf-v6-c-avatar--m-xl--Width: 8rem; --pf-v6-c-avatar--m-xl--Height: 8rem; --pf-v6-c-avatar--m-xl--FontSize: calc(8rem / 1.414); --pf-v6-c-avatar--m-bordered--BorderColor: var(--pf-t--global--border--color--default); --pf-v6-c-avatar--m-bordered--BorderWidth: var(--pf-t--global--border--width--box--default); --pf-v6-c-avatar--m-colorful--BorderWidth: var(--pf-t--global--border--width--box--default); --pf-v6-c-avatar--m-gray--BackgroundColor: var(--pf-t--global--background--color--secondary--default); --pf-v6-c-avatar--m-gray--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--hover); --pf-v6-c-avatar--m-gray--BorderColor: var(--pf-t--global--border--color--default); --pf-v6-c-avatar--m-red--BackgroundColor: var(--pf-t--global--color--nonstatus--red--default); --pf-v6-c-avatar--m-red--Color: var(--pf-t--global--icon--color--nonstatus--on-red--default); --pf-v6-c-avatar--m-red--BorderColor: var(--pf-t--global--border--color--nonstatus--red--default); --pf-v6-c-avatar--m-orangered--BackgroundColor: var(--pf-t--global--color--nonstatus--orangered--default); --pf-v6-c-avatar--m-orangered--Color: var(--pf-t--global--icon--color--nonstatus--on-orangered--default); --pf-v6-c-avatar--m-orangered--BorderColor: var(--pf-t--global--border--color--nonstatus--orangered--default); --pf-v6-c-avatar--m-orange--BackgroundColor: var(--pf-t--global--color--nonstatus--orange--default); --pf-v6-c-avatar--m-orange--Color: var(--pf-t--global--icon--color--nonstatus--on-orange--default); --pf-v6-c-avatar--m-orange--BorderColor: var(--pf-t--global--border--color--nonstatus--orange--default); --pf-v6-c-avatar--m-yellow--BackgroundColor: var(--pf-t--global--color--nonstatus--yellow--default); --pf-v6-c-avatar--m-yellow--Color: var(--pf-t--global--icon--color--nonstatus--on-yellow--default); --pf-v6-c-avatar--m-yellow--BorderColor: var(--pf-t--global--border--color--nonstatus--yellow--default); --pf-v6-c-avatar--m-green--BackgroundColor: var(--pf-t--global--color--nonstatus--green--default); --pf-v6-c-avatar--m-green--Color: var(--pf-t--global--icon--color--nonstatus--on-green--default); --pf-v6-c-avatar--m-green--BorderColor: var(--pf-t--global--border--color--nonstatus--green--default); --pf-v6-c-avatar--m-teal--BackgroundColor: var(--pf-t--global--color--nonstatus--teal--default); --pf-v6-c-avatar--m-teal--Color: var(--pf-t--global--icon--color--nonstatus--on-teal--default); --pf-v6-c-avatar--m-teal--BorderColor: var(--pf-t--global--border--color--nonstatus--teal--default); --pf-v6-c-avatar--m-blue--BackgroundColor: var(--pf-t--global--color--nonstatus--blue--default); --pf-v6-c-avatar--m-blue--Color: var(--pf-t--global--icon--color--nonstatus--on-blue--default); --pf-v6-c-avatar--m-blue--BorderColor: var(--pf-t--global--border--color--nonstatus--blue--default); --pf-v6-c-avatar--m-purple--BackgroundColor: var(--pf-t--global--color--nonstatus--purple--default); --pf-v6-c-avatar--m-purple--Color: var(--pf-t--global--icon--color--nonstatus--on-purple--default); --pf-v6-c-avatar--m-purple--BorderColor: var(--pf-t--global--border--color--nonstatus--purple--default); --pf-v6-c-avatar__initials--FontSize: var(--pf-t--global--font--size--body--lg); --pf-v6-c-avatar__initials--FontWeight: var(--pf-t--global--font--weight--body--bold); --pf-v6-c-avatar--m-sm__initials--FontSize: var(--pf-t--global--font--size--body--sm); --pf-v6-c-avatar--m-sm__initials--FontWeight: var(--pf-t--global--font--weight--body--bold); --pf-v6-c-avatar--m-lg__initials--FontSize: var(--pf-t--global--font--size--2xl); --pf-v6-c-avatar--m-lg__initials--FontWeight: var(--pf-t--global--font--weight--heading--bold); --pf-v6-c-avatar--m-lg__initials--FontFamily: var(--pf-t--global--font--family--heading); --pf-v6-c-avatar--m-xl__initials--FontSize: var(--pf-t--global--font--size--4xl); --pf-v6-c-avatar--m-xl__initials--FontWeight: var(--pf-t--global--font--weight--heading--default); --pf-v6-c-avatar--m-xl__initials--FontFamily: var(--pf-t--global--font--family--heading); --pf-v6-c-avatar--m-gray__initials--Color: var(--pf-t--global--text--color--nonstatus--on-gray--hover); --pf-v6-c-avatar--m-red__initials--Color: var(--pf-t--global--text--color--nonstatus--on-red--default); --pf-v6-c-avatar--m-orangered__initials--Color: var(--pf-t--global--text--color--nonstatus--on-orangered--default); --pf-v6-c-avatar--m-orange__initials--Color: var(--pf-t--global--text--color--nonstatus--on-orange--default); --pf-v6-c-avatar--m-yellow__initials--Color: var(--pf-t--global--text--color--nonstatus--on-yellow--default); --pf-v6-c-avatar--m-green__initials--Color: var(--pf-t--global--text--color--nonstatus--on-green--default); --pf-v6-c-avatar--m-teal__initials--Color: var(--pf-t--global--text--color--nonstatus--on-teal--default); --pf-v6-c-avatar--m-blue__initials--Color: var(--pf-t--global--text--color--nonstatus--on-blue--default); --pf-v6-c-avatar--m-purple__initials--Color: var(--pf-t--global--text--color--nonstatus--on-purple--default); } .pf-v6-c-avatar { width: var(--pf-v6-c-avatar--Width); height: var(--pf-v6-c-avatar--Height); font-size: var(--pf-v6-c-avatar--FontSize); color: var(--pf-v6-c-avatar--Color, inherit); background-color: var(--pf-v6-c-avatar--BackgroundColor, transparent); border: var(--pf-v6-c-avatar--BorderWidth) solid var(--pf-v6-c-avatar--BorderColor); border-radius: var(--pf-v6-c-avatar--BorderRadius); } div.pf-v6-c-avatar { display: inline-flex; align-items: center; justify-content: center; overflow: clip; vertical-align: middle; } .pf-v6-c-avatar.pf-m-bordered { --pf-v6-c-avatar--BorderColor: var(--pf-v6-c-avatar--m-bordered--BorderColor); --pf-v6-c-avatar--BorderWidth: var(--pf-v6-c-avatar--m-bordered--BorderWidth); } .pf-v6-c-avatar.pf-m-sm { --pf-v6-c-avatar--Width: var(--pf-v6-c-avatar--m-sm--Width); } @media (min-width: 36rem) { .pf-v6-c-avatar.pf-m-sm { --pf-v6-c-avatar--Width: var(--pf-v6-c-avatar--m-sm--Width-on-sm, var(--pf-v6-c-avatar--m-sm--Width)); } } @media (min-width: 48rem) { .pf-v6-c-avatar.pf-m-sm { --pf-v6-c-avatar--Width: var(--pf-v6-c-avatar--m-sm--Width-on-md, var(--pf-v6-c-avatar--m-sm--Width-on-sm, var(--pf-v6-c-avatar--m-sm--Width))); } } @media (min-width: 62rem) { .pf-v6-c-avatar.pf-m-sm { --pf-v6-c-avatar--Width: var(--pf-v6-c-avatar--m-sm--Width-on-lg, var(--pf-v6-c-avatar--m-sm--Width-on-md, var(--pf-v6-c-avatar--m-sm--Width-on-sm, var(--pf-v6-c-avatar--m-sm--Width)))); } } @media (min-width: 75rem) { .pf-v6-c-avatar.pf-m-sm { --pf-v6-c-avatar--Width: var(--pf-v6-c-avatar--m-sm--Width-on-xl, var(--pf-v6-c-avatar--m-sm--Width-on-lg, var(--pf-v6-c-avatar--m-sm--Width-on-md, var(--pf-v6-c-avatar--m-sm--Width-on-sm, var(--pf-v6-c-avatar--m-sm--Width))))); } } @media (min-width: 90.625rem) { .pf-v6-c-avatar.pf-m-sm { --pf-v6-c-avatar--Width: var(--pf-v6-c-avatar--m-sm--Width-on-2xl, var(--pf-v6-c-avatar--m-sm--Width-on-xl, var(--pf-v6-c-avatar--m-sm--Width-on-lg, var(--pf-v6-c-avatar--m-sm--Width-on-md, var(--pf-v6-c-avatar--m-sm--Width-on-sm, var(--pf-v6-c-avatar--m-sm--Width)))))); } } .pf-v6-c-avatar.pf-m-sm { --pf-v6-c-avatar--Height: var(--pf-v6-c-avatar--m-sm--Height); } @media (min-width: 36rem) { .pf-v6-c-avatar.pf-m-sm { --pf-v6-c-avatar--Height: var(--pf-v6-c-avatar--m-sm--Height-on-sm, var(--pf-v6-c-avatar--m-sm--Height)); } } @media (min-width: 48rem) { .pf-v6-c-avatar.pf-m-sm { --pf-v6-c-avatar--Height: var(--pf-v6-c-avatar--m-sm--Height-on-md, var(--pf-v6-c-avatar--m-sm--Height-on-sm, var(--pf-v6-c-avatar--m-sm--Height))); } } @media (min-width: 62rem) { .pf-v6-c-avatar.pf-m-sm { --pf-v6-c-avatar--Height: var(--pf-v6-c-avatar--m-sm--Height-on-lg, var(--pf-v6-c-avatar--m-sm--Height-on-md, var(--pf-v6-c-avatar--m-sm--Height-on-sm, var(--pf-v6-c-avatar--m-sm--Height)))); } } @media (min-width: 75rem) { .pf-v6-c-avatar.pf-m-sm { --pf-v6-c-avatar--Height: var(--pf-v6-c-avatar--m-sm--Height-on-xl, var(--pf-v6-c-avatar--m-sm--Height-on-lg, var(--pf-v6-c-avatar--m-sm--Height-on-md, var(--pf-v6-c-avatar--m-sm--Height-on-sm, var(--pf-v6-c-avatar--m-sm--Height))))); } } @media (min-width: 90.625rem) { .pf-v6-c-avatar.pf-m-sm { --pf-v6-c-avatar--Height: var(--pf-v6-c-avatar--m-sm--Height-on-2xl, var(--pf-v6-c-avatar--m-sm--Height-on-xl, var(--pf-v6-c-avatar--m-sm--Height-on-lg, var(--pf-v6-c-avatar--m-sm--Height-on-md, var(--pf-v6-c-avatar--m-sm--Height-on-sm, var(--pf-v6-c-avatar--m-sm--Height)))))); } } .pf-v6-c-avatar.pf-m-md { --pf-v6-c-avatar--Width: var(--pf-v6-c-avatar--m-md--Width); } @media (min-width: 36rem) { .pf-v6-c-avatar.pf-m-md { --pf-v6-c-avatar--Width: var(--pf-v6-c-avatar--m-md--Width-on-sm, var(--pf-v6-c-avatar--m-md--Width)); } } @media (min-width: 48rem) { .pf-v6-c-avatar.pf-m-md { --pf-v6-c-avatar--Width: var(--pf-v6-c-avatar--m-md--Width-on-md, var(--pf-v6-c-avatar--m-md--Width-on-sm, var(--pf-v6-c-avatar--m-md--Width))); } } @media (min-width: 62rem) { .pf-v6-c-avatar.pf-m-md { --pf-v6-c-avatar--Width: var(--pf-v6-c-avatar--m-md--Width-on-lg, var(--pf-v6-c-avatar--m-md--Width-on-md, var(--pf-v6-c-avatar--m-md--Width-on-sm, var(--pf-v6-c-avatar--m-md--Width)))); } } @media (min-width: 75rem) { .pf-v6-c-avatar.pf-m-md { --pf-v6-c-avatar--Width: var(--pf-v6-c-avatar--m-md--Width-on-xl, var(--pf-v6-c-avatar--m-md--Width-on-lg, var(--pf-v6-c-avatar--m-md--Width-on-md, var(--pf-v6-c-avatar--m-md--Width-on-sm, var(--pf-v6-c-avatar--m-md--Width))))); } } @media (min-width: 90.625rem) { .pf-v6-c-avatar.pf-m-md { --pf-v6-c-avatar--Width: var(--pf-v6-c-avatar--m-md--Width-on-2xl, var(--pf-v6-c-avatar--m-md--Width-on-xl, var(--pf-v6-c-avatar--m-md--Width-on-lg, var(--pf-v6-c-avatar--m-md--Width-on-md, var(--pf-v6-c-avatar--m-md--Width-on-sm, var(--pf-v6-c-avatar--m-md--Width)))))); } } .pf-v6-c-avatar.pf-m-md { --pf-v6-c-avatar--Height: var(--pf-v6-c-avatar--m-md--Height); } @media (min-width: 36rem) { .pf-v6-c-avatar.pf-m-md { --pf-v6-c-avatar--Height: var(--pf-v6-c-avatar--m-md--Height-on-sm, var(--pf-v6-c-avatar--m-md--Height)); } } @media (min-width: 48rem) { .pf-v6-c-avatar.pf-m-md { --pf-v6-c-avatar--Height: var(--pf-v6-c-avatar--m-md--Height-on-md, var(--pf-v6-c-avatar--m-md--Height-on-sm, var(--pf-v6-c-avatar--m-md--Height))); } } @media (min-width: 62rem) { .pf-v6-c-avatar.pf-m-md { --pf-v6-c-avatar--Height: var(--pf-v6-c-avatar--m-md--Height-on-lg, var(--pf-v6-c-avatar--m-md--Height-on-md, var(--pf-v6-c-avatar--m-md--Height-on-sm, var(--pf-v6-c-avatar--m-md--Height)))); } } @media (min-width: 75rem) { .pf-v6-c-avatar.pf-m-md { --pf-v6-c-avatar--Height: var(--pf-v6-c-avatar--m-md--Height-on-xl, var(--pf-v6-c-avatar--m-md--Height-on-lg, var(--pf-v6-c-avatar--m-md--Height-on-md, var(--pf-v6-c-avatar--m-md--Height-on-sm, var(--pf-v6-c-avatar--m-md--Height))))); } } @media (min-width: 90.625rem) { .pf-v6-c-avatar.pf-m-md { --pf-v6-c-avatar--Height: var(--pf-v6-c-avatar--m-md--Height-on-2xl, var(--pf-v6-c-avatar--m-md--Height-on-xl, var(--pf-v6-c-avatar--m-md--Height-on-lg, var(--pf-v6-c-avatar--m-md--Height-on-md, var(--pf-v6-c-avatar--m-md--Height-on-sm, var(--pf-v6-c-avatar--m-md--Height)))))); } } .pf-v6-c-avatar.pf-m-lg { --pf-v6-c-avatar--Width: var(--pf-v6-c-avatar--m-lg--Width); } @media (min-width: 36rem) { .pf-v6-c-avatar.pf-m-lg { --pf-v6-c-avatar--Width: var(--pf-v6-c-avatar--m-lg--Width-on-sm, var(--pf-v6-c-avatar--m-lg--Width)); } } @media (min-width: 48rem) { .pf-v6-c-avatar.pf-m-lg { --pf-v6-c-avatar--Width: var(--pf-v6-c-avatar--m-lg--Width-on-md, var(--pf-v6-c-avatar--m-lg--Width-on-sm, var(--pf-v6-c-avatar--m-lg--Width))); } } @media (min-width: 62rem) { .pf-v6-c-avatar.pf-m-lg { --pf-v6-c-avatar--Width: var(--pf-v6-c-avatar--m-lg--Width-on-lg, var(--pf-v6-c-avatar--m-lg--Width-on-md, var(--pf-v6-c-avatar--m-lg--Width-on-sm, var(--pf-v6-c-avatar--m-lg--Width)))); } } @media (min-width: 75rem) { .pf-v6-c-avatar.pf-m-lg { --pf-v6-c-avatar--Width: var(--pf-v6-c-avatar--m-lg--Width-on-xl, var(--pf-v6-c-avatar--m-lg--Width-on-lg, var(--pf-v6-c-avatar--m-lg--Width-on-md, var(--pf-v6-c-avatar--m-lg--Width-on-sm, var(--pf-v6-c-avatar--m-lg--Width))))); } } @media (min-width: 90.625rem) { .pf-v6-c-avatar.pf-m-lg { --pf-v6-c-avatar--Width: var(--pf-v6-c-avatar--m-lg--Width-on-2xl, var(--pf-v6-c-avatar--m-lg--Width-on-xl, var(--pf-v6-c-avatar--m-lg--Width-on-lg, var(--pf-v6-c-avatar--m-lg--Width-on-md, var(--pf-v6-c-avatar--m-lg--Width-on-sm, var(--pf-v6-c-avatar--m-lg--Width)))))); } } .pf-v6-c-avatar.pf-m-lg { --pf-v6-c-avatar--Height: var(--pf-v6-c-avatar--m-lg--Height); } @media (min-width: 36rem) { .pf-v6-c-avatar.pf-m-lg { --pf-v6-c-avatar--Height: var(--pf-v6-c-avatar--m-lg--Height-on-sm, var(--pf-v6-c-avatar--m-lg--Height)); } } @media (min-width: 48rem) { .pf-v6-c-avatar.pf-m-lg { --pf-v6-c-avatar--Height: var(--pf-v6-c-avatar--m-lg--Height-on-md, var(--pf-v6-c-avatar--m-lg--Height-on-sm, var(--pf-v6-c-avatar--m-lg--Height))); } } @media (min-width: 62rem) { .pf-v6-c-avatar.pf-m-lg { --pf-v6-c-avatar--Height: var(--pf-v6-c-avatar--m-lg--Height-on-lg, var(--pf-v6-c-avatar--m-lg--Height-on-md, var(--pf-v6-c-avatar--m-lg--Height-on-sm, var(--pf-v6-c-avatar--m-lg--Height)))); } } @media (min-width: 75rem) { .pf-v6-c-avatar.pf-m-lg { --pf-v6-c-avatar--Height: var(--pf-v6-c-avatar--m-lg--Height-on-xl, var(--pf-v6-c-avatar--m-lg--Height-on-lg, var(--pf-v6-c-avatar--m-lg--Height-on-md, var(--pf-v6-c-avatar--m-lg--Height-on-sm, var(--pf-v6-c-avatar--m-lg--Height))))); } } @media (min-width: 90.625rem) { .pf-v6-c-avatar.pf-m-lg { --pf-v6-c-avatar--Height: var(--pf-v6-c-avatar--m-lg--Height-on-2xl, var(--pf-v6-c-avatar--m-lg--Height-on-xl, var(--pf-v6-c-avatar--m-lg--Height-on-lg, var(--pf-v6-c-avatar--m-lg--Height-on-md, var(--pf-v6-c-avatar--m-lg--Height-on-sm, var(--pf-v6-c-avatar--m-lg--Height)))))); } } .pf-v6-c-avatar.pf-m-xl { --pf-v6-c-avatar--Width: var(--pf-v6-c-avatar--m-xl--Width); } @media (min-width: 36rem) { .pf-v6-c-avatar.pf-m-xl { --pf-v6-c-avatar--Width: var(--pf-v6-c-avatar--m-xl--Width-on-sm, var(--pf-v6-c-avatar--m-xl--Width)); } } @media (min-width: 48rem) { .pf-v6-c-avatar.pf-m-xl { --pf-v6-c-avatar--Width: var(--pf-v6-c-avatar--m-xl--Width-on-md, var(--pf-v6-c-avatar--m-xl--Width-on-sm, var(--pf-v6-c-avatar--m-xl--Width))); } } @media (min-width: 62rem) { .pf-v6-c-avatar.pf-m-xl { --pf-v6-c-avatar--Width: var(--pf-v6-c-avatar--m-xl--Width-on-lg, var(--pf-v6-c-avatar--m-xl--Width-on-md, var(--pf-v6-c-avatar--m-xl--Width-on-sm, var(--pf-v6-c-avatar--m-xl--Width)))); } } @media (min-width: 75rem) { .pf-v6-c-avatar.pf-m-xl { --pf-v6-c-avatar--Width: var(--pf-v6-c-avatar--m-xl--Width-on-xl, var(--pf-v6-c-avatar--m-xl--Width-on-lg, var(--pf-v6-c-avatar--m-xl--Width-on-md, var(--pf-v6-c-avatar--m-xl--Width-on-sm, var(--pf-v6-c-avatar--m-xl--Width))))); } } @media (min-width: 90.625rem) { .pf-v6-c-avatar.pf-m-xl { --pf-v6-c-avatar--Width: var(--pf-v6-c-avatar--m-xl--Width-on-2xl, var(--pf-v6-c-avatar--m-xl--Width-on-xl, var(--pf-v6-c-avatar--m-xl--Width-on-lg, var(--pf-v6-c-avatar--m-xl--Width-on-md, var(--pf-v6-c-avatar--m-xl--Width-on-sm, var(--pf-v6-c-avatar--m-xl--Width)))))); } } .pf-v6-c-avatar.pf-m-xl { --pf-v6-c-avatar--Height: var(--pf-v6-c-avatar--m-xl--Height); } @media (min-width: 36rem) { .pf-v6-c-avatar.pf-m-xl { --pf-v6-c-avatar--Height: var(--pf-v6-c-avatar--m-xl--Height-on-sm, var(--pf-v6-c-avatar--m-xl--Height)); } } @media (min-width: 48rem) { .pf-v6-c-avatar.pf-m-xl { --pf-v6-c-avatar--Height: var(--pf-v6-c-avatar--m-xl--Height-on-md, var(--pf-v6-c-avatar--m-xl--Height-on-sm, var(--pf-v6-c-avatar--m-xl--Height))); } } @media (min-width: 62rem) { .pf-v6-c-avatar.pf-m-xl { --pf-v6-c-avatar--Height: var(--pf-v6-c-avatar--m-xl--Height-on-lg, var(--pf-v6-c-avatar--m-xl--Height-on-md, var(--pf-v6-c-avatar--m-xl--Height-on-sm, var(--pf-v6-c-avatar--m-xl--Height)))); } } @media (min-width: 75rem) { .pf-v6-c-avatar.pf-m-xl { --pf-v6-c-avatar--Height: var(--pf-v6-c-avatar--m-xl--Height-on-xl, var(--pf-v6-c-avatar--m-xl--Height-on-lg, var(--pf-v6-c-avatar--m-xl--Height-on-md, var(--pf-v6-c-avatar--m-xl--Height-on-sm, var(--pf-v6-c-avatar--m-xl--Height))))); } } @media (min-width: 90.625rem) { .pf-v6-c-avatar.pf-m-xl { --pf-v6-c-avatar--Height: var(--pf-v6-c-avatar--m-xl--Height-on-2xl, var(--pf-v6-c-avatar--m-xl--Height-on-xl, var(--pf-v6-c-avatar--m-xl--Height-on-lg, var(--pf-v6-c-avatar--m-xl--Height-on-md, var(--pf-v6-c-avatar--m-xl--Height-on-sm, var(--pf-v6-c-avatar--m-xl--Height)))))); } } .pf-v6-c-avatar.pf-m-sm { --pf-v6-c-avatar--FontSize: var(--pf-v6-c-avatar--m-sm--FontSize); --pf-v6-c-avatar__initials--FontSize: var(--pf-v6-c-avatar--m-sm__initials--FontSize); --pf-v6-c-avatar__initials--FontWeight: var(--pf-v6-c-avatar--m-sm__initials--FontWeight); } .pf-v6-c-avatar.pf-m-lg { --pf-v6-c-avatar--FontSize: var(--pf-v6-c-avatar--m-lg--FontSize); --pf-v6-c-avatar__initials--FontSize: var(--pf-v6-c-avatar--m-lg__initials--FontSize); --pf-v6-c-avatar__initials--FontWeight: var(--pf-v6-c-avatar--m-lg__initials--FontWeight); --pf-v6-c-avatar__initials--FontFamily: var(--pf-v6-c-avatar--m-lg__initials--FontFamily); } .pf-v6-c-avatar.pf-m-xl { --pf-v6-c-avatar--FontSize: var(--pf-v6-c-avatar--m-xl--FontSize); --pf-v6-c-avatar__initials--FontSize: var(--pf-v6-c-avatar--m-xl__initials--FontSize); --pf-v6-c-avatar__initials--FontWeight: var(--pf-v6-c-avatar--m-xl__initials--FontWeight); --pf-v6-c-avatar__initials--FontFamily: var(--pf-v6-c-avatar--m-xl__initials--FontFamily); } .pf-v6-c-avatar.pf-m-colorful { --pf-v6-c-avatar--BorderWidth: var(--pf-v6-c-avatar--m-colorful--BorderWidth); } .pf-v6-c-avatar.pf-m-red { --pf-v6-c-avatar--BackgroundColor: var(--pf-v6-c-avatar--m-red--BackgroundColor); --pf-v6-c-avatar--Color: var(--pf-v6-c-avatar--m-red--Color); --pf-v6-c-avatar--BorderColor: var(--pf-v6-c-avatar--m-red--BorderColor); --pf-v6-c-avatar__initials--Color: var(--pf-v6-c-avatar--m-red__initials--Color); } .pf-v6-c-avatar.pf-m-orangered { --pf-v6-c-avatar--BackgroundColor: var(--pf-v6-c-avatar--m-orangered--BackgroundColor); --pf-v6-c-avatar--Color: var(--pf-v6-c-avatar--m-orangered--Color); --pf-v6-c-avatar--BorderColor: var(--pf-v6-c-avatar--m-orangered--BorderColor); --pf-v6-c-avatar__initials--Color: var(--pf-v6-c-avatar--m-orangered__initials--Color); } .pf-v6-c-avatar.pf-m-orange { --pf-v6-c-avatar--BackgroundColor: var(--pf-v6-c-avatar--m-orange--BackgroundColor); --pf-v6-c-avatar--Color: var(--pf-v6-c-avatar--m-orange--Color); --pf-v6-c-avatar--BorderColor: var(--pf-v6-c-avatar--m-orange--BorderColor); --pf-v6-c-avatar__initials--Color: var(--pf-v6-c-avatar--m-orange__initials--Color); } .pf-v6-c-avatar.pf-m-yellow { --pf-v6-c-avatar--BackgroundColor: var(--pf-v6-c-avatar--m-yellow--BackgroundColor); --pf-v6-c-avatar--Color: var(--pf-v6-c-avatar--m-yellow--Color); --pf-v6-c-avatar--BorderColor: var(--pf-v6-c-avatar--m-yellow--BorderColor); --pf-v6-c-avatar__initials--Color: var(--pf-v6-c-avatar--m-yellow__initials--Color); } .pf-v6-c-avatar.pf-m-green { --pf-v6-c-avatar--BackgroundColor: var(--pf-v6-c-avatar--m-green--BackgroundColor); --pf-v6-c-avatar--Color: var(--pf-v6-c-avatar--m-green--Color); --pf-v6-c-avatar--BorderColor: var(--pf-v6-c-avatar--m-green--BorderColor); --pf-v6-c-avatar__initials--Color: var(--pf-v6-c-avatar--m-green__initials--Color); } .pf-v6-c-avatar.pf-m-teal { --pf-v6-c-avatar--BackgroundColor: var(--pf-v6-c-avatar--m-teal--BackgroundColor); --pf-v6-c-avatar--Color: var(--pf-v6-c-avatar--m-teal--Color); --pf-v6-c-avatar--BorderColor: var(--pf-v6-c-avatar--m-teal--BorderColor); --pf-v6-c-avatar__initials--Color: var(--pf-v6-c-avatar--m-teal__initials--Color); } .pf-v6-c-avatar.pf-m-blue { --pf-v6-c-avatar--BackgroundColor: var(--pf-v6-c-avatar--m-blue--BackgroundColor); --pf-v6-c-avatar--Color: var(--pf-v6-c-avatar--m-blue--Color); --pf-v6-c-avatar--BorderColor: var(--pf-v6-c-avatar--m-blue--BorderColor); --pf-v6-c-avatar__initials--Color: var(--pf-v6-c-avatar--m-blue__initials--Color); } .pf-v6-c-avatar.pf-m-purple { --pf-v6-c-avatar--BackgroundColor: var(--pf-v6-c-avatar--m-purple--BackgroundColor); --pf-v6-c-avatar--Color: var(--pf-v6-c-avatar--m-purple--Color); --pf-v6-c-avatar--BorderColor: var(--pf-v6-c-avatar--m-purple--BorderColor); --pf-v6-c-avatar__initials--Color: var(--pf-v6-c-avatar--m-purple__initials--Color); } .pf-v6-c-avatar.pf-m-gray { --pf-v6-c-avatar--BackgroundColor: var(--pf-v6-c-avatar--m-gray--BackgroundColor); --pf-v6-c-avatar--Color: var(--pf-v6-c-avatar--m-gray--Color); --pf-v6-c-avatar--BorderColor: var(--pf-v6-c-avatar--m-gray--BorderColor); --pf-v6-c-avatar__initials--Color: var(--pf-v6-c-avatar--m-gray__initials--Color); } .pf-v6-c-avatar__initials { font-family: var(--pf-v6-c-avatar__initials--FontFamily, revert); font-size: var(--pf-v6-c-avatar__initials--FontSize); font-weight: var(--pf-v6-c-avatar__initials--FontWeight); color: var(--pf-v6-c-avatar__initials--Color); } /* PatternFly component: Badge/badge */ .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); } /* PatternFly component: Menu/menu */ .pf-v6-c-menu { --pf-v6-c-menu--RowGap: var(--pf-t--global--spacer--xs); --pf-v6-c-menu--Width: auto; --pf-v6-c-menu--MinWidth: auto; --pf-v6-c-menu--PaddingBlockStart: var(--pf-t--global--spacer--xs); --pf-v6-c-menu--PaddingBlockEnd: var(--pf-t--global--spacer--xs); --pf-v6-c-menu--PaddingInlineStart: var(--pf-t--global--spacer--xs); --pf-v6-c-menu--PaddingInlineEnd: var(--pf-t--global--spacer--xs); --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: calc(var(--pf-v6-c-menu__item--BorderRadius) + var(--pf-v6-c-menu--PaddingBlockStart)); --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); } @media (prefers-reduced-motion: no-preference) { .pf-v6-c-menu { --pf-v6-c-menu--TransitionDuration: var(--pf-t--global--motion--duration--fade--default); } } .pf-v6-c-menu { --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--sm--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--xs); --pf-v6-c-menu__list--divider--MarginBlockEnd: var(--pf-t--global--spacer--xs); --pf-v6-c-menu__item--BorderRadius: var(--pf-t--global--border--radius--small); --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--md); --pf-v6-c-menu__item--PaddingInlineEnd: var(--pf-t--global--spacer--md); --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--md); --pf-v6-c-menu__header--PaddingInlineEnd: var(--pf-t--global--spacer--md); --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--md); --pf-v6-c-menu__group-title--PaddingInlineEnd: var(--pf-t--global--spacer--md); --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--md); --pf-v6-c-menu__breadcrumb--PaddingInlineEnd: var(--pf-t--global--spacer--md); --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--md); --pf-v6-c-menu__footer--PaddingInlineEnd: var(--pf-t--global--spacer--md); --pf-v6-c-menu__item-main--ColumnGap: var(--pf-t--global--spacer--sm); --pf-v6-c-menu__group-title--FontWeight: var(--pf-t--global--font--weight--body--bold); --pf-v6-c-menu__group-title--Color: var(--pf-t--global--text--color--regular); --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); } @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); } } .pf-v6-c-menu { --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); } @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); } } .pf-v6-c-menu { --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); } @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 { --pf-v6-c-menu--m-drilled-in--c-menu__list-item--m-current-path--c-menu--ZIndex: var(--pf-t--global--z-index--xs); } .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); padding-inline-start: var(--pf-v6-c-menu--PaddingInlineStart); padding-inline-end: var(--pf-v6-c-menu--PaddingInlineEnd); 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 { visibility: visible; overflow: hidden; 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 { visibility: hidden; overflow: visible; } .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: var(--pf-v6-c-menu__list-item--BorderWidth) solid var(--pf-v6-c-menu__list-item--BorderColor); border-radius: var(--pf-v6-c-menu__item--BorderRadius); 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; outline-offset: var(--pf-v6-c-menu--OutlineOffset); background-color: var(--pf-v6-c-menu__item--BackgroundColor); border: 0; border-radius: var(--pf-v6-c-menu__item--BorderRadius); --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); overflow-wrap: break-word; } .pf-v6-c-menu__item-check .pf-v6-c-check { --pf-v6-c-check__input--TranslateY: none; } :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-menu__item-toggle-icon { scale: -1 1; } .pf-v6-c-menu__item-toggle-icon { color: var(--pf-v6-c-menu__item-toggle-icon--Color, inherit); } .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); } /* PatternFly component: MenuToggle/menu-toggle */ .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(1lh + 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--control--default); --pf-v6-c-menu-toggle--BorderColor: var(--pf-t--global--border--color--control--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--action--default); --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--action--default); --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-form--BorderRadius: var(--pf-t--global--border--radius--control--form-element); --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--action--default); --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--action--plain--default); --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-plain--m-circle--BorderRadius: var(--pf-t--global--border--radius--pill); --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, revert); 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-form { --pf-v6-c-menu-toggle--BorderRadius: var(--pf-v6-c-menu-toggle--m-form--BorderRadius); } .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.pf-m-circle { --pf-v6-c-menu-toggle--BorderRadius: var(--pf-v6-c-menu-toggle--m-plain--m-circle--BorderRadius); } .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; } .pf-v6-c-menu-toggle.pf-m-docked { justify-content: flex-start; width: 100%; } .pf-v6-c-menu-toggle.pf-m-docked .pf-v6-c-menu-toggle__icon { min-width: 1lh; } @media (min-width: 62rem) { .pf-v6-c-menu-toggle.pf-m-docked { justify-content: center; width: auto; } .pf-v6-c-menu-toggle.pf-m-docked .pf-v6-c-menu-toggle__text, .pf-v6-c-menu-toggle.pf-m-docked .pf-v6-c-menu-toggle__controls { display: none; } } :is(.pf-v6-c-page__dock, .pf-v6-c-compass__dock).pf-m-text-expanded .pf-v6-c-menu-toggle.pf-m-docked, .pf-v6-c-menu-toggle.pf-m-text-expanded { justify-content: flex-start; width: 100%; } :is(.pf-v6-c-page__dock, .pf-v6-c-compass__dock).pf-m-text-expanded .pf-v6-c-menu-toggle.pf-m-docked .pf-v6-c-menu-toggle__text, :is(.pf-v6-c-page__dock, .pf-v6-c-compass__dock).pf-m-text-expanded .pf-v6-c-menu-toggle.pf-m-docked .pf-v6-c-menu-toggle__controls, .pf-v6-c-menu-toggle.pf-m-text-expanded .pf-v6-c-menu-toggle__text, .pf-v6-c-menu-toggle.pf-m-text-expanded .pf-v6-c-menu-toggle__controls { display: revert; } @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; rotate: var(--pf-v6-c-menu-toggle__icon--Rotate); 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); } .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); } /* PatternFly component: Button/button */ .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(1lh + 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--TextUnderlineOffset: var(--pf-t--global--text-decoration--offset--hover); --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-clicked--TextDecorationLine: none; --pf-v6-c-button--m-clicked--TextDecorationStyle: none; --pf-v6-c-button--m-clicked--TextDecorationColor: currentcolor; --pf-v6-c-button--m-clicked--TextUnderlineOffset: var(--pf-t--global--text-decoration--offset--default); --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--action--plain--default); --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--TextDecorationColor: var(--pf-t--global--text-decoration--color--default); --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--TextUnderlineOffset: var(--pf-t--global--text-decoration--offset--default); --pf-v6-c-button--m-link--m-inline--hover--TextDecorationColor: var(--pf-t--global--text-decoration--color--hover); --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--hover--TextUnderlineOffset: var(--pf-t--global--text-decoration--offset--hover); --pf-v6-c-button--m-link--m-inline--m-clicked--TextDecorationColor: var(--pf-t--global--text-decoration--color--hover); --pf-v6-c-button--m-link--m-inline--m-clicked--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--hover); --pf-v6-c-button--m-link--m-inline--m-clicked--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--hover); --pf-v6-c-button--m-link--m-inline--m-clicked--TextUnderlineOffset: var(--pf-t--global--text-decoration--offset--hover); --pf-v6-c-button--m-link--m-inline--TransitionProperty: color, text-underline-offset; --pf-v6-c-button--m-link--m-inline--TransitionDuration: var(--pf-t--global--motion--duration--fade--default), var(--pf-t--global--motion--duration--lg); --pf-v6-c-button--m-link--m-inline--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--accelerate), var(--pf-t--global--motion--timing-function--default); --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--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--m-clicked--Color: var(--pf-t--global--text--color--brand--clicked); --pf-v6-c-button--m-link--m-inline--m-clicked__icon--Color: var(--pf-t--global--icon--color--brand--clicked); --pf-v6-c-button--m-plain--BorderRadius: var(--pf-t--global--border--radius--action--plain--default); --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--control--form-element); --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--control--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--action--plain--default); --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--control--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--default); --pf-v6-c-button--m-display-lg--hover--TextDecorationColor: var(--pf-t--global--border--color--control--default); --pf-v6-c-button--m-display-lg--hover--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--hover); --pf-v6-c-button--m-display-lg--hover--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--hover); --pf-v6-c-button--m-display-lg--hover--TextUnderlineOffset: var(--pf-t--global--text-decoration--offset--hover); --pf-v6-c-button--m-display-lg--m-clicked--TextDecorationColor: var(--pf-t--global--border--color--control--default); --pf-v6-c-button--m-display-lg--m-clicked--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--hover); --pf-v6-c-button--m-display-lg--m-clicked--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--hover); --pf-v6-c-button--m-display-lg--m-clicked--TextUnderlineOffset: var(--pf-t--global--text-decoration--offset--hover); --pf-v6-c-button--m-display-lg--m-primary--Color: var(--pf-t--global--text--color--on-brand--accent--default); --pf-v6-c-button--m-display-lg--m-primary--BackgroundColor: var(--pf-t--global--color--brand--accent--default); --pf-v6-c-button--m-display-lg--m-primary__icon--Color: var(--pf-t--global--icon--color--on-brand--accent--default); --pf-v6-c-button--m-display-lg--m-primary--hover--Color: var(--pf-t--global--text--color--on-brand--accent--hover); --pf-v6-c-button--m-display-lg--m-primary--hover--BackgroundColor: var(--pf-t--global--color--brand--accent--hover); --pf-v6-c-button--m-display-lg--m-primary--hover__icon--Color: var(--pf-t--global--icon--color--on-brand--accent--hover); --pf-v6-c-button--m-display-lg--m-primary--m-clicked--Color: var(--pf-t--global--text--color--on-brand--accent--clicked); --pf-v6-c-button--m-display-lg--m-primary--m-clicked--BackgroundColor: var(--pf-t--global--color--brand--accent--clicked); --pf-v6-c-button--m-display-lg--m-primary--m-clicked__icon--Color: var(--pf-t--global--icon--color--on-brand--accent--clicked); --pf-v6-c-button--m-display-lg--m-primary--hover--TextDecorationColor: currentcolor; --pf-v6-c-button--m-display-lg--m-primary--m-clicked--TextDecorationColor: currentcolor; --pf-v6-c-button--m-display-lg--m-secondary--Color: var(--pf-t--global--text--color--regular); --pf-v6-c-button--m-display-lg--m-secondary--BorderColor: var(--pf-t--global--border--color--brand--accent--default); --pf-v6-c-button--m-display-lg--m-secondary__icon--Color: var(--pf-t--global--icon--color--brand--accent--default); --pf-v6-c-button--m-display-lg--m-secondary--hover--Color: var(--pf-t--global--text--color--regular); --pf-v6-c-button--m-display-lg--m-secondary--hover--BorderColor: var(--pf-t--global--border--color--brand--accent--hover); --pf-v6-c-button--m-display-lg--m-secondary--hover__icon--Color: var(--pf-t--global--icon--color--brand--accent--hover); --pf-v6-c-button--m-display-lg--m-secondary--m-clicked--Color: var(--pf-t--global--text--color--regular); --pf-v6-c-button--m-display-lg--m-secondary--m-clicked--BorderColor: var(--pf-t--global--border--color--brand--accent--clicked); --pf-v6-c-button--m-display-lg--m-secondary--m-clicked__icon--Color: var(--pf-t--global--icon--color--brand--accent--clicked); --pf-v6-c-button--m-display-lg--m-tertiary--hover--BorderColor: var(--pf-t--global--border--color--default); --pf-v6-c-button--m-display-lg--m-tertiary--m-clicked--BorderColor: var(--pf-t--global--border--color--default); --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--m-hamburger__icon--m-collapse--ScaleX: 1; --pf-v6-c-button--m-circle--BorderRadius: var(--pf-t--global--border--radius--pill); } .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, revert); 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; white-space: nowrap; 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); 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)); scale: var(--pf-v6-c-button--ScaleX) var(--pf-v6-c-button--ScaleY); 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); } .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); } 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-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--TransitionDuration: var(--pf-v6-c-button--m-link--m-inline--TransitionDuration); --pf-v6-c-button--TransitionTimingFunction: var(--pf-v6-c-button--m-link--m-inline--TransitionTimingFunction); --pf-v6-c-button--TransitionProperty: var(--pf-v6-c-button--m-link--m-inline--TransitionProperty); --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--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--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--TextDecorationColor: var(--pf-v6-c-button--m-link--m-inline--hover--TextDecorationColor); --pf-v6-c-button--m-clicked--TextDecorationLine: var(--pf-v6-c-button--m-link--m-inline--m-clicked--TextDecorationLine); --pf-v6-c-button--m-clicked--TextDecorationStyle: var(--pf-v6-c-button--m-link--m-inline--m-clicked--TextDecorationStyle); --pf-v6-c-button--m-clicked--TextDecorationColor: var(--pf-v6-c-button--m-link--m-inline--m-clicked--TextDecorationColor); --pf-v6-c-button--m-clicked--TextUnderlineOffset: var(--pf-v6-c-button--m-link--m-inline--m-clicked--TextUnderlineOffset); --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--m-link--m-clicked--Color: var(--pf-v6-c-button--m-link--m-inline--m-clicked--Color); --pf-v6-c-button--m-link--m-clicked__icon--Color: var(--pf-v6-c-button--m-link--m-inline--m-clicked__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; text-underline-offset: var(--pf-v6-c-button--m-link--m-inline--TextUnderlineOffset); outline-offset: 0.125rem; background: transparent; } .pf-v6-c-button.pf-m-link.pf-m-inline:hover, .pf-v6-c-button.pf-m-link.pf-m-inline:focus { --pf-v6-c-button--m-link--m-inline--TextUnderlineOffset: var(--pf-v6-c-button--m-link--m-inline--hover--TextUnderlineOffset); } .pf-v6-c-button.pf-m-link.pf-m-inline:active, .pf-v6-c-button.pf-m-link.pf-m-inline.pf-m-clicked { --pf-v6-c-button--m-link--m-inline--TextUnderlineOffset: var(--pf-v6-c-button--m-link--m-inline--m-clicked--TextUnderlineOffset); } .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-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--m-stateful--PaddingInlineEnd: var(--pf-v6-c-button--m-plain--PaddingInlineEnd); --pf-v6-c-button--m-stateful--PaddingInlineStart: var(--pf-v6-c-button--m-plain--PaddingInlineStart); --pf-v6-c-button--m-read--hover--BackgroundColor: var(--pf-v6-c-button--m-plain--hover--BackgroundColor); --pf-v6-c-button--m-read--m-clicked--BackgroundColor: var(--pf-v6-c-button--m-plain--m-clicked--BackgroundColor); --pf-v6-c-button--m-read--BackgroundColor: var(--pf-v6-c-button--m-plain--BackgroundColor); } .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-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-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--hover--TextDecorationColor: var(--pf-v6-c-button--m-display-lg--hover--TextDecorationColor); --pf-v6-c-button--hover--TextDecorationLine: var(--pf-v6-c-button--m-display-lg--hover--TextDecorationLine); --pf-v6-c-button--hover--TextDecorationStyle: var(--pf-v6-c-button--m-display-lg--hover--TextDecorationStyle); --pf-v6-c-button--hover--TextUnderlineOffset: var(--pf-v6-c-button--m-display-lg--hover--TextUnderlineOffset); --pf-v6-c-button--m-clicked--TextDecorationColor: var(--pf-v6-c-button--m-display-lg--m-clicked--TextDecorationColor); --pf-v6-c-button--m-clicked--TextDecorationLine: var(--pf-v6-c-button--m-display-lg--m-clicked--TextDecorationLine); --pf-v6-c-button--m-clicked--TextDecorationStyle: var(--pf-v6-c-button--m-display-lg--m-clicked--TextDecorationStyle); --pf-v6-c-button--m-clicked--TextUnderlineOffset: var(--pf-v6-c-button--m-display-lg--m-clicked--TextUnderlineOffset); --pf-v6-c-button--m-primary--Color: var(--pf-v6-c-button--m-display-lg--m-primary--Color); --pf-v6-c-button--m-primary--BackgroundColor: var(--pf-v6-c-button--m-display-lg--m-primary--BackgroundColor); --pf-v6-c-button--m-primary__icon--Color: var(--pf-v6-c-button--m-display-lg--m-primary__icon--Color); --pf-v6-c-button--m-primary--hover--Color: var(--pf-v6-c-button--m-display-lg--m-primary--hover--Color); --pf-v6-c-button--m-primary--hover--BackgroundColor: var(--pf-v6-c-button--m-display-lg--m-primary--hover--BackgroundColor); --pf-v6-c-button--m-primary--hover__icon--Color: var(--pf-v6-c-button--m-display-lg--m-primary--hover__icon--Color); --pf-v6-c-button--m-primary--m-clicked--Color: var(--pf-v6-c-button--m-display-lg--m-primary--m-clicked--Color); --pf-v6-c-button--m-primary--m-clicked--BackgroundColor: var(--pf-v6-c-button--m-display-lg--m-primary--m-clicked--BackgroundColor); --pf-v6-c-button--m-primary--m-clicked__icon--Color: var(--pf-v6-c-button--m-display-lg--m-primary--m-clicked__icon--Color); --pf-v6-c-button--m-secondary--Color: var(--pf-v6-c-button--m-display-lg--m-secondary--Color); --pf-v6-c-button--m-secondary--BorderColor: var(--pf-v6-c-button--m-display-lg--m-secondary--BorderColor); --pf-v6-c-button--m-secondary__icon--Color: var(--pf-v6-c-button--m-display-lg--m-secondary__icon--Color); --pf-v6-c-button--m-secondary--hover--Color: var(--pf-v6-c-button--m-display-lg--m-secondary--hover--Color); --pf-v6-c-button--m-secondary--hover--BorderColor: var(--pf-v6-c-button--m-display-lg--m-secondary--hover--BorderColor); --pf-v6-c-button--m-secondary--hover__icon--Color: var(--pf-v6-c-button--m-display-lg--m-secondary--hover__icon--Color); --pf-v6-c-button--m-secondary--m-clicked--Color: var(--pf-v6-c-button--m-display-lg--m-secondary--m-clicked--Color); --pf-v6-c-button--m-secondary--m-clicked--BorderColor: var(--pf-v6-c-button--m-display-lg--m-secondary--m-clicked--BorderColor); --pf-v6-c-button--m-secondary--m-clicked__icon--Color: var(--pf-v6-c-button--m-display-lg--m-secondary--m-clicked__icon--Color); --pf-v6-c-button--m-tertiary--hover--BorderColor: var(--pf-v6-c-button--m-display-lg--m-tertiary--hover--BorderColor); --pf-v6-c-button--m-tertiary--m-clicked--BorderColor: var(--pf-v6-c-button--m-display-lg--m-tertiary--m-clicked--BorderColor); } .pf-v6-c-button.pf-m-display-lg.pf-m-primary { --pf-v6-c-button--hover--TextDecorationColor: var(--pf-v6-c-button--m-display-lg--m-primary--hover--TextDecorationColor); --pf-v6-c-button--m-clicked--TextDecorationColor: var(--pf-v6-c-button--m-display-lg--m-primary--m-clicked--TextDecorationColor); } .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; } :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-button.pf-m-hamburger { --pf-v6-c-button--m-hamburger__icon--m-expand--ScaleX: 1; --pf-v6-c-button--m-hamburger__icon--m-collapse--ScaleX: -1; } .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: var(--pf-v6-c-button--m-hamburger__icon--m-collapse--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-collapse--ScaleX); } .pf-v6-c-button.pf-m-circle { --pf-v6-c-button--BorderRadius: var(--pf-v6-c-button--m-circle--BorderRadius); padding-inline: 0; } .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); text-underline-offset: var(--pf-v6-c-button--hover--TextUnderlineOffset); 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); text-decoration-line: var(--pf-v6-c-button--m-clicked--TextDecorationLine); text-decoration-style: var(--pf-v6-c-button--m-clicked--TextDecorationStyle); text-decoration-color: var(--pf-v6-c-button--m-clicked--TextDecorationColor); text-underline-offset: var(--pf-v6-c-button--m-clicked--TextUnderlineOffset); } .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.pf-m-docked { justify-content: flex-start; width: 100%; } .pf-v6-c-button.pf-m-docked .pf-v6-c-button__icon { min-width: 1lh; } @media (min-width: 62rem) { .pf-v6-c-button.pf-m-docked { justify-content: center; } .pf-v6-c-button.pf-m-docked .pf-v6-c-button__text { display: none; } } :is(.pf-v6-c-page__dock, .pf-v6-c-compass__dock).pf-m-text-expanded .pf-v6-c-button.pf-m-docked, .pf-v6-c-button.pf-m-text-expanded { justify-content: flex-start; width: 100%; } :is(.pf-v6-c-page__dock, .pf-v6-c-compass__dock).pf-m-text-expanded .pf-v6-c-button.pf-m-docked .pf-v6-c-button__text, .pf-v6-c-button.pf-m-text-expanded .pf-v6-c-button__text { display: revert; } .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); rotate: var(--pf-v6-c-button__icon--Rotate); scale: var(--pf-v6-c-button__icon--ScaleX) var(--pf-v6-c-button__icon--ScaleY); 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); } .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; } } /* PatternFly component: Spinner/spinner */ .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-m-no-motion .pf-v6-c-spinner { --pf-v6-c-spinner--AnimationDuration: 0s; } .pf-v6-c-spinner__path { width: 100%; height: 100%; stroke: var(--pf-v6-c-spinner--Color); stroke-width: var(--pf-v6-c-spinner--StrokeWidth); stroke-linecap: round; stroke-dasharray: 283; stroke-dashoffset: 280; 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); } } /* PatternFly component: Alert/alert */ .pf-v6-c-alert { --pf-v6-c-alert--BoxShadow: var(--pf-t--global--box-shadow--lg); --pf-v6-c-alert--BackgroundColor: var(--pf-t--global--background--color--floating--default); --pf-v6-c-alert--GridTemplateColumns: max-content 1fr max-content; --pf-v6-c-alert--GridTemplateAreas: "icon title action" ". description description" ". actiongroup actiongroup"; --pf-v6-c-alert--BorderWidth: var(--pf-t--global--border--width--box--status--default); --pf-v6-c-alert--BorderColor: transparent; --pf-v6-c-alert--BorderRadius: var(--pf-t--global--border--radius--medium); --pf-v6-c-alert--PaddingBlockStart: var(--pf-t--global--spacer--md); --pf-v6-c-alert--PaddingInlineEnd: var(--pf-t--global--spacer--md); --pf-v6-c-alert--PaddingBlockEnd: var(--pf-t--global--spacer--md); --pf-v6-c-alert--PaddingInlineStart: var(--pf-t--global--spacer--md); --pf-v6-c-alert--FontSize: var(--pf-t--global--font--size--body--default); --pf-v6-c-alert__toggle--MarginBlockStart: calc(-1 * var(--pf-t--global--spacer--control--vertical--default)); --pf-v6-c-alert__toggle--MarginBlockEnd: calc(-1 * var(--pf-t--global--spacer--control--vertical--default)); --pf-v6-c-alert__toggle--MarginInlineStart: calc(-1 * var(--pf-t--global--spacer--action--horizontal--plain--default)); --pf-v6-c-alert__toggle--MarginInlineEnd: var(--pf-t--global--spacer--sm); --pf-v6-c-alert__toggle-icon--Rotate: 0; --pf-v6-c-alert__toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default); --pf-v6-c-alert__toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--long); --pf-v6-c-alert__icon--Color: var(--pf-t--global--icon--color--regular); --pf-v6-c-alert__icon--MarginBlockStart: 0.25rem; --pf-v6-c-alert__icon--MarginInlineEnd: var(--pf-t--global--spacer--gap--text-to-element--default); --pf-v6-c-alert__icon--FontSize: var(--pf-t--global--icon--size--md); --pf-v6-c-alert__title--FontWeight: var(--pf-t--global--font--weight--body--bold); --pf-v6-c-alert__title--Color: var(--pf-t--global--text--color--regular); --pf-v6-c-alert__title--max-lines: 1; --pf-v6-c-alert__action--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) * -1); --pf-v6-c-alert__action--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) * -1); --pf-v6-c-alert__action--TranslateY: 0.125rem; --pf-v6-c-alert__action--MarginInlineEnd: calc(var(--pf-t--global--spacer--sm) * -1); --pf-v6-c-alert__description--PaddingBlockStart: var(--pf-t--global--spacer--xs); --pf-v6-c-alert__action-group--PaddingBlockStart-base: var(--pf-t--global--spacer--sm); --pf-v6-c-alert__action-group--PaddingBlockStart: var(--pf-v6-c-alert__action-group--PaddingBlockStart-base); --pf-v6-c-alert__description--action-group--PaddingBlockStart-base: var(--pf-t--global--spacer--sm); --pf-v6-c-alert__description--action-group--PaddingBlockStart: var(--pf-v6-c-alert__description--action-group--PaddingBlockStart-base); --pf-v6-c-alert__action-group__c-button--not-last-child--MarginInlineEnd: var(--pf-t--global--spacer--gap--action-to-action--default); --pf-v6-c-alert--m-custom--BorderColor: var(--pf-t--global--border--color--status--custom--default); --pf-v6-c-alert--m-custom__icon--Color: var(--pf-t--global--icon--color--status--custom--default); --pf-v6-c-alert--m-custom__title--Color: var(--pf-t--global--text--color--regular); --pf-v6-c-alert--m-success--BorderColor: var(--pf-t--global--border--color--status--success--default); --pf-v6-c-alert--m-success__icon--Color: var(--pf-t--global--icon--color--status--success--default); --pf-v6-c-alert--m-success__title--Color: var(--pf-t--global--text--color--regular); --pf-v6-c-alert--m-danger--BorderColor: var(--pf-t--global--border--color--status--danger--default); --pf-v6-c-alert--m-danger__icon--Color: var(--pf-t--global--icon--color--status--danger--default); --pf-v6-c-alert--m-danger__title--Color: var(--pf-t--global--text--color--regular); --pf-v6-c-alert--m-warning--BorderColor: var(--pf-t--global--border--color--status--warning--default); --pf-v6-c-alert--m-warning__icon--Color: var(--pf-t--global--icon--color--status--warning--default); --pf-v6-c-alert--m-warning__title--Color: var(--pf-t--global--text--color--regular); --pf-v6-c-alert--m-info--BorderColor: var(--pf-t--global--border--color--status--info--default); --pf-v6-c-alert--m-info__icon--Color: var(--pf-t--global--icon--color--status--info--default); --pf-v6-c-alert--m-info__title--Color: var(--pf-t--global--text--color--regular); --pf-v6-c-alert--m-inline--BackgroundColor: var(--pf-t--global--background--color--primary--default); --pf-v6-c-alert--m-inline--BoxShadow: none; --pf-v6-c-alert--m-inline--m-plain--BorderWidth: 0; --pf-v6-c-alert--m-inline--m-plain--BackgroundColor: transparent; --pf-v6-c-alert--m-inline--m-plain--PaddingBlockStart: 0; --pf-v6-c-alert--m-inline--m-plain--PaddingInlineEnd: 0; --pf-v6-c-alert--m-inline--m-plain--PaddingBlockEnd: 0; --pf-v6-c-alert--m-inline--m-plain--PaddingInlineStart: 0; --pf-v6-c-alert--m-expandable--GridTemplateColumns: auto max-content 1fr max-content; --pf-v6-c-alert--m-expandable--GridTemplateAreas: "toggle icon title action" ". . description description" ". . actiongroup actiongroup"; --pf-v6-c-alert--m-expandable__description--action-group--PaddingBlockStart: var(--pf-v6-c-alert__action-group--PaddingBlockStart-base); --pf-v6-c-alert--m-expanded__toggle-icon--Rotate: -180deg; --pf-v6-c-alert--m-expanded__description--action-group--PaddingBlockStart: var(--pf-v6-c-alert__description--action-group--PaddingBlockStart-base); } .pf-v6-c-alert { position: relative; display: grid; grid-template-areas: var(--pf-v6-c-alert--GridTemplateAreas); grid-template-columns: var(--pf-v6-c-alert--GridTemplateColumns); padding-block-start: var(--pf-v6-c-alert--PaddingBlockStart); padding-block-end: var(--pf-v6-c-alert--PaddingBlockEnd); padding-inline-start: var(--pf-v6-c-alert--PaddingInlineStart); padding-inline-end: var(--pf-v6-c-alert--PaddingInlineEnd); font-size: var(--pf-v6-c-alert--FontSize); background-color: var(--pf-v6-c-alert--BackgroundColor); border: var(--pf-v6-c-alert--BorderWidth) solid var(--pf-v6-c-alert--BorderColor); border-radius: var(--pf-v6-c-alert--BorderRadius); box-shadow: var(--pf-v6-c-alert--BoxShadow); } .pf-v6-c-alert.pf-m-custom { --pf-v6-c-alert--BorderColor: var(--pf-v6-c-alert--m-custom--BorderColor); --pf-v6-c-alert__icon--Color: var(--pf-v6-c-alert--m-custom__icon--Color); --pf-v6-c-alert__title--Color: var(--pf-v6-c-alert--m-custom__title--Color); } .pf-v6-c-alert.pf-m-success { --pf-v6-c-alert--BorderColor: var(--pf-v6-c-alert--m-success--BorderColor); --pf-v6-c-alert__icon--Color: var(--pf-v6-c-alert--m-success__icon--Color); --pf-v6-c-alert__title--Color: var(--pf-v6-c-alert--m-success__title--Color); } .pf-v6-c-alert.pf-m-danger { --pf-v6-c-alert--BorderColor: var(--pf-v6-c-alert--m-danger--BorderColor); --pf-v6-c-alert__icon--Color: var(--pf-v6-c-alert--m-danger__icon--Color); --pf-v6-c-alert__title--Color: var(--pf-v6-c-alert--m-danger__title--Color); } .pf-v6-c-alert.pf-m-warning { --pf-v6-c-alert--BorderColor: var(--pf-v6-c-alert--m-warning--BorderColor); --pf-v6-c-alert__icon--Color: var(--pf-v6-c-alert--m-warning__icon--Color); --pf-v6-c-alert__title--Color: var(--pf-v6-c-alert--m-warning__title--Color); } .pf-v6-c-alert.pf-m-info { --pf-v6-c-alert--BorderColor: var(--pf-v6-c-alert--m-info--BorderColor); --pf-v6-c-alert__icon--Color: var(--pf-v6-c-alert--m-info__icon--Color); --pf-v6-c-alert__title--Color: var(--pf-v6-c-alert--m-info__title--Color); } .pf-v6-c-alert.pf-m-inline { --pf-v6-c-alert--BoxShadow: var(--pf-v6-c-alert--m-inline--BoxShadow); --pf-v6-c-alert--BackgroundColor: var(--pf-v6-c-alert--m-inline--BackgroundColor); } .pf-v6-c-alert.pf-m-plain { --pf-v6-c-alert--BorderWidth: var(--pf-v6-c-alert--m-inline--m-plain--BorderWidth); --pf-v6-c-alert--BackgroundColor: var(--pf-v6-c-alert--m-inline--m-plain--BackgroundColor); --pf-v6-c-alert--PaddingBlockStart: var(--pf-v6-c-alert--m-inline--m-plain--PaddingBlockStart); --pf-v6-c-alert--PaddingInlineEnd: var(--pf-v6-c-alert--m-inline--m-plain--PaddingInlineEnd); --pf-v6-c-alert--PaddingBlockEnd: var(--pf-v6-c-alert--m-inline--m-plain--PaddingBlockEnd); --pf-v6-c-alert--PaddingInlineStart: var(--pf-v6-c-alert--m-inline--m-plain--PaddingInlineStart); } .pf-v6-c-alert.pf-m-expandable { --pf-v6-c-alert--GridTemplateColumns: var(--pf-v6-c-alert--m-expandable--GridTemplateColumns); --pf-v6-c-alert--GridTemplateAreas: var(--pf-v6-c-alert--m-expandable--GridTemplateAreas); --pf-v6-c-alert__description--action-group--PaddingBlockStart: var(--pf-v6-c-alert--m-expandable__description--action-group--PaddingBlockStart); } .pf-v6-c-alert.pf-m-expanded { --pf-v6-c-alert__toggle-icon--Rotate: var(--pf-v6-c-alert--m-expanded__toggle-icon--Rotate); --pf-v6-c-alert__description--action-group--PaddingBlockStart: var(--pf-v6-c-alert--m-expanded__description--action-group--PaddingBlockStart); } .pf-v6-c-alert__toggle { margin-block-start: var(--pf-v6-c-alert__toggle--MarginBlockStart); margin-block-end: var(--pf-v6-c-alert__toggle--MarginBlockEnd); margin-inline-start: var(--pf-v6-c-alert__toggle--MarginInlineStart); margin-inline-end: var(--pf-v6-c-alert__toggle--MarginInlineEnd); } :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-alert__toggle-icon { scale: -1 1; } .pf-v6-c-alert__toggle-icon { display: inline-block; transform: rotate(var(--pf-v6-c-alert__toggle-icon--Rotate)); transition: transform var(--pf-v6-c-alert__toggle-icon--TransitionDuration) var(--pf-v6-c-alert__toggle-icon--TransitionTimingFunction); } .pf-v6-c-alert__icon { grid-area: icon; align-self: baseline; margin-inline-end: var(--pf-v6-c-alert__icon--MarginInlineEnd); font-size: var(--pf-v6-c-alert__icon--FontSize); color: var(--pf-v6-c-alert__icon--Color); scale: 1.14; } .pf-v6-c-alert__title { grid-area: title; font-weight: var(--pf-v6-c-alert__title--FontWeight); color: var(--pf-v6-c-alert__title--Color); overflow-wrap: break-word; } .pf-v6-c-alert__title.pf-m-truncate { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: var(--pf-v6-c-alert__title--max-lines); } .pf-v6-c-alert__description { grid-area: description; padding-block-start: var(--pf-v6-c-alert__description--PaddingBlockStart); overflow-wrap: break-word; } .pf-v6-c-alert__description + .pf-v6-c-alert__action-group { --pf-v6-c-alert__action-group--PaddingBlockStart: var(--pf-v6-c-alert__description--action-group--PaddingBlockStart); } .pf-v6-c-alert__action { grid-area: action; margin-block-start: var(--pf-v6-c-alert__action--MarginBlockStart); margin-block-end: var(--pf-v6-c-alert__action--MarginBlockEnd); margin-inline-end: var(--pf-v6-c-alert__action--MarginInlineEnd); } .pf-v6-c-alert__action-group { grid-area: actiongroup; padding-block-start: var(--pf-v6-c-alert__action-group--PaddingBlockStart); } .pf-v6-c-alert__action-group > .pf-v6-c-button:not(:last-child) { margin-inline-end: var(--pf-v6-c-alert__action-group__c-button--not-last-child--MarginInlineEnd); } /* PatternFly component: Label/label */ .pf-v6-c-label { --pf-v6-c-label--PaddingBlockStart: var(--pf-t--global--spacer--xs); --pf-v6-c-label--PaddingInlineEnd: var(--pf-t--global--spacer--sm); --pf-v6-c-label--PaddingBlockEnd: var(--pf-t--global--spacer--xs); --pf-v6-c-label--PaddingInlineStart: var(--pf-t--global--spacer--sm); --pf-v6-c-label--MaxWidth: 100%; --pf-v6-c-label--MinWidth: calc((var(--pf-v6-c-label--FontSize) * var(--pf-t--global--font--line-height--body) + var(--pf-v6-c-label--PaddingBlockStart) + var(--pf-v6-c-label--PaddingBlockEnd))); --pf-v6-c-label--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular); --pf-v6-c-label--BorderColor: var(--pf-t--global--border--color--high-contrast); --pf-v6-c-label--BorderRadius: var(--pf-t--global--border--radius--pill); --pf-v6-c-label--FontSize: var(--pf-t--global--font--size--body--sm); --pf-v6-c-label--Gap: var(--pf-t--global--spacer--gap--text-to-element--compact); --pf-v6-c-label--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default); --pf-v6-c-label--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default); --pf-v6-c-label__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default); --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--hover); --pf-v6-c-label--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-gray--hover); --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--hover); --pf-v6-c-label--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--gray--default); --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--gray--hover); --pf-v6-c-label--m-blue--BackgroundColor: var(--pf-t--global--color--nonstatus--blue--default); --pf-v6-c-label--m-blue--Color: var(--pf-t--global--text--color--nonstatus--on-blue--default); --pf-v6-c-label--m-blue__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-blue--default); --pf-v6-c-label--m-blue--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--blue--hover); --pf-v6-c-label--m-blue--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-blue--hover); --pf-v6-c-label--m-blue--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-blue--hover); --pf-v6-c-label--m-blue--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--blue--default); --pf-v6-c-label--m-blue--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--blue--hover); --pf-v6-c-label--m-red--BackgroundColor: var(--pf-t--global--color--nonstatus--red--default); --pf-v6-c-label--m-red--Color: var(--pf-t--global--text--color--nonstatus--on-red--default); --pf-v6-c-label--m-red__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-red--default); --pf-v6-c-label--m-red--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--red--hover); --pf-v6-c-label--m-red--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-red--hover); --pf-v6-c-label--m-red--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-red--hover); --pf-v6-c-label--m-red--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--red--default); --pf-v6-c-label--m-red--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--red--hover); --pf-v6-c-label--m-orange--BackgroundColor: var(--pf-t--global--color--nonstatus--orange--default); --pf-v6-c-label--m-orange--Color: var(--pf-t--global--text--color--nonstatus--on-orange--default); --pf-v6-c-label--m-orange__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-orange--default); --pf-v6-c-label--m-orange--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--orange--hover); --pf-v6-c-label--m-orange--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-orange--hover); --pf-v6-c-label--m-orange--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-orange--hover); --pf-v6-c-label--m-orange--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--orange--default); --pf-v6-c-label--m-orange--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--orange--hover); --pf-v6-c-label--m-orangered--BackgroundColor: var(--pf-t--global--color--nonstatus--orangered--default); --pf-v6-c-label--m-orangered--Color: var(--pf-t--global--text--color--nonstatus--on-orangered--default); --pf-v6-c-label--m-orangered__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-orangered--default); --pf-v6-c-label--m-orangered--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--orangered--hover); --pf-v6-c-label--m-orangered--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-orangered--hover); --pf-v6-c-label--m-orangered--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-orangered--hover); --pf-v6-c-label--m-orangered--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--orangered--default); --pf-v6-c-label--m-orangered--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--orangered--hover); --pf-v6-c-label--m-yellow--BackgroundColor: var(--pf-t--global--color--nonstatus--yellow--default); --pf-v6-c-label--m-yellow--Color: var(--pf-t--global--text--color--nonstatus--on-yellow--default); --pf-v6-c-label--m-yellow__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-yellow--default); --pf-v6-c-label--m-yellow--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--yellow--hover); --pf-v6-c-label--m-yellow--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-yellow--hover); --pf-v6-c-label--m-yellow--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-yellow--hover); --pf-v6-c-label--m-yellow--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--yellow--default); --pf-v6-c-label--m-yellow--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--yellow--hover); --pf-v6-c-label--m-green--BackgroundColor: var(--pf-t--global--color--nonstatus--green--default); --pf-v6-c-label--m-green--Color: var(--pf-t--global--text--color--nonstatus--on-green--default); --pf-v6-c-label--m-green__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-green--default); --pf-v6-c-label--m-green--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--green--hover); --pf-v6-c-label--m-green--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-green--hover); --pf-v6-c-label--m-green--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-green--hover); --pf-v6-c-label--m-green--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--green--default); --pf-v6-c-label--m-green--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--green--hover); --pf-v6-c-label--m-teal--BackgroundColor: var(--pf-t--global--color--nonstatus--teal--default); --pf-v6-c-label--m-teal--Color: var(--pf-t--global--text--color--nonstatus--on-teal--default); --pf-v6-c-label--m-teal__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-teal--default); --pf-v6-c-label--m-teal--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--teal--hover); --pf-v6-c-label--m-teal--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-teal--hover); --pf-v6-c-label--m-teal--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-teal--hover); --pf-v6-c-label--m-teal--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--teal--default); --pf-v6-c-label--m-teal--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--teal--hover); --pf-v6-c-label--m-purple--BackgroundColor: var(--pf-t--global--color--nonstatus--purple--default); --pf-v6-c-label--m-purple--Color: var(--pf-t--global--text--color--nonstatus--on-purple--default); --pf-v6-c-label--m-purple__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-purple--default); --pf-v6-c-label--m-purple--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--purple--hover); --pf-v6-c-label--m-purple--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-purple--hover); --pf-v6-c-label--m-purple--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-purple--hover); --pf-v6-c-label--m-purple--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--purple--default); --pf-v6-c-label--m-purple--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--purple--hover); --pf-v6-c-label--m-success--BackgroundColor: var(--pf-t--global--color--status--success--default); --pf-v6-c-label--m-success--Color: var(--pf-t--global--text--color--status--on-success--default); --pf-v6-c-label--m-success__icon--Color: var(--pf-t--global--icon--color--status--on-success--default); --pf-v6-c-label--m-success--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--success--hover); --pf-v6-c-label--m-success--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-success--hover); --pf-v6-c-label--m-success--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-success--hover); --pf-v6-c-label--m-success--m-outline__icon--Color: var(--pf-t--global--icon--color--status--success--default); --pf-v6-c-label--m-success--m-outline--BorderColor: var(--pf-t--global--border--color--status--success--default); --pf-v6-c-label--m-success--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--success--hover); --pf-v6-c-label--m-success--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--success--hover); --pf-v6-c-label--m-warning--BackgroundColor: var(--pf-t--global--color--status--warning--default); --pf-v6-c-label--m-warning--Color: var(--pf-t--global--text--color--status--on-warning--default); --pf-v6-c-label--m-warning__icon--Color: var(--pf-t--global--icon--color--status--on-warning--default); --pf-v6-c-label--m-warning--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--warning--hover); --pf-v6-c-label--m-warning--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-warning--hover); --pf-v6-c-label--m-warning--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-warning--hover); --pf-v6-c-label--m-warning--m-outline__icon--Color: var(--pf-t--global--icon--color--status--warning--default); --pf-v6-c-label--m-warning--m-outline--BorderColor: var(--pf-t--global--border--color--status--warning--default); --pf-v6-c-label--m-warning--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--warning--hover); --pf-v6-c-label--m-warning--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--warning--hover); --pf-v6-c-label--m-danger--BackgroundColor: var(--pf-t--global--color--status--danger--default); --pf-v6-c-label--m-danger--Color: var(--pf-t--global--text--color--status--on-danger--default); --pf-v6-c-label--m-danger__icon--Color: var(--pf-t--global--icon--color--status--on-danger--default); --pf-v6-c-label--m-danger--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--danger--hover); --pf-v6-c-label--m-danger--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-danger--hover); --pf-v6-c-label--m-danger--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-danger--hover); --pf-v6-c-label--m-danger--m-outline__icon--Color: var(--pf-t--global--icon--color--status--danger--default); --pf-v6-c-label--m-danger--m-outline--BorderColor: var(--pf-t--global--border--color--status--danger--default); --pf-v6-c-label--m-danger--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--danger--hover); --pf-v6-c-label--m-danger--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--danger--hover); --pf-v6-c-label--m-info--BackgroundColor: var(--pf-t--global--color--status--info--default); --pf-v6-c-label--m-info--Color: var(--pf-t--global--text--color--status--on-info--default); --pf-v6-c-label--m-info__icon--Color: var(--pf-t--global--icon--color--status--on-info--default); --pf-v6-c-label--m-info--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--info--hover); --pf-v6-c-label--m-info--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-info--hover); --pf-v6-c-label--m-info--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-info--hover); --pf-v6-c-label--m-info--m-outline__icon--Color: var(--pf-t--global--icon--color--status--info--default); --pf-v6-c-label--m-info--m-outline--BorderColor: var(--pf-t--global--border--color--status--info--default); --pf-v6-c-label--m-info--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--info--hover); --pf-v6-c-label--m-info--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--info--hover); --pf-v6-c-label--m-custom--BackgroundColor: var(--pf-t--global--color--status--custom--default); --pf-v6-c-label--m-custom--Color: var(--pf-t--global--text--color--status--on-custom--default); --pf-v6-c-label--m-custom__icon--Color: var(--pf-t--global--icon--color--status--on-custom--default); --pf-v6-c-label--m-custom--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--custom--hover); --pf-v6-c-label--m-custom--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-custom--hover); --pf-v6-c-label--m-custom--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-custom--hover); --pf-v6-c-label--m-custom--m-outline__icon--Color: var(--pf-t--global--icon--color--status--custom--default); --pf-v6-c-label--m-custom--m-outline--BorderColor: var(--pf-t--global--border--color--status--custom--default); --pf-v6-c-label--m-custom--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--custom--hover); --pf-v6-c-label--m-custom--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--custom--hover); --pf-v6-c-label--m-clickable--hover--BorderWidth: var(--pf-t--global--border--width--action--hover); --pf-v6-c-label--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--high-contrast); --pf-v6-c-label--m-clickable__content--Cursor: pointer; --pf-v6-c-label--m-filled__actions--c-button__icon--Color: var(--pf-v6-c-label__icon--Color); --pf-v6-c-label--m-outline--BorderWidth: var(--pf-t--global--border--width--action--default); --pf-v6-c-label--m-outline--BackgroundColor: transparent; --pf-v6-c-label--m-outline--Color: var(--pf-t--global--text--color--regular); --pf-v6-c-label--m-outline__icon--Color: var(--pf-t--global--icon--color--regular); --pf-v6-c-label--m-outline--m-clickable--hover--BackgroundColor: transparent; --pf-v6-c-label--m-outline--m-clickable--hover--BorderWidth: var(--pf-t--global--border--width--action--hover); --pf-v6-c-label--m-outline--m-clickable--hover--Color: var(--pf-t--global--text--color--regular); --pf-v6-c-label--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--regular); --pf-v6-c-label--m-overflow--Color: var(--pf-t--global--text--color--brand--default); --pf-v6-c-label--m-overflow--BackgroundColor: var(--pf-t--global--background--color--action--plain--default); --pf-v6-c-label--m-overflow--BorderWidth: var(--pf-t--global--border--width--action--plain--default); --pf-v6-c-label--m-overflow--hover--Color: var(--pf-t--global--text--color--brand--hover); --pf-v6-c-label--m-overflow--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover); --pf-v6-c-label--m-overflow--hover--BorderWidth: var(--pf-t--global--border--width--action--plain--hover); --pf-v6-c-label--m-add--Color: var(--pf-t--global--text--color--brand--default); --pf-v6-c-label--m-add--BackgroundColor: transparent; --pf-v6-c-label--m-add--BorderColor: var(--pf-t--global--border--color--default); --pf-v6-c-label--m-add--BorderWidth: var(--pf-t--global--border--width--action--default); --pf-v6-c-label--m-add--hover--Color: var(--pf-t--global--text--color--brand--hover); --pf-v6-c-label--m-add--hover--BackgroundColor: transparent; --pf-v6-c-label--m-add--hover--BorderColor: var(--pf-t--global--border--color--hover); --pf-v6-c-label--m-add--hover--BorderWidth: var(--pf-t--global--border--width--action--hover); --pf-v6-c-label--m-compact--PaddingBlockStart: 0; --pf-v6-c-label--m-compact--PaddingInlineEnd: var(--pf-t--global--spacer--sm); --pf-v6-c-label--m-compact--PaddingBlockEnd: 0; --pf-v6-c-label--m-compact--PaddingInlineStart: var(--pf-t--global--spacer--sm); --pf-v6-c-label--m-compact--FontSize: var(--pf-t--global--font--size--body--sm); --pf-v6-c-label--m-compact--m-editable--TextUnderlineOffset: 0.0625rem; --pf-v6-c-label--m-compact--MinWidth: calc((var(--pf-v6-c-label--m-compact--FontSize) * var(--pf-t--global--font--line-height--body)) + (var(--pf-v6-c-label--m-compact--PaddingBlockStart) + var(--pf-v6-c-label--m-compact--PaddingBlockEnd))); --pf-v6-c-label__content--MaxWidth: 100%; --pf-v6-c-label__content--Gap: var(--pf-t--global--spacer--gap--text-to-element--compact); --pf-v6-c-label__content--Cursor: initial; --pf-v6-c-label__icon--FontSize: var(--pf-t--global--icon--size--font--body--sm); --pf-v6-c-label__text--MaxWidth: 100%; --pf-v6-c-label__actions--MarginInlineEnd: 0; --pf-v6-c-label__actions--c-button--FontSize: var(--pf-t--global--icon--size--font--body--sm); --pf-v6-c-label__actions--c-button--OutlineOffset: -0.1875rem; --pf-v6-c-label__actions--c-button--MarginBlockStart: 0; --pf-v6-c-label__actions--c-button--MarginBlockEnd: 0; --pf-v6-c-label__actions--c-button--PaddingBlockStart: 0; --pf-v6-c-label__actions--c-button--PaddingInlineEnd: 0; --pf-v6-c-label__actions--c-button--PaddingBlockEnd: 0; --pf-v6-c-label__actions--c-button--PaddingInlineStart: 0; --pf-v6-c-label--m-editable--TextDecorationLine: var(--pf-t--global--text-decoration--editable-text--line--default); --pf-v6-c-label--m-editable--TextDecorationStyle: var(--pf-t--global--text-decoration--editable-text--style--default); --pf-v6-c-label--m-editable--hover--TextDecorationLine: var(--pf-t--global--text-decoration--editable-text--line--hover); --pf-v6-c-label--m-editable--hover--TextDecorationStyle: var(--pf-t--global--text-decoration--editable-text--style--hover); --pf-v6-c-label--m-editable--TextUnderlineOffset: 0.25rem; --pf-v6-c-label--m-editable__content--MaxWidth: 16ch; --pf-v6-c-label--m-editable__content--Cursor: pointer; --pf-v6-c-label--m-editable--m-editable-active--TextDecorationLine: none; --pf-v6-c-label--m-editable--m-editable-active--BackgroundColor: transparent; --pf-v6-c-label--m-editable--m-editable-active--Color: var(--pf-t--global--text--color--regular); --pf-v6-c-label--m-editable--m-editable-active__content--Cursor: initial; --pf-v6-c-label--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default); --pf-v6-c-label--m-disabled--Color: var(--pf-t--global--text--color--on-disabled); --pf-v6-c-label--m-disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled); --pf-v6-c-label--m-disabled--c-button--disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled); } .pf-v6-c-label { position: relative; gap: var(--pf-v6-c-label--Gap); min-width: var(--pf-v6-c-label--MinWidth); max-width: var(--pf-v6-c-label--MaxWidth); padding-block-start: var(--pf-v6-c-label--PaddingBlockStart); padding-block-end: var(--pf-v6-c-label--PaddingBlockEnd); padding-inline-start: var(--pf-v6-c-label--PaddingInlineStart); padding-inline-end: var(--pf-v6-c-label--PaddingInlineEnd); font-size: var(--pf-v6-c-label--FontSize); white-space: nowrap; background: transparent; border: 0; border-radius: var(--pf-v6-c-label--BorderRadius); isolation: isolate; } .pf-v6-c-label.pf-m-blue { --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-blue--BackgroundColor); --pf-v6-c-label--Color: var(--pf-v6-c-label--m-blue--Color); --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-blue__icon--Color); --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-blue--m-clickable--hover--BackgroundColor); --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-blue--m-clickable--hover--Color); --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-blue--m-clickable--hover__icon--Color); --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-blue--m-outline--BorderColor); --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-blue--m-outline--m-clickable--hover--BorderColor); } .pf-v6-c-label.pf-m-red { --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-red--BackgroundColor); --pf-v6-c-label--Color: var(--pf-v6-c-label--m-red--Color); --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-red__icon--Color); --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-red--m-clickable--hover--BackgroundColor); --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-red--m-clickable--hover--Color); --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-red--m-clickable--hover__icon--Color); --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-red--m-outline--BorderColor); --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-red--m-outline--m-clickable--hover--BorderColor); } .pf-v6-c-label.pf-m-orange { --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-orange--BackgroundColor); --pf-v6-c-label--Color: var(--pf-v6-c-label--m-orange--Color); --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-orange__icon--Color); --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-orange--m-clickable--hover--BackgroundColor); --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-orange--m-clickable--hover--Color); --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-orange--m-clickable--hover__icon--Color); --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-orange--m-outline--BorderColor); --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-orange--m-outline--m-clickable--hover--BorderColor); } .pf-v6-c-label.pf-m-orangered { --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-orangered--BackgroundColor); --pf-v6-c-label--Color: var(--pf-v6-c-label--m-orangered--Color); --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-orangered__icon--Color); --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-orangered--m-clickable--hover--BackgroundColor); --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-orangered--m-clickable--hover--Color); --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-orangered--m-clickable--hover__icon--Color); --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-orangered--m-outline--BorderColor); --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-orangered--m-outline--m-clickable--hover--BorderColor); } .pf-v6-c-label.pf-m-yellow { --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-yellow--BackgroundColor); --pf-v6-c-label--Color: var(--pf-v6-c-label--m-yellow--Color); --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-yellow__icon--Color); --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-yellow--m-clickable--hover--BackgroundColor); --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-yellow--m-clickable--hover--Color); --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-yellow--m-clickable--hover__icon--Color); --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-yellow--m-outline--BorderColor); --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-yellow--m-outline--m-clickable--hover--BorderColor); } .pf-v6-c-label.pf-m-green { --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-green--BackgroundColor); --pf-v6-c-label--Color: var(--pf-v6-c-label--m-green--Color); --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-green__icon--Color); --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-green--m-clickable--hover--BackgroundColor); --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-green--m-clickable--hover--Color); --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-green--m-clickable--hover__icon--Color); --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-green--m-outline--BorderColor); --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-green--m-outline--m-clickable--hover--BorderColor); } .pf-v6-c-label.pf-m-teal { --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-teal--BackgroundColor); --pf-v6-c-label--Color: var(--pf-v6-c-label--m-teal--Color); --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-teal__icon--Color); --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-teal--m-clickable--hover--BackgroundColor); --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-teal--m-clickable--hover--Color); --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-teal--m-clickable--hover__icon--Color); --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-teal--m-outline--BorderColor); --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-teal--m-outline--m-clickable--hover--BorderColor); } .pf-v6-c-label.pf-m-purple { --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-purple--BackgroundColor); --pf-v6-c-label--Color: var(--pf-v6-c-label--m-purple--Color); --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-purple__icon--Color); --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-purple--m-clickable--hover--BackgroundColor); --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-purple--m-clickable--hover--Color); --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-purple--m-clickable--hover__icon--Color); --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-purple--m-outline--BorderColor); --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-purple--m-outline--m-clickable--hover--BorderColor); } .pf-v6-c-label.pf-m-success { --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-success--BackgroundColor); --pf-v6-c-label--Color: var(--pf-v6-c-label--m-success--Color); --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-success__icon--Color); --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-success--m-clickable--hover--BackgroundColor); --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-success--m-clickable--hover--Color); --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-success--m-clickable--hover__icon--Color); --pf-v6-c-label--m-outline__icon--Color: var(--pf-v6-c-label--m-success--m-outline__icon--Color); --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-success--m-outline--BorderColor); --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-success--m-outline--m-clickable--hover--BorderColor); --pf-v6-c-label--m-outline--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-success--m-outline--m-clickable--hover__icon--Color); } .pf-v6-c-label.pf-m-warning { --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-warning--BackgroundColor); --pf-v6-c-label--Color: var(--pf-v6-c-label--m-warning--Color); --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-warning__icon--Color); --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-warning--m-clickable--hover--BackgroundColor); --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-warning--m-clickable--hover--Color); --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-warning--m-clickable--hover__icon--Color); --pf-v6-c-label--m-outline__icon--Color: var(--pf-v6-c-label--m-warning--m-outline__icon--Color); --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-warning--m-outline--BorderColor); --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-warning--m-outline--m-clickable--hover--BorderColor); --pf-v6-c-label--m-outline--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-warning--m-outline--m-clickable--hover__icon--Color); } .pf-v6-c-label.pf-m-danger { --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-danger--BackgroundColor); --pf-v6-c-label--Color: var(--pf-v6-c-label--m-danger--Color); --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-danger__icon--Color); --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-danger--m-clickable--hover--BackgroundColor); --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-danger--m-clickable--hover--Color); --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-danger--m-clickable--hover__icon--Color); --pf-v6-c-label--m-outline__icon--Color: var(--pf-v6-c-label--m-danger--m-outline__icon--Color); --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-danger--m-outline--BorderColor); --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-danger--m-outline--m-clickable--hover--BorderColor); --pf-v6-c-label--m-outline--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-danger--m-outline--m-clickable--hover__icon--Color); } .pf-v6-c-label.pf-m-info { --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-info--BackgroundColor); --pf-v6-c-label--Color: var(--pf-v6-c-label--m-info--Color); --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-info__icon--Color); --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-info--m-clickable--hover--BackgroundColor); --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-info--m-clickable--hover--Color); --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-info--m-clickable--hover__icon--Color); --pf-v6-c-label--m-outline__icon--Color: var(--pf-v6-c-label--m-info--m-outline__icon--Color); --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-info--m-outline--BorderColor); --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-info--m-outline--m-clickable--hover--BorderColor); --pf-v6-c-label--m-outline--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-info--m-outline--m-clickable--hover__icon--Color); } .pf-v6-c-label.pf-m-custom { --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-custom--BackgroundColor); --pf-v6-c-label--Color: var(--pf-v6-c-label--m-custom--Color); --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-custom__icon--Color); --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-custom--m-clickable--hover--BackgroundColor); --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-custom--m-clickable--hover--Color); --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-custom--m-clickable--hover__icon--Color); --pf-v6-c-label--m-outline__icon--Color: var(--pf-v6-c-label--m-custom--m-outline__icon--Color); --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-custom--m-outline--BorderColor); --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-custom--m-outline--m-clickable--hover--BorderColor); --pf-v6-c-label--m-outline--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-success--m-outline--m-clickable--hover__icon--Color); } .pf-v6-c-label.pf-m-compact { --pf-v6-c-label--PaddingBlockStart: var(--pf-v6-c-label--m-compact--PaddingBlockStart); --pf-v6-c-label--PaddingInlineEnd: var(--pf-v6-c-label--m-compact--PaddingInlineEnd); --pf-v6-c-label--PaddingBlockEnd: var(--pf-v6-c-label--m-compact--PaddingBlockEnd); --pf-v6-c-label--PaddingInlineStart: var(--pf-v6-c-label--m-compact--PaddingInlineStart); --pf-v6-c-label--FontSize: var(--pf-v6-c-label--m-compact--FontSize); --pf-v6-c-label--MinWidth: var(--pf-v6-c-label--m-compact--MinWidth); --pf-v6-c-label--m-editable--TextUnderlineOffset: var(--pf-v6-c-label--m-compact--m-editable--TextUnderlineOffset); } .pf-v6-c-label.pf-m-filled .pf-v6-c-label__actions .pf-v6-c-button { --pf-v6-c-button__icon--Color: var(--pf-v6-c-label--m-filled__actions--c-button__icon--Color); } .pf-v6-c-label.pf-m-outline { --pf-v6-c-label--Color: var(--pf-v6-c-label--m-outline--Color); --pf-v6-c-label--BorderWidth: var(--pf-v6-c-label--m-outline--BorderWidth); --pf-v6-c-label--BorderColor: var(--pf-v6-c-label--m-outline--BorderColor); --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-outline--BackgroundColor); --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-outline__icon--Color); --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-outline--m-clickable--hover--BackgroundColor); --pf-v6-c-label--m-clickable--hover--BorderWidth: var(--pf-v6-c-label--m-outline--m-clickable--hover--BorderWidth); --pf-v6-c-label--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-outline--m-clickable--hover--BorderColor); --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-outline--m-clickable--hover--Color); --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-outline--m-clickable--hover__icon--Color); } .pf-v6-c-label.pf-m-editable { --pf-v6-c-label__content--MaxWidth: var(--pf-v6-c-label--m-editable__content--MaxWidth); --pf-v6-c-label__content--Cursor: var(--pf-v6-c-label--m-editable__content--Cursor); } .pf-v6-c-label.pf-m-editable .pf-v6-c-label__content:is(:hover, :focus) { --pf-v6-c-label--m-editable--TextDecorationLine: var(--pf-v6-c-label--m-editable--hover--TextDecorationLine); --pf-v6-c-label--m-editable--TextDecorationStyle: var(--pf-v6-c-label--m-editable--hover--TextDecorationStyle); } .pf-v6-c-label.pf-m-editable .pf-v6-c-label__text { text-decoration-line: var(--pf-v6-c-label--m-editable--TextDecorationLine); text-decoration-style: var(--pf-v6-c-label--m-editable--TextDecorationStyle); text-underline-offset: var(--pf-v6-c-label--m-editable--TextUnderlineOffset); } .pf-v6-c-label.pf-m-editable-active { --pf-v6-c-label--m-editable--TextDecorationLine: var(--pf-v6-c-label--m-editable--m-editable-active--TextDecorationLine); --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-editable--m-editable-active--BackgroundColor); --pf-v6-c-label--Color: var(--pf-v6-c-label--m-editable--m-editable-active--Color); --pf-v6-c-label__content--Cursor: var(--pf-v6-c-label--m-editable--m-editable-active__content--Cursor); } .pf-v6-c-label.pf-m-overflow { --pf-v6-c-label--Color: var(--pf-v6-c-label--m-overflow--Color); --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-overflow--BackgroundColor); --pf-v6-c-label--BorderWidth: var(--pf-v6-c-label--m-overflow--BorderWidth); } .pf-v6-c-label.pf-m-overflow:is(:hover, :focus) { --pf-v6-c-label--m-overflow--Color: var(--pf-v6-c-label--m-overflow--hover--Color); --pf-v6-c-label--m-overflow--BackgroundColor: var(--pf-v6-c-label--m-overflow--hover--BackgroundColor); --pf-v6-c-label--m-overflow--BorderWidth: var(--pf-v6-c-label--m-overflow--hover--BorderWidth); } .pf-v6-c-label.pf-m-add { --pf-v6-c-label--Color: var(--pf-v6-c-label--m-add--Color); --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-add--BackgroundColor); --pf-v6-c-label--BorderColor: var(--pf-v6-c-label--m-add--BorderColor); --pf-v6-c-label--BorderWidth: var(--pf-v6-c-label--m-add--BorderWidth); } .pf-v6-c-label.pf-m-add:is(:hover, :focus) { --pf-v6-c-label--m-add--Color: var(--pf-v6-c-label--m-add--hover--Color); --pf-v6-c-label--m-add--BackgroundColor: var(--pf-v6-c-label--m-add--hover--BackgroundColor); --pf-v6-c-label--m-add--BorderColor: var(--pf-v6-c-label--m-add--hover--BorderColor); --pf-v6-c-label--m-add--BorderWidth: var(--pf-v6-c-label--m-add--hover--BorderWidth); } .pf-v6-c-label.pf-m-clickable { --pf-v6-c-label__content--Cursor: var(--pf-v6-c-label--m-clickable__content--Cursor); } .pf-v6-c-label.pf-m-clickable .pf-v6-c-label__content, .pf-v6-c-label.pf-m-clickable .pf-v6-c-label__content:is(:hover, :focus) { text-decoration-line: none; } .pf-v6-c-label.pf-m-clickable .pf-v6-c-label__content:is(:hover, :focus) { --pf-v6-c-label--Color: var(--pf-v6-c-label--m-clickable--hover--Color); --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-clickable--hover__icon--Color); --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-clickable--hover--BackgroundColor); --pf-v6-c-label--BorderWidth: var(--pf-v6-c-label--m-clickable--hover--BorderWidth); --pf-v6-c-label--BorderColor: var(--pf-v6-c-label--m-clickable--hover--BorderColor); --pf-v6-c-label--m-outline--BorderWidth: var(--pf-v6-c-label--m-outline--m-clickable--hover--BorderWidth); --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-outline--m-clickable--hover--BorderColor); } .pf-v6-c-label.pf-m-clickable .pf-v6-c-label__content:is(:hover, :focus) ~ .pf-v6-c-label__actions .pf-v6-c-button { --pf-v6-c-label--m-filled__actions--c-button__icon--Color: var(--pf-v6-c-label--m-clickable--hover__icon--Color); } .pf-v6-c-label.pf-m-disabled { --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-disabled--BackgroundColor); --pf-v6-c-label--Color: var(--pf-v6-c-label--m-disabled--Color); --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-disabled__icon--Color); --pf-v6-c-label--BorderWidth: 0; pointer-events: none; } .pf-v6-c-label.pf-m-disabled .pf-v6-c-button { --pf-v6-c-button--m-plain--disabled__icon--Color: var(--pf-v6-c-label--m-disabled--c-button--disabled__icon--Color); } .pf-v6-c-label, .pf-v6-c-label__content { display: inline-flex; align-items: center; justify-content: center; } .pf-v6-c-label__text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: var(--pf-v6-c-label__text--MaxWidth); } .pf-v6-c-label__content { gap: var(--pf-v6-c-label__content--Gap); max-width: var(--pf-v6-c-label__content--MaxWidth); padding: 0; overflow: hidden; color: var(--pf-v6-c-label--Color); cursor: var(--pf-v6-c-label__content--Cursor, revert); background: transparent; border-width: 0; } .pf-v6-c-label__content::before { position: absolute; inset: 0; z-index: -1; pointer-events: none; content: ""; background-color: var(--pf-v6-c-label--BackgroundColor); border: var(--pf-v6-c-label--BorderWidth) solid var(--pf-v6-c-label--BorderColor); border-radius: var(--pf-v6-c-label--BorderRadius); } input.pf-v6-c-label__content { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pf-v6-c-label__icon { color: var(--pf-v6-c-label__icon--Color); } .pf-v6-c-label__actions { margin-inline-end: var(--pf-v6-c-label__actions--MarginInlineEnd); } .pf-v6-c-label.pf-m-compact .pf-v6-c-label__actions .pf-v6-c-button { --pf-v6-c-button--m-plain--m-no-padding--after--Inset: 0 calc(-0.125rem); } .pf-v6-c-label__actions .pf-v6-c-button { --pf-v6-c-button--FontSize: var(--pf-v6-c-label__actions--c-button--FontSize); --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockStart: var(--pf-v6-c-label__actions--c-button--PaddingBlockStart); --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineEnd: var(--pf-v6-c-label__actions--c-button--PaddingInlineEnd); --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockEnd: var(--pf-v6-c-label__actions--c-button--PaddingBlockEnd); --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineStart: var(--pf-v6-c-label__actions--c-button--PaddingInlineStart); margin-block-start: var(--pf-v6-c-label__actions--c-button--MarginBlockStart); margin-block-end: var(--pf-v6-c-label__actions--c-button--MarginBlockEnd); outline-offset: var(--pf-v6-c-label__actions--c-button--OutlineOffset); } /* PatternFly component: Divider/divider */ .pf-v6-c-divider { --pf-v6-c-divider--Display: flex; --pf-v6-c-divider--Color: var(--pf-t--global--border--color--default); --pf-v6-c-divider--Size: var(--pf-t--global--border--width--divider--default); --pf-v6-c-divider--before--FlexBasis: 100%; } .pf-v6-c-divider { flex-direction: row; width: 100%; height: var(--pf-v6-c-divider--Size); --pf-v6-hidden-visible--visible--Display: var(--pf-v6-c-divider--Display); --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-divider.pf-m-hidden { --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display); } @media screen and (min-width: 36rem) { .pf-v6-c-divider.pf-m-hidden-on-sm { --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display); } .pf-v6-c-divider.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-divider.pf-m-hidden-on-md { --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display); } .pf-v6-c-divider.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-divider.pf-m-hidden-on-lg { --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display); } .pf-v6-c-divider.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-divider.pf-m-hidden-on-xl { --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display); } .pf-v6-c-divider.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-divider.pf-m-hidden-on-2xl { --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display); } .pf-v6-c-divider.pf-m-visible-on-2xl { --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display); } } .pf-v6-c-divider { flex-shrink: 0; align-items: stretch; align-self: stretch; justify-content: center; border: 0; } .pf-v6-c-divider::before { flex-basis: var(--pf-v6-c-divider--before--FlexBasis); content: ""; background-color: var(--pf-v6-c-divider--Color); border-block-start: var(--pf-v6-c-divider--Size) solid transparent; border-inline-start: var(--pf-v6-c-divider--Size) solid transparent; } .pf-v6-c-divider.pf-m-horizontal { flex-direction: row; width: 100%; height: var(--pf-v6-c-divider--Size); } .pf-v6-c-divider.pf-m-vertical { flex-direction: column; width: var(--pf-v6-c-divider--Size); height: inherit; } .pf-v6-c-divider.pf-m-inset-none { --pf-v6-c-divider--before--FlexBasis: calc(100% - 0% * 2); } .pf-v6-c-divider.pf-m-inset-xs { --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2); } .pf-v6-c-divider.pf-m-inset-sm { --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2); } .pf-v6-c-divider.pf-m-inset-md { --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2); } .pf-v6-c-divider.pf-m-inset-lg { --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2); } .pf-v6-c-divider.pf-m-inset-xl { --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2); } .pf-v6-c-divider.pf-m-inset-2xl { --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2); } .pf-v6-c-divider.pf-m-inset-3xl { --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2); } @media (min-width: 36rem) { .pf-v6-c-divider.pf-m-horizontal-on-sm { flex-direction: row; width: 100%; height: var(--pf-v6-c-divider--Size); } } @media (min-width: 36rem) { .pf-v6-c-divider.pf-m-vertical-on-sm { flex-direction: column; width: var(--pf-v6-c-divider--Size); height: inherit; } } @media (min-width: 36rem) { .pf-v6-c-divider.pf-m-inset-none-on-sm { --pf-v6-c-divider--before--FlexBasis: 100%; } .pf-v6-c-divider.pf-m-inset-xs-on-sm { --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2); } .pf-v6-c-divider.pf-m-inset-sm-on-sm { --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2); } .pf-v6-c-divider.pf-m-inset-md-on-sm { --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2); } .pf-v6-c-divider.pf-m-inset-lg-on-sm { --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2); } .pf-v6-c-divider.pf-m-inset-xl-on-sm { --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2); } .pf-v6-c-divider.pf-m-inset-2xl-on-sm { --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2); } .pf-v6-c-divider.pf-m-inset-3xl-on-sm { --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2); } } @media (min-width: 48rem) { .pf-v6-c-divider.pf-m-horizontal-on-md { flex-direction: row; width: 100%; height: var(--pf-v6-c-divider--Size); } } @media (min-width: 48rem) { .pf-v6-c-divider.pf-m-vertical-on-md { flex-direction: column; width: var(--pf-v6-c-divider--Size); height: inherit; } } @media (min-width: 48rem) { .pf-v6-c-divider.pf-m-inset-none-on-md { --pf-v6-c-divider--before--FlexBasis: 100%; } .pf-v6-c-divider.pf-m-inset-xs-on-md { --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2); } .pf-v6-c-divider.pf-m-inset-sm-on-md { --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2); } .pf-v6-c-divider.pf-m-inset-md-on-md { --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2); } .pf-v6-c-divider.pf-m-inset-lg-on-md { --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2); } .pf-v6-c-divider.pf-m-inset-xl-on-md { --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2); } .pf-v6-c-divider.pf-m-inset-2xl-on-md { --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2); } .pf-v6-c-divider.pf-m-inset-3xl-on-md { --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2); } } @media (min-width: 62rem) { .pf-v6-c-divider.pf-m-horizontal-on-lg { flex-direction: row; width: 100%; height: var(--pf-v6-c-divider--Size); } } @media (min-width: 62rem) { .pf-v6-c-divider.pf-m-vertical-on-lg { flex-direction: column; width: var(--pf-v6-c-divider--Size); height: inherit; } } @media (min-width: 62rem) { .pf-v6-c-divider.pf-m-inset-none-on-lg { --pf-v6-c-divider--before--FlexBasis: 100%; } .pf-v6-c-divider.pf-m-inset-xs-on-lg { --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2); } .pf-v6-c-divider.pf-m-inset-sm-on-lg { --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2); } .pf-v6-c-divider.pf-m-inset-md-on-lg { --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2); } .pf-v6-c-divider.pf-m-inset-lg-on-lg { --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2); } .pf-v6-c-divider.pf-m-inset-xl-on-lg { --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2); } .pf-v6-c-divider.pf-m-inset-2xl-on-lg { --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2); } .pf-v6-c-divider.pf-m-inset-3xl-on-lg { --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2); } } @media (min-width: 75rem) { .pf-v6-c-divider.pf-m-horizontal-on-xl { flex-direction: row; width: 100%; height: var(--pf-v6-c-divider--Size); } } @media (min-width: 75rem) { .pf-v6-c-divider.pf-m-vertical-on-xl { flex-direction: column; width: var(--pf-v6-c-divider--Size); height: inherit; } } @media (min-width: 75rem) { .pf-v6-c-divider.pf-m-inset-none-on-xl { --pf-v6-c-divider--before--FlexBasis: 100%; } .pf-v6-c-divider.pf-m-inset-xs-on-xl { --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2); } .pf-v6-c-divider.pf-m-inset-sm-on-xl { --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2); } .pf-v6-c-divider.pf-m-inset-md-on-xl { --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2); } .pf-v6-c-divider.pf-m-inset-lg-on-xl { --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2); } .pf-v6-c-divider.pf-m-inset-xl-on-xl { --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2); } .pf-v6-c-divider.pf-m-inset-2xl-on-xl { --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2); } .pf-v6-c-divider.pf-m-inset-3xl-on-xl { --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2); } } @media (min-width: 90.625rem) { .pf-v6-c-divider.pf-m-horizontal-on-2xl { flex-direction: row; width: 100%; height: var(--pf-v6-c-divider--Size); } } @media (min-width: 90.625rem) { .pf-v6-c-divider.pf-m-vertical-on-2xl { flex-direction: column; width: var(--pf-v6-c-divider--Size); height: inherit; } } @media (min-width: 90.625rem) { .pf-v6-c-divider.pf-m-inset-none-on-2xl { --pf-v6-c-divider--before--FlexBasis: 100%; } .pf-v6-c-divider.pf-m-inset-xs-on-2xl { --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2); } .pf-v6-c-divider.pf-m-inset-sm-on-2xl { --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2); } .pf-v6-c-divider.pf-m-inset-md-on-2xl { --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2); } .pf-v6-c-divider.pf-m-inset-lg-on-2xl { --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2); } .pf-v6-c-divider.pf-m-inset-xl-on-2xl { --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2); } .pf-v6-c-divider.pf-m-inset-2xl-on-2xl { --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2); } .pf-v6-c-divider.pf-m-inset-3xl-on-2xl { --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2); } } /* PatternFly component: Tooltip/tooltip */ .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; overflow-wrap: 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)); } /* PatternFly component: Truncate/truncate */ .pf-v6-c-truncate { --pf-v6-c-truncate--MinWidth: 6ch; --pf-v6-c-truncate__start--MinWidth: 6ch; } .pf-v6-c-truncate { display: inline-grid; grid-auto-flow: column; align-items: baseline; min-width: var(--pf-v6-c-truncate--MinWidth); text-decoration: inherit; } .pf-v6-c-truncate.pf-m-fixed { display: inline; align-items: revert; min-width: revert; } .pf-v6-c-truncate__start, .pf-v6-c-truncate__end { overflow: hidden; text-overflow: ellipsis; white-space: pre; } .pf-v6-c-truncate__start { min-width: var(--pf-v6-c-truncate__start--MinWidth); } .pf-v6-c-truncate__end { direction: rtl; } :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-truncate__end { direction: ltr; } .pf-v6-c-truncate__start + .pf-v6-c-truncate__end { overflow: visible; direction: ltr; } :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-truncate__start + .pf-v6-c-truncate__end { direction: rtl; } @supports (-webkit-hyphens: none) { .pf-v6-c-truncate__end { direction: ltr; } :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-truncate__end { direction: rtl; } } /* PatternFly component: Backdrop/backdrop */ .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; } /* PatternFly component: Card/card */ .pf-v6-c-card { --pf-v6-c-card--BackgroundColor: var(--pf-t--global--background--color--primary--default); --pf-v6-c-card--BorderColor: var(--pf-t--global--border--color--subtle); --pf-v6-c-card--BorderStyle: solid; --pf-v6-c-card--BorderWidth: var(--pf-t--global--border--width--box--default); --pf-v6-c-card--BorderRadius: var(--pf-t--global--border--radius--medium); --pf-v6-c-card--first-child--PaddingBlockStart: var(--pf-t--global--spacer--lg); --pf-v6-c-card--child--PaddingInlineEnd: var(--pf-t--global--spacer--lg); --pf-v6-c-card--child--PaddingBlockEnd: var(--pf-t--global--spacer--lg); --pf-v6-c-card--child--PaddingInlineStart: var(--pf-t--global--spacer--lg); --pf-v6-c-card--c-divider--child--PaddingBlockStart: var(--pf-t--global--spacer--lg); --pf-v6-c-card__title--not--last-child--PaddingBlockEnd: var(--pf-t--global--spacer--md); --pf-v6-c-card__title-text--Color: var(--pf-t--global--text--color--regular); --pf-v6-c-card__title-text--FontFamily: var(--pf-t--global--font--family--heading); --pf-v6-c-card__title-text--FontSize: var(--pf-t--global--font--size--heading--xs); --pf-v6-c-card__title-text--FontWeight: var(--pf-t--global--font--weight--heading--default); --pf-v6-c-card__title-text--LineHeight: var(--pf-t--global--font--line-height--heading); --pf-v6-c-card__title-text--OverflowWrap: break-word; --pf-v6-c-card--c-button--disabled--Color: var(--pf-t--global--text--color--on-disabled); --pf-v6-c-card__body--FontSize: var(--pf-t--global--font--size--body--default); --pf-v6-c-card__footer--FontSize: var(--pf-t--global--font--size--body--default); --pf-v6-c-card__footer--Color: var(--pf-t--global--text--color--subtle); --pf-v6-c-card__actions--PaddingInlineStart: var(--pf-t--global--spacer--md); --pf-v6-c-card__actions--Gap: var(--pf-t--global--spacer--gap--action-to-action--default); --pf-v6-c-card__actions--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) * -1); --pf-v6-c-card__actions--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) * -1); --pf-v6-c-card__header--m-wrap--RowGap: var(--pf-t--global--spacer--sm); --pf-v6-c-card__header--m-wrap--ColumnGap: var(--pf-t--global--spacer--md); --pf-v6-c-card__header-toggle--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) * -1); --pf-v6-c-card__header-toggle--MarginInlineEnd: var(--pf-t--global--spacer--gap--text-to-element--default); --pf-v6-c-card__header-toggle--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) * -1); --pf-v6-c-card__header-toggle--MarginInlineStart: calc(var(--pf-t--global--spacer--action--horizontal--plain--default) * -1); --pf-v6-c-card__header-toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default); --pf-v6-c-card__header-toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default); --pf-v6-c-card--m-expanded__header-toggle-icon--Rotate: -180deg; --pf-v6-c-card--m-selectable--BorderWidth: var(--pf-t--global--border--width--box--default); --pf-v6-c-card--m-selectable--BorderColor: var(--pf-t--global--border--color--control--default); --pf-v6-c-card--m-clickable--m-current--BorderColor: var(--pf-t--global--border--color--clicked); --pf-v6-c-card--m-clickable--m-current--BorderWidth: var(--pf-t--global--border--width--box--clicked); --pf-v6-c-card--m-selectable--m-selected--BorderColor: var(--pf-t--global--border--color--clicked); --pf-v6-c-card--m-selectable--m-selected--BorderWidth: var(--pf-t--global--border--width--box--clicked); --pf-v6-c-card--m-selectable--hover--BorderColor: var(--pf-t--global--border--color--hover); --pf-v6-c-card--m-selectable--hover--BorderWidth: var(--pf-t--global--border--width--box--hover); --pf-v6-c-card--m-selectable--focus--BorderColor: var(--pf-t--global--border--color--hover); --pf-v6-c-card--m-selectable--focus--BorderWidth: var(--pf-t--global--border--width--box--hover); --pf-v6-c-card--m-selectable--m-selected--focus--BorderColor: var(--pf-t--global--border--color--clicked); --pf-v6-c-card--m-selectable--m-selected--focus--BorderWidth: var(--pf-t--global--border--width--box--clicked); --pf-v6-c-card--m-selectable--m-disabled__title-text--Color: var(--pf-t--global--text--color--on-disabled); --pf-v6-c-card--m-selectable--m-disabled__body--Color: var(--pf-t--global--text--color--on-disabled); --pf-v6-c-card--m-selectable--m-disabled__footer--Color: var(--pf-t--global--text--color--on-disabled); --pf-v6-c-card--m-selectable--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default); --pf-v6-c-card--m-selectable--m-disabled--BorderColor: transparent; --pf-v6-c-card--m-selectable--m-clickable--m-current--BorderColor: var(--pf-t--global--border--color--clicked); --pf-v6-c-card--m-selectable--m-clickable--m-current--BorderWidth: var(--pf-t--global--border--width--box--clicked); --pf-v6-c-card--m-compact__title-text--FontSize: var(--pf-t--global--font--size--heading--xs); --pf-v6-c-card--m-compact__body--FontSize: var(--pf-t--global--font--size--body--default); --pf-v6-c-card--m-compact__footer--FontSize: var(--pf-t--global--font--size--body--sm); --pf-v6-c-card--m-compact--first-child--PaddingBlockStart: var(--pf-t--global--spacer--md); --pf-v6-c-card--m-compact--child--PaddingInlineEnd: var(--pf-t--global--spacer--md); --pf-v6-c-card--m-compact--child--PaddingBlockEnd: var(--pf-t--global--spacer--md); --pf-v6-c-card--m-compact--child--PaddingInlineStart: var(--pf-t--global--spacer--md); --pf-v6-c-card--m-compact--c-divider--child--PaddingBlockStart: var(--pf-t--global--spacer--md); --pf-v6-c-card--m-compact__title--not--last-child--PaddingBlockEnd: var(--pf-t--global--spacer--sm); --pf-v6-c-card--m-display-lg__title-text--FontSize: var(--pf-t--global--font--size--heading--md); --pf-v6-c-card--m-display-lg__body--FontSize: var(--pf-t--global--font--size--body--lg); --pf-v6-c-card--m-display-lg__footer--FontSize: var(--pf-t--global--font--size--body--default); --pf-v6-c-card--m-display-lg--first-child--PaddingBlockStart: var(--pf-t--global--spacer--xl); --pf-v6-c-card--m-display-lg--child--PaddingInlineEnd: var(--pf-t--global--spacer--xl); --pf-v6-c-card--m-display-lg--child--PaddingBlockEnd: var(--pf-t--global--spacer--xl); --pf-v6-c-card--m-display-lg--child--PaddingInlineStart: var(--pf-t--global--spacer--xl); --pf-v6-c-card--m-display-lg--c-divider--child--PaddingBlockStart: var(--pf-t--global--spacer--xl); --pf-v6-c-card--m-display-lg__title--not--last-child--PaddingBlockEnd: var(--pf-t--global--spacer--lg); --pf-v6-c-card--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default); --pf-v6-c-card--m-full-height--Height: 100%; --pf-v6-c-card--m-plain--BorderColor: transparent; --pf-v6-c-card--m-plain--BackgroundColor: transparent; --pf-v6-c-card__header--m-toggle-right--toggle--MarginInlineEnd: calc(var(--pf-t--global--spacer--action--horizontal--plain--default) * -1); --pf-v6-c-card__header--m-toggle-right--toggle--MarginInlineStart: var(--pf-t--global--spacer--gap--text-to-element--default); --pf-v6-c-card--m-as-tile--BackgroundColor: var(--pf-t--global--background--color--control--default); --pf-v6-c-card--m-as-tile--BorderColor: var(--pf-t--global--border--color--control--default); --pf-v6-c-card--m-glass--BorderColor: var(--pf-t--global--border--color--glass--default); --pf-v6-c-card--m-glass--BorderWidth: var(--pf-t--global--border--width--glass--default); --pf-v6-c-card--m-glass--BoxShadow: var(--pf-t--global--box-shadow--glass--default); --pf-v6-c-card--m-glass--BackdropFilter: var(--pf-t--global--background--filter--glass--blur--primary); --pf-v6-c-card--m-glass--BackgroundColor: var(--pf-t--global--background--color--glass--primary--default); } .pf-v6-c-card { position: relative; display: flex; flex-direction: column; overflow: auto; background-color: var(--pf-v6-c-card--BackgroundColor); border: 0; border-radius: var(--pf-v6-c-card--BorderRadius); } .pf-v6-c-card::before { position: absolute; inset: 0; pointer-events: none; content: ""; border: var(--pf-v6-c-card--BorderColor) var(--pf-v6-c-card--BorderStyle) var(--pf-v6-c-card--BorderWidth); border-radius: inherit; } :where(.pf-v6-theme-glass) .pf-v6-c-card.pf-m-glass { --pf-v6-c-card--BackgroundColor: var(--pf-v6-c-card--m-glass--BackgroundColor); --pf-v6-c-card--BorderColor: var(--pf-v6-c-card--m-glass--BorderColor); --pf-v6-c-card--BorderWidth: var(--pf-v6-c-card--m-glass--BorderWidth); box-shadow: var(--pf-v6-c-card--m-glass--BoxShadow); backdrop-filter: var(--pf-v6-c-card--m-glass--BackdropFilter); } .pf-v6-c-card.pf-m-selectable .pf-v6-c-card__selectable-actions :is(.pf-v6-c-check, .pf-v6-c-radio) { gap: 0; } .pf-v6-c-card.pf-m-selectable, .pf-v6-c-card.pf-m-clickable { --pf-v6-c-card--BorderColor: var(--pf-v6-c-card--m-selectable--BorderColor); isolation: isolate; } .pf-v6-c-card.pf-m-selectable::before, .pf-v6-c-card.pf-m-clickable::before { border: none; } .pf-v6-c-card.pf-m-current { --pf-v6-c-card--BorderColor: var(--pf-v6-c-card--m-clickable--m-current--BorderColor); --pf-v6-c-card--BorderWidth: var(--pf-v6-c-card--m-clickable--m-current--BorderWidth); --pf-v6-c-card--m-selectable--hover--BorderColor: var(--pf-v6-c-card--m-clickable--m-current--BorderColor); --pf-v6-c-card--m-selectable--focus--BorderColor: var(--pf-v6-c-card--m-clickable--m-current--BorderColor); } .pf-v6-c-card.pf-m-selectable.pf-m-clickable .pf-v6-c-card__selectable-actions :is(.pf-v6-c-check__label, .pf-v6-c-radio__label) { position: unset; } .pf-v6-c-card.pf-m-selectable.pf-m-clickable .pf-v6-c-card__selectable-actions :is(.pf-v6-c-check__label, .pf-v6-c-radio__label)::before { position: absolute; inset: 0; cursor: pointer; } .pf-v6-c-card.pf-m-selectable.pf-m-clickable .pf-v6-c-card__selectable-actions :is(.pf-v6-c-check__input, .pf-v6-c-radio__input):where(:focus-visible) ~ :is(.pf-v6-c-check__label, .pf-v6-c-radio__label) { --pf-v6-c-card--BackgroundColor: revert; --pf-v6-c-card--BorderColor: revert; } .pf-v6-c-card.pf-m-selectable.pf-m-clickable .pf-v6-c-card__selectable-actions :is(.pf-v6-c-check__input, .pf-v6-c-radio__input):where(:checked) ~ :is(.pf-v6-c-check__label, .pf-v6-c-radio__label), .pf-v6-c-card.pf-m-selectable.pf-m-clickable.pf-m-selected { --pf-v6-c-card--BorderColor: revert; --pf-v6-c-card--m-selectable--BorderWidth: revert; } .pf-v6-c-card.pf-m-selectable.pf-m-clickable.pf-m-current { --pf-v6-c-card--BorderColor: var(--pf-v6-c-card--m-selectable--m-clickable--m-current--BorderColor); --pf-v6-c-card--BorderWidth: var(--pf-v6-c-card--m-selectable--m-clickable--m-current--BorderWidth); } .pf-v6-c-card.pf-m-selectable.pf-m-clickable .pf-v6-c-card__selectable-actions :is(.pf-v6-c-check__input, .pf-v6-c-radio__input):where(:disabled) ~ :is(.pf-v6-c-check__label, .pf-v6-c-radio__label), .pf-v6-c-card.pf-m-selectable.pf-m-clickable.pf-m-disabled { --pf-v6-c-card--BackgroundColor: var(--pf-v6-c-card--m-selectable--m-disabled--BackgroundColor); } .pf-v6-c-card__actions:has(> .pf-v6-c-card__selectable-actions input.pf-v6-screen-reader), .pf-v6-c-card:has(.pf-v6-c-card__selectable-actions input.pf-v6-screen-reader) { --pf-v6-c-card--BackgroundColor: var(--pf-v6-c-card--m-as-tile--BackgroundColor); --pf-v6-c-card--BorderColor: var(--pf-v6-c-card--m-as-tile--BorderColor); } .pf-v6-c-card.pf-m-clickable:not(.pf-m-selectable) { --pf-v6-c-card__actions--PaddingInlineStart: 0; --pf-v6-c-card__actions--MarginBlockStart: 0; --pf-v6-c-card__actions--MarginBlockEnd: 0; } .pf-v6-c-card.pf-m-compact { --pf-v6-c-card__title-text--FontSize: var(--pf-v6-c-card--m-compact__title-text--FontSize); --pf-v6-c-card__body--FontSize: var(--pf-v6-c-card--m-compact__body--FontSize); --pf-v6-c-card__footer--FontSize: var(--pf-v6-c-card--m-compact__footer--FontSize); --pf-v6-c-card--first-child--PaddingBlockStart: var(--pf-v6-c-card--m-compact--first-child--PaddingBlockStart); --pf-v6-c-card--child--PaddingInlineEnd: var(--pf-v6-c-card--m-compact--child--PaddingInlineEnd); --pf-v6-c-card--child--PaddingBlockEnd: var(--pf-v6-c-card--m-compact--child--PaddingBlockEnd); --pf-v6-c-card--child--PaddingInlineStart: var(--pf-v6-c-card--m-compact--child--PaddingInlineStart); --pf-v6-c-card--c-divider--child--PaddingBlockStart: var(--pf-v6-c-card--m-compact--c-divider--child--PaddingBlockStart); --pf-v6-c-card__title--not--last-child--PaddingBlockEnd: var(--pf-v6-c-card--m-compact__title--not--last-child--PaddingBlockEnd); } .pf-v6-c-card.pf-m-display-lg { --pf-v6-c-card__title-text--FontSize: var(--pf-v6-c-card--m-display-lg__title-text--FontSize); --pf-v6-c-card__body--FontSize: var(--pf-v6-c-card--m-display-lg__body--FontSize); --pf-v6-c-card__footer--FontSize: var(--pf-v6-c-card--m-display-lg__footer--FontSize); --pf-v6-c-card--first-child--PaddingBlockStart: var(--pf-v6-c-card--m-display-lg--first-child--PaddingBlockStart); --pf-v6-c-card--child--PaddingInlineEnd: var(--pf-v6-c-card--m-display-lg--child--PaddingInlineEnd); --pf-v6-c-card--child--PaddingBlockEnd: var(--pf-v6-c-card--m-display-lg--child--PaddingBlockEnd); --pf-v6-c-card--child--PaddingInlineStart: var(--pf-v6-c-card--m-display-lg--child--PaddingInlineStart); --pf-v6-c-card--c-divider--child--PaddingBlockStart: var(--pf-v6-c-card--m-display-lg--c-divider--child--PaddingBlockStart); --pf-v6-c-card__title--not--last-child--PaddingBlockEnd: var(--pf-v6-c-card--m-display-lg__title--not--last-child--PaddingBlockEnd); } .pf-v6-c-card.pf-m-secondary { --pf-v6-c-card--BackgroundColor: var(--pf-v6-c-card--m-secondary--BackgroundColor); } .pf-v6-c-card.pf-m-secondary.pf-m-selectable:not(.pf-m-current, .pf-m-selected), .pf-v6-c-card.pf-m-secondary.pf-m-clickable:not(.pf-m-current, .pf-m-selected) { --pf-v6-c-card--BorderColor: var(--pf-v6-c-card--m-selectable--BorderColor); --pf-v6-c-card--BorderWidth: var(--pf-v6-c-card--m-selectable--BorderWidth); } .pf-v6-c-card.pf-m-plain { --pf-v6-c-card--BorderColor: var(--pf-v6-c-card--m-plain--BorderColor); --pf-v6-c-card--BackgroundColor: var(--pf-v6-c-card--m-plain--BackgroundColor); backdrop-filter: none; } .pf-v6-c-card.pf-m-plain.pf-m-selectable, .pf-v6-c-card.pf-m-plain.pf-m-clickable { --pf-v6-c-card--BorderColor: var(--pf-v6-c-card--m-selectable--BorderColor); --pf-v6-c-card--BorderWidth: var(--pf-v6-c-card--m-selectable--BorderWidth); } .pf-v6-c-card.pf-m-plain.pf-m-selectable.pf-m-current, .pf-v6-c-card.pf-m-plain.pf-m-clickable.pf-m-current { --pf-v6-c-card--BorderColor: var(--pf-v6-c-card--m-selectable--m-clickable--m-current--BorderColor); --pf-v6-c-card--BorderWidth: var(--pf-v6-c-card--m-selectable--m-clickable--m-current--BorderWidth); } .pf-v6-c-card.pf-m-expanded .pf-v6-c-card__header-toggle-icon { transform: rotate(var(--pf-v6-c-card--m-expanded__header-toggle-icon--Rotate)); } .pf-v6-c-card.pf-m-full-height { height: var(--pf-v6-c-card--m-full-height--Height); } .pf-v6-c-card > .pf-v6-c-divider + .pf-v6-c-card__header, .pf-v6-c-card > .pf-v6-c-divider + .pf-v6-c-card__title, .pf-v6-c-card > .pf-v6-c-divider + .pf-v6-c-card__body, .pf-v6-c-card > .pf-v6-c-divider + .pf-v6-c-card__footer { padding-block-start: var(--pf-v6-c-card--c-divider--child--PaddingBlockStart); } .pf-v6-c-card__header { display: flex; flex-direction: row; align-items: center; } .pf-v6-c-card__header .pf-v6-c-card__title { --pf-v6-c-card--first-child--PaddingBlockStart: 0; --pf-v6-c-card__title--not--last-child--PaddingBlockEnd: 0; padding: 0; } .pf-v6-c-card__header.pf-m-toggle-right { --pf-v6-c-card__header-toggle--MarginInlineEnd: var(--pf-v6-c-card__header--m-toggle-right--toggle--MarginInlineEnd); --pf-v6-c-card__header-toggle--MarginInlineStart: var(--pf-v6-c-card__header--m-toggle-right--toggle--MarginInlineStart); } .pf-v6-c-card__header.pf-m-toggle-right .pf-v6-c-card__header-toggle { order: 2; } .pf-v6-c-card__header.pf-m-wrap { --pf-v6-c-card__actions--PaddingInlineStart: 0; gap: var(--pf-v6-c-card__header--m-wrap--RowGap) var(--pf-v6-c-card__header--m-wrap--ColumnGap); } .pf-v6-c-card__header.pf-m-wrap, .pf-v6-c-card__header.pf-m-wrap .pf-v6-c-card__actions { flex-wrap: wrap; row-gap: var(--pf-v6-c-card__header--m-wrap--RowGap); } .pf-v6-c-card__header.pf-m-wrap .pf-v6-c-card__actions + * { margin-inline-end: auto; } .pf-v6-c-card__header.pf-m-wrap .pf-v6-c-card__actions { margin-inline-start: 0; } .pf-v6-c-card__header-main { flex-grow: 1; } .pf-v6-c-card__header-toggle { align-self: flex-start; margin-block-start: var(--pf-v6-c-card__header-toggle--MarginBlockStart); margin-block-end: var(--pf-v6-c-card__header-toggle--MarginBlockEnd); margin-inline-start: var(--pf-v6-c-card__header-toggle--MarginInlineStart); margin-inline-end: var(--pf-v6-c-card__header-toggle--MarginInlineEnd); } :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-card__header-toggle-icon { scale: -1 1; } .pf-v6-c-card__header-toggle-icon { display: inline-block; transition-timing-function: var(--pf-v6-c-card__header-toggle-icon--TransitionTimingFunction); transition-duration: var(--pf-v6-c-card__header-toggle-icon--TransitionDuration); transition-property: transform; } .pf-v6-c-card__title-text { font-family: var(--pf-v6-c-card__title-text--FontFamily); font-size: var(--pf-v6-c-card__title-text--FontSize); font-weight: var(--pf-v6-c-card__title-text--FontWeight); line-height: var(--pf-v6-c-card__title-text--LineHeight); color: var(--pf-v6-c-card__title-text--Color); overflow-wrap: var(--pf-v6-c-card__title-text--OverflowWrap); } .pf-v6-c-card__subtitle { padding-block-start: var(--pf-t--global--spacer--sm); font-size: var(--pf-t--global--font--size--body--sm); color: var(--pf-t--global--text--color--subtle); } .pf-v6-c-card__actions { display: flex; gap: var(--pf-v6-c-card__actions--Gap); align-items: center; align-self: flex-start; order: 1; padding-inline-start: var(--pf-v6-c-card__actions--PaddingInlineStart); margin-block-start: var(--pf-v6-c-card__actions--MarginBlockStart); margin-block-end: var(--pf-v6-c-card__actions--MarginBlockEnd); margin-inline-start: auto; } .pf-v6-c-card__actions + .pf-v6-c-card__title, .pf-v6-c-card__actions + .pf-v6-c-card__body, .pf-v6-c-card__actions + .pf-v6-c-card__footer { padding: 0; } .pf-v6-c-card__actions.pf-m-no-offset { --pf-v6-c-card__actions--MarginBlockStart: 0; --pf-v6-c-card__actions--MarginBlockEnd: 0; } .pf-v6-c-card__selectable-actions :is(.pf-v6-c-check__label, .pf-v6-c-radio__label, .pf-v6-c-card__clickable-action) { position: absolute; inset: 0; justify-self: auto; cursor: pointer; } .pf-v6-c-card__selectable-actions :is(.pf-v6-c-check__label, .pf-v6-c-radio__label, .pf-v6-c-card__clickable-action)::before { position: absolute; inset: 0; z-index: -1; content: ""; background-color: var(--pf-v6-c-card--BackgroundColor, transparent); border: var(--pf-v6-c-card--BorderWidth) solid var(--pf-v6-c-card--BorderColor, transparent); border-radius: var(--pf-v6-c-card--BorderRadius); } .pf-v6-c-card__selectable-actions :is(.pf-v6-c-check__label, .pf-v6-c-radio__label, .pf-v6-c-card__clickable-action):hover { --pf-v6-c-card--BorderColor: var(--pf-v6-c-card--m-selectable--hover--BorderColor); --pf-v6-c-card--BorderWidth: var(--pf-v6-c-card--m-selectable--hover--BorderWidth); } .pf-v6-c-card__selectable-actions :is(.pf-v6-c-check__input, .pf-v6-c-radio__input):where(:checked) ~ :is(.pf-v6-c-radio__label, .pf-v6-c-check__label), .pf-v6-c-card.pf-m-selected { --pf-v6-c-card--BorderColor: var(--pf-v6-c-card--m-selectable--m-selected--BorderColor); --pf-v6-c-card--BorderWidth: var(--pf-v6-c-card--m-selectable--m-selected--BorderWidth); } .pf-v6-c-card__selectable-actions .pf-v6-c-card__clickable-action:where(:focus-visible), .pf-v6-c-card__selectable-actions :is(.pf-v6-c-check__input, .pf-v6-c-radio__input, .pf-v6-c-card__clickable-action):where(:focus-visible) ~ :is(.pf-v6-c-check__label, .pf-v6-c-radio__label) { --pf-v6-c-card--BorderColor: var(--pf-v6-c-card--m-selectable--focus--BorderColor); --pf-v6-c-card--BorderWidth: var(--pf-v6-c-card--m-selectable--focus--BorderWidth); } .pf-v6-c-card__selectable-actions :is(.pf-v6-c-check__input, .pf-v6-c-radio__input):where(:focus-visible):where(:checked) ~ :is(.pf-v6-c-check__label, .pf-v6-c-radio__label) { --pf-v6-c-card--BorderColor: var(--pf-v6-c-card--m-selectable--m-selected--focus--BorderColor); --pf-v6-c-card--BorderWidth: var(--pf-v6-c-card--m-selectable--m-selected--focus--BorderWidth); } .pf-v6-c-card__selectable-actions :is(.pf-v6-c-check__input, .pf-v6-c-radio__input):where(:disabled) ~ :is(.pf-v6-c-check__label, .pf-v6-c-radio__label), .pf-v6-c-card.pf-m-disabled { --pf-v6-c-card__title-text--Color: var(--pf-v6-c-card--m-selectable--m-disabled__title-text--Color); --pf-v6-c-card__body--Color: var(--pf-v6-c-card--m-selectable--m-disabled__body--Color); --pf-v6-c-card__footer--Color: var(--pf-v6-c-card--m-selectable--m-disabled__footer--Color); --pf-v6-c-card--BackgroundColor: var(--pf-v6-c-card--m-selectable--m-disabled--BackgroundColor); --pf-v6-c-card--BorderColor: var(--pf-v6-c-card--m-selectable--m-disabled--BorderColor); } .pf-v6-c-card__clickable-action { outline: 0; background: none; border: 0; } .pf-v6-c-card__clickable-action:disabled, .pf-v6-c-card__clickable-action.pf-m-disabled { pointer-events: none; } .pf-v6-c-card__header, .pf-v6-c-card__title, .pf-v6-c-card__body, .pf-v6-c-card__footer { padding-block-end: var(--pf-v6-c-card--child--PaddingBlockEnd); padding-inline-start: var(--pf-v6-c-card--child--PaddingInlineStart); padding-inline-end: var(--pf-v6-c-card--child--PaddingInlineEnd); } .pf-v6-c-card__header:first-child, .pf-v6-c-card__title:first-child, .pf-v6-c-card__body:first-child, .pf-v6-c-card__footer:first-child { padding-block-start: var(--pf-v6-c-card--first-child--PaddingBlockStart); } .pf-v6-c-card__header:not(:last-child), .pf-v6-c-card__title:not(:last-child) { padding-block-end: var(--pf-v6-c-card__title--not--last-child--PaddingBlockEnd); } .pf-v6-c-card__header .pf-v6-c-button.pf-m-inline:disabled, .pf-v6-c-card__title .pf-v6-c-button.pf-m-inline:disabled { --pf-v6-c-button--disabled--Color: var(--pf-v6-c-card--c-button--disabled--Color); } .pf-v6-c-card__expandable-content { --pf-v6-c-card--first-child--PaddingBlockStart: 0; } .pf-v6-c-card__body:not(.pf-m-no-fill) { flex: 1 1 auto; } .pf-v6-c-card__body { font-size: var(--pf-v6-c-card__body--FontSize); color: var(--pf-v6-c-card__body--Color); } .pf-v6-c-card__footer { font-size: var(--pf-v6-c-card__footer--FontSize); color: var(--pf-v6-c-card__footer--Color); } /* PatternFly component: Content/content */ :root { --pf-v6-c-content--MarginBlockEnd: var(--pf-t--global--spacer--md); --pf-v6-c-content--LineHeight: var(--pf-t--global--font--line-height--body); --pf-v6-c-content--FontSize: var(--pf-t--global--font--size--body--default); --pf-v6-c-content--m-editorial--FontSize: var(--pf-t--global--font--size--body--lg); --pf-v6-c-content--FontWeight: var(--pf-t--global--font--weight--body--default); --pf-v6-c-content--Color: var(--pf-t--global--text--color--regular); --pf-v6-c-content--heading--FontFamily: var(--pf-t--global--font--family--heading); --pf-v6-c-content--h1--MarginBlockStart: var(--pf-t--global--spacer--lg); --pf-v6-c-content--h1--MarginBlockEnd: var(--pf-t--global--spacer--sm); --pf-v6-c-content--h1--LineHeight: var(--pf-t--global--font--line-height--heading); --pf-v6-c-content--h1--FontSize: var(--pf-t--global--font--size--heading--h1); --pf-v6-c-content--h1--FontWeight: var(--pf-t--global--font--weight--heading--default); --pf-v6-c-content--h2--MarginBlockStart: var(--pf-t--global--spacer--lg); --pf-v6-c-content--h2--MarginBlockEnd: var(--pf-t--global--spacer--sm); --pf-v6-c-content--h2--LineHeight: var(--pf-t--global--font--line-height--heading); --pf-v6-c-content--h2--FontSize: var(--pf-t--global--font--size--heading--h2); --pf-v6-c-content--h2--FontWeight: var(--pf-t--global--font--weight--heading--default); --pf-v6-c-content--h3--MarginBlockStart: var(--pf-t--global--spacer--lg); --pf-v6-c-content--h3--MarginBlockEnd: var(--pf-t--global--spacer--sm); --pf-v6-c-content--h3--LineHeight: var(--pf-t--global--font--line-height--heading); --pf-v6-c-content--h3--FontSize: var(--pf-t--global--font--size--heading--h3); --pf-v6-c-content--h3--FontWeight: var(--pf-t--global--font--weight--heading--default); --pf-v6-c-content--h4--MarginBlockStart: var(--pf-t--global--spacer--lg); --pf-v6-c-content--h4--MarginBlockEnd: var(--pf-t--global--spacer--sm); --pf-v6-c-content--h4--LineHeight: var(--pf-t--global--font--line-height--heading); --pf-v6-c-content--h4--FontSize: var(--pf-t--global--font--size--heading--h4); --pf-v6-c-content--h4--FontWeight: var(--pf-t--global--font--weight--heading--default); --pf-v6-c-content--h5--MarginBlockStart: var(--pf-t--global--spacer--lg); --pf-v6-c-content--h5--MarginBlockEnd: var(--pf-t--global--spacer--sm); --pf-v6-c-content--h5--LineHeight: var(--pf-t--global--font--line-height--heading); --pf-v6-c-content--h5--FontSize: var(--pf-t--global--font--size--heading--h5); --pf-v6-c-content--h5--FontWeight: var(--pf-t--global--font--weight--heading--default); --pf-v6-c-content--h6--MarginBlockStart: var(--pf-t--global--spacer--lg); --pf-v6-c-content--h6--MarginBlockEnd: var(--pf-t--global--spacer--sm); --pf-v6-c-content--h6--LineHeight: var(--pf-t--global--font--line-height--heading); --pf-v6-c-content--h6--FontSize: var(--pf-t--global--font--size--heading--h6); --pf-v6-c-content--h6--FontWeight: var(--pf-t--global--font--weight--heading--default); --pf-v6-c-content--heading--m-page-title--FontWeight: var(--pf-t--global--font--weight--heading--bold); --pf-v6-c-content--small--MarginBlockEnd: var(--pf-t--global--spacer--md); --pf-v6-c-content--small--LineHeight: var(--pf-t--global--font--line-height--body); --pf-v6-c-content--small--FontSize: var(--pf-t--global--font--size--body--sm); --pf-v6-c-content--m-editorial--small--FontSize: var(--pf-t--global--font--size--body--default); --pf-v6-c-content--small--Color: var(--pf-t--global--text--color--subtle); --pf-v6-c-content--a--Color: var(--pf-t--global--text--color--link--default); --pf-v6-c-content--a--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--default); --pf-v6-c-content--a--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--default); --pf-v6-c-content--a--hover--Color: var(--pf-t--global--text--color--link--hover); --pf-v6-c-content--a--hover--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--hover); --pf-v6-c-content--a--hover--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--hover); --pf-v6-c-content--a--visited--Color: var(--pf-t--global--text--color--link--visited); --pf-v6-c-content--blockquote--PaddingBlockStart: var(--pf-t--global--spacer--md); --pf-v6-c-content--blockquote--PaddingInlineEnd: var(--pf-t--global--spacer--md); --pf-v6-c-content--blockquote--PaddingBlockEnd: var(--pf-t--global--spacer--md); --pf-v6-c-content--blockquote--PaddingInlineStart: var(--pf-t--global--spacer--md); --pf-v6-c-content--blockquote--Color: var(--pf-t--global--text--color--subtle); --pf-v6-c-content--blockquote--BorderInlineStartColor: var(--pf-t--global--border--color--default); --pf-v6-c-content--blockquote--BorderInlineStartWidth: var(--pf-t--global--border--width--300); --pf-v6-c-content--list--Gap: var(--pf-t--global--spacer--sm); --pf-v6-c-content--list--PaddingInlineStart: var(--pf-t--global--spacer--lg); --pf-v6-c-content--list--nested--MarginBlockStart: var(--pf-v6-c-content--list--Gap); --pf-v6-c-content--ul--ListStyle: var(--pf-t--global--list-style); --pf-v6-c-content--dl--GridTemplateColumns--dt: 12ch; --pf-v6-c-content--dl--GridTemplateColumns--dd: 1fr; --pf-v6-c-content--dl--ColumnGap: var(--pf-t--global--spacer--gap--group--horizontal); --pf-v6-c-content--dl--RowGap: var(--pf-t--global--spacer--gap--group-to-group--vertical--default); --pf-v6-c-content--dt--FontWeight: var(--pf-t--global--font--weight--body--bold); --pf-v6-c-content--dt--MarginBlockStart: var(--pf-t--global--spacer--md); --pf-v6-c-content--dt--sm--MarginBlockStart: 0; --pf-v6-c-content--hr--Height: var(--pf-t--global--border--width--divider--default); --pf-v6-c-content--hr--BackgroundColor: var(--pf-t--global--border--color--default); } [class*=pf-v6-c-content] { font-size: var(--pf-v6-c-content--FontSize); line-height: var(--pf-v6-c-content--LineHeight); color: var(--pf-v6-c-content--Color); } [class*=pf-v6-c-content].pf-m-editorial { --pf-v6-c-content--FontSize: var(--pf-v6-c-content--m-editorial--FontSize); --pf-v6-c-content--small--FontSize: var(--pf-v6-c-content--m-editorial--small--FontSize); } :is(.pf-v6-c-content--a, .pf-v6-c-content a) { color: var(--pf-v6-c-content--a--Color); text-decoration-line: var(--pf-v6-c-content--a--TextDecorationLine); text-decoration-style: var(--pf-v6-c-content--a--TextDecorationStyle); } :is(.pf-v6-c-content--a, .pf-v6-c-content a):is(:hover, :focus) { --pf-v6-c-content--a--Color: var(--pf-v6-c-content--a--hover--Color); --pf-v6-c-content--a--TextDecorationLine: var(--pf-v6-c-content--a--hover--TextDecorationLine); --pf-v6-c-content--a--TextDecorationStyle: var(--pf-v6-c-content--a--hover--TextDecorationStyle); } :is(.pf-v6-c-content--a.pf-m-visited, .pf-v6-c-content.pf-m-visited a, .pf-v6-c-content a.pf-m-visited):visited { color: var(--pf-v6-c-content--a--visited--Color); } :is(.pf-v6-c-content--li + .pf-v6-c-content--li, .pf-v6-c-content li + li) { margin-block-start: var(--pf-v6-c-content--li--MarginBlockStart); } :is(.pf-v6-c-content--p, .pf-v6-c-content--dl, .pf-v6-c-content--ol, .pf-v6-c-content--ul, .pf-v6-c-content--blockquote, .pf-v6-c-content--small, .pf-v6-c-content--pre, .pf-v6-c-content--table, .pf-v6-c-content--hr, .pf-v6-c-content p, .pf-v6-c-content dl, .pf-v6-c-content ol, .pf-v6-c-content ul, .pf-v6-c-content blockquote, .pf-v6-c-content small, .pf-v6-c-content pre, .pf-v6-c-content table, .pf-v6-c-content hr):not(:last-child) { margin-block-end: var(--pf-v6-c-content--MarginBlockEnd); } :is(.pf-v6-c-content--h1, .pf-v6-c-content--h2, .pf-v6-c-content--h3, .pf-v6-c-content--h4, .pf-v6-c-content--h5, .pf-v6-c-content--h6, .pf-v6-c-content h1, .pf-v6-c-content h2, .pf-v6-c-content h3, .pf-v6-c-content h4, .pf-v6-c-content h5, .pf-v6-c-content h6) { margin: 0; font-family: var(--pf-v6-c-content--heading--FontFamily); } :is(.pf-v6-c-content--h1, .pf-v6-c-content--h2, .pf-v6-c-content--h3, .pf-v6-c-content--h4, .pf-v6-c-content--h5, .pf-v6-c-content--h6, .pf-v6-c-content h1, .pf-v6-c-content h2, .pf-v6-c-content h3, .pf-v6-c-content h4, .pf-v6-c-content h5, .pf-v6-c-content h6):first-child { margin-block-start: 0; } :is(.pf-v6-c-content--h1, .pf-v6-c-content--h2, .pf-v6-c-content--h3, .pf-v6-c-content--h4, .pf-v6-c-content--h5, .pf-v6-c-content--h6, .pf-v6-c-content h1, .pf-v6-c-content h2, .pf-v6-c-content h3, .pf-v6-c-content h4, .pf-v6-c-content h5, .pf-v6-c-content h6):last-child { margin-block-end: 0; } :is(.pf-v6-c-content--h1, .pf-v6-c-content--h2, .pf-v6-c-content--h3, .pf-v6-c-content--h4, .pf-v6-c-content--h5, .pf-v6-c-content--h6, .pf-v6-c-content h1, .pf-v6-c-content h2, .pf-v6-c-content h3, .pf-v6-c-content h4, .pf-v6-c-content h5, .pf-v6-c-content h6).pf-m-page-title { font-weight: var(--pf-v6-c-content--heading--m-page-title--FontWeight); } :is(.pf-v6-c-content--h1, .pf-v6-c-content h1) { margin-block-start: var(--pf-v6-c-content--h1--MarginBlockStart); margin-block-end: var(--pf-v6-c-content--h1--MarginBlockEnd); font-size: var(--pf-v6-c-content--h1--FontSize); font-weight: var(--pf-v6-c-content--h1--FontWeight); line-height: var(--pf-v6-c-content--h1--LineHeight); } :is(.pf-v6-c-content--h2, .pf-v6-c-content h2) { margin-block-start: var(--pf-v6-c-content--h2--MarginBlockStart); margin-block-end: var(--pf-v6-c-content--h2--MarginBlockEnd); font-size: var(--pf-v6-c-content--h2--FontSize); font-weight: var(--pf-v6-c-content--h2--FontWeight); line-height: var(--pf-v6-c-content--h2--LineHeight); } :is(.pf-v6-c-content--h3, .pf-v6-c-content h3) { margin-block-start: var(--pf-v6-c-content--h3--MarginBlockStart); margin-block-end: var(--pf-v6-c-content--h3--MarginBlockEnd); font-size: var(--pf-v6-c-content--h3--FontSize); font-weight: var(--pf-v6-c-content--h3--FontWeight); line-height: var(--pf-v6-c-content--h3--LineHeight); } :is(.pf-v6-c-content--h4, .pf-v6-c-content h4) { margin-block-start: var(--pf-v6-c-content--h4--MarginBlockStart); margin-block-end: var(--pf-v6-c-content--h4--MarginBlockEnd); font-size: var(--pf-v6-c-content--h4--FontSize); font-weight: var(--pf-v6-c-content--h4--FontWeight); line-height: var(--pf-v6-c-content--h4--LineHeight); } :is(.pf-v6-c-content--h5, .pf-v6-c-content h5) { margin-block-start: var(--pf-v6-c-content--h5--MarginBlockStart); margin-block-end: var(--pf-v6-c-content--h5--MarginBlockEnd); font-size: var(--pf-v6-c-content--h5--FontSize); font-weight: var(--pf-v6-c-content--h5--FontWeight); line-height: var(--pf-v6-c-content--h5--LineHeight); } :is(.pf-v6-c-content--h6, .pf-v6-c-content h6) { margin-block-start: var(--pf-v6-c-content--h6--MarginBlockStart); margin-block-end: var(--pf-v6-c-content--h6--MarginBlockEnd); font-size: var(--pf-v6-c-content--h6--FontSize); font-weight: var(--pf-v6-c-content--h6--FontWeight); line-height: var(--pf-v6-c-content--h6--LineHeight); } :is(.pf-v6-c-content--small, .pf-v6-c-content small) { display: block; font-size: var(--pf-v6-c-content--small--FontSize); line-height: var(--pf-v6-c-content--small--LineHeight); color: var(--pf-v6-c-content--small--Color); } :is(.pf-v6-c-content--small, .pf-v6-c-content small):not(:last-child) { margin-block-end: var(--pf-v6-c-content--small--MarginBlockEnd); } :is(.pf-v6-c-content--blockquote, .pf-v6-c-content blockquote) { padding-block-start: var(--pf-v6-c-content--blockquote--PaddingBlockStart); padding-block-end: var(--pf-v6-c-content--blockquote--PaddingBlockEnd); padding-inline-start: var(--pf-v6-c-content--blockquote--PaddingInlineStart); padding-inline-end: var(--pf-v6-c-content--blockquote--PaddingInlineEnd); color: var(--pf-v6-c-content--blockquote--Color); border-inline-start: var(--pf-v6-c-content--blockquote--BorderInlineStartWidth) solid var(--pf-v6-c-content--blockquote--BorderInlineStartColor); } :is(.pf-v6-c-content--hr, .pf-v6-c-content hr) { height: var(--pf-v6-c-content--hr--Height); background-color: var(--pf-v6-c-content--hr--BackgroundColor); border: none; } :is(.pf-v6-c-content--ol, .pf-v6-c-content--ul, .pf-v6-c-content ol, .pf-v6-c-content ul) { display: flex; flex-direction: column; gap: var(--pf-v6-c-content--list--Gap); padding-inline-start: var(--pf-v6-c-content--list--PaddingInlineStart); } :is(.pf-v6-c-content--ol, .pf-v6-c-content--ul, .pf-v6-c-content ol, .pf-v6-c-content ul).pf-m-plain { padding-inline-start: 0; list-style: none; } :is(.pf-v6-c-content--ol, .pf-v6-c-content--ul, .pf-v6-c-content ol, .pf-v6-c-content ul) :is(.pf-v6-c-content--ol, .pf-v6-c-content--ul, ol, ul) { margin-block-start: var(--pf-v6-c-content--list--nested--MarginBlockStart); } :is(.pf-v6-c-content--ul, .pf-v6-c-content ul) { list-style: var(--pf-v6-c-content--ul--ListStyle); } :is(.pf-v6-c-content--dl, .pf-v6-c-content dl) { display: grid; grid-template-columns: 1fr; } @media screen and (min-width: 36rem) { :is(.pf-v6-c-content--dl, .pf-v6-c-content dl) { grid-template: auto/var(--pf-v6-c-content--dl--GridTemplateColumns--dt) var(--pf-v6-c-content--dl--GridTemplateColumns--dd); row-gap: var(--pf-v6-c-content--dl--RowGap); column-gap: var(--pf-v6-c-content--dl--ColumnGap); } } :is(.pf-v6-c-content--dt, .pf-v6-c-content dt) { font-weight: var(--pf-v6-c-content--dt--FontWeight); } :is(.pf-v6-c-content--dt, .pf-v6-c-content dt):not(:first-child) { margin-block-start: var(--pf-v6-c-content--dt--MarginBlockStart); } @media screen and (min-width: 36rem) { :is(.pf-v6-c-content--dt, .pf-v6-c-content dt):not(:first-child) { --pf-v6-c-content--dt--MarginBlockStart: var(--pf-v6-c-content--dt--sm--MarginBlockStart); } } @media screen and (min-width: 36rem) { :is(.pf-v6-c-content--dt, .pf-v6-c-content dt) { grid-column: 1; } } @media screen and (min-width: 36rem) { :is(.pf-v6-c-content--dd, .pf-v6-c-content dd) { grid-column: 2; } } /* PatternFly component: DescriptionList/description-list */ .pf-v6-c-description-list { --pf-v6-c-description-list--RowGap: var(--pf-t--global--spacer--gap--group-to-group--vertical--default); --pf-v6-c-description-list--ColumnGap: var(--pf-t--global--spacer--gap--group-to-group--horizontal--default); --pf-v6-c-description-list--GridTemplateColumns--count: 1; --pf-v6-c-description-list--GridTemplateColumns--width: 1fr; --pf-v6-c-description-list--GridTemplateColumns--min: 0; --pf-v6-c-description-list__group--RowGap: var(--pf-t--global--spacer--gap--group--vertical); --pf-v6-c-description-list__group--ColumnGap: var(--pf-t--global--spacer--gap--group--horizontal); --pf-v6-c-description-list__group--GridTemplateColumns: auto; --pf-v6-c-description-list__group--GridTemplateRows: auto 1fr; --pf-v6-c-description-list__group--GridColumn: auto; --pf-v6-c-description-list--m-compact--RowGap: var(--pf-t--global--spacer--gap--group-to-group--vertical--compact); --pf-v6-c-description-list--m-compact--ColumnGap: var(--pf-t--global--spacer--gap--group-to-group--horizontal--compact); --pf-v6-c-description-list__term--Display: inline; --pf-v6-c-description-list__term--sm--Display: flex; --pf-v6-c-description-list__term--FontWeight: var(--pf-t--global--font--weight--body--bold); --pf-v6-c-description-list__term--FontSize: var(--pf-t--global--font--size--body--default); --pf-v6-c-description-list__term--LineHeight: var(--pf-t--global--font--line-height--body); } @media screen and (min-width: 36rem) { .pf-v6-c-description-list { --pf-v6-c-description-list__term--Display: var(--pf-v6-c-description-list__term--sm--Display); } } .pf-v6-c-description-list { --pf-v6-c-description-list__term-icon--MinWidth: var(--pf-t--global--font--size--body--sm); --pf-v6-c-description-list__term-icon--MarginInlineEnd: var(--pf-t--global--spacer--sm); --pf-v6-c-description-list__term-icon--Color: var(--pf-t--global--icon--color--subtle); --pf-v6-c-description-list--m-vertical__group--GridTemplateColumns: repeat(var(--pf-v6-c-description-list--GridTemplateColumns--count)); --pf-v6-c-description-list--m-vertical__group--GridTemplateRows: auto 1fr; --pf-v6-c-description-list--m-horizontal__term--width: 12ch; --pf-v6-c-description-list--m-horizontal__description--width: minmax(10ch, auto); --pf-v6-c-description-list--m-horizontal__group--GridTemplateColumns: var(--pf-v6-c-description-list__term--width) var(--pf-v6-c-description-list--m-horizontal__description--width); --pf-v6-c-description-list--m-horizontal__group--GridTemplateRows: auto; --pf-v6-c-description-list--m-1-col--GridTemplateColumns--count: 1; --pf-v6-c-description-list--m-2-col--GridTemplateColumns--count: 2; --pf-v6-c-description-list--m-3-col--GridTemplateColumns--count: 3; --pf-v6-c-description-list--m-auto-fit--GridTemplateColumns--min: 15.625rem; --pf-v6-c-description-list--m-auto-fit--GridTemplateColumns--minmax--min: var(--pf-v6-c-description-list--m-auto-fit--GridTemplateColumns--min); --pf-v6-c-description-list__text--m-help-text--TextDecorationLine: var(--pf-t--global--text-decoration--help-text--line--default); --pf-v6-c-description-list__text--m-help-text--TextDecorationStyle: var(--pf-t--global--text-decoration--help-text--style--default); --pf-v6-c-description-list__text--m-help-text--TextUnderlineOffset: 0.25rem; --pf-v6-c-description-list__text--m-help-text--hover--TextDecorationLine: var(--pf-t--global--text-decoration--help-text--line--hover); --pf-v6-c-description-list__text--m-help-text--hover--TextDecorationStyle: var(--pf-t--global--text-decoration--help-text--style--hover); --pf-v6-c-description-list--m-display-lg__description--FontSize: var(--pf-t--global--font--size--body--lg); --pf-v6-c-description-list--m-display-2xl__description--FontSize: var(--pf-t--global--font--size--heading--lg); --pf-v6-c-description-list--m-horizontal__term--width-on-sm: inherit; --pf-v6-c-description-list--m-horizontal__term--width-on-md: inherit; --pf-v6-c-description-list--m-horizontal__term--width-on-lg: inherit; --pf-v6-c-description-list--m-horizontal__term--width-on-xl: inherit; --pf-v6-c-description-list--m-horizontal__term--width-on-2xl: inherit; --pf-v6-c-description-list__term--width: var(--pf-v6-c-description-list--m-horizontal__term--width); } @media (min-width: 36rem) { .pf-v6-c-description-list { --pf-v6-c-description-list__term--width: var(--pf-v6-c-description-list--m-horizontal__term--width-on-sm, var(--pf-v6-c-description-list--m-horizontal__term--width)); } } @media (min-width: 48rem) { .pf-v6-c-description-list { --pf-v6-c-description-list__term--width: var(--pf-v6-c-description-list--m-horizontal__term--width-on-md, var(--pf-v6-c-description-list--m-horizontal__term--width-on-sm, var(--pf-v6-c-description-list--m-horizontal__term--width))); } } @media (min-width: 62rem) { .pf-v6-c-description-list { --pf-v6-c-description-list__term--width: var(--pf-v6-c-description-list--m-horizontal__term--width-on-lg, var(--pf-v6-c-description-list--m-horizontal__term--width-on-md, var(--pf-v6-c-description-list--m-horizontal__term--width-on-sm, var(--pf-v6-c-description-list--m-horizontal__term--width)))); } } @media (min-width: 75rem) { .pf-v6-c-description-list { --pf-v6-c-description-list__term--width: var(--pf-v6-c-description-list--m-horizontal__term--width-on-xl, var(--pf-v6-c-description-list--m-horizontal__term--width-on-lg, var(--pf-v6-c-description-list--m-horizontal__term--width-on-md, var(--pf-v6-c-description-list--m-horizontal__term--width-on-sm, var(--pf-v6-c-description-list--m-horizontal__term--width))))); } } @media (min-width: 90.625rem) { .pf-v6-c-description-list { --pf-v6-c-description-list__term--width: var(--pf-v6-c-description-list--m-horizontal__term--width-on-2xl, var(--pf-v6-c-description-list--m-horizontal__term--width-on-xl, var(--pf-v6-c-description-list--m-horizontal__term--width-on-lg, var(--pf-v6-c-description-list--m-horizontal__term--width-on-md, var(--pf-v6-c-description-list--m-horizontal__term--width-on-sm, var(--pf-v6-c-description-list--m-horizontal__term--width)))))); } } .pf-v6-c-description-list { display: grid; grid-template-columns: repeat(var(--pf-v6-c-description-list--GridTemplateColumns--count), var(--pf-v6-c-description-list--GridTemplateColumns--width)); row-gap: var(--pf-v6-c-description-list--RowGap); column-gap: var(--pf-v6-c-description-list--ColumnGap); align-items: baseline; } .pf-v6-c-description-list.pf-m-inline-grid { display: inline-grid; } .pf-v6-c-description-list.pf-m-auto-column-widths { --pf-v6-c-description-list--GridTemplateColumns--width: minmax(8ch, max-content); } .pf-v6-c-description-list.pf-m-auto-fit { grid-template-columns: repeat(auto-fit, minmax(var(--pf-v6-c-description-list--m-auto-fit--GridTemplateColumns--minmax--min), 1fr)); --pf-v6-c-description-list--GridTemplateColumns--minmax--min: var(--pf-v6-c-description-list--GridTemplateColumns--min); } @media (min-width: 36rem) { .pf-v6-c-description-list.pf-m-auto-fit { --pf-v6-c-description-list--GridTemplateColumns--minmax--min: var(--pf-v6-c-description-list--GridTemplateColumns--min-on-sm, var(--pf-v6-c-description-list--GridTemplateColumns--min)); } } @media (min-width: 48rem) { .pf-v6-c-description-list.pf-m-auto-fit { --pf-v6-c-description-list--GridTemplateColumns--minmax--min: var(--pf-v6-c-description-list--GridTemplateColumns--min-on-md, var(--pf-v6-c-description-list--GridTemplateColumns--min-on-sm, var(--pf-v6-c-description-list--GridTemplateColumns--min))); } } @media (min-width: 62rem) { .pf-v6-c-description-list.pf-m-auto-fit { --pf-v6-c-description-list--GridTemplateColumns--minmax--min: var(--pf-v6-c-description-list--GridTemplateColumns--min-on-lg, var(--pf-v6-c-description-list--GridTemplateColumns--min-on-md, var(--pf-v6-c-description-list--GridTemplateColumns--min-on-sm, var(--pf-v6-c-description-list--GridTemplateColumns--min)))); } } @media (min-width: 75rem) { .pf-v6-c-description-list.pf-m-auto-fit { --pf-v6-c-description-list--GridTemplateColumns--minmax--min: var(--pf-v6-c-description-list--GridTemplateColumns--min-on-xl, var(--pf-v6-c-description-list--GridTemplateColumns--min-on-lg, var(--pf-v6-c-description-list--GridTemplateColumns--min-on-md, var(--pf-v6-c-description-list--GridTemplateColumns--min-on-sm, var(--pf-v6-c-description-list--GridTemplateColumns--min))))); } } @media (min-width: 90.625rem) { .pf-v6-c-description-list.pf-m-auto-fit { --pf-v6-c-description-list--GridTemplateColumns--minmax--min: var(--pf-v6-c-description-list--GridTemplateColumns--min-on-2xl, var(--pf-v6-c-description-list--GridTemplateColumns--min-on-xl, var(--pf-v6-c-description-list--GridTemplateColumns--min-on-lg, var(--pf-v6-c-description-list--GridTemplateColumns--min-on-md, var(--pf-v6-c-description-list--GridTemplateColumns--min-on-sm, var(--pf-v6-c-description-list--GridTemplateColumns--min)))))); } } .pf-v6-c-description-list.pf-m-compact { --pf-v6-c-description-list--RowGap: var(--pf-v6-c-description-list--m-compact--RowGap); --pf-v6-c-description-list--ColumnGap: var(--pf-v6-c-description-list--m-compact--ColumnGap); } .pf-v6-c-description-list.pf-m-fluid { --pf-v6-c-description-list--m-horizontal__term--width: fit-content(20ch); } .pf-v6-c-description-list.pf-m-fill-columns { display: block; column-count: var(--pf-v6-c-description-list--GridTemplateColumns--count); margin-block-end: calc(var(--pf-v6-c-description-list--RowGap) * -1); } .pf-v6-c-description-list.pf-m-fill-columns .pf-v6-c-description-list__group, .pf-v6-c-description-list.pf-m-fill-columns > .pf-v6-c-card { display: inline-grid; width: 100%; margin-block-end: var(--pf-v6-c-description-list--RowGap); break-inside: avoid; -webkit-column-break-inside: avoid; -moz-column-break-inside: avoid; } .pf-v6-c-description-list.pf-m-display-lg { --pf-v6-c-description-list__description--FontSize: var(--pf-v6-c-description-list--m-display-lg__description--FontSize); } .pf-v6-c-description-list.pf-m-display-2xl { --pf-v6-c-description-list__description--FontSize: var(--pf-v6-c-description-list--m-display-2xl__description--FontSize); } .pf-v6-c-description-list > .pf-v6-c-card { align-self: stretch; padding-block-start: var(--pf-v6-c-card--first-child--PaddingBlockStart); padding-block-end: var(--pf-v6-c-card--child--PaddingBlockEnd); padding-inline-start: var(--pf-v6-c-card--child--PaddingInlineStart); padding-inline-end: var(--pf-v6-c-card--child--PaddingInlineEnd); } .pf-v6-c-description-list__group, .pf-v6-c-description-list > .pf-v6-c-card { display: grid; grid-template-rows: var(--pf-v6-c-description-list__group--GridTemplateRows); grid-template-columns: var(--pf-v6-c-description-list__group--GridTemplateColumns); grid-column: var(--pf-v6-c-description-list__group--GridColumn); row-gap: var(--pf-v6-c-description-list__group--RowGap); column-gap: var(--pf-v6-c-description-list__group--ColumnGap); align-items: baseline; } .pf-v6-c-description-list__term, .pf-v6-c-description-list__description { min-width: 0; text-align: start; overflow-wrap: break-word; } .pf-v6-c-description-list__term { display: var(--pf-v6-c-description-list__term--Display); font-size: var(--pf-v6-c-description-list__term--FontSize); font-weight: var(--pf-v6-c-description-list__term--FontWeight); line-height: var(--pf-v6-c-description-list__term--LineHeight); } .pf-v6-c-description-list__term .pf-v6-c-description-list__text { display: inline; } .pf-v6-c-description-list__term-icon { flex-shrink: 0; min-width: var(--pf-v6-c-description-list__term-icon--MinWidth); margin-inline-end: var(--pf-v6-c-description-list__term-icon--MarginInlineEnd); color: var(--pf-v6-c-description-list__term-icon--Color); } .pf-v6-c-description-list__description { font-size: var(--pf-v6-c-description-list__description--FontSize, inherit); } .pf-v6-c-description-list__text { min-width: 0; } .pf-v6-c-description-list__text.pf-m-help-text { text-decoration-line: var(--pf-v6-c-description-list__text--m-help-text--TextDecorationLine); text-decoration-style: var(--pf-v6-c-description-list__text--m-help-text--TextDecorationStyle); text-underline-offset: var(--pf-v6-c-description-list__text--m-help-text--TextUnderlineOffset); cursor: pointer; } .pf-v6-c-description-list__text.pf-m-help-text:is(:hover, :focus) { --pf-v6-c-description-list__text--m-help-text--TextDecorationLine: var(--pf-v6-c-description-list__text--m-help-text--hover--TextDecorationLine); --pf-v6-c-description-list__text--m-help-text--TextDecorationStyle: var(--pf-v6-c-description-list__text--m-help-text--hover--TextDecorationStyle); } .pf-v6-c-description-list.pf-m-1-col { --pf-v6-c-description-list--GridTemplateColumns--count: var(--pf-v6-c-description-list--m-1-col--GridTemplateColumns--count); } .pf-v6-c-description-list.pf-m-2-col { --pf-v6-c-description-list--GridTemplateColumns--count: var(--pf-v6-c-description-list--m-2-col--GridTemplateColumns--count); } .pf-v6-c-description-list.pf-m-3-col { --pf-v6-c-description-list--GridTemplateColumns--count: var(--pf-v6-c-description-list--m-3-col--GridTemplateColumns--count); } .pf-v6-c-description-list.pf-m-horizontal { --pf-v6-c-description-list__group--GridTemplateColumns: var(--pf-v6-c-description-list--m-horizontal__group--GridTemplateColumns); --pf-v6-c-description-list__group--GridTemplateRows: var(--pf-v6-c-description-list--m-horizontal__group--GridTemplateRows); } .pf-v6-c-description-list.pf-m-vertical { --pf-v6-c-description-list__group--GridTemplateColumns: var(--pf-v6-c-description-list--m-vertical__group--GridTemplateColumns); --pf-v6-c-description-list__group--GridTemplateRows: var(--pf-v6-c-description-list--m-vertical__group--GridTemplateRows); } @media (min-width: 36rem) { .pf-v6-c-description-list.pf-m-1-col-on-sm { --pf-v6-c-description-list--GridTemplateColumns--count: var(--pf-v6-c-description-list--m-1-col--GridTemplateColumns--count); } .pf-v6-c-description-list.pf-m-2-col-on-sm { --pf-v6-c-description-list--GridTemplateColumns--count: var(--pf-v6-c-description-list--m-2-col--GridTemplateColumns--count); } .pf-v6-c-description-list.pf-m-3-col-on-sm { --pf-v6-c-description-list--GridTemplateColumns--count: var(--pf-v6-c-description-list--m-3-col--GridTemplateColumns--count); } .pf-v6-c-description-list.pf-m-horizontal-on-sm { --pf-v6-c-description-list__group--GridTemplateColumns: var(--pf-v6-c-description-list--m-horizontal__group--GridTemplateColumns); --pf-v6-c-description-list__group--GridTemplateRows: var(--pf-v6-c-description-list--m-horizontal__group--GridTemplateRows); } .pf-v6-c-description-list.pf-m-vertical-on-sm { --pf-v6-c-description-list__group--GridTemplateColumns: var(--pf-v6-c-description-list--m-vertical__group--GridTemplateColumns); --pf-v6-c-description-list__group--GridTemplateRows: var(--pf-v6-c-description-list--m-vertical__group--GridTemplateRows); } } @media (min-width: 48rem) { .pf-v6-c-description-list.pf-m-1-col-on-md { --pf-v6-c-description-list--GridTemplateColumns--count: var(--pf-v6-c-description-list--m-1-col--GridTemplateColumns--count); } .pf-v6-c-description-list.pf-m-2-col-on-md { --pf-v6-c-description-list--GridTemplateColumns--count: var(--pf-v6-c-description-list--m-2-col--GridTemplateColumns--count); } .pf-v6-c-description-list.pf-m-3-col-on-md { --pf-v6-c-description-list--GridTemplateColumns--count: var(--pf-v6-c-description-list--m-3-col--GridTemplateColumns--count); } .pf-v6-c-description-list.pf-m-horizontal-on-md { --pf-v6-c-description-list__group--GridTemplateColumns: var(--pf-v6-c-description-list--m-horizontal__group--GridTemplateColumns); --pf-v6-c-description-list__group--GridTemplateRows: var(--pf-v6-c-description-list--m-horizontal__group--GridTemplateRows); } .pf-v6-c-description-list.pf-m-vertical-on-md { --pf-v6-c-description-list__group--GridTemplateColumns: var(--pf-v6-c-description-list--m-vertical__group--GridTemplateColumns); --pf-v6-c-description-list__group--GridTemplateRows: var(--pf-v6-c-description-list--m-vertical__group--GridTemplateRows); } } @media (min-width: 62rem) { .pf-v6-c-description-list.pf-m-1-col-on-lg { --pf-v6-c-description-list--GridTemplateColumns--count: var(--pf-v6-c-description-list--m-1-col--GridTemplateColumns--count); } .pf-v6-c-description-list.pf-m-2-col-on-lg { --pf-v6-c-description-list--GridTemplateColumns--count: var(--pf-v6-c-description-list--m-2-col--GridTemplateColumns--count); } .pf-v6-c-description-list.pf-m-3-col-on-lg { --pf-v6-c-description-list--GridTemplateColumns--count: var(--pf-v6-c-description-list--m-3-col--GridTemplateColumns--count); } .pf-v6-c-description-list.pf-m-horizontal-on-lg { --pf-v6-c-description-list__group--GridTemplateColumns: var(--pf-v6-c-description-list--m-horizontal__group--GridTemplateColumns); --pf-v6-c-description-list__group--GridTemplateRows: var(--pf-v6-c-description-list--m-horizontal__group--GridTemplateRows); } .pf-v6-c-description-list.pf-m-vertical-on-lg { --pf-v6-c-description-list__group--GridTemplateColumns: var(--pf-v6-c-description-list--m-vertical__group--GridTemplateColumns); --pf-v6-c-description-list__group--GridTemplateRows: var(--pf-v6-c-description-list--m-vertical__group--GridTemplateRows); } } @media (min-width: 75rem) { .pf-v6-c-description-list.pf-m-1-col-on-xl { --pf-v6-c-description-list--GridTemplateColumns--count: var(--pf-v6-c-description-list--m-1-col--GridTemplateColumns--count); } .pf-v6-c-description-list.pf-m-2-col-on-xl { --pf-v6-c-description-list--GridTemplateColumns--count: var(--pf-v6-c-description-list--m-2-col--GridTemplateColumns--count); } .pf-v6-c-description-list.pf-m-3-col-on-xl { --pf-v6-c-description-list--GridTemplateColumns--count: var(--pf-v6-c-description-list--m-3-col--GridTemplateColumns--count); } .pf-v6-c-description-list.pf-m-horizontal-on-xl { --pf-v6-c-description-list__group--GridTemplateColumns: var(--pf-v6-c-description-list--m-horizontal__group--GridTemplateColumns); --pf-v6-c-description-list__group--GridTemplateRows: var(--pf-v6-c-description-list--m-horizontal__group--GridTemplateRows); } .pf-v6-c-description-list.pf-m-vertical-on-xl { --pf-v6-c-description-list__group--GridTemplateColumns: var(--pf-v6-c-description-list--m-vertical__group--GridTemplateColumns); --pf-v6-c-description-list__group--GridTemplateRows: var(--pf-v6-c-description-list--m-vertical__group--GridTemplateRows); } } @media (min-width: 90.625rem) { .pf-v6-c-description-list.pf-m-1-col-on-2xl { --pf-v6-c-description-list--GridTemplateColumns--count: var(--pf-v6-c-description-list--m-1-col--GridTemplateColumns--count); } .pf-v6-c-description-list.pf-m-2-col-on-2xl { --pf-v6-c-description-list--GridTemplateColumns--count: var(--pf-v6-c-description-list--m-2-col--GridTemplateColumns--count); } .pf-v6-c-description-list.pf-m-3-col-on-2xl { --pf-v6-c-description-list--GridTemplateColumns--count: var(--pf-v6-c-description-list--m-3-col--GridTemplateColumns--count); } .pf-v6-c-description-list.pf-m-horizontal-on-2xl { --pf-v6-c-description-list__group--GridTemplateColumns: var(--pf-v6-c-description-list--m-horizontal__group--GridTemplateColumns); --pf-v6-c-description-list__group--GridTemplateRows: var(--pf-v6-c-description-list--m-horizontal__group--GridTemplateRows); } .pf-v6-c-description-list.pf-m-vertical-on-2xl { --pf-v6-c-description-list__group--GridTemplateColumns: var(--pf-v6-c-description-list--m-vertical__group--GridTemplateColumns); --pf-v6-c-description-list__group--GridTemplateRows: var(--pf-v6-c-description-list--m-vertical__group--GridTemplateRows); } } /* PatternFly component: JumpLinks/jump-links */ .pf-v6-c-jump-links { --pf-v6-c-jump-links__list--Display: flex; --pf-v6-c-jump-links__list--PaddingBlockStart: 0; --pf-v6-c-jump-links__list--PaddingInlineEnd: var(--pf-t--global--spacer--md); --pf-v6-c-jump-links__list--PaddingBlockEnd: 0; --pf-v6-c-jump-links__list--PaddingInlineStart: var(--pf-t--global--spacer--md); --pf-v6-c-jump-links--m-vertical__list--PaddingBlockStart: var(--pf-t--global--spacer--md); --pf-v6-c-jump-links--m-vertical__list--PaddingInlineEnd: 0; --pf-v6-c-jump-links--m-vertical__list--PaddingBlockEnd: var(--pf-t--global--spacer--md); --pf-v6-c-jump-links--m-vertical__list--PaddingInlineStart: 0; --pf-v6-c-jump-links__list--FlexDirection: row; --pf-v6-c-jump-links--m-vertical__list--FlexDirection: column; --pf-v6-c-jump-links__list--before--BorderColor: var(--pf-t--global--border--color--default); --pf-v6-c-jump-links__list--before--BorderBlockStartWidth: var(--pf-t--global--border--width--box--default); --pf-v6-c-jump-links__list--before--BorderInlineEndWidth: 0; --pf-v6-c-jump-links__list--before--BorderBlockEndWidth: 0; --pf-v6-c-jump-links__list--before--BorderInlineStartWidth: 0; --pf-v6-c-jump-links--m-vertical__list--before--BorderInlineStartWidth: var(--pf-t--global--border--width--box--default); --pf-v6-c-jump-links--m-vertical__list--before--BorderBlockStartWidth: 0; --pf-v6-c-jump-links__list__list--MarginBlockStart: calc(var(--pf-t--global--spacer--sm) * -1); --pf-v6-c-jump-links__link--PaddingBlockStart: var(--pf-t--global--spacer--sm); --pf-v6-c-jump-links__link--PaddingInlineEnd: var(--pf-t--global--spacer--sm); --pf-v6-c-jump-links__link--PaddingBlockEnd: var(--pf-t--global--spacer--sm); --pf-v6-c-jump-links__link--PaddingInlineStart: var(--pf-t--global--spacer--sm); --pf-v6-c-jump-links__list__list__link--PaddingBlockStart: var(--pf-t--global--spacer--sm); --pf-v6-c-jump-links__list__list__link--PaddingInlineStart: var(--pf-t--global--spacer--lg); --pf-v6-c-jump-links__list__list__link--PaddingBlockEnd: var(--pf-t--global--spacer--sm); --pf-v6-c-jump-links__link--OutlineOffset: calc(-1 * var(--pf-t--global--spacer--sm)); --pf-v6-c-jump-links__link--before--Height: var(--pf-v6-c-jump-links__item--m-current__link--before--BorderBlockStartWidth); --pf-v6-c-jump-links__link--before--Width: auto; --pf-v6-c-jump-links__link--before--BorderBlockStartWidth: 0; --pf-v6-c-jump-links__link--before--BorderInlineEndWidth: 0; --pf-v6-c-jump-links__link--before--BorderBlockEndWidth: 0; --pf-v6-c-jump-links__link--before--BorderInlineStartWidth: 0; --pf-v6-c-jump-links__link--before--BorderColor: transparent; --pf-v6-c-jump-links__link--before--BorderRadius: var(--pf-t--global--border--radius--pill); --pf-v6-c-jump-links__item--m-current__link--before--BorderBlockStartWidth: var(--pf-t--global--border--width--extra-strong); --pf-v6-c-jump-links__item--m-current__link--before--BorderInlineStartWidth: 0; --pf-v6-c-jump-links__item--m-current__link--before--BorderColor: var(--pf-t--global--color--brand--accent--default); --pf-v6-c-jump-links--m-vertical__link--before--Height: auto; --pf-v6-c-jump-links--m-vertical__link--before--Width: var(--pf-v6-c-jump-links__item--m-current__link--before--BorderInlineStartWidth); --pf-v6-c-jump-links--m-vertical__item--m-current__link--before--BorderBlockStartWidth: 0; --pf-v6-c-jump-links--m-vertical__item--m-current__link--before--BorderInlineStartWidth: var(--pf-t--global--border--width--extra-strong); --pf-v6-c-jump-links__link-text--Color: var(--pf-t--global--text--color--subtle); --pf-v6-c-jump-links__link--hover__link-text--Color: var(--pf-t--global--text--color--subtle); --pf-v6-c-jump-links__item--m-current__link-text--Color: var(--pf-t--global--text--color--regular); --pf-v6-c-jump-links__label--MarginBlockEnd: var(--pf-t--global--spacer--md); --pf-v6-c-jump-links__label--Display: block; --pf-v6-c-jump-links__toggle--MarginBlockEnd: 0; --pf-v6-c-jump-links--m-expanded__toggle--MarginBlockEnd: var(--pf-t--global--spacer--sm); --pf-v6-c-jump-links__toggle--Display: none; --pf-v6-c-jump-links__toggle-icon--Color: var(--pf-t--global--icon--color--regular); --pf-v6-c-jump-links__toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default); --pf-v6-c-jump-links__toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default); --pf-v6-c-jump-links__toggle-icon--Rotate: 0; --pf-v6-c-jump-links--m-expanded__toggle-icon--Rotate: -180deg; } .pf-v6-c-jump-links { display: flex; } .pf-v6-c-jump-links.pf-m-center { justify-content: center; } .pf-v6-c-jump-links.pf-m-center .pf-v6-c-jump-links__main { align-items: center; } .pf-v6-c-jump-links.pf-m-vertical, .pf-v6-c-jump-links.pf-m-expandable { --pf-v6-c-jump-links__list--PaddingBlockStart: var(--pf-v6-c-jump-links--m-vertical__list--PaddingBlockStart); --pf-v6-c-jump-links__list--PaddingInlineEnd: var(--pf-v6-c-jump-links--m-vertical__list--PaddingInlineEnd); --pf-v6-c-jump-links__list--PaddingBlockEnd: var(--pf-v6-c-jump-links--m-vertical__list--PaddingBlockEnd); --pf-v6-c-jump-links__list--PaddingInlineStart: var(--pf-v6-c-jump-links--m-vertical__list--PaddingInlineStart); --pf-v6-c-jump-links__link--before--Width: var(--pf-v6-c-jump-links--m-vertical__link--before--Width); --pf-v6-c-jump-links__link--before--Height: var(--pf-v6-c-jump-links--m-vertical__link--before--Height); --pf-v6-c-jump-links__list--before--BorderBlockStartWidth: var(--pf-v6-c-jump-links--m-vertical__list--before--BorderBlockStartWidth); --pf-v6-c-jump-links__list--before--BorderInlineStartWidth: var(--pf-v6-c-jump-links--m-vertical__list--before--BorderInlineStartWidth); --pf-v6-c-jump-links__item--m-current__link--before--BorderBlockStartWidth: var(--pf-v6-c-jump-links--m-vertical__item--m-current__link--before--BorderBlockStartWidth); --pf-v6-c-jump-links__item--m-current__link--before--BorderInlineStartWidth: var(--pf-v6-c-jump-links--m-vertical__item--m-current__link--before--BorderInlineStartWidth); --pf-v6-c-jump-links__list--FlexDirection: var(--pf-v6-c-jump-links--m-vertical__list--FlexDirection); flex-direction: column; } .pf-v6-c-jump-links.pf-m-expandable { --pf-v6-c-jump-links__list--Display: none; --pf-v6-c-jump-links__toggle--Display: block; --pf-v6-c-jump-links__label--Display: none; } .pf-v6-c-jump-links.pf-m-non-expandable { --pf-v6-c-jump-links__list--Display: flex; --pf-v6-c-jump-links__toggle--Display: none; --pf-v6-c-jump-links__label--Display: block; } @media (min-width: 36rem) { .pf-v6-c-jump-links.pf-m-expandable-on-sm { --pf-v6-c-jump-links__list--Display: none; --pf-v6-c-jump-links__toggle--Display: block; --pf-v6-c-jump-links__label--Display: none; } .pf-v6-c-jump-links.pf-m-non-expandable-on-sm { --pf-v6-c-jump-links__list--Display: flex; --pf-v6-c-jump-links__toggle--Display: none; --pf-v6-c-jump-links__label--Display: block; } } @media (min-width: 48rem) { .pf-v6-c-jump-links.pf-m-expandable-on-md { --pf-v6-c-jump-links__list--Display: none; --pf-v6-c-jump-links__toggle--Display: block; --pf-v6-c-jump-links__label--Display: none; } .pf-v6-c-jump-links.pf-m-non-expandable-on-md { --pf-v6-c-jump-links__list--Display: flex; --pf-v6-c-jump-links__toggle--Display: none; --pf-v6-c-jump-links__label--Display: block; } } @media (min-width: 62rem) { .pf-v6-c-jump-links.pf-m-expandable-on-lg { --pf-v6-c-jump-links__list--Display: none; --pf-v6-c-jump-links__toggle--Display: block; --pf-v6-c-jump-links__label--Display: none; } .pf-v6-c-jump-links.pf-m-non-expandable-on-lg { --pf-v6-c-jump-links__list--Display: flex; --pf-v6-c-jump-links__toggle--Display: none; --pf-v6-c-jump-links__label--Display: block; } } @media (min-width: 75rem) { .pf-v6-c-jump-links.pf-m-expandable-on-xl { --pf-v6-c-jump-links__list--Display: none; --pf-v6-c-jump-links__toggle--Display: block; --pf-v6-c-jump-links__label--Display: none; } .pf-v6-c-jump-links.pf-m-non-expandable-on-xl { --pf-v6-c-jump-links__list--Display: flex; --pf-v6-c-jump-links__toggle--Display: none; --pf-v6-c-jump-links__label--Display: block; } } @media (min-width: 90.625rem) { .pf-v6-c-jump-links.pf-m-expandable-on-2xl { --pf-v6-c-jump-links__list--Display: none; --pf-v6-c-jump-links__toggle--Display: block; --pf-v6-c-jump-links__label--Display: none; } .pf-v6-c-jump-links.pf-m-non-expandable-on-2xl { --pf-v6-c-jump-links__list--Display: flex; --pf-v6-c-jump-links__toggle--Display: none; --pf-v6-c-jump-links__label--Display: block; } } .pf-v6-c-jump-links.pf-m-expanded { --pf-v6-c-jump-links__list--Display: flex; --pf-v6-c-jump-links__toggle--MarginBlockEnd: var(--pf-v6-c-jump-links--m-expanded__toggle--MarginBlockEnd); --pf-v6-c-jump-links__toggle-icon--Rotate: var(--pf-v6-c-jump-links--m-expanded__toggle-icon--Rotate); --pf-v6-c-jump-links__toggle-icon--Color: var(--pf-v6-c-jump-links--m-expanded__toggle-icon--Color); } .pf-v6-c-jump-links__list { position: relative; display: var(--pf-v6-c-jump-links__list--Display); flex-direction: var(--pf-v6-c-jump-links__list--FlexDirection); padding-block-start: var(--pf-v6-c-jump-links__list--PaddingBlockStart); padding-block-end: var(--pf-v6-c-jump-links__list--PaddingBlockEnd); padding-inline-start: var(--pf-v6-c-jump-links__list--PaddingInlineStart); padding-inline-end: var(--pf-v6-c-jump-links__list--PaddingInlineEnd); } .pf-v6-c-jump-links__list::before { position: absolute; inset: 0; pointer-events: none; content: ""; border: solid var(--pf-v6-c-jump-links__list--before--BorderColor); border-block-start-width: var(--pf-v6-c-jump-links__list--before--BorderBlockStartWidth); border-block-end-width: var(--pf-v6-c-jump-links__list--before--BorderBlockEndWidth); border-inline-start-width: var(--pf-v6-c-jump-links__list--before--BorderInlineStartWidth); border-inline-end-width: var(--pf-v6-c-jump-links__list--before--BorderInlineEndWidth); } .pf-v6-c-jump-links__list .pf-v6-c-jump-links__list { --pf-v6-c-jump-links__list--PaddingBlockStart: 0; --pf-v6-c-jump-links__list--PaddingBlockEnd: 0; --pf-v6-c-jump-links__link--PaddingBlockStart: var(--pf-v6-c-jump-links__list__list__link--PaddingBlockStart); --pf-v6-c-jump-links__link--PaddingBlockEnd: var(--pf-v6-c-jump-links__list__list__link--PaddingBlockEnd); --pf-v6-c-jump-links__link--PaddingInlineStart: var(--pf-v6-c-jump-links__list__list__link--PaddingInlineStart); margin-block-start: var(--pf-v6-c-jump-links__list__list--MarginBlockStart); } .pf-v6-c-jump-links__link { position: relative; display: flex; flex: 1; padding-block-start: var(--pf-v6-c-jump-links__link--PaddingBlockStart); padding-block-end: var(--pf-v6-c-jump-links__link--PaddingBlockEnd); padding-inline-start: var(--pf-v6-c-jump-links__link--PaddingInlineStart); padding-inline-end: var(--pf-v6-c-jump-links__link--PaddingInlineEnd); text-decoration-line: none; outline-offset: var(--pf-v6-c-jump-links__link--OutlineOffset); } .pf-v6-c-jump-links__link:is(:hover, :focus) { --pf-v6-c-jump-links__link-text--Color: var(--pf-v6-c-jump-links__link--hover__link-text--Color); } .pf-v6-c-jump-links__link::before { position: absolute; inset: 0; width: var(--pf-v6-c-jump-links__link--before--Width); height: var(--pf-v6-c-jump-links__link--before--Height); pointer-events: none; content: ""; border-color: var(--pf-v6-c-jump-links__link--before--BorderColor); border-style: solid; border-block-start-width: var(--pf-v6-c-jump-links__link--before--BorderBlockStartWidth); border-block-end-width: var(--pf-v6-c-jump-links__link--before--BorderBlockEndWidth); border-inline-start-width: var(--pf-v6-c-jump-links__link--before--BorderInlineStartWidth); border-inline-end-width: var(--pf-v6-c-jump-links__link--before--BorderInlineEndWidth); border-radius: var(--pf-v6-c-jump-links__link--before--BorderRadius); } .pf-v6-c-jump-links__item { --pf-v6-c-jump-links__list--before--BorderColor: transparent; } .pf-v6-c-jump-links__item.pf-m-current > .pf-v6-c-jump-links__link { --pf-v6-c-jump-links__link--before--BorderBlockStartWidth: var(--pf-v6-c-jump-links__item--m-current__link--before--BorderBlockStartWidth); --pf-v6-c-jump-links__link--before--BorderInlineStartWidth: var(--pf-v6-c-jump-links__item--m-current__link--before--BorderInlineStartWidth); --pf-v6-c-jump-links__link--before--BorderColor: var(--pf-v6-c-jump-links__item--m-current__link--before--BorderColor); --pf-v6-c-jump-links__link-text--Color: var(--pf-v6-c-jump-links__item--m-current__link-text--Color); } .pf-v6-c-jump-links__link-text { color: var(--pf-v6-c-jump-links__link-text--Color); } .pf-v6-c-jump-links__label { display: var(--pf-v6-c-jump-links__label--Display); margin-block-end: var(--pf-v6-c-jump-links__label--MarginBlockEnd); } .pf-v6-c-jump-links__main { display: flex; flex-direction: column; } .pf-v6-c-jump-links__toggle { display: var(--pf-v6-c-jump-links__toggle--Display); margin-block-end: var(--pf-v6-c-jump-links__toggle--MarginBlockEnd); } :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-jump-links__toggle-icon { scale: -1 1; } .pf-v6-c-jump-links__toggle-icon { display: inline-block; color: var(--pf-v6-c-jump-links__toggle-icon--Color); transform: rotate(var(--pf-v6-c-jump-links__toggle-icon--Rotate)); transition-timing-function: var(--pf-v6-c-jump-links__toggle-icon--TransitionTimingFunction); transition-duration: var(--pf-v6-c-jump-links__toggle-icon--TransitionDuration); transition-property: transform; } /* PatternFly component: DataList/data-list */ @media screen and (min-width: 48rem) { .pf-v6-c-data-list:not([class*=pf-m-grid]) { --pf-v6-c-data-list__cell--cell--PaddingBlockStart: var(--pf-v6-c-data-list__cell--cell--md--PaddingBlockStart); --pf-v6-c-data-list__cell--PaddingBlockEnd: var(--pf-v6-c-data-list__cell--md--PaddingBlockEnd); --pf-v6-c-data-list__item-control--MarginInlineEnd: var(--pf-v6-c-data-list__item-control--md--MarginInlineEnd); --pf-v6-c-data-list__item-action--MarginInlineStart: var(--pf-v6-c-data-list__item-action--md--MarginInlineStart); --pf-v6-c-data-list__expandable-content-body--PaddingBlockStart: var(--pf-v6-c-data-list__expandable-content-body--md--PaddingBlockStart); --pf-v6-c-data-list__expandable-content-body--PaddingBlockEnd: var(--pf-v6-c-data-list__expandable-content-body--md--PaddingBlockEnd); --pf-v6-c-data-list--m-compact__cell--PaddingBlockEnd: var(--pf-v6-c-data-list--m-compact__cell--md--PaddingBlockEnd); --pf-v6-c-data-list--m-compact__cell-cell--PaddingBlockStart: var(--pf-v6-c-data-list--m-compact__cell-cell--md--PaddingBlockStart); } } @media screen and (min-width: 48rem) and (min-width: 75rem) { .pf-v6-c-data-list:not([class*=pf-m-grid]) { --pf-v6-c-data-list__item-row--PaddingInlineEnd: var(--pf-v6-c-data-list__item-row--xl--PaddingInlineEnd); --pf-v6-c-data-list__item-row--PaddingInlineStart: var(--pf-v6-c-data-list__item-row--xl--PaddingInlineStart); --pf-v6-c-data-list__expandable-content-body--PaddingInlineEnd: var(--pf-v6-c-data-list__expandable-content-body--xl--PaddingInlineEnd); --pf-v6-c-data-list__expandable-content-body--PaddingInlineStart: var(--pf-v6-c-data-list__expandable-content-body--xl--PaddingInlineStart); } } @media screen and (min-width: 48rem) { .pf-v6-c-data-list:not([class*=pf-m-grid]) .pf-v6-c-data-list__item-content { display: flex; flex-grow: 1; flex-wrap: wrap; padding-block-end: var(--pf-v6-c-data-list__item-content--md--PaddingBlockEnd); } .pf-v6-c-data-list:not([class*=pf-m-grid]) .pf-v6-c-data-list__cell:not(:last-child):not(.pf-m-icon) { margin-inline-end: var(--pf-v6-c-data-list__cell--MarginInlineEnd); } .pf-v6-c-data-list:not([class*=pf-m-grid]) .pf-v6-c-data-list__cell + .pf-v6-c-data-list__cell { flex: 1; order: initial; } .pf-v6-c-data-list:not([class*=pf-m-grid]) .pf-v6-c-data-list__cell.pf-m-align-right { margin-inline-start: auto; } .pf-v6-c-data-list:not([class*=pf-m-grid]) .pf-v6-c-data-list__cell.pf-m-no-fill { flex: none; } .pf-v6-c-data-list:not([class*=pf-m-grid]) .pf-v6-c-data-list__cell.pf-m-flex-2 { flex-grow: 2; } .pf-v6-c-data-list:not([class*=pf-m-grid]) .pf-v6-c-data-list__cell.pf-m-flex-3 { flex-grow: 3; } .pf-v6-c-data-list:not([class*=pf-m-grid]) .pf-v6-c-data-list__cell.pf-m-flex-4 { flex-grow: 4; } .pf-v6-c-data-list:not([class*=pf-m-grid]) .pf-v6-c-data-list__cell.pf-m-flex-5 { flex-grow: 5; } .pf-v6-c-data-list:not([class*=pf-m-grid]) .pf-v6-c-data-list__expandable-content { max-height: initial; overflow-y: visible; } } @media screen and (min-width: 0) { .pf-v6-c-data-list.pf-m-grid-none { --pf-v6-c-data-list__cell--cell--PaddingBlockStart: var(--pf-v6-c-data-list__cell--cell--md--PaddingBlockStart); --pf-v6-c-data-list__cell--PaddingBlockEnd: var(--pf-v6-c-data-list__cell--md--PaddingBlockEnd); --pf-v6-c-data-list__item-control--MarginInlineEnd: var(--pf-v6-c-data-list__item-control--md--MarginInlineEnd); --pf-v6-c-data-list__item-action--MarginInlineStart: var(--pf-v6-c-data-list__item-action--md--MarginInlineStart); --pf-v6-c-data-list__expandable-content-body--PaddingBlockStart: var(--pf-v6-c-data-list__expandable-content-body--md--PaddingBlockStart); --pf-v6-c-data-list__expandable-content-body--PaddingBlockEnd: var(--pf-v6-c-data-list__expandable-content-body--md--PaddingBlockEnd); --pf-v6-c-data-list--m-compact__cell--PaddingBlockEnd: var(--pf-v6-c-data-list--m-compact__cell--md--PaddingBlockEnd); --pf-v6-c-data-list--m-compact__cell-cell--PaddingBlockStart: var(--pf-v6-c-data-list--m-compact__cell-cell--md--PaddingBlockStart); } } @media screen and (min-width: 0) and (min-width: 75rem) { .pf-v6-c-data-list.pf-m-grid-none { --pf-v6-c-data-list__item-row--PaddingInlineEnd: var(--pf-v6-c-data-list__item-row--xl--PaddingInlineEnd); --pf-v6-c-data-list__item-row--PaddingInlineStart: var(--pf-v6-c-data-list__item-row--xl--PaddingInlineStart); --pf-v6-c-data-list__expandable-content-body--PaddingInlineEnd: var(--pf-v6-c-data-list__expandable-content-body--xl--PaddingInlineEnd); --pf-v6-c-data-list__expandable-content-body--PaddingInlineStart: var(--pf-v6-c-data-list__expandable-content-body--xl--PaddingInlineStart); } } @media screen and (min-width: 0) { .pf-v6-c-data-list.pf-m-grid-none .pf-v6-c-data-list__item-content { display: flex; flex-grow: 1; flex-wrap: wrap; padding-block-end: var(--pf-v6-c-data-list__item-content--md--PaddingBlockEnd); } .pf-v6-c-data-list.pf-m-grid-none .pf-v6-c-data-list__cell:not(:last-child):not(.pf-m-icon) { margin-inline-end: var(--pf-v6-c-data-list__cell--MarginInlineEnd); } .pf-v6-c-data-list.pf-m-grid-none .pf-v6-c-data-list__cell + .pf-v6-c-data-list__cell { flex: 1; order: initial; } .pf-v6-c-data-list.pf-m-grid-none .pf-v6-c-data-list__cell.pf-m-align-right { margin-inline-start: auto; } .pf-v6-c-data-list.pf-m-grid-none .pf-v6-c-data-list__cell.pf-m-no-fill { flex: none; } .pf-v6-c-data-list.pf-m-grid-none .pf-v6-c-data-list__cell.pf-m-flex-2 { flex-grow: 2; } .pf-v6-c-data-list.pf-m-grid-none .pf-v6-c-data-list__cell.pf-m-flex-3 { flex-grow: 3; } .pf-v6-c-data-list.pf-m-grid-none .pf-v6-c-data-list__cell.pf-m-flex-4 { flex-grow: 4; } .pf-v6-c-data-list.pf-m-grid-none .pf-v6-c-data-list__cell.pf-m-flex-5 { flex-grow: 5; } .pf-v6-c-data-list.pf-m-grid-none .pf-v6-c-data-list__expandable-content { max-height: initial; overflow-y: visible; } } @media screen and (min-width: 36rem) { .pf-v6-c-data-list.pf-m-grid-sm { --pf-v6-c-data-list__cell--cell--PaddingBlockStart: var(--pf-v6-c-data-list__cell--cell--md--PaddingBlockStart); --pf-v6-c-data-list__cell--PaddingBlockEnd: var(--pf-v6-c-data-list__cell--md--PaddingBlockEnd); --pf-v6-c-data-list__item-control--MarginInlineEnd: var(--pf-v6-c-data-list__item-control--md--MarginInlineEnd); --pf-v6-c-data-list__item-action--MarginInlineStart: var(--pf-v6-c-data-list__item-action--md--MarginInlineStart); --pf-v6-c-data-list__expandable-content-body--PaddingBlockStart: var(--pf-v6-c-data-list__expandable-content-body--md--PaddingBlockStart); --pf-v6-c-data-list__expandable-content-body--PaddingBlockEnd: var(--pf-v6-c-data-list__expandable-content-body--md--PaddingBlockEnd); --pf-v6-c-data-list--m-compact__cell--PaddingBlockEnd: var(--pf-v6-c-data-list--m-compact__cell--md--PaddingBlockEnd); --pf-v6-c-data-list--m-compact__cell-cell--PaddingBlockStart: var(--pf-v6-c-data-list--m-compact__cell-cell--md--PaddingBlockStart); } } @media screen and (min-width: 36rem) and (min-width: 75rem) { .pf-v6-c-data-list.pf-m-grid-sm { --pf-v6-c-data-list__item-row--PaddingInlineEnd: var(--pf-v6-c-data-list__item-row--xl--PaddingInlineEnd); --pf-v6-c-data-list__item-row--PaddingInlineStart: var(--pf-v6-c-data-list__item-row--xl--PaddingInlineStart); --pf-v6-c-data-list__expandable-content-body--PaddingInlineEnd: var(--pf-v6-c-data-list__expandable-content-body--xl--PaddingInlineEnd); --pf-v6-c-data-list__expandable-content-body--PaddingInlineStart: var(--pf-v6-c-data-list__expandable-content-body--xl--PaddingInlineStart); } } @media screen and (min-width: 36rem) { .pf-v6-c-data-list.pf-m-grid-sm .pf-v6-c-data-list__item-content { display: flex; flex-grow: 1; flex-wrap: wrap; padding-block-end: var(--pf-v6-c-data-list__item-content--md--PaddingBlockEnd); } .pf-v6-c-data-list.pf-m-grid-sm .pf-v6-c-data-list__cell:not(:last-child):not(.pf-m-icon) { margin-inline-end: var(--pf-v6-c-data-list__cell--MarginInlineEnd); } .pf-v6-c-data-list.pf-m-grid-sm .pf-v6-c-data-list__cell + .pf-v6-c-data-list__cell { flex: 1; order: initial; } .pf-v6-c-data-list.pf-m-grid-sm .pf-v6-c-data-list__cell.pf-m-align-right { margin-inline-start: auto; } .pf-v6-c-data-list.pf-m-grid-sm .pf-v6-c-data-list__cell.pf-m-no-fill { flex: none; } .pf-v6-c-data-list.pf-m-grid-sm .pf-v6-c-data-list__cell.pf-m-flex-2 { flex-grow: 2; } .pf-v6-c-data-list.pf-m-grid-sm .pf-v6-c-data-list__cell.pf-m-flex-3 { flex-grow: 3; } .pf-v6-c-data-list.pf-m-grid-sm .pf-v6-c-data-list__cell.pf-m-flex-4 { flex-grow: 4; } .pf-v6-c-data-list.pf-m-grid-sm .pf-v6-c-data-list__cell.pf-m-flex-5 { flex-grow: 5; } .pf-v6-c-data-list.pf-m-grid-sm .pf-v6-c-data-list__expandable-content { max-height: initial; overflow-y: visible; } } @media screen and (min-width: 48rem) { .pf-v6-c-data-list.pf-m-grid-md { --pf-v6-c-data-list__cell--cell--PaddingBlockStart: var(--pf-v6-c-data-list__cell--cell--md--PaddingBlockStart); --pf-v6-c-data-list__cell--PaddingBlockEnd: var(--pf-v6-c-data-list__cell--md--PaddingBlockEnd); --pf-v6-c-data-list__item-control--MarginInlineEnd: var(--pf-v6-c-data-list__item-control--md--MarginInlineEnd); --pf-v6-c-data-list__item-action--MarginInlineStart: var(--pf-v6-c-data-list__item-action--md--MarginInlineStart); --pf-v6-c-data-list__expandable-content-body--PaddingBlockStart: var(--pf-v6-c-data-list__expandable-content-body--md--PaddingBlockStart); --pf-v6-c-data-list__expandable-content-body--PaddingBlockEnd: var(--pf-v6-c-data-list__expandable-content-body--md--PaddingBlockEnd); --pf-v6-c-data-list--m-compact__cell--PaddingBlockEnd: var(--pf-v6-c-data-list--m-compact__cell--md--PaddingBlockEnd); --pf-v6-c-data-list--m-compact__cell-cell--PaddingBlockStart: var(--pf-v6-c-data-list--m-compact__cell-cell--md--PaddingBlockStart); } } @media screen and (min-width: 48rem) and (min-width: 75rem) { .pf-v6-c-data-list.pf-m-grid-md { --pf-v6-c-data-list__item-row--PaddingInlineEnd: var(--pf-v6-c-data-list__item-row--xl--PaddingInlineEnd); --pf-v6-c-data-list__item-row--PaddingInlineStart: var(--pf-v6-c-data-list__item-row--xl--PaddingInlineStart); --pf-v6-c-data-list__expandable-content-body--PaddingInlineEnd: var(--pf-v6-c-data-list__expandable-content-body--xl--PaddingInlineEnd); --pf-v6-c-data-list__expandable-content-body--PaddingInlineStart: var(--pf-v6-c-data-list__expandable-content-body--xl--PaddingInlineStart); } } @media screen and (min-width: 48rem) { .pf-v6-c-data-list.pf-m-grid-md .pf-v6-c-data-list__item-content { display: flex; flex-grow: 1; flex-wrap: wrap; padding-block-end: var(--pf-v6-c-data-list__item-content--md--PaddingBlockEnd); } .pf-v6-c-data-list.pf-m-grid-md .pf-v6-c-data-list__cell:not(:last-child):not(.pf-m-icon) { margin-inline-end: var(--pf-v6-c-data-list__cell--MarginInlineEnd); } .pf-v6-c-data-list.pf-m-grid-md .pf-v6-c-data-list__cell + .pf-v6-c-data-list__cell { flex: 1; order: initial; } .pf-v6-c-data-list.pf-m-grid-md .pf-v6-c-data-list__cell.pf-m-align-right { margin-inline-start: auto; } .pf-v6-c-data-list.pf-m-grid-md .pf-v6-c-data-list__cell.pf-m-no-fill { flex: none; } .pf-v6-c-data-list.pf-m-grid-md .pf-v6-c-data-list__cell.pf-m-flex-2 { flex-grow: 2; } .pf-v6-c-data-list.pf-m-grid-md .pf-v6-c-data-list__cell.pf-m-flex-3 { flex-grow: 3; } .pf-v6-c-data-list.pf-m-grid-md .pf-v6-c-data-list__cell.pf-m-flex-4 { flex-grow: 4; } .pf-v6-c-data-list.pf-m-grid-md .pf-v6-c-data-list__cell.pf-m-flex-5 { flex-grow: 5; } .pf-v6-c-data-list.pf-m-grid-md .pf-v6-c-data-list__expandable-content { max-height: initial; overflow-y: visible; } } @media screen and (min-width: 62rem) { .pf-v6-c-data-list.pf-m-grid-lg { --pf-v6-c-data-list__cell--cell--PaddingBlockStart: var(--pf-v6-c-data-list__cell--cell--md--PaddingBlockStart); --pf-v6-c-data-list__cell--PaddingBlockEnd: var(--pf-v6-c-data-list__cell--md--PaddingBlockEnd); --pf-v6-c-data-list__item-control--MarginInlineEnd: var(--pf-v6-c-data-list__item-control--md--MarginInlineEnd); --pf-v6-c-data-list__item-action--MarginInlineStart: var(--pf-v6-c-data-list__item-action--md--MarginInlineStart); --pf-v6-c-data-list__expandable-content-body--PaddingBlockStart: var(--pf-v6-c-data-list__expandable-content-body--md--PaddingBlockStart); --pf-v6-c-data-list__expandable-content-body--PaddingBlockEnd: var(--pf-v6-c-data-list__expandable-content-body--md--PaddingBlockEnd); --pf-v6-c-data-list--m-compact__cell--PaddingBlockEnd: var(--pf-v6-c-data-list--m-compact__cell--md--PaddingBlockEnd); --pf-v6-c-data-list--m-compact__cell-cell--PaddingBlockStart: var(--pf-v6-c-data-list--m-compact__cell-cell--md--PaddingBlockStart); } } @media screen and (min-width: 62rem) and (min-width: 75rem) { .pf-v6-c-data-list.pf-m-grid-lg { --pf-v6-c-data-list__item-row--PaddingInlineEnd: var(--pf-v6-c-data-list__item-row--xl--PaddingInlineEnd); --pf-v6-c-data-list__item-row--PaddingInlineStart: var(--pf-v6-c-data-list__item-row--xl--PaddingInlineStart); --pf-v6-c-data-list__expandable-content-body--PaddingInlineEnd: var(--pf-v6-c-data-list__expandable-content-body--xl--PaddingInlineEnd); --pf-v6-c-data-list__expandable-content-body--PaddingInlineStart: var(--pf-v6-c-data-list__expandable-content-body--xl--PaddingInlineStart); } } @media screen and (min-width: 62rem) { .pf-v6-c-data-list.pf-m-grid-lg .pf-v6-c-data-list__item-content { display: flex; flex-grow: 1; flex-wrap: wrap; padding-block-end: var(--pf-v6-c-data-list__item-content--md--PaddingBlockEnd); } .pf-v6-c-data-list.pf-m-grid-lg .pf-v6-c-data-list__cell:not(:last-child):not(.pf-m-icon) { margin-inline-end: var(--pf-v6-c-data-list__cell--MarginInlineEnd); } .pf-v6-c-data-list.pf-m-grid-lg .pf-v6-c-data-list__cell + .pf-v6-c-data-list__cell { flex: 1; order: initial; } .pf-v6-c-data-list.pf-m-grid-lg .pf-v6-c-data-list__cell.pf-m-align-right { margin-inline-start: auto; } .pf-v6-c-data-list.pf-m-grid-lg .pf-v6-c-data-list__cell.pf-m-no-fill { flex: none; } .pf-v6-c-data-list.pf-m-grid-lg .pf-v6-c-data-list__cell.pf-m-flex-2 { flex-grow: 2; } .pf-v6-c-data-list.pf-m-grid-lg .pf-v6-c-data-list__cell.pf-m-flex-3 { flex-grow: 3; } .pf-v6-c-data-list.pf-m-grid-lg .pf-v6-c-data-list__cell.pf-m-flex-4 { flex-grow: 4; } .pf-v6-c-data-list.pf-m-grid-lg .pf-v6-c-data-list__cell.pf-m-flex-5 { flex-grow: 5; } .pf-v6-c-data-list.pf-m-grid-lg .pf-v6-c-data-list__expandable-content { max-height: initial; overflow-y: visible; } } @media screen and (min-width: 75rem) { .pf-v6-c-data-list.pf-m-grid-xl { --pf-v6-c-data-list__cell--cell--PaddingBlockStart: var(--pf-v6-c-data-list__cell--cell--md--PaddingBlockStart); --pf-v6-c-data-list__cell--PaddingBlockEnd: var(--pf-v6-c-data-list__cell--md--PaddingBlockEnd); --pf-v6-c-data-list__item-control--MarginInlineEnd: var(--pf-v6-c-data-list__item-control--md--MarginInlineEnd); --pf-v6-c-data-list__item-action--MarginInlineStart: var(--pf-v6-c-data-list__item-action--md--MarginInlineStart); --pf-v6-c-data-list__expandable-content-body--PaddingBlockStart: var(--pf-v6-c-data-list__expandable-content-body--md--PaddingBlockStart); --pf-v6-c-data-list__expandable-content-body--PaddingBlockEnd: var(--pf-v6-c-data-list__expandable-content-body--md--PaddingBlockEnd); --pf-v6-c-data-list--m-compact__cell--PaddingBlockEnd: var(--pf-v6-c-data-list--m-compact__cell--md--PaddingBlockEnd); --pf-v6-c-data-list--m-compact__cell-cell--PaddingBlockStart: var(--pf-v6-c-data-list--m-compact__cell-cell--md--PaddingBlockStart); } } @media screen and (min-width: 75rem) and (min-width: 75rem) { .pf-v6-c-data-list.pf-m-grid-xl { --pf-v6-c-data-list__item-row--PaddingInlineEnd: var(--pf-v6-c-data-list__item-row--xl--PaddingInlineEnd); --pf-v6-c-data-list__item-row--PaddingInlineStart: var(--pf-v6-c-data-list__item-row--xl--PaddingInlineStart); --pf-v6-c-data-list__expandable-content-body--PaddingInlineEnd: var(--pf-v6-c-data-list__expandable-content-body--xl--PaddingInlineEnd); --pf-v6-c-data-list__expandable-content-body--PaddingInlineStart: var(--pf-v6-c-data-list__expandable-content-body--xl--PaddingInlineStart); } } @media screen and (min-width: 75rem) { .pf-v6-c-data-list.pf-m-grid-xl .pf-v6-c-data-list__item-content { display: flex; flex-grow: 1; flex-wrap: wrap; padding-block-end: var(--pf-v6-c-data-list__item-content--md--PaddingBlockEnd); } .pf-v6-c-data-list.pf-m-grid-xl .pf-v6-c-data-list__cell:not(:last-child):not(.pf-m-icon) { margin-inline-end: var(--pf-v6-c-data-list__cell--MarginInlineEnd); } .pf-v6-c-data-list.pf-m-grid-xl .pf-v6-c-data-list__cell + .pf-v6-c-data-list__cell { flex: 1; order: initial; } .pf-v6-c-data-list.pf-m-grid-xl .pf-v6-c-data-list__cell.pf-m-align-right { margin-inline-start: auto; } .pf-v6-c-data-list.pf-m-grid-xl .pf-v6-c-data-list__cell.pf-m-no-fill { flex: none; } .pf-v6-c-data-list.pf-m-grid-xl .pf-v6-c-data-list__cell.pf-m-flex-2 { flex-grow: 2; } .pf-v6-c-data-list.pf-m-grid-xl .pf-v6-c-data-list__cell.pf-m-flex-3 { flex-grow: 3; } .pf-v6-c-data-list.pf-m-grid-xl .pf-v6-c-data-list__cell.pf-m-flex-4 { flex-grow: 4; } .pf-v6-c-data-list.pf-m-grid-xl .pf-v6-c-data-list__cell.pf-m-flex-5 { flex-grow: 5; } .pf-v6-c-data-list.pf-m-grid-xl .pf-v6-c-data-list__expandable-content { max-height: initial; overflow-y: visible; } } @media screen and (min-width: 90.625rem) { .pf-v6-c-data-list.pf-m-grid-2xl { --pf-v6-c-data-list__cell--cell--PaddingBlockStart: var(--pf-v6-c-data-list__cell--cell--md--PaddingBlockStart); --pf-v6-c-data-list__cell--PaddingBlockEnd: var(--pf-v6-c-data-list__cell--md--PaddingBlockEnd); --pf-v6-c-data-list__item-control--MarginInlineEnd: var(--pf-v6-c-data-list__item-control--md--MarginInlineEnd); --pf-v6-c-data-list__item-action--MarginInlineStart: var(--pf-v6-c-data-list__item-action--md--MarginInlineStart); --pf-v6-c-data-list__expandable-content-body--PaddingBlockStart: var(--pf-v6-c-data-list__expandable-content-body--md--PaddingBlockStart); --pf-v6-c-data-list__expandable-content-body--PaddingBlockEnd: var(--pf-v6-c-data-list__expandable-content-body--md--PaddingBlockEnd); --pf-v6-c-data-list--m-compact__cell--PaddingBlockEnd: var(--pf-v6-c-data-list--m-compact__cell--md--PaddingBlockEnd); --pf-v6-c-data-list--m-compact__cell-cell--PaddingBlockStart: var(--pf-v6-c-data-list--m-compact__cell-cell--md--PaddingBlockStart); } } @media screen and (min-width: 90.625rem) and (min-width: 75rem) { .pf-v6-c-data-list.pf-m-grid-2xl { --pf-v6-c-data-list__item-row--PaddingInlineEnd: var(--pf-v6-c-data-list__item-row--xl--PaddingInlineEnd); --pf-v6-c-data-list__item-row--PaddingInlineStart: var(--pf-v6-c-data-list__item-row--xl--PaddingInlineStart); --pf-v6-c-data-list__expandable-content-body--PaddingInlineEnd: var(--pf-v6-c-data-list__expandable-content-body--xl--PaddingInlineEnd); --pf-v6-c-data-list__expandable-content-body--PaddingInlineStart: var(--pf-v6-c-data-list__expandable-content-body--xl--PaddingInlineStart); } } @media screen and (min-width: 90.625rem) { .pf-v6-c-data-list.pf-m-grid-2xl .pf-v6-c-data-list__item-content { display: flex; flex-grow: 1; flex-wrap: wrap; padding-block-end: var(--pf-v6-c-data-list__item-content--md--PaddingBlockEnd); } .pf-v6-c-data-list.pf-m-grid-2xl .pf-v6-c-data-list__cell:not(:last-child):not(.pf-m-icon) { margin-inline-end: var(--pf-v6-c-data-list__cell--MarginInlineEnd); } .pf-v6-c-data-list.pf-m-grid-2xl .pf-v6-c-data-list__cell + .pf-v6-c-data-list__cell { flex: 1; order: initial; } .pf-v6-c-data-list.pf-m-grid-2xl .pf-v6-c-data-list__cell.pf-m-align-right { margin-inline-start: auto; } .pf-v6-c-data-list.pf-m-grid-2xl .pf-v6-c-data-list__cell.pf-m-no-fill { flex: none; } .pf-v6-c-data-list.pf-m-grid-2xl .pf-v6-c-data-list__cell.pf-m-flex-2 { flex-grow: 2; } .pf-v6-c-data-list.pf-m-grid-2xl .pf-v6-c-data-list__cell.pf-m-flex-3 { flex-grow: 3; } .pf-v6-c-data-list.pf-m-grid-2xl .pf-v6-c-data-list__cell.pf-m-flex-4 { flex-grow: 4; } .pf-v6-c-data-list.pf-m-grid-2xl .pf-v6-c-data-list__cell.pf-m-flex-5 { flex-grow: 5; } .pf-v6-c-data-list.pf-m-grid-2xl .pf-v6-c-data-list__expandable-content { max-height: initial; overflow-y: visible; } } .pf-v6-c-data-list { --pf-v6-c-data-list--FontSize: var( --pf-t--global--font--size--body); --pf-v6-c-data-list--LineHeight: var(--pf-t--global--font--line-height--body); --pf-v6-c-data-list--BorderBlockStartColor: var(--pf-t--global--border--color--default); --pf-v6-c-data-list--BorderBlockStartWidth: var(--pf-t--global--border--width--strong); --pf-v6-c-data-list--sm--BorderBlockStartWidth: var(--pf-t--global--border--width--divider--default); --pf-v6-c-data-list--sm--BorderBlockStartColor: var(--pf-t--global--border--color--default); --pf-v6-c-data-list--MarginInlineStart: var(--pf-t--global--spacer--md); } @media screen and (min-width: 36rem) { .pf-v6-c-data-list { --pf-v6-c-data-list--BorderBlockStartColor: var(--pf-v6-c-data-list--sm--BorderBlockStartColor); --pf-v6-c-data-list--BorderBlockStartWidth: var(--pf-v6-c-data-list--sm--BorderBlockStartWidth); } } .pf-v6-c-data-list { --pf-v6-c-data-list__item--BackgroundColor: var(--pf-t--global--background--color--primary--default); --pf-v6-c-data-list--pf-m-plain__item--BackgroundColor: transparent; --pf-v6-c-data-list__item--hover--BackgroundColor: var(--pf-t--global--background--color--primary--hover); --pf-v6-c-data-list__item--m-selected--BackgroundColor: var(--pf-t--global--background--color--primary--clicked); --pf-v6-c-data-list__item--m-clickable--OutlineOffset: calc(-1 * var(--pf-t--global--spacer--xs)); --pf-v6-c-data-list__item--BorderBlockEndColor: var(--pf-t--global--border--color--default); --pf-v6-c-data-list__item--BorderBlockEndWidth: var(--pf-t--global--border--width--strong); --pf-v6-c-data-list__item--sm--BorderBlockEndWidth: var(--pf-t--global--border--width--divider--default); --pf-v6-c-data-list__item--sm--BorderBlockEndColor: var(--pf-t--global--border--color--default); } @media screen and (min-width: 36rem) { .pf-v6-c-data-list { --pf-v6-c-data-list__item--BorderBlockEndWidth: var(--pf-v6-c-data-list__item--sm--BorderBlockEndWidth); --pf-v6-c-data-list__item--BorderBlockEndColor: var(--pf-v6-c-data-list__item--sm--BorderBlockEndColor); } } .pf-v6-c-data-list { --pf-v6-c-data-list__item-row--PaddingInlineEnd: var(--pf-t--global--spacer--md); --pf-v6-c-data-list__item-row--PaddingInlineStart: var(--pf-t--global--spacer--md); --pf-v6-c-data-list__item-row--xl--PaddingInlineEnd: var(--pf-t--global--spacer--lg); --pf-v6-c-data-list__item-row--xl--PaddingInlineStart: var(--pf-t--global--spacer--lg); --pf-v6-c-data-list__item-content--md--PaddingBlockEnd: var(--pf-t--global--spacer--lg); --pf-v6-c-data-list__cell--PaddingBlockStart: var(--pf-t--global--spacer--lg); --pf-v6-c-data-list__cell--PaddingBlockEnd: var(--pf-t--global--spacer--lg); --pf-v6-c-data-list__cell--MarginInlineEnd: var(--pf-t--global--spacer--xl); --pf-v6-c-data-list__cell--md--PaddingBlockEnd: 0; --pf-v6-c-data-list__cell--m-icon--MarginInlineEnd: var(--pf-t--global--spacer--md); --pf-v6-c-data-list__cell--cell--PaddingBlockStart: 0; --pf-v6-c-data-list__cell--cell--md--PaddingBlockStart: var(--pf-t--global--spacer--lg); --pf-v6-c-data-list__cell--m-icon--cell--PaddingBlockStart: var(--pf-t--global--spacer--lg); --pf-v6-c-data-list--cell--MinWidth: initial; --pf-v6-c-data-list--cell--Overflow: visible; --pf-v6-c-data-list--cell--TextOverflow: clip; --pf-v6-c-data-list--cell--WhiteSpace: normal; --pf-v6-c-data-list--cell--WordBreak: normal; --pf-v6-c-data-list--cell--m-truncate--MinWidth: 5ch; --pf-v6-c-data-list__toggle--MarginInlineStart: calc(var(--pf-t--global--spacer--action--horizontal--plain--default) * -1); --pf-v6-c-data-list__toggle--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) * -1); --pf-v6-c-data-list__toggle--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) * -1); --pf-v6-c-data-list__toggle-icon--Height: calc(var(--pf-v6-c-data-list--FontSize) * var(--pf-v6-c-data-list--LineHeight)); --pf-v6-c-data-list__toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default); --pf-v6-c-data-list__toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default); --pf-v6-c-data-list__toggle-icon--Transition: transform var(--pf-v6-c-data-list__toggle-icon--TransitionDuration) var(--pf-v6-c-data-list__toggle-icon--TransitionTimingFunction); --pf-v6-c-data-list__toggle-icon--Rotate: 0; --pf-v6-c-data-list__item--m-expanded__toggle-icon--Rotate: -180deg; --pf-v6-c-data-list__item-draggable-button--BackgroundColor: transparent; --pf-v6-c-data-list__item-draggable-button--PaddingInlineStart: var(--pf-t--global--spacer--md); --pf-v6-c-data-list__item-draggable-button--PaddingInlineEnd: var(--pf-t--global--spacer--md); --pf-v6-c-data-list__item-draggable-button--MarginBlockStart: calc(var(--pf-t--global--spacer--lg) * -1); --pf-v6-c-data-list__item-draggable-button--MarginBlockEnd: calc(var(--pf-t--global--spacer--lg) * -1); --pf-v6-c-data-list__item-draggable-button--PaddingBlockStart: var(--pf-t--global--spacer--lg); --pf-v6-c-data-list__item-draggable-button--PaddingBlockEnd: var(--pf-t--global--spacer--lg); --pf-v6-c-data-list__item-draggable-button--MarginInlineStart: calc(var(--pf-t--global--spacer--md) * -1); --pf-v6-c-data-list__item-draggable-button-icon--Color: var(--pf-t--global--icon--color--subtle); --pf-v6-c-data-list__item-draggable-button--m-disabled__draggable-icon--Color: var(--pf-t--global--icon--color--disabled); --pf-v6-c-data-list__item-draggable-button--hover__draggable-icon--Color: var(--pf-t--global--icon--color--regular); --pf-v6-c-data-list__item-draggable-button--focus__draggable-icon--Color: var(--pf-t--global--icon--color--regular); --pf-v6-c-data-list__item--m-ghost-row--after--BackgroundColor: var(--pf-t--global--background--color--primary--default); --pf-v6-c-data-list__item--m-ghost-row--after--Opacity: .6; --pf-v6-c-data-list__item-control--PaddingBlockStart: var(--pf-t--global--spacer--lg); --pf-v6-c-data-list__item-control--PaddingBlockEnd: var(--pf-t--global--spacer--lg); --pf-v6-c-data-list__item-control--MarginInlineEnd: var(--pf-t--global--spacer--md); --pf-v6-c-data-list__item-control--md--MarginInlineEnd: var(--pf-t--global--spacer--xl); --pf-v6-c-data-list__item-control--not-last-child--MarginInlineEnd: var(--pf-t--global--spacer--md); --pf-v6-c-data-list__check--Height: calc(var(--pf-v6-c-data-list--FontSize) * var(--pf-v6-c-data-list--LineHeight)); --pf-v6-c-data-list__check--MarginBlockStart: -0.0625rem; --pf-v6-c-data-list__item-action--Display: flex; --pf-v6-c-data-list__item-action--PaddingBlockStart: var(--pf-t--global--spacer--lg); --pf-v6-c-data-list__item-action--PaddingBlockEnd: var(--pf-t--global--spacer--lg); --pf-v6-c-data-list__item-action--PaddingBlockStart--offset: var(--pf-t--global--spacer--control--vertical--default); --pf-v6-c-data-list__item-action--PaddingBlockEnd--offset: var(--pf-t--global--spacer--control--vertical--default); --pf-v6-c-data-list__item-action--MarginInlineStart: var(--pf-t--global--spacer--md); --pf-v6-c-data-list__item-action--md--MarginInlineStart: var(--pf-t--global--spacer--xl); --pf-v6-c-data-list__item-action--Gap: var(--pf-t--global--spacer--gap--action-to-action--default); --pf-v6-c-data-list__expandable-content--BackgroundColor: var( --pf-t--global--background--color--primary--default); --pf-v6-c-data-list__expandable-content--MarginBlockEnd: var(--pf-t--global--spacer--md); --pf-v6-c-data-list__expandable-content--MarginInlineStart: var(--pf-t--global--spacer--md); --pf-v6-c-data-list__expandable-content--MarginInlineEnd: var(--pf-t--global--spacer--md); --pf-v6-c-data-list__expandable-content--MaxHeight: 37.5rem; --pf-v6-c-data-list__expandable-content-body--PaddingBlockStart: var(--pf-t--global--spacer--md); --pf-v6-c-data-list__expandable-content-body--PaddingInlineEnd: var(--pf-t--global--spacer--md); --pf-v6-c-data-list__expandable-content-body--PaddingBlockEnd: var(--pf-t--global--spacer--md); --pf-v6-c-data-list__expandable-content-body--PaddingInlineStart: var(--pf-t--global--spacer--md); --pf-v6-c-data-list__expandable-content-body--md--PaddingBlockStart: var(--pf-t--global--spacer--lg); --pf-v6-c-data-list__expandable-content-body--xl--PaddingInlineEnd: var(--pf-t--global--spacer--lg); --pf-v6-c-data-list__expandable-content-body--md--PaddingBlockEnd: var(--pf-t--global--spacer--lg); --pf-v6-c-data-list__expandable-content-body--xl--PaddingInlineStart: var(--pf-t--global--spacer--lg); --pf-v6-c-data-list__expandable-content-body--BorderRadius: var(--pf-t--global--border--radius--small); --pf-v6-c-data-list--m-compact--FontSize: var(--pf-t--global--font--size--body--sm); --pf-v6-c-data-list--m-compact--LineHeight: var(--pf-t--global--font--line-height--body); --pf-v6-c-data-list--m-compact__check--FontSize: var(--pf-t--global--font--size--body--default); --pf-v6-c-data-list--m-compact__cell--PaddingBlockStart: var(--pf-t--global--spacer--sm); --pf-v6-c-data-list--m-compact__cell--PaddingBlockEnd: var(--pf-t--global--spacer--sm); --pf-v6-c-data-list--m-compact__cell--md--PaddingBlockEnd: 0; --pf-v6-c-data-list--m-compact__cell-cell--PaddingBlockStart: 0; --pf-v6-c-data-list--m-compact__cell-cell--md--PaddingBlockStart: var(--pf-t--global--spacer--sm); --pf-v6-c-data-list--m-compact__cell--cell--MarginInlineEnd: var(--pf-t--global--spacer--md); --pf-v6-c-data-list--m-compact__item-control--PaddingBlockStart: var(--pf-t--global--spacer--sm); --pf-v6-c-data-list--m-compact__item-control--PaddingBlockEnd: var(--pf-t--global--spacer--sm); --pf-v6-c-data-list--m-compact__item-control--MarginInlineEnd: var(--pf-t--global--spacer--md); --pf-v6-c-data-list--m-compact__item-action--PaddingBlockStart: var(--pf-t--global--spacer--sm); --pf-v6-c-data-list--m-compact__item-action--PaddingBlockEnd: var(--pf-t--global--spacer--sm); --pf-v6-c-data-list--m-compact__item-action--PaddingBlockStart--offset: var(--pf-t--global--spacer--control--vertical--compact); --pf-v6-c-data-list--m-compact__item-action--PaddingBlockEnd--offset: var(--pf-t--global--spacer--control--vertical--compact); --pf-v6-c-data-list--m-compact__item-action--MarginInlineStart: var(--pf-t--global--spacer--md); --pf-v6-c-data-list--m-compact__item-content--PaddingBlockEnd: var(--pf-t--global--spacer--sm); --pf-v6-c-data-list--m-compact__item-draggable-button--MarginBlockStart: calc(var(--pf-t--global--spacer--sm) * -1); --pf-v6-c-data-list--m-compact__item-draggable-button--MarginBlockEnd: calc(var(--pf-t--global--spacer--sm) * -1); --pf-v6-c-data-list--m-compact__item-draggable-button--PaddingBlockStart: var(--pf-t--global--spacer--xs); --pf-v6-c-data-list--m-compact__item-draggable-button--PaddingBlockEnd: var(--pf-t--global--spacer--xs); --pf-v6-c-data-list--m-compact__cell--m-icon--cell--PaddingBlockStart: var(--pf-t--global--spacer--sm); } .pf-v6-c-data-list { font-size: var(--pf-v6-c-data-list--FontSize); line-height: var(--pf-v6-c-data-list--LineHeight); overflow-wrap: break-word; border-block-start: var(--pf-v6-c-data-list--BorderBlockStartWidth) solid var(--pf-v6-c-data-list--BorderBlockStartColor); } .pf-v6-c-data-list.pf-m-compact { --pf-v6-c-data-list__check--FontSize: var(--pf-v6-c-data-list--m-compact__check--FontSize); --pf-v6-c-data-list--FontSize: var(--pf-v6-c-data-list--m-compact--FontSize); --pf-v6-c-data-list__item-action--MarginInlineStart: var(--pf-v6-c-data-list--m-compact__item-action--MarginInlineStart); --pf-v6-c-data-list__item-action--PaddingBlockStart: var(--pf-v6-c-data-list--m-compact__item-action--PaddingBlockStart); --pf-v6-c-data-list__item-action--PaddingBlockEnd: var(--pf-v6-c-data-list--m-compact__item-action--PaddingBlockEnd); --pf-v6-c-data-list__item-control--MarginInlineEnd: var(--pf-v6-c-data-list--m-compact__item-control--MarginInlineEnd); --pf-v6-c-data-list__item-control--PaddingBlockStart: var(--pf-v6-c-data-list--m-compact__item-control--PaddingBlockStart); --pf-v6-c-data-list__item-control--PaddingBlockEnd: var(--pf-v6-c-data-list--m-compact__item-control--PaddingBlockEnd); --pf-v6-c-data-list__item-content--md--PaddingBlockEnd: var(--pf-v6-c-data-list--m-compact__item-content--PaddingBlockEnd); --pf-v6-c-data-list__item-draggable-button--MarginBlockStart: var(--pf-v6-c-data-list--m-compact__item-draggable-button--MarginBlockStart); --pf-v6-c-data-list__item-draggable-button--MarginBlockEnd: var(--pf-v6-c-data-list--m-compact__item-draggable-button--MarginBlockEnd); --pf-v6-c-data-list__item-draggable-button--PaddingBlockStart: var(--pf-v6-c-data-list--m-compact__item-draggable-button--PaddingBlockStart); --pf-v6-c-data-list__item-draggable-button--PaddingBlockEnd: var(--pf-v6-c-data-list--m-compact__item-draggable-button--PaddingBlockEnd); --pf-v6-c-data-list__cell--m-icon--cell--PaddingBlockStart: var(--pf-v6-c-data-list--m-compact__cell--m-icon--cell--PaddingBlockStart); font-size: var(--pf-v6-c-data-list--m-compact--FontSize); } .pf-v6-c-data-list.pf-m-compact .pf-v6-c-data-list__cell { --pf-v6-c-data-list__cell--PaddingBlockStart: var(--pf-v6-c-data-list--m-compact__cell--PaddingBlockStart); --pf-v6-c-data-list__cell--PaddingBlockEnd: var(--pf-v6-c-data-list--m-compact__cell--PaddingBlockEnd); --pf-v6-c-data-list__cell--MarginInlineEnd: var(--pf-v6-c-data-list--m-compact__cell--cell--MarginInlineEnd); --pf-v6-c-data-list__cell--cell--PaddingBlockStart: var(--pf-v6-c-data-list--m-compact__cell-cell--PaddingBlockStart); } .pf-v6-c-data-list.pf-m-compact .pf-v6-c-data-list__check { font-size: var(--pf-v6-c-data-list--m-compact__check--FontSize); } .pf-v6-c-data-list.pf-m-compact .pf-v6-c-data-list__item-action { padding-block-start: calc(var(--pf-v6-c-data-list--m-compact__item-action--PaddingBlockStart) - var(--pf-v6-c-data-list--m-compact__item-action--PaddingBlockStart--offset)); padding-block-end: calc(var(--pf-v6-c-data-list--m-compact__item-action--PaddingBlockEnd) - var(--pf-v6-c-data-list--m-compact__item-action--PaddingBlockEnd--offset)); } .pf-v6-c-data-list.pf-m-drag-over { overflow-anchor: none; } :where(:root:not(.pf-v6-theme-glass)) .pf-v6-c-data-list.pf-m-plain, :where(:root.pf-v6-theme-glass) .pf-v6-c-data-list:not(.pf-m-no-plain-on-glass) { --pf-v6-c-data-list__item--BackgroundColor: var(--pf-v6-c-data-list--pf-m-plain__item--BackgroundColor); } .pf-v6-c-data-list.pf-m-truncate, .pf-v6-c-data-list__item-row.pf-m-truncate, .pf-v6-c-data-list__cell.pf-m-truncate, .pf-v6-c-data-list__text.pf-m-truncate { --pf-v6-c-data-list--cell--MinWidth: var(--pf-v6-c-data-list--cell--m-truncate--MinWidth); --pf-v6-c-data-list--cell--Overflow: hidden; --pf-v6-c-data-list--cell--TextOverflow: ellipsis; --pf-v6-c-data-list--cell--WhiteSpace: nowrap; } .pf-v6-c-data-list.pf-m-break-word, .pf-v6-c-data-list__item-row.pf-m-break-word, .pf-v6-c-data-list__cell.pf-m-break-word, .pf-v6-c-data-list__text.pf-m-break-word { --pf-v6-c-data-list--cell--WordBreak: break-word; } .pf-v6-c-data-list.pf-m-nowrap, .pf-v6-c-data-list__item-row.pf-m-nowrap, .pf-v6-c-data-list__cell.pf-m-nowrap, .pf-v6-c-data-list__text.pf-m-nowrap { --pf-v6-c-data-list--cell--WhiteSpace: nowrap; } .pf-v6-c-data-list__item { position: relative; display: flex; flex-direction: column; background-color: var(--pf-v6-c-data-list__item--BackgroundColor); border-block-end: var(--pf-v6-c-data-list__item--BorderBlockEndWidth) solid var(--pf-v6-c-data-list__item--BorderBlockEndColor); } .pf-v6-c-data-list__item.pf-m-clickable { cursor: pointer; outline-offset: var(--pf-v6-c-data-list__item--m-clickable--OutlineOffset); } .pf-v6-c-data-list__item.pf-m-clickable:hover, .pf-v6-c-data-list__item.pf-m-clickable:focus { background-color: var(--pf-v6-c-data-list__item--hover--BackgroundColor); } .pf-v6-c-data-list__item.pf-m-selected { background-color: var(--pf-v6-c-data-list__item--m-selected--BackgroundColor); } .pf-v6-c-data-list__item.pf-m-ghost-row::after { position: absolute; inset-block-start: 0; inset-block-end: 0; inset-inline-start: 0; inset-inline-end: 0; content: ""; background-color: var(--pf-v6-c-data-list__item--m-ghost-row--after--BackgroundColor); opacity: var(--pf-v6-c-data-list__item--m-ghost-row--after--Opacity); } .pf-v6-c-data-list__item.pf-m-expanded { --pf-v6-c-data-list__toggle-icon--Rotate: var(--pf-v6-c-data-list__item--m-expanded__toggle-icon--Rotate); } .pf-v6-c-data-list__item-row { display: flex; flex-wrap: nowrap; padding-inline-start: var(--pf-v6-c-data-list__item-row--PaddingInlineStart); padding-inline-end: var(--pf-v6-c-data-list__item-row--PaddingInlineEnd); } .pf-v6-c-data-list__item-control { display: flex; flex-wrap: nowrap; padding-block-start: var(--pf-v6-c-data-list__item-control--PaddingBlockStart); padding-block-end: var(--pf-v6-c-data-list__item-control--PaddingBlockEnd); margin-inline-end: var(--pf-v6-c-data-list__item-control--MarginInlineEnd); } .pf-v6-c-data-list__item-control > *:not(:last-child) { margin-inline-end: var(--pf-v6-c-data-list__item-control--not-last-child--MarginInlineEnd); } .pf-v6-c-data-list__check { display: flex; align-items: center; align-self: flex-start; height: var(--pf-v6-c-data-list__check--Height); margin-block-start: var(--pf-v6-c-data-list__check--MarginBlockStart); } .pf-v6-c-data-list__check > input { cursor: pointer; } .pf-v6-c-data-list__item-draggable-button { display: flex; flex-direction: column; padding-block-start: var(--pf-v6-c-data-list__item-draggable-button--PaddingBlockStart); padding-block-end: var(--pf-v6-c-data-list__item-draggable-button--PaddingBlockEnd); padding-inline-start: var(--pf-v6-c-data-list__item-draggable-button--PaddingInlineStart); padding-inline-end: var(--pf-v6-c-data-list__item-draggable-button--PaddingInlineEnd); margin-block-start: var(--pf-v6-c-data-list__item-draggable-button--MarginBlockStart); margin-block-end: var(--pf-v6-c-data-list__item-draggable-button--MarginBlockEnd); margin-inline-start: var(--pf-v6-c-data-list__item-draggable-button--MarginInlineStart); background-color: var(--pf-v6-c-data-list__item-draggable-button--BackgroundColor); border: 0; } .pf-v6-c-data-list__item-draggable-button:hover { --pf-v6-c-data-list__item-draggable-button-icon--Color: var(--pf-v6-c-data-list__item-draggable-button--hover__draggable-icon--Color); cursor: grab; } .pf-v6-c-data-list__item-draggable-button:focus { --pf-v6-c-data-list__item-draggable-button-icon--Color: var(--pf-v6-c-data-list__item-draggable-button--focus__draggable-icon--Color); } .pf-v6-c-data-list__item-draggable-button:active { cursor: grabbing; } .pf-v6-c-data-list__item-draggable-button.pf-m-disabled { --pf-v6-c-data-list__item-draggable-button-icon--Color: var(--pf-v6-c-data-list__item-draggable-button--m-disabled__draggable-icon--Color); pointer-events: none; } .pf-v6-c-data-list__item-draggable-button .pf-v6-c-data-list__item-draggable-icon { color: var(--pf-v6-c-data-list__item-draggable-button-icon--Color); } .pf-v6-c-data-list__item-action { --pf-v6-hidden-visible--visible--Display: var(--pf-v6-c-data-list__item-action--Display); --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-data-list__item-action.pf-m-hidden { --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display); } @media screen and (min-width: 36rem) { .pf-v6-c-data-list__item-action.pf-m-hidden-on-sm { --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display); } .pf-v6-c-data-list__item-action.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-data-list__item-action.pf-m-hidden-on-md { --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display); } .pf-v6-c-data-list__item-action.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-data-list__item-action.pf-m-hidden-on-lg { --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display); } .pf-v6-c-data-list__item-action.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-data-list__item-action.pf-m-hidden-on-xl { --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display); } .pf-v6-c-data-list__item-action.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-data-list__item-action.pf-m-hidden-on-2xl { --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display); } .pf-v6-c-data-list__item-action.pf-m-visible-on-2xl { --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display); } } .pf-v6-c-data-list__item-action { gap: var(--pf-v6-c-data-list__item-action--Gap); align-content: flex-start; align-items: flex-start; padding-block-start: calc(var(--pf-v6-c-data-list__item-action--PaddingBlockStart) - var(--pf-v6-c-data-list__item-action--PaddingBlockStart--offset)); padding-block-end: calc(var(--pf-v6-c-data-list__item-action--PaddingBlockEnd) - var(--pf-v6-c-data-list__item-action--PaddingBlockEnd--offset)); margin-inline-start: var(--pf-v6-c-data-list__item-action--MarginInlineStart); } .pf-v6-c-data-list__toggle { margin-block-start: var(--pf-v6-c-data-list__toggle--MarginBlockStart); margin-block-end: var(--pf-v6-c-data-list__toggle--MarginBlockEnd); margin-inline-start: var(--pf-v6-c-data-list__toggle--MarginInlineStart); } :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-data-list__toggle-icon { scale: -1 1; } .pf-v6-c-data-list__toggle-icon { height: var(--pf-v6-c-data-list__toggle-icon--Height); pointer-events: none; transform: rotate(var(--pf-v6-c-data-list__toggle-icon--Rotate)); transition: var(--pf-v6-c-data-list__toggle-icon--Transition); } .pf-v6-c-data-list__item-content { display: grid; grid-template-columns: auto 1fr; width: 100%; } .pf-v6-c-data-list__cell { flex: 1; grid-column: 1/-1; padding-block-start: var(--pf-v6-c-data-list__cell--PaddingBlockStart); padding-block-end: var(--pf-v6-c-data-list__cell--PaddingBlockEnd); } .pf-v6-c-data-list__cell + .pf-v6-c-data-list__cell { flex: 1 0 100%; order: 1; padding-block-start: var(--pf-v6-c-data-list__cell--cell--PaddingBlockStart); } .pf-v6-c-data-list__cell.pf-m-icon { flex-grow: 0; grid-column: 1/2; margin-inline-end: var(--pf-v6-c-data-list__cell--m-icon--MarginInlineEnd); } .pf-v6-c-data-list__cell.pf-m-icon + .pf-v6-c-data-list__cell { grid-column: 2/3; padding-block-start: var(--pf-v6-c-data-list__cell--m-icon--cell--PaddingBlockStart); } .pf-v6-c-data-list__cell.pf-m-align-right { margin-inline-start: 0; } .pf-v6-c-data-list__text { display: inline-block; } .pf-v6-c-data-list__text, .pf-v6-c-data-list__cell { min-width: var(--pf-v6-c-data-list--cell--MinWidth); max-width: 100%; overflow: var(--pf-v6-c-data-list--cell--Overflow); text-overflow: var(--pf-v6-c-data-list--cell--TextOverflow); word-break: var(--pf-v6-c-data-list--cell--WordBreak); white-space: var(--pf-v6-c-data-list--cell--WhiteSpace); } .pf-v6-c-data-list__expandable-content { max-height: var(--pf-v6-c-data-list__expandable-content--MaxHeight); margin-block-end: var(--pf-v6-c-data-list__expandable-content--MarginBlockEnd); margin-inline-start: var(--pf-v6-c-data-list__expandable-content--MarginInlineStart); margin-inline-end: var(--pf-v6-c-data-list__expandable-content--MarginInlineEnd); overflow-y: auto; background-color: var(--pf-v6-c-data-list__expandable-content--BackgroundColor); border-radius: var(--pf-v6-c-data-list__expandable-content-body--BorderRadius); } .pf-v6-c-data-list__expandable-content .pf-v6-c-data-list__expandable-content-body { padding-block-start: var(--pf-v6-c-data-list__expandable-content-body--PaddingBlockStart); padding-block-end: var(--pf-v6-c-data-list__expandable-content-body--PaddingBlockEnd); padding-inline-start: var(--pf-v6-c-data-list__expandable-content-body--PaddingInlineStart); padding-inline-end: var(--pf-v6-c-data-list__expandable-content-body--PaddingInlineEnd); } .pf-v6-c-data-list__expandable-content .pf-v6-c-data-list__expandable-content-body > .pf-v6-c-data-list { margin-inline-start: var(--pf-v6-c-data-list--MarginInlineStart); } .pf-v6-c-data-list__expandable-content .pf-v6-c-data-list__expandable-content-body .pf-v6-c-data-list__item:last-child { border-block-end: 0; } .pf-v6-c-data-list__expandable-content .pf-v6-c-data-list__expandable-content-body .pf-v6-c-data-list__item-row { --pf-v6-c-data-list__item-row--PaddingInlineStart: 0; } .pf-v6-c-data-list__expandable-content .pf-v6-c-data-list__expandable-content-body .pf-v6-c-data-list__expandable-content-body { --pf-v6-c-data-list__expandable-content-body--PaddingInlineStart: 0; } .pf-v6-c-data-list__expandable-content .pf-v6-c-data-list__expandable-content-body.pf-m-no-padding { padding: 0; } /* PatternFly component: Accordion/accordion */ .pf-v6-c-accordion { --pf-v6-c-accordion--BackgroundColor: var(--pf-t--global--background--color--primary--default); --pf-v6-c-accordion--RowGap: var(--pf-t--global--spacer--xs); --pf-v6-c-accordion__item--BorderRadius: var(--pf-t--global--border--radius--200); --pf-v6-c-accordion__item--m-expanded--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked); --pf-v6-c-accordion__toggle--ColumnGap: var(--pf-t--global--spacer--gap--text-to-element--default); --pf-v6-c-accordion__toggle--PaddingBlockStart: var(--pf-t--global--spacer--sm); --pf-v6-c-accordion__toggle--PaddingInlineEnd: var(--pf-t--global--spacer--md); --pf-v6-c-accordion__toggle--PaddingBlockEnd: var(--pf-t--global--spacer--sm); --pf-v6-c-accordion__toggle--m-expanded--PaddingBlockEnd: var(--pf-t--global--spacer--sm); --pf-v6-c-accordion__toggle--PaddingInlineStart: var(--pf-t--global--spacer--md); --pf-v6-c-accordion__toggle--BackgroundColor: var(--pf-t--global--background--color--action--plain--default); --pf-v6-c-accordion__toggle--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover); --pf-v6-c-accordion__item--m-expanded__toggle--BackgroundColor: transparent; --pf-v6-c-accordion--m-plain__item--m-expanded__toggle--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked); --pf-v6-c-accordion__toggle--BorderRadius: var(--pf-t--global--border--radius--small); --pf-v6-c-accordion__toggle--ZIndex: var(--pf-t--global--z-index--xs); --pf-v6-c-accordion__toggle--BorderWidth: var(--pf-t--global--border--width--action--plain--default); --pf-v6-c-accordion__toggle--BorderColor: var(--pf-t--global--border--color--high-contrast); --pf-v6-c-accordion__toggle--hover--BorderWidth: var(--pf-t--global--border--width--action--plain--hover); --pf-v6-c-accordion--m-toggle-start__toggle--ColumnGap: var(--pf-t--global--spacer--gap--text-to-element--default); --pf-v6-c-accordion__toggle-text--Color: var(--pf-t--global--text--color--regular); --pf-v6-c-accordion__toggle-text--FontWeight: var(--pf-t--global--font--weight--body--default); --pf-v6-c-accordion__toggle--m-expanded__toggle-text--FontWeight: var(--pf-t--global--font--weight--body--bold); --pf-v6-c-accordion--m-display-lg__toggle--m-expanded__toggle-text--FontWeight: var(--pf-t--global--font--weight--heading--default); --pf-v6-c-accordion__toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default); --pf-v6-c-accordion__toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default); --pf-v6-c-accordion__toggle-icon--Transition: transform var(--pf-v6-c-accordion__toggle-icon--TransitionDuration) var(--pf-v6-c-accordion__toggle-icon--TransitionTimingFunction); --pf-v6-c-accordion__toggle-icon--Rotate: 0; --pf-v6-c-accordion__toggle--m-expanded__toggle-icon--Rotate: -180deg; --pf-v6-c-accordion__expandable-content--MarginInlineEnd: var(--pf-t--global--spacer--md); --pf-v6-c-accordion__expandable-content--MarginBlockEnd: 0; --pf-v6-c-accordion__expandable-content--MarginInlineStart: var(--pf-t--global--spacer--md); --pf-v6-c-accordion__expandable-content--BackgroundColor: var(--pf-t--global--background--color--primary--default); --pf-v6-c-accordion__expandable-content--BorderRadius: var(--pf-t--global--border--radius--small); --pf-v6-c-accordion__expandable-content--Color: var(--pf-t--global--text--color--regular); --pf-v6-c-accordion__expandable-content--FontSize: var(--pf-t--global--font--size--body--default); --pf-v6-c-accordion__expandable-content--m-fixed--MaxHeight--base: 0; --pf-v6-c-accordion__expandable-content--m-fixed--MaxHeight: 9.375rem; --pf-v6-c-accordion__expandable-content--MaxHeight: 0; --pf-v6-c-accordion__expandable-content--Visibility: hidden; --pf-v6-c-accordion__expandable-content--Overflow: hidden; --pf-v6-c-accordion__item--m-expanded__expandable-content--Visibility: visible; --pf-v6-c-accordion__item--m-expanded__expandable-content--Overflow: visible; --pf-v6-c-accordion__item--m-expanded__expandable-content--MaxHeight: 99999px; --pf-v6-c-accordion__item--m-expanded__expandable-content--MarginBlockEnd: var(--pf-t--global--spacer--md); --pf-v6-c-accordion__item--before--TransitionDuration--expand--fade: var(--pf-t--global--motion--duration--fade--default); --pf-v6-c-accordion__item--before--TransitionDuration--collapse--fade: var(--pf-t--global--motion--duration--fade--short); --pf-v6-c-accordion__item--before--TransitionDuration--fade: var(--pf-v6-c-accordion__item--before--TransitionDuration--collapse--fade); --pf-v6-c-accordion__item--before--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default); --pf-v6-c-accordion__item--before--Opacity: 0; --pf-v6-c-accordion__item--m-expanded--before--Opacity: 1; --pf-v6-c-accordion__item--m-expanded--before--TranslateY: 0; --pf-v6-c-accordion__expandable-content--TransitionDuration--collapse--slide: 0s; --pf-v6-c-accordion__expandable-content--TransitionDuration--collapse--fade: var(--pf-t--global--motion--duration--fade--short); --pf-v6-c-accordion__expandable-content--TransitionDuration--expand--slide: 0s; --pf-v6-c-accordion__expandable-content--TransitionDuration--expand--fade: var(--pf-t--global--motion--duration--fade--default); --pf-v6-c-accordion__expandable-content--TransitionDuration--slide: var(--pf-v6-c-accordion__expandable-content--TransitionDuration--collapse--slide); --pf-v6-c-accordion__expandable-content--TransitionDuration--fade: var(--pf-v6-c-accordion__expandable-content--TransitionDuration--collapse--fade); --pf-v6-c-accordion__expandable-content--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default); --pf-v6-c-accordion__expandable-content--Opacity: 0; --pf-v6-c-accordion__item--m-expanded__expandable-content--Opacity: 1; --pf-v6-c-accordion__expandable-content--TranslateY: 0; --pf-v6-c-accordion__item--m-expanded__expandable-content--TranslateY: 0; } @media screen and (prefers-reduced-motion: no-preference) { .pf-v6-c-accordion { --pf-v6-c-accordion__item--before--TransitionDuration--expand--slide: var(--pf-t--global--motion--duration--fade--default); --pf-v6-c-accordion__item--before--TransitionDuration--collapse--slide: var(--pf-t--global--motion--duration--fade--short); --pf-v6-c-accordion__item--before--TranslateY: -.5rem; --pf-v6-c-accordion__expandable-content--TransitionDuration--expand--slide: var(--pf-t--global--motion--duration--fade--default); --pf-v6-c-accordion__expandable-content--TransitionDuration--collapse--slide: var(--pf-t--global--motion--duration--fade--short); --pf-v6-c-accordion__expandable-content--TranslateY: -.5rem; } } .pf-v6-c-accordion { --pf-v6-c-accordion__expandable-content-body--PaddingBlockStart: var(--pf-t--global--spacer--sm); --pf-v6-c-accordion__expandable-content-body--PaddingInlineEnd: var(--pf-t--global--spacer--sm); --pf-v6-c-accordion__expandable-content-body--PaddingBlockEnd: var(--pf-t--global--spacer--sm); --pf-v6-c-accordion__expandable-content-body--PaddingInlineStart: var(--pf-t--global--spacer--sm); --pf-v6-c-accordion__expandable-content-body--expandable-content-body--PaddingBlockStart: 0; --pf-v6-c-accordion--m-display-lg__toggle--PaddingBlockStart: var(--pf-t--global--spacer--md); --pf-v6-c-accordion--m-display-lg__toggle--PaddingInlineEnd: var(--pf-t--global--spacer--md); --pf-v6-c-accordion--m-display-lg__toggle--PaddingBlockEnd: var(--pf-t--global--spacer--md); --pf-v6-c-accordion--m-display-lg__toggle--m-expanded--PaddingBlockEnd: var(--pf-t--global--spacer--sm); --pf-v6-c-accordion--m-display-lg__toggle--PaddingInlineStart: var(--pf-t--global--spacer--md); --pf-v6-c-accordion--m-display-lg__toggle--FontFamily: var(--pf-t--global--font--family--heading); --pf-v6-c-accordion--m-display-lg__toggle--FontSize: var(--pf-t--global--font--size--heading--sm); --pf-v6-c-accordion--m-display-lg__toggle-text--FontWeight: var(--pf-t--global--font--weight--heading--default); --pf-v6-c-accordion--m-display-lg__expandable-content--FontSize: var(--pf-t--global--font--size--body--lg); --pf-v6-c-accordion--m-display-lg__expandable-content--Color: var(--pf-t--global--text--color--regular); --pf-v6-c-accordion--m-bordered--RowGap: 0; --pf-v6-c-accordion__item--m-bordered--BorderBlockEndWidth: var(--pf-t--global--border--width--divider--default); --pf-v6-c-accordion__item--m-bordered--BorderBlockEndColor: var(--pf-t--global--border--color--default); --pf-v6-c-accordion__item--BorderWidth: 0; --pf-v6-c-accordion__item--BorderColor: var(--pf-t--global--border--color--high-contrast); --pf-v6-c-accordion__item--m-expanded--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular); --pf-v6-c-accordion__expandable-content--BorderWidth: 0; --pf-v6-c-accordion__expandable-content--BorderColor: var(--pf-t--global--border--color--high-contrast); --pf-v6-c-accordion__item--m-expanded__expandable-content--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular); } .pf-v6-c-accordion { display: flex; flex-direction: column; row-gap: var(--pf-v6-c-accordion--RowGap); background-color: var(--pf-v6-c-accordion--BackgroundColor); } :where(:root:not(.pf-v6-theme-glass)) .pf-v6-c-accordion.pf-m-plain, :where(:root.pf-v6-theme-glass) .pf-v6-c-accordion:not(.pf-m-no-plain-on-glass) { --pf-v6-c-accordion--BackgroundColor: transparent; --pf-v6-c-accordion__expandable-content--BackgroundColor: transparent; --pf-v6-c-accordion__item--m-expanded--BackgroundColor: transparent; --pf-v6-c-accordion__item--m-expanded__toggle--BackgroundColor: var(--pf-v6-c-accordion--m-plain__item--m-expanded__toggle--BackgroundColor); } .pf-v6-c-accordion.pf-m-toggle-start { --pf-v6-c-accordion__toggle--ColumnGap: var(--pf-v6-c-accordion--m-toggle-start__toggle--ColumnGap); } .pf-v6-c-accordion.pf-m-display-lg { --pf-v6-c-accordion__toggle--PaddingBlockStart: var(--pf-v6-c-accordion--m-display-lg__toggle--PaddingBlockStart); --pf-v6-c-accordion__toggle--PaddingInlineEnd: var(--pf-v6-c-accordion--m-display-lg__toggle--PaddingInlineEnd); --pf-v6-c-accordion__toggle--PaddingBlockEnd: var(--pf-v6-c-accordion--m-display-lg__toggle--PaddingBlockEnd); --pf-v6-c-accordion__toggle--m-expanded--PaddingBlockEnd: var(--pf-v6-c-accordion--m-display-lg__toggle--m-expanded--PaddingBlockEnd); --pf-v6-c-accordion__toggle--PaddingInlineStart: var(--pf-v6-c-accordion--m-display-lg__toggle--PaddingInlineStart); --pf-v6-c-accordion__toggle--FontFamily: var(--pf-v6-c-accordion--m-display-lg__toggle--FontFamily); --pf-v6-c-accordion__toggle--FontSize: var(--pf-v6-c-accordion--m-display-lg__toggle--FontSize); --pf-v6-c-accordion__toggle-text--FontWeight: var(--pf-v6-c-accordion--m-display-lg__toggle-text--FontWeight); --pf-v6-c-accordion__toggle--m-expanded__toggle-text--FontWeight: var(--pf-v6-c-accordion--m-display-lg__toggle--m-expanded__toggle-text--FontWeight); --pf-v6-c-accordion__expandable-content--FontSize: var(--pf-v6-c-accordion--m-display-lg__expandable-content--FontSize); --pf-v6-c-accordion__expandable-content--Color: var(--pf-v6-c-accordion--m-display-lg__expandable-content--Color); } .pf-v6-c-accordion.pf-m-bordered { --pf-v6-c-accordion--RowGap: var(--pf-v6-c-accordion--m-bordered--RowGap); --pf-v6-c-accordion__item--BorderRadius: 0; --pf-v6-c-accordion__toggle--BorderRadius: 0; --pf-v6-c-accordion__item--BorderWidth: 0; } .pf-v6-c-accordion.pf-m-bordered .pf-v6-c-accordion__item { border-block-end: var(--pf-v6-c-accordion__item--m-bordered--BorderBlockEndWidth) solid var(--pf-v6-c-accordion__item--m-bordered--BorderBlockEndColor); } .pf-v6-c-accordion__item { position: relative; } .pf-v6-c-accordion__item::before { position: absolute; inset: 0; pointer-events: none; content: ""; background-color: var(--pf-v6-c-accordion__item--m-expanded--BackgroundColor); border: var(--pf-v6-c-accordion__item--BorderWidth) solid var(--pf-v6-c-accordion__item--BorderColor); border-radius: var(--pf-v6-c-accordion__item--BorderRadius); opacity: var(--pf-v6-c-accordion__item--before--Opacity); transition-timing-function: var(--pf-v6-c-accordion__item--before--TransitionTimingFunction); transition-duration: var(--pf-v6-c-accordion__item--before--TransitionDuration--fade); transition-property: opacity; } .pf-v6-c-accordion__item.pf-m-expanded { --pf-v6-c-accordion__toggle--PaddingBlockEnd: var(--pf-v6-c-accordion__toggle--m-expanded--PaddingBlockEnd); --pf-v6-c-accordion__toggle-text--FontWeight: var(--pf-v6-c-accordion__toggle--m-expanded__toggle-text--FontWeight); --pf-v6-c-accordion__toggle-icon--Rotate: var(--pf-v6-c-accordion__toggle--m-expanded__toggle-icon--Rotate); --pf-v6-c-accordion__item--before--TransitionDuration--slide: var(--pf-v6-c-accordion__item--before--TransitionDuration--expand--slide); --pf-v6-c-accordion__item--before--TransitionDuration--fade: var(--pf-v6-c-accordion__item--before--TransitionDuration--expand--fade); --pf-v6-c-accordion__item--before--Opacity: var(--pf-v6-c-accordion__item--m-expanded--before--Opacity); --pf-v6-c-accordion__item--before--TranslateY: var(--pf-v6-c-accordion__item--m-expanded--before--TranslateY); --pf-v6-c-accordion__item--BorderWidth: var(--pf-v6-c-accordion__item--m-expanded--BorderWidth); --pf-v6-c-accordion__toggle--BackgroundColor: var(--pf-v6-c-accordion__item--m-expanded__toggle--BackgroundColor); --pf-v6-c-accordion__expandable-content--TransitionDuration--slide: var(--pf-v6-c-accordion__expandable-content--TransitionDuration--expand--slide); --pf-v6-c-accordion__expandable-content--TransitionDuration--fade: var(--pf-v6-c-accordion__expandable-content--TransitionDuration--expand--fade); --pf-v6-c-accordion__expandable-content--Opacity: var(--pf-v6-c-accordion__item--m-expanded__expandable-content--Opacity); --pf-v6-c-accordion__expandable-content--TranslateY: var(--pf-v6-c-accordion__item--m-expanded__expandable-content--TranslateY); --pf-v6-c-accordion__expandable-content--MarginBlockEnd: var(--pf-v6-c-accordion__item--m-expanded__expandable-content--MarginBlockEnd); --pf-v6-c-accordion__expandable-content--MaxHeight: var(--pf-v6-c-accordion__item--m-expanded__expandable-content--MaxHeight); --pf-v6-c-accordion__expandable-content--Visibility: var(--pf-v6-c-accordion__item--m-expanded__expandable-content--Visibility); --pf-v6-c-accordion__expandable-content--TransitionDuration--fade: 0s; --pf-v6-c-accordion__expandable-content--m-fixed--MaxHeight--base: var(--pf-v6-c-accordion__expandable-content--m-fixed--MaxHeight); --pf-v6-c-accordion__expandable-content--BorderWidth: var(--pf-v6-c-accordion__item--m-expanded__expandable-content--BorderWidth); --pf-v6-c-accordion__expandable-content--Overflow: var(--pf-v6-c-accordion__item--m-expanded__expandable-content--Overflow); } .pf-v6-c-accordion__toggle { position: relative; z-index: var(--pf-v6-c-accordion__toggle--ZIndex); display: flex; column-gap: var(--pf-v6-c-accordion__toggle--ColumnGap); align-items: center; width: 100%; padding-block-start: var(--pf-v6-c-accordion__toggle--PaddingBlockStart); padding-block-end: var(--pf-v6-c-accordion__toggle--PaddingBlockEnd); padding-inline-start: var(--pf-v6-c-accordion__toggle--PaddingInlineStart); padding-inline-end: var(--pf-v6-c-accordion__toggle--PaddingInlineEnd); font-family: var(--pf-v6-c-accordion__toggle--FontFamily, inherit); font-size: var(--pf-v6-c-accordion__toggle--FontSize, inherit); text-align: start; background-color: var(--pf-v6-c-accordion__toggle--BackgroundColor); border: 0; border-radius: var(--pf-v6-c-accordion__toggle--BorderRadius); } .pf-v6-c-accordion__toggle::after { position: absolute; inset: 0; pointer-events: none; content: ""; border: var(--pf-v6-c-accordion__toggle--BorderWidth) solid var(--pf-v6-c-accordion__toggle--BorderColor); border-radius: inherit; } .pf-v6-c-accordion__toggle:is(:hover, :focus) { --pf-v6-c-accordion__toggle--BackgroundColor: var(--pf-v6-c-accordion__toggle--hover--BackgroundColor); --pf-v6-c-accordion__toggle--BorderWidth: var(--pf-v6-c-accordion__toggle--hover--BorderWidth); } .pf-v6-c-accordion__toggle-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex-grow: 1; font-weight: var(--pf-v6-c-accordion__toggle-text--FontWeight); color: var(--pf-v6-c-accordion__toggle-text--Color); } :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-accordion__toggle-icon { scale: -1 1; } .pf-v6-c-accordion__toggle-icon { transform: rotate(var(--pf-v6-c-accordion__toggle-icon--Rotate)); transition: var(--pf-v6-c-accordion__toggle-icon--Transition); } .pf-v6-c-accordion__expandable-content:where([hidden]) { display: revert; } .pf-v6-c-accordion__expandable-content { visibility: var(--pf-v6-c-accordion__expandable-content--Visibility); max-height: var(--pf-v6-c-accordion__expandable-content--MaxHeight); margin-block-end: var(--pf-v6-c-accordion__expandable-content--MarginBlockEnd); margin-inline-start: var(--pf-v6-c-accordion__expandable-content--MarginInlineStart); margin-inline-end: var(--pf-v6-c-accordion__expandable-content--MarginInlineEnd); overflow-y: var(--pf-v6-c-accordion__expandable-content--Overflow); font-size: var(--pf-v6-c-accordion__expandable-content--FontSize); color: var(--pf-v6-c-accordion__expandable-content--Color); background-color: var(--pf-v6-c-accordion__expandable-content--BackgroundColor); border: var(--pf-v6-c-accordion__expandable-content--BorderWidth) solid var(--pf-v6-c-accordion__expandable-content--BorderColor); border-radius: var(--pf-v6-c-accordion__expandable-content--BorderRadius); opacity: var(--pf-v6-c-accordion__expandable-content--Opacity); translate: 0 var(--pf-v6-c-accordion__expandable-content--TranslateY); transition-delay: 0s, 0s, var(--pf-v6-c-accordion__expandable-content--TransitionDuration--fade), var(--pf-v6-c-accordion__expandable-content--TransitionDuration--fade), var(--pf-v6-c-accordion__expandable-content--TransitionDuration--fade); transition-timing-function: var(--pf-v6-c-accordion__expandable-content--TransitionTimingFunction); transition-duration: var(--pf-v6-c-accordion__expandable-content--TransitionDuration--fade), var(--pf-v6-c-accordion__expandable-content--TransitionDuration--slide), 0s, 0s, 0s; transition-property: opacity, translate, visibility, max-height, margin-block-end; } .pf-v6-c-accordion__expandable-content.pf-m-fixed { --pf-v6-c-accordion__expandable-content--Overflow: auto; max-height: var(--pf-v6-c-accordion__expandable-content--m-fixed--MaxHeight--base); } .pf-v6-c-accordion__expandable-content-body { padding-block-start: var(--pf-v6-c-accordion__expandable-content-body--PaddingBlockStart); padding-block-end: var(--pf-v6-c-accordion__expandable-content-body--PaddingBlockEnd); padding-inline-start: var(--pf-v6-c-accordion__expandable-content-body--PaddingInlineStart); padding-inline-end: var(--pf-v6-c-accordion__expandable-content-body--PaddingInlineEnd); } .pf-v6-c-accordion__expandable-content-body + .pf-v6-c-accordion__expandable-content-body { --pf-v6-c-accordion__expandable-content-body--PaddingBlockStart: var(--pf-v6-c-accordion__expandable-content-body--expandable-content-body--PaddingBlockStart); } /* PatternFly component: Table/table */ .pf-v6-c-table { --pf-v6-c-table--BackgroundColor: var(--pf-t--global--background--color--primary--default); --pf-v6-c-table--BorderColor: var(--pf-t--global--border--color--default); --pf-v6-c-table--border-width--base: var(--pf-t--global--border--width--divider--default); --pf-v6-c-table__caption--FontSize: var(--pf-t--global--font--size--body--default); --pf-v6-c-table__caption--Color: var(--pf-t--global--text--color--subtle); --pf-v6-c-table__caption--PaddingBlockStart: var(--pf-t--global--spacer--md); --pf-v6-c-table__caption--PaddingInlineEnd: var(--pf-t--global--spacer--lg); --pf-v6-c-table__caption--PaddingBlockEnd: var(--pf-t--global--spacer--md); --pf-v6-c-table__caption--PaddingInlineStart: var(--pf-t--global--spacer--inset--page-chrome); --pf-v6-c-table__thead--cell--FontSize: var(--pf-t--global--font--size--body--sm); --pf-v6-c-table__thead--cell--FontWeight: var(--pf-t--global--font--weight--body--bold); --pf-v6-c-table__thead__toggle--PaddingBlockStart: var(--pf-v6-c-table--cell--Padding--base); --pf-v6-c-table__thead__toggle--PaddingBlockEnd: var(--pf-v6-c-table--cell--Padding--base); --pf-v6-c-table__tbody--cell--PaddingBlockStart: var(--pf-v6-c-table--cell--Padding--base); --pf-v6-c-table__tbody--cell--PaddingBlockEnd: var(--pf-v6-c-table--cell--Padding--base); --pf-v6-c-table__tbody--cell--FontSize: var(--pf-t--global--font--size--body--default); --pf-v6-c-table__tr--BorderBlockEndWidth: var(--pf-t--global--border--width--divider--default); --pf-v6-c-table__tr--BorderBlockEndColor: var(--pf-t--global--border--color--default); --pf-v6-c-table--cell--Padding--base: var(--pf-t--global--spacer--md); --pf-v6-c-table--cell--PaddingBlockStart: var(--pf-v6-c-table--cell--Padding--base); --pf-v6-c-table--cell--PaddingInlineEnd: var(--pf-v6-c-table--cell--Padding--base); --pf-v6-c-table--cell--PaddingBlockEnd: var(--pf-v6-c-table--cell--Padding--base); --pf-v6-c-table--cell--PaddingInlineStart: var(--pf-v6-c-table--cell--Padding--base); --pf-v6-c-table--cell--FontSize: var(--pf-t--global--font--size--body--default); --pf-v6-c-table--cell--FontWeight: var(--pf-t--global--font--weight--body--default); --pf-v6-c-table--cell--LineHeight: var(--pf-t--global--font--line-height--body); --pf-v6-c-table--cell--Color: var(--pf-t--global--text--color--regular); --pf-v6-c-table--cell--first-last-child--PaddingInline: var(--pf-t--global--spacer--inset--page-chrome); --pf-v6-c-table__tr--m-first-cell-offset-reset--cell--PaddingInlineStart: var(--pf-v6-c-table--cell--Padding--base); --pf-v6-c-table--cell--MinWidth: calc(var(--pf-v6-c-table--cell--PaddingInlineEnd) + var(--pf-v6-c-table--cell--PaddingInlineEnd)); --pf-v6-c-table--cell--MaxWidth: none; --pf-v6-c-table--cell--Width: auto; --pf-v6-c-table--cell--Overflow: visible; --pf-v6-c-table--cell--TextOverflow: clip; --pf-v6-c-table--cell--WhiteSpace: normal; --pf-v6-c-table--cell--WordBreak: normal; --pf-v6-c-table--cell--m-border-right--before--BorderInlineEndWidth: var(--pf-t--global--border--width--divider--default); --pf-v6-c-table--cell--m-border-right--before--BorderInlineEndColor: var(--pf-t--global--border--color--default); --pf-v6-c-table--cell--m-border-left--before--BorderInlineStartWidth: var(--pf-t--global--border--width--divider--default); --pf-v6-c-table--cell--m-border-left--before--BorderInlineStartColor: var(--pf-t--global--border--color--default); --pf-v6-c-table--cell--m-help--MinWidth: 11ch; --pf-v6-c-table--m-truncate--cell--MaxWidth: 1px; --pf-v6-c-table--m-truncate--cell--MinWidth: calc(5ch + var(--pf-v6-c-table--cell--PaddingInlineEnd) + var(--pf-v6-c-table--cell--PaddingInlineStart)); --pf-v6-c-table__text--MinWidth: 100%; --pf-v6-c-table__text--m-truncate--MinWidth: 5ch; --pf-v6-c-table--m-truncate__text--MinWidth: 5ch; --pf-v6-c-table--cell--hidden-visible--Display: table-cell; --pf-v6-c-table__toggle--PaddingBlockStart: var(--pf-t--global--spacer--sm); --pf-v6-c-table__toggle--PaddingBlockEnd: var(--pf-t--global--spacer--sm); --pf-v6-c-table__toggle--PaddingInlineStart: var(--pf-t--global--spacer--sm); --pf-v6-c-table__toggle--PaddingInlineEnd: var(--pf-t--global--spacer--sm); --pf-v6-c-table__toggle--c-button__toggle-icon--Rotate: 0; --pf-v6-c-table__toggle--c-button__toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default); --pf-v6-c-table__toggle--c-button__toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default); --pf-v6-c-table__toggle--c-button--m-expanded__toggle-icon--Rotate: -180deg; --pf-v6-c-table__button--PaddingBlockStart: var(--pf-t--global--spacer--sm); --pf-v6-c-table__button--PaddingBlockEnd: var(--pf-t--global--spacer--sm); --pf-v6-c-table__button--PaddingInlineStart: var(--pf-t--global--spacer--md); --pf-v6-c-table__button--PaddingInlineEnd: var(--pf-t--global--spacer--md); --pf-v6-c-table__button--Color: var(--pf-t--global--text--color--regular); --pf-v6-c-table__button--BackgroundColor: var(--pf-t--global--background--color--action--plain--default); --pf-v6-c-table__button--OutlineOffset: calc(var(--pf-t--global--border--width--strong) * -1); --pf-v6-c-table__button--BorderColor: var(--pf-t--global--border--color--high-contrast); --pf-v6-c-table__button--BorderWidth: var(--pf-t--global--border--width--action--plain--default); --pf-v6-c-table__button--hover--BorderWidth: var(--pf-t--global--border--width--action--plain--hover); --pf-v6-c-table__button--BorderRadius: var(--pf-t--global--border--radius--action--plain--default); --pf-v6-c-table__button--hover--Color: var(--pf-t--global--text--color--regular); --pf-v6-c-table__button--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover); --pf-v6-c-table__check--PaddingInlineStart: var(--pf-t--global--spacer--sm); --pf-v6-c-table__check--PaddingInlineEnd: var(--pf-t--global--spacer--sm); --pf-v6-c-table__favorite--c-button--FontSize: var(--pf-t--global--font--size--body--default); --pf-v6-c-table--cell--m-favorite--Color: var(--pf-t--global--text--color--subtle); --pf-v6-c-table__favorite--m-favorited--c-button--Color: var(--pf-t--global--color--favorite--clicked); --pf-v6-c-table__tr--m-ghost-row--Opacity: .4; --pf-v6-c-table__tr--m-ghost-row--BackgroundColor: var(--pf-t--global--background--color--primary--default); --pf-v6-c-table__action--PaddingBlockStart: var(--pf-t--global--spacer--sm); --pf-v6-c-table__action--PaddingBlockEnd: var(--pf-t--global--spacer--sm); --pf-v6-c-table__action--PaddingInlineStart: var(--pf-t--global--spacer--sm); --pf-v6-c-table__action--PaddingInlineEnd: var(--pf-t--global--spacer--sm); --pf-v6-c-table__expandable-row--TransitionDuration--expand--slide: 0s; --pf-v6-c-table__expandable-row--TransitionDuration--expand--fade: var(--pf-t--global--motion--duration--fade--default); --pf-v6-c-table__expandable-row--TransitionDuration--collapse--slide: 0s; --pf-v6-c-table__expandable-row--TransitionDuration--collapse--fade: var(--pf-t--global--motion--duration--fade--short); --pf-v6-c-table__expandable-row--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default); --pf-v6-c-table__expandable-row--Opacity: 0; --pf-v6-c-table__tbody--m-expanded__expandable-row--Opacity: 1; --pf-v6-c-table__expandable-row--TranslateY: 0; --pf-v6-c-table__tbody--m-expanded__expandable-row--TranslateY: 0; } @media screen and (prefers-reduced-motion: no-preference) { .pf-v6-c-table { --pf-v6-c-table__expandable-row--TransitionDuration--expand--slide: var(--pf-t--global--motion--duration--fade--default); --pf-v6-c-table__expandable-row--TransitionDuration--collapse--slide: var(--pf-t--global--motion--duration--fade--short); --pf-v6-c-table__expandable-row--TranslateY: -.5rem; } } .pf-v6-c-table { --pf-v6-c-table__expandable-row-content--PaddingBlockStart: var(--pf-t--global--spacer--md); --pf-v6-c-table__expandable-row-content--PaddingBlockEnd: var(--pf-t--global--spacer--md); --pf-v6-c-table__expandable-row-content--PaddingInlineStart: var(--pf-t--global--spacer--md); --pf-v6-c-table__expandable-row-content--PaddingInlineEnd: var(--pf-t--global--spacer--md); --pf-v6-c-table__expandable-row-content--BorderRadius: var(--pf-t--global--border--radius--small); --pf-v6-c-table__expandable-row-content--BackgroundColor: var(--pf-t--global--background--color--primary--default); --pf-v6-c-table__expandable-row-content--BorderColor: var(--pf-t--global--border--color--high-contrast); --pf-v6-c-table__expandable-row-content--BorderWidth: 0; --pf-v6-c-table__control-row--BackgroundColor: var(--pf-t--global--background--color--primary--default); --pf-v6-c-table__control-row--BorderBlockEndWidth: var(--pf-t--global--border--width--divider--default); --pf-v6-c-table__control-row__tbody--BorderBlockEndColor: var(--pf-t--global--border--color--default); --pf-v6-c-table__icon-inline--MarginInlineEnd: var(--pf-t--global--spacer--sm); --pf-v6-c-table__sort--MinWidth: calc(6ch + var(--pf-v6-c-table--cell--PaddingInlineEnd) + var(--pf-v6-c-table--cell--PaddingInlineStart) + var(--pf-v6-c-table__sort-indicator--MarginInlineStart)); --pf-v6-c-table__sort--m-selected__button--Color: var(--pf-t--global--color--brand--clicked); --pf-v6-c-table__sort--m-help--MinWidth: 15ch; --pf-v6-c-table__sort__button__text--Color: currentcolor; --pf-v6-c-table__sort__button--hover__text--Color: currentcolor; --pf-v6-c-table__sort-indicator--Color: var(--pf-t--global--icon--color--subtle); --pf-v6-c-table__sort-indicator--MarginInlineStart: var(--pf-t--global--spacer--md); --pf-v6-c-table__sort--m-selected__sort-indicator--Color: var(--pf-t--global--color--brand--clicked); --pf-v6-c-table__sort__button--hover__sort-indicator--Color: var(--pf-t--global--text--color--regular); --pf-v6-c-table__th--m-help--MinWidth: 11ch; --pf-v6-c-table__column-help--MarginInlineStart: var(--pf-t--global--spacer--sm); --pf-v6-c-table__compound-expansion-toggle__button--Color: var(--pf-t--global--icon--color--brand--default); --pf-v6-c-table__compound-expansion-toggle__button--BackgroundColor: transparent; --pf-v6-c-table__compound-expansion-toggle__button--hover--Color: var(--pf-t--global--icon--color--brand--hover); --pf-v6-c-table__compound-expansion-toggle__button--hover--BackgroundColor: var(--pf-t--global--background--color--primary--hover); --pf-v6-c-table__compound-expansion-toggle__button--expanded--BackgroundColor: var(--pf-t--global--background--color--primary--clicked); --pf-v6-c-table__compound-expansion-toggle__button--after--BorderColor: var(--pf-t--global--border--color--clicked); --pf-v6-c-table__compound-expansion-toggle__button--after--BorderRadius: inherit; --pf-v6-c-table__compound-expansion-toggle__button--after--BorderBlockStartWidth: 0; --pf-v6-c-table__compound-expansion-toggle__button--hover--after--BorderBlockStartWidth: 0; --pf-v6-c-table__compound-expansion-toggle--m-expanded__button--after--BorderBlockStartWidth: var(--pf-t--global--border--width--strong); --pf-v6-c-table--compound-expansion--m-expanded--BackgroundColor: var(--pf-t--global--background--color--primary--clicked); --pf-v6-c-table--compound-expansion--m-expanded--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular); --pf-v6-c-table--m-compact__th--PaddingBlockStart: calc(var(--pf-t--global--spacer--sm) + var(--pf-t--global--spacer--xs)); --pf-v6-c-table--m-compact__th--PaddingBlockEnd: var(--pf-t--global--spacer--sm); --pf-v6-c-table--m-compact--cell--PaddingBlockStart: var(--pf-t--global--spacer--sm); --pf-v6-c-table--m-compact--cell--PaddingBlockEnd: var(--pf-t--global--spacer--sm); --pf-v6-c-table__td--m-action--PaddingBlockStart: var(--pf-t--global--spacer--sm); --pf-v6-c-table__td--m-action--PaddingBlockEnd: var(--pf-t--global--spacer--sm); --pf-v6-c-table--m-compact__td--m-action--PaddingBlockStart: var(--pf-t--global--spacer--xs); --pf-v6-c-table--m-compact__td--m-action--PaddingBlockEnd: var(--pf-t--global--spacer--xs); --pf-v6-c-table--m-compact__action--PaddingBlockStart: var(--pf-t--global--spacer--xs); --pf-v6-c-table--m-compact__action--PaddingBlockEnd: var(--pf-t--global--spacer--xs); --pf-v6-c-table__expandable-row--m-expanded--BorderBlockEndColor: var(--pf-t--global--border--color--default); --pf-v6-c-table__tr--m-clickable--BackgroundColor: transparent; --pf-v6-c-table__tr--m-clickable--OutlineOffset: calc(-1 * var(--pf-t--global--spacer--xs)); --pf-v6-c-table__tr--m-clickable--hover--BackgroundColor: var(--pf-t--global--background--color--primary--hover); --pf-v6-c-table__tr--m-selected--BackgroundColor: var(--pf-t--global--background--color--primary--clicked); --pf-v6-c-table__tr--m-selected--OutlineOffset: calc(-1 * var(--pf-t--global--spacer--xs)); --pf-v6-c-table__tbody--m-clickable--BackgroundColor: transparent; --pf-v6-c-table__tbody--m-clickable--OutlineOffset: calc(-1 * var(--pf-t--global--spacer--xs)); --pf-v6-c-table__tbody--m-clickable--hover--BackgroundColor: var(--pf-t--global--background--color--primary--hover); --pf-v6-c-table__tbody--m-clickable--m-expanded--BackgroundColor: var(--pf-t--global--background--color--primary--clicked); --pf-v6-c-table__tbody--m-selected--BackgroundColor: var(--pf-t--global--background--color--primary--clicked); --pf-v6-c-table__tbody--m-selected--OutlineOffset: calc(-1 * var(--pf-t--global--spacer--xs)); --pf-v6-c-table__thead--m-nested-column-header--BorderBlockEndWidth: var(--pf-v6-c-table--border-width--base); --pf-v6-c-table__thead--m-nested-column-header--BorderBlockEndColor: var(--pf-v6-c-table--BorderColor); --pf-v6-c-table__thead--m-nested-column-header--after--ZIndex: initial; --pf-v6-c-table__thead--m-nested-column-header--button--OutlineOffset: -0.1875rem; --pf-v6-c-table__thead--m-nested-column-header__tr--PaddingBlockStart: var(--pf-t--global--spacer--xs); --pf-v6-c-table__thead--m-nested-column-header__tr--PaddingBlockEnd: var(--pf-t--global--spacer--md); --pf-v6-c-table__subhead--Color: var(--pf-t--global--text--color--subtle); --pf-v6-c-table__nested-column-header__button--PaddingInlineStart: calc(var(--pf-v6-c-table__button--PaddingInlineStart) - var(--pf-t--global--spacer--control--horizontal--plain)); --pf-v6-c-table__nested-column-header__button--PaddingInlineEnd: calc(var(--pf-v6-c-table__button--PaddingInlineEnd) - (var(--pf-t--global--spacer--control--horizontal--plain) / 2)); --pf-v6-c-table--m-striped__tr--BackgroundColor: var(--pf-t--global--background--color--striped--row--default); --pf-v6-c-table--m-sticky-header--BackgroundColor: var(--pf-t--global--background--color--sticky--default); --pf-v6-c-table--m-sticky-header--cell--ZIndex: var(--pf-t--global--z-index--xs); --pf-v6-c-table--m-sticky-header--ZIndex: calc(var(--pf-t--global--z-index--xs) + 1); --pf-v6-c-table--m-sticky-header--border--ZIndex: calc(var(--pf-t--global--z-index--xs) + 2); --pf-v6-c-table--m-sticky-header--BorderRadius: 0; --pf-v6-c-table--m-sticky-header--BoxShadow: 0; --pf-v6-c-table--m-sticky-header--BorderBlockEndWidth: var(--pf-v6-c-table--border-width--base); --pf-v6-c-table--m-sticky-header--BorderBlockEndColor: var(--pf-v6-c-table--BorderColor); --pf-v6-c-table--m-sticky-header--BorderRadius--glass: var(--pf-t--global--border--radius--medium); --pf-v6-c-table--m-sticky-header--BoxShadow--glass: var(--pf-t--global--box-shadow--sm); --pf-v6-c-table--m-sticky-header--TransitionTimingFunction--BackgroundColor: var(--pf-t--global--motion--timing-function--default); --pf-v6-c-table--m-sticky-header--TransitionDuration--BackgroundColor: var(--pf-t--global--motion--duration--fade--default); --pf-v6-c-table--m-sticky-footer--ZIndex: calc(var(--pf-t--global--z-index--xs) + 1); --pf-v6-c-table--m-sticky-footer--border--ZIndex: calc(var(--pf-t--global--z-index--xs) + 2); } :where(.pf-v6-theme-glass) .pf-v6-c-table { --pf-v6-c-table--m-sticky-header--BorderBlockEndWidth: 0; --pf-v6-c-table--m-sticky-header--BoxShadow: var(--pf-v6-c-table--m-sticky-header--BoxShadow--glass); --pf-v6-c-table--m-sticky-header--BorderRadius: var(--pf-v6-c-table--m-sticky-header--BorderRadius--glass); } .pf-v6-c-table { width: 100%; background-color: var(--pf-v6-c-table--BackgroundColor); } :where(:root:not(.pf-v6-theme-glass)) .pf-v6-c-table.pf-m-plain, :where(:root.pf-v6-theme-glass) .pf-v6-c-table:not(.pf-m-no-plain-on-glass) { --pf-v6-c-table--BackgroundColor: transparent; --pf-v6-c-table__expandable-row-content--BackgroundColor: transparent; --pf-v6-c-table__expandable-row-content--PaddingInlineStart: 0; --pf-v6-c-table__expandable-row-content--PaddingInlineEnd: 0; --pf-v6-c-table__control-row--BackgroundColor: transparent; } .pf-v6-c-table.pf-m-fixed { table-layout: fixed; } .pf-v6-c-table.pf-m-sticky-header-base > .pf-v6-c-table__thead::after, .pf-v6-c-table.pf-m-sticky-header-base > .pf-v6-c-table__thead .pf-v6-c-table__th::after { opacity: 0; transition-timing-function: var(--pf-v6-c-table--m-sticky-header--TransitionTimingFunction--BackgroundColor); transition-duration: var(--pf-v6-c-table--m-sticky-header--TransitionDuration--BackgroundColor); transition-property: opacity; } .pf-v6-c-table.pf-m-sticky-header-stuck > .pf-v6-c-table__thead::after, .pf-v6-c-table.pf-m-sticky-header-stuck > .pf-v6-c-table__thead .pf-v6-c-table__th::after { opacity: 1; } .pf-v6-c-table.pf-m-sticky-header, .pf-v6-c-table.pf-m-sticky-header-base { position: relative; } .pf-v6-c-table.pf-m-sticky-header > .pf-v6-c-table__thead, .pf-v6-c-table.pf-m-sticky-header-base > .pf-v6-c-table__thead { position: sticky; inset-block-start: 0; z-index: var(--pf-v6-c-table--m-sticky-header--ZIndex); } .pf-v6-c-table.pf-m-sticky-header > .pf-v6-c-table__thead::after, .pf-v6-c-table.pf-m-sticky-header-base > .pf-v6-c-table__thead::after { position: absolute; inset: 0; z-index: -1; pointer-events: none; content: ""; border-radius: var(--pf-v6-c-table--m-sticky-header--BorderRadius); box-shadow: var(--pf-v6-c-table--m-sticky-header--BoxShadow); } .pf-v6-c-table.pf-m-sticky-header > .pf-v6-c-table__thead .pf-v6-c-table__th::after, .pf-v6-c-table.pf-m-sticky-header-base > .pf-v6-c-table__thead .pf-v6-c-table__th::after { position: absolute; inset: 0; z-index: -1; pointer-events: none; content: ""; background-color: var(--pf-v6-c-table--m-sticky-header--BackgroundColor); border-block-end: var(--pf-v6-c-table--m-sticky-header--BorderBlockEndWidth) solid var(--pf-v6-c-table--m-sticky-header--BorderBlockEndColor); } .pf-v6-c-table.pf-m-sticky-header > .pf-v6-c-table__thead .pf-v6-c-table__th:first-child::after, .pf-v6-c-table.pf-m-sticky-header-base > .pf-v6-c-table__thead .pf-v6-c-table__th:first-child::after { border-start-start-radius: var(--pf-v6-c-table--m-sticky-header--BorderRadius); border-end-start-radius: var(--pf-v6-c-table--m-sticky-header--BorderRadius); } .pf-v6-c-table.pf-m-sticky-header > .pf-v6-c-table__thead .pf-v6-c-table__th:last-child::after, .pf-v6-c-table.pf-m-sticky-header-base > .pf-v6-c-table__thead .pf-v6-c-table__th:last-child::after { border-start-end-radius: var(--pf-v6-c-table--m-sticky-header--BorderRadius); border-end-end-radius: var(--pf-v6-c-table--m-sticky-header--BorderRadius); } .pf-v6-c-table.pf-m-sticky-header > .pf-v6-c-table__thead > :where(th, td), .pf-v6-c-table.pf-m-sticky-header-base > .pf-v6-c-table__thead > :where(th, td) { z-index: var(--pf-v6-c-table--m-sticky-header--cell--ZIndex); } :where(.pf-v6-theme-glass) .pf-v6-c-table.pf-m-sticky-header .pf-m-nested-column-header, :where(.pf-v6-theme-glass) .pf-v6-c-table.pf-m-sticky-header-base .pf-m-nested-column-header { --pf-v6-c-table--m-sticky-header--BorderRadius: 0; --pf-v6-c-table__thead--m-nested-column-header--BorderBlockEndWidth: 0; } .pf-v6-c-table:not(.pf-m-sticky-header) > .pf-m-nested-column-header tr:where(.pf-v6-c-table__tr):not(:last-child) { border-block-end: 0; } .pf-v6-c-table:not(.pf-m-sticky-header) > .pf-m-nested-column-header tr:where(.pf-v6-c-table__tr):not(:last-child) th:where(.pf-v6-c-table__th):not([rowspan]), .pf-v6-c-table:not(.pf-m-sticky-header) > .pf-m-nested-column-header tr:where(.pf-v6-c-table__tr):not(:last-child) td:where(.pf-v6-c-table__td):not([rowspan]) { --pf-v6-c-table--cell--PaddingBlockEnd: var(--pf-v6-c-table__thead--m-nested-column-header__tr--PaddingBlockEnd); } .pf-v6-c-table.pf-m-sticky-footer > .pf-v6-c-table__tfoot { position: sticky; inset-block-end: 0; z-index: var(--pf-v6-c-table--m-sticky-footer--ZIndex); background: var(--pf-v6-c-table--BackgroundColor); } .pf-v6-c-table.pf-m-sticky-footer > .pf-v6-c-table__tfoot::before { position: absolute; inset: 0; z-index: var(--pf-v6-c-table--m-sticky-footer--border--ZIndex); pointer-events: none; content: ""; border-block-start: var(--pf-v6-c-table--border-width--base) solid var(--pf-v6-c-table--BorderColor); } .pf-v6-c-table.pf-m-sticky-footer > .pf-v6-c-table__tbody:last-of-type > .pf-v6-c-table__tr:last-of-type { border-block-end: 0; } .pf-v6-c-table.pf-m-plain { --pf-v6-c-table--BackgroundColor: transparent; } .pf-v6-c-table.pf-m-striped:not(.pf-m-expandable) > tbody:where(.pf-v6-c-table__tbody) > tr:where(.pf-v6-c-table__tr):nth-child(odd), .pf-v6-c-table.pf-m-striped.pf-m-expandable > tbody:where(.pf-v6-c-table__tbody):nth-of-type(odd) > tr:where(.pf-v6-c-table__tr), .pf-v6-c-table > .pf-m-striped > tr:nth-child(odd), .pf-v6-c-table > .pf-m-striped-even > tr:nth-child(even), .pf-v6-c-table tr:where(.pf-v6-c-table__tr).pf-m-striped { --pf-v6-c-table__sticky-column--BackgroundColor: var(--pf-v6-c-table--m-striped__tr--BackgroundColor); background: var(--pf-v6-c-table--m-striped__tr--BackgroundColor); } .pf-v6-c-table tr:where(.pf-v6-c-table__tr):not(.pf-v6-c-table__expandable-row).pf-m-ghost-row { background-color: var(--pf-v6-c-table__tr--m-ghost-row--BackgroundColor); opacity: var(--pf-v6-c-table__tr--m-ghost-row--Opacity); } .pf-v6-c-table tr:where(.pf-v6-c-table__tr) > :where(th, td) { --pf-v6-hidden-visible--visible--Display: var(--pf-v6-c-table--cell--hidden-visible--Display); --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-table tr:where(.pf-v6-c-table__tr) > :where(th, td).pf-m-hidden { --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display); } @media screen and (min-width: 36rem) { .pf-v6-c-table tr:where(.pf-v6-c-table__tr) > :where(th, td).pf-m-hidden-on-sm { --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display); } .pf-v6-c-table tr:where(.pf-v6-c-table__tr) > :where(th, td).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-table tr:where(.pf-v6-c-table__tr) > :where(th, td).pf-m-hidden-on-md { --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display); } .pf-v6-c-table tr:where(.pf-v6-c-table__tr) > :where(th, td).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-table tr:where(.pf-v6-c-table__tr) > :where(th, td).pf-m-hidden-on-lg { --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display); } .pf-v6-c-table tr:where(.pf-v6-c-table__tr) > :where(th, td).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-table tr:where(.pf-v6-c-table__tr) > :where(th, td).pf-m-hidden-on-xl { --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display); } .pf-v6-c-table tr:where(.pf-v6-c-table__tr) > :where(th, td).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-table tr:where(.pf-v6-c-table__tr) > :where(th, td).pf-m-hidden-on-2xl { --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display); } .pf-v6-c-table tr:where(.pf-v6-c-table__tr) > :where(th, td).pf-m-visible-on-2xl { --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display); } } .pf-v6-c-table tr:where(.pf-v6-c-table__tr) > :where(th, td) { position: relative; width: var(--pf-v6-c-table--cell--Width); min-width: var(--pf-v6-c-table--cell--MinWidth); max-width: var(--pf-v6-c-table--cell--MaxWidth); padding-block-start: var(--pf-v6-c-table--cell--PaddingBlockStart); padding-block-end: var(--pf-v6-c-table--cell--PaddingBlockEnd); padding-inline-start: var(--pf-v6-c-table--cell--PaddingInlineStart); padding-inline-end: var(--pf-v6-c-table--cell--PaddingInlineEnd); overflow: var(--pf-v6-c-table--cell--Overflow); text-overflow: var(--pf-v6-c-table--cell--TextOverflow); font-size: var(--pf-v6-c-table--cell--FontSize); font-weight: var(--pf-v6-c-table--cell--FontWeight); line-height: var(--pf-v6-c-table--cell--LineHeight); color: var(--pf-v6-c-table--cell--Color); word-break: var(--pf-v6-c-table--cell--WordBreak); white-space: var(--pf-v6-c-table--cell--WhiteSpace); } .pf-v6-c-table tr:where(.pf-v6-c-table__tr) > :where(th, td):first-child { padding-inline-start: var(--pf-v6-c-table--cell--first-last-child--PaddingInline); } .pf-v6-c-table tr:where(.pf-v6-c-table__tr) > :where(th, td):last-child { padding-inline-end: var(--pf-v6-c-table--cell--first-last-child--PaddingInline); } .pf-v6-c-table tr:where(.pf-v6-c-table__tr) > :where(th, td).pf-m-center { text-align: center; } .pf-v6-c-table tr:where(.pf-v6-c-table__tr) > :where(th, td):is(:empty, .pf-v6-c-table__cell-empty) { width: auto; min-width: 0; padding: 0; } .pf-v6-c-table tr:where(.pf-v6-c-table__tr) > :where(th, td).pf-m-help { --pf-v6-c-table--cell--MinWidth: var(--pf-v6-c-table--cell--m-help--MinWidth); } .pf-v6-c-table tr:where(.pf-v6-c-table__tr) > :where(th, td).pf-m-favorite { --pf-v6-c-table__button--Color: var(--pf-v6-c-table--cell--m-favorite--Color); --pf-v6-c-table__sort--MinWidth: fit-content; --pf-v6-c-table--cell--MaxWidth: fit-content; --pf-v6-c-table--cell--Overflow: visible; } .pf-v6-c-table tr:where(.pf-v6-c-table__tr) > :where(th, td).pf-m-border-right::before, .pf-v6-c-table tr:where(.pf-v6-c-table__tr) > :where(th, td).pf-m-border-left::before { position: absolute; inset: 0; pointer-events: none; content: ""; } .pf-v6-c-table tr:where(.pf-v6-c-table__tr) > :where(th, td).pf-m-border-right::before { border-inline-end: var(--pf-v6-c-table--cell--m-border-right--before--BorderInlineEndWidth) solid var(--pf-v6-c-table--cell--m-border-right--before--BorderInlineEndColor); } .pf-v6-c-table tr:where(.pf-v6-c-table__tr) > :where(th, td).pf-m-border-left::before { border-inline-start: var(--pf-v6-c-table--cell--m-border-left--before--BorderInlineStartWidth) solid var(--pf-v6-c-table--cell--m-border-left--before--BorderInlineStartColor); } .pf-v6-c-table caption:where(.pf-v6-c-table__caption) { padding-block-start: var(--pf-v6-c-table__caption--PaddingBlockStart); padding-block-end: var(--pf-v6-c-table__caption--PaddingBlockEnd); padding-inline-start: var(--pf-v6-c-table__caption--PaddingInlineStart); font-size: var(--pf-v6-c-table__caption--FontSize); color: var(--pf-v6-c-table__caption--Color); text-align: start; background-color: var(--pf-v6-c-table--BackgroundColor); } .pf-v6-c-table thead:where(.pf-v6-c-table__thead) { --pf-v6-c-table--cell--FontSize: var(--pf-v6-c-table__thead--cell--FontSize); --pf-v6-c-table--cell--FontWeight: var(--pf-v6-c-table__thead--cell--FontWeight); --pf-v6-c-table--cell--MinWidth: var(--pf-v6-c-table--m-truncate--cell--MinWidth); --pf-v6-c-table--cell--MaxWidth: var(--pf-v6-c-table--m-truncate--cell--MaxWidth); --pf-v6-c-table--cell--Overflow: hidden; --pf-v6-c-table--cell--TextOverflow: ellipsis; --pf-v6-c-table--cell--WhiteSpace: nowrap; } .pf-v6-c-table thead:where(.pf-v6-c-table__thead) .pf-v6-c-table__sort .pf-v6-c-table__button { margin-block-end: calc(var(--pf-v6-c-table__button--PaddingBlockEnd) * -1); } .pf-v6-c-table thead:where(.pf-v6-c-table__thead).pf-m-nested-column-header button:where(.pf-v6-c-button) { outline-offset: var(--pf-v6-c-table__thead--m-nested-column-header--button--OutlineOffset); } .pf-v6-c-table thead:where(.pf-v6-c-table__thead).pf-m-nested-column-header tr:where(.pf-v6-c-table__tr):not(:first-child) th:where(.pf-v6-c-table__th):not([rowspan]), .pf-v6-c-table thead:where(.pf-v6-c-table__thead).pf-m-nested-column-header tr:where(.pf-v6-c-table__tr):not(:first-child) td:where(.pf-v6-c-table__td):not([rowspan]) { --pf-v6-c-table--cell--PaddingBlockStart: var(--pf-v6-c-table__thead--m-nested-column-header__tr--PaddingBlockStart); } .pf-v6-c-table thead:where(.pf-v6-c-table__thead) .pf-v6-c-table__subhead { --pf-v6-c-table__sort__button__text--Color: var(--pf-v6-c-table__subhead--Color); color: var(--pf-v6-c-table__subhead--Color); } .pf-v6-c-table tbody:where(.pf-v6-c-table__tbody) { --pf-v6-c-table--cell--PaddingBlockStart: var(--pf-v6-c-table__tbody--cell--PaddingBlockStart); --pf-v6-c-table--cell--PaddingBlockEnd: var(--pf-v6-c-table__tbody--cell--PaddingBlockEnd); --pf-v6-c-table--cell--FontSize: var(--pf-v6-c-table__tbody--cell--FontSize); } .pf-v6-c-table tbody:where(.pf-v6-c-table__tbody) > tr:where(.pf-v6-c-table__tr) > :where(th, td) { overflow-wrap: break-word; } .pf-v6-c-table .pf-v6-c-table__td.pf-m-action { --pf-v6-c-table--cell--PaddingBlockStart: var(--pf-v6-c-table__td--m-action--PaddingBlockStart); --pf-v6-c-table--cell--PaddingBlockEnd: var(--pf-v6-c-table__td--m-action--PaddingBlockEnd); } .pf-v6-c-table .pf-v6-c-table__sort { min-width: var(--pf-v6-c-table__sort--MinWidth); } .pf-v6-c-table :where(.pf-v6-c-table__th, .pf-v6-c-table__td).pf-m-help { min-width: var(--pf-v6-c-table__th--m-help--MinWidth); } .pf-v6-c-table.pf-m-no-border-rows > tbody:where(.pf-v6-c-table__tbody) { --pf-v6-c-table__tr--BorderBlockEndWidth: 0; --pf-v6-c-table__tbody--BorderBlockEndWidth: 0; --pf-v6-c-table--m-expandable__tbody--BorderBlockEndWidth: 0; --pf-v6-c-table__control-row--BorderBlockEndWidth: 0; } .pf-v6-c-table.pf-m-no-border-rows > tbody:where(.pf-v6-c-table__tbody) > tr:where(.pf-v6-c-table__tr) { border-block-end: 0; } .pf-v6-c-table.pf-m-no-border-rows > tbody:where(.pf-v6-c-table__tbody):not(.pf-m-expanded) .pf-v6-c-table__compound-expansion-toggle .pf-v6-c-table__button::before { display: none; } .pf-v6-c-table tr.pf-m-clickable:last-child { border-block-end-color: transparent; } .pf-v6-c-table tr:where(.pf-v6-c-table__tr).pf-m-clickable { cursor: pointer; outline-offset: var(--pf-v6-c-table__tr--m-clickable--OutlineOffset); background-color: var(--pf-v6-c-table__tr--m-clickable--BackgroundColor); } .pf-v6-c-table tr:where(.pf-v6-c-table__tr).pf-m-clickable:is(:hover, :focus) { --pf-v6-c-table__tr--m-clickable--BackgroundColor: var(--pf-v6-c-table__tr--m-clickable--hover--BackgroundColor); } .pf-v6-c-table tr:where(.pf-v6-c-table__tr).pf-m-selected { position: relative; outline-offset: var(--pf-v6-c-table__tr--m-selected--OutlineOffset); background-color: var(--pf-v6-c-table__tr--m-selected--BackgroundColor); } .pf-v6-c-table tr:where(.pf-v6-c-table__tr).pf-m-first-cell-offset-reset > :first-child { padding-inline-start: var(--pf-v6-c-table__tr--m-first-cell-offset-reset--cell--PaddingInlineStart); } .pf-v6-c-table tbody:where(.pf-v6-c-table__tbody).pf-m-clickable { cursor: pointer; outline-offset: var(--pf-v6-c-table__tbody--m-clickable--OutlineOffset); background-color: var(--pf-v6-c-table__tbody--m-clickable--BackgroundColor); } .pf-v6-c-table tbody:where(.pf-v6-c-table__tbody).pf-m-clickable:is(:hover, :focus) { --pf-v6-c-table__tbody--m-clickable--BackgroundColor: var(--pf-v6-c-table__tbody--m-clickable--hover--BackgroundColor); } .pf-v6-c-table tbody:where(.pf-v6-c-table__tbody).pf-m-clickable.pf-m-expanded { --pf-v6-c-table__tbody--m-clickable--BackgroundColor: var(--pf-v6-c-table__tbody--m-clickable--m-expanded--BackgroundColor); } .pf-v6-c-table tbody:where(.pf-v6-c-table__tbody).pf-m-selected { outline-offset: var(--pf-v6-c-table__tbody--m-selected--OutlineOffset); background-color: var(--pf-v6-c-table__tbody--m-selected--BackgroundColor); } .pf-v6-c-table tbody:where(.pf-v6-c-table__tbody).pf-m-selected .pf-v6-c-table__tr.pf-m-expanded:not(.pf-v6-c-table__expandable-row) { border: none; } .pf-v6-c-table.pf-m-drag-over { overflow-anchor: none; } .pf-v6-c-table .pf-v6-c-table { background-color: transparent; } .pf-v6-c-table .pf-v6-c-table, .pf-v6-c-table .pf-v6-c-table :is(.pf-v6-c-table__tbody, .pf-v6-c-table__tr:last-child) { border-block-end: 0; } .pf-v6-c-table .pf-v6-c-button .pf-v6-c-table__sort-indicator { --pf-v6-c-table__sort-indicator--MarginInlineStart: 0; } .pf-v6-c-table.pf-m-animate-expand > .pf-v6-c-table__tbody.pf-m-expanded > .pf-v6-c-table__control-row { border-block-end: 0; } .pf-v6-c-table.pf-m-animate-expand > .pf-v6-c-table__tbody > .pf-v6-c-table__expandable-row { display: var(--pf-v6-c-table__expandable-row--Display, revert); visibility: hidden; opacity: var(--pf-v6-c-table__expandable-row--Opacity); translate: 0 var(--pf-v6-c-table__expandable-row--TranslateY); transition-delay: 0s, 0s, var(--pf-v6-c-table__expandable-row--TransitionDuration--collapse--fade), var(--pf-v6-c-table__expandable-row--TransitionDuration--collapse--fade); transition-timing-function: var(--pf-v6-c-table__expandable-row--TransitionTimingFunction); transition-duration: var(--pf-v6-c-table__expandable-row--TransitionDuration--collapse--fade), var(--pf-v6-c-table__expandable-row--TransitionDuration--collapse--slide), 0s, 0s; transition-property: opacity, translate, visibility, background-color; } .pf-v6-c-table.pf-m-animate-expand > .pf-v6-c-table__tbody > .pf-v6-c-table__expandable-row[hidden] { display: var(--pf-v6-c-table__expandable-row--Display, revert); } .pf-v6-c-table.pf-m-animate-expand > .pf-v6-c-table__tbody > .pf-v6-c-table__expandable-row.pf-m-expanded { visibility: visible; opacity: var(--pf-v6-c-table__tbody--m-expanded__expandable-row--Opacity); translate: 0 var(--pf-v6-c-table__tbody--m-expanded__expandable-row--TranslateY); transition-delay: 0s; transition-duration: var(--pf-v6-c-table__expandable-row--TransitionDuration--expand--fade), var(--pf-v6-c-table__expandable-row--TransitionDuration--expand--slide), 0s, 0s; } .pf-v6-c-table.pf-m-animate-expand > .pf-v6-c-table__tbody > .pf-v6-c-table__expandable-row.pf-m-expanded > :is(.pf-v6-c-table__td, .pf-v6-c-table__th) > .pf-v6-c-table__expandable-row-content { max-height: 99999px; } .pf-v6-c-table.pf-m-animate-expand > .pf-v6-c-table__tbody > .pf-v6-c-table__expandable-row:not(.pf-m-expanded) > :is(.pf-v6-c-table__td, .pf-v6-c-table__th), .pf-v6-c-table.pf-m-animate-expand > .pf-v6-c-table__tbody > .pf-v6-c-table__expandable-row:not(.pf-m-expanded) > :is(.pf-v6-c-table__td, .pf-v6-c-table__th) > .pf-v6-c-table__expandable-row-content { padding: 0; overflow: hidden; transition-delay: var(--pf-v6-c-table__expandable-row--TransitionDuration--collapse--fade); transition-property: padding, max-height, overflow; } .pf-v6-c-table.pf-m-animate-expand > .pf-v6-c-table__tbody > .pf-v6-c-table__expandable-row:not(.pf-m-expanded) > :is(.pf-v6-c-table__td, .pf-v6-c-table__th) > .pf-v6-c-table__expandable-row-content { max-height: 0; } .pf-v6-c-table.pf-m-animate-expand > .pf-v6-c-table__tbody > .pf-v6-c-table__tr:has(~ .pf-v6-c-table__expandable-row) { border-block-end: 0; } .pf-v6-c-table.pf-m-animate-expand > .pf-v6-c-table__tbody > .pf-v6-c-table__control-row.pf-m-no-animate-expand ~ .pf-v6-c-table__expandable-row { --pf-v6-c-table__expandable-row--TransitionDuration--collapse--fade: 0s; --pf-v6-c-table__expandable-row--TransitionDuration--collapse--slide: 0s; --pf-v6-c-table__expandable-row--TransitionDuration--expand--fade: 0s; --pf-v6-c-table__expandable-row--TransitionDuration--expand--slide: 0s; } [class*=pf-v6-c-table].pf-m-truncate { --pf-v6-c-table--cell--MinWidth: var(--pf-v6-c-table--m-truncate--cell--MinWidth); --pf-v6-c-table--cell--MaxWidth: var(--pf-v6-c-table--m-truncate--cell--MaxWidth); --pf-v6-c-table--cell--Overflow: hidden; --pf-v6-c-table--cell--TextOverflow: ellipsis; --pf-v6-c-table--cell--WhiteSpace: nowrap; } [class*=pf-v6-c-table].pf-m-wrap { --pf-v6-c-table--cell--MinWidth: 0; --pf-v6-c-table--cell--MaxWidth: none; --pf-v6-c-table--cell--Overflow: visible; --pf-v6-c-table--cell--TextOverflow: clip; --pf-v6-c-table--cell--WhiteSpace: normal; } [class*=pf-v6-c-table].pf-m-nowrap { --pf-v6-c-table--cell--MinWidth: 0; --pf-v6-c-table--cell--MaxWidth: none; --pf-v6-c-table--cell--Overflow: visible; --pf-v6-c-table--cell--TextOverflow: clip; --pf-v6-c-table--cell--WhiteSpace: nowrap; } [class*=pf-v6-c-table] .pf-v6-c-table__icon, [class*=pf-v6-c-table].pf-m-fit-content { --pf-v6-c-table--cell--MinWidth: fit-content; --pf-v6-c-table--cell--MaxWidth: none; --pf-v6-c-table--cell--Width: 1%; --pf-v6-c-table--cell--Overflow: visible; --pf-v6-c-table--cell--TextOverflow: clip; --pf-v6-c-table--cell--WhiteSpace: nowrap; } [class*=pf-v6-c-table].pf-m-break-word { --pf-v6-c-table--cell--WordBreak: break-word; --pf-v6-c-table--cell--WhiteSpace: normal; } .pf-v6-c-table__text { position: relative; display: block; width: var(--pf-v6-c-table--cell--Width); min-width: var(--pf-v6-c-table__text--MinWidth); max-width: var(--pf-v6-c-table--cell--MaxWidth); overflow: var(--pf-v6-c-table--cell--Overflow); text-overflow: var(--pf-v6-c-table--cell--TextOverflow); line-height: var(--pf-v6-c-table--cell--LineHeight); word-break: var(--pf-v6-c-table--cell--WordBreak); white-space: var(--pf-v6-c-table--cell--WhiteSpace); } .pf-v6-c-table__text.pf-m-truncate { --pf-v6-c-table--cell--MinWidth: 100%; min-width: max(var(--pf-v6-c-table__text--m-truncate--MinWidth), var(--pf-v6-c-table__text--MinWidth)); } .pf-v6-c-table__text.pf-m-truncate > :where(th, td) { overflow: var(--pf-v6-c-table--cell--Overflow); text-overflow: var(--pf-v6-c-table--cell--TextOverflow); white-space: var(--pf-v6-c-table--cell--WhiteSpace); } .pf-v6-c-table__button { position: relative; width: auto; padding-block-start: var(--pf-v6-c-table__button--PaddingBlockStart); padding-block-end: var(--pf-v6-c-table__button--PaddingBlockEnd); padding-inline-start: var(--pf-v6-c-table__button--PaddingInlineStart); padding-inline-end: var(--pf-v6-c-table__button--PaddingInlineEnd); margin-block-end: calc(var(--pf-v6-c-table__button--PaddingBlockEnd) * -1); margin-inline-start: calc(var(--pf-v6-c-table__button--PaddingInlineStart) * -1); font-size: inherit; font-weight: inherit; color: var(--pf-v6-c-table__button--Color); text-align: start; white-space: inherit; user-select: text; outline-offset: var(--pf-v6-c-table__button--OutlineOffset); background-color: var(--pf-v6-c-table__button--BackgroundColor); border: 0; border-radius: var(--pf-v6-c-table__button--BorderRadius); } .pf-v6-c-table__button::after { position: absolute; inset: 0; pointer-events: none; content: ""; border: var(--pf-v6-c-table__button--BorderWidth) solid var(--pf-v6-c-table__button--BorderColor); border-radius: inherit; } .pf-v6-c-table .pf-v6-c-table .pf-v6-c-table__button { margin-block-end: 0; } .pf-v6-c-table__button:is(:hover, :focus) { color: var(--pf-v6-c-table__button--hover--Color); } .pf-v6-c-table__sort .pf-v6-c-table__text, .pf-v6-c-table__compound-expansion-toggle .pf-v6-c-table__text { display: block; width: auto; overflow: var(--pf-v6-c-table--cell--Overflow); text-overflow: var(--pf-v6-c-table--cell--TextOverflow); white-space: var(--pf-v6-c-table--cell--WhiteSpace); } .pf-v6-c-table__button-content, .pf-v6-c-table__column-help { display: inline-grid; grid-template-columns: auto max-content; align-items: last baseline; justify-content: start; } .pf-v6-c-table__button-content .pf-v6-c-table__text, .pf-v6-c-table__column-help .pf-v6-c-table__text { min-width: auto; max-width: 100%; } .pf-v6-c-table thead:where(.pf-v6-c-table__thead).pf-m-nowrap .pf-v6-c-table__button-content, .pf-v6-c-table tr:where(.pf-v6-c-table__tr).pf-m-nowrap .pf-v6-c-table__button-content, .pf-v6-c-table th:where(.pf-v6-c-table__th).pf-m-nowrap .pf-v6-c-table__button-content, .pf-v6-c-table thead:where(.pf-v6-c-table__thead).pf-m-nowrap .pf-v6-c-table__column-help, .pf-v6-c-table tr:where(.pf-v6-c-table__tr).pf-m-nowrap .pf-v6-c-table__column-help, .pf-v6-c-table th:where(.pf-v6-c-table__th).pf-m-nowrap .pf-v6-c-table__column-help { grid-template-columns: min-content max-content; } .pf-v6-c-table thead:where(.pf-v6-c-table__thead).pf-m-fit-content .pf-v6-c-table__button-content, .pf-v6-c-table tr:where(.pf-v6-c-table__tr).pf-m-fit-content .pf-v6-c-table__button-content, .pf-v6-c-table th:where(.pf-v6-c-table__th).pf-m-fit-content .pf-v6-c-table__button-content, .pf-v6-c-table thead:where(.pf-v6-c-table__thead).pf-m-fit-content .pf-v6-c-table__column-help, .pf-v6-c-table tr:where(.pf-v6-c-table__tr).pf-m-fit-content .pf-v6-c-table__column-help, .pf-v6-c-table th:where(.pf-v6-c-table__th).pf-m-fit-content .pf-v6-c-table__column-help { grid-template-columns: fit-content max-content; } .pf-v6-c-table thead:where(.pf-v6-c-table__thead).pf-m-wrap .pf-v6-c-table__button-content, .pf-v6-c-table tr:where(.pf-v6-c-table__tr).pf-m-wrap .pf-v6-c-table__button-content, .pf-v6-c-table th:where(.pf-v6-c-table__th).pf-m-wrap .pf-v6-c-table__button-content, .pf-v6-c-table thead:where(.pf-v6-c-table__thead).pf-m-truncate .pf-v6-c-table__button-content, .pf-v6-c-table tr:where(.pf-v6-c-table__tr).pf-m-truncate .pf-v6-c-table__button-content, .pf-v6-c-table th:where(.pf-v6-c-table__th).pf-m-truncate .pf-v6-c-table__button-content, .pf-v6-c-table thead:where(.pf-v6-c-table__thead).pf-m-wrap .pf-v6-c-table__column-help, .pf-v6-c-table tr:where(.pf-v6-c-table__tr).pf-m-wrap .pf-v6-c-table__column-help, .pf-v6-c-table th:where(.pf-v6-c-table__th).pf-m-wrap .pf-v6-c-table__column-help, .pf-v6-c-table thead:where(.pf-v6-c-table__thead).pf-m-truncate .pf-v6-c-table__column-help, .pf-v6-c-table tr:where(.pf-v6-c-table__tr).pf-m-truncate .pf-v6-c-table__column-help, .pf-v6-c-table th:where(.pf-v6-c-table__th).pf-m-truncate .pf-v6-c-table__column-help { grid-template-columns: auto max-content; } .pf-v6-c-table .pf-v6-c-table__check, .pf-v6-c-table .pf-v6-c-table__toggle, .pf-v6-c-table .pf-v6-c-table__action, .pf-v6-c-table .pf-v6-c-table__inline-edit-action, .pf-v6-c-table .pf-v6-c-table__draggable { --pf-v6-c-table--cell--MinWidth: 0; --pf-v6-c-table--cell--Width: 1%; max-width: none; } .pf-v6-c-table .pf-v6-c-table__favorite { --pf-v6-c-table--cell--MaxWidth: auto; } .pf-v6-c-table__toggle { --pf-v6-c-table--cell--PaddingBlockStart: var(--pf-v6-c-table__toggle--PaddingBlockStart); --pf-v6-c-table--cell--PaddingBlockEnd: var(--pf-v6-c-table__toggle--PaddingBlockEnd); --pf-v6-c-table--cell--PaddingInlineStart: var(--pf-v6-c-table__toggle--PaddingInlineStart); --pf-v6-c-table--cell--PaddingInlineEnd: var(--pf-v6-c-table__toggle--PaddingInlineEnd); } .pf-v6-c-table__thead .pf-v6-c-table__toggle .pf-v6-c-button { margin-block-start: calc(var(--pf-v6-c-button--PaddingBlockStart) * -1); margin-block-end: calc(var(--pf-v6-c-button--PaddingBlockEnd) * -1); line-height: 1lh; } .pf-v6-c-table__toggle .pf-v6-c-button.pf-m-expanded .pf-v6-c-table__toggle-icon { transform: rotate(var(--pf-v6-c-table__toggle--c-button--m-expanded__toggle-icon--Rotate)); } :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-table__toggle .pf-v6-c-table__toggle-icon { scale: -1 1; } .pf-v6-c-table__toggle .pf-v6-c-table__toggle-icon { transform: rotate(var(--pf-v6-c-table__toggle--c-button__toggle-icon--Rotate)); transition-timing-function: var(--pf-v6-c-table__toggle--c-button__toggle-icon--TransitionTimingFunction); transition-duration: var(--pf-v6-c-table__toggle--c-button__toggle-icon--TransitionDuration); transition-property: transform; } .pf-v6-c-table__toggle svg { pointer-events: none; } .pf-v6-c-table__check { --pf-v6-c-table--cell--PaddingInlineStart: var(--pf-v6-c-table__check--PaddingInlineStart); --pf-v6-c-table--cell--PaddingInlineEnd: var(--pf-v6-c-table__check--PaddingInlineEnd); vertical-align: top; } .pf-v6-c-table__check .pf-v6-c-check { --pf-v6-c-check__label--FontSize: var(--pf-v6-c-table--cell--FontSize); --pf-v6-c-check__label--LineHeight: var(--pf-v6-c-table--cell--LineHeight); } .pf-v6-c-table__check .pf-v6-c-radio { --pf-v6-c-radio__label--FontSize: var(--pf-v6-c-table--cell--FontSize); --pf-v6-c-radio__label--LineHeight: var(--pf-v6-c-table--cell--LineHeight); } thead .pf-v6-c-table__check { vertical-align: bottom; } thead .pf-v6-c-table__check .pf-v6-c-check.pf-m-standalone, thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone { display: table-cell; height: auto; line-height: 1; vertical-align: baseline; } .pf-v6-c-table__favorite .pf-v6-c-button:not(.pf-m-favorite) { --pf-v6-c-button--FontSize: var(--pf-v6-c-table__favorite--c-button--FontSize); } .pf-v6-c-table__favorite.pf-m-favorited .pf-v6-c-button:not(.pf-m-favorited) { --pf-v6-c-button--m-plain__icon--Color: var(--pf-v6-c-table__favorite--m-favorited--c-button--Color); } .pf-v6-c-table__favorite.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-table__favorite--m-favorited--c-button--Color); } .pf-v6-c-table__draggable .pf-v6-c-button { cursor: grab; } .pf-v6-c-table__draggable .pf-v6-c-button:active { cursor: grabbing; } .pf-v6-c-table__action, .pf-v6-c-table__favorite, .pf-v6-c-table__inline-edit-action, .pf-v6-c-table__draggable { --pf-v6-c-table--cell--PaddingBlockStart: var(--pf-v6-c-table__action--PaddingBlockStart); --pf-v6-c-table--cell--PaddingBlockEnd: var(--pf-v6-c-table__action--PaddingBlockEnd); --pf-v6-c-table--cell--PaddingInlineStart: var(--pf-v6-c-table__action--PaddingInlineStart); --pf-v6-c-table--cell--PaddingInlineEnd: var(--pf-v6-c-table__action--PaddingInlineEnd); } .pf-v6-c-table__action:last-child, .pf-v6-c-table__inline-edit-action:last-child { text-align: end; } .pf-v6-c-table__compound-expansion-toggle { --pf-v6-c-table__button--Color: var(--pf-v6-c-table__compound-expansion-toggle__button--Color); --pf-v6-c-table__button--hover--Color: var(--pf-v6-c-table__compound-expansion-toggle__button--hover--Color); position: relative; padding: 0; background-color: var(--pf-v6-c-table__compound-expansion-toggle__button--BackgroundColor); } .pf-v6-c-table__compound-expansion-toggle.pf-m-truncate { overflow: visible; } .pf-v6-c-table__compound-expansion-toggle .pf-v6-c-table__button { position: static; min-width: 100%; padding: 0; margin: 0; overflow: hidden; } .pf-v6-c-table__compound-expansion-toggle .pf-v6-c-table__button:is(:hover, :focus) { outline: 0; } .pf-v6-c-table__compound-expansion-toggle .pf-v6-c-table__button::after { position: absolute; inset: 0; content: ""; border: 0; border-block-start: var(--pf-v6-c-table__compound-expansion-toggle__button--after--BorderBlockStartWidth) solid var(--pf-v6-c-table__compound-expansion-toggle__button--after--BorderColor); border-radius: var(--pf-v6-c-table__compound-expansion-toggle__button--after--BorderRadius); } .pf-v6-c-table__compound-expansion-toggle:hover, .pf-v6-c-table__compound-expansion-toggle:focus-within { --pf-v6-c-table__compound-expansion-toggle__button--BackgroundColor: var(--pf-v6-c-table__compound-expansion-toggle__button--hover--BackgroundColor); --pf-v6-c-table__compound-expansion-toggle__button--after--BorderBlockStartWidth: var(--pf-v6-c-table__compound-expansion-toggle__button--hover--after--BorderBlockStartWidth); } .pf-v6-c-table__compound-expansion-toggle.pf-m-expanded { --pf-v6-c-table__compound-expansion-toggle__button--BackgroundColor: var(--pf-v6-c-table__compound-expansion-toggle__button--expanded--BackgroundColor); --pf-v6-c-table__compound-expansion-toggle__button--after--BorderBlockStartWidth: var(--pf-v6-c-table__compound-expansion-toggle--m-expanded__button--after--BorderBlockStartWidth); } .pf-v6-c-table__compound-expansion-toggle:focus-within { outline-offset: var(--pf-v6-c-table__button--OutlineOffset); } @media (-webkit-min-device-pixel-ratio: 0) { .pf-v6-c-table__compound-expansion-toggle:focus-within { outline-style: auto; outline-color: -webkit-focus-ring-color; } } .pf-v6-c-table__column-help-action { align-self: last baseline; margin-inline-start: var(--pf-v6-c-table__column-help--MarginInlineStart); } .pf-v6-c-table__column-help-action .pf-v6-c-button { line-height: 1lh; } .pf-v6-c-table__sort { vertical-align: bottom; } .pf-v6-c-table__sort .pf-v6-c-table__button:is(:hover, :focus) { --pf-v6-c-table__sort-indicator--Color: var(--pf-v6-c-table__sort__button--hover__sort-indicator--Color); --pf-v6-c-table__sort__button__text--Color: var(--pf-v6-c-table__sort__button--hover__text--Color); --pf-v6-c-table__button--BackgroundColor: var(--pf-v6-c-table__button--hover--BackgroundColor); --pf-v6-c-table__button--BorderWidth: var(--pf-v6-c-table__button--hover--BorderWidth); } .pf-v6-c-table__sort .pf-v6-c-table__button .pf-v6-c-table__text { color: var(--pf-v6-c-table__sort__button__text--Color); } .pf-v6-c-table__sort.pf-m-selected .pf-v6-c-table__button, .pf-v6-c-table__sort.pf-m-selected .pf-v6-c-button { --pf-v6-c-table__sort-indicator--Color: var(--pf-v6-c-table__sort--m-selected__sort-indicator--Color); } .pf-v6-c-table__sort.pf-m-selected .pf-v6-c-table__button .pf-v6-c-table__text, .pf-v6-c-table__sort.pf-m-selected .pf-v6-c-button .pf-v6-c-table__text { color: var(--pf-v6-c-table__sort--m-selected__button--Color); } .pf-v6-c-table__sort.pf-m-help { --pf-v6-c-table__th--m-help--MinWidth: var(--pf-v6-c-table__sort--m-help--MinWidth); } .pf-v6-c-table__sort.pf-m-favorite .pf-v6-c-table__text { font-size: var(--pf-v6-c-table__favorite--c-button--FontSize); } .pf-v6-c-table__sort-indicator { grid-column: 2; align-self: end; margin-inline-start: var(--pf-v6-c-table__sort-indicator--MarginInlineStart); color: var(--pf-v6-c-table__sort-indicator--Color); pointer-events: none; } .pf-v6-c-table__expandable-row { position: relative; border-block-end: 0 solid transparent; } :not(.pf-v6-c-table__control-row) ~ .pf-v6-c-table__expandable-row > .pf-v6-c-table__th, :not(.pf-v6-c-table__control-row) ~ .pf-v6-c-table__expandable-row > .pf-v6-c-table__td { padding-block-start: 0; } .pf-v6-c-table__control-row ~ .pf-v6-c-table__expandable-row.pf-m-expanded > :is(.pf-v6-c-table__th, .pf-v6-c-table__td):not(.pf-m-no-padding) { padding-block-start: var(--pf-v6-c-table--cell--PaddingBlockStart); } .pf-v6-c-table__expandable-row td:where(.pf-v6-c-table__td).pf-m-no-padding, .pf-v6-c-table__expandable-row th:where(.pf-v6-c-table__th).pf-m-no-padding { padding-block-start: 0; padding-block-end: 0; padding-inline-start: 0; padding-inline-end: 0; } .pf-v6-c-table__expandable-row td:where(.pf-v6-c-table__td).pf-m-no-padding .pf-v6-c-table__expandable-row-content, .pf-v6-c-table__expandable-row th:where(.pf-v6-c-table__th).pf-m-no-padding .pf-v6-c-table__expandable-row-content { padding: 0; border-radius: 0; } .pf-v6-c-table__expandable-row .pf-v6-c-table__expandable-row-content { position: relative; padding-block-start: var(--pf-v6-c-table__expandable-row-content--PaddingBlockStart); padding-block-end: var(--pf-v6-c-table__expandable-row-content--PaddingBlockEnd); padding-inline-start: var(--pf-v6-c-table__expandable-row-content--PaddingInlineStart); padding-inline-end: var(--pf-v6-c-table__expandable-row-content--PaddingInlineEnd); background-color: var(--pf-v6-c-table__expandable-row-content--BackgroundColor); border: 0; border-radius: var(--pf-v6-c-table__expandable-row-content--BorderRadius); } .pf-v6-c-table__expandable-row .pf-v6-c-table__expandable-row-content.pf-m-no-background { background-color: transparent; } .pf-v6-c-table__expandable-row .pf-v6-c-table__td:not(.pf-m-no-padding) > .pf-v6-c-table__expandable-row-content::after { position: absolute; inset: 0; pointer-events: none; content: ""; border: var(--pf-v6-c-table__expandable-row-content--BorderWidth) solid var(--pf-v6-c-table__expandable-row-content--BorderColor); border-radius: inherit; } .pf-v6-c-table__expandable-row.pf-m-expanded { border-block-end-color: var(--pf-v6-c-table__expandable-row--m-expanded--BorderBlockEndColor); border-block-end-width: var(--pf-v6-c-table--border-width--base); } .pf-v6-c-table__expandable-row:not(.pf-m-expanded) { display: none; } .pf-v6-c-table__expandable-row tr:last-child { border-block-end: 0; } .pf-v6-c-table.pf-m-compact { --pf-v6-c-table--cell--PaddingBlockStart: var(--pf-v6-c-table--m-compact--cell--PaddingBlockStart); --pf-v6-c-table--cell--PaddingBlockEnd: var(--pf-v6-c-table--m-compact--cell--PaddingBlockEnd); } .pf-v6-c-table.pf-m-compact tr:where(.pf-v6-c-table__tr):not(.pf-v6-c-table__expandable-row) { --pf-v6-c-table--cell--PaddingBlockStart: var(--pf-v6-c-table--m-compact--cell--PaddingBlockStart); --pf-v6-c-table--cell--PaddingBlockEnd: var(--pf-v6-c-table--m-compact--cell--PaddingBlockEnd); } .pf-v6-c-table.pf-m-compact thead:where(.pf-v6-c-table__thead) th:where(.pf-v6-c-table__th), .pf-v6-c-table.pf-m-compact thead:where(.pf-v6-c-table__thead) .pf-v6-c-table__toggle { --pf-v6-c-table--cell--PaddingBlockStart: var(--pf-v6-c-table--m-compact__th--PaddingBlockStart); --pf-v6-c-table--cell--PaddingBlockEnd: var(--pf-v6-c-table--m-compact__th--PaddingBlockEnd); } .pf-v6-c-table.pf-m-compact .pf-v6-c-table__action, .pf-v6-c-table.pf-m-compact .pf-v6-c-table__favorite, .pf-v6-c-table.pf-m-compact .pf-v6-c-table__toggle, .pf-v6-c-table.pf-m-compact .pf-v6-c-table__draggable { --pf-v6-c-table--cell--PaddingBlockStart: var(--pf-v6-c-table--m-compact__action--PaddingBlockStart); --pf-v6-c-table--cell--PaddingBlockEnd: var(--pf-v6-c-table--m-compact__action--PaddingBlockEnd); } .pf-v6-c-table.pf-m-compact .pf-v6-c-table__td.pf-m-action { --pf-v6-c-table--cell--PaddingBlockStart: var(--pf-v6-c-table--m-compact__td--m-action--PaddingBlockStart); --pf-v6-c-table--cell--PaddingBlockEnd: var(--pf-v6-c-table--m-compact__td--m-action--PaddingBlockEnd); } .pf-v6-c-table.pf-m-compact .pf-v6-c-table__icon { width: auto; min-width: 0; text-align: center; } .pf-v6-c-table__thead { --pf-v6-c-table__tr--BorderBlockEndWidth: 0; --pf-v6-c-table__toggle--PaddingBlockStart: var(--pf-v6-c-table__thead__toggle--PaddingBlockStart); --pf-v6-c-table__toggle--PaddingBlockEnd: var(--pf-v6-c-table__thead__toggle--PaddingBlockEnd); vertical-align: bottom; } .pf-v6-c-table__thead.pf-m-nested-column-header { --pf-v6-c-table--m-sticky-header--BorderBlockEndWidth: 0; position: relative; } .pf-v6-c-table__thead.pf-m-nested-column-header .pf-v6-c-table__tr:last-child:not(.pf-m-border-row) { z-index: var(--pf-v6-c-table__thead--m-nested-column-header--after--ZIndex); pointer-events: none; border-block-end: var(--pf-v6-c-table__thead--m-nested-column-header--BorderBlockEndWidth) solid var(--pf-v6-c-table__thead--m-nested-column-header--BorderBlockEndColor); } .pf-v6-c-table__thead.pf-m-nested-column-header .pf-v6-c-table__button { --pf-v6-c-table__button--PaddingInlineStart: var(--pf-v6-c-table__nested-column-header__button--PaddingInlineStart); --pf-v6-c-table__button--PaddingInlineEnd: var(--pf-v6-c-table__nested-column-header__button--PaddingInlineEnd); margin-inline-end: calc(var(--pf-v6-c-table__button--PaddingInlineStart) * -1); } .pf-v6-c-table__tbody { vertical-align: top; } .pf-v6-c-table__tbody .pf-v6-c-table__control-row ~ .pf-v6-c-table__expandable-row.pf-m-expanded { --pf-v6-c-table__expandable-row-content--BorderWidth: var(--pf-v6-c-table--compound-expansion--m-expanded--BorderWidth); background-color: var(--pf-v6-c-table--compound-expansion--m-expanded--BackgroundColor); } .pf-v6-c-table.pf-m-expandable .pf-v6-c-table__tr.pf-m-expanded { border-block-end: 0; } .pf-v6-c-table.pf-m-expandable .pf-v6-c-table__tbody { border-block-end: var(--pf-v6-c-table__tr--BorderBlockEndWidth) solid var(--pf-v6-c-table__tr--BorderBlockEndColor); } .pf-v6-c-table.pf-m-expandable .pf-v6-c-table__tbody.pf-m-expanded { border-block-end: var(--pf-v6-c-table__tr--BorderBlockEndWidth) solid var(--pf-v6-c-table__tr--BorderBlockEndColor); } .pf-v6-c-table.pf-m-expandable .pf-v6-c-table__tbody.pf-m-expanded .pf-v6-c-table__control-row { background-color: var(--pf-v6-c-table__control-row--BackgroundColor); border-block-end: var(--pf-v6-c-table__control-row--BorderBlockEndWidth) solid var(--pf-v6-c-table__control-row__tbody--BorderBlockEndColor); } .pf-v6-c-table.pf-m-expandable .pf-v6-c-table__tbody.pf-m-expanded .pf-v6-c-table__control-row.pf-m-expanded { border-block-end: 0; } .pf-v6-c-table__tr { border-block-end: var(--pf-v6-c-table__tr--BorderBlockEndWidth) solid var(--pf-v6-c-table__tr--BorderBlockEndColor); } .pf-v6-c-table__thead .pf-v6-c-table__tr { border-block-end: 0; } .pf-v6-c-table__tr.pf-m-border-row { height: var(--pf-v6-c-table--border-width--base); background-color: var(--pf-v6-c-table--BorderColor); } .pf-v6-c-table__tfoot { --pf-v6-c-table__tr--BorderBlockEndWidth: 0; vertical-align: top; } .pf-v6-c-table__icon-inline { display: flex; align-items: center; } .pf-v6-c-table__icon-inline > :not(:last-child) { margin-inline-end: var(--pf-v6-c-table__icon-inline--MarginInlineEnd); } .pf-v6-c-table .pf-m-width-10 { --pf-v6-c-table--cell--Width: 10%; } .pf-v6-c-table .pf-m-width-15 { --pf-v6-c-table--cell--Width: 15%; } .pf-v6-c-table .pf-m-width-20 { --pf-v6-c-table--cell--Width: 20%; } .pf-v6-c-table .pf-m-width-25 { --pf-v6-c-table--cell--Width: 25%; } .pf-v6-c-table .pf-m-width-30 { --pf-v6-c-table--cell--Width: 30%; } .pf-v6-c-table .pf-m-width-35 { --pf-v6-c-table--cell--Width: 35%; } .pf-v6-c-table .pf-m-width-40 { --pf-v6-c-table--cell--Width: 40%; } .pf-v6-c-table .pf-m-width-45 { --pf-v6-c-table--cell--Width: 45%; } .pf-v6-c-table .pf-m-width-50 { --pf-v6-c-table--cell--Width: 50%; } .pf-v6-c-table .pf-m-width-60 { --pf-v6-c-table--cell--Width: 60%; } .pf-v6-c-table .pf-m-width-70 { --pf-v6-c-table--cell--Width: 70%; } .pf-v6-c-table .pf-m-width-80 { --pf-v6-c-table--cell--Width: 80%; } .pf-v6-c-table .pf-m-width-90 { --pf-v6-c-table--cell--Width: 90%; } .pf-v6-c-table .pf-m-width-100 { --pf-v6-c-table--cell--Width: 100%; } /* PatternFly component: FormControl/form-control */ .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--control--form-element); --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--control--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; outline-offset: var(--pf-v6-c-form-control--OutlineOffset); background-color: transparent; border: none; border-radius: var(--pf-v6-c-form-control--BorderRadius); } .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 { scrollbar-gutter: stable; outline-offset: 0; } .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; } /* PatternFly layout: Grid/grid */ .pf-v6-l-grid { --pf-v6-l-grid--m-gutter--GridGap: var(--pf-t--global--spacer--gutter--default); --pf-v6-l-grid__item--GridColumnStart: auto; --pf-v6-l-grid__item--GridColumnEnd: span 12; --pf-v6-l-grid--item--Order: 0; } .pf-v6-l-grid { display: grid; grid-template-columns: repeat(12, [col-start] 1fr); } .pf-v6-l-grid > *, .pf-v6-l-grid .pf-v6-l-grid__item { grid-column-start: var(--pf-v6-l-grid__item--GridColumnStart); grid-column-end: var(--pf-v6-l-grid__item--GridColumnEnd); min-width: 0; min-height: 0; order: var(--pf-v6-l-grid--item--Order); } @media (min-width: 36rem) { .pf-v6-l-grid > *, .pf-v6-l-grid .pf-v6-l-grid__item { order: var(--pf-v6-l-grid--item--Order-on-sm, var(--pf-v6-l-grid--item--Order)); } } @media (min-width: 48rem) { .pf-v6-l-grid > *, .pf-v6-l-grid .pf-v6-l-grid__item { order: var(--pf-v6-l-grid--item--Order-on-md, var(--pf-v6-l-grid--item--Order-on-sm, var(--pf-v6-l-grid--item--Order))); } } @media (min-width: 62rem) { .pf-v6-l-grid > *, .pf-v6-l-grid .pf-v6-l-grid__item { order: var(--pf-v6-l-grid--item--Order-on-lg, var(--pf-v6-l-grid--item--Order-on-md, var(--pf-v6-l-grid--item--Order-on-sm, var(--pf-v6-l-grid--item--Order)))); } } @media (min-width: 75rem) { .pf-v6-l-grid > *, .pf-v6-l-grid .pf-v6-l-grid__item { order: var(--pf-v6-l-grid--item--Order-on-xl, var(--pf-v6-l-grid--item--Order-on-lg, var(--pf-v6-l-grid--item--Order-on-md, var(--pf-v6-l-grid--item--Order-on-sm, var(--pf-v6-l-grid--item--Order))))); } } @media (min-width: 90.625rem) { .pf-v6-l-grid > *, .pf-v6-l-grid .pf-v6-l-grid__item { order: var(--pf-v6-l-grid--item--Order-on-2xl, var(--pf-v6-l-grid--item--Order-on-xl, var(--pf-v6-l-grid--item--Order-on-lg, var(--pf-v6-l-grid--item--Order-on-md, var(--pf-v6-l-grid--item--Order-on-sm, var(--pf-v6-l-grid--item--Order)))))); } } .pf-v6-l-grid.pf-m-all-1-col > * { --pf-v6-l-grid__item--GridColumnEnd: span 1; } .pf-v6-l-grid.pf-m-all-2-col > * { --pf-v6-l-grid__item--GridColumnEnd: span 2; } .pf-v6-l-grid.pf-m-all-3-col > * { --pf-v6-l-grid__item--GridColumnEnd: span 3; } .pf-v6-l-grid.pf-m-all-4-col > * { --pf-v6-l-grid__item--GridColumnEnd: span 4; } .pf-v6-l-grid.pf-m-all-5-col > * { --pf-v6-l-grid__item--GridColumnEnd: span 5; } .pf-v6-l-grid.pf-m-all-6-col > * { --pf-v6-l-grid__item--GridColumnEnd: span 6; } .pf-v6-l-grid.pf-m-all-7-col > * { --pf-v6-l-grid__item--GridColumnEnd: span 7; } .pf-v6-l-grid.pf-m-all-8-col > * { --pf-v6-l-grid__item--GridColumnEnd: span 8; } .pf-v6-l-grid.pf-m-all-9-col > * { --pf-v6-l-grid__item--GridColumnEnd: span 9; } .pf-v6-l-grid.pf-m-all-10-col > * { --pf-v6-l-grid__item--GridColumnEnd: span 10; } .pf-v6-l-grid.pf-m-all-11-col > * { --pf-v6-l-grid__item--GridColumnEnd: span 11; } .pf-v6-l-grid.pf-m-all-12-col > * { --pf-v6-l-grid__item--GridColumnEnd: span 12; } @media screen and (min-width: 36rem) { .pf-v6-l-grid.pf-m-all-1-col-on-sm > * { --pf-v6-l-grid__item--GridColumnEnd: span 1; } .pf-v6-l-grid.pf-m-all-2-col-on-sm > * { --pf-v6-l-grid__item--GridColumnEnd: span 2; } .pf-v6-l-grid.pf-m-all-3-col-on-sm > * { --pf-v6-l-grid__item--GridColumnEnd: span 3; } .pf-v6-l-grid.pf-m-all-4-col-on-sm > * { --pf-v6-l-grid__item--GridColumnEnd: span 4; } .pf-v6-l-grid.pf-m-all-5-col-on-sm > * { --pf-v6-l-grid__item--GridColumnEnd: span 5; } .pf-v6-l-grid.pf-m-all-6-col-on-sm > * { --pf-v6-l-grid__item--GridColumnEnd: span 6; } .pf-v6-l-grid.pf-m-all-7-col-on-sm > * { --pf-v6-l-grid__item--GridColumnEnd: span 7; } .pf-v6-l-grid.pf-m-all-8-col-on-sm > * { --pf-v6-l-grid__item--GridColumnEnd: span 8; } .pf-v6-l-grid.pf-m-all-9-col-on-sm > * { --pf-v6-l-grid__item--GridColumnEnd: span 9; } .pf-v6-l-grid.pf-m-all-10-col-on-sm > * { --pf-v6-l-grid__item--GridColumnEnd: span 10; } .pf-v6-l-grid.pf-m-all-11-col-on-sm > * { --pf-v6-l-grid__item--GridColumnEnd: span 11; } .pf-v6-l-grid.pf-m-all-12-col-on-sm > * { --pf-v6-l-grid__item--GridColumnEnd: span 12; } } @media screen and (min-width: 48rem) { .pf-v6-l-grid.pf-m-all-1-col-on-md > * { --pf-v6-l-grid__item--GridColumnEnd: span 1; } .pf-v6-l-grid.pf-m-all-2-col-on-md > * { --pf-v6-l-grid__item--GridColumnEnd: span 2; } .pf-v6-l-grid.pf-m-all-3-col-on-md > * { --pf-v6-l-grid__item--GridColumnEnd: span 3; } .pf-v6-l-grid.pf-m-all-4-col-on-md > * { --pf-v6-l-grid__item--GridColumnEnd: span 4; } .pf-v6-l-grid.pf-m-all-5-col-on-md > * { --pf-v6-l-grid__item--GridColumnEnd: span 5; } .pf-v6-l-grid.pf-m-all-6-col-on-md > * { --pf-v6-l-grid__item--GridColumnEnd: span 6; } .pf-v6-l-grid.pf-m-all-7-col-on-md > * { --pf-v6-l-grid__item--GridColumnEnd: span 7; } .pf-v6-l-grid.pf-m-all-8-col-on-md > * { --pf-v6-l-grid__item--GridColumnEnd: span 8; } .pf-v6-l-grid.pf-m-all-9-col-on-md > * { --pf-v6-l-grid__item--GridColumnEnd: span 9; } .pf-v6-l-grid.pf-m-all-10-col-on-md > * { --pf-v6-l-grid__item--GridColumnEnd: span 10; } .pf-v6-l-grid.pf-m-all-11-col-on-md > * { --pf-v6-l-grid__item--GridColumnEnd: span 11; } .pf-v6-l-grid.pf-m-all-12-col-on-md > * { --pf-v6-l-grid__item--GridColumnEnd: span 12; } } @media screen and (min-width: 62rem) { .pf-v6-l-grid.pf-m-all-1-col-on-lg > * { --pf-v6-l-grid__item--GridColumnEnd: span 1; } .pf-v6-l-grid.pf-m-all-2-col-on-lg > * { --pf-v6-l-grid__item--GridColumnEnd: span 2; } .pf-v6-l-grid.pf-m-all-3-col-on-lg > * { --pf-v6-l-grid__item--GridColumnEnd: span 3; } .pf-v6-l-grid.pf-m-all-4-col-on-lg > * { --pf-v6-l-grid__item--GridColumnEnd: span 4; } .pf-v6-l-grid.pf-m-all-5-col-on-lg > * { --pf-v6-l-grid__item--GridColumnEnd: span 5; } .pf-v6-l-grid.pf-m-all-6-col-on-lg > * { --pf-v6-l-grid__item--GridColumnEnd: span 6; } .pf-v6-l-grid.pf-m-all-7-col-on-lg > * { --pf-v6-l-grid__item--GridColumnEnd: span 7; } .pf-v6-l-grid.pf-m-all-8-col-on-lg > * { --pf-v6-l-grid__item--GridColumnEnd: span 8; } .pf-v6-l-grid.pf-m-all-9-col-on-lg > * { --pf-v6-l-grid__item--GridColumnEnd: span 9; } .pf-v6-l-grid.pf-m-all-10-col-on-lg > * { --pf-v6-l-grid__item--GridColumnEnd: span 10; } .pf-v6-l-grid.pf-m-all-11-col-on-lg > * { --pf-v6-l-grid__item--GridColumnEnd: span 11; } .pf-v6-l-grid.pf-m-all-12-col-on-lg > * { --pf-v6-l-grid__item--GridColumnEnd: span 12; } } @media screen and (min-width: 75rem) { .pf-v6-l-grid.pf-m-all-1-col-on-xl > * { --pf-v6-l-grid__item--GridColumnEnd: span 1; } .pf-v6-l-grid.pf-m-all-2-col-on-xl > * { --pf-v6-l-grid__item--GridColumnEnd: span 2; } .pf-v6-l-grid.pf-m-all-3-col-on-xl > * { --pf-v6-l-grid__item--GridColumnEnd: span 3; } .pf-v6-l-grid.pf-m-all-4-col-on-xl > * { --pf-v6-l-grid__item--GridColumnEnd: span 4; } .pf-v6-l-grid.pf-m-all-5-col-on-xl > * { --pf-v6-l-grid__item--GridColumnEnd: span 5; } .pf-v6-l-grid.pf-m-all-6-col-on-xl > * { --pf-v6-l-grid__item--GridColumnEnd: span 6; } .pf-v6-l-grid.pf-m-all-7-col-on-xl > * { --pf-v6-l-grid__item--GridColumnEnd: span 7; } .pf-v6-l-grid.pf-m-all-8-col-on-xl > * { --pf-v6-l-grid__item--GridColumnEnd: span 8; } .pf-v6-l-grid.pf-m-all-9-col-on-xl > * { --pf-v6-l-grid__item--GridColumnEnd: span 9; } .pf-v6-l-grid.pf-m-all-10-col-on-xl > * { --pf-v6-l-grid__item--GridColumnEnd: span 10; } .pf-v6-l-grid.pf-m-all-11-col-on-xl > * { --pf-v6-l-grid__item--GridColumnEnd: span 11; } .pf-v6-l-grid.pf-m-all-12-col-on-xl > * { --pf-v6-l-grid__item--GridColumnEnd: span 12; } } @media screen and (min-width: 90.625rem) { .pf-v6-l-grid.pf-m-all-1-col-on-2xl > * { --pf-v6-l-grid__item--GridColumnEnd: span 1; } .pf-v6-l-grid.pf-m-all-2-col-on-2xl > * { --pf-v6-l-grid__item--GridColumnEnd: span 2; } .pf-v6-l-grid.pf-m-all-3-col-on-2xl > * { --pf-v6-l-grid__item--GridColumnEnd: span 3; } .pf-v6-l-grid.pf-m-all-4-col-on-2xl > * { --pf-v6-l-grid__item--GridColumnEnd: span 4; } .pf-v6-l-grid.pf-m-all-5-col-on-2xl > * { --pf-v6-l-grid__item--GridColumnEnd: span 5; } .pf-v6-l-grid.pf-m-all-6-col-on-2xl > * { --pf-v6-l-grid__item--GridColumnEnd: span 6; } .pf-v6-l-grid.pf-m-all-7-col-on-2xl > * { --pf-v6-l-grid__item--GridColumnEnd: span 7; } .pf-v6-l-grid.pf-m-all-8-col-on-2xl > * { --pf-v6-l-grid__item--GridColumnEnd: span 8; } .pf-v6-l-grid.pf-m-all-9-col-on-2xl > * { --pf-v6-l-grid__item--GridColumnEnd: span 9; } .pf-v6-l-grid.pf-m-all-10-col-on-2xl > * { --pf-v6-l-grid__item--GridColumnEnd: span 10; } .pf-v6-l-grid.pf-m-all-11-col-on-2xl > * { --pf-v6-l-grid__item--GridColumnEnd: span 11; } .pf-v6-l-grid.pf-m-all-12-col-on-2xl > * { --pf-v6-l-grid__item--GridColumnEnd: span 12; } } .pf-v6-l-grid > .pf-m-1-col { --pf-v6-l-grid__item--GridColumnEnd: span 1; } .pf-v6-l-grid > .pf-m-2-col { --pf-v6-l-grid__item--GridColumnEnd: span 2; } .pf-v6-l-grid > .pf-m-3-col { --pf-v6-l-grid__item--GridColumnEnd: span 3; } .pf-v6-l-grid > .pf-m-4-col { --pf-v6-l-grid__item--GridColumnEnd: span 4; } .pf-v6-l-grid > .pf-m-5-col { --pf-v6-l-grid__item--GridColumnEnd: span 5; } .pf-v6-l-grid > .pf-m-6-col { --pf-v6-l-grid__item--GridColumnEnd: span 6; } .pf-v6-l-grid > .pf-m-7-col { --pf-v6-l-grid__item--GridColumnEnd: span 7; } .pf-v6-l-grid > .pf-m-8-col { --pf-v6-l-grid__item--GridColumnEnd: span 8; } .pf-v6-l-grid > .pf-m-9-col { --pf-v6-l-grid__item--GridColumnEnd: span 9; } .pf-v6-l-grid > .pf-m-10-col { --pf-v6-l-grid__item--GridColumnEnd: span 10; } .pf-v6-l-grid > .pf-m-11-col { --pf-v6-l-grid__item--GridColumnEnd: span 11; } .pf-v6-l-grid > .pf-m-12-col { --pf-v6-l-grid__item--GridColumnEnd: span 12; } .pf-v6-l-grid > .pf-m-offset-1-col { --pf-v6-l-grid__item--GridColumnStart: col-start calc(1 + 1); } .pf-v6-l-grid > .pf-m-offset-2-col { --pf-v6-l-grid__item--GridColumnStart: col-start calc(2 + 1); } .pf-v6-l-grid > .pf-m-offset-3-col { --pf-v6-l-grid__item--GridColumnStart: col-start calc(3 + 1); } .pf-v6-l-grid > .pf-m-offset-4-col { --pf-v6-l-grid__item--GridColumnStart: col-start calc(4 + 1); } .pf-v6-l-grid > .pf-m-offset-5-col { --pf-v6-l-grid__item--GridColumnStart: col-start calc(5 + 1); } .pf-v6-l-grid > .pf-m-offset-6-col { --pf-v6-l-grid__item--GridColumnStart: col-start calc(6 + 1); } .pf-v6-l-grid > .pf-m-offset-7-col { --pf-v6-l-grid__item--GridColumnStart: col-start calc(7 + 1); } .pf-v6-l-grid > .pf-m-offset-8-col { --pf-v6-l-grid__item--GridColumnStart: col-start calc(8 + 1); } .pf-v6-l-grid > .pf-m-offset-9-col { --pf-v6-l-grid__item--GridColumnStart: col-start calc(9 + 1); } .pf-v6-l-grid > .pf-m-offset-10-col { --pf-v6-l-grid__item--GridColumnStart: col-start calc(10 + 1); } .pf-v6-l-grid > .pf-m-offset-11-col { --pf-v6-l-grid__item--GridColumnStart: col-start calc(11 + 1); } .pf-v6-l-grid > .pf-m-offset-12-col { --pf-v6-l-grid__item--GridColumnStart: col-start calc(12 + 1); } .pf-v6-l-grid > .pf-m-1-row { grid-row: span 1; } .pf-v6-l-grid > .pf-m-2-row { grid-row: span 2; } .pf-v6-l-grid > .pf-m-3-row { grid-row: span 3; } .pf-v6-l-grid > .pf-m-4-row { grid-row: span 4; } .pf-v6-l-grid > .pf-m-5-row { grid-row: span 5; } .pf-v6-l-grid > .pf-m-6-row { grid-row: span 6; } .pf-v6-l-grid > .pf-m-7-row { grid-row: span 7; } .pf-v6-l-grid > .pf-m-8-row { grid-row: span 8; } .pf-v6-l-grid > .pf-m-9-row { grid-row: span 9; } .pf-v6-l-grid > .pf-m-10-row { grid-row: span 10; } .pf-v6-l-grid > .pf-m-11-row { grid-row: span 11; } .pf-v6-l-grid > .pf-m-12-row { grid-row: span 12; } @media screen and (min-width: 36rem) { .pf-v6-l-grid > .pf-m-1-col-on-sm { --pf-v6-l-grid__item--GridColumnEnd: span 1; } .pf-v6-l-grid > .pf-m-2-col-on-sm { --pf-v6-l-grid__item--GridColumnEnd: span 2; } .pf-v6-l-grid > .pf-m-3-col-on-sm { --pf-v6-l-grid__item--GridColumnEnd: span 3; } .pf-v6-l-grid > .pf-m-4-col-on-sm { --pf-v6-l-grid__item--GridColumnEnd: span 4; } .pf-v6-l-grid > .pf-m-5-col-on-sm { --pf-v6-l-grid__item--GridColumnEnd: span 5; } .pf-v6-l-grid > .pf-m-6-col-on-sm { --pf-v6-l-grid__item--GridColumnEnd: span 6; } .pf-v6-l-grid > .pf-m-7-col-on-sm { --pf-v6-l-grid__item--GridColumnEnd: span 7; } .pf-v6-l-grid > .pf-m-8-col-on-sm { --pf-v6-l-grid__item--GridColumnEnd: span 8; } .pf-v6-l-grid > .pf-m-9-col-on-sm { --pf-v6-l-grid__item--GridColumnEnd: span 9; } .pf-v6-l-grid > .pf-m-10-col-on-sm { --pf-v6-l-grid__item--GridColumnEnd: span 10; } .pf-v6-l-grid > .pf-m-11-col-on-sm { --pf-v6-l-grid__item--GridColumnEnd: span 11; } .pf-v6-l-grid > .pf-m-12-col-on-sm { --pf-v6-l-grid__item--GridColumnEnd: span 12; } .pf-v6-l-grid > .pf-m-offset-1-col-on-sm { --pf-v6-l-grid__item--GridColumnStart: col-start calc(1 + 1); } .pf-v6-l-grid > .pf-m-offset-2-col-on-sm { --pf-v6-l-grid__item--GridColumnStart: col-start calc(2 + 1); } .pf-v6-l-grid > .pf-m-offset-3-col-on-sm { --pf-v6-l-grid__item--GridColumnStart: col-start calc(3 + 1); } .pf-v6-l-grid > .pf-m-offset-4-col-on-sm { --pf-v6-l-grid__item--GridColumnStart: col-start calc(4 + 1); } .pf-v6-l-grid > .pf-m-offset-5-col-on-sm { --pf-v6-l-grid__item--GridColumnStart: col-start calc(5 + 1); } .pf-v6-l-grid > .pf-m-offset-6-col-on-sm { --pf-v6-l-grid__item--GridColumnStart: col-start calc(6 + 1); } .pf-v6-l-grid > .pf-m-offset-7-col-on-sm { --pf-v6-l-grid__item--GridColumnStart: col-start calc(7 + 1); } .pf-v6-l-grid > .pf-m-offset-8-col-on-sm { --pf-v6-l-grid__item--GridColumnStart: col-start calc(8 + 1); } .pf-v6-l-grid > .pf-m-offset-9-col-on-sm { --pf-v6-l-grid__item--GridColumnStart: col-start calc(9 + 1); } .pf-v6-l-grid > .pf-m-offset-10-col-on-sm { --pf-v6-l-grid__item--GridColumnStart: col-start calc(10 + 1); } .pf-v6-l-grid > .pf-m-offset-11-col-on-sm { --pf-v6-l-grid__item--GridColumnStart: col-start calc(11 + 1); } .pf-v6-l-grid > .pf-m-offset-12-col-on-sm { --pf-v6-l-grid__item--GridColumnStart: col-start calc(12 + 1); } .pf-v6-l-grid > .pf-m-1-row-on-sm { grid-row: span 1; } .pf-v6-l-grid > .pf-m-2-row-on-sm { grid-row: span 2; } .pf-v6-l-grid > .pf-m-3-row-on-sm { grid-row: span 3; } .pf-v6-l-grid > .pf-m-4-row-on-sm { grid-row: span 4; } .pf-v6-l-grid > .pf-m-5-row-on-sm { grid-row: span 5; } .pf-v6-l-grid > .pf-m-6-row-on-sm { grid-row: span 6; } .pf-v6-l-grid > .pf-m-7-row-on-sm { grid-row: span 7; } .pf-v6-l-grid > .pf-m-8-row-on-sm { grid-row: span 8; } .pf-v6-l-grid > .pf-m-9-row-on-sm { grid-row: span 9; } .pf-v6-l-grid > .pf-m-10-row-on-sm { grid-row: span 10; } .pf-v6-l-grid > .pf-m-11-row-on-sm { grid-row: span 11; } .pf-v6-l-grid > .pf-m-12-row-on-sm { grid-row: span 12; } } @media screen and (min-width: 48rem) { .pf-v6-l-grid > .pf-m-1-col-on-md { --pf-v6-l-grid__item--GridColumnEnd: span 1; } .pf-v6-l-grid > .pf-m-2-col-on-md { --pf-v6-l-grid__item--GridColumnEnd: span 2; } .pf-v6-l-grid > .pf-m-3-col-on-md { --pf-v6-l-grid__item--GridColumnEnd: span 3; } .pf-v6-l-grid > .pf-m-4-col-on-md { --pf-v6-l-grid__item--GridColumnEnd: span 4; } .pf-v6-l-grid > .pf-m-5-col-on-md { --pf-v6-l-grid__item--GridColumnEnd: span 5; } .pf-v6-l-grid > .pf-m-6-col-on-md { --pf-v6-l-grid__item--GridColumnEnd: span 6; } .pf-v6-l-grid > .pf-m-7-col-on-md { --pf-v6-l-grid__item--GridColumnEnd: span 7; } .pf-v6-l-grid > .pf-m-8-col-on-md { --pf-v6-l-grid__item--GridColumnEnd: span 8; } .pf-v6-l-grid > .pf-m-9-col-on-md { --pf-v6-l-grid__item--GridColumnEnd: span 9; } .pf-v6-l-grid > .pf-m-10-col-on-md { --pf-v6-l-grid__item--GridColumnEnd: span 10; } .pf-v6-l-grid > .pf-m-11-col-on-md { --pf-v6-l-grid__item--GridColumnEnd: span 11; } .pf-v6-l-grid > .pf-m-12-col-on-md { --pf-v6-l-grid__item--GridColumnEnd: span 12; } .pf-v6-l-grid > .pf-m-offset-1-col-on-md { --pf-v6-l-grid__item--GridColumnStart: col-start calc(1 + 1); } .pf-v6-l-grid > .pf-m-offset-2-col-on-md { --pf-v6-l-grid__item--GridColumnStart: col-start calc(2 + 1); } .pf-v6-l-grid > .pf-m-offset-3-col-on-md { --pf-v6-l-grid__item--GridColumnStart: col-start calc(3 + 1); } .pf-v6-l-grid > .pf-m-offset-4-col-on-md { --pf-v6-l-grid__item--GridColumnStart: col-start calc(4 + 1); } .pf-v6-l-grid > .pf-m-offset-5-col-on-md { --pf-v6-l-grid__item--GridColumnStart: col-start calc(5 + 1); } .pf-v6-l-grid > .pf-m-offset-6-col-on-md { --pf-v6-l-grid__item--GridColumnStart: col-start calc(6 + 1); } .pf-v6-l-grid > .pf-m-offset-7-col-on-md { --pf-v6-l-grid__item--GridColumnStart: col-start calc(7 + 1); } .pf-v6-l-grid > .pf-m-offset-8-col-on-md { --pf-v6-l-grid__item--GridColumnStart: col-start calc(8 + 1); } .pf-v6-l-grid > .pf-m-offset-9-col-on-md { --pf-v6-l-grid__item--GridColumnStart: col-start calc(9 + 1); } .pf-v6-l-grid > .pf-m-offset-10-col-on-md { --pf-v6-l-grid__item--GridColumnStart: col-start calc(10 + 1); } .pf-v6-l-grid > .pf-m-offset-11-col-on-md { --pf-v6-l-grid__item--GridColumnStart: col-start calc(11 + 1); } .pf-v6-l-grid > .pf-m-offset-12-col-on-md { --pf-v6-l-grid__item--GridColumnStart: col-start calc(12 + 1); } .pf-v6-l-grid > .pf-m-1-row-on-md { grid-row: span 1; } .pf-v6-l-grid > .pf-m-2-row-on-md { grid-row: span 2; } .pf-v6-l-grid > .pf-m-3-row-on-md { grid-row: span 3; } .pf-v6-l-grid > .pf-m-4-row-on-md { grid-row: span 4; } .pf-v6-l-grid > .pf-m-5-row-on-md { grid-row: span 5; } .pf-v6-l-grid > .pf-m-6-row-on-md { grid-row: span 6; } .pf-v6-l-grid > .pf-m-7-row-on-md { grid-row: span 7; } .pf-v6-l-grid > .pf-m-8-row-on-md { grid-row: span 8; } .pf-v6-l-grid > .pf-m-9-row-on-md { grid-row: span 9; } .pf-v6-l-grid > .pf-m-10-row-on-md { grid-row: span 10; } .pf-v6-l-grid > .pf-m-11-row-on-md { grid-row: span 11; } .pf-v6-l-grid > .pf-m-12-row-on-md { grid-row: span 12; } } @media screen and (min-width: 62rem) { .pf-v6-l-grid > .pf-m-1-col-on-lg { --pf-v6-l-grid__item--GridColumnEnd: span 1; } .pf-v6-l-grid > .pf-m-2-col-on-lg { --pf-v6-l-grid__item--GridColumnEnd: span 2; } .pf-v6-l-grid > .pf-m-3-col-on-lg { --pf-v6-l-grid__item--GridColumnEnd: span 3; } .pf-v6-l-grid > .pf-m-4-col-on-lg { --pf-v6-l-grid__item--GridColumnEnd: span 4; } .pf-v6-l-grid > .pf-m-5-col-on-lg { --pf-v6-l-grid__item--GridColumnEnd: span 5; } .pf-v6-l-grid > .pf-m-6-col-on-lg { --pf-v6-l-grid__item--GridColumnEnd: span 6; } .pf-v6-l-grid > .pf-m-7-col-on-lg { --pf-v6-l-grid__item--GridColumnEnd: span 7; } .pf-v6-l-grid > .pf-m-8-col-on-lg { --pf-v6-l-grid__item--GridColumnEnd: span 8; } .pf-v6-l-grid > .pf-m-9-col-on-lg { --pf-v6-l-grid__item--GridColumnEnd: span 9; } .pf-v6-l-grid > .pf-m-10-col-on-lg { --pf-v6-l-grid__item--GridColumnEnd: span 10; } .pf-v6-l-grid > .pf-m-11-col-on-lg { --pf-v6-l-grid__item--GridColumnEnd: span 11; } .pf-v6-l-grid > .pf-m-12-col-on-lg { --pf-v6-l-grid__item--GridColumnEnd: span 12; } .pf-v6-l-grid > .pf-m-offset-1-col-on-lg { --pf-v6-l-grid__item--GridColumnStart: col-start calc(1 + 1); } .pf-v6-l-grid > .pf-m-offset-2-col-on-lg { --pf-v6-l-grid__item--GridColumnStart: col-start calc(2 + 1); } .pf-v6-l-grid > .pf-m-offset-3-col-on-lg { --pf-v6-l-grid__item--GridColumnStart: col-start calc(3 + 1); } .pf-v6-l-grid > .pf-m-offset-4-col-on-lg { --pf-v6-l-grid__item--GridColumnStart: col-start calc(4 + 1); } .pf-v6-l-grid > .pf-m-offset-5-col-on-lg { --pf-v6-l-grid__item--GridColumnStart: col-start calc(5 + 1); } .pf-v6-l-grid > .pf-m-offset-6-col-on-lg { --pf-v6-l-grid__item--GridColumnStart: col-start calc(6 + 1); } .pf-v6-l-grid > .pf-m-offset-7-col-on-lg { --pf-v6-l-grid__item--GridColumnStart: col-start calc(7 + 1); } .pf-v6-l-grid > .pf-m-offset-8-col-on-lg { --pf-v6-l-grid__item--GridColumnStart: col-start calc(8 + 1); } .pf-v6-l-grid > .pf-m-offset-9-col-on-lg { --pf-v6-l-grid__item--GridColumnStart: col-start calc(9 + 1); } .pf-v6-l-grid > .pf-m-offset-10-col-on-lg { --pf-v6-l-grid__item--GridColumnStart: col-start calc(10 + 1); } .pf-v6-l-grid > .pf-m-offset-11-col-on-lg { --pf-v6-l-grid__item--GridColumnStart: col-start calc(11 + 1); } .pf-v6-l-grid > .pf-m-offset-12-col-on-lg { --pf-v6-l-grid__item--GridColumnStart: col-start calc(12 + 1); } .pf-v6-l-grid > .pf-m-1-row-on-lg { grid-row: span 1; } .pf-v6-l-grid > .pf-m-2-row-on-lg { grid-row: span 2; } .pf-v6-l-grid > .pf-m-3-row-on-lg { grid-row: span 3; } .pf-v6-l-grid > .pf-m-4-row-on-lg { grid-row: span 4; } .pf-v6-l-grid > .pf-m-5-row-on-lg { grid-row: span 5; } .pf-v6-l-grid > .pf-m-6-row-on-lg { grid-row: span 6; } .pf-v6-l-grid > .pf-m-7-row-on-lg { grid-row: span 7; } .pf-v6-l-grid > .pf-m-8-row-on-lg { grid-row: span 8; } .pf-v6-l-grid > .pf-m-9-row-on-lg { grid-row: span 9; } .pf-v6-l-grid > .pf-m-10-row-on-lg { grid-row: span 10; } .pf-v6-l-grid > .pf-m-11-row-on-lg { grid-row: span 11; } .pf-v6-l-grid > .pf-m-12-row-on-lg { grid-row: span 12; } } @media screen and (min-width: 75rem) { .pf-v6-l-grid > .pf-m-1-col-on-xl { --pf-v6-l-grid__item--GridColumnEnd: span 1; } .pf-v6-l-grid > .pf-m-2-col-on-xl { --pf-v6-l-grid__item--GridColumnEnd: span 2; } .pf-v6-l-grid > .pf-m-3-col-on-xl { --pf-v6-l-grid__item--GridColumnEnd: span 3; } .pf-v6-l-grid > .pf-m-4-col-on-xl { --pf-v6-l-grid__item--GridColumnEnd: span 4; } .pf-v6-l-grid > .pf-m-5-col-on-xl { --pf-v6-l-grid__item--GridColumnEnd: span 5; } .pf-v6-l-grid > .pf-m-6-col-on-xl { --pf-v6-l-grid__item--GridColumnEnd: span 6; } .pf-v6-l-grid > .pf-m-7-col-on-xl { --pf-v6-l-grid__item--GridColumnEnd: span 7; } .pf-v6-l-grid > .pf-m-8-col-on-xl { --pf-v6-l-grid__item--GridColumnEnd: span 8; } .pf-v6-l-grid > .pf-m-9-col-on-xl { --pf-v6-l-grid__item--GridColumnEnd: span 9; } .pf-v6-l-grid > .pf-m-10-col-on-xl { --pf-v6-l-grid__item--GridColumnEnd: span 10; } .pf-v6-l-grid > .pf-m-11-col-on-xl { --pf-v6-l-grid__item--GridColumnEnd: span 11; } .pf-v6-l-grid > .pf-m-12-col-on-xl { --pf-v6-l-grid__item--GridColumnEnd: span 12; } .pf-v6-l-grid > .pf-m-offset-1-col-on-xl { --pf-v6-l-grid__item--GridColumnStart: col-start calc(1 + 1); } .pf-v6-l-grid > .pf-m-offset-2-col-on-xl { --pf-v6-l-grid__item--GridColumnStart: col-start calc(2 + 1); } .pf-v6-l-grid > .pf-m-offset-3-col-on-xl { --pf-v6-l-grid__item--GridColumnStart: col-start calc(3 + 1); } .pf-v6-l-grid > .pf-m-offset-4-col-on-xl { --pf-v6-l-grid__item--GridColumnStart: col-start calc(4 + 1); } .pf-v6-l-grid > .pf-m-offset-5-col-on-xl { --pf-v6-l-grid__item--GridColumnStart: col-start calc(5 + 1); } .pf-v6-l-grid > .pf-m-offset-6-col-on-xl { --pf-v6-l-grid__item--GridColumnStart: col-start calc(6 + 1); } .pf-v6-l-grid > .pf-m-offset-7-col-on-xl { --pf-v6-l-grid__item--GridColumnStart: col-start calc(7 + 1); } .pf-v6-l-grid > .pf-m-offset-8-col-on-xl { --pf-v6-l-grid__item--GridColumnStart: col-start calc(8 + 1); } .pf-v6-l-grid > .pf-m-offset-9-col-on-xl { --pf-v6-l-grid__item--GridColumnStart: col-start calc(9 + 1); } .pf-v6-l-grid > .pf-m-offset-10-col-on-xl { --pf-v6-l-grid__item--GridColumnStart: col-start calc(10 + 1); } .pf-v6-l-grid > .pf-m-offset-11-col-on-xl { --pf-v6-l-grid__item--GridColumnStart: col-start calc(11 + 1); } .pf-v6-l-grid > .pf-m-offset-12-col-on-xl { --pf-v6-l-grid__item--GridColumnStart: col-start calc(12 + 1); } .pf-v6-l-grid > .pf-m-1-row-on-xl { grid-row: span 1; } .pf-v6-l-grid > .pf-m-2-row-on-xl { grid-row: span 2; } .pf-v6-l-grid > .pf-m-3-row-on-xl { grid-row: span 3; } .pf-v6-l-grid > .pf-m-4-row-on-xl { grid-row: span 4; } .pf-v6-l-grid > .pf-m-5-row-on-xl { grid-row: span 5; } .pf-v6-l-grid > .pf-m-6-row-on-xl { grid-row: span 6; } .pf-v6-l-grid > .pf-m-7-row-on-xl { grid-row: span 7; } .pf-v6-l-grid > .pf-m-8-row-on-xl { grid-row: span 8; } .pf-v6-l-grid > .pf-m-9-row-on-xl { grid-row: span 9; } .pf-v6-l-grid > .pf-m-10-row-on-xl { grid-row: span 10; } .pf-v6-l-grid > .pf-m-11-row-on-xl { grid-row: span 11; } .pf-v6-l-grid > .pf-m-12-row-on-xl { grid-row: span 12; } } @media screen and (min-width: 90.625rem) { .pf-v6-l-grid > .pf-m-1-col-on-2xl { --pf-v6-l-grid__item--GridColumnEnd: span 1; } .pf-v6-l-grid > .pf-m-2-col-on-2xl { --pf-v6-l-grid__item--GridColumnEnd: span 2; } .pf-v6-l-grid > .pf-m-3-col-on-2xl { --pf-v6-l-grid__item--GridColumnEnd: span 3; } .pf-v6-l-grid > .pf-m-4-col-on-2xl { --pf-v6-l-grid__item--GridColumnEnd: span 4; } .pf-v6-l-grid > .pf-m-5-col-on-2xl { --pf-v6-l-grid__item--GridColumnEnd: span 5; } .pf-v6-l-grid > .pf-m-6-col-on-2xl { --pf-v6-l-grid__item--GridColumnEnd: span 6; } .pf-v6-l-grid > .pf-m-7-col-on-2xl { --pf-v6-l-grid__item--GridColumnEnd: span 7; } .pf-v6-l-grid > .pf-m-8-col-on-2xl { --pf-v6-l-grid__item--GridColumnEnd: span 8; } .pf-v6-l-grid > .pf-m-9-col-on-2xl { --pf-v6-l-grid__item--GridColumnEnd: span 9; } .pf-v6-l-grid > .pf-m-10-col-on-2xl { --pf-v6-l-grid__item--GridColumnEnd: span 10; } .pf-v6-l-grid > .pf-m-11-col-on-2xl { --pf-v6-l-grid__item--GridColumnEnd: span 11; } .pf-v6-l-grid > .pf-m-12-col-on-2xl { --pf-v6-l-grid__item--GridColumnEnd: span 12; } .pf-v6-l-grid > .pf-m-offset-1-col-on-2xl { --pf-v6-l-grid__item--GridColumnStart: col-start calc(1 + 1); } .pf-v6-l-grid > .pf-m-offset-2-col-on-2xl { --pf-v6-l-grid__item--GridColumnStart: col-start calc(2 + 1); } .pf-v6-l-grid > .pf-m-offset-3-col-on-2xl { --pf-v6-l-grid__item--GridColumnStart: col-start calc(3 + 1); } .pf-v6-l-grid > .pf-m-offset-4-col-on-2xl { --pf-v6-l-grid__item--GridColumnStart: col-start calc(4 + 1); } .pf-v6-l-grid > .pf-m-offset-5-col-on-2xl { --pf-v6-l-grid__item--GridColumnStart: col-start calc(5 + 1); } .pf-v6-l-grid > .pf-m-offset-6-col-on-2xl { --pf-v6-l-grid__item--GridColumnStart: col-start calc(6 + 1); } .pf-v6-l-grid > .pf-m-offset-7-col-on-2xl { --pf-v6-l-grid__item--GridColumnStart: col-start calc(7 + 1); } .pf-v6-l-grid > .pf-m-offset-8-col-on-2xl { --pf-v6-l-grid__item--GridColumnStart: col-start calc(8 + 1); } .pf-v6-l-grid > .pf-m-offset-9-col-on-2xl { --pf-v6-l-grid__item--GridColumnStart: col-start calc(9 + 1); } .pf-v6-l-grid > .pf-m-offset-10-col-on-2xl { --pf-v6-l-grid__item--GridColumnStart: col-start calc(10 + 1); } .pf-v6-l-grid > .pf-m-offset-11-col-on-2xl { --pf-v6-l-grid__item--GridColumnStart: col-start calc(11 + 1); } .pf-v6-l-grid > .pf-m-offset-12-col-on-2xl { --pf-v6-l-grid__item--GridColumnStart: col-start calc(12 + 1); } .pf-v6-l-grid > .pf-m-1-row-on-2xl { grid-row: span 1; } .pf-v6-l-grid > .pf-m-2-row-on-2xl { grid-row: span 2; } .pf-v6-l-grid > .pf-m-3-row-on-2xl { grid-row: span 3; } .pf-v6-l-grid > .pf-m-4-row-on-2xl { grid-row: span 4; } .pf-v6-l-grid > .pf-m-5-row-on-2xl { grid-row: span 5; } .pf-v6-l-grid > .pf-m-6-row-on-2xl { grid-row: span 6; } .pf-v6-l-grid > .pf-m-7-row-on-2xl { grid-row: span 7; } .pf-v6-l-grid > .pf-m-8-row-on-2xl { grid-row: span 8; } .pf-v6-l-grid > .pf-m-9-row-on-2xl { grid-row: span 9; } .pf-v6-l-grid > .pf-m-10-row-on-2xl { grid-row: span 10; } .pf-v6-l-grid > .pf-m-11-row-on-2xl { grid-row: span 11; } .pf-v6-l-grid > .pf-m-12-row-on-2xl { grid-row: span 12; } } .pf-v6-l-grid.pf-m-gutter { gap: var(--pf-v6-l-grid--m-gutter--GridGap); } /* PatternFly layout: Flex/flex */ .pf-v6-l-flex { --pf-v6-l-flex--Display: flex; --pf-v6-l-flex--FlexWrap: wrap; --pf-v6-l-flex--AlignItems: baseline; --pf-v6-l-flex--m-row--AlignItems: baseline; --pf-v6-l-flex--m-row-reverse--AlignItems: baseline; --pf-v6-l-flex--item--Order: 0; --pf-v6-l-flex--spacer--column--base: var(--pf-t--global--spacer--gutter--default); --pf-v6-l-flex--spacer--row--base: var(--pf-t--global--spacer--sm); --pf-v6-l-flex--RowGap: var(--pf-v6-l-flex--spacer--row--base); --pf-v6-l-flex--ColumnGap: 0; --pf-v6-l-flex--m-gap--RowGap: var(--pf-v6-l-flex--spacer--row--base); --pf-v6-l-flex--m-gap--ColumnGap: var(--pf-v6-l-flex--spacer--column--base); --pf-v6-l-flex--m-row-gap--RowGap: var(--pf-v6-l-flex--spacer--row--base); --pf-v6-l-flex--m-column-gap--ColumnGap: var(--pf-v6-l-flex--spacer--column--base); } .pf-v6-l-flex { --pf-v6-l-flex--spacer--none: 0; --pf-v6-l-flex--spacer--xs: var(--pf-t--global--spacer--xs); --pf-v6-l-flex--spacer--sm: var(--pf-t--global--spacer--sm); --pf-v6-l-flex--spacer--md: var(--pf-t--global--spacer--md); --pf-v6-l-flex--spacer--lg: var(--pf-t--global--spacer--lg); --pf-v6-l-flex--spacer--xl: var(--pf-t--global--spacer--xl); --pf-v6-l-flex--spacer--2xl: var(--pf-t--global--spacer--2xl); --pf-v6-l-flex--spacer--3xl: var(--pf-t--global--spacer--3xl); --pf-v6-l-flex--spacer--4xl: var(--pf-t--global--spacer--4xl); display: var(--pf-v6-l-flex--Display); flex-wrap: var(--pf-v6-l-flex--FlexWrap); gap: var(--pf-v6-l-flex--RowGap) var(--pf-v6-l-flex--ColumnGap); align-items: var(--pf-v6-l-flex--AlignItems); } .pf-v6-l-flex > * { --pf-v6-l-flex--spacer: initial; --pf-v6-l-flex--spacer--column: var(--pf-v6-l-flex--spacer, var(--pf-v6-l-flex--spacer--column--base)); --pf-v6-l-flex--spacer--row: var(--pf-v6-l-flex--spacer, var(--pf-v6-l-flex--spacer--row--base)); order: var(--pf-v6-l-flex--item--Order); max-width: 100%; margin-inline-end: var(--pf-v6-l-flex--spacer--column); } @media screen and (min-width: 36rem) { .pf-v6-l-flex > * { order: var(--pf-v6-l-flex--item--Order-on-sm, var(--pf-v6-l-flex--item--Order)); } } @media screen and (min-width: 48rem) { .pf-v6-l-flex > * { order: var(--pf-v6-l-flex--item--Order-on-md, var(--pf-v6-l-flex--item--Order-on-sm, var(--pf-v6-l-flex--item--Order))); } } @media screen and (min-width: 62rem) { .pf-v6-l-flex > * { order: var(--pf-v6-l-flex--item--Order-on-lg, var(--pf-v6-l-flex--item--Order-on-md, var(--pf-v6-l-flex--item--Order-on-sm, var(--pf-v6-l-flex--item--Order)))); } } @media screen and (min-width: 75rem) { .pf-v6-l-flex > * { order: var(--pf-v6-l-flex--item--Order-on-xl, var(--pf-v6-l-flex--item--Order-on-lg, var(--pf-v6-l-flex--item--Order-on-md, var(--pf-v6-l-flex--item--Order-on-sm, var(--pf-v6-l-flex--item--Order))))); } } @media screen and (min-width: 90.625rem) { .pf-v6-l-flex > * { order: var(--pf-v6-l-flex--item--Order-on-2xl, var(--pf-v6-l-flex--item--Order-on-xl, var(--pf-v6-l-flex--item--Order-on-lg, var(--pf-v6-l-flex--item--Order-on-md, var(--pf-v6-l-flex--item--Order-on-sm, var(--pf-v6-l-flex--item--Order)))))); } } .pf-v6-l-flex > *:last-child { --pf-v6-l-flex--spacer: 0; } .pf-v6-l-flex.pf-m-flex { display: var(--pf-v6-l-flex--Display); } .pf-v6-l-flex.pf-m-inline-flex { --pf-v6-l-flex--Display: inline-flex; } .pf-v6-l-flex.pf-m-column { --pf-v6-l-flex--RowGap: 0; --pf-v6-l-flex--ColumnGap: var(--pf-v6-l-flex--spacer--column--base); flex-direction: column; align-items: normal; } .pf-v6-l-flex.pf-m-column > * { margin-block-start: 0; margin-block-end: var(--pf-v6-l-flex--spacer--row); margin-inline-start: 0; margin-inline-end: 0; } .pf-v6-l-flex.pf-m-column-reverse { flex-direction: column-reverse; align-items: normal; } .pf-v6-l-flex.pf-m-column-reverse > * { margin-block-start: var(--pf-v6-l-flex--spacer--row); margin-block-end: 0; margin-inline-start: 0; margin-inline-end: 0; } .pf-v6-l-flex.pf-m-row { flex-direction: row; align-items: var(--pf-v6-l-flex--m-row--AlignItems); } .pf-v6-l-flex.pf-m-row > * { margin-block-start: 0; margin-block-end: 0; margin-inline-start: 0; margin-inline-end: var(--pf-v6-l-flex--spacer--column); } .pf-v6-l-flex.pf-m-row-reverse { flex-direction: row-reverse; align-items: var(--pf-v6-l-flex--m-row-reverse--AlignItems); } .pf-v6-l-flex.pf-m-row-reverse > * { margin-block-start: 0; margin-block-end: 0; margin-inline-start: var(--pf-v6-l-flex--spacer--column); margin-inline-end: 0; } .pf-v6-l-flex.pf-m-wrap { flex-wrap: wrap; } .pf-v6-l-flex.pf-m-wrap-reverse { flex-wrap: wrap-reverse; } .pf-v6-l-flex.pf-m-nowrap { flex-wrap: nowrap; } .pf-v6-l-flex.pf-m-justify-content-flex-start { justify-content: flex-start; } .pf-v6-l-flex.pf-m-justify-content-flex-end { justify-content: flex-end; } .pf-v6-l-flex.pf-m-justify-content-center { justify-content: center; } .pf-v6-l-flex.pf-m-justify-content-space-between { justify-content: space-between; } .pf-v6-l-flex.pf-m-justify-content-space-around { justify-content: space-around; } .pf-v6-l-flex.pf-m-justify-content-space-evenly { justify-content: space-evenly; } .pf-v6-l-flex.pf-m-align-items-flex-start { align-items: flex-start; } .pf-v6-l-flex.pf-m-align-items-flex-end { align-items: flex-end; } .pf-v6-l-flex.pf-m-align-items-center { align-items: center; } .pf-v6-l-flex.pf-m-align-items-stretch { align-items: stretch; } .pf-v6-l-flex.pf-m-align-items-baseline { align-items: baseline; } .pf-v6-l-flex.pf-m-align-content-flex-start { align-content: flex-start; } .pf-v6-l-flex.pf-m-align-content-flex-end { align-content: flex-end; } .pf-v6-l-flex.pf-m-align-content-center { align-content: center; } .pf-v6-l-flex.pf-m-align-content-stretch { align-content: stretch; } .pf-v6-l-flex.pf-m-align-content-space-between { align-content: space-between; } .pf-v6-l-flex.pf-m-align-content-space-around { align-content: space-around; } .pf-v6-l-flex > .pf-m-align-right { margin-inline-start: auto; } .pf-v6-l-flex > .pf-m-align-left { margin-inline-start: 0; } .pf-v6-l-flex > .pf-m-grow { flex-grow: 1; } .pf-v6-l-flex > .pf-m-shrink { flex-shrink: 1; } .pf-v6-l-flex > .pf-m-full-width { width: 100%; margin-inline-end: 0; } .pf-v6-l-flex > .pf-m-flex-1 { flex: 1 0 0; } .pf-v6-l-flex > .pf-m-flex-2 { flex: 2 0 0; } .pf-v6-l-flex > .pf-m-flex-3 { flex: 3 0 0; } .pf-v6-l-flex > .pf-m-flex-4 { flex: 4 0 0; } .pf-v6-l-flex > .pf-m-flex-default { flex: 0 1 auto; } .pf-v6-l-flex > .pf-m-flex-none { flex: none; } .pf-v6-l-flex > .pf-m-align-self-flex-start { align-self: flex-start; } .pf-v6-l-flex > .pf-m-align-self-flex-end { align-self: flex-end; } .pf-v6-l-flex > .pf-m-align-self-center { align-self: center; } .pf-v6-l-flex > .pf-m-align-self-baseline { align-self: baseline; } .pf-v6-l-flex > .pf-m-align-self-stretch { align-self: stretch; } @media (min-width: 36rem) { .pf-v6-l-flex.pf-m-flex-on-sm { display: var(--pf-v6-l-flex--Display); } .pf-v6-l-flex.pf-m-inline-flex-on-sm { --pf-v6-l-flex--Display: inline-flex; } .pf-v6-l-flex.pf-m-column-on-sm { --pf-v6-l-flex--RowGap: 0; --pf-v6-l-flex--ColumnGap: var(--pf-v6-l-flex--spacer--column--base); flex-direction: column; align-items: normal; } .pf-v6-l-flex.pf-m-column-on-sm > * { margin-block-start: 0; margin-block-end: var(--pf-v6-l-flex--spacer--row); margin-inline-start: 0; margin-inline-end: 0; } .pf-v6-l-flex.pf-m-column-reverse-on-sm { flex-direction: column-reverse; align-items: normal; } .pf-v6-l-flex.pf-m-column-reverse-on-sm > * { margin-block-start: var(--pf-v6-l-flex--spacer--row); margin-block-end: 0; margin-inline-start: 0; margin-inline-end: 0; } .pf-v6-l-flex.pf-m-row-on-sm { flex-direction: row; align-items: var(--pf-v6-l-flex--m-row--AlignItems); } .pf-v6-l-flex.pf-m-row-on-sm > * { margin-block-start: 0; margin-block-end: 0; margin-inline-start: 0; margin-inline-end: var(--pf-v6-l-flex--spacer--column); } .pf-v6-l-flex.pf-m-row-reverse-on-sm { flex-direction: row-reverse; align-items: var(--pf-v6-l-flex--m-row-reverse--AlignItems); } .pf-v6-l-flex.pf-m-row-reverse-on-sm > * { margin-block-start: 0; margin-block-end: 0; margin-inline-start: var(--pf-v6-l-flex--spacer--column); margin-inline-end: 0; } .pf-v6-l-flex.pf-m-wrap-on-sm { flex-wrap: wrap; } .pf-v6-l-flex.pf-m-wrap-reverse-on-sm { flex-wrap: wrap-reverse; } .pf-v6-l-flex.pf-m-nowrap-on-sm { flex-wrap: nowrap; } .pf-v6-l-flex.pf-m-justify-content-flex-start-on-sm { justify-content: flex-start; } .pf-v6-l-flex.pf-m-justify-content-flex-end-on-sm { justify-content: flex-end; } .pf-v6-l-flex.pf-m-justify-content-center-on-sm { justify-content: center; } .pf-v6-l-flex.pf-m-justify-content-space-between-on-sm { justify-content: space-between; } .pf-v6-l-flex.pf-m-justify-content-space-around-on-sm { justify-content: space-around; } .pf-v6-l-flex.pf-m-justify-content-space-evenly-on-sm { justify-content: space-evenly; } .pf-v6-l-flex.pf-m-align-items-flex-start-on-sm { align-items: flex-start; } .pf-v6-l-flex.pf-m-align-items-flex-end-on-sm { align-items: flex-end; } .pf-v6-l-flex.pf-m-align-items-center-on-sm { align-items: center; } .pf-v6-l-flex.pf-m-align-items-stretch-on-sm { align-items: stretch; } .pf-v6-l-flex.pf-m-align-items-baseline-on-sm { align-items: baseline; } .pf-v6-l-flex.pf-m-align-content-flex-start-on-sm { align-content: flex-start; } .pf-v6-l-flex.pf-m-align-content-flex-end-on-sm { align-content: flex-end; } .pf-v6-l-flex.pf-m-align-content-center-on-sm { align-content: center; } .pf-v6-l-flex.pf-m-align-content-stretch-on-sm { align-content: stretch; } .pf-v6-l-flex.pf-m-align-content-space-between-on-sm { align-content: space-between; } .pf-v6-l-flex.pf-m-align-content-space-around-on-sm { align-content: space-around; } .pf-v6-l-flex > .pf-m-align-right-on-sm { margin-inline-start: auto; } .pf-v6-l-flex > .pf-m-align-left-on-sm { margin-inline-start: 0; } .pf-v6-l-flex > .pf-m-grow-on-sm { flex-grow: 1; } .pf-v6-l-flex > .pf-m-shrink-on-sm { flex-shrink: 1; } .pf-v6-l-flex > .pf-m-full-width-on-sm { width: 100%; margin-inline-end: 0; } .pf-v6-l-flex > .pf-m-flex-1-on-sm { flex: 1 0 0; } .pf-v6-l-flex > .pf-m-flex-2-on-sm { flex: 2 0 0; } .pf-v6-l-flex > .pf-m-flex-3-on-sm { flex: 3 0 0; } .pf-v6-l-flex > .pf-m-flex-4-on-sm { flex: 4 0 0; } .pf-v6-l-flex > .pf-m-flex-default-on-sm { flex: 0 1 auto; } .pf-v6-l-flex > .pf-m-flex-none-on-sm { flex: none; } .pf-v6-l-flex > .pf-m-align-self-flex-start-on-sm { align-self: flex-start; } .pf-v6-l-flex > .pf-m-align-self-flex-end-on-sm { align-self: flex-end; } .pf-v6-l-flex > .pf-m-align-self-center-on-sm { align-self: center; } .pf-v6-l-flex > .pf-m-align-self-baseline-on-sm { align-self: baseline; } .pf-v6-l-flex > .pf-m-align-self-stretch-on-sm { align-self: stretch; } } @media (min-width: 48rem) { .pf-v6-l-flex.pf-m-flex-on-md { display: var(--pf-v6-l-flex--Display); } .pf-v6-l-flex.pf-m-inline-flex-on-md { --pf-v6-l-flex--Display: inline-flex; } .pf-v6-l-flex.pf-m-column-on-md { --pf-v6-l-flex--RowGap: 0; --pf-v6-l-flex--ColumnGap: var(--pf-v6-l-flex--spacer--column--base); flex-direction: column; align-items: normal; } .pf-v6-l-flex.pf-m-column-on-md > * { margin-block-start: 0; margin-block-end: var(--pf-v6-l-flex--spacer--row); margin-inline-start: 0; margin-inline-end: 0; } .pf-v6-l-flex.pf-m-column-reverse-on-md { flex-direction: column-reverse; align-items: normal; } .pf-v6-l-flex.pf-m-column-reverse-on-md > * { margin-block-start: var(--pf-v6-l-flex--spacer--row); margin-block-end: 0; margin-inline-start: 0; margin-inline-end: 0; } .pf-v6-l-flex.pf-m-row-on-md { flex-direction: row; align-items: var(--pf-v6-l-flex--m-row--AlignItems); } .pf-v6-l-flex.pf-m-row-on-md > * { margin-block-start: 0; margin-block-end: 0; margin-inline-start: 0; margin-inline-end: var(--pf-v6-l-flex--spacer--column); } .pf-v6-l-flex.pf-m-row-reverse-on-md { flex-direction: row-reverse; align-items: var(--pf-v6-l-flex--m-row-reverse--AlignItems); } .pf-v6-l-flex.pf-m-row-reverse-on-md > * { margin-block-start: 0; margin-block-end: 0; margin-inline-start: var(--pf-v6-l-flex--spacer--column); margin-inline-end: 0; } .pf-v6-l-flex.pf-m-wrap-on-md { flex-wrap: wrap; } .pf-v6-l-flex.pf-m-wrap-reverse-on-md { flex-wrap: wrap-reverse; } .pf-v6-l-flex.pf-m-nowrap-on-md { flex-wrap: nowrap; } .pf-v6-l-flex.pf-m-justify-content-flex-start-on-md { justify-content: flex-start; } .pf-v6-l-flex.pf-m-justify-content-flex-end-on-md { justify-content: flex-end; } .pf-v6-l-flex.pf-m-justify-content-center-on-md { justify-content: center; } .pf-v6-l-flex.pf-m-justify-content-space-between-on-md { justify-content: space-between; } .pf-v6-l-flex.pf-m-justify-content-space-around-on-md { justify-content: space-around; } .pf-v6-l-flex.pf-m-justify-content-space-evenly-on-md { justify-content: space-evenly; } .pf-v6-l-flex.pf-m-align-items-flex-start-on-md { align-items: flex-start; } .pf-v6-l-flex.pf-m-align-items-flex-end-on-md { align-items: flex-end; } .pf-v6-l-flex.pf-m-align-items-center-on-md { align-items: center; } .pf-v6-l-flex.pf-m-align-items-stretch-on-md { align-items: stretch; } .pf-v6-l-flex.pf-m-align-items-baseline-on-md { align-items: baseline; } .pf-v6-l-flex.pf-m-align-content-flex-start-on-md { align-content: flex-start; } .pf-v6-l-flex.pf-m-align-content-flex-end-on-md { align-content: flex-end; } .pf-v6-l-flex.pf-m-align-content-center-on-md { align-content: center; } .pf-v6-l-flex.pf-m-align-content-stretch-on-md { align-content: stretch; } .pf-v6-l-flex.pf-m-align-content-space-between-on-md { align-content: space-between; } .pf-v6-l-flex.pf-m-align-content-space-around-on-md { align-content: space-around; } .pf-v6-l-flex > .pf-m-align-right-on-md { margin-inline-start: auto; } .pf-v6-l-flex > .pf-m-align-left-on-md { margin-inline-start: 0; } .pf-v6-l-flex > .pf-m-grow-on-md { flex-grow: 1; } .pf-v6-l-flex > .pf-m-shrink-on-md { flex-shrink: 1; } .pf-v6-l-flex > .pf-m-full-width-on-md { width: 100%; margin-inline-end: 0; } .pf-v6-l-flex > .pf-m-flex-1-on-md { flex: 1 0 0; } .pf-v6-l-flex > .pf-m-flex-2-on-md { flex: 2 0 0; } .pf-v6-l-flex > .pf-m-flex-3-on-md { flex: 3 0 0; } .pf-v6-l-flex > .pf-m-flex-4-on-md { flex: 4 0 0; } .pf-v6-l-flex > .pf-m-flex-default-on-md { flex: 0 1 auto; } .pf-v6-l-flex > .pf-m-flex-none-on-md { flex: none; } .pf-v6-l-flex > .pf-m-align-self-flex-start-on-md { align-self: flex-start; } .pf-v6-l-flex > .pf-m-align-self-flex-end-on-md { align-self: flex-end; } .pf-v6-l-flex > .pf-m-align-self-center-on-md { align-self: center; } .pf-v6-l-flex > .pf-m-align-self-baseline-on-md { align-self: baseline; } .pf-v6-l-flex > .pf-m-align-self-stretch-on-md { align-self: stretch; } } @media (min-width: 62rem) { .pf-v6-l-flex.pf-m-flex-on-lg { display: var(--pf-v6-l-flex--Display); } .pf-v6-l-flex.pf-m-inline-flex-on-lg { --pf-v6-l-flex--Display: inline-flex; } .pf-v6-l-flex.pf-m-column-on-lg { --pf-v6-l-flex--RowGap: 0; --pf-v6-l-flex--ColumnGap: var(--pf-v6-l-flex--spacer--column--base); flex-direction: column; align-items: normal; } .pf-v6-l-flex.pf-m-column-on-lg > * { margin-block-start: 0; margin-block-end: var(--pf-v6-l-flex--spacer--row); margin-inline-start: 0; margin-inline-end: 0; } .pf-v6-l-flex.pf-m-column-reverse-on-lg { flex-direction: column-reverse; align-items: normal; } .pf-v6-l-flex.pf-m-column-reverse-on-lg > * { margin-block-start: var(--pf-v6-l-flex--spacer--row); margin-block-end: 0; margin-inline-start: 0; margin-inline-end: 0; } .pf-v6-l-flex.pf-m-row-on-lg { flex-direction: row; align-items: var(--pf-v6-l-flex--m-row--AlignItems); } .pf-v6-l-flex.pf-m-row-on-lg > * { margin-block-start: 0; margin-block-end: 0; margin-inline-start: 0; margin-inline-end: var(--pf-v6-l-flex--spacer--column); } .pf-v6-l-flex.pf-m-row-reverse-on-lg { flex-direction: row-reverse; align-items: var(--pf-v6-l-flex--m-row-reverse--AlignItems); } .pf-v6-l-flex.pf-m-row-reverse-on-lg > * { margin-block-start: 0; margin-block-end: 0; margin-inline-start: var(--pf-v6-l-flex--spacer--column); margin-inline-end: 0; } .pf-v6-l-flex.pf-m-wrap-on-lg { flex-wrap: wrap; } .pf-v6-l-flex.pf-m-wrap-reverse-on-lg { flex-wrap: wrap-reverse; } .pf-v6-l-flex.pf-m-nowrap-on-lg { flex-wrap: nowrap; } .pf-v6-l-flex.pf-m-justify-content-flex-start-on-lg { justify-content: flex-start; } .pf-v6-l-flex.pf-m-justify-content-flex-end-on-lg { justify-content: flex-end; } .pf-v6-l-flex.pf-m-justify-content-center-on-lg { justify-content: center; } .pf-v6-l-flex.pf-m-justify-content-space-between-on-lg { justify-content: space-between; } .pf-v6-l-flex.pf-m-justify-content-space-around-on-lg { justify-content: space-around; } .pf-v6-l-flex.pf-m-justify-content-space-evenly-on-lg { justify-content: space-evenly; } .pf-v6-l-flex.pf-m-align-items-flex-start-on-lg { align-items: flex-start; } .pf-v6-l-flex.pf-m-align-items-flex-end-on-lg { align-items: flex-end; } .pf-v6-l-flex.pf-m-align-items-center-on-lg { align-items: center; } .pf-v6-l-flex.pf-m-align-items-stretch-on-lg { align-items: stretch; } .pf-v6-l-flex.pf-m-align-items-baseline-on-lg { align-items: baseline; } .pf-v6-l-flex.pf-m-align-content-flex-start-on-lg { align-content: flex-start; } .pf-v6-l-flex.pf-m-align-content-flex-end-on-lg { align-content: flex-end; } .pf-v6-l-flex.pf-m-align-content-center-on-lg { align-content: center; } .pf-v6-l-flex.pf-m-align-content-stretch-on-lg { align-content: stretch; } .pf-v6-l-flex.pf-m-align-content-space-between-on-lg { align-content: space-between; } .pf-v6-l-flex.pf-m-align-content-space-around-on-lg { align-content: space-around; } .pf-v6-l-flex > .pf-m-align-right-on-lg { margin-inline-start: auto; } .pf-v6-l-flex > .pf-m-align-left-on-lg { margin-inline-start: 0; } .pf-v6-l-flex > .pf-m-grow-on-lg { flex-grow: 1; } .pf-v6-l-flex > .pf-m-shrink-on-lg { flex-shrink: 1; } .pf-v6-l-flex > .pf-m-full-width-on-lg { width: 100%; margin-inline-end: 0; } .pf-v6-l-flex > .pf-m-flex-1-on-lg { flex: 1 0 0; } .pf-v6-l-flex > .pf-m-flex-2-on-lg { flex: 2 0 0; } .pf-v6-l-flex > .pf-m-flex-3-on-lg { flex: 3 0 0; } .pf-v6-l-flex > .pf-m-flex-4-on-lg { flex: 4 0 0; } .pf-v6-l-flex > .pf-m-flex-default-on-lg { flex: 0 1 auto; } .pf-v6-l-flex > .pf-m-flex-none-on-lg { flex: none; } .pf-v6-l-flex > .pf-m-align-self-flex-start-on-lg { align-self: flex-start; } .pf-v6-l-flex > .pf-m-align-self-flex-end-on-lg { align-self: flex-end; } .pf-v6-l-flex > .pf-m-align-self-center-on-lg { align-self: center; } .pf-v6-l-flex > .pf-m-align-self-baseline-on-lg { align-self: baseline; } .pf-v6-l-flex > .pf-m-align-self-stretch-on-lg { align-self: stretch; } } @media (min-width: 75rem) { .pf-v6-l-flex.pf-m-flex-on-xl { display: var(--pf-v6-l-flex--Display); } .pf-v6-l-flex.pf-m-inline-flex-on-xl { --pf-v6-l-flex--Display: inline-flex; } .pf-v6-l-flex.pf-m-column-on-xl { --pf-v6-l-flex--RowGap: 0; --pf-v6-l-flex--ColumnGap: var(--pf-v6-l-flex--spacer--column--base); flex-direction: column; align-items: normal; } .pf-v6-l-flex.pf-m-column-on-xl > * { margin-block-start: 0; margin-block-end: var(--pf-v6-l-flex--spacer--row); margin-inline-start: 0; margin-inline-end: 0; } .pf-v6-l-flex.pf-m-column-reverse-on-xl { flex-direction: column-reverse; align-items: normal; } .pf-v6-l-flex.pf-m-column-reverse-on-xl > * { margin-block-start: var(--pf-v6-l-flex--spacer--row); margin-block-end: 0; margin-inline-start: 0; margin-inline-end: 0; } .pf-v6-l-flex.pf-m-row-on-xl { flex-direction: row; align-items: var(--pf-v6-l-flex--m-row--AlignItems); } .pf-v6-l-flex.pf-m-row-on-xl > * { margin-block-start: 0; margin-block-end: 0; margin-inline-start: 0; margin-inline-end: var(--pf-v6-l-flex--spacer--column); } .pf-v6-l-flex.pf-m-row-reverse-on-xl { flex-direction: row-reverse; align-items: var(--pf-v6-l-flex--m-row-reverse--AlignItems); } .pf-v6-l-flex.pf-m-row-reverse-on-xl > * { margin-block-start: 0; margin-block-end: 0; margin-inline-start: var(--pf-v6-l-flex--spacer--column); margin-inline-end: 0; } .pf-v6-l-flex.pf-m-wrap-on-xl { flex-wrap: wrap; } .pf-v6-l-flex.pf-m-wrap-reverse-on-xl { flex-wrap: wrap-reverse; } .pf-v6-l-flex.pf-m-nowrap-on-xl { flex-wrap: nowrap; } .pf-v6-l-flex.pf-m-justify-content-flex-start-on-xl { justify-content: flex-start; } .pf-v6-l-flex.pf-m-justify-content-flex-end-on-xl { justify-content: flex-end; } .pf-v6-l-flex.pf-m-justify-content-center-on-xl { justify-content: center; } .pf-v6-l-flex.pf-m-justify-content-space-between-on-xl { justify-content: space-between; } .pf-v6-l-flex.pf-m-justify-content-space-around-on-xl { justify-content: space-around; } .pf-v6-l-flex.pf-m-justify-content-space-evenly-on-xl { justify-content: space-evenly; } .pf-v6-l-flex.pf-m-align-items-flex-start-on-xl { align-items: flex-start; } .pf-v6-l-flex.pf-m-align-items-flex-end-on-xl { align-items: flex-end; } .pf-v6-l-flex.pf-m-align-items-center-on-xl { align-items: center; } .pf-v6-l-flex.pf-m-align-items-stretch-on-xl { align-items: stretch; } .pf-v6-l-flex.pf-m-align-items-baseline-on-xl { align-items: baseline; } .pf-v6-l-flex.pf-m-align-content-flex-start-on-xl { align-content: flex-start; } .pf-v6-l-flex.pf-m-align-content-flex-end-on-xl { align-content: flex-end; } .pf-v6-l-flex.pf-m-align-content-center-on-xl { align-content: center; } .pf-v6-l-flex.pf-m-align-content-stretch-on-xl { align-content: stretch; } .pf-v6-l-flex.pf-m-align-content-space-between-on-xl { align-content: space-between; } .pf-v6-l-flex.pf-m-align-content-space-around-on-xl { align-content: space-around; } .pf-v6-l-flex > .pf-m-align-right-on-xl { margin-inline-start: auto; } .pf-v6-l-flex > .pf-m-align-left-on-xl { margin-inline-start: 0; } .pf-v6-l-flex > .pf-m-grow-on-xl { flex-grow: 1; } .pf-v6-l-flex > .pf-m-shrink-on-xl { flex-shrink: 1; } .pf-v6-l-flex > .pf-m-full-width-on-xl { width: 100%; margin-inline-end: 0; } .pf-v6-l-flex > .pf-m-flex-1-on-xl { flex: 1 0 0; } .pf-v6-l-flex > .pf-m-flex-2-on-xl { flex: 2 0 0; } .pf-v6-l-flex > .pf-m-flex-3-on-xl { flex: 3 0 0; } .pf-v6-l-flex > .pf-m-flex-4-on-xl { flex: 4 0 0; } .pf-v6-l-flex > .pf-m-flex-default-on-xl { flex: 0 1 auto; } .pf-v6-l-flex > .pf-m-flex-none-on-xl { flex: none; } .pf-v6-l-flex > .pf-m-align-self-flex-start-on-xl { align-self: flex-start; } .pf-v6-l-flex > .pf-m-align-self-flex-end-on-xl { align-self: flex-end; } .pf-v6-l-flex > .pf-m-align-self-center-on-xl { align-self: center; } .pf-v6-l-flex > .pf-m-align-self-baseline-on-xl { align-self: baseline; } .pf-v6-l-flex > .pf-m-align-self-stretch-on-xl { align-self: stretch; } } @media (min-width: 90.625rem) { .pf-v6-l-flex.pf-m-flex-on-2xl { display: var(--pf-v6-l-flex--Display); } .pf-v6-l-flex.pf-m-inline-flex-on-2xl { --pf-v6-l-flex--Display: inline-flex; } .pf-v6-l-flex.pf-m-column-on-2xl { --pf-v6-l-flex--RowGap: 0; --pf-v6-l-flex--ColumnGap: var(--pf-v6-l-flex--spacer--column--base); flex-direction: column; align-items: normal; } .pf-v6-l-flex.pf-m-column-on-2xl > * { margin-block-start: 0; margin-block-end: var(--pf-v6-l-flex--spacer--row); margin-inline-start: 0; margin-inline-end: 0; } .pf-v6-l-flex.pf-m-column-reverse-on-2xl { flex-direction: column-reverse; align-items: normal; } .pf-v6-l-flex.pf-m-column-reverse-on-2xl > * { margin-block-start: var(--pf-v6-l-flex--spacer--row); margin-block-end: 0; margin-inline-start: 0; margin-inline-end: 0; } .pf-v6-l-flex.pf-m-row-on-2xl { flex-direction: row; align-items: var(--pf-v6-l-flex--m-row--AlignItems); } .pf-v6-l-flex.pf-m-row-on-2xl > * { margin-block-start: 0; margin-block-end: 0; margin-inline-start: 0; margin-inline-end: var(--pf-v6-l-flex--spacer--column); } .pf-v6-l-flex.pf-m-row-reverse-on-2xl { flex-direction: row-reverse; align-items: var(--pf-v6-l-flex--m-row-reverse--AlignItems); } .pf-v6-l-flex.pf-m-row-reverse-on-2xl > * { margin-block-start: 0; margin-block-end: 0; margin-inline-start: var(--pf-v6-l-flex--spacer--column); margin-inline-end: 0; } .pf-v6-l-flex.pf-m-wrap-on-2xl { flex-wrap: wrap; } .pf-v6-l-flex.pf-m-wrap-reverse-on-2xl { flex-wrap: wrap-reverse; } .pf-v6-l-flex.pf-m-nowrap-on-2xl { flex-wrap: nowrap; } .pf-v6-l-flex.pf-m-justify-content-flex-start-on-2xl { justify-content: flex-start; } .pf-v6-l-flex.pf-m-justify-content-flex-end-on-2xl { justify-content: flex-end; } .pf-v6-l-flex.pf-m-justify-content-center-on-2xl { justify-content: center; } .pf-v6-l-flex.pf-m-justify-content-space-between-on-2xl { justify-content: space-between; } .pf-v6-l-flex.pf-m-justify-content-space-around-on-2xl { justify-content: space-around; } .pf-v6-l-flex.pf-m-justify-content-space-evenly-on-2xl { justify-content: space-evenly; } .pf-v6-l-flex.pf-m-align-items-flex-start-on-2xl { align-items: flex-start; } .pf-v6-l-flex.pf-m-align-items-flex-end-on-2xl { align-items: flex-end; } .pf-v6-l-flex.pf-m-align-items-center-on-2xl { align-items: center; } .pf-v6-l-flex.pf-m-align-items-stretch-on-2xl { align-items: stretch; } .pf-v6-l-flex.pf-m-align-items-baseline-on-2xl { align-items: baseline; } .pf-v6-l-flex.pf-m-align-content-flex-start-on-2xl { align-content: flex-start; } .pf-v6-l-flex.pf-m-align-content-flex-end-on-2xl { align-content: flex-end; } .pf-v6-l-flex.pf-m-align-content-center-on-2xl { align-content: center; } .pf-v6-l-flex.pf-m-align-content-stretch-on-2xl { align-content: stretch; } .pf-v6-l-flex.pf-m-align-content-space-between-on-2xl { align-content: space-between; } .pf-v6-l-flex.pf-m-align-content-space-around-on-2xl { align-content: space-around; } .pf-v6-l-flex > .pf-m-align-right-on-2xl { margin-inline-start: auto; } .pf-v6-l-flex > .pf-m-align-left-on-2xl { margin-inline-start: 0; } .pf-v6-l-flex > .pf-m-grow-on-2xl { flex-grow: 1; } .pf-v6-l-flex > .pf-m-shrink-on-2xl { flex-shrink: 1; } .pf-v6-l-flex > .pf-m-full-width-on-2xl { width: 100%; margin-inline-end: 0; } .pf-v6-l-flex > .pf-m-flex-1-on-2xl { flex: 1 0 0; } .pf-v6-l-flex > .pf-m-flex-2-on-2xl { flex: 2 0 0; } .pf-v6-l-flex > .pf-m-flex-3-on-2xl { flex: 3 0 0; } .pf-v6-l-flex > .pf-m-flex-4-on-2xl { flex: 4 0 0; } .pf-v6-l-flex > .pf-m-flex-default-on-2xl { flex: 0 1 auto; } .pf-v6-l-flex > .pf-m-flex-none-on-2xl { flex: none; } .pf-v6-l-flex > .pf-m-align-self-flex-start-on-2xl { align-self: flex-start; } .pf-v6-l-flex > .pf-m-align-self-flex-end-on-2xl { align-self: flex-end; } .pf-v6-l-flex > .pf-m-align-self-center-on-2xl { align-self: center; } .pf-v6-l-flex > .pf-m-align-self-baseline-on-2xl { align-self: baseline; } .pf-v6-l-flex > .pf-m-align-self-stretch-on-2xl { align-self: stretch; } } .pf-v6-l-flex.pf-m-space-items-none > * { --pf-v6-l-flex--spacer: var(--pf-v6-l-flex--spacer--none); } .pf-v6-l-flex.pf-m-space-items-none > :last-child { --pf-v6-l-flex--spacer: 0; } .pf-v6-l-flex.pf-m-space-items-xs > * { --pf-v6-l-flex--spacer: var(--pf-v6-l-flex--spacer--xs); } .pf-v6-l-flex.pf-m-space-items-xs > :last-child { --pf-v6-l-flex--spacer: 0; } .pf-v6-l-flex.pf-m-space-items-sm > * { --pf-v6-l-flex--spacer: var(--pf-v6-l-flex--spacer--sm); } .pf-v6-l-flex.pf-m-space-items-sm > :last-child { --pf-v6-l-flex--spacer: 0; } .pf-v6-l-flex.pf-m-space-items-md > * { --pf-v6-l-flex--spacer: var(--pf-v6-l-flex--spacer--md); } .pf-v6-l-flex.pf-m-space-items-md > :last-child { --pf-v6-l-flex--spacer: 0; } .pf-v6-l-flex.pf-m-space-items-lg > * { --pf-v6-l-flex--spacer: var(--pf-v6-l-flex--spacer--lg); } .pf-v6-l-flex.pf-m-space-items-lg > :last-child { --pf-v6-l-flex--spacer: 0; } .pf-v6-l-flex.pf-m-space-items-xl > * { --pf-v6-l-flex--spacer: var(--pf-v6-l-flex--spacer--xl); } .pf-v6-l-flex.pf-m-space-items-xl > :last-child { --pf-v6-l-flex--spacer: 0; } .pf-v6-l-flex.pf-m-space-items-2xl > * { --pf-v6-l-flex--spacer: var(--pf-v6-l-flex--spacer--2xl); } .pf-v6-l-flex.pf-m-space-items-2xl > :last-child { --pf-v6-l-flex--spacer: 0; } .pf-v6-l-flex.pf-m-space-items-3xl > * { --pf-v6-l-flex--spacer: var(--pf-v6-l-flex--spacer--3xl); } .pf-v6-l-flex.pf-m-space-items-3xl > :last-child { --pf-v6-l-flex--spacer: 0; } .pf-v6-l-flex.pf-m-space-items-4xl > * { --pf-v6-l-flex--spacer: var(--pf-v6-l-flex--spacer--4xl); } .pf-v6-l-flex.pf-m-space-items-4xl > :last-child { --pf-v6-l-flex--spacer: 0; } @media (min-width: 36rem) { .pf-v6-l-flex.pf-m-space-items-none-on-sm > * { --pf-v6-l-flex--spacer: var(--pf-v6-l-flex--spacer--none); } .pf-v6-l-flex.pf-m-space-items-none-on-sm > :last-child { --pf-v6-l-flex--spacer: 0; } .pf-v6-l-flex.pf-m-space-items-xs-on-sm > * { --pf-v6-l-flex--spacer: var(--pf-v6-l-flex--spacer--xs); } .pf-v6-l-flex.pf-m-space-items-xs-on-sm > :last-child { --pf-v6-l-flex--spacer: 0; } .pf-v6-l-flex.pf-m-space-items-sm-on-sm > * { --pf-v6-l-flex--spacer: var(--pf-v6-l-flex--spacer--sm); } .pf-v6-l-flex.pf-m-space-items-sm-on-sm > :last-child { --pf-v6-l-flex--spacer: 0; } .pf-v6-l-flex.pf-m-space-items-md-on-sm > * { --pf-v6-l-flex--spacer: var(--pf-v6-l-flex--spacer--md); } .pf-v6-l-flex.pf-m-space-items-md-on-sm > :last-child { --pf-v6-l-flex--spacer: 0; } .pf-v6-l-flex.pf-m-space-items-lg-on-sm > * { --pf-v6-l-flex--spacer: var(--pf-v6-l-flex--spacer--lg); } .pf-v6-l-flex.pf-m-space-items-lg-on-sm > :last-child { --pf-v6-l-flex--spacer: 0; } .pf-v6-l-flex.pf-m-space-items-xl-on-sm > * { --pf-v6-l-flex--spacer: var(--pf-v6-l-flex--spacer--xl); } .pf-v6-l-flex.pf-m-space-items-xl-on-sm > :last-child { --pf-v6-l-flex--spacer: 0; } .pf-v6-l-flex.pf-m-space-items-2xl-on-sm > * { --pf-v6-l-flex--spacer: var(--pf-v6-l-flex--spacer--2xl); } .pf-v6-l-flex.pf-m-space-items-2xl-on-sm > :last-child { --pf-v6-l-flex--spacer: 0; } .pf-v6-l-flex.pf-m-space-items-3xl-on-sm > * { --pf-v6-l-flex--spacer: var(--pf-v6-l-flex--spacer--3xl); } .pf-v6-l-flex.pf-m-space-items-3xl-on-sm > :last-child { --pf-v6-l-flex--spacer: 0; } .pf-v6-l-flex.pf-m-space-items-4xl-on-sm > * { --pf-v6-l-flex--spacer: var(--pf-v6-l-flex--spacer--4xl); } .pf-v6-l-flex.pf-m-space-items-4xl-on-sm > :last-child { --pf-v6-l-flex--spacer: 0; } } @media (min-width: 48rem) { .pf-v6-l-flex.pf-m-space-items-none-on-md > * { --pf-v6-l-flex--spacer: var(--pf-v6-l-flex--spacer--none); } .pf-v6-l-flex.pf-m-space-items-none-on-md > :last-child { --pf-v6-l-flex--spacer: 0; } .pf-v6-l-flex.pf-m-space-items-xs-on-md > * { --pf-v6-l-flex--spacer: var(--pf-v6-l-flex--spacer--xs); } .pf-v6-l-flex.pf-m-space-items-xs-on-md > :last-child { --pf-v6-l-flex--spacer: 0; } .pf-v6-l-flex.pf-m-space-items-sm-on-md > * { --pf-v6-l-flex--spacer: var(--pf-v6-l-flex--spacer--sm); } .pf-v6-l-flex.pf-m-space-items-sm-on-md > :last-child { --pf-v6-l-flex--spacer: 0; } .pf-v6-l-flex.pf-m-space-items-md-on-md > * { --pf-v6-l-flex--spacer: var(--pf-v6-l-flex--spacer--md); } .pf-v6-l-flex.pf-m-space-items-md-on-md > :last-child { --pf-v6-l-flex--spacer: 0; } .pf-v6-l-flex.pf-m-space-items-lg-on-md > * { --pf-v6-l-flex--spacer: var(--pf-v6-l-flex--spacer--lg); } .pf-v6-l-flex.pf-m-space-items-lg-on-md > :last-child { --pf-v6-l-flex--spacer: 0; } .pf-v6-l-flex.pf-m-space-items-xl-on-md > * { --pf-v6-l-flex--spacer: var(--pf-v6-l-flex--spacer--xl); } .pf-v6-l-flex.pf-m-space-items-xl-on-md > :last-child { --pf-v6-l-flex--spacer: 0; } .pf-v6-l-flex.pf-m-space-items-2xl-on-md > * { --pf-v6-l-flex--spacer: var(--pf-v6-l-flex--spacer--2xl); } .pf-v6-l-flex.pf-m-space-items-2xl-on-md > :last-child { --pf-v6-l-flex--spacer: 0; } .pf-v6-l-flex.pf-m-space-items-3xl-on-md > * { --pf-v6-l-flex--spacer: var(--pf-v6-l-flex--spacer--3xl); } .pf-v6-l-flex.pf-m-space-items-3xl-on-md > :last-child { --pf-v6-l-flex--spacer: 0; } .pf-v6-l-flex.pf-m-space-items-4xl-on-md > * { --pf-v6-l-flex--spacer: var(--pf-v6-l-flex--spacer--4xl); } .pf-v6-l-flex.pf-m-space-items-4xl-on-md > :last-child { --pf-v6-l-flex--spacer: 0; } } @media (min-width: 62rem) { .pf-v6-l-flex.pf-m-space-items-none-on-lg > * { --pf-v6-l-flex--spacer: var(--pf-v6-l-flex--spacer--none); } .pf-v6-l-flex.pf-m-space-items-none-on-lg > :last-child { --pf-v6-l-flex--spacer: 0; } .pf-v6-l-flex.pf-m-space-items-xs-on-lg > * { --pf-v6-l-flex--spacer: var(--pf-v6-l-flex--spacer--xs); } .pf-v6-l-flex.pf-m-space-items-xs-on-lg > :last-child { --pf-v6-l-flex--spacer: 0; } .pf-v6-l-flex.pf-m-space-items-sm-on-lg > * { --pf-v6-l-flex--spacer: var(--pf-v6-l-flex--spacer--sm); } .pf-v6-l-flex.pf-m-space-items-sm-on-lg > :last-child { --pf-v6-l-flex--spacer: 0; } .pf-v6-l-flex.pf-m-space-items-md-on-lg > * { --pf-v6-l-flex--spacer: var(--pf-v6-l-flex--spacer--md); } .pf-v6-l-flex.pf-m-space-items-md-on-lg > :last-child { --pf-v6-l-flex--spacer: 0; } .pf-v6-l-flex.pf-m-space-items-lg-on-lg > * { --pf-v6-l-flex--spacer: var(--pf-v6-l-flex--spacer--lg); } .pf-v6-l-flex.pf-m-space-items-lg-on-lg > :last-child { --pf-v6-l-flex--spacer: 0; } .pf-v6-l-flex.pf-m-space-items-xl-on-lg > * { --pf-v6-l-flex--spacer: var(--pf-v6-l-flex--spacer--xl); } .pf-v6-l-flex.pf-m-space-items-xl-on-lg > :last-child { --pf-v6-l-flex--spacer: 0; } .pf-v6-l-flex.pf-m-space-items-2xl-on-lg > * { --pf-v6-l-flex--spacer: var(--pf-v6-l-flex--spacer--2xl); } .pf-v6-l-flex.pf-m-space-items-2xl-on-lg > :last-child { --pf-v6-l-flex--spacer: 0; } .pf-v6-l-flex.pf-m-space-items-3xl-on-lg > * { --pf-v6-l-flex--spacer: var(--pf-v6-l-flex--spacer--3xl); } .pf-v6-l-flex.pf-m-space-items-3xl-on-lg > :last-child { --pf-v6-l-flex--spacer: 0; } .pf-v6-l-flex.pf-m-space-items-4xl-on-lg > * { --pf-v6-l-flex--spacer: var(--pf-v6-l-flex--spacer--4xl); } .pf-v6-l-flex.pf-m-space-items-4xl-on-lg > :last-child { --pf-v6-l-flex--spacer: 0; } } @media (min-width: 75rem) { .pf-v6-l-flex.pf-m-space-items-none-on-xl > * { --pf-v6-l-flex--spacer: var(--pf-v6-l-flex--spacer--none); } .pf-v6-l-flex.pf-m-space-items-none-on-xl > :last-child { --pf-v6-l-flex--spacer: 0; } .pf-v6-l-flex.pf-m-space-items-xs-on-xl > * { --pf-v6-l-flex--spacer: var(--pf-v6-l-flex--spacer--xs); } .pf-v6-l-flex.pf-m-space-items-xs-on-xl > :last-child { --pf-v6-l-flex--spacer: 0; } .pf-v6-l-flex.pf-m-space-items-sm-on-xl > * { --pf-v6-l-flex--spacer: var(--pf-v6-l-flex--spacer--sm); } .pf-v6-l-flex.pf-m-space-items-sm-on-xl > :last-child { --pf-v6-l-flex--spacer: 0; } .pf-v6-l-flex.pf-m-space-items-md-on-xl > * { --pf-v6-l-flex--spacer: var(--pf-v6-l-flex--spacer--md); } .pf-v6-l-flex.pf-m-space-items-md-on-xl > :last-child { --pf-v6-l-flex--spacer: 0; } .pf-v6-l-flex.pf-m-space-items-lg-on-xl > * { --pf-v6-l-flex--spacer: var(--pf-v6-l-flex--spacer--lg); } .pf-v6-l-flex.pf-m-space-items-lg-on-xl > :last-child { --pf-v6-l-flex--spacer: 0; } .pf-v6-l-flex.pf-m-space-items-xl-on-xl > * { --pf-v6-l-flex--spacer: var(--pf-v6-l-flex--spacer--xl); } .pf-v6-l-flex.pf-m-space-items-xl-on-xl > :last-child { --pf-v6-l-flex--spacer: 0; } .pf-v6-l-flex.pf-m-space-items-2xl-on-xl > * { --pf-v6-l-flex--spacer: var(--pf-v6-l-flex--spacer--2xl); } .pf-v6-l-flex.pf-m-space-items-2xl-on-xl > :last-child { --pf-v6-l-flex--spacer: 0; } .pf-v6-l-flex.pf-m-space-items-3xl-on-xl > * { --pf-v6-l-flex--spacer: var(--pf-v6-l-flex--spacer--3xl); } .pf-v6-l-flex.pf-m-space-items-3xl-on-xl > :last-child { --pf-v6-l-flex--spacer: 0; } .pf-v6-l-flex.pf-m-space-items-4xl-on-xl > * { --pf-v6-l-flex--spacer: var(--pf-v6-l-flex--spacer--4xl); } .pf-v6-l-flex.pf-m-space-items-4xl-on-xl > :last-child { --pf-v6-l-flex--spacer: 0; } } @media (min-width: 90.625rem) { .pf-v6-l-flex.pf-m-space-items-none-on-2xl > * { --pf-v6-l-flex--spacer: var(--pf-v6-l-flex--spacer--none); } .pf-v6-l-flex.pf-m-space-items-none-on-2xl > :last-child { --pf-v6-l-flex--spacer: 0; } .pf-v6-l-flex.pf-m-space-items-xs-on-2xl > * { --pf-v6-l-flex--spacer: var(--pf-v6-l-flex--spacer--xs); } .pf-v6-l-flex.pf-m-space-items-xs-on-2xl > :last-child { --pf-v6-l-flex--spacer: 0; } .pf-v6-l-flex.pf-m-space-items-sm-on-2xl > * { --pf-v6-l-flex--spacer: var(--pf-v6-l-flex--spacer--sm); } .pf-v6-l-flex.pf-m-space-items-sm-on-2xl > :last-child { --pf-v6-l-flex--spacer: 0; } .pf-v6-l-flex.pf-m-space-items-md-on-2xl > * { --pf-v6-l-flex--spacer: var(--pf-v6-l-flex--spacer--md); } .pf-v6-l-flex.pf-m-space-items-md-on-2xl > :last-child { --pf-v6-l-flex--spacer: 0; } .pf-v6-l-flex.pf-m-space-items-lg-on-2xl > * { --pf-v6-l-flex--spacer: var(--pf-v6-l-flex--spacer--lg); } .pf-v6-l-flex.pf-m-space-items-lg-on-2xl > :last-child { --pf-v6-l-flex--spacer: 0; } .pf-v6-l-flex.pf-m-space-items-xl-on-2xl > * { --pf-v6-l-flex--spacer: var(--pf-v6-l-flex--spacer--xl); } .pf-v6-l-flex.pf-m-space-items-xl-on-2xl > :last-child { --pf-v6-l-flex--spacer: 0; } .pf-v6-l-flex.pf-m-space-items-2xl-on-2xl > * { --pf-v6-l-flex--spacer: var(--pf-v6-l-flex--spacer--2xl); } .pf-v6-l-flex.pf-m-space-items-2xl-on-2xl > :last-child { --pf-v6-l-flex--spacer: 0; } .pf-v6-l-flex.pf-m-space-items-3xl-on-2xl > * { --pf-v6-l-flex--spacer: var(--pf-v6-l-flex--spacer--3xl); } .pf-v6-l-flex.pf-m-space-items-3xl-on-2xl > :last-child { --pf-v6-l-flex--spacer: 0; } .pf-v6-l-flex.pf-m-space-items-4xl-on-2xl > * { --pf-v6-l-flex--spacer: var(--pf-v6-l-flex--spacer--4xl); } .pf-v6-l-flex.pf-m-space-items-4xl-on-2xl > :last-child { --pf-v6-l-flex--spacer: 0; } } .pf-v6-l-flex .pf-m-spacer-none { --pf-v6-l-flex--spacer: var(--pf-v6-l-flex--spacer--none); } .pf-v6-l-flex .pf-m-spacer-none:last-child { --pf-v6-l-flex--spacer: var(--pf-v6-l-flex--spacer--none); } .pf-v6-l-flex .pf-m-spacer-xs { --pf-v6-l-flex--spacer: var(--pf-v6-l-flex--spacer--xs); } .pf-v6-l-flex .pf-m-spacer-xs:last-child { --pf-v6-l-flex--spacer: var(--pf-v6-l-flex--spacer--xs); } .pf-v6-l-flex .pf-m-spacer-sm { --pf-v6-l-flex--spacer: var(--pf-v6-l-flex--spacer--sm); } .pf-v6-l-flex .pf-m-spacer-sm:last-child { --pf-v6-l-flex--spacer: var(--pf-v6-l-flex--spacer--sm); } .pf-v6-l-flex .pf-m-spacer-md { --pf-v6-l-flex--spacer: var(--pf-v6-l-flex--spacer--md); } .pf-v6-l-flex .pf-m-spacer-md:last-child { --pf-v6-l-flex--spacer: var(--pf-v6-l-flex--spacer--md); } .pf-v6-l-flex .pf-m-spacer-lg { --pf-v6-l-flex--spacer: var(--pf-v6-l-flex--spacer--lg); } .pf-v6-l-flex .pf-m-spacer-lg:last-child { --pf-v6-l-flex--spacer: var(--pf-v6-l-flex--spacer--lg); } .pf-v6-l-flex .pf-m-spacer-xl { --pf-v6-l-flex--spacer: var(--pf-v6-l-flex--spacer--xl); } .pf-v6-l-flex .pf-m-spacer-xl:last-child { --pf-v6-l-flex--spacer: var(--pf-v6-l-flex--spacer--xl); } .pf-v6-l-flex .pf-m-spacer-2xl { --pf-v6-l-flex--spacer: var(--pf-v6-l-flex--spacer--2xl); } .pf-v6-l-flex .pf-m-spacer-2xl:last-child { --pf-v6-l-flex--spacer: var(--pf-v6-l-flex--spacer--2xl); } .pf-v6-l-flex .pf-m-spacer-3xl { --pf-v6-l-flex--spacer: var(--pf-v6-l-flex--spacer--3xl); } .pf-v6-l-flex .pf-m-spacer-3xl:last-child { --pf-v6-l-flex--spacer: var(--pf-v6-l-flex--spacer--3xl); } .pf-v6-l-flex .pf-m-spacer-4xl { --pf-v6-l-flex--spacer: var(--pf-v6-l-flex--spacer--4xl); } .pf-v6-l-flex .pf-m-spacer-4xl:last-child { --pf-v6-l-flex--spacer: var(--pf-v6-l-flex--spacer--4xl); } @media (min-width: 36rem) { .pf-v6-l-flex .pf-m-spacer-none-on-sm { --pf-v6-l-flex--spacer: var(--pf-v6-l-flex--spacer--none); } .pf-v6-l-flex .pf-m-spacer-none-on-sm:last-child { --pf-v6-l-flex--spacer: var(--pf-v6-l-flex--spacer--none); } .pf-v6-l-flex .pf-m-spacer-xs-on-sm { --pf-v6-l-flex--spacer: var(--pf-v6-l-flex--spacer--xs); } .pf-v6-l-flex .pf-m-spacer-xs-on-sm:last-child { --pf-v6-l-flex--spacer: var(--pf-v6-l-flex--spacer--xs); } .pf-v6-l-flex .pf-m-spacer-sm-on-sm { --pf-v6-l-flex--spacer: var(--pf-v6-l-flex--spacer--sm); } .pf-v6-l-flex .pf-m-spacer-sm-on-sm:last-child { --pf-v6-l-flex--spacer: var(--pf-v6-l-flex--spacer--sm); } .pf-v6-l-flex .pf-m-spacer-md-on-sm { --pf-v6-l-flex--spacer: var(--pf-v6-l-flex--spacer--md); } .pf-v6-l-flex .pf-m-spacer-md-on-sm:last-child { --pf-v6-l-flex--spacer: var(--pf-v6-l-flex--spacer--md); } .pf-v6-l-flex .pf-m-spacer-lg-on-sm { --pf-v6-l-flex--spacer: var(--pf-v6-l-flex--spacer--lg); } .pf-v6-l-flex .pf-m-spacer-lg-on-sm:last-child { --pf-v6-l-flex--spacer: var(--pf-v6-l-flex--spacer--lg); } .pf-v6-l-flex .pf-m-spacer-xl-on-sm { --pf-v6-l-flex--spacer: var(--pf-v6-l-flex--spacer--xl); } .pf-v6-l-flex .pf-m-spacer-xl-on-sm:last-child { --pf-v6-l-flex--spacer: var(--pf-v6-l-flex--spacer--xl); } .pf-v6-l-flex .pf-m-spacer-2xl-on-sm { --pf-v6-l-flex--spacer: var(--pf-v6-l-flex--spacer--2xl); } .pf-v6-l-flex .pf-m-spacer-2xl-on-sm:last-child { --pf-v6-l-flex--spacer: var(--pf-v6-l-flex--spacer--2xl); } .pf-v6-l-flex .pf-m-spacer-3xl-on-sm { --pf-v6-l-flex--spacer: var(--pf-v6-l-flex--spacer--3xl); } .pf-v6-l-flex .pf-m-spacer-3xl-on-sm:last-child { --pf-v6-l-flex--spacer: var(--pf-v6-l-flex--spacer--3xl); } .pf-v6-l-flex .pf-m-spacer-4xl-on-sm { --pf-v6-l-flex--spacer: var(--pf-v6-l-flex--spacer--4xl); } .pf-v6-l-flex .pf-m-spacer-4xl-on-sm:last-child { --pf-v6-l-flex--spacer: var(--pf-v6-l-flex--spacer--4xl); } } @media (min-width: 48rem) { .pf-v6-l-flex .pf-m-spacer-none-on-md { --pf-v6-l-flex--spacer: var(--pf-v6-l-flex--spacer--none); } .pf-v6-l-flex .pf-m-spacer-none-on-md:last-child { --pf-v6-l-flex--spacer: var(--pf-v6-l-flex--spacer--none); } .pf-v6-l-flex .pf-m-spacer-xs-on-md { --pf-v6-l-flex--spacer: var(--pf-v6-l-flex--spacer--xs); } .pf-v6-l-flex .pf-m-spacer-xs-on-md:last-child { --pf-v6-l-flex--spacer: var(--pf-v6-l-flex--spacer--xs); } .pf-v6-l-flex .pf-m-spacer-sm-on-md { --pf-v6-l-flex--spacer: var(--pf-v6-l-flex--spacer--sm); } .pf-v6-l-flex .pf-m-spacer-sm-on-md:last-child { --pf-v6-l-flex--spacer: var(--pf-v6-l-flex--spacer--sm); } .pf-v6-l-flex .pf-m-spacer-md-on-md { --pf-v6-l-flex--spacer: var(--pf-v6-l-flex--spacer--md); } .pf-v6-l-flex .pf-m-spacer-md-on-md:last-child { --pf-v6-l-flex--spacer: var(--pf-v6-l-flex--spacer--md); } .pf-v6-l-flex .pf-m-spacer-lg-on-md { --pf-v6-l-flex--spacer: var(--pf-v6-l-flex--spacer--lg); } .pf-v6-l-flex .pf-m-spacer-lg-on-md:last-child { --pf-v6-l-flex--spacer: var(--pf-v6-l-flex--spacer--lg); } .pf-v6-l-flex .pf-m-spacer-xl-on-md { --pf-v6-l-flex--spacer: var(--pf-v6-l-flex--spacer--xl); } .pf-v6-l-flex .pf-m-spacer-xl-on-md:last-child { --pf-v6-l-flex--spacer: var(--pf-v6-l-flex--spacer--xl); } .pf-v6-l-flex .pf-m-spacer-2xl-on-md { --pf-v6-l-flex--spacer: var(--pf-v6-l-flex--spacer--2xl); } .pf-v6-l-flex .pf-m-spacer-2xl-on-md:last-child { --pf-v6-l-flex--spacer: var(--pf-v6-l-flex--spacer--2xl); } .pf-v6-l-flex .pf-m-spacer-3xl-on-md { --pf-v6-l-flex--spacer: var(--pf-v6-l-flex--spacer--3xl); } .pf-v6-l-flex .pf-m-spacer-3xl-on-md:last-child { --pf-v6-l-flex--spacer: var(--pf-v6-l-flex--spacer--3xl); } .pf-v6-l-flex .pf-m-spacer-4xl-on-md { --pf-v6-l-flex--spacer: var(--pf-v6-l-flex--spacer--4xl); } .pf-v6-l-flex .pf-m-spacer-4xl-on-md:last-child { --pf-v6-l-flex--spacer: var(--pf-v6-l-flex--spacer--4xl); } } @media (min-width: 62rem) { .pf-v6-l-flex .pf-m-spacer-none-on-lg { --pf-v6-l-flex--spacer: var(--pf-v6-l-flex--spacer--none); } .pf-v6-l-flex .pf-m-spacer-none-on-lg:last-child { --pf-v6-l-flex--spacer: var(--pf-v6-l-flex--spacer--none); } .pf-v6-l-flex .pf-m-spacer-xs-on-lg { --pf-v6-l-flex--spacer: var(--pf-v6-l-flex--spacer--xs); } .pf-v6-l-flex .pf-m-spacer-xs-on-lg:last-child { --pf-v6-l-flex--spacer: var(--pf-v6-l-flex--spacer--xs); } .pf-v6-l-flex .pf-m-spacer-sm-on-lg { --pf-v6-l-flex--spacer: var(--pf-v6-l-flex--spacer--sm); } .pf-v6-l-flex .pf-m-spacer-sm-on-lg:last-child { --pf-v6-l-flex--spacer: var(--pf-v6-l-flex--spacer--sm); } .pf-v6-l-flex .pf-m-spacer-md-on-lg { --pf-v6-l-flex--spacer: var(--pf-v6-l-flex--spacer--md); } .pf-v6-l-flex .pf-m-spacer-md-on-lg:last-child { --pf-v6-l-flex--spacer: var(--pf-v6-l-flex--spacer--md); } .pf-v6-l-flex .pf-m-spacer-lg-on-lg { --pf-v6-l-flex--spacer: var(--pf-v6-l-flex--spacer--lg); } .pf-v6-l-flex .pf-m-spacer-lg-on-lg:last-child { --pf-v6-l-flex--spacer: var(--pf-v6-l-flex--spacer--lg); } .pf-v6-l-flex .pf-m-spacer-xl-on-lg { --pf-v6-l-flex--spacer: var(--pf-v6-l-flex--spacer--xl); } .pf-v6-l-flex .pf-m-spacer-xl-on-lg:last-child { --pf-v6-l-flex--spacer: var(--pf-v6-l-flex--spacer--xl); } .pf-v6-l-flex .pf-m-spacer-2xl-on-lg { --pf-v6-l-flex--spacer: var(--pf-v6-l-flex--spacer--2xl); } .pf-v6-l-flex .pf-m-spacer-2xl-on-lg:last-child { --pf-v6-l-flex--spacer: var(--pf-v6-l-flex--spacer--2xl); } .pf-v6-l-flex .pf-m-spacer-3xl-on-lg { --pf-v6-l-flex--spacer: var(--pf-v6-l-flex--spacer--3xl); } .pf-v6-l-flex .pf-m-spacer-3xl-on-lg:last-child { --pf-v6-l-flex--spacer: var(--pf-v6-l-flex--spacer--3xl); } .pf-v6-l-flex .pf-m-spacer-4xl-on-lg { --pf-v6-l-flex--spacer: var(--pf-v6-l-flex--spacer--4xl); } .pf-v6-l-flex .pf-m-spacer-4xl-on-lg:last-child { --pf-v6-l-flex--spacer: var(--pf-v6-l-flex--spacer--4xl); } } @media (min-width: 75rem) { .pf-v6-l-flex .pf-m-spacer-none-on-xl { --pf-v6-l-flex--spacer: var(--pf-v6-l-flex--spacer--none); } .pf-v6-l-flex .pf-m-spacer-none-on-xl:last-child { --pf-v6-l-flex--spacer: var(--pf-v6-l-flex--spacer--none); } .pf-v6-l-flex .pf-m-spacer-xs-on-xl { --pf-v6-l-flex--spacer: var(--pf-v6-l-flex--spacer--xs); } .pf-v6-l-flex .pf-m-spacer-xs-on-xl:last-child { --pf-v6-l-flex--spacer: var(--pf-v6-l-flex--spacer--xs); } .pf-v6-l-flex .pf-m-spacer-sm-on-xl { --pf-v6-l-flex--spacer: var(--pf-v6-l-flex--spacer--sm); } .pf-v6-l-flex .pf-m-spacer-sm-on-xl:last-child { --pf-v6-l-flex--spacer: var(--pf-v6-l-flex--spacer--sm); } .pf-v6-l-flex .pf-m-spacer-md-on-xl { --pf-v6-l-flex--spacer: var(--pf-v6-l-flex--spacer--md); } .pf-v6-l-flex .pf-m-spacer-md-on-xl:last-child { --pf-v6-l-flex--spacer: var(--pf-v6-l-flex--spacer--md); } .pf-v6-l-flex .pf-m-spacer-lg-on-xl { --pf-v6-l-flex--spacer: var(--pf-v6-l-flex--spacer--lg); } .pf-v6-l-flex .pf-m-spacer-lg-on-xl:last-child { --pf-v6-l-flex--spacer: var(--pf-v6-l-flex--spacer--lg); } .pf-v6-l-flex .pf-m-spacer-xl-on-xl { --pf-v6-l-flex--spacer: var(--pf-v6-l-flex--spacer--xl); } .pf-v6-l-flex .pf-m-spacer-xl-on-xl:last-child { --pf-v6-l-flex--spacer: var(--pf-v6-l-flex--spacer--xl); } .pf-v6-l-flex .pf-m-spacer-2xl-on-xl { --pf-v6-l-flex--spacer: var(--pf-v6-l-flex--spacer--2xl); } .pf-v6-l-flex .pf-m-spacer-2xl-on-xl:last-child { --pf-v6-l-flex--spacer: var(--pf-v6-l-flex--spacer--2xl); } .pf-v6-l-flex .pf-m-spacer-3xl-on-xl { --pf-v6-l-flex--spacer: var(--pf-v6-l-flex--spacer--3xl); } .pf-v6-l-flex .pf-m-spacer-3xl-on-xl:last-child { --pf-v6-l-flex--spacer: var(--pf-v6-l-flex--spacer--3xl); } .pf-v6-l-flex .pf-m-spacer-4xl-on-xl { --pf-v6-l-flex--spacer: var(--pf-v6-l-flex--spacer--4xl); } .pf-v6-l-flex .pf-m-spacer-4xl-on-xl:last-child { --pf-v6-l-flex--spacer: var(--pf-v6-l-flex--spacer--4xl); } } @media (min-width: 90.625rem) { .pf-v6-l-flex .pf-m-spacer-none-on-2xl { --pf-v6-l-flex--spacer: var(--pf-v6-l-flex--spacer--none); } .pf-v6-l-flex .pf-m-spacer-none-on-2xl:last-child { --pf-v6-l-flex--spacer: var(--pf-v6-l-flex--spacer--none); } .pf-v6-l-flex .pf-m-spacer-xs-on-2xl { --pf-v6-l-flex--spacer: var(--pf-v6-l-flex--spacer--xs); } .pf-v6-l-flex .pf-m-spacer-xs-on-2xl:last-child { --pf-v6-l-flex--spacer: var(--pf-v6-l-flex--spacer--xs); } .pf-v6-l-flex .pf-m-spacer-sm-on-2xl { --pf-v6-l-flex--spacer: var(--pf-v6-l-flex--spacer--sm); } .pf-v6-l-flex .pf-m-spacer-sm-on-2xl:last-child { --pf-v6-l-flex--spacer: var(--pf-v6-l-flex--spacer--sm); } .pf-v6-l-flex .pf-m-spacer-md-on-2xl { --pf-v6-l-flex--spacer: var(--pf-v6-l-flex--spacer--md); } .pf-v6-l-flex .pf-m-spacer-md-on-2xl:last-child { --pf-v6-l-flex--spacer: var(--pf-v6-l-flex--spacer--md); } .pf-v6-l-flex .pf-m-spacer-lg-on-2xl { --pf-v6-l-flex--spacer: var(--pf-v6-l-flex--spacer--lg); } .pf-v6-l-flex .pf-m-spacer-lg-on-2xl:last-child { --pf-v6-l-flex--spacer: var(--pf-v6-l-flex--spacer--lg); } .pf-v6-l-flex .pf-m-spacer-xl-on-2xl { --pf-v6-l-flex--spacer: var(--pf-v6-l-flex--spacer--xl); } .pf-v6-l-flex .pf-m-spacer-xl-on-2xl:last-child { --pf-v6-l-flex--spacer: var(--pf-v6-l-flex--spacer--xl); } .pf-v6-l-flex .pf-m-spacer-2xl-on-2xl { --pf-v6-l-flex--spacer: var(--pf-v6-l-flex--spacer--2xl); } .pf-v6-l-flex .pf-m-spacer-2xl-on-2xl:last-child { --pf-v6-l-flex--spacer: var(--pf-v6-l-flex--spacer--2xl); } .pf-v6-l-flex .pf-m-spacer-3xl-on-2xl { --pf-v6-l-flex--spacer: var(--pf-v6-l-flex--spacer--3xl); } .pf-v6-l-flex .pf-m-spacer-3xl-on-2xl:last-child { --pf-v6-l-flex--spacer: var(--pf-v6-l-flex--spacer--3xl); } .pf-v6-l-flex .pf-m-spacer-4xl-on-2xl { --pf-v6-l-flex--spacer: var(--pf-v6-l-flex--spacer--4xl); } .pf-v6-l-flex .pf-m-spacer-4xl-on-2xl:last-child { --pf-v6-l-flex--spacer: var(--pf-v6-l-flex--spacer--4xl); } } .pf-v6-l-flex.pf-m-gap { --pf-v6-l-flex--RowGap: var(--pf-v6-l-flex--m-gap--RowGap); --pf-v6-l-flex--ColumnGap: var(--pf-v6-l-flex--m-gap--ColumnGap); } .pf-v6-l-flex.pf-m-gap-none { --pf-v6-l-flex--RowGap: 0; --pf-v6-l-flex--ColumnGap: 0; } .pf-v6-l-flex.pf-m-gap-xs { --pf-v6-l-flex--RowGap: var(--pf-t--global--spacer--xs); --pf-v6-l-flex--ColumnGap: var(--pf-t--global--spacer--xs); } .pf-v6-l-flex.pf-m-gap-sm { --pf-v6-l-flex--RowGap: var(--pf-t--global--spacer--sm); --pf-v6-l-flex--ColumnGap: var(--pf-t--global--spacer--sm); } .pf-v6-l-flex.pf-m-gap-md { --pf-v6-l-flex--RowGap: var(--pf-t--global--spacer--md); --pf-v6-l-flex--ColumnGap: var(--pf-t--global--spacer--md); } .pf-v6-l-flex.pf-m-gap-lg { --pf-v6-l-flex--RowGap: var(--pf-t--global--spacer--lg); --pf-v6-l-flex--ColumnGap: var(--pf-t--global--spacer--lg); } .pf-v6-l-flex.pf-m-gap-xl { --pf-v6-l-flex--RowGap: var(--pf-t--global--spacer--xl); --pf-v6-l-flex--ColumnGap: var(--pf-t--global--spacer--xl); } .pf-v6-l-flex.pf-m-gap-2xl { --pf-v6-l-flex--RowGap: var(--pf-t--global--spacer--2xl); --pf-v6-l-flex--ColumnGap: var(--pf-t--global--spacer--2xl); } .pf-v6-l-flex.pf-m-gap-3xl { --pf-v6-l-flex--RowGap: var(--pf-t--global--spacer--3xl); --pf-v6-l-flex--ColumnGap: var(--pf-t--global--spacer--3xl); } .pf-v6-l-flex.pf-m-gap-4xl { --pf-v6-l-flex--RowGap: var(--pf-t--global--spacer--4xl); --pf-v6-l-flex--ColumnGap: var(--pf-t--global--spacer--4xl); } .pf-v6-l-flex:is(.pf-m-gap, .pf-m-gap-none, .pf-m-gap-xs, .pf-m-gap-sm, .pf-m-gap-md, .pf-m-gap-lg, .pf-m-gap-xl, .pf-m-gap-2xl, .pf-m-gap-3xl, .pf-m-gap-4xl) > * { --pf-v6-l-flex--spacer--row: 0; --pf-v6-l-flex--spacer--column: 0; } @media (min-width: 36rem) { .pf-v6-l-flex.pf-m-gap-on-sm { --pf-v6-l-flex--RowGap: var(--pf-v6-l-flex--m-gap--RowGap); --pf-v6-l-flex--ColumnGap: var(--pf-v6-l-flex--m-gap--ColumnGap); } .pf-v6-l-flex.pf-m-gap-none-on-sm { --pf-v6-l-flex--RowGap: 0; --pf-v6-l-flex--ColumnGap: 0; } .pf-v6-l-flex.pf-m-gap-xs-on-sm { --pf-v6-l-flex--RowGap: var(--pf-t--global--spacer--xs); --pf-v6-l-flex--ColumnGap: var(--pf-t--global--spacer--xs); } .pf-v6-l-flex.pf-m-gap-sm-on-sm { --pf-v6-l-flex--RowGap: var(--pf-t--global--spacer--sm); --pf-v6-l-flex--ColumnGap: var(--pf-t--global--spacer--sm); } .pf-v6-l-flex.pf-m-gap-md-on-sm { --pf-v6-l-flex--RowGap: var(--pf-t--global--spacer--md); --pf-v6-l-flex--ColumnGap: var(--pf-t--global--spacer--md); } .pf-v6-l-flex.pf-m-gap-lg-on-sm { --pf-v6-l-flex--RowGap: var(--pf-t--global--spacer--lg); --pf-v6-l-flex--ColumnGap: var(--pf-t--global--spacer--lg); } .pf-v6-l-flex.pf-m-gap-xl-on-sm { --pf-v6-l-flex--RowGap: var(--pf-t--global--spacer--xl); --pf-v6-l-flex--ColumnGap: var(--pf-t--global--spacer--xl); } .pf-v6-l-flex.pf-m-gap-2xl-on-sm { --pf-v6-l-flex--RowGap: var(--pf-t--global--spacer--2xl); --pf-v6-l-flex--ColumnGap: var(--pf-t--global--spacer--2xl); } .pf-v6-l-flex.pf-m-gap-3xl-on-sm { --pf-v6-l-flex--RowGap: var(--pf-t--global--spacer--3xl); --pf-v6-l-flex--ColumnGap: var(--pf-t--global--spacer--3xl); } .pf-v6-l-flex.pf-m-gap-4xl-on-sm { --pf-v6-l-flex--RowGap: var(--pf-t--global--spacer--4xl); --pf-v6-l-flex--ColumnGap: var(--pf-t--global--spacer--4xl); } .pf-v6-l-flex:is(.pf-m-gap-on-sm, .pf-m-gap-none-on-sm, .pf-m-gap-xs-on-sm, .pf-m-gap-sm-on-sm, .pf-m-gap-md-on-sm, .pf-m-gap-lg-on-sm, .pf-m-gap-xl-on-sm, .pf-m-gap-2xl-on-sm, .pf-m-gap-3xl-on-sm, .pf-m-gap-4xl-on-sm) > * { --pf-v6-l-flex--spacer--row: 0; --pf-v6-l-flex--spacer--column: 0; } } @media (min-width: 48rem) { .pf-v6-l-flex.pf-m-gap-on-md { --pf-v6-l-flex--RowGap: var(--pf-v6-l-flex--m-gap--RowGap); --pf-v6-l-flex--ColumnGap: var(--pf-v6-l-flex--m-gap--ColumnGap); } .pf-v6-l-flex.pf-m-gap-none-on-md { --pf-v6-l-flex--RowGap: 0; --pf-v6-l-flex--ColumnGap: 0; } .pf-v6-l-flex.pf-m-gap-xs-on-md { --pf-v6-l-flex--RowGap: var(--pf-t--global--spacer--xs); --pf-v6-l-flex--ColumnGap: var(--pf-t--global--spacer--xs); } .pf-v6-l-flex.pf-m-gap-sm-on-md { --pf-v6-l-flex--RowGap: var(--pf-t--global--spacer--sm); --pf-v6-l-flex--ColumnGap: var(--pf-t--global--spacer--sm); } .pf-v6-l-flex.pf-m-gap-md-on-md { --pf-v6-l-flex--RowGap: var(--pf-t--global--spacer--md); --pf-v6-l-flex--ColumnGap: var(--pf-t--global--spacer--md); } .pf-v6-l-flex.pf-m-gap-lg-on-md { --pf-v6-l-flex--RowGap: var(--pf-t--global--spacer--lg); --pf-v6-l-flex--ColumnGap: var(--pf-t--global--spacer--lg); } .pf-v6-l-flex.pf-m-gap-xl-on-md { --pf-v6-l-flex--RowGap: var(--pf-t--global--spacer--xl); --pf-v6-l-flex--ColumnGap: var(--pf-t--global--spacer--xl); } .pf-v6-l-flex.pf-m-gap-2xl-on-md { --pf-v6-l-flex--RowGap: var(--pf-t--global--spacer--2xl); --pf-v6-l-flex--ColumnGap: var(--pf-t--global--spacer--2xl); } .pf-v6-l-flex.pf-m-gap-3xl-on-md { --pf-v6-l-flex--RowGap: var(--pf-t--global--spacer--3xl); --pf-v6-l-flex--ColumnGap: var(--pf-t--global--spacer--3xl); } .pf-v6-l-flex.pf-m-gap-4xl-on-md { --pf-v6-l-flex--RowGap: var(--pf-t--global--spacer--4xl); --pf-v6-l-flex--ColumnGap: var(--pf-t--global--spacer--4xl); } .pf-v6-l-flex:is(.pf-m-gap-on-md, .pf-m-gap-none-on-md, .pf-m-gap-xs-on-md, .pf-m-gap-sm-on-md, .pf-m-gap-md-on-md, .pf-m-gap-lg-on-md, .pf-m-gap-xl-on-md, .pf-m-gap-2xl-on-md, .pf-m-gap-3xl-on-md, .pf-m-gap-4xl-on-md) > * { --pf-v6-l-flex--spacer--row: 0; --pf-v6-l-flex--spacer--column: 0; } } @media (min-width: 62rem) { .pf-v6-l-flex.pf-m-gap-on-lg { --pf-v6-l-flex--RowGap: var(--pf-v6-l-flex--m-gap--RowGap); --pf-v6-l-flex--ColumnGap: var(--pf-v6-l-flex--m-gap--ColumnGap); } .pf-v6-l-flex.pf-m-gap-none-on-lg { --pf-v6-l-flex--RowGap: 0; --pf-v6-l-flex--ColumnGap: 0; } .pf-v6-l-flex.pf-m-gap-xs-on-lg { --pf-v6-l-flex--RowGap: var(--pf-t--global--spacer--xs); --pf-v6-l-flex--ColumnGap: var(--pf-t--global--spacer--xs); } .pf-v6-l-flex.pf-m-gap-sm-on-lg { --pf-v6-l-flex--RowGap: var(--pf-t--global--spacer--sm); --pf-v6-l-flex--ColumnGap: var(--pf-t--global--spacer--sm); } .pf-v6-l-flex.pf-m-gap-md-on-lg { --pf-v6-l-flex--RowGap: var(--pf-t--global--spacer--md); --pf-v6-l-flex--ColumnGap: var(--pf-t--global--spacer--md); } .pf-v6-l-flex.pf-m-gap-lg-on-lg { --pf-v6-l-flex--RowGap: var(--pf-t--global--spacer--lg); --pf-v6-l-flex--ColumnGap: var(--pf-t--global--spacer--lg); } .pf-v6-l-flex.pf-m-gap-xl-on-lg { --pf-v6-l-flex--RowGap: var(--pf-t--global--spacer--xl); --pf-v6-l-flex--ColumnGap: var(--pf-t--global--spacer--xl); } .pf-v6-l-flex.pf-m-gap-2xl-on-lg { --pf-v6-l-flex--RowGap: var(--pf-t--global--spacer--2xl); --pf-v6-l-flex--ColumnGap: var(--pf-t--global--spacer--2xl); } .pf-v6-l-flex.pf-m-gap-3xl-on-lg { --pf-v6-l-flex--RowGap: var(--pf-t--global--spacer--3xl); --pf-v6-l-flex--ColumnGap: var(--pf-t--global--spacer--3xl); } .pf-v6-l-flex.pf-m-gap-4xl-on-lg { --pf-v6-l-flex--RowGap: var(--pf-t--global--spacer--4xl); --pf-v6-l-flex--ColumnGap: var(--pf-t--global--spacer--4xl); } .pf-v6-l-flex:is(.pf-m-gap-on-lg, .pf-m-gap-none-on-lg, .pf-m-gap-xs-on-lg, .pf-m-gap-sm-on-lg, .pf-m-gap-md-on-lg, .pf-m-gap-lg-on-lg, .pf-m-gap-xl-on-lg, .pf-m-gap-2xl-on-lg, .pf-m-gap-3xl-on-lg, .pf-m-gap-4xl-on-lg) > * { --pf-v6-l-flex--spacer--row: 0; --pf-v6-l-flex--spacer--column: 0; } } @media (min-width: 75rem) { .pf-v6-l-flex.pf-m-gap-on-xl { --pf-v6-l-flex--RowGap: var(--pf-v6-l-flex--m-gap--RowGap); --pf-v6-l-flex--ColumnGap: var(--pf-v6-l-flex--m-gap--ColumnGap); } .pf-v6-l-flex.pf-m-gap-none-on-xl { --pf-v6-l-flex--RowGap: 0; --pf-v6-l-flex--ColumnGap: 0; } .pf-v6-l-flex.pf-m-gap-xs-on-xl { --pf-v6-l-flex--RowGap: var(--pf-t--global--spacer--xs); --pf-v6-l-flex--ColumnGap: var(--pf-t--global--spacer--xs); } .pf-v6-l-flex.pf-m-gap-sm-on-xl { --pf-v6-l-flex--RowGap: var(--pf-t--global--spacer--sm); --pf-v6-l-flex--ColumnGap: var(--pf-t--global--spacer--sm); } .pf-v6-l-flex.pf-m-gap-md-on-xl { --pf-v6-l-flex--RowGap: var(--pf-t--global--spacer--md); --pf-v6-l-flex--ColumnGap: var(--pf-t--global--spacer--md); } .pf-v6-l-flex.pf-m-gap-lg-on-xl { --pf-v6-l-flex--RowGap: var(--pf-t--global--spacer--lg); --pf-v6-l-flex--ColumnGap: var(--pf-t--global--spacer--lg); } .pf-v6-l-flex.pf-m-gap-xl-on-xl { --pf-v6-l-flex--RowGap: var(--pf-t--global--spacer--xl); --pf-v6-l-flex--ColumnGap: var(--pf-t--global--spacer--xl); } .pf-v6-l-flex.pf-m-gap-2xl-on-xl { --pf-v6-l-flex--RowGap: var(--pf-t--global--spacer--2xl); --pf-v6-l-flex--ColumnGap: var(--pf-t--global--spacer--2xl); } .pf-v6-l-flex.pf-m-gap-3xl-on-xl { --pf-v6-l-flex--RowGap: var(--pf-t--global--spacer--3xl); --pf-v6-l-flex--ColumnGap: var(--pf-t--global--spacer--3xl); } .pf-v6-l-flex.pf-m-gap-4xl-on-xl { --pf-v6-l-flex--RowGap: var(--pf-t--global--spacer--4xl); --pf-v6-l-flex--ColumnGap: var(--pf-t--global--spacer--4xl); } .pf-v6-l-flex:is(.pf-m-gap-on-xl, .pf-m-gap-none-on-xl, .pf-m-gap-xs-on-xl, .pf-m-gap-sm-on-xl, .pf-m-gap-md-on-xl, .pf-m-gap-lg-on-xl, .pf-m-gap-xl-on-xl, .pf-m-gap-2xl-on-xl, .pf-m-gap-3xl-on-xl, .pf-m-gap-4xl-on-xl) > * { --pf-v6-l-flex--spacer--row: 0; --pf-v6-l-flex--spacer--column: 0; } } @media (min-width: 90.625rem) { .pf-v6-l-flex.pf-m-gap-on-2xl { --pf-v6-l-flex--RowGap: var(--pf-v6-l-flex--m-gap--RowGap); --pf-v6-l-flex--ColumnGap: var(--pf-v6-l-flex--m-gap--ColumnGap); } .pf-v6-l-flex.pf-m-gap-none-on-2xl { --pf-v6-l-flex--RowGap: 0; --pf-v6-l-flex--ColumnGap: 0; } .pf-v6-l-flex.pf-m-gap-xs-on-2xl { --pf-v6-l-flex--RowGap: var(--pf-t--global--spacer--xs); --pf-v6-l-flex--ColumnGap: var(--pf-t--global--spacer--xs); } .pf-v6-l-flex.pf-m-gap-sm-on-2xl { --pf-v6-l-flex--RowGap: var(--pf-t--global--spacer--sm); --pf-v6-l-flex--ColumnGap: var(--pf-t--global--spacer--sm); } .pf-v6-l-flex.pf-m-gap-md-on-2xl { --pf-v6-l-flex--RowGap: var(--pf-t--global--spacer--md); --pf-v6-l-flex--ColumnGap: var(--pf-t--global--spacer--md); } .pf-v6-l-flex.pf-m-gap-lg-on-2xl { --pf-v6-l-flex--RowGap: var(--pf-t--global--spacer--lg); --pf-v6-l-flex--ColumnGap: var(--pf-t--global--spacer--lg); } .pf-v6-l-flex.pf-m-gap-xl-on-2xl { --pf-v6-l-flex--RowGap: var(--pf-t--global--spacer--xl); --pf-v6-l-flex--ColumnGap: var(--pf-t--global--spacer--xl); } .pf-v6-l-flex.pf-m-gap-2xl-on-2xl { --pf-v6-l-flex--RowGap: var(--pf-t--global--spacer--2xl); --pf-v6-l-flex--ColumnGap: var(--pf-t--global--spacer--2xl); } .pf-v6-l-flex.pf-m-gap-3xl-on-2xl { --pf-v6-l-flex--RowGap: var(--pf-t--global--spacer--3xl); --pf-v6-l-flex--ColumnGap: var(--pf-t--global--spacer--3xl); } .pf-v6-l-flex.pf-m-gap-4xl-on-2xl { --pf-v6-l-flex--RowGap: var(--pf-t--global--spacer--4xl); --pf-v6-l-flex--ColumnGap: var(--pf-t--global--spacer--4xl); } .pf-v6-l-flex:is(.pf-m-gap-on-2xl, .pf-m-gap-none-on-2xl, .pf-m-gap-xs-on-2xl, .pf-m-gap-sm-on-2xl, .pf-m-gap-md-on-2xl, .pf-m-gap-lg-on-2xl, .pf-m-gap-xl-on-2xl, .pf-m-gap-2xl-on-2xl, .pf-m-gap-3xl-on-2xl, .pf-m-gap-4xl-on-2xl) > * { --pf-v6-l-flex--spacer--row: 0; --pf-v6-l-flex--spacer--column: 0; } } .pf-v6-l-flex.pf-m-row-gap { --pf-v6-l-flex--RowGap: var(--pf-v6-l-flex--m-row-gap--RowGap); } .pf-v6-l-flex.pf-m-row-gap-none { --pf-v6-l-flex--RowGap: 0; } .pf-v6-l-flex.pf-m-row-gap-xs { --pf-v6-l-flex--RowGap: var(--pf-t--global--spacer--xs); } .pf-v6-l-flex.pf-m-row-gap-sm { --pf-v6-l-flex--RowGap: var(--pf-t--global--spacer--sm); } .pf-v6-l-flex.pf-m-row-gap-md { --pf-v6-l-flex--RowGap: var(--pf-t--global--spacer--md); } .pf-v6-l-flex.pf-m-row-gap-lg { --pf-v6-l-flex--RowGap: var(--pf-t--global--spacer--lg); } .pf-v6-l-flex.pf-m-row-gap-xl { --pf-v6-l-flex--RowGap: var(--pf-t--global--spacer--xl); } .pf-v6-l-flex.pf-m-row-gap-2xl { --pf-v6-l-flex--RowGap: var(--pf-t--global--spacer--2xl); } .pf-v6-l-flex.pf-m-row-gap-3xl { --pf-v6-l-flex--RowGap: var(--pf-t--global--spacer--3xl); } .pf-v6-l-flex.pf-m-row-gap-4xl { --pf-v6-l-flex--RowGap: var(--pf-t--global--spacer--4xl); } .pf-v6-l-flex:is(.pf-m-row-gap, .pf-m-row-gap-none, .pf-m-row-gap-xs, .pf-m-row-gap-sm, .pf-m-row-gap-md, .pf-m-row-gap-lg, .pf-m-row-gap-xl, .pf-m-row-gap-2xl, .pf-m-row-gap-3xl, .pf-m-row-gap-4xl) > * { --pf-v6-l-flex--spacer--row: 0; } @media (min-width: 36rem) { .pf-v6-l-flex.pf-m-row-gap-on-sm { --pf-v6-l-flex--RowGap: var(--pf-v6-l-flex--m-row-gap--RowGap); } .pf-v6-l-flex.pf-m-row-gap-none-on-sm { --pf-v6-l-flex--RowGap: 0; } .pf-v6-l-flex.pf-m-row-gap-xs-on-sm { --pf-v6-l-flex--RowGap: var(--pf-t--global--spacer--xs); } .pf-v6-l-flex.pf-m-row-gap-sm-on-sm { --pf-v6-l-flex--RowGap: var(--pf-t--global--spacer--sm); } .pf-v6-l-flex.pf-m-row-gap-md-on-sm { --pf-v6-l-flex--RowGap: var(--pf-t--global--spacer--md); } .pf-v6-l-flex.pf-m-row-gap-lg-on-sm { --pf-v6-l-flex--RowGap: var(--pf-t--global--spacer--lg); } .pf-v6-l-flex.pf-m-row-gap-xl-on-sm { --pf-v6-l-flex--RowGap: var(--pf-t--global--spacer--xl); } .pf-v6-l-flex.pf-m-row-gap-2xl-on-sm { --pf-v6-l-flex--RowGap: var(--pf-t--global--spacer--2xl); } .pf-v6-l-flex.pf-m-row-gap-3xl-on-sm { --pf-v6-l-flex--RowGap: var(--pf-t--global--spacer--3xl); } .pf-v6-l-flex.pf-m-row-gap-4xl-on-sm { --pf-v6-l-flex--RowGap: var(--pf-t--global--spacer--4xl); } .pf-v6-l-flex:is(.pf-m-row-gap-on-sm, .pf-m-row-gap-none-on-sm, .pf-m-row-gap-xs-on-sm, .pf-m-row-gap-sm-on-sm, .pf-m-row-gap-md-on-sm, .pf-m-row-gap-lg-on-sm, .pf-m-row-gap-xl-on-sm, .pf-m-row-gap-2xl-on-sm, .pf-m-row-gap-3xl-on-sm, .pf-m-row-gap-4xl-on-sm) > * { --pf-v6-l-flex--spacer--row: 0; } } @media (min-width: 48rem) { .pf-v6-l-flex.pf-m-row-gap-on-md { --pf-v6-l-flex--RowGap: var(--pf-v6-l-flex--m-row-gap--RowGap); } .pf-v6-l-flex.pf-m-row-gap-none-on-md { --pf-v6-l-flex--RowGap: 0; } .pf-v6-l-flex.pf-m-row-gap-xs-on-md { --pf-v6-l-flex--RowGap: var(--pf-t--global--spacer--xs); } .pf-v6-l-flex.pf-m-row-gap-sm-on-md { --pf-v6-l-flex--RowGap: var(--pf-t--global--spacer--sm); } .pf-v6-l-flex.pf-m-row-gap-md-on-md { --pf-v6-l-flex--RowGap: var(--pf-t--global--spacer--md); } .pf-v6-l-flex.pf-m-row-gap-lg-on-md { --pf-v6-l-flex--RowGap: var(--pf-t--global--spacer--lg); } .pf-v6-l-flex.pf-m-row-gap-xl-on-md { --pf-v6-l-flex--RowGap: var(--pf-t--global--spacer--xl); } .pf-v6-l-flex.pf-m-row-gap-2xl-on-md { --pf-v6-l-flex--RowGap: var(--pf-t--global--spacer--2xl); } .pf-v6-l-flex.pf-m-row-gap-3xl-on-md { --pf-v6-l-flex--RowGap: var(--pf-t--global--spacer--3xl); } .pf-v6-l-flex.pf-m-row-gap-4xl-on-md { --pf-v6-l-flex--RowGap: var(--pf-t--global--spacer--4xl); } .pf-v6-l-flex:is(.pf-m-row-gap-on-md, .pf-m-row-gap-none-on-md, .pf-m-row-gap-xs-on-md, .pf-m-row-gap-sm-on-md, .pf-m-row-gap-md-on-md, .pf-m-row-gap-lg-on-md, .pf-m-row-gap-xl-on-md, .pf-m-row-gap-2xl-on-md, .pf-m-row-gap-3xl-on-md, .pf-m-row-gap-4xl-on-md) > * { --pf-v6-l-flex--spacer--row: 0; } } @media (min-width: 62rem) { .pf-v6-l-flex.pf-m-row-gap-on-lg { --pf-v6-l-flex--RowGap: var(--pf-v6-l-flex--m-row-gap--RowGap); } .pf-v6-l-flex.pf-m-row-gap-none-on-lg { --pf-v6-l-flex--RowGap: 0; } .pf-v6-l-flex.pf-m-row-gap-xs-on-lg { --pf-v6-l-flex--RowGap: var(--pf-t--global--spacer--xs); } .pf-v6-l-flex.pf-m-row-gap-sm-on-lg { --pf-v6-l-flex--RowGap: var(--pf-t--global--spacer--sm); } .pf-v6-l-flex.pf-m-row-gap-md-on-lg { --pf-v6-l-flex--RowGap: var(--pf-t--global--spacer--md); } .pf-v6-l-flex.pf-m-row-gap-lg-on-lg { --pf-v6-l-flex--RowGap: var(--pf-t--global--spacer--lg); } .pf-v6-l-flex.pf-m-row-gap-xl-on-lg { --pf-v6-l-flex--RowGap: var(--pf-t--global--spacer--xl); } .pf-v6-l-flex.pf-m-row-gap-2xl-on-lg { --pf-v6-l-flex--RowGap: var(--pf-t--global--spacer--2xl); } .pf-v6-l-flex.pf-m-row-gap-3xl-on-lg { --pf-v6-l-flex--RowGap: var(--pf-t--global--spacer--3xl); } .pf-v6-l-flex.pf-m-row-gap-4xl-on-lg { --pf-v6-l-flex--RowGap: var(--pf-t--global--spacer--4xl); } .pf-v6-l-flex:is(.pf-m-row-gap-on-lg, .pf-m-row-gap-none-on-lg, .pf-m-row-gap-xs-on-lg, .pf-m-row-gap-sm-on-lg, .pf-m-row-gap-md-on-lg, .pf-m-row-gap-lg-on-lg, .pf-m-row-gap-xl-on-lg, .pf-m-row-gap-2xl-on-lg, .pf-m-row-gap-3xl-on-lg, .pf-m-row-gap-4xl-on-lg) > * { --pf-v6-l-flex--spacer--row: 0; } } @media (min-width: 75rem) { .pf-v6-l-flex.pf-m-row-gap-on-xl { --pf-v6-l-flex--RowGap: var(--pf-v6-l-flex--m-row-gap--RowGap); } .pf-v6-l-flex.pf-m-row-gap-none-on-xl { --pf-v6-l-flex--RowGap: 0; } .pf-v6-l-flex.pf-m-row-gap-xs-on-xl { --pf-v6-l-flex--RowGap: var(--pf-t--global--spacer--xs); } .pf-v6-l-flex.pf-m-row-gap-sm-on-xl { --pf-v6-l-flex--RowGap: var(--pf-t--global--spacer--sm); } .pf-v6-l-flex.pf-m-row-gap-md-on-xl { --pf-v6-l-flex--RowGap: var(--pf-t--global--spacer--md); } .pf-v6-l-flex.pf-m-row-gap-lg-on-xl { --pf-v6-l-flex--RowGap: var(--pf-t--global--spacer--lg); } .pf-v6-l-flex.pf-m-row-gap-xl-on-xl { --pf-v6-l-flex--RowGap: var(--pf-t--global--spacer--xl); } .pf-v6-l-flex.pf-m-row-gap-2xl-on-xl { --pf-v6-l-flex--RowGap: var(--pf-t--global--spacer--2xl); } .pf-v6-l-flex.pf-m-row-gap-3xl-on-xl { --pf-v6-l-flex--RowGap: var(--pf-t--global--spacer--3xl); } .pf-v6-l-flex.pf-m-row-gap-4xl-on-xl { --pf-v6-l-flex--RowGap: var(--pf-t--global--spacer--4xl); } .pf-v6-l-flex:is(.pf-m-row-gap-on-xl, .pf-m-row-gap-none-on-xl, .pf-m-row-gap-xs-on-xl, .pf-m-row-gap-sm-on-xl, .pf-m-row-gap-md-on-xl, .pf-m-row-gap-lg-on-xl, .pf-m-row-gap-xl-on-xl, .pf-m-row-gap-2xl-on-xl, .pf-m-row-gap-3xl-on-xl, .pf-m-row-gap-4xl-on-xl) > * { --pf-v6-l-flex--spacer--row: 0; } } @media (min-width: 90.625rem) { .pf-v6-l-flex.pf-m-row-gap-on-2xl { --pf-v6-l-flex--RowGap: var(--pf-v6-l-flex--m-row-gap--RowGap); } .pf-v6-l-flex.pf-m-row-gap-none-on-2xl { --pf-v6-l-flex--RowGap: 0; } .pf-v6-l-flex.pf-m-row-gap-xs-on-2xl { --pf-v6-l-flex--RowGap: var(--pf-t--global--spacer--xs); } .pf-v6-l-flex.pf-m-row-gap-sm-on-2xl { --pf-v6-l-flex--RowGap: var(--pf-t--global--spacer--sm); } .pf-v6-l-flex.pf-m-row-gap-md-on-2xl { --pf-v6-l-flex--RowGap: var(--pf-t--global--spacer--md); } .pf-v6-l-flex.pf-m-row-gap-lg-on-2xl { --pf-v6-l-flex--RowGap: var(--pf-t--global--spacer--lg); } .pf-v6-l-flex.pf-m-row-gap-xl-on-2xl { --pf-v6-l-flex--RowGap: var(--pf-t--global--spacer--xl); } .pf-v6-l-flex.pf-m-row-gap-2xl-on-2xl { --pf-v6-l-flex--RowGap: var(--pf-t--global--spacer--2xl); } .pf-v6-l-flex.pf-m-row-gap-3xl-on-2xl { --pf-v6-l-flex--RowGap: var(--pf-t--global--spacer--3xl); } .pf-v6-l-flex.pf-m-row-gap-4xl-on-2xl { --pf-v6-l-flex--RowGap: var(--pf-t--global--spacer--4xl); } .pf-v6-l-flex:is(.pf-m-row-gap-on-2xl, .pf-m-row-gap-none-on-2xl, .pf-m-row-gap-xs-on-2xl, .pf-m-row-gap-sm-on-2xl, .pf-m-row-gap-md-on-2xl, .pf-m-row-gap-lg-on-2xl, .pf-m-row-gap-xl-on-2xl, .pf-m-row-gap-2xl-on-2xl, .pf-m-row-gap-3xl-on-2xl, .pf-m-row-gap-4xl-on-2xl) > * { --pf-v6-l-flex--spacer--row: 0; } } .pf-v6-l-flex.pf-m-column-gap { --pf-v6-l-flex--ColumnGap: var(--pf-v6-l-flex--m-column-gap--ColumnGap); } .pf-v6-l-flex.pf-m-column-gap-none { --pf-v6-l-flex--ColumnGap: 0; } .pf-v6-l-flex.pf-m-column-gap-xs { --pf-v6-l-flex--ColumnGap: var(--pf-t--global--spacer--xs); } .pf-v6-l-flex.pf-m-column-gap-sm { --pf-v6-l-flex--ColumnGap: var(--pf-t--global--spacer--sm); } .pf-v6-l-flex.pf-m-column-gap-md { --pf-v6-l-flex--ColumnGap: var(--pf-t--global--spacer--md); } .pf-v6-l-flex.pf-m-column-gap-lg { --pf-v6-l-flex--ColumnGap: var(--pf-t--global--spacer--lg); } .pf-v6-l-flex.pf-m-column-gap-xl { --pf-v6-l-flex--ColumnGap: var(--pf-t--global--spacer--xl); } .pf-v6-l-flex.pf-m-column-gap-2xl { --pf-v6-l-flex--ColumnGap: var(--pf-t--global--spacer--2xl); } .pf-v6-l-flex.pf-m-column-gap-3xl { --pf-v6-l-flex--ColumnGap: var(--pf-t--global--spacer--3xl); } .pf-v6-l-flex.pf-m-column-gap-4xl { --pf-v6-l-flex--ColumnGap: var(--pf-t--global--spacer--4xl); } .pf-v6-l-flex:is(.pf-m-column-gap, .pf-m-column-gap-none, .pf-m-column-gap-xs, .pf-m-column-gap-sm, .pf-m-column-gap-md, .pf-m-column-gap-lg, .pf-m-column-gap-xl, .pf-m-column-gap-2xl, .pf-m-column-gap-3xl, .pf-m-column-gap-4xl) > * { --pf-v6-l-flex--spacer--column: 0; } @media (min-width: 36rem) { .pf-v6-l-flex.pf-m-column-gap-on-sm { --pf-v6-l-flex--ColumnGap: var(--pf-v6-l-flex--m-column-gap--ColumnGap); } .pf-v6-l-flex.pf-m-column-gap-none-on-sm { --pf-v6-l-flex--ColumnGap: 0; } .pf-v6-l-flex.pf-m-column-gap-xs-on-sm { --pf-v6-l-flex--ColumnGap: var(--pf-t--global--spacer--xs); } .pf-v6-l-flex.pf-m-column-gap-sm-on-sm { --pf-v6-l-flex--ColumnGap: var(--pf-t--global--spacer--sm); } .pf-v6-l-flex.pf-m-column-gap-md-on-sm { --pf-v6-l-flex--ColumnGap: var(--pf-t--global--spacer--md); } .pf-v6-l-flex.pf-m-column-gap-lg-on-sm { --pf-v6-l-flex--ColumnGap: var(--pf-t--global--spacer--lg); } .pf-v6-l-flex.pf-m-column-gap-xl-on-sm { --pf-v6-l-flex--ColumnGap: var(--pf-t--global--spacer--xl); } .pf-v6-l-flex.pf-m-column-gap-2xl-on-sm { --pf-v6-l-flex--ColumnGap: var(--pf-t--global--spacer--2xl); } .pf-v6-l-flex.pf-m-column-gap-3xl-on-sm { --pf-v6-l-flex--ColumnGap: var(--pf-t--global--spacer--3xl); } .pf-v6-l-flex.pf-m-column-gap-4xl-on-sm { --pf-v6-l-flex--ColumnGap: var(--pf-t--global--spacer--4xl); } .pf-v6-l-flex:is(.pf-m-column-gap-on-sm, .pf-m-column-gap-none-on-sm, .pf-m-column-gap-xs-on-sm, .pf-m-column-gap-sm-on-sm, .pf-m-column-gap-md-on-sm, .pf-m-column-gap-lg-on-sm, .pf-m-column-gap-xl-on-sm, .pf-m-column-gap-2xl-on-sm, .pf-m-column-gap-3xl-on-sm, .pf-m-column-gap-4xl-on-sm) > * { --pf-v6-l-flex--spacer--column: 0; } } @media (min-width: 48rem) { .pf-v6-l-flex.pf-m-column-gap-on-md { --pf-v6-l-flex--ColumnGap: var(--pf-v6-l-flex--m-column-gap--ColumnGap); } .pf-v6-l-flex.pf-m-column-gap-none-on-md { --pf-v6-l-flex--ColumnGap: 0; } .pf-v6-l-flex.pf-m-column-gap-xs-on-md { --pf-v6-l-flex--ColumnGap: var(--pf-t--global--spacer--xs); } .pf-v6-l-flex.pf-m-column-gap-sm-on-md { --pf-v6-l-flex--ColumnGap: var(--pf-t--global--spacer--sm); } .pf-v6-l-flex.pf-m-column-gap-md-on-md { --pf-v6-l-flex--ColumnGap: var(--pf-t--global--spacer--md); } .pf-v6-l-flex.pf-m-column-gap-lg-on-md { --pf-v6-l-flex--ColumnGap: var(--pf-t--global--spacer--lg); } .pf-v6-l-flex.pf-m-column-gap-xl-on-md { --pf-v6-l-flex--ColumnGap: var(--pf-t--global--spacer--xl); } .pf-v6-l-flex.pf-m-column-gap-2xl-on-md { --pf-v6-l-flex--ColumnGap: var(--pf-t--global--spacer--2xl); } .pf-v6-l-flex.pf-m-column-gap-3xl-on-md { --pf-v6-l-flex--ColumnGap: var(--pf-t--global--spacer--3xl); } .pf-v6-l-flex.pf-m-column-gap-4xl-on-md { --pf-v6-l-flex--ColumnGap: var(--pf-t--global--spacer--4xl); } .pf-v6-l-flex:is(.pf-m-column-gap-on-md, .pf-m-column-gap-none-on-md, .pf-m-column-gap-xs-on-md, .pf-m-column-gap-sm-on-md, .pf-m-column-gap-md-on-md, .pf-m-column-gap-lg-on-md, .pf-m-column-gap-xl-on-md, .pf-m-column-gap-2xl-on-md, .pf-m-column-gap-3xl-on-md, .pf-m-column-gap-4xl-on-md) > * { --pf-v6-l-flex--spacer--column: 0; } } @media (min-width: 62rem) { .pf-v6-l-flex.pf-m-column-gap-on-lg { --pf-v6-l-flex--ColumnGap: var(--pf-v6-l-flex--m-column-gap--ColumnGap); } .pf-v6-l-flex.pf-m-column-gap-none-on-lg { --pf-v6-l-flex--ColumnGap: 0; } .pf-v6-l-flex.pf-m-column-gap-xs-on-lg { --pf-v6-l-flex--ColumnGap: var(--pf-t--global--spacer--xs); } .pf-v6-l-flex.pf-m-column-gap-sm-on-lg { --pf-v6-l-flex--ColumnGap: var(--pf-t--global--spacer--sm); } .pf-v6-l-flex.pf-m-column-gap-md-on-lg { --pf-v6-l-flex--ColumnGap: var(--pf-t--global--spacer--md); } .pf-v6-l-flex.pf-m-column-gap-lg-on-lg { --pf-v6-l-flex--ColumnGap: var(--pf-t--global--spacer--lg); } .pf-v6-l-flex.pf-m-column-gap-xl-on-lg { --pf-v6-l-flex--ColumnGap: var(--pf-t--global--spacer--xl); } .pf-v6-l-flex.pf-m-column-gap-2xl-on-lg { --pf-v6-l-flex--ColumnGap: var(--pf-t--global--spacer--2xl); } .pf-v6-l-flex.pf-m-column-gap-3xl-on-lg { --pf-v6-l-flex--ColumnGap: var(--pf-t--global--spacer--3xl); } .pf-v6-l-flex.pf-m-column-gap-4xl-on-lg { --pf-v6-l-flex--ColumnGap: var(--pf-t--global--spacer--4xl); } .pf-v6-l-flex:is(.pf-m-column-gap-on-lg, .pf-m-column-gap-none-on-lg, .pf-m-column-gap-xs-on-lg, .pf-m-column-gap-sm-on-lg, .pf-m-column-gap-md-on-lg, .pf-m-column-gap-lg-on-lg, .pf-m-column-gap-xl-on-lg, .pf-m-column-gap-2xl-on-lg, .pf-m-column-gap-3xl-on-lg, .pf-m-column-gap-4xl-on-lg) > * { --pf-v6-l-flex--spacer--column: 0; } } @media (min-width: 75rem) { .pf-v6-l-flex.pf-m-column-gap-on-xl { --pf-v6-l-flex--ColumnGap: var(--pf-v6-l-flex--m-column-gap--ColumnGap); } .pf-v6-l-flex.pf-m-column-gap-none-on-xl { --pf-v6-l-flex--ColumnGap: 0; } .pf-v6-l-flex.pf-m-column-gap-xs-on-xl { --pf-v6-l-flex--ColumnGap: var(--pf-t--global--spacer--xs); } .pf-v6-l-flex.pf-m-column-gap-sm-on-xl { --pf-v6-l-flex--ColumnGap: var(--pf-t--global--spacer--sm); } .pf-v6-l-flex.pf-m-column-gap-md-on-xl { --pf-v6-l-flex--ColumnGap: var(--pf-t--global--spacer--md); } .pf-v6-l-flex.pf-m-column-gap-lg-on-xl { --pf-v6-l-flex--ColumnGap: var(--pf-t--global--spacer--lg); } .pf-v6-l-flex.pf-m-column-gap-xl-on-xl { --pf-v6-l-flex--ColumnGap: var(--pf-t--global--spacer--xl); } .pf-v6-l-flex.pf-m-column-gap-2xl-on-xl { --pf-v6-l-flex--ColumnGap: var(--pf-t--global--spacer--2xl); } .pf-v6-l-flex.pf-m-column-gap-3xl-on-xl { --pf-v6-l-flex--ColumnGap: var(--pf-t--global--spacer--3xl); } .pf-v6-l-flex.pf-m-column-gap-4xl-on-xl { --pf-v6-l-flex--ColumnGap: var(--pf-t--global--spacer--4xl); } .pf-v6-l-flex:is(.pf-m-column-gap-on-xl, .pf-m-column-gap-none-on-xl, .pf-m-column-gap-xs-on-xl, .pf-m-column-gap-sm-on-xl, .pf-m-column-gap-md-on-xl, .pf-m-column-gap-lg-on-xl, .pf-m-column-gap-xl-on-xl, .pf-m-column-gap-2xl-on-xl, .pf-m-column-gap-3xl-on-xl, .pf-m-column-gap-4xl-on-xl) > * { --pf-v6-l-flex--spacer--column: 0; } } @media (min-width: 90.625rem) { .pf-v6-l-flex.pf-m-column-gap-on-2xl { --pf-v6-l-flex--ColumnGap: var(--pf-v6-l-flex--m-column-gap--ColumnGap); } .pf-v6-l-flex.pf-m-column-gap-none-on-2xl { --pf-v6-l-flex--ColumnGap: 0; } .pf-v6-l-flex.pf-m-column-gap-xs-on-2xl { --pf-v6-l-flex--ColumnGap: var(--pf-t--global--spacer--xs); } .pf-v6-l-flex.pf-m-column-gap-sm-on-2xl { --pf-v6-l-flex--ColumnGap: var(--pf-t--global--spacer--sm); } .pf-v6-l-flex.pf-m-column-gap-md-on-2xl { --pf-v6-l-flex--ColumnGap: var(--pf-t--global--spacer--md); } .pf-v6-l-flex.pf-m-column-gap-lg-on-2xl { --pf-v6-l-flex--ColumnGap: var(--pf-t--global--spacer--lg); } .pf-v6-l-flex.pf-m-column-gap-xl-on-2xl { --pf-v6-l-flex--ColumnGap: var(--pf-t--global--spacer--xl); } .pf-v6-l-flex.pf-m-column-gap-2xl-on-2xl { --pf-v6-l-flex--ColumnGap: var(--pf-t--global--spacer--2xl); } .pf-v6-l-flex.pf-m-column-gap-3xl-on-2xl { --pf-v6-l-flex--ColumnGap: var(--pf-t--global--spacer--3xl); } .pf-v6-l-flex.pf-m-column-gap-4xl-on-2xl { --pf-v6-l-flex--ColumnGap: var(--pf-t--global--spacer--4xl); } .pf-v6-l-flex:is(.pf-m-column-gap-on-2xl, .pf-m-column-gap-none-on-2xl, .pf-m-column-gap-xs-on-2xl, .pf-m-column-gap-sm-on-2xl, .pf-m-column-gap-md-on-2xl, .pf-m-column-gap-lg-on-2xl, .pf-m-column-gap-xl-on-2xl, .pf-m-column-gap-2xl-on-2xl, .pf-m-column-gap-3xl-on-2xl, .pf-m-column-gap-4xl-on-2xl) > * { --pf-v6-l-flex--spacer--column: 0; } } /* PatternFly layout: Split/split */ .pf-v6-l-split { --pf-v6-l-stack--m-gutter--Gap: var(--pf-t--global--spacer--gutter--default); } .pf-v6-l-split { display: flex; padding: 0; margin: 0; } .pf-v6-l-split.pf-m-wrap { flex-wrap: wrap; } .pf-v6-l-split__item.pf-m-fill, .pf-v6-l-split > .pf-m-fill { flex-grow: 1; } .pf-v6-l-split.pf-m-gutter { gap: var(--pf-v6-l-stack--m-gutter--Gap); } /* PatternFly layout: Stack/stack */ .pf-v6-l-stack { --pf-v6-l-stack--m-gutter--Gap: var(--pf-t--global--spacer--gutter--default); } .pf-v6-l-stack { display: flex; flex-direction: column; height: 100%; } .pf-v6-l-stack__item.pf-m-fill, .pf-v6-l-stack > .pf-m-fill { flex-grow: 1; } .pf-v6-l-stack.pf-m-gutter { gap: var(--pf-v6-l-stack--m-gutter--Gap); }