@patternfly/react-table 4.44.0 → 4.44.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/CHANGELOG.md +38 -0
  2. package/dist/umd/react-table.js +6 -1
  3. package/dist/umd/react-table.min.css +1421 -1421
  4. package/dist/umd/react-table.min.js +1 -1
  5. package/package.json +6 -6
package/dist/umd/react-table.min.css CHANGED
@@ -14023,7 +14023,17 @@ ul.pf-c-list {
14023
14023
  --pf-c-list--m-bordered--li--BorderBottomWidth: 0;
14024
14024
  }
14025
14025
 
14026
- .pf-c-login__footer, .pf-c-login__header {
14026
+ .pf-c-masthead.pf-m-light-200, .pf-c-masthead.pf-m-light {
14027
+ --pf-global--Color--100: var(--pf-global--Color--dark-100);
14028
+ --pf-global--Color--200: var(--pf-global--Color--dark-200);
14029
+ --pf-global--BorderColor--100: var(--pf-global--BorderColor--dark-100);
14030
+ --pf-global--primary-color--100: var(--pf-global--primary-color--dark-100);
14031
+ --pf-global--link--Color: var(--pf-global--link--Color--dark);
14032
+ --pf-global--link--Color--hover: var(--pf-global--link--Color--dark--hover);
14033
+ --pf-global--BackgroundColor--100: var(--pf-global--BackgroundColor--light-100);
14034
+ }
14035
+
14036
+ .pf-c-masthead {
14027
14037
  --pf-global--Color--100: var(--pf-global--Color--light-100);
14028
14038
  --pf-global--Color--200: var(--pf-global--Color--light-200);
14029
14039
  --pf-global--BorderColor--100: var(--pf-global--BorderColor--light-100);
@@ -14033,11 +14043,11 @@ ul.pf-c-list {
14033
14043
  --pf-global--BackgroundColor--100: var(--pf-global--BackgroundColor--dark-100);
14034
14044
  }
14035
14045
 
14036
- .pf-c-login__footer .pf-c-card, .pf-c-login__header .pf-c-card {
14046
+ .pf-c-masthead .pf-c-card {
14037
14047
  --pf-c-card--BackgroundColor: var(--pf-global--BackgroundColor--dark-transparent-200);
14038
14048
  }
14039
14049
 
14040
- .pf-c-login__footer .pf-c-button, .pf-c-login__header .pf-c-button {
14050
+ .pf-c-masthead .pf-c-button {
14041
14051
  --pf-c-button--m-primary--Color: var(--pf-global--primary-color--dark-100);
14042
14052
  --pf-c-button--m-primary--hover--Color: var(--pf-global--primary-color--dark-100);
14043
14053
  --pf-c-button--m-primary--focus--Color: var(--pf-global--primary-color--dark-100);
@@ -14056,434 +14066,438 @@ ul.pf-c-list {
14056
14066
  --pf-c-button--m-secondary--active--BorderColor: var(--pf-global--Color--light-100);
14057
14067
  }
14058
14068
 
14059
- .pf-c-login {
14060
- --pf-c-login--PaddingTop: var(--pf-global--spacer--lg);
14061
- --pf-c-login--PaddingBottom: var(--pf-global--spacer--lg);
14062
- --pf-c-login--xl--BackgroundImage: none;
14063
- --pf-c-login__container--xl--GridColumnGap: var(--pf-global--spacer--3xl);
14064
- --pf-c-login__container--MaxWidth: 31.25rem;
14065
- --pf-c-login__container--xl--MaxWidth: none;
14066
- --pf-c-login__container--PaddingLeft: 6.125rem;
14067
- --pf-c-login__container--PaddingRight: 6.125rem;
14068
- --pf-c-login__container--xl--GridTemplateColumns: 34rem minmax(auto, 34rem);
14069
- --pf-c-login__header--MarginBottom: var(--pf-global--spacer--md);
14070
- --pf-c-login__header--PaddingLeft: var(--pf-global--spacer--md);
14071
- --pf-c-login__header--PaddingRight: var(--pf-global--spacer--md);
14072
- --pf-c-login__header--xl--MarginBottom: var(--pf-global--spacer--2xl);
14073
- --pf-c-login__header--xl--MarginTop: var(--pf-global--spacer--3xl);
14074
- --pf-c-login__header--c-brand--MarginBottom: var(--pf-global--spacer--lg);
14075
- --pf-c-login__header--c-brand--xl--MarginBottom: var(--pf-global--spacer--2xl);
14076
- --pf-c-login__main--BackgroundColor: var(--pf-global--BackgroundColor--light-100);
14077
- --pf-c-login__main--MarginBottom: var(--pf-global--spacer--lg);
14078
- --pf-c-login__main-header--PaddingTop: var(--pf-global--spacer--2xl);
14079
- --pf-c-login__main-header--PaddingRight: var(--pf-global--spacer--xl);
14080
- --pf-c-login__main-header--PaddingBottom: var(--pf-global--spacer--md);
14081
- --pf-c-login__main-header--PaddingLeft: var(--pf-global--spacer--xl);
14082
- --pf-c-login__main-header--md--PaddingRight: var(--pf-global--spacer--2xl);
14083
- --pf-c-login__main-header--md--PaddingLeft: var(--pf-global--spacer--2xl);
14084
- --pf-c-login__main-header--ColumnGap: var(--pf-global--spacer--md);
14085
- --pf-c-login__main-header--RowGap: var(--pf-global--spacer--md);
14086
- --pf-c-login__main-header-desc--MarginBottom: var(--pf-global--spacer--sm);
14087
- --pf-c-login__main-header-desc--md--MarginBottom: 0;
14088
- --pf-c-login__main-header-desc--FontSize: var(--pf-global--FontSize--sm);
14089
- --pf-c-login__main-body--PaddingRight: var(--pf-global--spacer--xl);
14090
- --pf-c-login__main-body--PaddingBottom: var(--pf-global--spacer--xl);
14091
- --pf-c-login__main-body--PaddingLeft: var(--pf-global--spacer--xl);
14092
- --pf-c-login__main-body--md--PaddingRight: var(--pf-global--spacer--2xl);
14093
- --pf-c-login__main-body--md--PaddingLeft: var(--pf-global--spacer--2xl);
14094
- --pf-c-login__main-footer--PaddingBottom: var(--pf-global--spacer--3xl);
14095
- --pf-c-login__main-footer--c-title--MarginBottom: var(--pf-global--spacer--md);
14096
- --pf-c-login__main-footer-links--PaddingTop: var(--pf-global--spacer--sm);
14097
- --pf-c-login__main-footer-links--PaddingRight: var(--pf-global--spacer--3xl);
14098
- --pf-c-login__main-footer-links--PaddingBottom: var(--pf-global--spacer--xl);
14099
- --pf-c-login__main-footer-links--PaddingLeft: var(--pf-global--spacer--3xl);
14100
- --pf-c-login__main-footer-links-item--PaddingRight: var(--pf-global--spacer--md);
14101
- --pf-c-login__main-footer-links-item--PaddingLeft: var(--pf-global--spacer--md);
14102
- --pf-c-login__main-footer-links-item--MarginBottom: var(--pf-global--spacer--sm);
14103
- --pf-c-login__main-footer-links-item-link-svg--Fill: var(--pf-global--icon--Color--light);
14104
- --pf-c-login__main-footer-links-item-link-svg--Width: var(--pf-global--icon--FontSize--lg);
14105
- --pf-c-login__main-footer-links-item-link-svg--Height: var(--pf-global--icon--FontSize--lg);
14106
- --pf-c-login__main-footer-links-item-link-svg--hover--Fill: var(--pf-global--icon--Color--dark);
14107
- --pf-c-login__main-footer-band--PaddingTop: var(--pf-global--spacer--lg);
14108
- --pf-c-login__main-footer-band--PaddingRight: var(--pf-global--spacer--md);
14109
- --pf-c-login__main-footer-band--PaddingBottom: var(--pf-global--spacer--lg);
14110
- --pf-c-login__main-footer-band--PaddingLeft: var(--pf-global--spacer--md);
14111
- --pf-c-login__main-footer-band--BackgroundColor: var(--pf-global--BackgroundColor--200);
14112
- --pf-c-login__main-footer-band-item--PaddingTop: var(--pf-global--spacer--md);
14113
- --pf-c-login__footer--PaddingLeft: var(--pf-global--spacer--md);
14114
- --pf-c-login__footer--PaddingRight: var(--pf-global--spacer--md);
14115
- --pf-c-login__footer--c-list--PaddingTop: var(--pf-global--spacer--md);
14116
- --pf-c-login__footer--c-list--xl--PaddingTop: var(--pf-global--spacer--2xl);
14117
- display: flex;
14118
- justify-content: center;
14119
- min-height: 100vh;
14120
- padding-top: var(--pf-c-login--PaddingTop);
14121
- padding-bottom: var(--pf-c-login--PaddingBottom);
14069
+ .pf-c-masthead {
14070
+ --pf-c-masthead--PaddingLeft: var(--pf-c-masthead--inset);
14071
+ --pf-c-masthead--PaddingRight: var(--pf-c-masthead--inset);
14072
+ --pf-c-masthead--BackgroundColor: var(--pf-global--BackgroundColor--dark-100);
14073
+ --pf-c-masthead--inset: var(--pf-global--spacer--md);
14074
+ --pf-c-masthead--xl--inset: var(--pf-global--spacer--lg);
14075
+ --pf-c-masthead--m-display-stack--GridTemplateColumns: max-content 1fr;
14076
+ --pf-c-masthead--m-display-stack__main--GridColumn: -1 / 1;
14077
+ --pf-c-masthead--m-display-stack__main--MinHeight: 4.375rem;
14078
+ --pf-c-masthead--m-display-stack__main--Order: -1;
14079
+ --pf-c-masthead--m-display-stack__main--FlexBasis: 100%;
14080
+ --pf-c-masthead--m-display-stack__main--PaddingTop: var(--pf-global--spacer--sm);
14081
+ --pf-c-masthead--m-display-stack__main--PaddingBottom: var(--pf-global--spacer--sm);
14082
+ --pf-c-masthead--m-display-stack__main--MarginRight: 0;
14083
+ --pf-c-masthead--m-display-stack__main--before--BorderBottom: var(--pf-c-masthead__main--before--BorderBottomWidth) solid var(--pf-c-masthead__main--before--BorderBottomColor);
14084
+ --pf-c-masthead--m-display-stack__toggle--GridColumn: 1;
14085
+ --pf-c-masthead--m-display-stack__content--GridColumn: 2;
14086
+ --pf-c-masthead--m-display-stack__content--MinHeight: 4.375rem;
14087
+ --pf-c-masthead--m-display-stack__content--Order: 1;
14088
+ --pf-c-masthead--m-display-stack__content--PaddingTop: 0;
14089
+ --pf-c-masthead--m-display-stack__content--PaddingBottom: 0;
14090
+ --pf-c-masthead--m-display-stack__content--MarginLeft: 0;
14091
+ --pf-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginRight: calc(var(--pf-c-masthead--inset) * -1);
14092
+ --pf-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginLeft: calc(var(--pf-c-masthead--inset) * -1);
14093
+ --pf-c-masthead--m-display-inline--GridTemplateColumns: max-content max-content 1fr;
14094
+ --pf-c-masthead--m-display-inline__main--GridColumn: 2;
14095
+ --pf-c-masthead--m-display-inline__main--MinHeight: 4.375rem;
14096
+ --pf-c-masthead--m-display-inline__main--Order: 0;
14097
+ --pf-c-masthead--m-display-inline__main--FlexBasis: auto;
14098
+ --pf-c-masthead--m-display-inline__main--PaddingTop: 0;
14099
+ --pf-c-masthead--m-display-inline__main--PaddingBottom: 0;
14100
+ --pf-c-masthead--m-display-inline__main--MarginRight: calc(var(--pf-global--spacer--lg) / 2);
14101
+ --pf-c-masthead--m-display-inline__main--BorderBottom: 0;
14102
+ --pf-c-masthead--m-display-inline__toggle--GridColumn: 1;
14103
+ --pf-c-masthead--m-display-inline__content--GridColumn: 3;
14104
+ --pf-c-masthead--m-display-inline__content--MinHeight: 4.375rem;
14105
+ --pf-c-masthead--m-display-inline__content--Order: 0;
14106
+ --pf-c-masthead--m-display-inline__content--PaddingTop: 0;
14107
+ --pf-c-masthead--m-display-inline__content--PaddingBottom: 0;
14108
+ --pf-c-masthead--m-display-inline__content--MarginLeft: calc(var(--pf-global--spacer--lg) / 2);
14109
+ --pf-c-masthead--m-display-inline__content--c-nav--m-horizontal--MarginRight: 0;
14110
+ --pf-c-masthead--m-display-inline__content--c-nav--m-horizontal--MarginLeft: 0;
14111
+ --pf-c-masthead__main--before--Right: calc(var(--pf-c-masthead--inset) * -1);
14112
+ --pf-c-masthead__main--before--Left: calc(var(--pf-c-masthead--inset) * -1);
14113
+ --pf-c-masthead__main--before--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
14114
+ --pf-c-masthead__main--before--BorderBottomColor: var(--pf-global--palette--black-600);
14115
+ --pf-c-masthead__toggle--MarginRight: var(--pf-global--spacer--sm);
14116
+ --pf-c-masthead__toggle--MarginLeft: calc(var(--pf-global--spacer--md) * -1);
14117
+ --pf-c-masthead__toggle--c-button--FontSize: var(--pf-global--FontSize--2xl);
14118
+ --pf-c-masthead--m-light--BackgroundColor: var(--pf-global--BackgroundColor--100);
14119
+ --pf-c-masthead--m-light__main--BorderBottomColor: var(--pf-global--BorderColor--300);
14120
+ --pf-c-masthead--m-light-200--BackgroundColor: var(--pf-global--BackgroundColor--200);
14121
+ --pf-c-masthead--m-light-200__main--BorderBottomColor: var(--pf-global--BorderColor--100);
14122
+ --pf-c-masthead--c-toolbar__item--Display: flex;
14123
+ --pf-c-masthead--item-border-color--base: var(--pf-global--palette--black-800);
14124
+ --pf-c-masthead--c-context-selector--Width: auto;
14125
+ --pf-c-masthead--c-context-selector__toggle--BorderTopColor: transparent;
14126
+ --pf-c-masthead--c-context-selector__toggle--BorderRightColor: transparent;
14127
+ --pf-c-masthead--c-context-selector__toggle--BorderBottomColor: transparent;
14128
+ --pf-c-masthead--c-context-selector__toggle--BorderLeftColor: transparent;
14129
+ --pf-c-masthead--c-context-selector--m-full-height__toggle--BorderRightColor: var(--pf-c-masthead--item-border-color--base);
14130
+ --pf-c-masthead--c-context-selector--m-full-height__toggle--BorderLeftColor: var(--pf-c-masthead--item-border-color--base);
14131
+ --pf-c-masthead--c-dropdown__toggle--before--BorderTopColor: transparent;
14132
+ --pf-c-masthead--c-dropdown__toggle--before--BorderRightColor: transparent;
14133
+ --pf-c-masthead--c-dropdown__toggle--before--BorderBottomColor: transparent;
14134
+ --pf-c-masthead--c-dropdown__toggle--before--BorderLeftColor: transparent;
14135
+ --pf-c-masthead--c-dropdown--m-full-height__toggle--before--BorderRightColor: var(--pf-c-masthead--item-border-color--base);
14136
+ --pf-c-masthead--c-dropdown--m-full-height__toggle--before--BorderLeftColor: var(--pf-c-masthead--item-border-color--base);
14137
+ --pf-c-masthead--c-menu-toggle--before--BorderTopColor: transparent;
14138
+ --pf-c-masthead--c-menu-toggle--before--BorderRightColor: transparent;
14139
+ --pf-c-masthead--c-menu-toggle--before--BorderBottomColor: transparent;
14140
+ --pf-c-masthead--c-menu-toggle--before--BorderLeftColor: transparent;
14141
+ --pf-c-masthead--c-menu-toggle--m-full-height--before--BorderRightColor: var(--pf-c-masthead--item-border-color--base);
14142
+ --pf-c-masthead--c-menu-toggle--m-full-height--before--BorderLeftColor: var(--pf-c-masthead--item-border-color--base);
14143
+ --pf-c-masthead--c-toolbar__content--PaddingRight: 0;
14144
+ --pf-c-masthead--c-toolbar__content--PaddingLeft: 0;
14145
+ --pf-c-masthead--c-toolbar__expandable-content--PaddingTop: var(--pf-global--spacer--md);
14146
+ --pf-c-masthead--c-toolbar__expandable-content--PaddingRight: var(--pf-c-masthead--inset);
14147
+ --pf-c-masthead--c-toolbar__expandable-content--PaddingBottom: var(--pf-global--spacer--md);
14148
+ --pf-c-masthead--c-toolbar__expandable-content--PaddingLeft: var(--pf-c-masthead--inset);
14149
+ --pf-c-masthead--c-toolbar__expandable-content--BorderTopWidth: var(--pf-global--BorderWidth--sm);
14150
+ --pf-c-masthead--c-toolbar__expandable-content--BorderTopColor: var(--pf-c-masthead--item-border-color--base);
14151
+ --pf-c-masthead--GridTemplateColumns: var(--pf-c-masthead--m-display-stack--GridTemplateColumns);
14152
+ --pf-c-masthead__main--GridColumn: var(--pf-c-masthead--m-display-stack__main--GridColumn);
14153
+ --pf-c-masthead__main--MinHeight: var(--pf-c-masthead--m-display-stack__main--MinHeight);
14154
+ --pf-c-masthead__main--Order: var(--pf-c-masthead--m-display-stack__main--Order);
14155
+ --pf-c-masthead__main--FlexBasis: var(--pf-c-masthead--m-display-stack__main--FlexBasis);
14156
+ --pf-c-masthead__main--PaddingTop: var(--pf-c-masthead--m-display-stack__main--PaddingTop);
14157
+ --pf-c-masthead__main--PaddingBottom: var(--pf-c-masthead--m-display-stack__main--PaddingBottom);
14158
+ --pf-c-masthead__main--MarginRight: var(--pf-c-masthead--m-display-stack__main--MarginRight);
14159
+ --pf-c-masthead__main--before--BorderBottom: var(--pf-c-masthead--m-display-stack__main--before--BorderBottom);
14160
+ --pf-c-masthead__content--GridColumn: var(--pf-c-masthead--m-display-stack__content--GridColumn);
14161
+ --pf-c-masthead__content--MinHeight: var(--pf-c-masthead--m-display-stack__content--MinHeight);
14162
+ --pf-c-masthead__content--Order: var(--pf-c-masthead--m-display-stack__content--Order);
14163
+ --pf-c-masthead__content--PaddingTop: var(--pf-c-masthead--m-display-stack__content--PaddingTop);
14164
+ --pf-c-masthead__content--PaddingBottom: var(--pf-c-masthead--m-display-stack__content--PaddingBottom);
14165
+ --pf-c-masthead__content--MarginLeft: var(--pf-c-masthead--m-display-stack__content--MarginLeft);
14166
+ --pf-c-masthead__content--c-nav--m-horizontal--MarginRight: var(--pf-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginRight);
14167
+ --pf-c-masthead__content--c-nav--m-horizontal--MarginLeft: var(--pf-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginLeft);
14168
+ color: var(--pf-global--Color--100);
14169
+ position: relative;
14170
+ display: grid;
14171
+ grid-template-columns: var(--pf-c-masthead--GridTemplateColumns);
14172
+ align-items: center;
14173
+ min-width: 0;
14174
+ padding-right: var(--pf-c-masthead--PaddingRight);
14175
+ padding-left: var(--pf-c-masthead--PaddingLeft);
14176
+ background-color: var(--pf-c-masthead--BackgroundColor);
14122
14177
  }
14123
14178
 
14124
- @media (min-width: 1200px) {
14125
- .pf-c-login {
14126
- --pf-c-login__container--MaxWidth: var(--pf-c-login__container--xl--MaxWidth);
14127
- }
14128
- }
14129
- @media (min-width: 576px) {
14130
- .pf-c-login {
14131
- --pf-c-login__header--PaddingRight: 0;
14132
- --pf-c-login__header--PaddingLeft: 0;
14179
+ @media screen and (min-width: 1200px) {
14180
+ .pf-c-masthead {
14181
+ --pf-c-masthead--inset: var(--pf-c-masthead--xl--inset);
14133
14182
  }
14134
14183
  }
14135
- @media (min-width: 1200px) {
14136
- .pf-c-login {
14137
- --pf-c-login__header--MarginBottom: var(--pf-c-login__header--xl--MarginBottom);
14138
- --pf-c-login__header--c-brand--MarginBottom: var(--pf-c-login__header--c-brand--xl--MarginBottom);
14184
+ @media screen and (min-width: 768px) {
14185
+ .pf-c-masthead {
14186
+ --pf-c-masthead--GridTemplateColumns: var(--pf-c-masthead--m-display-inline--GridTemplateColumns);
14187
+ --pf-c-masthead__main--GridColumn: var(--pf-c-masthead--m-display-inline__main--GridColumn);
14188
+ --pf-c-masthead__main--MinHeight: var(--pf-c-masthead--m-display-inline__main--MinHeight);
14189
+ --pf-c-masthead__main--Order: var(--pf-c-masthead--m-display-inline__main--Order);
14190
+ --pf-c-masthead__main--FlexBasis: var(--pf-c-masthead--m-display-inline__main--FlexBasis);
14191
+ --pf-c-masthead__main--PaddingTop: var(--pf-c-masthead--m-display-inline__main--PaddingTop);
14192
+ --pf-c-masthead__main--PaddingBottom: var(--pf-c-masthead--m-display-inline__main--PaddingBottom);
14193
+ --pf-c-masthead__main--MarginRight: var(--pf-c-masthead--m-display-inline__main--MarginRight);
14194
+ --pf-c-masthead__main--before--BorderBottom: var(--pf-c-masthead--m-display-inline__main--BorderBottom);
14195
+ --pf-c-masthead__content--GridColumn: var(--pf-c-masthead--m-display-inline__content--GridColumn);
14196
+ --pf-c-masthead__content--MinHeight: var(--pf-c-masthead--m-display-inline__content--MinHeight);
14197
+ --pf-c-masthead__content--Order: var(--pf-c-masthead--m-display-inline__content--Order);
14198
+ --pf-c-masthead__content--PaddingTop: var(--pf-c-masthead--m-display-inline__content--PaddingTop);
14199
+ --pf-c-masthead__content--PaddingBottom: var(--pf-c-masthead--m-display-inline__content--PaddingBottom);
14200
+ --pf-c-masthead__content--MarginLeft: var(--pf-c-masthead--m-display-inline__content--MarginLeft);
14201
+ --pf-c-masthead__content--c-nav--m-horizontal--MarginRight: var(--pf-c-masthead--m-display-inline__content--c-nav--m-horizontal--MarginRight);
14202
+ --pf-c-masthead__content--c-nav--m-horizontal--MarginLeft: var(--pf-c-masthead--m-display-inline__content--c-nav--m-horizontal--MarginLeft);
14139
14203
  }
14140
14204
  }
14141
- @media (min-width: 1200px) {
14142
- .pf-c-login {
14143
- --pf-c-login__main--MarginBottom: 0;
14144
- }
14205
+ .pf-c-masthead.pf-m-light {
14206
+ color: var(--pf-global--Color--100);
14207
+ --pf-c-masthead--BackgroundColor: var(--pf-c-masthead--m-light--BackgroundColor);
14208
+ --pf-c-masthead__main--BorderBottomColor: var(--pf-c-masthead--m-light__main--BorderBottomColor);
14145
14209
  }
14146
- @media (min-width: 768px) {
14147
- .pf-c-login {
14148
- --pf-c-login__main-header--PaddingRight: var(--pf-c-login__main-header--md--PaddingRight);
14149
- --pf-c-login__main-header--PaddingLeft: var(--pf-c-login__main-header--md--PaddingLeft);
14150
- --pf-c-login__main-header-desc--MarginBottom: var(--pf-c-login__main-header-desc--md--MarginBottom);
14151
- }
14210
+
14211
+ .pf-c-masthead.pf-m-light-200 {
14212
+ color: var(--pf-global--Color--100);
14213
+ --pf-c-masthead--BackgroundColor: var(--pf-c-masthead--m-light-200--BackgroundColor);
14214
+ --pf-c-masthead__main--BorderBottomColor: var(--pf-c-masthead--m-light-200__main--BorderBottomColor);
14152
14215
  }
14153
- @media (min-width: 768px) {
14154
- .pf-c-login {
14155
- --pf-c-login__main-body--PaddingRight: var(--pf-c-login__main-body--md--PaddingRight);
14156
- --pf-c-login__main-body--PaddingLeft: var(--pf-c-login__main-body--md--PaddingLeft);
14157
- }
14216
+
14217
+ .pf-c-masthead .pf-c-toolbar {
14218
+ --pf-c-toolbar__content--PaddingRight: var(--pf-c-masthead--c-toolbar__content--PaddingRight);
14219
+ --pf-c-toolbar__content--PaddingLeft: var(--pf-c-masthead--c-toolbar__content--PaddingLeft);
14220
+ --pf-c-toolbar__expandable-content--PaddingTop: var(--pf-c-masthead--c-toolbar__expandable-content--PaddingTop);
14221
+ --pf-c-toolbar__expandable-content--PaddingRight: var(--pf-c-masthead--c-toolbar__expandable-content--PaddingRight);
14222
+ --pf-c-toolbar__expandable-content--PaddingBottom: var(--pf-c-masthead--c-toolbar__expandable-content--PaddingBottom);
14223
+ --pf-c-toolbar__expandable-content--PaddingLeft: var(--pf-c-masthead--c-toolbar__expandable-content--PaddingLeft);
14224
+ width: 100%;
14158
14225
  }
14159
- @media (min-width: 576px) {
14160
- .pf-c-login {
14161
- --pf-c-login__footer--PaddingRight: 0;
14162
- --pf-c-login__footer--PaddingLeft: 0;
14163
- }
14164
- }
14165
- @media (min-width: 1200px) {
14166
- .pf-c-login {
14167
- --pf-c-login__footer--c-list--PaddingTop: var(--pf-c-login__footer--c-list--xl--PaddingTop);
14168
- }
14226
+
14227
+ .pf-c-masthead .pf-c-toolbar__content-section {
14228
+ flex-wrap: nowrap;
14169
14229
  }
14170
- @media (min-width: 1200px) {
14171
- .pf-c-login {
14172
- background-image: var(--pf-c-login--xl--BackgroundImage);
14173
- }
14230
+
14231
+ .pf-c-masthead .pf-c-toolbar__expandable-content {
14232
+ border-top: var(--pf-c-masthead--c-toolbar__expandable-content--BorderTopWidth) solid var(--pf-c-masthead--c-toolbar__expandable-content--BorderTopColor);
14174
14233
  }
14175
- @media (min-width: 576px) {
14176
- .pf-c-login {
14177
- align-items: center;
14178
- }
14234
+
14235
+ .pf-c-masthead .pf-c-menu-toggle {
14236
+ --pf-c-menu-toggle--before--BorderTopColor: var(--pf-c-masthead--c-menu-toggle--before--BorderTopColor);
14237
+ --pf-c-menu-toggle--before--BorderRightColor: var(--pf-c-masthead--c-menu-toggle--before--BorderRightColor);
14238
+ --pf-c-menu-toggle--before--BorderBottomColor: var(--pf-c-masthead--c-menu-toggle--before--BorderBottomColor);
14239
+ --pf-c-menu-toggle--before--BorderLeftColor: var(--pf-c-masthead--c-menu-toggle--before--BorderLeftColor);
14179
14240
  }
14180
- .pf-c-login__container {
14181
- width: 100%;
14182
- max-width: var(--pf-c-login__container--MaxWidth);
14241
+
14242
+ .pf-c-masthead .pf-c-menu-toggle.pf-m-full-height {
14243
+ --pf-c-menu-toggle--before--BorderRightColor: var(--pf-c-masthead--c-menu-toggle--m-full-height--before--BorderRightColor);
14244
+ --pf-c-menu-toggle--before--BorderLeftColor: var(--pf-c-masthead--c-menu-toggle--m-full-height--before--BorderLeftColor);
14183
14245
  }
14184
14246
 
14185
- @media (min-width: 1200px) {
14186
- .pf-c-login__container {
14187
- display: grid;
14188
- justify-content: center;
14189
- grid-column-gap: var(--pf-c-login__container--xl--GridColumnGap);
14190
- grid-template-columns: var(--pf-c-login__container--xl--GridTemplateColumns);
14191
- grid-template-areas: "main header" "main footer" "main .";
14192
- padding-right: var(--pf-c-login__container--PaddingRight);
14193
- padding-left: var(--pf-c-login__container--PaddingLeft);
14194
- }
14247
+ .pf-c-masthead .pf-c-context-selector {
14248
+ --pf-c-context-selector--Width: var(--pf-c-masthead--c-context-selector--Width);
14249
+ --pf-c-context-selector__toggle--BorderTopColor: var(--pf-c-masthead--c-context-selector__toggle--BorderTopColor);
14250
+ --pf-c-context-selector__toggle--BorderRightColor: var(--pf-c-masthead--c-context-selector__toggle--BorderRightColor);
14251
+ --pf-c-context-selector__toggle--BorderBottomColor: var(--pf-c-masthead--c-context-selector__toggle--BorderBottomColor);
14252
+ --pf-c-context-selector__toggle--BorderLeftColor: var(--pf-c-masthead--c-context-selector__toggle--BorderLeftColor);
14195
14253
  }
14196
- .pf-c-login__header {
14197
- color: var(--pf-global--Color--100);
14198
- grid-area: header;
14199
- padding-right: var(--pf-c-login__header--PaddingRight);
14200
- padding-left: var(--pf-c-login__header--PaddingLeft);
14254
+
14255
+ .pf-c-masthead .pf-c-context-selector.pf-m-full-height {
14256
+ --pf-c-context-selector__toggle--BorderRightColor: var(--pf-c-masthead--c-context-selector--m-full-height__toggle--BorderRightColor);
14257
+ --pf-c-context-selector__toggle--BorderLeftColor: var(--pf-c-masthead--c-context-selector--m-full-height__toggle--BorderLeftColor);
14201
14258
  }
14202
14259
 
14203
- @media (min-width: 1200px) {
14204
- .pf-c-login__header {
14205
- margin-top: var(--pf-c-login__header--xl--MarginTop);
14206
- }
14260
+ .pf-c-masthead .pf-c-dropdown {
14261
+ --pf-c-dropdown__toggle--before--BorderTopColor: var(--pf-c-masthead--c-dropdown__toggle--before--BorderTopColor);
14262
+ --pf-c-dropdown__toggle--before--BorderRightColor: var(--pf-c-masthead--c-dropdown__toggle--before--BorderRightColor);
14263
+ --pf-c-dropdown__toggle--before--BorderBottomColor: var(--pf-c-masthead--c-dropdown__toggle--before--BorderBottomColor);
14264
+ --pf-c-dropdown__toggle--before--BorderLeftColor: var(--pf-c-masthead--c-dropdown__toggle--before--BorderLeftColor);
14207
14265
  }
14208
- .pf-c-login__header .pf-c-brand {
14209
- margin-bottom: var(--pf-c-login__header--c-brand--MarginBottom);
14266
+
14267
+ .pf-c-masthead .pf-c-dropdown.pf-m-full-height {
14268
+ --pf-c-dropdown__toggle--before--BorderRightColor: var(--pf-c-masthead--c-dropdown--m-full-height__toggle--before--BorderRightColor);
14269
+ --pf-c-dropdown__toggle--before--BorderLeftColor: var(--pf-c-masthead--c-dropdown--m-full-height__toggle--before--BorderLeftColor);
14210
14270
  }
14211
14271
 
14212
- .pf-c-login__main {
14213
- margin-bottom: var(--pf-c-login__main--MarginBottom);
14214
- background-color: var(--pf-c-login__main--BackgroundColor);
14215
- grid-area: main;
14272
+ .pf-c-masthead__main {
14273
+ position: relative;
14274
+ display: flex;
14275
+ flex-basis: var(--pf-c-masthead__main--FlexBasis);
14276
+ align-items: center;
14277
+ align-self: stretch;
14278
+ order: var(--pf-c-masthead__main--Order);
14279
+ min-height: var(--pf-c-masthead__main--MinHeight);
14280
+ padding-top: var(--pf-c-masthead__main--PaddingTop);
14281
+ padding-bottom: var(--pf-c-masthead__main--PaddingBottom);
14282
+ margin-right: var(--pf-c-masthead__main--MarginRight);
14283
+ grid-column: var(--pf-c-masthead__main--GridColumn);
14216
14284
  }
14217
14285
 
14218
- .pf-c-login__main > :first-child:not(.pf-c-login__main-header) {
14219
- padding-top: var(--pf-c-login__main-header--PaddingTop);
14286
+ .pf-c-masthead__main::before {
14287
+ position: absolute;
14288
+ right: var(--pf-c-masthead__main--before--Right);
14289
+ bottom: 0;
14290
+ left: var(--pf-c-masthead__main--before--Left);
14291
+ content: "";
14292
+ border-bottom: var(--pf-c-masthead__main--before--BorderBottom);
14220
14293
  }
14221
14294
 
14222
- .pf-c-login__main > :last-child:not(.pf-c-login__main-footer) {
14223
- padding-bottom: var(--pf-c-login__main-footer--PaddingBottom);
14295
+ .pf-c-masthead__main:last-child {
14296
+ --pf-c-masthead__main--MarginRight: 0;
14224
14297
  }
14225
14298
 
14226
- .pf-c-login__main-header {
14227
- display: grid;
14228
- grid-template-columns: 100%;
14229
- column-gap: var(--pf-c-login__main-header--ColumnGap);
14230
- row-gap: var(--pf-c-login__main-header--RowGap);
14299
+ .pf-c-masthead__content {
14300
+ display: flex;
14301
+ flex-grow: 1;
14231
14302
  align-items: center;
14232
- padding: var(--pf-c-login__main-header--PaddingTop) var(--pf-c-login__main-header--PaddingRight) var(--pf-c-login__main-header--PaddingBottom) var(--pf-c-login__main-header--PaddingLeft);
14303
+ align-self: stretch;
14304
+ order: var(--pf-c-masthead__content--Order);
14305
+ min-height: var(--pf-c-masthead__content--MinHeight);
14306
+ padding-top: var(--pf-c-masthead__content--PaddingTop);
14307
+ padding-bottom: var(--pf-c-masthead__content--PaddingBottom);
14308
+ margin-left: var(--pf-c-masthead__content--MarginLeft);
14309
+ grid-column: var(--pf-c-masthead__content--GridColumn);
14310
+ grid-column-end: -1;
14311
+ flex-shrink: 1;
14233
14312
  }
14234
14313
 
14235
- @media (min-width: 768px) {
14236
- .pf-c-login__main-header {
14237
- grid-template-columns: 1fr auto;
14238
- }
14239
- }
14240
- .pf-c-login__main-header .pf-c-dropdown {
14241
- grid-column: auto;
14242
- grid-row: auto;
14314
+ .pf-c-masthead__content:only-child {
14315
+ --pf-c-masthead__content--MarginLeft: 0;
14243
14316
  }
14244
14317
 
14245
- @media (min-width: 768px) {
14246
- .pf-c-login__main-header .pf-c-dropdown {
14247
- grid-column: 2/3;
14248
- grid-row: 1;
14249
- }
14250
- }
14251
- .pf-c-login__main-header-desc {
14252
- margin-bottom: var(--pf-c-login__main-header-desc--MarginBottom);
14253
- font-size: var(--pf-c-login__main-header-desc--FontSize);
14254
- grid-column: 1/-1;
14318
+ .pf-c-masthead__content .pf-c-nav.pf-m-horizontal {
14319
+ margin-right: var(--pf-c-masthead__content--c-nav--m-horizontal--MarginRight);
14320
+ margin-left: var(--pf-c-masthead__content--c-nav--m-horizontal--MarginLeft);
14255
14321
  }
14256
14322
 
14257
- .pf-c-login__main-body {
14258
- padding-right: var(--pf-c-login__main-body--PaddingRight);
14259
- padding-bottom: var(--pf-c-login__main-body--PaddingBottom);
14260
- padding-left: var(--pf-c-login__main-body--PaddingLeft);
14323
+ .pf-c-masthead__toggle ~ .pf-c-masthead__content {
14324
+ --pf-c-masthead__content--c-nav--m-horizontal--MarginLeft: calc(var(--pf-c-masthead__content--MarginLeft) * -1);
14261
14325
  }
14262
14326
 
14263
- .pf-c-login__main-footer {
14264
- display: flex;
14265
- flex-wrap: wrap;
14327
+ .pf-c-masthead__main,
14328
+ .pf-c-masthead__brand,
14329
+ .pf-c-masthead__content {
14330
+ min-width: 0;
14266
14331
  }
14267
14332
 
14268
- .pf-c-login__main-footer .pf-c-title {
14269
- margin-bottom: var(--pf-c-login__main-footer--c-title--MarginBottom);
14270
- text-align: center;
14333
+ .pf-c-masthead__brand {
14334
+ display: inline-flex;
14335
+ align-self: center;
14271
14336
  }
14272
14337
 
14273
- .pf-c-login__main-footer > * {
14274
- flex-basis: 100%;
14338
+ .pf-c-masthead__toggle {
14339
+ grid-column: var(--pf-c-masthead__toggle--GridColumn);
14340
+ align-self: center;
14341
+ margin-right: var(--pf-c-masthead__toggle--MarginRight);
14342
+ margin-left: var(--pf-c-masthead__toggle--MarginLeft);
14275
14343
  }
14276
14344
 
14277
- .pf-c-login__main-footer-links {
14278
- display: flex;
14279
- flex-wrap: wrap;
14280
- justify-content: center;
14281
- padding: var(--pf-c-login__main-footer-links--PaddingTop) var(--pf-c-login__main-footer-links--PaddingRight) var(--pf-c-login__main-footer-links--PaddingBottom) var(--pf-c-login__main-footer-links--PaddingLeft);
14345
+ .pf-c-masthead__toggle .pf-c-button {
14346
+ --pf-c-button--FontSize: var(--pf-c-masthead__toggle--c-button--FontSize);
14282
14347
  }
14283
14348
 
14284
- .pf-c-login__main-footer-links-item {
14285
- padding-right: var(--pf-c-login__main-footer-links-item--PaddingRight);
14286
- padding-left: var(--pf-c-login__main-footer-links-item--PaddingLeft);
14287
- margin-bottom: var(--pf-c-login__main-footer-links-item--MarginBottom);
14349
+ .pf-c-masthead.pf-m-display-stack {
14350
+ --pf-c-masthead--GridTemplateColumns: var(--pf-c-masthead--m-display-stack--GridTemplateColumns);
14351
+ --pf-c-masthead__main--GridColumn: var(--pf-c-masthead--m-display-stack__main--GridColumn);
14352
+ --pf-c-masthead__main--MinHeight: var(--pf-c-masthead--m-display-stack__main--MinHeight);
14353
+ --pf-c-masthead__main--Order: var(--pf-c-masthead--m-display-stack__main--Order);
14354
+ --pf-c-masthead__main--FlexBasis: var(--pf-c-masthead--m-display-stack__main--FlexBasis);
14355
+ --pf-c-masthead__main--PaddingTop: var(--pf-c-masthead--m-display-stack__main--PaddingTop);
14356
+ --pf-c-masthead__main--PaddingBottom: var(--pf-c-masthead--m-display-stack__main--PaddingBottom);
14357
+ --pf-c-masthead__main--MarginRight: var(--pf-c-masthead--m-display-stack__main--MarginRight);
14358
+ --pf-c-masthead__main--before--BorderBottom: var(--pf-c-masthead--m-display-stack__main--before--BorderBottom);
14359
+ --pf-c-masthead__content--GridColumn: var(--pf-c-masthead--m-display-stack__content--GridColumn);
14360
+ --pf-c-masthead__content--MinHeight: var(--pf-c-masthead--m-display-stack__content--MinHeight);
14361
+ --pf-c-masthead__content--Order: var(--pf-c-masthead--m-display-stack__content--Order);
14362
+ --pf-c-masthead__content--PaddingTop: var(--pf-c-masthead--m-display-stack__content--PaddingTop);
14363
+ --pf-c-masthead__content--PaddingBottom: var(--pf-c-masthead--m-display-stack__content--PaddingBottom);
14364
+ --pf-c-masthead__content--MarginLeft: var(--pf-c-masthead--m-display-stack__content--MarginLeft);
14365
+ --pf-c-masthead__content--c-nav--m-horizontal--MarginRight: var(--pf-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginRight);
14366
+ --pf-c-masthead__content--c-nav--m-horizontal--MarginLeft: var(--pf-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginLeft);
14288
14367
  }
14289
14368
 
14290
- .pf-c-login__main-footer-links-item-link svg {
14291
- fill: var(--pf-c-login__main-footer-links-item-link-svg--Fill);
14292
- width: 100%;
14293
- max-width: var(--pf-c-login__main-footer-links-item-link-svg--Width);
14294
- height: 100%;
14295
- max-height: var(--pf-c-login__main-footer-links-item-link-svg--Height);
14369
+ .pf-c-masthead.pf-m-display-inline {
14370
+ --pf-c-masthead--GridTemplateColumns: var(--pf-c-masthead--m-display-inline--GridTemplateColumns);
14371
+ --pf-c-masthead__main--GridColumn: var(--pf-c-masthead--m-display-inline__main--GridColumn);
14372
+ --pf-c-masthead__main--MinHeight: var(--pf-c-masthead--m-display-inline__main--MinHeight);
14373
+ --pf-c-masthead__main--Order: var(--pf-c-masthead--m-display-inline__main--Order);
14374
+ --pf-c-masthead__main--FlexBasis: var(--pf-c-masthead--m-display-inline__main--FlexBasis);
14375
+ --pf-c-masthead__main--PaddingTop: var(--pf-c-masthead--m-display-inline__main--PaddingTop);
14376
+ --pf-c-masthead__main--PaddingBottom: var(--pf-c-masthead--m-display-inline__main--PaddingBottom);
14377
+ --pf-c-masthead__main--MarginRight: var(--pf-c-masthead--m-display-inline__main--MarginRight);
14378
+ --pf-c-masthead__main--before--BorderBottom: var(--pf-c-masthead--m-display-inline__main--BorderBottom);
14379
+ --pf-c-masthead__content--GridColumn: var(--pf-c-masthead--m-display-inline__content--GridColumn);
14380
+ --pf-c-masthead__content--MinHeight: var(--pf-c-masthead--m-display-inline__content--MinHeight);
14381
+ --pf-c-masthead__content--Order: var(--pf-c-masthead--m-display-inline__content--Order);
14382
+ --pf-c-masthead__content--PaddingTop: var(--pf-c-masthead--m-display-inline__content--PaddingTop);
14383
+ --pf-c-masthead__content--PaddingBottom: var(--pf-c-masthead--m-display-inline__content--PaddingBottom);
14384
+ --pf-c-masthead__content--MarginLeft: var(--pf-c-masthead--m-display-inline__content--MarginLeft);
14385
+ --pf-c-masthead__content--c-nav--m-horizontal--MarginRight: var(--pf-c-masthead--m-display-inline__content--c-nav--m-horizontal--MarginRight);
14386
+ --pf-c-masthead__content--c-nav--m-horizontal--MarginLeft: var(--pf-c-masthead--m-display-inline__content--c-nav--m-horizontal--MarginLeft);
14296
14387
  }
14297
14388
 
14298
- .pf-c-login__main-footer-links-item-link:hover svg {
14299
- fill: var(--pf-c-login__main-footer-links-item-link-svg--hover--Fill);
14389
+ .pf-c-masthead.pf-m-inset-none {
14390
+ --pf-c-masthead--inset: 0;
14300
14391
  }
14301
14392
 
14302
- .pf-c-login__main-footer-band {
14303
- padding: var(--pf-c-login__main-footer-band--PaddingTop) var(--pf-c-login__main-footer-band--PaddingRight) var(--pf-c-login__main-footer-band--PaddingBottom) var(--pf-c-login__main-footer-band--PaddingLeft);
14304
- text-align: center;
14305
- background-color: var(--pf-c-login__main-footer-band--BackgroundColor);
14393
+ .pf-c-masthead.pf-m-inset-sm {
14394
+ --pf-c-masthead--inset: var(--pf-global--spacer--sm);
14306
14395
  }
14307
14396
 
14308
- .pf-c-login__main-footer-band > * + * {
14309
- padding-top: var(--pf-c-login__main-footer-band-item--PaddingTop);
14397
+ .pf-c-masthead.pf-m-inset-md {
14398
+ --pf-c-masthead--inset: var(--pf-global--spacer--md);
14310
14399
  }
14311
14400
 
14312
- .pf-c-login__footer {
14313
- color: var(--pf-global--Color--100);
14314
- grid-area: footer;
14315
- padding-right: var(--pf-c-login__footer--PaddingRight);
14316
- padding-left: var(--pf-c-login__footer--PaddingLeft);
14401
+ .pf-c-masthead.pf-m-inset-lg {
14402
+ --pf-c-masthead--inset: var(--pf-global--spacer--lg);
14317
14403
  }
14318
14404
 
14319
- .pf-c-login__footer .pf-c-list a {
14320
- color: unset;
14405
+ .pf-c-masthead.pf-m-inset-xl {
14406
+ --pf-c-masthead--inset: var(--pf-global--spacer--xl);
14321
14407
  }
14322
14408
 
14323
- .pf-c-login__footer .pf-c-list:not(:only-child) {
14324
- padding-top: var(--pf-c-login__footer--c-list--PaddingTop);
14409
+ .pf-c-masthead.pf-m-inset-2xl {
14410
+ --pf-c-masthead--inset: var(--pf-global--spacer--2xl);
14325
14411
  }
14326
14412
 
14327
- .pf-c-masthead.pf-m-light-200, .pf-c-masthead.pf-m-light {
14328
- --pf-global--Color--100: var(--pf-global--Color--dark-100);
14329
- --pf-global--Color--200: var(--pf-global--Color--dark-200);
14330
- --pf-global--BorderColor--100: var(--pf-global--BorderColor--dark-100);
14331
- --pf-global--primary-color--100: var(--pf-global--primary-color--dark-100);
14332
- --pf-global--link--Color: var(--pf-global--link--Color--dark);
14333
- --pf-global--link--Color--hover: var(--pf-global--link--Color--dark--hover);
14334
- --pf-global--BackgroundColor--100: var(--pf-global--BackgroundColor--light-100);
14335
- }
14413
+ @media (min-width: 576px) {
14414
+ .pf-c-masthead.pf-m-display-stack-on-sm {
14415
+ --pf-c-masthead--GridTemplateColumns: var(--pf-c-masthead--m-display-stack--GridTemplateColumns);
14416
+ --pf-c-masthead__main--GridColumn: var(--pf-c-masthead--m-display-stack__main--GridColumn);
14417
+ --pf-c-masthead__main--MinHeight: var(--pf-c-masthead--m-display-stack__main--MinHeight);
14418
+ --pf-c-masthead__main--Order: var(--pf-c-masthead--m-display-stack__main--Order);
14419
+ --pf-c-masthead__main--FlexBasis: var(--pf-c-masthead--m-display-stack__main--FlexBasis);
14420
+ --pf-c-masthead__main--PaddingTop: var(--pf-c-masthead--m-display-stack__main--PaddingTop);
14421
+ --pf-c-masthead__main--PaddingBottom: var(--pf-c-masthead--m-display-stack__main--PaddingBottom);
14422
+ --pf-c-masthead__main--MarginRight: var(--pf-c-masthead--m-display-stack__main--MarginRight);
14423
+ --pf-c-masthead__main--before--BorderBottom: var(--pf-c-masthead--m-display-stack__main--before--BorderBottom);
14424
+ --pf-c-masthead__content--GridColumn: var(--pf-c-masthead--m-display-stack__content--GridColumn);
14425
+ --pf-c-masthead__content--MinHeight: var(--pf-c-masthead--m-display-stack__content--MinHeight);
14426
+ --pf-c-masthead__content--Order: var(--pf-c-masthead--m-display-stack__content--Order);
14427
+ --pf-c-masthead__content--PaddingTop: var(--pf-c-masthead--m-display-stack__content--PaddingTop);
14428
+ --pf-c-masthead__content--PaddingBottom: var(--pf-c-masthead--m-display-stack__content--PaddingBottom);
14429
+ --pf-c-masthead__content--MarginLeft: var(--pf-c-masthead--m-display-stack__content--MarginLeft);
14430
+ --pf-c-masthead__content--c-nav--m-horizontal--MarginRight: var(--pf-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginRight);
14431
+ --pf-c-masthead__content--c-nav--m-horizontal--MarginLeft: var(--pf-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginLeft);
14432
+ }
14336
14433
 
14337
- .pf-c-masthead {
14338
- --pf-global--Color--100: var(--pf-global--Color--light-100);
14339
- --pf-global--Color--200: var(--pf-global--Color--light-200);
14340
- --pf-global--BorderColor--100: var(--pf-global--BorderColor--light-100);
14341
- --pf-global--primary-color--100: var(--pf-global--primary-color--light-100);
14342
- --pf-global--link--Color: var(--pf-global--link--Color--light);
14343
- --pf-global--link--Color--hover: var(--pf-global--link--Color--light);
14344
- --pf-global--BackgroundColor--100: var(--pf-global--BackgroundColor--dark-100);
14434
+ .pf-c-masthead.pf-m-display-inline-on-sm {
14435
+ --pf-c-masthead--GridTemplateColumns: var(--pf-c-masthead--m-display-inline--GridTemplateColumns);
14436
+ --pf-c-masthead__main--GridColumn: var(--pf-c-masthead--m-display-inline__main--GridColumn);
14437
+ --pf-c-masthead__main--MinHeight: var(--pf-c-masthead--m-display-inline__main--MinHeight);
14438
+ --pf-c-masthead__main--Order: var(--pf-c-masthead--m-display-inline__main--Order);
14439
+ --pf-c-masthead__main--FlexBasis: var(--pf-c-masthead--m-display-inline__main--FlexBasis);
14440
+ --pf-c-masthead__main--PaddingTop: var(--pf-c-masthead--m-display-inline__main--PaddingTop);
14441
+ --pf-c-masthead__main--PaddingBottom: var(--pf-c-masthead--m-display-inline__main--PaddingBottom);
14442
+ --pf-c-masthead__main--MarginRight: var(--pf-c-masthead--m-display-inline__main--MarginRight);
14443
+ --pf-c-masthead__main--before--BorderBottom: var(--pf-c-masthead--m-display-inline__main--BorderBottom);
14444
+ --pf-c-masthead__content--GridColumn: var(--pf-c-masthead--m-display-inline__content--GridColumn);
14445
+ --pf-c-masthead__content--MinHeight: var(--pf-c-masthead--m-display-inline__content--MinHeight);
14446
+ --pf-c-masthead__content--Order: var(--pf-c-masthead--m-display-inline__content--Order);
14447
+ --pf-c-masthead__content--PaddingTop: var(--pf-c-masthead--m-display-inline__content--PaddingTop);
14448
+ --pf-c-masthead__content--PaddingBottom: var(--pf-c-masthead--m-display-inline__content--PaddingBottom);
14449
+ --pf-c-masthead__content--MarginLeft: var(--pf-c-masthead--m-display-inline__content--MarginLeft);
14450
+ --pf-c-masthead__content--c-nav--m-horizontal--MarginRight: var(--pf-c-masthead--m-display-inline__content--c-nav--m-horizontal--MarginRight);
14451
+ --pf-c-masthead__content--c-nav--m-horizontal--MarginLeft: var(--pf-c-masthead--m-display-inline__content--c-nav--m-horizontal--MarginLeft);
14452
+ }
14345
14453
  }
14454
+ @media (min-width: 576px) {
14455
+ .pf-c-masthead.pf-m-inset-none-on-sm {
14456
+ --pf-c-masthead--inset: 0;
14457
+ }
14346
14458
 
14347
- .pf-c-masthead .pf-c-card {
14348
- --pf-c-card--BackgroundColor: var(--pf-global--BackgroundColor--dark-transparent-200);
14349
- }
14459
+ .pf-c-masthead.pf-m-inset-sm-on-sm {
14460
+ --pf-c-masthead--inset: var(--pf-global--spacer--sm);
14461
+ }
14350
14462
 
14351
- .pf-c-masthead .pf-c-button {
14352
- --pf-c-button--m-primary--Color: var(--pf-global--primary-color--dark-100);
14353
- --pf-c-button--m-primary--hover--Color: var(--pf-global--primary-color--dark-100);
14354
- --pf-c-button--m-primary--focus--Color: var(--pf-global--primary-color--dark-100);
14355
- --pf-c-button--m-primary--active--Color: var(--pf-global--primary-color--dark-100);
14356
- --pf-c-button--m-primary--BackgroundColor: var(--pf-global--BackgroundColor--light-100);
14357
- --pf-c-button--m-primary--hover--BackgroundColor: var(--pf-global--BackgroundColor--light-300);
14358
- --pf-c-button--m-primary--focus--BackgroundColor: var(--pf-global--BackgroundColor--light-300);
14359
- --pf-c-button--m-primary--active--BackgroundColor: var(--pf-global--BackgroundColor--light-300);
14360
- --pf-c-button--m-secondary--Color: var(--pf-global--Color--light-100);
14361
- --pf-c-button--m-secondary--hover--Color: var(--pf-global--Color--light-100);
14362
- --pf-c-button--m-secondary--focus--Color: var(--pf-global--Color--light-100);
14363
- --pf-c-button--m-secondary--active--Color: var(--pf-global--Color--light-100);
14364
- --pf-c-button--m-secondary--BorderColor: var(--pf-global--Color--light-100);
14365
- --pf-c-button--m-secondary--hover--BorderColor: var(--pf-global--Color--light-100);
14366
- --pf-c-button--m-secondary--focus--BorderColor: var(--pf-global--Color--light-100);
14367
- --pf-c-button--m-secondary--active--BorderColor: var(--pf-global--Color--light-100);
14368
- }
14463
+ .pf-c-masthead.pf-m-inset-md-on-sm {
14464
+ --pf-c-masthead--inset: var(--pf-global--spacer--md);
14465
+ }
14369
14466
 
14370
- .pf-c-masthead {
14371
- --pf-c-masthead--PaddingLeft: var(--pf-c-masthead--inset);
14372
- --pf-c-masthead--PaddingRight: var(--pf-c-masthead--inset);
14373
- --pf-c-masthead--BackgroundColor: var(--pf-global--BackgroundColor--dark-100);
14374
- --pf-c-masthead--inset: var(--pf-global--spacer--md);
14375
- --pf-c-masthead--xl--inset: var(--pf-global--spacer--lg);
14376
- --pf-c-masthead--m-display-stack--GridTemplateColumns: max-content 1fr;
14377
- --pf-c-masthead--m-display-stack__main--GridColumn: -1 / 1;
14378
- --pf-c-masthead--m-display-stack__main--MinHeight: 4.375rem;
14379
- --pf-c-masthead--m-display-stack__main--Order: -1;
14380
- --pf-c-masthead--m-display-stack__main--FlexBasis: 100%;
14381
- --pf-c-masthead--m-display-stack__main--PaddingTop: var(--pf-global--spacer--sm);
14382
- --pf-c-masthead--m-display-stack__main--PaddingBottom: var(--pf-global--spacer--sm);
14383
- --pf-c-masthead--m-display-stack__main--MarginRight: 0;
14384
- --pf-c-masthead--m-display-stack__main--before--BorderBottom: var(--pf-c-masthead__main--before--BorderBottomWidth) solid var(--pf-c-masthead__main--before--BorderBottomColor);
14385
- --pf-c-masthead--m-display-stack__toggle--GridColumn: 1;
14386
- --pf-c-masthead--m-display-stack__content--GridColumn: 2;
14387
- --pf-c-masthead--m-display-stack__content--MinHeight: 4.375rem;
14388
- --pf-c-masthead--m-display-stack__content--Order: 1;
14389
- --pf-c-masthead--m-display-stack__content--PaddingTop: 0;
14390
- --pf-c-masthead--m-display-stack__content--PaddingBottom: 0;
14391
- --pf-c-masthead--m-display-stack__content--MarginLeft: 0;
14392
- --pf-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginRight: calc(var(--pf-c-masthead--inset) * -1);
14393
- --pf-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginLeft: calc(var(--pf-c-masthead--inset) * -1);
14394
- --pf-c-masthead--m-display-inline--GridTemplateColumns: max-content max-content 1fr;
14395
- --pf-c-masthead--m-display-inline__main--GridColumn: 2;
14396
- --pf-c-masthead--m-display-inline__main--MinHeight: 4.375rem;
14397
- --pf-c-masthead--m-display-inline__main--Order: 0;
14398
- --pf-c-masthead--m-display-inline__main--FlexBasis: auto;
14399
- --pf-c-masthead--m-display-inline__main--PaddingTop: 0;
14400
- --pf-c-masthead--m-display-inline__main--PaddingBottom: 0;
14401
- --pf-c-masthead--m-display-inline__main--MarginRight: calc(var(--pf-global--spacer--lg) / 2);
14402
- --pf-c-masthead--m-display-inline__main--BorderBottom: 0;
14403
- --pf-c-masthead--m-display-inline__toggle--GridColumn: 1;
14404
- --pf-c-masthead--m-display-inline__content--GridColumn: 3;
14405
- --pf-c-masthead--m-display-inline__content--MinHeight: 4.375rem;
14406
- --pf-c-masthead--m-display-inline__content--Order: 0;
14407
- --pf-c-masthead--m-display-inline__content--PaddingTop: 0;
14408
- --pf-c-masthead--m-display-inline__content--PaddingBottom: 0;
14409
- --pf-c-masthead--m-display-inline__content--MarginLeft: calc(var(--pf-global--spacer--lg) / 2);
14410
- --pf-c-masthead--m-display-inline__content--c-nav--m-horizontal--MarginRight: 0;
14411
- --pf-c-masthead--m-display-inline__content--c-nav--m-horizontal--MarginLeft: 0;
14412
- --pf-c-masthead__main--before--Right: calc(var(--pf-c-masthead--inset) * -1);
14413
- --pf-c-masthead__main--before--Left: calc(var(--pf-c-masthead--inset) * -1);
14414
- --pf-c-masthead__main--before--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
14415
- --pf-c-masthead__main--before--BorderBottomColor: var(--pf-global--palette--black-600);
14416
- --pf-c-masthead__toggle--MarginRight: var(--pf-global--spacer--sm);
14417
- --pf-c-masthead__toggle--MarginLeft: calc(var(--pf-global--spacer--md) * -1);
14418
- --pf-c-masthead__toggle--c-button--FontSize: var(--pf-global--FontSize--2xl);
14419
- --pf-c-masthead--m-light--BackgroundColor: var(--pf-global--BackgroundColor--100);
14420
- --pf-c-masthead--m-light__main--BorderBottomColor: var(--pf-global--BorderColor--300);
14421
- --pf-c-masthead--m-light-200--BackgroundColor: var(--pf-global--BackgroundColor--200);
14422
- --pf-c-masthead--m-light-200__main--BorderBottomColor: var(--pf-global--BorderColor--100);
14423
- --pf-c-masthead--c-toolbar__item--Display: flex;
14424
- --pf-c-masthead--item-border-color--base: var(--pf-global--palette--black-800);
14425
- --pf-c-masthead--c-context-selector--Width: auto;
14426
- --pf-c-masthead--c-context-selector__toggle--BorderTopColor: transparent;
14427
- --pf-c-masthead--c-context-selector__toggle--BorderRightColor: transparent;
14428
- --pf-c-masthead--c-context-selector__toggle--BorderBottomColor: transparent;
14429
- --pf-c-masthead--c-context-selector__toggle--BorderLeftColor: transparent;
14430
- --pf-c-masthead--c-context-selector--m-full-height__toggle--BorderRightColor: var(--pf-c-masthead--item-border-color--base);
14431
- --pf-c-masthead--c-context-selector--m-full-height__toggle--BorderLeftColor: var(--pf-c-masthead--item-border-color--base);
14432
- --pf-c-masthead--c-dropdown__toggle--before--BorderTopColor: transparent;
14433
- --pf-c-masthead--c-dropdown__toggle--before--BorderRightColor: transparent;
14434
- --pf-c-masthead--c-dropdown__toggle--before--BorderBottomColor: transparent;
14435
- --pf-c-masthead--c-dropdown__toggle--before--BorderLeftColor: transparent;
14436
- --pf-c-masthead--c-dropdown--m-full-height__toggle--before--BorderRightColor: var(--pf-c-masthead--item-border-color--base);
14437
- --pf-c-masthead--c-dropdown--m-full-height__toggle--before--BorderLeftColor: var(--pf-c-masthead--item-border-color--base);
14438
- --pf-c-masthead--c-menu-toggle--before--BorderTopColor: transparent;
14439
- --pf-c-masthead--c-menu-toggle--before--BorderRightColor: transparent;
14440
- --pf-c-masthead--c-menu-toggle--before--BorderBottomColor: transparent;
14441
- --pf-c-masthead--c-menu-toggle--before--BorderLeftColor: transparent;
14442
- --pf-c-masthead--c-menu-toggle--m-full-height--before--BorderRightColor: var(--pf-c-masthead--item-border-color--base);
14443
- --pf-c-masthead--c-menu-toggle--m-full-height--before--BorderLeftColor: var(--pf-c-masthead--item-border-color--base);
14444
- --pf-c-masthead--c-toolbar__content--PaddingRight: 0;
14445
- --pf-c-masthead--c-toolbar__content--PaddingLeft: 0;
14446
- --pf-c-masthead--c-toolbar__expandable-content--PaddingTop: var(--pf-global--spacer--md);
14447
- --pf-c-masthead--c-toolbar__expandable-content--PaddingRight: var(--pf-c-masthead--inset);
14448
- --pf-c-masthead--c-toolbar__expandable-content--PaddingBottom: var(--pf-global--spacer--md);
14449
- --pf-c-masthead--c-toolbar__expandable-content--PaddingLeft: var(--pf-c-masthead--inset);
14450
- --pf-c-masthead--c-toolbar__expandable-content--BorderTopWidth: var(--pf-global--BorderWidth--sm);
14451
- --pf-c-masthead--c-toolbar__expandable-content--BorderTopColor: var(--pf-c-masthead--item-border-color--base);
14452
- --pf-c-masthead--GridTemplateColumns: var(--pf-c-masthead--m-display-stack--GridTemplateColumns);
14453
- --pf-c-masthead__main--GridColumn: var(--pf-c-masthead--m-display-stack__main--GridColumn);
14454
- --pf-c-masthead__main--MinHeight: var(--pf-c-masthead--m-display-stack__main--MinHeight);
14455
- --pf-c-masthead__main--Order: var(--pf-c-masthead--m-display-stack__main--Order);
14456
- --pf-c-masthead__main--FlexBasis: var(--pf-c-masthead--m-display-stack__main--FlexBasis);
14457
- --pf-c-masthead__main--PaddingTop: var(--pf-c-masthead--m-display-stack__main--PaddingTop);
14458
- --pf-c-masthead__main--PaddingBottom: var(--pf-c-masthead--m-display-stack__main--PaddingBottom);
14459
- --pf-c-masthead__main--MarginRight: var(--pf-c-masthead--m-display-stack__main--MarginRight);
14460
- --pf-c-masthead__main--before--BorderBottom: var(--pf-c-masthead--m-display-stack__main--before--BorderBottom);
14461
- --pf-c-masthead__content--GridColumn: var(--pf-c-masthead--m-display-stack__content--GridColumn);
14462
- --pf-c-masthead__content--MinHeight: var(--pf-c-masthead--m-display-stack__content--MinHeight);
14463
- --pf-c-masthead__content--Order: var(--pf-c-masthead--m-display-stack__content--Order);
14464
- --pf-c-masthead__content--PaddingTop: var(--pf-c-masthead--m-display-stack__content--PaddingTop);
14465
- --pf-c-masthead__content--PaddingBottom: var(--pf-c-masthead--m-display-stack__content--PaddingBottom);
14466
- --pf-c-masthead__content--MarginLeft: var(--pf-c-masthead--m-display-stack__content--MarginLeft);
14467
- --pf-c-masthead__content--c-nav--m-horizontal--MarginRight: var(--pf-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginRight);
14468
- --pf-c-masthead__content--c-nav--m-horizontal--MarginLeft: var(--pf-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginLeft);
14469
- color: var(--pf-global--Color--100);
14470
- position: relative;
14471
- display: grid;
14472
- grid-template-columns: var(--pf-c-masthead--GridTemplateColumns);
14473
- align-items: center;
14474
- min-width: 0;
14475
- padding-right: var(--pf-c-masthead--PaddingRight);
14476
- padding-left: var(--pf-c-masthead--PaddingLeft);
14477
- background-color: var(--pf-c-masthead--BackgroundColor);
14478
- }
14467
+ .pf-c-masthead.pf-m-inset-lg-on-sm {
14468
+ --pf-c-masthead--inset: var(--pf-global--spacer--lg);
14469
+ }
14479
14470
 
14480
- @media screen and (min-width: 1200px) {
14481
- .pf-c-masthead {
14482
- --pf-c-masthead--inset: var(--pf-c-masthead--xl--inset);
14471
+ .pf-c-masthead.pf-m-inset-xl-on-sm {
14472
+ --pf-c-masthead--inset: var(--pf-global--spacer--xl);
14473
+ }
14474
+
14475
+ .pf-c-masthead.pf-m-inset-2xl-on-sm {
14476
+ --pf-c-masthead--inset: var(--pf-global--spacer--2xl);
14483
14477
  }
14484
14478
  }
14485
- @media screen and (min-width: 768px) {
14486
- .pf-c-masthead {
14479
+ @media (min-width: 768px) {
14480
+ .pf-c-masthead.pf-m-display-stack-on-md {
14481
+ --pf-c-masthead--GridTemplateColumns: var(--pf-c-masthead--m-display-stack--GridTemplateColumns);
14482
+ --pf-c-masthead__main--GridColumn: var(--pf-c-masthead--m-display-stack__main--GridColumn);
14483
+ --pf-c-masthead__main--MinHeight: var(--pf-c-masthead--m-display-stack__main--MinHeight);
14484
+ --pf-c-masthead__main--Order: var(--pf-c-masthead--m-display-stack__main--Order);
14485
+ --pf-c-masthead__main--FlexBasis: var(--pf-c-masthead--m-display-stack__main--FlexBasis);
14486
+ --pf-c-masthead__main--PaddingTop: var(--pf-c-masthead--m-display-stack__main--PaddingTop);
14487
+ --pf-c-masthead__main--PaddingBottom: var(--pf-c-masthead--m-display-stack__main--PaddingBottom);
14488
+ --pf-c-masthead__main--MarginRight: var(--pf-c-masthead--m-display-stack__main--MarginRight);
14489
+ --pf-c-masthead__main--before--BorderBottom: var(--pf-c-masthead--m-display-stack__main--before--BorderBottom);
14490
+ --pf-c-masthead__content--GridColumn: var(--pf-c-masthead--m-display-stack__content--GridColumn);
14491
+ --pf-c-masthead__content--MinHeight: var(--pf-c-masthead--m-display-stack__content--MinHeight);
14492
+ --pf-c-masthead__content--Order: var(--pf-c-masthead--m-display-stack__content--Order);
14493
+ --pf-c-masthead__content--PaddingTop: var(--pf-c-masthead--m-display-stack__content--PaddingTop);
14494
+ --pf-c-masthead__content--PaddingBottom: var(--pf-c-masthead--m-display-stack__content--PaddingBottom);
14495
+ --pf-c-masthead__content--MarginLeft: var(--pf-c-masthead--m-display-stack__content--MarginLeft);
14496
+ --pf-c-masthead__content--c-nav--m-horizontal--MarginRight: var(--pf-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginRight);
14497
+ --pf-c-masthead__content--c-nav--m-horizontal--MarginLeft: var(--pf-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginLeft);
14498
+ }
14499
+
14500
+ .pf-c-masthead.pf-m-display-inline-on-md {
14487
14501
  --pf-c-masthead--GridTemplateColumns: var(--pf-c-masthead--m-display-inline--GridTemplateColumns);
14488
14502
  --pf-c-masthead__main--GridColumn: var(--pf-c-masthead--m-display-inline__main--GridColumn);
14489
14503
  --pf-c-masthead__main--MinHeight: var(--pf-c-masthead--m-display-inline__main--MinHeight);
@@ -14503,216 +14517,33 @@ ul.pf-c-list {
14503
14517
  --pf-c-masthead__content--c-nav--m-horizontal--MarginLeft: var(--pf-c-masthead--m-display-inline__content--c-nav--m-horizontal--MarginLeft);
14504
14518
  }
14505
14519
  }
14506
- .pf-c-masthead.pf-m-light {
14507
- color: var(--pf-global--Color--100);
14508
- --pf-c-masthead--BackgroundColor: var(--pf-c-masthead--m-light--BackgroundColor);
14509
- --pf-c-masthead__main--BorderBottomColor: var(--pf-c-masthead--m-light__main--BorderBottomColor);
14510
- }
14520
+ @media (min-width: 768px) {
14521
+ .pf-c-masthead.pf-m-inset-none-on-md {
14522
+ --pf-c-masthead--inset: 0;
14523
+ }
14511
14524
 
14512
- .pf-c-masthead.pf-m-light-200 {
14513
- color: var(--pf-global--Color--100);
14514
- --pf-c-masthead--BackgroundColor: var(--pf-c-masthead--m-light-200--BackgroundColor);
14515
- --pf-c-masthead__main--BorderBottomColor: var(--pf-c-masthead--m-light-200__main--BorderBottomColor);
14516
- }
14525
+ .pf-c-masthead.pf-m-inset-sm-on-md {
14526
+ --pf-c-masthead--inset: var(--pf-global--spacer--sm);
14527
+ }
14517
14528
 
14518
- .pf-c-masthead .pf-c-toolbar {
14519
- --pf-c-toolbar__content--PaddingRight: var(--pf-c-masthead--c-toolbar__content--PaddingRight);
14520
- --pf-c-toolbar__content--PaddingLeft: var(--pf-c-masthead--c-toolbar__content--PaddingLeft);
14521
- --pf-c-toolbar__expandable-content--PaddingTop: var(--pf-c-masthead--c-toolbar__expandable-content--PaddingTop);
14522
- --pf-c-toolbar__expandable-content--PaddingRight: var(--pf-c-masthead--c-toolbar__expandable-content--PaddingRight);
14523
- --pf-c-toolbar__expandable-content--PaddingBottom: var(--pf-c-masthead--c-toolbar__expandable-content--PaddingBottom);
14524
- --pf-c-toolbar__expandable-content--PaddingLeft: var(--pf-c-masthead--c-toolbar__expandable-content--PaddingLeft);
14525
- width: 100%;
14526
- }
14527
-
14528
- .pf-c-masthead .pf-c-toolbar__content-section {
14529
- flex-wrap: nowrap;
14530
- }
14531
-
14532
- .pf-c-masthead .pf-c-toolbar__expandable-content {
14533
- border-top: var(--pf-c-masthead--c-toolbar__expandable-content--BorderTopWidth) solid var(--pf-c-masthead--c-toolbar__expandable-content--BorderTopColor);
14534
- }
14535
-
14536
- .pf-c-masthead .pf-c-menu-toggle {
14537
- --pf-c-menu-toggle--before--BorderTopColor: var(--pf-c-masthead--c-menu-toggle--before--BorderTopColor);
14538
- --pf-c-menu-toggle--before--BorderRightColor: var(--pf-c-masthead--c-menu-toggle--before--BorderRightColor);
14539
- --pf-c-menu-toggle--before--BorderBottomColor: var(--pf-c-masthead--c-menu-toggle--before--BorderBottomColor);
14540
- --pf-c-menu-toggle--before--BorderLeftColor: var(--pf-c-masthead--c-menu-toggle--before--BorderLeftColor);
14541
- }
14542
-
14543
- .pf-c-masthead .pf-c-menu-toggle.pf-m-full-height {
14544
- --pf-c-menu-toggle--before--BorderRightColor: var(--pf-c-masthead--c-menu-toggle--m-full-height--before--BorderRightColor);
14545
- --pf-c-menu-toggle--before--BorderLeftColor: var(--pf-c-masthead--c-menu-toggle--m-full-height--before--BorderLeftColor);
14546
- }
14547
-
14548
- .pf-c-masthead .pf-c-context-selector {
14549
- --pf-c-context-selector--Width: var(--pf-c-masthead--c-context-selector--Width);
14550
- --pf-c-context-selector__toggle--BorderTopColor: var(--pf-c-masthead--c-context-selector__toggle--BorderTopColor);
14551
- --pf-c-context-selector__toggle--BorderRightColor: var(--pf-c-masthead--c-context-selector__toggle--BorderRightColor);
14552
- --pf-c-context-selector__toggle--BorderBottomColor: var(--pf-c-masthead--c-context-selector__toggle--BorderBottomColor);
14553
- --pf-c-context-selector__toggle--BorderLeftColor: var(--pf-c-masthead--c-context-selector__toggle--BorderLeftColor);
14554
- }
14555
-
14556
- .pf-c-masthead .pf-c-context-selector.pf-m-full-height {
14557
- --pf-c-context-selector__toggle--BorderRightColor: var(--pf-c-masthead--c-context-selector--m-full-height__toggle--BorderRightColor);
14558
- --pf-c-context-selector__toggle--BorderLeftColor: var(--pf-c-masthead--c-context-selector--m-full-height__toggle--BorderLeftColor);
14559
- }
14560
-
14561
- .pf-c-masthead .pf-c-dropdown {
14562
- --pf-c-dropdown__toggle--before--BorderTopColor: var(--pf-c-masthead--c-dropdown__toggle--before--BorderTopColor);
14563
- --pf-c-dropdown__toggle--before--BorderRightColor: var(--pf-c-masthead--c-dropdown__toggle--before--BorderRightColor);
14564
- --pf-c-dropdown__toggle--before--BorderBottomColor: var(--pf-c-masthead--c-dropdown__toggle--before--BorderBottomColor);
14565
- --pf-c-dropdown__toggle--before--BorderLeftColor: var(--pf-c-masthead--c-dropdown__toggle--before--BorderLeftColor);
14566
- }
14567
-
14568
- .pf-c-masthead .pf-c-dropdown.pf-m-full-height {
14569
- --pf-c-dropdown__toggle--before--BorderRightColor: var(--pf-c-masthead--c-dropdown--m-full-height__toggle--before--BorderRightColor);
14570
- --pf-c-dropdown__toggle--before--BorderLeftColor: var(--pf-c-masthead--c-dropdown--m-full-height__toggle--before--BorderLeftColor);
14571
- }
14572
-
14573
- .pf-c-masthead__main {
14574
- position: relative;
14575
- display: flex;
14576
- flex-basis: var(--pf-c-masthead__main--FlexBasis);
14577
- align-items: center;
14578
- align-self: stretch;
14579
- order: var(--pf-c-masthead__main--Order);
14580
- min-height: var(--pf-c-masthead__main--MinHeight);
14581
- padding-top: var(--pf-c-masthead__main--PaddingTop);
14582
- padding-bottom: var(--pf-c-masthead__main--PaddingBottom);
14583
- margin-right: var(--pf-c-masthead__main--MarginRight);
14584
- grid-column: var(--pf-c-masthead__main--GridColumn);
14585
- }
14586
-
14587
- .pf-c-masthead__main::before {
14588
- position: absolute;
14589
- right: var(--pf-c-masthead__main--before--Right);
14590
- bottom: 0;
14591
- left: var(--pf-c-masthead__main--before--Left);
14592
- content: "";
14593
- border-bottom: var(--pf-c-masthead__main--before--BorderBottom);
14594
- }
14595
-
14596
- .pf-c-masthead__main:last-child {
14597
- --pf-c-masthead__main--MarginRight: 0;
14598
- }
14599
-
14600
- .pf-c-masthead__content {
14601
- display: flex;
14602
- flex-grow: 1;
14603
- align-items: center;
14604
- align-self: stretch;
14605
- order: var(--pf-c-masthead__content--Order);
14606
- min-height: var(--pf-c-masthead__content--MinHeight);
14607
- padding-top: var(--pf-c-masthead__content--PaddingTop);
14608
- padding-bottom: var(--pf-c-masthead__content--PaddingBottom);
14609
- margin-left: var(--pf-c-masthead__content--MarginLeft);
14610
- grid-column: var(--pf-c-masthead__content--GridColumn);
14611
- grid-column-end: -1;
14612
- flex-shrink: 1;
14613
- }
14614
-
14615
- .pf-c-masthead__content:only-child {
14616
- --pf-c-masthead__content--MarginLeft: 0;
14617
- }
14618
-
14619
- .pf-c-masthead__content .pf-c-nav.pf-m-horizontal {
14620
- margin-right: var(--pf-c-masthead__content--c-nav--m-horizontal--MarginRight);
14621
- margin-left: var(--pf-c-masthead__content--c-nav--m-horizontal--MarginLeft);
14622
- }
14623
-
14624
- .pf-c-masthead__toggle ~ .pf-c-masthead__content {
14625
- --pf-c-masthead__content--c-nav--m-horizontal--MarginLeft: calc(var(--pf-c-masthead__content--MarginLeft) * -1);
14626
- }
14627
-
14628
- .pf-c-masthead__main,
14629
- .pf-c-masthead__brand,
14630
- .pf-c-masthead__content {
14631
- min-width: 0;
14632
- }
14633
-
14634
- .pf-c-masthead__brand {
14635
- display: inline-flex;
14636
- align-self: center;
14637
- }
14638
-
14639
- .pf-c-masthead__toggle {
14640
- grid-column: var(--pf-c-masthead__toggle--GridColumn);
14641
- align-self: center;
14642
- margin-right: var(--pf-c-masthead__toggle--MarginRight);
14643
- margin-left: var(--pf-c-masthead__toggle--MarginLeft);
14644
- }
14645
-
14646
- .pf-c-masthead__toggle .pf-c-button {
14647
- --pf-c-button--FontSize: var(--pf-c-masthead__toggle--c-button--FontSize);
14648
- }
14649
-
14650
- .pf-c-masthead.pf-m-display-stack {
14651
- --pf-c-masthead--GridTemplateColumns: var(--pf-c-masthead--m-display-stack--GridTemplateColumns);
14652
- --pf-c-masthead__main--GridColumn: var(--pf-c-masthead--m-display-stack__main--GridColumn);
14653
- --pf-c-masthead__main--MinHeight: var(--pf-c-masthead--m-display-stack__main--MinHeight);
14654
- --pf-c-masthead__main--Order: var(--pf-c-masthead--m-display-stack__main--Order);
14655
- --pf-c-masthead__main--FlexBasis: var(--pf-c-masthead--m-display-stack__main--FlexBasis);
14656
- --pf-c-masthead__main--PaddingTop: var(--pf-c-masthead--m-display-stack__main--PaddingTop);
14657
- --pf-c-masthead__main--PaddingBottom: var(--pf-c-masthead--m-display-stack__main--PaddingBottom);
14658
- --pf-c-masthead__main--MarginRight: var(--pf-c-masthead--m-display-stack__main--MarginRight);
14659
- --pf-c-masthead__main--before--BorderBottom: var(--pf-c-masthead--m-display-stack__main--before--BorderBottom);
14660
- --pf-c-masthead__content--GridColumn: var(--pf-c-masthead--m-display-stack__content--GridColumn);
14661
- --pf-c-masthead__content--MinHeight: var(--pf-c-masthead--m-display-stack__content--MinHeight);
14662
- --pf-c-masthead__content--Order: var(--pf-c-masthead--m-display-stack__content--Order);
14663
- --pf-c-masthead__content--PaddingTop: var(--pf-c-masthead--m-display-stack__content--PaddingTop);
14664
- --pf-c-masthead__content--PaddingBottom: var(--pf-c-masthead--m-display-stack__content--PaddingBottom);
14665
- --pf-c-masthead__content--MarginLeft: var(--pf-c-masthead--m-display-stack__content--MarginLeft);
14666
- --pf-c-masthead__content--c-nav--m-horizontal--MarginRight: var(--pf-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginRight);
14667
- --pf-c-masthead__content--c-nav--m-horizontal--MarginLeft: var(--pf-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginLeft);
14668
- }
14669
-
14670
- .pf-c-masthead.pf-m-display-inline {
14671
- --pf-c-masthead--GridTemplateColumns: var(--pf-c-masthead--m-display-inline--GridTemplateColumns);
14672
- --pf-c-masthead__main--GridColumn: var(--pf-c-masthead--m-display-inline__main--GridColumn);
14673
- --pf-c-masthead__main--MinHeight: var(--pf-c-masthead--m-display-inline__main--MinHeight);
14674
- --pf-c-masthead__main--Order: var(--pf-c-masthead--m-display-inline__main--Order);
14675
- --pf-c-masthead__main--FlexBasis: var(--pf-c-masthead--m-display-inline__main--FlexBasis);
14676
- --pf-c-masthead__main--PaddingTop: var(--pf-c-masthead--m-display-inline__main--PaddingTop);
14677
- --pf-c-masthead__main--PaddingBottom: var(--pf-c-masthead--m-display-inline__main--PaddingBottom);
14678
- --pf-c-masthead__main--MarginRight: var(--pf-c-masthead--m-display-inline__main--MarginRight);
14679
- --pf-c-masthead__main--before--BorderBottom: var(--pf-c-masthead--m-display-inline__main--BorderBottom);
14680
- --pf-c-masthead__content--GridColumn: var(--pf-c-masthead--m-display-inline__content--GridColumn);
14681
- --pf-c-masthead__content--MinHeight: var(--pf-c-masthead--m-display-inline__content--MinHeight);
14682
- --pf-c-masthead__content--Order: var(--pf-c-masthead--m-display-inline__content--Order);
14683
- --pf-c-masthead__content--PaddingTop: var(--pf-c-masthead--m-display-inline__content--PaddingTop);
14684
- --pf-c-masthead__content--PaddingBottom: var(--pf-c-masthead--m-display-inline__content--PaddingBottom);
14685
- --pf-c-masthead__content--MarginLeft: var(--pf-c-masthead--m-display-inline__content--MarginLeft);
14686
- --pf-c-masthead__content--c-nav--m-horizontal--MarginRight: var(--pf-c-masthead--m-display-inline__content--c-nav--m-horizontal--MarginRight);
14687
- --pf-c-masthead__content--c-nav--m-horizontal--MarginLeft: var(--pf-c-masthead--m-display-inline__content--c-nav--m-horizontal--MarginLeft);
14688
- }
14689
-
14690
- .pf-c-masthead.pf-m-inset-none {
14691
- --pf-c-masthead--inset: 0;
14692
- }
14693
-
14694
- .pf-c-masthead.pf-m-inset-sm {
14695
- --pf-c-masthead--inset: var(--pf-global--spacer--sm);
14696
- }
14697
-
14698
- .pf-c-masthead.pf-m-inset-md {
14699
- --pf-c-masthead--inset: var(--pf-global--spacer--md);
14700
- }
14529
+ .pf-c-masthead.pf-m-inset-md-on-md {
14530
+ --pf-c-masthead--inset: var(--pf-global--spacer--md);
14531
+ }
14701
14532
 
14702
- .pf-c-masthead.pf-m-inset-lg {
14703
- --pf-c-masthead--inset: var(--pf-global--spacer--lg);
14704
- }
14533
+ .pf-c-masthead.pf-m-inset-lg-on-md {
14534
+ --pf-c-masthead--inset: var(--pf-global--spacer--lg);
14535
+ }
14705
14536
 
14706
- .pf-c-masthead.pf-m-inset-xl {
14707
- --pf-c-masthead--inset: var(--pf-global--spacer--xl);
14708
- }
14537
+ .pf-c-masthead.pf-m-inset-xl-on-md {
14538
+ --pf-c-masthead--inset: var(--pf-global--spacer--xl);
14539
+ }
14709
14540
 
14710
- .pf-c-masthead.pf-m-inset-2xl {
14711
- --pf-c-masthead--inset: var(--pf-global--spacer--2xl);
14541
+ .pf-c-masthead.pf-m-inset-2xl-on-md {
14542
+ --pf-c-masthead--inset: var(--pf-global--spacer--2xl);
14543
+ }
14712
14544
  }
14713
-
14714
- @media (min-width: 576px) {
14715
- .pf-c-masthead.pf-m-display-stack-on-sm {
14545
+ @media (min-width: 992px) {
14546
+ .pf-c-masthead.pf-m-display-stack-on-lg {
14716
14547
  --pf-c-masthead--GridTemplateColumns: var(--pf-c-masthead--m-display-stack--GridTemplateColumns);
14717
14548
  --pf-c-masthead__main--GridColumn: var(--pf-c-masthead--m-display-stack__main--GridColumn);
14718
14549
  --pf-c-masthead__main--MinHeight: var(--pf-c-masthead--m-display-stack__main--MinHeight);
@@ -14732,7 +14563,7 @@ ul.pf-c-list {
14732
14563
  --pf-c-masthead__content--c-nav--m-horizontal--MarginLeft: var(--pf-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginLeft);
14733
14564
  }
14734
14565
 
14735
- .pf-c-masthead.pf-m-display-inline-on-sm {
14566
+ .pf-c-masthead.pf-m-display-inline-on-lg {
14736
14567
  --pf-c-masthead--GridTemplateColumns: var(--pf-c-masthead--m-display-inline--GridTemplateColumns);
14737
14568
  --pf-c-masthead__main--GridColumn: var(--pf-c-masthead--m-display-inline__main--GridColumn);
14738
14569
  --pf-c-masthead__main--MinHeight: var(--pf-c-masthead--m-display-inline__main--MinHeight);
@@ -14752,33 +14583,33 @@ ul.pf-c-list {
14752
14583
  --pf-c-masthead__content--c-nav--m-horizontal--MarginLeft: var(--pf-c-masthead--m-display-inline__content--c-nav--m-horizontal--MarginLeft);
14753
14584
  }
14754
14585
  }
14755
- @media (min-width: 576px) {
14756
- .pf-c-masthead.pf-m-inset-none-on-sm {
14586
+ @media (min-width: 992px) {
14587
+ .pf-c-masthead.pf-m-inset-none-on-lg {
14757
14588
  --pf-c-masthead--inset: 0;
14758
14589
  }
14759
14590
 
14760
- .pf-c-masthead.pf-m-inset-sm-on-sm {
14591
+ .pf-c-masthead.pf-m-inset-sm-on-lg {
14761
14592
  --pf-c-masthead--inset: var(--pf-global--spacer--sm);
14762
14593
  }
14763
14594
 
14764
- .pf-c-masthead.pf-m-inset-md-on-sm {
14595
+ .pf-c-masthead.pf-m-inset-md-on-lg {
14765
14596
  --pf-c-masthead--inset: var(--pf-global--spacer--md);
14766
14597
  }
14767
14598
 
14768
- .pf-c-masthead.pf-m-inset-lg-on-sm {
14599
+ .pf-c-masthead.pf-m-inset-lg-on-lg {
14769
14600
  --pf-c-masthead--inset: var(--pf-global--spacer--lg);
14770
14601
  }
14771
14602
 
14772
- .pf-c-masthead.pf-m-inset-xl-on-sm {
14603
+ .pf-c-masthead.pf-m-inset-xl-on-lg {
14773
14604
  --pf-c-masthead--inset: var(--pf-global--spacer--xl);
14774
14605
  }
14775
14606
 
14776
- .pf-c-masthead.pf-m-inset-2xl-on-sm {
14607
+ .pf-c-masthead.pf-m-inset-2xl-on-lg {
14777
14608
  --pf-c-masthead--inset: var(--pf-global--spacer--2xl);
14778
14609
  }
14779
14610
  }
14780
- @media (min-width: 768px) {
14781
- .pf-c-masthead.pf-m-display-stack-on-md {
14611
+ @media (min-width: 1200px) {
14612
+ .pf-c-masthead.pf-m-display-stack-on-xl {
14782
14613
  --pf-c-masthead--GridTemplateColumns: var(--pf-c-masthead--m-display-stack--GridTemplateColumns);
14783
14614
  --pf-c-masthead__main--GridColumn: var(--pf-c-masthead--m-display-stack__main--GridColumn);
14784
14615
  --pf-c-masthead__main--MinHeight: var(--pf-c-masthead--m-display-stack__main--MinHeight);
@@ -14798,7 +14629,7 @@ ul.pf-c-list {
14798
14629
  --pf-c-masthead__content--c-nav--m-horizontal--MarginLeft: var(--pf-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginLeft);
14799
14630
  }
14800
14631
 
14801
- .pf-c-masthead.pf-m-display-inline-on-md {
14632
+ .pf-c-masthead.pf-m-display-inline-on-xl {
14802
14633
  --pf-c-masthead--GridTemplateColumns: var(--pf-c-masthead--m-display-inline--GridTemplateColumns);
14803
14634
  --pf-c-masthead__main--GridColumn: var(--pf-c-masthead--m-display-inline__main--GridColumn);
14804
14635
  --pf-c-masthead__main--MinHeight: var(--pf-c-masthead--m-display-inline__main--MinHeight);
@@ -14818,33 +14649,33 @@ ul.pf-c-list {
14818
14649
  --pf-c-masthead__content--c-nav--m-horizontal--MarginLeft: var(--pf-c-masthead--m-display-inline__content--c-nav--m-horizontal--MarginLeft);
14819
14650
  }
14820
14651
  }
14821
- @media (min-width: 768px) {
14822
- .pf-c-masthead.pf-m-inset-none-on-md {
14652
+ @media (min-width: 1200px) {
14653
+ .pf-c-masthead.pf-m-inset-none-on-xl {
14823
14654
  --pf-c-masthead--inset: 0;
14824
14655
  }
14825
14656
 
14826
- .pf-c-masthead.pf-m-inset-sm-on-md {
14657
+ .pf-c-masthead.pf-m-inset-sm-on-xl {
14827
14658
  --pf-c-masthead--inset: var(--pf-global--spacer--sm);
14828
14659
  }
14829
14660
 
14830
- .pf-c-masthead.pf-m-inset-md-on-md {
14661
+ .pf-c-masthead.pf-m-inset-md-on-xl {
14831
14662
  --pf-c-masthead--inset: var(--pf-global--spacer--md);
14832
14663
  }
14833
14664
 
14834
- .pf-c-masthead.pf-m-inset-lg-on-md {
14665
+ .pf-c-masthead.pf-m-inset-lg-on-xl {
14835
14666
  --pf-c-masthead--inset: var(--pf-global--spacer--lg);
14836
14667
  }
14837
14668
 
14838
- .pf-c-masthead.pf-m-inset-xl-on-md {
14669
+ .pf-c-masthead.pf-m-inset-xl-on-xl {
14839
14670
  --pf-c-masthead--inset: var(--pf-global--spacer--xl);
14840
14671
  }
14841
14672
 
14842
- .pf-c-masthead.pf-m-inset-2xl-on-md {
14673
+ .pf-c-masthead.pf-m-inset-2xl-on-xl {
14843
14674
  --pf-c-masthead--inset: var(--pf-global--spacer--2xl);
14844
14675
  }
14845
14676
  }
14846
- @media (min-width: 992px) {
14847
- .pf-c-masthead.pf-m-display-stack-on-lg {
14677
+ @media (min-width: 1450px) {
14678
+ .pf-c-masthead.pf-m-display-stack-on-2xl {
14848
14679
  --pf-c-masthead--GridTemplateColumns: var(--pf-c-masthead--m-display-stack--GridTemplateColumns);
14849
14680
  --pf-c-masthead__main--GridColumn: var(--pf-c-masthead--m-display-stack__main--GridColumn);
14850
14681
  --pf-c-masthead__main--MinHeight: var(--pf-c-masthead--m-display-stack__main--MinHeight);
@@ -14864,7 +14695,7 @@ ul.pf-c-list {
14864
14695
  --pf-c-masthead__content--c-nav--m-horizontal--MarginLeft: var(--pf-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginLeft);
14865
14696
  }
14866
14697
 
14867
- .pf-c-masthead.pf-m-display-inline-on-lg {
14698
+ .pf-c-masthead.pf-m-display-inline-on-2xl {
14868
14699
  --pf-c-masthead--GridTemplateColumns: var(--pf-c-masthead--m-display-inline--GridTemplateColumns);
14869
14700
  --pf-c-masthead__main--GridColumn: var(--pf-c-masthead--m-display-inline__main--GridColumn);
14870
14701
  --pf-c-masthead__main--MinHeight: var(--pf-c-masthead--m-display-inline__main--MinHeight);
@@ -14884,160 +14715,28 @@ ul.pf-c-list {
14884
14715
  --pf-c-masthead__content--c-nav--m-horizontal--MarginLeft: var(--pf-c-masthead--m-display-inline__content--c-nav--m-horizontal--MarginLeft);
14885
14716
  }
14886
14717
  }
14887
- @media (min-width: 992px) {
14888
- .pf-c-masthead.pf-m-inset-none-on-lg {
14718
+ @media (min-width: 1450px) {
14719
+ .pf-c-masthead.pf-m-inset-none-on-2xl {
14889
14720
  --pf-c-masthead--inset: 0;
14890
14721
  }
14891
14722
 
14892
- .pf-c-masthead.pf-m-inset-sm-on-lg {
14723
+ .pf-c-masthead.pf-m-inset-sm-on-2xl {
14893
14724
  --pf-c-masthead--inset: var(--pf-global--spacer--sm);
14894
14725
  }
14895
14726
 
14896
- .pf-c-masthead.pf-m-inset-md-on-lg {
14727
+ .pf-c-masthead.pf-m-inset-md-on-2xl {
14897
14728
  --pf-c-masthead--inset: var(--pf-global--spacer--md);
14898
14729
  }
14899
14730
 
14900
- .pf-c-masthead.pf-m-inset-lg-on-lg {
14731
+ .pf-c-masthead.pf-m-inset-lg-on-2xl {
14901
14732
  --pf-c-masthead--inset: var(--pf-global--spacer--lg);
14902
14733
  }
14903
14734
 
14904
- .pf-c-masthead.pf-m-inset-xl-on-lg {
14735
+ .pf-c-masthead.pf-m-inset-xl-on-2xl {
14905
14736
  --pf-c-masthead--inset: var(--pf-global--spacer--xl);
14906
14737
  }
14907
14738
 
14908
- .pf-c-masthead.pf-m-inset-2xl-on-lg {
14909
- --pf-c-masthead--inset: var(--pf-global--spacer--2xl);
14910
- }
14911
- }
14912
- @media (min-width: 1200px) {
14913
- .pf-c-masthead.pf-m-display-stack-on-xl {
14914
- --pf-c-masthead--GridTemplateColumns: var(--pf-c-masthead--m-display-stack--GridTemplateColumns);
14915
- --pf-c-masthead__main--GridColumn: var(--pf-c-masthead--m-display-stack__main--GridColumn);
14916
- --pf-c-masthead__main--MinHeight: var(--pf-c-masthead--m-display-stack__main--MinHeight);
14917
- --pf-c-masthead__main--Order: var(--pf-c-masthead--m-display-stack__main--Order);
14918
- --pf-c-masthead__main--FlexBasis: var(--pf-c-masthead--m-display-stack__main--FlexBasis);
14919
- --pf-c-masthead__main--PaddingTop: var(--pf-c-masthead--m-display-stack__main--PaddingTop);
14920
- --pf-c-masthead__main--PaddingBottom: var(--pf-c-masthead--m-display-stack__main--PaddingBottom);
14921
- --pf-c-masthead__main--MarginRight: var(--pf-c-masthead--m-display-stack__main--MarginRight);
14922
- --pf-c-masthead__main--before--BorderBottom: var(--pf-c-masthead--m-display-stack__main--before--BorderBottom);
14923
- --pf-c-masthead__content--GridColumn: var(--pf-c-masthead--m-display-stack__content--GridColumn);
14924
- --pf-c-masthead__content--MinHeight: var(--pf-c-masthead--m-display-stack__content--MinHeight);
14925
- --pf-c-masthead__content--Order: var(--pf-c-masthead--m-display-stack__content--Order);
14926
- --pf-c-masthead__content--PaddingTop: var(--pf-c-masthead--m-display-stack__content--PaddingTop);
14927
- --pf-c-masthead__content--PaddingBottom: var(--pf-c-masthead--m-display-stack__content--PaddingBottom);
14928
- --pf-c-masthead__content--MarginLeft: var(--pf-c-masthead--m-display-stack__content--MarginLeft);
14929
- --pf-c-masthead__content--c-nav--m-horizontal--MarginRight: var(--pf-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginRight);
14930
- --pf-c-masthead__content--c-nav--m-horizontal--MarginLeft: var(--pf-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginLeft);
14931
- }
14932
-
14933
- .pf-c-masthead.pf-m-display-inline-on-xl {
14934
- --pf-c-masthead--GridTemplateColumns: var(--pf-c-masthead--m-display-inline--GridTemplateColumns);
14935
- --pf-c-masthead__main--GridColumn: var(--pf-c-masthead--m-display-inline__main--GridColumn);
14936
- --pf-c-masthead__main--MinHeight: var(--pf-c-masthead--m-display-inline__main--MinHeight);
14937
- --pf-c-masthead__main--Order: var(--pf-c-masthead--m-display-inline__main--Order);
14938
- --pf-c-masthead__main--FlexBasis: var(--pf-c-masthead--m-display-inline__main--FlexBasis);
14939
- --pf-c-masthead__main--PaddingTop: var(--pf-c-masthead--m-display-inline__main--PaddingTop);
14940
- --pf-c-masthead__main--PaddingBottom: var(--pf-c-masthead--m-display-inline__main--PaddingBottom);
14941
- --pf-c-masthead__main--MarginRight: var(--pf-c-masthead--m-display-inline__main--MarginRight);
14942
- --pf-c-masthead__main--before--BorderBottom: var(--pf-c-masthead--m-display-inline__main--BorderBottom);
14943
- --pf-c-masthead__content--GridColumn: var(--pf-c-masthead--m-display-inline__content--GridColumn);
14944
- --pf-c-masthead__content--MinHeight: var(--pf-c-masthead--m-display-inline__content--MinHeight);
14945
- --pf-c-masthead__content--Order: var(--pf-c-masthead--m-display-inline__content--Order);
14946
- --pf-c-masthead__content--PaddingTop: var(--pf-c-masthead--m-display-inline__content--PaddingTop);
14947
- --pf-c-masthead__content--PaddingBottom: var(--pf-c-masthead--m-display-inline__content--PaddingBottom);
14948
- --pf-c-masthead__content--MarginLeft: var(--pf-c-masthead--m-display-inline__content--MarginLeft);
14949
- --pf-c-masthead__content--c-nav--m-horizontal--MarginRight: var(--pf-c-masthead--m-display-inline__content--c-nav--m-horizontal--MarginRight);
14950
- --pf-c-masthead__content--c-nav--m-horizontal--MarginLeft: var(--pf-c-masthead--m-display-inline__content--c-nav--m-horizontal--MarginLeft);
14951
- }
14952
- }
14953
- @media (min-width: 1200px) {
14954
- .pf-c-masthead.pf-m-inset-none-on-xl {
14955
- --pf-c-masthead--inset: 0;
14956
- }
14957
-
14958
- .pf-c-masthead.pf-m-inset-sm-on-xl {
14959
- --pf-c-masthead--inset: var(--pf-global--spacer--sm);
14960
- }
14961
-
14962
- .pf-c-masthead.pf-m-inset-md-on-xl {
14963
- --pf-c-masthead--inset: var(--pf-global--spacer--md);
14964
- }
14965
-
14966
- .pf-c-masthead.pf-m-inset-lg-on-xl {
14967
- --pf-c-masthead--inset: var(--pf-global--spacer--lg);
14968
- }
14969
-
14970
- .pf-c-masthead.pf-m-inset-xl-on-xl {
14971
- --pf-c-masthead--inset: var(--pf-global--spacer--xl);
14972
- }
14973
-
14974
- .pf-c-masthead.pf-m-inset-2xl-on-xl {
14975
- --pf-c-masthead--inset: var(--pf-global--spacer--2xl);
14976
- }
14977
- }
14978
- @media (min-width: 1450px) {
14979
- .pf-c-masthead.pf-m-display-stack-on-2xl {
14980
- --pf-c-masthead--GridTemplateColumns: var(--pf-c-masthead--m-display-stack--GridTemplateColumns);
14981
- --pf-c-masthead__main--GridColumn: var(--pf-c-masthead--m-display-stack__main--GridColumn);
14982
- --pf-c-masthead__main--MinHeight: var(--pf-c-masthead--m-display-stack__main--MinHeight);
14983
- --pf-c-masthead__main--Order: var(--pf-c-masthead--m-display-stack__main--Order);
14984
- --pf-c-masthead__main--FlexBasis: var(--pf-c-masthead--m-display-stack__main--FlexBasis);
14985
- --pf-c-masthead__main--PaddingTop: var(--pf-c-masthead--m-display-stack__main--PaddingTop);
14986
- --pf-c-masthead__main--PaddingBottom: var(--pf-c-masthead--m-display-stack__main--PaddingBottom);
14987
- --pf-c-masthead__main--MarginRight: var(--pf-c-masthead--m-display-stack__main--MarginRight);
14988
- --pf-c-masthead__main--before--BorderBottom: var(--pf-c-masthead--m-display-stack__main--before--BorderBottom);
14989
- --pf-c-masthead__content--GridColumn: var(--pf-c-masthead--m-display-stack__content--GridColumn);
14990
- --pf-c-masthead__content--MinHeight: var(--pf-c-masthead--m-display-stack__content--MinHeight);
14991
- --pf-c-masthead__content--Order: var(--pf-c-masthead--m-display-stack__content--Order);
14992
- --pf-c-masthead__content--PaddingTop: var(--pf-c-masthead--m-display-stack__content--PaddingTop);
14993
- --pf-c-masthead__content--PaddingBottom: var(--pf-c-masthead--m-display-stack__content--PaddingBottom);
14994
- --pf-c-masthead__content--MarginLeft: var(--pf-c-masthead--m-display-stack__content--MarginLeft);
14995
- --pf-c-masthead__content--c-nav--m-horizontal--MarginRight: var(--pf-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginRight);
14996
- --pf-c-masthead__content--c-nav--m-horizontal--MarginLeft: var(--pf-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginLeft);
14997
- }
14998
-
14999
- .pf-c-masthead.pf-m-display-inline-on-2xl {
15000
- --pf-c-masthead--GridTemplateColumns: var(--pf-c-masthead--m-display-inline--GridTemplateColumns);
15001
- --pf-c-masthead__main--GridColumn: var(--pf-c-masthead--m-display-inline__main--GridColumn);
15002
- --pf-c-masthead__main--MinHeight: var(--pf-c-masthead--m-display-inline__main--MinHeight);
15003
- --pf-c-masthead__main--Order: var(--pf-c-masthead--m-display-inline__main--Order);
15004
- --pf-c-masthead__main--FlexBasis: var(--pf-c-masthead--m-display-inline__main--FlexBasis);
15005
- --pf-c-masthead__main--PaddingTop: var(--pf-c-masthead--m-display-inline__main--PaddingTop);
15006
- --pf-c-masthead__main--PaddingBottom: var(--pf-c-masthead--m-display-inline__main--PaddingBottom);
15007
- --pf-c-masthead__main--MarginRight: var(--pf-c-masthead--m-display-inline__main--MarginRight);
15008
- --pf-c-masthead__main--before--BorderBottom: var(--pf-c-masthead--m-display-inline__main--BorderBottom);
15009
- --pf-c-masthead__content--GridColumn: var(--pf-c-masthead--m-display-inline__content--GridColumn);
15010
- --pf-c-masthead__content--MinHeight: var(--pf-c-masthead--m-display-inline__content--MinHeight);
15011
- --pf-c-masthead__content--Order: var(--pf-c-masthead--m-display-inline__content--Order);
15012
- --pf-c-masthead__content--PaddingTop: var(--pf-c-masthead--m-display-inline__content--PaddingTop);
15013
- --pf-c-masthead__content--PaddingBottom: var(--pf-c-masthead--m-display-inline__content--PaddingBottom);
15014
- --pf-c-masthead__content--MarginLeft: var(--pf-c-masthead--m-display-inline__content--MarginLeft);
15015
- --pf-c-masthead__content--c-nav--m-horizontal--MarginRight: var(--pf-c-masthead--m-display-inline__content--c-nav--m-horizontal--MarginRight);
15016
- --pf-c-masthead__content--c-nav--m-horizontal--MarginLeft: var(--pf-c-masthead--m-display-inline__content--c-nav--m-horizontal--MarginLeft);
15017
- }
15018
- }
15019
- @media (min-width: 1450px) {
15020
- .pf-c-masthead.pf-m-inset-none-on-2xl {
15021
- --pf-c-masthead--inset: 0;
15022
- }
15023
-
15024
- .pf-c-masthead.pf-m-inset-sm-on-2xl {
15025
- --pf-c-masthead--inset: var(--pf-global--spacer--sm);
15026
- }
15027
-
15028
- .pf-c-masthead.pf-m-inset-md-on-2xl {
15029
- --pf-c-masthead--inset: var(--pf-global--spacer--md);
15030
- }
15031
-
15032
- .pf-c-masthead.pf-m-inset-lg-on-2xl {
15033
- --pf-c-masthead--inset: var(--pf-global--spacer--lg);
15034
- }
15035
-
15036
- .pf-c-masthead.pf-m-inset-xl-on-2xl {
15037
- --pf-c-masthead--inset: var(--pf-global--spacer--xl);
15038
- }
15039
-
15040
- .pf-c-masthead.pf-m-inset-2xl-on-2xl {
14739
+ .pf-c-masthead.pf-m-inset-2xl-on-2xl {
15041
14740
  --pf-c-masthead--inset: var(--pf-global--spacer--2xl);
15042
14741
  }
15043
14742
  }
@@ -19782,205 +19481,14 @@ label.pf-c-radio, .pf-c-radio__label,
19782
19481
  cursor: not-allowed;
19783
19482
  }
19784
19483
 
19785
- .pf-c-search-input {
19786
- --pf-c-search-input__text--before--BorderWidth: var(--pf-global--BorderWidth--sm);
19787
- --pf-c-search-input__text--before--BorderColor: var(--pf-global--BorderColor--300);
19788
- --pf-c-search-input__text--after--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
19789
- --pf-c-search-input__text--after--BorderBottomColor: var(--pf-global--BorderColor--200);
19790
- --pf-c-search-input__bar--hover__text--after--BorderBottomColor: var(--pf-global--primary-color--100);
19791
- --pf-c-search-input__text--focus-within--after--BorderBottomWidth: var(--pf-global--BorderWidth--md);
19792
- --pf-c-search-input__text--focus-within--after--BorderBottomColor: var(--pf-global--primary-color--100);
19793
- --pf-c-search-input__text-input--PaddingTop: var(--pf-global--spacer--form-element);
19794
- --pf-c-search-input__text-input--PaddingRight: var(--pf-global--spacer--sm);
19795
- --pf-c-search-input__text-input--PaddingBottom: var(--pf-global--spacer--form-element);
19796
- --pf-c-search-input__text-input--PaddingLeft: var(--pf-global--spacer--xl);
19797
- --pf-c-search-input__text-input--MinWidth: 6ch;
19798
- --pf-c-search-input__text-input--m-hint--Color: var(--pf-global--Color--dark-200);
19799
- --pf-c-search-input__icon--Left: var(--pf-global--spacer--sm);
19800
- --pf-c-search-input__icon--Color: var(--pf-global--Color--200);
19801
- --pf-c-search-input__text--hover__icon--Color: var(--pf-global--Color--100);
19802
- --pf-c-search-input__icon--TranslateY: -50%;
19803
- --pf-c-search-input__utilities--MarginRight: var(--pf-global--spacer--sm);
19804
- --pf-c-search-input__utilities--MarginLeft: var(--pf-global--spacer--xs);
19805
- --pf-c-search-input__utilities--child--MarginLeft: var(--pf-global--spacer--xs);
19806
- --pf-c-search-input__utilities--c-button--PaddingRight: var(--pf-global--spacer--xs);
19807
- --pf-c-search-input__utilities--c-button--PaddingLeft: var(--pf-global--spacer--xs);
19808
- --pf-c-search-input__menu-body--PaddingTop: var(--pf-global--spacer--md);
19809
- --pf-c-search-input__menu-body--PaddingRight: var(--pf-global--spacer--md);
19810
- --pf-c-search-input__menu-body--PaddingBottom: var(--pf-global--spacer--md);
19811
- --pf-c-search-input__menu-body--PaddingLeft: var(--pf-global--spacer--md);
19812
- --pf-c-search-input__menu--BackgroundColor: var(--pf-global--BackgroundColor--light-100);
19813
- --pf-c-search-input__menu--BoxShadow: var(--pf-global--BoxShadow--md);
19814
- --pf-c-search-input__menu--Top: calc(100% + var(--pf-global--spacer--xs));
19815
- --pf-c-search-input__menu--ZIndex: var(--pf-global--ZIndex--sm);
19816
- --pf-c-search-input--m-top__menu--Top: 0;
19817
- --pf-c-search-input--m-top__menu--TranslateY: calc(-100% - var(--pf-global--spacer--xs));
19818
- --pf-c-search-input__menu-list--PaddingTop: var(--pf-global--spacer--sm);
19819
- --pf-c-search-input__menu-list--PaddingBottom: var(--pf-global--spacer--sm);
19820
- --pf-c-search-input__menu-item--PaddingTop: var(--pf-global--spacer--sm);
19821
- --pf-c-search-input__menu-item--PaddingRight: var(--pf-global--spacer--md);
19822
- --pf-c-search-input__menu-item--PaddingBottom: var(--pf-global--spacer--sm);
19823
- --pf-c-search-input__menu-item--PaddingLeft: var(--pf-global--spacer--md);
19824
- --pf-c-search-input__menu-item--Color: var(--pf-global--Color--100);
19825
- --pf-c-search-input__menu-item--BackgroundColor: transparent;
19826
- --pf-c-search-input__menu-item--hover--BackgroundColor: var(--pf-global--BackgroundColor--200);
19827
- --pf-c-search-input__menu-item--focus--BackgroundColor: var(--pf-global--BackgroundColor--200);
19828
- position: relative;
19829
- }
19830
-
19831
- .pf-c-search-input__bar {
19832
- position: relative;
19833
- display: flex;
19834
- width: 100%;
19835
- }
19836
-
19837
- .pf-c-search-input__bar:hover {
19838
- --pf-c-search-input__text--after--BorderBottomColor: var(--pf-c-search-input__bar--hover__text--after--BorderBottomColor);
19839
- }
19840
-
19841
- .pf-c-search-input__text {
19842
- display: grid;
19843
- grid-template-columns: 1fr;
19844
- grid-template-areas: "text-input";
19845
- flex: 1;
19846
- }
19847
-
19848
- .pf-c-search-input__text::before, .pf-c-search-input__text::after {
19849
- position: absolute;
19850
- top: 0;
19851
- right: 0;
19852
- bottom: 0;
19853
- left: 0;
19854
- pointer-events: none;
19855
- content: "";
19856
- }
19857
-
19858
- .pf-c-search-input__text::before {
19859
- border: var(--pf-c-search-input__text--before--BorderWidth) solid var(--pf-c-search-input__text--before--BorderColor);
19860
- }
19861
-
19862
- .pf-c-search-input__text::after {
19863
- border-bottom: var(--pf-c-search-input__text--after--BorderBottomWidth) solid var(--pf-c-search-input__text--after--BorderBottomColor);
19864
- }
19865
-
19866
- .pf-c-search-input__text:hover, .pf-c-search-input__text:focus-within {
19867
- --pf-c-search-input__icon--Color: var(--pf-c-search-input__text--hover__icon--Color);
19868
- }
19869
-
19870
- .pf-c-search-input__text:focus-within {
19871
- --pf-c-search-input__text--after--BorderBottomWidth: var(--pf-c-search-input__text--focus-within--after--BorderBottomWidth);
19872
- --pf-c-search-input__text--after--BorderBottomColor: var(--pf-c-search-input__text--focus-within--after--BorderBottomColor);
19873
- }
19874
-
19875
- .pf-c-search-input__icon {
19876
- position: absolute;
19877
- top: 50%;
19878
- left: var(--pf-c-search-input__icon--Left);
19879
- color: var(--pf-c-search-input__icon--Color);
19880
- transform: translateY(var(--pf-c-search-input__icon--TranslateY));
19881
- }
19882
-
19883
- .pf-c-search-input__text-input {
19884
- overflow: hidden;
19885
- text-overflow: ellipsis;
19886
- white-space: nowrap;
19887
- position: relative;
19888
- width: 100%;
19889
- min-width: var(--pf-c-search-input__text-input--MinWidth);
19890
- padding: var(--pf-c-search-input__text-input--PaddingTop) var(--pf-c-search-input__text-input--PaddingRight) var(--pf-c-search-input__text-input--PaddingBottom) var(--pf-c-search-input__text-input--PaddingLeft);
19891
- border: 0;
19892
- }
19893
-
19894
- .pf-c-search-input__text-input, .pf-c-search-input__text-input.pf-m-hint {
19895
- grid-area: text-input;
19896
- }
19897
-
19898
- .pf-c-search-input__text-input.pf-m-hint {
19899
- color: var(--pf-c-search-input__text-input--m-hint--Color);
19900
- }
19901
-
19902
- .pf-c-search-input__utilities {
19903
- display: flex;
19904
- margin-right: var(--pf-c-search-input__utilities--MarginRight);
19905
- margin-left: var(--pf-c-search-input__utilities--MarginLeft);
19906
- }
19907
-
19908
- .pf-c-search-input__utilities > * + * {
19909
- margin-left: var(--pf-c-search-input__utilities--child--MarginLeft);
19910
- }
19911
-
19912
- .pf-c-search-input__utilities .pf-c-button {
19913
- --pf-c-button--PaddingRight: var(--pf-c-search-input__utilities--c-button--PaddingRight);
19914
- --pf-c-button--PaddingLeft: var(--pf-c-search-input__utilities--c-button--PaddingLeft);
19915
- }
19916
-
19917
- .pf-c-search-input__nav {
19918
- display: flex;
19919
- }
19920
-
19921
- .pf-c-search-input__count {
19922
- display: flex;
19923
- align-items: center;
19924
- }
19925
-
19926
- .pf-c-search-input__menu {
19927
- position: absolute;
19928
- top: var(--pf-c-search-input__menu--Top);
19929
- z-index: var(--pf-c-search-input__menu--ZIndex);
19930
- min-width: 100%;
19931
- background-color: var(--pf-c-search-input__menu--BackgroundColor);
19932
- background-clip: padding-box;
19933
- box-shadow: var(--pf-c-search-input__menu--BoxShadow);
19934
- }
19935
-
19936
- .pf-c-search-input.pf-m-top .pf-c-search-input__menu {
19937
- --pf-c-search-input__menu--Top: var(--pf-c-search-input--m-top__menu--Top);
19938
- transform: translateY(var(--pf-c-search-input--m-top__menu--TranslateY));
19939
- }
19940
-
19941
- .pf-c-search-input__menu-body {
19942
- padding: var(--pf-c-search-input__menu-body--PaddingTop) var(--pf-c-search-input__menu-body--PaddingRight) var(--pf-c-search-input__menu-body--PaddingBottom) var(--pf-c-search-input__menu-body--PaddingLeft);
19943
- }
19944
-
19945
- .pf-c-search-input__menu-list {
19946
- padding-top: var(--pf-c-search-input__menu-list--PaddingTop);
19947
- padding-bottom: var(--pf-c-search-input__menu-list--PaddingBottom);
19948
- }
19949
-
19950
- .pf-c-search-input__menu-item {
19951
- display: flex;
19952
- width: 100%;
19953
- min-width: 0;
19954
- padding-top: var(--pf-c-search-input__menu-item--PaddingTop);
19955
- padding-right: var(--pf-c-search-input__menu-item--PaddingRight);
19956
- padding-bottom: var(--pf-c-search-input__menu-item--PaddingBottom);
19957
- padding-left: var(--pf-c-search-input__menu-item--PaddingLeft);
19958
- color: var(--pf-c-search-input__menu-item--Color);
19959
- text-align: left;
19960
- background-color: var(--pf-c-search-input__menu-item--BackgroundColor);
19961
- border: none;
19962
- }
19963
-
19964
- .pf-c-search-input__menu-item:hover {
19965
- --pf-c-search-input__menu-item--BackgroundColor: var(--pf-c-search-input__menu-item--hover--BackgroundColor);
19966
- }
19967
-
19968
- .pf-c-search-input__menu-item:focus {
19969
- --pf-c-search-input__menu-item--BackgroundColor: var(--pf-c-search-input__menu-item--focus--BackgroundColor);
19970
- }
19971
-
19972
- .pf-c-search-input__menu-item-text {
19973
- flex-grow: 1;
19974
- }
19975
-
19976
- .pf-c-select {
19977
- --pf-global--Color--100: var(--pf-global--Color--dark-100);
19978
- --pf-global--Color--200: var(--pf-global--Color--dark-200);
19979
- --pf-global--BorderColor--100: var(--pf-global--BorderColor--dark-100);
19980
- --pf-global--primary-color--100: var(--pf-global--primary-color--dark-100);
19981
- --pf-global--link--Color: var(--pf-global--link--Color--dark);
19982
- --pf-global--link--Color--hover: var(--pf-global--link--Color--dark--hover);
19983
- --pf-global--BackgroundColor--100: var(--pf-global--BackgroundColor--light-100);
19484
+ .pf-c-select {
19485
+ --pf-global--Color--100: var(--pf-global--Color--dark-100);
19486
+ --pf-global--Color--200: var(--pf-global--Color--dark-200);
19487
+ --pf-global--BorderColor--100: var(--pf-global--BorderColor--dark-100);
19488
+ --pf-global--primary-color--100: var(--pf-global--primary-color--dark-100);
19489
+ --pf-global--link--Color: var(--pf-global--link--Color--dark);
19490
+ --pf-global--link--Color--hover: var(--pf-global--link--Color--dark--hover);
19491
+ --pf-global--BackgroundColor--100: var(--pf-global--BackgroundColor--light-100);
19984
19492
  }
19985
19493
 
19986
19494
  .pf-c-select {
@@ -24085,38 +23593,6 @@ label.pf-c-radio, .pf-c-radio__label,
24085
23593
  --pf-c-toolbar--spacer: 0;
24086
23594
  }
24087
23595
 
24088
- .pf-c-number-input {
24089
- --pf-c-number-input__unit--c-input-group--MarginLeft: var(--pf-global--spacer--sm);
24090
- --pf-c-number-input__icon--FontSize: var(--pf-global--FontSize--xs);
24091
- --pf-c-number-input--c-form-control--width-base: calc(var(--pf-global--spacer--sm) * 2);
24092
- --pf-c-number-input--c-form-control--width-chars: 4;
24093
- --pf-c-number-input--c-form-control--Width: calc(var(--pf-c-number-input--c-form-control--width-base) + var(--pf-c-number-input--c-form-control--width-chars) * 1ch);
24094
- display: inline-flex;
24095
- align-items: center;
24096
- }
24097
-
24098
- .pf-c-number-input .pf-c-form-control {
24099
- display: inline-flex;
24100
- width: var(--pf-c-number-input--c-form-control--Width);
24101
- text-align: right;
24102
- -moz-appearance: textfield;
24103
- }
24104
-
24105
- .pf-c-number-input .pf-c-form-control::-webkit-outer-spin-button, .pf-c-number-input .pf-c-form-control::-webkit-inner-spin-button {
24106
- -webkit-appearance: none;
24107
- margin: 0;
24108
- }
24109
-
24110
- .pf-c-input-group + .pf-c-number-input__unit,
24111
- .pf-c-number-input__unit + .pf-c-input-group {
24112
- margin-left: var(--pf-c-number-input__unit--c-input-group--MarginLeft);
24113
- }
24114
-
24115
- .pf-c-number-input__icon {
24116
- display: flex;
24117
- font-size: var(--pf-c-number-input__icon--FontSize);
24118
- }
24119
-
24120
23596
  .pf-c-tree-view {
24121
23597
  --pf-c-tree-view--PaddingTop: var(--pf-global--spacer--sm);
24122
23598
  --pf-c-tree-view--PaddingBottom: var(--pf-global--spacer--sm);
@@ -24586,6 +24062,38 @@ label.pf-c-radio, .pf-c-radio__label,
24586
24062
  --pf-c-tree-view--m-compact--m-no-background--border--nested--Left: calc(var(--pf-c-tree-view__node--PaddingLeft) - var(--pf-c-tree-view--m-compact--m-no-background--base-border--Left--offset));
24587
24063
  }
24588
24064
 
24065
+ .pf-c-number-input {
24066
+ --pf-c-number-input__unit--c-input-group--MarginLeft: var(--pf-global--spacer--sm);
24067
+ --pf-c-number-input__icon--FontSize: var(--pf-global--FontSize--xs);
24068
+ --pf-c-number-input--c-form-control--width-base: calc(var(--pf-global--spacer--sm) * 2);
24069
+ --pf-c-number-input--c-form-control--width-chars: 4;
24070
+ --pf-c-number-input--c-form-control--Width: calc(var(--pf-c-number-input--c-form-control--width-base) + var(--pf-c-number-input--c-form-control--width-chars) * 1ch);
24071
+ display: inline-flex;
24072
+ align-items: center;
24073
+ }
24074
+
24075
+ .pf-c-number-input .pf-c-form-control {
24076
+ display: inline-flex;
24077
+ width: var(--pf-c-number-input--c-form-control--Width);
24078
+ text-align: right;
24079
+ -moz-appearance: textfield;
24080
+ }
24081
+
24082
+ .pf-c-number-input .pf-c-form-control::-webkit-outer-spin-button, .pf-c-number-input .pf-c-form-control::-webkit-inner-spin-button {
24083
+ -webkit-appearance: none;
24084
+ margin: 0;
24085
+ }
24086
+
24087
+ .pf-c-input-group + .pf-c-number-input__unit,
24088
+ .pf-c-number-input__unit + .pf-c-input-group {
24089
+ margin-left: var(--pf-c-number-input__unit--c-input-group--MarginLeft);
24090
+ }
24091
+
24092
+ .pf-c-number-input__icon {
24093
+ display: flex;
24094
+ font-size: var(--pf-c-number-input__icon--FontSize);
24095
+ }
24096
+
24589
24097
  .pf-c-wizard__header {
24590
24098
  --pf-global--Color--100: var(--pf-global--Color--light-100);
24591
24099
  --pf-global--Color--200: var(--pf-global--Color--light-200);
@@ -24785,646 +24293,1138 @@ label.pf-c-radio, .pf-c-radio__label,
24785
24293
  --pf-c-wizard__main-body--PaddingLeft: var(--pf-c-wizard__main-body--xl--PaddingLeft);
24786
24294
  }
24787
24295
  }
24788
- @media screen and (min-width: 1200px) {
24789
- .pf-c-wizard {
24790
- --pf-c-wizard__footer--PaddingTop: var(--pf-c-wizard__footer--xl--PaddingTop);
24791
- --pf-c-wizard__footer--PaddingRight: var(--pf-c-wizard__footer--xl--PaddingRight);
24792
- --pf-c-wizard__footer--PaddingBottom: var(--pf-c-wizard__footer--xl--PaddingBottom);
24793
- --pf-c-wizard__footer--PaddingLeft: var(--pf-c-wizard__footer--xl--PaddingLeft);
24794
- }
24296
+ @media screen and (min-width: 1200px) {
24297
+ .pf-c-wizard {
24298
+ --pf-c-wizard__footer--PaddingTop: var(--pf-c-wizard__footer--xl--PaddingTop);
24299
+ --pf-c-wizard__footer--PaddingRight: var(--pf-c-wizard__footer--xl--PaddingRight);
24300
+ --pf-c-wizard__footer--PaddingBottom: var(--pf-c-wizard__footer--xl--PaddingBottom);
24301
+ --pf-c-wizard__footer--PaddingLeft: var(--pf-c-wizard__footer--xl--PaddingLeft);
24302
+ }
24303
+ }
24304
+ .pf-c-modal-box .pf-c-wizard {
24305
+ flex: 1 1 var(--pf-c-modal-box--c-wizard--FlexBasis);
24306
+ min-height: 0;
24307
+ }
24308
+
24309
+ .pf-c-wizard > *:not(.pf-c-wizard__outer-wrap) {
24310
+ flex-shrink: 0;
24311
+ }
24312
+
24313
+ .pf-c-wizard.pf-m-finished {
24314
+ --pf-c-wizard__outer-wrap--lg--PaddingLeft: 0;
24315
+ }
24316
+
24317
+ .pf-c-wizard.pf-m-finished .pf-c-wizard__nav,
24318
+ .pf-c-wizard.pf-m-finished .pf-c-wizard__footer,
24319
+ .pf-c-wizard.pf-m-finished .pf-c-wizard__toggle {
24320
+ display: none;
24321
+ visibility: hidden;
24322
+ }
24323
+
24324
+ .pf-c-wizard__header {
24325
+ color: var(--pf-global--Color--100);
24326
+ position: relative;
24327
+ z-index: var(--pf-c-wizard__header--ZIndex);
24328
+ padding: var(--pf-c-wizard__header--PaddingTop) var(--pf-c-wizard__header--PaddingRight) var(--pf-c-wizard__header--PaddingBottom) var(--pf-c-wizard__header--PaddingLeft);
24329
+ background-color: var(--pf-c-wizard__header--BackgroundColor);
24330
+ }
24331
+
24332
+ .pf-c-wizard__header .pf-c-wizard__close {
24333
+ position: absolute;
24334
+ top: var(--pf-c-wizard__close--Top);
24335
+ right: var(--pf-c-wizard__close--Right);
24336
+ font-size: var(--pf-c-wizard__close--FontSize);
24337
+ }
24338
+
24339
+ .pf-c-wizard__title {
24340
+ padding-right: var(--pf-c-wizard__title--PaddingRight);
24341
+ word-wrap: break-word;
24342
+ }
24343
+
24344
+ .pf-c-wizard__description {
24345
+ display: none;
24346
+ padding-top: var(--pf-c-wizard__description--PaddingTop);
24347
+ color: var(--pf-c-wizard__description--Color);
24348
+ visibility: hidden;
24349
+ }
24350
+
24351
+ @media screen and (min-width: 992px) {
24352
+ .pf-c-wizard__description {
24353
+ display: block;
24354
+ visibility: visible;
24355
+ }
24356
+ }
24357
+ .pf-c-wizard__toggle {
24358
+ position: relative;
24359
+ z-index: var(--pf-c-wizard__toggle--ZIndex);
24360
+ display: flex;
24361
+ justify-content: space-between;
24362
+ width: 100%;
24363
+ padding: var(--pf-c-wizard__toggle--PaddingTop) var(--pf-c-wizard__toggle--PaddingRight) var(--pf-c-wizard__toggle--PaddingBottom) var(--pf-c-wizard__toggle--PaddingLeft);
24364
+ background-color: var(--pf-c-wizard__toggle--BackgroundColor);
24365
+ border: 0;
24366
+ box-shadow: var(--pf-c-wizard__toggle--BoxShadow);
24367
+ }
24368
+
24369
+ @media screen and (min-width: 992px) {
24370
+ .pf-c-wizard__toggle {
24371
+ display: none;
24372
+ visibility: hidden;
24373
+ }
24374
+ }
24375
+ .pf-c-wizard__toggle.pf-m-expanded {
24376
+ --pf-c-wizard__toggle--BoxShadow: none;
24377
+ border-bottom: var(--pf-c-wizard__toggle--m-expanded--BorderBottomWidth) solid var(--pf-c-wizard__toggle--m-expanded--BorderBottomColor);
24378
+ }
24379
+
24380
+ .pf-c-wizard__toggle.pf-m-expanded .pf-c-wizard__toggle-icon {
24381
+ transform: rotate(var(--pf-c-wizard__toggle--m-expanded__toggle-icon--Rotate));
24382
+ }
24383
+
24384
+ .pf-c-wizard__toggle-list {
24385
+ position: relative;
24386
+ display: flex;
24387
+ flex-wrap: wrap;
24388
+ align-items: baseline;
24389
+ margin-right: var(--pf-c-wizard__toggle-list--MarginRight);
24390
+ margin-bottom: var(--pf-c-wizard__toggle-list--MarginBottom);
24391
+ list-style: none;
24392
+ }
24393
+
24394
+ .pf-c-wizard__toggle-list-item {
24395
+ margin-bottom: var(--pf-c-wizard__toggle-list-item--MarginBottom);
24396
+ text-align: left;
24397
+ word-break: break-word;
24398
+ }
24399
+
24400
+ .pf-c-wizard__toggle-list-item:not(:last-child) {
24401
+ margin-right: var(--pf-c-wizard__toggle-list-item--not-last-child--MarginRight);
24402
+ }
24403
+
24404
+ .pf-c-wizard__toggle-num {
24405
+ --pf-c-wizard__nav-link--before--Top: var(--pf-c-wizard__toggle-num--before--Top);
24406
+ }
24407
+
24408
+ .pf-c-wizard__toggle-separator {
24409
+ margin-left: var(--pf-c-wizard__toggle-separator--MarginLeft);
24410
+ color: var(--pf-c-wizard__toggle-separator--Color);
24411
+ }
24412
+
24413
+ .pf-c-wizard__toggle-icon {
24414
+ line-height: var(--pf-c-wizard__toggle-icon--LineHeight);
24415
+ }
24416
+
24417
+ .pf-c-wizard__outer-wrap {
24418
+ position: relative;
24419
+ display: flex;
24420
+ flex-direction: column;
24421
+ flex-grow: 1;
24422
+ min-height: var(--pf-c-wizard__outer-wrap--MinHeight);
24423
+ background-color: var(--pf-c-wizard__outer-wrap--BackgroundColor);
24424
+ }
24425
+
24426
+ @media screen and (min-width: 992px) {
24427
+ .pf-c-wizard__outer-wrap {
24428
+ padding-left: var(--pf-c-wizard__outer-wrap--lg--PaddingLeft);
24429
+ }
24430
+ }
24431
+ .pf-c-wizard__inner-wrap {
24432
+ position: relative;
24433
+ display: flex;
24434
+ flex-direction: column;
24435
+ flex-grow: 1;
24436
+ min-height: 0;
24437
+ }
24438
+
24439
+ @media screen and (min-width: 992px) {
24440
+ .pf-c-wizard__inner-wrap {
24441
+ position: static;
24442
+ }
24443
+ }
24444
+ .pf-c-wizard__nav {
24445
+ position: absolute;
24446
+ top: 0;
24447
+ left: 0;
24448
+ z-index: var(--pf-c-wizard__nav--ZIndex);
24449
+ display: none;
24450
+ width: var(--pf-c-wizard__nav--Width);
24451
+ max-height: 100%;
24452
+ overflow-y: auto;
24453
+ -webkit-overflow-scrolling: touch;
24454
+ visibility: hidden;
24455
+ background-color: var(--pf-c-wizard__nav--BackgroundColor);
24456
+ box-shadow: var(--pf-c-wizard__nav--BoxShadow);
24457
+ }
24458
+
24459
+ .pf-c-wizard__nav.pf-m-expanded {
24460
+ display: block;
24461
+ visibility: visible;
24462
+ }
24463
+
24464
+ @media screen and (min-width: 992px) {
24465
+ .pf-c-wizard__nav {
24466
+ display: block;
24467
+ height: 100%;
24468
+ visibility: visible;
24469
+ border-right: var(--pf-c-wizard__nav--lg--BorderRightWidth) solid var(--pf-c-wizard__nav--lg--BorderRightColor);
24470
+ }
24471
+ }
24472
+ .pf-c-wizard__nav-list {
24473
+ padding-top: var(--pf-c-wizard__nav-list--PaddingTop);
24474
+ padding-right: var(--pf-c-wizard__nav-list--PaddingRight);
24475
+ padding-bottom: var(--pf-c-wizard__nav-list--PaddingBottom);
24476
+ padding-left: var(--pf-c-wizard__nav-list--PaddingLeft);
24477
+ list-style: none;
24478
+ counter-reset: wizard-nav-count;
24479
+ }
24480
+
24481
+ .pf-c-wizard__nav-list .pf-c-wizard__nav-list {
24482
+ padding: 0;
24483
+ margin-top: var(--pf-c-wizard__nav-list--nested--MarginTop);
24484
+ margin-left: var(--pf-c-wizard__nav-list--nested--MarginLeft);
24485
+ }
24486
+
24487
+ .pf-c-wizard__nav-list .pf-c-wizard__nav-list .pf-c-wizard__nav-link::before {
24488
+ content: none;
24489
+ }
24490
+
24491
+ .pf-c-wizard__nav-list .pf-c-wizard__nav-list .pf-c-wizard__nav-link.pf-m-current {
24492
+ font-weight: var(--pf-c-wizard__nav-list__nav-list__nav-link--m-current--FontWeight);
24493
+ }
24494
+
24495
+ .pf-c-wizard__nav-item + .pf-c-wizard__nav-item {
24496
+ margin-top: var(--pf-c-wizard__nav-item--MarginTop);
24497
+ }
24498
+
24499
+ .pf-c-wizard__nav-item.pf-m-expandable > .pf-c-wizard__nav-link {
24500
+ display: flex;
24501
+ }
24502
+
24503
+ .pf-c-wizard__nav-item.pf-m-expandable > .pf-c-wizard__nav-list {
24504
+ display: none;
24505
+ visibility: hidden;
24506
+ }
24507
+
24508
+ .pf-c-wizard__nav-item.pf-m-expanded > .pf-c-wizard__nav-list {
24509
+ display: block;
24510
+ visibility: visible;
24511
+ }
24512
+
24513
+ .pf-c-wizard__nav-item.pf-m-expanded > .pf-c-wizard__nav-link {
24514
+ --pf-c-wizard__nav-link-toggle-icon--Rotate: var(--pf-c-wizard__nav-item--m-expanded__link-toggle-icon--Rotate);
24515
+ }
24516
+
24517
+ .pf-c-wizard__nav-link {
24518
+ position: relative;
24519
+ display: inline-block;
24520
+ width: 100%;
24521
+ color: var(--pf-c-wizard__nav-link--Color);
24522
+ text-align: left;
24523
+ text-decoration: var(--pf-c-wizard__nav-link--TextDecoration);
24524
+ word-break: break-word;
24525
+ border: 0;
24526
+ }
24527
+
24528
+ .pf-c-wizard__toggle-num, .pf-c-wizard__nav-link::before {
24529
+ position: absolute;
24530
+ top: var(--pf-c-wizard__nav-link--before--Top);
24531
+ left: 0;
24532
+ display: inline-flex;
24533
+ align-items: center;
24534
+ justify-content: center;
24535
+ width: var(--pf-c-wizard__nav-link--before--Width);
24536
+ height: var(--pf-c-wizard__nav-link--before--Height);
24537
+ font-size: var(--pf-c-wizard__nav-link--before--FontSize);
24538
+ line-height: 1;
24539
+ color: var(--pf-c-wizard__nav-link--before--Color);
24540
+ background-color: var(--pf-c-wizard__nav-link--before--BackgroundColor);
24541
+ border-radius: var(--pf-c-wizard__nav-link--before--BorderRadius);
24542
+ transform: translateX(var(--pf-c-wizard__nav-link--before--TranslateX));
24543
+ }
24544
+
24545
+ .pf-c-wizard__nav-link::before {
24546
+ top: 0;
24547
+ content: counter(wizard-nav-count);
24548
+ counter-increment: wizard-nav-count;
24549
+ }
24550
+
24551
+ .pf-c-wizard__nav-link:hover {
24552
+ --pf-c-wizard__nav-link--Color: var(--pf-c-wizard__nav-link--hover--Color);
24553
+ --pf-c-wizard__nav-link-toggle--Color: var(--pf-c-wizard__nav-link--hover__nav-link-toggle-icon--Color);
24554
+ }
24555
+
24556
+ .pf-c-wizard__nav-link:focus {
24557
+ --pf-c-wizard__nav-link--Color: var(--pf-c-wizard__nav-link--focus--Color);
24558
+ --pf-c-wizard__nav-link-toggle--Color: var(--pf-c-wizard__nav-link--focus__nav-link-toggle-icon--Color);
24559
+ }
24560
+
24561
+ .pf-c-wizard__nav-link.pf-m-current {
24562
+ --pf-c-wizard__nav-link--Color: var(--pf-c-wizard__nav-link--m-current--Color);
24563
+ font-weight: var(--pf-c-wizard__nav-link--m-current--FontWeight);
24564
+ }
24565
+
24566
+ .pf-c-wizard__toggle-num, .pf-c-wizard__nav-link.pf-m-current::before {
24567
+ --pf-c-wizard__nav-link--before--BackgroundColor: var(--pf-c-wizard__nav-link--m-current--before--BackgroundColor);
24568
+ --pf-c-wizard__nav-link--before--Color: var(--pf-c-wizard__nav-link--m-current--before--Color);
24569
+ }
24570
+
24571
+ .pf-c-wizard__nav-link:disabled, .pf-c-wizard__nav-link.pf-m-disabled {
24572
+ --pf-c-wizard__nav-link--Color: var(--pf-c-wizard__nav-link--m-disabled--Color);
24573
+ pointer-events: none;
24574
+ }
24575
+
24576
+ .pf-c-wizard__nav-link:disabled::before, .pf-c-wizard__nav-link.pf-m-disabled::before {
24577
+ --pf-c-wizard__nav-link--before--BackgroundColor: var(--pf-c-wizard__nav-link--m-disabled--before--BackgroundColor);
24578
+ --pf-c-wizard__nav-link--before--Color: var(--pf-c-wizard__nav-link--m-disabled--before--Color);
24579
+ }
24580
+
24581
+ .pf-c-wizard__nav-link-text {
24582
+ flex-grow: 1;
24583
+ }
24584
+
24585
+ .pf-c-wizard__nav-link-toggle {
24586
+ padding-right: var(--pf-c-wizard__nav-link-toggle--PaddingRight);
24587
+ padding-left: var(--pf-c-wizard__nav-link-toggle--PaddingLeft);
24588
+ color: var(--pf-c-wizard__nav-link-toggle--Color);
24589
+ }
24590
+
24591
+ .pf-c-wizard__nav-link-toggle-icon {
24592
+ display: inline-block;
24593
+ transition: var(--pf-c-wizard__nav-link-toggle-icon--Transition);
24594
+ transform: rotate(var(--pf-c-wizard__nav-link-toggle-icon--Rotate));
24595
+ }
24596
+
24597
+ .pf-c-wizard__main {
24598
+ z-index: var(--pf-c-wizard__main--ZIndex);
24599
+ flex: 1 1 auto;
24600
+ overflow-x: hidden;
24601
+ overflow-y: auto;
24602
+ word-break: break-word;
24603
+ }
24604
+
24605
+ .pf-c-wizard__main-body {
24606
+ padding: var(--pf-c-wizard__main-body--PaddingTop) var(--pf-c-wizard__main-body--PaddingRight) var(--pf-c-wizard__main-body--PaddingBottom) var(--pf-c-wizard__main-body--PaddingLeft);
24607
+ }
24608
+
24609
+ .pf-c-wizard__main-body.pf-m-no-padding {
24610
+ padding: 0;
24611
+ }
24612
+
24613
+ .pf-c-wizard__footer {
24614
+ z-index: var(--pf-c-wizard__footer--ZIndex);
24615
+ display: flex;
24616
+ flex-wrap: wrap;
24617
+ flex-shrink: 0;
24618
+ padding: var(--pf-c-wizard__footer--PaddingTop) var(--pf-c-wizard__footer--PaddingRight) var(--pf-c-wizard__footer--PaddingBottom) var(--pf-c-wizard__footer--PaddingLeft);
24619
+ background-color: var(--pf-c-wizard__footer--BackgroundColor);
24620
+ }
24621
+
24622
+ .pf-c-wizard__footer > * {
24623
+ margin-bottom: var(--pf-c-wizard__footer--child--MarginBottom);
24624
+ }
24625
+
24626
+ .pf-c-wizard__footer > *:not(:last-child) {
24627
+ margin-right: var(--pf-c-wizard__footer--child--MarginRight);
24628
+ }
24629
+
24630
+ .pf-c-page__main-wizard .pf-c-wizard__footer, .pf-c-modal-box .pf-c-wizard__footer {
24631
+ box-shadow: var(--pf-c-wizard__footer--BoxShadow);
24632
+ }
24633
+
24634
+ .pf-c-wizard__footer-cancel {
24635
+ margin-left: var(--pf-c-wizard__footer-cancel--MarginLeft);
24636
+ }
24637
+
24638
+ .pf-c-draggable {
24639
+ --pf-c-draggable--Cursor: auto;
24640
+ --pf-c-draggable--m-dragging--Cursor: grabbing;
24641
+ --pf-c-draggable--m-dragging--BoxShadow: var(--pf-global--BoxShadow--md);
24642
+ --pf-c-draggable--m-dragging--after--BorderWidth: var(--pf-global--BorderWidth--sm);
24643
+ --pf-c-draggable--m-dragging--after--BorderColor: var(--pf-global--active-color--100);
24644
+ --pf-c-draggable--m-drag-outside--Cursor: not-allowed;
24645
+ --pf-c-draggable--m-drag-outside--after--BorderColor: var(--pf-global--danger-color--100);
24646
+ cursor: var(--pf-c-draggable--Cursor);
24647
+ }
24648
+
24649
+ .pf-c-draggable.pf-m-dragging {
24650
+ --pf-c-draggable--Cursor: var(--pf-c-draggable--m-dragging--Cursor);
24651
+ position: relative;
24652
+ background-color: var(--pf-c-draggable--m-dragging--BackgroundColor);
24653
+ box-shadow: var(--pf-c-draggable--m-dragging--BoxShadow);
24654
+ }
24655
+
24656
+ .pf-c-draggable.pf-m-dragging::after {
24657
+ position: absolute;
24658
+ top: 0;
24659
+ right: 0;
24660
+ bottom: 0;
24661
+ left: 0;
24662
+ content: "";
24663
+ border: var(--pf-c-draggable--m-dragging--after--BorderWidth) solid var(--pf-c-draggable--m-dragging--after--BorderColor);
24664
+ }
24665
+
24666
+ .pf-c-draggable.pf-m-drag-outside {
24667
+ --pf-c-draggable--m-dragging--Cursor: var(--pf-c-draggable--m-drag-outside--Cursor);
24668
+ --pf-c-draggable--m-dragging--after--BorderColor: var(--pf-c-draggable--m-drag-outside--after--BorderColor);
24669
+ }
24670
+
24671
+ .pf-c-droppable {
24672
+ --pf-c-droppable--m-dragging--after--BackgroundColor: rgba(255, 255, 255, 0.6);
24673
+ --pf-c-droppable--m-dragging--after--BorderWidth: var(--pf-global--BorderWidth--sm);
24674
+ --pf-c-droppable--m-dragging--after--BorderColor: var(--pf-global--active-color--100);
24675
+ --pf-c-droppable--m-drag-outside--after--BorderColor: var(--pf-global--danger-color--100);
24676
+ }
24677
+
24678
+ .pf-c-droppable.pf-m-dragging {
24679
+ position: relative;
24680
+ }
24681
+
24682
+ .pf-c-droppable.pf-m-dragging::after {
24683
+ position: absolute;
24684
+ top: 0;
24685
+ right: 0;
24686
+ bottom: 0;
24687
+ left: 0;
24688
+ pointer-events: none;
24689
+ content: "";
24690
+ }
24691
+
24692
+ .pf-c-droppable::after {
24693
+ background-color: var(--pf-c-droppable--m-dragging--after--BackgroundColor);
24694
+ border: var(--pf-c-droppable--m-dragging--after--BorderWidth) solid var(--pf-c-droppable--m-dragging--after--BorderColor);
24795
24695
  }
24796
- .pf-c-modal-box .pf-c-wizard {
24797
- flex: 1 1 var(--pf-c-modal-box--c-wizard--FlexBasis);
24798
- min-height: 0;
24696
+
24697
+ .pf-c-droppable.pf-m-drag-outside {
24698
+ --pf-c-droppable--m-dragging--after--BorderColor: var(--pf-c-droppable--m-drag-outside--after--BorderColor);
24799
24699
  }
24800
24700
 
24801
- .pf-c-wizard > *:not(.pf-c-wizard__outer-wrap) {
24802
- flex-shrink: 0;
24701
+ .pf-c-text-input-group {
24702
+ --pf-c-text-input-group--BackgroundColor: var(--pf-global--BackgroundColor--100);
24703
+ --pf-c-text-input-group__text--before--BorderWidth: var(--pf-global--BorderWidth--sm);
24704
+ --pf-c-text-input-group__text--before--BorderColor: var(--pf-global--BorderColor--300);
24705
+ --pf-c-text-input-group__text--after--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
24706
+ --pf-c-text-input-group__text--after--BorderBottomColor: var(--pf-global--BorderColor--200);
24707
+ --pf-c-text-input-group--hover__text--after--BorderBottomColor: var(--pf-global--primary-color--100);
24708
+ --pf-c-text-input-group__text--focus-within--after--BorderBottomWidth: var(--pf-global--BorderWidth--md);
24709
+ --pf-c-text-input-group__text--focus-within--after--BorderBottomColor: var(--pf-global--primary-color--100);
24710
+ --pf-c-text-input-group__main--first-child--not--text-input--MarginLeft: var(--pf-global--spacer--sm);
24711
+ --pf-c-text-input-group__main--m-icon__text-input--PaddingLeft: var(--pf-global--spacer--xl);
24712
+ --pf-c-text-input-group__text-input--PaddingTop: var(--pf-global--spacer--form-element);
24713
+ --pf-c-text-input-group__text-input--PaddingRight: var(--pf-global--spacer--sm);
24714
+ --pf-c-text-input-group__text-input--PaddingBottom: var(--pf-global--spacer--form-element);
24715
+ --pf-c-text-input-group__text-input--PaddingLeft: var(--pf-global--spacer--sm);
24716
+ --pf-c-text-input-group__text-input--MinWidth: 12ch;
24717
+ --pf-c-text-input-group__text-input--m-hint--Color: var(--pf-global--Color--dark-200);
24718
+ --pf-c-text-input-group__icon--Left: var(--pf-global--spacer--sm);
24719
+ --pf-c-text-input-group__icon--Color: var(--pf-global--Color--200);
24720
+ --pf-c-text-input-group__text--hover__icon--Color: var(--pf-global--Color--100);
24721
+ --pf-c-text-input-group__icon--TranslateY: -50%;
24722
+ --pf-c-text-input-group__utilities--MarginRight: var(--pf-global--spacer--sm);
24723
+ --pf-c-text-input-group__utilities--MarginLeft: var(--pf-global--spacer--xs);
24724
+ --pf-c-text-input-group__utilities--child--MarginLeft: var(--pf-global--spacer--xs);
24725
+ --pf-c-text-input-group__utilities--c-button--PaddingRight: var(--pf-global--spacer--xs);
24726
+ --pf-c-text-input-group__utilities--c-button--PaddingLeft: var(--pf-global--spacer--xs);
24727
+ --pf-c-text-input-group--m-disabled--Color: var(--pf-global--disabled-color--100);
24728
+ --pf-c-text-input-group--m-disabled--BackgroundColor: var(--pf-global--disabled-color--300);
24729
+ position: relative;
24730
+ display: flex;
24731
+ color: var(--pf-c-text-input-group--Color, inherit);
24732
+ background-color: var(--pf-c-text-input-group--BackgroundColor);
24803
24733
  }
24804
24734
 
24805
- .pf-c-wizard.pf-m-finished {
24806
- --pf-c-wizard__outer-wrap--lg--PaddingLeft: 0;
24735
+ .pf-c-text-input-group:hover {
24736
+ --pf-c-text-input-group__text--after--BorderBottomColor: var(--pf-c-text-input-group--hover__text--after--BorderBottomColor);
24807
24737
  }
24808
24738
 
24809
- .pf-c-wizard.pf-m-finished .pf-c-wizard__nav,
24810
- .pf-c-wizard.pf-m-finished .pf-c-wizard__footer,
24811
- .pf-c-wizard.pf-m-finished .pf-c-wizard__toggle {
24812
- display: none;
24813
- visibility: hidden;
24739
+ .pf-c-text-input-group.pf-m-disabled {
24740
+ --pf-c-text-input-group__text--before--BorderWidth: 0;
24741
+ --pf-c-text-input-group__text--after--BorderBottomWidth: 0;
24742
+ --pf-c-text-input-group--Color: var(--pf-c-text-input-group--m-disabled--Color);
24743
+ --pf-c-text-input-group__icon--Color: var(--pf-c-text-input-group--m-disabled--Color);
24744
+ --pf-c-text-input-group--BackgroundColor: var(--pf-c-text-input-group--m-disabled--BackgroundColor);
24745
+ pointer-events: none;
24814
24746
  }
24815
24747
 
24816
- .pf-c-wizard__header {
24817
- color: var(--pf-global--Color--100);
24818
- position: relative;
24819
- z-index: var(--pf-c-wizard__header--ZIndex);
24820
- padding: var(--pf-c-wizard__header--PaddingTop) var(--pf-c-wizard__header--PaddingRight) var(--pf-c-wizard__header--PaddingBottom) var(--pf-c-wizard__header--PaddingLeft);
24821
- background-color: var(--pf-c-wizard__header--BackgroundColor);
24748
+ .pf-c-text-input-group__main {
24749
+ display: flex;
24750
+ flex: 1;
24751
+ gap: var(--pf-global--spacer--sm);
24752
+ min-width: 0;
24822
24753
  }
24823
24754
 
24824
- .pf-c-wizard__header .pf-c-wizard__close {
24825
- position: absolute;
24826
- top: var(--pf-c-wizard__close--Top);
24827
- right: var(--pf-c-wizard__close--Right);
24828
- font-size: var(--pf-c-wizard__close--FontSize);
24755
+ .pf-c-text-input-group__main.pf-m-icon {
24756
+ --pf-c-text-input-group__text-input--PaddingLeft: var(--pf-c-text-input-group__main--m-icon__text-input--PaddingLeft);
24829
24757
  }
24830
24758
 
24831
- .pf-c-wizard__title {
24832
- padding-right: var(--pf-c-wizard__title--PaddingRight);
24833
- word-wrap: break-word;
24759
+ .pf-c-text-input-group__main > :first-child:not(.pf-c-text-input-group__text) {
24760
+ margin-left: var(--pf-c-text-input-group__main--first-child--not--text-input--MarginLeft);
24834
24761
  }
24835
24762
 
24836
- .pf-c-wizard__description {
24763
+ .pf-c-text-input-group__main .pf-c-chip-group {
24764
+ overflow: auto;
24765
+ -ms-overflow-style: none;
24766
+ scrollbar-width: none;
24767
+ }
24768
+
24769
+ .pf-c-text-input-group__main .pf-c-chip-group::-webkit-scrollbar {
24837
24770
  display: none;
24838
- padding-top: var(--pf-c-wizard__description--PaddingTop);
24839
- color: var(--pf-c-wizard__description--Color);
24840
- visibility: hidden;
24841
24771
  }
24842
24772
 
24843
- @media screen and (min-width: 992px) {
24844
- .pf-c-wizard__description {
24845
- display: block;
24846
- visibility: visible;
24847
- }
24773
+ .pf-c-text-input-group__main .pf-c-chip-group,
24774
+ .pf-c-text-input-group__main .pf-c-chip-group__list {
24775
+ flex-wrap: nowrap;
24848
24776
  }
24849
- .pf-c-wizard__toggle {
24850
- position: relative;
24851
- z-index: var(--pf-c-wizard__toggle--ZIndex);
24852
- display: flex;
24853
- justify-content: space-between;
24854
- width: 100%;
24855
- padding: var(--pf-c-wizard__toggle--PaddingTop) var(--pf-c-wizard__toggle--PaddingRight) var(--pf-c-wizard__toggle--PaddingBottom) var(--pf-c-wizard__toggle--PaddingLeft);
24856
- background-color: var(--pf-c-wizard__toggle--BackgroundColor);
24857
- border: 0;
24858
- box-shadow: var(--pf-c-wizard__toggle--BoxShadow);
24777
+
24778
+ .pf-c-text-input-group__text {
24779
+ display: inline-grid;
24780
+ grid-template-columns: 1fr;
24781
+ grid-template-areas: "text-input";
24782
+ flex: 1;
24859
24783
  }
24860
24784
 
24861
- @media screen and (min-width: 992px) {
24862
- .pf-c-wizard__toggle {
24863
- display: none;
24864
- visibility: hidden;
24865
- }
24785
+ .pf-c-text-input-group__text::before, .pf-c-text-input-group__text::after {
24786
+ position: absolute;
24787
+ top: 0;
24788
+ right: 0;
24789
+ bottom: 0;
24790
+ left: 0;
24791
+ pointer-events: none;
24792
+ content: "";
24866
24793
  }
24867
- .pf-c-wizard__toggle.pf-m-expanded {
24868
- --pf-c-wizard__toggle--BoxShadow: none;
24869
- border-bottom: var(--pf-c-wizard__toggle--m-expanded--BorderBottomWidth) solid var(--pf-c-wizard__toggle--m-expanded--BorderBottomColor);
24794
+
24795
+ .pf-c-text-input-group__text::before {
24796
+ border: var(--pf-c-text-input-group__text--before--BorderWidth) solid var(--pf-c-text-input-group__text--before--BorderColor);
24870
24797
  }
24871
24798
 
24872
- .pf-c-wizard__toggle.pf-m-expanded .pf-c-wizard__toggle-icon {
24873
- transform: rotate(var(--pf-c-wizard__toggle--m-expanded__toggle-icon--Rotate));
24799
+ .pf-c-text-input-group__text::after {
24800
+ border-bottom: var(--pf-c-text-input-group__text--after--BorderBottomWidth) solid var(--pf-c-text-input-group__text--after--BorderBottomColor);
24874
24801
  }
24875
24802
 
24876
- .pf-c-wizard__toggle-list {
24877
- position: relative;
24878
- display: flex;
24879
- flex-wrap: wrap;
24880
- align-items: baseline;
24881
- margin-right: var(--pf-c-wizard__toggle-list--MarginRight);
24882
- margin-bottom: var(--pf-c-wizard__toggle-list--MarginBottom);
24883
- list-style: none;
24803
+ .pf-c-text-input-group__text:hover, .pf-c-text-input-group__text:focus-within {
24804
+ --pf-c-text-input-group__icon--Color: var(--pf-c-text-input-group__text--hover__icon--Color);
24884
24805
  }
24885
24806
 
24886
- .pf-c-wizard__toggle-list-item {
24887
- margin-bottom: var(--pf-c-wizard__toggle-list-item--MarginBottom);
24888
- text-align: left;
24889
- word-break: break-word;
24807
+ .pf-c-text-input-group__text:focus-within {
24808
+ --pf-c-text-input-group__text--after--BorderBottomWidth: var(--pf-c-text-input-group__text--focus-within--after--BorderBottomWidth);
24809
+ --pf-c-text-input-group__text--after--BorderBottomColor: var(--pf-c-text-input-group__text--focus-within--after--BorderBottomColor);
24890
24810
  }
24891
24811
 
24892
- .pf-c-wizard__toggle-list-item:not(:last-child) {
24893
- margin-right: var(--pf-c-wizard__toggle-list-item--not-last-child--MarginRight);
24812
+ .pf-c-text-input-group__icon {
24813
+ position: absolute;
24814
+ top: 50%;
24815
+ left: var(--pf-c-text-input-group__icon--Left);
24816
+ color: var(--pf-c-text-input-group__icon--Color);
24817
+ transform: translateY(var(--pf-c-text-input-group__icon--TranslateY));
24894
24818
  }
24895
24819
 
24896
- .pf-c-wizard__toggle-num {
24897
- --pf-c-wizard__nav-link--before--Top: var(--pf-c-wizard__toggle-num--before--Top);
24820
+ .pf-c-text-input-group__text-input {
24821
+ overflow: hidden;
24822
+ text-overflow: ellipsis;
24823
+ white-space: nowrap;
24824
+ position: relative;
24825
+ width: 100%;
24826
+ min-width: var(--pf-c-text-input-group__text-input--MinWidth);
24827
+ padding: var(--pf-c-text-input-group__text-input--PaddingTop) var(--pf-c-text-input-group__text-input--PaddingRight) var(--pf-c-text-input-group__text-input--PaddingBottom) var(--pf-c-text-input-group__text-input--PaddingLeft);
24828
+ border: 0;
24898
24829
  }
24899
24830
 
24900
- .pf-c-wizard__toggle-separator {
24901
- margin-left: var(--pf-c-wizard__toggle-separator--MarginLeft);
24902
- color: var(--pf-c-wizard__toggle-separator--Color);
24831
+ .pf-c-text-input-group__text-input, .pf-c-text-input-group__text-input.pf-m-hint {
24832
+ grid-area: text-input;
24903
24833
  }
24904
24834
 
24905
- .pf-c-wizard__toggle-icon {
24906
- line-height: var(--pf-c-wizard__toggle-icon--LineHeight);
24835
+ .pf-c-text-input-group__text-input.pf-m-hint {
24836
+ color: var(--pf-c-text-input-group__text-input--m-hint--Color);
24907
24837
  }
24908
24838
 
24909
- .pf-c-wizard__outer-wrap {
24910
- position: relative;
24839
+ .pf-c-text-input-group__utilities {
24911
24840
  display: flex;
24912
- flex-direction: column;
24913
- flex-grow: 1;
24914
- min-height: var(--pf-c-wizard__outer-wrap--MinHeight);
24915
- background-color: var(--pf-c-wizard__outer-wrap--BackgroundColor);
24841
+ align-items: center;
24842
+ margin-right: var(--pf-c-text-input-group__utilities--MarginRight);
24843
+ margin-left: var(--pf-c-text-input-group__utilities--MarginLeft);
24916
24844
  }
24917
24845
 
24918
- @media screen and (min-width: 992px) {
24919
- .pf-c-wizard__outer-wrap {
24920
- padding-left: var(--pf-c-wizard__outer-wrap--lg--PaddingLeft);
24921
- }
24846
+ .pf-c-text-input-group__utilities > * + * {
24847
+ margin-left: var(--pf-c-text-input-group__utilities--child--MarginLeft);
24922
24848
  }
24923
- .pf-c-wizard__inner-wrap {
24849
+
24850
+ .pf-c-text-input-group__utilities .pf-c-button {
24851
+ --pf-c-button--PaddingRight: var(--pf-c-text-input-group__utilities--c-button--PaddingRight);
24852
+ --pf-c-button--PaddingLeft: var(--pf-c-text-input-group__utilities--c-button--PaddingLeft);
24853
+ }
24854
+
24855
+ .pf-c-panel {
24856
+ --pf-c-panel--Width: auto;
24857
+ --pf-c-panel--MinWidth: auto;
24858
+ --pf-c-panel--MaxWidth: none;
24859
+ --pf-c-panel--ZIndex: auto;
24860
+ --pf-c-panel--BackgroundColor: var(--pf-global--BackgroundColor--100);
24861
+ --pf-c-panel--BoxShadow: none;
24862
+ --pf-c-panel--before--BorderWidth: 0;
24863
+ --pf-c-panel--before--BorderColor: var(--pf-global--BorderColor--100);
24864
+ --pf-c-panel--m-bordered--before--BorderWidth: var(--pf-global--BorderWidth--sm);
24865
+ --pf-c-panel--m-raised--BoxShadow: var(--pf-global--BoxShadow--md);
24866
+ --pf-c-panel--m-raised--ZIndex: var(--pf-global--ZIndex--sm);
24867
+ --pf-c-panel__header--PaddingTop: var(--pf-global--spacer--md);
24868
+ --pf-c-panel__header--PaddingRight: var(--pf-global--spacer--md);
24869
+ --pf-c-panel__header--PaddingBottom: var(--pf-global--spacer--md);
24870
+ --pf-c-panel__header--PaddingLeft: var(--pf-global--spacer--md);
24871
+ --pf-c-panel__main--MaxHeight: none;
24872
+ --pf-c-panel__main--Overflow: visible;
24873
+ --pf-c-panel__main-body--PaddingTop: var(--pf-global--spacer--md);
24874
+ --pf-c-panel__main-body--PaddingRight: var(--pf-global--spacer--md);
24875
+ --pf-c-panel__main-body--PaddingBottom: var(--pf-global--spacer--md);
24876
+ --pf-c-panel__main-body--PaddingLeft: var(--pf-global--spacer--md);
24877
+ --pf-c-panel__footer--PaddingTop: var(--pf-global--spacer--md);
24878
+ --pf-c-panel__footer--PaddingRight: var(--pf-global--spacer--md);
24879
+ --pf-c-panel__footer--PaddingBottom: var(--pf-global--spacer--md);
24880
+ --pf-c-panel__footer--PaddingLeft: var(--pf-global--spacer--md);
24881
+ --pf-c-panel__footer--BoxShadow: none;
24882
+ --pf-c-panel--m-scrollable__main--MaxHeight: 18.75rem;
24883
+ --pf-c-panel--m-scrollable__main--Overflow: auto;
24884
+ --pf-c-panel--m-scrollable__footer--BoxShadow: 0 -0.3125rem 0.25rem -0.25rem rgba(3, 3, 3, 0.16);
24924
24885
  position: relative;
24925
- display: flex;
24926
- flex-direction: column;
24927
- flex-grow: 1;
24928
- min-height: 0;
24886
+ z-index: var(--pf-c-panel--ZIndex);
24887
+ width: var(--pf-c-panel--Width);
24888
+ min-width: var(--pf-c-panel--MinWidth);
24889
+ max-width: var(--pf-c-panel--MaxWidth);
24890
+ background-color: var(--pf-c-panel--BackgroundColor);
24891
+ box-shadow: var(--pf-c-panel--BoxShadow);
24929
24892
  }
24930
24893
 
24931
- @media screen and (min-width: 992px) {
24932
- .pf-c-wizard__inner-wrap {
24933
- position: static;
24934
- }
24935
- }
24936
- .pf-c-wizard__nav {
24894
+ .pf-c-panel::before {
24937
24895
  position: absolute;
24938
24896
  top: 0;
24897
+ right: 0;
24898
+ bottom: 0;
24939
24899
  left: 0;
24940
- z-index: var(--pf-c-wizard__nav--ZIndex);
24941
- display: none;
24942
- width: var(--pf-c-wizard__nav--Width);
24943
- max-height: 100%;
24944
- overflow-y: auto;
24945
- -webkit-overflow-scrolling: touch;
24946
- visibility: hidden;
24947
- background-color: var(--pf-c-wizard__nav--BackgroundColor);
24948
- box-shadow: var(--pf-c-wizard__nav--BoxShadow);
24949
- }
24950
-
24951
- .pf-c-wizard__nav.pf-m-expanded {
24952
- display: block;
24953
- visibility: visible;
24954
- }
24955
-
24956
- @media screen and (min-width: 992px) {
24957
- .pf-c-wizard__nav {
24958
- display: block;
24959
- height: 100%;
24960
- visibility: visible;
24961
- border-right: var(--pf-c-wizard__nav--lg--BorderRightWidth) solid var(--pf-c-wizard__nav--lg--BorderRightColor);
24962
- }
24963
- }
24964
- .pf-c-wizard__nav-list {
24965
- padding-top: var(--pf-c-wizard__nav-list--PaddingTop);
24966
- padding-right: var(--pf-c-wizard__nav-list--PaddingRight);
24967
- padding-bottom: var(--pf-c-wizard__nav-list--PaddingBottom);
24968
- padding-left: var(--pf-c-wizard__nav-list--PaddingLeft);
24969
- list-style: none;
24970
- counter-reset: wizard-nav-count;
24900
+ pointer-events: none;
24901
+ content: "";
24902
+ border: var(--pf-c-panel--before--BorderWidth) solid var(--pf-c-panel--before--BorderColor);
24971
24903
  }
24972
24904
 
24973
- .pf-c-wizard__nav-list .pf-c-wizard__nav-list {
24974
- padding: 0;
24975
- margin-top: var(--pf-c-wizard__nav-list--nested--MarginTop);
24976
- margin-left: var(--pf-c-wizard__nav-list--nested--MarginLeft);
24905
+ .pf-c-panel.pf-m-bordered {
24906
+ --pf-c-panel--before--BorderWidth: var(--pf-c-panel--m-bordered--before--BorderWidth);
24977
24907
  }
24978
24908
 
24979
- .pf-c-wizard__nav-list .pf-c-wizard__nav-list .pf-c-wizard__nav-link::before {
24980
- content: none;
24909
+ .pf-c-panel.pf-m-raised {
24910
+ --pf-c-panel--BoxShadow: var(--pf-c-panel--m-raised--BoxShadow);
24911
+ --pf-c-panel--ZIndex: var(--pf-c-panel--m-raised--ZIndex);
24981
24912
  }
24982
24913
 
24983
- .pf-c-wizard__nav-list .pf-c-wizard__nav-list .pf-c-wizard__nav-link.pf-m-current {
24984
- font-weight: var(--pf-c-wizard__nav-list__nav-list__nav-link--m-current--FontWeight);
24914
+ .pf-c-panel.pf-m-scrollable {
24915
+ --pf-c-panel__main--MaxHeight: var(--pf-c-panel--m-scrollable__main--MaxHeight);
24916
+ --pf-c-panel__main--Overflow: var(--pf-c-panel--m-scrollable__main--Overflow);
24917
+ --pf-c-panel__footer--BoxShadow: var(--pf-c-panel--m-scrollable__footer--BoxShadow);
24985
24918
  }
24986
24919
 
24987
- .pf-c-wizard__nav-item + .pf-c-wizard__nav-item {
24988
- margin-top: var(--pf-c-wizard__nav-item--MarginTop);
24920
+ .pf-c-panel__header {
24921
+ padding: var(--pf-c-panel__header--PaddingTop) var(--pf-c-panel__header--PaddingRight) var(--pf-c-panel__header--PaddingBottom) var(--pf-c-panel__header--PaddingLeft);
24989
24922
  }
24990
24923
 
24991
- .pf-c-wizard__nav-item.pf-m-expandable > .pf-c-wizard__nav-link {
24992
- display: flex;
24924
+ .pf-c-panel__main {
24925
+ max-height: var(--pf-c-panel__main--MaxHeight);
24926
+ overflow: var(--pf-c-panel__main--Overflow);
24993
24927
  }
24994
24928
 
24995
- .pf-c-wizard__nav-item.pf-m-expandable > .pf-c-wizard__nav-list {
24996
- display: none;
24997
- visibility: hidden;
24929
+ .pf-c-panel__main-body {
24930
+ padding: var(--pf-c-panel__main-body--PaddingTop) var(--pf-c-panel__main-body--PaddingRight) var(--pf-c-panel__main-body--PaddingBottom) var(--pf-c-panel__main-body--PaddingLeft);
24998
24931
  }
24999
24932
 
25000
- .pf-c-wizard__nav-item.pf-m-expanded > .pf-c-wizard__nav-list {
25001
- display: block;
25002
- visibility: visible;
24933
+ .pf-c-panel__footer {
24934
+ padding: var(--pf-c-panel__footer--PaddingTop) var(--pf-c-panel__footer--PaddingRight) var(--pf-c-panel__footer--PaddingBottom) var(--pf-c-panel__footer--PaddingLeft);
24935
+ box-shadow: var(--pf-c-panel__footer--BoxShadow);
25003
24936
  }
25004
24937
 
25005
- .pf-c-wizard__nav-item.pf-m-expanded > .pf-c-wizard__nav-link {
25006
- --pf-c-wizard__nav-link-toggle-icon--Rotate: var(--pf-c-wizard__nav-item--m-expanded__link-toggle-icon--Rotate);
24938
+ .pf-c-search-input {
24939
+ --pf-c-search-input__text--before--BorderWidth: var(--pf-global--BorderWidth--sm);
24940
+ --pf-c-search-input__text--before--BorderColor: var(--pf-global--BorderColor--300);
24941
+ --pf-c-search-input__text--after--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
24942
+ --pf-c-search-input__text--after--BorderBottomColor: var(--pf-global--BorderColor--200);
24943
+ --pf-c-search-input__bar--hover__text--after--BorderBottomColor: var(--pf-global--primary-color--100);
24944
+ --pf-c-search-input__text--focus-within--after--BorderBottomWidth: var(--pf-global--BorderWidth--md);
24945
+ --pf-c-search-input__text--focus-within--after--BorderBottomColor: var(--pf-global--primary-color--100);
24946
+ --pf-c-search-input__text-input--PaddingTop: var(--pf-global--spacer--form-element);
24947
+ --pf-c-search-input__text-input--PaddingRight: var(--pf-global--spacer--sm);
24948
+ --pf-c-search-input__text-input--PaddingBottom: var(--pf-global--spacer--form-element);
24949
+ --pf-c-search-input__text-input--PaddingLeft: var(--pf-global--spacer--xl);
24950
+ --pf-c-search-input__text-input--MinWidth: 6ch;
24951
+ --pf-c-search-input__text-input--m-hint--Color: var(--pf-global--Color--dark-200);
24952
+ --pf-c-search-input__icon--Left: var(--pf-global--spacer--sm);
24953
+ --pf-c-search-input__icon--Color: var(--pf-global--Color--200);
24954
+ --pf-c-search-input__text--hover__icon--Color: var(--pf-global--Color--100);
24955
+ --pf-c-search-input__icon--TranslateY: -50%;
24956
+ --pf-c-search-input__utilities--MarginRight: var(--pf-global--spacer--sm);
24957
+ --pf-c-search-input__utilities--MarginLeft: var(--pf-global--spacer--xs);
24958
+ --pf-c-search-input__utilities--child--MarginLeft: var(--pf-global--spacer--xs);
24959
+ --pf-c-search-input__utilities--c-button--PaddingRight: var(--pf-global--spacer--xs);
24960
+ --pf-c-search-input__utilities--c-button--PaddingLeft: var(--pf-global--spacer--xs);
24961
+ --pf-c-search-input__menu-body--PaddingTop: var(--pf-global--spacer--md);
24962
+ --pf-c-search-input__menu-body--PaddingRight: var(--pf-global--spacer--md);
24963
+ --pf-c-search-input__menu-body--PaddingBottom: var(--pf-global--spacer--md);
24964
+ --pf-c-search-input__menu-body--PaddingLeft: var(--pf-global--spacer--md);
24965
+ --pf-c-search-input__menu--BackgroundColor: var(--pf-global--BackgroundColor--light-100);
24966
+ --pf-c-search-input__menu--BoxShadow: var(--pf-global--BoxShadow--md);
24967
+ --pf-c-search-input__menu--Top: calc(100% + var(--pf-global--spacer--xs));
24968
+ --pf-c-search-input__menu--ZIndex: var(--pf-global--ZIndex--sm);
24969
+ --pf-c-search-input--m-top__menu--Top: 0;
24970
+ --pf-c-search-input--m-top__menu--TranslateY: calc(-100% - var(--pf-global--spacer--xs));
24971
+ --pf-c-search-input__menu-list--PaddingTop: var(--pf-global--spacer--sm);
24972
+ --pf-c-search-input__menu-list--PaddingBottom: var(--pf-global--spacer--sm);
24973
+ --pf-c-search-input__menu-item--PaddingTop: var(--pf-global--spacer--sm);
24974
+ --pf-c-search-input__menu-item--PaddingRight: var(--pf-global--spacer--md);
24975
+ --pf-c-search-input__menu-item--PaddingBottom: var(--pf-global--spacer--sm);
24976
+ --pf-c-search-input__menu-item--PaddingLeft: var(--pf-global--spacer--md);
24977
+ --pf-c-search-input__menu-item--Color: var(--pf-global--Color--100);
24978
+ --pf-c-search-input__menu-item--BackgroundColor: transparent;
24979
+ --pf-c-search-input__menu-item--hover--BackgroundColor: var(--pf-global--BackgroundColor--200);
24980
+ --pf-c-search-input__menu-item--focus--BackgroundColor: var(--pf-global--BackgroundColor--200);
24981
+ position: relative;
25007
24982
  }
25008
24983
 
25009
- .pf-c-wizard__nav-link {
24984
+ .pf-c-search-input__bar {
25010
24985
  position: relative;
25011
- display: inline-block;
24986
+ display: flex;
25012
24987
  width: 100%;
25013
- color: var(--pf-c-wizard__nav-link--Color);
25014
- text-align: left;
25015
- text-decoration: var(--pf-c-wizard__nav-link--TextDecoration);
25016
- word-break: break-word;
25017
- border: 0;
25018
- }
25019
-
25020
- .pf-c-wizard__toggle-num, .pf-c-wizard__nav-link::before {
25021
- position: absolute;
25022
- top: var(--pf-c-wizard__nav-link--before--Top);
25023
- left: 0;
25024
- display: inline-flex;
25025
- align-items: center;
25026
- justify-content: center;
25027
- width: var(--pf-c-wizard__nav-link--before--Width);
25028
- height: var(--pf-c-wizard__nav-link--before--Height);
25029
- font-size: var(--pf-c-wizard__nav-link--before--FontSize);
25030
- line-height: 1;
25031
- color: var(--pf-c-wizard__nav-link--before--Color);
25032
- background-color: var(--pf-c-wizard__nav-link--before--BackgroundColor);
25033
- border-radius: var(--pf-c-wizard__nav-link--before--BorderRadius);
25034
- transform: translateX(var(--pf-c-wizard__nav-link--before--TranslateX));
25035
24988
  }
25036
24989
 
25037
- .pf-c-wizard__nav-link::before {
25038
- top: 0;
25039
- content: counter(wizard-nav-count);
25040
- counter-increment: wizard-nav-count;
24990
+ .pf-c-search-input__bar:hover {
24991
+ --pf-c-search-input__text--after--BorderBottomColor: var(--pf-c-search-input__bar--hover__text--after--BorderBottomColor);
25041
24992
  }
25042
24993
 
25043
- .pf-c-wizard__nav-link:hover {
25044
- --pf-c-wizard__nav-link--Color: var(--pf-c-wizard__nav-link--hover--Color);
25045
- --pf-c-wizard__nav-link-toggle--Color: var(--pf-c-wizard__nav-link--hover__nav-link-toggle-icon--Color);
24994
+ .pf-c-search-input__text {
24995
+ display: grid;
24996
+ grid-template-columns: 1fr;
24997
+ grid-template-areas: "text-input";
24998
+ flex: 1;
25046
24999
  }
25047
25000
 
25048
- .pf-c-wizard__nav-link:focus {
25049
- --pf-c-wizard__nav-link--Color: var(--pf-c-wizard__nav-link--focus--Color);
25050
- --pf-c-wizard__nav-link-toggle--Color: var(--pf-c-wizard__nav-link--focus__nav-link-toggle-icon--Color);
25001
+ .pf-c-search-input__text::before, .pf-c-search-input__text::after {
25002
+ position: absolute;
25003
+ top: 0;
25004
+ right: 0;
25005
+ bottom: 0;
25006
+ left: 0;
25007
+ pointer-events: none;
25008
+ content: "";
25051
25009
  }
25052
25010
 
25053
- .pf-c-wizard__nav-link.pf-m-current {
25054
- --pf-c-wizard__nav-link--Color: var(--pf-c-wizard__nav-link--m-current--Color);
25055
- font-weight: var(--pf-c-wizard__nav-link--m-current--FontWeight);
25011
+ .pf-c-search-input__text::before {
25012
+ border: var(--pf-c-search-input__text--before--BorderWidth) solid var(--pf-c-search-input__text--before--BorderColor);
25056
25013
  }
25057
25014
 
25058
- .pf-c-wizard__toggle-num, .pf-c-wizard__nav-link.pf-m-current::before {
25059
- --pf-c-wizard__nav-link--before--BackgroundColor: var(--pf-c-wizard__nav-link--m-current--before--BackgroundColor);
25060
- --pf-c-wizard__nav-link--before--Color: var(--pf-c-wizard__nav-link--m-current--before--Color);
25015
+ .pf-c-search-input__text::after {
25016
+ border-bottom: var(--pf-c-search-input__text--after--BorderBottomWidth) solid var(--pf-c-search-input__text--after--BorderBottomColor);
25061
25017
  }
25062
25018
 
25063
- .pf-c-wizard__nav-link:disabled, .pf-c-wizard__nav-link.pf-m-disabled {
25064
- --pf-c-wizard__nav-link--Color: var(--pf-c-wizard__nav-link--m-disabled--Color);
25065
- pointer-events: none;
25019
+ .pf-c-search-input__text:hover, .pf-c-search-input__text:focus-within {
25020
+ --pf-c-search-input__icon--Color: var(--pf-c-search-input__text--hover__icon--Color);
25066
25021
  }
25067
25022
 
25068
- .pf-c-wizard__nav-link:disabled::before, .pf-c-wizard__nav-link.pf-m-disabled::before {
25069
- --pf-c-wizard__nav-link--before--BackgroundColor: var(--pf-c-wizard__nav-link--m-disabled--before--BackgroundColor);
25070
- --pf-c-wizard__nav-link--before--Color: var(--pf-c-wizard__nav-link--m-disabled--before--Color);
25023
+ .pf-c-search-input__text:focus-within {
25024
+ --pf-c-search-input__text--after--BorderBottomWidth: var(--pf-c-search-input__text--focus-within--after--BorderBottomWidth);
25025
+ --pf-c-search-input__text--after--BorderBottomColor: var(--pf-c-search-input__text--focus-within--after--BorderBottomColor);
25071
25026
  }
25072
25027
 
25073
- .pf-c-wizard__nav-link-text {
25074
- flex-grow: 1;
25028
+ .pf-c-search-input__icon {
25029
+ position: absolute;
25030
+ top: 50%;
25031
+ left: var(--pf-c-search-input__icon--Left);
25032
+ color: var(--pf-c-search-input__icon--Color);
25033
+ transform: translateY(var(--pf-c-search-input__icon--TranslateY));
25075
25034
  }
25076
25035
 
25077
- .pf-c-wizard__nav-link-toggle {
25078
- padding-right: var(--pf-c-wizard__nav-link-toggle--PaddingRight);
25079
- padding-left: var(--pf-c-wizard__nav-link-toggle--PaddingLeft);
25080
- color: var(--pf-c-wizard__nav-link-toggle--Color);
25036
+ .pf-c-search-input__text-input {
25037
+ overflow: hidden;
25038
+ text-overflow: ellipsis;
25039
+ white-space: nowrap;
25040
+ position: relative;
25041
+ width: 100%;
25042
+ min-width: var(--pf-c-search-input__text-input--MinWidth);
25043
+ padding: var(--pf-c-search-input__text-input--PaddingTop) var(--pf-c-search-input__text-input--PaddingRight) var(--pf-c-search-input__text-input--PaddingBottom) var(--pf-c-search-input__text-input--PaddingLeft);
25044
+ border: 0;
25081
25045
  }
25082
25046
 
25083
- .pf-c-wizard__nav-link-toggle-icon {
25084
- display: inline-block;
25085
- transition: var(--pf-c-wizard__nav-link-toggle-icon--Transition);
25086
- transform: rotate(var(--pf-c-wizard__nav-link-toggle-icon--Rotate));
25047
+ .pf-c-search-input__text-input, .pf-c-search-input__text-input.pf-m-hint {
25048
+ grid-area: text-input;
25087
25049
  }
25088
25050
 
25089
- .pf-c-wizard__main {
25090
- z-index: var(--pf-c-wizard__main--ZIndex);
25091
- flex: 1 1 auto;
25092
- overflow-x: hidden;
25093
- overflow-y: auto;
25094
- word-break: break-word;
25051
+ .pf-c-search-input__text-input.pf-m-hint {
25052
+ color: var(--pf-c-search-input__text-input--m-hint--Color);
25095
25053
  }
25096
25054
 
25097
- .pf-c-wizard__main-body {
25098
- padding: var(--pf-c-wizard__main-body--PaddingTop) var(--pf-c-wizard__main-body--PaddingRight) var(--pf-c-wizard__main-body--PaddingBottom) var(--pf-c-wizard__main-body--PaddingLeft);
25055
+ .pf-c-search-input__utilities {
25056
+ display: flex;
25057
+ margin-right: var(--pf-c-search-input__utilities--MarginRight);
25058
+ margin-left: var(--pf-c-search-input__utilities--MarginLeft);
25099
25059
  }
25100
25060
 
25101
- .pf-c-wizard__main-body.pf-m-no-padding {
25102
- padding: 0;
25061
+ .pf-c-search-input__utilities > * + * {
25062
+ margin-left: var(--pf-c-search-input__utilities--child--MarginLeft);
25103
25063
  }
25104
25064
 
25105
- .pf-c-wizard__footer {
25106
- z-index: var(--pf-c-wizard__footer--ZIndex);
25107
- display: flex;
25108
- flex-wrap: wrap;
25109
- flex-shrink: 0;
25110
- padding: var(--pf-c-wizard__footer--PaddingTop) var(--pf-c-wizard__footer--PaddingRight) var(--pf-c-wizard__footer--PaddingBottom) var(--pf-c-wizard__footer--PaddingLeft);
25111
- background-color: var(--pf-c-wizard__footer--BackgroundColor);
25065
+ .pf-c-search-input__utilities .pf-c-button {
25066
+ --pf-c-button--PaddingRight: var(--pf-c-search-input__utilities--c-button--PaddingRight);
25067
+ --pf-c-button--PaddingLeft: var(--pf-c-search-input__utilities--c-button--PaddingLeft);
25112
25068
  }
25113
25069
 
25114
- .pf-c-wizard__footer > * {
25115
- margin-bottom: var(--pf-c-wizard__footer--child--MarginBottom);
25070
+ .pf-c-search-input__nav {
25071
+ display: flex;
25116
25072
  }
25117
25073
 
25118
- .pf-c-wizard__footer > *:not(:last-child) {
25119
- margin-right: var(--pf-c-wizard__footer--child--MarginRight);
25074
+ .pf-c-search-input__count {
25075
+ display: flex;
25076
+ align-items: center;
25120
25077
  }
25121
25078
 
25122
- .pf-c-page__main-wizard .pf-c-wizard__footer, .pf-c-modal-box .pf-c-wizard__footer {
25123
- box-shadow: var(--pf-c-wizard__footer--BoxShadow);
25079
+ .pf-c-search-input__menu {
25080
+ position: absolute;
25081
+ top: var(--pf-c-search-input__menu--Top);
25082
+ z-index: var(--pf-c-search-input__menu--ZIndex);
25083
+ min-width: 100%;
25084
+ background-color: var(--pf-c-search-input__menu--BackgroundColor);
25085
+ background-clip: padding-box;
25086
+ box-shadow: var(--pf-c-search-input__menu--BoxShadow);
25124
25087
  }
25125
25088
 
25126
- .pf-c-wizard__footer-cancel {
25127
- margin-left: var(--pf-c-wizard__footer-cancel--MarginLeft);
25089
+ .pf-c-search-input.pf-m-top .pf-c-search-input__menu {
25090
+ --pf-c-search-input__menu--Top: var(--pf-c-search-input--m-top__menu--Top);
25091
+ transform: translateY(var(--pf-c-search-input--m-top__menu--TranslateY));
25128
25092
  }
25129
25093
 
25130
- .pf-c-draggable {
25131
- --pf-c-draggable--Cursor: auto;
25132
- --pf-c-draggable--m-dragging--Cursor: grabbing;
25133
- --pf-c-draggable--m-dragging--BoxShadow: var(--pf-global--BoxShadow--md);
25134
- --pf-c-draggable--m-dragging--after--BorderWidth: var(--pf-global--BorderWidth--sm);
25135
- --pf-c-draggable--m-dragging--after--BorderColor: var(--pf-global--active-color--100);
25136
- --pf-c-draggable--m-drag-outside--Cursor: not-allowed;
25137
- --pf-c-draggable--m-drag-outside--after--BorderColor: var(--pf-global--danger-color--100);
25138
- cursor: var(--pf-c-draggable--Cursor);
25094
+ .pf-c-search-input__menu-body {
25095
+ padding: var(--pf-c-search-input__menu-body--PaddingTop) var(--pf-c-search-input__menu-body--PaddingRight) var(--pf-c-search-input__menu-body--PaddingBottom) var(--pf-c-search-input__menu-body--PaddingLeft);
25139
25096
  }
25140
25097
 
25141
- .pf-c-draggable.pf-m-dragging {
25142
- --pf-c-draggable--Cursor: var(--pf-c-draggable--m-dragging--Cursor);
25143
- position: relative;
25144
- background-color: var(--pf-c-draggable--m-dragging--BackgroundColor);
25145
- box-shadow: var(--pf-c-draggable--m-dragging--BoxShadow);
25098
+ .pf-c-search-input__menu-list {
25099
+ padding-top: var(--pf-c-search-input__menu-list--PaddingTop);
25100
+ padding-bottom: var(--pf-c-search-input__menu-list--PaddingBottom);
25146
25101
  }
25147
25102
 
25148
- .pf-c-draggable.pf-m-dragging::after {
25149
- position: absolute;
25150
- top: 0;
25151
- right: 0;
25152
- bottom: 0;
25153
- left: 0;
25154
- content: "";
25155
- border: var(--pf-c-draggable--m-dragging--after--BorderWidth) solid var(--pf-c-draggable--m-dragging--after--BorderColor);
25103
+ .pf-c-search-input__menu-item {
25104
+ display: flex;
25105
+ width: 100%;
25106
+ min-width: 0;
25107
+ padding-top: var(--pf-c-search-input__menu-item--PaddingTop);
25108
+ padding-right: var(--pf-c-search-input__menu-item--PaddingRight);
25109
+ padding-bottom: var(--pf-c-search-input__menu-item--PaddingBottom);
25110
+ padding-left: var(--pf-c-search-input__menu-item--PaddingLeft);
25111
+ color: var(--pf-c-search-input__menu-item--Color);
25112
+ text-align: left;
25113
+ background-color: var(--pf-c-search-input__menu-item--BackgroundColor);
25114
+ border: none;
25156
25115
  }
25157
25116
 
25158
- .pf-c-draggable.pf-m-drag-outside {
25159
- --pf-c-draggable--m-dragging--Cursor: var(--pf-c-draggable--m-drag-outside--Cursor);
25160
- --pf-c-draggable--m-dragging--after--BorderColor: var(--pf-c-draggable--m-drag-outside--after--BorderColor);
25117
+ .pf-c-search-input__menu-item:hover {
25118
+ --pf-c-search-input__menu-item--BackgroundColor: var(--pf-c-search-input__menu-item--hover--BackgroundColor);
25161
25119
  }
25162
25120
 
25163
- .pf-c-droppable {
25164
- --pf-c-droppable--m-dragging--after--BackgroundColor: rgba(255, 255, 255, 0.6);
25165
- --pf-c-droppable--m-dragging--after--BorderWidth: var(--pf-global--BorderWidth--sm);
25166
- --pf-c-droppable--m-dragging--after--BorderColor: var(--pf-global--active-color--100);
25167
- --pf-c-droppable--m-drag-outside--after--BorderColor: var(--pf-global--danger-color--100);
25121
+ .pf-c-search-input__menu-item:focus {
25122
+ --pf-c-search-input__menu-item--BackgroundColor: var(--pf-c-search-input__menu-item--focus--BackgroundColor);
25168
25123
  }
25169
25124
 
25170
- .pf-c-droppable.pf-m-dragging {
25171
- position: relative;
25125
+ .pf-c-search-input__menu-item-text {
25126
+ flex-grow: 1;
25172
25127
  }
25173
25128
 
25174
- .pf-c-droppable.pf-m-dragging::after {
25175
- position: absolute;
25176
- top: 0;
25177
- right: 0;
25178
- bottom: 0;
25179
- left: 0;
25180
- pointer-events: none;
25181
- content: "";
25129
+ .pf-c-login__footer, .pf-c-login__header {
25130
+ --pf-global--Color--100: var(--pf-global--Color--light-100);
25131
+ --pf-global--Color--200: var(--pf-global--Color--light-200);
25132
+ --pf-global--BorderColor--100: var(--pf-global--BorderColor--light-100);
25133
+ --pf-global--primary-color--100: var(--pf-global--primary-color--light-100);
25134
+ --pf-global--link--Color: var(--pf-global--link--Color--light);
25135
+ --pf-global--link--Color--hover: var(--pf-global--link--Color--light);
25136
+ --pf-global--BackgroundColor--100: var(--pf-global--BackgroundColor--dark-100);
25182
25137
  }
25183
25138
 
25184
- .pf-c-droppable::after {
25185
- background-color: var(--pf-c-droppable--m-dragging--after--BackgroundColor);
25186
- border: var(--pf-c-droppable--m-dragging--after--BorderWidth) solid var(--pf-c-droppable--m-dragging--after--BorderColor);
25139
+ .pf-c-login__footer .pf-c-card, .pf-c-login__header .pf-c-card {
25140
+ --pf-c-card--BackgroundColor: var(--pf-global--BackgroundColor--dark-transparent-200);
25187
25141
  }
25188
25142
 
25189
- .pf-c-droppable.pf-m-drag-outside {
25190
- --pf-c-droppable--m-dragging--after--BorderColor: var(--pf-c-droppable--m-drag-outside--after--BorderColor);
25143
+ .pf-c-login__footer .pf-c-button, .pf-c-login__header .pf-c-button {
25144
+ --pf-c-button--m-primary--Color: var(--pf-global--primary-color--dark-100);
25145
+ --pf-c-button--m-primary--hover--Color: var(--pf-global--primary-color--dark-100);
25146
+ --pf-c-button--m-primary--focus--Color: var(--pf-global--primary-color--dark-100);
25147
+ --pf-c-button--m-primary--active--Color: var(--pf-global--primary-color--dark-100);
25148
+ --pf-c-button--m-primary--BackgroundColor: var(--pf-global--BackgroundColor--light-100);
25149
+ --pf-c-button--m-primary--hover--BackgroundColor: var(--pf-global--BackgroundColor--light-300);
25150
+ --pf-c-button--m-primary--focus--BackgroundColor: var(--pf-global--BackgroundColor--light-300);
25151
+ --pf-c-button--m-primary--active--BackgroundColor: var(--pf-global--BackgroundColor--light-300);
25152
+ --pf-c-button--m-secondary--Color: var(--pf-global--Color--light-100);
25153
+ --pf-c-button--m-secondary--hover--Color: var(--pf-global--Color--light-100);
25154
+ --pf-c-button--m-secondary--focus--Color: var(--pf-global--Color--light-100);
25155
+ --pf-c-button--m-secondary--active--Color: var(--pf-global--Color--light-100);
25156
+ --pf-c-button--m-secondary--BorderColor: var(--pf-global--Color--light-100);
25157
+ --pf-c-button--m-secondary--hover--BorderColor: var(--pf-global--Color--light-100);
25158
+ --pf-c-button--m-secondary--focus--BorderColor: var(--pf-global--Color--light-100);
25159
+ --pf-c-button--m-secondary--active--BorderColor: var(--pf-global--Color--light-100);
25191
25160
  }
25192
25161
 
25193
- .pf-c-text-input-group {
25194
- --pf-c-text-input-group--BackgroundColor: var(--pf-global--BackgroundColor--100);
25195
- --pf-c-text-input-group__text--before--BorderWidth: var(--pf-global--BorderWidth--sm);
25196
- --pf-c-text-input-group__text--before--BorderColor: var(--pf-global--BorderColor--300);
25197
- --pf-c-text-input-group__text--after--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
25198
- --pf-c-text-input-group__text--after--BorderBottomColor: var(--pf-global--BorderColor--200);
25199
- --pf-c-text-input-group--hover__text--after--BorderBottomColor: var(--pf-global--primary-color--100);
25200
- --pf-c-text-input-group__text--focus-within--after--BorderBottomWidth: var(--pf-global--BorderWidth--md);
25201
- --pf-c-text-input-group__text--focus-within--after--BorderBottomColor: var(--pf-global--primary-color--100);
25202
- --pf-c-text-input-group__main--first-child--not--text-input--MarginLeft: var(--pf-global--spacer--sm);
25203
- --pf-c-text-input-group__main--m-icon__text-input--PaddingLeft: var(--pf-global--spacer--xl);
25204
- --pf-c-text-input-group__text-input--PaddingTop: var(--pf-global--spacer--form-element);
25205
- --pf-c-text-input-group__text-input--PaddingRight: var(--pf-global--spacer--sm);
25206
- --pf-c-text-input-group__text-input--PaddingBottom: var(--pf-global--spacer--form-element);
25207
- --pf-c-text-input-group__text-input--PaddingLeft: var(--pf-global--spacer--sm);
25208
- --pf-c-text-input-group__text-input--MinWidth: 12ch;
25209
- --pf-c-text-input-group__text-input--m-hint--Color: var(--pf-global--Color--dark-200);
25210
- --pf-c-text-input-group__icon--Left: var(--pf-global--spacer--sm);
25211
- --pf-c-text-input-group__icon--Color: var(--pf-global--Color--200);
25212
- --pf-c-text-input-group__text--hover__icon--Color: var(--pf-global--Color--100);
25213
- --pf-c-text-input-group__icon--TranslateY: -50%;
25214
- --pf-c-text-input-group__utilities--MarginRight: var(--pf-global--spacer--sm);
25215
- --pf-c-text-input-group__utilities--MarginLeft: var(--pf-global--spacer--xs);
25216
- --pf-c-text-input-group__utilities--child--MarginLeft: var(--pf-global--spacer--xs);
25217
- --pf-c-text-input-group__utilities--c-button--PaddingRight: var(--pf-global--spacer--xs);
25218
- --pf-c-text-input-group__utilities--c-button--PaddingLeft: var(--pf-global--spacer--xs);
25219
- --pf-c-text-input-group--m-disabled--Color: var(--pf-global--disabled-color--100);
25220
- --pf-c-text-input-group--m-disabled--BackgroundColor: var(--pf-global--disabled-color--300);
25221
- position: relative;
25162
+ .pf-c-login {
25163
+ --pf-c-login--PaddingTop: var(--pf-global--spacer--lg);
25164
+ --pf-c-login--PaddingBottom: var(--pf-global--spacer--lg);
25165
+ --pf-c-login--xl--BackgroundImage: none;
25166
+ --pf-c-login__container--xl--GridColumnGap: var(--pf-global--spacer--3xl);
25167
+ --pf-c-login__container--MaxWidth: 31.25rem;
25168
+ --pf-c-login__container--xl--MaxWidth: none;
25169
+ --pf-c-login__container--PaddingLeft: 6.125rem;
25170
+ --pf-c-login__container--PaddingRight: 6.125rem;
25171
+ --pf-c-login__container--xl--GridTemplateColumns: 34rem minmax(auto, 34rem);
25172
+ --pf-c-login__header--MarginBottom: var(--pf-global--spacer--md);
25173
+ --pf-c-login__header--PaddingLeft: var(--pf-global--spacer--md);
25174
+ --pf-c-login__header--PaddingRight: var(--pf-global--spacer--md);
25175
+ --pf-c-login__header--xl--MarginBottom: var(--pf-global--spacer--2xl);
25176
+ --pf-c-login__header--xl--MarginTop: var(--pf-global--spacer--3xl);
25177
+ --pf-c-login__header--c-brand--MarginBottom: var(--pf-global--spacer--lg);
25178
+ --pf-c-login__header--c-brand--xl--MarginBottom: var(--pf-global--spacer--2xl);
25179
+ --pf-c-login__main--BackgroundColor: var(--pf-global--BackgroundColor--light-100);
25180
+ --pf-c-login__main--MarginBottom: var(--pf-global--spacer--lg);
25181
+ --pf-c-login__main-header--PaddingTop: var(--pf-global--spacer--2xl);
25182
+ --pf-c-login__main-header--PaddingRight: var(--pf-global--spacer--xl);
25183
+ --pf-c-login__main-header--PaddingBottom: var(--pf-global--spacer--md);
25184
+ --pf-c-login__main-header--PaddingLeft: var(--pf-global--spacer--xl);
25185
+ --pf-c-login__main-header--md--PaddingRight: var(--pf-global--spacer--2xl);
25186
+ --pf-c-login__main-header--md--PaddingLeft: var(--pf-global--spacer--2xl);
25187
+ --pf-c-login__main-header--ColumnGap: var(--pf-global--spacer--md);
25188
+ --pf-c-login__main-header--RowGap: var(--pf-global--spacer--md);
25189
+ --pf-c-login__main-header-desc--MarginBottom: var(--pf-global--spacer--sm);
25190
+ --pf-c-login__main-header-desc--md--MarginBottom: 0;
25191
+ --pf-c-login__main-header-desc--FontSize: var(--pf-global--FontSize--sm);
25192
+ --pf-c-login__main-body--PaddingRight: var(--pf-global--spacer--xl);
25193
+ --pf-c-login__main-body--PaddingBottom: var(--pf-global--spacer--xl);
25194
+ --pf-c-login__main-body--PaddingLeft: var(--pf-global--spacer--xl);
25195
+ --pf-c-login__main-body--md--PaddingRight: var(--pf-global--spacer--2xl);
25196
+ --pf-c-login__main-body--md--PaddingLeft: var(--pf-global--spacer--2xl);
25197
+ --pf-c-login__main-footer--PaddingBottom: var(--pf-global--spacer--3xl);
25198
+ --pf-c-login__main-footer--c-title--MarginBottom: var(--pf-global--spacer--md);
25199
+ --pf-c-login__main-footer-links--PaddingTop: var(--pf-global--spacer--sm);
25200
+ --pf-c-login__main-footer-links--PaddingRight: var(--pf-global--spacer--3xl);
25201
+ --pf-c-login__main-footer-links--PaddingBottom: var(--pf-global--spacer--xl);
25202
+ --pf-c-login__main-footer-links--PaddingLeft: var(--pf-global--spacer--3xl);
25203
+ --pf-c-login__main-footer-links-item--PaddingRight: var(--pf-global--spacer--md);
25204
+ --pf-c-login__main-footer-links-item--PaddingLeft: var(--pf-global--spacer--md);
25205
+ --pf-c-login__main-footer-links-item--MarginBottom: var(--pf-global--spacer--sm);
25206
+ --pf-c-login__main-footer-links-item-link-svg--Fill: var(--pf-global--icon--Color--light);
25207
+ --pf-c-login__main-footer-links-item-link-svg--Width: var(--pf-global--icon--FontSize--lg);
25208
+ --pf-c-login__main-footer-links-item-link-svg--Height: var(--pf-global--icon--FontSize--lg);
25209
+ --pf-c-login__main-footer-links-item-link-svg--hover--Fill: var(--pf-global--icon--Color--dark);
25210
+ --pf-c-login__main-footer-band--PaddingTop: var(--pf-global--spacer--lg);
25211
+ --pf-c-login__main-footer-band--PaddingRight: var(--pf-global--spacer--md);
25212
+ --pf-c-login__main-footer-band--PaddingBottom: var(--pf-global--spacer--lg);
25213
+ --pf-c-login__main-footer-band--PaddingLeft: var(--pf-global--spacer--md);
25214
+ --pf-c-login__main-footer-band--BackgroundColor: var(--pf-global--BackgroundColor--200);
25215
+ --pf-c-login__main-footer-band-item--PaddingTop: var(--pf-global--spacer--md);
25216
+ --pf-c-login__footer--PaddingLeft: var(--pf-global--spacer--md);
25217
+ --pf-c-login__footer--PaddingRight: var(--pf-global--spacer--md);
25218
+ --pf-c-login__footer--c-list--PaddingTop: var(--pf-global--spacer--md);
25219
+ --pf-c-login__footer--c-list--xl--PaddingTop: var(--pf-global--spacer--2xl);
25222
25220
  display: flex;
25223
- color: var(--pf-c-text-input-group--Color, inherit);
25224
- background-color: var(--pf-c-text-input-group--BackgroundColor);
25221
+ justify-content: center;
25222
+ min-height: 100vh;
25223
+ padding-top: var(--pf-c-login--PaddingTop);
25224
+ padding-bottom: var(--pf-c-login--PaddingBottom);
25225
25225
  }
25226
25226
 
25227
- .pf-c-text-input-group:hover {
25228
- --pf-c-text-input-group__text--after--BorderBottomColor: var(--pf-c-text-input-group--hover__text--after--BorderBottomColor);
25227
+ @media (min-width: 1200px) {
25228
+ .pf-c-login {
25229
+ --pf-c-login__container--MaxWidth: var(--pf-c-login__container--xl--MaxWidth);
25230
+ }
25229
25231
  }
25230
-
25231
- .pf-c-text-input-group.pf-m-disabled {
25232
- --pf-c-text-input-group__text--before--BorderWidth: 0;
25233
- --pf-c-text-input-group__text--after--BorderBottomWidth: 0;
25234
- --pf-c-text-input-group--Color: var(--pf-c-text-input-group--m-disabled--Color);
25235
- --pf-c-text-input-group__icon--Color: var(--pf-c-text-input-group--m-disabled--Color);
25236
- --pf-c-text-input-group--BackgroundColor: var(--pf-c-text-input-group--m-disabled--BackgroundColor);
25237
- pointer-events: none;
25232
+ @media (min-width: 576px) {
25233
+ .pf-c-login {
25234
+ --pf-c-login__header--PaddingRight: 0;
25235
+ --pf-c-login__header--PaddingLeft: 0;
25236
+ }
25237
+ }
25238
+ @media (min-width: 1200px) {
25239
+ .pf-c-login {
25240
+ --pf-c-login__header--MarginBottom: var(--pf-c-login__header--xl--MarginBottom);
25241
+ --pf-c-login__header--c-brand--MarginBottom: var(--pf-c-login__header--c-brand--xl--MarginBottom);
25242
+ }
25243
+ }
25244
+ @media (min-width: 1200px) {
25245
+ .pf-c-login {
25246
+ --pf-c-login__main--MarginBottom: 0;
25247
+ }
25248
+ }
25249
+ @media (min-width: 768px) {
25250
+ .pf-c-login {
25251
+ --pf-c-login__main-header--PaddingRight: var(--pf-c-login__main-header--md--PaddingRight);
25252
+ --pf-c-login__main-header--PaddingLeft: var(--pf-c-login__main-header--md--PaddingLeft);
25253
+ --pf-c-login__main-header-desc--MarginBottom: var(--pf-c-login__main-header-desc--md--MarginBottom);
25254
+ }
25255
+ }
25256
+ @media (min-width: 768px) {
25257
+ .pf-c-login {
25258
+ --pf-c-login__main-body--PaddingRight: var(--pf-c-login__main-body--md--PaddingRight);
25259
+ --pf-c-login__main-body--PaddingLeft: var(--pf-c-login__main-body--md--PaddingLeft);
25260
+ }
25261
+ }
25262
+ @media (min-width: 576px) {
25263
+ .pf-c-login {
25264
+ --pf-c-login__footer--PaddingRight: 0;
25265
+ --pf-c-login__footer--PaddingLeft: 0;
25266
+ }
25238
25267
  }
25239
-
25240
- .pf-c-text-input-group__main {
25241
- display: flex;
25242
- flex: 1;
25243
- gap: var(--pf-global--spacer--sm);
25244
- min-width: 0;
25268
+ @media (min-width: 1200px) {
25269
+ .pf-c-login {
25270
+ --pf-c-login__footer--c-list--PaddingTop: var(--pf-c-login__footer--c-list--xl--PaddingTop);
25271
+ }
25245
25272
  }
25246
-
25247
- .pf-c-text-input-group__main.pf-m-icon {
25248
- --pf-c-text-input-group__text-input--PaddingLeft: var(--pf-c-text-input-group__main--m-icon__text-input--PaddingLeft);
25273
+ @media (min-width: 1200px) {
25274
+ .pf-c-login {
25275
+ background-image: var(--pf-c-login--xl--BackgroundImage);
25276
+ }
25249
25277
  }
25250
-
25251
- .pf-c-text-input-group__main > :first-child:not(.pf-c-text-input-group__text) {
25252
- margin-left: var(--pf-c-text-input-group__main--first-child--not--text-input--MarginLeft);
25278
+ @media (min-width: 576px) {
25279
+ .pf-c-login {
25280
+ align-items: center;
25281
+ }
25253
25282
  }
25254
-
25255
- .pf-c-text-input-group__main .pf-c-chip-group {
25256
- overflow: auto;
25257
- -ms-overflow-style: none;
25258
- scrollbar-width: none;
25283
+ .pf-c-login__container {
25284
+ width: 100%;
25285
+ max-width: var(--pf-c-login__container--MaxWidth);
25259
25286
  }
25260
25287
 
25261
- .pf-c-text-input-group__main .pf-c-chip-group::-webkit-scrollbar {
25262
- display: none;
25288
+ @media (min-width: 1200px) {
25289
+ .pf-c-login__container {
25290
+ display: grid;
25291
+ justify-content: center;
25292
+ grid-column-gap: var(--pf-c-login__container--xl--GridColumnGap);
25293
+ grid-template-columns: var(--pf-c-login__container--xl--GridTemplateColumns);
25294
+ grid-template-areas: "main header" "main footer" "main .";
25295
+ padding-right: var(--pf-c-login__container--PaddingRight);
25296
+ padding-left: var(--pf-c-login__container--PaddingLeft);
25297
+ }
25263
25298
  }
25264
-
25265
- .pf-c-text-input-group__main .pf-c-chip-group,
25266
- .pf-c-text-input-group__main .pf-c-chip-group__list {
25267
- flex-wrap: nowrap;
25299
+ .pf-c-login__header {
25300
+ color: var(--pf-global--Color--100);
25301
+ grid-area: header;
25302
+ padding-right: var(--pf-c-login__header--PaddingRight);
25303
+ padding-left: var(--pf-c-login__header--PaddingLeft);
25268
25304
  }
25269
25305
 
25270
- .pf-c-text-input-group__text {
25271
- display: inline-grid;
25272
- grid-template-columns: 1fr;
25273
- grid-template-areas: "text-input";
25274
- flex: 1;
25306
+ @media (min-width: 1200px) {
25307
+ .pf-c-login__header {
25308
+ margin-top: var(--pf-c-login__header--xl--MarginTop);
25309
+ }
25275
25310
  }
25276
-
25277
- .pf-c-text-input-group__text::before, .pf-c-text-input-group__text::after {
25278
- position: absolute;
25279
- top: 0;
25280
- right: 0;
25281
- bottom: 0;
25282
- left: 0;
25283
- pointer-events: none;
25284
- content: "";
25311
+ .pf-c-login__header .pf-c-brand {
25312
+ margin-bottom: var(--pf-c-login__header--c-brand--MarginBottom);
25285
25313
  }
25286
25314
 
25287
- .pf-c-text-input-group__text::before {
25288
- border: var(--pf-c-text-input-group__text--before--BorderWidth) solid var(--pf-c-text-input-group__text--before--BorderColor);
25315
+ .pf-c-login__main {
25316
+ margin-bottom: var(--pf-c-login__main--MarginBottom);
25317
+ background-color: var(--pf-c-login__main--BackgroundColor);
25318
+ grid-area: main;
25289
25319
  }
25290
25320
 
25291
- .pf-c-text-input-group__text::after {
25292
- border-bottom: var(--pf-c-text-input-group__text--after--BorderBottomWidth) solid var(--pf-c-text-input-group__text--after--BorderBottomColor);
25321
+ .pf-c-login__main > :first-child:not(.pf-c-login__main-header) {
25322
+ padding-top: var(--pf-c-login__main-header--PaddingTop);
25293
25323
  }
25294
25324
 
25295
- .pf-c-text-input-group__text:hover, .pf-c-text-input-group__text:focus-within {
25296
- --pf-c-text-input-group__icon--Color: var(--pf-c-text-input-group__text--hover__icon--Color);
25325
+ .pf-c-login__main > :last-child:not(.pf-c-login__main-footer) {
25326
+ padding-bottom: var(--pf-c-login__main-footer--PaddingBottom);
25297
25327
  }
25298
25328
 
25299
- .pf-c-text-input-group__text:focus-within {
25300
- --pf-c-text-input-group__text--after--BorderBottomWidth: var(--pf-c-text-input-group__text--focus-within--after--BorderBottomWidth);
25301
- --pf-c-text-input-group__text--after--BorderBottomColor: var(--pf-c-text-input-group__text--focus-within--after--BorderBottomColor);
25329
+ .pf-c-login__main-header {
25330
+ display: grid;
25331
+ grid-template-columns: 100%;
25332
+ column-gap: var(--pf-c-login__main-header--ColumnGap);
25333
+ row-gap: var(--pf-c-login__main-header--RowGap);
25334
+ align-items: center;
25335
+ padding: var(--pf-c-login__main-header--PaddingTop) var(--pf-c-login__main-header--PaddingRight) var(--pf-c-login__main-header--PaddingBottom) var(--pf-c-login__main-header--PaddingLeft);
25302
25336
  }
25303
25337
 
25304
- .pf-c-text-input-group__icon {
25305
- position: absolute;
25306
- top: 50%;
25307
- left: var(--pf-c-text-input-group__icon--Left);
25308
- color: var(--pf-c-text-input-group__icon--Color);
25309
- transform: translateY(var(--pf-c-text-input-group__icon--TranslateY));
25338
+ @media (min-width: 768px) {
25339
+ .pf-c-login__main-header {
25340
+ grid-template-columns: 1fr auto;
25341
+ }
25310
25342
  }
25311
-
25312
- .pf-c-text-input-group__text-input {
25313
- overflow: hidden;
25314
- text-overflow: ellipsis;
25315
- white-space: nowrap;
25316
- position: relative;
25317
- width: 100%;
25318
- min-width: var(--pf-c-text-input-group__text-input--MinWidth);
25319
- padding: var(--pf-c-text-input-group__text-input--PaddingTop) var(--pf-c-text-input-group__text-input--PaddingRight) var(--pf-c-text-input-group__text-input--PaddingBottom) var(--pf-c-text-input-group__text-input--PaddingLeft);
25320
- border: 0;
25343
+ .pf-c-login__main-header .pf-c-dropdown {
25344
+ grid-column: auto;
25345
+ grid-row: auto;
25321
25346
  }
25322
25347
 
25323
- .pf-c-text-input-group__text-input, .pf-c-text-input-group__text-input.pf-m-hint {
25324
- grid-area: text-input;
25348
+ @media (min-width: 768px) {
25349
+ .pf-c-login__main-header .pf-c-dropdown {
25350
+ grid-column: 2/3;
25351
+ grid-row: 1;
25352
+ }
25353
+ }
25354
+ .pf-c-login__main-header-desc {
25355
+ margin-bottom: var(--pf-c-login__main-header-desc--MarginBottom);
25356
+ font-size: var(--pf-c-login__main-header-desc--FontSize);
25357
+ grid-column: 1/-1;
25325
25358
  }
25326
25359
 
25327
- .pf-c-text-input-group__text-input.pf-m-hint {
25328
- color: var(--pf-c-text-input-group__text-input--m-hint--Color);
25360
+ .pf-c-login__main-body {
25361
+ padding-right: var(--pf-c-login__main-body--PaddingRight);
25362
+ padding-bottom: var(--pf-c-login__main-body--PaddingBottom);
25363
+ padding-left: var(--pf-c-login__main-body--PaddingLeft);
25329
25364
  }
25330
25365
 
25331
- .pf-c-text-input-group__utilities {
25366
+ .pf-c-login__main-footer {
25332
25367
  display: flex;
25333
- align-items: center;
25334
- margin-right: var(--pf-c-text-input-group__utilities--MarginRight);
25335
- margin-left: var(--pf-c-text-input-group__utilities--MarginLeft);
25368
+ flex-wrap: wrap;
25336
25369
  }
25337
25370
 
25338
- .pf-c-text-input-group__utilities > * + * {
25339
- margin-left: var(--pf-c-text-input-group__utilities--child--MarginLeft);
25371
+ .pf-c-login__main-footer .pf-c-title {
25372
+ margin-bottom: var(--pf-c-login__main-footer--c-title--MarginBottom);
25373
+ text-align: center;
25340
25374
  }
25341
25375
 
25342
- .pf-c-text-input-group__utilities .pf-c-button {
25343
- --pf-c-button--PaddingRight: var(--pf-c-text-input-group__utilities--c-button--PaddingRight);
25344
- --pf-c-button--PaddingLeft: var(--pf-c-text-input-group__utilities--c-button--PaddingLeft);
25376
+ .pf-c-login__main-footer > * {
25377
+ flex-basis: 100%;
25345
25378
  }
25346
25379
 
25347
- .pf-c-panel {
25348
- --pf-c-panel--Width: auto;
25349
- --pf-c-panel--MinWidth: auto;
25350
- --pf-c-panel--MaxWidth: none;
25351
- --pf-c-panel--ZIndex: auto;
25352
- --pf-c-panel--BackgroundColor: var(--pf-global--BackgroundColor--100);
25353
- --pf-c-panel--BoxShadow: none;
25354
- --pf-c-panel--before--BorderWidth: 0;
25355
- --pf-c-panel--before--BorderColor: var(--pf-global--BorderColor--100);
25356
- --pf-c-panel--m-bordered--before--BorderWidth: var(--pf-global--BorderWidth--sm);
25357
- --pf-c-panel--m-raised--BoxShadow: var(--pf-global--BoxShadow--md);
25358
- --pf-c-panel--m-raised--ZIndex: var(--pf-global--ZIndex--sm);
25359
- --pf-c-panel__header--PaddingTop: var(--pf-global--spacer--md);
25360
- --pf-c-panel__header--PaddingRight: var(--pf-global--spacer--md);
25361
- --pf-c-panel__header--PaddingBottom: var(--pf-global--spacer--md);
25362
- --pf-c-panel__header--PaddingLeft: var(--pf-global--spacer--md);
25363
- --pf-c-panel__main--MaxHeight: none;
25364
- --pf-c-panel__main--Overflow: visible;
25365
- --pf-c-panel__main-body--PaddingTop: var(--pf-global--spacer--md);
25366
- --pf-c-panel__main-body--PaddingRight: var(--pf-global--spacer--md);
25367
- --pf-c-panel__main-body--PaddingBottom: var(--pf-global--spacer--md);
25368
- --pf-c-panel__main-body--PaddingLeft: var(--pf-global--spacer--md);
25369
- --pf-c-panel__footer--PaddingTop: var(--pf-global--spacer--md);
25370
- --pf-c-panel__footer--PaddingRight: var(--pf-global--spacer--md);
25371
- --pf-c-panel__footer--PaddingBottom: var(--pf-global--spacer--md);
25372
- --pf-c-panel__footer--PaddingLeft: var(--pf-global--spacer--md);
25373
- --pf-c-panel__footer--BoxShadow: none;
25374
- --pf-c-panel--m-scrollable__main--MaxHeight: 18.75rem;
25375
- --pf-c-panel--m-scrollable__main--Overflow: auto;
25376
- --pf-c-panel--m-scrollable__footer--BoxShadow: 0 -0.3125rem 0.25rem -0.25rem rgba(3, 3, 3, 0.16);
25377
- position: relative;
25378
- z-index: var(--pf-c-panel--ZIndex);
25379
- width: var(--pf-c-panel--Width);
25380
- min-width: var(--pf-c-panel--MinWidth);
25381
- max-width: var(--pf-c-panel--MaxWidth);
25382
- background-color: var(--pf-c-panel--BackgroundColor);
25383
- box-shadow: var(--pf-c-panel--BoxShadow);
25380
+ .pf-c-login__main-footer-links {
25381
+ display: flex;
25382
+ flex-wrap: wrap;
25383
+ justify-content: center;
25384
+ padding: var(--pf-c-login__main-footer-links--PaddingTop) var(--pf-c-login__main-footer-links--PaddingRight) var(--pf-c-login__main-footer-links--PaddingBottom) var(--pf-c-login__main-footer-links--PaddingLeft);
25384
25385
  }
25385
25386
 
25386
- .pf-c-panel::before {
25387
- position: absolute;
25388
- top: 0;
25389
- right: 0;
25390
- bottom: 0;
25391
- left: 0;
25392
- pointer-events: none;
25393
- content: "";
25394
- border: var(--pf-c-panel--before--BorderWidth) solid var(--pf-c-panel--before--BorderColor);
25387
+ .pf-c-login__main-footer-links-item {
25388
+ padding-right: var(--pf-c-login__main-footer-links-item--PaddingRight);
25389
+ padding-left: var(--pf-c-login__main-footer-links-item--PaddingLeft);
25390
+ margin-bottom: var(--pf-c-login__main-footer-links-item--MarginBottom);
25395
25391
  }
25396
25392
 
25397
- .pf-c-panel.pf-m-bordered {
25398
- --pf-c-panel--before--BorderWidth: var(--pf-c-panel--m-bordered--before--BorderWidth);
25393
+ .pf-c-login__main-footer-links-item-link svg {
25394
+ fill: var(--pf-c-login__main-footer-links-item-link-svg--Fill);
25395
+ width: 100%;
25396
+ max-width: var(--pf-c-login__main-footer-links-item-link-svg--Width);
25397
+ height: 100%;
25398
+ max-height: var(--pf-c-login__main-footer-links-item-link-svg--Height);
25399
25399
  }
25400
25400
 
25401
- .pf-c-panel.pf-m-raised {
25402
- --pf-c-panel--BoxShadow: var(--pf-c-panel--m-raised--BoxShadow);
25403
- --pf-c-panel--ZIndex: var(--pf-c-panel--m-raised--ZIndex);
25401
+ .pf-c-login__main-footer-links-item-link:hover svg {
25402
+ fill: var(--pf-c-login__main-footer-links-item-link-svg--hover--Fill);
25404
25403
  }
25405
25404
 
25406
- .pf-c-panel.pf-m-scrollable {
25407
- --pf-c-panel__main--MaxHeight: var(--pf-c-panel--m-scrollable__main--MaxHeight);
25408
- --pf-c-panel__main--Overflow: var(--pf-c-panel--m-scrollable__main--Overflow);
25409
- --pf-c-panel__footer--BoxShadow: var(--pf-c-panel--m-scrollable__footer--BoxShadow);
25405
+ .pf-c-login__main-footer-band {
25406
+ padding: var(--pf-c-login__main-footer-band--PaddingTop) var(--pf-c-login__main-footer-band--PaddingRight) var(--pf-c-login__main-footer-band--PaddingBottom) var(--pf-c-login__main-footer-band--PaddingLeft);
25407
+ text-align: center;
25408
+ background-color: var(--pf-c-login__main-footer-band--BackgroundColor);
25410
25409
  }
25411
25410
 
25412
- .pf-c-panel__header {
25413
- padding: var(--pf-c-panel__header--PaddingTop) var(--pf-c-panel__header--PaddingRight) var(--pf-c-panel__header--PaddingBottom) var(--pf-c-panel__header--PaddingLeft);
25411
+ .pf-c-login__main-footer-band > * + * {
25412
+ padding-top: var(--pf-c-login__main-footer-band-item--PaddingTop);
25414
25413
  }
25415
25414
 
25416
- .pf-c-panel__main {
25417
- max-height: var(--pf-c-panel__main--MaxHeight);
25418
- overflow: var(--pf-c-panel__main--Overflow);
25415
+ .pf-c-login__footer {
25416
+ color: var(--pf-global--Color--100);
25417
+ grid-area: footer;
25418
+ padding-right: var(--pf-c-login__footer--PaddingRight);
25419
+ padding-left: var(--pf-c-login__footer--PaddingLeft);
25419
25420
  }
25420
25421
 
25421
- .pf-c-panel__main-body {
25422
- padding: var(--pf-c-panel__main-body--PaddingTop) var(--pf-c-panel__main-body--PaddingRight) var(--pf-c-panel__main-body--PaddingBottom) var(--pf-c-panel__main-body--PaddingLeft);
25422
+ .pf-c-login__footer .pf-c-list a {
25423
+ color: unset;
25423
25424
  }
25424
25425
 
25425
- .pf-c-panel__footer {
25426
- padding: var(--pf-c-panel__footer--PaddingTop) var(--pf-c-panel__footer--PaddingRight) var(--pf-c-panel__footer--PaddingBottom) var(--pf-c-panel__footer--PaddingLeft);
25427
- box-shadow: var(--pf-c-panel__footer--BoxShadow);
25426
+ .pf-c-login__footer .pf-c-list:not(:only-child) {
25427
+ padding-top: var(--pf-c-login__footer--c-list--PaddingTop);
25428
25428
  }
25429
25429
 
25430
25430
  .pf-l-flex {