diff --git a/packages/react-core/src/demos/HighContrast.md b/packages/react-core/src/demos/HighContrast.md
new file mode 100644
index 00000000000..81dd5143228
--- /dev/null
+++ b/packages/react-core/src/demos/HighContrast.md
@@ -0,0 +1,29 @@
+---
+id: High contrast
+section: patterns
+---
+
+import CheckCircleIcon from '@patternfly/react-icons/dist/js/icons/check-circle-icon';
+import InfoCircleIcon from '@patternfly/react-icons/dist/js/icons/info-circle-icon';
+import CodeIcon from '@patternfly/react-icons/dist/esm/icons/code-icon';
+import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon';
+import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
+import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
+import SortAmountDownIcon from '@patternfly/react-icons/dist/esm/icons/sort-amount-down-icon';
+import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
+import display from '@patternfly/react-styles/css/utilities/Display/display';
+import sizing from '@patternfly/react-styles/css/utilities/Sizing/sizing';
+import spacing from '@patternfly/react-styles/css/utilities/Spacing/spacing';
+import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';
+
+import MagicIcon from '@patternfly/react-icons/dist/esm/icons/magic-icon';
+import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
+import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
+import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
+import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon';
+import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
+
+### High contrast
+```js file='./examples/HighContrast/HighContrast.tsx' isFullscreen
+
+```
diff --git a/packages/react-core/src/demos/examples/HighContrast/HighContrast.tsx b/packages/react-core/src/demos/examples/HighContrast/HighContrast.tsx
new file mode 100644
index 00000000000..d878165e6ee
--- /dev/null
+++ b/packages/react-core/src/demos/examples/HighContrast/HighContrast.tsx
@@ -0,0 +1,391 @@
+import {
+ Alert,
+ PageSection,
+ Tabs,
+ Tab,
+ TabContent,
+ TabContentBody,
+ TabTitleText,
+ Title,
+ Content,
+ DrawerHead,
+ DrawerActions,
+ DrawerPanelDescription,
+ DrawerCloseButton,
+ PageSidebar,
+ PageSidebarBody,
+ Nav,
+ NavGroup,
+ NavItem,
+ Form,
+ FormGroup,
+ TextInput,
+ FormHelperText,
+ HelperText,
+ HelperTextItem,
+ TextArea,
+ Checkbox,
+ ActionGroup,
+ Button,
+ FormGroupLabelHelp,
+ Dropdown,
+ DropdownItem,
+ DropdownList,
+ Toolbar,
+ ToolbarContent,
+ ToolbarItem,
+ ToolbarGroup,
+ MenuToggle,
+ PageToggleButton,
+ Masthead,
+ MastheadMain,
+ MastheadToggle,
+ MastheadBrand,
+ MastheadContent,
+ MastheadLogo,
+ ButtonVariant,
+ DrawerPanelBody,
+ NotificationBadge,
+ NotificationBadgeVariant
+} from '@patternfly/react-core';
+import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';
+import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
+import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon';
+import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
+
+export const TabsOpenDemo = () => {
+ const [activeTabKey, setActiveTabKey] = React.useState(0);
+ const [isNavOpen, setIsNavOpen] = React.useState(true);
+ const [isDrawerOpen, setIsDrawerOpen] = React.useState(true);
+
+ // Toggle currently active tab
+ const handleTabClick = (event, tabIndex) => {
+ setActiveTabKey(tabIndex);
+ };
+
+ const onCloseClick = () => {
+ setIsDrawerOpen(false);
+ };
+
+ const [isChecked, setIsChecked] = React.useState(true);
+
+ const pageForm = (
+
+ );
+
+ const drawer = (
+ <>
+
+ Drawer title
+
+
+
+
+ Drawer panel description
+ Drawer panel body
+ >
+ );
+
+ const [activeItem, setActiveItem] = React.useState(4);
+ const onNavSelect = (_event: React.FormEvent, result: any) => {
+ setActiveItem(result.itemId);
+ };
+ const PageNav = (
+
+ );
+
+ const sidebar = (
+
+
+
+ PatternFly high contrast mode
+
+
+ {PageNav}
+
+ );
+
+ const [isUserDropdownOpen, setIsUserDropdownOpen] = React.useState(false);
+
+ const [isRoleDropdownOpen, setIsRoleDropdownOpen] = React.useState(false);
+ const [selectedRole, setSelectedRole] = React.useState('Administrator');
+
+ const roles = ['Administrator', 'Member', 'Guest'];
+ const roleDropdownItems = roles.map((role) => (
+
+ {role}
+
+ ));
+
+ const onRoleDropdownToggle = () => {
+ setIsRoleDropdownOpen(!isRoleDropdownOpen);
+ };
+
+ const onRoleDropdownSelect = (_event: any, value: string | number | undefined) => {
+ setIsRoleDropdownOpen(false);
+ setSelectedRole(typeof value === 'string' ? value : '');
+ };
+
+ const userDropdownItems = (
+ <>
+ My profile
+ User management
+ Logout
+ >
+ );
+
+ const onUserDropdownToggle = () => {
+ setIsUserDropdownOpen(!isUserDropdownOpen);
+ };
+
+ const onUserDropdownSelect = () => {
+ setIsUserDropdownOpen(false);
+ };
+
+ const masthead = (
+
+
+
+ setIsNavOpen(!isNavOpen)}
+ >
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ) => (
+ }
+ onClick={onRoleDropdownToggle}
+ >
+ {selectedRole}
+
+ )}
+ >
+ {roleDropdownItems}
+
+
+
+
+ setIsDrawerOpen(!isDrawerOpen)}
+ aria-label="Basic notification badge with read variant"
+ isExpanded={isDrawerOpen}
+ />
+
+
+
+ }
+ onClick={() => setIsDrawerOpen(!isDrawerOpen)}
+ />
+
+
+ }
+ onClick={() => setIsDrawerOpen(!isDrawerOpen)}
+ />
+
+
+
+
+ ) => (
+
+ John Doe
+
+ )}
+ >
+ {userDropdownItems}
+
+
+
+
+
+
+ );
+
+ return (
+ >}
+ sidebar={sidebar}
+ notificationDrawer={drawer}
+ isNotificationDrawerExpanded={isDrawerOpen}
+ masthead={masthead}
+ >
+
+
+ High contrast mode demo
+ Description
+
+
+
+
+ Create new} tabContentId={`tabContent${0}`} />
+ Templates} tabContentId={`tabContent${1}`} />
+
+
+
+
+
+
+
+ {pageForm}
+
+
+
+
+ Templates description
+
+
+
+
+
+ );
+};
diff --git a/packages/react-docs/patternfly-docs/button.css b/packages/react-docs/patternfly-docs/button.css
new file mode 100644
index 00000000000..29fc08121ef
--- /dev/null
+++ b/packages/react-docs/patternfly-docs/button.css
@@ -0,0 +1,822 @@
+.pf-v6-c-button {
+ --pf-v6-c-button--Display: inline-flex;
+ --pf-v6-c-button--AlignItems: baseline;
+ --pf-v6-c-button--JustifyContent: center;
+ --pf-v6-c-button--Gap: var(--pf-t--global--spacer--gap--text-to-element--default);
+ --pf-v6-c-button--MinWidth: calc(1em * var(--pf-v6-c-button--LineHeight) + var(--pf-v6-c-button--PaddingBlockStart) + var(--pf-v6-c-button--PaddingBlockEnd));
+ --pf-v6-c-button--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--default);
+ --pf-v6-c-button--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--default);
+ --pf-v6-c-button--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--default);
+ --pf-v6-c-button--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--default);
+ --pf-v6-c-button--Color: var(--pf-t--global--text--color--regular);
+ --pf-v6-c-button--LineHeight: var(--pf-t--global--font--line-height--body);
+ --pf-v6-c-button--FontWeight: var(--pf-t--global--font--weight--body--default);
+ --pf-v6-c-button--FontSize: var(--pf-t--global--font--size--body--default);
+ --pf-v6-c-button--BackgroundColor: transparent;
+ --pf-v6-c-button--BorderColor: transparent;
+ --pf-v6-c-button--BorderWidth: var(--pf-t--global--border--width--action--default);
+ --pf-v6-c-button--BorderRadius: var(--pf-t--global--border--radius--pill);
+ --pf-v6-c-button--TextDecorationLine: none;
+ --pf-v6-c-button--TextDecorationStyle: none;
+ --pf-v6-c-button--TextDecorationColor: currentcolor;
+ --pf-v6-c-button--TransitionDelay: 0s;
+ --pf-v6-c-button--TransitionDuration: var(--pf-t--global--motion--duration--fade--default);
+ --pf-v6-c-button--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--accelerate);
+ --pf-v6-c-button--TransitionProperty: color, background, border-width, border-color;
+ --pf-v6-c-button--ScaleX: 1;
+ --pf-v6-c-button--ScaleY: 1;
+ --pf-v6-c-button--hover--BackgroundColor: transparent;
+ --pf-v6-c-button--hover--BorderColor: transparent;
+ --pf-v6-c-button--hover--BorderWidth: var(--pf-t--global--border--width--action--hover);
+ --pf-v6-c-button--hover--TextDecorationLine: none;
+ --pf-v6-c-button--hover--TextDecorationStyle: none;
+ --pf-v6-c-button--hover--TextDecorationColor: currentcolor;
+ --pf-v6-c-button--hover--ScaleX: 1;
+ --pf-v6-c-button--hover--ScaleY: 1;
+ --pf-v6-c-button--m-clicked--BackgroundColor: transparent;
+ --pf-v6-c-button--m-clicked--BorderColor: transparent;
+ --pf-v6-c-button--m-clicked--BorderWidth: var(--pf-t--global--border--width--action--clicked);
+ --pf-v6-c-button--m-primary--Color: var(--pf-t--global--text--color--on-brand--default);
+ --pf-v6-c-button--m-primary--BackgroundColor: var(--pf-t--global--color--brand--default);
+ --pf-v6-c-button--m-primary__icon--Color: var(--pf-t--global--icon--color--on-brand--default);
+ --pf-v6-c-button--m-primary--hover--Color: var(--pf-t--global--text--color--on-brand--hover);
+ --pf-v6-c-button--m-primary--hover--BackgroundColor: var(--pf-t--global--color--brand--hover);
+ --pf-v6-c-button--m-primary--hover__icon--Color: var(--pf-t--global--icon--color--on-brand--hover);
+ --pf-v6-c-button--m-primary--m-clicked--Color: var(--pf-t--global--text--color--on-brand--clicked);
+ --pf-v6-c-button--m-primary--m-clicked--BackgroundColor: var(--pf-t--global--color--brand--clicked);
+ --pf-v6-c-button--m-primary--m-clicked__icon--Color: var(--pf-t--global--icon--color--on-brand--clicked);
+ --pf-v6-c-button--m-secondary--Color: var(--pf-t--global--text--color--brand--default);
+ --pf-v6-c-button--m-secondary--BorderColor: var(--pf-t--global--border--color--brand--default);
+ --pf-v6-c-button--m-secondary--TransitionDuration: var(--pf-t--global--motion--duration--fade--short);
+ --pf-v6-c-button--m-secondary__icon--Color: var(--pf-t--global--icon--color--brand--default);
+ --pf-v6-c-button--m-secondary--hover--Color: var(--pf-t--global--text--color--brand--hover);
+ --pf-v6-c-button--m-secondary--hover--BorderColor: var(--pf-t--global--border--color--brand--hover);
+ --pf-v6-c-button--m-secondary--hover__icon--Color: var(--pf-t--global--icon--color--brand--hover);
+ --pf-v6-c-button--m-secondary--m-clicked--Color: var(--pf-t--global--text--color--brand--clicked);
+ --pf-v6-c-button--m-secondary--m-clicked--BorderColor: var(--pf-t--global--border--color--brand--clicked);
+ --pf-v6-c-button--m-secondary--m-clicked__icon--Color: var(--pf-t--global--icon--color--brand--clicked);
+ --pf-v6-c-button--m-secondary--m-danger--Color: var(--pf-t--global--text--color--status--danger--default);
+ --pf-v6-c-button--m-secondary--m-danger--BorderColor: var(--pf-t--global--border--color--status--danger--default);
+ --pf-v6-c-button--m-secondary--m-danger__icon--Color: var(--pf-t--global--icon--color--status--danger--default);
+ --pf-v6-c-button--m-secondary--m-danger--hover--Color: var(--pf-t--global--text--color--status--danger--hover);
+ --pf-v6-c-button--m-secondary--m-danger--hover--BorderColor: var(--pf-t--global--border--color--status--danger--hover);
+ --pf-v6-c-button--m-secondary--m-danger--hover__icon--Color: var(--pf-t--global--icon--color--status--danger--hover);
+ --pf-v6-c-button--m-secondary--m-danger--m-clicked--Color: var(--pf-t--global--text--color--status--danger--clicked);
+ --pf-v6-c-button--m-secondary--m-danger--m-clicked--BorderColor: var(--pf-t--global--border--color--status--danger--clicked);
+ --pf-v6-c-button--m-secondary--m-danger--m-clicked__icon--Color: var(--pf-t--global--icon--color--status--danger--clicked);
+ --pf-v6-c-button--m-tertiary--Color: var(--pf-t--global--text--color--brand--default);
+ --pf-v6-c-button--m-tertiary--BorderColor: var(--pf-t--global--border--color--default);
+ --pf-v6-c-button--m-tertiary--TransitionDuration: var(--pf-t--global--motion--duration--fade--short);
+ --pf-v6-c-button--m-tertiary__icon--Color: var(--pf-t--global--icon--color--brand--default);
+ --pf-v6-c-button--m-tertiary--hover--Color: var(--pf-t--global--text--color--brand--hover);
+ --pf-v6-c-button--m-tertiary--hover--BorderColor: var(--pf-t--global--border--color--hover);
+ --pf-v6-c-button--m-tertiary--hover__icon--Color: var(--pf-t--global--icon--color--brand--hover);
+ --pf-v6-c-button--m-tertiary--m-clicked--Color: var(--pf-t--global--text--color--brand--clicked);
+ --pf-v6-c-button--m-tertiary--m-clicked--BorderColor: var(--pf-t--global--border--color--clicked);
+ --pf-v6-c-button--m-tertiary--m-clicked__icon--Color: var(--pf-t--global--icon--color--brand--clicked);
+ --pf-v6-c-button--m-link--BorderRadius: var(--pf-t--global--border--radius--small);
+ --pf-v6-c-button--m-link--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--plain--default);
+ --pf-v6-c-button--m-link--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--plain--default);
+ --pf-v6-c-button--m-link--Color: var(--pf-t--global--text--color--brand--default);
+ --pf-v6-c-button--m-link--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
+ --pf-v6-c-button--m-link__icon--Color: var(--pf-t--global--icon--color--brand--default);
+ --pf-v6-c-button--m-link--hover--Color: var(--pf-t--global--text--color--brand--hover);
+ --pf-v6-c-button--m-link--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
+ --pf-v6-c-button--m-link--hover__icon--Color: var(--pf-t--global--text--color--brand--hover);
+ --pf-v6-c-button--m-link--m-clicked--Color: var(--pf-t--global--text--color--brand--clicked);
+ --pf-v6-c-button--m-link--m-clicked--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
+ --pf-v6-c-button--m-link--m-clicked__icon--Color: var(--pf-t--global--text--color--brand--clicked);
+ --pf-v6-c-button--m-link--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--plain--compact);
+ --pf-v6-c-button--m-link--m-small--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--plain--compact);
+ --pf-v6-c-button--m-link--m-danger--Color: var(--pf-t--global--text--color--status--danger--default);
+ --pf-v6-c-button--m-link--m-danger--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
+ --pf-v6-c-button--m-link--m-danger__icon--Color: var(--pf-t--global--text--color--status--danger--default);
+ --pf-v6-c-button--m-link--m-danger--hover--Color: var(--pf-t--global--text--color--status--danger--hover);
+ --pf-v6-c-button--m-link--m-danger--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
+ --pf-v6-c-button--m-link--m-danger--hover__icon--Color: var(--pf-t--global--text--color--status--danger--hover);
+ --pf-v6-c-button--m-link--m-danger--m-clicked--Color: var(--pf-t--global--text--color--status--danger--clicked);
+ --pf-v6-c-button--m-link--m-danger--m-clicked--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
+ --pf-v6-c-button--m-link--m-danger--m-clicked__icon--Color: var(--pf-t--global--text--color--status--danger--clicked);
+ --pf-v6-c-button--m-link--m-inline--Display: inline-flex;
+ --pf-v6-c-button--m-link--m-inline--JustifyContent: flex-start;
+ --pf-v6-c-button--m-link--m-inline--FontSize: initial;
+ --pf-v6-c-button--m-link--m-inline--LineHeight: initial;
+ --pf-v6-c-button--m-link--m-inline--FontWeight: initial;
+ --pf-v6-c-button--m-link--m-inline--PaddingBlockStart: 0;
+ --pf-v6-c-button--m-link--m-inline--PaddingInlineEnd: 0;
+ --pf-v6-c-button--m-link--m-inline--PaddingBlockEnd: 0;
+ --pf-v6-c-button--m-link--m-inline--PaddingInlineStart: 0;
+ --pf-v6-c-button--m-link--m-inline--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--default);
+ --pf-v6-c-button--m-link--m-inline--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--default);
+ --pf-v6-c-button--m-link--m-inline--hover--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--hover);
+ --pf-v6-c-button--m-link--m-inline--hover--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--hover);
+ --pf-v6-c-button--m-link--m-inline__progress--InsetInlineStart: var(--pf-t--global--spacer--xs);
+ --pf-v6-c-button--m-link--m-inline--m-in-progress--PaddingInlineStart: calc(var(--pf-v6-c-button--m-link--m-inline__progress--InsetInlineStart) + 1rem + var(--pf-t--global--spacer--sm));
+ --pf-v6-c-button--m-link--m-inline--disabled--Color: var(--pf-t--global--text--color--disabled);
+ --pf-v6-c-button--m-link--m-inline--disabled__icon--Color: var(--pf-t--global--icon--color--disabled);
+ --pf-v6-c-button--span--m-link--m-inline--Display: inline;
+ --pf-v6-c-button--span--m-link--m-inline__icon--m-start--MarginInlineEnd: var(--pf-t--global--spacer--gap--text-to-element--default);
+ --pf-v6-c-button--span--m-link--m-inline__icon--m-end--MarginInlineStart: var(--pf-t--global--spacer--gap--text-to-element--default);
+ --pf-v6-c-button--m-link--m-inline--Color: var(--pf-t--global--text--color--brand--default);
+ --pf-v6-c-button--m-link--m-inline__icon--Color: var(--pf-t--global--icon--color--brand--default);
+ --pf-v6-c-button--m-link--m-inline--TextDecorationColor: currentcolor;
+ --pf-v6-c-button--m-link--m-inline--hover--Color: var(--pf-t--global--text--color--brand--hover);
+ --pf-v6-c-button--m-link--m-inline--hover__icon--Color: var(--pf-t--global--icon--color--brand--hover);
+ --pf-v6-c-button--m-link--m-inline--hover--TextDecorationColor: currentcolor;
+ --pf-v6-c-button--m-plain--BorderRadius: var(--pf-t--global--border--radius--small);
+ --pf-v6-c-button--m-plain--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--plain--default);
+ --pf-v6-c-button--m-plain--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--plain--default);
+ --pf-v6-c-button--m-plain--Color: var(--pf-t--global--icon--color--regular);
+ --pf-v6-c-button--m-plain__icon--Color: var(--pf-t--global--text--color--regular);
+ --pf-v6-c-button--m-plain--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
+ --pf-v6-c-button--m-plain--hover--Color: var(--pf-t--global--icon--color--regular);
+ --pf-v6-c-button--m-plain--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
+ --pf-v6-c-button--m-plain--m-clicked--Color: var(--pf-t--global--icon--color--regular);
+ --pf-v6-c-button--m-plain--m-clicked--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
+ --pf-v6-c-button--m-plain--disabled--Color: var(--pf-t--global--text--color--disabled);
+ --pf-v6-c-button--m-plain--disabled__icon--Color: var(--pf-t--global--icon--color--disabled);
+ --pf-v6-c-button--m-plain--disabled--BackgroundColor: transparent;
+ --pf-v6-c-button--m-plain--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--plain--compact);
+ --pf-v6-c-button--m-plain--m-small--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--plain--compact);
+ --pf-v6-c-button--m-plain--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__progress--Color: var(--pf-v6-c-button__icon--Color);
+ --pf-v6-c-button--m-control--BorderRadius: var(--pf-t--global--border--radius--small);
+ --pf-v6-c-button--m-control--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
+ --pf-v6-c-button--m-control--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
+ --pf-v6-c-button--m-control--Color: var(--pf-t--global--text--color--regular);
+ --pf-v6-c-button--m-control--BackgroundColor: var(--pf-t--global--background--color--control--default);
+ --pf-v6-c-button--m-control--BorderColor: var(--pf-t--global--border--color--default);
+ --pf-v6-c-button--m-control--BorderWidth: var(--pf-t--global--border--width--control--default);
+ --pf-v6-c-button--m-control__icon--Color: var(--pf-t--global--icon--color--regular);
+ --pf-v6-c-button--m-control--hover--Color: var(--pf-t--global--text--color--regular);
+ --pf-v6-c-button--m-control--hover--BackgroundColor: var(--pf-t--global--background--color--control--default);
+ --pf-v6-c-button--m-control--hover--BorderColor: var(--pf-t--global--border--color--hover);
+ --pf-v6-c-button--m-control--hover--BorderWidth: var(--pf-t--global--border--width--control--hover);
+ --pf-v6-c-button--m-control--hover__icon--Color: var(--pf-t--global--icon--color--regular);
+ --pf-v6-c-button--m-control--m-clicked--Color: var(--pf-t--global--text--color--regular);
+ --pf-v6-c-button--m-control--m-clicked--BackgroundColor: var(--pf-t--global--background--color--control--default);
+ --pf-v6-c-button--m-control--m-clicked--BorderColor: var(--pf-t--global--border--color--clicked);
+ --pf-v6-c-button--m-control--m-clicked--BorderWidth: var(--pf-t--global--border--width--control--clicked);
+ --pf-v6-c-button--m-control--m-clicked__icon--Color: var(--pf-t--global--icon--color--regular);
+ --pf-v6-c-button--m-control--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--compact);
+ --pf-v6-c-button--m-control--m-small--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--compact);
+ --pf-v6-c-button--m-stateful--BorderRadius: var(--pf-t--global--border--radius--small);
+ --pf-v6-c-button--m-stateful--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
+ --pf-v6-c-button--m-stateful--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
+ --pf-v6-c-button--m-stateful--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--compact);
+ --pf-v6-c-button--m-stateful--m-small--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--compact);
+ --pf-v6-c-button--m-read--BackgroundColor: var(--pf-t--global--background--color--control--default);
+ --pf-v6-c-button--m-read--BorderColor: var(--pf-t--global--border--color--default);
+ --pf-v6-c-button--m-read--hover--BackgroundColor: var(--pf-t--global--background--color--control--default);
+ --pf-v6-c-button--m-read--hover--BorderColor: var(--pf-t--global--border--color--hover);
+ --pf-v6-c-button--m-read--m-clicked--BackgroundColor: var(--pf-t--global--background--color--control--default);
+ --pf-v6-c-button--m-read--m-clicked--BorderColor: var(--pf-t--global--border--color--clicked);
+ --pf-v6-c-button--m-unread--Color: var(--pf-t--global--text--color--status--unread--on-default--default);
+ --pf-v6-c-button--m-unread--BackgroundColor: var(--pf-t--global--color--status--unread--default);
+ --pf-v6-c-button--m-unread__icon--Color: var(--pf-t--global--icon--color--status--unread--on-default--default);
+ --pf-v6-c-button--m-unread--hover--Color: var(--pf-t--global--text--color--status--unread--on-default--hover);
+ --pf-v6-c-button--m-unread--hover--BackgroundColor: var(--pf-t--global--color--status--unread--hover);
+ --pf-v6-c-button--m-unread--hover__icon--Color: var(--pf-t--global--icon--color--status--unread--on-default--hover);
+ --pf-v6-c-button--m-unread--m-clicked--Color: var(--pf-t--global--text--color--status--unread--on-default--clicked);
+ --pf-v6-c-button--m-unread--m-clicked--BackgroundColor: var(--pf-t--global--color--status--unread--clicked);
+ --pf-v6-c-button--m-unread--m-clicked__icon--Color: var(--pf-t--global--icon--color--status--unread--on-default--clicked);
+ --pf-v6-c-button--m-attention--Color: var(--pf-t--global--text--color--status--unread--on-attention--default);
+ --pf-v6-c-button--m-attention--BackgroundColor: var(--pf-t--global--color--status--unread--attention--default);
+ --pf-v6-c-button--m-attention__icon--Color: var(--pf-t--global--icon--color--status--unread--on-attention--default);
+ --pf-v6-c-button--m-attention--hover--Color: var(--pf-t--global--text--color--status--unread--on-attention--hover);
+ --pf-v6-c-button--m-attention--hover--BackgroundColor: var(--pf-t--global--color--status--unread--attention--hover);
+ --pf-v6-c-button--m-attention--hover__icon--Color: var(--pf-t--global--icon--color--status--unread--on-attention--hover);
+ --pf-v6-c-button--m-attention--m-clicked--Color: var(--pf-t--global--text--color--status--unread--on-attention--clicked);
+ --pf-v6-c-button--m-attention--m-clicked--BackgroundColor: var(--pf-t--global--color--status--unread--attention--clicked);
+ --pf-v6-c-button--m-attention--m-clicked__icon--Color: var(--pf-t--global--icon--color--status--unread--on-attention--clicked);
+ --pf-v6-c-button--m-warning--Color: var(--pf-t--global--text--color--status--on-warning--default);
+ --pf-v6-c-button--m-warning--BackgroundColor: var(--pf-t--global--color--status--warning--default);
+ --pf-v6-c-button--m-warning__icon--Color: var(--pf-t--global--icon--color--status--on-warning--default);
+ --pf-v6-c-button--m-warning--hover--Color: var(--pf-t--global--text--color--status--on-warning--hover);
+ --pf-v6-c-button--m-warning--hover--BackgroundColor: var(--pf-t--global--color--status--warning--hover);
+ --pf-v6-c-button--m-warning--hover__icon--Color: var(--pf-t--global--icon--color--status--on-warning--hover);
+ --pf-v6-c-button--m-warning--m-clicked--Color: var(--pf-t--global--text--color--status--on-warning--clicked);
+ --pf-v6-c-button--m-warning--m-clicked--BackgroundColor: var(--pf-t--global--color--status--warning--clicked);
+ --pf-v6-c-button--m-warning--m-clicked__icon--Color: var(--pf-t--global--icon--color--status--on-warning--clicked);
+ --pf-v6-c-button--m-danger--Color: var(--pf-t--global--text--color--status--on-danger--default);
+ --pf-v6-c-button--m-danger--BackgroundColor: var(--pf-t--global--color--status--danger--default);
+ --pf-v6-c-button--m-danger__icon--Color: var(--pf-t--global--icon--color--status--on-danger--default);
+ --pf-v6-c-button--m-danger--hover--Color: var(--pf-t--global--text--color--status--on-danger--hover);
+ --pf-v6-c-button--m-danger--hover--BackgroundColor: var(--pf-t--global--color--status--danger--hover);
+ --pf-v6-c-button--m-danger--hover__icon--Color: var(--pf-t--global--icon--color--status--on-danger--hover);
+ --pf-v6-c-button--m-danger--m-clicked--Color: var(--pf-t--global--text--color--status--on-danger--clicked);
+ --pf-v6-c-button--m-danger--m-clicked--BackgroundColor: var(--pf-t--global--color--status--danger--clicked);
+ --pf-v6-c-button--m-danger--m-clicked__icon--Color: var(--pf-t--global--icon--color--status--on-danger--clicked);
+ --pf-v6-c-button--m-display-lg--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--spacious);
+ --pf-v6-c-button--m-display-lg--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--spacious);
+ --pf-v6-c-button--m-display-lg--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--spacious);
+ --pf-v6-c-button--m-display-lg--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--spacious);
+ --pf-v6-c-button--m-display-lg--FontWeight: var(--pf-t--global--font--weight--body--bold);
+ --pf-v6-c-button--m-link--m-display-lg--FontSize: var(--pf-t--global--font--size--body--lg);
+ --pf-v6-c-button--m-small--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--compact);
+ --pf-v6-c-button--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--compact);
+ --pf-v6-c-button--m-small--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--compact);
+ --pf-v6-c-button--m-small--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--compact);
+ --pf-v6-c-button--disabled--Color: var(--pf-t--global--text--color--on-disabled);
+ --pf-v6-c-button--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
+ --pf-v6-c-button--disabled--TextDecorationColor: currentcolor;
+ --pf-v6-c-button--disabled--BorderColor: transparent;
+ --pf-v6-c-button--disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
+ --pf-v6-c-button__icon--Color: var(--pf-t--global--icon--color--regular);
+ --pf-v6-c-button--hover__icon--Color: var(--pf-t--global--icon--color--regular);
+ --pf-v6-c-button--m-clicked__icon--Color: var(--pf-t--global--icon--color--regular);
+ --pf-v6-c-button__icon--MarginInlineStart: 0;
+ --pf-v6-c-button__icon--MarginInlineEnd: 0;
+ --pf-v6-c-button__icon--m-start--MarginInlineEnd: 0;
+ --pf-v6-c-button__icon--m-end--MarginInlineStart: 0;
+ --pf-v6-c-button--m-notify__icon--AnimationDuration--notify: var(--pf-t--global--motion--duration--3xl);
+ --pf-v6-c-button--m-notify__icon--AnimationTimingFunction--notify: var(--pf-t--global--motion--timing-function--default);
+ --pf-v6-c-button__icon--TransitionDelay: 0s;
+ --pf-v6-c-button__icon--TransitionTimingFunction: auto;
+ --pf-v6-c-button__icon--TransitionDuration: 0s;
+ --pf-v6-c-button__icon--TransitionProperty: none;
+ --pf-v6-c-button__icon--Rotate: 0deg;
+ --pf-v6-c-button--hover__icon--TransitionTimingFunction: auto;
+ --pf-v6-c-button--hover__icon--TransitionDuration: 0s;
+ --pf-v6-c-button--hover__icon--TransitionProperty: none;
+ --pf-v6-c-button--hover__icon--Rotate: 0deg;
+ --pf-v6-c-button__icon--ScaleX: 1;
+ --pf-v6-c-button__icon--ScaleY: 1;
+ --pf-v6-c-button--hover__icon--ScaleX: 1;
+ --pf-v6-c-button--hover__icon--ScaleY: 1;
+ --pf-v6-c-button--m-favorite__icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
+ --pf-v6-c-button--m-favorite__icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
+ --pf-v6-c-button--m-favorited__icon--Color: var(--pf-t--global--color--favorite--default);
+ --pf-v6-c-button--m-favorited--hover__icon--Color: var(--pf-t--global--color--favorite--hover);
+ --pf-v6-c-button--m-favorited__icon--AnimationDuration: var(--pf-t--global--motion--duration--icon--long);
+ --pf-v6-c-button--m-favorited__icon--AnimationTimingFunction: var(--pf-t--global--motion--timing-function--default);
+ --pf-v6-c-button__icon--favorite--Opacity: 1;
+ --pf-v6-c-button__icon--favorited--Opacity: 0;
+ --pf-v6-c-button--m-favorited__icon--favorite--Opacity: 0;
+ --pf-v6-c-button--m-favorited__icon--favorited--Opacity: 1;
+ --pf-v6-c-button__icon--favorite--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
+ --pf-v6-c-button__progress--width: calc(var(--pf-t--global--icon--size--lg) + var(--pf-t--global--spacer--sm));
+ --pf-v6-c-button__progress--Opacity: 0;
+ --pf-v6-c-button__progress--TranslateY: -50%;
+ --pf-v6-c-button__progress--TranslateX: 0;
+ --pf-v6-c-button__progress--InsetBlockStart: 50%;
+ --pf-v6-c-button__progress--InsetInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
+ --pf-v6-c-button__progress--Color: var(--pf-v6-c-button__icon--Color);
+ --pf-v6-c-button--m-progress--PaddingInlineEnd: calc(var(--pf-t--global--spacer--control--horizontal--default) + var(--pf-v6-c-button__progress--width) / 2);
+ --pf-v6-c-button--m-progress--PaddingInlineStart: calc(var(--pf-t--global--spacer--control--horizontal--default) + var(--pf-v6-c-button__progress--width) / 2);
+ --pf-v6-c-button--m-in-progress--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
+ --pf-v6-c-button--m-in-progress--PaddingInlineStart: calc(var(--pf-t--global--spacer--control--horizontal--default) + var(--pf-v6-c-button__progress--width));
+ --pf-v6-c-button--m-in-progress--m-plain--Color: var(--pf-t--global--icon--color--brand--default);
+ --pf-v6-c-button--m-in-progress--m-plain__progress--InsetInlineStart: 50%;
+ --pf-v6-c-button--m-in-progress--m-plain__progress--TranslateX: -50%;
+ --pf-v6-c-button--m-settings__icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--long);
+ --pf-v6-c-button--m-settings__icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--accelerate);
+ --pf-v6-c-button--m-settings--hover__icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--long);
+ --pf-v6-c-button--m-settings--hover__icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate);
+ --pf-v6-c-button--m-settings--hover__icon--Rotate: 60deg;
+ --pf-v6-c-button--m-primary__c-badge--BorderColor: var(--pf-t--global--border--color--default);
+ --pf-v6-c-button--m-block--Display: flex;
+ --pf-v6-c-button--m-block--Width: 100%;
+ --pf-v6-c-button--hamburger-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate);
+ --pf-v6-c-button--hamburger-icon--TransitionDuration: var(--pf-t--global--motion--duration--md);
+ --pf-v6-c-button--hamburger-icon--top--path--base: path("M1,1 L9,1");
+ --pf-v6-c-button--hamburger-icon--middle--path--base: path("M1,5 L9,5");
+ --pf-v6-c-button--hamburger-icon--arrow--path--base: path("M1,5 L1,5 L1,5");
+ --pf-v6-c-button--hamburger-icon--bottom--path--base: path("M9,9 L1,9");
+ --pf-v6-c-button--hamburger-icon--top--path: var(--pf-v6-c-button--hamburger-icon--top--path--base);
+ --pf-v6-c-button--hamburger-icon--middle--path: var(--pf-v6-c-button--hamburger-icon--middle--path--base);
+ --pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--path--base);
+ --pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--path--base);
+ --pf-v6-c-button--hamburger-icon--top--collapse--path: path("M5,1 L9,1");
+ --pf-v6-c-button--hamburger-icon--arrow--collapse--path: path("M3,7 L1,5 L3,3");
+ --pf-v6-c-button--hamburger-icon--bottom--collapse--path: path("M9,9 L5,9");
+ --pf-v6-c-button--m-hamburger__icon--m-expand--ScaleX: -1;
+}
+
+.pf-v6-c-button {
+ position: relative;
+ display: var(--pf-v6-c-button--Display);
+ gap: var(--pf-v6-c-button--Gap);
+ align-items: var(--pf-v6-c-button--AlignItems);
+ justify-content: var(--pf-v6-c-button--JustifyContent);
+ min-width: var(--pf-v6-c-button--MinWidth);
+ padding-block-start: var(--pf-v6-c-button--PaddingBlockStart);
+ padding-block-end: var(--pf-v6-c-button--PaddingBlockEnd);
+ padding-inline-start: var(--pf-v6-c-button--PaddingInlineStart);
+ padding-inline-end: var(--pf-v6-c-button--PaddingInlineEnd);
+ font-size: var(--pf-v6-c-button--FontSize, inherit);
+ font-weight: var(--pf-v6-c-button--FontWeight, inherit);
+ line-height: var(--pf-v6-c-button--LineHeight, inherit);
+ color: var(--pf-v6-c-button--Color);
+ text-align: center;
+ text-decoration-line: var(--pf-v6-c-button--TextDecorationLine);
+ text-decoration-style: var(--pf-v6-c-button--TextDecorationStyle);
+ text-decoration-color: var(--pf-v6-c-button--TextDecorationColor);
+ white-space: nowrap;
+ cursor: pointer;
+ -webkit-user-select: none;
+ user-select: none;
+ background: var(--pf-v6-c-button--BackgroundColor) radial-gradient(circle, transparent 1%, color-mix(in srgb, currentcolor 15%, transparent) 1%) center/15000%;
+ border: 0;
+ border-start-start-radius: var(--pf-v6-c-button--BorderStartStartRadius, var(--pf-v6-c-button--BorderRadius));
+ border-start-end-radius: var(--pf-v6-c-button--BorderStartEndRadius, var(--pf-v6-c-button--BorderRadius));
+ border-end-start-radius: var(--pf-v6-c-button--BorderEndStartRadius, var(--pf-v6-c-button--BorderRadius));
+ border-end-end-radius: var(--pf-v6-c-button--BorderEndEndRadius, var(--pf-v6-c-button--BorderRadius));
+ transition-delay: var(--pf-v6-c-button--TransitionDelay);
+ transition-timing-function: var(--pf-v6-c-button--TransitionTimingFunction);
+ transition-duration: var(--pf-v6-c-button--TransitionDuration);
+ scale: var(--pf-v6-c-button--ScaleX) var(--pf-v6-c-button--ScaleY);
+}
+.pf-v6-c-button::after {
+ position: absolute;
+ inset: 0;
+ 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--BorderRadius: var(--pf-v6-c-button--m-link--BorderRadius);
+ --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--m-link--BackgroundColor);
+ --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--m-link__icon--Color);
+ --pf-v6-c-button--hover--Color: var(--pf-v6-c-button--m-link--hover--Color);
+ --pf-v6-c-button--hover--BackgroundColor: var(--pf-v6-c-button--m-link--hover--BackgroundColor);
+ --pf-v6-c-button--hover__icon--Color: var(--pf-v6-c-button--m-link--hover__icon--Color);
+ --pf-v6-c-button--m-clicked--Color: var(--pf-v6-c-button--m-link--m-clicked--Color);
+ --pf-v6-c-button--m-clicked--BackgroundColor: var(--pf-v6-c-button--m-link--m-clicked--BackgroundColor);
+ --pf-v6-c-button--m-clicked__icon--Color: var(--pf-v6-c-button--m-link--m-clicked__icon--Color);
+ --pf-v6-c-button--m-small--PaddingInlineEnd: var(--pf-v6-c-button--m-link--m-small--PaddingInlineEnd);
+ --pf-v6-c-button--m-small--PaddingInlineStart: var(--pf-v6-c-button--m-link--m-small--PaddingInlineStart);
+}
+.pf-v6-c-button.pf-m-link.pf-m-inline {
+ --pf-v6-c-button--Display: var(--pf-v6-c-button--m-link--m-inline--Display);
+ --pf-v6-c-button--JustifyContent: var(--pf-v6-c-button--m-link--m-inline--JustifyContent);
+ --pf-v6-c-button--FontSize: var(--pf-v6-c-button--m-link--m-inline--FontSize);
+ --pf-v6-c-button--LineHeight: var(--pf-v6-c-button--m-link--m-inline--LineHeight);
+ --pf-v6-c-button--FontWeight: var(--pf-v6-c-button--m-link--m-inline--FontWeight);
+ --pf-v6-c-button--PaddingBlockStart: var(--pf-v6-c-button--m-link--m-inline--PaddingBlockStart);
+ --pf-v6-c-button--PaddingInlineEnd: var(--pf-v6-c-button--m-link--m-inline--PaddingInlineEnd);
+ --pf-v6-c-button--PaddingBlockEnd: var(--pf-v6-c-button--m-link--m-inline--PaddingBlockEnd);
+ --pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-button--m-link--m-inline--PaddingInlineStart);
+ --pf-v6-c-button--BackgroundColor: transparent;
+ --pf-v6-c-button__progress--InsetInlineStart: var(--pf-v6-c-button--m-link--m-inline__progress--InsetInlineStart);
+ --pf-v6-c-button--TextDecorationLine: var(--pf-v6-c-button--m-link--m-inline--TextDecorationLine);
+ --pf-v6-c-button--TextDecorationStyle: var(--pf-v6-c-button--m-link--m-inline--TextDecorationStyle);
+ --pf-v6-c-button--hover--TextDecorationLine: var(--pf-v6-c-button--m-link--m-inline--hover--TextDecorationLine);
+ --pf-v6-c-button--hover--TextDecorationStyle: var(--pf-v6-c-button--m-link--m-inline--hover--TextDecorationStyle);
+ --pf-v6-c-button--hover--BackgroundColor: transparent;
+ --pf-v6-c-button--m-clicked--BackgroundColor: transparent;
+ --pf-v6-c-button--disabled--BackgroundColor: transparent;
+ --pf-v6-c-button--disabled--Color: var(--pf-v6-c-button--m-link--m-inline--disabled--Color);
+ --pf-v6-c-button--disabled__icon--Color: var(--pf-v6-c-button--m-link--m-inline--disabled__icon--Color);
+ --pf-v6-c-button--m-link--Color: var(--pf-v6-c-button--m-link--m-inline--Color);
+ --pf-v6-c-button--m-link__icon--Color: var(--pf-v6-c-button--m-link--m-inline__icon--Color);
+ --pf-v6-c-button--TextDecorationColor: var(--pf-v6-c-button--m-link--m-inline--TextDecorationColor);
+ --pf-v6-c-button--hover--TextDecorationColor: var(--pf-v6-c-button--m-link--m-inline--hover--TextDecorationColor);
+ --pf-v6-c-button--m-link--hover--Color: var(--pf-v6-c-button--m-link--m-inline--hover--Color);
+ --pf-v6-c-button--m-link--hover__icon--Color: var(--pf-v6-c-button--m-link--m-inline--hover__icon--Color);
+ text-align: start;
+ white-space: normal;
+ background: transparent;
+ outline-offset: 0.125rem;
+}
+span.pf-v6-c-button.pf-m-link.pf-m-inline {
+ --pf-v6-c-button--m-link--m-inline--Display: var(--pf-v6-c-button--span--m-link--m-inline--Display);
+ --pf-v6-c-button__icon--m-start--MarginInlineEnd: var(--pf-v6-c-button--span--m-link--m-inline__icon--m-start--MarginInlineEnd);
+ --pf-v6-c-button__icon--m-end--MarginInlineStart: var(--pf-v6-c-button--span--m-link--m-inline__icon--m-end--MarginInlineStart);
+}
+
+.pf-v6-c-button.pf-m-link.pf-m-danger {
+ --pf-v6-c-button--m-danger--Color: var(--pf-v6-c-button--m-link--m-danger--Color);
+ --pf-v6-c-button--m-danger--BackgroundColor: var(--pf-v6-c-button--m-link--m-danger--BackgroundColor);
+ --pf-v6-c-button--m-danger__icon--Color: var(--pf-v6-c-button--m-link--m-danger__icon--Color);
+ --pf-v6-c-button--m-danger--hover--Color: var(--pf-v6-c-button--m-link--m-danger--hover--Color);
+ --pf-v6-c-button--m-danger--hover--BackgroundColor: var(--pf-v6-c-button--m-link--m-danger--hover--BackgroundColor);
+ --pf-v6-c-button--m-danger--hover__icon--Color: var(--pf-v6-c-button--m-link--m-danger--hover__icon--Color);
+ --pf-v6-c-button--m-danger--m-clicked--Color: var(--pf-v6-c-button--m-link--m-danger--m-clicked--Color);
+ --pf-v6-c-button--m-danger--m-clicked--BackgroundColor: var(--pf-v6-c-button--m-link--m-danger--m-clicked--BackgroundColor);
+ --pf-v6-c-button--m-danger--m-clicked__icon--Color: var(--pf-v6-c-button--m-link--m-danger--m-clicked__icon--Color);
+}
+.pf-v6-c-button.pf-m-link.pf-m-display-lg {
+ --pf-v6-c-button--FontSize: var(--pf-v6-c-button--m-link--m-display-lg--FontSize);
+}
+.pf-v6-c-button.pf-m-warning {
+ --pf-v6-c-button--Color: var(--pf-v6-c-button--m-warning--Color);
+ --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--m-warning--BackgroundColor);
+ --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--m-warning__icon--Color);
+ --pf-v6-c-button--hover--Color: var(--pf-v6-c-button--m-warning--hover--Color);
+ --pf-v6-c-button--hover--BackgroundColor: var(--pf-v6-c-button--m-warning--hover--BackgroundColor);
+ --pf-v6-c-button--hover__icon--Color: var(--pf-v6-c-button--m-warning--hover__icon--Color);
+ --pf-v6-c-button--m-clicked--Color: var(--pf-v6-c-button--m-warning--m-clicked--Color);
+ --pf-v6-c-button--m-clicked--BackgroundColor: var(--pf-v6-c-button--m-warning--m-clicked--BackgroundColor);
+ --pf-v6-c-button--m-clicked__icon--Color: var(--pf-v6-c-button--m-warning--m-clicked__icon--Color);
+}
+.pf-v6-c-button.pf-m-danger {
+ --pf-v6-c-button--Color: var(--pf-v6-c-button--m-danger--Color);
+ --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--m-danger--BackgroundColor);
+ --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--m-danger__icon--Color);
+ --pf-v6-c-button--hover--Color: var(--pf-v6-c-button--m-danger--hover--Color);
+ --pf-v6-c-button--hover--BackgroundColor: var(--pf-v6-c-button--m-danger--hover--BackgroundColor);
+ --pf-v6-c-button--hover__icon--Color: var(--pf-v6-c-button--m-danger--hover__icon--Color);
+ --pf-v6-c-button--m-clicked--Color: var(--pf-v6-c-button--m-danger--m-clicked--Color);
+ --pf-v6-c-button--m-clicked--BackgroundColor: var(--pf-v6-c-button--m-danger--m-clicked--BackgroundColor);
+ --pf-v6-c-button--m-clicked__icon--Color: var(--pf-v6-c-button--m-danger--m-clicked__icon--Color);
+}
+.pf-v6-c-button.pf-m-control {
+ --pf-v6-c-button--BorderRadius: var(--pf-v6-c-button--m-control--BorderRadius);
+ --pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-button--m-control--PaddingInlineStart);
+ --pf-v6-c-button--PaddingInlineEnd: var(--pf-v6-c-button--m-control--PaddingInlineEnd);
+ --pf-v6-c-button--Color: var(--pf-v6-c-button--m-control--Color);
+ --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--m-control--BackgroundColor);
+ --pf-v6-c-button--BorderColor: var(--pf-v6-c-button--m-control--BorderColor);
+ --pf-v6-c-button--BorderWidth: var(--pf-v6-c-button--m-control--BorderWidth);
+ --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--m-control__icon--Color);
+ --pf-v6-c-button--hover--Color: var(--pf-v6-c-button--m-control--hover--Color);
+ --pf-v6-c-button--hover--BackgroundColor: var(--pf-v6-c-button--m-control--hover--BackgroundColor);
+ --pf-v6-c-button--hover--BorderColor: var(--pf-v6-c-button--m-control--hover--BorderColor);
+ --pf-v6-c-button--hover--BorderWidth: var(--pf-v6-c-button--m-control--hover--BorderWidth);
+ --pf-v6-c-button--hover__icon--Color: var(--pf-v6-c-button--m-control--hover__icon--Color);
+ --pf-v6-c-button--m-clicked--Color: var(--pf-v6-c-button--m-control--m-clicked--Color);
+ --pf-v6-c-button--m-clicked--BackgroundColor: var(--pf-v6-c-button--m-control--m-clicked--BackgroundColor);
+ --pf-v6-c-button--m-clicked--BorderColor: var(--pf-v6-c-button--m-control--m-clicked--BorderColor);
+ --pf-v6-c-button--m-clicked--BorderWidth: var(--pf-v6-c-button--m-control--m-clicked--BorderWidth);
+ --pf-v6-c-button--m-clicked__icon--Color: var(--pf-v6-c-button--m-control--m-clicked__icon--Color);
+ --pf-v6-c-button--m-small--PaddingInlineEnd: var(--pf-v6-c-button--m-control--m-small--PaddingInlineEnd);
+ --pf-v6-c-button--m-small--PaddingInlineStart: var(--pf-v6-c-button--m-control--m-small--PaddingInlineStart);
+}
+.pf-v6-c-button.pf-m-stateful {
+ --pf-v6-c-button--BorderRadius: var(--pf-v6-c-button--m-stateful--BorderRadius);
+ --pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-button--m-stateful--PaddingInlineStart);
+ --pf-v6-c-button--PaddingInlineEnd: var(--pf-v6-c-button--m-stateful--PaddingInlineEnd);
+ --pf-v6-c-button--m-small--PaddingInlineEnd: var(--pf-v6-c-button--m-stateful--m-small--PaddingInlineEnd);
+ --pf-v6-c-button--m-small--PaddingInlineStart: var(--pf-v6-c-button--m-stateful--m-small--PaddingInlineStart);
+}
+.pf-v6-c-button.pf-m-read {
+ --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--m-read--BackgroundColor);
+ --pf-v6-c-button--BorderColor: var(--pf-v6-c-button--m-read--BorderColor);
+ --pf-v6-c-button--hover--BackgroundColor: var(--pf-v6-c-button--m-read--hover--BackgroundColor);
+ --pf-v6-c-button--hover--BorderColor: var(--pf-v6-c-button--m-read--hover--BorderColor);
+ --pf-v6-c-button--m-clicked--BackgroundColor: var(--pf-v6-c-button--m-read--m-clicked--BackgroundColor);
+ --pf-v6-c-button--m-clicked--BorderColor: var(--pf-v6-c-button--m-read--m-clicked--BorderColor);
+}
+.pf-v6-c-button.pf-m-unread {
+ --pf-v6-c-button--Color: var(--pf-v6-c-button--m-unread--Color);
+ --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--m-unread--BackgroundColor);
+ --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--m-unread__icon--Color);
+ --pf-v6-c-button--hover--Color: var(--pf-v6-c-button--m-unread--hover--Color);
+ --pf-v6-c-button--hover--BackgroundColor: var(--pf-v6-c-button--m-unread--hover--BackgroundColor);
+ --pf-v6-c-button--hover__icon--Color: var(--pf-v6-c-button--m-unread--hover__icon--Color);
+ --pf-v6-c-button--m-clicked--Color: var(--pf-v6-c-button--m-unread--m-clicked--Color);
+ --pf-v6-c-button--m-clicked--BackgroundColor: var(--pf-v6-c-button--m-unread--m-clicked--BackgroundColor);
+ --pf-v6-c-button--m-clicked__icon--Color: var(--pf-v6-c-button--m-unread--m-clicked__icon--Color);
+}
+.pf-v6-c-button.pf-m-attention {
+ --pf-v6-c-button--Color: var(--pf-v6-c-button--m-attention--Color);
+ --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--m-attention--BackgroundColor);
+ --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--m-attention__icon--Color);
+ --pf-v6-c-button--hover--Color: var(--pf-v6-c-button--m-attention--hover--Color);
+ --pf-v6-c-button--hover--BackgroundColor: var(--pf-v6-c-button--m-attention--hover--BackgroundColor);
+ --pf-v6-c-button--hover__icon--Color: var(--pf-v6-c-button--m-attention--hover__icon--Color);
+ --pf-v6-c-button--m-clicked--Color: var(--pf-v6-c-button--m-attention--m-clicked--Color);
+ --pf-v6-c-button--m-clicked--BackgroundColor: var(--pf-v6-c-button--m-attention--m-clicked--BackgroundColor);
+ --pf-v6-c-button--m-clicked__icon--Color: var(--pf-v6-c-button--m-attention--m-clicked__icon--Color);
+}
+.pf-v6-c-button.pf-m-plain {
+ --pf-v6-c-button--BorderRadius: var(--pf-v6-c-button--m-plain--BorderRadius);
+ --pf-v6-c-button--Color: var(--pf-v6-c-button--m-plain--Color);
+ --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--m-plain__icon--Color);
+ --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--m-plain--BackgroundColor);
+ --pf-v6-c-button--PaddingInlineEnd: var(--pf-v6-c-button--m-plain--PaddingInlineEnd);
+ --pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-button--m-plain--PaddingInlineStart);
+ --pf-v6-c-button__progress--Color: var(--pf-v6-c-button--m-in-progress--m-plain--Color);
+ --pf-v6-c-button--hover--Color: var(--pf-v6-c-button--m-plain--hover--Color);
+ --pf-v6-c-button--hover--BackgroundColor: var(--pf-v6-c-button--m-plain--hover--BackgroundColor);
+ --pf-v6-c-button--m-clicked--Color: var(--pf-v6-c-button--m-plain--m-clicked--Color);
+ --pf-v6-c-button--m-clicked--BackgroundColor: var(--pf-v6-c-button--m-plain--m-clicked--BackgroundColor);
+ --pf-v6-c-button--disabled--Color: var(--pf-v6-c-button--m-plain--disabled--Color);
+ --pf-v6-c-button--disabled__icon--Color: var(--pf-v6-c-button--m-plain--disabled__icon--Color);
+ --pf-v6-c-button--disabled--BackgroundColor: var(--pf-v6-c-button--m-plain--disabled--BackgroundColor);
+ --pf-v6-c-button--m-small--PaddingInlineEnd: var(--pf-v6-c-button--m-plain--m-small--PaddingInlineEnd);
+ --pf-v6-c-button--m-small--PaddingInlineStart: var(--pf-v6-c-button--m-plain--m-small--PaddingInlineStart);
+}
+.pf-v6-c-button.pf-m-plain.pf-m-no-padding {
+ --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--m-plain--m-no-padding__icon--Color);
+ --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--m-plain--m-no-padding--BackgroundColor);
+ --pf-v6-c-button--hover--BackgroundColor: var(--pf-v6-c-button--m-plain--m-no-padding--hover--BackgroundColor);
+ --pf-v6-c-button--m-clicked--BackgroundColor: var(--pf-v6-c-button--m-plain--m-no-padding--m-clicked--BackgroundColor);
+ --pf-v6-c-button--PaddingBlockStart: var(--pf-v6-c-button--m-plain--m-no-padding--PaddingBlockStart);
+ --pf-v6-c-button--PaddingBlockEnd: var(--pf-v6-c-button--m-plain--m-no-padding--PaddingBlockEnd);
+ --pf-v6-c-button--PaddingInlineEnd: var(--pf-v6-c-button--m-plain--m-no-padding--PaddingInlineEnd);
+ --pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-button--m-plain--m-no-padding--PaddingInlineStart);
+ --pf-v6-c-button--m-small--PaddingInlineEnd: var(--pf-v6-c-button--m-plain--m-no-padding--m-small--PaddingInlineEnd);
+ --pf-v6-c-button--m-small--PaddingInlineStart: var(--pf-v6-c-button--m-plain--m-no-padding--m-small--PaddingInlineStart);
+ border: 0;
+ 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-link:not(.pf-m-inline):hover::after, .pf-v6-c-button.pf-m-link:not(.pf-m-inline):focus::after, .pf-v6-c-button.pf-m-plain:not(.pf-m-no-padding):hover::after, .pf-v6-c-button.pf-m-plain:not(.pf-m-no-padding):focus::after {
+ border: var(--pf-t--global--border--width--regular) solid var(--pf-t--global--border--color--high-contrast);
+}
+.pf-v6-c-button.pf-m-link:not(.pf-m-inline).pf-m-clicked::after, .pf-v6-c-button.pf-m-plain:not(.pf-m-no-padding).pf-m-clicked::after {
+ border-width: var(--pf-t--global--border--width--strong);
+}
+.pf-v6-c-button.pf-m-block {
+ --pf-v6-c-button--Display: var(--pf-v6-c-button--m-block--Display);
+ width: var(--pf-v6-c-button--m-block--Width);
+}
+.pf-v6-c-button.pf-m-small {
+ --pf-v6-c-button--PaddingBlockStart: var(--pf-v6-c-button--m-small--PaddingBlockStart);
+ --pf-v6-c-button--PaddingInlineEnd: var(--pf-v6-c-button--m-small--PaddingInlineEnd);
+ --pf-v6-c-button--PaddingBlockEnd: var(--pf-v6-c-button--m-small--PaddingBlockEnd);
+ --pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-button--m-small--PaddingInlineStart);
+}
+.pf-v6-c-button.pf-m-display-lg {
+ --pf-v6-c-button--PaddingBlockStart: var(--pf-v6-c-button--m-display-lg--PaddingBlockStart);
+ --pf-v6-c-button--PaddingInlineEnd: var(--pf-v6-c-button--m-display-lg--PaddingInlineEnd);
+ --pf-v6-c-button--PaddingBlockEnd: var(--pf-v6-c-button--m-display-lg--PaddingBlockEnd);
+ --pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-button--m-display-lg--PaddingInlineStart);
+ --pf-v6-c-button--FontSize: var(--pf-v6-c-button--m-display-lg--FontSize);
+}
+.pf-v6-c-button.pf-m-favorite .pf-v6-c-button__icon {
+ display: grid;
+ transition-timing-function: var(--pf-v6-c-button--m-favorite__icon--TransitionTimingFunction);
+ transition-duration: var(--pf-v6-c-button--m-favorite__icon--TransitionDuration);
+}
+.pf-v6-c-button.pf-m-favorited {
+ --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--m-favorited__icon--Color);
+ --pf-v6-c-button--m-plain--m-no-padding__icon--Color: var(--pf-v6-c-button--m-favorited__icon--Color);
+ --pf-v6-c-button--hover__icon--Color: var(--pf-v6-c-button--m-favorited--hover__icon--Color);
+ --pf-v6-c-button--m-plain--m-no-padding--hover__icon--Color: var(--pf-v6-c-button--m-favorited--hover__icon--Color);
+ --pf-v6-c-button__icon--favorite--Opacity: var(--pf-v6-c-button--m-favorited__icon--favorite--Opacity);
+ --pf-v6-c-button__icon--favorited--Opacity: var(--pf-v6-c-button--m-favorited__icon--favorited--Opacity);
+}
+.pf-v6-c-button.pf-m-favorited .pf-v6-c-button__icon {
+ animation-name: pf-v6-c-button-icon-favorited;
+ animation-duration: var(--pf-v6-c-button--m-favorited__icon--AnimationDuration);
+ animation-timing-function: var(--pf-v6-c-button--m-favorited__icon--AnimationTimingFunction);
+}
+.pf-v6-c-button.pf-m-settings {
+ --pf-v6-c-button__icon--TransitionProperty: rotate;
+ --pf-v6-c-button__icon--TransitionDuration: var(--pf-v6-c-button--m-settings__icon--TransitionDuration);
+ --pf-v6-c-button__icon--TransitionTimingFunction: var(--pf-v6-c-button--m-settings__icon--TransitionTimingFunction);
+ --pf-v6-c-button--hover__icon--TransitionProperty: rotate;
+ --pf-v6-c-button--hover__icon--TransitionDuration: var(--pf-v6-c-button--m-settings--hover__icon--TransitionDuration);
+ --pf-v6-c-button--hover__icon--TransitionTimingFunction: var(--pf-v6-c-button--m-settings--hover__icon--TransitionTimingFunction);
+ --pf-v6-c-button--hover__icon--Rotate: var(--pf-v6-c-button--m-settings--hover__icon--Rotate);
+}
+.pf-v6-c-button.pf-m-hamburger {
+ --pf-v6-c-button__icon--TransitionDelay: var(--pf-v6-c-button--hamburger-icon--TransitionDuration);
+ --pf-v6-c-button__icon--TransitionDuration: 0s;
+ --pf-v6-c-button__icon--TransitionProperty: scale;
+ --pf-v6-c-button--hover__icon--TransitionDelay: var(--pf-v6-c-button--hamburger-icon--TransitionDuration);
+ --pf-v6-c-button--hover__icon--TransitionDuration: 0s;
+ --pf-v6-c-button--hover__icon--TransitionProperty: scale;
+}
+.pf-v6-c-button.pf-m-hamburger.pf-m-expand {
+ --pf-v6-c-button--hamburger-icon--top--path: var(--pf-v6-c-button--hamburger-icon--top--collapse--path);
+ --pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--collapse--path);
+ --pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--collapse--path);
+ --pf-v6-c-button__icon--TransitionDelay: 0s;
+ --pf-v6-c-button__icon--ScaleX: var(--pf-v6-c-button--m-hamburger__icon--m-expand--ScaleX);
+ --pf-v6-c-button--hover__icon--TransitionDelay: 0s;
+ --pf-v6-c-button--hover__icon--ScaleX: var(--pf-v6-c-button--m-hamburger__icon--m-expand--ScaleX);
+}
+.pf-v6-c-button.pf-m-hamburger.pf-m-collapse {
+ --pf-v6-c-button--hamburger-icon--top--path: var(--pf-v6-c-button--hamburger-icon--top--collapse--path);
+ --pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--collapse--path);
+ --pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--collapse--path);
+ --pf-v6-c-button__icon--TransitionDelay: 0s;
+ --pf-v6-c-button__icon--ScaleX: 1;
+ --pf-v6-c-button--hover__icon--TransitionDelay: 0s;
+ --pf-v6-c-button--hover__icon--ScaleX: 1;
+}
+.pf-v6-c-button:hover, .pf-v6-c-button:focus {
+ --pf-v6-c-button--Color: var(--pf-v6-c-button--hover--Color);
+ --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--hover--BackgroundColor);
+ --pf-v6-c-button--BorderColor: var(--pf-v6-c-button--hover--BorderColor);
+ --pf-v6-c-button--BorderWidth: var(--pf-v6-c-button--hover--BorderWidth);
+ --pf-v6-c-button--ScaleX: var(--pf-v6-c-button--hover--ScaleX);
+ --pf-v6-c-button--ScaleY: var(--pf-v6-c-button--hover--ScaleY);
+ --pf-v6-c-button--m-plain--m-no-padding__icon--Color: var(--pf-v6-c-button--m-plain--m-no-padding--hover__icon--Color);
+ --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--hover__icon--Color);
+ --pf-v6-c-button__icon--TransitionTimingFunction: var(--pf-v6-c-button--hover__icon--TransitionTimingFunction);
+ --pf-v6-c-button__icon--TransitionDuration: var(--pf-v6-c-button--hover__icon--TransitionDuration);
+ --pf-v6-c-button__icon--TransitionProperty: var(--pf-v6-c-button--hover__icon--TransitionProperty);
+ --pf-v6-c-button__icon--Rotate: var(--pf-v6-c-button--hover__icon--Rotate);
+ --pf-v6-c-button__icon--ScaleX: var(--pf-v6-c-button--hover__icon--ScaleX);
+ --pf-v6-c-button__icon--ScaleY: var(--pf-v6-c-button--hover__icon--ScaleY);
+ text-decoration-line: var(--pf-v6-c-button--hover--TextDecorationLine);
+ text-decoration-style: var(--pf-v6-c-button--hover--TextDecorationStyle);
+ text-decoration-color: var(--pf-v6-c-button--hover--TextDecorationColor);
+}
+.pf-v6-c-button:active, .pf-v6-c-button.pf-m-clicked {
+ --pf-v6-c-button--Color: var(--pf-v6-c-button--m-clicked--Color);
+ --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--m-clicked--BackgroundColor);
+ --pf-v6-c-button--BorderWidth: var(--pf-v6-c-button--m-clicked--BorderWidth);
+ --pf-v6-c-button--BorderColor: var(--pf-v6-c-button--m-clicked--BorderColor);
+ --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--m-clicked__icon--Color);
+}
+.pf-v6-c-button:active {
+ background-size: 100%;
+ transition-duration: 0s;
+}
+.pf-v6-c-button:disabled, .pf-v6-c-button.pf-m-disabled {
+ pointer-events: none;
+}
+.pf-v6-c-button:disabled, .pf-v6-c-button.pf-m-disabled, .pf-v6-c-button.pf-m-aria-disabled {
+ color: var(--pf-v6-c-button--disabled--Color);
+ text-decoration-color: var(--pf-v6-c-button--disabled--TextDecorationColor);
+ background: var(--pf-v6-c-button--disabled--BackgroundColor);
+}
+.pf-v6-c-button:disabled::after, .pf-v6-c-button.pf-m-disabled::after, .pf-v6-c-button.pf-m-aria-disabled::after {
+ border-color: transparent;
+}
+.pf-v6-c-button:disabled .pf-v6-c-button__icon, .pf-v6-c-button.pf-m-disabled .pf-v6-c-button__icon, .pf-v6-c-button.pf-m-aria-disabled .pf-v6-c-button__icon {
+ color: var(--pf-v6-c-button--disabled__icon--Color);
+}
+.pf-v6-c-button.pf-m-aria-disabled {
+ --pf-v6-c-button--m-link--m-inline--hover--TextDecorationLine: var(--pf-v6-c-button--TextDecorationLine);
+ --pf-v6-c-button--m-link--m-inline--hover--TextDecorationStyle: var(--pf-v6-c-button--TextDecorationStyle);
+ cursor: default;
+}
+.pf-v6-c-button.pf-m-progress {
+ --pf-v6-c-button--PaddingInlineEnd: var(--pf-v6-c-button--m-progress--PaddingInlineEnd);
+ --pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-button--m-progress--PaddingInlineStart);
+}
+.pf-v6-c-button.pf-m-in-progress {
+ --pf-v6-c-button--m-link--m-inline--PaddingInlineStart: var(--pf-v6-c-button--m-link--m-inline--m-in-progress--PaddingInlineStart);
+}
+.pf-v6-c-button.pf-m-in-progress:not(.pf-m-plain) {
+ --pf-v6-c-button--PaddingInlineEnd: var(--pf-v6-c-button--m-in-progress--PaddingInlineEnd);
+ --pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-button--m-in-progress--PaddingInlineStart);
+}
+.pf-v6-c-button.pf-m-in-progress.pf-m-plain {
+ --pf-v6-c-button__progress--InsetInlineStart: var(--pf-v6-c-button--m-in-progress--m-plain__progress--InsetInlineStart);
+ --pf-v6-c-button__progress--TranslateX: var(--pf-v6-c-button--m-in-progress--m-plain__progress--TranslateX);
+}
+.pf-v6-c-button.pf-m-in-progress.pf-m-plain > :not(.pf-v6-c-button__progress) {
+ opacity: 0;
+}
+.pf-v6-c-button.pf-m-notify .pf-v6-c-button__icon {
+ animation-name: pf-v6-c-button-icon-notify;
+ animation-duration: var(--pf-v6-c-button--m-notify__icon--AnimationDuration--notify);
+ animation-timing-function: var(--pf-v6-c-button--m-notify__icon--AnimationTimingFunction--notify);
+}
+
+.pf-v6-c-button__icon {
+ margin-inline-start: var(--pf-v6-c-button__icon--MarginInlineStart);
+ margin-inline-end: var(--pf-v6-c-button__icon--MarginInlineEnd);
+ color: var(--pf-v6-c-button__icon--Color);
+ transition-delay: var(--pf-v6-c-button__icon--TransitionDelay);
+ transition-timing-function: var(--pf-v6-c-button__icon--TransitionTimingFunction);
+ transition-duration: var(--pf-v6-c-button__icon--TransitionDuration);
+ rotate: var(--pf-v6-c-button__icon--Rotate);
+ scale: var(--pf-v6-c-button__icon--ScaleX) var(--pf-v6-c-button__icon--ScaleY);
+}
+.pf-v6-c-button__icon.pf-m-start {
+ --pf-v6-c-button__icon--MarginInlineEnd: var(--pf-v6-c-button__icon--m-start--MarginInlineEnd);
+}
+.pf-v6-c-button__icon.pf-m-end {
+ --pf-v6-c-button__icon--MarginInlineStart: var(--pf-v6-c-button__icon--m-end--MarginInlineStart);
+}
+
+.pf-v6-c-button__icon-favorite,
+.pf-v6-c-button__icon-favorited {
+ grid-area: 1/1/1/1;
+ transition-duration: var(--pf-v6-c-button__icon--favorite--TransitionDuration);
+}
+
+.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;
+ }
+}
\ No newline at end of file
diff --git a/packages/react-docs/patternfly-docs/drawer.css b/packages/react-docs/patternfly-docs/drawer.css
new file mode 100644
index 00000000000..38c4c716f2f
--- /dev/null
+++ b/packages/react-docs/patternfly-docs/drawer.css
@@ -0,0 +1,854 @@
+.pf-v6-c-drawer {
+ --pf-v6-c-drawer__section--BackgroundColor: var(--pf-t--global--background--color--primary--default);
+ --pf-v6-c-drawer__section--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
+ --pf-v6-c-drawer__content--FlexBasis: 100%;
+ --pf-v6-c-drawer__content--BackgroundColor: transparent;
+ --pf-v6-c-drawer__content--m-primary--BackgroundColor: var(--pf-t--global--background--color--primary--default);
+ --pf-v6-c-drawer__content--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
+ --pf-v6-c-drawer__content--ZIndex: var(--pf-t--global--z-index--xs);
+ --pf-v6-c-drawer__panel--MinWidth: 50%;
+ --pf-v6-c-drawer__panel--MaxHeight: auto;
+ --pf-v6-c-drawer__panel--ZIndex: var(--pf-t--global--z-index--sm);
+ --pf-v6-c-drawer__panel--BackgroundColor: var(--pf-t--global--background--color--floating--default);
+ --pf-v6-c-drawer__panel--m-inline--BackgroundColor: var(--pf-t--global--background--color--primary--default);
+ --pf-v6-c-drawer__panel--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
+ --pf-v6-c-drawer__panel--RowGap: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-drawer__panel--PaddingBlockStart: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-drawer__panel--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-drawer__panel--TransitionDelay: 0s, var(--pf-v6-c-drawer__panel--TransitionDelay--focus), var(--pf-v6-c-drawer__panel--TransitionDelay--focus);
+ --pf-v6-c-drawer__panel--TransitionDelay--focus: var(--pf-v6-c-drawer__panel--TransitionDuration--fade);
+ --pf-v6-c-drawer__panel--TransitionDelay--expand--focus: 0s;
+ --pf-v6-c-drawer__panel--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate);
+ --pf-v6-c-drawer__panel--TransitionDuration--fade: var(--pf-t--global--motion--duration--fade--default);
+ --pf-v6-c-drawer__panel--TransitionDuration: var(--pf-v6-c-drawer__panel--TransitionDuration--fade), 0s, 0s;
+ --pf-v6-c-drawer__panel--TransitionProperty: opacity, visibility, transform;
+ --pf-v6-c-drawer__panel--Opacity: 0;
+ --pf-v6-c-drawer--m-expanded__panel--Opacity: 1;
+ --pf-v6-c-drawer__panel--FlexBasis: 100%;
+ --pf-v6-c-drawer__panel--md--FlexBasis--min: 1.5rem;
+ --pf-v6-c-drawer__panel--md--FlexBasis: 50%;
+ --pf-v6-c-drawer__panel--md--FlexBasis--max: 100%;
+ --pf-v6-c-drawer__panel--xl--MinWidth: 28.125rem;
+ --pf-v6-c-drawer__panel--xl--FlexBasis: 28.125rem;
+ --pf-v6-c-drawer--m-panel-bottom__panel--md--MinHeight: 50%;
+ --pf-v6-c-drawer--m-panel-bottom__panel--xl--MinHeight: 18.75rem;
+ --pf-v6-c-drawer--m-panel-bottom__panel--xl--FlexBasis: 18.75rem;
+ --pf-v6-c-drawer__panel--m-resizable--FlexDirection: row;
+ --pf-v6-c-drawer__panel--m-resizable--md--FlexBasis--min: var(--pf-v6-c-drawer__splitter--m-vertical--Width);
+ --pf-v6-c-drawer__panel--m-resizable--MinWidth: 1.5rem;
+ --pf-v6-c-drawer--m-panel-bottom__panel--m-resizable--FlexDirection: column;
+ --pf-v6-c-drawer--m-panel-bottom__panel--m-resizable--md--FlexBasis--min: 1.5rem;
+ --pf-v6-c-drawer--m-panel-bottom__panel--m-resizable--MinHeight: 1.5rem;
+ --pf-v6-c-drawer__head--ColumnGap: var(--pf-t--global--spacer--gap--text-to-element--default);
+ --pf-v6-c-drawer__head--PaddingBlockStart: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-drawer__head--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-drawer__head--PaddingInlineStart: var(--pf-t--global--spacer--md);
+ --pf-v6-c-drawer__head--PaddingInlineEnd: var(--pf-t--global--spacer--md);
+ --pf-v6-c-drawer__description--PaddingInlineStart: var(--pf-t--global--spacer--md);
+ --pf-v6-c-drawer__description--PaddingInlineEnd: var(--pf-t--global--spacer--md);
+ --pf-v6-c-drawer__body--PaddingBlockStart--base: var(--pf-t--global--spacer--md);
+ --pf-v6-c-drawer__body--PaddingInlineEnd--base: var(--pf-t--global--spacer--md);
+ --pf-v6-c-drawer__body--PaddingBlockEnd--base: var(--pf-t--global--spacer--md);
+ --pf-v6-c-drawer__body--PaddingInlineStart--base: var(--pf-t--global--spacer--md);
+ --pf-v6-c-drawer__content__body--PaddingBlockStart: 0;
+ --pf-v6-c-drawer__content__body--PaddingInlineEnd: 0;
+ --pf-v6-c-drawer__content__body--PaddingBlockEnd: 0;
+ --pf-v6-c-drawer__content__body--PaddingInlineStart: 0;
+ --pf-v6-c-drawer__panel__body--PaddingBlockStart: var(--pf-v6-c-drawer__body--PaddingBlockStart--base);
+ --pf-v6-c-drawer__panel__body--PaddingInlineEnd: var(--pf-v6-c-drawer__body--PaddingInlineEnd--base);
+ --pf-v6-c-drawer__panel__body--PaddingBlockEnd: var(--pf-v6-c-drawer__body--PaddingBlockEnd--base);
+ --pf-v6-c-drawer__panel__body--PaddingInlineStart: var(--pf-v6-c-drawer__body--PaddingInlineStart--base);
+ --pf-v6-c-drawer__body--m-padding--PaddingBlockStart: var(--pf-t--global--spacer--md);
+ --pf-v6-c-drawer__body--m-padding--PaddingInlineEnd: var(--pf-t--global--spacer--md);
+ --pf-v6-c-drawer__body--m-padding--PaddingBlockEnd: var(--pf-t--global--spacer--md);
+ --pf-v6-c-drawer__body--m-padding--PaddingInlineStart: var(--pf-t--global--spacer--md);
+ --pf-v6-c-drawer__splitter--Height: 0.5625rem;
+ --pf-v6-c-drawer__splitter--Width: 100%;
+ --pf-v6-c-drawer__splitter--BackgroundColor: var(--pf-t--global--background--color--primary--default);
+ --pf-v6-c-drawer__splitter--Cursor: row-resize;
+ --pf-v6-c-drawer__splitter--m-vertical--Height: 100%;
+ --pf-v6-c-drawer__splitter--m-vertical--Width: 0.5625rem;
+ --pf-v6-c-drawer__splitter--m-vertical--Cursor: col-resize;
+ --pf-v6-c-drawer--m-inline__splitter--focus--OutlineOffset: -0.0625rem;
+ --pf-v6-c-drawer__splitter--after--BorderColor: var(--pf-t--global--border--color--default);
+ --pf-v6-c-drawer__splitter--after--border-width--base: var(--pf-t--global--border--width--divider--default);
+ --pf-v6-c-drawer__splitter--after--BorderBlockStartWidth: 0;
+ --pf-v6-c-drawer__splitter--after--BorderInlineEndWidth: var(--pf-v6-c-drawer__splitter--after--border-width--base);
+ --pf-v6-c-drawer__splitter--after--BorderBlockEndWidth: 0;
+ --pf-v6-c-drawer__splitter--after--BorderInlineStartWidth: var(--pf-v6-c-drawer__splitter--after--border-width--base);
+ --pf-v6-c-drawer--m-panel-bottom__splitter--after--BorderBlockStartWidth: var(--pf-v6-c-drawer__splitter--after--border-width--base);
+ --pf-v6-c-drawer--m-panel-bottom__splitter--after--BorderBlockEndWidth: var(--pf-v6-c-drawer__splitter--after--border-width--base);
+ --pf-v6-c-drawer--m-inline__splitter--m-vertical--Width: 0.625rem;
+ --pf-v6-c-drawer--m-inline__splitter-handle--InsetInlineStart: 50%;
+ --pf-v6-c-drawer--m-inline--m-panel-bottom__splitter--Height: 0.625rem;
+ --pf-v6-c-drawer--m-inline--m-panel-bottom__splitter-handle--InsetBlockStart: 50%;
+ --pf-v6-c-drawer--m-inline--m-panel-bottom__splitter--after--BorderBlockStartWidth: var(--pf-v6-c-drawer__splitter--after--border-width--base);
+ --pf-v6-c-drawer__splitter-handle--InsetBlockStart: 50%;
+ --pf-v6-c-drawer__splitter-handle--InsetInlineStart: calc(50% - var(--pf-v6-c-drawer__splitter--after--border-width--base));
+ --pf-v6-c-drawer--m-panel-left__splitter-handle--InsetInlineStart: 50%;
+ --pf-v6-c-drawer--m-panel-bottom__splitter-handle--InsetBlockStart: calc(50% - var(--pf-v6-c-drawer__splitter--after--border-width--base));
+ --pf-v6-c-drawer__splitter-handle--after--BorderColor: var(--pf-t--global--border--color--default);
+ --pf-v6-c-drawer__splitter-handle--after--BorderBlockStartWidth: var(--pf-t--global--border--width--divider--default);
+ --pf-v6-c-drawer__splitter-handle--after--BorderInlineEndWidth: 0;
+ --pf-v6-c-drawer__splitter-handle--after--BorderBlockEndWidth: var(--pf-t--global--border--width--divider--default);
+ --pf-v6-c-drawer__splitter-handle--after--BorderInlineStartWidth: 0;
+ --pf-v6-c-drawer__splitter--hover__splitter-handle--after--BorderColor: var(--pf-t--global--border--color--hover);
+ --pf-v6-c-drawer__splitter--m-vertical__splitter-handle--after--BorderBlockStartWidth: 0;
+ --pf-v6-c-drawer__splitter--m-vertical__splitter-handle--after--BorderInlineEndWidth: var(--pf-t--global--border--width--divider--default);
+ --pf-v6-c-drawer__splitter--m-vertical__splitter-handle--after--BorderBlockEndWidth: 0;
+ --pf-v6-c-drawer__splitter--m-vertical__splitter-handle--after--BorderInlineStartWidth: var(--pf-t--global--border--width--divider--default);
+ --pf-v6-c-drawer__splitter-handle--after--Width: 0.75rem;
+ --pf-v6-c-drawer__splitter-handle--after--Height: 0.25rem;
+ --pf-v6-c-drawer__splitter--m-vertical__splitter-handle--after--Width: 0.25rem;
+ --pf-v6-c-drawer__splitter--m-vertical__splitter-handle--after--Height: 0.75rem;
+ --pf-v6-c-drawer__actions--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--compact) * -1.5);
+ --pf-v6-c-drawer__actions--MarginInlineEnd: calc(var(--pf-t--global--spacer--control--horizontal--compact) * -1.5);
+ --pf-v6-c-drawer__panel--BoxShadow: none;
+ --pf-v6-c-drawer--m-expanded--m-panel-bottom__panel--BoxShadow: var(--pf-t--global--box-shadow--md--top);
+ --pf-v6-c-drawer__panel--after--Width: var(--pf-t--global--border--width--divider--default);
+ --pf-v6-c-drawer--m-panel-bottom__panel--after--Height: var(--pf-t--global--border--width--divider--default);
+ --pf-v6-c-drawer__panel--after--BackgroundColor: transparent;
+ --pf-v6-c-drawer--m-inline--m-expanded__panel--after--BackgroundColor: var(--pf-t--global--border--color--default);
+ --pf-v6-c-drawer--m-inline__panel--PaddingInlineStart: var(--pf-v6-c-drawer__panel--after--Width);
+ --pf-v6-c-drawer--m-panel-left--m-inline__panel--PaddingInlineEnd: var(--pf-v6-c-drawer__panel--after--Width);
+ --pf-v6-c-drawer--m-panel-bottom--m-inline__panel--PaddingBlockStart: var(--pf-v6-c-drawer__panel--after--Width);
+}
+@media screen and (prefers-reduced-motion: no-preference) {
+ .pf-v6-c-drawer {
+ --pf-v6-c-drawer__panel--TransitionDuration--slide: var(--pf-t--global--motion--duration--slide-in--short);
+ --pf-v6-c-drawer__panel--TransitionDelay--focus: var(--pf-v6-c-drawer__panel--TransitionDuration--slide);
+ --pf-v6-c-drawer__panel--TransitionDelay: 0s, 0s, 0s, 0s, var(--pf-v6-c-drawer__panel--TransitionDelay--focus);
+ --pf-v6-c-drawer__panel--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate);
+ --pf-v6-c-drawer__panel--TransitionDuration: 0s, var(--pf-v6-c-drawer__panel--TransitionDuration--slide), 0s, 0s, 0s;
+ --pf-v6-c-drawer__panel--TransitionProperty: margin, transform, box-shadow, flex-basis, visibility;
+ --pf-v6-c-drawer__panel--Opacity: 1;
+ }
+}
+@media screen and (min-width: 75rem) {
+ .pf-v6-c-drawer {
+ --pf-v6-c-drawer__panel--MinWidth: var(--pf-v6-c-drawer__panel--xl--MinWidth);
+ }
+ .pf-v6-c-drawer.pf-m-panel-bottom {
+ --pf-v6-c-drawer__panel--MinWidth: auto;
+ --pf-v6-c-drawer__panel--MinHeight: var(--pf-v6-c-drawer--m-panel-bottom__panel--xl--MinHeight);
+ }
+}
+
+.pf-v6-c-drawer {
+ --pf-v6-c-drawer--m-expanded__panel--BoxShadow: var(--pf-t--global--box-shadow--md--left);
+ --pf-v6-c-drawer--m-expanded--m-panel-left__panel--BoxShadow: var(--pf-t--global--box-shadow--md--right);
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+ overflow-x: hidden;
+}
+:where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-drawer {
+ --pf-v6-c-drawer--m-expanded__panel--BoxShadow: var(--pf-t--global--box-shadow--md--right);
+}
+
+:where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-drawer {
+ --pf-v6-c-drawer--m-expanded--m-panel-left__panel--BoxShadow: var(--pf-t--global--box-shadow--md--left);
+}
+
+.pf-v6-c-drawer.pf-m-inline, .pf-v6-c-drawer.pf-m-static {
+ --pf-v6-c-drawer__panel--BackgroundColor: var(--pf-v6-c-drawer__panel--m-inline--BackgroundColor);
+}
+.pf-v6-c-drawer.pf-m-inline > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel:not(.pf-m-no-border, .pf-m-resizable), .pf-v6-c-drawer.pf-m-static > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel:not(.pf-m-no-border, .pf-m-resizable) {
+ padding-inline-start: var(--pf-v6-c-drawer--m-inline__panel--PaddingInlineStart);
+}
+.pf-v6-c-drawer.pf-m-panel-left > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
+ order: 0;
+ margin-inline-end: calc(var(--pf-v6-c-drawer__panel--FlexBasis) * -1);
+ transform: translateX(-100%);
+}
+:where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-drawer.pf-m-panel-left > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
+ transform: translateX(calc(-100% * var(--pf-v6-global--inverse--multiplier)));
+}
+
+.pf-v6-c-drawer.pf-m-panel-left > .pf-v6-c-drawer__main > .pf-v6-c-drawer__content {
+ order: 1;
+}
+.pf-v6-c-drawer.pf-m-panel-bottom > .pf-v6-c-drawer__main {
+ flex-direction: column;
+}
+.pf-v6-c-drawer.pf-m-expanded {
+ --pf-v6-c-drawer__panel--TransitionDelay--focus: var(--pf-v6-c-drawer__panel--TransitionDelay--expand--focus);
+}
+.pf-v6-c-drawer.pf-m-expanded > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
+ transform: translateX(-100%);
+ --pf-v6-c-drawer__panel--Opacity: var(--pf-v6-c-drawer--m-expanded__panel--Opacity);
+ visibility: visible;
+}
+:where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-drawer.pf-m-expanded > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
+ transform: translateX(calc(-100% * var(--pf-v6-global--inverse--multiplier)));
+}
+
+.pf-v6-c-drawer.pf-m-expanded.pf-m-panel-left > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
+ transform: translateX(0);
+}
+.pf-v6-c-drawer.pf-m-expanded.pf-m-panel-bottom > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
+ transform: translate(0, -100%);
+}
+.pf-v6-c-drawer.pf-m-resizing {
+ --pf-v6-c-drawer__panel--TransitionProperty: none;
+ pointer-events: none;
+}
+.pf-v6-c-drawer.pf-m-resizing .pf-v6-c-drawer__splitter {
+ pointer-events: auto;
+}
+
+.pf-v6-c-drawer__section {
+ flex-grow: 0;
+ background-color: var(--pf-v6-c-drawer__section--BackgroundColor);
+}
+.pf-v6-c-drawer__section.pf-m-secondary {
+ --pf-v6-c-drawer__section--BackgroundColor: var(--pf-v6-c-drawer__section--m-secondary--BackgroundColor);
+}
+.pf-v6-c-drawer__section.pf-m-no-background {
+ --pf-v6-c-drawer__section--BackgroundColor: transparent;
+}
+
+.pf-v6-c-drawer__main {
+ display: flex;
+ flex: 1;
+ overflow: hidden;
+}
+
+.pf-v6-c-drawer__content,
+.pf-v6-c-drawer__panel,
+.pf-v6-c-drawer__panel-main {
+ display: flex;
+ flex-direction: column;
+ flex-shrink: 0;
+ overflow: auto;
+}
+
+.pf-v6-c-drawer__content {
+ z-index: var(--pf-v6-c-drawer__content--ZIndex);
+ flex-basis: var(--pf-v6-c-drawer__content--FlexBasis);
+ order: 0;
+ background-color: var(--pf-v6-c-drawer__content--BackgroundColor);
+}
+.pf-v6-c-drawer__content.pf-m-primary {
+ --pf-v6-c-drawer__content--BackgroundColor: var(--pf-v6-c-drawer__content--m-primary--BackgroundColor);
+}
+.pf-v6-c-drawer__content.pf-m-secondary {
+ --pf-v6-c-drawer__content--BackgroundColor: var(--pf-v6-c-drawer__content--m-secondary--BackgroundColor);
+}
+.pf-v6-c-drawer__content > .pf-v6-c-drawer__body {
+ padding-block-start: var(--pf-v6-c-drawer__content__body--PaddingBlockStart);
+ padding-block-end: var(--pf-v6-c-drawer__content__body--PaddingBlockEnd);
+ padding-inline-start: var(--pf-v6-c-drawer__content__body--PaddingInlineStart);
+ padding-inline-end: var(--pf-v6-c-drawer__content__body--PaddingInlineEnd);
+}
+
+.pf-v6-c-drawer__panel {
+ position: relative;
+ z-index: var(--pf-v6-c-drawer__panel--ZIndex);
+ flex-basis: var(--pf-v6-c-drawer__panel--FlexBasis);
+ row-gap: var(--pf-v6-c-drawer__panel--RowGap);
+ order: 1;
+ max-height: var(--pf-v6-c-drawer__panel--MaxHeight);
+ overflow: auto;
+ visibility: hidden;
+ background-color: var(--pf-v6-c-drawer__panel--BackgroundColor);
+ box-shadow: var(--pf-v6-c-drawer__panel--BoxShadow);
+ opacity: var(--pf-v6-c-drawer__panel--Opacity);
+ transition-delay: var(--pf-v6-c-drawer__panel--TransitionDelay);
+ transition-timing-function: var(--pf-v6-c-drawer__panel--TransitionTimingFunction);
+ transition-duration: var(--pf-v6-c-drawer__panel--TransitionDuration);
+ -webkit-overflow-scrolling: touch;
+ border: var(--pf-t--global--border--width--regular) solid var(--pf-t--global--border--color--high-contrast);
+}
+.pf-v6-c-drawer__panel::after {
+ position: absolute;
+ inset-block-start: 0;
+ inset-inline-start: 0;
+ width: var(--pf-v6-c-drawer__panel--after--Width);
+ height: 100%;
+ content: "";
+ background-color: var(--pf-v6-c-drawer__panel--after--BackgroundColor);
+}
+.pf-v6-c-drawer__panel:not(.pf-m-resizable) {
+ padding-block-start: var(--pf-v6-c-drawer__panel--PaddingBlockStart);
+ padding-block-end: var(--pf-v6-c-drawer__panel--PaddingBlockEnd);
+}
+.pf-v6-c-drawer__panel.pf-m-secondary {
+ --pf-v6-c-drawer__panel--BackgroundColor: var(--pf-v6-c-drawer__panel--m-secondary--BackgroundColor);
+}
+.pf-v6-c-drawer__panel.pf-m-no-background {
+ --pf-v6-c-drawer__panel--BackgroundColor: transparent;
+}
+@media screen and (min-width: 48rem) {
+ .pf-v6-c-drawer__panel {
+ --pf-v6-c-drawer__panel--FlexBasis:
+ max(
+ var(--pf-v6-c-drawer__panel--md--FlexBasis--min),
+ min(var(--pf-v6-c-drawer__panel--md--FlexBasis), var(--pf-v6-c-drawer__panel--md--FlexBasis--max))
+ );
+ }
+}
+@media screen and (min-width: 75rem) {
+ .pf-v6-c-drawer__panel {
+ --pf-v6-c-drawer__panel--md--FlexBasis: var(--pf-v6-c-drawer__panel--xl--FlexBasis);
+ }
+ .pf-v6-c-drawer.pf-m-panel-bottom .pf-v6-c-drawer__panel {
+ --pf-v6-c-drawer__panel--md--FlexBasis: var(--pf-v6-c-drawer--m-panel-bottom__panel--xl--FlexBasis);
+ }
+}
+
+.pf-v6-c-drawer__panel > .pf-v6-c-drawer__body,
+.pf-v6-c-drawer__panel-main > .pf-v6-c-drawer__body {
+ padding-block-start: var(--pf-v6-c-drawer__panel__body--PaddingBlockStart);
+ padding-block-end: var(--pf-v6-c-drawer__panel__body--PaddingBlockEnd);
+ padding-inline-start: var(--pf-v6-c-drawer__panel__body--PaddingInlineStart);
+ padding-inline-end: var(--pf-v6-c-drawer__panel__body--PaddingInlineEnd);
+}
+
+.pf-v6-c-drawer__panel-main {
+ flex-grow: 1;
+ padding-block-start: var(--pf-v6-c-drawer__panel--PaddingBlockStart);
+ padding-block-end: var(--pf-v6-c-drawer__panel--PaddingBlockEnd);
+}
+
+.pf-v6-c-drawer__head {
+ display: grid;
+ grid-template-columns: auto;
+ grid-auto-columns: max-content;
+ column-gap: var(--pf-v6-c-drawer__head--ColumnGap);
+ padding-block-start: var(--pf-v6-c-drawer__head--PaddingBlockStart);
+ padding-block-end: var(--pf-v6-c-drawer__head--PaddingBlockEnd);
+ padding-inline-start: var(--pf-v6-c-drawer__head--PaddingInlineStart);
+ padding-inline-end: var(--pf-v6-c-drawer__head--PaddingInlineEnd);
+}
+.pf-v6-c-drawer__head > * {
+ grid-column: 1;
+}
+
+.pf-v6-c-drawer__actions {
+ display: flex;
+ grid-row: 1;
+ grid-column: 2;
+ align-self: baseline;
+ margin-block-start: var(--pf-v6-c-drawer__actions--MarginBlockStart);
+ margin-inline-end: var(--pf-v6-c-drawer__actions--MarginInlineEnd);
+}
+
+.pf-v6-c-drawer__description {
+ padding-inline-start: var(--pf-v6-c-drawer__description--PaddingInlineStart);
+ padding-inline-end: var(--pf-v6-c-drawer__description--PaddingInlineEnd);
+}
+
+.pf-v6-c-drawer__body.pf-m-no-padding {
+ padding: 0;
+}
+.pf-v6-c-drawer__body.pf-m-padding {
+ padding-block-start: var(--pf-v6-c-drawer__body--m-padding--PaddingBlockStart);
+ padding-block-end: var(--pf-v6-c-drawer__body--m-padding--PaddingBlockEnd);
+ padding-inline-start: var(--pf-v6-c-drawer__body--m-padding--PaddingInlineStart);
+ padding-inline-end: var(--pf-v6-c-drawer__body--m-padding--PaddingInlineEnd);
+}
+.pf-v6-c-drawer__body:not(.pf-m-no-padding) + * {
+ padding-block-start: 0;
+}
+.pf-v6-c-drawer__body:last-child {
+ flex: 1 1;
+}
+
+.pf-v6-c-drawer__splitter {
+ position: relative;
+ display: none;
+ width: var(--pf-v6-c-drawer__splitter--Width);
+ height: var(--pf-v6-c-drawer__splitter--Height);
+ cursor: var(--pf-v6-c-drawer__splitter--Cursor);
+ background-color: var(--pf-v6-c-drawer__splitter--BackgroundColor);
+}
+.pf-v6-c-drawer__splitter.pf-m-vertical {
+ --pf-v6-c-drawer__splitter--Height: var(--pf-v6-c-drawer__splitter--m-vertical--Height);
+ --pf-v6-c-drawer__splitter--Width: var(--pf-v6-c-drawer__splitter--m-vertical--Width);
+ --pf-v6-c-drawer__splitter--Cursor: var(--pf-v6-c-drawer__splitter--m-vertical--Cursor);
+ --pf-v6-c-drawer__splitter-handle--after--Width: var(--pf-v6-c-drawer__splitter--m-vertical__splitter-handle--after--Width);
+ --pf-v6-c-drawer__splitter-handle--after--Height: var(--pf-v6-c-drawer__splitter--m-vertical__splitter-handle--after--Height);
+ --pf-v6-c-drawer__splitter-handle--after--BorderBlockStartWidth: var(--pf-v6-c-drawer__splitter--m-vertical__splitter-handle--after--BorderBlockStartWidth);
+ --pf-v6-c-drawer__splitter-handle--after--BorderInlineEndWidth: var(--pf-v6-c-drawer__splitter--m-vertical__splitter-handle--after--BorderInlineEndWidth);
+ --pf-v6-c-drawer__splitter-handle--after--BorderBlockEndWidth: var(--pf-v6-c-drawer__splitter--m-vertical__splitter-handle--after--BorderBlockEndWidth);
+ --pf-v6-c-drawer__splitter-handle--after--BorderInlineStartWidth: var(--pf-v6-c-drawer__splitter--m-vertical__splitter-handle--after--BorderInlineStartWidth);
+}
+.pf-v6-c-drawer__splitter:hover, .pf-v6-c-drawer__splitter:focus {
+ --pf-v6-c-drawer__splitter-handle--after--BorderColor: var(--pf-v6-c-drawer__splitter--hover__splitter-handle--after--BorderColor);
+}
+.pf-v6-c-drawer__splitter::after {
+ position: absolute;
+ inset-block-start: 0;
+ inset-block-end: 0;
+ inset-inline-start: 0;
+ inset-inline-end: 0;
+ content: "";
+ border: solid var(--pf-v6-c-drawer__splitter--after--BorderColor);
+ border-block-start-width: var(--pf-v6-c-drawer__splitter--after--BorderBlockStartWidth);
+ border-block-end-width: var(--pf-v6-c-drawer__splitter--after--BorderBlockEndWidth);
+ border-inline-start-width: var(--pf-v6-c-drawer__splitter--after--BorderInlineStartWidth);
+ border-inline-end-width: var(--pf-v6-c-drawer__splitter--after--BorderInlineEndWidth);
+}
+
+.pf-v6-c-drawer__splitter-handle {
+ position: absolute;
+ inset-block-start: var(--pf-v6-c-drawer__splitter-handle--InsetBlockStart);
+ inset-inline-start: var(--pf-v6-c-drawer__splitter-handle--InsetInlineStart);
+ transform: translate(-50%, -50%);
+}
+:where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-drawer__splitter-handle {
+ transform: translate(calc(-50% * var(--pf-v6-global--inverse--multiplier)), -50%);
+}
+
+.pf-v6-c-drawer__splitter-handle::after {
+ display: block;
+ width: var(--pf-v6-c-drawer__splitter-handle--after--Width);
+ height: var(--pf-v6-c-drawer__splitter-handle--after--Height);
+ content: "";
+ border-color: var(--pf-v6-c-drawer__splitter-handle--after--BorderColor);
+ border-style: solid;
+ border-block-start-width: var(--pf-v6-c-drawer__splitter-handle--after--BorderBlockStartWidth);
+ border-block-end-width: var(--pf-v6-c-drawer__splitter-handle--after--BorderBlockEndWidth);
+ border-inline-start-width: var(--pf-v6-c-drawer__splitter-handle--after--BorderInlineStartWidth);
+ border-inline-end-width: var(--pf-v6-c-drawer__splitter-handle--after--BorderInlineEndWidth);
+}
+
+@media screen and (min-width: 48rem) {
+ .pf-v6-c-drawer {
+ min-width: var(--pf-v6-c-drawer__panel--MinWidth);
+ }
+ .pf-v6-c-drawer > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
+ box-shadow: var(--pf-v6-c-drawer--m-expanded__panel--BoxShadow);
+ }
+ .pf-v6-c-drawer > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel.pf-m-resizable {
+ --pf-v6-c-drawer__panel--md--FlexBasis--min: var(--pf-v6-c-drawer__panel--m-resizable--md--FlexBasis--min);
+ flex-direction: var(--pf-v6-c-drawer__panel--m-resizable--FlexDirection);
+ min-width: var(--pf-v6-c-drawer__panel--m-resizable--MinWidth);
+ }
+ .pf-v6-c-drawer > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel.pf-m-resizable::after {
+ width: 0;
+ height: 0;
+ }
+ .pf-v6-c-drawer > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel.pf-m-resizable > .pf-v6-c-drawer__splitter {
+ flex-shrink: 0;
+ }
+ .pf-v6-c-drawer > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel.pf-m-resizable > .pf-v6-c-drawer__panel-main {
+ flex-shrink: 1;
+ }
+ .pf-v6-c-drawer.pf-m-panel-left {
+ --pf-v6-c-drawer--m-expanded__panel--BoxShadow: var(--pf-v6-c-drawer--m-expanded--m-panel-left__panel--BoxShadow);
+ }
+ .pf-v6-c-drawer.pf-m-panel-left.pf-m-inline > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel:not(.pf-m-no-border, .pf-m-resizable), .pf-v6-c-drawer.pf-m-panel-left.pf-m-static > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel:not(.pf-m-no-border, .pf-m-resizable) {
+ padding-inline-start: 0;
+ padding-inline-end: var(--pf-v6-c-drawer--m-panel-left--m-inline__panel--PaddingInlineEnd);
+ }
+ .pf-v6-c-drawer.pf-m-panel-left.pf-m-expanded > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
+ transform: translateX(0);
+ }
+ .pf-v6-c-drawer.pf-m-panel-left > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel::after {
+ inset-inline-start: auto;
+ inset-inline-end: 0;
+ }
+ .pf-v6-c-drawer.pf-m-panel-left > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel.pf-m-resizable > .pf-v6-c-drawer__splitter {
+ --pf-v6-c-drawer__splitter-handle--InsetInlineStart: var(--pf-v6-c-drawer--m-panel-left__splitter-handle--InsetInlineStart);
+ order: 1;
+ }
+ .pf-v6-c-drawer.pf-m-panel-bottom {
+ --pf-v6-c-drawer--m-expanded__panel--BoxShadow: var(--pf-v6-c-drawer--m-expanded--m-panel-bottom__panel--BoxShadow);
+ --pf-v6-c-drawer__panel--MaxHeight: 100%;
+ --pf-v6-c-drawer__panel--FlexBasis--min: var(--pf-v6-c-drawer--m-panel-bottom__panel--FlexBasis--min);
+ min-width: auto;
+ min-height: var(--pf-v6-c-drawer--m-panel-bottom__panel--md--MinHeight);
+ }
+ .pf-v6-c-drawer.pf-m-panel-bottom.pf-m-inline > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel:not(.pf-m-no-border, .pf-m-resizable), .pf-v6-c-drawer.pf-m-panel-bottom.pf-m-static > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel:not(.pf-m-no-border, .pf-m-resizable) {
+ padding-block-start: var(--pf-v6-c-drawer--m-panel-bottom--m-inline__panel--PaddingBlockStart);
+ padding-inline-start: 0;
+ }
+ .pf-v6-c-drawer.pf-m-panel-bottom > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel::after {
+ inset-block-start: 0;
+ inset-inline-start: auto;
+ width: 100%;
+ height: var(--pf-v6-c-drawer--m-panel-bottom__panel--after--Height);
+ }
+ .pf-v6-c-drawer.pf-m-panel-bottom > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel.pf-m-resizable {
+ --pf-v6-c-drawer__panel--md--FlexBasis--min: var(--pf-v6-c-drawer--m-panel-bottom__panel--m-resizable--md--FlexBasis--min);
+ --pf-v6-c-drawer__panel--m-resizable--FlexDirection: var(--pf-v6-c-drawer--m-panel-bottom__panel--m-resizable--FlexDirection);
+ --pf-v6-c-drawer__panel--m-resizable--MinWidth: 0;
+ min-height: var(--pf-v6-c-drawer--m-panel-bottom__panel--m-resizable--MinHeight);
+ }
+ .pf-v6-c-drawer.pf-m-panel-bottom > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel.pf-m-resizable > .pf-v6-c-drawer__splitter {
+ --pf-v6-c-drawer__splitter-handle--InsetBlockStart: var(--pf-v6-c-drawer--m-panel-bottom__splitter-handle--InsetBlockStart);
+ --pf-v6-c-drawer__splitter--after--BorderBlockStartWidth: var(--pf-v6-c-drawer--m-panel-bottom__splitter--after--BorderBlockStartWidth);
+ --pf-v6-c-drawer__splitter--after--BorderInlineEndWidth: 0;
+ --pf-v6-c-drawer__splitter--after--BorderBlockEndWidth: var(--pf-v6-c-drawer--m-panel-bottom__splitter--after--BorderBlockEndWidth);
+ --pf-v6-c-drawer__splitter--after--BorderInlineStartWidth: 0;
+ }
+ .pf-v6-c-drawer.pf-m-inline > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel.pf-m-resizable > .pf-v6-c-drawer__splitter {
+ --pf-v6-c-drawer__splitter--m-vertical--Width: var(--pf-v6-c-drawer--m-inline__splitter--m-vertical--Width);
+ --pf-v6-c-drawer__splitter-handle--InsetInlineStart: var(--pf-v6-c-drawer--m-inline__splitter-handle--InsetInlineStart);
+ outline-offset: var(--pf-v6-c-drawer--m-inline__splitter--focus--OutlineOffset);
+ }
+ .pf-v6-c-drawer.pf-m-inline.pf-m-panel-bottom > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel.pf-m-resizable > .pf-v6-c-drawer__splitter {
+ --pf-v6-c-drawer__splitter--Height: var(--pf-v6-c-drawer--m-inline--m-panel-bottom__splitter--Height);
+ --pf-v6-c-drawer__splitter-handle--InsetBlockStart: var(--pf-v6-c-drawer--m-inline--m-panel-bottom__splitter-handle--InsetBlockStart);
+ --pf-v6-c-drawer__splitter--after--BorderBlockStartWidth: var(--pf-v6-c-drawer--m-inline--m-panel-bottom__splitter--after--BorderBlockStartWidth);
+ --pf-v6-c-drawer__splitter--after--BorderInlineEndWidth: 0;
+ --pf-v6-c-drawer__splitter--after--BorderInlineStartWidth: 0;
+ }
+ .pf-v6-c-drawer > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel.pf-m-no-border,
+ .pf-v6-c-drawer.pf-m-panel-left > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel.pf-m-no-border {
+ --pf-v6-c-drawer--m-expanded__panel--BoxShadow: none;
+ }
+ .pf-v6-c-drawer__splitter {
+ display: block;
+ }
+}
+@media (min-width: 48rem) {
+ .pf-v6-c-drawer__panel.pf-m-width-25 {
+ --pf-v6-c-drawer__panel--md--FlexBasis: 25%;
+ }
+ .pf-v6-c-drawer__panel.pf-m-width-33 {
+ --pf-v6-c-drawer__panel--md--FlexBasis: 33%;
+ }
+ .pf-v6-c-drawer__panel.pf-m-width-50 {
+ --pf-v6-c-drawer__panel--md--FlexBasis: 50%;
+ }
+ .pf-v6-c-drawer__panel.pf-m-width-66 {
+ --pf-v6-c-drawer__panel--md--FlexBasis: 66%;
+ }
+ .pf-v6-c-drawer__panel.pf-m-width-75 {
+ --pf-v6-c-drawer__panel--md--FlexBasis: 75%;
+ }
+ .pf-v6-c-drawer__panel.pf-m-width-100 {
+ --pf-v6-c-drawer__panel--md--FlexBasis: 100%;
+ }
+}
+@media (min-width: 62rem) {
+ .pf-v6-c-drawer__panel.pf-m-width-25-on-lg {
+ --pf-v6-c-drawer__panel--md--FlexBasis: 25%;
+ }
+ .pf-v6-c-drawer__panel.pf-m-width-33-on-lg {
+ --pf-v6-c-drawer__panel--md--FlexBasis: 33%;
+ }
+ .pf-v6-c-drawer__panel.pf-m-width-50-on-lg {
+ --pf-v6-c-drawer__panel--md--FlexBasis: 50%;
+ }
+ .pf-v6-c-drawer__panel.pf-m-width-66-on-lg {
+ --pf-v6-c-drawer__panel--md--FlexBasis: 66%;
+ }
+ .pf-v6-c-drawer__panel.pf-m-width-75-on-lg {
+ --pf-v6-c-drawer__panel--md--FlexBasis: 75%;
+ }
+ .pf-v6-c-drawer__panel.pf-m-width-100-on-lg {
+ --pf-v6-c-drawer__panel--md--FlexBasis: 100%;
+ }
+}
+@media (min-width: 75rem) {
+ .pf-v6-c-drawer__panel.pf-m-width-25-on-xl {
+ --pf-v6-c-drawer__panel--md--FlexBasis: 25%;
+ }
+ .pf-v6-c-drawer__panel.pf-m-width-33-on-xl {
+ --pf-v6-c-drawer__panel--md--FlexBasis: 33%;
+ }
+ .pf-v6-c-drawer__panel.pf-m-width-50-on-xl {
+ --pf-v6-c-drawer__panel--md--FlexBasis: 50%;
+ }
+ .pf-v6-c-drawer__panel.pf-m-width-66-on-xl {
+ --pf-v6-c-drawer__panel--md--FlexBasis: 66%;
+ }
+ .pf-v6-c-drawer__panel.pf-m-width-75-on-xl {
+ --pf-v6-c-drawer__panel--md--FlexBasis: 75%;
+ }
+ .pf-v6-c-drawer__panel.pf-m-width-100-on-xl {
+ --pf-v6-c-drawer__panel--md--FlexBasis: 100%;
+ }
+}
+@media (min-width: 90.625rem) {
+ .pf-v6-c-drawer__panel.pf-m-width-25-on-2xl {
+ --pf-v6-c-drawer__panel--md--FlexBasis: 25%;
+ }
+ .pf-v6-c-drawer__panel.pf-m-width-33-on-2xl {
+ --pf-v6-c-drawer__panel--md--FlexBasis: 33%;
+ }
+ .pf-v6-c-drawer__panel.pf-m-width-50-on-2xl {
+ --pf-v6-c-drawer__panel--md--FlexBasis: 50%;
+ }
+ .pf-v6-c-drawer__panel.pf-m-width-66-on-2xl {
+ --pf-v6-c-drawer__panel--md--FlexBasis: 66%;
+ }
+ .pf-v6-c-drawer__panel.pf-m-width-75-on-2xl {
+ --pf-v6-c-drawer__panel--md--FlexBasis: 75%;
+ }
+ .pf-v6-c-drawer__panel.pf-m-width-100-on-2xl {
+ --pf-v6-c-drawer__panel--md--FlexBasis: 100%;
+ }
+}
+@media (min-width: 48rem) {
+ .pf-v6-c-drawer.pf-m-inline > .pf-v6-c-drawer__main > .pf-v6-c-drawer__content,
+ .pf-v6-c-drawer.pf-m-static > .pf-v6-c-drawer__main > .pf-v6-c-drawer__content {
+ flex-shrink: 1;
+ }
+ .pf-v6-c-drawer.pf-m-inline > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel,
+ .pf-v6-c-drawer.pf-m-static > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
+ --pf-v6-c-drawer--m-expanded__panel--BoxShadow: none;
+ }
+ .pf-v6-c-drawer.pf-m-inline > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel:not(.pf-m-no-border)::after,
+ .pf-v6-c-drawer.pf-m-static > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel:not(.pf-m-no-border)::after {
+ background-color: var(--pf-v6-c-drawer--m-inline--m-expanded__panel--after--BackgroundColor);
+ }
+ .pf-v6-c-drawer.pf-m-inline > .pf-v6-c-drawer__main > .pf-v6-c-drawer__content {
+ overflow-x: auto;
+ }
+ .pf-v6-c-drawer.pf-m-inline > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
+ margin-inline-start: calc(var(--pf-v6-c-drawer__panel--FlexBasis) * -1);
+ transform: translateX(100%);
+ }
+ :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-drawer.pf-m-inline > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
+ transform: translateX(calc(100% * var(--pf-v6-global--inverse--multiplier)));
+ }
+ .pf-v6-c-drawer.pf-m-inline.pf-m-expanded > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
+ margin-inline-start: 0;
+ transform: translateX(0);
+ }
+ .pf-v6-c-drawer.pf-m-inline > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel > .pf-v6-c-drawer__body > .pf-v6-c-drawer__head .pf-v6-c-drawer__close {
+ display: unset;
+ }
+ .pf-v6-c-drawer.pf-m-inline.pf-m-panel-left > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
+ margin-inline-start: 0;
+ margin-inline-end: calc(var(--pf-v6-c-drawer__panel--FlexBasis) * -1);
+ transform: translateX(-100%);
+ }
+ :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-drawer.pf-m-inline.pf-m-panel-left > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
+ transform: translateX(calc(-100% * var(--pf-v6-global--inverse--multiplier)));
+ }
+ .pf-v6-c-drawer.pf-m-inline.pf-m-panel-left.pf-m-expanded > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
+ margin-inline-end: 0;
+ transform: translateX(0);
+ }
+ .pf-v6-c-drawer.pf-m-inline.pf-m-panel-left > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel > .pf-v6-c-drawer__body > .pf-v6-c-drawer__head .pf-v6-c-drawer__close {
+ display: unset;
+ }
+ .pf-v6-c-drawer.pf-m-inline.pf-m-panel-bottom > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
+ margin-block-end: calc(var(--pf-v6-c-drawer__panel--FlexBasis) * -1);
+ transform: translateY(100%);
+ }
+ .pf-v6-c-drawer.pf-m-inline.pf-m-panel-bottom.pf-m-expanded > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
+ margin-block-end: 0;
+ transform: translateY(0);
+ }
+ .pf-v6-c-drawer.pf-m-static > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
+ transform: translateX(0);
+ }
+ .pf-v6-c-drawer.pf-m-static.pf-m-panel-left > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
+ margin-inline-end: 0;
+ transform: translateX(0);
+ }
+ .pf-v6-c-drawer.pf-m-static.pf-m-panel-bottom > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
+ transform: translateX(0);
+ }
+ .pf-v6-c-drawer.pf-m-static > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel > .pf-v6-c-drawer__body > .pf-v6-c-drawer__head .pf-v6-c-drawer__close {
+ display: none;
+ }
+}
+@media (min-width: 62rem) {
+ .pf-v6-c-drawer.pf-m-inline-on-lg > .pf-v6-c-drawer__main > .pf-v6-c-drawer__content,
+ .pf-v6-c-drawer.pf-m-static-on-lg > .pf-v6-c-drawer__main > .pf-v6-c-drawer__content {
+ flex-shrink: 1;
+ }
+ .pf-v6-c-drawer.pf-m-inline-on-lg > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel,
+ .pf-v6-c-drawer.pf-m-static-on-lg > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
+ --pf-v6-c-drawer--m-expanded__panel--BoxShadow: none;
+ }
+ .pf-v6-c-drawer.pf-m-inline-on-lg > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel:not(.pf-m-no-border)::after,
+ .pf-v6-c-drawer.pf-m-static-on-lg > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel:not(.pf-m-no-border)::after {
+ background-color: var(--pf-v6-c-drawer--m-inline--m-expanded__panel--after--BackgroundColor);
+ }
+ .pf-v6-c-drawer.pf-m-inline-on-lg > .pf-v6-c-drawer__main > .pf-v6-c-drawer__content {
+ overflow-x: auto;
+ }
+ .pf-v6-c-drawer.pf-m-inline-on-lg > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
+ margin-inline-start: calc(var(--pf-v6-c-drawer__panel--FlexBasis) * -1);
+ transform: translateX(100%);
+ }
+ :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-drawer.pf-m-inline-on-lg > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
+ transform: translateX(calc(100% * var(--pf-v6-global--inverse--multiplier)));
+ }
+ .pf-v6-c-drawer.pf-m-inline-on-lg.pf-m-expanded > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
+ margin-inline-start: 0;
+ transform: translateX(0);
+ }
+ .pf-v6-c-drawer.pf-m-inline-on-lg > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel > .pf-v6-c-drawer__body > .pf-v6-c-drawer__head .pf-v6-c-drawer__close {
+ display: unset;
+ }
+ .pf-v6-c-drawer.pf-m-inline-on-lg.pf-m-panel-left > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
+ margin-inline-start: 0;
+ margin-inline-end: calc(var(--pf-v6-c-drawer__panel--FlexBasis) * -1);
+ transform: translateX(-100%);
+ }
+ :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-drawer.pf-m-inline-on-lg.pf-m-panel-left > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
+ transform: translateX(calc(-100% * var(--pf-v6-global--inverse--multiplier)));
+ }
+ .pf-v6-c-drawer.pf-m-inline-on-lg.pf-m-panel-left.pf-m-expanded > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
+ margin-inline-end: 0;
+ transform: translateX(0);
+ }
+ .pf-v6-c-drawer.pf-m-inline-on-lg.pf-m-panel-left > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel > .pf-v6-c-drawer__body > .pf-v6-c-drawer__head .pf-v6-c-drawer__close {
+ display: unset;
+ }
+ .pf-v6-c-drawer.pf-m-inline-on-lg.pf-m-panel-bottom > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
+ margin-block-end: calc(var(--pf-v6-c-drawer__panel--FlexBasis) * -1);
+ transform: translateY(100%);
+ }
+ .pf-v6-c-drawer.pf-m-inline-on-lg.pf-m-panel-bottom.pf-m-expanded > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
+ margin-block-end: 0;
+ transform: translateY(0);
+ }
+ .pf-v6-c-drawer.pf-m-static-on-lg > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
+ transform: translateX(0);
+ }
+ .pf-v6-c-drawer.pf-m-static-on-lg.pf-m-panel-left > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
+ margin-inline-end: 0;
+ transform: translateX(0);
+ }
+ .pf-v6-c-drawer.pf-m-static-on-lg.pf-m-panel-bottom > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
+ transform: translateX(0);
+ }
+ .pf-v6-c-drawer.pf-m-static-on-lg > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel > .pf-v6-c-drawer__body > .pf-v6-c-drawer__head .pf-v6-c-drawer__close {
+ display: none;
+ }
+}
+@media (min-width: 75rem) {
+ .pf-v6-c-drawer.pf-m-inline-on-xl > .pf-v6-c-drawer__main > .pf-v6-c-drawer__content,
+ .pf-v6-c-drawer.pf-m-static-on-xl > .pf-v6-c-drawer__main > .pf-v6-c-drawer__content {
+ flex-shrink: 1;
+ }
+ .pf-v6-c-drawer.pf-m-inline-on-xl > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel,
+ .pf-v6-c-drawer.pf-m-static-on-xl > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
+ --pf-v6-c-drawer--m-expanded__panel--BoxShadow: none;
+ }
+ .pf-v6-c-drawer.pf-m-inline-on-xl > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel:not(.pf-m-no-border)::after,
+ .pf-v6-c-drawer.pf-m-static-on-xl > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel:not(.pf-m-no-border)::after {
+ background-color: var(--pf-v6-c-drawer--m-inline--m-expanded__panel--after--BackgroundColor);
+ }
+ .pf-v6-c-drawer.pf-m-inline-on-xl > .pf-v6-c-drawer__main > .pf-v6-c-drawer__content {
+ overflow-x: auto;
+ }
+ .pf-v6-c-drawer.pf-m-inline-on-xl > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
+ margin-inline-start: calc(var(--pf-v6-c-drawer__panel--FlexBasis) * -1);
+ transform: translateX(100%);
+ }
+ :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-drawer.pf-m-inline-on-xl > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
+ transform: translateX(calc(100% * var(--pf-v6-global--inverse--multiplier)));
+ }
+ .pf-v6-c-drawer.pf-m-inline-on-xl.pf-m-expanded > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
+ margin-inline-start: 0;
+ transform: translateX(0);
+ }
+ .pf-v6-c-drawer.pf-m-inline-on-xl > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel > .pf-v6-c-drawer__body > .pf-v6-c-drawer__head .pf-v6-c-drawer__close {
+ display: unset;
+ }
+ .pf-v6-c-drawer.pf-m-inline-on-xl.pf-m-panel-left > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
+ margin-inline-start: 0;
+ margin-inline-end: calc(var(--pf-v6-c-drawer__panel--FlexBasis) * -1);
+ transform: translateX(-100%);
+ }
+ :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-drawer.pf-m-inline-on-xl.pf-m-panel-left > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
+ transform: translateX(calc(-100% * var(--pf-v6-global--inverse--multiplier)));
+ }
+ .pf-v6-c-drawer.pf-m-inline-on-xl.pf-m-panel-left.pf-m-expanded > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
+ margin-inline-end: 0;
+ transform: translateX(0);
+ }
+ .pf-v6-c-drawer.pf-m-inline-on-xl.pf-m-panel-left > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel > .pf-v6-c-drawer__body > .pf-v6-c-drawer__head .pf-v6-c-drawer__close {
+ display: unset;
+ }
+ .pf-v6-c-drawer.pf-m-inline-on-xl.pf-m-panel-bottom > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
+ margin-block-end: calc(var(--pf-v6-c-drawer__panel--FlexBasis) * -1);
+ transform: translateY(100%);
+ }
+ .pf-v6-c-drawer.pf-m-inline-on-xl.pf-m-panel-bottom.pf-m-expanded > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
+ margin-block-end: 0;
+ transform: translateY(0);
+ }
+ .pf-v6-c-drawer.pf-m-static-on-xl > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
+ transform: translateX(0);
+ }
+ .pf-v6-c-drawer.pf-m-static-on-xl.pf-m-panel-left > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
+ margin-inline-end: 0;
+ transform: translateX(0);
+ }
+ .pf-v6-c-drawer.pf-m-static-on-xl.pf-m-panel-bottom > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
+ transform: translateX(0);
+ }
+ .pf-v6-c-drawer.pf-m-static-on-xl > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel > .pf-v6-c-drawer__body > .pf-v6-c-drawer__head .pf-v6-c-drawer__close {
+ display: none;
+ }
+}
+@media (min-width: 90.625rem) {
+ .pf-v6-c-drawer.pf-m-inline-on-2xl > .pf-v6-c-drawer__main > .pf-v6-c-drawer__content,
+ .pf-v6-c-drawer.pf-m-static-on-2xl > .pf-v6-c-drawer__main > .pf-v6-c-drawer__content {
+ flex-shrink: 1;
+ }
+ .pf-v6-c-drawer.pf-m-inline-on-2xl > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel,
+ .pf-v6-c-drawer.pf-m-static-on-2xl > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
+ --pf-v6-c-drawer--m-expanded__panel--BoxShadow: none;
+ }
+ .pf-v6-c-drawer.pf-m-inline-on-2xl > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel:not(.pf-m-no-border)::after,
+ .pf-v6-c-drawer.pf-m-static-on-2xl > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel:not(.pf-m-no-border)::after {
+ background-color: var(--pf-v6-c-drawer--m-inline--m-expanded__panel--after--BackgroundColor);
+ }
+ .pf-v6-c-drawer.pf-m-inline-on-2xl > .pf-v6-c-drawer__main > .pf-v6-c-drawer__content {
+ overflow-x: auto;
+ }
+ .pf-v6-c-drawer.pf-m-inline-on-2xl > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
+ margin-inline-start: calc(var(--pf-v6-c-drawer__panel--FlexBasis) * -1);
+ transform: translateX(100%);
+ }
+ :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-drawer.pf-m-inline-on-2xl > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
+ transform: translateX(calc(100% * var(--pf-v6-global--inverse--multiplier)));
+ }
+ .pf-v6-c-drawer.pf-m-inline-on-2xl.pf-m-expanded > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
+ margin-inline-start: 0;
+ transform: translateX(0);
+ }
+ .pf-v6-c-drawer.pf-m-inline-on-2xl > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel > .pf-v6-c-drawer__body > .pf-v6-c-drawer__head .pf-v6-c-drawer__close {
+ display: unset;
+ }
+ .pf-v6-c-drawer.pf-m-inline-on-2xl.pf-m-panel-left > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
+ margin-inline-start: 0;
+ margin-inline-end: calc(var(--pf-v6-c-drawer__panel--FlexBasis) * -1);
+ transform: translateX(-100%);
+ }
+ :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-drawer.pf-m-inline-on-2xl.pf-m-panel-left > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
+ transform: translateX(calc(-100% * var(--pf-v6-global--inverse--multiplier)));
+ }
+ .pf-v6-c-drawer.pf-m-inline-on-2xl.pf-m-panel-left.pf-m-expanded > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
+ margin-inline-end: 0;
+ transform: translateX(0);
+ }
+ .pf-v6-c-drawer.pf-m-inline-on-2xl.pf-m-panel-left > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel > .pf-v6-c-drawer__body > .pf-v6-c-drawer__head .pf-v6-c-drawer__close {
+ display: unset;
+ }
+ .pf-v6-c-drawer.pf-m-inline-on-2xl.pf-m-panel-bottom > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
+ margin-block-end: calc(var(--pf-v6-c-drawer__panel--FlexBasis) * -1);
+ transform: translateY(100%);
+ }
+ .pf-v6-c-drawer.pf-m-inline-on-2xl.pf-m-panel-bottom.pf-m-expanded > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
+ margin-block-end: 0;
+ transform: translateY(0);
+ }
+ .pf-v6-c-drawer.pf-m-static-on-2xl > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
+ transform: translateX(0);
+ }
+ .pf-v6-c-drawer.pf-m-static-on-2xl.pf-m-panel-left > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
+ margin-inline-end: 0;
+ transform: translateX(0);
+ }
+ .pf-v6-c-drawer.pf-m-static-on-2xl.pf-m-panel-bottom > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
+ transform: translateX(0);
+ }
+ .pf-v6-c-drawer.pf-m-static-on-2xl > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel > .pf-v6-c-drawer__body > .pf-v6-c-drawer__head .pf-v6-c-drawer__close {
+ display: none;
+ }
+}
\ No newline at end of file
diff --git a/packages/react-docs/patternfly-docs/nav.css b/packages/react-docs/patternfly-docs/nav.css
new file mode 100644
index 00000000000..9d0f06086a3
--- /dev/null
+++ b/packages/react-docs/patternfly-docs/nav.css
@@ -0,0 +1,362 @@
+.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__toggle-icon--Rotate: 0;
+ --pf-v6-c-nav__item--m-expanded__toggle-icon--Rotate: 90deg;
+ --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--small);
+ --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--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__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;
+ --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__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);
+}
+@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__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-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);
+ 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;
+ visibility: visible;
+ 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;
+ translate: 0 var(--pf-v6-c-nav__subnav--TranslateY);
+}
+.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;
+ max-height: 0;
+ visibility: hidden;
+ opacity: 0;
+}
+
+.pf-v6-c-nav__item {
+ scroll-snap-align: var(--pf-v6-c-nav__item--ScrollSnapAlign);
+}
+.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__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);
+}
+.pf-v6-c-nav__link:hover, .pf-v6-c-nav__link.pf-m-hover, .pf-v6-c-nav__link:focus {
+ 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);
+ color: var(--pf-v6-c-nav__link--m-current--Color);
+ background-color: var(--pf-v6-c-nav__link--m-current--BackgroundColor);
+ position: relative;
+}
+.pf-v6-c-nav__link:hover::after, .pf-v6-c-nav__link:focus::after, .pf-v6-c-nav__link.pf-m-current::after {
+ position: absolute;
+ inset: 0;
+ content: "";
+ border: solid var(--pf-t--global--border--color--high-contrast);
+ border-radius: inherit;
+}
+.pf-v6-c-nav__link:hover::after, .pf-v6-c-nav__link:focus::after {
+ border-width: var(--pf-t--global--border--width--regular);
+}
+.pf-v6-c-nav__link.pf-m-current::after {
+ border-width: var(--pf-t--global--border--width--strong);
+}
+
+.pf-v6-c-nav__link-icon {
+ color: var(--pf-v6-c-nav__link-icon--Color);
+}
+
+.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;
+ 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);
+ transform: rotate(var(--pf-v6-c-nav__item__toggle-icon--Rotate));
+}
+: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) {
+ 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;
+ scrollbar-width: none;
+ -ms-overflow-style: -ms-autohiding-scrollbar;
+}
+.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__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-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);
+}
\ No newline at end of file
diff --git a/packages/react-docs/patternfly-docs/page.css b/packages/react-docs/patternfly-docs/page.css
new file mode 100644
index 00000000000..16c1726326b
--- /dev/null
+++ b/packages/react-docs/patternfly-docs/page.css
@@ -0,0 +1,702 @@
+.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__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--secondary--default);
+ --pf-v6-c-page__sidebar--BoxShadow: none;
+ --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--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-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);
+ --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--primary--default);
+ --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--BorderWidth: 0.25rem;
+ --pf-v6-c-page__main-container--BorderColor: var(--pf-v6-c-page__main-container--BackgroundColor);
+ --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-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--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-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-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-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__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--BorderWidth));
+ --pf-v6-c-page__main-subnav--PaddingInlineEnd: calc(var(--pf-t--global--spacer--lg) - var(--pf-v6-c-page__main-container--BorderWidth));
+ --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--BorderWidth));
+ --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--BorderWidth));
+ --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);
+}
+@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);
+ }
+}
+@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 {
+ 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-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: 1;
+ --pf-v6-c-button--hover__icon--TransitionDelay: 0s;
+ --pf-v6-c-button--hover__icon--ScaleX: 1;
+}
+@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: 1;
+ --pf-v6-c-button--hover__icon--TransitionDelay: 0s;
+ --pf-v6-c-button--hover__icon--ScaleX: 1;
+ }
+ .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-masthead {
+ z-index: var(--pf-v6-c-page--c-masthead--ZIndex);
+ grid-area: header;
+}
+@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__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-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);
+ 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: none;
+ }
+}
+.pf-v6-c-page__sidebar.pf-m-collapsed {
+ max-width: 0;
+ overflow: hidden;
+}
+
+.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-direction: column;
+ flex-shrink: 0;
+}
+.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);
+ 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);
+ 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);
+ 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);
+ 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);
+ 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);
+ 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);
+ 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);
+ 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);
+ 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);
+ 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);
+ 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);
+ 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);
+ 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);
+ box-shadow: var(--pf-v6-c-page--section--m-sticky-bottom--BoxShadow);
+ }
+}
+
+.pf-v6-c-page__main-container {
+ position: relative;
+ 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-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: var(--pf-v6-c-page__main-container--BorderWidth) solid var(--pf-v6-c-page__main-container--BorderColor);
+ border-radius: var(--pf-v6-c-page__main-container--BorderRadius);
+ background-color: var(--pf-v6-c-page__main-container--BorderColor);
+ outline: calc(var(--pf-v6-c-page__main-container--BorderWidth) / 2) solid var(--pf-t--global--border--color--high-contrast);
+ outline-offset: calc(var(--pf-v6-c-page__main-container--BorderWidth) / 2 * -1);
+}
+@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--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--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;
+}
+
+.pf-v6-c-page__main,
+.pf-v6-c-page__main-drawer,
+.pf-v6-c-page__main-group {
+ display: flex;
+ flex-direction: column;
+ flex-grow: 1;
+}
+
+.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 {
+ 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--BorderWidth));
+ padding-inline-end: calc(var(--pf-v6-c-page__main-section--PaddingInlineEnd) - var(--pf-v6-c-page__main-container--BorderWidth));
+ 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);
+}
+.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--BorderWidth));
+ padding-inline-end: calc(var(--pf-v6-c-page__main-section--PaddingInlineEnd) - var(--pf-v6-c-page__main-container--BorderWidth));
+}
+.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--BorderWidth));
+ padding-inline-end: calc(var(--pf-v6-c-page__main-section--PaddingInlineEnd) - var(--pf-v6-c-page__main-container--BorderWidth));
+ }
+ .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--BorderWidth));
+ padding-inline-end: calc(var(--pf-v6-c-page__main-section--PaddingInlineEnd) - var(--pf-v6-c-page__main-container--BorderWidth));
+ }
+ .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--BorderWidth));
+ padding-inline-end: calc(var(--pf-v6-c-page__main-section--PaddingInlineEnd) - var(--pf-v6-c-page__main-container--BorderWidth));
+ }
+ .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--BorderWidth));
+ padding-inline-end: calc(var(--pf-v6-c-page__main-section--PaddingInlineEnd) - var(--pf-v6-c-page__main-container--BorderWidth));
+ }
+ .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--BorderWidth));
+ padding-inline-end: calc(var(--pf-v6-c-page__main-section--PaddingInlineEnd) - var(--pf-v6-c-page__main-container--BorderWidth));
+ }
+ .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-page__main-container {
+ align-self: revert;
+}
+.pf-v6-c-page__drawer .pf-v6-c-page__main-container.pf-m-fill {
+ flex-grow: 1;
+}
\ No newline at end of file
diff --git a/packages/react-docs/patternfly-docs/patternfly-base.css b/packages/react-docs/patternfly-docs/patternfly-base.css
new file mode 100644
index 00000000000..b88699a8d44
--- /dev/null
+++ b/packages/react-docs/patternfly-docs/patternfly-base.css
@@ -0,0 +1,8503 @@
+:where(html,
+body,
+p,
+ol,
+ul,
+li,
+dl,
+dt,
+dd,
+blockquote,
+figure,
+fieldset,
+legend,
+textarea,
+pre,
+iframe,
+hr,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6) {
+ padding: 0;
+ margin: 0;
+}
+
+*,
+*::before,
+*::after {
+ box-sizing: border-box;
+ scrollbar-color: var(--pf-t--global--border--color--default) transparent;
+}
+
+*::-webkit-scrollbar-thumb {
+ background-color: var(--pf-t--global--border--color--default);
+ border-radius: var(--pf-t--global--spacer--xs);
+}
+
+*::-webkit-scrollbar-track {
+ background-color: transparent;
+}
+
+*::-webkit-scrollbar {
+ max-width: var(--pf-t--global--spacer--sm);
+ max-height: var(--pf-t--global--spacer--sm);
+}
+
+:where(html,
+body) {
+ height: 100%;
+}
+
+:where(body) {
+ font-family: var(--pf-t--global--font--family--body);
+ font-size: var(--pf-t--global--font--size--body--default);
+ font-weight: var(--pf-t--global--font--weight--body--default);
+ line-height: var(--pf-t--global--font--line-height--body);
+ color: var(--pf-t--global--text--color--regular);
+}
+
+:where(h1,
+h2,
+h3,
+h4,
+h5,
+h6) {
+ font-size: 100%;
+ font-weight: var(--pf-t--global--font--weight--body--default);
+}
+
+:where(ul) {
+ list-style: none;
+}
+
+:where(button,
+input,
+optgroup,
+select,
+textarea) {
+ margin: 0;
+ font-family: inherit;
+ font-size: 100%;
+ line-height: var(--pf-t--global--font--line-height--body);
+ color: var(--pf-t--global--text--color--regular);
+}
+
+:where(img,
+embed,
+iframe,
+object,
+audio,
+video) {
+ max-width: 100%;
+ height: auto;
+}
+
+:where(iframe) {
+ border: 0;
+}
+
+:where(table) {
+ border-spacing: 0;
+ border-collapse: collapse;
+}
+
+:where(td,
+th) {
+ padding: 0;
+ text-align: start;
+}
+
+:where(code,
+pre) {
+ font-family: var(--pf-t--global--font--family--mono);
+}
+
+:where(a) {
+ color: var(--pf-t--global--text--color--link--default);
+ text-decoration-line: var(--pf-t--global--text-decoration--link--line--default);
+}
+
+:where(a:hover, a:focus) {
+ color: var(--pf-t--global--text--color--link--hover);
+ text-decoration-line: var(--pf-t--global--text-decoration--link--line--hover);
+}
+
+:where(a,
+button) {
+ cursor: pointer;
+}
+
+:where(.pf-v6-theme-dark) {
+ color-scheme: dark;
+}
+
+.pf-v6-screen-reader {
+ position: fixed;
+ inset-block-start: 0;
+ inset-inline-start: 0;
+ overflow: hidden;
+ clip: rect(0, 0, 0, 0);
+ white-space: nowrap;
+ border: 0;
+}
+.pf-v6-screen-reader.pf-m-full-size {
+ width: 100%;
+ height: 100%;
+}
+.pf-v6-screen-reader.pf-m-absolute {
+ position: absolute;
+}
+
+.pf-v6-m-tabular-nums {
+ font-variant-numeric: tabular-nums;
+}
+
+.pf-v6-m-legacy-font {
+ --pf-t--global--font--family--body: var(--pf-t--global--font--family--body--legacy);
+ --pf-t--global--font--family--heading: var(--pf-t--global--font--family--heading--legacy);
+ --pf-t--global--font--family--mono: var(--pf-t--global--font--family--mono--legacy);
+ --pf-t--global--font--weight--body: var(--pf-t--global--font--weight--body--legacy);
+ --pf-t--global--font--weight--body--bold: var(--pf-t--global--font--weight--body--bold--legacy);
+ --pf-t--global--font--weight--heading: var(--pf-t--global--font--weight--heading--legacy);
+ --pf-t--global--font--weight--heading--bold: var(--pf-t--global--font--weight--heading--bold--legacy);
+}
+
+.pf-v6-m-dir-rtl {
+ --pf-v6-global--inverse--multiplier: -1;
+ direction: rtl;
+}
+
+.pf-v6-m-dir-ltr {
+ --pf-v6-global--inverse--multiplier: 1;
+ direction: ltr;
+}
+
+:where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-m-mirror-inline-rtl {
+ scale: -1 1;
+}
+
+.pf-v6-m-no-motion {
+ --pf-t--global--delay--400: 1ms !important;
+ --pf-t--global--delay--300: 1ms !important;
+ --pf-t--global--delay--200: 1ms !important;
+ --pf-t--global--delay--100: 1ms !important;
+ --pf-t--global--duration--600: 1ms !important;
+ --pf-t--global--duration--500: 1ms !important;
+ --pf-t--global--duration--400: 1ms !important;
+ --pf-t--global--duration--300: 1ms !important;
+ --pf-t--global--duration--200: 1ms !important;
+ --pf-t--global--duration--100: 1ms !important;
+ --pf-t--global--duration--50: 1ms !important;
+}
+
+:root {
+ --pf-v6-global--danger-jiggle--AnimationDuration--Transform: var(--pf-t--global--motion--duration--fade--default);
+ --pf-v6-global--danger-jiggle--AnimationTimingFunction--Transform: var(--pf-t--global--motion--timing-function--default);
+}
+
+@property --pf-v6-global--danger-jiggle--TranslateX {
+ syntax: "";
+ inherits: false;
+ initial-value: 0;
+}
+@keyframes pf-v6-global-danger-jiggle-motion {
+ 33% {
+ --pf-v6-global--danger-jiggle--TranslateX: -2px;
+ }
+ 66% {
+ --pf-v6-global--danger-jiggle--TranslateX: 3px;
+ }
+}
+@keyframes pf-v6-global-fade-in {
+ from {
+ opacity: 0;
+ }
+ to {
+ opacity: 1;
+ }
+}
+@keyframes pf-v6-global-fade-out {
+ from {
+ opacity: 1;
+ }
+ to {
+ opacity: 0;
+ }
+}
+@font-face {
+ font-family: "Red Hat Text";
+ font-style: normal;
+ font-weight: 400 500;
+ src: url("./assets/fonts/RedHatText/RedHatTextVF.woff2") format("woff2-variations");
+ font-display: fallback;
+}
+@font-face {
+ font-family: "Red Hat Text";
+ font-style: italic;
+ font-weight: 400 500;
+ src: url("./assets/fonts/RedHatText/RedHatTextVF-Italic.woff2") format("woff2-variations");
+ font-display: fallback;
+}
+@font-face {
+ font-family: "Red Hat Display";
+ font-style: normal;
+ font-weight: 400 700;
+ src: url("./assets/fonts/RedHatDisplay/RedHatDisplayVF.woff2") format("woff2-variations");
+ font-display: fallback;
+}
+@font-face {
+ font-family: "Red Hat Display";
+ font-style: italic;
+ font-weight: 400 700;
+ src: url("./assets/fonts/RedHatDisplay/RedHatDisplayVF-Italic.woff2") format("woff2-variations");
+ font-display: fallback;
+}
+@font-face {
+ font-family: "Red Hat Mono";
+ font-style: normal;
+ font-weight: 400;
+ src: url("./assets/fonts/RedHatMono/RedHatMonoVF.woff2") format("woff2-variations");
+ font-display: fallback;
+}
+@font-face {
+ font-family: "Red Hat Mono";
+ font-style: italic;
+ font-weight: 400;
+ src: url("./assets/fonts/RedHatMono/RedHatMonoVF-Italic.woff2") format("woff2-variations");
+ font-display: fallback;
+}
+.fa-lg {
+ font-size: 1.3333333333em;
+ line-height: 0.75em;
+ vertical-align: -0.0667em;
+}
+
+.fa-xs {
+ font-size: 0.75em;
+}
+
+.fa-sm {
+ font-size: 0.875em;
+}
+
+.fa-1x {
+ font-size: 1em;
+}
+
+.fa-2x {
+ font-size: 2em;
+}
+
+.fa-3x {
+ font-size: 3em;
+}
+
+.fa-4x {
+ font-size: 4em;
+}
+
+.fa-5x {
+ font-size: 5em;
+}
+
+.fa-6x {
+ font-size: 6em;
+}
+
+.fa-7x {
+ font-size: 7em;
+}
+
+.fa-8x {
+ font-size: 8em;
+}
+
+.fa-9x {
+ font-size: 9em;
+}
+
+.fa-10x {
+ font-size: 10em;
+}
+
+.fa-fw {
+ text-align: center;
+ width: 1.25em;
+}
+
+.fa-ul {
+ list-style-type: none;
+ margin-left: 2.5em;
+ padding-left: 0;
+}
+.fa-ul > li {
+ position: relative;
+}
+
+.fa-li {
+ left: -2em;
+ position: absolute;
+ text-align: center;
+ width: 2em;
+ line-height: inherit;
+}
+
+.fa-border {
+ border: solid 0.08em #eee;
+ border-radius: 0.1em;
+ padding: 0.2em 0.25em 0.15em;
+}
+
+.fa-pull-left {
+ float: left;
+}
+
+.fa-pull-right {
+ float: right;
+}
+
+.fa.fa-pull-left,
+.fas.fa-pull-left,
+.far.fa-pull-left,
+.fal.fa-pull-left,
+.fab.fa-pull-left {
+ margin-right: 0.3em;
+}
+.fa.fa-pull-right,
+.fas.fa-pull-right,
+.far.fa-pull-right,
+.fal.fa-pull-right,
+.fab.fa-pull-right {
+ margin-left: 0.3em;
+}
+
+.fa-spin {
+ animation: fa-spin 2s infinite linear;
+}
+
+.fa-pulse {
+ animation: fa-spin 1s infinite steps(8);
+}
+
+@keyframes fa-spin {
+ 0% {
+ transform: rotate(0deg);
+ }
+ 100% {
+ transform: rotate(360deg);
+ }
+}
+.fa-rotate-90 {
+ -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1)";
+ transform: rotate(90deg);
+}
+
+.fa-rotate-180 {
+ -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2)";
+ transform: rotate(180deg);
+}
+
+.fa-rotate-270 {
+ -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=3)";
+ transform: rotate(270deg);
+}
+
+.fa-flip-horizontal {
+ -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1)";
+ transform: scale(-1, 1);
+}
+
+.fa-flip-vertical {
+ -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)";
+ transform: scale(1, -1);
+}
+
+.fa-flip-horizontal.fa-flip-vertical {
+ -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)";
+ transform: scale(-1, -1);
+}
+
+:root .fa-rotate-90,
+:root .fa-rotate-180,
+:root .fa-rotate-270,
+:root .fa-flip-horizontal,
+:root .fa-flip-vertical {
+ filter: none;
+}
+
+.fa-stack {
+ display: inline-block;
+ height: 2em;
+ line-height: 2em;
+ position: relative;
+ vertical-align: middle;
+ width: 0.625em;
+}
+
+.fa-stack-1x,
+.fa-stack-2x {
+ left: 0;
+ position: absolute;
+ text-align: center;
+ width: 100%;
+}
+
+.fa-stack-1x {
+ line-height: inherit;
+}
+
+.fa-stack-2x {
+ font-size: 2em;
+}
+
+.fa-inverse {
+ color: #fff;
+}
+
+.sr-only {
+ border: 0;
+ clip: rect(0, 0, 0, 0);
+ height: 1px;
+ margin: -1px;
+ overflow: hidden;
+ padding: 0;
+ position: absolute;
+ width: 1px;
+}
+
+.sr-only-focusable:active, .sr-only-focusable:focus {
+ clip: auto;
+ height: auto;
+ margin: 0;
+ overflow: visible;
+ position: static;
+ width: auto;
+}
+
+@font-face {
+ font-family: "Font Awesome 5 Free";
+ font-style: normal;
+ font-weight: 900;
+ src: url("./assets/fonts/webfonts/fa-solid-900.woff2") format("woff2");
+}
+.fa,
+.fas {
+ font-family: "Font Awesome 5 Free";
+ font-weight: 900;
+}
+
+.fa-500px:before {
+ content: "\f26e";
+}
+
+.fa-accessible-icon:before {
+ content: "\f368";
+}
+
+.fa-accusoft:before {
+ content: "\f369";
+}
+
+.fa-acquisitions-incorporated:before {
+ content: "\f6af";
+}
+
+.fa-ad:before {
+ content: "\f641";
+}
+
+.fa-address-book:before {
+ content: "\f2b9";
+}
+
+.fa-address-card:before {
+ content: "\f2bb";
+}
+
+.fa-adjust:before {
+ content: "\f042";
+}
+
+.fa-adn:before {
+ content: "\f170";
+}
+
+.fa-adobe:before {
+ content: "\f778";
+}
+
+.fa-adversal:before {
+ content: "\f36a";
+}
+
+.fa-affiliatetheme:before {
+ content: "\f36b";
+}
+
+.fa-air-freshener:before {
+ content: "\f5d0";
+}
+
+.fa-algolia:before {
+ content: "\f36c";
+}
+
+.fa-align-center:before {
+ content: "\f037";
+}
+
+.fa-align-justify:before {
+ content: "\f039";
+}
+
+.fa-align-left:before {
+ content: "\f036";
+}
+
+.fa-align-right:before {
+ content: "\f038";
+}
+
+.fa-alipay:before {
+ content: "\f642";
+}
+
+.fa-allergies:before {
+ content: "\f461";
+}
+
+.fa-amazon:before {
+ content: "\f270";
+}
+
+.fa-amazon-pay:before {
+ content: "\f42c";
+}
+
+.fa-ambulance:before {
+ content: "\f0f9";
+}
+
+.fa-american-sign-language-interpreting:before {
+ content: "\f2a3";
+}
+
+.fa-amilia:before {
+ content: "\f36d";
+}
+
+.fa-anchor:before {
+ content: "\f13d";
+}
+
+.fa-android:before {
+ content: "\f17b";
+}
+
+.fa-angellist:before {
+ content: "\f209";
+}
+
+.fa-angle-double-down:before {
+ content: "\f103";
+}
+
+.fa-angle-double-left:before {
+ content: "\f100";
+}
+
+.fa-angle-double-right:before {
+ content: "\f101";
+}
+
+.fa-angle-double-up:before {
+ content: "\f102";
+}
+
+.fa-angle-down:before {
+ content: "\f107";
+}
+
+.fa-angle-left:before {
+ content: "\f104";
+}
+
+.fa-angle-right:before {
+ content: "\f105";
+}
+
+.fa-angle-up:before {
+ content: "\f106";
+}
+
+.fa-angry:before {
+ content: "\f556";
+}
+
+.fa-angrycreative:before {
+ content: "\f36e";
+}
+
+.fa-angular:before {
+ content: "\f420";
+}
+
+.fa-ankh:before {
+ content: "\f644";
+}
+
+.fa-app-store:before {
+ content: "\f36f";
+}
+
+.fa-app-store-ios:before {
+ content: "\f370";
+}
+
+.fa-apper:before {
+ content: "\f371";
+}
+
+.fa-apple:before {
+ content: "\f179";
+}
+
+.fa-apple-alt:before {
+ content: "\f5d1";
+}
+
+.fa-apple-pay:before {
+ content: "\f415";
+}
+
+.fa-archive:before {
+ content: "\f187";
+}
+
+.fa-archway:before {
+ content: "\f557";
+}
+
+.fa-arrow-alt-circle-down:before {
+ content: "\f358";
+}
+
+.fa-arrow-alt-circle-left:before {
+ content: "\f359";
+}
+
+.fa-arrow-alt-circle-right:before {
+ content: "\f35a";
+}
+
+.fa-arrow-alt-circle-up:before {
+ content: "\f35b";
+}
+
+.fa-arrow-circle-down:before {
+ content: "\f0ab";
+}
+
+.fa-arrow-circle-left:before {
+ content: "\f0a8";
+}
+
+.fa-arrow-circle-right:before {
+ content: "\f0a9";
+}
+
+.fa-arrow-circle-up:before {
+ content: "\f0aa";
+}
+
+.fa-arrow-down:before {
+ content: "\f063";
+}
+
+.fa-arrow-left:before {
+ content: "\f060";
+}
+
+.fa-arrow-right:before {
+ content: "\f061";
+}
+
+.fa-arrow-up:before {
+ content: "\f062";
+}
+
+.fa-arrows-alt:before {
+ content: "\f0b2";
+}
+
+.fa-arrows-alt-h:before {
+ content: "\f337";
+}
+
+.fa-arrows-alt-v:before {
+ content: "\f338";
+}
+
+.fa-artstation:before {
+ content: "\f77a";
+}
+
+.fa-assistive-listening-systems:before {
+ content: "\f2a2";
+}
+
+.fa-asterisk:before {
+ content: "\f069";
+}
+
+.fa-asymmetrik:before {
+ content: "\f372";
+}
+
+.fa-at:before {
+ content: "\f1fa";
+}
+
+.fa-atlas:before {
+ content: "\f558";
+}
+
+.fa-atlassian:before {
+ content: "\f77b";
+}
+
+.fa-atom:before {
+ content: "\f5d2";
+}
+
+.fa-audible:before {
+ content: "\f373";
+}
+
+.fa-audio-description:before {
+ content: "\f29e";
+}
+
+.fa-autoprefixer:before {
+ content: "\f41c";
+}
+
+.fa-avianex:before {
+ content: "\f374";
+}
+
+.fa-aviato:before {
+ content: "\f421";
+}
+
+.fa-award:before {
+ content: "\f559";
+}
+
+.fa-aws:before {
+ content: "\f375";
+}
+
+.fa-baby:before {
+ content: "\f77c";
+}
+
+.fa-baby-carriage:before {
+ content: "\f77d";
+}
+
+.fa-backspace:before {
+ content: "\f55a";
+}
+
+.fa-backward:before {
+ content: "\f04a";
+}
+
+.fa-balance-scale:before {
+ content: "\f24e";
+}
+
+.fa-ban:before {
+ content: "\f05e";
+}
+
+.fa-band-aid:before {
+ content: "\f462";
+}
+
+.fa-bandcamp:before {
+ content: "\f2d5";
+}
+
+.fa-barcode:before {
+ content: "\f02a";
+}
+
+.fa-bars:before {
+ content: "\f0c9";
+}
+
+.fa-baseball-ball:before {
+ content: "\f433";
+}
+
+.fa-basketball-ball:before {
+ content: "\f434";
+}
+
+.fa-bath:before {
+ content: "\f2cd";
+}
+
+.fa-battery-empty:before {
+ content: "\f244";
+}
+
+.fa-battery-full:before {
+ content: "\f240";
+}
+
+.fa-battery-half:before {
+ content: "\f242";
+}
+
+.fa-battery-quarter:before {
+ content: "\f243";
+}
+
+.fa-battery-three-quarters:before {
+ content: "\f241";
+}
+
+.fa-bed:before {
+ content: "\f236";
+}
+
+.fa-beer:before {
+ content: "\f0fc";
+}
+
+.fa-behance:before {
+ content: "\f1b4";
+}
+
+.fa-behance-square:before {
+ content: "\f1b5";
+}
+
+.fa-bell:before {
+ content: "\f0f3";
+}
+
+.fa-bell-slash:before {
+ content: "\f1f6";
+}
+
+.fa-bezier-curve:before {
+ content: "\f55b";
+}
+
+.fa-bible:before {
+ content: "\f647";
+}
+
+.fa-bicycle:before {
+ content: "\f206";
+}
+
+.fa-bimobject:before {
+ content: "\f378";
+}
+
+.fa-binoculars:before {
+ content: "\f1e5";
+}
+
+.fa-biohazard:before {
+ content: "\f780";
+}
+
+.fa-birthday-cake:before {
+ content: "\f1fd";
+}
+
+.fa-bitbucket:before {
+ content: "\f171";
+}
+
+.fa-bitcoin:before {
+ content: "\f379";
+}
+
+.fa-bity:before {
+ content: "\f37a";
+}
+
+.fa-black-tie:before {
+ content: "\f27e";
+}
+
+.fa-blackberry:before {
+ content: "\f37b";
+}
+
+.fa-blender:before {
+ content: "\f517";
+}
+
+.fa-blender-phone:before {
+ content: "\f6b6";
+}
+
+.fa-blind:before {
+ content: "\f29d";
+}
+
+.fa-blog:before {
+ content: "\f781";
+}
+
+.fa-blogger:before {
+ content: "\f37c";
+}
+
+.fa-blogger-b:before {
+ content: "\f37d";
+}
+
+.fa-bluetooth:before {
+ content: "\f293";
+}
+
+.fa-bluetooth-b:before {
+ content: "\f294";
+}
+
+.fa-bold:before {
+ content: "\f032";
+}
+
+.fa-bolt:before {
+ content: "\f0e7";
+}
+
+.fa-bomb:before {
+ content: "\f1e2";
+}
+
+.fa-bone:before {
+ content: "\f5d7";
+}
+
+.fa-bong:before {
+ content: "\f55c";
+}
+
+.fa-book:before {
+ content: "\f02d";
+}
+
+.fa-book-dead:before {
+ content: "\f6b7";
+}
+
+.fa-book-open:before {
+ content: "\f518";
+}
+
+.fa-book-reader:before {
+ content: "\f5da";
+}
+
+.fa-bookmark:before {
+ content: "\f02e";
+}
+
+.fa-bowling-ball:before {
+ content: "\f436";
+}
+
+.fa-box:before {
+ content: "\f466";
+}
+
+.fa-box-open:before {
+ content: "\f49e";
+}
+
+.fa-boxes:before {
+ content: "\f468";
+}
+
+.fa-braille:before {
+ content: "\f2a1";
+}
+
+.fa-brain:before {
+ content: "\f5dc";
+}
+
+.fa-briefcase:before {
+ content: "\f0b1";
+}
+
+.fa-briefcase-medical:before {
+ content: "\f469";
+}
+
+.fa-broadcast-tower:before {
+ content: "\f519";
+}
+
+.fa-broom:before {
+ content: "\f51a";
+}
+
+.fa-brush:before {
+ content: "\f55d";
+}
+
+.fa-btc:before {
+ content: "\f15a";
+}
+
+.fa-bug:before {
+ content: "\f188";
+}
+
+.fa-building:before {
+ content: "\f1ad";
+}
+
+.fa-bullhorn:before {
+ content: "\f0a1";
+}
+
+.fa-bullseye:before {
+ content: "\f140";
+}
+
+.fa-burn:before {
+ content: "\f46a";
+}
+
+.fa-buromobelexperte:before {
+ content: "\f37f";
+}
+
+.fa-bus:before {
+ content: "\f207";
+}
+
+.fa-bus-alt:before {
+ content: "\f55e";
+}
+
+.fa-business-time:before {
+ content: "\f64a";
+}
+
+.fa-buysellads:before {
+ content: "\f20d";
+}
+
+.fa-calculator:before {
+ content: "\f1ec";
+}
+
+.fa-calendar:before {
+ content: "\f133";
+}
+
+.fa-calendar-alt:before {
+ content: "\f073";
+}
+
+.fa-calendar-check:before {
+ content: "\f274";
+}
+
+.fa-calendar-day:before {
+ content: "\f783";
+}
+
+.fa-calendar-minus:before {
+ content: "\f272";
+}
+
+.fa-calendar-plus:before {
+ content: "\f271";
+}
+
+.fa-calendar-times:before {
+ content: "\f273";
+}
+
+.fa-calendar-week:before {
+ content: "\f784";
+}
+
+.fa-camera:before {
+ content: "\f030";
+}
+
+.fa-camera-retro:before {
+ content: "\f083";
+}
+
+.fa-campground:before {
+ content: "\f6bb";
+}
+
+.fa-canadian-maple-leaf:before {
+ content: "\f785";
+}
+
+.fa-candy-cane:before {
+ content: "\f786";
+}
+
+.fa-cannabis:before {
+ content: "\f55f";
+}
+
+.fa-capsules:before {
+ content: "\f46b";
+}
+
+.fa-car:before {
+ content: "\f1b9";
+}
+
+.fa-car-alt:before {
+ content: "\f5de";
+}
+
+.fa-car-battery:before {
+ content: "\f5df";
+}
+
+.fa-car-crash:before {
+ content: "\f5e1";
+}
+
+.fa-car-side:before {
+ content: "\f5e4";
+}
+
+.fa-caret-down:before {
+ content: "\f0d7";
+}
+
+.fa-caret-left:before {
+ content: "\f0d9";
+}
+
+.fa-caret-right:before {
+ content: "\f0da";
+}
+
+.fa-caret-square-down:before {
+ content: "\f150";
+}
+
+.fa-caret-square-left:before {
+ content: "\f191";
+}
+
+.fa-caret-square-right:before {
+ content: "\f152";
+}
+
+.fa-caret-square-up:before {
+ content: "\f151";
+}
+
+.fa-caret-up:before {
+ content: "\f0d8";
+}
+
+.fa-carrot:before {
+ content: "\f787";
+}
+
+.fa-cart-arrow-down:before {
+ content: "\f218";
+}
+
+.fa-cart-plus:before {
+ content: "\f217";
+}
+
+.fa-cash-register:before {
+ content: "\f788";
+}
+
+.fa-cat:before {
+ content: "\f6be";
+}
+
+.fa-cc-amazon-pay:before {
+ content: "\f42d";
+}
+
+.fa-cc-amex:before {
+ content: "\f1f3";
+}
+
+.fa-cc-apple-pay:before {
+ content: "\f416";
+}
+
+.fa-cc-diners-club:before {
+ content: "\f24c";
+}
+
+.fa-cc-discover:before {
+ content: "\f1f2";
+}
+
+.fa-cc-jcb:before {
+ content: "\f24b";
+}
+
+.fa-cc-mastercard:before {
+ content: "\f1f1";
+}
+
+.fa-cc-paypal:before {
+ content: "\f1f4";
+}
+
+.fa-cc-stripe:before {
+ content: "\f1f5";
+}
+
+.fa-cc-visa:before {
+ content: "\f1f0";
+}
+
+.fa-centercode:before {
+ content: "\f380";
+}
+
+.fa-centos:before {
+ content: "\f789";
+}
+
+.fa-certificate:before {
+ content: "\f0a3";
+}
+
+.fa-chair:before {
+ content: "\f6c0";
+}
+
+.fa-chalkboard:before {
+ content: "\f51b";
+}
+
+.fa-chalkboard-teacher:before {
+ content: "\f51c";
+}
+
+.fa-charging-station:before {
+ content: "\f5e7";
+}
+
+.fa-chart-area:before {
+ content: "\f1fe";
+}
+
+.fa-chart-bar:before {
+ content: "\f080";
+}
+
+.fa-chart-line:before {
+ content: "\f201";
+}
+
+.fa-chart-pie:before {
+ content: "\f200";
+}
+
+.fa-check:before {
+ content: "\f00c";
+}
+
+.fa-check-circle:before {
+ content: "\f058";
+}
+
+.fa-check-double:before {
+ content: "\f560";
+}
+
+.fa-check-square:before {
+ content: "\f14a";
+}
+
+.fa-chess:before {
+ content: "\f439";
+}
+
+.fa-chess-bishop:before {
+ content: "\f43a";
+}
+
+.fa-chess-board:before {
+ content: "\f43c";
+}
+
+.fa-chess-king:before {
+ content: "\f43f";
+}
+
+.fa-chess-knight:before {
+ content: "\f441";
+}
+
+.fa-chess-pawn:before {
+ content: "\f443";
+}
+
+.fa-chess-queen:before {
+ content: "\f445";
+}
+
+.fa-chess-rook:before {
+ content: "\f447";
+}
+
+.fa-chevron-circle-down:before {
+ content: "\f13a";
+}
+
+.fa-chevron-circle-left:before {
+ content: "\f137";
+}
+
+.fa-chevron-circle-right:before {
+ content: "\f138";
+}
+
+.fa-chevron-circle-up:before {
+ content: "\f139";
+}
+
+.fa-chevron-down:before {
+ content: "\f078";
+}
+
+.fa-chevron-left:before {
+ content: "\f053";
+}
+
+.fa-chevron-right:before {
+ content: "\f054";
+}
+
+.fa-chevron-up:before {
+ content: "\f077";
+}
+
+.fa-child:before {
+ content: "\f1ae";
+}
+
+.fa-chrome:before {
+ content: "\f268";
+}
+
+.fa-church:before {
+ content: "\f51d";
+}
+
+.fa-circle:before {
+ content: "\f111";
+}
+
+.fa-circle-notch:before {
+ content: "\f1ce";
+}
+
+.fa-city:before {
+ content: "\f64f";
+}
+
+.fa-clipboard:before {
+ content: "\f328";
+}
+
+.fa-clipboard-check:before {
+ content: "\f46c";
+}
+
+.fa-clipboard-list:before {
+ content: "\f46d";
+}
+
+.fa-clock:before {
+ content: "\f017";
+}
+
+.fa-clone:before {
+ content: "\f24d";
+}
+
+.fa-closed-captioning:before {
+ content: "\f20a";
+}
+
+.fa-cloud:before {
+ content: "\f0c2";
+}
+
+.fa-cloud-download-alt:before {
+ content: "\f381";
+}
+
+.fa-cloud-meatball:before {
+ content: "\f73b";
+}
+
+.fa-cloud-moon:before {
+ content: "\f6c3";
+}
+
+.fa-cloud-moon-rain:before {
+ content: "\f73c";
+}
+
+.fa-cloud-rain:before {
+ content: "\f73d";
+}
+
+.fa-cloud-showers-heavy:before {
+ content: "\f740";
+}
+
+.fa-cloud-sun:before {
+ content: "\f6c4";
+}
+
+.fa-cloud-sun-rain:before {
+ content: "\f743";
+}
+
+.fa-cloud-upload-alt:before {
+ content: "\f382";
+}
+
+.fa-cloudscale:before {
+ content: "\f383";
+}
+
+.fa-cloudsmith:before {
+ content: "\f384";
+}
+
+.fa-cloudversify:before {
+ content: "\f385";
+}
+
+.fa-cocktail:before {
+ content: "\f561";
+}
+
+.fa-code:before {
+ content: "\f121";
+}
+
+.fa-code-branch:before {
+ content: "\f126";
+}
+
+.fa-codepen:before {
+ content: "\f1cb";
+}
+
+.fa-codiepie:before {
+ content: "\f284";
+}
+
+.fa-coffee:before {
+ content: "\f0f4";
+}
+
+.fa-cog:before {
+ content: "\f013";
+}
+
+.fa-cogs:before {
+ content: "\f085";
+}
+
+.fa-coins:before {
+ content: "\f51e";
+}
+
+.fa-columns:before {
+ content: "\f0db";
+}
+
+.fa-comment:before {
+ content: "\f075";
+}
+
+.fa-comment-alt:before {
+ content: "\f27a";
+}
+
+.fa-comment-dollar:before {
+ content: "\f651";
+}
+
+.fa-comment-dots:before {
+ content: "\f4ad";
+}
+
+.fa-comment-slash:before {
+ content: "\f4b3";
+}
+
+.fa-comments:before {
+ content: "\f086";
+}
+
+.fa-comments-dollar:before {
+ content: "\f653";
+}
+
+.fa-compact-disc:before {
+ content: "\f51f";
+}
+
+.fa-compass:before {
+ content: "\f14e";
+}
+
+.fa-compress:before {
+ content: "\f066";
+}
+
+.fa-compress-arrows-alt:before {
+ content: "\f78c";
+}
+
+.fa-concierge-bell:before {
+ content: "\f562";
+}
+
+.fa-confluence:before {
+ content: "\f78d";
+}
+
+.fa-connectdevelop:before {
+ content: "\f20e";
+}
+
+.fa-contao:before {
+ content: "\f26d";
+}
+
+.fa-cookie:before {
+ content: "\f563";
+}
+
+.fa-cookie-bite:before {
+ content: "\f564";
+}
+
+.fa-copy:before {
+ content: "\f0c5";
+}
+
+.fa-copyright:before {
+ content: "\f1f9";
+}
+
+.fa-couch:before {
+ content: "\f4b8";
+}
+
+.fa-cpanel:before {
+ content: "\f388";
+}
+
+.fa-creative-commons:before {
+ content: "\f25e";
+}
+
+.fa-creative-commons-by:before {
+ content: "\f4e7";
+}
+
+.fa-creative-commons-nc:before {
+ content: "\f4e8";
+}
+
+.fa-creative-commons-nc-eu:before {
+ content: "\f4e9";
+}
+
+.fa-creative-commons-nc-jp:before {
+ content: "\f4ea";
+}
+
+.fa-creative-commons-nd:before {
+ content: "\f4eb";
+}
+
+.fa-creative-commons-pd:before {
+ content: "\f4ec";
+}
+
+.fa-creative-commons-pd-alt:before {
+ content: "\f4ed";
+}
+
+.fa-creative-commons-remix:before {
+ content: "\f4ee";
+}
+
+.fa-creative-commons-sa:before {
+ content: "\f4ef";
+}
+
+.fa-creative-commons-sampling:before {
+ content: "\f4f0";
+}
+
+.fa-creative-commons-sampling-plus:before {
+ content: "\f4f1";
+}
+
+.fa-creative-commons-share:before {
+ content: "\f4f2";
+}
+
+.fa-creative-commons-zero:before {
+ content: "\f4f3";
+}
+
+.fa-credit-card:before {
+ content: "\f09d";
+}
+
+.fa-critical-role:before {
+ content: "\f6c9";
+}
+
+.fa-crop:before {
+ content: "\f125";
+}
+
+.fa-crop-alt:before {
+ content: "\f565";
+}
+
+.fa-cross:before {
+ content: "\f654";
+}
+
+.fa-crosshairs:before {
+ content: "\f05b";
+}
+
+.fa-crow:before {
+ content: "\f520";
+}
+
+.fa-crown:before {
+ content: "\f521";
+}
+
+.fa-css3:before {
+ content: "\f13c";
+}
+
+.fa-css3-alt:before {
+ content: "\f38b";
+}
+
+.fa-cube:before {
+ content: "\f1b2";
+}
+
+.fa-cubes:before {
+ content: "\f1b3";
+}
+
+.fa-cut:before {
+ content: "\f0c4";
+}
+
+.fa-cuttlefish:before {
+ content: "\f38c";
+}
+
+.fa-d-and-d:before {
+ content: "\f38d";
+}
+
+.fa-d-and-d-beyond:before {
+ content: "\f6ca";
+}
+
+.fa-dashcube:before {
+ content: "\f210";
+}
+
+.fa-database:before {
+ content: "\f1c0";
+}
+
+.fa-deaf:before {
+ content: "\f2a4";
+}
+
+.fa-delicious:before {
+ content: "\f1a5";
+}
+
+.fa-democrat:before {
+ content: "\f747";
+}
+
+.fa-deploydog:before {
+ content: "\f38e";
+}
+
+.fa-deskpro:before {
+ content: "\f38f";
+}
+
+.fa-desktop:before {
+ content: "\f108";
+}
+
+.fa-dev:before {
+ content: "\f6cc";
+}
+
+.fa-deviantart:before {
+ content: "\f1bd";
+}
+
+.fa-dharmachakra:before {
+ content: "\f655";
+}
+
+.fa-dhl:before {
+ content: "\f790";
+}
+
+.fa-diagnoses:before {
+ content: "\f470";
+}
+
+.fa-diaspora:before {
+ content: "\f791";
+}
+
+.fa-dice:before {
+ content: "\f522";
+}
+
+.fa-dice-d20:before {
+ content: "\f6cf";
+}
+
+.fa-dice-d6:before {
+ content: "\f6d1";
+}
+
+.fa-dice-five:before {
+ content: "\f523";
+}
+
+.fa-dice-four:before {
+ content: "\f524";
+}
+
+.fa-dice-one:before {
+ content: "\f525";
+}
+
+.fa-dice-six:before {
+ content: "\f526";
+}
+
+.fa-dice-three:before {
+ content: "\f527";
+}
+
+.fa-dice-two:before {
+ content: "\f528";
+}
+
+.fa-digg:before {
+ content: "\f1a6";
+}
+
+.fa-digital-ocean:before {
+ content: "\f391";
+}
+
+.fa-digital-tachograph:before {
+ content: "\f566";
+}
+
+.fa-directions:before {
+ content: "\f5eb";
+}
+
+.fa-discord:before {
+ content: "\f392";
+}
+
+.fa-discourse:before {
+ content: "\f393";
+}
+
+.fa-divide:before {
+ content: "\f529";
+}
+
+.fa-dizzy:before {
+ content: "\f567";
+}
+
+.fa-dna:before {
+ content: "\f471";
+}
+
+.fa-dochub:before {
+ content: "\f394";
+}
+
+.fa-docker:before {
+ content: "\f395";
+}
+
+.fa-dog:before {
+ content: "\f6d3";
+}
+
+.fa-dollar-sign:before {
+ content: "\f155";
+}
+
+.fa-dolly:before {
+ content: "\f472";
+}
+
+.fa-dolly-flatbed:before {
+ content: "\f474";
+}
+
+.fa-donate:before {
+ content: "\f4b9";
+}
+
+.fa-door-closed:before {
+ content: "\f52a";
+}
+
+.fa-door-open:before {
+ content: "\f52b";
+}
+
+.fa-dot-circle:before {
+ content: "\f192";
+}
+
+.fa-dove:before {
+ content: "\f4ba";
+}
+
+.fa-download:before {
+ content: "\f019";
+}
+
+.fa-draft2digital:before {
+ content: "\f396";
+}
+
+.fa-drafting-compass:before {
+ content: "\f568";
+}
+
+.fa-dragon:before {
+ content: "\f6d5";
+}
+
+.fa-draw-polygon:before {
+ content: "\f5ee";
+}
+
+.fa-dribbble:before {
+ content: "\f17d";
+}
+
+.fa-dribbble-square:before {
+ content: "\f397";
+}
+
+.fa-dropbox:before {
+ content: "\f16b";
+}
+
+.fa-drum:before {
+ content: "\f569";
+}
+
+.fa-drum-steelpan:before {
+ content: "\f56a";
+}
+
+.fa-drumstick-bite:before {
+ content: "\f6d7";
+}
+
+.fa-drupal:before {
+ content: "\f1a9";
+}
+
+.fa-dumbbell:before {
+ content: "\f44b";
+}
+
+.fa-dumpster:before {
+ content: "\f793";
+}
+
+.fa-dumpster-fire:before {
+ content: "\f794";
+}
+
+.fa-dungeon:before {
+ content: "\f6d9";
+}
+
+.fa-dyalog:before {
+ content: "\f399";
+}
+
+.fa-earlybirds:before {
+ content: "\f39a";
+}
+
+.fa-ebay:before {
+ content: "\f4f4";
+}
+
+.fa-edge:before {
+ content: "\f282";
+}
+
+.fa-edit:before {
+ content: "\f044";
+}
+
+.fa-eject:before {
+ content: "\f052";
+}
+
+.fa-elementor:before {
+ content: "\f430";
+}
+
+.fa-ellipsis-h:before {
+ content: "\f141";
+}
+
+.fa-ellipsis-v:before {
+ content: "\f142";
+}
+
+.fa-ello:before {
+ content: "\f5f1";
+}
+
+.fa-ember:before {
+ content: "\f423";
+}
+
+.fa-empire:before {
+ content: "\f1d1";
+}
+
+.fa-envelope:before {
+ content: "\f0e0";
+}
+
+.fa-envelope-open:before {
+ content: "\f2b6";
+}
+
+.fa-envelope-open-text:before {
+ content: "\f658";
+}
+
+.fa-envelope-square:before {
+ content: "\f199";
+}
+
+.fa-envira:before {
+ content: "\f299";
+}
+
+.fa-equals:before {
+ content: "\f52c";
+}
+
+.fa-eraser:before {
+ content: "\f12d";
+}
+
+.fa-erlang:before {
+ content: "\f39d";
+}
+
+.fa-ethereum:before {
+ content: "\f42e";
+}
+
+.fa-ethernet:before {
+ content: "\f796";
+}
+
+.fa-etsy:before {
+ content: "\f2d7";
+}
+
+.fa-euro-sign:before {
+ content: "\f153";
+}
+
+.fa-exchange-alt:before {
+ content: "\f362";
+}
+
+.fa-exclamation:before {
+ content: "\f12a";
+}
+
+.fa-exclamation-circle:before {
+ content: "\f06a";
+}
+
+.fa-exclamation-triangle:before {
+ content: "\f071";
+}
+
+.fa-expand:before {
+ content: "\f065";
+}
+
+.fa-expand-arrows-alt:before {
+ content: "\f31e";
+}
+
+.fa-expeditedssl:before {
+ content: "\f23e";
+}
+
+.fa-external-link-alt:before {
+ content: "\f35d";
+}
+
+.fa-external-link-square-alt:before {
+ content: "\f360";
+}
+
+.fa-eye:before {
+ content: "\f06e";
+}
+
+.fa-eye-dropper:before {
+ content: "\f1fb";
+}
+
+.fa-eye-slash:before {
+ content: "\f070";
+}
+
+.fa-facebook:before {
+ content: "\f09a";
+}
+
+.fa-facebook-f:before {
+ content: "\f39e";
+}
+
+.fa-facebook-messenger:before {
+ content: "\f39f";
+}
+
+.fa-facebook-square:before {
+ content: "\f082";
+}
+
+.fa-fantasy-flight-games:before {
+ content: "\f6dc";
+}
+
+.fa-fast-backward:before {
+ content: "\f049";
+}
+
+.fa-fast-forward:before {
+ content: "\f050";
+}
+
+.fa-fax:before {
+ content: "\f1ac";
+}
+
+.fa-feather:before {
+ content: "\f52d";
+}
+
+.fa-feather-alt:before {
+ content: "\f56b";
+}
+
+.fa-fedex:before {
+ content: "\f797";
+}
+
+.fa-fedora:before {
+ content: "\f798";
+}
+
+.fa-female:before {
+ content: "\f182";
+}
+
+.fa-fighter-jet:before {
+ content: "\f0fb";
+}
+
+.fa-figma:before {
+ content: "\f799";
+}
+
+.fa-file:before {
+ content: "\f15b";
+}
+
+.fa-file-alt:before {
+ content: "\f15c";
+}
+
+.fa-file-archive:before {
+ content: "\f1c6";
+}
+
+.fa-file-audio:before {
+ content: "\f1c7";
+}
+
+.fa-file-code:before {
+ content: "\f1c9";
+}
+
+.fa-file-contract:before {
+ content: "\f56c";
+}
+
+.fa-file-csv:before {
+ content: "\f6dd";
+}
+
+.fa-file-download:before {
+ content: "\f56d";
+}
+
+.fa-file-excel:before {
+ content: "\f1c3";
+}
+
+.fa-file-export:before {
+ content: "\f56e";
+}
+
+.fa-file-image:before {
+ content: "\f1c5";
+}
+
+.fa-file-import:before {
+ content: "\f56f";
+}
+
+.fa-file-invoice:before {
+ content: "\f570";
+}
+
+.fa-file-invoice-dollar:before {
+ content: "\f571";
+}
+
+.fa-file-medical:before {
+ content: "\f477";
+}
+
+.fa-file-medical-alt:before {
+ content: "\f478";
+}
+
+.fa-file-pdf:before {
+ content: "\f1c1";
+}
+
+.fa-file-powerpoint:before {
+ content: "\f1c4";
+}
+
+.fa-file-prescription:before {
+ content: "\f572";
+}
+
+.fa-file-signature:before {
+ content: "\f573";
+}
+
+.fa-file-upload:before {
+ content: "\f574";
+}
+
+.fa-file-video:before {
+ content: "\f1c8";
+}
+
+.fa-file-word:before {
+ content: "\f1c2";
+}
+
+.fa-fill:before {
+ content: "\f575";
+}
+
+.fa-fill-drip:before {
+ content: "\f576";
+}
+
+.fa-film:before {
+ content: "\f008";
+}
+
+.fa-filter:before {
+ content: "\f0b0";
+}
+
+.fa-fingerprint:before {
+ content: "\f577";
+}
+
+.fa-fire:before {
+ content: "\f06d";
+}
+
+.fa-fire-alt:before {
+ content: "\f7e4";
+}
+
+.fa-fire-extinguisher:before {
+ content: "\f134";
+}
+
+.fa-firefox:before {
+ content: "\f269";
+}
+
+.fa-first-aid:before {
+ content: "\f479";
+}
+
+.fa-first-order:before {
+ content: "\f2b0";
+}
+
+.fa-first-order-alt:before {
+ content: "\f50a";
+}
+
+.fa-firstdraft:before {
+ content: "\f3a1";
+}
+
+.fa-fish:before {
+ content: "\f578";
+}
+
+.fa-fist-raised:before {
+ content: "\f6de";
+}
+
+.fa-flag:before {
+ content: "\f024";
+}
+
+.fa-flag-checkered:before {
+ content: "\f11e";
+}
+
+.fa-flag-usa:before {
+ content: "\f74d";
+}
+
+.fa-flask:before {
+ content: "\f0c3";
+}
+
+.fa-flickr:before {
+ content: "\f16e";
+}
+
+.fa-flipboard:before {
+ content: "\f44d";
+}
+
+.fa-flushed:before {
+ content: "\f579";
+}
+
+.fa-fly:before {
+ content: "\f417";
+}
+
+.fa-folder:before {
+ content: "\f07b";
+}
+
+.fa-folder-minus:before {
+ content: "\f65d";
+}
+
+.fa-folder-open:before {
+ content: "\f07c";
+}
+
+.fa-folder-plus:before {
+ content: "\f65e";
+}
+
+.fa-font:before {
+ content: "\f031";
+}
+
+.fa-font-awesome:before {
+ content: "\f2b4";
+}
+
+.fa-font-awesome-alt:before {
+ content: "\f35c";
+}
+
+.fa-font-awesome-flag:before {
+ content: "\f425";
+}
+
+.fa-font-awesome-logo-full:before {
+ content: "\f4e6";
+}
+
+.fa-fonticons:before {
+ content: "\f280";
+}
+
+.fa-fonticons-fi:before {
+ content: "\f3a2";
+}
+
+.fa-football-ball:before {
+ content: "\f44e";
+}
+
+.fa-fort-awesome:before {
+ content: "\f286";
+}
+
+.fa-fort-awesome-alt:before {
+ content: "\f3a3";
+}
+
+.fa-forumbee:before {
+ content: "\f211";
+}
+
+.fa-forward:before {
+ content: "\f04e";
+}
+
+.fa-foursquare:before {
+ content: "\f180";
+}
+
+.fa-free-code-camp:before {
+ content: "\f2c5";
+}
+
+.fa-freebsd:before {
+ content: "\f3a4";
+}
+
+.fa-frog:before {
+ content: "\f52e";
+}
+
+.fa-frown:before {
+ content: "\f119";
+}
+
+.fa-frown-open:before {
+ content: "\f57a";
+}
+
+.fa-fulcrum:before {
+ content: "\f50b";
+}
+
+.fa-funnel-dollar:before {
+ content: "\f662";
+}
+
+.fa-futbol:before {
+ content: "\f1e3";
+}
+
+.fa-galactic-republic:before {
+ content: "\f50c";
+}
+
+.fa-galactic-senate:before {
+ content: "\f50d";
+}
+
+.fa-gamepad:before {
+ content: "\f11b";
+}
+
+.fa-gas-pump:before {
+ content: "\f52f";
+}
+
+.fa-gavel:before {
+ content: "\f0e3";
+}
+
+.fa-gem:before {
+ content: "\f3a5";
+}
+
+.fa-genderless:before {
+ content: "\f22d";
+}
+
+.fa-get-pocket:before {
+ content: "\f265";
+}
+
+.fa-gg:before {
+ content: "\f260";
+}
+
+.fa-gg-circle:before {
+ content: "\f261";
+}
+
+.fa-ghost:before {
+ content: "\f6e2";
+}
+
+.fa-gift:before {
+ content: "\f06b";
+}
+
+.fa-gifts:before {
+ content: "\f79c";
+}
+
+.fa-git:before {
+ content: "\f1d3";
+}
+
+.fa-git-square:before {
+ content: "\f1d2";
+}
+
+.fa-github:before {
+ content: "\f09b";
+}
+
+.fa-github-alt:before {
+ content: "\f113";
+}
+
+.fa-github-square:before {
+ content: "\f092";
+}
+
+.fa-gitkraken:before {
+ content: "\f3a6";
+}
+
+.fa-gitlab:before {
+ content: "\f296";
+}
+
+.fa-gitter:before {
+ content: "\f426";
+}
+
+.fa-glass-cheers:before {
+ content: "\f79f";
+}
+
+.fa-glass-martini:before {
+ content: "\f000";
+}
+
+.fa-glass-martini-alt:before {
+ content: "\f57b";
+}
+
+.fa-glass-whiskey:before {
+ content: "\f7a0";
+}
+
+.fa-glasses:before {
+ content: "\f530";
+}
+
+.fa-glide:before {
+ content: "\f2a5";
+}
+
+.fa-glide-g:before {
+ content: "\f2a6";
+}
+
+.fa-globe:before {
+ content: "\f0ac";
+}
+
+.fa-globe-africa:before {
+ content: "\f57c";
+}
+
+.fa-globe-americas:before {
+ content: "\f57d";
+}
+
+.fa-globe-asia:before {
+ content: "\f57e";
+}
+
+.fa-globe-europe:before {
+ content: "\f7a2";
+}
+
+.fa-gofore:before {
+ content: "\f3a7";
+}
+
+.fa-golf-ball:before {
+ content: "\f450";
+}
+
+.fa-goodreads:before {
+ content: "\f3a8";
+}
+
+.fa-goodreads-g:before {
+ content: "\f3a9";
+}
+
+.fa-google:before {
+ content: "\f1a0";
+}
+
+.fa-google-drive:before {
+ content: "\f3aa";
+}
+
+.fa-google-play:before {
+ content: "\f3ab";
+}
+
+.fa-google-plus:before {
+ content: "\f2b3";
+}
+
+.fa-google-plus-g:before {
+ content: "\f0d5";
+}
+
+.fa-google-plus-square:before {
+ content: "\f0d4";
+}
+
+.fa-google-wallet:before {
+ content: "\f1ee";
+}
+
+.fa-gopuram:before {
+ content: "\f664";
+}
+
+.fa-graduation-cap:before {
+ content: "\f19d";
+}
+
+.fa-gratipay:before {
+ content: "\f184";
+}
+
+.fa-grav:before {
+ content: "\f2d6";
+}
+
+.fa-greater-than:before {
+ content: "\f531";
+}
+
+.fa-greater-than-equal:before {
+ content: "\f532";
+}
+
+.fa-grimace:before {
+ content: "\f57f";
+}
+
+.fa-grin:before {
+ content: "\f580";
+}
+
+.fa-grin-alt:before {
+ content: "\f581";
+}
+
+.fa-grin-beam:before {
+ content: "\f582";
+}
+
+.fa-grin-beam-sweat:before {
+ content: "\f583";
+}
+
+.fa-grin-hearts:before {
+ content: "\f584";
+}
+
+.fa-grin-squint:before {
+ content: "\f585";
+}
+
+.fa-grin-squint-tears:before {
+ content: "\f586";
+}
+
+.fa-grin-stars:before {
+ content: "\f587";
+}
+
+.fa-grin-tears:before {
+ content: "\f588";
+}
+
+.fa-grin-tongue:before {
+ content: "\f589";
+}
+
+.fa-grin-tongue-squint:before {
+ content: "\f58a";
+}
+
+.fa-grin-tongue-wink:before {
+ content: "\f58b";
+}
+
+.fa-grin-wink:before {
+ content: "\f58c";
+}
+
+.fa-grip-horizontal:before {
+ content: "\f58d";
+}
+
+.fa-grip-lines:before {
+ content: "\f7a4";
+}
+
+.fa-grip-lines-vertical:before {
+ content: "\f7a5";
+}
+
+.fa-grip-vertical:before {
+ content: "\f58e";
+}
+
+.fa-gripfire:before {
+ content: "\f3ac";
+}
+
+.fa-grunt:before {
+ content: "\f3ad";
+}
+
+.fa-guitar:before {
+ content: "\f7a6";
+}
+
+.fa-gulp:before {
+ content: "\f3ae";
+}
+
+.fa-h-square:before {
+ content: "\f0fd";
+}
+
+.fa-hacker-news:before {
+ content: "\f1d4";
+}
+
+.fa-hacker-news-square:before {
+ content: "\f3af";
+}
+
+.fa-hackerrank:before {
+ content: "\f5f7";
+}
+
+.fa-hammer:before {
+ content: "\f6e3";
+}
+
+.fa-hamsa:before {
+ content: "\f665";
+}
+
+.fa-hand-holding:before {
+ content: "\f4bd";
+}
+
+.fa-hand-holding-heart:before {
+ content: "\f4be";
+}
+
+.fa-hand-holding-usd:before {
+ content: "\f4c0";
+}
+
+.fa-hand-lizard:before {
+ content: "\f258";
+}
+
+.fa-hand-paper:before {
+ content: "\f256";
+}
+
+.fa-hand-peace:before {
+ content: "\f25b";
+}
+
+.fa-hand-point-down:before {
+ content: "\f0a7";
+}
+
+.fa-hand-point-left:before {
+ content: "\f0a5";
+}
+
+.fa-hand-point-right:before {
+ content: "\f0a4";
+}
+
+.fa-hand-point-up:before {
+ content: "\f0a6";
+}
+
+.fa-hand-pointer:before {
+ content: "\f25a";
+}
+
+.fa-hand-rock:before {
+ content: "\f255";
+}
+
+.fa-hand-scissors:before {
+ content: "\f257";
+}
+
+.fa-hand-spock:before {
+ content: "\f259";
+}
+
+.fa-hands:before {
+ content: "\f4c2";
+}
+
+.fa-hands-helping:before {
+ content: "\f4c4";
+}
+
+.fa-handshake:before {
+ content: "\f2b5";
+}
+
+.fa-hanukiah:before {
+ content: "\f6e6";
+}
+
+.fa-hashtag:before {
+ content: "\f292";
+}
+
+.fa-hat-wizard:before {
+ content: "\f6e8";
+}
+
+.fa-haykal:before {
+ content: "\f666";
+}
+
+.fa-hdd:before {
+ content: "\f0a0";
+}
+
+.fa-heading:before {
+ content: "\f1dc";
+}
+
+.fa-headphones:before {
+ content: "\f025";
+}
+
+.fa-headphones-alt:before {
+ content: "\f58f";
+}
+
+.fa-headset:before {
+ content: "\f590";
+}
+
+.fa-heart:before {
+ content: "\f004";
+}
+
+.fa-heart-broken:before {
+ content: "\f7a9";
+}
+
+.fa-heartbeat:before {
+ content: "\f21e";
+}
+
+.fa-helicopter:before {
+ content: "\f533";
+}
+
+.fa-highlighter:before {
+ content: "\f591";
+}
+
+.fa-hiking:before {
+ content: "\f6ec";
+}
+
+.fa-hippo:before {
+ content: "\f6ed";
+}
+
+.fa-hips:before {
+ content: "\f452";
+}
+
+.fa-hire-a-helper:before {
+ content: "\f3b0";
+}
+
+.fa-history:before {
+ content: "\f1da";
+}
+
+.fa-hockey-puck:before {
+ content: "\f453";
+}
+
+.fa-holly-berry:before {
+ content: "\f7aa";
+}
+
+.fa-home:before {
+ content: "\f015";
+}
+
+.fa-hooli:before {
+ content: "\f427";
+}
+
+.fa-hornbill:before {
+ content: "\f592";
+}
+
+.fa-horse:before {
+ content: "\f6f0";
+}
+
+.fa-horse-head:before {
+ content: "\f7ab";
+}
+
+.fa-hospital:before {
+ content: "\f0f8";
+}
+
+.fa-hospital-alt:before {
+ content: "\f47d";
+}
+
+.fa-hospital-symbol:before {
+ content: "\f47e";
+}
+
+.fa-hot-tub:before {
+ content: "\f593";
+}
+
+.fa-hotel:before {
+ content: "\f594";
+}
+
+.fa-hotjar:before {
+ content: "\f3b1";
+}
+
+.fa-hourglass:before {
+ content: "\f254";
+}
+
+.fa-hourglass-end:before {
+ content: "\f253";
+}
+
+.fa-hourglass-half:before {
+ content: "\f252";
+}
+
+.fa-hourglass-start:before {
+ content: "\f251";
+}
+
+.fa-house-damage:before {
+ content: "\f6f1";
+}
+
+.fa-houzz:before {
+ content: "\f27c";
+}
+
+.fa-hryvnia:before {
+ content: "\f6f2";
+}
+
+.fa-html5:before {
+ content: "\f13b";
+}
+
+.fa-hubspot:before {
+ content: "\f3b2";
+}
+
+.fa-i-cursor:before {
+ content: "\f246";
+}
+
+.fa-icicles:before {
+ content: "\f7ad";
+}
+
+.fa-id-badge:before {
+ content: "\f2c1";
+}
+
+.fa-id-card:before {
+ content: "\f2c2";
+}
+
+.fa-id-card-alt:before {
+ content: "\f47f";
+}
+
+.fa-igloo:before {
+ content: "\f7ae";
+}
+
+.fa-image:before {
+ content: "\f03e";
+}
+
+.fa-images:before {
+ content: "\f302";
+}
+
+.fa-imdb:before {
+ content: "\f2d8";
+}
+
+.fa-inbox:before {
+ content: "\f01c";
+}
+
+.fa-indent:before {
+ content: "\f03c";
+}
+
+.fa-industry:before {
+ content: "\f275";
+}
+
+.fa-infinity:before {
+ content: "\f534";
+}
+
+.fa-info:before {
+ content: "\f129";
+}
+
+.fa-info-circle:before {
+ content: "\f05a";
+}
+
+.fa-instagram:before {
+ content: "\f16d";
+}
+
+.fa-intercom:before {
+ content: "\f7af";
+}
+
+.fa-internet-explorer:before {
+ content: "\f26b";
+}
+
+.fa-invision:before {
+ content: "\f7b0";
+}
+
+.fa-ioxhost:before {
+ content: "\f208";
+}
+
+.fa-italic:before {
+ content: "\f033";
+}
+
+.fa-itunes:before {
+ content: "\f3b4";
+}
+
+.fa-itunes-note:before {
+ content: "\f3b5";
+}
+
+.fa-java:before {
+ content: "\f4e4";
+}
+
+.fa-jedi:before {
+ content: "\f669";
+}
+
+.fa-jedi-order:before {
+ content: "\f50e";
+}
+
+.fa-jenkins:before {
+ content: "\f3b6";
+}
+
+.fa-jira:before {
+ content: "\f7b1";
+}
+
+.fa-joget:before {
+ content: "\f3b7";
+}
+
+.fa-joint:before {
+ content: "\f595";
+}
+
+.fa-joomla:before {
+ content: "\f1aa";
+}
+
+.fa-journal-whills:before {
+ content: "\f66a";
+}
+
+.fa-js:before {
+ content: "\f3b8";
+}
+
+.fa-js-square:before {
+ content: "\f3b9";
+}
+
+.fa-jsfiddle:before {
+ content: "\f1cc";
+}
+
+.fa-kaaba:before {
+ content: "\f66b";
+}
+
+.fa-kaggle:before {
+ content: "\f5fa";
+}
+
+.fa-key:before {
+ content: "\f084";
+}
+
+.fa-keybase:before {
+ content: "\f4f5";
+}
+
+.fa-keyboard:before {
+ content: "\f11c";
+}
+
+.fa-keycdn:before {
+ content: "\f3ba";
+}
+
+.fa-khanda:before {
+ content: "\f66d";
+}
+
+.fa-kickstarter:before {
+ content: "\f3bb";
+}
+
+.fa-kickstarter-k:before {
+ content: "\f3bc";
+}
+
+.fa-kiss:before {
+ content: "\f596";
+}
+
+.fa-kiss-beam:before {
+ content: "\f597";
+}
+
+.fa-kiss-wink-heart:before {
+ content: "\f598";
+}
+
+.fa-kiwi-bird:before {
+ content: "\f535";
+}
+
+.fa-korvue:before {
+ content: "\f42f";
+}
+
+.fa-landmark:before {
+ content: "\f66f";
+}
+
+.fa-language:before {
+ content: "\f1ab";
+}
+
+.fa-laptop:before {
+ content: "\f109";
+}
+
+.fa-laptop-code:before {
+ content: "\f5fc";
+}
+
+.fa-laravel:before {
+ content: "\f3bd";
+}
+
+.fa-lastfm:before {
+ content: "\f202";
+}
+
+.fa-lastfm-square:before {
+ content: "\f203";
+}
+
+.fa-laugh:before {
+ content: "\f599";
+}
+
+.fa-laugh-beam:before {
+ content: "\f59a";
+}
+
+.fa-laugh-squint:before {
+ content: "\f59b";
+}
+
+.fa-laugh-wink:before {
+ content: "\f59c";
+}
+
+.fa-layer-group:before {
+ content: "\f5fd";
+}
+
+.fa-leaf:before {
+ content: "\f06c";
+}
+
+.fa-leanpub:before {
+ content: "\f212";
+}
+
+.fa-lemon:before {
+ content: "\f094";
+}
+
+.fa-less:before {
+ content: "\f41d";
+}
+
+.fa-less-than:before {
+ content: "\f536";
+}
+
+.fa-less-than-equal:before {
+ content: "\f537";
+}
+
+.fa-level-down-alt:before {
+ content: "\f3be";
+}
+
+.fa-level-up-alt:before {
+ content: "\f3bf";
+}
+
+.fa-life-ring:before {
+ content: "\f1cd";
+}
+
+.fa-lightbulb:before {
+ content: "\f0eb";
+}
+
+.fa-line:before {
+ content: "\f3c0";
+}
+
+.fa-link:before {
+ content: "\f0c1";
+}
+
+.fa-linkedin:before {
+ content: "\f08c";
+}
+
+.fa-linkedin-in:before {
+ content: "\f0e1";
+}
+
+.fa-linode:before {
+ content: "\f2b8";
+}
+
+.fa-linux:before {
+ content: "\f17c";
+}
+
+.fa-lira-sign:before {
+ content: "\f195";
+}
+
+.fa-list:before {
+ content: "\f03a";
+}
+
+.fa-list-alt:before {
+ content: "\f022";
+}
+
+.fa-list-ol:before {
+ content: "\f0cb";
+}
+
+.fa-list-ul:before {
+ content: "\f0ca";
+}
+
+.fa-location-arrow:before {
+ content: "\f124";
+}
+
+.fa-lock:before {
+ content: "\f023";
+}
+
+.fa-lock-open:before {
+ content: "\f3c1";
+}
+
+.fa-long-arrow-alt-down:before {
+ content: "\f309";
+}
+
+.fa-long-arrow-alt-left:before {
+ content: "\f30a";
+}
+
+.fa-long-arrow-alt-right:before {
+ content: "\f30b";
+}
+
+.fa-long-arrow-alt-up:before {
+ content: "\f30c";
+}
+
+.fa-low-vision:before {
+ content: "\f2a8";
+}
+
+.fa-luggage-cart:before {
+ content: "\f59d";
+}
+
+.fa-lyft:before {
+ content: "\f3c3";
+}
+
+.fa-magento:before {
+ content: "\f3c4";
+}
+
+.fa-magic:before {
+ content: "\f0d0";
+}
+
+.fa-magnet:before {
+ content: "\f076";
+}
+
+.fa-mail-bulk:before {
+ content: "\f674";
+}
+
+.fa-mailchimp:before {
+ content: "\f59e";
+}
+
+.fa-male:before {
+ content: "\f183";
+}
+
+.fa-mandalorian:before {
+ content: "\f50f";
+}
+
+.fa-map:before {
+ content: "\f279";
+}
+
+.fa-map-marked:before {
+ content: "\f59f";
+}
+
+.fa-map-marked-alt:before {
+ content: "\f5a0";
+}
+
+.fa-map-marker:before {
+ content: "\f041";
+}
+
+.fa-map-marker-alt:before {
+ content: "\f3c5";
+}
+
+.fa-map-pin:before {
+ content: "\f276";
+}
+
+.fa-map-signs:before {
+ content: "\f277";
+}
+
+.fa-markdown:before {
+ content: "\f60f";
+}
+
+.fa-marker:before {
+ content: "\f5a1";
+}
+
+.fa-mars:before {
+ content: "\f222";
+}
+
+.fa-mars-double:before {
+ content: "\f227";
+}
+
+.fa-mars-stroke:before {
+ content: "\f229";
+}
+
+.fa-mars-stroke-h:before {
+ content: "\f22b";
+}
+
+.fa-mars-stroke-v:before {
+ content: "\f22a";
+}
+
+.fa-mask:before {
+ content: "\f6fa";
+}
+
+.fa-mastodon:before {
+ content: "\f4f6";
+}
+
+.fa-maxcdn:before {
+ content: "\f136";
+}
+
+.fa-medal:before {
+ content: "\f5a2";
+}
+
+.fa-medapps:before {
+ content: "\f3c6";
+}
+
+.fa-medium:before {
+ content: "\f23a";
+}
+
+.fa-medium-m:before {
+ content: "\f3c7";
+}
+
+.fa-medkit:before {
+ content: "\f0fa";
+}
+
+.fa-medrt:before {
+ content: "\f3c8";
+}
+
+.fa-meetup:before {
+ content: "\f2e0";
+}
+
+.fa-megaport:before {
+ content: "\f5a3";
+}
+
+.fa-meh:before {
+ content: "\f11a";
+}
+
+.fa-meh-blank:before {
+ content: "\f5a4";
+}
+
+.fa-meh-rolling-eyes:before {
+ content: "\f5a5";
+}
+
+.fa-memory:before {
+ content: "\f538";
+}
+
+.fa-mendeley:before {
+ content: "\f7b3";
+}
+
+.fa-menorah:before {
+ content: "\f676";
+}
+
+.fa-mercury:before {
+ content: "\f223";
+}
+
+.fa-meteor:before {
+ content: "\f753";
+}
+
+.fa-microchip:before {
+ content: "\f2db";
+}
+
+.fa-microphone:before {
+ content: "\f130";
+}
+
+.fa-microphone-alt:before {
+ content: "\f3c9";
+}
+
+.fa-microphone-alt-slash:before {
+ content: "\f539";
+}
+
+.fa-microphone-slash:before {
+ content: "\f131";
+}
+
+.fa-microscope:before {
+ content: "\f610";
+}
+
+.fa-microsoft:before {
+ content: "\f3ca";
+}
+
+.fa-minus:before {
+ content: "\f068";
+}
+
+.fa-minus-circle:before {
+ content: "\f056";
+}
+
+.fa-minus-square:before {
+ content: "\f146";
+}
+
+.fa-mitten:before {
+ content: "\f7b5";
+}
+
+.fa-mix:before {
+ content: "\f3cb";
+}
+
+.fa-mixcloud:before {
+ content: "\f289";
+}
+
+.fa-mizuni:before {
+ content: "\f3cc";
+}
+
+.fa-mobile:before {
+ content: "\f10b";
+}
+
+.fa-mobile-alt:before {
+ content: "\f3cd";
+}
+
+.fa-modx:before {
+ content: "\f285";
+}
+
+.fa-monero:before {
+ content: "\f3d0";
+}
+
+.fa-money-bill:before {
+ content: "\f0d6";
+}
+
+.fa-money-bill-alt:before {
+ content: "\f3d1";
+}
+
+.fa-money-bill-wave:before {
+ content: "\f53a";
+}
+
+.fa-money-bill-wave-alt:before {
+ content: "\f53b";
+}
+
+.fa-money-check:before {
+ content: "\f53c";
+}
+
+.fa-money-check-alt:before {
+ content: "\f53d";
+}
+
+.fa-monument:before {
+ content: "\f5a6";
+}
+
+.fa-moon:before {
+ content: "\f186";
+}
+
+.fa-mortar-pestle:before {
+ content: "\f5a7";
+}
+
+.fa-mosque:before {
+ content: "\f678";
+}
+
+.fa-motorcycle:before {
+ content: "\f21c";
+}
+
+.fa-mountain:before {
+ content: "\f6fc";
+}
+
+.fa-mouse-pointer:before {
+ content: "\f245";
+}
+
+.fa-mug-hot:before {
+ content: "\f7b6";
+}
+
+.fa-music:before {
+ content: "\f001";
+}
+
+.fa-napster:before {
+ content: "\f3d2";
+}
+
+.fa-neos:before {
+ content: "\f612";
+}
+
+.fa-network-wired:before {
+ content: "\f6ff";
+}
+
+.fa-neuter:before {
+ content: "\f22c";
+}
+
+.fa-newspaper:before {
+ content: "\f1ea";
+}
+
+.fa-nimblr:before {
+ content: "\f5a8";
+}
+
+.fa-nintendo-switch:before {
+ content: "\f418";
+}
+
+.fa-node:before {
+ content: "\f419";
+}
+
+.fa-node-js:before {
+ content: "\f3d3";
+}
+
+.fa-not-equal:before {
+ content: "\f53e";
+}
+
+.fa-notes-medical:before {
+ content: "\f481";
+}
+
+.fa-npm:before {
+ content: "\f3d4";
+}
+
+.fa-ns8:before {
+ content: "\f3d5";
+}
+
+.fa-nutritionix:before {
+ content: "\f3d6";
+}
+
+.fa-object-group:before {
+ content: "\f247";
+}
+
+.fa-object-ungroup:before {
+ content: "\f248";
+}
+
+.fa-odnoklassniki:before {
+ content: "\f263";
+}
+
+.fa-odnoklassniki-square:before {
+ content: "\f264";
+}
+
+.fa-oil-can:before {
+ content: "\f613";
+}
+
+.fa-old-republic:before {
+ content: "\f510";
+}
+
+.fa-om:before {
+ content: "\f679";
+}
+
+.fa-opencart:before {
+ content: "\f23d";
+}
+
+.fa-openid:before {
+ content: "\f19b";
+}
+
+.fa-opera:before {
+ content: "\f26a";
+}
+
+.fa-optin-monster:before {
+ content: "\f23c";
+}
+
+.fa-osi:before {
+ content: "\f41a";
+}
+
+.fa-otter:before {
+ content: "\f700";
+}
+
+.fa-outdent:before {
+ content: "\f03b";
+}
+
+.fa-page4:before {
+ content: "\f3d7";
+}
+
+.fa-pagelines:before {
+ content: "\f18c";
+}
+
+.fa-paint-brush:before {
+ content: "\f1fc";
+}
+
+.fa-paint-roller:before {
+ content: "\f5aa";
+}
+
+.fa-palette:before {
+ content: "\f53f";
+}
+
+.fa-palfed:before {
+ content: "\f3d8";
+}
+
+.fa-pallet:before {
+ content: "\f482";
+}
+
+.fa-paper-plane:before {
+ content: "\f1d8";
+}
+
+.fa-paperclip:before {
+ content: "\f0c6";
+}
+
+.fa-parachute-box:before {
+ content: "\f4cd";
+}
+
+.fa-paragraph:before {
+ content: "\f1dd";
+}
+
+.fa-parking:before {
+ content: "\f540";
+}
+
+.fa-passport:before {
+ content: "\f5ab";
+}
+
+.fa-pastafarianism:before {
+ content: "\f67b";
+}
+
+.fa-paste:before {
+ content: "\f0ea";
+}
+
+.fa-patreon:before {
+ content: "\f3d9";
+}
+
+.fa-pause:before {
+ content: "\f04c";
+}
+
+.fa-pause-circle:before {
+ content: "\f28b";
+}
+
+.fa-paw:before {
+ content: "\f1b0";
+}
+
+.fa-paypal:before {
+ content: "\f1ed";
+}
+
+.fa-peace:before {
+ content: "\f67c";
+}
+
+.fa-pen:before {
+ content: "\f304";
+}
+
+.fa-pen-alt:before {
+ content: "\f305";
+}
+
+.fa-pen-fancy:before {
+ content: "\f5ac";
+}
+
+.fa-pen-nib:before {
+ content: "\f5ad";
+}
+
+.fa-pen-square:before {
+ content: "\f14b";
+}
+
+.fa-pencil-alt:before {
+ content: "\f303";
+}
+
+.fa-pencil-ruler:before {
+ content: "\f5ae";
+}
+
+.fa-penny-arcade:before {
+ content: "\f704";
+}
+
+.fa-people-carry:before {
+ content: "\f4ce";
+}
+
+.fa-percent:before {
+ content: "\f295";
+}
+
+.fa-percentage:before {
+ content: "\f541";
+}
+
+.fa-periscope:before {
+ content: "\f3da";
+}
+
+.fa-person-booth:before {
+ content: "\f756";
+}
+
+.fa-phabricator:before {
+ content: "\f3db";
+}
+
+.fa-phoenix-framework:before {
+ content: "\f3dc";
+}
+
+.fa-phoenix-squadron:before {
+ content: "\f511";
+}
+
+.fa-phone:before {
+ content: "\f095";
+}
+
+.fa-phone-slash:before {
+ content: "\f3dd";
+}
+
+.fa-phone-square:before {
+ content: "\f098";
+}
+
+.fa-phone-volume:before {
+ content: "\f2a0";
+}
+
+.fa-php:before {
+ content: "\f457";
+}
+
+.fa-pied-piper:before {
+ content: "\f2ae";
+}
+
+.fa-pied-piper-alt:before {
+ content: "\f1a8";
+}
+
+.fa-pied-piper-hat:before {
+ content: "\f4e5";
+}
+
+.fa-pied-piper-pp:before {
+ content: "\f1a7";
+}
+
+.fa-piggy-bank:before {
+ content: "\f4d3";
+}
+
+.fa-pills:before {
+ content: "\f484";
+}
+
+.fa-pinterest:before {
+ content: "\f0d2";
+}
+
+.fa-pinterest-p:before {
+ content: "\f231";
+}
+
+.fa-pinterest-square:before {
+ content: "\f0d3";
+}
+
+.fa-place-of-worship:before {
+ content: "\f67f";
+}
+
+.fa-plane:before {
+ content: "\f072";
+}
+
+.fa-plane-arrival:before {
+ content: "\f5af";
+}
+
+.fa-plane-departure:before {
+ content: "\f5b0";
+}
+
+.fa-play:before {
+ content: "\f04b";
+}
+
+.fa-play-circle:before {
+ content: "\f144";
+}
+
+.fa-playstation:before {
+ content: "\f3df";
+}
+
+.fa-plug:before {
+ content: "\f1e6";
+}
+
+.fa-plus:before {
+ content: "\f067";
+}
+
+.fa-plus-circle:before {
+ content: "\f055";
+}
+
+.fa-plus-square:before {
+ content: "\f0fe";
+}
+
+.fa-podcast:before {
+ content: "\f2ce";
+}
+
+.fa-poll:before {
+ content: "\f681";
+}
+
+.fa-poll-h:before {
+ content: "\f682";
+}
+
+.fa-poo:before {
+ content: "\f2fe";
+}
+
+.fa-poo-storm:before {
+ content: "\f75a";
+}
+
+.fa-poop:before {
+ content: "\f619";
+}
+
+.fa-portrait:before {
+ content: "\f3e0";
+}
+
+.fa-pound-sign:before {
+ content: "\f154";
+}
+
+.fa-power-off:before {
+ content: "\f011";
+}
+
+.fa-pray:before {
+ content: "\f683";
+}
+
+.fa-praying-hands:before {
+ content: "\f684";
+}
+
+.fa-prescription:before {
+ content: "\f5b1";
+}
+
+.fa-prescription-bottle:before {
+ content: "\f485";
+}
+
+.fa-prescription-bottle-alt:before {
+ content: "\f486";
+}
+
+.fa-print:before {
+ content: "\f02f";
+}
+
+.fa-procedures:before {
+ content: "\f487";
+}
+
+.fa-product-hunt:before {
+ content: "\f288";
+}
+
+.fa-project-diagram:before {
+ content: "\f542";
+}
+
+.fa-pushed:before {
+ content: "\f3e1";
+}
+
+.fa-puzzle-piece:before {
+ content: "\f12e";
+}
+
+.fa-python:before {
+ content: "\f3e2";
+}
+
+.fa-qq:before {
+ content: "\f1d6";
+}
+
+.fa-qrcode:before {
+ content: "\f029";
+}
+
+.fa-question:before {
+ content: "\f128";
+}
+
+.fa-question-circle:before {
+ content: "\f059";
+}
+
+.fa-quidditch:before {
+ content: "\f458";
+}
+
+.fa-quinscape:before {
+ content: "\f459";
+}
+
+.fa-quora:before {
+ content: "\f2c4";
+}
+
+.fa-quote-left:before {
+ content: "\f10d";
+}
+
+.fa-quote-right:before {
+ content: "\f10e";
+}
+
+.fa-quran:before {
+ content: "\f687";
+}
+
+.fa-r-project:before {
+ content: "\f4f7";
+}
+
+.fa-radiation:before {
+ content: "\f7b9";
+}
+
+.fa-radiation-alt:before {
+ content: "\f7ba";
+}
+
+.fa-rainbow:before {
+ content: "\f75b";
+}
+
+.fa-random:before {
+ content: "\f074";
+}
+
+.fa-raspberry-pi:before {
+ content: "\f7bb";
+}
+
+.fa-ravelry:before {
+ content: "\f2d9";
+}
+
+.fa-react:before {
+ content: "\f41b";
+}
+
+.fa-reacteurope:before {
+ content: "\f75d";
+}
+
+.fa-readme:before {
+ content: "\f4d5";
+}
+
+.fa-rebel:before {
+ content: "\f1d0";
+}
+
+.fa-receipt:before {
+ content: "\f543";
+}
+
+.fa-recycle:before {
+ content: "\f1b8";
+}
+
+.fa-red-river:before {
+ content: "\f3e3";
+}
+
+.fa-reddit:before {
+ content: "\f1a1";
+}
+
+.fa-reddit-alien:before {
+ content: "\f281";
+}
+
+.fa-reddit-square:before {
+ content: "\f1a2";
+}
+
+.fa-redhat:before {
+ content: "\f7bc";
+}
+
+.fa-redo:before {
+ content: "\f01e";
+}
+
+.fa-redo-alt:before {
+ content: "\f2f9";
+}
+
+.fa-registered:before {
+ content: "\f25d";
+}
+
+.fa-renren:before {
+ content: "\f18b";
+}
+
+.fa-reply:before {
+ content: "\f3e5";
+}
+
+.fa-reply-all:before {
+ content: "\f122";
+}
+
+.fa-replyd:before {
+ content: "\f3e6";
+}
+
+.fa-republican:before {
+ content: "\f75e";
+}
+
+.fa-researchgate:before {
+ content: "\f4f8";
+}
+
+.fa-resolving:before {
+ content: "\f3e7";
+}
+
+.fa-restroom:before {
+ content: "\f7bd";
+}
+
+.fa-retweet:before {
+ content: "\f079";
+}
+
+.fa-rev:before {
+ content: "\f5b2";
+}
+
+.fa-ribbon:before {
+ content: "\f4d6";
+}
+
+.fa-ring:before {
+ content: "\f70b";
+}
+
+.fa-road:before {
+ content: "\f018";
+}
+
+.fa-robot:before {
+ content: "\f544";
+}
+
+.fa-rocket:before {
+ content: "\f135";
+}
+
+.fa-rocketchat:before {
+ content: "\f3e8";
+}
+
+.fa-rockrms:before {
+ content: "\f3e9";
+}
+
+.fa-route:before {
+ content: "\f4d7";
+}
+
+.fa-rss:before {
+ content: "\f09e";
+}
+
+.fa-rss-square:before {
+ content: "\f143";
+}
+
+.fa-ruble-sign:before {
+ content: "\f158";
+}
+
+.fa-ruler:before {
+ content: "\f545";
+}
+
+.fa-ruler-combined:before {
+ content: "\f546";
+}
+
+.fa-ruler-horizontal:before {
+ content: "\f547";
+}
+
+.fa-ruler-vertical:before {
+ content: "\f548";
+}
+
+.fa-running:before {
+ content: "\f70c";
+}
+
+.fa-rupee-sign:before {
+ content: "\f156";
+}
+
+.fa-sad-cry:before {
+ content: "\f5b3";
+}
+
+.fa-sad-tear:before {
+ content: "\f5b4";
+}
+
+.fa-safari:before {
+ content: "\f267";
+}
+
+.fa-sass:before {
+ content: "\f41e";
+}
+
+.fa-satellite:before {
+ content: "\f7bf";
+}
+
+.fa-satellite-dish:before {
+ content: "\f7c0";
+}
+
+.fa-save:before {
+ content: "\f0c7";
+}
+
+.fa-schlix:before {
+ content: "\f3ea";
+}
+
+.fa-school:before {
+ content: "\f549";
+}
+
+.fa-screwdriver:before {
+ content: "\f54a";
+}
+
+.fa-scribd:before {
+ content: "\f28a";
+}
+
+.fa-scroll:before {
+ content: "\f70e";
+}
+
+.fa-sd-card:before {
+ content: "\f7c2";
+}
+
+.fa-search:before {
+ content: "\f002";
+}
+
+.fa-search-dollar:before {
+ content: "\f688";
+}
+
+.fa-search-location:before {
+ content: "\f689";
+}
+
+.fa-search-minus:before {
+ content: "\f010";
+}
+
+.fa-search-plus:before {
+ content: "\f00e";
+}
+
+.fa-searchengin:before {
+ content: "\f3eb";
+}
+
+.fa-seedling:before {
+ content: "\f4d8";
+}
+
+.fa-sellcast:before {
+ content: "\f2da";
+}
+
+.fa-sellsy:before {
+ content: "\f213";
+}
+
+.fa-server:before {
+ content: "\f233";
+}
+
+.fa-servicestack:before {
+ content: "\f3ec";
+}
+
+.fa-shapes:before {
+ content: "\f61f";
+}
+
+.fa-share:before {
+ content: "\f064";
+}
+
+.fa-share-alt:before {
+ content: "\f1e0";
+}
+
+.fa-share-alt-square:before {
+ content: "\f1e1";
+}
+
+.fa-share-square:before {
+ content: "\f14d";
+}
+
+.fa-shekel-sign:before {
+ content: "\f20b";
+}
+
+.fa-shield-alt:before {
+ content: "\f3ed";
+}
+
+.fa-ship:before {
+ content: "\f21a";
+}
+
+.fa-shipping-fast:before {
+ content: "\f48b";
+}
+
+.fa-shirtsinbulk:before {
+ content: "\f214";
+}
+
+.fa-shoe-prints:before {
+ content: "\f54b";
+}
+
+.fa-shopping-bag:before {
+ content: "\f290";
+}
+
+.fa-shopping-basket:before {
+ content: "\f291";
+}
+
+.fa-shopping-cart:before {
+ content: "\f07a";
+}
+
+.fa-shopware:before {
+ content: "\f5b5";
+}
+
+.fa-shower:before {
+ content: "\f2cc";
+}
+
+.fa-shuttle-van:before {
+ content: "\f5b6";
+}
+
+.fa-sign:before {
+ content: "\f4d9";
+}
+
+.fa-sign-in-alt:before {
+ content: "\f2f6";
+}
+
+.fa-sign-language:before {
+ content: "\f2a7";
+}
+
+.fa-sign-out-alt:before {
+ content: "\f2f5";
+}
+
+.fa-signal:before {
+ content: "\f012";
+}
+
+.fa-signature:before {
+ content: "\f5b7";
+}
+
+.fa-sim-card:before {
+ content: "\f7c4";
+}
+
+.fa-simplybuilt:before {
+ content: "\f215";
+}
+
+.fa-sistrix:before {
+ content: "\f3ee";
+}
+
+.fa-sitemap:before {
+ content: "\f0e8";
+}
+
+.fa-sith:before {
+ content: "\f512";
+}
+
+.fa-skating:before {
+ content: "\f7c5";
+}
+
+.fa-sketch:before {
+ content: "\f7c6";
+}
+
+.fa-skiing:before {
+ content: "\f7c9";
+}
+
+.fa-skiing-nordic:before {
+ content: "\f7ca";
+}
+
+.fa-skull:before {
+ content: "\f54c";
+}
+
+.fa-skull-crossbones:before {
+ content: "\f714";
+}
+
+.fa-skyatlas:before {
+ content: "\f216";
+}
+
+.fa-skype:before {
+ content: "\f17e";
+}
+
+.fa-slack:before {
+ content: "\f198";
+}
+
+.fa-slack-hash:before {
+ content: "\f3ef";
+}
+
+.fa-slash:before {
+ content: "\f715";
+}
+
+.fa-sleigh:before {
+ content: "\f7cc";
+}
+
+.fa-sliders-h:before {
+ content: "\f1de";
+}
+
+.fa-slideshare:before {
+ content: "\f1e7";
+}
+
+.fa-smile:before {
+ content: "\f118";
+}
+
+.fa-smile-beam:before {
+ content: "\f5b8";
+}
+
+.fa-smile-wink:before {
+ content: "\f4da";
+}
+
+.fa-smog:before {
+ content: "\f75f";
+}
+
+.fa-smoking:before {
+ content: "\f48d";
+}
+
+.fa-smoking-ban:before {
+ content: "\f54d";
+}
+
+.fa-sms:before {
+ content: "\f7cd";
+}
+
+.fa-snapchat:before {
+ content: "\f2ab";
+}
+
+.fa-snapchat-ghost:before {
+ content: "\f2ac";
+}
+
+.fa-snapchat-square:before {
+ content: "\f2ad";
+}
+
+.fa-snowboarding:before {
+ content: "\f7ce";
+}
+
+.fa-snowflake:before {
+ content: "\f2dc";
+}
+
+.fa-snowman:before {
+ content: "\f7d0";
+}
+
+.fa-snowplow:before {
+ content: "\f7d2";
+}
+
+.fa-socks:before {
+ content: "\f696";
+}
+
+.fa-solar-panel:before {
+ content: "\f5ba";
+}
+
+.fa-sort:before {
+ content: "\f0dc";
+}
+
+.fa-sort-alpha-down:before {
+ content: "\f15d";
+}
+
+.fa-sort-alpha-up:before {
+ content: "\f15e";
+}
+
+.fa-sort-amount-down:before {
+ content: "\f160";
+}
+
+.fa-sort-amount-up:before {
+ content: "\f161";
+}
+
+.fa-sort-down:before {
+ content: "\f0dd";
+}
+
+.fa-sort-numeric-down:before {
+ content: "\f162";
+}
+
+.fa-sort-numeric-up:before {
+ content: "\f163";
+}
+
+.fa-sort-up:before {
+ content: "\f0de";
+}
+
+.fa-soundcloud:before {
+ content: "\f1be";
+}
+
+.fa-sourcetree:before {
+ content: "\f7d3";
+}
+
+.fa-spa:before {
+ content: "\f5bb";
+}
+
+.fa-space-shuttle:before {
+ content: "\f197";
+}
+
+.fa-speakap:before {
+ content: "\f3f3";
+}
+
+.fa-spider:before {
+ content: "\f717";
+}
+
+.fa-spinner:before {
+ content: "\f110";
+}
+
+.fa-splotch:before {
+ content: "\f5bc";
+}
+
+.fa-spotify:before {
+ content: "\f1bc";
+}
+
+.fa-spray-can:before {
+ content: "\f5bd";
+}
+
+.fa-square:before {
+ content: "\f0c8";
+}
+
+.fa-square-full:before {
+ content: "\f45c";
+}
+
+.fa-square-root-alt:before {
+ content: "\f698";
+}
+
+.fa-squarespace:before {
+ content: "\f5be";
+}
+
+.fa-stack-exchange:before {
+ content: "\f18d";
+}
+
+.fa-stack-overflow:before {
+ content: "\f16c";
+}
+
+.fa-stamp:before {
+ content: "\f5bf";
+}
+
+.fa-star:before {
+ content: "\f005";
+}
+
+.fa-star-and-crescent:before {
+ content: "\f699";
+}
+
+.fa-star-half:before {
+ content: "\f089";
+}
+
+.fa-star-half-alt:before {
+ content: "\f5c0";
+}
+
+.fa-star-of-david:before {
+ content: "\f69a";
+}
+
+.fa-star-of-life:before {
+ content: "\f621";
+}
+
+.fa-staylinked:before {
+ content: "\f3f5";
+}
+
+.fa-steam:before {
+ content: "\f1b6";
+}
+
+.fa-steam-square:before {
+ content: "\f1b7";
+}
+
+.fa-steam-symbol:before {
+ content: "\f3f6";
+}
+
+.fa-step-backward:before {
+ content: "\f048";
+}
+
+.fa-step-forward:before {
+ content: "\f051";
+}
+
+.fa-stethoscope:before {
+ content: "\f0f1";
+}
+
+.fa-sticker-mule:before {
+ content: "\f3f7";
+}
+
+.fa-sticky-note:before {
+ content: "\f249";
+}
+
+.fa-stop:before {
+ content: "\f04d";
+}
+
+.fa-stop-circle:before {
+ content: "\f28d";
+}
+
+.fa-stopwatch:before {
+ content: "\f2f2";
+}
+
+.fa-store:before {
+ content: "\f54e";
+}
+
+.fa-store-alt:before {
+ content: "\f54f";
+}
+
+.fa-strava:before {
+ content: "\f428";
+}
+
+.fa-stream:before {
+ content: "\f550";
+}
+
+.fa-street-view:before {
+ content: "\f21d";
+}
+
+.fa-strikethrough:before {
+ content: "\f0cc";
+}
+
+.fa-stripe:before {
+ content: "\f429";
+}
+
+.fa-stripe-s:before {
+ content: "\f42a";
+}
+
+.fa-stroopwafel:before {
+ content: "\f551";
+}
+
+.fa-studiovinari:before {
+ content: "\f3f8";
+}
+
+.fa-stumbleupon:before {
+ content: "\f1a4";
+}
+
+.fa-stumbleupon-circle:before {
+ content: "\f1a3";
+}
+
+.fa-subscript:before {
+ content: "\f12c";
+}
+
+.fa-subway:before {
+ content: "\f239";
+}
+
+.fa-suitcase:before {
+ content: "\f0f2";
+}
+
+.fa-suitcase-rolling:before {
+ content: "\f5c1";
+}
+
+.fa-sun:before {
+ content: "\f185";
+}
+
+.fa-superpowers:before {
+ content: "\f2dd";
+}
+
+.fa-superscript:before {
+ content: "\f12b";
+}
+
+.fa-supple:before {
+ content: "\f3f9";
+}
+
+.fa-surprise:before {
+ content: "\f5c2";
+}
+
+.fa-suse:before {
+ content: "\f7d6";
+}
+
+.fa-swatchbook:before {
+ content: "\f5c3";
+}
+
+.fa-swimmer:before {
+ content: "\f5c4";
+}
+
+.fa-swimming-pool:before {
+ content: "\f5c5";
+}
+
+.fa-synagogue:before {
+ content: "\f69b";
+}
+
+.fa-sync:before {
+ content: "\f021";
+}
+
+.fa-sync-alt:before {
+ content: "\f2f1";
+}
+
+.fa-syringe:before {
+ content: "\f48e";
+}
+
+.fa-table:before {
+ content: "\f0ce";
+}
+
+.fa-table-tennis:before {
+ content: "\f45d";
+}
+
+.fa-tablet:before {
+ content: "\f10a";
+}
+
+.fa-tablet-alt:before {
+ content: "\f3fa";
+}
+
+.fa-tablets:before {
+ content: "\f490";
+}
+
+.fa-tachometer-alt:before {
+ content: "\f3fd";
+}
+
+.fa-tag:before {
+ content: "\f02b";
+}
+
+.fa-tags:before {
+ content: "\f02c";
+}
+
+.fa-tape:before {
+ content: "\f4db";
+}
+
+.fa-tasks:before {
+ content: "\f0ae";
+}
+
+.fa-taxi:before {
+ content: "\f1ba";
+}
+
+.fa-teamspeak:before {
+ content: "\f4f9";
+}
+
+.fa-teeth:before {
+ content: "\f62e";
+}
+
+.fa-teeth-open:before {
+ content: "\f62f";
+}
+
+.fa-telegram:before {
+ content: "\f2c6";
+}
+
+.fa-telegram-plane:before {
+ content: "\f3fe";
+}
+
+.fa-temperature-high:before {
+ content: "\f769";
+}
+
+.fa-temperature-low:before {
+ content: "\f76b";
+}
+
+.fa-tencent-weibo:before {
+ content: "\f1d5";
+}
+
+.fa-tenge:before {
+ content: "\f7d7";
+}
+
+.fa-terminal:before {
+ content: "\f120";
+}
+
+.fa-text-height:before {
+ content: "\f034";
+}
+
+.fa-text-width:before {
+ content: "\f035";
+}
+
+.fa-th:before {
+ content: "\f00a";
+}
+
+.fa-th-large:before {
+ content: "\f009";
+}
+
+.fa-th-list:before {
+ content: "\f00b";
+}
+
+.fa-the-red-yeti:before {
+ content: "\f69d";
+}
+
+.fa-theater-masks:before {
+ content: "\f630";
+}
+
+.fa-themeco:before {
+ content: "\f5c6";
+}
+
+.fa-themeisle:before {
+ content: "\f2b2";
+}
+
+.fa-thermometer:before {
+ content: "\f491";
+}
+
+.fa-thermometer-empty:before {
+ content: "\f2cb";
+}
+
+.fa-thermometer-full:before {
+ content: "\f2c7";
+}
+
+.fa-thermometer-half:before {
+ content: "\f2c9";
+}
+
+.fa-thermometer-quarter:before {
+ content: "\f2ca";
+}
+
+.fa-thermometer-three-quarters:before {
+ content: "\f2c8";
+}
+
+.fa-think-peaks:before {
+ content: "\f731";
+}
+
+.fa-thumbs-down:before {
+ content: "\f165";
+}
+
+.fa-thumbs-up:before {
+ content: "\f164";
+}
+
+.fa-thumbtack:before {
+ content: "\f08d";
+}
+
+.fa-ticket-alt:before {
+ content: "\f3ff";
+}
+
+.fa-times:before {
+ content: "\f00d";
+}
+
+.fa-times-circle:before {
+ content: "\f057";
+}
+
+.fa-tint:before {
+ content: "\f043";
+}
+
+.fa-tint-slash:before {
+ content: "\f5c7";
+}
+
+.fa-tired:before {
+ content: "\f5c8";
+}
+
+.fa-toggle-off:before {
+ content: "\f204";
+}
+
+.fa-toggle-on:before {
+ content: "\f205";
+}
+
+.fa-toilet:before {
+ content: "\f7d8";
+}
+
+.fa-toilet-paper:before {
+ content: "\f71e";
+}
+
+.fa-toolbox:before {
+ content: "\f552";
+}
+
+.fa-tools:before {
+ content: "\f7d9";
+}
+
+.fa-tooth:before {
+ content: "\f5c9";
+}
+
+.fa-torah:before {
+ content: "\f6a0";
+}
+
+.fa-torii-gate:before {
+ content: "\f6a1";
+}
+
+.fa-tractor:before {
+ content: "\f722";
+}
+
+.fa-trade-federation:before {
+ content: "\f513";
+}
+
+.fa-trademark:before {
+ content: "\f25c";
+}
+
+.fa-traffic-light:before {
+ content: "\f637";
+}
+
+.fa-train:before {
+ content: "\f238";
+}
+
+.fa-tram:before {
+ content: "\f7da";
+}
+
+.fa-transgender:before {
+ content: "\f224";
+}
+
+.fa-transgender-alt:before {
+ content: "\f225";
+}
+
+.fa-trash:before {
+ content: "\f1f8";
+}
+
+.fa-trash-alt:before {
+ content: "\f2ed";
+}
+
+.fa-tree:before {
+ content: "\f1bb";
+}
+
+.fa-trello:before {
+ content: "\f181";
+}
+
+.fa-tripadvisor:before {
+ content: "\f262";
+}
+
+.fa-trophy:before {
+ content: "\f091";
+}
+
+.fa-truck:before {
+ content: "\f0d1";
+}
+
+.fa-truck-loading:before {
+ content: "\f4de";
+}
+
+.fa-truck-monster:before {
+ content: "\f63b";
+}
+
+.fa-truck-moving:before {
+ content: "\f4df";
+}
+
+.fa-truck-pickup:before {
+ content: "\f63c";
+}
+
+.fa-tshirt:before {
+ content: "\f553";
+}
+
+.fa-tty:before {
+ content: "\f1e4";
+}
+
+.fa-tumblr:before {
+ content: "\f173";
+}
+
+.fa-tumblr-square:before {
+ content: "\f174";
+}
+
+.fa-tv:before {
+ content: "\f26c";
+}
+
+.fa-twitch:before {
+ content: "\f1e8";
+}
+
+.fa-twitter:before {
+ content: "\f099";
+}
+
+.fa-twitter-square:before {
+ content: "\f081";
+}
+
+.fa-typo3:before {
+ content: "\f42b";
+}
+
+.fa-uber:before {
+ content: "\f402";
+}
+
+.fa-ubuntu:before {
+ content: "\f7df";
+}
+
+.fa-uikit:before {
+ content: "\f403";
+}
+
+.fa-umbrella:before {
+ content: "\f0e9";
+}
+
+.fa-umbrella-beach:before {
+ content: "\f5ca";
+}
+
+.fa-underline:before {
+ content: "\f0cd";
+}
+
+.fa-undo:before {
+ content: "\f0e2";
+}
+
+.fa-undo-alt:before {
+ content: "\f2ea";
+}
+
+.fa-uniregistry:before {
+ content: "\f404";
+}
+
+.fa-universal-access:before {
+ content: "\f29a";
+}
+
+.fa-university:before {
+ content: "\f19c";
+}
+
+.fa-unlink:before {
+ content: "\f127";
+}
+
+.fa-unlock:before {
+ content: "\f09c";
+}
+
+.fa-unlock-alt:before {
+ content: "\f13e";
+}
+
+.fa-untappd:before {
+ content: "\f405";
+}
+
+.fa-upload:before {
+ content: "\f093";
+}
+
+.fa-ups:before {
+ content: "\f7e0";
+}
+
+.fa-usb:before {
+ content: "\f287";
+}
+
+.fa-user:before {
+ content: "\f007";
+}
+
+.fa-user-alt:before {
+ content: "\f406";
+}
+
+.fa-user-alt-slash:before {
+ content: "\f4fa";
+}
+
+.fa-user-astronaut:before {
+ content: "\f4fb";
+}
+
+.fa-user-check:before {
+ content: "\f4fc";
+}
+
+.fa-user-circle:before {
+ content: "\f2bd";
+}
+
+.fa-user-clock:before {
+ content: "\f4fd";
+}
+
+.fa-user-cog:before {
+ content: "\f4fe";
+}
+
+.fa-user-edit:before {
+ content: "\f4ff";
+}
+
+.fa-user-friends:before {
+ content: "\f500";
+}
+
+.fa-user-graduate:before {
+ content: "\f501";
+}
+
+.fa-user-injured:before {
+ content: "\f728";
+}
+
+.fa-user-lock:before {
+ content: "\f502";
+}
+
+.fa-user-md:before {
+ content: "\f0f0";
+}
+
+.fa-user-minus:before {
+ content: "\f503";
+}
+
+.fa-user-ninja:before {
+ content: "\f504";
+}
+
+.fa-user-plus:before {
+ content: "\f234";
+}
+
+.fa-user-secret:before {
+ content: "\f21b";
+}
+
+.fa-user-shield:before {
+ content: "\f505";
+}
+
+.fa-user-slash:before {
+ content: "\f506";
+}
+
+.fa-user-tag:before {
+ content: "\f507";
+}
+
+.fa-user-tie:before {
+ content: "\f508";
+}
+
+.fa-user-times:before {
+ content: "\f235";
+}
+
+.fa-users:before {
+ content: "\f0c0";
+}
+
+.fa-users-cog:before {
+ content: "\f509";
+}
+
+.fa-usps:before {
+ content: "\f7e1";
+}
+
+.fa-ussunnah:before {
+ content: "\f407";
+}
+
+.fa-utensil-spoon:before {
+ content: "\f2e5";
+}
+
+.fa-utensils:before {
+ content: "\f2e7";
+}
+
+.fa-vaadin:before {
+ content: "\f408";
+}
+
+.fa-vector-square:before {
+ content: "\f5cb";
+}
+
+.fa-venus:before {
+ content: "\f221";
+}
+
+.fa-venus-double:before {
+ content: "\f226";
+}
+
+.fa-venus-mars:before {
+ content: "\f228";
+}
+
+.fa-viacoin:before {
+ content: "\f237";
+}
+
+.fa-viadeo:before {
+ content: "\f2a9";
+}
+
+.fa-viadeo-square:before {
+ content: "\f2aa";
+}
+
+.fa-vial:before {
+ content: "\f492";
+}
+
+.fa-vials:before {
+ content: "\f493";
+}
+
+.fa-viber:before {
+ content: "\f409";
+}
+
+.fa-video:before {
+ content: "\f03d";
+}
+
+.fa-video-slash:before {
+ content: "\f4e2";
+}
+
+.fa-vihara:before {
+ content: "\f6a7";
+}
+
+.fa-vimeo:before {
+ content: "\f40a";
+}
+
+.fa-vimeo-square:before {
+ content: "\f194";
+}
+
+.fa-vimeo-v:before {
+ content: "\f27d";
+}
+
+.fa-vine:before {
+ content: "\f1ca";
+}
+
+.fa-vk:before {
+ content: "\f189";
+}
+
+.fa-vnv:before {
+ content: "\f40b";
+}
+
+.fa-volleyball-ball:before {
+ content: "\f45f";
+}
+
+.fa-volume-down:before {
+ content: "\f027";
+}
+
+.fa-volume-mute:before {
+ content: "\f6a9";
+}
+
+.fa-volume-off:before {
+ content: "\f026";
+}
+
+.fa-volume-up:before {
+ content: "\f028";
+}
+
+.fa-vote-yea:before {
+ content: "\f772";
+}
+
+.fa-vr-cardboard:before {
+ content: "\f729";
+}
+
+.fa-vuejs:before {
+ content: "\f41f";
+}
+
+.fa-walking:before {
+ content: "\f554";
+}
+
+.fa-wallet:before {
+ content: "\f555";
+}
+
+.fa-warehouse:before {
+ content: "\f494";
+}
+
+.fa-water:before {
+ content: "\f773";
+}
+
+.fa-weebly:before {
+ content: "\f5cc";
+}
+
+.fa-weibo:before {
+ content: "\f18a";
+}
+
+.fa-weight:before {
+ content: "\f496";
+}
+
+.fa-weight-hanging:before {
+ content: "\f5cd";
+}
+
+.fa-weixin:before {
+ content: "\f1d7";
+}
+
+.fa-whatsapp:before {
+ content: "\f232";
+}
+
+.fa-whatsapp-square:before {
+ content: "\f40c";
+}
+
+.fa-wheelchair:before {
+ content: "\f193";
+}
+
+.fa-whmcs:before {
+ content: "\f40d";
+}
+
+.fa-wifi:before {
+ content: "\f1eb";
+}
+
+.fa-wikipedia-w:before {
+ content: "\f266";
+}
+
+.fa-wind:before {
+ content: "\f72e";
+}
+
+.fa-window-close:before {
+ content: "\f410";
+}
+
+.fa-window-maximize:before {
+ content: "\f2d0";
+}
+
+.fa-window-minimize:before {
+ content: "\f2d1";
+}
+
+.fa-window-restore:before {
+ content: "\f2d2";
+}
+
+.fa-windows:before {
+ content: "\f17a";
+}
+
+.fa-wine-bottle:before {
+ content: "\f72f";
+}
+
+.fa-wine-glass:before {
+ content: "\f4e3";
+}
+
+.fa-wine-glass-alt:before {
+ content: "\f5ce";
+}
+
+.fa-wix:before {
+ content: "\f5cf";
+}
+
+.fa-wizards-of-the-coast:before {
+ content: "\f730";
+}
+
+.fa-wolf-pack-battalion:before {
+ content: "\f514";
+}
+
+.fa-won-sign:before {
+ content: "\f159";
+}
+
+.fa-wordpress:before {
+ content: "\f19a";
+}
+
+.fa-wordpress-simple:before {
+ content: "\f411";
+}
+
+.fa-wpbeginner:before {
+ content: "\f297";
+}
+
+.fa-wpexplorer:before {
+ content: "\f2de";
+}
+
+.fa-wpforms:before {
+ content: "\f298";
+}
+
+.fa-wpressr:before {
+ content: "\f3e4";
+}
+
+.fa-wrench:before {
+ content: "\f0ad";
+}
+
+.fa-x-ray:before {
+ content: "\f497";
+}
+
+.fa-xbox:before {
+ content: "\f412";
+}
+
+.fa-xing:before {
+ content: "\f168";
+}
+
+.fa-xing-square:before {
+ content: "\f169";
+}
+
+.fa-y-combinator:before {
+ content: "\f23b";
+}
+
+.fa-yahoo:before {
+ content: "\f19e";
+}
+
+.fa-yandex:before {
+ content: "\f413";
+}
+
+.fa-yandex-international:before {
+ content: "\f414";
+}
+
+.fa-yarn:before {
+ content: "\f7e3";
+}
+
+.fa-yelp:before {
+ content: "\f1e9";
+}
+
+.fa-yen-sign:before {
+ content: "\f157";
+}
+
+.fa-yin-yang:before {
+ content: "\f6ad";
+}
+
+.fa-yoast:before {
+ content: "\f2b1";
+}
+
+.fa-youtube:before {
+ content: "\f167";
+}
+
+.fa-youtube-square:before {
+ content: "\f431";
+}
+
+.fa-zhihu:before {
+ content: "\f63f";
+}
+
+.fa,
+.fa,
+.fas,
+.far,
+.fal,
+.fab {
+ -moz-osx-font-smoothing: grayscale;
+ -webkit-font-smoothing: antialiased;
+ display: inline-block;
+ font-style: normal;
+ font-variant: normal;
+ text-rendering: auto;
+ line-height: 1;
+}
+
+@font-face {
+ font-family: "pf-v6-pficon";
+ src: url("./assets/pficon/pf-v6-pficon.woff2") format("woff2");
+}
+.pf-v6-pficon-zone:before, .pf-v6-pficon-warning-triangle:before, .pf-v6-pficon-volume:before, .pf-v6-pficon-virtual-machine:before, .pf-v6-pficon-users:before, .pf-v6-pficon-user:before, .pf-v6-pficon-unplugged:before, .pf-v6-pficon-unlocked:before, .pf-v6-pficon-unknown:before, .pf-v6-pficon-trend-up:before, .pf-v6-pficon-trend-down:before, .pf-v6-pficon-treeview:before, .pf-v6-pficon-topology:before, .pf-v6-pficon-thumb-tack:before, .pf-v6-pficon-tenant:before, .pf-v6-pficon-task:before, .pf-v6-pficon-storage-domain:before, .pf-v6-pficon-spinner2:before, .pf-v6-pficon-spinner:before, .pf-v6-pficon-severity-undefined:before, .pf-v6-pficon-severity-none:before, .pf-v6-pficon-severity-moderate:before, .pf-v6-pficon-severity-minor:before, .pf-v6-pficon-severity-important:before, .pf-v6-pficon-severity-critical:before, .pf-v6-pficon-services:before, .pf-v6-pficon-service:before, .pf-v6-pficon-service-catalog:before, .pf-v6-pficon-server:before, .pf-v6-pficon-server-group:before, .pf-v6-pficon-security:before, .pf-v6-pficon-screen:before, .pf-v6-pficon-save:before, .pf-v6-pficon-running:before, .pf-v6-pficon-resources-full:before, .pf-v6-pficon-resources-empty:before, .pf-v6-pficon-resources-almost-full:before, .pf-v6-pficon-resources-almost-empty:before, .pf-v6-pficon-resource-pool:before, .pf-v6-pficon-repository:before, .pf-v6-pficon-replicator:before, .pf-v6-pficon-remove2:before, .pf-v6-pficon-registry:before, .pf-v6-pficon-regions:before, .pf-v6-pficon-rebooting:before, .pf-v6-pficon-rebalance:before, .pf-v6-pficon-project:before, .pf-v6-pficon-process-automation:before, .pf-v6-pficon-private:before, .pf-v6-pficon-print:before, .pf-v6-pficon-port:before, .pf-v6-pficon-plugged:before, .pf-v6-pficon-pficon-vcenter:before, .pf-v6-pficon-pficon-template:before, .pf-v6-pficon-pficon-sort-common-desc:before, .pf-v6-pficon-pficon-sort-common-asc:before, .pf-v6-pficon-pficon-satellite:before, .pf-v6-pficon-pficon-network-range:before, .pf-v6-pficon-pficon-history:before, .pf-v6-pficon-pficon-dragdrop:before, .pf-v6-pficon-pending:before, .pf-v6-pficon-paused:before, .pf-v6-pficon-panel-open:before, .pf-v6-pficon-panel-close:before, .pf-v6-pficon-package:before, .pf-v6-pficon-os-image:before, .pf-v6-pficon-orders:before, .pf-v6-pficon-optimize:before, .pf-v6-pficon-openstack:before, .pf-v6-pficon-openshift:before, .pf-v6-pficon-open-drawer-right:before, .pf-v6-pficon-on:before, .pf-v6-pficon-on-running:before, .pf-v6-pficon-ok:before, .pf-v6-pficon-off:before, .pf-v6-pficon-not-started:before, .pf-v6-pficon-new-process:before, .pf-v6-pficon-network:before, .pf-v6-pficon-namespaces:before, .pf-v6-pficon-multicluster:before, .pf-v6-pficon-monitoring:before, .pf-v6-pficon-module:before, .pf-v6-pficon-migration:before, .pf-v6-pficon-middleware:before, .pf-v6-pficon-messages:before, .pf-v6-pficon-memory:before, .pf-v6-pficon-maintenance:before, .pf-v6-pficon-locked:before, .pf-v6-pficon-key:before, .pf-v6-pficon-integration:before, .pf-v6-pficon-infrastructure:before, .pf-v6-pficon-info:before, .pf-v6-pficon-in-progress:before, .pf-v6-pficon-import:before, .pf-v6-pficon-home:before, .pf-v6-pficon-history:before, .pf-v6-pficon-help:before, .pf-v6-pficon-globe-route:before, .pf-v6-pficon-folder-open:before, .pf-v6-pficon-folder-close:before, .pf-v6-pficon-flavor:before, .pf-v6-pficon-filter:before, .pf-v6-pficon-export:before, .pf-v6-pficon-error-circle-o:before, .pf-v6-pficon-equalizer:before, .pf-v6-pficon-enterprise:before, .pf-v6-pficon-enhancement:before, .pf-v6-pficon-edit:before, .pf-v6-pficon-domain:before, .pf-v6-pficon-disconnected:before, .pf-v6-pficon-degraded:before, .pf-v6-pficon-data-source:before, .pf-v6-pficon-data-sink:before, .pf-v6-pficon-data-processor:before, .pf-v6-pficon-critical-risk:before, .pf-v6-pficon-cpu:before, .pf-v6-pficon-container-node:before, .pf-v6-pficon-connected:before, .pf-v6-pficon-cluster:before, .pf-v6-pficon-cloud-tenant:before, .pf-v6-pficon-cloud-security:before, .pf-v6-pficon-close:before, .pf-v6-pficon-chat:before, .pf-v6-pficon-catalog:before, .pf-v6-pficon-bundle:before, .pf-v6-pficon-builder-image:before, .pf-v6-pficon-build:before, .pf-v6-pficon-blueprint:before, .pf-v6-pficon-bell:before, .pf-v6-pficon-automation:before, .pf-v6-pficon-attention-bell:before, .pf-v6-pficon-asleep:before, .pf-v6-pficon-arrow:before, .pf-v6-pficon-applications:before, .pf-v6-pficon-ansible-tower:before, .pf-v6-pficon-add-circle-o:before {
+ font-family: "pf-v6-pficon";
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+ font-style: normal;
+ font-variant: normal;
+ font-weight: normal;
+ text-decoration-line: none;
+ text-transform: none;
+}
+
+.pf-v6-pficon-add-circle-o:before {
+ content: "\e61b";
+}
+
+.pf-v6-pficon-ansible-tower:before {
+ content: "\e950";
+}
+
+.pf-v6-pficon-applications:before {
+ content: "\e936";
+}
+
+.pf-v6-pficon-arrow:before {
+ content: "\e929";
+}
+
+.pf-v6-pficon-asleep:before {
+ content: "\e92e";
+}
+
+.pf-v6-pficon-attention-bell:before {
+ content: "\e951";
+}
+
+.pf-v6-pficon-automation:before {
+ content: "\e937";
+}
+
+.pf-v6-pficon-bell:before {
+ content: "\e952";
+}
+
+.pf-v6-pficon-blueprint:before {
+ content: "\e915";
+}
+
+.pf-v6-pficon-build:before {
+ content: "\e902";
+}
+
+.pf-v6-pficon-builder-image:before {
+ content: "\e800";
+}
+
+.pf-v6-pficon-bundle:before {
+ content: "\e918";
+}
+
+.pf-v6-pficon-catalog:before {
+ content: "\e953";
+}
+
+.pf-v6-pficon-chat:before {
+ content: "\e954";
+}
+
+.pf-v6-pficon-close:before {
+ content: "\e60b";
+}
+
+.pf-v6-pficon-cloud-security:before {
+ content: "\e903";
+}
+
+.pf-v6-pficon-cloud-tenant:before {
+ content: "\e904";
+}
+
+.pf-v6-pficon-cluster:before {
+ content: "\e620";
+}
+
+.pf-v6-pficon-connected:before {
+ content: "\e938";
+}
+
+.pf-v6-pficon-container-node:before {
+ content: "\e621";
+}
+
+.pf-v6-pficon-cpu:before {
+ content: "\e927";
+}
+
+.pf-v6-pficon-critical-risk:before {
+ content: "\e976";
+}
+
+.pf-v6-pficon-data-processor:before {
+ content: "\e97b";
+}
+
+.pf-v6-pficon-data-sink:before {
+ content: "\e978";
+}
+
+.pf-v6-pficon-data-source:before {
+ content: "\e979";
+}
+
+.pf-v6-pficon-degraded:before {
+ content: "\e91b";
+}
+
+.pf-v6-pficon-disconnected:before {
+ content: "\e955";
+}
+
+.pf-v6-pficon-domain:before {
+ content: "\e919";
+}
+
+.pf-v6-pficon-edit:before {
+ content: "\e60a";
+}
+
+.pf-v6-pficon-enhancement:before {
+ content: "\e93a";
+}
+
+.pf-v6-pficon-enterprise:before {
+ content: "\e906";
+}
+
+.pf-v6-pficon-equalizer:before {
+ content: "\e956";
+}
+
+.pf-v6-pficon-error-circle-o:before {
+ content: "\e926";
+}
+
+.pf-v6-pficon-export:before {
+ content: "\e616";
+}
+
+.pf-v6-pficon-filter:before {
+ content: "\e943";
+}
+
+.pf-v6-pficon-flavor:before {
+ content: "\e957";
+}
+
+.pf-v6-pficon-folder-close:before {
+ content: "\e607";
+}
+
+.pf-v6-pficon-folder-open:before {
+ content: "\e606";
+}
+
+.pf-v6-pficon-globe-route:before {
+ content: "\e958";
+}
+
+.pf-v6-pficon-help:before {
+ content: "\e605";
+}
+
+.pf-v6-pficon-history:before {
+ content: "\e617";
+}
+
+.pf-v6-pficon-home:before {
+ content: "\e618";
+}
+
+.pf-v6-pficon-import:before {
+ content: "\e615";
+}
+
+.pf-v6-pficon-in-progress:before {
+ content: "\e933";
+}
+
+.pf-v6-pficon-info:before {
+ content: "\e92b";
+}
+
+.pf-v6-pficon-infrastructure:before {
+ content: "\e93d";
+}
+
+.pf-v6-pficon-integration:before {
+ content: "\e948";
+}
+
+.pf-v6-pficon-key:before {
+ content: "\e924";
+}
+
+.pf-v6-pficon-locked:before {
+ content: "\e923";
+}
+
+.pf-v6-pficon-maintenance:before {
+ content: "\e932";
+}
+
+.pf-v6-pficon-memory:before {
+ content: "\e908";
+}
+
+.pf-v6-pficon-messages:before {
+ content: "\e603";
+}
+
+.pf-v6-pficon-middleware:before {
+ content: "\e917";
+}
+
+.pf-v6-pficon-migration:before {
+ content: "\e931";
+}
+
+.pf-v6-pficon-module:before {
+ content: "\e959";
+}
+
+.pf-v6-pficon-monitoring:before {
+ content: "\e95a";
+}
+
+.pf-v6-pficon-multicluster:before {
+ content: "\e97c";
+}
+
+.pf-v6-pficon-namespaces:before {
+ content: "\e95b";
+}
+
+.pf-v6-pficon-network:before {
+ content: "\e909";
+}
+
+.pf-v6-pficon-new-process:before {
+ content: "\e95c";
+}
+
+.pf-v6-pficon-not-started:before {
+ content: "\e95d";
+}
+
+.pf-v6-pficon-off:before {
+ content: "\e92d";
+}
+
+.pf-v6-pficon-ok:before {
+ content: "\e602";
+}
+
+.pf-v6-pficon-on-running:before {
+ content: "\e925";
+}
+
+.pf-v6-pficon-on:before {
+ content: "\e92c";
+}
+
+.pf-v6-pficon-open-drawer-right:before {
+ content: "\e977";
+}
+
+.pf-v6-pficon-openshift:before {
+ content: "\e95e";
+}
+
+.pf-v6-pficon-openstack:before {
+ content: "\e95f";
+}
+
+.pf-v6-pficon-optimize:before {
+ content: "\e93e";
+}
+
+.pf-v6-pficon-orders:before {
+ content: "\e93f";
+}
+
+.pf-v6-pficon-os-image:before {
+ content: "\e960";
+}
+
+.pf-v6-pficon-package:before {
+ content: "\e961";
+}
+
+.pf-v6-pficon-panel-close:before {
+ content: "\e962";
+}
+
+.pf-v6-pficon-panel-open:before {
+ content: "\e963";
+}
+
+.pf-v6-pficon-paused:before {
+ content: "\e92f";
+}
+
+.pf-v6-pficon-pending:before {
+ content: "\e964";
+}
+
+.pf-v6-pficon-pficon-dragdrop:before {
+ content: "\e965";
+}
+
+.pf-v6-pficon-pficon-history:before {
+ content: "\e966";
+}
+
+.pf-v6-pficon-pficon-network-range:before {
+ content: "\e967";
+}
+
+.pf-v6-pficon-pficon-satellite:before {
+ content: "\e968";
+}
+
+.pf-v6-pficon-pficon-sort-common-asc:before {
+ content: "\e94e";
+}
+
+.pf-v6-pficon-pficon-sort-common-desc:before {
+ content: "\e94f";
+}
+
+.pf-v6-pficon-pficon-template:before {
+ content: "\e94c";
+}
+
+.pf-v6-pficon-pficon-vcenter:before {
+ content: "\e969";
+}
+
+.pf-v6-pficon-plugged:before {
+ content: "\e96a";
+}
+
+.pf-v6-pficon-port:before {
+ content: "\e96b";
+}
+
+.pf-v6-pficon-print:before {
+ content: "\e612";
+}
+
+.pf-v6-pficon-private:before {
+ content: "\e914";
+}
+
+.pf-v6-pficon-process-automation:before {
+ content: "\e949";
+}
+
+.pf-v6-pficon-project:before {
+ content: "\e96c";
+}
+
+.pf-v6-pficon-rebalance:before {
+ content: "\e91c";
+}
+
+.pf-v6-pficon-rebooting:before {
+ content: "\e96d";
+}
+
+.pf-v6-pficon-regions:before {
+ content: "\e90a";
+}
+
+.pf-v6-pficon-registry:before {
+ content: "\e623";
+}
+
+.pf-v6-pficon-remove2:before {
+ content: "\e96e";
+}
+
+.pf-v6-pficon-replicator:before {
+ content: "\e624";
+}
+
+.pf-v6-pficon-repository:before {
+ content: "\e90b";
+}
+
+.pf-v6-pficon-resource-pool:before {
+ content: "\e90c";
+}
+
+.pf-v6-pficon-resources-almost-empty:before {
+ content: "\e91d";
+}
+
+.pf-v6-pficon-resources-almost-full:before {
+ content: "\e912";
+}
+
+.pf-v6-pficon-resources-empty:before {
+ content: "\e96f";
+}
+
+.pf-v6-pficon-resources-full:before {
+ content: "\e913";
+}
+
+.pf-v6-pficon-running:before {
+ content: "\e970";
+}
+
+.pf-v6-pficon-save:before {
+ content: "\e601";
+}
+
+.pf-v6-pficon-screen:before {
+ content: "\e971";
+}
+
+.pf-v6-pficon-security:before {
+ content: "\e946";
+}
+
+.pf-v6-pficon-server-group:before {
+ content: "\e91a";
+}
+
+.pf-v6-pficon-server:before {
+ content: "\e90d";
+}
+
+.pf-v6-pficon-service-catalog:before {
+ content: "\e972";
+}
+
+.pf-v6-pficon-service:before {
+ content: "\e61e";
+}
+
+.pf-v6-pficon-services:before {
+ content: "\e947";
+}
+
+.pf-v6-pficon-severity-critical:before {
+ content: "\e97e";
+}
+
+.pf-v6-pficon-severity-important:before {
+ content: "\e97f";
+}
+
+.pf-v6-pficon-severity-minor:before {
+ content: "\e980";
+}
+
+.pf-v6-pficon-severity-moderate:before {
+ content: "\e981";
+}
+
+.pf-v6-pficon-severity-none:before {
+ content: "\e982";
+}
+
+.pf-v6-pficon-severity-undefined:before {
+ content: "\e983";
+}
+
+.pf-v6-pficon-spinner:before {
+ content: "\e973";
+}
+
+.pf-v6-pficon-spinner2:before {
+ content: "\e613";
+}
+
+.pf-v6-pficon-storage-domain:before {
+ content: "\e90e";
+}
+
+.pf-v6-pficon-task:before {
+ content: "\e974";
+}
+
+.pf-v6-pficon-tenant:before {
+ content: "\e916";
+}
+
+.pf-v6-pficon-thumb-tack:before {
+ content: "\e920";
+}
+
+.pf-v6-pficon-topology:before {
+ content: "\e608";
+}
+
+.pf-v6-pficon-treeview:before {
+ content: "\e97d";
+}
+
+.pf-v6-pficon-trend-down:before {
+ content: "\e900";
+}
+
+.pf-v6-pficon-trend-up:before {
+ content: "\e901";
+}
+
+.pf-v6-pficon-unknown:before {
+ content: "\e935";
+}
+
+.pf-v6-pficon-unlocked:before {
+ content: "\e922";
+}
+
+.pf-v6-pficon-unplugged:before {
+ content: "\e942";
+}
+
+.pf-v6-pficon-user:before {
+ content: "\e91e";
+}
+
+.pf-v6-pficon-users:before {
+ content: "\e91f";
+}
+
+.pf-v6-pficon-virtual-machine:before {
+ content: "\e90f";
+}
+
+.pf-v6-pficon-volume:before {
+ content: "\e910";
+}
+
+.pf-v6-pficon-warning-triangle:before {
+ content: "\e975";
+}
+
+.pf-v6-pficon-zone:before {
+ content: "\e911";
+}
+
+.pf-v6-svg {
+ width: 1em;
+ height: 1em;
+ vertical-align: -0.125em;
+}
+
+:root {
+ --pf-v6-global--inverse--multiplier: 1;
+ --pf-t--color--black: #000000;
+ --pf-t--color--blue--10: #e0f0ff;
+ --pf-t--color--blue--20: #b9dafc;
+ --pf-t--color--blue--30: #92c5f9;
+ --pf-t--color--blue--40: #4394e5;
+ --pf-t--color--blue--50: #0066cc;
+ --pf-t--color--blue--60: #004d99;
+ --pf-t--color--blue--70: #003366;
+ --pf-t--color--blue--80: #002250;
+ --pf-t--color--gray--10: #f2f2f2;
+ --pf-t--color--gray--20: #e0e0e0;
+ --pf-t--color--gray--30: #c7c7c7;
+ --pf-t--color--gray--40: #a3a3a3;
+ --pf-t--color--gray--50: #707070;
+ --pf-t--color--gray--60: #4d4d4d;
+ --pf-t--color--gray--70: #383838;
+ --pf-t--color--gray--80: #292929;
+ --pf-t--color--gray--90: #1f1f1f;
+ --pf-t--color--gray--95: #151515;
+ --pf-t--color--green--10: #e9f7df;
+ --pf-t--color--green--20: #d1f1bb;
+ --pf-t--color--green--30: #afdc8f;
+ --pf-t--color--green--40: #87bb62;
+ --pf-t--color--green--50: #63993d;
+ --pf-t--color--green--60: #3d7317;
+ --pf-t--color--green--70: #204d00;
+ --pf-t--color--orange--10: #ffe8cc;
+ --pf-t--color--orange--20: #fccb8f;
+ --pf-t--color--orange--30: #f8ae54;
+ --pf-t--color--orange--40: #f5921b;
+ --pf-t--color--orange--50: #ca6c0f;
+ --pf-t--color--orange--60: #9e4a06;
+ --pf-t--color--orange--70: #732e00;
+ --pf-t--color--orange--80: #4d1f00;
+ --pf-t--color--purple--10: #ece6ff;
+ --pf-t--color--purple--20: #d0c5f4;
+ --pf-t--color--purple--30: #b6a6e9;
+ --pf-t--color--purple--40: #876fd4;
+ --pf-t--color--purple--50: #5e40be;
+ --pf-t--color--purple--60: #3d2785;
+ --pf-t--color--purple--70: #21134d;
+ --pf-t--color--purple--80: #1b0d33;
+ --pf-t--color--red--10: #fce3e3;
+ --pf-t--color--red--20: #fbc5c5;
+ --pf-t--color--red--30: #f9a8a8;
+ --pf-t--color--red--40: #f56e6e;
+ --pf-t--color--red--50: #ee0000;
+ --pf-t--color--red--60: #a60000;
+ --pf-t--color--red--70: #5f0000;
+ --pf-t--color--red--80: #3f0000;
+ --pf-t--color--red-orange--10: #ffe3d9;
+ --pf-t--color--red-orange--20: #fbbea8;
+ --pf-t--color--red-orange--30: #f89b78;
+ --pf-t--color--red-orange--40: #f4784a;
+ --pf-t--color--red-orange--50: #f0561d;
+ --pf-t--color--red-orange--60: #b1380b;
+ --pf-t--color--red-orange--70: #731f00;
+ --pf-t--color--teal--10: #daf2f2;
+ --pf-t--color--teal--20: #b9e5e5;
+ --pf-t--color--teal--30: #9ad8d8;
+ --pf-t--color--teal--40: #63bdbd;
+ --pf-t--color--teal--50: #37a3a3;
+ --pf-t--color--teal--60: #147878;
+ --pf-t--color--teal--70: #004d4d;
+ --pf-t--color--teal--80: #003333;
+ --pf-t--color--white: #ffffff;
+ --pf-t--color--yellow--10: #fff4cc;
+ --pf-t--color--yellow--20: #ffe072;
+ --pf-t--color--yellow--30: #ffcc17;
+ --pf-t--color--yellow--40: #dca614;
+ --pf-t--color--yellow--50: #b98412;
+ --pf-t--color--yellow--60: #96640f;
+ --pf-t--color--yellow--70: #73480b;
+ --pf-t--color--yellow--80: #54330b;
+ --pf-t--global--background--color--500: rgba(21, 21, 21, 0.2000);
+ --pf-t--global--background--color--600: rgba(199, 199, 199, 0.2500);
+ --pf-t--global--background--color--action--plain--default: rgba(255, 255, 255, 0.0000);
+ --pf-t--global--border--color--high-contrast: rgba(255, 255, 255, 0.0000);
+ --pf-t--global--border--radius--0: 0px;
+ --pf-t--global--border--radius--100: 4px;
+ --pf-t--global--border--radius--200: 6px;
+ --pf-t--global--border--radius--300: 16px;
+ --pf-t--global--border--radius--400: 24px;
+ --pf-t--global--border--radius--500: 999px;
+ --pf-t--global--border--width--100: 1px;
+ --pf-t--global--border--width--200: 2px;
+ --pf-t--global--border--width--300: 3px;
+ --pf-t--global--border--width--400: 4px;
+ --pf-t--global--box-shadow--X--100: -10px;
+ --pf-t--global--box-shadow--X--200: -4px;
+ --pf-t--global--box-shadow--X--300: -1px;
+ --pf-t--global--box-shadow--X--400: 0px;
+ --pf-t--global--box-shadow--X--50: -20px;
+ --pf-t--global--box-shadow--X--500: 1px;
+ --pf-t--global--box-shadow--X--600: 4px;
+ --pf-t--global--box-shadow--X--700: 10px;
+ --pf-t--global--box-shadow--X--800: 20px;
+ --pf-t--global--box-shadow--Y--100: -10px;
+ --pf-t--global--box-shadow--Y--200: -4px;
+ --pf-t--global--box-shadow--Y--300: -1px;
+ --pf-t--global--box-shadow--Y--400: 0px;
+ --pf-t--global--box-shadow--Y--50: -20px;
+ --pf-t--global--box-shadow--Y--500: 1px;
+ --pf-t--global--box-shadow--Y--600: 4px;
+ --pf-t--global--box-shadow--Y--700: 10px;
+ --pf-t--global--box-shadow--Y--800: 20px;
+ --pf-t--global--box-shadow--blur--100: 4px;
+ --pf-t--global--box-shadow--blur--200: 9px;
+ --pf-t--global--box-shadow--blur--300: 20px;
+ --pf-t--global--box-shadow--color--100: rgba(41, 41, 41, 0.1500);
+ --pf-t--global--box-shadow--color--200: rgba(41, 41, 41, 0.2000);
+ --pf-t--global--box-shadow--spread--100: 0px;
+ --pf-t--global--box-shadow--spread--200: -4px;
+ --pf-t--global--box-shadow--spread--300: -8px;
+ --pf-t--global--box-shadow--spread--400: -20px;
+ --pf-t--global--breakpoint--100: 0rem;
+ --pf-t--global--breakpoint--200: 36rem;
+ --pf-t--global--breakpoint--250: 40rem;
+ --pf-t--global--breakpoint--300: 48rem;
+ --pf-t--global--breakpoint--350: 60rem;
+ --pf-t--global--breakpoint--400: 62rem;
+ --pf-t--global--breakpoint--500: 75rem;
+ --pf-t--global--breakpoint--550: 80rem;
+ --pf-t--global--breakpoint--600: 90.625rem;
+ --pf-t--global--color--nonstatus--green--400: #3d7019;
+ --pf-t--global--color--status--danger--300: #501600;
+ --pf-t--global--color--status--success--150: #3d7019;
+ --pf-t--global--color--status--success--300: #153300;
+ --pf-t--global--delay--100: 0ms;
+ --pf-t--global--delay--200: 50ms;
+ --pf-t--global--delay--300: 100ms;
+ --pf-t--global--delay--400: 7000ms;
+ --pf-t--global--duration--100: 100ms;
+ --pf-t--global--duration--200: 200ms;
+ --pf-t--global--duration--300: 300ms;
+ --pf-t--global--duration--400: 400ms;
+ --pf-t--global--duration--50: 50ms;
+ --pf-t--global--duration--500: 500ms;
+ --pf-t--global--duration--600: 600ms;
+ --pf-t--global--font--family--100: "Red Hat Text", "RedHatText", "Noto Sans Arabic", "Noto Sans Hebrew", "Noto Sans JP", "Noto Sans KR", "Noto Sans Malayalam", "Noto Sans SC", "Noto Sans TC", "Noto Sans Thai", Helvetica, Arial, sans-serif;
+ --pf-t--global--font--family--200: "Red Hat Display", "RedHatDisplay", "Noto Sans Arabic", "Noto Sans Hebrew", "Noto Sans JP", "Noto Sans KR", "Noto Sans Malayalam", "Noto Sans SC", "Noto Sans TC", "Noto Sans Thai", Helvetica, Arial, sans-serif;
+ --pf-t--global--font--family--300: "Red Hat Mono", "RedHatMono", "Courier New", Courier, monospace;
+ --pf-t--global--font--line-height--100: 1.3;
+ --pf-t--global--font--line-height--200: 1.5;
+ --pf-t--global--font--size--100: 0.75rem;
+ --pf-t--global--font--size--200: 0.875rem;
+ --pf-t--global--font--size--300: 1rem;
+ --pf-t--global--font--size--400: 1.125rem;
+ --pf-t--global--font--size--500: 1.25rem;
+ --pf-t--global--font--size--600: 1.5rem;
+ --pf-t--global--font--size--700: 1.75rem;
+ --pf-t--global--font--size--800: 2.25rem;
+ --pf-t--global--font--weight--100: 400;
+ --pf-t--global--font--weight--200: 500;
+ --pf-t--global--font--weight--300: 500;
+ --pf-t--global--font--weight--400: 700;
+ --pf-t--global--icon--size--100: 0.75rem;
+ --pf-t--global--icon--size--200: 0.875rem;
+ --pf-t--global--icon--size--250: 1rem;
+ --pf-t--global--icon--size--300: 1.5rem;
+ --pf-t--global--icon--size--400: 3.5rem;
+ --pf-t--global--icon--size--500: 6rem;
+ --pf-t--global--spacer--100: 0.25rem;
+ --pf-t--global--spacer--200: 0.5rem;
+ --pf-t--global--spacer--300: 1rem;
+ --pf-t--global--spacer--400: 1.5rem;
+ --pf-t--global--spacer--500: 2rem;
+ --pf-t--global--spacer--600: 3rem;
+ --pf-t--global--spacer--700: 4rem;
+ --pf-t--global--spacer--800: 5rem;
+ --pf-t--global--text-decoration--line--100: none;
+ --pf-t--global--text-decoration--line--200: underline;
+ --pf-t--global--text-decoration--style--100: solid;
+ --pf-t--global--text-decoration--style--200: dashed;
+ --pf-t--global--timing-function--100: cubic-bezier(.4, 0, .7, .2);
+ --pf-t--global--timing-function--200: cubic-bezier(.4, 0, .2, 1);
+ --pf-t--global--timing-function--300: cubic-bezier(0, 0, .2, 1);
+ --pf-t--global--z-index--100: 100;
+ --pf-t--global--z-index--200: 200;
+ --pf-t--global--z-index--300: 300;
+ --pf-t--global--z-index--400: 400;
+ --pf-t--global--z-index--500: 500;
+ --pf-t--global--z-index--600: 600;
+ --pf-t--global--background--color--100: var(--pf-t--color--white);
+ --pf-t--global--background--color--200: var(--pf-t--color--gray--10);
+ --pf-t--global--background--color--300: var(--pf-t--color--gray--20);
+ --pf-t--global--background--color--400: var(--pf-t--color--gray--80);
+ --pf-t--global--background--color--450: var(--pf-t--color--gray--70);
+ --pf-t--global--background--color--action--plain--clicked: var(--pf-t--global--background--color--600);
+ --pf-t--global--background--color--action--plain--hover: var(--pf-t--global--background--color--600);
+ --pf-t--global--background--color--backdrop--default: var(--pf-t--global--background--color--500);
+ --pf-t--global--background--color--highlight--100: var(--pf-t--color--yellow--30);
+ --pf-t--global--background--color--highlight--200: var(--pf-t--color--yellow--40);
+ --pf-t--global--background--color--tertiary--default: var(--pf-t--global--background--color--600);
+ --pf-t--global--border--color--100: var(--pf-t--color--gray--30);
+ --pf-t--global--border--color--200: var(--pf-t--color--gray--40);
+ --pf-t--global--border--color--300: var(--pf-t--color--gray--50);
+ --pf-t--global--border--color--450: var(--pf-t--color--gray--60);
+ --pf-t--global--border--color--50: var(--pf-t--color--gray--20);
+ --pf-t--global--border--radius--large: var(--pf-t--global--border--radius--400);
+ --pf-t--global--border--radius--medium: var(--pf-t--global--border--radius--300);
+ --pf-t--global--border--radius--pill: var(--pf-t--global--border--radius--500);
+ --pf-t--global--border--radius--sharp: var(--pf-t--global--border--radius--0);
+ --pf-t--global--border--radius--small: var(--pf-t--global--border--radius--200);
+ --pf-t--global--border--radius--tiny: var(--pf-t--global--border--radius--100);
+ --pf-t--global--border--width--action--clicked: var(--pf-t--global--border--width--200);
+ --pf-t--global--border--width--action--default: var(--pf-t--global--border--width--100);
+ --pf-t--global--border--width--action--hover: var(--pf-t--global--border--width--200);
+ --pf-t--global--border--width--box--clicked: var(--pf-t--global--border--width--200);
+ --pf-t--global--border--width--box--default: var(--pf-t--global--border--width--100);
+ --pf-t--global--border--width--box--hover: var(--pf-t--global--border--width--100);
+ --pf-t--global--border--width--box--status--default: var(--pf-t--global--border--width--200);
+ --pf-t--global--border--width--box--status--read: var(--pf-t--global--border--width--100);
+ --pf-t--global--border--width--control--clicked: var(--pf-t--global--border--width--200);
+ --pf-t--global--border--width--control--default: var(--pf-t--global--border--width--100);
+ --pf-t--global--border--width--control--hover: var(--pf-t--global--border--width--100);
+ --pf-t--global--border--width--divider--clicked: var(--pf-t--global--border--width--100);
+ --pf-t--global--border--width--divider--default: var(--pf-t--global--border--width--100);
+ --pf-t--global--border--width--divider--hover: var(--pf-t--global--border--width--100);
+ --pf-t--global--border--width--extra-strong: var(--pf-t--global--border--width--300);
+ --pf-t--global--border--width--regular: var(--pf-t--global--border--width--100);
+ --pf-t--global--border--width--strong: var(--pf-t--global--border--width--200);
+ --pf-t--global--box-shadow--X--lg--bottom: var(--pf-t--global--box-shadow--X--400);
+ --pf-t--global--box-shadow--X--lg--default: var(--pf-t--global--box-shadow--X--400);
+ --pf-t--global--box-shadow--X--lg--left: var(--pf-t--global--box-shadow--X--50);
+ --pf-t--global--box-shadow--X--lg--right: var(--pf-t--global--box-shadow--X--800);
+ --pf-t--global--box-shadow--X--lg--top: var(--pf-t--global--box-shadow--X--400);
+ --pf-t--global--box-shadow--X--md--bottom: var(--pf-t--global--box-shadow--X--400);
+ --pf-t--global--box-shadow--X--md--default: var(--pf-t--global--box-shadow--X--400);
+ --pf-t--global--box-shadow--X--md--left: var(--pf-t--global--box-shadow--X--100);
+ --pf-t--global--box-shadow--X--md--right: var(--pf-t--global--box-shadow--X--700);
+ --pf-t--global--box-shadow--X--md--top: var(--pf-t--global--box-shadow--X--400);
+ --pf-t--global--box-shadow--X--sm--bottom: var(--pf-t--global--box-shadow--X--400);
+ --pf-t--global--box-shadow--X--sm--default: var(--pf-t--global--box-shadow--X--400);
+ --pf-t--global--box-shadow--X--sm--left: var(--pf-t--global--box-shadow--X--200);
+ --pf-t--global--box-shadow--X--sm--right: var(--pf-t--global--box-shadow--X--600);
+ --pf-t--global--box-shadow--X--sm--top: var(--pf-t--global--box-shadow--X--400);
+ --pf-t--global--box-shadow--Y--lg--bottom: var(--pf-t--global--box-shadow--Y--800);
+ --pf-t--global--box-shadow--Y--lg--default: var(--pf-t--global--box-shadow--Y--700);
+ --pf-t--global--box-shadow--Y--lg--left: var(--pf-t--global--box-shadow--Y--400);
+ --pf-t--global--box-shadow--Y--lg--right: var(--pf-t--global--box-shadow--Y--400);
+ --pf-t--global--box-shadow--Y--lg--top: var(--pf-t--global--box-shadow--Y--50);
+ --pf-t--global--box-shadow--Y--md--bottom: var(--pf-t--global--box-shadow--Y--700);
+ --pf-t--global--box-shadow--Y--md--default: var(--pf-t--global--box-shadow--Y--600);
+ --pf-t--global--box-shadow--Y--md--left: var(--pf-t--global--box-shadow--Y--400);
+ --pf-t--global--box-shadow--Y--md--right: var(--pf-t--global--box-shadow--Y--400);
+ --pf-t--global--box-shadow--Y--md--top: var(--pf-t--global--box-shadow--Y--100);
+ --pf-t--global--box-shadow--Y--sm--bottom: var(--pf-t--global--box-shadow--Y--600);
+ --pf-t--global--box-shadow--Y--sm--default: var(--pf-t--global--box-shadow--Y--500);
+ --pf-t--global--box-shadow--Y--sm--left: var(--pf-t--global--box-shadow--Y--400);
+ --pf-t--global--box-shadow--Y--sm--right: var(--pf-t--global--box-shadow--Y--400);
+ --pf-t--global--box-shadow--Y--sm--top: var(--pf-t--global--box-shadow--Y--200);
+ --pf-t--global--box-shadow--blur--lg: var(--pf-t--global--box-shadow--blur--300);
+ --pf-t--global--box-shadow--blur--md: var(--pf-t--global--box-shadow--blur--200);
+ --pf-t--global--box-shadow--blur--sm: var(--pf-t--global--box-shadow--blur--100);
+ --pf-t--global--box-shadow--color--lg--default: var(--pf-t--global--box-shadow--color--100);
+ --pf-t--global--box-shadow--color--lg--directional: var(--pf-t--global--box-shadow--color--200);
+ --pf-t--global--box-shadow--color--md--default: var(--pf-t--global--box-shadow--color--100);
+ --pf-t--global--box-shadow--color--md--directional: var(--pf-t--global--box-shadow--color--100);
+ --pf-t--global--box-shadow--color--sm--default: var(--pf-t--global--box-shadow--color--100);
+ --pf-t--global--box-shadow--color--sm--directional: var(--pf-t--global--box-shadow--color--200);
+ --pf-t--global--box-shadow--spread--lg--default: var(--pf-t--global--box-shadow--spread--100);
+ --pf-t--global--box-shadow--spread--lg--directional: var(--pf-t--global--box-shadow--spread--400);
+ --pf-t--global--box-shadow--spread--md--default: var(--pf-t--global--box-shadow--spread--100);
+ --pf-t--global--box-shadow--spread--md--directional: var(--pf-t--global--box-shadow--spread--300);
+ --pf-t--global--box-shadow--spread--sm--default: var(--pf-t--global--box-shadow--spread--100);
+ --pf-t--global--box-shadow--spread--sm--directional: var(--pf-t--global--box-shadow--spread--200);
+ --pf-t--global--breakpoint--2xl: var(--pf-t--global--breakpoint--600);
+ --pf-t--global--breakpoint--height--2xl: var(--pf-t--global--breakpoint--550);
+ --pf-t--global--breakpoint--height--lg: var(--pf-t--global--breakpoint--300);
+ --pf-t--global--breakpoint--height--md: var(--pf-t--global--breakpoint--250);
+ --pf-t--global--breakpoint--height--sm: var(--pf-t--global--breakpoint--100);
+ --pf-t--global--breakpoint--height--xl: var(--pf-t--global--breakpoint--350);
+ --pf-t--global--breakpoint--lg: var(--pf-t--global--breakpoint--400);
+ --pf-t--global--breakpoint--md: var(--pf-t--global--breakpoint--300);
+ --pf-t--global--breakpoint--sm: var(--pf-t--global--breakpoint--200);
+ --pf-t--global--breakpoint--xl: var(--pf-t--global--breakpoint--500);
+ --pf-t--global--breakpoint--xs: var(--pf-t--global--breakpoint--100);
+ --pf-t--global--color--brand--100: var(--pf-t--color--blue--40);
+ --pf-t--global--color--brand--200: var(--pf-t--color--blue--50);
+ --pf-t--global--color--brand--300: var(--pf-t--color--blue--60);
+ --pf-t--global--color--brand--400: var(--pf-t--color--blue--70);
+ --pf-t--global--color--brand--500: var(--pf-t--color--blue--80);
+ --pf-t--global--color--disabled--100: var(--pf-t--color--gray--30);
+ --pf-t--global--color--disabled--200: var(--pf-t--color--gray--40);
+ --pf-t--global--color--disabled--300: var(--pf-t--color--gray--60);
+ --pf-t--global--color--favorite--100: var(--pf-t--color--yellow--30);
+ --pf-t--global--color--favorite--200: var(--pf-t--color--yellow--40);
+ --pf-t--global--color--favorite--300: var(--pf-t--color--yellow--70);
+ --pf-t--global--color--favorite--400: var(--pf-t--color--yellow--80);
+ --pf-t--global--color--nonstatus--blue--100: var(--pf-t--color--blue--20);
+ --pf-t--global--color--nonstatus--blue--200: var(--pf-t--color--blue--30);
+ --pf-t--global--color--nonstatus--blue--300: var(--pf-t--color--blue--40);
+ --pf-t--global--color--nonstatus--blue--400: var(--pf-t--color--blue--60);
+ --pf-t--global--color--nonstatus--blue--500: var(--pf-t--color--blue--70);
+ --pf-t--global--color--nonstatus--gray--100: var(--pf-t--color--gray--20);
+ --pf-t--global--color--nonstatus--gray--200: var(--pf-t--color--gray--30);
+ --pf-t--global--color--nonstatus--gray--300: var(--pf-t--color--gray--40);
+ --pf-t--global--color--nonstatus--gray--400: var(--pf-t--color--gray--60);
+ --pf-t--global--color--nonstatus--gray--50: var(--pf-t--color--gray--10);
+ --pf-t--global--color--nonstatus--gray--500: var(--pf-t--color--gray--70);
+ --pf-t--global--color--nonstatus--green--100: var(--pf-t--color--green--20);
+ --pf-t--global--color--nonstatus--green--200: var(--pf-t--color--green--30);
+ --pf-t--global--color--nonstatus--green--300: var(--pf-t--color--green--40);
+ --pf-t--global--color--nonstatus--green--500: var(--pf-t--color--green--70);
+ --pf-t--global--color--nonstatus--orange--100: var(--pf-t--color--orange--20);
+ --pf-t--global--color--nonstatus--orange--200: var(--pf-t--color--orange--30);
+ --pf-t--global--color--nonstatus--orange--300: var(--pf-t--color--orange--40);
+ --pf-t--global--color--nonstatus--orange--400: var(--pf-t--color--orange--60);
+ --pf-t--global--color--nonstatus--orange--500: var(--pf-t--color--orange--70);
+ --pf-t--global--color--nonstatus--orangered--100: var(--pf-t--color--red-orange--20);
+ --pf-t--global--color--nonstatus--orangered--200: var(--pf-t--color--red-orange--30);
+ --pf-t--global--color--nonstatus--orangered--300: var(--pf-t--color--red-orange--40);
+ --pf-t--global--color--nonstatus--orangered--400: var(--pf-t--color--red-orange--60);
+ --pf-t--global--color--nonstatus--orangered--500: var(--pf-t--color--red-orange--70);
+ --pf-t--global--color--nonstatus--purple--100: var(--pf-t--color--purple--20);
+ --pf-t--global--color--nonstatus--purple--200: var(--pf-t--color--purple--30);
+ --pf-t--global--color--nonstatus--purple--300: var(--pf-t--color--purple--40);
+ --pf-t--global--color--nonstatus--purple--400: var(--pf-t--color--purple--50);
+ --pf-t--global--color--nonstatus--purple--500: var(--pf-t--color--purple--60);
+ --pf-t--global--color--nonstatus--red--100: var(--pf-t--color--red--20);
+ --pf-t--global--color--nonstatus--red--200: var(--pf-t--color--red--30);
+ --pf-t--global--color--nonstatus--red--300: var(--pf-t--color--red--40);
+ --pf-t--global--color--nonstatus--red--400: var(--pf-t--color--red--60);
+ --pf-t--global--color--nonstatus--red--500: var(--pf-t--color--red--70);
+ --pf-t--global--color--nonstatus--teal--100: var(--pf-t--color--teal--20);
+ --pf-t--global--color--nonstatus--teal--200: var(--pf-t--color--teal--30);
+ --pf-t--global--color--nonstatus--teal--300: var(--pf-t--color--teal--40);
+ --pf-t--global--color--nonstatus--teal--400: var(--pf-t--color--teal--70);
+ --pf-t--global--color--nonstatus--teal--500: var(--pf-t--color--teal--80);
+ --pf-t--global--color--nonstatus--yellow--100: var(--pf-t--color--yellow--20);
+ --pf-t--global--color--nonstatus--yellow--200: var(--pf-t--color--yellow--30);
+ --pf-t--global--color--nonstatus--yellow--300: var(--pf-t--color--yellow--40);
+ --pf-t--global--color--nonstatus--yellow--400: var(--pf-t--color--yellow--70);
+ --pf-t--global--color--nonstatus--yellow--500: var(--pf-t--color--yellow--80);
+ --pf-t--global--color--severity--critical--100: var(--pf-t--color--red-orange--60);
+ --pf-t--global--color--severity--important--100: var(--pf-t--color--orange--50);
+ --pf-t--global--color--severity--important--200: var(--pf-t--color--orange--60);
+ --pf-t--global--color--severity--minor--100: var(--pf-t--color--gray--50);
+ --pf-t--global--color--severity--minor--200: var(--pf-t--color--gray--80);
+ --pf-t--global--color--severity--moderate--100: var(--pf-t--color--yellow--40);
+ --pf-t--global--color--severity--moderate--200: var(--pf-t--color--yellow--70);
+ --pf-t--global--color--severity--none--100: var(--pf-t--color--blue--40);
+ --pf-t--global--color--severity--none--200: var(--pf-t--color--blue--60);
+ --pf-t--global--color--severity--undefined--100: var(--pf-t--color--gray--30);
+ --pf-t--global--color--severity--undefined--200: var(--pf-t--color--gray--60);
+ --pf-t--global--color--status--custom--100: var(--pf-t--color--teal--60);
+ --pf-t--global--color--status--custom--200: var(--pf-t--color--teal--70);
+ --pf-t--global--color--status--custom--300: var(--pf-t--color--teal--80);
+ --pf-t--global--color--status--danger--100: var(--pf-t--color--red-orange--60);
+ --pf-t--global--color--status--danger--200: var(--pf-t--color--red-orange--70);
+ --pf-t--global--color--status--info--100: var(--pf-t--color--purple--50);
+ --pf-t--global--color--status--info--200: var(--pf-t--color--purple--60);
+ --pf-t--global--color--status--info--300: var(--pf-t--color--purple--70);
+ --pf-t--global--color--status--success--100: var(--pf-t--color--green--60);
+ --pf-t--global--color--status--success--200: var(--pf-t--color--green--70);
+ --pf-t--global--color--status--warning--100: var(--pf-t--color--yellow--30);
+ --pf-t--global--color--status--warning--200: var(--pf-t--color--yellow--40);
+ --pf-t--global--color--status--warning--300: var(--pf-t--color--yellow--50);
+ --pf-t--global--color--status--warning--400: var(--pf-t--color--yellow--60);
+ --pf-t--global--color--status--warning--500: var(--pf-t--color--yellow--70);
+ --pf-t--global--color--status--warning--600: var(--pf-t--color--yellow--80);
+ --pf-t--global--font--family--body: var(--pf-t--global--font--family--100);
+ --pf-t--global--font--family--heading: var(--pf-t--global--font--family--200);
+ --pf-t--global--font--family--mono: var(--pf-t--global--font--family--300);
+ --pf-t--global--font--line-height--body: var(--pf-t--global--font--line-height--200);
+ --pf-t--global--font--line-height--heading: var(--pf-t--global--font--line-height--100);
+ --pf-t--global--font--size--2xl: var(--pf-t--global--font--size--600);
+ --pf-t--global--font--size--3xl: var(--pf-t--global--font--size--700);
+ --pf-t--global--font--size--4xl: var(--pf-t--global--font--size--800);
+ --pf-t--global--font--size--lg: var(--pf-t--global--font--size--400);
+ --pf-t--global--font--size--md: var(--pf-t--global--font--size--300);
+ --pf-t--global--font--size--sm: var(--pf-t--global--font--size--200);
+ --pf-t--global--font--size--xl: var(--pf-t--global--font--size--500);
+ --pf-t--global--font--size--xs: var(--pf-t--global--font--size--100);
+ --pf-t--global--font--weight--body--bold: var(--pf-t--global--font--weight--200);
+ --pf-t--global--font--weight--body--default: var(--pf-t--global--font--weight--100);
+ --pf-t--global--font--weight--heading--bold: var(--pf-t--global--font--weight--400);
+ --pf-t--global--font--weight--heading--default: var(--pf-t--global--font--weight--300);
+ --pf-t--global--icon--color--100: var(--pf-t--color--gray--90);
+ --pf-t--global--icon--color--150: var(--pf-t--color--gray--60);
+ --pf-t--global--icon--color--200: var(--pf-t--color--gray--50);
+ --pf-t--global--icon--color--300: var(--pf-t--color--white);
+ --pf-t--global--icon--size--2xl: var(--pf-t--global--icon--size--400);
+ --pf-t--global--icon--size--3xl: var(--pf-t--global--icon--size--500);
+ --pf-t--global--icon--size--lg: var(--pf-t--global--icon--size--250);
+ --pf-t--global--icon--size--md: var(--pf-t--global--icon--size--200);
+ --pf-t--global--icon--size--sm: var(--pf-t--global--icon--size--100);
+ --pf-t--global--icon--size--xl: var(--pf-t--global--icon--size--300);
+ --pf-t--global--motion--delay--default: var(--pf-t--global--delay--300);
+ --pf-t--global--motion--delay--long: var(--pf-t--global--delay--400);
+ --pf-t--global--motion--delay--none: var(--pf-t--global--delay--100);
+ --pf-t--global--motion--delay--short: var(--pf-t--global--delay--200);
+ --pf-t--global--motion--duration--2xl: var(--pf-t--global--duration--500);
+ --pf-t--global--motion--duration--3xl: var(--pf-t--global--duration--600);
+ --pf-t--global--motion--duration--lg: var(--pf-t--global--duration--300);
+ --pf-t--global--motion--duration--md: var(--pf-t--global--duration--200);
+ --pf-t--global--motion--duration--sm: var(--pf-t--global--duration--100);
+ --pf-t--global--motion--duration--xl: var(--pf-t--global--duration--400);
+ --pf-t--global--motion--duration--xs: var(--pf-t--global--duration--50);
+ --pf-t--global--motion--timing-function--accelerate: var(--pf-t--global--timing-function--100);
+ --pf-t--global--motion--timing-function--decelerate: var(--pf-t--global--timing-function--300);
+ --pf-t--global--motion--timing-function--default: var(--pf-t--global--timing-function--200);
+ --pf-t--global--spacer--2xl: var(--pf-t--global--spacer--600);
+ --pf-t--global--spacer--3xl: var(--pf-t--global--spacer--700);
+ --pf-t--global--spacer--4xl: var(--pf-t--global--spacer--800);
+ --pf-t--global--spacer--lg: var(--pf-t--global--spacer--400);
+ --pf-t--global--spacer--md: var(--pf-t--global--spacer--300);
+ --pf-t--global--spacer--sm: var(--pf-t--global--spacer--200);
+ --pf-t--global--spacer--xl: var(--pf-t--global--spacer--500);
+ --pf-t--global--spacer--xs: var(--pf-t--global--spacer--100);
+ --pf-t--global--text--color--100: var(--pf-t--color--gray--95);
+ --pf-t--global--text--color--200: var(--pf-t--color--gray--60);
+ --pf-t--global--text--color--250: var(--pf-t--color--gray--70);
+ --pf-t--global--text--color--300: var(--pf-t--color--white);
+ --pf-t--global--text--color--400: var(--pf-t--color--red-orange--40);
+ --pf-t--global--text--color--500: var(--pf-t--color--red-orange--70);
+ --pf-t--global--text--color--link--100: var(--pf-t--color--blue--50);
+ --pf-t--global--text--color--link--200: var(--pf-t--color--blue--60);
+ --pf-t--global--text--color--link--250: var(--pf-t--color--blue--70);
+ --pf-t--global--text--color--link--300: var(--pf-t--color--purple--50);
+ --pf-t--global--text--color--link--350: var(--pf-t--color--purple--60);
+ --pf-t--global--text-decoration--editable-text--line--default: var(--pf-t--global--text-decoration--line--200);
+ --pf-t--global--text-decoration--editable-text--line--hover: var(--pf-t--global--text-decoration--line--200);
+ --pf-t--global--text-decoration--editable-text--style--default: var(--pf-t--global--text-decoration--style--200);
+ --pf-t--global--text-decoration--editable-text--style--hover: var(--pf-t--global--text-decoration--style--200);
+ --pf-t--global--text-decoration--help-text--line--default: var(--pf-t--global--text-decoration--line--200);
+ --pf-t--global--text-decoration--help-text--line--hover: var(--pf-t--global--text-decoration--line--200);
+ --pf-t--global--text-decoration--help-text--style--default: var(--pf-t--global--text-decoration--style--200);
+ --pf-t--global--text-decoration--help-text--style--hover: var(--pf-t--global--text-decoration--style--200);
+ --pf-t--global--text-decoration--link--line--default: var(--pf-t--global--text-decoration--line--200);
+ --pf-t--global--text-decoration--link--line--hover: var(--pf-t--global--text-decoration--line--200);
+ --pf-t--global--text-decoration--link--style--default: var(--pf-t--global--text-decoration--style--100);
+ --pf-t--global--text-decoration--link--style--hover: var(--pf-t--global--text-decoration--style--100);
+ --pf-t--global--z-index--2xl: var(--pf-t--global--z-index--600);
+ --pf-t--global--z-index--lg: var(--pf-t--global--z-index--400);
+ --pf-t--global--z-index--md: var(--pf-t--global--z-index--300);
+ --pf-t--global--z-index--sm: var(--pf-t--global--z-index--200);
+ --pf-t--global--z-index--xl: var(--pf-t--global--z-index--500);
+ --pf-t--global--z-index--xs: var(--pf-t--global--z-index--100);
+ --pf-t--global--background--color--action--plain--alt--clicked: var(--pf-t--global--background--color--100);
+ --pf-t--global--background--color--action--plain--alt--hover: var(--pf-t--global--background--color--100);
+ --pf-t--global--background--color--control--read-only: var(--pf-t--global--background--color--200);
+ --pf-t--global--background--color--disabled--default: var(--pf-t--global--color--disabled--100);
+ --pf-t--global--background--color--floating--clicked: var(--pf-t--global--background--color--200);
+ --pf-t--global--background--color--floating--default: var(--pf-t--global--background--color--100);
+ --pf-t--global--background--color--floating--hover: var(--pf-t--global--background--color--200);
+ --pf-t--global--background--color--highlight--clicked: var(--pf-t--global--background--color--highlight--200);
+ --pf-t--global--background--color--highlight--default: var(--pf-t--global--background--color--highlight--100);
+ --pf-t--global--background--color--inverse--clicked: var(--pf-t--global--background--color--450);
+ --pf-t--global--background--color--inverse--default: var(--pf-t--global--background--color--400);
+ --pf-t--global--background--color--inverse--hover: var(--pf-t--global--background--color--450);
+ --pf-t--global--background--color--primary--clicked: var(--pf-t--global--background--color--200);
+ --pf-t--global--background--color--primary--default: var(--pf-t--global--background--color--100);
+ --pf-t--global--background--color--primary--hover: var(--pf-t--global--background--color--200);
+ --pf-t--global--background--color--secondary--clicked: var(--pf-t--global--background--color--300);
+ --pf-t--global--background--color--secondary--default: var(--pf-t--global--background--color--200);
+ --pf-t--global--background--color--secondary--hover: var(--pf-t--global--background--color--300);
+ --pf-t--global--border--color--clicked: var(--pf-t--global--color--brand--200);
+ --pf-t--global--border--color--control--read-only: var(--pf-t--global--border--color--50);
+ --pf-t--global--border--color--default: var(--pf-t--global--border--color--100);
+ --pf-t--global--border--color--disabled: var(--pf-t--global--color--disabled--200);
+ --pf-t--global--border--color--hover: var(--pf-t--global--color--brand--100);
+ --pf-t--global--border--color--nonstatus--blue--clicked: var(--pf-t--global--color--nonstatus--blue--300);
+ --pf-t--global--border--color--nonstatus--blue--default: var(--pf-t--global--color--nonstatus--blue--200);
+ --pf-t--global--border--color--nonstatus--blue--hover: var(--pf-t--global--color--nonstatus--blue--300);
+ --pf-t--global--border--color--nonstatus--gray--clicked: var(--pf-t--global--color--nonstatus--gray--300);
+ --pf-t--global--border--color--nonstatus--gray--default: var(--pf-t--global--color--nonstatus--gray--200);
+ --pf-t--global--border--color--nonstatus--gray--hover: var(--pf-t--global--color--nonstatus--gray--300);
+ --pf-t--global--border--color--nonstatus--green--clicked: var(--pf-t--global--color--nonstatus--green--300);
+ --pf-t--global--border--color--nonstatus--green--default: var(--pf-t--global--color--nonstatus--green--200);
+ --pf-t--global--border--color--nonstatus--green--hover: var(--pf-t--global--color--nonstatus--green--300);
+ --pf-t--global--border--color--nonstatus--orange--clicked: var(--pf-t--global--color--nonstatus--orange--300);
+ --pf-t--global--border--color--nonstatus--orange--default: var(--pf-t--global--color--nonstatus--orange--200);
+ --pf-t--global--border--color--nonstatus--orange--hover: var(--pf-t--global--color--nonstatus--orange--300);
+ --pf-t--global--border--color--nonstatus--orangered--clicked: var(--pf-t--global--color--nonstatus--orangered--300);
+ --pf-t--global--border--color--nonstatus--orangered--default: var(--pf-t--global--color--nonstatus--orangered--200);
+ --pf-t--global--border--color--nonstatus--orangered--hover: var(--pf-t--global--color--nonstatus--orangered--300);
+ --pf-t--global--border--color--nonstatus--purple--clicked: var(--pf-t--global--color--nonstatus--purple--300);
+ --pf-t--global--border--color--nonstatus--purple--default: var(--pf-t--global--color--nonstatus--purple--200);
+ --pf-t--global--border--color--nonstatus--purple--hover: var(--pf-t--global--color--nonstatus--purple--300);
+ --pf-t--global--border--color--nonstatus--red--clicked: var(--pf-t--global--color--nonstatus--red--300);
+ --pf-t--global--border--color--nonstatus--red--default: var(--pf-t--global--color--nonstatus--red--200);
+ --pf-t--global--border--color--nonstatus--red--hover: var(--pf-t--global--color--nonstatus--red--300);
+ --pf-t--global--border--color--nonstatus--teal--clicked: var(--pf-t--global--color--nonstatus--teal--300);
+ --pf-t--global--border--color--nonstatus--teal--default: var(--pf-t--global--color--nonstatus--teal--200);
+ --pf-t--global--border--color--nonstatus--teal--hover: var(--pf-t--global--color--nonstatus--teal--300);
+ --pf-t--global--border--color--nonstatus--yellow--clicked: var(--pf-t--global--color--nonstatus--yellow--300);
+ --pf-t--global--border--color--nonstatus--yellow--default: var(--pf-t--global--color--nonstatus--yellow--200);
+ --pf-t--global--border--color--nonstatus--yellow--hover: var(--pf-t--global--color--nonstatus--yellow--300);
+ --pf-t--global--border--color--on-secondary: var(--pf-t--global--border--color--300);
+ --pf-t--global--border--color--status--warning--clicked: var(--pf-t--global--color--status--warning--300);
+ --pf-t--global--border--color--status--warning--default: var(--pf-t--global--color--status--warning--200);
+ --pf-t--global--border--color--status--warning--hover: var(--pf-t--global--color--status--warning--300);
+ --pf-t--global--color--brand--clicked: var(--pf-t--global--color--brand--300);
+ --pf-t--global--color--brand--default: var(--pf-t--global--color--brand--200);
+ --pf-t--global--color--brand--hover: var(--pf-t--global--color--brand--300);
+ --pf-t--global--color--favorite--clicked: var(--pf-t--global--color--favorite--200);
+ --pf-t--global--color--favorite--default: var(--pf-t--global--color--favorite--100);
+ --pf-t--global--color--favorite--hover: var(--pf-t--global--color--favorite--200);
+ --pf-t--global--color--nonstatus--blue--clicked: var(--pf-t--global--color--nonstatus--blue--200);
+ --pf-t--global--color--nonstatus--blue--default: var(--pf-t--global--color--nonstatus--blue--100);
+ --pf-t--global--color--nonstatus--blue--hover: var(--pf-t--global--color--nonstatus--blue--200);
+ --pf-t--global--color--nonstatus--gray--clicked: var(--pf-t--global--color--nonstatus--gray--200);
+ --pf-t--global--color--nonstatus--gray--default: var(--pf-t--global--color--nonstatus--gray--100);
+ --pf-t--global--color--nonstatus--gray--hover: var(--pf-t--global--color--nonstatus--gray--200);
+ --pf-t--global--color--nonstatus--green--clicked: var(--pf-t--global--color--nonstatus--green--200);
+ --pf-t--global--color--nonstatus--green--default: var(--pf-t--global--color--nonstatus--green--100);
+ --pf-t--global--color--nonstatus--green--hover: var(--pf-t--global--color--nonstatus--green--200);
+ --pf-t--global--color--nonstatus--orange--clicked: var(--pf-t--global--color--nonstatus--orange--200);
+ --pf-t--global--color--nonstatus--orange--default: var(--pf-t--global--color--nonstatus--orange--100);
+ --pf-t--global--color--nonstatus--orange--hover: var(--pf-t--global--color--nonstatus--orange--200);
+ --pf-t--global--color--nonstatus--orangered--clicked: var(--pf-t--global--color--nonstatus--orangered--200);
+ --pf-t--global--color--nonstatus--orangered--default: var(--pf-t--global--color--nonstatus--orangered--100);
+ --pf-t--global--color--nonstatus--orangered--hover: var(--pf-t--global--color--nonstatus--orangered--200);
+ --pf-t--global--color--nonstatus--purple--clicked: var(--pf-t--global--color--nonstatus--purple--200);
+ --pf-t--global--color--nonstatus--purple--default: var(--pf-t--global--color--nonstatus--purple--100);
+ --pf-t--global--color--nonstatus--purple--hover: var(--pf-t--global--color--nonstatus--purple--200);
+ --pf-t--global--color--nonstatus--red--clicked: var(--pf-t--global--color--nonstatus--red--200);
+ --pf-t--global--color--nonstatus--red--default: var(--pf-t--global--color--nonstatus--red--100);
+ --pf-t--global--color--nonstatus--red--hover: var(--pf-t--global--color--nonstatus--red--200);
+ --pf-t--global--color--nonstatus--teal--clicked: var(--pf-t--global--color--nonstatus--teal--200);
+ --pf-t--global--color--nonstatus--teal--default: var(--pf-t--global--color--nonstatus--teal--100);
+ --pf-t--global--color--nonstatus--teal--hover: var(--pf-t--global--color--nonstatus--teal--200);
+ --pf-t--global--color--nonstatus--yellow--clicked: var(--pf-t--global--color--nonstatus--yellow--200);
+ --pf-t--global--color--nonstatus--yellow--default: var(--pf-t--global--color--nonstatus--yellow--100);
+ --pf-t--global--color--nonstatus--yellow--hover: var(--pf-t--global--color--nonstatus--yellow--200);
+ --pf-t--global--color--status--custom--clicked: var(--pf-t--global--color--status--custom--200);
+ --pf-t--global--color--status--custom--default: var(--pf-t--global--color--status--custom--100);
+ --pf-t--global--color--status--custom--hover: var(--pf-t--global--color--status--custom--200);
+ --pf-t--global--color--status--danger--clicked: var(--pf-t--global--color--status--danger--200);
+ --pf-t--global--color--status--danger--default: var(--pf-t--global--color--status--danger--100);
+ --pf-t--global--color--status--danger--hover: var(--pf-t--global--color--status--danger--200);
+ --pf-t--global--color--status--info--clicked: var(--pf-t--global--color--status--info--200);
+ --pf-t--global--color--status--info--default: var(--pf-t--global--color--status--info--100);
+ --pf-t--global--color--status--info--hover: var(--pf-t--global--color--status--info--200);
+ --pf-t--global--color--status--success--clicked: var(--pf-t--global--color--status--success--200);
+ --pf-t--global--color--status--success--default: var(--pf-t--global--color--status--success--100);
+ --pf-t--global--color--status--success--hover: var(--pf-t--global--color--status--success--200);
+ --pf-t--global--color--status--warning--clicked: var(--pf-t--global--color--status--warning--200);
+ --pf-t--global--color--status--warning--default: var(--pf-t--global--color--status--warning--100);
+ --pf-t--global--color--status--warning--hover: var(--pf-t--global--color--status--warning--200);
+ --pf-t--global--font--size--body--default: var(--pf-t--global--font--size--sm);
+ --pf-t--global--font--size--body--lg: var(--pf-t--global--font--size--md);
+ --pf-t--global--font--size--body--sm: var(--pf-t--global--font--size--xs);
+ --pf-t--global--font--size--heading--h1: var(--pf-t--global--font--size--2xl);
+ --pf-t--global--font--size--heading--h2: var(--pf-t--global--font--size--xl);
+ --pf-t--global--font--size--heading--h3: var(--pf-t--global--font--size--lg);
+ --pf-t--global--font--size--heading--h4: var(--pf-t--global--font--size--md);
+ --pf-t--global--font--size--heading--h5: var(--pf-t--global--font--size--md);
+ --pf-t--global--font--size--heading--h6: var(--pf-t--global--font--size--md);
+ --pf-t--global--icon--color--disabled: var(--pf-t--global--color--disabled--200);
+ --pf-t--global--icon--color--inverse: var(--pf-t--global--icon--color--300);
+ --pf-t--global--icon--color--on-disabled: var(--pf-t--global--color--disabled--300);
+ --pf-t--global--icon--color--regular: var(--pf-t--global--icon--color--100);
+ --pf-t--global--icon--color--severity--critical--default: var(--pf-t--global--color--severity--critical--100);
+ --pf-t--global--icon--color--severity--important--default: var(--pf-t--global--color--severity--important--100);
+ --pf-t--global--icon--color--severity--minor--default: var(--pf-t--global--color--severity--minor--100);
+ --pf-t--global--icon--color--severity--moderate--default: var(--pf-t--global--color--severity--moderate--100);
+ --pf-t--global--icon--color--severity--none--default: var(--pf-t--global--color--severity--none--100);
+ --pf-t--global--icon--color--severity--undefined--default: var(--pf-t--global--color--severity--undefined--100);
+ --pf-t--global--icon--color--status--warning--clicked: var(--pf-t--global--color--status--warning--300);
+ --pf-t--global--icon--color--status--warning--default: var(--pf-t--global--color--status--warning--200);
+ --pf-t--global--icon--color--status--warning--hover: var(--pf-t--global--color--status--warning--300);
+ --pf-t--global--icon--color--subtle: var(--pf-t--global--icon--color--200);
+ --pf-t--global--icon--size--font--2xl: var(--pf-t--global--font--size--2xl);
+ --pf-t--global--icon--size--font--3xl: var(--pf-t--global--font--size--3xl);
+ --pf-t--global--icon--size--font--4xl: var(--pf-t--global--font--size--4xl);
+ --pf-t--global--icon--size--font--lg: var(--pf-t--global--font--size--lg);
+ --pf-t--global--icon--size--font--md: var(--pf-t--global--font--size--md);
+ --pf-t--global--icon--size--font--sm: var(--pf-t--global--font--size--sm);
+ --pf-t--global--icon--size--font--xl: var(--pf-t--global--font--size--xl);
+ --pf-t--global--icon--size--font--xs: var(--pf-t--global--font--size--xs);
+ --pf-t--global--motion--duration--fade--default: var(--pf-t--global--motion--duration--md);
+ --pf-t--global--motion--duration--fade--long: var(--pf-t--global--motion--duration--lg);
+ --pf-t--global--motion--duration--fade--short: var(--pf-t--global--motion--duration--sm);
+ --pf-t--global--motion--duration--icon--default: var(--pf-t--global--motion--duration--sm);
+ --pf-t--global--motion--duration--icon--long: var(--pf-t--global--motion--duration--md);
+ --pf-t--global--motion--duration--icon--short: var(--pf-t--global--motion--duration--xs);
+ --pf-t--global--motion--duration--slide-in--default: var(--pf-t--global--motion--duration--xl);
+ --pf-t--global--motion--duration--slide-in--long: var(--pf-t--global--motion--duration--2xl);
+ --pf-t--global--motion--duration--slide-in--short: var(--pf-t--global--motion--duration--lg);
+ --pf-t--global--motion--duration--slide-out--default: var(--pf-t--global--motion--duration--xl);
+ --pf-t--global--motion--duration--slide-out--long: var(--pf-t--global--motion--duration--2xl);
+ --pf-t--global--motion--duration--slide-out--short: var(--pf-t--global--motion--duration--lg);
+ --pf-t--global--spacer--action--horizontal--compact: var(--pf-t--global--spacer--md);
+ --pf-t--global--spacer--action--horizontal--default: var(--pf-t--global--spacer--lg);
+ --pf-t--global--spacer--action--horizontal--plain--compact: var(--pf-t--global--spacer--xs);
+ --pf-t--global--spacer--action--horizontal--plain--default: var(--pf-t--global--spacer--sm);
+ --pf-t--global--spacer--action--horizontal--spacious: var(--pf-t--global--spacer--xl);
+ --pf-t--global--spacer--control--horizontal--compact: var(--pf-t--global--spacer--sm);
+ --pf-t--global--spacer--control--horizontal--default: var(--pf-t--global--spacer--md);
+ --pf-t--global--spacer--control--horizontal--plain: var(--pf-t--global--spacer--sm);
+ --pf-t--global--spacer--control--horizontal--spacious: var(--pf-t--global--spacer--lg);
+ --pf-t--global--spacer--control--vertical--compact: var(--pf-t--global--spacer--xs);
+ --pf-t--global--spacer--control--vertical--default: var(--pf-t--global--spacer--sm);
+ --pf-t--global--spacer--control--vertical--plain: var(--pf-t--global--spacer--sm);
+ --pf-t--global--spacer--control--vertical--spacious: var(--pf-t--global--spacer--md);
+ --pf-t--global--spacer--gap--action-to-action--default: var(--pf-t--global--spacer--md);
+ --pf-t--global--spacer--gap--action-to-action--plain: var(--pf-t--global--spacer--xs);
+ --pf-t--global--spacer--gap--control-to-control--default: var(--pf-t--global--spacer--xs);
+ --pf-t--global--spacer--gap--group--horizontal: var(--pf-t--global--spacer--md);
+ --pf-t--global--spacer--gap--group--vertical: var(--pf-t--global--spacer--sm);
+ --pf-t--global--spacer--gap--group-to-group--horizontal--compact: var(--pf-t--global--spacer--sm);
+ --pf-t--global--spacer--gap--group-to-group--horizontal--default: var(--pf-t--global--spacer--2xl);
+ --pf-t--global--spacer--gap--group-to-group--vertical--compact: var(--pf-t--global--spacer--md);
+ --pf-t--global--spacer--gap--group-to-group--vertical--default: var(--pf-t--global--spacer--lg);
+ --pf-t--global--spacer--gap--text-to-element--compact: var(--pf-t--global--spacer--xs);
+ --pf-t--global--spacer--gap--text-to-element--default: var(--pf-t--global--spacer--sm);
+ --pf-t--global--spacer--gutter--default: var(--pf-t--global--spacer--md);
+ --pf-t--global--spacer--inset--page-chrome: var(--pf-t--global--spacer--lg);
+ --pf-t--global--text--color--disabled: var(--pf-t--global--color--disabled--200);
+ --pf-t--global--text--color--inverse: var(--pf-t--global--text--color--300);
+ --pf-t--global--text--color--link--default: var(--pf-t--global--text--color--link--100);
+ --pf-t--global--text--color--link--hover: var(--pf-t--global--text--color--link--200);
+ --pf-t--global--text--color--link--visited: var(--pf-t--global--text--color--link--300);
+ --pf-t--global--text--color--on-disabled: var(--pf-t--global--color--disabled--300);
+ --pf-t--global--text--color--on-highlight: var(--pf-t--global--text--color--100);
+ --pf-t--global--text--color--regular: var(--pf-t--global--text--color--100);
+ --pf-t--global--text--color--required: var(--pf-t--global--text--color--400);
+ --pf-t--global--text--color--status--warning--clicked: var(--pf-t--global--color--status--warning--300);
+ --pf-t--global--text--color--status--warning--default: var(--pf-t--global--color--status--warning--200);
+ --pf-t--global--text--color--status--warning--hover: var(--pf-t--global--color--status--warning--300);
+ --pf-t--global--text--color--subtle: var(--pf-t--global--text--color--200);
+ --pf-t--global--text-decoration--offset--default: var(--pf-t--global--spacer--xs);
+ --pf-t--global--text-decoration--width--default: var(--pf-t--global--border--width--regular);
+ --pf-t--global--background--color--control--default: var(--pf-t--global--background--color--primary--default);
+ --pf-t--global--border--color--alt: var(--pf-t--global--background--color--primary--default);
+ --pf-t--global--border--color--brand--clicked: var(--pf-t--global--color--brand--clicked);
+ --pf-t--global--border--color--brand--default: var(--pf-t--global--color--brand--default);
+ --pf-t--global--border--color--brand--hover: var(--pf-t--global--color--brand--hover);
+ --pf-t--global--border--color--status--custom--clicked: var(--pf-t--global--color--status--custom--clicked);
+ --pf-t--global--border--color--status--custom--default: var(--pf-t--global--color--status--custom--default);
+ --pf-t--global--border--color--status--custom--hover: var(--pf-t--global--color--status--custom--hover);
+ --pf-t--global--border--color--status--danger--clicked: var(--pf-t--global--color--status--danger--clicked);
+ --pf-t--global--border--color--status--danger--default: var(--pf-t--global--color--status--danger--default);
+ --pf-t--global--border--color--status--danger--hover: var(--pf-t--global--color--status--danger--hover);
+ --pf-t--global--border--color--status--info--clicked: var(--pf-t--global--color--status--info--clicked);
+ --pf-t--global--border--color--status--info--default: var(--pf-t--global--color--status--info--default);
+ --pf-t--global--border--color--status--info--hover: var(--pf-t--global--color--status--info--hover);
+ --pf-t--global--border--color--status--success--clicked: var(--pf-t--global--color--status--success--clicked);
+ --pf-t--global--border--color--status--success--default: var(--pf-t--global--color--status--success--default);
+ --pf-t--global--border--color--status--success--hover: var(--pf-t--global--color--status--success--hover);
+ --pf-t--global--color--status--read--on-primary: var(--pf-t--global--background--color--secondary--default);
+ --pf-t--global--color--status--unread--attention--clicked: var(--pf-t--global--color--status--danger--clicked);
+ --pf-t--global--color--status--unread--attention--default: var(--pf-t--global--color--status--danger--default);
+ --pf-t--global--color--status--unread--attention--hover: var(--pf-t--global--color--status--danger--hover);
+ --pf-t--global--color--status--unread--clicked: var(--pf-t--global--color--brand--clicked);
+ --pf-t--global--color--status--unread--default: var(--pf-t--global--color--brand--default);
+ --pf-t--global--color--status--unread--hover: var(--pf-t--global--color--brand--hover);
+ --pf-t--global--icon--color--brand--clicked: var(--pf-t--global--color--brand--clicked);
+ --pf-t--global--icon--color--brand--default: var(--pf-t--global--color--brand--default);
+ --pf-t--global--icon--color--brand--hover: var(--pf-t--global--color--brand--hover);
+ --pf-t--global--icon--color--favorite--clicked: var(--pf-t--global--color--favorite--clicked);
+ --pf-t--global--icon--color--favorite--default: var(--pf-t--global--color--favorite--default);
+ --pf-t--global--icon--color--favorite--hover: var(--pf-t--global--color--favorite--hover);
+ --pf-t--global--icon--color--nonstatus--on-blue--clicked: var(--pf-t--global--icon--color--regular);
+ --pf-t--global--icon--color--nonstatus--on-blue--default: var(--pf-t--global--icon--color--regular);
+ --pf-t--global--icon--color--nonstatus--on-blue--hover: var(--pf-t--global--icon--color--regular);
+ --pf-t--global--icon--color--nonstatus--on-gray--clicked: var(--pf-t--global--icon--color--regular);
+ --pf-t--global--icon--color--nonstatus--on-gray--default: var(--pf-t--global--icon--color--regular);
+ --pf-t--global--icon--color--nonstatus--on-gray--hover: var(--pf-t--global--icon--color--regular);
+ --pf-t--global--icon--color--nonstatus--on-green--clicked: var(--pf-t--global--icon--color--regular);
+ --pf-t--global--icon--color--nonstatus--on-green--default: var(--pf-t--global--icon--color--regular);
+ --pf-t--global--icon--color--nonstatus--on-green--hover: var(--pf-t--global--icon--color--regular);
+ --pf-t--global--icon--color--nonstatus--on-orange--clicked: var(--pf-t--global--icon--color--regular);
+ --pf-t--global--icon--color--nonstatus--on-orange--default: var(--pf-t--global--icon--color--regular);
+ --pf-t--global--icon--color--nonstatus--on-orange--hover: var(--pf-t--global--icon--color--regular);
+ --pf-t--global--icon--color--nonstatus--on-orangered--clicked: var(--pf-t--global--icon--color--regular);
+ --pf-t--global--icon--color--nonstatus--on-orangered--default: var(--pf-t--global--icon--color--regular);
+ --pf-t--global--icon--color--nonstatus--on-orangered--hover: var(--pf-t--global--icon--color--regular);
+ --pf-t--global--icon--color--nonstatus--on-purple--clicked: var(--pf-t--global--icon--color--regular);
+ --pf-t--global--icon--color--nonstatus--on-purple--default: var(--pf-t--global--icon--color--regular);
+ --pf-t--global--icon--color--nonstatus--on-purple--hover: var(--pf-t--global--icon--color--regular);
+ --pf-t--global--icon--color--nonstatus--on-red--clicked: var(--pf-t--global--icon--color--regular);
+ --pf-t--global--icon--color--nonstatus--on-red--default: var(--pf-t--global--icon--color--regular);
+ --pf-t--global--icon--color--nonstatus--on-red--hover: var(--pf-t--global--icon--color--regular);
+ --pf-t--global--icon--color--nonstatus--on-teal--clicked: var(--pf-t--global--icon--color--regular);
+ --pf-t--global--icon--color--nonstatus--on-teal--default: var(--pf-t--global--icon--color--regular);
+ --pf-t--global--icon--color--nonstatus--on-teal--hover: var(--pf-t--global--icon--color--regular);
+ --pf-t--global--icon--color--nonstatus--on-yellow--clicked: var(--pf-t--global--icon--color--regular);
+ --pf-t--global--icon--color--nonstatus--on-yellow--default: var(--pf-t--global--icon--color--regular);
+ --pf-t--global--icon--color--nonstatus--on-yellow--hover: var(--pf-t--global--icon--color--regular);
+ --pf-t--global--icon--color--on-brand--clicked: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--on-brand--default: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--on-brand--hover: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--custom--clicked: var(--pf-t--global--color--status--custom--clicked);
+ --pf-t--global--icon--color--status--custom--default: var(--pf-t--global--color--status--custom--default);
+ --pf-t--global--icon--color--status--custom--hover: var(--pf-t--global--color--status--custom--hover);
+ --pf-t--global--icon--color--status--danger--clicked: var(--pf-t--global--color--status--danger--clicked);
+ --pf-t--global--icon--color--status--danger--default: var(--pf-t--global--color--status--danger--default);
+ --pf-t--global--icon--color--status--danger--hover: var(--pf-t--global--color--status--danger--hover);
+ --pf-t--global--icon--color--status--info--clicked: var(--pf-t--global--color--status--info--clicked);
+ --pf-t--global--icon--color--status--info--default: var(--pf-t--global--color--status--info--default);
+ --pf-t--global--icon--color--status--info--hover: var(--pf-t--global--color--status--info--hover);
+ --pf-t--global--icon--color--status--on-custom--clicked: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--on-custom--default: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--on-custom--hover: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--on-danger--clicked: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--on-danger--default: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--on-danger--hover: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--on-info--clicked: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--on-info--default: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--on-info--hover: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--on-success--clicked: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--on-success--default: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--on-success--hover: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--on-warning--clicked: var(--pf-t--global--icon--color--regular);
+ --pf-t--global--icon--color--status--on-warning--default: var(--pf-t--global--icon--color--regular);
+ --pf-t--global--icon--color--status--on-warning--hover: var(--pf-t--global--icon--color--regular);
+ --pf-t--global--icon--color--status--success--clicked: var(--pf-t--global--color--status--success--clicked);
+ --pf-t--global--icon--color--status--success--default: var(--pf-t--global--color--status--success--default);
+ --pf-t--global--icon--color--status--success--hover: var(--pf-t--global--color--status--success--hover);
+ --pf-t--global--icon--color--status--unread--on-attention--clicked: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--unread--on-attention--default: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--unread--on-attention--hover: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--unread--on-default--clicked: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--unread--on-default--default: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--unread--on-default--hover: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--size--font--body--default: var(--pf-t--global--font--size--body--default);
+ --pf-t--global--icon--size--font--body--lg: var(--pf-t--global--font--size--body--lg);
+ --pf-t--global--icon--size--font--body--sm: var(--pf-t--global--font--size--body--sm);
+ --pf-t--global--icon--size--font--heading--h1: var(--pf-t--global--font--size--heading--h1);
+ --pf-t--global--icon--size--font--heading--h2: var(--pf-t--global--font--size--heading--h2);
+ --pf-t--global--icon--size--font--heading--h3: var(--pf-t--global--font--size--heading--h3);
+ --pf-t--global--icon--size--font--heading--h4: var(--pf-t--global--font--size--heading--h4);
+ --pf-t--global--icon--size--font--heading--h5: var(--pf-t--global--font--size--heading--h5);
+ --pf-t--global--icon--size--font--heading--h6: var(--pf-t--global--font--size--heading--h6);
+ --pf-t--global--text--color--brand--clicked: var(--pf-t--global--color--brand--clicked);
+ --pf-t--global--text--color--brand--default: var(--pf-t--global--color--brand--default);
+ --pf-t--global--text--color--brand--hover: var(--pf-t--global--color--brand--hover);
+ --pf-t--global--text--color--nonstatus--on-blue--clicked: var(--pf-t--global--text--color--regular);
+ --pf-t--global--text--color--nonstatus--on-blue--default: var(--pf-t--global--text--color--regular);
+ --pf-t--global--text--color--nonstatus--on-blue--hover: var(--pf-t--global--text--color--regular);
+ --pf-t--global--text--color--nonstatus--on-gray--clicked: var(--pf-t--global--text--color--regular);
+ --pf-t--global--text--color--nonstatus--on-gray--default: var(--pf-t--global--text--color--regular);
+ --pf-t--global--text--color--nonstatus--on-gray--hover: var(--pf-t--global--text--color--regular);
+ --pf-t--global--text--color--nonstatus--on-green--clicked: var(--pf-t--global--text--color--regular);
+ --pf-t--global--text--color--nonstatus--on-green--default: var(--pf-t--global--text--color--regular);
+ --pf-t--global--text--color--nonstatus--on-green--hover: var(--pf-t--global--text--color--regular);
+ --pf-t--global--text--color--nonstatus--on-orange--clicked: var(--pf-t--global--text--color--regular);
+ --pf-t--global--text--color--nonstatus--on-orange--default: var(--pf-t--global--text--color--regular);
+ --pf-t--global--text--color--nonstatus--on-orange--hover: var(--pf-t--global--text--color--regular);
+ --pf-t--global--text--color--nonstatus--on-orangered--clicked: var(--pf-t--global--text--color--regular);
+ --pf-t--global--text--color--nonstatus--on-orangered--default: var(--pf-t--global--text--color--regular);
+ --pf-t--global--text--color--nonstatus--on-orangered--hover: var(--pf-t--global--text--color--regular);
+ --pf-t--global--text--color--nonstatus--on-purple--clicked: var(--pf-t--global--text--color--regular);
+ --pf-t--global--text--color--nonstatus--on-purple--default: var(--pf-t--global--text--color--regular);
+ --pf-t--global--text--color--nonstatus--on-purple--hover: var(--pf-t--global--text--color--regular);
+ --pf-t--global--text--color--nonstatus--on-red--clicked: var(--pf-t--global--text--color--regular);
+ --pf-t--global--text--color--nonstatus--on-red--default: var(--pf-t--global--text--color--regular);
+ --pf-t--global--text--color--nonstatus--on-red--hover: var(--pf-t--global--text--color--regular);
+ --pf-t--global--text--color--nonstatus--on-teal--clicked: var(--pf-t--global--text--color--regular);
+ --pf-t--global--text--color--nonstatus--on-teal--default: var(--pf-t--global--text--color--regular);
+ --pf-t--global--text--color--nonstatus--on-teal--hover: var(--pf-t--global--text--color--regular);
+ --pf-t--global--text--color--nonstatus--on-yellow--clicked: var(--pf-t--global--text--color--regular);
+ --pf-t--global--text--color--nonstatus--on-yellow--default: var(--pf-t--global--text--color--regular);
+ --pf-t--global--text--color--nonstatus--on-yellow--hover: var(--pf-t--global--text--color--regular);
+ --pf-t--global--text--color--on-brand--clicked: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--on-brand--default: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--on-brand--hover: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--placeholder: var(--pf-t--global--text--color--subtle);
+ --pf-t--global--text--color--status--custom--clicked: var(--pf-t--global--color--status--custom--clicked);
+ --pf-t--global--text--color--status--custom--default: var(--pf-t--global--color--status--custom--default);
+ --pf-t--global--text--color--status--custom--hover: var(--pf-t--global--color--status--custom--hover);
+ --pf-t--global--text--color--status--danger--clicked: var(--pf-t--global--color--status--danger--clicked);
+ --pf-t--global--text--color--status--danger--default: var(--pf-t--global--color--status--danger--default);
+ --pf-t--global--text--color--status--danger--hover: var(--pf-t--global--color--status--danger--hover);
+ --pf-t--global--text--color--status--info--clicked: var(--pf-t--global--color--status--info--clicked);
+ --pf-t--global--text--color--status--info--default: var(--pf-t--global--color--status--info--default);
+ --pf-t--global--text--color--status--info--hover: var(--pf-t--global--color--status--info--hover);
+ --pf-t--global--text--color--status--on-custom--clicked: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--status--on-custom--default: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--status--on-custom--hover: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--status--on-danger--clicked: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--text--color--status--on-danger--default: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--status--on-danger--hover: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--status--on-info--clicked: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--status--on-info--default: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--status--on-info--hover: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--status--on-success--clicked: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--status--on-success--default: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--status--on-success--hover: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--status--on-warning--clicked: var(--pf-t--global--text--color--regular);
+ --pf-t--global--text--color--status--on-warning--default: var(--pf-t--global--text--color--regular);
+ --pf-t--global--text--color--status--on-warning--hover: var(--pf-t--global--text--color--regular);
+ --pf-t--global--text--color--status--success--clicked: var(--pf-t--global--color--status--success--clicked);
+ --pf-t--global--text--color--status--success--default: var(--pf-t--global--color--status--success--default);
+ --pf-t--global--text--color--status--success--hover: var(--pf-t--global--color--status--success--hover);
+ --pf-t--global--text--color--status--unread--on-attention--clicked: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--status--unread--on-attention--default: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--status--unread--on-attention--hover: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--status--unread--on-default--clicked: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--status--unread--on-default--default: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--status--unread--on-default--hover: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--color--status--read--on-secondary: var(--pf-t--global--background--color--control--default);
+ --pf-t--global--font--size--heading--xs: var(--pf-t--global--font--size--md);
+ --pf-t--global--font--size--heading--sm: var(--pf-t--global--font--size--lg);
+ --pf-t--global--font--size--heading--md: var(--pf-t--global--font--size--xl);
+ --pf-t--global--font--size--heading--lg: var(--pf-t--global--font--size--2xl);
+ --pf-t--global--font--size--heading--xl: var(--pf-t--global--font--size--3xl);
+ --pf-t--global--font--size--heading--2xl: var(--pf-t--global--font--size--4xl);
+ --pf-t--global--font--family--body--legacy: redhattext, helvetica, arial, sans-serif;
+ --pf-t--global--font--family--heading--legacy: redhatdisplay, helvetica, arial, sans-serif;
+ --pf-t--global--font--family--mono--legacy: redhatmono, liberationmono, consolas, sfmono-regular, menlo, monaco, courier new, monospace;
+ --pf-t--global--font--weight--body--legacy: 400;
+ --pf-t--global--font--weight--body--bold--legacy: 700;
+ --pf-t--global--font--weight--heading--legacy: 400;
+ --pf-t--global--font--weight--heading--bold--legacy: 700;
+ --pf-t--global--box-shadow--sm:
+ var(--pf-t--global--box-shadow--X--sm--default)
+ var(--pf-t--global--box-shadow--Y--sm--default)
+ var(--pf-t--global--box-shadow--blur--sm)
+ var(--pf-t--global--box-shadow--spread--sm--default)
+ var(--pf-t--global--box-shadow--color--sm--default);
+ --pf-t--global--box-shadow--sm--top:
+ var(--pf-t--global--box-shadow--X--sm--top)
+ var(--pf-t--global--box-shadow--Y--sm--top)
+ var(--pf-t--global--box-shadow--blur--sm)
+ var(--pf-t--global--box-shadow--spread--sm--directional)
+ var(--pf-t--global--box-shadow--color--sm--directional);
+ --pf-t--global--box-shadow--sm--bottom:
+ var(--pf-t--global--box-shadow--X--sm--bottom)
+ var(--pf-t--global--box-shadow--Y--sm--bottom)
+ var(--pf-t--global--box-shadow--blur--sm)
+ var(--pf-t--global--box-shadow--spread--sm--directional)
+ var(--pf-t--global--box-shadow--color--sm--directional);
+ --pf-t--global--box-shadow--sm--left:
+ var(--pf-t--global--box-shadow--X--sm--left)
+ var(--pf-t--global--box-shadow--Y--sm--left)
+ var(--pf-t--global--box-shadow--blur--sm)
+ var(--pf-t--global--box-shadow--spread--sm--directional)
+ var(--pf-t--global--box-shadow--color--sm--directional);
+ --pf-t--global--box-shadow--sm--right:
+ var(--pf-t--global--box-shadow--X--sm--right)
+ var(--pf-t--global--box-shadow--Y--sm--right)
+ var(--pf-t--global--box-shadow--blur--sm)
+ var(--pf-t--global--box-shadow--spread--sm--directional)
+ var(--pf-t--global--box-shadow--color--sm--directional);
+ --pf-t--global--box-shadow--md:
+ var(--pf-t--global--box-shadow--X--md--default)
+ var(--pf-t--global--box-shadow--Y--md--default)
+ var(--pf-t--global--box-shadow--blur--md)
+ var(--pf-t--global--box-shadow--spread--md--default)
+ var(--pf-t--global--box-shadow--color--md--default);
+ --pf-t--global--box-shadow--md--top:
+ var(--pf-t--global--box-shadow--X--md--top)
+ var(--pf-t--global--box-shadow--Y--md--top)
+ var(--pf-t--global--box-shadow--blur--md)
+ var(--pf-t--global--box-shadow--spread--md--directional)
+ var(--pf-t--global--box-shadow--color--md--directional);
+ --pf-t--global--box-shadow--md--bottom:
+ var(--pf-t--global--box-shadow--X--md--bottom)
+ var(--pf-t--global--box-shadow--Y--md--bottom)
+ var(--pf-t--global--box-shadow--blur--md)
+ var(--pf-t--global--box-shadow--spread--md--directional)
+ var(--pf-t--global--box-shadow--color--md--directional);
+ --pf-t--global--box-shadow--md--left:
+ var(--pf-t--global--box-shadow--X--md--left)
+ var(--pf-t--global--box-shadow--Y--md--left)
+ var(--pf-t--global--box-shadow--blur--md)
+ var(--pf-t--global--box-shadow--spread--md--directional)
+ var(--pf-t--global--box-shadow--color--md--directional);
+ --pf-t--global--box-shadow--md--right:
+ var(--pf-t--global--box-shadow--X--md--right)
+ var(--pf-t--global--box-shadow--Y--md--right)
+ var(--pf-t--global--box-shadow--blur--md)
+ var(--pf-t--global--box-shadow--spread--md--directional)
+ var(--pf-t--global--box-shadow--color--md--directional);
+ --pf-t--global--box-shadow--lg:
+ var(--pf-t--global--box-shadow--X--lg--default)
+ var(--pf-t--global--box-shadow--Y--lg--default)
+ var(--pf-t--global--box-shadow--blur--lg)
+ var(--pf-t--global--box-shadow--spread--lg--default)
+ var(--pf-t--global--box-shadow--color--lg--default);
+ --pf-t--global--box-shadow--lg--top:
+ var(--pf-t--global--box-shadow--X--lg--top)
+ var(--pf-t--global--box-shadow--Y--lg--top)
+ var(--pf-t--global--box-shadow--blur--lg)
+ var(--pf-t--global--box-shadow--spread--lg--directional)
+ var(--pf-t--global--box-shadow--color--lg--directional);
+ --pf-t--global--box-shadow--lg--bottom:
+ var(--pf-t--global--box-shadow--X--lg--bottom)
+ var(--pf-t--global--box-shadow--Y--lg--bottom)
+ var(--pf-t--global--box-shadow--blur--lg)
+ var(--pf-t--global--box-shadow--spread--lg--directional)
+ var(--pf-t--global--box-shadow--color--lg--directional);
+ --pf-t--global--box-shadow--lg--left:
+ var(--pf-t--global--box-shadow--X--lg--left)
+ var(--pf-t--global--box-shadow--Y--lg--left)
+ var(--pf-t--global--box-shadow--blur--lg)
+ var(--pf-t--global--box-shadow--spread--lg--directional)
+ var(--pf-t--global--box-shadow--color--lg--directional);
+ --pf-t--global--box-shadow--lg--right:
+ var(--pf-t--global--box-shadow--X--lg--right)
+ var(--pf-t--global--box-shadow--Y--lg--right)
+ var(--pf-t--global--box-shadow--blur--lg)
+ var(--pf-t--global--box-shadow--spread--lg--directional)
+ var(--pf-t--global--box-shadow--color--lg--directional);
+ --pf-t--global--list-style: disc outside;
+ --pf-t--temp--dev--tbd: #BC11E0;
+}
+
+:root:where(.pf-v6-theme-dark) {
+ --pf-t--global--background--color--action--plain--default: rgba(0, 0, 0, 0.0000);
+ --pf-t--global--border--color--high-contrast: rgba(255, 255, 255, 0.0000);
+ --pf-t--global--dark--background--color--500: rgba(21, 21, 21, 0.8000);
+ --pf-t--global--dark--background--color--600: rgba(199, 199, 199, 0.1500);
+ --pf-t--global--dark--box-shadow--color--100: rgba(0, 0, 0, 0.5000);
+ --pf-t--global--dark--box-shadow--color--200: rgba(0, 0, 0, 0.7000);
+ --pf-t--global--background--color--action--plain--clicked: var(--pf-t--global--dark--background--color--600);
+ --pf-t--global--background--color--action--plain--hover: var(--pf-t--global--dark--background--color--600);
+ --pf-t--global--background--color--backdrop--default: var(--pf-t--global--dark--background--color--500);
+ --pf-t--global--background--color--tertiary--default: var(--pf-t--global--dark--background--color--600);
+ --pf-t--global--box-shadow--color--lg--default: var(--pf-t--global--dark--box-shadow--color--100);
+ --pf-t--global--box-shadow--color--lg--directional: var(--pf-t--global--dark--box-shadow--color--200);
+ --pf-t--global--box-shadow--color--md--default: var(--pf-t--global--dark--box-shadow--color--100);
+ --pf-t--global--box-shadow--color--md--directional: var(--pf-t--global--dark--box-shadow--color--200);
+ --pf-t--global--box-shadow--color--sm--default: var(--pf-t--global--dark--box-shadow--color--100);
+ --pf-t--global--box-shadow--color--sm--directional: var(--pf-t--global--dark--box-shadow--color--200);
+ --pf-t--global--dark--background--color--100: var(--pf-t--color--gray--95);
+ --pf-t--global--dark--background--color--200: var(--pf-t--color--gray--80);
+ --pf-t--global--dark--background--color--300: var(--pf-t--color--gray--70);
+ --pf-t--global--dark--background--color--400: var(--pf-t--color--gray--10);
+ --pf-t--global--dark--background--color--450: var(--pf-t--color--gray--20);
+ --pf-t--global--dark--background--color--highlight--100: var(--pf-t--color--yellow--20);
+ --pf-t--global--dark--background--color--highlight--200: var(--pf-t--color--yellow--30);
+ --pf-t--global--dark--border--color--100: var(--pf-t--color--gray--50);
+ --pf-t--global--dark--border--color--200: var(--pf-t--color--gray--40);
+ --pf-t--global--dark--border--color--50: var(--pf-t--color--gray--60);
+ --pf-t--global--dark--color--brand--100: var(--pf-t--color--blue--30);
+ --pf-t--global--dark--color--brand--200: var(--pf-t--color--blue--20);
+ --pf-t--global--dark--color--brand--300: var(--pf-t--color--blue--10);
+ --pf-t--global--dark--color--disabled--100: var(--pf-t--color--gray--40);
+ --pf-t--global--dark--color--disabled--200: var(--pf-t--color--gray--50);
+ --pf-t--global--dark--color--disabled--300: var(--pf-t--color--gray--70);
+ --pf-t--global--dark--color--disabled--400: var(--pf-t--color--gray--90);
+ --pf-t--global--dark--color--favorite--100: var(--pf-t--color--yellow--30);
+ --pf-t--global--dark--color--favorite--200: var(--pf-t--color--yellow--20);
+ --pf-t--global--dark--color--nonstatus--blue--100: var(--pf-t--color--blue--30);
+ --pf-t--global--dark--color--nonstatus--blue--200: var(--pf-t--color--blue--20);
+ --pf-t--global--dark--color--nonstatus--blue--300: var(--pf-t--color--blue--10);
+ --pf-t--global--dark--color--nonstatus--gray--100: var(--pf-t--color--gray--60);
+ --pf-t--global--dark--color--nonstatus--gray--200: var(--pf-t--color--gray--50);
+ --pf-t--global--dark--color--nonstatus--gray--300: var(--pf-t--color--gray--40);
+ --pf-t--global--dark--color--nonstatus--gray--50: var(--pf-t--color--gray--70);
+ --pf-t--global--dark--color--nonstatus--green--100: var(--pf-t--color--green--30);
+ --pf-t--global--dark--color--nonstatus--green--200: var(--pf-t--color--green--20);
+ --pf-t--global--dark--color--nonstatus--green--300: var(--pf-t--color--green--10);
+ --pf-t--global--dark--color--nonstatus--orange--100: var(--pf-t--color--orange--30);
+ --pf-t--global--dark--color--nonstatus--orange--200: var(--pf-t--color--orange--20);
+ --pf-t--global--dark--color--nonstatus--orange--300: var(--pf-t--color--orange--10);
+ --pf-t--global--dark--color--nonstatus--orangered--100: var(--pf-t--color--red-orange--30);
+ --pf-t--global--dark--color--nonstatus--orangered--200: var(--pf-t--color--red-orange--20);
+ --pf-t--global--dark--color--nonstatus--orangered--300: var(--pf-t--color--red-orange--10);
+ --pf-t--global--dark--color--nonstatus--purple--100: var(--pf-t--color--purple--30);
+ --pf-t--global--dark--color--nonstatus--purple--200: var(--pf-t--color--purple--20);
+ --pf-t--global--dark--color--nonstatus--purple--300: var(--pf-t--color--purple--10);
+ --pf-t--global--dark--color--nonstatus--red--100: var(--pf-t--color--red--30);
+ --pf-t--global--dark--color--nonstatus--red--200: var(--pf-t--color--red--20);
+ --pf-t--global--dark--color--nonstatus--red--300: var(--pf-t--color--red--10);
+ --pf-t--global--dark--color--nonstatus--teal--100: var(--pf-t--color--teal--30);
+ --pf-t--global--dark--color--nonstatus--teal--200: var(--pf-t--color--teal--20);
+ --pf-t--global--dark--color--nonstatus--teal--300: var(--pf-t--color--teal--10);
+ --pf-t--global--dark--color--nonstatus--yellow--100: var(--pf-t--color--yellow--30);
+ --pf-t--global--dark--color--nonstatus--yellow--200: var(--pf-t--color--yellow--20);
+ --pf-t--global--dark--color--nonstatus--yellow--300: var(--pf-t--color--yellow--10);
+ --pf-t--global--dark--color--severity--critical--100: var(--pf-t--color--red-orange--50);
+ --pf-t--global--dark--color--severity--critical--200: var(--pf-t--color--red-orange--40);
+ --pf-t--global--dark--color--severity--important--100: var(--pf-t--color--orange--40);
+ --pf-t--global--dark--color--severity--minor--100: var(--pf-t--color--gray--30);
+ --pf-t--global--dark--color--severity--moderate--100: var(--pf-t--color--yellow--30);
+ --pf-t--global--dark--color--severity--none--100: var(--pf-t--color--blue--30);
+ --pf-t--global--dark--color--severity--undefined--100: var(--pf-t--color--gray--40);
+ --pf-t--global--dark--color--status--custom--100: var(--pf-t--color--teal--40);
+ --pf-t--global--dark--color--status--custom--200: var(--pf-t--color--teal--30);
+ --pf-t--global--dark--color--status--custom--300: var(--pf-t--color--teal--20);
+ --pf-t--global--dark--color--status--danger--100: var(--pf-t--color--red-orange--50);
+ --pf-t--global--dark--color--status--danger--200: var(--pf-t--color--red-orange--40);
+ --pf-t--global--dark--color--status--danger--250: var(--pf-t--color--red-orange--30);
+ --pf-t--global--dark--color--status--danger--300: var(--pf-t--color--red-orange--20);
+ --pf-t--global--dark--color--status--info--100: var(--pf-t--color--purple--30);
+ --pf-t--global--dark--color--status--info--200: var(--pf-t--color--purple--20);
+ --pf-t--global--dark--color--status--info--300: var(--pf-t--color--purple--10);
+ --pf-t--global--dark--color--status--success--100: var(--pf-t--color--green--40);
+ --pf-t--global--dark--color--status--success--200: var(--pf-t--color--green--30);
+ --pf-t--global--dark--color--status--success--300: var(--pf-t--color--green--20);
+ --pf-t--global--dark--color--status--warning--100: var(--pf-t--color--yellow--30);
+ --pf-t--global--dark--color--status--warning--200: var(--pf-t--color--yellow--20);
+ --pf-t--global--dark--icon--color--100: var(--pf-t--color--gray--10);
+ --pf-t--global--dark--icon--color--200: var(--pf-t--color--gray--40);
+ --pf-t--global--dark--icon--color--300: var(--pf-t--color--gray--90);
+ --pf-t--global--dark--text--color--100: var(--pf-t--color--white);
+ --pf-t--global--dark--text--color--200: var(--pf-t--color--gray--30);
+ --pf-t--global--dark--text--color--300: var(--pf-t--color--gray--90);
+ --pf-t--global--dark--text--color--400: var(--pf-t--color--red-orange--30);
+ --pf-t--global--dark--text--color--link--100: var(--pf-t--color--blue--20);
+ --pf-t--global--dark--text--color--link--200: var(--pf-t--color--blue--10);
+ --pf-t--global--dark--text--color--link--300: var(--pf-t--color--purple--30);
+ --pf-t--global--dark--text--color--link--400: var(--pf-t--color--purple--20);
+ --pf-t--global--background--color--action--plain--alt--clicked: var(--pf-t--global--dark--background--color--200);
+ --pf-t--global--background--color--action--plain--alt--hover: var(--pf-t--global--dark--background--color--200);
+ --pf-t--global--background--color--control--default: var(--pf-t--global--dark--background--color--300);
+ --pf-t--global--background--color--control--read-only: var(--pf-t--global--dark--background--color--300);
+ --pf-t--global--background--color--disabled--default: var(--pf-t--global--dark--color--disabled--100);
+ --pf-t--global--background--color--floating--clicked: var(--pf-t--global--dark--background--color--200);
+ --pf-t--global--background--color--floating--default: var(--pf-t--global--dark--background--color--300);
+ --pf-t--global--background--color--floating--hover: var(--pf-t--global--dark--background--color--200);
+ --pf-t--global--background--color--highlight--clicked: var(--pf-t--global--dark--background--color--highlight--200);
+ --pf-t--global--background--color--highlight--default: var(--pf-t--global--dark--background--color--highlight--100);
+ --pf-t--global--background--color--inverse--clicked: var(--pf-t--global--dark--background--color--450);
+ --pf-t--global--background--color--inverse--default: var(--pf-t--global--dark--background--color--400);
+ --pf-t--global--background--color--inverse--hover: var(--pf-t--global--dark--background--color--450);
+ --pf-t--global--background--color--primary--clicked: var(--pf-t--global--dark--background--color--300);
+ --pf-t--global--background--color--primary--default: var(--pf-t--global--dark--background--color--200);
+ --pf-t--global--background--color--primary--hover: var(--pf-t--global--dark--background--color--300);
+ --pf-t--global--background--color--secondary--clicked: var(--pf-t--global--dark--background--color--200);
+ --pf-t--global--background--color--secondary--default: var(--pf-t--global--dark--background--color--100);
+ --pf-t--global--background--color--secondary--hover: var(--pf-t--global--dark--background--color--200);
+ --pf-t--global--border--color--clicked: var(--pf-t--global--dark--color--brand--200);
+ --pf-t--global--border--color--control--read-only: var(--pf-t--global--dark--border--color--50);
+ --pf-t--global--border--color--default: var(--pf-t--global--dark--border--color--200);
+ --pf-t--global--border--color--disabled: var(--pf-t--global--dark--color--disabled--200);
+ --pf-t--global--border--color--hover: var(--pf-t--global--dark--color--brand--100);
+ --pf-t--global--border--color--nonstatus--blue--clicked: var(--pf-t--global--dark--color--nonstatus--blue--200);
+ --pf-t--global--border--color--nonstatus--blue--default: var(--pf-t--global--dark--color--nonstatus--blue--100);
+ --pf-t--global--border--color--nonstatus--blue--hover: var(--pf-t--global--dark--color--nonstatus--blue--200);
+ --pf-t--global--border--color--nonstatus--gray--clicked: var(--pf-t--global--dark--color--nonstatus--gray--300);
+ --pf-t--global--border--color--nonstatus--gray--default: var(--pf-t--global--dark--color--nonstatus--gray--200);
+ --pf-t--global--border--color--nonstatus--gray--hover: var(--pf-t--global--dark--color--nonstatus--gray--300);
+ --pf-t--global--border--color--nonstatus--green--clicked: var(--pf-t--global--dark--color--nonstatus--green--200);
+ --pf-t--global--border--color--nonstatus--green--default: var(--pf-t--global--dark--color--nonstatus--green--100);
+ --pf-t--global--border--color--nonstatus--green--hover: var(--pf-t--global--dark--color--nonstatus--green--200);
+ --pf-t--global--border--color--nonstatus--orange--clicked: var(--pf-t--global--dark--color--nonstatus--orange--200);
+ --pf-t--global--border--color--nonstatus--orange--default: var(--pf-t--global--dark--color--nonstatus--orange--100);
+ --pf-t--global--border--color--nonstatus--orange--hover: var(--pf-t--global--dark--color--nonstatus--orange--200);
+ --pf-t--global--border--color--nonstatus--orangered--clicked: var(--pf-t--global--dark--color--nonstatus--orangered--200);
+ --pf-t--global--border--color--nonstatus--orangered--default: var(--pf-t--global--dark--color--nonstatus--orangered--100);
+ --pf-t--global--border--color--nonstatus--orangered--hover: var(--pf-t--global--dark--color--nonstatus--orangered--200);
+ --pf-t--global--border--color--nonstatus--purple--clicked: var(--pf-t--global--dark--color--nonstatus--purple--200);
+ --pf-t--global--border--color--nonstatus--purple--default: var(--pf-t--global--dark--color--nonstatus--purple--100);
+ --pf-t--global--border--color--nonstatus--purple--hover: var(--pf-t--global--dark--color--nonstatus--purple--200);
+ --pf-t--global--border--color--nonstatus--red--clicked: var(--pf-t--global--dark--color--nonstatus--red--200);
+ --pf-t--global--border--color--nonstatus--red--default: var(--pf-t--global--dark--color--nonstatus--red--100);
+ --pf-t--global--border--color--nonstatus--red--hover: var(--pf-t--global--dark--color--nonstatus--red--200);
+ --pf-t--global--border--color--nonstatus--teal--clicked: var(--pf-t--global--dark--color--nonstatus--teal--200);
+ --pf-t--global--border--color--nonstatus--teal--default: var(--pf-t--global--dark--color--nonstatus--teal--100);
+ --pf-t--global--border--color--nonstatus--teal--hover: var(--pf-t--global--dark--color--nonstatus--teal--200);
+ --pf-t--global--border--color--nonstatus--yellow--clicked: var(--pf-t--global--dark--color--nonstatus--yellow--200);
+ --pf-t--global--border--color--nonstatus--yellow--default: var(--pf-t--global--dark--color--nonstatus--yellow--100);
+ --pf-t--global--border--color--nonstatus--yellow--hover: var(--pf-t--global--dark--color--nonstatus--yellow--200);
+ --pf-t--global--border--color--on-secondary: var(--pf-t--global--dark--border--color--200);
+ --pf-t--global--color--brand--clicked: var(--pf-t--global--dark--color--brand--200);
+ --pf-t--global--color--brand--default: var(--pf-t--global--dark--color--brand--100);
+ --pf-t--global--color--brand--hover: var(--pf-t--global--dark--color--brand--200);
+ --pf-t--global--color--favorite--clicked: var(--pf-t--global--dark--color--favorite--200);
+ --pf-t--global--color--favorite--default: var(--pf-t--global--dark--color--favorite--100);
+ --pf-t--global--color--favorite--hover: var(--pf-t--global--dark--color--favorite--200);
+ --pf-t--global--color--nonstatus--blue--clicked: var(--pf-t--global--dark--color--nonstatus--blue--200);
+ --pf-t--global--color--nonstatus--blue--default: var(--pf-t--global--dark--color--nonstatus--blue--100);
+ --pf-t--global--color--nonstatus--blue--hover: var(--pf-t--global--dark--color--nonstatus--blue--200);
+ --pf-t--global--color--nonstatus--gray--clicked: var(--pf-t--global--dark--color--nonstatus--gray--200);
+ --pf-t--global--color--nonstatus--gray--default: var(--pf-t--global--dark--color--nonstatus--gray--100);
+ --pf-t--global--color--nonstatus--gray--hover: var(--pf-t--global--dark--color--nonstatus--gray--200);
+ --pf-t--global--color--nonstatus--green--clicked: var(--pf-t--global--dark--color--nonstatus--green--200);
+ --pf-t--global--color--nonstatus--green--default: var(--pf-t--global--dark--color--nonstatus--green--100);
+ --pf-t--global--color--nonstatus--green--hover: var(--pf-t--global--dark--color--nonstatus--green--200);
+ --pf-t--global--color--nonstatus--orange--clicked: var(--pf-t--global--dark--color--nonstatus--orange--200);
+ --pf-t--global--color--nonstatus--orange--default: var(--pf-t--global--dark--color--nonstatus--orange--100);
+ --pf-t--global--color--nonstatus--orange--hover: var(--pf-t--global--dark--color--nonstatus--orange--200);
+ --pf-t--global--color--nonstatus--orangered--clicked: var(--pf-t--global--dark--color--nonstatus--orangered--200);
+ --pf-t--global--color--nonstatus--orangered--default: var(--pf-t--global--dark--color--nonstatus--orangered--100);
+ --pf-t--global--color--nonstatus--orangered--hover: var(--pf-t--global--dark--color--nonstatus--orangered--200);
+ --pf-t--global--color--nonstatus--purple--clicked: var(--pf-t--global--dark--color--nonstatus--purple--200);
+ --pf-t--global--color--nonstatus--purple--default: var(--pf-t--global--dark--color--nonstatus--purple--100);
+ --pf-t--global--color--nonstatus--purple--hover: var(--pf-t--global--dark--color--nonstatus--purple--200);
+ --pf-t--global--color--nonstatus--red--clicked: var(--pf-t--global--dark--color--nonstatus--red--200);
+ --pf-t--global--color--nonstatus--red--default: var(--pf-t--global--dark--color--nonstatus--red--100);
+ --pf-t--global--color--nonstatus--red--hover: var(--pf-t--global--dark--color--nonstatus--red--200);
+ --pf-t--global--color--nonstatus--teal--clicked: var(--pf-t--global--dark--color--nonstatus--teal--200);
+ --pf-t--global--color--nonstatus--teal--default: var(--pf-t--global--dark--color--nonstatus--teal--100);
+ --pf-t--global--color--nonstatus--teal--hover: var(--pf-t--global--dark--color--nonstatus--teal--200);
+ --pf-t--global--color--nonstatus--yellow--clicked: var(--pf-t--global--dark--color--nonstatus--yellow--200);
+ --pf-t--global--color--nonstatus--yellow--default: var(--pf-t--global--dark--color--nonstatus--yellow--100);
+ --pf-t--global--color--nonstatus--yellow--hover: var(--pf-t--global--dark--color--nonstatus--yellow--200);
+ --pf-t--global--color--status--custom--clicked: var(--pf-t--global--dark--color--status--custom--200);
+ --pf-t--global--color--status--custom--default: var(--pf-t--global--dark--color--status--custom--100);
+ --pf-t--global--color--status--custom--hover: var(--pf-t--global--dark--color--status--custom--200);
+ --pf-t--global--color--status--danger--clicked: var(--pf-t--global--dark--color--status--danger--200);
+ --pf-t--global--color--status--danger--default: var(--pf-t--global--dark--color--status--danger--100);
+ --pf-t--global--color--status--danger--hover: var(--pf-t--global--dark--color--status--danger--200);
+ --pf-t--global--color--status--info--clicked: var(--pf-t--global--dark--color--status--info--200);
+ --pf-t--global--color--status--info--default: var(--pf-t--global--dark--color--status--info--100);
+ --pf-t--global--color--status--info--hover: var(--pf-t--global--dark--color--status--info--200);
+ --pf-t--global--color--status--success--clicked: var(--pf-t--global--dark--color--status--success--200);
+ --pf-t--global--color--status--success--default: var(--pf-t--global--dark--color--status--success--100);
+ --pf-t--global--color--status--success--hover: var(--pf-t--global--dark--color--status--success--200);
+ --pf-t--global--color--status--warning--clicked: var(--pf-t--global--dark--color--status--warning--200);
+ --pf-t--global--color--status--warning--default: var(--pf-t--global--dark--color--status--warning--100);
+ --pf-t--global--color--status--warning--hover: var(--pf-t--global--dark--color--status--warning--200);
+ --pf-t--global--icon--color--brand--clicked: var(--pf-t--global--dark--color--brand--300);
+ --pf-t--global--icon--color--brand--default: var(--pf-t--global--dark--color--brand--200);
+ --pf-t--global--icon--color--brand--hover: var(--pf-t--global--dark--color--brand--300);
+ --pf-t--global--icon--color--disabled: var(--pf-t--global--dark--color--disabled--200);
+ --pf-t--global--icon--color--inverse: var(--pf-t--global--dark--icon--color--300);
+ --pf-t--global--icon--color--on-disabled: var(--pf-t--global--dark--color--disabled--300);
+ --pf-t--global--icon--color--regular: var(--pf-t--global--dark--icon--color--100);
+ --pf-t--global--icon--color--severity--critical--default: var(--pf-t--global--dark--color--severity--critical--100);
+ --pf-t--global--icon--color--severity--important--default: var(--pf-t--global--dark--color--severity--important--100);
+ --pf-t--global--icon--color--severity--minor--default: var(--pf-t--global--dark--color--severity--minor--100);
+ --pf-t--global--icon--color--severity--moderate--default: var(--pf-t--global--dark--color--severity--moderate--100);
+ --pf-t--global--icon--color--severity--none--default: var(--pf-t--global--dark--color--severity--none--100);
+ --pf-t--global--icon--color--severity--undefined--default: var(--pf-t--global--dark--color--severity--undefined--100);
+ --pf-t--global--icon--color--subtle: var(--pf-t--global--dark--icon--color--200);
+ --pf-t--global--text--color--brand--clicked: var(--pf-t--global--dark--color--brand--300);
+ --pf-t--global--text--color--brand--default: var(--pf-t--global--dark--color--brand--200);
+ --pf-t--global--text--color--brand--hover: var(--pf-t--global--dark--color--brand--300);
+ --pf-t--global--text--color--disabled: var(--pf-t--global--dark--color--disabled--200);
+ --pf-t--global--text--color--inverse: var(--pf-t--global--dark--text--color--300);
+ --pf-t--global--text--color--link--default: var(--pf-t--global--dark--text--color--link--100);
+ --pf-t--global--text--color--link--hover: var(--pf-t--global--dark--text--color--link--200);
+ --pf-t--global--text--color--link--visited: var(--pf-t--global--dark--text--color--link--300);
+ --pf-t--global--text--color--on-disabled: var(--pf-t--global--dark--color--disabled--300);
+ --pf-t--global--text--color--on-highlight: var(--pf-t--global--dark--text--color--300);
+ --pf-t--global--text--color--regular: var(--pf-t--global--dark--text--color--100);
+ --pf-t--global--text--color--required: var(--pf-t--global--dark--text--color--400);
+ --pf-t--global--text--color--status--danger--clicked: var(--pf-t--global--dark--color--status--danger--300);
+ --pf-t--global--text--color--status--danger--default: var(--pf-t--global--dark--color--status--danger--250);
+ --pf-t--global--text--color--status--danger--hover: var(--pf-t--global--dark--color--status--danger--300);
+ --pf-t--global--text--color--subtle: var(--pf-t--global--dark--text--color--200);
+ --pf-t--global--border--color--alt: var(--pf-t--global--background--color--primary--default);
+ --pf-t--global--border--color--brand--clicked: var(--pf-t--global--color--brand--clicked);
+ --pf-t--global--border--color--brand--default: var(--pf-t--global--color--brand--default);
+ --pf-t--global--border--color--brand--hover: var(--pf-t--global--color--brand--hover);
+ --pf-t--global--border--color--status--custom--clicked: var(--pf-t--global--color--status--custom--clicked);
+ --pf-t--global--border--color--status--custom--default: var(--pf-t--global--color--status--custom--default);
+ --pf-t--global--border--color--status--custom--hover: var(--pf-t--global--color--status--custom--hover);
+ --pf-t--global--border--color--status--danger--clicked: var(--pf-t--global--color--status--danger--clicked);
+ --pf-t--global--border--color--status--danger--default: var(--pf-t--global--color--status--danger--default);
+ --pf-t--global--border--color--status--danger--hover: var(--pf-t--global--color--status--danger--hover);
+ --pf-t--global--border--color--status--info--clicked: var(--pf-t--global--color--status--info--clicked);
+ --pf-t--global--border--color--status--info--default: var(--pf-t--global--color--status--info--default);
+ --pf-t--global--border--color--status--info--hover: var(--pf-t--global--color--status--info--hover);
+ --pf-t--global--border--color--status--success--clicked: var(--pf-t--global--color--status--success--clicked);
+ --pf-t--global--border--color--status--success--default: var(--pf-t--global--color--status--success--default);
+ --pf-t--global--border--color--status--success--hover: var(--pf-t--global--color--status--success--hover);
+ --pf-t--global--border--color--status--warning--clicked: var(--pf-t--global--color--status--warning--clicked);
+ --pf-t--global--border--color--status--warning--default: var(--pf-t--global--color--status--warning--default);
+ --pf-t--global--border--color--status--warning--hover: var(--pf-t--global--color--status--warning--hover);
+ --pf-t--global--color--status--read--on-primary: var(--pf-t--global--background--color--secondary--default);
+ --pf-t--global--color--status--read--on-secondary: var(--pf-t--global--background--color--control--default);
+ --pf-t--global--color--status--unread--attention--clicked: var(--pf-t--global--color--status--danger--clicked);
+ --pf-t--global--color--status--unread--attention--default: var(--pf-t--global--color--status--danger--default);
+ --pf-t--global--color--status--unread--attention--hover: var(--pf-t--global--color--status--danger--hover);
+ --pf-t--global--color--status--unread--clicked: var(--pf-t--global--color--brand--clicked);
+ --pf-t--global--color--status--unread--default: var(--pf-t--global--color--brand--default);
+ --pf-t--global--color--status--unread--hover: var(--pf-t--global--color--brand--hover);
+ --pf-t--global--icon--color--favorite--clicked: var(--pf-t--global--color--favorite--clicked);
+ --pf-t--global--icon--color--favorite--default: var(--pf-t--global--color--favorite--default);
+ --pf-t--global--icon--color--favorite--hover: var(--pf-t--global--color--favorite--hover);
+ --pf-t--global--icon--color--nonstatus--on-blue--clicked: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--nonstatus--on-blue--default: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--nonstatus--on-blue--hover: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--nonstatus--on-gray--clicked: var(--pf-t--global--icon--color--regular);
+ --pf-t--global--icon--color--nonstatus--on-gray--default: var(--pf-t--global--icon--color--regular);
+ --pf-t--global--icon--color--nonstatus--on-gray--hover: var(--pf-t--global--icon--color--regular);
+ --pf-t--global--icon--color--nonstatus--on-green--clicked: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--nonstatus--on-green--default: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--nonstatus--on-green--hover: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--nonstatus--on-orange--clicked: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--nonstatus--on-orange--default: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--nonstatus--on-orange--hover: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--nonstatus--on-orangered--clicked: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--nonstatus--on-orangered--default: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--nonstatus--on-orangered--hover: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--nonstatus--on-purple--clicked: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--nonstatus--on-purple--default: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--nonstatus--on-purple--hover: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--nonstatus--on-red--clicked: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--nonstatus--on-red--default: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--nonstatus--on-red--hover: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--nonstatus--on-teal--clicked: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--nonstatus--on-teal--default: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--nonstatus--on-teal--hover: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--nonstatus--on-yellow--clicked: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--nonstatus--on-yellow--default: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--nonstatus--on-yellow--hover: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--on-brand--clicked: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--on-brand--default: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--on-brand--hover: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--custom--clicked: var(--pf-t--global--color--status--custom--clicked);
+ --pf-t--global--icon--color--status--custom--default: var(--pf-t--global--color--status--custom--default);
+ --pf-t--global--icon--color--status--custom--hover: var(--pf-t--global--color--status--custom--hover);
+ --pf-t--global--icon--color--status--danger--clicked: var(--pf-t--global--color--status--danger--clicked);
+ --pf-t--global--icon--color--status--danger--default: var(--pf-t--global--color--status--danger--default);
+ --pf-t--global--icon--color--status--danger--hover: var(--pf-t--global--color--status--danger--hover);
+ --pf-t--global--icon--color--status--info--clicked: var(--pf-t--global--color--status--info--clicked);
+ --pf-t--global--icon--color--status--info--default: var(--pf-t--global--color--status--info--default);
+ --pf-t--global--icon--color--status--info--hover: var(--pf-t--global--color--status--info--hover);
+ --pf-t--global--icon--color--status--on-custom--clicked: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--on-custom--default: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--on-custom--hover: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--on-danger--clicked: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--on-danger--default: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--on-danger--hover: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--on-info--clicked: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--on-info--default: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--on-info--hover: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--on-success--clicked: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--on-success--default: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--on-success--hover: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--on-warning--clicked: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--on-warning--default: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--on-warning--hover: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--success--clicked: var(--pf-t--global--color--status--success--clicked);
+ --pf-t--global--icon--color--status--success--default: var(--pf-t--global--color--status--success--default);
+ --pf-t--global--icon--color--status--success--hover: var(--pf-t--global--color--status--success--hover);
+ --pf-t--global--icon--color--status--unread--on-attention--clicked: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--unread--on-attention--default: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--unread--on-attention--hover: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--unread--on-default--clicked: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--unread--on-default--default: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--unread--on-default--hover: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--warning--clicked: var(--pf-t--global--color--status--warning--clicked);
+ --pf-t--global--icon--color--status--warning--default: var(--pf-t--global--color--status--warning--default);
+ --pf-t--global--icon--color--status--warning--hover: var(--pf-t--global--color--status--warning--hover);
+ --pf-t--global--text--color--nonstatus--on-blue--clicked: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--nonstatus--on-blue--default: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--nonstatus--on-blue--hover: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--nonstatus--on-gray--clicked: var(--pf-t--global--text--color--regular);
+ --pf-t--global--text--color--nonstatus--on-gray--default: var(--pf-t--global--text--color--regular);
+ --pf-t--global--text--color--nonstatus--on-gray--hover: var(--pf-t--global--text--color--regular);
+ --pf-t--global--text--color--nonstatus--on-green--clicked: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--nonstatus--on-green--default: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--nonstatus--on-green--hover: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--nonstatus--on-orange--clicked: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--nonstatus--on-orange--default: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--nonstatus--on-orange--hover: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--nonstatus--on-orangered--clicked: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--nonstatus--on-orangered--default: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--nonstatus--on-orangered--hover: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--nonstatus--on-purple--clicked: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--nonstatus--on-purple--default: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--nonstatus--on-purple--hover: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--nonstatus--on-red--clicked: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--nonstatus--on-red--default: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--nonstatus--on-red--hover: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--nonstatus--on-teal--clicked: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--nonstatus--on-teal--default: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--nonstatus--on-teal--hover: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--nonstatus--on-yellow--clicked: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--nonstatus--on-yellow--default: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--nonstatus--on-yellow--hover: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--on-brand--clicked: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--on-brand--default: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--on-brand--hover: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--placeholder: var(--pf-t--global--text--color--subtle);
+ --pf-t--global--text--color--status--custom--clicked: var(--pf-t--global--color--status--custom--clicked);
+ --pf-t--global--text--color--status--custom--default: var(--pf-t--global--color--status--custom--default);
+ --pf-t--global--text--color--status--custom--hover: var(--pf-t--global--color--status--custom--hover);
+ --pf-t--global--text--color--status--info--clicked: var(--pf-t--global--color--status--info--clicked);
+ --pf-t--global--text--color--status--info--default: var(--pf-t--global--color--status--info--default);
+ --pf-t--global--text--color--status--info--hover: var(--pf-t--global--color--status--info--hover);
+ --pf-t--global--text--color--status--on-custom--clicked: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--status--on-custom--default: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--status--on-custom--hover: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--status--on-danger--clicked: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--status--on-danger--default: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--status--on-danger--hover: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--status--on-info--clicked: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--status--on-info--default: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--status--on-info--hover: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--status--on-success--clicked: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--status--on-success--default: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--status--on-success--hover: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--status--on-warning--clicked: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--status--on-warning--default: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--status--on-warning--hover: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--status--success--clicked: var(--pf-t--global--color--status--success--clicked);
+ --pf-t--global--text--color--status--success--default: var(--pf-t--global--color--status--success--default);
+ --pf-t--global--text--color--status--success--hover: var(--pf-t--global--color--status--success--hover);
+ --pf-t--global--text--color--status--unread--on-attention--clicked: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--status--unread--on-attention--default: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--status--unread--on-attention--hover: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--status--unread--on-default--clicked: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--status--unread--on-default--default: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--status--unread--on-default--hover: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--status--warning--clicked: var(--pf-t--global--color--status--warning--clicked);
+ --pf-t--global--text--color--status--warning--default: var(--pf-t--global--color--status--warning--default);
+ --pf-t--global--text--color--status--warning--hover: var(--pf-t--global--color--status--warning--hover);
+}
+
+@media (prefers-contrast: more) {
+ :root {
+ --pf-t--global--background--color--500: rgba(21, 21, 21, 0.2000);
+ --pf-t--global--background--color--600: rgba(199, 199, 199, 0.2500);
+ --pf-t--global--background--color--action--plain--default: rgba(255, 255, 255, 0.0000);
+ --pf-t--global--box-shadow--color--100: rgba(41, 41, 41, 0.1500);
+ --pf-t--global--box-shadow--color--200: rgba(41, 41, 41, 0.2000);
+ --pf-t--global--color--nonstatus--green--400: #3d7019;
+ --pf-t--global--color--status--danger--300: #501600;
+ --pf-t--global--color--status--success--150: #3d7019;
+ --pf-t--global--color--status--success--300: #153300;
+ --pf-t--global--background--color--100: var(--pf-t--color--white);
+ --pf-t--global--background--color--200: var(--pf-t--color--gray--10);
+ --pf-t--global--background--color--300: var(--pf-t--color--gray--20);
+ --pf-t--global--background--color--400: var(--pf-t--color--gray--80);
+ --pf-t--global--background--color--450: var(--pf-t--color--gray--70);
+ --pf-t--global--background--color--action--plain--clicked: var(--pf-t--global--background--color--600);
+ --pf-t--global--background--color--action--plain--hover: var(--pf-t--global--background--color--600);
+ --pf-t--global--background--color--backdrop--default: var(--pf-t--global--background--color--500);
+ --pf-t--global--background--color--highlight--100: var(--pf-t--color--yellow--30);
+ --pf-t--global--background--color--highlight--200: var(--pf-t--color--yellow--40);
+ --pf-t--global--background--color--tertiary--default: var(--pf-t--global--background--color--600);
+ --pf-t--global--border--color--100: var(--pf-t--color--gray--30);
+ --pf-t--global--border--color--200: var(--pf-t--color--gray--40);
+ --pf-t--global--border--color--300: var(--pf-t--color--gray--50);
+ --pf-t--global--border--color--450: var(--pf-t--color--gray--60);
+ --pf-t--global--border--color--50: var(--pf-t--color--gray--20);
+ --pf-t--global--border--color--nonstatus--green--default: var(--pf-t--global--color--nonstatus--green--400);
+ --pf-t--global--border--color--on-secondary: var(--pf-t--color--gray--80);
+ --pf-t--global--border--color--status--success--default: var(--pf-t--global--color--status--success--150);
+ --pf-t--global--box-shadow--color--lg--default: var(--pf-t--global--box-shadow--color--100);
+ --pf-t--global--box-shadow--color--lg--directional: var(--pf-t--global--box-shadow--color--200);
+ --pf-t--global--box-shadow--color--md--default: var(--pf-t--global--box-shadow--color--100);
+ --pf-t--global--box-shadow--color--md--directional: var(--pf-t--global--box-shadow--color--100);
+ --pf-t--global--box-shadow--color--sm--default: var(--pf-t--global--box-shadow--color--100);
+ --pf-t--global--box-shadow--color--sm--directional: var(--pf-t--global--box-shadow--color--200);
+ --pf-t--global--color--brand--100: var(--pf-t--color--blue--40);
+ --pf-t--global--color--brand--200: var(--pf-t--color--blue--50);
+ --pf-t--global--color--brand--300: var(--pf-t--color--blue--60);
+ --pf-t--global--color--brand--400: var(--pf-t--color--blue--70);
+ --pf-t--global--color--brand--500: var(--pf-t--color--blue--80);
+ --pf-t--global--color--disabled--100: var(--pf-t--color--gray--30);
+ --pf-t--global--color--disabled--200: var(--pf-t--color--gray--40);
+ --pf-t--global--color--disabled--300: var(--pf-t--color--gray--60);
+ --pf-t--global--color--favorite--100: var(--pf-t--color--yellow--30);
+ --pf-t--global--color--favorite--200: var(--pf-t--color--yellow--40);
+ --pf-t--global--color--favorite--300: var(--pf-t--color--yellow--70);
+ --pf-t--global--color--favorite--400: var(--pf-t--color--yellow--80);
+ --pf-t--global--color--nonstatus--blue--100: var(--pf-t--color--blue--20);
+ --pf-t--global--color--nonstatus--blue--200: var(--pf-t--color--blue--30);
+ --pf-t--global--color--nonstatus--blue--300: var(--pf-t--color--blue--40);
+ --pf-t--global--color--nonstatus--blue--400: var(--pf-t--color--blue--60);
+ --pf-t--global--color--nonstatus--blue--500: var(--pf-t--color--blue--70);
+ --pf-t--global--color--nonstatus--gray--100: var(--pf-t--color--gray--20);
+ --pf-t--global--color--nonstatus--gray--200: var(--pf-t--color--gray--30);
+ --pf-t--global--color--nonstatus--gray--300: var(--pf-t--color--gray--40);
+ --pf-t--global--color--nonstatus--gray--400: var(--pf-t--color--gray--60);
+ --pf-t--global--color--nonstatus--gray--50: var(--pf-t--color--gray--10);
+ --pf-t--global--color--nonstatus--gray--500: var(--pf-t--color--gray--70);
+ --pf-t--global--color--nonstatus--green--100: var(--pf-t--color--green--20);
+ --pf-t--global--color--nonstatus--green--200: var(--pf-t--color--green--30);
+ --pf-t--global--color--nonstatus--green--300: var(--pf-t--color--green--40);
+ --pf-t--global--color--nonstatus--green--500: var(--pf-t--color--green--70);
+ --pf-t--global--color--nonstatus--orange--100: var(--pf-t--color--orange--20);
+ --pf-t--global--color--nonstatus--orange--200: var(--pf-t--color--orange--30);
+ --pf-t--global--color--nonstatus--orange--300: var(--pf-t--color--orange--40);
+ --pf-t--global--color--nonstatus--orange--400: var(--pf-t--color--orange--60);
+ --pf-t--global--color--nonstatus--orange--500: var(--pf-t--color--orange--70);
+ --pf-t--global--color--nonstatus--orangered--100: var(--pf-t--color--red-orange--20);
+ --pf-t--global--color--nonstatus--orangered--200: var(--pf-t--color--red-orange--30);
+ --pf-t--global--color--nonstatus--orangered--300: var(--pf-t--color--red-orange--40);
+ --pf-t--global--color--nonstatus--orangered--400: var(--pf-t--color--red-orange--60);
+ --pf-t--global--color--nonstatus--orangered--500: var(--pf-t--color--red-orange--70);
+ --pf-t--global--color--nonstatus--purple--100: var(--pf-t--color--purple--20);
+ --pf-t--global--color--nonstatus--purple--200: var(--pf-t--color--purple--30);
+ --pf-t--global--color--nonstatus--purple--300: var(--pf-t--color--purple--40);
+ --pf-t--global--color--nonstatus--purple--400: var(--pf-t--color--purple--50);
+ --pf-t--global--color--nonstatus--purple--500: var(--pf-t--color--purple--60);
+ --pf-t--global--color--nonstatus--red--100: var(--pf-t--color--red--20);
+ --pf-t--global--color--nonstatus--red--200: var(--pf-t--color--red--30);
+ --pf-t--global--color--nonstatus--red--300: var(--pf-t--color--red--40);
+ --pf-t--global--color--nonstatus--red--400: var(--pf-t--color--red--60);
+ --pf-t--global--color--nonstatus--red--500: var(--pf-t--color--red--70);
+ --pf-t--global--color--nonstatus--teal--100: var(--pf-t--color--teal--20);
+ --pf-t--global--color--nonstatus--teal--200: var(--pf-t--color--teal--30);
+ --pf-t--global--color--nonstatus--teal--300: var(--pf-t--color--teal--40);
+ --pf-t--global--color--nonstatus--teal--400: var(--pf-t--color--teal--70);
+ --pf-t--global--color--nonstatus--teal--500: var(--pf-t--color--teal--80);
+ --pf-t--global--color--nonstatus--yellow--100: var(--pf-t--color--yellow--20);
+ --pf-t--global--color--nonstatus--yellow--200: var(--pf-t--color--yellow--30);
+ --pf-t--global--color--nonstatus--yellow--300: var(--pf-t--color--yellow--40);
+ --pf-t--global--color--nonstatus--yellow--400: var(--pf-t--color--yellow--70);
+ --pf-t--global--color--nonstatus--yellow--500: var(--pf-t--color--yellow--80);
+ --pf-t--global--color--severity--critical--100: var(--pf-t--color--red-orange--60);
+ --pf-t--global--color--severity--important--100: var(--pf-t--color--orange--50);
+ --pf-t--global--color--severity--important--200: var(--pf-t--color--orange--60);
+ --pf-t--global--color--severity--minor--100: var(--pf-t--color--gray--50);
+ --pf-t--global--color--severity--minor--200: var(--pf-t--color--gray--80);
+ --pf-t--global--color--severity--moderate--100: var(--pf-t--color--yellow--40);
+ --pf-t--global--color--severity--moderate--200: var(--pf-t--color--yellow--70);
+ --pf-t--global--color--severity--none--100: var(--pf-t--color--blue--40);
+ --pf-t--global--color--severity--none--200: var(--pf-t--color--blue--60);
+ --pf-t--global--color--severity--undefined--100: var(--pf-t--color--gray--30);
+ --pf-t--global--color--severity--undefined--200: var(--pf-t--color--gray--60);
+ --pf-t--global--color--status--custom--100: var(--pf-t--color--teal--60);
+ --pf-t--global--color--status--custom--200: var(--pf-t--color--teal--70);
+ --pf-t--global--color--status--custom--300: var(--pf-t--color--teal--80);
+ --pf-t--global--color--status--danger--100: var(--pf-t--color--red-orange--60);
+ --pf-t--global--color--status--danger--200: var(--pf-t--color--red-orange--70);
+ --pf-t--global--color--status--danger--clicked: var(--pf-t--global--color--status--danger--300);
+ --pf-t--global--color--status--danger--hover: var(--pf-t--global--color--status--danger--300);
+ --pf-t--global--color--status--info--100: var(--pf-t--color--purple--50);
+ --pf-t--global--color--status--info--200: var(--pf-t--color--purple--60);
+ --pf-t--global--color--status--info--300: var(--pf-t--color--purple--70);
+ --pf-t--global--color--status--success--100: var(--pf-t--color--green--60);
+ --pf-t--global--color--status--success--200: var(--pf-t--color--green--70);
+ --pf-t--global--color--status--success--clicked: var(--pf-t--global--color--status--success--300);
+ --pf-t--global--color--status--success--hover: var(--pf-t--global--color--status--success--300);
+ --pf-t--global--color--status--warning--100: var(--pf-t--color--yellow--30);
+ --pf-t--global--color--status--warning--200: var(--pf-t--color--yellow--40);
+ --pf-t--global--color--status--warning--300: var(--pf-t--color--yellow--50);
+ --pf-t--global--color--status--warning--400: var(--pf-t--color--yellow--60);
+ --pf-t--global--color--status--warning--500: var(--pf-t--color--yellow--70);
+ --pf-t--global--color--status--warning--600: var(--pf-t--color--yellow--80);
+ --pf-t--global--icon--color--100: var(--pf-t--color--gray--90);
+ --pf-t--global--icon--color--150: var(--pf-t--color--gray--60);
+ --pf-t--global--icon--color--200: var(--pf-t--color--gray--50);
+ --pf-t--global--icon--color--300: var(--pf-t--color--white);
+ --pf-t--global--icon--color--brand--clicked: var(--pf-t--color--blue--70);
+ --pf-t--global--icon--color--brand--default: var(--pf-t--color--blue--60);
+ --pf-t--global--icon--color--brand--hover: var(--pf-t--color--blue--70);
+ --pf-t--global--icon--color--status--success--default: var(--pf-t--global--color--status--success--150);
+ --pf-t--global--text--color--100: var(--pf-t--color--gray--95);
+ --pf-t--global--text--color--200: var(--pf-t--color--gray--60);
+ --pf-t--global--text--color--250: var(--pf-t--color--gray--70);
+ --pf-t--global--text--color--300: var(--pf-t--color--white);
+ --pf-t--global--text--color--400: var(--pf-t--color--red-orange--40);
+ --pf-t--global--text--color--500: var(--pf-t--color--red-orange--70);
+ --pf-t--global--text--color--brand--clicked: var(--pf-t--color--blue--80);
+ --pf-t--global--text--color--brand--default: var(--pf-t--color--blue--70);
+ --pf-t--global--text--color--brand--hover: var(--pf-t--color--blue--80);
+ --pf-t--global--text--color--link--100: var(--pf-t--color--blue--50);
+ --pf-t--global--text--color--link--200: var(--pf-t--color--blue--60);
+ --pf-t--global--text--color--link--250: var(--pf-t--color--blue--70);
+ --pf-t--global--text--color--link--300: var(--pf-t--color--purple--50);
+ --pf-t--global--text--color--link--350: var(--pf-t--color--purple--60);
+ --pf-t--global--background--color--control--read-only: var(--pf-t--global--background--color--200);
+ --pf-t--global--background--color--disabled--default: var(--pf-t--global--color--disabled--100);
+ --pf-t--global--background--color--floating--clicked: var(--pf-t--global--background--color--200);
+ --pf-t--global--background--color--floating--default: var(--pf-t--global--background--color--100);
+ --pf-t--global--background--color--floating--hover: var(--pf-t--global--background--color--200);
+ --pf-t--global--background--color--highlight--clicked: var(--pf-t--global--background--color--highlight--200);
+ --pf-t--global--background--color--highlight--default: var(--pf-t--global--background--color--highlight--100);
+ --pf-t--global--background--color--inverse--clicked: var(--pf-t--global--background--color--450);
+ --pf-t--global--background--color--inverse--default: var(--pf-t--global--background--color--400);
+ --pf-t--global--background--color--inverse--hover: var(--pf-t--global--background--color--450);
+ --pf-t--global--background--color--primary--clicked: var(--pf-t--global--background--color--200);
+ --pf-t--global--background--color--primary--default: var(--pf-t--global--background--color--100);
+ --pf-t--global--background--color--primary--hover: var(--pf-t--global--background--color--200);
+ --pf-t--global--background--color--secondary--clicked: var(--pf-t--global--background--color--300);
+ --pf-t--global--background--color--secondary--default: var(--pf-t--global--background--color--200);
+ --pf-t--global--background--color--secondary--hover: var(--pf-t--global--background--color--300);
+ --pf-t--global--border--color--clicked: var(--pf-t--global--color--brand--400);
+ --pf-t--global--border--color--control--read-only: var(--pf-t--global--border--color--50);
+ --pf-t--global--border--color--default: var(--pf-t--global--border--color--450);
+ --pf-t--global--border--color--disabled: var(--pf-t--global--color--disabled--200);
+ --pf-t--global--border--color--hover: var(--pf-t--global--color--brand--300);
+ --pf-t--global--border--color--nonstatus--blue--clicked: var(--pf-t--global--color--nonstatus--blue--500);
+ --pf-t--global--border--color--nonstatus--blue--default: var(--pf-t--global--color--nonstatus--blue--400);
+ --pf-t--global--border--color--nonstatus--blue--hover: var(--pf-t--global--color--nonstatus--blue--500);
+ --pf-t--global--border--color--nonstatus--gray--clicked: var(--pf-t--global--color--nonstatus--gray--500);
+ --pf-t--global--border--color--nonstatus--gray--default: var(--pf-t--global--color--nonstatus--gray--400);
+ --pf-t--global--border--color--nonstatus--gray--hover: var(--pf-t--global--color--nonstatus--gray--500);
+ --pf-t--global--border--color--nonstatus--green--clicked: var(--pf-t--global--color--nonstatus--green--500);
+ --pf-t--global--border--color--nonstatus--green--hover: var(--pf-t--global--color--nonstatus--green--500);
+ --pf-t--global--border--color--nonstatus--orange--clicked: var(--pf-t--global--color--nonstatus--orange--500);
+ --pf-t--global--border--color--nonstatus--orange--default: var(--pf-t--global--color--nonstatus--orange--400);
+ --pf-t--global--border--color--nonstatus--orange--hover: var(--pf-t--global--color--nonstatus--orange--500);
+ --pf-t--global--border--color--nonstatus--orangered--clicked: var(--pf-t--global--color--nonstatus--orangered--500);
+ --pf-t--global--border--color--nonstatus--orangered--default: var(--pf-t--global--color--nonstatus--orangered--400);
+ --pf-t--global--border--color--nonstatus--orangered--hover: var(--pf-t--global--color--nonstatus--orangered--500);
+ --pf-t--global--border--color--nonstatus--purple--clicked: var(--pf-t--global--color--nonstatus--purple--500);
+ --pf-t--global--border--color--nonstatus--purple--default: var(--pf-t--global--color--nonstatus--purple--400);
+ --pf-t--global--border--color--nonstatus--purple--hover: var(--pf-t--global--color--nonstatus--purple--500);
+ --pf-t--global--border--color--nonstatus--red--clicked: var(--pf-t--global--color--nonstatus--red--500);
+ --pf-t--global--border--color--nonstatus--red--default: var(--pf-t--global--color--nonstatus--red--400);
+ --pf-t--global--border--color--nonstatus--red--hover: var(--pf-t--global--color--nonstatus--red--500);
+ --pf-t--global--border--color--nonstatus--teal--clicked: var(--pf-t--global--color--nonstatus--teal--500);
+ --pf-t--global--border--color--nonstatus--teal--default: var(--pf-t--global--color--nonstatus--teal--400);
+ --pf-t--global--border--color--nonstatus--teal--hover: var(--pf-t--global--color--nonstatus--teal--500);
+ --pf-t--global--border--color--nonstatus--yellow--clicked: var(--pf-t--global--color--nonstatus--yellow--500);
+ --pf-t--global--border--color--nonstatus--yellow--default: var(--pf-t--global--color--nonstatus--yellow--400);
+ --pf-t--global--border--color--nonstatus--yellow--hover: var(--pf-t--global--color--nonstatus--yellow--500);
+ --pf-t--global--border--color--status--danger--clicked: var(--pf-t--global--color--status--danger--clicked);
+ --pf-t--global--border--color--status--danger--hover: var(--pf-t--global--color--status--danger--hover);
+ --pf-t--global--border--color--status--success--clicked: var(--pf-t--global--color--status--success--200);
+ --pf-t--global--border--color--status--success--hover: var(--pf-t--global--color--status--success--200);
+ --pf-t--global--border--color--status--warning--clicked: var(--pf-t--global--color--status--warning--600);
+ --pf-t--global--border--color--status--warning--default: var(--pf-t--global--color--status--warning--500);
+ --pf-t--global--border--color--status--warning--hover: var(--pf-t--global--color--status--warning--600);
+ --pf-t--global--color--brand--clicked: var(--pf-t--global--color--brand--400);
+ --pf-t--global--color--brand--default: var(--pf-t--global--color--brand--300);
+ --pf-t--global--color--brand--hover: var(--pf-t--global--color--brand--400);
+ --pf-t--global--color--favorite--clicked: var(--pf-t--global--color--favorite--400);
+ --pf-t--global--color--favorite--default: var(--pf-t--global--color--favorite--300);
+ --pf-t--global--color--favorite--hover: var(--pf-t--global--color--favorite--400);
+ --pf-t--global--color--nonstatus--blue--clicked: var(--pf-t--global--color--nonstatus--blue--200);
+ --pf-t--global--color--nonstatus--blue--default: var(--pf-t--global--color--nonstatus--blue--100);
+ --pf-t--global--color--nonstatus--blue--hover: var(--pf-t--global--color--nonstatus--blue--200);
+ --pf-t--global--color--nonstatus--gray--clicked: var(--pf-t--global--color--nonstatus--gray--100);
+ --pf-t--global--color--nonstatus--gray--default: var(--pf-t--global--color--nonstatus--gray--50);
+ --pf-t--global--color--nonstatus--gray--hover: var(--pf-t--global--color--nonstatus--gray--100);
+ --pf-t--global--color--nonstatus--green--clicked: var(--pf-t--global--color--nonstatus--green--200);
+ --pf-t--global--color--nonstatus--green--default: var(--pf-t--global--color--nonstatus--green--100);
+ --pf-t--global--color--nonstatus--green--hover: var(--pf-t--global--color--nonstatus--green--200);
+ --pf-t--global--color--nonstatus--orange--clicked: var(--pf-t--global--color--nonstatus--orange--200);
+ --pf-t--global--color--nonstatus--orange--default: var(--pf-t--global--color--nonstatus--orange--100);
+ --pf-t--global--color--nonstatus--orange--hover: var(--pf-t--global--color--nonstatus--orange--200);
+ --pf-t--global--color--nonstatus--orangered--clicked: var(--pf-t--global--color--nonstatus--orangered--200);
+ --pf-t--global--color--nonstatus--orangered--default: var(--pf-t--global--color--nonstatus--orangered--100);
+ --pf-t--global--color--nonstatus--orangered--hover: var(--pf-t--global--color--nonstatus--orangered--200);
+ --pf-t--global--color--nonstatus--purple--clicked: var(--pf-t--global--color--nonstatus--purple--200);
+ --pf-t--global--color--nonstatus--purple--default: var(--pf-t--global--color--nonstatus--purple--100);
+ --pf-t--global--color--nonstatus--purple--hover: var(--pf-t--global--color--nonstatus--purple--200);
+ --pf-t--global--color--nonstatus--red--clicked: var(--pf-t--global--color--nonstatus--red--200);
+ --pf-t--global--color--nonstatus--red--default: var(--pf-t--global--color--nonstatus--red--100);
+ --pf-t--global--color--nonstatus--red--hover: var(--pf-t--global--color--nonstatus--red--200);
+ --pf-t--global--color--nonstatus--teal--clicked: var(--pf-t--global--color--nonstatus--teal--200);
+ --pf-t--global--color--nonstatus--teal--default: var(--pf-t--global--color--nonstatus--teal--100);
+ --pf-t--global--color--nonstatus--teal--hover: var(--pf-t--global--color--nonstatus--teal--200);
+ --pf-t--global--color--nonstatus--yellow--clicked: var(--pf-t--global--color--nonstatus--yellow--200);
+ --pf-t--global--color--nonstatus--yellow--default: var(--pf-t--global--color--nonstatus--yellow--100);
+ --pf-t--global--color--nonstatus--yellow--hover: var(--pf-t--global--color--nonstatus--yellow--200);
+ --pf-t--global--color--status--custom--clicked: var(--pf-t--global--color--status--custom--300);
+ --pf-t--global--color--status--custom--default: var(--pf-t--global--color--status--custom--200);
+ --pf-t--global--color--status--custom--hover: var(--pf-t--global--color--status--custom--300);
+ --pf-t--global--color--status--danger--default: var(--pf-t--global--color--status--danger--200);
+ --pf-t--global--color--status--info--clicked: var(--pf-t--global--color--status--info--300);
+ --pf-t--global--color--status--info--default: var(--pf-t--global--color--status--info--200);
+ --pf-t--global--color--status--info--hover: var(--pf-t--global--color--status--info--300);
+ --pf-t--global--color--status--success--default: var(--pf-t--global--color--status--success--200);
+ --pf-t--global--color--status--unread--attention--clicked: var(--pf-t--global--color--status--danger--clicked);
+ --pf-t--global--color--status--unread--attention--hover: var(--pf-t--global--color--status--danger--hover);
+ --pf-t--global--color--status--warning--clicked: var(--pf-t--global--color--status--warning--600);
+ --pf-t--global--color--status--warning--default: var(--pf-t--global--color--status--warning--500);
+ --pf-t--global--color--status--warning--hover: var(--pf-t--global--color--status--warning--600);
+ --pf-t--global--icon--color--disabled: var(--pf-t--global--color--disabled--200);
+ --pf-t--global--icon--color--inverse: var(--pf-t--global--icon--color--300);
+ --pf-t--global--icon--color--on-disabled: var(--pf-t--global--color--disabled--300);
+ --pf-t--global--icon--color--regular: var(--pf-t--global--icon--color--100);
+ --pf-t--global--icon--color--severity--critical--default: var(--pf-t--global--color--severity--critical--100);
+ --pf-t--global--icon--color--severity--important--default: var(--pf-t--global--color--severity--important--200);
+ --pf-t--global--icon--color--severity--minor--default: var(--pf-t--global--color--severity--minor--200);
+ --pf-t--global--icon--color--severity--moderate--default: var(--pf-t--global--color--severity--moderate--200);
+ --pf-t--global--icon--color--severity--none--default: var(--pf-t--global--color--severity--none--200);
+ --pf-t--global--icon--color--severity--undefined--default: var(--pf-t--global--color--severity--undefined--200);
+ --pf-t--global--icon--color--status--danger--clicked: var(--pf-t--global--color--status--danger--200);
+ --pf-t--global--icon--color--status--danger--default: var(--pf-t--global--color--status--danger--100);
+ --pf-t--global--icon--color--status--danger--hover: var(--pf-t--global--color--status--danger--200);
+ --pf-t--global--icon--color--status--success--clicked: var(--pf-t--global--color--status--success--200);
+ --pf-t--global--icon--color--status--success--hover: var(--pf-t--global--color--status--success--200);
+ --pf-t--global--icon--color--status--warning--clicked: var(--pf-t--global--color--status--warning--600);
+ --pf-t--global--icon--color--status--warning--default: var(--pf-t--global--color--status--warning--500);
+ --pf-t--global--icon--color--status--warning--hover: var(--pf-t--global--color--status--warning--600);
+ --pf-t--global--icon--color--subtle: var(--pf-t--global--icon--color--150);
+ --pf-t--global--text--color--disabled: var(--pf-t--global--color--disabled--200);
+ --pf-t--global--text--color--inverse: var(--pf-t--global--text--color--300);
+ --pf-t--global--text--color--link--default: var(--pf-t--global--text--color--link--200);
+ --pf-t--global--text--color--link--hover: var(--pf-t--global--text--color--link--250);
+ --pf-t--global--text--color--link--visited: var(--pf-t--global--text--color--link--350);
+ --pf-t--global--text--color--on-disabled: var(--pf-t--global--color--disabled--300);
+ --pf-t--global--text--color--on-highlight: var(--pf-t--global--text--color--100);
+ --pf-t--global--text--color--regular: var(--pf-t--global--text--color--100);
+ --pf-t--global--text--color--required: var(--pf-t--global--text--color--500);
+ --pf-t--global--text--color--status--danger--clicked: var(--pf-t--global--color--status--danger--clicked);
+ --pf-t--global--text--color--status--danger--hover: var(--pf-t--global--color--status--danger--hover);
+ --pf-t--global--text--color--status--success--clicked: var(--pf-t--global--color--status--success--200);
+ --pf-t--global--text--color--status--success--default: var(--pf-t--global--color--status--success--200);
+ --pf-t--global--text--color--status--success--hover: var(--pf-t--global--color--status--success--200);
+ --pf-t--global--text--color--status--warning--clicked: var(--pf-t--global--color--status--warning--600);
+ --pf-t--global--text--color--status--warning--default: var(--pf-t--global--color--status--warning--500);
+ --pf-t--global--text--color--status--warning--hover: var(--pf-t--global--color--status--warning--600);
+ --pf-t--global--text--color--subtle: var(--pf-t--global--text--color--250);
+ --pf-t--global--background--color--action--plain--alt--clicked: var(--pf-t--global--background--color--primary--default);
+ --pf-t--global--background--color--action--plain--alt--hover: var(--pf-t--global--background--color--primary--default);
+ --pf-t--global--background--color--control--default: var(--pf-t--global--background--color--primary--default);
+ --pf-t--global--border--color--alt: var(--pf-t--global--background--color--primary--default);
+ --pf-t--global--border--color--brand--clicked: var(--pf-t--global--color--brand--clicked);
+ --pf-t--global--border--color--brand--default: var(--pf-t--global--color--brand--default);
+ --pf-t--global--border--color--brand--hover: var(--pf-t--global--color--brand--hover);
+ --pf-t--global--border--color--high-contrast: var(--pf-t--global--border--color--default);
+ --pf-t--global--border--color--status--custom--clicked: var(--pf-t--global--color--status--custom--clicked);
+ --pf-t--global--border--color--status--custom--default: var(--pf-t--global--color--status--custom--default);
+ --pf-t--global--border--color--status--custom--hover: var(--pf-t--global--color--status--custom--hover);
+ --pf-t--global--border--color--status--danger--default: var(--pf-t--global--color--status--danger--default);
+ --pf-t--global--border--color--status--info--clicked: var(--pf-t--global--color--status--info--clicked);
+ --pf-t--global--border--color--status--info--default: var(--pf-t--global--color--status--info--default);
+ --pf-t--global--border--color--status--info--hover: var(--pf-t--global--color--status--info--hover);
+ --pf-t--global--color--status--read--on-primary: var(--pf-t--global--background--color--secondary--default);
+ --pf-t--global--color--status--unread--attention--default: var(--pf-t--global--color--status--danger--default);
+ --pf-t--global--color--status--unread--clicked: var(--pf-t--global--color--brand--clicked);
+ --pf-t--global--color--status--unread--default: var(--pf-t--global--color--brand--default);
+ --pf-t--global--color--status--unread--hover: var(--pf-t--global--color--brand--hover);
+ --pf-t--global--icon--color--favorite--clicked: var(--pf-t--global--color--favorite--clicked);
+ --pf-t--global--icon--color--favorite--default: var(--pf-t--global--color--favorite--default);
+ --pf-t--global--icon--color--favorite--hover: var(--pf-t--global--color--favorite--hover);
+ --pf-t--global--icon--color--nonstatus--on-blue--clicked: var(--pf-t--global--icon--color--regular);
+ --pf-t--global--icon--color--nonstatus--on-blue--default: var(--pf-t--global--icon--color--regular);
+ --pf-t--global--icon--color--nonstatus--on-blue--hover: var(--pf-t--global--icon--color--regular);
+ --pf-t--global--icon--color--nonstatus--on-gray--clicked: var(--pf-t--global--icon--color--regular);
+ --pf-t--global--icon--color--nonstatus--on-gray--default: var(--pf-t--global--icon--color--regular);
+ --pf-t--global--icon--color--nonstatus--on-gray--hover: var(--pf-t--global--icon--color--regular);
+ --pf-t--global--icon--color--nonstatus--on-green--clicked: var(--pf-t--global--icon--color--regular);
+ --pf-t--global--icon--color--nonstatus--on-green--default: var(--pf-t--global--icon--color--regular);
+ --pf-t--global--icon--color--nonstatus--on-green--hover: var(--pf-t--global--icon--color--regular);
+ --pf-t--global--icon--color--nonstatus--on-orange--clicked: var(--pf-t--global--icon--color--regular);
+ --pf-t--global--icon--color--nonstatus--on-orange--default: var(--pf-t--global--icon--color--regular);
+ --pf-t--global--icon--color--nonstatus--on-orange--hover: var(--pf-t--global--icon--color--regular);
+ --pf-t--global--icon--color--nonstatus--on-orangered--clicked: var(--pf-t--global--icon--color--regular);
+ --pf-t--global--icon--color--nonstatus--on-orangered--default: var(--pf-t--global--icon--color--regular);
+ --pf-t--global--icon--color--nonstatus--on-orangered--hover: var(--pf-t--global--icon--color--regular);
+ --pf-t--global--icon--color--nonstatus--on-purple--clicked: var(--pf-t--global--icon--color--regular);
+ --pf-t--global--icon--color--nonstatus--on-purple--default: var(--pf-t--global--icon--color--regular);
+ --pf-t--global--icon--color--nonstatus--on-purple--hover: var(--pf-t--global--icon--color--regular);
+ --pf-t--global--icon--color--nonstatus--on-red--clicked: var(--pf-t--global--icon--color--regular);
+ --pf-t--global--icon--color--nonstatus--on-red--default: var(--pf-t--global--icon--color--regular);
+ --pf-t--global--icon--color--nonstatus--on-red--hover: var(--pf-t--global--icon--color--regular);
+ --pf-t--global--icon--color--nonstatus--on-teal--clicked: var(--pf-t--global--icon--color--regular);
+ --pf-t--global--icon--color--nonstatus--on-teal--default: var(--pf-t--global--icon--color--regular);
+ --pf-t--global--icon--color--nonstatus--on-teal--hover: var(--pf-t--global--icon--color--regular);
+ --pf-t--global--icon--color--nonstatus--on-yellow--clicked: var(--pf-t--global--icon--color--regular);
+ --pf-t--global--icon--color--nonstatus--on-yellow--default: var(--pf-t--global--icon--color--regular);
+ --pf-t--global--icon--color--nonstatus--on-yellow--hover: var(--pf-t--global--icon--color--regular);
+ --pf-t--global--icon--color--on-brand--clicked: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--on-brand--default: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--on-brand--hover: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--custom--clicked: var(--pf-t--global--color--status--custom--clicked);
+ --pf-t--global--icon--color--status--custom--default: var(--pf-t--global--color--status--custom--default);
+ --pf-t--global--icon--color--status--custom--hover: var(--pf-t--global--color--status--custom--hover);
+ --pf-t--global--icon--color--status--info--clicked: var(--pf-t--global--color--status--info--clicked);
+ --pf-t--global--icon--color--status--info--default: var(--pf-t--global--color--status--info--default);
+ --pf-t--global--icon--color--status--info--hover: var(--pf-t--global--color--status--info--hover);
+ --pf-t--global--icon--color--status--on-custom--clicked: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--on-custom--default: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--on-custom--hover: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--on-danger--clicked: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--on-danger--default: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--on-danger--hover: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--on-info--clicked: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--on-info--default: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--on-info--hover: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--on-success--clicked: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--on-success--default: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--on-success--hover: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--on-warning--clicked: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--on-warning--default: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--on-warning--hover: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--unread--on-attention--clicked: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--unread--on-attention--default: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--unread--on-attention--hover: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--unread--on-default--clicked: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--unread--on-default--default: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--unread--on-default--hover: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--text--color--nonstatus--on-blue--clicked: var(--pf-t--global--text--color--regular);
+ --pf-t--global--text--color--nonstatus--on-blue--default: var(--pf-t--global--text--color--regular);
+ --pf-t--global--text--color--nonstatus--on-blue--hover: var(--pf-t--global--text--color--regular);
+ --pf-t--global--text--color--nonstatus--on-gray--clicked: var(--pf-t--global--text--color--regular);
+ --pf-t--global--text--color--nonstatus--on-gray--default: var(--pf-t--global--text--color--regular);
+ --pf-t--global--text--color--nonstatus--on-gray--hover: var(--pf-t--global--text--color--regular);
+ --pf-t--global--text--color--nonstatus--on-green--clicked: var(--pf-t--global--text--color--regular);
+ --pf-t--global--text--color--nonstatus--on-green--default: var(--pf-t--global--text--color--regular);
+ --pf-t--global--text--color--nonstatus--on-green--hover: var(--pf-t--global--text--color--regular);
+ --pf-t--global--text--color--nonstatus--on-orange--clicked: var(--pf-t--global--text--color--regular);
+ --pf-t--global--text--color--nonstatus--on-orange--default: var(--pf-t--global--text--color--regular);
+ --pf-t--global--text--color--nonstatus--on-orange--hover: var(--pf-t--global--text--color--regular);
+ --pf-t--global--text--color--nonstatus--on-orangered--clicked: var(--pf-t--global--text--color--regular);
+ --pf-t--global--text--color--nonstatus--on-orangered--default: var(--pf-t--global--text--color--regular);
+ --pf-t--global--text--color--nonstatus--on-orangered--hover: var(--pf-t--global--text--color--regular);
+ --pf-t--global--text--color--nonstatus--on-purple--clicked: var(--pf-t--global--text--color--regular);
+ --pf-t--global--text--color--nonstatus--on-purple--default: var(--pf-t--global--text--color--regular);
+ --pf-t--global--text--color--nonstatus--on-purple--hover: var(--pf-t--global--text--color--regular);
+ --pf-t--global--text--color--nonstatus--on-red--clicked: var(--pf-t--global--text--color--regular);
+ --pf-t--global--text--color--nonstatus--on-red--default: var(--pf-t--global--text--color--regular);
+ --pf-t--global--text--color--nonstatus--on-red--hover: var(--pf-t--global--text--color--regular);
+ --pf-t--global--text--color--nonstatus--on-teal--clicked: var(--pf-t--global--text--color--regular);
+ --pf-t--global--text--color--nonstatus--on-teal--default: var(--pf-t--global--text--color--regular);
+ --pf-t--global--text--color--nonstatus--on-teal--hover: var(--pf-t--global--text--color--regular);
+ --pf-t--global--text--color--nonstatus--on-yellow--clicked: var(--pf-t--global--text--color--regular);
+ --pf-t--global--text--color--nonstatus--on-yellow--default: var(--pf-t--global--text--color--regular);
+ --pf-t--global--text--color--nonstatus--on-yellow--hover: var(--pf-t--global--text--color--regular);
+ --pf-t--global--text--color--on-brand--clicked: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--on-brand--default: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--on-brand--hover: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--placeholder: var(--pf-t--global--text--color--subtle);
+ --pf-t--global--text--color--status--custom--clicked: var(--pf-t--global--color--status--custom--clicked);
+ --pf-t--global--text--color--status--custom--default: var(--pf-t--global--color--status--custom--default);
+ --pf-t--global--text--color--status--custom--hover: var(--pf-t--global--color--status--custom--hover);
+ --pf-t--global--text--color--status--danger--default: var(--pf-t--global--color--status--danger--default);
+ --pf-t--global--text--color--status--info--clicked: var(--pf-t--global--color--status--info--clicked);
+ --pf-t--global--text--color--status--info--default: var(--pf-t--global--color--status--info--default);
+ --pf-t--global--text--color--status--info--hover: var(--pf-t--global--color--status--info--hover);
+ --pf-t--global--text--color--status--on-custom--clicked: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--status--on-custom--default: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--status--on-custom--hover: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--status--on-danger--clicked: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--text--color--status--on-danger--default: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--status--on-danger--hover: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--status--on-info--clicked: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--status--on-info--default: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--status--on-info--hover: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--status--on-success--clicked: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--status--on-success--default: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--status--on-success--hover: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--status--on-warning--clicked: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--status--on-warning--default: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--status--on-warning--hover: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--status--unread--on-attention--clicked: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--status--unread--on-attention--default: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--status--unread--on-attention--hover: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--status--unread--on-default--clicked: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--status--unread--on-default--default: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--status--unread--on-default--hover: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--color--status--read--on-secondary: var(--pf-t--global--background--color--control--default);
+ }
+}
+@media (prefers-contrast: more) {
+ :root:where(.pf-v6-theme-dark) {
+ --pf-t--global--background--color--action--plain--default: rgba(0, 0, 0, 0.0000);
+ --pf-t--global--dark--background--color--500: rgba(21, 21, 21, 0.8000);
+ --pf-t--global--dark--background--color--600: rgba(199, 199, 199, 0.1500);
+ --pf-t--global--dark--box-shadow--color--100: rgba(0, 0, 0, 0.5000);
+ --pf-t--global--dark--box-shadow--color--200: rgba(0, 0, 0, 0.7000);
+ --pf-t--global--background--color--action--plain--clicked: var(--pf-t--global--dark--background--color--600);
+ --pf-t--global--background--color--action--plain--hover: var(--pf-t--global--dark--background--color--600);
+ --pf-t--global--background--color--backdrop--default: var(--pf-t--global--dark--background--color--500);
+ --pf-t--global--background--color--primary--default: var(--pf-t--color--black);
+ --pf-t--global--background--color--tertiary--default: var(--pf-t--global--dark--background--color--600);
+ --pf-t--global--border--color--default: var(--pf-t--color--gray--30);
+ --pf-t--global--border--color--on-secondary: var(--pf-t--color--gray--60);
+ --pf-t--global--box-shadow--color--lg--default: var(--pf-t--global--dark--box-shadow--color--100);
+ --pf-t--global--box-shadow--color--lg--directional: var(--pf-t--global--dark--box-shadow--color--200);
+ --pf-t--global--box-shadow--color--md--default: var(--pf-t--global--dark--box-shadow--color--100);
+ --pf-t--global--box-shadow--color--md--directional: var(--pf-t--global--dark--box-shadow--color--200);
+ --pf-t--global--box-shadow--color--sm--default: var(--pf-t--global--dark--box-shadow--color--100);
+ --pf-t--global--box-shadow--color--sm--directional: var(--pf-t--global--dark--box-shadow--color--200);
+ --pf-t--global--dark--background--color--100: var(--pf-t--color--gray--95);
+ --pf-t--global--dark--background--color--200: var(--pf-t--color--gray--80);
+ --pf-t--global--dark--background--color--300: var(--pf-t--color--gray--70);
+ --pf-t--global--dark--background--color--400: var(--pf-t--color--gray--10);
+ --pf-t--global--dark--background--color--450: var(--pf-t--color--gray--20);
+ --pf-t--global--dark--background--color--highlight--100: var(--pf-t--color--yellow--20);
+ --pf-t--global--dark--background--color--highlight--200: var(--pf-t--color--yellow--30);
+ --pf-t--global--dark--border--color--100: var(--pf-t--color--gray--50);
+ --pf-t--global--dark--border--color--200: var(--pf-t--color--gray--40);
+ --pf-t--global--dark--border--color--50: var(--pf-t--color--gray--60);
+ --pf-t--global--dark--color--brand--100: var(--pf-t--color--blue--30);
+ --pf-t--global--dark--color--brand--200: var(--pf-t--color--blue--20);
+ --pf-t--global--dark--color--brand--300: var(--pf-t--color--blue--10);
+ --pf-t--global--dark--color--disabled--100: var(--pf-t--color--gray--40);
+ --pf-t--global--dark--color--disabled--200: var(--pf-t--color--gray--50);
+ --pf-t--global--dark--color--disabled--300: var(--pf-t--color--gray--70);
+ --pf-t--global--dark--color--disabled--400: var(--pf-t--color--gray--90);
+ --pf-t--global--dark--color--favorite--100: var(--pf-t--color--yellow--30);
+ --pf-t--global--dark--color--favorite--200: var(--pf-t--color--yellow--20);
+ --pf-t--global--dark--color--nonstatus--blue--100: var(--pf-t--color--blue--30);
+ --pf-t--global--dark--color--nonstatus--blue--200: var(--pf-t--color--blue--20);
+ --pf-t--global--dark--color--nonstatus--blue--300: var(--pf-t--color--blue--10);
+ --pf-t--global--dark--color--nonstatus--gray--100: var(--pf-t--color--gray--60);
+ --pf-t--global--dark--color--nonstatus--gray--200: var(--pf-t--color--gray--50);
+ --pf-t--global--dark--color--nonstatus--gray--300: var(--pf-t--color--gray--40);
+ --pf-t--global--dark--color--nonstatus--gray--50: var(--pf-t--color--gray--70);
+ --pf-t--global--dark--color--nonstatus--green--100: var(--pf-t--color--green--30);
+ --pf-t--global--dark--color--nonstatus--green--200: var(--pf-t--color--green--20);
+ --pf-t--global--dark--color--nonstatus--green--300: var(--pf-t--color--green--10);
+ --pf-t--global--dark--color--nonstatus--orange--100: var(--pf-t--color--orange--30);
+ --pf-t--global--dark--color--nonstatus--orange--200: var(--pf-t--color--orange--20);
+ --pf-t--global--dark--color--nonstatus--orange--300: var(--pf-t--color--orange--10);
+ --pf-t--global--dark--color--nonstatus--orangered--100: var(--pf-t--color--red-orange--30);
+ --pf-t--global--dark--color--nonstatus--orangered--200: var(--pf-t--color--red-orange--20);
+ --pf-t--global--dark--color--nonstatus--orangered--300: var(--pf-t--color--red-orange--10);
+ --pf-t--global--dark--color--nonstatus--purple--100: var(--pf-t--color--purple--30);
+ --pf-t--global--dark--color--nonstatus--purple--200: var(--pf-t--color--purple--20);
+ --pf-t--global--dark--color--nonstatus--purple--300: var(--pf-t--color--purple--10);
+ --pf-t--global--dark--color--nonstatus--red--100: var(--pf-t--color--red--30);
+ --pf-t--global--dark--color--nonstatus--red--200: var(--pf-t--color--red--20);
+ --pf-t--global--dark--color--nonstatus--red--300: var(--pf-t--color--red--10);
+ --pf-t--global--dark--color--nonstatus--teal--100: var(--pf-t--color--teal--30);
+ --pf-t--global--dark--color--nonstatus--teal--200: var(--pf-t--color--teal--20);
+ --pf-t--global--dark--color--nonstatus--teal--300: var(--pf-t--color--teal--10);
+ --pf-t--global--dark--color--nonstatus--yellow--100: var(--pf-t--color--yellow--30);
+ --pf-t--global--dark--color--nonstatus--yellow--200: var(--pf-t--color--yellow--20);
+ --pf-t--global--dark--color--nonstatus--yellow--300: var(--pf-t--color--yellow--10);
+ --pf-t--global--dark--color--severity--critical--100: var(--pf-t--color--red-orange--50);
+ --pf-t--global--dark--color--severity--critical--200: var(--pf-t--color--red-orange--40);
+ --pf-t--global--dark--color--severity--important--100: var(--pf-t--color--orange--40);
+ --pf-t--global--dark--color--severity--minor--100: var(--pf-t--color--gray--30);
+ --pf-t--global--dark--color--severity--moderate--100: var(--pf-t--color--yellow--30);
+ --pf-t--global--dark--color--severity--none--100: var(--pf-t--color--blue--30);
+ --pf-t--global--dark--color--severity--undefined--100: var(--pf-t--color--gray--40);
+ --pf-t--global--dark--color--status--custom--100: var(--pf-t--color--teal--40);
+ --pf-t--global--dark--color--status--custom--200: var(--pf-t--color--teal--30);
+ --pf-t--global--dark--color--status--custom--300: var(--pf-t--color--teal--20);
+ --pf-t--global--dark--color--status--danger--100: var(--pf-t--color--red-orange--50);
+ --pf-t--global--dark--color--status--danger--200: var(--pf-t--color--red-orange--40);
+ --pf-t--global--dark--color--status--danger--250: var(--pf-t--color--red-orange--30);
+ --pf-t--global--dark--color--status--danger--300: var(--pf-t--color--red-orange--20);
+ --pf-t--global--dark--color--status--info--100: var(--pf-t--color--purple--30);
+ --pf-t--global--dark--color--status--info--200: var(--pf-t--color--purple--20);
+ --pf-t--global--dark--color--status--info--300: var(--pf-t--color--purple--10);
+ --pf-t--global--dark--color--status--success--100: var(--pf-t--color--green--40);
+ --pf-t--global--dark--color--status--success--200: var(--pf-t--color--green--30);
+ --pf-t--global--dark--color--status--success--300: var(--pf-t--color--green--20);
+ --pf-t--global--dark--color--status--warning--100: var(--pf-t--color--yellow--30);
+ --pf-t--global--dark--color--status--warning--200: var(--pf-t--color--yellow--20);
+ --pf-t--global--dark--icon--color--100: var(--pf-t--color--gray--10);
+ --pf-t--global--dark--icon--color--200: var(--pf-t--color--gray--40);
+ --pf-t--global--dark--icon--color--300: var(--pf-t--color--gray--90);
+ --pf-t--global--dark--text--color--100: var(--pf-t--color--white);
+ --pf-t--global--dark--text--color--200: var(--pf-t--color--gray--30);
+ --pf-t--global--dark--text--color--300: var(--pf-t--color--gray--90);
+ --pf-t--global--dark--text--color--400: var(--pf-t--color--red-orange--30);
+ --pf-t--global--dark--text--color--link--100: var(--pf-t--color--blue--20);
+ --pf-t--global--dark--text--color--link--200: var(--pf-t--color--blue--10);
+ --pf-t--global--dark--text--color--link--300: var(--pf-t--color--purple--30);
+ --pf-t--global--dark--text--color--link--400: var(--pf-t--color--purple--20);
+ --pf-t--global--background--color--action--plain--alt--clicked: var(--pf-t--global--background--color--primary--default);
+ --pf-t--global--background--color--action--plain--alt--hover: var(--pf-t--global--background--color--primary--default);
+ --pf-t--global--background--color--control--default: var(--pf-t--global--dark--background--color--100);
+ --pf-t--global--background--color--control--read-only: var(--pf-t--global--dark--background--color--300);
+ --pf-t--global--background--color--disabled--default: var(--pf-t--global--dark--color--disabled--200);
+ --pf-t--global--background--color--floating--clicked: var(--pf-t--global--dark--background--color--300);
+ --pf-t--global--background--color--floating--default: var(--pf-t--global--dark--background--color--200);
+ --pf-t--global--background--color--floating--hover: var(--pf-t--global--dark--background--color--300);
+ --pf-t--global--background--color--highlight--clicked: var(--pf-t--global--dark--background--color--highlight--200);
+ --pf-t--global--background--color--highlight--default: var(--pf-t--global--dark--background--color--highlight--100);
+ --pf-t--global--background--color--inverse--clicked: var(--pf-t--global--dark--background--color--450);
+ --pf-t--global--background--color--inverse--default: var(--pf-t--global--dark--background--color--400);
+ --pf-t--global--background--color--inverse--hover: var(--pf-t--global--dark--background--color--450);
+ --pf-t--global--background--color--primary--clicked: var(--pf-t--global--dark--background--color--100);
+ --pf-t--global--background--color--primary--hover: var(--pf-t--global--dark--background--color--100);
+ --pf-t--global--background--color--secondary--clicked: var(--pf-t--global--dark--background--color--200);
+ --pf-t--global--background--color--secondary--default: var(--pf-t--global--dark--background--color--100);
+ --pf-t--global--background--color--secondary--hover: var(--pf-t--global--dark--background--color--200);
+ --pf-t--global--border--color--alt: var(--pf-t--global--background--color--primary--default);
+ --pf-t--global--border--color--clicked: var(--pf-t--global--dark--color--brand--200);
+ --pf-t--global--border--color--control--read-only: var(--pf-t--global--dark--border--color--50);
+ --pf-t--global--border--color--disabled: var(--pf-t--global--dark--color--disabled--200);
+ --pf-t--global--border--color--high-contrast: var(--pf-t--global--border--color--default);
+ --pf-t--global--border--color--hover: var(--pf-t--global--dark--color--brand--100);
+ --pf-t--global--border--color--nonstatus--blue--clicked: var(--pf-t--global--dark--color--nonstatus--blue--200);
+ --pf-t--global--border--color--nonstatus--blue--default: var(--pf-t--global--dark--color--nonstatus--blue--100);
+ --pf-t--global--border--color--nonstatus--blue--hover: var(--pf-t--global--dark--color--nonstatus--blue--200);
+ --pf-t--global--border--color--nonstatus--gray--clicked: var(--pf-t--global--dark--color--nonstatus--gray--300);
+ --pf-t--global--border--color--nonstatus--gray--default: var(--pf-t--global--dark--color--nonstatus--gray--200);
+ --pf-t--global--border--color--nonstatus--gray--hover: var(--pf-t--global--dark--color--nonstatus--gray--300);
+ --pf-t--global--border--color--nonstatus--green--clicked: var(--pf-t--global--dark--color--nonstatus--green--200);
+ --pf-t--global--border--color--nonstatus--green--default: var(--pf-t--global--dark--color--nonstatus--green--100);
+ --pf-t--global--border--color--nonstatus--green--hover: var(--pf-t--global--dark--color--nonstatus--green--200);
+ --pf-t--global--border--color--nonstatus--orange--clicked: var(--pf-t--global--dark--color--nonstatus--orange--200);
+ --pf-t--global--border--color--nonstatus--orange--default: var(--pf-t--global--dark--color--nonstatus--orange--100);
+ --pf-t--global--border--color--nonstatus--orange--hover: var(--pf-t--global--dark--color--nonstatus--orange--200);
+ --pf-t--global--border--color--nonstatus--orangered--clicked: var(--pf-t--global--dark--color--nonstatus--orangered--200);
+ --pf-t--global--border--color--nonstatus--orangered--default: var(--pf-t--global--dark--color--nonstatus--orangered--100);
+ --pf-t--global--border--color--nonstatus--orangered--hover: var(--pf-t--global--dark--color--nonstatus--orangered--200);
+ --pf-t--global--border--color--nonstatus--purple--clicked: var(--pf-t--global--dark--color--nonstatus--purple--200);
+ --pf-t--global--border--color--nonstatus--purple--default: var(--pf-t--global--dark--color--nonstatus--purple--100);
+ --pf-t--global--border--color--nonstatus--purple--hover: var(--pf-t--global--dark--color--nonstatus--purple--200);
+ --pf-t--global--border--color--nonstatus--red--clicked: var(--pf-t--global--dark--color--nonstatus--red--200);
+ --pf-t--global--border--color--nonstatus--red--default: var(--pf-t--global--dark--color--nonstatus--red--100);
+ --pf-t--global--border--color--nonstatus--red--hover: var(--pf-t--global--dark--color--nonstatus--red--200);
+ --pf-t--global--border--color--nonstatus--teal--clicked: var(--pf-t--global--dark--color--nonstatus--teal--200);
+ --pf-t--global--border--color--nonstatus--teal--default: var(--pf-t--global--dark--color--nonstatus--teal--100);
+ --pf-t--global--border--color--nonstatus--teal--hover: var(--pf-t--global--dark--color--nonstatus--teal--200);
+ --pf-t--global--border--color--nonstatus--yellow--clicked: var(--pf-t--global--dark--color--nonstatus--yellow--200);
+ --pf-t--global--border--color--nonstatus--yellow--default: var(--pf-t--global--dark--color--nonstatus--yellow--100);
+ --pf-t--global--border--color--nonstatus--yellow--hover: var(--pf-t--global--dark--color--nonstatus--yellow--200);
+ --pf-t--global--color--brand--clicked: var(--pf-t--global--dark--color--brand--200);
+ --pf-t--global--color--brand--default: var(--pf-t--global--dark--color--brand--100);
+ --pf-t--global--color--brand--hover: var(--pf-t--global--dark--color--brand--200);
+ --pf-t--global--color--favorite--clicked: var(--pf-t--global--dark--color--favorite--200);
+ --pf-t--global--color--favorite--default: var(--pf-t--global--dark--color--favorite--100);
+ --pf-t--global--color--favorite--hover: var(--pf-t--global--dark--color--favorite--200);
+ --pf-t--global--color--nonstatus--blue--clicked: var(--pf-t--global--dark--color--nonstatus--blue--200);
+ --pf-t--global--color--nonstatus--blue--default: var(--pf-t--global--dark--color--nonstatus--blue--100);
+ --pf-t--global--color--nonstatus--blue--hover: var(--pf-t--global--dark--color--nonstatus--blue--200);
+ --pf-t--global--color--nonstatus--gray--clicked: var(--pf-t--global--dark--color--nonstatus--gray--100);
+ --pf-t--global--color--nonstatus--gray--default: var(--pf-t--global--dark--color--nonstatus--gray--50);
+ --pf-t--global--color--nonstatus--gray--hover: var(--pf-t--global--dark--color--nonstatus--gray--100);
+ --pf-t--global--color--nonstatus--green--clicked: var(--pf-t--global--dark--color--nonstatus--green--200);
+ --pf-t--global--color--nonstatus--green--default: var(--pf-t--global--dark--color--nonstatus--green--100);
+ --pf-t--global--color--nonstatus--green--hover: var(--pf-t--global--dark--color--nonstatus--green--200);
+ --pf-t--global--color--nonstatus--orange--clicked: var(--pf-t--global--dark--color--nonstatus--orange--200);
+ --pf-t--global--color--nonstatus--orange--default: var(--pf-t--global--dark--color--nonstatus--orange--100);
+ --pf-t--global--color--nonstatus--orange--hover: var(--pf-t--global--dark--color--nonstatus--orange--200);
+ --pf-t--global--color--nonstatus--orangered--clicked: var(--pf-t--global--dark--color--nonstatus--orangered--200);
+ --pf-t--global--color--nonstatus--orangered--default: var(--pf-t--global--dark--color--nonstatus--orangered--100);
+ --pf-t--global--color--nonstatus--orangered--hover: var(--pf-t--global--dark--color--nonstatus--orangered--200);
+ --pf-t--global--color--nonstatus--purple--clicked: var(--pf-t--global--dark--color--nonstatus--purple--200);
+ --pf-t--global--color--nonstatus--purple--default: var(--pf-t--global--dark--color--nonstatus--purple--100);
+ --pf-t--global--color--nonstatus--purple--hover: var(--pf-t--global--dark--color--nonstatus--purple--200);
+ --pf-t--global--color--nonstatus--red--clicked: var(--pf-t--global--dark--color--nonstatus--red--200);
+ --pf-t--global--color--nonstatus--red--default: var(--pf-t--global--dark--color--nonstatus--red--100);
+ --pf-t--global--color--nonstatus--red--hover: var(--pf-t--global--dark--color--nonstatus--red--200);
+ --pf-t--global--color--nonstatus--teal--clicked: var(--pf-t--global--dark--color--nonstatus--teal--200);
+ --pf-t--global--color--nonstatus--teal--default: var(--pf-t--global--dark--color--nonstatus--teal--100);
+ --pf-t--global--color--nonstatus--teal--hover: var(--pf-t--global--dark--color--nonstatus--teal--200);
+ --pf-t--global--color--nonstatus--yellow--clicked: var(--pf-t--global--dark--color--nonstatus--yellow--200);
+ --pf-t--global--color--nonstatus--yellow--default: var(--pf-t--global--dark--color--nonstatus--yellow--100);
+ --pf-t--global--color--nonstatus--yellow--hover: var(--pf-t--global--dark--color--nonstatus--yellow--200);
+ --pf-t--global--color--status--custom--clicked: var(--pf-t--global--dark--color--status--custom--300);
+ --pf-t--global--color--status--custom--default: var(--pf-t--global--dark--color--status--custom--200);
+ --pf-t--global--color--status--custom--hover: var(--pf-t--global--dark--color--status--custom--300);
+ --pf-t--global--color--status--danger--clicked: var(--pf-t--global--dark--color--status--danger--250);
+ --pf-t--global--color--status--danger--default: var(--pf-t--global--dark--color--status--danger--200);
+ --pf-t--global--color--status--danger--hover: var(--pf-t--global--dark--color--status--danger--250);
+ --pf-t--global--color--status--info--clicked: var(--pf-t--global--dark--color--status--info--200);
+ --pf-t--global--color--status--info--default: var(--pf-t--global--dark--color--status--info--100);
+ --pf-t--global--color--status--info--hover: var(--pf-t--global--dark--color--status--info--200);
+ --pf-t--global--color--status--success--clicked: var(--pf-t--global--dark--color--status--success--300);
+ --pf-t--global--color--status--success--default: var(--pf-t--global--dark--color--status--success--200);
+ --pf-t--global--color--status--success--hover: var(--pf-t--global--dark--color--status--success--300);
+ --pf-t--global--color--status--warning--clicked: var(--pf-t--global--dark--color--status--warning--200);
+ --pf-t--global--color--status--warning--default: var(--pf-t--global--dark--color--status--warning--100);
+ --pf-t--global--color--status--warning--hover: var(--pf-t--global--dark--color--status--warning--200);
+ --pf-t--global--icon--color--brand--clicked: var(--pf-t--global--dark--color--brand--300);
+ --pf-t--global--icon--color--brand--default: var(--pf-t--global--dark--color--brand--200);
+ --pf-t--global--icon--color--brand--hover: var(--pf-t--global--dark--color--brand--300);
+ --pf-t--global--icon--color--disabled: var(--pf-t--global--dark--color--disabled--200);
+ --pf-t--global--icon--color--inverse: var(--pf-t--global--dark--icon--color--300);
+ --pf-t--global--icon--color--on-disabled: var(--pf-t--global--dark--color--disabled--300);
+ --pf-t--global--icon--color--regular: var(--pf-t--global--dark--icon--color--100);
+ --pf-t--global--icon--color--severity--critical--default: var(--pf-t--global--dark--color--severity--critical--200);
+ --pf-t--global--icon--color--severity--important--default: var(--pf-t--global--dark--color--severity--important--100);
+ --pf-t--global--icon--color--severity--minor--default: var(--pf-t--global--dark--color--severity--minor--100);
+ --pf-t--global--icon--color--severity--moderate--default: var(--pf-t--global--dark--color--severity--moderate--100);
+ --pf-t--global--icon--color--severity--none--default: var(--pf-t--global--dark--color--severity--none--100);
+ --pf-t--global--icon--color--severity--undefined--default: var(--pf-t--global--dark--color--severity--undefined--100);
+ --pf-t--global--icon--color--subtle: var(--pf-t--global--dark--icon--color--200);
+ --pf-t--global--text--color--brand--clicked: var(--pf-t--global--dark--color--brand--300);
+ --pf-t--global--text--color--brand--default: var(--pf-t--global--dark--color--brand--200);
+ --pf-t--global--text--color--brand--hover: var(--pf-t--global--dark--color--brand--300);
+ --pf-t--global--text--color--disabled: var(--pf-t--global--dark--color--disabled--200);
+ --pf-t--global--text--color--inverse: var(--pf-t--global--dark--text--color--300);
+ --pf-t--global--text--color--link--default: var(--pf-t--global--dark--text--color--link--100);
+ --pf-t--global--text--color--link--hover: var(--pf-t--global--dark--text--color--link--200);
+ --pf-t--global--text--color--link--visited: var(--pf-t--global--dark--text--color--link--400);
+ --pf-t--global--text--color--on-disabled: var(--pf-t--global--dark--color--disabled--400);
+ --pf-t--global--text--color--on-highlight: var(--pf-t--global--dark--text--color--300);
+ --pf-t--global--text--color--regular: var(--pf-t--global--dark--text--color--100);
+ --pf-t--global--text--color--required: var(--pf-t--global--dark--text--color--400);
+ --pf-t--global--text--color--status--danger--clicked: var(--pf-t--global--dark--color--status--danger--300);
+ --pf-t--global--text--color--status--danger--default: var(--pf-t--global--dark--color--status--danger--300);
+ --pf-t--global--text--color--status--danger--hover: var(--pf-t--global--dark--color--status--danger--300);
+ --pf-t--global--text--color--subtle: var(--pf-t--global--dark--text--color--200);
+ --pf-t--global--border--color--brand--clicked: var(--pf-t--global--color--brand--clicked);
+ --pf-t--global--border--color--brand--default: var(--pf-t--global--color--brand--default);
+ --pf-t--global--border--color--brand--hover: var(--pf-t--global--color--brand--hover);
+ --pf-t--global--border--color--status--custom--clicked: var(--pf-t--global--color--status--custom--clicked);
+ --pf-t--global--border--color--status--custom--default: var(--pf-t--global--color--status--custom--default);
+ --pf-t--global--border--color--status--custom--hover: var(--pf-t--global--color--status--custom--hover);
+ --pf-t--global--border--color--status--danger--clicked: var(--pf-t--global--color--status--danger--clicked);
+ --pf-t--global--border--color--status--danger--default: var(--pf-t--global--color--status--danger--default);
+ --pf-t--global--border--color--status--danger--hover: var(--pf-t--global--color--status--danger--hover);
+ --pf-t--global--border--color--status--info--clicked: var(--pf-t--global--color--status--info--clicked);
+ --pf-t--global--border--color--status--info--default: var(--pf-t--global--color--status--info--default);
+ --pf-t--global--border--color--status--info--hover: var(--pf-t--global--color--status--info--hover);
+ --pf-t--global--border--color--status--success--clicked: var(--pf-t--global--color--status--success--clicked);
+ --pf-t--global--border--color--status--success--default: var(--pf-t--global--color--status--success--default);
+ --pf-t--global--border--color--status--success--hover: var(--pf-t--global--color--status--success--hover);
+ --pf-t--global--border--color--status--warning--clicked: var(--pf-t--global--color--status--warning--clicked);
+ --pf-t--global--border--color--status--warning--default: var(--pf-t--global--color--status--warning--default);
+ --pf-t--global--border--color--status--warning--hover: var(--pf-t--global--color--status--warning--hover);
+ --pf-t--global--color--status--read--on-primary: var(--pf-t--global--background--color--secondary--default);
+ --pf-t--global--color--status--read--on-secondary: var(--pf-t--global--background--color--control--default);
+ --pf-t--global--color--status--unread--attention--clicked: var(--pf-t--global--color--status--danger--clicked);
+ --pf-t--global--color--status--unread--attention--default: var(--pf-t--global--color--status--danger--default);
+ --pf-t--global--color--status--unread--attention--hover: var(--pf-t--global--color--status--danger--hover);
+ --pf-t--global--color--status--unread--clicked: var(--pf-t--global--color--brand--clicked);
+ --pf-t--global--color--status--unread--default: var(--pf-t--global--color--brand--default);
+ --pf-t--global--color--status--unread--hover: var(--pf-t--global--color--brand--hover);
+ --pf-t--global--icon--color--favorite--clicked: var(--pf-t--global--color--favorite--clicked);
+ --pf-t--global--icon--color--favorite--default: var(--pf-t--global--color--favorite--default);
+ --pf-t--global--icon--color--favorite--hover: var(--pf-t--global--color--favorite--hover);
+ --pf-t--global--icon--color--nonstatus--on-blue--clicked: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--nonstatus--on-blue--default: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--nonstatus--on-blue--hover: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--nonstatus--on-gray--clicked: var(--pf-t--global--icon--color--regular);
+ --pf-t--global--icon--color--nonstatus--on-gray--default: var(--pf-t--global--icon--color--regular);
+ --pf-t--global--icon--color--nonstatus--on-gray--hover: var(--pf-t--global--icon--color--regular);
+ --pf-t--global--icon--color--nonstatus--on-green--clicked: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--nonstatus--on-green--default: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--nonstatus--on-green--hover: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--nonstatus--on-orange--clicked: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--nonstatus--on-orange--default: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--nonstatus--on-orange--hover: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--nonstatus--on-orangered--clicked: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--nonstatus--on-orangered--default: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--nonstatus--on-orangered--hover: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--nonstatus--on-purple--clicked: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--nonstatus--on-purple--default: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--nonstatus--on-purple--hover: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--nonstatus--on-red--clicked: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--nonstatus--on-red--default: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--nonstatus--on-red--hover: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--nonstatus--on-teal--clicked: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--nonstatus--on-teal--default: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--nonstatus--on-teal--hover: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--nonstatus--on-yellow--clicked: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--nonstatus--on-yellow--default: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--nonstatus--on-yellow--hover: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--on-brand--clicked: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--on-brand--default: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--on-brand--hover: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--custom--clicked: var(--pf-t--global--color--status--custom--clicked);
+ --pf-t--global--icon--color--status--custom--default: var(--pf-t--global--color--status--custom--default);
+ --pf-t--global--icon--color--status--custom--hover: var(--pf-t--global--color--status--custom--hover);
+ --pf-t--global--icon--color--status--danger--clicked: var(--pf-t--global--color--status--danger--clicked);
+ --pf-t--global--icon--color--status--danger--default: var(--pf-t--global--color--status--danger--default);
+ --pf-t--global--icon--color--status--danger--hover: var(--pf-t--global--color--status--danger--hover);
+ --pf-t--global--icon--color--status--info--clicked: var(--pf-t--global--color--status--info--clicked);
+ --pf-t--global--icon--color--status--info--default: var(--pf-t--global--color--status--info--default);
+ --pf-t--global--icon--color--status--info--hover: var(--pf-t--global--color--status--info--hover);
+ --pf-t--global--icon--color--status--on-custom--clicked: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--on-custom--default: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--on-custom--hover: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--on-danger--clicked: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--on-danger--default: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--on-danger--hover: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--on-info--clicked: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--on-info--default: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--on-info--hover: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--on-success--clicked: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--on-success--default: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--on-success--hover: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--on-warning--clicked: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--on-warning--default: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--on-warning--hover: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--success--clicked: var(--pf-t--global--color--status--success--clicked);
+ --pf-t--global--icon--color--status--success--default: var(--pf-t--global--color--status--success--default);
+ --pf-t--global--icon--color--status--success--hover: var(--pf-t--global--color--status--success--hover);
+ --pf-t--global--icon--color--status--unread--on-attention--clicked: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--unread--on-attention--default: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--unread--on-attention--hover: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--unread--on-default--clicked: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--unread--on-default--default: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--unread--on-default--hover: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--warning--clicked: var(--pf-t--global--color--status--warning--clicked);
+ --pf-t--global--icon--color--status--warning--default: var(--pf-t--global--color--status--warning--default);
+ --pf-t--global--icon--color--status--warning--hover: var(--pf-t--global--color--status--warning--hover);
+ --pf-t--global--text--color--nonstatus--on-blue--clicked: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--nonstatus--on-blue--default: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--nonstatus--on-blue--hover: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--nonstatus--on-gray--clicked: var(--pf-t--global--text--color--regular);
+ --pf-t--global--text--color--nonstatus--on-gray--default: var(--pf-t--global--text--color--regular);
+ --pf-t--global--text--color--nonstatus--on-gray--hover: var(--pf-t--global--text--color--regular);
+ --pf-t--global--text--color--nonstatus--on-green--clicked: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--nonstatus--on-green--default: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--nonstatus--on-green--hover: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--nonstatus--on-orange--clicked: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--nonstatus--on-orange--default: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--nonstatus--on-orange--hover: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--nonstatus--on-orangered--clicked: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--nonstatus--on-orangered--default: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--nonstatus--on-orangered--hover: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--nonstatus--on-purple--clicked: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--nonstatus--on-purple--default: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--nonstatus--on-purple--hover: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--nonstatus--on-red--clicked: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--nonstatus--on-red--default: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--nonstatus--on-red--hover: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--nonstatus--on-teal--clicked: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--nonstatus--on-teal--default: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--nonstatus--on-teal--hover: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--nonstatus--on-yellow--clicked: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--nonstatus--on-yellow--default: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--nonstatus--on-yellow--hover: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--on-brand--clicked: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--on-brand--default: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--on-brand--hover: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--placeholder: var(--pf-t--global--text--color--subtle);
+ --pf-t--global--text--color--status--custom--clicked: var(--pf-t--global--color--status--custom--clicked);
+ --pf-t--global--text--color--status--custom--default: var(--pf-t--global--color--status--custom--default);
+ --pf-t--global--text--color--status--custom--hover: var(--pf-t--global--color--status--custom--hover);
+ --pf-t--global--text--color--status--info--clicked: var(--pf-t--global--color--status--info--clicked);
+ --pf-t--global--text--color--status--info--default: var(--pf-t--global--color--status--info--default);
+ --pf-t--global--text--color--status--info--hover: var(--pf-t--global--color--status--info--hover);
+ --pf-t--global--text--color--status--on-custom--clicked: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--status--on-custom--default: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--status--on-custom--hover: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--status--on-danger--clicked: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--status--on-danger--default: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--status--on-danger--hover: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--status--on-info--clicked: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--status--on-info--default: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--status--on-info--hover: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--status--on-success--clicked: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--status--on-success--default: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--status--on-success--hover: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--status--on-warning--clicked: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--status--on-warning--default: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--status--on-warning--hover: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--status--success--clicked: var(--pf-t--global--color--status--success--clicked);
+ --pf-t--global--text--color--status--success--default: var(--pf-t--global--color--status--success--default);
+ --pf-t--global--text--color--status--success--hover: var(--pf-t--global--color--status--success--hover);
+ --pf-t--global--text--color--status--unread--on-attention--clicked: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--status--unread--on-attention--default: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--status--unread--on-attention--hover: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--status--unread--on-default--clicked: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--status--unread--on-default--default: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--status--unread--on-default--hover: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--status--warning--clicked: var(--pf-t--global--color--status--warning--clicked);
+ --pf-t--global--text--color--status--warning--default: var(--pf-t--global--color--status--warning--default);
+ --pf-t--global--text--color--status--warning--hover: var(--pf-t--global--color--status--warning--hover);
+ }
+}
+:is(.pf-v6-m-dir-rtl, [dir=rtl]) {
+ --pf-v6-global--inverse--multiplier: -1;
+}
\ No newline at end of file
diff --git a/packages/react-docs/patternfly-docs/patternfly-docs.css.js b/packages/react-docs/patternfly-docs/patternfly-docs.css.js
index 4da1866151b..4ec11955a8b 100644
--- a/packages/react-docs/patternfly-docs/patternfly-docs.css.js
+++ b/packages/react-docs/patternfly-docs/patternfly-docs.css.js
@@ -14,3 +14,10 @@ import '@patternfly/patternfly/patternfly-addons.css';
// Charts
import '@patternfly/patternfly/patternfly-charts.css';
+
+import './patternfly-variables.css';
+import './button.css';
+import './drawer.css';
+import './nav.css';
+import './page.css';
+import './tabs.css';
diff --git a/packages/react-docs/patternfly-docs/patternfly-variables.css b/packages/react-docs/patternfly-docs/patternfly-variables.css
new file mode 100644
index 00000000000..1898c587a5e
--- /dev/null
+++ b/packages/react-docs/patternfly-docs/patternfly-variables.css
@@ -0,0 +1,2112 @@
+:root {
+ --pf-v6-global--inverse--multiplier: 1;
+ --pf-t--color--black: #000000;
+ --pf-t--color--blue--10: #e0f0ff;
+ --pf-t--color--blue--20: #b9dafc;
+ --pf-t--color--blue--30: #92c5f9;
+ --pf-t--color--blue--40: #4394e5;
+ --pf-t--color--blue--50: #0066cc;
+ --pf-t--color--blue--60: #004d99;
+ --pf-t--color--blue--70: #003366;
+ --pf-t--color--blue--80: #002250;
+ --pf-t--color--gray--10: #f2f2f2;
+ --pf-t--color--gray--20: #e0e0e0;
+ --pf-t--color--gray--30: #c7c7c7;
+ --pf-t--color--gray--40: #a3a3a3;
+ --pf-t--color--gray--50: #707070;
+ --pf-t--color--gray--60: #4d4d4d;
+ --pf-t--color--gray--70: #383838;
+ --pf-t--color--gray--80: #292929;
+ --pf-t--color--gray--90: #1f1f1f;
+ --pf-t--color--gray--95: #151515;
+ --pf-t--color--green--10: #e9f7df;
+ --pf-t--color--green--20: #d1f1bb;
+ --pf-t--color--green--30: #afdc8f;
+ --pf-t--color--green--40: #87bb62;
+ --pf-t--color--green--50: #63993d;
+ --pf-t--color--green--60: #3d7317;
+ --pf-t--color--green--70: #204d00;
+ --pf-t--color--orange--10: #ffe8cc;
+ --pf-t--color--orange--20: #fccb8f;
+ --pf-t--color--orange--30: #f8ae54;
+ --pf-t--color--orange--40: #f5921b;
+ --pf-t--color--orange--50: #ca6c0f;
+ --pf-t--color--orange--60: #9e4a06;
+ --pf-t--color--orange--70: #732e00;
+ --pf-t--color--orange--80: #4d1f00;
+ --pf-t--color--purple--10: #ece6ff;
+ --pf-t--color--purple--20: #d0c5f4;
+ --pf-t--color--purple--30: #b6a6e9;
+ --pf-t--color--purple--40: #876fd4;
+ --pf-t--color--purple--50: #5e40be;
+ --pf-t--color--purple--60: #3d2785;
+ --pf-t--color--purple--70: #21134d;
+ --pf-t--color--purple--80: #1b0d33;
+ --pf-t--color--red--10: #fce3e3;
+ --pf-t--color--red--20: #fbc5c5;
+ --pf-t--color--red--30: #f9a8a8;
+ --pf-t--color--red--40: #f56e6e;
+ --pf-t--color--red--50: #ee0000;
+ --pf-t--color--red--60: #a60000;
+ --pf-t--color--red--70: #5f0000;
+ --pf-t--color--red--80: #3f0000;
+ --pf-t--color--red-orange--10: #ffe3d9;
+ --pf-t--color--red-orange--20: #fbbea8;
+ --pf-t--color--red-orange--30: #f89b78;
+ --pf-t--color--red-orange--40: #f4784a;
+ --pf-t--color--red-orange--50: #f0561d;
+ --pf-t--color--red-orange--60: #b1380b;
+ --pf-t--color--red-orange--70: #731f00;
+ --pf-t--color--teal--10: #daf2f2;
+ --pf-t--color--teal--20: #b9e5e5;
+ --pf-t--color--teal--30: #9ad8d8;
+ --pf-t--color--teal--40: #63bdbd;
+ --pf-t--color--teal--50: #37a3a3;
+ --pf-t--color--teal--60: #147878;
+ --pf-t--color--teal--70: #004d4d;
+ --pf-t--color--teal--80: #003333;
+ --pf-t--color--white: #ffffff;
+ --pf-t--color--yellow--10: #fff4cc;
+ --pf-t--color--yellow--20: #ffe072;
+ --pf-t--color--yellow--30: #ffcc17;
+ --pf-t--color--yellow--40: #dca614;
+ --pf-t--color--yellow--50: #b98412;
+ --pf-t--color--yellow--60: #96640f;
+ --pf-t--color--yellow--70: #73480b;
+ --pf-t--color--yellow--80: #54330b;
+ --pf-t--global--background--color--500: rgba(21, 21, 21, 0.2000);
+ --pf-t--global--background--color--600: rgba(199, 199, 199, 0.2500);
+ --pf-t--global--background--color--action--plain--default: rgba(255, 255, 255, 0.0000);
+ --pf-t--global--border--color--high-contrast: rgba(255, 255, 255, 0.0000);
+ --pf-t--global--border--radius--0: 0px;
+ --pf-t--global--border--radius--100: 4px;
+ --pf-t--global--border--radius--200: 6px;
+ --pf-t--global--border--radius--300: 16px;
+ --pf-t--global--border--radius--400: 24px;
+ --pf-t--global--border--radius--500: 999px;
+ --pf-t--global--border--width--100: 1px;
+ --pf-t--global--border--width--200: 2px;
+ --pf-t--global--border--width--300: 3px;
+ --pf-t--global--border--width--400: 4px;
+ --pf-t--global--box-shadow--X--100: -10px;
+ --pf-t--global--box-shadow--X--200: -4px;
+ --pf-t--global--box-shadow--X--300: -1px;
+ --pf-t--global--box-shadow--X--400: 0px;
+ --pf-t--global--box-shadow--X--50: -20px;
+ --pf-t--global--box-shadow--X--500: 1px;
+ --pf-t--global--box-shadow--X--600: 4px;
+ --pf-t--global--box-shadow--X--700: 10px;
+ --pf-t--global--box-shadow--X--800: 20px;
+ --pf-t--global--box-shadow--Y--100: -10px;
+ --pf-t--global--box-shadow--Y--200: -4px;
+ --pf-t--global--box-shadow--Y--300: -1px;
+ --pf-t--global--box-shadow--Y--400: 0px;
+ --pf-t--global--box-shadow--Y--50: -20px;
+ --pf-t--global--box-shadow--Y--500: 1px;
+ --pf-t--global--box-shadow--Y--600: 4px;
+ --pf-t--global--box-shadow--Y--700: 10px;
+ --pf-t--global--box-shadow--Y--800: 20px;
+ --pf-t--global--box-shadow--blur--100: 4px;
+ --pf-t--global--box-shadow--blur--200: 9px;
+ --pf-t--global--box-shadow--blur--300: 20px;
+ --pf-t--global--box-shadow--color--100: rgba(41, 41, 41, 0.1500);
+ --pf-t--global--box-shadow--color--200: rgba(41, 41, 41, 0.2000);
+ --pf-t--global--box-shadow--spread--100: 0px;
+ --pf-t--global--box-shadow--spread--200: -4px;
+ --pf-t--global--box-shadow--spread--300: -8px;
+ --pf-t--global--box-shadow--spread--400: -20px;
+ --pf-t--global--breakpoint--100: 0rem;
+ --pf-t--global--breakpoint--200: 36rem;
+ --pf-t--global--breakpoint--250: 40rem;
+ --pf-t--global--breakpoint--300: 48rem;
+ --pf-t--global--breakpoint--350: 60rem;
+ --pf-t--global--breakpoint--400: 62rem;
+ --pf-t--global--breakpoint--500: 75rem;
+ --pf-t--global--breakpoint--550: 80rem;
+ --pf-t--global--breakpoint--600: 90.625rem;
+ --pf-t--global--color--nonstatus--green--400: #3d7019;
+ --pf-t--global--color--status--danger--300: #501600;
+ --pf-t--global--color--status--success--150: #3d7019;
+ --pf-t--global--color--status--success--300: #153300;
+ --pf-t--global--delay--100: 0ms;
+ --pf-t--global--delay--200: 50ms;
+ --pf-t--global--delay--300: 100ms;
+ --pf-t--global--delay--400: 7000ms;
+ --pf-t--global--duration--100: 100ms;
+ --pf-t--global--duration--200: 200ms;
+ --pf-t--global--duration--300: 300ms;
+ --pf-t--global--duration--400: 400ms;
+ --pf-t--global--duration--50: 50ms;
+ --pf-t--global--duration--500: 500ms;
+ --pf-t--global--duration--600: 600ms;
+ --pf-t--global--font--family--100: "Red Hat Text", "RedHatText", "Noto Sans Arabic", "Noto Sans Hebrew", "Noto Sans JP", "Noto Sans KR", "Noto Sans Malayalam", "Noto Sans SC", "Noto Sans TC", "Noto Sans Thai", Helvetica, Arial, sans-serif;
+ --pf-t--global--font--family--200: "Red Hat Display", "RedHatDisplay", "Noto Sans Arabic", "Noto Sans Hebrew", "Noto Sans JP", "Noto Sans KR", "Noto Sans Malayalam", "Noto Sans SC", "Noto Sans TC", "Noto Sans Thai", Helvetica, Arial, sans-serif;
+ --pf-t--global--font--family--300: "Red Hat Mono", "RedHatMono", "Courier New", Courier, monospace;
+ --pf-t--global--font--line-height--100: 1.3;
+ --pf-t--global--font--line-height--200: 1.5;
+ --pf-t--global--font--size--100: 0.75rem;
+ --pf-t--global--font--size--200: 0.875rem;
+ --pf-t--global--font--size--300: 1rem;
+ --pf-t--global--font--size--400: 1.125rem;
+ --pf-t--global--font--size--500: 1.25rem;
+ --pf-t--global--font--size--600: 1.5rem;
+ --pf-t--global--font--size--700: 1.75rem;
+ --pf-t--global--font--size--800: 2.25rem;
+ --pf-t--global--font--weight--100: 400;
+ --pf-t--global--font--weight--200: 500;
+ --pf-t--global--font--weight--300: 500;
+ --pf-t--global--font--weight--400: 700;
+ --pf-t--global--icon--size--100: 0.75rem;
+ --pf-t--global--icon--size--200: 0.875rem;
+ --pf-t--global--icon--size--250: 1rem;
+ --pf-t--global--icon--size--300: 1.5rem;
+ --pf-t--global--icon--size--400: 3.5rem;
+ --pf-t--global--icon--size--500: 6rem;
+ --pf-t--global--spacer--100: 0.25rem;
+ --pf-t--global--spacer--200: 0.5rem;
+ --pf-t--global--spacer--300: 1rem;
+ --pf-t--global--spacer--400: 1.5rem;
+ --pf-t--global--spacer--500: 2rem;
+ --pf-t--global--spacer--600: 3rem;
+ --pf-t--global--spacer--700: 4rem;
+ --pf-t--global--spacer--800: 5rem;
+ --pf-t--global--text-decoration--line--100: none;
+ --pf-t--global--text-decoration--line--200: underline;
+ --pf-t--global--text-decoration--style--100: solid;
+ --pf-t--global--text-decoration--style--200: dashed;
+ --pf-t--global--timing-function--100: cubic-bezier(.4, 0, .7, .2);
+ --pf-t--global--timing-function--200: cubic-bezier(.4, 0, .2, 1);
+ --pf-t--global--timing-function--300: cubic-bezier(0, 0, .2, 1);
+ --pf-t--global--z-index--100: 100;
+ --pf-t--global--z-index--200: 200;
+ --pf-t--global--z-index--300: 300;
+ --pf-t--global--z-index--400: 400;
+ --pf-t--global--z-index--500: 500;
+ --pf-t--global--z-index--600: 600;
+ --pf-t--global--background--color--100: var(--pf-t--color--white);
+ --pf-t--global--background--color--200: var(--pf-t--color--gray--10);
+ --pf-t--global--background--color--300: var(--pf-t--color--gray--20);
+ --pf-t--global--background--color--400: var(--pf-t--color--gray--80);
+ --pf-t--global--background--color--450: var(--pf-t--color--gray--70);
+ --pf-t--global--background--color--action--plain--clicked: var(--pf-t--global--background--color--600);
+ --pf-t--global--background--color--action--plain--hover: var(--pf-t--global--background--color--600);
+ --pf-t--global--background--color--backdrop--default: var(--pf-t--global--background--color--500);
+ --pf-t--global--background--color--highlight--100: var(--pf-t--color--yellow--30);
+ --pf-t--global--background--color--highlight--200: var(--pf-t--color--yellow--40);
+ --pf-t--global--background--color--tertiary--default: var(--pf-t--global--background--color--600);
+ --pf-t--global--border--color--100: var(--pf-t--color--gray--30);
+ --pf-t--global--border--color--200: var(--pf-t--color--gray--40);
+ --pf-t--global--border--color--300: var(--pf-t--color--gray--50);
+ --pf-t--global--border--color--450: var(--pf-t--color--gray--60);
+ --pf-t--global--border--color--50: var(--pf-t--color--gray--20);
+ --pf-t--global--border--radius--large: var(--pf-t--global--border--radius--400);
+ --pf-t--global--border--radius--medium: var(--pf-t--global--border--radius--300);
+ --pf-t--global--border--radius--pill: var(--pf-t--global--border--radius--500);
+ --pf-t--global--border--radius--sharp: var(--pf-t--global--border--radius--0);
+ --pf-t--global--border--radius--small: var(--pf-t--global--border--radius--200);
+ --pf-t--global--border--radius--tiny: var(--pf-t--global--border--radius--100);
+ --pf-t--global--border--width--action--clicked: var(--pf-t--global--border--width--200);
+ --pf-t--global--border--width--action--default: var(--pf-t--global--border--width--100);
+ --pf-t--global--border--width--action--hover: var(--pf-t--global--border--width--200);
+ --pf-t--global--border--width--box--clicked: var(--pf-t--global--border--width--200);
+ --pf-t--global--border--width--box--default: var(--pf-t--global--border--width--100);
+ --pf-t--global--border--width--box--hover: var(--pf-t--global--border--width--100);
+ --pf-t--global--border--width--box--status--default: var(--pf-t--global--border--width--200);
+ --pf-t--global--border--width--box--status--read: var(--pf-t--global--border--width--100);
+ --pf-t--global--border--width--control--clicked: var(--pf-t--global--border--width--200);
+ --pf-t--global--border--width--control--default: var(--pf-t--global--border--width--100);
+ --pf-t--global--border--width--control--hover: var(--pf-t--global--border--width--100);
+ --pf-t--global--border--width--divider--clicked: var(--pf-t--global--border--width--100);
+ --pf-t--global--border--width--divider--default: var(--pf-t--global--border--width--100);
+ --pf-t--global--border--width--divider--hover: var(--pf-t--global--border--width--100);
+ --pf-t--global--border--width--extra-strong: var(--pf-t--global--border--width--300);
+ --pf-t--global--border--width--regular: var(--pf-t--global--border--width--100);
+ --pf-t--global--border--width--strong: var(--pf-t--global--border--width--200);
+ --pf-t--global--box-shadow--X--lg--bottom: var(--pf-t--global--box-shadow--X--400);
+ --pf-t--global--box-shadow--X--lg--default: var(--pf-t--global--box-shadow--X--400);
+ --pf-t--global--box-shadow--X--lg--left: var(--pf-t--global--box-shadow--X--50);
+ --pf-t--global--box-shadow--X--lg--right: var(--pf-t--global--box-shadow--X--800);
+ --pf-t--global--box-shadow--X--lg--top: var(--pf-t--global--box-shadow--X--400);
+ --pf-t--global--box-shadow--X--md--bottom: var(--pf-t--global--box-shadow--X--400);
+ --pf-t--global--box-shadow--X--md--default: var(--pf-t--global--box-shadow--X--400);
+ --pf-t--global--box-shadow--X--md--left: var(--pf-t--global--box-shadow--X--100);
+ --pf-t--global--box-shadow--X--md--right: var(--pf-t--global--box-shadow--X--700);
+ --pf-t--global--box-shadow--X--md--top: var(--pf-t--global--box-shadow--X--400);
+ --pf-t--global--box-shadow--X--sm--bottom: var(--pf-t--global--box-shadow--X--400);
+ --pf-t--global--box-shadow--X--sm--default: var(--pf-t--global--box-shadow--X--400);
+ --pf-t--global--box-shadow--X--sm--left: var(--pf-t--global--box-shadow--X--200);
+ --pf-t--global--box-shadow--X--sm--right: var(--pf-t--global--box-shadow--X--600);
+ --pf-t--global--box-shadow--X--sm--top: var(--pf-t--global--box-shadow--X--400);
+ --pf-t--global--box-shadow--Y--lg--bottom: var(--pf-t--global--box-shadow--Y--800);
+ --pf-t--global--box-shadow--Y--lg--default: var(--pf-t--global--box-shadow--Y--700);
+ --pf-t--global--box-shadow--Y--lg--left: var(--pf-t--global--box-shadow--Y--400);
+ --pf-t--global--box-shadow--Y--lg--right: var(--pf-t--global--box-shadow--Y--400);
+ --pf-t--global--box-shadow--Y--lg--top: var(--pf-t--global--box-shadow--Y--50);
+ --pf-t--global--box-shadow--Y--md--bottom: var(--pf-t--global--box-shadow--Y--700);
+ --pf-t--global--box-shadow--Y--md--default: var(--pf-t--global--box-shadow--Y--600);
+ --pf-t--global--box-shadow--Y--md--left: var(--pf-t--global--box-shadow--Y--400);
+ --pf-t--global--box-shadow--Y--md--right: var(--pf-t--global--box-shadow--Y--400);
+ --pf-t--global--box-shadow--Y--md--top: var(--pf-t--global--box-shadow--Y--100);
+ --pf-t--global--box-shadow--Y--sm--bottom: var(--pf-t--global--box-shadow--Y--600);
+ --pf-t--global--box-shadow--Y--sm--default: var(--pf-t--global--box-shadow--Y--500);
+ --pf-t--global--box-shadow--Y--sm--left: var(--pf-t--global--box-shadow--Y--400);
+ --pf-t--global--box-shadow--Y--sm--right: var(--pf-t--global--box-shadow--Y--400);
+ --pf-t--global--box-shadow--Y--sm--top: var(--pf-t--global--box-shadow--Y--200);
+ --pf-t--global--box-shadow--blur--lg: var(--pf-t--global--box-shadow--blur--300);
+ --pf-t--global--box-shadow--blur--md: var(--pf-t--global--box-shadow--blur--200);
+ --pf-t--global--box-shadow--blur--sm: var(--pf-t--global--box-shadow--blur--100);
+ --pf-t--global--box-shadow--color--lg--default: var(--pf-t--global--box-shadow--color--100);
+ --pf-t--global--box-shadow--color--lg--directional: var(--pf-t--global--box-shadow--color--200);
+ --pf-t--global--box-shadow--color--md--default: var(--pf-t--global--box-shadow--color--100);
+ --pf-t--global--box-shadow--color--md--directional: var(--pf-t--global--box-shadow--color--100);
+ --pf-t--global--box-shadow--color--sm--default: var(--pf-t--global--box-shadow--color--100);
+ --pf-t--global--box-shadow--color--sm--directional: var(--pf-t--global--box-shadow--color--200);
+ --pf-t--global--box-shadow--spread--lg--default: var(--pf-t--global--box-shadow--spread--100);
+ --pf-t--global--box-shadow--spread--lg--directional: var(--pf-t--global--box-shadow--spread--400);
+ --pf-t--global--box-shadow--spread--md--default: var(--pf-t--global--box-shadow--spread--100);
+ --pf-t--global--box-shadow--spread--md--directional: var(--pf-t--global--box-shadow--spread--300);
+ --pf-t--global--box-shadow--spread--sm--default: var(--pf-t--global--box-shadow--spread--100);
+ --pf-t--global--box-shadow--spread--sm--directional: var(--pf-t--global--box-shadow--spread--200);
+ --pf-t--global--breakpoint--2xl: var(--pf-t--global--breakpoint--600);
+ --pf-t--global--breakpoint--height--2xl: var(--pf-t--global--breakpoint--550);
+ --pf-t--global--breakpoint--height--lg: var(--pf-t--global--breakpoint--300);
+ --pf-t--global--breakpoint--height--md: var(--pf-t--global--breakpoint--250);
+ --pf-t--global--breakpoint--height--sm: var(--pf-t--global--breakpoint--100);
+ --pf-t--global--breakpoint--height--xl: var(--pf-t--global--breakpoint--350);
+ --pf-t--global--breakpoint--lg: var(--pf-t--global--breakpoint--400);
+ --pf-t--global--breakpoint--md: var(--pf-t--global--breakpoint--300);
+ --pf-t--global--breakpoint--sm: var(--pf-t--global--breakpoint--200);
+ --pf-t--global--breakpoint--xl: var(--pf-t--global--breakpoint--500);
+ --pf-t--global--breakpoint--xs: var(--pf-t--global--breakpoint--100);
+ --pf-t--global--color--brand--100: var(--pf-t--color--blue--40);
+ --pf-t--global--color--brand--200: var(--pf-t--color--blue--50);
+ --pf-t--global--color--brand--300: var(--pf-t--color--blue--60);
+ --pf-t--global--color--brand--400: var(--pf-t--color--blue--70);
+ --pf-t--global--color--brand--500: var(--pf-t--color--blue--80);
+ --pf-t--global--color--disabled--100: var(--pf-t--color--gray--30);
+ --pf-t--global--color--disabled--200: var(--pf-t--color--gray--40);
+ --pf-t--global--color--disabled--300: var(--pf-t--color--gray--60);
+ --pf-t--global--color--favorite--100: var(--pf-t--color--yellow--30);
+ --pf-t--global--color--favorite--200: var(--pf-t--color--yellow--40);
+ --pf-t--global--color--favorite--300: var(--pf-t--color--yellow--70);
+ --pf-t--global--color--favorite--400: var(--pf-t--color--yellow--80);
+ --pf-t--global--color--nonstatus--blue--100: var(--pf-t--color--blue--20);
+ --pf-t--global--color--nonstatus--blue--200: var(--pf-t--color--blue--30);
+ --pf-t--global--color--nonstatus--blue--300: var(--pf-t--color--blue--40);
+ --pf-t--global--color--nonstatus--blue--400: var(--pf-t--color--blue--60);
+ --pf-t--global--color--nonstatus--blue--500: var(--pf-t--color--blue--70);
+ --pf-t--global--color--nonstatus--gray--100: var(--pf-t--color--gray--20);
+ --pf-t--global--color--nonstatus--gray--200: var(--pf-t--color--gray--30);
+ --pf-t--global--color--nonstatus--gray--300: var(--pf-t--color--gray--40);
+ --pf-t--global--color--nonstatus--gray--400: var(--pf-t--color--gray--60);
+ --pf-t--global--color--nonstatus--gray--50: var(--pf-t--color--gray--10);
+ --pf-t--global--color--nonstatus--gray--500: var(--pf-t--color--gray--70);
+ --pf-t--global--color--nonstatus--green--100: var(--pf-t--color--green--20);
+ --pf-t--global--color--nonstatus--green--200: var(--pf-t--color--green--30);
+ --pf-t--global--color--nonstatus--green--300: var(--pf-t--color--green--40);
+ --pf-t--global--color--nonstatus--green--500: var(--pf-t--color--green--70);
+ --pf-t--global--color--nonstatus--orange--100: var(--pf-t--color--orange--20);
+ --pf-t--global--color--nonstatus--orange--200: var(--pf-t--color--orange--30);
+ --pf-t--global--color--nonstatus--orange--300: var(--pf-t--color--orange--40);
+ --pf-t--global--color--nonstatus--orange--400: var(--pf-t--color--orange--60);
+ --pf-t--global--color--nonstatus--orange--500: var(--pf-t--color--orange--70);
+ --pf-t--global--color--nonstatus--orangered--100: var(--pf-t--color--red-orange--20);
+ --pf-t--global--color--nonstatus--orangered--200: var(--pf-t--color--red-orange--30);
+ --pf-t--global--color--nonstatus--orangered--300: var(--pf-t--color--red-orange--40);
+ --pf-t--global--color--nonstatus--orangered--400: var(--pf-t--color--red-orange--60);
+ --pf-t--global--color--nonstatus--orangered--500: var(--pf-t--color--red-orange--70);
+ --pf-t--global--color--nonstatus--purple--100: var(--pf-t--color--purple--20);
+ --pf-t--global--color--nonstatus--purple--200: var(--pf-t--color--purple--30);
+ --pf-t--global--color--nonstatus--purple--300: var(--pf-t--color--purple--40);
+ --pf-t--global--color--nonstatus--purple--400: var(--pf-t--color--purple--50);
+ --pf-t--global--color--nonstatus--purple--500: var(--pf-t--color--purple--60);
+ --pf-t--global--color--nonstatus--red--100: var(--pf-t--color--red--20);
+ --pf-t--global--color--nonstatus--red--200: var(--pf-t--color--red--30);
+ --pf-t--global--color--nonstatus--red--300: var(--pf-t--color--red--40);
+ --pf-t--global--color--nonstatus--red--400: var(--pf-t--color--red--60);
+ --pf-t--global--color--nonstatus--red--500: var(--pf-t--color--red--70);
+ --pf-t--global--color--nonstatus--teal--100: var(--pf-t--color--teal--20);
+ --pf-t--global--color--nonstatus--teal--200: var(--pf-t--color--teal--30);
+ --pf-t--global--color--nonstatus--teal--300: var(--pf-t--color--teal--40);
+ --pf-t--global--color--nonstatus--teal--400: var(--pf-t--color--teal--70);
+ --pf-t--global--color--nonstatus--teal--500: var(--pf-t--color--teal--80);
+ --pf-t--global--color--nonstatus--yellow--100: var(--pf-t--color--yellow--20);
+ --pf-t--global--color--nonstatus--yellow--200: var(--pf-t--color--yellow--30);
+ --pf-t--global--color--nonstatus--yellow--300: var(--pf-t--color--yellow--40);
+ --pf-t--global--color--nonstatus--yellow--400: var(--pf-t--color--yellow--70);
+ --pf-t--global--color--nonstatus--yellow--500: var(--pf-t--color--yellow--80);
+ --pf-t--global--color--severity--critical--100: var(--pf-t--color--red-orange--60);
+ --pf-t--global--color--severity--important--100: var(--pf-t--color--orange--50);
+ --pf-t--global--color--severity--important--200: var(--pf-t--color--orange--60);
+ --pf-t--global--color--severity--minor--100: var(--pf-t--color--gray--50);
+ --pf-t--global--color--severity--minor--200: var(--pf-t--color--gray--80);
+ --pf-t--global--color--severity--moderate--100: var(--pf-t--color--yellow--40);
+ --pf-t--global--color--severity--moderate--200: var(--pf-t--color--yellow--70);
+ --pf-t--global--color--severity--none--100: var(--pf-t--color--blue--40);
+ --pf-t--global--color--severity--none--200: var(--pf-t--color--blue--60);
+ --pf-t--global--color--severity--undefined--100: var(--pf-t--color--gray--30);
+ --pf-t--global--color--severity--undefined--200: var(--pf-t--color--gray--60);
+ --pf-t--global--color--status--custom--100: var(--pf-t--color--teal--60);
+ --pf-t--global--color--status--custom--200: var(--pf-t--color--teal--70);
+ --pf-t--global--color--status--custom--300: var(--pf-t--color--teal--80);
+ --pf-t--global--color--status--danger--100: var(--pf-t--color--red-orange--60);
+ --pf-t--global--color--status--danger--200: var(--pf-t--color--red-orange--70);
+ --pf-t--global--color--status--info--100: var(--pf-t--color--purple--50);
+ --pf-t--global--color--status--info--200: var(--pf-t--color--purple--60);
+ --pf-t--global--color--status--info--300: var(--pf-t--color--purple--70);
+ --pf-t--global--color--status--success--100: var(--pf-t--color--green--60);
+ --pf-t--global--color--status--success--200: var(--pf-t--color--green--70);
+ --pf-t--global--color--status--warning--100: var(--pf-t--color--yellow--30);
+ --pf-t--global--color--status--warning--200: var(--pf-t--color--yellow--40);
+ --pf-t--global--color--status--warning--300: var(--pf-t--color--yellow--50);
+ --pf-t--global--color--status--warning--400: var(--pf-t--color--yellow--60);
+ --pf-t--global--color--status--warning--500: var(--pf-t--color--yellow--70);
+ --pf-t--global--color--status--warning--600: var(--pf-t--color--yellow--80);
+ --pf-t--global--font--family--body: var(--pf-t--global--font--family--100);
+ --pf-t--global--font--family--heading: var(--pf-t--global--font--family--200);
+ --pf-t--global--font--family--mono: var(--pf-t--global--font--family--300);
+ --pf-t--global--font--line-height--body: var(--pf-t--global--font--line-height--200);
+ --pf-t--global--font--line-height--heading: var(--pf-t--global--font--line-height--100);
+ --pf-t--global--font--size--2xl: var(--pf-t--global--font--size--600);
+ --pf-t--global--font--size--3xl: var(--pf-t--global--font--size--700);
+ --pf-t--global--font--size--4xl: var(--pf-t--global--font--size--800);
+ --pf-t--global--font--size--lg: var(--pf-t--global--font--size--400);
+ --pf-t--global--font--size--md: var(--pf-t--global--font--size--300);
+ --pf-t--global--font--size--sm: var(--pf-t--global--font--size--200);
+ --pf-t--global--font--size--xl: var(--pf-t--global--font--size--500);
+ --pf-t--global--font--size--xs: var(--pf-t--global--font--size--100);
+ --pf-t--global--font--weight--body--bold: var(--pf-t--global--font--weight--200);
+ --pf-t--global--font--weight--body--default: var(--pf-t--global--font--weight--100);
+ --pf-t--global--font--weight--heading--bold: var(--pf-t--global--font--weight--400);
+ --pf-t--global--font--weight--heading--default: var(--pf-t--global--font--weight--300);
+ --pf-t--global--icon--color--100: var(--pf-t--color--gray--90);
+ --pf-t--global--icon--color--150: var(--pf-t--color--gray--60);
+ --pf-t--global--icon--color--200: var(--pf-t--color--gray--50);
+ --pf-t--global--icon--color--300: var(--pf-t--color--white);
+ --pf-t--global--icon--size--2xl: var(--pf-t--global--icon--size--400);
+ --pf-t--global--icon--size--3xl: var(--pf-t--global--icon--size--500);
+ --pf-t--global--icon--size--lg: var(--pf-t--global--icon--size--250);
+ --pf-t--global--icon--size--md: var(--pf-t--global--icon--size--200);
+ --pf-t--global--icon--size--sm: var(--pf-t--global--icon--size--100);
+ --pf-t--global--icon--size--xl: var(--pf-t--global--icon--size--300);
+ --pf-t--global--motion--delay--default: var(--pf-t--global--delay--300);
+ --pf-t--global--motion--delay--long: var(--pf-t--global--delay--400);
+ --pf-t--global--motion--delay--none: var(--pf-t--global--delay--100);
+ --pf-t--global--motion--delay--short: var(--pf-t--global--delay--200);
+ --pf-t--global--motion--duration--2xl: var(--pf-t--global--duration--500);
+ --pf-t--global--motion--duration--3xl: var(--pf-t--global--duration--600);
+ --pf-t--global--motion--duration--lg: var(--pf-t--global--duration--300);
+ --pf-t--global--motion--duration--md: var(--pf-t--global--duration--200);
+ --pf-t--global--motion--duration--sm: var(--pf-t--global--duration--100);
+ --pf-t--global--motion--duration--xl: var(--pf-t--global--duration--400);
+ --pf-t--global--motion--duration--xs: var(--pf-t--global--duration--50);
+ --pf-t--global--motion--timing-function--accelerate: var(--pf-t--global--timing-function--100);
+ --pf-t--global--motion--timing-function--decelerate: var(--pf-t--global--timing-function--300);
+ --pf-t--global--motion--timing-function--default: var(--pf-t--global--timing-function--200);
+ --pf-t--global--spacer--2xl: var(--pf-t--global--spacer--600);
+ --pf-t--global--spacer--3xl: var(--pf-t--global--spacer--700);
+ --pf-t--global--spacer--4xl: var(--pf-t--global--spacer--800);
+ --pf-t--global--spacer--lg: var(--pf-t--global--spacer--400);
+ --pf-t--global--spacer--md: var(--pf-t--global--spacer--300);
+ --pf-t--global--spacer--sm: var(--pf-t--global--spacer--200);
+ --pf-t--global--spacer--xl: var(--pf-t--global--spacer--500);
+ --pf-t--global--spacer--xs: var(--pf-t--global--spacer--100);
+ --pf-t--global--text--color--100: var(--pf-t--color--gray--95);
+ --pf-t--global--text--color--200: var(--pf-t--color--gray--60);
+ --pf-t--global--text--color--250: var(--pf-t--color--gray--70);
+ --pf-t--global--text--color--300: var(--pf-t--color--white);
+ --pf-t--global--text--color--400: var(--pf-t--color--red-orange--40);
+ --pf-t--global--text--color--500: var(--pf-t--color--red-orange--70);
+ --pf-t--global--text--color--link--100: var(--pf-t--color--blue--50);
+ --pf-t--global--text--color--link--200: var(--pf-t--color--blue--60);
+ --pf-t--global--text--color--link--250: var(--pf-t--color--blue--70);
+ --pf-t--global--text--color--link--300: var(--pf-t--color--purple--50);
+ --pf-t--global--text--color--link--350: var(--pf-t--color--purple--60);
+ --pf-t--global--text-decoration--editable-text--line--default: var(--pf-t--global--text-decoration--line--200);
+ --pf-t--global--text-decoration--editable-text--line--hover: var(--pf-t--global--text-decoration--line--200);
+ --pf-t--global--text-decoration--editable-text--style--default: var(--pf-t--global--text-decoration--style--200);
+ --pf-t--global--text-decoration--editable-text--style--hover: var(--pf-t--global--text-decoration--style--200);
+ --pf-t--global--text-decoration--help-text--line--default: var(--pf-t--global--text-decoration--line--200);
+ --pf-t--global--text-decoration--help-text--line--hover: var(--pf-t--global--text-decoration--line--200);
+ --pf-t--global--text-decoration--help-text--style--default: var(--pf-t--global--text-decoration--style--200);
+ --pf-t--global--text-decoration--help-text--style--hover: var(--pf-t--global--text-decoration--style--200);
+ --pf-t--global--text-decoration--link--line--default: var(--pf-t--global--text-decoration--line--200);
+ --pf-t--global--text-decoration--link--line--hover: var(--pf-t--global--text-decoration--line--200);
+ --pf-t--global--text-decoration--link--style--default: var(--pf-t--global--text-decoration--style--100);
+ --pf-t--global--text-decoration--link--style--hover: var(--pf-t--global--text-decoration--style--100);
+ --pf-t--global--z-index--2xl: var(--pf-t--global--z-index--600);
+ --pf-t--global--z-index--lg: var(--pf-t--global--z-index--400);
+ --pf-t--global--z-index--md: var(--pf-t--global--z-index--300);
+ --pf-t--global--z-index--sm: var(--pf-t--global--z-index--200);
+ --pf-t--global--z-index--xl: var(--pf-t--global--z-index--500);
+ --pf-t--global--z-index--xs: var(--pf-t--global--z-index--100);
+ --pf-t--global--background--color--action--plain--alt--clicked: var(--pf-t--global--background--color--100);
+ --pf-t--global--background--color--action--plain--alt--hover: var(--pf-t--global--background--color--100);
+ --pf-t--global--background--color--control--read-only: var(--pf-t--global--background--color--200);
+ --pf-t--global--background--color--disabled--default: var(--pf-t--global--color--disabled--100);
+ --pf-t--global--background--color--floating--clicked: var(--pf-t--global--background--color--200);
+ --pf-t--global--background--color--floating--default: var(--pf-t--global--background--color--100);
+ --pf-t--global--background--color--floating--hover: var(--pf-t--global--background--color--200);
+ --pf-t--global--background--color--highlight--clicked: var(--pf-t--global--background--color--highlight--200);
+ --pf-t--global--background--color--highlight--default: var(--pf-t--global--background--color--highlight--100);
+ --pf-t--global--background--color--inverse--clicked: var(--pf-t--global--background--color--450);
+ --pf-t--global--background--color--inverse--default: var(--pf-t--global--background--color--400);
+ --pf-t--global--background--color--inverse--hover: var(--pf-t--global--background--color--450);
+ --pf-t--global--background--color--primary--clicked: var(--pf-t--global--background--color--200);
+ --pf-t--global--background--color--primary--default: var(--pf-t--global--background--color--100);
+ --pf-t--global--background--color--primary--hover: var(--pf-t--global--background--color--200);
+ --pf-t--global--background--color--secondary--clicked: var(--pf-t--global--background--color--300);
+ --pf-t--global--background--color--secondary--default: var(--pf-t--global--background--color--200);
+ --pf-t--global--background--color--secondary--hover: var(--pf-t--global--background--color--300);
+ --pf-t--global--border--color--clicked: var(--pf-t--global--color--brand--200);
+ --pf-t--global--border--color--control--read-only: var(--pf-t--global--border--color--50);
+ --pf-t--global--border--color--default: var(--pf-t--global--border--color--100);
+ --pf-t--global--border--color--disabled: var(--pf-t--global--color--disabled--200);
+ --pf-t--global--border--color--hover: var(--pf-t--global--color--brand--100);
+ --pf-t--global--border--color--nonstatus--blue--clicked: var(--pf-t--global--color--nonstatus--blue--300);
+ --pf-t--global--border--color--nonstatus--blue--default: var(--pf-t--global--color--nonstatus--blue--200);
+ --pf-t--global--border--color--nonstatus--blue--hover: var(--pf-t--global--color--nonstatus--blue--300);
+ --pf-t--global--border--color--nonstatus--gray--clicked: var(--pf-t--global--color--nonstatus--gray--300);
+ --pf-t--global--border--color--nonstatus--gray--default: var(--pf-t--global--color--nonstatus--gray--200);
+ --pf-t--global--border--color--nonstatus--gray--hover: var(--pf-t--global--color--nonstatus--gray--300);
+ --pf-t--global--border--color--nonstatus--green--clicked: var(--pf-t--global--color--nonstatus--green--300);
+ --pf-t--global--border--color--nonstatus--green--default: var(--pf-t--global--color--nonstatus--green--200);
+ --pf-t--global--border--color--nonstatus--green--hover: var(--pf-t--global--color--nonstatus--green--300);
+ --pf-t--global--border--color--nonstatus--orange--clicked: var(--pf-t--global--color--nonstatus--orange--300);
+ --pf-t--global--border--color--nonstatus--orange--default: var(--pf-t--global--color--nonstatus--orange--200);
+ --pf-t--global--border--color--nonstatus--orange--hover: var(--pf-t--global--color--nonstatus--orange--300);
+ --pf-t--global--border--color--nonstatus--orangered--clicked: var(--pf-t--global--color--nonstatus--orangered--300);
+ --pf-t--global--border--color--nonstatus--orangered--default: var(--pf-t--global--color--nonstatus--orangered--200);
+ --pf-t--global--border--color--nonstatus--orangered--hover: var(--pf-t--global--color--nonstatus--orangered--300);
+ --pf-t--global--border--color--nonstatus--purple--clicked: var(--pf-t--global--color--nonstatus--purple--300);
+ --pf-t--global--border--color--nonstatus--purple--default: var(--pf-t--global--color--nonstatus--purple--200);
+ --pf-t--global--border--color--nonstatus--purple--hover: var(--pf-t--global--color--nonstatus--purple--300);
+ --pf-t--global--border--color--nonstatus--red--clicked: var(--pf-t--global--color--nonstatus--red--300);
+ --pf-t--global--border--color--nonstatus--red--default: var(--pf-t--global--color--nonstatus--red--200);
+ --pf-t--global--border--color--nonstatus--red--hover: var(--pf-t--global--color--nonstatus--red--300);
+ --pf-t--global--border--color--nonstatus--teal--clicked: var(--pf-t--global--color--nonstatus--teal--300);
+ --pf-t--global--border--color--nonstatus--teal--default: var(--pf-t--global--color--nonstatus--teal--200);
+ --pf-t--global--border--color--nonstatus--teal--hover: var(--pf-t--global--color--nonstatus--teal--300);
+ --pf-t--global--border--color--nonstatus--yellow--clicked: var(--pf-t--global--color--nonstatus--yellow--300);
+ --pf-t--global--border--color--nonstatus--yellow--default: var(--pf-t--global--color--nonstatus--yellow--200);
+ --pf-t--global--border--color--nonstatus--yellow--hover: var(--pf-t--global--color--nonstatus--yellow--300);
+ --pf-t--global--border--color--on-secondary: var(--pf-t--global--border--color--300);
+ --pf-t--global--border--color--status--warning--clicked: var(--pf-t--global--color--status--warning--300);
+ --pf-t--global--border--color--status--warning--default: var(--pf-t--global--color--status--warning--200);
+ --pf-t--global--border--color--status--warning--hover: var(--pf-t--global--color--status--warning--300);
+ --pf-t--global--color--brand--clicked: var(--pf-t--global--color--brand--300);
+ --pf-t--global--color--brand--default: var(--pf-t--global--color--brand--200);
+ --pf-t--global--color--brand--hover: var(--pf-t--global--color--brand--300);
+ --pf-t--global--color--favorite--clicked: var(--pf-t--global--color--favorite--200);
+ --pf-t--global--color--favorite--default: var(--pf-t--global--color--favorite--100);
+ --pf-t--global--color--favorite--hover: var(--pf-t--global--color--favorite--200);
+ --pf-t--global--color--nonstatus--blue--clicked: var(--pf-t--global--color--nonstatus--blue--200);
+ --pf-t--global--color--nonstatus--blue--default: var(--pf-t--global--color--nonstatus--blue--100);
+ --pf-t--global--color--nonstatus--blue--hover: var(--pf-t--global--color--nonstatus--blue--200);
+ --pf-t--global--color--nonstatus--gray--clicked: var(--pf-t--global--color--nonstatus--gray--200);
+ --pf-t--global--color--nonstatus--gray--default: var(--pf-t--global--color--nonstatus--gray--100);
+ --pf-t--global--color--nonstatus--gray--hover: var(--pf-t--global--color--nonstatus--gray--200);
+ --pf-t--global--color--nonstatus--green--clicked: var(--pf-t--global--color--nonstatus--green--200);
+ --pf-t--global--color--nonstatus--green--default: var(--pf-t--global--color--nonstatus--green--100);
+ --pf-t--global--color--nonstatus--green--hover: var(--pf-t--global--color--nonstatus--green--200);
+ --pf-t--global--color--nonstatus--orange--clicked: var(--pf-t--global--color--nonstatus--orange--200);
+ --pf-t--global--color--nonstatus--orange--default: var(--pf-t--global--color--nonstatus--orange--100);
+ --pf-t--global--color--nonstatus--orange--hover: var(--pf-t--global--color--nonstatus--orange--200);
+ --pf-t--global--color--nonstatus--orangered--clicked: var(--pf-t--global--color--nonstatus--orangered--200);
+ --pf-t--global--color--nonstatus--orangered--default: var(--pf-t--global--color--nonstatus--orangered--100);
+ --pf-t--global--color--nonstatus--orangered--hover: var(--pf-t--global--color--nonstatus--orangered--200);
+ --pf-t--global--color--nonstatus--purple--clicked: var(--pf-t--global--color--nonstatus--purple--200);
+ --pf-t--global--color--nonstatus--purple--default: var(--pf-t--global--color--nonstatus--purple--100);
+ --pf-t--global--color--nonstatus--purple--hover: var(--pf-t--global--color--nonstatus--purple--200);
+ --pf-t--global--color--nonstatus--red--clicked: var(--pf-t--global--color--nonstatus--red--200);
+ --pf-t--global--color--nonstatus--red--default: var(--pf-t--global--color--nonstatus--red--100);
+ --pf-t--global--color--nonstatus--red--hover: var(--pf-t--global--color--nonstatus--red--200);
+ --pf-t--global--color--nonstatus--teal--clicked: var(--pf-t--global--color--nonstatus--teal--200);
+ --pf-t--global--color--nonstatus--teal--default: var(--pf-t--global--color--nonstatus--teal--100);
+ --pf-t--global--color--nonstatus--teal--hover: var(--pf-t--global--color--nonstatus--teal--200);
+ --pf-t--global--color--nonstatus--yellow--clicked: var(--pf-t--global--color--nonstatus--yellow--200);
+ --pf-t--global--color--nonstatus--yellow--default: var(--pf-t--global--color--nonstatus--yellow--100);
+ --pf-t--global--color--nonstatus--yellow--hover: var(--pf-t--global--color--nonstatus--yellow--200);
+ --pf-t--global--color--status--custom--clicked: var(--pf-t--global--color--status--custom--200);
+ --pf-t--global--color--status--custom--default: var(--pf-t--global--color--status--custom--100);
+ --pf-t--global--color--status--custom--hover: var(--pf-t--global--color--status--custom--200);
+ --pf-t--global--color--status--danger--clicked: var(--pf-t--global--color--status--danger--200);
+ --pf-t--global--color--status--danger--default: var(--pf-t--global--color--status--danger--100);
+ --pf-t--global--color--status--danger--hover: var(--pf-t--global--color--status--danger--200);
+ --pf-t--global--color--status--info--clicked: var(--pf-t--global--color--status--info--200);
+ --pf-t--global--color--status--info--default: var(--pf-t--global--color--status--info--100);
+ --pf-t--global--color--status--info--hover: var(--pf-t--global--color--status--info--200);
+ --pf-t--global--color--status--success--clicked: var(--pf-t--global--color--status--success--200);
+ --pf-t--global--color--status--success--default: var(--pf-t--global--color--status--success--100);
+ --pf-t--global--color--status--success--hover: var(--pf-t--global--color--status--success--200);
+ --pf-t--global--color--status--warning--clicked: var(--pf-t--global--color--status--warning--200);
+ --pf-t--global--color--status--warning--default: var(--pf-t--global--color--status--warning--100);
+ --pf-t--global--color--status--warning--hover: var(--pf-t--global--color--status--warning--200);
+ --pf-t--global--font--size--body--default: var(--pf-t--global--font--size--sm);
+ --pf-t--global--font--size--body--lg: var(--pf-t--global--font--size--md);
+ --pf-t--global--font--size--body--sm: var(--pf-t--global--font--size--xs);
+ --pf-t--global--font--size--heading--h1: var(--pf-t--global--font--size--2xl);
+ --pf-t--global--font--size--heading--h2: var(--pf-t--global--font--size--xl);
+ --pf-t--global--font--size--heading--h3: var(--pf-t--global--font--size--lg);
+ --pf-t--global--font--size--heading--h4: var(--pf-t--global--font--size--md);
+ --pf-t--global--font--size--heading--h5: var(--pf-t--global--font--size--md);
+ --pf-t--global--font--size--heading--h6: var(--pf-t--global--font--size--md);
+ --pf-t--global--icon--color--disabled: var(--pf-t--global--color--disabled--200);
+ --pf-t--global--icon--color--inverse: var(--pf-t--global--icon--color--300);
+ --pf-t--global--icon--color--on-disabled: var(--pf-t--global--color--disabled--300);
+ --pf-t--global--icon--color--regular: var(--pf-t--global--icon--color--100);
+ --pf-t--global--icon--color--severity--critical--default: var(--pf-t--global--color--severity--critical--100);
+ --pf-t--global--icon--color--severity--important--default: var(--pf-t--global--color--severity--important--100);
+ --pf-t--global--icon--color--severity--minor--default: var(--pf-t--global--color--severity--minor--100);
+ --pf-t--global--icon--color--severity--moderate--default: var(--pf-t--global--color--severity--moderate--100);
+ --pf-t--global--icon--color--severity--none--default: var(--pf-t--global--color--severity--none--100);
+ --pf-t--global--icon--color--severity--undefined--default: var(--pf-t--global--color--severity--undefined--100);
+ --pf-t--global--icon--color--status--warning--clicked: var(--pf-t--global--color--status--warning--300);
+ --pf-t--global--icon--color--status--warning--default: var(--pf-t--global--color--status--warning--200);
+ --pf-t--global--icon--color--status--warning--hover: var(--pf-t--global--color--status--warning--300);
+ --pf-t--global--icon--color--subtle: var(--pf-t--global--icon--color--200);
+ --pf-t--global--icon--size--font--2xl: var(--pf-t--global--font--size--2xl);
+ --pf-t--global--icon--size--font--3xl: var(--pf-t--global--font--size--3xl);
+ --pf-t--global--icon--size--font--4xl: var(--pf-t--global--font--size--4xl);
+ --pf-t--global--icon--size--font--lg: var(--pf-t--global--font--size--lg);
+ --pf-t--global--icon--size--font--md: var(--pf-t--global--font--size--md);
+ --pf-t--global--icon--size--font--sm: var(--pf-t--global--font--size--sm);
+ --pf-t--global--icon--size--font--xl: var(--pf-t--global--font--size--xl);
+ --pf-t--global--icon--size--font--xs: var(--pf-t--global--font--size--xs);
+ --pf-t--global--motion--duration--fade--default: var(--pf-t--global--motion--duration--md);
+ --pf-t--global--motion--duration--fade--long: var(--pf-t--global--motion--duration--lg);
+ --pf-t--global--motion--duration--fade--short: var(--pf-t--global--motion--duration--sm);
+ --pf-t--global--motion--duration--icon--default: var(--pf-t--global--motion--duration--sm);
+ --pf-t--global--motion--duration--icon--long: var(--pf-t--global--motion--duration--md);
+ --pf-t--global--motion--duration--icon--short: var(--pf-t--global--motion--duration--xs);
+ --pf-t--global--motion--duration--slide-in--default: var(--pf-t--global--motion--duration--xl);
+ --pf-t--global--motion--duration--slide-in--long: var(--pf-t--global--motion--duration--2xl);
+ --pf-t--global--motion--duration--slide-in--short: var(--pf-t--global--motion--duration--lg);
+ --pf-t--global--motion--duration--slide-out--default: var(--pf-t--global--motion--duration--xl);
+ --pf-t--global--motion--duration--slide-out--long: var(--pf-t--global--motion--duration--2xl);
+ --pf-t--global--motion--duration--slide-out--short: var(--pf-t--global--motion--duration--lg);
+ --pf-t--global--spacer--action--horizontal--compact: var(--pf-t--global--spacer--md);
+ --pf-t--global--spacer--action--horizontal--default: var(--pf-t--global--spacer--lg);
+ --pf-t--global--spacer--action--horizontal--plain--compact: var(--pf-t--global--spacer--xs);
+ --pf-t--global--spacer--action--horizontal--plain--default: var(--pf-t--global--spacer--sm);
+ --pf-t--global--spacer--action--horizontal--spacious: var(--pf-t--global--spacer--xl);
+ --pf-t--global--spacer--control--horizontal--compact: var(--pf-t--global--spacer--sm);
+ --pf-t--global--spacer--control--horizontal--default: var(--pf-t--global--spacer--md);
+ --pf-t--global--spacer--control--horizontal--plain: var(--pf-t--global--spacer--sm);
+ --pf-t--global--spacer--control--horizontal--spacious: var(--pf-t--global--spacer--lg);
+ --pf-t--global--spacer--control--vertical--compact: var(--pf-t--global--spacer--xs);
+ --pf-t--global--spacer--control--vertical--default: var(--pf-t--global--spacer--sm);
+ --pf-t--global--spacer--control--vertical--plain: var(--pf-t--global--spacer--sm);
+ --pf-t--global--spacer--control--vertical--spacious: var(--pf-t--global--spacer--md);
+ --pf-t--global--spacer--gap--action-to-action--default: var(--pf-t--global--spacer--md);
+ --pf-t--global--spacer--gap--action-to-action--plain: var(--pf-t--global--spacer--xs);
+ --pf-t--global--spacer--gap--control-to-control--default: var(--pf-t--global--spacer--xs);
+ --pf-t--global--spacer--gap--group--horizontal: var(--pf-t--global--spacer--md);
+ --pf-t--global--spacer--gap--group--vertical: var(--pf-t--global--spacer--sm);
+ --pf-t--global--spacer--gap--group-to-group--horizontal--compact: var(--pf-t--global--spacer--sm);
+ --pf-t--global--spacer--gap--group-to-group--horizontal--default: var(--pf-t--global--spacer--2xl);
+ --pf-t--global--spacer--gap--group-to-group--vertical--compact: var(--pf-t--global--spacer--md);
+ --pf-t--global--spacer--gap--group-to-group--vertical--default: var(--pf-t--global--spacer--lg);
+ --pf-t--global--spacer--gap--text-to-element--compact: var(--pf-t--global--spacer--xs);
+ --pf-t--global--spacer--gap--text-to-element--default: var(--pf-t--global--spacer--sm);
+ --pf-t--global--spacer--gutter--default: var(--pf-t--global--spacer--md);
+ --pf-t--global--spacer--inset--page-chrome: var(--pf-t--global--spacer--lg);
+ --pf-t--global--text--color--disabled: var(--pf-t--global--color--disabled--200);
+ --pf-t--global--text--color--inverse: var(--pf-t--global--text--color--300);
+ --pf-t--global--text--color--link--default: var(--pf-t--global--text--color--link--100);
+ --pf-t--global--text--color--link--hover: var(--pf-t--global--text--color--link--200);
+ --pf-t--global--text--color--link--visited: var(--pf-t--global--text--color--link--300);
+ --pf-t--global--text--color--on-disabled: var(--pf-t--global--color--disabled--300);
+ --pf-t--global--text--color--on-highlight: var(--pf-t--global--text--color--100);
+ --pf-t--global--text--color--regular: var(--pf-t--global--text--color--100);
+ --pf-t--global--text--color--required: var(--pf-t--global--text--color--400);
+ --pf-t--global--text--color--status--warning--clicked: var(--pf-t--global--color--status--warning--300);
+ --pf-t--global--text--color--status--warning--default: var(--pf-t--global--color--status--warning--200);
+ --pf-t--global--text--color--status--warning--hover: var(--pf-t--global--color--status--warning--300);
+ --pf-t--global--text--color--subtle: var(--pf-t--global--text--color--200);
+ --pf-t--global--text-decoration--offset--default: var(--pf-t--global--spacer--xs);
+ --pf-t--global--text-decoration--width--default: var(--pf-t--global--border--width--regular);
+ --pf-t--global--background--color--control--default: var(--pf-t--global--background--color--primary--default);
+ --pf-t--global--border--color--alt: var(--pf-t--global--background--color--primary--default);
+ --pf-t--global--border--color--brand--clicked: var(--pf-t--global--color--brand--clicked);
+ --pf-t--global--border--color--brand--default: var(--pf-t--global--color--brand--default);
+ --pf-t--global--border--color--brand--hover: var(--pf-t--global--color--brand--hover);
+ --pf-t--global--border--color--status--custom--clicked: var(--pf-t--global--color--status--custom--clicked);
+ --pf-t--global--border--color--status--custom--default: var(--pf-t--global--color--status--custom--default);
+ --pf-t--global--border--color--status--custom--hover: var(--pf-t--global--color--status--custom--hover);
+ --pf-t--global--border--color--status--danger--clicked: var(--pf-t--global--color--status--danger--clicked);
+ --pf-t--global--border--color--status--danger--default: var(--pf-t--global--color--status--danger--default);
+ --pf-t--global--border--color--status--danger--hover: var(--pf-t--global--color--status--danger--hover);
+ --pf-t--global--border--color--status--info--clicked: var(--pf-t--global--color--status--info--clicked);
+ --pf-t--global--border--color--status--info--default: var(--pf-t--global--color--status--info--default);
+ --pf-t--global--border--color--status--info--hover: var(--pf-t--global--color--status--info--hover);
+ --pf-t--global--border--color--status--success--clicked: var(--pf-t--global--color--status--success--clicked);
+ --pf-t--global--border--color--status--success--default: var(--pf-t--global--color--status--success--default);
+ --pf-t--global--border--color--status--success--hover: var(--pf-t--global--color--status--success--hover);
+ --pf-t--global--color--status--read--on-primary: var(--pf-t--global--background--color--secondary--default);
+ --pf-t--global--color--status--unread--attention--clicked: var(--pf-t--global--color--status--danger--clicked);
+ --pf-t--global--color--status--unread--attention--default: var(--pf-t--global--color--status--danger--default);
+ --pf-t--global--color--status--unread--attention--hover: var(--pf-t--global--color--status--danger--hover);
+ --pf-t--global--color--status--unread--clicked: var(--pf-t--global--color--brand--clicked);
+ --pf-t--global--color--status--unread--default: var(--pf-t--global--color--brand--default);
+ --pf-t--global--color--status--unread--hover: var(--pf-t--global--color--brand--hover);
+ --pf-t--global--icon--color--brand--clicked: var(--pf-t--global--color--brand--clicked);
+ --pf-t--global--icon--color--brand--default: var(--pf-t--global--color--brand--default);
+ --pf-t--global--icon--color--brand--hover: var(--pf-t--global--color--brand--hover);
+ --pf-t--global--icon--color--favorite--clicked: var(--pf-t--global--color--favorite--clicked);
+ --pf-t--global--icon--color--favorite--default: var(--pf-t--global--color--favorite--default);
+ --pf-t--global--icon--color--favorite--hover: var(--pf-t--global--color--favorite--hover);
+ --pf-t--global--icon--color--nonstatus--on-blue--clicked: var(--pf-t--global--icon--color--regular);
+ --pf-t--global--icon--color--nonstatus--on-blue--default: var(--pf-t--global--icon--color--regular);
+ --pf-t--global--icon--color--nonstatus--on-blue--hover: var(--pf-t--global--icon--color--regular);
+ --pf-t--global--icon--color--nonstatus--on-gray--clicked: var(--pf-t--global--icon--color--regular);
+ --pf-t--global--icon--color--nonstatus--on-gray--default: var(--pf-t--global--icon--color--regular);
+ --pf-t--global--icon--color--nonstatus--on-gray--hover: var(--pf-t--global--icon--color--regular);
+ --pf-t--global--icon--color--nonstatus--on-green--clicked: var(--pf-t--global--icon--color--regular);
+ --pf-t--global--icon--color--nonstatus--on-green--default: var(--pf-t--global--icon--color--regular);
+ --pf-t--global--icon--color--nonstatus--on-green--hover: var(--pf-t--global--icon--color--regular);
+ --pf-t--global--icon--color--nonstatus--on-orange--clicked: var(--pf-t--global--icon--color--regular);
+ --pf-t--global--icon--color--nonstatus--on-orange--default: var(--pf-t--global--icon--color--regular);
+ --pf-t--global--icon--color--nonstatus--on-orange--hover: var(--pf-t--global--icon--color--regular);
+ --pf-t--global--icon--color--nonstatus--on-orangered--clicked: var(--pf-t--global--icon--color--regular);
+ --pf-t--global--icon--color--nonstatus--on-orangered--default: var(--pf-t--global--icon--color--regular);
+ --pf-t--global--icon--color--nonstatus--on-orangered--hover: var(--pf-t--global--icon--color--regular);
+ --pf-t--global--icon--color--nonstatus--on-purple--clicked: var(--pf-t--global--icon--color--regular);
+ --pf-t--global--icon--color--nonstatus--on-purple--default: var(--pf-t--global--icon--color--regular);
+ --pf-t--global--icon--color--nonstatus--on-purple--hover: var(--pf-t--global--icon--color--regular);
+ --pf-t--global--icon--color--nonstatus--on-red--clicked: var(--pf-t--global--icon--color--regular);
+ --pf-t--global--icon--color--nonstatus--on-red--default: var(--pf-t--global--icon--color--regular);
+ --pf-t--global--icon--color--nonstatus--on-red--hover: var(--pf-t--global--icon--color--regular);
+ --pf-t--global--icon--color--nonstatus--on-teal--clicked: var(--pf-t--global--icon--color--regular);
+ --pf-t--global--icon--color--nonstatus--on-teal--default: var(--pf-t--global--icon--color--regular);
+ --pf-t--global--icon--color--nonstatus--on-teal--hover: var(--pf-t--global--icon--color--regular);
+ --pf-t--global--icon--color--nonstatus--on-yellow--clicked: var(--pf-t--global--icon--color--regular);
+ --pf-t--global--icon--color--nonstatus--on-yellow--default: var(--pf-t--global--icon--color--regular);
+ --pf-t--global--icon--color--nonstatus--on-yellow--hover: var(--pf-t--global--icon--color--regular);
+ --pf-t--global--icon--color--on-brand--clicked: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--on-brand--default: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--on-brand--hover: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--custom--clicked: var(--pf-t--global--color--status--custom--clicked);
+ --pf-t--global--icon--color--status--custom--default: var(--pf-t--global--color--status--custom--default);
+ --pf-t--global--icon--color--status--custom--hover: var(--pf-t--global--color--status--custom--hover);
+ --pf-t--global--icon--color--status--danger--clicked: var(--pf-t--global--color--status--danger--clicked);
+ --pf-t--global--icon--color--status--danger--default: var(--pf-t--global--color--status--danger--default);
+ --pf-t--global--icon--color--status--danger--hover: var(--pf-t--global--color--status--danger--hover);
+ --pf-t--global--icon--color--status--info--clicked: var(--pf-t--global--color--status--info--clicked);
+ --pf-t--global--icon--color--status--info--default: var(--pf-t--global--color--status--info--default);
+ --pf-t--global--icon--color--status--info--hover: var(--pf-t--global--color--status--info--hover);
+ --pf-t--global--icon--color--status--on-custom--clicked: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--on-custom--default: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--on-custom--hover: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--on-danger--clicked: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--on-danger--default: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--on-danger--hover: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--on-info--clicked: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--on-info--default: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--on-info--hover: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--on-success--clicked: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--on-success--default: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--on-success--hover: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--on-warning--clicked: var(--pf-t--global--icon--color--regular);
+ --pf-t--global--icon--color--status--on-warning--default: var(--pf-t--global--icon--color--regular);
+ --pf-t--global--icon--color--status--on-warning--hover: var(--pf-t--global--icon--color--regular);
+ --pf-t--global--icon--color--status--success--clicked: var(--pf-t--global--color--status--success--clicked);
+ --pf-t--global--icon--color--status--success--default: var(--pf-t--global--color--status--success--default);
+ --pf-t--global--icon--color--status--success--hover: var(--pf-t--global--color--status--success--hover);
+ --pf-t--global--icon--color--status--unread--on-attention--clicked: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--unread--on-attention--default: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--unread--on-attention--hover: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--unread--on-default--clicked: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--unread--on-default--default: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--unread--on-default--hover: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--size--font--body--default: var(--pf-t--global--font--size--body--default);
+ --pf-t--global--icon--size--font--body--lg: var(--pf-t--global--font--size--body--lg);
+ --pf-t--global--icon--size--font--body--sm: var(--pf-t--global--font--size--body--sm);
+ --pf-t--global--icon--size--font--heading--h1: var(--pf-t--global--font--size--heading--h1);
+ --pf-t--global--icon--size--font--heading--h2: var(--pf-t--global--font--size--heading--h2);
+ --pf-t--global--icon--size--font--heading--h3: var(--pf-t--global--font--size--heading--h3);
+ --pf-t--global--icon--size--font--heading--h4: var(--pf-t--global--font--size--heading--h4);
+ --pf-t--global--icon--size--font--heading--h5: var(--pf-t--global--font--size--heading--h5);
+ --pf-t--global--icon--size--font--heading--h6: var(--pf-t--global--font--size--heading--h6);
+ --pf-t--global--text--color--brand--clicked: var(--pf-t--global--color--brand--clicked);
+ --pf-t--global--text--color--brand--default: var(--pf-t--global--color--brand--default);
+ --pf-t--global--text--color--brand--hover: var(--pf-t--global--color--brand--hover);
+ --pf-t--global--text--color--nonstatus--on-blue--clicked: var(--pf-t--global--text--color--regular);
+ --pf-t--global--text--color--nonstatus--on-blue--default: var(--pf-t--global--text--color--regular);
+ --pf-t--global--text--color--nonstatus--on-blue--hover: var(--pf-t--global--text--color--regular);
+ --pf-t--global--text--color--nonstatus--on-gray--clicked: var(--pf-t--global--text--color--regular);
+ --pf-t--global--text--color--nonstatus--on-gray--default: var(--pf-t--global--text--color--regular);
+ --pf-t--global--text--color--nonstatus--on-gray--hover: var(--pf-t--global--text--color--regular);
+ --pf-t--global--text--color--nonstatus--on-green--clicked: var(--pf-t--global--text--color--regular);
+ --pf-t--global--text--color--nonstatus--on-green--default: var(--pf-t--global--text--color--regular);
+ --pf-t--global--text--color--nonstatus--on-green--hover: var(--pf-t--global--text--color--regular);
+ --pf-t--global--text--color--nonstatus--on-orange--clicked: var(--pf-t--global--text--color--regular);
+ --pf-t--global--text--color--nonstatus--on-orange--default: var(--pf-t--global--text--color--regular);
+ --pf-t--global--text--color--nonstatus--on-orange--hover: var(--pf-t--global--text--color--regular);
+ --pf-t--global--text--color--nonstatus--on-orangered--clicked: var(--pf-t--global--text--color--regular);
+ --pf-t--global--text--color--nonstatus--on-orangered--default: var(--pf-t--global--text--color--regular);
+ --pf-t--global--text--color--nonstatus--on-orangered--hover: var(--pf-t--global--text--color--regular);
+ --pf-t--global--text--color--nonstatus--on-purple--clicked: var(--pf-t--global--text--color--regular);
+ --pf-t--global--text--color--nonstatus--on-purple--default: var(--pf-t--global--text--color--regular);
+ --pf-t--global--text--color--nonstatus--on-purple--hover: var(--pf-t--global--text--color--regular);
+ --pf-t--global--text--color--nonstatus--on-red--clicked: var(--pf-t--global--text--color--regular);
+ --pf-t--global--text--color--nonstatus--on-red--default: var(--pf-t--global--text--color--regular);
+ --pf-t--global--text--color--nonstatus--on-red--hover: var(--pf-t--global--text--color--regular);
+ --pf-t--global--text--color--nonstatus--on-teal--clicked: var(--pf-t--global--text--color--regular);
+ --pf-t--global--text--color--nonstatus--on-teal--default: var(--pf-t--global--text--color--regular);
+ --pf-t--global--text--color--nonstatus--on-teal--hover: var(--pf-t--global--text--color--regular);
+ --pf-t--global--text--color--nonstatus--on-yellow--clicked: var(--pf-t--global--text--color--regular);
+ --pf-t--global--text--color--nonstatus--on-yellow--default: var(--pf-t--global--text--color--regular);
+ --pf-t--global--text--color--nonstatus--on-yellow--hover: var(--pf-t--global--text--color--regular);
+ --pf-t--global--text--color--on-brand--clicked: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--on-brand--default: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--on-brand--hover: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--placeholder: var(--pf-t--global--text--color--subtle);
+ --pf-t--global--text--color--status--custom--clicked: var(--pf-t--global--color--status--custom--clicked);
+ --pf-t--global--text--color--status--custom--default: var(--pf-t--global--color--status--custom--default);
+ --pf-t--global--text--color--status--custom--hover: var(--pf-t--global--color--status--custom--hover);
+ --pf-t--global--text--color--status--danger--clicked: var(--pf-t--global--color--status--danger--clicked);
+ --pf-t--global--text--color--status--danger--default: var(--pf-t--global--color--status--danger--default);
+ --pf-t--global--text--color--status--danger--hover: var(--pf-t--global--color--status--danger--hover);
+ --pf-t--global--text--color--status--info--clicked: var(--pf-t--global--color--status--info--clicked);
+ --pf-t--global--text--color--status--info--default: var(--pf-t--global--color--status--info--default);
+ --pf-t--global--text--color--status--info--hover: var(--pf-t--global--color--status--info--hover);
+ --pf-t--global--text--color--status--on-custom--clicked: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--status--on-custom--default: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--status--on-custom--hover: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--status--on-danger--clicked: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--text--color--status--on-danger--default: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--status--on-danger--hover: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--status--on-info--clicked: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--status--on-info--default: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--status--on-info--hover: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--status--on-success--clicked: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--status--on-success--default: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--status--on-success--hover: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--status--on-warning--clicked: var(--pf-t--global--text--color--regular);
+ --pf-t--global--text--color--status--on-warning--default: var(--pf-t--global--text--color--regular);
+ --pf-t--global--text--color--status--on-warning--hover: var(--pf-t--global--text--color--regular);
+ --pf-t--global--text--color--status--success--clicked: var(--pf-t--global--color--status--success--clicked);
+ --pf-t--global--text--color--status--success--default: var(--pf-t--global--color--status--success--default);
+ --pf-t--global--text--color--status--success--hover: var(--pf-t--global--color--status--success--hover);
+ --pf-t--global--text--color--status--unread--on-attention--clicked: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--status--unread--on-attention--default: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--status--unread--on-attention--hover: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--status--unread--on-default--clicked: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--status--unread--on-default--default: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--status--unread--on-default--hover: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--color--status--read--on-secondary: var(--pf-t--global--background--color--control--default);
+ --pf-t--global--font--size--heading--xs: var(--pf-t--global--font--size--md);
+ --pf-t--global--font--size--heading--sm: var(--pf-t--global--font--size--lg);
+ --pf-t--global--font--size--heading--md: var(--pf-t--global--font--size--xl);
+ --pf-t--global--font--size--heading--lg: var(--pf-t--global--font--size--2xl);
+ --pf-t--global--font--size--heading--xl: var(--pf-t--global--font--size--3xl);
+ --pf-t--global--font--size--heading--2xl: var(--pf-t--global--font--size--4xl);
+ --pf-t--global--font--family--body--legacy: redhattext, helvetica, arial, sans-serif;
+ --pf-t--global--font--family--heading--legacy: redhatdisplay, helvetica, arial, sans-serif;
+ --pf-t--global--font--family--mono--legacy: redhatmono, liberationmono, consolas, sfmono-regular, menlo, monaco, courier new, monospace;
+ --pf-t--global--font--weight--body--legacy: 400;
+ --pf-t--global--font--weight--body--bold--legacy: 700;
+ --pf-t--global--font--weight--heading--legacy: 400;
+ --pf-t--global--font--weight--heading--bold--legacy: 700;
+ --pf-t--global--box-shadow--sm:
+ var(--pf-t--global--box-shadow--X--sm--default)
+ var(--pf-t--global--box-shadow--Y--sm--default)
+ var(--pf-t--global--box-shadow--blur--sm)
+ var(--pf-t--global--box-shadow--spread--sm--default)
+ var(--pf-t--global--box-shadow--color--sm--default);
+ --pf-t--global--box-shadow--sm--top:
+ var(--pf-t--global--box-shadow--X--sm--top)
+ var(--pf-t--global--box-shadow--Y--sm--top)
+ var(--pf-t--global--box-shadow--blur--sm)
+ var(--pf-t--global--box-shadow--spread--sm--directional)
+ var(--pf-t--global--box-shadow--color--sm--directional);
+ --pf-t--global--box-shadow--sm--bottom:
+ var(--pf-t--global--box-shadow--X--sm--bottom)
+ var(--pf-t--global--box-shadow--Y--sm--bottom)
+ var(--pf-t--global--box-shadow--blur--sm)
+ var(--pf-t--global--box-shadow--spread--sm--directional)
+ var(--pf-t--global--box-shadow--color--sm--directional);
+ --pf-t--global--box-shadow--sm--left:
+ var(--pf-t--global--box-shadow--X--sm--left)
+ var(--pf-t--global--box-shadow--Y--sm--left)
+ var(--pf-t--global--box-shadow--blur--sm)
+ var(--pf-t--global--box-shadow--spread--sm--directional)
+ var(--pf-t--global--box-shadow--color--sm--directional);
+ --pf-t--global--box-shadow--sm--right:
+ var(--pf-t--global--box-shadow--X--sm--right)
+ var(--pf-t--global--box-shadow--Y--sm--right)
+ var(--pf-t--global--box-shadow--blur--sm)
+ var(--pf-t--global--box-shadow--spread--sm--directional)
+ var(--pf-t--global--box-shadow--color--sm--directional);
+ --pf-t--global--box-shadow--md:
+ var(--pf-t--global--box-shadow--X--md--default)
+ var(--pf-t--global--box-shadow--Y--md--default)
+ var(--pf-t--global--box-shadow--blur--md)
+ var(--pf-t--global--box-shadow--spread--md--default)
+ var(--pf-t--global--box-shadow--color--md--default);
+ --pf-t--global--box-shadow--md--top:
+ var(--pf-t--global--box-shadow--X--md--top)
+ var(--pf-t--global--box-shadow--Y--md--top)
+ var(--pf-t--global--box-shadow--blur--md)
+ var(--pf-t--global--box-shadow--spread--md--directional)
+ var(--pf-t--global--box-shadow--color--md--directional);
+ --pf-t--global--box-shadow--md--bottom:
+ var(--pf-t--global--box-shadow--X--md--bottom)
+ var(--pf-t--global--box-shadow--Y--md--bottom)
+ var(--pf-t--global--box-shadow--blur--md)
+ var(--pf-t--global--box-shadow--spread--md--directional)
+ var(--pf-t--global--box-shadow--color--md--directional);
+ --pf-t--global--box-shadow--md--left:
+ var(--pf-t--global--box-shadow--X--md--left)
+ var(--pf-t--global--box-shadow--Y--md--left)
+ var(--pf-t--global--box-shadow--blur--md)
+ var(--pf-t--global--box-shadow--spread--md--directional)
+ var(--pf-t--global--box-shadow--color--md--directional);
+ --pf-t--global--box-shadow--md--right:
+ var(--pf-t--global--box-shadow--X--md--right)
+ var(--pf-t--global--box-shadow--Y--md--right)
+ var(--pf-t--global--box-shadow--blur--md)
+ var(--pf-t--global--box-shadow--spread--md--directional)
+ var(--pf-t--global--box-shadow--color--md--directional);
+ --pf-t--global--box-shadow--lg:
+ var(--pf-t--global--box-shadow--X--lg--default)
+ var(--pf-t--global--box-shadow--Y--lg--default)
+ var(--pf-t--global--box-shadow--blur--lg)
+ var(--pf-t--global--box-shadow--spread--lg--default)
+ var(--pf-t--global--box-shadow--color--lg--default);
+ --pf-t--global--box-shadow--lg--top:
+ var(--pf-t--global--box-shadow--X--lg--top)
+ var(--pf-t--global--box-shadow--Y--lg--top)
+ var(--pf-t--global--box-shadow--blur--lg)
+ var(--pf-t--global--box-shadow--spread--lg--directional)
+ var(--pf-t--global--box-shadow--color--lg--directional);
+ --pf-t--global--box-shadow--lg--bottom:
+ var(--pf-t--global--box-shadow--X--lg--bottom)
+ var(--pf-t--global--box-shadow--Y--lg--bottom)
+ var(--pf-t--global--box-shadow--blur--lg)
+ var(--pf-t--global--box-shadow--spread--lg--directional)
+ var(--pf-t--global--box-shadow--color--lg--directional);
+ --pf-t--global--box-shadow--lg--left:
+ var(--pf-t--global--box-shadow--X--lg--left)
+ var(--pf-t--global--box-shadow--Y--lg--left)
+ var(--pf-t--global--box-shadow--blur--lg)
+ var(--pf-t--global--box-shadow--spread--lg--directional)
+ var(--pf-t--global--box-shadow--color--lg--directional);
+ --pf-t--global--box-shadow--lg--right:
+ var(--pf-t--global--box-shadow--X--lg--right)
+ var(--pf-t--global--box-shadow--Y--lg--right)
+ var(--pf-t--global--box-shadow--blur--lg)
+ var(--pf-t--global--box-shadow--spread--lg--directional)
+ var(--pf-t--global--box-shadow--color--lg--directional);
+ --pf-t--global--list-style: disc outside;
+ --pf-t--temp--dev--tbd: #BC11E0;
+}
+
+:root:where(.pf-v6-theme-dark) {
+ --pf-t--global--background--color--action--plain--default: rgba(0, 0, 0, 0.0000);
+ --pf-t--global--border--color--high-contrast: rgba(255, 255, 255, 0.0000);
+ --pf-t--global--dark--background--color--500: rgba(21, 21, 21, 0.8000);
+ --pf-t--global--dark--background--color--600: rgba(199, 199, 199, 0.1500);
+ --pf-t--global--dark--box-shadow--color--100: rgba(0, 0, 0, 0.5000);
+ --pf-t--global--dark--box-shadow--color--200: rgba(0, 0, 0, 0.7000);
+ --pf-t--global--background--color--action--plain--clicked: var(--pf-t--global--dark--background--color--600);
+ --pf-t--global--background--color--action--plain--hover: var(--pf-t--global--dark--background--color--600);
+ --pf-t--global--background--color--backdrop--default: var(--pf-t--global--dark--background--color--500);
+ --pf-t--global--background--color--tertiary--default: var(--pf-t--global--dark--background--color--600);
+ --pf-t--global--box-shadow--color--lg--default: var(--pf-t--global--dark--box-shadow--color--100);
+ --pf-t--global--box-shadow--color--lg--directional: var(--pf-t--global--dark--box-shadow--color--200);
+ --pf-t--global--box-shadow--color--md--default: var(--pf-t--global--dark--box-shadow--color--100);
+ --pf-t--global--box-shadow--color--md--directional: var(--pf-t--global--dark--box-shadow--color--200);
+ --pf-t--global--box-shadow--color--sm--default: var(--pf-t--global--dark--box-shadow--color--100);
+ --pf-t--global--box-shadow--color--sm--directional: var(--pf-t--global--dark--box-shadow--color--200);
+ --pf-t--global--dark--background--color--100: var(--pf-t--color--gray--95);
+ --pf-t--global--dark--background--color--200: var(--pf-t--color--gray--80);
+ --pf-t--global--dark--background--color--300: var(--pf-t--color--gray--70);
+ --pf-t--global--dark--background--color--400: var(--pf-t--color--gray--10);
+ --pf-t--global--dark--background--color--450: var(--pf-t--color--gray--20);
+ --pf-t--global--dark--background--color--highlight--100: var(--pf-t--color--yellow--20);
+ --pf-t--global--dark--background--color--highlight--200: var(--pf-t--color--yellow--30);
+ --pf-t--global--dark--border--color--100: var(--pf-t--color--gray--50);
+ --pf-t--global--dark--border--color--200: var(--pf-t--color--gray--40);
+ --pf-t--global--dark--border--color--50: var(--pf-t--color--gray--60);
+ --pf-t--global--dark--color--brand--100: var(--pf-t--color--blue--30);
+ --pf-t--global--dark--color--brand--200: var(--pf-t--color--blue--20);
+ --pf-t--global--dark--color--brand--300: var(--pf-t--color--blue--10);
+ --pf-t--global--dark--color--disabled--100: var(--pf-t--color--gray--40);
+ --pf-t--global--dark--color--disabled--200: var(--pf-t--color--gray--50);
+ --pf-t--global--dark--color--disabled--300: var(--pf-t--color--gray--70);
+ --pf-t--global--dark--color--disabled--400: var(--pf-t--color--gray--90);
+ --pf-t--global--dark--color--favorite--100: var(--pf-t--color--yellow--30);
+ --pf-t--global--dark--color--favorite--200: var(--pf-t--color--yellow--20);
+ --pf-t--global--dark--color--nonstatus--blue--100: var(--pf-t--color--blue--30);
+ --pf-t--global--dark--color--nonstatus--blue--200: var(--pf-t--color--blue--20);
+ --pf-t--global--dark--color--nonstatus--blue--300: var(--pf-t--color--blue--10);
+ --pf-t--global--dark--color--nonstatus--gray--100: var(--pf-t--color--gray--60);
+ --pf-t--global--dark--color--nonstatus--gray--200: var(--pf-t--color--gray--50);
+ --pf-t--global--dark--color--nonstatus--gray--300: var(--pf-t--color--gray--40);
+ --pf-t--global--dark--color--nonstatus--gray--50: var(--pf-t--color--gray--70);
+ --pf-t--global--dark--color--nonstatus--green--100: var(--pf-t--color--green--30);
+ --pf-t--global--dark--color--nonstatus--green--200: var(--pf-t--color--green--20);
+ --pf-t--global--dark--color--nonstatus--green--300: var(--pf-t--color--green--10);
+ --pf-t--global--dark--color--nonstatus--orange--100: var(--pf-t--color--orange--30);
+ --pf-t--global--dark--color--nonstatus--orange--200: var(--pf-t--color--orange--20);
+ --pf-t--global--dark--color--nonstatus--orange--300: var(--pf-t--color--orange--10);
+ --pf-t--global--dark--color--nonstatus--orangered--100: var(--pf-t--color--red-orange--30);
+ --pf-t--global--dark--color--nonstatus--orangered--200: var(--pf-t--color--red-orange--20);
+ --pf-t--global--dark--color--nonstatus--orangered--300: var(--pf-t--color--red-orange--10);
+ --pf-t--global--dark--color--nonstatus--purple--100: var(--pf-t--color--purple--30);
+ --pf-t--global--dark--color--nonstatus--purple--200: var(--pf-t--color--purple--20);
+ --pf-t--global--dark--color--nonstatus--purple--300: var(--pf-t--color--purple--10);
+ --pf-t--global--dark--color--nonstatus--red--100: var(--pf-t--color--red--30);
+ --pf-t--global--dark--color--nonstatus--red--200: var(--pf-t--color--red--20);
+ --pf-t--global--dark--color--nonstatus--red--300: var(--pf-t--color--red--10);
+ --pf-t--global--dark--color--nonstatus--teal--100: var(--pf-t--color--teal--30);
+ --pf-t--global--dark--color--nonstatus--teal--200: var(--pf-t--color--teal--20);
+ --pf-t--global--dark--color--nonstatus--teal--300: var(--pf-t--color--teal--10);
+ --pf-t--global--dark--color--nonstatus--yellow--100: var(--pf-t--color--yellow--30);
+ --pf-t--global--dark--color--nonstatus--yellow--200: var(--pf-t--color--yellow--20);
+ --pf-t--global--dark--color--nonstatus--yellow--300: var(--pf-t--color--yellow--10);
+ --pf-t--global--dark--color--severity--critical--100: var(--pf-t--color--red-orange--50);
+ --pf-t--global--dark--color--severity--critical--200: var(--pf-t--color--red-orange--40);
+ --pf-t--global--dark--color--severity--important--100: var(--pf-t--color--orange--40);
+ --pf-t--global--dark--color--severity--minor--100: var(--pf-t--color--gray--30);
+ --pf-t--global--dark--color--severity--moderate--100: var(--pf-t--color--yellow--30);
+ --pf-t--global--dark--color--severity--none--100: var(--pf-t--color--blue--30);
+ --pf-t--global--dark--color--severity--undefined--100: var(--pf-t--color--gray--40);
+ --pf-t--global--dark--color--status--custom--100: var(--pf-t--color--teal--40);
+ --pf-t--global--dark--color--status--custom--200: var(--pf-t--color--teal--30);
+ --pf-t--global--dark--color--status--custom--300: var(--pf-t--color--teal--20);
+ --pf-t--global--dark--color--status--danger--100: var(--pf-t--color--red-orange--50);
+ --pf-t--global--dark--color--status--danger--200: var(--pf-t--color--red-orange--40);
+ --pf-t--global--dark--color--status--danger--250: var(--pf-t--color--red-orange--30);
+ --pf-t--global--dark--color--status--danger--300: var(--pf-t--color--red-orange--20);
+ --pf-t--global--dark--color--status--info--100: var(--pf-t--color--purple--30);
+ --pf-t--global--dark--color--status--info--200: var(--pf-t--color--purple--20);
+ --pf-t--global--dark--color--status--info--300: var(--pf-t--color--purple--10);
+ --pf-t--global--dark--color--status--success--100: var(--pf-t--color--green--40);
+ --pf-t--global--dark--color--status--success--200: var(--pf-t--color--green--30);
+ --pf-t--global--dark--color--status--success--300: var(--pf-t--color--green--20);
+ --pf-t--global--dark--color--status--warning--100: var(--pf-t--color--yellow--30);
+ --pf-t--global--dark--color--status--warning--200: var(--pf-t--color--yellow--20);
+ --pf-t--global--dark--icon--color--100: var(--pf-t--color--gray--10);
+ --pf-t--global--dark--icon--color--200: var(--pf-t--color--gray--40);
+ --pf-t--global--dark--icon--color--300: var(--pf-t--color--gray--90);
+ --pf-t--global--dark--text--color--100: var(--pf-t--color--white);
+ --pf-t--global--dark--text--color--200: var(--pf-t--color--gray--30);
+ --pf-t--global--dark--text--color--300: var(--pf-t--color--gray--90);
+ --pf-t--global--dark--text--color--400: var(--pf-t--color--red-orange--30);
+ --pf-t--global--dark--text--color--link--100: var(--pf-t--color--blue--20);
+ --pf-t--global--dark--text--color--link--200: var(--pf-t--color--blue--10);
+ --pf-t--global--dark--text--color--link--300: var(--pf-t--color--purple--30);
+ --pf-t--global--dark--text--color--link--400: var(--pf-t--color--purple--20);
+ --pf-t--global--background--color--action--plain--alt--clicked: var(--pf-t--global--dark--background--color--200);
+ --pf-t--global--background--color--action--plain--alt--hover: var(--pf-t--global--dark--background--color--200);
+ --pf-t--global--background--color--control--default: var(--pf-t--global--dark--background--color--300);
+ --pf-t--global--background--color--control--read-only: var(--pf-t--global--dark--background--color--300);
+ --pf-t--global--background--color--disabled--default: var(--pf-t--global--dark--color--disabled--100);
+ --pf-t--global--background--color--floating--clicked: var(--pf-t--global--dark--background--color--200);
+ --pf-t--global--background--color--floating--default: var(--pf-t--global--dark--background--color--300);
+ --pf-t--global--background--color--floating--hover: var(--pf-t--global--dark--background--color--200);
+ --pf-t--global--background--color--highlight--clicked: var(--pf-t--global--dark--background--color--highlight--200);
+ --pf-t--global--background--color--highlight--default: var(--pf-t--global--dark--background--color--highlight--100);
+ --pf-t--global--background--color--inverse--clicked: var(--pf-t--global--dark--background--color--450);
+ --pf-t--global--background--color--inverse--default: var(--pf-t--global--dark--background--color--400);
+ --pf-t--global--background--color--inverse--hover: var(--pf-t--global--dark--background--color--450);
+ --pf-t--global--background--color--primary--clicked: var(--pf-t--global--dark--background--color--300);
+ --pf-t--global--background--color--primary--default: var(--pf-t--global--dark--background--color--200);
+ --pf-t--global--background--color--primary--hover: var(--pf-t--global--dark--background--color--300);
+ --pf-t--global--background--color--secondary--clicked: var(--pf-t--global--dark--background--color--200);
+ --pf-t--global--background--color--secondary--default: var(--pf-t--global--dark--background--color--100);
+ --pf-t--global--background--color--secondary--hover: var(--pf-t--global--dark--background--color--200);
+ --pf-t--global--border--color--clicked: var(--pf-t--global--dark--color--brand--200);
+ --pf-t--global--border--color--control--read-only: var(--pf-t--global--dark--border--color--50);
+ --pf-t--global--border--color--default: var(--pf-t--global--dark--border--color--200);
+ --pf-t--global--border--color--disabled: var(--pf-t--global--dark--color--disabled--200);
+ --pf-t--global--border--color--hover: var(--pf-t--global--dark--color--brand--100);
+ --pf-t--global--border--color--nonstatus--blue--clicked: var(--pf-t--global--dark--color--nonstatus--blue--200);
+ --pf-t--global--border--color--nonstatus--blue--default: var(--pf-t--global--dark--color--nonstatus--blue--100);
+ --pf-t--global--border--color--nonstatus--blue--hover: var(--pf-t--global--dark--color--nonstatus--blue--200);
+ --pf-t--global--border--color--nonstatus--gray--clicked: var(--pf-t--global--dark--color--nonstatus--gray--300);
+ --pf-t--global--border--color--nonstatus--gray--default: var(--pf-t--global--dark--color--nonstatus--gray--200);
+ --pf-t--global--border--color--nonstatus--gray--hover: var(--pf-t--global--dark--color--nonstatus--gray--300);
+ --pf-t--global--border--color--nonstatus--green--clicked: var(--pf-t--global--dark--color--nonstatus--green--200);
+ --pf-t--global--border--color--nonstatus--green--default: var(--pf-t--global--dark--color--nonstatus--green--100);
+ --pf-t--global--border--color--nonstatus--green--hover: var(--pf-t--global--dark--color--nonstatus--green--200);
+ --pf-t--global--border--color--nonstatus--orange--clicked: var(--pf-t--global--dark--color--nonstatus--orange--200);
+ --pf-t--global--border--color--nonstatus--orange--default: var(--pf-t--global--dark--color--nonstatus--orange--100);
+ --pf-t--global--border--color--nonstatus--orange--hover: var(--pf-t--global--dark--color--nonstatus--orange--200);
+ --pf-t--global--border--color--nonstatus--orangered--clicked: var(--pf-t--global--dark--color--nonstatus--orangered--200);
+ --pf-t--global--border--color--nonstatus--orangered--default: var(--pf-t--global--dark--color--nonstatus--orangered--100);
+ --pf-t--global--border--color--nonstatus--orangered--hover: var(--pf-t--global--dark--color--nonstatus--orangered--200);
+ --pf-t--global--border--color--nonstatus--purple--clicked: var(--pf-t--global--dark--color--nonstatus--purple--200);
+ --pf-t--global--border--color--nonstatus--purple--default: var(--pf-t--global--dark--color--nonstatus--purple--100);
+ --pf-t--global--border--color--nonstatus--purple--hover: var(--pf-t--global--dark--color--nonstatus--purple--200);
+ --pf-t--global--border--color--nonstatus--red--clicked: var(--pf-t--global--dark--color--nonstatus--red--200);
+ --pf-t--global--border--color--nonstatus--red--default: var(--pf-t--global--dark--color--nonstatus--red--100);
+ --pf-t--global--border--color--nonstatus--red--hover: var(--pf-t--global--dark--color--nonstatus--red--200);
+ --pf-t--global--border--color--nonstatus--teal--clicked: var(--pf-t--global--dark--color--nonstatus--teal--200);
+ --pf-t--global--border--color--nonstatus--teal--default: var(--pf-t--global--dark--color--nonstatus--teal--100);
+ --pf-t--global--border--color--nonstatus--teal--hover: var(--pf-t--global--dark--color--nonstatus--teal--200);
+ --pf-t--global--border--color--nonstatus--yellow--clicked: var(--pf-t--global--dark--color--nonstatus--yellow--200);
+ --pf-t--global--border--color--nonstatus--yellow--default: var(--pf-t--global--dark--color--nonstatus--yellow--100);
+ --pf-t--global--border--color--nonstatus--yellow--hover: var(--pf-t--global--dark--color--nonstatus--yellow--200);
+ --pf-t--global--border--color--on-secondary: var(--pf-t--global--dark--border--color--200);
+ --pf-t--global--color--brand--clicked: var(--pf-t--global--dark--color--brand--200);
+ --pf-t--global--color--brand--default: var(--pf-t--global--dark--color--brand--100);
+ --pf-t--global--color--brand--hover: var(--pf-t--global--dark--color--brand--200);
+ --pf-t--global--color--favorite--clicked: var(--pf-t--global--dark--color--favorite--200);
+ --pf-t--global--color--favorite--default: var(--pf-t--global--dark--color--favorite--100);
+ --pf-t--global--color--favorite--hover: var(--pf-t--global--dark--color--favorite--200);
+ --pf-t--global--color--nonstatus--blue--clicked: var(--pf-t--global--dark--color--nonstatus--blue--200);
+ --pf-t--global--color--nonstatus--blue--default: var(--pf-t--global--dark--color--nonstatus--blue--100);
+ --pf-t--global--color--nonstatus--blue--hover: var(--pf-t--global--dark--color--nonstatus--blue--200);
+ --pf-t--global--color--nonstatus--gray--clicked: var(--pf-t--global--dark--color--nonstatus--gray--200);
+ --pf-t--global--color--nonstatus--gray--default: var(--pf-t--global--dark--color--nonstatus--gray--100);
+ --pf-t--global--color--nonstatus--gray--hover: var(--pf-t--global--dark--color--nonstatus--gray--200);
+ --pf-t--global--color--nonstatus--green--clicked: var(--pf-t--global--dark--color--nonstatus--green--200);
+ --pf-t--global--color--nonstatus--green--default: var(--pf-t--global--dark--color--nonstatus--green--100);
+ --pf-t--global--color--nonstatus--green--hover: var(--pf-t--global--dark--color--nonstatus--green--200);
+ --pf-t--global--color--nonstatus--orange--clicked: var(--pf-t--global--dark--color--nonstatus--orange--200);
+ --pf-t--global--color--nonstatus--orange--default: var(--pf-t--global--dark--color--nonstatus--orange--100);
+ --pf-t--global--color--nonstatus--orange--hover: var(--pf-t--global--dark--color--nonstatus--orange--200);
+ --pf-t--global--color--nonstatus--orangered--clicked: var(--pf-t--global--dark--color--nonstatus--orangered--200);
+ --pf-t--global--color--nonstatus--orangered--default: var(--pf-t--global--dark--color--nonstatus--orangered--100);
+ --pf-t--global--color--nonstatus--orangered--hover: var(--pf-t--global--dark--color--nonstatus--orangered--200);
+ --pf-t--global--color--nonstatus--purple--clicked: var(--pf-t--global--dark--color--nonstatus--purple--200);
+ --pf-t--global--color--nonstatus--purple--default: var(--pf-t--global--dark--color--nonstatus--purple--100);
+ --pf-t--global--color--nonstatus--purple--hover: var(--pf-t--global--dark--color--nonstatus--purple--200);
+ --pf-t--global--color--nonstatus--red--clicked: var(--pf-t--global--dark--color--nonstatus--red--200);
+ --pf-t--global--color--nonstatus--red--default: var(--pf-t--global--dark--color--nonstatus--red--100);
+ --pf-t--global--color--nonstatus--red--hover: var(--pf-t--global--dark--color--nonstatus--red--200);
+ --pf-t--global--color--nonstatus--teal--clicked: var(--pf-t--global--dark--color--nonstatus--teal--200);
+ --pf-t--global--color--nonstatus--teal--default: var(--pf-t--global--dark--color--nonstatus--teal--100);
+ --pf-t--global--color--nonstatus--teal--hover: var(--pf-t--global--dark--color--nonstatus--teal--200);
+ --pf-t--global--color--nonstatus--yellow--clicked: var(--pf-t--global--dark--color--nonstatus--yellow--200);
+ --pf-t--global--color--nonstatus--yellow--default: var(--pf-t--global--dark--color--nonstatus--yellow--100);
+ --pf-t--global--color--nonstatus--yellow--hover: var(--pf-t--global--dark--color--nonstatus--yellow--200);
+ --pf-t--global--color--status--custom--clicked: var(--pf-t--global--dark--color--status--custom--200);
+ --pf-t--global--color--status--custom--default: var(--pf-t--global--dark--color--status--custom--100);
+ --pf-t--global--color--status--custom--hover: var(--pf-t--global--dark--color--status--custom--200);
+ --pf-t--global--color--status--danger--clicked: var(--pf-t--global--dark--color--status--danger--200);
+ --pf-t--global--color--status--danger--default: var(--pf-t--global--dark--color--status--danger--100);
+ --pf-t--global--color--status--danger--hover: var(--pf-t--global--dark--color--status--danger--200);
+ --pf-t--global--color--status--info--clicked: var(--pf-t--global--dark--color--status--info--200);
+ --pf-t--global--color--status--info--default: var(--pf-t--global--dark--color--status--info--100);
+ --pf-t--global--color--status--info--hover: var(--pf-t--global--dark--color--status--info--200);
+ --pf-t--global--color--status--success--clicked: var(--pf-t--global--dark--color--status--success--200);
+ --pf-t--global--color--status--success--default: var(--pf-t--global--dark--color--status--success--100);
+ --pf-t--global--color--status--success--hover: var(--pf-t--global--dark--color--status--success--200);
+ --pf-t--global--color--status--warning--clicked: var(--pf-t--global--dark--color--status--warning--200);
+ --pf-t--global--color--status--warning--default: var(--pf-t--global--dark--color--status--warning--100);
+ --pf-t--global--color--status--warning--hover: var(--pf-t--global--dark--color--status--warning--200);
+ --pf-t--global--icon--color--brand--clicked: var(--pf-t--global--dark--color--brand--300);
+ --pf-t--global--icon--color--brand--default: var(--pf-t--global--dark--color--brand--200);
+ --pf-t--global--icon--color--brand--hover: var(--pf-t--global--dark--color--brand--300);
+ --pf-t--global--icon--color--disabled: var(--pf-t--global--dark--color--disabled--200);
+ --pf-t--global--icon--color--inverse: var(--pf-t--global--dark--icon--color--300);
+ --pf-t--global--icon--color--on-disabled: var(--pf-t--global--dark--color--disabled--300);
+ --pf-t--global--icon--color--regular: var(--pf-t--global--dark--icon--color--100);
+ --pf-t--global--icon--color--severity--critical--default: var(--pf-t--global--dark--color--severity--critical--100);
+ --pf-t--global--icon--color--severity--important--default: var(--pf-t--global--dark--color--severity--important--100);
+ --pf-t--global--icon--color--severity--minor--default: var(--pf-t--global--dark--color--severity--minor--100);
+ --pf-t--global--icon--color--severity--moderate--default: var(--pf-t--global--dark--color--severity--moderate--100);
+ --pf-t--global--icon--color--severity--none--default: var(--pf-t--global--dark--color--severity--none--100);
+ --pf-t--global--icon--color--severity--undefined--default: var(--pf-t--global--dark--color--severity--undefined--100);
+ --pf-t--global--icon--color--subtle: var(--pf-t--global--dark--icon--color--200);
+ --pf-t--global--text--color--brand--clicked: var(--pf-t--global--dark--color--brand--300);
+ --pf-t--global--text--color--brand--default: var(--pf-t--global--dark--color--brand--200);
+ --pf-t--global--text--color--brand--hover: var(--pf-t--global--dark--color--brand--300);
+ --pf-t--global--text--color--disabled: var(--pf-t--global--dark--color--disabled--200);
+ --pf-t--global--text--color--inverse: var(--pf-t--global--dark--text--color--300);
+ --pf-t--global--text--color--link--default: var(--pf-t--global--dark--text--color--link--100);
+ --pf-t--global--text--color--link--hover: var(--pf-t--global--dark--text--color--link--200);
+ --pf-t--global--text--color--link--visited: var(--pf-t--global--dark--text--color--link--300);
+ --pf-t--global--text--color--on-disabled: var(--pf-t--global--dark--color--disabled--300);
+ --pf-t--global--text--color--on-highlight: var(--pf-t--global--dark--text--color--300);
+ --pf-t--global--text--color--regular: var(--pf-t--global--dark--text--color--100);
+ --pf-t--global--text--color--required: var(--pf-t--global--dark--text--color--400);
+ --pf-t--global--text--color--status--danger--clicked: var(--pf-t--global--dark--color--status--danger--300);
+ --pf-t--global--text--color--status--danger--default: var(--pf-t--global--dark--color--status--danger--250);
+ --pf-t--global--text--color--status--danger--hover: var(--pf-t--global--dark--color--status--danger--300);
+ --pf-t--global--text--color--subtle: var(--pf-t--global--dark--text--color--200);
+ --pf-t--global--border--color--alt: var(--pf-t--global--background--color--primary--default);
+ --pf-t--global--border--color--brand--clicked: var(--pf-t--global--color--brand--clicked);
+ --pf-t--global--border--color--brand--default: var(--pf-t--global--color--brand--default);
+ --pf-t--global--border--color--brand--hover: var(--pf-t--global--color--brand--hover);
+ --pf-t--global--border--color--status--custom--clicked: var(--pf-t--global--color--status--custom--clicked);
+ --pf-t--global--border--color--status--custom--default: var(--pf-t--global--color--status--custom--default);
+ --pf-t--global--border--color--status--custom--hover: var(--pf-t--global--color--status--custom--hover);
+ --pf-t--global--border--color--status--danger--clicked: var(--pf-t--global--color--status--danger--clicked);
+ --pf-t--global--border--color--status--danger--default: var(--pf-t--global--color--status--danger--default);
+ --pf-t--global--border--color--status--danger--hover: var(--pf-t--global--color--status--danger--hover);
+ --pf-t--global--border--color--status--info--clicked: var(--pf-t--global--color--status--info--clicked);
+ --pf-t--global--border--color--status--info--default: var(--pf-t--global--color--status--info--default);
+ --pf-t--global--border--color--status--info--hover: var(--pf-t--global--color--status--info--hover);
+ --pf-t--global--border--color--status--success--clicked: var(--pf-t--global--color--status--success--clicked);
+ --pf-t--global--border--color--status--success--default: var(--pf-t--global--color--status--success--default);
+ --pf-t--global--border--color--status--success--hover: var(--pf-t--global--color--status--success--hover);
+ --pf-t--global--border--color--status--warning--clicked: var(--pf-t--global--color--status--warning--clicked);
+ --pf-t--global--border--color--status--warning--default: var(--pf-t--global--color--status--warning--default);
+ --pf-t--global--border--color--status--warning--hover: var(--pf-t--global--color--status--warning--hover);
+ --pf-t--global--color--status--read--on-primary: var(--pf-t--global--background--color--secondary--default);
+ --pf-t--global--color--status--read--on-secondary: var(--pf-t--global--background--color--control--default);
+ --pf-t--global--color--status--unread--attention--clicked: var(--pf-t--global--color--status--danger--clicked);
+ --pf-t--global--color--status--unread--attention--default: var(--pf-t--global--color--status--danger--default);
+ --pf-t--global--color--status--unread--attention--hover: var(--pf-t--global--color--status--danger--hover);
+ --pf-t--global--color--status--unread--clicked: var(--pf-t--global--color--brand--clicked);
+ --pf-t--global--color--status--unread--default: var(--pf-t--global--color--brand--default);
+ --pf-t--global--color--status--unread--hover: var(--pf-t--global--color--brand--hover);
+ --pf-t--global--icon--color--favorite--clicked: var(--pf-t--global--color--favorite--clicked);
+ --pf-t--global--icon--color--favorite--default: var(--pf-t--global--color--favorite--default);
+ --pf-t--global--icon--color--favorite--hover: var(--pf-t--global--color--favorite--hover);
+ --pf-t--global--icon--color--nonstatus--on-blue--clicked: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--nonstatus--on-blue--default: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--nonstatus--on-blue--hover: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--nonstatus--on-gray--clicked: var(--pf-t--global--icon--color--regular);
+ --pf-t--global--icon--color--nonstatus--on-gray--default: var(--pf-t--global--icon--color--regular);
+ --pf-t--global--icon--color--nonstatus--on-gray--hover: var(--pf-t--global--icon--color--regular);
+ --pf-t--global--icon--color--nonstatus--on-green--clicked: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--nonstatus--on-green--default: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--nonstatus--on-green--hover: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--nonstatus--on-orange--clicked: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--nonstatus--on-orange--default: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--nonstatus--on-orange--hover: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--nonstatus--on-orangered--clicked: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--nonstatus--on-orangered--default: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--nonstatus--on-orangered--hover: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--nonstatus--on-purple--clicked: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--nonstatus--on-purple--default: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--nonstatus--on-purple--hover: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--nonstatus--on-red--clicked: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--nonstatus--on-red--default: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--nonstatus--on-red--hover: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--nonstatus--on-teal--clicked: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--nonstatus--on-teal--default: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--nonstatus--on-teal--hover: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--nonstatus--on-yellow--clicked: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--nonstatus--on-yellow--default: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--nonstatus--on-yellow--hover: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--on-brand--clicked: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--on-brand--default: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--on-brand--hover: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--custom--clicked: var(--pf-t--global--color--status--custom--clicked);
+ --pf-t--global--icon--color--status--custom--default: var(--pf-t--global--color--status--custom--default);
+ --pf-t--global--icon--color--status--custom--hover: var(--pf-t--global--color--status--custom--hover);
+ --pf-t--global--icon--color--status--danger--clicked: var(--pf-t--global--color--status--danger--clicked);
+ --pf-t--global--icon--color--status--danger--default: var(--pf-t--global--color--status--danger--default);
+ --pf-t--global--icon--color--status--danger--hover: var(--pf-t--global--color--status--danger--hover);
+ --pf-t--global--icon--color--status--info--clicked: var(--pf-t--global--color--status--info--clicked);
+ --pf-t--global--icon--color--status--info--default: var(--pf-t--global--color--status--info--default);
+ --pf-t--global--icon--color--status--info--hover: var(--pf-t--global--color--status--info--hover);
+ --pf-t--global--icon--color--status--on-custom--clicked: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--on-custom--default: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--on-custom--hover: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--on-danger--clicked: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--on-danger--default: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--on-danger--hover: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--on-info--clicked: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--on-info--default: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--on-info--hover: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--on-success--clicked: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--on-success--default: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--on-success--hover: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--on-warning--clicked: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--on-warning--default: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--on-warning--hover: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--success--clicked: var(--pf-t--global--color--status--success--clicked);
+ --pf-t--global--icon--color--status--success--default: var(--pf-t--global--color--status--success--default);
+ --pf-t--global--icon--color--status--success--hover: var(--pf-t--global--color--status--success--hover);
+ --pf-t--global--icon--color--status--unread--on-attention--clicked: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--unread--on-attention--default: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--unread--on-attention--hover: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--unread--on-default--clicked: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--unread--on-default--default: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--unread--on-default--hover: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--warning--clicked: var(--pf-t--global--color--status--warning--clicked);
+ --pf-t--global--icon--color--status--warning--default: var(--pf-t--global--color--status--warning--default);
+ --pf-t--global--icon--color--status--warning--hover: var(--pf-t--global--color--status--warning--hover);
+ --pf-t--global--text--color--nonstatus--on-blue--clicked: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--nonstatus--on-blue--default: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--nonstatus--on-blue--hover: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--nonstatus--on-gray--clicked: var(--pf-t--global--text--color--regular);
+ --pf-t--global--text--color--nonstatus--on-gray--default: var(--pf-t--global--text--color--regular);
+ --pf-t--global--text--color--nonstatus--on-gray--hover: var(--pf-t--global--text--color--regular);
+ --pf-t--global--text--color--nonstatus--on-green--clicked: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--nonstatus--on-green--default: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--nonstatus--on-green--hover: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--nonstatus--on-orange--clicked: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--nonstatus--on-orange--default: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--nonstatus--on-orange--hover: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--nonstatus--on-orangered--clicked: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--nonstatus--on-orangered--default: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--nonstatus--on-orangered--hover: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--nonstatus--on-purple--clicked: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--nonstatus--on-purple--default: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--nonstatus--on-purple--hover: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--nonstatus--on-red--clicked: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--nonstatus--on-red--default: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--nonstatus--on-red--hover: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--nonstatus--on-teal--clicked: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--nonstatus--on-teal--default: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--nonstatus--on-teal--hover: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--nonstatus--on-yellow--clicked: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--nonstatus--on-yellow--default: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--nonstatus--on-yellow--hover: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--on-brand--clicked: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--on-brand--default: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--on-brand--hover: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--placeholder: var(--pf-t--global--text--color--subtle);
+ --pf-t--global--text--color--status--custom--clicked: var(--pf-t--global--color--status--custom--clicked);
+ --pf-t--global--text--color--status--custom--default: var(--pf-t--global--color--status--custom--default);
+ --pf-t--global--text--color--status--custom--hover: var(--pf-t--global--color--status--custom--hover);
+ --pf-t--global--text--color--status--info--clicked: var(--pf-t--global--color--status--info--clicked);
+ --pf-t--global--text--color--status--info--default: var(--pf-t--global--color--status--info--default);
+ --pf-t--global--text--color--status--info--hover: var(--pf-t--global--color--status--info--hover);
+ --pf-t--global--text--color--status--on-custom--clicked: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--status--on-custom--default: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--status--on-custom--hover: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--status--on-danger--clicked: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--status--on-danger--default: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--status--on-danger--hover: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--status--on-info--clicked: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--status--on-info--default: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--status--on-info--hover: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--status--on-success--clicked: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--status--on-success--default: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--status--on-success--hover: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--status--on-warning--clicked: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--status--on-warning--default: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--status--on-warning--hover: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--status--success--clicked: var(--pf-t--global--color--status--success--clicked);
+ --pf-t--global--text--color--status--success--default: var(--pf-t--global--color--status--success--default);
+ --pf-t--global--text--color--status--success--hover: var(--pf-t--global--color--status--success--hover);
+ --pf-t--global--text--color--status--unread--on-attention--clicked: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--status--unread--on-attention--default: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--status--unread--on-attention--hover: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--status--unread--on-default--clicked: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--status--unread--on-default--default: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--status--unread--on-default--hover: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--status--warning--clicked: var(--pf-t--global--color--status--warning--clicked);
+ --pf-t--global--text--color--status--warning--default: var(--pf-t--global--color--status--warning--default);
+ --pf-t--global--text--color--status--warning--hover: var(--pf-t--global--color--status--warning--hover);
+}
+
+@media (prefers-contrast: more) {
+ :root {
+ --pf-t--global--background--color--500: rgba(21, 21, 21, 0.2000);
+ --pf-t--global--background--color--600: rgba(199, 199, 199, 0.2500);
+ --pf-t--global--background--color--action--plain--default: rgba(255, 255, 255, 0.0000);
+ --pf-t--global--box-shadow--color--100: rgba(41, 41, 41, 0.1500);
+ --pf-t--global--box-shadow--color--200: rgba(41, 41, 41, 0.2000);
+ --pf-t--global--color--nonstatus--green--400: #3d7019;
+ --pf-t--global--color--status--danger--300: #501600;
+ --pf-t--global--color--status--success--150: #3d7019;
+ --pf-t--global--color--status--success--300: #153300;
+ --pf-t--global--background--color--100: var(--pf-t--color--white);
+ --pf-t--global--background--color--200: var(--pf-t--color--gray--10);
+ --pf-t--global--background--color--300: var(--pf-t--color--gray--20);
+ --pf-t--global--background--color--400: var(--pf-t--color--gray--80);
+ --pf-t--global--background--color--450: var(--pf-t--color--gray--70);
+ --pf-t--global--background--color--action--plain--clicked: var(--pf-t--global--background--color--600);
+ --pf-t--global--background--color--action--plain--hover: var(--pf-t--global--background--color--600);
+ --pf-t--global--background--color--backdrop--default: var(--pf-t--global--background--color--500);
+ --pf-t--global--background--color--highlight--100: var(--pf-t--color--yellow--30);
+ --pf-t--global--background--color--highlight--200: var(--pf-t--color--yellow--40);
+ --pf-t--global--background--color--tertiary--default: var(--pf-t--global--background--color--600);
+ --pf-t--global--border--color--100: var(--pf-t--color--gray--30);
+ --pf-t--global--border--color--200: var(--pf-t--color--gray--40);
+ --pf-t--global--border--color--300: var(--pf-t--color--gray--50);
+ --pf-t--global--border--color--450: var(--pf-t--color--gray--60);
+ --pf-t--global--border--color--50: var(--pf-t--color--gray--20);
+ --pf-t--global--border--color--nonstatus--green--default: var(--pf-t--global--color--nonstatus--green--400);
+ --pf-t--global--border--color--on-secondary: var(--pf-t--color--gray--80);
+ --pf-t--global--border--color--status--success--default: var(--pf-t--global--color--status--success--150);
+ --pf-t--global--box-shadow--color--lg--default: var(--pf-t--global--box-shadow--color--100);
+ --pf-t--global--box-shadow--color--lg--directional: var(--pf-t--global--box-shadow--color--200);
+ --pf-t--global--box-shadow--color--md--default: var(--pf-t--global--box-shadow--color--100);
+ --pf-t--global--box-shadow--color--md--directional: var(--pf-t--global--box-shadow--color--100);
+ --pf-t--global--box-shadow--color--sm--default: var(--pf-t--global--box-shadow--color--100);
+ --pf-t--global--box-shadow--color--sm--directional: var(--pf-t--global--box-shadow--color--200);
+ --pf-t--global--color--brand--100: var(--pf-t--color--blue--40);
+ --pf-t--global--color--brand--200: var(--pf-t--color--blue--50);
+ --pf-t--global--color--brand--300: var(--pf-t--color--blue--60);
+ --pf-t--global--color--brand--400: var(--pf-t--color--blue--70);
+ --pf-t--global--color--brand--500: var(--pf-t--color--blue--80);
+ --pf-t--global--color--disabled--100: var(--pf-t--color--gray--30);
+ --pf-t--global--color--disabled--200: var(--pf-t--color--gray--40);
+ --pf-t--global--color--disabled--300: var(--pf-t--color--gray--60);
+ --pf-t--global--color--favorite--100: var(--pf-t--color--yellow--30);
+ --pf-t--global--color--favorite--200: var(--pf-t--color--yellow--40);
+ --pf-t--global--color--favorite--300: var(--pf-t--color--yellow--70);
+ --pf-t--global--color--favorite--400: var(--pf-t--color--yellow--80);
+ --pf-t--global--color--nonstatus--blue--100: var(--pf-t--color--blue--20);
+ --pf-t--global--color--nonstatus--blue--200: var(--pf-t--color--blue--30);
+ --pf-t--global--color--nonstatus--blue--300: var(--pf-t--color--blue--40);
+ --pf-t--global--color--nonstatus--blue--400: var(--pf-t--color--blue--60);
+ --pf-t--global--color--nonstatus--blue--500: var(--pf-t--color--blue--70);
+ --pf-t--global--color--nonstatus--gray--100: var(--pf-t--color--gray--20);
+ --pf-t--global--color--nonstatus--gray--200: var(--pf-t--color--gray--30);
+ --pf-t--global--color--nonstatus--gray--300: var(--pf-t--color--gray--40);
+ --pf-t--global--color--nonstatus--gray--400: var(--pf-t--color--gray--60);
+ --pf-t--global--color--nonstatus--gray--50: var(--pf-t--color--gray--10);
+ --pf-t--global--color--nonstatus--gray--500: var(--pf-t--color--gray--70);
+ --pf-t--global--color--nonstatus--green--100: var(--pf-t--color--green--20);
+ --pf-t--global--color--nonstatus--green--200: var(--pf-t--color--green--30);
+ --pf-t--global--color--nonstatus--green--300: var(--pf-t--color--green--40);
+ --pf-t--global--color--nonstatus--green--500: var(--pf-t--color--green--70);
+ --pf-t--global--color--nonstatus--orange--100: var(--pf-t--color--orange--20);
+ --pf-t--global--color--nonstatus--orange--200: var(--pf-t--color--orange--30);
+ --pf-t--global--color--nonstatus--orange--300: var(--pf-t--color--orange--40);
+ --pf-t--global--color--nonstatus--orange--400: var(--pf-t--color--orange--60);
+ --pf-t--global--color--nonstatus--orange--500: var(--pf-t--color--orange--70);
+ --pf-t--global--color--nonstatus--orangered--100: var(--pf-t--color--red-orange--20);
+ --pf-t--global--color--nonstatus--orangered--200: var(--pf-t--color--red-orange--30);
+ --pf-t--global--color--nonstatus--orangered--300: var(--pf-t--color--red-orange--40);
+ --pf-t--global--color--nonstatus--orangered--400: var(--pf-t--color--red-orange--60);
+ --pf-t--global--color--nonstatus--orangered--500: var(--pf-t--color--red-orange--70);
+ --pf-t--global--color--nonstatus--purple--100: var(--pf-t--color--purple--20);
+ --pf-t--global--color--nonstatus--purple--200: var(--pf-t--color--purple--30);
+ --pf-t--global--color--nonstatus--purple--300: var(--pf-t--color--purple--40);
+ --pf-t--global--color--nonstatus--purple--400: var(--pf-t--color--purple--50);
+ --pf-t--global--color--nonstatus--purple--500: var(--pf-t--color--purple--60);
+ --pf-t--global--color--nonstatus--red--100: var(--pf-t--color--red--20);
+ --pf-t--global--color--nonstatus--red--200: var(--pf-t--color--red--30);
+ --pf-t--global--color--nonstatus--red--300: var(--pf-t--color--red--40);
+ --pf-t--global--color--nonstatus--red--400: var(--pf-t--color--red--60);
+ --pf-t--global--color--nonstatus--red--500: var(--pf-t--color--red--70);
+ --pf-t--global--color--nonstatus--teal--100: var(--pf-t--color--teal--20);
+ --pf-t--global--color--nonstatus--teal--200: var(--pf-t--color--teal--30);
+ --pf-t--global--color--nonstatus--teal--300: var(--pf-t--color--teal--40);
+ --pf-t--global--color--nonstatus--teal--400: var(--pf-t--color--teal--70);
+ --pf-t--global--color--nonstatus--teal--500: var(--pf-t--color--teal--80);
+ --pf-t--global--color--nonstatus--yellow--100: var(--pf-t--color--yellow--20);
+ --pf-t--global--color--nonstatus--yellow--200: var(--pf-t--color--yellow--30);
+ --pf-t--global--color--nonstatus--yellow--300: var(--pf-t--color--yellow--40);
+ --pf-t--global--color--nonstatus--yellow--400: var(--pf-t--color--yellow--70);
+ --pf-t--global--color--nonstatus--yellow--500: var(--pf-t--color--yellow--80);
+ --pf-t--global--color--severity--critical--100: var(--pf-t--color--red-orange--60);
+ --pf-t--global--color--severity--important--100: var(--pf-t--color--orange--50);
+ --pf-t--global--color--severity--important--200: var(--pf-t--color--orange--60);
+ --pf-t--global--color--severity--minor--100: var(--pf-t--color--gray--50);
+ --pf-t--global--color--severity--minor--200: var(--pf-t--color--gray--80);
+ --pf-t--global--color--severity--moderate--100: var(--pf-t--color--yellow--40);
+ --pf-t--global--color--severity--moderate--200: var(--pf-t--color--yellow--70);
+ --pf-t--global--color--severity--none--100: var(--pf-t--color--blue--40);
+ --pf-t--global--color--severity--none--200: var(--pf-t--color--blue--60);
+ --pf-t--global--color--severity--undefined--100: var(--pf-t--color--gray--30);
+ --pf-t--global--color--severity--undefined--200: var(--pf-t--color--gray--60);
+ --pf-t--global--color--status--custom--100: var(--pf-t--color--teal--60);
+ --pf-t--global--color--status--custom--200: var(--pf-t--color--teal--70);
+ --pf-t--global--color--status--custom--300: var(--pf-t--color--teal--80);
+ --pf-t--global--color--status--danger--100: var(--pf-t--color--red-orange--60);
+ --pf-t--global--color--status--danger--200: var(--pf-t--color--red-orange--70);
+ --pf-t--global--color--status--danger--clicked: var(--pf-t--global--color--status--danger--300);
+ --pf-t--global--color--status--danger--hover: var(--pf-t--global--color--status--danger--300);
+ --pf-t--global--color--status--info--100: var(--pf-t--color--purple--50);
+ --pf-t--global--color--status--info--200: var(--pf-t--color--purple--60);
+ --pf-t--global--color--status--info--300: var(--pf-t--color--purple--70);
+ --pf-t--global--color--status--success--100: var(--pf-t--color--green--60);
+ --pf-t--global--color--status--success--200: var(--pf-t--color--green--70);
+ --pf-t--global--color--status--success--clicked: var(--pf-t--global--color--status--success--300);
+ --pf-t--global--color--status--success--hover: var(--pf-t--global--color--status--success--300);
+ --pf-t--global--color--status--warning--100: var(--pf-t--color--yellow--30);
+ --pf-t--global--color--status--warning--200: var(--pf-t--color--yellow--40);
+ --pf-t--global--color--status--warning--300: var(--pf-t--color--yellow--50);
+ --pf-t--global--color--status--warning--400: var(--pf-t--color--yellow--60);
+ --pf-t--global--color--status--warning--500: var(--pf-t--color--yellow--70);
+ --pf-t--global--color--status--warning--600: var(--pf-t--color--yellow--80);
+ --pf-t--global--icon--color--100: var(--pf-t--color--gray--90);
+ --pf-t--global--icon--color--150: var(--pf-t--color--gray--60);
+ --pf-t--global--icon--color--200: var(--pf-t--color--gray--50);
+ --pf-t--global--icon--color--300: var(--pf-t--color--white);
+ --pf-t--global--icon--color--brand--clicked: var(--pf-t--color--blue--70);
+ --pf-t--global--icon--color--brand--default: var(--pf-t--color--blue--60);
+ --pf-t--global--icon--color--brand--hover: var(--pf-t--color--blue--70);
+ --pf-t--global--icon--color--status--success--default: var(--pf-t--global--color--status--success--150);
+ --pf-t--global--text--color--100: var(--pf-t--color--gray--95);
+ --pf-t--global--text--color--200: var(--pf-t--color--gray--60);
+ --pf-t--global--text--color--250: var(--pf-t--color--gray--70);
+ --pf-t--global--text--color--300: var(--pf-t--color--white);
+ --pf-t--global--text--color--400: var(--pf-t--color--red-orange--40);
+ --pf-t--global--text--color--500: var(--pf-t--color--red-orange--70);
+ --pf-t--global--text--color--brand--clicked: var(--pf-t--color--blue--80);
+ --pf-t--global--text--color--brand--default: var(--pf-t--color--blue--70);
+ --pf-t--global--text--color--brand--hover: var(--pf-t--color--blue--80);
+ --pf-t--global--text--color--link--100: var(--pf-t--color--blue--50);
+ --pf-t--global--text--color--link--200: var(--pf-t--color--blue--60);
+ --pf-t--global--text--color--link--250: var(--pf-t--color--blue--70);
+ --pf-t--global--text--color--link--300: var(--pf-t--color--purple--50);
+ --pf-t--global--text--color--link--350: var(--pf-t--color--purple--60);
+ --pf-t--global--background--color--control--read-only: var(--pf-t--global--background--color--200);
+ --pf-t--global--background--color--disabled--default: var(--pf-t--global--color--disabled--100);
+ --pf-t--global--background--color--floating--clicked: var(--pf-t--global--background--color--200);
+ --pf-t--global--background--color--floating--default: var(--pf-t--global--background--color--100);
+ --pf-t--global--background--color--floating--hover: var(--pf-t--global--background--color--200);
+ --pf-t--global--background--color--highlight--clicked: var(--pf-t--global--background--color--highlight--200);
+ --pf-t--global--background--color--highlight--default: var(--pf-t--global--background--color--highlight--100);
+ --pf-t--global--background--color--inverse--clicked: var(--pf-t--global--background--color--450);
+ --pf-t--global--background--color--inverse--default: var(--pf-t--global--background--color--400);
+ --pf-t--global--background--color--inverse--hover: var(--pf-t--global--background--color--450);
+ --pf-t--global--background--color--primary--clicked: var(--pf-t--global--background--color--200);
+ --pf-t--global--background--color--primary--default: var(--pf-t--global--background--color--100);
+ --pf-t--global--background--color--primary--hover: var(--pf-t--global--background--color--200);
+ --pf-t--global--background--color--secondary--clicked: var(--pf-t--global--background--color--300);
+ --pf-t--global--background--color--secondary--default: var(--pf-t--global--background--color--200);
+ --pf-t--global--background--color--secondary--hover: var(--pf-t--global--background--color--300);
+ --pf-t--global--border--color--clicked: var(--pf-t--global--color--brand--400);
+ --pf-t--global--border--color--control--read-only: var(--pf-t--global--border--color--50);
+ --pf-t--global--border--color--default: var(--pf-t--global--border--color--450);
+ --pf-t--global--border--color--disabled: var(--pf-t--global--color--disabled--200);
+ --pf-t--global--border--color--hover: var(--pf-t--global--color--brand--300);
+ --pf-t--global--border--color--nonstatus--blue--clicked: var(--pf-t--global--color--nonstatus--blue--500);
+ --pf-t--global--border--color--nonstatus--blue--default: var(--pf-t--global--color--nonstatus--blue--400);
+ --pf-t--global--border--color--nonstatus--blue--hover: var(--pf-t--global--color--nonstatus--blue--500);
+ --pf-t--global--border--color--nonstatus--gray--clicked: var(--pf-t--global--color--nonstatus--gray--500);
+ --pf-t--global--border--color--nonstatus--gray--default: var(--pf-t--global--color--nonstatus--gray--400);
+ --pf-t--global--border--color--nonstatus--gray--hover: var(--pf-t--global--color--nonstatus--gray--500);
+ --pf-t--global--border--color--nonstatus--green--clicked: var(--pf-t--global--color--nonstatus--green--500);
+ --pf-t--global--border--color--nonstatus--green--hover: var(--pf-t--global--color--nonstatus--green--500);
+ --pf-t--global--border--color--nonstatus--orange--clicked: var(--pf-t--global--color--nonstatus--orange--500);
+ --pf-t--global--border--color--nonstatus--orange--default: var(--pf-t--global--color--nonstatus--orange--400);
+ --pf-t--global--border--color--nonstatus--orange--hover: var(--pf-t--global--color--nonstatus--orange--500);
+ --pf-t--global--border--color--nonstatus--orangered--clicked: var(--pf-t--global--color--nonstatus--orangered--500);
+ --pf-t--global--border--color--nonstatus--orangered--default: var(--pf-t--global--color--nonstatus--orangered--400);
+ --pf-t--global--border--color--nonstatus--orangered--hover: var(--pf-t--global--color--nonstatus--orangered--500);
+ --pf-t--global--border--color--nonstatus--purple--clicked: var(--pf-t--global--color--nonstatus--purple--500);
+ --pf-t--global--border--color--nonstatus--purple--default: var(--pf-t--global--color--nonstatus--purple--400);
+ --pf-t--global--border--color--nonstatus--purple--hover: var(--pf-t--global--color--nonstatus--purple--500);
+ --pf-t--global--border--color--nonstatus--red--clicked: var(--pf-t--global--color--nonstatus--red--500);
+ --pf-t--global--border--color--nonstatus--red--default: var(--pf-t--global--color--nonstatus--red--400);
+ --pf-t--global--border--color--nonstatus--red--hover: var(--pf-t--global--color--nonstatus--red--500);
+ --pf-t--global--border--color--nonstatus--teal--clicked: var(--pf-t--global--color--nonstatus--teal--500);
+ --pf-t--global--border--color--nonstatus--teal--default: var(--pf-t--global--color--nonstatus--teal--400);
+ --pf-t--global--border--color--nonstatus--teal--hover: var(--pf-t--global--color--nonstatus--teal--500);
+ --pf-t--global--border--color--nonstatus--yellow--clicked: var(--pf-t--global--color--nonstatus--yellow--500);
+ --pf-t--global--border--color--nonstatus--yellow--default: var(--pf-t--global--color--nonstatus--yellow--400);
+ --pf-t--global--border--color--nonstatus--yellow--hover: var(--pf-t--global--color--nonstatus--yellow--500);
+ --pf-t--global--border--color--status--danger--clicked: var(--pf-t--global--color--status--danger--clicked);
+ --pf-t--global--border--color--status--danger--hover: var(--pf-t--global--color--status--danger--hover);
+ --pf-t--global--border--color--status--success--clicked: var(--pf-t--global--color--status--success--200);
+ --pf-t--global--border--color--status--success--hover: var(--pf-t--global--color--status--success--200);
+ --pf-t--global--border--color--status--warning--clicked: var(--pf-t--global--color--status--warning--600);
+ --pf-t--global--border--color--status--warning--default: var(--pf-t--global--color--status--warning--500);
+ --pf-t--global--border--color--status--warning--hover: var(--pf-t--global--color--status--warning--600);
+ --pf-t--global--color--brand--clicked: var(--pf-t--global--color--brand--400);
+ --pf-t--global--color--brand--default: var(--pf-t--global--color--brand--300);
+ --pf-t--global--color--brand--hover: var(--pf-t--global--color--brand--400);
+ --pf-t--global--color--favorite--clicked: var(--pf-t--global--color--favorite--400);
+ --pf-t--global--color--favorite--default: var(--pf-t--global--color--favorite--300);
+ --pf-t--global--color--favorite--hover: var(--pf-t--global--color--favorite--400);
+ --pf-t--global--color--nonstatus--blue--clicked: var(--pf-t--global--color--nonstatus--blue--200);
+ --pf-t--global--color--nonstatus--blue--default: var(--pf-t--global--color--nonstatus--blue--100);
+ --pf-t--global--color--nonstatus--blue--hover: var(--pf-t--global--color--nonstatus--blue--200);
+ --pf-t--global--color--nonstatus--gray--clicked: var(--pf-t--global--color--nonstatus--gray--100);
+ --pf-t--global--color--nonstatus--gray--default: var(--pf-t--global--color--nonstatus--gray--50);
+ --pf-t--global--color--nonstatus--gray--hover: var(--pf-t--global--color--nonstatus--gray--100);
+ --pf-t--global--color--nonstatus--green--clicked: var(--pf-t--global--color--nonstatus--green--200);
+ --pf-t--global--color--nonstatus--green--default: var(--pf-t--global--color--nonstatus--green--100);
+ --pf-t--global--color--nonstatus--green--hover: var(--pf-t--global--color--nonstatus--green--200);
+ --pf-t--global--color--nonstatus--orange--clicked: var(--pf-t--global--color--nonstatus--orange--200);
+ --pf-t--global--color--nonstatus--orange--default: var(--pf-t--global--color--nonstatus--orange--100);
+ --pf-t--global--color--nonstatus--orange--hover: var(--pf-t--global--color--nonstatus--orange--200);
+ --pf-t--global--color--nonstatus--orangered--clicked: var(--pf-t--global--color--nonstatus--orangered--200);
+ --pf-t--global--color--nonstatus--orangered--default: var(--pf-t--global--color--nonstatus--orangered--100);
+ --pf-t--global--color--nonstatus--orangered--hover: var(--pf-t--global--color--nonstatus--orangered--200);
+ --pf-t--global--color--nonstatus--purple--clicked: var(--pf-t--global--color--nonstatus--purple--200);
+ --pf-t--global--color--nonstatus--purple--default: var(--pf-t--global--color--nonstatus--purple--100);
+ --pf-t--global--color--nonstatus--purple--hover: var(--pf-t--global--color--nonstatus--purple--200);
+ --pf-t--global--color--nonstatus--red--clicked: var(--pf-t--global--color--nonstatus--red--200);
+ --pf-t--global--color--nonstatus--red--default: var(--pf-t--global--color--nonstatus--red--100);
+ --pf-t--global--color--nonstatus--red--hover: var(--pf-t--global--color--nonstatus--red--200);
+ --pf-t--global--color--nonstatus--teal--clicked: var(--pf-t--global--color--nonstatus--teal--200);
+ --pf-t--global--color--nonstatus--teal--default: var(--pf-t--global--color--nonstatus--teal--100);
+ --pf-t--global--color--nonstatus--teal--hover: var(--pf-t--global--color--nonstatus--teal--200);
+ --pf-t--global--color--nonstatus--yellow--clicked: var(--pf-t--global--color--nonstatus--yellow--200);
+ --pf-t--global--color--nonstatus--yellow--default: var(--pf-t--global--color--nonstatus--yellow--100);
+ --pf-t--global--color--nonstatus--yellow--hover: var(--pf-t--global--color--nonstatus--yellow--200);
+ --pf-t--global--color--status--custom--clicked: var(--pf-t--global--color--status--custom--300);
+ --pf-t--global--color--status--custom--default: var(--pf-t--global--color--status--custom--200);
+ --pf-t--global--color--status--custom--hover: var(--pf-t--global--color--status--custom--300);
+ --pf-t--global--color--status--danger--default: var(--pf-t--global--color--status--danger--200);
+ --pf-t--global--color--status--info--clicked: var(--pf-t--global--color--status--info--300);
+ --pf-t--global--color--status--info--default: var(--pf-t--global--color--status--info--200);
+ --pf-t--global--color--status--info--hover: var(--pf-t--global--color--status--info--300);
+ --pf-t--global--color--status--success--default: var(--pf-t--global--color--status--success--200);
+ --pf-t--global--color--status--unread--attention--clicked: var(--pf-t--global--color--status--danger--clicked);
+ --pf-t--global--color--status--unread--attention--hover: var(--pf-t--global--color--status--danger--hover);
+ --pf-t--global--color--status--warning--clicked: var(--pf-t--global--color--status--warning--600);
+ --pf-t--global--color--status--warning--default: var(--pf-t--global--color--status--warning--500);
+ --pf-t--global--color--status--warning--hover: var(--pf-t--global--color--status--warning--600);
+ --pf-t--global--icon--color--disabled: var(--pf-t--global--color--disabled--200);
+ --pf-t--global--icon--color--inverse: var(--pf-t--global--icon--color--300);
+ --pf-t--global--icon--color--on-disabled: var(--pf-t--global--color--disabled--300);
+ --pf-t--global--icon--color--regular: var(--pf-t--global--icon--color--100);
+ --pf-t--global--icon--color--severity--critical--default: var(--pf-t--global--color--severity--critical--100);
+ --pf-t--global--icon--color--severity--important--default: var(--pf-t--global--color--severity--important--200);
+ --pf-t--global--icon--color--severity--minor--default: var(--pf-t--global--color--severity--minor--200);
+ --pf-t--global--icon--color--severity--moderate--default: var(--pf-t--global--color--severity--moderate--200);
+ --pf-t--global--icon--color--severity--none--default: var(--pf-t--global--color--severity--none--200);
+ --pf-t--global--icon--color--severity--undefined--default: var(--pf-t--global--color--severity--undefined--200);
+ --pf-t--global--icon--color--status--danger--clicked: var(--pf-t--global--color--status--danger--200);
+ --pf-t--global--icon--color--status--danger--default: var(--pf-t--global--color--status--danger--100);
+ --pf-t--global--icon--color--status--danger--hover: var(--pf-t--global--color--status--danger--200);
+ --pf-t--global--icon--color--status--success--clicked: var(--pf-t--global--color--status--success--200);
+ --pf-t--global--icon--color--status--success--hover: var(--pf-t--global--color--status--success--200);
+ --pf-t--global--icon--color--status--warning--clicked: var(--pf-t--global--color--status--warning--600);
+ --pf-t--global--icon--color--status--warning--default: var(--pf-t--global--color--status--warning--500);
+ --pf-t--global--icon--color--status--warning--hover: var(--pf-t--global--color--status--warning--600);
+ --pf-t--global--icon--color--subtle: var(--pf-t--global--icon--color--150);
+ --pf-t--global--text--color--disabled: var(--pf-t--global--color--disabled--200);
+ --pf-t--global--text--color--inverse: var(--pf-t--global--text--color--300);
+ --pf-t--global--text--color--link--default: var(--pf-t--global--text--color--link--200);
+ --pf-t--global--text--color--link--hover: var(--pf-t--global--text--color--link--250);
+ --pf-t--global--text--color--link--visited: var(--pf-t--global--text--color--link--350);
+ --pf-t--global--text--color--on-disabled: var(--pf-t--global--color--disabled--300);
+ --pf-t--global--text--color--on-highlight: var(--pf-t--global--text--color--100);
+ --pf-t--global--text--color--regular: var(--pf-t--global--text--color--100);
+ --pf-t--global--text--color--required: var(--pf-t--global--text--color--500);
+ --pf-t--global--text--color--status--danger--clicked: var(--pf-t--global--color--status--danger--clicked);
+ --pf-t--global--text--color--status--danger--hover: var(--pf-t--global--color--status--danger--hover);
+ --pf-t--global--text--color--status--success--clicked: var(--pf-t--global--color--status--success--200);
+ --pf-t--global--text--color--status--success--default: var(--pf-t--global--color--status--success--200);
+ --pf-t--global--text--color--status--success--hover: var(--pf-t--global--color--status--success--200);
+ --pf-t--global--text--color--status--warning--clicked: var(--pf-t--global--color--status--warning--600);
+ --pf-t--global--text--color--status--warning--default: var(--pf-t--global--color--status--warning--500);
+ --pf-t--global--text--color--status--warning--hover: var(--pf-t--global--color--status--warning--600);
+ --pf-t--global--text--color--subtle: var(--pf-t--global--text--color--250);
+ --pf-t--global--background--color--action--plain--alt--clicked: var(--pf-t--global--background--color--primary--default);
+ --pf-t--global--background--color--action--plain--alt--hover: var(--pf-t--global--background--color--primary--default);
+ --pf-t--global--background--color--control--default: var(--pf-t--global--background--color--primary--default);
+ --pf-t--global--border--color--alt: var(--pf-t--global--background--color--primary--default);
+ --pf-t--global--border--color--brand--clicked: var(--pf-t--global--color--brand--clicked);
+ --pf-t--global--border--color--brand--default: var(--pf-t--global--color--brand--default);
+ --pf-t--global--border--color--brand--hover: var(--pf-t--global--color--brand--hover);
+ --pf-t--global--border--color--high-contrast: var(--pf-t--global--border--color--default);
+ --pf-t--global--border--color--status--custom--clicked: var(--pf-t--global--color--status--custom--clicked);
+ --pf-t--global--border--color--status--custom--default: var(--pf-t--global--color--status--custom--default);
+ --pf-t--global--border--color--status--custom--hover: var(--pf-t--global--color--status--custom--hover);
+ --pf-t--global--border--color--status--danger--default: var(--pf-t--global--color--status--danger--default);
+ --pf-t--global--border--color--status--info--clicked: var(--pf-t--global--color--status--info--clicked);
+ --pf-t--global--border--color--status--info--default: var(--pf-t--global--color--status--info--default);
+ --pf-t--global--border--color--status--info--hover: var(--pf-t--global--color--status--info--hover);
+ --pf-t--global--color--status--read--on-primary: var(--pf-t--global--background--color--secondary--default);
+ --pf-t--global--color--status--unread--attention--default: var(--pf-t--global--color--status--danger--default);
+ --pf-t--global--color--status--unread--clicked: var(--pf-t--global--color--brand--clicked);
+ --pf-t--global--color--status--unread--default: var(--pf-t--global--color--brand--default);
+ --pf-t--global--color--status--unread--hover: var(--pf-t--global--color--brand--hover);
+ --pf-t--global--icon--color--favorite--clicked: var(--pf-t--global--color--favorite--clicked);
+ --pf-t--global--icon--color--favorite--default: var(--pf-t--global--color--favorite--default);
+ --pf-t--global--icon--color--favorite--hover: var(--pf-t--global--color--favorite--hover);
+ --pf-t--global--icon--color--nonstatus--on-blue--clicked: var(--pf-t--global--icon--color--regular);
+ --pf-t--global--icon--color--nonstatus--on-blue--default: var(--pf-t--global--icon--color--regular);
+ --pf-t--global--icon--color--nonstatus--on-blue--hover: var(--pf-t--global--icon--color--regular);
+ --pf-t--global--icon--color--nonstatus--on-gray--clicked: var(--pf-t--global--icon--color--regular);
+ --pf-t--global--icon--color--nonstatus--on-gray--default: var(--pf-t--global--icon--color--regular);
+ --pf-t--global--icon--color--nonstatus--on-gray--hover: var(--pf-t--global--icon--color--regular);
+ --pf-t--global--icon--color--nonstatus--on-green--clicked: var(--pf-t--global--icon--color--regular);
+ --pf-t--global--icon--color--nonstatus--on-green--default: var(--pf-t--global--icon--color--regular);
+ --pf-t--global--icon--color--nonstatus--on-green--hover: var(--pf-t--global--icon--color--regular);
+ --pf-t--global--icon--color--nonstatus--on-orange--clicked: var(--pf-t--global--icon--color--regular);
+ --pf-t--global--icon--color--nonstatus--on-orange--default: var(--pf-t--global--icon--color--regular);
+ --pf-t--global--icon--color--nonstatus--on-orange--hover: var(--pf-t--global--icon--color--regular);
+ --pf-t--global--icon--color--nonstatus--on-orangered--clicked: var(--pf-t--global--icon--color--regular);
+ --pf-t--global--icon--color--nonstatus--on-orangered--default: var(--pf-t--global--icon--color--regular);
+ --pf-t--global--icon--color--nonstatus--on-orangered--hover: var(--pf-t--global--icon--color--regular);
+ --pf-t--global--icon--color--nonstatus--on-purple--clicked: var(--pf-t--global--icon--color--regular);
+ --pf-t--global--icon--color--nonstatus--on-purple--default: var(--pf-t--global--icon--color--regular);
+ --pf-t--global--icon--color--nonstatus--on-purple--hover: var(--pf-t--global--icon--color--regular);
+ --pf-t--global--icon--color--nonstatus--on-red--clicked: var(--pf-t--global--icon--color--regular);
+ --pf-t--global--icon--color--nonstatus--on-red--default: var(--pf-t--global--icon--color--regular);
+ --pf-t--global--icon--color--nonstatus--on-red--hover: var(--pf-t--global--icon--color--regular);
+ --pf-t--global--icon--color--nonstatus--on-teal--clicked: var(--pf-t--global--icon--color--regular);
+ --pf-t--global--icon--color--nonstatus--on-teal--default: var(--pf-t--global--icon--color--regular);
+ --pf-t--global--icon--color--nonstatus--on-teal--hover: var(--pf-t--global--icon--color--regular);
+ --pf-t--global--icon--color--nonstatus--on-yellow--clicked: var(--pf-t--global--icon--color--regular);
+ --pf-t--global--icon--color--nonstatus--on-yellow--default: var(--pf-t--global--icon--color--regular);
+ --pf-t--global--icon--color--nonstatus--on-yellow--hover: var(--pf-t--global--icon--color--regular);
+ --pf-t--global--icon--color--on-brand--clicked: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--on-brand--default: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--on-brand--hover: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--custom--clicked: var(--pf-t--global--color--status--custom--clicked);
+ --pf-t--global--icon--color--status--custom--default: var(--pf-t--global--color--status--custom--default);
+ --pf-t--global--icon--color--status--custom--hover: var(--pf-t--global--color--status--custom--hover);
+ --pf-t--global--icon--color--status--info--clicked: var(--pf-t--global--color--status--info--clicked);
+ --pf-t--global--icon--color--status--info--default: var(--pf-t--global--color--status--info--default);
+ --pf-t--global--icon--color--status--info--hover: var(--pf-t--global--color--status--info--hover);
+ --pf-t--global--icon--color--status--on-custom--clicked: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--on-custom--default: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--on-custom--hover: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--on-danger--clicked: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--on-danger--default: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--on-danger--hover: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--on-info--clicked: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--on-info--default: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--on-info--hover: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--on-success--clicked: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--on-success--default: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--on-success--hover: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--on-warning--clicked: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--on-warning--default: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--on-warning--hover: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--unread--on-attention--clicked: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--unread--on-attention--default: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--unread--on-attention--hover: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--unread--on-default--clicked: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--unread--on-default--default: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--unread--on-default--hover: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--text--color--nonstatus--on-blue--clicked: var(--pf-t--global--text--color--regular);
+ --pf-t--global--text--color--nonstatus--on-blue--default: var(--pf-t--global--text--color--regular);
+ --pf-t--global--text--color--nonstatus--on-blue--hover: var(--pf-t--global--text--color--regular);
+ --pf-t--global--text--color--nonstatus--on-gray--clicked: var(--pf-t--global--text--color--regular);
+ --pf-t--global--text--color--nonstatus--on-gray--default: var(--pf-t--global--text--color--regular);
+ --pf-t--global--text--color--nonstatus--on-gray--hover: var(--pf-t--global--text--color--regular);
+ --pf-t--global--text--color--nonstatus--on-green--clicked: var(--pf-t--global--text--color--regular);
+ --pf-t--global--text--color--nonstatus--on-green--default: var(--pf-t--global--text--color--regular);
+ --pf-t--global--text--color--nonstatus--on-green--hover: var(--pf-t--global--text--color--regular);
+ --pf-t--global--text--color--nonstatus--on-orange--clicked: var(--pf-t--global--text--color--regular);
+ --pf-t--global--text--color--nonstatus--on-orange--default: var(--pf-t--global--text--color--regular);
+ --pf-t--global--text--color--nonstatus--on-orange--hover: var(--pf-t--global--text--color--regular);
+ --pf-t--global--text--color--nonstatus--on-orangered--clicked: var(--pf-t--global--text--color--regular);
+ --pf-t--global--text--color--nonstatus--on-orangered--default: var(--pf-t--global--text--color--regular);
+ --pf-t--global--text--color--nonstatus--on-orangered--hover: var(--pf-t--global--text--color--regular);
+ --pf-t--global--text--color--nonstatus--on-purple--clicked: var(--pf-t--global--text--color--regular);
+ --pf-t--global--text--color--nonstatus--on-purple--default: var(--pf-t--global--text--color--regular);
+ --pf-t--global--text--color--nonstatus--on-purple--hover: var(--pf-t--global--text--color--regular);
+ --pf-t--global--text--color--nonstatus--on-red--clicked: var(--pf-t--global--text--color--regular);
+ --pf-t--global--text--color--nonstatus--on-red--default: var(--pf-t--global--text--color--regular);
+ --pf-t--global--text--color--nonstatus--on-red--hover: var(--pf-t--global--text--color--regular);
+ --pf-t--global--text--color--nonstatus--on-teal--clicked: var(--pf-t--global--text--color--regular);
+ --pf-t--global--text--color--nonstatus--on-teal--default: var(--pf-t--global--text--color--regular);
+ --pf-t--global--text--color--nonstatus--on-teal--hover: var(--pf-t--global--text--color--regular);
+ --pf-t--global--text--color--nonstatus--on-yellow--clicked: var(--pf-t--global--text--color--regular);
+ --pf-t--global--text--color--nonstatus--on-yellow--default: var(--pf-t--global--text--color--regular);
+ --pf-t--global--text--color--nonstatus--on-yellow--hover: var(--pf-t--global--text--color--regular);
+ --pf-t--global--text--color--on-brand--clicked: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--on-brand--default: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--on-brand--hover: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--placeholder: var(--pf-t--global--text--color--subtle);
+ --pf-t--global--text--color--status--custom--clicked: var(--pf-t--global--color--status--custom--clicked);
+ --pf-t--global--text--color--status--custom--default: var(--pf-t--global--color--status--custom--default);
+ --pf-t--global--text--color--status--custom--hover: var(--pf-t--global--color--status--custom--hover);
+ --pf-t--global--text--color--status--danger--default: var(--pf-t--global--color--status--danger--default);
+ --pf-t--global--text--color--status--info--clicked: var(--pf-t--global--color--status--info--clicked);
+ --pf-t--global--text--color--status--info--default: var(--pf-t--global--color--status--info--default);
+ --pf-t--global--text--color--status--info--hover: var(--pf-t--global--color--status--info--hover);
+ --pf-t--global--text--color--status--on-custom--clicked: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--status--on-custom--default: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--status--on-custom--hover: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--status--on-danger--clicked: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--text--color--status--on-danger--default: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--status--on-danger--hover: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--status--on-info--clicked: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--status--on-info--default: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--status--on-info--hover: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--status--on-success--clicked: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--status--on-success--default: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--status--on-success--hover: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--status--on-warning--clicked: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--status--on-warning--default: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--status--on-warning--hover: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--status--unread--on-attention--clicked: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--status--unread--on-attention--default: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--status--unread--on-attention--hover: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--status--unread--on-default--clicked: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--status--unread--on-default--default: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--status--unread--on-default--hover: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--color--status--read--on-secondary: var(--pf-t--global--background--color--control--default);
+ }
+}
+@media (prefers-contrast: more) {
+ :root:where(.pf-v6-theme-dark) {
+ --pf-t--global--background--color--action--plain--default: rgba(0, 0, 0, 0.0000);
+ --pf-t--global--dark--background--color--500: rgba(21, 21, 21, 0.8000);
+ --pf-t--global--dark--background--color--600: rgba(199, 199, 199, 0.1500);
+ --pf-t--global--dark--box-shadow--color--100: rgba(0, 0, 0, 0.5000);
+ --pf-t--global--dark--box-shadow--color--200: rgba(0, 0, 0, 0.7000);
+ --pf-t--global--background--color--action--plain--clicked: var(--pf-t--global--dark--background--color--600);
+ --pf-t--global--background--color--action--plain--hover: var(--pf-t--global--dark--background--color--600);
+ --pf-t--global--background--color--backdrop--default: var(--pf-t--global--dark--background--color--500);
+ --pf-t--global--background--color--primary--default: var(--pf-t--color--black);
+ --pf-t--global--background--color--tertiary--default: var(--pf-t--global--dark--background--color--600);
+ --pf-t--global--border--color--default: var(--pf-t--color--gray--30);
+ --pf-t--global--border--color--on-secondary: var(--pf-t--color--gray--60);
+ --pf-t--global--box-shadow--color--lg--default: var(--pf-t--global--dark--box-shadow--color--100);
+ --pf-t--global--box-shadow--color--lg--directional: var(--pf-t--global--dark--box-shadow--color--200);
+ --pf-t--global--box-shadow--color--md--default: var(--pf-t--global--dark--box-shadow--color--100);
+ --pf-t--global--box-shadow--color--md--directional: var(--pf-t--global--dark--box-shadow--color--200);
+ --pf-t--global--box-shadow--color--sm--default: var(--pf-t--global--dark--box-shadow--color--100);
+ --pf-t--global--box-shadow--color--sm--directional: var(--pf-t--global--dark--box-shadow--color--200);
+ --pf-t--global--dark--background--color--100: var(--pf-t--color--gray--95);
+ --pf-t--global--dark--background--color--200: var(--pf-t--color--gray--80);
+ --pf-t--global--dark--background--color--300: var(--pf-t--color--gray--70);
+ --pf-t--global--dark--background--color--400: var(--pf-t--color--gray--10);
+ --pf-t--global--dark--background--color--450: var(--pf-t--color--gray--20);
+ --pf-t--global--dark--background--color--highlight--100: var(--pf-t--color--yellow--20);
+ --pf-t--global--dark--background--color--highlight--200: var(--pf-t--color--yellow--30);
+ --pf-t--global--dark--border--color--100: var(--pf-t--color--gray--50);
+ --pf-t--global--dark--border--color--200: var(--pf-t--color--gray--40);
+ --pf-t--global--dark--border--color--50: var(--pf-t--color--gray--60);
+ --pf-t--global--dark--color--brand--100: var(--pf-t--color--blue--30);
+ --pf-t--global--dark--color--brand--200: var(--pf-t--color--blue--20);
+ --pf-t--global--dark--color--brand--300: var(--pf-t--color--blue--10);
+ --pf-t--global--dark--color--disabled--100: var(--pf-t--color--gray--40);
+ --pf-t--global--dark--color--disabled--200: var(--pf-t--color--gray--50);
+ --pf-t--global--dark--color--disabled--300: var(--pf-t--color--gray--70);
+ --pf-t--global--dark--color--disabled--400: var(--pf-t--color--gray--90);
+ --pf-t--global--dark--color--favorite--100: var(--pf-t--color--yellow--30);
+ --pf-t--global--dark--color--favorite--200: var(--pf-t--color--yellow--20);
+ --pf-t--global--dark--color--nonstatus--blue--100: var(--pf-t--color--blue--30);
+ --pf-t--global--dark--color--nonstatus--blue--200: var(--pf-t--color--blue--20);
+ --pf-t--global--dark--color--nonstatus--blue--300: var(--pf-t--color--blue--10);
+ --pf-t--global--dark--color--nonstatus--gray--100: var(--pf-t--color--gray--60);
+ --pf-t--global--dark--color--nonstatus--gray--200: var(--pf-t--color--gray--50);
+ --pf-t--global--dark--color--nonstatus--gray--300: var(--pf-t--color--gray--40);
+ --pf-t--global--dark--color--nonstatus--gray--50: var(--pf-t--color--gray--70);
+ --pf-t--global--dark--color--nonstatus--green--100: var(--pf-t--color--green--30);
+ --pf-t--global--dark--color--nonstatus--green--200: var(--pf-t--color--green--20);
+ --pf-t--global--dark--color--nonstatus--green--300: var(--pf-t--color--green--10);
+ --pf-t--global--dark--color--nonstatus--orange--100: var(--pf-t--color--orange--30);
+ --pf-t--global--dark--color--nonstatus--orange--200: var(--pf-t--color--orange--20);
+ --pf-t--global--dark--color--nonstatus--orange--300: var(--pf-t--color--orange--10);
+ --pf-t--global--dark--color--nonstatus--orangered--100: var(--pf-t--color--red-orange--30);
+ --pf-t--global--dark--color--nonstatus--orangered--200: var(--pf-t--color--red-orange--20);
+ --pf-t--global--dark--color--nonstatus--orangered--300: var(--pf-t--color--red-orange--10);
+ --pf-t--global--dark--color--nonstatus--purple--100: var(--pf-t--color--purple--30);
+ --pf-t--global--dark--color--nonstatus--purple--200: var(--pf-t--color--purple--20);
+ --pf-t--global--dark--color--nonstatus--purple--300: var(--pf-t--color--purple--10);
+ --pf-t--global--dark--color--nonstatus--red--100: var(--pf-t--color--red--30);
+ --pf-t--global--dark--color--nonstatus--red--200: var(--pf-t--color--red--20);
+ --pf-t--global--dark--color--nonstatus--red--300: var(--pf-t--color--red--10);
+ --pf-t--global--dark--color--nonstatus--teal--100: var(--pf-t--color--teal--30);
+ --pf-t--global--dark--color--nonstatus--teal--200: var(--pf-t--color--teal--20);
+ --pf-t--global--dark--color--nonstatus--teal--300: var(--pf-t--color--teal--10);
+ --pf-t--global--dark--color--nonstatus--yellow--100: var(--pf-t--color--yellow--30);
+ --pf-t--global--dark--color--nonstatus--yellow--200: var(--pf-t--color--yellow--20);
+ --pf-t--global--dark--color--nonstatus--yellow--300: var(--pf-t--color--yellow--10);
+ --pf-t--global--dark--color--severity--critical--100: var(--pf-t--color--red-orange--50);
+ --pf-t--global--dark--color--severity--critical--200: var(--pf-t--color--red-orange--40);
+ --pf-t--global--dark--color--severity--important--100: var(--pf-t--color--orange--40);
+ --pf-t--global--dark--color--severity--minor--100: var(--pf-t--color--gray--30);
+ --pf-t--global--dark--color--severity--moderate--100: var(--pf-t--color--yellow--30);
+ --pf-t--global--dark--color--severity--none--100: var(--pf-t--color--blue--30);
+ --pf-t--global--dark--color--severity--undefined--100: var(--pf-t--color--gray--40);
+ --pf-t--global--dark--color--status--custom--100: var(--pf-t--color--teal--40);
+ --pf-t--global--dark--color--status--custom--200: var(--pf-t--color--teal--30);
+ --pf-t--global--dark--color--status--custom--300: var(--pf-t--color--teal--20);
+ --pf-t--global--dark--color--status--danger--100: var(--pf-t--color--red-orange--50);
+ --pf-t--global--dark--color--status--danger--200: var(--pf-t--color--red-orange--40);
+ --pf-t--global--dark--color--status--danger--250: var(--pf-t--color--red-orange--30);
+ --pf-t--global--dark--color--status--danger--300: var(--pf-t--color--red-orange--20);
+ --pf-t--global--dark--color--status--info--100: var(--pf-t--color--purple--30);
+ --pf-t--global--dark--color--status--info--200: var(--pf-t--color--purple--20);
+ --pf-t--global--dark--color--status--info--300: var(--pf-t--color--purple--10);
+ --pf-t--global--dark--color--status--success--100: var(--pf-t--color--green--40);
+ --pf-t--global--dark--color--status--success--200: var(--pf-t--color--green--30);
+ --pf-t--global--dark--color--status--success--300: var(--pf-t--color--green--20);
+ --pf-t--global--dark--color--status--warning--100: var(--pf-t--color--yellow--30);
+ --pf-t--global--dark--color--status--warning--200: var(--pf-t--color--yellow--20);
+ --pf-t--global--dark--icon--color--100: var(--pf-t--color--gray--10);
+ --pf-t--global--dark--icon--color--200: var(--pf-t--color--gray--40);
+ --pf-t--global--dark--icon--color--300: var(--pf-t--color--gray--90);
+ --pf-t--global--dark--text--color--100: var(--pf-t--color--white);
+ --pf-t--global--dark--text--color--200: var(--pf-t--color--gray--30);
+ --pf-t--global--dark--text--color--300: var(--pf-t--color--gray--90);
+ --pf-t--global--dark--text--color--400: var(--pf-t--color--red-orange--30);
+ --pf-t--global--dark--text--color--link--100: var(--pf-t--color--blue--20);
+ --pf-t--global--dark--text--color--link--200: var(--pf-t--color--blue--10);
+ --pf-t--global--dark--text--color--link--300: var(--pf-t--color--purple--30);
+ --pf-t--global--dark--text--color--link--400: var(--pf-t--color--purple--20);
+ --pf-t--global--background--color--action--plain--alt--clicked: var(--pf-t--global--background--color--primary--default);
+ --pf-t--global--background--color--action--plain--alt--hover: var(--pf-t--global--background--color--primary--default);
+ --pf-t--global--background--color--control--default: var(--pf-t--global--dark--background--color--100);
+ --pf-t--global--background--color--control--read-only: var(--pf-t--global--dark--background--color--300);
+ --pf-t--global--background--color--disabled--default: var(--pf-t--global--dark--color--disabled--200);
+ --pf-t--global--background--color--floating--clicked: var(--pf-t--global--dark--background--color--300);
+ --pf-t--global--background--color--floating--default: var(--pf-t--global--dark--background--color--200);
+ --pf-t--global--background--color--floating--hover: var(--pf-t--global--dark--background--color--300);
+ --pf-t--global--background--color--highlight--clicked: var(--pf-t--global--dark--background--color--highlight--200);
+ --pf-t--global--background--color--highlight--default: var(--pf-t--global--dark--background--color--highlight--100);
+ --pf-t--global--background--color--inverse--clicked: var(--pf-t--global--dark--background--color--450);
+ --pf-t--global--background--color--inverse--default: var(--pf-t--global--dark--background--color--400);
+ --pf-t--global--background--color--inverse--hover: var(--pf-t--global--dark--background--color--450);
+ --pf-t--global--background--color--primary--clicked: var(--pf-t--global--dark--background--color--100);
+ --pf-t--global--background--color--primary--hover: var(--pf-t--global--dark--background--color--100);
+ --pf-t--global--background--color--secondary--clicked: var(--pf-t--global--dark--background--color--200);
+ --pf-t--global--background--color--secondary--default: var(--pf-t--global--dark--background--color--100);
+ --pf-t--global--background--color--secondary--hover: var(--pf-t--global--dark--background--color--200);
+ --pf-t--global--border--color--alt: var(--pf-t--global--background--color--primary--default);
+ --pf-t--global--border--color--clicked: var(--pf-t--global--dark--color--brand--200);
+ --pf-t--global--border--color--control--read-only: var(--pf-t--global--dark--border--color--50);
+ --pf-t--global--border--color--disabled: var(--pf-t--global--dark--color--disabled--200);
+ --pf-t--global--border--color--high-contrast: var(--pf-t--global--border--color--default);
+ --pf-t--global--border--color--hover: var(--pf-t--global--dark--color--brand--100);
+ --pf-t--global--border--color--nonstatus--blue--clicked: var(--pf-t--global--dark--color--nonstatus--blue--200);
+ --pf-t--global--border--color--nonstatus--blue--default: var(--pf-t--global--dark--color--nonstatus--blue--100);
+ --pf-t--global--border--color--nonstatus--blue--hover: var(--pf-t--global--dark--color--nonstatus--blue--200);
+ --pf-t--global--border--color--nonstatus--gray--clicked: var(--pf-t--global--dark--color--nonstatus--gray--300);
+ --pf-t--global--border--color--nonstatus--gray--default: var(--pf-t--global--dark--color--nonstatus--gray--200);
+ --pf-t--global--border--color--nonstatus--gray--hover: var(--pf-t--global--dark--color--nonstatus--gray--300);
+ --pf-t--global--border--color--nonstatus--green--clicked: var(--pf-t--global--dark--color--nonstatus--green--200);
+ --pf-t--global--border--color--nonstatus--green--default: var(--pf-t--global--dark--color--nonstatus--green--100);
+ --pf-t--global--border--color--nonstatus--green--hover: var(--pf-t--global--dark--color--nonstatus--green--200);
+ --pf-t--global--border--color--nonstatus--orange--clicked: var(--pf-t--global--dark--color--nonstatus--orange--200);
+ --pf-t--global--border--color--nonstatus--orange--default: var(--pf-t--global--dark--color--nonstatus--orange--100);
+ --pf-t--global--border--color--nonstatus--orange--hover: var(--pf-t--global--dark--color--nonstatus--orange--200);
+ --pf-t--global--border--color--nonstatus--orangered--clicked: var(--pf-t--global--dark--color--nonstatus--orangered--200);
+ --pf-t--global--border--color--nonstatus--orangered--default: var(--pf-t--global--dark--color--nonstatus--orangered--100);
+ --pf-t--global--border--color--nonstatus--orangered--hover: var(--pf-t--global--dark--color--nonstatus--orangered--200);
+ --pf-t--global--border--color--nonstatus--purple--clicked: var(--pf-t--global--dark--color--nonstatus--purple--200);
+ --pf-t--global--border--color--nonstatus--purple--default: var(--pf-t--global--dark--color--nonstatus--purple--100);
+ --pf-t--global--border--color--nonstatus--purple--hover: var(--pf-t--global--dark--color--nonstatus--purple--200);
+ --pf-t--global--border--color--nonstatus--red--clicked: var(--pf-t--global--dark--color--nonstatus--red--200);
+ --pf-t--global--border--color--nonstatus--red--default: var(--pf-t--global--dark--color--nonstatus--red--100);
+ --pf-t--global--border--color--nonstatus--red--hover: var(--pf-t--global--dark--color--nonstatus--red--200);
+ --pf-t--global--border--color--nonstatus--teal--clicked: var(--pf-t--global--dark--color--nonstatus--teal--200);
+ --pf-t--global--border--color--nonstatus--teal--default: var(--pf-t--global--dark--color--nonstatus--teal--100);
+ --pf-t--global--border--color--nonstatus--teal--hover: var(--pf-t--global--dark--color--nonstatus--teal--200);
+ --pf-t--global--border--color--nonstatus--yellow--clicked: var(--pf-t--global--dark--color--nonstatus--yellow--200);
+ --pf-t--global--border--color--nonstatus--yellow--default: var(--pf-t--global--dark--color--nonstatus--yellow--100);
+ --pf-t--global--border--color--nonstatus--yellow--hover: var(--pf-t--global--dark--color--nonstatus--yellow--200);
+ --pf-t--global--color--brand--clicked: var(--pf-t--global--dark--color--brand--200);
+ --pf-t--global--color--brand--default: var(--pf-t--global--dark--color--brand--100);
+ --pf-t--global--color--brand--hover: var(--pf-t--global--dark--color--brand--200);
+ --pf-t--global--color--favorite--clicked: var(--pf-t--global--dark--color--favorite--200);
+ --pf-t--global--color--favorite--default: var(--pf-t--global--dark--color--favorite--100);
+ --pf-t--global--color--favorite--hover: var(--pf-t--global--dark--color--favorite--200);
+ --pf-t--global--color--nonstatus--blue--clicked: var(--pf-t--global--dark--color--nonstatus--blue--200);
+ --pf-t--global--color--nonstatus--blue--default: var(--pf-t--global--dark--color--nonstatus--blue--100);
+ --pf-t--global--color--nonstatus--blue--hover: var(--pf-t--global--dark--color--nonstatus--blue--200);
+ --pf-t--global--color--nonstatus--gray--clicked: var(--pf-t--global--dark--color--nonstatus--gray--100);
+ --pf-t--global--color--nonstatus--gray--default: var(--pf-t--global--dark--color--nonstatus--gray--50);
+ --pf-t--global--color--nonstatus--gray--hover: var(--pf-t--global--dark--color--nonstatus--gray--100);
+ --pf-t--global--color--nonstatus--green--clicked: var(--pf-t--global--dark--color--nonstatus--green--200);
+ --pf-t--global--color--nonstatus--green--default: var(--pf-t--global--dark--color--nonstatus--green--100);
+ --pf-t--global--color--nonstatus--green--hover: var(--pf-t--global--dark--color--nonstatus--green--200);
+ --pf-t--global--color--nonstatus--orange--clicked: var(--pf-t--global--dark--color--nonstatus--orange--200);
+ --pf-t--global--color--nonstatus--orange--default: var(--pf-t--global--dark--color--nonstatus--orange--100);
+ --pf-t--global--color--nonstatus--orange--hover: var(--pf-t--global--dark--color--nonstatus--orange--200);
+ --pf-t--global--color--nonstatus--orangered--clicked: var(--pf-t--global--dark--color--nonstatus--orangered--200);
+ --pf-t--global--color--nonstatus--orangered--default: var(--pf-t--global--dark--color--nonstatus--orangered--100);
+ --pf-t--global--color--nonstatus--orangered--hover: var(--pf-t--global--dark--color--nonstatus--orangered--200);
+ --pf-t--global--color--nonstatus--purple--clicked: var(--pf-t--global--dark--color--nonstatus--purple--200);
+ --pf-t--global--color--nonstatus--purple--default: var(--pf-t--global--dark--color--nonstatus--purple--100);
+ --pf-t--global--color--nonstatus--purple--hover: var(--pf-t--global--dark--color--nonstatus--purple--200);
+ --pf-t--global--color--nonstatus--red--clicked: var(--pf-t--global--dark--color--nonstatus--red--200);
+ --pf-t--global--color--nonstatus--red--default: var(--pf-t--global--dark--color--nonstatus--red--100);
+ --pf-t--global--color--nonstatus--red--hover: var(--pf-t--global--dark--color--nonstatus--red--200);
+ --pf-t--global--color--nonstatus--teal--clicked: var(--pf-t--global--dark--color--nonstatus--teal--200);
+ --pf-t--global--color--nonstatus--teal--default: var(--pf-t--global--dark--color--nonstatus--teal--100);
+ --pf-t--global--color--nonstatus--teal--hover: var(--pf-t--global--dark--color--nonstatus--teal--200);
+ --pf-t--global--color--nonstatus--yellow--clicked: var(--pf-t--global--dark--color--nonstatus--yellow--200);
+ --pf-t--global--color--nonstatus--yellow--default: var(--pf-t--global--dark--color--nonstatus--yellow--100);
+ --pf-t--global--color--nonstatus--yellow--hover: var(--pf-t--global--dark--color--nonstatus--yellow--200);
+ --pf-t--global--color--status--custom--clicked: var(--pf-t--global--dark--color--status--custom--300);
+ --pf-t--global--color--status--custom--default: var(--pf-t--global--dark--color--status--custom--200);
+ --pf-t--global--color--status--custom--hover: var(--pf-t--global--dark--color--status--custom--300);
+ --pf-t--global--color--status--danger--clicked: var(--pf-t--global--dark--color--status--danger--250);
+ --pf-t--global--color--status--danger--default: var(--pf-t--global--dark--color--status--danger--200);
+ --pf-t--global--color--status--danger--hover: var(--pf-t--global--dark--color--status--danger--250);
+ --pf-t--global--color--status--info--clicked: var(--pf-t--global--dark--color--status--info--200);
+ --pf-t--global--color--status--info--default: var(--pf-t--global--dark--color--status--info--100);
+ --pf-t--global--color--status--info--hover: var(--pf-t--global--dark--color--status--info--200);
+ --pf-t--global--color--status--success--clicked: var(--pf-t--global--dark--color--status--success--300);
+ --pf-t--global--color--status--success--default: var(--pf-t--global--dark--color--status--success--200);
+ --pf-t--global--color--status--success--hover: var(--pf-t--global--dark--color--status--success--300);
+ --pf-t--global--color--status--warning--clicked: var(--pf-t--global--dark--color--status--warning--200);
+ --pf-t--global--color--status--warning--default: var(--pf-t--global--dark--color--status--warning--100);
+ --pf-t--global--color--status--warning--hover: var(--pf-t--global--dark--color--status--warning--200);
+ --pf-t--global--icon--color--brand--clicked: var(--pf-t--global--dark--color--brand--300);
+ --pf-t--global--icon--color--brand--default: var(--pf-t--global--dark--color--brand--200);
+ --pf-t--global--icon--color--brand--hover: var(--pf-t--global--dark--color--brand--300);
+ --pf-t--global--icon--color--disabled: var(--pf-t--global--dark--color--disabled--200);
+ --pf-t--global--icon--color--inverse: var(--pf-t--global--dark--icon--color--300);
+ --pf-t--global--icon--color--on-disabled: var(--pf-t--global--dark--color--disabled--300);
+ --pf-t--global--icon--color--regular: var(--pf-t--global--dark--icon--color--100);
+ --pf-t--global--icon--color--severity--critical--default: var(--pf-t--global--dark--color--severity--critical--200);
+ --pf-t--global--icon--color--severity--important--default: var(--pf-t--global--dark--color--severity--important--100);
+ --pf-t--global--icon--color--severity--minor--default: var(--pf-t--global--dark--color--severity--minor--100);
+ --pf-t--global--icon--color--severity--moderate--default: var(--pf-t--global--dark--color--severity--moderate--100);
+ --pf-t--global--icon--color--severity--none--default: var(--pf-t--global--dark--color--severity--none--100);
+ --pf-t--global--icon--color--severity--undefined--default: var(--pf-t--global--dark--color--severity--undefined--100);
+ --pf-t--global--icon--color--subtle: var(--pf-t--global--dark--icon--color--200);
+ --pf-t--global--text--color--brand--clicked: var(--pf-t--global--dark--color--brand--300);
+ --pf-t--global--text--color--brand--default: var(--pf-t--global--dark--color--brand--200);
+ --pf-t--global--text--color--brand--hover: var(--pf-t--global--dark--color--brand--300);
+ --pf-t--global--text--color--disabled: var(--pf-t--global--dark--color--disabled--200);
+ --pf-t--global--text--color--inverse: var(--pf-t--global--dark--text--color--300);
+ --pf-t--global--text--color--link--default: var(--pf-t--global--dark--text--color--link--100);
+ --pf-t--global--text--color--link--hover: var(--pf-t--global--dark--text--color--link--200);
+ --pf-t--global--text--color--link--visited: var(--pf-t--global--dark--text--color--link--400);
+ --pf-t--global--text--color--on-disabled: var(--pf-t--global--dark--color--disabled--400);
+ --pf-t--global--text--color--on-highlight: var(--pf-t--global--dark--text--color--300);
+ --pf-t--global--text--color--regular: var(--pf-t--global--dark--text--color--100);
+ --pf-t--global--text--color--required: var(--pf-t--global--dark--text--color--400);
+ --pf-t--global--text--color--status--danger--clicked: var(--pf-t--global--dark--color--status--danger--300);
+ --pf-t--global--text--color--status--danger--default: var(--pf-t--global--dark--color--status--danger--300);
+ --pf-t--global--text--color--status--danger--hover: var(--pf-t--global--dark--color--status--danger--300);
+ --pf-t--global--text--color--subtle: var(--pf-t--global--dark--text--color--200);
+ --pf-t--global--border--color--brand--clicked: var(--pf-t--global--color--brand--clicked);
+ --pf-t--global--border--color--brand--default: var(--pf-t--global--color--brand--default);
+ --pf-t--global--border--color--brand--hover: var(--pf-t--global--color--brand--hover);
+ --pf-t--global--border--color--status--custom--clicked: var(--pf-t--global--color--status--custom--clicked);
+ --pf-t--global--border--color--status--custom--default: var(--pf-t--global--color--status--custom--default);
+ --pf-t--global--border--color--status--custom--hover: var(--pf-t--global--color--status--custom--hover);
+ --pf-t--global--border--color--status--danger--clicked: var(--pf-t--global--color--status--danger--clicked);
+ --pf-t--global--border--color--status--danger--default: var(--pf-t--global--color--status--danger--default);
+ --pf-t--global--border--color--status--danger--hover: var(--pf-t--global--color--status--danger--hover);
+ --pf-t--global--border--color--status--info--clicked: var(--pf-t--global--color--status--info--clicked);
+ --pf-t--global--border--color--status--info--default: var(--pf-t--global--color--status--info--default);
+ --pf-t--global--border--color--status--info--hover: var(--pf-t--global--color--status--info--hover);
+ --pf-t--global--border--color--status--success--clicked: var(--pf-t--global--color--status--success--clicked);
+ --pf-t--global--border--color--status--success--default: var(--pf-t--global--color--status--success--default);
+ --pf-t--global--border--color--status--success--hover: var(--pf-t--global--color--status--success--hover);
+ --pf-t--global--border--color--status--warning--clicked: var(--pf-t--global--color--status--warning--clicked);
+ --pf-t--global--border--color--status--warning--default: var(--pf-t--global--color--status--warning--default);
+ --pf-t--global--border--color--status--warning--hover: var(--pf-t--global--color--status--warning--hover);
+ --pf-t--global--color--status--read--on-primary: var(--pf-t--global--background--color--secondary--default);
+ --pf-t--global--color--status--read--on-secondary: var(--pf-t--global--background--color--control--default);
+ --pf-t--global--color--status--unread--attention--clicked: var(--pf-t--global--color--status--danger--clicked);
+ --pf-t--global--color--status--unread--attention--default: var(--pf-t--global--color--status--danger--default);
+ --pf-t--global--color--status--unread--attention--hover: var(--pf-t--global--color--status--danger--hover);
+ --pf-t--global--color--status--unread--clicked: var(--pf-t--global--color--brand--clicked);
+ --pf-t--global--color--status--unread--default: var(--pf-t--global--color--brand--default);
+ --pf-t--global--color--status--unread--hover: var(--pf-t--global--color--brand--hover);
+ --pf-t--global--icon--color--favorite--clicked: var(--pf-t--global--color--favorite--clicked);
+ --pf-t--global--icon--color--favorite--default: var(--pf-t--global--color--favorite--default);
+ --pf-t--global--icon--color--favorite--hover: var(--pf-t--global--color--favorite--hover);
+ --pf-t--global--icon--color--nonstatus--on-blue--clicked: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--nonstatus--on-blue--default: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--nonstatus--on-blue--hover: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--nonstatus--on-gray--clicked: var(--pf-t--global--icon--color--regular);
+ --pf-t--global--icon--color--nonstatus--on-gray--default: var(--pf-t--global--icon--color--regular);
+ --pf-t--global--icon--color--nonstatus--on-gray--hover: var(--pf-t--global--icon--color--regular);
+ --pf-t--global--icon--color--nonstatus--on-green--clicked: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--nonstatus--on-green--default: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--nonstatus--on-green--hover: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--nonstatus--on-orange--clicked: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--nonstatus--on-orange--default: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--nonstatus--on-orange--hover: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--nonstatus--on-orangered--clicked: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--nonstatus--on-orangered--default: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--nonstatus--on-orangered--hover: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--nonstatus--on-purple--clicked: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--nonstatus--on-purple--default: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--nonstatus--on-purple--hover: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--nonstatus--on-red--clicked: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--nonstatus--on-red--default: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--nonstatus--on-red--hover: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--nonstatus--on-teal--clicked: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--nonstatus--on-teal--default: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--nonstatus--on-teal--hover: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--nonstatus--on-yellow--clicked: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--nonstatus--on-yellow--default: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--nonstatus--on-yellow--hover: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--on-brand--clicked: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--on-brand--default: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--on-brand--hover: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--custom--clicked: var(--pf-t--global--color--status--custom--clicked);
+ --pf-t--global--icon--color--status--custom--default: var(--pf-t--global--color--status--custom--default);
+ --pf-t--global--icon--color--status--custom--hover: var(--pf-t--global--color--status--custom--hover);
+ --pf-t--global--icon--color--status--danger--clicked: var(--pf-t--global--color--status--danger--clicked);
+ --pf-t--global--icon--color--status--danger--default: var(--pf-t--global--color--status--danger--default);
+ --pf-t--global--icon--color--status--danger--hover: var(--pf-t--global--color--status--danger--hover);
+ --pf-t--global--icon--color--status--info--clicked: var(--pf-t--global--color--status--info--clicked);
+ --pf-t--global--icon--color--status--info--default: var(--pf-t--global--color--status--info--default);
+ --pf-t--global--icon--color--status--info--hover: var(--pf-t--global--color--status--info--hover);
+ --pf-t--global--icon--color--status--on-custom--clicked: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--on-custom--default: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--on-custom--hover: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--on-danger--clicked: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--on-danger--default: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--on-danger--hover: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--on-info--clicked: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--on-info--default: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--on-info--hover: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--on-success--clicked: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--on-success--default: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--on-success--hover: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--on-warning--clicked: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--on-warning--default: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--on-warning--hover: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--success--clicked: var(--pf-t--global--color--status--success--clicked);
+ --pf-t--global--icon--color--status--success--default: var(--pf-t--global--color--status--success--default);
+ --pf-t--global--icon--color--status--success--hover: var(--pf-t--global--color--status--success--hover);
+ --pf-t--global--icon--color--status--unread--on-attention--clicked: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--unread--on-attention--default: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--unread--on-attention--hover: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--unread--on-default--clicked: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--unread--on-default--default: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--unread--on-default--hover: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--warning--clicked: var(--pf-t--global--color--status--warning--clicked);
+ --pf-t--global--icon--color--status--warning--default: var(--pf-t--global--color--status--warning--default);
+ --pf-t--global--icon--color--status--warning--hover: var(--pf-t--global--color--status--warning--hover);
+ --pf-t--global--text--color--nonstatus--on-blue--clicked: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--nonstatus--on-blue--default: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--nonstatus--on-blue--hover: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--nonstatus--on-gray--clicked: var(--pf-t--global--text--color--regular);
+ --pf-t--global--text--color--nonstatus--on-gray--default: var(--pf-t--global--text--color--regular);
+ --pf-t--global--text--color--nonstatus--on-gray--hover: var(--pf-t--global--text--color--regular);
+ --pf-t--global--text--color--nonstatus--on-green--clicked: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--nonstatus--on-green--default: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--nonstatus--on-green--hover: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--nonstatus--on-orange--clicked: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--nonstatus--on-orange--default: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--nonstatus--on-orange--hover: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--nonstatus--on-orangered--clicked: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--nonstatus--on-orangered--default: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--nonstatus--on-orangered--hover: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--nonstatus--on-purple--clicked: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--nonstatus--on-purple--default: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--nonstatus--on-purple--hover: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--nonstatus--on-red--clicked: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--nonstatus--on-red--default: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--nonstatus--on-red--hover: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--nonstatus--on-teal--clicked: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--nonstatus--on-teal--default: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--nonstatus--on-teal--hover: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--nonstatus--on-yellow--clicked: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--nonstatus--on-yellow--default: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--nonstatus--on-yellow--hover: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--on-brand--clicked: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--on-brand--default: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--on-brand--hover: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--placeholder: var(--pf-t--global--text--color--subtle);
+ --pf-t--global--text--color--status--custom--clicked: var(--pf-t--global--color--status--custom--clicked);
+ --pf-t--global--text--color--status--custom--default: var(--pf-t--global--color--status--custom--default);
+ --pf-t--global--text--color--status--custom--hover: var(--pf-t--global--color--status--custom--hover);
+ --pf-t--global--text--color--status--info--clicked: var(--pf-t--global--color--status--info--clicked);
+ --pf-t--global--text--color--status--info--default: var(--pf-t--global--color--status--info--default);
+ --pf-t--global--text--color--status--info--hover: var(--pf-t--global--color--status--info--hover);
+ --pf-t--global--text--color--status--on-custom--clicked: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--status--on-custom--default: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--status--on-custom--hover: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--status--on-danger--clicked: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--status--on-danger--default: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--status--on-danger--hover: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--status--on-info--clicked: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--status--on-info--default: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--status--on-info--hover: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--status--on-success--clicked: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--status--on-success--default: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--status--on-success--hover: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--status--on-warning--clicked: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--status--on-warning--default: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--status--on-warning--hover: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--status--success--clicked: var(--pf-t--global--color--status--success--clicked);
+ --pf-t--global--text--color--status--success--default: var(--pf-t--global--color--status--success--default);
+ --pf-t--global--text--color--status--success--hover: var(--pf-t--global--color--status--success--hover);
+ --pf-t--global--text--color--status--unread--on-attention--clicked: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--status--unread--on-attention--default: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--status--unread--on-attention--hover: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--status--unread--on-default--clicked: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--status--unread--on-default--default: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--status--unread--on-default--hover: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--status--warning--clicked: var(--pf-t--global--color--status--warning--clicked);
+ --pf-t--global--text--color--status--warning--default: var(--pf-t--global--color--status--warning--default);
+ --pf-t--global--text--color--status--warning--hover: var(--pf-t--global--color--status--warning--hover);
+ }
+}
+:is(.pf-v6-m-dir-rtl, [dir=rtl]) {
+ --pf-v6-global--inverse--multiplier: -1;
+}
\ No newline at end of file
diff --git a/packages/react-docs/patternfly-docs/patternfly.css b/packages/react-docs/patternfly-docs/patternfly.css
new file mode 100644
index 00000000000..8114f588f42
--- /dev/null
+++ b/packages/react-docs/patternfly-docs/patternfly.css
@@ -0,0 +1,35641 @@
+:where(html,
+body,
+p,
+ol,
+ul,
+li,
+dl,
+dt,
+dd,
+blockquote,
+figure,
+fieldset,
+legend,
+textarea,
+pre,
+iframe,
+hr,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6) {
+ padding: 0;
+ margin: 0;
+}
+
+*,
+*::before,
+*::after {
+ box-sizing: border-box;
+ scrollbar-color: var(--pf-t--global--border--color--default) transparent;
+}
+
+*::-webkit-scrollbar-thumb {
+ background-color: var(--pf-t--global--border--color--default);
+ border-radius: var(--pf-t--global--spacer--xs);
+}
+
+*::-webkit-scrollbar-track {
+ background-color: transparent;
+}
+
+*::-webkit-scrollbar {
+ max-width: var(--pf-t--global--spacer--sm);
+ max-height: var(--pf-t--global--spacer--sm);
+}
+
+:where(html,
+body) {
+ height: 100%;
+}
+
+:where(body) {
+ font-family: var(--pf-t--global--font--family--body);
+ font-size: var(--pf-t--global--font--size--body--default);
+ font-weight: var(--pf-t--global--font--weight--body--default);
+ line-height: var(--pf-t--global--font--line-height--body);
+ color: var(--pf-t--global--text--color--regular);
+}
+
+:where(h1,
+h2,
+h3,
+h4,
+h5,
+h6) {
+ font-size: 100%;
+ font-weight: var(--pf-t--global--font--weight--body--default);
+}
+
+:where(ul) {
+ list-style: none;
+}
+
+:where(button,
+input,
+optgroup,
+select,
+textarea) {
+ margin: 0;
+ font-family: inherit;
+ font-size: 100%;
+ line-height: var(--pf-t--global--font--line-height--body);
+ color: var(--pf-t--global--text--color--regular);
+}
+
+:where(img,
+embed,
+iframe,
+object,
+audio,
+video) {
+ max-width: 100%;
+ height: auto;
+}
+
+:where(iframe) {
+ border: 0;
+}
+
+:where(table) {
+ border-spacing: 0;
+ border-collapse: collapse;
+}
+
+:where(td,
+th) {
+ padding: 0;
+ text-align: start;
+}
+
+:where(code,
+pre) {
+ font-family: var(--pf-t--global--font--family--mono);
+}
+
+:where(a) {
+ color: var(--pf-t--global--text--color--link--default);
+ text-decoration-line: var(--pf-t--global--text-decoration--link--line--default);
+}
+
+:where(a:hover, a:focus) {
+ color: var(--pf-t--global--text--color--link--hover);
+ text-decoration-line: var(--pf-t--global--text-decoration--link--line--hover);
+}
+
+:where(a,
+button) {
+ cursor: pointer;
+}
+
+:where(.pf-v6-theme-dark) {
+ color-scheme: dark;
+}
+
+.pf-v6-screen-reader {
+ position: fixed;
+ inset-block-start: 0;
+ inset-inline-start: 0;
+ overflow: hidden;
+ clip: rect(0, 0, 0, 0);
+ white-space: nowrap;
+ border: 0;
+}
+.pf-v6-screen-reader.pf-m-full-size {
+ width: 100%;
+ height: 100%;
+}
+.pf-v6-screen-reader.pf-m-absolute {
+ position: absolute;
+}
+
+.pf-v6-m-tabular-nums {
+ font-variant-numeric: tabular-nums;
+}
+
+.pf-v6-m-legacy-font {
+ --pf-t--global--font--family--body: var(--pf-t--global--font--family--body--legacy);
+ --pf-t--global--font--family--heading: var(--pf-t--global--font--family--heading--legacy);
+ --pf-t--global--font--family--mono: var(--pf-t--global--font--family--mono--legacy);
+ --pf-t--global--font--weight--body: var(--pf-t--global--font--weight--body--legacy);
+ --pf-t--global--font--weight--body--bold: var(--pf-t--global--font--weight--body--bold--legacy);
+ --pf-t--global--font--weight--heading: var(--pf-t--global--font--weight--heading--legacy);
+ --pf-t--global--font--weight--heading--bold: var(--pf-t--global--font--weight--heading--bold--legacy);
+}
+
+.pf-v6-m-dir-rtl {
+ --pf-v6-global--inverse--multiplier: -1;
+ direction: rtl;
+}
+
+.pf-v6-m-dir-ltr {
+ --pf-v6-global--inverse--multiplier: 1;
+ direction: ltr;
+}
+
+:where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-m-mirror-inline-rtl {
+ scale: -1 1;
+}
+
+.pf-v6-m-no-motion {
+ --pf-t--global--delay--400: 1ms !important;
+ --pf-t--global--delay--300: 1ms !important;
+ --pf-t--global--delay--200: 1ms !important;
+ --pf-t--global--delay--100: 1ms !important;
+ --pf-t--global--duration--600: 1ms !important;
+ --pf-t--global--duration--500: 1ms !important;
+ --pf-t--global--duration--400: 1ms !important;
+ --pf-t--global--duration--300: 1ms !important;
+ --pf-t--global--duration--200: 1ms !important;
+ --pf-t--global--duration--100: 1ms !important;
+ --pf-t--global--duration--50: 1ms !important;
+}
+
+:root {
+ --pf-v6-global--danger-jiggle--AnimationDuration--Transform: var(--pf-t--global--motion--duration--fade--default);
+ --pf-v6-global--danger-jiggle--AnimationTimingFunction--Transform: var(--pf-t--global--motion--timing-function--default);
+}
+
+@property --pf-v6-global--danger-jiggle--TranslateX {
+ syntax: "";
+ inherits: false;
+ initial-value: 0;
+}
+@keyframes pf-v6-global-danger-jiggle-motion {
+ 33% {
+ --pf-v6-global--danger-jiggle--TranslateX: -2px;
+ }
+ 66% {
+ --pf-v6-global--danger-jiggle--TranslateX: 3px;
+ }
+}
+@keyframes pf-v6-global-fade-in {
+ from {
+ opacity: 0;
+ }
+ to {
+ opacity: 1;
+ }
+}
+@keyframes pf-v6-global-fade-out {
+ from {
+ opacity: 1;
+ }
+ to {
+ opacity: 0;
+ }
+}
+@font-face {
+ font-family: "Red Hat Text";
+ font-style: normal;
+ font-weight: 400 500;
+ src: url("./assets/fonts/RedHatText/RedHatTextVF.woff2") format("woff2-variations");
+ font-display: fallback;
+}
+@font-face {
+ font-family: "Red Hat Text";
+ font-style: italic;
+ font-weight: 400 500;
+ src: url("./assets/fonts/RedHatText/RedHatTextVF-Italic.woff2") format("woff2-variations");
+ font-display: fallback;
+}
+@font-face {
+ font-family: "Red Hat Display";
+ font-style: normal;
+ font-weight: 400 700;
+ src: url("./assets/fonts/RedHatDisplay/RedHatDisplayVF.woff2") format("woff2-variations");
+ font-display: fallback;
+}
+@font-face {
+ font-family: "Red Hat Display";
+ font-style: italic;
+ font-weight: 400 700;
+ src: url("./assets/fonts/RedHatDisplay/RedHatDisplayVF-Italic.woff2") format("woff2-variations");
+ font-display: fallback;
+}
+@font-face {
+ font-family: "Red Hat Mono";
+ font-style: normal;
+ font-weight: 400;
+ src: url("./assets/fonts/RedHatMono/RedHatMonoVF.woff2") format("woff2-variations");
+ font-display: fallback;
+}
+@font-face {
+ font-family: "Red Hat Mono";
+ font-style: italic;
+ font-weight: 400;
+ src: url("./assets/fonts/RedHatMono/RedHatMonoVF-Italic.woff2") format("woff2-variations");
+ font-display: fallback;
+}
+.fa-lg {
+ font-size: 1.3333333333em;
+ line-height: 0.75em;
+ vertical-align: -0.0667em;
+}
+
+.fa-xs {
+ font-size: 0.75em;
+}
+
+.fa-sm {
+ font-size: 0.875em;
+}
+
+.fa-1x {
+ font-size: 1em;
+}
+
+.fa-2x {
+ font-size: 2em;
+}
+
+.fa-3x {
+ font-size: 3em;
+}
+
+.fa-4x {
+ font-size: 4em;
+}
+
+.fa-5x {
+ font-size: 5em;
+}
+
+.fa-6x {
+ font-size: 6em;
+}
+
+.fa-7x {
+ font-size: 7em;
+}
+
+.fa-8x {
+ font-size: 8em;
+}
+
+.fa-9x {
+ font-size: 9em;
+}
+
+.fa-10x {
+ font-size: 10em;
+}
+
+.fa-fw {
+ text-align: center;
+ width: 1.25em;
+}
+
+.fa-ul {
+ list-style-type: none;
+ margin-left: 2.5em;
+ padding-left: 0;
+}
+.fa-ul > li {
+ position: relative;
+}
+
+.fa-li {
+ left: -2em;
+ position: absolute;
+ text-align: center;
+ width: 2em;
+ line-height: inherit;
+}
+
+.fa-border {
+ border: solid 0.08em #eee;
+ border-radius: 0.1em;
+ padding: 0.2em 0.25em 0.15em;
+}
+
+.fa-pull-left {
+ float: left;
+}
+
+.fa-pull-right {
+ float: right;
+}
+
+.fa.fa-pull-left,
+.fas.fa-pull-left,
+.far.fa-pull-left,
+.fal.fa-pull-left,
+.fab.fa-pull-left {
+ margin-right: 0.3em;
+}
+.fa.fa-pull-right,
+.fas.fa-pull-right,
+.far.fa-pull-right,
+.fal.fa-pull-right,
+.fab.fa-pull-right {
+ margin-left: 0.3em;
+}
+
+.fa-spin {
+ animation: fa-spin 2s infinite linear;
+}
+
+.fa-pulse {
+ animation: fa-spin 1s infinite steps(8);
+}
+
+@keyframes fa-spin {
+ 0% {
+ transform: rotate(0deg);
+ }
+ 100% {
+ transform: rotate(360deg);
+ }
+}
+.fa-rotate-90 {
+ -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1)";
+ transform: rotate(90deg);
+}
+
+.fa-rotate-180 {
+ -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2)";
+ transform: rotate(180deg);
+}
+
+.fa-rotate-270 {
+ -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=3)";
+ transform: rotate(270deg);
+}
+
+.fa-flip-horizontal {
+ -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1)";
+ transform: scale(-1, 1);
+}
+
+.fa-flip-vertical {
+ -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)";
+ transform: scale(1, -1);
+}
+
+.fa-flip-horizontal.fa-flip-vertical {
+ -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)";
+ transform: scale(-1, -1);
+}
+
+:root .fa-rotate-90,
+:root .fa-rotate-180,
+:root .fa-rotate-270,
+:root .fa-flip-horizontal,
+:root .fa-flip-vertical {
+ filter: none;
+}
+
+.fa-stack {
+ display: inline-block;
+ height: 2em;
+ line-height: 2em;
+ position: relative;
+ vertical-align: middle;
+ width: 0.625em;
+}
+
+.fa-stack-1x,
+.fa-stack-2x {
+ left: 0;
+ position: absolute;
+ text-align: center;
+ width: 100%;
+}
+
+.fa-stack-1x {
+ line-height: inherit;
+}
+
+.fa-stack-2x {
+ font-size: 2em;
+}
+
+.fa-inverse {
+ color: #fff;
+}
+
+.sr-only {
+ border: 0;
+ clip: rect(0, 0, 0, 0);
+ height: 1px;
+ margin: -1px;
+ overflow: hidden;
+ padding: 0;
+ position: absolute;
+ width: 1px;
+}
+
+.sr-only-focusable:active, .sr-only-focusable:focus {
+ clip: auto;
+ height: auto;
+ margin: 0;
+ overflow: visible;
+ position: static;
+ width: auto;
+}
+
+@font-face {
+ font-family: "Font Awesome 5 Free";
+ font-style: normal;
+ font-weight: 900;
+ src: url("./assets/fonts/webfonts/fa-solid-900.woff2") format("woff2");
+}
+.fa,
+.fas {
+ font-family: "Font Awesome 5 Free";
+ font-weight: 900;
+}
+
+.fa-500px:before {
+ content: "\f26e";
+}
+
+.fa-accessible-icon:before {
+ content: "\f368";
+}
+
+.fa-accusoft:before {
+ content: "\f369";
+}
+
+.fa-acquisitions-incorporated:before {
+ content: "\f6af";
+}
+
+.fa-ad:before {
+ content: "\f641";
+}
+
+.fa-address-book:before {
+ content: "\f2b9";
+}
+
+.fa-address-card:before {
+ content: "\f2bb";
+}
+
+.fa-adjust:before {
+ content: "\f042";
+}
+
+.fa-adn:before {
+ content: "\f170";
+}
+
+.fa-adobe:before {
+ content: "\f778";
+}
+
+.fa-adversal:before {
+ content: "\f36a";
+}
+
+.fa-affiliatetheme:before {
+ content: "\f36b";
+}
+
+.fa-air-freshener:before {
+ content: "\f5d0";
+}
+
+.fa-algolia:before {
+ content: "\f36c";
+}
+
+.fa-align-center:before {
+ content: "\f037";
+}
+
+.fa-align-justify:before {
+ content: "\f039";
+}
+
+.fa-align-left:before {
+ content: "\f036";
+}
+
+.fa-align-right:before {
+ content: "\f038";
+}
+
+.fa-alipay:before {
+ content: "\f642";
+}
+
+.fa-allergies:before {
+ content: "\f461";
+}
+
+.fa-amazon:before {
+ content: "\f270";
+}
+
+.fa-amazon-pay:before {
+ content: "\f42c";
+}
+
+.fa-ambulance:before {
+ content: "\f0f9";
+}
+
+.fa-american-sign-language-interpreting:before {
+ content: "\f2a3";
+}
+
+.fa-amilia:before {
+ content: "\f36d";
+}
+
+.fa-anchor:before {
+ content: "\f13d";
+}
+
+.fa-android:before {
+ content: "\f17b";
+}
+
+.fa-angellist:before {
+ content: "\f209";
+}
+
+.fa-angle-double-down:before {
+ content: "\f103";
+}
+
+.fa-angle-double-left:before {
+ content: "\f100";
+}
+
+.fa-angle-double-right:before {
+ content: "\f101";
+}
+
+.fa-angle-double-up:before {
+ content: "\f102";
+}
+
+.fa-angle-down:before {
+ content: "\f107";
+}
+
+.fa-angle-left:before {
+ content: "\f104";
+}
+
+.fa-angle-right:before {
+ content: "\f105";
+}
+
+.fa-angle-up:before {
+ content: "\f106";
+}
+
+.fa-angry:before {
+ content: "\f556";
+}
+
+.fa-angrycreative:before {
+ content: "\f36e";
+}
+
+.fa-angular:before {
+ content: "\f420";
+}
+
+.fa-ankh:before {
+ content: "\f644";
+}
+
+.fa-app-store:before {
+ content: "\f36f";
+}
+
+.fa-app-store-ios:before {
+ content: "\f370";
+}
+
+.fa-apper:before {
+ content: "\f371";
+}
+
+.fa-apple:before {
+ content: "\f179";
+}
+
+.fa-apple-alt:before {
+ content: "\f5d1";
+}
+
+.fa-apple-pay:before {
+ content: "\f415";
+}
+
+.fa-archive:before {
+ content: "\f187";
+}
+
+.fa-archway:before {
+ content: "\f557";
+}
+
+.fa-arrow-alt-circle-down:before {
+ content: "\f358";
+}
+
+.fa-arrow-alt-circle-left:before {
+ content: "\f359";
+}
+
+.fa-arrow-alt-circle-right:before {
+ content: "\f35a";
+}
+
+.fa-arrow-alt-circle-up:before {
+ content: "\f35b";
+}
+
+.fa-arrow-circle-down:before {
+ content: "\f0ab";
+}
+
+.fa-arrow-circle-left:before {
+ content: "\f0a8";
+}
+
+.fa-arrow-circle-right:before {
+ content: "\f0a9";
+}
+
+.fa-arrow-circle-up:before {
+ content: "\f0aa";
+}
+
+.fa-arrow-down:before {
+ content: "\f063";
+}
+
+.fa-arrow-left:before {
+ content: "\f060";
+}
+
+.fa-arrow-right:before {
+ content: "\f061";
+}
+
+.fa-arrow-up:before {
+ content: "\f062";
+}
+
+.fa-arrows-alt:before {
+ content: "\f0b2";
+}
+
+.fa-arrows-alt-h:before {
+ content: "\f337";
+}
+
+.fa-arrows-alt-v:before {
+ content: "\f338";
+}
+
+.fa-artstation:before {
+ content: "\f77a";
+}
+
+.fa-assistive-listening-systems:before {
+ content: "\f2a2";
+}
+
+.fa-asterisk:before {
+ content: "\f069";
+}
+
+.fa-asymmetrik:before {
+ content: "\f372";
+}
+
+.fa-at:before {
+ content: "\f1fa";
+}
+
+.fa-atlas:before {
+ content: "\f558";
+}
+
+.fa-atlassian:before {
+ content: "\f77b";
+}
+
+.fa-atom:before {
+ content: "\f5d2";
+}
+
+.fa-audible:before {
+ content: "\f373";
+}
+
+.fa-audio-description:before {
+ content: "\f29e";
+}
+
+.fa-autoprefixer:before {
+ content: "\f41c";
+}
+
+.fa-avianex:before {
+ content: "\f374";
+}
+
+.fa-aviato:before {
+ content: "\f421";
+}
+
+.fa-award:before {
+ content: "\f559";
+}
+
+.fa-aws:before {
+ content: "\f375";
+}
+
+.fa-baby:before {
+ content: "\f77c";
+}
+
+.fa-baby-carriage:before {
+ content: "\f77d";
+}
+
+.fa-backspace:before {
+ content: "\f55a";
+}
+
+.fa-backward:before {
+ content: "\f04a";
+}
+
+.fa-balance-scale:before {
+ content: "\f24e";
+}
+
+.fa-ban:before {
+ content: "\f05e";
+}
+
+.fa-band-aid:before {
+ content: "\f462";
+}
+
+.fa-bandcamp:before {
+ content: "\f2d5";
+}
+
+.fa-barcode:before {
+ content: "\f02a";
+}
+
+.fa-bars:before {
+ content: "\f0c9";
+}
+
+.fa-baseball-ball:before {
+ content: "\f433";
+}
+
+.fa-basketball-ball:before {
+ content: "\f434";
+}
+
+.fa-bath:before {
+ content: "\f2cd";
+}
+
+.fa-battery-empty:before {
+ content: "\f244";
+}
+
+.fa-battery-full:before {
+ content: "\f240";
+}
+
+.fa-battery-half:before {
+ content: "\f242";
+}
+
+.fa-battery-quarter:before {
+ content: "\f243";
+}
+
+.fa-battery-three-quarters:before {
+ content: "\f241";
+}
+
+.fa-bed:before {
+ content: "\f236";
+}
+
+.fa-beer:before {
+ content: "\f0fc";
+}
+
+.fa-behance:before {
+ content: "\f1b4";
+}
+
+.fa-behance-square:before {
+ content: "\f1b5";
+}
+
+.fa-bell:before {
+ content: "\f0f3";
+}
+
+.fa-bell-slash:before {
+ content: "\f1f6";
+}
+
+.fa-bezier-curve:before {
+ content: "\f55b";
+}
+
+.fa-bible:before {
+ content: "\f647";
+}
+
+.fa-bicycle:before {
+ content: "\f206";
+}
+
+.fa-bimobject:before {
+ content: "\f378";
+}
+
+.fa-binoculars:before {
+ content: "\f1e5";
+}
+
+.fa-biohazard:before {
+ content: "\f780";
+}
+
+.fa-birthday-cake:before {
+ content: "\f1fd";
+}
+
+.fa-bitbucket:before {
+ content: "\f171";
+}
+
+.fa-bitcoin:before {
+ content: "\f379";
+}
+
+.fa-bity:before {
+ content: "\f37a";
+}
+
+.fa-black-tie:before {
+ content: "\f27e";
+}
+
+.fa-blackberry:before {
+ content: "\f37b";
+}
+
+.fa-blender:before {
+ content: "\f517";
+}
+
+.fa-blender-phone:before {
+ content: "\f6b6";
+}
+
+.fa-blind:before {
+ content: "\f29d";
+}
+
+.fa-blog:before {
+ content: "\f781";
+}
+
+.fa-blogger:before {
+ content: "\f37c";
+}
+
+.fa-blogger-b:before {
+ content: "\f37d";
+}
+
+.fa-bluetooth:before {
+ content: "\f293";
+}
+
+.fa-bluetooth-b:before {
+ content: "\f294";
+}
+
+.fa-bold:before {
+ content: "\f032";
+}
+
+.fa-bolt:before {
+ content: "\f0e7";
+}
+
+.fa-bomb:before {
+ content: "\f1e2";
+}
+
+.fa-bone:before {
+ content: "\f5d7";
+}
+
+.fa-bong:before {
+ content: "\f55c";
+}
+
+.fa-book:before {
+ content: "\f02d";
+}
+
+.fa-book-dead:before {
+ content: "\f6b7";
+}
+
+.fa-book-open:before {
+ content: "\f518";
+}
+
+.fa-book-reader:before {
+ content: "\f5da";
+}
+
+.fa-bookmark:before {
+ content: "\f02e";
+}
+
+.fa-bowling-ball:before {
+ content: "\f436";
+}
+
+.fa-box:before {
+ content: "\f466";
+}
+
+.fa-box-open:before {
+ content: "\f49e";
+}
+
+.fa-boxes:before {
+ content: "\f468";
+}
+
+.fa-braille:before {
+ content: "\f2a1";
+}
+
+.fa-brain:before {
+ content: "\f5dc";
+}
+
+.fa-briefcase:before {
+ content: "\f0b1";
+}
+
+.fa-briefcase-medical:before {
+ content: "\f469";
+}
+
+.fa-broadcast-tower:before {
+ content: "\f519";
+}
+
+.fa-broom:before {
+ content: "\f51a";
+}
+
+.fa-brush:before {
+ content: "\f55d";
+}
+
+.fa-btc:before {
+ content: "\f15a";
+}
+
+.fa-bug:before {
+ content: "\f188";
+}
+
+.fa-building:before {
+ content: "\f1ad";
+}
+
+.fa-bullhorn:before {
+ content: "\f0a1";
+}
+
+.fa-bullseye:before {
+ content: "\f140";
+}
+
+.fa-burn:before {
+ content: "\f46a";
+}
+
+.fa-buromobelexperte:before {
+ content: "\f37f";
+}
+
+.fa-bus:before {
+ content: "\f207";
+}
+
+.fa-bus-alt:before {
+ content: "\f55e";
+}
+
+.fa-business-time:before {
+ content: "\f64a";
+}
+
+.fa-buysellads:before {
+ content: "\f20d";
+}
+
+.fa-calculator:before {
+ content: "\f1ec";
+}
+
+.fa-calendar:before {
+ content: "\f133";
+}
+
+.fa-calendar-alt:before {
+ content: "\f073";
+}
+
+.fa-calendar-check:before {
+ content: "\f274";
+}
+
+.fa-calendar-day:before {
+ content: "\f783";
+}
+
+.fa-calendar-minus:before {
+ content: "\f272";
+}
+
+.fa-calendar-plus:before {
+ content: "\f271";
+}
+
+.fa-calendar-times:before {
+ content: "\f273";
+}
+
+.fa-calendar-week:before {
+ content: "\f784";
+}
+
+.fa-camera:before {
+ content: "\f030";
+}
+
+.fa-camera-retro:before {
+ content: "\f083";
+}
+
+.fa-campground:before {
+ content: "\f6bb";
+}
+
+.fa-canadian-maple-leaf:before {
+ content: "\f785";
+}
+
+.fa-candy-cane:before {
+ content: "\f786";
+}
+
+.fa-cannabis:before {
+ content: "\f55f";
+}
+
+.fa-capsules:before {
+ content: "\f46b";
+}
+
+.fa-car:before {
+ content: "\f1b9";
+}
+
+.fa-car-alt:before {
+ content: "\f5de";
+}
+
+.fa-car-battery:before {
+ content: "\f5df";
+}
+
+.fa-car-crash:before {
+ content: "\f5e1";
+}
+
+.fa-car-side:before {
+ content: "\f5e4";
+}
+
+.fa-caret-down:before {
+ content: "\f0d7";
+}
+
+.fa-caret-left:before {
+ content: "\f0d9";
+}
+
+.fa-caret-right:before {
+ content: "\f0da";
+}
+
+.fa-caret-square-down:before {
+ content: "\f150";
+}
+
+.fa-caret-square-left:before {
+ content: "\f191";
+}
+
+.fa-caret-square-right:before {
+ content: "\f152";
+}
+
+.fa-caret-square-up:before {
+ content: "\f151";
+}
+
+.fa-caret-up:before {
+ content: "\f0d8";
+}
+
+.fa-carrot:before {
+ content: "\f787";
+}
+
+.fa-cart-arrow-down:before {
+ content: "\f218";
+}
+
+.fa-cart-plus:before {
+ content: "\f217";
+}
+
+.fa-cash-register:before {
+ content: "\f788";
+}
+
+.fa-cat:before {
+ content: "\f6be";
+}
+
+.fa-cc-amazon-pay:before {
+ content: "\f42d";
+}
+
+.fa-cc-amex:before {
+ content: "\f1f3";
+}
+
+.fa-cc-apple-pay:before {
+ content: "\f416";
+}
+
+.fa-cc-diners-club:before {
+ content: "\f24c";
+}
+
+.fa-cc-discover:before {
+ content: "\f1f2";
+}
+
+.fa-cc-jcb:before {
+ content: "\f24b";
+}
+
+.fa-cc-mastercard:before {
+ content: "\f1f1";
+}
+
+.fa-cc-paypal:before {
+ content: "\f1f4";
+}
+
+.fa-cc-stripe:before {
+ content: "\f1f5";
+}
+
+.fa-cc-visa:before {
+ content: "\f1f0";
+}
+
+.fa-centercode:before {
+ content: "\f380";
+}
+
+.fa-centos:before {
+ content: "\f789";
+}
+
+.fa-certificate:before {
+ content: "\f0a3";
+}
+
+.fa-chair:before {
+ content: "\f6c0";
+}
+
+.fa-chalkboard:before {
+ content: "\f51b";
+}
+
+.fa-chalkboard-teacher:before {
+ content: "\f51c";
+}
+
+.fa-charging-station:before {
+ content: "\f5e7";
+}
+
+.fa-chart-area:before {
+ content: "\f1fe";
+}
+
+.fa-chart-bar:before {
+ content: "\f080";
+}
+
+.fa-chart-line:before {
+ content: "\f201";
+}
+
+.fa-chart-pie:before {
+ content: "\f200";
+}
+
+.fa-check:before {
+ content: "\f00c";
+}
+
+.fa-check-circle:before {
+ content: "\f058";
+}
+
+.fa-check-double:before {
+ content: "\f560";
+}
+
+.fa-check-square:before {
+ content: "\f14a";
+}
+
+.fa-chess:before {
+ content: "\f439";
+}
+
+.fa-chess-bishop:before {
+ content: "\f43a";
+}
+
+.fa-chess-board:before {
+ content: "\f43c";
+}
+
+.fa-chess-king:before {
+ content: "\f43f";
+}
+
+.fa-chess-knight:before {
+ content: "\f441";
+}
+
+.fa-chess-pawn:before {
+ content: "\f443";
+}
+
+.fa-chess-queen:before {
+ content: "\f445";
+}
+
+.fa-chess-rook:before {
+ content: "\f447";
+}
+
+.fa-chevron-circle-down:before {
+ content: "\f13a";
+}
+
+.fa-chevron-circle-left:before {
+ content: "\f137";
+}
+
+.fa-chevron-circle-right:before {
+ content: "\f138";
+}
+
+.fa-chevron-circle-up:before {
+ content: "\f139";
+}
+
+.fa-chevron-down:before {
+ content: "\f078";
+}
+
+.fa-chevron-left:before {
+ content: "\f053";
+}
+
+.fa-chevron-right:before {
+ content: "\f054";
+}
+
+.fa-chevron-up:before {
+ content: "\f077";
+}
+
+.fa-child:before {
+ content: "\f1ae";
+}
+
+.fa-chrome:before {
+ content: "\f268";
+}
+
+.fa-church:before {
+ content: "\f51d";
+}
+
+.fa-circle:before {
+ content: "\f111";
+}
+
+.fa-circle-notch:before {
+ content: "\f1ce";
+}
+
+.fa-city:before {
+ content: "\f64f";
+}
+
+.fa-clipboard:before {
+ content: "\f328";
+}
+
+.fa-clipboard-check:before {
+ content: "\f46c";
+}
+
+.fa-clipboard-list:before {
+ content: "\f46d";
+}
+
+.fa-clock:before {
+ content: "\f017";
+}
+
+.fa-clone:before {
+ content: "\f24d";
+}
+
+.fa-closed-captioning:before {
+ content: "\f20a";
+}
+
+.fa-cloud:before {
+ content: "\f0c2";
+}
+
+.fa-cloud-download-alt:before {
+ content: "\f381";
+}
+
+.fa-cloud-meatball:before {
+ content: "\f73b";
+}
+
+.fa-cloud-moon:before {
+ content: "\f6c3";
+}
+
+.fa-cloud-moon-rain:before {
+ content: "\f73c";
+}
+
+.fa-cloud-rain:before {
+ content: "\f73d";
+}
+
+.fa-cloud-showers-heavy:before {
+ content: "\f740";
+}
+
+.fa-cloud-sun:before {
+ content: "\f6c4";
+}
+
+.fa-cloud-sun-rain:before {
+ content: "\f743";
+}
+
+.fa-cloud-upload-alt:before {
+ content: "\f382";
+}
+
+.fa-cloudscale:before {
+ content: "\f383";
+}
+
+.fa-cloudsmith:before {
+ content: "\f384";
+}
+
+.fa-cloudversify:before {
+ content: "\f385";
+}
+
+.fa-cocktail:before {
+ content: "\f561";
+}
+
+.fa-code:before {
+ content: "\f121";
+}
+
+.fa-code-branch:before {
+ content: "\f126";
+}
+
+.fa-codepen:before {
+ content: "\f1cb";
+}
+
+.fa-codiepie:before {
+ content: "\f284";
+}
+
+.fa-coffee:before {
+ content: "\f0f4";
+}
+
+.fa-cog:before {
+ content: "\f013";
+}
+
+.fa-cogs:before {
+ content: "\f085";
+}
+
+.fa-coins:before {
+ content: "\f51e";
+}
+
+.fa-columns:before {
+ content: "\f0db";
+}
+
+.fa-comment:before {
+ content: "\f075";
+}
+
+.fa-comment-alt:before {
+ content: "\f27a";
+}
+
+.fa-comment-dollar:before {
+ content: "\f651";
+}
+
+.fa-comment-dots:before {
+ content: "\f4ad";
+}
+
+.fa-comment-slash:before {
+ content: "\f4b3";
+}
+
+.fa-comments:before {
+ content: "\f086";
+}
+
+.fa-comments-dollar:before {
+ content: "\f653";
+}
+
+.fa-compact-disc:before {
+ content: "\f51f";
+}
+
+.fa-compass:before {
+ content: "\f14e";
+}
+
+.fa-compress:before {
+ content: "\f066";
+}
+
+.fa-compress-arrows-alt:before {
+ content: "\f78c";
+}
+
+.fa-concierge-bell:before {
+ content: "\f562";
+}
+
+.fa-confluence:before {
+ content: "\f78d";
+}
+
+.fa-connectdevelop:before {
+ content: "\f20e";
+}
+
+.fa-contao:before {
+ content: "\f26d";
+}
+
+.fa-cookie:before {
+ content: "\f563";
+}
+
+.fa-cookie-bite:before {
+ content: "\f564";
+}
+
+.fa-copy:before {
+ content: "\f0c5";
+}
+
+.fa-copyright:before {
+ content: "\f1f9";
+}
+
+.fa-couch:before {
+ content: "\f4b8";
+}
+
+.fa-cpanel:before {
+ content: "\f388";
+}
+
+.fa-creative-commons:before {
+ content: "\f25e";
+}
+
+.fa-creative-commons-by:before {
+ content: "\f4e7";
+}
+
+.fa-creative-commons-nc:before {
+ content: "\f4e8";
+}
+
+.fa-creative-commons-nc-eu:before {
+ content: "\f4e9";
+}
+
+.fa-creative-commons-nc-jp:before {
+ content: "\f4ea";
+}
+
+.fa-creative-commons-nd:before {
+ content: "\f4eb";
+}
+
+.fa-creative-commons-pd:before {
+ content: "\f4ec";
+}
+
+.fa-creative-commons-pd-alt:before {
+ content: "\f4ed";
+}
+
+.fa-creative-commons-remix:before {
+ content: "\f4ee";
+}
+
+.fa-creative-commons-sa:before {
+ content: "\f4ef";
+}
+
+.fa-creative-commons-sampling:before {
+ content: "\f4f0";
+}
+
+.fa-creative-commons-sampling-plus:before {
+ content: "\f4f1";
+}
+
+.fa-creative-commons-share:before {
+ content: "\f4f2";
+}
+
+.fa-creative-commons-zero:before {
+ content: "\f4f3";
+}
+
+.fa-credit-card:before {
+ content: "\f09d";
+}
+
+.fa-critical-role:before {
+ content: "\f6c9";
+}
+
+.fa-crop:before {
+ content: "\f125";
+}
+
+.fa-crop-alt:before {
+ content: "\f565";
+}
+
+.fa-cross:before {
+ content: "\f654";
+}
+
+.fa-crosshairs:before {
+ content: "\f05b";
+}
+
+.fa-crow:before {
+ content: "\f520";
+}
+
+.fa-crown:before {
+ content: "\f521";
+}
+
+.fa-css3:before {
+ content: "\f13c";
+}
+
+.fa-css3-alt:before {
+ content: "\f38b";
+}
+
+.fa-cube:before {
+ content: "\f1b2";
+}
+
+.fa-cubes:before {
+ content: "\f1b3";
+}
+
+.fa-cut:before {
+ content: "\f0c4";
+}
+
+.fa-cuttlefish:before {
+ content: "\f38c";
+}
+
+.fa-d-and-d:before {
+ content: "\f38d";
+}
+
+.fa-d-and-d-beyond:before {
+ content: "\f6ca";
+}
+
+.fa-dashcube:before {
+ content: "\f210";
+}
+
+.fa-database:before {
+ content: "\f1c0";
+}
+
+.fa-deaf:before {
+ content: "\f2a4";
+}
+
+.fa-delicious:before {
+ content: "\f1a5";
+}
+
+.fa-democrat:before {
+ content: "\f747";
+}
+
+.fa-deploydog:before {
+ content: "\f38e";
+}
+
+.fa-deskpro:before {
+ content: "\f38f";
+}
+
+.fa-desktop:before {
+ content: "\f108";
+}
+
+.fa-dev:before {
+ content: "\f6cc";
+}
+
+.fa-deviantart:before {
+ content: "\f1bd";
+}
+
+.fa-dharmachakra:before {
+ content: "\f655";
+}
+
+.fa-dhl:before {
+ content: "\f790";
+}
+
+.fa-diagnoses:before {
+ content: "\f470";
+}
+
+.fa-diaspora:before {
+ content: "\f791";
+}
+
+.fa-dice:before {
+ content: "\f522";
+}
+
+.fa-dice-d20:before {
+ content: "\f6cf";
+}
+
+.fa-dice-d6:before {
+ content: "\f6d1";
+}
+
+.fa-dice-five:before {
+ content: "\f523";
+}
+
+.fa-dice-four:before {
+ content: "\f524";
+}
+
+.fa-dice-one:before {
+ content: "\f525";
+}
+
+.fa-dice-six:before {
+ content: "\f526";
+}
+
+.fa-dice-three:before {
+ content: "\f527";
+}
+
+.fa-dice-two:before {
+ content: "\f528";
+}
+
+.fa-digg:before {
+ content: "\f1a6";
+}
+
+.fa-digital-ocean:before {
+ content: "\f391";
+}
+
+.fa-digital-tachograph:before {
+ content: "\f566";
+}
+
+.fa-directions:before {
+ content: "\f5eb";
+}
+
+.fa-discord:before {
+ content: "\f392";
+}
+
+.fa-discourse:before {
+ content: "\f393";
+}
+
+.fa-divide:before {
+ content: "\f529";
+}
+
+.fa-dizzy:before {
+ content: "\f567";
+}
+
+.fa-dna:before {
+ content: "\f471";
+}
+
+.fa-dochub:before {
+ content: "\f394";
+}
+
+.fa-docker:before {
+ content: "\f395";
+}
+
+.fa-dog:before {
+ content: "\f6d3";
+}
+
+.fa-dollar-sign:before {
+ content: "\f155";
+}
+
+.fa-dolly:before {
+ content: "\f472";
+}
+
+.fa-dolly-flatbed:before {
+ content: "\f474";
+}
+
+.fa-donate:before {
+ content: "\f4b9";
+}
+
+.fa-door-closed:before {
+ content: "\f52a";
+}
+
+.fa-door-open:before {
+ content: "\f52b";
+}
+
+.fa-dot-circle:before {
+ content: "\f192";
+}
+
+.fa-dove:before {
+ content: "\f4ba";
+}
+
+.fa-download:before {
+ content: "\f019";
+}
+
+.fa-draft2digital:before {
+ content: "\f396";
+}
+
+.fa-drafting-compass:before {
+ content: "\f568";
+}
+
+.fa-dragon:before {
+ content: "\f6d5";
+}
+
+.fa-draw-polygon:before {
+ content: "\f5ee";
+}
+
+.fa-dribbble:before {
+ content: "\f17d";
+}
+
+.fa-dribbble-square:before {
+ content: "\f397";
+}
+
+.fa-dropbox:before {
+ content: "\f16b";
+}
+
+.fa-drum:before {
+ content: "\f569";
+}
+
+.fa-drum-steelpan:before {
+ content: "\f56a";
+}
+
+.fa-drumstick-bite:before {
+ content: "\f6d7";
+}
+
+.fa-drupal:before {
+ content: "\f1a9";
+}
+
+.fa-dumbbell:before {
+ content: "\f44b";
+}
+
+.fa-dumpster:before {
+ content: "\f793";
+}
+
+.fa-dumpster-fire:before {
+ content: "\f794";
+}
+
+.fa-dungeon:before {
+ content: "\f6d9";
+}
+
+.fa-dyalog:before {
+ content: "\f399";
+}
+
+.fa-earlybirds:before {
+ content: "\f39a";
+}
+
+.fa-ebay:before {
+ content: "\f4f4";
+}
+
+.fa-edge:before {
+ content: "\f282";
+}
+
+.fa-edit:before {
+ content: "\f044";
+}
+
+.fa-eject:before {
+ content: "\f052";
+}
+
+.fa-elementor:before {
+ content: "\f430";
+}
+
+.fa-ellipsis-h:before {
+ content: "\f141";
+}
+
+.fa-ellipsis-v:before {
+ content: "\f142";
+}
+
+.fa-ello:before {
+ content: "\f5f1";
+}
+
+.fa-ember:before {
+ content: "\f423";
+}
+
+.fa-empire:before {
+ content: "\f1d1";
+}
+
+.fa-envelope:before {
+ content: "\f0e0";
+}
+
+.fa-envelope-open:before {
+ content: "\f2b6";
+}
+
+.fa-envelope-open-text:before {
+ content: "\f658";
+}
+
+.fa-envelope-square:before {
+ content: "\f199";
+}
+
+.fa-envira:before {
+ content: "\f299";
+}
+
+.fa-equals:before {
+ content: "\f52c";
+}
+
+.fa-eraser:before {
+ content: "\f12d";
+}
+
+.fa-erlang:before {
+ content: "\f39d";
+}
+
+.fa-ethereum:before {
+ content: "\f42e";
+}
+
+.fa-ethernet:before {
+ content: "\f796";
+}
+
+.fa-etsy:before {
+ content: "\f2d7";
+}
+
+.fa-euro-sign:before {
+ content: "\f153";
+}
+
+.fa-exchange-alt:before {
+ content: "\f362";
+}
+
+.fa-exclamation:before {
+ content: "\f12a";
+}
+
+.fa-exclamation-circle:before {
+ content: "\f06a";
+}
+
+.fa-exclamation-triangle:before {
+ content: "\f071";
+}
+
+.fa-expand:before {
+ content: "\f065";
+}
+
+.fa-expand-arrows-alt:before {
+ content: "\f31e";
+}
+
+.fa-expeditedssl:before {
+ content: "\f23e";
+}
+
+.fa-external-link-alt:before {
+ content: "\f35d";
+}
+
+.fa-external-link-square-alt:before {
+ content: "\f360";
+}
+
+.fa-eye:before {
+ content: "\f06e";
+}
+
+.fa-eye-dropper:before {
+ content: "\f1fb";
+}
+
+.fa-eye-slash:before {
+ content: "\f070";
+}
+
+.fa-facebook:before {
+ content: "\f09a";
+}
+
+.fa-facebook-f:before {
+ content: "\f39e";
+}
+
+.fa-facebook-messenger:before {
+ content: "\f39f";
+}
+
+.fa-facebook-square:before {
+ content: "\f082";
+}
+
+.fa-fantasy-flight-games:before {
+ content: "\f6dc";
+}
+
+.fa-fast-backward:before {
+ content: "\f049";
+}
+
+.fa-fast-forward:before {
+ content: "\f050";
+}
+
+.fa-fax:before {
+ content: "\f1ac";
+}
+
+.fa-feather:before {
+ content: "\f52d";
+}
+
+.fa-feather-alt:before {
+ content: "\f56b";
+}
+
+.fa-fedex:before {
+ content: "\f797";
+}
+
+.fa-fedora:before {
+ content: "\f798";
+}
+
+.fa-female:before {
+ content: "\f182";
+}
+
+.fa-fighter-jet:before {
+ content: "\f0fb";
+}
+
+.fa-figma:before {
+ content: "\f799";
+}
+
+.fa-file:before {
+ content: "\f15b";
+}
+
+.fa-file-alt:before {
+ content: "\f15c";
+}
+
+.fa-file-archive:before {
+ content: "\f1c6";
+}
+
+.fa-file-audio:before {
+ content: "\f1c7";
+}
+
+.fa-file-code:before {
+ content: "\f1c9";
+}
+
+.fa-file-contract:before {
+ content: "\f56c";
+}
+
+.fa-file-csv:before {
+ content: "\f6dd";
+}
+
+.fa-file-download:before {
+ content: "\f56d";
+}
+
+.fa-file-excel:before {
+ content: "\f1c3";
+}
+
+.fa-file-export:before {
+ content: "\f56e";
+}
+
+.fa-file-image:before {
+ content: "\f1c5";
+}
+
+.fa-file-import:before {
+ content: "\f56f";
+}
+
+.fa-file-invoice:before {
+ content: "\f570";
+}
+
+.fa-file-invoice-dollar:before {
+ content: "\f571";
+}
+
+.fa-file-medical:before {
+ content: "\f477";
+}
+
+.fa-file-medical-alt:before {
+ content: "\f478";
+}
+
+.fa-file-pdf:before {
+ content: "\f1c1";
+}
+
+.fa-file-powerpoint:before {
+ content: "\f1c4";
+}
+
+.fa-file-prescription:before {
+ content: "\f572";
+}
+
+.fa-file-signature:before {
+ content: "\f573";
+}
+
+.fa-file-upload:before {
+ content: "\f574";
+}
+
+.fa-file-video:before {
+ content: "\f1c8";
+}
+
+.fa-file-word:before {
+ content: "\f1c2";
+}
+
+.fa-fill:before {
+ content: "\f575";
+}
+
+.fa-fill-drip:before {
+ content: "\f576";
+}
+
+.fa-film:before {
+ content: "\f008";
+}
+
+.fa-filter:before {
+ content: "\f0b0";
+}
+
+.fa-fingerprint:before {
+ content: "\f577";
+}
+
+.fa-fire:before {
+ content: "\f06d";
+}
+
+.fa-fire-alt:before {
+ content: "\f7e4";
+}
+
+.fa-fire-extinguisher:before {
+ content: "\f134";
+}
+
+.fa-firefox:before {
+ content: "\f269";
+}
+
+.fa-first-aid:before {
+ content: "\f479";
+}
+
+.fa-first-order:before {
+ content: "\f2b0";
+}
+
+.fa-first-order-alt:before {
+ content: "\f50a";
+}
+
+.fa-firstdraft:before {
+ content: "\f3a1";
+}
+
+.fa-fish:before {
+ content: "\f578";
+}
+
+.fa-fist-raised:before {
+ content: "\f6de";
+}
+
+.fa-flag:before {
+ content: "\f024";
+}
+
+.fa-flag-checkered:before {
+ content: "\f11e";
+}
+
+.fa-flag-usa:before {
+ content: "\f74d";
+}
+
+.fa-flask:before {
+ content: "\f0c3";
+}
+
+.fa-flickr:before {
+ content: "\f16e";
+}
+
+.fa-flipboard:before {
+ content: "\f44d";
+}
+
+.fa-flushed:before {
+ content: "\f579";
+}
+
+.fa-fly:before {
+ content: "\f417";
+}
+
+.fa-folder:before {
+ content: "\f07b";
+}
+
+.fa-folder-minus:before {
+ content: "\f65d";
+}
+
+.fa-folder-open:before {
+ content: "\f07c";
+}
+
+.fa-folder-plus:before {
+ content: "\f65e";
+}
+
+.fa-font:before {
+ content: "\f031";
+}
+
+.fa-font-awesome:before {
+ content: "\f2b4";
+}
+
+.fa-font-awesome-alt:before {
+ content: "\f35c";
+}
+
+.fa-font-awesome-flag:before {
+ content: "\f425";
+}
+
+.fa-font-awesome-logo-full:before {
+ content: "\f4e6";
+}
+
+.fa-fonticons:before {
+ content: "\f280";
+}
+
+.fa-fonticons-fi:before {
+ content: "\f3a2";
+}
+
+.fa-football-ball:before {
+ content: "\f44e";
+}
+
+.fa-fort-awesome:before {
+ content: "\f286";
+}
+
+.fa-fort-awesome-alt:before {
+ content: "\f3a3";
+}
+
+.fa-forumbee:before {
+ content: "\f211";
+}
+
+.fa-forward:before {
+ content: "\f04e";
+}
+
+.fa-foursquare:before {
+ content: "\f180";
+}
+
+.fa-free-code-camp:before {
+ content: "\f2c5";
+}
+
+.fa-freebsd:before {
+ content: "\f3a4";
+}
+
+.fa-frog:before {
+ content: "\f52e";
+}
+
+.fa-frown:before {
+ content: "\f119";
+}
+
+.fa-frown-open:before {
+ content: "\f57a";
+}
+
+.fa-fulcrum:before {
+ content: "\f50b";
+}
+
+.fa-funnel-dollar:before {
+ content: "\f662";
+}
+
+.fa-futbol:before {
+ content: "\f1e3";
+}
+
+.fa-galactic-republic:before {
+ content: "\f50c";
+}
+
+.fa-galactic-senate:before {
+ content: "\f50d";
+}
+
+.fa-gamepad:before {
+ content: "\f11b";
+}
+
+.fa-gas-pump:before {
+ content: "\f52f";
+}
+
+.fa-gavel:before {
+ content: "\f0e3";
+}
+
+.fa-gem:before {
+ content: "\f3a5";
+}
+
+.fa-genderless:before {
+ content: "\f22d";
+}
+
+.fa-get-pocket:before {
+ content: "\f265";
+}
+
+.fa-gg:before {
+ content: "\f260";
+}
+
+.fa-gg-circle:before {
+ content: "\f261";
+}
+
+.fa-ghost:before {
+ content: "\f6e2";
+}
+
+.fa-gift:before {
+ content: "\f06b";
+}
+
+.fa-gifts:before {
+ content: "\f79c";
+}
+
+.fa-git:before {
+ content: "\f1d3";
+}
+
+.fa-git-square:before {
+ content: "\f1d2";
+}
+
+.fa-github:before {
+ content: "\f09b";
+}
+
+.fa-github-alt:before {
+ content: "\f113";
+}
+
+.fa-github-square:before {
+ content: "\f092";
+}
+
+.fa-gitkraken:before {
+ content: "\f3a6";
+}
+
+.fa-gitlab:before {
+ content: "\f296";
+}
+
+.fa-gitter:before {
+ content: "\f426";
+}
+
+.fa-glass-cheers:before {
+ content: "\f79f";
+}
+
+.fa-glass-martini:before {
+ content: "\f000";
+}
+
+.fa-glass-martini-alt:before {
+ content: "\f57b";
+}
+
+.fa-glass-whiskey:before {
+ content: "\f7a0";
+}
+
+.fa-glasses:before {
+ content: "\f530";
+}
+
+.fa-glide:before {
+ content: "\f2a5";
+}
+
+.fa-glide-g:before {
+ content: "\f2a6";
+}
+
+.fa-globe:before {
+ content: "\f0ac";
+}
+
+.fa-globe-africa:before {
+ content: "\f57c";
+}
+
+.fa-globe-americas:before {
+ content: "\f57d";
+}
+
+.fa-globe-asia:before {
+ content: "\f57e";
+}
+
+.fa-globe-europe:before {
+ content: "\f7a2";
+}
+
+.fa-gofore:before {
+ content: "\f3a7";
+}
+
+.fa-golf-ball:before {
+ content: "\f450";
+}
+
+.fa-goodreads:before {
+ content: "\f3a8";
+}
+
+.fa-goodreads-g:before {
+ content: "\f3a9";
+}
+
+.fa-google:before {
+ content: "\f1a0";
+}
+
+.fa-google-drive:before {
+ content: "\f3aa";
+}
+
+.fa-google-play:before {
+ content: "\f3ab";
+}
+
+.fa-google-plus:before {
+ content: "\f2b3";
+}
+
+.fa-google-plus-g:before {
+ content: "\f0d5";
+}
+
+.fa-google-plus-square:before {
+ content: "\f0d4";
+}
+
+.fa-google-wallet:before {
+ content: "\f1ee";
+}
+
+.fa-gopuram:before {
+ content: "\f664";
+}
+
+.fa-graduation-cap:before {
+ content: "\f19d";
+}
+
+.fa-gratipay:before {
+ content: "\f184";
+}
+
+.fa-grav:before {
+ content: "\f2d6";
+}
+
+.fa-greater-than:before {
+ content: "\f531";
+}
+
+.fa-greater-than-equal:before {
+ content: "\f532";
+}
+
+.fa-grimace:before {
+ content: "\f57f";
+}
+
+.fa-grin:before {
+ content: "\f580";
+}
+
+.fa-grin-alt:before {
+ content: "\f581";
+}
+
+.fa-grin-beam:before {
+ content: "\f582";
+}
+
+.fa-grin-beam-sweat:before {
+ content: "\f583";
+}
+
+.fa-grin-hearts:before {
+ content: "\f584";
+}
+
+.fa-grin-squint:before {
+ content: "\f585";
+}
+
+.fa-grin-squint-tears:before {
+ content: "\f586";
+}
+
+.fa-grin-stars:before {
+ content: "\f587";
+}
+
+.fa-grin-tears:before {
+ content: "\f588";
+}
+
+.fa-grin-tongue:before {
+ content: "\f589";
+}
+
+.fa-grin-tongue-squint:before {
+ content: "\f58a";
+}
+
+.fa-grin-tongue-wink:before {
+ content: "\f58b";
+}
+
+.fa-grin-wink:before {
+ content: "\f58c";
+}
+
+.fa-grip-horizontal:before {
+ content: "\f58d";
+}
+
+.fa-grip-lines:before {
+ content: "\f7a4";
+}
+
+.fa-grip-lines-vertical:before {
+ content: "\f7a5";
+}
+
+.fa-grip-vertical:before {
+ content: "\f58e";
+}
+
+.fa-gripfire:before {
+ content: "\f3ac";
+}
+
+.fa-grunt:before {
+ content: "\f3ad";
+}
+
+.fa-guitar:before {
+ content: "\f7a6";
+}
+
+.fa-gulp:before {
+ content: "\f3ae";
+}
+
+.fa-h-square:before {
+ content: "\f0fd";
+}
+
+.fa-hacker-news:before {
+ content: "\f1d4";
+}
+
+.fa-hacker-news-square:before {
+ content: "\f3af";
+}
+
+.fa-hackerrank:before {
+ content: "\f5f7";
+}
+
+.fa-hammer:before {
+ content: "\f6e3";
+}
+
+.fa-hamsa:before {
+ content: "\f665";
+}
+
+.fa-hand-holding:before {
+ content: "\f4bd";
+}
+
+.fa-hand-holding-heart:before {
+ content: "\f4be";
+}
+
+.fa-hand-holding-usd:before {
+ content: "\f4c0";
+}
+
+.fa-hand-lizard:before {
+ content: "\f258";
+}
+
+.fa-hand-paper:before {
+ content: "\f256";
+}
+
+.fa-hand-peace:before {
+ content: "\f25b";
+}
+
+.fa-hand-point-down:before {
+ content: "\f0a7";
+}
+
+.fa-hand-point-left:before {
+ content: "\f0a5";
+}
+
+.fa-hand-point-right:before {
+ content: "\f0a4";
+}
+
+.fa-hand-point-up:before {
+ content: "\f0a6";
+}
+
+.fa-hand-pointer:before {
+ content: "\f25a";
+}
+
+.fa-hand-rock:before {
+ content: "\f255";
+}
+
+.fa-hand-scissors:before {
+ content: "\f257";
+}
+
+.fa-hand-spock:before {
+ content: "\f259";
+}
+
+.fa-hands:before {
+ content: "\f4c2";
+}
+
+.fa-hands-helping:before {
+ content: "\f4c4";
+}
+
+.fa-handshake:before {
+ content: "\f2b5";
+}
+
+.fa-hanukiah:before {
+ content: "\f6e6";
+}
+
+.fa-hashtag:before {
+ content: "\f292";
+}
+
+.fa-hat-wizard:before {
+ content: "\f6e8";
+}
+
+.fa-haykal:before {
+ content: "\f666";
+}
+
+.fa-hdd:before {
+ content: "\f0a0";
+}
+
+.fa-heading:before {
+ content: "\f1dc";
+}
+
+.fa-headphones:before {
+ content: "\f025";
+}
+
+.fa-headphones-alt:before {
+ content: "\f58f";
+}
+
+.fa-headset:before {
+ content: "\f590";
+}
+
+.fa-heart:before {
+ content: "\f004";
+}
+
+.fa-heart-broken:before {
+ content: "\f7a9";
+}
+
+.fa-heartbeat:before {
+ content: "\f21e";
+}
+
+.fa-helicopter:before {
+ content: "\f533";
+}
+
+.fa-highlighter:before {
+ content: "\f591";
+}
+
+.fa-hiking:before {
+ content: "\f6ec";
+}
+
+.fa-hippo:before {
+ content: "\f6ed";
+}
+
+.fa-hips:before {
+ content: "\f452";
+}
+
+.fa-hire-a-helper:before {
+ content: "\f3b0";
+}
+
+.fa-history:before {
+ content: "\f1da";
+}
+
+.fa-hockey-puck:before {
+ content: "\f453";
+}
+
+.fa-holly-berry:before {
+ content: "\f7aa";
+}
+
+.fa-home:before {
+ content: "\f015";
+}
+
+.fa-hooli:before {
+ content: "\f427";
+}
+
+.fa-hornbill:before {
+ content: "\f592";
+}
+
+.fa-horse:before {
+ content: "\f6f0";
+}
+
+.fa-horse-head:before {
+ content: "\f7ab";
+}
+
+.fa-hospital:before {
+ content: "\f0f8";
+}
+
+.fa-hospital-alt:before {
+ content: "\f47d";
+}
+
+.fa-hospital-symbol:before {
+ content: "\f47e";
+}
+
+.fa-hot-tub:before {
+ content: "\f593";
+}
+
+.fa-hotel:before {
+ content: "\f594";
+}
+
+.fa-hotjar:before {
+ content: "\f3b1";
+}
+
+.fa-hourglass:before {
+ content: "\f254";
+}
+
+.fa-hourglass-end:before {
+ content: "\f253";
+}
+
+.fa-hourglass-half:before {
+ content: "\f252";
+}
+
+.fa-hourglass-start:before {
+ content: "\f251";
+}
+
+.fa-house-damage:before {
+ content: "\f6f1";
+}
+
+.fa-houzz:before {
+ content: "\f27c";
+}
+
+.fa-hryvnia:before {
+ content: "\f6f2";
+}
+
+.fa-html5:before {
+ content: "\f13b";
+}
+
+.fa-hubspot:before {
+ content: "\f3b2";
+}
+
+.fa-i-cursor:before {
+ content: "\f246";
+}
+
+.fa-icicles:before {
+ content: "\f7ad";
+}
+
+.fa-id-badge:before {
+ content: "\f2c1";
+}
+
+.fa-id-card:before {
+ content: "\f2c2";
+}
+
+.fa-id-card-alt:before {
+ content: "\f47f";
+}
+
+.fa-igloo:before {
+ content: "\f7ae";
+}
+
+.fa-image:before {
+ content: "\f03e";
+}
+
+.fa-images:before {
+ content: "\f302";
+}
+
+.fa-imdb:before {
+ content: "\f2d8";
+}
+
+.fa-inbox:before {
+ content: "\f01c";
+}
+
+.fa-indent:before {
+ content: "\f03c";
+}
+
+.fa-industry:before {
+ content: "\f275";
+}
+
+.fa-infinity:before {
+ content: "\f534";
+}
+
+.fa-info:before {
+ content: "\f129";
+}
+
+.fa-info-circle:before {
+ content: "\f05a";
+}
+
+.fa-instagram:before {
+ content: "\f16d";
+}
+
+.fa-intercom:before {
+ content: "\f7af";
+}
+
+.fa-internet-explorer:before {
+ content: "\f26b";
+}
+
+.fa-invision:before {
+ content: "\f7b0";
+}
+
+.fa-ioxhost:before {
+ content: "\f208";
+}
+
+.fa-italic:before {
+ content: "\f033";
+}
+
+.fa-itunes:before {
+ content: "\f3b4";
+}
+
+.fa-itunes-note:before {
+ content: "\f3b5";
+}
+
+.fa-java:before {
+ content: "\f4e4";
+}
+
+.fa-jedi:before {
+ content: "\f669";
+}
+
+.fa-jedi-order:before {
+ content: "\f50e";
+}
+
+.fa-jenkins:before {
+ content: "\f3b6";
+}
+
+.fa-jira:before {
+ content: "\f7b1";
+}
+
+.fa-joget:before {
+ content: "\f3b7";
+}
+
+.fa-joint:before {
+ content: "\f595";
+}
+
+.fa-joomla:before {
+ content: "\f1aa";
+}
+
+.fa-journal-whills:before {
+ content: "\f66a";
+}
+
+.fa-js:before {
+ content: "\f3b8";
+}
+
+.fa-js-square:before {
+ content: "\f3b9";
+}
+
+.fa-jsfiddle:before {
+ content: "\f1cc";
+}
+
+.fa-kaaba:before {
+ content: "\f66b";
+}
+
+.fa-kaggle:before {
+ content: "\f5fa";
+}
+
+.fa-key:before {
+ content: "\f084";
+}
+
+.fa-keybase:before {
+ content: "\f4f5";
+}
+
+.fa-keyboard:before {
+ content: "\f11c";
+}
+
+.fa-keycdn:before {
+ content: "\f3ba";
+}
+
+.fa-khanda:before {
+ content: "\f66d";
+}
+
+.fa-kickstarter:before {
+ content: "\f3bb";
+}
+
+.fa-kickstarter-k:before {
+ content: "\f3bc";
+}
+
+.fa-kiss:before {
+ content: "\f596";
+}
+
+.fa-kiss-beam:before {
+ content: "\f597";
+}
+
+.fa-kiss-wink-heart:before {
+ content: "\f598";
+}
+
+.fa-kiwi-bird:before {
+ content: "\f535";
+}
+
+.fa-korvue:before {
+ content: "\f42f";
+}
+
+.fa-landmark:before {
+ content: "\f66f";
+}
+
+.fa-language:before {
+ content: "\f1ab";
+}
+
+.fa-laptop:before {
+ content: "\f109";
+}
+
+.fa-laptop-code:before {
+ content: "\f5fc";
+}
+
+.fa-laravel:before {
+ content: "\f3bd";
+}
+
+.fa-lastfm:before {
+ content: "\f202";
+}
+
+.fa-lastfm-square:before {
+ content: "\f203";
+}
+
+.fa-laugh:before {
+ content: "\f599";
+}
+
+.fa-laugh-beam:before {
+ content: "\f59a";
+}
+
+.fa-laugh-squint:before {
+ content: "\f59b";
+}
+
+.fa-laugh-wink:before {
+ content: "\f59c";
+}
+
+.fa-layer-group:before {
+ content: "\f5fd";
+}
+
+.fa-leaf:before {
+ content: "\f06c";
+}
+
+.fa-leanpub:before {
+ content: "\f212";
+}
+
+.fa-lemon:before {
+ content: "\f094";
+}
+
+.fa-less:before {
+ content: "\f41d";
+}
+
+.fa-less-than:before {
+ content: "\f536";
+}
+
+.fa-less-than-equal:before {
+ content: "\f537";
+}
+
+.fa-level-down-alt:before {
+ content: "\f3be";
+}
+
+.fa-level-up-alt:before {
+ content: "\f3bf";
+}
+
+.fa-life-ring:before {
+ content: "\f1cd";
+}
+
+.fa-lightbulb:before {
+ content: "\f0eb";
+}
+
+.fa-line:before {
+ content: "\f3c0";
+}
+
+.fa-link:before {
+ content: "\f0c1";
+}
+
+.fa-linkedin:before {
+ content: "\f08c";
+}
+
+.fa-linkedin-in:before {
+ content: "\f0e1";
+}
+
+.fa-linode:before {
+ content: "\f2b8";
+}
+
+.fa-linux:before {
+ content: "\f17c";
+}
+
+.fa-lira-sign:before {
+ content: "\f195";
+}
+
+.fa-list:before {
+ content: "\f03a";
+}
+
+.fa-list-alt:before {
+ content: "\f022";
+}
+
+.fa-list-ol:before {
+ content: "\f0cb";
+}
+
+.fa-list-ul:before {
+ content: "\f0ca";
+}
+
+.fa-location-arrow:before {
+ content: "\f124";
+}
+
+.fa-lock:before {
+ content: "\f023";
+}
+
+.fa-lock-open:before {
+ content: "\f3c1";
+}
+
+.fa-long-arrow-alt-down:before {
+ content: "\f309";
+}
+
+.fa-long-arrow-alt-left:before {
+ content: "\f30a";
+}
+
+.fa-long-arrow-alt-right:before {
+ content: "\f30b";
+}
+
+.fa-long-arrow-alt-up:before {
+ content: "\f30c";
+}
+
+.fa-low-vision:before {
+ content: "\f2a8";
+}
+
+.fa-luggage-cart:before {
+ content: "\f59d";
+}
+
+.fa-lyft:before {
+ content: "\f3c3";
+}
+
+.fa-magento:before {
+ content: "\f3c4";
+}
+
+.fa-magic:before {
+ content: "\f0d0";
+}
+
+.fa-magnet:before {
+ content: "\f076";
+}
+
+.fa-mail-bulk:before {
+ content: "\f674";
+}
+
+.fa-mailchimp:before {
+ content: "\f59e";
+}
+
+.fa-male:before {
+ content: "\f183";
+}
+
+.fa-mandalorian:before {
+ content: "\f50f";
+}
+
+.fa-map:before {
+ content: "\f279";
+}
+
+.fa-map-marked:before {
+ content: "\f59f";
+}
+
+.fa-map-marked-alt:before {
+ content: "\f5a0";
+}
+
+.fa-map-marker:before {
+ content: "\f041";
+}
+
+.fa-map-marker-alt:before {
+ content: "\f3c5";
+}
+
+.fa-map-pin:before {
+ content: "\f276";
+}
+
+.fa-map-signs:before {
+ content: "\f277";
+}
+
+.fa-markdown:before {
+ content: "\f60f";
+}
+
+.fa-marker:before {
+ content: "\f5a1";
+}
+
+.fa-mars:before {
+ content: "\f222";
+}
+
+.fa-mars-double:before {
+ content: "\f227";
+}
+
+.fa-mars-stroke:before {
+ content: "\f229";
+}
+
+.fa-mars-stroke-h:before {
+ content: "\f22b";
+}
+
+.fa-mars-stroke-v:before {
+ content: "\f22a";
+}
+
+.fa-mask:before {
+ content: "\f6fa";
+}
+
+.fa-mastodon:before {
+ content: "\f4f6";
+}
+
+.fa-maxcdn:before {
+ content: "\f136";
+}
+
+.fa-medal:before {
+ content: "\f5a2";
+}
+
+.fa-medapps:before {
+ content: "\f3c6";
+}
+
+.fa-medium:before {
+ content: "\f23a";
+}
+
+.fa-medium-m:before {
+ content: "\f3c7";
+}
+
+.fa-medkit:before {
+ content: "\f0fa";
+}
+
+.fa-medrt:before {
+ content: "\f3c8";
+}
+
+.fa-meetup:before {
+ content: "\f2e0";
+}
+
+.fa-megaport:before {
+ content: "\f5a3";
+}
+
+.fa-meh:before {
+ content: "\f11a";
+}
+
+.fa-meh-blank:before {
+ content: "\f5a4";
+}
+
+.fa-meh-rolling-eyes:before {
+ content: "\f5a5";
+}
+
+.fa-memory:before {
+ content: "\f538";
+}
+
+.fa-mendeley:before {
+ content: "\f7b3";
+}
+
+.fa-menorah:before {
+ content: "\f676";
+}
+
+.fa-mercury:before {
+ content: "\f223";
+}
+
+.fa-meteor:before {
+ content: "\f753";
+}
+
+.fa-microchip:before {
+ content: "\f2db";
+}
+
+.fa-microphone:before {
+ content: "\f130";
+}
+
+.fa-microphone-alt:before {
+ content: "\f3c9";
+}
+
+.fa-microphone-alt-slash:before {
+ content: "\f539";
+}
+
+.fa-microphone-slash:before {
+ content: "\f131";
+}
+
+.fa-microscope:before {
+ content: "\f610";
+}
+
+.fa-microsoft:before {
+ content: "\f3ca";
+}
+
+.fa-minus:before {
+ content: "\f068";
+}
+
+.fa-minus-circle:before {
+ content: "\f056";
+}
+
+.fa-minus-square:before {
+ content: "\f146";
+}
+
+.fa-mitten:before {
+ content: "\f7b5";
+}
+
+.fa-mix:before {
+ content: "\f3cb";
+}
+
+.fa-mixcloud:before {
+ content: "\f289";
+}
+
+.fa-mizuni:before {
+ content: "\f3cc";
+}
+
+.fa-mobile:before {
+ content: "\f10b";
+}
+
+.fa-mobile-alt:before {
+ content: "\f3cd";
+}
+
+.fa-modx:before {
+ content: "\f285";
+}
+
+.fa-monero:before {
+ content: "\f3d0";
+}
+
+.fa-money-bill:before {
+ content: "\f0d6";
+}
+
+.fa-money-bill-alt:before {
+ content: "\f3d1";
+}
+
+.fa-money-bill-wave:before {
+ content: "\f53a";
+}
+
+.fa-money-bill-wave-alt:before {
+ content: "\f53b";
+}
+
+.fa-money-check:before {
+ content: "\f53c";
+}
+
+.fa-money-check-alt:before {
+ content: "\f53d";
+}
+
+.fa-monument:before {
+ content: "\f5a6";
+}
+
+.fa-moon:before {
+ content: "\f186";
+}
+
+.fa-mortar-pestle:before {
+ content: "\f5a7";
+}
+
+.fa-mosque:before {
+ content: "\f678";
+}
+
+.fa-motorcycle:before {
+ content: "\f21c";
+}
+
+.fa-mountain:before {
+ content: "\f6fc";
+}
+
+.fa-mouse-pointer:before {
+ content: "\f245";
+}
+
+.fa-mug-hot:before {
+ content: "\f7b6";
+}
+
+.fa-music:before {
+ content: "\f001";
+}
+
+.fa-napster:before {
+ content: "\f3d2";
+}
+
+.fa-neos:before {
+ content: "\f612";
+}
+
+.fa-network-wired:before {
+ content: "\f6ff";
+}
+
+.fa-neuter:before {
+ content: "\f22c";
+}
+
+.fa-newspaper:before {
+ content: "\f1ea";
+}
+
+.fa-nimblr:before {
+ content: "\f5a8";
+}
+
+.fa-nintendo-switch:before {
+ content: "\f418";
+}
+
+.fa-node:before {
+ content: "\f419";
+}
+
+.fa-node-js:before {
+ content: "\f3d3";
+}
+
+.fa-not-equal:before {
+ content: "\f53e";
+}
+
+.fa-notes-medical:before {
+ content: "\f481";
+}
+
+.fa-npm:before {
+ content: "\f3d4";
+}
+
+.fa-ns8:before {
+ content: "\f3d5";
+}
+
+.fa-nutritionix:before {
+ content: "\f3d6";
+}
+
+.fa-object-group:before {
+ content: "\f247";
+}
+
+.fa-object-ungroup:before {
+ content: "\f248";
+}
+
+.fa-odnoklassniki:before {
+ content: "\f263";
+}
+
+.fa-odnoklassniki-square:before {
+ content: "\f264";
+}
+
+.fa-oil-can:before {
+ content: "\f613";
+}
+
+.fa-old-republic:before {
+ content: "\f510";
+}
+
+.fa-om:before {
+ content: "\f679";
+}
+
+.fa-opencart:before {
+ content: "\f23d";
+}
+
+.fa-openid:before {
+ content: "\f19b";
+}
+
+.fa-opera:before {
+ content: "\f26a";
+}
+
+.fa-optin-monster:before {
+ content: "\f23c";
+}
+
+.fa-osi:before {
+ content: "\f41a";
+}
+
+.fa-otter:before {
+ content: "\f700";
+}
+
+.fa-outdent:before {
+ content: "\f03b";
+}
+
+.fa-page4:before {
+ content: "\f3d7";
+}
+
+.fa-pagelines:before {
+ content: "\f18c";
+}
+
+.fa-paint-brush:before {
+ content: "\f1fc";
+}
+
+.fa-paint-roller:before {
+ content: "\f5aa";
+}
+
+.fa-palette:before {
+ content: "\f53f";
+}
+
+.fa-palfed:before {
+ content: "\f3d8";
+}
+
+.fa-pallet:before {
+ content: "\f482";
+}
+
+.fa-paper-plane:before {
+ content: "\f1d8";
+}
+
+.fa-paperclip:before {
+ content: "\f0c6";
+}
+
+.fa-parachute-box:before {
+ content: "\f4cd";
+}
+
+.fa-paragraph:before {
+ content: "\f1dd";
+}
+
+.fa-parking:before {
+ content: "\f540";
+}
+
+.fa-passport:before {
+ content: "\f5ab";
+}
+
+.fa-pastafarianism:before {
+ content: "\f67b";
+}
+
+.fa-paste:before {
+ content: "\f0ea";
+}
+
+.fa-patreon:before {
+ content: "\f3d9";
+}
+
+.fa-pause:before {
+ content: "\f04c";
+}
+
+.fa-pause-circle:before {
+ content: "\f28b";
+}
+
+.fa-paw:before {
+ content: "\f1b0";
+}
+
+.fa-paypal:before {
+ content: "\f1ed";
+}
+
+.fa-peace:before {
+ content: "\f67c";
+}
+
+.fa-pen:before {
+ content: "\f304";
+}
+
+.fa-pen-alt:before {
+ content: "\f305";
+}
+
+.fa-pen-fancy:before {
+ content: "\f5ac";
+}
+
+.fa-pen-nib:before {
+ content: "\f5ad";
+}
+
+.fa-pen-square:before {
+ content: "\f14b";
+}
+
+.fa-pencil-alt:before {
+ content: "\f303";
+}
+
+.fa-pencil-ruler:before {
+ content: "\f5ae";
+}
+
+.fa-penny-arcade:before {
+ content: "\f704";
+}
+
+.fa-people-carry:before {
+ content: "\f4ce";
+}
+
+.fa-percent:before {
+ content: "\f295";
+}
+
+.fa-percentage:before {
+ content: "\f541";
+}
+
+.fa-periscope:before {
+ content: "\f3da";
+}
+
+.fa-person-booth:before {
+ content: "\f756";
+}
+
+.fa-phabricator:before {
+ content: "\f3db";
+}
+
+.fa-phoenix-framework:before {
+ content: "\f3dc";
+}
+
+.fa-phoenix-squadron:before {
+ content: "\f511";
+}
+
+.fa-phone:before {
+ content: "\f095";
+}
+
+.fa-phone-slash:before {
+ content: "\f3dd";
+}
+
+.fa-phone-square:before {
+ content: "\f098";
+}
+
+.fa-phone-volume:before {
+ content: "\f2a0";
+}
+
+.fa-php:before {
+ content: "\f457";
+}
+
+.fa-pied-piper:before {
+ content: "\f2ae";
+}
+
+.fa-pied-piper-alt:before {
+ content: "\f1a8";
+}
+
+.fa-pied-piper-hat:before {
+ content: "\f4e5";
+}
+
+.fa-pied-piper-pp:before {
+ content: "\f1a7";
+}
+
+.fa-piggy-bank:before {
+ content: "\f4d3";
+}
+
+.fa-pills:before {
+ content: "\f484";
+}
+
+.fa-pinterest:before {
+ content: "\f0d2";
+}
+
+.fa-pinterest-p:before {
+ content: "\f231";
+}
+
+.fa-pinterest-square:before {
+ content: "\f0d3";
+}
+
+.fa-place-of-worship:before {
+ content: "\f67f";
+}
+
+.fa-plane:before {
+ content: "\f072";
+}
+
+.fa-plane-arrival:before {
+ content: "\f5af";
+}
+
+.fa-plane-departure:before {
+ content: "\f5b0";
+}
+
+.fa-play:before {
+ content: "\f04b";
+}
+
+.fa-play-circle:before {
+ content: "\f144";
+}
+
+.fa-playstation:before {
+ content: "\f3df";
+}
+
+.fa-plug:before {
+ content: "\f1e6";
+}
+
+.fa-plus:before {
+ content: "\f067";
+}
+
+.fa-plus-circle:before {
+ content: "\f055";
+}
+
+.fa-plus-square:before {
+ content: "\f0fe";
+}
+
+.fa-podcast:before {
+ content: "\f2ce";
+}
+
+.fa-poll:before {
+ content: "\f681";
+}
+
+.fa-poll-h:before {
+ content: "\f682";
+}
+
+.fa-poo:before {
+ content: "\f2fe";
+}
+
+.fa-poo-storm:before {
+ content: "\f75a";
+}
+
+.fa-poop:before {
+ content: "\f619";
+}
+
+.fa-portrait:before {
+ content: "\f3e0";
+}
+
+.fa-pound-sign:before {
+ content: "\f154";
+}
+
+.fa-power-off:before {
+ content: "\f011";
+}
+
+.fa-pray:before {
+ content: "\f683";
+}
+
+.fa-praying-hands:before {
+ content: "\f684";
+}
+
+.fa-prescription:before {
+ content: "\f5b1";
+}
+
+.fa-prescription-bottle:before {
+ content: "\f485";
+}
+
+.fa-prescription-bottle-alt:before {
+ content: "\f486";
+}
+
+.fa-print:before {
+ content: "\f02f";
+}
+
+.fa-procedures:before {
+ content: "\f487";
+}
+
+.fa-product-hunt:before {
+ content: "\f288";
+}
+
+.fa-project-diagram:before {
+ content: "\f542";
+}
+
+.fa-pushed:before {
+ content: "\f3e1";
+}
+
+.fa-puzzle-piece:before {
+ content: "\f12e";
+}
+
+.fa-python:before {
+ content: "\f3e2";
+}
+
+.fa-qq:before {
+ content: "\f1d6";
+}
+
+.fa-qrcode:before {
+ content: "\f029";
+}
+
+.fa-question:before {
+ content: "\f128";
+}
+
+.fa-question-circle:before {
+ content: "\f059";
+}
+
+.fa-quidditch:before {
+ content: "\f458";
+}
+
+.fa-quinscape:before {
+ content: "\f459";
+}
+
+.fa-quora:before {
+ content: "\f2c4";
+}
+
+.fa-quote-left:before {
+ content: "\f10d";
+}
+
+.fa-quote-right:before {
+ content: "\f10e";
+}
+
+.fa-quran:before {
+ content: "\f687";
+}
+
+.fa-r-project:before {
+ content: "\f4f7";
+}
+
+.fa-radiation:before {
+ content: "\f7b9";
+}
+
+.fa-radiation-alt:before {
+ content: "\f7ba";
+}
+
+.fa-rainbow:before {
+ content: "\f75b";
+}
+
+.fa-random:before {
+ content: "\f074";
+}
+
+.fa-raspberry-pi:before {
+ content: "\f7bb";
+}
+
+.fa-ravelry:before {
+ content: "\f2d9";
+}
+
+.fa-react:before {
+ content: "\f41b";
+}
+
+.fa-reacteurope:before {
+ content: "\f75d";
+}
+
+.fa-readme:before {
+ content: "\f4d5";
+}
+
+.fa-rebel:before {
+ content: "\f1d0";
+}
+
+.fa-receipt:before {
+ content: "\f543";
+}
+
+.fa-recycle:before {
+ content: "\f1b8";
+}
+
+.fa-red-river:before {
+ content: "\f3e3";
+}
+
+.fa-reddit:before {
+ content: "\f1a1";
+}
+
+.fa-reddit-alien:before {
+ content: "\f281";
+}
+
+.fa-reddit-square:before {
+ content: "\f1a2";
+}
+
+.fa-redhat:before {
+ content: "\f7bc";
+}
+
+.fa-redo:before {
+ content: "\f01e";
+}
+
+.fa-redo-alt:before {
+ content: "\f2f9";
+}
+
+.fa-registered:before {
+ content: "\f25d";
+}
+
+.fa-renren:before {
+ content: "\f18b";
+}
+
+.fa-reply:before {
+ content: "\f3e5";
+}
+
+.fa-reply-all:before {
+ content: "\f122";
+}
+
+.fa-replyd:before {
+ content: "\f3e6";
+}
+
+.fa-republican:before {
+ content: "\f75e";
+}
+
+.fa-researchgate:before {
+ content: "\f4f8";
+}
+
+.fa-resolving:before {
+ content: "\f3e7";
+}
+
+.fa-restroom:before {
+ content: "\f7bd";
+}
+
+.fa-retweet:before {
+ content: "\f079";
+}
+
+.fa-rev:before {
+ content: "\f5b2";
+}
+
+.fa-ribbon:before {
+ content: "\f4d6";
+}
+
+.fa-ring:before {
+ content: "\f70b";
+}
+
+.fa-road:before {
+ content: "\f018";
+}
+
+.fa-robot:before {
+ content: "\f544";
+}
+
+.fa-rocket:before {
+ content: "\f135";
+}
+
+.fa-rocketchat:before {
+ content: "\f3e8";
+}
+
+.fa-rockrms:before {
+ content: "\f3e9";
+}
+
+.fa-route:before {
+ content: "\f4d7";
+}
+
+.fa-rss:before {
+ content: "\f09e";
+}
+
+.fa-rss-square:before {
+ content: "\f143";
+}
+
+.fa-ruble-sign:before {
+ content: "\f158";
+}
+
+.fa-ruler:before {
+ content: "\f545";
+}
+
+.fa-ruler-combined:before {
+ content: "\f546";
+}
+
+.fa-ruler-horizontal:before {
+ content: "\f547";
+}
+
+.fa-ruler-vertical:before {
+ content: "\f548";
+}
+
+.fa-running:before {
+ content: "\f70c";
+}
+
+.fa-rupee-sign:before {
+ content: "\f156";
+}
+
+.fa-sad-cry:before {
+ content: "\f5b3";
+}
+
+.fa-sad-tear:before {
+ content: "\f5b4";
+}
+
+.fa-safari:before {
+ content: "\f267";
+}
+
+.fa-sass:before {
+ content: "\f41e";
+}
+
+.fa-satellite:before {
+ content: "\f7bf";
+}
+
+.fa-satellite-dish:before {
+ content: "\f7c0";
+}
+
+.fa-save:before {
+ content: "\f0c7";
+}
+
+.fa-schlix:before {
+ content: "\f3ea";
+}
+
+.fa-school:before {
+ content: "\f549";
+}
+
+.fa-screwdriver:before {
+ content: "\f54a";
+}
+
+.fa-scribd:before {
+ content: "\f28a";
+}
+
+.fa-scroll:before {
+ content: "\f70e";
+}
+
+.fa-sd-card:before {
+ content: "\f7c2";
+}
+
+.fa-search:before {
+ content: "\f002";
+}
+
+.fa-search-dollar:before {
+ content: "\f688";
+}
+
+.fa-search-location:before {
+ content: "\f689";
+}
+
+.fa-search-minus:before {
+ content: "\f010";
+}
+
+.fa-search-plus:before {
+ content: "\f00e";
+}
+
+.fa-searchengin:before {
+ content: "\f3eb";
+}
+
+.fa-seedling:before {
+ content: "\f4d8";
+}
+
+.fa-sellcast:before {
+ content: "\f2da";
+}
+
+.fa-sellsy:before {
+ content: "\f213";
+}
+
+.fa-server:before {
+ content: "\f233";
+}
+
+.fa-servicestack:before {
+ content: "\f3ec";
+}
+
+.fa-shapes:before {
+ content: "\f61f";
+}
+
+.fa-share:before {
+ content: "\f064";
+}
+
+.fa-share-alt:before {
+ content: "\f1e0";
+}
+
+.fa-share-alt-square:before {
+ content: "\f1e1";
+}
+
+.fa-share-square:before {
+ content: "\f14d";
+}
+
+.fa-shekel-sign:before {
+ content: "\f20b";
+}
+
+.fa-shield-alt:before {
+ content: "\f3ed";
+}
+
+.fa-ship:before {
+ content: "\f21a";
+}
+
+.fa-shipping-fast:before {
+ content: "\f48b";
+}
+
+.fa-shirtsinbulk:before {
+ content: "\f214";
+}
+
+.fa-shoe-prints:before {
+ content: "\f54b";
+}
+
+.fa-shopping-bag:before {
+ content: "\f290";
+}
+
+.fa-shopping-basket:before {
+ content: "\f291";
+}
+
+.fa-shopping-cart:before {
+ content: "\f07a";
+}
+
+.fa-shopware:before {
+ content: "\f5b5";
+}
+
+.fa-shower:before {
+ content: "\f2cc";
+}
+
+.fa-shuttle-van:before {
+ content: "\f5b6";
+}
+
+.fa-sign:before {
+ content: "\f4d9";
+}
+
+.fa-sign-in-alt:before {
+ content: "\f2f6";
+}
+
+.fa-sign-language:before {
+ content: "\f2a7";
+}
+
+.fa-sign-out-alt:before {
+ content: "\f2f5";
+}
+
+.fa-signal:before {
+ content: "\f012";
+}
+
+.fa-signature:before {
+ content: "\f5b7";
+}
+
+.fa-sim-card:before {
+ content: "\f7c4";
+}
+
+.fa-simplybuilt:before {
+ content: "\f215";
+}
+
+.fa-sistrix:before {
+ content: "\f3ee";
+}
+
+.fa-sitemap:before {
+ content: "\f0e8";
+}
+
+.fa-sith:before {
+ content: "\f512";
+}
+
+.fa-skating:before {
+ content: "\f7c5";
+}
+
+.fa-sketch:before {
+ content: "\f7c6";
+}
+
+.fa-skiing:before {
+ content: "\f7c9";
+}
+
+.fa-skiing-nordic:before {
+ content: "\f7ca";
+}
+
+.fa-skull:before {
+ content: "\f54c";
+}
+
+.fa-skull-crossbones:before {
+ content: "\f714";
+}
+
+.fa-skyatlas:before {
+ content: "\f216";
+}
+
+.fa-skype:before {
+ content: "\f17e";
+}
+
+.fa-slack:before {
+ content: "\f198";
+}
+
+.fa-slack-hash:before {
+ content: "\f3ef";
+}
+
+.fa-slash:before {
+ content: "\f715";
+}
+
+.fa-sleigh:before {
+ content: "\f7cc";
+}
+
+.fa-sliders-h:before {
+ content: "\f1de";
+}
+
+.fa-slideshare:before {
+ content: "\f1e7";
+}
+
+.fa-smile:before {
+ content: "\f118";
+}
+
+.fa-smile-beam:before {
+ content: "\f5b8";
+}
+
+.fa-smile-wink:before {
+ content: "\f4da";
+}
+
+.fa-smog:before {
+ content: "\f75f";
+}
+
+.fa-smoking:before {
+ content: "\f48d";
+}
+
+.fa-smoking-ban:before {
+ content: "\f54d";
+}
+
+.fa-sms:before {
+ content: "\f7cd";
+}
+
+.fa-snapchat:before {
+ content: "\f2ab";
+}
+
+.fa-snapchat-ghost:before {
+ content: "\f2ac";
+}
+
+.fa-snapchat-square:before {
+ content: "\f2ad";
+}
+
+.fa-snowboarding:before {
+ content: "\f7ce";
+}
+
+.fa-snowflake:before {
+ content: "\f2dc";
+}
+
+.fa-snowman:before {
+ content: "\f7d0";
+}
+
+.fa-snowplow:before {
+ content: "\f7d2";
+}
+
+.fa-socks:before {
+ content: "\f696";
+}
+
+.fa-solar-panel:before {
+ content: "\f5ba";
+}
+
+.fa-sort:before {
+ content: "\f0dc";
+}
+
+.fa-sort-alpha-down:before {
+ content: "\f15d";
+}
+
+.fa-sort-alpha-up:before {
+ content: "\f15e";
+}
+
+.fa-sort-amount-down:before {
+ content: "\f160";
+}
+
+.fa-sort-amount-up:before {
+ content: "\f161";
+}
+
+.fa-sort-down:before {
+ content: "\f0dd";
+}
+
+.fa-sort-numeric-down:before {
+ content: "\f162";
+}
+
+.fa-sort-numeric-up:before {
+ content: "\f163";
+}
+
+.fa-sort-up:before {
+ content: "\f0de";
+}
+
+.fa-soundcloud:before {
+ content: "\f1be";
+}
+
+.fa-sourcetree:before {
+ content: "\f7d3";
+}
+
+.fa-spa:before {
+ content: "\f5bb";
+}
+
+.fa-space-shuttle:before {
+ content: "\f197";
+}
+
+.fa-speakap:before {
+ content: "\f3f3";
+}
+
+.fa-spider:before {
+ content: "\f717";
+}
+
+.fa-spinner:before {
+ content: "\f110";
+}
+
+.fa-splotch:before {
+ content: "\f5bc";
+}
+
+.fa-spotify:before {
+ content: "\f1bc";
+}
+
+.fa-spray-can:before {
+ content: "\f5bd";
+}
+
+.fa-square:before {
+ content: "\f0c8";
+}
+
+.fa-square-full:before {
+ content: "\f45c";
+}
+
+.fa-square-root-alt:before {
+ content: "\f698";
+}
+
+.fa-squarespace:before {
+ content: "\f5be";
+}
+
+.fa-stack-exchange:before {
+ content: "\f18d";
+}
+
+.fa-stack-overflow:before {
+ content: "\f16c";
+}
+
+.fa-stamp:before {
+ content: "\f5bf";
+}
+
+.fa-star:before {
+ content: "\f005";
+}
+
+.fa-star-and-crescent:before {
+ content: "\f699";
+}
+
+.fa-star-half:before {
+ content: "\f089";
+}
+
+.fa-star-half-alt:before {
+ content: "\f5c0";
+}
+
+.fa-star-of-david:before {
+ content: "\f69a";
+}
+
+.fa-star-of-life:before {
+ content: "\f621";
+}
+
+.fa-staylinked:before {
+ content: "\f3f5";
+}
+
+.fa-steam:before {
+ content: "\f1b6";
+}
+
+.fa-steam-square:before {
+ content: "\f1b7";
+}
+
+.fa-steam-symbol:before {
+ content: "\f3f6";
+}
+
+.fa-step-backward:before {
+ content: "\f048";
+}
+
+.fa-step-forward:before {
+ content: "\f051";
+}
+
+.fa-stethoscope:before {
+ content: "\f0f1";
+}
+
+.fa-sticker-mule:before {
+ content: "\f3f7";
+}
+
+.fa-sticky-note:before {
+ content: "\f249";
+}
+
+.fa-stop:before {
+ content: "\f04d";
+}
+
+.fa-stop-circle:before {
+ content: "\f28d";
+}
+
+.fa-stopwatch:before {
+ content: "\f2f2";
+}
+
+.fa-store:before {
+ content: "\f54e";
+}
+
+.fa-store-alt:before {
+ content: "\f54f";
+}
+
+.fa-strava:before {
+ content: "\f428";
+}
+
+.fa-stream:before {
+ content: "\f550";
+}
+
+.fa-street-view:before {
+ content: "\f21d";
+}
+
+.fa-strikethrough:before {
+ content: "\f0cc";
+}
+
+.fa-stripe:before {
+ content: "\f429";
+}
+
+.fa-stripe-s:before {
+ content: "\f42a";
+}
+
+.fa-stroopwafel:before {
+ content: "\f551";
+}
+
+.fa-studiovinari:before {
+ content: "\f3f8";
+}
+
+.fa-stumbleupon:before {
+ content: "\f1a4";
+}
+
+.fa-stumbleupon-circle:before {
+ content: "\f1a3";
+}
+
+.fa-subscript:before {
+ content: "\f12c";
+}
+
+.fa-subway:before {
+ content: "\f239";
+}
+
+.fa-suitcase:before {
+ content: "\f0f2";
+}
+
+.fa-suitcase-rolling:before {
+ content: "\f5c1";
+}
+
+.fa-sun:before {
+ content: "\f185";
+}
+
+.fa-superpowers:before {
+ content: "\f2dd";
+}
+
+.fa-superscript:before {
+ content: "\f12b";
+}
+
+.fa-supple:before {
+ content: "\f3f9";
+}
+
+.fa-surprise:before {
+ content: "\f5c2";
+}
+
+.fa-suse:before {
+ content: "\f7d6";
+}
+
+.fa-swatchbook:before {
+ content: "\f5c3";
+}
+
+.fa-swimmer:before {
+ content: "\f5c4";
+}
+
+.fa-swimming-pool:before {
+ content: "\f5c5";
+}
+
+.fa-synagogue:before {
+ content: "\f69b";
+}
+
+.fa-sync:before {
+ content: "\f021";
+}
+
+.fa-sync-alt:before {
+ content: "\f2f1";
+}
+
+.fa-syringe:before {
+ content: "\f48e";
+}
+
+.fa-table:before {
+ content: "\f0ce";
+}
+
+.fa-table-tennis:before {
+ content: "\f45d";
+}
+
+.fa-tablet:before {
+ content: "\f10a";
+}
+
+.fa-tablet-alt:before {
+ content: "\f3fa";
+}
+
+.fa-tablets:before {
+ content: "\f490";
+}
+
+.fa-tachometer-alt:before {
+ content: "\f3fd";
+}
+
+.fa-tag:before {
+ content: "\f02b";
+}
+
+.fa-tags:before {
+ content: "\f02c";
+}
+
+.fa-tape:before {
+ content: "\f4db";
+}
+
+.fa-tasks:before {
+ content: "\f0ae";
+}
+
+.fa-taxi:before {
+ content: "\f1ba";
+}
+
+.fa-teamspeak:before {
+ content: "\f4f9";
+}
+
+.fa-teeth:before {
+ content: "\f62e";
+}
+
+.fa-teeth-open:before {
+ content: "\f62f";
+}
+
+.fa-telegram:before {
+ content: "\f2c6";
+}
+
+.fa-telegram-plane:before {
+ content: "\f3fe";
+}
+
+.fa-temperature-high:before {
+ content: "\f769";
+}
+
+.fa-temperature-low:before {
+ content: "\f76b";
+}
+
+.fa-tencent-weibo:before {
+ content: "\f1d5";
+}
+
+.fa-tenge:before {
+ content: "\f7d7";
+}
+
+.fa-terminal:before {
+ content: "\f120";
+}
+
+.fa-text-height:before {
+ content: "\f034";
+}
+
+.fa-text-width:before {
+ content: "\f035";
+}
+
+.fa-th:before {
+ content: "\f00a";
+}
+
+.fa-th-large:before {
+ content: "\f009";
+}
+
+.fa-th-list:before {
+ content: "\f00b";
+}
+
+.fa-the-red-yeti:before {
+ content: "\f69d";
+}
+
+.fa-theater-masks:before {
+ content: "\f630";
+}
+
+.fa-themeco:before {
+ content: "\f5c6";
+}
+
+.fa-themeisle:before {
+ content: "\f2b2";
+}
+
+.fa-thermometer:before {
+ content: "\f491";
+}
+
+.fa-thermometer-empty:before {
+ content: "\f2cb";
+}
+
+.fa-thermometer-full:before {
+ content: "\f2c7";
+}
+
+.fa-thermometer-half:before {
+ content: "\f2c9";
+}
+
+.fa-thermometer-quarter:before {
+ content: "\f2ca";
+}
+
+.fa-thermometer-three-quarters:before {
+ content: "\f2c8";
+}
+
+.fa-think-peaks:before {
+ content: "\f731";
+}
+
+.fa-thumbs-down:before {
+ content: "\f165";
+}
+
+.fa-thumbs-up:before {
+ content: "\f164";
+}
+
+.fa-thumbtack:before {
+ content: "\f08d";
+}
+
+.fa-ticket-alt:before {
+ content: "\f3ff";
+}
+
+.fa-times:before {
+ content: "\f00d";
+}
+
+.fa-times-circle:before {
+ content: "\f057";
+}
+
+.fa-tint:before {
+ content: "\f043";
+}
+
+.fa-tint-slash:before {
+ content: "\f5c7";
+}
+
+.fa-tired:before {
+ content: "\f5c8";
+}
+
+.fa-toggle-off:before {
+ content: "\f204";
+}
+
+.fa-toggle-on:before {
+ content: "\f205";
+}
+
+.fa-toilet:before {
+ content: "\f7d8";
+}
+
+.fa-toilet-paper:before {
+ content: "\f71e";
+}
+
+.fa-toolbox:before {
+ content: "\f552";
+}
+
+.fa-tools:before {
+ content: "\f7d9";
+}
+
+.fa-tooth:before {
+ content: "\f5c9";
+}
+
+.fa-torah:before {
+ content: "\f6a0";
+}
+
+.fa-torii-gate:before {
+ content: "\f6a1";
+}
+
+.fa-tractor:before {
+ content: "\f722";
+}
+
+.fa-trade-federation:before {
+ content: "\f513";
+}
+
+.fa-trademark:before {
+ content: "\f25c";
+}
+
+.fa-traffic-light:before {
+ content: "\f637";
+}
+
+.fa-train:before {
+ content: "\f238";
+}
+
+.fa-tram:before {
+ content: "\f7da";
+}
+
+.fa-transgender:before {
+ content: "\f224";
+}
+
+.fa-transgender-alt:before {
+ content: "\f225";
+}
+
+.fa-trash:before {
+ content: "\f1f8";
+}
+
+.fa-trash-alt:before {
+ content: "\f2ed";
+}
+
+.fa-tree:before {
+ content: "\f1bb";
+}
+
+.fa-trello:before {
+ content: "\f181";
+}
+
+.fa-tripadvisor:before {
+ content: "\f262";
+}
+
+.fa-trophy:before {
+ content: "\f091";
+}
+
+.fa-truck:before {
+ content: "\f0d1";
+}
+
+.fa-truck-loading:before {
+ content: "\f4de";
+}
+
+.fa-truck-monster:before {
+ content: "\f63b";
+}
+
+.fa-truck-moving:before {
+ content: "\f4df";
+}
+
+.fa-truck-pickup:before {
+ content: "\f63c";
+}
+
+.fa-tshirt:before {
+ content: "\f553";
+}
+
+.fa-tty:before {
+ content: "\f1e4";
+}
+
+.fa-tumblr:before {
+ content: "\f173";
+}
+
+.fa-tumblr-square:before {
+ content: "\f174";
+}
+
+.fa-tv:before {
+ content: "\f26c";
+}
+
+.fa-twitch:before {
+ content: "\f1e8";
+}
+
+.fa-twitter:before {
+ content: "\f099";
+}
+
+.fa-twitter-square:before {
+ content: "\f081";
+}
+
+.fa-typo3:before {
+ content: "\f42b";
+}
+
+.fa-uber:before {
+ content: "\f402";
+}
+
+.fa-ubuntu:before {
+ content: "\f7df";
+}
+
+.fa-uikit:before {
+ content: "\f403";
+}
+
+.fa-umbrella:before {
+ content: "\f0e9";
+}
+
+.fa-umbrella-beach:before {
+ content: "\f5ca";
+}
+
+.fa-underline:before {
+ content: "\f0cd";
+}
+
+.fa-undo:before {
+ content: "\f0e2";
+}
+
+.fa-undo-alt:before {
+ content: "\f2ea";
+}
+
+.fa-uniregistry:before {
+ content: "\f404";
+}
+
+.fa-universal-access:before {
+ content: "\f29a";
+}
+
+.fa-university:before {
+ content: "\f19c";
+}
+
+.fa-unlink:before {
+ content: "\f127";
+}
+
+.fa-unlock:before {
+ content: "\f09c";
+}
+
+.fa-unlock-alt:before {
+ content: "\f13e";
+}
+
+.fa-untappd:before {
+ content: "\f405";
+}
+
+.fa-upload:before {
+ content: "\f093";
+}
+
+.fa-ups:before {
+ content: "\f7e0";
+}
+
+.fa-usb:before {
+ content: "\f287";
+}
+
+.fa-user:before {
+ content: "\f007";
+}
+
+.fa-user-alt:before {
+ content: "\f406";
+}
+
+.fa-user-alt-slash:before {
+ content: "\f4fa";
+}
+
+.fa-user-astronaut:before {
+ content: "\f4fb";
+}
+
+.fa-user-check:before {
+ content: "\f4fc";
+}
+
+.fa-user-circle:before {
+ content: "\f2bd";
+}
+
+.fa-user-clock:before {
+ content: "\f4fd";
+}
+
+.fa-user-cog:before {
+ content: "\f4fe";
+}
+
+.fa-user-edit:before {
+ content: "\f4ff";
+}
+
+.fa-user-friends:before {
+ content: "\f500";
+}
+
+.fa-user-graduate:before {
+ content: "\f501";
+}
+
+.fa-user-injured:before {
+ content: "\f728";
+}
+
+.fa-user-lock:before {
+ content: "\f502";
+}
+
+.fa-user-md:before {
+ content: "\f0f0";
+}
+
+.fa-user-minus:before {
+ content: "\f503";
+}
+
+.fa-user-ninja:before {
+ content: "\f504";
+}
+
+.fa-user-plus:before {
+ content: "\f234";
+}
+
+.fa-user-secret:before {
+ content: "\f21b";
+}
+
+.fa-user-shield:before {
+ content: "\f505";
+}
+
+.fa-user-slash:before {
+ content: "\f506";
+}
+
+.fa-user-tag:before {
+ content: "\f507";
+}
+
+.fa-user-tie:before {
+ content: "\f508";
+}
+
+.fa-user-times:before {
+ content: "\f235";
+}
+
+.fa-users:before {
+ content: "\f0c0";
+}
+
+.fa-users-cog:before {
+ content: "\f509";
+}
+
+.fa-usps:before {
+ content: "\f7e1";
+}
+
+.fa-ussunnah:before {
+ content: "\f407";
+}
+
+.fa-utensil-spoon:before {
+ content: "\f2e5";
+}
+
+.fa-utensils:before {
+ content: "\f2e7";
+}
+
+.fa-vaadin:before {
+ content: "\f408";
+}
+
+.fa-vector-square:before {
+ content: "\f5cb";
+}
+
+.fa-venus:before {
+ content: "\f221";
+}
+
+.fa-venus-double:before {
+ content: "\f226";
+}
+
+.fa-venus-mars:before {
+ content: "\f228";
+}
+
+.fa-viacoin:before {
+ content: "\f237";
+}
+
+.fa-viadeo:before {
+ content: "\f2a9";
+}
+
+.fa-viadeo-square:before {
+ content: "\f2aa";
+}
+
+.fa-vial:before {
+ content: "\f492";
+}
+
+.fa-vials:before {
+ content: "\f493";
+}
+
+.fa-viber:before {
+ content: "\f409";
+}
+
+.fa-video:before {
+ content: "\f03d";
+}
+
+.fa-video-slash:before {
+ content: "\f4e2";
+}
+
+.fa-vihara:before {
+ content: "\f6a7";
+}
+
+.fa-vimeo:before {
+ content: "\f40a";
+}
+
+.fa-vimeo-square:before {
+ content: "\f194";
+}
+
+.fa-vimeo-v:before {
+ content: "\f27d";
+}
+
+.fa-vine:before {
+ content: "\f1ca";
+}
+
+.fa-vk:before {
+ content: "\f189";
+}
+
+.fa-vnv:before {
+ content: "\f40b";
+}
+
+.fa-volleyball-ball:before {
+ content: "\f45f";
+}
+
+.fa-volume-down:before {
+ content: "\f027";
+}
+
+.fa-volume-mute:before {
+ content: "\f6a9";
+}
+
+.fa-volume-off:before {
+ content: "\f026";
+}
+
+.fa-volume-up:before {
+ content: "\f028";
+}
+
+.fa-vote-yea:before {
+ content: "\f772";
+}
+
+.fa-vr-cardboard:before {
+ content: "\f729";
+}
+
+.fa-vuejs:before {
+ content: "\f41f";
+}
+
+.fa-walking:before {
+ content: "\f554";
+}
+
+.fa-wallet:before {
+ content: "\f555";
+}
+
+.fa-warehouse:before {
+ content: "\f494";
+}
+
+.fa-water:before {
+ content: "\f773";
+}
+
+.fa-weebly:before {
+ content: "\f5cc";
+}
+
+.fa-weibo:before {
+ content: "\f18a";
+}
+
+.fa-weight:before {
+ content: "\f496";
+}
+
+.fa-weight-hanging:before {
+ content: "\f5cd";
+}
+
+.fa-weixin:before {
+ content: "\f1d7";
+}
+
+.fa-whatsapp:before {
+ content: "\f232";
+}
+
+.fa-whatsapp-square:before {
+ content: "\f40c";
+}
+
+.fa-wheelchair:before {
+ content: "\f193";
+}
+
+.fa-whmcs:before {
+ content: "\f40d";
+}
+
+.fa-wifi:before {
+ content: "\f1eb";
+}
+
+.fa-wikipedia-w:before {
+ content: "\f266";
+}
+
+.fa-wind:before {
+ content: "\f72e";
+}
+
+.fa-window-close:before {
+ content: "\f410";
+}
+
+.fa-window-maximize:before {
+ content: "\f2d0";
+}
+
+.fa-window-minimize:before {
+ content: "\f2d1";
+}
+
+.fa-window-restore:before {
+ content: "\f2d2";
+}
+
+.fa-windows:before {
+ content: "\f17a";
+}
+
+.fa-wine-bottle:before {
+ content: "\f72f";
+}
+
+.fa-wine-glass:before {
+ content: "\f4e3";
+}
+
+.fa-wine-glass-alt:before {
+ content: "\f5ce";
+}
+
+.fa-wix:before {
+ content: "\f5cf";
+}
+
+.fa-wizards-of-the-coast:before {
+ content: "\f730";
+}
+
+.fa-wolf-pack-battalion:before {
+ content: "\f514";
+}
+
+.fa-won-sign:before {
+ content: "\f159";
+}
+
+.fa-wordpress:before {
+ content: "\f19a";
+}
+
+.fa-wordpress-simple:before {
+ content: "\f411";
+}
+
+.fa-wpbeginner:before {
+ content: "\f297";
+}
+
+.fa-wpexplorer:before {
+ content: "\f2de";
+}
+
+.fa-wpforms:before {
+ content: "\f298";
+}
+
+.fa-wpressr:before {
+ content: "\f3e4";
+}
+
+.fa-wrench:before {
+ content: "\f0ad";
+}
+
+.fa-x-ray:before {
+ content: "\f497";
+}
+
+.fa-xbox:before {
+ content: "\f412";
+}
+
+.fa-xing:before {
+ content: "\f168";
+}
+
+.fa-xing-square:before {
+ content: "\f169";
+}
+
+.fa-y-combinator:before {
+ content: "\f23b";
+}
+
+.fa-yahoo:before {
+ content: "\f19e";
+}
+
+.fa-yandex:before {
+ content: "\f413";
+}
+
+.fa-yandex-international:before {
+ content: "\f414";
+}
+
+.fa-yarn:before {
+ content: "\f7e3";
+}
+
+.fa-yelp:before {
+ content: "\f1e9";
+}
+
+.fa-yen-sign:before {
+ content: "\f157";
+}
+
+.fa-yin-yang:before {
+ content: "\f6ad";
+}
+
+.fa-yoast:before {
+ content: "\f2b1";
+}
+
+.fa-youtube:before {
+ content: "\f167";
+}
+
+.fa-youtube-square:before {
+ content: "\f431";
+}
+
+.fa-zhihu:before {
+ content: "\f63f";
+}
+
+.fa,
+.fa,
+.fas,
+.far,
+.fal,
+.fab {
+ -moz-osx-font-smoothing: grayscale;
+ -webkit-font-smoothing: antialiased;
+ display: inline-block;
+ font-style: normal;
+ font-variant: normal;
+ text-rendering: auto;
+ line-height: 1;
+}
+
+@font-face {
+ font-family: "pf-v6-pficon";
+ src: url("./assets/pficon/pf-v6-pficon.woff2") format("woff2");
+}
+.pf-v6-pficon-zone:before, .pf-v6-pficon-warning-triangle:before, .pf-v6-pficon-volume:before, .pf-v6-pficon-virtual-machine:before, .pf-v6-pficon-users:before, .pf-v6-pficon-user:before, .pf-v6-pficon-unplugged:before, .pf-v6-pficon-unlocked:before, .pf-v6-pficon-unknown:before, .pf-v6-pficon-trend-up:before, .pf-v6-pficon-trend-down:before, .pf-v6-pficon-treeview:before, .pf-v6-pficon-topology:before, .pf-v6-pficon-thumb-tack:before, .pf-v6-pficon-tenant:before, .pf-v6-pficon-task:before, .pf-v6-pficon-storage-domain:before, .pf-v6-pficon-spinner2:before, .pf-v6-pficon-spinner:before, .pf-v6-pficon-severity-undefined:before, .pf-v6-pficon-severity-none:before, .pf-v6-pficon-severity-moderate:before, .pf-v6-pficon-severity-minor:before, .pf-v6-pficon-severity-important:before, .pf-v6-pficon-severity-critical:before, .pf-v6-pficon-services:before, .pf-v6-pficon-service:before, .pf-v6-pficon-service-catalog:before, .pf-v6-pficon-server:before, .pf-v6-pficon-server-group:before, .pf-v6-pficon-security:before, .pf-v6-pficon-screen:before, .pf-v6-pficon-save:before, .pf-v6-pficon-running:before, .pf-v6-pficon-resources-full:before, .pf-v6-pficon-resources-empty:before, .pf-v6-pficon-resources-almost-full:before, .pf-v6-pficon-resources-almost-empty:before, .pf-v6-pficon-resource-pool:before, .pf-v6-pficon-repository:before, .pf-v6-pficon-replicator:before, .pf-v6-pficon-remove2:before, .pf-v6-pficon-registry:before, .pf-v6-pficon-regions:before, .pf-v6-pficon-rebooting:before, .pf-v6-pficon-rebalance:before, .pf-v6-pficon-project:before, .pf-v6-pficon-process-automation:before, .pf-v6-pficon-private:before, .pf-v6-pficon-print:before, .pf-v6-pficon-port:before, .pf-v6-pficon-plugged:before, .pf-v6-pficon-pficon-vcenter:before, .pf-v6-pficon-pficon-template:before, .pf-v6-pficon-pficon-sort-common-desc:before, .pf-v6-pficon-pficon-sort-common-asc:before, .pf-v6-pficon-pficon-satellite:before, .pf-v6-pficon-pficon-network-range:before, .pf-v6-pficon-pficon-history:before, .pf-v6-pficon-pficon-dragdrop:before, .pf-v6-pficon-pending:before, .pf-v6-pficon-paused:before, .pf-v6-pficon-panel-open:before, .pf-v6-pficon-panel-close:before, .pf-v6-pficon-package:before, .pf-v6-pficon-os-image:before, .pf-v6-pficon-orders:before, .pf-v6-pficon-optimize:before, .pf-v6-pficon-openstack:before, .pf-v6-pficon-openshift:before, .pf-v6-pficon-open-drawer-right:before, .pf-v6-pficon-on:before, .pf-v6-pficon-on-running:before, .pf-v6-pficon-ok:before, .pf-v6-pficon-off:before, .pf-v6-pficon-not-started:before, .pf-v6-pficon-new-process:before, .pf-v6-pficon-network:before, .pf-v6-pficon-namespaces:before, .pf-v6-pficon-multicluster:before, .pf-v6-pficon-monitoring:before, .pf-v6-pficon-module:before, .pf-v6-pficon-migration:before, .pf-v6-pficon-middleware:before, .pf-v6-pficon-messages:before, .pf-v6-pficon-memory:before, .pf-v6-pficon-maintenance:before, .pf-v6-pficon-locked:before, .pf-v6-pficon-key:before, .pf-v6-pficon-integration:before, .pf-v6-pficon-infrastructure:before, .pf-v6-pficon-info:before, .pf-v6-pficon-in-progress:before, .pf-v6-pficon-import:before, .pf-v6-pficon-home:before, .pf-v6-pficon-history:before, .pf-v6-pficon-help:before, .pf-v6-pficon-globe-route:before, .pf-v6-pficon-folder-open:before, .pf-v6-pficon-folder-close:before, .pf-v6-pficon-flavor:before, .pf-v6-pficon-filter:before, .pf-v6-pficon-export:before, .pf-v6-pficon-error-circle-o:before, .pf-v6-pficon-equalizer:before, .pf-v6-pficon-enterprise:before, .pf-v6-pficon-enhancement:before, .pf-v6-pficon-edit:before, .pf-v6-pficon-domain:before, .pf-v6-pficon-disconnected:before, .pf-v6-pficon-degraded:before, .pf-v6-pficon-data-source:before, .pf-v6-pficon-data-sink:before, .pf-v6-pficon-data-processor:before, .pf-v6-pficon-critical-risk:before, .pf-v6-pficon-cpu:before, .pf-v6-pficon-container-node:before, .pf-v6-pficon-connected:before, .pf-v6-pficon-cluster:before, .pf-v6-pficon-cloud-tenant:before, .pf-v6-pficon-cloud-security:before, .pf-v6-pficon-close:before, .pf-v6-pficon-chat:before, .pf-v6-pficon-catalog:before, .pf-v6-pficon-bundle:before, .pf-v6-pficon-builder-image:before, .pf-v6-pficon-build:before, .pf-v6-pficon-blueprint:before, .pf-v6-pficon-bell:before, .pf-v6-pficon-automation:before, .pf-v6-pficon-attention-bell:before, .pf-v6-pficon-asleep:before, .pf-v6-pficon-arrow:before, .pf-v6-pficon-applications:before, .pf-v6-pficon-ansible-tower:before, .pf-v6-pficon-add-circle-o:before {
+ font-family: "pf-v6-pficon";
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+ font-style: normal;
+ font-variant: normal;
+ font-weight: normal;
+ text-decoration-line: none;
+ text-transform: none;
+}
+
+.pf-v6-pficon-add-circle-o:before {
+ content: "\e61b";
+}
+
+.pf-v6-pficon-ansible-tower:before {
+ content: "\e950";
+}
+
+.pf-v6-pficon-applications:before {
+ content: "\e936";
+}
+
+.pf-v6-pficon-arrow:before {
+ content: "\e929";
+}
+
+.pf-v6-pficon-asleep:before {
+ content: "\e92e";
+}
+
+.pf-v6-pficon-attention-bell:before {
+ content: "\e951";
+}
+
+.pf-v6-pficon-automation:before {
+ content: "\e937";
+}
+
+.pf-v6-pficon-bell:before {
+ content: "\e952";
+}
+
+.pf-v6-pficon-blueprint:before {
+ content: "\e915";
+}
+
+.pf-v6-pficon-build:before {
+ content: "\e902";
+}
+
+.pf-v6-pficon-builder-image:before {
+ content: "\e800";
+}
+
+.pf-v6-pficon-bundle:before {
+ content: "\e918";
+}
+
+.pf-v6-pficon-catalog:before {
+ content: "\e953";
+}
+
+.pf-v6-pficon-chat:before {
+ content: "\e954";
+}
+
+.pf-v6-pficon-close:before {
+ content: "\e60b";
+}
+
+.pf-v6-pficon-cloud-security:before {
+ content: "\e903";
+}
+
+.pf-v6-pficon-cloud-tenant:before {
+ content: "\e904";
+}
+
+.pf-v6-pficon-cluster:before {
+ content: "\e620";
+}
+
+.pf-v6-pficon-connected:before {
+ content: "\e938";
+}
+
+.pf-v6-pficon-container-node:before {
+ content: "\e621";
+}
+
+.pf-v6-pficon-cpu:before {
+ content: "\e927";
+}
+
+.pf-v6-pficon-critical-risk:before {
+ content: "\e976";
+}
+
+.pf-v6-pficon-data-processor:before {
+ content: "\e97b";
+}
+
+.pf-v6-pficon-data-sink:before {
+ content: "\e978";
+}
+
+.pf-v6-pficon-data-source:before {
+ content: "\e979";
+}
+
+.pf-v6-pficon-degraded:before {
+ content: "\e91b";
+}
+
+.pf-v6-pficon-disconnected:before {
+ content: "\e955";
+}
+
+.pf-v6-pficon-domain:before {
+ content: "\e919";
+}
+
+.pf-v6-pficon-edit:before {
+ content: "\e60a";
+}
+
+.pf-v6-pficon-enhancement:before {
+ content: "\e93a";
+}
+
+.pf-v6-pficon-enterprise:before {
+ content: "\e906";
+}
+
+.pf-v6-pficon-equalizer:before {
+ content: "\e956";
+}
+
+.pf-v6-pficon-error-circle-o:before {
+ content: "\e926";
+}
+
+.pf-v6-pficon-export:before {
+ content: "\e616";
+}
+
+.pf-v6-pficon-filter:before {
+ content: "\e943";
+}
+
+.pf-v6-pficon-flavor:before {
+ content: "\e957";
+}
+
+.pf-v6-pficon-folder-close:before {
+ content: "\e607";
+}
+
+.pf-v6-pficon-folder-open:before {
+ content: "\e606";
+}
+
+.pf-v6-pficon-globe-route:before {
+ content: "\e958";
+}
+
+.pf-v6-pficon-help:before {
+ content: "\e605";
+}
+
+.pf-v6-pficon-history:before {
+ content: "\e617";
+}
+
+.pf-v6-pficon-home:before {
+ content: "\e618";
+}
+
+.pf-v6-pficon-import:before {
+ content: "\e615";
+}
+
+.pf-v6-pficon-in-progress:before {
+ content: "\e933";
+}
+
+.pf-v6-pficon-info:before {
+ content: "\e92b";
+}
+
+.pf-v6-pficon-infrastructure:before {
+ content: "\e93d";
+}
+
+.pf-v6-pficon-integration:before {
+ content: "\e948";
+}
+
+.pf-v6-pficon-key:before {
+ content: "\e924";
+}
+
+.pf-v6-pficon-locked:before {
+ content: "\e923";
+}
+
+.pf-v6-pficon-maintenance:before {
+ content: "\e932";
+}
+
+.pf-v6-pficon-memory:before {
+ content: "\e908";
+}
+
+.pf-v6-pficon-messages:before {
+ content: "\e603";
+}
+
+.pf-v6-pficon-middleware:before {
+ content: "\e917";
+}
+
+.pf-v6-pficon-migration:before {
+ content: "\e931";
+}
+
+.pf-v6-pficon-module:before {
+ content: "\e959";
+}
+
+.pf-v6-pficon-monitoring:before {
+ content: "\e95a";
+}
+
+.pf-v6-pficon-multicluster:before {
+ content: "\e97c";
+}
+
+.pf-v6-pficon-namespaces:before {
+ content: "\e95b";
+}
+
+.pf-v6-pficon-network:before {
+ content: "\e909";
+}
+
+.pf-v6-pficon-new-process:before {
+ content: "\e95c";
+}
+
+.pf-v6-pficon-not-started:before {
+ content: "\e95d";
+}
+
+.pf-v6-pficon-off:before {
+ content: "\e92d";
+}
+
+.pf-v6-pficon-ok:before {
+ content: "\e602";
+}
+
+.pf-v6-pficon-on-running:before {
+ content: "\e925";
+}
+
+.pf-v6-pficon-on:before {
+ content: "\e92c";
+}
+
+.pf-v6-pficon-open-drawer-right:before {
+ content: "\e977";
+}
+
+.pf-v6-pficon-openshift:before {
+ content: "\e95e";
+}
+
+.pf-v6-pficon-openstack:before {
+ content: "\e95f";
+}
+
+.pf-v6-pficon-optimize:before {
+ content: "\e93e";
+}
+
+.pf-v6-pficon-orders:before {
+ content: "\e93f";
+}
+
+.pf-v6-pficon-os-image:before {
+ content: "\e960";
+}
+
+.pf-v6-pficon-package:before {
+ content: "\e961";
+}
+
+.pf-v6-pficon-panel-close:before {
+ content: "\e962";
+}
+
+.pf-v6-pficon-panel-open:before {
+ content: "\e963";
+}
+
+.pf-v6-pficon-paused:before {
+ content: "\e92f";
+}
+
+.pf-v6-pficon-pending:before {
+ content: "\e964";
+}
+
+.pf-v6-pficon-pficon-dragdrop:before {
+ content: "\e965";
+}
+
+.pf-v6-pficon-pficon-history:before {
+ content: "\e966";
+}
+
+.pf-v6-pficon-pficon-network-range:before {
+ content: "\e967";
+}
+
+.pf-v6-pficon-pficon-satellite:before {
+ content: "\e968";
+}
+
+.pf-v6-pficon-pficon-sort-common-asc:before {
+ content: "\e94e";
+}
+
+.pf-v6-pficon-pficon-sort-common-desc:before {
+ content: "\e94f";
+}
+
+.pf-v6-pficon-pficon-template:before {
+ content: "\e94c";
+}
+
+.pf-v6-pficon-pficon-vcenter:before {
+ content: "\e969";
+}
+
+.pf-v6-pficon-plugged:before {
+ content: "\e96a";
+}
+
+.pf-v6-pficon-port:before {
+ content: "\e96b";
+}
+
+.pf-v6-pficon-print:before {
+ content: "\e612";
+}
+
+.pf-v6-pficon-private:before {
+ content: "\e914";
+}
+
+.pf-v6-pficon-process-automation:before {
+ content: "\e949";
+}
+
+.pf-v6-pficon-project:before {
+ content: "\e96c";
+}
+
+.pf-v6-pficon-rebalance:before {
+ content: "\e91c";
+}
+
+.pf-v6-pficon-rebooting:before {
+ content: "\e96d";
+}
+
+.pf-v6-pficon-regions:before {
+ content: "\e90a";
+}
+
+.pf-v6-pficon-registry:before {
+ content: "\e623";
+}
+
+.pf-v6-pficon-remove2:before {
+ content: "\e96e";
+}
+
+.pf-v6-pficon-replicator:before {
+ content: "\e624";
+}
+
+.pf-v6-pficon-repository:before {
+ content: "\e90b";
+}
+
+.pf-v6-pficon-resource-pool:before {
+ content: "\e90c";
+}
+
+.pf-v6-pficon-resources-almost-empty:before {
+ content: "\e91d";
+}
+
+.pf-v6-pficon-resources-almost-full:before {
+ content: "\e912";
+}
+
+.pf-v6-pficon-resources-empty:before {
+ content: "\e96f";
+}
+
+.pf-v6-pficon-resources-full:before {
+ content: "\e913";
+}
+
+.pf-v6-pficon-running:before {
+ content: "\e970";
+}
+
+.pf-v6-pficon-save:before {
+ content: "\e601";
+}
+
+.pf-v6-pficon-screen:before {
+ content: "\e971";
+}
+
+.pf-v6-pficon-security:before {
+ content: "\e946";
+}
+
+.pf-v6-pficon-server-group:before {
+ content: "\e91a";
+}
+
+.pf-v6-pficon-server:before {
+ content: "\e90d";
+}
+
+.pf-v6-pficon-service-catalog:before {
+ content: "\e972";
+}
+
+.pf-v6-pficon-service:before {
+ content: "\e61e";
+}
+
+.pf-v6-pficon-services:before {
+ content: "\e947";
+}
+
+.pf-v6-pficon-severity-critical:before {
+ content: "\e97e";
+}
+
+.pf-v6-pficon-severity-important:before {
+ content: "\e97f";
+}
+
+.pf-v6-pficon-severity-minor:before {
+ content: "\e980";
+}
+
+.pf-v6-pficon-severity-moderate:before {
+ content: "\e981";
+}
+
+.pf-v6-pficon-severity-none:before {
+ content: "\e982";
+}
+
+.pf-v6-pficon-severity-undefined:before {
+ content: "\e983";
+}
+
+.pf-v6-pficon-spinner:before {
+ content: "\e973";
+}
+
+.pf-v6-pficon-spinner2:before {
+ content: "\e613";
+}
+
+.pf-v6-pficon-storage-domain:before {
+ content: "\e90e";
+}
+
+.pf-v6-pficon-task:before {
+ content: "\e974";
+}
+
+.pf-v6-pficon-tenant:before {
+ content: "\e916";
+}
+
+.pf-v6-pficon-thumb-tack:before {
+ content: "\e920";
+}
+
+.pf-v6-pficon-topology:before {
+ content: "\e608";
+}
+
+.pf-v6-pficon-treeview:before {
+ content: "\e97d";
+}
+
+.pf-v6-pficon-trend-down:before {
+ content: "\e900";
+}
+
+.pf-v6-pficon-trend-up:before {
+ content: "\e901";
+}
+
+.pf-v6-pficon-unknown:before {
+ content: "\e935";
+}
+
+.pf-v6-pficon-unlocked:before {
+ content: "\e922";
+}
+
+.pf-v6-pficon-unplugged:before {
+ content: "\e942";
+}
+
+.pf-v6-pficon-user:before {
+ content: "\e91e";
+}
+
+.pf-v6-pficon-users:before {
+ content: "\e91f";
+}
+
+.pf-v6-pficon-virtual-machine:before {
+ content: "\e90f";
+}
+
+.pf-v6-pficon-volume:before {
+ content: "\e910";
+}
+
+.pf-v6-pficon-warning-triangle:before {
+ content: "\e975";
+}
+
+.pf-v6-pficon-zone:before {
+ content: "\e911";
+}
+
+.pf-v6-svg {
+ width: 1em;
+ height: 1em;
+ vertical-align: -0.125em;
+}
+
+:root {
+ --pf-v6-global--inverse--multiplier: 1;
+ --pf-t--color--black: #000000;
+ --pf-t--color--blue--10: #e0f0ff;
+ --pf-t--color--blue--20: #b9dafc;
+ --pf-t--color--blue--30: #92c5f9;
+ --pf-t--color--blue--40: #4394e5;
+ --pf-t--color--blue--50: #0066cc;
+ --pf-t--color--blue--60: #004d99;
+ --pf-t--color--blue--70: #003366;
+ --pf-t--color--blue--80: #002250;
+ --pf-t--color--gray--10: #f2f2f2;
+ --pf-t--color--gray--20: #e0e0e0;
+ --pf-t--color--gray--30: #c7c7c7;
+ --pf-t--color--gray--40: #a3a3a3;
+ --pf-t--color--gray--50: #707070;
+ --pf-t--color--gray--60: #4d4d4d;
+ --pf-t--color--gray--70: #383838;
+ --pf-t--color--gray--80: #292929;
+ --pf-t--color--gray--90: #1f1f1f;
+ --pf-t--color--gray--95: #151515;
+ --pf-t--color--green--10: #e9f7df;
+ --pf-t--color--green--20: #d1f1bb;
+ --pf-t--color--green--30: #afdc8f;
+ --pf-t--color--green--40: #87bb62;
+ --pf-t--color--green--50: #63993d;
+ --pf-t--color--green--60: #3d7317;
+ --pf-t--color--green--70: #204d00;
+ --pf-t--color--orange--10: #ffe8cc;
+ --pf-t--color--orange--20: #fccb8f;
+ --pf-t--color--orange--30: #f8ae54;
+ --pf-t--color--orange--40: #f5921b;
+ --pf-t--color--orange--50: #ca6c0f;
+ --pf-t--color--orange--60: #9e4a06;
+ --pf-t--color--orange--70: #732e00;
+ --pf-t--color--orange--80: #4d1f00;
+ --pf-t--color--purple--10: #ece6ff;
+ --pf-t--color--purple--20: #d0c5f4;
+ --pf-t--color--purple--30: #b6a6e9;
+ --pf-t--color--purple--40: #876fd4;
+ --pf-t--color--purple--50: #5e40be;
+ --pf-t--color--purple--60: #3d2785;
+ --pf-t--color--purple--70: #21134d;
+ --pf-t--color--purple--80: #1b0d33;
+ --pf-t--color--red--10: #fce3e3;
+ --pf-t--color--red--20: #fbc5c5;
+ --pf-t--color--red--30: #f9a8a8;
+ --pf-t--color--red--40: #f56e6e;
+ --pf-t--color--red--50: #ee0000;
+ --pf-t--color--red--60: #a60000;
+ --pf-t--color--red--70: #5f0000;
+ --pf-t--color--red--80: #3f0000;
+ --pf-t--color--red-orange--10: #ffe3d9;
+ --pf-t--color--red-orange--20: #fbbea8;
+ --pf-t--color--red-orange--30: #f89b78;
+ --pf-t--color--red-orange--40: #f4784a;
+ --pf-t--color--red-orange--50: #f0561d;
+ --pf-t--color--red-orange--60: #b1380b;
+ --pf-t--color--red-orange--70: #731f00;
+ --pf-t--color--teal--10: #daf2f2;
+ --pf-t--color--teal--20: #b9e5e5;
+ --pf-t--color--teal--30: #9ad8d8;
+ --pf-t--color--teal--40: #63bdbd;
+ --pf-t--color--teal--50: #37a3a3;
+ --pf-t--color--teal--60: #147878;
+ --pf-t--color--teal--70: #004d4d;
+ --pf-t--color--teal--80: #003333;
+ --pf-t--color--white: #ffffff;
+ --pf-t--color--yellow--10: #fff4cc;
+ --pf-t--color--yellow--20: #ffe072;
+ --pf-t--color--yellow--30: #ffcc17;
+ --pf-t--color--yellow--40: #dca614;
+ --pf-t--color--yellow--50: #b98412;
+ --pf-t--color--yellow--60: #96640f;
+ --pf-t--color--yellow--70: #73480b;
+ --pf-t--color--yellow--80: #54330b;
+ --pf-t--global--background--color--500: rgba(21, 21, 21, 0.2000);
+ --pf-t--global--background--color--600: rgba(199, 199, 199, 0.2500);
+ --pf-t--global--background--color--action--plain--default: rgba(255, 255, 255, 0.0000);
+ --pf-t--global--border--color--high-contrast: rgba(255, 255, 255, 0.0000);
+ --pf-t--global--border--radius--0: 0px;
+ --pf-t--global--border--radius--100: 4px;
+ --pf-t--global--border--radius--200: 6px;
+ --pf-t--global--border--radius--300: 16px;
+ --pf-t--global--border--radius--400: 24px;
+ --pf-t--global--border--radius--500: 999px;
+ --pf-t--global--border--width--100: 1px;
+ --pf-t--global--border--width--200: 2px;
+ --pf-t--global--border--width--300: 3px;
+ --pf-t--global--border--width--400: 4px;
+ --pf-t--global--box-shadow--X--100: -10px;
+ --pf-t--global--box-shadow--X--200: -4px;
+ --pf-t--global--box-shadow--X--300: -1px;
+ --pf-t--global--box-shadow--X--400: 0px;
+ --pf-t--global--box-shadow--X--50: -20px;
+ --pf-t--global--box-shadow--X--500: 1px;
+ --pf-t--global--box-shadow--X--600: 4px;
+ --pf-t--global--box-shadow--X--700: 10px;
+ --pf-t--global--box-shadow--X--800: 20px;
+ --pf-t--global--box-shadow--Y--100: -10px;
+ --pf-t--global--box-shadow--Y--200: -4px;
+ --pf-t--global--box-shadow--Y--300: -1px;
+ --pf-t--global--box-shadow--Y--400: 0px;
+ --pf-t--global--box-shadow--Y--50: -20px;
+ --pf-t--global--box-shadow--Y--500: 1px;
+ --pf-t--global--box-shadow--Y--600: 4px;
+ --pf-t--global--box-shadow--Y--700: 10px;
+ --pf-t--global--box-shadow--Y--800: 20px;
+ --pf-t--global--box-shadow--blur--100: 4px;
+ --pf-t--global--box-shadow--blur--200: 9px;
+ --pf-t--global--box-shadow--blur--300: 20px;
+ --pf-t--global--box-shadow--color--100: rgba(41, 41, 41, 0.1500);
+ --pf-t--global--box-shadow--color--200: rgba(41, 41, 41, 0.2000);
+ --pf-t--global--box-shadow--spread--100: 0px;
+ --pf-t--global--box-shadow--spread--200: -4px;
+ --pf-t--global--box-shadow--spread--300: -8px;
+ --pf-t--global--box-shadow--spread--400: -20px;
+ --pf-t--global--breakpoint--100: 0rem;
+ --pf-t--global--breakpoint--200: 36rem;
+ --pf-t--global--breakpoint--250: 40rem;
+ --pf-t--global--breakpoint--300: 48rem;
+ --pf-t--global--breakpoint--350: 60rem;
+ --pf-t--global--breakpoint--400: 62rem;
+ --pf-t--global--breakpoint--500: 75rem;
+ --pf-t--global--breakpoint--550: 80rem;
+ --pf-t--global--breakpoint--600: 90.625rem;
+ --pf-t--global--color--nonstatus--green--400: #3d7019;
+ --pf-t--global--color--status--danger--300: #501600;
+ --pf-t--global--color--status--success--150: #3d7019;
+ --pf-t--global--color--status--success--300: #153300;
+ --pf-t--global--delay--100: 0ms;
+ --pf-t--global--delay--200: 50ms;
+ --pf-t--global--delay--300: 100ms;
+ --pf-t--global--delay--400: 7000ms;
+ --pf-t--global--duration--100: 100ms;
+ --pf-t--global--duration--200: 200ms;
+ --pf-t--global--duration--300: 300ms;
+ --pf-t--global--duration--400: 400ms;
+ --pf-t--global--duration--50: 50ms;
+ --pf-t--global--duration--500: 500ms;
+ --pf-t--global--duration--600: 600ms;
+ --pf-t--global--font--family--100: "Red Hat Text", "RedHatText", "Noto Sans Arabic", "Noto Sans Hebrew", "Noto Sans JP", "Noto Sans KR", "Noto Sans Malayalam", "Noto Sans SC", "Noto Sans TC", "Noto Sans Thai", Helvetica, Arial, sans-serif;
+ --pf-t--global--font--family--200: "Red Hat Display", "RedHatDisplay", "Noto Sans Arabic", "Noto Sans Hebrew", "Noto Sans JP", "Noto Sans KR", "Noto Sans Malayalam", "Noto Sans SC", "Noto Sans TC", "Noto Sans Thai", Helvetica, Arial, sans-serif;
+ --pf-t--global--font--family--300: "Red Hat Mono", "RedHatMono", "Courier New", Courier, monospace;
+ --pf-t--global--font--line-height--100: 1.3;
+ --pf-t--global--font--line-height--200: 1.5;
+ --pf-t--global--font--size--100: 0.75rem;
+ --pf-t--global--font--size--200: 0.875rem;
+ --pf-t--global--font--size--300: 1rem;
+ --pf-t--global--font--size--400: 1.125rem;
+ --pf-t--global--font--size--500: 1.25rem;
+ --pf-t--global--font--size--600: 1.5rem;
+ --pf-t--global--font--size--700: 1.75rem;
+ --pf-t--global--font--size--800: 2.25rem;
+ --pf-t--global--font--weight--100: 400;
+ --pf-t--global--font--weight--200: 500;
+ --pf-t--global--font--weight--300: 500;
+ --pf-t--global--font--weight--400: 700;
+ --pf-t--global--icon--size--100: 0.75rem;
+ --pf-t--global--icon--size--200: 0.875rem;
+ --pf-t--global--icon--size--250: 1rem;
+ --pf-t--global--icon--size--300: 1.5rem;
+ --pf-t--global--icon--size--400: 3.5rem;
+ --pf-t--global--icon--size--500: 6rem;
+ --pf-t--global--spacer--100: 0.25rem;
+ --pf-t--global--spacer--200: 0.5rem;
+ --pf-t--global--spacer--300: 1rem;
+ --pf-t--global--spacer--400: 1.5rem;
+ --pf-t--global--spacer--500: 2rem;
+ --pf-t--global--spacer--600: 3rem;
+ --pf-t--global--spacer--700: 4rem;
+ --pf-t--global--spacer--800: 5rem;
+ --pf-t--global--text-decoration--line--100: none;
+ --pf-t--global--text-decoration--line--200: underline;
+ --pf-t--global--text-decoration--style--100: solid;
+ --pf-t--global--text-decoration--style--200: dashed;
+ --pf-t--global--timing-function--100: cubic-bezier(.4, 0, .7, .2);
+ --pf-t--global--timing-function--200: cubic-bezier(.4, 0, .2, 1);
+ --pf-t--global--timing-function--300: cubic-bezier(0, 0, .2, 1);
+ --pf-t--global--z-index--100: 100;
+ --pf-t--global--z-index--200: 200;
+ --pf-t--global--z-index--300: 300;
+ --pf-t--global--z-index--400: 400;
+ --pf-t--global--z-index--500: 500;
+ --pf-t--global--z-index--600: 600;
+ --pf-t--global--background--color--100: var(--pf-t--color--white);
+ --pf-t--global--background--color--200: var(--pf-t--color--gray--10);
+ --pf-t--global--background--color--300: var(--pf-t--color--gray--20);
+ --pf-t--global--background--color--400: var(--pf-t--color--gray--80);
+ --pf-t--global--background--color--450: var(--pf-t--color--gray--70);
+ --pf-t--global--background--color--action--plain--clicked: var(--pf-t--global--background--color--600);
+ --pf-t--global--background--color--action--plain--hover: var(--pf-t--global--background--color--600);
+ --pf-t--global--background--color--backdrop--default: var(--pf-t--global--background--color--500);
+ --pf-t--global--background--color--highlight--100: var(--pf-t--color--yellow--30);
+ --pf-t--global--background--color--highlight--200: var(--pf-t--color--yellow--40);
+ --pf-t--global--background--color--tertiary--default: var(--pf-t--global--background--color--600);
+ --pf-t--global--border--color--100: var(--pf-t--color--gray--30);
+ --pf-t--global--border--color--200: var(--pf-t--color--gray--40);
+ --pf-t--global--border--color--300: var(--pf-t--color--gray--50);
+ --pf-t--global--border--color--450: var(--pf-t--color--gray--60);
+ --pf-t--global--border--color--50: var(--pf-t--color--gray--20);
+ --pf-t--global--border--radius--large: var(--pf-t--global--border--radius--400);
+ --pf-t--global--border--radius--medium: var(--pf-t--global--border--radius--300);
+ --pf-t--global--border--radius--pill: var(--pf-t--global--border--radius--500);
+ --pf-t--global--border--radius--sharp: var(--pf-t--global--border--radius--0);
+ --pf-t--global--border--radius--small: var(--pf-t--global--border--radius--200);
+ --pf-t--global--border--radius--tiny: var(--pf-t--global--border--radius--100);
+ --pf-t--global--border--width--action--clicked: var(--pf-t--global--border--width--200);
+ --pf-t--global--border--width--action--default: var(--pf-t--global--border--width--100);
+ --pf-t--global--border--width--action--hover: var(--pf-t--global--border--width--200);
+ --pf-t--global--border--width--box--clicked: var(--pf-t--global--border--width--200);
+ --pf-t--global--border--width--box--default: var(--pf-t--global--border--width--100);
+ --pf-t--global--border--width--box--hover: var(--pf-t--global--border--width--100);
+ --pf-t--global--border--width--box--status--default: var(--pf-t--global--border--width--200);
+ --pf-t--global--border--width--box--status--read: var(--pf-t--global--border--width--100);
+ --pf-t--global--border--width--control--clicked: var(--pf-t--global--border--width--200);
+ --pf-t--global--border--width--control--default: var(--pf-t--global--border--width--100);
+ --pf-t--global--border--width--control--hover: var(--pf-t--global--border--width--100);
+ --pf-t--global--border--width--divider--clicked: var(--pf-t--global--border--width--100);
+ --pf-t--global--border--width--divider--default: var(--pf-t--global--border--width--100);
+ --pf-t--global--border--width--divider--hover: var(--pf-t--global--border--width--100);
+ --pf-t--global--border--width--extra-strong: var(--pf-t--global--border--width--300);
+ --pf-t--global--border--width--regular: var(--pf-t--global--border--width--100);
+ --pf-t--global--border--width--strong: var(--pf-t--global--border--width--200);
+ --pf-t--global--box-shadow--X--lg--bottom: var(--pf-t--global--box-shadow--X--400);
+ --pf-t--global--box-shadow--X--lg--default: var(--pf-t--global--box-shadow--X--400);
+ --pf-t--global--box-shadow--X--lg--left: var(--pf-t--global--box-shadow--X--50);
+ --pf-t--global--box-shadow--X--lg--right: var(--pf-t--global--box-shadow--X--800);
+ --pf-t--global--box-shadow--X--lg--top: var(--pf-t--global--box-shadow--X--400);
+ --pf-t--global--box-shadow--X--md--bottom: var(--pf-t--global--box-shadow--X--400);
+ --pf-t--global--box-shadow--X--md--default: var(--pf-t--global--box-shadow--X--400);
+ --pf-t--global--box-shadow--X--md--left: var(--pf-t--global--box-shadow--X--100);
+ --pf-t--global--box-shadow--X--md--right: var(--pf-t--global--box-shadow--X--700);
+ --pf-t--global--box-shadow--X--md--top: var(--pf-t--global--box-shadow--X--400);
+ --pf-t--global--box-shadow--X--sm--bottom: var(--pf-t--global--box-shadow--X--400);
+ --pf-t--global--box-shadow--X--sm--default: var(--pf-t--global--box-shadow--X--400);
+ --pf-t--global--box-shadow--X--sm--left: var(--pf-t--global--box-shadow--X--200);
+ --pf-t--global--box-shadow--X--sm--right: var(--pf-t--global--box-shadow--X--600);
+ --pf-t--global--box-shadow--X--sm--top: var(--pf-t--global--box-shadow--X--400);
+ --pf-t--global--box-shadow--Y--lg--bottom: var(--pf-t--global--box-shadow--Y--800);
+ --pf-t--global--box-shadow--Y--lg--default: var(--pf-t--global--box-shadow--Y--700);
+ --pf-t--global--box-shadow--Y--lg--left: var(--pf-t--global--box-shadow--Y--400);
+ --pf-t--global--box-shadow--Y--lg--right: var(--pf-t--global--box-shadow--Y--400);
+ --pf-t--global--box-shadow--Y--lg--top: var(--pf-t--global--box-shadow--Y--50);
+ --pf-t--global--box-shadow--Y--md--bottom: var(--pf-t--global--box-shadow--Y--700);
+ --pf-t--global--box-shadow--Y--md--default: var(--pf-t--global--box-shadow--Y--600);
+ --pf-t--global--box-shadow--Y--md--left: var(--pf-t--global--box-shadow--Y--400);
+ --pf-t--global--box-shadow--Y--md--right: var(--pf-t--global--box-shadow--Y--400);
+ --pf-t--global--box-shadow--Y--md--top: var(--pf-t--global--box-shadow--Y--100);
+ --pf-t--global--box-shadow--Y--sm--bottom: var(--pf-t--global--box-shadow--Y--600);
+ --pf-t--global--box-shadow--Y--sm--default: var(--pf-t--global--box-shadow--Y--500);
+ --pf-t--global--box-shadow--Y--sm--left: var(--pf-t--global--box-shadow--Y--400);
+ --pf-t--global--box-shadow--Y--sm--right: var(--pf-t--global--box-shadow--Y--400);
+ --pf-t--global--box-shadow--Y--sm--top: var(--pf-t--global--box-shadow--Y--200);
+ --pf-t--global--box-shadow--blur--lg: var(--pf-t--global--box-shadow--blur--300);
+ --pf-t--global--box-shadow--blur--md: var(--pf-t--global--box-shadow--blur--200);
+ --pf-t--global--box-shadow--blur--sm: var(--pf-t--global--box-shadow--blur--100);
+ --pf-t--global--box-shadow--color--lg--default: var(--pf-t--global--box-shadow--color--100);
+ --pf-t--global--box-shadow--color--lg--directional: var(--pf-t--global--box-shadow--color--200);
+ --pf-t--global--box-shadow--color--md--default: var(--pf-t--global--box-shadow--color--100);
+ --pf-t--global--box-shadow--color--md--directional: var(--pf-t--global--box-shadow--color--100);
+ --pf-t--global--box-shadow--color--sm--default: var(--pf-t--global--box-shadow--color--100);
+ --pf-t--global--box-shadow--color--sm--directional: var(--pf-t--global--box-shadow--color--200);
+ --pf-t--global--box-shadow--spread--lg--default: var(--pf-t--global--box-shadow--spread--100);
+ --pf-t--global--box-shadow--spread--lg--directional: var(--pf-t--global--box-shadow--spread--400);
+ --pf-t--global--box-shadow--spread--md--default: var(--pf-t--global--box-shadow--spread--100);
+ --pf-t--global--box-shadow--spread--md--directional: var(--pf-t--global--box-shadow--spread--300);
+ --pf-t--global--box-shadow--spread--sm--default: var(--pf-t--global--box-shadow--spread--100);
+ --pf-t--global--box-shadow--spread--sm--directional: var(--pf-t--global--box-shadow--spread--200);
+ --pf-t--global--breakpoint--2xl: var(--pf-t--global--breakpoint--600);
+ --pf-t--global--breakpoint--height--2xl: var(--pf-t--global--breakpoint--550);
+ --pf-t--global--breakpoint--height--lg: var(--pf-t--global--breakpoint--300);
+ --pf-t--global--breakpoint--height--md: var(--pf-t--global--breakpoint--250);
+ --pf-t--global--breakpoint--height--sm: var(--pf-t--global--breakpoint--100);
+ --pf-t--global--breakpoint--height--xl: var(--pf-t--global--breakpoint--350);
+ --pf-t--global--breakpoint--lg: var(--pf-t--global--breakpoint--400);
+ --pf-t--global--breakpoint--md: var(--pf-t--global--breakpoint--300);
+ --pf-t--global--breakpoint--sm: var(--pf-t--global--breakpoint--200);
+ --pf-t--global--breakpoint--xl: var(--pf-t--global--breakpoint--500);
+ --pf-t--global--breakpoint--xs: var(--pf-t--global--breakpoint--100);
+ --pf-t--global--color--brand--100: var(--pf-t--color--blue--40);
+ --pf-t--global--color--brand--200: var(--pf-t--color--blue--50);
+ --pf-t--global--color--brand--300: var(--pf-t--color--blue--60);
+ --pf-t--global--color--brand--400: var(--pf-t--color--blue--70);
+ --pf-t--global--color--brand--500: var(--pf-t--color--blue--80);
+ --pf-t--global--color--disabled--100: var(--pf-t--color--gray--30);
+ --pf-t--global--color--disabled--200: var(--pf-t--color--gray--40);
+ --pf-t--global--color--disabled--300: var(--pf-t--color--gray--60);
+ --pf-t--global--color--favorite--100: var(--pf-t--color--yellow--30);
+ --pf-t--global--color--favorite--200: var(--pf-t--color--yellow--40);
+ --pf-t--global--color--favorite--300: var(--pf-t--color--yellow--70);
+ --pf-t--global--color--favorite--400: var(--pf-t--color--yellow--80);
+ --pf-t--global--color--nonstatus--blue--100: var(--pf-t--color--blue--20);
+ --pf-t--global--color--nonstatus--blue--200: var(--pf-t--color--blue--30);
+ --pf-t--global--color--nonstatus--blue--300: var(--pf-t--color--blue--40);
+ --pf-t--global--color--nonstatus--blue--400: var(--pf-t--color--blue--60);
+ --pf-t--global--color--nonstatus--blue--500: var(--pf-t--color--blue--70);
+ --pf-t--global--color--nonstatus--gray--100: var(--pf-t--color--gray--20);
+ --pf-t--global--color--nonstatus--gray--200: var(--pf-t--color--gray--30);
+ --pf-t--global--color--nonstatus--gray--300: var(--pf-t--color--gray--40);
+ --pf-t--global--color--nonstatus--gray--400: var(--pf-t--color--gray--60);
+ --pf-t--global--color--nonstatus--gray--50: var(--pf-t--color--gray--10);
+ --pf-t--global--color--nonstatus--gray--500: var(--pf-t--color--gray--70);
+ --pf-t--global--color--nonstatus--green--100: var(--pf-t--color--green--20);
+ --pf-t--global--color--nonstatus--green--200: var(--pf-t--color--green--30);
+ --pf-t--global--color--nonstatus--green--300: var(--pf-t--color--green--40);
+ --pf-t--global--color--nonstatus--green--500: var(--pf-t--color--green--70);
+ --pf-t--global--color--nonstatus--orange--100: var(--pf-t--color--orange--20);
+ --pf-t--global--color--nonstatus--orange--200: var(--pf-t--color--orange--30);
+ --pf-t--global--color--nonstatus--orange--300: var(--pf-t--color--orange--40);
+ --pf-t--global--color--nonstatus--orange--400: var(--pf-t--color--orange--60);
+ --pf-t--global--color--nonstatus--orange--500: var(--pf-t--color--orange--70);
+ --pf-t--global--color--nonstatus--orangered--100: var(--pf-t--color--red-orange--20);
+ --pf-t--global--color--nonstatus--orangered--200: var(--pf-t--color--red-orange--30);
+ --pf-t--global--color--nonstatus--orangered--300: var(--pf-t--color--red-orange--40);
+ --pf-t--global--color--nonstatus--orangered--400: var(--pf-t--color--red-orange--60);
+ --pf-t--global--color--nonstatus--orangered--500: var(--pf-t--color--red-orange--70);
+ --pf-t--global--color--nonstatus--purple--100: var(--pf-t--color--purple--20);
+ --pf-t--global--color--nonstatus--purple--200: var(--pf-t--color--purple--30);
+ --pf-t--global--color--nonstatus--purple--300: var(--pf-t--color--purple--40);
+ --pf-t--global--color--nonstatus--purple--400: var(--pf-t--color--purple--50);
+ --pf-t--global--color--nonstatus--purple--500: var(--pf-t--color--purple--60);
+ --pf-t--global--color--nonstatus--red--100: var(--pf-t--color--red--20);
+ --pf-t--global--color--nonstatus--red--200: var(--pf-t--color--red--30);
+ --pf-t--global--color--nonstatus--red--300: var(--pf-t--color--red--40);
+ --pf-t--global--color--nonstatus--red--400: var(--pf-t--color--red--60);
+ --pf-t--global--color--nonstatus--red--500: var(--pf-t--color--red--70);
+ --pf-t--global--color--nonstatus--teal--100: var(--pf-t--color--teal--20);
+ --pf-t--global--color--nonstatus--teal--200: var(--pf-t--color--teal--30);
+ --pf-t--global--color--nonstatus--teal--300: var(--pf-t--color--teal--40);
+ --pf-t--global--color--nonstatus--teal--400: var(--pf-t--color--teal--70);
+ --pf-t--global--color--nonstatus--teal--500: var(--pf-t--color--teal--80);
+ --pf-t--global--color--nonstatus--yellow--100: var(--pf-t--color--yellow--20);
+ --pf-t--global--color--nonstatus--yellow--200: var(--pf-t--color--yellow--30);
+ --pf-t--global--color--nonstatus--yellow--300: var(--pf-t--color--yellow--40);
+ --pf-t--global--color--nonstatus--yellow--400: var(--pf-t--color--yellow--70);
+ --pf-t--global--color--nonstatus--yellow--500: var(--pf-t--color--yellow--80);
+ --pf-t--global--color--severity--critical--100: var(--pf-t--color--red-orange--60);
+ --pf-t--global--color--severity--important--100: var(--pf-t--color--orange--50);
+ --pf-t--global--color--severity--important--200: var(--pf-t--color--orange--60);
+ --pf-t--global--color--severity--minor--100: var(--pf-t--color--gray--50);
+ --pf-t--global--color--severity--minor--200: var(--pf-t--color--gray--80);
+ --pf-t--global--color--severity--moderate--100: var(--pf-t--color--yellow--40);
+ --pf-t--global--color--severity--moderate--200: var(--pf-t--color--yellow--70);
+ --pf-t--global--color--severity--none--100: var(--pf-t--color--blue--40);
+ --pf-t--global--color--severity--none--200: var(--pf-t--color--blue--60);
+ --pf-t--global--color--severity--undefined--100: var(--pf-t--color--gray--30);
+ --pf-t--global--color--severity--undefined--200: var(--pf-t--color--gray--60);
+ --pf-t--global--color--status--custom--100: var(--pf-t--color--teal--60);
+ --pf-t--global--color--status--custom--200: var(--pf-t--color--teal--70);
+ --pf-t--global--color--status--custom--300: var(--pf-t--color--teal--80);
+ --pf-t--global--color--status--danger--100: var(--pf-t--color--red-orange--60);
+ --pf-t--global--color--status--danger--200: var(--pf-t--color--red-orange--70);
+ --pf-t--global--color--status--info--100: var(--pf-t--color--purple--50);
+ --pf-t--global--color--status--info--200: var(--pf-t--color--purple--60);
+ --pf-t--global--color--status--info--300: var(--pf-t--color--purple--70);
+ --pf-t--global--color--status--success--100: var(--pf-t--color--green--60);
+ --pf-t--global--color--status--success--200: var(--pf-t--color--green--70);
+ --pf-t--global--color--status--warning--100: var(--pf-t--color--yellow--30);
+ --pf-t--global--color--status--warning--200: var(--pf-t--color--yellow--40);
+ --pf-t--global--color--status--warning--300: var(--pf-t--color--yellow--50);
+ --pf-t--global--color--status--warning--400: var(--pf-t--color--yellow--60);
+ --pf-t--global--color--status--warning--500: var(--pf-t--color--yellow--70);
+ --pf-t--global--color--status--warning--600: var(--pf-t--color--yellow--80);
+ --pf-t--global--font--family--body: var(--pf-t--global--font--family--100);
+ --pf-t--global--font--family--heading: var(--pf-t--global--font--family--200);
+ --pf-t--global--font--family--mono: var(--pf-t--global--font--family--300);
+ --pf-t--global--font--line-height--body: var(--pf-t--global--font--line-height--200);
+ --pf-t--global--font--line-height--heading: var(--pf-t--global--font--line-height--100);
+ --pf-t--global--font--size--2xl: var(--pf-t--global--font--size--600);
+ --pf-t--global--font--size--3xl: var(--pf-t--global--font--size--700);
+ --pf-t--global--font--size--4xl: var(--pf-t--global--font--size--800);
+ --pf-t--global--font--size--lg: var(--pf-t--global--font--size--400);
+ --pf-t--global--font--size--md: var(--pf-t--global--font--size--300);
+ --pf-t--global--font--size--sm: var(--pf-t--global--font--size--200);
+ --pf-t--global--font--size--xl: var(--pf-t--global--font--size--500);
+ --pf-t--global--font--size--xs: var(--pf-t--global--font--size--100);
+ --pf-t--global--font--weight--body--bold: var(--pf-t--global--font--weight--200);
+ --pf-t--global--font--weight--body--default: var(--pf-t--global--font--weight--100);
+ --pf-t--global--font--weight--heading--bold: var(--pf-t--global--font--weight--400);
+ --pf-t--global--font--weight--heading--default: var(--pf-t--global--font--weight--300);
+ --pf-t--global--icon--color--100: var(--pf-t--color--gray--90);
+ --pf-t--global--icon--color--150: var(--pf-t--color--gray--60);
+ --pf-t--global--icon--color--200: var(--pf-t--color--gray--50);
+ --pf-t--global--icon--color--300: var(--pf-t--color--white);
+ --pf-t--global--icon--size--2xl: var(--pf-t--global--icon--size--400);
+ --pf-t--global--icon--size--3xl: var(--pf-t--global--icon--size--500);
+ --pf-t--global--icon--size--lg: var(--pf-t--global--icon--size--250);
+ --pf-t--global--icon--size--md: var(--pf-t--global--icon--size--200);
+ --pf-t--global--icon--size--sm: var(--pf-t--global--icon--size--100);
+ --pf-t--global--icon--size--xl: var(--pf-t--global--icon--size--300);
+ --pf-t--global--motion--delay--default: var(--pf-t--global--delay--300);
+ --pf-t--global--motion--delay--long: var(--pf-t--global--delay--400);
+ --pf-t--global--motion--delay--none: var(--pf-t--global--delay--100);
+ --pf-t--global--motion--delay--short: var(--pf-t--global--delay--200);
+ --pf-t--global--motion--duration--2xl: var(--pf-t--global--duration--500);
+ --pf-t--global--motion--duration--3xl: var(--pf-t--global--duration--600);
+ --pf-t--global--motion--duration--lg: var(--pf-t--global--duration--300);
+ --pf-t--global--motion--duration--md: var(--pf-t--global--duration--200);
+ --pf-t--global--motion--duration--sm: var(--pf-t--global--duration--100);
+ --pf-t--global--motion--duration--xl: var(--pf-t--global--duration--400);
+ --pf-t--global--motion--duration--xs: var(--pf-t--global--duration--50);
+ --pf-t--global--motion--timing-function--accelerate: var(--pf-t--global--timing-function--100);
+ --pf-t--global--motion--timing-function--decelerate: var(--pf-t--global--timing-function--300);
+ --pf-t--global--motion--timing-function--default: var(--pf-t--global--timing-function--200);
+ --pf-t--global--spacer--2xl: var(--pf-t--global--spacer--600);
+ --pf-t--global--spacer--3xl: var(--pf-t--global--spacer--700);
+ --pf-t--global--spacer--4xl: var(--pf-t--global--spacer--800);
+ --pf-t--global--spacer--lg: var(--pf-t--global--spacer--400);
+ --pf-t--global--spacer--md: var(--pf-t--global--spacer--300);
+ --pf-t--global--spacer--sm: var(--pf-t--global--spacer--200);
+ --pf-t--global--spacer--xl: var(--pf-t--global--spacer--500);
+ --pf-t--global--spacer--xs: var(--pf-t--global--spacer--100);
+ --pf-t--global--text--color--100: var(--pf-t--color--gray--95);
+ --pf-t--global--text--color--200: var(--pf-t--color--gray--60);
+ --pf-t--global--text--color--250: var(--pf-t--color--gray--70);
+ --pf-t--global--text--color--300: var(--pf-t--color--white);
+ --pf-t--global--text--color--400: var(--pf-t--color--red-orange--40);
+ --pf-t--global--text--color--500: var(--pf-t--color--red-orange--70);
+ --pf-t--global--text--color--link--100: var(--pf-t--color--blue--50);
+ --pf-t--global--text--color--link--200: var(--pf-t--color--blue--60);
+ --pf-t--global--text--color--link--250: var(--pf-t--color--blue--70);
+ --pf-t--global--text--color--link--300: var(--pf-t--color--purple--50);
+ --pf-t--global--text--color--link--350: var(--pf-t--color--purple--60);
+ --pf-t--global--text-decoration--editable-text--line--default: var(--pf-t--global--text-decoration--line--200);
+ --pf-t--global--text-decoration--editable-text--line--hover: var(--pf-t--global--text-decoration--line--200);
+ --pf-t--global--text-decoration--editable-text--style--default: var(--pf-t--global--text-decoration--style--200);
+ --pf-t--global--text-decoration--editable-text--style--hover: var(--pf-t--global--text-decoration--style--200);
+ --pf-t--global--text-decoration--help-text--line--default: var(--pf-t--global--text-decoration--line--200);
+ --pf-t--global--text-decoration--help-text--line--hover: var(--pf-t--global--text-decoration--line--200);
+ --pf-t--global--text-decoration--help-text--style--default: var(--pf-t--global--text-decoration--style--200);
+ --pf-t--global--text-decoration--help-text--style--hover: var(--pf-t--global--text-decoration--style--200);
+ --pf-t--global--text-decoration--link--line--default: var(--pf-t--global--text-decoration--line--200);
+ --pf-t--global--text-decoration--link--line--hover: var(--pf-t--global--text-decoration--line--200);
+ --pf-t--global--text-decoration--link--style--default: var(--pf-t--global--text-decoration--style--100);
+ --pf-t--global--text-decoration--link--style--hover: var(--pf-t--global--text-decoration--style--100);
+ --pf-t--global--z-index--2xl: var(--pf-t--global--z-index--600);
+ --pf-t--global--z-index--lg: var(--pf-t--global--z-index--400);
+ --pf-t--global--z-index--md: var(--pf-t--global--z-index--300);
+ --pf-t--global--z-index--sm: var(--pf-t--global--z-index--200);
+ --pf-t--global--z-index--xl: var(--pf-t--global--z-index--500);
+ --pf-t--global--z-index--xs: var(--pf-t--global--z-index--100);
+ --pf-t--global--background--color--action--plain--alt--clicked: var(--pf-t--global--background--color--100);
+ --pf-t--global--background--color--action--plain--alt--hover: var(--pf-t--global--background--color--100);
+ --pf-t--global--background--color--control--read-only: var(--pf-t--global--background--color--200);
+ --pf-t--global--background--color--disabled--default: var(--pf-t--global--color--disabled--100);
+ --pf-t--global--background--color--floating--clicked: var(--pf-t--global--background--color--200);
+ --pf-t--global--background--color--floating--default: var(--pf-t--global--background--color--100);
+ --pf-t--global--background--color--floating--hover: var(--pf-t--global--background--color--200);
+ --pf-t--global--background--color--highlight--clicked: var(--pf-t--global--background--color--highlight--200);
+ --pf-t--global--background--color--highlight--default: var(--pf-t--global--background--color--highlight--100);
+ --pf-t--global--background--color--inverse--clicked: var(--pf-t--global--background--color--450);
+ --pf-t--global--background--color--inverse--default: var(--pf-t--global--background--color--400);
+ --pf-t--global--background--color--inverse--hover: var(--pf-t--global--background--color--450);
+ --pf-t--global--background--color--primary--clicked: var(--pf-t--global--background--color--200);
+ --pf-t--global--background--color--primary--default: var(--pf-t--global--background--color--100);
+ --pf-t--global--background--color--primary--hover: var(--pf-t--global--background--color--200);
+ --pf-t--global--background--color--secondary--clicked: var(--pf-t--global--background--color--300);
+ --pf-t--global--background--color--secondary--default: var(--pf-t--global--background--color--200);
+ --pf-t--global--background--color--secondary--hover: var(--pf-t--global--background--color--300);
+ --pf-t--global--border--color--clicked: var(--pf-t--global--color--brand--200);
+ --pf-t--global--border--color--control--read-only: var(--pf-t--global--border--color--50);
+ --pf-t--global--border--color--default: var(--pf-t--global--border--color--100);
+ --pf-t--global--border--color--disabled: var(--pf-t--global--color--disabled--200);
+ --pf-t--global--border--color--hover: var(--pf-t--global--color--brand--100);
+ --pf-t--global--border--color--nonstatus--blue--clicked: var(--pf-t--global--color--nonstatus--blue--300);
+ --pf-t--global--border--color--nonstatus--blue--default: var(--pf-t--global--color--nonstatus--blue--200);
+ --pf-t--global--border--color--nonstatus--blue--hover: var(--pf-t--global--color--nonstatus--blue--300);
+ --pf-t--global--border--color--nonstatus--gray--clicked: var(--pf-t--global--color--nonstatus--gray--300);
+ --pf-t--global--border--color--nonstatus--gray--default: var(--pf-t--global--color--nonstatus--gray--200);
+ --pf-t--global--border--color--nonstatus--gray--hover: var(--pf-t--global--color--nonstatus--gray--300);
+ --pf-t--global--border--color--nonstatus--green--clicked: var(--pf-t--global--color--nonstatus--green--300);
+ --pf-t--global--border--color--nonstatus--green--default: var(--pf-t--global--color--nonstatus--green--200);
+ --pf-t--global--border--color--nonstatus--green--hover: var(--pf-t--global--color--nonstatus--green--300);
+ --pf-t--global--border--color--nonstatus--orange--clicked: var(--pf-t--global--color--nonstatus--orange--300);
+ --pf-t--global--border--color--nonstatus--orange--default: var(--pf-t--global--color--nonstatus--orange--200);
+ --pf-t--global--border--color--nonstatus--orange--hover: var(--pf-t--global--color--nonstatus--orange--300);
+ --pf-t--global--border--color--nonstatus--orangered--clicked: var(--pf-t--global--color--nonstatus--orangered--300);
+ --pf-t--global--border--color--nonstatus--orangered--default: var(--pf-t--global--color--nonstatus--orangered--200);
+ --pf-t--global--border--color--nonstatus--orangered--hover: var(--pf-t--global--color--nonstatus--orangered--300);
+ --pf-t--global--border--color--nonstatus--purple--clicked: var(--pf-t--global--color--nonstatus--purple--300);
+ --pf-t--global--border--color--nonstatus--purple--default: var(--pf-t--global--color--nonstatus--purple--200);
+ --pf-t--global--border--color--nonstatus--purple--hover: var(--pf-t--global--color--nonstatus--purple--300);
+ --pf-t--global--border--color--nonstatus--red--clicked: var(--pf-t--global--color--nonstatus--red--300);
+ --pf-t--global--border--color--nonstatus--red--default: var(--pf-t--global--color--nonstatus--red--200);
+ --pf-t--global--border--color--nonstatus--red--hover: var(--pf-t--global--color--nonstatus--red--300);
+ --pf-t--global--border--color--nonstatus--teal--clicked: var(--pf-t--global--color--nonstatus--teal--300);
+ --pf-t--global--border--color--nonstatus--teal--default: var(--pf-t--global--color--nonstatus--teal--200);
+ --pf-t--global--border--color--nonstatus--teal--hover: var(--pf-t--global--color--nonstatus--teal--300);
+ --pf-t--global--border--color--nonstatus--yellow--clicked: var(--pf-t--global--color--nonstatus--yellow--300);
+ --pf-t--global--border--color--nonstatus--yellow--default: var(--pf-t--global--color--nonstatus--yellow--200);
+ --pf-t--global--border--color--nonstatus--yellow--hover: var(--pf-t--global--color--nonstatus--yellow--300);
+ --pf-t--global--border--color--on-secondary: var(--pf-t--global--border--color--300);
+ --pf-t--global--border--color--status--warning--clicked: var(--pf-t--global--color--status--warning--300);
+ --pf-t--global--border--color--status--warning--default: var(--pf-t--global--color--status--warning--200);
+ --pf-t--global--border--color--status--warning--hover: var(--pf-t--global--color--status--warning--300);
+ --pf-t--global--color--brand--clicked: var(--pf-t--global--color--brand--300);
+ --pf-t--global--color--brand--default: var(--pf-t--global--color--brand--200);
+ --pf-t--global--color--brand--hover: var(--pf-t--global--color--brand--300);
+ --pf-t--global--color--favorite--clicked: var(--pf-t--global--color--favorite--200);
+ --pf-t--global--color--favorite--default: var(--pf-t--global--color--favorite--100);
+ --pf-t--global--color--favorite--hover: var(--pf-t--global--color--favorite--200);
+ --pf-t--global--color--nonstatus--blue--clicked: var(--pf-t--global--color--nonstatus--blue--200);
+ --pf-t--global--color--nonstatus--blue--default: var(--pf-t--global--color--nonstatus--blue--100);
+ --pf-t--global--color--nonstatus--blue--hover: var(--pf-t--global--color--nonstatus--blue--200);
+ --pf-t--global--color--nonstatus--gray--clicked: var(--pf-t--global--color--nonstatus--gray--200);
+ --pf-t--global--color--nonstatus--gray--default: var(--pf-t--global--color--nonstatus--gray--100);
+ --pf-t--global--color--nonstatus--gray--hover: var(--pf-t--global--color--nonstatus--gray--200);
+ --pf-t--global--color--nonstatus--green--clicked: var(--pf-t--global--color--nonstatus--green--200);
+ --pf-t--global--color--nonstatus--green--default: var(--pf-t--global--color--nonstatus--green--100);
+ --pf-t--global--color--nonstatus--green--hover: var(--pf-t--global--color--nonstatus--green--200);
+ --pf-t--global--color--nonstatus--orange--clicked: var(--pf-t--global--color--nonstatus--orange--200);
+ --pf-t--global--color--nonstatus--orange--default: var(--pf-t--global--color--nonstatus--orange--100);
+ --pf-t--global--color--nonstatus--orange--hover: var(--pf-t--global--color--nonstatus--orange--200);
+ --pf-t--global--color--nonstatus--orangered--clicked: var(--pf-t--global--color--nonstatus--orangered--200);
+ --pf-t--global--color--nonstatus--orangered--default: var(--pf-t--global--color--nonstatus--orangered--100);
+ --pf-t--global--color--nonstatus--orangered--hover: var(--pf-t--global--color--nonstatus--orangered--200);
+ --pf-t--global--color--nonstatus--purple--clicked: var(--pf-t--global--color--nonstatus--purple--200);
+ --pf-t--global--color--nonstatus--purple--default: var(--pf-t--global--color--nonstatus--purple--100);
+ --pf-t--global--color--nonstatus--purple--hover: var(--pf-t--global--color--nonstatus--purple--200);
+ --pf-t--global--color--nonstatus--red--clicked: var(--pf-t--global--color--nonstatus--red--200);
+ --pf-t--global--color--nonstatus--red--default: var(--pf-t--global--color--nonstatus--red--100);
+ --pf-t--global--color--nonstatus--red--hover: var(--pf-t--global--color--nonstatus--red--200);
+ --pf-t--global--color--nonstatus--teal--clicked: var(--pf-t--global--color--nonstatus--teal--200);
+ --pf-t--global--color--nonstatus--teal--default: var(--pf-t--global--color--nonstatus--teal--100);
+ --pf-t--global--color--nonstatus--teal--hover: var(--pf-t--global--color--nonstatus--teal--200);
+ --pf-t--global--color--nonstatus--yellow--clicked: var(--pf-t--global--color--nonstatus--yellow--200);
+ --pf-t--global--color--nonstatus--yellow--default: var(--pf-t--global--color--nonstatus--yellow--100);
+ --pf-t--global--color--nonstatus--yellow--hover: var(--pf-t--global--color--nonstatus--yellow--200);
+ --pf-t--global--color--status--custom--clicked: var(--pf-t--global--color--status--custom--200);
+ --pf-t--global--color--status--custom--default: var(--pf-t--global--color--status--custom--100);
+ --pf-t--global--color--status--custom--hover: var(--pf-t--global--color--status--custom--200);
+ --pf-t--global--color--status--danger--clicked: var(--pf-t--global--color--status--danger--200);
+ --pf-t--global--color--status--danger--default: var(--pf-t--global--color--status--danger--100);
+ --pf-t--global--color--status--danger--hover: var(--pf-t--global--color--status--danger--200);
+ --pf-t--global--color--status--info--clicked: var(--pf-t--global--color--status--info--200);
+ --pf-t--global--color--status--info--default: var(--pf-t--global--color--status--info--100);
+ --pf-t--global--color--status--info--hover: var(--pf-t--global--color--status--info--200);
+ --pf-t--global--color--status--success--clicked: var(--pf-t--global--color--status--success--200);
+ --pf-t--global--color--status--success--default: var(--pf-t--global--color--status--success--100);
+ --pf-t--global--color--status--success--hover: var(--pf-t--global--color--status--success--200);
+ --pf-t--global--color--status--warning--clicked: var(--pf-t--global--color--status--warning--200);
+ --pf-t--global--color--status--warning--default: var(--pf-t--global--color--status--warning--100);
+ --pf-t--global--color--status--warning--hover: var(--pf-t--global--color--status--warning--200);
+ --pf-t--global--font--size--body--default: var(--pf-t--global--font--size--sm);
+ --pf-t--global--font--size--body--lg: var(--pf-t--global--font--size--md);
+ --pf-t--global--font--size--body--sm: var(--pf-t--global--font--size--xs);
+ --pf-t--global--font--size--heading--h1: var(--pf-t--global--font--size--2xl);
+ --pf-t--global--font--size--heading--h2: var(--pf-t--global--font--size--xl);
+ --pf-t--global--font--size--heading--h3: var(--pf-t--global--font--size--lg);
+ --pf-t--global--font--size--heading--h4: var(--pf-t--global--font--size--md);
+ --pf-t--global--font--size--heading--h5: var(--pf-t--global--font--size--md);
+ --pf-t--global--font--size--heading--h6: var(--pf-t--global--font--size--md);
+ --pf-t--global--icon--color--disabled: var(--pf-t--global--color--disabled--200);
+ --pf-t--global--icon--color--inverse: var(--pf-t--global--icon--color--300);
+ --pf-t--global--icon--color--on-disabled: var(--pf-t--global--color--disabled--300);
+ --pf-t--global--icon--color--regular: var(--pf-t--global--icon--color--100);
+ --pf-t--global--icon--color--severity--critical--default: var(--pf-t--global--color--severity--critical--100);
+ --pf-t--global--icon--color--severity--important--default: var(--pf-t--global--color--severity--important--100);
+ --pf-t--global--icon--color--severity--minor--default: var(--pf-t--global--color--severity--minor--100);
+ --pf-t--global--icon--color--severity--moderate--default: var(--pf-t--global--color--severity--moderate--100);
+ --pf-t--global--icon--color--severity--none--default: var(--pf-t--global--color--severity--none--100);
+ --pf-t--global--icon--color--severity--undefined--default: var(--pf-t--global--color--severity--undefined--100);
+ --pf-t--global--icon--color--status--warning--clicked: var(--pf-t--global--color--status--warning--300);
+ --pf-t--global--icon--color--status--warning--default: var(--pf-t--global--color--status--warning--200);
+ --pf-t--global--icon--color--status--warning--hover: var(--pf-t--global--color--status--warning--300);
+ --pf-t--global--icon--color--subtle: var(--pf-t--global--icon--color--200);
+ --pf-t--global--icon--size--font--2xl: var(--pf-t--global--font--size--2xl);
+ --pf-t--global--icon--size--font--3xl: var(--pf-t--global--font--size--3xl);
+ --pf-t--global--icon--size--font--4xl: var(--pf-t--global--font--size--4xl);
+ --pf-t--global--icon--size--font--lg: var(--pf-t--global--font--size--lg);
+ --pf-t--global--icon--size--font--md: var(--pf-t--global--font--size--md);
+ --pf-t--global--icon--size--font--sm: var(--pf-t--global--font--size--sm);
+ --pf-t--global--icon--size--font--xl: var(--pf-t--global--font--size--xl);
+ --pf-t--global--icon--size--font--xs: var(--pf-t--global--font--size--xs);
+ --pf-t--global--motion--duration--fade--default: var(--pf-t--global--motion--duration--md);
+ --pf-t--global--motion--duration--fade--long: var(--pf-t--global--motion--duration--lg);
+ --pf-t--global--motion--duration--fade--short: var(--pf-t--global--motion--duration--sm);
+ --pf-t--global--motion--duration--icon--default: var(--pf-t--global--motion--duration--sm);
+ --pf-t--global--motion--duration--icon--long: var(--pf-t--global--motion--duration--md);
+ --pf-t--global--motion--duration--icon--short: var(--pf-t--global--motion--duration--xs);
+ --pf-t--global--motion--duration--slide-in--default: var(--pf-t--global--motion--duration--xl);
+ --pf-t--global--motion--duration--slide-in--long: var(--pf-t--global--motion--duration--2xl);
+ --pf-t--global--motion--duration--slide-in--short: var(--pf-t--global--motion--duration--lg);
+ --pf-t--global--motion--duration--slide-out--default: var(--pf-t--global--motion--duration--xl);
+ --pf-t--global--motion--duration--slide-out--long: var(--pf-t--global--motion--duration--2xl);
+ --pf-t--global--motion--duration--slide-out--short: var(--pf-t--global--motion--duration--lg);
+ --pf-t--global--spacer--action--horizontal--compact: var(--pf-t--global--spacer--md);
+ --pf-t--global--spacer--action--horizontal--default: var(--pf-t--global--spacer--lg);
+ --pf-t--global--spacer--action--horizontal--plain--compact: var(--pf-t--global--spacer--xs);
+ --pf-t--global--spacer--action--horizontal--plain--default: var(--pf-t--global--spacer--sm);
+ --pf-t--global--spacer--action--horizontal--spacious: var(--pf-t--global--spacer--xl);
+ --pf-t--global--spacer--control--horizontal--compact: var(--pf-t--global--spacer--sm);
+ --pf-t--global--spacer--control--horizontal--default: var(--pf-t--global--spacer--md);
+ --pf-t--global--spacer--control--horizontal--plain: var(--pf-t--global--spacer--sm);
+ --pf-t--global--spacer--control--horizontal--spacious: var(--pf-t--global--spacer--lg);
+ --pf-t--global--spacer--control--vertical--compact: var(--pf-t--global--spacer--xs);
+ --pf-t--global--spacer--control--vertical--default: var(--pf-t--global--spacer--sm);
+ --pf-t--global--spacer--control--vertical--plain: var(--pf-t--global--spacer--sm);
+ --pf-t--global--spacer--control--vertical--spacious: var(--pf-t--global--spacer--md);
+ --pf-t--global--spacer--gap--action-to-action--default: var(--pf-t--global--spacer--md);
+ --pf-t--global--spacer--gap--action-to-action--plain: var(--pf-t--global--spacer--xs);
+ --pf-t--global--spacer--gap--control-to-control--default: var(--pf-t--global--spacer--xs);
+ --pf-t--global--spacer--gap--group--horizontal: var(--pf-t--global--spacer--md);
+ --pf-t--global--spacer--gap--group--vertical: var(--pf-t--global--spacer--sm);
+ --pf-t--global--spacer--gap--group-to-group--horizontal--compact: var(--pf-t--global--spacer--sm);
+ --pf-t--global--spacer--gap--group-to-group--horizontal--default: var(--pf-t--global--spacer--2xl);
+ --pf-t--global--spacer--gap--group-to-group--vertical--compact: var(--pf-t--global--spacer--md);
+ --pf-t--global--spacer--gap--group-to-group--vertical--default: var(--pf-t--global--spacer--lg);
+ --pf-t--global--spacer--gap--text-to-element--compact: var(--pf-t--global--spacer--xs);
+ --pf-t--global--spacer--gap--text-to-element--default: var(--pf-t--global--spacer--sm);
+ --pf-t--global--spacer--gutter--default: var(--pf-t--global--spacer--md);
+ --pf-t--global--spacer--inset--page-chrome: var(--pf-t--global--spacer--lg);
+ --pf-t--global--text--color--disabled: var(--pf-t--global--color--disabled--200);
+ --pf-t--global--text--color--inverse: var(--pf-t--global--text--color--300);
+ --pf-t--global--text--color--link--default: var(--pf-t--global--text--color--link--100);
+ --pf-t--global--text--color--link--hover: var(--pf-t--global--text--color--link--200);
+ --pf-t--global--text--color--link--visited: var(--pf-t--global--text--color--link--300);
+ --pf-t--global--text--color--on-disabled: var(--pf-t--global--color--disabled--300);
+ --pf-t--global--text--color--on-highlight: var(--pf-t--global--text--color--100);
+ --pf-t--global--text--color--regular: var(--pf-t--global--text--color--100);
+ --pf-t--global--text--color--required: var(--pf-t--global--text--color--400);
+ --pf-t--global--text--color--status--warning--clicked: var(--pf-t--global--color--status--warning--300);
+ --pf-t--global--text--color--status--warning--default: var(--pf-t--global--color--status--warning--200);
+ --pf-t--global--text--color--status--warning--hover: var(--pf-t--global--color--status--warning--300);
+ --pf-t--global--text--color--subtle: var(--pf-t--global--text--color--200);
+ --pf-t--global--text-decoration--offset--default: var(--pf-t--global--spacer--xs);
+ --pf-t--global--text-decoration--width--default: var(--pf-t--global--border--width--regular);
+ --pf-t--global--background--color--control--default: var(--pf-t--global--background--color--primary--default);
+ --pf-t--global--border--color--alt: var(--pf-t--global--background--color--primary--default);
+ --pf-t--global--border--color--brand--clicked: var(--pf-t--global--color--brand--clicked);
+ --pf-t--global--border--color--brand--default: var(--pf-t--global--color--brand--default);
+ --pf-t--global--border--color--brand--hover: var(--pf-t--global--color--brand--hover);
+ --pf-t--global--border--color--status--custom--clicked: var(--pf-t--global--color--status--custom--clicked);
+ --pf-t--global--border--color--status--custom--default: var(--pf-t--global--color--status--custom--default);
+ --pf-t--global--border--color--status--custom--hover: var(--pf-t--global--color--status--custom--hover);
+ --pf-t--global--border--color--status--danger--clicked: var(--pf-t--global--color--status--danger--clicked);
+ --pf-t--global--border--color--status--danger--default: var(--pf-t--global--color--status--danger--default);
+ --pf-t--global--border--color--status--danger--hover: var(--pf-t--global--color--status--danger--hover);
+ --pf-t--global--border--color--status--info--clicked: var(--pf-t--global--color--status--info--clicked);
+ --pf-t--global--border--color--status--info--default: var(--pf-t--global--color--status--info--default);
+ --pf-t--global--border--color--status--info--hover: var(--pf-t--global--color--status--info--hover);
+ --pf-t--global--border--color--status--success--clicked: var(--pf-t--global--color--status--success--clicked);
+ --pf-t--global--border--color--status--success--default: var(--pf-t--global--color--status--success--default);
+ --pf-t--global--border--color--status--success--hover: var(--pf-t--global--color--status--success--hover);
+ --pf-t--global--color--status--read--on-primary: var(--pf-t--global--background--color--secondary--default);
+ --pf-t--global--color--status--unread--attention--clicked: var(--pf-t--global--color--status--danger--clicked);
+ --pf-t--global--color--status--unread--attention--default: var(--pf-t--global--color--status--danger--default);
+ --pf-t--global--color--status--unread--attention--hover: var(--pf-t--global--color--status--danger--hover);
+ --pf-t--global--color--status--unread--clicked: var(--pf-t--global--color--brand--clicked);
+ --pf-t--global--color--status--unread--default: var(--pf-t--global--color--brand--default);
+ --pf-t--global--color--status--unread--hover: var(--pf-t--global--color--brand--hover);
+ --pf-t--global--icon--color--brand--clicked: var(--pf-t--global--color--brand--clicked);
+ --pf-t--global--icon--color--brand--default: var(--pf-t--global--color--brand--default);
+ --pf-t--global--icon--color--brand--hover: var(--pf-t--global--color--brand--hover);
+ --pf-t--global--icon--color--favorite--clicked: var(--pf-t--global--color--favorite--clicked);
+ --pf-t--global--icon--color--favorite--default: var(--pf-t--global--color--favorite--default);
+ --pf-t--global--icon--color--favorite--hover: var(--pf-t--global--color--favorite--hover);
+ --pf-t--global--icon--color--nonstatus--on-blue--clicked: var(--pf-t--global--icon--color--regular);
+ --pf-t--global--icon--color--nonstatus--on-blue--default: var(--pf-t--global--icon--color--regular);
+ --pf-t--global--icon--color--nonstatus--on-blue--hover: var(--pf-t--global--icon--color--regular);
+ --pf-t--global--icon--color--nonstatus--on-gray--clicked: var(--pf-t--global--icon--color--regular);
+ --pf-t--global--icon--color--nonstatus--on-gray--default: var(--pf-t--global--icon--color--regular);
+ --pf-t--global--icon--color--nonstatus--on-gray--hover: var(--pf-t--global--icon--color--regular);
+ --pf-t--global--icon--color--nonstatus--on-green--clicked: var(--pf-t--global--icon--color--regular);
+ --pf-t--global--icon--color--nonstatus--on-green--default: var(--pf-t--global--icon--color--regular);
+ --pf-t--global--icon--color--nonstatus--on-green--hover: var(--pf-t--global--icon--color--regular);
+ --pf-t--global--icon--color--nonstatus--on-orange--clicked: var(--pf-t--global--icon--color--regular);
+ --pf-t--global--icon--color--nonstatus--on-orange--default: var(--pf-t--global--icon--color--regular);
+ --pf-t--global--icon--color--nonstatus--on-orange--hover: var(--pf-t--global--icon--color--regular);
+ --pf-t--global--icon--color--nonstatus--on-orangered--clicked: var(--pf-t--global--icon--color--regular);
+ --pf-t--global--icon--color--nonstatus--on-orangered--default: var(--pf-t--global--icon--color--regular);
+ --pf-t--global--icon--color--nonstatus--on-orangered--hover: var(--pf-t--global--icon--color--regular);
+ --pf-t--global--icon--color--nonstatus--on-purple--clicked: var(--pf-t--global--icon--color--regular);
+ --pf-t--global--icon--color--nonstatus--on-purple--default: var(--pf-t--global--icon--color--regular);
+ --pf-t--global--icon--color--nonstatus--on-purple--hover: var(--pf-t--global--icon--color--regular);
+ --pf-t--global--icon--color--nonstatus--on-red--clicked: var(--pf-t--global--icon--color--regular);
+ --pf-t--global--icon--color--nonstatus--on-red--default: var(--pf-t--global--icon--color--regular);
+ --pf-t--global--icon--color--nonstatus--on-red--hover: var(--pf-t--global--icon--color--regular);
+ --pf-t--global--icon--color--nonstatus--on-teal--clicked: var(--pf-t--global--icon--color--regular);
+ --pf-t--global--icon--color--nonstatus--on-teal--default: var(--pf-t--global--icon--color--regular);
+ --pf-t--global--icon--color--nonstatus--on-teal--hover: var(--pf-t--global--icon--color--regular);
+ --pf-t--global--icon--color--nonstatus--on-yellow--clicked: var(--pf-t--global--icon--color--regular);
+ --pf-t--global--icon--color--nonstatus--on-yellow--default: var(--pf-t--global--icon--color--regular);
+ --pf-t--global--icon--color--nonstatus--on-yellow--hover: var(--pf-t--global--icon--color--regular);
+ --pf-t--global--icon--color--on-brand--clicked: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--on-brand--default: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--on-brand--hover: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--custom--clicked: var(--pf-t--global--color--status--custom--clicked);
+ --pf-t--global--icon--color--status--custom--default: var(--pf-t--global--color--status--custom--default);
+ --pf-t--global--icon--color--status--custom--hover: var(--pf-t--global--color--status--custom--hover);
+ --pf-t--global--icon--color--status--danger--clicked: var(--pf-t--global--color--status--danger--clicked);
+ --pf-t--global--icon--color--status--danger--default: var(--pf-t--global--color--status--danger--default);
+ --pf-t--global--icon--color--status--danger--hover: var(--pf-t--global--color--status--danger--hover);
+ --pf-t--global--icon--color--status--info--clicked: var(--pf-t--global--color--status--info--clicked);
+ --pf-t--global--icon--color--status--info--default: var(--pf-t--global--color--status--info--default);
+ --pf-t--global--icon--color--status--info--hover: var(--pf-t--global--color--status--info--hover);
+ --pf-t--global--icon--color--status--on-custom--clicked: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--on-custom--default: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--on-custom--hover: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--on-danger--clicked: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--on-danger--default: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--on-danger--hover: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--on-info--clicked: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--on-info--default: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--on-info--hover: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--on-success--clicked: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--on-success--default: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--on-success--hover: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--on-warning--clicked: var(--pf-t--global--icon--color--regular);
+ --pf-t--global--icon--color--status--on-warning--default: var(--pf-t--global--icon--color--regular);
+ --pf-t--global--icon--color--status--on-warning--hover: var(--pf-t--global--icon--color--regular);
+ --pf-t--global--icon--color--status--success--clicked: var(--pf-t--global--color--status--success--clicked);
+ --pf-t--global--icon--color--status--success--default: var(--pf-t--global--color--status--success--default);
+ --pf-t--global--icon--color--status--success--hover: var(--pf-t--global--color--status--success--hover);
+ --pf-t--global--icon--color--status--unread--on-attention--clicked: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--unread--on-attention--default: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--unread--on-attention--hover: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--unread--on-default--clicked: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--unread--on-default--default: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--unread--on-default--hover: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--size--font--body--default: var(--pf-t--global--font--size--body--default);
+ --pf-t--global--icon--size--font--body--lg: var(--pf-t--global--font--size--body--lg);
+ --pf-t--global--icon--size--font--body--sm: var(--pf-t--global--font--size--body--sm);
+ --pf-t--global--icon--size--font--heading--h1: var(--pf-t--global--font--size--heading--h1);
+ --pf-t--global--icon--size--font--heading--h2: var(--pf-t--global--font--size--heading--h2);
+ --pf-t--global--icon--size--font--heading--h3: var(--pf-t--global--font--size--heading--h3);
+ --pf-t--global--icon--size--font--heading--h4: var(--pf-t--global--font--size--heading--h4);
+ --pf-t--global--icon--size--font--heading--h5: var(--pf-t--global--font--size--heading--h5);
+ --pf-t--global--icon--size--font--heading--h6: var(--pf-t--global--font--size--heading--h6);
+ --pf-t--global--text--color--brand--clicked: var(--pf-t--global--color--brand--clicked);
+ --pf-t--global--text--color--brand--default: var(--pf-t--global--color--brand--default);
+ --pf-t--global--text--color--brand--hover: var(--pf-t--global--color--brand--hover);
+ --pf-t--global--text--color--nonstatus--on-blue--clicked: var(--pf-t--global--text--color--regular);
+ --pf-t--global--text--color--nonstatus--on-blue--default: var(--pf-t--global--text--color--regular);
+ --pf-t--global--text--color--nonstatus--on-blue--hover: var(--pf-t--global--text--color--regular);
+ --pf-t--global--text--color--nonstatus--on-gray--clicked: var(--pf-t--global--text--color--regular);
+ --pf-t--global--text--color--nonstatus--on-gray--default: var(--pf-t--global--text--color--regular);
+ --pf-t--global--text--color--nonstatus--on-gray--hover: var(--pf-t--global--text--color--regular);
+ --pf-t--global--text--color--nonstatus--on-green--clicked: var(--pf-t--global--text--color--regular);
+ --pf-t--global--text--color--nonstatus--on-green--default: var(--pf-t--global--text--color--regular);
+ --pf-t--global--text--color--nonstatus--on-green--hover: var(--pf-t--global--text--color--regular);
+ --pf-t--global--text--color--nonstatus--on-orange--clicked: var(--pf-t--global--text--color--regular);
+ --pf-t--global--text--color--nonstatus--on-orange--default: var(--pf-t--global--text--color--regular);
+ --pf-t--global--text--color--nonstatus--on-orange--hover: var(--pf-t--global--text--color--regular);
+ --pf-t--global--text--color--nonstatus--on-orangered--clicked: var(--pf-t--global--text--color--regular);
+ --pf-t--global--text--color--nonstatus--on-orangered--default: var(--pf-t--global--text--color--regular);
+ --pf-t--global--text--color--nonstatus--on-orangered--hover: var(--pf-t--global--text--color--regular);
+ --pf-t--global--text--color--nonstatus--on-purple--clicked: var(--pf-t--global--text--color--regular);
+ --pf-t--global--text--color--nonstatus--on-purple--default: var(--pf-t--global--text--color--regular);
+ --pf-t--global--text--color--nonstatus--on-purple--hover: var(--pf-t--global--text--color--regular);
+ --pf-t--global--text--color--nonstatus--on-red--clicked: var(--pf-t--global--text--color--regular);
+ --pf-t--global--text--color--nonstatus--on-red--default: var(--pf-t--global--text--color--regular);
+ --pf-t--global--text--color--nonstatus--on-red--hover: var(--pf-t--global--text--color--regular);
+ --pf-t--global--text--color--nonstatus--on-teal--clicked: var(--pf-t--global--text--color--regular);
+ --pf-t--global--text--color--nonstatus--on-teal--default: var(--pf-t--global--text--color--regular);
+ --pf-t--global--text--color--nonstatus--on-teal--hover: var(--pf-t--global--text--color--regular);
+ --pf-t--global--text--color--nonstatus--on-yellow--clicked: var(--pf-t--global--text--color--regular);
+ --pf-t--global--text--color--nonstatus--on-yellow--default: var(--pf-t--global--text--color--regular);
+ --pf-t--global--text--color--nonstatus--on-yellow--hover: var(--pf-t--global--text--color--regular);
+ --pf-t--global--text--color--on-brand--clicked: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--on-brand--default: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--on-brand--hover: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--placeholder: var(--pf-t--global--text--color--subtle);
+ --pf-t--global--text--color--status--custom--clicked: var(--pf-t--global--color--status--custom--clicked);
+ --pf-t--global--text--color--status--custom--default: var(--pf-t--global--color--status--custom--default);
+ --pf-t--global--text--color--status--custom--hover: var(--pf-t--global--color--status--custom--hover);
+ --pf-t--global--text--color--status--danger--clicked: var(--pf-t--global--color--status--danger--clicked);
+ --pf-t--global--text--color--status--danger--default: var(--pf-t--global--color--status--danger--default);
+ --pf-t--global--text--color--status--danger--hover: var(--pf-t--global--color--status--danger--hover);
+ --pf-t--global--text--color--status--info--clicked: var(--pf-t--global--color--status--info--clicked);
+ --pf-t--global--text--color--status--info--default: var(--pf-t--global--color--status--info--default);
+ --pf-t--global--text--color--status--info--hover: var(--pf-t--global--color--status--info--hover);
+ --pf-t--global--text--color--status--on-custom--clicked: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--status--on-custom--default: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--status--on-custom--hover: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--status--on-danger--clicked: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--text--color--status--on-danger--default: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--status--on-danger--hover: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--status--on-info--clicked: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--status--on-info--default: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--status--on-info--hover: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--status--on-success--clicked: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--status--on-success--default: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--status--on-success--hover: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--status--on-warning--clicked: var(--pf-t--global--text--color--regular);
+ --pf-t--global--text--color--status--on-warning--default: var(--pf-t--global--text--color--regular);
+ --pf-t--global--text--color--status--on-warning--hover: var(--pf-t--global--text--color--regular);
+ --pf-t--global--text--color--status--success--clicked: var(--pf-t--global--color--status--success--clicked);
+ --pf-t--global--text--color--status--success--default: var(--pf-t--global--color--status--success--default);
+ --pf-t--global--text--color--status--success--hover: var(--pf-t--global--color--status--success--hover);
+ --pf-t--global--text--color--status--unread--on-attention--clicked: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--status--unread--on-attention--default: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--status--unread--on-attention--hover: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--status--unread--on-default--clicked: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--status--unread--on-default--default: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--status--unread--on-default--hover: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--color--status--read--on-secondary: var(--pf-t--global--background--color--control--default);
+ --pf-t--global--font--size--heading--xs: var(--pf-t--global--font--size--md);
+ --pf-t--global--font--size--heading--sm: var(--pf-t--global--font--size--lg);
+ --pf-t--global--font--size--heading--md: var(--pf-t--global--font--size--xl);
+ --pf-t--global--font--size--heading--lg: var(--pf-t--global--font--size--2xl);
+ --pf-t--global--font--size--heading--xl: var(--pf-t--global--font--size--3xl);
+ --pf-t--global--font--size--heading--2xl: var(--pf-t--global--font--size--4xl);
+ --pf-t--global--font--family--body--legacy: redhattext, helvetica, arial, sans-serif;
+ --pf-t--global--font--family--heading--legacy: redhatdisplay, helvetica, arial, sans-serif;
+ --pf-t--global--font--family--mono--legacy: redhatmono, liberationmono, consolas, sfmono-regular, menlo, monaco, courier new, monospace;
+ --pf-t--global--font--weight--body--legacy: 400;
+ --pf-t--global--font--weight--body--bold--legacy: 700;
+ --pf-t--global--font--weight--heading--legacy: 400;
+ --pf-t--global--font--weight--heading--bold--legacy: 700;
+ --pf-t--global--box-shadow--sm:
+ var(--pf-t--global--box-shadow--X--sm--default)
+ var(--pf-t--global--box-shadow--Y--sm--default)
+ var(--pf-t--global--box-shadow--blur--sm)
+ var(--pf-t--global--box-shadow--spread--sm--default)
+ var(--pf-t--global--box-shadow--color--sm--default);
+ --pf-t--global--box-shadow--sm--top:
+ var(--pf-t--global--box-shadow--X--sm--top)
+ var(--pf-t--global--box-shadow--Y--sm--top)
+ var(--pf-t--global--box-shadow--blur--sm)
+ var(--pf-t--global--box-shadow--spread--sm--directional)
+ var(--pf-t--global--box-shadow--color--sm--directional);
+ --pf-t--global--box-shadow--sm--bottom:
+ var(--pf-t--global--box-shadow--X--sm--bottom)
+ var(--pf-t--global--box-shadow--Y--sm--bottom)
+ var(--pf-t--global--box-shadow--blur--sm)
+ var(--pf-t--global--box-shadow--spread--sm--directional)
+ var(--pf-t--global--box-shadow--color--sm--directional);
+ --pf-t--global--box-shadow--sm--left:
+ var(--pf-t--global--box-shadow--X--sm--left)
+ var(--pf-t--global--box-shadow--Y--sm--left)
+ var(--pf-t--global--box-shadow--blur--sm)
+ var(--pf-t--global--box-shadow--spread--sm--directional)
+ var(--pf-t--global--box-shadow--color--sm--directional);
+ --pf-t--global--box-shadow--sm--right:
+ var(--pf-t--global--box-shadow--X--sm--right)
+ var(--pf-t--global--box-shadow--Y--sm--right)
+ var(--pf-t--global--box-shadow--blur--sm)
+ var(--pf-t--global--box-shadow--spread--sm--directional)
+ var(--pf-t--global--box-shadow--color--sm--directional);
+ --pf-t--global--box-shadow--md:
+ var(--pf-t--global--box-shadow--X--md--default)
+ var(--pf-t--global--box-shadow--Y--md--default)
+ var(--pf-t--global--box-shadow--blur--md)
+ var(--pf-t--global--box-shadow--spread--md--default)
+ var(--pf-t--global--box-shadow--color--md--default);
+ --pf-t--global--box-shadow--md--top:
+ var(--pf-t--global--box-shadow--X--md--top)
+ var(--pf-t--global--box-shadow--Y--md--top)
+ var(--pf-t--global--box-shadow--blur--md)
+ var(--pf-t--global--box-shadow--spread--md--directional)
+ var(--pf-t--global--box-shadow--color--md--directional);
+ --pf-t--global--box-shadow--md--bottom:
+ var(--pf-t--global--box-shadow--X--md--bottom)
+ var(--pf-t--global--box-shadow--Y--md--bottom)
+ var(--pf-t--global--box-shadow--blur--md)
+ var(--pf-t--global--box-shadow--spread--md--directional)
+ var(--pf-t--global--box-shadow--color--md--directional);
+ --pf-t--global--box-shadow--md--left:
+ var(--pf-t--global--box-shadow--X--md--left)
+ var(--pf-t--global--box-shadow--Y--md--left)
+ var(--pf-t--global--box-shadow--blur--md)
+ var(--pf-t--global--box-shadow--spread--md--directional)
+ var(--pf-t--global--box-shadow--color--md--directional);
+ --pf-t--global--box-shadow--md--right:
+ var(--pf-t--global--box-shadow--X--md--right)
+ var(--pf-t--global--box-shadow--Y--md--right)
+ var(--pf-t--global--box-shadow--blur--md)
+ var(--pf-t--global--box-shadow--spread--md--directional)
+ var(--pf-t--global--box-shadow--color--md--directional);
+ --pf-t--global--box-shadow--lg:
+ var(--pf-t--global--box-shadow--X--lg--default)
+ var(--pf-t--global--box-shadow--Y--lg--default)
+ var(--pf-t--global--box-shadow--blur--lg)
+ var(--pf-t--global--box-shadow--spread--lg--default)
+ var(--pf-t--global--box-shadow--color--lg--default);
+ --pf-t--global--box-shadow--lg--top:
+ var(--pf-t--global--box-shadow--X--lg--top)
+ var(--pf-t--global--box-shadow--Y--lg--top)
+ var(--pf-t--global--box-shadow--blur--lg)
+ var(--pf-t--global--box-shadow--spread--lg--directional)
+ var(--pf-t--global--box-shadow--color--lg--directional);
+ --pf-t--global--box-shadow--lg--bottom:
+ var(--pf-t--global--box-shadow--X--lg--bottom)
+ var(--pf-t--global--box-shadow--Y--lg--bottom)
+ var(--pf-t--global--box-shadow--blur--lg)
+ var(--pf-t--global--box-shadow--spread--lg--directional)
+ var(--pf-t--global--box-shadow--color--lg--directional);
+ --pf-t--global--box-shadow--lg--left:
+ var(--pf-t--global--box-shadow--X--lg--left)
+ var(--pf-t--global--box-shadow--Y--lg--left)
+ var(--pf-t--global--box-shadow--blur--lg)
+ var(--pf-t--global--box-shadow--spread--lg--directional)
+ var(--pf-t--global--box-shadow--color--lg--directional);
+ --pf-t--global--box-shadow--lg--right:
+ var(--pf-t--global--box-shadow--X--lg--right)
+ var(--pf-t--global--box-shadow--Y--lg--right)
+ var(--pf-t--global--box-shadow--blur--lg)
+ var(--pf-t--global--box-shadow--spread--lg--directional)
+ var(--pf-t--global--box-shadow--color--lg--directional);
+ --pf-t--global--list-style: disc outside;
+ --pf-t--temp--dev--tbd: #BC11E0;
+}
+
+:root:where(.pf-v6-theme-dark) {
+ --pf-t--global--background--color--action--plain--default: rgba(0, 0, 0, 0.0000);
+ --pf-t--global--border--color--high-contrast: rgba(255, 255, 255, 0.0000);
+ --pf-t--global--dark--background--color--500: rgba(21, 21, 21, 0.8000);
+ --pf-t--global--dark--background--color--600: rgba(199, 199, 199, 0.1500);
+ --pf-t--global--dark--box-shadow--color--100: rgba(0, 0, 0, 0.5000);
+ --pf-t--global--dark--box-shadow--color--200: rgba(0, 0, 0, 0.7000);
+ --pf-t--global--background--color--action--plain--clicked: var(--pf-t--global--dark--background--color--600);
+ --pf-t--global--background--color--action--plain--hover: var(--pf-t--global--dark--background--color--600);
+ --pf-t--global--background--color--backdrop--default: var(--pf-t--global--dark--background--color--500);
+ --pf-t--global--background--color--tertiary--default: var(--pf-t--global--dark--background--color--600);
+ --pf-t--global--box-shadow--color--lg--default: var(--pf-t--global--dark--box-shadow--color--100);
+ --pf-t--global--box-shadow--color--lg--directional: var(--pf-t--global--dark--box-shadow--color--200);
+ --pf-t--global--box-shadow--color--md--default: var(--pf-t--global--dark--box-shadow--color--100);
+ --pf-t--global--box-shadow--color--md--directional: var(--pf-t--global--dark--box-shadow--color--200);
+ --pf-t--global--box-shadow--color--sm--default: var(--pf-t--global--dark--box-shadow--color--100);
+ --pf-t--global--box-shadow--color--sm--directional: var(--pf-t--global--dark--box-shadow--color--200);
+ --pf-t--global--dark--background--color--100: var(--pf-t--color--gray--95);
+ --pf-t--global--dark--background--color--200: var(--pf-t--color--gray--80);
+ --pf-t--global--dark--background--color--300: var(--pf-t--color--gray--70);
+ --pf-t--global--dark--background--color--400: var(--pf-t--color--gray--10);
+ --pf-t--global--dark--background--color--450: var(--pf-t--color--gray--20);
+ --pf-t--global--dark--background--color--highlight--100: var(--pf-t--color--yellow--20);
+ --pf-t--global--dark--background--color--highlight--200: var(--pf-t--color--yellow--30);
+ --pf-t--global--dark--border--color--100: var(--pf-t--color--gray--50);
+ --pf-t--global--dark--border--color--200: var(--pf-t--color--gray--40);
+ --pf-t--global--dark--border--color--50: var(--pf-t--color--gray--60);
+ --pf-t--global--dark--color--brand--100: var(--pf-t--color--blue--30);
+ --pf-t--global--dark--color--brand--200: var(--pf-t--color--blue--20);
+ --pf-t--global--dark--color--brand--300: var(--pf-t--color--blue--10);
+ --pf-t--global--dark--color--disabled--100: var(--pf-t--color--gray--40);
+ --pf-t--global--dark--color--disabled--200: var(--pf-t--color--gray--50);
+ --pf-t--global--dark--color--disabled--300: var(--pf-t--color--gray--70);
+ --pf-t--global--dark--color--disabled--400: var(--pf-t--color--gray--90);
+ --pf-t--global--dark--color--favorite--100: var(--pf-t--color--yellow--30);
+ --pf-t--global--dark--color--favorite--200: var(--pf-t--color--yellow--20);
+ --pf-t--global--dark--color--nonstatus--blue--100: var(--pf-t--color--blue--30);
+ --pf-t--global--dark--color--nonstatus--blue--200: var(--pf-t--color--blue--20);
+ --pf-t--global--dark--color--nonstatus--blue--300: var(--pf-t--color--blue--10);
+ --pf-t--global--dark--color--nonstatus--gray--100: var(--pf-t--color--gray--60);
+ --pf-t--global--dark--color--nonstatus--gray--200: var(--pf-t--color--gray--50);
+ --pf-t--global--dark--color--nonstatus--gray--300: var(--pf-t--color--gray--40);
+ --pf-t--global--dark--color--nonstatus--gray--50: var(--pf-t--color--gray--70);
+ --pf-t--global--dark--color--nonstatus--green--100: var(--pf-t--color--green--30);
+ --pf-t--global--dark--color--nonstatus--green--200: var(--pf-t--color--green--20);
+ --pf-t--global--dark--color--nonstatus--green--300: var(--pf-t--color--green--10);
+ --pf-t--global--dark--color--nonstatus--orange--100: var(--pf-t--color--orange--30);
+ --pf-t--global--dark--color--nonstatus--orange--200: var(--pf-t--color--orange--20);
+ --pf-t--global--dark--color--nonstatus--orange--300: var(--pf-t--color--orange--10);
+ --pf-t--global--dark--color--nonstatus--orangered--100: var(--pf-t--color--red-orange--30);
+ --pf-t--global--dark--color--nonstatus--orangered--200: var(--pf-t--color--red-orange--20);
+ --pf-t--global--dark--color--nonstatus--orangered--300: var(--pf-t--color--red-orange--10);
+ --pf-t--global--dark--color--nonstatus--purple--100: var(--pf-t--color--purple--30);
+ --pf-t--global--dark--color--nonstatus--purple--200: var(--pf-t--color--purple--20);
+ --pf-t--global--dark--color--nonstatus--purple--300: var(--pf-t--color--purple--10);
+ --pf-t--global--dark--color--nonstatus--red--100: var(--pf-t--color--red--30);
+ --pf-t--global--dark--color--nonstatus--red--200: var(--pf-t--color--red--20);
+ --pf-t--global--dark--color--nonstatus--red--300: var(--pf-t--color--red--10);
+ --pf-t--global--dark--color--nonstatus--teal--100: var(--pf-t--color--teal--30);
+ --pf-t--global--dark--color--nonstatus--teal--200: var(--pf-t--color--teal--20);
+ --pf-t--global--dark--color--nonstatus--teal--300: var(--pf-t--color--teal--10);
+ --pf-t--global--dark--color--nonstatus--yellow--100: var(--pf-t--color--yellow--30);
+ --pf-t--global--dark--color--nonstatus--yellow--200: var(--pf-t--color--yellow--20);
+ --pf-t--global--dark--color--nonstatus--yellow--300: var(--pf-t--color--yellow--10);
+ --pf-t--global--dark--color--severity--critical--100: var(--pf-t--color--red-orange--50);
+ --pf-t--global--dark--color--severity--critical--200: var(--pf-t--color--red-orange--40);
+ --pf-t--global--dark--color--severity--important--100: var(--pf-t--color--orange--40);
+ --pf-t--global--dark--color--severity--minor--100: var(--pf-t--color--gray--30);
+ --pf-t--global--dark--color--severity--moderate--100: var(--pf-t--color--yellow--30);
+ --pf-t--global--dark--color--severity--none--100: var(--pf-t--color--blue--30);
+ --pf-t--global--dark--color--severity--undefined--100: var(--pf-t--color--gray--40);
+ --pf-t--global--dark--color--status--custom--100: var(--pf-t--color--teal--40);
+ --pf-t--global--dark--color--status--custom--200: var(--pf-t--color--teal--30);
+ --pf-t--global--dark--color--status--custom--300: var(--pf-t--color--teal--20);
+ --pf-t--global--dark--color--status--danger--100: var(--pf-t--color--red-orange--50);
+ --pf-t--global--dark--color--status--danger--200: var(--pf-t--color--red-orange--40);
+ --pf-t--global--dark--color--status--danger--250: var(--pf-t--color--red-orange--30);
+ --pf-t--global--dark--color--status--danger--300: var(--pf-t--color--red-orange--20);
+ --pf-t--global--dark--color--status--info--100: var(--pf-t--color--purple--30);
+ --pf-t--global--dark--color--status--info--200: var(--pf-t--color--purple--20);
+ --pf-t--global--dark--color--status--info--300: var(--pf-t--color--purple--10);
+ --pf-t--global--dark--color--status--success--100: var(--pf-t--color--green--40);
+ --pf-t--global--dark--color--status--success--200: var(--pf-t--color--green--30);
+ --pf-t--global--dark--color--status--success--300: var(--pf-t--color--green--20);
+ --pf-t--global--dark--color--status--warning--100: var(--pf-t--color--yellow--30);
+ --pf-t--global--dark--color--status--warning--200: var(--pf-t--color--yellow--20);
+ --pf-t--global--dark--icon--color--100: var(--pf-t--color--gray--10);
+ --pf-t--global--dark--icon--color--200: var(--pf-t--color--gray--40);
+ --pf-t--global--dark--icon--color--300: var(--pf-t--color--gray--90);
+ --pf-t--global--dark--text--color--100: var(--pf-t--color--white);
+ --pf-t--global--dark--text--color--200: var(--pf-t--color--gray--30);
+ --pf-t--global--dark--text--color--300: var(--pf-t--color--gray--90);
+ --pf-t--global--dark--text--color--400: var(--pf-t--color--red-orange--30);
+ --pf-t--global--dark--text--color--link--100: var(--pf-t--color--blue--20);
+ --pf-t--global--dark--text--color--link--200: var(--pf-t--color--blue--10);
+ --pf-t--global--dark--text--color--link--300: var(--pf-t--color--purple--30);
+ --pf-t--global--dark--text--color--link--400: var(--pf-t--color--purple--20);
+ --pf-t--global--background--color--action--plain--alt--clicked: var(--pf-t--global--dark--background--color--200);
+ --pf-t--global--background--color--action--plain--alt--hover: var(--pf-t--global--dark--background--color--200);
+ --pf-t--global--background--color--control--default: var(--pf-t--global--dark--background--color--300);
+ --pf-t--global--background--color--control--read-only: var(--pf-t--global--dark--background--color--300);
+ --pf-t--global--background--color--disabled--default: var(--pf-t--global--dark--color--disabled--100);
+ --pf-t--global--background--color--floating--clicked: var(--pf-t--global--dark--background--color--200);
+ --pf-t--global--background--color--floating--default: var(--pf-t--global--dark--background--color--300);
+ --pf-t--global--background--color--floating--hover: var(--pf-t--global--dark--background--color--200);
+ --pf-t--global--background--color--highlight--clicked: var(--pf-t--global--dark--background--color--highlight--200);
+ --pf-t--global--background--color--highlight--default: var(--pf-t--global--dark--background--color--highlight--100);
+ --pf-t--global--background--color--inverse--clicked: var(--pf-t--global--dark--background--color--450);
+ --pf-t--global--background--color--inverse--default: var(--pf-t--global--dark--background--color--400);
+ --pf-t--global--background--color--inverse--hover: var(--pf-t--global--dark--background--color--450);
+ --pf-t--global--background--color--primary--clicked: var(--pf-t--global--dark--background--color--300);
+ --pf-t--global--background--color--primary--default: var(--pf-t--global--dark--background--color--200);
+ --pf-t--global--background--color--primary--hover: var(--pf-t--global--dark--background--color--300);
+ --pf-t--global--background--color--secondary--clicked: var(--pf-t--global--dark--background--color--200);
+ --pf-t--global--background--color--secondary--default: var(--pf-t--global--dark--background--color--100);
+ --pf-t--global--background--color--secondary--hover: var(--pf-t--global--dark--background--color--200);
+ --pf-t--global--border--color--clicked: var(--pf-t--global--dark--color--brand--200);
+ --pf-t--global--border--color--control--read-only: var(--pf-t--global--dark--border--color--50);
+ --pf-t--global--border--color--default: var(--pf-t--global--dark--border--color--200);
+ --pf-t--global--border--color--disabled: var(--pf-t--global--dark--color--disabled--200);
+ --pf-t--global--border--color--hover: var(--pf-t--global--dark--color--brand--100);
+ --pf-t--global--border--color--nonstatus--blue--clicked: var(--pf-t--global--dark--color--nonstatus--blue--200);
+ --pf-t--global--border--color--nonstatus--blue--default: var(--pf-t--global--dark--color--nonstatus--blue--100);
+ --pf-t--global--border--color--nonstatus--blue--hover: var(--pf-t--global--dark--color--nonstatus--blue--200);
+ --pf-t--global--border--color--nonstatus--gray--clicked: var(--pf-t--global--dark--color--nonstatus--gray--300);
+ --pf-t--global--border--color--nonstatus--gray--default: var(--pf-t--global--dark--color--nonstatus--gray--200);
+ --pf-t--global--border--color--nonstatus--gray--hover: var(--pf-t--global--dark--color--nonstatus--gray--300);
+ --pf-t--global--border--color--nonstatus--green--clicked: var(--pf-t--global--dark--color--nonstatus--green--200);
+ --pf-t--global--border--color--nonstatus--green--default: var(--pf-t--global--dark--color--nonstatus--green--100);
+ --pf-t--global--border--color--nonstatus--green--hover: var(--pf-t--global--dark--color--nonstatus--green--200);
+ --pf-t--global--border--color--nonstatus--orange--clicked: var(--pf-t--global--dark--color--nonstatus--orange--200);
+ --pf-t--global--border--color--nonstatus--orange--default: var(--pf-t--global--dark--color--nonstatus--orange--100);
+ --pf-t--global--border--color--nonstatus--orange--hover: var(--pf-t--global--dark--color--nonstatus--orange--200);
+ --pf-t--global--border--color--nonstatus--orangered--clicked: var(--pf-t--global--dark--color--nonstatus--orangered--200);
+ --pf-t--global--border--color--nonstatus--orangered--default: var(--pf-t--global--dark--color--nonstatus--orangered--100);
+ --pf-t--global--border--color--nonstatus--orangered--hover: var(--pf-t--global--dark--color--nonstatus--orangered--200);
+ --pf-t--global--border--color--nonstatus--purple--clicked: var(--pf-t--global--dark--color--nonstatus--purple--200);
+ --pf-t--global--border--color--nonstatus--purple--default: var(--pf-t--global--dark--color--nonstatus--purple--100);
+ --pf-t--global--border--color--nonstatus--purple--hover: var(--pf-t--global--dark--color--nonstatus--purple--200);
+ --pf-t--global--border--color--nonstatus--red--clicked: var(--pf-t--global--dark--color--nonstatus--red--200);
+ --pf-t--global--border--color--nonstatus--red--default: var(--pf-t--global--dark--color--nonstatus--red--100);
+ --pf-t--global--border--color--nonstatus--red--hover: var(--pf-t--global--dark--color--nonstatus--red--200);
+ --pf-t--global--border--color--nonstatus--teal--clicked: var(--pf-t--global--dark--color--nonstatus--teal--200);
+ --pf-t--global--border--color--nonstatus--teal--default: var(--pf-t--global--dark--color--nonstatus--teal--100);
+ --pf-t--global--border--color--nonstatus--teal--hover: var(--pf-t--global--dark--color--nonstatus--teal--200);
+ --pf-t--global--border--color--nonstatus--yellow--clicked: var(--pf-t--global--dark--color--nonstatus--yellow--200);
+ --pf-t--global--border--color--nonstatus--yellow--default: var(--pf-t--global--dark--color--nonstatus--yellow--100);
+ --pf-t--global--border--color--nonstatus--yellow--hover: var(--pf-t--global--dark--color--nonstatus--yellow--200);
+ --pf-t--global--border--color--on-secondary: var(--pf-t--global--dark--border--color--200);
+ --pf-t--global--color--brand--clicked: var(--pf-t--global--dark--color--brand--200);
+ --pf-t--global--color--brand--default: var(--pf-t--global--dark--color--brand--100);
+ --pf-t--global--color--brand--hover: var(--pf-t--global--dark--color--brand--200);
+ --pf-t--global--color--favorite--clicked: var(--pf-t--global--dark--color--favorite--200);
+ --pf-t--global--color--favorite--default: var(--pf-t--global--dark--color--favorite--100);
+ --pf-t--global--color--favorite--hover: var(--pf-t--global--dark--color--favorite--200);
+ --pf-t--global--color--nonstatus--blue--clicked: var(--pf-t--global--dark--color--nonstatus--blue--200);
+ --pf-t--global--color--nonstatus--blue--default: var(--pf-t--global--dark--color--nonstatus--blue--100);
+ --pf-t--global--color--nonstatus--blue--hover: var(--pf-t--global--dark--color--nonstatus--blue--200);
+ --pf-t--global--color--nonstatus--gray--clicked: var(--pf-t--global--dark--color--nonstatus--gray--200);
+ --pf-t--global--color--nonstatus--gray--default: var(--pf-t--global--dark--color--nonstatus--gray--100);
+ --pf-t--global--color--nonstatus--gray--hover: var(--pf-t--global--dark--color--nonstatus--gray--200);
+ --pf-t--global--color--nonstatus--green--clicked: var(--pf-t--global--dark--color--nonstatus--green--200);
+ --pf-t--global--color--nonstatus--green--default: var(--pf-t--global--dark--color--nonstatus--green--100);
+ --pf-t--global--color--nonstatus--green--hover: var(--pf-t--global--dark--color--nonstatus--green--200);
+ --pf-t--global--color--nonstatus--orange--clicked: var(--pf-t--global--dark--color--nonstatus--orange--200);
+ --pf-t--global--color--nonstatus--orange--default: var(--pf-t--global--dark--color--nonstatus--orange--100);
+ --pf-t--global--color--nonstatus--orange--hover: var(--pf-t--global--dark--color--nonstatus--orange--200);
+ --pf-t--global--color--nonstatus--orangered--clicked: var(--pf-t--global--dark--color--nonstatus--orangered--200);
+ --pf-t--global--color--nonstatus--orangered--default: var(--pf-t--global--dark--color--nonstatus--orangered--100);
+ --pf-t--global--color--nonstatus--orangered--hover: var(--pf-t--global--dark--color--nonstatus--orangered--200);
+ --pf-t--global--color--nonstatus--purple--clicked: var(--pf-t--global--dark--color--nonstatus--purple--200);
+ --pf-t--global--color--nonstatus--purple--default: var(--pf-t--global--dark--color--nonstatus--purple--100);
+ --pf-t--global--color--nonstatus--purple--hover: var(--pf-t--global--dark--color--nonstatus--purple--200);
+ --pf-t--global--color--nonstatus--red--clicked: var(--pf-t--global--dark--color--nonstatus--red--200);
+ --pf-t--global--color--nonstatus--red--default: var(--pf-t--global--dark--color--nonstatus--red--100);
+ --pf-t--global--color--nonstatus--red--hover: var(--pf-t--global--dark--color--nonstatus--red--200);
+ --pf-t--global--color--nonstatus--teal--clicked: var(--pf-t--global--dark--color--nonstatus--teal--200);
+ --pf-t--global--color--nonstatus--teal--default: var(--pf-t--global--dark--color--nonstatus--teal--100);
+ --pf-t--global--color--nonstatus--teal--hover: var(--pf-t--global--dark--color--nonstatus--teal--200);
+ --pf-t--global--color--nonstatus--yellow--clicked: var(--pf-t--global--dark--color--nonstatus--yellow--200);
+ --pf-t--global--color--nonstatus--yellow--default: var(--pf-t--global--dark--color--nonstatus--yellow--100);
+ --pf-t--global--color--nonstatus--yellow--hover: var(--pf-t--global--dark--color--nonstatus--yellow--200);
+ --pf-t--global--color--status--custom--clicked: var(--pf-t--global--dark--color--status--custom--200);
+ --pf-t--global--color--status--custom--default: var(--pf-t--global--dark--color--status--custom--100);
+ --pf-t--global--color--status--custom--hover: var(--pf-t--global--dark--color--status--custom--200);
+ --pf-t--global--color--status--danger--clicked: var(--pf-t--global--dark--color--status--danger--200);
+ --pf-t--global--color--status--danger--default: var(--pf-t--global--dark--color--status--danger--100);
+ --pf-t--global--color--status--danger--hover: var(--pf-t--global--dark--color--status--danger--200);
+ --pf-t--global--color--status--info--clicked: var(--pf-t--global--dark--color--status--info--200);
+ --pf-t--global--color--status--info--default: var(--pf-t--global--dark--color--status--info--100);
+ --pf-t--global--color--status--info--hover: var(--pf-t--global--dark--color--status--info--200);
+ --pf-t--global--color--status--success--clicked: var(--pf-t--global--dark--color--status--success--200);
+ --pf-t--global--color--status--success--default: var(--pf-t--global--dark--color--status--success--100);
+ --pf-t--global--color--status--success--hover: var(--pf-t--global--dark--color--status--success--200);
+ --pf-t--global--color--status--warning--clicked: var(--pf-t--global--dark--color--status--warning--200);
+ --pf-t--global--color--status--warning--default: var(--pf-t--global--dark--color--status--warning--100);
+ --pf-t--global--color--status--warning--hover: var(--pf-t--global--dark--color--status--warning--200);
+ --pf-t--global--icon--color--brand--clicked: var(--pf-t--global--dark--color--brand--300);
+ --pf-t--global--icon--color--brand--default: var(--pf-t--global--dark--color--brand--200);
+ --pf-t--global--icon--color--brand--hover: var(--pf-t--global--dark--color--brand--300);
+ --pf-t--global--icon--color--disabled: var(--pf-t--global--dark--color--disabled--200);
+ --pf-t--global--icon--color--inverse: var(--pf-t--global--dark--icon--color--300);
+ --pf-t--global--icon--color--on-disabled: var(--pf-t--global--dark--color--disabled--300);
+ --pf-t--global--icon--color--regular: var(--pf-t--global--dark--icon--color--100);
+ --pf-t--global--icon--color--severity--critical--default: var(--pf-t--global--dark--color--severity--critical--100);
+ --pf-t--global--icon--color--severity--important--default: var(--pf-t--global--dark--color--severity--important--100);
+ --pf-t--global--icon--color--severity--minor--default: var(--pf-t--global--dark--color--severity--minor--100);
+ --pf-t--global--icon--color--severity--moderate--default: var(--pf-t--global--dark--color--severity--moderate--100);
+ --pf-t--global--icon--color--severity--none--default: var(--pf-t--global--dark--color--severity--none--100);
+ --pf-t--global--icon--color--severity--undefined--default: var(--pf-t--global--dark--color--severity--undefined--100);
+ --pf-t--global--icon--color--subtle: var(--pf-t--global--dark--icon--color--200);
+ --pf-t--global--text--color--brand--clicked: var(--pf-t--global--dark--color--brand--300);
+ --pf-t--global--text--color--brand--default: var(--pf-t--global--dark--color--brand--200);
+ --pf-t--global--text--color--brand--hover: var(--pf-t--global--dark--color--brand--300);
+ --pf-t--global--text--color--disabled: var(--pf-t--global--dark--color--disabled--200);
+ --pf-t--global--text--color--inverse: var(--pf-t--global--dark--text--color--300);
+ --pf-t--global--text--color--link--default: var(--pf-t--global--dark--text--color--link--100);
+ --pf-t--global--text--color--link--hover: var(--pf-t--global--dark--text--color--link--200);
+ --pf-t--global--text--color--link--visited: var(--pf-t--global--dark--text--color--link--300);
+ --pf-t--global--text--color--on-disabled: var(--pf-t--global--dark--color--disabled--300);
+ --pf-t--global--text--color--on-highlight: var(--pf-t--global--dark--text--color--300);
+ --pf-t--global--text--color--regular: var(--pf-t--global--dark--text--color--100);
+ --pf-t--global--text--color--required: var(--pf-t--global--dark--text--color--400);
+ --pf-t--global--text--color--status--danger--clicked: var(--pf-t--global--dark--color--status--danger--300);
+ --pf-t--global--text--color--status--danger--default: var(--pf-t--global--dark--color--status--danger--250);
+ --pf-t--global--text--color--status--danger--hover: var(--pf-t--global--dark--color--status--danger--300);
+ --pf-t--global--text--color--subtle: var(--pf-t--global--dark--text--color--200);
+ --pf-t--global--border--color--alt: var(--pf-t--global--background--color--primary--default);
+ --pf-t--global--border--color--brand--clicked: var(--pf-t--global--color--brand--clicked);
+ --pf-t--global--border--color--brand--default: var(--pf-t--global--color--brand--default);
+ --pf-t--global--border--color--brand--hover: var(--pf-t--global--color--brand--hover);
+ --pf-t--global--border--color--status--custom--clicked: var(--pf-t--global--color--status--custom--clicked);
+ --pf-t--global--border--color--status--custom--default: var(--pf-t--global--color--status--custom--default);
+ --pf-t--global--border--color--status--custom--hover: var(--pf-t--global--color--status--custom--hover);
+ --pf-t--global--border--color--status--danger--clicked: var(--pf-t--global--color--status--danger--clicked);
+ --pf-t--global--border--color--status--danger--default: var(--pf-t--global--color--status--danger--default);
+ --pf-t--global--border--color--status--danger--hover: var(--pf-t--global--color--status--danger--hover);
+ --pf-t--global--border--color--status--info--clicked: var(--pf-t--global--color--status--info--clicked);
+ --pf-t--global--border--color--status--info--default: var(--pf-t--global--color--status--info--default);
+ --pf-t--global--border--color--status--info--hover: var(--pf-t--global--color--status--info--hover);
+ --pf-t--global--border--color--status--success--clicked: var(--pf-t--global--color--status--success--clicked);
+ --pf-t--global--border--color--status--success--default: var(--pf-t--global--color--status--success--default);
+ --pf-t--global--border--color--status--success--hover: var(--pf-t--global--color--status--success--hover);
+ --pf-t--global--border--color--status--warning--clicked: var(--pf-t--global--color--status--warning--clicked);
+ --pf-t--global--border--color--status--warning--default: var(--pf-t--global--color--status--warning--default);
+ --pf-t--global--border--color--status--warning--hover: var(--pf-t--global--color--status--warning--hover);
+ --pf-t--global--color--status--read--on-primary: var(--pf-t--global--background--color--secondary--default);
+ --pf-t--global--color--status--read--on-secondary: var(--pf-t--global--background--color--control--default);
+ --pf-t--global--color--status--unread--attention--clicked: var(--pf-t--global--color--status--danger--clicked);
+ --pf-t--global--color--status--unread--attention--default: var(--pf-t--global--color--status--danger--default);
+ --pf-t--global--color--status--unread--attention--hover: var(--pf-t--global--color--status--danger--hover);
+ --pf-t--global--color--status--unread--clicked: var(--pf-t--global--color--brand--clicked);
+ --pf-t--global--color--status--unread--default: var(--pf-t--global--color--brand--default);
+ --pf-t--global--color--status--unread--hover: var(--pf-t--global--color--brand--hover);
+ --pf-t--global--icon--color--favorite--clicked: var(--pf-t--global--color--favorite--clicked);
+ --pf-t--global--icon--color--favorite--default: var(--pf-t--global--color--favorite--default);
+ --pf-t--global--icon--color--favorite--hover: var(--pf-t--global--color--favorite--hover);
+ --pf-t--global--icon--color--nonstatus--on-blue--clicked: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--nonstatus--on-blue--default: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--nonstatus--on-blue--hover: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--nonstatus--on-gray--clicked: var(--pf-t--global--icon--color--regular);
+ --pf-t--global--icon--color--nonstatus--on-gray--default: var(--pf-t--global--icon--color--regular);
+ --pf-t--global--icon--color--nonstatus--on-gray--hover: var(--pf-t--global--icon--color--regular);
+ --pf-t--global--icon--color--nonstatus--on-green--clicked: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--nonstatus--on-green--default: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--nonstatus--on-green--hover: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--nonstatus--on-orange--clicked: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--nonstatus--on-orange--default: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--nonstatus--on-orange--hover: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--nonstatus--on-orangered--clicked: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--nonstatus--on-orangered--default: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--nonstatus--on-orangered--hover: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--nonstatus--on-purple--clicked: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--nonstatus--on-purple--default: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--nonstatus--on-purple--hover: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--nonstatus--on-red--clicked: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--nonstatus--on-red--default: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--nonstatus--on-red--hover: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--nonstatus--on-teal--clicked: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--nonstatus--on-teal--default: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--nonstatus--on-teal--hover: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--nonstatus--on-yellow--clicked: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--nonstatus--on-yellow--default: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--nonstatus--on-yellow--hover: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--on-brand--clicked: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--on-brand--default: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--on-brand--hover: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--custom--clicked: var(--pf-t--global--color--status--custom--clicked);
+ --pf-t--global--icon--color--status--custom--default: var(--pf-t--global--color--status--custom--default);
+ --pf-t--global--icon--color--status--custom--hover: var(--pf-t--global--color--status--custom--hover);
+ --pf-t--global--icon--color--status--danger--clicked: var(--pf-t--global--color--status--danger--clicked);
+ --pf-t--global--icon--color--status--danger--default: var(--pf-t--global--color--status--danger--default);
+ --pf-t--global--icon--color--status--danger--hover: var(--pf-t--global--color--status--danger--hover);
+ --pf-t--global--icon--color--status--info--clicked: var(--pf-t--global--color--status--info--clicked);
+ --pf-t--global--icon--color--status--info--default: var(--pf-t--global--color--status--info--default);
+ --pf-t--global--icon--color--status--info--hover: var(--pf-t--global--color--status--info--hover);
+ --pf-t--global--icon--color--status--on-custom--clicked: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--on-custom--default: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--on-custom--hover: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--on-danger--clicked: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--on-danger--default: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--on-danger--hover: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--on-info--clicked: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--on-info--default: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--on-info--hover: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--on-success--clicked: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--on-success--default: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--on-success--hover: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--on-warning--clicked: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--on-warning--default: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--on-warning--hover: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--success--clicked: var(--pf-t--global--color--status--success--clicked);
+ --pf-t--global--icon--color--status--success--default: var(--pf-t--global--color--status--success--default);
+ --pf-t--global--icon--color--status--success--hover: var(--pf-t--global--color--status--success--hover);
+ --pf-t--global--icon--color--status--unread--on-attention--clicked: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--unread--on-attention--default: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--unread--on-attention--hover: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--unread--on-default--clicked: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--unread--on-default--default: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--unread--on-default--hover: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--warning--clicked: var(--pf-t--global--color--status--warning--clicked);
+ --pf-t--global--icon--color--status--warning--default: var(--pf-t--global--color--status--warning--default);
+ --pf-t--global--icon--color--status--warning--hover: var(--pf-t--global--color--status--warning--hover);
+ --pf-t--global--text--color--nonstatus--on-blue--clicked: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--nonstatus--on-blue--default: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--nonstatus--on-blue--hover: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--nonstatus--on-gray--clicked: var(--pf-t--global--text--color--regular);
+ --pf-t--global--text--color--nonstatus--on-gray--default: var(--pf-t--global--text--color--regular);
+ --pf-t--global--text--color--nonstatus--on-gray--hover: var(--pf-t--global--text--color--regular);
+ --pf-t--global--text--color--nonstatus--on-green--clicked: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--nonstatus--on-green--default: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--nonstatus--on-green--hover: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--nonstatus--on-orange--clicked: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--nonstatus--on-orange--default: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--nonstatus--on-orange--hover: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--nonstatus--on-orangered--clicked: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--nonstatus--on-orangered--default: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--nonstatus--on-orangered--hover: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--nonstatus--on-purple--clicked: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--nonstatus--on-purple--default: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--nonstatus--on-purple--hover: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--nonstatus--on-red--clicked: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--nonstatus--on-red--default: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--nonstatus--on-red--hover: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--nonstatus--on-teal--clicked: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--nonstatus--on-teal--default: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--nonstatus--on-teal--hover: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--nonstatus--on-yellow--clicked: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--nonstatus--on-yellow--default: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--nonstatus--on-yellow--hover: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--on-brand--clicked: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--on-brand--default: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--on-brand--hover: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--placeholder: var(--pf-t--global--text--color--subtle);
+ --pf-t--global--text--color--status--custom--clicked: var(--pf-t--global--color--status--custom--clicked);
+ --pf-t--global--text--color--status--custom--default: var(--pf-t--global--color--status--custom--default);
+ --pf-t--global--text--color--status--custom--hover: var(--pf-t--global--color--status--custom--hover);
+ --pf-t--global--text--color--status--info--clicked: var(--pf-t--global--color--status--info--clicked);
+ --pf-t--global--text--color--status--info--default: var(--pf-t--global--color--status--info--default);
+ --pf-t--global--text--color--status--info--hover: var(--pf-t--global--color--status--info--hover);
+ --pf-t--global--text--color--status--on-custom--clicked: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--status--on-custom--default: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--status--on-custom--hover: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--status--on-danger--clicked: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--status--on-danger--default: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--status--on-danger--hover: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--status--on-info--clicked: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--status--on-info--default: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--status--on-info--hover: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--status--on-success--clicked: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--status--on-success--default: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--status--on-success--hover: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--status--on-warning--clicked: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--status--on-warning--default: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--status--on-warning--hover: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--status--success--clicked: var(--pf-t--global--color--status--success--clicked);
+ --pf-t--global--text--color--status--success--default: var(--pf-t--global--color--status--success--default);
+ --pf-t--global--text--color--status--success--hover: var(--pf-t--global--color--status--success--hover);
+ --pf-t--global--text--color--status--unread--on-attention--clicked: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--status--unread--on-attention--default: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--status--unread--on-attention--hover: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--status--unread--on-default--clicked: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--status--unread--on-default--default: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--status--unread--on-default--hover: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--status--warning--clicked: var(--pf-t--global--color--status--warning--clicked);
+ --pf-t--global--text--color--status--warning--default: var(--pf-t--global--color--status--warning--default);
+ --pf-t--global--text--color--status--warning--hover: var(--pf-t--global--color--status--warning--hover);
+}
+
+@media (prefers-contrast: more) {
+ :root {
+ --pf-t--global--background--color--500: rgba(21, 21, 21, 0.2000);
+ --pf-t--global--background--color--600: rgba(199, 199, 199, 0.2500);
+ --pf-t--global--background--color--action--plain--default: rgba(255, 255, 255, 0.0000);
+ --pf-t--global--box-shadow--color--100: rgba(41, 41, 41, 0.1500);
+ --pf-t--global--box-shadow--color--200: rgba(41, 41, 41, 0.2000);
+ --pf-t--global--color--nonstatus--green--400: #3d7019;
+ --pf-t--global--color--status--danger--300: #501600;
+ --pf-t--global--color--status--success--150: #3d7019;
+ --pf-t--global--color--status--success--300: #153300;
+ --pf-t--global--background--color--100: var(--pf-t--color--white);
+ --pf-t--global--background--color--200: var(--pf-t--color--gray--10);
+ --pf-t--global--background--color--300: var(--pf-t--color--gray--20);
+ --pf-t--global--background--color--400: var(--pf-t--color--gray--80);
+ --pf-t--global--background--color--450: var(--pf-t--color--gray--70);
+ --pf-t--global--background--color--action--plain--clicked: var(--pf-t--global--background--color--600);
+ --pf-t--global--background--color--action--plain--hover: var(--pf-t--global--background--color--600);
+ --pf-t--global--background--color--backdrop--default: var(--pf-t--global--background--color--500);
+ --pf-t--global--background--color--highlight--100: var(--pf-t--color--yellow--30);
+ --pf-t--global--background--color--highlight--200: var(--pf-t--color--yellow--40);
+ --pf-t--global--background--color--tertiary--default: var(--pf-t--global--background--color--600);
+ --pf-t--global--border--color--100: var(--pf-t--color--gray--30);
+ --pf-t--global--border--color--200: var(--pf-t--color--gray--40);
+ --pf-t--global--border--color--300: var(--pf-t--color--gray--50);
+ --pf-t--global--border--color--450: var(--pf-t--color--gray--60);
+ --pf-t--global--border--color--50: var(--pf-t--color--gray--20);
+ --pf-t--global--border--color--nonstatus--green--default: var(--pf-t--global--color--nonstatus--green--400);
+ --pf-t--global--border--color--on-secondary: var(--pf-t--color--gray--80);
+ --pf-t--global--border--color--status--success--default: var(--pf-t--global--color--status--success--150);
+ --pf-t--global--box-shadow--color--lg--default: var(--pf-t--global--box-shadow--color--100);
+ --pf-t--global--box-shadow--color--lg--directional: var(--pf-t--global--box-shadow--color--200);
+ --pf-t--global--box-shadow--color--md--default: var(--pf-t--global--box-shadow--color--100);
+ --pf-t--global--box-shadow--color--md--directional: var(--pf-t--global--box-shadow--color--100);
+ --pf-t--global--box-shadow--color--sm--default: var(--pf-t--global--box-shadow--color--100);
+ --pf-t--global--box-shadow--color--sm--directional: var(--pf-t--global--box-shadow--color--200);
+ --pf-t--global--color--brand--100: var(--pf-t--color--blue--40);
+ --pf-t--global--color--brand--200: var(--pf-t--color--blue--50);
+ --pf-t--global--color--brand--300: var(--pf-t--color--blue--60);
+ --pf-t--global--color--brand--400: var(--pf-t--color--blue--70);
+ --pf-t--global--color--brand--500: var(--pf-t--color--blue--80);
+ --pf-t--global--color--disabled--100: var(--pf-t--color--gray--30);
+ --pf-t--global--color--disabled--200: var(--pf-t--color--gray--40);
+ --pf-t--global--color--disabled--300: var(--pf-t--color--gray--60);
+ --pf-t--global--color--favorite--100: var(--pf-t--color--yellow--30);
+ --pf-t--global--color--favorite--200: var(--pf-t--color--yellow--40);
+ --pf-t--global--color--favorite--300: var(--pf-t--color--yellow--70);
+ --pf-t--global--color--favorite--400: var(--pf-t--color--yellow--80);
+ --pf-t--global--color--nonstatus--blue--100: var(--pf-t--color--blue--20);
+ --pf-t--global--color--nonstatus--blue--200: var(--pf-t--color--blue--30);
+ --pf-t--global--color--nonstatus--blue--300: var(--pf-t--color--blue--40);
+ --pf-t--global--color--nonstatus--blue--400: var(--pf-t--color--blue--60);
+ --pf-t--global--color--nonstatus--blue--500: var(--pf-t--color--blue--70);
+ --pf-t--global--color--nonstatus--gray--100: var(--pf-t--color--gray--20);
+ --pf-t--global--color--nonstatus--gray--200: var(--pf-t--color--gray--30);
+ --pf-t--global--color--nonstatus--gray--300: var(--pf-t--color--gray--40);
+ --pf-t--global--color--nonstatus--gray--400: var(--pf-t--color--gray--60);
+ --pf-t--global--color--nonstatus--gray--50: var(--pf-t--color--gray--10);
+ --pf-t--global--color--nonstatus--gray--500: var(--pf-t--color--gray--70);
+ --pf-t--global--color--nonstatus--green--100: var(--pf-t--color--green--20);
+ --pf-t--global--color--nonstatus--green--200: var(--pf-t--color--green--30);
+ --pf-t--global--color--nonstatus--green--300: var(--pf-t--color--green--40);
+ --pf-t--global--color--nonstatus--green--500: var(--pf-t--color--green--70);
+ --pf-t--global--color--nonstatus--orange--100: var(--pf-t--color--orange--20);
+ --pf-t--global--color--nonstatus--orange--200: var(--pf-t--color--orange--30);
+ --pf-t--global--color--nonstatus--orange--300: var(--pf-t--color--orange--40);
+ --pf-t--global--color--nonstatus--orange--400: var(--pf-t--color--orange--60);
+ --pf-t--global--color--nonstatus--orange--500: var(--pf-t--color--orange--70);
+ --pf-t--global--color--nonstatus--orangered--100: var(--pf-t--color--red-orange--20);
+ --pf-t--global--color--nonstatus--orangered--200: var(--pf-t--color--red-orange--30);
+ --pf-t--global--color--nonstatus--orangered--300: var(--pf-t--color--red-orange--40);
+ --pf-t--global--color--nonstatus--orangered--400: var(--pf-t--color--red-orange--60);
+ --pf-t--global--color--nonstatus--orangered--500: var(--pf-t--color--red-orange--70);
+ --pf-t--global--color--nonstatus--purple--100: var(--pf-t--color--purple--20);
+ --pf-t--global--color--nonstatus--purple--200: var(--pf-t--color--purple--30);
+ --pf-t--global--color--nonstatus--purple--300: var(--pf-t--color--purple--40);
+ --pf-t--global--color--nonstatus--purple--400: var(--pf-t--color--purple--50);
+ --pf-t--global--color--nonstatus--purple--500: var(--pf-t--color--purple--60);
+ --pf-t--global--color--nonstatus--red--100: var(--pf-t--color--red--20);
+ --pf-t--global--color--nonstatus--red--200: var(--pf-t--color--red--30);
+ --pf-t--global--color--nonstatus--red--300: var(--pf-t--color--red--40);
+ --pf-t--global--color--nonstatus--red--400: var(--pf-t--color--red--60);
+ --pf-t--global--color--nonstatus--red--500: var(--pf-t--color--red--70);
+ --pf-t--global--color--nonstatus--teal--100: var(--pf-t--color--teal--20);
+ --pf-t--global--color--nonstatus--teal--200: var(--pf-t--color--teal--30);
+ --pf-t--global--color--nonstatus--teal--300: var(--pf-t--color--teal--40);
+ --pf-t--global--color--nonstatus--teal--400: var(--pf-t--color--teal--70);
+ --pf-t--global--color--nonstatus--teal--500: var(--pf-t--color--teal--80);
+ --pf-t--global--color--nonstatus--yellow--100: var(--pf-t--color--yellow--20);
+ --pf-t--global--color--nonstatus--yellow--200: var(--pf-t--color--yellow--30);
+ --pf-t--global--color--nonstatus--yellow--300: var(--pf-t--color--yellow--40);
+ --pf-t--global--color--nonstatus--yellow--400: var(--pf-t--color--yellow--70);
+ --pf-t--global--color--nonstatus--yellow--500: var(--pf-t--color--yellow--80);
+ --pf-t--global--color--severity--critical--100: var(--pf-t--color--red-orange--60);
+ --pf-t--global--color--severity--important--100: var(--pf-t--color--orange--50);
+ --pf-t--global--color--severity--important--200: var(--pf-t--color--orange--60);
+ --pf-t--global--color--severity--minor--100: var(--pf-t--color--gray--50);
+ --pf-t--global--color--severity--minor--200: var(--pf-t--color--gray--80);
+ --pf-t--global--color--severity--moderate--100: var(--pf-t--color--yellow--40);
+ --pf-t--global--color--severity--moderate--200: var(--pf-t--color--yellow--70);
+ --pf-t--global--color--severity--none--100: var(--pf-t--color--blue--40);
+ --pf-t--global--color--severity--none--200: var(--pf-t--color--blue--60);
+ --pf-t--global--color--severity--undefined--100: var(--pf-t--color--gray--30);
+ --pf-t--global--color--severity--undefined--200: var(--pf-t--color--gray--60);
+ --pf-t--global--color--status--custom--100: var(--pf-t--color--teal--60);
+ --pf-t--global--color--status--custom--200: var(--pf-t--color--teal--70);
+ --pf-t--global--color--status--custom--300: var(--pf-t--color--teal--80);
+ --pf-t--global--color--status--danger--100: var(--pf-t--color--red-orange--60);
+ --pf-t--global--color--status--danger--200: var(--pf-t--color--red-orange--70);
+ --pf-t--global--color--status--danger--clicked: var(--pf-t--global--color--status--danger--300);
+ --pf-t--global--color--status--danger--hover: var(--pf-t--global--color--status--danger--300);
+ --pf-t--global--color--status--info--100: var(--pf-t--color--purple--50);
+ --pf-t--global--color--status--info--200: var(--pf-t--color--purple--60);
+ --pf-t--global--color--status--info--300: var(--pf-t--color--purple--70);
+ --pf-t--global--color--status--success--100: var(--pf-t--color--green--60);
+ --pf-t--global--color--status--success--200: var(--pf-t--color--green--70);
+ --pf-t--global--color--status--success--clicked: var(--pf-t--global--color--status--success--300);
+ --pf-t--global--color--status--success--hover: var(--pf-t--global--color--status--success--300);
+ --pf-t--global--color--status--warning--100: var(--pf-t--color--yellow--30);
+ --pf-t--global--color--status--warning--200: var(--pf-t--color--yellow--40);
+ --pf-t--global--color--status--warning--300: var(--pf-t--color--yellow--50);
+ --pf-t--global--color--status--warning--400: var(--pf-t--color--yellow--60);
+ --pf-t--global--color--status--warning--500: var(--pf-t--color--yellow--70);
+ --pf-t--global--color--status--warning--600: var(--pf-t--color--yellow--80);
+ --pf-t--global--icon--color--100: var(--pf-t--color--gray--90);
+ --pf-t--global--icon--color--150: var(--pf-t--color--gray--60);
+ --pf-t--global--icon--color--200: var(--pf-t--color--gray--50);
+ --pf-t--global--icon--color--300: var(--pf-t--color--white);
+ --pf-t--global--icon--color--brand--clicked: var(--pf-t--color--blue--70);
+ --pf-t--global--icon--color--brand--default: var(--pf-t--color--blue--60);
+ --pf-t--global--icon--color--brand--hover: var(--pf-t--color--blue--70);
+ --pf-t--global--icon--color--status--success--default: var(--pf-t--global--color--status--success--150);
+ --pf-t--global--text--color--100: var(--pf-t--color--gray--95);
+ --pf-t--global--text--color--200: var(--pf-t--color--gray--60);
+ --pf-t--global--text--color--250: var(--pf-t--color--gray--70);
+ --pf-t--global--text--color--300: var(--pf-t--color--white);
+ --pf-t--global--text--color--400: var(--pf-t--color--red-orange--40);
+ --pf-t--global--text--color--500: var(--pf-t--color--red-orange--70);
+ --pf-t--global--text--color--brand--clicked: var(--pf-t--color--blue--80);
+ --pf-t--global--text--color--brand--default: var(--pf-t--color--blue--70);
+ --pf-t--global--text--color--brand--hover: var(--pf-t--color--blue--80);
+ --pf-t--global--text--color--link--100: var(--pf-t--color--blue--50);
+ --pf-t--global--text--color--link--200: var(--pf-t--color--blue--60);
+ --pf-t--global--text--color--link--250: var(--pf-t--color--blue--70);
+ --pf-t--global--text--color--link--300: var(--pf-t--color--purple--50);
+ --pf-t--global--text--color--link--350: var(--pf-t--color--purple--60);
+ --pf-t--global--background--color--control--read-only: var(--pf-t--global--background--color--200);
+ --pf-t--global--background--color--disabled--default: var(--pf-t--global--color--disabled--100);
+ --pf-t--global--background--color--floating--clicked: var(--pf-t--global--background--color--200);
+ --pf-t--global--background--color--floating--default: var(--pf-t--global--background--color--100);
+ --pf-t--global--background--color--floating--hover: var(--pf-t--global--background--color--200);
+ --pf-t--global--background--color--highlight--clicked: var(--pf-t--global--background--color--highlight--200);
+ --pf-t--global--background--color--highlight--default: var(--pf-t--global--background--color--highlight--100);
+ --pf-t--global--background--color--inverse--clicked: var(--pf-t--global--background--color--450);
+ --pf-t--global--background--color--inverse--default: var(--pf-t--global--background--color--400);
+ --pf-t--global--background--color--inverse--hover: var(--pf-t--global--background--color--450);
+ --pf-t--global--background--color--primary--clicked: var(--pf-t--global--background--color--200);
+ --pf-t--global--background--color--primary--default: var(--pf-t--global--background--color--100);
+ --pf-t--global--background--color--primary--hover: var(--pf-t--global--background--color--200);
+ --pf-t--global--background--color--secondary--clicked: var(--pf-t--global--background--color--300);
+ --pf-t--global--background--color--secondary--default: var(--pf-t--global--background--color--200);
+ --pf-t--global--background--color--secondary--hover: var(--pf-t--global--background--color--300);
+ --pf-t--global--border--color--clicked: var(--pf-t--global--color--brand--400);
+ --pf-t--global--border--color--control--read-only: var(--pf-t--global--border--color--50);
+ --pf-t--global--border--color--default: var(--pf-t--global--border--color--450);
+ --pf-t--global--border--color--disabled: var(--pf-t--global--color--disabled--200);
+ --pf-t--global--border--color--hover: var(--pf-t--global--color--brand--300);
+ --pf-t--global--border--color--nonstatus--blue--clicked: var(--pf-t--global--color--nonstatus--blue--500);
+ --pf-t--global--border--color--nonstatus--blue--default: var(--pf-t--global--color--nonstatus--blue--400);
+ --pf-t--global--border--color--nonstatus--blue--hover: var(--pf-t--global--color--nonstatus--blue--500);
+ --pf-t--global--border--color--nonstatus--gray--clicked: var(--pf-t--global--color--nonstatus--gray--500);
+ --pf-t--global--border--color--nonstatus--gray--default: var(--pf-t--global--color--nonstatus--gray--400);
+ --pf-t--global--border--color--nonstatus--gray--hover: var(--pf-t--global--color--nonstatus--gray--500);
+ --pf-t--global--border--color--nonstatus--green--clicked: var(--pf-t--global--color--nonstatus--green--500);
+ --pf-t--global--border--color--nonstatus--green--hover: var(--pf-t--global--color--nonstatus--green--500);
+ --pf-t--global--border--color--nonstatus--orange--clicked: var(--pf-t--global--color--nonstatus--orange--500);
+ --pf-t--global--border--color--nonstatus--orange--default: var(--pf-t--global--color--nonstatus--orange--400);
+ --pf-t--global--border--color--nonstatus--orange--hover: var(--pf-t--global--color--nonstatus--orange--500);
+ --pf-t--global--border--color--nonstatus--orangered--clicked: var(--pf-t--global--color--nonstatus--orangered--500);
+ --pf-t--global--border--color--nonstatus--orangered--default: var(--pf-t--global--color--nonstatus--orangered--400);
+ --pf-t--global--border--color--nonstatus--orangered--hover: var(--pf-t--global--color--nonstatus--orangered--500);
+ --pf-t--global--border--color--nonstatus--purple--clicked: var(--pf-t--global--color--nonstatus--purple--500);
+ --pf-t--global--border--color--nonstatus--purple--default: var(--pf-t--global--color--nonstatus--purple--400);
+ --pf-t--global--border--color--nonstatus--purple--hover: var(--pf-t--global--color--nonstatus--purple--500);
+ --pf-t--global--border--color--nonstatus--red--clicked: var(--pf-t--global--color--nonstatus--red--500);
+ --pf-t--global--border--color--nonstatus--red--default: var(--pf-t--global--color--nonstatus--red--400);
+ --pf-t--global--border--color--nonstatus--red--hover: var(--pf-t--global--color--nonstatus--red--500);
+ --pf-t--global--border--color--nonstatus--teal--clicked: var(--pf-t--global--color--nonstatus--teal--500);
+ --pf-t--global--border--color--nonstatus--teal--default: var(--pf-t--global--color--nonstatus--teal--400);
+ --pf-t--global--border--color--nonstatus--teal--hover: var(--pf-t--global--color--nonstatus--teal--500);
+ --pf-t--global--border--color--nonstatus--yellow--clicked: var(--pf-t--global--color--nonstatus--yellow--500);
+ --pf-t--global--border--color--nonstatus--yellow--default: var(--pf-t--global--color--nonstatus--yellow--400);
+ --pf-t--global--border--color--nonstatus--yellow--hover: var(--pf-t--global--color--nonstatus--yellow--500);
+ --pf-t--global--border--color--status--danger--clicked: var(--pf-t--global--color--status--danger--clicked);
+ --pf-t--global--border--color--status--danger--hover: var(--pf-t--global--color--status--danger--hover);
+ --pf-t--global--border--color--status--success--clicked: var(--pf-t--global--color--status--success--200);
+ --pf-t--global--border--color--status--success--hover: var(--pf-t--global--color--status--success--200);
+ --pf-t--global--border--color--status--warning--clicked: var(--pf-t--global--color--status--warning--600);
+ --pf-t--global--border--color--status--warning--default: var(--pf-t--global--color--status--warning--500);
+ --pf-t--global--border--color--status--warning--hover: var(--pf-t--global--color--status--warning--600);
+ --pf-t--global--color--brand--clicked: var(--pf-t--global--color--brand--400);
+ --pf-t--global--color--brand--default: var(--pf-t--global--color--brand--300);
+ --pf-t--global--color--brand--hover: var(--pf-t--global--color--brand--400);
+ --pf-t--global--color--favorite--clicked: var(--pf-t--global--color--favorite--400);
+ --pf-t--global--color--favorite--default: var(--pf-t--global--color--favorite--300);
+ --pf-t--global--color--favorite--hover: var(--pf-t--global--color--favorite--400);
+ --pf-t--global--color--nonstatus--blue--clicked: var(--pf-t--global--color--nonstatus--blue--200);
+ --pf-t--global--color--nonstatus--blue--default: var(--pf-t--global--color--nonstatus--blue--100);
+ --pf-t--global--color--nonstatus--blue--hover: var(--pf-t--global--color--nonstatus--blue--200);
+ --pf-t--global--color--nonstatus--gray--clicked: var(--pf-t--global--color--nonstatus--gray--100);
+ --pf-t--global--color--nonstatus--gray--default: var(--pf-t--global--color--nonstatus--gray--50);
+ --pf-t--global--color--nonstatus--gray--hover: var(--pf-t--global--color--nonstatus--gray--100);
+ --pf-t--global--color--nonstatus--green--clicked: var(--pf-t--global--color--nonstatus--green--200);
+ --pf-t--global--color--nonstatus--green--default: var(--pf-t--global--color--nonstatus--green--100);
+ --pf-t--global--color--nonstatus--green--hover: var(--pf-t--global--color--nonstatus--green--200);
+ --pf-t--global--color--nonstatus--orange--clicked: var(--pf-t--global--color--nonstatus--orange--200);
+ --pf-t--global--color--nonstatus--orange--default: var(--pf-t--global--color--nonstatus--orange--100);
+ --pf-t--global--color--nonstatus--orange--hover: var(--pf-t--global--color--nonstatus--orange--200);
+ --pf-t--global--color--nonstatus--orangered--clicked: var(--pf-t--global--color--nonstatus--orangered--200);
+ --pf-t--global--color--nonstatus--orangered--default: var(--pf-t--global--color--nonstatus--orangered--100);
+ --pf-t--global--color--nonstatus--orangered--hover: var(--pf-t--global--color--nonstatus--orangered--200);
+ --pf-t--global--color--nonstatus--purple--clicked: var(--pf-t--global--color--nonstatus--purple--200);
+ --pf-t--global--color--nonstatus--purple--default: var(--pf-t--global--color--nonstatus--purple--100);
+ --pf-t--global--color--nonstatus--purple--hover: var(--pf-t--global--color--nonstatus--purple--200);
+ --pf-t--global--color--nonstatus--red--clicked: var(--pf-t--global--color--nonstatus--red--200);
+ --pf-t--global--color--nonstatus--red--default: var(--pf-t--global--color--nonstatus--red--100);
+ --pf-t--global--color--nonstatus--red--hover: var(--pf-t--global--color--nonstatus--red--200);
+ --pf-t--global--color--nonstatus--teal--clicked: var(--pf-t--global--color--nonstatus--teal--200);
+ --pf-t--global--color--nonstatus--teal--default: var(--pf-t--global--color--nonstatus--teal--100);
+ --pf-t--global--color--nonstatus--teal--hover: var(--pf-t--global--color--nonstatus--teal--200);
+ --pf-t--global--color--nonstatus--yellow--clicked: var(--pf-t--global--color--nonstatus--yellow--200);
+ --pf-t--global--color--nonstatus--yellow--default: var(--pf-t--global--color--nonstatus--yellow--100);
+ --pf-t--global--color--nonstatus--yellow--hover: var(--pf-t--global--color--nonstatus--yellow--200);
+ --pf-t--global--color--status--custom--clicked: var(--pf-t--global--color--status--custom--300);
+ --pf-t--global--color--status--custom--default: var(--pf-t--global--color--status--custom--200);
+ --pf-t--global--color--status--custom--hover: var(--pf-t--global--color--status--custom--300);
+ --pf-t--global--color--status--danger--default: var(--pf-t--global--color--status--danger--200);
+ --pf-t--global--color--status--info--clicked: var(--pf-t--global--color--status--info--300);
+ --pf-t--global--color--status--info--default: var(--pf-t--global--color--status--info--200);
+ --pf-t--global--color--status--info--hover: var(--pf-t--global--color--status--info--300);
+ --pf-t--global--color--status--success--default: var(--pf-t--global--color--status--success--200);
+ --pf-t--global--color--status--unread--attention--clicked: var(--pf-t--global--color--status--danger--clicked);
+ --pf-t--global--color--status--unread--attention--hover: var(--pf-t--global--color--status--danger--hover);
+ --pf-t--global--color--status--warning--clicked: var(--pf-t--global--color--status--warning--600);
+ --pf-t--global--color--status--warning--default: var(--pf-t--global--color--status--warning--500);
+ --pf-t--global--color--status--warning--hover: var(--pf-t--global--color--status--warning--600);
+ --pf-t--global--icon--color--disabled: var(--pf-t--global--color--disabled--200);
+ --pf-t--global--icon--color--inverse: var(--pf-t--global--icon--color--300);
+ --pf-t--global--icon--color--on-disabled: var(--pf-t--global--color--disabled--300);
+ --pf-t--global--icon--color--regular: var(--pf-t--global--icon--color--100);
+ --pf-t--global--icon--color--severity--critical--default: var(--pf-t--global--color--severity--critical--100);
+ --pf-t--global--icon--color--severity--important--default: var(--pf-t--global--color--severity--important--200);
+ --pf-t--global--icon--color--severity--minor--default: var(--pf-t--global--color--severity--minor--200);
+ --pf-t--global--icon--color--severity--moderate--default: var(--pf-t--global--color--severity--moderate--200);
+ --pf-t--global--icon--color--severity--none--default: var(--pf-t--global--color--severity--none--200);
+ --pf-t--global--icon--color--severity--undefined--default: var(--pf-t--global--color--severity--undefined--200);
+ --pf-t--global--icon--color--status--danger--clicked: var(--pf-t--global--color--status--danger--200);
+ --pf-t--global--icon--color--status--danger--default: var(--pf-t--global--color--status--danger--100);
+ --pf-t--global--icon--color--status--danger--hover: var(--pf-t--global--color--status--danger--200);
+ --pf-t--global--icon--color--status--success--clicked: var(--pf-t--global--color--status--success--200);
+ --pf-t--global--icon--color--status--success--hover: var(--pf-t--global--color--status--success--200);
+ --pf-t--global--icon--color--status--warning--clicked: var(--pf-t--global--color--status--warning--600);
+ --pf-t--global--icon--color--status--warning--default: var(--pf-t--global--color--status--warning--500);
+ --pf-t--global--icon--color--status--warning--hover: var(--pf-t--global--color--status--warning--600);
+ --pf-t--global--icon--color--subtle: var(--pf-t--global--icon--color--150);
+ --pf-t--global--text--color--disabled: var(--pf-t--global--color--disabled--200);
+ --pf-t--global--text--color--inverse: var(--pf-t--global--text--color--300);
+ --pf-t--global--text--color--link--default: var(--pf-t--global--text--color--link--200);
+ --pf-t--global--text--color--link--hover: var(--pf-t--global--text--color--link--250);
+ --pf-t--global--text--color--link--visited: var(--pf-t--global--text--color--link--350);
+ --pf-t--global--text--color--on-disabled: var(--pf-t--global--color--disabled--300);
+ --pf-t--global--text--color--on-highlight: var(--pf-t--global--text--color--100);
+ --pf-t--global--text--color--regular: var(--pf-t--global--text--color--100);
+ --pf-t--global--text--color--required: var(--pf-t--global--text--color--500);
+ --pf-t--global--text--color--status--danger--clicked: var(--pf-t--global--color--status--danger--clicked);
+ --pf-t--global--text--color--status--danger--hover: var(--pf-t--global--color--status--danger--hover);
+ --pf-t--global--text--color--status--success--clicked: var(--pf-t--global--color--status--success--200);
+ --pf-t--global--text--color--status--success--default: var(--pf-t--global--color--status--success--200);
+ --pf-t--global--text--color--status--success--hover: var(--pf-t--global--color--status--success--200);
+ --pf-t--global--text--color--status--warning--clicked: var(--pf-t--global--color--status--warning--600);
+ --pf-t--global--text--color--status--warning--default: var(--pf-t--global--color--status--warning--500);
+ --pf-t--global--text--color--status--warning--hover: var(--pf-t--global--color--status--warning--600);
+ --pf-t--global--text--color--subtle: var(--pf-t--global--text--color--250);
+ --pf-t--global--background--color--action--plain--alt--clicked: var(--pf-t--global--background--color--primary--default);
+ --pf-t--global--background--color--action--plain--alt--hover: var(--pf-t--global--background--color--primary--default);
+ --pf-t--global--background--color--control--default: var(--pf-t--global--background--color--primary--default);
+ --pf-t--global--border--color--alt: var(--pf-t--global--background--color--primary--default);
+ --pf-t--global--border--color--brand--clicked: var(--pf-t--global--color--brand--clicked);
+ --pf-t--global--border--color--brand--default: var(--pf-t--global--color--brand--default);
+ --pf-t--global--border--color--brand--hover: var(--pf-t--global--color--brand--hover);
+ --pf-t--global--border--color--high-contrast: var(--pf-t--global--border--color--default);
+ --pf-t--global--border--color--status--custom--clicked: var(--pf-t--global--color--status--custom--clicked);
+ --pf-t--global--border--color--status--custom--default: var(--pf-t--global--color--status--custom--default);
+ --pf-t--global--border--color--status--custom--hover: var(--pf-t--global--color--status--custom--hover);
+ --pf-t--global--border--color--status--danger--default: var(--pf-t--global--color--status--danger--default);
+ --pf-t--global--border--color--status--info--clicked: var(--pf-t--global--color--status--info--clicked);
+ --pf-t--global--border--color--status--info--default: var(--pf-t--global--color--status--info--default);
+ --pf-t--global--border--color--status--info--hover: var(--pf-t--global--color--status--info--hover);
+ --pf-t--global--color--status--read--on-primary: var(--pf-t--global--background--color--secondary--default);
+ --pf-t--global--color--status--unread--attention--default: var(--pf-t--global--color--status--danger--default);
+ --pf-t--global--color--status--unread--clicked: var(--pf-t--global--color--brand--clicked);
+ --pf-t--global--color--status--unread--default: var(--pf-t--global--color--brand--default);
+ --pf-t--global--color--status--unread--hover: var(--pf-t--global--color--brand--hover);
+ --pf-t--global--icon--color--favorite--clicked: var(--pf-t--global--color--favorite--clicked);
+ --pf-t--global--icon--color--favorite--default: var(--pf-t--global--color--favorite--default);
+ --pf-t--global--icon--color--favorite--hover: var(--pf-t--global--color--favorite--hover);
+ --pf-t--global--icon--color--nonstatus--on-blue--clicked: var(--pf-t--global--icon--color--regular);
+ --pf-t--global--icon--color--nonstatus--on-blue--default: var(--pf-t--global--icon--color--regular);
+ --pf-t--global--icon--color--nonstatus--on-blue--hover: var(--pf-t--global--icon--color--regular);
+ --pf-t--global--icon--color--nonstatus--on-gray--clicked: var(--pf-t--global--icon--color--regular);
+ --pf-t--global--icon--color--nonstatus--on-gray--default: var(--pf-t--global--icon--color--regular);
+ --pf-t--global--icon--color--nonstatus--on-gray--hover: var(--pf-t--global--icon--color--regular);
+ --pf-t--global--icon--color--nonstatus--on-green--clicked: var(--pf-t--global--icon--color--regular);
+ --pf-t--global--icon--color--nonstatus--on-green--default: var(--pf-t--global--icon--color--regular);
+ --pf-t--global--icon--color--nonstatus--on-green--hover: var(--pf-t--global--icon--color--regular);
+ --pf-t--global--icon--color--nonstatus--on-orange--clicked: var(--pf-t--global--icon--color--regular);
+ --pf-t--global--icon--color--nonstatus--on-orange--default: var(--pf-t--global--icon--color--regular);
+ --pf-t--global--icon--color--nonstatus--on-orange--hover: var(--pf-t--global--icon--color--regular);
+ --pf-t--global--icon--color--nonstatus--on-orangered--clicked: var(--pf-t--global--icon--color--regular);
+ --pf-t--global--icon--color--nonstatus--on-orangered--default: var(--pf-t--global--icon--color--regular);
+ --pf-t--global--icon--color--nonstatus--on-orangered--hover: var(--pf-t--global--icon--color--regular);
+ --pf-t--global--icon--color--nonstatus--on-purple--clicked: var(--pf-t--global--icon--color--regular);
+ --pf-t--global--icon--color--nonstatus--on-purple--default: var(--pf-t--global--icon--color--regular);
+ --pf-t--global--icon--color--nonstatus--on-purple--hover: var(--pf-t--global--icon--color--regular);
+ --pf-t--global--icon--color--nonstatus--on-red--clicked: var(--pf-t--global--icon--color--regular);
+ --pf-t--global--icon--color--nonstatus--on-red--default: var(--pf-t--global--icon--color--regular);
+ --pf-t--global--icon--color--nonstatus--on-red--hover: var(--pf-t--global--icon--color--regular);
+ --pf-t--global--icon--color--nonstatus--on-teal--clicked: var(--pf-t--global--icon--color--regular);
+ --pf-t--global--icon--color--nonstatus--on-teal--default: var(--pf-t--global--icon--color--regular);
+ --pf-t--global--icon--color--nonstatus--on-teal--hover: var(--pf-t--global--icon--color--regular);
+ --pf-t--global--icon--color--nonstatus--on-yellow--clicked: var(--pf-t--global--icon--color--regular);
+ --pf-t--global--icon--color--nonstatus--on-yellow--default: var(--pf-t--global--icon--color--regular);
+ --pf-t--global--icon--color--nonstatus--on-yellow--hover: var(--pf-t--global--icon--color--regular);
+ --pf-t--global--icon--color--on-brand--clicked: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--on-brand--default: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--on-brand--hover: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--custom--clicked: var(--pf-t--global--color--status--custom--clicked);
+ --pf-t--global--icon--color--status--custom--default: var(--pf-t--global--color--status--custom--default);
+ --pf-t--global--icon--color--status--custom--hover: var(--pf-t--global--color--status--custom--hover);
+ --pf-t--global--icon--color--status--info--clicked: var(--pf-t--global--color--status--info--clicked);
+ --pf-t--global--icon--color--status--info--default: var(--pf-t--global--color--status--info--default);
+ --pf-t--global--icon--color--status--info--hover: var(--pf-t--global--color--status--info--hover);
+ --pf-t--global--icon--color--status--on-custom--clicked: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--on-custom--default: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--on-custom--hover: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--on-danger--clicked: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--on-danger--default: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--on-danger--hover: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--on-info--clicked: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--on-info--default: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--on-info--hover: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--on-success--clicked: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--on-success--default: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--on-success--hover: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--on-warning--clicked: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--on-warning--default: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--on-warning--hover: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--unread--on-attention--clicked: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--unread--on-attention--default: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--unread--on-attention--hover: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--unread--on-default--clicked: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--unread--on-default--default: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--unread--on-default--hover: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--text--color--nonstatus--on-blue--clicked: var(--pf-t--global--text--color--regular);
+ --pf-t--global--text--color--nonstatus--on-blue--default: var(--pf-t--global--text--color--regular);
+ --pf-t--global--text--color--nonstatus--on-blue--hover: var(--pf-t--global--text--color--regular);
+ --pf-t--global--text--color--nonstatus--on-gray--clicked: var(--pf-t--global--text--color--regular);
+ --pf-t--global--text--color--nonstatus--on-gray--default: var(--pf-t--global--text--color--regular);
+ --pf-t--global--text--color--nonstatus--on-gray--hover: var(--pf-t--global--text--color--regular);
+ --pf-t--global--text--color--nonstatus--on-green--clicked: var(--pf-t--global--text--color--regular);
+ --pf-t--global--text--color--nonstatus--on-green--default: var(--pf-t--global--text--color--regular);
+ --pf-t--global--text--color--nonstatus--on-green--hover: var(--pf-t--global--text--color--regular);
+ --pf-t--global--text--color--nonstatus--on-orange--clicked: var(--pf-t--global--text--color--regular);
+ --pf-t--global--text--color--nonstatus--on-orange--default: var(--pf-t--global--text--color--regular);
+ --pf-t--global--text--color--nonstatus--on-orange--hover: var(--pf-t--global--text--color--regular);
+ --pf-t--global--text--color--nonstatus--on-orangered--clicked: var(--pf-t--global--text--color--regular);
+ --pf-t--global--text--color--nonstatus--on-orangered--default: var(--pf-t--global--text--color--regular);
+ --pf-t--global--text--color--nonstatus--on-orangered--hover: var(--pf-t--global--text--color--regular);
+ --pf-t--global--text--color--nonstatus--on-purple--clicked: var(--pf-t--global--text--color--regular);
+ --pf-t--global--text--color--nonstatus--on-purple--default: var(--pf-t--global--text--color--regular);
+ --pf-t--global--text--color--nonstatus--on-purple--hover: var(--pf-t--global--text--color--regular);
+ --pf-t--global--text--color--nonstatus--on-red--clicked: var(--pf-t--global--text--color--regular);
+ --pf-t--global--text--color--nonstatus--on-red--default: var(--pf-t--global--text--color--regular);
+ --pf-t--global--text--color--nonstatus--on-red--hover: var(--pf-t--global--text--color--regular);
+ --pf-t--global--text--color--nonstatus--on-teal--clicked: var(--pf-t--global--text--color--regular);
+ --pf-t--global--text--color--nonstatus--on-teal--default: var(--pf-t--global--text--color--regular);
+ --pf-t--global--text--color--nonstatus--on-teal--hover: var(--pf-t--global--text--color--regular);
+ --pf-t--global--text--color--nonstatus--on-yellow--clicked: var(--pf-t--global--text--color--regular);
+ --pf-t--global--text--color--nonstatus--on-yellow--default: var(--pf-t--global--text--color--regular);
+ --pf-t--global--text--color--nonstatus--on-yellow--hover: var(--pf-t--global--text--color--regular);
+ --pf-t--global--text--color--on-brand--clicked: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--on-brand--default: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--on-brand--hover: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--placeholder: var(--pf-t--global--text--color--subtle);
+ --pf-t--global--text--color--status--custom--clicked: var(--pf-t--global--color--status--custom--clicked);
+ --pf-t--global--text--color--status--custom--default: var(--pf-t--global--color--status--custom--default);
+ --pf-t--global--text--color--status--custom--hover: var(--pf-t--global--color--status--custom--hover);
+ --pf-t--global--text--color--status--danger--default: var(--pf-t--global--color--status--danger--default);
+ --pf-t--global--text--color--status--info--clicked: var(--pf-t--global--color--status--info--clicked);
+ --pf-t--global--text--color--status--info--default: var(--pf-t--global--color--status--info--default);
+ --pf-t--global--text--color--status--info--hover: var(--pf-t--global--color--status--info--hover);
+ --pf-t--global--text--color--status--on-custom--clicked: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--status--on-custom--default: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--status--on-custom--hover: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--status--on-danger--clicked: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--text--color--status--on-danger--default: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--status--on-danger--hover: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--status--on-info--clicked: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--status--on-info--default: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--status--on-info--hover: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--status--on-success--clicked: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--status--on-success--default: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--status--on-success--hover: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--status--on-warning--clicked: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--status--on-warning--default: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--status--on-warning--hover: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--status--unread--on-attention--clicked: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--status--unread--on-attention--default: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--status--unread--on-attention--hover: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--status--unread--on-default--clicked: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--status--unread--on-default--default: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--status--unread--on-default--hover: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--color--status--read--on-secondary: var(--pf-t--global--background--color--control--default);
+ }
+}
+@media (prefers-contrast: more) {
+ :root:where(.pf-v6-theme-dark) {
+ --pf-t--global--background--color--action--plain--default: rgba(0, 0, 0, 0.0000);
+ --pf-t--global--dark--background--color--500: rgba(21, 21, 21, 0.8000);
+ --pf-t--global--dark--background--color--600: rgba(199, 199, 199, 0.1500);
+ --pf-t--global--dark--box-shadow--color--100: rgba(0, 0, 0, 0.5000);
+ --pf-t--global--dark--box-shadow--color--200: rgba(0, 0, 0, 0.7000);
+ --pf-t--global--background--color--action--plain--clicked: var(--pf-t--global--dark--background--color--600);
+ --pf-t--global--background--color--action--plain--hover: var(--pf-t--global--dark--background--color--600);
+ --pf-t--global--background--color--backdrop--default: var(--pf-t--global--dark--background--color--500);
+ --pf-t--global--background--color--primary--default: var(--pf-t--color--black);
+ --pf-t--global--background--color--tertiary--default: var(--pf-t--global--dark--background--color--600);
+ --pf-t--global--border--color--default: var(--pf-t--color--gray--30);
+ --pf-t--global--border--color--on-secondary: var(--pf-t--color--gray--60);
+ --pf-t--global--box-shadow--color--lg--default: var(--pf-t--global--dark--box-shadow--color--100);
+ --pf-t--global--box-shadow--color--lg--directional: var(--pf-t--global--dark--box-shadow--color--200);
+ --pf-t--global--box-shadow--color--md--default: var(--pf-t--global--dark--box-shadow--color--100);
+ --pf-t--global--box-shadow--color--md--directional: var(--pf-t--global--dark--box-shadow--color--200);
+ --pf-t--global--box-shadow--color--sm--default: var(--pf-t--global--dark--box-shadow--color--100);
+ --pf-t--global--box-shadow--color--sm--directional: var(--pf-t--global--dark--box-shadow--color--200);
+ --pf-t--global--dark--background--color--100: var(--pf-t--color--gray--95);
+ --pf-t--global--dark--background--color--200: var(--pf-t--color--gray--80);
+ --pf-t--global--dark--background--color--300: var(--pf-t--color--gray--70);
+ --pf-t--global--dark--background--color--400: var(--pf-t--color--gray--10);
+ --pf-t--global--dark--background--color--450: var(--pf-t--color--gray--20);
+ --pf-t--global--dark--background--color--highlight--100: var(--pf-t--color--yellow--20);
+ --pf-t--global--dark--background--color--highlight--200: var(--pf-t--color--yellow--30);
+ --pf-t--global--dark--border--color--100: var(--pf-t--color--gray--50);
+ --pf-t--global--dark--border--color--200: var(--pf-t--color--gray--40);
+ --pf-t--global--dark--border--color--50: var(--pf-t--color--gray--60);
+ --pf-t--global--dark--color--brand--100: var(--pf-t--color--blue--30);
+ --pf-t--global--dark--color--brand--200: var(--pf-t--color--blue--20);
+ --pf-t--global--dark--color--brand--300: var(--pf-t--color--blue--10);
+ --pf-t--global--dark--color--disabled--100: var(--pf-t--color--gray--40);
+ --pf-t--global--dark--color--disabled--200: var(--pf-t--color--gray--50);
+ --pf-t--global--dark--color--disabled--300: var(--pf-t--color--gray--70);
+ --pf-t--global--dark--color--disabled--400: var(--pf-t--color--gray--90);
+ --pf-t--global--dark--color--favorite--100: var(--pf-t--color--yellow--30);
+ --pf-t--global--dark--color--favorite--200: var(--pf-t--color--yellow--20);
+ --pf-t--global--dark--color--nonstatus--blue--100: var(--pf-t--color--blue--30);
+ --pf-t--global--dark--color--nonstatus--blue--200: var(--pf-t--color--blue--20);
+ --pf-t--global--dark--color--nonstatus--blue--300: var(--pf-t--color--blue--10);
+ --pf-t--global--dark--color--nonstatus--gray--100: var(--pf-t--color--gray--60);
+ --pf-t--global--dark--color--nonstatus--gray--200: var(--pf-t--color--gray--50);
+ --pf-t--global--dark--color--nonstatus--gray--300: var(--pf-t--color--gray--40);
+ --pf-t--global--dark--color--nonstatus--gray--50: var(--pf-t--color--gray--70);
+ --pf-t--global--dark--color--nonstatus--green--100: var(--pf-t--color--green--30);
+ --pf-t--global--dark--color--nonstatus--green--200: var(--pf-t--color--green--20);
+ --pf-t--global--dark--color--nonstatus--green--300: var(--pf-t--color--green--10);
+ --pf-t--global--dark--color--nonstatus--orange--100: var(--pf-t--color--orange--30);
+ --pf-t--global--dark--color--nonstatus--orange--200: var(--pf-t--color--orange--20);
+ --pf-t--global--dark--color--nonstatus--orange--300: var(--pf-t--color--orange--10);
+ --pf-t--global--dark--color--nonstatus--orangered--100: var(--pf-t--color--red-orange--30);
+ --pf-t--global--dark--color--nonstatus--orangered--200: var(--pf-t--color--red-orange--20);
+ --pf-t--global--dark--color--nonstatus--orangered--300: var(--pf-t--color--red-orange--10);
+ --pf-t--global--dark--color--nonstatus--purple--100: var(--pf-t--color--purple--30);
+ --pf-t--global--dark--color--nonstatus--purple--200: var(--pf-t--color--purple--20);
+ --pf-t--global--dark--color--nonstatus--purple--300: var(--pf-t--color--purple--10);
+ --pf-t--global--dark--color--nonstatus--red--100: var(--pf-t--color--red--30);
+ --pf-t--global--dark--color--nonstatus--red--200: var(--pf-t--color--red--20);
+ --pf-t--global--dark--color--nonstatus--red--300: var(--pf-t--color--red--10);
+ --pf-t--global--dark--color--nonstatus--teal--100: var(--pf-t--color--teal--30);
+ --pf-t--global--dark--color--nonstatus--teal--200: var(--pf-t--color--teal--20);
+ --pf-t--global--dark--color--nonstatus--teal--300: var(--pf-t--color--teal--10);
+ --pf-t--global--dark--color--nonstatus--yellow--100: var(--pf-t--color--yellow--30);
+ --pf-t--global--dark--color--nonstatus--yellow--200: var(--pf-t--color--yellow--20);
+ --pf-t--global--dark--color--nonstatus--yellow--300: var(--pf-t--color--yellow--10);
+ --pf-t--global--dark--color--severity--critical--100: var(--pf-t--color--red-orange--50);
+ --pf-t--global--dark--color--severity--critical--200: var(--pf-t--color--red-orange--40);
+ --pf-t--global--dark--color--severity--important--100: var(--pf-t--color--orange--40);
+ --pf-t--global--dark--color--severity--minor--100: var(--pf-t--color--gray--30);
+ --pf-t--global--dark--color--severity--moderate--100: var(--pf-t--color--yellow--30);
+ --pf-t--global--dark--color--severity--none--100: var(--pf-t--color--blue--30);
+ --pf-t--global--dark--color--severity--undefined--100: var(--pf-t--color--gray--40);
+ --pf-t--global--dark--color--status--custom--100: var(--pf-t--color--teal--40);
+ --pf-t--global--dark--color--status--custom--200: var(--pf-t--color--teal--30);
+ --pf-t--global--dark--color--status--custom--300: var(--pf-t--color--teal--20);
+ --pf-t--global--dark--color--status--danger--100: var(--pf-t--color--red-orange--50);
+ --pf-t--global--dark--color--status--danger--200: var(--pf-t--color--red-orange--40);
+ --pf-t--global--dark--color--status--danger--250: var(--pf-t--color--red-orange--30);
+ --pf-t--global--dark--color--status--danger--300: var(--pf-t--color--red-orange--20);
+ --pf-t--global--dark--color--status--info--100: var(--pf-t--color--purple--30);
+ --pf-t--global--dark--color--status--info--200: var(--pf-t--color--purple--20);
+ --pf-t--global--dark--color--status--info--300: var(--pf-t--color--purple--10);
+ --pf-t--global--dark--color--status--success--100: var(--pf-t--color--green--40);
+ --pf-t--global--dark--color--status--success--200: var(--pf-t--color--green--30);
+ --pf-t--global--dark--color--status--success--300: var(--pf-t--color--green--20);
+ --pf-t--global--dark--color--status--warning--100: var(--pf-t--color--yellow--30);
+ --pf-t--global--dark--color--status--warning--200: var(--pf-t--color--yellow--20);
+ --pf-t--global--dark--icon--color--100: var(--pf-t--color--gray--10);
+ --pf-t--global--dark--icon--color--200: var(--pf-t--color--gray--40);
+ --pf-t--global--dark--icon--color--300: var(--pf-t--color--gray--90);
+ --pf-t--global--dark--text--color--100: var(--pf-t--color--white);
+ --pf-t--global--dark--text--color--200: var(--pf-t--color--gray--30);
+ --pf-t--global--dark--text--color--300: var(--pf-t--color--gray--90);
+ --pf-t--global--dark--text--color--400: var(--pf-t--color--red-orange--30);
+ --pf-t--global--dark--text--color--link--100: var(--pf-t--color--blue--20);
+ --pf-t--global--dark--text--color--link--200: var(--pf-t--color--blue--10);
+ --pf-t--global--dark--text--color--link--300: var(--pf-t--color--purple--30);
+ --pf-t--global--dark--text--color--link--400: var(--pf-t--color--purple--20);
+ --pf-t--global--background--color--action--plain--alt--clicked: var(--pf-t--global--background--color--primary--default);
+ --pf-t--global--background--color--action--plain--alt--hover: var(--pf-t--global--background--color--primary--default);
+ --pf-t--global--background--color--control--default: var(--pf-t--global--dark--background--color--100);
+ --pf-t--global--background--color--control--read-only: var(--pf-t--global--dark--background--color--300);
+ --pf-t--global--background--color--disabled--default: var(--pf-t--global--dark--color--disabled--200);
+ --pf-t--global--background--color--floating--clicked: var(--pf-t--global--dark--background--color--300);
+ --pf-t--global--background--color--floating--default: var(--pf-t--global--dark--background--color--200);
+ --pf-t--global--background--color--floating--hover: var(--pf-t--global--dark--background--color--300);
+ --pf-t--global--background--color--highlight--clicked: var(--pf-t--global--dark--background--color--highlight--200);
+ --pf-t--global--background--color--highlight--default: var(--pf-t--global--dark--background--color--highlight--100);
+ --pf-t--global--background--color--inverse--clicked: var(--pf-t--global--dark--background--color--450);
+ --pf-t--global--background--color--inverse--default: var(--pf-t--global--dark--background--color--400);
+ --pf-t--global--background--color--inverse--hover: var(--pf-t--global--dark--background--color--450);
+ --pf-t--global--background--color--primary--clicked: var(--pf-t--global--dark--background--color--100);
+ --pf-t--global--background--color--primary--hover: var(--pf-t--global--dark--background--color--100);
+ --pf-t--global--background--color--secondary--clicked: var(--pf-t--global--dark--background--color--200);
+ --pf-t--global--background--color--secondary--default: var(--pf-t--global--dark--background--color--100);
+ --pf-t--global--background--color--secondary--hover: var(--pf-t--global--dark--background--color--200);
+ --pf-t--global--border--color--alt: var(--pf-t--global--background--color--primary--default);
+ --pf-t--global--border--color--clicked: var(--pf-t--global--dark--color--brand--200);
+ --pf-t--global--border--color--control--read-only: var(--pf-t--global--dark--border--color--50);
+ --pf-t--global--border--color--disabled: var(--pf-t--global--dark--color--disabled--200);
+ --pf-t--global--border--color--high-contrast: var(--pf-t--global--border--color--default);
+ --pf-t--global--border--color--hover: var(--pf-t--global--dark--color--brand--100);
+ --pf-t--global--border--color--nonstatus--blue--clicked: var(--pf-t--global--dark--color--nonstatus--blue--200);
+ --pf-t--global--border--color--nonstatus--blue--default: var(--pf-t--global--dark--color--nonstatus--blue--100);
+ --pf-t--global--border--color--nonstatus--blue--hover: var(--pf-t--global--dark--color--nonstatus--blue--200);
+ --pf-t--global--border--color--nonstatus--gray--clicked: var(--pf-t--global--dark--color--nonstatus--gray--300);
+ --pf-t--global--border--color--nonstatus--gray--default: var(--pf-t--global--dark--color--nonstatus--gray--200);
+ --pf-t--global--border--color--nonstatus--gray--hover: var(--pf-t--global--dark--color--nonstatus--gray--300);
+ --pf-t--global--border--color--nonstatus--green--clicked: var(--pf-t--global--dark--color--nonstatus--green--200);
+ --pf-t--global--border--color--nonstatus--green--default: var(--pf-t--global--dark--color--nonstatus--green--100);
+ --pf-t--global--border--color--nonstatus--green--hover: var(--pf-t--global--dark--color--nonstatus--green--200);
+ --pf-t--global--border--color--nonstatus--orange--clicked: var(--pf-t--global--dark--color--nonstatus--orange--200);
+ --pf-t--global--border--color--nonstatus--orange--default: var(--pf-t--global--dark--color--nonstatus--orange--100);
+ --pf-t--global--border--color--nonstatus--orange--hover: var(--pf-t--global--dark--color--nonstatus--orange--200);
+ --pf-t--global--border--color--nonstatus--orangered--clicked: var(--pf-t--global--dark--color--nonstatus--orangered--200);
+ --pf-t--global--border--color--nonstatus--orangered--default: var(--pf-t--global--dark--color--nonstatus--orangered--100);
+ --pf-t--global--border--color--nonstatus--orangered--hover: var(--pf-t--global--dark--color--nonstatus--orangered--200);
+ --pf-t--global--border--color--nonstatus--purple--clicked: var(--pf-t--global--dark--color--nonstatus--purple--200);
+ --pf-t--global--border--color--nonstatus--purple--default: var(--pf-t--global--dark--color--nonstatus--purple--100);
+ --pf-t--global--border--color--nonstatus--purple--hover: var(--pf-t--global--dark--color--nonstatus--purple--200);
+ --pf-t--global--border--color--nonstatus--red--clicked: var(--pf-t--global--dark--color--nonstatus--red--200);
+ --pf-t--global--border--color--nonstatus--red--default: var(--pf-t--global--dark--color--nonstatus--red--100);
+ --pf-t--global--border--color--nonstatus--red--hover: var(--pf-t--global--dark--color--nonstatus--red--200);
+ --pf-t--global--border--color--nonstatus--teal--clicked: var(--pf-t--global--dark--color--nonstatus--teal--200);
+ --pf-t--global--border--color--nonstatus--teal--default: var(--pf-t--global--dark--color--nonstatus--teal--100);
+ --pf-t--global--border--color--nonstatus--teal--hover: var(--pf-t--global--dark--color--nonstatus--teal--200);
+ --pf-t--global--border--color--nonstatus--yellow--clicked: var(--pf-t--global--dark--color--nonstatus--yellow--200);
+ --pf-t--global--border--color--nonstatus--yellow--default: var(--pf-t--global--dark--color--nonstatus--yellow--100);
+ --pf-t--global--border--color--nonstatus--yellow--hover: var(--pf-t--global--dark--color--nonstatus--yellow--200);
+ --pf-t--global--color--brand--clicked: var(--pf-t--global--dark--color--brand--200);
+ --pf-t--global--color--brand--default: var(--pf-t--global--dark--color--brand--100);
+ --pf-t--global--color--brand--hover: var(--pf-t--global--dark--color--brand--200);
+ --pf-t--global--color--favorite--clicked: var(--pf-t--global--dark--color--favorite--200);
+ --pf-t--global--color--favorite--default: var(--pf-t--global--dark--color--favorite--100);
+ --pf-t--global--color--favorite--hover: var(--pf-t--global--dark--color--favorite--200);
+ --pf-t--global--color--nonstatus--blue--clicked: var(--pf-t--global--dark--color--nonstatus--blue--200);
+ --pf-t--global--color--nonstatus--blue--default: var(--pf-t--global--dark--color--nonstatus--blue--100);
+ --pf-t--global--color--nonstatus--blue--hover: var(--pf-t--global--dark--color--nonstatus--blue--200);
+ --pf-t--global--color--nonstatus--gray--clicked: var(--pf-t--global--dark--color--nonstatus--gray--100);
+ --pf-t--global--color--nonstatus--gray--default: var(--pf-t--global--dark--color--nonstatus--gray--50);
+ --pf-t--global--color--nonstatus--gray--hover: var(--pf-t--global--dark--color--nonstatus--gray--100);
+ --pf-t--global--color--nonstatus--green--clicked: var(--pf-t--global--dark--color--nonstatus--green--200);
+ --pf-t--global--color--nonstatus--green--default: var(--pf-t--global--dark--color--nonstatus--green--100);
+ --pf-t--global--color--nonstatus--green--hover: var(--pf-t--global--dark--color--nonstatus--green--200);
+ --pf-t--global--color--nonstatus--orange--clicked: var(--pf-t--global--dark--color--nonstatus--orange--200);
+ --pf-t--global--color--nonstatus--orange--default: var(--pf-t--global--dark--color--nonstatus--orange--100);
+ --pf-t--global--color--nonstatus--orange--hover: var(--pf-t--global--dark--color--nonstatus--orange--200);
+ --pf-t--global--color--nonstatus--orangered--clicked: var(--pf-t--global--dark--color--nonstatus--orangered--200);
+ --pf-t--global--color--nonstatus--orangered--default: var(--pf-t--global--dark--color--nonstatus--orangered--100);
+ --pf-t--global--color--nonstatus--orangered--hover: var(--pf-t--global--dark--color--nonstatus--orangered--200);
+ --pf-t--global--color--nonstatus--purple--clicked: var(--pf-t--global--dark--color--nonstatus--purple--200);
+ --pf-t--global--color--nonstatus--purple--default: var(--pf-t--global--dark--color--nonstatus--purple--100);
+ --pf-t--global--color--nonstatus--purple--hover: var(--pf-t--global--dark--color--nonstatus--purple--200);
+ --pf-t--global--color--nonstatus--red--clicked: var(--pf-t--global--dark--color--nonstatus--red--200);
+ --pf-t--global--color--nonstatus--red--default: var(--pf-t--global--dark--color--nonstatus--red--100);
+ --pf-t--global--color--nonstatus--red--hover: var(--pf-t--global--dark--color--nonstatus--red--200);
+ --pf-t--global--color--nonstatus--teal--clicked: var(--pf-t--global--dark--color--nonstatus--teal--200);
+ --pf-t--global--color--nonstatus--teal--default: var(--pf-t--global--dark--color--nonstatus--teal--100);
+ --pf-t--global--color--nonstatus--teal--hover: var(--pf-t--global--dark--color--nonstatus--teal--200);
+ --pf-t--global--color--nonstatus--yellow--clicked: var(--pf-t--global--dark--color--nonstatus--yellow--200);
+ --pf-t--global--color--nonstatus--yellow--default: var(--pf-t--global--dark--color--nonstatus--yellow--100);
+ --pf-t--global--color--nonstatus--yellow--hover: var(--pf-t--global--dark--color--nonstatus--yellow--200);
+ --pf-t--global--color--status--custom--clicked: var(--pf-t--global--dark--color--status--custom--300);
+ --pf-t--global--color--status--custom--default: var(--pf-t--global--dark--color--status--custom--200);
+ --pf-t--global--color--status--custom--hover: var(--pf-t--global--dark--color--status--custom--300);
+ --pf-t--global--color--status--danger--clicked: var(--pf-t--global--dark--color--status--danger--250);
+ --pf-t--global--color--status--danger--default: var(--pf-t--global--dark--color--status--danger--200);
+ --pf-t--global--color--status--danger--hover: var(--pf-t--global--dark--color--status--danger--250);
+ --pf-t--global--color--status--info--clicked: var(--pf-t--global--dark--color--status--info--200);
+ --pf-t--global--color--status--info--default: var(--pf-t--global--dark--color--status--info--100);
+ --pf-t--global--color--status--info--hover: var(--pf-t--global--dark--color--status--info--200);
+ --pf-t--global--color--status--success--clicked: var(--pf-t--global--dark--color--status--success--300);
+ --pf-t--global--color--status--success--default: var(--pf-t--global--dark--color--status--success--200);
+ --pf-t--global--color--status--success--hover: var(--pf-t--global--dark--color--status--success--300);
+ --pf-t--global--color--status--warning--clicked: var(--pf-t--global--dark--color--status--warning--200);
+ --pf-t--global--color--status--warning--default: var(--pf-t--global--dark--color--status--warning--100);
+ --pf-t--global--color--status--warning--hover: var(--pf-t--global--dark--color--status--warning--200);
+ --pf-t--global--icon--color--brand--clicked: var(--pf-t--global--dark--color--brand--300);
+ --pf-t--global--icon--color--brand--default: var(--pf-t--global--dark--color--brand--200);
+ --pf-t--global--icon--color--brand--hover: var(--pf-t--global--dark--color--brand--300);
+ --pf-t--global--icon--color--disabled: var(--pf-t--global--dark--color--disabled--200);
+ --pf-t--global--icon--color--inverse: var(--pf-t--global--dark--icon--color--300);
+ --pf-t--global--icon--color--on-disabled: var(--pf-t--global--dark--color--disabled--300);
+ --pf-t--global--icon--color--regular: var(--pf-t--global--dark--icon--color--100);
+ --pf-t--global--icon--color--severity--critical--default: var(--pf-t--global--dark--color--severity--critical--200);
+ --pf-t--global--icon--color--severity--important--default: var(--pf-t--global--dark--color--severity--important--100);
+ --pf-t--global--icon--color--severity--minor--default: var(--pf-t--global--dark--color--severity--minor--100);
+ --pf-t--global--icon--color--severity--moderate--default: var(--pf-t--global--dark--color--severity--moderate--100);
+ --pf-t--global--icon--color--severity--none--default: var(--pf-t--global--dark--color--severity--none--100);
+ --pf-t--global--icon--color--severity--undefined--default: var(--pf-t--global--dark--color--severity--undefined--100);
+ --pf-t--global--icon--color--subtle: var(--pf-t--global--dark--icon--color--200);
+ --pf-t--global--text--color--brand--clicked: var(--pf-t--global--dark--color--brand--300);
+ --pf-t--global--text--color--brand--default: var(--pf-t--global--dark--color--brand--200);
+ --pf-t--global--text--color--brand--hover: var(--pf-t--global--dark--color--brand--300);
+ --pf-t--global--text--color--disabled: var(--pf-t--global--dark--color--disabled--200);
+ --pf-t--global--text--color--inverse: var(--pf-t--global--dark--text--color--300);
+ --pf-t--global--text--color--link--default: var(--pf-t--global--dark--text--color--link--100);
+ --pf-t--global--text--color--link--hover: var(--pf-t--global--dark--text--color--link--200);
+ --pf-t--global--text--color--link--visited: var(--pf-t--global--dark--text--color--link--400);
+ --pf-t--global--text--color--on-disabled: var(--pf-t--global--dark--color--disabled--400);
+ --pf-t--global--text--color--on-highlight: var(--pf-t--global--dark--text--color--300);
+ --pf-t--global--text--color--regular: var(--pf-t--global--dark--text--color--100);
+ --pf-t--global--text--color--required: var(--pf-t--global--dark--text--color--400);
+ --pf-t--global--text--color--status--danger--clicked: var(--pf-t--global--dark--color--status--danger--300);
+ --pf-t--global--text--color--status--danger--default: var(--pf-t--global--dark--color--status--danger--300);
+ --pf-t--global--text--color--status--danger--hover: var(--pf-t--global--dark--color--status--danger--300);
+ --pf-t--global--text--color--subtle: var(--pf-t--global--dark--text--color--200);
+ --pf-t--global--border--color--brand--clicked: var(--pf-t--global--color--brand--clicked);
+ --pf-t--global--border--color--brand--default: var(--pf-t--global--color--brand--default);
+ --pf-t--global--border--color--brand--hover: var(--pf-t--global--color--brand--hover);
+ --pf-t--global--border--color--status--custom--clicked: var(--pf-t--global--color--status--custom--clicked);
+ --pf-t--global--border--color--status--custom--default: var(--pf-t--global--color--status--custom--default);
+ --pf-t--global--border--color--status--custom--hover: var(--pf-t--global--color--status--custom--hover);
+ --pf-t--global--border--color--status--danger--clicked: var(--pf-t--global--color--status--danger--clicked);
+ --pf-t--global--border--color--status--danger--default: var(--pf-t--global--color--status--danger--default);
+ --pf-t--global--border--color--status--danger--hover: var(--pf-t--global--color--status--danger--hover);
+ --pf-t--global--border--color--status--info--clicked: var(--pf-t--global--color--status--info--clicked);
+ --pf-t--global--border--color--status--info--default: var(--pf-t--global--color--status--info--default);
+ --pf-t--global--border--color--status--info--hover: var(--pf-t--global--color--status--info--hover);
+ --pf-t--global--border--color--status--success--clicked: var(--pf-t--global--color--status--success--clicked);
+ --pf-t--global--border--color--status--success--default: var(--pf-t--global--color--status--success--default);
+ --pf-t--global--border--color--status--success--hover: var(--pf-t--global--color--status--success--hover);
+ --pf-t--global--border--color--status--warning--clicked: var(--pf-t--global--color--status--warning--clicked);
+ --pf-t--global--border--color--status--warning--default: var(--pf-t--global--color--status--warning--default);
+ --pf-t--global--border--color--status--warning--hover: var(--pf-t--global--color--status--warning--hover);
+ --pf-t--global--color--status--read--on-primary: var(--pf-t--global--background--color--secondary--default);
+ --pf-t--global--color--status--read--on-secondary: var(--pf-t--global--background--color--control--default);
+ --pf-t--global--color--status--unread--attention--clicked: var(--pf-t--global--color--status--danger--clicked);
+ --pf-t--global--color--status--unread--attention--default: var(--pf-t--global--color--status--danger--default);
+ --pf-t--global--color--status--unread--attention--hover: var(--pf-t--global--color--status--danger--hover);
+ --pf-t--global--color--status--unread--clicked: var(--pf-t--global--color--brand--clicked);
+ --pf-t--global--color--status--unread--default: var(--pf-t--global--color--brand--default);
+ --pf-t--global--color--status--unread--hover: var(--pf-t--global--color--brand--hover);
+ --pf-t--global--icon--color--favorite--clicked: var(--pf-t--global--color--favorite--clicked);
+ --pf-t--global--icon--color--favorite--default: var(--pf-t--global--color--favorite--default);
+ --pf-t--global--icon--color--favorite--hover: var(--pf-t--global--color--favorite--hover);
+ --pf-t--global--icon--color--nonstatus--on-blue--clicked: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--nonstatus--on-blue--default: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--nonstatus--on-blue--hover: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--nonstatus--on-gray--clicked: var(--pf-t--global--icon--color--regular);
+ --pf-t--global--icon--color--nonstatus--on-gray--default: var(--pf-t--global--icon--color--regular);
+ --pf-t--global--icon--color--nonstatus--on-gray--hover: var(--pf-t--global--icon--color--regular);
+ --pf-t--global--icon--color--nonstatus--on-green--clicked: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--nonstatus--on-green--default: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--nonstatus--on-green--hover: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--nonstatus--on-orange--clicked: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--nonstatus--on-orange--default: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--nonstatus--on-orange--hover: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--nonstatus--on-orangered--clicked: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--nonstatus--on-orangered--default: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--nonstatus--on-orangered--hover: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--nonstatus--on-purple--clicked: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--nonstatus--on-purple--default: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--nonstatus--on-purple--hover: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--nonstatus--on-red--clicked: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--nonstatus--on-red--default: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--nonstatus--on-red--hover: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--nonstatus--on-teal--clicked: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--nonstatus--on-teal--default: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--nonstatus--on-teal--hover: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--nonstatus--on-yellow--clicked: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--nonstatus--on-yellow--default: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--nonstatus--on-yellow--hover: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--on-brand--clicked: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--on-brand--default: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--on-brand--hover: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--custom--clicked: var(--pf-t--global--color--status--custom--clicked);
+ --pf-t--global--icon--color--status--custom--default: var(--pf-t--global--color--status--custom--default);
+ --pf-t--global--icon--color--status--custom--hover: var(--pf-t--global--color--status--custom--hover);
+ --pf-t--global--icon--color--status--danger--clicked: var(--pf-t--global--color--status--danger--clicked);
+ --pf-t--global--icon--color--status--danger--default: var(--pf-t--global--color--status--danger--default);
+ --pf-t--global--icon--color--status--danger--hover: var(--pf-t--global--color--status--danger--hover);
+ --pf-t--global--icon--color--status--info--clicked: var(--pf-t--global--color--status--info--clicked);
+ --pf-t--global--icon--color--status--info--default: var(--pf-t--global--color--status--info--default);
+ --pf-t--global--icon--color--status--info--hover: var(--pf-t--global--color--status--info--hover);
+ --pf-t--global--icon--color--status--on-custom--clicked: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--on-custom--default: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--on-custom--hover: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--on-danger--clicked: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--on-danger--default: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--on-danger--hover: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--on-info--clicked: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--on-info--default: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--on-info--hover: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--on-success--clicked: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--on-success--default: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--on-success--hover: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--on-warning--clicked: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--on-warning--default: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--on-warning--hover: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--success--clicked: var(--pf-t--global--color--status--success--clicked);
+ --pf-t--global--icon--color--status--success--default: var(--pf-t--global--color--status--success--default);
+ --pf-t--global--icon--color--status--success--hover: var(--pf-t--global--color--status--success--hover);
+ --pf-t--global--icon--color--status--unread--on-attention--clicked: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--unread--on-attention--default: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--unread--on-attention--hover: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--unread--on-default--clicked: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--unread--on-default--default: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--unread--on-default--hover: var(--pf-t--global--icon--color--inverse);
+ --pf-t--global--icon--color--status--warning--clicked: var(--pf-t--global--color--status--warning--clicked);
+ --pf-t--global--icon--color--status--warning--default: var(--pf-t--global--color--status--warning--default);
+ --pf-t--global--icon--color--status--warning--hover: var(--pf-t--global--color--status--warning--hover);
+ --pf-t--global--text--color--nonstatus--on-blue--clicked: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--nonstatus--on-blue--default: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--nonstatus--on-blue--hover: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--nonstatus--on-gray--clicked: var(--pf-t--global--text--color--regular);
+ --pf-t--global--text--color--nonstatus--on-gray--default: var(--pf-t--global--text--color--regular);
+ --pf-t--global--text--color--nonstatus--on-gray--hover: var(--pf-t--global--text--color--regular);
+ --pf-t--global--text--color--nonstatus--on-green--clicked: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--nonstatus--on-green--default: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--nonstatus--on-green--hover: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--nonstatus--on-orange--clicked: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--nonstatus--on-orange--default: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--nonstatus--on-orange--hover: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--nonstatus--on-orangered--clicked: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--nonstatus--on-orangered--default: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--nonstatus--on-orangered--hover: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--nonstatus--on-purple--clicked: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--nonstatus--on-purple--default: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--nonstatus--on-purple--hover: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--nonstatus--on-red--clicked: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--nonstatus--on-red--default: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--nonstatus--on-red--hover: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--nonstatus--on-teal--clicked: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--nonstatus--on-teal--default: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--nonstatus--on-teal--hover: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--nonstatus--on-yellow--clicked: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--nonstatus--on-yellow--default: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--nonstatus--on-yellow--hover: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--on-brand--clicked: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--on-brand--default: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--on-brand--hover: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--placeholder: var(--pf-t--global--text--color--subtle);
+ --pf-t--global--text--color--status--custom--clicked: var(--pf-t--global--color--status--custom--clicked);
+ --pf-t--global--text--color--status--custom--default: var(--pf-t--global--color--status--custom--default);
+ --pf-t--global--text--color--status--custom--hover: var(--pf-t--global--color--status--custom--hover);
+ --pf-t--global--text--color--status--info--clicked: var(--pf-t--global--color--status--info--clicked);
+ --pf-t--global--text--color--status--info--default: var(--pf-t--global--color--status--info--default);
+ --pf-t--global--text--color--status--info--hover: var(--pf-t--global--color--status--info--hover);
+ --pf-t--global--text--color--status--on-custom--clicked: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--status--on-custom--default: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--status--on-custom--hover: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--status--on-danger--clicked: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--status--on-danger--default: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--status--on-danger--hover: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--status--on-info--clicked: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--status--on-info--default: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--status--on-info--hover: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--status--on-success--clicked: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--status--on-success--default: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--status--on-success--hover: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--status--on-warning--clicked: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--status--on-warning--default: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--status--on-warning--hover: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--status--success--clicked: var(--pf-t--global--color--status--success--clicked);
+ --pf-t--global--text--color--status--success--default: var(--pf-t--global--color--status--success--default);
+ --pf-t--global--text--color--status--success--hover: var(--pf-t--global--color--status--success--hover);
+ --pf-t--global--text--color--status--unread--on-attention--clicked: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--status--unread--on-attention--default: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--status--unread--on-attention--hover: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--status--unread--on-default--clicked: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--status--unread--on-default--default: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--status--unread--on-default--hover: var(--pf-t--global--text--color--inverse);
+ --pf-t--global--text--color--status--warning--clicked: var(--pf-t--global--color--status--warning--clicked);
+ --pf-t--global--text--color--status--warning--default: var(--pf-t--global--color--status--warning--default);
+ --pf-t--global--text--color--status--warning--hover: var(--pf-t--global--color--status--warning--hover);
+ }
+}
+:is(.pf-v6-m-dir-rtl, [dir=rtl]) {
+ --pf-v6-global--inverse--multiplier: -1;
+}
+
+.pf-v6-c-about-modal-box {
+ --pf-v6-c-about-modal-box--BackgroundImage: none;
+ --pf-v6-c-about-modal-box--BackgroundColor: var(--pf-t--global--background--color--floating--default);
+ --pf-v6-c-about-modal-box--BackgroundSize--min-width: 200px;
+ --pf-v6-c-about-modal-box--BackgroundSize--width: 60%;
+ --pf-v6-c-about-modal-box--BackgroundSize--max-width: 600px;
+ --pf-v6-c-about-modal-box--BackgroundSize: clamp(var(--pf-v6-c-about-modal-box--BackgroundSize--min-width), var(--pf-v6-c-about-modal-box--BackgroundSize--width), var(--pf-v6-c-about-modal-box--BackgroundSize--max-width));
+ --pf-v6-c-about-modal-box--Height: 100%;
+ --pf-v6-c-about-modal-box--lg--Height: 47.625rem;
+ --pf-v6-c-about-modal-box--Width: 100%;
+ --pf-v6-c-about-modal-box--sm--GridTemplateColumns: 5fr 1fr;
+ --pf-v6-c-about-modal-box--lg--GridTemplateColumns: 1fr .6fr;
+ --pf-v6-c-about-modal-box__brand--PaddingBlockStart: var(--pf-t--global--spacer--2xl);
+ --pf-v6-c-about-modal-box__brand--PaddingInlineEnd: var(--pf-t--global--spacer--xl);
+ --pf-v6-c-about-modal-box__brand--PaddingInlineStart: var(--pf-t--global--spacer--xl);
+ --pf-v6-c-about-modal-box__brand--PaddingBlockEnd: var(--pf-t--global--spacer--xl);
+ --pf-v6-c-about-modal-box__brand--sm--PaddingInlineEnd: var(--pf-t--global--spacer--3xl);
+ --pf-v6-c-about-modal-box__brand--sm--PaddingInlineStart: var(--pf-t--global--spacer--3xl);
+ --pf-v6-c-about-modal-box__brand--sm--PaddingBlockEnd: var(--pf-t--global--spacer--3xl);
+ --pf-v6-c-about-modal-box__close--ZIndex: var(--pf-t--global--z-index--2xl);
+ --pf-v6-c-about-modal-box__close--PaddingBlockStart: var(--pf-t--global--spacer--2xl);
+ --pf-v6-c-about-modal-box__close--PaddingInlineEnd: var(--pf-t--global--spacer--xl);
+ --pf-v6-c-about-modal-box__close--PaddingBlockEnd: var(--pf-t--global--spacer--xl);
+ --pf-v6-c-about-modal-box__close--sm--PaddingBlockEnd: var(--pf-t--global--spacer--3xl);
+ --pf-v6-c-about-modal-box__close--lg--PaddingInlineEnd: var(--pf-t--global--spacer--3xl);
+ --pf-v6-c-about-modal-box__close--c-button--FontSize: var(--pf-t--global--icon--size--lg);
+ --pf-v6-c-about-modal-box__brand-image--Height: 2.3125rem;
+ --pf-v6-c-about-modal-box__header--PaddingInlineEnd: var(--pf-t--global--spacer--xl);
+ --pf-v6-c-about-modal-box__header--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-about-modal-box__header--PaddingInlineStart: var(--pf-t--global--spacer--xl);
+ --pf-v6-c-about-modal-box__header--sm--PaddingInlineEnd: var(--pf-t--global--spacer--3xl);
+ --pf-v6-c-about-modal-box__header--sm--PaddingInlineStart: var(--pf-t--global--spacer--3xl);
+ --pf-v6-c-about-modal-box__strapline--PaddingBlockStart: var(--pf-t--global--spacer--xl);
+ --pf-v6-c-about-modal-box__strapline--FontSize: var(--pf-t--global--font--size--body--sm);
+ --pf-v6-c-about-modal-box__strapline--Color: var(--pf-t--global--text--color--subtle);
+ --pf-v6-c-about-modal-box__strapline--sm--PaddingBlockStart: var(--pf-t--global--spacer--2xl);
+ --pf-v6-c-about-modal-box__content--MarginBlockStart: var(--pf-t--global--spacer--xl);
+ --pf-v6-c-about-modal-box__content--MarginInlineEnd: var(--pf-t--global--spacer--xl);
+ --pf-v6-c-about-modal-box__content--MarginBlockEnd: var(--pf-t--global--spacer--xl);
+ --pf-v6-c-about-modal-box__content--MarginInlineStart: var(--pf-t--global--spacer--xl);
+ --pf-v6-c-about-modal-box__content--sm--MarginBlockStart: var(--pf-t--global--spacer--2xl);
+ --pf-v6-c-about-modal-box__content--sm--MarginInlineEnd: var(--pf-t--global--spacer--3xl);
+ --pf-v6-c-about-modal-box__content--sm--MarginBlockEnd: var(--pf-t--global--spacer--2xl);
+ --pf-v6-c-about-modal-box__content--sm--MarginInlineStart: var(--pf-t--global--spacer--3xl);
+}
+@media screen and (min-width: 36rem) {
+ .pf-v6-c-about-modal-box {
+ --pf-v6-c-about-modal-box__brand--PaddingInlineEnd: var(--pf-v6-c-about-modal-box__brand--sm--PaddingInlineEnd);
+ --pf-v6-c-about-modal-box__brand--PaddingInlineStart: var(--pf-v6-c-about-modal-box__brand--sm--PaddingInlineStart);
+ --pf-v6-c-about-modal-box__brand--PaddingBlockEnd: var(--pf-v6-c-about-modal-box__brand--sm--PaddingBlockEnd);
+ }
+}
+@media only screen and (min-width: 36rem) {
+ .pf-v6-c-about-modal-box {
+ --pf-v6-c-about-modal-box__close--PaddingBlockEnd: var(--pf-v6-c-about-modal-box__close--sm--PaddingBlockEnd);
+ }
+}
+@media only screen and (min-width: 62rem) {
+ .pf-v6-c-about-modal-box {
+ --pf-v6-c-about-modal-box__close--PaddingInlineEnd: var(--pf-v6-c-about-modal-box__close--lg--PaddingInlineEnd);
+ }
+}
+@media only screen and (min-width: 36rem) {
+ .pf-v6-c-about-modal-box {
+ --pf-v6-c-about-modal-box__header--PaddingInlineEnd: var(--pf-v6-c-about-modal-box__header--sm--PaddingInlineEnd);
+ --pf-v6-c-about-modal-box__header--PaddingInlineStart: var(--pf-v6-c-about-modal-box__header--sm--PaddingInlineStart);
+ }
+}
+@media only screen and (min-width: 36rem) {
+ .pf-v6-c-about-modal-box {
+ --pf-v6-c-about-modal-box__strapline--PaddingBlockStart: var(--pf-v6-c-about-modal-box__strapline--sm--PaddingBlockStart);
+ }
+}
+@media only screen and (min-width: 36rem) {
+ .pf-v6-c-about-modal-box {
+ --pf-v6-c-about-modal-box__content--MarginBlockStart: var(--pf-v6-c-about-modal-box__content--sm--MarginBlockStart);
+ --pf-v6-c-about-modal-box__content--MarginInlineEnd: var(--pf-v6-c-about-modal-box__content--sm--MarginInlineEnd);
+ --pf-v6-c-about-modal-box__content--MarginBlockEnd: var(--pf-v6-c-about-modal-box__content--sm--MarginBlockEnd);
+ --pf-v6-c-about-modal-box__content--MarginInlineStart: var(--pf-v6-c-about-modal-box__content--sm--MarginInlineStart);
+ }
+}
+
+.pf-v6-c-about-modal-box {
+ position: relative;
+ display: grid;
+ grid-template-areas: "brand close" "header header" "content content";
+ grid-template-rows: max-content max-content auto;
+ width: var(--pf-v6-c-about-modal-box--Width);
+ height: var(--pf-v6-c-about-modal-box--Height);
+ overflow-x: hidden;
+ overflow-y: auto;
+ background-color: var(--pf-v6-c-about-modal-box--BackgroundColor);
+ background-image: var(--pf-v6-c-about-modal-box--BackgroundImage);
+ background-repeat: no-repeat;
+ background-position: var(--pf-v6-c-about-modal-box--BackgroundPosition);
+ background-size: var(--pf-v6-c-about-modal-box--BackgroundSize);
+ --pf-v6-c-about-modal-box--BackgroundPosition: bottom right;
+}
+@media only screen and (min-width: 36rem) {
+ .pf-v6-c-about-modal-box {
+ grid-template-areas: "brand close" "header close" "content close";
+ grid-template-columns: var(--pf-v6-c-about-modal-box--sm--GridTemplateColumns);
+ }
+}
+@media only screen and (min-width: 62rem) {
+ .pf-v6-c-about-modal-box {
+ --pf-v6-c-about-modal-box--Height: var(--pf-v6-c-about-modal-box--lg--Height);
+ --pf-v6-c-about-modal-box--Width: var(--pf-v6-c-about-modal-box--lg--Width);
+ grid-template-rows: max-content max-content auto;
+ grid-template-columns: var(--pf-v6-c-about-modal-box--lg--GridTemplateColumns);
+ }
+}
+:where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-about-modal-box {
+ --pf-v6-c-about-modal-box--BackgroundPosition: bottom left;
+}
+
+.pf-v6-c-about-modal-box__brand {
+ display: flex;
+ grid-area: brand;
+ padding-block-start: var(--pf-v6-c-about-modal-box__brand--PaddingBlockStart);
+ padding-block-end: var(--pf-v6-c-about-modal-box__brand--PaddingBlockEnd);
+ padding-inline-start: var(--pf-v6-c-about-modal-box__brand--PaddingInlineStart);
+ padding-inline-end: var(--pf-v6-c-about-modal-box__brand--PaddingInlineEnd);
+}
+
+.pf-v6-c-about-modal-box__brand-image {
+ height: var(--pf-v6-c-about-modal-box__brand-image--Height);
+}
+
+.pf-v6-c-about-modal-box__header {
+ display: flex;
+ flex-direction: column;
+ grid-area: header;
+ padding-block-end: var(--pf-v6-c-about-modal-box__header--PaddingBlockEnd);
+ padding-inline-start: var(--pf-v6-c-about-modal-box__header--PaddingInlineStart);
+ padding-inline-end: var(--pf-v6-c-about-modal-box__header--PaddingInlineEnd);
+}
+
+.pf-v6-c-about-modal-box__strapline {
+ padding-block-start: var(--pf-v6-c-about-modal-box__strapline--PaddingBlockStart);
+ margin-block-start: auto;
+ font-size: var(--pf-v6-c-about-modal-box__strapline--FontSize);
+ color: var(--pf-v6-c-about-modal-box__strapline--Color);
+}
+
+.pf-v6-c-about-modal-box__content {
+ display: flex;
+ flex-direction: column;
+ grid-area: content;
+ margin-block-start: var(--pf-v6-c-about-modal-box__content--MarginBlockStart);
+ margin-block-end: var(--pf-v6-c-about-modal-box__content--MarginBlockEnd);
+ margin-inline-start: var(--pf-v6-c-about-modal-box__content--MarginInlineStart);
+ margin-inline-end: var(--pf-v6-c-about-modal-box__content--MarginInlineEnd);
+ overflow-x: hidden;
+ overflow-y: auto;
+ overscroll-behavior: contain;
+ word-break: break-word;
+ -webkit-overflow-scrolling: touch;
+}
+@media screen and (min-width: 36rem) {
+ .pf-v6-c-about-modal-box__content {
+ overflow: visible;
+ overscroll-behavior: auto;
+ }
+}
+
+.pf-v6-c-about-modal-box__close {
+ position: sticky;
+ inset-block-start: 0;
+ display: flex;
+ grid-area: close;
+ align-items: flex-start;
+ justify-content: flex-end;
+ padding-block-start: var(--pf-v6-c-about-modal-box__close--PaddingBlockStart);
+ padding-block-end: var(--pf-v6-c-about-modal-box__close--PaddingBlockEnd);
+ padding-inline-end: var(--pf-v6-c-about-modal-box__close--PaddingInlineEnd);
+}
+@media only screen and (min-width: 36rem) {
+ .pf-v6-c-about-modal-box__close {
+ grid-area: 1/2;
+ justify-content: center;
+ }
+}
+@media only screen and (min-width: 62rem) {
+ .pf-v6-c-about-modal-box__close {
+ justify-content: flex-end;
+ }
+}
+.pf-v6-c-about-modal-box__close .pf-v6-c-button.pf-m-plain {
+ font-size: var(--pf-v6-c-about-modal-box__close--c-button--FontSize);
+}
+
+.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__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--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--m-expanded__toggle-icon--Rotate: 90deg;
+ --pf-v6-c-accordion__expandable-content--MarginInlineEnd: var(--pf-t--global--spacer--md);
+ --pf-v6-c-accordion__expandable-content--MarginBlockEnd: var(--pf-t--global--spacer--md);
+ --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: 9.375rem;
+ --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;
+ --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);
+}
+@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 {
+ display: flex;
+ flex-direction: column;
+ row-gap: var(--pf-v6-c-accordion--RowGap);
+ background-color: var(--pf-v6-c-accordion--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.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-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__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__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__item.pf-m-expanded .pf-v6-c-accordion__toggle-icon {
+ transform: rotate(var(--pf-v6-c-accordion__toggle--m-expanded__toggle-icon--Rotate));
+}
+
+.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:is(:hover, :focus) {
+ --pf-v6-c-accordion__toggle--BackgroundColor: var(--pf-v6-c-accordion__toggle--hover--BackgroundColor);
+}
+
+.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);
+}
+
+.pf-v6-c-accordion__toggle-icon {
+ transition: var(--pf-v6-c-accordion__toggle-icon--Transition);
+}
+:where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-accordion__toggle-icon {
+ scale: -1 1;
+}
+
+.pf-v6-c-accordion__expandable-content:where([hidden]) {
+ display: revert;
+}
+
+.pf-v6-c-accordion__expandable-content {
+ max-height: 0;
+ margin-inline-start: var(--pf-v6-c-accordion__expandable-content--MarginInlineStart);
+ margin-inline-end: var(--pf-v6-c-accordion__expandable-content--MarginInlineEnd);
+ font-size: var(--pf-v6-c-accordion__expandable-content--FontSize);
+ color: var(--pf-v6-c-accordion__expandable-content--Color);
+ visibility: hidden;
+ background-color: var(--pf-v6-c-accordion__expandable-content--BackgroundColor);
+ border-radius: var(--pf-v6-c-accordion__expandable-content--BorderRadius);
+ opacity: var(--pf-v6-c-accordion__expandable-content--Opacity);
+ 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;
+ translate: 0 var(--pf-v6-c-accordion__expandable-content--TranslateY);
+}
+.pf-v6-c-accordion__expandable-content.pf-m-fixed {
+ overflow-y: auto;
+}
+.pf-v6-c-accordion__item.pf-m-expanded .pf-v6-c-accordion__expandable-content {
+ max-height: 99999px;
+ margin-block-end: var(--pf-v6-c-accordion__expandable-content--MarginBlockEnd);
+ visibility: revert;
+ transition-delay: 0s;
+}
+.pf-v6-c-accordion__item.pf-m-expanded .pf-v6-c-accordion__expandable-content.pf-m-fixed {
+ max-height: var(--pf-v6-c-accordion__expandable-content--m-fixed--MaxHeight);
+}
+
+.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);
+}
+
+.pf-v6-c-action-list {
+ --pf-v6-c-action-list--RowGap: var(--pf-t--global--spacer--gap--group--vertical);
+ --pf-v6-c-action-list--ColumnGap: var(--pf-t--global--spacer--gap--group-to-group--horizontal--default);
+ --pf-v6-c-action-list__group--ColumnGap: var(--pf-t--global--spacer--gap--action-to-action--default);
+ --pf-v6-c-action-list--m-icons--ColumnGap: var(--pf-t--global--spacer--gap--action-to-action--plain);
+}
+
+.pf-v6-c-action-list,
+.pf-v6-c-action-list__group {
+ display: flex;
+ align-items: start;
+}
+
+.pf-v6-c-action-list {
+ row-gap: var(--pf-v6-c-action-list--RowGap);
+ column-gap: var(--pf-v6-c-action-list--ColumnGap);
+}
+.pf-v6-c-action-list.pf-m-icons {
+ --pf-v6-c-action-list__group--ColumnGap: var(--pf-v6-c-action-list--m-icons--ColumnGap);
+ column-gap: var(--pf-v6-c-action-list--m-icons--ColumnGap);
+}
+
+.pf-v6-c-action-list__group {
+ row-gap: var(--pf-v6-c-action-list__group--RowGap, var(--pf-v6-c-action-list--RowGap));
+ column-gap: var(--pf-v6-c-action-list__group--ColumnGap);
+}
+.pf-v6-c-action-list__group.pf-m-icons {
+ column-gap: var(--pf-v6-c-action-list--m-icons--ColumnGap);
+}
+
+.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: 90deg;
+ --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);
+}
+
+.pf-v6-c-alert__toggle-icon {
+ display: inline-block;
+ transition: transform var(--pf-v6-c-alert__toggle-icon--TransitionDuration) var(--pf-v6-c-alert__toggle-icon--TransitionTimingFunction);
+ transform: rotate(var(--pf-v6-c-alert__toggle-icon--Rotate));
+}
+:where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-alert__toggle-icon {
+ scale: -1 1;
+}
+
+.pf-v6-c-alert__icon {
+ grid-area: icon;
+ 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);
+}
+
+.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);
+ word-break: break-word;
+}
+.pf-v6-c-alert__title.pf-m-truncate {
+ display: -webkit-box;
+ -webkit-box-orient: vertical;
+ -webkit-line-clamp: var(--pf-v6-c-alert__title--max-lines);
+ overflow: hidden;
+}
+
+.pf-v6-c-alert__description {
+ grid-area: description;
+ padding-block-start: var(--pf-v6-c-alert__description--PaddingBlockStart);
+ word-break: 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);
+}
+
+.pf-v6-c-alert-group {
+ --pf-v6-c-alert-group__item--MarginBlockStart: var(--pf-t--global--spacer--gap--group--vertical);
+ --pf-v6-c-alert-group--m-toast--InsetBlockStart: var(--pf-t--global--spacer--2xl);
+ --pf-v6-c-alert-group--m-toast--InsetInlineEnd: var(--pf-t--global--spacer--xl);
+ --pf-v6-c-alert-group--m-toast--MaxWidth: 37.5rem;
+ --pf-v6-c-alert-group--m-toast--ZIndex: var(--pf-t--global--z-index--2xl);
+ --pf-v6-c-alert-group--m-toast__item--TransitionDuration--opacity--default: var(--pf-t--global--motion--duration--fade--default);
+ --pf-v6-c-alert-group--m-toast__item--TransitionTimingFunction--opacity--default: var(--pf-t--global--motion--timing-function--decelerate);
+ --pf-v6-c-alert-group--m-toast__item--Transition--opacity--default: var(--pf-v6-c-alert-group--m-toast__item--TransitionDuration--opacity--default)
+ var(--pf-v6-c-alert-group--m-toast__item--TransitionTimingFunction--opacity--default)
+ 0s;
+ --pf-v6-c-alert-group--m-toast__item--TransitionDuration--opacity: var(--pf-t--global--motion--duration--fade--default);
+ --pf-v6-c-alert-group--m-toast__item--TransitionTimingFunction--opacity: var(--pf-t--global--motion--timing-function--decelerate);
+ --pf-v6-c-alert-group--m-toast__item--TransitionDelay--opacity: var(--pf-t--global--motion--delay--none);
+ --pf-v6-c-alert-group--m-toast__item--TransitionDuration--transform: var(--pf-t--global--motion--duration--slide-in--default);
+ --pf-v6-c-alert-group--m-toast__item--TransitionTimingFunction--transform: var(--pf-t--global--motion--timing-function--decelerate);
+ --pf-v6-c-alert-group--m-toast__item--TransitionDelay--transform: var(--pf-t--global--motion--delay--none);
+ --pf-v6-c-alert-group--m-toast__item--TransitionDuration--grid-template-rows: var(--pf-t--global--motion--duration--slide-in--default);
+ --pf-v6-c-alert-group--m-toast__item--TransitionTimingFunction--grid-template-rows: var(--pf-t--global--motion--timing-function--decelerate);
+ --pf-v6-c-alert-group--m-toast__item--TransitionDuration--margin-block: var(--pf-t--global--motion--duration--slide-in--default);
+ --pf-v6-c-alert-group--m-toast__item--TransitionTimingFunction--margin-block: var(--pf-t--global--motion--timing-function--decelerate);
+ --pf-v6-c-alert-group--m-toast__item--c-alert--TransitionDuration: var(--pf-t--global--motion--duration--slide-in--default);
+ --pf-v6-c-alert-group--m-toast__item--c-alert--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate);
+ --pf-v6-c-alert-group--m-toast__item--c-alert--Transition: all
+ var(--pf-v6-c-alert-group--m-toast__item--c-alert--TransitionDuration)
+ var(--pf-v6-c-alert-group--m-toast__item--c-alert--TransitionTimingFunction)
+ 0s;
+ --pf-v6-c-alert-group--m-toast__item--m-outgoing--TransitionDuration--opacity--default: var(--pf-t--global--motion--duration--fade--default);
+ --pf-v6-c-alert-group--m-toast__item--m-outgoing--TransitionTimingFunction--opacity--default: var(--pf-t--global--motion--timing-function--accelerate);
+ --pf-v6-c-alert-group--m-toast__item--m-outgoing--TransitionDelay--grid-template-rows--default: var(--pf-t--global--motion--duration--fade--default);
+ --pf-v6-c-alert-group--m-toast__item--m-outgoing--TransitionDelay--margin-block--default: var(--pf-t--global--motion--duration--fade--default);
+ --pf-v6-c-alert-group--m-toast__item--m-outgoing--c-alert--TransitionDelay--default: var(--pf-t--global--motion--duration--fade--default);
+ --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDuration--opacity--default: initial;
+ --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionTimingFunction--opacity--default: initial;
+ --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDelay--grid-template-rows--default: initial;
+ --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDelay--margin-block--default: initial;
+ --pf-v6-c-alert-group--m-toast__item--m-offstage-right--c-alert--TransitionDelay--default: initial;
+ --pf-v6-c-alert-group--m-toast__item--m-outgoing--TransitionDuration--transform: var(--pf-t--global--motion--duration--slide-out--short);
+ --pf-v6-c-alert-group--m-toast__item--m-outgoing--TransitionTimingFunction--transform: var(--pf-t--global--motion--timing-function--accelerate);
+ --pf-v6-c-alert-group--m-toast__item--m-outgoing--TransitionDuration--opacity: var(--pf-t--global--motion--duration--slide-out--short);
+ --pf-v6-c-alert-group--m-toast__item--m-outgoing--TransitionTimingFunction--opacity: var(--pf-t--global--motion--timing-function--accelerate);
+ --pf-v6-c-alert-group--m-toast__item--m-outgoing--TransitionDuration--margin-block: var(--pf-t--global--motion--duration--fade--short);
+ --pf-v6-c-alert-group--m-toast__item--m-outgoing--TransitionTimingFunction--margin-block: var(--pf-t--global--motion--timing-function--accelerate);
+ --pf-v6-c-alert-group--m-toast__item--m-outgoing--TransitionDelay--margin-block: var(--pf-t--global--motion--duration--slide-out--short);
+ --pf-v6-c-alert-group--m-toast__item--m-outgoing--TransitionDuration--grid-template-rows: var(--pf-t--global--motion--duration--slide-in--short);
+ --pf-v6-c-alert-group--m-toast__item--m-outgoing--TransitionTimingFunction--grid-template-rows: var(--pf-t--global--motion--timing-function--accelerate);
+ --pf-v6-c-alert-group--m-toast__item--m-outgoing--TransitionDelay--grid-template-rows: var(--pf-t--global--motion--duration--slide-out--short);
+ --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDuration--transform: initial;
+ --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionTimingFunction--transform: initial;
+ --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDuration--opacity: initial;
+ --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionTimingFunction--opacity: initial;
+ --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDuration--margin-block: initial;
+ --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionTimingFunction--margin-block: initial;
+ --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDelay--margin-block: initial;
+ --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDuration--grid-template-rows: initial;
+ --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionTimingFunction--grid-template-rows: initial;
+ --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDelay--grid-template-rows: initial;
+ --pf-v6-c-alert-group--m-toast__item--m-outgoing--c-alert--TransitionDuration: var(--pf-t--global--motion--duration--slide-out--short);
+ --pf-v6-c-alert-group--m-toast__item--m-outgoing--c-alert--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--accelerate);
+ --pf-v6-c-alert-group--m-toast__item--m-outgoing--c-alert--Transition: all
+ var(--pf-v6-c-alert-group--m-toast__item--m-outgoing--c-alert--TransitionDuration)
+ var(--pf-v6-c-alert-group--m-toast__item--m-outgoing--c-alert--TransitionTimingFunction)
+ var(--pf-v6-c-alert-group--m-toast__item--m-outgoing--c-alert--TransitionDuration);
+ --pf-v6-c-alert-group--m-toast__item--m-offstage-right--c-alert--TransitionDuration: initial;
+ --pf-v6-c-alert-group--m-toast__item--m-offstage-right--c-alert--TransitionTimingFunction: initial;
+ --pf-v6-c-alert-group--m-toast__item--m-offstage-right--c-alert--Transition: initial;
+ --pf-v6-c-alert-group__overflow-button--BorderWidth: 0;
+ --pf-v6-c-alert-group__overflow-button--BorderRadius: var(--pf-t--global--border--radius--medium);
+ --pf-v6-c-alert-group__overflow-button--PaddingBlockStart: var(--pf-t--global--spacer--md);
+ --pf-v6-c-alert-group__overflow-button--PaddingInlineEnd: var(--pf-t--global--spacer--md);
+ --pf-v6-c-alert-group__overflow-button--PaddingBlockEnd: var(--pf-t--global--spacer--md);
+ --pf-v6-c-alert-group__overflow-button--PaddingInlineStart: var(--pf-t--global--spacer--md);
+ --pf-v6-c-alert-group__overflow-button--Color: var(--pf-t--global--text--color--link--default);
+ --pf-v6-c-alert-group__overflow-button--BoxShadow: var(--pf-t--global--box-shadow--lg);
+ --pf-v6-c-alert-group__overflow-button--BackgroundColor: var(--pf-t--global--background--color--floating--default);
+ --pf-v6-c-alert-group__overflow-button--hover--Color: var(--pf-t--global--text--color--link--hover);
+ --pf-v6-c-alert-group__overflow-button--hover--BackgroundColor: var(--pf-t--global--background--color--floating--hover);
+ --pf-v6-c-alert-group__overflow-button--hover--BoxShadow: var(--pf-t--global--box-shadow--lg), var(--pf-t--global--box-shadow--lg--bottom);
+ --pf-v6-c-alert-group__overflow-button--focus--Color: var(--pf-t--global--text--color--link--hover);
+ --pf-v6-c-alert-group__overflow-button--focus--BoxShadow: var(--pf-t--global--box-shadow--lg), var(--pf-t--global--box-shadow--lg--bottom);
+ --pf-v6-c-alert-group__overflow-button--active--Color: var(--pf-t--global--text--color--link--hover);
+ --pf-v6-c-alert-group__overflow-button--active--BoxShadow: var(--pf-t--global--box-shadow--lg), var(--pf-t--global--box-shadow--lg--bottom);
+}
+
+.pf-v6-c-alert-group > * + * {
+ margin-block-start: var(--pf-v6-c-alert-group__item--MarginBlockStart);
+}
+.pf-v6-c-alert-group.pf-m-toast {
+ position: fixed;
+ inset-block-start: var(--pf-v6-c-alert-group--m-toast--InsetBlockStart);
+ inset-inline-end: var(--pf-v6-c-alert-group--m-toast--InsetInlineEnd);
+ z-index: var(--pf-v6-c-alert-group--m-toast--ZIndex);
+ width: calc(100% - var(--pf-v6-c-alert-group--m-toast--InsetInlineEnd) * 2);
+ max-width: var(--pf-v6-c-alert-group--m-toast--MaxWidth);
+}
+
+.pf-v6-c-alert-group__overflow-button {
+ position: relative;
+ width: 100%;
+ padding-block-start: var(--pf-v6-c-alert-group__overflow-button--PaddingBlockStart);
+ padding-block-end: var(--pf-v6-c-alert-group__overflow-button--PaddingBlockEnd);
+ padding-inline-start: var(--pf-v6-c-alert-group__overflow-button--PaddingInlineStart);
+ padding-inline-end: var(--pf-v6-c-alert-group__overflow-button--PaddingInlineEnd);
+ color: var(--pf-v6-c-alert-group__overflow-button--Color);
+ background-color: var(--pf-v6-c-alert-group__overflow-button--BackgroundColor);
+ border-width: var(--pf-v6-c-alert-group__overflow-button--BorderWidth);
+ border-radius: var(--pf-v6-c-alert-group__overflow-button--BorderRadius);
+ box-shadow: var(--pf-v6-c-alert-group__overflow-button--BoxShadow);
+}
+
+.pf-v6-c-alert-group__item {
+ display: grid;
+ grid-template-rows: 1fr;
+ opacity: 1;
+ transition: opacity var(--pf-v6-c-alert-group--m-toast__item--Transition--opacity--default);
+ transform: translateX(0) translateY(0);
+}
+@media screen and (prefers-reduced-motion: no-preference) {
+ .pf-v6-c-alert-group__item {
+ transition: opacity var(--pf-v6-c-alert-group--m-toast__item--TransitionDuration--opacity) var(--pf-v6-c-alert-group--m-toast__item--TransitionTimingFunction--opacity) var(--pf-v6-c-alert-group--m-toast__item--TransitionDelay--opacity), transform var(--pf-v6-c-alert-group--m-toast__item--TransitionDuration--transform) var(--pf-v6-c-alert-group--m-toast__item--TransitionTimingFunction--transform) var(--pf-v6-c-alert-group--m-toast__item--TransitionDelay--transform), grid-template-rows var(--pf-v6-c-alert-group--m-toast__item--TransitionDuration--grid-template-rows) var(--pf-v6-c-alert-group--m-toast__item--TransitionTimingFunction--grid-template-rows), margin-block var(--pf-v6-c-alert-group--m-toast__item--TransitionDuration--margin-block) var(--pf-v6-c-alert-group--m-toast__item--TransitionTimingFunction--margin-block);
+ }
+ .pf-v6-c-alert-group__item .pf-v6-c-alert {
+ transition: var(--pf-v6-c-alert-group--m-toast__item--c-alert--Transition);
+ }
+}
+.pf-v6-c-alert-group__item.pf-m-offstage-top:first-child, .pf-v6-c-alert-group__item.pf-m-incoming:first-child {
+ grid-template-rows: 0fr;
+ margin-block: 0;
+ overflow: hidden;
+ opacity: 0;
+ transform: translateY(-100%);
+}
+.pf-v6-c-alert-group__item.pf-m-offstage-top:first-child .pf-v6-c-alert, .pf-v6-c-alert-group__item.pf-m-incoming:first-child .pf-v6-c-alert {
+ min-height: 0;
+ padding-block-start: 0;
+ padding-block-end: 0;
+ border-width: 0;
+}
+.pf-v6-c-alert-group__item.pf-m-offstage-right, .pf-v6-c-alert-group__item.pf-m-outgoing {
+ grid-template-rows: 0fr;
+ margin-block: 0;
+ overflow: hidden;
+ opacity: 0;
+ transition: grid-template-rows 0s var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDelay--grid-template-rows--default, var(--pf-v6-c-alert-group--m-toast__item--m-outgoing--TransitionDelay--grid-template-rows--default)), margin-block 0s var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDelay--margin-block--default, var(--pf-v6-c-alert-group--m-toast__item--m-outgoing--TransitionDelay--margin-block--default)), opacity var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDuration--opacity--default, var(--pf-v6-c-alert-group--m-toast__item--m-outgoing--TransitionDuration--opacity--default)) var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionTimingFunction--opacity--default, var(--pf-v6-c-alert-group--m-toast__item--m-outgoing--TransitionTimingFunction--opacity--default));
+}
+.pf-v6-c-alert-group__item.pf-m-offstage-right .pf-v6-c-alert, .pf-v6-c-alert-group__item.pf-m-outgoing .pf-v6-c-alert {
+ min-height: 0;
+ padding-block-start: 0;
+ padding-block-end: 0;
+ border-width: 0;
+ transition: all 0s var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--c-alert--TransitionDelay--default, var(--pf-v6-c-alert-group--m-toast__item--m-outgoing--c-alert--TransitionDelay--default));
+}
+@media screen and (prefers-reduced-motion: no-preference) {
+ .pf-v6-c-alert-group__item.pf-m-offstage-right, .pf-v6-c-alert-group__item.pf-m-outgoing {
+ transition: transform var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDuration--transform, var(--pf-v6-c-alert-group--m-toast__item--m-outgoing--TransitionDuration--transform)) var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionTimingFunction--transform, var(--pf-v6-c-alert-group--m-toast__item--m-outgoing--TransitionTimingFunction--transform)), opacity var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDuration--opacity, var(--pf-v6-c-alert-group--m-toast__item--m-outgoing--TransitionDuration--opacity)) var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionTimingFunction--opacity, var(--pf-v6-c-alert-group--m-toast__item--m-outgoing--TransitionTimingFunction--opacity)), margin-block var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDuration--margin-block, var(--pf-v6-c-alert-group--m-toast__item--m-outgoing--TransitionDuration--margin-block)) var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionTimingFunction--margin-block, var(--pf-v6-c-alert-group--m-toast__item--m-outgoing--TransitionTimingFunction--margin-block)) var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDelay--margin-block, var(--pf-v6-c-alert-group--m-toast__item--m-outgoing--TransitionDelay--margin-block)), grid-template-rows var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDuration--grid-template-rows, var(--pf-v6-c-alert-group--m-toast__item--m-outgoing--TransitionDuration--grid-template-rows)) var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionTimingFunction--grid-template-rows, var(--pf-v6-c-alert-group--m-toast__item--m-outgoing--TransitionTimingFunction--grid-template-rows)) var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDelay--grid-template-rows, var(--pf-v6-c-alert-group--m-toast__item--m-outgoing--TransitionDelay--grid-template-rows));
+ transform: translateX(100%);
+ }
+ :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-alert-group__item.pf-m-offstage-right, .pf-v6-c-alert-group__item.pf-m-outgoing {
+ transform: translateX(calc(100% * var(--pf-v6-global--inverse--multiplier)));
+ }
+ .pf-v6-c-alert-group__item.pf-m-offstage-right .pf-v6-c-alert, .pf-v6-c-alert-group__item.pf-m-outgoing .pf-v6-c-alert {
+ transition: var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--c-alert--Transition, var(--pf-v6-c-alert-group--m-toast__item--m-outgoing--c-alert--Transition));
+ }
+}
+.pf-v6-c-alert-group__item:hover {
+ --pf-v6-c-alert-group__overflow-button--Color: var(--pf-v6-c-alert-group__overflow-button--hover--Color);
+ --pf-v6-c-alert-group__overflow-button--BackgroundColor: var(--pf-v6-c-alert-group__overflow-button--hover--BackgroundColor);
+ --pf-v6-c-alert-group__overflow-button--BoxShadow: var(--pf-v6-c-alert-group__overflow-button--hover--BoxShadow);
+}
+.pf-v6-c-alert-group__item:focus {
+ --pf-v6-c-alert-group__overflow-button--Color: var(--pf-v6-c-alert-group__overflow-button--focus--Color);
+ --pf-v6-c-alert-group__overflow-button--BoxShadow: var(--pf-v6-c-alert-group__overflow-button--focus--BoxShadow);
+}
+.pf-v6-c-alert-group__item:active {
+ --pf-v6-c-alert-group__overflow-button--Color: var(--pf-v6-c-alert-group__overflow-button--active--Color);
+ --pf-v6-c-alert-group__overflow-button--BoxShadow: var(--pf-v6-c-alert-group__overflow-button--active--BoxShadow);
+}
+
+.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--m-sm--Width: 1.5rem;
+ --pf-v6-c-avatar--m-sm--Height: 1.5rem;
+ --pf-v6-c-avatar--m-md--Width: 2.25rem;
+ --pf-v6-c-avatar--m-md--Height: 2.25rem;
+ --pf-v6-c-avatar--m-lg--Width: 4.5rem;
+ --pf-v6-c-avatar--m-lg--Height: 4.5rem;
+ --pf-v6-c-avatar--m-xl--Width: 8rem;
+ --pf-v6-c-avatar--m-xl--Height: 8rem;
+ --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 {
+ width: var(--pf-v6-c-avatar--Width);
+ height: var(--pf-v6-c-avatar--Height);
+ border: var(--pf-v6-c-avatar--BorderWidth) solid var(--pf-v6-c-avatar--BorderColor);
+ border-radius: var(--pf-v6-c-avatar--BorderRadius);
+}
+.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);
+ --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--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))))));
+ }
+}
+@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);
+ --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--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))))));
+ }
+}
+@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);
+ --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--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))))));
+ }
+}
+@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);
+ --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--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))))));
+ }
+}
+@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-backdrop {
+ --pf-v6-c-backdrop--Position: fixed;
+ --pf-v6-c-backdrop--ZIndex: var(--pf-t--global--z-index--lg);
+ --pf-v6-c-backdrop--BackgroundColor: var(--pf-t--global--background--color--backdrop--default);
+}
+
+.pf-v6-c-backdrop {
+ position: var(--pf-v6-c-backdrop--Position);
+ inset-block-start: 0;
+ inset-inline-start: 0;
+ z-index: var(--pf-v6-c-backdrop--ZIndex);
+ width: 100%;
+ height: 100%;
+ background-color: var(--pf-v6-c-backdrop--BackgroundColor);
+}
+
+.pf-v6-c-backdrop__open {
+ overflow: hidden;
+}
+
+.pf-v6-c-background-image {
+ --pf-v6-c-background-image--BackgroundColor: var(--pf-t--global--background--color--primary--default);
+ --pf-v6-c-background-image--BackgroundImage: none;
+ --pf-v6-c-background-image--BackgroundSize--min-width: 200px;
+ --pf-v6-c-background-image--BackgroundSize--width: 60%;
+ --pf-v6-c-background-image--BackgroundSize--max-width: 600px;
+ --pf-v6-c-background-image--BackgroundSize: clamp(var(--pf-v6-c-background-image--BackgroundSize--min-width), var(--pf-v6-c-background-image--BackgroundSize--width), var(--pf-v6-c-background-image--BackgroundSize--max-width));
+}
+
+.pf-v6-c-background-image {
+ --pf-v6-c-background-image--BackgroundPosition: bottom right;
+ position: fixed;
+ inset-block-start: 0;
+ inset-inline-start: 0;
+ z-index: -1;
+ width: 100%;
+ height: 100%;
+ background-color: var(--pf-v6-c-background-image--BackgroundColor);
+ background-image: var(--pf-v6-c-background-image--BackgroundImage);
+ background-repeat: no-repeat;
+ background-position: var(--pf-v6-c-background-image--BackgroundPosition);
+ background-size: var(--pf-v6-c-background-image--BackgroundSize);
+}
+:where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-background-image {
+ --pf-v6-c-background-image--BackgroundPosition: bottom left;
+}
+
+.pf-v6-c-back-to-top {
+ --pf-v6-c-back-to-top--InsetInlineEnd: var(--pf-t--global--spacer--2xl);
+ --pf-v6-c-back-to-top--InsetBlockEnd: var(--pf-t--global--spacer--lg);
+ --pf-v6-c-back-to-top--md--InsetBlockEnd: var(--pf-t--global--spacer--2xl);
+ --pf-v6-c-back-to-top--c-button--FontSize: var(--pf-t--global--font--size--body--sm);
+ --pf-v6-c-back-to-top--c-button--PaddingBlockStart: var(--pf-t--global--spacer--xs);
+ --pf-v6-c-back-to-top--c-button--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-back-to-top--c-button--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
+ --pf-v6-c-back-to-top--c-button--PaddingInlineStart: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-back-to-top--c-button--BoxShadow: var(--pf-t--global--box-shadow--sm);
+}
+@media (min-width: 48rem) {
+ .pf-v6-c-back-to-top {
+ --pf-v6-c-back-to-top--InsetBlockEnd: var(--pf-v6-c-back-to-top--md--InsetBlockEnd);
+ }
+}
+
+.pf-v6-c-back-to-top {
+ position: absolute;
+ inset-block-end: var(--pf-v6-c-back-to-top--InsetBlockEnd);
+ inset-inline-end: var(--pf-v6-c-back-to-top--InsetInlineEnd);
+}
+.pf-v6-c-back-to-top.pf-m-hidden {
+ display: none;
+}
+.pf-v6-c-back-to-top .pf-v6-c-button {
+ --pf-v6-c-button--FontSize: var(--pf-v6-c-back-to-top--c-button--FontSize);
+ --pf-v6-c-button--PaddingBlockStart: var(--pf-v6-c-back-to-top--c-button--PaddingBlockStart);
+ --pf-v6-c-button--PaddingInlineEnd: var(--pf-v6-c-back-to-top--c-button--PaddingInlineEnd);
+ --pf-v6-c-button--PaddingBlockEnd: var(--pf-v6-c-back-to-top--c-button--PaddingBlockEnd);
+ --pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-back-to-top--c-button--PaddingInlineStart);
+ box-shadow: var(--pf-v6-c-back-to-top--c-button--BoxShadow);
+}
+
+.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__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--Color: var(--pf-v6-c-badge--m-read--Color);
+ --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-read--BackgroundColor);
+ --pf-v6-c-badge__toggle-icon--Color: var(--pf-v6-c-badge--m-read__toggle-icon--Color);
+}
+.pf-v6-c-badge.pf-m-unread {
+ --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-unread--Color);
+ --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-unread--BackgroundColor);
+ --pf-v6-c-badge__toggle-icon--Color: var(--pf-v6-c-badge--m-unread__toggle-icon--Color);
+}
+.pf-v6-c-badge.pf-m-disabled {
+ --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-disabled--Color);
+ --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-disabled--BackgroundColor);
+}
+.pf-v6-c-badge.pf-m-disabled::after {
+ border-color: var(--pf-v6-c-badge--m-disabled--BorderColor);
+}
+
+.pf-v6-c-badge__toggle-icon {
+ margin-inline-start: var(--pf-v6-c-badge__toggle-icon--MarginInlineStart);
+ color: var(--pf-v6-c-badge__toggle-icon--Color);
+}
+
+.pf-v6-c-banner {
+ --pf-v6-c-banner--PaddingBlockStart: var(--pf-t--global--spacer--xs);
+ --pf-v6-c-banner--PaddingInlineEnd: var(--pf-t--global--spacer--md);
+ --pf-v6-c-banner--md--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
+ --pf-v6-c-banner--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
+ --pf-v6-c-banner--PaddingInlineStart: var(--pf-t--global--spacer--md);
+ --pf-v6-c-banner--md--PaddingInlineStart: var(--pf-t--global--spacer--lg);
+ --pf-v6-c-banner--FontSize: var(--pf-t--global--font--size--body--default);
+ --pf-v6-c-banner--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
+ --pf-v6-c-banner--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
+ --pf-v6-c-banner--link--Color: var(--pf-v6-c-banner--Color);
+ --pf-v6-c-banner--link--TextDecoration: underline;
+ --pf-v6-c-banner--link--hover--Color: var(--pf-v6-c-banner--Color);
+ --pf-v6-c-banner--link--disabled--Color: var(--pf-t--global--text--color--disabled);
+ --pf-v6-c-banner--m-sticky--ZIndex: var(--pf-t--global--z-index--md);
+ --pf-v6-c-banner--m-sticky--BoxShadow: var(--pf-t--global--box-shadow--md);
+ --pf-v6-c-banner--m-danger--BackgroundColor: var(--pf-t--global--color--status--danger--default);
+ --pf-v6-c-banner--m-danger--Color: var(--pf-t--global--text--color--status--on-danger--default);
+ --pf-v6-c-banner--m-success--BackgroundColor: var(--pf-t--global--color--status--success--default);
+ --pf-v6-c-banner--m-success--Color: var(--pf-t--global--text--color--status--on-success--default);
+ --pf-v6-c-banner--m-warning--BackgroundColor: var(--pf-t--global--color--status--warning--default);
+ --pf-v6-c-banner--m-warning--Color: var(--pf-t--global--text--color--status--on-warning--default);
+ --pf-v6-c-banner--m-info--BackgroundColor: var(--pf-t--global--color--status--info--default);
+ --pf-v6-c-banner--m-info--Color: var(--pf-t--global--text--color--status--on-info--default);
+ --pf-v6-c-banner--m-custom--BackgroundColor: var(--pf-t--global--color--status--custom--default);
+ --pf-v6-c-banner--m-custom--Color: var(--pf-t--global--text--color--status--on-custom--default);
+ --pf-v6-c-banner--m-red--BackgroundColor: var(--pf-t--global--color--nonstatus--red--default);
+ --pf-v6-c-banner--m-red--Color: var(--pf-t--global--text--color--nonstatus--on-red--default);
+ --pf-v6-c-banner--m-orangered--BackgroundColor: var(--pf-t--global--color--nonstatus--orangered--default);
+ --pf-v6-c-banner--m-orangered--Color: var(--pf-t--global--text--color--nonstatus--on-orangered--default);
+ --pf-v6-c-banner--m-orange--BackgroundColor: var(--pf-t--global--color--nonstatus--orange--default);
+ --pf-v6-c-banner--m-orange--Color: var(--pf-t--global--text--color--nonstatus--on-orange--default);
+ --pf-v6-c-banner--m-yellow--BackgroundColor: var(--pf-t--global--color--nonstatus--yellow--default);
+ --pf-v6-c-banner--m-yellow--Color: var(--pf-t--global--text--color--nonstatus--on-yellow--default);
+ --pf-v6-c-banner--m-green--BackgroundColor: var(--pf-t--global--color--nonstatus--green--default);
+ --pf-v6-c-banner--m-green--Color: var(--pf-t--global--text--color--nonstatus--on-green--default);
+ --pf-v6-c-banner--m-teal--BackgroundColor: var(--pf-t--global--color--nonstatus--teal--default);
+ --pf-v6-c-banner--m-teal--Color: var(--pf-t--global--text--color--nonstatus--on-teal--default);
+ --pf-v6-c-banner--m-blue--BackgroundColor: var(--pf-t--global--color--nonstatus--blue--default);
+ --pf-v6-c-banner--m-blue--Color: var(--pf-t--global--text--color--nonstatus--on-blue--default);
+ --pf-v6-c-banner--m-purple--BackgroundColor: var(--pf-t--global--color--nonstatus--purple--default);
+ --pf-v6-c-banner--m-purple--Color: var(--pf-t--global--text--color--nonstatus--on-purple--default);
+}
+@media (min-width: 48rem) {
+ .pf-v6-c-banner {
+ --pf-v6-c-banner--PaddingInlineEnd: var(--pf-v6-c-banner--md--PaddingInlineEnd);
+ --pf-v6-c-banner--PaddingInlineStart: var(--pf-v6-c-banner--md--PaddingInlineStart);
+ }
+}
+
+.pf-v6-c-banner {
+ flex-shrink: 0;
+ padding-block-start: var(--pf-v6-c-banner--PaddingBlockStart);
+ padding-block-end: var(--pf-v6-c-banner--PaddingBlockEnd);
+ padding-inline-start: var(--pf-v6-c-banner--PaddingInlineStart);
+ padding-inline-end: var(--pf-v6-c-banner--PaddingInlineEnd);
+ font-size: var(--pf-v6-c-banner--FontSize);
+ color: var(--pf-v6-c-banner--Color);
+ white-space: nowrap;
+ background-color: var(--pf-v6-c-banner--BackgroundColor);
+}
+.pf-v6-c-banner.pf-m-danger {
+ --pf-v6-c-banner--BackgroundColor: var(--pf-v6-c-banner--m-danger--BackgroundColor);
+ --pf-v6-c-banner--Color: var(--pf-v6-c-banner--m-danger--Color);
+}
+.pf-v6-c-banner.pf-m-success {
+ --pf-v6-c-banner--BackgroundColor: var(--pf-v6-c-banner--m-success--BackgroundColor);
+ --pf-v6-c-banner--Color: var(--pf-v6-c-banner--m-success--Color);
+}
+.pf-v6-c-banner.pf-m-warning {
+ --pf-v6-c-banner--BackgroundColor: var(--pf-v6-c-banner--m-warning--BackgroundColor);
+ --pf-v6-c-banner--Color: var(--pf-v6-c-banner--m-warning--Color);
+}
+.pf-v6-c-banner.pf-m-info {
+ --pf-v6-c-banner--BackgroundColor: var(--pf-v6-c-banner--m-info--BackgroundColor);
+ --pf-v6-c-banner--Color: var(--pf-v6-c-banner--m-info--Color);
+}
+.pf-v6-c-banner.pf-m-custom {
+ --pf-v6-c-banner--BackgroundColor: var(--pf-v6-c-banner--m-custom--BackgroundColor);
+ --pf-v6-c-banner--Color: var(--pf-v6-c-banner--m-custom--Color);
+}
+.pf-v6-c-banner.pf-m-red {
+ --pf-v6-c-banner--BackgroundColor: var(--pf-v6-c-banner--m-red--BackgroundColor);
+ --pf-v6-c-banner--Color: var(--pf-v6-c-banner--m-red--Color);
+}
+.pf-v6-c-banner.pf-m-orangered {
+ --pf-v6-c-banner--BackgroundColor: var(--pf-v6-c-banner--m-orangered--BackgroundColor);
+ --pf-v6-c-banner--Color: var(--pf-v6-c-banner--m-orangered--Color);
+}
+.pf-v6-c-banner.pf-m-orange {
+ --pf-v6-c-banner--BackgroundColor: var(--pf-v6-c-banner--m-orange--BackgroundColor);
+ --pf-v6-c-banner--Color: var(--pf-v6-c-banner--m-orange--Color);
+}
+.pf-v6-c-banner.pf-m-yellow {
+ --pf-v6-c-banner--BackgroundColor: var(--pf-v6-c-banner--m-yellow--BackgroundColor);
+ --pf-v6-c-banner--Color: var(--pf-v6-c-banner--m-yellow--Color);
+}
+.pf-v6-c-banner.pf-m-green {
+ --pf-v6-c-banner--BackgroundColor: var(--pf-v6-c-banner--m-green--BackgroundColor);
+ --pf-v6-c-banner--Color: var(--pf-v6-c-banner--m-green--Color);
+}
+.pf-v6-c-banner.pf-m-teal {
+ --pf-v6-c-banner--BackgroundColor: var(--pf-v6-c-banner--m-teal--BackgroundColor);
+ --pf-v6-c-banner--Color: var(--pf-v6-c-banner--m-teal--Color);
+}
+.pf-v6-c-banner.pf-m-blue {
+ --pf-v6-c-banner--BackgroundColor: var(--pf-v6-c-banner--m-blue--BackgroundColor);
+ --pf-v6-c-banner--Color: var(--pf-v6-c-banner--m-blue--Color);
+}
+.pf-v6-c-banner.pf-m-purple {
+ --pf-v6-c-banner--BackgroundColor: var(--pf-v6-c-banner--m-purple--BackgroundColor);
+ --pf-v6-c-banner--Color: var(--pf-v6-c-banner--m-purple--Color);
+}
+.pf-v6-c-banner.pf-m-sticky {
+ position: sticky;
+ inset-block-start: 0;
+ z-index: var(--pf-v6-c-banner--m-sticky--ZIndex);
+ box-shadow: var(--pf-v6-c-banner--m-sticky--BoxShadow);
+}
+.pf-v6-c-banner a {
+ color: var(--pf-v6-c-banner--link--Color);
+ text-decoration-line: var(--pf-v6-c-banner--link--TextDecoration);
+}
+.pf-v6-c-banner a:hover:not(.pf-m-disabled) {
+ --pf-v6-c-banner--link--Color: var(--pf-v6-c-banner--link--hover--Color);
+}
+.pf-v6-c-banner a.pf-m-disabled {
+ --pf-v6-c-banner--link--Color: var(--pf-v6-c-banner--link--disabled--Color);
+ cursor: not-allowed;
+}
+.pf-v6-c-banner .pf-v6-c-button.pf-m-inline {
+ --pf-v6-c-button--m-link--m-inline--Color: var(--pf-v6-c-banner--link--Color);
+ --pf-v6-c-button--m-link--m-inline--hover--Color: var(--pf-v6-c-banner--link--hover--Color);
+ --pf-v6-c-button--disabled--Color: var(--pf-v6-c-banner--link--disabled--Color);
+ text-decoration-line: var(--pf-v6-c-banner--link--TextDecoration);
+}
+.pf-v6-c-banner .pf-v6-c-button.pf-m-inline:disabled, .pf-v6-c-banner .pf-v6-c-button.pf-m-inline.pf-m-disabled {
+ cursor: not-allowed;
+}
+
+.pf-v6-c-brand {
+ --pf-v6-c-brand--Width: auto;
+ --pf-v6-c-brand--Height: auto;
+}
+
+.pf-v6-c-brand {
+ width: var(--pf-v6-c-brand--Width--base);
+ height: var(--pf-v6-c-brand--Height--base);
+ --pf-v6-c-brand--Width--base: var(--pf-v6-c-brand--Width);
+ --pf-v6-c-brand--Height--base: var(--pf-v6-c-brand--Height);
+}
+@media (min-width: 36rem) {
+ .pf-v6-c-brand {
+ --pf-v6-c-brand--Width--base: var(--pf-v6-c-brand--Width-on-sm, var(--pf-v6-c-brand--Width));
+ }
+}
+@media (min-width: 48rem) {
+ .pf-v6-c-brand {
+ --pf-v6-c-brand--Width--base: var(--pf-v6-c-brand--Width-on-md, var(--pf-v6-c-brand--Width-on-sm, var(--pf-v6-c-brand--Width)));
+ }
+}
+@media (min-width: 62rem) {
+ .pf-v6-c-brand {
+ --pf-v6-c-brand--Width--base: var(--pf-v6-c-brand--Width-on-lg, var(--pf-v6-c-brand--Width-on-md, var(--pf-v6-c-brand--Width-on-sm, var(--pf-v6-c-brand--Width))));
+ }
+}
+@media (min-width: 75rem) {
+ .pf-v6-c-brand {
+ --pf-v6-c-brand--Width--base: var(--pf-v6-c-brand--Width-on-xl, var(--pf-v6-c-brand--Width-on-lg, var(--pf-v6-c-brand--Width-on-md, var(--pf-v6-c-brand--Width-on-sm, var(--pf-v6-c-brand--Width)))));
+ }
+}
+@media (min-width: 90.625rem) {
+ .pf-v6-c-brand {
+ --pf-v6-c-brand--Width--base: var(--pf-v6-c-brand--Width-on-2xl, var(--pf-v6-c-brand--Width-on-xl, var(--pf-v6-c-brand--Width-on-lg, var(--pf-v6-c-brand--Width-on-md, var(--pf-v6-c-brand--Width-on-sm, var(--pf-v6-c-brand--Width))))));
+ }
+}
+@media (min-width: 36rem) {
+ .pf-v6-c-brand {
+ --pf-v6-c-brand--Height--base: var(--pf-v6-c-brand--Height-on-sm, var(--pf-v6-c-brand--Height));
+ }
+}
+@media (min-width: 48rem) {
+ .pf-v6-c-brand {
+ --pf-v6-c-brand--Height--base: var(--pf-v6-c-brand--Height-on-md, var(--pf-v6-c-brand--Height-on-sm, var(--pf-v6-c-brand--Height)));
+ }
+}
+@media (min-width: 62rem) {
+ .pf-v6-c-brand {
+ --pf-v6-c-brand--Height--base: var(--pf-v6-c-brand--Height-on-lg, var(--pf-v6-c-brand--Height-on-md, var(--pf-v6-c-brand--Height-on-sm, var(--pf-v6-c-brand--Height))));
+ }
+}
+@media (min-width: 75rem) {
+ .pf-v6-c-brand {
+ --pf-v6-c-brand--Height--base: var(--pf-v6-c-brand--Height-on-xl, var(--pf-v6-c-brand--Height-on-lg, var(--pf-v6-c-brand--Height-on-md, var(--pf-v6-c-brand--Height-on-sm, var(--pf-v6-c-brand--Height)))));
+ }
+}
+@media (min-width: 90.625rem) {
+ .pf-v6-c-brand {
+ --pf-v6-c-brand--Height--base: var(--pf-v6-c-brand--Height-on-2xl, var(--pf-v6-c-brand--Height-on-xl, var(--pf-v6-c-brand--Height-on-lg, var(--pf-v6-c-brand--Height-on-md, var(--pf-v6-c-brand--Height-on-sm, var(--pf-v6-c-brand--Height))))));
+ }
+}
+.pf-v6-c-brand.pf-m-picture {
+ display: inline-flex;
+ max-width: 100%;
+}
+
+.pf-v6-c-breadcrumb {
+ --pf-v6-c-breadcrumb__item--FontSize: var(--pf-t--global--font--size--body--sm);
+ --pf-v6-c-breadcrumb__item--LineHeight: var(--pf-t--global--font--line-height--body);
+ --pf-v6-c-breadcrumb__item--MarginInlineEnd: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-breadcrumb__item-divider--Color: var(--pf-t--global--icon--color--regular);
+ --pf-v6-c-breadcrumb__item-divider--MarginInlineEnd: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-breadcrumb__item-divider--FontSize: var( --pf-t--global--font--size--body--sm);
+ --pf-v6-c-breadcrumb__link--PaddingInlineStart: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-breadcrumb__link--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-breadcrumb__link--Color: var(--pf-t--global--text--color--link--default);
+ --pf-v6-c-breadcrumb__link--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--default);
+ --pf-v6-c-breadcrumb__link--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--default);
+ --pf-v6-c-breadcrumb__link--hover--Color: var(--pf-t--global--text--color--link--hover);
+ --pf-v6-c-breadcrumb__link--hover--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--hover);
+ --pf-v6-c-breadcrumb__link--hover--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--hover);
+ --pf-v6-c-breadcrumb__link--m-current--Color: var(--pf-t--global--text--color--regular);
+ --pf-v6-c-breadcrumb__link--BackgroundColor: transparent;
+ --pf-v6-c-breadcrumb__heading--FontSize: var( --pf-t--global--font--size--body--sm);
+ --pf-v6-c-breadcrumb__menu-toggle--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
+ --pf-v6-c-breadcrumb__menu-toggle--MarginInlineEnd: var(--pf-t--global--spacer--xs);
+ --pf-v6-c-breadcrumb__menu-toggle--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
+ --pf-v6-c-breadcrumb__menu-toggle--MarginInlineStart: var(--pf-t--global--spacer--xs);
+}
+
+.pf-v6-c-breadcrumb {
+ display: inline-flex;
+}
+
+.pf-v6-c-breadcrumb__list {
+ display: flex;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.pf-v6-c-breadcrumb__item {
+ display: flex;
+ align-items: baseline;
+ font-size: var(--pf-v6-c-breadcrumb__item--FontSize);
+ font-weight: var(--pf-v6-c-breadcrumb__item--FontWeight);
+ line-height: var(--pf-v6-c-breadcrumb__item--LineHeight);
+ white-space: nowrap;
+ list-style: none;
+}
+.pf-v6-c-breadcrumb__item:first-child:has(.pf-v6-c-breadcrumb__link) {
+ --pf-v6-c-breadcrumb__link--PaddingInlineStart: 0;
+}
+.pf-v6-c-breadcrumb__item:not(:last-child) {
+ margin-inline-end: var(--pf-v6-c-breadcrumb__item--MarginInlineEnd);
+}
+
+.pf-v6-c-breadcrumb__item-divider {
+ margin-inline-end: var(--pf-v6-c-breadcrumb__item-divider--MarginInlineEnd);
+ font-size: var(--pf-v6-c-breadcrumb__item-divider--FontSize);
+ line-height: 1;
+ color: var(--pf-v6-c-breadcrumb__item-divider--Color);
+}
+:where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-breadcrumb__item-divider {
+ scale: -1 1;
+}
+
+.pf-v6-c-breadcrumb__link {
+ padding-inline-start: var(--pf-v6-c-breadcrumb__link--PaddingInlineStart);
+ padding-inline-end: var(--pf-v6-c-breadcrumb__link--PaddingInlineEnd);
+ font-size: inherit;
+ font-weight: var(--pf-v6-c-breadcrumb__link--FontWeight);
+ line-height: inherit;
+ color: var(--pf-v6-c-breadcrumb__link--Color);
+ text-decoration-line: var(--pf-v6-c-breadcrumb__link--TextDecorationLine);
+ text-decoration-style: var(--pf-v6-c-breadcrumb__link--TextDecorationStyle);
+ word-break: break-word;
+ background-color: var(--pf-v6-c-breadcrumb__link--BackgroundColor);
+}
+.pf-v6-c-breadcrumb__link:is(:hover, :focus) {
+ --pf-v6-c-breadcrumb__link--Color: var(--pf-v6-c-breadcrumb__link--hover--Color);
+ --pf-v6-c-breadcrumb__link--TextDecorationLine: var(--pf-v6-c-breadcrumb__link--hover--TextDecorationLine);
+ --pf-v6-c-breadcrumb__link--TextDecorationStyle: var(--pf-v6-c-breadcrumb__link--hover--TextDecorationStyle);
+}
+.pf-v6-c-breadcrumb__link.pf-m-current {
+ cursor: default;
+}
+.pf-v6-c-breadcrumb__link.pf-m-current, .pf-v6-c-breadcrumb__link.pf-m-current:is(:hover, :focus) {
+ color: var(--pf-v6-c-breadcrumb__link--m-current--Color);
+ text-decoration-line: none;
+}
+button.pf-v6-c-breadcrumb__link {
+ border: none;
+}
+
+.pf-v6-c-breadcrumb__dropdown {
+ margin-block-start: var(--pf-v6-c-breadcrumb__menu-toggle--MarginBlockStart);
+ margin-block-end: var(--pf-v6-c-breadcrumb__menu-toggle--MarginBlockEnd);
+ margin-inline-start: var(--pf-v6-c-breadcrumb__menu-toggle--MarginInlineStart);
+ margin-inline-end: var(--pf-v6-c-breadcrumb__menu-toggle--MarginInlineEnd);
+}
+
+.pf-v6-c-breadcrumb__heading {
+ display: inline;
+ font-size: var(--pf-v6-c-breadcrumb__heading--FontSize);
+}
+
+.pf-v6-c-breadcrumb__link,
+.pf-v6-c-breadcrumb__heading {
+ white-space: normal;
+}
+
+.pf-v6-c-breadcrumb__list > :first-child .pf-v6-c-breadcrumb__item-divider {
+ display: none;
+}
+
+.pf-v6-c-button {
+ --pf-v6-c-button--Display: inline-flex;
+ --pf-v6-c-button--AlignItems: baseline;
+ --pf-v6-c-button--JustifyContent: center;
+ --pf-v6-c-button--Gap: var(--pf-t--global--spacer--gap--text-to-element--default);
+ --pf-v6-c-button--MinWidth: calc(1em * var(--pf-v6-c-button--LineHeight) + var(--pf-v6-c-button--PaddingBlockStart) + var(--pf-v6-c-button--PaddingBlockEnd));
+ --pf-v6-c-button--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--default);
+ --pf-v6-c-button--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--default);
+ --pf-v6-c-button--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--default);
+ --pf-v6-c-button--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--default);
+ --pf-v6-c-button--Color: var(--pf-t--global--text--color--regular);
+ --pf-v6-c-button--LineHeight: var(--pf-t--global--font--line-height--body);
+ --pf-v6-c-button--FontWeight: var(--pf-t--global--font--weight--body--default);
+ --pf-v6-c-button--FontSize: var(--pf-t--global--font--size--body--default);
+ --pf-v6-c-button--BackgroundColor: transparent;
+ --pf-v6-c-button--BorderColor: transparent;
+ --pf-v6-c-button--BorderWidth: var(--pf-t--global--border--width--action--default);
+ --pf-v6-c-button--BorderRadius: var(--pf-t--global--border--radius--pill);
+ --pf-v6-c-button--TextDecorationLine: none;
+ --pf-v6-c-button--TextDecorationStyle: none;
+ --pf-v6-c-button--TextDecorationColor: currentcolor;
+ --pf-v6-c-button--TransitionDelay: 0s;
+ --pf-v6-c-button--TransitionDuration: var(--pf-t--global--motion--duration--fade--default);
+ --pf-v6-c-button--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--accelerate);
+ --pf-v6-c-button--TransitionProperty: color, background, border-width, border-color;
+ --pf-v6-c-button--ScaleX: 1;
+ --pf-v6-c-button--ScaleY: 1;
+ --pf-v6-c-button--hover--BackgroundColor: transparent;
+ --pf-v6-c-button--hover--BorderColor: transparent;
+ --pf-v6-c-button--hover--BorderWidth: var(--pf-t--global--border--width--action--hover);
+ --pf-v6-c-button--hover--TextDecorationLine: none;
+ --pf-v6-c-button--hover--TextDecorationStyle: none;
+ --pf-v6-c-button--hover--TextDecorationColor: currentcolor;
+ --pf-v6-c-button--hover--ScaleX: 1;
+ --pf-v6-c-button--hover--ScaleY: 1;
+ --pf-v6-c-button--m-clicked--BackgroundColor: transparent;
+ --pf-v6-c-button--m-clicked--BorderColor: transparent;
+ --pf-v6-c-button--m-clicked--BorderWidth: var(--pf-t--global--border--width--action--clicked);
+ --pf-v6-c-button--m-primary--Color: var(--pf-t--global--text--color--on-brand--default);
+ --pf-v6-c-button--m-primary--BackgroundColor: var(--pf-t--global--color--brand--default);
+ --pf-v6-c-button--m-primary__icon--Color: var(--pf-t--global--icon--color--on-brand--default);
+ --pf-v6-c-button--m-primary--hover--Color: var(--pf-t--global--text--color--on-brand--hover);
+ --pf-v6-c-button--m-primary--hover--BackgroundColor: var(--pf-t--global--color--brand--hover);
+ --pf-v6-c-button--m-primary--hover__icon--Color: var(--pf-t--global--icon--color--on-brand--hover);
+ --pf-v6-c-button--m-primary--m-clicked--Color: var(--pf-t--global--text--color--on-brand--clicked);
+ --pf-v6-c-button--m-primary--m-clicked--BackgroundColor: var(--pf-t--global--color--brand--clicked);
+ --pf-v6-c-button--m-primary--m-clicked__icon--Color: var(--pf-t--global--icon--color--on-brand--clicked);
+ --pf-v6-c-button--m-secondary--Color: var(--pf-t--global--text--color--brand--default);
+ --pf-v6-c-button--m-secondary--BorderColor: var(--pf-t--global--border--color--brand--default);
+ --pf-v6-c-button--m-secondary--TransitionDuration: var(--pf-t--global--motion--duration--fade--short);
+ --pf-v6-c-button--m-secondary__icon--Color: var(--pf-t--global--icon--color--brand--default);
+ --pf-v6-c-button--m-secondary--hover--Color: var(--pf-t--global--text--color--brand--hover);
+ --pf-v6-c-button--m-secondary--hover--BorderColor: var(--pf-t--global--border--color--brand--hover);
+ --pf-v6-c-button--m-secondary--hover__icon--Color: var(--pf-t--global--icon--color--brand--hover);
+ --pf-v6-c-button--m-secondary--m-clicked--Color: var(--pf-t--global--text--color--brand--clicked);
+ --pf-v6-c-button--m-secondary--m-clicked--BorderColor: var(--pf-t--global--border--color--brand--clicked);
+ --pf-v6-c-button--m-secondary--m-clicked__icon--Color: var(--pf-t--global--icon--color--brand--clicked);
+ --pf-v6-c-button--m-secondary--m-danger--Color: var(--pf-t--global--text--color--status--danger--default);
+ --pf-v6-c-button--m-secondary--m-danger--BorderColor: var(--pf-t--global--border--color--status--danger--default);
+ --pf-v6-c-button--m-secondary--m-danger__icon--Color: var(--pf-t--global--icon--color--status--danger--default);
+ --pf-v6-c-button--m-secondary--m-danger--hover--Color: var(--pf-t--global--text--color--status--danger--hover);
+ --pf-v6-c-button--m-secondary--m-danger--hover--BorderColor: var(--pf-t--global--border--color--status--danger--hover);
+ --pf-v6-c-button--m-secondary--m-danger--hover__icon--Color: var(--pf-t--global--icon--color--status--danger--hover);
+ --pf-v6-c-button--m-secondary--m-danger--m-clicked--Color: var(--pf-t--global--text--color--status--danger--clicked);
+ --pf-v6-c-button--m-secondary--m-danger--m-clicked--BorderColor: var(--pf-t--global--border--color--status--danger--clicked);
+ --pf-v6-c-button--m-secondary--m-danger--m-clicked__icon--Color: var(--pf-t--global--icon--color--status--danger--clicked);
+ --pf-v6-c-button--m-tertiary--Color: var(--pf-t--global--text--color--brand--default);
+ --pf-v6-c-button--m-tertiary--BorderColor: var(--pf-t--global--border--color--default);
+ --pf-v6-c-button--m-tertiary--TransitionDuration: var(--pf-t--global--motion--duration--fade--short);
+ --pf-v6-c-button--m-tertiary__icon--Color: var(--pf-t--global--icon--color--brand--default);
+ --pf-v6-c-button--m-tertiary--hover--Color: var(--pf-t--global--text--color--brand--hover);
+ --pf-v6-c-button--m-tertiary--hover--BorderColor: var(--pf-t--global--border--color--hover);
+ --pf-v6-c-button--m-tertiary--hover__icon--Color: var(--pf-t--global--icon--color--brand--hover);
+ --pf-v6-c-button--m-tertiary--m-clicked--Color: var(--pf-t--global--text--color--brand--clicked);
+ --pf-v6-c-button--m-tertiary--m-clicked--BorderColor: var(--pf-t--global--border--color--clicked);
+ --pf-v6-c-button--m-tertiary--m-clicked__icon--Color: var(--pf-t--global--icon--color--brand--clicked);
+ --pf-v6-c-button--m-link--BorderRadius: var(--pf-t--global--border--radius--small);
+ --pf-v6-c-button--m-link--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--plain--default);
+ --pf-v6-c-button--m-link--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--plain--default);
+ --pf-v6-c-button--m-link--Color: var(--pf-t--global--text--color--brand--default);
+ --pf-v6-c-button--m-link--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
+ --pf-v6-c-button--m-link__icon--Color: var(--pf-t--global--icon--color--brand--default);
+ --pf-v6-c-button--m-link--hover--Color: var(--pf-t--global--text--color--brand--hover);
+ --pf-v6-c-button--m-link--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
+ --pf-v6-c-button--m-link--hover__icon--Color: var(--pf-t--global--text--color--brand--hover);
+ --pf-v6-c-button--m-link--m-clicked--Color: var(--pf-t--global--text--color--brand--clicked);
+ --pf-v6-c-button--m-link--m-clicked--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
+ --pf-v6-c-button--m-link--m-clicked__icon--Color: var(--pf-t--global--text--color--brand--clicked);
+ --pf-v6-c-button--m-link--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--plain--compact);
+ --pf-v6-c-button--m-link--m-small--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--plain--compact);
+ --pf-v6-c-button--m-link--m-danger--Color: var(--pf-t--global--text--color--status--danger--default);
+ --pf-v6-c-button--m-link--m-danger--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
+ --pf-v6-c-button--m-link--m-danger__icon--Color: var(--pf-t--global--text--color--status--danger--default);
+ --pf-v6-c-button--m-link--m-danger--hover--Color: var(--pf-t--global--text--color--status--danger--hover);
+ --pf-v6-c-button--m-link--m-danger--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
+ --pf-v6-c-button--m-link--m-danger--hover__icon--Color: var(--pf-t--global--text--color--status--danger--hover);
+ --pf-v6-c-button--m-link--m-danger--m-clicked--Color: var(--pf-t--global--text--color--status--danger--clicked);
+ --pf-v6-c-button--m-link--m-danger--m-clicked--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
+ --pf-v6-c-button--m-link--m-danger--m-clicked__icon--Color: var(--pf-t--global--text--color--status--danger--clicked);
+ --pf-v6-c-button--m-link--m-inline--Display: inline-flex;
+ --pf-v6-c-button--m-link--m-inline--JustifyContent: flex-start;
+ --pf-v6-c-button--m-link--m-inline--FontSize: initial;
+ --pf-v6-c-button--m-link--m-inline--LineHeight: initial;
+ --pf-v6-c-button--m-link--m-inline--FontWeight: initial;
+ --pf-v6-c-button--m-link--m-inline--PaddingBlockStart: 0;
+ --pf-v6-c-button--m-link--m-inline--PaddingInlineEnd: 0;
+ --pf-v6-c-button--m-link--m-inline--PaddingBlockEnd: 0;
+ --pf-v6-c-button--m-link--m-inline--PaddingInlineStart: 0;
+ --pf-v6-c-button--m-link--m-inline--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--default);
+ --pf-v6-c-button--m-link--m-inline--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--default);
+ --pf-v6-c-button--m-link--m-inline--hover--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--hover);
+ --pf-v6-c-button--m-link--m-inline--hover--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--hover);
+ --pf-v6-c-button--m-link--m-inline__progress--InsetInlineStart: var(--pf-t--global--spacer--xs);
+ --pf-v6-c-button--m-link--m-inline--m-in-progress--PaddingInlineStart: calc(var(--pf-v6-c-button--m-link--m-inline__progress--InsetInlineStart) + 1rem + var(--pf-t--global--spacer--sm));
+ --pf-v6-c-button--m-link--m-inline--disabled--Color: var(--pf-t--global--text--color--disabled);
+ --pf-v6-c-button--m-link--m-inline--disabled__icon--Color: var(--pf-t--global--icon--color--disabled);
+ --pf-v6-c-button--span--m-link--m-inline--Display: inline;
+ --pf-v6-c-button--span--m-link--m-inline__icon--m-start--MarginInlineEnd: var(--pf-t--global--spacer--gap--text-to-element--default);
+ --pf-v6-c-button--span--m-link--m-inline__icon--m-end--MarginInlineStart: var(--pf-t--global--spacer--gap--text-to-element--default);
+ --pf-v6-c-button--m-link--m-inline--Color: var(--pf-t--global--text--color--brand--default);
+ --pf-v6-c-button--m-link--m-inline__icon--Color: var(--pf-t--global--icon--color--brand--default);
+ --pf-v6-c-button--m-link--m-inline--TextDecorationColor: currentcolor;
+ --pf-v6-c-button--m-link--m-inline--hover--Color: var(--pf-t--global--text--color--brand--hover);
+ --pf-v6-c-button--m-link--m-inline--hover__icon--Color: var(--pf-t--global--icon--color--brand--hover);
+ --pf-v6-c-button--m-link--m-inline--hover--TextDecorationColor: currentcolor;
+ --pf-v6-c-button--m-plain--BorderRadius: var(--pf-t--global--border--radius--small);
+ --pf-v6-c-button--m-plain--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--plain--default);
+ --pf-v6-c-button--m-plain--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--plain--default);
+ --pf-v6-c-button--m-plain--Color: var(--pf-t--global--icon--color--regular);
+ --pf-v6-c-button--m-plain__icon--Color: var(--pf-t--global--text--color--regular);
+ --pf-v6-c-button--m-plain--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
+ --pf-v6-c-button--m-plain--hover--Color: var(--pf-t--global--icon--color--regular);
+ --pf-v6-c-button--m-plain--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
+ --pf-v6-c-button--m-plain--m-clicked--Color: var(--pf-t--global--icon--color--regular);
+ --pf-v6-c-button--m-plain--m-clicked--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
+ --pf-v6-c-button--m-plain--disabled--Color: var(--pf-t--global--text--color--disabled);
+ --pf-v6-c-button--m-plain--disabled__icon--Color: var(--pf-t--global--icon--color--disabled);
+ --pf-v6-c-button--m-plain--disabled--BackgroundColor: transparent;
+ --pf-v6-c-button--m-plain--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--plain--compact);
+ --pf-v6-c-button--m-plain--m-small--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--plain--compact);
+ --pf-v6-c-button--m-plain--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__progress--Color: var(--pf-v6-c-button__icon--Color);
+ --pf-v6-c-button--m-control--BorderRadius: var(--pf-t--global--border--radius--small);
+ --pf-v6-c-button--m-control--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
+ --pf-v6-c-button--m-control--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
+ --pf-v6-c-button--m-control--Color: var(--pf-t--global--text--color--regular);
+ --pf-v6-c-button--m-control--BackgroundColor: var(--pf-t--global--background--color--control--default);
+ --pf-v6-c-button--m-control--BorderColor: var(--pf-t--global--border--color--default);
+ --pf-v6-c-button--m-control--BorderWidth: var(--pf-t--global--border--width--control--default);
+ --pf-v6-c-button--m-control__icon--Color: var(--pf-t--global--icon--color--regular);
+ --pf-v6-c-button--m-control--hover--Color: var(--pf-t--global--text--color--regular);
+ --pf-v6-c-button--m-control--hover--BackgroundColor: var(--pf-t--global--background--color--control--default);
+ --pf-v6-c-button--m-control--hover--BorderColor: var(--pf-t--global--border--color--hover);
+ --pf-v6-c-button--m-control--hover--BorderWidth: var(--pf-t--global--border--width--control--hover);
+ --pf-v6-c-button--m-control--hover__icon--Color: var(--pf-t--global--icon--color--regular);
+ --pf-v6-c-button--m-control--m-clicked--Color: var(--pf-t--global--text--color--regular);
+ --pf-v6-c-button--m-control--m-clicked--BackgroundColor: var(--pf-t--global--background--color--control--default);
+ --pf-v6-c-button--m-control--m-clicked--BorderColor: var(--pf-t--global--border--color--clicked);
+ --pf-v6-c-button--m-control--m-clicked--BorderWidth: var(--pf-t--global--border--width--control--clicked);
+ --pf-v6-c-button--m-control--m-clicked__icon--Color: var(--pf-t--global--icon--color--regular);
+ --pf-v6-c-button--m-control--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--compact);
+ --pf-v6-c-button--m-control--m-small--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--compact);
+ --pf-v6-c-button--m-stateful--BorderRadius: var(--pf-t--global--border--radius--small);
+ --pf-v6-c-button--m-stateful--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
+ --pf-v6-c-button--m-stateful--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
+ --pf-v6-c-button--m-stateful--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--compact);
+ --pf-v6-c-button--m-stateful--m-small--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--compact);
+ --pf-v6-c-button--m-read--BackgroundColor: var(--pf-t--global--background--color--control--default);
+ --pf-v6-c-button--m-read--BorderColor: var(--pf-t--global--border--color--default);
+ --pf-v6-c-button--m-read--hover--BackgroundColor: var(--pf-t--global--background--color--control--default);
+ --pf-v6-c-button--m-read--hover--BorderColor: var(--pf-t--global--border--color--hover);
+ --pf-v6-c-button--m-read--m-clicked--BackgroundColor: var(--pf-t--global--background--color--control--default);
+ --pf-v6-c-button--m-read--m-clicked--BorderColor: var(--pf-t--global--border--color--clicked);
+ --pf-v6-c-button--m-unread--Color: var(--pf-t--global--text--color--status--unread--on-default--default);
+ --pf-v6-c-button--m-unread--BackgroundColor: var(--pf-t--global--color--status--unread--default);
+ --pf-v6-c-button--m-unread__icon--Color: var(--pf-t--global--icon--color--status--unread--on-default--default);
+ --pf-v6-c-button--m-unread--hover--Color: var(--pf-t--global--text--color--status--unread--on-default--hover);
+ --pf-v6-c-button--m-unread--hover--BackgroundColor: var(--pf-t--global--color--status--unread--hover);
+ --pf-v6-c-button--m-unread--hover__icon--Color: var(--pf-t--global--icon--color--status--unread--on-default--hover);
+ --pf-v6-c-button--m-unread--m-clicked--Color: var(--pf-t--global--text--color--status--unread--on-default--clicked);
+ --pf-v6-c-button--m-unread--m-clicked--BackgroundColor: var(--pf-t--global--color--status--unread--clicked);
+ --pf-v6-c-button--m-unread--m-clicked__icon--Color: var(--pf-t--global--icon--color--status--unread--on-default--clicked);
+ --pf-v6-c-button--m-attention--Color: var(--pf-t--global--text--color--status--unread--on-attention--default);
+ --pf-v6-c-button--m-attention--BackgroundColor: var(--pf-t--global--color--status--unread--attention--default);
+ --pf-v6-c-button--m-attention__icon--Color: var(--pf-t--global--icon--color--status--unread--on-attention--default);
+ --pf-v6-c-button--m-attention--hover--Color: var(--pf-t--global--text--color--status--unread--on-attention--hover);
+ --pf-v6-c-button--m-attention--hover--BackgroundColor: var(--pf-t--global--color--status--unread--attention--hover);
+ --pf-v6-c-button--m-attention--hover__icon--Color: var(--pf-t--global--icon--color--status--unread--on-attention--hover);
+ --pf-v6-c-button--m-attention--m-clicked--Color: var(--pf-t--global--text--color--status--unread--on-attention--clicked);
+ --pf-v6-c-button--m-attention--m-clicked--BackgroundColor: var(--pf-t--global--color--status--unread--attention--clicked);
+ --pf-v6-c-button--m-attention--m-clicked__icon--Color: var(--pf-t--global--icon--color--status--unread--on-attention--clicked);
+ --pf-v6-c-button--m-warning--Color: var(--pf-t--global--text--color--status--on-warning--default);
+ --pf-v6-c-button--m-warning--BackgroundColor: var(--pf-t--global--color--status--warning--default);
+ --pf-v6-c-button--m-warning__icon--Color: var(--pf-t--global--icon--color--status--on-warning--default);
+ --pf-v6-c-button--m-warning--hover--Color: var(--pf-t--global--text--color--status--on-warning--hover);
+ --pf-v6-c-button--m-warning--hover--BackgroundColor: var(--pf-t--global--color--status--warning--hover);
+ --pf-v6-c-button--m-warning--hover__icon--Color: var(--pf-t--global--icon--color--status--on-warning--hover);
+ --pf-v6-c-button--m-warning--m-clicked--Color: var(--pf-t--global--text--color--status--on-warning--clicked);
+ --pf-v6-c-button--m-warning--m-clicked--BackgroundColor: var(--pf-t--global--color--status--warning--clicked);
+ --pf-v6-c-button--m-warning--m-clicked__icon--Color: var(--pf-t--global--icon--color--status--on-warning--clicked);
+ --pf-v6-c-button--m-danger--Color: var(--pf-t--global--text--color--status--on-danger--default);
+ --pf-v6-c-button--m-danger--BackgroundColor: var(--pf-t--global--color--status--danger--default);
+ --pf-v6-c-button--m-danger__icon--Color: var(--pf-t--global--icon--color--status--on-danger--default);
+ --pf-v6-c-button--m-danger--hover--Color: var(--pf-t--global--text--color--status--on-danger--hover);
+ --pf-v6-c-button--m-danger--hover--BackgroundColor: var(--pf-t--global--color--status--danger--hover);
+ --pf-v6-c-button--m-danger--hover__icon--Color: var(--pf-t--global--icon--color--status--on-danger--hover);
+ --pf-v6-c-button--m-danger--m-clicked--Color: var(--pf-t--global--text--color--status--on-danger--clicked);
+ --pf-v6-c-button--m-danger--m-clicked--BackgroundColor: var(--pf-t--global--color--status--danger--clicked);
+ --pf-v6-c-button--m-danger--m-clicked__icon--Color: var(--pf-t--global--icon--color--status--on-danger--clicked);
+ --pf-v6-c-button--m-display-lg--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--spacious);
+ --pf-v6-c-button--m-display-lg--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--spacious);
+ --pf-v6-c-button--m-display-lg--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--spacious);
+ --pf-v6-c-button--m-display-lg--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--spacious);
+ --pf-v6-c-button--m-display-lg--FontWeight: var(--pf-t--global--font--weight--body--bold);
+ --pf-v6-c-button--m-link--m-display-lg--FontSize: var(--pf-t--global--font--size--body--lg);
+ --pf-v6-c-button--m-small--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--compact);
+ --pf-v6-c-button--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--compact);
+ --pf-v6-c-button--m-small--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--compact);
+ --pf-v6-c-button--m-small--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--compact);
+ --pf-v6-c-button--disabled--Color: var(--pf-t--global--text--color--on-disabled);
+ --pf-v6-c-button--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
+ --pf-v6-c-button--disabled--TextDecorationColor: currentcolor;
+ --pf-v6-c-button--disabled--BorderColor: transparent;
+ --pf-v6-c-button--disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
+ --pf-v6-c-button__icon--Color: var(--pf-t--global--icon--color--regular);
+ --pf-v6-c-button--hover__icon--Color: var(--pf-t--global--icon--color--regular);
+ --pf-v6-c-button--m-clicked__icon--Color: var(--pf-t--global--icon--color--regular);
+ --pf-v6-c-button__icon--MarginInlineStart: 0;
+ --pf-v6-c-button__icon--MarginInlineEnd: 0;
+ --pf-v6-c-button__icon--m-start--MarginInlineEnd: 0;
+ --pf-v6-c-button__icon--m-end--MarginInlineStart: 0;
+ --pf-v6-c-button--m-notify__icon--AnimationDuration--notify: var(--pf-t--global--motion--duration--3xl);
+ --pf-v6-c-button--m-notify__icon--AnimationTimingFunction--notify: var(--pf-t--global--motion--timing-function--default);
+ --pf-v6-c-button__icon--TransitionDelay: 0s;
+ --pf-v6-c-button__icon--TransitionTimingFunction: auto;
+ --pf-v6-c-button__icon--TransitionDuration: 0s;
+ --pf-v6-c-button__icon--TransitionProperty: none;
+ --pf-v6-c-button__icon--Rotate: 0deg;
+ --pf-v6-c-button--hover__icon--TransitionTimingFunction: auto;
+ --pf-v6-c-button--hover__icon--TransitionDuration: 0s;
+ --pf-v6-c-button--hover__icon--TransitionProperty: none;
+ --pf-v6-c-button--hover__icon--Rotate: 0deg;
+ --pf-v6-c-button__icon--ScaleX: 1;
+ --pf-v6-c-button__icon--ScaleY: 1;
+ --pf-v6-c-button--hover__icon--ScaleX: 1;
+ --pf-v6-c-button--hover__icon--ScaleY: 1;
+ --pf-v6-c-button--m-favorite__icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
+ --pf-v6-c-button--m-favorite__icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
+ --pf-v6-c-button--m-favorited__icon--Color: var(--pf-t--global--color--favorite--default);
+ --pf-v6-c-button--m-favorited--hover__icon--Color: var(--pf-t--global--color--favorite--hover);
+ --pf-v6-c-button--m-favorited__icon--AnimationDuration: var(--pf-t--global--motion--duration--icon--long);
+ --pf-v6-c-button--m-favorited__icon--AnimationTimingFunction: var(--pf-t--global--motion--timing-function--default);
+ --pf-v6-c-button__icon--favorite--Opacity: 1;
+ --pf-v6-c-button__icon--favorited--Opacity: 0;
+ --pf-v6-c-button--m-favorited__icon--favorite--Opacity: 0;
+ --pf-v6-c-button--m-favorited__icon--favorited--Opacity: 1;
+ --pf-v6-c-button__icon--favorite--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
+ --pf-v6-c-button__progress--width: calc(var(--pf-t--global--icon--size--lg) + var(--pf-t--global--spacer--sm));
+ --pf-v6-c-button__progress--Opacity: 0;
+ --pf-v6-c-button__progress--TranslateY: -50%;
+ --pf-v6-c-button__progress--TranslateX: 0;
+ --pf-v6-c-button__progress--InsetBlockStart: 50%;
+ --pf-v6-c-button__progress--InsetInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
+ --pf-v6-c-button__progress--Color: var(--pf-v6-c-button__icon--Color);
+ --pf-v6-c-button--m-progress--PaddingInlineEnd: calc(var(--pf-t--global--spacer--control--horizontal--default) + var(--pf-v6-c-button__progress--width) / 2);
+ --pf-v6-c-button--m-progress--PaddingInlineStart: calc(var(--pf-t--global--spacer--control--horizontal--default) + var(--pf-v6-c-button__progress--width) / 2);
+ --pf-v6-c-button--m-in-progress--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
+ --pf-v6-c-button--m-in-progress--PaddingInlineStart: calc(var(--pf-t--global--spacer--control--horizontal--default) + var(--pf-v6-c-button__progress--width));
+ --pf-v6-c-button--m-in-progress--m-plain--Color: var(--pf-t--global--icon--color--brand--default);
+ --pf-v6-c-button--m-in-progress--m-plain__progress--InsetInlineStart: 50%;
+ --pf-v6-c-button--m-in-progress--m-plain__progress--TranslateX: -50%;
+ --pf-v6-c-button--m-settings__icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--long);
+ --pf-v6-c-button--m-settings__icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--accelerate);
+ --pf-v6-c-button--m-settings--hover__icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--long);
+ --pf-v6-c-button--m-settings--hover__icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate);
+ --pf-v6-c-button--m-settings--hover__icon--Rotate: 60deg;
+ --pf-v6-c-button--m-primary__c-badge--BorderColor: var(--pf-t--global--border--color--default);
+ --pf-v6-c-button--m-block--Display: flex;
+ --pf-v6-c-button--m-block--Width: 100%;
+ --pf-v6-c-button--hamburger-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate);
+ --pf-v6-c-button--hamburger-icon--TransitionDuration: var(--pf-t--global--motion--duration--md);
+ --pf-v6-c-button--hamburger-icon--top--path--base: path("M1,1 L9,1");
+ --pf-v6-c-button--hamburger-icon--middle--path--base: path("M1,5 L9,5");
+ --pf-v6-c-button--hamburger-icon--arrow--path--base: path("M1,5 L1,5 L1,5");
+ --pf-v6-c-button--hamburger-icon--bottom--path--base: path("M9,9 L1,9");
+ --pf-v6-c-button--hamburger-icon--top--path: var(--pf-v6-c-button--hamburger-icon--top--path--base);
+ --pf-v6-c-button--hamburger-icon--middle--path: var(--pf-v6-c-button--hamburger-icon--middle--path--base);
+ --pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--path--base);
+ --pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--path--base);
+ --pf-v6-c-button--hamburger-icon--top--collapse--path: path("M5,1 L9,1");
+ --pf-v6-c-button--hamburger-icon--arrow--collapse--path: path("M3,7 L1,5 L3,3");
+ --pf-v6-c-button--hamburger-icon--bottom--collapse--path: path("M9,9 L5,9");
+ --pf-v6-c-button--m-hamburger__icon--m-expand--ScaleX: -1;
+}
+
+.pf-v6-c-button {
+ position: relative;
+ display: var(--pf-v6-c-button--Display);
+ gap: var(--pf-v6-c-button--Gap);
+ align-items: var(--pf-v6-c-button--AlignItems);
+ justify-content: var(--pf-v6-c-button--JustifyContent);
+ min-width: var(--pf-v6-c-button--MinWidth);
+ padding-block-start: var(--pf-v6-c-button--PaddingBlockStart);
+ padding-block-end: var(--pf-v6-c-button--PaddingBlockEnd);
+ padding-inline-start: var(--pf-v6-c-button--PaddingInlineStart);
+ padding-inline-end: var(--pf-v6-c-button--PaddingInlineEnd);
+ font-size: var(--pf-v6-c-button--FontSize, inherit);
+ font-weight: var(--pf-v6-c-button--FontWeight, inherit);
+ line-height: var(--pf-v6-c-button--LineHeight, inherit);
+ color: var(--pf-v6-c-button--Color);
+ text-align: center;
+ text-decoration-line: var(--pf-v6-c-button--TextDecorationLine);
+ text-decoration-style: var(--pf-v6-c-button--TextDecorationStyle);
+ text-decoration-color: var(--pf-v6-c-button--TextDecorationColor);
+ white-space: nowrap;
+ cursor: pointer;
+ -webkit-user-select: none;
+ user-select: none;
+ background: var(--pf-v6-c-button--BackgroundColor) radial-gradient(circle, transparent 1%, color-mix(in srgb, currentcolor 15%, transparent) 1%) center/15000%;
+ border: 0;
+ border-start-start-radius: var(--pf-v6-c-button--BorderStartStartRadius, var(--pf-v6-c-button--BorderRadius));
+ border-start-end-radius: var(--pf-v6-c-button--BorderStartEndRadius, var(--pf-v6-c-button--BorderRadius));
+ border-end-start-radius: var(--pf-v6-c-button--BorderEndStartRadius, var(--pf-v6-c-button--BorderRadius));
+ border-end-end-radius: var(--pf-v6-c-button--BorderEndEndRadius, var(--pf-v6-c-button--BorderRadius));
+ transition-delay: var(--pf-v6-c-button--TransitionDelay);
+ transition-timing-function: var(--pf-v6-c-button--TransitionTimingFunction);
+ transition-duration: var(--pf-v6-c-button--TransitionDuration);
+ transition-property: var(--pf-v6-c-button--TransitionProperty);
+ scale: var(--pf-v6-c-button--ScaleX) var(--pf-v6-c-button--ScaleY);
+}
+.pf-v6-c-button::after {
+ position: absolute;
+ inset: 0;
+ 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--BorderRadius: var(--pf-v6-c-button--m-link--BorderRadius);
+ --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--m-link--BackgroundColor);
+ --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--m-link__icon--Color);
+ --pf-v6-c-button--hover--Color: var(--pf-v6-c-button--m-link--hover--Color);
+ --pf-v6-c-button--hover--BackgroundColor: var(--pf-v6-c-button--m-link--hover--BackgroundColor);
+ --pf-v6-c-button--hover__icon--Color: var(--pf-v6-c-button--m-link--hover__icon--Color);
+ --pf-v6-c-button--m-clicked--Color: var(--pf-v6-c-button--m-link--m-clicked--Color);
+ --pf-v6-c-button--m-clicked--BackgroundColor: var(--pf-v6-c-button--m-link--m-clicked--BackgroundColor);
+ --pf-v6-c-button--m-clicked__icon--Color: var(--pf-v6-c-button--m-link--m-clicked__icon--Color);
+ --pf-v6-c-button--m-small--PaddingInlineEnd: var(--pf-v6-c-button--m-link--m-small--PaddingInlineEnd);
+ --pf-v6-c-button--m-small--PaddingInlineStart: var(--pf-v6-c-button--m-link--m-small--PaddingInlineStart);
+}
+.pf-v6-c-button.pf-m-link.pf-m-inline {
+ --pf-v6-c-button--Display: var(--pf-v6-c-button--m-link--m-inline--Display);
+ --pf-v6-c-button--JustifyContent: var(--pf-v6-c-button--m-link--m-inline--JustifyContent);
+ --pf-v6-c-button--FontSize: var(--pf-v6-c-button--m-link--m-inline--FontSize);
+ --pf-v6-c-button--LineHeight: var(--pf-v6-c-button--m-link--m-inline--LineHeight);
+ --pf-v6-c-button--FontWeight: var(--pf-v6-c-button--m-link--m-inline--FontWeight);
+ --pf-v6-c-button--PaddingBlockStart: var(--pf-v6-c-button--m-link--m-inline--PaddingBlockStart);
+ --pf-v6-c-button--PaddingInlineEnd: var(--pf-v6-c-button--m-link--m-inline--PaddingInlineEnd);
+ --pf-v6-c-button--PaddingBlockEnd: var(--pf-v6-c-button--m-link--m-inline--PaddingBlockEnd);
+ --pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-button--m-link--m-inline--PaddingInlineStart);
+ --pf-v6-c-button--BackgroundColor: transparent;
+ --pf-v6-c-button__progress--InsetInlineStart: var(--pf-v6-c-button--m-link--m-inline__progress--InsetInlineStart);
+ --pf-v6-c-button--TextDecorationLine: var(--pf-v6-c-button--m-link--m-inline--TextDecorationLine);
+ --pf-v6-c-button--TextDecorationStyle: var(--pf-v6-c-button--m-link--m-inline--TextDecorationStyle);
+ --pf-v6-c-button--hover--TextDecorationLine: var(--pf-v6-c-button--m-link--m-inline--hover--TextDecorationLine);
+ --pf-v6-c-button--hover--TextDecorationStyle: var(--pf-v6-c-button--m-link--m-inline--hover--TextDecorationStyle);
+ --pf-v6-c-button--hover--BackgroundColor: transparent;
+ --pf-v6-c-button--m-clicked--BackgroundColor: transparent;
+ --pf-v6-c-button--disabled--BackgroundColor: transparent;
+ --pf-v6-c-button--disabled--Color: var(--pf-v6-c-button--m-link--m-inline--disabled--Color);
+ --pf-v6-c-button--disabled__icon--Color: var(--pf-v6-c-button--m-link--m-inline--disabled__icon--Color);
+ --pf-v6-c-button--m-link--Color: var(--pf-v6-c-button--m-link--m-inline--Color);
+ --pf-v6-c-button--m-link__icon--Color: var(--pf-v6-c-button--m-link--m-inline__icon--Color);
+ --pf-v6-c-button--TextDecorationColor: var(--pf-v6-c-button--m-link--m-inline--TextDecorationColor);
+ --pf-v6-c-button--hover--TextDecorationColor: var(--pf-v6-c-button--m-link--m-inline--hover--TextDecorationColor);
+ --pf-v6-c-button--m-link--hover--Color: var(--pf-v6-c-button--m-link--m-inline--hover--Color);
+ --pf-v6-c-button--m-link--hover__icon--Color: var(--pf-v6-c-button--m-link--m-inline--hover__icon--Color);
+ text-align: start;
+ white-space: normal;
+ background: transparent;
+ outline-offset: 0.125rem;
+}
+span.pf-v6-c-button.pf-m-link.pf-m-inline {
+ --pf-v6-c-button--m-link--m-inline--Display: var(--pf-v6-c-button--span--m-link--m-inline--Display);
+ --pf-v6-c-button__icon--m-start--MarginInlineEnd: var(--pf-v6-c-button--span--m-link--m-inline__icon--m-start--MarginInlineEnd);
+ --pf-v6-c-button__icon--m-end--MarginInlineStart: var(--pf-v6-c-button--span--m-link--m-inline__icon--m-end--MarginInlineStart);
+}
+
+.pf-v6-c-button.pf-m-link.pf-m-danger {
+ --pf-v6-c-button--m-danger--Color: var(--pf-v6-c-button--m-link--m-danger--Color);
+ --pf-v6-c-button--m-danger--BackgroundColor: var(--pf-v6-c-button--m-link--m-danger--BackgroundColor);
+ --pf-v6-c-button--m-danger__icon--Color: var(--pf-v6-c-button--m-link--m-danger__icon--Color);
+ --pf-v6-c-button--m-danger--hover--Color: var(--pf-v6-c-button--m-link--m-danger--hover--Color);
+ --pf-v6-c-button--m-danger--hover--BackgroundColor: var(--pf-v6-c-button--m-link--m-danger--hover--BackgroundColor);
+ --pf-v6-c-button--m-danger--hover__icon--Color: var(--pf-v6-c-button--m-link--m-danger--hover__icon--Color);
+ --pf-v6-c-button--m-danger--m-clicked--Color: var(--pf-v6-c-button--m-link--m-danger--m-clicked--Color);
+ --pf-v6-c-button--m-danger--m-clicked--BackgroundColor: var(--pf-v6-c-button--m-link--m-danger--m-clicked--BackgroundColor);
+ --pf-v6-c-button--m-danger--m-clicked__icon--Color: var(--pf-v6-c-button--m-link--m-danger--m-clicked__icon--Color);
+}
+.pf-v6-c-button.pf-m-link.pf-m-display-lg {
+ --pf-v6-c-button--FontSize: var(--pf-v6-c-button--m-link--m-display-lg--FontSize);
+}
+.pf-v6-c-button.pf-m-warning {
+ --pf-v6-c-button--Color: var(--pf-v6-c-button--m-warning--Color);
+ --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--m-warning--BackgroundColor);
+ --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--m-warning__icon--Color);
+ --pf-v6-c-button--hover--Color: var(--pf-v6-c-button--m-warning--hover--Color);
+ --pf-v6-c-button--hover--BackgroundColor: var(--pf-v6-c-button--m-warning--hover--BackgroundColor);
+ --pf-v6-c-button--hover__icon--Color: var(--pf-v6-c-button--m-warning--hover__icon--Color);
+ --pf-v6-c-button--m-clicked--Color: var(--pf-v6-c-button--m-warning--m-clicked--Color);
+ --pf-v6-c-button--m-clicked--BackgroundColor: var(--pf-v6-c-button--m-warning--m-clicked--BackgroundColor);
+ --pf-v6-c-button--m-clicked__icon--Color: var(--pf-v6-c-button--m-warning--m-clicked__icon--Color);
+}
+.pf-v6-c-button.pf-m-danger {
+ --pf-v6-c-button--Color: var(--pf-v6-c-button--m-danger--Color);
+ --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--m-danger--BackgroundColor);
+ --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--m-danger__icon--Color);
+ --pf-v6-c-button--hover--Color: var(--pf-v6-c-button--m-danger--hover--Color);
+ --pf-v6-c-button--hover--BackgroundColor: var(--pf-v6-c-button--m-danger--hover--BackgroundColor);
+ --pf-v6-c-button--hover__icon--Color: var(--pf-v6-c-button--m-danger--hover__icon--Color);
+ --pf-v6-c-button--m-clicked--Color: var(--pf-v6-c-button--m-danger--m-clicked--Color);
+ --pf-v6-c-button--m-clicked--BackgroundColor: var(--pf-v6-c-button--m-danger--m-clicked--BackgroundColor);
+ --pf-v6-c-button--m-clicked__icon--Color: var(--pf-v6-c-button--m-danger--m-clicked__icon--Color);
+}
+.pf-v6-c-button.pf-m-control {
+ --pf-v6-c-button--BorderRadius: var(--pf-v6-c-button--m-control--BorderRadius);
+ --pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-button--m-control--PaddingInlineStart);
+ --pf-v6-c-button--PaddingInlineEnd: var(--pf-v6-c-button--m-control--PaddingInlineEnd);
+ --pf-v6-c-button--Color: var(--pf-v6-c-button--m-control--Color);
+ --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--m-control--BackgroundColor);
+ --pf-v6-c-button--BorderColor: var(--pf-v6-c-button--m-control--BorderColor);
+ --pf-v6-c-button--BorderWidth: var(--pf-v6-c-button--m-control--BorderWidth);
+ --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--m-control__icon--Color);
+ --pf-v6-c-button--hover--Color: var(--pf-v6-c-button--m-control--hover--Color);
+ --pf-v6-c-button--hover--BackgroundColor: var(--pf-v6-c-button--m-control--hover--BackgroundColor);
+ --pf-v6-c-button--hover--BorderColor: var(--pf-v6-c-button--m-control--hover--BorderColor);
+ --pf-v6-c-button--hover--BorderWidth: var(--pf-v6-c-button--m-control--hover--BorderWidth);
+ --pf-v6-c-button--hover__icon--Color: var(--pf-v6-c-button--m-control--hover__icon--Color);
+ --pf-v6-c-button--m-clicked--Color: var(--pf-v6-c-button--m-control--m-clicked--Color);
+ --pf-v6-c-button--m-clicked--BackgroundColor: var(--pf-v6-c-button--m-control--m-clicked--BackgroundColor);
+ --pf-v6-c-button--m-clicked--BorderColor: var(--pf-v6-c-button--m-control--m-clicked--BorderColor);
+ --pf-v6-c-button--m-clicked--BorderWidth: var(--pf-v6-c-button--m-control--m-clicked--BorderWidth);
+ --pf-v6-c-button--m-clicked__icon--Color: var(--pf-v6-c-button--m-control--m-clicked__icon--Color);
+ --pf-v6-c-button--m-small--PaddingInlineEnd: var(--pf-v6-c-button--m-control--m-small--PaddingInlineEnd);
+ --pf-v6-c-button--m-small--PaddingInlineStart: var(--pf-v6-c-button--m-control--m-small--PaddingInlineStart);
+}
+.pf-v6-c-button.pf-m-stateful {
+ --pf-v6-c-button--BorderRadius: var(--pf-v6-c-button--m-stateful--BorderRadius);
+ --pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-button--m-stateful--PaddingInlineStart);
+ --pf-v6-c-button--PaddingInlineEnd: var(--pf-v6-c-button--m-stateful--PaddingInlineEnd);
+ --pf-v6-c-button--m-small--PaddingInlineEnd: var(--pf-v6-c-button--m-stateful--m-small--PaddingInlineEnd);
+ --pf-v6-c-button--m-small--PaddingInlineStart: var(--pf-v6-c-button--m-stateful--m-small--PaddingInlineStart);
+}
+.pf-v6-c-button.pf-m-read {
+ --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--m-read--BackgroundColor);
+ --pf-v6-c-button--BorderColor: var(--pf-v6-c-button--m-read--BorderColor);
+ --pf-v6-c-button--hover--BackgroundColor: var(--pf-v6-c-button--m-read--hover--BackgroundColor);
+ --pf-v6-c-button--hover--BorderColor: var(--pf-v6-c-button--m-read--hover--BorderColor);
+ --pf-v6-c-button--m-clicked--BackgroundColor: var(--pf-v6-c-button--m-read--m-clicked--BackgroundColor);
+ --pf-v6-c-button--m-clicked--BorderColor: var(--pf-v6-c-button--m-read--m-clicked--BorderColor);
+}
+.pf-v6-c-button.pf-m-unread {
+ --pf-v6-c-button--Color: var(--pf-v6-c-button--m-unread--Color);
+ --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--m-unread--BackgroundColor);
+ --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--m-unread__icon--Color);
+ --pf-v6-c-button--hover--Color: var(--pf-v6-c-button--m-unread--hover--Color);
+ --pf-v6-c-button--hover--BackgroundColor: var(--pf-v6-c-button--m-unread--hover--BackgroundColor);
+ --pf-v6-c-button--hover__icon--Color: var(--pf-v6-c-button--m-unread--hover__icon--Color);
+ --pf-v6-c-button--m-clicked--Color: var(--pf-v6-c-button--m-unread--m-clicked--Color);
+ --pf-v6-c-button--m-clicked--BackgroundColor: var(--pf-v6-c-button--m-unread--m-clicked--BackgroundColor);
+ --pf-v6-c-button--m-clicked__icon--Color: var(--pf-v6-c-button--m-unread--m-clicked__icon--Color);
+}
+.pf-v6-c-button.pf-m-attention {
+ --pf-v6-c-button--Color: var(--pf-v6-c-button--m-attention--Color);
+ --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--m-attention--BackgroundColor);
+ --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--m-attention__icon--Color);
+ --pf-v6-c-button--hover--Color: var(--pf-v6-c-button--m-attention--hover--Color);
+ --pf-v6-c-button--hover--BackgroundColor: var(--pf-v6-c-button--m-attention--hover--BackgroundColor);
+ --pf-v6-c-button--hover__icon--Color: var(--pf-v6-c-button--m-attention--hover__icon--Color);
+ --pf-v6-c-button--m-clicked--Color: var(--pf-v6-c-button--m-attention--m-clicked--Color);
+ --pf-v6-c-button--m-clicked--BackgroundColor: var(--pf-v6-c-button--m-attention--m-clicked--BackgroundColor);
+ --pf-v6-c-button--m-clicked__icon--Color: var(--pf-v6-c-button--m-attention--m-clicked__icon--Color);
+}
+.pf-v6-c-button.pf-m-plain {
+ --pf-v6-c-button--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);
+ border: var(--pf-t--global--border--width--regular) solid var(--pf-t--global--border--color--high-contrast);
+}
+.pf-v6-c-button.pf-m-plain.pf-m-clicked {
+ border-width: var(--pf-t--global--border--width--strong);
+}
+.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);
+ border: 0;
+ min-width: var(--pf-v6-c-button--m-plain--m-no-padding--MinWidth);
+ background: var(--pf-v6-c-button--BackgroundColor);
+}
+.pf-v6-c-button.pf-m-block {
+ --pf-v6-c-button--Display: var(--pf-v6-c-button--m-block--Display);
+ width: var(--pf-v6-c-button--m-block--Width);
+}
+.pf-v6-c-button.pf-m-small {
+ --pf-v6-c-button--PaddingBlockStart: var(--pf-v6-c-button--m-small--PaddingBlockStart);
+ --pf-v6-c-button--PaddingInlineEnd: var(--pf-v6-c-button--m-small--PaddingInlineEnd);
+ --pf-v6-c-button--PaddingBlockEnd: var(--pf-v6-c-button--m-small--PaddingBlockEnd);
+ --pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-button--m-small--PaddingInlineStart);
+}
+.pf-v6-c-button.pf-m-display-lg {
+ --pf-v6-c-button--PaddingBlockStart: var(--pf-v6-c-button--m-display-lg--PaddingBlockStart);
+ --pf-v6-c-button--PaddingInlineEnd: var(--pf-v6-c-button--m-display-lg--PaddingInlineEnd);
+ --pf-v6-c-button--PaddingBlockEnd: var(--pf-v6-c-button--m-display-lg--PaddingBlockEnd);
+ --pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-button--m-display-lg--PaddingInlineStart);
+ --pf-v6-c-button--FontSize: var(--pf-v6-c-button--m-display-lg--FontSize);
+}
+.pf-v6-c-button.pf-m-favorite .pf-v6-c-button__icon {
+ display: grid;
+ transition-timing-function: var(--pf-v6-c-button--m-favorite__icon--TransitionTimingFunction);
+ transition-duration: var(--pf-v6-c-button--m-favorite__icon--TransitionDuration);
+ transition-property: color;
+}
+.pf-v6-c-button.pf-m-favorited {
+ --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--m-favorited__icon--Color);
+ --pf-v6-c-button--m-plain--m-no-padding__icon--Color: var(--pf-v6-c-button--m-favorited__icon--Color);
+ --pf-v6-c-button--hover__icon--Color: var(--pf-v6-c-button--m-favorited--hover__icon--Color);
+ --pf-v6-c-button--m-plain--m-no-padding--hover__icon--Color: var(--pf-v6-c-button--m-favorited--hover__icon--Color);
+ --pf-v6-c-button__icon--favorite--Opacity: var(--pf-v6-c-button--m-favorited__icon--favorite--Opacity);
+ --pf-v6-c-button__icon--favorited--Opacity: var(--pf-v6-c-button--m-favorited__icon--favorited--Opacity);
+}
+.pf-v6-c-button.pf-m-favorited .pf-v6-c-button__icon {
+ animation-name: pf-v6-c-button-icon-favorited;
+ animation-duration: var(--pf-v6-c-button--m-favorited__icon--AnimationDuration);
+ animation-timing-function: var(--pf-v6-c-button--m-favorited__icon--AnimationTimingFunction);
+}
+.pf-v6-c-button.pf-m-settings {
+ --pf-v6-c-button__icon--TransitionProperty: rotate;
+ --pf-v6-c-button__icon--TransitionDuration: var(--pf-v6-c-button--m-settings__icon--TransitionDuration);
+ --pf-v6-c-button__icon--TransitionTimingFunction: var(--pf-v6-c-button--m-settings__icon--TransitionTimingFunction);
+ --pf-v6-c-button--hover__icon--TransitionProperty: rotate;
+ --pf-v6-c-button--hover__icon--TransitionDuration: var(--pf-v6-c-button--m-settings--hover__icon--TransitionDuration);
+ --pf-v6-c-button--hover__icon--TransitionTimingFunction: var(--pf-v6-c-button--m-settings--hover__icon--TransitionTimingFunction);
+ --pf-v6-c-button--hover__icon--Rotate: var(--pf-v6-c-button--m-settings--hover__icon--Rotate);
+}
+.pf-v6-c-button.pf-m-hamburger {
+ --pf-v6-c-button__icon--TransitionDelay: var(--pf-v6-c-button--hamburger-icon--TransitionDuration);
+ --pf-v6-c-button__icon--TransitionDuration: 0s;
+ --pf-v6-c-button__icon--TransitionProperty: scale;
+ --pf-v6-c-button--hover__icon--TransitionDelay: var(--pf-v6-c-button--hamburger-icon--TransitionDuration);
+ --pf-v6-c-button--hover__icon--TransitionDuration: 0s;
+ --pf-v6-c-button--hover__icon--TransitionProperty: scale;
+}
+.pf-v6-c-button.pf-m-hamburger.pf-m-expand {
+ --pf-v6-c-button--hamburger-icon--top--path: var(--pf-v6-c-button--hamburger-icon--top--collapse--path);
+ --pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--collapse--path);
+ --pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--collapse--path);
+ --pf-v6-c-button__icon--TransitionDelay: 0s;
+ --pf-v6-c-button__icon--ScaleX: var(--pf-v6-c-button--m-hamburger__icon--m-expand--ScaleX);
+ --pf-v6-c-button--hover__icon--TransitionDelay: 0s;
+ --pf-v6-c-button--hover__icon--ScaleX: var(--pf-v6-c-button--m-hamburger__icon--m-expand--ScaleX);
+}
+.pf-v6-c-button.pf-m-hamburger.pf-m-collapse {
+ --pf-v6-c-button--hamburger-icon--top--path: var(--pf-v6-c-button--hamburger-icon--top--collapse--path);
+ --pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--collapse--path);
+ --pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--collapse--path);
+ --pf-v6-c-button__icon--TransitionDelay: 0s;
+ --pf-v6-c-button__icon--ScaleX: 1;
+ --pf-v6-c-button--hover__icon--TransitionDelay: 0s;
+ --pf-v6-c-button--hover__icon--ScaleX: 1;
+}
+.pf-v6-c-button:hover, .pf-v6-c-button:focus {
+ --pf-v6-c-button--Color: var(--pf-v6-c-button--hover--Color);
+ --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--hover--BackgroundColor);
+ --pf-v6-c-button--BorderColor: var(--pf-v6-c-button--hover--BorderColor);
+ --pf-v6-c-button--BorderWidth: var(--pf-v6-c-button--hover--BorderWidth);
+ --pf-v6-c-button--ScaleX: var(--pf-v6-c-button--hover--ScaleX);
+ --pf-v6-c-button--ScaleY: var(--pf-v6-c-button--hover--ScaleY);
+ --pf-v6-c-button--m-plain--m-no-padding__icon--Color: var(--pf-v6-c-button--m-plain--m-no-padding--hover__icon--Color);
+ --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--hover__icon--Color);
+ --pf-v6-c-button__icon--TransitionTimingFunction: var(--pf-v6-c-button--hover__icon--TransitionTimingFunction);
+ --pf-v6-c-button__icon--TransitionDuration: var(--pf-v6-c-button--hover__icon--TransitionDuration);
+ --pf-v6-c-button__icon--TransitionProperty: var(--pf-v6-c-button--hover__icon--TransitionProperty);
+ --pf-v6-c-button__icon--Rotate: var(--pf-v6-c-button--hover__icon--Rotate);
+ --pf-v6-c-button__icon--ScaleX: var(--pf-v6-c-button--hover__icon--ScaleX);
+ --pf-v6-c-button__icon--ScaleY: var(--pf-v6-c-button--hover__icon--ScaleY);
+ text-decoration-line: var(--pf-v6-c-button--hover--TextDecorationLine);
+ text-decoration-style: var(--pf-v6-c-button--hover--TextDecorationStyle);
+ text-decoration-color: var(--pf-v6-c-button--hover--TextDecorationColor);
+}
+.pf-v6-c-button:active, .pf-v6-c-button.pf-m-clicked {
+ --pf-v6-c-button--Color: var(--pf-v6-c-button--m-clicked--Color);
+ --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--m-clicked--BackgroundColor);
+ --pf-v6-c-button--BorderWidth: var(--pf-v6-c-button--m-clicked--BorderWidth);
+ --pf-v6-c-button--BorderColor: var(--pf-v6-c-button--m-clicked--BorderColor);
+ --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--m-clicked__icon--Color);
+}
+.pf-v6-c-button:active {
+ background-size: 100%;
+ transition-duration: 0s;
+}
+.pf-v6-c-button:disabled, .pf-v6-c-button.pf-m-disabled {
+ pointer-events: none;
+}
+.pf-v6-c-button:disabled, .pf-v6-c-button.pf-m-disabled, .pf-v6-c-button.pf-m-aria-disabled {
+ color: var(--pf-v6-c-button--disabled--Color);
+ text-decoration-color: var(--pf-v6-c-button--disabled--TextDecorationColor);
+ background: var(--pf-v6-c-button--disabled--BackgroundColor);
+}
+.pf-v6-c-button:disabled::after, .pf-v6-c-button.pf-m-disabled::after, .pf-v6-c-button.pf-m-aria-disabled::after {
+ border-color: transparent;
+}
+.pf-v6-c-button:disabled .pf-v6-c-button__icon, .pf-v6-c-button.pf-m-disabled .pf-v6-c-button__icon, .pf-v6-c-button.pf-m-aria-disabled .pf-v6-c-button__icon {
+ color: var(--pf-v6-c-button--disabled__icon--Color);
+}
+.pf-v6-c-button.pf-m-aria-disabled {
+ --pf-v6-c-button--m-link--m-inline--hover--TextDecorationLine: var(--pf-v6-c-button--TextDecorationLine);
+ --pf-v6-c-button--m-link--m-inline--hover--TextDecorationStyle: var(--pf-v6-c-button--TextDecorationStyle);
+ cursor: default;
+}
+.pf-v6-c-button.pf-m-progress {
+ --pf-v6-c-button--PaddingInlineEnd: var(--pf-v6-c-button--m-progress--PaddingInlineEnd);
+ --pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-button--m-progress--PaddingInlineStart);
+}
+.pf-v6-c-button.pf-m-in-progress {
+ --pf-v6-c-button--m-link--m-inline--PaddingInlineStart: var(--pf-v6-c-button--m-link--m-inline--m-in-progress--PaddingInlineStart);
+}
+.pf-v6-c-button.pf-m-in-progress:not(.pf-m-plain) {
+ --pf-v6-c-button--PaddingInlineEnd: var(--pf-v6-c-button--m-in-progress--PaddingInlineEnd);
+ --pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-button--m-in-progress--PaddingInlineStart);
+}
+.pf-v6-c-button.pf-m-in-progress.pf-m-plain {
+ --pf-v6-c-button__progress--InsetInlineStart: var(--pf-v6-c-button--m-in-progress--m-plain__progress--InsetInlineStart);
+ --pf-v6-c-button__progress--TranslateX: var(--pf-v6-c-button--m-in-progress--m-plain__progress--TranslateX);
+}
+.pf-v6-c-button.pf-m-in-progress.pf-m-plain > :not(.pf-v6-c-button__progress) {
+ opacity: 0;
+}
+.pf-v6-c-button.pf-m-notify .pf-v6-c-button__icon {
+ animation-name: pf-v6-c-button-icon-notify;
+ animation-duration: var(--pf-v6-c-button--m-notify__icon--AnimationDuration--notify);
+ animation-timing-function: var(--pf-v6-c-button--m-notify__icon--AnimationTimingFunction--notify);
+}
+
+.pf-v6-c-button__icon {
+ margin-inline-start: var(--pf-v6-c-button__icon--MarginInlineStart);
+ margin-inline-end: var(--pf-v6-c-button__icon--MarginInlineEnd);
+ color: var(--pf-v6-c-button__icon--Color);
+ transition-delay: var(--pf-v6-c-button__icon--TransitionDelay);
+ transition-timing-function: var(--pf-v6-c-button__icon--TransitionTimingFunction);
+ transition-duration: var(--pf-v6-c-button__icon--TransitionDuration);
+ transition-property: var(--pf-v6-c-button__icon--TransitionProperty);
+ rotate: var(--pf-v6-c-button__icon--Rotate);
+ scale: var(--pf-v6-c-button__icon--ScaleX) var(--pf-v6-c-button__icon--ScaleY);
+}
+.pf-v6-c-button__icon.pf-m-start {
+ --pf-v6-c-button__icon--MarginInlineEnd: var(--pf-v6-c-button__icon--m-start--MarginInlineEnd);
+}
+.pf-v6-c-button__icon.pf-m-end {
+ --pf-v6-c-button__icon--MarginInlineStart: var(--pf-v6-c-button__icon--m-end--MarginInlineStart);
+}
+
+.pf-v6-c-button__icon-favorite,
+.pf-v6-c-button__icon-favorited {
+ grid-area: 1/1/1/1;
+ transition-duration: var(--pf-v6-c-button__icon--favorite--TransitionDuration);
+ transition-property: opacity;
+}
+
+.pf-v6-c-button__icon-favorite {
+ opacity: var(--pf-v6-c-button__icon--favorite--Opacity);
+}
+
+.pf-v6-c-button__icon-favorited {
+ opacity: var(--pf-v6-c-button__icon--favorited--Opacity);
+}
+
+.pf-v6-c-button__progress {
+ position: absolute;
+ inset-block-start: var(--pf-v6-c-button__progress--InsetBlockStart);
+ inset-inline-start: var(--pf-v6-c-button__progress--InsetInlineStart);
+ line-height: 1;
+ color: var(--pf-v6-c-button__progress--Color);
+ transform: translate(var(--pf-v6-c-button__progress--TranslateX), var(--pf-v6-c-button__progress--TranslateY));
+}
+.pf-v6-c-button__progress .pf-v6-c-spinner {
+ --pf-v6-c-spinner--Color: currentcolor;
+}
+
+.pf-v6-c-button__text {
+ text-decoration: inherit;
+}
+
+.pf-v6-c-button__count {
+ display: inline-flex;
+ align-items: center;
+}
+
+.pf-v6-c-button--hamburger-icon path {
+ fill: none;
+ stroke: currentcolor;
+ stroke-linecap: round;
+ stroke-linejoin: round;
+ transition: d var(--pf-v6-c-button--hamburger-icon--TransitionDuration) var(--pf-v6-c-button--hamburger-icon--TransitionTimingFunction);
+}
+
+.pf-v6-c-button--hamburger-icon--top {
+ d: var(--pf-v6-c-button--hamburger-icon--top--path);
+}
+
+.pf-v6-c-button--hamburger-icon--middle {
+ d: var(--pf-v6-c-button--hamburger-icon--middle--path);
+}
+
+.pf-v6-c-button--hamburger-icon--arrow {
+ d: var(--pf-v6-c-button--hamburger-icon--arrow--path);
+}
+
+.pf-v6-c-button--hamburger-icon--bottom {
+ d: var(--pf-v6-c-button--hamburger-icon--bottom--path);
+}
+
+@keyframes pf-v6-c-button-icon-notify {
+ 33% {
+ transform: rotate(30deg);
+ }
+ 66% {
+ transform: rotate(-60deg);
+ }
+}
+@keyframes pf-v6-c-button-icon-favorited {
+ 50% {
+ scale: 1.5;
+ }
+}
+.pf-v6-c-calendar-month {
+ --pf-v6-c-calendar-month--BackgroundColor: var(--pf-t--global--background--color--primary--default);
+ --pf-v6-c-calendar-month--PaddingBlockStart: var(--pf-t--global--spacer--lg);
+ --pf-v6-c-calendar-month--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
+ --pf-v6-c-calendar-month--PaddingBlockEnd: var(--pf-t--global--spacer--md);
+ --pf-v6-c-calendar-month--PaddingInlineStart: var(--pf-t--global--spacer--lg);
+ --pf-v6-c-calendar-month--FontSize: var(--pf-t--global--font--size--sm);
+ --pf-v6-c-calendar-month__header--MarginBlockEnd: var(--pf-t--global--spacer--md);
+ --pf-v6-c-calendar-month__header--Gap: var(--pf-t--global--spacer--gap--control-to-control--default);
+ --pf-v6-c-calendar-month__header-year--Width: 9ch;
+ --pf-v6-c-calendar-month__header-nav-control--MarginInlineEnd: 0;
+ --pf-v6-c-calendar-month__header-nav-control--MarginInlineStart: 0;
+ --pf-v6-c-calendar-month__days--BorderBlockEndWidth: var(--pf-t--global--border--width--divider--default);
+ --pf-v6-c-calendar-month__days--BorderBlockEndColor: var(--pf-t--global--border--color--default);
+ --pf-v6-c-calendar-month__day--PaddingBlockEnd: var(--pf-t--global--spacer--md);
+ --pf-v6-c-calendar-month__day--FontWeight: var(--pf-t--global--font--weight--body--default);
+ --pf-v6-c-calendar-month__day--Color: var(--pf-t--global--text--color--regular);
+ --pf-v6-c-calendar-month__dates-cell--PaddingBlockStart: 0.125rem;
+ --pf-v6-c-calendar-month__dates-cell--PaddingInlineEnd: 0.125rem;
+ --pf-v6-c-calendar-month__dates-cell--PaddingBlockEnd: 0.125rem;
+ --pf-v6-c-calendar-month__dates-cell--PaddingInlineStart: 0.125rem;
+ --pf-v6-c-calendar-month__dates-row--first-child__dates-cell--PaddingBlockStart: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-calendar-month__dates-cell--m-current__date--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
+ --pf-v6-c-calendar-month__dates-cell--m-selected__date--BackgroundColor: var(--pf-t--global--color--brand--default);
+ --pf-v6-c-calendar-month__dates-cell--m-selected__date--hover--BackgroundColor: var(--pf-t--global--color--brand--default);
+ --pf-v6-c-calendar-month__dates-cell--m-selected__date--focus--BackgroundColor: var(--pf-t--global--color--brand--default);
+ --pf-v6-c-calendar-month__dates-cell--m-selected__date--focus--after--BorderColor: var(--pf-t--global--border--color--brand--default);
+ --pf-v6-c-calendar-month__dates-cell--m-selected__date--Color: var(--pf-t--global--text--color--on-brand--default);
+ --pf-v6-c-calendar-month__dates-cell--before--BackgroundColor: transparent;
+ --pf-v6-c-calendar-month__dates-cell--before--InsetBlockStart: 0;
+ --pf-v6-c-calendar-month__dates-cell--before--InsetInlineEnd: 0;
+ --pf-v6-c-calendar-month__dates-cell--before--InsetBlockEnd: var(--pf-v6-c-calendar-month__dates-cell--PaddingBlockEnd);
+ --pf-v6-c-calendar-month__dates-cell--before--InsetInlineStart: 0;
+ --pf-v6-c-calendar-month__dates-cell--m-in-range--before--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
+ --pf-v6-c-calendar-month__dates-cell--m-in-range--m-start-range--before--InsetInlineStart: 50%;
+ --pf-v6-c-calendar-month__dates-cell--m-in-range--m-end-range--before--InsetInlineEnd: 50%;
+ --pf-v6-c-calendar-month__dates-cell--m-in-range__date--hover--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
+ --pf-v6-c-calendar-month__dates-cell--m-in-range__date--hover--BorderWidth: var(--pf-t--global--border--width--regular);
+ --pf-v6-c-calendar-month__dates-cell--m-in-range__date--hover--BorderColor: var(--pf-t--global--border--color--hover);
+ --pf-v6-c-calendar-month__dates-cell--m-in-range__date--focus--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
+ --pf-v6-c-calendar-month__dates-cell--m-adjacent-month__date--Color: var(--pf-t--global--text--color--subtle);
+ --pf-v6-c-calendar-month__date--Width: 4ch;
+ --pf-v6-c-calendar-month__date--Height: 4ch;
+ --pf-v6-c-calendar-month__date--BorderRadius: var(--pf-t--global--border--radius--large);
+ --pf-v6-c-calendar-month__date--Color: var(--pf-t--global--text--color--regular);
+ --pf-v6-c-calendar-month__date--BackgroundColor: transparent;
+ --pf-v6-c-calendar-month__date--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
+ --pf-v6-c-calendar-month__date--disabled--Color: var(--pf-t--global--text--color--on-disabled);
+ --pf-v6-c-calendar-month__date--after--BorderWidth: var(--pf-t--global--border--width--regular);
+ --pf-v6-c-calendar-month__date--after--BorderColor: transparent;
+ --pf-v6-c-calendar-month__date--after--OutlineOffset: 0;
+ --pf-v6-c-calendar-month__date--hover--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
+ --pf-v6-c-calendar-month__date--hover--BorderWidth: var(--pf-t--global--border--width--regular);
+ --pf-v6-c-calendar-month__date--hover--BorderColor: var(--pf-t--global--border--color--hover);
+ --pf-v6-c-calendar-month__date--focus--Color: var(--pf-t--global--icon--color--on-brand--clicked);
+ --pf-v6-c-calendar-month__date--focus--BackgroundColor: var(--pf-t--global--color--brand--default);
+ --pf-v6-c-calendar-month__date--focus--after--BorderColor: var(--pf-t--global--border--color--hover);
+ --pf-v6-c-calendar-month__date--after--focus--OutlineOffset: -2px;
+}
+
+.pf-v6-c-calendar-month {
+ display: inline-flex;
+ flex-direction: column;
+ padding-block-start: var(--pf-v6-c-calendar-month--PaddingBlockStart);
+ padding-block-end: var(--pf-v6-c-calendar-month--PaddingBlockEnd);
+ padding-inline-start: var(--pf-v6-c-calendar-month--PaddingInlineStart);
+ padding-inline-end: var(--pf-v6-c-calendar-month--PaddingInlineEnd);
+ font-size: var(--pf-v6-c-calendar-month--FontSize);
+ background-color: var(--pf-v6-c-calendar-month--BackgroundColor);
+}
+
+.pf-v6-c-calendar-month__header {
+ display: flex;
+ gap: var(--pf-v6-c-calendar-month__header--Gap);
+ margin-block-end: var(--pf-v6-c-calendar-month__header--MarginBlockEnd);
+}
+
+.pf-v6-c-calendar-month__header-nav-control {
+ margin-inline-start: var(--pf-v6-c-calendar-month__header-nav-control--MarginInlineStart);
+ margin-inline-end: var(--pf-v6-c-calendar-month__header-nav-control--MarginInlineEnd);
+}
+:where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-calendar-month__header-nav-control {
+ scale: -1 1;
+}
+
+.pf-v6-c-calendar-month__header-month {
+ flex-grow: 1;
+}
+.pf-v6-c-calendar-month__header-month > .pf-v6-c-menu-toggle {
+ width: 100%;
+}
+
+.pf-v6-c-calendar-month__header-year {
+ width: var(--pf-v6-c-calendar-month__header-year--Width);
+}
+
+.pf-v6-c-calendar-month__calendar {
+ table-layout: fixed;
+}
+
+.pf-v6-c-calendar-month__days {
+ color: var(--pf-v6-c-calendar-month__day--Color);
+ border-block-end: var(--pf-v6-c-calendar-month__days--BorderBlockEndWidth) solid var(--pf-v6-c-calendar-month__days--BorderBlockEndColor);
+}
+
+.pf-v6-c-calendar-month__day {
+ padding-block-end: var(--pf-v6-c-calendar-month__day--PaddingBlockEnd);
+ font-weight: var(--pf-v6-c-calendar-month__day--FontWeight);
+ text-align: center;
+}
+
+.pf-v6-c-calendar-month__dates-row:first-child {
+ --pf-v6-c-calendar-month__dates-cell--PaddingBlockStart: var(--pf-v6-c-calendar-month__dates-row--first-child__dates-cell--PaddingBlockStart);
+}
+
+.pf-v6-c-calendar-month__dates-cell {
+ --pf-v6-c-calendar-month__dates-cell--before--InsetBlockStart: var(--pf-v6-c-calendar-month__dates-cell--PaddingBlockStart);
+ position: relative;
+ padding-block-start: var(--pf-v6-c-calendar-month__dates-cell--PaddingBlockStart);
+ padding-block-end: var(--pf-v6-c-calendar-month__dates-cell--PaddingBlockEnd);
+ padding-inline-start: var(--pf-v6-c-calendar-month__dates-cell--PaddingInlineStart);
+ padding-inline-end: var(--pf-v6-c-calendar-month__dates-cell--PaddingInlineEnd);
+ text-align: center;
+}
+.pf-v6-c-calendar-month__dates-cell::before {
+ position: absolute;
+ inset-block-start: var(--pf-v6-c-calendar-month__dates-cell--before--InsetBlockStart);
+ inset-block-end: var(--pf-v6-c-calendar-month__dates-cell--before--InsetBlockEnd);
+ inset-inline-start: var(--pf-v6-c-calendar-month__dates-cell--before--InsetInlineStart);
+ inset-inline-end: var(--pf-v6-c-calendar-month__dates-cell--before--InsetInlineEnd);
+ content: "";
+ background-color: var(--pf-v6-c-calendar-month__dates-cell--before--BackgroundColor);
+}
+.pf-v6-c-calendar-month__dates-cell.pf-m-current {
+ --pf-v6-c-calendar-month__date--BackgroundColor: var(--pf-v6-c-calendar-month__dates-cell--m-current__date--BackgroundColor);
+}
+.pf-v6-c-calendar-month__dates-cell.pf-m-in-range {
+ --pf-v6-c-calendar-month__dates-cell--before--BackgroundColor: var(--pf-v6-c-calendar-month__dates-cell--m-in-range--before--BackgroundColor);
+ --pf-v6-c-calendar-month__date--hover--BackgroundColor: var(--pf-v6-c-calendar-month__dates-cell--m-in-range__date--hover--BackgroundColor);
+ --pf-v6-c-calendar-month__date--hover--BorderWidth: var(--pf-v6-c-calendar-month__dates-cell--m-in-range__date--hover--BorderWidth);
+ --pf-v6-c-calendar-month__date--hover--BorderColor: var(--pf-v6-c-calendar-month__dates-cell--m-in-range__date--hover--BorderColor);
+ --pf-v6-c-calendar-month__date--focus--BackgroundColor: var(--pf-v6-c-calendar-month__dates-cell--m-in-range__date--focus--BackgroundColor);
+}
+.pf-v6-c-calendar-month__dates-cell.pf-m-start-range {
+ --pf-v6-c-calendar-month__dates-cell--before--InsetInlineStart: var(--pf-v6-c-calendar-month__dates-cell--m-in-range--m-start-range--before--InsetInlineStart);
+}
+.pf-v6-c-calendar-month__dates-cell.pf-m-end-range {
+ --pf-v6-c-calendar-month__dates-cell--before--InsetInlineEnd: var(--pf-v6-c-calendar-month__dates-cell--m-in-range--m-end-range--before--InsetInlineEnd);
+}
+.pf-v6-c-calendar-month__dates-cell.pf-m-adjacent-month {
+ --pf-v6-c-calendar-month__date--Color: var(--pf-v6-c-calendar-month__dates-cell--m-adjacent-month__date--Color);
+}
+.pf-v6-c-calendar-month__dates-cell.pf-m-selected {
+ --pf-v6-c-calendar-month__date--BackgroundColor: var(--pf-v6-c-calendar-month__dates-cell--m-selected__date--BackgroundColor);
+ --pf-v6-c-calendar-month__date--Color: var(--pf-v6-c-calendar-month__dates-cell--m-selected__date--Color);
+ --pf-v6-c-calendar-month__date--hover--BackgroundColor: var(--pf-v6-c-calendar-month__dates-cell--m-selected__date--hover--BackgroundColor);
+ --pf-v6-c-calendar-month__date--hover--BorderWidth: 0;
+ --pf-v6-c-calendar-month__date--focus--BackgroundColor: var(--pf-v6-c-calendar-month__dates-cell--m-selected__date--focus--BackgroundColor);
+ --pf-v6-c-calendar-month__date--focus--after--BorderColor: var(--pf-v6-c-calendar-month__dates-cell--m-selected__date--focus--after--BorderColor);
+ --pf-v6-c-calendar-month__date--after--OutlineOffset: var(--pf-v6-c-calendar-month__date--after--focus--OutlineOffset);
+}
+.pf-v6-c-calendar-month__dates-cell.pf-m-disabled {
+ --pf-v6-c-calendar-month__dates-cell--before--BackgroundColor: transparent;
+ --pf-v6-c-calendar-month__date--BackgroundColor: transparent;
+}
+
+.pf-v6-c-calendar-month__date {
+ position: relative;
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ width: var(--pf-v6-c-calendar-month__date--Width);
+ height: var(--pf-v6-c-calendar-month__date--Height);
+ line-height: 1;
+ color: var(--pf-v6-c-calendar-month__date--Color);
+ background-color: var(--pf-v6-c-calendar-month__date--BackgroundColor);
+ border: 0;
+}
+.pf-v6-c-calendar-month__date::after {
+ position: absolute;
+ inset-block-start: var(--pf-v6-c-calendar-month__date--after--OutlineOffset);
+ inset-block-end: var(--pf-v6-c-calendar-month__date--after--OutlineOffset);
+ inset-inline-start: var(--pf-v6-c-calendar-month__date--after--OutlineOffset);
+ inset-inline-end: var(--pf-v6-c-calendar-month__date--after--OutlineOffset);
+ content: "";
+ border: var(--pf-v6-c-calendar-month__date--after--BorderWidth) solid var(--pf-v6-c-calendar-month__date--after--BorderColor);
+}
+.pf-v6-c-calendar-month__date, .pf-v6-c-calendar-month__date::after {
+ border-radius: var(--pf-v6-c-calendar-month__date--BorderRadius);
+}
+.pf-v6-c-calendar-month__date:hover, .pf-v6-c-calendar-month__date.pf-m-hover {
+ --pf-v6-c-calendar-month__date--BackgroundColor: var(--pf-v6-c-calendar-month__date--hover--BackgroundColor);
+ border: var(--pf-v6-c-calendar-month__date--hover--BorderColor) solid var(--pf-v6-c-calendar-month__date--hover--BorderWidth);
+}
+.pf-v6-c-calendar-month__date:focus, .pf-v6-c-calendar-month__date.pf-m-focus {
+ --pf-v6-c-calendar-month__date--after--BorderColor: var(--pf-v6-c-calendar-month__date--focus--after--BorderColor);
+ outline: 0;
+}
+.pf-v6-c-calendar-month__date:disabled {
+ --pf-v6-c-calendar-month__date--BackgroundColor: var(--pf-v6-c-calendar-month__date--disabled--BackgroundColor);
+ --pf-v6-c-calendar-month__date--Color: var(--pf-v6-c-calendar-month__date--disabled--Color);
+ --pf-v6-c-calendar-month__date--hover--focus--BorderColor: transparent;
+ pointer-events: none;
+}
+
+.pf-v6-c-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--default);
+ --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: 90deg;
+ --pf-v6-c-card--m-selectable--BorderWidth: var(--pf-v6-c-card--BorderWidth);
+ --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--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-secondary--BorderColor: transparent;
+ --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 {
+ 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;
+}
+.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 {
+ 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.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--BorderColor: var(--pf-v6-c-card--m-secondary--BorderColor);
+ --pf-v6-c-card--BackgroundColor: var(--pf-v6-c-card--m-secondary--BackgroundColor);
+}
+.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);
+}
+.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-start: 0;
+}
+.pf-v6-c-card__header.pf-m-wrap .pf-v6-c-card__actions + * {
+ margin-inline-end: auto;
+}
+
+.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);
+}
+
+.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;
+}
+:where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-card__header-toggle-icon {
+ scale: -1 1;
+}
+
+.pf-v6-c-card__title-text {
+ overflow: auto;
+ 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__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--m-selectable--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__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--m-selectable--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 {
+ background: none;
+ border: 0;
+ outline: 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);
+}
+
+.pf-v6-c-check {
+ --pf-v6-c-check--GridGap: var(--pf-t--global--spacer--gap--group--vertical) var(--pf-t--global--spacer--gap--text-to-element--default);
+ --pf-v6-c-check--AccentColor: var(--pf-t--global--color--brand--default);
+ --pf-v6-c-check--m-standalone--MinHeight: calc(var(--pf-v6-c-check__label--FontSize) * var(--pf-v6-c-check__label--LineHeight));
+ --pf-v6-c-check__label--disabled--Color: var(--pf-t--global--text--color--disabled);
+ --pf-v6-c-check__label--Color: var(--pf-t--global--text--color--regular);
+ --pf-v6-c-check__label--FontWeight: var(--pf-t--global--font--weight--body--default);
+ --pf-v6-c-check__label--FontSize: var(--pf-t--global--font--size--body--default);
+ --pf-v6-c-check__label--LineHeight: var(--pf-t--global--font--line-height--body);
+ --pf-v6-c-check__description--FontSize: var(--pf-t--global--font--size--body--sm);
+ --pf-v6-c-check__description--Color: var(--pf-t--global--text--color--subtle);
+ --pf-v6-c-check__label-required--MarginInlineStart: var(--pf-t--global--spacer--xs);
+ --pf-v6-c-check__label-required--FontSize: var(--pf-t--global--font--size--body--sm);
+ --pf-v6-c-check__label-required--Color: var(--pf-t--global--color--status--danger--default);
+ --pf-v6-c-check__input--TranslateY: calc((var(--pf-v6-c-check__label--LineHeight) * var(--pf-v6-c-check__label--FontSize) / 2 ) - 50%);
+}
+
+.pf-v6-c-check {
+ display: grid;
+ grid-template-columns: auto 1fr;
+ grid-gap: var(--pf-v6-c-check--GridGap);
+ accent-color: var(--pf-v6-c-check--AccentColor);
+}
+.pf-v6-c-check.pf-m-standalone {
+ display: inline-grid;
+ grid-template-columns: auto;
+ min-height: var(--pf-v6-c-check--m-standalone--MinHeight);
+}
+.pf-v6-c-check.pf-m-standalone .pf-v6-c-check__input {
+ align-self: center;
+ transform: none;
+}
+
+.pf-v6-c-check__input {
+ align-self: start;
+ font-size: var(--pf-v6-c-check__label--FontSize);
+ line-height: var(--pf-v6-c-check__label--LineHeight);
+ transform: translateY(var(--pf-v6-c-check__input--TranslateY));
+}
+
+.pf-v6-c-check__label {
+ font-size: var(--pf-v6-c-check__label--FontSize);
+ font-weight: var(--pf-v6-c-check__label--FontWeight);
+ line-height: var(--pf-v6-c-check__label--LineHeight);
+ color: var(--pf-v6-c-check__label--Color);
+}
+
+.pf-v6-c-check__description {
+ grid-column: 2;
+ font-size: var(--pf-v6-c-check__description--FontSize);
+ color: var(--pf-v6-c-check__description--Color);
+}
+
+.pf-v6-c-check__body {
+ grid-column: 2;
+}
+
+.pf-v6-c-check__label,
+.pf-v6-c-check__input {
+ justify-self: start;
+}
+label.pf-v6-c-check, .pf-v6-c-check__label,
+.pf-v6-c-check__input {
+ cursor: pointer;
+}
+
+.pf-v6-c-check__label:disabled, .pf-v6-c-check__label.pf-m-disabled,
+.pf-v6-c-check__input:disabled,
+.pf-v6-c-check__input.pf-m-disabled {
+ --pf-v6-c-check__label--Color: var(--pf-v6-c-check__label--disabled--Color);
+ cursor: not-allowed;
+}
+
+.pf-v6-c-check__label-required {
+ margin-inline-start: var(--pf-v6-c-check__label-required--MarginInlineStart);
+ font-size: var(--pf-v6-c-check__label-required--FontSize);
+ color: var(--pf-v6-c-check__label-required--Color);
+}
+
+.pf-v6-c-clipboard-copy {
+ --pf-v6-c-clipboard-copy__toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
+ --pf-v6-c-clipboard-copy__toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
+ --pf-v6-c-clipboard-copy__toggle-icon--Transition: transform var(--pf-v6-c-clipboard-copy__toggle-icon--TransitionDuration) var(--pf-v6-c-clipboard-copy__toggle-icon--TransitionTimingFunction);
+ --pf-v6-c-clipboard-copy--m-expanded__toggle-icon--Rotate: 90deg;
+ --pf-v6-c-clipboard-copy__expandable-content--MarginBlockStart: var(--pf-t--global--spacer--xs);
+ --pf-v6-c-clipboard-copy__expandable-content--PaddingBlockStart: var(--pf-t--global--spacer--md);
+ --pf-v6-c-clipboard-copy__expandable-content--PaddingInlineEnd: var(--pf-t--global--spacer--md);
+ --pf-v6-c-clipboard-copy__expandable-content--PaddingBlockEnd: var(--pf-t--global--spacer--md);
+ --pf-v6-c-clipboard-copy__expandable-content--PaddingInlineStart: var(--pf-t--global--spacer--md);
+ --pf-v6-c-clipboard-copy__expandable-content--BackgroundColor: var(--pf-t--global--background--color--primary--default);
+ --pf-v6-c-clipboard-copy__expandable-content--BorderBlockStartWidth: var(--pf-t--global--border--width--control--default);
+ --pf-v6-c-clipboard-copy__expandable-content--BorderInlineEndWidth: var(--pf-t--global--border--width--control--default);
+ --pf-v6-c-clipboard-copy__expandable-content--BorderBlockEndWidth: var(--pf-t--global--border--width--control--default);
+ --pf-v6-c-clipboard-copy__expandable-content--BorderInlineStartWidth: var(--pf-t--global--border--width--control--default);
+ --pf-v6-c-clipboard-copy__expandable-content--BorderColor: var(--pf-t--global--border--color--default);
+ --pf-v6-c-clipboard-copy__expandable-content--BorderRadius: var(--pf-t--global--border--radius--small);
+ --pf-v6-c-clipboard-copy__expandable-content--OutlineOffset: var(--pf-t--global--spacer--xs);
+ --pf-v6-c-clipboard-copy__group--Gap: var(--pf-t--global--spacer--gap--control-to-control--default);
+ --pf-v6-c-clipboard-copy--m-inline--PaddingInlineStart: var(--pf-t--global--spacer--xs);
+ --pf-v6-c-clipboard-copy--m-inline--PaddingInlineEnd: var(--pf-t--global--spacer--xs);
+ --pf-v6-c-clipboard-copy--m-inline--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
+ --pf-v6-c-clipboard-copy__actions--Gap: var(--pf-t--global--spacer--gap--action-to-action--plain);
+ --pf-v6-c-clipboard-copy__actions--MarginInlineStart: var(--pf-t--global--spacer--gap--text-to-element--compact);
+ --pf-v6-c-clipboard-copy__actions-item--button--Color: var(--pf-t--global--icon--color--subtle);
+ --pf-v6-c-clipboard-copy__actions-item--button--hover--Color: var(--pf-t--global--icon--color--regular);
+ --pf-v6-c-clipboard-copy__text--m-code--FontFamily: var(--pf-t--global--font--family--mono);
+ --pf-v6-c-clipboard-copy__text--m-code--FontSize: var(--pf-t--global--font--size--body--default);
+}
+
+.pf-v6-c-clipboard-copy.pf-m-expanded .pf-v6-c-clipboard-copy__toggle-icon {
+ transform: rotate(var(--pf-v6-c-clipboard-copy--m-expanded__toggle-icon--Rotate));
+}
+.pf-v6-c-clipboard-copy.pf-m-inline {
+ display: inline;
+ padding-inline-start: var(--pf-v6-c-clipboard-copy--m-inline--PaddingInlineStart);
+ padding-inline-end: var(--pf-v6-c-clipboard-copy--m-inline--PaddingInlineEnd);
+ white-space: nowrap;
+ background-color: var(--pf-v6-c-clipboard-copy--m-inline--BackgroundColor);
+}
+.pf-v6-c-clipboard-copy.pf-m-inline.pf-m-block {
+ display: block;
+}
+.pf-v6-c-clipboard-copy.pf-m-inline.pf-m-truncate {
+ display: inline-flex;
+}
+
+.pf-v6-c-clipboard-copy__group {
+ display: flex;
+ gap: var(--pf-v6-c-clipboard-copy__group--Gap);
+}
+
+.pf-v6-c-clipboard-copy__toggle-icon {
+ transition: var(--pf-v6-c-clipboard-copy__toggle-icon--Transition);
+}
+:where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-clipboard-copy__toggle-icon {
+ scale: -1 1;
+}
+
+.pf-v6-c-clipboard-copy__expandable-content {
+ padding-block-start: var(--pf-v6-c-clipboard-copy__expandable-content--PaddingBlockStart);
+ padding-block-end: var(--pf-v6-c-clipboard-copy__expandable-content--PaddingBlockEnd);
+ padding-inline-start: var(--pf-v6-c-clipboard-copy__expandable-content--PaddingInlineStart);
+ padding-inline-end: var(--pf-v6-c-clipboard-copy__expandable-content--PaddingInlineEnd);
+ margin-block-start: var(--pf-v6-c-clipboard-copy__expandable-content--MarginBlockStart);
+ word-wrap: break-word;
+ background-color: var(--pf-v6-c-clipboard-copy__expandable-content--BackgroundColor);
+ background-clip: padding-box;
+ border: solid var(--pf-v6-c-clipboard-copy__expandable-content--BorderColor);
+ border-block-start-width: var(--pf-v6-c-clipboard-copy__expandable-content--BorderBlockStartWidth);
+ border-block-end-width: var(--pf-v6-c-clipboard-copy__expandable-content--BorderBlockEndWidth);
+ border-inline-start-width: var(--pf-v6-c-clipboard-copy__expandable-content--BorderInlineStartWidth);
+ border-inline-end-width: var(--pf-v6-c-clipboard-copy__expandable-content--BorderInlineEndWidth);
+ border-radius: var(--pf-v6-c-clipboard-copy__expandable-content--BorderRadius);
+ box-shadow: var(--pf-v6-c-clipboard-copy__expandable-content--BoxShadow);
+}
+.pf-v6-c-clipboard-copy__expandable-content pre {
+ white-space: pre-wrap;
+}
+
+.pf-v6-c-clipboard-copy__text {
+ word-break: break-word;
+ white-space: normal;
+}
+.pf-v6-c-clipboard-copy__text.pf-m-code {
+ font-family: var(--pf-v6-c-clipboard-copy__text--m-code--FontFamily);
+ font-size: var(--pf-v6-c-clipboard-copy__text--m-code--FontSize);
+}
+
+.pf-v6-c-clipboard-copy__actions {
+ display: inline-flex;
+ gap: var(--pf-v6-c-clipboard-copy__actions--Gap);
+ margin-inline-start: var(--pf-v6-c-clipboard-copy__actions--MarginInlineStart);
+}
+
+.pf-v6-c-clipboard-copy__actions-item .pf-v6-c-button.pf-m-plain {
+ --pf-v6-c-button--m-plain__icon--Color: var(--pf-v6-c-clipboard-copy__actions-item--button--Color);
+ --pf-v6-c-button--m-plain--hover__icon--Color: var(--pf-v6-c-clipboard-copy__actions-item--button--hover--Color);
+}
+
+.pf-v6-c-code-block {
+ --pf-v6-c-code-block--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
+ --pf-v6-c-code-block--BorderRadius: var(--pf-t--global--border--radius--medium);
+ --pf-v6-c-code-block__header--BorderBlockEndWidth: var(--pf-t--global--border--width--divider--default);
+ --pf-v6-c-code-block__header--BorderBlockEndColor: var(--pf-t--global--border--color--default);
+ --pf-v6-c-code-block__header--PaddingBlockStart: var(--pf-t--global--spacer--xs);
+ --pf-v6-c-code-block__header--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
+ --pf-v6-c-code-block__header--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-code-block__header--PaddingInlineStart: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-code-block__content--PaddingBlockStart: var(--pf-t--global--spacer--md);
+ --pf-v6-c-code-block__content--PaddingInlineEnd: var(--pf-t--global--spacer--md);
+ --pf-v6-c-code-block__content--PaddingBlockEnd: var(--pf-t--global--spacer--md);
+ --pf-v6-c-code-block__content--PaddingInlineStart: var(--pf-t--global--spacer--md);
+ --pf-v6-c-code-block__pre--FontFamily: var(--pf-t--global--font--family--mono);
+ --pf-v6-c-code-block__pre--FontSize: var(--pf-t--global--font--size--xs);
+}
+
+.pf-v6-c-code-block {
+ background-color: var(--pf-v6-c-code-block--BackgroundColor);
+ border-radius: var(--pf-v6-c-code-block--BorderRadius);
+}
+
+.pf-v6-c-code-block__header {
+ display: flex;
+ padding-block-start: var(--pf-v6-c-code-block__header--PaddingBlockStart);
+ padding-block-end: var(--pf-v6-c-code-block__header--PaddingBlockEnd);
+ padding-inline-start: var(--pf-v6-c-code-block__header--PaddingInlineStart);
+ padding-inline-end: var(--pf-v6-c-code-block__header--PaddingInlineEnd);
+ border-block-end: var(--pf-v6-c-code-block__header--BorderBlockEndWidth) solid var(--pf-v6-c-code-block__header--BorderBlockEndColor);
+}
+
+.pf-v6-c-code-block__actions {
+ display: flex;
+ margin-inline-start: auto;
+}
+
+.pf-v6-c-code-block__content {
+ padding-block-start: var(--pf-v6-c-code-block__content--PaddingBlockStart);
+ padding-block-end: var(--pf-v6-c-code-block__content--PaddingBlockEnd);
+ padding-inline-start: var(--pf-v6-c-code-block__content--PaddingInlineStart);
+ padding-inline-end: var(--pf-v6-c-code-block__content--PaddingInlineEnd);
+}
+
+.pf-v6-c-code-block__pre {
+ font-family: var(--pf-v6-c-code-block__pre--FontFamily);
+ font-size: var(--pf-v6-c-code-block__pre--FontSize);
+ overflow-wrap: break-word;
+ white-space: pre-wrap;
+}
+
+.pf-v6-c-code-block__code {
+ font-family: var(--pf-v6-c-code-block__code--FontFamily, inherit);
+}
+
+.pf-v6-c-code-editor {
+ --pf-v6-c-code-editor__controls--PaddingInlineStart: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-code-editor__controls--Gap: var(--pf-t--global--spacer--gap--action-to-action--plain);
+ --pf-v6-c-code-editor__header--before--BorderBlockEndWidth: var(--pf-t--global--border--width--box--default);
+ --pf-v6-c-code-editor__header--before--BorderBlockEndColor: var(--pf-t--global--border--color--default);
+ --pf-v6-c-code-editor__header-content--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
+ --pf-v6-c-code-editor__header-content--m-plain--BackgroundColor: var(--pf-t--global--background--color--primary--default);
+ --pf-v6-c-code-editor__header-content--PaddingBlockStart: var(--pf-t--global--spacer--xs);
+ --pf-v6-c-code-editor__header-content--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
+ --pf-v6-c-code-editor__header-content--PaddingInlineStart: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-code-editor__header-content--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-code-editor__header-content--BorderStartStartRadius: var(--pf-t--global--border--radius--medium);
+ --pf-v6-c-code-editor__header-content--BorderStartEndRadius: var(--pf-t--global--border--radius--medium);
+ --pf-v6-c-code-editor__upload--PaddingInlineStart: var(--pf-t--global--spacer--md);
+ --pf-v6-c-code-editor__upload--PaddingInlineEnd: var(--pf-t--global--spacer--md);
+ --pf-v6-c-code-editor__upload--PaddingBlockStart: var(--pf-t--global--spacer--md);
+ --pf-v6-c-code-editor__upload--PaddingBlockEnd: var(--pf-t--global--spacer--md);
+ --pf-v6-c-code-editor__upload--BorderRadius: var(--pf-t--global--border--radius--medium);
+ --pf-v6-c-code-editor__main--BorderColor: var(--pf-t--global--border--color--default);
+ --pf-v6-c-code-editor__main--BorderWidth: var(--pf-t--global--border--width--box--default);
+ --pf-v6-c-code-editor__main--BorderEndStartRadius: var(--pf-t--global--border--radius--medium);
+ --pf-v6-c-code-editor__main--BorderEndEndRadius: var(--pf-t--global--border--radius--medium);
+ --pf-v6-c-code-editor__main--BackgroundColor: var(--pf-t--global--background--color--primary--default);
+ --pf-v6-c-code-editor--m-read-only__main--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
+ --pf-v6-c-code-editor__upload--before--BorderWidth: 0;
+ --pf-v6-c-code-editor__upload--before--BorderColor: transparent;
+ --pf-v6-c-code-editor__main--m-drag-hover--before--BorderWidth: var(--pf-t--global--border--width--divider--hover);
+ --pf-v6-c-code-editor__main--m-drag-hover--before--BorderColor: var( --pf-t--global--border--color--clicked);
+ --pf-v6-c-code-editor__main--m-drag-hover--after--BackgroundColor: var(--pf-t--global--background--color--primary--default);
+ --pf-v6-c-code-editor__main--m-drag-hover--after--Opacity: .1;
+ --pf-v6-c-code-editor__code--PaddingBlockStart: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-code-editor__code--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-code-editor__code--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-code-editor__code--PaddingInlineStart: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-code-editor__code-pre--FontSize: var(--pf-t--global--font--size--sm);
+ --pf-v6-c-code-editor__code-pre--FontFamily: var(--pf-t--global--font--family--mono);
+ --pf-v6-c-code-editor__header-main--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-code-editor__header-main--PaddingInlineStart: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-code-editor__tab--BackgroundColor: var(--pf-t--global--background--color--primary--default);
+ --pf-v6-c-code-editor__tab--Color: var(--pf-t--global--text--color--subtle);
+ --pf-v6-c-code-editor__tab--PaddingBlockStart: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-code-editor__tab--PaddingInlineEnd: var( --pf-t--global--spacer--sm);
+ --pf-v6-c-code-editor__tab--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-code-editor__tab--PaddingInlineStart: var( --pf-t--global--spacer--sm);
+ --pf-v6-c-code-editor__tab--BorderBlockStartWidth: var(--pf-t--global--border--width--box--default);
+ --pf-v6-c-code-editor__tab--BorderInlineEndWidth: var(--pf-t--global--border--width--box--default);
+ --pf-v6-c-code-editor__tab--BorderBlockEndWidth: 0;
+ --pf-v6-c-code-editor__tab--BorderInlineStartWidth: var(--pf-t--global--border--width--box--default);
+ --pf-v6-c-code-editor__tab--BorderColor: var(--pf-t--global--border--color--default);
+ --pf-v6-c-code-editor__tab--BorderStartEndRadius: var(--pf-t--global--border--radius--medium);
+ --pf-v6-c-code-editor__tab-icon--text--MarginInlineStart: var(--pf-t--global--spacer--sm);
+}
+
+.pf-v6-c-code-editor {
+ display: flex;
+ flex-direction: column;
+}
+.pf-v6-c-code-editor.pf-m-read-only {
+ --pf-v6-c-code-editor__main--BackgroundColor: var(--pf-v6-c-code-editor--m-read-only__main--BackgroundColor);
+}
+.pf-v6-c-code-editor.pf-m-full-height {
+ height: 100%;
+}
+
+.pf-v6-c-code-editor__container {
+ display: flex;
+ flex-direction: column;
+ flex-grow: 1;
+}
+
+.pf-v6-c-code-editor__header {
+ position: relative;
+ display: flex;
+}
+.pf-v6-c-code-editor__header::before {
+ position: absolute;
+ inset-block-end: 0;
+ inset-inline-start: 0;
+ inset-inline-end: 0;
+ pointer-events: none;
+ content: "";
+ border-block-end: var(--pf-v6-c-code-editor__header--before--BorderBlockEndWidth) solid var(--pf-v6-c-code-editor__header--before--BorderBlockEndColor);
+}
+.pf-v6-c-code-editor__header.pf-m-plain {
+ --pf-v6-c-code-editor__header-content--BackgroundColor: var(--pf-v6-c-code-editor__header-content--m-plain--BackgroundColor);
+}
+
+.pf-v6-c-code-editor__header-content {
+ display: flex;
+ flex: 1;
+ align-items: flex-end;
+ padding-block-start: var(--pf-v6-c-code-editor__header-content--PaddingBlockStart);
+ padding-block-end: var(--pf-v6-c-code-editor__header-content--PaddingBlockEnd);
+ padding-inline-start: var(--pf-v6-c-code-editor__header-content--PaddingInlineStart);
+ padding-inline-end: var(--pf-v6-c-code-editor__header-content--PaddingInlineEnd);
+ background-color: var(--pf-v6-c-code-editor__header-content--BackgroundColor);
+ border-start-start-radius: var(--pf-v6-c-code-editor__header-content--BorderStartStartRadius);
+}
+.pf-v6-c-code-editor__header-content:last-child {
+ border-start-end-radius: var(--pf-v6-c-code-editor__header-content--BorderStartEndRadius);
+}
+
+.pf-v6-c-code-editor__controls {
+ display: flex;
+ gap: var(--pf-v6-c-code-editor__controls--Gap);
+ align-items: flex-start;
+}
+
+.pf-v6-c-code-editor__header-main {
+ flex-grow: 1;
+ align-self: center;
+ padding-inline-start: var(--pf-v6-c-code-editor__header-main--PaddingInlineStart);
+ padding-inline-end: var(--pf-v6-c-code-editor__header-main--PaddingInlineEnd);
+}
+
+.pf-v6-c-code-editor__upload {
+ position: relative;
+ padding-block-start: var(--pf-v6-c-code-editor__upload--PaddingBlockStart);
+ padding-block-end: var(--pf-v6-c-code-editor__upload--PaddingBlockEnd);
+ padding-inline-start: var(--pf-v6-c-code-editor__upload--PaddingInlineStart);
+ padding-inline-end: var(--pf-v6-c-code-editor__upload--PaddingInlineEnd);
+}
+.pf-v6-c-code-editor__upload::before {
+ position: absolute;
+ inset-block-start: var(--pf-v6-c-code-editor__upload--PaddingBlockStart);
+ inset-block-end: var(--pf-v6-c-code-editor__upload--PaddingBlockEnd);
+ inset-inline-start: var(--pf-v6-c-code-editor__upload--PaddingInlineStart);
+ inset-inline-end: var(--pf-v6-c-code-editor__upload--PaddingInlineEnd);
+ content: "";
+ border: var(--pf-v6-c-code-editor__upload--before--BorderWidth) dashed var(--pf-v6-c-code-editor__upload--before--BorderColor);
+ border-radius: var(--pf-v6-c-code-editor__upload--BorderRadius);
+}
+
+.pf-v6-c-code-editor__main {
+ position: relative;
+ flex-grow: 1;
+ color: var(--pf-v6-c-code-editor__main--Color, inherit);
+ background-color: var(--pf-v6-c-code-editor__main--BackgroundColor);
+ border: var(--pf-v6-c-code-editor__main--BorderWidth) solid;
+ border-color: var(--pf-v6-c-code-editor__main--BorderColor);
+ border-end-start-radius: var(--pf-v6-c-code-editor__main--BorderEndStartRadius);
+ border-end-end-radius: var(--pf-v6-c-code-editor__main--BorderEndEndRadius);
+}
+.pf-v6-c-code-editor__main.pf-m-drag-hover {
+ --pf-v6-c-code-editor__upload--before--BorderWidth: var(--pf-v6-c-code-editor__main--m-drag-hover--before--BorderWidth);
+ --pf-v6-c-code-editor__upload--before--BorderColor: var(--pf-v6-c-code-editor__main--m-drag-hover--before--BorderColor);
+}
+.pf-v6-c-code-editor__main .monaco-editor {
+ background-color: var(--pf-v6-c-code-editor__main--BackgroundColor);
+}
+.pf-v6-c-code-editor__main a.label-name {
+ text-decoration-line: none;
+}
+
+.pf-v6-c-code-editor__header + .pf-v6-c-code-editor__main {
+ border-block-start-width: 0;
+}
+
+.pf-v6-c-code-editor__code {
+ position: relative;
+ height: 100%;
+ padding-block-start: var(--pf-v6-c-code-editor__code--PaddingBlockStart);
+ padding-block-end: var(--pf-v6-c-code-editor__code--PaddingBlockEnd);
+ padding-inline-start: var(--pf-v6-c-code-editor__code--PaddingInlineStart);
+ padding-inline-end: var(--pf-v6-c-code-editor__code--PaddingInlineEnd);
+}
+.pf-v6-c-code-editor__code .pf-v6-c-code-editor__code-pre {
+ font-family: var(--pf-v6-c-code-editor__code-pre--FontFamily);
+ font-size: var(--pf-v6-c-code-editor__code-pre--FontSize);
+ white-space: pre-wrap;
+}
+
+.pf-v6-c-code-editor__tab {
+ position: relative;
+ display: flex;
+ align-items: center;
+ padding-block-start: var(--pf-v6-c-code-editor__tab--PaddingBlockStart);
+ padding-block-end: var(--pf-v6-c-code-editor__tab--PaddingBlockEnd);
+ padding-inline-start: var(--pf-v6-c-code-editor__tab--PaddingInlineStart);
+ padding-inline-end: var(--pf-v6-c-code-editor__tab--PaddingInlineEnd);
+ color: var(--pf-v6-c-code-editor__tab--Color);
+ background-color: var(--pf-v6-c-code-editor__tab--BackgroundColor);
+ border-color: var(--pf-v6-c-code-editor__tab--BorderColor);
+ border-style: solid;
+ border-block-start-width: var(--pf-v6-c-code-editor__tab--BorderBlockStartWidth);
+ border-block-end-width: var(--pf-v6-c-code-editor__tab--BorderBlockEndWidth);
+ border-inline-start-width: var(--pf-v6-c-code-editor__tab--BorderInlineStartWidth);
+ border-inline-end-width: var(--pf-v6-c-code-editor__tab--BorderInlineEndWidth);
+ border-start-end-radius: var(--pf-v6-c-code-editor__tab--BorderStartEndRadius);
+}
+
+.pf-v6-c-code-editor__tab-icon + .pf-v6-c-code-editor__tab-text {
+ margin-inline-start: var(--pf-v6-c-code-editor__tab-icon--text--MarginInlineStart);
+}
+
+: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);
+ grid-row-gap: var(--pf-v6-c-content--dl--RowGap);
+ grid-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;
+ }
+}
+
+@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);
+ --pf-v6-c-data-list__item--BackgroundColor: var( --pf-t--global--background--color--primary--default);
+ --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);
+ --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: 90deg;
+ --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);
+}
+@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);
+ }
+}
+@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 {
+ 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;
+}
+
+.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);
+ 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__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__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);
+}
+
+.pf-v6-c-data-list__toggle-icon {
+ height: var(--pf-v6-c-data-list__toggle-icon--Height);
+ pointer-events: none;
+ transition: var(--pf-v6-c-data-list__toggle-icon--Transition);
+ transform: rotate(var(--pf-v6-c-data-list__toggle-icon--Rotate));
+}
+:where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-data-list__toggle-icon {
+ scale: -1 1;
+}
+
+.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;
+}
+
+.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);
+ --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 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);
+ }
+}
+@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;
+ page-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);
+ }
+}
+
+.pf-v6-c-draggable {
+ --pf-v6-c-draggable--Cursor: auto;
+ --pf-v6-c-draggable--m-dragging--Cursor: grabbing;
+ --pf-v6-c-draggable--m-dragging--BoxShadow: var(--pf-t--global--box-shadow--md);
+ --pf-v6-c-draggable--m-dragging--BackgroundColor: transparent;
+ --pf-v6-c-draggable--m-dragging--after--BorderWidth: var(--pf-t--global--border--width--regular);
+ --pf-v6-c-draggable--m-dragging--after--BorderColor: var(--pf-t--global--border--color--brand--default);
+ --pf-v6-c-draggable--m-dragging--after--BorderRadius: var(--pf-t--global--border--radius--small);
+ --pf-v6-c-draggable--m-drag-outside--Cursor: not-allowed;
+ --pf-v6-c-draggable--m-drag-outside--after--BorderColor: var(--pf-t--global--border--color--status--danger--default);
+}
+
+.pf-v6-c-draggable {
+ cursor: var(--pf-v6-c-draggable--Cursor);
+}
+.pf-v6-c-draggable.pf-m-dragging {
+ --pf-v6-c-draggable--Cursor: var(--pf-v6-c-draggable--m-dragging--Cursor);
+ position: relative;
+ background-color: var(--pf-v6-c-draggable--m-dragging--BackgroundColor);
+ box-shadow: var(--pf-v6-c-draggable--m-dragging--BoxShadow);
+}
+.pf-v6-c-draggable.pf-m-dragging::after {
+ position: absolute;
+ inset-block-start: 0;
+ inset-block-end: 0;
+ inset-inline-start: 0;
+ inset-inline-end: 0;
+ content: "";
+ border: var(--pf-v6-c-draggable--m-dragging--after--BorderWidth) solid var(--pf-v6-c-draggable--m-dragging--after--BorderColor);
+ border-radius: var(--pf-v6-c-draggable--m-dragging--after--BorderRadius);
+}
+.pf-v6-c-draggable.pf-m-drag-outside {
+ --pf-v6-c-draggable--m-dragging--Cursor: var(--pf-v6-c-draggable--m-drag-outside--Cursor);
+ --pf-v6-c-draggable--m-dragging--after--BorderColor: var(--pf-v6-c-draggable--m-drag-outside--after--BorderColor);
+}
+
+.pf-v6-c-droppable {
+ --pf-v6-c-droppable--before--BackgroundColor: transparent;
+ --pf-v6-c-droppable--before--Opacity: 0;
+ --pf-v6-c-droppable--after--BorderWidth: 0;
+ --pf-v6-c-droppable--after--BorderColor: transparent;
+ --pf-v6-c-droppable--m-dragging--before--BackgroundColor: var(--pf-t--global--background--color--primary--default);
+ --pf-v6-c-droppable--m-dragging--before--Opacity: .6;
+ --pf-v6-c-droppable--m-dragging--after--BorderWidth: var(--pf-t--global--border--width--regular);
+ --pf-v6-c-droppable--m-dragging--after--BorderColor: var(--pf-t--global--border--color--brand--default);
+ --pf-v6-c-droppable--m-dragging--after--BorderRadius: var(--pf-t--global--border--radius--small);
+ --pf-v6-c-droppable--m-drag-outside--after--BorderColor: var(--pf-t--global--border--color--status--danger--default);
+}
+
+.pf-v6-c-droppable::before, .pf-v6-c-droppable::after {
+ position: absolute;
+ inset-block-start: 0;
+ inset-block-end: 0;
+ inset-inline-start: 0;
+ inset-inline-end: 0;
+ pointer-events: none;
+ content: "";
+}
+.pf-v6-c-droppable::before {
+ background-color: var(--pf-v6-c-droppable--before--BackgroundColor);
+ opacity: var(--pf-v6-c-droppable--before--Opacity);
+}
+.pf-v6-c-droppable::after {
+ border: var(--pf-v6-c-droppable--after--BorderWidth, 0) solid var(--pf-v6-c-droppable--after--BorderColor, transparent);
+ border-radius: var(--pf-v6-c-droppable--m-dragging--after--BorderRadius);
+}
+.pf-v6-c-droppable.pf-m-dragging {
+ --pf-v6-c-droppable--before--BackgroundColor: var(--pf-v6-c-droppable--m-dragging--before--BackgroundColor);
+ --pf-v6-c-droppable--before--Opacity: var(--pf-v6-c-droppable--m-dragging--before--Opacity);
+ --pf-v6-c-droppable--after--BorderWidth: var(--pf-v6-c-droppable--m-dragging--after--BorderWidth);
+ --pf-v6-c-droppable--after--BorderColor: var(--pf-v6-c-droppable--m-dragging--after--BorderColor);
+ position: relative;
+}
+.pf-v6-c-droppable.pf-m-drag-outside {
+ --pf-v6-c-droppable--m-dragging--after--BorderColor: var(--pf-v6-c-droppable--m-drag-outside--after--BorderColor);
+}
+
+.pf-v6-c-dual-list-selector {
+ --pf-v6-c-dual-list-selector__header--GridArea: pane-header;
+ --pf-v6-c-dual-list-selector__tools--GridArea: pane-tools;
+ --pf-v6-c-dual-list-selector__status--GridArea: pane-status;
+ --pf-v6-c-dual-list-selector__menu--GridArea: pane-menu;
+ --pf-v6-c-dual-list-selector__controls--GridArea: controls;
+ --pf-v6-c-dual-list-selector--m-chosen__header--GridArea: pane-header-c;
+ --pf-v6-c-dual-list-selector--m-chosen__tools--GridArea: pane-tools-c;
+ --pf-v6-c-dual-list-selector--m-chosen__status--GridArea: pane-status-c;
+ --pf-v6-c-dual-list-selector--m-chosen__menu--GridArea: pane-menu-c;
+ --pf-v6-c-dual-list-selector--GridTemplateColumns--pane--MinMax--min: 12.5rem;
+ --pf-v6-c-dual-list-selector--GridTemplateColumns--pane--MinMax--max: 28.125rem;
+ --pf-v6-c-dual-list-selector__header--MarginBlockEnd: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-dual-list-selector__title-text--FontWeight: var(--pf-t--global--font--weight--body--bold);
+ --pf-v6-c-dual-list-selector__title-text--FontSize: var(--pf-t--global--font--size--body--lg);
+ --pf-v6-c-dual-list-selector__tools--MarginBlockEnd: var(--pf-t--global--spacer--md);
+ --pf-v6-c-dual-list-selector__tools-filter--tools-actions--MarginInlineStart: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-dual-list-selector__menu--BorderWidth: var(--pf-t--global--border--width--regular);
+ --pf-v6-c-dual-list-selector__menu--BorderColor: var(--pf-t--global--border--color--default);
+ --pf-v6-c-dual-list-selector__menu--BorderRadius: var(--pf-t--global--border--radius--small);
+ --pf-v6-c-dual-list-selector__menu--MinHeight: 12.5rem;
+ --pf-v6-c-dual-list-selector__menu--MaxHeight: 20rem;
+ --pf-v6-c-dual-list-selector__menu--MarginBlockStart: var(--pf-t--global--spacer--md);
+ --pf-v6-c-dual-list-selector__list--TransitionDuration--expand--slide: 0s;
+ --pf-v6-c-dual-list-selector__list--TransitionDuration--expand--fade: var(--pf-t--global--motion--duration--fade--default);
+ --pf-v6-c-dual-list-selector__list--TransitionDuration--collapse--slide: 0s;
+ --pf-v6-c-dual-list-selector__list--TransitionDuration--collapse--fade: var(--pf-t--global--motion--duration--fade--short);
+ --pf-v6-c-dual-list-selector__list--TransitionDuration--slide: var(--pf-v6-c-dual-list-selector__list--TransitionDuration--collapse--slide);
+ --pf-v6-c-dual-list-selector__list--TransitionDuration--fade: var(--pf-v6-c-dual-list-selector__list--TransitionDuration--collapse--fade);
+ --pf-v6-c-dual-list-selector__list--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
+ --pf-v6-c-dual-list-selector__list--Opacity: 0;
+ --pf-v6-c-dual-list-selector--m-expanded__list--Opacity: 1;
+ --pf-v6-c-dual-list-selector__list--TranslateY: 0;
+ --pf-v6-c-dual-list-selector--m-expanded__list--TranslateY: 0;
+ --pf-v6-c-dual-list-selector__list-item-row--FontSize: var(--pf-t--global--font--size--sm);
+ --pf-v6-c-dual-list-selector__list-item-row--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
+ --pf-v6-c-dual-list-selector__list-item-row--hover--BackgroundColor: var(--pf-t--global--background--color--primary--hover);
+ --pf-v6-c-dual-list-selector__list-item-row--m-selected--BackgroundColor: var(--pf-t--global--background--color--primary--clicked);
+ --pf-v6-c-dual-list-selector__list-item--m-ghost-row--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
+ --pf-v6-c-dual-list-selector__list-item--m-ghost-row--Opacity: .4;
+ --pf-v6-c-dual-list-selector__item--PaddingBlockStart: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-dual-list-selector__item--PaddingInlineEnd: var(--pf-t--global--spacer--md);
+ --pf-v6-c-dual-list-selector__item--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-dual-list-selector__item--PaddingInlineStart: var(--pf-t--global--spacer--md);
+ --pf-v6-c-dual-list-selector__item--m-expandable--PaddingInlineStart: var(--pf-t--global--spacer--md);
+ --pf-v6-c-dual-list-selector__item--indent--base: calc(var(--pf-t--global--spacer--md) + var(--pf-t--global--spacer--sm) + var(--pf-v6-c-dual-list-selector__list-item-row--FontSize));
+ --pf-v6-c-dual-list-selector__item--nested-indent--base: calc(var(--pf-v6-c-dual-list-selector__item--indent--base) - var(--pf-t--global--spacer--md));
+ --pf-v6-c-dual-list-selector__draggable--item--PaddingInlineStart: var(--pf-t--global--spacer--xs);
+ --pf-v6-c-dual-list-selector__item-text--Color: var(--pf-t--global--text--color--subtle);
+ --pf-v6-c-dual-list-selector__list-item-row--m-selected__text--Color: var(--pf-t--global--text--color--regular);
+ --pf-v6-c-dual-list-selector__list-item--m-disabled__item-text--Color: var(--pf-t--global--text--color--disabled);
+ --pf-v6-c-dual-list-selector__status--MarginBlockEnd: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-dual-list-selector__status-text--FontSize: var(--pf-t--global--font--size--sm);
+ --pf-v6-c-dual-list-selector__status-text--Color: var(--pf-t--global--text--color--subtle);
+ --pf-v6-c-dual-list-selector__controls--PaddingInlineEnd: var(--pf-t--global--spacer--md);
+ --pf-v6-c-dual-list-selector__controls--PaddingInlineStart: var(--pf-t--global--spacer--md);
+ --pf-v6-c-dual-list-selector__controls--Gap: var(--pf-t--global--spacer--gap--action-to-action--plain);
+ --pf-v6-c-dual-list-selector__controls--MarginBlockStart: var(--pf-t--global--spacer--md);
+ --pf-v6-c-dual-list-selector__item-toggle--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-dual-list-selector__list__list__item-toggle--InsetInlineStart: 0;
+ --pf-v6-c-dual-list-selector__list__list__item-toggle--TranslateX: -100%;
+ --pf-v6-c-dual-list-selector__item-check--MarginInlineEnd: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-dual-list-selector__item-count--MarginInlineStart: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-dual-list-selector__item--c-badge--m-read--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
+ --pf-v6-c-dual-list-selector__item-toggle-icon--Rotate: 0;
+ --pf-v6-c-dual-list-selector__list-item--m-expanded__item-toggle-icon--Rotate: 90deg;
+ --pf-v6-c-dual-list-selector__item-toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
+ --pf-v6-c-dual-list-selector__item-toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
+ --pf-v6-c-dual-list-selector__item-toggle-icon--MinWidth: var(--pf-v6-c-dual-list-selector__list-item-row--FontSize);
+ --pf-v6-c-dual-list-selector__list-item--m-disabled__item-toggle-icon--Color: var(--pf-t--global--icon--color--disabled);
+}
+@media screen and (prefers-reduced-motion: no-preference) {
+ .pf-v6-c-dual-list-selector {
+ --pf-v6-c-dual-list-selector__list--TransitionDuration--expand--slide: var(--pf-t--global--motion--duration--fade--default);
+ --pf-v6-c-dual-list-selector__list--TransitionDuration--collapse--slide: var(--pf-t--global--motion--duration--fade--short);
+ --pf-v6-c-dual-list-selector__list--TranslateY: -.5rem;
+ }
+}
+
+.pf-v6-c-dual-list-selector {
+ display: grid;
+ grid-template-areas: "pane-header . pane-header-c" "pane-tools . pane-tools-c" "pane-status . pane-status-c" "pane-menu controls pane-menu-c";
+ grid-template-rows: repeat(3, auto) auto;
+ grid-template-columns: minmax(var(--pf-v6-c-dual-list-selector--GridTemplateColumns--pane--MinMax--min), var(--pf-v6-c-dual-list-selector--GridTemplateColumns--pane--MinMax--max)) min-content minmax(var(--pf-v6-c-dual-list-selector--GridTemplateColumns--pane--MinMax--min), var(--pf-v6-c-dual-list-selector--GridTemplateColumns--pane--MinMax--max));
+}
+
+.pf-v6-c-dual-list-selector__pane {
+ display: contents;
+}
+.pf-v6-c-dual-list-selector__pane.pf-m-chosen {
+ --pf-v6-c-dual-list-selector__header--GridArea: var(--pf-v6-c-dual-list-selector--m-chosen__header--GridArea);
+ --pf-v6-c-dual-list-selector__tools--GridArea: var(--pf-v6-c-dual-list-selector--m-chosen__tools--GridArea);
+ --pf-v6-c-dual-list-selector__status--GridArea: var(--pf-v6-c-dual-list-selector--m-chosen__status--GridArea);
+ --pf-v6-c-dual-list-selector__menu--GridArea: var(--pf-v6-c-dual-list-selector--m-chosen__menu--GridArea);
+}
+
+.pf-v6-c-dual-list-selector__header {
+ grid-area: var(--pf-v6-c-dual-list-selector__header--GridArea);
+ margin-block-end: var(--pf-v6-c-dual-list-selector__header--MarginBlockEnd);
+}
+
+.pf-v6-c-dual-list-selector__title-text {
+ font-size: var(--pf-v6-c-dual-list-selector__title-text--FontSize);
+ font-weight: var(--pf-v6-c-dual-list-selector__title-text--FontWeight);
+}
+
+.pf-v6-c-dual-list-selector__tools {
+ display: flex;
+ grid-area: var(--pf-v6-c-dual-list-selector__tools--GridArea);
+ margin-block-end: var(--pf-v6-c-dual-list-selector__tools--MarginBlockEnd);
+}
+
+.pf-v6-c-dual-list-selector__tools-filter {
+ flex-grow: 1;
+}
+
+.pf-v6-c-dual-list-selector__tools-actions {
+ display: flex;
+}
+.pf-v6-c-dual-list-selector__tools-filter ~ .pf-v6-c-dual-list-selector__tools-actions {
+ margin-inline-start: var(--pf-v6-c-dual-list-selector__tools-filter--tools-actions--MarginInlineStart);
+}
+
+.pf-v6-c-dual-list-selector__status {
+ display: flex;
+ grid-area: var(--pf-v6-c-dual-list-selector__status--GridArea);
+ margin-block-end: var(--pf-v6-c-dual-list-selector__status--MarginBlockEnd);
+}
+
+.pf-v6-c-dual-list-selector__status-text {
+ flex-grow: 1;
+ font-size: var(--pf-v6-c-dual-list-selector__status-text--FontSize);
+ color: var(--pf-v6-c-dual-list-selector__status-text--Color);
+}
+
+.pf-v6-c-dual-list-selector__menu {
+ grid-area: var(--pf-v6-c-dual-list-selector__menu--GridArea);
+ min-height: var(--pf-v6-c-dual-list-selector__menu--MinHeight);
+ max-height: var(--pf-v6-c-dual-list-selector__menu--MaxHeight);
+ margin-block-start: var(--pf-v6-c-dual-list-selector__menu--MarginBlockStart);
+ overflow: auto;
+ border: var(--pf-v6-c-dual-list-selector__menu--BorderWidth) solid var(--pf-v6-c-dual-list-selector__menu--BorderColor);
+ border-radius: var(--pf-v6-c-dual-list-selector__menu--BorderRadius);
+}
+
+.pf-v6-c-dual-list-selector__list {
+ --pf-v6-c-dual-list-selector__item-toggle-icon--Rotate: 0;
+ display: flex;
+ flex-direction: column;
+}
+.pf-v6-c-dual-list-selector__list .pf-v6-c-dual-list-selector__list {
+ --pf-v6-c-dual-list-selector__item-toggle--MarginBlockStart: 0;
+ --pf-v6-c-dual-list-selector__item-toggle--MarginBlockEnd: 0;
+}
+.pf-v6-c-dual-list-selector__list .pf-v6-c-dual-list-selector__list .pf-v6-c-dual-list-selector__item-toggle {
+ transform: translateX(var(--pf-v6-c-dual-list-selector__list__list__item-toggle--TranslateX));
+ position: absolute;
+ inset-inline-start: var(--pf-v6-c-dual-list-selector__list__list__item-toggle--InsetInlineStart);
+}
+:where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-dual-list-selector__list .pf-v6-c-dual-list-selector__list .pf-v6-c-dual-list-selector__item-toggle {
+ transform: translateX(calc(var(--pf-v6-c-dual-list-selector__list__list__item-toggle--TranslateX) * var(--pf-v6-global--inverse--multiplier)));
+}
+
+.pf-v6-c-dual-list-selector__list.pf-m-drag-over {
+ overflow-anchor: none;
+}
+
+.pf-v6-c-dual-list-selector__list-item:focus {
+ --pf-v6-c-dual-list-selector__list-item-row--BackgroundColor: var(--pf-v6-c-dual-list-selector__list-item-row--hover--BackgroundColor);
+}
+.pf-v6-c-dual-list-selector__list-item.pf-m-expandable {
+ --pf-v6-c-dual-list-selector__item--PaddingInlineStart: var(--pf-v6-c-dual-list-selector__item--m-expandable--PaddingInlineStart);
+}
+.pf-v6-c-dual-list-selector.pf-m-animate-expand .pf-v6-c-dual-list-selector__list-item.pf-m-expandable > .pf-v6-c-dual-list-selector__list {
+ max-height: 0;
+ visibility: hidden;
+ opacity: var(--pf-v6-c-dual-list-selector__list--Opacity);
+ transition-delay: 0s, 0s, var(--pf-v6-c-dual-list-selector__list--TransitionDuration--fade), var(--pf-v6-c-dual-list-selector__list--TransitionDuration--fade);
+ transition-timing-function: var(--pf-v6-c-dual-list-selector__list--TransitionTimingFunction);
+ transition-duration: var(--pf-v6-c-dual-list-selector__list--TransitionDuration--fade), var(--pf-v6-c-dual-list-selector__list--TransitionDuration--slide), 0s, 0s;
+ transition-property: opacity, translate, visibility, max-height;
+ translate: 0 var(--pf-v6-c-dual-list-selector__list--TranslateY);
+}
+.pf-v6-c-dual-list-selector__list-item.pf-m-expanded {
+ --pf-v6-c-dual-list-selector__item-toggle-icon--Rotate: var(--pf-v6-c-dual-list-selector__list-item--m-expanded__item-toggle-icon--Rotate);
+}
+.pf-v6-c-dual-list-selector.pf-m-animate-expand .pf-v6-c-dual-list-selector__list-item.pf-m-expanded > .pf-v6-c-dual-list-selector__list {
+ max-height: 99999px;
+ visibility: revert;
+ opacity: var(--pf-v6-c-dual-list-selector--m-expanded__list--Opacity);
+ transition-delay: 0s;
+ transition-duration: var(--pf-v6-c-dual-list-selector__list--TransitionDuration--expand--fade), var(--pf-v6-c-dual-list-selector__list--TransitionDuration--expand--slide), 0s, 0s;
+ translate: 0 var(--pf-v6-c-dual-list-selector--m-expanded__list--TranslateY);
+}
+.pf-v6-c-dual-list-selector__list-item.pf-m-disabled {
+ --pf-v6-c-dual-list-selector__item-text--Color: var(--pf-v6-c-dual-list-selector__list-item--m-disabled__item-text--Color);
+ --pf-v6-c-dual-list-selector__item-toggle-icon--Color: var(--pf-v6-c-dual-list-selector__list-item--m-disabled__item-toggle-icon--Color);
+ pointer-events: none;
+}
+
+.pf-v6-c-dual-list-selector__list-item-row {
+ display: flex;
+ font-size: var(--pf-v6-c-dual-list-selector__list-item-row--FontSize);
+ background-color: var(--pf-v6-c-dual-list-selector__list-item-row--BackgroundColor);
+}
+.pf-v6-c-dual-list-selector__list-item-row.pf-m-selected {
+ --pf-v6-c-dual-list-selector__list-item-row--BackgroundColor: var(--pf-v6-c-dual-list-selector__list-item-row--m-selected--BackgroundColor);
+}
+.pf-v6-c-dual-list-selector__list-item-row.pf-m-selected .pf-v6-c-dual-list-selector__item-text {
+ --pf-v6-c-dual-list-selector__item-text--Color: var(--pf-v6-c-dual-list-selector__list-item-row--m-selected__text--Color);
+ font-weight: var(--pf-v6-c-dual-list-selector__list-item-row--m-selected__text--FontWeight);
+}
+.pf-v6-c-dual-list-selector__list-item-row:hover {
+ --pf-v6-c-dual-list-selector__list-item-row--BackgroundColor: var(--pf-v6-c-dual-list-selector__list-item-row--hover--BackgroundColor);
+}
+.pf-v6-c-dual-list-selector__list-item-row.pf-m-check {
+ --pf-v6-c-dual-list-selector__list-item-row--m-selected--BackgroundColor: transparent;
+}
+.pf-v6-c-dual-list-selector__list-item-row.pf-m-ghost-row {
+ --pf-v6-c-dual-list-selector__list-item-row--BackgroundColor: var(--pf-v6-c-dual-list-selector__list-item--m-ghost-row--BackgroundColor);
+ opacity: var(--pf-v6-c-dual-list-selector__list-item--m-ghost-row--Opacity);
+}
+
+.pf-v6-c-dual-list-selector__item,
+.pf-v6-c-dual-list-selector__main {
+ display: flex;
+}
+
+.pf-v6-c-dual-list-selector__item,
+.pf-v6-c-dual-list-selector__item-main {
+ flex-basis: 100%;
+}
+
+.pf-v6-c-dual-list-selector__draggable {
+ display: flex;
+}
+.pf-v6-c-dual-list-selector__draggable + .pf-v6-c-dual-list-selector__item {
+ --pf-v6-c-dual-list-selector__item--PaddingInlineStart: var(--pf-v6-c-dual-list-selector__draggable--item--PaddingInlineStart);
+}
+.pf-v6-c-dual-list-selector__draggable .pf-v6-c-button {
+ --pf-v6-c-button--FontSize: inherit;
+ cursor: grab;
+}
+.pf-v6-c-dual-list-selector__draggable .pf-v6-c-button:active {
+ cursor: grabbing;
+}
+
+.pf-v6-c-dual-list-selector__item {
+ position: relative;
+ width: 100%;
+ padding-block-start: var(--pf-v6-c-dual-list-selector__item--PaddingBlockStart);
+ padding-block-end: var(--pf-v6-c-dual-list-selector__item--PaddingBlockEnd);
+ padding-inline-start: var(--pf-v6-c-dual-list-selector__item--PaddingInlineStart);
+ padding-inline-end: var(--pf-v6-c-dual-list-selector__item--PaddingInlineEnd);
+ cursor: pointer;
+ outline-offset: -2px;
+}
+
+.pf-v6-c-dual-list-selector__item-count {
+ margin-inline-start: var(--pf-v6-c-dual-list-selector__item-count--MarginInlineStart);
+}
+.pf-v6-c-dual-list-selector__item-count .pf-v6-c-badge.pf-m-read {
+ --pf-v6-c-badge--m-read--BackgroundColor: var(--pf-v6-c-dual-list-selector__item--c-badge--m-read--BackgroundColor);
+}
+
+.pf-v6-c-dual-list-selector__item-text {
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ flex-grow: 1;
+ color: var(--pf-v6-c-dual-list-selector__item-text--Color);
+}
+
+.pf-v6-c-dual-list-selector__controls {
+ display: flex;
+ flex-direction: column;
+ grid-area: var(--pf-v6-c-dual-list-selector__controls--GridArea);
+ gap: var(--pf-v6-c-dual-list-selector__controls--Gap);
+ align-items: center;
+ align-self: center;
+ justify-content: center;
+ padding-inline-start: var(--pf-v6-c-dual-list-selector__controls--PaddingInlineStart);
+ padding-inline-end: var(--pf-v6-c-dual-list-selector__controls--PaddingInlineEnd);
+ margin-block-start: var(--pf-v6-c-dual-list-selector__controls--MarginBlockStart);
+}
+
+:where(.pf-v6-m-dir-rtl, [dir=rtl]) :is(.pf-v6-c-dual-list-selector__controls-item, .pf-v6-c-dual-list-selector__item-toggle-icon) {
+ scale: -1 1;
+}
+
+.pf-v6-c-dual-list-selector__item-main {
+ display: flex;
+ min-width: 0;
+}
+
+.pf-v6-c-dual-list-selector__item-toggle {
+ padding-block-start: var(--pf-v6-c-dual-list-selector__item-toggle--PaddingBlockStart);
+ padding-block-end: var(--pf-v6-c-dual-list-selector__item-toggle--PaddingBlockEnd);
+ padding-inline-start: var(--pf-v6-c-dual-list-selector__item-toggle--PaddingInlineStart);
+ padding-inline-end: var(--pf-v6-c-dual-list-selector__item-toggle--PaddingInlineEnd);
+ margin-block-start: var(--pf-v6-c-dual-list-selector__item-toggle--MarginBlockStart);
+ margin-block-end: var(--pf-v6-c-dual-list-selector__item-toggle--MarginBlockEnd);
+}
+
+.pf-v6-c-dual-list-selector__item-check {
+ display: flex;
+ align-items: center;
+ margin-inline-end: var(--pf-v6-c-dual-list-selector__item-check--MarginInlineEnd);
+}
+
+.pf-v6-c-dual-list-selector__item-toggle-icon {
+ display: inline-block;
+ min-width: var(--pf-v6-c-dual-list-selector__item-toggle-icon--MinWidth);
+ color: var(--pf-v6-c-dual-list-selector__item-toggle-icon--Color, inherit);
+ text-align: center;
+ transition-timing-function: var(--pf-v6-c-dual-list-selector__item-toggle-icon--TransitionTimingFunction);
+ transition-duration: var(--pf-v6-c-dual-list-selector__item-toggle-icon--TransitionDuration);
+ transition-property: transform;
+ transform: rotate(var(--pf-v6-c-dual-list-selector__item-toggle-icon--Rotate));
+}
+
+.pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item {
+ --pf-v6-c-dual-list-selector__item--PaddingInlineStart: calc(var(--pf-v6-c-dual-list-selector__item--nested-indent--base) * 1 + var(--pf-v6-c-dual-list-selector__item--indent--base));
+ --pf-v6-c-dual-list-selector__list__list__item-toggle--InsetInlineStart: var(--pf-v6-c-dual-list-selector__item--PaddingInlineStart);
+}
+.pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item {
+ --pf-v6-c-dual-list-selector__item--PaddingInlineStart: calc(var(--pf-v6-c-dual-list-selector__item--nested-indent--base) * 2 + var(--pf-v6-c-dual-list-selector__item--indent--base));
+ --pf-v6-c-dual-list-selector__list__list__item-toggle--InsetInlineStart: var(--pf-v6-c-dual-list-selector__item--PaddingInlineStart);
+}
+.pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item {
+ --pf-v6-c-dual-list-selector__item--PaddingInlineStart: calc(var(--pf-v6-c-dual-list-selector__item--nested-indent--base) * 3 + var(--pf-v6-c-dual-list-selector__item--indent--base));
+ --pf-v6-c-dual-list-selector__list__list__item-toggle--InsetInlineStart: var(--pf-v6-c-dual-list-selector__item--PaddingInlineStart);
+}
+.pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item {
+ --pf-v6-c-dual-list-selector__item--PaddingInlineStart: calc(var(--pf-v6-c-dual-list-selector__item--nested-indent--base) * 4 + var(--pf-v6-c-dual-list-selector__item--indent--base));
+ --pf-v6-c-dual-list-selector__list__list__item-toggle--InsetInlineStart: var(--pf-v6-c-dual-list-selector__item--PaddingInlineStart);
+}
+.pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item {
+ --pf-v6-c-dual-list-selector__item--PaddingInlineStart: calc(var(--pf-v6-c-dual-list-selector__item--nested-indent--base) * 5 + var(--pf-v6-c-dual-list-selector__item--indent--base));
+ --pf-v6-c-dual-list-selector__list__list__item-toggle--InsetInlineStart: var(--pf-v6-c-dual-list-selector__item--PaddingInlineStart);
+}
+.pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item {
+ --pf-v6-c-dual-list-selector__item--PaddingInlineStart: calc(var(--pf-v6-c-dual-list-selector__item--nested-indent--base) * 6 + var(--pf-v6-c-dual-list-selector__item--indent--base));
+ --pf-v6-c-dual-list-selector__list__list__item-toggle--InsetInlineStart: var(--pf-v6-c-dual-list-selector__item--PaddingInlineStart);
+}
+.pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item {
+ --pf-v6-c-dual-list-selector__item--PaddingInlineStart: calc(var(--pf-v6-c-dual-list-selector__item--nested-indent--base) * 7 + var(--pf-v6-c-dual-list-selector__item--indent--base));
+ --pf-v6-c-dual-list-selector__list__list__item-toggle--InsetInlineStart: var(--pf-v6-c-dual-list-selector__item--PaddingInlineStart);
+}
+.pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item {
+ --pf-v6-c-dual-list-selector__item--PaddingInlineStart: calc(var(--pf-v6-c-dual-list-selector__item--nested-indent--base) * 8 + var(--pf-v6-c-dual-list-selector__item--indent--base));
+ --pf-v6-c-dual-list-selector__list__list__item-toggle--InsetInlineStart: var(--pf-v6-c-dual-list-selector__item--PaddingInlineStart);
+}
+.pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item {
+ --pf-v6-c-dual-list-selector__item--PaddingInlineStart: calc(var(--pf-v6-c-dual-list-selector__item--nested-indent--base) * 9 + var(--pf-v6-c-dual-list-selector__item--indent--base));
+ --pf-v6-c-dual-list-selector__list__list__item-toggle--InsetInlineStart: var(--pf-v6-c-dual-list-selector__item--PaddingInlineStart);
+}
+.pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item {
+ --pf-v6-c-dual-list-selector__item--PaddingInlineStart: calc(var(--pf-v6-c-dual-list-selector__item--nested-indent--base) * 10 + var(--pf-v6-c-dual-list-selector__item--indent--base));
+ --pf-v6-c-dual-list-selector__list__list__item-toggle--InsetInlineStart: var(--pf-v6-c-dual-list-selector__item--PaddingInlineStart);
+}
+
+.pf-v6-c-date-picker {
+ --pf-v6-c-date-picker--m-top__calendar--InsetBlockStart: 0;
+ --pf-v6-c-date-picker--m-top__calendar--TranslateY: calc(-100% - var(--pf-t--global--spacer--xs));
+ --pf-v6-c-date-picker__helper-text--MarginBlockStart: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-date-picker__input--c-form-control--Width: calc(var(--pf-v6-c-date-picker__input--c-form-control--width-chars) * 1ch + var(--pf-v6-c-date-picker__input--c-form-control--width-base));
+ --pf-v6-c-date-picker__input--c-form-control--width-base: calc(var(--pf-t--global--spacer--xl) + var(--pf-t--global--spacer--sm));
+ --pf-v6-c-date-picker__input--c-form-control--width-chars: 11;
+ --pf-v6-c-date-picker__calendar--BackgroundColor: var(--pf-t--global--background--color--floating--default);
+ --pf-v6-c-date-picker__calendar--BoxShadow: var(--pf-t--global--box-shadow--md);
+ --pf-v6-c-date-picker__calendar--ZIndex: var(--pf-t--global--z-index--sm);
+ --pf-v6-c-date-picker__calendar--InsetBlockStart: calc(100% + var(--pf-t--global--spacer--xs));
+ --pf-v6-c-date-picker__calendar--InsetInlineEnd: auto;
+ --pf-v6-c-date-picker__calendar--InsetInlineStart: 0;
+ --pf-v6-c-date-picker__calendar--m-align-right--InsetInlineEnd: 0;
+ --pf-v6-c-date-picker__calendar--m-align-right--InsetInlineStart: auto;
+}
+
+.pf-v6-c-date-picker {
+ position: relative;
+ display: inline-block;
+}
+
+.pf-v6-c-date-picker__helper-text {
+ margin-block-start: var(--pf-v6-c-date-picker__helper-text--MarginBlockStart);
+}
+
+.pf-v6-c-date-picker__input .pf-v6-c-form-control {
+ width: var(--pf-v6-c-date-picker__input--c-form-control--Width);
+}
+
+.pf-v6-c-date-picker__calendar {
+ position: absolute;
+ inset-block-start: var(--pf-v6-c-date-picker__calendar--InsetBlockStart);
+ inset-inline-start: var(--pf-v6-c-date-picker__calendar--InsetInlineStart);
+ inset-inline-end: var(--pf-v6-c-date-picker__calendar--InsetInlineEnd);
+ z-index: var(--pf-v6-c-date-picker__calendar--ZIndex);
+ background-color: var(--pf-v6-c-date-picker__calendar--BackgroundColor);
+ box-shadow: var(--pf-v6-c-date-picker__calendar--BoxShadow);
+}
+.pf-v6-c-date-picker__calendar.pf-m-align-right {
+ --pf-v6-c-date-picker__calendar--InsetInlineEnd: var(--pf-v6-c-date-picker__calendar--m-align-right--InsetInlineEnd);
+ --pf-v6-c-date-picker__calendar--InsetInlineStart: var(--pf-v6-c-date-picker__calendar--m-align-right--InsetInlineStart);
+}
+.pf-v6-c-date-picker.pf-m-top .pf-v6-c-date-picker__calendar {
+ --pf-v6-c-date-picker__calendar--InsetBlockStart: var(--pf-v6-c-date-picker--m-top__calendar--InsetBlockStart);
+ transform: translateY(var(--pf-v6-c-date-picker--m-top__calendar--TranslateY));
+}
+.pf-v6-c-date-picker__calendar.pf-m-static {
+ --pf-v6-c-date-picker--m-top__calendar--TranslateY: 0;
+ position: static;
+ inset-block-start: auto;
+ inset-block-end: auto;
+ inset-inline-start: auto;
+ inset-inline-end: auto;
+ z-index: auto;
+ min-width: min-content;
+}
+
+.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);
+ flex-shrink: 0;
+ align-items: stretch;
+ align-self: stretch;
+ justify-content: center;
+ border: 0;
+}
+.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::before {
+ flex-basis: var(--pf-v6-c-divider--before--FlexBasis);
+ content: "";
+ background-color: var(--pf-v6-c-divider--Color);
+}
+.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);
+ }
+}
+
+.pf-v6-c-drawer {
+ --pf-v6-c-drawer__section--BackgroundColor: var(--pf-t--global--background--color--primary--default);
+ --pf-v6-c-drawer__section--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
+ --pf-v6-c-drawer__content--FlexBasis: 100%;
+ --pf-v6-c-drawer__content--BackgroundColor: transparent;
+ --pf-v6-c-drawer__content--m-primary--BackgroundColor: var(--pf-t--global--background--color--primary--default);
+ --pf-v6-c-drawer__content--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
+ --pf-v6-c-drawer__content--ZIndex: var(--pf-t--global--z-index--xs);
+ --pf-v6-c-drawer__panel--MinWidth: 50%;
+ --pf-v6-c-drawer__panel--MaxHeight: auto;
+ --pf-v6-c-drawer__panel--ZIndex: var(--pf-t--global--z-index--sm);
+ --pf-v6-c-drawer__panel--BackgroundColor: var(--pf-t--global--background--color--floating--default);
+ --pf-v6-c-drawer__panel--m-inline--BackgroundColor: var(--pf-t--global--background--color--primary--default);
+ --pf-v6-c-drawer__panel--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
+ --pf-v6-c-drawer__panel--RowGap: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-drawer__panel--PaddingBlockStart: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-drawer__panel--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-drawer__panel--TransitionDelay: 0s, var(--pf-v6-c-drawer__panel--TransitionDelay--focus), var(--pf-v6-c-drawer__panel--TransitionDelay--focus);
+ --pf-v6-c-drawer__panel--TransitionDelay--focus: var(--pf-v6-c-drawer__panel--TransitionDuration--fade);
+ --pf-v6-c-drawer__panel--TransitionDelay--expand--focus: 0s;
+ --pf-v6-c-drawer__panel--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate);
+ --pf-v6-c-drawer__panel--TransitionDuration--fade: var(--pf-t--global--motion--duration--fade--default);
+ --pf-v6-c-drawer__panel--TransitionDuration: var(--pf-v6-c-drawer__panel--TransitionDuration--fade), 0s, 0s;
+ --pf-v6-c-drawer__panel--TransitionProperty: opacity, visibility, transform;
+ --pf-v6-c-drawer__panel--Opacity: 0;
+ --pf-v6-c-drawer--m-expanded__panel--Opacity: 1;
+ --pf-v6-c-drawer__panel--FlexBasis: 100%;
+ --pf-v6-c-drawer__panel--md--FlexBasis--min: 1.5rem;
+ --pf-v6-c-drawer__panel--md--FlexBasis: 50%;
+ --pf-v6-c-drawer__panel--md--FlexBasis--max: 100%;
+ --pf-v6-c-drawer__panel--xl--MinWidth: 28.125rem;
+ --pf-v6-c-drawer__panel--xl--FlexBasis: 28.125rem;
+ --pf-v6-c-drawer--m-panel-bottom__panel--md--MinHeight: 50%;
+ --pf-v6-c-drawer--m-panel-bottom__panel--xl--MinHeight: 18.75rem;
+ --pf-v6-c-drawer--m-panel-bottom__panel--xl--FlexBasis: 18.75rem;
+ --pf-v6-c-drawer__panel--m-resizable--FlexDirection: row;
+ --pf-v6-c-drawer__panel--m-resizable--md--FlexBasis--min: var(--pf-v6-c-drawer__splitter--m-vertical--Width);
+ --pf-v6-c-drawer__panel--m-resizable--MinWidth: 1.5rem;
+ --pf-v6-c-drawer--m-panel-bottom__panel--m-resizable--FlexDirection: column;
+ --pf-v6-c-drawer--m-panel-bottom__panel--m-resizable--md--FlexBasis--min: 1.5rem;
+ --pf-v6-c-drawer--m-panel-bottom__panel--m-resizable--MinHeight: 1.5rem;
+ --pf-v6-c-drawer__head--ColumnGap: var(--pf-t--global--spacer--gap--text-to-element--default);
+ --pf-v6-c-drawer__head--PaddingBlockStart: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-drawer__head--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-drawer__head--PaddingInlineStart: var(--pf-t--global--spacer--md);
+ --pf-v6-c-drawer__head--PaddingInlineEnd: var(--pf-t--global--spacer--md);
+ --pf-v6-c-drawer__description--PaddingInlineStart: var(--pf-t--global--spacer--md);
+ --pf-v6-c-drawer__description--PaddingInlineEnd: var(--pf-t--global--spacer--md);
+ --pf-v6-c-drawer__body--PaddingBlockStart--base: var(--pf-t--global--spacer--md);
+ --pf-v6-c-drawer__body--PaddingInlineEnd--base: var(--pf-t--global--spacer--md);
+ --pf-v6-c-drawer__body--PaddingBlockEnd--base: var(--pf-t--global--spacer--md);
+ --pf-v6-c-drawer__body--PaddingInlineStart--base: var(--pf-t--global--spacer--md);
+ --pf-v6-c-drawer__content__body--PaddingBlockStart: 0;
+ --pf-v6-c-drawer__content__body--PaddingInlineEnd: 0;
+ --pf-v6-c-drawer__content__body--PaddingBlockEnd: 0;
+ --pf-v6-c-drawer__content__body--PaddingInlineStart: 0;
+ --pf-v6-c-drawer__panel__body--PaddingBlockStart: var(--pf-v6-c-drawer__body--PaddingBlockStart--base);
+ --pf-v6-c-drawer__panel__body--PaddingInlineEnd: var(--pf-v6-c-drawer__body--PaddingInlineEnd--base);
+ --pf-v6-c-drawer__panel__body--PaddingBlockEnd: var(--pf-v6-c-drawer__body--PaddingBlockEnd--base);
+ --pf-v6-c-drawer__panel__body--PaddingInlineStart: var(--pf-v6-c-drawer__body--PaddingInlineStart--base);
+ --pf-v6-c-drawer__body--m-padding--PaddingBlockStart: var(--pf-t--global--spacer--md);
+ --pf-v6-c-drawer__body--m-padding--PaddingInlineEnd: var(--pf-t--global--spacer--md);
+ --pf-v6-c-drawer__body--m-padding--PaddingBlockEnd: var(--pf-t--global--spacer--md);
+ --pf-v6-c-drawer__body--m-padding--PaddingInlineStart: var(--pf-t--global--spacer--md);
+ --pf-v6-c-drawer__splitter--Height: 0.5625rem;
+ --pf-v6-c-drawer__splitter--Width: 100%;
+ --pf-v6-c-drawer__splitter--BackgroundColor: var(--pf-t--global--background--color--primary--default);
+ --pf-v6-c-drawer__splitter--Cursor: row-resize;
+ --pf-v6-c-drawer__splitter--m-vertical--Height: 100%;
+ --pf-v6-c-drawer__splitter--m-vertical--Width: 0.5625rem;
+ --pf-v6-c-drawer__splitter--m-vertical--Cursor: col-resize;
+ --pf-v6-c-drawer--m-inline__splitter--focus--OutlineOffset: -0.0625rem;
+ --pf-v6-c-drawer__splitter--after--BorderColor: var(--pf-t--global--border--color--default);
+ --pf-v6-c-drawer__splitter--after--border-width--base: var(--pf-t--global--border--width--divider--default);
+ --pf-v6-c-drawer__splitter--after--BorderBlockStartWidth: 0;
+ --pf-v6-c-drawer__splitter--after--BorderInlineEndWidth: var(--pf-v6-c-drawer__splitter--after--border-width--base);
+ --pf-v6-c-drawer__splitter--after--BorderBlockEndWidth: 0;
+ --pf-v6-c-drawer__splitter--after--BorderInlineStartWidth: var(--pf-v6-c-drawer__splitter--after--border-width--base);
+ --pf-v6-c-drawer--m-panel-bottom__splitter--after--BorderBlockStartWidth: var(--pf-v6-c-drawer__splitter--after--border-width--base);
+ --pf-v6-c-drawer--m-panel-bottom__splitter--after--BorderBlockEndWidth: var(--pf-v6-c-drawer__splitter--after--border-width--base);
+ --pf-v6-c-drawer--m-inline__splitter--m-vertical--Width: 0.625rem;
+ --pf-v6-c-drawer--m-inline__splitter-handle--InsetInlineStart: 50%;
+ --pf-v6-c-drawer--m-inline--m-panel-bottom__splitter--Height: 0.625rem;
+ --pf-v6-c-drawer--m-inline--m-panel-bottom__splitter-handle--InsetBlockStart: 50%;
+ --pf-v6-c-drawer--m-inline--m-panel-bottom__splitter--after--BorderBlockStartWidth: var(--pf-v6-c-drawer__splitter--after--border-width--base);
+ --pf-v6-c-drawer__splitter-handle--InsetBlockStart: 50%;
+ --pf-v6-c-drawer__splitter-handle--InsetInlineStart: calc(50% - var(--pf-v6-c-drawer__splitter--after--border-width--base));
+ --pf-v6-c-drawer--m-panel-left__splitter-handle--InsetInlineStart: 50%;
+ --pf-v6-c-drawer--m-panel-bottom__splitter-handle--InsetBlockStart: calc(50% - var(--pf-v6-c-drawer__splitter--after--border-width--base));
+ --pf-v6-c-drawer__splitter-handle--after--BorderColor: var(--pf-t--global--border--color--default);
+ --pf-v6-c-drawer__splitter-handle--after--BorderBlockStartWidth: var(--pf-t--global--border--width--divider--default);
+ --pf-v6-c-drawer__splitter-handle--after--BorderInlineEndWidth: 0;
+ --pf-v6-c-drawer__splitter-handle--after--BorderBlockEndWidth: var(--pf-t--global--border--width--divider--default);
+ --pf-v6-c-drawer__splitter-handle--after--BorderInlineStartWidth: 0;
+ --pf-v6-c-drawer__splitter--hover__splitter-handle--after--BorderColor: var(--pf-t--global--border--color--hover);
+ --pf-v6-c-drawer__splitter--m-vertical__splitter-handle--after--BorderBlockStartWidth: 0;
+ --pf-v6-c-drawer__splitter--m-vertical__splitter-handle--after--BorderInlineEndWidth: var(--pf-t--global--border--width--divider--default);
+ --pf-v6-c-drawer__splitter--m-vertical__splitter-handle--after--BorderBlockEndWidth: 0;
+ --pf-v6-c-drawer__splitter--m-vertical__splitter-handle--after--BorderInlineStartWidth: var(--pf-t--global--border--width--divider--default);
+ --pf-v6-c-drawer__splitter-handle--after--Width: 0.75rem;
+ --pf-v6-c-drawer__splitter-handle--after--Height: 0.25rem;
+ --pf-v6-c-drawer__splitter--m-vertical__splitter-handle--after--Width: 0.25rem;
+ --pf-v6-c-drawer__splitter--m-vertical__splitter-handle--after--Height: 0.75rem;
+ --pf-v6-c-drawer__actions--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--compact) * -1.5);
+ --pf-v6-c-drawer__actions--MarginInlineEnd: calc(var(--pf-t--global--spacer--control--horizontal--compact) * -1.5);
+ --pf-v6-c-drawer__panel--BoxShadow: none;
+ --pf-v6-c-drawer--m-expanded--m-panel-bottom__panel--BoxShadow: var(--pf-t--global--box-shadow--md--top);
+ --pf-v6-c-drawer__panel--after--Width: var(--pf-t--global--border--width--divider--default);
+ --pf-v6-c-drawer--m-panel-bottom__panel--after--Height: var(--pf-t--global--border--width--divider--default);
+ --pf-v6-c-drawer__panel--after--BackgroundColor: transparent;
+ --pf-v6-c-drawer--m-inline--m-expanded__panel--after--BackgroundColor: var(--pf-t--global--border--color--default);
+ --pf-v6-c-drawer--m-inline__panel--PaddingInlineStart: var(--pf-v6-c-drawer__panel--after--Width);
+ --pf-v6-c-drawer--m-panel-left--m-inline__panel--PaddingInlineEnd: var(--pf-v6-c-drawer__panel--after--Width);
+ --pf-v6-c-drawer--m-panel-bottom--m-inline__panel--PaddingBlockStart: var(--pf-v6-c-drawer__panel--after--Width);
+}
+@media screen and (prefers-reduced-motion: no-preference) {
+ .pf-v6-c-drawer {
+ --pf-v6-c-drawer__panel--TransitionDuration--slide: var(--pf-t--global--motion--duration--slide-in--short);
+ --pf-v6-c-drawer__panel--TransitionDelay--focus: var(--pf-v6-c-drawer__panel--TransitionDuration--slide);
+ --pf-v6-c-drawer__panel--TransitionDelay: 0s, 0s, 0s, 0s, var(--pf-v6-c-drawer__panel--TransitionDelay--focus);
+ --pf-v6-c-drawer__panel--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate);
+ --pf-v6-c-drawer__panel--TransitionDuration: 0s, var(--pf-v6-c-drawer__panel--TransitionDuration--slide), 0s, 0s, 0s;
+ --pf-v6-c-drawer__panel--TransitionProperty: margin, transform, box-shadow, flex-basis, visibility;
+ --pf-v6-c-drawer__panel--Opacity: 1;
+ }
+}
+@media screen and (min-width: 75rem) {
+ .pf-v6-c-drawer {
+ --pf-v6-c-drawer__panel--MinWidth: var(--pf-v6-c-drawer__panel--xl--MinWidth);
+ }
+ .pf-v6-c-drawer.pf-m-panel-bottom {
+ --pf-v6-c-drawer__panel--MinWidth: auto;
+ --pf-v6-c-drawer__panel--MinHeight: var(--pf-v6-c-drawer--m-panel-bottom__panel--xl--MinHeight);
+ }
+}
+
+.pf-v6-c-drawer {
+ --pf-v6-c-drawer--m-expanded__panel--BoxShadow: var(--pf-t--global--box-shadow--md--left);
+ --pf-v6-c-drawer--m-expanded--m-panel-left__panel--BoxShadow: var(--pf-t--global--box-shadow--md--right);
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+ overflow-x: hidden;
+}
+:where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-drawer {
+ --pf-v6-c-drawer--m-expanded__panel--BoxShadow: var(--pf-t--global--box-shadow--md--right);
+}
+
+:where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-drawer {
+ --pf-v6-c-drawer--m-expanded--m-panel-left__panel--BoxShadow: var(--pf-t--global--box-shadow--md--left);
+}
+
+.pf-v6-c-drawer.pf-m-inline, .pf-v6-c-drawer.pf-m-static {
+ --pf-v6-c-drawer__panel--BackgroundColor: var(--pf-v6-c-drawer__panel--m-inline--BackgroundColor);
+}
+.pf-v6-c-drawer.pf-m-inline > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel:not(.pf-m-no-border, .pf-m-resizable), .pf-v6-c-drawer.pf-m-static > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel:not(.pf-m-no-border, .pf-m-resizable) {
+ padding-inline-start: var(--pf-v6-c-drawer--m-inline__panel--PaddingInlineStart);
+}
+.pf-v6-c-drawer.pf-m-panel-left > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
+ order: 0;
+ margin-inline-end: calc(var(--pf-v6-c-drawer__panel--FlexBasis) * -1);
+ transform: translateX(-100%);
+}
+:where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-drawer.pf-m-panel-left > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
+ transform: translateX(calc(-100% * var(--pf-v6-global--inverse--multiplier)));
+}
+
+.pf-v6-c-drawer.pf-m-panel-left > .pf-v6-c-drawer__main > .pf-v6-c-drawer__content {
+ order: 1;
+}
+.pf-v6-c-drawer.pf-m-panel-bottom > .pf-v6-c-drawer__main {
+ flex-direction: column;
+}
+.pf-v6-c-drawer.pf-m-expanded {
+ --pf-v6-c-drawer__panel--TransitionDelay--focus: var(--pf-v6-c-drawer__panel--TransitionDelay--expand--focus);
+}
+.pf-v6-c-drawer.pf-m-expanded > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
+ transform: translateX(-100%);
+ --pf-v6-c-drawer__panel--Opacity: var(--pf-v6-c-drawer--m-expanded__panel--Opacity);
+ visibility: visible;
+}
+:where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-drawer.pf-m-expanded > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
+ transform: translateX(calc(-100% * var(--pf-v6-global--inverse--multiplier)));
+}
+
+.pf-v6-c-drawer.pf-m-expanded.pf-m-panel-left > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
+ transform: translateX(0);
+}
+.pf-v6-c-drawer.pf-m-expanded.pf-m-panel-bottom > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
+ transform: translate(0, -100%);
+}
+.pf-v6-c-drawer.pf-m-resizing {
+ --pf-v6-c-drawer__panel--TransitionProperty: none;
+ pointer-events: none;
+}
+.pf-v6-c-drawer.pf-m-resizing .pf-v6-c-drawer__splitter {
+ pointer-events: auto;
+}
+
+.pf-v6-c-drawer__section {
+ flex-grow: 0;
+ background-color: var(--pf-v6-c-drawer__section--BackgroundColor);
+}
+.pf-v6-c-drawer__section.pf-m-secondary {
+ --pf-v6-c-drawer__section--BackgroundColor: var(--pf-v6-c-drawer__section--m-secondary--BackgroundColor);
+}
+.pf-v6-c-drawer__section.pf-m-no-background {
+ --pf-v6-c-drawer__section--BackgroundColor: transparent;
+}
+
+.pf-v6-c-drawer__main {
+ display: flex;
+ flex: 1;
+ overflow: hidden;
+}
+
+.pf-v6-c-drawer__content,
+.pf-v6-c-drawer__panel,
+.pf-v6-c-drawer__panel-main {
+ display: flex;
+ flex-direction: column;
+ flex-shrink: 0;
+ overflow: auto;
+}
+
+.pf-v6-c-drawer__content {
+ z-index: var(--pf-v6-c-drawer__content--ZIndex);
+ flex-basis: var(--pf-v6-c-drawer__content--FlexBasis);
+ order: 0;
+ background-color: var(--pf-v6-c-drawer__content--BackgroundColor);
+}
+.pf-v6-c-drawer__content.pf-m-primary {
+ --pf-v6-c-drawer__content--BackgroundColor: var(--pf-v6-c-drawer__content--m-primary--BackgroundColor);
+}
+.pf-v6-c-drawer__content.pf-m-secondary {
+ --pf-v6-c-drawer__content--BackgroundColor: var(--pf-v6-c-drawer__content--m-secondary--BackgroundColor);
+}
+.pf-v6-c-drawer__content > .pf-v6-c-drawer__body {
+ padding-block-start: var(--pf-v6-c-drawer__content__body--PaddingBlockStart);
+ padding-block-end: var(--pf-v6-c-drawer__content__body--PaddingBlockEnd);
+ padding-inline-start: var(--pf-v6-c-drawer__content__body--PaddingInlineStart);
+ padding-inline-end: var(--pf-v6-c-drawer__content__body--PaddingInlineEnd);
+}
+
+.pf-v6-c-drawer__panel {
+ position: relative;
+ z-index: var(--pf-v6-c-drawer__panel--ZIndex);
+ flex-basis: var(--pf-v6-c-drawer__panel--FlexBasis);
+ row-gap: var(--pf-v6-c-drawer__panel--RowGap);
+ order: 1;
+ max-height: var(--pf-v6-c-drawer__panel--MaxHeight);
+ overflow: auto;
+ visibility: hidden;
+ background-color: var(--pf-v6-c-drawer__panel--BackgroundColor);
+ box-shadow: var(--pf-v6-c-drawer__panel--BoxShadow);
+ opacity: var(--pf-v6-c-drawer__panel--Opacity);
+ transition-delay: var(--pf-v6-c-drawer__panel--TransitionDelay);
+ transition-timing-function: var(--pf-v6-c-drawer__panel--TransitionTimingFunction);
+ transition-duration: var(--pf-v6-c-drawer__panel--TransitionDuration);
+ transition-property: var(--pf-v6-c-drawer__panel--TransitionProperty);
+ -webkit-overflow-scrolling: touch;
+ border-inline-start: var(--pf-t--global--border--width--regular) solid var(--pf-t--global--border--color--high-contrast);
+}
+.pf-v6-c-drawer__panel::after {
+ position: absolute;
+ inset-block-start: 0;
+ inset-inline-start: 0;
+ width: var(--pf-v6-c-drawer__panel--after--Width);
+ height: 100%;
+ content: "";
+ background-color: var(--pf-v6-c-drawer__panel--after--BackgroundColor);
+}
+.pf-v6-c-drawer__panel:not(.pf-m-resizable) {
+ padding-block-start: var(--pf-v6-c-drawer__panel--PaddingBlockStart);
+ padding-block-end: var(--pf-v6-c-drawer__panel--PaddingBlockEnd);
+}
+.pf-v6-c-drawer__panel.pf-m-secondary {
+ --pf-v6-c-drawer__panel--BackgroundColor: var(--pf-v6-c-drawer__panel--m-secondary--BackgroundColor);
+}
+.pf-v6-c-drawer__panel.pf-m-no-background {
+ --pf-v6-c-drawer__panel--BackgroundColor: transparent;
+}
+@media screen and (min-width: 48rem) {
+ .pf-v6-c-drawer__panel {
+ --pf-v6-c-drawer__panel--FlexBasis:
+ max(
+ var(--pf-v6-c-drawer__panel--md--FlexBasis--min),
+ min(var(--pf-v6-c-drawer__panel--md--FlexBasis), var(--pf-v6-c-drawer__panel--md--FlexBasis--max))
+ );
+ }
+}
+@media screen and (min-width: 75rem) {
+ .pf-v6-c-drawer__panel {
+ --pf-v6-c-drawer__panel--md--FlexBasis: var(--pf-v6-c-drawer__panel--xl--FlexBasis);
+ }
+ .pf-v6-c-drawer.pf-m-panel-bottom .pf-v6-c-drawer__panel {
+ --pf-v6-c-drawer__panel--md--FlexBasis: var(--pf-v6-c-drawer--m-panel-bottom__panel--xl--FlexBasis);
+ }
+}
+
+.pf-v6-c-drawer__panel > .pf-v6-c-drawer__body,
+.pf-v6-c-drawer__panel-main > .pf-v6-c-drawer__body {
+ padding-block-start: var(--pf-v6-c-drawer__panel__body--PaddingBlockStart);
+ padding-block-end: var(--pf-v6-c-drawer__panel__body--PaddingBlockEnd);
+ padding-inline-start: var(--pf-v6-c-drawer__panel__body--PaddingInlineStart);
+ padding-inline-end: var(--pf-v6-c-drawer__panel__body--PaddingInlineEnd);
+}
+
+.pf-v6-c-drawer__panel-main {
+ flex-grow: 1;
+ padding-block-start: var(--pf-v6-c-drawer__panel--PaddingBlockStart);
+ padding-block-end: var(--pf-v6-c-drawer__panel--PaddingBlockEnd);
+}
+
+.pf-v6-c-drawer__head {
+ display: grid;
+ grid-template-columns: auto;
+ grid-auto-columns: max-content;
+ column-gap: var(--pf-v6-c-drawer__head--ColumnGap);
+ padding-block-start: var(--pf-v6-c-drawer__head--PaddingBlockStart);
+ padding-block-end: var(--pf-v6-c-drawer__head--PaddingBlockEnd);
+ padding-inline-start: var(--pf-v6-c-drawer__head--PaddingInlineStart);
+ padding-inline-end: var(--pf-v6-c-drawer__head--PaddingInlineEnd);
+}
+.pf-v6-c-drawer__head > * {
+ grid-column: 1;
+}
+
+.pf-v6-c-drawer__actions {
+ display: flex;
+ grid-row: 1;
+ grid-column: 2;
+ align-self: baseline;
+ margin-block-start: var(--pf-v6-c-drawer__actions--MarginBlockStart);
+ margin-inline-end: var(--pf-v6-c-drawer__actions--MarginInlineEnd);
+}
+
+.pf-v6-c-drawer__description {
+ padding-inline-start: var(--pf-v6-c-drawer__description--PaddingInlineStart);
+ padding-inline-end: var(--pf-v6-c-drawer__description--PaddingInlineEnd);
+}
+
+.pf-v6-c-drawer__body.pf-m-no-padding {
+ padding: 0;
+}
+.pf-v6-c-drawer__body.pf-m-padding {
+ padding-block-start: var(--pf-v6-c-drawer__body--m-padding--PaddingBlockStart);
+ padding-block-end: var(--pf-v6-c-drawer__body--m-padding--PaddingBlockEnd);
+ padding-inline-start: var(--pf-v6-c-drawer__body--m-padding--PaddingInlineStart);
+ padding-inline-end: var(--pf-v6-c-drawer__body--m-padding--PaddingInlineEnd);
+}
+.pf-v6-c-drawer__body:not(.pf-m-no-padding) + * {
+ padding-block-start: 0;
+}
+.pf-v6-c-drawer__body:last-child {
+ flex: 1 1;
+}
+
+.pf-v6-c-drawer__splitter {
+ position: relative;
+ display: none;
+ width: var(--pf-v6-c-drawer__splitter--Width);
+ height: var(--pf-v6-c-drawer__splitter--Height);
+ cursor: var(--pf-v6-c-drawer__splitter--Cursor);
+ background-color: var(--pf-v6-c-drawer__splitter--BackgroundColor);
+}
+.pf-v6-c-drawer__splitter.pf-m-vertical {
+ --pf-v6-c-drawer__splitter--Height: var(--pf-v6-c-drawer__splitter--m-vertical--Height);
+ --pf-v6-c-drawer__splitter--Width: var(--pf-v6-c-drawer__splitter--m-vertical--Width);
+ --pf-v6-c-drawer__splitter--Cursor: var(--pf-v6-c-drawer__splitter--m-vertical--Cursor);
+ --pf-v6-c-drawer__splitter-handle--after--Width: var(--pf-v6-c-drawer__splitter--m-vertical__splitter-handle--after--Width);
+ --pf-v6-c-drawer__splitter-handle--after--Height: var(--pf-v6-c-drawer__splitter--m-vertical__splitter-handle--after--Height);
+ --pf-v6-c-drawer__splitter-handle--after--BorderBlockStartWidth: var(--pf-v6-c-drawer__splitter--m-vertical__splitter-handle--after--BorderBlockStartWidth);
+ --pf-v6-c-drawer__splitter-handle--after--BorderInlineEndWidth: var(--pf-v6-c-drawer__splitter--m-vertical__splitter-handle--after--BorderInlineEndWidth);
+ --pf-v6-c-drawer__splitter-handle--after--BorderBlockEndWidth: var(--pf-v6-c-drawer__splitter--m-vertical__splitter-handle--after--BorderBlockEndWidth);
+ --pf-v6-c-drawer__splitter-handle--after--BorderInlineStartWidth: var(--pf-v6-c-drawer__splitter--m-vertical__splitter-handle--after--BorderInlineStartWidth);
+}
+.pf-v6-c-drawer__splitter:hover, .pf-v6-c-drawer__splitter:focus {
+ --pf-v6-c-drawer__splitter-handle--after--BorderColor: var(--pf-v6-c-drawer__splitter--hover__splitter-handle--after--BorderColor);
+}
+.pf-v6-c-drawer__splitter::after {
+ position: absolute;
+ inset-block-start: 0;
+ inset-block-end: 0;
+ inset-inline-start: 0;
+ inset-inline-end: 0;
+ content: "";
+ border: solid var(--pf-v6-c-drawer__splitter--after--BorderColor);
+ border-block-start-width: var(--pf-v6-c-drawer__splitter--after--BorderBlockStartWidth);
+ border-block-end-width: var(--pf-v6-c-drawer__splitter--after--BorderBlockEndWidth);
+ border-inline-start-width: var(--pf-v6-c-drawer__splitter--after--BorderInlineStartWidth);
+ border-inline-end-width: var(--pf-v6-c-drawer__splitter--after--BorderInlineEndWidth);
+}
+
+.pf-v6-c-drawer__splitter-handle {
+ position: absolute;
+ inset-block-start: var(--pf-v6-c-drawer__splitter-handle--InsetBlockStart);
+ inset-inline-start: var(--pf-v6-c-drawer__splitter-handle--InsetInlineStart);
+ transform: translate(-50%, -50%);
+}
+:where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-drawer__splitter-handle {
+ transform: translate(calc(-50% * var(--pf-v6-global--inverse--multiplier)), -50%);
+}
+
+.pf-v6-c-drawer__splitter-handle::after {
+ display: block;
+ width: var(--pf-v6-c-drawer__splitter-handle--after--Width);
+ height: var(--pf-v6-c-drawer__splitter-handle--after--Height);
+ content: "";
+ border-color: var(--pf-v6-c-drawer__splitter-handle--after--BorderColor);
+ border-style: solid;
+ border-block-start-width: var(--pf-v6-c-drawer__splitter-handle--after--BorderBlockStartWidth);
+ border-block-end-width: var(--pf-v6-c-drawer__splitter-handle--after--BorderBlockEndWidth);
+ border-inline-start-width: var(--pf-v6-c-drawer__splitter-handle--after--BorderInlineStartWidth);
+ border-inline-end-width: var(--pf-v6-c-drawer__splitter-handle--after--BorderInlineEndWidth);
+}
+
+@media screen and (min-width: 48rem) {
+ .pf-v6-c-drawer {
+ min-width: var(--pf-v6-c-drawer__panel--MinWidth);
+ }
+ .pf-v6-c-drawer > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
+ box-shadow: var(--pf-v6-c-drawer--m-expanded__panel--BoxShadow);
+ }
+ .pf-v6-c-drawer > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel.pf-m-resizable {
+ --pf-v6-c-drawer__panel--md--FlexBasis--min: var(--pf-v6-c-drawer__panel--m-resizable--md--FlexBasis--min);
+ flex-direction: var(--pf-v6-c-drawer__panel--m-resizable--FlexDirection);
+ min-width: var(--pf-v6-c-drawer__panel--m-resizable--MinWidth);
+ }
+ .pf-v6-c-drawer > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel.pf-m-resizable::after {
+ width: 0;
+ height: 0;
+ }
+ .pf-v6-c-drawer > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel.pf-m-resizable > .pf-v6-c-drawer__splitter {
+ flex-shrink: 0;
+ }
+ .pf-v6-c-drawer > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel.pf-m-resizable > .pf-v6-c-drawer__panel-main {
+ flex-shrink: 1;
+ }
+ .pf-v6-c-drawer.pf-m-panel-left {
+ --pf-v6-c-drawer--m-expanded__panel--BoxShadow: var(--pf-v6-c-drawer--m-expanded--m-panel-left__panel--BoxShadow);
+ }
+ .pf-v6-c-drawer.pf-m-panel-left.pf-m-inline > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel:not(.pf-m-no-border, .pf-m-resizable), .pf-v6-c-drawer.pf-m-panel-left.pf-m-static > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel:not(.pf-m-no-border, .pf-m-resizable) {
+ padding-inline-start: 0;
+ padding-inline-end: var(--pf-v6-c-drawer--m-panel-left--m-inline__panel--PaddingInlineEnd);
+ }
+ .pf-v6-c-drawer.pf-m-panel-left.pf-m-expanded > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
+ transform: translateX(0);
+ }
+ .pf-v6-c-drawer.pf-m-panel-left > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel::after {
+ inset-inline-start: auto;
+ inset-inline-end: 0;
+ }
+ .pf-v6-c-drawer.pf-m-panel-left > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel.pf-m-resizable > .pf-v6-c-drawer__splitter {
+ --pf-v6-c-drawer__splitter-handle--InsetInlineStart: var(--pf-v6-c-drawer--m-panel-left__splitter-handle--InsetInlineStart);
+ order: 1;
+ }
+ .pf-v6-c-drawer.pf-m-panel-bottom {
+ --pf-v6-c-drawer--m-expanded__panel--BoxShadow: var(--pf-v6-c-drawer--m-expanded--m-panel-bottom__panel--BoxShadow);
+ --pf-v6-c-drawer__panel--MaxHeight: 100%;
+ --pf-v6-c-drawer__panel--FlexBasis--min: var(--pf-v6-c-drawer--m-panel-bottom__panel--FlexBasis--min);
+ min-width: auto;
+ min-height: var(--pf-v6-c-drawer--m-panel-bottom__panel--md--MinHeight);
+ }
+ .pf-v6-c-drawer.pf-m-panel-bottom.pf-m-inline > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel:not(.pf-m-no-border, .pf-m-resizable), .pf-v6-c-drawer.pf-m-panel-bottom.pf-m-static > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel:not(.pf-m-no-border, .pf-m-resizable) {
+ padding-block-start: var(--pf-v6-c-drawer--m-panel-bottom--m-inline__panel--PaddingBlockStart);
+ padding-inline-start: 0;
+ }
+ .pf-v6-c-drawer.pf-m-panel-bottom > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel::after {
+ inset-block-start: 0;
+ inset-inline-start: auto;
+ width: 100%;
+ height: var(--pf-v6-c-drawer--m-panel-bottom__panel--after--Height);
+ }
+ .pf-v6-c-drawer.pf-m-panel-bottom > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel.pf-m-resizable {
+ --pf-v6-c-drawer__panel--md--FlexBasis--min: var(--pf-v6-c-drawer--m-panel-bottom__panel--m-resizable--md--FlexBasis--min);
+ --pf-v6-c-drawer__panel--m-resizable--FlexDirection: var(--pf-v6-c-drawer--m-panel-bottom__panel--m-resizable--FlexDirection);
+ --pf-v6-c-drawer__panel--m-resizable--MinWidth: 0;
+ min-height: var(--pf-v6-c-drawer--m-panel-bottom__panel--m-resizable--MinHeight);
+ }
+ .pf-v6-c-drawer.pf-m-panel-bottom > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel.pf-m-resizable > .pf-v6-c-drawer__splitter {
+ --pf-v6-c-drawer__splitter-handle--InsetBlockStart: var(--pf-v6-c-drawer--m-panel-bottom__splitter-handle--InsetBlockStart);
+ --pf-v6-c-drawer__splitter--after--BorderBlockStartWidth: var(--pf-v6-c-drawer--m-panel-bottom__splitter--after--BorderBlockStartWidth);
+ --pf-v6-c-drawer__splitter--after--BorderInlineEndWidth: 0;
+ --pf-v6-c-drawer__splitter--after--BorderBlockEndWidth: var(--pf-v6-c-drawer--m-panel-bottom__splitter--after--BorderBlockEndWidth);
+ --pf-v6-c-drawer__splitter--after--BorderInlineStartWidth: 0;
+ }
+ .pf-v6-c-drawer.pf-m-inline > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel.pf-m-resizable > .pf-v6-c-drawer__splitter {
+ --pf-v6-c-drawer__splitter--m-vertical--Width: var(--pf-v6-c-drawer--m-inline__splitter--m-vertical--Width);
+ --pf-v6-c-drawer__splitter-handle--InsetInlineStart: var(--pf-v6-c-drawer--m-inline__splitter-handle--InsetInlineStart);
+ outline-offset: var(--pf-v6-c-drawer--m-inline__splitter--focus--OutlineOffset);
+ }
+ .pf-v6-c-drawer.pf-m-inline.pf-m-panel-bottom > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel.pf-m-resizable > .pf-v6-c-drawer__splitter {
+ --pf-v6-c-drawer__splitter--Height: var(--pf-v6-c-drawer--m-inline--m-panel-bottom__splitter--Height);
+ --pf-v6-c-drawer__splitter-handle--InsetBlockStart: var(--pf-v6-c-drawer--m-inline--m-panel-bottom__splitter-handle--InsetBlockStart);
+ --pf-v6-c-drawer__splitter--after--BorderBlockStartWidth: var(--pf-v6-c-drawer--m-inline--m-panel-bottom__splitter--after--BorderBlockStartWidth);
+ --pf-v6-c-drawer__splitter--after--BorderInlineEndWidth: 0;
+ --pf-v6-c-drawer__splitter--after--BorderInlineStartWidth: 0;
+ }
+ .pf-v6-c-drawer > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel.pf-m-no-border,
+ .pf-v6-c-drawer.pf-m-panel-left > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel.pf-m-no-border {
+ --pf-v6-c-drawer--m-expanded__panel--BoxShadow: none;
+ }
+ .pf-v6-c-drawer__splitter {
+ display: block;
+ }
+}
+@media (min-width: 48rem) {
+ .pf-v6-c-drawer__panel.pf-m-width-25 {
+ --pf-v6-c-drawer__panel--md--FlexBasis: 25%;
+ }
+ .pf-v6-c-drawer__panel.pf-m-width-33 {
+ --pf-v6-c-drawer__panel--md--FlexBasis: 33%;
+ }
+ .pf-v6-c-drawer__panel.pf-m-width-50 {
+ --pf-v6-c-drawer__panel--md--FlexBasis: 50%;
+ }
+ .pf-v6-c-drawer__panel.pf-m-width-66 {
+ --pf-v6-c-drawer__panel--md--FlexBasis: 66%;
+ }
+ .pf-v6-c-drawer__panel.pf-m-width-75 {
+ --pf-v6-c-drawer__panel--md--FlexBasis: 75%;
+ }
+ .pf-v6-c-drawer__panel.pf-m-width-100 {
+ --pf-v6-c-drawer__panel--md--FlexBasis: 100%;
+ }
+}
+@media (min-width: 62rem) {
+ .pf-v6-c-drawer__panel.pf-m-width-25-on-lg {
+ --pf-v6-c-drawer__panel--md--FlexBasis: 25%;
+ }
+ .pf-v6-c-drawer__panel.pf-m-width-33-on-lg {
+ --pf-v6-c-drawer__panel--md--FlexBasis: 33%;
+ }
+ .pf-v6-c-drawer__panel.pf-m-width-50-on-lg {
+ --pf-v6-c-drawer__panel--md--FlexBasis: 50%;
+ }
+ .pf-v6-c-drawer__panel.pf-m-width-66-on-lg {
+ --pf-v6-c-drawer__panel--md--FlexBasis: 66%;
+ }
+ .pf-v6-c-drawer__panel.pf-m-width-75-on-lg {
+ --pf-v6-c-drawer__panel--md--FlexBasis: 75%;
+ }
+ .pf-v6-c-drawer__panel.pf-m-width-100-on-lg {
+ --pf-v6-c-drawer__panel--md--FlexBasis: 100%;
+ }
+}
+@media (min-width: 75rem) {
+ .pf-v6-c-drawer__panel.pf-m-width-25-on-xl {
+ --pf-v6-c-drawer__panel--md--FlexBasis: 25%;
+ }
+ .pf-v6-c-drawer__panel.pf-m-width-33-on-xl {
+ --pf-v6-c-drawer__panel--md--FlexBasis: 33%;
+ }
+ .pf-v6-c-drawer__panel.pf-m-width-50-on-xl {
+ --pf-v6-c-drawer__panel--md--FlexBasis: 50%;
+ }
+ .pf-v6-c-drawer__panel.pf-m-width-66-on-xl {
+ --pf-v6-c-drawer__panel--md--FlexBasis: 66%;
+ }
+ .pf-v6-c-drawer__panel.pf-m-width-75-on-xl {
+ --pf-v6-c-drawer__panel--md--FlexBasis: 75%;
+ }
+ .pf-v6-c-drawer__panel.pf-m-width-100-on-xl {
+ --pf-v6-c-drawer__panel--md--FlexBasis: 100%;
+ }
+}
+@media (min-width: 90.625rem) {
+ .pf-v6-c-drawer__panel.pf-m-width-25-on-2xl {
+ --pf-v6-c-drawer__panel--md--FlexBasis: 25%;
+ }
+ .pf-v6-c-drawer__panel.pf-m-width-33-on-2xl {
+ --pf-v6-c-drawer__panel--md--FlexBasis: 33%;
+ }
+ .pf-v6-c-drawer__panel.pf-m-width-50-on-2xl {
+ --pf-v6-c-drawer__panel--md--FlexBasis: 50%;
+ }
+ .pf-v6-c-drawer__panel.pf-m-width-66-on-2xl {
+ --pf-v6-c-drawer__panel--md--FlexBasis: 66%;
+ }
+ .pf-v6-c-drawer__panel.pf-m-width-75-on-2xl {
+ --pf-v6-c-drawer__panel--md--FlexBasis: 75%;
+ }
+ .pf-v6-c-drawer__panel.pf-m-width-100-on-2xl {
+ --pf-v6-c-drawer__panel--md--FlexBasis: 100%;
+ }
+}
+@media (min-width: 48rem) {
+ .pf-v6-c-drawer.pf-m-inline > .pf-v6-c-drawer__main > .pf-v6-c-drawer__content,
+ .pf-v6-c-drawer.pf-m-static > .pf-v6-c-drawer__main > .pf-v6-c-drawer__content {
+ flex-shrink: 1;
+ }
+ .pf-v6-c-drawer.pf-m-inline > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel,
+ .pf-v6-c-drawer.pf-m-static > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
+ --pf-v6-c-drawer--m-expanded__panel--BoxShadow: none;
+ }
+ .pf-v6-c-drawer.pf-m-inline > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel:not(.pf-m-no-border)::after,
+ .pf-v6-c-drawer.pf-m-static > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel:not(.pf-m-no-border)::after {
+ background-color: var(--pf-v6-c-drawer--m-inline--m-expanded__panel--after--BackgroundColor);
+ }
+ .pf-v6-c-drawer.pf-m-inline > .pf-v6-c-drawer__main > .pf-v6-c-drawer__content {
+ overflow-x: auto;
+ }
+ .pf-v6-c-drawer.pf-m-inline > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
+ margin-inline-start: calc(var(--pf-v6-c-drawer__panel--FlexBasis) * -1);
+ transform: translateX(100%);
+ }
+ :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-drawer.pf-m-inline > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
+ transform: translateX(calc(100% * var(--pf-v6-global--inverse--multiplier)));
+ }
+ .pf-v6-c-drawer.pf-m-inline.pf-m-expanded > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
+ margin-inline-start: 0;
+ transform: translateX(0);
+ }
+ .pf-v6-c-drawer.pf-m-inline > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel > .pf-v6-c-drawer__body > .pf-v6-c-drawer__head .pf-v6-c-drawer__close {
+ display: unset;
+ }
+ .pf-v6-c-drawer.pf-m-inline.pf-m-panel-left > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
+ margin-inline-start: 0;
+ margin-inline-end: calc(var(--pf-v6-c-drawer__panel--FlexBasis) * -1);
+ transform: translateX(-100%);
+ }
+ :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-drawer.pf-m-inline.pf-m-panel-left > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
+ transform: translateX(calc(-100% * var(--pf-v6-global--inverse--multiplier)));
+ }
+ .pf-v6-c-drawer.pf-m-inline.pf-m-panel-left.pf-m-expanded > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
+ margin-inline-end: 0;
+ transform: translateX(0);
+ }
+ .pf-v6-c-drawer.pf-m-inline.pf-m-panel-left > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel > .pf-v6-c-drawer__body > .pf-v6-c-drawer__head .pf-v6-c-drawer__close {
+ display: unset;
+ }
+ .pf-v6-c-drawer.pf-m-inline.pf-m-panel-bottom > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
+ margin-block-end: calc(var(--pf-v6-c-drawer__panel--FlexBasis) * -1);
+ transform: translateY(100%);
+ }
+ .pf-v6-c-drawer.pf-m-inline.pf-m-panel-bottom.pf-m-expanded > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
+ margin-block-end: 0;
+ transform: translateY(0);
+ }
+ .pf-v6-c-drawer.pf-m-static > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
+ transform: translateX(0);
+ }
+ .pf-v6-c-drawer.pf-m-static.pf-m-panel-left > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
+ margin-inline-end: 0;
+ transform: translateX(0);
+ }
+ .pf-v6-c-drawer.pf-m-static.pf-m-panel-bottom > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
+ transform: translateX(0);
+ }
+ .pf-v6-c-drawer.pf-m-static > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel > .pf-v6-c-drawer__body > .pf-v6-c-drawer__head .pf-v6-c-drawer__close {
+ display: none;
+ }
+}
+@media (min-width: 62rem) {
+ .pf-v6-c-drawer.pf-m-inline-on-lg > .pf-v6-c-drawer__main > .pf-v6-c-drawer__content,
+ .pf-v6-c-drawer.pf-m-static-on-lg > .pf-v6-c-drawer__main > .pf-v6-c-drawer__content {
+ flex-shrink: 1;
+ }
+ .pf-v6-c-drawer.pf-m-inline-on-lg > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel,
+ .pf-v6-c-drawer.pf-m-static-on-lg > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
+ --pf-v6-c-drawer--m-expanded__panel--BoxShadow: none;
+ }
+ .pf-v6-c-drawer.pf-m-inline-on-lg > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel:not(.pf-m-no-border)::after,
+ .pf-v6-c-drawer.pf-m-static-on-lg > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel:not(.pf-m-no-border)::after {
+ background-color: var(--pf-v6-c-drawer--m-inline--m-expanded__panel--after--BackgroundColor);
+ }
+ .pf-v6-c-drawer.pf-m-inline-on-lg > .pf-v6-c-drawer__main > .pf-v6-c-drawer__content {
+ overflow-x: auto;
+ }
+ .pf-v6-c-drawer.pf-m-inline-on-lg > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
+ margin-inline-start: calc(var(--pf-v6-c-drawer__panel--FlexBasis) * -1);
+ transform: translateX(100%);
+ }
+ :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-drawer.pf-m-inline-on-lg > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
+ transform: translateX(calc(100% * var(--pf-v6-global--inverse--multiplier)));
+ }
+ .pf-v6-c-drawer.pf-m-inline-on-lg.pf-m-expanded > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
+ margin-inline-start: 0;
+ transform: translateX(0);
+ }
+ .pf-v6-c-drawer.pf-m-inline-on-lg > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel > .pf-v6-c-drawer__body > .pf-v6-c-drawer__head .pf-v6-c-drawer__close {
+ display: unset;
+ }
+ .pf-v6-c-drawer.pf-m-inline-on-lg.pf-m-panel-left > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
+ margin-inline-start: 0;
+ margin-inline-end: calc(var(--pf-v6-c-drawer__panel--FlexBasis) * -1);
+ transform: translateX(-100%);
+ }
+ :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-drawer.pf-m-inline-on-lg.pf-m-panel-left > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
+ transform: translateX(calc(-100% * var(--pf-v6-global--inverse--multiplier)));
+ }
+ .pf-v6-c-drawer.pf-m-inline-on-lg.pf-m-panel-left.pf-m-expanded > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
+ margin-inline-end: 0;
+ transform: translateX(0);
+ }
+ .pf-v6-c-drawer.pf-m-inline-on-lg.pf-m-panel-left > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel > .pf-v6-c-drawer__body > .pf-v6-c-drawer__head .pf-v6-c-drawer__close {
+ display: unset;
+ }
+ .pf-v6-c-drawer.pf-m-inline-on-lg.pf-m-panel-bottom > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
+ margin-block-end: calc(var(--pf-v6-c-drawer__panel--FlexBasis) * -1);
+ transform: translateY(100%);
+ }
+ .pf-v6-c-drawer.pf-m-inline-on-lg.pf-m-panel-bottom.pf-m-expanded > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
+ margin-block-end: 0;
+ transform: translateY(0);
+ }
+ .pf-v6-c-drawer.pf-m-static-on-lg > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
+ transform: translateX(0);
+ }
+ .pf-v6-c-drawer.pf-m-static-on-lg.pf-m-panel-left > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
+ margin-inline-end: 0;
+ transform: translateX(0);
+ }
+ .pf-v6-c-drawer.pf-m-static-on-lg.pf-m-panel-bottom > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
+ transform: translateX(0);
+ }
+ .pf-v6-c-drawer.pf-m-static-on-lg > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel > .pf-v6-c-drawer__body > .pf-v6-c-drawer__head .pf-v6-c-drawer__close {
+ display: none;
+ }
+}
+@media (min-width: 75rem) {
+ .pf-v6-c-drawer.pf-m-inline-on-xl > .pf-v6-c-drawer__main > .pf-v6-c-drawer__content,
+ .pf-v6-c-drawer.pf-m-static-on-xl > .pf-v6-c-drawer__main > .pf-v6-c-drawer__content {
+ flex-shrink: 1;
+ }
+ .pf-v6-c-drawer.pf-m-inline-on-xl > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel,
+ .pf-v6-c-drawer.pf-m-static-on-xl > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
+ --pf-v6-c-drawer--m-expanded__panel--BoxShadow: none;
+ }
+ .pf-v6-c-drawer.pf-m-inline-on-xl > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel:not(.pf-m-no-border)::after,
+ .pf-v6-c-drawer.pf-m-static-on-xl > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel:not(.pf-m-no-border)::after {
+ background-color: var(--pf-v6-c-drawer--m-inline--m-expanded__panel--after--BackgroundColor);
+ }
+ .pf-v6-c-drawer.pf-m-inline-on-xl > .pf-v6-c-drawer__main > .pf-v6-c-drawer__content {
+ overflow-x: auto;
+ }
+ .pf-v6-c-drawer.pf-m-inline-on-xl > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
+ margin-inline-start: calc(var(--pf-v6-c-drawer__panel--FlexBasis) * -1);
+ transform: translateX(100%);
+ }
+ :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-drawer.pf-m-inline-on-xl > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
+ transform: translateX(calc(100% * var(--pf-v6-global--inverse--multiplier)));
+ }
+ .pf-v6-c-drawer.pf-m-inline-on-xl.pf-m-expanded > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
+ margin-inline-start: 0;
+ transform: translateX(0);
+ }
+ .pf-v6-c-drawer.pf-m-inline-on-xl > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel > .pf-v6-c-drawer__body > .pf-v6-c-drawer__head .pf-v6-c-drawer__close {
+ display: unset;
+ }
+ .pf-v6-c-drawer.pf-m-inline-on-xl.pf-m-panel-left > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
+ margin-inline-start: 0;
+ margin-inline-end: calc(var(--pf-v6-c-drawer__panel--FlexBasis) * -1);
+ transform: translateX(-100%);
+ }
+ :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-drawer.pf-m-inline-on-xl.pf-m-panel-left > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
+ transform: translateX(calc(-100% * var(--pf-v6-global--inverse--multiplier)));
+ }
+ .pf-v6-c-drawer.pf-m-inline-on-xl.pf-m-panel-left.pf-m-expanded > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
+ margin-inline-end: 0;
+ transform: translateX(0);
+ }
+ .pf-v6-c-drawer.pf-m-inline-on-xl.pf-m-panel-left > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel > .pf-v6-c-drawer__body > .pf-v6-c-drawer__head .pf-v6-c-drawer__close {
+ display: unset;
+ }
+ .pf-v6-c-drawer.pf-m-inline-on-xl.pf-m-panel-bottom > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
+ margin-block-end: calc(var(--pf-v6-c-drawer__panel--FlexBasis) * -1);
+ transform: translateY(100%);
+ }
+ .pf-v6-c-drawer.pf-m-inline-on-xl.pf-m-panel-bottom.pf-m-expanded > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
+ margin-block-end: 0;
+ transform: translateY(0);
+ }
+ .pf-v6-c-drawer.pf-m-static-on-xl > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
+ transform: translateX(0);
+ }
+ .pf-v6-c-drawer.pf-m-static-on-xl.pf-m-panel-left > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
+ margin-inline-end: 0;
+ transform: translateX(0);
+ }
+ .pf-v6-c-drawer.pf-m-static-on-xl.pf-m-panel-bottom > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
+ transform: translateX(0);
+ }
+ .pf-v6-c-drawer.pf-m-static-on-xl > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel > .pf-v6-c-drawer__body > .pf-v6-c-drawer__head .pf-v6-c-drawer__close {
+ display: none;
+ }
+}
+@media (min-width: 90.625rem) {
+ .pf-v6-c-drawer.pf-m-inline-on-2xl > .pf-v6-c-drawer__main > .pf-v6-c-drawer__content,
+ .pf-v6-c-drawer.pf-m-static-on-2xl > .pf-v6-c-drawer__main > .pf-v6-c-drawer__content {
+ flex-shrink: 1;
+ }
+ .pf-v6-c-drawer.pf-m-inline-on-2xl > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel,
+ .pf-v6-c-drawer.pf-m-static-on-2xl > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
+ --pf-v6-c-drawer--m-expanded__panel--BoxShadow: none;
+ }
+ .pf-v6-c-drawer.pf-m-inline-on-2xl > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel:not(.pf-m-no-border)::after,
+ .pf-v6-c-drawer.pf-m-static-on-2xl > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel:not(.pf-m-no-border)::after {
+ background-color: var(--pf-v6-c-drawer--m-inline--m-expanded__panel--after--BackgroundColor);
+ }
+ .pf-v6-c-drawer.pf-m-inline-on-2xl > .pf-v6-c-drawer__main > .pf-v6-c-drawer__content {
+ overflow-x: auto;
+ }
+ .pf-v6-c-drawer.pf-m-inline-on-2xl > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
+ margin-inline-start: calc(var(--pf-v6-c-drawer__panel--FlexBasis) * -1);
+ transform: translateX(100%);
+ }
+ :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-drawer.pf-m-inline-on-2xl > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
+ transform: translateX(calc(100% * var(--pf-v6-global--inverse--multiplier)));
+ }
+ .pf-v6-c-drawer.pf-m-inline-on-2xl.pf-m-expanded > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
+ margin-inline-start: 0;
+ transform: translateX(0);
+ }
+ .pf-v6-c-drawer.pf-m-inline-on-2xl > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel > .pf-v6-c-drawer__body > .pf-v6-c-drawer__head .pf-v6-c-drawer__close {
+ display: unset;
+ }
+ .pf-v6-c-drawer.pf-m-inline-on-2xl.pf-m-panel-left > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
+ margin-inline-start: 0;
+ margin-inline-end: calc(var(--pf-v6-c-drawer__panel--FlexBasis) * -1);
+ transform: translateX(-100%);
+ }
+ :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-drawer.pf-m-inline-on-2xl.pf-m-panel-left > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
+ transform: translateX(calc(-100% * var(--pf-v6-global--inverse--multiplier)));
+ }
+ .pf-v6-c-drawer.pf-m-inline-on-2xl.pf-m-panel-left.pf-m-expanded > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
+ margin-inline-end: 0;
+ transform: translateX(0);
+ }
+ .pf-v6-c-drawer.pf-m-inline-on-2xl.pf-m-panel-left > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel > .pf-v6-c-drawer__body > .pf-v6-c-drawer__head .pf-v6-c-drawer__close {
+ display: unset;
+ }
+ .pf-v6-c-drawer.pf-m-inline-on-2xl.pf-m-panel-bottom > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
+ margin-block-end: calc(var(--pf-v6-c-drawer__panel--FlexBasis) * -1);
+ transform: translateY(100%);
+ }
+ .pf-v6-c-drawer.pf-m-inline-on-2xl.pf-m-panel-bottom.pf-m-expanded > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
+ margin-block-end: 0;
+ transform: translateY(0);
+ }
+ .pf-v6-c-drawer.pf-m-static-on-2xl > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
+ transform: translateX(0);
+ }
+ .pf-v6-c-drawer.pf-m-static-on-2xl.pf-m-panel-left > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
+ margin-inline-end: 0;
+ transform: translateX(0);
+ }
+ .pf-v6-c-drawer.pf-m-static-on-2xl.pf-m-panel-bottom > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
+ transform: translateX(0);
+ }
+ .pf-v6-c-drawer.pf-m-static-on-2xl > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel > .pf-v6-c-drawer__body > .pf-v6-c-drawer__head .pf-v6-c-drawer__close {
+ display: none;
+ }
+}
+.pf-v6-c-empty-state {
+ --pf-v6-c-empty-state--PaddingBlockStart: var(--pf-t--global--spacer--xl);
+ --pf-v6-c-empty-state--PaddingInlineEnd: var(--pf-t--global--spacer--xl);
+ --pf-v6-c-empty-state--PaddingBlockEnd: var(--pf-t--global--spacer--xl);
+ --pf-v6-c-empty-state--PaddingInlineStart: var(--pf-t--global--spacer--xl);
+ --pf-v6-c-empty-state--m-xs--PaddingBlockStart: var(--pf-t--global--spacer--md);
+ --pf-v6-c-empty-state--m-xs--PaddingInlineEnd: var(--pf-t--global--spacer--md);
+ --pf-v6-c-empty-state--m-xs--PaddingBlockEnd: var(--pf-t--global--spacer--md);
+ --pf-v6-c-empty-state--m-xs--PaddingInlineStart: var(--pf-t--global--spacer--md);
+ --pf-v6-c-empty-state__content--MaxWidth: none;
+ --pf-v6-c-empty-state--m-xs__content--MaxWidth: 21.875rem;
+ --pf-v6-c-empty-state--m-sm__content--MaxWidth: 25rem;
+ --pf-v6-c-empty-state--m-lg__content--MaxWidth: 37.5rem;
+ --pf-v6-c-empty-state__icon--MarginBlockEnd: var(--pf-t--global--spacer--lg);
+ --pf-v6-c-empty-state__icon--FontSize: var(--pf-t--global--icon--size--2xl);
+ --pf-v6-c-empty-state__icon--Color: var(--pf-t--global--icon--color--subtle);
+ --pf-v6-c-empty-state--m-xs__icon--MarginBlockEnd: var(--pf-t--global--spacer--lg);
+ --pf-v6-c-empty-state--m-xl__icon--MarginBlockEnd: var(--pf-t--global--spacer--xl);
+ --pf-v6-c-empty-state--m-xl__icon--FontSize: var(--pf-t--global--icon--size--3xl);
+ --pf-v6-c-empty-state--m-danger__icon--Color: var(--pf-t--global--icon--color--status--danger--default);
+ --pf-v6-c-empty-state--m-warning__icon--Color: var(--pf-t--global--icon--color--status--warning--default);
+ --pf-v6-c-empty-state--m-success__icon--Color: var(--pf-t--global--icon--color--status--success--default);
+ --pf-v6-c-empty-state--m-info__icon--Color: var(--pf-t--global--icon--color--status--info--default);
+ --pf-v6-c-empty-state--m-custom__icon--Color: var(--pf-t--global--icon--color--status--custom--default);
+ --pf-v6-c-empty-state__title-text--FontFamily: var(--pf-t--global--font--family--heading);
+ --pf-v6-c-empty-state__title-text--FontSize: var(--pf-t--global--font--size--heading--md);
+ --pf-v6-c-empty-state__title-text--FontWeight: var(--pf-t--global--font--weight--heading--default);
+ --pf-v6-c-empty-state__title-text--LineHeight: var(--pf-t--global--font--line-height--heading);
+ --pf-v6-c-empty-state--m-xs__title-text--FontSize: var(--pf-t--global--font--size--heading--xs);
+ --pf-v6-c-empty-state--m-xl__title-text--FontSize: var(--pf-t--global--font--size--heading--2xl);
+ --pf-v6-c-empty-state--m-xl__title-text--LineHeight: var(--pf-t--global--font--line-height--heading);
+ --pf-v6-c-empty-state__body--MarginBlockStart: var(--pf-t--global--spacer--md);
+ --pf-v6-c-empty-state__body--Color: var(--pf-t--global--text--color--subtle);
+ --pf-v6-c-empty-state--body--FontSize: var(--pf-t--global--font--size--body--lg);
+ --pf-v6-c-empty-state--m-xs__body--FontSize: var(--pf-t--global--font--size--body--lg);
+ --pf-v6-c-empty-state--m-xs__body--MarginBlockStart: var(--pf-t--global--spacer--md);
+ --pf-v6-c-empty-state--m-xl__body--FontSize: var(--pf-t--global--font--size--body--lg);
+ --pf-v6-c-empty-state--m-xl__body--MarginBlockStart: var(--pf-t--global--spacer--xl);
+ --pf-v6-c-empty-state__footer--RowGap: var(--pf-t--global--spacer--gap--group-to-group--vertical--default);
+ --pf-v6-c-empty-state__footer--MarginBlockStart: var(--pf-t--global--spacer--xl);
+ --pf-v6-c-empty-state--m-xs__footer--MarginBlockStart: var(--pf-t--global--spacer--md);
+ --pf-v6-c-empty-state__actions--RowGap: var(--pf-t--global--spacer--gap--group--vertical);
+ --pf-v6-c-empty-state__actions--ColumnGap: var(--pf-t--global--spacer--gap--action-to-action--default);
+}
+
+.pf-v6-c-empty-state {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ padding-block-start: var(--pf-v6-c-empty-state--PaddingBlockStart);
+ padding-block-end: var(--pf-v6-c-empty-state--PaddingBlockEnd);
+ padding-inline-start: var(--pf-v6-c-empty-state--PaddingInlineStart);
+ padding-inline-end: var(--pf-v6-c-empty-state--PaddingInlineEnd);
+ text-align: center;
+}
+.pf-v6-c-empty-state.pf-m-xs {
+ --pf-v6-c-empty-state--PaddingBlockStart: var(--pf-v6-c-empty-state--m-xs--PaddingBlockStart);
+ --pf-v6-c-empty-state--PaddingInlineEnd: var(--pf-v6-c-empty-state--m-xs--PaddingInlineEnd);
+ --pf-v6-c-empty-state--PaddingBlockEnd: var(--pf-v6-c-empty-state--m-xs--PaddingBlockEnd);
+ --pf-v6-c-empty-state--PaddingInlineStart: var(--pf-v6-c-empty-state--m-xs--PaddingInlineStart);
+ --pf-v6-c-empty-state__title-text--FontSize: var(--pf-v6-c-empty-state--m-xs__title-text--FontSize);
+ --pf-v6-c-empty-state__content--MaxWidth: var(--pf-v6-c-empty-state--m-xs__content--MaxWidth);
+ --pf-v6-c-empty-state__icon--MarginBlockEnd: var(--pf-v6-c-empty-state--m-xs__icon--MarginBlockEnd);
+ --pf-v6-c-empty-state__body--MarginBlockStart: var(--pf-v6-c-empty-state--m-xs__body--MarginBlockStart);
+ --pf-v6-c-empty-state--body--FontSize: var(--pf-v6-c-empty-state--m-xs__body--FontSize);
+ --pf-v6-c-empty-state__footer--MarginBlockStart: var(--pf-v6-c-empty-state--m-xs__footer--MarginBlockStart);
+}
+.pf-v6-c-empty-state.pf-m-sm {
+ --pf-v6-c-empty-state__content--MaxWidth: var(--pf-v6-c-empty-state--m-sm__content--MaxWidth);
+}
+.pf-v6-c-empty-state.pf-m-lg {
+ --pf-v6-c-empty-state__content--MaxWidth: var(--pf-v6-c-empty-state--m-lg__content--MaxWidth);
+}
+.pf-v6-c-empty-state.pf-m-xl {
+ --pf-v6-c-empty-state__body--MarginBlockStart: var(--pf-v6-c-empty-state--m-xl__body--MarginBlockStart);
+ --pf-v6-c-empty-state--body--FontSize: var(--pf-v6-c-empty-state--m-xl__body--FontSize);
+ --pf-v6-c-empty-state__icon--MarginBlockEnd: var(--pf-v6-c-empty-state--m-xl__icon--MarginBlockEnd);
+ --pf-v6-c-empty-state__icon--FontSize: var(--pf-v6-c-empty-state--m-xl__icon--FontSize);
+ --pf-v6-c-empty-state__title-text--FontSize: var(--pf-v6-c-empty-state--m-xl__title-text--FontSize);
+ --pf-v6-c-empty-state__title-text--LineHeight: var(--pf-v6-c-empty-state--m-xl__title-text--LineHeight);
+}
+.pf-v6-c-empty-state.pf-m-full-height {
+ height: 100%;
+}
+.pf-v6-c-empty-state.pf-m-danger {
+ --pf-v6-c-empty-state__icon--Color: var(--pf-v6-c-empty-state--m-danger__icon--Color);
+}
+.pf-v6-c-empty-state.pf-m-warning {
+ --pf-v6-c-empty-state__icon--Color: var(--pf-v6-c-empty-state--m-warning__icon--Color);
+}
+.pf-v6-c-empty-state.pf-m-success {
+ --pf-v6-c-empty-state__icon--Color: var(--pf-v6-c-empty-state--m-success__icon--Color);
+}
+.pf-v6-c-empty-state.pf-m-info {
+ --pf-v6-c-empty-state__icon--Color: var(--pf-v6-c-empty-state--m-info__icon--Color);
+}
+.pf-v6-c-empty-state.pf-m-custom {
+ --pf-v6-c-empty-state__icon--Color: var(--pf-v6-c-empty-state--m-custom__icon--Color);
+}
+
+.pf-v6-c-empty-state__content {
+ max-width: var(--pf-v6-c-empty-state__content--MaxWidth);
+}
+
+.pf-v6-c-empty-state__icon {
+ margin-block-end: var(--pf-v6-c-empty-state__icon--MarginBlockEnd);
+ font-size: var(--pf-v6-c-empty-state__icon--FontSize);
+ line-height: 1;
+ color: var(--pf-v6-c-empty-state__icon--Color);
+}
+
+.pf-v6-c-empty-state__title-text {
+ font-family: var(--pf-v6-c-empty-state__title-text--FontFamily);
+ font-size: var(--pf-v6-c-empty-state__title-text--FontSize);
+ font-weight: var(--pf-v6-c-empty-state__title-text--FontWeight);
+ line-height: var(--pf-v6-c-empty-state__title-text--LineHeight);
+}
+
+.pf-v6-c-empty-state__body {
+ margin-block-start: var(--pf-v6-c-empty-state__body--MarginBlockStart);
+ font-size: var(--pf-v6-c-empty-state--body--FontSize);
+ color: var(--pf-v6-c-empty-state__body--Color);
+}
+
+.pf-v6-c-empty-state__footer {
+ display: flex;
+ flex-direction: column;
+ row-gap: var(--pf-v6-c-empty-state__footer--RowGap);
+ align-items: center;
+ margin-block-start: var(--pf-v6-c-empty-state__footer--MarginBlockStart);
+}
+
+.pf-v6-c-empty-state__actions {
+ display: flex;
+ flex-wrap: wrap;
+ gap: var(--pf-v6-c-empty-state__actions--RowGap) var(--pf-v6-c-empty-state__actions--ColumnGap);
+ justify-content: center;
+}
+
+.pf-v6-c-expandable-section {
+ --pf-v6-c-expandable-section--Gap: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-expandable-section__toggle-icon--MinWidth: 1em;
+ --pf-v6-c-expandable-section__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
+ --pf-v6-c-expandable-section__toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
+ --pf-v6-c-expandable-section__toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
+ --pf-v6-c-expandable-section__toggle-icon--Transition: transform var(--pf-v6-c-expandable-section__toggle-icon--TransitionDuration) var(--pf-v6-c-expandable-section__toggle-icon--TransitionTimingFunction);
+ --pf-v6-c-expandable-section__toggle-icon--Rotate: 0;
+ --pf-v6-c-expandable-section__toggle-icon--m-expand-top--Rotate: 0;
+ --pf-v6-c-expandable-section--m-expanded__toggle-icon--Rotate: 90deg;
+ --pf-v6-c-expandable-section--m-expanded__toggle-icon--m-expand-top--Rotate: -90deg;
+ --pf-v6-c-expandable-section__content--TransitionDuration--collapse--slide: 0s;
+ --pf-v6-c-expandable-section__content--TransitionDuration--collapse--fade: var(--pf-t--global--motion--duration--fade--short);
+ --pf-v6-c-expandable-section__content--TransitionDuration--expand--slide: 0s;
+ --pf-v6-c-expandable-section__content--TransitionDuration--expand--fade: var(--pf-t--global--motion--duration--fade--default);
+ --pf-v6-c-expandable-section__content--TransitionDuration--slide: var(--pf-v6-c-expandable-section__content--TransitionDuration--collapse--slide);
+ --pf-v6-c-expandable-section__content--TransitionDuration--fade: var(--pf-v6-c-expandable-section__content--TransitionDuration--collapse--fade);
+ --pf-v6-c-expandable-section__content--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
+ --pf-v6-c-expandable-section__content--TransitionDelay--hide: var(--pf-v6-c-expandable-section__content--TransitionDuration--fade);
+ --pf-v6-c-expandable-section__content--Opacity: 0;
+ --pf-v6-c-expandable-section__content--TranslateY: 0;
+ --pf-v6-c-expandable-section--m-expand-top__content--TranslateY: 0;
+ --pf-v6-c-expandable-section--m-expand-bottom__content--TranslateY: 0;
+ --pf-v6-c-expandable-section--m-expanded__content--Opacity: 1;
+ --pf-v6-c-expandable-section--m-expanded__content--TranslateY: 0;
+ --pf-v6-c-expandable-section__content--MaxWidth: auto;
+ --pf-v6-c-expandable-section--m-limit-width__content--MaxWidth: 46.875rem;
+ --pf-v6-c-expandable-section--m-display-lg--PaddingBlockStart: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-expandable-section--m-display-lg--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-expandable-section--m-display-lg--PaddingInlineStart: var(--pf-t--global--spacer--md);
+ --pf-v6-c-expandable-section--m-display-lg--PaddingInlineEnd: var(--pf-t--global--spacer--md);
+ --pf-v6-c-expandable-section--m-display-lg--m-expanded--PaddingBlockEnd: var(--pf-t--global--spacer--md);
+ --pf-v6-c-expandable-section--m-display-lg--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
+ --pf-v6-c-expandable-section--m-display-lg--BorderWidth: var(--pf-t--global--border--width--box--default);
+ --pf-v6-c-expandable-section--m-display-lg--BorderColor: var(--pf-t--global--border--color--default);
+ --pf-v6-c-expandable-section--m-display-lg--BorderRadius: var(--pf-t--global--border--radius--medium);
+ --pf-v6-c-expandable-section--m-display-lg--TransitionDelay: var(--pf-v6-c-expandable-section__content--TransitionDuration--collapse--fade);
+ --pf-v6-c-expandable-section--m-indented__content--PaddingInlineStart: calc(var(--pf-t--global--spacer--action--horizontal--plain--default) + var(--pf-t--global--spacer--gap--text-to-element--default) + var(--pf-v6-c-expandable-section__toggle-icon--MinWidth));
+ --pf-v6-c-expandable-section--m-truncate__content--LineClamp: 3;
+ --pf-v6-c-expandable-section--m-truncate--Gap: var(--pf-t--global--spacer--xs);
+}
+@media screen and (prefers-reduced-motion: no-preference) {
+ .pf-v6-c-expandable-section {
+ --pf-v6-c-expandable-section__content--TransitionDuration--collapse--slide: var(--pf-t--global--motion--duration--fade--short);
+ --pf-v6-c-expandable-section__content--TransitionDuration--expand--slide: var(--pf-t--global--motion--duration--fade--default);
+ --pf-v6-c-expandable-section__content--TranslateY: -.5rem;
+ --pf-v6-c-expandable-section--m-expand-top__content--TranslateY: .5rem;
+ --pf-v6-c-expandable-section--m-expand-bottom__content--TranslateY: -.5rem;
+ }
+}
+
+.pf-v6-c-expandable-section {
+ display: flex;
+ flex-direction: column;
+ gap: 0;
+ transition-delay: var(--pf-v6-c-expandable-section__content--TransitionDelay--hide);
+ transition-duration: 0s;
+ transition-property: gap, padding-block-end;
+}
+.pf-v6-c-expandable-section.pf-m-expanded {
+ --pf-v6-c-expandable-section__toggle-icon--Rotate: var(--pf-v6-c-expandable-section--m-expanded__toggle-icon--Rotate);
+ --pf-v6-c-expandable-section__toggle-icon--m-expand-top--Rotate: var(--pf-v6-c-expandable-section--m-expanded__toggle-icon--m-expand-top--Rotate);
+ --pf-v6-c-expandable-section--m-display-lg--PaddingBlockEnd: var(--pf-v6-c-expandable-section--m-display-lg--m-expanded--PaddingBlockEnd);
+ --pf-v6-c-expandable-section__content--TransitionDuration--slide: var(--pf-v6-c-expandable-section__content--TransitionDuration--expand--slide);
+ --pf-v6-c-expandable-section__content--TransitionDuration--fade: var(--pf-v6-c-expandable-section__content--TransitionDuration--expand--fade);
+ --pf-v6-c-expandable-section__content--Opacity: var(--pf-v6-c-expandable-section--m-expanded__content--Opacity);
+ --pf-v6-c-expandable-section__content--TranslateY: var(--pf-v6-c-expandable-section--m-expanded__content--TranslateY);
+ --pf-v6-c-expandable-section__content--Visibility: auto;
+ --pf-v6-c-expandable-section__content--MaxHeight: 99999px;
+ --pf-v6-c-expandable-section__content--TransitionDelay--hide: 0s;
+ gap: var(--pf-v6-c-expandable-section--Gap);
+}
+.pf-v6-c-expandable-section.pf-m-expand-top {
+ --pf-v6-c-expandable-section__toggle-icon--Rotate: var(--pf-v6-c-expandable-section__toggle-icon--m-expand-top--Rotate);
+}
+.pf-v6-c-expandable-section:has(.pf-v6-c-expandable-section__content:only-child):not(.pf-m-expand-top, .pf-m-expand-bottom) {
+ --pf-v6-c-expandable-section__content--TranslateY: 0;
+ --pf-v6-c-expandable-section__content--TransitionDuration--expand--fade: 0s;
+ --pf-v6-c-expandable-section__content--TransitionDuration--collapse--fade: 0s;
+}
+.pf-v6-c-expandable-section:has(.pf-v6-c-expandable-section__content:only-child).pf-m-expand-top:not(.pf-m-expanded) {
+ --pf-v6-c-expandable-section__content--TranslateY: var(--pf-v6-c-expandable-section--m-expand-top__content--TranslateY);
+}
+.pf-v6-c-expandable-section:has(.pf-v6-c-expandable-section__content:only-child).pf-m-expand-bottom:not(.pf-m-expanded) {
+ --pf-v6-c-expandable-section__content--TranslateY: var(--pf-v6-c-expandable-section--m-expand-bottom__content--TranslateY);
+}
+.pf-v6-c-expandable-section.pf-m-limit-width {
+ --pf-v6-c-expandable-section__content--MaxWidth: var(--pf-v6-c-expandable-section--m-limit-width__content--MaxWidth);
+}
+.pf-v6-c-expandable-section.pf-m-display-lg {
+ padding-block-start: var(--pf-v6-c-expandable-section--m-display-lg--PaddingBlockStart);
+ padding-block-end: var(--pf-v6-c-expandable-section--m-display-lg--PaddingBlockEnd);
+ padding-inline-start: var(--pf-v6-c-expandable-section--m-display-lg--PaddingInlineStart);
+ padding-inline-end: var(--pf-v6-c-expandable-section--m-display-lg--PaddingInlineEnd);
+ background-color: var(--pf-v6-c-expandable-section--m-display-lg--BackgroundColor);
+ border: var(--pf-v6-c-expandable-section--m-display-lg--BorderWidth) solid var(--pf-v6-c-expandable-section--m-display-lg--BorderColor);
+ border-radius: var(--pf-v6-c-expandable-section--m-display-lg--BorderRadius);
+}
+.pf-v6-c-expandable-section.pf-m-indented {
+ --pf-v6-c-expandable-section__content--PaddingInlineStart: var(--pf-v6-c-expandable-section--m-indented__content--PaddingInlineStart);
+}
+.pf-v6-c-expandable-section.pf-m-truncate {
+ --pf-v6-c-expandable-section--Gap: var(--pf-v6-c-expandable-section--m-truncate--Gap);
+}
+.pf-v6-c-expandable-section.pf-m-truncate:not(.pf-m-expanded) .pf-v6-c-expandable-section__content {
+ display: -webkit-box;
+ -webkit-box-orient: vertical;
+ -webkit-line-clamp: var(--pf-v6-c-expandable-section--m-truncate__content--LineClamp);
+ overflow: hidden;
+}
+
+.pf-v6-c-expandable-section__toggle-icon {
+ display: inline-block;
+ min-width: var(--pf-v6-c-expandable-section__toggle-icon--MinWidth);
+ color: var(--pf-v6-c-expandable-section__toggle-icon--Color);
+ transition: var(--pf-v6-c-expandable-section__toggle-icon--Transition);
+ transform: rotate(var(--pf-v6-c-expandable-section__toggle-icon--Rotate));
+}
+:where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-expandable-section__toggle-icon {
+ scale: -1 1;
+}
+
+.pf-v6-c-expandable-section__toggle-icon.pf-m-expand-top {
+ --pf-v6-c-expandable-section__toggle-icon--Rotate: var(--pf-v6-c-expandable-section__toggle-icon--m-expand-top--Rotate);
+}
+
+.pf-v6-c-expandable-section__content {
+ max-width: var(--pf-v6-c-expandable-section__content--MaxWidth);
+ padding-block-end: var(--pf-v6-c-expandable-section__content--PaddingBlockEnd, 0);
+ padding-inline-start: var(--pf-v6-c-expandable-section__content--PaddingInlineStart, 0);
+}
+.pf-v6-c-expandable-section__content:where([hidden]) {
+ display: revert;
+}
+.pf-v6-c-expandable-section:where(:not(.pf-m-truncate)) .pf-v6-c-expandable-section__content {
+ max-height: var(--pf-v6-c-expandable-section__content--MaxHeight, 0);
+ visibility: var(--pf-v6-c-expandable-section__content--Visibility, hidden);
+ opacity: var(--pf-v6-c-expandable-section__content--Opacity);
+ transition-delay: 0s, 0s, var(--pf-v6-c-expandable-section__content--TransitionDelay--hide, 0s), var(--pf-v6-c-expandable-section__content--TransitionDelay--hide, 0s);
+ transition-timing-function: var(--pf-v6-c-expandable-section__content--TransitionTimingFunction);
+ transition-duration: var(--pf-v6-c-expandable-section__content--TransitionDuration--fade), var(--pf-v6-c-expandable-section__content--TransitionDuration--slide), 0s, 0s;
+ transition-property: opacity, translate, visibility, max-height;
+ translate: 0 var(--pf-v6-c-expandable-section__content--TranslateY);
+}
+
+.pf-v6-c-file-upload {
+ --pf-v6-c-file-upload--RowGap: var(--pf-t--global--spacer--gap--group--vertical);
+ --pf-v6-c-file-upload--PaddingBlockStart: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-file-upload--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-file-upload--PaddingInlineStart: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-file-upload--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-file-upload--BorderRadius: var(--pf-t--global--border--radius--small);
+ --pf-v6-c-file-upload--BorderWidth: var(--pf-t--global--border--width--regular);
+ --pf-v6-c-file-upload--BorderColor: var(--pf-t--global--border--color--default);
+ --pf-v6-c-file-upload--BorderStyle: dashed;
+ --pf-v6-c-file-upload--m-drag-hover--BorderColor: var(--pf-t--global--border--color--clicked);
+ --pf-v6-c-file-upload--m-drag-hover--BorderStyle: dashed;
+ --pf-v6-c-file-upload__file-select__c-button--m-control--OutlineOffset: calc(-1 * var(--pf-t--global--spacer--xs));
+ --pf-v6-c-file-upload__file-details__c-form-control--MinHeight: calc(var(--pf-t--global--spacer--3xl) * 2);
+}
+
+.pf-v6-c-file-upload {
+ position: relative;
+ display: flex;
+ flex-direction: column;
+ row-gap: var(--pf-v6-c-file-upload--RowGap);
+ padding-block-start: var(--pf-v6-c-file-upload--PaddingBlockStart);
+ padding-block-end: var(--pf-v6-c-file-upload--PaddingBlockEnd);
+ padding-inline-start: var(--pf-v6-c-file-upload--PaddingInlineStart);
+ padding-inline-end: var(--pf-v6-c-file-upload--PaddingInlineEnd);
+ border: var(--pf-v6-c-file-upload--BorderWidth) var(--pf-v6-c-file-upload--BorderStyle) var(--pf-v6-c-file-upload--BorderColor);
+ border-radius: var(--pf-v6-c-file-upload--BorderRadius);
+}
+.pf-v6-c-file-upload.pf-m-drag-hover {
+ --pf-v6-c-file-upload--BorderColor: var(--pf-v6-c-file-upload--m-drag-hover--BorderColor);
+ --pf-v6-c-file-upload--BorderStyle: var(--pf-v6-c-file-upload--m-drag-hover--BorderStyle);
+}
+.pf-v6-c-file-upload.pf-m-loading .pf-v6-c-file-upload__file-details {
+ position: relative;
+}
+
+.pf-v6-c-file-upload__file-select .pf-v6-c-button.pf-m-control {
+ outline-offset: var(--pf-v6-c-file-upload__file-select__c-button--m-control--OutlineOffset);
+}
+
+.pf-v6-c-file-upload__file-details {
+ position: relative;
+ display: flex;
+}
+.pf-v6-c-file-upload__file-details .pf-v6-c-form-control {
+ flex: 1 1 auto;
+ min-height: var(--pf-v6-c-file-upload__file-details__c-form-control--MinHeight);
+ border-block-start: 0;
+}
+
+.pf-v6-c-file-upload__file-details-spinner {
+ position: absolute;
+ inset-block-start: 50%;
+ inset-inline-start: 50%;
+ transform: translate(-50%, -50%);
+}
+
+.pf-v6-c-form {
+ --pf-v6-c-form--GridGap: var(--pf-t--global--spacer--gap--group-to-group--vertical--default);
+ --pf-v6-c-form__group--Gap: var(--pf-t--global--spacer--gap--group--vertical);
+ --pf-v6-c-form__group--m-action--MarginBlockStart: var(--pf-t--global--spacer--xl);
+ --pf-v6-c-form--m-horizontal__group-label--md--GridColumnWidth: 9.375rem;
+ --pf-v6-c-form--m-horizontal__group-label--md--GridColumnGap: var(--pf-t--global--spacer--gap--group--horizontal);
+ --pf-v6-c-form--m-horizontal__group-control--md--GridColumnWidth: 1fr;
+ --pf-v6-c-form--m-limit-width--MaxWidth: 55rem;
+ --pf-v6-c-form--m-horizontal__group-label--md--PaddingBlockStart: calc((((((var(--pf-t--global--font--size--body--default) * var(--pf-t--global--font--line-height--body)) + (2 * var(--pf-t--global--border--width--control--default))) - var(--pf-t--global--font--size--body--default)) / 2) + var(--pf-t--global--font--size--body--default)) - ((((var(--pf-t--global--font--size--body--sm) * var(--pf-t--global--font--line-height--body)) - var(--pf-t--global--font--size--body--sm)) / 2) + var(--pf-t--global--font--size--body--sm)) + var(--pf-t--global--border--width--control--default));
+ --pf-v6-c-form__group-label--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-form--m-horizontal__group-label--m-no-padding--md--PaddingBlockStart: 0;
+ --pf-v6-c-form--m-horizontal__group-label--m-no-padding--md--TranslateY: calc(((((var(--pf-t--global--font--size--body--sm) * var(--pf-t--global--font--line-height--body)) - var(--pf-t--global--font--size--body--sm)) / 2) + var(--pf-t--global--font--size--body--sm)) - ((((var(--pf-t--global--font--size--body--default) * var(--pf-t--global--font--line-height--body)) - var(--pf-t--global--font--size--body--default)) / 2) + var(--pf-t--global--font--size--body--default)));
+ --pf-v6-c-form__label--FontSize: var(--pf-t--global--font--size--body--default);
+ --pf-v6-c-form__label--LineHeight: var(--pf-t--global--font--line-height--body);
+ --pf-v6-c-form__label--m-disabled--Color: var(--pf-t--global--text--color--disabled);
+ --pf-v6-c-form__label--hover--Cursor: pointer;
+ --pf-v6-c-form__label--m-disabled--hover--Cursor: not-allowed;
+ --pf-v6-c-form__label-text--FontWeight: var(--pf-t--global--font--weight--body--bold);
+ --pf-v6-c-form__label-required--MarginInlineStart: var(--pf-t--global--spacer--xs);
+ --pf-v6-c-form__label-required--FontSize: var(--pf-t--global--font--size--body--default);
+ --pf-v6-c-form__label-required--Color: var(--pf-t--global--color--status--danger--default);
+ --pf-v6-c-form__group-label-help--FontSize: var(--pf-t--global--font--size--body--default);
+ --pf-v6-c-form__group-label--m-info--Gap: var(--pf-t--global--spacer--gap--horizontal);
+ --pf-v6-c-form__group-label-info--FontSize: var(--pf-t--global--font--size--body--sm);
+ --pf-v6-c-form--m-horizontal__group-label--m-info--Gap: var(--pf-t--global--spacer--gap--group--vertical);
+ --pf-v6-c-form__group-control--m-inline--Gap: var(--pf-t--global--spacer--gap--group--horizontal);
+ --pf-v6-c-form__group-control__helper-text--MarginBlockEnd: var(--pf-t--global--spacer--xs);
+ --pf-v6-c-form__group-control--m-stack--Gap: var(--pf-t--global--spacer--gap--group--vertical);
+ --pf-v6-c-form__group-control--m-stack__helper-text--MarginBlockStart: calc(var(--pf-v6-c-form__group-control--m-stack--Gap) * -1 + var(--pf-v6-c-form__helper-text--MarginBlockStart--base));
+ --pf-v6-c-form__actions--child--MarginBlockStart: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-form__actions--child--MarginInlineEnd: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-form__actions--child--MarginBlockEnd: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-form__actions--child--MarginInlineStart: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-form__actions--MarginBlockStart: calc(var(--pf-v6-c-form__actions--child--MarginBlockStart) * -1);
+ --pf-v6-c-form__actions--MarginInlineEnd: calc(var(--pf-v6-c-form__actions--child--MarginInlineEnd) * -1);
+ --pf-v6-c-form__actions--MarginBlockEnd: calc(var(--pf-v6-c-form__actions--child--MarginBlockEnd) * -1);
+ --pf-v6-c-form__actions--MarginInlineStart: calc(var(--pf-v6-c-form__actions--child--MarginInlineStart) * -1);
+ --pf-v6-c-form__helper-text--MarginBlockStart--base: var(--pf-t--global--spacer--xs);
+ --pf-v6-c-form__helper-text--MarginBlockStart: var(--pf-v6-c-form__helper-text--MarginBlockStart--base);
+ --pf-v6-c-form__section--MarginBlockStart: var(--pf-t--global--spacer--xl);
+ --pf-v6-c-form__section--Gap: var(--pf-v6-c-form--GridGap);
+ --pf-v6-c-form__section-title--FontSize: var(--pf-t--global--font--size--heading--xs);
+ --pf-v6-c-form__section-title--FontWeight: var(--pf-t--global--font--weight--heading--default);
+ --pf-v6-c-form__section-title--MarginBlockEnd: calc(var(--pf-t--global--spacer--sm) * -1);
+ --pf-v6-c-form__field-group--border-width-base: var(--pf-t--global--border--width--divider--default);
+ --pf-v6-c-form__field-group--BorderBlockStartWidth: var(--pf-v6-c-form__field-group--border-width-base);
+ --pf-v6-c-form__field-group--BorderBlockStartColor: var(--pf-t--global--border--color--default);
+ --pf-v6-c-form__field-group--BorderBlockEndWidth: var(--pf-v6-c-form__field-group--border-width-base);
+ --pf-v6-c-form__field-group--BorderBlockEndColor: var(--pf-t--global--border--color--default);
+ --pf-v6-c-form__field-group--field-group--MarginBlockStart: calc(var(--pf-v6-c-form--GridGap) * -1);
+ --pf-v6-c-form__field-group--GridTemplateColumns--toggle: calc(var(--pf-t--global--spacer--md) * 2 + var(--pf-v6-c-form__field-group-toggle-icon--MinWidth) + var(--pf-t--global--spacer--xs));
+ --pf-v6-c-form__field-group-toggle--PaddingBlockStart: var(--pf-v6-c-form__field-group-header--PaddingBlockStart);
+ --pf-v6-c-form__field-group-toggle--PaddingInlineEnd: var(--pf-t--global--spacer--xs);
+ --pf-v6-c-form__field-group__field-group__field-group-toggle--PaddingBlockStart: var(--pf-t--global--spacer--lg);
+ --pf-v6-c-form__field-group-header-toggle--BorderWidth--base: var(--pf-t--global--border--width--divider--default);
+ --pf-v6-c-form__field-group__field-group--field-group__field-group-toggle--after--BorderBlockStartWidth: var(--pf-v6-c-form__field-group-header-toggle--BorderWidth--base);
+ --pf-v6-c-form__field-group-toggle-button--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--plain) * -1);
+ --pf-v6-c-form__field-group-toggle-button--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--plain) * -1);
+ --pf-v6-c-form__field-group-toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
+ --pf-v6-c-form__field-group-toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
+ --pf-v6-c-form__field-group-toggle-icon--MinWidth: var(--pf-t--global--font--size--body--default);
+ --pf-v6-c-form__field-group-toggle-icon--Rotate: 0;
+ --pf-v6-c-form__field-group--m-expanded__toggle-icon--Rotate: 90deg;
+ --pf-v6-c-form__field-group-header--PaddingBlockStart: var(--pf-t--global--spacer--md);
+ --pf-v6-c-form__field-group-header--PaddingBlockEnd: var(--pf-t--global--spacer--md);
+ --pf-v6-c-form__field-group-header--GridColumn: 1 / 3;
+ --pf-v6-c-form__field-group__field-group__field-group-header--PaddingBlockStart: var(--pf-t--global--spacer--lg);
+ --pf-v6-c-form__field-group__field-group__field-group-header--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
+ --pf-v6-c-form__field-group-toggle--field-group-header--GridColumn: 2 / 3;
+ --pf-v6-c-form__field-group__field-group--field-group__field-group-header--after--BorderBlockStartWidth: var(--pf-v6-c-form__field-group-header-toggle--BorderWidth--base);
+ --pf-v6-c-form__field-group-header-description--MarginBlockStart: var(--pf-t--global--spacer--xs);
+ --pf-v6-c-form__field-group-header-description--Color: var(--pf-t--global--text--color--subtle);
+ --pf-v6-c-form__field-group-header-actions--MarginInlineStart: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-form__field-group-header-actions--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--plain) * -1);
+ --pf-v6-c-form__field-group-header-actions--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--plain) * -1);
+ --pf-v6-c-form__field-group-body--PaddingBlockStart: var(--pf-t--global--spacer--lg);
+ --pf-v6-c-form__field-group-body--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
+ --pf-v6-c-form__field-group-body--Gap: var(--pf-v6-c-form--GridGap);
+ --pf-v6-c-form__field-group-body--GridColumn: 2 / 3;
+ --pf-v6-c-form__field-group__field-group__field-group-body--GridColumn: 1 / 3;
+ --pf-v6-c-form__field-group__field-group__field-group-toggle--field-group-body--GridColumn: 2 / 3;
+ --pf-v6-c-form__field-group-body__field-group--last-child--MarginBlockEnd: calc(var(--pf-v6-c-form__field-group-body--PaddingBlockEnd) * -1);
+ --pf-v6-c-form__field-group-body--TranslateY: 0;
+ --pf-v6-c-form__field-group--m-expanded__field-group-body--TranslateY: 0;
+ --pf-v6-c-form__field-group-body--TransitionDuration--expand--slide: 0s;
+ --pf-v6-c-form__field-group-body--TransitionDuration--expand--fade: var(--pf-t--global--motion--duration--fade--default);
+ --pf-v6-c-form__field-group-body--TransitionDuration--collapse--slide: 0s;
+ --pf-v6-c-form__field-group-body--TransitionDuration--collapse--fade: var(--pf-t--global--motion--duration--fade--short);
+}
+@media screen and (prefers-reduced-motion: no-preference) {
+ .pf-v6-c-form {
+ --pf-v6-c-form__field-group-body--TransitionDuration--expand--slide: var(--pf-t--global--motion--duration--fade--default);
+ --pf-v6-c-form__field-group-body--TransitionDuration--collapse--slide: var(--pf-t--global--motion--duration--fade--short);
+ --pf-v6-c-form__field-group-body--TranslateY: -.5rem;
+ }
+}
+
+.pf-v6-c-form {
+ display: grid;
+ gap: var(--pf-v6-c-form--GridGap);
+}
+.pf-v6-c-form.pf-m-horizontal.pf-m-align-right .pf-v6-c-form__label {
+ text-align: end;
+}
+@media screen and (min-width: 48rem) {
+ .pf-v6-c-form.pf-m-horizontal {
+ --pf-v6-c-form__group-label--PaddingBlockEnd: 0;
+ }
+ .pf-v6-c-form.pf-m-horizontal .pf-v6-c-form__group {
+ display: grid;
+ grid-template-columns: var(--pf-v6-c-form--m-horizontal__group-label--md--GridColumnWidth) var(--pf-v6-c-form--m-horizontal__group-control--md--GridColumnWidth);
+ grid-column-gap: var(--pf-v6-c-form--m-horizontal__group-label--md--GridColumnGap);
+ }
+ .pf-v6-c-form.pf-m-horizontal .pf-v6-c-form__group-label {
+ padding-block-start: var(--pf-v6-c-form--m-horizontal__group-label--md--PaddingBlockStart);
+ }
+ .pf-v6-c-form.pf-m-horizontal .pf-v6-c-form__group-label.pf-m-no-padding-top {
+ --pf-v6-c-form--m-horizontal__group-label--md--PaddingBlockStart: var(--pf-v6-c-form--m-horizontal__group-label--m-no-padding--md--PaddingBlockStart);
+ transform: translateY(var(--pf-v6-c-form--m-horizontal__group-label--m-no-padding--md--TranslateY));
+ }
+ .pf-v6-c-form.pf-m-horizontal .pf-v6-c-form__group-label.pf-m-info {
+ --pf-v6-c-form__group-label--m-info--Gap: var(--pf-v6-c-form--m-horizontal__group-label--m-info--Gap);
+ flex-direction: column;
+ align-items: flex-start;
+ }
+ .pf-v6-c-form.pf-m-horizontal .pf-v6-c-form__group-label-main {
+ flex-grow: 0;
+ }
+ .pf-v6-c-form.pf-m-horizontal .pf-v6-c-form__group-control {
+ grid-column: 2;
+ }
+}
+@media screen and (min-width: 0) {
+ .pf-v6-c-form.pf-m-horizontal-on-xs {
+ --pf-v6-c-form__group-label--PaddingBlockEnd: 0;
+ }
+ .pf-v6-c-form.pf-m-horizontal-on-xs .pf-v6-c-form__group {
+ display: grid;
+ grid-template-columns: var(--pf-v6-c-form--m-horizontal__group-label--md--GridColumnWidth) var(--pf-v6-c-form--m-horizontal__group-control--md--GridColumnWidth);
+ grid-column-gap: var(--pf-v6-c-form--m-horizontal__group-label--md--GridColumnGap);
+ }
+ .pf-v6-c-form.pf-m-horizontal-on-xs .pf-v6-c-form__group-label {
+ padding-block-start: var(--pf-v6-c-form--m-horizontal__group-label--md--PaddingBlockStart);
+ }
+ .pf-v6-c-form.pf-m-horizontal-on-xs .pf-v6-c-form__group-label.pf-m-no-padding-top {
+ --pf-v6-c-form--m-horizontal__group-label--md--PaddingBlockStart: var(--pf-v6-c-form--m-horizontal__group-label--m-no-padding--md--PaddingBlockStart);
+ transform: translateY(var(--pf-v6-c-form--m-horizontal__group-label--m-no-padding--md--TranslateY));
+ }
+ .pf-v6-c-form.pf-m-horizontal-on-xs .pf-v6-c-form__group-label.pf-m-info {
+ --pf-v6-c-form__group-label--m-info--Gap: var(--pf-v6-c-form--m-horizontal__group-label--m-info--Gap);
+ flex-direction: column;
+ align-items: flex-start;
+ }
+ .pf-v6-c-form.pf-m-horizontal-on-xs .pf-v6-c-form__group-label-main {
+ flex-grow: 0;
+ }
+ .pf-v6-c-form.pf-m-horizontal-on-xs .pf-v6-c-form__group-control {
+ grid-column: 2;
+ }
+}
+@media (min-width: 36rem) {
+ .pf-v6-c-form.pf-m-horizontal-on-sm {
+ --pf-v6-c-form__group-label--PaddingBlockEnd: 0;
+ }
+ .pf-v6-c-form.pf-m-horizontal-on-sm .pf-v6-c-form__group {
+ display: grid;
+ grid-template-columns: var(--pf-v6-c-form--m-horizontal__group-label--md--GridColumnWidth) var(--pf-v6-c-form--m-horizontal__group-control--md--GridColumnWidth);
+ grid-column-gap: var(--pf-v6-c-form--m-horizontal__group-label--md--GridColumnGap);
+ }
+ .pf-v6-c-form.pf-m-horizontal-on-sm .pf-v6-c-form__group-label {
+ padding-block-start: var(--pf-v6-c-form--m-horizontal__group-label--md--PaddingBlockStart);
+ }
+ .pf-v6-c-form.pf-m-horizontal-on-sm .pf-v6-c-form__group-label.pf-m-no-padding-top {
+ --pf-v6-c-form--m-horizontal__group-label--md--PaddingBlockStart: var(--pf-v6-c-form--m-horizontal__group-label--m-no-padding--md--PaddingBlockStart);
+ transform: translateY(var(--pf-v6-c-form--m-horizontal__group-label--m-no-padding--md--TranslateY));
+ }
+ .pf-v6-c-form.pf-m-horizontal-on-sm .pf-v6-c-form__group-label.pf-m-info {
+ --pf-v6-c-form__group-label--m-info--Gap: var(--pf-v6-c-form--m-horizontal__group-label--m-info--Gap);
+ flex-direction: column;
+ align-items: flex-start;
+ }
+ .pf-v6-c-form.pf-m-horizontal-on-sm .pf-v6-c-form__group-label-main {
+ flex-grow: 0;
+ }
+ .pf-v6-c-form.pf-m-horizontal-on-sm .pf-v6-c-form__group-control {
+ grid-column: 2;
+ }
+}
+@media (min-width: 48rem) {
+ .pf-v6-c-form.pf-m-horizontal-on-md {
+ --pf-v6-c-form__group-label--PaddingBlockEnd: 0;
+ }
+ .pf-v6-c-form.pf-m-horizontal-on-md .pf-v6-c-form__group {
+ display: grid;
+ grid-template-columns: var(--pf-v6-c-form--m-horizontal__group-label--md--GridColumnWidth) var(--pf-v6-c-form--m-horizontal__group-control--md--GridColumnWidth);
+ grid-column-gap: var(--pf-v6-c-form--m-horizontal__group-label--md--GridColumnGap);
+ }
+ .pf-v6-c-form.pf-m-horizontal-on-md .pf-v6-c-form__group-label {
+ padding-block-start: var(--pf-v6-c-form--m-horizontal__group-label--md--PaddingBlockStart);
+ }
+ .pf-v6-c-form.pf-m-horizontal-on-md .pf-v6-c-form__group-label.pf-m-no-padding-top {
+ --pf-v6-c-form--m-horizontal__group-label--md--PaddingBlockStart: var(--pf-v6-c-form--m-horizontal__group-label--m-no-padding--md--PaddingBlockStart);
+ transform: translateY(var(--pf-v6-c-form--m-horizontal__group-label--m-no-padding--md--TranslateY));
+ }
+ .pf-v6-c-form.pf-m-horizontal-on-md .pf-v6-c-form__group-label.pf-m-info {
+ --pf-v6-c-form__group-label--m-info--Gap: var(--pf-v6-c-form--m-horizontal__group-label--m-info--Gap);
+ flex-direction: column;
+ align-items: flex-start;
+ }
+ .pf-v6-c-form.pf-m-horizontal-on-md .pf-v6-c-form__group-label-main {
+ flex-grow: 0;
+ }
+ .pf-v6-c-form.pf-m-horizontal-on-md .pf-v6-c-form__group-control {
+ grid-column: 2;
+ }
+}
+@media (min-width: 62rem) {
+ .pf-v6-c-form.pf-m-horizontal-on-lg {
+ --pf-v6-c-form__group-label--PaddingBlockEnd: 0;
+ }
+ .pf-v6-c-form.pf-m-horizontal-on-lg .pf-v6-c-form__group {
+ display: grid;
+ grid-template-columns: var(--pf-v6-c-form--m-horizontal__group-label--md--GridColumnWidth) var(--pf-v6-c-form--m-horizontal__group-control--md--GridColumnWidth);
+ grid-column-gap: var(--pf-v6-c-form--m-horizontal__group-label--md--GridColumnGap);
+ }
+ .pf-v6-c-form.pf-m-horizontal-on-lg .pf-v6-c-form__group-label {
+ padding-block-start: var(--pf-v6-c-form--m-horizontal__group-label--md--PaddingBlockStart);
+ }
+ .pf-v6-c-form.pf-m-horizontal-on-lg .pf-v6-c-form__group-label.pf-m-no-padding-top {
+ --pf-v6-c-form--m-horizontal__group-label--md--PaddingBlockStart: var(--pf-v6-c-form--m-horizontal__group-label--m-no-padding--md--PaddingBlockStart);
+ transform: translateY(var(--pf-v6-c-form--m-horizontal__group-label--m-no-padding--md--TranslateY));
+ }
+ .pf-v6-c-form.pf-m-horizontal-on-lg .pf-v6-c-form__group-label.pf-m-info {
+ --pf-v6-c-form__group-label--m-info--Gap: var(--pf-v6-c-form--m-horizontal__group-label--m-info--Gap);
+ flex-direction: column;
+ align-items: flex-start;
+ }
+ .pf-v6-c-form.pf-m-horizontal-on-lg .pf-v6-c-form__group-label-main {
+ flex-grow: 0;
+ }
+ .pf-v6-c-form.pf-m-horizontal-on-lg .pf-v6-c-form__group-control {
+ grid-column: 2;
+ }
+}
+@media (min-width: 75rem) {
+ .pf-v6-c-form.pf-m-horizontal-on-xl {
+ --pf-v6-c-form__group-label--PaddingBlockEnd: 0;
+ }
+ .pf-v6-c-form.pf-m-horizontal-on-xl .pf-v6-c-form__group {
+ display: grid;
+ grid-template-columns: var(--pf-v6-c-form--m-horizontal__group-label--md--GridColumnWidth) var(--pf-v6-c-form--m-horizontal__group-control--md--GridColumnWidth);
+ grid-column-gap: var(--pf-v6-c-form--m-horizontal__group-label--md--GridColumnGap);
+ }
+ .pf-v6-c-form.pf-m-horizontal-on-xl .pf-v6-c-form__group-label {
+ padding-block-start: var(--pf-v6-c-form--m-horizontal__group-label--md--PaddingBlockStart);
+ }
+ .pf-v6-c-form.pf-m-horizontal-on-xl .pf-v6-c-form__group-label.pf-m-no-padding-top {
+ --pf-v6-c-form--m-horizontal__group-label--md--PaddingBlockStart: var(--pf-v6-c-form--m-horizontal__group-label--m-no-padding--md--PaddingBlockStart);
+ transform: translateY(var(--pf-v6-c-form--m-horizontal__group-label--m-no-padding--md--TranslateY));
+ }
+ .pf-v6-c-form.pf-m-horizontal-on-xl .pf-v6-c-form__group-label.pf-m-info {
+ --pf-v6-c-form__group-label--m-info--Gap: var(--pf-v6-c-form--m-horizontal__group-label--m-info--Gap);
+ flex-direction: column;
+ align-items: flex-start;
+ }
+ .pf-v6-c-form.pf-m-horizontal-on-xl .pf-v6-c-form__group-label-main {
+ flex-grow: 0;
+ }
+ .pf-v6-c-form.pf-m-horizontal-on-xl .pf-v6-c-form__group-control {
+ grid-column: 2;
+ }
+}
+@media (min-width: 90.625rem) {
+ .pf-v6-c-form.pf-m-horizontal-on-2xl {
+ --pf-v6-c-form__group-label--PaddingBlockEnd: 0;
+ }
+ .pf-v6-c-form.pf-m-horizontal-on-2xl .pf-v6-c-form__group {
+ display: grid;
+ grid-template-columns: var(--pf-v6-c-form--m-horizontal__group-label--md--GridColumnWidth) var(--pf-v6-c-form--m-horizontal__group-control--md--GridColumnWidth);
+ grid-column-gap: var(--pf-v6-c-form--m-horizontal__group-label--md--GridColumnGap);
+ }
+ .pf-v6-c-form.pf-m-horizontal-on-2xl .pf-v6-c-form__group-label {
+ padding-block-start: var(--pf-v6-c-form--m-horizontal__group-label--md--PaddingBlockStart);
+ }
+ .pf-v6-c-form.pf-m-horizontal-on-2xl .pf-v6-c-form__group-label.pf-m-no-padding-top {
+ --pf-v6-c-form--m-horizontal__group-label--md--PaddingBlockStart: var(--pf-v6-c-form--m-horizontal__group-label--m-no-padding--md--PaddingBlockStart);
+ transform: translateY(var(--pf-v6-c-form--m-horizontal__group-label--m-no-padding--md--TranslateY));
+ }
+ .pf-v6-c-form.pf-m-horizontal-on-2xl .pf-v6-c-form__group-label.pf-m-info {
+ --pf-v6-c-form__group-label--m-info--Gap: var(--pf-v6-c-form--m-horizontal__group-label--m-info--Gap);
+ flex-direction: column;
+ align-items: flex-start;
+ }
+ .pf-v6-c-form.pf-m-horizontal-on-2xl .pf-v6-c-form__group-label-main {
+ flex-grow: 0;
+ }
+ .pf-v6-c-form.pf-m-horizontal-on-2xl .pf-v6-c-form__group-control {
+ grid-column: 2;
+ }
+}
+.pf-v6-c-form.pf-m-limit-width {
+ max-width: var(--pf-v6-c-form--m-limit-width--MaxWidth);
+}
+
+.pf-v6-c-form__group {
+ display: flex;
+ flex-direction: column;
+ gap: var(--pf-v6-c-form__group--Gap);
+ min-width: 0;
+}
+.pf-v6-c-form__group.pf-m-action {
+ margin-block-start: var(--pf-v6-c-form__group--m-action--MarginBlockStart);
+ overflow: hidden;
+}
+
+.pf-v6-c-form__section {
+ display: grid;
+ gap: var(--pf-v6-c-form__section--Gap);
+}
+.pf-v6-c-form__section + .pf-v6-c-form__group:not(.pf-m-action), .pf-v6-c-form__section:not(:first-child) {
+ margin-block-start: var(--pf-v6-c-form__section--MarginBlockStart);
+}
+
+.pf-v6-c-form__section-title {
+ margin-block-end: var(--pf-v6-c-form__section-title--MarginBlockEnd);
+ font-size: var(--pf-v6-c-form__section-title--FontSize);
+ font-weight: var(--pf-v6-c-form__section-title--FontWeight);
+}
+
+.pf-v6-c-form__group-label {
+ --pf-v6-c-form__helper-text--MarginBlockStart: 0;
+}
+.pf-v6-c-form__group-label.pf-m-info {
+ display: flex;
+ gap: var(--pf-v6-c-form__group-label--m-info--Gap);
+ align-items: flex-end;
+}
+
+.pf-v6-c-form__group-label-main {
+ flex-grow: 1;
+}
+
+.pf-v6-c-form__group-label-info {
+ font-size: var(--pf-v6-c-form__group-label-info--FontSize);
+}
+
+.pf-v6-c-form__label {
+ font-size: var(--pf-v6-c-form__label--FontSize);
+ line-height: var(--pf-v6-c-form__label--LineHeight);
+}
+.pf-v6-c-form__label:not(.pf-m-disabled):hover {
+ cursor: var(--pf-v6-c-form__label--hover--Cursor);
+}
+.pf-v6-c-form__label.pf-m-disabled {
+ color: var(--pf-v6-c-form__label--m-disabled--Color);
+}
+.pf-v6-c-form__label.pf-m-disabled:hover {
+ cursor: var(--pf-v6-c-form__label--m-disabled--hover--Cursor);
+}
+
+.pf-v6-c-form__label-text {
+ font-weight: var(--pf-v6-c-form__label-text--FontWeight);
+}
+
+.pf-v6-c-form__label-required {
+ margin-inline-start: var(--pf-v6-c-form__label-required--MarginInlineStart);
+ font-size: var(--pf-v6-c-form__label-required--FontSize);
+ color: var(--pf-v6-c-form__label-required--Color);
+}
+
+.pf-v6-c-form__group-label-help .pf-v6-c-button {
+ --pf-v6-c-button--FontSize: var(--pf-v6-c-form__group-label-help--FontSize);
+}
+
+.pf-v6-c-form__group-control {
+ min-width: 0;
+}
+.pf-v6-c-form__group-control.pf-m-inline {
+ display: flex;
+ flex-flow: row wrap;
+ gap: var(--pf-v6-c-form__group-control--m-inline--Gap);
+}
+.pf-v6-c-form__group-control.pf-m-stack {
+ --pf-v6-c-form__helper-text--MarginBlockStart: var(--pf-v6-c-form__group-control--m-stack__helper-text--MarginBlockStart);
+ display: grid;
+ gap: var(--pf-v6-c-form__group-control--m-stack--Gap);
+}
+.pf-v6-c-form__group-control .pf-v6-c-form__helper-text:first-child {
+ --pf-v6-c-form__helper-text--MarginBlockStart: 0;
+ margin-block-end: var(--pf-v6-c-form__group-control__helper-text--MarginBlockEnd);
+}
+
+.pf-v6-c-form__helper-text {
+ margin-block-start: var(--pf-v6-c-form__helper-text--MarginBlockStart);
+}
+.pf-v6-c-form__helper-text.pf-m-inactive {
+ display: none;
+}
+.pf-v6-c-form__helper-text.pf-m-hidden {
+ visibility: hidden;
+ opacity: 0;
+}
+
+.pf-v6-c-form__fieldset {
+ border: 0;
+}
+
+.pf-v6-c-form__actions {
+ display: flex;
+ flex-wrap: wrap;
+ margin-block-start: var(--pf-v6-c-form__actions--MarginBlockStart);
+ margin-block-end: var(--pf-v6-c-form__actions--MarginBlockEnd);
+ margin-inline-start: var(--pf-v6-c-form__actions--MarginInlineStart);
+ margin-inline-end: var(--pf-v6-c-form__actions--MarginInlineEnd);
+}
+.pf-v6-c-form__actions > * {
+ margin-block-start: var(--pf-v6-c-form__actions--child--MarginBlockStart);
+ margin-block-end: var(--pf-v6-c-form__actions--child--MarginBlockEnd);
+ margin-inline-start: var(--pf-v6-c-form__actions--child--MarginInlineStart);
+ margin-inline-end: var(--pf-v6-c-form__actions--child--MarginInlineEnd);
+}
+
+.pf-v6-c-form__field-group {
+ --pf-v6-c-form__field-group--BorderBlockStartWidth: var(--pf-v6-c-form__field-group--border-width-base);
+ display: grid;
+ grid-template-columns: minmax(var(--pf-v6-c-form__field-group--GridTemplateColumns--toggle), max-content) 1fr;
+ border-block-start: var(--pf-v6-c-form__field-group--BorderBlockStartWidth) solid var(--pf-v6-c-form__field-group--BorderBlockStartColor);
+ border-block-end: var(--pf-v6-c-form__field-group--BorderBlockEndWidth) solid var(--pf-v6-c-form__field-group--BorderBlockEndColor);
+}
+.pf-v6-c-form__field-group:last-child {
+ --pf-v6-c-form__field-group--BorderBlockEndWidth: 0;
+}
+.pf-v6-c-form__field-group + .pf-v6-c-form__field-group, .pf-v6-c-form__field-group:first-child {
+ --pf-v6-c-form__field-group--BorderBlockStartWidth: 0;
+}
+.pf-v6-c-form__field-group + .pf-v6-c-form__field-group {
+ margin-block-start: var(--pf-v6-c-form__field-group--field-group--MarginBlockStart);
+}
+.pf-v6-c-form__field-group .pf-v6-c-form__field-group {
+ --pf-v6-c-form__field-group-body--GridColumn: var(--pf-v6-c-form__field-group__field-group__field-group-body--GridColumn);
+ --pf-v6-c-form__field-group-toggle--PaddingBlockStart: var(--pf-v6-c-form__field-group__field-group__field-group-toggle--PaddingBlockStart);
+ --pf-v6-c-form__field-group-header--PaddingBlockStart: var(--pf-v6-c-form__field-group__field-group__field-group-header--PaddingBlockStart);
+ --pf-v6-c-form__field-group-header--PaddingBlockEnd: var(--pf-v6-c-form__field-group__field-group__field-group-header--PaddingBlockEnd);
+ --pf-v6-c-form__field-group-body--PaddingBlockStart: 0;
+}
+.pf-v6-c-form__field-group .pf-v6-c-form__field-group .pf-v6-c-form__field-group-toggle ~ .pf-v6-c-form__field-group-body {
+ --pf-v6-c-form__field-group-body--GridColumn: var(--pf-v6-c-form__field-group__field-group__field-group-toggle--field-group-body--GridColumn);
+}
+.pf-v6-c-form__field-group.pf-m-expanded > .pf-v6-c-form__field-group-toggle {
+ --pf-v6-c-form__field-group-toggle-icon--Rotate: var(--pf-v6-c-form__field-group--m-expanded__toggle-icon--Rotate);
+}
+.pf-v6-c-form__field-group.pf-m-expanded.pf-m-expandable > .pf-v6-c-form__field-group-body {
+ max-height: 99999px;
+ padding-block-start: var(--pf-v6-c-form__field-group-body--PaddingBlockStart);
+ padding-block-end: var(--pf-v6-c-form__field-group-body--PaddingBlockEnd);
+ visibility: visible;
+ opacity: 1;
+ transition-delay: 0s;
+ transition-duration: var(--pf-v6-c-form__field-group-body--TransitionDuration--expand--fade), var(--pf-v6-c-form__field-group-body--TransitionDuration--expand--slide), 0s, 0s, 0s, 0s;
+ translate: 0 var(--pf-v6-c-form__field-group--m-expanded__field-group-body--TranslateY);
+}
+
+.pf-v6-c-form__field-group-toggle {
+ grid-row: 1/2;
+ grid-column: 1/2;
+ padding-block-start: var(--pf-v6-c-form__field-group-toggle--PaddingBlockStart);
+ padding-inline-end: var(--pf-v6-c-form__field-group-toggle--PaddingInlineEnd);
+}
+.pf-v6-c-form__field-group-toggle + .pf-v6-c-form__field-group-header {
+ --pf-v6-c-form__field-group-header--GridColumn: var(--pf-v6-c-form__field-group-toggle--field-group-header--GridColumn);
+}
+
+.pf-v6-c-form__field-group-toggle-button {
+ margin-block-start: var(--pf-v6-c-form__field-group-toggle-button--MarginBlockStart);
+ margin-block-end: var(--pf-v6-c-form__field-group-toggle-button--MarginBlockEnd);
+}
+
+.pf-v6-c-form__field-group-toggle-icon {
+ display: inline-block;
+ min-width: var(--pf-v6-c-form__field-group-toggle-icon--MinWidth);
+ text-align: center;
+ transition-timing-function: var(--pf-v6-c-form__field-group-toggle-icon--TransitionTimingFunction);
+ transition-duration: var(--pf-v6-c-form__field-group-toggle-icon--TransitionDuration);
+ transition-property: transform;
+ transform: rotate(var(--pf-v6-c-form__field-group-toggle-icon--Rotate));
+}
+:where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-form__field-group-toggle-icon {
+ scale: -1 1;
+}
+
+.pf-v6-c-form__field-group-header {
+ display: flex;
+ grid-row: 1/2;
+ grid-column: var(--pf-v6-c-form__field-group-header--GridColumn);
+ align-items: flex-start;
+ padding-block-start: var(--pf-v6-c-form__field-group-header--PaddingBlockStart);
+ padding-block-end: var(--pf-v6-c-form__field-group-header--PaddingBlockEnd);
+}
+
+.pf-v6-c-form__field-group-header-main {
+ display: flex;
+ flex-direction: column;
+ flex-grow: 1;
+}
+
+.pf-v6-c-form__field-group-header-title {
+ display: flex;
+}
+
+.pf-v6-c-form__field-group-header-title-text {
+ flex-grow: 1;
+}
+
+.pf-v6-c-form__field-group-header-description {
+ margin-block-start: var(--pf-v6-c-form__field-group-header-description--MarginBlockStart);
+ color: var(--pf-v6-c-form__field-group-header-description--Color);
+}
+
+.pf-v6-c-form__field-group-header-actions {
+ margin-block-start: var(--pf-v6-c-form__field-group-header-actions--MarginBlockStart);
+ margin-block-end: var(--pf-v6-c-form__field-group-header-actions--MarginBlockEnd);
+ margin-inline-start: var(--pf-v6-c-form__field-group-header-actions--MarginInlineStart);
+ white-space: nowrap;
+}
+
+.pf-v6-c-form__field-group-body {
+ display: grid;
+ grid-column: var(--pf-v6-c-form__field-group-body--GridColumn);
+ gap: var(--pf-v6-c-form__field-group-body--Gap);
+ padding-block-start: var(--pf-v6-c-form__field-group-body--PaddingBlockStart);
+ padding-block-end: var(--pf-v6-c-form__field-group-body--PaddingBlockEnd);
+}
+.pf-v6-c-form__field-group.pf-m-expandable > .pf-v6-c-form__field-group-body {
+ max-height: 0;
+ padding-block-start: 0;
+ padding-block-end: 0;
+ visibility: hidden;
+ opacity: 0;
+ transition-delay: 0s, 0s, var(--pf-v6-c-form__field-group-body--TransitionDuration--collapse--fade), var(--pf-v6-c-form__field-group-body--TransitionDuration--collapse--fade), var(--pf-v6-c-form__field-group-body--TransitionDuration--collapse--fade), var(--pf-v6-c-form__field-group-body--TransitionDuration--collapse--fade);
+ transition-duration: var(--pf-v6-c-form__field-group-body--TransitionDuration--collapse--fade), var(--pf-v6-c-form__field-group-body--TransitionDuration--collapse--slide), 0s, 0s, 0s, 0s;
+ transition-property: opacity, translate, visibility, max-height, padding-block-start, padding-block-end;
+ translate: 0 var(--pf-v6-c-form__field-group-body--TranslateY);
+}
+
+.pf-v6-c-form__field-group-body > .pf-v6-c-form__field-group:first-child {
+ --pf-v6-c-form__field-group-toggle--PaddingBlockStart: 0;
+ --pf-v6-c-form__field-group-header--PaddingBlockStart: 0;
+}
+.pf-v6-c-form__field-group-body > .pf-v6-c-form__field-group:last-child {
+ margin-block-end: var(--pf-v6-c-form__field-group-body__field-group--last-child--MarginBlockEnd);
+}
+
+.pf-v6-c-form-control {
+ --pf-v6-c-form-control--ColumnGap: var(--pf-t--global--spacer--gap--text-to-element--default);
+ --pf-v6-c-form-control--Color: var(--pf-t--global--text--color--regular);
+ --pf-v6-c-form-control--FontSize: var(--pf-t--global--font--size--body--default);
+ --pf-v6-c-form-control--LineHeight: var(--pf-t--global--font--line-height--body);
+ --pf-v6-c-form-control--Resize: none;
+ --pf-v6-c-form-control--OutlineOffset: -6px;
+ --pf-v6-c-form-control--BorderRadius: var(--pf-t--global--border--radius--small);
+ --pf-v6-c-form-control--before--BorderWidth: var(--pf-t--global--border--width--control--default);
+ --pf-v6-c-form-control--before--BorderStyle: solid;
+ --pf-v6-c-form-control--before--BorderColor: var(--pf-t--global--border--color--default);
+ --pf-v6-c-form-control--before--BorderRadius: var(--pf-v6-c-form-control--BorderRadius);
+ --pf-v6-c-form-control--after--BorderWidth: var(--pf-t--global--border--width--control--default);
+ --pf-v6-c-form-control--after--BorderStyle: solid;
+ --pf-v6-c-form-control--after--BorderColor: transparent;
+ --pf-v6-c-form-control--after--BorderRadius: var(--pf-v6-c-form-control--BorderRadius);
+ --pf-v6-c-form-control--BackgroundColor: var(--pf-t--global--background--color--control--default);
+ --pf-v6-c-form-control--Width: 100%;
+ --pf-v6-c-form-control--inset--base: var(--pf-t--global--spacer--control--horizontal--default);
+ --pf-v6-c-form-control--PaddingBlockStart--base: var(--pf-t--global--spacer--control--vertical--default);
+ --pf-v6-c-form-control--PaddingBlockEnd--base: var(--pf-t--global--spacer--control--vertical--default);
+ --pf-v6-c-form-control--PaddingInlineEnd--base: var(--pf-v6-c-form-control--inset--base);
+ --pf-v6-c-form-control--PaddingInlineStart--base: var(--pf-v6-c-form-control--inset--base);
+ --pf-v6-c-form-control--PaddingBlockStart: var(--pf-v6-c-form-control--PaddingBlockStart--base);
+ --pf-v6-c-form-control--PaddingBlockEnd: var(--pf-v6-c-form-control--PaddingBlockEnd--base);
+ --pf-v6-c-form-control--PaddingInlineEnd: var(--pf-v6-c-form-control--PaddingInlineEnd--base);
+ --pf-v6-c-form-control--PaddingInlineStart: var(--pf-v6-c-form-control--PaddingInlineStart--base);
+ --pf-v6-c-form-control__utilities--input--PaddingInlineEnd: var(--pf-v6-c-form-control__input--PaddingInlineEnd);
+ --pf-v6-c-form-control__utilities--select--PaddingInlineEnd: var(--pf-v6-c-form-control__select--PaddingInlineEnd);
+ --pf-v6-c-form-control__utilities--textarea--PaddingInlineEnd: var(--pf-v6-c-form-control__textarea--PaddingInlineEnd);
+ --pf-v6-c-form-control__input--PaddingBlockStart: var(--pf-v6-c-form-control--PaddingBlockStart--base);
+ --pf-v6-c-form-control__input--PaddingBlockEnd: var(--pf-v6-c-form-control--PaddingBlockEnd--base);
+ --pf-v6-c-form-control__input--PaddingInlineEnd: var(--pf-v6-c-form-control--PaddingInlineEnd--base);
+ --pf-v6-c-form-control__input--PaddingInlineStart: var(--pf-v6-c-form-control--PaddingInlineStart--base);
+ --pf-v6-c-form-control__select--PaddingBlockStart: var(--pf-v6-c-form-control--PaddingBlockStart--base);
+ --pf-v6-c-form-control__select--PaddingBlockEnd: var(--pf-v6-c-form-control--PaddingBlockEnd--base);
+ --pf-v6-c-form-control__select--PaddingInlineEnd: var(--pf-v6-c-form-control--PaddingInlineEnd--base);
+ --pf-v6-c-form-control__select--PaddingInlineStart: var(--pf-v6-c-form-control--PaddingInlineStart--base);
+ --pf-v6-c-form-control__textarea--PaddingBlockStart: var(--pf-v6-c-form-control--PaddingBlockStart--base);
+ --pf-v6-c-form-control__textarea--PaddingBlockEnd: var(--pf-v6-c-form-control--PaddingBlockEnd--base);
+ --pf-v6-c-form-control__textarea--PaddingInlineEnd: var(--pf-v6-c-form-control--PaddingInlineEnd--base);
+ --pf-v6-c-form-control__textarea--PaddingInlineStart: var(--pf-v6-c-form-control--PaddingInlineStart--base);
+ --pf-v6-c-form-control--hover--after--BorderWidth: var(--pf-t--global--border--width--control--hover);
+ --pf-v6-c-form-control--hover--after--BorderColor: var(--pf-t--global--border--color--hover);
+ --pf-v6-c-form-control--m-success--hover--after--BorderColor: var(--pf-t--global--border--color--status--success--hover);
+ --pf-v6-c-form-control--m-warning--hover--after--BorderColor: var(--pf-t--global--border--color--status--warning--hover);
+ --pf-v6-c-form-control--m-error--hover--after--BorderColor: var(--pf-t--global--border--color--status--danger--hover);
+ --pf-v6-c-form-control--m-expanded--after--BorderWidth: var(--pf-t--global--border--width--control--clicked);
+ --pf-v6-c-form-control--m-expanded--after--BorderColor: var(--pf-t--global--border--color--clicked);
+ --pf-v6-c-form-control--m-placeholder--Color: var(--pf-t--global--text--color--placeholder);
+ --pf-v6-c-form-control--m-placeholder--child--Color: var(--pf-t--global--text--color--regular);
+ --pf-v6-c-form-control--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
+ --pf-v6-c-form-control--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
+ --pf-v6-c-form-control--m-disabled--after--BorderColor: transparent;
+ --pf-v6-c-form-control--m-readonly--BackgroundColor: var(--pf-t--global--background--color--control--read-only);
+ --pf-v6-c-form-control--m-readonly--BorderColor: var(--pf-t--global--border--color--control--read-only);
+ --pf-v6-c-form-control--m-readonly--hover--after--BorderColor: revert;
+ --pf-v6-c-form-control--m-readonly--m-plain--BackgroundColor: transparent;
+ --pf-v6-c-form-control--m-readonly--m-plain--BorderColor: transparent;
+ --pf-v6-c-form-control--m-readonly--m-plain--inset--base: 0;
+ --pf-v6-c-form-control--m-readonly--m-plain--OutlineOffset: 0;
+ --pf-v6-c-form-control--icon--width: var(--pf-v6-c-form-control--FontSize);
+ --pf-v6-c-form-control--m-success--after--BorderWidth: var(--pf-t--global--border--width--control--default);
+ --pf-v6-c-form-control--m-success--after--BorderColor: var(--pf-t--global--border--color--status--success--default);
+ --pf-v6-c-form-control--m-success--PaddingInlineEnd: initial;
+ --pf-v6-c-form-control__select--m-success--m-status--PaddingInlineEnd: initial;
+ --pf-v6-c-form-control__input--m-success--PaddingInlineEnd: calc(var(--pf-v6-c-form-control--m-icon--icon--width) + var(--pf-v6-c-form-control--ColumnGap) + var(--pf-v6-c-form-control__utilities--input--PaddingInlineEnd));
+ --pf-v6-c-form-control__select--m-success--PaddingInlineEnd: calc(var(--pf-v6-c-form-control--m-icon--icon--width) + var(--pf-v6-c-form-control--m-icon--icon--spacer) + var(--pf-v6-c-form-control__utilities--Gap) + var(--pf-v6-c-form-control--ColumnGap) + var(--pf-v6-c-form-control__utilities--select--PaddingInlineEnd));
+ --pf-v6-c-form-control__textarea--m-success--PaddingInlineEnd: calc(var(--pf-v6-c-form-control--m-icon--icon--width) + var(--pf-v6-c-form-control--ColumnGap) + var(--pf-v6-c-form-control__utilities--textarea--PaddingInlineEnd));
+ --pf-v6-c-form-control--m-warning--after--BorderWidth: var(--pf-t--global--border--width--control--default);
+ --pf-v6-c-form-control--m-warning--after--BorderColor: var(--pf-t--global--border--color--status--warning--default);
+ --pf-v6-c-form-control--m-warning--PaddingInlineEnd: initial;
+ --pf-v6-c-form-control__select--m-warning--m-status--PaddingInlineEnd: initial;
+ --pf-v6-c-form-control__input--m-warning--PaddingInlineEnd: calc(var(--pf-v6-c-form-control--m-icon--icon--width) + var(--pf-v6-c-form-control--ColumnGap) + var(--pf-v6-c-form-control__utilities--input--PaddingInlineEnd));
+ --pf-v6-c-form-control__select--m-warning--PaddingInlineEnd: calc(var(--pf-v6-c-form-control--m-icon--icon--width) + var(--pf-v6-c-form-control--m-icon--icon--spacer) + var(--pf-v6-c-form-control__utilities--Gap) + var(--pf-v6-c-form-control--ColumnGap) + var(--pf-v6-c-form-control__utilities--select--PaddingInlineEnd));
+ --pf-v6-c-form-control__textarea--m-warning--PaddingInlineEnd: calc(var(--pf-v6-c-form-control--m-icon--icon--width) + var(--pf-v6-c-form-control--ColumnGap) + var(--pf-v6-c-form-control__utilities--textarea--PaddingInlineEnd));
+ --pf-v6-c-form-control--m-error--after--BorderWidth: var(--pf-t--global--border--width--control--default);
+ --pf-v6-c-form-control--m-error--after--BorderColor: var(--pf-t--global--border--color--status--danger--default);
+ --pf-v6-c-form-control--m-error--PaddingInlineEnd: initial;
+ --pf-v6-c-form-control__select--m-error--m-status--PaddingInlineEnd: initial;
+ --pf-v6-c-form-control--m-error--icon--width: var(--pf-v6-c-form-control--FontSize);
+ --pf-v6-c-form-control__input--m-error--PaddingInlineEnd: calc(var(--pf-v6-c-form-control--m-icon--icon--width) + var(--pf-v6-c-form-control--ColumnGap) + var(--pf-v6-c-form-control__utilities--input--PaddingInlineEnd));
+ --pf-v6-c-form-control__select--m-error--PaddingInlineEnd: calc(var(--pf-v6-c-form-control--m-icon--icon--width) + var(--pf-v6-c-form-control--m-icon--icon--spacer) + var(--pf-v6-c-form-control__utilities--Gap) + var(--pf-v6-c-form-control--ColumnGap) + var(--pf-v6-c-form-control__utilities--select--PaddingInlineEnd));
+ --pf-v6-c-form-control__textarea--m-error--PaddingInlineEnd: calc(var(--pf-v6-c-form-control--m-icon--icon--width) + var(--pf-v6-c-form-control--ColumnGap) + var(--pf-v6-c-form-control__utilities--textarea--PaddingInlineEnd));
+ --pf-v6-c-form-control--m-icon--PaddingInlineEnd: calc(var(--pf-v6-c-form-control--m-icon--icon--width) + var(--pf-v6-c-form-control--ColumnGap) + var(--pf-v6-c-form-control__utilities--input--PaddingInlineEnd));
+ --pf-v6-c-form-control--m-icon--icon--width: var(--pf-v6-c-form-control--FontSize);
+ --pf-v6-c-form-control--m-icon--icon--spacer: calc(var(--pf-t--global--spacer--control--horizontal--default) / 2);
+ --pf-v6-c-form-control--m-icon--icon--PaddingInlineEnd: calc(var(--pf-v6-c-form-control--icon--width) + var(--pf-v6-c-form-control__utilities--Gap) + var(--pf-v6-c-form-control--m-icon--icon--width) + var(--pf-v6-c-form-control--ColumnGap) + var(--pf-v6-c-form-control__utilities--input--PaddingInlineEnd));
+ --pf-v6-c-form-control--textarea--Width: var(--pf-v6-c-form-control--Width);
+ --pf-v6-c-form-control--textarea--Height: auto;
+ --pf-v6-c-form-control--textarea--PaddingBlockStart--offset: calc(-1 * var(--pf-v6-c-form-control--OutlineOffset));
+ --pf-v6-c-form-control--textarea--PaddingBlockEnd--offset: calc(-1 * var(--pf-v6-c-form-control--OutlineOffset));
+ --pf-v6-c-form-control--textarea--PaddingInlineEnd--offset: calc(-1 * var(--pf-v6-c-form-control--OutlineOffset));
+ --pf-v6-c-form-control--textarea--PaddingInlineStart--offset: calc(-1 * var(--pf-v6-c-form-control--OutlineOffset));
+ --pf-v6-c-form-control__icon--Color: var(--pf-t--global--icon--color--regular);
+ --pf-v6-c-form-control__icon--FontSize: var(--pf-t--global--icon--size--font--body--default);
+ --pf-v6-c-form-control__icon--m-status--Color: var(--pf-t--global--icon--color--regular);
+ --pf-v6-c-form-control--m-success__icon--m-status--Color: var(--pf-t--global--icon--color--status--success--default);
+ --pf-v6-c-form-control--m-warning__icon--m-status--Color: var(--pf-t--global--icon--color--status--warning--default);
+ --pf-v6-c-form-control--m-error__icon--m-status--Color: var(--pf-t--global--icon--color--status--danger--default);
+ --pf-v6-c-form-control__utilities--Gap: var(--pf-t--global--spacer--gap--group--horizontal);
+ --pf-v6-c-form-control__utilities--PaddingBlockStart: var(--pf-v6-c-form-control--PaddingBlockStart);
+ --pf-v6-c-form-control__utilities--PaddingInlineEnd: var(--pf-v6-c-form-control--PaddingInlineEnd--base);
+ --pf-v6-c-form-control__utilities--textarea--PaddingBlockStart: calc(var(--pf-v6-c-form-control__textarea--PaddingBlockStart) - var(--pf-v6-c-form-control--textarea--PaddingBlockStart--offset));
+ --pf-v6-c-form-control__toggle-icon--PaddingInlineStart: 0;
+ --pf-v6-c-form-control__toggle-icon--PaddingInlineEnd: 0;
+ --pf-v6-c-form-control__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
+ --pf-v6-c-form-control__toggle-icon--FontSize: var(--pf-t--global--icon--size--font--body--default);
+ --pf-v6-c-form-control--m-disabled__toggle-icon--Color: var(--pf-t--global--icon--color--disabled);
+}
+
+.pf-v6-c-form-control {
+ position: relative;
+ display: grid;
+ grid-template-columns: 1fr auto;
+ column-gap: var(--pf-v6-c-form-control--ColumnGap);
+ align-items: start;
+ width: var(--pf-v6-c-form-control--Width);
+ font-size: var(--pf-v6-c-form-control--FontSize);
+ line-height: var(--pf-v6-c-form-control--LineHeight);
+ resize: var(--pf-v6-c-form-control--Resize);
+ background-color: var(--pf-v6-c-form-control--BackgroundColor);
+ border-radius: var(--pf-v6-c-form-control--BorderRadius);
+}
+.pf-v6-c-form-control::before, .pf-v6-c-form-control::after {
+ position: absolute;
+ inset: 0;
+ pointer-events: none;
+ content: "";
+}
+.pf-v6-c-form-control::before {
+ border-color: var(--pf-v6-c-form-control--before--BorderColor);
+ border-style: var(--pf-v6-c-form-control--before--BorderStyle);
+ border-width: var(--pf-v6-c-form-control--before--BorderWidth);
+ border-radius: var(--pf-v6-c-form-control--before--BorderRadius);
+}
+.pf-v6-c-form-control::after {
+ border: var(--pf-v6-c-form-control--after--BorderWidth) var(--pf-v6-c-form-control--after--BorderStyle) var(--pf-v6-c-form-control--after--BorderColor);
+ border-radius: var(--pf-v6-c-form-control--before--BorderRadius);
+}
+.pf-v6-c-form-control > :is(input, select, textarea) {
+ grid-row: 1/2;
+ grid-column: 1/-1;
+ padding-block-start: var(--pf-v6-c-form-control--PaddingBlockStart);
+ padding-block-end: var(--pf-v6-c-form-control--PaddingBlockEnd);
+ padding-inline-start: var(--pf-v6-c-form-control--PaddingInlineStart);
+ padding-inline-end: var(--pf-v6-c-form-control--PaddingInlineEnd);
+ color: var(--pf-v6-c-form-control--Color);
+ appearance: none;
+ background-color: transparent;
+ border: none;
+ border-radius: var(--pf-v6-c-form-control--BorderRadius);
+ outline-offset: var(--pf-v6-c-form-control--OutlineOffset);
+}
+.pf-v6-c-form-control > ::placeholder {
+ color: var(--pf-v6-c-form-control--m-placeholder--Color);
+}
+.pf-v6-c-form-control > :is(input, select) {
+ text-overflow: ellipsis;
+}
+.pf-v6-c-form-control:has(input) {
+ --pf-v6-c-form-control--PaddingBlockStart: var(--pf-v6-c-form-control__input--PaddingBlockStart);
+ --pf-v6-c-form-control--PaddingBlockEnd: var(--pf-v6-c-form-control__input--PaddingBlockEnd);
+ --pf-v6-c-form-control--PaddingInlineStart: var(--pf-v6-c-form-control__input--PaddingInlineStart);
+ --pf-v6-c-form-control--PaddingInlineEnd: var(--pf-v6-c-form-control__input--PaddingInlineEnd);
+ --pf-v6-c-form-control__utilities--PaddingInlineEnd: var(--pf-v6-c-form-control__utilities--input--PaddingInlineEnd);
+}
+
+.pf-v6-c-form-control.pf-m-textarea {
+ padding-block-start: var(--pf-v6-c-form-control--textarea--PaddingBlockStart--offset);
+ padding-block-end: var(--pf-v6-c-form-control--textarea--PaddingBlockEnd--offset);
+ padding-inline-start: var(--pf-v6-c-form-control--textarea--PaddingInlineStart--offset);
+ padding-inline-end: var(--pf-v6-c-form-control--textarea--PaddingInlineEnd--offset);
+}
+.pf-v6-c-form-control.pf-m-textarea.pf-m-success, .pf-v6-c-form-control.pf-m-textarea.pf-m-warning, .pf-v6-c-form-control.pf-m-textarea.pf-m-error {
+ --pf-v6-c-form-control--m-status--PaddingInlineEnd--offset: calc(var(--pf-v6-c-form-control__icon--FontSize) + var(--pf-v6-c-form-control--ColumnGap));
+}
+.pf-v6-c-form-control.pf-m-textarea:has(textarea) {
+ --pf-v6-c-form-control--PaddingBlockStart: calc(var(--pf-v6-c-form-control__textarea--PaddingBlockStart) - var(--pf-v6-c-form-control--textarea--PaddingBlockStart--offset));
+ --pf-v6-c-form-control--PaddingBlockEnd: calc(var(--pf-v6-c-form-control__textarea--PaddingBlockEnd) - var(--pf-v6-c-form-control--textarea--PaddingBlockEnd--offset));
+ --pf-v6-c-form-control--PaddingInlineStart: calc(var(--pf-v6-c-form-control__textarea--PaddingInlineStart) - var(--pf-v6-c-form-control--textarea--PaddingInlineStart--offset));
+ --pf-v6-c-form-control--PaddingInlineEnd: calc(var(--pf-v6-c-form-control__textarea--PaddingInlineEnd) - var(--pf-v6-c-form-control--textarea--PaddingInlineEnd--offset) + var(--pf-v6-c-form-control--m-status--PaddingInlineEnd--offset, 0px));
+ --pf-v6-c-form-control__utilities--PaddingInlineEnd: var(--pf-v6-c-form-control__utilities--textarea--PaddingInlineEnd);
+}
+.pf-v6-c-form-control.pf-m-textarea > textarea {
+ outline-offset: 0;
+ scrollbar-gutter: stable;
+}
+.pf-v6-c-form-control.pf-m-textarea .pf-v6-c-form-control__utilities {
+ padding-block-start: var(--pf-v6-c-form-control__utilities--textarea--PaddingBlockStart);
+}
+.pf-v6-c-form-control.pf-m-readonly {
+ --pf-v6-c-form-control--BackgroundColor: var(--pf-v6-c-form-control--m-readonly--BackgroundColor);
+ --pf-v6-c-form-control--before--BorderColor: var(--pf-v6-c-form-control--m-readonly--BorderColor);
+}
+.pf-v6-c-form-control.pf-m-readonly:hover {
+ --pf-v6-c-form-control--hover--after--BorderColor: var(--pf-v6-c-form-control--m-readonly--hover--after--BorderColor);
+}
+.pf-v6-c-form-control.pf-m-readonly:not(.pf-m-success, .pf-m-warning, .pf-m-error) {
+ --pf-v6-c-form-control--hover--after--BorderColor: var(--pf-v6-c-form-control--m-readonly--hover--after--BorderColor);
+}
+.pf-v6-c-form-control.pf-m-readonly.pf-m-plain {
+ --pf-v6-c-form-control--m-readonly--BackgroundColor: var(--pf-v6-c-form-control--m-readonly--m-plain--BackgroundColor);
+ --pf-v6-c-form-control--m-readonly--BorderColor: var(--pf-v6-c-form-control--m-readonly--m-plain--BorderColor);
+ --pf-v6-c-form-control--inset--base: var(--pf-v6-c-form-control--m-readonly--m-plain--inset--base);
+ --pf-v6-c-form-control--before--BorderStyle: none;
+ --pf-v6-c-form-control--after--BorderStyle: none;
+ --pf-v6-c-form-control--OutlineOffset: var(--pf-v6-c-form-control--m-readonly--m-plain--OutlineOffset);
+}
+.pf-v6-c-form-control.pf-m-expanded {
+ --pf-v6-c-form-control--after--BorderColor: var(--pf-v6-c-form-control--m-expanded--after--BorderColor);
+ --pf-v6-c-form-control--after--BorderWidth: var(--pf-v6-c-form-control--m-expanded--after--BorderWidth);
+}
+.pf-v6-c-form-control.pf-m-disabled {
+ --pf-v6-c-form-control--BackgroundColor: var(--pf-v6-c-form-control--m-disabled--BackgroundColor);
+ --pf-v6-c-form-control--Color: var(--pf-v6-c-form-control--m-disabled--Color);
+ --pf-v6-c-form-control--m-placeholder--Color: var(--pf-v6-c-form-control--m-disabled--Color);
+ --pf-v6-c-form-control__toggle-icon--Color: var(--pf-v6-c-form-control--m-disabled__toggle-icon--Color);
+ --pf-v6-c-form-control--before--BorderStyle: none;
+ --pf-v6-c-form-control--after--BorderStyle: none;
+ cursor: not-allowed;
+}
+.pf-v6-c-form-control.pf-m-error {
+ --pf-v6-c-form-control--after--BorderColor: var(--pf-v6-c-form-control--m-error--after--BorderColor);
+ --pf-v6-c-form-control--hover--after--BorderColor: var(--pf-v6-c-form-control--m-error--hover--after--BorderColor);
+ --pf-v6-c-form-control__icon--m-status--Color: var(--pf-v6-c-form-control--m-error__icon--m-status--Color);
+ --pf-v6-c-form-control--after--BorderWidth: var(--pf-v6-c-form-control--m-error--after--BorderWidth);
+}
+@media (prefers-reduced-motion: no-preference) {
+ .pf-v6-c-form-control.pf-m-error {
+ translate: var(--pf-v6-global--danger-jiggle--TranslateX, 0);
+ animation-name: pf-v6-global-danger-jiggle-motion;
+ animation-duration: var(--pf-v6-global--danger-jiggle--AnimationDuration--Transform);
+ animation-timing-function: var(--pf-v6-global--danger-jiggle--AnimationTimingFunction--Transform);
+ animation-fill-mode: both;
+ }
+}
+.pf-v6-c-form-control.pf-m-error .pf-v6-c-form-control__icon.pf-m-status {
+ --pf-v6-c-form-control--TransitionDuration--Opacity: var(--pf-t--global--motion--duration--fade--default);
+ --pf-v6-c-form-control--TransitionTimingFunction--Opacity: var(--pf-t--global--motion--timing-function--default);
+ animation-name: pf-v6-global-fade-in;
+ animation-duration: var(--pf-v6-c-form-control--TransitionDuration--Opacity);
+ animation-timing-function: var(--pf-v6-c-form-control--TransitionTimingFunction--Opacity);
+}
+.pf-v6-c-form-control.pf-m-error > textarea {
+ padding-inline-end: var(--pf-v6-c-form-control--m-error--PaddingInlineEnd, var(--pf-v6-c-form-control__textarea--m-error--PaddingInlineEnd));
+}
+.pf-v6-c-form-control.pf-m-error > input {
+ padding-inline-end: var(--pf-v6-c-form-control--m-error--PaddingInlineEnd, var(--pf-v6-c-form-control__input--m-error--PaddingInlineEnd));
+}
+.pf-v6-c-form-control.pf-m-error > select {
+ padding-inline-end: var(--pf-v6-c-form-control__select--m-error--m-status--PaddingInlineEnd, var(--pf-v6-c-form-control__select--m-error--PaddingInlineEnd));
+}
+.pf-v6-c-form-control.pf-m-error.pf-m-icon > :is(input) {
+ padding-inline-end: var(--pf-v6-c-form-control--m-icon--icon--PaddingInlineEnd);
+}
+.pf-v6-c-form-control.pf-m-success {
+ --pf-v6-c-form-control--after--BorderColor: var(--pf-v6-c-form-control--m-success--after--BorderColor);
+ --pf-v6-c-form-control--hover--after--BorderColor: var(--pf-v6-c-form-control--m-success--hover--after--BorderColor);
+ --pf-v6-c-form-control__icon--m-status--Color: var(--pf-v6-c-form-control--m-success__icon--m-status--Color);
+ --pf-v6-c-form-control--after--BorderWidth: var(--pf-v6-c-form-control--m-success--after--BorderWidth);
+}
+.pf-v6-c-form-control.pf-m-success > textarea {
+ padding-inline-end: var(--pf-v6-c-form-control--m-success--PaddingInlineEnd, var(--pf-v6-c-form-control__textarea--m-success--PaddingInlineEnd));
+}
+.pf-v6-c-form-control.pf-m-success > input {
+ padding-inline-end: var(--pf-v6-c-form-control--m-success--PaddingInlineEnd, var(--pf-v6-c-form-control__input--m-success--PaddingInlineEnd));
+}
+.pf-v6-c-form-control.pf-m-success > select {
+ padding-inline-end: var(--pf-v6-c-form-control__select--m-success--m-status--PaddingInlineEnd, var(--pf-v6-c-form-control__select--m-success--PaddingInlineEnd));
+}
+.pf-v6-c-form-control.pf-m-success.pf-m-icon > :is(input) {
+ padding-inline-end: var(--pf-v6-c-form-control--m-icon--icon--PaddingInlineEnd);
+}
+.pf-v6-c-form-control.pf-m-warning {
+ --pf-v6-c-form-control--after--BorderColor: var(--pf-v6-c-form-control--m-warning--after--BorderColor);
+ --pf-v6-c-form-control--hover--after--BorderColor: var(--pf-v6-c-form-control--m-warning--hover--after--BorderColor);
+ --pf-v6-c-form-control__icon--m-status--Color: var(--pf-v6-c-form-control--m-warning__icon--m-status--Color);
+ --pf-v6-c-form-control--after--BorderWidth: var(--pf-v6-c-form-control--m-warning--after--BorderWidth);
+}
+.pf-v6-c-form-control.pf-m-warning > textarea {
+ padding-inline-end: var(--pf-v6-c-form-control--m-warning--PaddingInlineEnd, var(--pf-v6-c-form-control__textarea--m-warning--PaddingInlineEnd));
+}
+.pf-v6-c-form-control.pf-m-warning > input {
+ padding-inline-end: var(--pf-v6-c-form-control--m-warning--PaddingInlineEnd, var(--pf-v6-c-form-control__input--m-warning--PaddingInlineEnd));
+}
+.pf-v6-c-form-control.pf-m-warning > select {
+ padding-inline-end: var(--pf-v6-c-form-control__select--m-warning--m-status--PaddingInlineEnd, var(--pf-v6-c-form-control__select--m-warning--PaddingInlineEnd));
+}
+.pf-v6-c-form-control.pf-m-warning.pf-m-icon > :is(input) {
+ padding-inline-end: var(--pf-v6-c-form-control--m-icon--icon--PaddingInlineEnd);
+}
+.pf-v6-c-form-control:hover {
+ --pf-v6-c-form-control--after--BorderColor: var(--pf-v6-c-form-control--hover--after--BorderColor);
+ --pf-v6-c-form-control--after--BorderWidth: var(--pf-v6-c-form-control--hover--after--BorderWidth);
+}
+.pf-v6-c-form-control.pf-m-icon {
+ --pf-v6-c-form-control--PaddingInlineEnd: var(--pf-v6-c-form-control--m-icon--PaddingInlineEnd);
+}
+.pf-v6-c-form-control:has(select) {
+ --pf-v6-c-form-control--PaddingBlockStart: var(--pf-v6-c-form-control__select--PaddingBlockStart);
+ --pf-v6-c-form-control--PaddingBlockEnd: var(--pf-v6-c-form-control__select--PaddingBlockEnd);
+ --pf-v6-c-form-control--PaddingInlineStart: var(--pf-v6-c-form-control__select--PaddingInlineStart);
+ --pf-v6-c-form-control--PaddingInlineEnd: calc(var(--pf-v6-c-form-control__select--PaddingInlineEnd) + var(--pf-v6-c-form-control__icon--FontSize));
+ --pf-v6-c-form-control__utilities--PaddingInlineEnd: var(--pf-v6-c-form-control__utilities--select--PaddingInlineEnd);
+ background-color: var(--pf-v6-c-form-control--BackgroundColor);
+}
+.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);
+}
+@-moz-document url-prefix() {
+ .pf-v6-c-form-control:has(select) {
+ --pf-v6-c-form-control--PaddingInlineEnd: calc(var(--pf-v6-c-form-control__select--PaddingInlineEnd) - 1px);
+ --pf-v6-c-form-control--PaddingInlineStart: calc(var(--pf-v6-c-form-control__select--PaddingInlineStart) - 4px);
+ }
+}
+.pf-v6-c-form-control.pf-m-placeholder > select {
+ --pf-v6-c-form-control--Color: var(--pf-v6-c-form-control--m-placeholder--Color);
+}
+.pf-v6-c-form-control.pf-m-placeholder > select * {
+ color: var(--pf-v6-c-form-control--m-placeholder--child--Color);
+}
+.pf-v6-c-form-control.pf-m-placeholder > select *:disabled {
+ color: revert;
+}
+.pf-v6-c-form-control > textarea {
+ width: 100%;
+ height: 100%;
+ vertical-align: bottom;
+ resize: none;
+}
+.pf-v6-c-form-control.pf-m-resize-vertical {
+ --pf-v6-c-form-control--Resize: vertical;
+ overflow: auto;
+}
+.pf-v6-c-form-control.pf-m-resize-horizontal {
+ --pf-v6-c-form-control--Resize: horizontal;
+ overflow: auto;
+}
+.pf-v6-c-form-control.pf-m-resize-both {
+ --pf-v6-c-form-control--Resize: both;
+ overflow: auto;
+}
+
+.pf-v6-c-form-control__icon {
+ font-size: var(--pf-v6-c-form-control__icon--FontSize);
+ color: var(--pf-v6-c-form-control__icon--Color);
+}
+.pf-v6-c-form-control__icon.pf-m-status {
+ --pf-v6-c-form-control__icon--Color: var(--pf-v6-c-form-control__icon--m-status--Color);
+}
+
+.pf-v6-c-form-control__toggle-icon {
+ grid-row: 1/2;
+ grid-column: 3;
+ padding-inline-start: var(--pf-v6-c-form-control__toggle-icon--PaddingInlineStart);
+ padding-inline-end: var(--pf-v6-c-form-control__toggle-icon--PaddingInlineEnd);
+ font-size: var(--pf-v6-c-form-control__toggle-icon--FontSize);
+ color: var(--pf-v6-c-form-control__toggle-icon--Color);
+ pointer-events: none;
+}
+
+.pf-v6-c-form-control__utilities {
+ display: flex;
+ flex-wrap: nowrap;
+ grid-row: 1/2;
+ grid-column: 2;
+ gap: var(--pf-v6-c-form-control__utilities--Gap);
+ padding-block-start: var(--pf-v6-c-form-control__utilities--PaddingBlockStart);
+ padding-inline-end: var(--pf-v6-c-form-control__utilities--PaddingInlineEnd);
+ pointer-events: none;
+}
+
+.pf-v6-c-hint {
+ --pf-v6-c-hint--GridRowGap: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-hint--PaddingBlockStart: var(--pf-t--global--spacer--lg);
+ --pf-v6-c-hint--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
+ --pf-v6-c-hint--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
+ --pf-v6-c-hint--PaddingInlineStart: var(--pf-t--global--spacer--lg);
+ --pf-v6-c-hint--BackgroundColor: var(--pf-t--global--background--color--primary--default);
+ --pf-v6-c-hint--BorderColor: var(--pf-t--global--border--color--status--info--default);
+ --pf-v6-c-hint--BorderWidth: var(--pf-t--global--border--width--box--status--default);
+ --pf-v6-c-hint--BorderRadius: var(--pf-t--global--border--radius--medium);
+ --pf-v6-c-hint--Color: var(--pf-t--global--text--color--regular);
+ --pf-v6-c-hint__title--FontWeight: var(--pf-t--global--font--weight--body--bold);
+ --pf-v6-c-hint__body--FontSize: var(--pf-t--global--font--size--body--default);
+ --pf-v6-c-hint__footer--MarginBlockStart: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-hint__footer--child--MarginInlineEnd: var(--pf-t--global--spacer--md);
+ --pf-v6-c-hint__actions--MarginInlineStart: var(--pf-t--global--spacer--2xl);
+ --pf-v6-c-hint__actions--c-menu-toggle--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
+ --pf-v6-c-hint__actions--c-menu-toggle--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
+}
+
+.pf-v6-c-hint {
+ display: grid;
+ grid-template-columns: 1fr auto;
+ grid-row-gap: var(--pf-v6-c-hint--GridRowGap);
+ padding-block-start: var(--pf-v6-c-hint--PaddingBlockStart);
+ padding-block-end: var(--pf-v6-c-hint--PaddingBlockEnd);
+ padding-inline-start: var(--pf-v6-c-hint--PaddingInlineStart);
+ padding-inline-end: var(--pf-v6-c-hint--PaddingInlineEnd);
+ color: var(--pf-v6-c-hint--Color);
+ background-color: var(--pf-v6-c-hint--BackgroundColor);
+ border: var(--pf-v6-c-hint--BorderWidth) solid var(--pf-v6-c-hint--BorderColor);
+ border-radius: var(--pf-v6-c-hint--BorderRadius);
+}
+.pf-v6-c-hint .pf-v6-c-button.pf-m-link.pf-m-inline {
+ text-align: start;
+ white-space: normal;
+}
+
+.pf-v6-c-hint__actions {
+ display: inline-grid;
+ grid-row: 1;
+ grid-column: 2;
+ grid-auto-flow: column;
+ align-self: start;
+ margin-block-start: var(--pf-v6-c-hint__actions--c-menu-toggle--MarginBlockStart);
+ margin-block-end: var(--pf-v6-c-hint__actions--c-menu-toggle--MarginBlockEnd);
+ margin-inline-start: var(--pf-v6-c-hint__actions--MarginInlineStart);
+ text-align: end;
+}
+.pf-v6-c-hint__actions.pf-m-no-offset {
+ --pf-v6-c-hint__actions--c-menu-toggle--MarginBlockStart: 0;
+ --pf-v6-c-hint__actions--c-menu-toggle--MarginBlockEnd: 0;
+}
+.pf-v6-c-hint__actions + .pf-v6-c-hint__body {
+ grid-column: 1;
+}
+
+.pf-v6-c-hint__title {
+ align-self: center;
+ font-weight: var(--pf-v6-c-hint__title--FontWeight);
+}
+
+.pf-v6-c-hint__body {
+ grid-column: 1/-1;
+ font-size: var(--pf-v6-c-hint__body--FontSize);
+}
+
+.pf-v6-c-hint__footer {
+ grid-column: 1/-1;
+ margin-block-start: var(--pf-v6-c-hint__footer--MarginBlockStart);
+}
+.pf-v6-c-hint__footer > :not(:last-child) {
+ margin-inline-end: var(--pf-v6-c-hint__footer--child--MarginInlineEnd);
+}
+
+.pf-v6-c-helper-text {
+ --pf-v6-c-helper-text--Gap: var(--pf-t--global--spacer--xs);
+ --pf-v6-c-helper-text--FontSize: var(--pf-t--global--font--size--body--sm);
+ --pf-v6-c-helper-text__item-icon--Color: var(--pf-t--global--icon--color--regular);
+ --pf-v6-c-helper-text__item-text--Color: var(--pf-t--global--text--color--regular);
+ --pf-v6-c-helper-text__item-text--FontWeight: var(--pf-t--global--font--weight--body--default);
+ --pf-v6-c-helper-text__item-icon--m-indeterminate--Color: var(--pf-t--global--icon--color--subtle);
+ --pf-v6-c-helper-text__item-text--m-indeterminate--Color: var(--pf-t--global--text--color--subtle);
+ --pf-v6-c-helper-text__item-icon--m-warning--Color: var(--pf-t--global--icon--color--status--warning--default);
+ --pf-v6-c-helper-text__item-text--m-warning--FontWeight: var(--pf-t--global--font--weight--body--bold);
+ --pf-v6-c-helper-text__item-icon--m-success--Color: var(--pf-t--global--icon--color--status--success--default);
+ --pf-v6-c-helper-text__item-text--m-success--FontWeight: var(--pf-t--global--font--weight--body--bold);
+ --pf-v6-c-helper-text__item-icon--m-error--Color: var(--pf-t--global--icon--color--status--danger--default);
+ --pf-v6-c-helper-text__item-text--m-error--FontWeight: var(--pf-t--global--font--weight--body--bold);
+ --pf-v6-c-helper-text__item--m-error--TransitionDuration--Opacity: var(--pf-t--global--motion--duration--fade--default);
+ --pf-v6-c-helper-text__item--m-error--TransitionTimingFunction--Opacity: var(--pf-t--global--motion--timing-function--default);
+ --pf-v6-c-helper-text--m-dynamic__item-icon--Color: var(--pf-t--global--icon--color--regular);
+ --pf-v6-c-helper-text--m-dynamic--m-indeterminate__item-icon--Color: var(--pf-t--global--icon--color--subtle);
+ --pf-v6-c-helper-text--m-dynamic--m-indeterminate__item-text--Color: var(--pf-t--global--text--color--subtle);
+ --pf-v6-c-helper-text--m-dynamic--m-warning__item-icon--Color: var(--pf-t--global--icon--color--status--warning--default);
+ --pf-v6-c-helper-text--m-dynamic--m-warning__item-text--FontWeight: var(--pf-t--global--font--weight--body--bold);
+ --pf-v6-c-helper-text--m-dynamic--m-success__item-icon--Color: var(--pf-t--global--icon--color--status--success--default);
+ --pf-v6-c-helper-text--m-dynamic--m-error__item-icon--Color: var(--pf-t--global--icon--color--status--danger--default);
+ --pf-v6-c-helper-text__item-icon--MarginInlineEnd: var(--pf-t--global--spacer--xs);
+}
+
+.pf-v6-c-helper-text {
+ display: grid;
+ gap: var(--pf-v6-c-helper-text--Gap);
+ font-size: var(--pf-v6-c-helper-text--FontSize);
+}
+.pf-v6-c-helper-text.pf-m-hidden {
+ visibility: hidden;
+ opacity: 0;
+}
+
+.pf-v6-c-helper-text__item {
+ display: flex;
+ font-weight: var(--pf-v6-c-helper-text__item-text--FontWeight);
+}
+.pf-v6-c-helper-text__item.pf-m-indeterminate {
+ --pf-v6-c-helper-text__item-icon--Color: var(--pf-v6-c-helper-text__item-icon--m-indeterminate--Color);
+ --pf-v6-c-helper-text__item-text--Color: var(--pf-v6-c-helper-text__item-text--m-indeterminate--Color);
+ --pf-v6-c-helper-text--m-dynamic__item-icon--Color: var(--pf-v6-c-helper-text--m-dynamic--m-indeterminate__item-icon--Color);
+ --pf-v6-c-helper-text--m-dynamic__item-text--Color: var(--pf-v6-c-helper-text--m-dynamic--m-indeterminate__item-text--Color);
+}
+.pf-v6-c-helper-text__item.pf-m-warning {
+ --pf-v6-c-helper-text__item-text--FontWeight: var(--pf-v6-c-helper-text__item-text--m-warning--FontWeight);
+ --pf-v6-c-helper-text__item-icon--Color: var(--pf-v6-c-helper-text__item-icon--m-warning--Color);
+ --pf-v6-c-helper-text--m-dynamic__item-icon--Color: var(--pf-v6-c-helper-text--m-dynamic--m-warning__item-icon--Color);
+}
+.pf-v6-c-helper-text__item.pf-m-success {
+ --pf-v6-c-helper-text__item-text--FontWeight: var(--pf-v6-c-helper-text__item-text--m-success--FontWeight);
+ --pf-v6-c-helper-text__item-icon--Color: var(--pf-v6-c-helper-text__item-icon--m-success--Color);
+ --pf-v6-c-helper-text--m-dynamic__item-icon--Color: var(--pf-v6-c-helper-text--m-dynamic--m-success__item-icon--Color);
+}
+.pf-v6-c-helper-text__item.pf-m-error {
+ --pf-v6-c-helper-text__item-text--FontWeight: var(--pf-v6-c-helper-text__item-text--m-error--FontWeight);
+ --pf-v6-c-helper-text__item-icon--Color: var(--pf-v6-c-helper-text__item-icon--m-error--Color);
+ --pf-v6-c-helper-text--m-dynamic__item-icon--Color: var(--pf-v6-c-helper-text--m-dynamic--m-error__item-icon--Color);
+ animation-name: pf-v6-c-helper-text-item-fade-in;
+ animation-duration: var(--pf-v6-c-helper-text__item--m-error--TransitionDuration--Opacity);
+ animation-timing-function: var(--pf-v6-c-helper-text__item--m-error--TransitionTimingFunction--Opacity);
+}
+@keyframes pf-v6-c-helper-text-item-fade-in {
+ from {
+ opacity: 0;
+ }
+ to {
+ opacity: 1;
+ }
+}
+.pf-v6-c-helper-text__item.pf-m-dynamic {
+ --pf-v6-c-helper-text__item-icon--Color: var(--pf-v6-c-helper-text--m-dynamic__item-icon--Color);
+}
+
+.pf-v6-c-helper-text__item-icon {
+ margin-inline-end: var(--pf-v6-c-helper-text__item-icon--MarginInlineEnd);
+ color: var(--pf-v6-c-helper-text__item-icon--Color);
+}
+
+.pf-v6-c-helper-text__item-text {
+ color: var(--pf-v6-c-helper-text__item-text--Color);
+}
+
+.pf-v6-c-icon {
+ --pf-v6-c-icon--Width: var(--pf-t--global--icon--size--font--body--default);
+ --pf-v6-c-icon--Height: var(--pf-t--global--icon--size--font--body--default);
+ --pf-v6-c-icon--m-sm--Width: var(--pf-t--global--icon--size--sm);
+ --pf-v6-c-icon--m-sm--Height: var(--pf-t--global--icon--size--sm);
+ --pf-v6-c-icon--m-md--Width: var(--pf-t--global--icon--size--md);
+ --pf-v6-c-icon--m-md--Height: var(--pf-t--global--icon--size--md);
+ --pf-v6-c-icon--m-lg--Width: var(--pf-t--global--icon--size--lg);
+ --pf-v6-c-icon--m-lg--Height: var(--pf-t--global--icon--size--lg);
+ --pf-v6-c-icon--m-xl--Width: var(--pf-t--global--icon--size--xl);
+ --pf-v6-c-icon--m-xl--Height: var(--pf-t--global--icon--size--xl);
+ --pf-v6-c-icon--m-2xl--Width: var(--pf-t--global--icon--size--2xl);
+ --pf-v6-c-icon--m-2xl--Height: var(--pf-t--global--icon--size--2xl);
+ --pf-v6-c-icon--m-3xl--Width: var(--pf-t--global--icon--size--3xl);
+ --pf-v6-c-icon--m-3xl--Height: var(--pf-t--global--icon--size--3xl);
+ --pf-v6-c-icon--m-body-sm--Width: var(--pf-t--global--icon--size--font--body--sm);
+ --pf-v6-c-icon--m-body-sm--Height: var(--pf-t--global--icon--size--font--body--sm);
+ --pf-v6-c-icon--m-body-default--Width: var(--pf-t--global--icon--size--font--body--default);
+ --pf-v6-c-icon--m-body-default--Height: var(--pf-t--global--icon--size--font--body--default);
+ --pf-v6-c-icon--m-body-lg--Width: var(--pf-t--global--icon--size--font--body--lg);
+ --pf-v6-c-icon--m-body-lg--Height: var(--pf-t--global--icon--size--font--body--lg);
+ --pf-v6-c-icon--m-heading-sm--Width: var(--pf-t--global--icon--size--font--heading--h6);
+ --pf-v6-c-icon--m-heading-sm--Height: var(--pf-t--global--icon--size--font--heading--h6);
+ --pf-v6-c-icon--m-heading-md--Width: var(--pf-t--global--icon--size--font--heading--h5);
+ --pf-v6-c-icon--m-heading-md--Height: var(--pf-t--global--icon--size--font--heading--h5);
+ --pf-v6-c-icon--m-heading-lg--Width: var(--pf-t--global--icon--size--font--heading--h4);
+ --pf-v6-c-icon--m-heading-lg--Height: var(--pf-t--global--icon--size--font--heading--h4);
+ --pf-v6-c-icon--m-heading-xl--Width: var(--pf-t--global--icon--size--font--heading--h3);
+ --pf-v6-c-icon--m-heading-xl--Height: var(--pf-t--global--icon--size--font--heading--h3);
+ --pf-v6-c-icon--m-heading-2xl--Width: var(--pf-t--global--icon--size--font--heading--h2);
+ --pf-v6-c-icon--m-heading-2xl--Height: var(--pf-t--global--icon--size--font--heading--h2);
+ --pf-v6-c-icon--m-heading-3xl--Width: var(--pf-t--global--icon--size--font--heading--h1);
+ --pf-v6-c-icon--m-heading-3xl--Height: var(--pf-t--global--icon--size--font--heading--h1);
+ --pf-v6-c-icon--m-inline--Width: 1em;
+ --pf-v6-c-icon--m-inline--Height: 1em;
+ --pf-v6-c-icon__content--svg--VerticalAlign: -.125em;
+ --pf-v6-c-icon__content--Color: var(--pf-t--global--icon--color--regular);
+ --pf-v6-c-icon__content--m-danger--Color: var(--pf-t--global--icon--color--status--danger--default);
+ --pf-v6-c-icon__content--m-warning--Color: var(--pf-t--global--icon--color--status--warning--default);
+ --pf-v6-c-icon__content--m-success--Color: var(--pf-t--global--icon--color--status--success--default);
+ --pf-v6-c-icon__content--m-info--Color: var(--pf-t--global--icon--color--status--info--default);
+ --pf-v6-c-icon__content--m-custom--Color: var(--pf-t--global--icon--color--status--custom--default);
+ --pf-v6-c-icon--m-inline__content--Color: initial;
+ --pf-v6-c-icon__content--FontSize: var(--pf-t--global--icon--size--font--body--default);
+ --pf-v6-c-icon--m-sm__content--FontSize: var(--pf-t--global--icon--size--sm);
+ --pf-v6-c-icon--m-md__content--FontSize: var(--pf-t--global--icon--size--md);
+ --pf-v6-c-icon--m-lg__content--FontSize: var(--pf-t--global--icon--size--lg);
+ --pf-v6-c-icon--m-xl__content--FontSize: var(--pf-t--global--icon--size--xl);
+ --pf-v6-c-icon--m-2xl__content--FontSize: var(--pf-t--global--icon--size--2xl);
+ --pf-v6-c-icon--m-3xl__content--FontSize: var(--pf-t--global--icon--size--3xl);
+ --pf-v6-c-icon--m-body-sm__content--FontSize: var(--pf-t--global--icon--size--font--body--sm);
+ --pf-v6-c-icon--m-body-default__content--FontSize: var(--pf-t--global--icon--size--font--body--default);
+ --pf-v6-c-icon--m-body-lg__content--FontSize: var(--pf-t--global--icon--size--font--body--lg);
+ --pf-v6-c-icon--m-heading-sm__content--FontSize: var(--pf-t--global--icon--size--font--heading--h6);
+ --pf-v6-c-icon--m-heading-md__content--FontSize: var(--pf-t--global--icon--size--font--heading--h5);
+ --pf-v6-c-icon--m-heading-lg__content--FontSize: var(--pf-t--global--icon--size--font--heading--h4);
+ --pf-v6-c-icon--m-heading-xl__content--FontSize: var(--pf-t--global--icon--size--font--heading--h3);
+ --pf-v6-c-icon--m-heading-2xl__content--FontSize: var(--pf-t--global--icon--size--font--heading--h2);
+ --pf-v6-c-icon--m-heading-3xl__content--FontSize: var(--pf-t--global--icon--size--font--heading--h1);
+ --pf-v6-c-icon--m-inline__content--FontSize: 1em;
+}
+
+.pf-v6-c-icon {
+ position: relative;
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ width: var(--pf-v6-c-icon--Width);
+ height: var(--pf-v6-c-icon--Height);
+}
+.pf-v6-c-icon.pf-m-inline {
+ --pf-v6-c-icon--Width: var(--pf-v6-c-icon--m-inline--Width);
+ --pf-v6-c-icon--Height: var(--pf-v6-c-icon--m-inline--Height);
+ --pf-v6-c-icon__content--FontSize: var(--pf-v6-c-icon--m-inline__content--FontSize);
+ --pf-v6-c-icon__content--Color: var(--pf-v6-c-icon--m-inline__content--Color);
+ line-height: 1;
+}
+.pf-v6-c-icon.pf-m-inline .pf-v6-c-spinner {
+ --pf-v6-c-spinner--diameter: 1em;
+}
+.pf-v6-c-icon.pf-m-sm {
+ --pf-v6-c-icon--Width: var(--pf-v6-c-icon--m-sm--Width);
+ --pf-v6-c-icon--Height: var(--pf-v6-c-icon--m-sm--Height);
+ --pf-v6-c-icon__content--FontSize: var(--pf-v6-c-icon--m-sm__content--FontSize);
+}
+.pf-v6-c-icon.pf-m-md {
+ --pf-v6-c-icon--Width: var(--pf-v6-c-icon--m-md--Width);
+ --pf-v6-c-icon--Height: var(--pf-v6-c-icon--m-md--Height);
+ --pf-v6-c-icon__content--FontSize: var(--pf-v6-c-icon--m-md__content--FontSize);
+}
+.pf-v6-c-icon.pf-m-lg {
+ --pf-v6-c-icon--Width: var(--pf-v6-c-icon--m-lg--Width);
+ --pf-v6-c-icon--Height: var(--pf-v6-c-icon--m-lg--Height);
+ --pf-v6-c-icon__content--FontSize: var(--pf-v6-c-icon--m-lg__content--FontSize);
+}
+.pf-v6-c-icon.pf-m-xl {
+ --pf-v6-c-icon--Width: var(--pf-v6-c-icon--m-xl--Width);
+ --pf-v6-c-icon--Height: var(--pf-v6-c-icon--m-xl--Height);
+ --pf-v6-c-icon__content--FontSize: var(--pf-v6-c-icon--m-xl__content--FontSize);
+}
+.pf-v6-c-icon.pf-m-2xl {
+ --pf-v6-c-icon--Width: var(--pf-v6-c-icon--m-2xl--Width);
+ --pf-v6-c-icon--Height: var(--pf-v6-c-icon--m-2xl--Height);
+ --pf-v6-c-icon__content--FontSize: var(--pf-v6-c-icon--m-2xl__content--FontSize);
+}
+.pf-v6-c-icon.pf-m-3xl {
+ --pf-v6-c-icon--Width: var(--pf-v6-c-icon--m-3xl--Width);
+ --pf-v6-c-icon--Height: var(--pf-v6-c-icon--m-3xl--Height);
+ --pf-v6-c-icon__content--FontSize: var(--pf-v6-c-icon--m-3xl__content--FontSize);
+}
+.pf-v6-c-icon.pf-m-body-sm {
+ --pf-v6-c-icon--Width: var(--pf-v6-c-icon--m-body-sm--Width);
+ --pf-v6-c-icon--Height: var(--pf-v6-c-icon--m-body-sm--Height);
+ --pf-v6-c-icon__content--FontSize: var(--pf-v6-c-icon--m-body-sm__content--FontSize);
+}
+.pf-v6-c-icon.pf-m-body-default {
+ --pf-v6-c-icon--Width: var(--pf-v6-c-icon--m-body-default--Width);
+ --pf-v6-c-icon--Height: var(--pf-v6-c-icon--m-body-default--Height);
+ --pf-v6-c-icon__content--FontSize: var(--pf-v6-c-icon--m-body-default__content--FontSize);
+}
+.pf-v6-c-icon.pf-m-body-lg {
+ --pf-v6-c-icon--Width: var(--pf-v6-c-icon--m-body-lg--Width);
+ --pf-v6-c-icon--Height: var(--pf-v6-c-icon--m-body-lg--Height);
+ --pf-v6-c-icon__content--FontSize: var(--pf-v6-c-icon--m-lg__content--FontSize);
+}
+.pf-v6-c-icon.pf-m-heading-sm {
+ --pf-v6-c-icon--Width: var(--pf-v6-c-icon--m-heading-sm--Width);
+ --pf-v6-c-icon--Height: var(--pf-v6-c-icon--m-heading-sm--Height);
+ --pf-v6-c-icon__content--FontSize: var(--pf-v6-c-icon--m-heading-sm__content--FontSize);
+}
+.pf-v6-c-icon.pf-m-heading-md {
+ --pf-v6-c-icon--Width: var(--pf-v6-c-icon--m-heading-md--Width);
+ --pf-v6-c-icon--Height: var(--pf-v6-c-icon--m-heading-md--Height);
+ --pf-v6-c-icon__content--FontSize: var(--pf-v6-c-icon--m-heading-md__content--FontSize);
+}
+.pf-v6-c-icon.pf-m-heading-lg {
+ --pf-v6-c-icon--Width: var(--pf-v6-c-icon--m-heading-lg--Width);
+ --pf-v6-c-icon--Height: var(--pf-v6-c-icon--m-heading-lg--Height);
+ --pf-v6-c-icon__content--FontSize: var(--pf-v6-c-icon--m-heading-lg__content--FontSize);
+}
+.pf-v6-c-icon.pf-m-heading-xl {
+ --pf-v6-c-icon--Width: var(--pf-v6-c-icon--m-heading-xl--Width);
+ --pf-v6-c-icon--Height: var(--pf-v6-c-icon--m-heading-xl--Height);
+ --pf-v6-c-icon__content--FontSize: var(--pf-v6-c-icon--m-heading-xl__content--FontSize);
+}
+.pf-v6-c-icon.pf-m-heading-2xl {
+ --pf-v6-c-icon--Width: var(--pf-v6-c-icon--m-heading-2xl--Width);
+ --pf-v6-c-icon--Height: var(--pf-v6-c-icon--m-heading-2xl--Height);
+ --pf-v6-c-icon__content--FontSize: var(--pf-v6-c-icon--m-heading-2xl__content--FontSize);
+}
+.pf-v6-c-icon.pf-m-heading-3xl {
+ --pf-v6-c-icon--Width: var(--pf-v6-c-icon--m-heading-3xl--Width);
+ --pf-v6-c-icon--Height: var(--pf-v6-c-icon--m-heading-3xl--Height);
+ --pf-v6-c-icon__content--FontSize: var(--pf-v6-c-icon--m-heading-3xl__content--FontSize);
+}
+.pf-v6-c-icon.pf-m-in-progress {
+ --pf-v6-c-icon__content--Opacity: 0;
+ --pf-v6-c-icon__progress--Opacity: 1;
+}
+
+.pf-v6-c-icon__content,
+.pf-v6-c-icon__progress {
+ font-size: var(--pf-v6-c-icon__content--FontSize);
+}
+.pf-v6-c-icon__content svg,
+.pf-v6-c-icon__progress svg {
+ vertical-align: var(--pf-v6-c-icon__content--svg--VerticalAlign);
+}
+.pf-v6-c-icon__content.pf-m-sm,
+.pf-v6-c-icon__progress.pf-m-sm {
+ --pf-v6-c-icon__content--FontSize: var(--pf-v6-c-icon--m-sm__content--FontSize);
+}
+.pf-v6-c-icon__content.pf-m-md,
+.pf-v6-c-icon__progress.pf-m-md {
+ --pf-v6-c-icon__content--FontSize: var(--pf-v6-c-icon--m-md__content--FontSize);
+}
+.pf-v6-c-icon__content.pf-m-lg,
+.pf-v6-c-icon__progress.pf-m-lg {
+ --pf-v6-c-icon__content--FontSize: var(--pf-v6-c-icon--m-lg__content--FontSize);
+}
+.pf-v6-c-icon__content.pf-m-xl,
+.pf-v6-c-icon__progress.pf-m-xl {
+ --pf-v6-c-icon__content--FontSize: var(--pf-v6-c-icon--m-xl__content--FontSize);
+}
+.pf-v6-c-icon__content.pf-m-2xl,
+.pf-v6-c-icon__progress.pf-m-2xl {
+ --pf-v6-c-icon__content--FontSize: var(--pf-v6-c-icon--m-2xl__content--FontSize);
+}
+.pf-v6-c-icon__content.pf-m-3xl,
+.pf-v6-c-icon__progress.pf-m-3xl {
+ --pf-v6-c-icon__content--FontSize: var(--pf-v6-c-icon--m-3xl__content--FontSize);
+}
+.pf-v6-c-icon__content.pf-m-body-sm,
+.pf-v6-c-icon__progress.pf-m-body-sm {
+ --pf-v6-c-icon__content--FontSize: var(--pf-v6-c-icon--m-body-sm__content--FontSize);
+}
+.pf-v6-c-icon__content.pf-m-body-default,
+.pf-v6-c-icon__progress.pf-m-body-default {
+ --pf-v6-c-icon__content--FontSize: var(--pf-v6-c-icon--m-md__content--FontSize);
+}
+.pf-v6-c-icon__content.pf-m-body-lg,
+.pf-v6-c-icon__progress.pf-m-body-lg {
+ --pf-v6-c-icon__content--FontSize: var(--pf-v6-c-icon--m-lg__content--FontSize);
+}
+.pf-v6-c-icon__content.pf-m-heading-sm,
+.pf-v6-c-icon__progress.pf-m-heading-sm {
+ --pf-v6-c-icon__content--FontSize: var(--pf-v6-c-icon--m-heading-sm__content--FontSize);
+}
+.pf-v6-c-icon__content.pf-m-heading-md,
+.pf-v6-c-icon__progress.pf-m-heading-md {
+ --pf-v6-c-icon__content--FontSize: var(--pf-v6-c-icon--m-heading-md__content--FontSize);
+}
+.pf-v6-c-icon__content.pf-m-heading-lg,
+.pf-v6-c-icon__progress.pf-m-heading-lg {
+ --pf-v6-c-icon__content--FontSize: var(--pf-v6-c-icon--m-heading-lg__content--FontSize);
+}
+.pf-v6-c-icon__content.pf-m-heading-xl,
+.pf-v6-c-icon__progress.pf-m-heading-xl {
+ --pf-v6-c-icon__content--FontSize: var(--pf-v6-c-icon--m-heading-xl__content--FontSize);
+}
+.pf-v6-c-icon__content.pf-m-heading-2xl,
+.pf-v6-c-icon__progress.pf-m-heading-2xl {
+ --pf-v6-c-icon__content--FontSize: var(--pf-v6-c-icon--m-heading-2xl__content--FontSize);
+}
+.pf-v6-c-icon__content.pf-m-heading-3xl,
+.pf-v6-c-icon__progress.pf-m-heading-3xl {
+ --pf-v6-c-icon__content--FontSize: var(--pf-v6-c-icon--m-heading-3xl__content--FontSize);
+}
+
+.pf-v6-c-icon__content {
+ color: var(--pf-v6-c-icon__content--Color, inherit);
+ opacity: var(--pf-v6-c-icon__content--Opacity, 1);
+}
+.pf-v6-c-icon__content.pf-m-danger {
+ --pf-v6-c-icon__content--Color: var(--pf-v6-c-icon__content--m-danger--Color);
+}
+.pf-v6-c-icon__content.pf-m-warning {
+ --pf-v6-c-icon__content--Color: var(--pf-v6-c-icon__content--m-warning--Color);
+}
+.pf-v6-c-icon__content.pf-m-success {
+ --pf-v6-c-icon__content--Color: var(--pf-v6-c-icon__content--m-success--Color);
+}
+.pf-v6-c-icon__content.pf-m-info {
+ --pf-v6-c-icon__content--Color: var(--pf-v6-c-icon__content--m-info--Color);
+}
+.pf-v6-c-icon__content.pf-m-custom {
+ --pf-v6-c-icon__content--Color: var(--pf-v6-c-icon__content--m-custom--Color);
+}
+
+.pf-v6-c-icon__progress {
+ position: absolute;
+ inset-block-start: calc(50% + 0.5 * var(--pf-v6-c-icon__content--svg--VerticalAlign));
+ opacity: var(--pf-v6-c-icon__progress--Opacity, 0);
+ transform: translateY(calc(-50% - 0.5 * var(--pf-v6-c-icon__content--svg--VerticalAlign)));
+}
+
+.pf-v6-c-inline-edit {
+ --pf-v6-c-inline-edit__group--item--MarginInlineEnd: var(--pf-t--global--spacer--gap--action-to-action--default);
+ --pf-v6-c-inline-edit__action--c-button--m-valid--m-plain--Color: var(--pf-t--global--icon--color--brand--default);
+ --pf-v6-c-inline-edit__action--c-button--m-valid--m-plain--hover--Color: var(--pf-t--global--icon--color--brand--hover);
+ --pf-v6-c-inline-edit__action--m-icon-group--item--MarginInlineEnd: var(--pf-t--global--spacer--gap--action-to-action--plain);
+ --pf-v6-c-inline-edit__group--m-footer--MarginBlockStart: var(--pf-t--global--spacer--xl);
+ --pf-v6-c-inline-edit__label--m-bold--FontWeight: var(--pf-t--global--font--weight--body--bold);
+}
+
+.pf-v6-c-inline-edit__group {
+ display: flex;
+ align-items: baseline;
+}
+.pf-v6-c-inline-edit__group > * {
+ margin-inline-end: var(--pf-v6-c-inline-edit__group--item--MarginInlineEnd);
+}
+.pf-v6-c-inline-edit__group.pf-m-icon-group {
+ --pf-v6-c-inline-edit__group--item--MarginInlineEnd: var(--pf-v6-c-inline-edit__action--m-icon-group--item--MarginInlineEnd);
+}
+.pf-v6-c-inline-edit__group.pf-m-footer {
+ margin-block-start: var(--pf-v6-c-inline-edit__group--m-footer--MarginBlockStart);
+}
+.pf-v6-c-inline-edit__group.pf-m-column {
+ --pf-v6-c-inline-edit__group--item--MarginInlineEnd: 0;
+ flex-direction: column;
+}
+.pf-v6-c-inline-edit__group > :last-child {
+ --pf-v6-c-inline-edit__group--item--MarginInlineEnd: 0;
+}
+
+.pf-v6-c-inline-edit__input {
+ flex: 1;
+}
+
+.pf-v6-c-inline-edit__action.pf-m-valid .pf-v6-c-button.pf-m-plain {
+ --pf-v6-c-button--m-plain--Color: var(--pf-v6-c-inline-edit__action--c-button--m-valid--m-plain--Color);
+}
+.pf-v6-c-inline-edit__action.pf-m-valid .pf-v6-c-button.pf-m-plain:hover {
+ --pf-v6-c-button--m-plain--Color: var(--pf-v6-c-inline-edit__action--c-button--m-valid--m-plain--hover--Color);
+}
+
+.pf-v6-c-inline-edit__input,
+.pf-v6-c-inline-edit__action,
+.pf-v6-c-inline-edit__group.pf-m-action-group {
+ display: none;
+}
+
+.pf-v6-c-inline-edit__action.pf-m-enable-editable {
+ display: inline-block;
+}
+
+.pf-v6-c-inline-edit.pf-m-inline-editable .pf-v6-c-inline-edit__input,
+.pf-v6-c-inline-edit .pf-m-inline-editable .pf-v6-c-inline-edit__input {
+ display: block;
+}
+.pf-v6-c-inline-edit.pf-m-inline-editable .pf-v6-c-inline-edit__action,
+.pf-v6-c-inline-edit .pf-m-inline-editable .pf-v6-c-inline-edit__action {
+ display: inline-block;
+}
+.pf-v6-c-inline-edit.pf-m-inline-editable .pf-v6-c-inline-edit__group.pf-m-action-group,
+.pf-v6-c-inline-edit .pf-m-inline-editable .pf-v6-c-inline-edit__group.pf-m-action-group {
+ display: inline-flex;
+}
+.pf-v6-c-inline-edit.pf-m-inline-editable .pf-v6-c-inline-edit__value,
+.pf-v6-c-inline-edit.pf-m-inline-editable .pf-v6-c-inline-edit__action.pf-m-enable-editable,
+.pf-v6-c-inline-edit .pf-m-inline-editable .pf-v6-c-inline-edit__value,
+.pf-v6-c-inline-edit .pf-m-inline-editable .pf-v6-c-inline-edit__action.pf-m-enable-editable {
+ display: none;
+}
+
+.pf-v6-c-inline-edit__label + .pf-v6-c-inline-edit__action.pf-m-enable > .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);
+}
+
+.pf-v6-c-inline-edit__label.pf-m-bold {
+ font-weight: var(--pf-v6-c-inline-edit__label--m-bold--FontWeight);
+}
+
+.pf-v6-c-inline-edit__editable-text br {
+ display: none;
+}
+
+.pf-v6-c-input-group {
+ --pf-v6-c-input-group--Gap: var(--pf-t--global--spacer--gap--control-to-control--default);
+ --pf-v6-c-input-group__item--offset: var(--pf-t--global--border--width--control--default);
+ --pf-v6-c-input-group__item--BorderWidth--base: var(--pf-t--global--border--width--control--default);
+ --pf-v6-c-input-group__item--BorderColor--base: var(--pf-t--global--border--color--default);
+ --pf-v6-c-input-group__item--BackgroundColor: transparent;
+ --pf-v6-c-input-group__item--AlignItems: start;
+ --pf-v6-c-input-group__item--m-box--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-input-group__item--m-box--PaddingInlineStart: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-input-group__item--m-box--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
+ --pf-v6-c-input-group__item--m-box--BorderWidth: var(--pf-v6-c-input-group__item--BorderWidth--base);
+ --pf-v6-c-input-group__item--m-box--BorderRadius: var(--pf-t--global--border--radius--small);
+ --pf-v6-c-input-group__item--m-box--BorderBlockStartColor: var(--pf-v6-c-input-group__item--BorderColor--base);
+ --pf-v6-c-input-group__item--m-box--BorderInlineEndColor: var(--pf-v6-c-input-group__item--BorderColor--base);
+ --pf-v6-c-input-group__item--m-box--BorderBlockEndColor: var(--pf-v6-c-input-group__item--BorderColor--base);
+ --pf-v6-c-input-group__item--m-box--BorderInlineStartColor: var(--pf-v6-c-input-group__item--BorderColor--base);
+ --pf-v6-c-input-group__item--m-plain--BackgroundColor: transparent;
+ --pf-v6-c-input-group__text--FontSize: var(--pf-t--global--font--size--body--default);
+ --pf-v6-c-input-group__text--Color: var(--pf-t--global--text--color--regular);
+ --pf-v6-c-input-group__item--m-disabled__text--Color: var(--pf-t--global--text--color--on-disabled);
+ --pf-v6-c-input-group__item--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
+ --pf-v6-c-input-group__item--m-search-text-input--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
+ --pf-v6-c-input-group__item--m-search-text-input--TransitionDuration--expand--fade: var(--pf-t--global--motion--duration--fade--default);
+ --pf-v6-c-input-group__item--m-search-text-input--TransitionDuration--collapse--fade: var(--pf-t--global--motion--duration--fade--short);
+ --pf-v6-c-input-group__item--m-search-text-input--TransitionDuration--expand--slide: var(--pf-t--global--motion--duration--fade--default);
+ --pf-v6-c-input-group__item--m-search-text-input--TransitionDuration--collapse--slide: var(--pf-t--global--motion--duration--fade--short);
+ --pf-v6-c-input-group__item--m-search-text-input--TransitionDuration--fade: var(--pf-v6-c-input-group__item--m-search-text-input--TransitionDuration--collapse--fade);
+ --pf-v6-c-input-group__item--m-search-text-input--TransitionDuration--slide: var(--pf-v6-c-input-group__item--m-search-text-input--TransitionDuration--collapse--slide);
+ --pf-v6-c-input-group__item--m-search-text-input--ScaleX: 1;
+ --pf-v6-c-input-group__item--m-search-text-input--TransformOriginX--expand-start: 100%;
+ --pf-v6-c-input-group__item--m-search-text-input--TransformOriginX--expand-end: 0;
+ --pf-v6-c-input-group__item--m-search-text-input--TransformOriginX: var(--pf-v6-c-input-group__item--m-search-text-input--TransformOriginX--expand-end);
+ --pf-v6-c-input-group__item--m-search-expand--TransitionTimingFunction:var(--pf-t--global--motion--timing-function--default);
+ --pf-v6-c-input-group__item--m-search-expand--TransitionDuration--expand--fade: 0s;
+ --pf-v6-c-input-group__item--m-search-expand--TransitionDuration--collapse--fade: 0s;
+ --pf-v6-c-input-group__item--m-search-expand--TransitionDuration--fade: var(--pf-v6-c-input-group__item--m-search-expand--TransitionDuration--expand--fade);
+ --pf-v6-c-input-group__item--m-search-action--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
+ --pf-v6-c-input-group__item--m-search-action--TransitionDuration--expand--fade: var(--pf-t--global--motion--duration--fade--default);
+ --pf-v6-c-input-group__item--m-search-action--TransitionDuration--collapse--fade: var(--pf-t--global--motion--duration--fade--short);
+ --pf-v6-c-input-group__item--m-search-action--TransitionDuration--fade: var(--pf-v6-c-input-group__item--m-search-action--TransitionDuration--collapse--fade);
+}
+@media (prefers-reduced-motion: no-preference) {
+ .pf-v6-c-input-group {
+ --pf-v6-c-input-group__item--m-search-text-input--ScaleX: .7;
+ }
+}
+
+.pf-v6-c-input-group {
+ display: flex;
+ gap: var(--pf-v6-c-input-group--Gap);
+ width: 100%;
+}
+.pf-v6-c-input-group.pf-m-search-expandable:not(.pf-m-expanded) {
+ --pf-v6-c-input-group--Gap: 0;
+ transition: gap 0s var(--pf-v6-c-input-group__item--m-search-text-input--TransitionDuration--fade);
+}
+.pf-v6-c-input-group.pf-m-search-expandable .pf-v6-c-input-group__item.pf-m-search-input {
+ flex-grow: 1;
+ max-width: var(--pf-v6-c-input-group__item--m-search-text-input--MaxWidth, 0);
+ visibility: var(--pf-v6-c-input-group__item--m-search-text-input--Visibility, hidden);
+ opacity: var(--pf-v6-c-input-group__item--m-search-text-input--Opacity, 0);
+ transition-delay: 0s, 0s, var(--pf-v6-c-input-group__item--m-search-text-input--TransitionDuration--fade), var(--pf-v6-c-input-group__item--m-search-text-input--TransitionDuration--fade);
+ transition-timing-function: var(--pf-v6-c-input-group__item--m-search-text-input--TransitionTimingFunction);
+ transition-duration: var(--pf-v6-c-input-group__item--m-search-text-input--TransitionDuration--fade), var(--pf-v6-c-input-group__item--m-search-text-input--TransitionDuration--slide), 0s, 0s;
+ transition-property: opacity, scale, visibility, max-width;
+ transform-origin: var(--pf-v6-c-input-group__item--m-search-text-input--TransformOriginX) center;
+ scale: var(--pf-v6-c-input-group__item--m-search-text-input--ScaleX) 1;
+}
+.pf-v6-c-input-group.pf-m-search-expandable .pf-v6-c-input-group__item.pf-m-search-expand {
+ max-width: var(--pf-v6-c-input-group__item--m-search-expand--MaxWidth, 100%);
+ visibility: var(--pf-v6-c-input-group__item--m-search-expand--Visibility, visible);
+ opacity: var(--pf-v6-c-input-group__item--m-search-expand--Opacity, 1);
+ transition-delay: var(--pf-v6-c-input-group__item--m-search-action--TransitionDuration--fade);
+ transition-timing-function: var(--pf-v6-c-input-group__item--m-search-expand--TransitionTimingFunction);
+ transition-duration: var(--pf-v6-c-input-group__item--m-search-expand--TransitionDuration--fade), 0s, 0s;
+ transition-property: opacity, visibility, max-width;
+}
+.pf-v6-c-input-group.pf-m-search-expandable .pf-v6-c-input-group__item.pf-m-search-action {
+ max-width: var(--pf-v6-c-input-group__item--m-search-action--MaxWidth, 0);
+ visibility: var(--pf-v6-c-input-group__item--m-search-action--Visibility, hidden);
+ opacity: var(--pf-v6-c-input-group__item--m-search-action--Opacity, 0);
+ transition-delay: 0s, var(--pf-v6-c-input-group__item--m-search-action--TransitionDuration--fade), var(--pf-v6-c-input-group__item--m-search-action--TransitionDuration--fade);
+ transition-timing-function: var(--pf-v6-c-input-group__item--m-search-action--TransitionTimingFunction);
+ transition-duration: var(--pf-v6-c-input-group__item--m-search-action--TransitionDuration--fade), 0s, 0s;
+ transition-property: opacity, visibility, max-width;
+}
+.pf-v6-c-input-group.pf-m-search-expandable.pf-m-expand-start {
+ --pf-v6-c-input-group__item--m-search-text-input--TransformOriginX: var(--pf-v6-c-input-group__item--m-search-text-input--TransformOriginX--expand-start);
+}
+.pf-v6-c-input-group.pf-m-search-expandable.pf-m-expanded {
+ --pf-v6-c-input-group__item--m-search-text-input--MaxWidth: 100%;
+ --pf-v6-c-input-group__item--m-search-text-input--Visibility: visible;
+ --pf-v6-c-input-group__item--m-search-text-input--Opacity: 1;
+ --pf-v6-c-input-group__item--m-search-text-input--TransitionDuration--fade: var(--pf-v6-c-input-group__item--m-search-text-input--TransitionDuration--expand--fade);
+ --pf-v6-c-input-group__item--m-search-text-input--TransitionDuration--slide: var(--pf-v6-c-input-group__item--m-search-text-input--TransitionDuration--expand--slide);
+ --pf-v6-c-input-group__item--m-search-text-input--ScaleX: 1;
+ --pf-v6-c-input-group__item--m-search-action--MaxWidth: 100%;
+ --pf-v6-c-input-group__item--m-search-action--Visibility: visible;
+ --pf-v6-c-input-group__item--m-search-action--Opacity: 1;
+ --pf-v6-c-input-group__item--m-search-action--TransitionDuration--fade: var(--pf-v6-c-input-group__item--m-search-action--TransitionDuration--expand--fade);
+ --pf-v6-c-input-group__item--m-search-expand--MaxWidth: 0;
+ --pf-v6-c-input-group__item--m-search-expand--Visibility: hidden;
+ --pf-v6-c-input-group__item--m-search-expand--Opacity: 0;
+ --pf-v6-c-input-group__item--m-search-expand--TransitionDuration--fade: var(--pf-v6-c-input-group__item--m-search-expand--TransitionDuration--collapse--fade);
+}
+.pf-v6-c-input-group.pf-m-search-expandable.pf-m-expanded .pf-v6-c-input-group__item:is(.pf-m-search-input, .pf-m-search-expand, .pf-m-search-action) {
+ transition-delay: 0s;
+}
+
+.pf-v6-c-input-group__item {
+ position: relative;
+ display: flex;
+ align-items: var(--pf-v6-c-input-group__item--AlignItems);
+ min-width: var(--pf-v6-c-input-group__item--MinWidth, revert);
+ max-width: var(--pf-v6-c-input-group__item--MaxWidth, revert);
+ background-color: var(--pf-v6-c-input-group__item--BackgroundColor);
+ border-block-start-color: var(--pf-v6-c-input-group__item--m-box--BorderBlockStartColor);
+ border-block-end-color: var(--pf-v6-c-input-group__item--m-box--BorderBlockEndColor);
+ border-inline-start-color: var(--pf-v6-c-input-group__item--m-box--BorderInlineStartColor);
+ border-inline-end-color: var(--pf-v6-c-input-group__item--m-box--BorderInlineEndColor);
+}
+.pf-v6-c-input-group__item.pf-m-box {
+ --pf-v6-c-input-group__item--BackgroundColor: var(--pf-v6-c-input-group__item--m-box--BackgroundColor);
+ padding-inline-start: var(--pf-v6-c-input-group__item--m-box--PaddingInlineStart);
+ padding-inline-end: var(--pf-v6-c-input-group__item--m-box--PaddingInlineEnd);
+ border: var(--pf-v6-c-input-group__item--m-box--BorderWidth) solid;
+ border-block-start-color: var(--pf-v6-c-input-group__item--m-box--BorderBlockStartColor);
+ border-block-end-color: var(--pf-v6-c-input-group__item--m-box--BorderBlockEndColor);
+ border-inline-start-color: var(--pf-v6-c-input-group__item--m-box--BorderInlineStartColor);
+ border-inline-end-color: var(--pf-v6-c-input-group__item--m-box--BorderInlineEndColor);
+ border-radius: var(--pf-v6-c-input-group__item--m-box--BorderRadius);
+}
+.pf-v6-c-input-group__item.pf-m-plain {
+ --pf-v6-c-input-group__item--BackgroundColor: var(--pf-v6-c-input-group__item--m-plain--BackgroundColor);
+ border: none;
+}
+.pf-v6-c-input-group__item.pf-m-disabled {
+ --pf-v6-c-input-group__item--BackgroundColor: var(--pf-v6-c-input-group__item--m-disabled--BackgroundColor);
+ --pf-v6-c-input-group__text--Color: var(--pf-v6-c-input-group__item--m-disabled__text--Color);
+}
+.pf-v6-c-input-group__item.pf-m-fill {
+ flex-grow: 1;
+}
+
+.pf-v6-c-input-group__text {
+ align-self: center;
+ font-size: var(--pf-v6-c-input-group__text--FontSize);
+ color: var(--pf-v6-c-input-group__text--Color);
+}
+label.pf-v6-c-input-group__text {
+ cursor: pointer;
+}
+
+.pf-v6-c-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--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__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--border--color--clicked);
+ --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: 90deg;
+}
+
+.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__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;
+ 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);
+}
+
+.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);
+}
+
+.pf-v6-c-jump-links__toggle-icon {
+ display: inline-block;
+ color: var(--pf-v6-c-jump-links__toggle-icon--Color);
+ 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;
+ transform: rotate(var(--pf-v6-c-jump-links__toggle-icon--Rotate));
+}
+:where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-jump-links__toggle-icon {
+ scale: -1 1;
+}
+
+.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: 0;
+ --pf-v6-c-label--BorderColor: transparent;
+ --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--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: 0;
+ --pf-v6-c-label--m-clickable--hover--BorderColor: transparent;
+ --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--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-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: calc(var(--pf-v6-c-label__actions--c-button--PaddingInlineEnd) * -1);
+ --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: calc(var(--pf-v6-c-label__actions--c-button--PaddingBlockStart) * -1);
+ --pf-v6-c-label__actions--c-button--MarginBlockEnd: calc(var(--pf-v6-c-label__actions--c-button--PaddingBlockEnd) * -1);
+ --pf-v6-c-label__actions--c-button--PaddingBlockStart: var(--pf-t--global--spacer--xs);
+ --pf-v6-c-label__actions--c-button--PaddingInlineEnd: var(--pf-t--global--spacer--xs);
+ --pf-v6-c-label__actions--c-button--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
+ --pf-v6-c-label__actions--c-button--PaddingInlineStart: var(--pf-t--global--spacer--xs);
+ --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;
+ 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;
+ isolation: isolate;
+ border: 0;
+ border-radius: var(--pf-v6-c-label--BorderRadius);
+}
+.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.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.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__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);
+}
+
+.pf-v6-c-label-group {
+ --pf-v6-c-label-group--RowGap: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-label-group--ColumnGap: var(--pf-t--global--spacer--xs);
+ --pf-v6-c-label-group--MaxWidth: 100%;
+ --pf-v6-c-label-group--m-vertical--RowGap: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-label-group--m-vertical--ColumnGap: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-label-group__main--RowGap: var(--pf-t--global--spacer--xs);
+ --pf-v6-c-label-group__main--ColumnGap: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-label-group__main--MaxWidth: 100%;
+ --pf-v6-c-label-group__main--MinWidth: 0;
+ --pf-v6-c-label-group--m-vertical__main--RowGap: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-label-group--m-vertical__main--ColumnGap: var(--pf-t--global--spacer--xs);
+ --pf-v6-c-label-group__list--RowGap: var(--pf-t--global--spacer--xs);
+ --pf-v6-c-label-group__list--ColumnGap: var(--pf-t--global--spacer--xs);
+ --pf-v6-c-label-group__list--MaxWidth: 100%;
+ --pf-v6-c-label-group__list--MinWidth: 0;
+ --pf-v6-c-label-group--m-vertical__list--RowGap: var(--pf-t--global--spacer--xs);
+ --pf-v6-c-label-group--m-vertical__list--ColumnGap: var(--pf-t--global--spacer--xs);
+ --pf-v6-c-label-group__list-item--MaxWidth: 100%;
+ --pf-v6-c-label-group--m-category--PaddingBlockStart: var(--pf-t--global--spacer--xs);
+ --pf-v6-c-label-group--m-category--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-label-group--m-category--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
+ --pf-v6-c-label-group--m-category--PaddingInlineStart: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-label-group--m-category--BorderRadius: var(--pf-t--global--border--radius--small);
+ --pf-v6-c-label-group--m-category--BorderWidth: var(--pf-t--global--border--width--regular);
+ --pf-v6-c-label-group--m-category--BorderColor: var(--pf-t--global--border--color--default);
+ --pf-v6-c-label-group--m-vertical--m-category--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-label-group__label--MaxWidth: 18ch;
+ --pf-v6-c-label-group__close--c-button--FontSize: var(--pf-t--global--icon--size--font--body--sm);
+ --pf-v6-c-label-group__close--c-button--PaddingBlockStart: var(--pf-t--global--spacer--xs);
+ --pf-v6-c-label-group__close--c-button--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-label-group__close--c-button--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
+ --pf-v6-c-label-group__close--c-button--PaddingInlineStart: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-label-group__textarea--MinWidth: 12.5rem;
+ --pf-v6-c-label-group__textarea--PaddingBlockStart: 0.125rem;
+ --pf-v6-c-label-group__textarea--PaddingInlineEnd: var(--pf-t--global--spacer--xs);
+ --pf-v6-c-label-group__textarea--PaddingBlockEnd: 0;
+ --pf-v6-c-label-group__textarea--PaddingInlineStart: var(--pf-t--global--spacer--xs);
+}
+
+.pf-v6-c-label-group {
+ display: inline-flex;
+ row-gap: var(--pf-v6-c-label-group--RowGap);
+ column-gap: var(--pf-v6-c-label-group--ColumnGap);
+ align-items: center;
+ max-width: var(--pf-v6-c-label-group--MaxWidth);
+}
+.pf-v6-c-label-group.pf-m-category {
+ padding-block-start: var(--pf-v6-c-label-group--m-category--PaddingBlockStart);
+ padding-block-end: var(--pf-v6-c-label-group--m-category--PaddingBlockEnd);
+ padding-inline-start: var(--pf-v6-c-label-group--m-category--PaddingInlineStart);
+ padding-inline-end: var(--pf-v6-c-label-group--m-category--PaddingInlineEnd);
+ background-color: var(--pf-v6-c-label-group--m-category--BackgroundColor);
+ border: var(--pf-v6-c-label-group--m-category--BorderWidth) solid var(--pf-v6-c-label-group--m-category--BorderColor);
+ border-radius: var(--pf-v6-c-label-group--m-category--BorderRadius);
+}
+.pf-v6-c-label-group.pf-m-vertical {
+ --pf-v6-c-label-group--RowGap: var(--pf-v6-c-label-group--m-vertical--RowGap);
+ --pf-v6-c-label-group--ColumnGap: var(--pf-v6-c-label-group--m-vertical--ColumnGap);
+ --pf-v6-c-label-group__main--RowGap: var(--pf-v6-c-label-group--m-vertical__main--RowGap);
+ --pf-v6-c-label-group__main--ColumnGap: var(--pf-v6-c-label-group--m-vertical__main--ColumnGap);
+ --pf-v6-c-label-group__list--RowGap: var(--pf-v6-c-label-group--m-vertical__list--RowGap);
+ --pf-v6-c-label-group__list--ColumnGap: var(--pf-v6-c-label-group--m-vertical__list--ColumnGap);
+ --pf-v6-c-label-group--m-category--PaddingInlineEnd: var(--pf-v6-c-label-group--m-vertical--m-category--PaddingInlineEnd);
+}
+.pf-v6-c-label-group.pf-m-vertical.pf-v6-c-label-group {
+ align-items: flex-start;
+}
+.pf-v6-c-label-group.pf-m-vertical .pf-v6-c-label-group__list {
+ flex-direction: column;
+ align-items: flex-start;
+ max-width: var(--pf-v6-c-label-group__list--MaxWidth);
+}
+.pf-v6-c-label-group.pf-m-vertical .pf-v6-c-label-group__main {
+ flex-direction: column;
+ min-width: var(--pf-v6-c-label-group__main--MinWidth);
+}
+.pf-v6-c-label-group.pf-m-editable,
+.pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__main,
+.pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__list {
+ display: flex;
+}
+.pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__main,
+.pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__list,
+.pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__list-item.pf-m-textarea,
+.pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__textarea {
+ flex: 1;
+}
+
+.pf-v6-c-label-group__main {
+ display: flex;
+ flex: 1;
+ flex-wrap: wrap;
+ row-gap: var(--pf-v6-c-label-group__main--RowGap);
+ column-gap: var(--pf-v6-c-label-group__main--ColumnGap);
+ align-items: baseline;
+ min-width: var(--pf-v6-c-label-group__main--MinWidth);
+}
+
+.pf-v6-c-label-group__list {
+ display: inline-flex;
+ flex-wrap: wrap;
+ row-gap: var(--pf-v6-c-label-group__list--RowGap);
+ column-gap: var(--pf-v6-c-label-group__list--ColumnGap);
+ min-width: var(--pf-v6-c-label-group__list--MinWidth);
+}
+
+.pf-v6-c-label-group__list-item {
+ display: inline-flex;
+ max-width: var(--pf-v6-c-label-group__list-item--MaxWidth);
+}
+
+.pf-v6-c-label-group__label {
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ max-width: var(--pf-v6-c-label-group__label--MaxWidth);
+}
+
+.pf-v6-c-label-group__close {
+ display: flex;
+ align-self: flex-start;
+}
+.pf-v6-c-label-group__close .pf-v6-c-button {
+ --pf-v6-c-button--FontSize: var(--pf-v6-c-label-group__close--c-button--FontSize);
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockStart: var(--pf-v6-c-label-group__close--c-button--PaddingBlockStart);
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineEnd: var(--pf-v6-c-label-group__close--c-button--PaddingInlineEnd);
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockEnd: var(--pf-v6-c-label-group__close--c-button--PaddingBlockEnd);
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineStart: var(--pf-v6-c-label-group__close--c-button--PaddingInlineStart);
+}
+
+.pf-v6-c-label-group__textarea {
+ min-width: var(--pf-v6-c-label-group__textarea--MinWidth);
+ padding-block-start: var(--pf-v6-c-label-group__textarea--PaddingBlockStart);
+ padding-block-end: var(--pf-v6-c-label-group__textarea--PaddingBlockEnd);
+ padding-inline-start: var(--pf-v6-c-label-group__textarea--PaddingInlineStart);
+ padding-inline-end: var(--pf-v6-c-label-group__textarea--PaddingInlineEnd);
+ white-space: nowrap;
+ resize: none;
+ border: 0;
+ -ms-overflow-style: none;
+ scrollbar-width: none;
+}
+.pf-v6-c-label-group__textarea::-webkit-scrollbar {
+ display: none;
+}
+
+.pf-v6-c-list {
+ --pf-v6-c-list--PaddingInlineStart: var(--pf-t--global--spacer--lg);
+ --pf-v6-c-list--ul--ListStyle: var(--pf-t--global--list-style);
+ --pf-v6-c-list--Gap: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-list--nested--PaddingBlockStart: var(--pf-v6-c-list--Gap);
+ --pf-v6-c-list--m-plain--PaddingInlineStart: 0;
+ --pf-v6-c-list--m-inline--PaddingInlineStart: 0;
+ --pf-v6-c-list--m-inline--ColumnGap: var(--pf-t--global--spacer--lg);
+ --pf-v6-c-list--m-inline--RowGap: var(--pf-t--global--spacer--xs);
+ --pf-v6-c-list--m-bordered--li--PaddingBlockStart: var(--pf-v6-c-list--Gap);
+ --pf-v6-c-list--m-bordered--li--BorderBlockStartColor: var(--pf-t--global--border--color--default);
+ --pf-v6-c-list--m-bordered--li--BorderBlockStartWidth: var(--pf-t--global--border--width--divider--default);
+ --pf-v6-c-list__item-icon--MinWidth: var(--pf-t--global--icon--size--sm);
+ --pf-v6-c-list__item-icon--MarginBlockStart: var(--pf-t--global--spacer--xs);
+ --pf-v6-c-list__item-icon--MarginInlineEnd: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-list__item-icon--Color: var(--pf-t--global--icon--color--regular);
+ --pf-v6-c-list__item-icon--FontSize: var(--pf-t--global--icon--size--sm);
+ --pf-v6-c-list--m-icon-lg__item-icon--MinWidth: var(--pf-t--global--icon--size--lg);
+ --pf-v6-c-list--m-icon-lg__item-icon--MarginInlineEnd: var(--pf-t--global--spacer--md);
+ --pf-v6-c-list--m-icon-lg__item-icon--FontSize: var(--pf-t--global--icon--size--lg);
+}
+
+.pf-v6-c-list {
+ display: flex;
+ flex-direction: column;
+ gap: var(--pf-v6-c-list--Gap);
+ padding-inline-start: var(--pf-v6-c-list--PaddingInlineStart);
+}
+.pf-v6-c-list .pf-v6-c-list {
+ padding-block-start: var(--pf-v6-c-list--nested--PaddingBlockStart);
+}
+ul.pf-v6-c-list {
+ list-style: var(--pf-v6-c-list--ul--ListStyle);
+}
+
+.pf-v6-c-list.pf-m-icon-lg {
+ --pf-v6-c-list__item-icon--MinWidth: var(--pf-v6-c-list--m-icon-lg__item-icon--MinWidth);
+ --pf-v6-c-list__item-icon--MarginBlockStart: 0;
+ --pf-v6-c-list__item-icon--MarginInlineEnd: var(--pf-v6-c-list--m-icon-lg__item-icon--MarginInlineEnd);
+ --pf-v6-c-list__item-icon--FontSize: var(--pf-v6-c-list--m-icon-lg__item-icon--FontSize);
+}
+.pf-v6-c-list.pf-m-plain {
+ --pf-v6-c-list--PaddingInlineStart: var(--pf-v6-c-list--m-plain--PaddingInlineStart);
+ list-style: none;
+}
+.pf-v6-c-list.pf-m-inline {
+ --pf-v6-c-list--PaddingInlineStart: var(--pf-v6-c-list--m-inline--PaddingInlineStart);
+ --pf-v6-c-list--Gap: var(--pf-v6-c-list--m-inline--RowGap) var(--pf-v6-c-list--m-inline--ColumnGap);
+ flex-direction: row;
+ flex-wrap: wrap;
+ list-style: none;
+}
+.pf-v6-c-list.pf-m-bordered > * + * {
+ padding-block-start: var(--pf-v6-c-list--m-bordered--li--PaddingBlockStart);
+ border-block-start: var(--pf-v6-c-list--m-bordered--li--BorderBlockStartWidth) solid var(--pf-v6-c-list--m-bordered--li--BorderBlockStartColor);
+}
+
+.pf-v6-c-list__item {
+ display: flex;
+}
+
+.pf-v6-c-list__item-icon {
+ flex-shrink: 0;
+ min-width: var(--pf-v6-c-list__item-icon--MinWidth);
+ margin-block-start: var(--pf-v6-c-list__item-icon--MarginBlockStart);
+ margin-inline-end: var(--pf-v6-c-list__item-icon--MarginInlineEnd);
+ font-size: var(--pf-v6-c-list__item-icon--FontSize);
+ line-height: 1;
+ color: var(--pf-v6-c-list__item-icon--Color);
+}
+
+.pf-v6-c-login {
+ --pf-v6-c-login--PaddingBlockStart: var(--pf-t--global--spacer--lg);
+ --pf-v6-c-login--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
+ --pf-v6-c-login__container--xl--GridColumnGap: var(--pf-t--global--spacer--3xl);
+ --pf-v6-c-login__container--MaxWidth: 31.25rem;
+ --pf-v6-c-login__container--xl--MaxWidth: none;
+ --pf-v6-c-login__container--PaddingInlineStart: 6.125rem;
+ --pf-v6-c-login__container--PaddingInlineEnd: 6.125rem;
+ --pf-v6-c-login__container--xl--GridTemplateColumns: 34rem minmax(auto, 34rem);
+ --pf-v6-c-login__header--MarginBlockEnd: var(--pf-t--global--spacer--md);
+ --pf-v6-c-login__header--PaddingInlineStart: var(--pf-t--global--spacer--md);
+ --pf-v6-c-login__header--PaddingInlineEnd: var(--pf-t--global--spacer--md);
+ --pf-v6-c-login__header--xl--MarginBlockEnd: var(--pf-t--global--spacer--2xl);
+ --pf-v6-c-login__header--xl--MarginBlockStart: var(--pf-t--global--spacer--3xl);
+ --pf-v6-c-login__header--c-brand--MarginBlockEnd: var(--pf-t--global--spacer--lg);
+ --pf-v6-c-login__header--c-brand--xl--MarginBlockEnd: var(--pf-t--global--spacer--2xl);
+ --pf-v6-c-login__main--BackgroundColor: var(--pf-t--global--background--color--primary--default);
+ --pf-v6-c-login__main--MarginBlockEnd: var(--pf-t--global--spacer--lg);
+ --pf-v6-c-login__main--BorderRadius: var(--pf-t--global--border--radius--large);
+ --pf-v6-c-login__main-header--PaddingBlockStart: var(--pf-t--global--spacer--2xl);
+ --pf-v6-c-login__main-header--PaddingInlineEnd: var(--pf-t--global--spacer--xl);
+ --pf-v6-c-login__main-header--PaddingBlockEnd: var(--pf-t--global--spacer--md);
+ --pf-v6-c-login__main-header--PaddingInlineStart: var(--pf-t--global--spacer--xl);
+ --pf-v6-c-login__main-header--md--PaddingInlineEnd: var(--pf-t--global--spacer--2xl);
+ --pf-v6-c-login__main-header--md--PaddingInlineStart: var(--pf-t--global--spacer--2xl);
+ --pf-v6-c-login__main-header--ColumnGap: var(--pf-t--global--spacer--md);
+ --pf-v6-c-login__main-header--RowGap: var(--pf-t--global--spacer--md);
+ --pf-v6-c-login__main-header-desc--MarginBlockEnd: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-login__main-header-desc--md--MarginBlockEnd: 0;
+ --pf-v6-c-login__main-header-desc--FontSize: var(--pf-t--global--font--size--body--default);
+ --pf-v6-c-login__main-body--PaddingInlineEnd: var(--pf-t--global--spacer--xl);
+ --pf-v6-c-login__main-body--PaddingBlockEnd: var(--pf-t--global--spacer--xl);
+ --pf-v6-c-login__main-body--PaddingInlineStart: var(--pf-t--global--spacer--xl);
+ --pf-v6-c-login__main-body--md--PaddingInlineEnd: var(--pf-t--global--spacer--2xl);
+ --pf-v6-c-login__main-body--md--PaddingInlineStart: var(--pf-t--global--spacer--2xl);
+ --pf-v6-c-login__main-footer--PaddingBlockEnd: var(--pf-t--global--spacer--3xl);
+ --pf-v6-c-login__main-footer--c-title--MarginBlockEnd: var(--pf-t--global--spacer--md);
+ --pf-v6-c-login__main-footer-links--PaddingBlockStart: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-login__main-footer-links--PaddingInlineEnd: var(--pf-t--global--spacer--3xl);
+ --pf-v6-c-login__main-footer-links--PaddingBlockEnd: var(--pf-t--global--spacer--xl);
+ --pf-v6-c-login__main-footer-links--PaddingInlineStart: var(--pf-t--global--spacer--3xl);
+ --pf-v6-c-login__main-footer-links--Gap: var(--pf-t--global--spacer--md);
+ --pf-v6-c-login__main-footer-links-item--c-button--FontSize: var(--pf-t--global--icon--size--xl);
+ --pf-v6-c-login__main-footer-band--PaddingBlockStart: var(--pf-t--global--spacer--lg);
+ --pf-v6-c-login__main-footer-band--PaddingInlineEnd: var(--pf-t--global--spacer--md);
+ --pf-v6-c-login__main-footer-band--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
+ --pf-v6-c-login__main-footer-band--PaddingInlineStart: var(--pf-t--global--spacer--md);
+ --pf-v6-c-login__main-footer-band--BorderBlockStartColor: var(--pf-t--global--border--color--default);
+ --pf-v6-c-login__main-footer-band--BorderBlockStartWidth: var(--pf-t--global--border--width--divider--default);
+ --pf-v6-c-login__main-footer-band-item--PaddingBlockStart: var(--pf-t--global--spacer--md);
+ --pf-v6-c-login__footer--PaddingInlineStart: var(--pf-t--global--spacer--md);
+ --pf-v6-c-login__footer--PaddingInlineEnd: var(--pf-t--global--spacer--md);
+ --pf-v6-c-login__footer--c-list--PaddingBlockStart: var(--pf-t--global--spacer--md);
+ --pf-v6-c-login__footer--c-list--xl--PaddingBlockStart: var(--pf-t--global--spacer--2xl);
+}
+@media (min-width: 75rem) {
+ .pf-v6-c-login {
+ --pf-v6-c-login__container--MaxWidth: var(--pf-v6-c-login__container--xl--MaxWidth);
+ }
+}
+@media (min-width: 36rem) {
+ .pf-v6-c-login {
+ --pf-v6-c-login__header--PaddingInlineEnd: 0;
+ --pf-v6-c-login__header--PaddingInlineStart: 0;
+ }
+}
+@media (min-width: 75rem) {
+ .pf-v6-c-login {
+ --pf-v6-c-login__header--MarginBlockEnd: var(--pf-v6-c-login__header--xl--MarginBlockEnd);
+ --pf-v6-c-login__header--c-brand--MarginBlockEnd: var(--pf-v6-c-login__header--c-brand--xl--MarginBlockEnd);
+ }
+}
+@media (min-width: 75rem) {
+ .pf-v6-c-login {
+ --pf-v6-c-login__main--MarginBlockEnd: 0;
+ }
+}
+@media (min-width: 48rem) {
+ .pf-v6-c-login {
+ --pf-v6-c-login__main-header--PaddingInlineEnd: var(--pf-v6-c-login__main-header--md--PaddingInlineEnd);
+ --pf-v6-c-login__main-header--PaddingInlineStart: var(--pf-v6-c-login__main-header--md--PaddingInlineStart);
+ --pf-v6-c-login__main-header-desc--MarginBlockEnd: var(--pf-v6-c-login__main-header-desc--md--MarginBlockEnd);
+ }
+}
+@media (min-width: 48rem) {
+ .pf-v6-c-login {
+ --pf-v6-c-login__main-body--PaddingInlineEnd: var(--pf-v6-c-login__main-body--md--PaddingInlineEnd);
+ --pf-v6-c-login__main-body--PaddingInlineStart: var(--pf-v6-c-login__main-body--md--PaddingInlineStart);
+ }
+}
+@media (min-width: 36rem) {
+ .pf-v6-c-login {
+ --pf-v6-c-login__footer--PaddingInlineEnd: 0;
+ --pf-v6-c-login__footer--PaddingInlineStart: 0;
+ }
+}
+@media (min-width: 75rem) {
+ .pf-v6-c-login {
+ --pf-v6-c-login__footer--c-list--PaddingBlockStart: var(--pf-v6-c-login__footer--c-list--xl--PaddingBlockStart);
+ }
+}
+
+.pf-v6-c-login {
+ display: flex;
+ justify-content: center;
+ min-height: 100vh;
+ padding-block-start: var(--pf-v6-c-login--PaddingBlockStart);
+ padding-block-end: var(--pf-v6-c-login--PaddingBlockEnd);
+}
+@media (min-width: 36rem) {
+ .pf-v6-c-login {
+ align-items: center;
+ }
+}
+
+.pf-v6-c-login__container {
+ width: 100%;
+ max-width: var(--pf-v6-c-login__container--MaxWidth);
+}
+@media (min-width: 75rem) {
+ .pf-v6-c-login__container {
+ display: grid;
+ grid-template-areas: "main header" "main footer" "main .";
+ grid-template-columns: var(--pf-v6-c-login__container--xl--GridTemplateColumns);
+ grid-column-gap: var(--pf-v6-c-login__container--xl--GridColumnGap);
+ justify-content: center;
+ padding-inline-start: var(--pf-v6-c-login__container--PaddingInlineStart);
+ padding-inline-end: var(--pf-v6-c-login__container--PaddingInlineEnd);
+ }
+}
+
+.pf-v6-c-login__header {
+ grid-area: header;
+ padding-inline-start: var(--pf-v6-c-login__header--PaddingInlineStart);
+ padding-inline-end: var(--pf-v6-c-login__header--PaddingInlineEnd);
+}
+@media (min-width: 75rem) {
+ .pf-v6-c-login__header {
+ margin-block-start: var(--pf-v6-c-login__header--xl--MarginBlockStart);
+ }
+}
+.pf-v6-c-login__header .pf-v6-c-brand {
+ margin-block-end: var(--pf-v6-c-login__header--c-brand--MarginBlockEnd);
+}
+
+.pf-v6-c-login__main {
+ grid-area: main;
+ align-self: start;
+ margin-block-end: var(--pf-v6-c-login__main--MarginBlockEnd);
+ background-color: var(--pf-v6-c-login__main--BackgroundColor);
+ border-radius: var(--pf-v6-c-login__main--BorderRadius);
+}
+.pf-v6-c-login__main > :first-child:not(.pf-v6-c-login__main-header) {
+ padding-block-start: var(--pf-v6-c-login__main-header--PaddingBlockStart);
+}
+.pf-v6-c-login__main > :last-child:not(.pf-v6-c-login__main-footer) {
+ padding-block-end: var(--pf-v6-c-login__main-footer--PaddingBlockEnd);
+}
+
+.pf-v6-c-login__main-header {
+ display: grid;
+ grid-template-columns: 100%;
+ row-gap: var(--pf-v6-c-login__main-header--RowGap);
+ column-gap: var(--pf-v6-c-login__main-header--ColumnGap);
+ align-items: center;
+ padding-block-start: var(--pf-v6-c-login__main-header--PaddingBlockStart);
+ padding-block-end: var(--pf-v6-c-login__main-header--PaddingBlockEnd);
+ padding-inline-start: var(--pf-v6-c-login__main-header--PaddingInlineStart);
+ padding-inline-end: var(--pf-v6-c-login__main-header--PaddingInlineEnd);
+}
+@media (min-width: 48rem) {
+ .pf-v6-c-login__main-header {
+ grid-template-columns: 1fr auto;
+ }
+}
+
+.pf-v6-c-login__main-header-utilities,
+.pf-v6-c-login__main-header .pf-v6-c-menu-toggle {
+ grid-row: auto;
+ grid-column: auto;
+}
+@media (min-width: 48rem) {
+ .pf-v6-c-login__main-header-utilities,
+ .pf-v6-c-login__main-header .pf-v6-c-menu-toggle {
+ grid-row: 1;
+ grid-column: 2/3;
+ }
+}
+
+.pf-v6-c-login__main-header-desc {
+ grid-column: 1/-1;
+ margin-block-end: var(--pf-v6-c-login__main-header-desc--MarginBlockEnd);
+ font-size: var(--pf-v6-c-login__main-header-desc--FontSize);
+}
+
+.pf-v6-c-login__main-body {
+ padding-block-end: var(--pf-v6-c-login__main-body--PaddingBlockEnd);
+ padding-inline-start: var(--pf-v6-c-login__main-body--PaddingInlineStart);
+ padding-inline-end: var(--pf-v6-c-login__main-body--PaddingInlineEnd);
+}
+
+.pf-v6-c-login__main-footer {
+ display: flex;
+ flex-wrap: wrap;
+}
+.pf-v6-c-login__main-footer .pf-v6-c-title {
+ margin-block-end: var(--pf-v6-c-login__main-footer--c-title--MarginBlockEnd);
+ text-align: center;
+}
+.pf-v6-c-login__main-footer > * {
+ flex-basis: 100%;
+}
+
+.pf-v6-c-login__main-footer-links {
+ display: flex;
+ flex-wrap: wrap;
+ gap: var(--pf-v6-c-login__main-footer-links--Gap);
+ justify-content: center;
+ padding-block-start: var(--pf-v6-c-login__main-footer-links--PaddingBlockStart);
+ padding-block-end: var(--pf-v6-c-login__main-footer-links--PaddingBlockEnd);
+ padding-inline-start: var(--pf-v6-c-login__main-footer-links--PaddingInlineStart);
+ padding-inline-end: var(--pf-v6-c-login__main-footer-links--PaddingInlineEnd);
+}
+
+.pf-v6-c-login__main-footer-links-item .pf-v6-c-button {
+ --pf-v6-c-button--FontSize: var(--pf-v6-c-login__main-footer-links-item--c-button--FontSize);
+}
+
+.pf-v6-c-login__main-footer-band {
+ padding-block-start: var(--pf-v6-c-login__main-footer-band--PaddingBlockStart);
+ padding-block-end: var(--pf-v6-c-login__main-footer-band--PaddingBlockEnd);
+ padding-inline-start: var(--pf-v6-c-login__main-footer-band--PaddingInlineStart);
+ padding-inline-end: var(--pf-v6-c-login__main-footer-band--PaddingInlineEnd);
+ text-align: center;
+ border-block-start: var(--pf-v6-c-login__main-footer-band--BorderBlockStartWidth) solid var(--pf-v6-c-login__main-footer-band--BorderBlockStartColor);
+}
+.pf-v6-c-login__main-footer-band > * + * {
+ padding-block-start: var(--pf-v6-c-login__main-footer-band-item--PaddingBlockStart);
+}
+
+.pf-v6-c-login__footer {
+ grid-area: footer;
+ padding-inline-start: var(--pf-v6-c-login__footer--PaddingInlineStart);
+ padding-inline-end: var(--pf-v6-c-login__footer--PaddingInlineEnd);
+}
+.pf-v6-c-login__footer .pf-v6-c-list a {
+ color: unset;
+}
+.pf-v6-c-login__footer .pf-v6-c-list:not(:only-child) {
+ padding-block-start: var(--pf-v6-c-login__footer--c-list--PaddingBlockStart);
+}
+
+.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--lg);
+ --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__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__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-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);
+ display: grid;
+ 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-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;
+}
+@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 .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);
+}
+
+.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);
+}
+
+.pf-v6-c-menu {
+ --pf-v6-c-menu--RowGap: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-menu--Width: auto;
+ --pf-v6-c-menu--MinWidth: auto;
+ --pf-v6-c-menu--PaddingBlockStart: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-menu--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-menu--BackgroundColor: var(--pf-t--global--background--color--floating--default);
+ --pf-v6-c-menu--BoxShadow: var(--pf-t--global--box-shadow--md);
+ --pf-v6-c-menu--Color: var(--pf-t--global--text--color--regular);
+ --pf-v6-c-menu--BorderRadius: var(--pf-t--global--border--radius--small);
+ --pf-v6-c-menu--OutlineOffset: calc(var(--pf-t--global--border--width--control--default) * -3);
+ --pf-v6-c-menu--ZIndex: var(--pf-t--global--z-index--sm);
+ --pf-v6-c-menu--button--disabled--Color: var(--pf-t--global--text--color--disabled);
+ --pf-v6-c-menu--icon--disabled--Color: var(--pf-t--global--icon--color--disabled);
+ --pf-v6-c-menu--TransitionDuration: 0s;
+ --pf-v6-c-menu--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
+ --pf-v6-c-menu--m-plain--BoxShadow: none;
+ --pf-v6-c-menu__content--RowGap: var(--pf-v6-c-menu--RowGap);
+ --pf-v6-c-menu__content--Height: auto;
+ --pf-v6-c-menu__content--MaxHeight: none;
+ --pf-v6-c-menu--m-scrollable__content--MaxHeight: 18.75rem;
+ --pf-v6-c-menu__search--PaddingBlockStart: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-menu__search--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-menu__search--PaddingInlineStart: var(--pf-t--global--spacer--md);
+ --pf-v6-c-menu__search--PaddingInlineEnd: var(--pf-t--global--spacer--md);
+ --pf-v6-c-menu__footer--BoxShadow: none;
+ --pf-v6-c-menu--m-scrollable__footer--BoxShadow: var(--pf-t--global--box-shadow--md--top);
+ --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--TransitionDuration: var(--pf-t--global--motion--duration--fade--short);
+ --pf-v6-c-menu__list-item--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
+ --pf-v6-c-menu__list-item--TransitionProperty: background-color;
+ --pf-v6-c-menu__list-item--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
+ --pf-v6-c-menu__list-item--m-danger--Color: var(--pf-t--global--text--color--status--danger--default);
+ --pf-v6-c-menu__list-item--m-load__item--Color: var(--pf-t--global--text--color--link--default);
+ --pf-v6-c-menu__list-item--has--menu-action--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
+ --pf-v6-c-menu__list--divider--MarginBlockStart: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-menu__list--divider--MarginBlockEnd: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-menu__item--PaddingBlockStart: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-menu__item--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-menu__item--PaddingInlineStart: var(--pf-t--global--spacer--lg);
+ --pf-v6-c-menu__item--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
+ --pf-v6-c-menu__item--FontSize: var(--pf-t--global--font--size--body--default);
+ --pf-v6-c-menu__item--LineHeight: var(--pf-t--global--font--line-height--body);
+ --pf-v6-c-menu__item--FontWeight: var(--pf-t--global--font--weight--body--default);
+ --pf-v6-c-menu__item--Color: var(--pf-t--global--text--color--regular);
+ --pf-v6-c-menu__item--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
+ --pf-v6-c-menu__item--m-disabled--Color: var(--pf-t--global--text--color--disabled);
+ --pf-v6-c-menu__header--PaddingBlockStart: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-menu__header--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-menu__header--PaddingInlineStart: var(--pf-t--global--spacer--lg);
+ --pf-v6-c-menu__header--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
+ --pf-v6-c-menu__group-title--PaddingBlockStart: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-menu__group-title--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-menu__group-title--PaddingInlineStart: var(--pf-t--global--spacer--lg);
+ --pf-v6-c-menu__group-title--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
+ --pf-v6-c-menu__breadcrumb--PaddingBlockStart: 0;
+ --pf-v6-c-menu__breadcrumb--PaddingBlockEnd: 0;
+ --pf-v6-c-menu__breadcrumb--PaddingInlineStart: var(--pf-t--global--spacer--lg);
+ --pf-v6-c-menu__breadcrumb--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
+ --pf-v6-c-menu__footer--PaddingBlockStart: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-menu__footer--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-menu__footer--PaddingInlineStart: var(--pf-t--global--spacer--lg);
+ --pf-v6-c-menu__footer--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
+ --pf-v6-c-menu__item-main--ColumnGap: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-menu__group-title--Color: var(--pf-t--global--text--color--subtle);
+ --pf-v6-c-menu__item-description--FontSize: var(--pf-t--global--font--size--body--sm);
+ --pf-v6-c-menu__item-description--Color: var(--pf-t--global--text--color--subtle);
+ --pf-v6-c-menu__item-action--FontSize: var(--pf-t--global--font--size--body--default);
+ --pf-v6-c-menu__item-action--icon--size: var(--pf-v6-c-menu__item-action--FontSize, var(--pf-t--global--icon--size--md));
+ --pf-v6-c-menu__item-action--m-favorited--Color: var(--pf-t--global--icon--color--favorite--clicked);
+ --pf-v6-c-menu__item-action--button--MinWidth: calc(var(--pf-v6-c-menu__item-action--icon--size) + var(--pf-t--global--spacer--sm) * 2);
+ --pf-v6-c-menu__item-select-icon--Color: var(--pf-t--global--icon--color--subtle);
+ --pf-v6-c-menu__item--m-selected__item-select-icon--Color: var(--pf-t--global--icon--color--brand--default);
+ --pf-v6-c-menu__item-external--Color: var(--pf-t--global--icon--color--brand--default);
+ --pf-v6-c-menu--m-flyout__menu--top-offset: 0px;
+ --pf-v6-c-menu--m-flyout__menu--left-offset: 0px;
+ --pf-v6-c-menu--m-flyout__menu--m-left--right-offset: 0px;
+ --pf-v6-c-menu--m-flyout__Zindex: var(--pf-t--global--z-index--sm);
+ --pf-v6-c-menu--m-flyout__menu--InsetBlockStart: calc(var(--pf-v6-c-menu__list--PaddingBlockStart) * -1 + var(--pf-v6-c-menu--m-flyout__menu--top-offset));
+ --pf-v6-c-menu--m-flyout__menu--InsetInlineEnd: auto;
+ --pf-v6-c-menu--m-flyout__menu--InsetBlockEnd: auto;
+ --pf-v6-c-menu--m-flyout__menu--InsetInlineStart: calc(100% + var(--pf-v6-c-menu--m-flyout__menu--left-offset));
+ --pf-v6-c-menu--m-flyout__menu--m-top--InsetBlockEnd: calc(var(--pf-v6-c-menu__list--PaddingBlockStart) * -1);
+ --pf-v6-c-menu--m-flyout__menu--m-left--InsetInlineEnd: calc(100% + var(--pf-v6-c-menu--m-flyout__menu--m-left--right-offset));
+ --pf-v6-c-menu--m-drilldown__content--TransitionDuration--height: var(--pf-t--global--motion--duration--slide-in--default);
+ --pf-v6-c-menu--m-drilldown__content--TransitionDuration--transform: var(--pf-t--global--motion--duration--slide-in--default);
+ --pf-v6-c-menu--m-drilldown__content--Transition: height var(--pf-v6-c-menu--m-drilldown__content--TransitionDuration--height);
+ --pf-v6-c-menu--m-drilldown--c-menu--InsetBlockStart: 0;
+ --pf-v6-c-menu--m-drilldown--c-menu--TransitionDuration--transform: 0s;
+ --pf-v6-c-menu--m-drilldown--c-menu--Transition: transform var(--pf-v6-c-menu--m-drilldown--c-menu--TransitionDuration--transform);
+ --pf-v6-c-menu--m-drilldown__list--TransitionDuration--transform: 0s;
+ --pf-v6-c-menu--m-drilldown__list--Transition: transform var(--pf-v6-c-menu--m-drilldown__list--TransitionDuration--transform);
+ --pf-v6-c-menu--m-drilled-in--c-menu__list-item--m-current-path--c-menu--ZIndex: var(--pf-t--global--z-index--xs);
+}
+@media (prefers-reduced-motion: no-preference) {
+ .pf-v6-c-menu {
+ --pf-v6-c-menu--TransitionDuration: var(--pf-t--global--motion--duration--fade--default);
+ }
+}
+@media (prefers-reduced-motion: no-preference) {
+ .pf-v6-c-menu {
+ --pf-v6-c-menu--m-drilldown__content--Transition: transform var(--pf-v6-c-menu--m-drilldown__content--TransitionDuration--transform), height var(--pf-v6-c-menu--m-drilldown__content--TransitionDuration--height);
+ }
+}
+@media (prefers-reduced-motion: no-preference) {
+ .pf-v6-c-menu {
+ --pf-v6-c-menu--m-drilldown--c-menu--TransitionDuration--transform: var(--pf-t--global--motion--duration--slide-in--default);
+ }
+}
+@media (prefers-reduced-motion: no-preference) {
+ .pf-v6-c-menu {
+ --pf-v6-c-menu--m-drilldown__list--TransitionDuration--transform: var(--pf-t--global--motion--duration--slide-in--default);
+ }
+}
+
+.pf-v6-c-menu__content,
+.pf-v6-c-menu__list-item,
+.pf-v6-c-menu__item-main,
+.pf-v6-c-menu__breadcrumb,
+.pf-v6-c-menu__item-check,
+.pf-v6-c-menu__item-action,
+.pf-v6-c-menu__item-action-icon {
+ display: flex;
+}
+
+.pf-v6-c-menu__list,
+.pf-v6-c-menu__group {
+ --pf-v6-hidden-visible--visible--Display: grid;
+ --pf-v6-hidden-visible--hidden--Display: none;
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
+ display: var(--pf-v6-hidden-visible--Display);
+}
+.pf-v6-c-menu__list.pf-m-hidden,
+.pf-v6-c-menu__group.pf-m-hidden {
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
+}
+@media screen and (min-width: 36rem) {
+ .pf-v6-c-menu__list.pf-m-hidden-on-sm,
+ .pf-v6-c-menu__group.pf-m-hidden-on-sm {
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
+ }
+ .pf-v6-c-menu__list.pf-m-visible-on-sm,
+ .pf-v6-c-menu__group.pf-m-visible-on-sm {
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
+ }
+}
+@media screen and (min-width: 48rem) {
+ .pf-v6-c-menu__list.pf-m-hidden-on-md,
+ .pf-v6-c-menu__group.pf-m-hidden-on-md {
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
+ }
+ .pf-v6-c-menu__list.pf-m-visible-on-md,
+ .pf-v6-c-menu__group.pf-m-visible-on-md {
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
+ }
+}
+@media screen and (min-width: 62rem) {
+ .pf-v6-c-menu__list.pf-m-hidden-on-lg,
+ .pf-v6-c-menu__group.pf-m-hidden-on-lg {
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
+ }
+ .pf-v6-c-menu__list.pf-m-visible-on-lg,
+ .pf-v6-c-menu__group.pf-m-visible-on-lg {
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
+ }
+}
+@media screen and (min-width: 75rem) {
+ .pf-v6-c-menu__list.pf-m-hidden-on-xl,
+ .pf-v6-c-menu__group.pf-m-hidden-on-xl {
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
+ }
+ .pf-v6-c-menu__list.pf-m-visible-on-xl,
+ .pf-v6-c-menu__group.pf-m-visible-on-xl {
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
+ }
+}
+@media screen and (min-width: 90.625rem) {
+ .pf-v6-c-menu__list.pf-m-hidden-on-2xl,
+ .pf-v6-c-menu__group.pf-m-hidden-on-2xl {
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
+ }
+ .pf-v6-c-menu__list.pf-m-visible-on-2xl,
+ .pf-v6-c-menu__group.pf-m-visible-on-2xl {
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
+ }
+}
+
+.pf-v6-c-menu__list,
+.pf-v6-c-menu__list-item,
+.pf-v6-c-menu__breadcrumb,
+.pf-v6-c-menu__footer {
+ position: relative;
+}
+
+.pf-v6-c-menu__list-item:is(.pf-m-disabled, :disabled, .pf-m-aria-disabled, [aria-disabled=true]),
+.pf-v6-c-menu__item-action:is(.pf-m-disabled, :disabled, .pf-m-aria-disabled, [aria-disabled=true]) {
+ --pf-v6-c-menu__item--Color: var(--pf-v6-c-menu__item--m-disabled--Color);
+ --pf-v6-c-menu__item-toggle-icon--Color: var(--pf-v6-c-menu--icon--disabled--Color);
+ --pf-v6-c-menu__item-external--Color: transparent;
+ --pf-v6-c-menu__item-select-icon--Color: transparent;
+ --pf-v6-c-menu__item-description--Color: var(--pf-v6-c-menu--icon--disabled--Color);
+ --pf-v6-c-menu__list-item--BackgroundColor: transparent;
+ --pf-v6-c-menu__list-item--hover--BackgroundColor: transparent;
+}
+.pf-v6-c-menu__list-item:is(.pf-m-disabled, :disabled),
+.pf-v6-c-menu__item-action:is(.pf-m-disabled, :disabled) {
+ pointer-events: none;
+}
+.pf-v6-c-menu__list-item.pf-m-aria-disabled .pf-v6-c-menu__item,
+.pf-v6-c-menu__item-action.pf-m-aria-disabled .pf-v6-c-menu__item {
+ cursor: default;
+}
+
+[class*=pf-v6-c-menu]:is([hidden]) {
+ display: none;
+}
+
+.pf-v6-c-menu {
+ display: grid;
+ row-gap: var(--pf-v6-c-menu--RowGap);
+ width: var(--pf-v6-c-menu--Width);
+ min-width: var(--pf-v6-c-menu--MinWidth);
+ padding-block-start: var(--pf-v6-c-menu--PaddingBlockStart);
+ padding-block-end: var(--pf-v6-c-menu--PaddingBlockEnd);
+ overflow: hidden;
+ color: var(--pf-v6-c-menu--Color);
+ background-color: var(--pf-v6-c-menu--BackgroundColor);
+ border-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;
+}
+.pf-v6-c-menu.pf-m-drilldown.pf-m-drilled-in > .pf-v6-c-menu__content > .pf-v6-c-menu__list,
+.pf-v6-c-menu.pf-m-drilldown.pf-m-drilled-in > .pf-v6-c-menu__list {
+ transform: translateX(-100%);
+}
+:where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-menu.pf-m-drilldown.pf-m-drilled-in > .pf-v6-c-menu__content > .pf-v6-c-menu__list, .pf-v6-c-menu.pf-m-drilldown.pf-m-drilled-in > .pf-v6-c-menu__list {
+ transform: translateX(calc(-100% * var(--pf-v6-global--inverse--multiplier)));
+}
+
+.pf-v6-c-menu.pf-m-drilldown > .pf-v6-c-menu__content .pf-v6-c-menu {
+ position: absolute;
+ inset-block-start: var(--pf-v6-c-menu--m-drilldown--c-menu--InsetBlockStart);
+ inset-inline-start: 100%;
+ width: 100%;
+ box-shadow: none;
+ transition: var(--pf-v6-c-menu--m-drilldown--c-menu--Transition);
+}
+.pf-v6-c-menu.pf-m-drilldown > .pf-v6-c-menu__content .pf-v6-c-menu.pf-m-drilled-in {
+ transform: translateX(-100%);
+}
+:where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-menu.pf-m-drilldown > .pf-v6-c-menu__content .pf-v6-c-menu.pf-m-drilled-in {
+ transform: translateX(calc(-100% * var(--pf-v6-global--inverse--multiplier)));
+}
+
+.pf-v6-c-menu.pf-m-drilldown .pf-v6-c-menu__list {
+ overflow: hidden;
+ visibility: visible;
+ transition: var(--pf-v6-c-menu--m-drilldown__list--Transition);
+}
+.pf-v6-c-menu.pf-m-drilldown .pf-v6-c-menu__list .pf-v6-c-menu__list {
+ --pf-v6-c-menu__list--PaddingBlockStart: 0;
+ --pf-v6-c-menu__list--PaddingBlockEnd: 0;
+}
+.pf-v6-c-menu.pf-m-drilldown .pf-v6-c-menu__list-item.pf-m-current-path .pf-v6-c-menu {
+ z-index: var(--pf-v6-c-menu--m-drilled-in--c-menu__list-item--m-current-path--c-menu--ZIndex);
+}
+.pf-v6-c-menu.pf-m-drilldown .pf-v6-c-menu__list-item.pf-m-current-path > .pf-v6-c-menu {
+ overflow: visible;
+}
+.pf-v6-c-menu.pf-m-drilldown .pf-v6-c-menu__list-item.pf-m-static > .pf-v6-c-menu {
+ position: static;
+}
+.pf-v6-c-menu.pf-m-drilldown .pf-v6-c-menu__list-item.pf-m-static:hover {
+ background-color: transparent;
+}
+.pf-v6-c-menu.pf-m-drilldown .pf-v6-c-menu__list-item:not(.pf-m-current-path) .pf-v6-c-menu {
+ display: none;
+}
+.pf-v6-c-menu.pf-m-drilldown .pf-v6-c-menu__item {
+ outline-offset: var(--pf-v6-c-menu--OutlineOffset);
+}
+.pf-v6-c-menu.pf-m-drilled-in > .pf-v6-c-menu__content > .pf-v6-c-menu__list {
+ overflow: visible;
+ visibility: hidden;
+}
+.pf-v6-c-menu.pf-m-drilled-in > .pf-v6-c-menu__content > .pf-v6-c-menu__list > .pf-v6-c-divider,
+.pf-v6-c-menu.pf-m-drilled-in > .pf-v6-c-menu__content > .pf-v6-c-menu__list > .pf-v6-c-menu__list-item:not(.pf-m-current-path) {
+ display: none;
+}
+.pf-v6-c-menu.pf-m-drilled-in > .pf-v6-c-menu__content > .pf-v6-c-menu__list > .pf-v6-c-menu__list-item.pf-m-current-path {
+ visibility: hidden;
+}
+.pf-v6-c-menu.pf-m-plain {
+ --pf-v6-c-menu--BoxShadow: var(--pf-v6-c-menu--m-plain--BoxShadow);
+}
+.pf-v6-c-menu.pf-m-scrollable {
+ --pf-v6-c-menu__content--MaxHeight: var(--pf-v6-c-menu--m-scrollable__content--MaxHeight);
+ --pf-v6-c-menu__footer--BoxShadow: var(--pf-v6-c-menu--m-scrollable__footer--BoxShadow);
+ --pf-v6-c-menu__footer--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);
+ 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);
+ 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.pf-m-focus .pf-v6-c-menu__item-select-icon,
+.pf-v6-c-menu__list-item.pf-m-focus .pf-v6-c-menu__item-external-icon, .pf-v6-c-menu__list-item:focus-within .pf-v6-c-menu__item-select-icon,
+.pf-v6-c-menu__list-item:focus-within .pf-v6-c-menu__item-external-icon, .pf-v6-c-menu__list-item:has(> :hover) .pf-v6-c-menu__item-select-icon,
+.pf-v6-c-menu__list-item:has(> :hover) .pf-v6-c-menu__item-external-icon {
+ opacity: 1;
+}
+
+.pf-v6-c-menu__item {
+ flex-basis: 100%;
+ flex-direction: column;
+ min-width: 0;
+ padding-block-start: var(--pf-v6-c-menu__item--PaddingBlockStart);
+ padding-block-end: var(--pf-v6-c-menu__item--PaddingBlockEnd);
+ padding-inline-start: var(--pf-v6-c-menu__item--PaddingInlineStart);
+ padding-inline-end: var(--pf-v6-c-menu__item--PaddingInlineEnd);
+ font-size: var(--pf-v6-c-menu__item--FontSize);
+ font-weight: var(--pf-v6-c-menu__item--FontWeight);
+ line-height: var(--pf-v6-c-menu__item--LineHeight);
+ color: var(--pf-v6-c-menu__item--Color);
+ text-align: start;
+ text-decoration-line: none;
+ background-color: var(--pf-v6-c-menu__item--BackgroundColor);
+ border: 0;
+ outline-offset: var(--pf-v6-c-menu--OutlineOffset);
+ --pf-v6-hidden-visible--visible--Display: flex;
+ --pf-v6-hidden-visible--hidden--Display: none;
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
+ display: var(--pf-v6-hidden-visible--Display);
+}
+.pf-v6-c-menu__item.pf-m-hidden {
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
+}
+@media screen and (min-width: 36rem) {
+ .pf-v6-c-menu__item.pf-m-hidden-on-sm {
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
+ }
+ .pf-v6-c-menu__item.pf-m-visible-on-sm {
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
+ }
+}
+@media screen and (min-width: 48rem) {
+ .pf-v6-c-menu__item.pf-m-hidden-on-md {
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
+ }
+ .pf-v6-c-menu__item.pf-m-visible-on-md {
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
+ }
+}
+@media screen and (min-width: 62rem) {
+ .pf-v6-c-menu__item.pf-m-hidden-on-lg {
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
+ }
+ .pf-v6-c-menu__item.pf-m-visible-on-lg {
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
+ }
+}
+@media screen and (min-width: 75rem) {
+ .pf-v6-c-menu__item.pf-m-hidden-on-xl {
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
+ }
+ .pf-v6-c-menu__item.pf-m-visible-on-xl {
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
+ }
+}
+@media screen and (min-width: 90.625rem) {
+ .pf-v6-c-menu__item.pf-m-hidden-on-2xl {
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
+ }
+ .pf-v6-c-menu__item.pf-m-visible-on-2xl {
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
+ }
+}
+:where(label).pf-v6-c-menu__item {
+ cursor: pointer;
+}
+
+.pf-v6-c-menu__item.pf-m-selected {
+ --pf-v6-c-menu__item-select-icon--Color: var(--pf-v6-c-menu__item--m-selected__item-select-icon--Color);
+}
+.pf-v6-c-menu__item:is(:hover, :focus, .pf-m-selected) .pf-v6-c-menu__item-select-icon,
+.pf-v6-c-menu__item:is(:hover, :focus, .pf-m-selected) .pf-v6-c-menu__item-external-icon {
+ opacity: 1;
+}
+.pf-v6-c-menu__item:is(:hover, :focus, .pf-m-selected) .pf-v6-c-menu__item-external-icon {
+ color: var(--pf-v6-c-menu__item-external--Color);
+}
+
+.pf-v6-c-menu__item-select-icon {
+ color: var(--pf-v6-c-menu__item-select-icon--Color);
+}
+
+.pf-v6-c-menu__item-main {
+ column-gap: var(--pf-v6-c-menu__item-main--ColumnGap);
+ align-items: center;
+ width: 100%;
+}
+
+.pf-v6-c-menu__item-text {
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ flex-grow: 1;
+}
+
+.pf-v6-c-menu__group-title {
+ padding-block-start: var(--pf-v6-c-menu__group-title--PaddingBlockStart);
+ padding-block-end: var(--pf-v6-c-menu__group-title--PaddingBlockEnd);
+ padding-inline-start: var(--pf-v6-c-menu__group-title--PaddingInlineStart);
+ padding-inline-end: var(--pf-v6-c-menu__group-title--PaddingInlineEnd);
+ font-size: var(--pf-v6-c-menu__group-title--FontSize, inherit);
+ font-weight: var(--pf-v6-c-menu__group-title--FontWeight, inherit);
+ color: var(--pf-v6-c-menu__group-title--Color);
+}
+
+.pf-v6-c-menu__item-description {
+ font-size: var(--pf-v6-c-menu__item-description--FontSize);
+ color: var(--pf-v6-c-menu__item-description--Color);
+ word-break: break-word;
+}
+
+.pf-v6-c-menu__item-check .pf-v6-c-check {
+ --pf-v6-c-check__input--TranslateY: none;
+}
+
+.pf-v6-c-menu__item-toggle-icon {
+ color: var(--pf-v6-c-menu__item-toggle-icon--Color, inherit);
+}
+:where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-menu__item-toggle-icon {
+ scale: -1 1;
+}
+
+.pf-v6-c-menu__item-icon {
+ color: var(--pf-v6-c-menu__item--icon--Color, inherit);
+}
+
+.pf-v6-c-menu__item-select-icon,
+.pf-v6-c-menu__item-external-icon {
+ opacity: 0;
+}
+
+.pf-v6-c-menu__item-toggle-icon.pf-m-favorited, .pf-v6-c-menu__item-toggle-icon.pf-m-favorited:hover, .pf-v6-c-menu__item-toggle-icon.pf-m-favorited .pf-v6-c-button:not(.pf-m-favorited),
+.pf-v6-c-menu__item-action.pf-m-favorited,
+.pf-v6-c-menu__item-action.pf-m-favorited:hover,
+.pf-v6-c-menu__item-action.pf-m-favorited .pf-v6-c-button:not(.pf-m-favorited) {
+ --pf-v6-c-button--m-plain__icon--Color: var(--pf-v6-c-menu__item-action--m-favorited--Color);
+}
+.pf-v6-c-menu__item-toggle-icon.pf-m-favorited:is(:hover, :focus), .pf-v6-c-menu__item-toggle-icon.pf-m-favorited:hover:is(:hover, :focus), .pf-v6-c-menu__item-toggle-icon.pf-m-favorited .pf-v6-c-button:not(.pf-m-favorited):is(:hover, :focus),
+.pf-v6-c-menu__item-action.pf-m-favorited:is(:hover, :focus),
+.pf-v6-c-menu__item-action.pf-m-favorited:hover:is(:hover, :focus),
+.pf-v6-c-menu__item-action.pf-m-favorited .pf-v6-c-button:not(.pf-m-favorited):is(:hover, :focus) {
+ --pf-v6-c-button--hover__icon--Color: var(--pf-v6-c-menu__item-action--m-favorited--Color);
+}
+
+.pf-v6-c-menu__breadcrumb {
+ --pf-v6-c-breadcrumb__item--FontSize: var(--pf-v6-c-menu__breadcrumb--FontSize);
+ padding-block-start: var(--pf-v6-c-menu__breadcrumb--PaddingBlockStart);
+ padding-block-end: var(--pf-v6-c-menu__breadcrumb--PaddingBlockEnd);
+ padding-inline-start: var(--pf-v6-c-menu__breadcrumb--PaddingInlineStart);
+ padding-inline-end: var(--pf-v6-c-menu__breadcrumb--PaddingInlineEnd);
+}
+.pf-v6-c-menu__breadcrumb .pf-v6-c-menu {
+ min-width: auto;
+ padding-block-start: var(--pf-v6-c-menu--PaddingBlockStart);
+ padding-block-end: var(--pf-v6-c-menu--PaddingBlockEnd);
+}
+.pf-v6-c-menu__breadcrumb .pf-v6-c-menu__content {
+ height: auto;
+}
+.pf-v6-c-menu__breadcrumb .pf-v6-c-menu-toggle {
+ --pf-v6-c-menu-toggle--BorderWidth: 0;
+ --pf-v6-c-menu-toggle--BorderColor: transparent;
+ outline-offset: var(--pf-v6-c-menu--OutlineOffset);
+}
+
+.pf-v6-c-menu-toggle {
+ --pf-v6-c-menu-toggle--Gap: var(--pf-t--global--spacer--gap--text-to-element--default);
+ --pf-v6-c-menu-toggle--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--default);
+ --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
+ --pf-v6-c-menu-toggle--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--default);
+ --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
+ --pf-v6-c-menu-toggle--MinWidth: calc(var(--pf-v6-c-menu-toggle--FontSize) * var(--pf-v6-c-menu-toggle--LineHeight) + var(--pf-v6-c-menu-toggle--PaddingBlockStart) + var(--pf-v6-c-menu-toggle--PaddingBlockEnd));
+ --pf-v6-c-menu-toggle--FontSize: var(--pf-t--global--font--size--body--default);
+ --pf-v6-c-menu-toggle--Color: var(--pf-t--global--text--color--regular);
+ --pf-v6-c-menu-toggle--LineHeight: var(--pf-t--global--font--line-height--body);
+ --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-t--global--background--color--control--default);
+ --pf-v6-c-menu-toggle--BorderRadius: var(--pf-t--global--border--radius--small);
+ --pf-v6-c-menu-toggle--BorderColor: var(--pf-t--global--border--color--default);
+ --pf-v6-c-menu-toggle--BorderWidth: var(--pf-t--global--border--width--action--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--action--default);
+ --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--action--clicked);
+ --pf-v6-c-menu-toggle--expanded--BorderColor: var(--pf-t--global--border--color--clicked);
+ --pf-v6-c-menu-toggle--expanded__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
+ --pf-v6-c-menu-toggle--disabled--Color: var(--pf-t--global--text--color--on-disabled);
+ --pf-v6-c-menu-toggle--disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
+ --pf-v6-c-menu-toggle--disabled__toggle-icon--Color: var(--pf-t--global--icon--color--on-disabled);
+ --pf-v6-c-menu-toggle--disabled__status-icon--Color: var(--pf-t--global--icon--color--on-disabled);
+ --pf-v6-c-menu-toggle--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
+ --pf-v6-c-menu-toggle__icon--MinHeight: calc(var(--pf-v6-c-menu-toggle--FontSize) * var(--pf-v6-c-menu-toggle--LineHeight));
+ --pf-v6-c-menu-toggle__icon--Color: var(--pf-t--global--icon--color--regular);
+ --pf-v6-c-menu-toggle__icon--TransitionDelay: 0s;
+ --pf-v6-c-menu-toggle__icon--TransitionDuration: 0s;
+ --pf-v6-c-menu-toggle__icon--TransitionProperty: none;
+ --pf-v6-c-menu-toggle--hover__icon--TransitionDelay: 0s;
+ --pf-v6-c-menu-toggle--hover__icon--TransitionDuration: 0s;
+ --pf-v6-c-menu-toggle--hover__icon--TransitionProperty: none;
+ --pf-v6-c-menu-toggle__icon--Rotate: 0deg;
+ --pf-v6-c-menu-toggle--hover__icon--Rotate: 0deg;
+ --pf-v6-c-menu-toggle__toggle-icon--MinHeight: calc(var(--pf-v6-c-menu-toggle--FontSize) * var(--pf-v6-c-menu-toggle--LineHeight));
+ --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
+ --pf-v6-c-menu-toggle--m-primary--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--default);
+ --pf-v6-c-menu-toggle--m-primary--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--default);
+ --pf-v6-c-menu-toggle--m-primary--Color: var(--pf-t--global--text--color--on-brand--default);
+ --pf-v6-c-menu-toggle--m-primary--BackgroundColor: var(--pf-t--global--color--brand--default);
+ --pf-v6-c-menu-toggle--m-primary--BorderRadius: var(--pf-t--global--border--radius--pill);
+ --pf-v6-c-menu-toggle--m-primary--BorderColor: transparent;
+ --pf-v6-c-menu-toggle--m-primary--hover--Color: var(--pf-t--global--text--color--on-brand--hover);
+ --pf-v6-c-menu-toggle--m-primary--hover--BackgroundColor: var(--pf-t--global--color--brand--hover);
+ --pf-v6-c-menu-toggle--m-primary--hover--BorderColor: transparent;
+ --pf-v6-c-menu-toggle--m-primary--expanded--Color: var(--pf-t--global--text--color--on-brand--clicked);
+ --pf-v6-c-menu-toggle--m-primary--expanded--BackgroundColor: var(--pf-t--global--color--brand--clicked);
+ --pf-v6-c-menu-toggle--m-primary--expanded--BorderColor: transparent;
+ --pf-v6-c-menu-toggle--m-primary__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--default);
+ --pf-v6-c-menu-toggle--m-primary--hover__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--hover);
+ --pf-v6-c-menu-toggle--m-primary--expanded__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--clicked);
+ --pf-v6-c-menu-toggle--m-primary--m-small--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--compact);
+ --pf-v6-c-menu-toggle--m-primary--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--compact);
+ --pf-v6-c-menu-toggle--m-secondary--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--default);
+ --pf-v6-c-menu-toggle--m-secondary--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--default);
+ --pf-v6-c-menu-toggle--m-secondary--BackgroundColor: transparent;
+ --pf-v6-c-menu-toggle--m-secondary--Color: var(--pf-t--global--text--color--brand--default);
+ --pf-v6-c-menu-toggle--m-secondary--BorderColor: var(--pf-t--global--border--color--brand--default);
+ --pf-v6-c-menu-toggle--m-secondary--BorderRadius: var(--pf-t--global--border--radius--pill);
+ --pf-v6-c-menu-toggle--m-secondary--hover--Color: var(--pf-t--global--text--color--brand--hover);
+ --pf-v6-c-menu-toggle--m-secondary--hover--BorderWidth: var(--pf-t--global--border--width--action--hover);
+ --pf-v6-c-menu-toggle--m-secondary--hover--BorderColor: var(--pf-t--global--border--color--brand--hover);
+ --pf-v6-c-menu-toggle--m-secondary--expanded--Color: var(--pf-t--global--text--color--brand--clicked);
+ --pf-v6-c-menu-toggle--m-secondary--expanded--BackgroundColor: transparent;
+ --pf-v6-c-menu-toggle--m-secondary--expanded--BorderWidth: var(--pf-t--global--border--width--action--clicked);
+ --pf-v6-c-menu-toggle--m-secondary--expanded--BorderColor: var(--pf-t--global--border--color--brand--clicked);
+ --pf-v6-c-menu-toggle--m-secondary__toggle-icon--Color: var(--pf-t--global--icon--color--brand--default);
+ --pf-v6-c-menu-toggle--m-secondary--hover__toggle-icon--Color: var(--pf-t--global--icon--color--brand--hover);
+ --pf-v6-c-menu-toggle--m-secondary--expanded__toggle-icon--Color: var(--pf-t--global--icon--color--brand--clicked);
+ --pf-v6-c-menu-toggle--m-secondary--m-small--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--compact);
+ --pf-v6-c-menu-toggle--m-secondary--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--compact);
+ --pf-v6-c-menu-toggle--m-full-height--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--spacious);
+ --pf-v6-c-menu-toggle--m-full-height--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--spacious);
+ --pf-v6-c-menu-toggle--m-split-button--child--disabled--Color: var(--pf-t--global--text--color--on-disabled);
+ --pf-v6-c-menu-toggle--m-split-button--child--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
+ --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartWidth: var(--pf-t--global--border--width--action--default);
+ --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor: var(--pf-t--global--border--color--default);
+ --pf-v6-c-menu-toggle--m-split-button--child--BorderRadius: var(--pf-t--global--border--radius--pill);
+ --pf-v6-c-menu-toggle--m-split-button--child--disabled--BorderInlineStartColor: var(--pf-t--global--icon--color--on-disabled);
+ --pf-v6-c-menu-toggle--m-split-button--pill--child--PaddingInlineStart--offset: var(--pf-t--global--spacer--control--horizontal--default);
+ --pf-v6-c-menu-toggle--m-split-button--pill--child--PaddingInlineEnd--offset: var(--pf-t--global--spacer--control--horizontal--default);
+ --pf-v6-c-menu-toggle--m-split-button--m-small--pill--child--PaddingInlineStart--offset: var(--pf-t--global--spacer--control--horizontal--compact);
+ --pf-v6-c-menu-toggle--m-split-button--m-small--pill--child--PaddingInlineEnd--offset: var(--pf-t--global--spacer--control--horizontal--compact);
+ --pf-v6-c-menu-toggle--m-split-button--m-primary--child--BackgroundColor: var(--pf-t--global--color--brand--default);
+ --pf-v6-c-menu-toggle--m-split-button--m-primary--child--hover--BackgroundColor: var(--pf-t--global--color--brand--hover);
+ --pf-v6-c-menu-toggle--m-split-button--m-primary--child--BorderInlineStartColor: var(--pf-t--global--border--color--default);
+ --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: transparent;
+ --pf-v6-c-menu-toggle--m-plain--BorderRadius: var(--pf-t--global--border--radius--small);
+ --pf-v6-c-menu-toggle--m-plain--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
+ --pf-v6-c-menu-toggle--m-plain--expanded--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
+ --pf-v6-c-menu-toggle--m-plain--disabled--Color: var(--pf-t--global--text--color--disabled);
+ --pf-v6-c-menu-toggle--m-plain--disabled__icon--Color: var(--pf-t--global--icon--color--disabled);
+ --pf-v6-c-menu-toggle--m-plain--disabled__toggle-icon--Color: var(--pf-t--global--icon--color--disabled);
+ --pf-v6-c-menu-toggle--m-plain--disabled--BackgroundColor: transparent;
+ --pf-v6-c-menu-toggle--m-plain--m-small--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--plain--compact);
+ --pf-v6-c-menu-toggle--m-plain--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--plain--compact);
+ --pf-v6-c-menu-toggle--m-typeahead__button--AlignSelf: stretch;
+ --pf-v6-c-menu-toggle--m-small--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--compact);
+ --pf-v6-c-menu-toggle--m-small--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--compact);
+ --pf-v6-c-menu-toggle--m-small--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--compact);
+ --pf-v6-c-menu-toggle--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--compact);
+ --pf-v6-c-menu-toggle__status-icon--Color: var(--pf-t--global--icon--color--regular);
+ --pf-v6-c-menu-toggle__status-icon--m-danger--TransitionDuration--Opacity: var(--pf-t--global--motion--duration--icon--default);
+ --pf-v6-c-menu-toggle__status-icon--m-danger--TransitionTimingFunction--Opacity: var(--pf-t--global--motion--timing-function--default);
+ --pf-v6-c-menu-toggle--m-success--BorderColor: var(--pf-t--global--border--color--status--success--default);
+ --pf-v6-c-menu-toggle--m-success__status-icon--Color: var(--pf-t--global--icon--color--status--success--default);
+ --pf-v6-c-menu-toggle--m-warning--BorderColor: var(--pf-t--global--border--color--status--warning--default);
+ --pf-v6-c-menu-toggle--m-warning__status-icon--Color: var(--pf-t--global--icon--color--status--warning--default);
+ --pf-v6-c-menu-toggle--m-danger--BorderColor: var(--pf-t--global--border--color--status--danger--default);
+ --pf-v6-c-menu-toggle--m-danger__status-icon--Color: var(--pf-t--global--icon--color--status--danger--default);
+ --pf-v6-c-menu-toggle--m-danger--AnimationDuration--Transform: var(--pf-t--global--motion--duration--fade--default);
+ --pf-v6-c-menu-toggle--m-danger--AnimationTimingFunction--Transform: var(--pf-t--global--motion--timing-function--default);
+ --pf-v6-c-menu-toggle--m-placeholder--Color: var(--pf-t--global--text--color--placeholder);
+ --pf-v6-c-menu-toggle__controls--Gap: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-menu-toggle--m-settings__icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--long);
+ --pf-v6-c-menu-toggle--m-settings__icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--accelerate);
+ --pf-v6-c-menu-toggle--m-settings--hover__icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--long);
+ --pf-v6-c-menu-toggle--m-settings--hover__icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate);
+ --pf-v6-c-menu-toggle--m-settings--hover__icon--Rotate: 60deg;
+}
+
+.pf-v6-c-menu-toggle {
+ position: relative;
+ display: inline-flex;
+ gap: var(--pf-v6-c-menu-toggle--Gap);
+ align-items: center;
+ justify-content: center;
+ min-width: var(--pf-v6-c-menu-toggle--MinWidth);
+ max-width: 100%;
+ padding-block-start: var(--pf-v6-c-menu-toggle--PaddingBlockStart);
+ padding-block-end: var(--pf-v6-c-menu-toggle--PaddingBlockEnd);
+ padding-inline-start: var(--pf-v6-c-menu-toggle--PaddingInlineStart);
+ padding-inline-end: var(--pf-v6-c-menu-toggle--PaddingInlineEnd);
+ font-size: var(--pf-v6-c-menu-toggle--FontSize);
+ line-height: var(--pf-v6-c-menu-toggle--LineHeight);
+ color: var(--pf-v6-c-menu-toggle--Color);
+ cursor: pointer;
+ background-color: var(--pf-v6-c-menu-toggle--BackgroundColor);
+ border: 0;
+ transition-timing-function: var(--pf-v6-c-menu-toggle--TransitionTimingFunction);
+ transition-duration: var(--pf-v6-c-menu-toggle--TransitionDuration);
+ transition-property: var(--pf-v6-c-menu-toggle--TransitionProperty);
+}
+.pf-v6-c-menu-toggle, .pf-v6-c-menu-toggle::before {
+ border-radius: var(--pf-v6-c-menu-toggle--BorderRadius);
+}
+.pf-v6-c-menu-toggle::before {
+ position: absolute;
+ inset-block-start: 0;
+ inset-block-end: 0;
+ inset-inline-start: 0;
+ inset-inline-end: 0;
+ z-index: var(--pf-v6-c-menu-toggle--border--ZIndex);
+ pointer-events: none;
+ content: "";
+ border: var(--pf-v6-c-menu-toggle--BorderWidth) solid var(--pf-v6-c-menu-toggle--BorderColor);
+ transition: inherit;
+}
+.pf-v6-c-menu-toggle.pf-m-primary {
+ --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-primary--PaddingInlineStart);
+ --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-primary--PaddingInlineEnd);
+ --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--m-primary--Color);
+ --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--m-primary--BackgroundColor);
+ --pf-v6-c-menu-toggle--BorderRadius: var(--pf-v6-c-menu-toggle--m-primary--BorderRadius);
+ --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-primary--BorderColor);
+ --pf-v6-c-menu-toggle--hover--Color: var(--pf-v6-c-menu-toggle--m-primary--hover--Color);
+ --pf-v6-c-menu-toggle--hover--BackgroundColor: var(--pf-v6-c-menu-toggle--m-primary--hover--BackgroundColor);
+ --pf-v6-c-menu-toggle--hover--BorderColor: var(--pf-v6-c-menu-toggle--m-primary--hover--BorderColor);
+ --pf-v6-c-menu-toggle--expanded--Color: var(--pf-v6-c-menu-toggle--m-primary--expanded--Color);
+ --pf-v6-c-menu-toggle--expanded--BackgroundColor: var(--pf-v6-c-menu-toggle--m-primary--expanded--BackgroundColor);
+ --pf-v6-c-menu-toggle--expanded--BorderColor: var(--pf-v6-c-menu-toggle--m-primary--expanded--BorderColor);
+ --pf-v6-c-menu-toggle--hover__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-primary--hover__toggle-icon--Color);
+ --pf-v6-c-menu-toggle--expanded__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-primary--expanded__toggle-icon--Color);
+ --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-primary__toggle-icon--Color);
+ --pf-v6-c-menu-toggle--m-small--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-primary--m-small--PaddingInlineStart);
+ --pf-v6-c-menu-toggle--m-small--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-primary--m-small--PaddingInlineEnd);
+}
+.pf-v6-c-menu-toggle.pf-m-secondary {
+ --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-secondary--PaddingInlineStart);
+ --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-secondary--PaddingInlineEnd);
+ --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--m-secondary--Color);
+ --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--m-secondary--BackgroundColor);
+ --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-secondary--BorderColor);
+ --pf-v6-c-menu-toggle--BorderRadius: var(--pf-v6-c-menu-toggle--m-secondary--BorderRadius);
+ --pf-v6-c-menu-toggle--hover--Color: var(--pf-v6-c-menu-toggle--m-secondary--hover--Color);
+ --pf-v6-c-menu-toggle--hover--BorderWidth: var(--pf-v6-c-menu-toggle--m-secondary--hover--BorderWidth);
+ --pf-v6-c-menu-toggle--hover--BorderColor: var(--pf-v6-c-menu-toggle--m-secondary--hover--BorderColor);
+ --pf-v6-c-menu-toggle--expanded--Color: var(--pf-v6-c-menu-toggle--m-secondary--expanded--Color);
+ --pf-v6-c-menu-toggle--expanded--BackgroundColor: var(--pf-v6-c-menu-toggle--m-secondary--expanded--BackgroundColor);
+ --pf-v6-c-menu-toggle--expanded--BorderWidth: var(--pf-v6-c-menu-toggle--m-secondary--expanded--BorderWidth);
+ --pf-v6-c-menu-toggle--hover__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-secondary--hover__toggle-icon--Color);
+ --pf-v6-c-menu-toggle--expanded__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-secondary--expanded__toggle-icon--Color);
+ --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-secondary__toggle-icon--Color);
+ --pf-v6-c-menu-toggle--m-small--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-secondary--m-small--PaddingInlineStart);
+ --pf-v6-c-menu-toggle--m-small--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-secondary--m-small--PaddingInlineEnd);
+}
+.pf-v6-c-menu-toggle.pf-m-full-height {
+ --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-full-height--PaddingInlineEnd);
+ --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-full-height--PaddingInlineStart);
+ --pf-v6-c-menu-toggle--BorderBlockStartWidth: var(--pf-v6-c-menu-toggle--m-full-height__toggle--BorderBlockStartWidth);
+ align-items: center;
+ height: 100%;
+}
+.pf-v6-c-menu-toggle.pf-m-full-width {
+ width: 100%;
+}
+.pf-v6-c-menu-toggle.pf-m-plain {
+ --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-plain--PaddingInlineStart);
+ --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-plain--PaddingInlineEnd);
+ --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--m-plain--Color);
+ --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--m-plain--BackgroundColor);
+ --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-plain--BorderColor);
+ --pf-v6-c-menu-toggle--BorderRadius: var(--pf-v6-c-menu-toggle--m-plain--BorderRadius);
+ --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--m-plain--BackgroundColor);
+ --pf-v6-c-menu-toggle--hover--BackgroundColor: var(--pf-v6-c-menu-toggle--m-plain--hover--BackgroundColor);
+ --pf-v6-c-menu-toggle--expanded--BackgroundColor: var(--pf-v6-c-menu-toggle--m-plain--expanded--BackgroundColor);
+ --pf-v6-c-menu-toggle--disabled--Color: var(--pf-v6-c-menu-toggle--m-plain--disabled--Color);
+ --pf-v6-c-menu-toggle--disabled__icon--Color: var(--pf-v6-c-menu-toggle--m-plain--disabled__icon--Color);
+ --pf-v6-c-menu-toggle--disabled__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-plain--disabled__icon--Color);
+ --pf-v6-c-menu-toggle--disabled--BackgroundColor: var(--pf-v6-c-menu-toggle--m-plain--disabled--BackgroundColor);
+ --pf-v6-c-menu-toggle--m-small--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-plain--m-small--PaddingInlineStart);
+ --pf-v6-c-menu-toggle--m-small--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-plain--m-small--PaddingInlineEnd);
+}
+.pf-v6-c-menu-toggle.pf-m-plain::before {
+ border: none;
+}
+.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--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--BorderColor: var(--pf-v6-c-menu-toggle--expanded--BorderColor);
+ --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-v6-c-menu-toggle--expanded__toggle-icon--Color);
+}
+.pf-v6-c-menu-toggle.pf-m-primary::before, .pf-v6-c-menu-toggle:is(:disabled, .pf-m-disabled)::before {
+ border: 0;
+}
+.pf-v6-c-menu-toggle.pf-m-small {
+ --pf-v6-c-menu-toggle--PaddingBlockStart: var(--pf-v6-c-menu-toggle--m-small--PaddingBlockStart);
+ --pf-v6-c-menu-toggle--PaddingBlockEnd: var(--pf-v6-c-menu-toggle--m-small--PaddingBlockEnd);
+ --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-small--PaddingInlineStart);
+ --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-small--PaddingInlineEnd);
+ --pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-small__button--toggle-icon--PaddingInlineStart);
+ --pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-small__button--toggle-icon--PaddingInlineEnd);
+ --pf-v6-c-menu-toggle--m-split-button--pill--child--PaddingInlineStart--offset: var(--pf-v6-c-menu-toggle--m-split-button--m-small--pill--child--PaddingInlineStart--offset);
+ --pf-v6-c-menu-toggle--m-split-button--pill--child--PaddingInlineEnd--offset: var(--pf-v6-c-menu-toggle--m-split-button--m-small--pill--child--PaddingInlineEnd--offset);
+}
+.pf-v6-c-menu-toggle.pf-m-success {
+ --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-success--BorderColor);
+ --pf-v6-c-menu-toggle__status-icon--Color: var(--pf-v6-c-menu-toggle--m-success__status-icon--Color);
+}
+.pf-v6-c-menu-toggle.pf-m-warning {
+ --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-warning--BorderColor);
+ --pf-v6-c-menu-toggle__status-icon--Color: var(--pf-v6-c-menu-toggle--m-warning__status-icon--Color);
+}
+.pf-v6-c-menu-toggle.pf-m-danger {
+ --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-danger--BorderColor);
+ --pf-v6-c-menu-toggle__status-icon--Color: var(--pf-v6-c-menu-toggle--m-danger__status-icon--Color);
+}
+@media screen and (prefers-reduced-motion: no-preference) {
+ .pf-v6-c-menu-toggle.pf-m-danger {
+ transform: translateX(var(--pf-v6-c-menu-toggle--m-danger--TranslateX, 0));
+ animation-name: pf-v6-c-menu-toggle-m-danger-motion;
+ animation-duration: var(--pf-v6-c-menu-toggle--m-danger--AnimationDuration--Transform);
+ animation-timing-function: var(--pf-v6-c-menu-toggle--m-danger--AnimationTimingFunction--Transform);
+ animation-fill-mode: both;
+ }
+}
+.pf-v6-c-menu-toggle.pf-m-danger .pf-v6-c-menu-toggle__status-icon {
+ animation-name: pf-v6-c-menu-toggle-status-icon-fade-in;
+ animation-duration: var(--pf-v6-c-menu-toggle__status-icon--m-danger--TransitionDuration--Opacity);
+ animation-timing-function: var(--pf-v6-c-menu-toggle__status-icon--m-danger--TransitionTimingFunction--Opacity);
+}
+@keyframes pf-v6-c-menu-toggle-status-icon-fade-in {
+ from {
+ opacity: 0;
+ }
+ to {
+ opacity: 1;
+ }
+}
+.pf-v6-c-menu-toggle.pf-m-settings {
+ --pf-v6-c-menu-toggle__icon--TransitionProperty: rotate;
+ --pf-v6-c-menu-toggle__icon--TransitionDuration: var(--pf-v6-c-menu-toggle--m-settings__icon--TransitionDuration);
+ --pf-v6-c-menu-toggle__icon--TransitionTimingFunction: var(--pf-v6-c-menu-toggle--m-settings__icon--TransitionTimingFunction);
+ --pf-v6-c-menu-toggle--hover__icon--TransitionProperty: rotate;
+ --pf-v6-c-menu-toggle--hover__icon--TransitionDuration: var(--pf-v6-c-menu-toggle--m-settings--hover__icon--TransitionDuration);
+ --pf-v6-c-menu-toggle--hover__icon--TransitionTimingFunction: var(--pf-v6-c-menu-toggle--m-settings--hover__icon--TransitionTimingFunction);
+ --pf-v6-c-menu-toggle--hover__icon--Rotate: var(--pf-v6-c-menu-toggle--m-settings--hover__icon--Rotate);
+}
+.pf-v6-c-menu-toggle.pf-m-placeholder {
+ --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--m-placeholder--Color);
+}
+.pf-v6-c-menu-toggle:is(:disabled, .pf-m-disabled) {
+ --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--disabled--Color);
+ --pf-v6-c-menu-toggle__icon--Color: var(--pf-v6-c-menu-toggle--disabled__icon--Color);
+ --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-v6-c-menu-toggle--disabled__toggle-icon--Color);
+ --pf-v6-c-menu-toggle__status-icon--Color: var(--pf-v6-c-menu-toggle--disabled__status-icon--Color);
+ --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--disabled--BackgroundColor);
+}
+.pf-v6-c-menu-toggle:is(:disabled, .pf-m-disabled),
+.pf-v6-c-menu-toggle:is(:disabled, .pf-m-disabled) .pf-v6-c-button {
+ pointer-events: none;
+}
+
+@property --pf-v6-c-menu-toggle--m-danger--TranslateX {
+ syntax: "";
+ inherits: false;
+ initial-value: 0;
+}
+@media (prefers-reduced-motion: no-preference) {
+ @keyframes pf-v6-c-menu-toggle-m-danger-motion {
+ 33% {
+ --pf-v6-c-menu-toggle--m-danger--TranslateX: -2px;
+ }
+ 66% {
+ --pf-v6-c-menu-toggle--m-danger--TranslateX: 3px;
+ }
+ }
+}
+.pf-v6-c-menu-toggle.pf-m-split-button {
+ --pf-v6-c-menu-toggle--Gap: 0;
+ --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor: var(--pf-v6-c-menu-toggle--BorderColor);
+ padding: 0;
+}
+.pf-v6-c-menu-toggle.pf-m-split-button > * {
+ position: relative;
+ padding-block-start: var(--pf-v6-c-menu-toggle--PaddingBlockStart);
+ padding-block-end: var(--pf-v6-c-menu-toggle--PaddingBlockEnd);
+ padding-inline-start: var(--pf-v6-c-menu-toggle--PaddingInlineStart);
+ padding-inline-end: var(--pf-v6-c-menu-toggle--PaddingInlineEnd);
+}
+.pf-v6-c-menu-toggle.pf-m-split-button > :first-child {
+ border-start-start-radius: var(--pf-v6-c-menu-toggle--BorderRadius);
+ border-end-start-radius: var(--pf-v6-c-menu-toggle--BorderRadius);
+}
+.pf-v6-c-menu-toggle.pf-m-split-button > :last-child {
+ border-start-end-radius: var(--pf-v6-c-menu-toggle--BorderRadius);
+ border-end-end-radius: var(--pf-v6-c-menu-toggle--BorderRadius);
+}
+.pf-v6-c-menu-toggle.pf-m-split-button > .pf-v6-c-check {
+ --pf-v6-c-check__label--Color: currentcolor;
+ --pf-v6-c-check__label--disabled--Color: currentcolor;
+ align-items: center;
+ align-self: stretch;
+}
+.pf-v6-c-menu-toggle.pf-m-split-button > .pf-v6-c-check .pf-v6-c-check__input {
+ --pf-v6-c-check__input--TranslateY: 0;
+ align-self: center;
+}
+.pf-v6-c-menu-toggle.pf-m-split-button > :not(:first-child) {
+ border-inline-start: var(--pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartWidth) solid var(--pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor);
+}
+.pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary {
+ --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor: var(--pf-v6-c-menu-toggle--m-split-button--m-primary--child--BorderInlineStartColor);
+}
+.pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary > .pf-v6-c-menu-toggle__button,
+.pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary > .pf-v6-c-check {
+ background-color: var(--pf-v6-c-menu-toggle--m-split-button--m-primary--child--BackgroundColor);
+}
+.pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary > .pf-v6-c-menu-toggle__button:is(:hover, :focus),
+.pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary > .pf-v6-c-check:is(:hover, :focus) {
+ --pf-v6-c-menu-toggle--m-split-button--m-primary--child--BackgroundColor: var(--pf-v6-c-menu-toggle--m-split-button--m-primary--child--hover--BackgroundColor);
+}
+.pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary.pf-m-expanded {
+ --pf-v6-c-menu-toggle--m-split-button--m-primary--child--BackgroundColor: var(--pf-v6-c-menu-toggle--m-split-button--m-primary--expanded--child--BackgroundColor);
+}
+.pf-v6-c-menu-toggle.pf-m-split-button.pf-m-secondary {
+ --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor: var(--pf-v6-c-menu-toggle--m-split-button--m-secondary--child--BorderInlineStartColor);
+}
+.pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary .pf-v6-c-menu-toggle__button:not(:has(.pf-v6-c-menu-toggle__controls:only-child)):first-child,
+.pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary .pf-v6-c-check:not(.pf-m-standalone):first-child, .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-secondary .pf-v6-c-menu-toggle__button:not(:has(.pf-v6-c-menu-toggle__controls:only-child)):first-child,
+.pf-v6-c-menu-toggle.pf-m-split-button.pf-m-secondary .pf-v6-c-check:not(.pf-m-standalone):first-child {
+ padding-inline-end: var(--pf-v6-c-menu-toggle--m-split-button--pill--child--PaddingInlineEnd--offset);
+}
+.pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary .pf-v6-c-menu-toggle__button:not(:has(.pf-v6-c-menu-toggle__controls:only-child)):last-child,
+.pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary .pf-v6-c-check:not(.pf-m-standalone):last-child, .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-secondary .pf-v6-c-menu-toggle__button:not(:has(.pf-v6-c-menu-toggle__controls:only-child)):last-child,
+.pf-v6-c-menu-toggle.pf-m-split-button.pf-m-secondary .pf-v6-c-check:not(.pf-m-standalone):last-child {
+ padding-inline-start: var(--pf-v6-c-menu-toggle--m-split-button--pill--child--PaddingInlineStart--offset);
+}
+.pf-v6-c-menu-toggle.pf-m-split-button:is(.pf-m-disabled, :disabled) {
+ --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor: var(--pf-v6-c-menu-toggle--m-split-button--child--disabled--BorderInlineStartColor);
+}
+.pf-v6-c-menu-toggle.pf-m-split-button:is(.pf-m-disabled, :disabled) > .pf-v6-c-menu-toggle__button,
+.pf-v6-c-menu-toggle.pf-m-split-button:is(.pf-m-disabled, :disabled) > .pf-v6-c-check {
+ color: var(--pf-v6-c-menu-toggle--m-split-button--child--disabled--Color);
+ background-color: var(--pf-v6-c-menu-toggle--m-split-button--child--disabled--BackgroundColor);
+}
+.pf-v6-c-menu-toggle.pf-m-split-button:is(.pf-m-disabled, :disabled)::before {
+ content: none;
+}
+
+.pf-v6-c-menu-toggle.pf-m-typeahead {
+ --pf-v6-c-menu-toggle__button--AlignSelf: var(--pf-v6-c-menu-toggle--m-typeahead__button--AlignSelf);
+ --pf-v6-c-menu-toggle--Gap: 0;
+ align-items: stretch;
+ padding: 0;
+}
+.pf-v6-c-menu-toggle.pf-m-typeahead .pf-v6-c-menu-toggle__button {
+ --pf-v6-c-menu-toggle__button--PaddingInlineEnd: 0;
+}
+.pf-v6-c-menu-toggle.pf-m-typeahead .pf-v6-c-menu-toggle__controls {
+ --pf-v6-c-menu-toggle__button--PaddingInlineEnd: 0;
+ display: flex;
+ align-items: stretch;
+}
+.pf-v6-c-menu-toggle.pf-m-typeahead .pf-v6-c-text-input-group {
+ --pf-v6-c-text-input-group__utilities--MarginInlineEnd: 0;
+ flex: 1;
+}
+
+.pf-v6-c-menu-toggle__button {
+ gap: var(--pf-v6-c-menu-toggle__button--Gap);
+ align-self: var(--pf-v6-c-menu-toggle__button--AlignSelf);
+ min-width: var(--pf-v6-c-menu-toggle__button--MinWidth);
+ padding-inline-start: var(--pf-v6-c-menu-toggle__button--PaddingInlineStart);
+ padding-inline-end: var(--pf-v6-c-menu-toggle__button--PaddingInlineEnd);
+ color: inherit;
+ background-color: var(--pf-v6-c-menu-toggle__button--BackgroundColor);
+ border: 0;
+}
+.pf-v6-c-menu-toggle__button.pf-m-text {
+ display: inline-flex;
+ align-items: baseline;
+}
+.pf-v6-c-menu-toggle.pf-m-split-button > .pf-v6-c-check.pf-m-standalone, .pf-v6-c-menu-toggle__button:has(> .pf-v6-c-menu-toggle__controls:only-child) {
+ padding-inline-start: var(--pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineStart);
+ padding-inline-end: var(--pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineEnd);
+}
+
+.pf-v6-c-menu-toggle__text {
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ min-width: 0;
+}
+
+.pf-v6-c-menu-toggle__count {
+ display: flex;
+ flex-wrap: nowrap;
+}
+
+.pf-v6-c-menu-toggle__icon.pf-m-avatar .pf-v6-c-avatar,
+.pf-v6-c-menu-toggle__icon.pf-m-avatar img,
+.pf-v6-c-menu-toggle__icon.pf-m-avatar svg, .pf-v6-c-menu-toggle:not(.pf-m-plain) .pf-v6-c-menu-toggle__icon {
+ margin-block-start: calc(var(--pf-v6-c-menu-toggle--PaddingBlockStart) * -1);
+ margin-block-end: calc(var(--pf-v6-c-menu-toggle--PaddingBlockEnd) * -1);
+}
+
+.pf-v6-c-menu-toggle__icon {
+ flex-shrink: 0;
+ transition-delay: var(--pf-v6-c-menu-toggle__icon--TransitionDelay);
+ transition-duration: var(--pf-v6-c-menu-toggle__icon--TransitionDuration);
+ transition-property: var(--pf-v6-c-menu-toggle__icon--TransitionProperty);
+ rotate: var(--pf-v6-c-menu-toggle__icon--Rotate);
+}
+.pf-v6-c-menu-toggle__icon :where(picture, img) {
+ vertical-align: middle;
+}
+
+.pf-v6-c-menu-toggle__controls {
+ display: flex;
+ gap: var(--pf-v6-c-menu-toggle__controls--Gap);
+ align-items: center;
+ justify-content: center;
+ margin-inline-start: auto;
+}
+
+.pf-v6-c-menu-toggle__toggle-icon {
+ min-height: var(--pf-v6-c-menu-toggle__toggle-icon--MinHeight);
+ color: var(--pf-v6-c-menu-toggle__toggle-icon--Color, inherit);
+}
+
+.pf-v6-c-menu-toggle__status-icon {
+ color: var(--pf-v6-c-menu-toggle__status-icon--Color, inherit);
+}
+
+.pf-v6-c-modal-box {
+ --pf-v6-c-modal-box--BackgroundColor: var(--pf-t--global--background--color--floating--default);
+ --pf-v6-c-modal-box--BorderRadius: var(--pf-t--global--border--radius--large);
+ --pf-v6-c-modal-box--BoxShadow: var(--pf-t--global--box-shadow--lg);
+ --pf-v6-c-modal-box--ZIndex: var(--pf-t--global--z-index--xl);
+ --pf-v6-c-modal-box--Width: 100%;
+ --pf-v6-c-modal-box--MaxWidth: calc(100% - var(--pf-t--global--spacer--xl));
+ --pf-v6-c-modal-box--m-sm--sm--MaxWidth: 35rem;
+ --pf-v6-c-modal-box--m-md--Width: 52.5rem;
+ --pf-v6-c-modal-box--m-lg--lg--MaxWidth: 70rem;
+ --pf-v6-c-modal-box--MaxHeight: calc(100% - var(--pf-t--global--spacer--2xl));
+ --pf-v6-c-modal-box--m-align-top--spacer: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-modal-box--m-align-top--xl--spacer: var(--pf-t--global--spacer--xl);
+ --pf-v6-c-modal-box--m-align-top--InsetBlockStart: var(--pf-v6-c-modal-box--m-align-top--spacer);
+ --pf-v6-c-modal-box--m-align-top--MaxHeight: calc(100% - min(var(--pf-v6-c-modal-box--m-align-top--spacer), var(--pf-t--global--spacer--2xl)) - var(--pf-v6-c-modal-box--m-align-top--spacer));
+ --pf-v6-c-modal-box--m-align-top--MaxWidth: calc(100% - min(var(--pf-v6-c-modal-box--m-align-top--spacer) * 2, var(--pf-t--global--spacer--xl)));
+ --pf-v6-c-modal-box--m-danger__title-icon--Color: var(--pf-t--global--icon--color--status--danger--default);
+ --pf-v6-c-modal-box--m-warning__title-icon--Color: var(--pf-t--global--icon--color--status--warning--default);
+ --pf-v6-c-modal-box--m-success__title-icon--Color: var(--pf-t--global--icon--color--status--success--default);
+ --pf-v6-c-modal-box--m-info__title-icon--Color: var(--pf-t--global--icon--color--status--info--default);
+ --pf-v6-c-modal-box--m-custom__title-icon--Color: var(--pf-t--global--icon--color--status--custom--default);
+ --pf-v6-c-modal-box__header--PaddingBlockStart: var(--pf-t--global--spacer--lg);
+ --pf-v6-c-modal-box__header--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-modal-box__header--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
+ --pf-v6-c-modal-box__header--PaddingInlineStart: var(--pf-t--global--spacer--lg);
+ --pf-v6-c-modal-box__header--Gap: var(--pf-t--global--spacer--md);
+ --pf-v6-c-modal-box__header-main--Gap: var(--pf-t--global--spacer--md);
+ --pf-v6-c-modal-box__header-main--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--default);
+ --pf-v6-c-modal-box__title--LineHeight: var(--pf-t--global--font--line-height--heading);
+ --pf-v6-c-modal-box__title--FontFamily: var(--pf-t--global--font--family--heading);
+ --pf-v6-c-modal-box__title--FontWeight: var(--pf-t--global--font--weight--heading--default);
+ --pf-v6-c-modal-box__title--FontSize: var(--pf-t--global--font--size--heading--md);
+ --pf-v6-c-modal-box__title-icon--MarginInlineEnd: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-modal-box__title-icon--Color: var(--pf-t--global--icon--color--regular);
+ --pf-v6-c-modal-box__description--FontSize: var(--pf-t--global--font--size--body--sm);
+ --pf-v6-c-modal-box__description--Color: var(--pf-t--global--text--color--subtle);
+ --pf-v6-c-modal-box__body--MinHeight: calc(var(--pf-t--global--font--size--body--default) * var(--pf-t--global--font--line-height--body));
+ --pf-v6-c-modal-box__body--PaddingBlockStart: var(--pf-t--global--spacer--lg);
+ --pf-v6-c-modal-box__body--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
+ --pf-v6-c-modal-box__body--PaddingInlineStart: var(--pf-t--global--spacer--lg);
+ --pf-v6-c-modal-box__body--last-child--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
+ --pf-v6-c-modal-box__header--body--PaddingBlockStart: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-modal-box__close--InsetBlockStart: var(--pf-v6-c-modal-box__header--PaddingBlockStart);
+ --pf-v6-c-modal-box__close--InsetInlineEnd: var(--pf-v6-c-modal-box__header--PaddingInlineEnd);
+ --pf-v6-c-modal-box__close--sibling--MarginInlineEnd: calc(var(--pf-t--global--spacer--xl) + var(--pf-t--global--spacer--sm));
+ --pf-v6-c-modal-box__footer--PaddingBlockStart: var(--pf-t--global--spacer--lg);
+ --pf-v6-c-modal-box__footer--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
+ --pf-v6-c-modal-box__footer--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
+ --pf-v6-c-modal-box__footer--PaddingInlineStart: var(--pf-t--global--spacer--lg);
+ --pf-v6-c-modal-box__footer--c-button--MarginInlineEnd: var(--pf-t--global--spacer--md);
+ --pf-v6-c-modal-box__footer--c-button--sm--MarginInlineEnd: calc(var(--pf-v6-c-modal-box__footer--c-button--MarginInlineEnd) / 2);
+}
+@media (min-width: 75rem) {
+ .pf-v6-c-modal-box {
+ --pf-v6-c-modal-box--m-align-top--spacer: var(--pf-v6-c-modal-box--m-align-top--xl--spacer);
+ }
+}
+
+.pf-v6-c-modal-box {
+ position: relative;
+ z-index: var(--pf-v6-c-modal-box--ZIndex);
+ display: flex;
+ flex-direction: column;
+ width: var(--pf-v6-c-modal-box--Width);
+ max-width: var(--pf-v6-c-modal-box--MaxWidth);
+ max-height: var(--pf-v6-c-modal-box--MaxHeight);
+ overflow: auto;
+ background-color: var(--pf-v6-c-modal-box--BackgroundColor);
+ border-radius: var(--pf-v6-c-modal-box--BorderRadius);
+ box-shadow: var(--pf-v6-c-modal-box--BoxShadow);
+}
+.pf-v6-c-modal-box.pf-m-sm {
+ --pf-v6-c-modal-box--Width: var(--pf-v6-c-modal-box--m-sm--sm--MaxWidth);
+}
+.pf-v6-c-modal-box.pf-m-md {
+ --pf-v6-c-modal-box--Width: var(--pf-v6-c-modal-box--m-md--Width);
+}
+.pf-v6-c-modal-box.pf-m-lg {
+ --pf-v6-c-modal-box--Width: var(--pf-v6-c-modal-box--m-lg--lg--MaxWidth);
+}
+.pf-v6-c-modal-box.pf-m-align-top {
+ inset-block-start: var(--pf-v6-c-modal-box--m-align-top--InsetBlockStart);
+ align-self: flex-start;
+ max-width: var(--pf-v6-c-modal-box--m-align-top--MaxWidth);
+ max-height: var(--pf-v6-c-modal-box--m-align-top--MaxHeight);
+}
+.pf-v6-c-modal-box__title.pf-m-danger, .pf-v6-c-modal-box.pf-m-danger {
+ --pf-v6-c-modal-box__title-icon--Color: var(--pf-v6-c-modal-box--m-danger__title-icon--Color);
+}
+
+.pf-v6-c-modal-box__title.pf-m-warning, .pf-v6-c-modal-box.pf-m-warning {
+ --pf-v6-c-modal-box__title-icon--Color: var(--pf-v6-c-modal-box--m-warning__title-icon--Color);
+}
+
+.pf-v6-c-modal-box__title.pf-m-success, .pf-v6-c-modal-box.pf-m-success {
+ --pf-v6-c-modal-box__title-icon--Color: var(--pf-v6-c-modal-box--m-success__title-icon--Color);
+}
+
+.pf-v6-c-modal-box__title.pf-m-custom, .pf-v6-c-modal-box.pf-m-custom {
+ --pf-v6-c-modal-box__title-icon--Color: var(--pf-v6-c-modal-box--m-custom__title-icon--Color);
+}
+
+.pf-v6-c-modal-box__title.pf-m-info, .pf-v6-c-modal-box.pf-m-info {
+ --pf-v6-c-modal-box__title-icon--Color: var(--pf-v6-c-modal-box--m-info__title-icon--Color);
+}
+
+.pf-v6-c-modal-box__close {
+ position: absolute;
+ inset-block-start: var(--pf-v6-c-modal-box__close--InsetBlockStart);
+ inset-inline-end: var(--pf-v6-c-modal-box__close--InsetInlineEnd);
+}
+.pf-v6-c-modal-box__close + * {
+ margin-inline-end: var(--pf-v6-c-modal-box__close--sibling--MarginInlineEnd);
+}
+
+.pf-v6-c-modal-box__header {
+ display: flex;
+ flex-direction: column;
+ flex-shrink: 0;
+ gap: var(--pf-v6-c-modal-box__header--Gap);
+ padding-block-start: var(--pf-v6-c-modal-box__header--PaddingBlockStart);
+ padding-block-end: var(--pf-v6-c-modal-box__header--PaddingBlockEnd);
+ padding-inline-start: var(--pf-v6-c-modal-box__header--PaddingInlineStart);
+ padding-inline-end: var(--pf-v6-c-modal-box__header--PaddingInlineEnd);
+}
+.pf-v6-c-modal-box__header.pf-m-help {
+ display: flex;
+ flex-direction: row;
+}
+.pf-v6-c-modal-box__header + .pf-v6-c-modal-box__body {
+ --pf-v6-c-modal-box__body--PaddingBlockStart: var(--pf-v6-c-modal-box__header--body--PaddingBlockStart);
+}
+
+.pf-v6-c-modal-box__header-main {
+ display: flex;
+ flex-direction: column;
+ flex-grow: 1;
+ gap: var(--pf-v6-c-modal-box__header-main--Gap);
+ min-width: 0;
+ padding-block-start: var(--pf-v6-c-modal-box__header-main--PaddingBlockStart);
+}
+
+.pf-v6-c-modal-box__title,
+.pf-v6-c-modal-box__title-text {
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+}
+
+.pf-v6-c-modal-box__title {
+ flex: 0 0 auto;
+ font-family: var(--pf-v6-c-modal-box__title--FontFamily);
+ font-size: var(--pf-v6-c-modal-box__title--FontSize);
+ font-weight: var(--pf-v6-c-modal-box__title--FontWeight);
+ line-height: var(--pf-v6-c-modal-box__title--LineHeight);
+}
+.pf-v6-c-modal-box__title.pf-m-icon {
+ display: flex;
+}
+
+.pf-v6-c-modal-box__title-icon {
+ margin-inline-end: var(--pf-v6-c-modal-box__title-icon--MarginInlineEnd);
+ color: var(--pf-v6-c-modal-box__title-icon--Color);
+}
+
+.pf-v6-c-modal-box__description {
+ padding-block-start: var(--pf-v6-c-modal-box__description--PaddingBlockStart);
+ font-size: var(--pf-v6-c-modal-box__description--FontSize);
+ color: var(--pf-v6-c-modal-box__description--Color);
+}
+
+.pf-v6-c-modal-box__body {
+ flex: 1 1 auto;
+ min-height: var(--pf-v6-c-modal-box__body--MinHeight);
+ padding-block-start: var(--pf-v6-c-modal-box__body--PaddingBlockStart);
+ padding-inline-start: var(--pf-v6-c-modal-box__body--PaddingInlineStart);
+ padding-inline-end: var(--pf-v6-c-modal-box__body--PaddingInlineEnd);
+ overflow-x: hidden;
+ overflow-y: auto;
+ overscroll-behavior: contain;
+ word-break: break-word;
+ -webkit-overflow-scrolling: touch;
+}
+.pf-v6-c-modal-box__body:last-child {
+ padding-block-end: var(--pf-v6-c-modal-box__body--last-child--PaddingBlockEnd);
+}
+
+.pf-v6-c-modal-box__footer {
+ display: flex;
+ flex: 0 0 auto;
+ align-items: center;
+ padding-block-start: var(--pf-v6-c-modal-box__footer--PaddingBlockStart);
+ padding-block-end: var(--pf-v6-c-modal-box__footer--PaddingBlockEnd);
+ padding-inline-start: var(--pf-v6-c-modal-box__footer--PaddingInlineStart);
+ padding-inline-end: var(--pf-v6-c-modal-box__footer--PaddingInlineEnd);
+}
+.pf-v6-c-modal-box__footer > .pf-v6-c-button:not(:last-child) {
+ margin-inline-end: var(--pf-v6-c-modal-box__footer--c-button--MarginInlineEnd);
+}
+@media screen and (min-width: 36rem) {
+ .pf-v6-c-modal-box__footer > .pf-v6-c-button:not(:last-child) {
+ --pf-v6-c-modal-box__footer--c-button--MarginInlineEnd: var(--pf-v6-c-modal-box__footer--c-button--sm--MarginInlineEnd);
+ }
+}
+
+.pf-v6-c-multiple-file-upload {
+ --pf-v6-c-multiple-file-upload--GridTemplateColumns: 1fr;
+ --pf-v6-c-multiple-file-upload--Gap: var(--pf-t--global--spacer--md);
+ --pf-v6-c-multiple-file-upload__main--TextAlign: center;
+ --pf-v6-c-multiple-file-upload__main--GridTemplateColumns: auto;
+ --pf-v6-c-multiple-file-upload__main--GridTemplateRows: auto;
+ --pf-v6-c-multiple-file-upload__main--GridTemplateAreas:
+ "title"
+ "upload"
+ "info";
+ --pf-v6-c-multiple-file-upload__main--PaddingBlockStart: var(--pf-t--global--spacer--xl);
+ --pf-v6-c-multiple-file-upload__main--PaddingInlineEnd: var(--pf-t--global--spacer--xl);
+ --pf-v6-c-multiple-file-upload__main--PaddingBlockEnd: var(--pf-t--global--spacer--xl);
+ --pf-v6-c-multiple-file-upload__main--PaddingInlineStart: var(--pf-t--global--spacer--xl);
+ --pf-v6-c-multiple-file-upload__main--BorderWidth: var(--pf-t--global--border--width--regular);
+ --pf-v6-c-multiple-file-upload__main--BorderStyle: dashed;
+ --pf-v6-c-multiple-file-upload__main--BorderColor: var(--pf-t--global--border--color--default);
+ --pf-v6-c-multiple-file-upload__main--BorderRadius: var(--pf-t--global--border--radius--medium);
+ --pf-v6-c-multiple-file-upload__title--Display: grid;
+ --pf-v6-c-multiple-file-upload__title--GridTemplateColumns: auto;
+ --pf-v6-c-multiple-file-upload__title--Gap: var(--pf-t--global--spacer--lg);
+ --pf-v6-c-multiple-file-upload__title-text--Color: var(--pf-t--global--text--color--regular);
+ --pf-v6-c-multiple-file-upload__title-text--FontFamily: var(--pf-t--global--font--family--heading);
+ --pf-v6-c-multiple-file-upload__title-text--FontSize: var(--pf-t--global--font--size--heading--sm);
+ --pf-v6-c-multiple-file-upload__title-text--FontWeight: var(--pf-t--global--font--weight--heading--default);
+ --pf-v6-c-multiple-file-upload__title-icon--Color: var(--pf-t--global--icon--color--regular);
+ --pf-v6-c-multiple-file-upload__title-icon--FontSize: var(--pf-t--global--icon--size--xl);
+ --pf-v6-c-multiple-file-upload__title-text-separator--Display: block;
+ --pf-v6-c-multiple-file-upload__title-text-separator--MarginBlockStart: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-multiple-file-upload__title-text-separator--MarginBlockEnd: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-multiple-file-upload__title-text-separator--Color: var(--pf-t--global--text--color--regular);
+ --pf-v6-c-multiple-file-upload__title-text-separator--FontFamily: var(--pf-t--global--font--family--body);
+ --pf-v6-c-multiple-file-upload__title-text-separator--FontSize: var(--pf-t--global--font--size--body--lg);
+ --pf-v6-c-multiple-file-upload__title-text-separator--FontWeight: var(--pf-t--global--font--weight--body--default);
+ --pf-v6-c-multiple-file-upload__info--FontSize: var(--pf-t--global--font--size--body--default);
+ --pf-v6-c-multiple-file-upload__info--Color: var(--pf-t--global--text--color--subtle);
+ --pf-v6-c-multiple-file-upload__info--MarginBlockStart: var(--pf-t--global--spacer--lg);
+ --pf-v6-c-multiple-file-upload--m-drag-over__main--BorderStyle: dashed;
+ --pf-v6-c-multiple-file-upload--m-drag-over__main--BorderColor: var(--pf-t--global--border--color--clicked);
+ --pf-v6-c-multiple-file-upload--m-horizontal--GridTemplateColumns: fit-content(100%);
+ --pf-v6-c-multiple-file-upload--m-horizontal__main--TextAlign: start;
+ --pf-v6-c-multiple-file-upload--m-horizontal__main--GridTemplateColumns: 1fr auto;
+ --pf-v6-c-multiple-file-upload--m-horizontal__main--GridTemplateAreas:
+ "title upload"
+ "info upload";
+ --pf-v6-c-multiple-file-upload--m-horizontal__main--Gap: var(--pf-t--global--spacer--sm) var(--pf-t--global--spacer--lg);
+ --pf-v6-c-multiple-file-upload--m-horizontal__main--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
+ --pf-v6-c-multiple-file-upload--m-horizontal__title--GridTemplateColumns: auto 1fr;
+ --pf-v6-c-multiple-file-upload--m-horizontal__title--Gap: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-multiple-file-upload--m-horizontal__title-icon--FontSize: var(--pf-t--global--font--size--heading--xs);
+ --pf-v6-c-multiple-file-upload--m-horizontal__title-text--FontSize: var(--pf-t--global--font--size--heading--xs);
+ --pf-v6-c-multiple-file-upload--m-horizontal__title-text-separator--Display: inline;
+ --pf-v6-c-multiple-file-upload--m-horizontal__title-text-separator--MarginBlockStart: 0;
+ --pf-v6-c-multiple-file-upload--m-horizontal__title-text-separator--FontFamily: var(--pf-t--global--font--family--heading);
+ --pf-v6-c-multiple-file-upload--m-horizontal__title-text-separator--FontSize: var(--pf-t--global--font--size--heading--xs);
+ --pf-v6-c-multiple-file-upload--m-horizontal__title-text-separator--FontWeight: var(--pf-t--global--font--weight--heading--default);
+ --pf-v6-c-multiple-file-upload--m-horizontal__info--MarginBlockStart: 0;
+ --pf-v6-c-multiple-file-upload__status--PaddingBlockStart: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-multiple-file-upload__status--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-multiple-file-upload__status--PaddingInlineStart: var(--pf-t--global--spacer--md);
+ --pf-v6-c-multiple-file-upload__status--PaddingInlineEnd: var(--pf-t--global--spacer--md);
+ --pf-v6-c-multiple-file-upload__status-progress--GridTemplateColumns: auto 1fr;
+ --pf-v6-c-multiple-file-upload__status-progress--Gap: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-multiple-file-upload__status-progress-icon--Color: var(--pf-t--global--icon--color--brand--default);
+ --pf-v6-c-multiple-file-upload__status-item--PaddingBlockStart: var(--pf-t--global--spacer--md);
+ --pf-v6-c-multiple-file-upload__status-item--PaddingBlockEnd: var(--pf-t--global--spacer--md);
+ --pf-v6-c-multiple-file-upload__status-item--GridTemplateColumns: auto 1fr auto;
+ --pf-v6-c-multiple-file-upload__status-item--Gap: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-multiple-file-upload__status-item--BorderWidth: var(--pf-t--global--border--width--regular);
+ --pf-v6-c-multiple-file-upload__status-item--BorderColor: var(--pf-t--global--border--color--default);
+ --pf-v6-c-multiple-file-upload__status-item-icon--Color: var(--pf-t--global--icon--color--regular);
+ --pf-v6-c-multiple-file-upload__status-item-progress--GridTemplateColumns: fit-content(100%) max-content;
+ --pf-v6-c-multiple-file-upload__status-item-progress--Gap: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-multiple-file-upload__status-item-progress-text--Color: var(--pf-t--global--text--color--regular);
+ --pf-v6-c-multiple-file-upload__status-item-progress-size--Color: var(--pf-t--global--text--color--subtle);
+}
+
+.pf-v6-c-multiple-file-upload {
+ display: grid;
+ grid-template-columns: var(--pf-v6-c-multiple-file-upload--GridTemplateColumns);
+ gap: var(--pf-v6-c-multiple-file-upload--Gap);
+}
+.pf-v6-c-multiple-file-upload.pf-m-horizontal {
+ --pf-v6-c-multiple-file-upload--GridTemplateColumns: var(--pf-v6-c-multiple-file-upload--m-horizontal--GridTemplateColumns);
+ --pf-v6-c-multiple-file-upload__main--TextAlign: var(--pf-v6-c-multiple-file-upload--m-horizontal__main--TextAlign);
+ --pf-v6-c-multiple-file-upload__main--GridTemplateColumns: var(--pf-v6-c-multiple-file-upload--m-horizontal__main--GridTemplateColumns);
+ --pf-v6-c-multiple-file-upload__main--GridTemplateAreas: var(--pf-v6-c-multiple-file-upload--m-horizontal__main--GridTemplateAreas);
+ --pf-v6-c-multiple-file-upload__main--Gap: var(--pf-v6-c-multiple-file-upload--m-horizontal__main--Gap);
+ --pf-v6-c-multiple-file-upload__main--PaddingBlockEnd: var(--pf-v6-c-multiple-file-upload--m-horizontal__main--PaddingBlockEnd);
+ --pf-v6-c-multiple-file-upload__title--GridTemplateColumns: var(--pf-v6-c-multiple-file-upload--m-horizontal__title--GridTemplateColumns);
+ --pf-v6-c-multiple-file-upload__title--Gap: var(--pf-v6-c-multiple-file-upload--m-horizontal__title--Gap);
+ --pf-v6-c-multiple-file-upload__title-icon--FontSize: var(--pf-v6-c-multiple-file-upload--m-horizontal__title-icon--FontSize);
+ --pf-v6-c-multiple-file-upload__title-text--FontSize: var(--pf-v6-c-multiple-file-upload--m-horizontal__title-text--FontSize);
+ --pf-v6-c-multiple-file-upload__title-text-separator--FontFamily: var(--pf-v6-c-multiple-file-upload--m-horizontal__title-text-separator--FontFamily);
+ --pf-v6-c-multiple-file-upload__title-text-separator--Display: var(--pf-v6-c-multiple-file-upload--m-horizontal__title-text-separator--Display);
+ --pf-v6-c-multiple-file-upload__title-text-separator--MarginBlockStart: var(--pf-v6-c-multiple-file-upload--m-horizontal__title-text-separator--MarginBlockStart);
+ --pf-v6-c-multiple-file-upload__title-text-separator--FontSize: var(--pf-v6-c-multiple-file-upload--m-horizontal__title-text-separator--FontSize);
+ --pf-v6-c-multiple-file-upload__title-text-separator--FontWeight: var(--pf-v6-c-multiple-file-upload--m-horizontal__title-text-separator--FontWeight);
+ --pf-v6-c-multiple-file-upload__info--MarginBlockStart: var(--pf-v6-c-multiple-file-upload--m-horizontal__info--MarginBlockStart);
+}
+.pf-v6-c-multiple-file-upload.pf-m-drag-over {
+ --pf-v6-c-multiple-file-upload__main--BorderStyle: var(--pf-v6-c-multiple-file-upload--m-drag-over__main--BorderStyle);
+ --pf-v6-c-multiple-file-upload__main--BorderColor: var(--pf-v6-c-multiple-file-upload--m-drag-over__main--BorderColor);
+}
+
+.pf-v6-c-multiple-file-upload__main {
+ display: grid;
+ grid-template-areas: var(--pf-v6-c-multiple-file-upload__main--GridTemplateAreas);
+ grid-template-rows: var(--pf-v6-c-multiple-file-upload__main--GridTemplateRows);
+ grid-template-columns: var(--pf-v6-c-multiple-file-upload__main--GridTemplateColumns);
+ gap: var(--pf-v6-c-multiple-file-upload__main--Gap);
+ align-items: center;
+ padding-block-start: var(--pf-v6-c-multiple-file-upload__main--PaddingBlockStart);
+ padding-block-end: var(--pf-v6-c-multiple-file-upload__main--PaddingBlockEnd);
+ padding-inline-start: var(--pf-v6-c-multiple-file-upload__main--PaddingInlineStart);
+ padding-inline-end: var(--pf-v6-c-multiple-file-upload__main--PaddingInlineEnd);
+ text-align: var(--pf-v6-c-multiple-file-upload__main--TextAlign);
+ border: var(--pf-v6-c-multiple-file-upload__main--BorderWidth) var(--pf-v6-c-multiple-file-upload__main--BorderStyle) var(--pf-v6-c-multiple-file-upload__main--BorderColor);
+ border-radius: var(--pf-v6-c-multiple-file-upload__main--BorderRadius);
+}
+
+.pf-v6-c-multiple-file-upload__title {
+ display: var(--pf-v6-c-multiple-file-upload__title--Display);
+ grid-area: title;
+ grid-template-columns: var(--pf-v6-c-multiple-file-upload__title--GridTemplateColumns);
+ gap: var(--pf-v6-c-multiple-file-upload__title--Gap);
+}
+
+.pf-v6-c-multiple-file-upload__title-icon {
+ font-size: var(--pf-v6-c-multiple-file-upload__title-icon--FontSize);
+ color: var(--pf-v6-c-multiple-file-upload__title-icon--Color);
+}
+
+.pf-v6-c-multiple-file-upload__title-text {
+ font-family: var(--pf-v6-c-multiple-file-upload__title-text--FontFamily);
+ font-size: var(--pf-v6-c-multiple-file-upload__title-text--FontSize);
+ font-weight: var(--pf-v6-c-multiple-file-upload__title-text--FontWeight);
+ color: var(--pf-v6-c-multiple-file-upload__title-text--Color, inherit);
+}
+
+.pf-v6-c-multiple-file-upload__title-text-separator {
+ display: var(--pf-v6-c-multiple-file-upload__title-text-separator--Display);
+ margin-block-start: var(--pf-v6-c-multiple-file-upload__title-text-separator--MarginBlockStart);
+ margin-block-end: var(--pf-v6-c-multiple-file-upload__title-text-separator--MarginBlockEnd);
+ font-family: var(--pf-v6-c-multiple-file-upload__title-text-separator--FontFamily);
+ font-size: var(--pf-v6-c-multiple-file-upload__title-text-separator--FontSize);
+ font-weight: var(--pf-v6-c-multiple-file-upload__title-text-separator--FontWeight);
+ color: var(--pf-v6-c-multiple-file-upload__title-text-separator--Color);
+}
+
+.pf-v6-c-multiple-file-upload__upload {
+ grid-area: upload;
+}
+
+.pf-v6-c-multiple-file-upload__info {
+ grid-area: info;
+ margin-block-start: var(--pf-v6-c-multiple-file-upload__info--MarginBlockStart);
+ font-size: var(--pf-v6-c-multiple-file-upload__info--FontSize);
+ color: var(--pf-v6-c-multiple-file-upload__info--Color);
+}
+
+.pf-v6-c-multiple-file-upload__status {
+ padding-block-start: var(--pf-v6-c-multiple-file-upload__status--PaddingBlockStart);
+ padding-block-end: var(--pf-v6-c-multiple-file-upload__status--PaddingBlockEnd);
+ padding-inline-start: var(--pf-v6-c-multiple-file-upload__status--PaddingInlineStart);
+ padding-inline-end: var(--pf-v6-c-multiple-file-upload__status--PaddingInlineEnd);
+}
+
+.pf-v6-c-multiple-file-upload__status,
+.pf-v6-c-multiple-file-upload__status-item-main {
+ min-width: 0;
+}
+
+.pf-v6-c-multiple-file-upload__status-progress {
+ display: grid;
+ grid-template-columns: var(--pf-v6-c-multiple-file-upload__status-progress--GridTemplateColumns);
+ gap: var(--pf-v6-c-multiple-file-upload__status-progress--Gap);
+}
+
+.pf-v6-c-multiple-file-upload__status-progress-icon {
+ color: var(--pf-v6-c-multiple-file-upload__status-progress-icon--Color);
+}
+
+.pf-v6-c-multiple-file-upload__status-item {
+ display: grid;
+ grid-template-columns: var(--pf-v6-c-multiple-file-upload__status-item--GridTemplateColumns);
+ gap: var(--pf-v6-c-multiple-file-upload__status-item--Gap);
+ padding-block-start: var(--pf-v6-c-multiple-file-upload__status-item--PaddingBlockStart);
+ padding-block-end: var(--pf-v6-c-multiple-file-upload__status-item--PaddingBlockEnd);
+ border-block-end: var(--pf-v6-c-multiple-file-upload__status-item--BorderWidth) solid var(--pf-v6-c-multiple-file-upload__status-item--BorderColor);
+}
+
+.pf-v6-c-multiple-file-upload__status-item-icon {
+ color: var(--pf-v6-c-multiple-file-upload__status-item-icon--Color);
+}
+
+.pf-v6-c-multiple-file-upload__status-item-progress {
+ display: grid;
+ grid-template-columns: var(--pf-v6-c-multiple-file-upload__status-item-progress--GridTemplateColumns);
+ gap: var(--pf-v6-c-multiple-file-upload__status-item-progress--Gap);
+}
+
+.pf-v6-c-multiple-file-upload__status-item-progress-text {
+ color: var(--pf-v6-c-multiple-file-upload__status-item-progress-text--Color);
+}
+
+.pf-v6-c-multiple-file-upload__status-item-progress-size {
+ color: var(--pf-v6-c-multiple-file-upload__status-item-progress-size--Color);
+}
+
+.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__toggle-icon--Rotate: 0;
+ --pf-v6-c-nav__item--m-expanded__toggle-icon--Rotate: 90deg;
+ --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--small);
+ --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--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__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;
+ --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__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);
+}
+@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__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-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);
+ 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;
+ visibility: visible;
+ 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;
+ translate: 0 var(--pf-v6-c-nav__subnav--TranslateY);
+}
+.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;
+ max-height: 0;
+ visibility: hidden;
+ opacity: 0;
+}
+
+.pf-v6-c-nav__item {
+ scroll-snap-align: var(--pf-v6-c-nav__item--ScrollSnapAlign);
+}
+.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__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:hover, .pf-v6-c-nav__link.pf-m-hover, .pf-v6-c-nav__link:focus {
+ 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);
+ color: var(--pf-v6-c-nav__link--m-current--Color);
+ background-color: var(--pf-v6-c-nav__link--m-current--BackgroundColor);
+ position: relative;
+}
+.pf-v6-c-nav__link:hover::after, .pf-v6-c-nav__link:focus::after, .pf-v6-c-nav__link.pf-m-current::after {
+ position: absolute;
+ inset: 0;
+ content: "";
+ border: solid var(--pf-t--global--border--color--high-contrast);
+ border-radius: inherit;
+}
+.pf-v6-c-nav__link:hover::after, .pf-v6-c-nav__link:focus::after {
+ border-width: var(--pf-t--global--border--width--regular);
+}
+.pf-v6-c-nav__link.pf-m-current::after {
+ border-width: var(--pf-t--global--border--width--strong);
+}
+
+.pf-v6-c-nav__link-icon {
+ color: var(--pf-v6-c-nav__link-icon--Color);
+}
+
+.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;
+ 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;
+ transform: rotate(var(--pf-v6-c-nav__item__toggle-icon--Rotate));
+}
+: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) {
+ 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;
+ scrollbar-width: none;
+ -ms-overflow-style: -ms-autohiding-scrollbar;
+}
+.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__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-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);
+}
+
+.pf-v6-c-notification-drawer {
+ --pf-v6-c-notification-drawer--BackgroundColor: var(--pf-t--global--background--color--floating--default);
+ --pf-v6-c-notification-drawer__header--PaddingBlockStart: var(--pf-t--global--spacer--md);
+ --pf-v6-c-notification-drawer__header--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
+ --pf-v6-c-notification-drawer__header--PaddingBlockEnd: var(--pf-t--global--spacer--md);
+ --pf-v6-c-notification-drawer__header--PaddingInlineStart: var(--pf-t--global--spacer--lg);
+ --pf-v6-c-notification-drawer__header--BackgroundColor: var(--pf-t--global--background--color--floating--default);
+ --pf-v6-c-notification-drawer__header--ZIndex: var(--pf-t--global--z-index--sm);
+ --pf-v6-c-notification-drawer__header-title--FontSize: var(--pf-t--global--font--size--heading--md);
+ --pf-v6-c-notification-drawer__header-title--FontWeight: var(--pf-t--global--font--weight--heading--default);
+ --pf-v6-c-notification-drawer__header-title--LineHeight: var(--pf-t--global--font--line-height--heading);
+ --pf-v6-c-notification-drawer__header-title--FontFamily: var(--pf-t--global--font--family--heading);
+ --pf-v6-c-notification-drawer__header-status--MarginInlineStart: var(--pf-t--global--spacer--md);
+ --pf-v6-c-notification-drawer__header-status--FontWeight: var(--pf-t--global--font--weight--body--bold);
+ --pf-v6-c-notification-drawer__header-status--FontSize: var(--pf-t--global--font--size--body--default);
+ --pf-v6-c-notification-drawer__header-status--Color: var(--pf-t--global--text--color--subtle);
+ --pf-v6-c-notification-drawer__body--ZIndex: var(--pf-t--global--z-index--xs);
+ --pf-v6-c-notification-drawer__body--PaddingBlockStart: 0;
+ --pf-v6-c-notification-drawer__body--PaddingBlockEnd: var(--pf-t--global--spacer--md);
+ --pf-v6-c-notification-drawer__list--Gap: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-notification-drawer__list--PaddingInlineStart: var(--pf-t--global--spacer--lg);
+ --pf-v6-c-notification-drawer__list--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
+ --pf-v6-c-notification-drawer__list-item--PaddingBlockStart: var(--pf-t--global--spacer--md);
+ --pf-v6-c-notification-drawer__list-item--PaddingInlineEnd: var(--pf-t--global--spacer--md);
+ --pf-v6-c-notification-drawer__list-item--PaddingBlockEnd: var(--pf-t--global--spacer--md);
+ --pf-v6-c-notification-drawer__list-item--PaddingInlineStart: var(--pf-t--global--spacer--md);
+ --pf-v6-c-notification-drawer__list-item--BackgroundColor: var(--pf-t--global--background--color--primary--default);
+ --pf-v6-c-notification-drawer__list-item--BorderWidth: var(--pf-t--global--border--width--box--status--default);
+ --pf-v6-c-notification-drawer__list-item--BorderRadius: var(--pf-t--global--border--radius--medium);
+ --pf-v6-c-notification-drawer__list-item--m-info__list-item-header-icon--Color: var(--pf-t--global--icon--color--status--info--default);
+ --pf-v6-c-notification-drawer__list-item--m-info__list-item--BorderColor: var(--pf-t--global--border--color--status--info--default);
+ --pf-v6-c-notification-drawer__list-item--m-warning__list-item-header-icon--Color: var(--pf-t--global--icon--color--status--warning--default);
+ --pf-v6-c-notification-drawer__list-item--m-warning__list-item--BorderColor: var(--pf-t--global--border--color--status--warning--default);
+ --pf-v6-c-notification-drawer__list-item--m-danger__list-item-header-icon--Color: var(--pf-t--global--icon--color--status--danger--default);
+ --pf-v6-c-notification-drawer__list-item--m-danger__list-item--BorderColor: var(--pf-t--global--border--color--status--danger--default);
+ --pf-v6-c-notification-drawer__list-item--m-success__list-item-header-icon--Color: var(--pf-t--global--icon--color--status--success--default);
+ --pf-v6-c-notification-drawer__list-item--m-success__list-item--BorderColor: var(--pf-t--global--border--color--status--success--default);
+ --pf-v6-c-notification-drawer__list-item--m-custom__list-item-header-icon--Color: var(--pf-t--global--icon--color--status--custom--default);
+ --pf-v6-c-notification-drawer__list-item--m-custom__list-item--BorderColor: var(--pf-t--global--border--color--status--custom--default);
+ --pf-v6-c-notification-drawer__list-item--m-read--BackgroundColor: var(--pf-t--global--background--color--primary--default);
+ --pf-v6-c-notification-drawer__list-item--m-read--BorderWidth: var(--pf-t--global--border--width--box--status--read);
+ --pf-v6-c-notification-drawer__list-item--m-read--BorderColor: var(--pf-t--global--border--color--default);
+ --pf-v6-c-notification-drawer__list-item--m-hoverable--hover--BackgroundColor: var(--pf-t--global--background--color--primary--hover);
+ --pf-v6-c-notification-drawer__list-item-header--MarginBlockEnd: var(--pf-t--global--spacer--xs);
+ --pf-v6-c-notification-drawer__list-item-header-icon--Color: inherit;
+ --pf-v6-c-notification-drawer__list-item-header-icon--MarginInlineEnd: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-notification-drawer__list-item-header-title--FontWeight: var(--pf-t--global--font--weight--body--bold);
+ --pf-v6-c-notification-drawer__list-item-header-title--max-lines: 1;
+ --pf-v6-c-notification-drawer__list-item-action--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--plain) * -1);
+ --pf-v6-c-notification-drawer__list-item-description--MarginBlockEnd: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-notification-drawer__list-item-timestamp--Color: var(--pf-t--global--text--color--subtle);
+ --pf-v6-c-notification-drawer__list-item-timestamp--FontSize: var(--pf-t--global--font--size--body--default);
+ --pf-v6-c-notification-drawer__group--BorderBlockEndWidth: var(--pf-t--global--border--width--divider--default);
+ --pf-v6-c-notification-drawer__group--m-expanded--group--BorderBlockEndColor: var(--pf-t--global--border--color--default);
+ --pf-v6-c-notification-drawer__group--m-expanded--MinHeight: 0;
+ --pf-v6-c-notification-drawer__group--m-expanded--PaddingBlockEnd: var(--pf-t--global--spacer--md);
+ --pf-v6-c-notification-drawer__group-toggle--PaddingBlockStart: var(--pf-t--global--spacer--md);
+ --pf-v6-c-notification-drawer__group-toggle--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
+ --pf-v6-c-notification-drawer__group-toggle--PaddingBlockEnd: var(--pf-t--global--spacer--md);
+ --pf-v6-c-notification-drawer__group-toggle--PaddingInlineStart: var(--pf-t--global--spacer--lg);
+ --pf-v6-c-notification-drawer__group-toggle--BackgroundColor: var(--pf-t--global--background--color--floating--default);
+ --pf-v6-c-notification-drawer__group-toggle--OutlineOffset: -0.25rem;
+ --pf-v6-c-notification-drawer__group-toggle-title--MarginInlineEnd: var(--pf-t--global--spacer--md);
+ --pf-v6-c-notification-drawer__group-toggle-title--FontSize: var(--pf-t--global--font--size--body--lg);
+ --pf-v6-c-notification-drawer__group-toggle-title--max-lines: 1;
+ --pf-v6-c-notification-drawer__group-toggle-count--MarginInlineEnd: var(--pf-t--global--spacer--md);
+ --pf-v6-c-notification-drawer__group-toggle-icon--MarginInlineEnd: var(--pf-t--global--spacer--md);
+ --pf-v6-c-notification-drawer__group-toggle-icon--Color: var(--pf-t--global--icon--color--regular);
+ --pf-v6-c-notification-drawer__group-toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
+ --pf-v6-c-notification-drawer__group-toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
+ --pf-v6-c-notification-drawer__group-toggle-icon--Transition: transform var(--pf-v6-c-notification-drawer__group-toggle-icon--TransitionDuration) var(--pf-v6-c-notification-drawer__group-toggle-icon--TransitionTimingFunction);
+ --pf-v6-c-notification-drawer__group--m-expanded__group-toggle-icon--Rotate: 90deg;
+}
+
+.pf-v6-c-notification-drawer {
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+ background-color: var(--pf-v6-c-notification-drawer--BackgroundColor);
+}
+
+.pf-v6-c-notification-drawer__header {
+ position: relative;
+ z-index: var(--pf-v6-c-notification-drawer__header--ZIndex);
+ display: flex;
+ flex-shrink: 0;
+ align-items: baseline;
+ padding-block-start: var(--pf-v6-c-notification-drawer__header--PaddingBlockStart);
+ padding-block-end: var(--pf-v6-c-notification-drawer__header--PaddingBlockEnd);
+ padding-inline-start: var(--pf-v6-c-notification-drawer__header--PaddingInlineStart);
+ padding-inline-end: var(--pf-v6-c-notification-drawer__header--PaddingInlineEnd);
+ background-color: var(--pf-v6-c-notification-drawer__header--BackgroundColor);
+}
+
+.pf-v6-c-notification-drawer__header-title {
+ font-family: var(--pf-v6-c-notification-drawer__header-title--FontFamily);
+ font-size: var(--pf-v6-c-notification-drawer__header-title--FontSize);
+ font-weight: var(--pf-v6-c-notification-drawer__header-title--FontWeight);
+ line-height: var(--pf-v6-c-notification-drawer__header-title--LineHeight);
+}
+
+.pf-v6-c-notification-drawer__header-status {
+ margin-inline-start: var(--pf-v6-c-notification-drawer__header-status--MarginInlineStart);
+ font-size: var(--pf-v6-c-notification-drawer__header-status--FontSize);
+ font-weight: var(--pf-v6-c-notification-drawer__header-status--FontWeight);
+ color: var(--pf-v6-c-notification-drawer__header-status--Color);
+}
+
+.pf-v6-c-notification-drawer__header-action {
+ display: flex;
+ align-items: center;
+ margin-inline-start: auto;
+}
+
+.pf-v6-c-notification-drawer__body {
+ flex: 1;
+ padding-block-start: var(--pf-v6-c-notification-drawer__body--PaddingBlockStart);
+ padding-block-end: var(--pf-v6-c-notification-drawer__body--PaddingBlockEnd);
+ overflow-y: auto;
+}
+
+.pf-v6-c-notification-drawer__list:not([hidden]) {
+ display: flex;
+ flex-direction: column;
+ gap: var(--pf-v6-c-notification-drawer__list--Gap);
+ padding-inline-start: var(--pf-v6-c-notification-drawer__list--PaddingInlineStart);
+ padding-inline-end: var(--pf-v6-c-notification-drawer__list--PaddingInlineEnd);
+}
+
+.pf-v6-c-notification-drawer__list-item {
+ position: relative;
+ display: grid;
+ grid-template-columns: 1fr auto;
+ padding-block-start: var(--pf-v6-c-notification-drawer__list-item--PaddingBlockStart);
+ padding-block-end: var(--pf-v6-c-notification-drawer__list-item--PaddingBlockEnd);
+ padding-inline-start: var(--pf-v6-c-notification-drawer__list-item--PaddingInlineStart);
+ padding-inline-end: var(--pf-v6-c-notification-drawer__list-item--PaddingInlineEnd);
+ background-color: var(--pf-v6-c-notification-drawer__list-item--BackgroundColor);
+ border: var(--pf-v6-c-notification-drawer__list-item--BorderWidth) solid var(--pf-v6-c-notification-drawer__list-item--BorderColor);
+ border-radius: var(--pf-v6-c-notification-drawer__list-item--BorderRadius);
+}
+.pf-v6-c-notification-drawer__list-item.pf-m-info {
+ --pf-v6-c-notification-drawer__list-item--BorderColor: var(--pf-v6-c-notification-drawer__list-item--m-info__list-item--BorderColor);
+ --pf-v6-c-notification-drawer__list-item-header-icon--Color: var(--pf-v6-c-notification-drawer__list-item--m-info__list-item-header-icon--Color);
+}
+.pf-v6-c-notification-drawer__list-item.pf-m-warning {
+ --pf-v6-c-notification-drawer__list-item--BorderColor: var(--pf-v6-c-notification-drawer__list-item--m-warning__list-item--BorderColor);
+ --pf-v6-c-notification-drawer__list-item-header-icon--Color: var(--pf-v6-c-notification-drawer__list-item--m-warning__list-item-header-icon--Color);
+}
+.pf-v6-c-notification-drawer__list-item.pf-m-danger {
+ --pf-v6-c-notification-drawer__list-item--BorderColor: var(--pf-v6-c-notification-drawer__list-item--m-danger__list-item--BorderColor);
+ --pf-v6-c-notification-drawer__list-item-header-icon--Color: var(--pf-v6-c-notification-drawer__list-item--m-danger__list-item-header-icon--Color);
+}
+.pf-v6-c-notification-drawer__list-item.pf-m-success {
+ --pf-v6-c-notification-drawer__list-item--BorderColor: var(--pf-v6-c-notification-drawer__list-item--m-success__list-item--BorderColor);
+ --pf-v6-c-notification-drawer__list-item-header-icon--Color: var(--pf-v6-c-notification-drawer__list-item--m-success__list-item-header-icon--Color);
+}
+.pf-v6-c-notification-drawer__list-item.pf-m-custom {
+ --pf-v6-c-notification-drawer__list-item--BorderColor: var(--pf-v6-c-notification-drawer__list-item--m-custom__list-item--BorderColor);
+ --pf-v6-c-notification-drawer__list-item-header-icon--Color: var(--pf-v6-c-notification-drawer__list-item--m-custom__list-item-header-icon--Color);
+}
+.pf-v6-c-notification-drawer__list-item.pf-m-read {
+ --pf-v6-c-notification-drawer__list-item--BorderWidth: var(--pf-v6-c-notification-drawer__list-item--m-read--BorderWidth);
+ --pf-v6-c-notification-drawer__list-item--BackgroundColor: var(--pf-v6-c-notification-drawer__list-item--m-read--BackgroundColor);
+ --pf-v6-c-notification-drawer__list-item--BorderColor: var(--pf-v6-c-notification-drawer__list-item--m-read--BorderColor);
+ position: relative;
+}
+.pf-v6-c-notification-drawer__list-item.pf-m-hoverable {
+ cursor: pointer;
+}
+.pf-v6-c-notification-drawer__list-item.pf-m-hoverable:hover, .pf-v6-c-notification-drawer__list-item.pf-m-hoverable:focus {
+ background-color: var(--pf-v6-c-notification-drawer__list-item--m-hoverable--hover--BackgroundColor);
+}
+
+.pf-v6-c-notification-drawer__list-item-header {
+ display: flex;
+ grid-row: 1/2;
+ grid-column: 1/2;
+ align-items: baseline;
+ margin-block-end: var(--pf-v6-c-notification-drawer__list-item-header--MarginBlockEnd);
+}
+
+.pf-v6-c-notification-drawer__list-item-header-icon {
+ margin-inline-end: var(--pf-v6-c-notification-drawer__list-item-header-icon--MarginInlineEnd);
+ color: var(--pf-v6-c-notification-drawer__list-item-header-icon--Color);
+}
+
+.pf-v6-c-notification-drawer__list-item-header-title {
+ font-weight: var(--pf-v6-c-notification-drawer__list-item-header-title--FontWeight);
+ word-break: break-word;
+}
+.pf-v6-c-notification-drawer__list-item-header-title.pf-m-truncate {
+ display: -webkit-box;
+ -webkit-box-orient: vertical;
+ -webkit-line-clamp: var(--pf-v6-c-notification-drawer__list-item-header-title--max-lines);
+ overflow: hidden;
+}
+
+.pf-v6-c-notification-drawer__list-item-action {
+ grid-row: 1/3;
+ grid-column: 2/3;
+ margin-block-start: var(--pf-v6-c-notification-drawer__list-item-action--MarginBlockStart);
+}
+.pf-v6-c-notification-drawer__list-item-action.pf-m-no-offset {
+ --pf-v6-c-notification-drawer__list-item-action--MarginBlockStart: 0;
+}
+
+.pf-v6-c-notification-drawer__list-item-description {
+ grid-row: 2/3;
+ grid-column: 1/2;
+ margin-block-end: var(--pf-v6-c-notification-drawer__list-item-description--MarginBlockEnd);
+ word-break: break-word;
+}
+
+.pf-v6-c-notification-drawer__list-item-timestamp {
+ grid-row: 3/4;
+ grid-column: 1/2;
+ font-size: var(--pf-v6-c-notification-drawer__list-item-timestamp--FontSize);
+ color: var(--pf-v6-c-notification-drawer__list-item-timestamp--Color);
+}
+
+.pf-v6-c-notification-drawer__group-list {
+ display: flex;
+ flex-direction: column;
+}
+
+.pf-v6-c-notification-drawer__group {
+ border-block-end: var(--pf-v6-c-notification-drawer__group--BorderBlockEndWidth) solid var(--pf-v6-c-notification-drawer__group--m-expanded--group--BorderBlockEndColor);
+}
+.pf-v6-c-notification-drawer__group.pf-m-expanded {
+ min-height: var(--pf-v6-c-notification-drawer__group--m-expanded--MinHeight);
+ padding-block-end: var(--pf-v6-c-notification-drawer__group--m-expanded--PaddingBlockEnd);
+}
+
+.pf-v6-c-notification-drawer__group-toggle {
+ display: flex;
+ align-items: baseline;
+ width: 100%;
+ padding-block-start: var(--pf-v6-c-notification-drawer__group-toggle--PaddingBlockStart);
+ padding-block-end: var(--pf-v6-c-notification-drawer__group-toggle--PaddingBlockEnd);
+ padding-inline-start: var(--pf-v6-c-notification-drawer__group-toggle--PaddingInlineStart);
+ padding-inline-end: var(--pf-v6-c-notification-drawer__group-toggle--PaddingInlineEnd);
+ background-color: var(--pf-v6-c-notification-drawer__group-toggle--BackgroundColor);
+ border: none;
+ outline-offset: var(--pf-v6-c-notification-drawer__group-toggle--OutlineOffset);
+}
+
+.pf-v6-c-notification-drawer__group-toggle-title {
+ display: -webkit-box;
+ -webkit-box-orient: vertical;
+ -webkit-line-clamp: var(--pf-v6-c-notification-drawer__group-toggle-title--max-lines);
+ overflow: hidden;
+ flex: 1;
+ margin-inline-end: var(--pf-v6-c-notification-drawer__group-toggle-title--MarginInlineEnd);
+ font-size: var(--pf-v6-c-notification-drawer__group-toggle-title--FontSize);
+ text-align: start;
+ word-break: break-word;
+}
+
+.pf-v6-c-notification-drawer__group-toggle-count {
+ margin-inline-start: auto;
+ margin-inline-end: var(--pf-v6-c-notification-drawer__group-toggle-count--MarginInlineEnd);
+}
+
+.pf-v6-c-notification-drawer__group-toggle-icon {
+ margin-inline-end: var(--pf-v6-c-notification-drawer__group-toggle-icon--MarginInlineEnd);
+ color: var(--pf-v6-c-notification-drawer__group-toggle-icon--Color);
+ transition: var(--pf-v6-c-notification-drawer__group-toggle-icon--Transition);
+}
+:where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-notification-drawer__group-toggle-icon {
+ scale: -1 1;
+}
+
+.pf-v6-c-notification-drawer__group.pf-m-expanded .pf-v6-c-notification-drawer__group-toggle-icon {
+ transform: rotate(var(--pf-v6-c-notification-drawer__group--m-expanded__group-toggle-icon--Rotate));
+}
+
+.pf-v6-c-overflow-menu {
+ --pf-v6-c-overflow-menu--ColumnGap: var(--pf-t--global--spacer--md);
+ --pf-v6-c-overflow-menu__group--ColumnGap: var(--pf-t--global--spacer--md);
+ --pf-v6-c-overflow-menu__group--m-button-group--ColumnGap: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-overflow-menu__group--m-icon-button-group--ColumnGap: var(--pf-t--global--spacer--xs);
+}
+
+.pf-v6-c-overflow-menu {
+ display: inline-flex;
+ column-gap: var(--pf-v6-c-overflow-menu--ColumnGap);
+}
+
+.pf-v6-c-overflow-menu__content,
+.pf-v6-c-overflow-menu__group {
+ display: flex;
+ align-items: start;
+}
+
+.pf-v6-c-overflow-menu__group {
+ column-gap: var(--pf-v6-c-overflow-menu__group--ColumnGap);
+}
+.pf-v6-c-overflow-menu__group.pf-m-button-group {
+ column-gap: var(--pf-v6-c-overflow-menu__group--m-button-group--ColumnGap);
+}
+.pf-v6-c-overflow-menu__group.pf-m-icon-button-group {
+ column-gap: var(--pf-v6-c-overflow-menu__group--m-icon-button-group--ColumnGap);
+}
+
+.pf-v6-c-overflow-menu__item {
+ column-gap: var(--pf-v6-c-overflow-menu__item--ColumnGap, var(--pf-v6-c-overflow-menu--ColumnGap));
+}
+
+.pf-v6-c-overflow-menu__content,
+.pf-v6-c-overflow-menu__control {
+ column-gap: var(--pf-v6-c-overflow-menu--ColumnGap);
+}
+
+.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__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--secondary--default);
+ --pf-v6-c-page__sidebar--BoxShadow: none;
+ --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--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-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);
+ --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--primary--default);
+ --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--BorderWidth: 0.25rem;
+ --pf-v6-c-page__main-container--BorderColor: var(--pf-v6-c-page__main-container--BackgroundColor);
+ --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-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--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-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-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-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__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--BorderWidth));
+ --pf-v6-c-page__main-subnav--PaddingInlineEnd: calc(var(--pf-t--global--spacer--lg) - var(--pf-v6-c-page__main-container--BorderWidth));
+ --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--BorderWidth));
+ --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--BorderWidth));
+ --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);
+}
+@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);
+ }
+}
+@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 {
+ 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-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: 1;
+ --pf-v6-c-button--hover__icon--TransitionDelay: 0s;
+ --pf-v6-c-button--hover__icon--ScaleX: 1;
+}
+@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: 1;
+ --pf-v6-c-button--hover__icon--TransitionDelay: 0s;
+ --pf-v6-c-button--hover__icon--ScaleX: 1;
+ }
+ .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-masthead {
+ z-index: var(--pf-v6-c-page--c-masthead--ZIndex);
+ grid-area: header;
+}
+@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__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-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);
+ 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: none;
+ }
+}
+.pf-v6-c-page__sidebar.pf-m-collapsed {
+ max-width: 0;
+ overflow: hidden;
+}
+
+.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-direction: column;
+ flex-shrink: 0;
+}
+.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);
+ 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);
+ 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);
+ 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);
+ 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);
+ 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);
+ 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);
+ 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);
+ 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);
+ 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);
+ 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);
+ 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);
+ 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);
+ 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);
+ box-shadow: var(--pf-v6-c-page--section--m-sticky-bottom--BoxShadow);
+ }
+}
+
+.pf-v6-c-page__main-container {
+ position: relative;
+ 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-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-radius: var(--pf-v6-c-page__main-container--BorderRadius);
+ padding: var(--pf-v6-c-page__main-container--BorderWidth);
+ background-color: var(--pf-v6-c-page__main-container--BorderColor);
+}
+.pf-v6-c-page__main-container::before {
+ content: "";
+ inset: 0;
+ border: calc(var(--pf-v6-c-page__main-container--BorderWidth) / 2) solid var(--pf-t--global--border--color--high-contrast);
+ position: absolute;
+ pointer-events: none;
+ z-index: 9999;
+ border-radius: var(--pf-v6-c-page__main-container--BorderRadius);
+}
+@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--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--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;
+}
+
+.pf-v6-c-page__main,
+.pf-v6-c-page__main-drawer,
+.pf-v6-c-page__main-group {
+ display: flex;
+ flex-direction: column;
+ flex-grow: 1;
+}
+
+.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 {
+ 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--BorderWidth));
+ padding-inline-end: calc(var(--pf-v6-c-page__main-section--PaddingInlineEnd) - var(--pf-v6-c-page__main-container--BorderWidth));
+ 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);
+}
+.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--BorderWidth));
+ padding-inline-end: calc(var(--pf-v6-c-page__main-section--PaddingInlineEnd) - var(--pf-v6-c-page__main-container--BorderWidth));
+}
+.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--BorderWidth));
+ padding-inline-end: calc(var(--pf-v6-c-page__main-section--PaddingInlineEnd) - var(--pf-v6-c-page__main-container--BorderWidth));
+ }
+ .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--BorderWidth));
+ padding-inline-end: calc(var(--pf-v6-c-page__main-section--PaddingInlineEnd) - var(--pf-v6-c-page__main-container--BorderWidth));
+ }
+ .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--BorderWidth));
+ padding-inline-end: calc(var(--pf-v6-c-page__main-section--PaddingInlineEnd) - var(--pf-v6-c-page__main-container--BorderWidth));
+ }
+ .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--BorderWidth));
+ padding-inline-end: calc(var(--pf-v6-c-page__main-section--PaddingInlineEnd) - var(--pf-v6-c-page__main-container--BorderWidth));
+ }
+ .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--BorderWidth));
+ padding-inline-end: calc(var(--pf-v6-c-page__main-section--PaddingInlineEnd) - var(--pf-v6-c-page__main-container--BorderWidth));
+ }
+ .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-page__main-container {
+ align-self: revert;
+}
+.pf-v6-c-page__drawer .pf-v6-c-page__main-container.pf-m-fill {
+ flex-grow: 1;
+}
+
+.pf-v6-c-pagination {
+ --pf-v6-c-pagination--inset: 0;
+ --pf-v6-c-pagination--ColumnGap: var(--pf-t--global--spacer--lg);
+ --pf-v6-c-pagination--m-page-insets--inset: var(--pf-t--global--spacer--lg);
+ --pf-v6-c-pagination__nav--Display: none;
+ --pf-v6-c-pagination--m-display-summary__nav--Display: none;
+ --pf-v6-c-pagination--m-display-full__nav--Display: inline-flex;
+ --pf-v6-c-pagination__nav--ColumnGap: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-pagination__nav-page-select--FontSize: var(--pf-t--global--font--size--body--default);
+ --pf-v6-c-pagination__nav-page-select--ColumnGap: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-pagination__nav-page-select--c-form-control--width-base: calc(var(--pf-t--global--spacer--control--horizontal--default) + var(--pf-t--global--spacer--control--horizontal--default) + var(--pf-t--global--border--width--control--default) * 2);
+ --pf-v6-c-pagination__nav-page-select--c-form-control--width-chars: 2;
+ --pf-v6-c-pagination__nav-page-select--c-form-control--Width: calc(var(--pf-v6-c-pagination__nav-page-select--c-form-control--width-base) + (var(--pf-v6-c-pagination__nav-page-select--c-form-control--width-chars) * 1ch));
+ --pf-v6-c-pagination__total-items--Display: block;
+ --pf-v6-c-pagination--m-display-summary__total-items--Display: block;
+ --pf-v6-c-pagination--m-display-full__total-items--Display: none;
+ --pf-v6-c-pagination--m-sticky--BackgroundColor: var(--pf-t--global--background--color--primary--default);
+ --pf-v6-c-pagination--m-sticky--BoxShadow: var(--pf-t--global--box-shadow--sm--bottom);
+ --pf-v6-c-pagination--m-sticky--PaddingBlockStart: var(--pf-t--global--spacer--md);
+ --pf-v6-c-pagination--m-sticky--PaddingBlockEnd: var(--pf-t--global--spacer--md);
+ --pf-v6-c-pagination--m-sticky--PaddingInlineStart: var(--pf-t--global--spacer--lg);
+ --pf-v6-c-pagination--m-sticky--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
+ --pf-v6-c-pagination--m-sticky--ZIndex: var(--pf-t--global--z-index--xs);
+ --pf-v6-c-pagination--m-sticky--InsetBlockStart: 0;
+ --pf-v6-c-pagination--m-bottom--BackgroundColor: var(--pf-t--global--background--color--primary--default);
+ --pf-v6-c-pagination--m-bottom--BoxShadow: var(--pf-t--global--box-shadow--sm--top);
+ --pf-v6-c-pagination--m-bottom--m-sticky--BoxShadow: var(--pf-t--global--box-shadow--sm--top);
+ --pf-v6-c-pagination--m-bottom--InsetBlockEnd: 0;
+ --pf-v6-c-pagination--m-bottom--m-sticky--PaddingBlockStart: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-pagination--m-bottom--m-sticky--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-pagination--m-bottom--m-sticky--PaddingInlineStart: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-pagination--m-bottom--m-sticky--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-pagination--m-bottom--m-static--PaddingBlockStart: var(--pf-t--global--spacer--gap--group--vertical);
+ --pf-v6-c-pagination--m-bottom--m-static--PaddingBlockEnd: 0;
+ --pf-v6-c-pagination--m-bottom--m-static--PaddingInlineStart: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-pagination--m-bottom--m-static--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-pagination__page-menu--Display--base: block;
+ --pf-v6-c-pagination__page-menu--Display: none;
+ --pf-v6-c-pagination--m-display-summary__page-menu--Display: none;
+ --pf-v6-c-pagination--m-display-full__page-menu--Display: var(--pf-v6-c-pagination__page-menu--Display--base);
+ --pf-v6-c-pagination--m-bottom__page-menu--Display: var(--pf-v6-c-pagination__page-menu--Display--base);
+ --pf-v6-c-pagination__page-menu--md--Display: var(--pf-v6-c-pagination__page-menu--Display--base);
+}
+@media screen and (min-width: 48rem) {
+ .pf-v6-c-pagination {
+ --pf-v6-c-pagination--m-bottom--BoxShadow: none;
+ --pf-v6-c-pagination__page-menu--Display: var(--pf-v6-c-pagination__page-menu--md--Display);
+ --pf-v6-c-pagination__nav--Display: inline-flex;
+ --pf-v6-c-pagination__total-items--Display: none;
+ }
+}
+@media screen and (min-width: 75rem) {
+ .pf-v6-c-pagination {
+ --pf-v6-c-pagination__scroll-button--Width: var(--pf-v6-c-pagination__scroll-button--xl--Width);
+ }
+}
+
+.pf-v6-c-pagination {
+ display: flex;
+ flex-wrap: wrap;
+ column-gap: var(--pf-v6-c-pagination--ColumnGap);
+ align-items: center;
+ justify-content: flex-end;
+ padding-inline-start: var(--pf-v6-c-pagination--inset);
+ padding-inline-end: var(--pf-v6-c-pagination--inset);
+}
+.pf-v6-c-pagination .pf-v6-c-pagination__page-menu {
+ display: var(--pf-v6-c-pagination__page-menu--Display);
+}
+.pf-v6-c-pagination.pf-m-bottom {
+ --pf-v6-c-pagination--m-sticky--BoxShadow: var(--pf-v6-c-pagination--m-bottom--m-sticky--BoxShadow);
+ --pf-v6-c-pagination--m-sticky--InsetBlockStart: auto;
+ position: sticky;
+ inset-block-end: var(--pf-v6-c-pagination--m-bottom--InsetBlockEnd);
+ justify-content: center;
+ padding-block-start: var(--pf-v6-c-pagination--m-bottom--m-sticky--PaddingBlockStart);
+ padding-block-end: var(--pf-v6-c-pagination--m-bottom--m-sticky--PaddingBlockEnd);
+ padding-inline-start: var(--pf-v6-c-pagination--m-bottom--m-sticky--PaddingInlineStart);
+ padding-inline-end: var(--pf-v6-c-pagination--m-bottom--m-sticky--PaddingInlineEnd);
+ background-color: var(--pf-v6-c-pagination--m-bottom--BackgroundColor);
+ box-shadow: var(--pf-v6-c-pagination--m-bottom--BoxShadow);
+}
+.pf-v6-c-pagination.pf-m-bottom .pf-v6-c-pagination__nav-control.pf-m-first,
+.pf-v6-c-pagination.pf-m-bottom .pf-v6-c-pagination__nav-control.pf-m-last,
+.pf-v6-c-pagination.pf-m-bottom .pf-v6-c-pagination__nav-page-select {
+ display: none;
+}
+.pf-v6-c-pagination.pf-m-bottom .pf-v6-c-pagination__page-menu {
+ position: absolute;
+ display: var(--pf-v6-c-pagination--m-bottom__page-menu--Display);
+}
+.pf-v6-c-pagination.pf-m-bottom .pf-v6-c-pagination__nav {
+ display: flex;
+ flex-basis: 100%;
+ justify-content: space-between;
+}
+@media screen and (min-width: 48rem) {
+ .pf-v6-c-pagination.pf-m-bottom {
+ --pf-v6-c-pagination--m-bottom--BorderBlockStartWidth: 0;
+ --pf-v6-c-pagination--m-bottom--MarginBlockStart: 0;
+ --pf-v6-c-pagination--m-bottom--InsetBlockEnd: auto;
+ position: relative;
+ justify-content: flex-end;
+ padding-block-start: var(--pf-v6-c-pagination--m-bottom--m-static--PaddingBlockStart);
+ padding-block-end: var(--pf-v6-c-pagination--m-bottom--m-static--PaddingBlockEnd);
+ padding-inline-start: var(--pf-v6-c-pagination--m-bottom--m-static--PaddingInlineStart);
+ padding-inline-end: var(--pf-v6-c-pagination--m-bottom--m-static--PaddingInlineEnd);
+ }
+ .pf-v6-c-pagination.pf-m-bottom .pf-v6-c-pagination__nav-control.pf-m-first,
+ .pf-v6-c-pagination.pf-m-bottom .pf-v6-c-pagination__nav-control.pf-m-last,
+ .pf-v6-c-pagination.pf-m-bottom .pf-v6-c-pagination__nav-page-select {
+ display: block;
+ }
+ .pf-v6-c-pagination.pf-m-bottom .pf-v6-c-pagination__nav-page-select {
+ display: inline-flex;
+ }
+ .pf-v6-c-pagination.pf-m-bottom .pf-v6-c-pagination__page-menu {
+ position: relative;
+ }
+ .pf-v6-c-pagination.pf-m-bottom .pf-v6-c-pagination__nav {
+ display: inline-flex;
+ flex-basis: auto;
+ }
+}
+.pf-v6-c-pagination.pf-m-static {
+ position: relative;
+ padding-block-start: var(--pf-v6-c-pagination--m-bottom--m-static--PaddingBlockStart);
+ padding-block-end: var(--pf-v6-c-pagination--m-bottom--m-static--PaddingBlockEnd);
+ padding-inline-start: var(--pf-v6-c-pagination--m-bottom--m-static--PaddingInlineStart);
+ padding-inline-end: var(--pf-v6-c-pagination--m-bottom--m-static--PaddingInlineEnd);
+ box-shadow: none;
+}
+.pf-v6-c-pagination.pf-m-sticky {
+ --pf-v6-c-pagination--m-bottom--InsetBlockEnd: 0;
+ position: sticky;
+ inset-block-start: var(--pf-v6-c-pagination--m-sticky--InsetBlockStart);
+ z-index: var(--pf-v6-c-pagination--m-sticky--ZIndex);
+ padding-block-start: var(--pf-v6-c-pagination--m-bottom--m-sticky--PaddingBlockStart);
+ padding-block-end: var(--pf-v6-c-pagination--m-bottom--m-sticky--PaddingBlockEnd);
+ padding-inline-start: var(--pf-v6-c-pagination--m-bottom--m-sticky--PaddingInlineStart);
+ padding-inline-end: var(--pf-v6-c-pagination--m-bottom--m-sticky--PaddingInlineEnd);
+ background-color: var(--pf-v6-c-pagination--m-sticky--BackgroundColor);
+ box-shadow: var(--pf-v6-c-pagination--m-sticky--BoxShadow);
+}
+.pf-v6-c-pagination.pf-m-page-insets {
+ --pf-v6-c-pagination--inset: var(--pf-v6-c-pagination--m-page-insets--inset);
+}
+
+.pf-v6-c-pagination__nav {
+ display: var(--pf-v6-c-pagination__nav--Display);
+ column-gap: var(--pf-v6-c-pagination__nav--ColumnGap);
+ justify-content: flex-end;
+}
+
+:where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-pagination__nav-control {
+ scale: -1 1;
+}
+
+.pf-v6-c-pagination__nav-page-select {
+ display: flex;
+ column-gap: var(--pf-v6-c-pagination__nav-page-select--ColumnGap);
+ align-items: center;
+}
+.pf-v6-c-pagination__nav-page-select > * {
+ font-size: var(--pf-v6-c-pagination__nav-page-select--FontSize);
+ white-space: nowrap;
+}
+.pf-v6-c-pagination__nav-page-select .pf-v6-c-form-control {
+ width: var(--pf-v6-c-pagination__nav-page-select--c-form-control--Width);
+}
+.pf-v6-c-pagination__nav-page-select .pf-v6-c-form-control > :is(input) {
+ appearance: textfield;
+}
+.pf-v6-c-pagination__nav-page-select .pf-v6-c-form-control > :is(input)::-webkit-inner-spin-button, .pf-v6-c-pagination__nav-page-select .pf-v6-c-form-control > :is(input)::-webkit-outer-spin-button {
+ margin: 0;
+ appearance: none;
+}
+
+.pf-v6-c-pagination__total-items {
+ display: var(--pf-v6-c-pagination__total-items--Display);
+}
+
+.pf-v6-c-pagination.pf-m-display-summary {
+ --pf-v6-c-pagination__nav--Display: var(--pf-v6-c-pagination--m-display-summary__nav--Display);
+ --pf-v6-c-pagination__page-menu--Display: var(--pf-v6-c-pagination--m-display-summary__page-menu--Display);
+ --pf-v6-c-pagination__total-items--Display: var(--pf-v6-c-pagination--m-display-summary__total-items--Display);
+}
+.pf-v6-c-pagination.pf-m-display-full {
+ --pf-v6-c-pagination__nav--Display: var(--pf-v6-c-pagination--m-display-full__nav--Display);
+ --pf-v6-c-pagination__page-menu--Display: var(--pf-v6-c-pagination--m-display-full__page-menu--Display);
+ --pf-v6-c-pagination__total-items--Display: var(--pf-v6-c-pagination--m-display-full__total-items--Display);
+}
+.pf-v6-c-pagination.pf-m-inset-none {
+ --pf-v6-c-pagination--inset: 0;
+}
+.pf-v6-c-pagination.pf-m-inset-sm {
+ --pf-v6-c-pagination--inset: var(--pf-t--global--spacer--sm);
+}
+.pf-v6-c-pagination.pf-m-inset-md {
+ --pf-v6-c-pagination--inset: var(--pf-t--global--spacer--md);
+}
+.pf-v6-c-pagination.pf-m-inset-lg {
+ --pf-v6-c-pagination--inset: var(--pf-t--global--spacer--lg);
+}
+.pf-v6-c-pagination.pf-m-inset-xl {
+ --pf-v6-c-pagination--inset: var(--pf-t--global--spacer--xl);
+}
+.pf-v6-c-pagination.pf-m-inset-2xl {
+ --pf-v6-c-pagination--inset: var(--pf-t--global--spacer--2xl);
+}
+@media (min-width: 36rem) {
+ .pf-v6-c-pagination.pf-m-display-summary-on-sm {
+ --pf-v6-c-pagination__nav--Display: var(--pf-v6-c-pagination--m-display-summary__nav--Display);
+ --pf-v6-c-pagination__page-menu--Display: var(--pf-v6-c-pagination--m-display-summary__page-menu--Display);
+ --pf-v6-c-pagination__total-items--Display: var(--pf-v6-c-pagination--m-display-summary__total-items--Display);
+ }
+ .pf-v6-c-pagination.pf-m-display-full-on-sm {
+ --pf-v6-c-pagination__nav--Display: var(--pf-v6-c-pagination--m-display-full__nav--Display);
+ --pf-v6-c-pagination__page-menu--Display: var(--pf-v6-c-pagination--m-display-full__page-menu--Display);
+ --pf-v6-c-pagination__total-items--Display: var(--pf-v6-c-pagination--m-display-full__total-items--Display);
+ }
+ .pf-v6-c-pagination.pf-m-inset-none-on-sm {
+ --pf-v6-c-pagination--inset: 0;
+ }
+ .pf-v6-c-pagination.pf-m-inset-sm-on-sm {
+ --pf-v6-c-pagination--inset: var(--pf-t--global--spacer--sm);
+ }
+ .pf-v6-c-pagination.pf-m-inset-md-on-sm {
+ --pf-v6-c-pagination--inset: var(--pf-t--global--spacer--md);
+ }
+ .pf-v6-c-pagination.pf-m-inset-lg-on-sm {
+ --pf-v6-c-pagination--inset: var(--pf-t--global--spacer--lg);
+ }
+ .pf-v6-c-pagination.pf-m-inset-xl-on-sm {
+ --pf-v6-c-pagination--inset: var(--pf-t--global--spacer--xl);
+ }
+ .pf-v6-c-pagination.pf-m-inset-2xl-on-sm {
+ --pf-v6-c-pagination--inset: var(--pf-t--global--spacer--2xl);
+ }
+}
+@media (min-width: 48rem) {
+ .pf-v6-c-pagination.pf-m-display-summary-on-md {
+ --pf-v6-c-pagination__nav--Display: var(--pf-v6-c-pagination--m-display-summary__nav--Display);
+ --pf-v6-c-pagination__page-menu--Display: var(--pf-v6-c-pagination--m-display-summary__page-menu--Display);
+ --pf-v6-c-pagination__total-items--Display: var(--pf-v6-c-pagination--m-display-summary__total-items--Display);
+ }
+ .pf-v6-c-pagination.pf-m-display-full-on-md {
+ --pf-v6-c-pagination__nav--Display: var(--pf-v6-c-pagination--m-display-full__nav--Display);
+ --pf-v6-c-pagination__page-menu--Display: var(--pf-v6-c-pagination--m-display-full__page-menu--Display);
+ --pf-v6-c-pagination__total-items--Display: var(--pf-v6-c-pagination--m-display-full__total-items--Display);
+ }
+ .pf-v6-c-pagination.pf-m-inset-none-on-md {
+ --pf-v6-c-pagination--inset: 0;
+ }
+ .pf-v6-c-pagination.pf-m-inset-sm-on-md {
+ --pf-v6-c-pagination--inset: var(--pf-t--global--spacer--sm);
+ }
+ .pf-v6-c-pagination.pf-m-inset-md-on-md {
+ --pf-v6-c-pagination--inset: var(--pf-t--global--spacer--md);
+ }
+ .pf-v6-c-pagination.pf-m-inset-lg-on-md {
+ --pf-v6-c-pagination--inset: var(--pf-t--global--spacer--lg);
+ }
+ .pf-v6-c-pagination.pf-m-inset-xl-on-md {
+ --pf-v6-c-pagination--inset: var(--pf-t--global--spacer--xl);
+ }
+ .pf-v6-c-pagination.pf-m-inset-2xl-on-md {
+ --pf-v6-c-pagination--inset: var(--pf-t--global--spacer--2xl);
+ }
+}
+@media (min-width: 62rem) {
+ .pf-v6-c-pagination.pf-m-display-summary-on-lg {
+ --pf-v6-c-pagination__nav--Display: var(--pf-v6-c-pagination--m-display-summary__nav--Display);
+ --pf-v6-c-pagination__page-menu--Display: var(--pf-v6-c-pagination--m-display-summary__page-menu--Display);
+ --pf-v6-c-pagination__total-items--Display: var(--pf-v6-c-pagination--m-display-summary__total-items--Display);
+ }
+ .pf-v6-c-pagination.pf-m-display-full-on-lg {
+ --pf-v6-c-pagination__nav--Display: var(--pf-v6-c-pagination--m-display-full__nav--Display);
+ --pf-v6-c-pagination__page-menu--Display: var(--pf-v6-c-pagination--m-display-full__page-menu--Display);
+ --pf-v6-c-pagination__total-items--Display: var(--pf-v6-c-pagination--m-display-full__total-items--Display);
+ }
+ .pf-v6-c-pagination.pf-m-inset-none-on-lg {
+ --pf-v6-c-pagination--inset: 0;
+ }
+ .pf-v6-c-pagination.pf-m-inset-sm-on-lg {
+ --pf-v6-c-pagination--inset: var(--pf-t--global--spacer--sm);
+ }
+ .pf-v6-c-pagination.pf-m-inset-md-on-lg {
+ --pf-v6-c-pagination--inset: var(--pf-t--global--spacer--md);
+ }
+ .pf-v6-c-pagination.pf-m-inset-lg-on-lg {
+ --pf-v6-c-pagination--inset: var(--pf-t--global--spacer--lg);
+ }
+ .pf-v6-c-pagination.pf-m-inset-xl-on-lg {
+ --pf-v6-c-pagination--inset: var(--pf-t--global--spacer--xl);
+ }
+ .pf-v6-c-pagination.pf-m-inset-2xl-on-lg {
+ --pf-v6-c-pagination--inset: var(--pf-t--global--spacer--2xl);
+ }
+}
+@media (min-width: 75rem) {
+ .pf-v6-c-pagination.pf-m-display-summary-on-xl {
+ --pf-v6-c-pagination__nav--Display: var(--pf-v6-c-pagination--m-display-summary__nav--Display);
+ --pf-v6-c-pagination__page-menu--Display: var(--pf-v6-c-pagination--m-display-summary__page-menu--Display);
+ --pf-v6-c-pagination__total-items--Display: var(--pf-v6-c-pagination--m-display-summary__total-items--Display);
+ }
+ .pf-v6-c-pagination.pf-m-display-full-on-xl {
+ --pf-v6-c-pagination__nav--Display: var(--pf-v6-c-pagination--m-display-full__nav--Display);
+ --pf-v6-c-pagination__page-menu--Display: var(--pf-v6-c-pagination--m-display-full__page-menu--Display);
+ --pf-v6-c-pagination__total-items--Display: var(--pf-v6-c-pagination--m-display-full__total-items--Display);
+ }
+ .pf-v6-c-pagination.pf-m-inset-none-on-xl {
+ --pf-v6-c-pagination--inset: 0;
+ }
+ .pf-v6-c-pagination.pf-m-inset-sm-on-xl {
+ --pf-v6-c-pagination--inset: var(--pf-t--global--spacer--sm);
+ }
+ .pf-v6-c-pagination.pf-m-inset-md-on-xl {
+ --pf-v6-c-pagination--inset: var(--pf-t--global--spacer--md);
+ }
+ .pf-v6-c-pagination.pf-m-inset-lg-on-xl {
+ --pf-v6-c-pagination--inset: var(--pf-t--global--spacer--lg);
+ }
+ .pf-v6-c-pagination.pf-m-inset-xl-on-xl {
+ --pf-v6-c-pagination--inset: var(--pf-t--global--spacer--xl);
+ }
+ .pf-v6-c-pagination.pf-m-inset-2xl-on-xl {
+ --pf-v6-c-pagination--inset: var(--pf-t--global--spacer--2xl);
+ }
+}
+@media (min-width: 90.625rem) {
+ .pf-v6-c-pagination.pf-m-display-summary-on-2xl {
+ --pf-v6-c-pagination__nav--Display: var(--pf-v6-c-pagination--m-display-summary__nav--Display);
+ --pf-v6-c-pagination__page-menu--Display: var(--pf-v6-c-pagination--m-display-summary__page-menu--Display);
+ --pf-v6-c-pagination__total-items--Display: var(--pf-v6-c-pagination--m-display-summary__total-items--Display);
+ }
+ .pf-v6-c-pagination.pf-m-display-full-on-2xl {
+ --pf-v6-c-pagination__nav--Display: var(--pf-v6-c-pagination--m-display-full__nav--Display);
+ --pf-v6-c-pagination__page-menu--Display: var(--pf-v6-c-pagination--m-display-full__page-menu--Display);
+ --pf-v6-c-pagination__total-items--Display: var(--pf-v6-c-pagination--m-display-full__total-items--Display);
+ }
+ .pf-v6-c-pagination.pf-m-inset-none-on-2xl {
+ --pf-v6-c-pagination--inset: 0;
+ }
+ .pf-v6-c-pagination.pf-m-inset-sm-on-2xl {
+ --pf-v6-c-pagination--inset: var(--pf-t--global--spacer--sm);
+ }
+ .pf-v6-c-pagination.pf-m-inset-md-on-2xl {
+ --pf-v6-c-pagination--inset: var(--pf-t--global--spacer--md);
+ }
+ .pf-v6-c-pagination.pf-m-inset-lg-on-2xl {
+ --pf-v6-c-pagination--inset: var(--pf-t--global--spacer--lg);
+ }
+ .pf-v6-c-pagination.pf-m-inset-xl-on-2xl {
+ --pf-v6-c-pagination--inset: var(--pf-t--global--spacer--xl);
+ }
+ .pf-v6-c-pagination.pf-m-inset-2xl-on-2xl {
+ --pf-v6-c-pagination--inset: var(--pf-t--global--spacer--2xl);
+ }
+}
+
+.pf-v6-c-panel {
+ --pf-v6-c-panel--Width: auto;
+ --pf-v6-c-panel--MinWidth: auto;
+ --pf-v6-c-panel--MaxWidth: none;
+ --pf-v6-c-panel--BackgroundColor: var(--pf-t--global--background--color--primary--default);
+ --pf-v6-c-panel--BoxShadow: none;
+ --pf-v6-c-panel--BorderRadius: var(--pf-t--global--border--radius--small);
+ --pf-v6-c-panel--before--BorderWidth: 0;
+ --pf-v6-c-panel--before--BorderColor: var(--pf-t--global--border--color--default);
+ --pf-v6-c-panel--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
+ --pf-v6-c-panel--m-bordered--before--BorderWidth: var(--pf-t--global--border--width--box--default);
+ --pf-v6-c-panel--m-raised--BoxShadow: var(--pf-t--global--box-shadow--md);
+ --pf-v6-c-panel--m-raised--BackgroundColor: var(--pf-t--global--background--color--floating--default);
+ --pf-v6-c-panel__header--PaddingBlockStart: var(--pf-t--global--spacer--md);
+ --pf-v6-c-panel__header--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
+ --pf-v6-c-panel__header--PaddingBlockEnd: var(--pf-t--global--spacer--md);
+ --pf-v6-c-panel__header--PaddingInlineStart: var(--pf-t--global--spacer--lg);
+ --pf-v6-c-panel__main--MaxHeight: none;
+ --pf-v6-c-panel__main--Overflow: visible;
+ --pf-v6-c-panel__main-body--PaddingBlockStart: var(--pf-t--global--spacer--md);
+ --pf-v6-c-panel__main-body--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
+ --pf-v6-c-panel__main-body--PaddingBlockEnd: var(--pf-t--global--spacer--md);
+ --pf-v6-c-panel__main-body--PaddingInlineStart: var(--pf-t--global--spacer--lg);
+ --pf-v6-c-panel__footer--PaddingBlockStart: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-panel__footer--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
+ --pf-v6-c-panel__footer--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-panel__footer--PaddingInlineStart: var(--pf-t--global--spacer--lg);
+ --pf-v6-c-panel__footer--BoxShadow: none;
+ --pf-v6-c-panel--m-scrollable__main--MaxHeight: 18.75rem;
+ --pf-v6-c-panel--m-scrollable__main--Overflow: auto;
+ --pf-v6-c-panel--m-scrollable__footer--BoxShadow: var(--pf-t--global--box-shadow--md--top);
+ --pf-v6-c-panel--m-scrollable__footer--PaddingBlockStart: var(--pf-t--global--spacer--md);
+ --pf-v6-c-panel--m-scrollable__footer--PaddingBlockEnd: var(--pf-t--global--spacer--md);
+}
+
+.pf-v6-c-panel {
+ position: relative;
+ width: var(--pf-v6-c-panel--Width);
+ min-width: var(--pf-v6-c-panel--MinWidth);
+ max-width: var(--pf-v6-c-panel--MaxWidth);
+ background-color: var(--pf-v6-c-panel--BackgroundColor);
+ border-radius: var(--pf-v6-c-panel--BorderRadius);
+ box-shadow: var(--pf-v6-c-panel--BoxShadow);
+}
+.pf-v6-c-panel::before {
+ position: absolute;
+ inset: 0;
+ pointer-events: none;
+ content: "";
+ border: var(--pf-v6-c-panel--before--BorderWidth) solid var(--pf-v6-c-panel--before--BorderColor);
+ border-radius: var(--pf-v6-c-panel--BorderRadius);
+}
+.pf-v6-c-panel.pf-m-bordered {
+ --pf-v6-c-panel--before--BorderWidth: var(--pf-v6-c-panel--m-bordered--before--BorderWidth);
+}
+.pf-v6-c-panel.pf-m-secondary {
+ --pf-v6-c-panel--BackgroundColor: var(--pf-v6-c-panel--m-secondary--BackgroundColor);
+}
+.pf-v6-c-panel.pf-m-raised {
+ --pf-v6-c-panel--BackgroundColor: var(--pf-v6-c-panel--m-raised--BackgroundColor);
+ --pf-v6-c-panel--BoxShadow: var(--pf-v6-c-panel--m-raised--BoxShadow);
+}
+.pf-v6-c-panel.pf-m-scrollable {
+ --pf-v6-c-panel__main--MaxHeight: var(--pf-v6-c-panel--m-scrollable__main--MaxHeight);
+ --pf-v6-c-panel__main--Overflow: var(--pf-v6-c-panel--m-scrollable__main--Overflow);
+ --pf-v6-c-panel__footer--BoxShadow: var(--pf-v6-c-panel--m-scrollable__footer--BoxShadow);
+ --pf-v6-c-panel__footer--PaddingBlockStart: var(--pf-v6-c-panel--m-scrollable__footer--PaddingBlockStart);
+ --pf-v6-c-panel__footer--PaddingBlockEnd: var(--pf-v6-c-panel--m-scrollable__footer--PaddingBlockEnd);
+}
+
+.pf-v6-c-panel__header {
+ padding-block-start: var(--pf-v6-c-panel__header--PaddingBlockStart);
+ padding-block-end: var(--pf-v6-c-panel__header--PaddingBlockEnd);
+ padding-inline-start: var(--pf-v6-c-panel__header--PaddingInlineStart);
+ padding-inline-end: var(--pf-v6-c-panel__header--PaddingInlineEnd);
+}
+
+.pf-v6-c-panel__main {
+ max-height: var(--pf-v6-c-panel__main--MaxHeight);
+ overflow: var(--pf-v6-c-panel__main--Overflow);
+}
+
+.pf-v6-c-panel__main-body {
+ padding-block-start: var(--pf-v6-c-panel__main-body--PaddingBlockStart);
+ padding-block-end: var(--pf-v6-c-panel__main-body--PaddingBlockEnd);
+ padding-inline-start: var(--pf-v6-c-panel__main-body--PaddingInlineStart);
+ padding-inline-end: var(--pf-v6-c-panel__main-body--PaddingInlineEnd);
+}
+
+.pf-v6-c-panel__footer {
+ padding-block-start: var(--pf-v6-c-panel__footer--PaddingBlockStart);
+ padding-block-end: var(--pf-v6-c-panel__footer--PaddingBlockEnd);
+ padding-inline-start: var(--pf-v6-c-panel__footer--PaddingInlineStart);
+ padding-inline-end: var(--pf-v6-c-panel__footer--PaddingInlineEnd);
+ box-shadow: var(--pf-v6-c-panel__footer--BoxShadow);
+}
+
+.pf-v6-c-popover {
+ --pf-v6-c-popover--FontSize: var(--pf-t--global--font--size--body--sm);
+ --pf-v6-c-popover--MinWidth: calc(var(--pf-v6-c-popover__content--PaddingInlineStart) + var(--pf-v6-c-popover__content--PaddingInlineEnd) + 18.75rem);
+ --pf-v6-c-popover--MaxWidth: calc(var(--pf-v6-c-popover__content--PaddingInlineStart) + var(--pf-v6-c-popover__content--PaddingInlineEnd) + 18.75rem);
+ --pf-v6-c-popover--BoxShadow: var(--pf-t--global--box-shadow--md);
+ --pf-v6-c-popover--BorderRadius: var(--pf-t--global--border--radius--medium);
+ --pf-v6-c-popover--m-danger__title-icon--Color: var(--pf-t--global--icon--color--status--danger--default);
+ --pf-v6-c-popover--m-warning__title-icon--Color: var(--pf-t--global--icon--color--status--warning--default);
+ --pf-v6-c-popover--m-success__title-icon--Color: var(--pf-t--global--icon--color--status--success--default);
+ --pf-v6-c-popover--m-info__title-icon--Color: var(--pf-t--global--icon--color--status--info--default);
+ --pf-v6-c-popover--m-custom__title-icon--Color: var(--pf-t--global--icon--color--status--custom--default);
+ --pf-v6-c-popover__content--BackgroundColor: var(--pf-t--global--background--color--floating--default);
+ --pf-v6-c-popover__content--PaddingBlockStart: var(--pf-t--global--spacer--md);
+ --pf-v6-c-popover__content--PaddingInlineEnd: var(--pf-t--global--spacer--md);
+ --pf-v6-c-popover__content--PaddingBlockEnd: var(--pf-t--global--spacer--md);
+ --pf-v6-c-popover__content--PaddingInlineStart: var(--pf-t--global--spacer--md);
+ --pf-v6-c-popover__content--BorderRadius: var(--pf-t--global--border--radius--medium);
+ --pf-v6-c-popover__arrow--Width: 0.9375rem;
+ --pf-v6-c-popover__arrow--Height: 0.9375rem;
+ --pf-v6-c-popover__arrow--BoxShadow: var(--pf-t--global--box-shadow--md);
+ --pf-v6-c-popover__arrow--BackgroundColor: var(--pf-t--global--background--color--floating--default);
+ --pf-v6-c-popover__arrow--m-top--TranslateX: -50%;
+ --pf-v6-c-popover__arrow--m-top--TranslateY: 50%;
+ --pf-v6-c-popover__arrow--m-top--Rotate: 45deg;
+ --pf-v6-c-popover__arrow--m-right--TranslateX: -50%;
+ --pf-v6-c-popover__arrow--m-right--TranslateY: -50%;
+ --pf-v6-c-popover__arrow--m-right--Rotate: 45deg;
+ --pf-v6-c-popover__arrow--m-bottom--TranslateX: -50%;
+ --pf-v6-c-popover__arrow--m-bottom--TranslateY: -50%;
+ --pf-v6-c-popover__arrow--m-bottom--Rotate: 45deg;
+ --pf-v6-c-popover__arrow--m-left--TranslateX: 50%;
+ --pf-v6-c-popover__arrow--m-left--TranslateY: -50%;
+ --pf-v6-c-popover__arrow--m-left--Rotate: 45deg;
+ --pf-v6-c-popover__arrow--m-inline-top--InsetBlockStart: var(--pf-t--global--border--radius--medium);
+ --pf-v6-c-popover__arrow--m-inline-bottom--InsetBlockEnd: var(--pf-t--global--border--radius--medium);
+ --pf-v6-c-popover__arrow--m-block-left--InsetInlineStart: var(--pf-t--global--border--radius--medium);
+ --pf-v6-c-popover__arrow--m-block-right--InsetInlineEnd: var(--pf-t--global--border--radius--medium);
+ --pf-v6-c-popover__close--InsetBlockStart: calc(var(--pf-v6-c-popover__content--PaddingBlockStart) - var(--pf-t--global--spacer--control--vertical--default));
+ --pf-v6-c-popover__close--InsetInlineEnd: var(--pf-v6-c-popover__content--PaddingInlineEnd);
+ --pf-v6-c-popover__close--sibling--PaddingInlineEnd: var(--pf-t--global--spacer--2xl);
+ --pf-v6-c-popover__header--MarginBlockEnd: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-popover__title-text--Color: var(--pf-t--global--text--color--regular);
+ --pf-v6-c-popover__title-text--FontWeight: var(--pf-t--global--font--weight--body--bold);
+ --pf-v6-c-popover__title-text--FontSize: var(--pf-t--global--font--size--body--default);
+ --pf-v6-c-popover__title-icon--MarginInlineEnd: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-popover__title-icon--Color: var(--pf-t--global--icon--color--regular);
+ --pf-v6-c-popover__title-icon--FontSize: var(--pf-t--global--icon--size--font--body--default);
+ --pf-v6-c-popover__footer--MarginBlockStart: var(--pf-t--global--spacer--md);
+}
+
+.pf-v6-c-popover {
+ position: relative;
+ min-width: var(--pf-v6-c-popover--MinWidth);
+ max-width: var(--pf-v6-c-popover--MaxWidth);
+ font-size: var(--pf-v6-c-popover--FontSize);
+ border-radius: var(--pf-v6-c-popover--BorderRadius);
+ box-shadow: var(--pf-v6-c-popover--BoxShadow);
+}
+.pf-v6-c-popover.pf-m-no-padding {
+ --pf-v6-c-popover__content--PaddingBlockStart: 0px;
+ --pf-v6-c-popover__content--PaddingInlineEnd: 0px;
+ --pf-v6-c-popover__content--PaddingBlockEnd: 0px;
+ --pf-v6-c-popover__content--PaddingInlineStart: 0px;
+}
+.pf-v6-c-popover.pf-m-width-auto {
+ --pf-v6-c-popover--MinWidth: auto;
+ --pf-v6-c-popover--MaxWidth: none;
+}
+.pf-v6-c-popover:is(.pf-m-top,
+.pf-m-top-left,
+.pf-m-top-right) {
+ --pf-v6-c-popover__arrow--InsetBlockEnd: var(--pf-v6-c-popover--m-top--InsetBlockEnd, 0);
+ --pf-v6-c-popover__arrow--InsetInlineStart: var(--pf-v6-c-popover--m-top--InsetInlineStart, 50%);
+ --pf-v6-c-popover__arrow--TranslateX: var(--pf-v6-c-popover__arrow--m-top--TranslateX);
+ --pf-v6-c-popover__arrow--TranslateY: var(--pf-v6-c-popover__arrow--m-top--TranslateY);
+ --pf-v6-c-popover__arrow--Rotate: var(--pf-v6-c-popover__arrow--m-top--Rotate);
+}
+.pf-v6-c-popover:is(.pf-m-bottom,
+.pf-m-bottom-left,
+.pf-m-bottom-right) {
+ --pf-v6-c-popover__arrow--InsetBlockStart: var(--pf-v6-c-popover--m-bottom--InsetBlockStart, 0);
+ --pf-v6-c-popover__arrow--InsetInlineStart: var(--pf-v6-c-popover--m-bottom--InsetInlineStart, 50%);
+ --pf-v6-c-popover__arrow--TranslateX: var(--pf-v6-c-popover__arrow--m-bottom--TranslateX);
+ --pf-v6-c-popover__arrow--TranslateY: var(--pf-v6-c-popover__arrow--m-bottom--TranslateY);
+ --pf-v6-c-popover__arrow--Rotate: var(--pf-v6-c-popover__arrow--m-bottom--Rotate);
+}
+.pf-v6-c-popover:is(.pf-m-left,
+.pf-m-left-top,
+.pf-m-left-bottom) {
+ --pf-v6-c-popover__arrow--InsetBlockStart: var(--pf-v6-c-popover--m-left--InsetBlockStart, 50%);
+ --pf-v6-c-popover__arrow--InsetInlineEnd: var(--pf-v6-c-popover--m-left--InsetInlineEnd, 0);
+ --pf-v6-c-popover__arrow--TranslateX: var(--pf-v6-c-popover__arrow--m-left--TranslateX);
+ --pf-v6-c-popover__arrow--TranslateY: var(--pf-v6-c-popover__arrow--m-left--TranslateY);
+ --pf-v6-c-popover__arrow--Rotate: var(--pf-v6-c-popover__arrow--m-left--Rotate);
+}
+.pf-v6-c-popover:is(.pf-m-right,
+.pf-m-right-top,
+.pf-m-right-bottom) {
+ --pf-v6-c-popover__arrow--InsetBlockStart: var(--pf-v6-c-popover--m-right--InsetBlockStart, 50%);
+ --pf-v6-c-popover__arrow--InsetInlineStart: var(--pf-v6-c-popover--m-right--InsetInlineStart, 0);
+ --pf-v6-c-popover__arrow--TranslateX: var(--pf-v6-c-popover__arrow--m-right--TranslateX);
+ --pf-v6-c-popover__arrow--TranslateY: var(--pf-v6-c-popover__arrow--m-right--TranslateY);
+ --pf-v6-c-popover__arrow--Rotate: var(--pf-v6-c-popover__arrow--m-right--Rotate);
+}
+.pf-v6-c-popover:is(.pf-m-left-top,
+.pf-m-right-top) {
+ --pf-v6-c-popover__arrow--InsetBlockStart: var(--pf-v6-c-popover__arrow--m-inline-top--InsetBlockStart);
+ --pf-v6-c-popover__arrow--TranslateY: var(--pf-v6-c-popover__arrow--m-top--TranslateY);
+}
+.pf-v6-c-popover:is(.pf-m-left-bottom,
+.pf-m-right-bottom) {
+ --pf-v6-c-popover__arrow--InsetBlockStart: auto;
+ --pf-v6-c-popover__arrow--InsetBlockEnd: var(--pf-v6-c-popover__arrow--m-inline-bottom--InsetBlockEnd);
+}
+.pf-v6-c-popover:is(.pf-m-top-left,
+.pf-m-bottom-left) {
+ --pf-v6-c-popover__arrow--InsetInlineStart: var(--pf-v6-c-popover__arrow--m-block-left--InsetInlineStart);
+ --pf-v6-c-popover__arrow--TranslateX: var(--pf-v6-c-popover__arrow--m-left--TranslateX);
+}
+.pf-v6-c-popover:is(.pf-m-top-right,
+.pf-m-bottom-right) {
+ --pf-v6-c-popover__arrow--InsetInlineEnd: var(--pf-v6-c-popover__arrow--m-block-right--InsetInlineEnd);
+ --pf-v6-c-popover__arrow--InsetInlineStart: auto;
+}
+.pf-v6-c-popover.pf-m-danger {
+ --pf-v6-c-popover__title-icon--Color: var(--pf-v6-c-popover--m-danger__title-icon--Color);
+}
+.pf-v6-c-popover.pf-m-warning {
+ --pf-v6-c-popover__title-icon--Color: var(--pf-v6-c-popover--m-warning__title-icon--Color);
+}
+.pf-v6-c-popover.pf-m-success {
+ --pf-v6-c-popover__title-icon--Color: var(--pf-v6-c-popover--m-success__title-icon--Color);
+}
+.pf-v6-c-popover.pf-m-custom {
+ --pf-v6-c-popover__title-icon--Color: var(--pf-v6-c-popover--m-custom__title-icon--Color);
+}
+.pf-v6-c-popover.pf-m-info {
+ --pf-v6-c-popover__title-icon--Color: var(--pf-v6-c-popover--m-info__title-icon--Color);
+}
+
+.pf-v6-c-popover__content {
+ position: relative;
+ padding-block-start: var(--pf-v6-c-popover__content--PaddingBlockStart);
+ padding-block-end: var(--pf-v6-c-popover__content--PaddingBlockEnd);
+ padding-inline-start: var(--pf-v6-c-popover__content--PaddingInlineStart);
+ padding-inline-end: var(--pf-v6-c-popover__content--PaddingInlineEnd);
+ background-color: var(--pf-v6-c-popover__content--BackgroundColor);
+ border-radius: var(--pf-v6-c-popover__content--BorderRadius);
+}
+
+.pf-v6-c-popover__close {
+ position: absolute;
+ inset-block-start: var(--pf-v6-c-popover__close--InsetBlockStart);
+ inset-inline-end: var(--pf-v6-c-popover__close--InsetInlineEnd);
+}
+.pf-v6-c-popover__close + * {
+ padding-inline-end: var(--pf-v6-c-popover__close--sibling--PaddingInlineEnd);
+}
+
+.pf-v6-c-popover__arrow {
+ position: absolute;
+ top: var(--pf-v6-c-popover__arrow--InsetBlockStart, auto);
+ right: var(--pf-v6-c-popover__arrow--InsetInlineEnd, auto);
+ bottom: var(--pf-v6-c-popover__arrow--InsetBlockEnd, auto);
+ left: var(--pf-v6-c-popover__arrow--InsetInlineStart, auto);
+ width: var(--pf-v6-c-popover__arrow--Width);
+ height: var(--pf-v6-c-popover__arrow--Height);
+ pointer-events: none;
+ background-color: var(--pf-v6-c-popover__arrow--BackgroundColor);
+ box-shadow: var(--pf-v6-c-popover__arrow--BoxShadow);
+ transform: translateX(var(--pf-v6-c-popover__arrow--TranslateX, 0)) translateY(var(--pf-v6-c-popover__arrow--TranslateY, 0)) rotate(var(--pf-v6-c-popover__arrow--Rotate, 0));
+}
+
+.pf-v6-c-popover__header {
+ margin-block-end: var(--pf-v6-c-popover__header--MarginBlockEnd);
+}
+
+.pf-v6-c-popover__title {
+ display: flex;
+ flex: 0 0 auto;
+}
+
+.pf-v6-c-popover__title-icon {
+ margin-inline-end: var(--pf-v6-c-popover__title-icon--MarginInlineEnd);
+ font-size: var(--pf-v6-c-popover__title-icon--FontSize);
+ color: var(--pf-v6-c-popover__title-icon--Color);
+}
+
+.pf-v6-c-popover__title-text {
+ min-width: 0;
+ font-size: var(--pf-v6-c-popover__title-text--FontSize);
+ font-weight: var(--pf-v6-c-popover__title-text--FontWeight);
+ color: var(--pf-v6-c-popover__title-text--Color);
+ overflow-wrap: break-word;
+}
+
+.pf-v6-c-popover__body {
+ word-wrap: break-word;
+}
+
+.pf-v6-c-popover__footer {
+ margin-block-start: var(--pf-v6-c-popover__footer--MarginBlockStart);
+}
+
+.pf-v6-c-progress {
+ --pf-v6-c-progress--GridGap: var(--pf-t--global--spacer--md);
+ --pf-v6-c-progress__bar--Height: var(--pf-t--global--spacer--md);
+ --pf-v6-c-progress__bar--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
+ --pf-v6-c-progress__bar--BorderRadius: var(--pf-t--global--border--radius--medium);
+ --pf-v6-c-progress__measure--m-static-width--MinWidth: 4.5ch;
+ --pf-v6-c-progress__status--Gap: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-progress__status-icon--Color: var(--pf-t--global--icon--color--regular);
+ --pf-v6-c-progress__indicator--Height: var(--pf-v6-c-progress__bar--Height);
+ --pf-v6-c-progress__indicator--BackgroundColor: var(--pf-t--global--color--brand--default);
+ --pf-v6-c-progress__helper-text--MarginBlockStart: calc(var(--pf-t--global--spacer--sm) - var(--pf-v6-c-progress--GridGap));
+ --pf-v6-c-progress--m-success__indicator--BackgroundColor: var(--pf-t--global--color--status--success--default);
+ --pf-v6-c-progress--m-warning__indicator--BackgroundColor: var(--pf-t--global--color--status--warning--default);
+ --pf-v6-c-progress--m-danger__indicator--BackgroundColor: var(--pf-t--global--color--status--danger--default);
+ --pf-v6-c-progress--m-success__status-icon--Color: var(--pf-t--global--icon--color--status--success--default);
+ --pf-v6-c-progress--m-warning__status-icon--Color: var(--pf-t--global--icon--color--status--warning--default);
+ --pf-v6-c-progress--m-danger__status-icon--Color: var(--pf-t--global--icon--color--status--danger--default);
+ --pf-v6-c-progress--m-inside__indicator--MinWidth: var(--pf-t--global--spacer--xl);
+ --pf-v6-c-progress--m-inside__measure--Color: var(--pf-t--global--text--color--on-brand--default);
+ --pf-v6-c-progress--m-success--m-inside__measure--Color: var(--pf-t--global--text--color--status--on-success--default);
+ --pf-v6-c-progress--m-warning--m-inside__measure--Color: var(--pf-t--global--text--color--status--on-warning--default);
+ --pf-v6-c-progress--m-danger--m-inside__measure--Color: var(--pf-t--global--text--color--status--on-danger--default);
+ --pf-v6-c-progress--m-inside__measure--FontSize: var(--pf-t--global--font--size--sm);
+ --pf-v6-c-progress--m-outside__measure--FontSize: var(--pf-t--global--font--size--sm);
+ --pf-v6-c-progress--m-sm__bar--Height: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-progress--m-sm__measure--FontSize: var(--pf-t--global--font--size--body--sm);
+ --pf-v6-c-progress--m-lg__bar--Height: var(--pf-t--global--spacer--lg);
+}
+
+.pf-v6-c-progress {
+ display: grid;
+ grid-template-rows: 1fr auto;
+ grid-template-columns: auto auto;
+ grid-gap: var(--pf-v6-c-progress--GridGap);
+ align-items: end;
+}
+.pf-v6-c-progress.pf-m-sm {
+ --pf-v6-c-progress__bar--Height: var(--pf-v6-c-progress--m-sm__bar--Height);
+}
+.pf-v6-c-progress.pf-m-sm .pf-v6-c-progress__measure {
+ font-size: var(--pf-v6-c-progress--m-sm__measure--FontSize);
+}
+.pf-v6-c-progress.pf-m-lg {
+ --pf-v6-c-progress__bar--Height: var(--pf-v6-c-progress--m-lg__bar--Height);
+}
+.pf-v6-c-progress.pf-m-inside .pf-v6-c-progress__indicator {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ min-width: var(--pf-v6-c-progress--m-inside__indicator--MinWidth);
+}
+.pf-v6-c-progress.pf-m-inside .pf-v6-c-progress__measure {
+ font-size: var(--pf-v6-c-progress--m-inside__measure--FontSize);
+ color: var(--pf-v6-c-progress--m-inside__measure--Color);
+ text-align: center;
+}
+.pf-v6-c-progress.pf-m-outside .pf-v6-c-progress__description {
+ grid-column: 1/3;
+}
+.pf-v6-c-progress.pf-m-outside .pf-v6-c-progress__status {
+ grid-row: 2/3;
+ grid-column: 2/3;
+ align-self: center;
+}
+.pf-v6-c-progress.pf-m-outside .pf-v6-c-progress__measure {
+ display: inline-block;
+ font-size: var(--pf-v6-c-progress--m-outside__measure--FontSize);
+}
+.pf-v6-c-progress.pf-m-outside .pf-v6-c-progress__measure.pf-m-static-width {
+ min-width: var(--pf-v6-c-progress__measure--m-static-width--MinWidth);
+ text-align: start;
+}
+.pf-v6-c-progress.pf-m-outside .pf-v6-c-progress__bar,
+.pf-v6-c-progress.pf-m-outside .pf-v6-c-progress__indicator {
+ grid-column: 1/2;
+}
+.pf-v6-c-progress.pf-m-singleline {
+ grid-template-rows: 1fr;
+}
+.pf-v6-c-progress.pf-m-singleline .pf-v6-c-progress__description {
+ display: none;
+}
+.pf-v6-c-progress.pf-m-singleline .pf-v6-c-progress__bar {
+ grid-row: 1/2;
+ grid-column: 1/2;
+}
+.pf-v6-c-progress.pf-m-singleline .pf-v6-c-progress__status {
+ grid-row: 1/2;
+ grid-column: 2/3;
+}
+.pf-v6-c-progress.pf-m-outside, .pf-v6-c-progress.pf-m-singleline {
+ grid-template-columns: 1fr fit-content(50%);
+}
+.pf-v6-c-progress.pf-m-success {
+ --pf-v6-c-progress__indicator--BackgroundColor: var(--pf-v6-c-progress--m-success__indicator--BackgroundColor);
+ --pf-v6-c-progress__status-icon--Color: var(--pf-v6-c-progress--m-success__status-icon--Color);
+ --pf-v6-c-progress--m-inside__measure--Color: var(--pf-v6-c-progress--m-success--m-inside__measure--Color);
+}
+.pf-v6-c-progress.pf-m-warning {
+ --pf-v6-c-progress__indicator--BackgroundColor: var(--pf-v6-c-progress--m-warning__indicator--BackgroundColor);
+ --pf-v6-c-progress__status-icon--Color: var(--pf-v6-c-progress--m-warning__status-icon--Color);
+ --pf-v6-c-progress--m-inside__measure--Color: var(--pf-v6-c-progress--m-warning--m-inside__measure--Color);
+}
+.pf-v6-c-progress.pf-m-danger {
+ --pf-v6-c-progress__indicator--BackgroundColor: var(--pf-v6-c-progress--m-danger__indicator--BackgroundColor);
+ --pf-v6-c-progress__status-icon--Color: var(--pf-v6-c-progress--m-danger__status-icon--Color);
+ --pf-v6-c-progress--m-inside__measure--Color: var(--pf-v6-c-progress--m-danger--m-inside__measure--Color);
+}
+@media (prefers-reduced-motion: no-preference) {
+ .pf-v6-c-progress.pf-m-danger .pf-v6-c-progress__bar {
+ 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-progress.pf-m-danger .pf-v6-c-progress__status-icon {
+ --pf-v6-c-progress--TransitionDuration--Opacity: var(--pf-t--global--motion--duration--fade--default);
+ --pf-v6-c-progress--TransitionTimingFunction--Opacity: var(--pf-t--global--motion--timing-function--default);
+ animation-name: pf-v6-global-fade-in;
+ animation-duration: var(--pf-v6-c-progress--TransitionDuration--Opacity);
+ animation-timing-function: var(--pf-v6-c-progress--TransitionTimingFunction--Opacity);
+}
+
+.pf-v6-c-progress__description {
+ grid-column: 1/2;
+ word-break: break-word;
+}
+.pf-v6-c-progress__description.pf-m-truncate {
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+}
+
+.pf-v6-c-progress__status {
+ display: flex;
+ grid-row: 1/2;
+ grid-column: 2/3;
+ gap: var(--pf-v6-c-progress__status--Gap);
+ align-items: flex-start;
+ justify-content: flex-end;
+ text-align: end;
+ word-break: break-word;
+}
+
+.pf-v6-c-progress__status-icon {
+ color: var(--pf-v6-c-progress__status-icon--Color);
+}
+
+.pf-v6-c-progress__bar::before,
+.pf-v6-c-progress__indicator {
+ inset-block-start: 0;
+ inset-inline-start: 0;
+}
+
+.pf-v6-c-progress__bar {
+ position: relative;
+ grid-row: 2/3;
+ grid-column: 1/3;
+ align-self: center;
+ height: var(--pf-v6-c-progress__bar--Height);
+ overflow: hidden;
+ background-color: var(--pf-v6-c-progress__bar--BackgroundColor);
+ border-radius: var(--pf-v6-c-progress__bar--BorderRadius);
+}
+
+.pf-v6-c-progress__indicator {
+ position: absolute;
+ height: var(--pf-v6-c-progress__indicator--Height);
+ background-color: var(--pf-v6-c-progress__indicator--BackgroundColor);
+}
+
+.pf-v6-c-progress__helper-text {
+ grid-row: 3/4;
+ grid-column: 1/3;
+ margin-block-start: var(--pf-v6-c-progress__helper-text--MarginBlockStart);
+}
+
+.pf-v6-c-progress__measure {
+ font-variant-numeric: tabular-nums;
+}
+
+.pf-v6-c-progress-stepper {
+ --pf-v6-c-progress-stepper--m-vertical--GridAutoFlow: row;
+ --pf-v6-c-progress-stepper--m-vertical--GridTemplateColumns: auto 1fr;
+ --pf-v6-c-progress-stepper--m-vertical__step-connector--before--InsetBlockStart: 0;
+ --pf-v6-c-progress-stepper--m-vertical__step-connector--before--InsetInlineStart: calc(var(--pf-v6-c-progress-stepper__step-icon--Width) / 2);
+ --pf-v6-c-progress-stepper--m-vertical__step-connector--before--Width: auto;
+ --pf-v6-c-progress-stepper--m-vertical__step-connector--before--Height: 100%;
+ --pf-v6-c-progress-stepper--m-vertical__step-connector--before--BorderInlineEndWidth: var(--pf-t--global--border--width--box--default);
+ --pf-v6-c-progress-stepper--m-vertical__step-connector--before--BorderInlineEndColor: var(--pf-t--global--border--color--default);
+ --pf-v6-c-progress-stepper--m-vertical__step-connector--before--BorderBlockEndWidth: 0;
+ --pf-v6-c-progress-stepper--m-vertical__step-connector--before--BorderBlockEndColor: transparent;
+ --pf-v6-c-progress-stepper--m-vertical__step-connector--before--Transform: translateX(-50%);
+ --pf-v6-c-progress-stepper--m-vertical__step-main--MarginBlockStart: 0px;
+ --pf-v6-c-progress-stepper--m-vertical__step-main--MarginInlineEnd: 0;
+ --pf-v6-c-progress-stepper--m-vertical__step-main--MarginBlockEnd: var(--pf-t--global--spacer--xl);
+ --pf-v6-c-progress-stepper--m-vertical__step-main--MarginInlineStart: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-progress-stepper--m-vertical--m-compact--GridTemplateColumns: 1fr;
+ --pf-v6-c-progress-stepper--m-vertical--m-compact__step-connector--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-progress-stepper--m-vertical--m-compact__step-connector--GridRow: auto;
+ --pf-v6-c-progress-stepper--m-vertical--m-compact__step-main--MarginBlockStart: 0;
+ --pf-v6-c-progress-stepper--m-vertical--m-compact__step-main--MarginInlineEnd: 0;
+ --pf-v6-c-progress-stepper--m-vertical--m-compact__step-main--MarginInlineStart: 0;
+ --pf-v6-c-progress-stepper--m-vertical--m-center__step-main--MarginInlineEnd: 0;
+ --pf-v6-c-progress-stepper--m-vertical--m-center__step-main--MarginInlineStart: 0;
+ --pf-v6-c-progress-stepper--m-horizontal--GridAutoFlow: column;
+ --pf-v6-c-progress-stepper--m-horizontal--GridTemplateColumns: initial;
+ --pf-v6-c-progress-stepper--m-horizontal__step-connector--before--InsetBlockStart: calc(var(--pf-v6-c-progress-stepper__step-icon--Height) / 2);
+ --pf-v6-c-progress-stepper--m-horizontal__step-connector--before--InsetInlineStart: 0;
+ --pf-v6-c-progress-stepper--m-horizontal__step-connector--before--Width: 100%;
+ --pf-v6-c-progress-stepper--m-horizontal__step-connector--before--Height: auto;
+ --pf-v6-c-progress-stepper--m-horizontal__step-connector--before--BorderInlineEndWidth: 0;
+ --pf-v6-c-progress-stepper--m-horizontal__step-connector--before--BorderInlineEndColor: unset;
+ --pf-v6-c-progress-stepper--m-horizontal__step-connector--before--BorderBlockEndWidth: var(--pf-t--global--border--width--divider--default);
+ --pf-v6-c-progress-stepper--m-horizontal__step-connector--before--BorderBlockEndColor: var(--pf-t--global--border--color--default);
+ --pf-v6-c-progress-stepper--m-horizontal__step-connector--before--Transform: translateY(-50%);
+ --pf-v6-c-progress-stepper--m-horizontal__step-main--MarginBlockStart: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-progress-stepper--m-horizontal__step-main--MarginInlineEnd: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-progress-stepper--m-horizontal__step-main--MarginBlockEnd: 0;
+ --pf-v6-c-progress-stepper--m-horizontal__step-main--MarginInlineStart: 0;
+ --pf-v6-c-progress-stepper--m-horizontal--m-compact--GridTemplateColumns: repeat(auto-fill, 1.75rem);
+ --pf-v6-c-progress-stepper--m-horizontal--m-compact__step-connector--PaddingBlockEnd: 0;
+ --pf-v6-c-progress-stepper--m-horizontal--m-compact__step-connector--GridRow: 2;
+ --pf-v6-c-progress-stepper--m-compact--GridAutoFlow: row;
+ --pf-v6-c-progress-stepper--m-compact__step-main--MarginBlockStart: 0;
+ --pf-v6-c-progress-stepper--m-compact__step-main--MarginBlockEnd: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-progress-stepper--m-compact__step-connector--MinWidth: 1.75rem;
+ --pf-v6-c-progress-stepper--m-compact__step-icon--Width: 1.125rem;
+ --pf-v6-c-progress-stepper--m-compact__step-icon--FontSize: var(--pf-t--global--icon--size--font--body--sm);
+ --pf-v6-c-progress-stepper--m-compact__step-title--FontSize: var(--pf-t--global--font--size--body--lg);
+ --pf-v6-c-progress-stepper--m-compact__step-title--FontWeight: var(--pf-t--global--font--weight--body--bold);
+ --pf-v6-c-progress-stepper--m-compact__pficon--MarginBlockStart: 2px;
+ --pf-v6-c-progress-stepper--m-compact__fa-exclamation-triangle--MarginBlockStart: -3px;
+ --pf-v6-c-progress-stepper--m-center__step-connector--before--InsetInlineStart: 50%;
+ --pf-v6-c-progress-stepper--m-center--GridTemplateColumns: 1fr;
+ --pf-v6-c-progress-stepper--m-center__step-connector--JustifyContent: center;
+ --pf-v6-c-progress-stepper--m-center__step-main--MarginInlineEnd: var(--pf-t--global--spacer--xs);
+ --pf-v6-c-progress-stepper--m-center__step-main--MarginInlineStart: var(--pf-t--global--spacer--xs);
+ --pf-v6-c-progress-stepper--m-center__step-main--TextAlign: center;
+ --pf-v6-c-progress-stepper--m-center__step-description--MarginInlineEnd: 0;
+ --pf-v6-c-progress-stepper--m-center__step-description--MarginInlineStart: 0;
+ --pf-v6-c-progress-stepper--GridTemplateRows: auto 1fr;
+ --pf-v6-c-progress-stepper__step-connector--JustifyContent: flex-start;
+ --pf-v6-c-progress-stepper__step-icon--ZIndex: var(--pf-t--global--z-index--xs);
+ --pf-v6-c-progress-stepper__step-icon--Width: 1.5rem;
+ --pf-v6-c-progress-stepper__step-icon--Height: var(--pf-v6-c-progress-stepper__step-icon--Width);
+ --pf-v6-c-progress-stepper__step-icon--FontSize: var(--pf-t--global--icon--size--font--body--default);
+ --pf-v6-c-progress-stepper__step-icon--Color: var(--pf-t--global--icon--color--regular);
+ --pf-v6-c-progress-stepper__step-icon--BackgroundColor: var(--pf-t--global--background--color--primary--default);
+ --pf-v6-c-progress-stepper__step-icon--BorderWidth: var(--pf-t--global--border--width--box--default);
+ --pf-v6-c-progress-stepper__step-icon--BorderColor: var(--pf-t--global--border--color--default);
+ --pf-v6-c-progress-stepper__step--m-current__step-icon--Color: var(--pf-t--global--icon--color--brand--default);
+ --pf-v6-c-progress-stepper__step--m-info__step-icon--Color: var(--pf-t--global--icon--color--status--info--default);
+ --pf-v6-c-progress-stepper__step--m-success__step-icon--Color: var(--pf-t--global--icon--color--status--success--default);
+ --pf-v6-c-progress-stepper__step--m-warning__step-icon--Color: var(--pf-t--global--icon--color--status--warning--default);
+ --pf-v6-c-progress-stepper__step--m-danger__step-icon--Color: var(--pf-t--global--icon--color--status--danger--default);
+ --pf-v6-c-progress-stepper__step--m-custom__step-icon--Color: var(--pf-t--global--icon--color--status--custom--default);
+ --pf-v6-c-progress-stepper__pficon--MarginBlockStart: 3px;
+ --pf-v6-c-progress-stepper__fa-exclamation-triangle--MarginBlockStart: -2px;
+ --pf-v6-c-progress-stepper__step-title--Color: var(--pf-t--global--text--color--regular);
+ --pf-v6-c-progress-stepper__step-title--TextAlign: start;
+ --pf-v6-c-progress-stepper__step-title--FontSize: var(--pf-t--global--font--size--body--lg);
+ --pf-v6-c-progress-stepper__step-title--FontWeight: var(--pf-t--global--font--weight--body--default);
+ --pf-v6-c-progress-stepper__step--m-current__step-title--FontWeight: var(--pf-t--global--font--weight--body--bold);
+ --pf-v6-c-progress-stepper__step--m-current__step-title--Color: var(--pf-t--global--text--color--regular);
+ --pf-v6-c-progress-stepper__step--m-pending__step-title--Color: var(--pf-t--global--text--color--subtle);
+ --pf-v6-c-progress-stepper__step--m-danger__step-title--Color: var(--pf-t--global--text--color--status--danger--default);
+ --pf-v6-c-progress-stepper__step-title--m-help-text--PaddingInlineStart: 0;
+ --pf-v6-c-progress-stepper__step-title--m-help-text--PaddingInlineEnd: 0;
+ --pf-v6-c-progress-stepper__step-title--m-help-text--TextDecorationLine: var(--pf-t--global--text-decoration--help-text--line--default);
+ --pf-v6-c-progress-stepper__step-title--m-help-text--TextDecorationStyle: var(--pf-t--global--text-decoration--help-text--style--default);
+ --pf-v6-c-progress-stepper__step-title--m-help-text--TextUnderlineOffset: 0.25rem;
+ --pf-v6-c-progress-stepper__step-title--m-help-text--hover--TextDecorationLine: var(--pf-t--global--text-decoration--help-text--line--hover);
+ --pf-v6-c-progress-stepper__step-title--m-help-text--hover--TextDecorationStyle: var(--pf-t--global--text-decoration--help-text--style--hover);
+ --pf-v6-c-progress-stepper__step-title--m-help-text--hover--Color: var(--pf-t--global--text--color--brand--hover);
+ --pf-v6-c-progress-stepper__step--m-danger__step-title--m-help-text--hover--Color: var(--pf-t--global--text--color--status--danger--hover);
+ --pf-v6-c-progress-stepper__step-description--MarginBlockStart: var(--pf-t--global--spacer--xs);
+ --pf-v6-c-progress-stepper__step-description--FontSize: var(--pf-t--global--font--size--body--sm);
+ --pf-v6-c-progress-stepper__step-description--Color: var(--pf-t--global--text--color--subtle);
+ --pf-v6-c-progress-stepper__step-description--TextAlign: start;
+ --pf-v6-c-progress-stepper--GridAutoFlow: var(--pf-v6-c-progress-stepper--m-vertical--GridAutoFlow);
+ --pf-v6-c-progress-stepper--GridTemplateColumns: var(--pf-v6-c-progress-stepper--m-vertical--GridTemplateColumns);
+ --pf-v6-c-progress-stepper__step-connector--before--InsetBlockStart: var(--pf-v6-c-progress-stepper--m-vertical__step-connector--before--InsetBlockStart);
+ --pf-v6-c-progress-stepper__step-connector--before--InsetInlineStart: var(--pf-v6-c-progress-stepper--m-vertical__step-connector--before--InsetInlineStart);
+ --pf-v6-c-progress-stepper__step-connector--before--Width: var(--pf-v6-c-progress-stepper--m-vertical__step-connector--before--Width);
+ --pf-v6-c-progress-stepper__step-connector--before--Height: var(--pf-v6-c-progress-stepper--m-vertical__step-connector--before--Height);
+ --pf-v6-c-progress-stepper__step-connector--before--BorderInlineEndWidth: var(--pf-v6-c-progress-stepper--m-vertical__step-connector--before--BorderInlineEndWidth);
+ --pf-v6-c-progress-stepper__step-connector--before--BorderInlineEndColor: var(--pf-v6-c-progress-stepper--m-vertical__step-connector--before--BorderInlineEndColor);
+ --pf-v6-c-progress-stepper__step-connector--before--BorderBlockEndWidth: var(--pf-v6-c-progress-stepper--m-vertical__step-connector--before--BorderBlockEndWidth);
+ --pf-v6-c-progress-stepper__step-connector--before--BorderBlockEndColor: var(--pf-v6-c-progress-stepper--m-vertical__step-connector--before--BorderBlockEndColor);
+ --pf-v6-c-progress-stepper__step-connector--before--Transform: var(--pf-v6-c-progress-stepper--m-vertical__step-connector--before--Transform);
+ --pf-v6-c-progress-stepper__step-main--MarginBlockStart: var(--pf-v6-c-progress-stepper--m-vertical__step-main--MarginBlockStart);
+ --pf-v6-c-progress-stepper__step-main--MarginInlineEnd: var(--pf-v6-c-progress-stepper--m-vertical__step-main--MarginInlineEnd);
+ --pf-v6-c-progress-stepper__step-main--MarginBlockEnd: var(--pf-v6-c-progress-stepper--m-vertical__step-main--MarginBlockEnd);
+ --pf-v6-c-progress-stepper__step-main--MarginInlineStart: var(--pf-v6-c-progress-stepper--m-vertical__step-main--MarginInlineStart);
+ --pf-v6-c-progress-stepper--m-compact--GridTemplateColumns: var(--pf-v6-c-progress-stepper--m-vertical--m-compact--GridTemplateColumns);
+ --pf-v6-c-progress-stepper--m-compact__step-connector--GridRow: var(--pf-v6-c-progress-stepper--m-vertical--m-compact__step-connector--GridRow);
+ --pf-v6-c-progress-stepper--m-compact__step-connector--PaddingBlockEnd: var(--pf-v6-c-progress-stepper--m-vertical--m-compact__step-connector--PaddingBlockEnd);
+ --pf-v6-c-progress-stepper--m-center__step-connector--before--Content: none;
+ --pf-v6-c-progress-stepper--m-center__step-main--before--Content: "";
+}
+@media screen and (min-width: 48rem) {
+ .pf-v6-c-progress-stepper {
+ --pf-v6-c-progress-stepper--GridAutoFlow: var(--pf-v6-c-progress-stepper--m-horizontal--GridAutoFlow);
+ --pf-v6-c-progress-stepper--GridTemplateColumns: var(--pf-v6-c-progress-stepper--m-horizontal--GridTemplateColumns);
+ --pf-v6-c-progress-stepper__step-connector--before--InsetBlockStart: var(--pf-v6-c-progress-stepper--m-horizontal__step-connector--before--InsetBlockStart);
+ --pf-v6-c-progress-stepper__step-connector--before--InsetInlineStart: var(--pf-v6-c-progress-stepper--m-horizontal__step-connector--before--InsetInlineStart);
+ --pf-v6-c-progress-stepper__step-connector--before--Width: var(--pf-v6-c-progress-stepper--m-horizontal__step-connector--before--Width);
+ --pf-v6-c-progress-stepper__step-connector--before--Height: var(--pf-v6-c-progress-stepper--m-horizontal__step-connector--before--Height);
+ --pf-v6-c-progress-stepper__step-connector--before--BorderInlineEndWidth: var(--pf-v6-c-progress-stepper--m-horizontal__step-connector--before--BorderInlineEndWidth);
+ --pf-v6-c-progress-stepper__step-connector--before--BorderInlineEndColor: var(--pf-v6-c-progress-stepper--m-horizontal__step-connector--before--BorderInlineEndColor);
+ --pf-v6-c-progress-stepper__step-connector--before--BorderBlockEndWidth: var(--pf-v6-c-progress-stepper--m-horizontal__step-connector--before--BorderBlockEndWidth);
+ --pf-v6-c-progress-stepper__step-connector--before--BorderBlockEndColor: var(--pf-v6-c-progress-stepper--m-horizontal__step-connector--before--BorderBlockEndColor);
+ --pf-v6-c-progress-stepper__step-connector--before--Transform: var(--pf-v6-c-progress-stepper--m-horizontal__step-connector--before--Transform);
+ --pf-v6-c-progress-stepper__step-main--MarginBlockStart: var(--pf-v6-c-progress-stepper--m-horizontal__step-main--MarginBlockStart);
+ --pf-v6-c-progress-stepper__step-main--MarginInlineEnd: var(--pf-v6-c-progress-stepper--m-horizontal__step-main--MarginInlineEnd);
+ --pf-v6-c-progress-stepper__step-main--MarginBlockEnd: var(--pf-v6-c-progress-stepper--m-horizontal__step-main--MarginBlockEnd);
+ --pf-v6-c-progress-stepper__step-main--MarginInlineStart: var(--pf-v6-c-progress-stepper--m-horizontal__step-main--MarginInlineStart);
+ --pf-v6-c-progress-stepper--m-compact--GridTemplateColumns: var(--pf-v6-c-progress-stepper--m-horizontal--m-compact--GridTemplateColumns);
+ --pf-v6-c-progress-stepper--m-compact__step-connector--GridRow: var(--pf-v6-c-progress-stepper--m-horizontal--m-compact__step-connector--GridRow);
+ --pf-v6-c-progress-stepper--m-compact__step-connector--PaddingBlockEnd: var(--pf-v6-c-progress-stepper--m-horizontal--m-compact__step-connector--PaddingBlockEnd);
+ --pf-v6-c-progress-stepper--m-center__step-connector--before--Content: "";
+ --pf-v6-c-progress-stepper--m-center__step-main--before--Content: none;
+ }
+}
+
+.pf-v6-c-progress-stepper {
+ position: relative;
+ display: grid;
+ grid-template-rows: var(--pf-v6-c-progress-stepper--GridTemplateRows);
+ grid-template-columns: var(--pf-v6-c-progress-stepper--GridTemplateColumns);
+ grid-auto-columns: 1fr;
+ grid-auto-flow: var(--pf-v6-c-progress-stepper--GridAutoFlow);
+}
+.pf-v6-c-progress-stepper.pf-m-center {
+ --pf-v6-c-progress-stepper__step-connector--JustifyContent: var(--pf-v6-c-progress-stepper--m-center__step-connector--JustifyContent);
+ --pf-v6-c-progress-stepper__step-main--MarginInlineEnd: var(--pf-v6-c-progress-stepper--m-center__step-main--MarginInlineEnd);
+ --pf-v6-c-progress-stepper__step-main--MarginInlineStart: var(--pf-v6-c-progress-stepper--m-center__step-main--MarginInlineStart);
+ --pf-v6-c-progress-stepper--step-main--TextAlign: var(--pf-v6-c-progress-stepper--m-center__step-main--TextAlign, auto);
+ --pf-v6-c-progress-stepper__step-title--TextAlign: var(--pf-v6-c-progress-stepper--m-center__step-title--TextAlign, auto);
+ --pf-v6-c-progress-stepper__step-description--MarginInlineEnd: var(--pf-v6-c-progress-stepper--m-center__step-description--MarginInlineEnd);
+ --pf-v6-c-progress-stepper__step-description--MarginInlineStart: var(--pf-v6-c-progress-stepper--m-center__step-description--MarginInlineStart);
+ --pf-v6-c-progress-stepper__step-description--TextAlign: var(--pf-v6-c-progress-stepper--m-center__step-description--TextAlign, auto);
+ --pf-v6-c-progress-stepper--m-vertical__step-main--MarginInlineEnd: var(--pf-v6-c-progress-stepper--m-vertical--m-center__step-main--MarginInlineEnd);
+ --pf-v6-c-progress-stepper--m-vertical__step-main--MarginInlineStart: var(--pf-v6-c-progress-stepper--m-vertical--m-center__step-main--MarginInlineStart);
+ grid-template-columns: var(--pf-v6-c-progress-stepper--m-center--GridTemplateColumns);
+}
+.pf-v6-c-progress-stepper.pf-m-center .pf-v6-c-progress-stepper__step-main {
+ position: relative;
+}
+.pf-v6-c-progress-stepper.pf-m-center .pf-v6-c-progress-stepper__step:not(:last-of-type) > .pf-v6-c-progress-stepper__step-connector::before {
+ inset-inline-start: var(--pf-v6-c-progress-stepper--m-center__step-connector--before--InsetInlineStart);
+}
+.pf-v6-c-progress-stepper.pf-m-center:not(.pf-m-compact) .pf-v6-c-progress-stepper__step:not(:last-of-type) > .pf-v6-c-progress-stepper__step-main::before {
+ content: var(--pf-v6-c-progress-stepper--m-center__step-main--before--Content);
+}
+.pf-v6-c-progress-stepper.pf-m-center:not(.pf-m-compact) .pf-v6-c-progress-stepper__step:not(:last-of-type) > .pf-v6-c-progress-stepper__step-connector::before {
+ content: var(--pf-v6-c-progress-stepper--m-center__step-connector--before--Content);
+}
+.pf-v6-c-progress-stepper.pf-m-compact {
+ --pf-v6-c-progress-stepper__step-main--MarginBlockStart: var(--pf-v6-c-progress-stepper--m-compact__step-main--MarginBlockStart);
+ --pf-v6-c-progress-stepper__step-main--MarginBlockEnd: var(--pf-v6-c-progress-stepper--m-compact__step-main--MarginBlockEnd);
+ --pf-v6-c-progress-stepper__step-icon--Width: var(--pf-v6-c-progress-stepper--m-compact__step-icon--Width);
+ --pf-v6-c-progress-stepper__step-icon--FontSize: var(--pf-v6-c-progress-stepper--m-compact__step-icon--FontSize);
+ --pf-v6-c-progress-stepper__step-title--FontSize: var(--pf-v6-c-progress-stepper--m-compact__step-title--FontSize);
+ --pf-v6-c-progress-stepper__step--m-current__step-title--FontWeight: var(--pf-v6-c-progress-stepper--m-compact__step-title--FontWeight);
+ --pf-v6-c-progress-stepper__pficon--MarginBlockStart: var(--pf-v6-c-progress-stepper--m-compact__pficon--MarginBlockStart);
+ --pf-v6-c-progress-stepper__fa-exclamation-triangle--MarginBlockStart: var(--pf-v6-c-progress-stepper--m-compact__fa-exclamation-triangle--MarginBlockStart);
+ --pf-v6-c-progress-stepper--m-vertical__step-main--MarginBlockStart: var(--pf-v6-c-progress-stepper--m-vertical--m-compact__step-main--MarginBlockStart);
+ --pf-v6-c-progress-stepper--m-vertical__step-main--MarginInlineEnd: var(--pf-v6-c-progress-stepper--m-vertical--m-compact__step-main--MarginInlineEnd);
+ --pf-v6-c-progress-stepper--m-vertical__step-main--MarginInlineStart: var(--pf-v6-c-progress-stepper--m-vertical--m-compact__step-main--MarginInlineStart);
+ display: inline-grid;
+ grid-template-columns: var(--pf-v6-c-progress-stepper--m-compact--GridTemplateColumns);
+ grid-auto-flow: var(--pf-v6-c-progress-stepper--m-compact--GridAutoFlow);
+}
+.pf-v6-c-progress-stepper.pf-m-compact .pf-v6-c-progress-stepper__step-connector {
+ grid-row: var(--pf-v6-c-progress-stepper--m-compact__step-connector--GridRow);
+ min-width: var(--pf-v6-c-progress-stepper--m-compact__step-connector--MinWidth);
+ padding-block-end: var(--pf-v6-c-progress-stepper--m-compact__step-connector--PaddingBlockEnd);
+}
+.pf-v6-c-progress-stepper.pf-m-compact .pf-v6-c-progress-stepper__step-main {
+ margin-block-end: var(--pf-v6-c-progress-stepper--m-compact__step-main--MarginBlockEnd);
+}
+.pf-v6-c-progress-stepper.pf-m-compact .pf-v6-c-progress-stepper__step:not(.pf-m-current) .pf-v6-c-progress-stepper__step-main {
+ position: fixed;
+ inset-block-start: 0;
+ inset-inline-start: 0;
+ overflow: hidden;
+ clip: rect(0, 0, 0, 0);
+ white-space: nowrap;
+ border: 0;
+}
+.pf-v6-c-progress-stepper.pf-m-compact .pf-v6-c-progress-stepper__step.pf-m-current .pf-v6-c-progress-stepper__step-main {
+ grid-row: 1/2;
+ grid-column: 1/-1;
+}
+.pf-v6-c-progress-stepper.pf-m-compact .pf-v6-c-progress-stepper__step-description {
+ display: none;
+}
+
+.pf-v6-c-progress-stepper__step {
+ display: contents;
+}
+.pf-v6-c-progress-stepper__step.pf-m-current {
+ --pf-v6-c-progress-stepper__step-title--FontWeight: var(--pf-v6-c-progress-stepper__step--m-current__step-title--FontWeight);
+ --pf-v6-c-progress-stepper__step-title--Color: var(--pf-v6-c-progress-stepper__step--m-current__step-title--Color);
+ --pf-v6-c-progress-stepper__step-icon--Color: var(--pf-v6-c-progress-stepper__step--m-current__step-icon--Color);
+}
+.pf-v6-c-progress-stepper__step.pf-m-pending {
+ --pf-v6-c-progress-stepper__step-title--Color: var(--pf-v6-c-progress-stepper__step--m-pending__step-title--Color);
+}
+.pf-v6-c-progress-stepper__step.pf-m-success {
+ --pf-v6-c-progress-stepper__step-icon--Color: var(--pf-v6-c-progress-stepper__step--m-success__step-icon--Color);
+}
+.pf-v6-c-progress-stepper__step.pf-m-danger {
+ --pf-v6-c-progress-stepper__step-icon--Color: var(--pf-v6-c-progress-stepper__step--m-danger__step-icon--Color);
+ --pf-v6-c-progress-stepper__step-title--Color: var(--pf-v6-c-progress-stepper__step--m-danger__step-title--Color);
+ --pf-v6-c-progress-stepper__step-title--m-help-text--hover--Color: var(--pf-v6-c-progress-stepper__step--m-danger__step-title--m-help-text--hover--Color);
+}
+.pf-v6-c-progress-stepper__step.pf-m-warning {
+ --pf-v6-c-progress-stepper__step-icon--Color: var(--pf-v6-c-progress-stepper__step--m-warning__step-icon--Color);
+}
+.pf-v6-c-progress-stepper__step.pf-m-info {
+ --pf-v6-c-progress-stepper__step-icon--Color: var(--pf-v6-c-progress-stepper__step--m-info__step-icon--Color);
+}
+.pf-v6-c-progress-stepper__step.pf-m-custom {
+ --pf-v6-c-progress-stepper__step-icon--Color: var(--pf-v6-c-progress-stepper__step--m-custom__step-icon--Color);
+}
+.pf-v6-c-progress-stepper__step:last-child {
+ --pf-v6-c-progress-stepper__step-main--MarginBlockEnd: 0;
+}
+
+.pf-v6-c-progress-stepper__step-connector {
+ position: relative;
+ display: flex;
+ justify-content: var(--pf-v6-c-progress-stepper__step-connector--JustifyContent);
+ width: 100%;
+}
+.pf-v6-c-progress-stepper__step:not(:last-of-type) > .pf-v6-c-progress-stepper__step-connector::before {
+ position: absolute;
+ inset-block-start: var(--pf-v6-c-progress-stepper__step-connector--before--InsetBlockStart);
+ inset-inline-start: var(--pf-v6-c-progress-stepper__step-connector--before--InsetInlineStart);
+ width: var(--pf-v6-c-progress-stepper__step-connector--before--Width);
+ height: var(--pf-v6-c-progress-stepper__step-connector--before--Height);
+ content: "";
+ border-block-end: var(--pf-v6-c-progress-stepper__step-connector--before--BorderBlockEndWidth) solid var(--pf-v6-c-progress-stepper__step-connector--before--BorderBlockEndColor);
+ border-inline-end: var(--pf-v6-c-progress-stepper__step-connector--before--BorderInlineEndWidth) solid var(--pf-v6-c-progress-stepper__step-connector--before--BorderInlineEndColor);
+ transform: var(--pf-v6-c-progress-stepper__step-connector--before--Transform);
+}
+
+.pf-v6-c-progress-stepper__step-icon {
+ z-index: var(--pf-v6-c-progress-stepper__step-icon--ZIndex);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ min-width: var(--pf-v6-c-progress-stepper__step-icon--Width);
+ height: var(--pf-v6-c-progress-stepper__step-icon--Height);
+ font-size: var(--pf-v6-c-progress-stepper__step-icon--FontSize);
+ color: var(--pf-v6-c-progress-stepper__step-icon--Color);
+ background-color: var(--pf-v6-c-progress-stepper__step-icon--BackgroundColor);
+ border: var(--pf-v6-c-progress-stepper__step-icon--BorderWidth) solid var(--pf-v6-c-progress-stepper__step-icon--BorderColor);
+ border-radius: 50%;
+}
+.pf-v6-c-progress-stepper__step-icon .pf-v6-pficon {
+ margin-block-start: var(--pf-v6-c-progress-stepper__pficon--MarginBlockStart);
+}
+.pf-v6-c-progress-stepper__step-icon .fa-exclamation-triangle {
+ margin-block-start: var(--pf-v6-c-progress-stepper__fa-exclamation-triangle--MarginBlockStart);
+}
+
+.pf-v6-c-progress-stepper__step-main {
+ min-width: 0;
+ margin-block-start: var(--pf-v6-c-progress-stepper__step-main--MarginBlockStart);
+ margin-block-end: var(--pf-v6-c-progress-stepper__step-main--MarginBlockEnd);
+ margin-inline-start: var(--pf-v6-c-progress-stepper__step-main--MarginInlineStart);
+ margin-inline-end: var(--pf-v6-c-progress-stepper__step-main--MarginInlineEnd);
+ text-align: var(--pf-v6-c-progress-stepper--step-main--TextAlign, auto);
+ overflow-wrap: anywhere;
+}
+.pf-v6-c-progress-stepper__step:not(:last-of-type) > .pf-v6-c-progress-stepper__step-main::before {
+ position: absolute;
+ inset-block-start: calc(100% + var(--pf-v6-c-progress-stepper__step-main--MarginBlockStart));
+ inset-inline-start: calc(50% - var(--pf-v6-c-progress-stepper__step-connector--before--BorderInlineEndWidth) / 2);
+ width: auto;
+ height: calc(var(--pf-v6-c-progress-stepper__step-main--MarginBlockStart) + var(--pf-v6-c-progress-stepper__step-main--MarginBlockEnd));
+ border-inline-end: var(--pf-v6-c-progress-stepper__step-connector--before--BorderInlineEndWidth) solid var(--pf-v6-c-progress-stepper__step-connector--before--BorderInlineEndColor);
+}
+
+.pf-v6-c-progress-stepper__step-title {
+ font-size: var(--pf-v6-c-progress-stepper__step-title--FontSize);
+ font-weight: var(--pf-v6-c-progress-stepper__step-title--FontWeight);
+ color: var(--pf-v6-c-progress-stepper__step-title--Color);
+ text-align: var(--pf-v6-c-progress-stepper__step-title--TextAlign);
+ background: none;
+ border: 0;
+}
+.pf-v6-c-progress-stepper__step-title.pf-m-help-text {
+ padding-inline-start: var(--pf-v6-c-progress-stepper__step-title--m-help-text--PaddingInlineStart);
+ padding-inline-end: var(--pf-v6-c-progress-stepper__step-title--m-help-text--PaddingInlineEnd);
+ text-decoration-line: var(--pf-v6-c-progress-stepper__step-title--m-help-text--TextDecorationLine);
+ text-decoration-style: var(--pf-v6-c-progress-stepper__step-title--m-help-text--TextDecorationStyle);
+ text-underline-offset: var(--pf-v6-c-progress-stepper__step-title--m-help-text--TextUnderlineOffset);
+ cursor: pointer;
+}
+.pf-v6-c-progress-stepper__step-title.pf-m-help-text:is(:hover, :focus) {
+ --pf-v6-c-progress-stepper__step-title--m-help-text--TextDecorationLine: var(--pf-v6-c-progress-stepper__step-title--m-help-text--hover--TextDecorationLine);
+ --pf-v6-c-progress-stepper__step-title--m-help-text--TextDecorationStyle: var(--pf-v6-c-progress-stepper__step-title--m-help-text--hover--TextDecorationStyle);
+ --pf-v6-c-progress-stepper__step-title--Color: var(--pf-v6-c-progress-stepper__step-title--m-help-text--hover--Color);
+}
+
+.pf-v6-c-progress-stepper__step-description {
+ margin-block-start: var(--pf-v6-c-progress-stepper__step-description--MarginBlockStart);
+ font-size: var(--pf-v6-c-progress-stepper__step-description--FontSize);
+ color: var(--pf-v6-c-progress-stepper__step-description--Color);
+ text-align: var(--pf-v6-c-progress-stepper__step-description--TextAlign);
+}
+
+.pf-v6-c-progress-stepper.pf-m-horizontal {
+ --pf-v6-c-progress-stepper--GridAutoFlow: var(--pf-v6-c-progress-stepper--m-horizontal--GridAutoFlow);
+ --pf-v6-c-progress-stepper--GridTemplateColumns: var(--pf-v6-c-progress-stepper--m-horizontal--GridTemplateColumns);
+ --pf-v6-c-progress-stepper__step-connector--before--InsetBlockStart: var(--pf-v6-c-progress-stepper--m-horizontal__step-connector--before--InsetBlockStart);
+ --pf-v6-c-progress-stepper__step-connector--before--InsetInlineStart: var(--pf-v6-c-progress-stepper--m-horizontal__step-connector--before--InsetInlineStart);
+ --pf-v6-c-progress-stepper__step-connector--before--Width: var(--pf-v6-c-progress-stepper--m-horizontal__step-connector--before--Width);
+ --pf-v6-c-progress-stepper__step-connector--before--Height: var(--pf-v6-c-progress-stepper--m-horizontal__step-connector--before--Height);
+ --pf-v6-c-progress-stepper__step-connector--before--BorderInlineEndWidth: var(--pf-v6-c-progress-stepper--m-horizontal__step-connector--before--BorderInlineEndWidth);
+ --pf-v6-c-progress-stepper__step-connector--before--BorderInlineEndColor: var(--pf-v6-c-progress-stepper--m-horizontal__step-connector--before--BorderInlineEndColor);
+ --pf-v6-c-progress-stepper__step-connector--before--BorderBlockEndWidth: var(--pf-v6-c-progress-stepper--m-horizontal__step-connector--before--BorderBlockEndWidth);
+ --pf-v6-c-progress-stepper__step-connector--before--BorderBlockEndColor: var(--pf-v6-c-progress-stepper--m-horizontal__step-connector--before--BorderBlockEndColor);
+ --pf-v6-c-progress-stepper__step-connector--before--Transform: var(--pf-v6-c-progress-stepper--m-horizontal__step-connector--before--Transform);
+ --pf-v6-c-progress-stepper__step-main--MarginBlockStart: var(--pf-v6-c-progress-stepper--m-horizontal__step-main--MarginBlockStart);
+ --pf-v6-c-progress-stepper__step-main--MarginInlineEnd: var(--pf-v6-c-progress-stepper--m-horizontal__step-main--MarginInlineEnd);
+ --pf-v6-c-progress-stepper__step-main--MarginBlockEnd: var(--pf-v6-c-progress-stepper--m-horizontal__step-main--MarginBlockEnd);
+ --pf-v6-c-progress-stepper__step-main--MarginInlineStart: var(--pf-v6-c-progress-stepper--m-horizontal__step-main--MarginInlineStart);
+ --pf-v6-c-progress-stepper--m-compact--GridTemplateColumns: var(--pf-v6-c-progress-stepper--m-horizontal--m-compact--GridTemplateColumns);
+ --pf-v6-c-progress-stepper--m-compact__step-connector--GridRow: var(--pf-v6-c-progress-stepper--m-horizontal--m-compact__step-connector--GridRow);
+ --pf-v6-c-progress-stepper--m-compact__step-connector--PaddingBlockEnd: var(--pf-v6-c-progress-stepper--m-horizontal--m-compact__step-connector--PaddingBlockEnd);
+ --pf-v6-c-progress-stepper--m-center__step-connector--before--Content: "";
+ --pf-v6-c-progress-stepper--m-center__step-main--before--Content: none;
+}
+.pf-v6-c-progress-stepper.pf-m-vertical {
+ --pf-v6-c-progress-stepper--GridAutoFlow: var(--pf-v6-c-progress-stepper--m-vertical--GridAutoFlow);
+ --pf-v6-c-progress-stepper--GridTemplateColumns: var(--pf-v6-c-progress-stepper--m-vertical--GridTemplateColumns);
+ --pf-v6-c-progress-stepper__step-connector--before--InsetBlockStart: var(--pf-v6-c-progress-stepper--m-vertical__step-connector--before--InsetBlockStart);
+ --pf-v6-c-progress-stepper__step-connector--before--InsetInlineStart: var(--pf-v6-c-progress-stepper--m-vertical__step-connector--before--InsetInlineStart);
+ --pf-v6-c-progress-stepper__step-connector--before--Width: var(--pf-v6-c-progress-stepper--m-vertical__step-connector--before--Width);
+ --pf-v6-c-progress-stepper__step-connector--before--Height: var(--pf-v6-c-progress-stepper--m-vertical__step-connector--before--Height);
+ --pf-v6-c-progress-stepper__step-connector--before--BorderInlineEndWidth: var(--pf-v6-c-progress-stepper--m-vertical__step-connector--before--BorderInlineEndWidth);
+ --pf-v6-c-progress-stepper__step-connector--before--BorderInlineEndColor: var(--pf-v6-c-progress-stepper--m-vertical__step-connector--before--BorderInlineEndColor);
+ --pf-v6-c-progress-stepper__step-connector--before--BorderBlockEndWidth: var(--pf-v6-c-progress-stepper--m-vertical__step-connector--before--BorderBlockEndWidth);
+ --pf-v6-c-progress-stepper__step-connector--before--BorderBlockEndColor: var(--pf-v6-c-progress-stepper--m-vertical__step-connector--before--BorderBlockEndColor);
+ --pf-v6-c-progress-stepper__step-connector--before--Transform: var(--pf-v6-c-progress-stepper--m-vertical__step-connector--before--Transform);
+ --pf-v6-c-progress-stepper__step-main--MarginBlockStart: var(--pf-v6-c-progress-stepper--m-vertical__step-main--MarginBlockStart);
+ --pf-v6-c-progress-stepper__step-main--MarginInlineEnd: var(--pf-v6-c-progress-stepper--m-vertical__step-main--MarginInlineEnd);
+ --pf-v6-c-progress-stepper__step-main--MarginBlockEnd: var(--pf-v6-c-progress-stepper--m-vertical__step-main--MarginBlockEnd);
+ --pf-v6-c-progress-stepper__step-main--MarginInlineStart: var(--pf-v6-c-progress-stepper--m-vertical__step-main--MarginInlineStart);
+ --pf-v6-c-progress-stepper--m-compact--GridTemplateColumns: var(--pf-v6-c-progress-stepper--m-vertical--m-compact--GridTemplateColumns);
+ --pf-v6-c-progress-stepper--m-compact__step-connector--GridRow: var(--pf-v6-c-progress-stepper--m-vertical--m-compact__step-connector--GridRow);
+ --pf-v6-c-progress-stepper--m-compact__step-connector--PaddingBlockEnd: var(--pf-v6-c-progress-stepper--m-vertical--m-compact__step-connector--PaddingBlockEnd);
+ --pf-v6-c-progress-stepper--m-center__step-connector--before--Content: none;
+ --pf-v6-c-progress-stepper--m-center__step-main--before--Content: "";
+}
+@media (min-width: 36rem) {
+ .pf-v6-c-progress-stepper.pf-m-horizontal-on-sm {
+ --pf-v6-c-progress-stepper--GridAutoFlow: var(--pf-v6-c-progress-stepper--m-horizontal--GridAutoFlow);
+ --pf-v6-c-progress-stepper--GridTemplateColumns: var(--pf-v6-c-progress-stepper--m-horizontal--GridTemplateColumns);
+ --pf-v6-c-progress-stepper__step-connector--before--InsetBlockStart: var(--pf-v6-c-progress-stepper--m-horizontal__step-connector--before--InsetBlockStart);
+ --pf-v6-c-progress-stepper__step-connector--before--InsetInlineStart: var(--pf-v6-c-progress-stepper--m-horizontal__step-connector--before--InsetInlineStart);
+ --pf-v6-c-progress-stepper__step-connector--before--Width: var(--pf-v6-c-progress-stepper--m-horizontal__step-connector--before--Width);
+ --pf-v6-c-progress-stepper__step-connector--before--Height: var(--pf-v6-c-progress-stepper--m-horizontal__step-connector--before--Height);
+ --pf-v6-c-progress-stepper__step-connector--before--BorderInlineEndWidth: var(--pf-v6-c-progress-stepper--m-horizontal__step-connector--before--BorderInlineEndWidth);
+ --pf-v6-c-progress-stepper__step-connector--before--BorderInlineEndColor: var(--pf-v6-c-progress-stepper--m-horizontal__step-connector--before--BorderInlineEndColor);
+ --pf-v6-c-progress-stepper__step-connector--before--BorderBlockEndWidth: var(--pf-v6-c-progress-stepper--m-horizontal__step-connector--before--BorderBlockEndWidth);
+ --pf-v6-c-progress-stepper__step-connector--before--BorderBlockEndColor: var(--pf-v6-c-progress-stepper--m-horizontal__step-connector--before--BorderBlockEndColor);
+ --pf-v6-c-progress-stepper__step-connector--before--Transform: var(--pf-v6-c-progress-stepper--m-horizontal__step-connector--before--Transform);
+ --pf-v6-c-progress-stepper__step-main--MarginBlockStart: var(--pf-v6-c-progress-stepper--m-horizontal__step-main--MarginBlockStart);
+ --pf-v6-c-progress-stepper__step-main--MarginInlineEnd: var(--pf-v6-c-progress-stepper--m-horizontal__step-main--MarginInlineEnd);
+ --pf-v6-c-progress-stepper__step-main--MarginBlockEnd: var(--pf-v6-c-progress-stepper--m-horizontal__step-main--MarginBlockEnd);
+ --pf-v6-c-progress-stepper__step-main--MarginInlineStart: var(--pf-v6-c-progress-stepper--m-horizontal__step-main--MarginInlineStart);
+ --pf-v6-c-progress-stepper--m-compact--GridTemplateColumns: var(--pf-v6-c-progress-stepper--m-horizontal--m-compact--GridTemplateColumns);
+ --pf-v6-c-progress-stepper--m-compact__step-connector--GridRow: var(--pf-v6-c-progress-stepper--m-horizontal--m-compact__step-connector--GridRow);
+ --pf-v6-c-progress-stepper--m-compact__step-connector--PaddingBlockEnd: var(--pf-v6-c-progress-stepper--m-horizontal--m-compact__step-connector--PaddingBlockEnd);
+ --pf-v6-c-progress-stepper--m-center__step-connector--before--Content: "";
+ --pf-v6-c-progress-stepper--m-center__step-main--before--Content: none;
+ }
+ .pf-v6-c-progress-stepper.pf-m-vertical-on-sm {
+ --pf-v6-c-progress-stepper--GridAutoFlow: var(--pf-v6-c-progress-stepper--m-vertical--GridAutoFlow);
+ --pf-v6-c-progress-stepper--GridTemplateColumns: var(--pf-v6-c-progress-stepper--m-vertical--GridTemplateColumns);
+ --pf-v6-c-progress-stepper__step-connector--before--InsetBlockStart: var(--pf-v6-c-progress-stepper--m-vertical__step-connector--before--InsetBlockStart);
+ --pf-v6-c-progress-stepper__step-connector--before--InsetInlineStart: var(--pf-v6-c-progress-stepper--m-vertical__step-connector--before--InsetInlineStart);
+ --pf-v6-c-progress-stepper__step-connector--before--Width: var(--pf-v6-c-progress-stepper--m-vertical__step-connector--before--Width);
+ --pf-v6-c-progress-stepper__step-connector--before--Height: var(--pf-v6-c-progress-stepper--m-vertical__step-connector--before--Height);
+ --pf-v6-c-progress-stepper__step-connector--before--BorderInlineEndWidth: var(--pf-v6-c-progress-stepper--m-vertical__step-connector--before--BorderInlineEndWidth);
+ --pf-v6-c-progress-stepper__step-connector--before--BorderInlineEndColor: var(--pf-v6-c-progress-stepper--m-vertical__step-connector--before--BorderInlineEndColor);
+ --pf-v6-c-progress-stepper__step-connector--before--BorderBlockEndWidth: var(--pf-v6-c-progress-stepper--m-vertical__step-connector--before--BorderBlockEndWidth);
+ --pf-v6-c-progress-stepper__step-connector--before--BorderBlockEndColor: var(--pf-v6-c-progress-stepper--m-vertical__step-connector--before--BorderBlockEndColor);
+ --pf-v6-c-progress-stepper__step-connector--before--Transform: var(--pf-v6-c-progress-stepper--m-vertical__step-connector--before--Transform);
+ --pf-v6-c-progress-stepper__step-main--MarginBlockStart: var(--pf-v6-c-progress-stepper--m-vertical__step-main--MarginBlockStart);
+ --pf-v6-c-progress-stepper__step-main--MarginInlineEnd: var(--pf-v6-c-progress-stepper--m-vertical__step-main--MarginInlineEnd);
+ --pf-v6-c-progress-stepper__step-main--MarginBlockEnd: var(--pf-v6-c-progress-stepper--m-vertical__step-main--MarginBlockEnd);
+ --pf-v6-c-progress-stepper__step-main--MarginInlineStart: var(--pf-v6-c-progress-stepper--m-vertical__step-main--MarginInlineStart);
+ --pf-v6-c-progress-stepper--m-compact--GridTemplateColumns: var(--pf-v6-c-progress-stepper--m-vertical--m-compact--GridTemplateColumns);
+ --pf-v6-c-progress-stepper--m-compact__step-connector--GridRow: var(--pf-v6-c-progress-stepper--m-vertical--m-compact__step-connector--GridRow);
+ --pf-v6-c-progress-stepper--m-compact__step-connector--PaddingBlockEnd: var(--pf-v6-c-progress-stepper--m-vertical--m-compact__step-connector--PaddingBlockEnd);
+ --pf-v6-c-progress-stepper--m-center__step-connector--before--Content: none;
+ --pf-v6-c-progress-stepper--m-center__step-main--before--Content: "";
+ }
+}
+@media (min-width: 48rem) {
+ .pf-v6-c-progress-stepper.pf-m-horizontal-on-md {
+ --pf-v6-c-progress-stepper--GridAutoFlow: var(--pf-v6-c-progress-stepper--m-horizontal--GridAutoFlow);
+ --pf-v6-c-progress-stepper--GridTemplateColumns: var(--pf-v6-c-progress-stepper--m-horizontal--GridTemplateColumns);
+ --pf-v6-c-progress-stepper__step-connector--before--InsetBlockStart: var(--pf-v6-c-progress-stepper--m-horizontal__step-connector--before--InsetBlockStart);
+ --pf-v6-c-progress-stepper__step-connector--before--InsetInlineStart: var(--pf-v6-c-progress-stepper--m-horizontal__step-connector--before--InsetInlineStart);
+ --pf-v6-c-progress-stepper__step-connector--before--Width: var(--pf-v6-c-progress-stepper--m-horizontal__step-connector--before--Width);
+ --pf-v6-c-progress-stepper__step-connector--before--Height: var(--pf-v6-c-progress-stepper--m-horizontal__step-connector--before--Height);
+ --pf-v6-c-progress-stepper__step-connector--before--BorderInlineEndWidth: var(--pf-v6-c-progress-stepper--m-horizontal__step-connector--before--BorderInlineEndWidth);
+ --pf-v6-c-progress-stepper__step-connector--before--BorderInlineEndColor: var(--pf-v6-c-progress-stepper--m-horizontal__step-connector--before--BorderInlineEndColor);
+ --pf-v6-c-progress-stepper__step-connector--before--BorderBlockEndWidth: var(--pf-v6-c-progress-stepper--m-horizontal__step-connector--before--BorderBlockEndWidth);
+ --pf-v6-c-progress-stepper__step-connector--before--BorderBlockEndColor: var(--pf-v6-c-progress-stepper--m-horizontal__step-connector--before--BorderBlockEndColor);
+ --pf-v6-c-progress-stepper__step-connector--before--Transform: var(--pf-v6-c-progress-stepper--m-horizontal__step-connector--before--Transform);
+ --pf-v6-c-progress-stepper__step-main--MarginBlockStart: var(--pf-v6-c-progress-stepper--m-horizontal__step-main--MarginBlockStart);
+ --pf-v6-c-progress-stepper__step-main--MarginInlineEnd: var(--pf-v6-c-progress-stepper--m-horizontal__step-main--MarginInlineEnd);
+ --pf-v6-c-progress-stepper__step-main--MarginBlockEnd: var(--pf-v6-c-progress-stepper--m-horizontal__step-main--MarginBlockEnd);
+ --pf-v6-c-progress-stepper__step-main--MarginInlineStart: var(--pf-v6-c-progress-stepper--m-horizontal__step-main--MarginInlineStart);
+ --pf-v6-c-progress-stepper--m-compact--GridTemplateColumns: var(--pf-v6-c-progress-stepper--m-horizontal--m-compact--GridTemplateColumns);
+ --pf-v6-c-progress-stepper--m-compact__step-connector--GridRow: var(--pf-v6-c-progress-stepper--m-horizontal--m-compact__step-connector--GridRow);
+ --pf-v6-c-progress-stepper--m-compact__step-connector--PaddingBlockEnd: var(--pf-v6-c-progress-stepper--m-horizontal--m-compact__step-connector--PaddingBlockEnd);
+ --pf-v6-c-progress-stepper--m-center__step-connector--before--Content: "";
+ --pf-v6-c-progress-stepper--m-center__step-main--before--Content: none;
+ }
+ .pf-v6-c-progress-stepper.pf-m-vertical-on-md {
+ --pf-v6-c-progress-stepper--GridAutoFlow: var(--pf-v6-c-progress-stepper--m-vertical--GridAutoFlow);
+ --pf-v6-c-progress-stepper--GridTemplateColumns: var(--pf-v6-c-progress-stepper--m-vertical--GridTemplateColumns);
+ --pf-v6-c-progress-stepper__step-connector--before--InsetBlockStart: var(--pf-v6-c-progress-stepper--m-vertical__step-connector--before--InsetBlockStart);
+ --pf-v6-c-progress-stepper__step-connector--before--InsetInlineStart: var(--pf-v6-c-progress-stepper--m-vertical__step-connector--before--InsetInlineStart);
+ --pf-v6-c-progress-stepper__step-connector--before--Width: var(--pf-v6-c-progress-stepper--m-vertical__step-connector--before--Width);
+ --pf-v6-c-progress-stepper__step-connector--before--Height: var(--pf-v6-c-progress-stepper--m-vertical__step-connector--before--Height);
+ --pf-v6-c-progress-stepper__step-connector--before--BorderInlineEndWidth: var(--pf-v6-c-progress-stepper--m-vertical__step-connector--before--BorderInlineEndWidth);
+ --pf-v6-c-progress-stepper__step-connector--before--BorderInlineEndColor: var(--pf-v6-c-progress-stepper--m-vertical__step-connector--before--BorderInlineEndColor);
+ --pf-v6-c-progress-stepper__step-connector--before--BorderBlockEndWidth: var(--pf-v6-c-progress-stepper--m-vertical__step-connector--before--BorderBlockEndWidth);
+ --pf-v6-c-progress-stepper__step-connector--before--BorderBlockEndColor: var(--pf-v6-c-progress-stepper--m-vertical__step-connector--before--BorderBlockEndColor);
+ --pf-v6-c-progress-stepper__step-connector--before--Transform: var(--pf-v6-c-progress-stepper--m-vertical__step-connector--before--Transform);
+ --pf-v6-c-progress-stepper__step-main--MarginBlockStart: var(--pf-v6-c-progress-stepper--m-vertical__step-main--MarginBlockStart);
+ --pf-v6-c-progress-stepper__step-main--MarginInlineEnd: var(--pf-v6-c-progress-stepper--m-vertical__step-main--MarginInlineEnd);
+ --pf-v6-c-progress-stepper__step-main--MarginBlockEnd: var(--pf-v6-c-progress-stepper--m-vertical__step-main--MarginBlockEnd);
+ --pf-v6-c-progress-stepper__step-main--MarginInlineStart: var(--pf-v6-c-progress-stepper--m-vertical__step-main--MarginInlineStart);
+ --pf-v6-c-progress-stepper--m-compact--GridTemplateColumns: var(--pf-v6-c-progress-stepper--m-vertical--m-compact--GridTemplateColumns);
+ --pf-v6-c-progress-stepper--m-compact__step-connector--GridRow: var(--pf-v6-c-progress-stepper--m-vertical--m-compact__step-connector--GridRow);
+ --pf-v6-c-progress-stepper--m-compact__step-connector--PaddingBlockEnd: var(--pf-v6-c-progress-stepper--m-vertical--m-compact__step-connector--PaddingBlockEnd);
+ --pf-v6-c-progress-stepper--m-center__step-connector--before--Content: none;
+ --pf-v6-c-progress-stepper--m-center__step-main--before--Content: "";
+ }
+}
+@media (min-width: 62rem) {
+ .pf-v6-c-progress-stepper.pf-m-horizontal-on-lg {
+ --pf-v6-c-progress-stepper--GridAutoFlow: var(--pf-v6-c-progress-stepper--m-horizontal--GridAutoFlow);
+ --pf-v6-c-progress-stepper--GridTemplateColumns: var(--pf-v6-c-progress-stepper--m-horizontal--GridTemplateColumns);
+ --pf-v6-c-progress-stepper__step-connector--before--InsetBlockStart: var(--pf-v6-c-progress-stepper--m-horizontal__step-connector--before--InsetBlockStart);
+ --pf-v6-c-progress-stepper__step-connector--before--InsetInlineStart: var(--pf-v6-c-progress-stepper--m-horizontal__step-connector--before--InsetInlineStart);
+ --pf-v6-c-progress-stepper__step-connector--before--Width: var(--pf-v6-c-progress-stepper--m-horizontal__step-connector--before--Width);
+ --pf-v6-c-progress-stepper__step-connector--before--Height: var(--pf-v6-c-progress-stepper--m-horizontal__step-connector--before--Height);
+ --pf-v6-c-progress-stepper__step-connector--before--BorderInlineEndWidth: var(--pf-v6-c-progress-stepper--m-horizontal__step-connector--before--BorderInlineEndWidth);
+ --pf-v6-c-progress-stepper__step-connector--before--BorderInlineEndColor: var(--pf-v6-c-progress-stepper--m-horizontal__step-connector--before--BorderInlineEndColor);
+ --pf-v6-c-progress-stepper__step-connector--before--BorderBlockEndWidth: var(--pf-v6-c-progress-stepper--m-horizontal__step-connector--before--BorderBlockEndWidth);
+ --pf-v6-c-progress-stepper__step-connector--before--BorderBlockEndColor: var(--pf-v6-c-progress-stepper--m-horizontal__step-connector--before--BorderBlockEndColor);
+ --pf-v6-c-progress-stepper__step-connector--before--Transform: var(--pf-v6-c-progress-stepper--m-horizontal__step-connector--before--Transform);
+ --pf-v6-c-progress-stepper__step-main--MarginBlockStart: var(--pf-v6-c-progress-stepper--m-horizontal__step-main--MarginBlockStart);
+ --pf-v6-c-progress-stepper__step-main--MarginInlineEnd: var(--pf-v6-c-progress-stepper--m-horizontal__step-main--MarginInlineEnd);
+ --pf-v6-c-progress-stepper__step-main--MarginBlockEnd: var(--pf-v6-c-progress-stepper--m-horizontal__step-main--MarginBlockEnd);
+ --pf-v6-c-progress-stepper__step-main--MarginInlineStart: var(--pf-v6-c-progress-stepper--m-horizontal__step-main--MarginInlineStart);
+ --pf-v6-c-progress-stepper--m-compact--GridTemplateColumns: var(--pf-v6-c-progress-stepper--m-horizontal--m-compact--GridTemplateColumns);
+ --pf-v6-c-progress-stepper--m-compact__step-connector--GridRow: var(--pf-v6-c-progress-stepper--m-horizontal--m-compact__step-connector--GridRow);
+ --pf-v6-c-progress-stepper--m-compact__step-connector--PaddingBlockEnd: var(--pf-v6-c-progress-stepper--m-horizontal--m-compact__step-connector--PaddingBlockEnd);
+ --pf-v6-c-progress-stepper--m-center__step-connector--before--Content: "";
+ --pf-v6-c-progress-stepper--m-center__step-main--before--Content: none;
+ }
+ .pf-v6-c-progress-stepper.pf-m-vertical-on-lg {
+ --pf-v6-c-progress-stepper--GridAutoFlow: var(--pf-v6-c-progress-stepper--m-vertical--GridAutoFlow);
+ --pf-v6-c-progress-stepper--GridTemplateColumns: var(--pf-v6-c-progress-stepper--m-vertical--GridTemplateColumns);
+ --pf-v6-c-progress-stepper__step-connector--before--InsetBlockStart: var(--pf-v6-c-progress-stepper--m-vertical__step-connector--before--InsetBlockStart);
+ --pf-v6-c-progress-stepper__step-connector--before--InsetInlineStart: var(--pf-v6-c-progress-stepper--m-vertical__step-connector--before--InsetInlineStart);
+ --pf-v6-c-progress-stepper__step-connector--before--Width: var(--pf-v6-c-progress-stepper--m-vertical__step-connector--before--Width);
+ --pf-v6-c-progress-stepper__step-connector--before--Height: var(--pf-v6-c-progress-stepper--m-vertical__step-connector--before--Height);
+ --pf-v6-c-progress-stepper__step-connector--before--BorderInlineEndWidth: var(--pf-v6-c-progress-stepper--m-vertical__step-connector--before--BorderInlineEndWidth);
+ --pf-v6-c-progress-stepper__step-connector--before--BorderInlineEndColor: var(--pf-v6-c-progress-stepper--m-vertical__step-connector--before--BorderInlineEndColor);
+ --pf-v6-c-progress-stepper__step-connector--before--BorderBlockEndWidth: var(--pf-v6-c-progress-stepper--m-vertical__step-connector--before--BorderBlockEndWidth);
+ --pf-v6-c-progress-stepper__step-connector--before--BorderBlockEndColor: var(--pf-v6-c-progress-stepper--m-vertical__step-connector--before--BorderBlockEndColor);
+ --pf-v6-c-progress-stepper__step-connector--before--Transform: var(--pf-v6-c-progress-stepper--m-vertical__step-connector--before--Transform);
+ --pf-v6-c-progress-stepper__step-main--MarginBlockStart: var(--pf-v6-c-progress-stepper--m-vertical__step-main--MarginBlockStart);
+ --pf-v6-c-progress-stepper__step-main--MarginInlineEnd: var(--pf-v6-c-progress-stepper--m-vertical__step-main--MarginInlineEnd);
+ --pf-v6-c-progress-stepper__step-main--MarginBlockEnd: var(--pf-v6-c-progress-stepper--m-vertical__step-main--MarginBlockEnd);
+ --pf-v6-c-progress-stepper__step-main--MarginInlineStart: var(--pf-v6-c-progress-stepper--m-vertical__step-main--MarginInlineStart);
+ --pf-v6-c-progress-stepper--m-compact--GridTemplateColumns: var(--pf-v6-c-progress-stepper--m-vertical--m-compact--GridTemplateColumns);
+ --pf-v6-c-progress-stepper--m-compact__step-connector--GridRow: var(--pf-v6-c-progress-stepper--m-vertical--m-compact__step-connector--GridRow);
+ --pf-v6-c-progress-stepper--m-compact__step-connector--PaddingBlockEnd: var(--pf-v6-c-progress-stepper--m-vertical--m-compact__step-connector--PaddingBlockEnd);
+ --pf-v6-c-progress-stepper--m-center__step-connector--before--Content: none;
+ --pf-v6-c-progress-stepper--m-center__step-main--before--Content: "";
+ }
+}
+@media (min-width: 75rem) {
+ .pf-v6-c-progress-stepper.pf-m-horizontal-on-xl {
+ --pf-v6-c-progress-stepper--GridAutoFlow: var(--pf-v6-c-progress-stepper--m-horizontal--GridAutoFlow);
+ --pf-v6-c-progress-stepper--GridTemplateColumns: var(--pf-v6-c-progress-stepper--m-horizontal--GridTemplateColumns);
+ --pf-v6-c-progress-stepper__step-connector--before--InsetBlockStart: var(--pf-v6-c-progress-stepper--m-horizontal__step-connector--before--InsetBlockStart);
+ --pf-v6-c-progress-stepper__step-connector--before--InsetInlineStart: var(--pf-v6-c-progress-stepper--m-horizontal__step-connector--before--InsetInlineStart);
+ --pf-v6-c-progress-stepper__step-connector--before--Width: var(--pf-v6-c-progress-stepper--m-horizontal__step-connector--before--Width);
+ --pf-v6-c-progress-stepper__step-connector--before--Height: var(--pf-v6-c-progress-stepper--m-horizontal__step-connector--before--Height);
+ --pf-v6-c-progress-stepper__step-connector--before--BorderInlineEndWidth: var(--pf-v6-c-progress-stepper--m-horizontal__step-connector--before--BorderInlineEndWidth);
+ --pf-v6-c-progress-stepper__step-connector--before--BorderInlineEndColor: var(--pf-v6-c-progress-stepper--m-horizontal__step-connector--before--BorderInlineEndColor);
+ --pf-v6-c-progress-stepper__step-connector--before--BorderBlockEndWidth: var(--pf-v6-c-progress-stepper--m-horizontal__step-connector--before--BorderBlockEndWidth);
+ --pf-v6-c-progress-stepper__step-connector--before--BorderBlockEndColor: var(--pf-v6-c-progress-stepper--m-horizontal__step-connector--before--BorderBlockEndColor);
+ --pf-v6-c-progress-stepper__step-connector--before--Transform: var(--pf-v6-c-progress-stepper--m-horizontal__step-connector--before--Transform);
+ --pf-v6-c-progress-stepper__step-main--MarginBlockStart: var(--pf-v6-c-progress-stepper--m-horizontal__step-main--MarginBlockStart);
+ --pf-v6-c-progress-stepper__step-main--MarginInlineEnd: var(--pf-v6-c-progress-stepper--m-horizontal__step-main--MarginInlineEnd);
+ --pf-v6-c-progress-stepper__step-main--MarginBlockEnd: var(--pf-v6-c-progress-stepper--m-horizontal__step-main--MarginBlockEnd);
+ --pf-v6-c-progress-stepper__step-main--MarginInlineStart: var(--pf-v6-c-progress-stepper--m-horizontal__step-main--MarginInlineStart);
+ --pf-v6-c-progress-stepper--m-compact--GridTemplateColumns: var(--pf-v6-c-progress-stepper--m-horizontal--m-compact--GridTemplateColumns);
+ --pf-v6-c-progress-stepper--m-compact__step-connector--GridRow: var(--pf-v6-c-progress-stepper--m-horizontal--m-compact__step-connector--GridRow);
+ --pf-v6-c-progress-stepper--m-compact__step-connector--PaddingBlockEnd: var(--pf-v6-c-progress-stepper--m-horizontal--m-compact__step-connector--PaddingBlockEnd);
+ --pf-v6-c-progress-stepper--m-center__step-connector--before--Content: "";
+ --pf-v6-c-progress-stepper--m-center__step-main--before--Content: none;
+ }
+ .pf-v6-c-progress-stepper.pf-m-vertical-on-xl {
+ --pf-v6-c-progress-stepper--GridAutoFlow: var(--pf-v6-c-progress-stepper--m-vertical--GridAutoFlow);
+ --pf-v6-c-progress-stepper--GridTemplateColumns: var(--pf-v6-c-progress-stepper--m-vertical--GridTemplateColumns);
+ --pf-v6-c-progress-stepper__step-connector--before--InsetBlockStart: var(--pf-v6-c-progress-stepper--m-vertical__step-connector--before--InsetBlockStart);
+ --pf-v6-c-progress-stepper__step-connector--before--InsetInlineStart: var(--pf-v6-c-progress-stepper--m-vertical__step-connector--before--InsetInlineStart);
+ --pf-v6-c-progress-stepper__step-connector--before--Width: var(--pf-v6-c-progress-stepper--m-vertical__step-connector--before--Width);
+ --pf-v6-c-progress-stepper__step-connector--before--Height: var(--pf-v6-c-progress-stepper--m-vertical__step-connector--before--Height);
+ --pf-v6-c-progress-stepper__step-connector--before--BorderInlineEndWidth: var(--pf-v6-c-progress-stepper--m-vertical__step-connector--before--BorderInlineEndWidth);
+ --pf-v6-c-progress-stepper__step-connector--before--BorderInlineEndColor: var(--pf-v6-c-progress-stepper--m-vertical__step-connector--before--BorderInlineEndColor);
+ --pf-v6-c-progress-stepper__step-connector--before--BorderBlockEndWidth: var(--pf-v6-c-progress-stepper--m-vertical__step-connector--before--BorderBlockEndWidth);
+ --pf-v6-c-progress-stepper__step-connector--before--BorderBlockEndColor: var(--pf-v6-c-progress-stepper--m-vertical__step-connector--before--BorderBlockEndColor);
+ --pf-v6-c-progress-stepper__step-connector--before--Transform: var(--pf-v6-c-progress-stepper--m-vertical__step-connector--before--Transform);
+ --pf-v6-c-progress-stepper__step-main--MarginBlockStart: var(--pf-v6-c-progress-stepper--m-vertical__step-main--MarginBlockStart);
+ --pf-v6-c-progress-stepper__step-main--MarginInlineEnd: var(--pf-v6-c-progress-stepper--m-vertical__step-main--MarginInlineEnd);
+ --pf-v6-c-progress-stepper__step-main--MarginBlockEnd: var(--pf-v6-c-progress-stepper--m-vertical__step-main--MarginBlockEnd);
+ --pf-v6-c-progress-stepper__step-main--MarginInlineStart: var(--pf-v6-c-progress-stepper--m-vertical__step-main--MarginInlineStart);
+ --pf-v6-c-progress-stepper--m-compact--GridTemplateColumns: var(--pf-v6-c-progress-stepper--m-vertical--m-compact--GridTemplateColumns);
+ --pf-v6-c-progress-stepper--m-compact__step-connector--GridRow: var(--pf-v6-c-progress-stepper--m-vertical--m-compact__step-connector--GridRow);
+ --pf-v6-c-progress-stepper--m-compact__step-connector--PaddingBlockEnd: var(--pf-v6-c-progress-stepper--m-vertical--m-compact__step-connector--PaddingBlockEnd);
+ --pf-v6-c-progress-stepper--m-center__step-connector--before--Content: none;
+ --pf-v6-c-progress-stepper--m-center__step-main--before--Content: "";
+ }
+}
+@media (min-width: 90.625rem) {
+ .pf-v6-c-progress-stepper.pf-m-horizontal-on-2xl {
+ --pf-v6-c-progress-stepper--GridAutoFlow: var(--pf-v6-c-progress-stepper--m-horizontal--GridAutoFlow);
+ --pf-v6-c-progress-stepper--GridTemplateColumns: var(--pf-v6-c-progress-stepper--m-horizontal--GridTemplateColumns);
+ --pf-v6-c-progress-stepper__step-connector--before--InsetBlockStart: var(--pf-v6-c-progress-stepper--m-horizontal__step-connector--before--InsetBlockStart);
+ --pf-v6-c-progress-stepper__step-connector--before--InsetInlineStart: var(--pf-v6-c-progress-stepper--m-horizontal__step-connector--before--InsetInlineStart);
+ --pf-v6-c-progress-stepper__step-connector--before--Width: var(--pf-v6-c-progress-stepper--m-horizontal__step-connector--before--Width);
+ --pf-v6-c-progress-stepper__step-connector--before--Height: var(--pf-v6-c-progress-stepper--m-horizontal__step-connector--before--Height);
+ --pf-v6-c-progress-stepper__step-connector--before--BorderInlineEndWidth: var(--pf-v6-c-progress-stepper--m-horizontal__step-connector--before--BorderInlineEndWidth);
+ --pf-v6-c-progress-stepper__step-connector--before--BorderInlineEndColor: var(--pf-v6-c-progress-stepper--m-horizontal__step-connector--before--BorderInlineEndColor);
+ --pf-v6-c-progress-stepper__step-connector--before--BorderBlockEndWidth: var(--pf-v6-c-progress-stepper--m-horizontal__step-connector--before--BorderBlockEndWidth);
+ --pf-v6-c-progress-stepper__step-connector--before--BorderBlockEndColor: var(--pf-v6-c-progress-stepper--m-horizontal__step-connector--before--BorderBlockEndColor);
+ --pf-v6-c-progress-stepper__step-connector--before--Transform: var(--pf-v6-c-progress-stepper--m-horizontal__step-connector--before--Transform);
+ --pf-v6-c-progress-stepper__step-main--MarginBlockStart: var(--pf-v6-c-progress-stepper--m-horizontal__step-main--MarginBlockStart);
+ --pf-v6-c-progress-stepper__step-main--MarginInlineEnd: var(--pf-v6-c-progress-stepper--m-horizontal__step-main--MarginInlineEnd);
+ --pf-v6-c-progress-stepper__step-main--MarginBlockEnd: var(--pf-v6-c-progress-stepper--m-horizontal__step-main--MarginBlockEnd);
+ --pf-v6-c-progress-stepper__step-main--MarginInlineStart: var(--pf-v6-c-progress-stepper--m-horizontal__step-main--MarginInlineStart);
+ --pf-v6-c-progress-stepper--m-compact--GridTemplateColumns: var(--pf-v6-c-progress-stepper--m-horizontal--m-compact--GridTemplateColumns);
+ --pf-v6-c-progress-stepper--m-compact__step-connector--GridRow: var(--pf-v6-c-progress-stepper--m-horizontal--m-compact__step-connector--GridRow);
+ --pf-v6-c-progress-stepper--m-compact__step-connector--PaddingBlockEnd: var(--pf-v6-c-progress-stepper--m-horizontal--m-compact__step-connector--PaddingBlockEnd);
+ --pf-v6-c-progress-stepper--m-center__step-connector--before--Content: "";
+ --pf-v6-c-progress-stepper--m-center__step-main--before--Content: none;
+ }
+ .pf-v6-c-progress-stepper.pf-m-vertical-on-2xl {
+ --pf-v6-c-progress-stepper--GridAutoFlow: var(--pf-v6-c-progress-stepper--m-vertical--GridAutoFlow);
+ --pf-v6-c-progress-stepper--GridTemplateColumns: var(--pf-v6-c-progress-stepper--m-vertical--GridTemplateColumns);
+ --pf-v6-c-progress-stepper__step-connector--before--InsetBlockStart: var(--pf-v6-c-progress-stepper--m-vertical__step-connector--before--InsetBlockStart);
+ --pf-v6-c-progress-stepper__step-connector--before--InsetInlineStart: var(--pf-v6-c-progress-stepper--m-vertical__step-connector--before--InsetInlineStart);
+ --pf-v6-c-progress-stepper__step-connector--before--Width: var(--pf-v6-c-progress-stepper--m-vertical__step-connector--before--Width);
+ --pf-v6-c-progress-stepper__step-connector--before--Height: var(--pf-v6-c-progress-stepper--m-vertical__step-connector--before--Height);
+ --pf-v6-c-progress-stepper__step-connector--before--BorderInlineEndWidth: var(--pf-v6-c-progress-stepper--m-vertical__step-connector--before--BorderInlineEndWidth);
+ --pf-v6-c-progress-stepper__step-connector--before--BorderInlineEndColor: var(--pf-v6-c-progress-stepper--m-vertical__step-connector--before--BorderInlineEndColor);
+ --pf-v6-c-progress-stepper__step-connector--before--BorderBlockEndWidth: var(--pf-v6-c-progress-stepper--m-vertical__step-connector--before--BorderBlockEndWidth);
+ --pf-v6-c-progress-stepper__step-connector--before--BorderBlockEndColor: var(--pf-v6-c-progress-stepper--m-vertical__step-connector--before--BorderBlockEndColor);
+ --pf-v6-c-progress-stepper__step-connector--before--Transform: var(--pf-v6-c-progress-stepper--m-vertical__step-connector--before--Transform);
+ --pf-v6-c-progress-stepper__step-main--MarginBlockStart: var(--pf-v6-c-progress-stepper--m-vertical__step-main--MarginBlockStart);
+ --pf-v6-c-progress-stepper__step-main--MarginInlineEnd: var(--pf-v6-c-progress-stepper--m-vertical__step-main--MarginInlineEnd);
+ --pf-v6-c-progress-stepper__step-main--MarginBlockEnd: var(--pf-v6-c-progress-stepper--m-vertical__step-main--MarginBlockEnd);
+ --pf-v6-c-progress-stepper__step-main--MarginInlineStart: var(--pf-v6-c-progress-stepper--m-vertical__step-main--MarginInlineStart);
+ --pf-v6-c-progress-stepper--m-compact--GridTemplateColumns: var(--pf-v6-c-progress-stepper--m-vertical--m-compact--GridTemplateColumns);
+ --pf-v6-c-progress-stepper--m-compact__step-connector--GridRow: var(--pf-v6-c-progress-stepper--m-vertical--m-compact__step-connector--GridRow);
+ --pf-v6-c-progress-stepper--m-compact__step-connector--PaddingBlockEnd: var(--pf-v6-c-progress-stepper--m-vertical--m-compact__step-connector--PaddingBlockEnd);
+ --pf-v6-c-progress-stepper--m-center__step-connector--before--Content: none;
+ --pf-v6-c-progress-stepper--m-center__step-main--before--Content: "";
+ }
+}
+
+.pf-v6-c-radio {
+ --pf-v6-c-radio--GridGap: var(--pf-t--global--spacer--sm) var(--pf-t--global--spacer--sm);
+ --pf-v6-c-radio--AccentColor: var(--pf-t--global--icon--color--brand--default);
+ --pf-v6-c-radio--m-standalone--MinHeight: calc(var(--pf-v6-c-radio__label--FontSize) * var(--pf-v6-c-radio__label--LineHeight));
+ --pf-v6-c-radio__label--disabled--Color: var(--pf-t--global--text--color--disabled);
+ --pf-v6-c-radio__label--Color: var(--pf-t--global--text--color--regular);
+ --pf-v6-c-radio__label--FontWeight: var(--pf-t--global--font--weight--body--default);
+ --pf-v6-c-radio__label--FontSize: var(--pf-t--global--font--size--body--default);
+ --pf-v6-c-radio__label--LineHeight: var(--pf-t--global--font--line-height--body);
+ --pf-v6-c-radio__description--FontSize: var(--pf-t--global--font--size--body--sm);
+ --pf-v6-c-radio__description--Color: var(--pf-t--global--text--color--subtle);
+ --pf-v6-c-radio__input--first-child--MarginInlineStart: 0.0625rem;
+ --pf-v6-c-radio__input--last-child--MarginInlineEnd: 0.0625rem;
+ --pf-v6-c-radio__body--MarginBlockStart: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-radio__input--TranslateY: calc((var(--pf-v6-c-radio__label--LineHeight) * var(--pf-v6-c-radio__label--FontSize) / 2 ) - 50%);
+}
+
+.pf-v6-c-radio {
+ display: grid;
+ grid-template-columns: auto 1fr;
+ grid-gap: var(--pf-v6-c-radio--GridGap);
+ align-items: baseline;
+ accent-color: var(--pf-v6-c-radio--AccentColor);
+}
+.pf-v6-c-radio.pf-m-standalone {
+ display: inline-grid;
+ grid-template-columns: auto;
+ min-height: var(--pf-v6-c-radio--m-standalone--MinHeight);
+}
+.pf-v6-c-radio.pf-m-standalone .pf-v6-c-radio__input {
+ align-self: center;
+ transform: none;
+}
+
+.pf-v6-c-radio__input {
+ align-self: start;
+ font-size: var(--pf-v6-c-radio__label--FontSize);
+ line-height: var(--pf-v6-c-radio__label--LineHeight);
+ transform: translateY(var(--pf-v6-c-radio__input--TranslateY));
+}
+.pf-v6-c-radio__input:first-child {
+ margin-inline-start: var(--pf-v6-c-radio__input--first-child--MarginInlineStart);
+}
+.pf-v6-c-radio__input:last-child {
+ margin-inline-end: var(--pf-v6-c-radio__input--last-child--MarginInlineEnd);
+}
+
+.pf-v6-c-radio__label {
+ font-size: var(--pf-v6-c-radio__label--FontSize);
+ font-weight: var(--pf-v6-c-radio__label--FontWeight);
+ line-height: var(--pf-v6-c-radio__label--LineHeight);
+ color: var(--pf-v6-c-radio__label--Color);
+}
+
+.pf-v6-c-radio__description {
+ grid-column: 2;
+ font-size: var(--pf-v6-c-radio__description--FontSize);
+ color: var(--pf-v6-c-radio__description--Color);
+}
+
+.pf-v6-c-radio__body {
+ grid-column: 2;
+ margin-block-start: var(--pf-v6-c-radio__body--MarginBlockStart);
+}
+
+.pf-v6-c-radio__label,
+.pf-v6-c-radio__input {
+ justify-self: start;
+}
+label.pf-v6-c-radio, .pf-v6-c-radio__label,
+.pf-v6-c-radio__input {
+ cursor: pointer;
+}
+
+.pf-v6-c-radio__label:disabled, .pf-v6-c-radio__label.pf-m-disabled,
+.pf-v6-c-radio__input:disabled,
+.pf-v6-c-radio__input.pf-m-disabled {
+ --pf-v6-c-radio__label--Color: var(--pf-v6-c-radio__label--disabled--Color);
+ cursor: not-allowed;
+}
+
+.pf-v6-c-sidebar {
+ --pf-v6-c-sidebar--inset: var(--pf-t--global--spacer--md);
+ --pf-v6-c-sidebar--xl--inset: var(--pf-t--global--spacer--lg);
+ --pf-v6-c-sidebar--BorderWidth--base: var(--pf-t--global--border--width--regular);
+ --pf-v6-c-sidebar--BorderColor--base: var(--pf-t--global--border--color--default);
+ --pf-v6-c-sidebar__panel--PaddingBlockStart: 0;
+ --pf-v6-c-sidebar__panel--PaddingInlineEnd: 0;
+ --pf-v6-c-sidebar__panel--PaddingBlockEnd: 0;
+ --pf-v6-c-sidebar__panel--PaddingInlineStart: 0;
+ --pf-v6-c-sidebar__panel--Order: -1;
+ --pf-v6-c-sidebar__panel--m-padding--PaddingBlockStart: var(--pf-v6-c-sidebar--inset);
+ --pf-v6-c-sidebar__panel--m-padding--PaddingInlineEnd: var(--pf-v6-c-sidebar--inset);
+ --pf-v6-c-sidebar__panel--m-padding--PaddingBlockEnd: var(--pf-v6-c-sidebar--inset);
+ --pf-v6-c-sidebar__panel--m-padding--PaddingInlineStart: var(--pf-v6-c-sidebar--inset);
+ --pf-v6-c-sidebar__content--PaddingBlockStart: 0;
+ --pf-v6-c-sidebar__content--PaddingInlineEnd: 0;
+ --pf-v6-c-sidebar__content--PaddingBlockEnd: 0;
+ --pf-v6-c-sidebar__content--PaddingInlineStart: 0;
+ --pf-v6-c-sidebar__content--Order: 1;
+ --pf-v6-c-sidebar__content--m-padding--PaddingBlockStart: var(--pf-v6-c-sidebar--inset);
+ --pf-v6-c-sidebar__content--m-padding--PaddingInlineEnd: var(--pf-v6-c-sidebar--inset);
+ --pf-v6-c-sidebar__content--m-padding--PaddingBlockEnd: var(--pf-v6-c-sidebar--inset);
+ --pf-v6-c-sidebar__content--m-padding--PaddingInlineStart: var(--pf-v6-c-sidebar--inset);
+ --pf-v6-c-sidebar__main--FlexDirection: column;
+ --pf-v6-c-sidebar__main--md--FlexDirection: row;
+ --pf-v6-c-sidebar__main--AlignItems: stretch;
+ --pf-v6-c-sidebar__main--md--AlignItems: flex-start;
+ --pf-v6-c-sidebar__main--child--MarginBlockStart: 0;
+ --pf-v6-c-sidebar--m-gutter__main--Gap: var(--pf-v6-c-sidebar--inset);
+ --pf-v6-c-sidebar__main--m-border--before--Display: none;
+ --pf-v6-c-sidebar__main--m-border--before--md--Display: block;
+ --pf-v6-c-sidebar__main--m-border--before--BorderWidth: var(--pf-v6-c-sidebar--BorderWidth--base);
+ --pf-v6-c-sidebar__main--m-border--before--BorderColor: var(--pf-v6-c-sidebar--BorderColor--base);
+ --pf-v6-c-sidebar--m-panel-right__panel--Order: -1;
+ --pf-v6-c-sidebar--m-panel-right__panel--md--Order: 1;
+ --pf-v6-c-sidebar--m-panel-right__content--md--Order: -1;
+ --pf-v6-c-sidebar--m-stack__main--FlexDirection: column;
+ --pf-v6-c-sidebar--m-stack__main--AlignItems: stretch;
+ --pf-v6-c-sidebar--m-stack__panel--Position: sticky;
+ --pf-v6-c-sidebar--m-stack__panel--InsetBlockStart: 0;
+ --pf-v6-c-sidebar--m-stack__panel--BoxShadow: var(--pf-v6-c-sidebar__panel--BoxShadow--base);
+ --pf-v6-c-sidebar--m-stack--m-panel-right__panel--Order: -1;
+ --pf-v6-c-sidebar--m-split__main--AlignItems: flex-start;
+ --pf-v6-c-sidebar--m-split__main--FlexDirection: row;
+ --pf-v6-c-sidebar--m-split__panel--Position: static;
+ --pf-v6-c-sidebar--m-split__panel--InsetBlockStart: auto;
+ --pf-v6-c-sidebar--m-split--m-panel-right__panel--Order: 1;
+ --pf-v6-c-sidebar--m-split__main--m-border--before--Display: block;
+ --pf-v6-c-sidebar__panel--FlexBasis--base: auto;
+ --pf-v6-c-sidebar__panel--BoxShadow--base: var(--pf-t--global--box-shadow--md--bottom);
+ --pf-v6-c-sidebar__panel--BoxShadow: var(--pf-v6-c-sidebar__panel--BoxShadow--base);
+ --pf-v6-c-sidebar__panel--InsetBlockStart: 0;
+ --pf-v6-c-sidebar__panel--md--InsetBlockStart: auto;
+ --pf-v6-c-sidebar__panel--Position: sticky;
+ --pf-v6-c-sidebar__panel--md--Position: static;
+ --pf-v6-c-sidebar__panel--FlexBasis-base: auto;
+ --pf-v6-c-sidebar__panel--FlexBasis: var(--pf-v6-c-sidebar__panel--FlexBasis-base);
+ --pf-v6-c-sidebar__panel--md--FlexBasis: 15.625rem;
+ --pf-v6-c-sidebar__panel--m-split--FlexBasis: 15.625rem;
+ --pf-v6-c-sidebar__panel--m-stack--FlexBasis: auto;
+ --pf-v6-c-sidebar__panel--ZIndex: var(--pf-t--global--z-index--xs);
+ --pf-v6-c-sidebar__panel--BackgroundColor: var(--pf-t--global--background--color--primary--default);
+ --pf-v6-c-sidebar__panel--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
+ --pf-v6-c-sidebar__content--BackgroundColor: var(--pf-t--global--background--color--primary--default);
+ --pf-v6-c-sidebar__content--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
+ --pf-v6-c-sidebar__panel--m-sticky--InsetBlockStart: 0;
+ --pf-v6-c-sidebar__panel--m-sticky--Position: sticky;
+}
+
+.pf-v6-c-sidebar {
+ height: 100%;
+}
+@media (min-width: 48rem) {
+ .pf-v6-c-sidebar {
+ --pf-v6-c-sidebar__main--FlexDirection: var(--pf-v6-c-sidebar__main--md--FlexDirection);
+ --pf-v6-c-sidebar__main--AlignItems: var(--pf-v6-c-sidebar__main--md--AlignItems);
+ --pf-v6-c-sidebar__main--m-border--before--Display: var(--pf-v6-c-sidebar__main--m-border--before--md--Display);
+ --pf-v6-c-sidebar__panel--BoxShadow: none;
+ --pf-v6-c-sidebar__panel--FlexBasis: var(--pf-v6-c-sidebar__panel--md--FlexBasis);
+ --pf-v6-c-sidebar__panel--InsetBlockStart: var(--pf-v6-c-sidebar__panel--md--InsetBlockStart);
+ --pf-v6-c-sidebar__panel--Position: var(--pf-v6-c-sidebar__panel--md--Position);
+ }
+}
+@media (min-width: 75rem) {
+ .pf-v6-c-sidebar {
+ --pf-v6-c-sidebar--inset: var(--pf-v6-c-sidebar--xl--inset);
+ }
+}
+.pf-v6-c-sidebar.pf-m-gutter > .pf-v6-c-sidebar__main {
+ gap: var(--pf-v6-c-sidebar--m-gutter__main--Gap);
+}
+.pf-v6-c-sidebar.pf-m-panel-right {
+ --pf-v6-c-sidebar__panel--Order: var(--pf-v6-c-sidebar--m-panel-right__panel--Order);
+ --pf-v6-c-sidebar__content--Order: var(--pf-v6-c-sidebar--m-panel-right__content--Order);
+}
+@media (min-width: 48rem) {
+ .pf-v6-c-sidebar.pf-m-panel-right {
+ --pf-v6-c-sidebar--m-panel-right__panel--Order: var(--pf-v6-c-sidebar--m-panel-right__panel--md--Order);
+ --pf-v6-c-sidebar--m-panel-right__content--Order: var(--pf-v6-c-sidebar--m-panel-right__content--md--Order);
+ }
+}
+.pf-v6-c-sidebar.pf-m-stack {
+ --pf-v6-c-sidebar__main--FlexDirection: var(--pf-v6-c-sidebar--m-stack__main--FlexDirection);
+ --pf-v6-c-sidebar__main--AlignItems: var(--pf-v6-c-sidebar--m-stack__main--AlignItems);
+ --pf-v6-c-sidebar__panel--Position: var(--pf-v6-c-sidebar--m-stack__panel--Position);
+ --pf-v6-c-sidebar__panel--InsetBlockStart: var(--pf-v6-c-sidebar--m-stack__panel--InsetBlockStart);
+ --pf-v6-c-sidebar__panel--BoxShadow: var(--pf-v6-c-sidebar--m-stack__panel--BoxShadow);
+ --pf-v6-c-sidebar__panel--FlexBasis: var(--pf-v6-c-sidebar__panel--m-stack--FlexBasis);
+ --pf-v6-c-sidebar__main--m-border--before--Display: none;
+ --pf-v6-c-sidebar--m-panel-right__panel--Order: var(--pf-v6-c-sidebar--m-stack--m-panel-right__panel--Order);
+}
+.pf-v6-c-sidebar.pf-m-split {
+ --pf-v6-c-sidebar__main--FlexDirection: var(--pf-v6-c-sidebar--m-split__main--FlexDirection);
+ --pf-v6-c-sidebar__main--AlignItems: var(--pf-v6-c-sidebar--m-split__main--AlignItems);
+ --pf-v6-c-sidebar__panel--Position: var(--pf-v6-c-sidebar--m-split__panel--Position);
+ --pf-v6-c-sidebar__panel--InsetBlockStart: var(--pf-v6-c-sidebar--m-split__panel--InsetBlockStart);
+ --pf-v6-c-sidebar__panel--BoxShadow: none;
+ --pf-v6-c-sidebar__panel--FlexBasis: var(--pf-v6-c-sidebar__panel--m-split--FlexBasis);
+ --pf-v6-c-sidebar__main--m-border--before--Display: var(--pf-v6-c-sidebar--m-split__main--m-border--before--Display);
+ --pf-v6-c-sidebar--m-panel-right__panel--Order: var(--pf-v6-c-sidebar--m-split--m-panel-right__panel--Order);
+}
+
+.pf-v6-c-sidebar__main {
+ display: flex;
+ flex-direction: var(--pf-v6-c-sidebar__main--FlexDirection);
+ align-items: var(--pf-v6-c-sidebar__main--AlignItems);
+}
+.pf-v6-c-sidebar__main.pf-m-border::before {
+ display: var(--pf-v6-c-sidebar__main--m-border--before--Display);
+ flex: 0 0 var(--pf-v6-c-sidebar__main--m-border--before--BorderWidth);
+ align-self: stretch;
+ content: "";
+ background-color: var(--pf-v6-c-sidebar__main--m-border--before--BorderColor);
+}
+
+.pf-v6-c-sidebar__panel {
+ position: var(--pf-v6-c-sidebar__panel--Position);
+ inset-block-start: var(--pf-v6-c-sidebar__panel--InsetBlockStart);
+ z-index: var(--pf-v6-c-sidebar__panel--ZIndex);
+ flex-basis: var(--pf-v6-c-sidebar__panel--FlexBasis);
+ flex-shrink: 0;
+ order: var(--pf-v6-c-sidebar__panel--Order);
+ padding-block-start: var(--pf-v6-c-sidebar__panel--PaddingBlockStart);
+ padding-block-end: var(--pf-v6-c-sidebar__panel--PaddingBlockEnd);
+ padding-inline-start: var(--pf-v6-c-sidebar__panel--PaddingInlineStart);
+ padding-inline-end: var(--pf-v6-c-sidebar__panel--PaddingInlineEnd);
+ background-color: var(--pf-v6-c-sidebar__panel--BackgroundColor);
+ box-shadow: var(--pf-v6-c-sidebar__panel--BoxShadow);
+}
+.pf-v6-c-sidebar__panel.pf-m-padding {
+ --pf-v6-c-sidebar__panel--PaddingBlockStart: var(--pf-v6-c-sidebar__panel--m-padding--PaddingBlockStart);
+ --pf-v6-c-sidebar__panel--PaddingInlineEnd: var(--pf-v6-c-sidebar__panel--m-padding--PaddingInlineEnd);
+ --pf-v6-c-sidebar__panel--PaddingBlockEnd: var(--pf-v6-c-sidebar__panel--m-padding--PaddingBlockEnd);
+ --pf-v6-c-sidebar__panel--PaddingInlineStart: var(--pf-v6-c-sidebar__panel--m-padding--PaddingInlineStart);
+}
+.pf-v6-c-sidebar__panel.pf-m-sticky {
+ --pf-v6-c-sidebar__panel--Position: var(--pf-v6-c-sidebar__panel--m-sticky--Position);
+ --pf-v6-c-sidebar__panel--InsetBlockStart: var(--pf-v6-c-sidebar__panel--m-sticky--InsetBlockStart);
+}
+.pf-v6-c-sidebar__panel.pf-m-static {
+ --pf-v6-c-sidebar__panel--Position: static;
+ --pf-v6-c-sidebar__panel--InsetBlockStart: auto;
+}
+.pf-v6-c-sidebar__panel.pf-m-secondary {
+ --pf-v6-c-sidebar__panel--BackgroundColor: var(--pf-v6-c-sidebar__panel--m-secondary--BackgroundColor);
+}
+
+.pf-v6-c-sidebar__content {
+ flex-grow: 1;
+ order: var(--pf-v6-c-sidebar__content--Order);
+ padding-block-start: var(--pf-v6-c-sidebar__content--PaddingBlockStart);
+ padding-block-end: var(--pf-v6-c-sidebar__content--PaddingBlockEnd);
+ padding-inline-start: var(--pf-v6-c-sidebar__content--PaddingInlineStart);
+ padding-inline-end: var(--pf-v6-c-sidebar__content--PaddingInlineEnd);
+ background-color: var(--pf-v6-c-sidebar__content--BackgroundColor);
+}
+.pf-v6-c-sidebar__content.pf-m-padding {
+ --pf-v6-c-sidebar__content--PaddingBlockStart: var(--pf-v6-c-sidebar__content--m-padding--PaddingBlockStart);
+ --pf-v6-c-sidebar__content--PaddingInlineEnd: var(--pf-v6-c-sidebar__content--m-padding--PaddingInlineEnd);
+ --pf-v6-c-sidebar__content--PaddingBlockEnd: var(--pf-v6-c-sidebar__content--m-padding--PaddingBlockEnd);
+ --pf-v6-c-sidebar__content--PaddingInlineStart: var(--pf-v6-c-sidebar__content--m-padding--PaddingBlockStart);
+}
+.pf-v6-c-sidebar__content.pf-m-no-background {
+ --pf-v6-c-sidebar__content--BackgroundColor: transparent;
+}
+.pf-v6-c-sidebar__content.pf-m-secondary {
+ --pf-v6-c-sidebar__content--BackgroundColor: var(--pf-v6-c-sidebar__content--m-secondary--BackgroundColor);
+}
+.pf-v6-c-sidebar__content + .pf-v6-c-sidebar__panel {
+ --pf-v6-c-sidebar__panel--Order: 1;
+}
+:where(.pf-v6-c-sidebar__content:first-child) {
+ --pf-v6-c-sidebar__content--Order: -1;
+}
+
+.pf-v6-c-sidebar.pf-m-no-background,
+.pf-v6-c-sidebar__panel.pf-m-no-background,
+.pf-v6-c-sidebar__content.pf-m-no-background {
+ background-color: transparent;
+}
+
+.pf-v6-c-sidebar__panel.pf-m-width-default {
+ --pf-v6-c-sidebar__panel--FlexBasis: var(--pf-v6-c-sidebar__panel--FlexBasis--base);
+}
+
+.pf-v6-c-sidebar__panel.pf-m-width-25 {
+ --pf-v6-c-sidebar__panel--FlexBasis: 25%;
+}
+
+.pf-v6-c-sidebar__panel.pf-m-width-33 {
+ --pf-v6-c-sidebar__panel--FlexBasis: 33%;
+}
+
+.pf-v6-c-sidebar__panel.pf-m-width-50 {
+ --pf-v6-c-sidebar__panel--FlexBasis: 50%;
+}
+
+.pf-v6-c-sidebar__panel.pf-m-width-66 {
+ --pf-v6-c-sidebar__panel--FlexBasis: 66%;
+}
+
+.pf-v6-c-sidebar__panel.pf-m-width-75 {
+ --pf-v6-c-sidebar__panel--FlexBasis: 75%;
+}
+
+.pf-v6-c-sidebar__panel.pf-m-width-100 {
+ --pf-v6-c-sidebar__panel--FlexBasis: 100%;
+}
+
+@media (min-width: 36rem) {
+ .pf-v6-c-sidebar__panel.pf-m-width-default-on-sm {
+ --pf-v6-c-sidebar__panel--FlexBasis: var(--pf-v6-c-sidebar__panel--FlexBasis--base);
+ }
+ .pf-v6-c-sidebar__panel.pf-m-width-25-on-sm {
+ --pf-v6-c-sidebar__panel--FlexBasis: 25%;
+ }
+ .pf-v6-c-sidebar__panel.pf-m-width-33-on-sm {
+ --pf-v6-c-sidebar__panel--FlexBasis: 33%;
+ }
+ .pf-v6-c-sidebar__panel.pf-m-width-50-on-sm {
+ --pf-v6-c-sidebar__panel--FlexBasis: 50%;
+ }
+ .pf-v6-c-sidebar__panel.pf-m-width-66-on-sm {
+ --pf-v6-c-sidebar__panel--FlexBasis: 66%;
+ }
+ .pf-v6-c-sidebar__panel.pf-m-width-75-on-sm {
+ --pf-v6-c-sidebar__panel--FlexBasis: 75%;
+ }
+ .pf-v6-c-sidebar__panel.pf-m-width-100-on-sm {
+ --pf-v6-c-sidebar__panel--FlexBasis: 100%;
+ }
+}
+@media (min-width: 48rem) {
+ .pf-v6-c-sidebar__panel.pf-m-width-default-on-md {
+ --pf-v6-c-sidebar__panel--FlexBasis: var(--pf-v6-c-sidebar__panel--FlexBasis--base);
+ }
+ .pf-v6-c-sidebar__panel.pf-m-width-25-on-md {
+ --pf-v6-c-sidebar__panel--FlexBasis: 25%;
+ }
+ .pf-v6-c-sidebar__panel.pf-m-width-33-on-md {
+ --pf-v6-c-sidebar__panel--FlexBasis: 33%;
+ }
+ .pf-v6-c-sidebar__panel.pf-m-width-50-on-md {
+ --pf-v6-c-sidebar__panel--FlexBasis: 50%;
+ }
+ .pf-v6-c-sidebar__panel.pf-m-width-66-on-md {
+ --pf-v6-c-sidebar__panel--FlexBasis: 66%;
+ }
+ .pf-v6-c-sidebar__panel.pf-m-width-75-on-md {
+ --pf-v6-c-sidebar__panel--FlexBasis: 75%;
+ }
+ .pf-v6-c-sidebar__panel.pf-m-width-100-on-md {
+ --pf-v6-c-sidebar__panel--FlexBasis: 100%;
+ }
+}
+@media (min-width: 62rem) {
+ .pf-v6-c-sidebar__panel.pf-m-width-default-on-lg {
+ --pf-v6-c-sidebar__panel--FlexBasis: var(--pf-v6-c-sidebar__panel--FlexBasis--base);
+ }
+ .pf-v6-c-sidebar__panel.pf-m-width-25-on-lg {
+ --pf-v6-c-sidebar__panel--FlexBasis: 25%;
+ }
+ .pf-v6-c-sidebar__panel.pf-m-width-33-on-lg {
+ --pf-v6-c-sidebar__panel--FlexBasis: 33%;
+ }
+ .pf-v6-c-sidebar__panel.pf-m-width-50-on-lg {
+ --pf-v6-c-sidebar__panel--FlexBasis: 50%;
+ }
+ .pf-v6-c-sidebar__panel.pf-m-width-66-on-lg {
+ --pf-v6-c-sidebar__panel--FlexBasis: 66%;
+ }
+ .pf-v6-c-sidebar__panel.pf-m-width-75-on-lg {
+ --pf-v6-c-sidebar__panel--FlexBasis: 75%;
+ }
+ .pf-v6-c-sidebar__panel.pf-m-width-100-on-lg {
+ --pf-v6-c-sidebar__panel--FlexBasis: 100%;
+ }
+}
+@media (min-width: 75rem) {
+ .pf-v6-c-sidebar__panel.pf-m-width-default-on-xl {
+ --pf-v6-c-sidebar__panel--FlexBasis: var(--pf-v6-c-sidebar__panel--FlexBasis--base);
+ }
+ .pf-v6-c-sidebar__panel.pf-m-width-25-on-xl {
+ --pf-v6-c-sidebar__panel--FlexBasis: 25%;
+ }
+ .pf-v6-c-sidebar__panel.pf-m-width-33-on-xl {
+ --pf-v6-c-sidebar__panel--FlexBasis: 33%;
+ }
+ .pf-v6-c-sidebar__panel.pf-m-width-50-on-xl {
+ --pf-v6-c-sidebar__panel--FlexBasis: 50%;
+ }
+ .pf-v6-c-sidebar__panel.pf-m-width-66-on-xl {
+ --pf-v6-c-sidebar__panel--FlexBasis: 66%;
+ }
+ .pf-v6-c-sidebar__panel.pf-m-width-75-on-xl {
+ --pf-v6-c-sidebar__panel--FlexBasis: 75%;
+ }
+ .pf-v6-c-sidebar__panel.pf-m-width-100-on-xl {
+ --pf-v6-c-sidebar__panel--FlexBasis: 100%;
+ }
+}
+@media (min-width: 90.625rem) {
+ .pf-v6-c-sidebar__panel.pf-m-width-default-on-2xl {
+ --pf-v6-c-sidebar__panel--FlexBasis: var(--pf-v6-c-sidebar__panel--FlexBasis--base);
+ }
+ .pf-v6-c-sidebar__panel.pf-m-width-25-on-2xl {
+ --pf-v6-c-sidebar__panel--FlexBasis: 25%;
+ }
+ .pf-v6-c-sidebar__panel.pf-m-width-33-on-2xl {
+ --pf-v6-c-sidebar__panel--FlexBasis: 33%;
+ }
+ .pf-v6-c-sidebar__panel.pf-m-width-50-on-2xl {
+ --pf-v6-c-sidebar__panel--FlexBasis: 50%;
+ }
+ .pf-v6-c-sidebar__panel.pf-m-width-66-on-2xl {
+ --pf-v6-c-sidebar__panel--FlexBasis: 66%;
+ }
+ .pf-v6-c-sidebar__panel.pf-m-width-75-on-2xl {
+ --pf-v6-c-sidebar__panel--FlexBasis: 75%;
+ }
+ .pf-v6-c-sidebar__panel.pf-m-width-100-on-2xl {
+ --pf-v6-c-sidebar__panel--FlexBasis: 100%;
+ }
+}
+.pf-v6-c-simple-list {
+ --pf-v6-c-simple-list__item-link--PaddingBlockStart: var(--pf-t--global--spacer--xs);
+ --pf-v6-c-simple-list__item-link--PaddingInlineEnd: var(--pf-t--global--spacer--md);
+ --pf-v6-c-simple-list__item-link--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
+ --pf-v6-c-simple-list__item-link--PaddingInlineStart: var(--pf-t--global--spacer--md);
+ --pf-v6-c-simple-list__item-link--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
+ --pf-v6-c-simple-list__item-link--Color: var(--pf-t--global--text--color--subtle);
+ --pf-v6-c-simple-list__item-link--FontSize: var(--pf-t--global--font--size--body--default);
+ --pf-v6-c-simple-list__item-link--m-current--Color: var(--pf-t--global--text--color--regular);
+ --pf-v6-c-simple-list__item-link--m-current--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
+ --pf-v6-c-simple-list__item-link--hover--Color: var(--pf-t--global--text--color--subtle);
+ --pf-v6-c-simple-list__item-link--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
+ --pf-v6-c-simple-list__item-link--BorderRadius: var(--pf-t--global--border--radius--tiny);
+ --pf-v6-c-simple-list__item-link--m-link--Color: var(--pf-t--global--text--color--link--default);
+ --pf-v6-c-simple-list__item-link--m-link--m-current--Color: var(--pf-t--global--text--color--link--hover);
+ --pf-v6-c-simple-list__item-link--m-link--hover--Color: var(--pf-t--global--text--color--link--hover);
+ --pf-v6-c-simple-list__title--PaddingBlockStart: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-simple-list__title--PaddingInlineEnd: var(--pf-t--global--spacer--md);
+ --pf-v6-c-simple-list__title--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-simple-list__title--PaddingInlineStart: var(--pf-t--global--spacer--md);
+ --pf-v6-c-simple-list__title--FontSize: var(--pf-t--global--font--size--body--sm);
+ --pf-v6-c-simple-list__title--Color: var(--pf-t--global--text--color--regular);
+ --pf-v6-c-simple-list__title--FontWeight: var(--pf-t--global--font--weight--body--bold);
+ --pf-v6-c-simple-list__section--section--MarginBlockStart: var(--pf-t--global--spacer--sm);
+}
+
+.pf-v6-c-simple-list__item-link {
+ display: block;
+ width: 100%;
+ padding-block-start: var(--pf-v6-c-simple-list__item-link--PaddingBlockStart);
+ padding-block-end: var(--pf-v6-c-simple-list__item-link--PaddingBlockEnd);
+ padding-inline-start: var(--pf-v6-c-simple-list__item-link--PaddingInlineStart);
+ padding-inline-end: var(--pf-v6-c-simple-list__item-link--PaddingInlineEnd);
+ font-size: var(--pf-v6-c-simple-list__item-link--FontSize);
+ color: var(--pf-v6-c-simple-list__item-link--Color);
+ text-align: start;
+ text-decoration-line: none;
+ background-color: var(--pf-v6-c-simple-list__item-link--BackgroundColor);
+ border: none;
+ border-radius: var(--pf-v6-c-simple-list__item-link--BorderRadius);
+}
+.pf-v6-c-simple-list__item-link.pf-m-link {
+ --pf-v6-c-simple-list__item-link--Color: var(--pf-v6-c-simple-list__item-link--m-link--Color);
+ --pf-v6-c-simple-list__item-link--hover--Color: var(--pf-v6-c-simple-list__item-link--m-link--m-current--Color);
+ --pf-v6-c-simple-list__item-link--m-current--Color: var(--pf-v6-c-simple-list__item-link--m-link--hover--Color);
+}
+.pf-v6-c-simple-list__item-link:is(:hover, :focus) {
+ --pf-v6-c-simple-list__item-link--BackgroundColor: var(--pf-v6-c-simple-list__item-link--hover--BackgroundColor);
+ --pf-v6-c-simple-list__item-link--Color: var(--pf-v6-c-simple-list__item-link--hover--Color);
+ text-decoration-line: none;
+}
+.pf-v6-c-simple-list__item-link.pf-m-current {
+ --pf-v6-c-simple-list__item-link--BackgroundColor: var(--pf-v6-c-simple-list__item-link--m-current--BackgroundColor);
+ --pf-v6-c-simple-list__item-link--Color: var(--pf-v6-c-simple-list__item-link--m-current--Color);
+}
+
+.pf-v6-c-simple-list__title {
+ padding-block-start: var(--pf-v6-c-simple-list__title--PaddingBlockStart);
+ padding-block-end: var(--pf-v6-c-simple-list__title--PaddingBlockEnd);
+ padding-inline-start: var(--pf-v6-c-simple-list__title--PaddingInlineStart);
+ padding-inline-end: var(--pf-v6-c-simple-list__title--PaddingInlineEnd);
+ font-size: var(--pf-v6-c-simple-list__title--FontSize);
+ font-weight: var(--pf-v6-c-simple-list__title--FontWeight);
+ color: var(--pf-v6-c-simple-list__title--Color);
+}
+
+.pf-v6-c-simple-list__section + .pf-v6-c-simple-list__section {
+ margin-block-start: var(--pf-v6-c-simple-list__section--section--MarginBlockStart);
+}
+
+.pf-v6-c-skeleton {
+ --pf-v6-c-skeleton--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
+ --pf-v6-c-skeleton--Width: auto;
+ --pf-v6-c-skeleton--Height: auto;
+ --pf-v6-c-skeleton--BorderRadius: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-skeleton--before--PaddingBlockEnd: 0;
+ --pf-v6-c-skeleton--before--Height: auto;
+ --pf-v6-c-skeleton--before--Content: "Â ";
+ --pf-v6-c-skeleton--after--LinearGradientAngle: 90deg;
+ --pf-v6-c-skeleton--after--LinearGradientColorStop1: var(--pf-t--global--background--color--secondary--default);
+ --pf-v6-c-skeleton--after--LinearGradientColorStop2: var(--pf-t--global--background--color--secondary--hover);
+ --pf-v6-c-skeleton--after--LinearGradientColorStop3: var(--pf-t--global--background--color--secondary--default);
+ --pf-v6-c-skeleton--after--TranslateX: 0;
+ --pf-v6-c-skeleton--after--AnimationName: pf-v6-c-skeleton-loading-reduced-motion;
+ --pf-v6-c-skeleton--after--AnimationDuration: 3s;
+ --pf-v6-c-skeleton--after--AnimationIterationCount: infinite;
+ --pf-v6-c-skeleton--after--AnimationTimingFunction: linear;
+ --pf-v6-c-skeleton--after--AnimationDelay: .5s;
+ --pf-v6-c-skeleton--m-circle--BorderRadius: var(--pf-t--global--border--radius--pill);
+ --pf-v6-c-skeleton--m-circle--before--PaddingBlockEnd: 100%;
+ --pf-v6-c-skeleton--m-text-4xl--Height: calc(var(--pf-t--global--font--size--4xl) * var(--pf-t--global--font--line-height--heading));
+ --pf-v6-c-skeleton--m-text-3xl--Height: calc(var(--pf-t--global--font--size--3xl) * var(--pf-t--global--font--line-height--heading));
+ --pf-v6-c-skeleton--m-text-2xl--Height: calc(var(--pf-t--global--font--size--2xl) * var(--pf-t--global--font--line-height--heading));
+ --pf-v6-c-skeleton--m-text-xl--Height: calc(var(--pf-t--global--font--size--xl) * var(--pf-t--global--font--line-height--heading));
+ --pf-v6-c-skeleton--m-text-lg--Height: calc(var(--pf-t--global--font--size--lg) * var(--pf-t--global--font--line-height--body));
+ --pf-v6-c-skeleton--m-text-md--Height: calc(var(--pf-t--global--font--size--md) * var(--pf-t--global--font--line-height--body));
+ --pf-v6-c-skeleton--m-text-sm--Height: calc(var(--pf-t--global--font--size--sm) * var(--pf-t--global--font--line-height--body));
+ --pf-v6-c-skeleton--m-width-sm--Width: 6.25rem;
+ --pf-v6-c-skeleton--m-width-md--Width: 12.5rem;
+ --pf-v6-c-skeleton--m-width-lg--Width: 18.75rem;
+ --pf-v6-c-skeleton--m-width-25--Width: 25%;
+ --pf-v6-c-skeleton--m-width-33--Width: calc(100% / 3);
+ --pf-v6-c-skeleton--m-width-50--Width: 50%;
+ --pf-v6-c-skeleton--m-width-66--Width: calc(100% / 3 * 2);
+ --pf-v6-c-skeleton--m-width-75--Width: 75%;
+ --pf-v6-c-skeleton--m-height-sm--Height: 6.25rem;
+ --pf-v6-c-skeleton--m-height-md--Height: 12.5rem;
+ --pf-v6-c-skeleton--m-height-lg--Height: 18.75rem;
+ --pf-v6-c-skeleton--m-height-25--Height: 25%;
+ --pf-v6-c-skeleton--m-height-33--Height: calc(100% / 3);
+ --pf-v6-c-skeleton--m-height-50--Height: 50%;
+ --pf-v6-c-skeleton--m-height-66--Height: calc(100% / 3 * 2);
+ --pf-v6-c-skeleton--m-height-75--Height: 75%;
+ --pf-v6-c-skeleton--m-height-100--Height: 100%;
+}
+@media screen and (prefers-reduced-motion: no-preference) {
+ .pf-v6-c-skeleton {
+ --pf-v6-c-skeleton--after--LinearGradientColorStop1: var(--pf-t--global--background--color--secondary--default);
+ --pf-v6-c-skeleton--after--LinearGradientColorStop2: var(--pf-t--global--background--color--secondary--hover);
+ --pf-v6-c-skeleton--after--LinearGradientColorStop3: var(--pf-t--global--background--color--secondary--default);
+ --pf-v6-c-skeleton--after--TranslateX: -100%;
+ --pf-v6-c-skeleton--after--AnimationName: pf-v6-c-skeleton-loading;
+ }
+}
+
+.pf-v6-c-skeleton {
+ position: relative;
+ width: var(--pf-v6-c-skeleton--Width);
+ height: var(--pf-v6-c-skeleton--Height);
+ overflow: hidden;
+ background-color: var(--pf-v6-c-skeleton--BackgroundColor);
+ border-radius: var(--pf-v6-c-skeleton--BorderRadius);
+ transform: translate(0);
+}
+.pf-v6-c-skeleton::before {
+ display: block;
+ height: var(--pf-v6-c-skeleton--before--Height);
+ padding-block-end: var(--pf-v6-c-skeleton--before--PaddingBlockEnd);
+ content: var(--pf-v6-c-skeleton--before--Content);
+}
+.pf-v6-c-skeleton::after {
+ position: absolute;
+ inset: 0;
+ display: block;
+ content: "";
+ background: linear-gradient(var(--pf-v6-c-skeleton--after--LinearGradientAngle), var(--pf-v6-c-skeleton--after--LinearGradientColorStop1), var(--pf-v6-c-skeleton--after--LinearGradientColorStop2), var(--pf-v6-c-skeleton--after--LinearGradientColorStop3));
+ transform: translate3d(var(--pf-v6-c-skeleton--after--TranslateX), 0, 0);
+ animation: var(--pf-v6-c-skeleton--after--AnimationName) var(--pf-v6-c-skeleton--after--AnimationDuration) var(--pf-v6-c-skeleton--after--AnimationTimingFunction) var(--pf-v6-c-skeleton--after--AnimationDelay) var(--pf-v6-c-skeleton--after--AnimationIterationCount);
+}
+:where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-skeleton::after {
+ scale: -1 1;
+}
+
+.pf-v6-c-skeleton.pf-m-circle {
+ --pf-v6-c-skeleton--BorderRadius: var(--pf-v6-c-skeleton--m-circle--BorderRadius);
+}
+.pf-v6-c-skeleton.pf-m-square, .pf-v6-c-skeleton.pf-m-circle {
+ --pf-v6-c-skeleton--before--Height: 0;
+ --pf-v6-c-skeleton--before--PaddingBlockEnd: var(--pf-v6-c-skeleton--m-circle--before--PaddingBlockEnd);
+}
+.pf-v6-c-skeleton.pf-m-width-sm {
+ --pf-v6-c-skeleton--Width: var(--pf-v6-c-skeleton--m-width-sm--Width);
+}
+.pf-v6-c-skeleton.pf-m-width-md {
+ --pf-v6-c-skeleton--Width: var(--pf-v6-c-skeleton--m-width-md--Width);
+}
+.pf-v6-c-skeleton.pf-m-width-lg {
+ --pf-v6-c-skeleton--Width: var(--pf-v6-c-skeleton--m-width-lg--Width);
+}
+.pf-v6-c-skeleton.pf-m-width-25 {
+ --pf-v6-c-skeleton--Width: var(--pf-v6-c-skeleton--m-width-25--Width);
+}
+.pf-v6-c-skeleton.pf-m-width-33 {
+ --pf-v6-c-skeleton--Width: var(--pf-v6-c-skeleton--m-width-33--Width);
+}
+.pf-v6-c-skeleton.pf-m-width-50 {
+ --pf-v6-c-skeleton--Width: var(--pf-v6-c-skeleton--m-width-50--Width);
+}
+.pf-v6-c-skeleton.pf-m-width-66 {
+ --pf-v6-c-skeleton--Width: var(--pf-v6-c-skeleton--m-width-66--Width);
+}
+.pf-v6-c-skeleton.pf-m-width-75 {
+ --pf-v6-c-skeleton--Width: var(--pf-v6-c-skeleton--m-width-75--Width);
+}
+.pf-v6-c-skeleton.pf-m-height-sm {
+ --pf-v6-c-skeleton--Height: var(--pf-v6-c-skeleton--m-height-sm--Height);
+}
+.pf-v6-c-skeleton.pf-m-height-md {
+ --pf-v6-c-skeleton--Height: var(--pf-v6-c-skeleton--m-height-md--Height);
+}
+.pf-v6-c-skeleton.pf-m-height-lg {
+ --pf-v6-c-skeleton--Height: var(--pf-v6-c-skeleton--m-height-lg--Height);
+}
+.pf-v6-c-skeleton.pf-m-height-25 {
+ --pf-v6-c-skeleton--Height: var(--pf-v6-c-skeleton--m-height-25--Height);
+}
+.pf-v6-c-skeleton.pf-m-height-33 {
+ --pf-v6-c-skeleton--Height: var(--pf-v6-c-skeleton--m-height-33--Height);
+}
+.pf-v6-c-skeleton.pf-m-height-50 {
+ --pf-v6-c-skeleton--Height: var(--pf-v6-c-skeleton--m-height-50--Height);
+}
+.pf-v6-c-skeleton.pf-m-height-66 {
+ --pf-v6-c-skeleton--Height: var(--pf-v6-c-skeleton--m-height-66--Height);
+}
+.pf-v6-c-skeleton.pf-m-height-75 {
+ --pf-v6-c-skeleton--Height: var(--pf-v6-c-skeleton--m-height-75--Height);
+}
+.pf-v6-c-skeleton.pf-m-height-100 {
+ --pf-v6-c-skeleton--Height: var(--pf-v6-c-skeleton--m-height-100--Height);
+}
+.pf-v6-c-skeleton.pf-m-text-4xl {
+ --pf-v6-c-skeleton--Height: var(--pf-v6-c-skeleton--m-text-4xl--Height);
+}
+.pf-v6-c-skeleton.pf-m-text-3xl {
+ --pf-v6-c-skeleton--Height: var(--pf-v6-c-skeleton--m-text-3xl--Height);
+}
+.pf-v6-c-skeleton.pf-m-text-2xl {
+ --pf-v6-c-skeleton--Height: var(--pf-v6-c-skeleton--m-text-2xl--Height);
+}
+.pf-v6-c-skeleton.pf-m-text-xl {
+ --pf-v6-c-skeleton--Height: var(--pf-v6-c-skeleton--m-text-xl--Height);
+}
+.pf-v6-c-skeleton.pf-m-text-lg {
+ --pf-v6-c-skeleton--Height: var(--pf-v6-c-skeleton--m-text-lg--Height);
+}
+.pf-v6-c-skeleton.pf-m-text-md {
+ --pf-v6-c-skeleton--Height: var(--pf-v6-c-skeleton--m-text-md--Height);
+}
+.pf-v6-c-skeleton.pf-m-text-sm {
+ --pf-v6-c-skeleton--Height: var(--pf-v6-c-skeleton--m-text-sm--Height);
+}
+
+@keyframes pf-v6-c-skeleton-loading {
+ 0% {
+ transform: translateX(-100%);
+ }
+ 60% {
+ transform: translateX(100%);
+ }
+ 100% {
+ transform: translateX(100%);
+ }
+}
+@keyframes pf-v6-c-skeleton-loading-reduced-motion {
+ 0% {
+ opacity: 0.25;
+ }
+ 60% {
+ opacity: 1;
+ }
+ 100% {
+ opacity: 0.25;
+ }
+}
+.pf-v6-c-skip-to-content {
+ --pf-v6-c-skip-to-content--InsetBlockStart: var(--pf-t--global--spacer--md);
+ --pf-v6-c-skip-to-content--ZIndex: var(--pf-t--global--z-index--2xl);
+ --pf-v6-c-skip-to-content--focus--InsetInlineStart: var(--pf-t--global--spacer--md);
+}
+
+.pf-v6-c-skip-to-content {
+ position: absolute;
+ inset-block-start: var(--pf-v6-c-skip-to-content--InsetBlockStart);
+ inset-inline-start: -300%;
+ z-index: var(--pf-v6-c-skip-to-content--ZIndex);
+}
+.pf-v6-c-skip-to-content:focus-within {
+ inset-inline-start: var(--pf-v6-c-skip-to-content--focus--InsetInlineStart);
+}
+
+.pf-v6-c-slider {
+ --pf-v6-c-slider--value: 0;
+ --pf-v6-c-slider__step--InsetInlineStart: 0;
+ --pf-v6-c-slider__rail--PaddingBlockStart: var(--pf-t--global--spacer--md);
+ --pf-v6-c-slider__rail--PaddingBlockEnd: var(--pf-t--global--spacer--md);
+ --pf-v6-c-slider__rail-track--Height: 0.25rem;
+ --pf-v6-c-slider__rail-track--before--base--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
+ --pf-v6-c-slider__rail-track--before--fill--BackgroundColor: var(--pf-t--global--border--color--hover);
+ --pf-v6-c-slider__rail-track--before--BorderRadius: var(--pf-t--global--border--radius--tiny);
+ --pf-v6-c-slider__rail-track--before--fill--BackgroundColor--gradient-stop: var(--pf-v6-c-slider--value);
+ --pf-v6-c-slider__steps--FontSize: var(--pf-t--global--font--size--sm);
+ --pf-v6-c-slider__steps--Height: var(--pf-v6-c-slider__steps--FontSize);
+ --pf-v6-c-slider__step-tick--InsetBlockStart: var(--pf-t--global--spacer--md);
+ --pf-v6-c-slider__step-tick--Width: 0.15rem;
+ --pf-v6-c-slider__step-tick--Height: 0.25rem;
+ --pf-v6-c-slider__step-tick--BackgroundColor: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
+ --pf-v6-c-slider__step-tick--TranslateX: -50%;
+ --pf-v6-c-slider__step-tick--BorderRadius: var(--pf-t--global--border--radius--sharp);
+ --pf-v6-c-slider__step--m-active__slider-tick--BackgroundColor: var(--pf-t--global--icon--color--on-brand--default);
+ --pf-v6-c-slider__step--first-child__step-tick--TranslateX: 0;
+ --pf-v6-c-slider__step--last-child__step-tick--TranslateX: -100%;
+ --pf-v6-c-slider__step-label--TranslateX: -50%;
+ --pf-v6-c-slider__step-label--InsetBlockStart: calc(var(--pf-t--global--spacer--xl) + var(--pf-v6-c-slider__rail-track--Height));
+ --pf-v6-c-slider__step--first-child__step-label--TranslateX: 0;
+ --pf-v6-c-slider__step--last-child__step-label--TranslateX: -100%;
+ --pf-v6-c-slider__thumb--InsetBlockStart: calc(var(--pf-v6-c-slider__rail-track--Height) / 2 + var(--pf-t--global--spacer--md));
+ --pf-v6-c-slider__thumb--Width: 1rem;
+ --pf-v6-c-slider__thumb--Height: 1rem;
+ --pf-v6-c-slider__thumb--InsetInlineStart: var(--pf-v6-c-slider--value);
+ --pf-v6-c-slider__thumb--BackgroundColor: var(--pf-t--global--color--brand--default);
+ --pf-v6-c-slider__thumb--TranslateX: -50%;
+ --pf-v6-c-slider__thumb--TranslateY: -50%;
+ --pf-v6-c-slider__thumb--BorderRadius: var(--pf-t--global--border--radius--large);
+ --pf-v6-c-slider__thumb--BoxShadow--base:
+ 0 0 0 2px var(--pf-t--global--background--color--primary--default),
+ 0 0 0 3px var(--pf-t--global--color--brand--default);
+ --pf-v6-c-slider__thumb--hover--BoxShadow: var(--pf-v6-c-slider__thumb--BoxShadow--base);
+ --pf-v6-c-slider__thumb--focus--BoxShadow: var(--pf-v6-c-slider__thumb--BoxShadow--base);
+ --pf-v6-c-slider__thumb--active--BoxShadow:
+ var(--pf-v6-c-slider__thumb--BoxShadow--base),
+ 0 0 2px 5px var(--pf-t--global--color--nonstatus--blue--clicked);
+ --pf-v6-c-slider__thumb--before--Width: 44px;
+ --pf-v6-c-slider__thumb--before--Height: var(--pf-v6-c-slider__thumb--before--Width);
+ --pf-v6-c-slider__thumb--before--BorderRadius: var(--pf-t--global--border--radius--large);
+ --pf-v6-c-slider__thumb--before--TranslateX: -50%;
+ --pf-v6-c-slider__thumb--before--TranslateY: -50%;
+ --pf-v6-c-slider__value--MarginInlineStart: var(--pf-t--global--spacer--md);
+ --pf-v6-c-slider__value--c-form-control--width-base: calc(var(--pf-t--global--spacer--control--horizontal--default) + var(--pf-t--global--spacer--control--horizontal--default) + 1.25rem);
+ --pf-v6-c-slider__value--c-form-control--width-chars: 3;
+ --pf-v6-c-slider__value--c-form-control--Width: calc(var(--pf-v6-c-slider__value--c-form-control--width-base) + var(--pf-v6-c-slider__value--c-form-control--width-chars) * 1ch);
+ --pf-v6-c-slider__value--m-floating--TranslateX: -50%;
+ --pf-v6-c-slider__value--m-floating--TranslateY: -100%;
+ --pf-v6-c-slider__value--m-floating--InsetInlineStart: var(--pf-v6-c-slider--value);
+ --pf-v6-c-slider__value--m-floating--ZIndex: var(--pf-t--global--z-index--sm);
+ --pf-v6-c-slider__actions--MarginInlineEnd: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-slider__main--actions--MarginInlineStart: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-slider--m-disabled__rail-track--before--fill--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
+ --pf-v6-c-slider--m-disabled__step--m-active__slider-tick--BackgroundColor: var(--pf-t--global--icon--color--disabled);
+ --pf-v6-c-slider--m-disabled__thumb--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
+}
+
+.pf-v6-c-slider {
+ --pf-v6-c-slider__rail-track--before--fill--direction: right;
+ display: flex;
+}
+:where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-slider {
+ --pf-v6-c-slider__rail-track--before--fill--direction: left;
+}
+
+.pf-v6-c-slider.pf-m-disabled {
+ --pf-v6-c-slider__rail-track--before--fill--BackgroundColor: var(--pf-v6-c-slider--m-disabled__rail-track--before--fill--BackgroundColor);
+ --pf-v6-c-slider__step--m-active__slider-tick--BackgroundColor: var(--pf-v6-c-slider--m-disabled__step--m-active__slider-tick--BackgroundColor);
+ --pf-v6-c-slider__thumb--BackgroundColor: var(--pf-v6-c-slider--m-disabled__thumb--BackgroundColor);
+}
+.pf-v6-c-slider.pf-m-disabled .pf-v6-c-slider__rail,
+.pf-v6-c-slider.pf-m-disabled .pf-v6-c-slider__thumb {
+ cursor: not-allowed;
+}
+.pf-v6-c-slider.pf-m-disabled .pf-v6-c-slider__thumb {
+ --pf-v6-c-slider__thumb--BoxShadow: none;
+}
+
+.pf-v6-c-slider__main {
+ position: relative;
+ flex-grow: 1;
+}
+
+.pf-v6-c-slider__rail {
+ padding-block-start: var(--pf-v6-c-slider__rail--PaddingBlockStart);
+ padding-block-end: var(--pf-v6-c-slider__rail--PaddingBlockEnd);
+}
+
+.pf-v6-c-slider__rail-track {
+ position: relative;
+ height: var(--pf-v6-c-slider__rail-track--Height);
+}
+.pf-v6-c-slider__rail-track::before {
+ position: absolute;
+ inset: 0;
+ content: "";
+ background: linear-gradient(to var(--pf-v6-c-slider__rail-track--before--fill--direction), var(--pf-v6-c-slider__rail-track--before--fill--BackgroundColor), var(--pf-v6-c-slider__rail-track--before--fill--BackgroundColor) var(--pf-v6-c-slider__rail-track--before--fill--BackgroundColor--gradient-stop), var(--pf-v6-c-slider__rail-track--before--base--BackgroundColor) var(--pf-v6-c-slider__rail-track--before--fill--BackgroundColor--gradient-stop));
+ border-radius: var(--pf-v6-c-slider__rail-track--before--BorderRadius);
+}
+
+.pf-v6-c-slider__steps {
+ height: var(--pf-v6-c-slider__steps--Height);
+ font-size: var(--pf-v6-c-slider__steps--FontSize);
+ line-height: 1;
+}
+
+.pf-v6-c-slider__step {
+ position: absolute;
+ inset-block-start: 0;
+ inset-inline-start: var(--pf-v6-c-slider__step--InsetInlineStart);
+ content: "";
+}
+.pf-v6-c-slider__step.pf-m-active {
+ --pf-v6-c-slider__step-tick--BackgroundColor: var(--pf-v6-c-slider__step--m-active__slider-tick--BackgroundColor);
+}
+.pf-v6-c-slider__step:first-child {
+ --pf-v6-c-slider__step-tick--TranslateX: var(--pf-v6-c-slider__step--first-child__step-tick--TranslateX);
+ --pf-v6-c-slider__step-label--TranslateX: var(--pf-v6-c-slider__step--first-child__step-label--TranslateX);
+}
+.pf-v6-c-slider__step:last-child {
+ --pf-v6-c-slider__step-tick--TranslateX: var(--pf-v6-c-slider__step--last-child__step-tick--TranslateX);
+ --pf-v6-c-slider__step-label--TranslateX: var(--pf-v6-c-slider__step--last-child__step-label--TranslateX);
+}
+
+.pf-v6-c-slider__step-tick {
+ transform: translateX(var(--pf-v6-c-slider__step-tick--TranslateX));
+ position: absolute;
+ inset-block-start: var(--pf-v6-c-slider__step-tick--InsetBlockStart);
+ inset-inline-start: 0;
+ width: var(--pf-v6-c-slider__step-tick--Width);
+ height: var(--pf-v6-c-slider__step-tick--Height);
+ background-color: var(--pf-v6-c-slider__step-tick--BackgroundColor);
+ border-radius: var(--pf-v6-c-slider__step-tick--BorderRadius);
+}
+:where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-slider__step-tick {
+ transform: translateX(calc(var(--pf-v6-c-slider__step-tick--TranslateX) * var(--pf-v6-global--inverse--multiplier)));
+}
+
+.pf-v6-c-slider__step-label {
+ transform: translateX(var(--pf-v6-c-slider__step-label--TranslateX));
+ position: absolute;
+ inset-block-start: var(--pf-v6-c-slider__step-label--InsetBlockStart);
+ word-break: normal;
+}
+:where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-slider__step-label {
+ transform: translateX(calc(var(--pf-v6-c-slider__step-label--TranslateX) * var(--pf-v6-global--inverse--multiplier)));
+}
+
+.pf-v6-c-slider__thumb {
+ transform: translate(var(--pf-v6-c-slider__thumb--TranslateX), var(--pf-v6-c-slider__thumb--TranslateY));
+ position: absolute;
+ inset-block-start: var(--pf-v6-c-slider__thumb--InsetBlockStart);
+ inset-inline-start: var(--pf-v6-c-slider__thumb--InsetInlineStart);
+ width: var(--pf-v6-c-slider__thumb--Width);
+ height: var(--pf-v6-c-slider__thumb--Height);
+ cursor: pointer;
+ background-color: var(--pf-v6-c-slider__thumb--BackgroundColor);
+ border-radius: var(--pf-v6-c-slider__thumb--BorderRadius);
+ box-shadow: var(--pf-v6-c-slider__thumb--BoxShadow);
+}
+:where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-slider__thumb {
+ transform: translate(calc(var(--pf-v6-c-slider__thumb--TranslateX) * var(--pf-v6-global--inverse--multiplier)), var(--pf-v6-c-slider__thumb--TranslateY));
+}
+
+.pf-v6-c-slider__thumb::before {
+ transform: translate(var(--pf-v6-c-slider__thumb--before--TranslateX), var(--pf-v6-c-slider__thumb--before--TranslateY));
+ position: absolute;
+ inset-block-start: 50%;
+ inset-inline-start: 50%;
+ width: var(--pf-v6-c-slider__thumb--before--Width);
+ height: var(--pf-v6-c-slider__thumb--before--Height);
+ content: "";
+ border-radius: var(--pf-v6-c-slider__thumb--before--BorderRadius);
+}
+:where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-slider__thumb::before {
+ transform: translate(calc(var(--pf-v6-c-slider__thumb--before--TranslateX) * var(--pf-v6-global--inverse--multiplier)), var(--pf-v6-c-slider__thumb--before--TranslateY));
+}
+
+.pf-v6-c-slider__thumb:hover {
+ --pf-v6-c-slider__thumb--BoxShadow: var(--pf-v6-c-slider__thumb--hover--BoxShadow);
+}
+.pf-v6-c-slider__thumb:focus {
+ --pf-v6-c-slider__thumb--BoxShadow: var(--pf-v6-c-slider__thumb--focus--BoxShadow);
+ outline: 0;
+}
+.pf-v6-c-slider__thumb:active {
+ --pf-v6-c-slider__thumb--BoxShadow: var(--pf-v6-c-slider__thumb--active--BoxShadow);
+}
+
+.pf-v6-c-slider__value {
+ margin-inline-start: var(--pf-v6-c-slider__value--MarginInlineStart);
+}
+.pf-v6-c-slider__value.pf-m-floating {
+ transform: translate(var(--pf-v6-c-slider__value--m-floating--TranslateX), var(--pf-v6-c-slider__value--m-floating--TranslateY));
+ --pf-v6-c-slider__value--MarginInlineStart: 0;
+ position: absolute;
+ inset-block-start: 0;
+ inset-inline-start: var(--pf-v6-c-slider__value--m-floating--InsetInlineStart);
+ z-index: var(--pf-v6-c-slider__value--m-floating--ZIndex);
+}
+:where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-slider__value.pf-m-floating {
+ transform: translate(calc(var(--pf-v6-c-slider__value--m-floating--TranslateX) * var(--pf-v6-global--inverse--multiplier)), var(--pf-v6-c-slider__value--m-floating--TranslateY));
+}
+
+.pf-v6-c-slider__value .pf-v6-c-form-control {
+ width: var(--pf-v6-c-slider__value--c-form-control--Width);
+}
+
+.pf-v6-c-slider__actions {
+ display: flex;
+ margin-inline-end: var(--pf-v6-c-slider__actions--MarginInlineEnd);
+}
+.pf-v6-c-slider__main ~ .pf-v6-c-slider__actions {
+ --pf-v6-c-slider__actions--MarginInlineEnd: 0;
+ margin-inline-start: var(--pf-v6-c-slider__main--actions--MarginInlineStart);
+}
+
+.pf-v6-c-spinner {
+ --pf-v6-c-spinner--diameter: var(--pf-t--global--icon--size--2xl);
+ --pf-v6-c-spinner--Width: var(--pf-v6-c-spinner--diameter);
+ --pf-v6-c-spinner--Height: var(--pf-v6-c-spinner--diameter);
+ --pf-v6-c-spinner--Color: var(--pf-t--global--icon--color--brand--default);
+ --pf-v6-c-spinner--AnimationDuration: 1.4s;
+ --pf-v6-c-spinner--AnimationTimingFunction: linear;
+ --pf-v6-c-spinner--StrokeWidth: 10;
+ --pf-v6-c-spinner__path--StrokeWidth: var(--pf-v6-c-spinner--StrokeWidth);
+ --pf-v6-c-spinner__path--AnimationTimingFunction: ease-in-out;
+ --pf-v6-c-spinner--m-xs--diameter: var(--pf-t--global--icon--size--sm);
+ --pf-v6-c-spinner--m-sm--diameter: var(--pf-t--global--icon--size--md);
+ --pf-v6-c-spinner--m-md--diameter: var(--pf-t--global--icon--size--lg);
+ --pf-v6-c-spinner--m-lg--diameter: var(--pf-t--global--icon--size--xl);
+ --pf-v6-c-spinner--m-xl--diameter: var(--pf-t--global--icon--size--2xl);
+ --pf-v6-c-spinner--m-inline--diameter: 1em;
+}
+
+.pf-v6-c-spinner {
+ width: var(--pf-v6-c-spinner--Width);
+ height: var(--pf-v6-c-spinner--Height);
+ overflow: hidden;
+ animation: pf-v6-c-spinner-animation-rotate calc(var(--pf-v6-c-spinner--AnimationDuration) * 2) var(--pf-v6-c-spinner--AnimationTimingFunction) infinite;
+}
+.pf-v6-c-spinner.pf-m-inline {
+ --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-inline--diameter);
+}
+.pf-v6-c-spinner.pf-m-xs {
+ --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-xs--diameter);
+ --pf-v6-c-spinner--StrokeWidth: 15;
+}
+.pf-v6-c-spinner.pf-m-sm {
+ --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-sm--diameter);
+}
+.pf-v6-c-spinner.pf-m-md {
+ --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-md--diameter);
+}
+.pf-v6-c-spinner.pf-m-lg {
+ --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-lg--diameter);
+}
+.pf-v6-c-spinner.pf-m-xl {
+ --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-xl--diameter);
+}
+
+.pf-v6-c-spinner__path {
+ width: 100%;
+ height: 100%;
+ stroke: var(--pf-v6-c-spinner--Color);
+ stroke-dasharray: 283;
+ stroke-dashoffset: 280;
+ stroke-linecap: round;
+ stroke-width: var(--pf-v6-c-spinner--StrokeWidth);
+ transform-origin: 50% 50%;
+ animation: pf-v6-c-spinner-animation-dash var(--pf-v6-c-spinner--AnimationDuration) var(--pf-v6-c-spinner__path--AnimationTimingFunction) infinite;
+}
+
+@keyframes pf-v6-c-spinner-animation-rotate {
+ 0% {
+ transform: rotate(0deg);
+ }
+ 100% {
+ transform: rotate(360deg);
+ }
+}
+@keyframes pf-v6-c-spinner-animation-dash {
+ 0% {
+ stroke-dashoffset: 280;
+ transform: rotate(0);
+ }
+ 15% {
+ stroke-width: calc(var(--pf-v6-c-spinner__path--StrokeWidth) - 4);
+ }
+ 40% {
+ stroke-dasharray: 220;
+ stroke-dashoffset: 150;
+ }
+ 100% {
+ stroke-dashoffset: 280;
+ transform: rotate(720deg);
+ }
+}
+.pf-v6-c-switch {
+ --pf-v6-c-switch--FontSize: var(--pf-t--global--font--size--sm);
+ --pf-v6-c-switch--ColumnGap: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-switch__toggle-icon--FontSize: calc(var(--pf-v6-c-switch--FontSize) * .625);
+ --pf-v6-c-switch__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--default);
+ --pf-v6-c-switch__toggle-icon--InsetInlineStart: calc(var(--pf-v6-c-switch--FontSize) * .4);
+ --pf-v6-c-switch__toggle-icon--Offset: 0.125rem;
+ --pf-v6-c-switch__input--disabled__toggle-icon--Color: var(--pf-t--global--icon--color--disabled);
+ --pf-v6-c-switch--LineHeight: var(--pf-t--global--font--line-height--body);
+ --pf-v6-c-switch--Height: auto;
+ --pf-v6-c-switch__input--checked__toggle--BackgroundColor: var(--pf-t--global--color--brand--default);
+ --pf-v6-c-switch__input--checked__toggle--before--TranslateX: calc(100% + var(--pf-v6-c-switch__toggle-icon--Offset));
+ --pf-v6-c-switch__input--checked__toggle--BorderWidth: 0;
+ --pf-v6-c-switch__input--checked__label--Color: var(--pf-t--global--text--color--regular);
+ --pf-v6-c-switch__input--not-checked__label--Color: var(--pf-t--global--text--color--subtle);
+ --pf-v6-c-switch__input--disabled__label--Color: var(--pf-t--global--text--color--disabled);
+ --pf-v6-c-switch__input--disabled__toggle--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
+ --pf-v6-c-switch__input--checked__toggle--before--BackgroundColor: var(--pf-t--global--icon--color--inverse);
+ --pf-v6-c-switch__input--not-checked__toggle--before--BackgroundColor: var(--pf-t--global--icon--color--subtle);
+ --pf-v6-c-switch__input--disabled__toggle--before--BackgroundColor: var(--pf-t--global--icon--color--on-disabled);
+ --pf-v6-c-switch__input--focus__toggle--OutlineWidth: var(--pf-t--global--border--width--strong);
+ --pf-v6-c-switch__input--focus__toggle--OutlineOffset: var(--pf-t--global--spacer--xs);
+ --pf-v6-c-switch__input--focus__toggle--OutlineColor: var(--pf-t--global--color--brand--default);
+ --pf-v6-c-switch__toggle--Height: calc(var(--pf-v6-c-switch--FontSize) * var(--pf-v6-c-switch--LineHeight));
+ --pf-v6-c-switch__toggle--BackgroundColor: var(--pf-t--global--background--color--control--default);
+ --pf-v6-c-switch__toggle--BorderColor: var(--pf-t--global--border--color--default);
+ --pf-v6-c-switch__toggle--BorderWidth: var(--pf-t--global--border--width--control--default);
+ --pf-v6-c-switch__toggle--BorderRadius: var(--pf-t--global--border--radius--pill);
+ --pf-v6-c-switch__toggle--before--Width: calc(var(--pf-v6-c-switch--FontSize) - var(--pf-v6-c-switch__toggle-icon--Offset));
+ --pf-v6-c-switch__toggle--before--Height: var(--pf-v6-c-switch__toggle--before--Width);
+ --pf-v6-c-switch__toggle--before--InsetInlineStart: calc((var(--pf-v6-c-switch__toggle--Height) - var(--pf-v6-c-switch__toggle--before--Height)) / 2);
+ --pf-v6-c-switch__toggle--before--BorderRadius: var(--pf-t--global--border--radius--large);
+ --pf-v6-c-switch__toggle--before--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
+ --pf-v6-c-switch__toggle--before--TransitionDuration: var(--pf-t--global--motion--duration--md);
+ --pf-v6-c-switch__toggle--before--Transition: transform var(--pf-v6-c-switch__toggle--before--TransitionTimingFunction) var(--pf-v6-c-switch__toggle--before--TransitionDuration), background-color var(--pf-v6-c-switch__toggle--before--TransitionTimingFunction) var(--pf-v6-c-switch__toggle--before--TransitionDuration);
+ --pf-v6-c-switch__toggle--Width: calc(var(--pf-v6-c-switch__toggle--Height) + var(--pf-v6-c-switch__toggle-icon--Offset) + var(--pf-v6-c-switch__toggle--before--Width));
+}
+
+.pf-v6-c-switch {
+ position: relative;
+ display: inline-grid;
+ grid-template-columns: auto;
+ grid-auto-columns: 1fr;
+ column-gap: var(--pf-v6-c-switch--ColumnGap);
+ height: var(--pf-v6-c-switch--Height);
+ font-size: var(--pf-v6-c-switch--FontSize);
+ line-height: var(--pf-v6-c-switch--LineHeight);
+ vertical-align: middle;
+ cursor: pointer;
+}
+.pf-v6-c-switch.pf-m-reverse .pf-v6-c-switch__label,
+.pf-v6-c-switch.pf-m-reverse .pf-v6-c-switch__toggle {
+ grid-row: 1;
+}
+.pf-v6-c-switch.pf-m-reverse .pf-v6-c-switch__label {
+ grid-column: 1;
+}
+
+.pf-v6-c-switch__input {
+ position: absolute;
+ cursor: pointer;
+ opacity: 0;
+}
+.pf-v6-c-switch__input:focus-visible ~ .pf-v6-c-switch__toggle {
+ outline: var(--pf-v6-c-switch__input--focus__toggle--OutlineWidth) solid var(--pf-v6-c-switch__input--focus__toggle--OutlineColor);
+ outline-offset: var(--pf-v6-c-switch__input--focus__toggle--OutlineOffset);
+}
+.pf-v6-c-switch__input:checked ~ .pf-v6-c-switch__label {
+ color: var(--pf-v6-c-switch__input--checked__label--Color);
+}
+.pf-v6-c-switch__input:checked ~ .pf-v6-c-switch__toggle {
+ --pf-v6-c-switch__toggle--BorderWidth: var(--pf-v6-c-switch__input--checked__toggle--BorderWidth);
+ background-color: var(--pf-v6-c-switch__input--checked__toggle--BackgroundColor);
+}
+.pf-v6-c-switch__input:checked ~ .pf-v6-c-switch__toggle::before {
+ transform: translate(var(--pf-v6-c-switch__input--checked__toggle--before--TranslateX), -50%);
+ background-color: var(--pf-v6-c-switch__input--checked__toggle--before--BackgroundColor);
+}
+:where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-switch__input:checked ~ .pf-v6-c-switch__toggle::before {
+ transform: translate(calc(var(--pf-v6-c-switch__input--checked__toggle--before--TranslateX) * var(--pf-v6-global--inverse--multiplier)), -50%);
+}
+
+.pf-v6-c-switch__input:not(:checked) ~ .pf-v6-c-switch__label {
+ color: var(--pf-v6-c-switch__input--not-checked__label--Color);
+}
+.pf-v6-c-switch__input:not(:checked) ~ .pf-v6-c-switch__toggle .pf-v6-c-switch__toggle-icon {
+ display: none;
+}
+.pf-v6-c-switch__input:disabled {
+ cursor: not-allowed;
+}
+.pf-v6-c-switch__input:disabled ~ .pf-v6-c-switch__label {
+ color: var(--pf-v6-c-switch__input--disabled__label--Color);
+ cursor: not-allowed;
+}
+.pf-v6-c-switch__input:disabled ~ .pf-v6-c-switch__toggle {
+ --pf-v6-c-switch__toggle-icon--Color: var(--pf-v6-c-switch__input--disabled__toggle-icon--Color);
+ cursor: not-allowed;
+ background-color: var(--pf-v6-c-switch__input--disabled__toggle--BackgroundColor);
+}
+.pf-v6-c-switch__input:disabled ~ .pf-v6-c-switch__toggle::before {
+ background-color: var(--pf-v6-c-switch__input--disabled__toggle--before--BackgroundColor);
+}
+
+.pf-v6-c-switch__toggle {
+ position: relative;
+ display: inline-block;
+ width: var(--pf-v6-c-switch__toggle--Width);
+ height: var(--pf-v6-c-switch__toggle--Height);
+ background-color: var(--pf-v6-c-switch__toggle--BackgroundColor);
+ border-radius: var(--pf-v6-c-switch__toggle--BorderRadius);
+}
+.pf-v6-c-switch__toggle::before {
+ position: absolute;
+ inset-block-start: 50%;
+ inset-inline-start: var(--pf-v6-c-switch__toggle--before--InsetInlineStart);
+ display: block;
+ width: var(--pf-v6-c-switch__toggle--before--Width);
+ height: var(--pf-v6-c-switch__toggle--before--Height);
+ content: "";
+ background-color: var(--pf-v6-c-switch__input--not-checked__toggle--before--BackgroundColor);
+ border-radius: var(--pf-v6-c-switch__toggle--before--BorderRadius);
+ transition: var(--pf-v6-c-switch__toggle--before--Transition);
+ transform: translateY(-50%);
+}
+.pf-v6-c-switch__toggle::after {
+ position: absolute;
+ inset: 0;
+ content: "";
+ border: var(--pf-v6-c-switch__toggle--BorderWidth) solid var(--pf-v6-c-switch__toggle--BorderColor);
+ border-radius: var(--pf-v6-c-switch__toggle--BorderRadius);
+}
+
+.pf-v6-c-switch__toggle-icon {
+ position: absolute;
+ inset-block-start: 0;
+ inset-block-end: 0;
+ inset-inline-start: var(--pf-v6-c-switch__toggle-icon--InsetInlineStart);
+ display: flex;
+ align-items: center;
+ font-size: var(--pf-v6-c-switch__toggle-icon--FontSize);
+ color: var(--pf-v6-c-switch__toggle-icon--Color);
+}
+
+.pf-v6-c-switch__label {
+ display: inline-block;
+ grid-column: 2;
+ vertical-align: top;
+}
+
+.pf-v6-c-tab-content {
+ --pf-v6-c-tab-content__body--PaddingBlockStart: 0;
+ --pf-v6-c-tab-content__body--PaddingInlineEnd: 0;
+ --pf-v6-c-tab-content__body--PaddingBlockEnd: 0;
+ --pf-v6-c-tab-content__body--PaddingInlineStart: 0;
+ --pf-v6-c-tab-content--BackgroundColor: transparent;
+ --pf-v6-c-tab-content__body--m-padding--PaddingBlockStart: var(--pf-t--global--spacer--md);
+ --pf-v6-c-tab-content__body--m-padding--PaddingInlineEnd: var(--pf-t--global--spacer--md);
+ --pf-v6-c-tab-content__body--m-padding--PaddingBlockEnd: var(--pf-t--global--spacer--md);
+ --pf-v6-c-tab-content__body--m-padding--PaddingInlineStart: var(--pf-t--global--spacer--md);
+ --pf-v6-c-tab-content__body--m-padding--xl--PaddingBlockStart: var(--pf-t--global--spacer--lg);
+ --pf-v6-c-tab-content__body--m-padding--xl--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
+ --pf-v6-c-tab-content__body--m-padding--xl--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
+ --pf-v6-c-tab-content__body--m-padding--xl--PaddingInlineStart: var(--pf-t--global--spacer--lg);
+ --pf-v6-c-tab-content--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
+}
+
+.pf-v6-c-tab-content {
+ background-color: var(--pf-v6-c-tab-content--BackgroundColor);
+}
+@media screen and (min-width: 75rem) {
+ .pf-v6-c-tab-content {
+ --pf-v6-c-tab-content__body--m-padding--PaddingBlockStart: var(--pf-v6-c-tab-content__body--m-padding--xl--PaddingBlockStart);
+ --pf-v6-c-tab-content__body--m-padding--PaddingInlineEnd: var(--pf-v6-c-tab-content__body--m-padding--xl--PaddingInlineEnd);
+ --pf-v6-c-tab-content__body--m-padding--PaddingBlockEnd: var(--pf-v6-c-tab-content__body--m-padding--xl--PaddingBlockEnd);
+ --pf-v6-c-tab-content__body--m-padding--PaddingInlineStart: var(--pf-v6-c-tab-content__body--m-padding--xl--PaddingInlineStart);
+ }
+}
+.pf-v6-c-tab-content.pf-m-secondary {
+ --pf-v6-c-tab-content--BackgroundColor: var(--pf-v6-c-tab-content--m-secondary--BackgroundColor);
+}
+
+.pf-v6-c-tab-content__body {
+ padding-block-start: var(--pf-v6-c-tab-content__body--PaddingBlockStart);
+ padding-block-end: var(--pf-v6-c-tab-content__body--PaddingBlockEnd);
+ padding-inline-start: var(--pf-v6-c-tab-content__body--PaddingInlineStart);
+ padding-inline-end: var(--pf-v6-c-tab-content__body--PaddingInlineEnd);
+}
+.pf-v6-c-tab-content__body.pf-m-padding {
+ --pf-v6-c-tab-content__body--PaddingBlockStart: var(--pf-v6-c-tab-content__body--m-padding--PaddingBlockStart);
+ --pf-v6-c-tab-content__body--PaddingInlineEnd: var(--pf-v6-c-tab-content__body--m-padding--PaddingInlineEnd);
+ --pf-v6-c-tab-content__body--PaddingBlockEnd: var(--pf-v6-c-tab-content__body--m-padding--PaddingBlockEnd);
+ --pf-v6-c-tab-content__body--PaddingInlineStart: var(--pf-v6-c-tab-content__body--m-padding--PaddingInlineStart);
+}
+
+.pf-v6-c-table {
+ --pf-v6-c-table--responsive--BorderColor: var(--pf-t--global--border--color--default);
+ --pf-v6-c-table__tbody--responsive--border-width--base: var(--pf-t--global--border--width--divider--default);
+ --pf-v6-c-table__tbody--after--border-width--base: var(--pf-t--global--border--width--extra-strong);
+ --pf-v6-c-table__tbody--after--BorderInlineStartWidth: 0;
+ --pf-v6-c-table__tbody--after--BorderColor: var(--pf-t--global--border--color--clicked);
+ --pf-v6-c-table__tbody--responsive--m-expandable--BorderBlockEndWidth: var(--pf-t--global--border--width--divider--default);
+ --pf-v6-c-table__tr--responsive--border-width--base: var(--pf-t--global--border--width--divider--default);
+ --pf-v6-c-table__tr--responsive--last-child--BorderBlockEndWidth: var(--pf-v6-c-table__tbody--responsive--border-width--base);
+ --pf-v6-c-table__tr--responsive--GridColumnGap: var(--pf-t--global--spacer--md);
+ --pf-v6-c-table__tr--responsive--MarginBlockStart: var(--pf-v6-c-table__tbody--responsive--border-width--base);
+ --pf-v6-c-table__tr--responsive--PaddingBlockStart: var(--pf-t--global--spacer--md);
+ --pf-v6-c-table__tr--responsive--PaddingInlineEnd: var(--pf-t--global--spacer--inset--page-chrome);
+ --pf-v6-c-table__tr--responsive--PaddingBlockEnd: var(--pf-t--global--spacer--md);
+ --pf-v6-c-table__tr--responsive--PaddingInlineStart: var(--pf-t--global--spacer--inset--page-chrome);
+ --pf-v6-c-table__tr--responsive--nested-table--PaddingBlockStart: var(--pf-t--global--spacer--xl);
+ --pf-v6-c-table__tr--responsive--nested-table--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
+ --pf-v6-c-table__tr--responsive--nested-table--PaddingBlockEnd: var(--pf-t--global--spacer--xl);
+ --pf-v6-c-table__tr--responsive--nested-table--PaddingInlineStart: var(--pf-t--global--spacer--lg);
+ --pf-v6-c-table__tbody--after__tr--BorderInlineStartWidth: 0;
+ --pf-v6-c-table__tbody--after__tr--BorderInlineStartColor: transparent;
+ --pf-v6-c-table__tbody--m-expanded--after__tr--BorderInlineStartWidth: var(--pf-v6-c-table__expandable-row--after--border-width--base);
+ --pf-v6-c-table__tbody--m-expanded--after__tr--BorderInlineStartColor: var(--pf-t--global--border--color--clicked);
+ --pf-v6-c-table__tbody--m-selected--after__tr--BorderInlineStartWidth: var(--pf-v6-c-table__expandable-row--after--border-width--base);
+ --pf-v6-c-table__tbody--m-selected--after__tr--BorderInlineStartColor: var(--pf-t--global--border--color--clicked);
+ --pf-v6-c-table--m-grid--cell--hidden-visible--Display: grid;
+ --pf-v6-c-table--m-grid--cell--PaddingBlockStart: 0;
+ --pf-v6-c-table--m-grid--cell--PaddingInlineEnd: 0;
+ --pf-v6-c-table--m-grid--cell--PaddingBlockEnd: 0;
+ --pf-v6-c-table--m-grid--cell--PaddingInlineStart: 0;
+ --pf-v6-c-table-td--responsive--GridColumnGap: var(--pf-t--global--spacer--md);
+ --pf-v6-c-table--cell--responsive--PaddingBlockStart: var(--pf-t--global--spacer--md);
+ --pf-v6-c-table--cell--responsive--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-table--cell--first-child--responsive--PaddingBlockStart: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-table--cell--responsive--PaddingInlineEnd: 0;
+ --pf-v6-c-table--cell--responsive--PaddingInlineStart: 0;
+ --pf-v6-c-table--cell--responsive--th--FontWeight: var(--pf-t--global--font--weight--body--bold);
+ --pf-v6-c-table--m-compact__tr--responsive--PaddingBlockStart: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-table--m-compact__tr--responsive--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-table--m-compact__tr__td--responsive--PaddingBlockStart: var(--pf-t--global--spacer--xs);
+ --pf-v6-c-table--m-compact__tr__td--responsive--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
+ --pf-v6-c-table--m-compact__check--responsive--MarginBlockStart: 0.4375rem;
+ --pf-v6-c-table--m-compact__action--responsive--MarginBlockStart: calc(var(--pf-t--global--spacer--xs) * -1);
+ --pf-v6-c-table--m-compact__action--responsive--MarginBlockEnd: calc(var(--pf-t--global--spacer--xs) * -1);
+ --pf-v6-c-table--m-compact__toggle--c-button--responsive--MarginBlockEnd: calc(var(--pf-t--global--spacer--xs) * -1);
+ --pf-v6-c-table__expandable-row-content--responsive--PaddingInlineEnd: var(--pf-t--global--spacer--inset--page-chrome);
+ --pf-v6-c-table__expandable-row-content--responsive--PaddingInlineStart: var(--pf-t--global--spacer--inset--page-chrome);
+ --pf-v6-c-table__expandable-row-content--BackgroundColor: var(--pf-t--global--background--color--primary--default);
+ --pf-v6-c-table__check--responsive--MarginInlineStart: var(--pf-v6-c-table__tbody--responsive--border-width--base);
+ --pf-v6-c-table__check--responsive--MarginBlockStart: 0.875rem;
+ --pf-v6-c-table--m-grid__favorite--MarginBlockStart: 0.5rem;
+ --pf-v6-c-table--m-grid__check--favorite--MarginInlineStart: var(--pf-t--global--spacer--xl);
+ --pf-v6-c-table__action--responsive--MarginInlineStart: var(--pf-t--global--spacer--xl);
+ --pf-v6-c-table--m-grid__favorite--action--MarginInlineStart: var(--pf-t--global--spacer--2xl);
+ --pf-v6-c-table--m-grid__check--favorite--action--MarginInlineStart: calc(var(--pf-v6-c-table--m-grid__check--favorite--MarginInlineStart) + var(--pf-v6-c-table--m-grid__favorite--action--MarginInlineStart));
+ --pf-v6-c-table__toggle__icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
+ --pf-v6-c-table__toggle__icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
+ --pf-v6-c-table__toggle__icon--Transition: transform var(--pf-v6-c-table__toggle__icon--TransitionDuration) var(--pf-v6-c-table__toggle__icon--TransitionTimingFunction);
+ --pf-v6-c-table__toggle--m-expanded__icon--Rotate: 180deg;
+}
+
+.pf-m-grid.pf-v6-c-table {
+ --pf-v6-c-table--cell--PaddingBlockStart: var(--pf-v6-c-table--m-grid--cell--PaddingBlockStart);
+ --pf-v6-c-table--cell--PaddingInlineEnd: var(--pf-v6-c-table--m-grid--cell--PaddingInlineEnd);
+ --pf-v6-c-table--cell--PaddingBlockEnd: var(--pf-v6-c-table--m-grid--cell--PaddingBlockEnd);
+ --pf-v6-c-table--cell--PaddingInlineStart: var(--pf-v6-c-table--m-grid--cell--PaddingInlineStart);
+ --pf-v6-c-table--cell--first-last-child--PaddingInline: 0;
+ --pf-v6-c-table__favorite--c-button--MarginBlockStart: auto;
+ --pf-v6-c-table__favorite--c-button--MarginInlineEnd: auto;
+ --pf-v6-c-table__favorite--c-button--MarginBlockEnd: auto;
+ --pf-v6-c-table__favorite--c-button--MarginInlineStart: auto;
+ display: grid;
+ border: none;
+}
+.pf-m-grid.pf-v6-c-table tr:where(.pf-v6-c-table__tr) > :where(th, td) {
+ width: auto;
+ min-width: 0;
+ max-width: none;
+ overflow: visible;
+ text-overflow: clip;
+ white-space: normal;
+}
+.pf-m-grid.pf-v6-c-table .pf-v6-c-table__text {
+ position: relative;
+ width: auto;
+ min-width: 0;
+ max-width: none;
+ 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-m-grid.pf-v6-c-table thead:where(.pf-v6-c-table__thead) {
+ display: none;
+}
+.pf-m-grid.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody) {
+ display: block;
+}
+.pf-m-grid.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody):first-of-type {
+ border-block-start: var(--pf-v6-c-table__tbody--responsive--border-width--base) solid var(--pf-v6-c-table--responsive--BorderColor);
+}
+.pf-m-grid.pf-v6-c-table.pf-m-expandable {
+ --pf-v6-c-table__tr--BorderBlockEndWidth: 0;
+}
+.pf-m-grid.pf-v6-c-table.pf-m-expandable .pf-v6-c-table__tbody,
+.pf-m-grid.pf-v6-c-table.pf-m-expandable .pf-v6-c-table__tbody.pf-m-expanded {
+ border-block-end: var(--pf-v6-c-table__tbody--responsive--m-expandable--BorderBlockEndWidth) solid var(--pf-v6-c-table--responsive--BorderColor);
+}
+.pf-m-grid.pf-v6-c-table tr:where(.pf-v6-c-table__tr).pf-m-selected {
+ --pf-v6-c-table__expandable-row--after--BorderInlineStartWidth: 0;
+ --pf-v6-c-table__expandable-row--after--BorderColor: transparent;
+}
+.pf-m-grid.pf-v6-c-table tr:where(.pf-v6-c-table__tr):not(.pf-v6-c-table__expandable-row) {
+ display: grid;
+ grid-template-columns: 1fr;
+ height: auto;
+ grid-auto-columns: max-content;
+ grid-column-gap: var(--pf-v6-c-table__tr--responsive--GridColumnGap);
+ padding-block-start: var(--pf-v6-c-table__tr--responsive--PaddingBlockStart);
+ padding-inline-end: var(--pf-v6-c-table__tr--responsive--PaddingInlineEnd);
+ padding-block-end: var(--pf-v6-c-table__tr--responsive--PaddingBlockEnd);
+ padding-inline-start: var(--pf-v6-c-table__tr--responsive--PaddingInlineStart);
+}
+.pf-m-grid.pf-v6-c-table tr:where(.pf-v6-c-table__tr):not(.pf-v6-c-table__expandable-row) > :where(th, td) {
+ padding-block-start: var(--pf-v6-c-table--cell--responsive--PaddingBlockStart);
+ padding-inline-end: var(--pf-v6-c-table--cell--responsive--PaddingInlineEnd);
+ padding-block-end: var(--pf-v6-c-table--cell--responsive--PaddingBlockEnd);
+ padding-inline-start: var(--pf-v6-c-table--cell--responsive--PaddingInlineStart);
+}
+.pf-m-grid.pf-v6-c-table tr:where(.pf-v6-c-table__tr):not(.pf-v6-c-table__expandable-row) > :where(th, td):first-child {
+ --pf-v6-c-table--cell--responsive--PaddingBlockStart: var(--pf-v6-c-table--cell--first-child--responsive--PaddingBlockStart);
+}
+.pf-m-grid.pf-v6-c-table.pf-m-compact {
+ --pf-v6-c-table__tr--responsive--PaddingBlockStart: var(--pf-v6-c-table--m-compact__tr--responsive--PaddingBlockStart);
+ --pf-v6-c-table__tr--responsive--PaddingBlockEnd: var(--pf-v6-c-table--m-compact__tr--responsive--PaddingBlockEnd);
+ --pf-v6-c-table--cell--responsive--PaddingBlockStart: var(--pf-v6-c-table--m-compact__tr__td--responsive--PaddingBlockStart);
+ --pf-v6-c-table--cell--responsive--PaddingBlockEnd: var(--pf-v6-c-table--m-compact__tr__td--responsive--PaddingBlockEnd);
+ --pf-v6-c-table__check--responsive--MarginBlockStart: var(--pf-v6-c-table--m-compact__check--responsive--MarginBlockStart);
+ --pf-v6-c-table__check--input--MarginBlockStart: 0;
+}
+.pf-m-grid.pf-v6-c-table.pf-m-compact .pf-v6-c-table__action {
+ margin-block-start: var(--pf-v6-c-table--m-compact__action--responsive--MarginBlockStart);
+ margin-block-end: var(--pf-v6-c-table--m-compact__action--responsive--MarginBlockStart);
+}
+.pf-m-grid.pf-v6-c-table.pf-m-compact .pf-v6-c-table__toggle .pf-v6-c-button {
+ margin-block-end: var(--pf-v6-c-table--m-compact__toggle--c-button--responsive--MarginBlockEnd);
+}
+.pf-m-grid.pf-v6-c-table .pf-v6-c-table__icon > * {
+ text-align: start;
+}
+.pf-m-grid.pf-v6-c-table :where(.pf-v6-c-table__th, .pf-v6-c-table__td)[data-label] {
+ --pf-v6-c-table--cell--hidden-visible--Display: var(--pf-v6-c-table--m-grid--cell--hidden-visible--Display);
+ grid-column: 1;
+ grid-column-gap: var(--pf-v6-c-table-td--responsive--GridColumnGap);
+ grid-template-columns: 1fr minmax(0, 1.5fr);
+ align-items: start;
+}
+.pf-m-grid.pf-v6-c-table :where(.pf-v6-c-table__th, .pf-v6-c-table__td)[data-label].pf-m-action {
+ align-items: center;
+}
+.pf-m-grid.pf-v6-c-table :where(.pf-v6-c-table__th, .pf-v6-c-table__td)[data-label] > * {
+ grid-column: 2;
+}
+.pf-m-grid.pf-v6-c-table :where(.pf-v6-c-table__th, .pf-v6-c-table__td)[data-label]::before {
+ position: revert;
+ font-weight: var(--pf-v6-c-table--cell--responsive--th--FontWeight);
+ text-align: start;
+ content: attr(data-label);
+}
+.pf-m-grid.pf-v6-c-table tr:where(.pf-v6-c-table__tr) > :where(th, td):first-child {
+ --pf-v6-c-table--cell--PaddingInlineStart: 0;
+}
+.pf-m-grid.pf-v6-c-table tr:where(.pf-v6-c-table__tr) > :where(th, td):last-child {
+ --pf-v6-c-table--cell--PaddingInlineEnd: 0;
+}
+.pf-m-grid.pf-v6-c-table .pf-v6-c-table {
+ --pf-v6-c-table__tr--responsive--PaddingBlockStart: var(--pf-v6-c-table__tr--responsive--nested-table--PaddingBlockStart);
+ --pf-v6-c-table__tr--responsive--PaddingInlineEnd: var(--pf-v6-c-table__tr--responsive--nested-table--PaddingInlineEnd);
+ --pf-v6-c-table__tr--responsive--PaddingBlockEnd: var(--pf-v6-c-table__tr--responsive--nested-table--PaddingBlockEnd);
+ --pf-v6-c-table__tr--responsive--PaddingInlineStart: var(--pf-v6-c-table__tr--responsive--nested-table--PaddingInlineStart);
+ border: 0;
+}
+.pf-m-grid.pf-v6-c-table .pf-v6-c-table__compound-expansion-toggle {
+ --pf-v6-c-table__compound-expansion-toggle__button--before--BorderInlineEndWidth: 0;
+ --pf-v6-c-table__compound-expansion-toggle__button--before--BorderInlineStartWidth: 0;
+ --pf-v6-c-table__compound-expansion-toggle__button--after--InsetBlockStart: 100%;
+}
+.pf-m-grid.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody) {
+ position: relative;
+}
+.pf-m-grid.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody)::after {
+ position: absolute;
+ inset-block-start: 0;
+ inset-block-end: 0;
+ inset-inline-start: 0;
+ content: "";
+ border: 0;
+ border-inline-start: var(--pf-v6-c-table__tbody--after--BorderInlineStartWidth) solid var(--pf-v6-c-table__tbody--after--BorderColor);
+}
+.pf-m-grid.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody).pf-m-expanded {
+ --pf-v6-c-table__tbody--after--BorderInlineStartWidth: var(--pf-v6-c-table__tbody--after--border-width--base);
+}
+.pf-m-grid.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody).pf-m-expanded tbody:where(.pf-v6-c-table__tbody) {
+ --pf-v6-c-table__tbody--after--BorderInlineStartWidth: 0;
+}
+.pf-m-grid.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody) > tr:where(.pf-v6-c-table__tr) > :first-child:not(.pf-v6-c-table__check)::after {
+ --pf-v6-c-table__expandable-row--after--BorderInlineStartWidth: 0;
+ position: static;
+ width: auto;
+ background-color: transparent;
+}
+.pf-m-grid.pf-v6-c-table .pf-v6-c-table__expandable-row {
+ --pf-v6-c-table--cell--responsive--PaddingBlockStart: 0;
+ --pf-v6-c-table--cell--responsive--PaddingInlineEnd: 0;
+ --pf-v6-c-table--cell--responsive--PaddingBlockEnd: 0;
+ --pf-v6-c-table--cell--responsive--PaddingInlineStart: 0;
+ --pf-v6-c-table--cell--PaddingInlineEnd: 0;
+ --pf-v6-c-table--cell--PaddingInlineStart: 0;
+ display: block;
+ max-height: var(--pf-v6-c-table__expandable-row--MaxHeight);
+ overflow-y: auto;
+ border-block-end: none;
+}
+.pf-m-grid.pf-v6-c-table .pf-v6-c-table__expandable-row > :where(th, td) {
+ position: static;
+ display: block;
+}
+.pf-m-grid.pf-v6-c-table .pf-v6-c-table__expandable-row.pf-m-expanded {
+ border-block-start-color: var(--pf-v6-c-table--BorderColor);
+}
+.pf-m-grid.pf-v6-c-table .pf-v6-c-table__expandable-row > :first-child:not(.pf-v6-c-table__check)::after {
+ content: none;
+}
+.pf-m-grid.pf-v6-c-table .pf-v6-c-table__expandable-row th:where(.pf-v6-c-table__th).pf-m-no-padding .pf-v6-c-table__expandable-row-content,
+.pf-m-grid.pf-v6-c-table .pf-v6-c-table__expandable-row td:where(.pf-v6-c-table__td).pf-m-no-padding .pf-v6-c-table__expandable-row-content {
+ padding: 0;
+}
+.pf-m-grid.pf-v6-c-table .pf-v6-c-table__expandable-row:not(.pf-m-expanded) {
+ display: none;
+}
+.pf-m-grid.pf-v6-c-table .pf-v6-c-table__expandable-row .pf-v6-c-table__expandable-row-content {
+ padding-inline-end: var(--pf-v6-c-table__expandable-row-content--responsive--PaddingInlineEnd);
+ padding-inline-start: var(--pf-v6-c-table__expandable-row-content--responsive--PaddingInlineStart);
+}
+.pf-m-grid.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody).pf-m-hoverable {
+ --pf-v6-c-table__tbody--after--BorderInlineStartWidth: 0;
+ --pf-v6-c-table__tbody--after--BorderInlineStartColor: transparent;
+}
+.pf-m-grid.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody).pf-m-hoverable,
+.pf-m-grid.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody).pf-m-hoverable > tr:where(.pf-v6-c-table__tr) {
+ position: relative;
+}
+.pf-m-grid.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody).pf-m-hoverable > tr:where(.pf-v6-c-table__tr)::after {
+ content: "";
+ position: absolute;
+ inset-block-start: 0;
+ inset-block-end: 0;
+ inset-inline-start: 0;
+ width: var(--pf-v6-c-table__tbody--after__tr--BorderInlineStartWidth);
+ background-color: var(--pf-v6-c-table__tbody--after__tr--BorderInlineStartColor);
+}
+.pf-m-grid.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody).pf-m-hoverable.pf-m-expanded {
+ --pf-v6-c-table__tbody--after__tr--BorderInlineStartWidth: var(--pf-v6-c-table__tbody--m-expanded--after__tr--BorderInlineStartWidth);
+ --pf-v6-c-table__tbody--after__tr--BorderInlineStartColor: var(--pf-v6-c-table__tbody--m-expanded--after__tr--BorderInlineStartColor);
+}
+.pf-m-grid.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody).pf-m-hoverable.pf-m-selected {
+ --pf-v6-c-table__tbody--after__tr--BorderInlineStartWidth: var(--pf-v6-c-table__tbody--m-selected--after__tr--BorderInlineStartWidth);
+ --pf-v6-c-table__tbody--after__tr--BorderInlineStartColor: var(--pf-v6-c-table__tbody--m-selected--after__tr--BorderInlineStartColor);
+}
+.pf-m-grid.pf-v6-c-table tr:where(.pf-v6-c-table__tr).pf-m-selected::after {
+ content: "";
+ position: absolute;
+ inset-block-start: 0;
+ inset-block-end: 0;
+ inset-inline-start: 0;
+ width: var(--pf-v6-c-table__tr--m-selected--after--BorderInlineStartWidth);
+ background-color: var(--pf-v6-c-table__tr--m-selected--after--BorderInlineStartColor);
+}
+.pf-m-grid.pf-v6-c-table tr:where(.pf-v6-c-table__tr):not(.pf-v6-c-table__expandable-row) .pf-v6-c-table__toggle,
+.pf-m-grid.pf-v6-c-table tr:where(.pf-v6-c-table__tr):not(.pf-v6-c-table__expandable-row) .pf-v6-c-table__check,
+.pf-m-grid.pf-v6-c-table tr:where(.pf-v6-c-table__tr):not(.pf-v6-c-table__expandable-row) .pf-v6-c-table__favorite,
+.pf-m-grid.pf-v6-c-table tr:where(.pf-v6-c-table__tr):not(.pf-v6-c-table__expandable-row) .pf-v6-c-table__action {
+ width: auto;
+ padding: 0;
+}
+.pf-m-grid.pf-v6-c-table .pf-v6-c-table__toggle {
+ grid-row-start: 20;
+ grid-column: -1;
+ justify-self: end;
+ padding-inline-end: 0;
+}
+.pf-m-grid.pf-v6-c-table .pf-v6-c-table__toggle::after {
+ content: none;
+}
+.pf-m-grid.pf-v6-c-table .pf-v6-c-table__button {
+ --pf-v6-c-table--cell--PaddingBlockStart: var(--pf-v6-c-table--m-grid--cell--PaddingBlockStart);
+ --pf-v6-c-table--cell--PaddingInlineEnd: var(--pf-v6-c-table--m-grid--cell--PaddingInlineEnd);
+ --pf-v6-c-table--cell--PaddingBlockEnd: var(--pf-v6-c-table--m-grid--cell--PaddingBlockEnd);
+ --pf-v6-c-table--cell--PaddingInlineStart: var(--pf-v6-c-table--m-grid--cell--PaddingInlineStart);
+}
+.pf-m-grid.pf-v6-c-table .pf-v6-c-table__check,
+.pf-m-grid.pf-v6-c-table .pf-v6-c-table__favorite,
+.pf-m-grid.pf-v6-c-table .pf-v6-c-table__action {
+ grid-row-start: 1;
+ grid-column-start: 2;
+}
+.pf-m-grid.pf-v6-c-table .pf-v6-c-table__check {
+ margin-block-start: var(--pf-v6-c-table__check--responsive--MarginBlockStart);
+ margin-inline-start: var(--pf-v6-c-table__check--responsive--MarginInlineStart);
+ line-height: 1;
+}
+.pf-m-grid.pf-v6-c-table .pf-v6-c-table__check ~ .pf-v6-c-table__favorite {
+ margin-inline-start: var(--pf-v6-c-table--m-grid__check--favorite--MarginInlineStart);
+}
+.pf-m-grid.pf-v6-c-table .pf-v6-c-table__check ~ .pf-v6-c-table__favorite ~ .pf-v6-c-table__action {
+ margin-inline-start: var(--pf-v6-c-table--m-grid__check--favorite--action--MarginInlineStart);
+}
+.pf-m-grid.pf-v6-c-table .pf-v6-c-table__check ~ .pf-v6-c-table__action {
+ margin-inline-start: var(--pf-v6-c-table__action--responsive--MarginInlineStart);
+}
+.pf-m-grid.pf-v6-c-table .pf-v6-c-table__check label {
+ display: inline-block;
+ margin: 0;
+}
+.pf-m-grid.pf-v6-c-table .pf-v6-c-table__favorite {
+ margin-block-start: var(--pf-v6-c-table--m-grid__favorite--MarginBlockStart);
+}
+.pf-m-grid.pf-v6-c-table .pf-v6-c-table__favorite ~ .pf-v6-c-table__action {
+ margin-inline-start: var(--pf-v6-c-table--m-grid__favorite--action--MarginInlineStart);
+}
+.pf-m-grid.pf-v6-c-table .pf-v6-c-table__action {
+ text-align: end;
+}
+@media screen and (max-width: 36rem) {
+ .pf-m-grid.pf-v6-c-table .pf-v6-c-table__action {
+ grid-row-start: 1;
+ grid-column-start: 2;
+ margin-inline-start: 0;
+ }
+}
+.pf-m-grid.pf-v6-c-table .pf-v6-c-table__inline-edit-action {
+ grid-column: 2;
+ grid-row: 2;
+}
+.pf-m-grid.pf-v6-c-table .pf-v6-c-table__toggle-icon {
+ transition: var(--pf-v6-c-table__toggle__icon--Transition);
+}
+.pf-v6-c-button.pf-m-expanded > .pf-m-grid.pf-v6-c-table .pf-v6-c-table__toggle-icon {
+ transform: rotate(var(--pf-v6-c-table__toggle--m-expanded__icon--Rotate));
+}
+.pf-m-grid.pf-v6-c-table :where(.pf-v6-c-table, .pf-v6-c-table__thead, .pf-v6-c-table__tbody, .pf-v6-c-table__tr, .pf-v6-c-table__th, .pf-v6-c-table__td, .pf-v6-c-table__text).pf-m-nowrap {
+ --pf-v6-c-table--cell--Overflow: auto;
+}
+.pf-m-grid.pf-v6-c-table :where(.pf-v6-c-table, .pf-v6-c-table__thead, .pf-v6-c-table__tbody, .pf-v6-c-table__tr, .pf-v6-c-table__th, .pf-v6-c-table__td, .pf-v6-c-table__text).pf-m-fit-content {
+ width: auto;
+ white-space: normal;
+}
+.pf-m-grid.pf-v6-c-table :where(.pf-v6-c-table, .pf-v6-c-table__thead, .pf-v6-c-table__tbody, .pf-v6-c-table__tr, .pf-v6-c-table__th, .pf-v6-c-table__td, .pf-v6-c-table__text).pf-m-truncate {
+ --pf-v6-c-table--cell--MaxWidth: 100%;
+}
+.pf-m-grid.pf-v6-c-table [class*=pf-m-width] {
+ --pf-v6-c-table--cell--Width: auto;
+}
+
+@media screen and (max-width: calc(48rem - 1px)) {
+ .pf-m-grid-md.pf-v6-c-table {
+ --pf-v6-c-table--cell--PaddingBlockStart: var(--pf-v6-c-table--m-grid--cell--PaddingBlockStart);
+ --pf-v6-c-table--cell--PaddingInlineEnd: var(--pf-v6-c-table--m-grid--cell--PaddingInlineEnd);
+ --pf-v6-c-table--cell--PaddingBlockEnd: var(--pf-v6-c-table--m-grid--cell--PaddingBlockEnd);
+ --pf-v6-c-table--cell--PaddingInlineStart: var(--pf-v6-c-table--m-grid--cell--PaddingInlineStart);
+ --pf-v6-c-table--cell--first-last-child--PaddingInline: 0;
+ --pf-v6-c-table__favorite--c-button--MarginBlockStart: auto;
+ --pf-v6-c-table__favorite--c-button--MarginInlineEnd: auto;
+ --pf-v6-c-table__favorite--c-button--MarginBlockEnd: auto;
+ --pf-v6-c-table__favorite--c-button--MarginInlineStart: auto;
+ display: grid;
+ border: none;
+ }
+ .pf-m-grid-md.pf-v6-c-table tr:where(.pf-v6-c-table__tr) > :where(th, td) {
+ width: auto;
+ min-width: 0;
+ max-width: none;
+ overflow: visible;
+ text-overflow: clip;
+ white-space: normal;
+ }
+ .pf-m-grid-md.pf-v6-c-table .pf-v6-c-table__text {
+ position: relative;
+ width: auto;
+ min-width: 0;
+ max-width: none;
+ 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-m-grid-md.pf-v6-c-table thead:where(.pf-v6-c-table__thead) {
+ display: none;
+ }
+ .pf-m-grid-md.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody) {
+ display: block;
+ }
+ .pf-m-grid-md.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody):first-of-type {
+ border-block-start: var(--pf-v6-c-table__tbody--responsive--border-width--base) solid var(--pf-v6-c-table--responsive--BorderColor);
+ }
+ .pf-m-grid-md.pf-v6-c-table.pf-m-expandable {
+ --pf-v6-c-table__tr--BorderBlockEndWidth: 0;
+ }
+ .pf-m-grid-md.pf-v6-c-table.pf-m-expandable .pf-v6-c-table__tbody,
+ .pf-m-grid-md.pf-v6-c-table.pf-m-expandable .pf-v6-c-table__tbody.pf-m-expanded {
+ border-block-end: var(--pf-v6-c-table__tbody--responsive--m-expandable--BorderBlockEndWidth) solid var(--pf-v6-c-table--responsive--BorderColor);
+ }
+ .pf-m-grid-md.pf-v6-c-table tr:where(.pf-v6-c-table__tr).pf-m-selected {
+ --pf-v6-c-table__expandable-row--after--BorderInlineStartWidth: 0;
+ --pf-v6-c-table__expandable-row--after--BorderColor: transparent;
+ }
+ .pf-m-grid-md.pf-v6-c-table tr:where(.pf-v6-c-table__tr):not(.pf-v6-c-table__expandable-row) {
+ display: grid;
+ grid-template-columns: 1fr;
+ height: auto;
+ grid-auto-columns: max-content;
+ grid-column-gap: var(--pf-v6-c-table__tr--responsive--GridColumnGap);
+ padding-block-start: var(--pf-v6-c-table__tr--responsive--PaddingBlockStart);
+ padding-inline-end: var(--pf-v6-c-table__tr--responsive--PaddingInlineEnd);
+ padding-block-end: var(--pf-v6-c-table__tr--responsive--PaddingBlockEnd);
+ padding-inline-start: var(--pf-v6-c-table__tr--responsive--PaddingInlineStart);
+ }
+ .pf-m-grid-md.pf-v6-c-table tr:where(.pf-v6-c-table__tr):not(.pf-v6-c-table__expandable-row) > :where(th, td) {
+ padding-block-start: var(--pf-v6-c-table--cell--responsive--PaddingBlockStart);
+ padding-inline-end: var(--pf-v6-c-table--cell--responsive--PaddingInlineEnd);
+ padding-block-end: var(--pf-v6-c-table--cell--responsive--PaddingBlockEnd);
+ padding-inline-start: var(--pf-v6-c-table--cell--responsive--PaddingInlineStart);
+ }
+ .pf-m-grid-md.pf-v6-c-table tr:where(.pf-v6-c-table__tr):not(.pf-v6-c-table__expandable-row) > :where(th, td):first-child {
+ --pf-v6-c-table--cell--responsive--PaddingBlockStart: var(--pf-v6-c-table--cell--first-child--responsive--PaddingBlockStart);
+ }
+ .pf-m-grid-md.pf-v6-c-table.pf-m-compact {
+ --pf-v6-c-table__tr--responsive--PaddingBlockStart: var(--pf-v6-c-table--m-compact__tr--responsive--PaddingBlockStart);
+ --pf-v6-c-table__tr--responsive--PaddingBlockEnd: var(--pf-v6-c-table--m-compact__tr--responsive--PaddingBlockEnd);
+ --pf-v6-c-table--cell--responsive--PaddingBlockStart: var(--pf-v6-c-table--m-compact__tr__td--responsive--PaddingBlockStart);
+ --pf-v6-c-table--cell--responsive--PaddingBlockEnd: var(--pf-v6-c-table--m-compact__tr__td--responsive--PaddingBlockEnd);
+ --pf-v6-c-table__check--responsive--MarginBlockStart: var(--pf-v6-c-table--m-compact__check--responsive--MarginBlockStart);
+ --pf-v6-c-table__check--input--MarginBlockStart: 0;
+ }
+ .pf-m-grid-md.pf-v6-c-table.pf-m-compact .pf-v6-c-table__action {
+ margin-block-start: var(--pf-v6-c-table--m-compact__action--responsive--MarginBlockStart);
+ margin-block-end: var(--pf-v6-c-table--m-compact__action--responsive--MarginBlockStart);
+ }
+ .pf-m-grid-md.pf-v6-c-table.pf-m-compact .pf-v6-c-table__toggle .pf-v6-c-button {
+ margin-block-end: var(--pf-v6-c-table--m-compact__toggle--c-button--responsive--MarginBlockEnd);
+ }
+ .pf-m-grid-md.pf-v6-c-table .pf-v6-c-table__icon > * {
+ text-align: start;
+ }
+ .pf-m-grid-md.pf-v6-c-table :where(.pf-v6-c-table__th, .pf-v6-c-table__td)[data-label] {
+ --pf-v6-c-table--cell--hidden-visible--Display: var(--pf-v6-c-table--m-grid--cell--hidden-visible--Display);
+ grid-column: 1;
+ grid-column-gap: var(--pf-v6-c-table-td--responsive--GridColumnGap);
+ grid-template-columns: 1fr minmax(0, 1.5fr);
+ align-items: start;
+ }
+ .pf-m-grid-md.pf-v6-c-table :where(.pf-v6-c-table__th, .pf-v6-c-table__td)[data-label].pf-m-action {
+ align-items: center;
+ }
+ .pf-m-grid-md.pf-v6-c-table :where(.pf-v6-c-table__th, .pf-v6-c-table__td)[data-label] > * {
+ grid-column: 2;
+ }
+ .pf-m-grid-md.pf-v6-c-table :where(.pf-v6-c-table__th, .pf-v6-c-table__td)[data-label]::before {
+ position: revert;
+ font-weight: var(--pf-v6-c-table--cell--responsive--th--FontWeight);
+ text-align: start;
+ content: attr(data-label);
+ }
+ .pf-m-grid-md.pf-v6-c-table tr:where(.pf-v6-c-table__tr) > :where(th, td):first-child {
+ --pf-v6-c-table--cell--PaddingInlineStart: 0;
+ }
+ .pf-m-grid-md.pf-v6-c-table tr:where(.pf-v6-c-table__tr) > :where(th, td):last-child {
+ --pf-v6-c-table--cell--PaddingInlineEnd: 0;
+ }
+ .pf-m-grid-md.pf-v6-c-table .pf-v6-c-table {
+ --pf-v6-c-table__tr--responsive--PaddingBlockStart: var(--pf-v6-c-table__tr--responsive--nested-table--PaddingBlockStart);
+ --pf-v6-c-table__tr--responsive--PaddingInlineEnd: var(--pf-v6-c-table__tr--responsive--nested-table--PaddingInlineEnd);
+ --pf-v6-c-table__tr--responsive--PaddingBlockEnd: var(--pf-v6-c-table__tr--responsive--nested-table--PaddingBlockEnd);
+ --pf-v6-c-table__tr--responsive--PaddingInlineStart: var(--pf-v6-c-table__tr--responsive--nested-table--PaddingInlineStart);
+ border: 0;
+ }
+ .pf-m-grid-md.pf-v6-c-table .pf-v6-c-table__compound-expansion-toggle {
+ --pf-v6-c-table__compound-expansion-toggle__button--before--BorderInlineEndWidth: 0;
+ --pf-v6-c-table__compound-expansion-toggle__button--before--BorderInlineStartWidth: 0;
+ --pf-v6-c-table__compound-expansion-toggle__button--after--InsetBlockStart: 100%;
+ }
+ .pf-m-grid-md.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody) {
+ position: relative;
+ }
+ .pf-m-grid-md.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody)::after {
+ position: absolute;
+ inset-block-start: 0;
+ inset-block-end: 0;
+ inset-inline-start: 0;
+ content: "";
+ border: 0;
+ border-inline-start: var(--pf-v6-c-table__tbody--after--BorderInlineStartWidth) solid var(--pf-v6-c-table__tbody--after--BorderColor);
+ }
+ .pf-m-grid-md.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody).pf-m-expanded {
+ --pf-v6-c-table__tbody--after--BorderInlineStartWidth: var(--pf-v6-c-table__tbody--after--border-width--base);
+ }
+ .pf-m-grid-md.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody).pf-m-expanded tbody:where(.pf-v6-c-table__tbody) {
+ --pf-v6-c-table__tbody--after--BorderInlineStartWidth: 0;
+ }
+ .pf-m-grid-md.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody) > tr:where(.pf-v6-c-table__tr) > :first-child:not(.pf-v6-c-table__check)::after {
+ --pf-v6-c-table__expandable-row--after--BorderInlineStartWidth: 0;
+ position: static;
+ width: auto;
+ background-color: transparent;
+ }
+ .pf-m-grid-md.pf-v6-c-table .pf-v6-c-table__expandable-row {
+ --pf-v6-c-table--cell--responsive--PaddingBlockStart: 0;
+ --pf-v6-c-table--cell--responsive--PaddingInlineEnd: 0;
+ --pf-v6-c-table--cell--responsive--PaddingBlockEnd: 0;
+ --pf-v6-c-table--cell--responsive--PaddingInlineStart: 0;
+ --pf-v6-c-table--cell--PaddingInlineEnd: 0;
+ --pf-v6-c-table--cell--PaddingInlineStart: 0;
+ display: block;
+ max-height: var(--pf-v6-c-table__expandable-row--MaxHeight);
+ overflow-y: auto;
+ border-block-end: none;
+ }
+ .pf-m-grid-md.pf-v6-c-table .pf-v6-c-table__expandable-row > :where(th, td) {
+ position: static;
+ display: block;
+ }
+ .pf-m-grid-md.pf-v6-c-table .pf-v6-c-table__expandable-row.pf-m-expanded {
+ border-block-start-color: var(--pf-v6-c-table--BorderColor);
+ }
+ .pf-m-grid-md.pf-v6-c-table .pf-v6-c-table__expandable-row > :first-child:not(.pf-v6-c-table__check)::after {
+ content: none;
+ }
+ .pf-m-grid-md.pf-v6-c-table .pf-v6-c-table__expandable-row th:where(.pf-v6-c-table__th).pf-m-no-padding .pf-v6-c-table__expandable-row-content,
+ .pf-m-grid-md.pf-v6-c-table .pf-v6-c-table__expandable-row td:where(.pf-v6-c-table__td).pf-m-no-padding .pf-v6-c-table__expandable-row-content {
+ padding: 0;
+ }
+ .pf-m-grid-md.pf-v6-c-table .pf-v6-c-table__expandable-row:not(.pf-m-expanded) {
+ display: none;
+ }
+ .pf-m-grid-md.pf-v6-c-table .pf-v6-c-table__expandable-row .pf-v6-c-table__expandable-row-content {
+ padding-inline-end: var(--pf-v6-c-table__expandable-row-content--responsive--PaddingInlineEnd);
+ padding-inline-start: var(--pf-v6-c-table__expandable-row-content--responsive--PaddingInlineStart);
+ }
+ .pf-m-grid-md.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody).pf-m-hoverable {
+ --pf-v6-c-table__tbody--after--BorderInlineStartWidth: 0;
+ --pf-v6-c-table__tbody--after--BorderInlineStartColor: transparent;
+ }
+ .pf-m-grid-md.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody).pf-m-hoverable,
+ .pf-m-grid-md.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody).pf-m-hoverable > tr:where(.pf-v6-c-table__tr) {
+ position: relative;
+ }
+ .pf-m-grid-md.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody).pf-m-hoverable > tr:where(.pf-v6-c-table__tr)::after {
+ content: "";
+ position: absolute;
+ inset-block-start: 0;
+ inset-block-end: 0;
+ inset-inline-start: 0;
+ width: var(--pf-v6-c-table__tbody--after__tr--BorderInlineStartWidth);
+ background-color: var(--pf-v6-c-table__tbody--after__tr--BorderInlineStartColor);
+ }
+ .pf-m-grid-md.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody).pf-m-hoverable.pf-m-expanded {
+ --pf-v6-c-table__tbody--after__tr--BorderInlineStartWidth: var(--pf-v6-c-table__tbody--m-expanded--after__tr--BorderInlineStartWidth);
+ --pf-v6-c-table__tbody--after__tr--BorderInlineStartColor: var(--pf-v6-c-table__tbody--m-expanded--after__tr--BorderInlineStartColor);
+ }
+ .pf-m-grid-md.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody).pf-m-hoverable.pf-m-selected {
+ --pf-v6-c-table__tbody--after__tr--BorderInlineStartWidth: var(--pf-v6-c-table__tbody--m-selected--after__tr--BorderInlineStartWidth);
+ --pf-v6-c-table__tbody--after__tr--BorderInlineStartColor: var(--pf-v6-c-table__tbody--m-selected--after__tr--BorderInlineStartColor);
+ }
+ .pf-m-grid-md.pf-v6-c-table tr:where(.pf-v6-c-table__tr).pf-m-selected::after {
+ content: "";
+ position: absolute;
+ inset-block-start: 0;
+ inset-block-end: 0;
+ inset-inline-start: 0;
+ width: var(--pf-v6-c-table__tr--m-selected--after--BorderInlineStartWidth);
+ background-color: var(--pf-v6-c-table__tr--m-selected--after--BorderInlineStartColor);
+ }
+ .pf-m-grid-md.pf-v6-c-table tr:where(.pf-v6-c-table__tr):not(.pf-v6-c-table__expandable-row) .pf-v6-c-table__toggle,
+ .pf-m-grid-md.pf-v6-c-table tr:where(.pf-v6-c-table__tr):not(.pf-v6-c-table__expandable-row) .pf-v6-c-table__check,
+ .pf-m-grid-md.pf-v6-c-table tr:where(.pf-v6-c-table__tr):not(.pf-v6-c-table__expandable-row) .pf-v6-c-table__favorite,
+ .pf-m-grid-md.pf-v6-c-table tr:where(.pf-v6-c-table__tr):not(.pf-v6-c-table__expandable-row) .pf-v6-c-table__action {
+ width: auto;
+ padding: 0;
+ }
+ .pf-m-grid-md.pf-v6-c-table .pf-v6-c-table__toggle {
+ grid-row-start: 20;
+ grid-column: -1;
+ justify-self: end;
+ padding-inline-end: 0;
+ }
+ .pf-m-grid-md.pf-v6-c-table .pf-v6-c-table__toggle::after {
+ content: none;
+ }
+ .pf-m-grid-md.pf-v6-c-table .pf-v6-c-table__button {
+ --pf-v6-c-table--cell--PaddingBlockStart: var(--pf-v6-c-table--m-grid--cell--PaddingBlockStart);
+ --pf-v6-c-table--cell--PaddingInlineEnd: var(--pf-v6-c-table--m-grid--cell--PaddingInlineEnd);
+ --pf-v6-c-table--cell--PaddingBlockEnd: var(--pf-v6-c-table--m-grid--cell--PaddingBlockEnd);
+ --pf-v6-c-table--cell--PaddingInlineStart: var(--pf-v6-c-table--m-grid--cell--PaddingInlineStart);
+ }
+ .pf-m-grid-md.pf-v6-c-table .pf-v6-c-table__check,
+ .pf-m-grid-md.pf-v6-c-table .pf-v6-c-table__favorite,
+ .pf-m-grid-md.pf-v6-c-table .pf-v6-c-table__action {
+ grid-row-start: 1;
+ grid-column-start: 2;
+ }
+ .pf-m-grid-md.pf-v6-c-table .pf-v6-c-table__check {
+ margin-block-start: var(--pf-v6-c-table__check--responsive--MarginBlockStart);
+ margin-inline-start: var(--pf-v6-c-table__check--responsive--MarginInlineStart);
+ line-height: 1;
+ }
+ .pf-m-grid-md.pf-v6-c-table .pf-v6-c-table__check ~ .pf-v6-c-table__favorite {
+ margin-inline-start: var(--pf-v6-c-table--m-grid__check--favorite--MarginInlineStart);
+ }
+ .pf-m-grid-md.pf-v6-c-table .pf-v6-c-table__check ~ .pf-v6-c-table__favorite ~ .pf-v6-c-table__action {
+ margin-inline-start: var(--pf-v6-c-table--m-grid__check--favorite--action--MarginInlineStart);
+ }
+ .pf-m-grid-md.pf-v6-c-table .pf-v6-c-table__check ~ .pf-v6-c-table__action {
+ margin-inline-start: var(--pf-v6-c-table__action--responsive--MarginInlineStart);
+ }
+ .pf-m-grid-md.pf-v6-c-table .pf-v6-c-table__check label {
+ display: inline-block;
+ margin: 0;
+ }
+ .pf-m-grid-md.pf-v6-c-table .pf-v6-c-table__favorite {
+ margin-block-start: var(--pf-v6-c-table--m-grid__favorite--MarginBlockStart);
+ }
+ .pf-m-grid-md.pf-v6-c-table .pf-v6-c-table__favorite ~ .pf-v6-c-table__action {
+ margin-inline-start: var(--pf-v6-c-table--m-grid__favorite--action--MarginInlineStart);
+ }
+ .pf-m-grid-md.pf-v6-c-table .pf-v6-c-table__action {
+ text-align: end;
+ }
+}
+@media screen and (max-width: calc(48rem - 1px)) and (max-width: 36rem) {
+ .pf-m-grid-md.pf-v6-c-table .pf-v6-c-table__action {
+ grid-row-start: 1;
+ grid-column-start: 2;
+ margin-inline-start: 0;
+ }
+}
+@media screen and (max-width: calc(48rem - 1px)) {
+ .pf-m-grid-md.pf-v6-c-table .pf-v6-c-table__inline-edit-action {
+ grid-column: 2;
+ grid-row: 2;
+ }
+ .pf-m-grid-md.pf-v6-c-table .pf-v6-c-table__toggle-icon {
+ transition: var(--pf-v6-c-table__toggle__icon--Transition);
+ }
+ .pf-v6-c-button.pf-m-expanded > .pf-m-grid-md.pf-v6-c-table .pf-v6-c-table__toggle-icon {
+ transform: rotate(var(--pf-v6-c-table__toggle--m-expanded__icon--Rotate));
+ }
+ .pf-m-grid-md.pf-v6-c-table :where(.pf-v6-c-table, .pf-v6-c-table__thead, .pf-v6-c-table__tbody, .pf-v6-c-table__tr, .pf-v6-c-table__th, .pf-v6-c-table__td, .pf-v6-c-table__text).pf-m-nowrap {
+ --pf-v6-c-table--cell--Overflow: auto;
+ }
+ .pf-m-grid-md.pf-v6-c-table :where(.pf-v6-c-table, .pf-v6-c-table__thead, .pf-v6-c-table__tbody, .pf-v6-c-table__tr, .pf-v6-c-table__th, .pf-v6-c-table__td, .pf-v6-c-table__text).pf-m-fit-content {
+ width: auto;
+ white-space: normal;
+ }
+ .pf-m-grid-md.pf-v6-c-table :where(.pf-v6-c-table, .pf-v6-c-table__thead, .pf-v6-c-table__tbody, .pf-v6-c-table__tr, .pf-v6-c-table__th, .pf-v6-c-table__td, .pf-v6-c-table__text).pf-m-truncate {
+ --pf-v6-c-table--cell--MaxWidth: 100%;
+ }
+ .pf-m-grid-md.pf-v6-c-table [class*=pf-m-width] {
+ --pf-v6-c-table--cell--Width: auto;
+ }
+}
+
+@media screen and (max-width: calc(62rem - 1px)) {
+ .pf-m-grid-lg.pf-v6-c-table {
+ --pf-v6-c-table--cell--PaddingBlockStart: var(--pf-v6-c-table--m-grid--cell--PaddingBlockStart);
+ --pf-v6-c-table--cell--PaddingInlineEnd: var(--pf-v6-c-table--m-grid--cell--PaddingInlineEnd);
+ --pf-v6-c-table--cell--PaddingBlockEnd: var(--pf-v6-c-table--m-grid--cell--PaddingBlockEnd);
+ --pf-v6-c-table--cell--PaddingInlineStart: var(--pf-v6-c-table--m-grid--cell--PaddingInlineStart);
+ --pf-v6-c-table--cell--first-last-child--PaddingInline: 0;
+ --pf-v6-c-table__favorite--c-button--MarginBlockStart: auto;
+ --pf-v6-c-table__favorite--c-button--MarginInlineEnd: auto;
+ --pf-v6-c-table__favorite--c-button--MarginBlockEnd: auto;
+ --pf-v6-c-table__favorite--c-button--MarginInlineStart: auto;
+ display: grid;
+ border: none;
+ }
+ .pf-m-grid-lg.pf-v6-c-table tr:where(.pf-v6-c-table__tr) > :where(th, td) {
+ width: auto;
+ min-width: 0;
+ max-width: none;
+ overflow: visible;
+ text-overflow: clip;
+ white-space: normal;
+ }
+ .pf-m-grid-lg.pf-v6-c-table .pf-v6-c-table__text {
+ position: relative;
+ width: auto;
+ min-width: 0;
+ max-width: none;
+ 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-m-grid-lg.pf-v6-c-table thead:where(.pf-v6-c-table__thead) {
+ display: none;
+ }
+ .pf-m-grid-lg.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody) {
+ display: block;
+ }
+ .pf-m-grid-lg.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody):first-of-type {
+ border-block-start: var(--pf-v6-c-table__tbody--responsive--border-width--base) solid var(--pf-v6-c-table--responsive--BorderColor);
+ }
+ .pf-m-grid-lg.pf-v6-c-table.pf-m-expandable {
+ --pf-v6-c-table__tr--BorderBlockEndWidth: 0;
+ }
+ .pf-m-grid-lg.pf-v6-c-table.pf-m-expandable .pf-v6-c-table__tbody,
+ .pf-m-grid-lg.pf-v6-c-table.pf-m-expandable .pf-v6-c-table__tbody.pf-m-expanded {
+ border-block-end: var(--pf-v6-c-table__tbody--responsive--m-expandable--BorderBlockEndWidth) solid var(--pf-v6-c-table--responsive--BorderColor);
+ }
+ .pf-m-grid-lg.pf-v6-c-table tr:where(.pf-v6-c-table__tr).pf-m-selected {
+ --pf-v6-c-table__expandable-row--after--BorderInlineStartWidth: 0;
+ --pf-v6-c-table__expandable-row--after--BorderColor: transparent;
+ }
+ .pf-m-grid-lg.pf-v6-c-table tr:where(.pf-v6-c-table__tr):not(.pf-v6-c-table__expandable-row) {
+ display: grid;
+ grid-template-columns: 1fr;
+ height: auto;
+ grid-auto-columns: max-content;
+ grid-column-gap: var(--pf-v6-c-table__tr--responsive--GridColumnGap);
+ padding-block-start: var(--pf-v6-c-table__tr--responsive--PaddingBlockStart);
+ padding-inline-end: var(--pf-v6-c-table__tr--responsive--PaddingInlineEnd);
+ padding-block-end: var(--pf-v6-c-table__tr--responsive--PaddingBlockEnd);
+ padding-inline-start: var(--pf-v6-c-table__tr--responsive--PaddingInlineStart);
+ }
+ .pf-m-grid-lg.pf-v6-c-table tr:where(.pf-v6-c-table__tr):not(.pf-v6-c-table__expandable-row) > :where(th, td) {
+ padding-block-start: var(--pf-v6-c-table--cell--responsive--PaddingBlockStart);
+ padding-inline-end: var(--pf-v6-c-table--cell--responsive--PaddingInlineEnd);
+ padding-block-end: var(--pf-v6-c-table--cell--responsive--PaddingBlockEnd);
+ padding-inline-start: var(--pf-v6-c-table--cell--responsive--PaddingInlineStart);
+ }
+ .pf-m-grid-lg.pf-v6-c-table tr:where(.pf-v6-c-table__tr):not(.pf-v6-c-table__expandable-row) > :where(th, td):first-child {
+ --pf-v6-c-table--cell--responsive--PaddingBlockStart: var(--pf-v6-c-table--cell--first-child--responsive--PaddingBlockStart);
+ }
+ .pf-m-grid-lg.pf-v6-c-table.pf-m-compact {
+ --pf-v6-c-table__tr--responsive--PaddingBlockStart: var(--pf-v6-c-table--m-compact__tr--responsive--PaddingBlockStart);
+ --pf-v6-c-table__tr--responsive--PaddingBlockEnd: var(--pf-v6-c-table--m-compact__tr--responsive--PaddingBlockEnd);
+ --pf-v6-c-table--cell--responsive--PaddingBlockStart: var(--pf-v6-c-table--m-compact__tr__td--responsive--PaddingBlockStart);
+ --pf-v6-c-table--cell--responsive--PaddingBlockEnd: var(--pf-v6-c-table--m-compact__tr__td--responsive--PaddingBlockEnd);
+ --pf-v6-c-table__check--responsive--MarginBlockStart: var(--pf-v6-c-table--m-compact__check--responsive--MarginBlockStart);
+ --pf-v6-c-table__check--input--MarginBlockStart: 0;
+ }
+ .pf-m-grid-lg.pf-v6-c-table.pf-m-compact .pf-v6-c-table__action {
+ margin-block-start: var(--pf-v6-c-table--m-compact__action--responsive--MarginBlockStart);
+ margin-block-end: var(--pf-v6-c-table--m-compact__action--responsive--MarginBlockStart);
+ }
+ .pf-m-grid-lg.pf-v6-c-table.pf-m-compact .pf-v6-c-table__toggle .pf-v6-c-button {
+ margin-block-end: var(--pf-v6-c-table--m-compact__toggle--c-button--responsive--MarginBlockEnd);
+ }
+ .pf-m-grid-lg.pf-v6-c-table .pf-v6-c-table__icon > * {
+ text-align: start;
+ }
+ .pf-m-grid-lg.pf-v6-c-table :where(.pf-v6-c-table__th, .pf-v6-c-table__td)[data-label] {
+ --pf-v6-c-table--cell--hidden-visible--Display: var(--pf-v6-c-table--m-grid--cell--hidden-visible--Display);
+ grid-column: 1;
+ grid-column-gap: var(--pf-v6-c-table-td--responsive--GridColumnGap);
+ grid-template-columns: 1fr minmax(0, 1.5fr);
+ align-items: start;
+ }
+ .pf-m-grid-lg.pf-v6-c-table :where(.pf-v6-c-table__th, .pf-v6-c-table__td)[data-label].pf-m-action {
+ align-items: center;
+ }
+ .pf-m-grid-lg.pf-v6-c-table :where(.pf-v6-c-table__th, .pf-v6-c-table__td)[data-label] > * {
+ grid-column: 2;
+ }
+ .pf-m-grid-lg.pf-v6-c-table :where(.pf-v6-c-table__th, .pf-v6-c-table__td)[data-label]::before {
+ position: revert;
+ font-weight: var(--pf-v6-c-table--cell--responsive--th--FontWeight);
+ text-align: start;
+ content: attr(data-label);
+ }
+ .pf-m-grid-lg.pf-v6-c-table tr:where(.pf-v6-c-table__tr) > :where(th, td):first-child {
+ --pf-v6-c-table--cell--PaddingInlineStart: 0;
+ }
+ .pf-m-grid-lg.pf-v6-c-table tr:where(.pf-v6-c-table__tr) > :where(th, td):last-child {
+ --pf-v6-c-table--cell--PaddingInlineEnd: 0;
+ }
+ .pf-m-grid-lg.pf-v6-c-table .pf-v6-c-table {
+ --pf-v6-c-table__tr--responsive--PaddingBlockStart: var(--pf-v6-c-table__tr--responsive--nested-table--PaddingBlockStart);
+ --pf-v6-c-table__tr--responsive--PaddingInlineEnd: var(--pf-v6-c-table__tr--responsive--nested-table--PaddingInlineEnd);
+ --pf-v6-c-table__tr--responsive--PaddingBlockEnd: var(--pf-v6-c-table__tr--responsive--nested-table--PaddingBlockEnd);
+ --pf-v6-c-table__tr--responsive--PaddingInlineStart: var(--pf-v6-c-table__tr--responsive--nested-table--PaddingInlineStart);
+ border: 0;
+ }
+ .pf-m-grid-lg.pf-v6-c-table .pf-v6-c-table__compound-expansion-toggle {
+ --pf-v6-c-table__compound-expansion-toggle__button--before--BorderInlineEndWidth: 0;
+ --pf-v6-c-table__compound-expansion-toggle__button--before--BorderInlineStartWidth: 0;
+ --pf-v6-c-table__compound-expansion-toggle__button--after--InsetBlockStart: 100%;
+ }
+ .pf-m-grid-lg.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody) {
+ position: relative;
+ }
+ .pf-m-grid-lg.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody)::after {
+ position: absolute;
+ inset-block-start: 0;
+ inset-block-end: 0;
+ inset-inline-start: 0;
+ content: "";
+ border: 0;
+ border-inline-start: var(--pf-v6-c-table__tbody--after--BorderInlineStartWidth) solid var(--pf-v6-c-table__tbody--after--BorderColor);
+ }
+ .pf-m-grid-lg.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody).pf-m-expanded {
+ --pf-v6-c-table__tbody--after--BorderInlineStartWidth: var(--pf-v6-c-table__tbody--after--border-width--base);
+ }
+ .pf-m-grid-lg.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody).pf-m-expanded tbody:where(.pf-v6-c-table__tbody) {
+ --pf-v6-c-table__tbody--after--BorderInlineStartWidth: 0;
+ }
+ .pf-m-grid-lg.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody) > tr:where(.pf-v6-c-table__tr) > :first-child:not(.pf-v6-c-table__check)::after {
+ --pf-v6-c-table__expandable-row--after--BorderInlineStartWidth: 0;
+ position: static;
+ width: auto;
+ background-color: transparent;
+ }
+ .pf-m-grid-lg.pf-v6-c-table .pf-v6-c-table__expandable-row {
+ --pf-v6-c-table--cell--responsive--PaddingBlockStart: 0;
+ --pf-v6-c-table--cell--responsive--PaddingInlineEnd: 0;
+ --pf-v6-c-table--cell--responsive--PaddingBlockEnd: 0;
+ --pf-v6-c-table--cell--responsive--PaddingInlineStart: 0;
+ --pf-v6-c-table--cell--PaddingInlineEnd: 0;
+ --pf-v6-c-table--cell--PaddingInlineStart: 0;
+ display: block;
+ max-height: var(--pf-v6-c-table__expandable-row--MaxHeight);
+ overflow-y: auto;
+ border-block-end: none;
+ }
+ .pf-m-grid-lg.pf-v6-c-table .pf-v6-c-table__expandable-row > :where(th, td) {
+ position: static;
+ display: block;
+ }
+ .pf-m-grid-lg.pf-v6-c-table .pf-v6-c-table__expandable-row.pf-m-expanded {
+ border-block-start-color: var(--pf-v6-c-table--BorderColor);
+ }
+ .pf-m-grid-lg.pf-v6-c-table .pf-v6-c-table__expandable-row > :first-child:not(.pf-v6-c-table__check)::after {
+ content: none;
+ }
+ .pf-m-grid-lg.pf-v6-c-table .pf-v6-c-table__expandable-row th:where(.pf-v6-c-table__th).pf-m-no-padding .pf-v6-c-table__expandable-row-content,
+ .pf-m-grid-lg.pf-v6-c-table .pf-v6-c-table__expandable-row td:where(.pf-v6-c-table__td).pf-m-no-padding .pf-v6-c-table__expandable-row-content {
+ padding: 0;
+ }
+ .pf-m-grid-lg.pf-v6-c-table .pf-v6-c-table__expandable-row:not(.pf-m-expanded) {
+ display: none;
+ }
+ .pf-m-grid-lg.pf-v6-c-table .pf-v6-c-table__expandable-row .pf-v6-c-table__expandable-row-content {
+ padding-inline-end: var(--pf-v6-c-table__expandable-row-content--responsive--PaddingInlineEnd);
+ padding-inline-start: var(--pf-v6-c-table__expandable-row-content--responsive--PaddingInlineStart);
+ }
+ .pf-m-grid-lg.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody).pf-m-hoverable {
+ --pf-v6-c-table__tbody--after--BorderInlineStartWidth: 0;
+ --pf-v6-c-table__tbody--after--BorderInlineStartColor: transparent;
+ }
+ .pf-m-grid-lg.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody).pf-m-hoverable,
+ .pf-m-grid-lg.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody).pf-m-hoverable > tr:where(.pf-v6-c-table__tr) {
+ position: relative;
+ }
+ .pf-m-grid-lg.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody).pf-m-hoverable > tr:where(.pf-v6-c-table__tr)::after {
+ content: "";
+ position: absolute;
+ inset-block-start: 0;
+ inset-block-end: 0;
+ inset-inline-start: 0;
+ width: var(--pf-v6-c-table__tbody--after__tr--BorderInlineStartWidth);
+ background-color: var(--pf-v6-c-table__tbody--after__tr--BorderInlineStartColor);
+ }
+ .pf-m-grid-lg.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody).pf-m-hoverable.pf-m-expanded {
+ --pf-v6-c-table__tbody--after__tr--BorderInlineStartWidth: var(--pf-v6-c-table__tbody--m-expanded--after__tr--BorderInlineStartWidth);
+ --pf-v6-c-table__tbody--after__tr--BorderInlineStartColor: var(--pf-v6-c-table__tbody--m-expanded--after__tr--BorderInlineStartColor);
+ }
+ .pf-m-grid-lg.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody).pf-m-hoverable.pf-m-selected {
+ --pf-v6-c-table__tbody--after__tr--BorderInlineStartWidth: var(--pf-v6-c-table__tbody--m-selected--after__tr--BorderInlineStartWidth);
+ --pf-v6-c-table__tbody--after__tr--BorderInlineStartColor: var(--pf-v6-c-table__tbody--m-selected--after__tr--BorderInlineStartColor);
+ }
+ .pf-m-grid-lg.pf-v6-c-table tr:where(.pf-v6-c-table__tr).pf-m-selected::after {
+ content: "";
+ position: absolute;
+ inset-block-start: 0;
+ inset-block-end: 0;
+ inset-inline-start: 0;
+ width: var(--pf-v6-c-table__tr--m-selected--after--BorderInlineStartWidth);
+ background-color: var(--pf-v6-c-table__tr--m-selected--after--BorderInlineStartColor);
+ }
+ .pf-m-grid-lg.pf-v6-c-table tr:where(.pf-v6-c-table__tr):not(.pf-v6-c-table__expandable-row) .pf-v6-c-table__toggle,
+ .pf-m-grid-lg.pf-v6-c-table tr:where(.pf-v6-c-table__tr):not(.pf-v6-c-table__expandable-row) .pf-v6-c-table__check,
+ .pf-m-grid-lg.pf-v6-c-table tr:where(.pf-v6-c-table__tr):not(.pf-v6-c-table__expandable-row) .pf-v6-c-table__favorite,
+ .pf-m-grid-lg.pf-v6-c-table tr:where(.pf-v6-c-table__tr):not(.pf-v6-c-table__expandable-row) .pf-v6-c-table__action {
+ width: auto;
+ padding: 0;
+ }
+ .pf-m-grid-lg.pf-v6-c-table .pf-v6-c-table__toggle {
+ grid-row-start: 20;
+ grid-column: -1;
+ justify-self: end;
+ padding-inline-end: 0;
+ }
+ .pf-m-grid-lg.pf-v6-c-table .pf-v6-c-table__toggle::after {
+ content: none;
+ }
+ .pf-m-grid-lg.pf-v6-c-table .pf-v6-c-table__button {
+ --pf-v6-c-table--cell--PaddingBlockStart: var(--pf-v6-c-table--m-grid--cell--PaddingBlockStart);
+ --pf-v6-c-table--cell--PaddingInlineEnd: var(--pf-v6-c-table--m-grid--cell--PaddingInlineEnd);
+ --pf-v6-c-table--cell--PaddingBlockEnd: var(--pf-v6-c-table--m-grid--cell--PaddingBlockEnd);
+ --pf-v6-c-table--cell--PaddingInlineStart: var(--pf-v6-c-table--m-grid--cell--PaddingInlineStart);
+ }
+ .pf-m-grid-lg.pf-v6-c-table .pf-v6-c-table__check,
+ .pf-m-grid-lg.pf-v6-c-table .pf-v6-c-table__favorite,
+ .pf-m-grid-lg.pf-v6-c-table .pf-v6-c-table__action {
+ grid-row-start: 1;
+ grid-column-start: 2;
+ }
+ .pf-m-grid-lg.pf-v6-c-table .pf-v6-c-table__check {
+ margin-block-start: var(--pf-v6-c-table__check--responsive--MarginBlockStart);
+ margin-inline-start: var(--pf-v6-c-table__check--responsive--MarginInlineStart);
+ line-height: 1;
+ }
+ .pf-m-grid-lg.pf-v6-c-table .pf-v6-c-table__check ~ .pf-v6-c-table__favorite {
+ margin-inline-start: var(--pf-v6-c-table--m-grid__check--favorite--MarginInlineStart);
+ }
+ .pf-m-grid-lg.pf-v6-c-table .pf-v6-c-table__check ~ .pf-v6-c-table__favorite ~ .pf-v6-c-table__action {
+ margin-inline-start: var(--pf-v6-c-table--m-grid__check--favorite--action--MarginInlineStart);
+ }
+ .pf-m-grid-lg.pf-v6-c-table .pf-v6-c-table__check ~ .pf-v6-c-table__action {
+ margin-inline-start: var(--pf-v6-c-table__action--responsive--MarginInlineStart);
+ }
+ .pf-m-grid-lg.pf-v6-c-table .pf-v6-c-table__check label {
+ display: inline-block;
+ margin: 0;
+ }
+ .pf-m-grid-lg.pf-v6-c-table .pf-v6-c-table__favorite {
+ margin-block-start: var(--pf-v6-c-table--m-grid__favorite--MarginBlockStart);
+ }
+ .pf-m-grid-lg.pf-v6-c-table .pf-v6-c-table__favorite ~ .pf-v6-c-table__action {
+ margin-inline-start: var(--pf-v6-c-table--m-grid__favorite--action--MarginInlineStart);
+ }
+ .pf-m-grid-lg.pf-v6-c-table .pf-v6-c-table__action {
+ text-align: end;
+ }
+}
+@media screen and (max-width: calc(62rem - 1px)) and (max-width: 36rem) {
+ .pf-m-grid-lg.pf-v6-c-table .pf-v6-c-table__action {
+ grid-row-start: 1;
+ grid-column-start: 2;
+ margin-inline-start: 0;
+ }
+}
+@media screen and (max-width: calc(62rem - 1px)) {
+ .pf-m-grid-lg.pf-v6-c-table .pf-v6-c-table__inline-edit-action {
+ grid-column: 2;
+ grid-row: 2;
+ }
+ .pf-m-grid-lg.pf-v6-c-table .pf-v6-c-table__toggle-icon {
+ transition: var(--pf-v6-c-table__toggle__icon--Transition);
+ }
+ .pf-v6-c-button.pf-m-expanded > .pf-m-grid-lg.pf-v6-c-table .pf-v6-c-table__toggle-icon {
+ transform: rotate(var(--pf-v6-c-table__toggle--m-expanded__icon--Rotate));
+ }
+ .pf-m-grid-lg.pf-v6-c-table :where(.pf-v6-c-table, .pf-v6-c-table__thead, .pf-v6-c-table__tbody, .pf-v6-c-table__tr, .pf-v6-c-table__th, .pf-v6-c-table__td, .pf-v6-c-table__text).pf-m-nowrap {
+ --pf-v6-c-table--cell--Overflow: auto;
+ }
+ .pf-m-grid-lg.pf-v6-c-table :where(.pf-v6-c-table, .pf-v6-c-table__thead, .pf-v6-c-table__tbody, .pf-v6-c-table__tr, .pf-v6-c-table__th, .pf-v6-c-table__td, .pf-v6-c-table__text).pf-m-fit-content {
+ width: auto;
+ white-space: normal;
+ }
+ .pf-m-grid-lg.pf-v6-c-table :where(.pf-v6-c-table, .pf-v6-c-table__thead, .pf-v6-c-table__tbody, .pf-v6-c-table__tr, .pf-v6-c-table__th, .pf-v6-c-table__td, .pf-v6-c-table__text).pf-m-truncate {
+ --pf-v6-c-table--cell--MaxWidth: 100%;
+ }
+ .pf-m-grid-lg.pf-v6-c-table [class*=pf-m-width] {
+ --pf-v6-c-table--cell--Width: auto;
+ }
+}
+
+@media screen and (max-width: calc(75rem - 1px)) {
+ .pf-m-grid-xl.pf-v6-c-table {
+ --pf-v6-c-table--cell--PaddingBlockStart: var(--pf-v6-c-table--m-grid--cell--PaddingBlockStart);
+ --pf-v6-c-table--cell--PaddingInlineEnd: var(--pf-v6-c-table--m-grid--cell--PaddingInlineEnd);
+ --pf-v6-c-table--cell--PaddingBlockEnd: var(--pf-v6-c-table--m-grid--cell--PaddingBlockEnd);
+ --pf-v6-c-table--cell--PaddingInlineStart: var(--pf-v6-c-table--m-grid--cell--PaddingInlineStart);
+ --pf-v6-c-table--cell--first-last-child--PaddingInline: 0;
+ --pf-v6-c-table__favorite--c-button--MarginBlockStart: auto;
+ --pf-v6-c-table__favorite--c-button--MarginInlineEnd: auto;
+ --pf-v6-c-table__favorite--c-button--MarginBlockEnd: auto;
+ --pf-v6-c-table__favorite--c-button--MarginInlineStart: auto;
+ display: grid;
+ border: none;
+ }
+ .pf-m-grid-xl.pf-v6-c-table tr:where(.pf-v6-c-table__tr) > :where(th, td) {
+ width: auto;
+ min-width: 0;
+ max-width: none;
+ overflow: visible;
+ text-overflow: clip;
+ white-space: normal;
+ }
+ .pf-m-grid-xl.pf-v6-c-table .pf-v6-c-table__text {
+ position: relative;
+ width: auto;
+ min-width: 0;
+ max-width: none;
+ 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-m-grid-xl.pf-v6-c-table thead:where(.pf-v6-c-table__thead) {
+ display: none;
+ }
+ .pf-m-grid-xl.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody) {
+ display: block;
+ }
+ .pf-m-grid-xl.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody):first-of-type {
+ border-block-start: var(--pf-v6-c-table__tbody--responsive--border-width--base) solid var(--pf-v6-c-table--responsive--BorderColor);
+ }
+ .pf-m-grid-xl.pf-v6-c-table.pf-m-expandable {
+ --pf-v6-c-table__tr--BorderBlockEndWidth: 0;
+ }
+ .pf-m-grid-xl.pf-v6-c-table.pf-m-expandable .pf-v6-c-table__tbody,
+ .pf-m-grid-xl.pf-v6-c-table.pf-m-expandable .pf-v6-c-table__tbody.pf-m-expanded {
+ border-block-end: var(--pf-v6-c-table__tbody--responsive--m-expandable--BorderBlockEndWidth) solid var(--pf-v6-c-table--responsive--BorderColor);
+ }
+ .pf-m-grid-xl.pf-v6-c-table tr:where(.pf-v6-c-table__tr).pf-m-selected {
+ --pf-v6-c-table__expandable-row--after--BorderInlineStartWidth: 0;
+ --pf-v6-c-table__expandable-row--after--BorderColor: transparent;
+ }
+ .pf-m-grid-xl.pf-v6-c-table tr:where(.pf-v6-c-table__tr):not(.pf-v6-c-table__expandable-row) {
+ display: grid;
+ grid-template-columns: 1fr;
+ height: auto;
+ grid-auto-columns: max-content;
+ grid-column-gap: var(--pf-v6-c-table__tr--responsive--GridColumnGap);
+ padding-block-start: var(--pf-v6-c-table__tr--responsive--PaddingBlockStart);
+ padding-inline-end: var(--pf-v6-c-table__tr--responsive--PaddingInlineEnd);
+ padding-block-end: var(--pf-v6-c-table__tr--responsive--PaddingBlockEnd);
+ padding-inline-start: var(--pf-v6-c-table__tr--responsive--PaddingInlineStart);
+ }
+ .pf-m-grid-xl.pf-v6-c-table tr:where(.pf-v6-c-table__tr):not(.pf-v6-c-table__expandable-row) > :where(th, td) {
+ padding-block-start: var(--pf-v6-c-table--cell--responsive--PaddingBlockStart);
+ padding-inline-end: var(--pf-v6-c-table--cell--responsive--PaddingInlineEnd);
+ padding-block-end: var(--pf-v6-c-table--cell--responsive--PaddingBlockEnd);
+ padding-inline-start: var(--pf-v6-c-table--cell--responsive--PaddingInlineStart);
+ }
+ .pf-m-grid-xl.pf-v6-c-table tr:where(.pf-v6-c-table__tr):not(.pf-v6-c-table__expandable-row) > :where(th, td):first-child {
+ --pf-v6-c-table--cell--responsive--PaddingBlockStart: var(--pf-v6-c-table--cell--first-child--responsive--PaddingBlockStart);
+ }
+ .pf-m-grid-xl.pf-v6-c-table.pf-m-compact {
+ --pf-v6-c-table__tr--responsive--PaddingBlockStart: var(--pf-v6-c-table--m-compact__tr--responsive--PaddingBlockStart);
+ --pf-v6-c-table__tr--responsive--PaddingBlockEnd: var(--pf-v6-c-table--m-compact__tr--responsive--PaddingBlockEnd);
+ --pf-v6-c-table--cell--responsive--PaddingBlockStart: var(--pf-v6-c-table--m-compact__tr__td--responsive--PaddingBlockStart);
+ --pf-v6-c-table--cell--responsive--PaddingBlockEnd: var(--pf-v6-c-table--m-compact__tr__td--responsive--PaddingBlockEnd);
+ --pf-v6-c-table__check--responsive--MarginBlockStart: var(--pf-v6-c-table--m-compact__check--responsive--MarginBlockStart);
+ --pf-v6-c-table__check--input--MarginBlockStart: 0;
+ }
+ .pf-m-grid-xl.pf-v6-c-table.pf-m-compact .pf-v6-c-table__action {
+ margin-block-start: var(--pf-v6-c-table--m-compact__action--responsive--MarginBlockStart);
+ margin-block-end: var(--pf-v6-c-table--m-compact__action--responsive--MarginBlockStart);
+ }
+ .pf-m-grid-xl.pf-v6-c-table.pf-m-compact .pf-v6-c-table__toggle .pf-v6-c-button {
+ margin-block-end: var(--pf-v6-c-table--m-compact__toggle--c-button--responsive--MarginBlockEnd);
+ }
+ .pf-m-grid-xl.pf-v6-c-table .pf-v6-c-table__icon > * {
+ text-align: start;
+ }
+ .pf-m-grid-xl.pf-v6-c-table :where(.pf-v6-c-table__th, .pf-v6-c-table__td)[data-label] {
+ --pf-v6-c-table--cell--hidden-visible--Display: var(--pf-v6-c-table--m-grid--cell--hidden-visible--Display);
+ grid-column: 1;
+ grid-column-gap: var(--pf-v6-c-table-td--responsive--GridColumnGap);
+ grid-template-columns: 1fr minmax(0, 1.5fr);
+ align-items: start;
+ }
+ .pf-m-grid-xl.pf-v6-c-table :where(.pf-v6-c-table__th, .pf-v6-c-table__td)[data-label].pf-m-action {
+ align-items: center;
+ }
+ .pf-m-grid-xl.pf-v6-c-table :where(.pf-v6-c-table__th, .pf-v6-c-table__td)[data-label] > * {
+ grid-column: 2;
+ }
+ .pf-m-grid-xl.pf-v6-c-table :where(.pf-v6-c-table__th, .pf-v6-c-table__td)[data-label]::before {
+ position: revert;
+ font-weight: var(--pf-v6-c-table--cell--responsive--th--FontWeight);
+ text-align: start;
+ content: attr(data-label);
+ }
+ .pf-m-grid-xl.pf-v6-c-table tr:where(.pf-v6-c-table__tr) > :where(th, td):first-child {
+ --pf-v6-c-table--cell--PaddingInlineStart: 0;
+ }
+ .pf-m-grid-xl.pf-v6-c-table tr:where(.pf-v6-c-table__tr) > :where(th, td):last-child {
+ --pf-v6-c-table--cell--PaddingInlineEnd: 0;
+ }
+ .pf-m-grid-xl.pf-v6-c-table .pf-v6-c-table {
+ --pf-v6-c-table__tr--responsive--PaddingBlockStart: var(--pf-v6-c-table__tr--responsive--nested-table--PaddingBlockStart);
+ --pf-v6-c-table__tr--responsive--PaddingInlineEnd: var(--pf-v6-c-table__tr--responsive--nested-table--PaddingInlineEnd);
+ --pf-v6-c-table__tr--responsive--PaddingBlockEnd: var(--pf-v6-c-table__tr--responsive--nested-table--PaddingBlockEnd);
+ --pf-v6-c-table__tr--responsive--PaddingInlineStart: var(--pf-v6-c-table__tr--responsive--nested-table--PaddingInlineStart);
+ border: 0;
+ }
+ .pf-m-grid-xl.pf-v6-c-table .pf-v6-c-table__compound-expansion-toggle {
+ --pf-v6-c-table__compound-expansion-toggle__button--before--BorderInlineEndWidth: 0;
+ --pf-v6-c-table__compound-expansion-toggle__button--before--BorderInlineStartWidth: 0;
+ --pf-v6-c-table__compound-expansion-toggle__button--after--InsetBlockStart: 100%;
+ }
+ .pf-m-grid-xl.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody) {
+ position: relative;
+ }
+ .pf-m-grid-xl.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody)::after {
+ position: absolute;
+ inset-block-start: 0;
+ inset-block-end: 0;
+ inset-inline-start: 0;
+ content: "";
+ border: 0;
+ border-inline-start: var(--pf-v6-c-table__tbody--after--BorderInlineStartWidth) solid var(--pf-v6-c-table__tbody--after--BorderColor);
+ }
+ .pf-m-grid-xl.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody).pf-m-expanded {
+ --pf-v6-c-table__tbody--after--BorderInlineStartWidth: var(--pf-v6-c-table__tbody--after--border-width--base);
+ }
+ .pf-m-grid-xl.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody).pf-m-expanded tbody:where(.pf-v6-c-table__tbody) {
+ --pf-v6-c-table__tbody--after--BorderInlineStartWidth: 0;
+ }
+ .pf-m-grid-xl.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody) > tr:where(.pf-v6-c-table__tr) > :first-child:not(.pf-v6-c-table__check)::after {
+ --pf-v6-c-table__expandable-row--after--BorderInlineStartWidth: 0;
+ position: static;
+ width: auto;
+ background-color: transparent;
+ }
+ .pf-m-grid-xl.pf-v6-c-table .pf-v6-c-table__expandable-row {
+ --pf-v6-c-table--cell--responsive--PaddingBlockStart: 0;
+ --pf-v6-c-table--cell--responsive--PaddingInlineEnd: 0;
+ --pf-v6-c-table--cell--responsive--PaddingBlockEnd: 0;
+ --pf-v6-c-table--cell--responsive--PaddingInlineStart: 0;
+ --pf-v6-c-table--cell--PaddingInlineEnd: 0;
+ --pf-v6-c-table--cell--PaddingInlineStart: 0;
+ display: block;
+ max-height: var(--pf-v6-c-table__expandable-row--MaxHeight);
+ overflow-y: auto;
+ border-block-end: none;
+ }
+ .pf-m-grid-xl.pf-v6-c-table .pf-v6-c-table__expandable-row > :where(th, td) {
+ position: static;
+ display: block;
+ }
+ .pf-m-grid-xl.pf-v6-c-table .pf-v6-c-table__expandable-row.pf-m-expanded {
+ border-block-start-color: var(--pf-v6-c-table--BorderColor);
+ }
+ .pf-m-grid-xl.pf-v6-c-table .pf-v6-c-table__expandable-row > :first-child:not(.pf-v6-c-table__check)::after {
+ content: none;
+ }
+ .pf-m-grid-xl.pf-v6-c-table .pf-v6-c-table__expandable-row th:where(.pf-v6-c-table__th).pf-m-no-padding .pf-v6-c-table__expandable-row-content,
+ .pf-m-grid-xl.pf-v6-c-table .pf-v6-c-table__expandable-row td:where(.pf-v6-c-table__td).pf-m-no-padding .pf-v6-c-table__expandable-row-content {
+ padding: 0;
+ }
+ .pf-m-grid-xl.pf-v6-c-table .pf-v6-c-table__expandable-row:not(.pf-m-expanded) {
+ display: none;
+ }
+ .pf-m-grid-xl.pf-v6-c-table .pf-v6-c-table__expandable-row .pf-v6-c-table__expandable-row-content {
+ padding-inline-end: var(--pf-v6-c-table__expandable-row-content--responsive--PaddingInlineEnd);
+ padding-inline-start: var(--pf-v6-c-table__expandable-row-content--responsive--PaddingInlineStart);
+ }
+ .pf-m-grid-xl.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody).pf-m-hoverable {
+ --pf-v6-c-table__tbody--after--BorderInlineStartWidth: 0;
+ --pf-v6-c-table__tbody--after--BorderInlineStartColor: transparent;
+ }
+ .pf-m-grid-xl.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody).pf-m-hoverable,
+ .pf-m-grid-xl.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody).pf-m-hoverable > tr:where(.pf-v6-c-table__tr) {
+ position: relative;
+ }
+ .pf-m-grid-xl.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody).pf-m-hoverable > tr:where(.pf-v6-c-table__tr)::after {
+ content: "";
+ position: absolute;
+ inset-block-start: 0;
+ inset-block-end: 0;
+ inset-inline-start: 0;
+ width: var(--pf-v6-c-table__tbody--after__tr--BorderInlineStartWidth);
+ background-color: var(--pf-v6-c-table__tbody--after__tr--BorderInlineStartColor);
+ }
+ .pf-m-grid-xl.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody).pf-m-hoverable.pf-m-expanded {
+ --pf-v6-c-table__tbody--after__tr--BorderInlineStartWidth: var(--pf-v6-c-table__tbody--m-expanded--after__tr--BorderInlineStartWidth);
+ --pf-v6-c-table__tbody--after__tr--BorderInlineStartColor: var(--pf-v6-c-table__tbody--m-expanded--after__tr--BorderInlineStartColor);
+ }
+ .pf-m-grid-xl.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody).pf-m-hoverable.pf-m-selected {
+ --pf-v6-c-table__tbody--after__tr--BorderInlineStartWidth: var(--pf-v6-c-table__tbody--m-selected--after__tr--BorderInlineStartWidth);
+ --pf-v6-c-table__tbody--after__tr--BorderInlineStartColor: var(--pf-v6-c-table__tbody--m-selected--after__tr--BorderInlineStartColor);
+ }
+ .pf-m-grid-xl.pf-v6-c-table tr:where(.pf-v6-c-table__tr).pf-m-selected::after {
+ content: "";
+ position: absolute;
+ inset-block-start: 0;
+ inset-block-end: 0;
+ inset-inline-start: 0;
+ width: var(--pf-v6-c-table__tr--m-selected--after--BorderInlineStartWidth);
+ background-color: var(--pf-v6-c-table__tr--m-selected--after--BorderInlineStartColor);
+ }
+ .pf-m-grid-xl.pf-v6-c-table tr:where(.pf-v6-c-table__tr):not(.pf-v6-c-table__expandable-row) .pf-v6-c-table__toggle,
+ .pf-m-grid-xl.pf-v6-c-table tr:where(.pf-v6-c-table__tr):not(.pf-v6-c-table__expandable-row) .pf-v6-c-table__check,
+ .pf-m-grid-xl.pf-v6-c-table tr:where(.pf-v6-c-table__tr):not(.pf-v6-c-table__expandable-row) .pf-v6-c-table__favorite,
+ .pf-m-grid-xl.pf-v6-c-table tr:where(.pf-v6-c-table__tr):not(.pf-v6-c-table__expandable-row) .pf-v6-c-table__action {
+ width: auto;
+ padding: 0;
+ }
+ .pf-m-grid-xl.pf-v6-c-table .pf-v6-c-table__toggle {
+ grid-row-start: 20;
+ grid-column: -1;
+ justify-self: end;
+ padding-inline-end: 0;
+ }
+ .pf-m-grid-xl.pf-v6-c-table .pf-v6-c-table__toggle::after {
+ content: none;
+ }
+ .pf-m-grid-xl.pf-v6-c-table .pf-v6-c-table__button {
+ --pf-v6-c-table--cell--PaddingBlockStart: var(--pf-v6-c-table--m-grid--cell--PaddingBlockStart);
+ --pf-v6-c-table--cell--PaddingInlineEnd: var(--pf-v6-c-table--m-grid--cell--PaddingInlineEnd);
+ --pf-v6-c-table--cell--PaddingBlockEnd: var(--pf-v6-c-table--m-grid--cell--PaddingBlockEnd);
+ --pf-v6-c-table--cell--PaddingInlineStart: var(--pf-v6-c-table--m-grid--cell--PaddingInlineStart);
+ }
+ .pf-m-grid-xl.pf-v6-c-table .pf-v6-c-table__check,
+ .pf-m-grid-xl.pf-v6-c-table .pf-v6-c-table__favorite,
+ .pf-m-grid-xl.pf-v6-c-table .pf-v6-c-table__action {
+ grid-row-start: 1;
+ grid-column-start: 2;
+ }
+ .pf-m-grid-xl.pf-v6-c-table .pf-v6-c-table__check {
+ margin-block-start: var(--pf-v6-c-table__check--responsive--MarginBlockStart);
+ margin-inline-start: var(--pf-v6-c-table__check--responsive--MarginInlineStart);
+ line-height: 1;
+ }
+ .pf-m-grid-xl.pf-v6-c-table .pf-v6-c-table__check ~ .pf-v6-c-table__favorite {
+ margin-inline-start: var(--pf-v6-c-table--m-grid__check--favorite--MarginInlineStart);
+ }
+ .pf-m-grid-xl.pf-v6-c-table .pf-v6-c-table__check ~ .pf-v6-c-table__favorite ~ .pf-v6-c-table__action {
+ margin-inline-start: var(--pf-v6-c-table--m-grid__check--favorite--action--MarginInlineStart);
+ }
+ .pf-m-grid-xl.pf-v6-c-table .pf-v6-c-table__check ~ .pf-v6-c-table__action {
+ margin-inline-start: var(--pf-v6-c-table__action--responsive--MarginInlineStart);
+ }
+ .pf-m-grid-xl.pf-v6-c-table .pf-v6-c-table__check label {
+ display: inline-block;
+ margin: 0;
+ }
+ .pf-m-grid-xl.pf-v6-c-table .pf-v6-c-table__favorite {
+ margin-block-start: var(--pf-v6-c-table--m-grid__favorite--MarginBlockStart);
+ }
+ .pf-m-grid-xl.pf-v6-c-table .pf-v6-c-table__favorite ~ .pf-v6-c-table__action {
+ margin-inline-start: var(--pf-v6-c-table--m-grid__favorite--action--MarginInlineStart);
+ }
+ .pf-m-grid-xl.pf-v6-c-table .pf-v6-c-table__action {
+ text-align: end;
+ }
+}
+@media screen and (max-width: calc(75rem - 1px)) and (max-width: 36rem) {
+ .pf-m-grid-xl.pf-v6-c-table .pf-v6-c-table__action {
+ grid-row-start: 1;
+ grid-column-start: 2;
+ margin-inline-start: 0;
+ }
+}
+@media screen and (max-width: calc(75rem - 1px)) {
+ .pf-m-grid-xl.pf-v6-c-table .pf-v6-c-table__inline-edit-action {
+ grid-column: 2;
+ grid-row: 2;
+ }
+ .pf-m-grid-xl.pf-v6-c-table .pf-v6-c-table__toggle-icon {
+ transition: var(--pf-v6-c-table__toggle__icon--Transition);
+ }
+ .pf-v6-c-button.pf-m-expanded > .pf-m-grid-xl.pf-v6-c-table .pf-v6-c-table__toggle-icon {
+ transform: rotate(var(--pf-v6-c-table__toggle--m-expanded__icon--Rotate));
+ }
+ .pf-m-grid-xl.pf-v6-c-table :where(.pf-v6-c-table, .pf-v6-c-table__thead, .pf-v6-c-table__tbody, .pf-v6-c-table__tr, .pf-v6-c-table__th, .pf-v6-c-table__td, .pf-v6-c-table__text).pf-m-nowrap {
+ --pf-v6-c-table--cell--Overflow: auto;
+ }
+ .pf-m-grid-xl.pf-v6-c-table :where(.pf-v6-c-table, .pf-v6-c-table__thead, .pf-v6-c-table__tbody, .pf-v6-c-table__tr, .pf-v6-c-table__th, .pf-v6-c-table__td, .pf-v6-c-table__text).pf-m-fit-content {
+ width: auto;
+ white-space: normal;
+ }
+ .pf-m-grid-xl.pf-v6-c-table :where(.pf-v6-c-table, .pf-v6-c-table__thead, .pf-v6-c-table__tbody, .pf-v6-c-table__tr, .pf-v6-c-table__th, .pf-v6-c-table__td, .pf-v6-c-table__text).pf-m-truncate {
+ --pf-v6-c-table--cell--MaxWidth: 100%;
+ }
+ .pf-m-grid-xl.pf-v6-c-table [class*=pf-m-width] {
+ --pf-v6-c-table--cell--Width: auto;
+ }
+}
+
+@media screen and (max-width: calc(90.625rem - 1px)) {
+ .pf-m-grid-2xl.pf-v6-c-table {
+ --pf-v6-c-table--cell--PaddingBlockStart: var(--pf-v6-c-table--m-grid--cell--PaddingBlockStart);
+ --pf-v6-c-table--cell--PaddingInlineEnd: var(--pf-v6-c-table--m-grid--cell--PaddingInlineEnd);
+ --pf-v6-c-table--cell--PaddingBlockEnd: var(--pf-v6-c-table--m-grid--cell--PaddingBlockEnd);
+ --pf-v6-c-table--cell--PaddingInlineStart: var(--pf-v6-c-table--m-grid--cell--PaddingInlineStart);
+ --pf-v6-c-table--cell--first-last-child--PaddingInline: 0;
+ --pf-v6-c-table__favorite--c-button--MarginBlockStart: auto;
+ --pf-v6-c-table__favorite--c-button--MarginInlineEnd: auto;
+ --pf-v6-c-table__favorite--c-button--MarginBlockEnd: auto;
+ --pf-v6-c-table__favorite--c-button--MarginInlineStart: auto;
+ display: grid;
+ border: none;
+ }
+ .pf-m-grid-2xl.pf-v6-c-table tr:where(.pf-v6-c-table__tr) > :where(th, td) {
+ width: auto;
+ min-width: 0;
+ max-width: none;
+ overflow: visible;
+ text-overflow: clip;
+ white-space: normal;
+ }
+ .pf-m-grid-2xl.pf-v6-c-table .pf-v6-c-table__text {
+ position: relative;
+ width: auto;
+ min-width: 0;
+ max-width: none;
+ 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-m-grid-2xl.pf-v6-c-table thead:where(.pf-v6-c-table__thead) {
+ display: none;
+ }
+ .pf-m-grid-2xl.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody) {
+ display: block;
+ }
+ .pf-m-grid-2xl.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody):first-of-type {
+ border-block-start: var(--pf-v6-c-table__tbody--responsive--border-width--base) solid var(--pf-v6-c-table--responsive--BorderColor);
+ }
+ .pf-m-grid-2xl.pf-v6-c-table.pf-m-expandable {
+ --pf-v6-c-table__tr--BorderBlockEndWidth: 0;
+ }
+ .pf-m-grid-2xl.pf-v6-c-table.pf-m-expandable .pf-v6-c-table__tbody,
+ .pf-m-grid-2xl.pf-v6-c-table.pf-m-expandable .pf-v6-c-table__tbody.pf-m-expanded {
+ border-block-end: var(--pf-v6-c-table__tbody--responsive--m-expandable--BorderBlockEndWidth) solid var(--pf-v6-c-table--responsive--BorderColor);
+ }
+ .pf-m-grid-2xl.pf-v6-c-table tr:where(.pf-v6-c-table__tr).pf-m-selected {
+ --pf-v6-c-table__expandable-row--after--BorderInlineStartWidth: 0;
+ --pf-v6-c-table__expandable-row--after--BorderColor: transparent;
+ }
+ .pf-m-grid-2xl.pf-v6-c-table tr:where(.pf-v6-c-table__tr):not(.pf-v6-c-table__expandable-row) {
+ display: grid;
+ grid-template-columns: 1fr;
+ height: auto;
+ grid-auto-columns: max-content;
+ grid-column-gap: var(--pf-v6-c-table__tr--responsive--GridColumnGap);
+ padding-block-start: var(--pf-v6-c-table__tr--responsive--PaddingBlockStart);
+ padding-inline-end: var(--pf-v6-c-table__tr--responsive--PaddingInlineEnd);
+ padding-block-end: var(--pf-v6-c-table__tr--responsive--PaddingBlockEnd);
+ padding-inline-start: var(--pf-v6-c-table__tr--responsive--PaddingInlineStart);
+ }
+ .pf-m-grid-2xl.pf-v6-c-table tr:where(.pf-v6-c-table__tr):not(.pf-v6-c-table__expandable-row) > :where(th, td) {
+ padding-block-start: var(--pf-v6-c-table--cell--responsive--PaddingBlockStart);
+ padding-inline-end: var(--pf-v6-c-table--cell--responsive--PaddingInlineEnd);
+ padding-block-end: var(--pf-v6-c-table--cell--responsive--PaddingBlockEnd);
+ padding-inline-start: var(--pf-v6-c-table--cell--responsive--PaddingInlineStart);
+ }
+ .pf-m-grid-2xl.pf-v6-c-table tr:where(.pf-v6-c-table__tr):not(.pf-v6-c-table__expandable-row) > :where(th, td):first-child {
+ --pf-v6-c-table--cell--responsive--PaddingBlockStart: var(--pf-v6-c-table--cell--first-child--responsive--PaddingBlockStart);
+ }
+ .pf-m-grid-2xl.pf-v6-c-table.pf-m-compact {
+ --pf-v6-c-table__tr--responsive--PaddingBlockStart: var(--pf-v6-c-table--m-compact__tr--responsive--PaddingBlockStart);
+ --pf-v6-c-table__tr--responsive--PaddingBlockEnd: var(--pf-v6-c-table--m-compact__tr--responsive--PaddingBlockEnd);
+ --pf-v6-c-table--cell--responsive--PaddingBlockStart: var(--pf-v6-c-table--m-compact__tr__td--responsive--PaddingBlockStart);
+ --pf-v6-c-table--cell--responsive--PaddingBlockEnd: var(--pf-v6-c-table--m-compact__tr__td--responsive--PaddingBlockEnd);
+ --pf-v6-c-table__check--responsive--MarginBlockStart: var(--pf-v6-c-table--m-compact__check--responsive--MarginBlockStart);
+ --pf-v6-c-table__check--input--MarginBlockStart: 0;
+ }
+ .pf-m-grid-2xl.pf-v6-c-table.pf-m-compact .pf-v6-c-table__action {
+ margin-block-start: var(--pf-v6-c-table--m-compact__action--responsive--MarginBlockStart);
+ margin-block-end: var(--pf-v6-c-table--m-compact__action--responsive--MarginBlockStart);
+ }
+ .pf-m-grid-2xl.pf-v6-c-table.pf-m-compact .pf-v6-c-table__toggle .pf-v6-c-button {
+ margin-block-end: var(--pf-v6-c-table--m-compact__toggle--c-button--responsive--MarginBlockEnd);
+ }
+ .pf-m-grid-2xl.pf-v6-c-table .pf-v6-c-table__icon > * {
+ text-align: start;
+ }
+ .pf-m-grid-2xl.pf-v6-c-table :where(.pf-v6-c-table__th, .pf-v6-c-table__td)[data-label] {
+ --pf-v6-c-table--cell--hidden-visible--Display: var(--pf-v6-c-table--m-grid--cell--hidden-visible--Display);
+ grid-column: 1;
+ grid-column-gap: var(--pf-v6-c-table-td--responsive--GridColumnGap);
+ grid-template-columns: 1fr minmax(0, 1.5fr);
+ align-items: start;
+ }
+ .pf-m-grid-2xl.pf-v6-c-table :where(.pf-v6-c-table__th, .pf-v6-c-table__td)[data-label].pf-m-action {
+ align-items: center;
+ }
+ .pf-m-grid-2xl.pf-v6-c-table :where(.pf-v6-c-table__th, .pf-v6-c-table__td)[data-label] > * {
+ grid-column: 2;
+ }
+ .pf-m-grid-2xl.pf-v6-c-table :where(.pf-v6-c-table__th, .pf-v6-c-table__td)[data-label]::before {
+ position: revert;
+ font-weight: var(--pf-v6-c-table--cell--responsive--th--FontWeight);
+ text-align: start;
+ content: attr(data-label);
+ }
+ .pf-m-grid-2xl.pf-v6-c-table tr:where(.pf-v6-c-table__tr) > :where(th, td):first-child {
+ --pf-v6-c-table--cell--PaddingInlineStart: 0;
+ }
+ .pf-m-grid-2xl.pf-v6-c-table tr:where(.pf-v6-c-table__tr) > :where(th, td):last-child {
+ --pf-v6-c-table--cell--PaddingInlineEnd: 0;
+ }
+ .pf-m-grid-2xl.pf-v6-c-table .pf-v6-c-table {
+ --pf-v6-c-table__tr--responsive--PaddingBlockStart: var(--pf-v6-c-table__tr--responsive--nested-table--PaddingBlockStart);
+ --pf-v6-c-table__tr--responsive--PaddingInlineEnd: var(--pf-v6-c-table__tr--responsive--nested-table--PaddingInlineEnd);
+ --pf-v6-c-table__tr--responsive--PaddingBlockEnd: var(--pf-v6-c-table__tr--responsive--nested-table--PaddingBlockEnd);
+ --pf-v6-c-table__tr--responsive--PaddingInlineStart: var(--pf-v6-c-table__tr--responsive--nested-table--PaddingInlineStart);
+ border: 0;
+ }
+ .pf-m-grid-2xl.pf-v6-c-table .pf-v6-c-table__compound-expansion-toggle {
+ --pf-v6-c-table__compound-expansion-toggle__button--before--BorderInlineEndWidth: 0;
+ --pf-v6-c-table__compound-expansion-toggle__button--before--BorderInlineStartWidth: 0;
+ --pf-v6-c-table__compound-expansion-toggle__button--after--InsetBlockStart: 100%;
+ }
+ .pf-m-grid-2xl.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody) {
+ position: relative;
+ }
+ .pf-m-grid-2xl.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody)::after {
+ position: absolute;
+ inset-block-start: 0;
+ inset-block-end: 0;
+ inset-inline-start: 0;
+ content: "";
+ border: 0;
+ border-inline-start: var(--pf-v6-c-table__tbody--after--BorderInlineStartWidth) solid var(--pf-v6-c-table__tbody--after--BorderColor);
+ }
+ .pf-m-grid-2xl.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody).pf-m-expanded {
+ --pf-v6-c-table__tbody--after--BorderInlineStartWidth: var(--pf-v6-c-table__tbody--after--border-width--base);
+ }
+ .pf-m-grid-2xl.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody).pf-m-expanded tbody:where(.pf-v6-c-table__tbody) {
+ --pf-v6-c-table__tbody--after--BorderInlineStartWidth: 0;
+ }
+ .pf-m-grid-2xl.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody) > tr:where(.pf-v6-c-table__tr) > :first-child:not(.pf-v6-c-table__check)::after {
+ --pf-v6-c-table__expandable-row--after--BorderInlineStartWidth: 0;
+ position: static;
+ width: auto;
+ background-color: transparent;
+ }
+ .pf-m-grid-2xl.pf-v6-c-table .pf-v6-c-table__expandable-row {
+ --pf-v6-c-table--cell--responsive--PaddingBlockStart: 0;
+ --pf-v6-c-table--cell--responsive--PaddingInlineEnd: 0;
+ --pf-v6-c-table--cell--responsive--PaddingBlockEnd: 0;
+ --pf-v6-c-table--cell--responsive--PaddingInlineStart: 0;
+ --pf-v6-c-table--cell--PaddingInlineEnd: 0;
+ --pf-v6-c-table--cell--PaddingInlineStart: 0;
+ display: block;
+ max-height: var(--pf-v6-c-table__expandable-row--MaxHeight);
+ overflow-y: auto;
+ border-block-end: none;
+ }
+ .pf-m-grid-2xl.pf-v6-c-table .pf-v6-c-table__expandable-row > :where(th, td) {
+ position: static;
+ display: block;
+ }
+ .pf-m-grid-2xl.pf-v6-c-table .pf-v6-c-table__expandable-row.pf-m-expanded {
+ border-block-start-color: var(--pf-v6-c-table--BorderColor);
+ }
+ .pf-m-grid-2xl.pf-v6-c-table .pf-v6-c-table__expandable-row > :first-child:not(.pf-v6-c-table__check)::after {
+ content: none;
+ }
+ .pf-m-grid-2xl.pf-v6-c-table .pf-v6-c-table__expandable-row th:where(.pf-v6-c-table__th).pf-m-no-padding .pf-v6-c-table__expandable-row-content,
+ .pf-m-grid-2xl.pf-v6-c-table .pf-v6-c-table__expandable-row td:where(.pf-v6-c-table__td).pf-m-no-padding .pf-v6-c-table__expandable-row-content {
+ padding: 0;
+ }
+ .pf-m-grid-2xl.pf-v6-c-table .pf-v6-c-table__expandable-row:not(.pf-m-expanded) {
+ display: none;
+ }
+ .pf-m-grid-2xl.pf-v6-c-table .pf-v6-c-table__expandable-row .pf-v6-c-table__expandable-row-content {
+ padding-inline-end: var(--pf-v6-c-table__expandable-row-content--responsive--PaddingInlineEnd);
+ padding-inline-start: var(--pf-v6-c-table__expandable-row-content--responsive--PaddingInlineStart);
+ }
+ .pf-m-grid-2xl.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody).pf-m-hoverable {
+ --pf-v6-c-table__tbody--after--BorderInlineStartWidth: 0;
+ --pf-v6-c-table__tbody--after--BorderInlineStartColor: transparent;
+ }
+ .pf-m-grid-2xl.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody).pf-m-hoverable,
+ .pf-m-grid-2xl.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody).pf-m-hoverable > tr:where(.pf-v6-c-table__tr) {
+ position: relative;
+ }
+ .pf-m-grid-2xl.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody).pf-m-hoverable > tr:where(.pf-v6-c-table__tr)::after {
+ content: "";
+ position: absolute;
+ inset-block-start: 0;
+ inset-block-end: 0;
+ inset-inline-start: 0;
+ width: var(--pf-v6-c-table__tbody--after__tr--BorderInlineStartWidth);
+ background-color: var(--pf-v6-c-table__tbody--after__tr--BorderInlineStartColor);
+ }
+ .pf-m-grid-2xl.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody).pf-m-hoverable.pf-m-expanded {
+ --pf-v6-c-table__tbody--after__tr--BorderInlineStartWidth: var(--pf-v6-c-table__tbody--m-expanded--after__tr--BorderInlineStartWidth);
+ --pf-v6-c-table__tbody--after__tr--BorderInlineStartColor: var(--pf-v6-c-table__tbody--m-expanded--after__tr--BorderInlineStartColor);
+ }
+ .pf-m-grid-2xl.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody).pf-m-hoverable.pf-m-selected {
+ --pf-v6-c-table__tbody--after__tr--BorderInlineStartWidth: var(--pf-v6-c-table__tbody--m-selected--after__tr--BorderInlineStartWidth);
+ --pf-v6-c-table__tbody--after__tr--BorderInlineStartColor: var(--pf-v6-c-table__tbody--m-selected--after__tr--BorderInlineStartColor);
+ }
+ .pf-m-grid-2xl.pf-v6-c-table tr:where(.pf-v6-c-table__tr).pf-m-selected::after {
+ content: "";
+ position: absolute;
+ inset-block-start: 0;
+ inset-block-end: 0;
+ inset-inline-start: 0;
+ width: var(--pf-v6-c-table__tr--m-selected--after--BorderInlineStartWidth);
+ background-color: var(--pf-v6-c-table__tr--m-selected--after--BorderInlineStartColor);
+ }
+ .pf-m-grid-2xl.pf-v6-c-table tr:where(.pf-v6-c-table__tr):not(.pf-v6-c-table__expandable-row) .pf-v6-c-table__toggle,
+ .pf-m-grid-2xl.pf-v6-c-table tr:where(.pf-v6-c-table__tr):not(.pf-v6-c-table__expandable-row) .pf-v6-c-table__check,
+ .pf-m-grid-2xl.pf-v6-c-table tr:where(.pf-v6-c-table__tr):not(.pf-v6-c-table__expandable-row) .pf-v6-c-table__favorite,
+ .pf-m-grid-2xl.pf-v6-c-table tr:where(.pf-v6-c-table__tr):not(.pf-v6-c-table__expandable-row) .pf-v6-c-table__action {
+ width: auto;
+ padding: 0;
+ }
+ .pf-m-grid-2xl.pf-v6-c-table .pf-v6-c-table__toggle {
+ grid-row-start: 20;
+ grid-column: -1;
+ justify-self: end;
+ padding-inline-end: 0;
+ }
+ .pf-m-grid-2xl.pf-v6-c-table .pf-v6-c-table__toggle::after {
+ content: none;
+ }
+ .pf-m-grid-2xl.pf-v6-c-table .pf-v6-c-table__button {
+ --pf-v6-c-table--cell--PaddingBlockStart: var(--pf-v6-c-table--m-grid--cell--PaddingBlockStart);
+ --pf-v6-c-table--cell--PaddingInlineEnd: var(--pf-v6-c-table--m-grid--cell--PaddingInlineEnd);
+ --pf-v6-c-table--cell--PaddingBlockEnd: var(--pf-v6-c-table--m-grid--cell--PaddingBlockEnd);
+ --pf-v6-c-table--cell--PaddingInlineStart: var(--pf-v6-c-table--m-grid--cell--PaddingInlineStart);
+ }
+ .pf-m-grid-2xl.pf-v6-c-table .pf-v6-c-table__check,
+ .pf-m-grid-2xl.pf-v6-c-table .pf-v6-c-table__favorite,
+ .pf-m-grid-2xl.pf-v6-c-table .pf-v6-c-table__action {
+ grid-row-start: 1;
+ grid-column-start: 2;
+ }
+ .pf-m-grid-2xl.pf-v6-c-table .pf-v6-c-table__check {
+ margin-block-start: var(--pf-v6-c-table__check--responsive--MarginBlockStart);
+ margin-inline-start: var(--pf-v6-c-table__check--responsive--MarginInlineStart);
+ line-height: 1;
+ }
+ .pf-m-grid-2xl.pf-v6-c-table .pf-v6-c-table__check ~ .pf-v6-c-table__favorite {
+ margin-inline-start: var(--pf-v6-c-table--m-grid__check--favorite--MarginInlineStart);
+ }
+ .pf-m-grid-2xl.pf-v6-c-table .pf-v6-c-table__check ~ .pf-v6-c-table__favorite ~ .pf-v6-c-table__action {
+ margin-inline-start: var(--pf-v6-c-table--m-grid__check--favorite--action--MarginInlineStart);
+ }
+ .pf-m-grid-2xl.pf-v6-c-table .pf-v6-c-table__check ~ .pf-v6-c-table__action {
+ margin-inline-start: var(--pf-v6-c-table__action--responsive--MarginInlineStart);
+ }
+ .pf-m-grid-2xl.pf-v6-c-table .pf-v6-c-table__check label {
+ display: inline-block;
+ margin: 0;
+ }
+ .pf-m-grid-2xl.pf-v6-c-table .pf-v6-c-table__favorite {
+ margin-block-start: var(--pf-v6-c-table--m-grid__favorite--MarginBlockStart);
+ }
+ .pf-m-grid-2xl.pf-v6-c-table .pf-v6-c-table__favorite ~ .pf-v6-c-table__action {
+ margin-inline-start: var(--pf-v6-c-table--m-grid__favorite--action--MarginInlineStart);
+ }
+ .pf-m-grid-2xl.pf-v6-c-table .pf-v6-c-table__action {
+ text-align: end;
+ }
+}
+@media screen and (max-width: calc(90.625rem - 1px)) and (max-width: 36rem) {
+ .pf-m-grid-2xl.pf-v6-c-table .pf-v6-c-table__action {
+ grid-row-start: 1;
+ grid-column-start: 2;
+ margin-inline-start: 0;
+ }
+}
+@media screen and (max-width: calc(90.625rem - 1px)) {
+ .pf-m-grid-2xl.pf-v6-c-table .pf-v6-c-table__inline-edit-action {
+ grid-column: 2;
+ grid-row: 2;
+ }
+ .pf-m-grid-2xl.pf-v6-c-table .pf-v6-c-table__toggle-icon {
+ transition: var(--pf-v6-c-table__toggle__icon--Transition);
+ }
+ .pf-v6-c-button.pf-m-expanded > .pf-m-grid-2xl.pf-v6-c-table .pf-v6-c-table__toggle-icon {
+ transform: rotate(var(--pf-v6-c-table__toggle--m-expanded__icon--Rotate));
+ }
+ .pf-m-grid-2xl.pf-v6-c-table :where(.pf-v6-c-table, .pf-v6-c-table__thead, .pf-v6-c-table__tbody, .pf-v6-c-table__tr, .pf-v6-c-table__th, .pf-v6-c-table__td, .pf-v6-c-table__text).pf-m-nowrap {
+ --pf-v6-c-table--cell--Overflow: auto;
+ }
+ .pf-m-grid-2xl.pf-v6-c-table :where(.pf-v6-c-table, .pf-v6-c-table__thead, .pf-v6-c-table__tbody, .pf-v6-c-table__tr, .pf-v6-c-table__th, .pf-v6-c-table__td, .pf-v6-c-table__text).pf-m-fit-content {
+ width: auto;
+ white-space: normal;
+ }
+ .pf-m-grid-2xl.pf-v6-c-table :where(.pf-v6-c-table, .pf-v6-c-table__thead, .pf-v6-c-table__tbody, .pf-v6-c-table__tr, .pf-v6-c-table__th, .pf-v6-c-table__td, .pf-v6-c-table__text).pf-m-truncate {
+ --pf-v6-c-table--cell--MaxWidth: 100%;
+ }
+ .pf-m-grid-2xl.pf-v6-c-table [class*=pf-m-width] {
+ --pf-v6-c-table--cell--Width: auto;
+ }
+}
+
+.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--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
+ --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: 270deg;
+ --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: 360deg;
+ --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--BorderRadius: var(--pf-t--global--border--radius--small);
+ --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;
+ --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__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: var(--pf-t--global--background--color--action--plain--default);
+ --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--action--plain--hover);
+ --pf-v6-c-table__compound-expansion-toggle__button--expanded--BackgroundColor: var(--pf-t--global--background--color--action--plain--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--BorderBlockStartWidth: 0;
+ --pf-v6-c-table__compound-expansion-toggle__button--hover--after--BorderBlockStartWidth: var(--pf-t--global--border--width--strong);
+ --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--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--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--secondary--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);
+}
+@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 {
+ width: 100%;
+ background-color: var(--pf-v6-c-table--BackgroundColor);
+}
+.pf-v6-c-table.pf-m-fixed {
+ table-layout: fixed;
+}
+.pf-v6-c-table.pf-m-sticky-header > .pf-v6-c-table__thead,
+.pf-v6-c-table .pf-v6-c-table__thead.pf-m-nested-column-header {
+ position: sticky;
+ inset-block-start: 0;
+ z-index: var(--pf-v6-c-table--m-sticky-header--ZIndex);
+ background: var(--pf-v6-c-table--BackgroundColor);
+}
+.pf-v6-c-table.pf-m-sticky-header > .pf-v6-c-table__thead::before,
+.pf-v6-c-table .pf-v6-c-table__thead.pf-m-nested-column-header::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-table--m-sticky-header--border--ZIndex);
+ pointer-events: none;
+ content: "";
+ border-block-end: var(--pf-v6-c-table--border-width--base) solid var(--pf-v6-c-table--BorderColor);
+}
+.pf-v6-c-table.pf-m-sticky-header {
+ position: relative;
+}
+.pf-v6-c-table.pf-m-sticky-header thead:where(.pf-v6-c-table__thead) tr:where(.pf-v6-c-table__tr) > :where(th, td) {
+ z-index: var(--pf-v6-c-table--m-sticky-header--cell--ZIndex);
+}
+.pf-v6-c-table.pf-m-sticky-header > .pf-m-nested-column-header {
+ position: sticky;
+ inset-block-start: 0;
+ background: var(--pf-v6-c-table--BackgroundColor);
+}
+.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-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);
+ 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);
+ 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);
+ text-overflow: var(--pf-v6-c-table--cell--TextOverflow);
+ 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).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):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;
+ background-color: var(--pf-v6-c-table__tr--m-clickable--BackgroundColor);
+ outline-offset: var(--pf-v6-c-table__tr--m-clickable--OutlineOffset);
+}
+.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;
+ background-color: var(--pf-v6-c-table__tr--m-selected--BackgroundColor);
+ outline-offset: var(--pf-v6-c-table__tr--m-selected--OutlineOffset);
+}
+.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;
+ background-color: var(--pf-v6-c-table__tbody--m-clickable--BackgroundColor);
+ outline-offset: var(--pf-v6-c-table__tbody--m-clickable--OutlineOffset);
+}
+.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 {
+ background-color: var(--pf-v6-c-table__tbody--m-selected--BackgroundColor);
+ outline-offset: var(--pf-v6-c-table__tbody--m-selected--OutlineOffset);
+}
+.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-v6-c-table__expandable-row {
+ display: revert;
+ visibility: hidden;
+ opacity: var(--pf-v6-c-table__expandable-row--Opacity);
+ 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;
+ translate: 0 var(--pf-v6-c-table__expandable-row--TranslateY);
+}
+.pf-v6-c-table.pf-m-animate-expand > .pf-v6-c-table__tbody > .pf-v6-c-table__expandable-row[hidden] {
+ 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);
+ 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;
+ translate: 0 var(--pf-v6-c-table__tbody--m-expanded__expandable-row--TranslateY);
+}
+.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__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);
+ line-height: var(--pf-v6-c-table--cell--LineHeight);
+ text-overflow: var(--pf-v6-c-table--cell--TextOverflow);
+ 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 {
+ 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;
+ background-color: var(--pf-v6-c-table__button--BackgroundColor);
+ border: 0;
+ border-radius: var(--pf-v6-c-table__button--BorderRadius);
+ outline-offset: var(--pf-v6-c-table__button--OutlineOffset);
+}
+.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__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));
+}
+.pf-v6-c-table__toggle .pf-v6-c-table__toggle-icon {
+ 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;
+ transform: rotate(var(--pf-v6-c-table__toggle--c-button__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 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);
+}
+.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__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__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;
+}
+.pf-v6-c-table__expandable-row > .pf-v6-c-table__th,
+.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-v6-c-table__th,
+.pf-v6-c-table__control-row ~ .pf-v6-c-table__expandable-row > .pf-v6-c-table__td {
+ padding-block-start: var(--pf-v6-c-table--cell--PaddingBlockStart);
+}
+.pf-v6-c-table__expandable-row .pf-v6-c-table__td.pf-m-no-padding,
+.pf-v6-c-table__expandable-row .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 .pf-v6-c-table__td.pf-m-no-padding .pf-v6-c-table__expandable-row-content,
+.pf-v6-c-table__expandable-row .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 {
+ 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-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-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__tr:has(~ .pf-v6-c-table__expandable-row) {
+ 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--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__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 {
+ 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: 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 {
+ border-block-end: var(--pf-v6-c-table--border-width--base) solid var(--pf-v6-c-table--BorderColor);
+}
+
+.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%;
+}
+
+.pf-v6-c-table {
+ --pf-v6-c-table__sticky-cell--MinWidth--base: 8.75rem;
+ --pf-v6-c-table__sticky-cell--MinWidth: var(--pf-v6-c-table__sticky-cell--MinWidth--base);
+ --pf-v6-c-table__sticky-cell--ZIndex: var(--pf-t--global--z-index--xs);
+ --pf-v6-c-table__sticky-cell--InsetInlineEnd: auto;
+ --pf-v6-c-table__sticky-cell--InsetInlineStart: auto;
+ --pf-v6-c-table__sticky-cell--BackgroundColor: var(--pf-t--global--background--color--primary--default);
+ --pf-v6-c-table__sticky-cell--m-border-right--before--BorderInlineEndWidth: var(--pf-t--global--border--width--divider--default);
+ --pf-v6-c-table__sticky-cell--m-border-right--before--BorderInlineEndColor: var(--pf-t--global--border--color--default);
+ --pf-v6-c-table__sticky-cell--m-border-left--before--BorderInlineStartWidth: var(--pf-t--global--border--width--divider--default);
+ --pf-v6-c-table__sticky-cell--m-border-left--before--BorderInlineStartColor: var(--pf-t--global--border--color--default);
+ --pf-v6-c-table__sticky-cell--m-right--InsetInlineEnd: 0;
+ --pf-v6-c-table__sticky-cell--m-left--InsetInlineStart: 0;
+ --pf-v6-c-table--m-sticky-header__sticky-cell--ZIndex: calc(var(--pf-v6-c-table__sticky-cell--ZIndex) + 1);
+}
+
+.pf-v6-c-table .pf-v6-c-table__sticky-cell {
+ position: sticky;
+ inset-inline-start: var(--pf-v6-c-table__sticky-cell--InsetInlineStart);
+ inset-inline-end: var(--pf-v6-c-table__sticky-cell--InsetInlineEnd);
+ z-index: var(--pf-v6-c-table__sticky-cell--ZIndex);
+ min-width: var(--pf-v6-c-table__sticky-cell--MinWidth);
+}
+
+.pf-v6-c-table__sticky-cell {
+ --pf-v6-c-table--cell--Overflow: visible;
+ --pf-v6-c-table--m-sticky-header--cell--ZIndex: var(--pf-v6-c-table--m-sticky-header__sticky-cell--ZIndex);
+ background-color: var(--pf-v6-c-table__sticky-cell--BackgroundColor);
+ background-clip: padding-box;
+}
+.pf-v6-c-table__sticky-cell.pf-m-border-right::before {
+ --pf-v6-c-table--cell--m-border-right--before--BorderInlineEndWidth: var(--pf-v6-c-table__sticky-cell--m-border-right--before--BorderInlineEndWidth);
+ --pf-v6-c-table--cell--m-border-right--before--BorderInlineEndColor: var(--pf-v6-c-table__sticky-cell--m-border-right--before--BorderInlineEndColor);
+}
+.pf-v6-c-table__sticky-cell.pf-m-border-left::before {
+ --pf-v6-c-table--cell--m-border-left--before--BorderInlineStartWidth: var(--pf-v6-c-table__sticky-cell--m-border-left--before--BorderInlineStartWidth);
+ --pf-v6-c-table--cell--m-border-left--before--BorderInlineStartColor: var(--pf-v6-c-table__sticky-cell--m-border-left--before--BorderInlineStartColor);
+}
+.pf-v6-c-table__sticky-cell.pf-m-right, .pf-v6-c-table__sticky-cell.pf-m-inline-end {
+ --pf-v6-c-table__sticky-cell--InsetInlineEnd: var(--pf-v6-c-table__sticky-cell--m-right--InsetInlineEnd);
+}
+.pf-v6-c-table__sticky-cell.pf-m-left, .pf-v6-c-table__sticky-cell.pf-m-inline-start {
+ --pf-v6-c-table__sticky-cell--InsetInlineStart: var(--pf-v6-c-table__sticky-cell--m-left--InsetInlineStart);
+}
+
+.pf-v6-c-scroll-outer-wrapper {
+ --pf-v6-c-scroll-outer-wrapper--MinHeight: 25rem;
+ --pf-v6-c-scroll-outer-wrapper--MaxHeight: 100%;
+ display: flex;
+ flex-direction: column;
+ max-width: 100%;
+ min-height: var(--pf-v6-c-scroll-outer-wrapper--MinHeight);
+ max-height: var(--pf-v6-c-scroll-outer-wrapper--MaxHeight);
+ overflow: hidden;
+}
+
+.pf-v6-c-scroll-inner-wrapper {
+ display: flex;
+ flex-direction: column;
+ max-width: 100%;
+ max-height: 100%;
+ overflow: auto;
+}
+
+.pf-v6-c-table {
+ --pf-v6-c-table__tree-view-main--indent--base: calc(var(--pf-t--global--spacer--md) * 2 + var(--pf-v6-c-table__tree-view-icon--MinWidth));
+ --pf-v6-c-table__tree-view-main--nested-indent--base: calc(var(--pf-v6-c-table__tree-view-main--indent--base) - var(--pf-t--global--spacer--md));
+ --pf-v6-c-table__tree-view-main--c-button--MarginInlineEnd: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-table__tree-view-main--PaddingInlineStart: var(--pf-v6-c-table__tree-view-main--indent--base);
+ --pf-v6-c-table__tree-view-main--MarginInlineStart: calc(var(--pf-v6-c-table--cell--PaddingInlineStart) * -1);
+ --pf-v6-c-table__tree-view-main--c-table__check--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-table__tree-view-main--c-table__check--MarginInlineEnd: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-table__tree-view-icon--MinWidth: var(--pf-t--global--spacer--md);
+ --pf-v6-c-table__tree-view-icon--MarginInlineEnd: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-table--m-tree-view__toggle--Position: absolute;
+ --pf-v6-c-table--m-tree-view__toggle--InsetInlineStart: var(--pf-v6-c-table__tree-view-main--PaddingInlineStart);
+ --pf-v6-c-table--m-tree-view__toggle--TranslateX: -100%;
+ --pf-v6-c-table--m-tree-view__toggle__toggle-icon--MinWidth: var(--pf-t--global--spacer--md);
+ --pf-v6-c-table--m-no-inset__tree-view-main--PaddingInlineStart: 0;
+ --pf-v6-c-table--m-no-inset__tree-view-main--MarginInlineStart: 0;
+}
+
+.pf-v6-c-table.pf-m-tree-view > tbody > tr {
+ --pf-v6-c-table--m-tree-view__toggle--InsetInlineStart: var(--pf-v6-c-table__tree-view-main--PaddingInlineStart);
+}
+.pf-v6-c-table.pf-m-tree-view > tbody > tr.pf-m-no-inset {
+ --pf-v6-c-table__tree-view-main--PaddingInlineStart: var(--pf-v6-c-table--m-no-inset__tree-view-main--PaddingInlineStart);
+ --pf-v6-c-table__tree-view-main--MarginInlineStart: var(--pf-v6-c-table--m-no-inset__tree-view-main--MarginInlineStart);
+}
+.pf-v6-c-table.pf-m-tree-view.pf-m-no-inset {
+ --pf-v6-c-table__tree-view-main--PaddingInlineStart: var(--pf-v6-c-table--m-no-inset__tree-view-main--PaddingInlineStart);
+ --pf-v6-c-table__tree-view-main--MarginInlineStart: var(--pf-v6-c-table--m-no-inset__tree-view-main--MarginInlineStart);
+}
+.pf-v6-c-table.pf-m-tree-view tr:where(.pf-v6-c-table__tr)[aria-level="2"] {
+ --pf-v6-c-table__tree-view-main--PaddingInlineStart: calc(var(--pf-v6-c-table__tree-view-main--nested-indent--base) * 1 + var(--pf-v6-c-table__tree-view-main--indent--base));
+}
+.pf-v6-c-table.pf-m-tree-view tr:where(.pf-v6-c-table__tr)[aria-level="3"] {
+ --pf-v6-c-table__tree-view-main--PaddingInlineStart: calc(var(--pf-v6-c-table__tree-view-main--nested-indent--base) * 2 + var(--pf-v6-c-table__tree-view-main--indent--base));
+}
+.pf-v6-c-table.pf-m-tree-view tr:where(.pf-v6-c-table__tr)[aria-level="4"] {
+ --pf-v6-c-table__tree-view-main--PaddingInlineStart: calc(var(--pf-v6-c-table__tree-view-main--nested-indent--base) * 3 + var(--pf-v6-c-table__tree-view-main--indent--base));
+}
+.pf-v6-c-table.pf-m-tree-view tr:where(.pf-v6-c-table__tr)[aria-level="5"] {
+ --pf-v6-c-table__tree-view-main--PaddingInlineStart: calc(var(--pf-v6-c-table__tree-view-main--nested-indent--base) * 4 + var(--pf-v6-c-table__tree-view-main--indent--base));
+}
+.pf-v6-c-table.pf-m-tree-view tr:where(.pf-v6-c-table__tr)[aria-level="6"] {
+ --pf-v6-c-table__tree-view-main--PaddingInlineStart: calc(var(--pf-v6-c-table__tree-view-main--nested-indent--base) * 5 + var(--pf-v6-c-table__tree-view-main--indent--base));
+}
+.pf-v6-c-table.pf-m-tree-view tr:where(.pf-v6-c-table__tr)[aria-level="7"] {
+ --pf-v6-c-table__tree-view-main--PaddingInlineStart: calc(var(--pf-v6-c-table__tree-view-main--nested-indent--base) * 6 + var(--pf-v6-c-table__tree-view-main--indent--base));
+}
+.pf-v6-c-table.pf-m-tree-view tr:where(.pf-v6-c-table__tr)[aria-level="8"] {
+ --pf-v6-c-table__tree-view-main--PaddingInlineStart: calc(var(--pf-v6-c-table__tree-view-main--nested-indent--base) * 7 + var(--pf-v6-c-table__tree-view-main--indent--base));
+}
+.pf-v6-c-table.pf-m-tree-view tr:where(.pf-v6-c-table__tr)[aria-level="9"] {
+ --pf-v6-c-table__tree-view-main--PaddingInlineStart: calc(var(--pf-v6-c-table__tree-view-main--nested-indent--base) * 8 + var(--pf-v6-c-table__tree-view-main--indent--base));
+}
+.pf-v6-c-table.pf-m-tree-view tr:where(.pf-v6-c-table__tr)[aria-level="10"] {
+ --pf-v6-c-table__tree-view-main--PaddingInlineStart: calc(var(--pf-v6-c-table__tree-view-main--nested-indent--base) * 9 + var(--pf-v6-c-table__tree-view-main--indent--base));
+}
+
+.pf-v6-c-table__tree-view-main {
+ position: relative;
+ display: flex;
+ align-items: baseline;
+ min-width: 0;
+ padding-inline-start: var(--pf-v6-c-table__tree-view-main--PaddingInlineStart);
+ margin-inline-start: var(--pf-v6-c-table__tree-view-main--MarginInlineStart);
+ text-align: start;
+ cursor: pointer;
+}
+.pf-v6-c-table__tree-view-main > .pf-v6-c-table__toggle {
+ transform: translateX(var(--pf-v6-c-table--m-tree-view__toggle--TranslateX));
+ position: var(--pf-v6-c-table--m-tree-view__toggle--Position);
+ inset-inline-start: var(--pf-v6-c-table--m-tree-view__toggle--InsetInlineStart);
+}
+:where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-table__tree-view-main > .pf-v6-c-table__toggle {
+ transform: translateX(calc(var(--pf-v6-c-table--m-tree-view__toggle--TranslateX) * var(--pf-v6-global--inverse--multiplier)));
+}
+
+.pf-v6-c-table__tree-view-main > .pf-v6-c-table__toggle .pf-v6-c-table__toggle-icon {
+ min-width: var(--pf-v6-c-table--m-tree-view__toggle__toggle-icon--MinWidth);
+}
+.pf-v6-c-table__tree-view-main > .pf-v6-c-table__toggle .pf-v6-c-button {
+ margin-block-start: -50%;
+ margin-inline-end: var(--pf-v6-c-table__tree-view-main--c-button--MarginInlineEnd);
+}
+.pf-v6-c-table__tree-view-main > .pf-v6-c-table__check {
+ margin-inline-end: var(--pf-v6-c-table__tree-view-main--c-table__check--MarginInlineEnd);
+}
+.pf-v6-c-table__tree-view-main > .pf-v6-c-table__check label {
+ padding-inline-end: var(--pf-v6-c-table__tree-view-main--c-table__check--PaddingInlineEnd);
+ margin-block-start: 0;
+ margin-block-end: 0;
+ margin-inline-start: 0;
+ margin-inline-end: calc(var(--pf-v6-c-table__tree-view-main--c-table__check--MarginInlineEnd) * -1);
+}
+
+.pf-v6-c-table__tree-view-text {
+ display: flex;
+}
+
+.pf-v6-c-table__tree-view-icon {
+ min-width: var(--pf-v6-c-table__tree-view-icon--MinWidth);
+ margin-inline-end: var(--pf-v6-c-table__tree-view-icon--MarginInlineEnd);
+}
+
+.pf-v6-c-table__tree-view-details-toggle {
+ display: none;
+}
+
+.pf-m-tree-view-grid.pf-v6-c-table {
+ --pf-v6-c-table--m-tree-view-grid--tr--OutlineOffset: calc(-1 * var(--pf-t--global--spacer--xs));
+ --pf-v6-c-table--m-tree-view-grid__tbody--cell--PaddingBlockStart: var(--pf-t--global--spacer--md);
+ --pf-v6-c-table--m-tree-view-grid__tbody--cell--PaddingBlockEnd: var(--pf-t--global--spacer--md);
+ --pf-v6-c-table--m-tree-view-grid__tbody--cell--PaddingInlineStart: var(--pf-v6-c-table__tree-view-main--indent--base);
+ --pf-v6-c-table--m-tree-view-grid__tbody--cell--GridColumnGap: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-table--m-tree-view-grid--c-table__action--PaddingBlockStart: var(--pf-t--global--spacer--md);
+ --pf-v6-c-table--m-tree-view-grid--c-table__action--PaddingBlockEnd: var(--pf-t--global--spacer--md);
+ --pf-v6-c-table--m-tree-view-grid--c-table__action--PaddingInlineStart: 0;
+ --pf-v6-c-table--m-tree-view-grid__tr--expanded__tree-view-title-cell--action--PaddingBlockStart: var(--pf-t--global--spacer--xl);
+ --pf-v6-c-table--m-tree-view-grid--m-tree-view-details-expanded--PaddingBlockEnd: var(--pf-t--global--spacer--xl);
+ --pf-v6-c-table--m-tree-view-grid__tr--expanded__tree-view-title-cell--PaddingBlockStart: var(--pf-t--global--spacer--xl);
+ --pf-v6-c-table--m-tree-view-grid__td--data-label--GridTemplateColumns: repeat(auto-fit, minmax(150px, 1fr));
+ --pf-v6-c-table--m-tree-view-grid__td--not--c-table__tree-view-title-cell--PaddingBlockStart: var(--pf-t--global--spacer--xs);
+ --pf-v6-c-table--m-tree-view-grid__td--not--c-table__tree-view-title-cell--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
+ --pf-v6-c-table--m-tree-view-mobile__tree-view-main--c-table__check--MarginInlineEnd: 0;
+ --pf-v6-c-table--m-tree-view-mobile__tree-view-main--c-table__check--Order: 4;
+ --pf-v6-c-table__tree-view-text--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-table__tbody--cell--PaddingBlockStart: var(--pf-v6-c-table--m-tree-view-grid__tbody--cell--PaddingBlockStart);
+ --pf-v6-c-table__tbody--cell--PaddingBlockEnd: var(--pf-v6-c-table--m-tree-view-grid__tbody--cell--PaddingBlockEnd);
+ --pf-v6-c-table__tree-view-details-toggle--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--plain) * -1);
+ --pf-v6-c-table__tree-view-details-toggle--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--plain) * -1);
+ --pf-v6-c-table--m-tree-view-grid__action--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--plain) * -1);
+ --pf-v6-c-table--m-tree-view-grid__action--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--plain) * -1);
+}
+.pf-m-tree-view-grid.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody) tr:where(.pf-v6-c-table__tr) {
+ position: relative;
+ border: none;
+ outline-offset: var(--pf-v6-c-table--m-tree-view-grid--tr--OutlineOffset);
+}
+.pf-m-tree-view-grid.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody) tr:where(.pf-v6-c-table__tr)::before {
+ position: absolute;
+ inset-block-start: 0;
+ inset-block-end: 0;
+ inset-inline-start: var(--pf-v6-c-table--m-tree-view-grid__tbody--cell--PaddingInlineStart);
+ inset-inline-end: 0;
+ content: "";
+ border-block-end: var(--pf-v6-c-table--border-width--base) solid var(--pf-v6-c-table--BorderColor);
+}
+.pf-m-tree-view-grid.pf-v6-c-table tr:where(.pf-v6-c-table__tr):not([hidden]) {
+ display: grid;
+ grid-template-columns: 1fr max-content;
+}
+.pf-m-tree-view-grid.pf-v6-c-table tr:where(.pf-v6-c-table__tr)[aria-expanded] .pf-v6-c-table__tree-view-title-cell {
+ --pf-v6-c-table--cell--PaddingBlockStart: var(--pf-v6-c-table--m-tree-view-grid__tr--expanded__tree-view-title-cell--PaddingBlockStart);
+}
+.pf-m-tree-view-grid.pf-v6-c-table tr:where(.pf-v6-c-table__tr)[aria-expanded] .pf-v6-c-table__tree-view-title-cell ~ .pf-v6-c-table__action {
+ --pf-v6-c-table--cell--PaddingBlockStart: var(--pf-v6-c-table--m-tree-view-grid__tr--expanded__tree-view-title-cell--action--PaddingBlockStart);
+}
+.pf-m-tree-view-grid.pf-v6-c-table td:where(.pf-v6-c-table__td):not(.pf-v6-c-table__tree-view-title-cell) {
+ --pf-v6-c-table--cell--PaddingBlockStart: var(--pf-v6-c-table--m-tree-view-grid__td--not--c-table__tree-view-title-cell--PaddingBlockStart);
+ --pf-v6-c-table--cell--PaddingBlockEnd: var(--pf-v6-c-table--m-tree-view-grid__td--not--c-table__tree-view-title-cell--PaddingBlockEnd);
+ padding-inline-start: var(--pf-v6-c-table--m-tree-view-grid__tbody--cell--PaddingInlineStart);
+}
+.pf-m-tree-view-grid.pf-v6-c-table .pf-v6-c-table__tree-view-text {
+ padding-inline-end: var(--pf-v6-c-table__tree-view-text--PaddingInlineEnd);
+}
+.pf-m-tree-view-grid.pf-v6-c-table thead:where(.pf-v6-c-table__thead) th:where(.pf-v6-c-table__th) {
+ display: none;
+}
+.pf-m-tree-view-grid.pf-v6-c-table td:where(.pf-v6-c-table__td) {
+ display: none;
+}
+.pf-m-tree-view-grid.pf-v6-c-table td:where(.pf-v6-c-table__td)[data-label] {
+ grid-template-columns: var(--pf-v6-c-table--m-tree-view-grid__td--data-label--GridTemplateColumns);
+ grid-column: 1;
+ grid-column-gap: var(--pf-v6-c-table--m-tree-view-grid__tbody--cell--GridColumnGap);
+ align-items: start;
+}
+.pf-m-tree-view-grid.pf-v6-c-table td:where(.pf-v6-c-table__td)[data-label] > :where(th, td) {
+ grid-column: 2;
+}
+.pf-m-tree-view-grid.pf-v6-c-table td:where(.pf-v6-c-table__td)[data-label]::before {
+ position: revert;
+ font-weight: var(--pf-t--global--font--weight--body--bold);
+ text-align: start;
+ content: attr(data-label);
+}
+.pf-m-tree-view-grid.pf-v6-c-table .pf-v6-c-table__tr > :where(th, td).pf-m-border-right::before {
+ border-inline-end: 0;
+}
+.pf-m-tree-view-grid.pf-v6-c-table tr:where(.pf-v6-c-table__tr).pf-m-tree-view-details-expanded {
+ padding-block-end: var(--pf-v6-c-table--m-tree-view-grid--m-tree-view-details-expanded--PaddingBlockEnd);
+}
+.pf-m-tree-view-grid.pf-v6-c-table tr:where(.pf-v6-c-table__tr).pf-m-tree-view-details-expanded td:where(.pf-v6-c-table__td)[data-label] {
+ display: grid;
+}
+.pf-m-tree-view-grid.pf-v6-c-table .pf-v6-c-table__thead {
+ display: none;
+}
+.pf-m-tree-view-grid.pf-v6-c-table .pf-v6-c-table__tree-view-details-toggle,
+.pf-m-tree-view-grid.pf-v6-c-table .pf-v6-c-table__action {
+ display: inline-block;
+}
+.pf-m-tree-view-grid.pf-v6-c-table .pf-v6-c-table__action {
+ --pf-v6-c-table--cell--Width: auto;
+ --pf-v6-c-table--m-tree-view-grid__tbody--cell--PaddingInlineStart: var(--pf-v6-c-table--m-tree-view-grid--c-table__action--PaddingInlineStart);
+ --pf-v6-c-table--m-tree-view-grid__td--not--c-table__tree-view-title-cell--PaddingBlockStart: var(--pf-v6-c-table--m-tree-view-grid--c-table__action--PaddingBlockStart);
+ --pf-v6-c-table--m-tree-view-grid__td--not--c-table__tree-view-title-cell--PaddingBlockEnd: var(--pf-v6-c-table--m-tree-view-grid--c-table__action--PaddingBlockEnd);
+ grid-row: 1;
+ grid-column: 2;
+ margin-block-start: var(--pf-v6-c-table--m-tree-view-grid__action--MarginBlockStart);
+ margin-block-end: var(--pf-v6-c-table--m-tree-view-grid__action--MarginBlockEnd);
+}
+.pf-m-tree-view-grid.pf-v6-c-table .pf-v6-c-table__tree-view-main > .pf-v6-c-table__check {
+ order: var(--pf-v6-c-table--m-tree-view-mobile__tree-view-main--c-table__check--Order);
+ margin-inline-start: auto;
+ margin-inline-end: var(--pf-v6-c-table--m-tree-view-mobile__tree-view-main--c-table__check--MarginInlineEnd);
+}
+.pf-m-tree-view-grid.pf-v6-c-table .pf-v6-c-table__tree-view-details-toggle {
+ margin-block-start: var(--pf-v6-c-table__tree-view-details-toggle--MarginBlockStart);
+ margin-block-end: var(--pf-v6-c-table__tree-view-details-toggle--MarginBlockEnd);
+}
+.pf-m-tree-view-grid.pf-v6-c-table tr:where(.pf-v6-c-table__tr)[aria-level="2"] {
+ --pf-v6-c-table--m-tree-view-grid__tbody--cell--PaddingInlineStart: calc(var(--pf-v6-c-table__tree-view-main--nested-indent--base) * 1 + var(--pf-v6-c-table__tree-view-main--indent--base));
+}
+.pf-m-tree-view-grid.pf-v6-c-table tr:where(.pf-v6-c-table__tr)[aria-level="3"] {
+ --pf-v6-c-table--m-tree-view-grid__tbody--cell--PaddingInlineStart: calc(var(--pf-v6-c-table__tree-view-main--nested-indent--base) * 2 + var(--pf-v6-c-table__tree-view-main--indent--base));
+}
+.pf-m-tree-view-grid.pf-v6-c-table tr:where(.pf-v6-c-table__tr)[aria-level="4"] {
+ --pf-v6-c-table--m-tree-view-grid__tbody--cell--PaddingInlineStart: calc(var(--pf-v6-c-table__tree-view-main--nested-indent--base) * 3 + var(--pf-v6-c-table__tree-view-main--indent--base));
+}
+.pf-m-tree-view-grid.pf-v6-c-table tr:where(.pf-v6-c-table__tr)[aria-level="5"] {
+ --pf-v6-c-table--m-tree-view-grid__tbody--cell--PaddingInlineStart: calc(var(--pf-v6-c-table__tree-view-main--nested-indent--base) * 4 + var(--pf-v6-c-table__tree-view-main--indent--base));
+}
+.pf-m-tree-view-grid.pf-v6-c-table tr:where(.pf-v6-c-table__tr)[aria-level="6"] {
+ --pf-v6-c-table--m-tree-view-grid__tbody--cell--PaddingInlineStart: calc(var(--pf-v6-c-table__tree-view-main--nested-indent--base) * 5 + var(--pf-v6-c-table__tree-view-main--indent--base));
+}
+.pf-m-tree-view-grid.pf-v6-c-table tr:where(.pf-v6-c-table__tr)[aria-level="7"] {
+ --pf-v6-c-table--m-tree-view-grid__tbody--cell--PaddingInlineStart: calc(var(--pf-v6-c-table__tree-view-main--nested-indent--base) * 6 + var(--pf-v6-c-table__tree-view-main--indent--base));
+}
+.pf-m-tree-view-grid.pf-v6-c-table tr:where(.pf-v6-c-table__tr)[aria-level="8"] {
+ --pf-v6-c-table--m-tree-view-grid__tbody--cell--PaddingInlineStart: calc(var(--pf-v6-c-table__tree-view-main--nested-indent--base) * 7 + var(--pf-v6-c-table__tree-view-main--indent--base));
+}
+.pf-m-tree-view-grid.pf-v6-c-table tr:where(.pf-v6-c-table__tr)[aria-level="9"] {
+ --pf-v6-c-table--m-tree-view-grid__tbody--cell--PaddingInlineStart: calc(var(--pf-v6-c-table__tree-view-main--nested-indent--base) * 8 + var(--pf-v6-c-table__tree-view-main--indent--base));
+}
+.pf-m-tree-view-grid.pf-v6-c-table tr:where(.pf-v6-c-table__tr)[aria-level="10"] {
+ --pf-v6-c-table--m-tree-view-grid__tbody--cell--PaddingInlineStart: calc(var(--pf-v6-c-table__tree-view-main--nested-indent--base) * 9 + var(--pf-v6-c-table__tree-view-main--indent--base));
+}
+
+@media screen and (max-width: calc(48rem - 1px)) {
+ .pf-m-tree-view-grid-md.pf-v6-c-table {
+ --pf-v6-c-table--m-tree-view-grid--tr--OutlineOffset: calc(-1 * var(--pf-t--global--spacer--xs));
+ --pf-v6-c-table--m-tree-view-grid__tbody--cell--PaddingBlockStart: var(--pf-t--global--spacer--md);
+ --pf-v6-c-table--m-tree-view-grid__tbody--cell--PaddingBlockEnd: var(--pf-t--global--spacer--md);
+ --pf-v6-c-table--m-tree-view-grid__tbody--cell--PaddingInlineStart: var(--pf-v6-c-table__tree-view-main--indent--base);
+ --pf-v6-c-table--m-tree-view-grid__tbody--cell--GridColumnGap: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-table--m-tree-view-grid--c-table__action--PaddingBlockStart: var(--pf-t--global--spacer--md);
+ --pf-v6-c-table--m-tree-view-grid--c-table__action--PaddingBlockEnd: var(--pf-t--global--spacer--md);
+ --pf-v6-c-table--m-tree-view-grid--c-table__action--PaddingInlineStart: 0;
+ --pf-v6-c-table--m-tree-view-grid__tr--expanded__tree-view-title-cell--action--PaddingBlockStart: var(--pf-t--global--spacer--xl);
+ --pf-v6-c-table--m-tree-view-grid--m-tree-view-details-expanded--PaddingBlockEnd: var(--pf-t--global--spacer--xl);
+ --pf-v6-c-table--m-tree-view-grid__tr--expanded__tree-view-title-cell--PaddingBlockStart: var(--pf-t--global--spacer--xl);
+ --pf-v6-c-table--m-tree-view-grid__td--data-label--GridTemplateColumns: repeat(auto-fit, minmax(150px, 1fr));
+ --pf-v6-c-table--m-tree-view-grid__td--not--c-table__tree-view-title-cell--PaddingBlockStart: var(--pf-t--global--spacer--xs);
+ --pf-v6-c-table--m-tree-view-grid__td--not--c-table__tree-view-title-cell--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
+ --pf-v6-c-table--m-tree-view-mobile__tree-view-main--c-table__check--MarginInlineEnd: 0;
+ --pf-v6-c-table--m-tree-view-mobile__tree-view-main--c-table__check--Order: 4;
+ --pf-v6-c-table__tree-view-text--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-table__tbody--cell--PaddingBlockStart: var(--pf-v6-c-table--m-tree-view-grid__tbody--cell--PaddingBlockStart);
+ --pf-v6-c-table__tbody--cell--PaddingBlockEnd: var(--pf-v6-c-table--m-tree-view-grid__tbody--cell--PaddingBlockEnd);
+ --pf-v6-c-table__tree-view-details-toggle--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--plain) * -1);
+ --pf-v6-c-table__tree-view-details-toggle--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--plain) * -1);
+ --pf-v6-c-table--m-tree-view-grid__action--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--plain) * -1);
+ --pf-v6-c-table--m-tree-view-grid__action--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--plain) * -1);
+ }
+ .pf-m-tree-view-grid-md.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody) tr:where(.pf-v6-c-table__tr) {
+ position: relative;
+ border: none;
+ outline-offset: var(--pf-v6-c-table--m-tree-view-grid--tr--OutlineOffset);
+ }
+ .pf-m-tree-view-grid-md.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody) tr:where(.pf-v6-c-table__tr)::before {
+ position: absolute;
+ inset-block-start: 0;
+ inset-block-end: 0;
+ inset-inline-start: var(--pf-v6-c-table--m-tree-view-grid__tbody--cell--PaddingInlineStart);
+ inset-inline-end: 0;
+ content: "";
+ border-block-end: var(--pf-v6-c-table--border-width--base) solid var(--pf-v6-c-table--BorderColor);
+ }
+ .pf-m-tree-view-grid-md.pf-v6-c-table tr:where(.pf-v6-c-table__tr):not([hidden]) {
+ display: grid;
+ grid-template-columns: 1fr max-content;
+ }
+ .pf-m-tree-view-grid-md.pf-v6-c-table tr:where(.pf-v6-c-table__tr)[aria-expanded] .pf-v6-c-table__tree-view-title-cell {
+ --pf-v6-c-table--cell--PaddingBlockStart: var(--pf-v6-c-table--m-tree-view-grid__tr--expanded__tree-view-title-cell--PaddingBlockStart);
+ }
+ .pf-m-tree-view-grid-md.pf-v6-c-table tr:where(.pf-v6-c-table__tr)[aria-expanded] .pf-v6-c-table__tree-view-title-cell ~ .pf-v6-c-table__action {
+ --pf-v6-c-table--cell--PaddingBlockStart: var(--pf-v6-c-table--m-tree-view-grid__tr--expanded__tree-view-title-cell--action--PaddingBlockStart);
+ }
+ .pf-m-tree-view-grid-md.pf-v6-c-table td:where(.pf-v6-c-table__td):not(.pf-v6-c-table__tree-view-title-cell) {
+ --pf-v6-c-table--cell--PaddingBlockStart: var(--pf-v6-c-table--m-tree-view-grid__td--not--c-table__tree-view-title-cell--PaddingBlockStart);
+ --pf-v6-c-table--cell--PaddingBlockEnd: var(--pf-v6-c-table--m-tree-view-grid__td--not--c-table__tree-view-title-cell--PaddingBlockEnd);
+ padding-inline-start: var(--pf-v6-c-table--m-tree-view-grid__tbody--cell--PaddingInlineStart);
+ }
+ .pf-m-tree-view-grid-md.pf-v6-c-table .pf-v6-c-table__tree-view-text {
+ padding-inline-end: var(--pf-v6-c-table__tree-view-text--PaddingInlineEnd);
+ }
+ .pf-m-tree-view-grid-md.pf-v6-c-table thead:where(.pf-v6-c-table__thead) th:where(.pf-v6-c-table__th) {
+ display: none;
+ }
+ .pf-m-tree-view-grid-md.pf-v6-c-table td:where(.pf-v6-c-table__td) {
+ display: none;
+ }
+ .pf-m-tree-view-grid-md.pf-v6-c-table td:where(.pf-v6-c-table__td)[data-label] {
+ grid-template-columns: var(--pf-v6-c-table--m-tree-view-grid__td--data-label--GridTemplateColumns);
+ grid-column: 1;
+ grid-column-gap: var(--pf-v6-c-table--m-tree-view-grid__tbody--cell--GridColumnGap);
+ align-items: start;
+ }
+ .pf-m-tree-view-grid-md.pf-v6-c-table td:where(.pf-v6-c-table__td)[data-label] > :where(th, td) {
+ grid-column: 2;
+ }
+ .pf-m-tree-view-grid-md.pf-v6-c-table td:where(.pf-v6-c-table__td)[data-label]::before {
+ position: revert;
+ font-weight: var(--pf-t--global--font--weight--body--bold);
+ text-align: start;
+ content: attr(data-label);
+ }
+ .pf-m-tree-view-grid-md.pf-v6-c-table .pf-v6-c-table__tr > :where(th, td).pf-m-border-right::before {
+ border-inline-end: 0;
+ }
+ .pf-m-tree-view-grid-md.pf-v6-c-table tr:where(.pf-v6-c-table__tr).pf-m-tree-view-details-expanded {
+ padding-block-end: var(--pf-v6-c-table--m-tree-view-grid--m-tree-view-details-expanded--PaddingBlockEnd);
+ }
+ .pf-m-tree-view-grid-md.pf-v6-c-table tr:where(.pf-v6-c-table__tr).pf-m-tree-view-details-expanded td:where(.pf-v6-c-table__td)[data-label] {
+ display: grid;
+ }
+ .pf-m-tree-view-grid-md.pf-v6-c-table .pf-v6-c-table__thead {
+ display: none;
+ }
+ .pf-m-tree-view-grid-md.pf-v6-c-table .pf-v6-c-table__tree-view-details-toggle,
+ .pf-m-tree-view-grid-md.pf-v6-c-table .pf-v6-c-table__action {
+ display: inline-block;
+ }
+ .pf-m-tree-view-grid-md.pf-v6-c-table .pf-v6-c-table__action {
+ --pf-v6-c-table--cell--Width: auto;
+ --pf-v6-c-table--m-tree-view-grid__tbody--cell--PaddingInlineStart: var(--pf-v6-c-table--m-tree-view-grid--c-table__action--PaddingInlineStart);
+ --pf-v6-c-table--m-tree-view-grid__td--not--c-table__tree-view-title-cell--PaddingBlockStart: var(--pf-v6-c-table--m-tree-view-grid--c-table__action--PaddingBlockStart);
+ --pf-v6-c-table--m-tree-view-grid__td--not--c-table__tree-view-title-cell--PaddingBlockEnd: var(--pf-v6-c-table--m-tree-view-grid--c-table__action--PaddingBlockEnd);
+ grid-row: 1;
+ grid-column: 2;
+ margin-block-start: var(--pf-v6-c-table--m-tree-view-grid__action--MarginBlockStart);
+ margin-block-end: var(--pf-v6-c-table--m-tree-view-grid__action--MarginBlockEnd);
+ }
+ .pf-m-tree-view-grid-md.pf-v6-c-table .pf-v6-c-table__tree-view-main > .pf-v6-c-table__check {
+ order: var(--pf-v6-c-table--m-tree-view-mobile__tree-view-main--c-table__check--Order);
+ margin-inline-start: auto;
+ margin-inline-end: var(--pf-v6-c-table--m-tree-view-mobile__tree-view-main--c-table__check--MarginInlineEnd);
+ }
+ .pf-m-tree-view-grid-md.pf-v6-c-table .pf-v6-c-table__tree-view-details-toggle {
+ margin-block-start: var(--pf-v6-c-table__tree-view-details-toggle--MarginBlockStart);
+ margin-block-end: var(--pf-v6-c-table__tree-view-details-toggle--MarginBlockEnd);
+ }
+ .pf-m-tree-view-grid-md.pf-v6-c-table tr:where(.pf-v6-c-table__tr)[aria-level="2"] {
+ --pf-v6-c-table--m-tree-view-grid__tbody--cell--PaddingInlineStart: calc(var(--pf-v6-c-table__tree-view-main--nested-indent--base) * 1 + var(--pf-v6-c-table__tree-view-main--indent--base));
+ }
+ .pf-m-tree-view-grid-md.pf-v6-c-table tr:where(.pf-v6-c-table__tr)[aria-level="3"] {
+ --pf-v6-c-table--m-tree-view-grid__tbody--cell--PaddingInlineStart: calc(var(--pf-v6-c-table__tree-view-main--nested-indent--base) * 2 + var(--pf-v6-c-table__tree-view-main--indent--base));
+ }
+ .pf-m-tree-view-grid-md.pf-v6-c-table tr:where(.pf-v6-c-table__tr)[aria-level="4"] {
+ --pf-v6-c-table--m-tree-view-grid__tbody--cell--PaddingInlineStart: calc(var(--pf-v6-c-table__tree-view-main--nested-indent--base) * 3 + var(--pf-v6-c-table__tree-view-main--indent--base));
+ }
+ .pf-m-tree-view-grid-md.pf-v6-c-table tr:where(.pf-v6-c-table__tr)[aria-level="5"] {
+ --pf-v6-c-table--m-tree-view-grid__tbody--cell--PaddingInlineStart: calc(var(--pf-v6-c-table__tree-view-main--nested-indent--base) * 4 + var(--pf-v6-c-table__tree-view-main--indent--base));
+ }
+ .pf-m-tree-view-grid-md.pf-v6-c-table tr:where(.pf-v6-c-table__tr)[aria-level="6"] {
+ --pf-v6-c-table--m-tree-view-grid__tbody--cell--PaddingInlineStart: calc(var(--pf-v6-c-table__tree-view-main--nested-indent--base) * 5 + var(--pf-v6-c-table__tree-view-main--indent--base));
+ }
+ .pf-m-tree-view-grid-md.pf-v6-c-table tr:where(.pf-v6-c-table__tr)[aria-level="7"] {
+ --pf-v6-c-table--m-tree-view-grid__tbody--cell--PaddingInlineStart: calc(var(--pf-v6-c-table__tree-view-main--nested-indent--base) * 6 + var(--pf-v6-c-table__tree-view-main--indent--base));
+ }
+ .pf-m-tree-view-grid-md.pf-v6-c-table tr:where(.pf-v6-c-table__tr)[aria-level="8"] {
+ --pf-v6-c-table--m-tree-view-grid__tbody--cell--PaddingInlineStart: calc(var(--pf-v6-c-table__tree-view-main--nested-indent--base) * 7 + var(--pf-v6-c-table__tree-view-main--indent--base));
+ }
+ .pf-m-tree-view-grid-md.pf-v6-c-table tr:where(.pf-v6-c-table__tr)[aria-level="9"] {
+ --pf-v6-c-table--m-tree-view-grid__tbody--cell--PaddingInlineStart: calc(var(--pf-v6-c-table__tree-view-main--nested-indent--base) * 8 + var(--pf-v6-c-table__tree-view-main--indent--base));
+ }
+ .pf-m-tree-view-grid-md.pf-v6-c-table tr:where(.pf-v6-c-table__tr)[aria-level="10"] {
+ --pf-v6-c-table--m-tree-view-grid__tbody--cell--PaddingInlineStart: calc(var(--pf-v6-c-table__tree-view-main--nested-indent--base) * 9 + var(--pf-v6-c-table__tree-view-main--indent--base));
+ }
+}
+
+@media screen and (max-width: calc(62rem - 1px)) {
+ .pf-m-tree-view-grid-lg.pf-v6-c-table {
+ --pf-v6-c-table--m-tree-view-grid--tr--OutlineOffset: calc(-1 * var(--pf-t--global--spacer--xs));
+ --pf-v6-c-table--m-tree-view-grid__tbody--cell--PaddingBlockStart: var(--pf-t--global--spacer--md);
+ --pf-v6-c-table--m-tree-view-grid__tbody--cell--PaddingBlockEnd: var(--pf-t--global--spacer--md);
+ --pf-v6-c-table--m-tree-view-grid__tbody--cell--PaddingInlineStart: var(--pf-v6-c-table__tree-view-main--indent--base);
+ --pf-v6-c-table--m-tree-view-grid__tbody--cell--GridColumnGap: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-table--m-tree-view-grid--c-table__action--PaddingBlockStart: var(--pf-t--global--spacer--md);
+ --pf-v6-c-table--m-tree-view-grid--c-table__action--PaddingBlockEnd: var(--pf-t--global--spacer--md);
+ --pf-v6-c-table--m-tree-view-grid--c-table__action--PaddingInlineStart: 0;
+ --pf-v6-c-table--m-tree-view-grid__tr--expanded__tree-view-title-cell--action--PaddingBlockStart: var(--pf-t--global--spacer--xl);
+ --pf-v6-c-table--m-tree-view-grid--m-tree-view-details-expanded--PaddingBlockEnd: var(--pf-t--global--spacer--xl);
+ --pf-v6-c-table--m-tree-view-grid__tr--expanded__tree-view-title-cell--PaddingBlockStart: var(--pf-t--global--spacer--xl);
+ --pf-v6-c-table--m-tree-view-grid__td--data-label--GridTemplateColumns: repeat(auto-fit, minmax(150px, 1fr));
+ --pf-v6-c-table--m-tree-view-grid__td--not--c-table__tree-view-title-cell--PaddingBlockStart: var(--pf-t--global--spacer--xs);
+ --pf-v6-c-table--m-tree-view-grid__td--not--c-table__tree-view-title-cell--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
+ --pf-v6-c-table--m-tree-view-mobile__tree-view-main--c-table__check--MarginInlineEnd: 0;
+ --pf-v6-c-table--m-tree-view-mobile__tree-view-main--c-table__check--Order: 4;
+ --pf-v6-c-table__tree-view-text--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-table__tbody--cell--PaddingBlockStart: var(--pf-v6-c-table--m-tree-view-grid__tbody--cell--PaddingBlockStart);
+ --pf-v6-c-table__tbody--cell--PaddingBlockEnd: var(--pf-v6-c-table--m-tree-view-grid__tbody--cell--PaddingBlockEnd);
+ --pf-v6-c-table__tree-view-details-toggle--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--plain) * -1);
+ --pf-v6-c-table__tree-view-details-toggle--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--plain) * -1);
+ --pf-v6-c-table--m-tree-view-grid__action--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--plain) * -1);
+ --pf-v6-c-table--m-tree-view-grid__action--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--plain) * -1);
+ }
+ .pf-m-tree-view-grid-lg.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody) tr:where(.pf-v6-c-table__tr) {
+ position: relative;
+ border: none;
+ outline-offset: var(--pf-v6-c-table--m-tree-view-grid--tr--OutlineOffset);
+ }
+ .pf-m-tree-view-grid-lg.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody) tr:where(.pf-v6-c-table__tr)::before {
+ position: absolute;
+ inset-block-start: 0;
+ inset-block-end: 0;
+ inset-inline-start: var(--pf-v6-c-table--m-tree-view-grid__tbody--cell--PaddingInlineStart);
+ inset-inline-end: 0;
+ content: "";
+ border-block-end: var(--pf-v6-c-table--border-width--base) solid var(--pf-v6-c-table--BorderColor);
+ }
+ .pf-m-tree-view-grid-lg.pf-v6-c-table tr:where(.pf-v6-c-table__tr):not([hidden]) {
+ display: grid;
+ grid-template-columns: 1fr max-content;
+ }
+ .pf-m-tree-view-grid-lg.pf-v6-c-table tr:where(.pf-v6-c-table__tr)[aria-expanded] .pf-v6-c-table__tree-view-title-cell {
+ --pf-v6-c-table--cell--PaddingBlockStart: var(--pf-v6-c-table--m-tree-view-grid__tr--expanded__tree-view-title-cell--PaddingBlockStart);
+ }
+ .pf-m-tree-view-grid-lg.pf-v6-c-table tr:where(.pf-v6-c-table__tr)[aria-expanded] .pf-v6-c-table__tree-view-title-cell ~ .pf-v6-c-table__action {
+ --pf-v6-c-table--cell--PaddingBlockStart: var(--pf-v6-c-table--m-tree-view-grid__tr--expanded__tree-view-title-cell--action--PaddingBlockStart);
+ }
+ .pf-m-tree-view-grid-lg.pf-v6-c-table td:where(.pf-v6-c-table__td):not(.pf-v6-c-table__tree-view-title-cell) {
+ --pf-v6-c-table--cell--PaddingBlockStart: var(--pf-v6-c-table--m-tree-view-grid__td--not--c-table__tree-view-title-cell--PaddingBlockStart);
+ --pf-v6-c-table--cell--PaddingBlockEnd: var(--pf-v6-c-table--m-tree-view-grid__td--not--c-table__tree-view-title-cell--PaddingBlockEnd);
+ padding-inline-start: var(--pf-v6-c-table--m-tree-view-grid__tbody--cell--PaddingInlineStart);
+ }
+ .pf-m-tree-view-grid-lg.pf-v6-c-table .pf-v6-c-table__tree-view-text {
+ padding-inline-end: var(--pf-v6-c-table__tree-view-text--PaddingInlineEnd);
+ }
+ .pf-m-tree-view-grid-lg.pf-v6-c-table thead:where(.pf-v6-c-table__thead) th:where(.pf-v6-c-table__th) {
+ display: none;
+ }
+ .pf-m-tree-view-grid-lg.pf-v6-c-table td:where(.pf-v6-c-table__td) {
+ display: none;
+ }
+ .pf-m-tree-view-grid-lg.pf-v6-c-table td:where(.pf-v6-c-table__td)[data-label] {
+ grid-template-columns: var(--pf-v6-c-table--m-tree-view-grid__td--data-label--GridTemplateColumns);
+ grid-column: 1;
+ grid-column-gap: var(--pf-v6-c-table--m-tree-view-grid__tbody--cell--GridColumnGap);
+ align-items: start;
+ }
+ .pf-m-tree-view-grid-lg.pf-v6-c-table td:where(.pf-v6-c-table__td)[data-label] > :where(th, td) {
+ grid-column: 2;
+ }
+ .pf-m-tree-view-grid-lg.pf-v6-c-table td:where(.pf-v6-c-table__td)[data-label]::before {
+ position: revert;
+ font-weight: var(--pf-t--global--font--weight--body--bold);
+ text-align: start;
+ content: attr(data-label);
+ }
+ .pf-m-tree-view-grid-lg.pf-v6-c-table .pf-v6-c-table__tr > :where(th, td).pf-m-border-right::before {
+ border-inline-end: 0;
+ }
+ .pf-m-tree-view-grid-lg.pf-v6-c-table tr:where(.pf-v6-c-table__tr).pf-m-tree-view-details-expanded {
+ padding-block-end: var(--pf-v6-c-table--m-tree-view-grid--m-tree-view-details-expanded--PaddingBlockEnd);
+ }
+ .pf-m-tree-view-grid-lg.pf-v6-c-table tr:where(.pf-v6-c-table__tr).pf-m-tree-view-details-expanded td:where(.pf-v6-c-table__td)[data-label] {
+ display: grid;
+ }
+ .pf-m-tree-view-grid-lg.pf-v6-c-table .pf-v6-c-table__thead {
+ display: none;
+ }
+ .pf-m-tree-view-grid-lg.pf-v6-c-table .pf-v6-c-table__tree-view-details-toggle,
+ .pf-m-tree-view-grid-lg.pf-v6-c-table .pf-v6-c-table__action {
+ display: inline-block;
+ }
+ .pf-m-tree-view-grid-lg.pf-v6-c-table .pf-v6-c-table__action {
+ --pf-v6-c-table--cell--Width: auto;
+ --pf-v6-c-table--m-tree-view-grid__tbody--cell--PaddingInlineStart: var(--pf-v6-c-table--m-tree-view-grid--c-table__action--PaddingInlineStart);
+ --pf-v6-c-table--m-tree-view-grid__td--not--c-table__tree-view-title-cell--PaddingBlockStart: var(--pf-v6-c-table--m-tree-view-grid--c-table__action--PaddingBlockStart);
+ --pf-v6-c-table--m-tree-view-grid__td--not--c-table__tree-view-title-cell--PaddingBlockEnd: var(--pf-v6-c-table--m-tree-view-grid--c-table__action--PaddingBlockEnd);
+ grid-row: 1;
+ grid-column: 2;
+ margin-block-start: var(--pf-v6-c-table--m-tree-view-grid__action--MarginBlockStart);
+ margin-block-end: var(--pf-v6-c-table--m-tree-view-grid__action--MarginBlockEnd);
+ }
+ .pf-m-tree-view-grid-lg.pf-v6-c-table .pf-v6-c-table__tree-view-main > .pf-v6-c-table__check {
+ order: var(--pf-v6-c-table--m-tree-view-mobile__tree-view-main--c-table__check--Order);
+ margin-inline-start: auto;
+ margin-inline-end: var(--pf-v6-c-table--m-tree-view-mobile__tree-view-main--c-table__check--MarginInlineEnd);
+ }
+ .pf-m-tree-view-grid-lg.pf-v6-c-table .pf-v6-c-table__tree-view-details-toggle {
+ margin-block-start: var(--pf-v6-c-table__tree-view-details-toggle--MarginBlockStart);
+ margin-block-end: var(--pf-v6-c-table__tree-view-details-toggle--MarginBlockEnd);
+ }
+ .pf-m-tree-view-grid-lg.pf-v6-c-table tr:where(.pf-v6-c-table__tr)[aria-level="2"] {
+ --pf-v6-c-table--m-tree-view-grid__tbody--cell--PaddingInlineStart: calc(var(--pf-v6-c-table__tree-view-main--nested-indent--base) * 1 + var(--pf-v6-c-table__tree-view-main--indent--base));
+ }
+ .pf-m-tree-view-grid-lg.pf-v6-c-table tr:where(.pf-v6-c-table__tr)[aria-level="3"] {
+ --pf-v6-c-table--m-tree-view-grid__tbody--cell--PaddingInlineStart: calc(var(--pf-v6-c-table__tree-view-main--nested-indent--base) * 2 + var(--pf-v6-c-table__tree-view-main--indent--base));
+ }
+ .pf-m-tree-view-grid-lg.pf-v6-c-table tr:where(.pf-v6-c-table__tr)[aria-level="4"] {
+ --pf-v6-c-table--m-tree-view-grid__tbody--cell--PaddingInlineStart: calc(var(--pf-v6-c-table__tree-view-main--nested-indent--base) * 3 + var(--pf-v6-c-table__tree-view-main--indent--base));
+ }
+ .pf-m-tree-view-grid-lg.pf-v6-c-table tr:where(.pf-v6-c-table__tr)[aria-level="5"] {
+ --pf-v6-c-table--m-tree-view-grid__tbody--cell--PaddingInlineStart: calc(var(--pf-v6-c-table__tree-view-main--nested-indent--base) * 4 + var(--pf-v6-c-table__tree-view-main--indent--base));
+ }
+ .pf-m-tree-view-grid-lg.pf-v6-c-table tr:where(.pf-v6-c-table__tr)[aria-level="6"] {
+ --pf-v6-c-table--m-tree-view-grid__tbody--cell--PaddingInlineStart: calc(var(--pf-v6-c-table__tree-view-main--nested-indent--base) * 5 + var(--pf-v6-c-table__tree-view-main--indent--base));
+ }
+ .pf-m-tree-view-grid-lg.pf-v6-c-table tr:where(.pf-v6-c-table__tr)[aria-level="7"] {
+ --pf-v6-c-table--m-tree-view-grid__tbody--cell--PaddingInlineStart: calc(var(--pf-v6-c-table__tree-view-main--nested-indent--base) * 6 + var(--pf-v6-c-table__tree-view-main--indent--base));
+ }
+ .pf-m-tree-view-grid-lg.pf-v6-c-table tr:where(.pf-v6-c-table__tr)[aria-level="8"] {
+ --pf-v6-c-table--m-tree-view-grid__tbody--cell--PaddingInlineStart: calc(var(--pf-v6-c-table__tree-view-main--nested-indent--base) * 7 + var(--pf-v6-c-table__tree-view-main--indent--base));
+ }
+ .pf-m-tree-view-grid-lg.pf-v6-c-table tr:where(.pf-v6-c-table__tr)[aria-level="9"] {
+ --pf-v6-c-table--m-tree-view-grid__tbody--cell--PaddingInlineStart: calc(var(--pf-v6-c-table__tree-view-main--nested-indent--base) * 8 + var(--pf-v6-c-table__tree-view-main--indent--base));
+ }
+ .pf-m-tree-view-grid-lg.pf-v6-c-table tr:where(.pf-v6-c-table__tr)[aria-level="10"] {
+ --pf-v6-c-table--m-tree-view-grid__tbody--cell--PaddingInlineStart: calc(var(--pf-v6-c-table__tree-view-main--nested-indent--base) * 9 + var(--pf-v6-c-table__tree-view-main--indent--base));
+ }
+}
+
+@media screen and (max-width: calc(75rem - 1px)) {
+ .pf-m-tree-view-grid-xl.pf-v6-c-table {
+ --pf-v6-c-table--m-tree-view-grid--tr--OutlineOffset: calc(-1 * var(--pf-t--global--spacer--xs));
+ --pf-v6-c-table--m-tree-view-grid__tbody--cell--PaddingBlockStart: var(--pf-t--global--spacer--md);
+ --pf-v6-c-table--m-tree-view-grid__tbody--cell--PaddingBlockEnd: var(--pf-t--global--spacer--md);
+ --pf-v6-c-table--m-tree-view-grid__tbody--cell--PaddingInlineStart: var(--pf-v6-c-table__tree-view-main--indent--base);
+ --pf-v6-c-table--m-tree-view-grid__tbody--cell--GridColumnGap: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-table--m-tree-view-grid--c-table__action--PaddingBlockStart: var(--pf-t--global--spacer--md);
+ --pf-v6-c-table--m-tree-view-grid--c-table__action--PaddingBlockEnd: var(--pf-t--global--spacer--md);
+ --pf-v6-c-table--m-tree-view-grid--c-table__action--PaddingInlineStart: 0;
+ --pf-v6-c-table--m-tree-view-grid__tr--expanded__tree-view-title-cell--action--PaddingBlockStart: var(--pf-t--global--spacer--xl);
+ --pf-v6-c-table--m-tree-view-grid--m-tree-view-details-expanded--PaddingBlockEnd: var(--pf-t--global--spacer--xl);
+ --pf-v6-c-table--m-tree-view-grid__tr--expanded__tree-view-title-cell--PaddingBlockStart: var(--pf-t--global--spacer--xl);
+ --pf-v6-c-table--m-tree-view-grid__td--data-label--GridTemplateColumns: repeat(auto-fit, minmax(150px, 1fr));
+ --pf-v6-c-table--m-tree-view-grid__td--not--c-table__tree-view-title-cell--PaddingBlockStart: var(--pf-t--global--spacer--xs);
+ --pf-v6-c-table--m-tree-view-grid__td--not--c-table__tree-view-title-cell--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
+ --pf-v6-c-table--m-tree-view-mobile__tree-view-main--c-table__check--MarginInlineEnd: 0;
+ --pf-v6-c-table--m-tree-view-mobile__tree-view-main--c-table__check--Order: 4;
+ --pf-v6-c-table__tree-view-text--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-table__tbody--cell--PaddingBlockStart: var(--pf-v6-c-table--m-tree-view-grid__tbody--cell--PaddingBlockStart);
+ --pf-v6-c-table__tbody--cell--PaddingBlockEnd: var(--pf-v6-c-table--m-tree-view-grid__tbody--cell--PaddingBlockEnd);
+ --pf-v6-c-table__tree-view-details-toggle--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--plain) * -1);
+ --pf-v6-c-table__tree-view-details-toggle--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--plain) * -1);
+ --pf-v6-c-table--m-tree-view-grid__action--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--plain) * -1);
+ --pf-v6-c-table--m-tree-view-grid__action--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--plain) * -1);
+ }
+ .pf-m-tree-view-grid-xl.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody) tr:where(.pf-v6-c-table__tr) {
+ position: relative;
+ border: none;
+ outline-offset: var(--pf-v6-c-table--m-tree-view-grid--tr--OutlineOffset);
+ }
+ .pf-m-tree-view-grid-xl.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody) tr:where(.pf-v6-c-table__tr)::before {
+ position: absolute;
+ inset-block-start: 0;
+ inset-block-end: 0;
+ inset-inline-start: var(--pf-v6-c-table--m-tree-view-grid__tbody--cell--PaddingInlineStart);
+ inset-inline-end: 0;
+ content: "";
+ border-block-end: var(--pf-v6-c-table--border-width--base) solid var(--pf-v6-c-table--BorderColor);
+ }
+ .pf-m-tree-view-grid-xl.pf-v6-c-table tr:where(.pf-v6-c-table__tr):not([hidden]) {
+ display: grid;
+ grid-template-columns: 1fr max-content;
+ }
+ .pf-m-tree-view-grid-xl.pf-v6-c-table tr:where(.pf-v6-c-table__tr)[aria-expanded] .pf-v6-c-table__tree-view-title-cell {
+ --pf-v6-c-table--cell--PaddingBlockStart: var(--pf-v6-c-table--m-tree-view-grid__tr--expanded__tree-view-title-cell--PaddingBlockStart);
+ }
+ .pf-m-tree-view-grid-xl.pf-v6-c-table tr:where(.pf-v6-c-table__tr)[aria-expanded] .pf-v6-c-table__tree-view-title-cell ~ .pf-v6-c-table__action {
+ --pf-v6-c-table--cell--PaddingBlockStart: var(--pf-v6-c-table--m-tree-view-grid__tr--expanded__tree-view-title-cell--action--PaddingBlockStart);
+ }
+ .pf-m-tree-view-grid-xl.pf-v6-c-table td:where(.pf-v6-c-table__td):not(.pf-v6-c-table__tree-view-title-cell) {
+ --pf-v6-c-table--cell--PaddingBlockStart: var(--pf-v6-c-table--m-tree-view-grid__td--not--c-table__tree-view-title-cell--PaddingBlockStart);
+ --pf-v6-c-table--cell--PaddingBlockEnd: var(--pf-v6-c-table--m-tree-view-grid__td--not--c-table__tree-view-title-cell--PaddingBlockEnd);
+ padding-inline-start: var(--pf-v6-c-table--m-tree-view-grid__tbody--cell--PaddingInlineStart);
+ }
+ .pf-m-tree-view-grid-xl.pf-v6-c-table .pf-v6-c-table__tree-view-text {
+ padding-inline-end: var(--pf-v6-c-table__tree-view-text--PaddingInlineEnd);
+ }
+ .pf-m-tree-view-grid-xl.pf-v6-c-table thead:where(.pf-v6-c-table__thead) th:where(.pf-v6-c-table__th) {
+ display: none;
+ }
+ .pf-m-tree-view-grid-xl.pf-v6-c-table td:where(.pf-v6-c-table__td) {
+ display: none;
+ }
+ .pf-m-tree-view-grid-xl.pf-v6-c-table td:where(.pf-v6-c-table__td)[data-label] {
+ grid-template-columns: var(--pf-v6-c-table--m-tree-view-grid__td--data-label--GridTemplateColumns);
+ grid-column: 1;
+ grid-column-gap: var(--pf-v6-c-table--m-tree-view-grid__tbody--cell--GridColumnGap);
+ align-items: start;
+ }
+ .pf-m-tree-view-grid-xl.pf-v6-c-table td:where(.pf-v6-c-table__td)[data-label] > :where(th, td) {
+ grid-column: 2;
+ }
+ .pf-m-tree-view-grid-xl.pf-v6-c-table td:where(.pf-v6-c-table__td)[data-label]::before {
+ position: revert;
+ font-weight: var(--pf-t--global--font--weight--body--bold);
+ text-align: start;
+ content: attr(data-label);
+ }
+ .pf-m-tree-view-grid-xl.pf-v6-c-table .pf-v6-c-table__tr > :where(th, td).pf-m-border-right::before {
+ border-inline-end: 0;
+ }
+ .pf-m-tree-view-grid-xl.pf-v6-c-table tr:where(.pf-v6-c-table__tr).pf-m-tree-view-details-expanded {
+ padding-block-end: var(--pf-v6-c-table--m-tree-view-grid--m-tree-view-details-expanded--PaddingBlockEnd);
+ }
+ .pf-m-tree-view-grid-xl.pf-v6-c-table tr:where(.pf-v6-c-table__tr).pf-m-tree-view-details-expanded td:where(.pf-v6-c-table__td)[data-label] {
+ display: grid;
+ }
+ .pf-m-tree-view-grid-xl.pf-v6-c-table .pf-v6-c-table__thead {
+ display: none;
+ }
+ .pf-m-tree-view-grid-xl.pf-v6-c-table .pf-v6-c-table__tree-view-details-toggle,
+ .pf-m-tree-view-grid-xl.pf-v6-c-table .pf-v6-c-table__action {
+ display: inline-block;
+ }
+ .pf-m-tree-view-grid-xl.pf-v6-c-table .pf-v6-c-table__action {
+ --pf-v6-c-table--cell--Width: auto;
+ --pf-v6-c-table--m-tree-view-grid__tbody--cell--PaddingInlineStart: var(--pf-v6-c-table--m-tree-view-grid--c-table__action--PaddingInlineStart);
+ --pf-v6-c-table--m-tree-view-grid__td--not--c-table__tree-view-title-cell--PaddingBlockStart: var(--pf-v6-c-table--m-tree-view-grid--c-table__action--PaddingBlockStart);
+ --pf-v6-c-table--m-tree-view-grid__td--not--c-table__tree-view-title-cell--PaddingBlockEnd: var(--pf-v6-c-table--m-tree-view-grid--c-table__action--PaddingBlockEnd);
+ grid-row: 1;
+ grid-column: 2;
+ margin-block-start: var(--pf-v6-c-table--m-tree-view-grid__action--MarginBlockStart);
+ margin-block-end: var(--pf-v6-c-table--m-tree-view-grid__action--MarginBlockEnd);
+ }
+ .pf-m-tree-view-grid-xl.pf-v6-c-table .pf-v6-c-table__tree-view-main > .pf-v6-c-table__check {
+ order: var(--pf-v6-c-table--m-tree-view-mobile__tree-view-main--c-table__check--Order);
+ margin-inline-start: auto;
+ margin-inline-end: var(--pf-v6-c-table--m-tree-view-mobile__tree-view-main--c-table__check--MarginInlineEnd);
+ }
+ .pf-m-tree-view-grid-xl.pf-v6-c-table .pf-v6-c-table__tree-view-details-toggle {
+ margin-block-start: var(--pf-v6-c-table__tree-view-details-toggle--MarginBlockStart);
+ margin-block-end: var(--pf-v6-c-table__tree-view-details-toggle--MarginBlockEnd);
+ }
+ .pf-m-tree-view-grid-xl.pf-v6-c-table tr:where(.pf-v6-c-table__tr)[aria-level="2"] {
+ --pf-v6-c-table--m-tree-view-grid__tbody--cell--PaddingInlineStart: calc(var(--pf-v6-c-table__tree-view-main--nested-indent--base) * 1 + var(--pf-v6-c-table__tree-view-main--indent--base));
+ }
+ .pf-m-tree-view-grid-xl.pf-v6-c-table tr:where(.pf-v6-c-table__tr)[aria-level="3"] {
+ --pf-v6-c-table--m-tree-view-grid__tbody--cell--PaddingInlineStart: calc(var(--pf-v6-c-table__tree-view-main--nested-indent--base) * 2 + var(--pf-v6-c-table__tree-view-main--indent--base));
+ }
+ .pf-m-tree-view-grid-xl.pf-v6-c-table tr:where(.pf-v6-c-table__tr)[aria-level="4"] {
+ --pf-v6-c-table--m-tree-view-grid__tbody--cell--PaddingInlineStart: calc(var(--pf-v6-c-table__tree-view-main--nested-indent--base) * 3 + var(--pf-v6-c-table__tree-view-main--indent--base));
+ }
+ .pf-m-tree-view-grid-xl.pf-v6-c-table tr:where(.pf-v6-c-table__tr)[aria-level="5"] {
+ --pf-v6-c-table--m-tree-view-grid__tbody--cell--PaddingInlineStart: calc(var(--pf-v6-c-table__tree-view-main--nested-indent--base) * 4 + var(--pf-v6-c-table__tree-view-main--indent--base));
+ }
+ .pf-m-tree-view-grid-xl.pf-v6-c-table tr:where(.pf-v6-c-table__tr)[aria-level="6"] {
+ --pf-v6-c-table--m-tree-view-grid__tbody--cell--PaddingInlineStart: calc(var(--pf-v6-c-table__tree-view-main--nested-indent--base) * 5 + var(--pf-v6-c-table__tree-view-main--indent--base));
+ }
+ .pf-m-tree-view-grid-xl.pf-v6-c-table tr:where(.pf-v6-c-table__tr)[aria-level="7"] {
+ --pf-v6-c-table--m-tree-view-grid__tbody--cell--PaddingInlineStart: calc(var(--pf-v6-c-table__tree-view-main--nested-indent--base) * 6 + var(--pf-v6-c-table__tree-view-main--indent--base));
+ }
+ .pf-m-tree-view-grid-xl.pf-v6-c-table tr:where(.pf-v6-c-table__tr)[aria-level="8"] {
+ --pf-v6-c-table--m-tree-view-grid__tbody--cell--PaddingInlineStart: calc(var(--pf-v6-c-table__tree-view-main--nested-indent--base) * 7 + var(--pf-v6-c-table__tree-view-main--indent--base));
+ }
+ .pf-m-tree-view-grid-xl.pf-v6-c-table tr:where(.pf-v6-c-table__tr)[aria-level="9"] {
+ --pf-v6-c-table--m-tree-view-grid__tbody--cell--PaddingInlineStart: calc(var(--pf-v6-c-table__tree-view-main--nested-indent--base) * 8 + var(--pf-v6-c-table__tree-view-main--indent--base));
+ }
+ .pf-m-tree-view-grid-xl.pf-v6-c-table tr:where(.pf-v6-c-table__tr)[aria-level="10"] {
+ --pf-v6-c-table--m-tree-view-grid__tbody--cell--PaddingInlineStart: calc(var(--pf-v6-c-table__tree-view-main--nested-indent--base) * 9 + var(--pf-v6-c-table__tree-view-main--indent--base));
+ }
+}
+
+@media screen and (max-width: calc(90.625rem - 1px)) {
+ .pf-m-tree-view-grid-2xl.pf-v6-c-table {
+ --pf-v6-c-table--m-tree-view-grid--tr--OutlineOffset: calc(-1 * var(--pf-t--global--spacer--xs));
+ --pf-v6-c-table--m-tree-view-grid__tbody--cell--PaddingBlockStart: var(--pf-t--global--spacer--md);
+ --pf-v6-c-table--m-tree-view-grid__tbody--cell--PaddingBlockEnd: var(--pf-t--global--spacer--md);
+ --pf-v6-c-table--m-tree-view-grid__tbody--cell--PaddingInlineStart: var(--pf-v6-c-table__tree-view-main--indent--base);
+ --pf-v6-c-table--m-tree-view-grid__tbody--cell--GridColumnGap: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-table--m-tree-view-grid--c-table__action--PaddingBlockStart: var(--pf-t--global--spacer--md);
+ --pf-v6-c-table--m-tree-view-grid--c-table__action--PaddingBlockEnd: var(--pf-t--global--spacer--md);
+ --pf-v6-c-table--m-tree-view-grid--c-table__action--PaddingInlineStart: 0;
+ --pf-v6-c-table--m-tree-view-grid__tr--expanded__tree-view-title-cell--action--PaddingBlockStart: var(--pf-t--global--spacer--xl);
+ --pf-v6-c-table--m-tree-view-grid--m-tree-view-details-expanded--PaddingBlockEnd: var(--pf-t--global--spacer--xl);
+ --pf-v6-c-table--m-tree-view-grid__tr--expanded__tree-view-title-cell--PaddingBlockStart: var(--pf-t--global--spacer--xl);
+ --pf-v6-c-table--m-tree-view-grid__td--data-label--GridTemplateColumns: repeat(auto-fit, minmax(150px, 1fr));
+ --pf-v6-c-table--m-tree-view-grid__td--not--c-table__tree-view-title-cell--PaddingBlockStart: var(--pf-t--global--spacer--xs);
+ --pf-v6-c-table--m-tree-view-grid__td--not--c-table__tree-view-title-cell--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
+ --pf-v6-c-table--m-tree-view-mobile__tree-view-main--c-table__check--MarginInlineEnd: 0;
+ --pf-v6-c-table--m-tree-view-mobile__tree-view-main--c-table__check--Order: 4;
+ --pf-v6-c-table__tree-view-text--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-table__tbody--cell--PaddingBlockStart: var(--pf-v6-c-table--m-tree-view-grid__tbody--cell--PaddingBlockStart);
+ --pf-v6-c-table__tbody--cell--PaddingBlockEnd: var(--pf-v6-c-table--m-tree-view-grid__tbody--cell--PaddingBlockEnd);
+ --pf-v6-c-table__tree-view-details-toggle--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--plain) * -1);
+ --pf-v6-c-table__tree-view-details-toggle--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--plain) * -1);
+ --pf-v6-c-table--m-tree-view-grid__action--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--plain) * -1);
+ --pf-v6-c-table--m-tree-view-grid__action--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--plain) * -1);
+ }
+ .pf-m-tree-view-grid-2xl.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody) tr:where(.pf-v6-c-table__tr) {
+ position: relative;
+ border: none;
+ outline-offset: var(--pf-v6-c-table--m-tree-view-grid--tr--OutlineOffset);
+ }
+ .pf-m-tree-view-grid-2xl.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody) tr:where(.pf-v6-c-table__tr)::before {
+ position: absolute;
+ inset-block-start: 0;
+ inset-block-end: 0;
+ inset-inline-start: var(--pf-v6-c-table--m-tree-view-grid__tbody--cell--PaddingInlineStart);
+ inset-inline-end: 0;
+ content: "";
+ border-block-end: var(--pf-v6-c-table--border-width--base) solid var(--pf-v6-c-table--BorderColor);
+ }
+ .pf-m-tree-view-grid-2xl.pf-v6-c-table tr:where(.pf-v6-c-table__tr):not([hidden]) {
+ display: grid;
+ grid-template-columns: 1fr max-content;
+ }
+ .pf-m-tree-view-grid-2xl.pf-v6-c-table tr:where(.pf-v6-c-table__tr)[aria-expanded] .pf-v6-c-table__tree-view-title-cell {
+ --pf-v6-c-table--cell--PaddingBlockStart: var(--pf-v6-c-table--m-tree-view-grid__tr--expanded__tree-view-title-cell--PaddingBlockStart);
+ }
+ .pf-m-tree-view-grid-2xl.pf-v6-c-table tr:where(.pf-v6-c-table__tr)[aria-expanded] .pf-v6-c-table__tree-view-title-cell ~ .pf-v6-c-table__action {
+ --pf-v6-c-table--cell--PaddingBlockStart: var(--pf-v6-c-table--m-tree-view-grid__tr--expanded__tree-view-title-cell--action--PaddingBlockStart);
+ }
+ .pf-m-tree-view-grid-2xl.pf-v6-c-table td:where(.pf-v6-c-table__td):not(.pf-v6-c-table__tree-view-title-cell) {
+ --pf-v6-c-table--cell--PaddingBlockStart: var(--pf-v6-c-table--m-tree-view-grid__td--not--c-table__tree-view-title-cell--PaddingBlockStart);
+ --pf-v6-c-table--cell--PaddingBlockEnd: var(--pf-v6-c-table--m-tree-view-grid__td--not--c-table__tree-view-title-cell--PaddingBlockEnd);
+ padding-inline-start: var(--pf-v6-c-table--m-tree-view-grid__tbody--cell--PaddingInlineStart);
+ }
+ .pf-m-tree-view-grid-2xl.pf-v6-c-table .pf-v6-c-table__tree-view-text {
+ padding-inline-end: var(--pf-v6-c-table__tree-view-text--PaddingInlineEnd);
+ }
+ .pf-m-tree-view-grid-2xl.pf-v6-c-table thead:where(.pf-v6-c-table__thead) th:where(.pf-v6-c-table__th) {
+ display: none;
+ }
+ .pf-m-tree-view-grid-2xl.pf-v6-c-table td:where(.pf-v6-c-table__td) {
+ display: none;
+ }
+ .pf-m-tree-view-grid-2xl.pf-v6-c-table td:where(.pf-v6-c-table__td)[data-label] {
+ grid-template-columns: var(--pf-v6-c-table--m-tree-view-grid__td--data-label--GridTemplateColumns);
+ grid-column: 1;
+ grid-column-gap: var(--pf-v6-c-table--m-tree-view-grid__tbody--cell--GridColumnGap);
+ align-items: start;
+ }
+ .pf-m-tree-view-grid-2xl.pf-v6-c-table td:where(.pf-v6-c-table__td)[data-label] > :where(th, td) {
+ grid-column: 2;
+ }
+ .pf-m-tree-view-grid-2xl.pf-v6-c-table td:where(.pf-v6-c-table__td)[data-label]::before {
+ position: revert;
+ font-weight: var(--pf-t--global--font--weight--body--bold);
+ text-align: start;
+ content: attr(data-label);
+ }
+ .pf-m-tree-view-grid-2xl.pf-v6-c-table .pf-v6-c-table__tr > :where(th, td).pf-m-border-right::before {
+ border-inline-end: 0;
+ }
+ .pf-m-tree-view-grid-2xl.pf-v6-c-table tr:where(.pf-v6-c-table__tr).pf-m-tree-view-details-expanded {
+ padding-block-end: var(--pf-v6-c-table--m-tree-view-grid--m-tree-view-details-expanded--PaddingBlockEnd);
+ }
+ .pf-m-tree-view-grid-2xl.pf-v6-c-table tr:where(.pf-v6-c-table__tr).pf-m-tree-view-details-expanded td:where(.pf-v6-c-table__td)[data-label] {
+ display: grid;
+ }
+ .pf-m-tree-view-grid-2xl.pf-v6-c-table .pf-v6-c-table__thead {
+ display: none;
+ }
+ .pf-m-tree-view-grid-2xl.pf-v6-c-table .pf-v6-c-table__tree-view-details-toggle,
+ .pf-m-tree-view-grid-2xl.pf-v6-c-table .pf-v6-c-table__action {
+ display: inline-block;
+ }
+ .pf-m-tree-view-grid-2xl.pf-v6-c-table .pf-v6-c-table__action {
+ --pf-v6-c-table--cell--Width: auto;
+ --pf-v6-c-table--m-tree-view-grid__tbody--cell--PaddingInlineStart: var(--pf-v6-c-table--m-tree-view-grid--c-table__action--PaddingInlineStart);
+ --pf-v6-c-table--m-tree-view-grid__td--not--c-table__tree-view-title-cell--PaddingBlockStart: var(--pf-v6-c-table--m-tree-view-grid--c-table__action--PaddingBlockStart);
+ --pf-v6-c-table--m-tree-view-grid__td--not--c-table__tree-view-title-cell--PaddingBlockEnd: var(--pf-v6-c-table--m-tree-view-grid--c-table__action--PaddingBlockEnd);
+ grid-row: 1;
+ grid-column: 2;
+ margin-block-start: var(--pf-v6-c-table--m-tree-view-grid__action--MarginBlockStart);
+ margin-block-end: var(--pf-v6-c-table--m-tree-view-grid__action--MarginBlockEnd);
+ }
+ .pf-m-tree-view-grid-2xl.pf-v6-c-table .pf-v6-c-table__tree-view-main > .pf-v6-c-table__check {
+ order: var(--pf-v6-c-table--m-tree-view-mobile__tree-view-main--c-table__check--Order);
+ margin-inline-start: auto;
+ margin-inline-end: var(--pf-v6-c-table--m-tree-view-mobile__tree-view-main--c-table__check--MarginInlineEnd);
+ }
+ .pf-m-tree-view-grid-2xl.pf-v6-c-table .pf-v6-c-table__tree-view-details-toggle {
+ margin-block-start: var(--pf-v6-c-table__tree-view-details-toggle--MarginBlockStart);
+ margin-block-end: var(--pf-v6-c-table__tree-view-details-toggle--MarginBlockEnd);
+ }
+ .pf-m-tree-view-grid-2xl.pf-v6-c-table tr:where(.pf-v6-c-table__tr)[aria-level="2"] {
+ --pf-v6-c-table--m-tree-view-grid__tbody--cell--PaddingInlineStart: calc(var(--pf-v6-c-table__tree-view-main--nested-indent--base) * 1 + var(--pf-v6-c-table__tree-view-main--indent--base));
+ }
+ .pf-m-tree-view-grid-2xl.pf-v6-c-table tr:where(.pf-v6-c-table__tr)[aria-level="3"] {
+ --pf-v6-c-table--m-tree-view-grid__tbody--cell--PaddingInlineStart: calc(var(--pf-v6-c-table__tree-view-main--nested-indent--base) * 2 + var(--pf-v6-c-table__tree-view-main--indent--base));
+ }
+ .pf-m-tree-view-grid-2xl.pf-v6-c-table tr:where(.pf-v6-c-table__tr)[aria-level="4"] {
+ --pf-v6-c-table--m-tree-view-grid__tbody--cell--PaddingInlineStart: calc(var(--pf-v6-c-table__tree-view-main--nested-indent--base) * 3 + var(--pf-v6-c-table__tree-view-main--indent--base));
+ }
+ .pf-m-tree-view-grid-2xl.pf-v6-c-table tr:where(.pf-v6-c-table__tr)[aria-level="5"] {
+ --pf-v6-c-table--m-tree-view-grid__tbody--cell--PaddingInlineStart: calc(var(--pf-v6-c-table__tree-view-main--nested-indent--base) * 4 + var(--pf-v6-c-table__tree-view-main--indent--base));
+ }
+ .pf-m-tree-view-grid-2xl.pf-v6-c-table tr:where(.pf-v6-c-table__tr)[aria-level="6"] {
+ --pf-v6-c-table--m-tree-view-grid__tbody--cell--PaddingInlineStart: calc(var(--pf-v6-c-table__tree-view-main--nested-indent--base) * 5 + var(--pf-v6-c-table__tree-view-main--indent--base));
+ }
+ .pf-m-tree-view-grid-2xl.pf-v6-c-table tr:where(.pf-v6-c-table__tr)[aria-level="7"] {
+ --pf-v6-c-table--m-tree-view-grid__tbody--cell--PaddingInlineStart: calc(var(--pf-v6-c-table__tree-view-main--nested-indent--base) * 6 + var(--pf-v6-c-table__tree-view-main--indent--base));
+ }
+ .pf-m-tree-view-grid-2xl.pf-v6-c-table tr:where(.pf-v6-c-table__tr)[aria-level="8"] {
+ --pf-v6-c-table--m-tree-view-grid__tbody--cell--PaddingInlineStart: calc(var(--pf-v6-c-table__tree-view-main--nested-indent--base) * 7 + var(--pf-v6-c-table__tree-view-main--indent--base));
+ }
+ .pf-m-tree-view-grid-2xl.pf-v6-c-table tr:where(.pf-v6-c-table__tr)[aria-level="9"] {
+ --pf-v6-c-table--m-tree-view-grid__tbody--cell--PaddingInlineStart: calc(var(--pf-v6-c-table__tree-view-main--nested-indent--base) * 8 + var(--pf-v6-c-table__tree-view-main--indent--base));
+ }
+ .pf-m-tree-view-grid-2xl.pf-v6-c-table tr:where(.pf-v6-c-table__tr)[aria-level="10"] {
+ --pf-v6-c-table--m-tree-view-grid__tbody--cell--PaddingInlineStart: calc(var(--pf-v6-c-table__tree-view-main--nested-indent--base) * 9 + var(--pf-v6-c-table__tree-view-main--indent--base));
+ }
+}
+
+@property --pf-v6-c-tabs--link-accent--length {
+ syntax: "";
+ inherits: true;
+ initial-value: 0px;
+}
+@property --pf-v6-c-tabs--link-accent--start {
+ syntax: "";
+ inherits: true;
+ initial-value: 0px;
+}
+.pf-v6-c-tabs {
+ --pf-v6-c-tabs--inset: 0;
+ --pf-v6-c-tabs--Width: auto;
+ --pf-v6-c-tabs--before--BorderColor: var(--pf-t--global--border--color--default);
+ --pf-v6-c-tabs--before--border-width--base: var(--pf-t--global--border--width--regular);
+ --pf-v6-c-tabs--before--BorderBlockStartWidth: 0;
+ --pf-v6-c-tabs--before--BorderInlineEndWidth: 0;
+ --pf-v6-c-tabs--before--BorderBlockEndWidth: var(--pf-v6-c-tabs--before--border-width--base);
+ --pf-v6-c-tabs--before--BorderInlineStartWidth: 0;
+ --pf-v6-c-tabs--m-vertical--inset: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-tabs--m-page-insets--inset: var(--pf-t--global--spacer--md);
+ --pf-v6-c-tabs--m-vertical--Width: 100%;
+ --pf-v6-c-tabs--m-vertical--MaxWidth: 15.625rem;
+ --pf-v6-c-tabs--m-vertical--m-box--inset: var(--pf-t--global--spacer--md);
+ --pf-v6-c-tabs--m-vertical__list--before--BorderColor: var(--pf-v6-c-tabs--before--BorderColor);
+ --pf-v6-c-tabs--m-vertical__list--before--BorderBlockStartWidth: 0;
+ --pf-v6-c-tabs--m-vertical__list--before--BorderInlineEndWidth: 0;
+ --pf-v6-c-tabs--m-vertical__list--before--BorderBlockEndWidth: 0;
+ --pf-v6-c-tabs--m-vertical__list--before--BorderInlineStartWidth: var(--pf-v6-c-tabs--before--border-width--base);
+ --pf-v6-c-tabs__list--Display: flex;
+ --pf-v6-c-tabs__item--BackgroundColor: transparent;
+ --pf-v6-c-tabs__item--PaddingBlockStart: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-tabs__item--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-tabs__item--PaddingInlineStart: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-tabs__item--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-tabs__item--ColumnGap: var(--pf-t--global--spacer--xs);
+ --pf-v6-c-tabs--m-vertical__item--PaddingInlineStart: var(--pf-t--global--spacer--md);
+ --pf-v6-c-tabs--m-vertical__item--PaddingInlineEnd: var(--pf-t--global--spacer--md);
+ --pf-v6-c-tabs__item--m-current--BackgroundColor: transparent;
+ --pf-v6-c-tabs--m-box__item--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
+ --pf-v6-c-tabs--m-box__item--m-current--BackgroundColor: var(--pf-t--global--background--color--primary--default);
+ --pf-v6-c-tabs--m-box--m-secondary__item--BackgroundColor: var(--pf-t--global--background--color--primary--default);
+ --pf-v6-c-tabs--m-box--m-secondary__item--m-current--BackgroundColor: var(--pf-t--global--background--color--primary--clicked);
+ --pf-v6-c-tabs__item--m-action--before--ZIndex: var(--pf-t--global--z-index--sm);
+ --pf-v6-c-tabs__link--Color: var(--pf-t--global--text--color--subtle);
+ --pf-v6-c-tabs__link--FontSize: var(--pf-t--global--font--size--sm);
+ --pf-v6-c-tabs__link--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
+ --pf-v6-c-tabs__link--BorderRadius: var(--pf-t--global--border--radius--small);
+ --pf-v6-c-tabs__link--PaddingBlockStart: var(--pf-t--global--spacer--xs);
+ --pf-v6-c-tabs__link--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-tabs__link--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
+ --pf-v6-c-tabs__link--PaddingInlineStart: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-tabs__link--ColumnGap: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-tabs__link--disabled--Color: var(--pf-t--global--text--color--on-disabled);
+ --pf-v6-c-tabs__link--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
+ --pf-v6-c-tabs__link--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
+ --pf-v6-c-tabs__item--m-current__link--Color: var(--pf-t--global--text--color--regular);
+ --pf-v6-c-tabs__item--m-current__link--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
+ --pf-v6-c-tabs--m-vertical__link--PaddingInlineStart: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-tabs--m-vertical__link--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-tabs--m-box__link--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
+ --pf-v6-c-tabs--m-box__link--disabled--Color: var(--pf-t--global--text--color--on-disabled);
+ --pf-v6-c-tabs--m-box__link--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
+ --pf-v6-c-tabs--m-box__link--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
+ --pf-v6-c-tabs--m-box__item--m-current__link--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
+ --pf-v6-c-tabs--m-box--m-secondary__link--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
+ --pf-v6-c-tabs--m-box--m-secondary__link--disabled--Color: var(--pf-t--global--text--color--on-disabled);
+ --pf-v6-c-tabs--m-box--m-secondary__link--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
+ --pf-v6-c-tabs--m-box--m-secondary__link--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
+ --pf-v6-c-tabs--m-box--m-secondary__item--m-current__link--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
+ --pf-v6-c-tabs--m-subtab__link--FontSize: var(--pf-t--global--font--size--xs);
+ --pf-v6-c-tabs__link--TransitionDuration--background-color: var(--pf-t--global--motion--duration--fade--short);
+ --pf-v6-c-tabs__link--TransitionTimingFunction--background-color: var(--pf-t--global--motion--timing-function--default);
+ --pf-v6-c-tabs__link--before--border-color--base: var(--pf-t--global--border--color--default);
+ --pf-v6-c-tabs__link--before--border-width--base: var(--pf-t--global--border--width--regular);
+ --pf-v6-c-tabs__link--before--BorderBlockStartColor: var(--pf-v6-c-tabs__link--before--border-color--base);
+ --pf-v6-c-tabs__link--before--BorderInlineEndColor: var(--pf-v6-c-tabs__link--before--border-color--base);
+ --pf-v6-c-tabs__link--before--BorderBlockEndColor: var(--pf-v6-c-tabs__link--before--border-color--base);
+ --pf-v6-c-tabs__link--before--BorderInlineStartColor: var(--pf-v6-c-tabs__link--before--border-color--base);
+ --pf-v6-c-tabs__link--before--BorderBlockStartWidth: 0;
+ --pf-v6-c-tabs__link--before--BorderInlineEndWidth: 0;
+ --pf-v6-c-tabs__link--before--BorderBlockEndWidth: 0;
+ --pf-v6-c-tabs__link--before--BorderInlineStartWidth: 0;
+ --pf-v6-c-tabs__link--before--InsetInlineStart: calc(var(--pf-v6-c-tabs__link--before--border-width--base) * -1);
+ --pf-v6-c-tabs__link--disabled--before--BorderInlineEndWidth: 0;
+ --pf-v6-c-tabs__link--disabled--before--BorderBlockEndWidth: var(--pf-v6-c-tabs--before--border-width--base);
+ --pf-v6-c-tabs__link--disabled--before--BorderInlineStartWidth: 0;
+ --pf-v6-c-tabs__link--after--InsetBlockStart: auto;
+ --pf-v6-c-tabs__link--after--InsetInlineEnd: 0;
+ --pf-v6-c-tabs__link--after--InsetBlockEnd: 0;
+ --pf-v6-c-tabs__link--after--BorderColor: var(--pf-t--global--border--color--default);
+ --pf-v6-c-tabs__link--after--BorderWidth: 0;
+ --pf-v6-c-tabs__link--after--BorderBlockStartWidth: 0;
+ --pf-v6-c-tabs__link--after--BorderInlineEndWidth: 0;
+ --pf-v6-c-tabs__link--after--BorderInlineStartWidth: 0;
+ --pf-v6-c-tabs__item--m-current__link--after--BorderColor: var(--pf-t--global--border--color--clicked);
+ --pf-v6-c-tabs__item--m-current__link--after--BorderWidth: var(--pf-t--global--border--width--extra-strong);
+ --pf-v6-c-tabs--link-accent--start: 0;
+ --pf-v6-c-tabs--link-accent--length: 0;
+ --pf-v6-c-tabs--link-accent--color: var(--pf-v6-c-tabs__item--m-current__link--after--BorderColor);
+ --pf-v6-c-tabs--link-accent--border-size: var(--pf-v6-c-tabs__item--m-current__link--after--BorderWidth);
+ --pf-v6-c-tabs--link-accent--TransitionDuration: var(--pf-t--global--motion--duration--md);
+ --pf-v6-c-tabs--link-accent--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate);
+ --pf-v6-c-tabs--link-accent--InsetBlockStart: auto;
+ --pf-v6-c-tabs--link-accent--InsetBlockEnd: 0;
+ --pf-v6-c-tabs--link-accent--InsetInlineStart: 0;
+ --pf-v6-c-tabs--link-accent--Width: initial;
+ --pf-v6-c-tabs--link-accent--Height: 0;
+ --pf-v6-c-tabs--link-accent--BorderBlockEndWidth: var(--pf-v6-c-tabs--link-accent--border-size);
+ --pf-v6-c-tabs--link-accent--BorderInlineStartWidth: 0;
+ --pf-v6-c-tabs--link-accent--TranslateX: var(--pf-v6-c-tabs--link-accent--start);
+ --pf-v6-c-tabs--link-accent--TranslateY: 0;
+ --pf-v6-c-tabs--link-accent--TransformOrigin: 0 center;
+ --pf-v6-c-tabs--m-vertical--link-accent--InsetBlockStart: 0;
+ --pf-v6-c-tabs--m-vertical--link-accent--InsetBlockEnd: auto;
+ --pf-v6-c-tabs--m-vertical--link-accent--BorderBlockEndWidth: 0;
+ --pf-v6-c-tabs--m-vertical--link-accent--BorderInlineStartWidth: var(--pf-v6-c-tabs--link-accent--border-size);
+ --pf-v6-c-tabs--m-vertical--link-accent--TranslateX: 0;
+ --pf-v6-c-tabs--m-vertical--link-accent--TranslateY: var(--pf-v6-c-tabs--link-accent--start);
+ --pf-v6-c-tabs--m-vertical--link-accent--TransformOrigin: center 0;
+ --pf-v6-c-tabs__scroll-button--PaddingBlockStart: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-tabs__scroll-button--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-tabs__scroll-button--PaddingInlineStart: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-tabs__scroll-button--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-tabs__scroll-button--Width: var(--pf-t--global--spacer--2xl);
+ --pf-v6-c-tabs__scroll-button--TransitionDuration--margin: .125s;
+ --pf-v6-c-tabs__scroll-button--TransitionDuration--transform: .125s;
+ --pf-v6-c-tabs__scroll-button--TransitionDuration--opacity: .125s;
+ --pf-v6-c-tabs__scroll-button--before--BorderColor: var(--pf-v6-c-tabs--before--BorderColor);
+ --pf-v6-c-tabs__scroll-button--before--border-width--base: var(--pf-t--global--border--width--regular);
+ --pf-v6-c-tabs__scroll-button--before--BorderInlineEndWidth: 0;
+ --pf-v6-c-tabs__scroll-button--before--BorderBlockEndWidth: var(--pf-v6-c-tabs__scroll-button--before--border-width--base);
+ --pf-v6-c-tabs__scroll-button--before--BorderInlineStartWidth: 0;
+ --pf-v6-c-tabs__list--ScrollSnapTypeAxis: x;
+ --pf-v6-c-tabs__list--ScrollSnapTypeStrictness: proximity;
+ --pf-v6-c-tabs__list--ScrollSnapType: var(--pf-v6-c-tabs__list--ScrollSnapTypeAxis) var(--pf-v6-c-tabs__list--ScrollSnapTypeStrictness);
+ --pf-v6-c-tabs__item--ScrollSnapAlign: end;
+ --pf-v6-c-tabs--m-vertical__list--ScrollSnapTypeAxis: y;
+ --pf-v6-c-tabs__toggle--Display: flex;
+ --pf-v6-c-tabs__toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
+ --pf-v6-c-tabs__toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
+ --pf-v6-c-tabs__toggle-icon--Transition: transform var(--pf-v6-c-tabs__toggle-icon--TransitionDuration) var(--pf-v6-c-tabs__toggle-icon--TransitionTimingFunction);
+ --pf-v6-c-tabs__toggle-icon--Rotate: 0;
+ --pf-v6-c-tabs--m-expanded__toggle-icon--Rotate: 90deg;
+ --pf-v6-c-tabs--m-expandable--RowGap: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-tabs--m-expandable--PaddingBlockStart: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-tabs--m-expandable--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-tabs--m-expandable--PaddingInlineStart: var(--pf-t--global--spacer--md);
+ --pf-v6-c-tabs--m-expandable--PaddingInlineEnd: var(--pf-t--global--spacer--md);
+ --pf-v6-c-tabs__item-action--c-button--FontSize: var(--pf-t--global--font--size--sm);
+ --pf-v6-c-tabs--m-subtab__item-action--c-button--FontSize: var(--pf-t--global--font--size--xs);
+ --pf-v6-c-tabs__item-action-icon--MarginBlockStart: 0.125rem;
+ --pf-v6-c-tabs__add--before--BorderColor: var(--pf-v6-c-tabs__link--before--border-color--base);
+ --pf-v6-c-tabs__add--before--BorderInlineStartWidth: var(--pf-v6-c-tabs__link--before--border-width--base);
+ --pf-v6-c-tabs__add--c-button--FontSize: var(--pf-t--global--font--size--sm);
+ --pf-v6-c-tabs--m-subtab__add--c-button--FontSize: var(--pf-t--global--font--size--xs);
+ --pf-v6-c-tabs__add--PaddingBlockStart: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-tabs__add--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-tabs__add--PaddingInlineStart: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-tabs__add--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-tabs__link-toggle-icon--Color: var(--pf-t--global--icon--color--regular);
+ --pf-v6-c-tabs__link-toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
+ --pf-v6-c-tabs__link-toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
+ --pf-v6-c-tabs__link-toggle-icon--Transition: transform var(--pf-v6-c-tabs__link-toggle-icon--TransitionDuration) var(--pf-v6-c-tabs__link-toggle-icon--TransitionTimingFunction);
+ --pf-v6-c-tabs__link-toggle-icon--Rotate: 0;
+ --pf-v6-c-tabs__link-toggle-icon--FontSize: var(--pf-t--global--font--size--sm);
+ --pf-v6-c-tabs__link--m-expanded__toggle-icon--Rotate: 90deg;
+}
+
+.pf-v6-c-tabs {
+ position: relative;
+ display: flex;
+ width: var(--pf-v6-c-tabs--Width);
+ padding-inline-start: var(--pf-v6-c-tabs--inset);
+ padding-inline-end: var(--pf-v6-c-tabs--inset);
+ overflow: hidden;
+}
+.pf-v6-c-tabs::before {
+ position: absolute;
+ inset-block-end: 0;
+ inset-inline-start: 0;
+ inset-inline-end: 0;
+ border: solid var(--pf-v6-c-tabs--before--BorderColor);
+ border-block-start-width: var(--pf-v6-c-tabs--before--BorderBlockStartWidth);
+ border-block-end-width: var(--pf-v6-c-tabs--before--BorderBlockEndWidth);
+ border-inline-start-width: var(--pf-v6-c-tabs--before--BorderInlineStartWidth);
+ border-inline-end-width: var(--pf-v6-c-tabs--before--BorderInlineEndWidth);
+}
+.pf-v6-c-tabs.pf-m-fill .pf-v6-c-tabs__list {
+ flex-basis: 100%;
+}
+.pf-v6-c-tabs.pf-m-fill .pf-v6-c-tabs__item {
+ flex-grow: 1;
+}
+.pf-v6-c-tabs.pf-m-fill .pf-v6-c-tabs__item:first-child {
+ --pf-v6-c-tabs--m-box__item--m-current--first-child__link--before--BorderInlineStartWidth: 0;
+}
+.pf-v6-c-tabs.pf-m-fill .pf-v6-c-tabs__item:last-child {
+ --pf-v6-c-tabs--m-box__item--m-current--last-child__link--before--BorderInlineEndWidth: 0;
+}
+.pf-v6-c-tabs.pf-m-fill .pf-v6-c-tabs__link {
+ flex-basis: 100%;
+ justify-content: center;
+}
+.pf-v6-c-tabs.pf-m-scrollable .pf-v6-c-tabs__scroll-button {
+ opacity: 1;
+}
+.pf-v6-c-tabs.pf-m-scrollable .pf-v6-c-tabs__scroll-button:nth-of-type(1) {
+ margin-inline-end: 0;
+ transform: translateX(0);
+}
+.pf-v6-c-tabs.pf-m-scrollable .pf-v6-c-tabs__scroll-button:nth-of-type(2) {
+ margin-inline-start: 0;
+ transform: translateX(0);
+}
+.pf-v6-c-tabs.pf-m-no-border-bottom {
+ --pf-v6-c-tabs--before--BorderBlockEndWidth: 0;
+ --pf-v6-c-tabs__link--disabled--before--BorderBlockEndWidth: 0;
+}
+.pf-v6-c-tabs.pf-m-box .pf-v6-c-tabs__link, .pf-v6-c-tabs.pf-m-vertical .pf-v6-c-tabs__link {
+ --pf-v6-c-tabs__link--after--BorderBlockEndWidth: 0;
+}
+.pf-v6-c-tabs.pf-m-box {
+ --pf-v6-c-tabs__item--BackgroundColor: var(--pf-v6-c-tabs--m-box__item--BackgroundColor);
+ --pf-v6-c-tabs__item--m-current--BackgroundColor: var(--pf-v6-c-tabs--m-box__item--m-current--BackgroundColor);
+ --pf-v6-c-tabs__link--BackgroundColor: var(--pf-v6-c-tabs--m-box__link--BackgroundColor);
+ --pf-v6-c-tabs__link--disabled--Color: var(--pf-v6-c-tabs--m-box__link--disabled--Color);
+ --pf-v6-c-tabs__link--disabled--BackgroundColor: var(--pf-v6-c-tabs--m-box__link--disabled--BackgroundColor);
+ --pf-v6-c-tabs__link--hover--BackgroundColor: var(--pf-v6-c-tabs--m-box__link--hover--BackgroundColor);
+ --pf-v6-c-tabs__item--m-current__link--BackgroundColor: var(--pf-v6-c-tabs--m-box__item--m-current__link--BackgroundColor);
+ --pf-v6-c-tabs__link--before--BorderBlockEndWidth: var(--pf-v6-c-tabs__link--before--border-width--base);
+ --pf-v6-c-tabs__link--after--InsetBlockStart: 0;
+ --pf-v6-c-tabs__link--after--InsetBlockEnd: auto;
+}
+.pf-v6-c-tabs.pf-m-box .pf-v6-c-tabs__link {
+ --pf-v6-c-tabs__link--after--BorderBlockStartWidth: var(--pf-v6-c-tabs__link--after--BorderWidth);
+}
+.pf-v6-c-tabs.pf-m-box .pf-v6-c-tabs__item:last-child {
+ --pf-v6-c-tabs__link--before--BorderInlineEndWidth: 0;
+}
+.pf-v6-c-tabs.pf-m-box .pf-v6-c-tabs__item.pf-m-current {
+ --pf-v6-c-tabs__link--BackgroundColor: var(--pf-v6-c-tabs__item--m-current__link--BackgroundColor);
+ --pf-v6-c-tabs__link--before--BorderBlockEndColor: var(--pf-v6-c-tabs__link--BackgroundColor);
+}
+.pf-v6-c-tabs.pf-m-box.pf-m-scrollable .pf-v6-c-tabs__item.pf-m-current:first-child .pf-v6-c-tabs__link::before {
+ inset-inline-start: calc(var(--pf-v6-c-tabs__link--before--border-width--base) * -1);
+}
+.pf-v6-c-tabs.pf-m-box.pf-m-scrollable .pf-v6-c-tabs__scroll-button:nth-of-type(2)::before {
+ inset-inline-start: calc(var(--pf-v6-c-tabs__link--before--border-width--base) * -1);
+}
+.pf-v6-c-tabs.pf-m-box .pf-v6-c-tabs__item.pf-m-current + .pf-v6-c-tabs__item {
+ --pf-v6-c-tabs__link--before--InsetInlineStart: 0;
+}
+.pf-v6-c-tabs.pf-m-box.pf-m-secondary {
+ --pf-v6-c-tabs__item--BackgroundColor: var(--pf-v6-c-tabs--m-box--m-secondary__item--BackgroundColor);
+ --pf-v6-c-tabs__item--m-current--BackgroundColor: var(--pf-v6-c-tabs--m-box--m-secondary__item--m-current--BackgroundColor);
+ --pf-v6-c-tabs__link--BackgroundColor: var(--pf-v6-c-tabs--m-box--m-secondary__link--BackgroundColor);
+ --pf-v6-c-tabs__link--disabled--Color: var(--pf-v6-c-tabs--m-box--m-secondary__link--disabled--Color);
+ --pf-v6-c-tabs__link--disabled--BackgroundColor: var(--pf-v6-c-tabs--m-box--m-secondary__link--disabled--BackgroundColor);
+ --pf-v6-c-tabs__link--hover--BackgroundColor: var(--pf-v6-c-tabs--m-box--m-secondary__link--hover--BackgroundColor);
+ --pf-v6-c-tabs__item--m-current__link--BackgroundColor: var(--pf-v6-c-tabs--m-box--m-secondary__item--m-current__link--BackgroundColor);
+}
+.pf-v6-c-tabs.pf-m-vertical {
+ --pf-v6-c-tabs--Width: var(--pf-v6-c-tabs--m-vertical--Width);
+ --pf-v6-c-tabs--inset: var(--pf-v6-c-tabs--m-vertical--inset);
+ --pf-v6-c-tabs--before--BorderBlockEndWidth: 0;
+ --pf-v6-c-tabs__item--PaddingInlineStart: var(--pf-v6-c-tabs--m-vertical__item--PaddingInlineStart);
+ --pf-v6-c-tabs__item--PaddingInlineEnd: var(--pf-v6-c-tabs--m-vertical__item--PaddingInlineEnd);
+ --pf-v6-c-tabs__link--PaddingInlineStart: var(--pf-v6-c-tabs--m-vertical__link--PaddingInlineStart);
+ --pf-v6-c-tabs__link--PaddingInlineEnd: var(--pf-v6-c-tabs--m-vertical__link--PaddingInlineEnd);
+ --pf-v6-c-tabs__link--before--InsetInlineStart: 0;
+ --pf-v6-c-tabs__link--disabled--before--BorderBlockEndWidth: 0;
+ --pf-v6-c-tabs__link--disabled--before--BorderInlineStartWidth: var(--pf-v6-c-tabs--before--border-width--base);
+ --pf-v6-c-tabs__link--after--InsetBlockStart: 0;
+ --pf-v6-c-tabs__link--after--InsetBlockEnd: 0;
+ --pf-v6-c-tabs__link--after--InsetInlineEnd: auto;
+ --pf-v6-c-tabs__list--ScrollSnapTypeAxis: var(--pf-v6-c-tabs--m-vertical__list--ScrollSnapTypeAxis);
+ --pf-v6-c-tabs--link-accent--InsetBlockStart: var(--pf-v6-c-tabs--m-vertical--link-accent--InsetBlockStart);
+ --pf-v6-c-tabs--link-accent--InsetBlockEnd: var(--pf-v6-c-tabs--m-vertical--link-accent--InsetBlockEnd);
+ --pf-v6-c-tabs--link-accent--Width: var(--pf-v6-c-tabs--m-vertical--link-accent--Width);
+ --pf-v6-c-tabs--link-accent--Height: var(--pf-v6-c-tabs--m-vertical--link-accent--Height);
+ --pf-v6-c-tabs--link-accent--BorderBlockEndWidth: var(--pf-v6-c-tabs--m-vertical--link-accent--BorderBlockEndWidth);
+ --pf-v6-c-tabs--link-accent--BorderInlineStartWidth: var(--pf-v6-c-tabs--m-vertical--link-accent--BorderInlineStartWidth);
+ --pf-v6-c-tabs--link-accent--TranslateX: var(--pf-v6-c-tabs--m-vertical--link-accent--TranslateX);
+ --pf-v6-c-tabs--link-accent--TranslateY: var(--pf-v6-c-tabs--m-vertical--link-accent--TranslateY);
+ --pf-v6-c-tabs--link-accent--TransformOrigin: var(--pf-v6-c-tabs--m-vertical--link-accent--TransformOrigin);
+ display: inline-flex;
+ flex-direction: column;
+ height: 100%;
+ padding: 0;
+ overflow: visible;
+}
+.pf-v6-c-tabs.pf-m-vertical .pf-v6-c-tabs__list {
+ position: relative;
+ flex-direction: column;
+ flex-grow: 1;
+ max-width: var(--pf-v6-c-tabs--m-vertical--MaxWidth);
+}
+.pf-v6-c-tabs.pf-m-vertical .pf-v6-c-tabs__list::before {
+ position: absolute;
+ inset-inline-end: auto;
+ border: solid var(--pf-v6-c-tabs--m-vertical__list--before--BorderColor);
+ border-block-start-width: var(--pf-v6-c-tabs--m-vertical__list--before--BorderBlockStartWidth);
+ border-block-end-width: var(--pf-v6-c-tabs--m-vertical__list--before--BorderBlockEndWidth);
+ border-inline-start-width: var(--pf-v6-c-tabs--m-vertical__list--before--BorderInlineStartWidth);
+ border-inline-end-width: var(--pf-v6-c-tabs--m-vertical__list--before--BorderInlineEndWidth);
+}
+.pf-v6-c-tabs.pf-m-vertical .pf-v6-c-tabs__item:first-child {
+ margin-block-start: var(--pf-v6-c-tabs--inset);
+}
+.pf-v6-c-tabs.pf-m-vertical .pf-v6-c-tabs__item:last-child {
+ margin-block-end: var(--pf-v6-c-tabs--inset);
+}
+.pf-v6-c-tabs.pf-m-vertical .pf-v6-c-tabs__link {
+ --pf-v6-c-tabs__link--after--BorderBlockStartWidth: 0;
+ --pf-v6-c-tabs__link--after--BorderInlineStartWidth: var(--pf-v6-c-tabs__link--after--BorderWidth);
+ max-width: 100%;
+ text-align: start;
+}
+.pf-v6-c-tabs.pf-m-vertical .pf-v6-c-tabs__item-text {
+ max-width: 100%;
+ overflow-wrap: break-word;
+}
+.pf-v6-c-tabs.pf-m-vertical.pf-m-expandable {
+ --pf-v6-c-tabs__list--Display: none;
+ --pf-v6-c-tabs__toggle--Display: flex;
+}
+.pf-v6-c-tabs.pf-m-vertical.pf-m-non-expandable {
+ --pf-v6-c-tabs__list--Display: flex;
+ --pf-v6-c-tabs__toggle--Display: none;
+}
+@media (min-width: 36rem) {
+ .pf-v6-c-tabs.pf-m-vertical.pf-m-expandable-on-sm {
+ --pf-v6-c-tabs__list--Display: none;
+ --pf-v6-c-tabs__toggle--Display: flex;
+ }
+ .pf-v6-c-tabs.pf-m-vertical.pf-m-non-expandable-on-sm {
+ --pf-v6-c-tabs__list--Display: flex;
+ --pf-v6-c-tabs__toggle--Display: none;
+ }
+}
+@media (min-width: 48rem) {
+ .pf-v6-c-tabs.pf-m-vertical.pf-m-expandable-on-md {
+ --pf-v6-c-tabs__list--Display: none;
+ --pf-v6-c-tabs__toggle--Display: flex;
+ }
+ .pf-v6-c-tabs.pf-m-vertical.pf-m-non-expandable-on-md {
+ --pf-v6-c-tabs__list--Display: flex;
+ --pf-v6-c-tabs__toggle--Display: none;
+ }
+}
+@media (min-width: 62rem) {
+ .pf-v6-c-tabs.pf-m-vertical.pf-m-expandable-on-lg {
+ --pf-v6-c-tabs__list--Display: none;
+ --pf-v6-c-tabs__toggle--Display: flex;
+ }
+ .pf-v6-c-tabs.pf-m-vertical.pf-m-non-expandable-on-lg {
+ --pf-v6-c-tabs__list--Display: flex;
+ --pf-v6-c-tabs__toggle--Display: none;
+ }
+}
+@media (min-width: 75rem) {
+ .pf-v6-c-tabs.pf-m-vertical.pf-m-expandable-on-xl {
+ --pf-v6-c-tabs__list--Display: none;
+ --pf-v6-c-tabs__toggle--Display: flex;
+ }
+ .pf-v6-c-tabs.pf-m-vertical.pf-m-non-expandable-on-xl {
+ --pf-v6-c-tabs__list--Display: flex;
+ --pf-v6-c-tabs__toggle--Display: none;
+ }
+}
+@media (min-width: 90.625rem) {
+ .pf-v6-c-tabs.pf-m-vertical.pf-m-expandable-on-2xl {
+ --pf-v6-c-tabs__list--Display: none;
+ --pf-v6-c-tabs__toggle--Display: flex;
+ }
+ .pf-v6-c-tabs.pf-m-vertical.pf-m-non-expandable-on-2xl {
+ --pf-v6-c-tabs__list--Display: flex;
+ --pf-v6-c-tabs__toggle--Display: none;
+ }
+}
+.pf-v6-c-tabs.pf-m-vertical.pf-m-expandable {
+ row-gap: var(--pf-v6-c-tabs--m-expandable--RowGap);
+ padding-block-start: var(--pf-v6-c-tabs--m-expandable--PaddingBlockStart);
+ padding-block-end: var(--pf-v6-c-tabs--m-expandable--PaddingBlockEnd);
+ padding-inline-start: var(--pf-v6-c-tabs--m-expandable--PaddingInlineStart);
+ padding-inline-end: var(--pf-v6-c-tabs--m-expandable--PaddingInlineEnd);
+}
+.pf-v6-c-tabs.pf-m-vertical.pf-m-expanded {
+ --pf-v6-c-tabs__list--Display: flex;
+ --pf-v6-c-tabs__toggle-icon--Rotate: var(--pf-v6-c-tabs--m-expanded__toggle-icon--Rotate);
+}
+.pf-v6-c-tabs.pf-m-box.pf-m-vertical {
+ --pf-v6-c-tabs--inset: var(--pf-v6-c-tabs--m-vertical--m-box--inset);
+ --pf-v6-c-tabs--m-vertical__list--before--BorderInlineStartWidth: 0;
+ --pf-v6-c-tabs--m-vertical__list--before--BorderInlineEndWidth: var(--pf-v6-c-tabs--before--border-width--base);
+ --pf-v6-c-tabs__link--before--BorderInlineEndWidth: var(--pf-v6-c-tabs__link--before--border-width--base);
+ --pf-v6-c-tabs__link--disabled--before--BorderInlineEndWidth: var(--pf-v6-c-tabs--before--border-width--base);
+ --pf-v6-c-tabs__link--disabled--before--BorderBlockEndWidth: var(--pf-v6-c-tabs--before--border-width--base);
+ --pf-v6-c-tabs__link--disabled--before--BorderInlineStartWidth: 0;
+}
+.pf-v6-c-tabs.pf-m-box.pf-m-vertical .pf-v6-c-tabs__list::before {
+ inset-inline-start: auto;
+ inset-inline-end: 0;
+}
+.pf-v6-c-tabs.pf-m-box.pf-m-vertical .pf-v6-c-tabs__item:last-child {
+ --pf-v6-c-tabs__link--before--BorderInlineEndWidth: var(--pf-v6-c-tabs__link--before--border-width--base);
+}
+.pf-v6-c-tabs.pf-m-box.pf-m-vertical .pf-v6-c-tabs__item:first-child {
+ --pf-v6-c-tabs__link--before--BorderBlockStartWidth: var(--pf-v6-c-tabs__link--before--border-width--base);
+}
+.pf-v6-c-tabs.pf-m-box.pf-m-vertical .pf-v6-c-tabs__item.pf-m-current {
+ --pf-v6-c-tabs__link--before--BorderInlineEndColor: var(--pf-v6-c-tabs__item--m-current__link--BackgroundColor);
+ --pf-v6-c-tabs__link--before--BorderBlockEndColor: var(--pf-v6-c-tabs__link--before--border-color--base);
+}
+.pf-v6-c-tabs.pf-m-box.pf-m-vertical .pf-v6-c-tabs__item:first-child.pf-m-current {
+ --pf-v6-c-tabs__link--before--BorderBlockStartWidth: var(--pf-v6-c-tabs__link--before--border-width--base);
+}
+.pf-v6-c-tabs.pf-m-box.pf-m-vertical .pf-v6-c-tabs__link::after {
+ inset-block-start: calc(var(--pf-v6-c-tabs__link--before--border-width--base) * -1);
+}
+.pf-v6-c-tabs.pf-m-box.pf-m-vertical .pf-v6-c-tabs__item:first-child .pf-v6-c-tabs__link::after,
+.pf-v6-c-tabs.pf-m-box.pf-m-vertical .pf-v6-c-tabs__item.pf-m-current + .pf-v6-c-tabs__item .pf-v6-c-tabs__link::after {
+ inset-block-start: 0;
+}
+.pf-v6-c-tabs.pf-m-subtab {
+ --pf-v6-c-tabs__link--FontSize: var(--pf-v6-c-tabs--m-subtab__link--FontSize);
+ --pf-v6-c-tabs__item-action--c-button--FontSize: var(--pf-v6-c-tabs--m-subtab__item-action--c-button--FontSize);
+ --pf-v6-c-tabs__add--c-button--FontSize: var(--pf-v6-c-tabs--m-subtab__add--c-button--FontSize);
+}
+.pf-v6-c-tabs.pf-m-page-insets {
+ --pf-v6-c-tabs--inset: var(--pf-v6-c-tabs--m-page-insets--inset);
+}
+.pf-v6-c-tabs.pf-m-overflow,
+.pf-v6-c-tabs.pf-m-overflow .pf-v6-c-tabs__list {
+ overflow: visible;
+}
+
+.pf-v6-c-tabs__toggle {
+ display: var(--pf-v6-c-tabs__toggle--Display);
+ align-items: center;
+}
+
+.pf-v6-c-tabs__toggle-button .pf-v6-c-button {
+ justify-content: start;
+ white-space: normal;
+}
+
+.pf-v6-c-tabs__toggle-icon {
+ display: inline-block;
+ transition: var(--pf-v6-c-tabs__toggle-icon--Transition);
+ transform: rotate(var(--pf-v6-c-tabs__toggle-icon--Rotate));
+}
+:where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-tabs__toggle-icon {
+ scale: -1 1;
+}
+
+.pf-v6-c-tabs__list {
+ scrollbar-width: none;
+ -ms-overflow-style: -ms-autohiding-scrollbar;
+ position: relative;
+ display: var(--pf-v6-c-tabs__list--Display);
+ max-width: 100%;
+ overflow-x: auto;
+ scroll-behavior: smooth;
+ scroll-snap-type: var(--pf-v6-c-tabs__list--ScrollSnapType);
+ -webkit-overflow-scrolling: touch;
+}
+.pf-v6-c-tabs__list::-webkit-scrollbar {
+ display: none;
+}
+
+.pf-v6-c-tabs__item {
+ position: relative;
+ display: flex;
+ flex: none;
+ column-gap: var(--pf-v6-c-tabs__item--ColumnGap);
+ scroll-snap-align: var(--pf-v6-c-tabs__item--ScrollSnapAlign);
+ padding-block-start: var(--pf-v6-c-tabs__item--PaddingBlockStart);
+ padding-block-end: var(--pf-v6-c-tabs__item--PaddingBlockEnd);
+ padding-inline-start: var(--pf-v6-c-tabs__item--PaddingInlineStart);
+ padding-inline-end: var(--pf-v6-c-tabs__item--PaddingInlineEnd);
+ background-color: var(--pf-v6-c-tabs__item--BackgroundColor);
+}
+.pf-v6-c-tabs__item.pf-m-current {
+ --pf-v6-c-tabs__link--Color: var(--pf-v6-c-tabs__item--m-current__link--Color);
+ --pf-v6-c-tabs__link--after--BorderColor: var(--pf-v6-c-tabs__item--m-current__link--after--BorderColor);
+ --pf-v6-c-tabs__link--after--BorderWidth: var(--pf-v6-c-tabs__item--m-current__link--after--BorderWidth);
+ --pf-v6-c-tabs__item--BackgroundColor: var(--pf-v6-c-tabs__item--m-current--BackgroundColor);
+}
+.pf-v6-c-tabs__item.pf-m-action {
+ position: relative;
+}
+.pf-v6-c-tabs__item.pf-m-action::before {
+ z-index: var(--pf-v6-c-tabs__item--m-action--before--ZIndex);
+}
+.pf-v6-c-tabs__item.pf-m-action .pf-v6-c-tabs__link::before,
+.pf-v6-c-tabs__item.pf-m-action .pf-v6-c-tabs__link::after {
+ content: revert;
+}
+
+.pf-v6-c-tabs::before,
+.pf-v6-c-tabs__list::before,
+.pf-v6-c-tabs__link::before,
+.pf-v6-c-tabs__link::after,
+.pf-v6-c-tabs__item.pf-m-action::before,
+.pf-v6-c-tabs__item.pf-m-action::after,
+.pf-v6-c-tabs__scroll-button::before,
+.pf-v6-c-tabs__add::before {
+ position: absolute;
+ inset-block-end: 0;
+ inset-inline-start: 0;
+ inset-inline-end: 0;
+ content: "";
+ border-style: solid;
+}
+
+.pf-v6-c-tabs__list::before,
+.pf-v6-c-tabs__link::before,
+.pf-v6-c-tabs__link::after,
+.pf-v6-c-tabs__item.pf-m-action::before,
+.pf-v6-c-tabs__item.pf-m-action::after,
+.pf-v6-c-tabs__scroll-button::before,
+.pf-v6-c-tabs__add::before {
+ inset-block-start: 0;
+}
+
+.pf-v6-c-tabs__link,
+.pf-v6-c-tabs__scroll-button,
+.pf-v6-c-tabs__list::before,
+.pf-v6-c-tabs__add::before {
+ border: 0;
+}
+
+.pf-v6-c-tabs__link {
+ display: flex;
+ flex: 1;
+ column-gap: var(--pf-v6-c-tabs__link--ColumnGap);
+ align-items: center;
+ padding-block-start: var(--pf-v6-c-tabs__link--PaddingBlockStart);
+ padding-block-end: var(--pf-v6-c-tabs__link--PaddingBlockEnd);
+ padding-inline-start: var(--pf-v6-c-tabs__link--PaddingInlineStart);
+ padding-inline-end: var(--pf-v6-c-tabs__link--PaddingInlineEnd);
+ font-size: var(--pf-v6-c-tabs__link--FontSize);
+ color: var(--pf-v6-c-tabs__link--Color);
+ text-decoration-line: none;
+ background-color: var(--pf-v6-c-tabs__link--BackgroundColor);
+ border-radius: var(--pf-v6-c-tabs__link--BorderRadius);
+ transition: background-color var(--pf-v6-c-tabs__link--TransitionDuration--background-color) var(--pf-v6-c-tabs__link--TransitionTimingFunction--background-color);
+}
+.pf-v6-c-tabs__item.pf-m-action, .pf-v6-c-tabs__link {
+ --pf-v6-c-tabs__link--after--BorderBlockEndWidth: var(--pf-v6-c-tabs__link--after--BorderWidth);
+}
+
+.pf-v6-c-tabs__item.pf-m-action::before, .pf-v6-c-tabs__link::before {
+ pointer-events: none;
+ border-block-start-color: var(--pf-v6-c-tabs__link--before--BorderBlockStartColor);
+ border-block-start-width: var(--pf-v6-c-tabs__link--before--BorderBlockStartWidth);
+ border-block-end-color: var(--pf-v6-c-tabs__link--before--BorderBlockEndColor);
+ border-block-end-width: var(--pf-v6-c-tabs__link--before--BorderBlockEndWidth);
+ border-inline-start-color: var(--pf-v6-c-tabs__link--before--BorderInlineStartColor);
+ border-inline-start-width: var(--pf-v6-c-tabs__link--before--BorderInlineStartWidth);
+ border-inline-end-color: var(--pf-v6-c-tabs__link--before--BorderInlineEndColor);
+ border-inline-end-width: var(--pf-v6-c-tabs__link--before--BorderInlineEndWidth);
+}
+
+.pf-v6-c-tabs__item.pf-m-action::after, .pf-v6-c-tabs__link::after {
+ inset-block-start: var(--pf-v6-c-tabs__link--after--InsetBlockStart);
+ inset-block-end: var(--pf-v6-c-tabs__link--after--InsetBlockEnd);
+ inset-inline-start: var(--pf-v6-c-tabs__link--before--InsetInlineStart);
+ inset-inline-end: var(--pf-v6-c-tabs__link--after--InsetInlineEnd);
+ border-color: var(--pf-v6-c-tabs__link--after--BorderColor);
+ border-block-start-width: var(--pf-v6-c-tabs__link--after--BorderBlockStartWidth);
+ border-block-end-width: var(--pf-v6-c-tabs__link--after--BorderBlockEndWidth);
+ border-inline-start-width: var(--pf-v6-c-tabs__link--after--BorderInlineStartWidth);
+ border-inline-end-width: var(--pf-v6-c-tabs__link--after--BorderInlineEndWidth);
+}
+
+.pf-v6-c-tabs__link:where(:hover, :focus) {
+ --pf-v6-c-tabs__link--BackgroundColor: var(--pf-v6-c-tabs__link--hover--BackgroundColor);
+ border: var(--pf-t--global--border--width--regular) solid var(--pf-t--global--border--color--high-contrast);
+ margin: calc(-1 * var(--pf-t--global--border--width--regular));
+}
+.pf-v6-c-tabs__link:disabled, .pf-v6-c-tabs__link.pf-m-disabled {
+ pointer-events: none;
+}
+.pf-v6-c-tabs__item.pf-m-action.pf-m-disabled, .pf-v6-c-tabs__link:disabled, .pf-v6-c-tabs__link.pf-m-disabled, .pf-v6-c-tabs__link.pf-m-aria-disabled {
+ --pf-v6-c-tabs__link--Color: var(--pf-v6-c-tabs__link--disabled--Color);
+ --pf-v6-c-tabs__link--before--BorderInlineEndWidth: var(--pf-v6-c-tabs__link--disabled--before--BorderInlineEndWidth);
+ --pf-v6-c-tabs__link--before--BorderBlockEndWidth: var(--pf-v6-c-tabs__link--disabled--before--BorderBlockEndWidth);
+ --pf-v6-c-tabs__link--before--BorderInlineStartWidth: var(--pf-v6-c-tabs__link--disabled--before--BorderInlineStartWidth);
+ --pf-v6-c-tabs__link--after--BorderWidth: 0;
+}
+
+.pf-v6-c-tabs__link:is(:disabled, .pf-m-disabled, .pf-m-aria-disabled) {
+ --pf-v6-c-tabs__link--BackgroundColor: var(--pf-v6-c-tabs__link--disabled--BackgroundColor);
+}
+.pf-v6-c-tabs__item.pf-m-action.pf-m-disabled {
+ --pf-v6-c-tabs__link--BackgroundColor: transparent;
+}
+
+.pf-v6-c-tabs__link.pf-m-aria-disabled {
+ cursor: default;
+}
+.pf-v6-c-tabs__link.pf-m-expanded {
+ --pf-v6-c-tabs__link-toggle-icon--Rotate: var(--pf-v6-c-tabs__link--m-expanded__toggle-icon--Rotate);
+}
+
+.pf-v6-c-tabs__link-toggle-icon {
+ align-self: end;
+ font-size: var(--pf-v6-c-tabs__link-toggle-icon--FontSize);
+ color: var(--pf-v6-c-tabs__link-toggle-icon--Color);
+ transition: var(--pf-v6-c-tabs__link-toggle-icon--Transition);
+ transform: rotate(var(--pf-v6-c-tabs__link-toggle-icon--Rotate));
+}
+:where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-tabs__link-toggle-icon {
+ scale: -1 1;
+}
+
+.pf-v6-c-tabs__item-action {
+ display: flex;
+}
+.pf-v6-c-tabs__item-action .pf-v6-c-button {
+ --pf-v6-c-button--FontSize: var(--pf-v6-c-tabs__item-action--c-button--FontSize);
+}
+
+.pf-v6-c-tabs__item-action-icon {
+ display: inline-block;
+ margin-block-start: var(--pf-v6-c-tabs__item-action-icon--MarginBlockStart);
+}
+
+.pf-v6-c-tabs__scroll-button {
+ padding-block-start: var(--pf-v6-c-tabs__scroll-button--PaddingBlockStart);
+ padding-block-end: var(--pf-v6-c-tabs__scroll-button--PaddingBlockEnd);
+ padding-inline-start: var(--pf-v6-c-tabs__scroll-button--PaddingInlineStart);
+ padding-inline-end: var(--pf-v6-c-tabs__scroll-button--PaddingInlineEnd);
+ opacity: 0;
+ transition: margin var(--pf-v6-c-tabs__scroll-button--TransitionDuration--margin), transform var(--pf-v6-c-tabs__scroll-button--TransitionDuration--transform), opacity var(--pf-v6-c-tabs__scroll-button--TransitionDuration--opacity);
+}
+.pf-v6-c-tabs__scroll-button::before {
+ border-color: var(--pf-v6-c-tabs__scroll-button--before--BorderColor);
+ border-block-start-width: 0;
+ border-block-end-width: var(--pf-v6-c-tabs__scroll-button--before--BorderBlockEndWidth);
+ border-inline-start-width: var(--pf-v6-c-tabs__scroll-button--before--BorderInlineStartWidth);
+ border-inline-end-width: var(--pf-v6-c-tabs__scroll-button--before--BorderInlineEndWidth);
+}
+.pf-v6-c-tabs__scroll-button:nth-of-type(1) {
+ --pf-v6-c-tabs__scroll-button--before--BorderInlineEndWidth: var(--pf-v6-c-tabs__scroll-button--before--border-width--base);
+ margin-inline-end: calc(var(--pf-v6-c-tabs__scroll-button--Width) * -1);
+ transform: translateX(-100%);
+}
+.pf-v6-c-tabs__scroll-button:nth-of-type(2) {
+ --pf-v6-c-tabs__scroll-button--before--BorderInlineStartWidth: var(--pf-v6-c-tabs__scroll-button--before--border-width--base);
+ margin-inline-start: calc(var(--pf-v6-c-tabs__scroll-button--Width) * -1);
+ transform: translateX(100%);
+}
+
+.pf-v6-c-tabs__add {
+ position: relative;
+ display: flex;
+ padding-block-start: var(--pf-v6-c-tabs__add--PaddingBlockStart);
+ padding-block-end: var(--pf-v6-c-tabs__add--PaddingBlockEnd);
+ padding-inline-start: var(--pf-v6-c-tabs__add--PaddingInlineStart);
+ padding-inline-end: var(--pf-v6-c-tabs__add--PaddingInlineEnd);
+}
+.pf-v6-c-tabs__add::before {
+ border-inline-start: var(--pf-v6-c-tabs__add--before--BorderInlineStartWidth) solid var(--pf-v6-c-tabs__add--before--BorderColor);
+}
+.pf-v6-c-tabs__add .pf-v6-c-button {
+ --pf-v6-c-button--FontSize: var(--pf-v6-c-tabs__add--c-button--FontSize);
+}
+
+.pf-v6-c-tabs.pf-m-inset-none {
+ --pf-v6-c-tabs--inset: 0;
+ --pf-v6-c-tabs--m-vertical--inset: 0;
+ --pf-v6-c-tabs--m-vertical--m-box--inset: 0;
+}
+.pf-v6-c-tabs.pf-m-inset-sm {
+ --pf-v6-c-tabs--inset: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-tabs--m-vertical--inset: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-tabs--m-vertical--m-box--inset: var(--pf-t--global--spacer--sm);
+}
+.pf-v6-c-tabs.pf-m-inset-md {
+ --pf-v6-c-tabs--inset: var(--pf-t--global--spacer--md);
+ --pf-v6-c-tabs--m-vertical--inset: var(--pf-t--global--spacer--md);
+ --pf-v6-c-tabs--m-vertical--m-box--inset: var(--pf-t--global--spacer--md);
+}
+.pf-v6-c-tabs.pf-m-inset-lg {
+ --pf-v6-c-tabs--inset: var(--pf-t--global--spacer--lg);
+ --pf-v6-c-tabs--m-vertical--inset: var(--pf-t--global--spacer--lg);
+ --pf-v6-c-tabs--m-vertical--m-box--inset: var(--pf-t--global--spacer--lg);
+}
+.pf-v6-c-tabs.pf-m-inset-xl {
+ --pf-v6-c-tabs--inset: var(--pf-t--global--spacer--xl);
+ --pf-v6-c-tabs--m-vertical--inset: var(--pf-t--global--spacer--xl);
+ --pf-v6-c-tabs--m-vertical--m-box--inset: var(--pf-t--global--spacer--xl);
+}
+.pf-v6-c-tabs.pf-m-inset-2xl {
+ --pf-v6-c-tabs--inset: var(--pf-t--global--spacer--2xl);
+ --pf-v6-c-tabs--m-vertical--inset: var(--pf-t--global--spacer--2xl);
+ --pf-v6-c-tabs--m-vertical--m-box--inset: var(--pf-t--global--spacer--2xl);
+}
+@media (min-width: 36rem) {
+ .pf-v6-c-tabs.pf-m-inset-none-on-sm {
+ --pf-v6-c-tabs--inset: 0;
+ --pf-v6-c-tabs--m-vertical--inset: 0;
+ --pf-v6-c-tabs--m-vertical--m-box--inset: 0;
+ }
+ .pf-v6-c-tabs.pf-m-inset-sm-on-sm {
+ --pf-v6-c-tabs--inset: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-tabs--m-vertical--inset: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-tabs--m-vertical--m-box--inset: var(--pf-t--global--spacer--sm);
+ }
+ .pf-v6-c-tabs.pf-m-inset-md-on-sm {
+ --pf-v6-c-tabs--inset: var(--pf-t--global--spacer--md);
+ --pf-v6-c-tabs--m-vertical--inset: var(--pf-t--global--spacer--md);
+ --pf-v6-c-tabs--m-vertical--m-box--inset: var(--pf-t--global--spacer--md);
+ }
+ .pf-v6-c-tabs.pf-m-inset-lg-on-sm {
+ --pf-v6-c-tabs--inset: var(--pf-t--global--spacer--lg);
+ --pf-v6-c-tabs--m-vertical--inset: var(--pf-t--global--spacer--lg);
+ --pf-v6-c-tabs--m-vertical--m-box--inset: var(--pf-t--global--spacer--lg);
+ }
+ .pf-v6-c-tabs.pf-m-inset-xl-on-sm {
+ --pf-v6-c-tabs--inset: var(--pf-t--global--spacer--xl);
+ --pf-v6-c-tabs--m-vertical--inset: var(--pf-t--global--spacer--xl);
+ --pf-v6-c-tabs--m-vertical--m-box--inset: var(--pf-t--global--spacer--xl);
+ }
+ .pf-v6-c-tabs.pf-m-inset-2xl-on-sm {
+ --pf-v6-c-tabs--inset: var(--pf-t--global--spacer--2xl);
+ --pf-v6-c-tabs--m-vertical--inset: var(--pf-t--global--spacer--2xl);
+ --pf-v6-c-tabs--m-vertical--m-box--inset: var(--pf-t--global--spacer--2xl);
+ }
+}
+@media (min-width: 48rem) {
+ .pf-v6-c-tabs.pf-m-inset-none-on-md {
+ --pf-v6-c-tabs--inset: 0;
+ --pf-v6-c-tabs--m-vertical--inset: 0;
+ --pf-v6-c-tabs--m-vertical--m-box--inset: 0;
+ }
+ .pf-v6-c-tabs.pf-m-inset-sm-on-md {
+ --pf-v6-c-tabs--inset: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-tabs--m-vertical--inset: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-tabs--m-vertical--m-box--inset: var(--pf-t--global--spacer--sm);
+ }
+ .pf-v6-c-tabs.pf-m-inset-md-on-md {
+ --pf-v6-c-tabs--inset: var(--pf-t--global--spacer--md);
+ --pf-v6-c-tabs--m-vertical--inset: var(--pf-t--global--spacer--md);
+ --pf-v6-c-tabs--m-vertical--m-box--inset: var(--pf-t--global--spacer--md);
+ }
+ .pf-v6-c-tabs.pf-m-inset-lg-on-md {
+ --pf-v6-c-tabs--inset: var(--pf-t--global--spacer--lg);
+ --pf-v6-c-tabs--m-vertical--inset: var(--pf-t--global--spacer--lg);
+ --pf-v6-c-tabs--m-vertical--m-box--inset: var(--pf-t--global--spacer--lg);
+ }
+ .pf-v6-c-tabs.pf-m-inset-xl-on-md {
+ --pf-v6-c-tabs--inset: var(--pf-t--global--spacer--xl);
+ --pf-v6-c-tabs--m-vertical--inset: var(--pf-t--global--spacer--xl);
+ --pf-v6-c-tabs--m-vertical--m-box--inset: var(--pf-t--global--spacer--xl);
+ }
+ .pf-v6-c-tabs.pf-m-inset-2xl-on-md {
+ --pf-v6-c-tabs--inset: var(--pf-t--global--spacer--2xl);
+ --pf-v6-c-tabs--m-vertical--inset: var(--pf-t--global--spacer--2xl);
+ --pf-v6-c-tabs--m-vertical--m-box--inset: var(--pf-t--global--spacer--2xl);
+ }
+}
+@media (min-width: 62rem) {
+ .pf-v6-c-tabs.pf-m-inset-none-on-lg {
+ --pf-v6-c-tabs--inset: 0;
+ --pf-v6-c-tabs--m-vertical--inset: 0;
+ --pf-v6-c-tabs--m-vertical--m-box--inset: 0;
+ }
+ .pf-v6-c-tabs.pf-m-inset-sm-on-lg {
+ --pf-v6-c-tabs--inset: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-tabs--m-vertical--inset: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-tabs--m-vertical--m-box--inset: var(--pf-t--global--spacer--sm);
+ }
+ .pf-v6-c-tabs.pf-m-inset-md-on-lg {
+ --pf-v6-c-tabs--inset: var(--pf-t--global--spacer--md);
+ --pf-v6-c-tabs--m-vertical--inset: var(--pf-t--global--spacer--md);
+ --pf-v6-c-tabs--m-vertical--m-box--inset: var(--pf-t--global--spacer--md);
+ }
+ .pf-v6-c-tabs.pf-m-inset-lg-on-lg {
+ --pf-v6-c-tabs--inset: var(--pf-t--global--spacer--lg);
+ --pf-v6-c-tabs--m-vertical--inset: var(--pf-t--global--spacer--lg);
+ --pf-v6-c-tabs--m-vertical--m-box--inset: var(--pf-t--global--spacer--lg);
+ }
+ .pf-v6-c-tabs.pf-m-inset-xl-on-lg {
+ --pf-v6-c-tabs--inset: var(--pf-t--global--spacer--xl);
+ --pf-v6-c-tabs--m-vertical--inset: var(--pf-t--global--spacer--xl);
+ --pf-v6-c-tabs--m-vertical--m-box--inset: var(--pf-t--global--spacer--xl);
+ }
+ .pf-v6-c-tabs.pf-m-inset-2xl-on-lg {
+ --pf-v6-c-tabs--inset: var(--pf-t--global--spacer--2xl);
+ --pf-v6-c-tabs--m-vertical--inset: var(--pf-t--global--spacer--2xl);
+ --pf-v6-c-tabs--m-vertical--m-box--inset: var(--pf-t--global--spacer--2xl);
+ }
+}
+@media (min-width: 75rem) {
+ .pf-v6-c-tabs.pf-m-inset-none-on-xl {
+ --pf-v6-c-tabs--inset: 0;
+ --pf-v6-c-tabs--m-vertical--inset: 0;
+ --pf-v6-c-tabs--m-vertical--m-box--inset: 0;
+ }
+ .pf-v6-c-tabs.pf-m-inset-sm-on-xl {
+ --pf-v6-c-tabs--inset: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-tabs--m-vertical--inset: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-tabs--m-vertical--m-box--inset: var(--pf-t--global--spacer--sm);
+ }
+ .pf-v6-c-tabs.pf-m-inset-md-on-xl {
+ --pf-v6-c-tabs--inset: var(--pf-t--global--spacer--md);
+ --pf-v6-c-tabs--m-vertical--inset: var(--pf-t--global--spacer--md);
+ --pf-v6-c-tabs--m-vertical--m-box--inset: var(--pf-t--global--spacer--md);
+ }
+ .pf-v6-c-tabs.pf-m-inset-lg-on-xl {
+ --pf-v6-c-tabs--inset: var(--pf-t--global--spacer--lg);
+ --pf-v6-c-tabs--m-vertical--inset: var(--pf-t--global--spacer--lg);
+ --pf-v6-c-tabs--m-vertical--m-box--inset: var(--pf-t--global--spacer--lg);
+ }
+ .pf-v6-c-tabs.pf-m-inset-xl-on-xl {
+ --pf-v6-c-tabs--inset: var(--pf-t--global--spacer--xl);
+ --pf-v6-c-tabs--m-vertical--inset: var(--pf-t--global--spacer--xl);
+ --pf-v6-c-tabs--m-vertical--m-box--inset: var(--pf-t--global--spacer--xl);
+ }
+ .pf-v6-c-tabs.pf-m-inset-2xl-on-xl {
+ --pf-v6-c-tabs--inset: var(--pf-t--global--spacer--2xl);
+ --pf-v6-c-tabs--m-vertical--inset: var(--pf-t--global--spacer--2xl);
+ --pf-v6-c-tabs--m-vertical--m-box--inset: var(--pf-t--global--spacer--2xl);
+ }
+}
+@media (min-width: 90.625rem) {
+ .pf-v6-c-tabs.pf-m-inset-none-on-2xl {
+ --pf-v6-c-tabs--inset: 0;
+ --pf-v6-c-tabs--m-vertical--inset: 0;
+ --pf-v6-c-tabs--m-vertical--m-box--inset: 0;
+ }
+ .pf-v6-c-tabs.pf-m-inset-sm-on-2xl {
+ --pf-v6-c-tabs--inset: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-tabs--m-vertical--inset: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-tabs--m-vertical--m-box--inset: var(--pf-t--global--spacer--sm);
+ }
+ .pf-v6-c-tabs.pf-m-inset-md-on-2xl {
+ --pf-v6-c-tabs--inset: var(--pf-t--global--spacer--md);
+ --pf-v6-c-tabs--m-vertical--inset: var(--pf-t--global--spacer--md);
+ --pf-v6-c-tabs--m-vertical--m-box--inset: var(--pf-t--global--spacer--md);
+ }
+ .pf-v6-c-tabs.pf-m-inset-lg-on-2xl {
+ --pf-v6-c-tabs--inset: var(--pf-t--global--spacer--lg);
+ --pf-v6-c-tabs--m-vertical--inset: var(--pf-t--global--spacer--lg);
+ --pf-v6-c-tabs--m-vertical--m-box--inset: var(--pf-t--global--spacer--lg);
+ }
+ .pf-v6-c-tabs.pf-m-inset-xl-on-2xl {
+ --pf-v6-c-tabs--inset: var(--pf-t--global--spacer--xl);
+ --pf-v6-c-tabs--m-vertical--inset: var(--pf-t--global--spacer--xl);
+ --pf-v6-c-tabs--m-vertical--m-box--inset: var(--pf-t--global--spacer--xl);
+ }
+ .pf-v6-c-tabs.pf-m-inset-2xl-on-2xl {
+ --pf-v6-c-tabs--inset: var(--pf-t--global--spacer--2xl);
+ --pf-v6-c-tabs--m-vertical--inset: var(--pf-t--global--spacer--2xl);
+ --pf-v6-c-tabs--m-vertical--m-box--inset: var(--pf-t--global--spacer--2xl);
+ }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+ .pf-v6-c-tabs.pf-m-animate-current:not(.pf-m-box) .pf-v6-c-tabs__link::after,
+ .pf-v6-c-tabs.pf-m-animate-current:not(.pf-m-box) .pf-v6-c-tabs__item.pf-m-action::after {
+ content: revert;
+ }
+ .pf-v6-c-tabs.pf-m-animate-current:not(.pf-m-box) .pf-v6-c-tabs__list::after {
+ position: absolute;
+ inset-block-start: var(--pf-v6-c-tabs--link-accent--InsetBlockStart);
+ inset-block-end: var(--pf-v6-c-tabs--link-accent--InsetBlockEnd);
+ inset-inline-start: var(--pf-v6-c-tabs--link-accent--InsetInlineStart);
+ width: var(--pf-v6-c-tabs--link-accent--Width, var(--pf-v6-c-tabs--link-accent--length));
+ height: var(--pf-v6-c-tabs--link-accent--Height, var(--pf-v6-c-tabs--link-accent--length));
+ content: "";
+ border: 0 solid var(--pf-v6-c-tabs--link-accent--color);
+ border-block-end-width: var(--pf-v6-c-tabs--link-accent--BorderBlockEndWidth);
+ border-inline-start-width: var(--pf-v6-c-tabs--link-accent--BorderInlineStartWidth);
+ transition-timing-function: var(--pf-v6-c-tabs--link-accent--TransitionTimingFunction);
+ transition-duration: var(--pf-v6-c-tabs--link-accent--TransitionDuration);
+ transition-property: width, height, translate;
+ transform-origin: var(--pf-v6-c-tabs--link-accent--TransformOrigin);
+ translate: var(--pf-v6-c-tabs--link-accent--TranslateX) var(--pf-v6-c-tabs--link-accent--TranslateY);
+ }
+ :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-tabs.pf-m-animate-current:not(.pf-m-box) .pf-v6-c-tabs__list::after {
+ translate: calc(var(--pf-v6-c-tabs--link-accent--TranslateX) * var(--pf-v6-global--inverse--multiplier)) var(--pf-v6-c-tabs--link-accent--TranslateY);
+ }
+ .pf-v6-c-tabs.pf-m-initializing-accent {
+ --pf-v6-c-tabs--link-accent--TransitionDuration: 0;
+ }
+}
+.pf-v6-c-text-input-group {
+ --pf-v6-c-text-input-group--BackgroundColor: var(--pf-t--global--background--color--control--default);
+ --pf-v6-c-text-input-group--BorderColor: var(--pf-t--global--border--color--default);
+ --pf-v6-c-text-input-group--m-success--BorderColor: var(--pf-t--global--border--color--status--success--default);
+ --pf-v6-c-text-input-group--m-warning--BorderColor: var(--pf-t--global--border--color--status--warning--default);
+ --pf-v6-c-text-input-group--m-error--BorderColor: var(--pf-t--global--border--color--status--danger--default);
+ --pf-v6-c-text-input-group--BorderWidth: var(--pf-t--global--border--width--control--default);
+ --pf-v6-c-text-input-group__LineHeight: var(--pf-t--global--font--line-height--body);
+ --pf-v6-c-text-input-group__FontSize: var(--pf-t--global--font--size--body--default);
+ --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-t--global--border--color--hover);
+ --pf-v6-c-text-input-group--m-hover--m-success--BorderColor: var(--pf-t--global--border--color--status--success--hover);
+ --pf-v6-c-text-input-group--m-hover--m-warning--BorderColor: var(--pf-t--global--border--color--status--warning--hover);
+ --pf-v6-c-text-input-group--m-hover--m-error--BorderColor: var(--pf-t--global--border--color--status--danger--hover);
+ --pf-v6-c-text-input-group__main--first-child--not--text-input--MarginInlineStart: calc(var(--pf-t--global--spacer--control--horizontal--plain) / 2);
+ --pf-v6-c-text-input-group__main--m-icon__text-input--PaddingInlineStart: calc(var(--pf-t--global--spacer--control--horizontal--default) + var(--pf-v6-c-text-input-group__icon--FontSize) + var(--pf-t--global--spacer--gap--text-to-element--default));
+ --pf-v6-c-text-input-group--status__text-input--PaddingInlineEnd: calc(var(--pf-t--global--spacer--control--horizontal--default) + var(--pf-v6-c-text-input-group__icon--FontSize) + var(--pf-t--global--spacer--gap--text-to-element--default));
+ --pf-v6-c-text-input-group--utilities--status__text-input--PaddingInlineEnd: calc(var(--pf-t--global--spacer--sm) + var(--pf-v6-c-text-input-group__icon--FontSize) + var(--pf-t--global--spacer--gap--text-to-element--default));
+ --pf-v6-c-text-input-group__main--RowGap: var(--pf-t--global--spacer--xs);
+ --pf-v6-c-text-input-group__main--ColumnGap: var(--pf-t--global--spacer--xs);
+ --pf-v6-c-text-input-group__text--BorderRadius--base: var(--pf-t--global--border--radius--small);
+ --pf-v6-c-text-input-group__text--BorderStartStartRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
+ --pf-v6-c-text-input-group__text--BorderStartEndRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
+ --pf-v6-c-text-input-group__text--BorderEndEndRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
+ --pf-v6-c-text-input-group__text--BorderEndStartRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
+ --pf-v6-c-text-input-group--c-label-group__main--PaddingBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) / 2);
+ --pf-v6-c-text-input-group--c-label-group__main--PaddingInlineEnd: calc(var(--pf-t--global--spacer--control--horizontal--plain) / 2);
+ --pf-v6-c-text-input-group--c-label-group__main--PaddingBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) / 2);
+ --pf-v6-c-text-input-group__text-input--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--default);
+ --pf-v6-c-text-input-group__text-input--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
+ --pf-v6-c-text-input-group__text-input--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--default);
+ --pf-v6-c-text-input-group__text-input--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
+ --pf-v6-c-text-input-group__text-input--MinWidth: 12ch;
+ --pf-v6-c-text-input-group__text-input--m-hint--Color: var(--pf-t--global--text--color--placeholder);
+ --pf-v6-c-text-input-group__text-input--placeholder--Color: var(--pf-t--global--text--color--placeholder);
+ --pf-v6-c-text-input-group__text-input--BackgroundColor: transparent;
+ --pf-v6-c-text-input-group__text-input--OutlineOffset: -6px;
+ --pf-v6-c-text-input-group__icon--FontSize: var(--pf-t--global--icon--size--font--body--default);
+ --pf-v6-c-text-input-group__icon--InsetInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
+ --pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
+ --pf-v6-c-text-input-group--utilities--icon--m-status--InsetInlineEnd: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-text-input-group__icon--Color: var(--pf-t--global--icon--color--regular);
+ --pf-v6-c-text-input-group--m-disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
+ --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-t--global--icon--color--regular);
+ --pf-v6-c-text-input-group--m-disabled__icon--m-status--Color: var(--pf-t--global--icon--color--on-disabled);
+ --pf-v6-c-text-input-group__main--m-success__icon--m-status--Color: var(--pf-t--global--icon--color--status--success--default);
+ --pf-v6-c-text-input-group__main--m-warning__icon--m-status--Color: var(--pf-t--global--icon--color--status--warning--default);
+ --pf-v6-c-text-input-group__main--m-error__icon--m-status--Color: var(--pf-t--global--icon--color--status--danger--default);
+ --pf-v6-c-text-input-group__icon--TranslateY: -50%;
+ --pf-v6-c-text-input-group__utilities--child--MarginInlineStart: var(--pf-t--global--spacer--xs);
+ --pf-v6-c-text-input-group--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
+ --pf-v6-c-text-input-group--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
+}
+
+.pf-v6-c-text-input-group {
+ position: relative;
+ display: flex;
+ width: 100%;
+ font-size: var(--pf-v6-c-text-input-group__FontSize);
+ line-height: var(--pf-v6-c-text-input-group__LineHeight);
+ color: var(--pf-v6-c-text-input-group--Color, inherit);
+ background-color: var(--pf-v6-c-text-input-group--BackgroundColor);
+ border-start-start-radius: var(--pf-v6-c-text-input-group__text--BorderStartStartRadius);
+ border-start-end-radius: var(--pf-v6-c-text-input-group__text--BorderStartEndRadius);
+ border-end-start-radius: var(--pf-v6-c-text-input-group__text--BorderEndStartRadius);
+ border-end-end-radius: var(--pf-v6-c-text-input-group__text--BorderEndEndRadius);
+}
+.pf-v6-c-text-input-group::before {
+ position: absolute;
+ inset: 0;
+ pointer-events: none;
+ content: "";
+ border: var(--pf-v6-c-text-input-group--BorderWidth) solid var(--pf-v6-c-text-input-group--BorderColor);
+ border-start-start-radius: var(--pf-v6-c-text-input-group__text--BorderStartStartRadius);
+ border-start-end-radius: var(--pf-v6-c-text-input-group__text--BorderStartEndRadius);
+ border-end-start-radius: var(--pf-v6-c-text-input-group__text--BorderEndStartRadius);
+ border-end-end-radius: var(--pf-v6-c-text-input-group__text--BorderEndEndRadius);
+}
+.pf-v6-c-text-input-group.pf-m-disabled {
+ --pf-v6-c-text-input-group--Color: var(--pf-v6-c-text-input-group--m-disabled--Color);
+ --pf-v6-c-text-input-group__icon--Color: var(--pf-v6-c-text-input-group--m-disabled__icon--Color);
+ --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group--m-disabled__icon--m-status--Color);
+ --pf-v6-c-text-input-group--BackgroundColor: var(--pf-v6-c-text-input-group--m-disabled--BackgroundColor);
+ pointer-events: none;
+}
+.pf-v6-c-text-input-group.pf-m-plain {
+ --pf-v6-c-text-input-group--BackgroundColor: transparent;
+}
+.pf-v6-c-text-input-group.pf-m-plain::before {
+ border: 0;
+}
+.pf-v6-c-text-input-group.pf-m-success {
+ --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-success--BorderColor);
+ --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-success--BorderColor);
+ --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-success__icon--m-status--Color);
+}
+.pf-v6-c-text-input-group.pf-m-warning {
+ --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-warning--BorderColor);
+ --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-warning--BorderColor);
+ --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-warning__icon--m-status--Color);
+}
+.pf-v6-c-text-input-group.pf-m-error {
+ --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-error--BorderColor);
+ --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-error--BorderColor);
+ --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-error__icon--m-status--Color);
+}
+@media (prefers-reduced-motion: no-preference) {
+ .pf-v6-c-text-input-group.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-text-input-group.pf-m-error .pf-v6-c-text-input-group__icon.pf-m-status {
+ --pf-v6-c-text-input-group--TransitionDuration--Opacity: var(--pf-t--global--motion--duration--fade--default);
+ --pf-v6-c-text-input-group--TransitionTimingFunction--Opacity: var(--pf-t--global--motion--timing-function--default);
+ animation-name: pf-v6-global-fade-in;
+ animation-duration: var(--pf-v6-c-text-input-group--TransitionDuration--Opacity);
+ animation-timing-function: var(--pf-v6-c-text-input-group--TransitionTimingFunction--Opacity);
+}
+.pf-v6-c-text-input-group:hover {
+ --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-hover--BorderColor);
+}
+.pf-v6-c-text-input-group:where(.pf-m-success, .pf-m-warning, .pf-m-error) {
+ --pf-v6-c-text-input-group__text-input--PaddingInlineEnd: var(--pf-v6-c-text-input-group--status__text-input--PaddingInlineEnd);
+}
+.pf-v6-c-text-input-group:has(> .pf-v6-c-text-input-group__utilities) {
+ --pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd: var(--pf-v6-c-text-input-group--utilities--icon--m-status--InsetInlineEnd);
+ --pf-v6-c-text-input-group--status__text-input--PaddingInlineEnd: var(--pf-v6-c-text-input-group--utilities--status__text-input--PaddingInlineEnd);
+}
+
+.pf-v6-c-text-input-group__main {
+ display: flex;
+ flex: 1;
+ flex-wrap: wrap;
+ gap: var(--pf-v6-c-text-input-group__main--RowGap) var(--pf-v6-c-text-input-group__main--ColumnGap);
+ min-width: 0;
+}
+.pf-v6-c-text-input-group__main.pf-m-icon {
+ --pf-v6-c-text-input-group__text--Position: relative;
+ --pf-v6-c-text-input-group__text-input--PaddingInlineStart: var(--pf-v6-c-text-input-group__main--m-icon__text-input--PaddingInlineStart);
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ min-width: calc(var(--pf-v6-c-text-input-group__LineHeight) * var(--pf-v6-c-text-input-group__FontSize));
+}
+.pf-v6-c-text-input-group__main > :first-child:not(.pf-v6-c-text-input-group__text) {
+ margin-inline-start: var(--pf-v6-c-text-input-group__main--first-child--not--text-input--MarginInlineStart);
+}
+.pf-v6-c-text-input-group__main .pf-v6-c-label-group__main {
+ padding-block-start: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingBlockStart);
+ padding-block-end: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingBlockEnd);
+ padding-inline-end: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingInlineEnd);
+}
+
+.pf-v6-c-text-input-group__text {
+ position: var(--pf-v6-c-text-input-group__text--Position, revert);
+ display: inline-grid;
+ flex: 1;
+ grid-template-areas: "text-input";
+ grid-template-columns: 1fr;
+}
+
+.pf-v6-c-text-input-group__icon {
+ position: absolute;
+ inset-block-start: 50%;
+ inset-inline-start: var(--pf-v6-c-text-input-group__icon--InsetInlineStart);
+ font-size: var(--pf-v6-c-text-input-group__icon--FontSize);
+ color: var(--pf-v6-c-text-input-group__icon--Color);
+ transform: translateY(var(--pf-v6-c-text-input-group__icon--TranslateY));
+}
+.pf-v6-c-text-input-group__icon.pf-m-status {
+ inset-inline-start: auto;
+ inset-inline-end: var(--pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd);
+ color: var(--pf-v6-c-text-input-group__icon--m-status--Color);
+}
+
+.pf-v6-c-text-input-group__text-input {
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ position: relative;
+ width: 100%;
+ min-width: var(--pf-v6-c-text-input-group__text-input--MinWidth);
+ padding-block-start: var(--pf-v6-c-text-input-group__text-input--PaddingBlockStart);
+ padding-block-end: var(--pf-v6-c-text-input-group__text-input--PaddingBlockEnd);
+ padding-inline-start: var(--pf-v6-c-text-input-group__text-input--PaddingInlineStart);
+ padding-inline-end: var(--pf-v6-c-text-input-group__text-input--PaddingInlineEnd);
+ background-color: var(--pf-v6-c-text-input-group__text-input--BackgroundColor);
+ border: 0;
+ outline-offset: var(--pf-v6-c-text-input-group__text-input--OutlineOffset);
+}
+.pf-v6-c-text-input-group__text-input, .pf-v6-c-text-input-group__text-input.pf-m-hint {
+ grid-area: text-input;
+}
+.pf-v6-c-text-input-group__text-input.pf-m-hint {
+ color: var(--pf-v6-c-text-input-group__text-input--m-hint--Color);
+}
+.pf-v6-c-text-input-group__text-input::placeholder {
+ color: var(--pf-v6-c-text-input-group__text-input--placeholder--Color);
+}
+
+.pf-v6-c-text-input-group__utilities {
+ display: flex;
+ align-items: center;
+ margin-inline-start: var(--pf-v6-c-text-input-group__utilities--MarginInlineStart);
+ margin-inline-end: var(--pf-v6-c-text-input-group__utilities--MarginInlineEnd);
+}
+.pf-v6-c-text-input-group__utilities > * + * {
+ margin-inline-start: var(--pf-v6-c-text-input-group__utilities--child--MarginInlineStart);
+}
+
+.pf-v6-c-text-input-group__group {
+ display: flex;
+}
+
+.pf-v6-c-tile {
+ --pf-v6-c-tile--PaddingBlockStart: var(--pf-t--global--spacer--lg);
+ --pf-v6-c-tile--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
+ --pf-v6-c-tile--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
+ --pf-v6-c-tile--PaddingInlineStart: var(--pf-t--global--spacer--lg);
+ --pf-v6-c-tile--BackgroundColor: var(--pf-t--global--background--color--primary--default);
+ --pf-v6-c-tile--BorderRadius: var(--pf-t--global--border--radius--medium);
+ --pf-v6-c-tile--before--BorderColor: var(--pf-t--global--border--color--default);
+ --pf-v6-c-tile--before--BorderWidth: var(--pf-t--global--border--width--box--default);
+ --pf-v6-c-tile--before--BorderRadius: var(--pf-v6-c-tile--BorderRadius);
+ --pf-v6-c-tile--after--BackgroundColor: transparent;
+ --pf-v6-c-tile__icon--MarginInlineEnd: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-tile__icon--FontSize: var(--pf-t--global--icon--size--font--body--default);
+ --pf-v6-c-tile__icon--Color: var(--pf-t--global--icon--color--regular);
+ --pf-v6-c-tile__title--Color: var(--pf-t--global--text--color--regular);
+ --pf-v6-c-tile__title--FontWeight: var(--pf-t--global--font--weight--body--bold);
+ --pf-v6-c-tile__body--Color: var(--pf-t--global--text--color--regular);
+ --pf-v6-c-tile__body--FontSize: var(--pf-t--global--font--size--body--sm);
+ --pf-v6-c-tile--hover--before--BorderColor: var(--pf-t--global--border--color--hover);
+ --pf-v6-c-tile--m-selected--before--BorderColor: var(--pf-t--global--border--color--clicked);
+ --pf-v6-c-tile--m-selected--before--BorderWidth: var(--pf-t--global--border--width--box--clicked);
+ --pf-v6-c-tile--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
+ --pf-v6-c-tile--m-disabled__title--Color: var(--pf-t--global--text--color--on-disabled);
+ --pf-v6-c-tile--m-disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
+ --pf-v6-c-tile--m-disabled__body--Color: var(--pf-t--global--text--color--on-disabled);
+ --pf-v6-c-tile__header--m-stacked__icon--MarginBlockEnd: var(--pf-t--global--spacer--md);
+ --pf-v6-c-tile__header--m-stacked__icon--FontSize: var(--pf-t--global--icon--size--xl);
+ --pf-v6-c-tile--m-display-lg__header--m-stacked__icon--FontSize: var(--pf-t--global--icon--size--2xl);
+}
+
+.pf-v6-c-tile {
+ position: relative;
+ display: inline-grid;
+ grid-template-rows: min-content;
+ padding-block-start: var(--pf-v6-c-tile--PaddingBlockStart);
+ padding-block-end: var(--pf-v6-c-tile--PaddingBlockEnd);
+ padding-inline-start: var(--pf-v6-c-tile--PaddingInlineStart);
+ padding-inline-end: var(--pf-v6-c-tile--PaddingInlineEnd);
+ cursor: pointer;
+ background-color: var(--pf-v6-c-tile--BackgroundColor);
+ border-radius: var(--pf-v6-c-tile--BorderRadius);
+}
+.pf-v6-c-tile::before, .pf-v6-c-tile::after {
+ position: absolute;
+ pointer-events: none;
+ content: "";
+}
+.pf-v6-c-tile::before {
+ inset: 0;
+ border: var(--pf-v6-c-tile--before--BorderWidth) solid var(--pf-v6-c-tile--before--BorderColor);
+ border-radius: var(--pf-v6-c-tile--before--BorderRadius);
+}
+.pf-v6-c-tile:hover {
+ --pf-v6-c-tile--before--BorderColor: var(--pf-v6-c-tile--hover--before--BorderColor);
+}
+.pf-v6-c-tile.pf-m-selected {
+ --pf-v6-c-tile--before--BorderColor: var(--pf-v6-c-tile--m-selected--before--BorderColor);
+ --pf-v6-c-tile--before--BorderWidth: var(--pf-v6-c-tile--m-selected--before--BorderWidth);
+}
+.pf-v6-c-tile.pf-m-disabled {
+ --pf-v6-c-tile--BackgroundColor: var(--pf-v6-c-tile--m-disabled--BackgroundColor);
+ --pf-v6-c-tile__title--Color: var(--pf-v6-c-tile--m-disabled__title--Color);
+ --pf-v6-c-tile__icon--Color: var(--pf-v6-c-tile--m-disabled__icon--Color);
+ --pf-v6-c-tile__body--Color: var(--pf-v6-c-tile--m-disabled__body--Color);
+ --pf-v6-c-tile--before--BorderWidth: 0;
+ pointer-events: none;
+}
+.pf-v6-c-tile.pf-m-display-lg .pf-v6-c-tile__header.pf-m-stacked {
+ --pf-v6-c-tile__icon--FontSize: var(--pf-v6-c-tile--m-display-lg__header--m-stacked__icon--FontSize);
+}
+
+.pf-v6-c-tile__header {
+ display: flex;
+ align-items: center;
+}
+.pf-v6-c-tile__header.pf-m-stacked {
+ --pf-v6-c-tile__icon--MarginInlineEnd: 0;
+ --pf-v6-c-tile__icon--FontSize: var(--pf-v6-c-tile__header--m-stacked__icon--FontSize);
+ flex-direction: column;
+ align-items: flex-start;
+}
+.pf-v6-c-tile__header.pf-m-stacked .pf-v6-c-tile__icon {
+ display: flex;
+ align-items: center;
+ margin-block-end: var(--pf-v6-c-tile__header--m-stacked__icon--MarginBlockEnd);
+}
+
+.pf-v6-c-tile__title {
+ font-weight: var(--pf-v6-c-tile__title--FontWeight);
+ color: var(--pf-v6-c-tile__title--Color);
+}
+
+.pf-v6-c-tile__body {
+ font-size: var(--pf-v6-c-tile__body--FontSize);
+ color: var(--pf-v6-c-tile__body--Color);
+}
+
+.pf-v6-c-tile__icon {
+ margin-inline-end: var(--pf-v6-c-tile__icon--MarginInlineEnd);
+ font-size: var(--pf-v6-c-tile__icon--FontSize);
+ color: var(--pf-v6-c-tile__icon--Color);
+}
+
+.pf-v6-c-timestamp {
+ --pf-v6-c-timestamp--FontSize: var(--pf-t--global--font--size--body--sm);
+ --pf-v6-c-timestamp--Color: var(--pf-t--global--text--color--regular);
+ --pf-v6-c-timestamp--OutlineOffset: 0.1875rem;
+ --pf-v6-c-timestamp--m-help-text--TextDecorationLine: var(--pf-t--global--text-decoration--help-text--line--default);
+ --pf-v6-c-timestamp--m-help-text--TextDecorationStyle: var(--pf-t--global--text-decoration--help-text--style--default);
+ --pf-v6-c-timestamp--m-help-text--TextUnderlineOffset: 0.25rem;
+ --pf-v6-c-timestamp--m-help-text--Color: var(--pf-t--global--text--color--subtle);
+ --pf-v6-c-timestamp--m-help-text--hover--Color: var(--pf-t--global--text--color--regular);
+ --pf-v6-c-timestamp--m-help-text--hover--TextDecorationLine: var(--pf-t--global--text-decoration--help-text--line--hover);
+ --pf-v6-c-timestamp--m-help-text--hover--TextDecorationStyle: var(--pf-t--global--text-decoration--help-text--style--hover);
+}
+
+.pf-v6-c-timestamp {
+ display: inline-block;
+ font-size: var(--pf-v6-c-timestamp--FontSize);
+ color: var(--pf-v6-c-timestamp--Color);
+ outline-offset: var(--pf-v6-c-timestamp--OutlineOffset);
+}
+.pf-v6-c-timestamp.pf-m-help-text {
+ --pf-v6-c-timestamp--Color: var(--pf-v6-c-timestamp--m-help-text--Color);
+ text-decoration-line: var(--pf-v6-c-timestamp--m-help-text--TextDecorationLine);
+ text-decoration-style: var(--pf-v6-c-timestamp--m-help-text--TextDecorationStyle);
+ text-underline-offset: var(--pf-v6-c-timestamp--m-help-text--TextUnderlineOffset);
+ cursor: pointer;
+}
+.pf-v6-c-timestamp.pf-m-help-text:is(:hover, :focus) {
+ --pf-v6-c-timestamp--Color: var(--pf-v6-c-timestamp--m-help-text--hover--Color);
+ --pf-v6-c-timestamp--m-help-text--TextDecorationLine: var(--pf-v6-c-timestamp--m-help-text--hover--TextDecorationLine);
+ --pf-v6-c-timestamp--m-help-text--TextDecorationStyle: var(--pf-v6-c-timestamp--m-help-text--hover--TextDecorationStyle);
+}
+
+.pf-v6-c-timestamp__text {
+ text-decoration: inherit;
+}
+
+.pf-v6-c-title {
+ --pf-v6-c-title--FontFamily: var(--pf-t--global--font--family--heading);
+ --pf-v6-c-title--m-4xl--LineHeight: var(--pf-t--global--font--line-height--heading);
+ --pf-v6-c-title--m-4xl--FontSize: var(--pf-t--global--font--size--heading--2xl);
+ --pf-v6-c-title--m-4xl--FontWeight: var(--pf-t--global--font--weight--heading--default);
+ --pf-v6-c-title--m-3xl--LineHeight: var(--pf-t--global--font--line-height--heading);
+ --pf-v6-c-title--m-3xl--FontSize: var(--pf-t--global--font--size--heading--xl);
+ --pf-v6-c-title--m-3xl--FontWeight: var(--pf-t--global--font--weight--heading--default);
+ --pf-v6-c-title--m-2xl--LineHeight: var(--pf-t--global--font--line-height--heading);
+ --pf-v6-c-title--m-2xl--FontSize: var(--pf-t--global--font--size--heading--lg);
+ --pf-v6-c-title--m-2xl--FontWeight: var(--pf-t--global--font--weight--heading--default);
+ --pf-v6-c-title--m-xl--LineHeight: var(--pf-t--global--font--line-height--heading);
+ --pf-v6-c-title--m-xl--FontSize: var(--pf-t--global--font--size--heading--md);
+ --pf-v6-c-title--m-xl--FontWeight: var(--pf-t--global--font--weight--heading--default);
+ --pf-v6-c-title--m-lg--LineHeight: var(--pf-t--global--font--line-height--heading);
+ --pf-v6-c-title--m-lg--FontSize: var(--pf-t--global--font--size--heading--sm);
+ --pf-v6-c-title--m-lg--FontWeight: var(--pf-t--global--font--weight--heading--default);
+ --pf-v6-c-title--m-md--LineHeight: var(--pf-t--global--font--line-height--heading);
+ --pf-v6-c-title--m-md--FontSize: var(--pf-t--global--font--size--heading--xs);
+ --pf-v6-c-title--m-md--FontWeight: var(--pf-t--global--font--weight--heading--default);
+ --pf-v6-c-title--m-h1--LineHeight: var(--pf-t--global--font--line-height--heading);
+ --pf-v6-c-title--m-h1--FontSize: var(--pf-t--global--font--size--heading--h1);
+ --pf-v6-c-title--m-h1--FontWeight: var(--pf-t--global--font--weight--heading--default);
+ --pf-v6-c-title--m-h2--LineHeight: var(--pf-t--global--font--line-height--heading);
+ --pf-v6-c-title--m-h2--FontSize: var(--pf-t--global--font--size--heading--h2);
+ --pf-v6-c-title--m-h2--FontWeight: var(--pf-t--global--font--weight--heading--default);
+ --pf-v6-c-title--m-h3--LineHeight: var(--pf-t--global--font--line-height--heading);
+ --pf-v6-c-title--m-h3--FontSize: var(--pf-t--global--font--size--heading--h3);
+ --pf-v6-c-title--m-h3--FontWeight: var(--pf-t--global--font--weight--heading--default);
+ --pf-v6-c-title--m-h4--LineHeight: var(--pf-t--global--font--line-height--heading);
+ --pf-v6-c-title--m-h4--FontSize: var(--pf-t--global--font--size--heading--h4);
+ --pf-v6-c-title--m-h4--FontWeight: var(--pf-t--global--font--weight--heading--default);
+ --pf-v6-c-title--m-h5--LineHeight: var(--pf-t--global--font--line-height--heading);
+ --pf-v6-c-title--m-h5--FontSize: var(--pf-t--global--font--size--heading--h5);
+ --pf-v6-c-title--m-h5--FontWeight: var(--pf-t--global--font--weight--heading--default);
+ --pf-v6-c-title--m-h6--LineHeight: var(--pf-t--global--font--line-height--heading);
+ --pf-v6-c-title--m-h6--FontSize: var(--pf-t--global--font--size--heading--h6);
+ --pf-v6-c-title--m-h6--FontWeight: var(--pf-t--global--font--weight--heading--default);
+ --pf-v6-c-title--m-page-title--FontWeight: var(--pf-t--global--font--weight--heading--bold);
+}
+
+.pf-v6-c-title {
+ font-family: var(--pf-v6-c-title--FontFamily);
+ word-break: break-word;
+}
+.pf-v6-c-title.pf-m-4xl {
+ font-size: var(--pf-v6-c-title--m-4xl--FontSize);
+ font-weight: var(--pf-v6-c-title--m-4xl--FontWeight);
+ line-height: var(--pf-v6-c-title--m-4xl--LineHeight);
+}
+.pf-v6-c-title.pf-m-3xl {
+ font-size: var(--pf-v6-c-title--m-3xl--FontSize);
+ font-weight: var(--pf-v6-c-title--m-3xl--FontWeight);
+ line-height: var(--pf-v6-c-title--m-3xl--LineHeight);
+}
+.pf-v6-c-title.pf-m-2xl {
+ font-size: var(--pf-v6-c-title--m-2xl--FontSize);
+ font-weight: var(--pf-v6-c-title--m-2xl--FontWeight);
+ line-height: var(--pf-v6-c-title--m-2xl--LineHeight);
+}
+.pf-v6-c-title.pf-m-xl {
+ font-size: var(--pf-v6-c-title--m-xl--FontSize);
+ font-weight: var(--pf-v6-c-title--m-xl--FontWeight);
+ line-height: var(--pf-v6-c-title--m-xl--LineHeight);
+}
+.pf-v6-c-title.pf-m-lg {
+ font-size: var(--pf-v6-c-title--m-lg--FontSize);
+ font-weight: var(--pf-v6-c-title--m-lg--FontWeight);
+ line-height: var(--pf-v6-c-title--m-lg--LineHeight);
+}
+.pf-v6-c-title.pf-m-md {
+ font-size: var(--pf-v6-c-title--m-md--FontSize);
+ font-weight: var(--pf-v6-c-title--m-md--FontWeight);
+ line-height: var(--pf-v6-c-title--m-md--LineHeight);
+}
+.pf-v6-c-title.pf-m-h1 {
+ font-size: var(--pf-v6-c-title--m-h1--FontSize);
+ font-weight: var(--pf-v6-c-title--m-h1--FontWeight);
+ line-height: var(--pf-v6-c-title--m-h1--LineHeight);
+}
+.pf-v6-c-title.pf-m-h2 {
+ font-size: var(--pf-v6-c-title--m-h2--FontSize);
+ font-weight: var(--pf-v6-c-title--m-h2--FontWeight);
+ line-height: var(--pf-v6-c-title--m-h2--LineHeight);
+}
+.pf-v6-c-title.pf-m-h3 {
+ font-size: var(--pf-v6-c-title--m-h3--FontSize);
+ font-weight: var(--pf-v6-c-title--m-h3--FontWeight);
+ line-height: var(--pf-v6-c-title--m-h3--LineHeight);
+}
+.pf-v6-c-title.pf-m-h4 {
+ font-size: var(--pf-v6-c-title--m-h4--FontSize);
+ font-weight: var(--pf-v6-c-title--m-h4--FontWeight);
+ line-height: var(--pf-v6-c-title--m-h4--LineHeight);
+}
+.pf-v6-c-title.pf-m-h5 {
+ font-size: var(--pf-v6-c-title--m-h5--FontSize);
+ font-weight: var(--pf-v6-c-title--m-h5--FontWeight);
+ line-height: var(--pf-v6-c-title--m-h5--LineHeight);
+}
+.pf-v6-c-title.pf-m-h6 {
+ font-size: var(--pf-v6-c-title--m-h6--FontSize);
+ font-weight: var(--pf-v6-c-title--m-h6--FontWeight);
+ line-height: var(--pf-v6-c-title--m-h6--LineHeight);
+}
+.pf-v6-c-title.pf-m-page-title {
+ font-weight: var(--pf-v6-c-title--m-page-title--FontWeight);
+}
+
+.pf-v6-c-toggle-group {
+ --pf-v6-c-toggle-group__button--PaddingBlockStart: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-toggle-group__button--PaddingInlineEnd: var(--pf-t--global--spacer--md);
+ --pf-v6-c-toggle-group__button--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-toggle-group__button--PaddingInlineStart: var(--pf-t--global--spacer--md);
+ --pf-v6-c-toggle-group__button--FontSize: var(--pf-t--global--font--size--body--default);
+ --pf-v6-c-toggle-group__button--LineHeight: var(--pf-t--global--font--line-height--body);
+ --pf-v6-c-toggle-group__button--Color: var(--pf-t--global--text--color--regular);
+ --pf-v6-c-toggle-group__button--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
+ --pf-v6-c-toggle-group__button--ZIndex: auto;
+ --pf-v6-c-toggle-group__button--hover--BackgroundColor: var(--pf-t--global--background--color--primary--hover);
+ --pf-v6-c-toggle-group__button--hover--ZIndex: var(--pf-t--global--z-index--xs);
+ --pf-v6-c-toggle-group__button--hover--before--BorderColor: var(--pf-t--global--border--color--default);
+ --pf-v6-c-toggle-group__button--before--BorderWidth: var(--pf-t--global--border--width--control--default);
+ --pf-v6-c-toggle-group__button--before--BorderColor: var(--pf-t--global--border--color--default);
+ --pf-v6-c-toggle-group__item--item--MarginInlineStart: calc(-1 * var(--pf-t--global--border--width--control--default));
+ --pf-v6-c-toggle-group__item--first-child__button--BorderStartStartRadius: var(--pf-t--global--border--radius--tiny);
+ --pf-v6-c-toggle-group__item--first-child__button--BorderEndStartRadius: var(--pf-t--global--border--radius--tiny);
+ --pf-v6-c-toggle-group__item--last-child__button--BorderStartEndRadius: var(--pf-t--global--border--radius--tiny);
+ --pf-v6-c-toggle-group__item--last-child__button--BorderEndEndRadius: var(--pf-t--global--border--radius--tiny);
+ --pf-v6-c-toggle-group__icon--text--MarginInlineStart: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-toggle-group__button--m-selected--BackgroundColor: var(--pf-t--global--color--brand--default);
+ --pf-v6-c-toggle-group__button--m-selected--Color: var(--pf-t--global--text--color--on-brand--default);
+ --pf-v6-c-toggle-group__button--m-selected--before--BorderColor: var(--pf-t--global--border--color--clicked);
+ --pf-v6-c-toggle-group__button--m-selected-selected--before--BorderInlineStartColor: var(--pf-t--global--border--color--default);
+ --pf-v6-c-toggle-group__button--m-selected--ZIndex: var(--pf-t--global--z-index--xs);
+ --pf-v6-c-toggle-group__button--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
+ --pf-v6-c-toggle-group__button--disabled--Color: var(--pf-t--global--text--color--on-disabled);
+ --pf-v6-c-toggle-group__button--disabled--before--BorderColor: var(--pf-t--global--border--color--disabled);
+ --pf-v6-c-toggle-group__button--disabled-disabled--before--BorderInlineStartColor: var(--pf-t--global--border--color--default);
+ --pf-v6-c-toggle-group__button--disabled--ZIndex: var(--pf-t--global--z-index--xs);
+ --pf-v6-c-toggle-group--m-compact__button--PaddingBlockStart: 0;
+ --pf-v6-c-toggle-group--m-compact__button--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-toggle-group--m-compact__button--PaddingBlockEnd: 0;
+ --pf-v6-c-toggle-group--m-compact__button--PaddingInlineStart: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-toggle-group--m-compact__button--FontSize: var(--pf-t--global--font--size--body--default);
+}
+
+.pf-v6-c-toggle-group {
+ display: flex;
+}
+.pf-v6-c-toggle-group.pf-m-compact {
+ --pf-v6-c-toggle-group__button--PaddingBlockStart: var(--pf-v6-c-toggle-group--m-compact__button--PaddingBlockStart);
+ --pf-v6-c-toggle-group__button--PaddingInlineEnd: var(--pf-v6-c-toggle-group--m-compact__button--PaddingInlineEnd);
+ --pf-v6-c-toggle-group__button--PaddingBlockEnd: var(--pf-v6-c-toggle-group--m-compact__button--PaddingBlockEnd);
+ --pf-v6-c-toggle-group__button--PaddingInlineStart: var(--pf-v6-c-toggle-group--m-compact__button--PaddingInlineStart);
+ --pf-v6-c-toggle-group__button--FontSize: var(--pf-v6-c-toggle-group--m-compact__button--FontSize);
+}
+
+.pf-v6-c-toggle-group__item + .pf-v6-c-toggle-group__item {
+ margin-inline-start: var(--pf-v6-c-toggle-group__item--item--MarginInlineStart);
+}
+.pf-v6-c-toggle-group__item:first-child .pf-v6-c-toggle-group__button, .pf-v6-c-toggle-group__item:first-child .pf-v6-c-toggle-group__button::before {
+ border-start-start-radius: var(--pf-v6-c-toggle-group__item--first-child__button--BorderStartStartRadius);
+ border-end-start-radius: var(--pf-v6-c-toggle-group__item--first-child__button--BorderEndStartRadius);
+}
+.pf-v6-c-toggle-group__item:last-child .pf-v6-c-toggle-group__button, .pf-v6-c-toggle-group__item:last-child .pf-v6-c-toggle-group__button::before {
+ border-start-end-radius: var(--pf-v6-c-toggle-group__item--last-child__button--BorderStartEndRadius);
+ border-end-end-radius: var(--pf-v6-c-toggle-group__item--last-child__button--BorderEndEndRadius);
+}
+
+.pf-v6-c-toggle-group__button {
+ position: relative;
+ z-index: var(--pf-v6-c-toggle-group__button--ZIndex);
+ display: inline-flex;
+ padding-block-start: var(--pf-v6-c-toggle-group__button--PaddingBlockStart);
+ padding-block-end: var(--pf-v6-c-toggle-group__button--PaddingBlockEnd);
+ padding-inline-start: var(--pf-v6-c-toggle-group__button--PaddingInlineStart);
+ padding-inline-end: var(--pf-v6-c-toggle-group__button--PaddingInlineEnd);
+ font-size: var(--pf-v6-c-toggle-group__button--FontSize);
+ line-height: var(--pf-v6-c-toggle-group__button--LineHeight);
+ color: var(--pf-v6-c-toggle-group__button--Color);
+ background-color: var(--pf-v6-c-toggle-group__button--BackgroundColor);
+ border: 0;
+}
+.pf-v6-c-toggle-group__button::before {
+ position: absolute;
+ inset-block-start: 0;
+ inset-block-end: 0;
+ inset-inline-start: 0;
+ inset-inline-end: 0;
+ pointer-events: none;
+ content: "";
+ border-style: solid;
+ border-width: var(--pf-v6-c-toggle-group__button--before--BorderWidth);
+ border-block-start-color: var(--pf-v6-c-toggle-group__button--before--BorderBlockStartColor, var(--pf-v6-c-toggle-group__button--before--BorderColor));
+ border-block-end-color: var(--pf-v6-c-toggle-group__button--before--BorderBlockEndColor, var(--pf-v6-c-toggle-group__button--before--BorderColor));
+ border-inline-start-color: var(--pf-v6-c-toggle-group__button--before--BorderInlineStartColor, var(--pf-v6-c-toggle-group__button--before--BorderColor));
+ border-inline-end-color: var(--pf-v6-c-toggle-group__button--before--BorderInlineEndColor, var(--pf-v6-c-toggle-group__button--before--BorderColor));
+}
+.pf-v6-c-toggle-group__button:is(:hover, :focus) {
+ --pf-v6-c-toggle-group__button--BackgroundColor: var(--pf-v6-c-toggle-group__button--hover--BackgroundColor);
+ --pf-v6-c-toggle-group__button--ZIndex: var(--pf-v6-c-toggle-group__button--hover--ZIndex);
+ --pf-v6-c-toggle-group__button--before--BorderColor: var(--pf-v6-c-toggle-group__button--hover--before--BorderColor);
+ text-decoration-line: none;
+}
+.pf-v6-c-toggle-group__button.pf-m-selected {
+ --pf-v6-c-toggle-group__button--BackgroundColor: var(--pf-v6-c-toggle-group__button--m-selected--BackgroundColor);
+ --pf-v6-c-toggle-group__button--Color: var(--pf-v6-c-toggle-group__button--m-selected--Color, inherit);
+ --pf-v6-c-toggle-group__button--ZIndex: var(--pf-v6-c-toggle-group__button--m-selected--ZIndex);
+ --pf-v6-c-toggle-group__button--before--BorderColor: var(--pf-v6-c-toggle-group__button--m-selected--before--BorderColor);
+}
+.pf-v6-c-toggle-group__button:is(:disabled, .pf-m-disabled) {
+ --pf-v6-c-toggle-group__button--BackgroundColor: var(--pf-v6-c-toggle-group__button--disabled--BackgroundColor);
+ --pf-v6-c-toggle-group__button--Color: var(--pf-v6-c-toggle-group__button--disabled--Color);
+ --pf-v6-c-toggle-group__button--ZIndex: var(--pf-v6-c-toggle-group__button--disabled--ZIndex);
+ --pf-v6-c-toggle-group__button--before--BorderColor: var(--pf-v6-c-toggle-group__button--disabled--before--BorderColor);
+ pointer-events: none;
+}
+
+.pf-v6-c-toggle-group__item:has(.pf-m-selected) + .pf-v6-c-toggle-group__item:has(.pf-m-selected) {
+ --pf-v6-c-toggle-group__button--before--BorderInlineStartColor: var(--pf-v6-c-toggle-group__button--m-selected-selected--before--BorderInlineStartColor);
+}
+
+.pf-v6-c-toggle-group__item:has(:disabled, .pf-m-disabled) + .pf-v6-c-toggle-group__item:has(:disabled, .pf-m-disabled) {
+ --pf-v6-c-toggle-group__button--before--BorderInlineStartColor: var(--pf-v6-c-toggle-group__button--disabled-disabled--before--BorderInlineStartColor);
+}
+
+.pf-v6-c-toggle-group__icon + .pf-v6-c-toggle-group__text,
+.pf-v6-c-toggle-group__text + .pf-v6-c-toggle-group__icon {
+ margin-inline-start: var(--pf-v6-c-toggle-group__icon--text--MarginInlineStart);
+}
+
+.pf-v6-c-toolbar {
+ --pf-v6-c-toolbar--RowGap: var(--pf-t--global--spacer--md);
+ --pf-v6-c-toolbar--PaddingBlockStart: 0;
+ --pf-v6-c-toolbar--PaddingBlockEnd: var(--pf-t--global--spacer--md);
+ --pf-v6-c-toolbar--PaddingInlineStart: 0;
+ --pf-v6-c-toolbar--PaddingInlineEnd: 0;
+ --pf-v6-c-toolbar--LineHeight: var(--pf-t--global--font--line-height--body);
+ --pf-v6-c-toolbar--FontSize: var(--pf-t--global--font--size--body--default);
+ --pf-v6-c-toolbar--BackgroundColor: transparent;
+ --pf-v6-c-toolbar--m-primary--BackgroundColor: var(--pf-t--global--background--color--primary--default);
+ --pf-v6-c-toolbar--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
+ --pf-v6-c-toolbar--m-no-background--BackgroundColor: transparent;
+ --pf-v6-c-toolbar__item--Width: auto;
+ --pf-v6-c-toolbar__item--MinWidth: auto;
+ --pf-v6-c-toolbar__item--RowGap: var(--pf-t--global--spacer--gap--group--vertical);
+ --pf-v6-c-toolbar__item--ColumnGap: var(--pf-t--global--spacer--gap--group--horizontal);
+ --pf-v6-c-toolbar__item--m-overflow-container--MinWidth: 0;
+ --pf-v6-c-toolbar__group--RowGap: var(--pf-t--global--spacer--gap--group--vertical);
+ --pf-v6-c-toolbar__group--ColumnGap: var(--pf-t--global--spacer--gap--group--horizontal);
+ --pf-v6-c-toolbar__group--m-overflow-container--MinWidth: 0;
+ --pf-v6-c-toolbar__content--RowGap: var(--pf-t--global--spacer--md);
+ --pf-v6-c-toolbar__content--PaddingInlineStart: 0;
+ --pf-v6-c-toolbar__content--PaddingInlineEnd: 0;
+ --pf-v6-c-toolbar__content-section--RowGap: var(--pf-t--global--spacer--gap--group--vertical);
+ --pf-v6-c-toolbar__content-section--ColumnGap: var(--pf-t--global--spacer--gap--group--horizontal);
+ --pf-v6-c-toolbar__expandable-content--ZIndex: var(--pf-t--global--z-index--sm);
+ --pf-v6-c-toolbar__expandable-content--RowGap: var(--pf-t--global--spacer--gap--group--vertical);
+ --pf-v6-c-toolbar__expandable-content--PaddingBlockStart: var(--pf-t--global--spacer--md);
+ --pf-v6-c-toolbar__expandable-content--PaddingBlockEnd: var(--pf-t--global--spacer--md);
+ --pf-v6-c-toolbar__expandable-content--PaddingInlineStart: var(--pf-t--global--spacer--md);
+ --pf-v6-c-toolbar__expandable-content--PaddingInlineEnd: var(--pf-t--global--spacer--md);
+ --pf-v6-c-toolbar__expandable-content--BoxShadow: var(--pf-t--global--box-shadow--md--bottom);
+ --pf-v6-c-toolbar__expandable-content--BackgroundColor: var(--pf-t--global--background--color--floating--default);
+ --pf-v6-c-toolbar--m-sticky--ZIndex: var(--pf-t--global--z-index--xs);
+ --pf-v6-c-toolbar--m-sticky--PaddingBlockStart: var(--pf-t--global--spacer--md);
+ --pf-v6-c-toolbar--m-sticky--PaddingBlockEnd: var(--pf-t--global--spacer--md);
+ --pf-v6-c-toolbar--m-sticky--BoxShadow: var(--pf-t--global--box-shadow--md--bottom);
+ --pf-v6-c-toolbar--m-sticky--BackgroundColor: var(--pf-t--global--background--color--primary--default);
+ --pf-v6-c-toolbar__expand-all-icon--Rotate: 0;
+ --pf-v6-c-toolbar__expand-all-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
+ --pf-v6-c-toolbar__expand-all-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
+ --pf-v6-c-toolbar__item--m-expand-all--m-expanded__expand-all-icon--Rotate: 90deg;
+ --pf-v6-c-toolbar__group--m-filter-group--ColumnGap: var(--pf-t--global--spacer--gap--control-to-control--default);
+ --pf-v6-c-toolbar__item--m-label--FontWeight: var(--pf-t--global--font--weight--body--bold);
+ --pf-v6-c-toolbar__group--m-label-group--ColumnGap: var(--pf-t--global--spacer--gap--text-to-element--default);
+ --pf-v6-c-toolbar__group--m-action-group--ColumnGap: var(--pf-t--global--spacer--gap--action-to-action--default);
+ --pf-v6-c-toolbar__group--m-action-group-plain--ColumnGap: var(--pf-t--global--spacer--gap--action-to-action--plain);
+ --pf-v6-c-toolbar__group--m-action-group-inline--ColumnGap: var(--pf-t--global--spacer--gap--action-to-action--default);
+}
+
+.pf-v6-c-toolbar__content-section,
+.pf-v6-c-toolbar__group,
+.pf-v6-c-toolbar__item {
+ --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-toolbar__content-section.pf-m-hidden,
+.pf-v6-c-toolbar__group.pf-m-hidden,
+.pf-v6-c-toolbar__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-toolbar__content-section.pf-m-hidden-on-sm,
+ .pf-v6-c-toolbar__group.pf-m-hidden-on-sm,
+ .pf-v6-c-toolbar__item.pf-m-hidden-on-sm {
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
+ }
+ .pf-v6-c-toolbar__content-section.pf-m-visible-on-sm,
+ .pf-v6-c-toolbar__group.pf-m-visible-on-sm,
+ .pf-v6-c-toolbar__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-toolbar__content-section.pf-m-hidden-on-md,
+ .pf-v6-c-toolbar__group.pf-m-hidden-on-md,
+ .pf-v6-c-toolbar__item.pf-m-hidden-on-md {
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
+ }
+ .pf-v6-c-toolbar__content-section.pf-m-visible-on-md,
+ .pf-v6-c-toolbar__group.pf-m-visible-on-md,
+ .pf-v6-c-toolbar__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-toolbar__content-section.pf-m-hidden-on-lg,
+ .pf-v6-c-toolbar__group.pf-m-hidden-on-lg,
+ .pf-v6-c-toolbar__item.pf-m-hidden-on-lg {
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
+ }
+ .pf-v6-c-toolbar__content-section.pf-m-visible-on-lg,
+ .pf-v6-c-toolbar__group.pf-m-visible-on-lg,
+ .pf-v6-c-toolbar__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-toolbar__content-section.pf-m-hidden-on-xl,
+ .pf-v6-c-toolbar__group.pf-m-hidden-on-xl,
+ .pf-v6-c-toolbar__item.pf-m-hidden-on-xl {
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
+ }
+ .pf-v6-c-toolbar__content-section.pf-m-visible-on-xl,
+ .pf-v6-c-toolbar__group.pf-m-visible-on-xl,
+ .pf-v6-c-toolbar__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-toolbar__content-section.pf-m-hidden-on-2xl,
+ .pf-v6-c-toolbar__group.pf-m-hidden-on-2xl,
+ .pf-v6-c-toolbar__item.pf-m-hidden-on-2xl {
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
+ }
+ .pf-v6-c-toolbar__content-section.pf-m-visible-on-2xl,
+ .pf-v6-c-toolbar__group.pf-m-visible-on-2xl,
+ .pf-v6-c-toolbar__item.pf-m-visible-on-2xl {
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
+ }
+}
+
+.pf-v6-c-toolbar,
+.pf-v6-c-toolbar__content {
+ position: relative;
+}
+
+.pf-v6-c-toolbar__content {
+ --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);
+ row-gap: var(--pf-v6-c-toolbar__content--RowGap);
+ padding-inline-start: var(--pf-v6-c-toolbar__content--PaddingInlineStart);
+ padding-inline-end: var(--pf-v6-c-toolbar__content--PaddingInlineEnd);
+}
+.pf-v6-c-toolbar__content.pf-m-hidden {
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
+}
+@media screen and (min-width: 36rem) {
+ .pf-v6-c-toolbar__content.pf-m-hidden-on-sm {
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
+ }
+ .pf-v6-c-toolbar__content.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-toolbar__content.pf-m-hidden-on-md {
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
+ }
+ .pf-v6-c-toolbar__content.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-toolbar__content.pf-m-hidden-on-lg {
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
+ }
+ .pf-v6-c-toolbar__content.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-toolbar__content.pf-m-hidden-on-xl {
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
+ }
+ .pf-v6-c-toolbar__content.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-toolbar__content.pf-m-hidden-on-2xl {
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
+ }
+ .pf-v6-c-toolbar__content.pf-m-visible-on-2xl {
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
+ }
+}
+
+.pf-v6-c-toolbar__content-section {
+ flex-wrap: wrap;
+ row-gap: var(--pf-v6-c-toolbar__content-section--RowGap);
+ column-gap: var(--pf-v6-c-toolbar__content-section--ColumnGap);
+ align-items: start;
+}
+
+.pf-v6-c-toolbar {
+ display: grid;
+ row-gap: var(--pf-v6-c-toolbar--RowGap);
+ width: var(--pf-v6-c-toolbar--Width, auto);
+ padding-block-start: var(--pf-v6-c-toolbar--PaddingBlockStart);
+ padding-block-end: var(--pf-v6-c-toolbar--PaddingBlockEnd);
+ padding-inline-start: var(--pf-v6-c-toolbar--PaddingInlineStart);
+ padding-inline-end: var(--pf-v6-c-toolbar--PaddingInlineEnd);
+ font-size: var(--pf-v6-c-toolbar--FontSize);
+ line-height: var(--pf-v6-c-toolbar--LineHeight);
+ background-color: var(--pf-v6-c-toolbar--BackgroundColor);
+}
+.pf-v6-c-toolbar.pf-m-sticky {
+ --pf-v6-c-toolbar--BackgroundColor: var(--pf-v6-c-toolbar--m-sticky--BackgroundColor);
+ position: sticky;
+ inset-block-start: 0;
+ z-index: var(--pf-v6-c-toolbar--m-sticky--ZIndex);
+ padding-block-start: var(--pf-v6-c-toolbar--m-sticky--PaddingBlockStart);
+ padding-block-end: var(--pf-v6-c-toolbar--m-sticky--PaddingBlockEnd);
+ box-shadow: var(--pf-v6-c-toolbar--m-sticky--BoxShadow);
+}
+.pf-v6-c-toolbar.pf-m-static,
+.pf-v6-c-toolbar.pf-m-static .pf-v6-c-toolbar__content {
+ position: static;
+}
+.pf-v6-c-toolbar.pf-m-static .pf-v6-c-toolbar__expandable-content {
+ position: absolute;
+}
+.pf-v6-c-toolbar.pf-m-full-height {
+ --pf-v6-c-toolbar--PaddingBlockStart: 0;
+ --pf-v6-c-toolbar--PaddingBlockEnd: 0;
+}
+.pf-v6-c-toolbar.pf-m-full-height .pf-v6-c-toolbar__group,
+.pf-v6-c-toolbar.pf-m-full-height .pf-v6-c-toolbar__item {
+ align-items: stretch;
+ align-self: stretch;
+}
+.pf-v6-c-toolbar.pf-m-no-padding {
+ --pf-v6-c-toolbar--PaddingBlockEnd: 0;
+ --pf-v6-c-toolbar--m-sticky--PaddingBlockStart: 0;
+ --pf-v6-c-toolbar--m-sticky--PaddingBlockEnd: 0;
+}
+.pf-v6-c-toolbar.pf-m-primary {
+ --pf-v6-c-toolbar--BackgroundColor: var(--pf-v6-c-toolbar--m-primary--BackgroundColor);
+}
+.pf-v6-c-toolbar.pf-m-secondary {
+ --pf-v6-c-toolbar--BackgroundColor: var(--pf-v6-c-toolbar--m-secondary--BackgroundColor);
+}
+.pf-v6-c-toolbar.pf-m-no-background {
+ --pf-v6-c-toolbar--BackgroundColor: var(--pf-v6-c-toolbar--m-no-background--BackgroundColor);
+}
+
+.pf-v6-c-toolbar__item {
+ --pf-v6-c-toolbar__item--Width--base: var(--pf-v6-c-toolbar__item--Width);
+ --pf-v6-c-toolbar__item--MinWidth--base: var(--pf-v6-c-toolbar__item--MinWidth);
+ row-gap: var(--pf-v6-c-toolbar__item--RowGap);
+ column-gap: var(--pf-v6-c-toolbar__item--ColumnGap);
+ width: var(--pf-v6-c-toolbar__item--Width--base);
+ min-width: var(--pf-v6-c-toolbar__item--MinWidth--base);
+}
+@media (min-width: 36rem) {
+ .pf-v6-c-toolbar__item {
+ --pf-v6-c-toolbar__item--Width--base: var(--pf-v6-c-toolbar__item--Width-on-sm, var(--pf-v6-c-toolbar__item--Width));
+ }
+}
+@media (min-width: 48rem) {
+ .pf-v6-c-toolbar__item {
+ --pf-v6-c-toolbar__item--Width--base: var(--pf-v6-c-toolbar__item--Width-on-md, var(--pf-v6-c-toolbar__item--Width-on-sm, var(--pf-v6-c-toolbar__item--Width)));
+ }
+}
+@media (min-width: 62rem) {
+ .pf-v6-c-toolbar__item {
+ --pf-v6-c-toolbar__item--Width--base: var(--pf-v6-c-toolbar__item--Width-on-lg, var(--pf-v6-c-toolbar__item--Width-on-md, var(--pf-v6-c-toolbar__item--Width-on-sm, var(--pf-v6-c-toolbar__item--Width))));
+ }
+}
+@media (min-width: 75rem) {
+ .pf-v6-c-toolbar__item {
+ --pf-v6-c-toolbar__item--Width--base: var(--pf-v6-c-toolbar__item--Width-on-xl, var(--pf-v6-c-toolbar__item--Width-on-lg, var(--pf-v6-c-toolbar__item--Width-on-md, var(--pf-v6-c-toolbar__item--Width-on-sm, var(--pf-v6-c-toolbar__item--Width)))));
+ }
+}
+@media (min-width: 90.625rem) {
+ .pf-v6-c-toolbar__item {
+ --pf-v6-c-toolbar__item--Width--base: var(--pf-v6-c-toolbar__item--Width-on-2xl, var(--pf-v6-c-toolbar__item--Width-on-xl, var(--pf-v6-c-toolbar__item--Width-on-lg, var(--pf-v6-c-toolbar__item--Width-on-md, var(--pf-v6-c-toolbar__item--Width-on-sm, var(--pf-v6-c-toolbar__item--Width))))));
+ }
+}
+@media (min-width: 36rem) {
+ .pf-v6-c-toolbar__item {
+ --pf-v6-c-toolbar__item--MinWidth--base: var(--pf-v6-c-toolbar__item--MinWidth-on-sm, var(--pf-v6-c-toolbar__item--MinWidth));
+ }
+}
+@media (min-width: 48rem) {
+ .pf-v6-c-toolbar__item {
+ --pf-v6-c-toolbar__item--MinWidth--base: var(--pf-v6-c-toolbar__item--MinWidth-on-md, var(--pf-v6-c-toolbar__item--MinWidth-on-sm, var(--pf-v6-c-toolbar__item--MinWidth)));
+ }
+}
+@media (min-width: 62rem) {
+ .pf-v6-c-toolbar__item {
+ --pf-v6-c-toolbar__item--MinWidth--base: var(--pf-v6-c-toolbar__item--MinWidth-on-lg, var(--pf-v6-c-toolbar__item--MinWidth-on-md, var(--pf-v6-c-toolbar__item--MinWidth-on-sm, var(--pf-v6-c-toolbar__item--MinWidth))));
+ }
+}
+@media (min-width: 75rem) {
+ .pf-v6-c-toolbar__item {
+ --pf-v6-c-toolbar__item--MinWidth--base: var(--pf-v6-c-toolbar__item--MinWidth-on-xl, var(--pf-v6-c-toolbar__item--MinWidth-on-lg, var(--pf-v6-c-toolbar__item--MinWidth-on-md, var(--pf-v6-c-toolbar__item--MinWidth-on-sm, var(--pf-v6-c-toolbar__item--MinWidth)))));
+ }
+}
+@media (min-width: 90.625rem) {
+ .pf-v6-c-toolbar__item {
+ --pf-v6-c-toolbar__item--MinWidth--base: var(--pf-v6-c-toolbar__item--MinWidth-on-2xl, var(--pf-v6-c-toolbar__item--MinWidth-on-xl, var(--pf-v6-c-toolbar__item--MinWidth-on-lg, var(--pf-v6-c-toolbar__item--MinWidth-on-md, var(--pf-v6-c-toolbar__item--MinWidth-on-sm, var(--pf-v6-c-toolbar__item--MinWidth))))));
+ }
+}
+.pf-v6-c-toolbar__item.pf-m-expand-all.pf-m-expanded {
+ --pf-v6-c-toolbar__expand-all-icon--Rotate: var(--pf-v6-c-toolbar__item--m-expand-all--m-expanded__expand-all-icon--Rotate);
+}
+.pf-v6-c-toolbar__item.pf-m-label {
+ font-weight: var(--pf-v6-c-toolbar__item--m-label--FontWeight);
+}
+.pf-v6-c-toolbar__item.pf-m-pagination {
+ margin-inline-start: auto;
+}
+.pf-v6-c-toolbar__item.pf-m-pagination.pf-v6-c-pagination {
+ flex-wrap: nowrap;
+}
+.pf-v6-c-toolbar__item.pf-m-overflow-container {
+ min-width: var(--pf-v6-c-toolbar__item--m-overflow-container--MinWidth);
+}
+
+.pf-v6-c-toolbar__group {
+ row-gap: var(--pf-v6-c-toolbar__group--RowGap);
+ column-gap: var(--pf-v6-c-toolbar__group--ColumnGap);
+}
+.pf-v6-c-toolbar__group.pf-m-filter-group {
+ column-gap: var(--pf-v6-c-toolbar__group--m-filter-group--ColumnGap);
+}
+.pf-v6-c-toolbar__group.pf-m-label-group {
+ flex: 1;
+ flex-wrap: wrap;
+ column-gap: var(--pf-v6-c-toolbar__group--m-label-group--ColumnGap);
+}
+.pf-v6-c-toolbar__group.pf-m-action-group {
+ column-gap: var(--pf-v6-c-toolbar__group--m-action-group--ColumnGap);
+}
+.pf-v6-c-toolbar__group.pf-m-action-group-plain {
+ column-gap: var(--pf-v6-c-toolbar__group--m-action-group-plain--ColumnGap);
+}
+.pf-v6-c-toolbar__group.pf-m-action-group-inline {
+ flex-wrap: wrap;
+ column-gap: var(--pf-v6-c-toolbar__group--m-action-group-inline--ColumnGap);
+}
+.pf-v6-c-toolbar__group.pf-m-overflow-container {
+ min-width: var(--pf-v6-c-toolbar__group--m-overflow-container--MinWidth);
+}
+
+.pf-v6-c-toolbar__expandable-content {
+ position: absolute;
+ inset-block-start: 100%;
+ inset-inline-start: 0;
+ z-index: var(--pf-v6-c-toolbar__expandable-content--ZIndex);
+ display: none;
+ row-gap: var(--pf-v6-c-toolbar__expandable-content--RowGap);
+ width: 100%;
+ padding-block-start: var(--pf-v6-c-toolbar__expandable-content--PaddingBlockStart);
+ padding-block-end: var(--pf-v6-c-toolbar__expandable-content--PaddingBlockEnd);
+ padding-inline-start: var(--pf-v6-c-toolbar__expandable-content--PaddingInlineStart);
+ padding-inline-end: var(--pf-v6-c-toolbar__expandable-content--PaddingInlineEnd);
+ background-color: var(--pf-v6-c-toolbar__expandable-content--BackgroundColor);
+ box-shadow: var(--pf-v6-c-toolbar__expandable-content--BoxShadow);
+}
+@media screen and (min-width: 62rem) {
+ .pf-v6-c-toolbar__expandable-content {
+ position: static;
+ padding: 0;
+ box-shadow: none;
+ }
+}
+.pf-v6-c-toolbar__expandable-content.pf-m-expanded,
+.pf-v6-c-toolbar__expandable-content .pf-v6-c-toolbar__group {
+ display: grid;
+}
+.pf-v6-c-toolbar__expandable-content .pf-v6-c-toolbar__item > * {
+ flex-basis: 100%;
+}
+.pf-v6-c-toolbar__expandable-content .pf-v6-c-toolbar__group.pf-m-action-group-inline {
+ display: flex;
+ justify-content: center;
+}
+
+.pf-v6-c-toolbar__expand-all-icon {
+ display: inline-flex;
+ transition-timing-function: var(--pf-v6-c-toolbar__expand-all-icon--TransitionTimingFunction);
+ transition-duration: var(--pf-v6-c-toolbar__expand-all-icon--TransitionDuration);
+ transition-property: transform;
+ transform: rotate(var(--pf-v6-c-toolbar__expand-all-icon--Rotate));
+}
+:where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-toolbar__expand-all-icon {
+ scale: -1 1;
+}
+
+.pf-v6-c-toolbar__group,
+.pf-v6-c-toolbar__item {
+ align-items: baseline;
+}
+.pf-v6-c-toolbar__group.pf-m-overflow-container,
+.pf-v6-c-toolbar__item.pf-m-overflow-container {
+ flex: 1;
+ overflow: auto;
+}
+
+.pf-v6-c-toolbar__group.pf-m-align-start,
+.pf-v6-c-toolbar__item.pf-m-align-start {
+ margin-inline-start: 0;
+}
+.pf-v6-c-toolbar__group.pf-m-align-center,
+.pf-v6-c-toolbar__item.pf-m-align-center {
+ margin-inline-start: auto;
+ margin-inline-end: auto;
+}
+.pf-v6-c-toolbar__group.pf-m-align-end,
+.pf-v6-c-toolbar__item.pf-m-align-end {
+ margin-inline-start: auto;
+}
+.pf-v6-c-toolbar__group.pf-m-flex-grow,
+.pf-v6-c-toolbar__item.pf-m-flex-grow {
+ flex-grow: 1;
+}
+.pf-v6-c-toolbar__group.pf-m-align-self-stretch,
+.pf-v6-c-toolbar__item.pf-m-align-self-stretch {
+ align-self: stretch;
+}
+.pf-v6-c-toolbar__group.pf-m-align-self-baseline,
+.pf-v6-c-toolbar__item.pf-m-align-self-baseline {
+ align-self: baseline;
+}
+.pf-v6-c-toolbar__group.pf-m-align-self-start,
+.pf-v6-c-toolbar__item.pf-m-align-self-start {
+ align-self: start;
+}
+.pf-v6-c-toolbar__group.pf-m-align-self-center,
+.pf-v6-c-toolbar__item.pf-m-align-self-center {
+ align-self: center;
+}
+.pf-v6-c-toolbar__group.pf-m-align-self-end,
+.pf-v6-c-toolbar__item.pf-m-align-self-end {
+ align-self: end;
+}
+
+.pf-v6-c-toolbar.pf-m-inset-none {
+ padding-inline: 0;
+}
+.pf-v6-c-toolbar.pf-m-inset-xs {
+ padding-inline: var(--pf-t--global--spacer--xs);
+}
+.pf-v6-c-toolbar.pf-m-inset-sm {
+ padding-inline: var(--pf-t--global--spacer--sm);
+}
+.pf-v6-c-toolbar.pf-m-inset-md {
+ padding-inline: var(--pf-t--global--spacer--md);
+}
+.pf-v6-c-toolbar.pf-m-inset-lg {
+ padding-inline: var(--pf-t--global--spacer--lg);
+}
+.pf-v6-c-toolbar.pf-m-inset-xl {
+ padding-inline: var(--pf-t--global--spacer--xl);
+}
+.pf-v6-c-toolbar.pf-m-inset-2xl {
+ padding-inline: var(--pf-t--global--spacer--2xl);
+}
+.pf-v6-c-toolbar.pf-m-inset-3xl {
+ padding-inline: var(--pf-t--global--spacer--3xl);
+}
+.pf-v6-c-toolbar.pf-m-inset-4xl {
+ padding-inline: var(--pf-t--global--spacer--4xl);
+}
+
+.pf-v6-c-toolbar__group.pf-m-wrap,
+.pf-v6-c-toolbar__item.pf-m-wrap,
+.pf-v6-c-toolbar__content-section.pf-m-wrap {
+ flex-wrap: wrap;
+}
+.pf-v6-c-toolbar__group.pf-m-nowrap,
+.pf-v6-c-toolbar__item.pf-m-nowrap,
+.pf-v6-c-toolbar__content-section.pf-m-nowrap {
+ flex-wrap: nowrap;
+}
+.pf-v6-c-toolbar__group.pf-m-align-items-stretch,
+.pf-v6-c-toolbar__item.pf-m-align-items-stretch,
+.pf-v6-c-toolbar__content-section.pf-m-align-items-stretch {
+ align-items: stretch;
+}
+.pf-v6-c-toolbar__group.pf-m-align-items-baseline,
+.pf-v6-c-toolbar__item.pf-m-align-items-baseline,
+.pf-v6-c-toolbar__content-section.pf-m-align-items-baseline {
+ align-items: baseline;
+}
+.pf-v6-c-toolbar__group.pf-m-align-items-start,
+.pf-v6-c-toolbar__item.pf-m-align-items-start,
+.pf-v6-c-toolbar__content-section.pf-m-align-items-start {
+ align-items: start;
+}
+.pf-v6-c-toolbar__group.pf-m-align-items-center,
+.pf-v6-c-toolbar__item.pf-m-align-items-center,
+.pf-v6-c-toolbar__content-section.pf-m-align-items-center {
+ align-items: center;
+}
+.pf-v6-c-toolbar__group.pf-m-align-items-end,
+.pf-v6-c-toolbar__item.pf-m-align-items-end,
+.pf-v6-c-toolbar__content-section.pf-m-align-items-end {
+ align-items: end;
+}
+.pf-v6-c-toolbar__group.pf-m-gap-none,
+.pf-v6-c-toolbar__item.pf-m-gap-none,
+.pf-v6-c-toolbar__content-section.pf-m-gap-none {
+ gap: 0;
+}
+.pf-v6-c-toolbar__group.pf-m-gap-xs,
+.pf-v6-c-toolbar__item.pf-m-gap-xs,
+.pf-v6-c-toolbar__content-section.pf-m-gap-xs {
+ gap: var(--pf-t--global--spacer--xs);
+}
+.pf-v6-c-toolbar__group.pf-m-gap-sm,
+.pf-v6-c-toolbar__item.pf-m-gap-sm,
+.pf-v6-c-toolbar__content-section.pf-m-gap-sm {
+ gap: var(--pf-t--global--spacer--sm);
+}
+.pf-v6-c-toolbar__group.pf-m-gap-md,
+.pf-v6-c-toolbar__item.pf-m-gap-md,
+.pf-v6-c-toolbar__content-section.pf-m-gap-md {
+ gap: var(--pf-t--global--spacer--md);
+}
+.pf-v6-c-toolbar__group.pf-m-gap-lg,
+.pf-v6-c-toolbar__item.pf-m-gap-lg,
+.pf-v6-c-toolbar__content-section.pf-m-gap-lg {
+ gap: var(--pf-t--global--spacer--lg);
+}
+.pf-v6-c-toolbar__group.pf-m-gap-xl,
+.pf-v6-c-toolbar__item.pf-m-gap-xl,
+.pf-v6-c-toolbar__content-section.pf-m-gap-xl {
+ gap: var(--pf-t--global--spacer--xl);
+}
+.pf-v6-c-toolbar__group.pf-m-gap-2xl,
+.pf-v6-c-toolbar__item.pf-m-gap-2xl,
+.pf-v6-c-toolbar__content-section.pf-m-gap-2xl {
+ gap: var(--pf-t--global--spacer--2xl);
+}
+.pf-v6-c-toolbar__group.pf-m-gap-3xl,
+.pf-v6-c-toolbar__item.pf-m-gap-3xl,
+.pf-v6-c-toolbar__content-section.pf-m-gap-3xl {
+ gap: var(--pf-t--global--spacer--3xl);
+}
+.pf-v6-c-toolbar__group.pf-m-gap-4xl,
+.pf-v6-c-toolbar__item.pf-m-gap-4xl,
+.pf-v6-c-toolbar__content-section.pf-m-gap-4xl {
+ gap: var(--pf-t--global--spacer--4xl);
+}
+.pf-v6-c-toolbar__group.pf-m-column-gap-none,
+.pf-v6-c-toolbar__item.pf-m-column-gap-none,
+.pf-v6-c-toolbar__content-section.pf-m-column-gap-none {
+ column-gap: 0;
+}
+.pf-v6-c-toolbar__group.pf-m-row-gap-none,
+.pf-v6-c-toolbar__item.pf-m-row-gap-none,
+.pf-v6-c-toolbar__content-section.pf-m-row-gap-none {
+ row-gap: 0;
+}
+.pf-v6-c-toolbar__group.pf-m-column-gap-xs,
+.pf-v6-c-toolbar__item.pf-m-column-gap-xs,
+.pf-v6-c-toolbar__content-section.pf-m-column-gap-xs {
+ column-gap: var(--pf-t--global--spacer--xs);
+}
+.pf-v6-c-toolbar__group.pf-m-row-gap-xs,
+.pf-v6-c-toolbar__item.pf-m-row-gap-xs,
+.pf-v6-c-toolbar__content-section.pf-m-row-gap-xs {
+ row-gap: var(--pf-t--global--spacer--xs);
+}
+.pf-v6-c-toolbar__group.pf-m-column-gap-sm,
+.pf-v6-c-toolbar__item.pf-m-column-gap-sm,
+.pf-v6-c-toolbar__content-section.pf-m-column-gap-sm {
+ column-gap: var(--pf-t--global--spacer--sm);
+}
+.pf-v6-c-toolbar__group.pf-m-row-gap-sm,
+.pf-v6-c-toolbar__item.pf-m-row-gap-sm,
+.pf-v6-c-toolbar__content-section.pf-m-row-gap-sm {
+ row-gap: var(--pf-t--global--spacer--sm);
+}
+.pf-v6-c-toolbar__group.pf-m-column-gap-md,
+.pf-v6-c-toolbar__item.pf-m-column-gap-md,
+.pf-v6-c-toolbar__content-section.pf-m-column-gap-md {
+ column-gap: var(--pf-t--global--spacer--md);
+}
+.pf-v6-c-toolbar__group.pf-m-row-gap-md,
+.pf-v6-c-toolbar__item.pf-m-row-gap-md,
+.pf-v6-c-toolbar__content-section.pf-m-row-gap-md {
+ row-gap: var(--pf-t--global--spacer--md);
+}
+.pf-v6-c-toolbar__group.pf-m-column-gap-lg,
+.pf-v6-c-toolbar__item.pf-m-column-gap-lg,
+.pf-v6-c-toolbar__content-section.pf-m-column-gap-lg {
+ column-gap: var(--pf-t--global--spacer--lg);
+}
+.pf-v6-c-toolbar__group.pf-m-row-gap-lg,
+.pf-v6-c-toolbar__item.pf-m-row-gap-lg,
+.pf-v6-c-toolbar__content-section.pf-m-row-gap-lg {
+ row-gap: var(--pf-t--global--spacer--lg);
+}
+.pf-v6-c-toolbar__group.pf-m-column-gap-xl,
+.pf-v6-c-toolbar__item.pf-m-column-gap-xl,
+.pf-v6-c-toolbar__content-section.pf-m-column-gap-xl {
+ column-gap: var(--pf-t--global--spacer--xl);
+}
+.pf-v6-c-toolbar__group.pf-m-row-gap-xl,
+.pf-v6-c-toolbar__item.pf-m-row-gap-xl,
+.pf-v6-c-toolbar__content-section.pf-m-row-gap-xl {
+ row-gap: var(--pf-t--global--spacer--xl);
+}
+.pf-v6-c-toolbar__group.pf-m-column-gap-2xl,
+.pf-v6-c-toolbar__item.pf-m-column-gap-2xl,
+.pf-v6-c-toolbar__content-section.pf-m-column-gap-2xl {
+ column-gap: var(--pf-t--global--spacer--2xl);
+}
+.pf-v6-c-toolbar__group.pf-m-row-gap-2xl,
+.pf-v6-c-toolbar__item.pf-m-row-gap-2xl,
+.pf-v6-c-toolbar__content-section.pf-m-row-gap-2xl {
+ row-gap: var(--pf-t--global--spacer--2xl);
+}
+.pf-v6-c-toolbar__group.pf-m-column-gap-3xl,
+.pf-v6-c-toolbar__item.pf-m-column-gap-3xl,
+.pf-v6-c-toolbar__content-section.pf-m-column-gap-3xl {
+ column-gap: var(--pf-t--global--spacer--3xl);
+}
+.pf-v6-c-toolbar__group.pf-m-row-gap-3xl,
+.pf-v6-c-toolbar__item.pf-m-row-gap-3xl,
+.pf-v6-c-toolbar__content-section.pf-m-row-gap-3xl {
+ row-gap: var(--pf-t--global--spacer--3xl);
+}
+.pf-v6-c-toolbar__group.pf-m-column-gap-4xl,
+.pf-v6-c-toolbar__item.pf-m-column-gap-4xl,
+.pf-v6-c-toolbar__content-section.pf-m-column-gap-4xl {
+ column-gap: var(--pf-t--global--spacer--4xl);
+}
+.pf-v6-c-toolbar__group.pf-m-row-gap-4xl,
+.pf-v6-c-toolbar__item.pf-m-row-gap-4xl,
+.pf-v6-c-toolbar__content-section.pf-m-row-gap-4xl {
+ row-gap: var(--pf-t--global--spacer--4xl);
+}
+
+.pf-v6-c-toolbar__group:where(.pf-m-toggle-group).pf-m-show .pf-v6-c-toolbar__group,
+.pf-v6-c-toolbar__group:where(.pf-m-toggle-group).pf-m-show .pf-v6-c-toolbar__item {
+ display: flex;
+ flex: 0 1 auto;
+}
+.pf-v6-c-toolbar__group:where(.pf-m-toggle-group).pf-m-show .pf-v6-c-toolbar__toggle {
+ display: none;
+}
+.pf-v6-c-toolbar__group:where(.pf-m-toggle-group) .pf-v6-c-toolbar__group,
+.pf-v6-c-toolbar__group:where(.pf-m-toggle-group) .pf-v6-c-toolbar__item, .pf-v6-c-toolbar__group:where(.pf-m-toggle-group).pf-m-hide .pf-v6-c-toolbar__group,
+.pf-v6-c-toolbar__group:where(.pf-m-toggle-group).pf-m-hide .pf-v6-c-toolbar__item {
+ display: none;
+}
+.pf-v6-c-toolbar__group:where(.pf-m-toggle-group) .pf-v6-c-toolbar__toggle, .pf-v6-c-toolbar__group:where(.pf-m-toggle-group).pf-m-hide .pf-v6-c-toolbar__toggle {
+ display: inline-flex;
+}
+
+@media (min-width: 36rem) {
+ .pf-v6-c-toolbar__group.pf-m-align-start-on-sm,
+ .pf-v6-c-toolbar__item.pf-m-align-start-on-sm {
+ margin-inline-start: 0;
+ }
+ .pf-v6-c-toolbar__group.pf-m-align-center-on-sm,
+ .pf-v6-c-toolbar__item.pf-m-align-center-on-sm {
+ margin-inline-start: auto;
+ margin-inline-end: auto;
+ }
+ .pf-v6-c-toolbar__group.pf-m-align-end-on-sm,
+ .pf-v6-c-toolbar__item.pf-m-align-end-on-sm {
+ margin-inline-start: auto;
+ }
+ .pf-v6-c-toolbar__group.pf-m-flex-grow-on-sm,
+ .pf-v6-c-toolbar__item.pf-m-flex-grow-on-sm {
+ flex-grow: 1;
+ }
+ .pf-v6-c-toolbar__group.pf-m-align-self-stretch-on-sm,
+ .pf-v6-c-toolbar__item.pf-m-align-self-stretch-on-sm {
+ align-self: stretch;
+ }
+ .pf-v6-c-toolbar__group.pf-m-align-self-baseline-on-sm,
+ .pf-v6-c-toolbar__item.pf-m-align-self-baseline-on-sm {
+ align-self: baseline;
+ }
+ .pf-v6-c-toolbar__group.pf-m-align-self-start-on-sm,
+ .pf-v6-c-toolbar__item.pf-m-align-self-start-on-sm {
+ align-self: start;
+ }
+ .pf-v6-c-toolbar__group.pf-m-align-self-center-on-sm,
+ .pf-v6-c-toolbar__item.pf-m-align-self-center-on-sm {
+ align-self: center;
+ }
+ .pf-v6-c-toolbar__group.pf-m-align-self-end-on-sm,
+ .pf-v6-c-toolbar__item.pf-m-align-self-end-on-sm {
+ align-self: end;
+ }
+ .pf-v6-c-toolbar.pf-m-inset-none-on-sm {
+ padding-inline: 0;
+ }
+ .pf-v6-c-toolbar.pf-m-inset-xs-on-sm {
+ padding-inline: var(--pf-t--global--spacer--xs);
+ }
+ .pf-v6-c-toolbar.pf-m-inset-sm-on-sm {
+ padding-inline: var(--pf-t--global--spacer--sm);
+ }
+ .pf-v6-c-toolbar.pf-m-inset-md-on-sm {
+ padding-inline: var(--pf-t--global--spacer--md);
+ }
+ .pf-v6-c-toolbar.pf-m-inset-lg-on-sm {
+ padding-inline: var(--pf-t--global--spacer--lg);
+ }
+ .pf-v6-c-toolbar.pf-m-inset-xl-on-sm {
+ padding-inline: var(--pf-t--global--spacer--xl);
+ }
+ .pf-v6-c-toolbar.pf-m-inset-2xl-on-sm {
+ padding-inline: var(--pf-t--global--spacer--2xl);
+ }
+ .pf-v6-c-toolbar.pf-m-inset-3xl-on-sm {
+ padding-inline: var(--pf-t--global--spacer--3xl);
+ }
+ .pf-v6-c-toolbar.pf-m-inset-4xl-on-sm {
+ padding-inline: var(--pf-t--global--spacer--4xl);
+ }
+ .pf-v6-c-toolbar__group.pf-m-wrap-on-sm,
+ .pf-v6-c-toolbar__item.pf-m-wrap-on-sm,
+ .pf-v6-c-toolbar__content-section.pf-m-wrap-on-sm {
+ flex-wrap: wrap;
+ }
+ .pf-v6-c-toolbar__group.pf-m-nowrap-on-sm,
+ .pf-v6-c-toolbar__item.pf-m-nowrap-on-sm,
+ .pf-v6-c-toolbar__content-section.pf-m-nowrap-on-sm {
+ flex-wrap: nowrap;
+ }
+ .pf-v6-c-toolbar__group.pf-m-align-items-stretch-on-sm,
+ .pf-v6-c-toolbar__item.pf-m-align-items-stretch-on-sm,
+ .pf-v6-c-toolbar__content-section.pf-m-align-items-stretch-on-sm {
+ align-items: stretch;
+ }
+ .pf-v6-c-toolbar__group.pf-m-align-items-baseline-on-sm,
+ .pf-v6-c-toolbar__item.pf-m-align-items-baseline-on-sm,
+ .pf-v6-c-toolbar__content-section.pf-m-align-items-baseline-on-sm {
+ align-items: baseline;
+ }
+ .pf-v6-c-toolbar__group.pf-m-align-items-start-on-sm,
+ .pf-v6-c-toolbar__item.pf-m-align-items-start-on-sm,
+ .pf-v6-c-toolbar__content-section.pf-m-align-items-start-on-sm {
+ align-items: start;
+ }
+ .pf-v6-c-toolbar__group.pf-m-align-items-center-on-sm,
+ .pf-v6-c-toolbar__item.pf-m-align-items-center-on-sm,
+ .pf-v6-c-toolbar__content-section.pf-m-align-items-center-on-sm {
+ align-items: center;
+ }
+ .pf-v6-c-toolbar__group.pf-m-align-items-end-on-sm,
+ .pf-v6-c-toolbar__item.pf-m-align-items-end-on-sm,
+ .pf-v6-c-toolbar__content-section.pf-m-align-items-end-on-sm {
+ align-items: end;
+ }
+ .pf-v6-c-toolbar__group.pf-m-gap-none-on-sm,
+ .pf-v6-c-toolbar__item.pf-m-gap-none-on-sm,
+ .pf-v6-c-toolbar__content-section.pf-m-gap-none-on-sm {
+ gap: 0;
+ }
+ .pf-v6-c-toolbar__group.pf-m-gap-xs-on-sm,
+ .pf-v6-c-toolbar__item.pf-m-gap-xs-on-sm,
+ .pf-v6-c-toolbar__content-section.pf-m-gap-xs-on-sm {
+ gap: var(--pf-t--global--spacer--xs);
+ }
+ .pf-v6-c-toolbar__group.pf-m-gap-sm-on-sm,
+ .pf-v6-c-toolbar__item.pf-m-gap-sm-on-sm,
+ .pf-v6-c-toolbar__content-section.pf-m-gap-sm-on-sm {
+ gap: var(--pf-t--global--spacer--sm);
+ }
+ .pf-v6-c-toolbar__group.pf-m-gap-md-on-sm,
+ .pf-v6-c-toolbar__item.pf-m-gap-md-on-sm,
+ .pf-v6-c-toolbar__content-section.pf-m-gap-md-on-sm {
+ gap: var(--pf-t--global--spacer--md);
+ }
+ .pf-v6-c-toolbar__group.pf-m-gap-lg-on-sm,
+ .pf-v6-c-toolbar__item.pf-m-gap-lg-on-sm,
+ .pf-v6-c-toolbar__content-section.pf-m-gap-lg-on-sm {
+ gap: var(--pf-t--global--spacer--lg);
+ }
+ .pf-v6-c-toolbar__group.pf-m-gap-xl-on-sm,
+ .pf-v6-c-toolbar__item.pf-m-gap-xl-on-sm,
+ .pf-v6-c-toolbar__content-section.pf-m-gap-xl-on-sm {
+ gap: var(--pf-t--global--spacer--xl);
+ }
+ .pf-v6-c-toolbar__group.pf-m-gap-2xl-on-sm,
+ .pf-v6-c-toolbar__item.pf-m-gap-2xl-on-sm,
+ .pf-v6-c-toolbar__content-section.pf-m-gap-2xl-on-sm {
+ gap: var(--pf-t--global--spacer--2xl);
+ }
+ .pf-v6-c-toolbar__group.pf-m-gap-3xl-on-sm,
+ .pf-v6-c-toolbar__item.pf-m-gap-3xl-on-sm,
+ .pf-v6-c-toolbar__content-section.pf-m-gap-3xl-on-sm {
+ gap: var(--pf-t--global--spacer--3xl);
+ }
+ .pf-v6-c-toolbar__group.pf-m-gap-4xl-on-sm,
+ .pf-v6-c-toolbar__item.pf-m-gap-4xl-on-sm,
+ .pf-v6-c-toolbar__content-section.pf-m-gap-4xl-on-sm {
+ gap: var(--pf-t--global--spacer--4xl);
+ }
+ .pf-v6-c-toolbar__group.pf-m-column-gap-none-on-sm,
+ .pf-v6-c-toolbar__item.pf-m-column-gap-none-on-sm,
+ .pf-v6-c-toolbar__content-section.pf-m-column-gap-none-on-sm {
+ column-gap: 0;
+ }
+ .pf-v6-c-toolbar__group.pf-m-row-gap-none-on-sm,
+ .pf-v6-c-toolbar__item.pf-m-row-gap-none-on-sm,
+ .pf-v6-c-toolbar__content-section.pf-m-row-gap-none-on-sm {
+ row-gap: 0;
+ }
+ .pf-v6-c-toolbar__group.pf-m-column-gap-xs-on-sm,
+ .pf-v6-c-toolbar__item.pf-m-column-gap-xs-on-sm,
+ .pf-v6-c-toolbar__content-section.pf-m-column-gap-xs-on-sm {
+ column-gap: var(--pf-t--global--spacer--xs);
+ }
+ .pf-v6-c-toolbar__group.pf-m-row-gap-xs-on-sm,
+ .pf-v6-c-toolbar__item.pf-m-row-gap-xs-on-sm,
+ .pf-v6-c-toolbar__content-section.pf-m-row-gap-xs-on-sm {
+ row-gap: var(--pf-t--global--spacer--xs);
+ }
+ .pf-v6-c-toolbar__group.pf-m-column-gap-sm-on-sm,
+ .pf-v6-c-toolbar__item.pf-m-column-gap-sm-on-sm,
+ .pf-v6-c-toolbar__content-section.pf-m-column-gap-sm-on-sm {
+ column-gap: var(--pf-t--global--spacer--sm);
+ }
+ .pf-v6-c-toolbar__group.pf-m-row-gap-sm-on-sm,
+ .pf-v6-c-toolbar__item.pf-m-row-gap-sm-on-sm,
+ .pf-v6-c-toolbar__content-section.pf-m-row-gap-sm-on-sm {
+ row-gap: var(--pf-t--global--spacer--sm);
+ }
+ .pf-v6-c-toolbar__group.pf-m-column-gap-md-on-sm,
+ .pf-v6-c-toolbar__item.pf-m-column-gap-md-on-sm,
+ .pf-v6-c-toolbar__content-section.pf-m-column-gap-md-on-sm {
+ column-gap: var(--pf-t--global--spacer--md);
+ }
+ .pf-v6-c-toolbar__group.pf-m-row-gap-md-on-sm,
+ .pf-v6-c-toolbar__item.pf-m-row-gap-md-on-sm,
+ .pf-v6-c-toolbar__content-section.pf-m-row-gap-md-on-sm {
+ row-gap: var(--pf-t--global--spacer--md);
+ }
+ .pf-v6-c-toolbar__group.pf-m-column-gap-lg-on-sm,
+ .pf-v6-c-toolbar__item.pf-m-column-gap-lg-on-sm,
+ .pf-v6-c-toolbar__content-section.pf-m-column-gap-lg-on-sm {
+ column-gap: var(--pf-t--global--spacer--lg);
+ }
+ .pf-v6-c-toolbar__group.pf-m-row-gap-lg-on-sm,
+ .pf-v6-c-toolbar__item.pf-m-row-gap-lg-on-sm,
+ .pf-v6-c-toolbar__content-section.pf-m-row-gap-lg-on-sm {
+ row-gap: var(--pf-t--global--spacer--lg);
+ }
+ .pf-v6-c-toolbar__group.pf-m-column-gap-xl-on-sm,
+ .pf-v6-c-toolbar__item.pf-m-column-gap-xl-on-sm,
+ .pf-v6-c-toolbar__content-section.pf-m-column-gap-xl-on-sm {
+ column-gap: var(--pf-t--global--spacer--xl);
+ }
+ .pf-v6-c-toolbar__group.pf-m-row-gap-xl-on-sm,
+ .pf-v6-c-toolbar__item.pf-m-row-gap-xl-on-sm,
+ .pf-v6-c-toolbar__content-section.pf-m-row-gap-xl-on-sm {
+ row-gap: var(--pf-t--global--spacer--xl);
+ }
+ .pf-v6-c-toolbar__group.pf-m-column-gap-2xl-on-sm,
+ .pf-v6-c-toolbar__item.pf-m-column-gap-2xl-on-sm,
+ .pf-v6-c-toolbar__content-section.pf-m-column-gap-2xl-on-sm {
+ column-gap: var(--pf-t--global--spacer--2xl);
+ }
+ .pf-v6-c-toolbar__group.pf-m-row-gap-2xl-on-sm,
+ .pf-v6-c-toolbar__item.pf-m-row-gap-2xl-on-sm,
+ .pf-v6-c-toolbar__content-section.pf-m-row-gap-2xl-on-sm {
+ row-gap: var(--pf-t--global--spacer--2xl);
+ }
+ .pf-v6-c-toolbar__group.pf-m-column-gap-3xl-on-sm,
+ .pf-v6-c-toolbar__item.pf-m-column-gap-3xl-on-sm,
+ .pf-v6-c-toolbar__content-section.pf-m-column-gap-3xl-on-sm {
+ column-gap: var(--pf-t--global--spacer--3xl);
+ }
+ .pf-v6-c-toolbar__group.pf-m-row-gap-3xl-on-sm,
+ .pf-v6-c-toolbar__item.pf-m-row-gap-3xl-on-sm,
+ .pf-v6-c-toolbar__content-section.pf-m-row-gap-3xl-on-sm {
+ row-gap: var(--pf-t--global--spacer--3xl);
+ }
+ .pf-v6-c-toolbar__group.pf-m-column-gap-4xl-on-sm,
+ .pf-v6-c-toolbar__item.pf-m-column-gap-4xl-on-sm,
+ .pf-v6-c-toolbar__content-section.pf-m-column-gap-4xl-on-sm {
+ column-gap: var(--pf-t--global--spacer--4xl);
+ }
+ .pf-v6-c-toolbar__group.pf-m-row-gap-4xl-on-sm,
+ .pf-v6-c-toolbar__item.pf-m-row-gap-4xl-on-sm,
+ .pf-v6-c-toolbar__content-section.pf-m-row-gap-4xl-on-sm {
+ row-gap: var(--pf-t--global--spacer--4xl);
+ }
+ .pf-v6-c-toolbar__group:where(.pf-m-toggle-group).pf-m-show-on-sm .pf-v6-c-toolbar__group,
+ .pf-v6-c-toolbar__group:where(.pf-m-toggle-group).pf-m-show-on-sm .pf-v6-c-toolbar__item {
+ display: flex;
+ flex: 0 1 auto;
+ }
+ .pf-v6-c-toolbar__group:where(.pf-m-toggle-group).pf-m-show-on-sm .pf-v6-c-toolbar__toggle {
+ display: none;
+ }
+ .pf-v6-c-toolbar__group:where(.pf-m-toggle-group) .pf-v6-c-toolbar__group,
+ .pf-v6-c-toolbar__group:where(.pf-m-toggle-group) .pf-v6-c-toolbar__item, .pf-v6-c-toolbar__group:where(.pf-m-toggle-group).pf-m-hide-on-sm .pf-v6-c-toolbar__group,
+ .pf-v6-c-toolbar__group:where(.pf-m-toggle-group).pf-m-hide-on-sm .pf-v6-c-toolbar__item {
+ display: none;
+ }
+ .pf-v6-c-toolbar__group:where(.pf-m-toggle-group) .pf-v6-c-toolbar__toggle, .pf-v6-c-toolbar__group:where(.pf-m-toggle-group).pf-m-hide-on-sm .pf-v6-c-toolbar__toggle {
+ display: inline-flex;
+ }
+}
+@media (min-width: 48rem) {
+ .pf-v6-c-toolbar__group.pf-m-align-start-on-md,
+ .pf-v6-c-toolbar__item.pf-m-align-start-on-md {
+ margin-inline-start: 0;
+ }
+ .pf-v6-c-toolbar__group.pf-m-align-center-on-md,
+ .pf-v6-c-toolbar__item.pf-m-align-center-on-md {
+ margin-inline-start: auto;
+ margin-inline-end: auto;
+ }
+ .pf-v6-c-toolbar__group.pf-m-align-end-on-md,
+ .pf-v6-c-toolbar__item.pf-m-align-end-on-md {
+ margin-inline-start: auto;
+ }
+ .pf-v6-c-toolbar__group.pf-m-flex-grow-on-md,
+ .pf-v6-c-toolbar__item.pf-m-flex-grow-on-md {
+ flex-grow: 1;
+ }
+ .pf-v6-c-toolbar__group.pf-m-align-self-stretch-on-md,
+ .pf-v6-c-toolbar__item.pf-m-align-self-stretch-on-md {
+ align-self: stretch;
+ }
+ .pf-v6-c-toolbar__group.pf-m-align-self-baseline-on-md,
+ .pf-v6-c-toolbar__item.pf-m-align-self-baseline-on-md {
+ align-self: baseline;
+ }
+ .pf-v6-c-toolbar__group.pf-m-align-self-start-on-md,
+ .pf-v6-c-toolbar__item.pf-m-align-self-start-on-md {
+ align-self: start;
+ }
+ .pf-v6-c-toolbar__group.pf-m-align-self-center-on-md,
+ .pf-v6-c-toolbar__item.pf-m-align-self-center-on-md {
+ align-self: center;
+ }
+ .pf-v6-c-toolbar__group.pf-m-align-self-end-on-md,
+ .pf-v6-c-toolbar__item.pf-m-align-self-end-on-md {
+ align-self: end;
+ }
+ .pf-v6-c-toolbar.pf-m-inset-none-on-md {
+ padding-inline: 0;
+ }
+ .pf-v6-c-toolbar.pf-m-inset-xs-on-md {
+ padding-inline: var(--pf-t--global--spacer--xs);
+ }
+ .pf-v6-c-toolbar.pf-m-inset-sm-on-md {
+ padding-inline: var(--pf-t--global--spacer--sm);
+ }
+ .pf-v6-c-toolbar.pf-m-inset-md-on-md {
+ padding-inline: var(--pf-t--global--spacer--md);
+ }
+ .pf-v6-c-toolbar.pf-m-inset-lg-on-md {
+ padding-inline: var(--pf-t--global--spacer--lg);
+ }
+ .pf-v6-c-toolbar.pf-m-inset-xl-on-md {
+ padding-inline: var(--pf-t--global--spacer--xl);
+ }
+ .pf-v6-c-toolbar.pf-m-inset-2xl-on-md {
+ padding-inline: var(--pf-t--global--spacer--2xl);
+ }
+ .pf-v6-c-toolbar.pf-m-inset-3xl-on-md {
+ padding-inline: var(--pf-t--global--spacer--3xl);
+ }
+ .pf-v6-c-toolbar.pf-m-inset-4xl-on-md {
+ padding-inline: var(--pf-t--global--spacer--4xl);
+ }
+ .pf-v6-c-toolbar__group.pf-m-wrap-on-md,
+ .pf-v6-c-toolbar__item.pf-m-wrap-on-md,
+ .pf-v6-c-toolbar__content-section.pf-m-wrap-on-md {
+ flex-wrap: wrap;
+ }
+ .pf-v6-c-toolbar__group.pf-m-nowrap-on-md,
+ .pf-v6-c-toolbar__item.pf-m-nowrap-on-md,
+ .pf-v6-c-toolbar__content-section.pf-m-nowrap-on-md {
+ flex-wrap: nowrap;
+ }
+ .pf-v6-c-toolbar__group.pf-m-align-items-stretch-on-md,
+ .pf-v6-c-toolbar__item.pf-m-align-items-stretch-on-md,
+ .pf-v6-c-toolbar__content-section.pf-m-align-items-stretch-on-md {
+ align-items: stretch;
+ }
+ .pf-v6-c-toolbar__group.pf-m-align-items-baseline-on-md,
+ .pf-v6-c-toolbar__item.pf-m-align-items-baseline-on-md,
+ .pf-v6-c-toolbar__content-section.pf-m-align-items-baseline-on-md {
+ align-items: baseline;
+ }
+ .pf-v6-c-toolbar__group.pf-m-align-items-start-on-md,
+ .pf-v6-c-toolbar__item.pf-m-align-items-start-on-md,
+ .pf-v6-c-toolbar__content-section.pf-m-align-items-start-on-md {
+ align-items: start;
+ }
+ .pf-v6-c-toolbar__group.pf-m-align-items-center-on-md,
+ .pf-v6-c-toolbar__item.pf-m-align-items-center-on-md,
+ .pf-v6-c-toolbar__content-section.pf-m-align-items-center-on-md {
+ align-items: center;
+ }
+ .pf-v6-c-toolbar__group.pf-m-align-items-end-on-md,
+ .pf-v6-c-toolbar__item.pf-m-align-items-end-on-md,
+ .pf-v6-c-toolbar__content-section.pf-m-align-items-end-on-md {
+ align-items: end;
+ }
+ .pf-v6-c-toolbar__group.pf-m-gap-none-on-md,
+ .pf-v6-c-toolbar__item.pf-m-gap-none-on-md,
+ .pf-v6-c-toolbar__content-section.pf-m-gap-none-on-md {
+ gap: 0;
+ }
+ .pf-v6-c-toolbar__group.pf-m-gap-xs-on-md,
+ .pf-v6-c-toolbar__item.pf-m-gap-xs-on-md,
+ .pf-v6-c-toolbar__content-section.pf-m-gap-xs-on-md {
+ gap: var(--pf-t--global--spacer--xs);
+ }
+ .pf-v6-c-toolbar__group.pf-m-gap-sm-on-md,
+ .pf-v6-c-toolbar__item.pf-m-gap-sm-on-md,
+ .pf-v6-c-toolbar__content-section.pf-m-gap-sm-on-md {
+ gap: var(--pf-t--global--spacer--sm);
+ }
+ .pf-v6-c-toolbar__group.pf-m-gap-md-on-md,
+ .pf-v6-c-toolbar__item.pf-m-gap-md-on-md,
+ .pf-v6-c-toolbar__content-section.pf-m-gap-md-on-md {
+ gap: var(--pf-t--global--spacer--md);
+ }
+ .pf-v6-c-toolbar__group.pf-m-gap-lg-on-md,
+ .pf-v6-c-toolbar__item.pf-m-gap-lg-on-md,
+ .pf-v6-c-toolbar__content-section.pf-m-gap-lg-on-md {
+ gap: var(--pf-t--global--spacer--lg);
+ }
+ .pf-v6-c-toolbar__group.pf-m-gap-xl-on-md,
+ .pf-v6-c-toolbar__item.pf-m-gap-xl-on-md,
+ .pf-v6-c-toolbar__content-section.pf-m-gap-xl-on-md {
+ gap: var(--pf-t--global--spacer--xl);
+ }
+ .pf-v6-c-toolbar__group.pf-m-gap-2xl-on-md,
+ .pf-v6-c-toolbar__item.pf-m-gap-2xl-on-md,
+ .pf-v6-c-toolbar__content-section.pf-m-gap-2xl-on-md {
+ gap: var(--pf-t--global--spacer--2xl);
+ }
+ .pf-v6-c-toolbar__group.pf-m-gap-3xl-on-md,
+ .pf-v6-c-toolbar__item.pf-m-gap-3xl-on-md,
+ .pf-v6-c-toolbar__content-section.pf-m-gap-3xl-on-md {
+ gap: var(--pf-t--global--spacer--3xl);
+ }
+ .pf-v6-c-toolbar__group.pf-m-gap-4xl-on-md,
+ .pf-v6-c-toolbar__item.pf-m-gap-4xl-on-md,
+ .pf-v6-c-toolbar__content-section.pf-m-gap-4xl-on-md {
+ gap: var(--pf-t--global--spacer--4xl);
+ }
+ .pf-v6-c-toolbar__group.pf-m-column-gap-none-on-md,
+ .pf-v6-c-toolbar__item.pf-m-column-gap-none-on-md,
+ .pf-v6-c-toolbar__content-section.pf-m-column-gap-none-on-md {
+ column-gap: 0;
+ }
+ .pf-v6-c-toolbar__group.pf-m-row-gap-none-on-md,
+ .pf-v6-c-toolbar__item.pf-m-row-gap-none-on-md,
+ .pf-v6-c-toolbar__content-section.pf-m-row-gap-none-on-md {
+ row-gap: 0;
+ }
+ .pf-v6-c-toolbar__group.pf-m-column-gap-xs-on-md,
+ .pf-v6-c-toolbar__item.pf-m-column-gap-xs-on-md,
+ .pf-v6-c-toolbar__content-section.pf-m-column-gap-xs-on-md {
+ column-gap: var(--pf-t--global--spacer--xs);
+ }
+ .pf-v6-c-toolbar__group.pf-m-row-gap-xs-on-md,
+ .pf-v6-c-toolbar__item.pf-m-row-gap-xs-on-md,
+ .pf-v6-c-toolbar__content-section.pf-m-row-gap-xs-on-md {
+ row-gap: var(--pf-t--global--spacer--xs);
+ }
+ .pf-v6-c-toolbar__group.pf-m-column-gap-sm-on-md,
+ .pf-v6-c-toolbar__item.pf-m-column-gap-sm-on-md,
+ .pf-v6-c-toolbar__content-section.pf-m-column-gap-sm-on-md {
+ column-gap: var(--pf-t--global--spacer--sm);
+ }
+ .pf-v6-c-toolbar__group.pf-m-row-gap-sm-on-md,
+ .pf-v6-c-toolbar__item.pf-m-row-gap-sm-on-md,
+ .pf-v6-c-toolbar__content-section.pf-m-row-gap-sm-on-md {
+ row-gap: var(--pf-t--global--spacer--sm);
+ }
+ .pf-v6-c-toolbar__group.pf-m-column-gap-md-on-md,
+ .pf-v6-c-toolbar__item.pf-m-column-gap-md-on-md,
+ .pf-v6-c-toolbar__content-section.pf-m-column-gap-md-on-md {
+ column-gap: var(--pf-t--global--spacer--md);
+ }
+ .pf-v6-c-toolbar__group.pf-m-row-gap-md-on-md,
+ .pf-v6-c-toolbar__item.pf-m-row-gap-md-on-md,
+ .pf-v6-c-toolbar__content-section.pf-m-row-gap-md-on-md {
+ row-gap: var(--pf-t--global--spacer--md);
+ }
+ .pf-v6-c-toolbar__group.pf-m-column-gap-lg-on-md,
+ .pf-v6-c-toolbar__item.pf-m-column-gap-lg-on-md,
+ .pf-v6-c-toolbar__content-section.pf-m-column-gap-lg-on-md {
+ column-gap: var(--pf-t--global--spacer--lg);
+ }
+ .pf-v6-c-toolbar__group.pf-m-row-gap-lg-on-md,
+ .pf-v6-c-toolbar__item.pf-m-row-gap-lg-on-md,
+ .pf-v6-c-toolbar__content-section.pf-m-row-gap-lg-on-md {
+ row-gap: var(--pf-t--global--spacer--lg);
+ }
+ .pf-v6-c-toolbar__group.pf-m-column-gap-xl-on-md,
+ .pf-v6-c-toolbar__item.pf-m-column-gap-xl-on-md,
+ .pf-v6-c-toolbar__content-section.pf-m-column-gap-xl-on-md {
+ column-gap: var(--pf-t--global--spacer--xl);
+ }
+ .pf-v6-c-toolbar__group.pf-m-row-gap-xl-on-md,
+ .pf-v6-c-toolbar__item.pf-m-row-gap-xl-on-md,
+ .pf-v6-c-toolbar__content-section.pf-m-row-gap-xl-on-md {
+ row-gap: var(--pf-t--global--spacer--xl);
+ }
+ .pf-v6-c-toolbar__group.pf-m-column-gap-2xl-on-md,
+ .pf-v6-c-toolbar__item.pf-m-column-gap-2xl-on-md,
+ .pf-v6-c-toolbar__content-section.pf-m-column-gap-2xl-on-md {
+ column-gap: var(--pf-t--global--spacer--2xl);
+ }
+ .pf-v6-c-toolbar__group.pf-m-row-gap-2xl-on-md,
+ .pf-v6-c-toolbar__item.pf-m-row-gap-2xl-on-md,
+ .pf-v6-c-toolbar__content-section.pf-m-row-gap-2xl-on-md {
+ row-gap: var(--pf-t--global--spacer--2xl);
+ }
+ .pf-v6-c-toolbar__group.pf-m-column-gap-3xl-on-md,
+ .pf-v6-c-toolbar__item.pf-m-column-gap-3xl-on-md,
+ .pf-v6-c-toolbar__content-section.pf-m-column-gap-3xl-on-md {
+ column-gap: var(--pf-t--global--spacer--3xl);
+ }
+ .pf-v6-c-toolbar__group.pf-m-row-gap-3xl-on-md,
+ .pf-v6-c-toolbar__item.pf-m-row-gap-3xl-on-md,
+ .pf-v6-c-toolbar__content-section.pf-m-row-gap-3xl-on-md {
+ row-gap: var(--pf-t--global--spacer--3xl);
+ }
+ .pf-v6-c-toolbar__group.pf-m-column-gap-4xl-on-md,
+ .pf-v6-c-toolbar__item.pf-m-column-gap-4xl-on-md,
+ .pf-v6-c-toolbar__content-section.pf-m-column-gap-4xl-on-md {
+ column-gap: var(--pf-t--global--spacer--4xl);
+ }
+ .pf-v6-c-toolbar__group.pf-m-row-gap-4xl-on-md,
+ .pf-v6-c-toolbar__item.pf-m-row-gap-4xl-on-md,
+ .pf-v6-c-toolbar__content-section.pf-m-row-gap-4xl-on-md {
+ row-gap: var(--pf-t--global--spacer--4xl);
+ }
+ .pf-v6-c-toolbar__group:where(.pf-m-toggle-group).pf-m-show-on-md .pf-v6-c-toolbar__group,
+ .pf-v6-c-toolbar__group:where(.pf-m-toggle-group).pf-m-show-on-md .pf-v6-c-toolbar__item {
+ display: flex;
+ flex: 0 1 auto;
+ }
+ .pf-v6-c-toolbar__group:where(.pf-m-toggle-group).pf-m-show-on-md .pf-v6-c-toolbar__toggle {
+ display: none;
+ }
+ .pf-v6-c-toolbar__group:where(.pf-m-toggle-group) .pf-v6-c-toolbar__group,
+ .pf-v6-c-toolbar__group:where(.pf-m-toggle-group) .pf-v6-c-toolbar__item, .pf-v6-c-toolbar__group:where(.pf-m-toggle-group).pf-m-hide-on-md .pf-v6-c-toolbar__group,
+ .pf-v6-c-toolbar__group:where(.pf-m-toggle-group).pf-m-hide-on-md .pf-v6-c-toolbar__item {
+ display: none;
+ }
+ .pf-v6-c-toolbar__group:where(.pf-m-toggle-group) .pf-v6-c-toolbar__toggle, .pf-v6-c-toolbar__group:where(.pf-m-toggle-group).pf-m-hide-on-md .pf-v6-c-toolbar__toggle {
+ display: inline-flex;
+ }
+}
+@media (min-width: 62rem) {
+ .pf-v6-c-toolbar__group.pf-m-align-start-on-lg,
+ .pf-v6-c-toolbar__item.pf-m-align-start-on-lg {
+ margin-inline-start: 0;
+ }
+ .pf-v6-c-toolbar__group.pf-m-align-center-on-lg,
+ .pf-v6-c-toolbar__item.pf-m-align-center-on-lg {
+ margin-inline-start: auto;
+ margin-inline-end: auto;
+ }
+ .pf-v6-c-toolbar__group.pf-m-align-end-on-lg,
+ .pf-v6-c-toolbar__item.pf-m-align-end-on-lg {
+ margin-inline-start: auto;
+ }
+ .pf-v6-c-toolbar__group.pf-m-flex-grow-on-lg,
+ .pf-v6-c-toolbar__item.pf-m-flex-grow-on-lg {
+ flex-grow: 1;
+ }
+ .pf-v6-c-toolbar__group.pf-m-align-self-stretch-on-lg,
+ .pf-v6-c-toolbar__item.pf-m-align-self-stretch-on-lg {
+ align-self: stretch;
+ }
+ .pf-v6-c-toolbar__group.pf-m-align-self-baseline-on-lg,
+ .pf-v6-c-toolbar__item.pf-m-align-self-baseline-on-lg {
+ align-self: baseline;
+ }
+ .pf-v6-c-toolbar__group.pf-m-align-self-start-on-lg,
+ .pf-v6-c-toolbar__item.pf-m-align-self-start-on-lg {
+ align-self: start;
+ }
+ .pf-v6-c-toolbar__group.pf-m-align-self-center-on-lg,
+ .pf-v6-c-toolbar__item.pf-m-align-self-center-on-lg {
+ align-self: center;
+ }
+ .pf-v6-c-toolbar__group.pf-m-align-self-end-on-lg,
+ .pf-v6-c-toolbar__item.pf-m-align-self-end-on-lg {
+ align-self: end;
+ }
+ .pf-v6-c-toolbar.pf-m-inset-none-on-lg {
+ padding-inline: 0;
+ }
+ .pf-v6-c-toolbar.pf-m-inset-xs-on-lg {
+ padding-inline: var(--pf-t--global--spacer--xs);
+ }
+ .pf-v6-c-toolbar.pf-m-inset-sm-on-lg {
+ padding-inline: var(--pf-t--global--spacer--sm);
+ }
+ .pf-v6-c-toolbar.pf-m-inset-md-on-lg {
+ padding-inline: var(--pf-t--global--spacer--md);
+ }
+ .pf-v6-c-toolbar.pf-m-inset-lg-on-lg {
+ padding-inline: var(--pf-t--global--spacer--lg);
+ }
+ .pf-v6-c-toolbar.pf-m-inset-xl-on-lg {
+ padding-inline: var(--pf-t--global--spacer--xl);
+ }
+ .pf-v6-c-toolbar.pf-m-inset-2xl-on-lg {
+ padding-inline: var(--pf-t--global--spacer--2xl);
+ }
+ .pf-v6-c-toolbar.pf-m-inset-3xl-on-lg {
+ padding-inline: var(--pf-t--global--spacer--3xl);
+ }
+ .pf-v6-c-toolbar.pf-m-inset-4xl-on-lg {
+ padding-inline: var(--pf-t--global--spacer--4xl);
+ }
+ .pf-v6-c-toolbar__group.pf-m-wrap-on-lg,
+ .pf-v6-c-toolbar__item.pf-m-wrap-on-lg,
+ .pf-v6-c-toolbar__content-section.pf-m-wrap-on-lg {
+ flex-wrap: wrap;
+ }
+ .pf-v6-c-toolbar__group.pf-m-nowrap-on-lg,
+ .pf-v6-c-toolbar__item.pf-m-nowrap-on-lg,
+ .pf-v6-c-toolbar__content-section.pf-m-nowrap-on-lg {
+ flex-wrap: nowrap;
+ }
+ .pf-v6-c-toolbar__group.pf-m-align-items-stretch-on-lg,
+ .pf-v6-c-toolbar__item.pf-m-align-items-stretch-on-lg,
+ .pf-v6-c-toolbar__content-section.pf-m-align-items-stretch-on-lg {
+ align-items: stretch;
+ }
+ .pf-v6-c-toolbar__group.pf-m-align-items-baseline-on-lg,
+ .pf-v6-c-toolbar__item.pf-m-align-items-baseline-on-lg,
+ .pf-v6-c-toolbar__content-section.pf-m-align-items-baseline-on-lg {
+ align-items: baseline;
+ }
+ .pf-v6-c-toolbar__group.pf-m-align-items-start-on-lg,
+ .pf-v6-c-toolbar__item.pf-m-align-items-start-on-lg,
+ .pf-v6-c-toolbar__content-section.pf-m-align-items-start-on-lg {
+ align-items: start;
+ }
+ .pf-v6-c-toolbar__group.pf-m-align-items-center-on-lg,
+ .pf-v6-c-toolbar__item.pf-m-align-items-center-on-lg,
+ .pf-v6-c-toolbar__content-section.pf-m-align-items-center-on-lg {
+ align-items: center;
+ }
+ .pf-v6-c-toolbar__group.pf-m-align-items-end-on-lg,
+ .pf-v6-c-toolbar__item.pf-m-align-items-end-on-lg,
+ .pf-v6-c-toolbar__content-section.pf-m-align-items-end-on-lg {
+ align-items: end;
+ }
+ .pf-v6-c-toolbar__group.pf-m-gap-none-on-lg,
+ .pf-v6-c-toolbar__item.pf-m-gap-none-on-lg,
+ .pf-v6-c-toolbar__content-section.pf-m-gap-none-on-lg {
+ gap: 0;
+ }
+ .pf-v6-c-toolbar__group.pf-m-gap-xs-on-lg,
+ .pf-v6-c-toolbar__item.pf-m-gap-xs-on-lg,
+ .pf-v6-c-toolbar__content-section.pf-m-gap-xs-on-lg {
+ gap: var(--pf-t--global--spacer--xs);
+ }
+ .pf-v6-c-toolbar__group.pf-m-gap-sm-on-lg,
+ .pf-v6-c-toolbar__item.pf-m-gap-sm-on-lg,
+ .pf-v6-c-toolbar__content-section.pf-m-gap-sm-on-lg {
+ gap: var(--pf-t--global--spacer--sm);
+ }
+ .pf-v6-c-toolbar__group.pf-m-gap-md-on-lg,
+ .pf-v6-c-toolbar__item.pf-m-gap-md-on-lg,
+ .pf-v6-c-toolbar__content-section.pf-m-gap-md-on-lg {
+ gap: var(--pf-t--global--spacer--md);
+ }
+ .pf-v6-c-toolbar__group.pf-m-gap-lg-on-lg,
+ .pf-v6-c-toolbar__item.pf-m-gap-lg-on-lg,
+ .pf-v6-c-toolbar__content-section.pf-m-gap-lg-on-lg {
+ gap: var(--pf-t--global--spacer--lg);
+ }
+ .pf-v6-c-toolbar__group.pf-m-gap-xl-on-lg,
+ .pf-v6-c-toolbar__item.pf-m-gap-xl-on-lg,
+ .pf-v6-c-toolbar__content-section.pf-m-gap-xl-on-lg {
+ gap: var(--pf-t--global--spacer--xl);
+ }
+ .pf-v6-c-toolbar__group.pf-m-gap-2xl-on-lg,
+ .pf-v6-c-toolbar__item.pf-m-gap-2xl-on-lg,
+ .pf-v6-c-toolbar__content-section.pf-m-gap-2xl-on-lg {
+ gap: var(--pf-t--global--spacer--2xl);
+ }
+ .pf-v6-c-toolbar__group.pf-m-gap-3xl-on-lg,
+ .pf-v6-c-toolbar__item.pf-m-gap-3xl-on-lg,
+ .pf-v6-c-toolbar__content-section.pf-m-gap-3xl-on-lg {
+ gap: var(--pf-t--global--spacer--3xl);
+ }
+ .pf-v6-c-toolbar__group.pf-m-gap-4xl-on-lg,
+ .pf-v6-c-toolbar__item.pf-m-gap-4xl-on-lg,
+ .pf-v6-c-toolbar__content-section.pf-m-gap-4xl-on-lg {
+ gap: var(--pf-t--global--spacer--4xl);
+ }
+ .pf-v6-c-toolbar__group.pf-m-column-gap-none-on-lg,
+ .pf-v6-c-toolbar__item.pf-m-column-gap-none-on-lg,
+ .pf-v6-c-toolbar__content-section.pf-m-column-gap-none-on-lg {
+ column-gap: 0;
+ }
+ .pf-v6-c-toolbar__group.pf-m-row-gap-none-on-lg,
+ .pf-v6-c-toolbar__item.pf-m-row-gap-none-on-lg,
+ .pf-v6-c-toolbar__content-section.pf-m-row-gap-none-on-lg {
+ row-gap: 0;
+ }
+ .pf-v6-c-toolbar__group.pf-m-column-gap-xs-on-lg,
+ .pf-v6-c-toolbar__item.pf-m-column-gap-xs-on-lg,
+ .pf-v6-c-toolbar__content-section.pf-m-column-gap-xs-on-lg {
+ column-gap: var(--pf-t--global--spacer--xs);
+ }
+ .pf-v6-c-toolbar__group.pf-m-row-gap-xs-on-lg,
+ .pf-v6-c-toolbar__item.pf-m-row-gap-xs-on-lg,
+ .pf-v6-c-toolbar__content-section.pf-m-row-gap-xs-on-lg {
+ row-gap: var(--pf-t--global--spacer--xs);
+ }
+ .pf-v6-c-toolbar__group.pf-m-column-gap-sm-on-lg,
+ .pf-v6-c-toolbar__item.pf-m-column-gap-sm-on-lg,
+ .pf-v6-c-toolbar__content-section.pf-m-column-gap-sm-on-lg {
+ column-gap: var(--pf-t--global--spacer--sm);
+ }
+ .pf-v6-c-toolbar__group.pf-m-row-gap-sm-on-lg,
+ .pf-v6-c-toolbar__item.pf-m-row-gap-sm-on-lg,
+ .pf-v6-c-toolbar__content-section.pf-m-row-gap-sm-on-lg {
+ row-gap: var(--pf-t--global--spacer--sm);
+ }
+ .pf-v6-c-toolbar__group.pf-m-column-gap-md-on-lg,
+ .pf-v6-c-toolbar__item.pf-m-column-gap-md-on-lg,
+ .pf-v6-c-toolbar__content-section.pf-m-column-gap-md-on-lg {
+ column-gap: var(--pf-t--global--spacer--md);
+ }
+ .pf-v6-c-toolbar__group.pf-m-row-gap-md-on-lg,
+ .pf-v6-c-toolbar__item.pf-m-row-gap-md-on-lg,
+ .pf-v6-c-toolbar__content-section.pf-m-row-gap-md-on-lg {
+ row-gap: var(--pf-t--global--spacer--md);
+ }
+ .pf-v6-c-toolbar__group.pf-m-column-gap-lg-on-lg,
+ .pf-v6-c-toolbar__item.pf-m-column-gap-lg-on-lg,
+ .pf-v6-c-toolbar__content-section.pf-m-column-gap-lg-on-lg {
+ column-gap: var(--pf-t--global--spacer--lg);
+ }
+ .pf-v6-c-toolbar__group.pf-m-row-gap-lg-on-lg,
+ .pf-v6-c-toolbar__item.pf-m-row-gap-lg-on-lg,
+ .pf-v6-c-toolbar__content-section.pf-m-row-gap-lg-on-lg {
+ row-gap: var(--pf-t--global--spacer--lg);
+ }
+ .pf-v6-c-toolbar__group.pf-m-column-gap-xl-on-lg,
+ .pf-v6-c-toolbar__item.pf-m-column-gap-xl-on-lg,
+ .pf-v6-c-toolbar__content-section.pf-m-column-gap-xl-on-lg {
+ column-gap: var(--pf-t--global--spacer--xl);
+ }
+ .pf-v6-c-toolbar__group.pf-m-row-gap-xl-on-lg,
+ .pf-v6-c-toolbar__item.pf-m-row-gap-xl-on-lg,
+ .pf-v6-c-toolbar__content-section.pf-m-row-gap-xl-on-lg {
+ row-gap: var(--pf-t--global--spacer--xl);
+ }
+ .pf-v6-c-toolbar__group.pf-m-column-gap-2xl-on-lg,
+ .pf-v6-c-toolbar__item.pf-m-column-gap-2xl-on-lg,
+ .pf-v6-c-toolbar__content-section.pf-m-column-gap-2xl-on-lg {
+ column-gap: var(--pf-t--global--spacer--2xl);
+ }
+ .pf-v6-c-toolbar__group.pf-m-row-gap-2xl-on-lg,
+ .pf-v6-c-toolbar__item.pf-m-row-gap-2xl-on-lg,
+ .pf-v6-c-toolbar__content-section.pf-m-row-gap-2xl-on-lg {
+ row-gap: var(--pf-t--global--spacer--2xl);
+ }
+ .pf-v6-c-toolbar__group.pf-m-column-gap-3xl-on-lg,
+ .pf-v6-c-toolbar__item.pf-m-column-gap-3xl-on-lg,
+ .pf-v6-c-toolbar__content-section.pf-m-column-gap-3xl-on-lg {
+ column-gap: var(--pf-t--global--spacer--3xl);
+ }
+ .pf-v6-c-toolbar__group.pf-m-row-gap-3xl-on-lg,
+ .pf-v6-c-toolbar__item.pf-m-row-gap-3xl-on-lg,
+ .pf-v6-c-toolbar__content-section.pf-m-row-gap-3xl-on-lg {
+ row-gap: var(--pf-t--global--spacer--3xl);
+ }
+ .pf-v6-c-toolbar__group.pf-m-column-gap-4xl-on-lg,
+ .pf-v6-c-toolbar__item.pf-m-column-gap-4xl-on-lg,
+ .pf-v6-c-toolbar__content-section.pf-m-column-gap-4xl-on-lg {
+ column-gap: var(--pf-t--global--spacer--4xl);
+ }
+ .pf-v6-c-toolbar__group.pf-m-row-gap-4xl-on-lg,
+ .pf-v6-c-toolbar__item.pf-m-row-gap-4xl-on-lg,
+ .pf-v6-c-toolbar__content-section.pf-m-row-gap-4xl-on-lg {
+ row-gap: var(--pf-t--global--spacer--4xl);
+ }
+ .pf-v6-c-toolbar__group:where(.pf-m-toggle-group).pf-m-show-on-lg .pf-v6-c-toolbar__group,
+ .pf-v6-c-toolbar__group:where(.pf-m-toggle-group).pf-m-show-on-lg .pf-v6-c-toolbar__item {
+ display: flex;
+ flex: 0 1 auto;
+ }
+ .pf-v6-c-toolbar__group:where(.pf-m-toggle-group).pf-m-show-on-lg .pf-v6-c-toolbar__toggle {
+ display: none;
+ }
+ .pf-v6-c-toolbar__group:where(.pf-m-toggle-group) .pf-v6-c-toolbar__group,
+ .pf-v6-c-toolbar__group:where(.pf-m-toggle-group) .pf-v6-c-toolbar__item, .pf-v6-c-toolbar__group:where(.pf-m-toggle-group).pf-m-hide-on-lg .pf-v6-c-toolbar__group,
+ .pf-v6-c-toolbar__group:where(.pf-m-toggle-group).pf-m-hide-on-lg .pf-v6-c-toolbar__item {
+ display: none;
+ }
+ .pf-v6-c-toolbar__group:where(.pf-m-toggle-group) .pf-v6-c-toolbar__toggle, .pf-v6-c-toolbar__group:where(.pf-m-toggle-group).pf-m-hide-on-lg .pf-v6-c-toolbar__toggle {
+ display: inline-flex;
+ }
+}
+@media (min-width: 75rem) {
+ .pf-v6-c-toolbar__group.pf-m-align-start-on-xl,
+ .pf-v6-c-toolbar__item.pf-m-align-start-on-xl {
+ margin-inline-start: 0;
+ }
+ .pf-v6-c-toolbar__group.pf-m-align-center-on-xl,
+ .pf-v6-c-toolbar__item.pf-m-align-center-on-xl {
+ margin-inline-start: auto;
+ margin-inline-end: auto;
+ }
+ .pf-v6-c-toolbar__group.pf-m-align-end-on-xl,
+ .pf-v6-c-toolbar__item.pf-m-align-end-on-xl {
+ margin-inline-start: auto;
+ }
+ .pf-v6-c-toolbar__group.pf-m-flex-grow-on-xl,
+ .pf-v6-c-toolbar__item.pf-m-flex-grow-on-xl {
+ flex-grow: 1;
+ }
+ .pf-v6-c-toolbar__group.pf-m-align-self-stretch-on-xl,
+ .pf-v6-c-toolbar__item.pf-m-align-self-stretch-on-xl {
+ align-self: stretch;
+ }
+ .pf-v6-c-toolbar__group.pf-m-align-self-baseline-on-xl,
+ .pf-v6-c-toolbar__item.pf-m-align-self-baseline-on-xl {
+ align-self: baseline;
+ }
+ .pf-v6-c-toolbar__group.pf-m-align-self-start-on-xl,
+ .pf-v6-c-toolbar__item.pf-m-align-self-start-on-xl {
+ align-self: start;
+ }
+ .pf-v6-c-toolbar__group.pf-m-align-self-center-on-xl,
+ .pf-v6-c-toolbar__item.pf-m-align-self-center-on-xl {
+ align-self: center;
+ }
+ .pf-v6-c-toolbar__group.pf-m-align-self-end-on-xl,
+ .pf-v6-c-toolbar__item.pf-m-align-self-end-on-xl {
+ align-self: end;
+ }
+ .pf-v6-c-toolbar.pf-m-inset-none-on-xl {
+ padding-inline: 0;
+ }
+ .pf-v6-c-toolbar.pf-m-inset-xs-on-xl {
+ padding-inline: var(--pf-t--global--spacer--xs);
+ }
+ .pf-v6-c-toolbar.pf-m-inset-sm-on-xl {
+ padding-inline: var(--pf-t--global--spacer--sm);
+ }
+ .pf-v6-c-toolbar.pf-m-inset-md-on-xl {
+ padding-inline: var(--pf-t--global--spacer--md);
+ }
+ .pf-v6-c-toolbar.pf-m-inset-lg-on-xl {
+ padding-inline: var(--pf-t--global--spacer--lg);
+ }
+ .pf-v6-c-toolbar.pf-m-inset-xl-on-xl {
+ padding-inline: var(--pf-t--global--spacer--xl);
+ }
+ .pf-v6-c-toolbar.pf-m-inset-2xl-on-xl {
+ padding-inline: var(--pf-t--global--spacer--2xl);
+ }
+ .pf-v6-c-toolbar.pf-m-inset-3xl-on-xl {
+ padding-inline: var(--pf-t--global--spacer--3xl);
+ }
+ .pf-v6-c-toolbar.pf-m-inset-4xl-on-xl {
+ padding-inline: var(--pf-t--global--spacer--4xl);
+ }
+ .pf-v6-c-toolbar__group.pf-m-wrap-on-xl,
+ .pf-v6-c-toolbar__item.pf-m-wrap-on-xl,
+ .pf-v6-c-toolbar__content-section.pf-m-wrap-on-xl {
+ flex-wrap: wrap;
+ }
+ .pf-v6-c-toolbar__group.pf-m-nowrap-on-xl,
+ .pf-v6-c-toolbar__item.pf-m-nowrap-on-xl,
+ .pf-v6-c-toolbar__content-section.pf-m-nowrap-on-xl {
+ flex-wrap: nowrap;
+ }
+ .pf-v6-c-toolbar__group.pf-m-align-items-stretch-on-xl,
+ .pf-v6-c-toolbar__item.pf-m-align-items-stretch-on-xl,
+ .pf-v6-c-toolbar__content-section.pf-m-align-items-stretch-on-xl {
+ align-items: stretch;
+ }
+ .pf-v6-c-toolbar__group.pf-m-align-items-baseline-on-xl,
+ .pf-v6-c-toolbar__item.pf-m-align-items-baseline-on-xl,
+ .pf-v6-c-toolbar__content-section.pf-m-align-items-baseline-on-xl {
+ align-items: baseline;
+ }
+ .pf-v6-c-toolbar__group.pf-m-align-items-start-on-xl,
+ .pf-v6-c-toolbar__item.pf-m-align-items-start-on-xl,
+ .pf-v6-c-toolbar__content-section.pf-m-align-items-start-on-xl {
+ align-items: start;
+ }
+ .pf-v6-c-toolbar__group.pf-m-align-items-center-on-xl,
+ .pf-v6-c-toolbar__item.pf-m-align-items-center-on-xl,
+ .pf-v6-c-toolbar__content-section.pf-m-align-items-center-on-xl {
+ align-items: center;
+ }
+ .pf-v6-c-toolbar__group.pf-m-align-items-end-on-xl,
+ .pf-v6-c-toolbar__item.pf-m-align-items-end-on-xl,
+ .pf-v6-c-toolbar__content-section.pf-m-align-items-end-on-xl {
+ align-items: end;
+ }
+ .pf-v6-c-toolbar__group.pf-m-gap-none-on-xl,
+ .pf-v6-c-toolbar__item.pf-m-gap-none-on-xl,
+ .pf-v6-c-toolbar__content-section.pf-m-gap-none-on-xl {
+ gap: 0;
+ }
+ .pf-v6-c-toolbar__group.pf-m-gap-xs-on-xl,
+ .pf-v6-c-toolbar__item.pf-m-gap-xs-on-xl,
+ .pf-v6-c-toolbar__content-section.pf-m-gap-xs-on-xl {
+ gap: var(--pf-t--global--spacer--xs);
+ }
+ .pf-v6-c-toolbar__group.pf-m-gap-sm-on-xl,
+ .pf-v6-c-toolbar__item.pf-m-gap-sm-on-xl,
+ .pf-v6-c-toolbar__content-section.pf-m-gap-sm-on-xl {
+ gap: var(--pf-t--global--spacer--sm);
+ }
+ .pf-v6-c-toolbar__group.pf-m-gap-md-on-xl,
+ .pf-v6-c-toolbar__item.pf-m-gap-md-on-xl,
+ .pf-v6-c-toolbar__content-section.pf-m-gap-md-on-xl {
+ gap: var(--pf-t--global--spacer--md);
+ }
+ .pf-v6-c-toolbar__group.pf-m-gap-lg-on-xl,
+ .pf-v6-c-toolbar__item.pf-m-gap-lg-on-xl,
+ .pf-v6-c-toolbar__content-section.pf-m-gap-lg-on-xl {
+ gap: var(--pf-t--global--spacer--lg);
+ }
+ .pf-v6-c-toolbar__group.pf-m-gap-xl-on-xl,
+ .pf-v6-c-toolbar__item.pf-m-gap-xl-on-xl,
+ .pf-v6-c-toolbar__content-section.pf-m-gap-xl-on-xl {
+ gap: var(--pf-t--global--spacer--xl);
+ }
+ .pf-v6-c-toolbar__group.pf-m-gap-2xl-on-xl,
+ .pf-v6-c-toolbar__item.pf-m-gap-2xl-on-xl,
+ .pf-v6-c-toolbar__content-section.pf-m-gap-2xl-on-xl {
+ gap: var(--pf-t--global--spacer--2xl);
+ }
+ .pf-v6-c-toolbar__group.pf-m-gap-3xl-on-xl,
+ .pf-v6-c-toolbar__item.pf-m-gap-3xl-on-xl,
+ .pf-v6-c-toolbar__content-section.pf-m-gap-3xl-on-xl {
+ gap: var(--pf-t--global--spacer--3xl);
+ }
+ .pf-v6-c-toolbar__group.pf-m-gap-4xl-on-xl,
+ .pf-v6-c-toolbar__item.pf-m-gap-4xl-on-xl,
+ .pf-v6-c-toolbar__content-section.pf-m-gap-4xl-on-xl {
+ gap: var(--pf-t--global--spacer--4xl);
+ }
+ .pf-v6-c-toolbar__group.pf-m-column-gap-none-on-xl,
+ .pf-v6-c-toolbar__item.pf-m-column-gap-none-on-xl,
+ .pf-v6-c-toolbar__content-section.pf-m-column-gap-none-on-xl {
+ column-gap: 0;
+ }
+ .pf-v6-c-toolbar__group.pf-m-row-gap-none-on-xl,
+ .pf-v6-c-toolbar__item.pf-m-row-gap-none-on-xl,
+ .pf-v6-c-toolbar__content-section.pf-m-row-gap-none-on-xl {
+ row-gap: 0;
+ }
+ .pf-v6-c-toolbar__group.pf-m-column-gap-xs-on-xl,
+ .pf-v6-c-toolbar__item.pf-m-column-gap-xs-on-xl,
+ .pf-v6-c-toolbar__content-section.pf-m-column-gap-xs-on-xl {
+ column-gap: var(--pf-t--global--spacer--xs);
+ }
+ .pf-v6-c-toolbar__group.pf-m-row-gap-xs-on-xl,
+ .pf-v6-c-toolbar__item.pf-m-row-gap-xs-on-xl,
+ .pf-v6-c-toolbar__content-section.pf-m-row-gap-xs-on-xl {
+ row-gap: var(--pf-t--global--spacer--xs);
+ }
+ .pf-v6-c-toolbar__group.pf-m-column-gap-sm-on-xl,
+ .pf-v6-c-toolbar__item.pf-m-column-gap-sm-on-xl,
+ .pf-v6-c-toolbar__content-section.pf-m-column-gap-sm-on-xl {
+ column-gap: var(--pf-t--global--spacer--sm);
+ }
+ .pf-v6-c-toolbar__group.pf-m-row-gap-sm-on-xl,
+ .pf-v6-c-toolbar__item.pf-m-row-gap-sm-on-xl,
+ .pf-v6-c-toolbar__content-section.pf-m-row-gap-sm-on-xl {
+ row-gap: var(--pf-t--global--spacer--sm);
+ }
+ .pf-v6-c-toolbar__group.pf-m-column-gap-md-on-xl,
+ .pf-v6-c-toolbar__item.pf-m-column-gap-md-on-xl,
+ .pf-v6-c-toolbar__content-section.pf-m-column-gap-md-on-xl {
+ column-gap: var(--pf-t--global--spacer--md);
+ }
+ .pf-v6-c-toolbar__group.pf-m-row-gap-md-on-xl,
+ .pf-v6-c-toolbar__item.pf-m-row-gap-md-on-xl,
+ .pf-v6-c-toolbar__content-section.pf-m-row-gap-md-on-xl {
+ row-gap: var(--pf-t--global--spacer--md);
+ }
+ .pf-v6-c-toolbar__group.pf-m-column-gap-lg-on-xl,
+ .pf-v6-c-toolbar__item.pf-m-column-gap-lg-on-xl,
+ .pf-v6-c-toolbar__content-section.pf-m-column-gap-lg-on-xl {
+ column-gap: var(--pf-t--global--spacer--lg);
+ }
+ .pf-v6-c-toolbar__group.pf-m-row-gap-lg-on-xl,
+ .pf-v6-c-toolbar__item.pf-m-row-gap-lg-on-xl,
+ .pf-v6-c-toolbar__content-section.pf-m-row-gap-lg-on-xl {
+ row-gap: var(--pf-t--global--spacer--lg);
+ }
+ .pf-v6-c-toolbar__group.pf-m-column-gap-xl-on-xl,
+ .pf-v6-c-toolbar__item.pf-m-column-gap-xl-on-xl,
+ .pf-v6-c-toolbar__content-section.pf-m-column-gap-xl-on-xl {
+ column-gap: var(--pf-t--global--spacer--xl);
+ }
+ .pf-v6-c-toolbar__group.pf-m-row-gap-xl-on-xl,
+ .pf-v6-c-toolbar__item.pf-m-row-gap-xl-on-xl,
+ .pf-v6-c-toolbar__content-section.pf-m-row-gap-xl-on-xl {
+ row-gap: var(--pf-t--global--spacer--xl);
+ }
+ .pf-v6-c-toolbar__group.pf-m-column-gap-2xl-on-xl,
+ .pf-v6-c-toolbar__item.pf-m-column-gap-2xl-on-xl,
+ .pf-v6-c-toolbar__content-section.pf-m-column-gap-2xl-on-xl {
+ column-gap: var(--pf-t--global--spacer--2xl);
+ }
+ .pf-v6-c-toolbar__group.pf-m-row-gap-2xl-on-xl,
+ .pf-v6-c-toolbar__item.pf-m-row-gap-2xl-on-xl,
+ .pf-v6-c-toolbar__content-section.pf-m-row-gap-2xl-on-xl {
+ row-gap: var(--pf-t--global--spacer--2xl);
+ }
+ .pf-v6-c-toolbar__group.pf-m-column-gap-3xl-on-xl,
+ .pf-v6-c-toolbar__item.pf-m-column-gap-3xl-on-xl,
+ .pf-v6-c-toolbar__content-section.pf-m-column-gap-3xl-on-xl {
+ column-gap: var(--pf-t--global--spacer--3xl);
+ }
+ .pf-v6-c-toolbar__group.pf-m-row-gap-3xl-on-xl,
+ .pf-v6-c-toolbar__item.pf-m-row-gap-3xl-on-xl,
+ .pf-v6-c-toolbar__content-section.pf-m-row-gap-3xl-on-xl {
+ row-gap: var(--pf-t--global--spacer--3xl);
+ }
+ .pf-v6-c-toolbar__group.pf-m-column-gap-4xl-on-xl,
+ .pf-v6-c-toolbar__item.pf-m-column-gap-4xl-on-xl,
+ .pf-v6-c-toolbar__content-section.pf-m-column-gap-4xl-on-xl {
+ column-gap: var(--pf-t--global--spacer--4xl);
+ }
+ .pf-v6-c-toolbar__group.pf-m-row-gap-4xl-on-xl,
+ .pf-v6-c-toolbar__item.pf-m-row-gap-4xl-on-xl,
+ .pf-v6-c-toolbar__content-section.pf-m-row-gap-4xl-on-xl {
+ row-gap: var(--pf-t--global--spacer--4xl);
+ }
+ .pf-v6-c-toolbar__group:where(.pf-m-toggle-group).pf-m-show-on-xl .pf-v6-c-toolbar__group,
+ .pf-v6-c-toolbar__group:where(.pf-m-toggle-group).pf-m-show-on-xl .pf-v6-c-toolbar__item {
+ display: flex;
+ flex: 0 1 auto;
+ }
+ .pf-v6-c-toolbar__group:where(.pf-m-toggle-group).pf-m-show-on-xl .pf-v6-c-toolbar__toggle {
+ display: none;
+ }
+ .pf-v6-c-toolbar__group:where(.pf-m-toggle-group) .pf-v6-c-toolbar__group,
+ .pf-v6-c-toolbar__group:where(.pf-m-toggle-group) .pf-v6-c-toolbar__item, .pf-v6-c-toolbar__group:where(.pf-m-toggle-group).pf-m-hide-on-xl .pf-v6-c-toolbar__group,
+ .pf-v6-c-toolbar__group:where(.pf-m-toggle-group).pf-m-hide-on-xl .pf-v6-c-toolbar__item {
+ display: none;
+ }
+ .pf-v6-c-toolbar__group:where(.pf-m-toggle-group) .pf-v6-c-toolbar__toggle, .pf-v6-c-toolbar__group:where(.pf-m-toggle-group).pf-m-hide-on-xl .pf-v6-c-toolbar__toggle {
+ display: inline-flex;
+ }
+}
+@media (min-width: 90.625rem) {
+ .pf-v6-c-toolbar__group.pf-m-align-start-on-2xl,
+ .pf-v6-c-toolbar__item.pf-m-align-start-on-2xl {
+ margin-inline-start: 0;
+ }
+ .pf-v6-c-toolbar__group.pf-m-align-center-on-2xl,
+ .pf-v6-c-toolbar__item.pf-m-align-center-on-2xl {
+ margin-inline-start: auto;
+ margin-inline-end: auto;
+ }
+ .pf-v6-c-toolbar__group.pf-m-align-end-on-2xl,
+ .pf-v6-c-toolbar__item.pf-m-align-end-on-2xl {
+ margin-inline-start: auto;
+ }
+ .pf-v6-c-toolbar__group.pf-m-flex-grow-on-2xl,
+ .pf-v6-c-toolbar__item.pf-m-flex-grow-on-2xl {
+ flex-grow: 1;
+ }
+ .pf-v6-c-toolbar__group.pf-m-align-self-stretch-on-2xl,
+ .pf-v6-c-toolbar__item.pf-m-align-self-stretch-on-2xl {
+ align-self: stretch;
+ }
+ .pf-v6-c-toolbar__group.pf-m-align-self-baseline-on-2xl,
+ .pf-v6-c-toolbar__item.pf-m-align-self-baseline-on-2xl {
+ align-self: baseline;
+ }
+ .pf-v6-c-toolbar__group.pf-m-align-self-start-on-2xl,
+ .pf-v6-c-toolbar__item.pf-m-align-self-start-on-2xl {
+ align-self: start;
+ }
+ .pf-v6-c-toolbar__group.pf-m-align-self-center-on-2xl,
+ .pf-v6-c-toolbar__item.pf-m-align-self-center-on-2xl {
+ align-self: center;
+ }
+ .pf-v6-c-toolbar__group.pf-m-align-self-end-on-2xl,
+ .pf-v6-c-toolbar__item.pf-m-align-self-end-on-2xl {
+ align-self: end;
+ }
+ .pf-v6-c-toolbar.pf-m-inset-none-on-2xl {
+ padding-inline: 0;
+ }
+ .pf-v6-c-toolbar.pf-m-inset-xs-on-2xl {
+ padding-inline: var(--pf-t--global--spacer--xs);
+ }
+ .pf-v6-c-toolbar.pf-m-inset-sm-on-2xl {
+ padding-inline: var(--pf-t--global--spacer--sm);
+ }
+ .pf-v6-c-toolbar.pf-m-inset-md-on-2xl {
+ padding-inline: var(--pf-t--global--spacer--md);
+ }
+ .pf-v6-c-toolbar.pf-m-inset-lg-on-2xl {
+ padding-inline: var(--pf-t--global--spacer--lg);
+ }
+ .pf-v6-c-toolbar.pf-m-inset-xl-on-2xl {
+ padding-inline: var(--pf-t--global--spacer--xl);
+ }
+ .pf-v6-c-toolbar.pf-m-inset-2xl-on-2xl {
+ padding-inline: var(--pf-t--global--spacer--2xl);
+ }
+ .pf-v6-c-toolbar.pf-m-inset-3xl-on-2xl {
+ padding-inline: var(--pf-t--global--spacer--3xl);
+ }
+ .pf-v6-c-toolbar.pf-m-inset-4xl-on-2xl {
+ padding-inline: var(--pf-t--global--spacer--4xl);
+ }
+ .pf-v6-c-toolbar__group.pf-m-wrap-on-2xl,
+ .pf-v6-c-toolbar__item.pf-m-wrap-on-2xl,
+ .pf-v6-c-toolbar__content-section.pf-m-wrap-on-2xl {
+ flex-wrap: wrap;
+ }
+ .pf-v6-c-toolbar__group.pf-m-nowrap-on-2xl,
+ .pf-v6-c-toolbar__item.pf-m-nowrap-on-2xl,
+ .pf-v6-c-toolbar__content-section.pf-m-nowrap-on-2xl {
+ flex-wrap: nowrap;
+ }
+ .pf-v6-c-toolbar__group.pf-m-align-items-stretch-on-2xl,
+ .pf-v6-c-toolbar__item.pf-m-align-items-stretch-on-2xl,
+ .pf-v6-c-toolbar__content-section.pf-m-align-items-stretch-on-2xl {
+ align-items: stretch;
+ }
+ .pf-v6-c-toolbar__group.pf-m-align-items-baseline-on-2xl,
+ .pf-v6-c-toolbar__item.pf-m-align-items-baseline-on-2xl,
+ .pf-v6-c-toolbar__content-section.pf-m-align-items-baseline-on-2xl {
+ align-items: baseline;
+ }
+ .pf-v6-c-toolbar__group.pf-m-align-items-start-on-2xl,
+ .pf-v6-c-toolbar__item.pf-m-align-items-start-on-2xl,
+ .pf-v6-c-toolbar__content-section.pf-m-align-items-start-on-2xl {
+ align-items: start;
+ }
+ .pf-v6-c-toolbar__group.pf-m-align-items-center-on-2xl,
+ .pf-v6-c-toolbar__item.pf-m-align-items-center-on-2xl,
+ .pf-v6-c-toolbar__content-section.pf-m-align-items-center-on-2xl {
+ align-items: center;
+ }
+ .pf-v6-c-toolbar__group.pf-m-align-items-end-on-2xl,
+ .pf-v6-c-toolbar__item.pf-m-align-items-end-on-2xl,
+ .pf-v6-c-toolbar__content-section.pf-m-align-items-end-on-2xl {
+ align-items: end;
+ }
+ .pf-v6-c-toolbar__group.pf-m-gap-none-on-2xl,
+ .pf-v6-c-toolbar__item.pf-m-gap-none-on-2xl,
+ .pf-v6-c-toolbar__content-section.pf-m-gap-none-on-2xl {
+ gap: 0;
+ }
+ .pf-v6-c-toolbar__group.pf-m-gap-xs-on-2xl,
+ .pf-v6-c-toolbar__item.pf-m-gap-xs-on-2xl,
+ .pf-v6-c-toolbar__content-section.pf-m-gap-xs-on-2xl {
+ gap: var(--pf-t--global--spacer--xs);
+ }
+ .pf-v6-c-toolbar__group.pf-m-gap-sm-on-2xl,
+ .pf-v6-c-toolbar__item.pf-m-gap-sm-on-2xl,
+ .pf-v6-c-toolbar__content-section.pf-m-gap-sm-on-2xl {
+ gap: var(--pf-t--global--spacer--sm);
+ }
+ .pf-v6-c-toolbar__group.pf-m-gap-md-on-2xl,
+ .pf-v6-c-toolbar__item.pf-m-gap-md-on-2xl,
+ .pf-v6-c-toolbar__content-section.pf-m-gap-md-on-2xl {
+ gap: var(--pf-t--global--spacer--md);
+ }
+ .pf-v6-c-toolbar__group.pf-m-gap-lg-on-2xl,
+ .pf-v6-c-toolbar__item.pf-m-gap-lg-on-2xl,
+ .pf-v6-c-toolbar__content-section.pf-m-gap-lg-on-2xl {
+ gap: var(--pf-t--global--spacer--lg);
+ }
+ .pf-v6-c-toolbar__group.pf-m-gap-xl-on-2xl,
+ .pf-v6-c-toolbar__item.pf-m-gap-xl-on-2xl,
+ .pf-v6-c-toolbar__content-section.pf-m-gap-xl-on-2xl {
+ gap: var(--pf-t--global--spacer--xl);
+ }
+ .pf-v6-c-toolbar__group.pf-m-gap-2xl-on-2xl,
+ .pf-v6-c-toolbar__item.pf-m-gap-2xl-on-2xl,
+ .pf-v6-c-toolbar__content-section.pf-m-gap-2xl-on-2xl {
+ gap: var(--pf-t--global--spacer--2xl);
+ }
+ .pf-v6-c-toolbar__group.pf-m-gap-3xl-on-2xl,
+ .pf-v6-c-toolbar__item.pf-m-gap-3xl-on-2xl,
+ .pf-v6-c-toolbar__content-section.pf-m-gap-3xl-on-2xl {
+ gap: var(--pf-t--global--spacer--3xl);
+ }
+ .pf-v6-c-toolbar__group.pf-m-gap-4xl-on-2xl,
+ .pf-v6-c-toolbar__item.pf-m-gap-4xl-on-2xl,
+ .pf-v6-c-toolbar__content-section.pf-m-gap-4xl-on-2xl {
+ gap: var(--pf-t--global--spacer--4xl);
+ }
+ .pf-v6-c-toolbar__group.pf-m-column-gap-none-on-2xl,
+ .pf-v6-c-toolbar__item.pf-m-column-gap-none-on-2xl,
+ .pf-v6-c-toolbar__content-section.pf-m-column-gap-none-on-2xl {
+ column-gap: 0;
+ }
+ .pf-v6-c-toolbar__group.pf-m-row-gap-none-on-2xl,
+ .pf-v6-c-toolbar__item.pf-m-row-gap-none-on-2xl,
+ .pf-v6-c-toolbar__content-section.pf-m-row-gap-none-on-2xl {
+ row-gap: 0;
+ }
+ .pf-v6-c-toolbar__group.pf-m-column-gap-xs-on-2xl,
+ .pf-v6-c-toolbar__item.pf-m-column-gap-xs-on-2xl,
+ .pf-v6-c-toolbar__content-section.pf-m-column-gap-xs-on-2xl {
+ column-gap: var(--pf-t--global--spacer--xs);
+ }
+ .pf-v6-c-toolbar__group.pf-m-row-gap-xs-on-2xl,
+ .pf-v6-c-toolbar__item.pf-m-row-gap-xs-on-2xl,
+ .pf-v6-c-toolbar__content-section.pf-m-row-gap-xs-on-2xl {
+ row-gap: var(--pf-t--global--spacer--xs);
+ }
+ .pf-v6-c-toolbar__group.pf-m-column-gap-sm-on-2xl,
+ .pf-v6-c-toolbar__item.pf-m-column-gap-sm-on-2xl,
+ .pf-v6-c-toolbar__content-section.pf-m-column-gap-sm-on-2xl {
+ column-gap: var(--pf-t--global--spacer--sm);
+ }
+ .pf-v6-c-toolbar__group.pf-m-row-gap-sm-on-2xl,
+ .pf-v6-c-toolbar__item.pf-m-row-gap-sm-on-2xl,
+ .pf-v6-c-toolbar__content-section.pf-m-row-gap-sm-on-2xl {
+ row-gap: var(--pf-t--global--spacer--sm);
+ }
+ .pf-v6-c-toolbar__group.pf-m-column-gap-md-on-2xl,
+ .pf-v6-c-toolbar__item.pf-m-column-gap-md-on-2xl,
+ .pf-v6-c-toolbar__content-section.pf-m-column-gap-md-on-2xl {
+ column-gap: var(--pf-t--global--spacer--md);
+ }
+ .pf-v6-c-toolbar__group.pf-m-row-gap-md-on-2xl,
+ .pf-v6-c-toolbar__item.pf-m-row-gap-md-on-2xl,
+ .pf-v6-c-toolbar__content-section.pf-m-row-gap-md-on-2xl {
+ row-gap: var(--pf-t--global--spacer--md);
+ }
+ .pf-v6-c-toolbar__group.pf-m-column-gap-lg-on-2xl,
+ .pf-v6-c-toolbar__item.pf-m-column-gap-lg-on-2xl,
+ .pf-v6-c-toolbar__content-section.pf-m-column-gap-lg-on-2xl {
+ column-gap: var(--pf-t--global--spacer--lg);
+ }
+ .pf-v6-c-toolbar__group.pf-m-row-gap-lg-on-2xl,
+ .pf-v6-c-toolbar__item.pf-m-row-gap-lg-on-2xl,
+ .pf-v6-c-toolbar__content-section.pf-m-row-gap-lg-on-2xl {
+ row-gap: var(--pf-t--global--spacer--lg);
+ }
+ .pf-v6-c-toolbar__group.pf-m-column-gap-xl-on-2xl,
+ .pf-v6-c-toolbar__item.pf-m-column-gap-xl-on-2xl,
+ .pf-v6-c-toolbar__content-section.pf-m-column-gap-xl-on-2xl {
+ column-gap: var(--pf-t--global--spacer--xl);
+ }
+ .pf-v6-c-toolbar__group.pf-m-row-gap-xl-on-2xl,
+ .pf-v6-c-toolbar__item.pf-m-row-gap-xl-on-2xl,
+ .pf-v6-c-toolbar__content-section.pf-m-row-gap-xl-on-2xl {
+ row-gap: var(--pf-t--global--spacer--xl);
+ }
+ .pf-v6-c-toolbar__group.pf-m-column-gap-2xl-on-2xl,
+ .pf-v6-c-toolbar__item.pf-m-column-gap-2xl-on-2xl,
+ .pf-v6-c-toolbar__content-section.pf-m-column-gap-2xl-on-2xl {
+ column-gap: var(--pf-t--global--spacer--2xl);
+ }
+ .pf-v6-c-toolbar__group.pf-m-row-gap-2xl-on-2xl,
+ .pf-v6-c-toolbar__item.pf-m-row-gap-2xl-on-2xl,
+ .pf-v6-c-toolbar__content-section.pf-m-row-gap-2xl-on-2xl {
+ row-gap: var(--pf-t--global--spacer--2xl);
+ }
+ .pf-v6-c-toolbar__group.pf-m-column-gap-3xl-on-2xl,
+ .pf-v6-c-toolbar__item.pf-m-column-gap-3xl-on-2xl,
+ .pf-v6-c-toolbar__content-section.pf-m-column-gap-3xl-on-2xl {
+ column-gap: var(--pf-t--global--spacer--3xl);
+ }
+ .pf-v6-c-toolbar__group.pf-m-row-gap-3xl-on-2xl,
+ .pf-v6-c-toolbar__item.pf-m-row-gap-3xl-on-2xl,
+ .pf-v6-c-toolbar__content-section.pf-m-row-gap-3xl-on-2xl {
+ row-gap: var(--pf-t--global--spacer--3xl);
+ }
+ .pf-v6-c-toolbar__group.pf-m-column-gap-4xl-on-2xl,
+ .pf-v6-c-toolbar__item.pf-m-column-gap-4xl-on-2xl,
+ .pf-v6-c-toolbar__content-section.pf-m-column-gap-4xl-on-2xl {
+ column-gap: var(--pf-t--global--spacer--4xl);
+ }
+ .pf-v6-c-toolbar__group.pf-m-row-gap-4xl-on-2xl,
+ .pf-v6-c-toolbar__item.pf-m-row-gap-4xl-on-2xl,
+ .pf-v6-c-toolbar__content-section.pf-m-row-gap-4xl-on-2xl {
+ row-gap: var(--pf-t--global--spacer--4xl);
+ }
+ .pf-v6-c-toolbar__group:where(.pf-m-toggle-group).pf-m-show-on-2xl .pf-v6-c-toolbar__group,
+ .pf-v6-c-toolbar__group:where(.pf-m-toggle-group).pf-m-show-on-2xl .pf-v6-c-toolbar__item {
+ display: flex;
+ flex: 0 1 auto;
+ }
+ .pf-v6-c-toolbar__group:where(.pf-m-toggle-group).pf-m-show-on-2xl .pf-v6-c-toolbar__toggle {
+ display: none;
+ }
+ .pf-v6-c-toolbar__group:where(.pf-m-toggle-group) .pf-v6-c-toolbar__group,
+ .pf-v6-c-toolbar__group:where(.pf-m-toggle-group) .pf-v6-c-toolbar__item, .pf-v6-c-toolbar__group:where(.pf-m-toggle-group).pf-m-hide-on-2xl .pf-v6-c-toolbar__group,
+ .pf-v6-c-toolbar__group:where(.pf-m-toggle-group).pf-m-hide-on-2xl .pf-v6-c-toolbar__item {
+ display: none;
+ }
+ .pf-v6-c-toolbar__group:where(.pf-m-toggle-group) .pf-v6-c-toolbar__toggle, .pf-v6-c-toolbar__group:where(.pf-m-toggle-group).pf-m-hide-on-2xl .pf-v6-c-toolbar__toggle {
+ display: inline-flex;
+ }
+}
+.pf-v6-c-tooltip {
+ --pf-v6-c-tooltip--MaxWidth: 18.75rem;
+ --pf-v6-c-tooltip--BoxShadow: var(--pf-t--global--box-shadow--md);
+ --pf-v6-c-tooltip__content--PaddingBlockStart: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-tooltip__content--PaddingInlineEnd: var(--pf-t--global--spacer--md);
+ --pf-v6-c-tooltip__content--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-tooltip__content--PaddingInlineStart: var(--pf-t--global--spacer--md);
+ --pf-v6-c-tooltip__content--Color: var(--pf-t--global--text--color--inverse);
+ --pf-v6-c-tooltip__content--BackgroundColor: var(--pf-t--global--background--color--inverse--default);
+ --pf-v6-c-tooltip__content--FontSize: var(--pf-t--global--font--size--body--sm);
+ --pf-v6-c-tooltip__content--BorderRadius: var(--pf-t--global--border--radius--small);
+ --pf-v6-c-tooltip__arrow--Width: 0.9375rem;
+ --pf-v6-c-tooltip__arrow--Height: 0.9375rem;
+ --pf-v6-c-tooltip__arrow--BackgroundColor: var(--pf-t--global--background--color--inverse--default);
+ --pf-v6-c-tooltip__arrow--BoxShadow: var(--pf-t--global--box-shadow--md);
+ --pf-v6-c-tooltip__arrow--m-top--TranslateX: -50%;
+ --pf-v6-c-tooltip__arrow--m-top--TranslateY: 50%;
+ --pf-v6-c-tooltip__arrow--m-top--Rotate: 45deg;
+ --pf-v6-c-tooltip__arrow--m-right--TranslateX: -50%;
+ --pf-v6-c-tooltip__arrow--m-right--TranslateY: -50%;
+ --pf-v6-c-tooltip__arrow--m-right--Rotate: 45deg;
+ --pf-v6-c-tooltip__arrow--m-bottom--TranslateX: -50%;
+ --pf-v6-c-tooltip__arrow--m-bottom--TranslateY: -50%;
+ --pf-v6-c-tooltip__arrow--m-bottom--Rotate: 45deg;
+ --pf-v6-c-tooltip__arrow--m-left--TranslateX: 50%;
+ --pf-v6-c-tooltip__arrow--m-left--TranslateY: -50%;
+ --pf-v6-c-tooltip__arrow--m-left--Rotate: 45deg;
+}
+
+.pf-v6-c-tooltip {
+ position: relative;
+ max-width: var(--pf-v6-c-tooltip--MaxWidth);
+ box-shadow: var(--pf-v6-c-tooltip--BoxShadow);
+}
+.pf-v6-c-tooltip:is(.pf-m-top,
+.pf-m-top-left,
+.pf-m-top-right) {
+ --pf-v6-c-tooltip__arrow--InsetBlockEnd: var(--pf-v6-c-tooltip--m-top--InsetBlockEnd, 0);
+ --pf-v6-c-tooltip__arrow--InsetInlineStart: var(--pf-v6-c-tooltip--m-top--InsetInlineStart, 50%);
+ --pf-v6-c-tooltip__arrow--TranslateX: var(--pf-v6-c-tooltip__arrow--m-top--TranslateX);
+ --pf-v6-c-tooltip__arrow--TranslateY: var(--pf-v6-c-tooltip__arrow--m-top--TranslateY);
+ --pf-v6-c-tooltip__arrow--Rotate: var(--pf-v6-c-tooltip__arrow--m-top--Rotate);
+}
+.pf-v6-c-tooltip:is(.pf-m-bottom,
+.pf-m-bottom-left,
+.pf-m-bottom-right) {
+ --pf-v6-c-tooltip__arrow--InsetBlockStart: var(--pf-v6-c-tooltip--m-bottom--InsetBlockStart, 0);
+ --pf-v6-c-tooltip__arrow--InsetInlineStart: var(--pf-v6-c-tooltip--m-bottom--InsetInlineStart, 50%);
+ --pf-v6-c-tooltip__arrow--TranslateX: var(--pf-v6-c-tooltip__arrow--m-bottom--TranslateX);
+ --pf-v6-c-tooltip__arrow--TranslateY: var(--pf-v6-c-tooltip__arrow--m-bottom--TranslateY);
+ --pf-v6-c-tooltip__arrow--Rotate: var(--pf-v6-c-tooltip__arrow--m-bottom--Rotate);
+}
+.pf-v6-c-tooltip:is(.pf-m-left,
+.pf-m-left-top,
+.pf-m-left-bottom) {
+ --pf-v6-c-tooltip__arrow--InsetBlockStart: var(--pf-v6-c-tooltip--m-left--InsetBlockStart, 50%);
+ --pf-v6-c-tooltip__arrow--InsetInlineEnd: var(--pf-v6-c-tooltip--m-left--InsetInlineEnd, 0);
+ --pf-v6-c-tooltip__arrow--TranslateX: var(--pf-v6-c-tooltip__arrow--m-left--TranslateX);
+ --pf-v6-c-tooltip__arrow--TranslateY: var(--pf-v6-c-tooltip__arrow--m-left--TranslateY);
+ --pf-v6-c-tooltip__arrow--Rotate: var(--pf-v6-c-tooltip__arrow--m-left--Rotate);
+}
+.pf-v6-c-tooltip:is(.pf-m-right,
+.pf-m-right-top,
+.pf-m-right-bottom) {
+ --pf-v6-c-tooltip__arrow--InsetBlockStart: var(--pf-v6-c-tooltip--m-right--InsetBlockStart, 50%);
+ --pf-v6-c-tooltip__arrow--InsetInlineStart: var(--pf-v6-c-tooltip--m-right--InsetInlineStart, 0);
+ --pf-v6-c-tooltip__arrow--TranslateX: var(--pf-v6-c-tooltip__arrow--m-right--TranslateX);
+ --pf-v6-c-tooltip__arrow--TranslateY: var(--pf-v6-c-tooltip__arrow--m-right--TranslateY);
+ --pf-v6-c-tooltip__arrow--Rotate: var(--pf-v6-c-tooltip__arrow--m-right--Rotate);
+}
+.pf-v6-c-tooltip:is(.pf-m-left-top,
+.pf-m-right-top) {
+ --pf-v6-c-tooltip__arrow--InsetBlockStart: 0;
+ --pf-v6-c-tooltip__arrow--TranslateY: var(--pf-v6-c-tooltip__arrow--m-top--TranslateY);
+}
+.pf-v6-c-tooltip:is(.pf-m-left-bottom,
+.pf-m-right-bottom) {
+ --pf-v6-c-tooltip__arrow--InsetBlockStart: auto;
+ --pf-v6-c-tooltip__arrow--InsetBlockEnd: 0;
+}
+.pf-v6-c-tooltip:is(.pf-m-top-left,
+.pf-m-bottom-left) {
+ --pf-v6-c-tooltip__arrow--InsetInlineStart: 0;
+ --pf-v6-c-tooltip__arrow--TranslateX: var(--pf-v6-c-tooltip__arrow--m-left--TranslateX);
+}
+.pf-v6-c-tooltip:is(.pf-m-top-right,
+.pf-m-bottom-right) {
+ --pf-v6-c-tooltip__arrow--InsetInlineEnd: 0;
+ --pf-v6-c-tooltip__arrow--InsetInlineStart: auto;
+}
+
+.pf-v6-c-tooltip__content {
+ position: relative;
+ padding-block-start: var(--pf-v6-c-tooltip__content--PaddingBlockStart);
+ padding-block-end: var(--pf-v6-c-tooltip__content--PaddingBlockEnd);
+ padding-inline-start: var(--pf-v6-c-tooltip__content--PaddingInlineStart);
+ padding-inline-end: var(--pf-v6-c-tooltip__content--PaddingInlineEnd);
+ font-size: var(--pf-v6-c-tooltip__content--FontSize);
+ color: var(--pf-v6-c-tooltip__content--Color);
+ text-align: center;
+ word-break: break-word;
+ background-color: var(--pf-v6-c-tooltip__content--BackgroundColor);
+ border-radius: var(--pf-v6-c-tooltip__content--BorderRadius);
+}
+.pf-v6-c-tooltip__content.pf-m-text-align-left {
+ text-align: start;
+}
+
+.pf-v6-c-tooltip__arrow {
+ position: absolute;
+ top: var(--pf-v6-c-tooltip__arrow--InsetBlockStart, auto);
+ right: var(--pf-v6-c-tooltip__arrow--InsetInlineEnd, auto);
+ bottom: var(--pf-v6-c-tooltip__arrow--InsetBlockEnd, auto);
+ left: var(--pf-v6-c-tooltip__arrow--InsetInlineStart, auto);
+ width: var(--pf-v6-c-tooltip__arrow--Width);
+ height: var(--pf-v6-c-tooltip__arrow--Height);
+ pointer-events: none;
+ background-color: var(--pf-v6-c-tooltip__arrow--BackgroundColor);
+ box-shadow: var(--pf-v6-c-tooltip__arrow--BoxShadow);
+ transform: translateX(var(--pf-v6-c-tooltip__arrow--TranslateX, 0)) translateY(var(--pf-v6-c-tooltip__arrow--TranslateY, 0)) rotate(var(--pf-v6-c-tooltip__arrow--Rotate, 0));
+}
+
+.pf-v6-c-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;
+ }
+}
+.pf-v6-c-number-input {
+ --pf-v6-c-number-input__unit--c-input-group--MarginInlineStart: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-number-input__icon--FontSize: var(--pf-t--global--font--size--xs);
+ --pf-v6-c-number-input--c-form-control--width-base: calc(var(--pf-t--global--spacer--md) * 2 + var(--pf-t--global--border--width--box--default) * 2);
+ --pf-v6-c-number-input--c-form-control--width-icon: var(--pf-t--global--spacer--xl);
+ --pf-v6-c-number-input--c-form-control--width-chars: 4;
+ --pf-v6-c-number-input--c-form-control--Width:
+ calc(
+ calc(
+ var(--pf-v6-c-number-input--c-form-control--width-base) + var(--pf-v6-c-number-input--c-form-control--width-chars) * 1ch
+ ) + var(--pf-v6-c-number-input--c-form-control--width-icon)
+ );
+}
+
+.pf-v6-c-number-input {
+ display: inline-flex;
+ align-items: center;
+}
+.pf-v6-c-number-input .pf-v6-c-form-control {
+ width: var(--pf-v6-c-number-input--c-form-control--Width);
+}
+.pf-v6-c-number-input .pf-v6-c-form-control > :is(input) {
+ text-align: end;
+ appearance: textfield;
+}
+.pf-v6-c-number-input .pf-v6-c-form-control > :is(input)::-webkit-inner-spin-button, .pf-v6-c-number-input .pf-v6-c-form-control > :is(input)::-webkit-outer-spin-button {
+ margin: 0;
+ appearance: none;
+}
+
+.pf-v6-c-input-group + .pf-v6-c-number-input__unit,
+.pf-v6-c-number-input__unit + .pf-v6-c-input-group {
+ margin-inline-start: var(--pf-v6-c-number-input__unit--c-input-group--MarginInlineStart);
+}
+
+.pf-v6-c-number-input__icon {
+ font-size: var(--pf-v6-c-number-input__icon--FontSize);
+}
+
+.pf-v6-c-tree-view {
+ --pf-v6-c-tree-view__node--indent--base: calc(var(--pf-t--global--spacer--md) * 2 + var(--pf-v6-c-tree-view__node-toggle-icon--MinWidth));
+ --pf-v6-c-tree-view__node--nested-indent--base: calc(var(--pf-v6-c-tree-view__node--indent--base) - var(--pf-t--global--spacer--md));
+ --pf-v6-c-tree-view__content--BorderRadius: var(--pf-t--global--border--radius--small);
+ --pf-v6-c-tree-view__node--PaddingBlockStart: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-tree-view__node--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-tree-view__node--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-tree-view__node--PaddingInlineStart: var(--pf-v6-c-tree-view__node--indent--base);
+ --pf-v6-c-tree-view__node--Color: var(--pf-t--global--text--color--subtle);
+ --pf-v6-c-tree-view__node--BackgroundColor: transparent;
+ --pf-v6-c-tree-view__node--m-current--Color: var(--pf-t--global--text--color--regular);
+ --pf-v6-c-tree-view__node--m-current--BackgroundColor: var(--pf-t--global--background--color--primary--clicked);
+ --pf-v6-c-tree-view__node--hover--BackgroundColor: var(--pf-t--global--background--color--primary--hover);
+ --pf-v6-c-tree-view__node-container--Display: contents;
+ --pf-v6-c-tree-view__node-content--RowGap: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-tree-view__node-content--Overflow: visible;
+ --pf-v6-c-tree-view__list--TransitionDuration--expand--slide: 0s;
+ --pf-v6-c-tree-view__list--TransitionDuration--expand--fade: var(--pf-t--global--motion--duration--fade--default);
+ --pf-v6-c-tree-view__list--TransitionDuration--collapse--slide: 0s;
+ --pf-v6-c-tree-view__list--TransitionDuration--collapse--fade: var(--pf-t--global--motion--duration--fade--short);
+ --pf-v6-c-tree-view__list--TransitionDuration--slide: var(--pf-v6-c-tree-view__list--TransitionDuration--collapse--slide);
+ --pf-v6-c-tree-view__list--TransitionDuration--fade: var(--pf-v6-c-tree-view__list--TransitionDuration--collapse--fade);
+ --pf-v6-c-tree-view__list--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
+ --pf-v6-c-tree-view__list--Opacity: 0;
+ --pf-v6-c-tree-view--m-expanded__list--Opacity: 1;
+ --pf-v6-c-tree-view__list--TranslateY: 0;
+ --pf-v6-c-tree-view--m-expanded__list--TranslateY: 0;
+ --pf-v6-c-tree-view__list-item__list-item__node-toggle--InsetBlockStart: var(--pf-v6-c-tree-view__node--PaddingBlockStart);
+ --pf-v6-c-tree-view__list-item__list-item__node-toggle--InsetInlineStart: var(--pf-v6-c-tree-view__node--PaddingInlineStart);
+ --pf-v6-c-tree-view__list-item__list-item__node-toggle--TranslateX: -100%;
+ --pf-v6-c-tree-view__node-toggle--Position: absolute;
+ --pf-v6-c-tree-view__node-toggle--Color--base: var(--pf-t--global--icon--color--subtle);
+ --pf-v6-c-tree-view__node-toggle--Color: var(--pf-v6-c-tree-view__node-toggle--Color--base);
+ --pf-v6-c-tree-view__node-toggle--BackgroundColor: transparent;
+ --pf-v6-c-tree-view__list-item--m-expanded__node-toggle--Color: var(--pf-t--global--icon--color--regular);
+ --pf-v6-c-tree-view__node-toggle-icon--MinWidth: var(--pf-t--global--icon--size--font--body--default);
+ --pf-v6-c-tree-view__node-toggle--PaddingBlockStart: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-tree-view__node-toggle--PaddingInlineEnd: var(--pf-t--global--spacer--md);
+ --pf-v6-c-tree-view__node-toggle--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-tree-view__node-toggle--PaddingInlineStart: var(--pf-t--global--spacer--md);
+ --pf-v6-c-tree-view__node-toggle--MarginBlockStart: calc(var(--pf-v6-c-tree-view__node-toggle--PaddingBlockStart) * -1);
+ --pf-v6-c-tree-view__node-toggle--MarginBlockEnd: calc(var(--pf-v6-c-tree-view__node-toggle--PaddingBlockStart) * -1);
+ --pf-v6-c-tree-view__node-toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
+ --pf-v6-c-tree-view__node-toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
+ --pf-v6-c-tree-view__node-check--MarginInlineEnd: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-tree-view__node-count--MarginInlineStart: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-tree-view__search--PaddingBlockStart: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-tree-view__search--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-tree-view__search--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-tree-view__search--PaddingInlineStart: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-tree-view__node-icon--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-tree-view__node-icon--Color: var(--pf-t--global--icon--color--subtle);
+ --pf-v6-c-tree-view__node-toggle-icon--base--Rotate: 0;
+ --pf-v6-c-tree-view__node-toggle-icon--Rotate: var(--pf-v6-c-tree-view__node-toggle-icon--base--Rotate);
+ --pf-v6-c-tree-view__list-item--m-expanded__node-toggle-icon--Rotate: 90deg;
+ --pf-v6-c-tree-view__node-text--max-lines: 1;
+ --pf-v6-c-tree-view__node-title--FontWeight: var(--pf-t--global--font--weight--body--bold);
+ --pf-v6-c-tree-view__action--MarginInlineEnd: var(--pf-t--global--spacer--md);
+ --pf-v6-c-tree-view--m-guides--guide--InsetInlineStart: var(--pf-v6-c-tree-view--m-guides--guide-left--base);
+ --pf-v6-c-tree-view--m-guides--guide-color--base: var(--pf-t--global--border--color--default);
+ --pf-v6-c-tree-view--m-guides--guide-width--base: var(--pf-t--global--border--width--divider--default);
+ --pf-v6-c-tree-view--m-guides--guide-left--base: calc(var(--pf-v6-c-tree-view__node--PaddingInlineStart) - var(--pf-v6-c-tree-view--m-guides__list-node--guide-width--base));
+ --pf-v6-c-tree-view--m-guides--guide-left--base--offset: calc(var(--pf-v6-c-tree-view__list-item__list-item__node-toggle--InsetInlineStart) + var(--pf-v6-c-tree-view__node-toggle-icon--MinWidth) / 2);
+ --pf-v6-c-tree-view--m-guides__list-node--guide-width--base: var(--pf-t--global--spacer--lg);
+ --pf-v6-c-tree-view--m-guides__list-item--before--InsetBlockStart: 0;
+ --pf-v6-c-tree-view--m-guides__list-item--before--Width: var(--pf-v6-c-tree-view--m-guides--guide-width--base);
+ --pf-v6-c-tree-view--m-guides__list-item--before--Height: 100%;
+ --pf-v6-c-tree-view--m-guides__list-item--before--BackgroundColor: var(--pf-v6-c-tree-view--m-guides--guide-color--base);
+ --pf-v6-c-tree-view--m-guides__list-item--last-child--before--InsetBlockStart: var(--pf-v6-c-tree-view--m-guides__node--before--InsetBlockStart);
+ --pf-v6-c-tree-view--m-guides__list-item--last-child--before--Height: var(--pf-v6-c-tree-view--m-guides__list-item--last-child--before--InsetBlockStart);
+ --pf-v6-c-tree-view--m-guides__list-item--ZIndex: var(--pf-t--global--z-index--xs);
+ --pf-v6-c-tree-view--m-guides__node--before--Width: 1rem;
+ --pf-v6-c-tree-view--m-guides__node--before--Height: var(--pf-v6-c-tree-view--m-guides--guide-width--base);
+ --pf-v6-c-tree-view--m-guides__node--before--InsetBlockStart: 1.125rem;
+ --pf-v6-c-tree-view--m-guides__node--before--BackgroundColor: var(--pf-v6-c-tree-view--m-guides--guide-color--base);
+ --pf-v6-c-tree-view--m-compact--base-border--InsetInlineStart--offset: var(--pf-t--global--spacer--md);
+ --pf-v6-c-tree-view--m-compact--base-border--InsetInlineStart: calc(var(--pf-v6-c-tree-view__node--PaddingInlineStart) - var(--pf-v6-c-tree-view--m-compact--base-border--InsetInlineStart--offset));
+ --pf-v6-c-tree-view--m-compact__node--indent--base: var(--pf-v6-c-tree-view__node--indent--base);
+ --pf-v6-c-tree-view--m-compact__node--nested-indent--base: var(--pf-t--global--spacer--lg);
+ --pf-v6-c-tree-view--m-compact--border--InsetInlineStart: var(--pf-v6-c-tree-view--m-compact--base-border--InsetInlineStart);
+ --pf-v6-c-tree-view--m-compact__node--Color: var(--pf-t--global--text--color--regular);
+ --pf-v6-c-tree-view--m-compact__node--PaddingBlockStart: 0;
+ --pf-v6-c-tree-view--m-compact__node--PaddingBlockEnd: 0;
+ --pf-v6-c-tree-view--m-compact__node--nested--PaddingBlockStart: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-tree-view--m-compact__node--nested--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-tree-view--m-compact__list-item__list-item__node-toggle--InsetBlockStart: calc(var(--pf-v6-c-tree-view--m-compact__node-container--PaddingBlockStart));
+ --pf-v6-c-tree-view--m-compact__list-item--BorderBlockEndWidth: var(--pf-t--global--border--width--divider--default);
+ --pf-v6-c-tree-view--m-compact__list-item--BorderBlockEndColor: var(--pf-t--global--border--color--default);
+ --pf-v6-c-tree-view--m-compact__list-item--before--InsetBlockStart: 0;
+ --pf-v6-c-tree-view--m-compact__list-item--last-child--before--Height: var(--pf-v6-c-tree-view--m-compact__node--before--InsetBlockStart);
+ --pf-v6-c-tree-view--m-compact__list-item--nested--before--InsetBlockStart: calc(var(--pf-v6-c-tree-view--m-compact__node--nested--PaddingBlockStart) * -1);
+ --pf-v6-c-tree-view--m-compact__list-item--nested--last-child--before--Height: calc(var(--pf-v6-c-tree-view--m-compact__node--before--InsetBlockStart) + var(--pf-v6-c-tree-view--m-compact__node--nested--PaddingBlockStart));
+ --pf-v6-c-tree-view--m-compact__node--PaddingInlineStart: var(--pf-v6-c-tree-view--m-compact__node--indent--base);
+ --pf-v6-c-tree-view--m-compact__node--before--InsetBlockStart: calc(var(--pf-v6-c-tree-view--m-compact__node-container--PaddingBlockStart) + var(--pf-v6-c-tree-view--m-compact__node--nested--PaddingBlockStart) + 0.25rem);
+ --pf-v6-c-tree-view--m-compact__node--level-2--PaddingInlineStart: var(--pf-v6-c-tree-view--m-compact__node--indent--base);
+ --pf-v6-c-tree-view--m-compact__node-toggle--nested--MarginInlineEnd: calc(var(--pf-v6-c-tree-view__node-toggle--PaddingInlineStart) * -.5);
+ --pf-v6-c-tree-view--m-compact__node-toggle--nested--MarginInlineStart: calc(var(--pf-v6-c-tree-view__node-toggle--PaddingInlineStart) * -1.5);
+ --pf-v6-c-tree-view--m-compact__node-container--Display: flex;
+ --pf-v6-c-tree-view--m-compact__node-container--PaddingBlockEnd--base: var(--pf-t--global--spacer--lg);
+ --pf-v6-c-tree-view--m-compact__node-container--PaddingBlockStart: var(--pf-t--global--spacer--lg);
+ --pf-v6-c-tree-view--m-compact__node-container--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
+ --pf-v6-c-tree-view--m-compact__node-container--PaddingBlockEnd: var(--pf-v6-c-tree-view--m-compact__node-container--PaddingBlockEnd--base);
+ --pf-v6-c-tree-view--m-compact__node-container--PaddingInlineStart: var(--pf-t--global--spacer--xs);
+ --pf-v6-c-tree-view--m-compact__node-container--BorderRadius: var(--pf-t--global--border--radius--small);
+ --pf-v6-c-tree-view--m-compact__node-container--nested--PaddingBlockStart: var(--pf-t--global--spacer--md);
+ --pf-v6-c-tree-view--m-compact__node-container--nested--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
+ --pf-v6-c-tree-view--m-compact__node-container--nested--PaddingBlockEnd: var(--pf-t--global--spacer--md);
+ --pf-v6-c-tree-view--m-compact__node-container--nested--PaddingInlineStart: var(--pf-t--global--spacer--lg);
+ --pf-v6-c-tree-view--m-compact__node-container--nested--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
+ --pf-v6-c-tree-view--m-compact__list-item--m-expanded__node-container--PaddingBlockEnd: 0;
+ --pf-v6-c-tree-view--m-no-background__node-container--BackgroundColor: transparent;
+ --pf-v6-c-tree-view--m-compact--m-no-background--base-border--InsetInlineStart--offset: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-tree-view--m-compact--m-no-background--base-border--InsetInlineStart: calc(var(--pf-v6-c-tree-view__node--PaddingInlineStart) - var(--pf-v6-c-tree-view--m-compact--m-no-background--base-border--InsetInlineStart--offset));
+ --pf-v6-c-tree-view--m-compact--m-no-background__node--indent--base: var(--pf-v6-c-tree-view__node--indent--base);
+ --pf-v6-c-tree-view--m-compact--m-no-background__node--nested-indent--base: var(--pf-t--global--spacer--2xl);
+ --pf-v6-c-tree-view--m-compact--m-no-background__node--nested--PaddingBlockStart: 0;
+ --pf-v6-c-tree-view--m-compact--m-no-background__node--nested--PaddingBlockEnd: 0;
+ --pf-v6-c-tree-view--m-compact--m-no-background__node--before--InsetBlockStart: calc(var(--pf-v6-c-tree-view--m-compact__node-container--nested--PaddingBlockStart) + var(--pf-v6-c-tree-view--m-compact__node--nested--PaddingBlockStart) + 0.25rem);
+}
+@media screen and (prefers-reduced-motion: no-preference) {
+ .pf-v6-c-tree-view {
+ --pf-v6-c-tree-view__list--TransitionDuration--expand--slide: var(--pf-t--global--motion--duration--fade--default);
+ --pf-v6-c-tree-view__list--TransitionDuration--collapse--slide: var(--pf-t--global--motion--duration--fade--short);
+ --pf-v6-c-tree-view__list--TranslateY: -.5rem;
+ }
+}
+
+.pf-v6-c-tree-view.pf-m-compact .pf-v6-c-tree-view__list-item, .pf-v6-c-tree-view.pf-m-guides .pf-v6-c-tree-view__list-item {
+ position: relative;
+}
+.pf-v6-c-tree-view.pf-m-compact .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item::before,
+.pf-v6-c-tree-view.pf-m-compact .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__node::before, .pf-v6-c-tree-view.pf-m-guides .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item::before,
+.pf-v6-c-tree-view.pf-m-guides .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__node::before {
+ position: absolute;
+ inset-inline-start: var(--pf-v6-c-tree-view--m-guides--guide--InsetInlineStart);
+ content: "";
+}
+.pf-v6-c-tree-view.pf-m-compact .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item::before, .pf-v6-c-tree-view.pf-m-guides .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item::before {
+ inset-block-start: var(--pf-v6-c-tree-view--m-guides__list-item--before--InsetBlockStart);
+ z-index: var(--pf-v6-c-tree-view--m-guides__list-item--ZIndex);
+ width: var(--pf-v6-c-tree-view--m-guides__list-item--before--Width);
+ height: var(--pf-v6-c-tree-view--m-guides__list-item--before--Height);
+ background-color: var(--pf-v6-c-tree-view--m-guides__list-item--before--BackgroundColor);
+}
+.pf-v6-c-tree-view.pf-m-compact .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__node::before, .pf-v6-c-tree-view.pf-m-guides .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__node::before {
+ inset-block-start: var(--pf-v6-c-tree-view--m-guides__node--before--InsetBlockStart);
+ width: var(--pf-v6-c-tree-view--m-guides__node--before--Width);
+ height: var(--pf-v6-c-tree-view--m-guides__node--before--Height);
+ background-color: var(--pf-v6-c-tree-view--m-guides__node--before--BackgroundColor);
+}
+.pf-v6-c-tree-view.pf-m-compact .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item:last-child::before, .pf-v6-c-tree-view.pf-m-guides .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item:last-child::before {
+ height: var(--pf-v6-c-tree-view--m-guides__list-item--last-child--before--Height);
+}
+.pf-v6-c-tree-view.pf-m-compact .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item, .pf-v6-c-tree-view.pf-m-guides .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item {
+ --pf-v6-c-tree-view--m-guides--guide--InsetInlineStart: var(--pf-v6-c-tree-view--m-guides--border--nested--InsetInlineStart);
+}
+.pf-v6-c-tree-view.pf-m-compact .pf-v6-c-tree-view__list-item:last-child, .pf-v6-c-tree-view.pf-m-guides .pf-v6-c-tree-view__list-item:last-child {
+ --pf-v6-c-tree-view--m-compact__list-item--BorderBlockEndWidth: 0;
+}
+.pf-v6-c-tree-view.pf-m-compact {
+ --pf-v6-c-tree-view__node--Color: var(--pf-v6-c-tree-view--m-compact__node--Color);
+ --pf-v6-c-tree-view__node--PaddingBlockStart: var(--pf-v6-c-tree-view--m-compact__node--PaddingBlockStart);
+ --pf-v6-c-tree-view__node--PaddingBlockEnd: var(--pf-v6-c-tree-view--m-compact__node--PaddingBlockEnd);
+ --pf-v6-c-tree-view__node-container--Display: var(--pf-v6-c-tree-view--m-compact__node-container--Display);
+ --pf-v6-c-tree-view__node--hover--BackgroundColor: transparent;
+ --pf-v6-c-tree-view__list-item__list-item__node-toggle--InsetBlockStart: var(--pf-v6-c-tree-view--m-compact__list-item__list-item__node-toggle--InsetBlockStart);
+}
+.pf-v6-c-tree-view.pf-m-compact .pf-v6-c-tree-view__list-item {
+ border-block-end: var(--pf-v6-c-tree-view--m-compact__list-item--BorderBlockEndWidth) solid var(--pf-v6-c-tree-view--m-compact__list-item--BorderBlockEndColor);
+}
+.pf-v6-c-tree-view.pf-m-compact .pf-v6-c-tree-view__list-item.pf-m-expanded {
+ --pf-v6-c-tree-view--m-compact__node-container--PaddingBlockEnd: var(--pf-v6-c-tree-view--m-compact__list-item--m-expanded__node-container--PaddingBlockEnd);
+}
+.pf-v6-c-tree-view.pf-m-compact .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item {
+ --pf-v6-c-tree-view__node--PaddingBlockStart: var(--pf-v6-c-tree-view--m-compact__node--nested--PaddingBlockStart);
+ --pf-v6-c-tree-view__node--PaddingBlockEnd: var(--pf-v6-c-tree-view--m-compact__node--nested--PaddingBlockEnd);
+ --pf-v6-c-tree-view__node-toggle--Position: static;
+ --pf-v6-c-tree-view__node--PaddingInlineStart: var(--pf-v6-c-tree-view--m-compact__node--level-2--PaddingInlineStart);
+ --pf-v6-c-tree-view__list-item__list-item__node-toggle--TranslateX: 0;
+ --pf-v6-c-tree-view--m-compact__list-item--BorderBlockEndWidth: 0;
+ --pf-v6-c-tree-view--m-compact__node-container--PaddingBlockEnd: var(--pf-v6-c-tree-view--m-compact__node-container--PaddingBlockEnd--base);
+}
+.pf-v6-c-tree-view.pf-m-compact .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item::before,
+.pf-v6-c-tree-view.pf-m-compact .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__node::before {
+ inset-inline-start: var(--pf-v6-c-tree-view--m-compact--border--InsetInlineStart);
+}
+.pf-v6-c-tree-view.pf-m-compact .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item::before {
+ inset-block-start: var(--pf-v6-c-tree-view--m-compact__list-item--before--InsetBlockStart);
+}
+.pf-v6-c-tree-view.pf-m-compact .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__node::before {
+ inset-block-start: var(--pf-v6-c-tree-view--m-compact__node--before--InsetBlockStart);
+}
+.pf-v6-c-tree-view.pf-m-compact .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item:last-child::before {
+ height: var(--pf-v6-c-tree-view--m-compact__list-item--last-child--before--Height);
+}
+.pf-v6-c-tree-view.pf-m-compact .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item {
+ --pf-v6-c-tree-view__node--PaddingInlineStart: var(--pf-v6-c-tree-view--m-compact__node--PaddingInlineStart);
+ --pf-v6-c-tree-view--m-compact--border--InsetInlineStart: var(--pf-v6-c-tree-view--m-compact--border--nested--InsetInlineStart);
+ --pf-v6-c-tree-view--m-compact__list-item--before--InsetBlockStart: var(--pf-v6-c-tree-view--m-compact__list-item--nested--before--InsetBlockStart);
+ --pf-v6-c-tree-view--m-compact__list-item--last-child--before--Height: var(--pf-v6-c-tree-view--m-compact__list-item--nested--last-child--before--Height);
+}
+.pf-v6-c-tree-view.pf-m-compact .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__node-container {
+ padding-block-start: var(--pf-v6-c-tree-view--m-compact__node-container--nested--PaddingBlockStart);
+ padding-block-end: var(--pf-v6-c-tree-view--m-compact__node-container--nested--PaddingBlockEnd);
+ padding-inline-start: var(--pf-v6-c-tree-view--m-compact__node-container--nested--PaddingInlineStart);
+ padding-inline-end: var(--pf-v6-c-tree-view--m-compact__node-container--nested--PaddingInlineEnd);
+ background-color: var(--pf-v6-c-tree-view--m-compact__node-container--nested--BackgroundColor);
+}
+.pf-v6-c-tree-view.pf-m-compact .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__node-toggle {
+ margin-inline-start: var(--pf-v6-c-tree-view--m-compact__node-toggle--nested--MarginInlineStart);
+ margin-inline-end: var(--pf-v6-c-tree-view--m-compact__node-toggle--nested--MarginInlineEnd);
+}
+.pf-v6-c-tree-view.pf-m-compact .pf-v6-c-tree-view__node-container {
+ padding-block-start: var(--pf-v6-c-tree-view--m-compact__node-container--PaddingBlockStart);
+ padding-block-end: var(--pf-v6-c-tree-view--m-compact__node-container--PaddingBlockEnd);
+ padding-inline-start: var(--pf-v6-c-tree-view--m-compact__node-container--PaddingInlineStart);
+ padding-inline-end: var(--pf-v6-c-tree-view--m-compact__node-container--PaddingInlineEnd);
+}
+.pf-v6-c-tree-view.pf-m-compact .pf-v6-c-tree-view__list-item:not([aria-expanded]) > .pf-v6-c-tree-view__content > .pf-v6-c-tree-view__node,
+.pf-v6-c-tree-view.pf-m-compact .pf-v6-c-tree-view__list-item:not([aria-expanded]) > .pf-v6-c-tree-view__content > .pf-v6-c-tree-view__node > .pf-v6-c-tree-view__node-container {
+ cursor: default;
+}
+.pf-v6-c-tree-view.pf-m-compact.pf-m-no-background {
+ --pf-v6-c-tree-view--m-compact__node--before--InsetBlockStart: var(--pf-v6-c-tree-view--m-compact--m-no-background__node--before--InsetBlockStart);
+}
+.pf-v6-c-tree-view.pf-m-compact.pf-m-no-background .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item {
+ --pf-v6-c-tree-view__node--PaddingBlockStart: var(--pf-v6-c-tree-view--m-compact--m-no-background__node--nested--PaddingBlockStart);
+ --pf-v6-c-tree-view__node--PaddingBlockEnd: var(--pf-v6-c-tree-view--m-compact--m-no-background__node--nested--PaddingBlockEnd);
+}
+.pf-v6-c-tree-view.pf-m-compact.pf-m-no-background .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item {
+ --pf-v6-c-tree-view--m-compact--border--InsetInlineStart: var(--pf-v6-c-tree-view--m-compact--m-no-background--border--nested--InsetInlineStart);
+ --pf-v6-c-tree-view__node--PaddingInlineStart: var(--pf-v6-c-tree-view--m-compact--m-no-background__node--PaddingInlineStart);
+}
+.pf-v6-c-tree-view.pf-m-no-background {
+ --pf-v6-c-tree-view--m-compact__node-container--nested--BackgroundColor: var(--pf-v6-c-tree-view--m-no-background__node-container--BackgroundColor);
+}
+
+.pf-v6-c-tree-view__node-toggle-icon {
+ display: inline-block;
+ min-width: var(--pf-v6-c-tree-view__node-toggle-icon--MinWidth);
+ text-align: center;
+ transition: transform var(--pf-v6-c-tree-view__node-toggle-icon--TransitionDuration) var(--pf-v6-c-tree-view__node-toggle-icon--TransitionTimingFunction);
+ transform: rotate(var(--pf-v6-c-tree-view__node-toggle-icon--Rotate));
+}
+:where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-tree-view__node-toggle-icon {
+ scale: -1 1;
+}
+
+.pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list {
+ max-height: 0;
+ visibility: hidden;
+ opacity: var(--pf-v6-c-tree-view__list--Opacity);
+ transition-delay: 0s, 0s, var(--pf-v6-c-tree-view__list--TransitionDuration--fade), var(--pf-v6-c-tree-view__list--TransitionDuration--fade);
+ transition-timing-function: var(--pf-v6-c-tree-view__list--TransitionTimingFunction);
+ transition-duration: var(--pf-v6-c-tree-view__list--TransitionDuration--fade), var(--pf-v6-c-tree-view__list--TransitionDuration--slide), 0s, 0s;
+ transition-property: opacity, translate, visibility, max-height;
+ translate: 0 var(--pf-v6-c-tree-view__list--TranslateY);
+}
+.pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item {
+ --pf-v6-c-tree-view__node-toggle-icon--Rotate: var(--pf-v6-c-tree-view__node-toggle-icon--base--Rotate);
+ --pf-v6-c-tree-view__node-toggle--Color: var(--pf-v6-c-tree-view__node-toggle--Color--base);
+}
+.pf-v6-c-tree-view__list-item.pf-m-expanded {
+ --pf-v6-c-tree-view__node-toggle--Color: var(--pf-v6-c-tree-view__list-item--m-expanded__node-toggle--Color);
+ --pf-v6-c-tree-view__node-toggle-icon--Rotate: var(--pf-v6-c-tree-view__list-item--m-expanded__node-toggle-icon--Rotate);
+}
+.pf-v6-c-tree-view__list-item.pf-m-expanded > .pf-v6-c-tree-view__list {
+ max-height: 99999px;
+ visibility: revert;
+ opacity: var(--pf-v6-c-tree-view--m-expanded__list--Opacity);
+ transition-delay: 0s;
+ transition-duration: var(--pf-v6-c-tree-view__list--TransitionDuration--expand--fade), var(--pf-v6-c-tree-view__list--TransitionDuration--expand--slide), 0s, 0s;
+ translate: 0 var(--pf-v6-c-tree-view--m-expanded__list--TranslateY);
+}
+
+.pf-v6-c-tree-view__node,
+.pf-v6-c-tree-view__node-container {
+ flex: 1 1;
+ align-items: flex-start;
+ min-width: 0;
+ text-align: start;
+ cursor: pointer;
+ border: 0;
+}
+
+.pf-v6-c-tree-view__node {
+ position: relative;
+ display: flex;
+ padding-block-start: var(--pf-v6-c-tree-view__node--PaddingBlockStart);
+ padding-block-end: var(--pf-v6-c-tree-view__node--PaddingBlockEnd);
+ padding-inline-start: var(--pf-v6-c-tree-view__node--PaddingInlineStart);
+ padding-inline-end: var(--pf-v6-c-tree-view__node--PaddingInlineEnd);
+ color: var(--pf-v6-c-tree-view__node--Color);
+ background-color: var(--pf-v6-c-tree-view__node--BackgroundColor);
+}
+.pf-v6-c-tree-view__node.pf-m-current {
+ --pf-v6-c-tree-view__node--Color: var(--pf-v6-c-tree-view__node--m-current--Color);
+}
+.pf-v6-c-tree-view__node .pf-v6-c-tree-view__node-count {
+ margin-inline-start: var(--pf-v6-c-tree-view__node-count--MarginInlineStart);
+}
+
+.pf-v6-c-tree-view__node-container {
+ display: var(--pf-v6-c-tree-view__node-container--Display);
+ flex-grow: 1;
+ border-radius: var(--pf-v6-c-tree-view--m-compact__node-container--BorderRadius);
+}
+
+.pf-v6-c-tree-view__node-content {
+ display: flex;
+ flex-direction: column;
+ overflow: var(--pf-v6-c-tree-view__node-content--Overflow);
+}
+.pf-v6-c-tree-view__node-content > * + * {
+ margin-block-start: var(--pf-v6-c-tree-view__node-content--RowGap);
+}
+
+.pf-v6-c-tree-view__node-check {
+ margin-inline-end: var(--pf-v6-c-tree-view__node-check--MarginInlineEnd);
+}
+
+.pf-v6-c-tree-view__node-toggle {
+ position: var(--pf-v6-c-tree-view__node-toggle--Position);
+ inset-block-start: var(--pf-v6-c-tree-view__list-item__list-item__node-toggle--InsetBlockStart);
+ inset-inline-start: var(--pf-v6-c-tree-view__list-item__list-item__node-toggle--InsetInlineStart);
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ padding-block-start: var(--pf-v6-c-tree-view__node-toggle--PaddingBlockStart);
+ padding-block-end: var(--pf-v6-c-tree-view__node-toggle--PaddingBlockEnd);
+ padding-inline-start: var(--pf-v6-c-tree-view__node-toggle--PaddingInlineStart);
+ padding-inline-end: var(--pf-v6-c-tree-view__node-toggle--PaddingInlineEnd);
+ margin-block-start: var(--pf-v6-c-tree-view__node-toggle--MarginBlockStart);
+ margin-block-end: var(--pf-v6-c-tree-view__node-toggle--MarginBlockEnd);
+ color: var(--pf-v6-c-tree-view__node-toggle--Color);
+ background-color: var(--pf-v6-c-tree-view__node-toggle--BackgroundColor);
+ border: 0;
+ transform: translateX(var(--pf-v6-c-tree-view__list-item__list-item__node-toggle--TranslateX));
+}
+:where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-tree-view__node-toggle {
+ transform: translateX(calc(var(--pf-v6-c-tree-view__list-item__list-item__node-toggle--TranslateX) * var(--pf-v6-global--inverse--multiplier)));
+}
+
+.pf-v6-c-tree-view__node-title.pf-m-truncate,
+.pf-v6-c-tree-view__node-text.pf-m-truncate {
+ --pf-v6-c-tree-view__node-content--Overflow: hidden;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+}
+.pf-v6-c-tree-view.pf-m-truncate .pf-v6-c-tree-view__node-title,
+.pf-v6-c-tree-view.pf-m-truncate .pf-v6-c-tree-view__node-text {
+ --pf-v6-c-tree-view__node-content--Overflow: hidden;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+}
+
+.pf-v6-c-tree-view__node-text {
+ font-weight: inherit;
+ color: inherit;
+ text-align: start;
+ background-color: transparent;
+ border: 0;
+}
+label.pf-v6-c-tree-view__node-text {
+ cursor: pointer;
+}
+
+.pf-v6-c-tree-view__node-title {
+ font-weight: var(--pf-v6-c-tree-view__node-title--FontWeight);
+}
+
+.pf-v6-c-tree-view__search {
+ padding-block-start: var(--pf-v6-c-tree-view__search--PaddingBlockStart);
+ padding-block-end: var(--pf-v6-c-tree-view__search--PaddingBlockEnd);
+ padding-inline-start: var(--pf-v6-c-tree-view__search--PaddingInlineStart);
+ padding-inline-end: var(--pf-v6-c-tree-view__search--PaddingInlineEnd);
+}
+
+.pf-v6-c-tree-view__node-icon {
+ padding-inline-end: var(--pf-v6-c-tree-view__node-icon--PaddingInlineEnd);
+ color: var(--pf-v6-c-tree-view__node-icon--Color);
+}
+
+.pf-v6-c-tree-view__content {
+ display: flex;
+ align-items: center;
+ background-color: var(--pf-v6-c-tree-view__content--BackgroundColor);
+ border-radius: var(--pf-v6-c-tree-view__content--BorderRadius);
+}
+
+.pf-v6-c-tree-view__content:hover,
+.pf-v6-c-tree-view__content:focus-within {
+ background-color: var(--pf-v6-c-tree-view__node--hover--BackgroundColor);
+}
+
+.pf-v6-c-tree-view__action {
+ margin-inline-end: var(--pf-v6-c-tree-view__action--MarginInlineEnd);
+}
+
+.pf-v6-c-tree-view__content:has(> .pf-v6-c-tree-view__node.pf-m-current) {
+ --pf-v6-c-tree-view__content--BackgroundColor: var(--pf-v6-c-tree-view__node--m-current--BackgroundColor);
+}
+
+.pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item {
+ --pf-v6-c-tree-view__list-item__list-item__node-toggle--InsetInlineStart: var(--pf-v6-c-tree-view__node--PaddingInlineStart);
+ --pf-v6-c-tree-view__node--PaddingInlineStart: calc(var(--pf-v6-c-tree-view__node--nested-indent--base) * 1 + var(--pf-v6-c-tree-view__node--indent--base));
+ --pf-v6-c-tree-view--m-guides--border--nested--InsetInlineStart: calc(var(--pf-v6-c-tree-view__node--PaddingInlineStart) - var(--pf-v6-c-tree-view--m-guides--guide-left--base--offset));
+}
+.pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item {
+ --pf-v6-c-tree-view__list-item__list-item__node-toggle--InsetInlineStart: var(--pf-v6-c-tree-view__node--PaddingInlineStart);
+ --pf-v6-c-tree-view__node--PaddingInlineStart: calc(var(--pf-v6-c-tree-view__node--nested-indent--base) * 2 + var(--pf-v6-c-tree-view__node--indent--base));
+ --pf-v6-c-tree-view--m-guides--border--nested--InsetInlineStart: calc(var(--pf-v6-c-tree-view__node--PaddingInlineStart) - var(--pf-v6-c-tree-view--m-guides--guide-left--base--offset));
+ --pf-v6-c-tree-view--m-compact__node--PaddingInlineStart: calc(var(--pf-v6-c-tree-view--m-compact__node--nested-indent--base) * 1 + var(--pf-v6-c-tree-view--m-compact__node--indent--base));
+ --pf-v6-c-tree-view--m-compact--border--nested--InsetInlineStart: calc(var(--pf-v6-c-tree-view__node--PaddingInlineStart) - var(--pf-v6-c-tree-view--m-compact--base-border--InsetInlineStart--offset));
+ --pf-v6-c-tree-view--m-compact--m-no-background__node--PaddingInlineStart: calc(var(--pf-v6-c-tree-view--m-compact--m-no-background__node--nested-indent--base) * 1 + var(--pf-v6-c-tree-view--m-compact--m-no-background__node--indent--base));
+ --pf-v6-c-tree-view--m-compact--m-no-background--border--nested--InsetInlineStart: calc(var(--pf-v6-c-tree-view__node--PaddingInlineStart) - var(--pf-v6-c-tree-view--m-compact--m-no-background--base-border--InsetInlineStart--offset));
+}
+.pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item {
+ --pf-v6-c-tree-view__list-item__list-item__node-toggle--InsetInlineStart: var(--pf-v6-c-tree-view__node--PaddingInlineStart);
+ --pf-v6-c-tree-view__node--PaddingInlineStart: calc(var(--pf-v6-c-tree-view__node--nested-indent--base) * 3 + var(--pf-v6-c-tree-view__node--indent--base));
+ --pf-v6-c-tree-view--m-guides--border--nested--InsetInlineStart: calc(var(--pf-v6-c-tree-view__node--PaddingInlineStart) - var(--pf-v6-c-tree-view--m-guides--guide-left--base--offset));
+ --pf-v6-c-tree-view--m-compact__node--PaddingInlineStart: calc(var(--pf-v6-c-tree-view--m-compact__node--nested-indent--base) * 2 + var(--pf-v6-c-tree-view--m-compact__node--indent--base));
+ --pf-v6-c-tree-view--m-compact--border--nested--InsetInlineStart: calc(var(--pf-v6-c-tree-view__node--PaddingInlineStart) - var(--pf-v6-c-tree-view--m-compact--base-border--InsetInlineStart--offset));
+ --pf-v6-c-tree-view--m-compact--m-no-background__node--PaddingInlineStart: calc(var(--pf-v6-c-tree-view--m-compact--m-no-background__node--nested-indent--base) * 2 + var(--pf-v6-c-tree-view--m-compact--m-no-background__node--indent--base));
+ --pf-v6-c-tree-view--m-compact--m-no-background--border--nested--InsetInlineStart: calc(var(--pf-v6-c-tree-view__node--PaddingInlineStart) - var(--pf-v6-c-tree-view--m-compact--m-no-background--base-border--InsetInlineStart--offset));
+}
+.pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item {
+ --pf-v6-c-tree-view__list-item__list-item__node-toggle--InsetInlineStart: var(--pf-v6-c-tree-view__node--PaddingInlineStart);
+ --pf-v6-c-tree-view__node--PaddingInlineStart: calc(var(--pf-v6-c-tree-view__node--nested-indent--base) * 4 + var(--pf-v6-c-tree-view__node--indent--base));
+ --pf-v6-c-tree-view--m-guides--border--nested--InsetInlineStart: calc(var(--pf-v6-c-tree-view__node--PaddingInlineStart) - var(--pf-v6-c-tree-view--m-guides--guide-left--base--offset));
+ --pf-v6-c-tree-view--m-compact__node--PaddingInlineStart: calc(var(--pf-v6-c-tree-view--m-compact__node--nested-indent--base) * 3 + var(--pf-v6-c-tree-view--m-compact__node--indent--base));
+ --pf-v6-c-tree-view--m-compact--border--nested--InsetInlineStart: calc(var(--pf-v6-c-tree-view__node--PaddingInlineStart) - var(--pf-v6-c-tree-view--m-compact--base-border--InsetInlineStart--offset));
+ --pf-v6-c-tree-view--m-compact--m-no-background__node--PaddingInlineStart: calc(var(--pf-v6-c-tree-view--m-compact--m-no-background__node--nested-indent--base) * 3 + var(--pf-v6-c-tree-view--m-compact--m-no-background__node--indent--base));
+ --pf-v6-c-tree-view--m-compact--m-no-background--border--nested--InsetInlineStart: calc(var(--pf-v6-c-tree-view__node--PaddingInlineStart) - var(--pf-v6-c-tree-view--m-compact--m-no-background--base-border--InsetInlineStart--offset));
+}
+.pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item {
+ --pf-v6-c-tree-view__list-item__list-item__node-toggle--InsetInlineStart: var(--pf-v6-c-tree-view__node--PaddingInlineStart);
+ --pf-v6-c-tree-view__node--PaddingInlineStart: calc(var(--pf-v6-c-tree-view__node--nested-indent--base) * 5 + var(--pf-v6-c-tree-view__node--indent--base));
+ --pf-v6-c-tree-view--m-guides--border--nested--InsetInlineStart: calc(var(--pf-v6-c-tree-view__node--PaddingInlineStart) - var(--pf-v6-c-tree-view--m-guides--guide-left--base--offset));
+ --pf-v6-c-tree-view--m-compact__node--PaddingInlineStart: calc(var(--pf-v6-c-tree-view--m-compact__node--nested-indent--base) * 4 + var(--pf-v6-c-tree-view--m-compact__node--indent--base));
+ --pf-v6-c-tree-view--m-compact--border--nested--InsetInlineStart: calc(var(--pf-v6-c-tree-view__node--PaddingInlineStart) - var(--pf-v6-c-tree-view--m-compact--base-border--InsetInlineStart--offset));
+ --pf-v6-c-tree-view--m-compact--m-no-background__node--PaddingInlineStart: calc(var(--pf-v6-c-tree-view--m-compact--m-no-background__node--nested-indent--base) * 4 + var(--pf-v6-c-tree-view--m-compact--m-no-background__node--indent--base));
+ --pf-v6-c-tree-view--m-compact--m-no-background--border--nested--InsetInlineStart: calc(var(--pf-v6-c-tree-view__node--PaddingInlineStart) - var(--pf-v6-c-tree-view--m-compact--m-no-background--base-border--InsetInlineStart--offset));
+}
+.pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item {
+ --pf-v6-c-tree-view__list-item__list-item__node-toggle--InsetInlineStart: var(--pf-v6-c-tree-view__node--PaddingInlineStart);
+ --pf-v6-c-tree-view__node--PaddingInlineStart: calc(var(--pf-v6-c-tree-view__node--nested-indent--base) * 6 + var(--pf-v6-c-tree-view__node--indent--base));
+ --pf-v6-c-tree-view--m-guides--border--nested--InsetInlineStart: calc(var(--pf-v6-c-tree-view__node--PaddingInlineStart) - var(--pf-v6-c-tree-view--m-guides--guide-left--base--offset));
+ --pf-v6-c-tree-view--m-compact__node--PaddingInlineStart: calc(var(--pf-v6-c-tree-view--m-compact__node--nested-indent--base) * 5 + var(--pf-v6-c-tree-view--m-compact__node--indent--base));
+ --pf-v6-c-tree-view--m-compact--border--nested--InsetInlineStart: calc(var(--pf-v6-c-tree-view__node--PaddingInlineStart) - var(--pf-v6-c-tree-view--m-compact--base-border--InsetInlineStart--offset));
+ --pf-v6-c-tree-view--m-compact--m-no-background__node--PaddingInlineStart: calc(var(--pf-v6-c-tree-view--m-compact--m-no-background__node--nested-indent--base) * 5 + var(--pf-v6-c-tree-view--m-compact--m-no-background__node--indent--base));
+ --pf-v6-c-tree-view--m-compact--m-no-background--border--nested--InsetInlineStart: calc(var(--pf-v6-c-tree-view__node--PaddingInlineStart) - var(--pf-v6-c-tree-view--m-compact--m-no-background--base-border--InsetInlineStart--offset));
+}
+.pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item {
+ --pf-v6-c-tree-view__list-item__list-item__node-toggle--InsetInlineStart: var(--pf-v6-c-tree-view__node--PaddingInlineStart);
+ --pf-v6-c-tree-view__node--PaddingInlineStart: calc(var(--pf-v6-c-tree-view__node--nested-indent--base) * 7 + var(--pf-v6-c-tree-view__node--indent--base));
+ --pf-v6-c-tree-view--m-guides--border--nested--InsetInlineStart: calc(var(--pf-v6-c-tree-view__node--PaddingInlineStart) - var(--pf-v6-c-tree-view--m-guides--guide-left--base--offset));
+ --pf-v6-c-tree-view--m-compact__node--PaddingInlineStart: calc(var(--pf-v6-c-tree-view--m-compact__node--nested-indent--base) * 6 + var(--pf-v6-c-tree-view--m-compact__node--indent--base));
+ --pf-v6-c-tree-view--m-compact--border--nested--InsetInlineStart: calc(var(--pf-v6-c-tree-view__node--PaddingInlineStart) - var(--pf-v6-c-tree-view--m-compact--base-border--InsetInlineStart--offset));
+ --pf-v6-c-tree-view--m-compact--m-no-background__node--PaddingInlineStart: calc(var(--pf-v6-c-tree-view--m-compact--m-no-background__node--nested-indent--base) * 6 + var(--pf-v6-c-tree-view--m-compact--m-no-background__node--indent--base));
+ --pf-v6-c-tree-view--m-compact--m-no-background--border--nested--InsetInlineStart: calc(var(--pf-v6-c-tree-view__node--PaddingInlineStart) - var(--pf-v6-c-tree-view--m-compact--m-no-background--base-border--InsetInlineStart--offset));
+}
+.pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item {
+ --pf-v6-c-tree-view__list-item__list-item__node-toggle--InsetInlineStart: var(--pf-v6-c-tree-view__node--PaddingInlineStart);
+ --pf-v6-c-tree-view__node--PaddingInlineStart: calc(var(--pf-v6-c-tree-view__node--nested-indent--base) * 8 + var(--pf-v6-c-tree-view__node--indent--base));
+ --pf-v6-c-tree-view--m-guides--border--nested--InsetInlineStart: calc(var(--pf-v6-c-tree-view__node--PaddingInlineStart) - var(--pf-v6-c-tree-view--m-guides--guide-left--base--offset));
+ --pf-v6-c-tree-view--m-compact__node--PaddingInlineStart: calc(var(--pf-v6-c-tree-view--m-compact__node--nested-indent--base) * 7 + var(--pf-v6-c-tree-view--m-compact__node--indent--base));
+ --pf-v6-c-tree-view--m-compact--border--nested--InsetInlineStart: calc(var(--pf-v6-c-tree-view__node--PaddingInlineStart) - var(--pf-v6-c-tree-view--m-compact--base-border--InsetInlineStart--offset));
+ --pf-v6-c-tree-view--m-compact--m-no-background__node--PaddingInlineStart: calc(var(--pf-v6-c-tree-view--m-compact--m-no-background__node--nested-indent--base) * 7 + var(--pf-v6-c-tree-view--m-compact--m-no-background__node--indent--base));
+ --pf-v6-c-tree-view--m-compact--m-no-background--border--nested--InsetInlineStart: calc(var(--pf-v6-c-tree-view__node--PaddingInlineStart) - var(--pf-v6-c-tree-view--m-compact--m-no-background--base-border--InsetInlineStart--offset));
+}
+.pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item {
+ --pf-v6-c-tree-view__list-item__list-item__node-toggle--InsetInlineStart: var(--pf-v6-c-tree-view__node--PaddingInlineStart);
+ --pf-v6-c-tree-view__node--PaddingInlineStart: calc(var(--pf-v6-c-tree-view__node--nested-indent--base) * 9 + var(--pf-v6-c-tree-view__node--indent--base));
+ --pf-v6-c-tree-view--m-guides--border--nested--InsetInlineStart: calc(var(--pf-v6-c-tree-view__node--PaddingInlineStart) - var(--pf-v6-c-tree-view--m-guides--guide-left--base--offset));
+ --pf-v6-c-tree-view--m-compact__node--PaddingInlineStart: calc(var(--pf-v6-c-tree-view--m-compact__node--nested-indent--base) * 8 + var(--pf-v6-c-tree-view--m-compact__node--indent--base));
+ --pf-v6-c-tree-view--m-compact--border--nested--InsetInlineStart: calc(var(--pf-v6-c-tree-view__node--PaddingInlineStart) - var(--pf-v6-c-tree-view--m-compact--base-border--InsetInlineStart--offset));
+ --pf-v6-c-tree-view--m-compact--m-no-background__node--PaddingInlineStart: calc(var(--pf-v6-c-tree-view--m-compact--m-no-background__node--nested-indent--base) * 8 + var(--pf-v6-c-tree-view--m-compact--m-no-background__node--indent--base));
+ --pf-v6-c-tree-view--m-compact--m-no-background--border--nested--InsetInlineStart: calc(var(--pf-v6-c-tree-view__node--PaddingInlineStart) - var(--pf-v6-c-tree-view--m-compact--m-no-background--base-border--InsetInlineStart--offset));
+}
+.pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item {
+ --pf-v6-c-tree-view__list-item__list-item__node-toggle--InsetInlineStart: var(--pf-v6-c-tree-view__node--PaddingInlineStart);
+ --pf-v6-c-tree-view__node--PaddingInlineStart: calc(var(--pf-v6-c-tree-view__node--nested-indent--base) * 10 + var(--pf-v6-c-tree-view__node--indent--base));
+ --pf-v6-c-tree-view--m-guides--border--nested--InsetInlineStart: calc(var(--pf-v6-c-tree-view__node--PaddingInlineStart) - var(--pf-v6-c-tree-view--m-guides--guide-left--base--offset));
+ --pf-v6-c-tree-view--m-compact__node--PaddingInlineStart: calc(var(--pf-v6-c-tree-view--m-compact__node--nested-indent--base) * 9 + var(--pf-v6-c-tree-view--m-compact__node--indent--base));
+ --pf-v6-c-tree-view--m-compact--border--nested--InsetInlineStart: calc(var(--pf-v6-c-tree-view__node--PaddingInlineStart) - var(--pf-v6-c-tree-view--m-compact--base-border--InsetInlineStart--offset));
+ --pf-v6-c-tree-view--m-compact--m-no-background__node--PaddingInlineStart: calc(var(--pf-v6-c-tree-view--m-compact--m-no-background__node--nested-indent--base) * 9 + var(--pf-v6-c-tree-view--m-compact--m-no-background__node--indent--base));
+ --pf-v6-c-tree-view--m-compact--m-no-background--border--nested--InsetInlineStart: calc(var(--pf-v6-c-tree-view__node--PaddingInlineStart) - var(--pf-v6-c-tree-view--m-compact--m-no-background--base-border--InsetInlineStart--offset));
+}
+
+.pf-v6-c-wizard {
+ --pf-v6-c-wizard--Height: initial;
+ --pf-v6-c-wizard--Height--base: 100%;
+ --pf-v6-c-modal-box--c-wizard--Height--base: 47.625rem;
+ --pf-v6-c-wizard__header--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
+ --pf-v6-c-wizard__header--ZIndex: auto;
+ --pf-v6-c-wizard__header--PaddingBlockStart: var(--pf-t--global--spacer--lg);
+ --pf-v6-c-wizard__header--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
+ --pf-v6-c-wizard__header--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
+ --pf-v6-c-wizard__header--PaddingInlineStart: var(--pf-t--global--spacer--lg);
+ --pf-v6-c-wizard__header--BorderBlockEndWidth: var(--pf-t--global--border--width--divider--default);
+ --pf-v6-c-wizard__header--BorderBlockEndColor: var(--pf-t--global--border--color--default);
+ --pf-v6-c-wizard__close--InsetBlockStart: calc(var(--pf-t--global--spacer--lg) - var(--pf-t--global--spacer--control--vertical--plain));
+ --pf-v6-c-wizard__close--InsetInlineEnd: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-wizard__close--FontSize: var(--pf-t--global--font--size--xl);
+ --pf-v6-c-wizard__title--PaddingInlineEnd: var(--pf-t--global--spacer--2xl);
+ --pf-v6-c-wizard__title-text--FontSize: var(--pf-t--global--font--size--3xl);
+ --pf-v6-c-wizard__title-text--FontFamily: var(--pf-t--global--font--family--heading);
+ --pf-v6-c-wizard__title-text--FontWeight: var(--pf-t--global--font--weight--heading--default);
+ --pf-v6-c-wizard__title-text--LineHeight: var(--pf-t--global--font--line-height--heading);
+ --pf-v6-c-wizard__title-text--Color: var(--pf-t--global--text--color--regular);
+ --pf-v6-c-wizard__description--PaddingBlockStart: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-wizard__description--Color: var(--pf-t--global--text--color--subtle);
+ --pf-v6-c-wizard__nav-link--Gap: var(--pf-t--global--spacer--xs);
+ --pf-v6-c-wizard__nav-link--Color: var(--pf-t--global--text--color--subtle);
+ --pf-v6-c-wizard__nav-link--TextDecoration: none;
+ --pf-v6-c-wizard__nav-link--hover--Color: var(--pf-t--global--text--color--subtle);
+ --pf-v6-c-wizard__nav-link--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
+ --pf-v6-c-wizard__nav-link--m-current--Color: var(--pf-t--global--text--color--regular);
+ --pf-v6-c-wizard__nav-link--m-current--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
+ --pf-v6-c-wizard__nav-link--m-disabled--Color: var(--pf-t--global--text--color--disabled);
+ --pf-v6-c-wizard__nav-link--m-disabled--BackgroundColor: transparent;
+ --pf-v6-c-wizard__nav-link-main--PaddingBlockStart: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-wizard__nav-link-main--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-wizard__nav-link-main--PaddingInlineStart: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-wizard__nav-link-main--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-wizard__nav-link-main--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
+ --pf-v6-c-wizard__nav-link-main--BorderRadius: var(--pf-t--global--border--radius--small);
+ --pf-v6-c-wizard__nav-link-toggle--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-wizard__nav-link-toggle--PaddingInlineStart: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-wizard__nav-link-toggle--Color: var(--pf-t--global--icon--color--regular);
+ --pf-v6-c-wizard__nav-link-toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
+ --pf-v6-c-wizard__nav-link-toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
+ --pf-v6-c-wizard__nav-link-toggle-icon--Rotate: 0;
+ --pf-v6-c-wizard__nav-item--m-expanded__link-toggle-icon--Rotate: 90deg;
+ --pf-v6-c-wizard__nav-link--before--Width: var(--pf-t--global--icon--size--font--xl);
+ --pf-v6-c-wizard__nav-link--before--Height: var(--pf-t--global--icon--size--font--xl);
+ --pf-v6-c-wizard__nav-link--before--InsetBlockStart: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-wizard__nav-link--before--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
+ --pf-v6-c-wizard__nav-link--before--BorderRadius: var(--pf-t--global--border--radius--large);
+ --pf-v6-c-wizard__nav-link--before--Color: var(--pf-t--global--text--color--regular);
+ --pf-v6-c-wizard__nav-link--before--FontSize: var(--pf-t--global--font--size--body--default);
+ --pf-v6-c-wizard__nav-link--m-current--before--BackgroundColor: var(--pf-t--global--color--brand--default);
+ --pf-v6-c-wizard__nav-link--m-current--before--Color: var(--pf-t--global--text--color--on-brand--default);
+ --pf-v6-c-wizard__nav-link--m-disabled--before--BackgroundColor: transparent;
+ --pf-v6-c-wizard__nav-link--m-disabled--before--Color: var(--pf-t--global--text--color--disabled);
+ --pf-v6-c-wizard__nav-link-status-icon--Color: var(--pf-t--global--icon--color--regular);
+ --pf-v6-c-wizard__nav-link--m-danger__nav-link-status-icon--Color: var(--pf-t--global--icon--color--status--danger--default);
+ --pf-v6-c-wizard__nav-link--m-success__nav-link-status-icon--Color: var(--pf-t--global--icon--color--status--success--default);
+ --pf-v6-c-wizard__nav-link-status-icon--InsetBlockStart: 4px;
+ --pf-v6-c-wizard__nav-link-status-icon--FontSize: var(--pf-t--global--icon--size--font--xl);
+ --pf-v6-c-wizard__toggle--BackgroundColor: var(--pf-t--global--background--color--primary--default);
+ --pf-v6-c-wizard__toggle--ZIndex: var(--pf-t--global--z-index--xs);
+ --pf-v6-c-wizard__toggle--PaddingBlockStart: var(--pf-t--global--spacer--lg);
+ --pf-v6-c-wizard__toggle--PaddingInlineEnd: var(--pf-t--global--spacer--md);
+ --pf-v6-c-wizard__toggle--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
+ --pf-v6-c-wizard__toggle--PaddingInlineStart: var(--pf-t--global--spacer--lg);
+ --pf-v6-c-wizard__toggle--BorderBlockEndWidth: var(--pf-t--global--border--width--divider--default);
+ --pf-v6-c-wizard__toggle--BorderBlockEndColor: var(--pf-t--global--border--color--default);
+ --pf-v6-c-wizard__toggle-num--InsetBlockStart: 0;
+ --pf-v6-c-wizard__toggle-list-item--not-last-child--MarginInlineEnd: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-wizard__toggle-list-item--MarginBlockEnd: var(--pf-t--global--spacer--xs);
+ --pf-v6-c-wizard__toggle-list-item--Gap: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-wizard__nav-link-status-icon--LineHeight: 1;
+ --pf-v6-c-wizard__toggle-status-icon--Color: var(--pf-t--global--icon--color--regular);
+ --pf-v6-c-wizard__toggle-list-item--m-danger__status-icon--Color: var(--pf-t--global--icon--color--status--danger--default);
+ --pf-v6-c-wizard__toggle-list-item--m-success__status-icon--Color: var(--pf-t--global--icon--color--status--success--default);
+ --pf-v6-c-wizard__toggle-status-icon--InsetBlockStart: 2px;
+ --pf-v6-c-wizard__toggle-status-icon--FontSize: var(--pf-t--global--icon--size--font--xl);
+ --pf-v6-c-wizard__toggle-list--MarginInlineEnd: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-wizard__toggle-list--MarginBlockEnd: calc(var(--pf-v6-c-wizard__toggle-list-item--MarginBlockEnd) * -1);
+ --pf-v6-c-wizard__toggle-separator--Color: var(--pf-t--global--border--color--default);
+ --pf-v6-c-wizard__toggle-icon--LineHeight: var(--pf-t--global--font--line-height--body);
+ --pf-v6-c-wizard__toggle--m-expanded__toggle-icon--Rotate: 180deg;
+ --pf-v6-c-wizard__nav--ZIndex: var(--pf-t--global--z-index--sm);
+ --pf-v6-c-wizard__nav--BackgroundColor: var(--pf-t--global--background--color--primary--default);
+ --pf-v6-c-wizard__nav--BoxShadow: var(--pf-t--global--box-shadow--md--bottom);
+ --pf-v6-c-wizard__nav--Width: 100%;
+ --pf-v6-c-wizard__nav--lg--Width: 15.625rem;
+ --pf-v6-c-wizard__nav--lg--BorderInlineEndWidth: var(--pf-t--global--border--width--divider--default);
+ --pf-v6-c-wizard__nav--lg--BorderInlineEndColor: var(--pf-t--global--border--color--default);
+ --pf-v6-c-wizard__nav-list--PaddingBlockStart: var(--pf-t--global--spacer--lg);
+ --pf-v6-c-wizard__nav-list--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
+ --pf-v6-c-wizard__nav-list--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
+ --pf-v6-c-wizard__nav-list--PaddingInlineStart: var(--pf-t--global--spacer--lg);
+ --pf-v6-c-wizard__nav-list--nested--MarginInlineStart: var(--pf-t--global--spacer--lg);
+ --pf-v6-c-wizard__nav-list--nested--MarginBlockStart: var(--pf-t--global--spacer--md);
+ --pf-v6-c-wizard__nav-item--MarginBlockStart: var(--pf-t--global--spacer--md);
+ --pf-v6-c-wizard__outer-wrap--BackgroundColor: var(--pf-t--global--background--color--primary--default);
+ --pf-v6-c-wizard__outer-wrap--lg--PaddingInlineStart: var(--pf-v6-c-wizard__nav--Width);
+ --pf-v6-c-wizard__outer-wrap--MinHeight: 15.625rem;
+ --pf-v6-c-wizard__main--ZIndex: auto;
+ --pf-v6-c-wizard__main-body--PaddingBlockStart: var(--pf-t--global--spacer--lg);
+ --pf-v6-c-wizard__main-body--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
+ --pf-v6-c-wizard__main-body--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
+ --pf-v6-c-wizard__main-body--PaddingInlineStart: var(--pf-t--global--spacer--lg);
+ --pf-v6-c-wizard__footer--BackgroundColor: var(--pf-t--global--background--color--primary--default);
+ --pf-v6-c-wizard__footer--ZIndex: var(--pf-t--global--z-index--xs);
+ --pf-v6-c-wizard__footer--PaddingBlockStart: var(--pf-t--global--spacer--lg);
+ --pf-v6-c-wizard__footer--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
+ --pf-v6-c-wizard__footer--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
+ --pf-v6-c-wizard__footer--PaddingInlineStart: var(--pf-t--global--spacer--lg);
+ --pf-v6-c-wizard__footer--BorderBlockStartWidth: var(--pf-t--global--border--width--divider--default);
+ --pf-v6-c-wizard__footer--BorderBlockStartColor: var(--pf-t--global--border--color--default);
+}
+@media screen and (min-width: 62rem) {
+ .pf-v6-c-wizard {
+ --pf-v6-c-wizard__nav--Width: var(--pf-v6-c-wizard__nav--lg--Width);
+ --pf-v6-c-wizard__nav--BoxShadow: none;
+ }
+}
+
+.pf-v6-c-wizard {
+ position: relative;
+ display: flex;
+ flex-direction: column;
+ height: var(--pf-v6-c-wizard--Height, var(--pf-v6-c-wizard--Height--base));
+}
+.pf-v6-c-modal-box .pf-v6-c-wizard {
+ flex: 1 1 var(--pf-v6-c-wizard--Height, var(--pf-v6-c-modal-box--c-wizard--Height--base));
+ min-height: 0;
+}
+.pf-v6-c-wizard > :not(.pf-v6-c-wizard__outer-wrap):not(.pf-v6-c-drawer) {
+ flex-shrink: 0;
+}
+.pf-v6-c-wizard.pf-m-finished {
+ --pf-v6-c-wizard__outer-wrap--lg--PaddingInlineStart: 0;
+}
+.pf-v6-c-wizard.pf-m-finished .pf-v6-c-wizard__nav,
+.pf-v6-c-wizard.pf-m-finished .pf-v6-c-wizard__footer,
+.pf-v6-c-wizard.pf-m-finished .pf-v6-c-wizard__toggle {
+ display: none;
+}
+
+.pf-v6-c-wizard__header {
+ position: relative;
+ z-index: var(--pf-v6-c-wizard__header--ZIndex);
+ padding-block-start: var(--pf-v6-c-wizard__header--PaddingBlockStart);
+ padding-block-end: var(--pf-v6-c-wizard__header--PaddingBlockEnd);
+ padding-inline-start: var(--pf-v6-c-wizard__header--PaddingInlineStart);
+ padding-inline-end: var(--pf-v6-c-wizard__header--PaddingInlineEnd);
+ background-color: var(--pf-v6-c-wizard__header--BackgroundColor);
+ border-block-end: var(--pf-v6-c-wizard__header--BorderBlockEndWidth) solid var(--pf-v6-c-wizard__header--BorderBlockEndColor);
+}
+.pf-v6-c-wizard__header .pf-v6-c-wizard__close {
+ position: absolute;
+ inset-block-start: var(--pf-v6-c-wizard__close--InsetBlockStart);
+ inset-inline-end: var(--pf-v6-c-wizard__close--InsetInlineEnd);
+}
+.pf-v6-c-wizard__header .pf-v6-c-wizard__close button {
+ font-size: var(--pf-v6-c-wizard__close--FontSize);
+}
+
+.pf-v6-c-wizard__title {
+ padding-inline-end: var(--pf-v6-c-wizard__title--PaddingInlineEnd);
+ word-wrap: break-word;
+}
+
+.pf-v6-c-wizard__title-text {
+ font-family: var(--pf-v6-c-wizard__title-text--FontFamily);
+ font-size: var(--pf-v6-c-wizard__title-text--FontSize);
+ font-weight: var(--pf-v6-c-wizard__title-text--FontWeight);
+ line-height: var(--pf-v6-c-wizard__title-text--LineHeight);
+ color: var(--pf-v6-c-wizard__title-text--Color);
+}
+
+.pf-v6-c-wizard__description {
+ display: none;
+ padding-block-start: var(--pf-v6-c-wizard__description--PaddingBlockStart);
+ color: var(--pf-v6-c-wizard__description--Color);
+}
+@media screen and (min-width: 62rem) {
+ .pf-v6-c-wizard__description {
+ display: block;
+ }
+}
+
+.pf-v6-c-wizard__toggle {
+ position: relative;
+ z-index: var(--pf-v6-c-wizard__toggle--ZIndex);
+ display: flex;
+ justify-content: space-between;
+ width: 100%;
+ padding-block-start: var(--pf-v6-c-wizard__toggle--PaddingBlockStart);
+ padding-block-end: var(--pf-v6-c-wizard__toggle--PaddingBlockEnd);
+ padding-inline-start: var(--pf-v6-c-wizard__toggle--PaddingInlineStart);
+ padding-inline-end: var(--pf-v6-c-wizard__toggle--PaddingInlineEnd);
+ background-color: var(--pf-v6-c-wizard__toggle--BackgroundColor);
+ border-block-start: 0;
+ border-block-end: var(--pf-v6-c-wizard__toggle--BorderBlockEndWidth) solid var(--pf-v6-c-wizard__toggle--BorderBlockEndColor);
+ border-inline-start: 0;
+ border-inline-end: 0;
+}
+@media screen and (min-width: 62rem) {
+ .pf-v6-c-wizard__toggle {
+ display: none;
+ }
+}
+.pf-v6-c-wizard__toggle.pf-m-expanded .pf-v6-c-wizard__toggle-icon {
+ transform: rotate(var(--pf-v6-c-wizard__toggle--m-expanded__toggle-icon--Rotate));
+}
+
+.pf-v6-c-wizard__toggle-list {
+ position: relative;
+ display: flex;
+ flex-wrap: wrap;
+ align-items: baseline;
+ margin-block-end: var(--pf-v6-c-wizard__toggle-list--MarginBlockEnd);
+ margin-inline-end: var(--pf-v6-c-wizard__toggle-list--MarginInlineEnd);
+ list-style: none;
+}
+
+.pf-v6-c-wizard__toggle-list-item {
+ display: flex;
+ gap: var(--pf-v6-c-wizard__toggle-list-item--Gap);
+ align-items: baseline;
+ margin-block-end: var(--pf-v6-c-wizard__toggle-list-item--MarginBlockEnd);
+ text-align: start;
+ word-break: break-word;
+}
+.pf-v6-c-wizard__toggle-list-item:not(:last-child) {
+ margin-inline-end: var(--pf-v6-c-wizard__toggle-list-item--not-last-child--MarginInlineEnd);
+}
+.pf-v6-c-wizard__toggle-list-item.pf-m-danger {
+ --pf-v6-c-wizard__toggle-status-icon--Color: var(--pf-v6-c-wizard__toggle-list-item--m-danger__status-icon--Color);
+}
+.pf-v6-c-wizard__toggle-list-item.pf-m-success {
+ --pf-v6-c-wizard__toggle-status-icon--Color: var(--pf-v6-c-wizard__toggle-list-item--m-success__status-icon--Color);
+}
+
+.pf-v6-c-wizard__toggle-num {
+ position: relative;
+ inset-block-start: var(--pf-v6-c-wizard__toggle-num--InsetBlockStart);
+}
+
+.pf-v6-c-wizard__toggle-status-icon {
+ position: relative;
+ inset-block-start: var(--pf-v6-c-wizard__toggle-status-icon--InsetBlockStart);
+ font-size: var(--pf-v6-c-wizard__toggle-status-icon--FontSize);
+ line-height: var(--pf-v6-c-wizard__nav-link-status-icon--LineHeight);
+ color: var(--pf-v6-c-wizard__toggle-status-icon--Color);
+}
+
+.pf-v6-c-wizard__toggle-separator {
+ color: var(--pf-v6-c-wizard__toggle-separator--Color);
+}
+:where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-wizard__toggle-separator {
+ scale: -1 1;
+}
+
+.pf-v6-c-wizard__toggle-icon {
+ line-height: var(--pf-v6-c-wizard__toggle-icon--LineHeight);
+}
+
+.pf-v6-c-wizard__outer-wrap {
+ position: relative;
+ display: flex;
+ flex-direction: column;
+ flex-grow: 1;
+ min-height: var(--pf-v6-c-wizard__outer-wrap--MinHeight);
+ background-color: var(--pf-v6-c-wizard__outer-wrap--BackgroundColor);
+}
+@media screen and (min-width: 62rem) {
+ .pf-v6-c-wizard__outer-wrap {
+ padding-inline-start: var(--pf-v6-c-wizard__outer-wrap--lg--PaddingInlineStart);
+ }
+}
+
+.pf-v6-c-wizard__inner-wrap {
+ position: relative;
+ display: flex;
+ flex-direction: column;
+ flex-grow: 1;
+ min-height: 0;
+}
+@media screen and (min-width: 62rem) {
+ .pf-v6-c-wizard__inner-wrap {
+ position: static;
+ }
+}
+
+.pf-v6-c-wizard__nav {
+ position: absolute;
+ inset-block-start: 0;
+ inset-inline-start: 0;
+ z-index: var(--pf-v6-c-wizard__nav--ZIndex);
+ display: none;
+ width: var(--pf-v6-c-wizard__nav--Width);
+ max-height: 100%;
+ overflow-y: auto;
+ -webkit-overflow-scrolling: touch;
+ background-color: var(--pf-v6-c-wizard__nav--BackgroundColor);
+ box-shadow: var(--pf-v6-c-wizard__nav--BoxShadow);
+}
+.pf-v6-c-wizard__nav.pf-m-expanded {
+ display: block;
+}
+@media screen and (min-width: 62rem) {
+ .pf-v6-c-wizard__nav {
+ display: block;
+ height: 100%;
+ border-inline-end: var(--pf-v6-c-wizard__nav--lg--BorderInlineEndWidth) solid var(--pf-v6-c-wizard__nav--lg--BorderInlineEndColor);
+ }
+}
+
+.pf-v6-c-wizard__nav-list {
+ padding-block-start: var(--pf-v6-c-wizard__nav-list--PaddingBlockStart);
+ padding-block-end: var(--pf-v6-c-wizard__nav-list--PaddingBlockEnd);
+ padding-inline-start: var(--pf-v6-c-wizard__nav-list--PaddingInlineStart);
+ padding-inline-end: var(--pf-v6-c-wizard__nav-list--PaddingInlineEnd);
+ list-style: none;
+ counter-reset: wizard-nav-count;
+}
+.pf-v6-c-wizard__nav-list .pf-v6-c-wizard__nav-list {
+ padding: 0;
+ margin-block-start: var(--pf-v6-c-wizard__nav-list--nested--MarginBlockStart);
+ margin-inline-start: var(--pf-v6-c-wizard__nav-list--nested--MarginInlineStart);
+}
+.pf-v6-c-wizard__nav-list .pf-v6-c-wizard__nav-list .pf-v6-c-wizard__nav-link::before {
+ content: none;
+}
+.pf-v6-c-wizard__nav-list .pf-v6-c-wizard__nav-list .pf-v6-c-wizard__nav-link.pf-m-current {
+ font-weight: var(--pf-v6-c-wizard__nav-list__nav-list__nav-link--m-current--FontWeight);
+}
+
+.pf-v6-c-wizard__nav-item + .pf-v6-c-wizard__nav-item {
+ margin-block-start: var(--pf-v6-c-wizard__nav-item--MarginBlockStart);
+}
+.pf-v6-c-wizard__nav-item.pf-m-expandable > .pf-v6-c-wizard__nav-link {
+ display: flex;
+}
+.pf-v6-c-wizard__nav-item.pf-m-expandable > .pf-v6-c-wizard__nav-list {
+ display: none;
+}
+.pf-v6-c-wizard__nav-item.pf-m-expanded > .pf-v6-c-wizard__nav-list {
+ display: block;
+}
+.pf-v6-c-wizard__nav-item.pf-m-expanded > .pf-v6-c-wizard__nav-link {
+ --pf-v6-c-wizard__nav-link-toggle-icon--Rotate: var(--pf-v6-c-wizard__nav-item--m-expanded__link-toggle-icon--Rotate);
+}
+
+.pf-v6-c-wizard__nav-link {
+ position: relative;
+ display: flex;
+ gap: var(--pf-v6-c-wizard__nav-link--Gap);
+ width: 100%;
+ padding-inline: 0;
+ color: var(--pf-v6-c-wizard__nav-link--Color);
+ text-align: start;
+ text-decoration-line: var(--pf-v6-c-wizard__nav-link--TextDecoration);
+ word-break: break-word;
+ counter-increment: wizard-nav-count;
+ background-color: transparent;
+ border: none;
+ border-radius: var(--pf-v6-c-wizard__nav-link--BorderRadius);
+}
+.pf-v6-c-wizard__toggle-num, .pf-v6-c-wizard__nav-link::before {
+ position: relative;
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ width: var(--pf-v6-c-wizard__nav-link--before--Width);
+ height: var(--pf-v6-c-wizard__nav-link--before--Height);
+ font-size: var(--pf-v6-c-wizard__nav-link--before--FontSize);
+ line-height: 1;
+ color: var(--pf-v6-c-wizard__nav-link--before--Color);
+ background-color: var(--pf-v6-c-wizard__nav-link--before--BackgroundColor);
+ border-radius: var(--pf-v6-c-wizard__nav-link--before--BorderRadius);
+}
+
+.pf-v6-c-wizard__nav-link::before {
+ inset-block-start: var(--pf-v6-c-wizard__nav-link--before--InsetBlockStart);
+ content: counter(wizard-nav-count);
+}
+.pf-v6-c-wizard__nav-link.pf-m-current {
+ --pf-v6-c-wizard__nav-link--Color: var(--pf-v6-c-wizard__nav-link--m-current--Color);
+ --pf-v6-c-wizard__nav-link-main--BackgroundColor: var(--pf-v6-c-wizard__nav-link--m-current--BackgroundColor);
+}
+.pf-v6-c-wizard__toggle-num, .pf-v6-c-wizard__nav-link.pf-m-current::before {
+ --pf-v6-c-wizard__nav-link--before--BackgroundColor: var(--pf-v6-c-wizard__nav-link--m-current--before--BackgroundColor);
+ --pf-v6-c-wizard__nav-link--before--Color: var(--pf-v6-c-wizard__nav-link--m-current--before--Color);
+}
+
+.pf-v6-c-wizard__nav-link:is(.pf-m-success, .pf-m-danger)::before {
+ display: none;
+}
+.pf-v6-c-wizard__nav-link.pf-m-success {
+ --pf-v6-c-wizard__nav-link-status-icon--Color: var(--pf-v6-c-wizard__nav-link--m-success__nav-link-status-icon--Color);
+}
+.pf-v6-c-wizard__nav-link.pf-m-danger {
+ --pf-v6-c-wizard__nav-link-status-icon--Color: var(--pf-v6-c-wizard__nav-link--m-danger__nav-link-status-icon--Color);
+}
+.pf-v6-c-wizard__nav-link:where(:hover, :focus) {
+ --pf-v6-c-wizard__nav-link--Color: var(--pf-v6-c-wizard__nav-link--hover--Color);
+ --pf-v6-c-wizard__nav-link-main--BackgroundColor: var(--pf-v6-c-wizard__nav-link--hover--BackgroundColor);
+}
+.pf-v6-c-wizard__nav-link:disabled, .pf-v6-c-wizard__nav-link.pf-m-disabled {
+ --pf-v6-c-wizard__nav-link--Color: var(--pf-v6-c-wizard__nav-link--m-disabled--Color);
+ --pf-v6-c-wizard__nav-link-main--BackgroundColor: var(--pf-v6-c-wizard__nav-link--m-disabled--BackgroundColor);
+ pointer-events: none;
+}
+.pf-v6-c-wizard__nav-link:disabled::before, .pf-v6-c-wizard__nav-link.pf-m-disabled::before {
+ --pf-v6-c-wizard__nav-link--before--BackgroundColor: var(--pf-v6-c-wizard__nav-link--m-disabled--before--BackgroundColor);
+ --pf-v6-c-wizard__nav-link--before--Color: var(--pf-v6-c-wizard__nav-link--m-disabled--before--Color);
+}
+
+.pf-v6-c-wizard__nav-link-text {
+ flex-grow: 1;
+}
+
+.pf-v6-c-wizard__nav-link-main {
+ display: flex;
+ justify-content: space-between;
+ padding-block-start: var(--pf-v6-c-wizard__nav-link-main--PaddingBlockStart);
+ padding-block-end: var(--pf-v6-c-wizard__nav-link-main--PaddingBlockEnd);
+ padding-inline-start: var(--pf-v6-c-wizard__nav-link-main--PaddingInlineStart);
+ padding-inline-end: var(--pf-v6-c-wizard__nav-link-main--PaddingInlineEnd);
+ background-color: var(--pf-v6-c-wizard__nav-link-main--BackgroundColor);
+ border: none;
+ border-radius: var(--pf-v6-c-wizard__nav-link-main--BorderRadius);
+}
+
+.pf-v6-c-wizard__nav-link-status-icon {
+ position: relative;
+ inset-block-start: var(--pf-v6-c-wizard__nav-link-status-icon--InsetBlockStart);
+ font-size: var(--pf-v6-c-wizard__nav-link-status-icon--FontSize);
+ color: var(--pf-v6-c-wizard__nav-link-status-icon--Color);
+}
+
+.pf-v6-c-wizard__nav-link-toggle {
+ padding-inline-start: var(--pf-v6-c-wizard__nav-link-toggle--PaddingInlineStart);
+ padding-inline-end: var(--pf-v6-c-wizard__nav-link-toggle--PaddingInlineEnd);
+ color: var(--pf-v6-c-wizard__nav-link-toggle--Color);
+}
+
+.pf-v6-c-wizard__nav-link-toggle-icon {
+ display: inline-block;
+ transition-timing-function: var(--pf-v6-c-wizard__nav-link-toggle-icon--TransitionTimingFunction);
+ transition-duration: var(--pf-v6-c-wizard__nav-link-toggle-icon--TransitionDuration);
+ transition-property: transform;
+ transform: rotate(var(--pf-v6-c-wizard__nav-link-toggle-icon--Rotate));
+}
+:where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-wizard__nav-link-toggle-icon {
+ scale: -1 1;
+}
+
+.pf-v6-c-wizard__main {
+ z-index: var(--pf-v6-c-wizard__main--ZIndex);
+ display: flex;
+ flex-direction: column;
+ flex-grow: 1;
+ overflow-x: hidden;
+ overflow-y: auto;
+ word-break: break-word;
+}
+
+.pf-v6-c-wizard__main-body {
+ padding-block-start: var(--pf-v6-c-wizard__main-body--PaddingBlockStart);
+ padding-block-end: var(--pf-v6-c-wizard__main-body--PaddingBlockEnd);
+ padding-inline-start: var(--pf-v6-c-wizard__main-body--PaddingInlineStart);
+ padding-inline-end: var(--pf-v6-c-wizard__main-body--PaddingInlineEnd);
+}
+.pf-v6-c-wizard__main-body.pf-m-no-padding {
+ padding: 0;
+}
+.pf-v6-c-wizard__main-body:last-child {
+ flex-grow: 1;
+}
+
+.pf-v6-c-wizard__footer {
+ position: relative;
+ z-index: var(--pf-v6-c-wizard__footer--ZIndex);
+ padding-block-start: var(--pf-v6-c-wizard__footer--PaddingBlockStart);
+ padding-block-end: var(--pf-v6-c-wizard__footer--PaddingBlockEnd);
+ padding-inline-start: var(--pf-v6-c-wizard__footer--PaddingInlineStart);
+ padding-inline-end: var(--pf-v6-c-wizard__footer--PaddingInlineEnd);
+ background-color: var(--pf-v6-c-wizard__footer--BackgroundColor);
+ border-block-start: var(--pf-v6-c-wizard__footer--BorderBlockStartWidth) solid var(--pf-v6-c-wizard__footer--BorderBlockStartColor);
+}
+
+.pf-v6-l-bullseye {
+ --pf-v6-l-bullseye--Padding: 0;
+}
+
+.pf-v6-l-bullseye {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ height: 100%;
+ padding: var(--pf-v6-l-bullseye--Padding);
+ margin: 0;
+}
+
+.pf-v6-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;
+ }
+}
+
+.pf-v6-l-gallery {
+ --pf-v6-l-gallery--m-gutter--GridGap: var(--pf-t--global--spacer--gutter--default);
+ --pf-v6-l-gallery--GridTemplateColumns--min: 250px;
+ --pf-v6-l-gallery--GridTemplateColumns--minmax--min: var(--pf-v6-l-gallery--GridTemplateColumns--min);
+ --pf-v6-l-gallery--GridTemplateColumns--max: 1fr;
+ --pf-v6-l-gallery--GridTemplateColumns--minmax--max: var(--pf-v6-l-gallery--GridTemplateColumns--max);
+ --pf-v6-l-gallery--GridTemplateColumns: repeat(auto-fill, minmax(var(--pf-v6-l-gallery--GridTemplateColumns--minmax--min), var(--pf-v6-l-gallery--GridTemplateColumns--minmax--max)));
+ --pf-v6-l-gallery--GridTemplateRows: auto;
+}
+
+.pf-v6-l-gallery {
+ display: grid;
+ grid-template-rows: var(--pf-v6-l-gallery--GridTemplateRows);
+ grid-template-columns: var(--pf-v6-l-gallery--GridTemplateColumns);
+ --pf-v6-l-gallery--GridTemplateColumns--minmax--min: var(--pf-v6-l-gallery--GridTemplateColumns--min);
+ --pf-v6-l-gallery--GridTemplateColumns--minmax--max: var(--pf-v6-l-gallery--GridTemplateColumns--max);
+}
+.pf-v6-l-gallery.pf-m-gutter {
+ grid-gap: var(--pf-v6-l-gallery--m-gutter--GridGap);
+}
+@media (min-width: 36rem) {
+ .pf-v6-l-gallery {
+ --pf-v6-l-gallery--GridTemplateColumns--minmax--min: var(--pf-v6-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-v6-l-gallery--GridTemplateColumns--min));
+ }
+}
+@media (min-width: 48rem) {
+ .pf-v6-l-gallery {
+ --pf-v6-l-gallery--GridTemplateColumns--minmax--min: var(--pf-v6-l-gallery--GridTemplateColumns--min-on-md, var(--pf-v6-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-v6-l-gallery--GridTemplateColumns--min)));
+ }
+}
+@media (min-width: 62rem) {
+ .pf-v6-l-gallery {
+ --pf-v6-l-gallery--GridTemplateColumns--minmax--min: var(--pf-v6-l-gallery--GridTemplateColumns--min-on-lg, var(--pf-v6-l-gallery--GridTemplateColumns--min-on-md, var(--pf-v6-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-v6-l-gallery--GridTemplateColumns--min))));
+ }
+}
+@media (min-width: 75rem) {
+ .pf-v6-l-gallery {
+ --pf-v6-l-gallery--GridTemplateColumns--minmax--min: var(--pf-v6-l-gallery--GridTemplateColumns--min-on-xl, var(--pf-v6-l-gallery--GridTemplateColumns--min-on-lg, var(--pf-v6-l-gallery--GridTemplateColumns--min-on-md, var(--pf-v6-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-v6-l-gallery--GridTemplateColumns--min)))));
+ }
+}
+@media (min-width: 90.625rem) {
+ .pf-v6-l-gallery {
+ --pf-v6-l-gallery--GridTemplateColumns--minmax--min: var(--pf-v6-l-gallery--GridTemplateColumns--min-on-2xl, var(--pf-v6-l-gallery--GridTemplateColumns--min-on-xl, var(--pf-v6-l-gallery--GridTemplateColumns--min-on-lg, var(--pf-v6-l-gallery--GridTemplateColumns--min-on-md, var(--pf-v6-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-v6-l-gallery--GridTemplateColumns--min))))));
+ }
+}
+@media (min-width: 36rem) {
+ .pf-v6-l-gallery {
+ --pf-v6-l-gallery--GridTemplateColumns--minmax--max: var(--pf-v6-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-v6-l-gallery--GridTemplateColumns--max));
+ }
+}
+@media (min-width: 48rem) {
+ .pf-v6-l-gallery {
+ --pf-v6-l-gallery--GridTemplateColumns--minmax--max: var(--pf-v6-l-gallery--GridTemplateColumns--max-on-md, var(--pf-v6-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-v6-l-gallery--GridTemplateColumns--max)));
+ }
+}
+@media (min-width: 62rem) {
+ .pf-v6-l-gallery {
+ --pf-v6-l-gallery--GridTemplateColumns--minmax--max: var(--pf-v6-l-gallery--GridTemplateColumns--max-on-lg, var(--pf-v6-l-gallery--GridTemplateColumns--max-on-md, var(--pf-v6-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-v6-l-gallery--GridTemplateColumns--max))));
+ }
+}
+@media (min-width: 75rem) {
+ .pf-v6-l-gallery {
+ --pf-v6-l-gallery--GridTemplateColumns--minmax--max: var(--pf-v6-l-gallery--GridTemplateColumns--max-on-xl, var(--pf-v6-l-gallery--GridTemplateColumns--max-on-lg, var(--pf-v6-l-gallery--GridTemplateColumns--max-on-md, var(--pf-v6-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-v6-l-gallery--GridTemplateColumns--max)))));
+ }
+}
+@media (min-width: 90.625rem) {
+ .pf-v6-l-gallery {
+ --pf-v6-l-gallery--GridTemplateColumns--minmax--max: var(--pf-v6-l-gallery--GridTemplateColumns--max-on-2xl, var(--pf-v6-l-gallery--GridTemplateColumns--max-on-xl, var(--pf-v6-l-gallery--GridTemplateColumns--max-on-lg, var(--pf-v6-l-gallery--GridTemplateColumns--max-on-md, var(--pf-v6-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-v6-l-gallery--GridTemplateColumns--max))))));
+ }
+}
+
+.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 {
+ grid-gap: var(--pf-v6-l-grid--m-gutter--GridGap);
+}
+
+.pf-v6-l-level {
+ --pf-v6-l-level--m-gutter--Gap: var(--pf-t--global--spacer--gutter--default);
+}
+
+.pf-v6-l-level {
+ display: flex;
+ flex-wrap: wrap;
+ align-items: center;
+ justify-content: space-between;
+}
+.pf-v6-l-level.pf-m-gutter {
+ gap: var(--pf-v6-l-level--m-gutter--Gap);
+}
+
+.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);
+}
+
+.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);
+}
\ No newline at end of file
diff --git a/packages/react-docs/patternfly-docs/tabs.css b/packages/react-docs/patternfly-docs/tabs.css
new file mode 100644
index 00000000000..0590e12033d
--- /dev/null
+++ b/packages/react-docs/patternfly-docs/tabs.css
@@ -0,0 +1,891 @@
+@property --pf-v6-c-tabs--link-accent--length {
+ syntax: "";
+ inherits: true;
+ initial-value: 0px;
+}
+@property --pf-v6-c-tabs--link-accent--start {
+ syntax: "";
+ inherits: true;
+ initial-value: 0px;
+}
+.pf-v6-c-tabs {
+ --pf-v6-c-tabs--inset: 0;
+ --pf-v6-c-tabs--Width: auto;
+ --pf-v6-c-tabs--before--BorderColor: var(--pf-t--global--border--color--default);
+ --pf-v6-c-tabs--before--border-width--base: var(--pf-t--global--border--width--regular);
+ --pf-v6-c-tabs--before--BorderBlockStartWidth: 0;
+ --pf-v6-c-tabs--before--BorderInlineEndWidth: 0;
+ --pf-v6-c-tabs--before--BorderBlockEndWidth: var(--pf-v6-c-tabs--before--border-width--base);
+ --pf-v6-c-tabs--before--BorderInlineStartWidth: 0;
+ --pf-v6-c-tabs--m-vertical--inset: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-tabs--m-page-insets--inset: var(--pf-t--global--spacer--md);
+ --pf-v6-c-tabs--m-vertical--Width: 100%;
+ --pf-v6-c-tabs--m-vertical--MaxWidth: 15.625rem;
+ --pf-v6-c-tabs--m-vertical--m-box--inset: var(--pf-t--global--spacer--md);
+ --pf-v6-c-tabs--m-vertical__list--before--BorderColor: var(--pf-v6-c-tabs--before--BorderColor);
+ --pf-v6-c-tabs--m-vertical__list--before--BorderBlockStartWidth: 0;
+ --pf-v6-c-tabs--m-vertical__list--before--BorderInlineEndWidth: 0;
+ --pf-v6-c-tabs--m-vertical__list--before--BorderBlockEndWidth: 0;
+ --pf-v6-c-tabs--m-vertical__list--before--BorderInlineStartWidth: var(--pf-v6-c-tabs--before--border-width--base);
+ --pf-v6-c-tabs__list--Display: flex;
+ --pf-v6-c-tabs__item--BackgroundColor: transparent;
+ --pf-v6-c-tabs__item--PaddingBlockStart: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-tabs__item--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-tabs__item--PaddingInlineStart: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-tabs__item--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-tabs__item--ColumnGap: var(--pf-t--global--spacer--xs);
+ --pf-v6-c-tabs--m-vertical__item--PaddingInlineStart: var(--pf-t--global--spacer--md);
+ --pf-v6-c-tabs--m-vertical__item--PaddingInlineEnd: var(--pf-t--global--spacer--md);
+ --pf-v6-c-tabs__item--m-current--BackgroundColor: transparent;
+ --pf-v6-c-tabs--m-box__item--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
+ --pf-v6-c-tabs--m-box__item--m-current--BackgroundColor: var(--pf-t--global--background--color--primary--default);
+ --pf-v6-c-tabs--m-box--m-secondary__item--BackgroundColor: var(--pf-t--global--background--color--primary--default);
+ --pf-v6-c-tabs--m-box--m-secondary__item--m-current--BackgroundColor: var(--pf-t--global--background--color--primary--clicked);
+ --pf-v6-c-tabs__item--m-action--before--ZIndex: var(--pf-t--global--z-index--sm);
+ --pf-v6-c-tabs__link--Color: var(--pf-t--global--text--color--subtle);
+ --pf-v6-c-tabs__link--FontSize: var(--pf-t--global--font--size--sm);
+ --pf-v6-c-tabs__link--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
+ --pf-v6-c-tabs__link--BorderRadius: var(--pf-t--global--border--radius--small);
+ --pf-v6-c-tabs__link--PaddingBlockStart: var(--pf-t--global--spacer--xs);
+ --pf-v6-c-tabs__link--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-tabs__link--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
+ --pf-v6-c-tabs__link--PaddingInlineStart: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-tabs__link--ColumnGap: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-tabs__link--disabled--Color: var(--pf-t--global--text--color--on-disabled);
+ --pf-v6-c-tabs__link--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
+ --pf-v6-c-tabs__link--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
+ --pf-v6-c-tabs__item--m-current__link--Color: var(--pf-t--global--text--color--regular);
+ --pf-v6-c-tabs__item--m-current__link--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
+ --pf-v6-c-tabs--m-vertical__link--PaddingInlineStart: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-tabs--m-vertical__link--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-tabs--m-box__link--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
+ --pf-v6-c-tabs--m-box__link--disabled--Color: var(--pf-t--global--text--color--on-disabled);
+ --pf-v6-c-tabs--m-box__link--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
+ --pf-v6-c-tabs--m-box__link--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
+ --pf-v6-c-tabs--m-box__item--m-current__link--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
+ --pf-v6-c-tabs--m-box--m-secondary__link--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
+ --pf-v6-c-tabs--m-box--m-secondary__link--disabled--Color: var(--pf-t--global--text--color--on-disabled);
+ --pf-v6-c-tabs--m-box--m-secondary__link--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
+ --pf-v6-c-tabs--m-box--m-secondary__link--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
+ --pf-v6-c-tabs--m-box--m-secondary__item--m-current__link--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
+ --pf-v6-c-tabs--m-subtab__link--FontSize: var(--pf-t--global--font--size--xs);
+ --pf-v6-c-tabs__link--TransitionDuration--background-color: var(--pf-t--global--motion--duration--fade--short);
+ --pf-v6-c-tabs__link--TransitionTimingFunction--background-color: var(--pf-t--global--motion--timing-function--default);
+ --pf-v6-c-tabs__link--before--border-color--base: var(--pf-t--global--border--color--default);
+ --pf-v6-c-tabs__link--before--border-width--base: var(--pf-t--global--border--width--regular);
+ --pf-v6-c-tabs__link--before--BorderBlockStartColor: var(--pf-v6-c-tabs__link--before--border-color--base);
+ --pf-v6-c-tabs__link--before--BorderInlineEndColor: var(--pf-v6-c-tabs__link--before--border-color--base);
+ --pf-v6-c-tabs__link--before--BorderBlockEndColor: var(--pf-v6-c-tabs__link--before--border-color--base);
+ --pf-v6-c-tabs__link--before--BorderInlineStartColor: var(--pf-v6-c-tabs__link--before--border-color--base);
+ --pf-v6-c-tabs__link--before--BorderBlockStartWidth: 0;
+ --pf-v6-c-tabs__link--before--BorderInlineEndWidth: 0;
+ --pf-v6-c-tabs__link--before--BorderBlockEndWidth: 0;
+ --pf-v6-c-tabs__link--before--BorderInlineStartWidth: 0;
+ --pf-v6-c-tabs__link--before--InsetInlineStart: calc(var(--pf-v6-c-tabs__link--before--border-width--base) * -1);
+ --pf-v6-c-tabs__link--disabled--before--BorderInlineEndWidth: 0;
+ --pf-v6-c-tabs__link--disabled--before--BorderBlockEndWidth: var(--pf-v6-c-tabs--before--border-width--base);
+ --pf-v6-c-tabs__link--disabled--before--BorderInlineStartWidth: 0;
+ --pf-v6-c-tabs__link--after--InsetBlockStart: auto;
+ --pf-v6-c-tabs__link--after--InsetInlineEnd: 0;
+ --pf-v6-c-tabs__link--after--InsetBlockEnd: 0;
+ --pf-v6-c-tabs__link--after--BorderColor: var(--pf-t--global--border--color--default);
+ --pf-v6-c-tabs__link--after--BorderWidth: 0;
+ --pf-v6-c-tabs__link--after--BorderBlockStartWidth: 0;
+ --pf-v6-c-tabs__link--after--BorderInlineEndWidth: 0;
+ --pf-v6-c-tabs__link--after--BorderInlineStartWidth: 0;
+ --pf-v6-c-tabs__item--m-current__link--after--BorderColor: var(--pf-t--global--border--color--clicked);
+ --pf-v6-c-tabs__item--m-current__link--after--BorderWidth: var(--pf-t--global--border--width--extra-strong);
+ --pf-v6-c-tabs--link-accent--start: 0;
+ --pf-v6-c-tabs--link-accent--length: 0;
+ --pf-v6-c-tabs--link-accent--color: var(--pf-v6-c-tabs__item--m-current__link--after--BorderColor);
+ --pf-v6-c-tabs--link-accent--border-size: var(--pf-v6-c-tabs__item--m-current__link--after--BorderWidth);
+ --pf-v6-c-tabs--link-accent--TransitionDuration: var(--pf-t--global--motion--duration--md);
+ --pf-v6-c-tabs--link-accent--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate);
+ --pf-v6-c-tabs--link-accent--InsetBlockStart: auto;
+ --pf-v6-c-tabs--link-accent--InsetBlockEnd: 0;
+ --pf-v6-c-tabs--link-accent--InsetInlineStart: 0;
+ --pf-v6-c-tabs--link-accent--Width: initial;
+ --pf-v6-c-tabs--link-accent--Height: 0;
+ --pf-v6-c-tabs--link-accent--BorderBlockEndWidth: var(--pf-v6-c-tabs--link-accent--border-size);
+ --pf-v6-c-tabs--link-accent--BorderInlineStartWidth: 0;
+ --pf-v6-c-tabs--link-accent--TranslateX: var(--pf-v6-c-tabs--link-accent--start);
+ --pf-v6-c-tabs--link-accent--TranslateY: 0;
+ --pf-v6-c-tabs--link-accent--TransformOrigin: 0 center;
+ --pf-v6-c-tabs--m-vertical--link-accent--InsetBlockStart: 0;
+ --pf-v6-c-tabs--m-vertical--link-accent--InsetBlockEnd: auto;
+ --pf-v6-c-tabs--m-vertical--link-accent--BorderBlockEndWidth: 0;
+ --pf-v6-c-tabs--m-vertical--link-accent--BorderInlineStartWidth: var(--pf-v6-c-tabs--link-accent--border-size);
+ --pf-v6-c-tabs--m-vertical--link-accent--TranslateX: 0;
+ --pf-v6-c-tabs--m-vertical--link-accent--TranslateY: var(--pf-v6-c-tabs--link-accent--start);
+ --pf-v6-c-tabs--m-vertical--link-accent--TransformOrigin: center 0;
+ --pf-v6-c-tabs__scroll-button--PaddingBlockStart: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-tabs__scroll-button--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-tabs__scroll-button--PaddingInlineStart: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-tabs__scroll-button--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-tabs__scroll-button--Width: var(--pf-t--global--spacer--2xl);
+ --pf-v6-c-tabs__scroll-button--TransitionDuration--margin: .125s;
+ --pf-v6-c-tabs__scroll-button--TransitionDuration--transform: .125s;
+ --pf-v6-c-tabs__scroll-button--TransitionDuration--opacity: .125s;
+ --pf-v6-c-tabs__scroll-button--before--BorderColor: var(--pf-v6-c-tabs--before--BorderColor);
+ --pf-v6-c-tabs__scroll-button--before--border-width--base: var(--pf-t--global--border--width--regular);
+ --pf-v6-c-tabs__scroll-button--before--BorderInlineEndWidth: 0;
+ --pf-v6-c-tabs__scroll-button--before--BorderBlockEndWidth: var(--pf-v6-c-tabs__scroll-button--before--border-width--base);
+ --pf-v6-c-tabs__scroll-button--before--BorderInlineStartWidth: 0;
+ --pf-v6-c-tabs__list--ScrollSnapTypeAxis: x;
+ --pf-v6-c-tabs__list--ScrollSnapTypeStrictness: proximity;
+ --pf-v6-c-tabs__list--ScrollSnapType: var(--pf-v6-c-tabs__list--ScrollSnapTypeAxis) var(--pf-v6-c-tabs__list--ScrollSnapTypeStrictness);
+ --pf-v6-c-tabs__item--ScrollSnapAlign: end;
+ --pf-v6-c-tabs--m-vertical__list--ScrollSnapTypeAxis: y;
+ --pf-v6-c-tabs__toggle--Display: flex;
+ --pf-v6-c-tabs__toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
+ --pf-v6-c-tabs__toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
+ --pf-v6-c-tabs__toggle-icon--Transition: transform var(--pf-v6-c-tabs__toggle-icon--TransitionDuration) var(--pf-v6-c-tabs__toggle-icon--TransitionTimingFunction);
+ --pf-v6-c-tabs__toggle-icon--Rotate: 0;
+ --pf-v6-c-tabs--m-expanded__toggle-icon--Rotate: 90deg;
+ --pf-v6-c-tabs--m-expandable--RowGap: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-tabs--m-expandable--PaddingBlockStart: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-tabs--m-expandable--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-tabs--m-expandable--PaddingInlineStart: var(--pf-t--global--spacer--md);
+ --pf-v6-c-tabs--m-expandable--PaddingInlineEnd: var(--pf-t--global--spacer--md);
+ --pf-v6-c-tabs__item-action--c-button--FontSize: var(--pf-t--global--font--size--sm);
+ --pf-v6-c-tabs--m-subtab__item-action--c-button--FontSize: var(--pf-t--global--font--size--xs);
+ --pf-v6-c-tabs__item-action-icon--MarginBlockStart: 0.125rem;
+ --pf-v6-c-tabs__add--before--BorderColor: var(--pf-v6-c-tabs__link--before--border-color--base);
+ --pf-v6-c-tabs__add--before--BorderInlineStartWidth: var(--pf-v6-c-tabs__link--before--border-width--base);
+ --pf-v6-c-tabs__add--c-button--FontSize: var(--pf-t--global--font--size--sm);
+ --pf-v6-c-tabs--m-subtab__add--c-button--FontSize: var(--pf-t--global--font--size--xs);
+ --pf-v6-c-tabs__add--PaddingBlockStart: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-tabs__add--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-tabs__add--PaddingInlineStart: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-tabs__add--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-tabs__link-toggle-icon--Color: var(--pf-t--global--icon--color--regular);
+ --pf-v6-c-tabs__link-toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
+ --pf-v6-c-tabs__link-toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
+ --pf-v6-c-tabs__link-toggle-icon--Transition: transform var(--pf-v6-c-tabs__link-toggle-icon--TransitionDuration) var(--pf-v6-c-tabs__link-toggle-icon--TransitionTimingFunction);
+ --pf-v6-c-tabs__link-toggle-icon--Rotate: 0;
+ --pf-v6-c-tabs__link-toggle-icon--FontSize: var(--pf-t--global--font--size--sm);
+ --pf-v6-c-tabs__link--m-expanded__toggle-icon--Rotate: 90deg;
+}
+
+.pf-v6-c-tabs {
+ position: relative;
+ display: flex;
+ width: var(--pf-v6-c-tabs--Width);
+ padding-inline-start: var(--pf-v6-c-tabs--inset);
+ padding-inline-end: var(--pf-v6-c-tabs--inset);
+ overflow: hidden;
+}
+.pf-v6-c-tabs::before {
+ position: absolute;
+ inset-block-end: 0;
+ inset-inline-start: 0;
+ inset-inline-end: 0;
+ border: solid var(--pf-v6-c-tabs--before--BorderColor);
+ border-block-start-width: var(--pf-v6-c-tabs--before--BorderBlockStartWidth);
+ border-block-end-width: var(--pf-v6-c-tabs--before--BorderBlockEndWidth);
+ border-inline-start-width: var(--pf-v6-c-tabs--before--BorderInlineStartWidth);
+ border-inline-end-width: var(--pf-v6-c-tabs--before--BorderInlineEndWidth);
+}
+.pf-v6-c-tabs.pf-m-fill .pf-v6-c-tabs__list {
+ flex-basis: 100%;
+}
+.pf-v6-c-tabs.pf-m-fill .pf-v6-c-tabs__item {
+ flex-grow: 1;
+}
+.pf-v6-c-tabs.pf-m-fill .pf-v6-c-tabs__item:first-child {
+ --pf-v6-c-tabs--m-box__item--m-current--first-child__link--before--BorderInlineStartWidth: 0;
+}
+.pf-v6-c-tabs.pf-m-fill .pf-v6-c-tabs__item:last-child {
+ --pf-v6-c-tabs--m-box__item--m-current--last-child__link--before--BorderInlineEndWidth: 0;
+}
+.pf-v6-c-tabs.pf-m-fill .pf-v6-c-tabs__link {
+ flex-basis: 100%;
+ justify-content: center;
+}
+.pf-v6-c-tabs.pf-m-scrollable .pf-v6-c-tabs__scroll-button {
+ opacity: 1;
+}
+.pf-v6-c-tabs.pf-m-scrollable .pf-v6-c-tabs__scroll-button:nth-of-type(1) {
+ margin-inline-end: 0;
+ transform: translateX(0);
+}
+.pf-v6-c-tabs.pf-m-scrollable .pf-v6-c-tabs__scroll-button:nth-of-type(2) {
+ margin-inline-start: 0;
+ transform: translateX(0);
+}
+.pf-v6-c-tabs.pf-m-no-border-bottom {
+ --pf-v6-c-tabs--before--BorderBlockEndWidth: 0;
+ --pf-v6-c-tabs__link--disabled--before--BorderBlockEndWidth: 0;
+}
+.pf-v6-c-tabs.pf-m-box .pf-v6-c-tabs__link, .pf-v6-c-tabs.pf-m-vertical .pf-v6-c-tabs__link {
+ --pf-v6-c-tabs__link--after--BorderBlockEndWidth: 0;
+}
+.pf-v6-c-tabs.pf-m-box {
+ --pf-v6-c-tabs__item--BackgroundColor: var(--pf-v6-c-tabs--m-box__item--BackgroundColor);
+ --pf-v6-c-tabs__item--m-current--BackgroundColor: var(--pf-v6-c-tabs--m-box__item--m-current--BackgroundColor);
+ --pf-v6-c-tabs__link--BackgroundColor: var(--pf-v6-c-tabs--m-box__link--BackgroundColor);
+ --pf-v6-c-tabs__link--disabled--Color: var(--pf-v6-c-tabs--m-box__link--disabled--Color);
+ --pf-v6-c-tabs__link--disabled--BackgroundColor: var(--pf-v6-c-tabs--m-box__link--disabled--BackgroundColor);
+ --pf-v6-c-tabs__link--hover--BackgroundColor: var(--pf-v6-c-tabs--m-box__link--hover--BackgroundColor);
+ --pf-v6-c-tabs__item--m-current__link--BackgroundColor: var(--pf-v6-c-tabs--m-box__item--m-current__link--BackgroundColor);
+ --pf-v6-c-tabs__link--before--BorderBlockEndWidth: var(--pf-v6-c-tabs__link--before--border-width--base);
+ --pf-v6-c-tabs__link--after--InsetBlockStart: 0;
+ --pf-v6-c-tabs__link--after--InsetBlockEnd: auto;
+}
+.pf-v6-c-tabs.pf-m-box .pf-v6-c-tabs__link {
+ --pf-v6-c-tabs__link--after--BorderBlockStartWidth: var(--pf-v6-c-tabs__link--after--BorderWidth);
+}
+.pf-v6-c-tabs.pf-m-box .pf-v6-c-tabs__item:last-child {
+ --pf-v6-c-tabs__link--before--BorderInlineEndWidth: 0;
+}
+.pf-v6-c-tabs.pf-m-box .pf-v6-c-tabs__item.pf-m-current {
+ --pf-v6-c-tabs__link--BackgroundColor: var(--pf-v6-c-tabs__item--m-current__link--BackgroundColor);
+ --pf-v6-c-tabs__link--before--BorderBlockEndColor: var(--pf-v6-c-tabs__link--BackgroundColor);
+}
+.pf-v6-c-tabs.pf-m-box.pf-m-scrollable .pf-v6-c-tabs__item.pf-m-current:first-child .pf-v6-c-tabs__link::before {
+ inset-inline-start: calc(var(--pf-v6-c-tabs__link--before--border-width--base) * -1);
+}
+.pf-v6-c-tabs.pf-m-box.pf-m-scrollable .pf-v6-c-tabs__scroll-button:nth-of-type(2)::before {
+ inset-inline-start: calc(var(--pf-v6-c-tabs__link--before--border-width--base) * -1);
+}
+.pf-v6-c-tabs.pf-m-box .pf-v6-c-tabs__item.pf-m-current + .pf-v6-c-tabs__item {
+ --pf-v6-c-tabs__link--before--InsetInlineStart: 0;
+}
+.pf-v6-c-tabs.pf-m-box.pf-m-secondary {
+ --pf-v6-c-tabs__item--BackgroundColor: var(--pf-v6-c-tabs--m-box--m-secondary__item--BackgroundColor);
+ --pf-v6-c-tabs__item--m-current--BackgroundColor: var(--pf-v6-c-tabs--m-box--m-secondary__item--m-current--BackgroundColor);
+ --pf-v6-c-tabs__link--BackgroundColor: var(--pf-v6-c-tabs--m-box--m-secondary__link--BackgroundColor);
+ --pf-v6-c-tabs__link--disabled--Color: var(--pf-v6-c-tabs--m-box--m-secondary__link--disabled--Color);
+ --pf-v6-c-tabs__link--disabled--BackgroundColor: var(--pf-v6-c-tabs--m-box--m-secondary__link--disabled--BackgroundColor);
+ --pf-v6-c-tabs__link--hover--BackgroundColor: var(--pf-v6-c-tabs--m-box--m-secondary__link--hover--BackgroundColor);
+ --pf-v6-c-tabs__item--m-current__link--BackgroundColor: var(--pf-v6-c-tabs--m-box--m-secondary__item--m-current__link--BackgroundColor);
+}
+.pf-v6-c-tabs.pf-m-vertical {
+ --pf-v6-c-tabs--Width: var(--pf-v6-c-tabs--m-vertical--Width);
+ --pf-v6-c-tabs--inset: var(--pf-v6-c-tabs--m-vertical--inset);
+ --pf-v6-c-tabs--before--BorderBlockEndWidth: 0;
+ --pf-v6-c-tabs__item--PaddingInlineStart: var(--pf-v6-c-tabs--m-vertical__item--PaddingInlineStart);
+ --pf-v6-c-tabs__item--PaddingInlineEnd: var(--pf-v6-c-tabs--m-vertical__item--PaddingInlineEnd);
+ --pf-v6-c-tabs__link--PaddingInlineStart: var(--pf-v6-c-tabs--m-vertical__link--PaddingInlineStart);
+ --pf-v6-c-tabs__link--PaddingInlineEnd: var(--pf-v6-c-tabs--m-vertical__link--PaddingInlineEnd);
+ --pf-v6-c-tabs__link--before--InsetInlineStart: 0;
+ --pf-v6-c-tabs__link--disabled--before--BorderBlockEndWidth: 0;
+ --pf-v6-c-tabs__link--disabled--before--BorderInlineStartWidth: var(--pf-v6-c-tabs--before--border-width--base);
+ --pf-v6-c-tabs__link--after--InsetBlockStart: 0;
+ --pf-v6-c-tabs__link--after--InsetBlockEnd: 0;
+ --pf-v6-c-tabs__link--after--InsetInlineEnd: auto;
+ --pf-v6-c-tabs__list--ScrollSnapTypeAxis: var(--pf-v6-c-tabs--m-vertical__list--ScrollSnapTypeAxis);
+ --pf-v6-c-tabs--link-accent--InsetBlockStart: var(--pf-v6-c-tabs--m-vertical--link-accent--InsetBlockStart);
+ --pf-v6-c-tabs--link-accent--InsetBlockEnd: var(--pf-v6-c-tabs--m-vertical--link-accent--InsetBlockEnd);
+ --pf-v6-c-tabs--link-accent--Width: var(--pf-v6-c-tabs--m-vertical--link-accent--Width);
+ --pf-v6-c-tabs--link-accent--Height: var(--pf-v6-c-tabs--m-vertical--link-accent--Height);
+ --pf-v6-c-tabs--link-accent--BorderBlockEndWidth: var(--pf-v6-c-tabs--m-vertical--link-accent--BorderBlockEndWidth);
+ --pf-v6-c-tabs--link-accent--BorderInlineStartWidth: var(--pf-v6-c-tabs--m-vertical--link-accent--BorderInlineStartWidth);
+ --pf-v6-c-tabs--link-accent--TranslateX: var(--pf-v6-c-tabs--m-vertical--link-accent--TranslateX);
+ --pf-v6-c-tabs--link-accent--TranslateY: var(--pf-v6-c-tabs--m-vertical--link-accent--TranslateY);
+ --pf-v6-c-tabs--link-accent--TransformOrigin: var(--pf-v6-c-tabs--m-vertical--link-accent--TransformOrigin);
+ display: inline-flex;
+ flex-direction: column;
+ height: 100%;
+ padding: 0;
+ overflow: visible;
+}
+.pf-v6-c-tabs.pf-m-vertical .pf-v6-c-tabs__list {
+ position: relative;
+ flex-direction: column;
+ flex-grow: 1;
+ max-width: var(--pf-v6-c-tabs--m-vertical--MaxWidth);
+}
+.pf-v6-c-tabs.pf-m-vertical .pf-v6-c-tabs__list::before {
+ position: absolute;
+ inset-inline-end: auto;
+ border: solid var(--pf-v6-c-tabs--m-vertical__list--before--BorderColor);
+ border-block-start-width: var(--pf-v6-c-tabs--m-vertical__list--before--BorderBlockStartWidth);
+ border-block-end-width: var(--pf-v6-c-tabs--m-vertical__list--before--BorderBlockEndWidth);
+ border-inline-start-width: var(--pf-v6-c-tabs--m-vertical__list--before--BorderInlineStartWidth);
+ border-inline-end-width: var(--pf-v6-c-tabs--m-vertical__list--before--BorderInlineEndWidth);
+}
+.pf-v6-c-tabs.pf-m-vertical .pf-v6-c-tabs__item:first-child {
+ margin-block-start: var(--pf-v6-c-tabs--inset);
+}
+.pf-v6-c-tabs.pf-m-vertical .pf-v6-c-tabs__item:last-child {
+ margin-block-end: var(--pf-v6-c-tabs--inset);
+}
+.pf-v6-c-tabs.pf-m-vertical .pf-v6-c-tabs__link {
+ --pf-v6-c-tabs__link--after--BorderBlockStartWidth: 0;
+ --pf-v6-c-tabs__link--after--BorderInlineStartWidth: var(--pf-v6-c-tabs__link--after--BorderWidth);
+ max-width: 100%;
+ text-align: start;
+}
+.pf-v6-c-tabs.pf-m-vertical .pf-v6-c-tabs__item-text {
+ max-width: 100%;
+ overflow-wrap: break-word;
+}
+.pf-v6-c-tabs.pf-m-vertical.pf-m-expandable {
+ --pf-v6-c-tabs__list--Display: none;
+ --pf-v6-c-tabs__toggle--Display: flex;
+}
+.pf-v6-c-tabs.pf-m-vertical.pf-m-non-expandable {
+ --pf-v6-c-tabs__list--Display: flex;
+ --pf-v6-c-tabs__toggle--Display: none;
+}
+@media (min-width: 36rem) {
+ .pf-v6-c-tabs.pf-m-vertical.pf-m-expandable-on-sm {
+ --pf-v6-c-tabs__list--Display: none;
+ --pf-v6-c-tabs__toggle--Display: flex;
+ }
+ .pf-v6-c-tabs.pf-m-vertical.pf-m-non-expandable-on-sm {
+ --pf-v6-c-tabs__list--Display: flex;
+ --pf-v6-c-tabs__toggle--Display: none;
+ }
+}
+@media (min-width: 48rem) {
+ .pf-v6-c-tabs.pf-m-vertical.pf-m-expandable-on-md {
+ --pf-v6-c-tabs__list--Display: none;
+ --pf-v6-c-tabs__toggle--Display: flex;
+ }
+ .pf-v6-c-tabs.pf-m-vertical.pf-m-non-expandable-on-md {
+ --pf-v6-c-tabs__list--Display: flex;
+ --pf-v6-c-tabs__toggle--Display: none;
+ }
+}
+@media (min-width: 62rem) {
+ .pf-v6-c-tabs.pf-m-vertical.pf-m-expandable-on-lg {
+ --pf-v6-c-tabs__list--Display: none;
+ --pf-v6-c-tabs__toggle--Display: flex;
+ }
+ .pf-v6-c-tabs.pf-m-vertical.pf-m-non-expandable-on-lg {
+ --pf-v6-c-tabs__list--Display: flex;
+ --pf-v6-c-tabs__toggle--Display: none;
+ }
+}
+@media (min-width: 75rem) {
+ .pf-v6-c-tabs.pf-m-vertical.pf-m-expandable-on-xl {
+ --pf-v6-c-tabs__list--Display: none;
+ --pf-v6-c-tabs__toggle--Display: flex;
+ }
+ .pf-v6-c-tabs.pf-m-vertical.pf-m-non-expandable-on-xl {
+ --pf-v6-c-tabs__list--Display: flex;
+ --pf-v6-c-tabs__toggle--Display: none;
+ }
+}
+@media (min-width: 90.625rem) {
+ .pf-v6-c-tabs.pf-m-vertical.pf-m-expandable-on-2xl {
+ --pf-v6-c-tabs__list--Display: none;
+ --pf-v6-c-tabs__toggle--Display: flex;
+ }
+ .pf-v6-c-tabs.pf-m-vertical.pf-m-non-expandable-on-2xl {
+ --pf-v6-c-tabs__list--Display: flex;
+ --pf-v6-c-tabs__toggle--Display: none;
+ }
+}
+.pf-v6-c-tabs.pf-m-vertical.pf-m-expandable {
+ row-gap: var(--pf-v6-c-tabs--m-expandable--RowGap);
+ padding-block-start: var(--pf-v6-c-tabs--m-expandable--PaddingBlockStart);
+ padding-block-end: var(--pf-v6-c-tabs--m-expandable--PaddingBlockEnd);
+ padding-inline-start: var(--pf-v6-c-tabs--m-expandable--PaddingInlineStart);
+ padding-inline-end: var(--pf-v6-c-tabs--m-expandable--PaddingInlineEnd);
+}
+.pf-v6-c-tabs.pf-m-vertical.pf-m-expanded {
+ --pf-v6-c-tabs__list--Display: flex;
+ --pf-v6-c-tabs__toggle-icon--Rotate: var(--pf-v6-c-tabs--m-expanded__toggle-icon--Rotate);
+}
+.pf-v6-c-tabs.pf-m-box.pf-m-vertical {
+ --pf-v6-c-tabs--inset: var(--pf-v6-c-tabs--m-vertical--m-box--inset);
+ --pf-v6-c-tabs--m-vertical__list--before--BorderInlineStartWidth: 0;
+ --pf-v6-c-tabs--m-vertical__list--before--BorderInlineEndWidth: var(--pf-v6-c-tabs--before--border-width--base);
+ --pf-v6-c-tabs__link--before--BorderInlineEndWidth: var(--pf-v6-c-tabs__link--before--border-width--base);
+ --pf-v6-c-tabs__link--disabled--before--BorderInlineEndWidth: var(--pf-v6-c-tabs--before--border-width--base);
+ --pf-v6-c-tabs__link--disabled--before--BorderBlockEndWidth: var(--pf-v6-c-tabs--before--border-width--base);
+ --pf-v6-c-tabs__link--disabled--before--BorderInlineStartWidth: 0;
+}
+.pf-v6-c-tabs.pf-m-box.pf-m-vertical .pf-v6-c-tabs__list::before {
+ inset-inline-start: auto;
+ inset-inline-end: 0;
+}
+.pf-v6-c-tabs.pf-m-box.pf-m-vertical .pf-v6-c-tabs__item:last-child {
+ --pf-v6-c-tabs__link--before--BorderInlineEndWidth: var(--pf-v6-c-tabs__link--before--border-width--base);
+}
+.pf-v6-c-tabs.pf-m-box.pf-m-vertical .pf-v6-c-tabs__item:first-child {
+ --pf-v6-c-tabs__link--before--BorderBlockStartWidth: var(--pf-v6-c-tabs__link--before--border-width--base);
+}
+.pf-v6-c-tabs.pf-m-box.pf-m-vertical .pf-v6-c-tabs__item.pf-m-current {
+ --pf-v6-c-tabs__link--before--BorderInlineEndColor: var(--pf-v6-c-tabs__item--m-current__link--BackgroundColor);
+ --pf-v6-c-tabs__link--before--BorderBlockEndColor: var(--pf-v6-c-tabs__link--before--border-color--base);
+}
+.pf-v6-c-tabs.pf-m-box.pf-m-vertical .pf-v6-c-tabs__item:first-child.pf-m-current {
+ --pf-v6-c-tabs__link--before--BorderBlockStartWidth: var(--pf-v6-c-tabs__link--before--border-width--base);
+}
+.pf-v6-c-tabs.pf-m-box.pf-m-vertical .pf-v6-c-tabs__link::after {
+ inset-block-start: calc(var(--pf-v6-c-tabs__link--before--border-width--base) * -1);
+}
+.pf-v6-c-tabs.pf-m-box.pf-m-vertical .pf-v6-c-tabs__item:first-child .pf-v6-c-tabs__link::after,
+.pf-v6-c-tabs.pf-m-box.pf-m-vertical .pf-v6-c-tabs__item.pf-m-current + .pf-v6-c-tabs__item .pf-v6-c-tabs__link::after {
+ inset-block-start: 0;
+}
+.pf-v6-c-tabs.pf-m-subtab {
+ --pf-v6-c-tabs__link--FontSize: var(--pf-v6-c-tabs--m-subtab__link--FontSize);
+ --pf-v6-c-tabs__item-action--c-button--FontSize: var(--pf-v6-c-tabs--m-subtab__item-action--c-button--FontSize);
+ --pf-v6-c-tabs__add--c-button--FontSize: var(--pf-v6-c-tabs--m-subtab__add--c-button--FontSize);
+}
+.pf-v6-c-tabs.pf-m-page-insets {
+ --pf-v6-c-tabs--inset: var(--pf-v6-c-tabs--m-page-insets--inset);
+}
+.pf-v6-c-tabs.pf-m-overflow,
+.pf-v6-c-tabs.pf-m-overflow .pf-v6-c-tabs__list {
+ overflow: visible;
+}
+
+.pf-v6-c-tabs__toggle {
+ display: var(--pf-v6-c-tabs__toggle--Display);
+ align-items: center;
+}
+
+.pf-v6-c-tabs__toggle-button .pf-v6-c-button {
+ justify-content: start;
+ white-space: normal;
+}
+
+.pf-v6-c-tabs__toggle-icon {
+ display: inline-block;
+ transition: var(--pf-v6-c-tabs__toggle-icon--Transition);
+ transform: rotate(var(--pf-v6-c-tabs__toggle-icon--Rotate));
+}
+:where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-tabs__toggle-icon {
+ scale: -1 1;
+}
+
+.pf-v6-c-tabs__list {
+ scrollbar-width: none;
+ -ms-overflow-style: -ms-autohiding-scrollbar;
+ position: relative;
+ display: var(--pf-v6-c-tabs__list--Display);
+ max-width: 100%;
+ overflow-x: auto;
+ scroll-behavior: smooth;
+ scroll-snap-type: var(--pf-v6-c-tabs__list--ScrollSnapType);
+ -webkit-overflow-scrolling: touch;
+}
+.pf-v6-c-tabs__list::-webkit-scrollbar {
+ display: none;
+}
+
+.pf-v6-c-tabs__item {
+ position: relative;
+ display: flex;
+ flex: none;
+ column-gap: var(--pf-v6-c-tabs__item--ColumnGap);
+ scroll-snap-align: var(--pf-v6-c-tabs__item--ScrollSnapAlign);
+ padding-block-start: var(--pf-v6-c-tabs__item--PaddingBlockStart);
+ padding-block-end: var(--pf-v6-c-tabs__item--PaddingBlockEnd);
+ padding-inline-start: var(--pf-v6-c-tabs__item--PaddingInlineStart);
+ padding-inline-end: var(--pf-v6-c-tabs__item--PaddingInlineEnd);
+ background-color: var(--pf-v6-c-tabs__item--BackgroundColor);
+}
+.pf-v6-c-tabs__item.pf-m-current {
+ --pf-v6-c-tabs__link--Color: var(--pf-v6-c-tabs__item--m-current__link--Color);
+ --pf-v6-c-tabs__link--after--BorderColor: var(--pf-v6-c-tabs__item--m-current__link--after--BorderColor);
+ --pf-v6-c-tabs__link--after--BorderWidth: var(--pf-v6-c-tabs__item--m-current__link--after--BorderWidth);
+ --pf-v6-c-tabs__item--BackgroundColor: var(--pf-v6-c-tabs__item--m-current--BackgroundColor);
+}
+.pf-v6-c-tabs__item.pf-m-action {
+ position: relative;
+}
+.pf-v6-c-tabs__item.pf-m-action::before {
+ z-index: var(--pf-v6-c-tabs__item--m-action--before--ZIndex);
+}
+.pf-v6-c-tabs__item.pf-m-action .pf-v6-c-tabs__link::before,
+.pf-v6-c-tabs__item.pf-m-action .pf-v6-c-tabs__link::after {
+ content: revert;
+}
+
+.pf-v6-c-tabs::before,
+.pf-v6-c-tabs__list::before,
+.pf-v6-c-tabs__link::before,
+.pf-v6-c-tabs__link::after,
+.pf-v6-c-tabs__item.pf-m-action::before,
+.pf-v6-c-tabs__item.pf-m-action::after,
+.pf-v6-c-tabs__scroll-button::before,
+.pf-v6-c-tabs__add::before {
+ position: absolute;
+ inset-block-end: 0;
+ inset-inline-start: 0;
+ inset-inline-end: 0;
+ content: "";
+ border-style: solid;
+}
+
+.pf-v6-c-tabs__list::before,
+.pf-v6-c-tabs__link::before,
+.pf-v6-c-tabs__link::after,
+.pf-v6-c-tabs__item.pf-m-action::before,
+.pf-v6-c-tabs__item.pf-m-action::after,
+.pf-v6-c-tabs__scroll-button::before,
+.pf-v6-c-tabs__add::before {
+ inset-block-start: 0;
+}
+
+.pf-v6-c-tabs__link,
+.pf-v6-c-tabs__scroll-button,
+.pf-v6-c-tabs__list::before,
+.pf-v6-c-tabs__add::before {
+ border: 0;
+}
+
+.pf-v6-c-tabs__link {
+ display: flex;
+ flex: 1;
+ column-gap: var(--pf-v6-c-tabs__link--ColumnGap);
+ align-items: center;
+ padding-block-start: var(--pf-v6-c-tabs__link--PaddingBlockStart);
+ padding-block-end: var(--pf-v6-c-tabs__link--PaddingBlockEnd);
+ padding-inline-start: var(--pf-v6-c-tabs__link--PaddingInlineStart);
+ padding-inline-end: var(--pf-v6-c-tabs__link--PaddingInlineEnd);
+ font-size: var(--pf-v6-c-tabs__link--FontSize);
+ color: var(--pf-v6-c-tabs__link--Color);
+ text-decoration-line: none;
+ background-color: var(--pf-v6-c-tabs__link--BackgroundColor);
+ border-radius: var(--pf-v6-c-tabs__link--BorderRadius);
+ transition: background-color var(--pf-v6-c-tabs__link--TransitionDuration--background-color) var(--pf-v6-c-tabs__link--TransitionTimingFunction--background-color);
+}
+.pf-v6-c-tabs__item.pf-m-action, .pf-v6-c-tabs__link {
+ --pf-v6-c-tabs__link--after--BorderBlockEndWidth: var(--pf-v6-c-tabs__link--after--BorderWidth);
+}
+
+.pf-v6-c-tabs__item.pf-m-action::before, .pf-v6-c-tabs__link::before {
+ pointer-events: none;
+ border-block-start-color: var(--pf-v6-c-tabs__link--before--BorderBlockStartColor);
+ border-block-start-width: var(--pf-v6-c-tabs__link--before--BorderBlockStartWidth);
+ border-block-end-color: var(--pf-v6-c-tabs__link--before--BorderBlockEndColor);
+ border-block-end-width: var(--pf-v6-c-tabs__link--before--BorderBlockEndWidth);
+ border-inline-start-color: var(--pf-v6-c-tabs__link--before--BorderInlineStartColor);
+ border-inline-start-width: var(--pf-v6-c-tabs__link--before--BorderInlineStartWidth);
+ border-inline-end-color: var(--pf-v6-c-tabs__link--before--BorderInlineEndColor);
+ border-inline-end-width: var(--pf-v6-c-tabs__link--before--BorderInlineEndWidth);
+}
+
+.pf-v6-c-tabs__item.pf-m-action::after, .pf-v6-c-tabs__link::after {
+ inset-block-start: var(--pf-v6-c-tabs__link--after--InsetBlockStart);
+ inset-block-end: var(--pf-v6-c-tabs__link--after--InsetBlockEnd);
+ inset-inline-start: var(--pf-v6-c-tabs__link--before--InsetInlineStart);
+ inset-inline-end: var(--pf-v6-c-tabs__link--after--InsetInlineEnd);
+ border-color: var(--pf-v6-c-tabs__link--after--BorderColor);
+ border-block-start-width: var(--pf-v6-c-tabs__link--after--BorderBlockStartWidth);
+ border-block-end-width: var(--pf-v6-c-tabs__link--after--BorderBlockEndWidth);
+ border-inline-start-width: var(--pf-v6-c-tabs__link--after--BorderInlineStartWidth);
+ border-inline-end-width: var(--pf-v6-c-tabs__link--after--BorderInlineEndWidth);
+}
+
+.pf-v6-c-tabs__link:where(:hover, :focus) {
+ --pf-v6-c-tabs__link--BackgroundColor: var(--pf-v6-c-tabs__link--hover--BackgroundColor);
+ border: var(--pf-t--global--border--width--regular) solid var(--pf-t--global--border--color--high-contrast);
+ margin: calc(-1 * var(--pf-t--global--border--width--regular));
+}
+.pf-v6-c-tabs__link:disabled, .pf-v6-c-tabs__link.pf-m-disabled {
+ pointer-events: none;
+}
+.pf-v6-c-tabs__item.pf-m-action.pf-m-disabled, .pf-v6-c-tabs__link:disabled, .pf-v6-c-tabs__link.pf-m-disabled, .pf-v6-c-tabs__link.pf-m-aria-disabled {
+ --pf-v6-c-tabs__link--Color: var(--pf-v6-c-tabs__link--disabled--Color);
+ --pf-v6-c-tabs__link--before--BorderInlineEndWidth: var(--pf-v6-c-tabs__link--disabled--before--BorderInlineEndWidth);
+ --pf-v6-c-tabs__link--before--BorderBlockEndWidth: var(--pf-v6-c-tabs__link--disabled--before--BorderBlockEndWidth);
+ --pf-v6-c-tabs__link--before--BorderInlineStartWidth: var(--pf-v6-c-tabs__link--disabled--before--BorderInlineStartWidth);
+ --pf-v6-c-tabs__link--after--BorderWidth: 0;
+}
+
+.pf-v6-c-tabs__link:is(:disabled, .pf-m-disabled, .pf-m-aria-disabled) {
+ --pf-v6-c-tabs__link--BackgroundColor: var(--pf-v6-c-tabs__link--disabled--BackgroundColor);
+}
+.pf-v6-c-tabs__item.pf-m-action.pf-m-disabled {
+ --pf-v6-c-tabs__link--BackgroundColor: transparent;
+}
+
+.pf-v6-c-tabs__link.pf-m-aria-disabled {
+ cursor: default;
+}
+.pf-v6-c-tabs__link.pf-m-expanded {
+ --pf-v6-c-tabs__link-toggle-icon--Rotate: var(--pf-v6-c-tabs__link--m-expanded__toggle-icon--Rotate);
+}
+
+.pf-v6-c-tabs__link-toggle-icon {
+ align-self: end;
+ font-size: var(--pf-v6-c-tabs__link-toggle-icon--FontSize);
+ color: var(--pf-v6-c-tabs__link-toggle-icon--Color);
+ transition: var(--pf-v6-c-tabs__link-toggle-icon--Transition);
+ transform: rotate(var(--pf-v6-c-tabs__link-toggle-icon--Rotate));
+}
+:where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-tabs__link-toggle-icon {
+ scale: -1 1;
+}
+
+.pf-v6-c-tabs__item-action {
+ display: flex;
+}
+.pf-v6-c-tabs__item-action .pf-v6-c-button {
+ --pf-v6-c-button--FontSize: var(--pf-v6-c-tabs__item-action--c-button--FontSize);
+}
+
+.pf-v6-c-tabs__item-action-icon {
+ display: inline-block;
+ margin-block-start: var(--pf-v6-c-tabs__item-action-icon--MarginBlockStart);
+}
+
+.pf-v6-c-tabs__scroll-button {
+ padding-block-start: var(--pf-v6-c-tabs__scroll-button--PaddingBlockStart);
+ padding-block-end: var(--pf-v6-c-tabs__scroll-button--PaddingBlockEnd);
+ padding-inline-start: var(--pf-v6-c-tabs__scroll-button--PaddingInlineStart);
+ padding-inline-end: var(--pf-v6-c-tabs__scroll-button--PaddingInlineEnd);
+ opacity: 0;
+ transition: margin var(--pf-v6-c-tabs__scroll-button--TransitionDuration--margin), transform var(--pf-v6-c-tabs__scroll-button--TransitionDuration--transform), opacity var(--pf-v6-c-tabs__scroll-button--TransitionDuration--opacity);
+}
+.pf-v6-c-tabs__scroll-button::before {
+ border-color: var(--pf-v6-c-tabs__scroll-button--before--BorderColor);
+ border-block-start-width: 0;
+ border-block-end-width: var(--pf-v6-c-tabs__scroll-button--before--BorderBlockEndWidth);
+ border-inline-start-width: var(--pf-v6-c-tabs__scroll-button--before--BorderInlineStartWidth);
+ border-inline-end-width: var(--pf-v6-c-tabs__scroll-button--before--BorderInlineEndWidth);
+}
+.pf-v6-c-tabs__scroll-button:nth-of-type(1) {
+ --pf-v6-c-tabs__scroll-button--before--BorderInlineEndWidth: var(--pf-v6-c-tabs__scroll-button--before--border-width--base);
+ margin-inline-end: calc(var(--pf-v6-c-tabs__scroll-button--Width) * -1);
+ transform: translateX(-100%);
+}
+.pf-v6-c-tabs__scroll-button:nth-of-type(2) {
+ --pf-v6-c-tabs__scroll-button--before--BorderInlineStartWidth: var(--pf-v6-c-tabs__scroll-button--before--border-width--base);
+ margin-inline-start: calc(var(--pf-v6-c-tabs__scroll-button--Width) * -1);
+ transform: translateX(100%);
+}
+
+.pf-v6-c-tabs__add {
+ position: relative;
+ display: flex;
+ padding-block-start: var(--pf-v6-c-tabs__add--PaddingBlockStart);
+ padding-block-end: var(--pf-v6-c-tabs__add--PaddingBlockEnd);
+ padding-inline-start: var(--pf-v6-c-tabs__add--PaddingInlineStart);
+ padding-inline-end: var(--pf-v6-c-tabs__add--PaddingInlineEnd);
+}
+.pf-v6-c-tabs__add::before {
+ border-inline-start: var(--pf-v6-c-tabs__add--before--BorderInlineStartWidth) solid var(--pf-v6-c-tabs__add--before--BorderColor);
+}
+.pf-v6-c-tabs__add .pf-v6-c-button {
+ --pf-v6-c-button--FontSize: var(--pf-v6-c-tabs__add--c-button--FontSize);
+}
+
+.pf-v6-c-tabs.pf-m-inset-none {
+ --pf-v6-c-tabs--inset: 0;
+ --pf-v6-c-tabs--m-vertical--inset: 0;
+ --pf-v6-c-tabs--m-vertical--m-box--inset: 0;
+}
+.pf-v6-c-tabs.pf-m-inset-sm {
+ --pf-v6-c-tabs--inset: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-tabs--m-vertical--inset: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-tabs--m-vertical--m-box--inset: var(--pf-t--global--spacer--sm);
+}
+.pf-v6-c-tabs.pf-m-inset-md {
+ --pf-v6-c-tabs--inset: var(--pf-t--global--spacer--md);
+ --pf-v6-c-tabs--m-vertical--inset: var(--pf-t--global--spacer--md);
+ --pf-v6-c-tabs--m-vertical--m-box--inset: var(--pf-t--global--spacer--md);
+}
+.pf-v6-c-tabs.pf-m-inset-lg {
+ --pf-v6-c-tabs--inset: var(--pf-t--global--spacer--lg);
+ --pf-v6-c-tabs--m-vertical--inset: var(--pf-t--global--spacer--lg);
+ --pf-v6-c-tabs--m-vertical--m-box--inset: var(--pf-t--global--spacer--lg);
+}
+.pf-v6-c-tabs.pf-m-inset-xl {
+ --pf-v6-c-tabs--inset: var(--pf-t--global--spacer--xl);
+ --pf-v6-c-tabs--m-vertical--inset: var(--pf-t--global--spacer--xl);
+ --pf-v6-c-tabs--m-vertical--m-box--inset: var(--pf-t--global--spacer--xl);
+}
+.pf-v6-c-tabs.pf-m-inset-2xl {
+ --pf-v6-c-tabs--inset: var(--pf-t--global--spacer--2xl);
+ --pf-v6-c-tabs--m-vertical--inset: var(--pf-t--global--spacer--2xl);
+ --pf-v6-c-tabs--m-vertical--m-box--inset: var(--pf-t--global--spacer--2xl);
+}
+@media (min-width: 36rem) {
+ .pf-v6-c-tabs.pf-m-inset-none-on-sm {
+ --pf-v6-c-tabs--inset: 0;
+ --pf-v6-c-tabs--m-vertical--inset: 0;
+ --pf-v6-c-tabs--m-vertical--m-box--inset: 0;
+ }
+ .pf-v6-c-tabs.pf-m-inset-sm-on-sm {
+ --pf-v6-c-tabs--inset: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-tabs--m-vertical--inset: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-tabs--m-vertical--m-box--inset: var(--pf-t--global--spacer--sm);
+ }
+ .pf-v6-c-tabs.pf-m-inset-md-on-sm {
+ --pf-v6-c-tabs--inset: var(--pf-t--global--spacer--md);
+ --pf-v6-c-tabs--m-vertical--inset: var(--pf-t--global--spacer--md);
+ --pf-v6-c-tabs--m-vertical--m-box--inset: var(--pf-t--global--spacer--md);
+ }
+ .pf-v6-c-tabs.pf-m-inset-lg-on-sm {
+ --pf-v6-c-tabs--inset: var(--pf-t--global--spacer--lg);
+ --pf-v6-c-tabs--m-vertical--inset: var(--pf-t--global--spacer--lg);
+ --pf-v6-c-tabs--m-vertical--m-box--inset: var(--pf-t--global--spacer--lg);
+ }
+ .pf-v6-c-tabs.pf-m-inset-xl-on-sm {
+ --pf-v6-c-tabs--inset: var(--pf-t--global--spacer--xl);
+ --pf-v6-c-tabs--m-vertical--inset: var(--pf-t--global--spacer--xl);
+ --pf-v6-c-tabs--m-vertical--m-box--inset: var(--pf-t--global--spacer--xl);
+ }
+ .pf-v6-c-tabs.pf-m-inset-2xl-on-sm {
+ --pf-v6-c-tabs--inset: var(--pf-t--global--spacer--2xl);
+ --pf-v6-c-tabs--m-vertical--inset: var(--pf-t--global--spacer--2xl);
+ --pf-v6-c-tabs--m-vertical--m-box--inset: var(--pf-t--global--spacer--2xl);
+ }
+}
+@media (min-width: 48rem) {
+ .pf-v6-c-tabs.pf-m-inset-none-on-md {
+ --pf-v6-c-tabs--inset: 0;
+ --pf-v6-c-tabs--m-vertical--inset: 0;
+ --pf-v6-c-tabs--m-vertical--m-box--inset: 0;
+ }
+ .pf-v6-c-tabs.pf-m-inset-sm-on-md {
+ --pf-v6-c-tabs--inset: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-tabs--m-vertical--inset: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-tabs--m-vertical--m-box--inset: var(--pf-t--global--spacer--sm);
+ }
+ .pf-v6-c-tabs.pf-m-inset-md-on-md {
+ --pf-v6-c-tabs--inset: var(--pf-t--global--spacer--md);
+ --pf-v6-c-tabs--m-vertical--inset: var(--pf-t--global--spacer--md);
+ --pf-v6-c-tabs--m-vertical--m-box--inset: var(--pf-t--global--spacer--md);
+ }
+ .pf-v6-c-tabs.pf-m-inset-lg-on-md {
+ --pf-v6-c-tabs--inset: var(--pf-t--global--spacer--lg);
+ --pf-v6-c-tabs--m-vertical--inset: var(--pf-t--global--spacer--lg);
+ --pf-v6-c-tabs--m-vertical--m-box--inset: var(--pf-t--global--spacer--lg);
+ }
+ .pf-v6-c-tabs.pf-m-inset-xl-on-md {
+ --pf-v6-c-tabs--inset: var(--pf-t--global--spacer--xl);
+ --pf-v6-c-tabs--m-vertical--inset: var(--pf-t--global--spacer--xl);
+ --pf-v6-c-tabs--m-vertical--m-box--inset: var(--pf-t--global--spacer--xl);
+ }
+ .pf-v6-c-tabs.pf-m-inset-2xl-on-md {
+ --pf-v6-c-tabs--inset: var(--pf-t--global--spacer--2xl);
+ --pf-v6-c-tabs--m-vertical--inset: var(--pf-t--global--spacer--2xl);
+ --pf-v6-c-tabs--m-vertical--m-box--inset: var(--pf-t--global--spacer--2xl);
+ }
+}
+@media (min-width: 62rem) {
+ .pf-v6-c-tabs.pf-m-inset-none-on-lg {
+ --pf-v6-c-tabs--inset: 0;
+ --pf-v6-c-tabs--m-vertical--inset: 0;
+ --pf-v6-c-tabs--m-vertical--m-box--inset: 0;
+ }
+ .pf-v6-c-tabs.pf-m-inset-sm-on-lg {
+ --pf-v6-c-tabs--inset: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-tabs--m-vertical--inset: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-tabs--m-vertical--m-box--inset: var(--pf-t--global--spacer--sm);
+ }
+ .pf-v6-c-tabs.pf-m-inset-md-on-lg {
+ --pf-v6-c-tabs--inset: var(--pf-t--global--spacer--md);
+ --pf-v6-c-tabs--m-vertical--inset: var(--pf-t--global--spacer--md);
+ --pf-v6-c-tabs--m-vertical--m-box--inset: var(--pf-t--global--spacer--md);
+ }
+ .pf-v6-c-tabs.pf-m-inset-lg-on-lg {
+ --pf-v6-c-tabs--inset: var(--pf-t--global--spacer--lg);
+ --pf-v6-c-tabs--m-vertical--inset: var(--pf-t--global--spacer--lg);
+ --pf-v6-c-tabs--m-vertical--m-box--inset: var(--pf-t--global--spacer--lg);
+ }
+ .pf-v6-c-tabs.pf-m-inset-xl-on-lg {
+ --pf-v6-c-tabs--inset: var(--pf-t--global--spacer--xl);
+ --pf-v6-c-tabs--m-vertical--inset: var(--pf-t--global--spacer--xl);
+ --pf-v6-c-tabs--m-vertical--m-box--inset: var(--pf-t--global--spacer--xl);
+ }
+ .pf-v6-c-tabs.pf-m-inset-2xl-on-lg {
+ --pf-v6-c-tabs--inset: var(--pf-t--global--spacer--2xl);
+ --pf-v6-c-tabs--m-vertical--inset: var(--pf-t--global--spacer--2xl);
+ --pf-v6-c-tabs--m-vertical--m-box--inset: var(--pf-t--global--spacer--2xl);
+ }
+}
+@media (min-width: 75rem) {
+ .pf-v6-c-tabs.pf-m-inset-none-on-xl {
+ --pf-v6-c-tabs--inset: 0;
+ --pf-v6-c-tabs--m-vertical--inset: 0;
+ --pf-v6-c-tabs--m-vertical--m-box--inset: 0;
+ }
+ .pf-v6-c-tabs.pf-m-inset-sm-on-xl {
+ --pf-v6-c-tabs--inset: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-tabs--m-vertical--inset: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-tabs--m-vertical--m-box--inset: var(--pf-t--global--spacer--sm);
+ }
+ .pf-v6-c-tabs.pf-m-inset-md-on-xl {
+ --pf-v6-c-tabs--inset: var(--pf-t--global--spacer--md);
+ --pf-v6-c-tabs--m-vertical--inset: var(--pf-t--global--spacer--md);
+ --pf-v6-c-tabs--m-vertical--m-box--inset: var(--pf-t--global--spacer--md);
+ }
+ .pf-v6-c-tabs.pf-m-inset-lg-on-xl {
+ --pf-v6-c-tabs--inset: var(--pf-t--global--spacer--lg);
+ --pf-v6-c-tabs--m-vertical--inset: var(--pf-t--global--spacer--lg);
+ --pf-v6-c-tabs--m-vertical--m-box--inset: var(--pf-t--global--spacer--lg);
+ }
+ .pf-v6-c-tabs.pf-m-inset-xl-on-xl {
+ --pf-v6-c-tabs--inset: var(--pf-t--global--spacer--xl);
+ --pf-v6-c-tabs--m-vertical--inset: var(--pf-t--global--spacer--xl);
+ --pf-v6-c-tabs--m-vertical--m-box--inset: var(--pf-t--global--spacer--xl);
+ }
+ .pf-v6-c-tabs.pf-m-inset-2xl-on-xl {
+ --pf-v6-c-tabs--inset: var(--pf-t--global--spacer--2xl);
+ --pf-v6-c-tabs--m-vertical--inset: var(--pf-t--global--spacer--2xl);
+ --pf-v6-c-tabs--m-vertical--m-box--inset: var(--pf-t--global--spacer--2xl);
+ }
+}
+@media (min-width: 90.625rem) {
+ .pf-v6-c-tabs.pf-m-inset-none-on-2xl {
+ --pf-v6-c-tabs--inset: 0;
+ --pf-v6-c-tabs--m-vertical--inset: 0;
+ --pf-v6-c-tabs--m-vertical--m-box--inset: 0;
+ }
+ .pf-v6-c-tabs.pf-m-inset-sm-on-2xl {
+ --pf-v6-c-tabs--inset: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-tabs--m-vertical--inset: var(--pf-t--global--spacer--sm);
+ --pf-v6-c-tabs--m-vertical--m-box--inset: var(--pf-t--global--spacer--sm);
+ }
+ .pf-v6-c-tabs.pf-m-inset-md-on-2xl {
+ --pf-v6-c-tabs--inset: var(--pf-t--global--spacer--md);
+ --pf-v6-c-tabs--m-vertical--inset: var(--pf-t--global--spacer--md);
+ --pf-v6-c-tabs--m-vertical--m-box--inset: var(--pf-t--global--spacer--md);
+ }
+ .pf-v6-c-tabs.pf-m-inset-lg-on-2xl {
+ --pf-v6-c-tabs--inset: var(--pf-t--global--spacer--lg);
+ --pf-v6-c-tabs--m-vertical--inset: var(--pf-t--global--spacer--lg);
+ --pf-v6-c-tabs--m-vertical--m-box--inset: var(--pf-t--global--spacer--lg);
+ }
+ .pf-v6-c-tabs.pf-m-inset-xl-on-2xl {
+ --pf-v6-c-tabs--inset: var(--pf-t--global--spacer--xl);
+ --pf-v6-c-tabs--m-vertical--inset: var(--pf-t--global--spacer--xl);
+ --pf-v6-c-tabs--m-vertical--m-box--inset: var(--pf-t--global--spacer--xl);
+ }
+ .pf-v6-c-tabs.pf-m-inset-2xl-on-2xl {
+ --pf-v6-c-tabs--inset: var(--pf-t--global--spacer--2xl);
+ --pf-v6-c-tabs--m-vertical--inset: var(--pf-t--global--spacer--2xl);
+ --pf-v6-c-tabs--m-vertical--m-box--inset: var(--pf-t--global--spacer--2xl);
+ }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+ .pf-v6-c-tabs.pf-m-animate-current:not(.pf-m-box) .pf-v6-c-tabs__link::after,
+ .pf-v6-c-tabs.pf-m-animate-current:not(.pf-m-box) .pf-v6-c-tabs__item.pf-m-action::after {
+ content: revert;
+ }
+ .pf-v6-c-tabs.pf-m-animate-current:not(.pf-m-box) .pf-v6-c-tabs__list::after {
+ position: absolute;
+ inset-block-start: var(--pf-v6-c-tabs--link-accent--InsetBlockStart);
+ inset-block-end: var(--pf-v6-c-tabs--link-accent--InsetBlockEnd);
+ inset-inline-start: var(--pf-v6-c-tabs--link-accent--InsetInlineStart);
+ width: var(--pf-v6-c-tabs--link-accent--Width, var(--pf-v6-c-tabs--link-accent--length));
+ height: var(--pf-v6-c-tabs--link-accent--Height, var(--pf-v6-c-tabs--link-accent--length));
+ content: "";
+ border: 0 solid var(--pf-v6-c-tabs--link-accent--color);
+ border-block-end-width: var(--pf-v6-c-tabs--link-accent--BorderBlockEndWidth);
+ border-inline-start-width: var(--pf-v6-c-tabs--link-accent--BorderInlineStartWidth);
+ transition-timing-function: var(--pf-v6-c-tabs--link-accent--TransitionTimingFunction);
+ transition-duration: var(--pf-v6-c-tabs--link-accent--TransitionDuration);
+ transform-origin: var(--pf-v6-c-tabs--link-accent--TransformOrigin);
+ translate: var(--pf-v6-c-tabs--link-accent--TranslateX) var(--pf-v6-c-tabs--link-accent--TranslateY);
+ }
+ :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-tabs.pf-m-animate-current:not(.pf-m-box) .pf-v6-c-tabs__list::after {
+ translate: calc(var(--pf-v6-c-tabs--link-accent--TranslateX) * var(--pf-v6-global--inverse--multiplier)) var(--pf-v6-c-tabs--link-accent--TranslateY);
+ }
+ .pf-v6-c-tabs.pf-m-initializing-accent {
+ --pf-v6-c-tabs--link-accent--TransitionDuration: 0;
+ }
+}
\ No newline at end of file