@patternfly/react-table 4.44.4 → 4.44.5

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 (4) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/dist/umd/react-table.css +881 -881
  3. package/dist/umd/react-table.min.css +1529 -1529
  4. package/package.json +6 -6
package/dist/umd/react-table.min.css CHANGED
@@ -14023,17 +14023,7 @@ ul.pf-c-list {
14023
14023
  --pf-c-list--m-bordered--li--BorderBottomWidth: 0;
14024
14024
  }
14025
14025
 
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 {
14026
+ .pf-c-login__footer, .pf-c-login__header {
14037
14027
  --pf-global--Color--100: var(--pf-global--Color--light-100);
14038
14028
  --pf-global--Color--200: var(--pf-global--Color--light-200);
14039
14029
  --pf-global--BorderColor--100: var(--pf-global--BorderColor--light-100);
@@ -14043,11 +14033,11 @@ ul.pf-c-list {
14043
14033
  --pf-global--BackgroundColor--100: var(--pf-global--BackgroundColor--dark-100);
14044
14034
  }
14045
14035
 
14046
- .pf-c-masthead .pf-c-card {
14036
+ .pf-c-login__footer .pf-c-card, .pf-c-login__header .pf-c-card {
14047
14037
  --pf-c-card--BackgroundColor: var(--pf-global--BackgroundColor--dark-transparent-200);
14048
14038
  }
14049
14039
 
14050
- .pf-c-masthead .pf-c-button {
14040
+ .pf-c-login__footer .pf-c-button, .pf-c-login__header .pf-c-button {
14051
14041
  --pf-c-button--m-primary--Color: var(--pf-global--primary-color--dark-100);
14052
14042
  --pf-c-button--m-primary--hover--Color: var(--pf-global--primary-color--dark-100);
14053
14043
  --pf-c-button--m-primary--focus--Color: var(--pf-global--primary-color--dark-100);
@@ -14066,438 +14056,434 @@ ul.pf-c-list {
14066
14056
  --pf-c-button--m-secondary--active--BorderColor: var(--pf-global--Color--light-100);
14067
14057
  }
14068
14058
 
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);
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);
14177
14122
  }
14178
14123
 
14179
- @media screen and (min-width: 1200px) {
14180
- .pf-c-masthead {
14181
- --pf-c-masthead--inset: var(--pf-c-masthead--xl--inset);
14124
+ @media (min-width: 1200px) {
14125
+ .pf-c-login {
14126
+ --pf-c-login__container--MaxWidth: var(--pf-c-login__container--xl--MaxWidth);
14182
14127
  }
14183
14128
  }
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);
14129
+ @media (min-width: 576px) {
14130
+ .pf-c-login {
14131
+ --pf-c-login__header--PaddingRight: 0;
14132
+ --pf-c-login__header--PaddingLeft: 0;
14203
14133
  }
14204
14134
  }
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);
14209
- }
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);
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);
14139
+ }
14215
14140
  }
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%;
14141
+ @media (min-width: 1200px) {
14142
+ .pf-c-login {
14143
+ --pf-c-login__main--MarginBottom: 0;
14144
+ }
14225
14145
  }
14226
-
14227
- .pf-c-masthead .pf-c-toolbar__content-section {
14228
- flex-wrap: nowrap;
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
+ }
14229
14152
  }
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);
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
+ }
14233
14158
  }
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);
14159
+ @media (min-width: 576px) {
14160
+ .pf-c-login {
14161
+ --pf-c-login__footer--PaddingRight: 0;
14162
+ --pf-c-login__footer--PaddingLeft: 0;
14163
+ }
14240
14164
  }
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);
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
+ }
14245
14169
  }
14246
-
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);
14170
+ @media (min-width: 1200px) {
14171
+ .pf-c-login {
14172
+ background-image: var(--pf-c-login--xl--BackgroundImage);
14173
+ }
14253
14174
  }
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);
14175
+ @media (min-width: 576px) {
14176
+ .pf-c-login {
14177
+ align-items: center;
14178
+ }
14179
+ }
14180
+ .pf-c-login__container {
14181
+ width: 100%;
14182
+ max-width: var(--pf-c-login__container--MaxWidth);
14258
14183
  }
14259
14184
 
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);
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
+ }
14195
+ }
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);
14265
14201
  }
14266
14202
 
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);
14203
+ @media (min-width: 1200px) {
14204
+ .pf-c-login__header {
14205
+ margin-top: var(--pf-c-login__header--xl--MarginTop);
14206
+ }
14207
+ }
14208
+ .pf-c-login__header .pf-c-brand {
14209
+ margin-bottom: var(--pf-c-login__header--c-brand--MarginBottom);
14270
14210
  }
14271
14211
 
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);
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;
14284
14216
  }
14285
14217
 
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);
14218
+ .pf-c-login__main > :first-child:not(.pf-c-login__main-header) {
14219
+ padding-top: var(--pf-c-login__main-header--PaddingTop);
14293
14220
  }
14294
14221
 
14295
- .pf-c-masthead__main:last-child {
14296
- --pf-c-masthead__main--MarginRight: 0;
14222
+ .pf-c-login__main > :last-child:not(.pf-c-login__main-footer) {
14223
+ padding-bottom: var(--pf-c-login__main-footer--PaddingBottom);
14297
14224
  }
14298
14225
 
14299
- .pf-c-masthead__content {
14300
- display: flex;
14301
- flex-grow: 1;
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);
14302
14231
  align-items: center;
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;
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);
14312
14233
  }
14313
14234
 
14314
- .pf-c-masthead__content:only-child {
14315
- --pf-c-masthead__content--MarginLeft: 0;
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;
14316
14243
  }
14317
14244
 
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);
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;
14321
14255
  }
14322
14256
 
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);
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);
14325
14261
  }
14326
14262
 
14327
- .pf-c-masthead__main,
14328
- .pf-c-masthead__brand,
14329
- .pf-c-masthead__content {
14330
- min-width: 0;
14263
+ .pf-c-login__main-footer {
14264
+ display: flex;
14265
+ flex-wrap: wrap;
14331
14266
  }
14332
14267
 
14333
- .pf-c-masthead__brand {
14334
- display: inline-flex;
14335
- align-self: center;
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;
14336
14271
  }
14337
14272
 
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);
14273
+ .pf-c-login__main-footer > * {
14274
+ flex-basis: 100%;
14343
14275
  }
14344
14276
 
14345
- .pf-c-masthead__toggle .pf-c-button {
14346
- --pf-c-button--FontSize: var(--pf-c-masthead__toggle--c-button--FontSize);
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);
14347
14282
  }
14348
14283
 
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);
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);
14367
14288
  }
14368
14289
 
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);
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);
14387
14296
  }
14388
14297
 
14389
- .pf-c-masthead.pf-m-inset-none {
14390
- --pf-c-masthead--inset: 0;
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);
14391
14300
  }
14392
14301
 
14393
- .pf-c-masthead.pf-m-inset-sm {
14394
- --pf-c-masthead--inset: var(--pf-global--spacer--sm);
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);
14395
14306
  }
14396
14307
 
14397
- .pf-c-masthead.pf-m-inset-md {
14398
- --pf-c-masthead--inset: var(--pf-global--spacer--md);
14308
+ .pf-c-login__main-footer-band > * + * {
14309
+ padding-top: var(--pf-c-login__main-footer-band-item--PaddingTop);
14399
14310
  }
14400
14311
 
14401
- .pf-c-masthead.pf-m-inset-lg {
14402
- --pf-c-masthead--inset: var(--pf-global--spacer--lg);
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);
14403
14317
  }
14404
14318
 
14405
- .pf-c-masthead.pf-m-inset-xl {
14406
- --pf-c-masthead--inset: var(--pf-global--spacer--xl);
14319
+ .pf-c-login__footer .pf-c-list a {
14320
+ color: unset;
14407
14321
  }
14408
14322
 
14409
- .pf-c-masthead.pf-m-inset-2xl {
14410
- --pf-c-masthead--inset: var(--pf-global--spacer--2xl);
14323
+ .pf-c-login__footer .pf-c-list:not(:only-child) {
14324
+ padding-top: var(--pf-c-login__footer--c-list--PaddingTop);
14411
14325
  }
14412
14326
 
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
- }
14433
-
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
- }
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);
14453
14335
  }
14454
- @media (min-width: 576px) {
14455
- .pf-c-masthead.pf-m-inset-none-on-sm {
14456
- --pf-c-masthead--inset: 0;
14457
- }
14458
14336
 
14459
- .pf-c-masthead.pf-m-inset-sm-on-sm {
14460
- --pf-c-masthead--inset: var(--pf-global--spacer--sm);
14461
- }
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);
14345
+ }
14462
14346
 
14463
- .pf-c-masthead.pf-m-inset-md-on-sm {
14464
- --pf-c-masthead--inset: var(--pf-global--spacer--md);
14465
- }
14347
+ .pf-c-masthead .pf-c-card {
14348
+ --pf-c-card--BackgroundColor: var(--pf-global--BackgroundColor--dark-transparent-200);
14349
+ }
14466
14350
 
14467
- .pf-c-masthead.pf-m-inset-lg-on-sm {
14468
- --pf-c-masthead--inset: var(--pf-global--spacer--lg);
14469
- }
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
+ }
14470
14369
 
14471
- .pf-c-masthead.pf-m-inset-xl-on-sm {
14472
- --pf-c-masthead--inset: var(--pf-global--spacer--xl);
14473
- }
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
+ }
14474
14479
 
14475
- .pf-c-masthead.pf-m-inset-2xl-on-sm {
14476
- --pf-c-masthead--inset: var(--pf-global--spacer--2xl);
14480
+ @media screen and (min-width: 1200px) {
14481
+ .pf-c-masthead {
14482
+ --pf-c-masthead--inset: var(--pf-c-masthead--xl--inset);
14477
14483
  }
14478
14484
  }
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 {
14485
+ @media screen and (min-width: 768px) {
14486
+ .pf-c-masthead {
14501
14487
  --pf-c-masthead--GridTemplateColumns: var(--pf-c-masthead--m-display-inline--GridTemplateColumns);
14502
14488
  --pf-c-masthead__main--GridColumn: var(--pf-c-masthead--m-display-inline__main--GridColumn);
14503
14489
  --pf-c-masthead__main--MinHeight: var(--pf-c-masthead--m-display-inline__main--MinHeight);
@@ -14517,33 +14503,216 @@ ul.pf-c-list {
14517
14503
  --pf-c-masthead__content--c-nav--m-horizontal--MarginLeft: var(--pf-c-masthead--m-display-inline__content--c-nav--m-horizontal--MarginLeft);
14518
14504
  }
14519
14505
  }
14520
- @media (min-width: 768px) {
14521
- .pf-c-masthead.pf-m-inset-none-on-md {
14522
- --pf-c-masthead--inset: 0;
14523
- }
14524
-
14525
- .pf-c-masthead.pf-m-inset-sm-on-md {
14526
- --pf-c-masthead--inset: var(--pf-global--spacer--sm);
14527
- }
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
+ }
14528
14511
 
14529
- .pf-c-masthead.pf-m-inset-md-on-md {
14530
- --pf-c-masthead--inset: var(--pf-global--spacer--md);
14531
- }
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
+ }
14532
14517
 
14533
- .pf-c-masthead.pf-m-inset-lg-on-md {
14534
- --pf-c-masthead--inset: var(--pf-global--spacer--lg);
14535
- }
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
+ }
14536
14527
 
14537
- .pf-c-masthead.pf-m-inset-xl-on-md {
14538
- --pf-c-masthead--inset: var(--pf-global--spacer--xl);
14539
- }
14528
+ .pf-c-masthead .pf-c-toolbar__content-section {
14529
+ flex-wrap: nowrap;
14530
+ }
14540
14531
 
14541
- .pf-c-masthead.pf-m-inset-2xl-on-md {
14542
- --pf-c-masthead--inset: var(--pf-global--spacer--2xl);
14543
- }
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);
14544
14534
  }
14545
- @media (min-width: 992px) {
14546
- .pf-c-masthead.pf-m-display-stack-on-lg {
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
+ }
14701
+
14702
+ .pf-c-masthead.pf-m-inset-lg {
14703
+ --pf-c-masthead--inset: var(--pf-global--spacer--lg);
14704
+ }
14705
+
14706
+ .pf-c-masthead.pf-m-inset-xl {
14707
+ --pf-c-masthead--inset: var(--pf-global--spacer--xl);
14708
+ }
14709
+
14710
+ .pf-c-masthead.pf-m-inset-2xl {
14711
+ --pf-c-masthead--inset: var(--pf-global--spacer--2xl);
14712
+ }
14713
+
14714
+ @media (min-width: 576px) {
14715
+ .pf-c-masthead.pf-m-display-stack-on-sm {
14547
14716
  --pf-c-masthead--GridTemplateColumns: var(--pf-c-masthead--m-display-stack--GridTemplateColumns);
14548
14717
  --pf-c-masthead__main--GridColumn: var(--pf-c-masthead--m-display-stack__main--GridColumn);
14549
14718
  --pf-c-masthead__main--MinHeight: var(--pf-c-masthead--m-display-stack__main--MinHeight);
@@ -14563,7 +14732,7 @@ ul.pf-c-list {
14563
14732
  --pf-c-masthead__content--c-nav--m-horizontal--MarginLeft: var(--pf-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginLeft);
14564
14733
  }
14565
14734
 
14566
- .pf-c-masthead.pf-m-display-inline-on-lg {
14735
+ .pf-c-masthead.pf-m-display-inline-on-sm {
14567
14736
  --pf-c-masthead--GridTemplateColumns: var(--pf-c-masthead--m-display-inline--GridTemplateColumns);
14568
14737
  --pf-c-masthead__main--GridColumn: var(--pf-c-masthead--m-display-inline__main--GridColumn);
14569
14738
  --pf-c-masthead__main--MinHeight: var(--pf-c-masthead--m-display-inline__main--MinHeight);
@@ -14583,33 +14752,33 @@ ul.pf-c-list {
14583
14752
  --pf-c-masthead__content--c-nav--m-horizontal--MarginLeft: var(--pf-c-masthead--m-display-inline__content--c-nav--m-horizontal--MarginLeft);
14584
14753
  }
14585
14754
  }
14586
- @media (min-width: 992px) {
14587
- .pf-c-masthead.pf-m-inset-none-on-lg {
14755
+ @media (min-width: 576px) {
14756
+ .pf-c-masthead.pf-m-inset-none-on-sm {
14588
14757
  --pf-c-masthead--inset: 0;
14589
14758
  }
14590
14759
 
14591
- .pf-c-masthead.pf-m-inset-sm-on-lg {
14760
+ .pf-c-masthead.pf-m-inset-sm-on-sm {
14592
14761
  --pf-c-masthead--inset: var(--pf-global--spacer--sm);
14593
14762
  }
14594
14763
 
14595
- .pf-c-masthead.pf-m-inset-md-on-lg {
14764
+ .pf-c-masthead.pf-m-inset-md-on-sm {
14596
14765
  --pf-c-masthead--inset: var(--pf-global--spacer--md);
14597
14766
  }
14598
14767
 
14599
- .pf-c-masthead.pf-m-inset-lg-on-lg {
14768
+ .pf-c-masthead.pf-m-inset-lg-on-sm {
14600
14769
  --pf-c-masthead--inset: var(--pf-global--spacer--lg);
14601
14770
  }
14602
14771
 
14603
- .pf-c-masthead.pf-m-inset-xl-on-lg {
14772
+ .pf-c-masthead.pf-m-inset-xl-on-sm {
14604
14773
  --pf-c-masthead--inset: var(--pf-global--spacer--xl);
14605
14774
  }
14606
14775
 
14607
- .pf-c-masthead.pf-m-inset-2xl-on-lg {
14776
+ .pf-c-masthead.pf-m-inset-2xl-on-sm {
14608
14777
  --pf-c-masthead--inset: var(--pf-global--spacer--2xl);
14609
14778
  }
14610
14779
  }
14611
- @media (min-width: 1200px) {
14612
- .pf-c-masthead.pf-m-display-stack-on-xl {
14780
+ @media (min-width: 768px) {
14781
+ .pf-c-masthead.pf-m-display-stack-on-md {
14613
14782
  --pf-c-masthead--GridTemplateColumns: var(--pf-c-masthead--m-display-stack--GridTemplateColumns);
14614
14783
  --pf-c-masthead__main--GridColumn: var(--pf-c-masthead--m-display-stack__main--GridColumn);
14615
14784
  --pf-c-masthead__main--MinHeight: var(--pf-c-masthead--m-display-stack__main--MinHeight);
@@ -14629,7 +14798,7 @@ ul.pf-c-list {
14629
14798
  --pf-c-masthead__content--c-nav--m-horizontal--MarginLeft: var(--pf-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginLeft);
14630
14799
  }
14631
14800
 
14632
- .pf-c-masthead.pf-m-display-inline-on-xl {
14801
+ .pf-c-masthead.pf-m-display-inline-on-md {
14633
14802
  --pf-c-masthead--GridTemplateColumns: var(--pf-c-masthead--m-display-inline--GridTemplateColumns);
14634
14803
  --pf-c-masthead__main--GridColumn: var(--pf-c-masthead--m-display-inline__main--GridColumn);
14635
14804
  --pf-c-masthead__main--MinHeight: var(--pf-c-masthead--m-display-inline__main--MinHeight);
@@ -14649,33 +14818,33 @@ ul.pf-c-list {
14649
14818
  --pf-c-masthead__content--c-nav--m-horizontal--MarginLeft: var(--pf-c-masthead--m-display-inline__content--c-nav--m-horizontal--MarginLeft);
14650
14819
  }
14651
14820
  }
14652
- @media (min-width: 1200px) {
14653
- .pf-c-masthead.pf-m-inset-none-on-xl {
14821
+ @media (min-width: 768px) {
14822
+ .pf-c-masthead.pf-m-inset-none-on-md {
14654
14823
  --pf-c-masthead--inset: 0;
14655
14824
  }
14656
14825
 
14657
- .pf-c-masthead.pf-m-inset-sm-on-xl {
14826
+ .pf-c-masthead.pf-m-inset-sm-on-md {
14658
14827
  --pf-c-masthead--inset: var(--pf-global--spacer--sm);
14659
14828
  }
14660
14829
 
14661
- .pf-c-masthead.pf-m-inset-md-on-xl {
14830
+ .pf-c-masthead.pf-m-inset-md-on-md {
14662
14831
  --pf-c-masthead--inset: var(--pf-global--spacer--md);
14663
14832
  }
14664
14833
 
14665
- .pf-c-masthead.pf-m-inset-lg-on-xl {
14834
+ .pf-c-masthead.pf-m-inset-lg-on-md {
14666
14835
  --pf-c-masthead--inset: var(--pf-global--spacer--lg);
14667
14836
  }
14668
14837
 
14669
- .pf-c-masthead.pf-m-inset-xl-on-xl {
14838
+ .pf-c-masthead.pf-m-inset-xl-on-md {
14670
14839
  --pf-c-masthead--inset: var(--pf-global--spacer--xl);
14671
14840
  }
14672
14841
 
14673
- .pf-c-masthead.pf-m-inset-2xl-on-xl {
14842
+ .pf-c-masthead.pf-m-inset-2xl-on-md {
14674
14843
  --pf-c-masthead--inset: var(--pf-global--spacer--2xl);
14675
14844
  }
14676
14845
  }
14677
- @media (min-width: 1450px) {
14678
- .pf-c-masthead.pf-m-display-stack-on-2xl {
14846
+ @media (min-width: 992px) {
14847
+ .pf-c-masthead.pf-m-display-stack-on-lg {
14679
14848
  --pf-c-masthead--GridTemplateColumns: var(--pf-c-masthead--m-display-stack--GridTemplateColumns);
14680
14849
  --pf-c-masthead__main--GridColumn: var(--pf-c-masthead--m-display-stack__main--GridColumn);
14681
14850
  --pf-c-masthead__main--MinHeight: var(--pf-c-masthead--m-display-stack__main--MinHeight);
@@ -14695,7 +14864,7 @@ ul.pf-c-list {
14695
14864
  --pf-c-masthead__content--c-nav--m-horizontal--MarginLeft: var(--pf-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginLeft);
14696
14865
  }
14697
14866
 
14698
- .pf-c-masthead.pf-m-display-inline-on-2xl {
14867
+ .pf-c-masthead.pf-m-display-inline-on-lg {
14699
14868
  --pf-c-masthead--GridTemplateColumns: var(--pf-c-masthead--m-display-inline--GridTemplateColumns);
14700
14869
  --pf-c-masthead__main--GridColumn: var(--pf-c-masthead--m-display-inline__main--GridColumn);
14701
14870
  --pf-c-masthead__main--MinHeight: var(--pf-c-masthead--m-display-inline__main--MinHeight);
@@ -14715,24 +14884,156 @@ ul.pf-c-list {
14715
14884
  --pf-c-masthead__content--c-nav--m-horizontal--MarginLeft: var(--pf-c-masthead--m-display-inline__content--c-nav--m-horizontal--MarginLeft);
14716
14885
  }
14717
14886
  }
14718
- @media (min-width: 1450px) {
14719
- .pf-c-masthead.pf-m-inset-none-on-2xl {
14887
+ @media (min-width: 992px) {
14888
+ .pf-c-masthead.pf-m-inset-none-on-lg {
14720
14889
  --pf-c-masthead--inset: 0;
14721
14890
  }
14722
14891
 
14723
- .pf-c-masthead.pf-m-inset-sm-on-2xl {
14892
+ .pf-c-masthead.pf-m-inset-sm-on-lg {
14724
14893
  --pf-c-masthead--inset: var(--pf-global--spacer--sm);
14725
14894
  }
14726
14895
 
14727
- .pf-c-masthead.pf-m-inset-md-on-2xl {
14896
+ .pf-c-masthead.pf-m-inset-md-on-lg {
14728
14897
  --pf-c-masthead--inset: var(--pf-global--spacer--md);
14729
14898
  }
14730
14899
 
14731
- .pf-c-masthead.pf-m-inset-lg-on-2xl {
14900
+ .pf-c-masthead.pf-m-inset-lg-on-lg {
14732
14901
  --pf-c-masthead--inset: var(--pf-global--spacer--lg);
14733
14902
  }
14734
14903
 
14735
- .pf-c-masthead.pf-m-inset-xl-on-2xl {
14904
+ .pf-c-masthead.pf-m-inset-xl-on-lg {
14905
+ --pf-c-masthead--inset: var(--pf-global--spacer--xl);
14906
+ }
14907
+
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 {
14736
15037
  --pf-c-masthead--inset: var(--pf-global--spacer--xl);
14737
15038
  }
14738
15039
 
@@ -19481,87 +19782,278 @@ label.pf-c-radio, .pf-c-radio__label,
19481
19782
  cursor: not-allowed;
19482
19783
  }
19483
19784
 
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);
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;
19492
19829
  }
19493
19830
 
19494
- .pf-c-select {
19495
- color: var(--pf-global--Color--100);
19496
- --pf-c-select__toggle--PaddingTop: var(--pf-global--spacer--form-element);
19497
- --pf-c-select__toggle--PaddingRight: var(--pf-global--spacer--sm);
19498
- --pf-c-select__toggle--PaddingBottom: var(--pf-global--spacer--form-element);
19499
- --pf-c-select__toggle--PaddingLeft: var(--pf-global--spacer--sm);
19500
- --pf-c-select__toggle--MinWidth: var(--pf-global--target-size--MinWidth);
19501
- --pf-c-select__toggle--FontSize: var(--pf-global--FontSize--md);
19502
- --pf-c-select__toggle--FontWeight: var(--pf-global--FontWeight--normal);
19503
- --pf-c-select__toggle--LineHeight: var(--pf-global--LineHeight--md);
19504
- --pf-c-select__toggle--BackgroundColor: var(--pf-global--BackgroundColor--100);
19505
- --pf-c-select__toggle--before--BorderTopWidth: var(--pf-global--BorderWidth--sm);
19506
- --pf-c-select__toggle--before--BorderRightWidth: var(--pf-global--BorderWidth--sm);
19507
- --pf-c-select__toggle--before--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
19508
- --pf-c-select__toggle--before--BorderLeftWidth: var(--pf-global--BorderWidth--sm);
19509
- --pf-c-select__toggle--before--BorderWidth: var(--pf-c-select__toggle--before--BorderTopWidth) var(--pf-c-select__toggle--before--BorderRightWidth) var(--pf-c-select__toggle--before--BorderBottomWidth) var(--pf-c-select__toggle--before--BorderLeftWidth);
19510
- --pf-c-select__toggle--before--BorderTopColor: var(--pf-global--BorderColor--300);
19511
- --pf-c-select__toggle--before--BorderRightColor: var(--pf-global--BorderColor--300);
19512
- --pf-c-select__toggle--before--BorderBottomColor: var(--pf-global--BorderColor--200);
19513
- --pf-c-select__toggle--before--BorderLeftColor: var(--pf-global--BorderColor--300);
19514
- --pf-c-select__toggle--Color: var(--pf-global--Color--100);
19515
- --pf-c-select__toggle--hover--before--BorderBottomColor: var(--pf-global--active-color--100);
19516
- --pf-c-select__toggle--focus--before--BorderBottomColor: var(--pf-global--active-color--100);
19517
- --pf-c-select__toggle--focus--before--BorderBottomWidth: var(--pf-global--BorderWidth--md);
19518
- --pf-c-select__toggle--active--before--BorderBottomColor: var(--pf-global--active-color--100);
19519
- --pf-c-select__toggle--active--before--BorderBottomWidth: var(--pf-global--BorderWidth--md);
19520
- --pf-c-select__toggle--m-expanded--before--BorderBottomColor: var(--pf-global--active-color--100);
19521
- --pf-c-select__toggle--m-expanded--before--BorderBottomWidth: var(--pf-global--BorderWidth--md);
19522
- --pf-c-select__toggle--disabled--BackgroundColor: var(--pf-global--disabled-color--300);
19523
- --pf-c-select__toggle--m-plain--before--BorderColor: transparent;
19524
- --pf-c-select__toggle--m-placeholder--Color: transparent;
19525
- --pf-c-select--m-invalid__toggle--before--BorderBottomColor: var(--pf-global--danger-color--100);
19526
- --pf-c-select--m-invalid__toggle--before--BorderBottomWidth: var(--pf-global--BorderWidth--md);
19527
- --pf-c-select--m-invalid__toggle--hover--before--BorderBottomColor: var(--pf-global--danger-color--100);
19528
- --pf-c-select--m-invalid__toggle--focus--before--BorderBottomColor: var(--pf-global--danger-color--100);
19529
- --pf-c-select--m-invalid__toggle--active--before--BorderBottomColor: var(--pf-global--danger-color--100);
19530
- --pf-c-select--m-invalid__toggle--m-expanded--before--BorderBottomColor: var(--pf-global--danger-color--100);
19531
- --pf-c-select--m-invalid__toggle-status-icon--Color: var(--pf-global--danger-color--100);
19532
- --pf-c-select--m-success__toggle--before--BorderBottomColor: var(--pf-global--success-color--100);
19533
- --pf-c-select--m-success__toggle--before--BorderBottomWidth: var(--pf-global--BorderWidth--md);
19534
- --pf-c-select--m-success__toggle--hover--before--BorderBottomColor: var(--pf-global--success-color--100);
19535
- --pf-c-select--m-success__toggle--focus--before--BorderBottomColor: var(--pf-global--success-color--100);
19536
- --pf-c-select--m-success__toggle--active--before--BorderBottomColor: var(--pf-global--success-color--100);
19537
- --pf-c-select--m-success__toggle--m-expanded--before--BorderBottomColor: var(--pf-global--success-color--100);
19538
- --pf-c-select--m-success__toggle-status-icon--Color: var(--pf-global--success-color--100);
19539
- --pf-c-select--m-warning__toggle--before--BorderBottomColor: var(--pf-global--warning-color--100);
19540
- --pf-c-select--m-warning__toggle--before--BorderBottomWidth: var(--pf-global--BorderWidth--md);
19541
- --pf-c-select--m-warning__toggle--hover--before--BorderBottomColor: var(--pf-global--warning-color--100);
19542
- --pf-c-select--m-warning__toggle--focus--before--BorderBottomColor: var(--pf-global--warning-color--100);
19543
- --pf-c-select--m-warning__toggle--active--before--BorderBottomColor: var(--pf-global--warning-color--100);
19544
- --pf-c-select--m-warning__toggle--m-expanded--before--BorderBottomColor: var(--pf-global--warning-color--100);
19545
- --pf-c-select--m-warning__toggle-status-icon--Color: var(--pf-global--warning-color--100);
19546
- --pf-c-select__toggle-wrapper--not-last-child--MarginRight: var(--pf-global--spacer--xs);
19547
- --pf-c-select__toggle-wrapper--MaxWidth: calc(100% - var(--pf-global--spacer--lg));
19548
- --pf-c-select__toggle-wrapper--c-chip-group--MarginTop: 0.3125rem;
19549
- --pf-c-select__toggle-wrapper--c-chip-group--MarginBottom: 0.3125rem;
19550
- --pf-c-select__toggle-typeahead--FlexBasis: 10em;
19551
- --pf-c-select__toggle-typeahead--BackgroundColor: transparent;
19552
- --pf-c-select__toggle-typeahead--BorderTop: var(--pf-global--BorderWidth--sm) solid transparent;
19553
- --pf-c-select__toggle-typeahead--BorderRight: none;
19554
- --pf-c-select__toggle-typeahead--BorderLeft: none;
19555
- --pf-c-select__toggle-typeahead--MinWidth: 7.5rem;
19556
- --pf-c-select__toggle-typeahead--focus--PaddingBottom: calc(var(--pf-global--spacer--form-element) - var(--pf-global--BorderWidth--md));
19557
- --pf-c-select__toggle--m-placeholder__toggle-text--Color: var(--pf-global--Color--dark-200);
19558
- --pf-c-select__toggle-icon--toggle-text--MarginLeft: var(--pf-global--spacer--xs);
19559
- --pf-c-select__toggle-badge--PaddingLeft: var(--pf-global--spacer--sm);
19560
- --pf-c-select__toggle-status-icon--MarginLeft: var(--pf-global--spacer--xs);
19561
- --pf-c-select__toggle-status-icon--Color: var(--pf-global--Color--100);
19562
- --pf-c-select__toggle-arrow--MarginLeft: var(--pf-global--spacer--md);
19563
- --pf-c-select__toggle-arrow--MarginRight: var(--pf-global--spacer--sm);
19564
- --pf-c-select__toggle-arrow--with-clear--MarginLeft: var(--pf-global--spacer--sm);
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);
19984
+ }
19985
+
19986
+ .pf-c-select {
19987
+ color: var(--pf-global--Color--100);
19988
+ --pf-c-select__toggle--PaddingTop: var(--pf-global--spacer--form-element);
19989
+ --pf-c-select__toggle--PaddingRight: var(--pf-global--spacer--sm);
19990
+ --pf-c-select__toggle--PaddingBottom: var(--pf-global--spacer--form-element);
19991
+ --pf-c-select__toggle--PaddingLeft: var(--pf-global--spacer--sm);
19992
+ --pf-c-select__toggle--MinWidth: var(--pf-global--target-size--MinWidth);
19993
+ --pf-c-select__toggle--FontSize: var(--pf-global--FontSize--md);
19994
+ --pf-c-select__toggle--FontWeight: var(--pf-global--FontWeight--normal);
19995
+ --pf-c-select__toggle--LineHeight: var(--pf-global--LineHeight--md);
19996
+ --pf-c-select__toggle--BackgroundColor: var(--pf-global--BackgroundColor--100);
19997
+ --pf-c-select__toggle--before--BorderTopWidth: var(--pf-global--BorderWidth--sm);
19998
+ --pf-c-select__toggle--before--BorderRightWidth: var(--pf-global--BorderWidth--sm);
19999
+ --pf-c-select__toggle--before--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
20000
+ --pf-c-select__toggle--before--BorderLeftWidth: var(--pf-global--BorderWidth--sm);
20001
+ --pf-c-select__toggle--before--BorderWidth: var(--pf-c-select__toggle--before--BorderTopWidth) var(--pf-c-select__toggle--before--BorderRightWidth) var(--pf-c-select__toggle--before--BorderBottomWidth) var(--pf-c-select__toggle--before--BorderLeftWidth);
20002
+ --pf-c-select__toggle--before--BorderTopColor: var(--pf-global--BorderColor--300);
20003
+ --pf-c-select__toggle--before--BorderRightColor: var(--pf-global--BorderColor--300);
20004
+ --pf-c-select__toggle--before--BorderBottomColor: var(--pf-global--BorderColor--200);
20005
+ --pf-c-select__toggle--before--BorderLeftColor: var(--pf-global--BorderColor--300);
20006
+ --pf-c-select__toggle--Color: var(--pf-global--Color--100);
20007
+ --pf-c-select__toggle--hover--before--BorderBottomColor: var(--pf-global--active-color--100);
20008
+ --pf-c-select__toggle--focus--before--BorderBottomColor: var(--pf-global--active-color--100);
20009
+ --pf-c-select__toggle--focus--before--BorderBottomWidth: var(--pf-global--BorderWidth--md);
20010
+ --pf-c-select__toggle--active--before--BorderBottomColor: var(--pf-global--active-color--100);
20011
+ --pf-c-select__toggle--active--before--BorderBottomWidth: var(--pf-global--BorderWidth--md);
20012
+ --pf-c-select__toggle--m-expanded--before--BorderBottomColor: var(--pf-global--active-color--100);
20013
+ --pf-c-select__toggle--m-expanded--before--BorderBottomWidth: var(--pf-global--BorderWidth--md);
20014
+ --pf-c-select__toggle--disabled--BackgroundColor: var(--pf-global--disabled-color--300);
20015
+ --pf-c-select__toggle--m-plain--before--BorderColor: transparent;
20016
+ --pf-c-select__toggle--m-placeholder--Color: transparent;
20017
+ --pf-c-select--m-invalid__toggle--before--BorderBottomColor: var(--pf-global--danger-color--100);
20018
+ --pf-c-select--m-invalid__toggle--before--BorderBottomWidth: var(--pf-global--BorderWidth--md);
20019
+ --pf-c-select--m-invalid__toggle--hover--before--BorderBottomColor: var(--pf-global--danger-color--100);
20020
+ --pf-c-select--m-invalid__toggle--focus--before--BorderBottomColor: var(--pf-global--danger-color--100);
20021
+ --pf-c-select--m-invalid__toggle--active--before--BorderBottomColor: var(--pf-global--danger-color--100);
20022
+ --pf-c-select--m-invalid__toggle--m-expanded--before--BorderBottomColor: var(--pf-global--danger-color--100);
20023
+ --pf-c-select--m-invalid__toggle-status-icon--Color: var(--pf-global--danger-color--100);
20024
+ --pf-c-select--m-success__toggle--before--BorderBottomColor: var(--pf-global--success-color--100);
20025
+ --pf-c-select--m-success__toggle--before--BorderBottomWidth: var(--pf-global--BorderWidth--md);
20026
+ --pf-c-select--m-success__toggle--hover--before--BorderBottomColor: var(--pf-global--success-color--100);
20027
+ --pf-c-select--m-success__toggle--focus--before--BorderBottomColor: var(--pf-global--success-color--100);
20028
+ --pf-c-select--m-success__toggle--active--before--BorderBottomColor: var(--pf-global--success-color--100);
20029
+ --pf-c-select--m-success__toggle--m-expanded--before--BorderBottomColor: var(--pf-global--success-color--100);
20030
+ --pf-c-select--m-success__toggle-status-icon--Color: var(--pf-global--success-color--100);
20031
+ --pf-c-select--m-warning__toggle--before--BorderBottomColor: var(--pf-global--warning-color--100);
20032
+ --pf-c-select--m-warning__toggle--before--BorderBottomWidth: var(--pf-global--BorderWidth--md);
20033
+ --pf-c-select--m-warning__toggle--hover--before--BorderBottomColor: var(--pf-global--warning-color--100);
20034
+ --pf-c-select--m-warning__toggle--focus--before--BorderBottomColor: var(--pf-global--warning-color--100);
20035
+ --pf-c-select--m-warning__toggle--active--before--BorderBottomColor: var(--pf-global--warning-color--100);
20036
+ --pf-c-select--m-warning__toggle--m-expanded--before--BorderBottomColor: var(--pf-global--warning-color--100);
20037
+ --pf-c-select--m-warning__toggle-status-icon--Color: var(--pf-global--warning-color--100);
20038
+ --pf-c-select__toggle-wrapper--not-last-child--MarginRight: var(--pf-global--spacer--xs);
20039
+ --pf-c-select__toggle-wrapper--MaxWidth: calc(100% - var(--pf-global--spacer--lg));
20040
+ --pf-c-select__toggle-wrapper--c-chip-group--MarginTop: 0.3125rem;
20041
+ --pf-c-select__toggle-wrapper--c-chip-group--MarginBottom: 0.3125rem;
20042
+ --pf-c-select__toggle-typeahead--FlexBasis: 10em;
20043
+ --pf-c-select__toggle-typeahead--BackgroundColor: transparent;
20044
+ --pf-c-select__toggle-typeahead--BorderTop: var(--pf-global--BorderWidth--sm) solid transparent;
20045
+ --pf-c-select__toggle-typeahead--BorderRight: none;
20046
+ --pf-c-select__toggle-typeahead--BorderLeft: none;
20047
+ --pf-c-select__toggle-typeahead--MinWidth: 7.5rem;
20048
+ --pf-c-select__toggle-typeahead--focus--PaddingBottom: calc(var(--pf-global--spacer--form-element) - var(--pf-global--BorderWidth--md));
20049
+ --pf-c-select__toggle--m-placeholder__toggle-text--Color: var(--pf-global--Color--dark-200);
20050
+ --pf-c-select__toggle-icon--toggle-text--MarginLeft: var(--pf-global--spacer--xs);
20051
+ --pf-c-select__toggle-badge--PaddingLeft: var(--pf-global--spacer--sm);
20052
+ --pf-c-select__toggle-status-icon--MarginLeft: var(--pf-global--spacer--xs);
20053
+ --pf-c-select__toggle-status-icon--Color: var(--pf-global--Color--100);
20054
+ --pf-c-select__toggle-arrow--MarginLeft: var(--pf-global--spacer--md);
20055
+ --pf-c-select__toggle-arrow--MarginRight: var(--pf-global--spacer--sm);
20056
+ --pf-c-select__toggle-arrow--with-clear--MarginLeft: var(--pf-global--spacer--sm);
19565
20057
  --pf-c-select__toggle-arrow--m-top--m-expanded__toggle-arrow--Rotate: 180deg;
19566
20058
  --pf-c-select__toggle-clear--PaddingRight: var(--pf-global--spacer--sm);
19567
20059
  --pf-c-select__toggle-clear--PaddingLeft: var(--pf-global--spacer--md);
@@ -23593,36 +24085,68 @@ label.pf-c-radio, .pf-c-radio__label,
23593
24085
  --pf-c-toolbar--spacer: 0;
23594
24086
  }
23595
24087
 
23596
- .pf-c-tree-view {
23597
- --pf-c-tree-view--PaddingTop: var(--pf-global--spacer--sm);
23598
- --pf-c-tree-view--PaddingBottom: var(--pf-global--spacer--sm);
23599
- --pf-c-tree-view__node--indent--base: calc(var(--pf-global--spacer--md) * 2 + var(--pf-c-tree-view__node-toggle-icon--MinWidth));
23600
- --pf-c-tree-view__node--nested-indent--base: calc(var(--pf-c-tree-view__node--indent--base) - var(--pf-global--spacer--md));
23601
- --pf-c-tree-view__node--PaddingTop--base: var(--pf-global--spacer--sm);
23602
- --pf-c-tree-view__node--PaddingTop: var(--pf-c-tree-view__node--PaddingTop--base);
23603
- --pf-c-tree-view__node--PaddingRight: var(--pf-global--spacer--sm);
23604
- --pf-c-tree-view__node--PaddingBottom: var(--pf-global--spacer--sm);
23605
- --pf-c-tree-view__node--PaddingLeft: var(--pf-c-tree-view__node--indent--base);
23606
- --pf-c-tree-view__node--Color: var(--pf-global--Color--100);
23607
- --pf-c-tree-view__node--m-current--Color: var(--pf-global--link--Color);
23608
- --pf-c-tree-view__node--m-current--FontWeight: var(--pf-global--FontWeight--bold);
23609
- --pf-c-tree-view__node-container--Display: contents;
23610
- --pf-c-tree-view__node-content--RowGap: var(--pf-global--spacer--sm);
23611
- --pf-c-tree-view__node-content--Overflow: visible;
23612
- --pf-c-tree-view__node--hover--BackgroundColor: var(--pf-global--BackgroundColor--200);
23613
- --pf-c-tree-view__node--focus--BackgroundColor: var(--pf-global--palette--black-200);
23614
- --pf-c-tree-view__list-item__list-item__node-toggle--Top: var(--pf-c-tree-view__node--PaddingTop--base);
23615
- --pf-c-tree-view__list-item__list-item__node-toggle--Left: var(--pf-c-tree-view__node--PaddingLeft);
23616
- --pf-c-tree-view__list-item__list-item__node-toggle--TranslateX: -100%;
23617
- --pf-c-tree-view__node-toggle--Position: absolute;
23618
- --pf-c-tree-view__node-toggle-icon--MinWidth: var(--pf-global--FontSize--md);
23619
- --pf-c-tree-view__node-toggle-icon--Transition: var(--pf-global--Transition);
23620
- --pf-c-tree-view__node-toggle-button--PaddingTop: var(--pf-global--spacer--form-element);
23621
- --pf-c-tree-view__node-toggle-button--PaddingRight: var(--pf-global--spacer--md);
23622
- --pf-c-tree-view__node-toggle-button--PaddingBottom: var(--pf-global--spacer--form-element);
23623
- --pf-c-tree-view__node-toggle-button--PaddingLeft: var(--pf-global--spacer--md);
23624
- --pf-c-tree-view__node-toggle-button--MarginTop: calc(var(--pf-global--spacer--form-element) * -1);
23625
- --pf-c-tree-view__node-toggle-button--MarginBottom: calc(var(--pf-global--spacer--form-element) * -1);
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
+ .pf-c-tree-view {
24121
+ --pf-c-tree-view--PaddingTop: var(--pf-global--spacer--sm);
24122
+ --pf-c-tree-view--PaddingBottom: var(--pf-global--spacer--sm);
24123
+ --pf-c-tree-view__node--indent--base: calc(var(--pf-global--spacer--md) * 2 + var(--pf-c-tree-view__node-toggle-icon--MinWidth));
24124
+ --pf-c-tree-view__node--nested-indent--base: calc(var(--pf-c-tree-view__node--indent--base) - var(--pf-global--spacer--md));
24125
+ --pf-c-tree-view__node--PaddingTop--base: var(--pf-global--spacer--sm);
24126
+ --pf-c-tree-view__node--PaddingTop: var(--pf-c-tree-view__node--PaddingTop--base);
24127
+ --pf-c-tree-view__node--PaddingRight: var(--pf-global--spacer--sm);
24128
+ --pf-c-tree-view__node--PaddingBottom: var(--pf-global--spacer--sm);
24129
+ --pf-c-tree-view__node--PaddingLeft: var(--pf-c-tree-view__node--indent--base);
24130
+ --pf-c-tree-view__node--Color: var(--pf-global--Color--100);
24131
+ --pf-c-tree-view__node--m-current--Color: var(--pf-global--link--Color);
24132
+ --pf-c-tree-view__node--m-current--FontWeight: var(--pf-global--FontWeight--bold);
24133
+ --pf-c-tree-view__node-container--Display: contents;
24134
+ --pf-c-tree-view__node-content--RowGap: var(--pf-global--spacer--sm);
24135
+ --pf-c-tree-view__node-content--Overflow: visible;
24136
+ --pf-c-tree-view__node--hover--BackgroundColor: var(--pf-global--BackgroundColor--200);
24137
+ --pf-c-tree-view__node--focus--BackgroundColor: var(--pf-global--palette--black-200);
24138
+ --pf-c-tree-view__list-item__list-item__node-toggle--Top: var(--pf-c-tree-view__node--PaddingTop--base);
24139
+ --pf-c-tree-view__list-item__list-item__node-toggle--Left: var(--pf-c-tree-view__node--PaddingLeft);
24140
+ --pf-c-tree-view__list-item__list-item__node-toggle--TranslateX: -100%;
24141
+ --pf-c-tree-view__node-toggle--Position: absolute;
24142
+ --pf-c-tree-view__node-toggle-icon--MinWidth: var(--pf-global--FontSize--md);
24143
+ --pf-c-tree-view__node-toggle-icon--Transition: var(--pf-global--Transition);
24144
+ --pf-c-tree-view__node-toggle-button--PaddingTop: var(--pf-global--spacer--form-element);
24145
+ --pf-c-tree-view__node-toggle-button--PaddingRight: var(--pf-global--spacer--md);
24146
+ --pf-c-tree-view__node-toggle-button--PaddingBottom: var(--pf-global--spacer--form-element);
24147
+ --pf-c-tree-view__node-toggle-button--PaddingLeft: var(--pf-global--spacer--md);
24148
+ --pf-c-tree-view__node-toggle-button--MarginTop: calc(var(--pf-global--spacer--form-element) * -1);
24149
+ --pf-c-tree-view__node-toggle-button--MarginBottom: calc(var(--pf-global--spacer--form-element) * -1);
23626
24150
  --pf-c-tree-view__node-check--MarginRight: var(--pf-global--spacer--sm);
23627
24151
  --pf-c-tree-view__node-count--MarginLeft: var(--pf-global--spacer--sm);
23628
24152
  --pf-c-tree-view__node-count--c-badge--m-read--BackgroundColor: var(--pf-global--disabled-color--200);
@@ -24062,38 +24586,6 @@ label.pf-c-radio, .pf-c-radio__label,
24062
24586
  --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));
24063
24587
  }
24064
24588
 
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
-
24097
24589
  .pf-c-wizard__header {
24098
24590
  --pf-global--Color--100: var(--pf-global--Color--light-100);
24099
24591
  --pf-global--Color--200: var(--pf-global--Color--light-200);
@@ -24288,1143 +24780,651 @@ label.pf-c-radio, .pf-c-radio__label,
24288
24780
  @media screen and (min-width: 1200px) {
24289
24781
  .pf-c-wizard {
24290
24782
  --pf-c-wizard__main-body--PaddingTop: var(--pf-c-wizard__main-body--xl--PaddingTop);
24291
- --pf-c-wizard__main-body--PaddingRight: var(--pf-c-wizard__main-body--xl--PaddingRight);
24292
- --pf-c-wizard__main-body--PaddingBottom: var(--pf-c-wizard__main-body--xl--PaddingBottom);
24293
- --pf-c-wizard__main-body--PaddingLeft: var(--pf-c-wizard__main-body--xl--PaddingLeft);
24294
- }
24295
- }
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);
24783
+ --pf-c-wizard__main-body--PaddingRight: var(--pf-c-wizard__main-body--xl--PaddingRight);
24784
+ --pf-c-wizard__main-body--PaddingBottom: var(--pf-c-wizard__main-body--xl--PaddingBottom);
24785
+ --pf-c-wizard__main-body--PaddingLeft: var(--pf-c-wizard__main-body--xl--PaddingLeft);
24786
+ }
24695
24787
  }
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);
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
+ }
24699
24795
  }
24700
-
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);
24796
+ .pf-c-modal-box .pf-c-wizard {
24797
+ flex: 1 1 var(--pf-c-modal-box--c-wizard--FlexBasis);
24798
+ min-height: 0;
24733
24799
  }
24734
24800
 
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);
24801
+ .pf-c-wizard > *:not(.pf-c-wizard__outer-wrap) {
24802
+ flex-shrink: 0;
24737
24803
  }
24738
24804
 
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;
24805
+ .pf-c-wizard.pf-m-finished {
24806
+ --pf-c-wizard__outer-wrap--lg--PaddingLeft: 0;
24746
24807
  }
24747
24808
 
24748
- .pf-c-text-input-group__main {
24749
- display: flex;
24750
- flex: 1;
24751
- gap: var(--pf-global--spacer--sm);
24752
- min-width: 0;
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;
24753
24814
  }
24754
24815
 
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);
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);
24757
24822
  }
24758
24823
 
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);
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);
24761
24829
  }
24762
24830
 
24763
- .pf-c-text-input-group__main .pf-c-chip-group {
24764
- overflow: auto;
24765
- -ms-overflow-style: none;
24766
- scrollbar-width: none;
24831
+ .pf-c-wizard__title {
24832
+ padding-right: var(--pf-c-wizard__title--PaddingRight);
24833
+ word-wrap: break-word;
24767
24834
  }
24768
24835
 
24769
- .pf-c-text-input-group__main .pf-c-chip-group::-webkit-scrollbar {
24836
+ .pf-c-wizard__description {
24770
24837
  display: none;
24838
+ padding-top: var(--pf-c-wizard__description--PaddingTop);
24839
+ color: var(--pf-c-wizard__description--Color);
24840
+ visibility: hidden;
24771
24841
  }
24772
24842
 
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;
24843
+ @media screen and (min-width: 992px) {
24844
+ .pf-c-wizard__description {
24845
+ display: block;
24846
+ visibility: visible;
24847
+ }
24776
24848
  }
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;
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);
24783
24859
  }
24784
24860
 
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: "";
24861
+ @media screen and (min-width: 992px) {
24862
+ .pf-c-wizard__toggle {
24863
+ display: none;
24864
+ visibility: hidden;
24865
+ }
24793
24866
  }
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);
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);
24797
24870
  }
24798
24871
 
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);
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));
24801
24874
  }
24802
24875
 
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);
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;
24805
24884
  }
24806
24885
 
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);
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;
24810
24890
  }
24811
24891
 
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));
24892
+ .pf-c-wizard__toggle-list-item:not(:last-child) {
24893
+ margin-right: var(--pf-c-wizard__toggle-list-item--not-last-child--MarginRight);
24818
24894
  }
24819
24895
 
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;
24896
+ .pf-c-wizard__toggle-num {
24897
+ --pf-c-wizard__nav-link--before--Top: var(--pf-c-wizard__toggle-num--before--Top);
24829
24898
  }
24830
24899
 
24831
- .pf-c-text-input-group__text-input, .pf-c-text-input-group__text-input.pf-m-hint {
24832
- grid-area: text-input;
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);
24833
24903
  }
24834
24904
 
24835
- .pf-c-text-input-group__text-input.pf-m-hint {
24836
- color: var(--pf-c-text-input-group__text-input--m-hint--Color);
24905
+ .pf-c-wizard__toggle-icon {
24906
+ line-height: var(--pf-c-wizard__toggle-icon--LineHeight);
24837
24907
  }
24838
24908
 
24839
- .pf-c-text-input-group__utilities {
24909
+ .pf-c-wizard__outer-wrap {
24910
+ position: relative;
24840
24911
  display: flex;
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);
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);
24844
24916
  }
24845
24917
 
24846
- .pf-c-text-input-group__utilities > * + * {
24847
- margin-left: var(--pf-c-text-input-group__utilities--child--MarginLeft);
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
+ }
24848
24922
  }
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);
24923
+ .pf-c-wizard__inner-wrap {
24924
+ position: relative;
24925
+ display: flex;
24926
+ flex-direction: column;
24927
+ flex-grow: 1;
24928
+ min-height: 0;
24853
24929
  }
24854
24930
 
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);
24885
- position: relative;
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);
24931
+ @media screen and (min-width: 992px) {
24932
+ .pf-c-wizard__inner-wrap {
24933
+ position: static;
24934
+ }
24892
24935
  }
24893
-
24894
- .pf-c-panel::before {
24936
+ .pf-c-wizard__nav {
24895
24937
  position: absolute;
24896
24938
  top: 0;
24897
- right: 0;
24898
- bottom: 0;
24899
24939
  left: 0;
24900
- pointer-events: none;
24901
- content: "";
24902
- border: var(--pf-c-panel--before--BorderWidth) solid var(--pf-c-panel--before--BorderColor);
24903
- }
24904
-
24905
- .pf-c-panel.pf-m-bordered {
24906
- --pf-c-panel--before--BorderWidth: var(--pf-c-panel--m-bordered--before--BorderWidth);
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);
24907
24949
  }
24908
24950
 
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);
24951
+ .pf-c-wizard__nav.pf-m-expanded {
24952
+ display: block;
24953
+ visibility: visible;
24912
24954
  }
24913
24955
 
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);
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
+ }
24918
24963
  }
24919
-
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);
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;
24922
24971
  }
24923
24972
 
24924
- .pf-c-panel__main {
24925
- max-height: var(--pf-c-panel__main--MaxHeight);
24926
- overflow: var(--pf-c-panel__main--Overflow);
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);
24927
24977
  }
24928
24978
 
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);
24979
+ .pf-c-wizard__nav-list .pf-c-wizard__nav-list .pf-c-wizard__nav-link::before {
24980
+ content: none;
24931
24981
  }
24932
24982
 
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);
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);
24936
24985
  }
24937
24986
 
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;
24987
+ .pf-c-wizard__nav-item + .pf-c-wizard__nav-item {
24988
+ margin-top: var(--pf-c-wizard__nav-item--MarginTop);
24982
24989
  }
24983
24990
 
24984
- .pf-c-search-input__bar {
24985
- position: relative;
24991
+ .pf-c-wizard__nav-item.pf-m-expandable > .pf-c-wizard__nav-link {
24986
24992
  display: flex;
24987
- width: 100%;
24988
- }
24989
-
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);
24992
- }
24993
-
24994
- .pf-c-search-input__text {
24995
- display: grid;
24996
- grid-template-columns: 1fr;
24997
- grid-template-areas: "text-input";
24998
- flex: 1;
24999
24993
  }
25000
24994
 
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: "";
24995
+ .pf-c-wizard__nav-item.pf-m-expandable > .pf-c-wizard__nav-list {
24996
+ display: none;
24997
+ visibility: hidden;
25009
24998
  }
25010
24999
 
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);
25000
+ .pf-c-wizard__nav-item.pf-m-expanded > .pf-c-wizard__nav-list {
25001
+ display: block;
25002
+ visibility: visible;
25013
25003
  }
25014
25004
 
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);
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);
25017
25007
  }
25018
25008
 
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);
25009
+ .pf-c-wizard__nav-link {
25010
+ position: relative;
25011
+ display: inline-block;
25012
+ 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;
25021
25018
  }
25022
25019
 
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);
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));
25026
25035
  }
25027
25036
 
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));
25037
+ .pf-c-wizard__nav-link::before {
25038
+ top: 0;
25039
+ content: counter(wizard-nav-count);
25040
+ counter-increment: wizard-nav-count;
25034
25041
  }
25035
25042
 
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;
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);
25045
25046
  }
25046
25047
 
25047
- .pf-c-search-input__text-input, .pf-c-search-input__text-input.pf-m-hint {
25048
- grid-area: text-input;
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);
25049
25051
  }
25050
25052
 
25051
- .pf-c-search-input__text-input.pf-m-hint {
25052
- color: var(--pf-c-search-input__text-input--m-hint--Color);
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);
25053
25056
  }
25054
25057
 
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);
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);
25059
25061
  }
25060
25062
 
25061
- .pf-c-search-input__utilities > * + * {
25062
- margin-left: var(--pf-c-search-input__utilities--child--MarginLeft);
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;
25063
25066
  }
25064
25067
 
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);
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);
25068
25071
  }
25069
25072
 
25070
- .pf-c-search-input__nav {
25071
- display: flex;
25073
+ .pf-c-wizard__nav-link-text {
25074
+ flex-grow: 1;
25072
25075
  }
25073
25076
 
25074
- .pf-c-search-input__count {
25075
- display: flex;
25076
- align-items: center;
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);
25077
25081
  }
25078
25082
 
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);
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));
25087
25087
  }
25088
25088
 
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));
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;
25092
25095
  }
25093
25096
 
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);
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);
25096
25099
  }
25097
25100
 
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);
25101
+ .pf-c-wizard__main-body.pf-m-no-padding {
25102
+ padding: 0;
25101
25103
  }
25102
25104
 
25103
- .pf-c-search-input__menu-item {
25105
+ .pf-c-wizard__footer {
25106
+ z-index: var(--pf-c-wizard__footer--ZIndex);
25104
25107
  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;
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);
25115
25112
  }
25116
25113
 
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);
25114
+ .pf-c-wizard__footer > * {
25115
+ margin-bottom: var(--pf-c-wizard__footer--child--MarginBottom);
25119
25116
  }
25120
25117
 
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);
25118
+ .pf-c-wizard__footer > *:not(:last-child) {
25119
+ margin-right: var(--pf-c-wizard__footer--child--MarginRight);
25123
25120
  }
25124
25121
 
25125
- .pf-c-search-input__menu-item-text {
25126
- flex-grow: 1;
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);
25127
25124
  }
25128
25125
 
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);
25126
+ .pf-c-wizard__footer-cancel {
25127
+ margin-left: var(--pf-c-wizard__footer-cancel--MarginLeft);
25137
25128
  }
25138
25129
 
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);
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);
25141
25139
  }
25142
25140
 
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);
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);
25160
25146
  }
25161
25147
 
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);
25220
- display: flex;
25221
- justify-content: center;
25222
- min-height: 100vh;
25223
- padding-top: var(--pf-c-login--PaddingTop);
25224
- padding-bottom: var(--pf-c-login--PaddingBottom);
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);
25225
25156
  }
25226
25157
 
25227
- @media (min-width: 1200px) {
25228
- .pf-c-login {
25229
- --pf-c-login__container--MaxWidth: var(--pf-c-login__container--xl--MaxWidth);
25230
- }
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);
25231
25161
  }
25232
- @media (min-width: 576px) {
25233
- .pf-c-login {
25234
- --pf-c-login__header--PaddingRight: 0;
25235
- --pf-c-login__header--PaddingLeft: 0;
25236
- }
25162
+
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);
25237
25168
  }
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
- }
25169
+
25170
+ .pf-c-droppable.pf-m-dragging {
25171
+ position: relative;
25243
25172
  }
25244
- @media (min-width: 1200px) {
25245
- .pf-c-login {
25246
- --pf-c-login__main--MarginBottom: 0;
25247
- }
25173
+
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: "";
25248
25182
  }
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
- }
25183
+
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);
25255
25187
  }
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
- }
25188
+
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);
25261
25191
  }
25262
- @media (min-width: 576px) {
25263
- .pf-c-login {
25264
- --pf-c-login__footer--PaddingRight: 0;
25265
- --pf-c-login__footer--PaddingLeft: 0;
25266
- }
25192
+
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;
25222
+ display: flex;
25223
+ color: var(--pf-c-text-input-group--Color, inherit);
25224
+ background-color: var(--pf-c-text-input-group--BackgroundColor);
25267
25225
  }
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
- }
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);
25272
25229
  }
25273
- @media (min-width: 1200px) {
25274
- .pf-c-login {
25275
- background-image: var(--pf-c-login--xl--BackgroundImage);
25276
- }
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;
25277
25238
  }
25278
- @media (min-width: 576px) {
25279
- .pf-c-login {
25280
- align-items: center;
25281
- }
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;
25282
25245
  }
25283
- .pf-c-login__container {
25284
- width: 100%;
25285
- max-width: var(--pf-c-login__container--MaxWidth);
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);
25286
25249
  }
25287
25250
 
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
- }
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);
25298
25253
  }
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);
25254
+
25255
+ .pf-c-text-input-group__main .pf-c-chip-group {
25256
+ overflow: auto;
25257
+ -ms-overflow-style: none;
25258
+ scrollbar-width: none;
25304
25259
  }
25305
25260
 
25306
- @media (min-width: 1200px) {
25307
- .pf-c-login__header {
25308
- margin-top: var(--pf-c-login__header--xl--MarginTop);
25309
- }
25261
+ .pf-c-text-input-group__main .pf-c-chip-group::-webkit-scrollbar {
25262
+ display: none;
25310
25263
  }
25311
- .pf-c-login__header .pf-c-brand {
25312
- margin-bottom: var(--pf-c-login__header--c-brand--MarginBottom);
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;
25313
25268
  }
25314
25269
 
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;
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;
25319
25275
  }
25320
25276
 
25321
- .pf-c-login__main > :first-child:not(.pf-c-login__main-header) {
25322
- padding-top: var(--pf-c-login__main-header--PaddingTop);
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: "";
25323
25285
  }
25324
25286
 
25325
- .pf-c-login__main > :last-child:not(.pf-c-login__main-footer) {
25326
- padding-bottom: var(--pf-c-login__main-footer--PaddingBottom);
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);
25327
25289
  }
25328
25290
 
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);
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);
25336
25293
  }
25337
25294
 
25338
- @media (min-width: 768px) {
25339
- .pf-c-login__main-header {
25340
- grid-template-columns: 1fr auto;
25341
- }
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);
25342
25297
  }
25343
- .pf-c-login__main-header .pf-c-dropdown {
25344
- grid-column: auto;
25345
- grid-row: auto;
25298
+
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);
25346
25302
  }
25347
25303
 
25348
- @media (min-width: 768px) {
25349
- .pf-c-login__main-header .pf-c-dropdown {
25350
- grid-column: 2/3;
25351
- grid-row: 1;
25352
- }
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));
25353
25310
  }
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;
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;
25358
25321
  }
25359
25322
 
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);
25323
+ .pf-c-text-input-group__text-input, .pf-c-text-input-group__text-input.pf-m-hint {
25324
+ grid-area: text-input;
25364
25325
  }
25365
25326
 
25366
- .pf-c-login__main-footer {
25327
+ .pf-c-text-input-group__text-input.pf-m-hint {
25328
+ color: var(--pf-c-text-input-group__text-input--m-hint--Color);
25329
+ }
25330
+
25331
+ .pf-c-text-input-group__utilities {
25367
25332
  display: flex;
25368
- flex-wrap: wrap;
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);
25369
25336
  }
25370
25337
 
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;
25338
+ .pf-c-text-input-group__utilities > * + * {
25339
+ margin-left: var(--pf-c-text-input-group__utilities--child--MarginLeft);
25374
25340
  }
25375
25341
 
25376
- .pf-c-login__main-footer > * {
25377
- flex-basis: 100%;
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);
25378
25345
  }
25379
25346
 
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);
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);
25385
25384
  }
25386
25385
 
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);
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);
25391
25395
  }
25392
25396
 
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);
25397
+ .pf-c-panel.pf-m-bordered {
25398
+ --pf-c-panel--before--BorderWidth: var(--pf-c-panel--m-bordered--before--BorderWidth);
25399
25399
  }
25400
25400
 
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);
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);
25403
25404
  }
25404
25405
 
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);
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);
25409
25410
  }
25410
25411
 
25411
- .pf-c-login__main-footer-band > * + * {
25412
- padding-top: var(--pf-c-login__main-footer-band-item--PaddingTop);
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);
25413
25414
  }
25414
25415
 
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);
25416
+ .pf-c-panel__main {
25417
+ max-height: var(--pf-c-panel__main--MaxHeight);
25418
+ overflow: var(--pf-c-panel__main--Overflow);
25420
25419
  }
25421
25420
 
25422
- .pf-c-login__footer .pf-c-list a {
25423
- color: unset;
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);
25424
25423
  }
25425
25424
 
25426
- .pf-c-login__footer .pf-c-list:not(:only-child) {
25427
- padding-top: var(--pf-c-login__footer--c-list--PaddingTop);
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);
25428
25428
  }
25429
25429
 
25430
25430
  .pf-l-flex {