@patternfly/react-core 4.247.1 → 4.249.0

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 (63) hide show
  1. package/CHANGELOG.md +22 -0
  2. package/dist/esm/components/Icon/Icon.d.ts +25 -0
  3. package/dist/esm/components/Icon/Icon.d.ts.map +1 -0
  4. package/dist/esm/components/Icon/Icon.js +14 -0
  5. package/dist/esm/components/Icon/Icon.js.map +1 -0
  6. package/dist/esm/components/Icon/index.d.ts +2 -0
  7. package/dist/esm/components/Icon/index.d.ts.map +1 -0
  8. package/dist/esm/components/Icon/index.js +2 -0
  9. package/dist/esm/components/Icon/index.js.map +1 -0
  10. package/dist/esm/components/Menu/Menu.d.ts.map +1 -1
  11. package/dist/esm/components/Menu/Menu.js +10 -3
  12. package/dist/esm/components/Menu/Menu.js.map +1 -1
  13. package/dist/esm/components/MenuToggle/MenuToggle.d.ts.map +1 -1
  14. package/dist/esm/components/MenuToggle/MenuToggle.js +1 -1
  15. package/dist/esm/components/MenuToggle/MenuToggle.js.map +1 -1
  16. package/dist/esm/components/index.d.ts +1 -0
  17. package/dist/esm/components/index.d.ts.map +1 -1
  18. package/dist/esm/components/index.js +1 -0
  19. package/dist/esm/components/index.js.map +1 -1
  20. package/dist/js/components/Icon/Icon.d.ts +25 -0
  21. package/dist/js/components/Icon/Icon.d.ts.map +1 -0
  22. package/dist/js/components/Icon/Icon.js +18 -0
  23. package/dist/js/components/Icon/Icon.js.map +1 -0
  24. package/dist/js/components/Icon/index.d.ts +2 -0
  25. package/dist/js/components/Icon/index.d.ts.map +1 -0
  26. package/dist/js/components/Icon/index.js +5 -0
  27. package/dist/js/components/Icon/index.js.map +1 -0
  28. package/dist/js/components/Menu/Menu.d.ts.map +1 -1
  29. package/dist/js/components/Menu/Menu.js +10 -3
  30. package/dist/js/components/Menu/Menu.js.map +1 -1
  31. package/dist/js/components/MenuToggle/MenuToggle.d.ts.map +1 -1
  32. package/dist/js/components/MenuToggle/MenuToggle.js +1 -1
  33. package/dist/js/components/MenuToggle/MenuToggle.js.map +1 -1
  34. package/dist/js/components/index.d.ts +1 -0
  35. package/dist/js/components/index.d.ts.map +1 -1
  36. package/dist/js/components/index.js +1 -0
  37. package/dist/js/components/index.js.map +1 -1
  38. package/dist/umd/react-core.min.css +925 -788
  39. package/dist/umd/react-core.min.js +1 -1
  40. package/package.json +2 -2
  41. package/src/components/Icon/Icon.tsx +66 -0
  42. package/src/components/Icon/__tests__/Icon.test.tsx +196 -0
  43. package/src/components/Icon/__tests__/__snapshots__/Icon.test.tsx.snap +82 -0
  44. package/src/components/Icon/examples/Icon.md +61 -0
  45. package/src/components/Icon/examples/IconBasic.tsx +23 -0
  46. package/src/components/Icon/examples/IconContentSizes.tsx +20 -0
  47. package/src/components/Icon/examples/IconCustomProgress.tsx +24 -0
  48. package/src/components/Icon/examples/IconInline.tsx +62 -0
  49. package/src/components/Icon/examples/IconProgress.tsx +24 -0
  50. package/src/components/Icon/examples/IconSizes.tsx +20 -0
  51. package/src/components/Icon/examples/IconStatus.tsx +27 -0
  52. package/src/components/Icon/index.ts +1 -0
  53. package/src/components/Menu/Menu.tsx +13 -7
  54. package/src/components/MenuToggle/MenuToggle.tsx +1 -0
  55. package/src/components/index.ts +1 -0
  56. package/src/demos/Filters/FilterDemos.md +27 -5
  57. package/src/demos/Filters/examples/FilterAttributeSearch.tsx +701 -0
  58. package/src/demos/Filters/examples/FilterCheckboxSelect.tsx +66 -53
  59. package/src/demos/Filters/examples/FilterFaceted.tsx +512 -0
  60. package/src/demos/Filters/examples/FilterMixedSelectGroup.tsx +569 -0
  61. package/src/demos/Filters/examples/FilterSameSelectGroup.tsx +542 -0
  62. package/src/demos/Filters/examples/FilterSearchInput.tsx +91 -68
  63. package/src/demos/Filters/examples/FilterSingleSelect.tsx +63 -52
@@ -9425,6 +9425,143 @@ label.pf-c-check, .pf-c-check__label,
9425
9425
  --pf-c-hint--BorderColor: var(--pf-global--BorderColor--300);
9426
9426
  }
9427
9427
 
9428
+ .pf-c-icon {
9429
+ --pf-c-icon--Width: var(--pf-global--icon--FontSize--md);
9430
+ --pf-c-icon--Height: var(--pf-global--icon--FontSize--md);
9431
+ --pf-c-icon--m-inline--Width: 1em;
9432
+ --pf-c-icon--m-inline--Height: 1em;
9433
+ --pf-c-icon--m-sm--Width: var(--pf-global--icon--FontSize--sm);
9434
+ --pf-c-icon--m-md--Width: var(--pf-global--icon--FontSize--md);
9435
+ --pf-c-icon--m-lg--Width: var(--pf-global--icon--FontSize--lg);
9436
+ --pf-c-icon--m-xl--Width: var(--pf-global--icon--FontSize--xl);
9437
+ --pf-c-icon--m-sm--Height: var(--pf-global--icon--FontSize--sm);
9438
+ --pf-c-icon--m-md--Height: var(--pf-global--icon--FontSize--md);
9439
+ --pf-c-icon--m-lg--Height: var(--pf-global--icon--FontSize--lg);
9440
+ --pf-c-icon--m-xl--Height: var(--pf-global--icon--FontSize--xl);
9441
+ --pf-c-icon__content--Color: var(--pf-global--icon--Color--dark);
9442
+ --pf-c-icon__content--m-danger--Color: var(--pf-global--danger-color--100);
9443
+ --pf-c-icon__content--m-warning--Color: var(--pf-global--warning-color--100);
9444
+ --pf-c-icon__content--m-success--Color: var(--pf-global--success-color--100);
9445
+ --pf-c-icon__content--m-info--Color: var(--pf-global--info-color--100);
9446
+ --pf-c-icon__content--m-default--Color: var(--pf-global--default-color--100);
9447
+ --pf-c-icon__content--FontSize: var(--pf-global--icon--FontSize--md);
9448
+ --pf-c-icon--m-inline__content--FontSize: 1em;
9449
+ --pf-c-icon__content--svg--VerticalAlign: -.125em;
9450
+ --pf-c-icon--m-sm--content--FontSize: var(--pf-global--icon--FontSize--sm);
9451
+ --pf-c-icon--m-md--content--FontSize: var(--pf-global--icon--FontSize--md);
9452
+ --pf-c-icon--m-lg--content--FontSize: var(--pf-global--icon--FontSize--lg);
9453
+ --pf-c-icon--m-xl--content--FontSize: var(--pf-global--icon--FontSize--xl);
9454
+ position: relative;
9455
+ display: inline-flex;
9456
+ align-items: center;
9457
+ justify-content: center;
9458
+ width: var(--pf-c-icon--Width);
9459
+ height: var(--pf-c-icon--Height);
9460
+ }
9461
+
9462
+ .pf-c-icon.pf-m-inline {
9463
+ --pf-c-icon--Width: var(--pf-c-icon--m-inline--Width);
9464
+ --pf-c-icon--Height: var(--pf-c-icon--m-inline--Height);
9465
+ --pf-c-icon__content--FontSize: var(--pf-c-icon--m-inline__content--FontSize);
9466
+ --pf-c-icon__content--Color: currentcolor;
9467
+ line-height: 1;
9468
+ }
9469
+
9470
+ .pf-c-icon.pf-m-inline .pf-c-spinner {
9471
+ --pf-c-spinner--diameter: 1em;
9472
+ }
9473
+
9474
+ .pf-c-icon.pf-m-sm {
9475
+ --pf-c-icon--Width: var(--pf-c-icon--m-sm--Width);
9476
+ --pf-c-icon--Height: var(--pf-c-icon--m-sm--Height);
9477
+ --pf-c-icon__content--FontSize: var(--pf-c-icon--m-sm--content--FontSize);
9478
+ }
9479
+
9480
+ .pf-c-icon.pf-m-md {
9481
+ --pf-c-icon--Width: var(--pf-c-icon--m-md--Width);
9482
+ --pf-c-icon--Height: var(--pf-c-icon--m-md--Height);
9483
+ --pf-c-icon__content--FontSize: var(--pf-c-icon--m-md--content--FontSize);
9484
+ }
9485
+
9486
+ .pf-c-icon.pf-m-lg {
9487
+ --pf-c-icon--Width: var(--pf-c-icon--m-lg--Width);
9488
+ --pf-c-icon--Height: var(--pf-c-icon--m-lg--Height);
9489
+ --pf-c-icon__content--FontSize: var(--pf-c-icon--m-lg--content--FontSize);
9490
+ }
9491
+
9492
+ .pf-c-icon.pf-m-xl {
9493
+ --pf-c-icon--Width: var(--pf-c-icon--m-xl--Width);
9494
+ --pf-c-icon--Height: var(--pf-c-icon--m-xl--Height);
9495
+ --pf-c-icon__content--FontSize: var(--pf-c-icon--m-xl--content--FontSize);
9496
+ }
9497
+
9498
+ .pf-c-icon.pf-m-in-progress {
9499
+ --pf-c-icon__content--Opacity: 0;
9500
+ --pf-c-icon__progress--Opacity: 1;
9501
+ }
9502
+
9503
+ .pf-c-icon__content,
9504
+ .pf-c-icon__progress {
9505
+ font-size: var(--pf-c-icon__content--FontSize);
9506
+ }
9507
+
9508
+ .pf-c-icon__content svg,
9509
+ .pf-c-icon__progress svg {
9510
+ vertical-align: var(--pf-c-icon__content--svg--VerticalAlign);
9511
+ }
9512
+
9513
+ .pf-c-icon__content.pf-m-sm,
9514
+ .pf-c-icon__progress.pf-m-sm {
9515
+ --pf-c-icon__content--FontSize: var(--pf-c-icon--m-sm--content--FontSize);
9516
+ }
9517
+
9518
+ .pf-c-icon__content.pf-m-md,
9519
+ .pf-c-icon__progress.pf-m-md {
9520
+ --pf-c-icon__content--FontSize: var(--pf-c-icon--m-md--content--FontSize);
9521
+ }
9522
+
9523
+ .pf-c-icon__content.pf-m-lg,
9524
+ .pf-c-icon__progress.pf-m-lg {
9525
+ --pf-c-icon__content--FontSize: var(--pf-c-icon--m-lg--content--FontSize);
9526
+ }
9527
+
9528
+ .pf-c-icon__content.pf-m-xl,
9529
+ .pf-c-icon__progress.pf-m-xl {
9530
+ --pf-c-icon__content--FontSize: var(--pf-c-icon--m-xl--content--FontSize);
9531
+ }
9532
+
9533
+ .pf-c-icon__content {
9534
+ color: var(--pf-c-icon__content--Color);
9535
+ opacity: var(--pf-c-icon__content--Opacity, 1);
9536
+ }
9537
+
9538
+ .pf-c-icon__content.pf-m-danger {
9539
+ --pf-c-icon__content--Color: var(--pf-c-icon__content--m-danger--Color);
9540
+ }
9541
+
9542
+ .pf-c-icon__content.pf-m-warning {
9543
+ --pf-c-icon__content--Color: var(--pf-c-icon__content--m-warning--Color);
9544
+ }
9545
+
9546
+ .pf-c-icon__content.pf-m-success {
9547
+ --pf-c-icon__content--Color: var(--pf-c-icon__content--m-success--Color);
9548
+ }
9549
+
9550
+ .pf-c-icon__content.pf-m-info {
9551
+ --pf-c-icon__content--Color: var(--pf-c-icon__content--m-info--Color);
9552
+ }
9553
+
9554
+ .pf-c-icon__content.pf-m-default {
9555
+ --pf-c-icon__content--Color: var(--pf-c-icon__content--m-default--Color);
9556
+ }
9557
+
9558
+ .pf-c-icon__progress {
9559
+ position: absolute;
9560
+ top: calc(50% + 0.5 * var(--pf-c-icon__content--svg--VerticalAlign));
9561
+ opacity: var(--pf-c-icon__progress--Opacity, 0);
9562
+ transform: translateY(calc(-50% - 0.5 * var(--pf-c-icon__content--svg--VerticalAlign)));
9563
+ }
9564
+
9428
9565
  .pf-c-input-group {
9429
9566
  --pf-global--Color--100: var(--pf-global--Color--dark-100);
9430
9567
  --pf-global--Color--200: var(--pf-global--Color--dark-200);
@@ -10868,7 +11005,17 @@ ul.pf-c-list {
10868
11005
  --pf-c-list--m-bordered--li--BorderBottomWidth: 0;
10869
11006
  }
10870
11007
 
10871
- .pf-c-login__footer, .pf-c-login__header {
11008
+ .pf-c-masthead.pf-m-light-200, .pf-c-masthead.pf-m-light {
11009
+ --pf-global--Color--100: var(--pf-global--Color--dark-100);
11010
+ --pf-global--Color--200: var(--pf-global--Color--dark-200);
11011
+ --pf-global--BorderColor--100: var(--pf-global--BorderColor--dark-100);
11012
+ --pf-global--primary-color--100: var(--pf-global--primary-color--dark-100);
11013
+ --pf-global--link--Color: var(--pf-global--link--Color--dark);
11014
+ --pf-global--link--Color--hover: var(--pf-global--link--Color--dark--hover);
11015
+ --pf-global--BackgroundColor--100: var(--pf-global--BackgroundColor--light-100);
11016
+ }
11017
+
11018
+ .pf-c-masthead .pf-c-button.pf-m-plain, .pf-c-masthead {
10872
11019
  --pf-global--Color--100: var(--pf-global--Color--light-100);
10873
11020
  --pf-global--Color--200: var(--pf-global--Color--light-200);
10874
11021
  --pf-global--BorderColor--100: var(--pf-global--BorderColor--light-100);
@@ -10878,11 +11025,11 @@ ul.pf-c-list {
10878
11025
  --pf-global--BackgroundColor--100: var(--pf-global--BackgroundColor--dark-100);
10879
11026
  }
10880
11027
 
10881
- .pf-c-login__footer .pf-c-card, .pf-c-login__header .pf-c-card {
11028
+ .pf-c-masthead .pf-c-button.pf-m-plain .pf-c-card, .pf-c-masthead .pf-c-card {
10882
11029
  --pf-c-card--BackgroundColor: var(--pf-global--BackgroundColor--dark-transparent-200);
10883
11030
  }
10884
11031
 
10885
- .pf-c-login__footer .pf-c-button, .pf-c-login__header .pf-c-button {
11032
+ .pf-c-masthead .pf-c-button.pf-m-plain .pf-c-button, .pf-c-masthead .pf-c-button {
10886
11033
  --pf-c-button--m-primary--Color: var(--pf-global--primary-color--dark-100);
10887
11034
  --pf-c-button--m-primary--hover--Color: var(--pf-global--primary-color--dark-100);
10888
11035
  --pf-c-button--m-primary--focus--Color: var(--pf-global--primary-color--dark-100);
@@ -10901,441 +11048,289 @@ ul.pf-c-list {
10901
11048
  --pf-c-button--m-secondary--active--BorderColor: var(--pf-global--Color--light-100);
10902
11049
  }
10903
11050
 
10904
- .pf-c-login {
10905
- --pf-c-login--PaddingTop: var(--pf-global--spacer--lg);
10906
- --pf-c-login--PaddingBottom: var(--pf-global--spacer--lg);
10907
- --pf-c-login--xl--BackgroundImage: none;
10908
- --pf-c-login__container--xl--GridColumnGap: var(--pf-global--spacer--3xl);
10909
- --pf-c-login__container--MaxWidth: 31.25rem;
10910
- --pf-c-login__container--xl--MaxWidth: none;
10911
- --pf-c-login__container--PaddingLeft: 6.125rem;
10912
- --pf-c-login__container--PaddingRight: 6.125rem;
10913
- --pf-c-login__container--xl--GridTemplateColumns: 34rem minmax(auto, 34rem);
10914
- --pf-c-login__header--MarginBottom: var(--pf-global--spacer--md);
10915
- --pf-c-login__header--PaddingLeft: var(--pf-global--spacer--md);
10916
- --pf-c-login__header--PaddingRight: var(--pf-global--spacer--md);
10917
- --pf-c-login__header--xl--MarginBottom: var(--pf-global--spacer--2xl);
10918
- --pf-c-login__header--xl--MarginTop: var(--pf-global--spacer--3xl);
10919
- --pf-c-login__header--c-brand--MarginBottom: var(--pf-global--spacer--lg);
10920
- --pf-c-login__header--c-brand--xl--MarginBottom: var(--pf-global--spacer--2xl);
10921
- --pf-c-login__main--BackgroundColor: var(--pf-global--BackgroundColor--light-100);
10922
- --pf-c-login__main--MarginBottom: var(--pf-global--spacer--lg);
10923
- --pf-c-login__main-header--PaddingTop: var(--pf-global--spacer--2xl);
10924
- --pf-c-login__main-header--PaddingRight: var(--pf-global--spacer--xl);
10925
- --pf-c-login__main-header--PaddingBottom: var(--pf-global--spacer--md);
10926
- --pf-c-login__main-header--PaddingLeft: var(--pf-global--spacer--xl);
10927
- --pf-c-login__main-header--md--PaddingRight: var(--pf-global--spacer--2xl);
10928
- --pf-c-login__main-header--md--PaddingLeft: var(--pf-global--spacer--2xl);
10929
- --pf-c-login__main-header--ColumnGap: var(--pf-global--spacer--md);
10930
- --pf-c-login__main-header--RowGap: var(--pf-global--spacer--md);
10931
- --pf-c-login__main-header-desc--MarginBottom: var(--pf-global--spacer--sm);
10932
- --pf-c-login__main-header-desc--md--MarginBottom: 0;
10933
- --pf-c-login__main-header-desc--FontSize: var(--pf-global--FontSize--sm);
10934
- --pf-c-login__main-body--PaddingRight: var(--pf-global--spacer--xl);
10935
- --pf-c-login__main-body--PaddingBottom: var(--pf-global--spacer--xl);
10936
- --pf-c-login__main-body--PaddingLeft: var(--pf-global--spacer--xl);
10937
- --pf-c-login__main-body--md--PaddingRight: var(--pf-global--spacer--2xl);
10938
- --pf-c-login__main-body--md--PaddingLeft: var(--pf-global--spacer--2xl);
10939
- --pf-c-login__main-footer--PaddingBottom: var(--pf-global--spacer--3xl);
10940
- --pf-c-login__main-footer--c-title--MarginBottom: var(--pf-global--spacer--md);
10941
- --pf-c-login__main-footer-links--PaddingTop: var(--pf-global--spacer--sm);
10942
- --pf-c-login__main-footer-links--PaddingRight: var(--pf-global--spacer--3xl);
10943
- --pf-c-login__main-footer-links--PaddingBottom: var(--pf-global--spacer--xl);
10944
- --pf-c-login__main-footer-links--PaddingLeft: var(--pf-global--spacer--3xl);
10945
- --pf-c-login__main-footer-links-item--PaddingRight: var(--pf-global--spacer--md);
10946
- --pf-c-login__main-footer-links-item--PaddingLeft: var(--pf-global--spacer--md);
10947
- --pf-c-login__main-footer-links-item--MarginBottom: var(--pf-global--spacer--sm);
10948
- --pf-c-login__main-footer-links-item-link-svg--Fill: var(--pf-global--icon--Color--light);
10949
- --pf-c-login__main-footer-links-item-link-svg--Width: var(--pf-global--icon--FontSize--lg);
10950
- --pf-c-login__main-footer-links-item-link-svg--Height: var(--pf-global--icon--FontSize--lg);
10951
- --pf-c-login__main-footer-links-item-link-svg--hover--Fill: var(--pf-global--icon--Color--dark);
10952
- --pf-c-login__main-footer-band--PaddingTop: var(--pf-global--spacer--lg);
10953
- --pf-c-login__main-footer-band--PaddingRight: var(--pf-global--spacer--md);
10954
- --pf-c-login__main-footer-band--PaddingBottom: var(--pf-global--spacer--lg);
10955
- --pf-c-login__main-footer-band--PaddingLeft: var(--pf-global--spacer--md);
10956
- --pf-c-login__main-footer-band--BackgroundColor: var(--pf-global--BackgroundColor--200);
10957
- --pf-c-login__main-footer-band-item--PaddingTop: var(--pf-global--spacer--md);
10958
- --pf-c-login__footer--PaddingLeft: var(--pf-global--spacer--md);
10959
- --pf-c-login__footer--PaddingRight: var(--pf-global--spacer--md);
10960
- --pf-c-login__footer--c-list--PaddingTop: var(--pf-global--spacer--md);
10961
- --pf-c-login__footer--c-list--xl--PaddingTop: var(--pf-global--spacer--2xl);
10962
- display: flex;
10963
- justify-content: center;
10964
- min-height: 100vh;
10965
- padding-top: var(--pf-c-login--PaddingTop);
10966
- padding-bottom: var(--pf-c-login--PaddingBottom);
11051
+ .pf-c-masthead {
11052
+ --pf-c-masthead--PaddingLeft: var(--pf-c-masthead--inset);
11053
+ --pf-c-masthead--PaddingRight: var(--pf-c-masthead--inset);
11054
+ --pf-c-masthead--BackgroundColor: var(--pf-global--BackgroundColor--dark-100);
11055
+ --pf-c-masthead--inset: var(--pf-global--spacer--md);
11056
+ --pf-c-masthead--xl--inset: var(--pf-global--spacer--lg);
11057
+ --pf-c-masthead--m-display-stack--GridTemplateColumns: max-content 1fr;
11058
+ --pf-c-masthead--m-display-stack__main--GridColumn: -1 / 1;
11059
+ --pf-c-masthead--m-display-stack__main--MinHeight: 4.375rem;
11060
+ --pf-c-masthead--m-display-stack__main--Order: -1;
11061
+ --pf-c-masthead--m-display-stack__main--FlexBasis: 100%;
11062
+ --pf-c-masthead--m-display-stack__main--PaddingTop: var(--pf-global--spacer--sm);
11063
+ --pf-c-masthead--m-display-stack__main--PaddingBottom: var(--pf-global--spacer--sm);
11064
+ --pf-c-masthead--m-display-stack__main--MarginRight: 0;
11065
+ --pf-c-masthead--m-display-stack__main--before--BorderBottom: var(--pf-c-masthead__main--before--BorderBottomWidth) solid var(--pf-c-masthead__main--before--BorderBottomColor);
11066
+ --pf-c-masthead--m-display-stack__toggle--GridColumn: 1;
11067
+ --pf-c-masthead--m-display-stack__content--GridColumn: 2;
11068
+ --pf-c-masthead--m-display-stack__content--MinHeight: auto;
11069
+ --pf-c-masthead--m-display-stack__content--Order: 1;
11070
+ --pf-c-masthead--m-display-stack__content--PaddingTop: 0;
11071
+ --pf-c-masthead--m-display-stack__content--PaddingBottom: 0;
11072
+ --pf-c-masthead--m-display-stack__content--MarginLeft: 0;
11073
+ --pf-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginRight: calc(var(--pf-c-masthead--inset) * -1);
11074
+ --pf-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginLeft: calc(var(--pf-c-masthead--inset) * -1);
11075
+ --pf-c-masthead--m-display-inline--GridTemplateColumns: max-content max-content 1fr;
11076
+ --pf-c-masthead--m-display-inline__main--GridColumn: 2;
11077
+ --pf-c-masthead--m-display-inline__main--MinHeight: 4.375rem;
11078
+ --pf-c-masthead--m-display-inline__main--Order: 0;
11079
+ --pf-c-masthead--m-display-inline__main--FlexBasis: auto;
11080
+ --pf-c-masthead--m-display-inline__main--PaddingTop: 0;
11081
+ --pf-c-masthead--m-display-inline__main--PaddingBottom: 0;
11082
+ --pf-c-masthead--m-display-inline__main--MarginRight: calc(var(--pf-global--spacer--lg) / 2);
11083
+ --pf-c-masthead--m-display-inline__main--BorderBottom: 0;
11084
+ --pf-c-masthead--m-display-inline__toggle--GridColumn: 1;
11085
+ --pf-c-masthead--m-display-inline__content--GridColumn: 3;
11086
+ --pf-c-masthead--m-display-inline__content--MinHeight: 4.375rem;
11087
+ --pf-c-masthead--m-display-inline__content--Order: 0;
11088
+ --pf-c-masthead--m-display-inline__content--PaddingTop: 0;
11089
+ --pf-c-masthead--m-display-inline__content--PaddingBottom: 0;
11090
+ --pf-c-masthead--m-display-inline__content--MarginLeft: calc(var(--pf-global--spacer--lg) / 2);
11091
+ --pf-c-masthead--m-display-inline__content--c-nav--m-horizontal--MarginRight: 0;
11092
+ --pf-c-masthead--m-display-inline__content--c-nav--m-horizontal--MarginLeft: 0;
11093
+ --pf-c-masthead__main--before--Right: calc(var(--pf-c-masthead--inset) * -1);
11094
+ --pf-c-masthead__main--before--Left: calc(var(--pf-c-masthead--inset) * -1);
11095
+ --pf-c-masthead__main--before--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
11096
+ --pf-c-masthead__main--before--BorderBottomColor: var(--pf-global--palette--black-600);
11097
+ --pf-c-masthead__toggle--MarginRight: var(--pf-global--spacer--sm);
11098
+ --pf-c-masthead__toggle--MarginLeft: calc(var(--pf-global--spacer--md) * -1);
11099
+ --pf-c-masthead__toggle--c-button--FontSize: var(--pf-global--FontSize--2xl);
11100
+ --pf-c-masthead--m-light--BackgroundColor: var(--pf-global--BackgroundColor--100);
11101
+ --pf-c-masthead--m-light__main--BorderBottomColor: var(--pf-global--BorderColor--300);
11102
+ --pf-c-masthead--m-light-200--BackgroundColor: var(--pf-global--BackgroundColor--200);
11103
+ --pf-c-masthead--m-light-200__main--BorderBottomColor: var(--pf-global--BorderColor--100);
11104
+ --pf-c-masthead--c-toolbar__item--Display: flex;
11105
+ --pf-c-masthead--item-border-color--base: var(--pf-global--palette--black-800);
11106
+ --pf-c-masthead--c-context-selector--Width: auto;
11107
+ --pf-c-masthead--c-context-selector__toggle--BorderTopColor: var(--pf-c-masthead--item-border-color--base);
11108
+ --pf-c-masthead--c-context-selector__toggle--BorderRightColor: var(--pf-c-masthead--item-border-color--base);
11109
+ --pf-c-masthead--c-context-selector__toggle--BorderLeftColor: var(--pf-c-masthead--item-border-color--base);
11110
+ --pf-c-masthead--c-context-selector--m-full-height__toggle--BorderTopColor: transparent;
11111
+ --pf-c-masthead--c-context-selector--m-full-height__toggle--BorderBottomColor: transparent;
11112
+ --pf-c-masthead--c-dropdown__toggle--before--BorderTopColor: var(--pf-c-masthead--item-border-color--base);
11113
+ --pf-c-masthead--c-dropdown__toggle--before--BorderRightColor: var(--pf-c-masthead--item-border-color--base);
11114
+ --pf-c-masthead--c-dropdown__toggle--before--BorderLeftColor: var(--pf-c-masthead--item-border-color--base);
11115
+ --pf-c-masthead--c-dropdown--m-full-height__toggle--before--BorderTopColor: transparent;
11116
+ --pf-c-masthead--c-dropdown--m-full-height__toggle--before--BorderBottomColor: transparent;
11117
+ --pf-c-masthead--c-menu-toggle--before--BorderTopColor: var(--pf-c-masthead--item-border-color--base);
11118
+ --pf-c-masthead--c-menu-toggle--before--BorderRightColor: var(--pf-c-masthead--item-border-color--base);
11119
+ --pf-c-masthead--c-menu-toggle--before--BorderLeftColor: var(--pf-c-masthead--item-border-color--base);
11120
+ --pf-c-masthead--c-menu-toggle--m-full-height--before--BorderTopColor: transparent;
11121
+ --pf-c-masthead--c-menu-toggle--m-full-height--before--BorderBottomColor: transparent;
11122
+ --pf-c-masthead--c-toolbar__content--PaddingRight: 0;
11123
+ --pf-c-masthead--c-toolbar__content--PaddingLeft: 0;
11124
+ --pf-c-masthead--c-toolbar__expandable-content--PaddingTop: var(--pf-global--spacer--md);
11125
+ --pf-c-masthead--c-toolbar__expandable-content--PaddingRight: var(--pf-c-masthead--inset);
11126
+ --pf-c-masthead--c-toolbar__expandable-content--PaddingBottom: var(--pf-global--spacer--md);
11127
+ --pf-c-masthead--c-toolbar__expandable-content--PaddingLeft: var(--pf-c-masthead--inset);
11128
+ --pf-c-masthead--c-toolbar__expandable-content--BorderTopWidth: var(--pf-global--BorderWidth--sm);
11129
+ --pf-c-masthead--c-toolbar__expandable-content--BorderTopColor: var(--pf-c-masthead--item-border-color--base);
11130
+ --pf-c-masthead--GridTemplateColumns: var(--pf-c-masthead--m-display-stack--GridTemplateColumns);
11131
+ --pf-c-masthead__main--GridColumn: var(--pf-c-masthead--m-display-stack__main--GridColumn);
11132
+ --pf-c-masthead__main--MinHeight: var(--pf-c-masthead--m-display-stack__main--MinHeight);
11133
+ --pf-c-masthead__main--Order: var(--pf-c-masthead--m-display-stack__main--Order);
11134
+ --pf-c-masthead__main--FlexBasis: var(--pf-c-masthead--m-display-stack__main--FlexBasis);
11135
+ --pf-c-masthead__main--PaddingTop: var(--pf-c-masthead--m-display-stack__main--PaddingTop);
11136
+ --pf-c-masthead__main--PaddingBottom: var(--pf-c-masthead--m-display-stack__main--PaddingBottom);
11137
+ --pf-c-masthead__main--MarginRight: var(--pf-c-masthead--m-display-stack__main--MarginRight);
11138
+ --pf-c-masthead__main--before--BorderBottom: var(--pf-c-masthead--m-display-stack__main--before--BorderBottom);
11139
+ --pf-c-masthead__content--GridColumn: var(--pf-c-masthead--m-display-stack__content--GridColumn);
11140
+ --pf-c-masthead__content--MinHeight: var(--pf-c-masthead--m-display-stack__content--MinHeight);
11141
+ --pf-c-masthead__content--Order: var(--pf-c-masthead--m-display-stack__content--Order);
11142
+ --pf-c-masthead__content--PaddingTop: var(--pf-c-masthead--m-display-stack__content--PaddingTop);
11143
+ --pf-c-masthead__content--PaddingBottom: var(--pf-c-masthead--m-display-stack__content--PaddingBottom);
11144
+ --pf-c-masthead__content--MarginLeft: var(--pf-c-masthead--m-display-stack__content--MarginLeft);
11145
+ --pf-c-masthead__content--c-nav--m-horizontal--MarginRight: var(--pf-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginRight);
11146
+ --pf-c-masthead__content--c-nav--m-horizontal--MarginLeft: var(--pf-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginLeft);
11147
+ color: var(--pf-global--Color--100);
11148
+ position: relative;
11149
+ display: grid;
11150
+ grid-template-columns: var(--pf-c-masthead--GridTemplateColumns);
11151
+ align-items: center;
11152
+ min-width: 0;
11153
+ padding-right: var(--pf-c-masthead--PaddingRight);
11154
+ padding-left: var(--pf-c-masthead--PaddingLeft);
11155
+ background-color: var(--pf-c-masthead--BackgroundColor);
10967
11156
  }
10968
11157
 
10969
- @media (min-width: 1200px) {
10970
- .pf-c-login {
10971
- --pf-c-login__container--MaxWidth: var(--pf-c-login__container--xl--MaxWidth);
11158
+ @media screen and (min-width: 768px) {
11159
+ .pf-c-page:where(:not(.pf-m-resize-observer)) .pf-c-masthead {
11160
+ --pf-c-masthead--GridTemplateColumns: var(--pf-c-masthead--m-display-inline--GridTemplateColumns);
11161
+ --pf-c-masthead__main--GridColumn: var(--pf-c-masthead--m-display-inline__main--GridColumn);
11162
+ --pf-c-masthead__main--MinHeight: var(--pf-c-masthead--m-display-inline__main--MinHeight);
11163
+ --pf-c-masthead__main--Order: var(--pf-c-masthead--m-display-inline__main--Order);
11164
+ --pf-c-masthead__main--FlexBasis: var(--pf-c-masthead--m-display-inline__main--FlexBasis);
11165
+ --pf-c-masthead__main--PaddingTop: var(--pf-c-masthead--m-display-inline__main--PaddingTop);
11166
+ --pf-c-masthead__main--PaddingBottom: var(--pf-c-masthead--m-display-inline__main--PaddingBottom);
11167
+ --pf-c-masthead__main--MarginRight: var(--pf-c-masthead--m-display-inline__main--MarginRight);
11168
+ --pf-c-masthead__main--before--BorderBottom: var(--pf-c-masthead--m-display-inline__main--BorderBottom);
11169
+ --pf-c-masthead__content--GridColumn: var(--pf-c-masthead--m-display-inline__content--GridColumn);
11170
+ --pf-c-masthead__content--MinHeight: var(--pf-c-masthead--m-display-inline__content--MinHeight);
11171
+ --pf-c-masthead__content--Order: var(--pf-c-masthead--m-display-inline__content--Order);
11172
+ --pf-c-masthead__content--PaddingTop: var(--pf-c-masthead--m-display-inline__content--PaddingTop);
11173
+ --pf-c-masthead__content--PaddingBottom: var(--pf-c-masthead--m-display-inline__content--PaddingBottom);
11174
+ --pf-c-masthead__content--MarginLeft: var(--pf-c-masthead--m-display-inline__content--MarginLeft);
11175
+ --pf-c-masthead__content--c-nav--m-horizontal--MarginRight: var(--pf-c-masthead--m-display-inline__content--c-nav--m-horizontal--MarginRight);
11176
+ --pf-c-masthead__content--c-nav--m-horizontal--MarginLeft: var(--pf-c-masthead--m-display-inline__content--c-nav--m-horizontal--MarginLeft);
10972
11177
  }
10973
11178
  }
10974
- @media (min-width: 576px) {
10975
- .pf-c-login {
10976
- --pf-c-login__header--PaddingRight: 0;
10977
- --pf-c-login__header--PaddingLeft: 0;
10978
- }
10979
- }
10980
- @media (min-width: 1200px) {
10981
- .pf-c-login {
10982
- --pf-c-login__header--MarginBottom: var(--pf-c-login__header--xl--MarginBottom);
10983
- --pf-c-login__header--c-brand--MarginBottom: var(--pf-c-login__header--c-brand--xl--MarginBottom);
10984
- }
10985
- }
10986
- @media (min-width: 1200px) {
10987
- .pf-c-login {
10988
- --pf-c-login__main--MarginBottom: 0;
10989
- }
10990
- }
10991
- @media (min-width: 768px) {
10992
- .pf-c-login {
10993
- --pf-c-login__main-header--PaddingRight: var(--pf-c-login__main-header--md--PaddingRight);
10994
- --pf-c-login__main-header--PaddingLeft: var(--pf-c-login__main-header--md--PaddingLeft);
10995
- --pf-c-login__main-header-desc--MarginBottom: var(--pf-c-login__main-header-desc--md--MarginBottom);
10996
- }
10997
- }
10998
- @media (min-width: 768px) {
10999
- .pf-c-login {
11000
- --pf-c-login__main-body--PaddingRight: var(--pf-c-login__main-body--md--PaddingRight);
11001
- --pf-c-login__main-body--PaddingLeft: var(--pf-c-login__main-body--md--PaddingLeft);
11002
- }
11003
- }
11004
- @media (min-width: 576px) {
11005
- .pf-c-login {
11006
- --pf-c-login__footer--PaddingRight: 0;
11007
- --pf-c-login__footer--PaddingLeft: 0;
11008
- }
11009
- }
11010
- @media (min-width: 1200px) {
11011
- .pf-c-login {
11012
- --pf-c-login__footer--c-list--PaddingTop: var(--pf-c-login__footer--c-list--xl--PaddingTop);
11013
- }
11014
- }
11015
- @media (min-width: 1200px) {
11016
- .pf-c-login {
11017
- background-image: var(--pf-c-login--xl--BackgroundImage);
11018
- }
11019
- }
11020
- @media (min-width: 576px) {
11021
- .pf-c-login {
11022
- align-items: center;
11179
+ @media screen and (min-width: 1200px) {
11180
+ .pf-c-masthead {
11181
+ --pf-c-masthead--inset: var(--pf-c-masthead--xl--inset);
11023
11182
  }
11024
11183
  }
11025
- .pf-c-login__container {
11026
- width: 100%;
11027
- max-width: var(--pf-c-login__container--MaxWidth);
11184
+ .pf-c-masthead.pf-m-light {
11185
+ color: var(--pf-global--Color--100);
11186
+ --pf-c-masthead--BackgroundColor: var(--pf-c-masthead--m-light--BackgroundColor);
11187
+ --pf-c-masthead__main--BorderBottomColor: var(--pf-c-masthead--m-light__main--BorderBottomColor);
11028
11188
  }
11029
11189
 
11030
- @media (min-width: 1200px) {
11031
- .pf-c-login__container {
11032
- display: grid;
11033
- justify-content: center;
11034
- grid-column-gap: var(--pf-c-login__container--xl--GridColumnGap);
11035
- grid-template-columns: var(--pf-c-login__container--xl--GridTemplateColumns);
11036
- grid-template-areas: "main header" "main footer" "main .";
11037
- padding-right: var(--pf-c-login__container--PaddingRight);
11038
- padding-left: var(--pf-c-login__container--PaddingLeft);
11039
- }
11040
- }
11041
- .pf-c-login__header {
11190
+ .pf-c-masthead.pf-m-light-200 {
11042
11191
  color: var(--pf-global--Color--100);
11043
- grid-area: header;
11044
- padding-right: var(--pf-c-login__header--PaddingRight);
11045
- padding-left: var(--pf-c-login__header--PaddingLeft);
11192
+ --pf-c-masthead--BackgroundColor: var(--pf-c-masthead--m-light-200--BackgroundColor);
11193
+ --pf-c-masthead__main--BorderBottomColor: var(--pf-c-masthead--m-light-200__main--BorderBottomColor);
11046
11194
  }
11047
11195
 
11048
- @media (min-width: 1200px) {
11049
- .pf-c-login__header {
11050
- margin-top: var(--pf-c-login__header--xl--MarginTop);
11051
- }
11052
- }
11053
- .pf-c-login__header .pf-c-brand {
11054
- margin-bottom: var(--pf-c-login__header--c-brand--MarginBottom);
11196
+ .pf-c-masthead .pf-c-toolbar {
11197
+ --pf-c-toolbar__content--PaddingRight: var(--pf-c-masthead--c-toolbar__content--PaddingRight);
11198
+ --pf-c-toolbar__content--PaddingLeft: var(--pf-c-masthead--c-toolbar__content--PaddingLeft);
11199
+ --pf-c-toolbar__expandable-content--PaddingTop: var(--pf-c-masthead--c-toolbar__expandable-content--PaddingTop);
11200
+ --pf-c-toolbar__expandable-content--PaddingRight: var(--pf-c-masthead--c-toolbar__expandable-content--PaddingRight);
11201
+ --pf-c-toolbar__expandable-content--PaddingBottom: var(--pf-c-masthead--c-toolbar__expandable-content--PaddingBottom);
11202
+ --pf-c-toolbar__expandable-content--PaddingLeft: var(--pf-c-masthead--c-toolbar__expandable-content--PaddingLeft);
11203
+ width: 100%;
11055
11204
  }
11056
11205
 
11057
- .pf-c-login__main {
11058
- align-self: start;
11059
- margin-bottom: var(--pf-c-login__main--MarginBottom);
11060
- background-color: var(--pf-c-login__main--BackgroundColor);
11061
- grid-area: main;
11206
+ .pf-c-masthead .pf-c-toolbar__content-section {
11207
+ flex-wrap: nowrap;
11062
11208
  }
11063
11209
 
11064
- .pf-c-login__main > :first-child:not(.pf-c-login__main-header) {
11065
- padding-top: var(--pf-c-login__main-header--PaddingTop);
11210
+ .pf-c-masthead .pf-c-toolbar__expandable-content {
11211
+ border-top: var(--pf-c-masthead--c-toolbar__expandable-content--BorderTopWidth) solid var(--pf-c-masthead--c-toolbar__expandable-content--BorderTopColor);
11066
11212
  }
11067
11213
 
11068
- .pf-c-login__main > :last-child:not(.pf-c-login__main-footer) {
11069
- padding-bottom: var(--pf-c-login__main-footer--PaddingBottom);
11214
+ .pf-c-masthead .pf-c-menu-toggle {
11215
+ --pf-c-menu-toggle--before--BorderTopColor: var(--pf-c-masthead--c-menu-toggle--before--BorderTopColor);
11216
+ --pf-c-menu-toggle--before--BorderRightColor: var(--pf-c-masthead--c-menu-toggle--before--BorderRightColor);
11217
+ --pf-c-menu-toggle--before--BorderLeftColor: var(--pf-c-masthead--c-menu-toggle--before--BorderLeftColor);
11070
11218
  }
11071
11219
 
11072
- .pf-c-login__main-header {
11073
- display: grid;
11074
- grid-template-columns: 100%;
11075
- column-gap: var(--pf-c-login__main-header--ColumnGap);
11076
- row-gap: var(--pf-c-login__main-header--RowGap);
11077
- align-items: center;
11078
- 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);
11220
+ .pf-c-masthead .pf-c-menu-toggle.pf-m-full-height {
11221
+ --pf-c-menu-toggle--before--BorderTopColor: var(--pf-c-masthead--c-menu-toggle--m-full-height--before--BorderTopColor);
11222
+ --pf-c-menu-toggle--before--BorderBottomColor: var(--pf-c-masthead--c-menu-toggle--m-full-height--before--BorderBottomColor);
11079
11223
  }
11080
11224
 
11081
- @media (min-width: 768px) {
11082
- .pf-c-login__main-header {
11083
- grid-template-columns: 1fr auto;
11084
- }
11225
+ .pf-c-masthead .pf-c-context-selector {
11226
+ --pf-c-context-selector--Width: var(--pf-c-masthead--c-context-selector--Width);
11227
+ --pf-c-context-selector__toggle--BorderTopColor: var(--pf-c-masthead--c-context-selector__toggle--BorderTopColor);
11228
+ --pf-c-context-selector__toggle--BorderRightColor: var(--pf-c-masthead--c-context-selector__toggle--BorderRightColor);
11229
+ --pf-c-context-selector__toggle--BorderLeftColor: var(--pf-c-masthead--c-context-selector__toggle--BorderLeftColor);
11085
11230
  }
11086
- .pf-c-login__main-header-utilities,
11087
- .pf-c-login__main-header .pf-c-dropdown {
11088
- grid-column: auto;
11089
- grid-row: auto;
11231
+
11232
+ .pf-c-masthead .pf-c-context-selector.pf-m-full-height {
11233
+ --pf-c-context-selector__toggle--BorderTopColor: var(--pf-c-masthead--c-context-selector--m-full-height__toggle--BorderTopColor);
11234
+ --pf-c-context-selector__toggle--BorderBottomColor: var(--pf-c-masthead--c-context-selector--m-full-height__toggle--BorderBottomColor);
11090
11235
  }
11091
11236
 
11092
- @media (min-width: 768px) {
11093
- .pf-c-login__main-header-utilities,
11094
- .pf-c-login__main-header .pf-c-dropdown {
11095
- grid-column: 2/3;
11096
- grid-row: 1;
11097
- }
11237
+ .pf-c-masthead .pf-c-dropdown {
11238
+ --pf-c-dropdown__toggle--before--BorderTopColor: var(--pf-c-masthead--c-dropdown__toggle--before--BorderTopColor);
11239
+ --pf-c-dropdown__toggle--before--BorderRightColor: var(--pf-c-masthead--c-dropdown__toggle--before--BorderRightColor);
11240
+ --pf-c-dropdown__toggle--before--BorderLeftColor: var(--pf-c-masthead--c-dropdown__toggle--before--BorderLeftColor);
11098
11241
  }
11099
- .pf-c-login__main-header-utilities .pf-c-dropdown {
11100
- grid-column: auto;
11101
- grid-row: auto;
11242
+
11243
+ .pf-c-masthead .pf-c-dropdown.pf-m-full-height {
11244
+ --pf-c-dropdown__toggle--before--BorderTopColor: var(--pf-c-masthead--c-dropdown--m-full-height__toggle--before--BorderTopColor);
11245
+ --pf-c-dropdown__toggle--before--BorderBottomColor: var(--pf-c-masthead--c-dropdown--m-full-height__toggle--before--BorderBottomColor);
11102
11246
  }
11103
11247
 
11104
- .pf-c-login__main-header-desc {
11105
- margin-bottom: var(--pf-c-login__main-header-desc--MarginBottom);
11106
- font-size: var(--pf-c-login__main-header-desc--FontSize);
11107
- grid-column: 1/-1;
11248
+ .pf-c-masthead .pf-c-nav {
11249
+ align-self: stretch;
11108
11250
  }
11109
11251
 
11110
- .pf-c-login__main-body {
11111
- padding-right: var(--pf-c-login__main-body--PaddingRight);
11112
- padding-bottom: var(--pf-c-login__main-body--PaddingBottom);
11113
- padding-left: var(--pf-c-login__main-body--PaddingLeft);
11252
+ .pf-c-masthead .pf-c-button.pf-m-plain {
11253
+ color: var(--pf-c-button--m-plain--Color);
11114
11254
  }
11115
11255
 
11116
- .pf-c-login__main-footer {
11256
+ .pf-c-masthead__main {
11257
+ position: relative;
11117
11258
  display: flex;
11118
- flex-wrap: wrap;
11259
+ flex-basis: var(--pf-c-masthead__main--FlexBasis);
11260
+ align-items: center;
11261
+ align-self: stretch;
11262
+ order: var(--pf-c-masthead__main--Order);
11263
+ min-height: var(--pf-c-masthead__main--MinHeight);
11264
+ padding-top: var(--pf-c-masthead__main--PaddingTop);
11265
+ padding-bottom: var(--pf-c-masthead__main--PaddingBottom);
11266
+ margin-right: var(--pf-c-masthead__main--MarginRight);
11267
+ grid-column: var(--pf-c-masthead__main--GridColumn);
11119
11268
  }
11120
11269
 
11121
- .pf-c-login__main-footer .pf-c-title {
11122
- margin-bottom: var(--pf-c-login__main-footer--c-title--MarginBottom);
11123
- text-align: center;
11270
+ .pf-c-masthead__main::before {
11271
+ position: absolute;
11272
+ right: var(--pf-c-masthead__main--before--Right);
11273
+ bottom: 0;
11274
+ left: var(--pf-c-masthead__main--before--Left);
11275
+ content: "";
11276
+ border-bottom: var(--pf-c-masthead__main--before--BorderBottom);
11124
11277
  }
11125
11278
 
11126
- .pf-c-login__main-footer > * {
11127
- flex-basis: 100%;
11279
+ .pf-c-masthead__main:last-child {
11280
+ --pf-c-masthead__main--MarginRight: 0;
11128
11281
  }
11129
11282
 
11130
- .pf-c-login__main-footer-links {
11283
+ .pf-c-masthead__content {
11131
11284
  display: flex;
11132
- flex-wrap: wrap;
11133
- justify-content: center;
11134
- 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);
11135
- }
11136
-
11137
- .pf-c-login__main-footer-links-item {
11138
- padding-right: var(--pf-c-login__main-footer-links-item--PaddingRight);
11139
- padding-left: var(--pf-c-login__main-footer-links-item--PaddingLeft);
11140
- margin-bottom: var(--pf-c-login__main-footer-links-item--MarginBottom);
11285
+ flex-grow: 1;
11286
+ align-items: center;
11287
+ align-self: stretch;
11288
+ order: var(--pf-c-masthead__content--Order);
11289
+ min-height: var(--pf-c-masthead__content--MinHeight);
11290
+ padding-top: var(--pf-c-masthead__content--PaddingTop);
11291
+ padding-bottom: var(--pf-c-masthead__content--PaddingBottom);
11292
+ margin-left: var(--pf-c-masthead__content--MarginLeft);
11293
+ grid-column: var(--pf-c-masthead__content--GridColumn);
11294
+ grid-column-end: -1;
11295
+ flex-shrink: 1;
11141
11296
  }
11142
11297
 
11143
- .pf-c-login__main-footer-links-item-link svg {
11144
- fill: var(--pf-c-login__main-footer-links-item-link-svg--Fill);
11145
- width: 100%;
11146
- max-width: var(--pf-c-login__main-footer-links-item-link-svg--Width);
11147
- height: 100%;
11148
- max-height: var(--pf-c-login__main-footer-links-item-link-svg--Height);
11298
+ .pf-c-masthead__content:only-child {
11299
+ --pf-c-masthead__content--MarginLeft: 0;
11149
11300
  }
11150
11301
 
11151
- .pf-c-login__main-footer-links-item-link:hover svg {
11152
- fill: var(--pf-c-login__main-footer-links-item-link-svg--hover--Fill);
11302
+ .pf-c-masthead__content .pf-c-nav.pf-m-horizontal {
11303
+ margin-right: var(--pf-c-masthead__content--c-nav--m-horizontal--MarginRight);
11304
+ margin-left: var(--pf-c-masthead__content--c-nav--m-horizontal--MarginLeft);
11153
11305
  }
11154
11306
 
11155
- .pf-c-login__main-footer-band {
11156
- 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);
11157
- text-align: center;
11158
- background-color: var(--pf-c-login__main-footer-band--BackgroundColor);
11307
+ .pf-c-masthead__toggle ~ .pf-c-masthead__content {
11308
+ --pf-c-masthead__content--c-nav--m-horizontal--MarginLeft: calc(var(--pf-c-masthead__content--MarginLeft) * -1);
11159
11309
  }
11160
11310
 
11161
- .pf-c-login__main-footer-band > * + * {
11162
- padding-top: var(--pf-c-login__main-footer-band-item--PaddingTop);
11311
+ .pf-c-masthead__main,
11312
+ .pf-c-masthead__brand,
11313
+ .pf-c-masthead__content {
11314
+ min-width: 0;
11163
11315
  }
11164
11316
 
11165
- .pf-c-login__footer {
11166
- color: var(--pf-global--Color--100);
11167
- grid-area: footer;
11168
- padding-right: var(--pf-c-login__footer--PaddingRight);
11169
- padding-left: var(--pf-c-login__footer--PaddingLeft);
11317
+ .pf-c-masthead__brand {
11318
+ display: inline-flex;
11319
+ align-self: center;
11170
11320
  }
11171
11321
 
11172
- .pf-c-login__footer .pf-c-list a {
11173
- color: unset;
11322
+ .pf-c-masthead__toggle {
11323
+ grid-column: var(--pf-c-masthead__toggle--GridColumn);
11324
+ align-self: center;
11325
+ margin-right: var(--pf-c-masthead__toggle--MarginRight);
11326
+ margin-left: var(--pf-c-masthead__toggle--MarginLeft);
11174
11327
  }
11175
11328
 
11176
- .pf-c-login__footer .pf-c-list:not(:only-child) {
11177
- padding-top: var(--pf-c-login__footer--c-list--PaddingTop);
11329
+ .pf-c-masthead__toggle .pf-c-button {
11330
+ --pf-c-button--FontSize: var(--pf-c-masthead__toggle--c-button--FontSize);
11178
11331
  }
11179
11332
 
11180
- :where(.pf-theme-dark) .pf-c-login__header,
11181
- :where(.pf-theme-dark) .pf-c-login__footer {
11182
- --pf-global--Color--100: #e0e0e0;
11183
- --pf-global--Color--200: #aaabac;
11184
- --pf-global--BorderColor--100: #444548;
11185
- --pf-global--primary-color--100: #1fa7f8;
11186
- --pf-global--link--Color: #1fa7f8;
11187
- --pf-global--link--Color--hover: #73bcf7;
11188
- --pf-global--BackgroundColor--100: #1b1d21;
11189
- }
11190
-
11191
- :where(.pf-theme-dark) .pf-c-login__header .pf-c-card,
11192
- :where(.pf-theme-dark) .pf-c-login__footer .pf-c-card {
11193
- --pf-c-card--BackgroundColor: var(--pf-global--BackgroundColor--100);
11194
- }
11195
-
11196
- :where(.pf-theme-dark) .pf-c-login__header .pf-c-button,
11197
- :where(.pf-theme-dark) .pf-c-login__footer .pf-c-button {
11198
- --pf-c-button--m-primary--Color: var(--pf-global--Color--light-100);
11199
- --pf-c-button--m-primary--hover--Color: var(--pf-global--Color--light-100);
11200
- --pf-c-button--m-primary--focus--Color: var(--pf-global--Color--light-100);
11201
- --pf-c-button--m-primary--active--Color: var(--pf-global--Color--light-100);
11202
- --pf-c-button--m-primary--BackgroundColor: var(--pf-global--primary-color--300);
11203
- --pf-c-button--m-primary--hover--BackgroundColor: var(--pf-global--primary-color--200);
11204
- --pf-c-button--m-primary--focus--BackgroundColor: var(--pf-global--primary-color--200);
11205
- --pf-c-button--m-primary--active--BackgroundColor: var(--pf-global--primary-color--200);
11206
- --pf-c-button--m-secondary--Color: var(--pf-global--primary-color--100);
11207
- --pf-c-button--m-secondary--hover--Color: var(--pf-global--primary-color--100);
11208
- --pf-c-button--m-secondary--focus--Color: var(--pf-global--primary-color--100);
11209
- --pf-c-button--m-secondary--active--Color: var(--pf-global--primary-color--100);
11210
- }
11211
-
11212
- :where(.pf-theme-dark) .pf-c-login__header,
11213
- :where(.pf-theme-dark) .pf-c-login__footer {
11214
- color: var(--pf-global--Color--100);
11215
- }
11216
-
11217
- .pf-c-masthead.pf-m-light-200, .pf-c-masthead.pf-m-light {
11218
- --pf-global--Color--100: var(--pf-global--Color--dark-100);
11219
- --pf-global--Color--200: var(--pf-global--Color--dark-200);
11220
- --pf-global--BorderColor--100: var(--pf-global--BorderColor--dark-100);
11221
- --pf-global--primary-color--100: var(--pf-global--primary-color--dark-100);
11222
- --pf-global--link--Color: var(--pf-global--link--Color--dark);
11223
- --pf-global--link--Color--hover: var(--pf-global--link--Color--dark--hover);
11224
- --pf-global--BackgroundColor--100: var(--pf-global--BackgroundColor--light-100);
11225
- }
11226
-
11227
- .pf-c-masthead .pf-c-button.pf-m-plain, .pf-c-masthead {
11228
- --pf-global--Color--100: var(--pf-global--Color--light-100);
11229
- --pf-global--Color--200: var(--pf-global--Color--light-200);
11230
- --pf-global--BorderColor--100: var(--pf-global--BorderColor--light-100);
11231
- --pf-global--primary-color--100: var(--pf-global--primary-color--light-100);
11232
- --pf-global--link--Color: var(--pf-global--link--Color--light);
11233
- --pf-global--link--Color--hover: var(--pf-global--link--Color--light);
11234
- --pf-global--BackgroundColor--100: var(--pf-global--BackgroundColor--dark-100);
11235
- }
11236
-
11237
- .pf-c-masthead .pf-c-button.pf-m-plain .pf-c-card, .pf-c-masthead .pf-c-card {
11238
- --pf-c-card--BackgroundColor: var(--pf-global--BackgroundColor--dark-transparent-200);
11239
- }
11240
-
11241
- .pf-c-masthead .pf-c-button.pf-m-plain .pf-c-button, .pf-c-masthead .pf-c-button {
11242
- --pf-c-button--m-primary--Color: var(--pf-global--primary-color--dark-100);
11243
- --pf-c-button--m-primary--hover--Color: var(--pf-global--primary-color--dark-100);
11244
- --pf-c-button--m-primary--focus--Color: var(--pf-global--primary-color--dark-100);
11245
- --pf-c-button--m-primary--active--Color: var(--pf-global--primary-color--dark-100);
11246
- --pf-c-button--m-primary--BackgroundColor: var(--pf-global--BackgroundColor--light-100);
11247
- --pf-c-button--m-primary--hover--BackgroundColor: var(--pf-global--BackgroundColor--light-300);
11248
- --pf-c-button--m-primary--focus--BackgroundColor: var(--pf-global--BackgroundColor--light-300);
11249
- --pf-c-button--m-primary--active--BackgroundColor: var(--pf-global--BackgroundColor--light-300);
11250
- --pf-c-button--m-secondary--Color: var(--pf-global--Color--light-100);
11251
- --pf-c-button--m-secondary--hover--Color: var(--pf-global--Color--light-100);
11252
- --pf-c-button--m-secondary--focus--Color: var(--pf-global--Color--light-100);
11253
- --pf-c-button--m-secondary--active--Color: var(--pf-global--Color--light-100);
11254
- --pf-c-button--m-secondary--BorderColor: var(--pf-global--Color--light-100);
11255
- --pf-c-button--m-secondary--hover--BorderColor: var(--pf-global--Color--light-100);
11256
- --pf-c-button--m-secondary--focus--BorderColor: var(--pf-global--Color--light-100);
11257
- --pf-c-button--m-secondary--active--BorderColor: var(--pf-global--Color--light-100);
11258
- }
11259
-
11260
- .pf-c-masthead {
11261
- --pf-c-masthead--PaddingLeft: var(--pf-c-masthead--inset);
11262
- --pf-c-masthead--PaddingRight: var(--pf-c-masthead--inset);
11263
- --pf-c-masthead--BackgroundColor: var(--pf-global--BackgroundColor--dark-100);
11264
- --pf-c-masthead--inset: var(--pf-global--spacer--md);
11265
- --pf-c-masthead--xl--inset: var(--pf-global--spacer--lg);
11266
- --pf-c-masthead--m-display-stack--GridTemplateColumns: max-content 1fr;
11267
- --pf-c-masthead--m-display-stack__main--GridColumn: -1 / 1;
11268
- --pf-c-masthead--m-display-stack__main--MinHeight: 4.375rem;
11269
- --pf-c-masthead--m-display-stack__main--Order: -1;
11270
- --pf-c-masthead--m-display-stack__main--FlexBasis: 100%;
11271
- --pf-c-masthead--m-display-stack__main--PaddingTop: var(--pf-global--spacer--sm);
11272
- --pf-c-masthead--m-display-stack__main--PaddingBottom: var(--pf-global--spacer--sm);
11273
- --pf-c-masthead--m-display-stack__main--MarginRight: 0;
11274
- --pf-c-masthead--m-display-stack__main--before--BorderBottom: var(--pf-c-masthead__main--before--BorderBottomWidth) solid var(--pf-c-masthead__main--before--BorderBottomColor);
11275
- --pf-c-masthead--m-display-stack__toggle--GridColumn: 1;
11276
- --pf-c-masthead--m-display-stack__content--GridColumn: 2;
11277
- --pf-c-masthead--m-display-stack__content--MinHeight: auto;
11278
- --pf-c-masthead--m-display-stack__content--Order: 1;
11279
- --pf-c-masthead--m-display-stack__content--PaddingTop: 0;
11280
- --pf-c-masthead--m-display-stack__content--PaddingBottom: 0;
11281
- --pf-c-masthead--m-display-stack__content--MarginLeft: 0;
11282
- --pf-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginRight: calc(var(--pf-c-masthead--inset) * -1);
11283
- --pf-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginLeft: calc(var(--pf-c-masthead--inset) * -1);
11284
- --pf-c-masthead--m-display-inline--GridTemplateColumns: max-content max-content 1fr;
11285
- --pf-c-masthead--m-display-inline__main--GridColumn: 2;
11286
- --pf-c-masthead--m-display-inline__main--MinHeight: 4.375rem;
11287
- --pf-c-masthead--m-display-inline__main--Order: 0;
11288
- --pf-c-masthead--m-display-inline__main--FlexBasis: auto;
11289
- --pf-c-masthead--m-display-inline__main--PaddingTop: 0;
11290
- --pf-c-masthead--m-display-inline__main--PaddingBottom: 0;
11291
- --pf-c-masthead--m-display-inline__main--MarginRight: calc(var(--pf-global--spacer--lg) / 2);
11292
- --pf-c-masthead--m-display-inline__main--BorderBottom: 0;
11293
- --pf-c-masthead--m-display-inline__toggle--GridColumn: 1;
11294
- --pf-c-masthead--m-display-inline__content--GridColumn: 3;
11295
- --pf-c-masthead--m-display-inline__content--MinHeight: 4.375rem;
11296
- --pf-c-masthead--m-display-inline__content--Order: 0;
11297
- --pf-c-masthead--m-display-inline__content--PaddingTop: 0;
11298
- --pf-c-masthead--m-display-inline__content--PaddingBottom: 0;
11299
- --pf-c-masthead--m-display-inline__content--MarginLeft: calc(var(--pf-global--spacer--lg) / 2);
11300
- --pf-c-masthead--m-display-inline__content--c-nav--m-horizontal--MarginRight: 0;
11301
- --pf-c-masthead--m-display-inline__content--c-nav--m-horizontal--MarginLeft: 0;
11302
- --pf-c-masthead__main--before--Right: calc(var(--pf-c-masthead--inset) * -1);
11303
- --pf-c-masthead__main--before--Left: calc(var(--pf-c-masthead--inset) * -1);
11304
- --pf-c-masthead__main--before--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
11305
- --pf-c-masthead__main--before--BorderBottomColor: var(--pf-global--palette--black-600);
11306
- --pf-c-masthead__toggle--MarginRight: var(--pf-global--spacer--sm);
11307
- --pf-c-masthead__toggle--MarginLeft: calc(var(--pf-global--spacer--md) * -1);
11308
- --pf-c-masthead__toggle--c-button--FontSize: var(--pf-global--FontSize--2xl);
11309
- --pf-c-masthead--m-light--BackgroundColor: var(--pf-global--BackgroundColor--100);
11310
- --pf-c-masthead--m-light__main--BorderBottomColor: var(--pf-global--BorderColor--300);
11311
- --pf-c-masthead--m-light-200--BackgroundColor: var(--pf-global--BackgroundColor--200);
11312
- --pf-c-masthead--m-light-200__main--BorderBottomColor: var(--pf-global--BorderColor--100);
11313
- --pf-c-masthead--c-toolbar__item--Display: flex;
11314
- --pf-c-masthead--item-border-color--base: var(--pf-global--palette--black-800);
11315
- --pf-c-masthead--c-context-selector--Width: auto;
11316
- --pf-c-masthead--c-context-selector__toggle--BorderTopColor: var(--pf-c-masthead--item-border-color--base);
11317
- --pf-c-masthead--c-context-selector__toggle--BorderRightColor: var(--pf-c-masthead--item-border-color--base);
11318
- --pf-c-masthead--c-context-selector__toggle--BorderLeftColor: var(--pf-c-masthead--item-border-color--base);
11319
- --pf-c-masthead--c-context-selector--m-full-height__toggle--BorderTopColor: transparent;
11320
- --pf-c-masthead--c-context-selector--m-full-height__toggle--BorderBottomColor: transparent;
11321
- --pf-c-masthead--c-dropdown__toggle--before--BorderTopColor: var(--pf-c-masthead--item-border-color--base);
11322
- --pf-c-masthead--c-dropdown__toggle--before--BorderRightColor: var(--pf-c-masthead--item-border-color--base);
11323
- --pf-c-masthead--c-dropdown__toggle--before--BorderLeftColor: var(--pf-c-masthead--item-border-color--base);
11324
- --pf-c-masthead--c-dropdown--m-full-height__toggle--before--BorderTopColor: transparent;
11325
- --pf-c-masthead--c-dropdown--m-full-height__toggle--before--BorderBottomColor: transparent;
11326
- --pf-c-masthead--c-menu-toggle--before--BorderTopColor: var(--pf-c-masthead--item-border-color--base);
11327
- --pf-c-masthead--c-menu-toggle--before--BorderRightColor: var(--pf-c-masthead--item-border-color--base);
11328
- --pf-c-masthead--c-menu-toggle--before--BorderLeftColor: var(--pf-c-masthead--item-border-color--base);
11329
- --pf-c-masthead--c-menu-toggle--m-full-height--before--BorderTopColor: transparent;
11330
- --pf-c-masthead--c-menu-toggle--m-full-height--before--BorderBottomColor: transparent;
11331
- --pf-c-masthead--c-toolbar__content--PaddingRight: 0;
11332
- --pf-c-masthead--c-toolbar__content--PaddingLeft: 0;
11333
- --pf-c-masthead--c-toolbar__expandable-content--PaddingTop: var(--pf-global--spacer--md);
11334
- --pf-c-masthead--c-toolbar__expandable-content--PaddingRight: var(--pf-c-masthead--inset);
11335
- --pf-c-masthead--c-toolbar__expandable-content--PaddingBottom: var(--pf-global--spacer--md);
11336
- --pf-c-masthead--c-toolbar__expandable-content--PaddingLeft: var(--pf-c-masthead--inset);
11337
- --pf-c-masthead--c-toolbar__expandable-content--BorderTopWidth: var(--pf-global--BorderWidth--sm);
11338
- --pf-c-masthead--c-toolbar__expandable-content--BorderTopColor: var(--pf-c-masthead--item-border-color--base);
11333
+ .pf-c-masthead.pf-m-display-stack {
11339
11334
  --pf-c-masthead--GridTemplateColumns: var(--pf-c-masthead--m-display-stack--GridTemplateColumns);
11340
11335
  --pf-c-masthead__main--GridColumn: var(--pf-c-masthead--m-display-stack__main--GridColumn);
11341
11336
  --pf-c-masthead__main--MinHeight: var(--pf-c-masthead--m-display-stack__main--MinHeight);
@@ -11353,19 +11348,74 @@ ul.pf-c-list {
11353
11348
  --pf-c-masthead__content--MarginLeft: var(--pf-c-masthead--m-display-stack__content--MarginLeft);
11354
11349
  --pf-c-masthead__content--c-nav--m-horizontal--MarginRight: var(--pf-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginRight);
11355
11350
  --pf-c-masthead__content--c-nav--m-horizontal--MarginLeft: var(--pf-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginLeft);
11356
- color: var(--pf-global--Color--100);
11357
- position: relative;
11358
- display: grid;
11359
- grid-template-columns: var(--pf-c-masthead--GridTemplateColumns);
11360
- align-items: center;
11361
- min-width: 0;
11362
- padding-right: var(--pf-c-masthead--PaddingRight);
11363
- padding-left: var(--pf-c-masthead--PaddingLeft);
11364
- background-color: var(--pf-c-masthead--BackgroundColor);
11365
11351
  }
11366
11352
 
11367
- @media screen and (min-width: 768px) {
11368
- .pf-c-page:where(:not(.pf-m-resize-observer)) .pf-c-masthead {
11353
+ .pf-c-masthead.pf-m-display-inline {
11354
+ --pf-c-masthead--GridTemplateColumns: var(--pf-c-masthead--m-display-inline--GridTemplateColumns);
11355
+ --pf-c-masthead__main--GridColumn: var(--pf-c-masthead--m-display-inline__main--GridColumn);
11356
+ --pf-c-masthead__main--MinHeight: var(--pf-c-masthead--m-display-inline__main--MinHeight);
11357
+ --pf-c-masthead__main--Order: var(--pf-c-masthead--m-display-inline__main--Order);
11358
+ --pf-c-masthead__main--FlexBasis: var(--pf-c-masthead--m-display-inline__main--FlexBasis);
11359
+ --pf-c-masthead__main--PaddingTop: var(--pf-c-masthead--m-display-inline__main--PaddingTop);
11360
+ --pf-c-masthead__main--PaddingBottom: var(--pf-c-masthead--m-display-inline__main--PaddingBottom);
11361
+ --pf-c-masthead__main--MarginRight: var(--pf-c-masthead--m-display-inline__main--MarginRight);
11362
+ --pf-c-masthead__main--before--BorderBottom: var(--pf-c-masthead--m-display-inline__main--BorderBottom);
11363
+ --pf-c-masthead__content--GridColumn: var(--pf-c-masthead--m-display-inline__content--GridColumn);
11364
+ --pf-c-masthead__content--MinHeight: var(--pf-c-masthead--m-display-inline__content--MinHeight);
11365
+ --pf-c-masthead__content--Order: var(--pf-c-masthead--m-display-inline__content--Order);
11366
+ --pf-c-masthead__content--PaddingTop: var(--pf-c-masthead--m-display-inline__content--PaddingTop);
11367
+ --pf-c-masthead__content--PaddingBottom: var(--pf-c-masthead--m-display-inline__content--PaddingBottom);
11368
+ --pf-c-masthead__content--MarginLeft: var(--pf-c-masthead--m-display-inline__content--MarginLeft);
11369
+ --pf-c-masthead__content--c-nav--m-horizontal--MarginRight: var(--pf-c-masthead--m-display-inline__content--c-nav--m-horizontal--MarginRight);
11370
+ --pf-c-masthead__content--c-nav--m-horizontal--MarginLeft: var(--pf-c-masthead--m-display-inline__content--c-nav--m-horizontal--MarginLeft);
11371
+ }
11372
+
11373
+ .pf-c-masthead.pf-m-inset-none {
11374
+ --pf-c-masthead--inset: 0;
11375
+ }
11376
+
11377
+ .pf-c-masthead.pf-m-inset-sm {
11378
+ --pf-c-masthead--inset: var(--pf-global--spacer--sm);
11379
+ }
11380
+
11381
+ .pf-c-masthead.pf-m-inset-md {
11382
+ --pf-c-masthead--inset: var(--pf-global--spacer--md);
11383
+ }
11384
+
11385
+ .pf-c-masthead.pf-m-inset-lg {
11386
+ --pf-c-masthead--inset: var(--pf-global--spacer--lg);
11387
+ }
11388
+
11389
+ .pf-c-masthead.pf-m-inset-xl {
11390
+ --pf-c-masthead--inset: var(--pf-global--spacer--xl);
11391
+ }
11392
+
11393
+ .pf-c-masthead.pf-m-inset-2xl {
11394
+ --pf-c-masthead--inset: var(--pf-global--spacer--2xl);
11395
+ }
11396
+
11397
+ @media (min-width: 576px) {
11398
+ .pf-c-masthead.pf-m-display-stack-on-sm {
11399
+ --pf-c-masthead--GridTemplateColumns: var(--pf-c-masthead--m-display-stack--GridTemplateColumns);
11400
+ --pf-c-masthead__main--GridColumn: var(--pf-c-masthead--m-display-stack__main--GridColumn);
11401
+ --pf-c-masthead__main--MinHeight: var(--pf-c-masthead--m-display-stack__main--MinHeight);
11402
+ --pf-c-masthead__main--Order: var(--pf-c-masthead--m-display-stack__main--Order);
11403
+ --pf-c-masthead__main--FlexBasis: var(--pf-c-masthead--m-display-stack__main--FlexBasis);
11404
+ --pf-c-masthead__main--PaddingTop: var(--pf-c-masthead--m-display-stack__main--PaddingTop);
11405
+ --pf-c-masthead__main--PaddingBottom: var(--pf-c-masthead--m-display-stack__main--PaddingBottom);
11406
+ --pf-c-masthead__main--MarginRight: var(--pf-c-masthead--m-display-stack__main--MarginRight);
11407
+ --pf-c-masthead__main--before--BorderBottom: var(--pf-c-masthead--m-display-stack__main--before--BorderBottom);
11408
+ --pf-c-masthead__content--GridColumn: var(--pf-c-masthead--m-display-stack__content--GridColumn);
11409
+ --pf-c-masthead__content--MinHeight: var(--pf-c-masthead--m-display-stack__content--MinHeight);
11410
+ --pf-c-masthead__content--Order: var(--pf-c-masthead--m-display-stack__content--Order);
11411
+ --pf-c-masthead__content--PaddingTop: var(--pf-c-masthead--m-display-stack__content--PaddingTop);
11412
+ --pf-c-masthead__content--PaddingBottom: var(--pf-c-masthead--m-display-stack__content--PaddingBottom);
11413
+ --pf-c-masthead__content--MarginLeft: var(--pf-c-masthead--m-display-stack__content--MarginLeft);
11414
+ --pf-c-masthead__content--c-nav--m-horizontal--MarginRight: var(--pf-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginRight);
11415
+ --pf-c-masthead__content--c-nav--m-horizontal--MarginLeft: var(--pf-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginLeft);
11416
+ }
11417
+
11418
+ .pf-c-masthead.pf-m-display-inline-on-sm {
11369
11419
  --pf-c-masthead--GridTemplateColumns: var(--pf-c-masthead--m-display-inline--GridTemplateColumns);
11370
11420
  --pf-c-masthead__main--GridColumn: var(--pf-c-masthead--m-display-inline__main--GridColumn);
11371
11421
  --pf-c-masthead__main--MinHeight: var(--pf-c-masthead--m-display-inline__main--MinHeight);
@@ -11385,268 +11435,9 @@ ul.pf-c-list {
11385
11435
  --pf-c-masthead__content--c-nav--m-horizontal--MarginLeft: var(--pf-c-masthead--m-display-inline__content--c-nav--m-horizontal--MarginLeft);
11386
11436
  }
11387
11437
  }
11388
- @media screen and (min-width: 1200px) {
11389
- .pf-c-masthead {
11390
- --pf-c-masthead--inset: var(--pf-c-masthead--xl--inset);
11391
- }
11392
- }
11393
- .pf-c-masthead.pf-m-light {
11394
- color: var(--pf-global--Color--100);
11395
- --pf-c-masthead--BackgroundColor: var(--pf-c-masthead--m-light--BackgroundColor);
11396
- --pf-c-masthead__main--BorderBottomColor: var(--pf-c-masthead--m-light__main--BorderBottomColor);
11397
- }
11398
-
11399
- .pf-c-masthead.pf-m-light-200 {
11400
- color: var(--pf-global--Color--100);
11401
- --pf-c-masthead--BackgroundColor: var(--pf-c-masthead--m-light-200--BackgroundColor);
11402
- --pf-c-masthead__main--BorderBottomColor: var(--pf-c-masthead--m-light-200__main--BorderBottomColor);
11403
- }
11404
-
11405
- .pf-c-masthead .pf-c-toolbar {
11406
- --pf-c-toolbar__content--PaddingRight: var(--pf-c-masthead--c-toolbar__content--PaddingRight);
11407
- --pf-c-toolbar__content--PaddingLeft: var(--pf-c-masthead--c-toolbar__content--PaddingLeft);
11408
- --pf-c-toolbar__expandable-content--PaddingTop: var(--pf-c-masthead--c-toolbar__expandable-content--PaddingTop);
11409
- --pf-c-toolbar__expandable-content--PaddingRight: var(--pf-c-masthead--c-toolbar__expandable-content--PaddingRight);
11410
- --pf-c-toolbar__expandable-content--PaddingBottom: var(--pf-c-masthead--c-toolbar__expandable-content--PaddingBottom);
11411
- --pf-c-toolbar__expandable-content--PaddingLeft: var(--pf-c-masthead--c-toolbar__expandable-content--PaddingLeft);
11412
- width: 100%;
11413
- }
11414
-
11415
- .pf-c-masthead .pf-c-toolbar__content-section {
11416
- flex-wrap: nowrap;
11417
- }
11418
-
11419
- .pf-c-masthead .pf-c-toolbar__expandable-content {
11420
- border-top: var(--pf-c-masthead--c-toolbar__expandable-content--BorderTopWidth) solid var(--pf-c-masthead--c-toolbar__expandable-content--BorderTopColor);
11421
- }
11422
-
11423
- .pf-c-masthead .pf-c-menu-toggle {
11424
- --pf-c-menu-toggle--before--BorderTopColor: var(--pf-c-masthead--c-menu-toggle--before--BorderTopColor);
11425
- --pf-c-menu-toggle--before--BorderRightColor: var(--pf-c-masthead--c-menu-toggle--before--BorderRightColor);
11426
- --pf-c-menu-toggle--before--BorderLeftColor: var(--pf-c-masthead--c-menu-toggle--before--BorderLeftColor);
11427
- }
11428
-
11429
- .pf-c-masthead .pf-c-menu-toggle.pf-m-full-height {
11430
- --pf-c-menu-toggle--before--BorderTopColor: var(--pf-c-masthead--c-menu-toggle--m-full-height--before--BorderTopColor);
11431
- --pf-c-menu-toggle--before--BorderBottomColor: var(--pf-c-masthead--c-menu-toggle--m-full-height--before--BorderBottomColor);
11432
- }
11433
-
11434
- .pf-c-masthead .pf-c-context-selector {
11435
- --pf-c-context-selector--Width: var(--pf-c-masthead--c-context-selector--Width);
11436
- --pf-c-context-selector__toggle--BorderTopColor: var(--pf-c-masthead--c-context-selector__toggle--BorderTopColor);
11437
- --pf-c-context-selector__toggle--BorderRightColor: var(--pf-c-masthead--c-context-selector__toggle--BorderRightColor);
11438
- --pf-c-context-selector__toggle--BorderLeftColor: var(--pf-c-masthead--c-context-selector__toggle--BorderLeftColor);
11439
- }
11440
-
11441
- .pf-c-masthead .pf-c-context-selector.pf-m-full-height {
11442
- --pf-c-context-selector__toggle--BorderTopColor: var(--pf-c-masthead--c-context-selector--m-full-height__toggle--BorderTopColor);
11443
- --pf-c-context-selector__toggle--BorderBottomColor: var(--pf-c-masthead--c-context-selector--m-full-height__toggle--BorderBottomColor);
11444
- }
11445
-
11446
- .pf-c-masthead .pf-c-dropdown {
11447
- --pf-c-dropdown__toggle--before--BorderTopColor: var(--pf-c-masthead--c-dropdown__toggle--before--BorderTopColor);
11448
- --pf-c-dropdown__toggle--before--BorderRightColor: var(--pf-c-masthead--c-dropdown__toggle--before--BorderRightColor);
11449
- --pf-c-dropdown__toggle--before--BorderLeftColor: var(--pf-c-masthead--c-dropdown__toggle--before--BorderLeftColor);
11450
- }
11451
-
11452
- .pf-c-masthead .pf-c-dropdown.pf-m-full-height {
11453
- --pf-c-dropdown__toggle--before--BorderTopColor: var(--pf-c-masthead--c-dropdown--m-full-height__toggle--before--BorderTopColor);
11454
- --pf-c-dropdown__toggle--before--BorderBottomColor: var(--pf-c-masthead--c-dropdown--m-full-height__toggle--before--BorderBottomColor);
11455
- }
11456
-
11457
- .pf-c-masthead .pf-c-nav {
11458
- align-self: stretch;
11459
- }
11460
-
11461
- .pf-c-masthead .pf-c-button.pf-m-plain {
11462
- color: var(--pf-c-button--m-plain--Color);
11463
- }
11464
-
11465
- .pf-c-masthead__main {
11466
- position: relative;
11467
- display: flex;
11468
- flex-basis: var(--pf-c-masthead__main--FlexBasis);
11469
- align-items: center;
11470
- align-self: stretch;
11471
- order: var(--pf-c-masthead__main--Order);
11472
- min-height: var(--pf-c-masthead__main--MinHeight);
11473
- padding-top: var(--pf-c-masthead__main--PaddingTop);
11474
- padding-bottom: var(--pf-c-masthead__main--PaddingBottom);
11475
- margin-right: var(--pf-c-masthead__main--MarginRight);
11476
- grid-column: var(--pf-c-masthead__main--GridColumn);
11477
- }
11478
-
11479
- .pf-c-masthead__main::before {
11480
- position: absolute;
11481
- right: var(--pf-c-masthead__main--before--Right);
11482
- bottom: 0;
11483
- left: var(--pf-c-masthead__main--before--Left);
11484
- content: "";
11485
- border-bottom: var(--pf-c-masthead__main--before--BorderBottom);
11486
- }
11487
-
11488
- .pf-c-masthead__main:last-child {
11489
- --pf-c-masthead__main--MarginRight: 0;
11490
- }
11491
-
11492
- .pf-c-masthead__content {
11493
- display: flex;
11494
- flex-grow: 1;
11495
- align-items: center;
11496
- align-self: stretch;
11497
- order: var(--pf-c-masthead__content--Order);
11498
- min-height: var(--pf-c-masthead__content--MinHeight);
11499
- padding-top: var(--pf-c-masthead__content--PaddingTop);
11500
- padding-bottom: var(--pf-c-masthead__content--PaddingBottom);
11501
- margin-left: var(--pf-c-masthead__content--MarginLeft);
11502
- grid-column: var(--pf-c-masthead__content--GridColumn);
11503
- grid-column-end: -1;
11504
- flex-shrink: 1;
11505
- }
11506
-
11507
- .pf-c-masthead__content:only-child {
11508
- --pf-c-masthead__content--MarginLeft: 0;
11509
- }
11510
-
11511
- .pf-c-masthead__content .pf-c-nav.pf-m-horizontal {
11512
- margin-right: var(--pf-c-masthead__content--c-nav--m-horizontal--MarginRight);
11513
- margin-left: var(--pf-c-masthead__content--c-nav--m-horizontal--MarginLeft);
11514
- }
11515
-
11516
- .pf-c-masthead__toggle ~ .pf-c-masthead__content {
11517
- --pf-c-masthead__content--c-nav--m-horizontal--MarginLeft: calc(var(--pf-c-masthead__content--MarginLeft) * -1);
11518
- }
11519
-
11520
- .pf-c-masthead__main,
11521
- .pf-c-masthead__brand,
11522
- .pf-c-masthead__content {
11523
- min-width: 0;
11524
- }
11525
-
11526
- .pf-c-masthead__brand {
11527
- display: inline-flex;
11528
- align-self: center;
11529
- }
11530
-
11531
- .pf-c-masthead__toggle {
11532
- grid-column: var(--pf-c-masthead__toggle--GridColumn);
11533
- align-self: center;
11534
- margin-right: var(--pf-c-masthead__toggle--MarginRight);
11535
- margin-left: var(--pf-c-masthead__toggle--MarginLeft);
11536
- }
11537
-
11538
- .pf-c-masthead__toggle .pf-c-button {
11539
- --pf-c-button--FontSize: var(--pf-c-masthead__toggle--c-button--FontSize);
11540
- }
11541
-
11542
- .pf-c-masthead.pf-m-display-stack {
11543
- --pf-c-masthead--GridTemplateColumns: var(--pf-c-masthead--m-display-stack--GridTemplateColumns);
11544
- --pf-c-masthead__main--GridColumn: var(--pf-c-masthead--m-display-stack__main--GridColumn);
11545
- --pf-c-masthead__main--MinHeight: var(--pf-c-masthead--m-display-stack__main--MinHeight);
11546
- --pf-c-masthead__main--Order: var(--pf-c-masthead--m-display-stack__main--Order);
11547
- --pf-c-masthead__main--FlexBasis: var(--pf-c-masthead--m-display-stack__main--FlexBasis);
11548
- --pf-c-masthead__main--PaddingTop: var(--pf-c-masthead--m-display-stack__main--PaddingTop);
11549
- --pf-c-masthead__main--PaddingBottom: var(--pf-c-masthead--m-display-stack__main--PaddingBottom);
11550
- --pf-c-masthead__main--MarginRight: var(--pf-c-masthead--m-display-stack__main--MarginRight);
11551
- --pf-c-masthead__main--before--BorderBottom: var(--pf-c-masthead--m-display-stack__main--before--BorderBottom);
11552
- --pf-c-masthead__content--GridColumn: var(--pf-c-masthead--m-display-stack__content--GridColumn);
11553
- --pf-c-masthead__content--MinHeight: var(--pf-c-masthead--m-display-stack__content--MinHeight);
11554
- --pf-c-masthead__content--Order: var(--pf-c-masthead--m-display-stack__content--Order);
11555
- --pf-c-masthead__content--PaddingTop: var(--pf-c-masthead--m-display-stack__content--PaddingTop);
11556
- --pf-c-masthead__content--PaddingBottom: var(--pf-c-masthead--m-display-stack__content--PaddingBottom);
11557
- --pf-c-masthead__content--MarginLeft: var(--pf-c-masthead--m-display-stack__content--MarginLeft);
11558
- --pf-c-masthead__content--c-nav--m-horizontal--MarginRight: var(--pf-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginRight);
11559
- --pf-c-masthead__content--c-nav--m-horizontal--MarginLeft: var(--pf-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginLeft);
11560
- }
11561
-
11562
- .pf-c-masthead.pf-m-display-inline {
11563
- --pf-c-masthead--GridTemplateColumns: var(--pf-c-masthead--m-display-inline--GridTemplateColumns);
11564
- --pf-c-masthead__main--GridColumn: var(--pf-c-masthead--m-display-inline__main--GridColumn);
11565
- --pf-c-masthead__main--MinHeight: var(--pf-c-masthead--m-display-inline__main--MinHeight);
11566
- --pf-c-masthead__main--Order: var(--pf-c-masthead--m-display-inline__main--Order);
11567
- --pf-c-masthead__main--FlexBasis: var(--pf-c-masthead--m-display-inline__main--FlexBasis);
11568
- --pf-c-masthead__main--PaddingTop: var(--pf-c-masthead--m-display-inline__main--PaddingTop);
11569
- --pf-c-masthead__main--PaddingBottom: var(--pf-c-masthead--m-display-inline__main--PaddingBottom);
11570
- --pf-c-masthead__main--MarginRight: var(--pf-c-masthead--m-display-inline__main--MarginRight);
11571
- --pf-c-masthead__main--before--BorderBottom: var(--pf-c-masthead--m-display-inline__main--BorderBottom);
11572
- --pf-c-masthead__content--GridColumn: var(--pf-c-masthead--m-display-inline__content--GridColumn);
11573
- --pf-c-masthead__content--MinHeight: var(--pf-c-masthead--m-display-inline__content--MinHeight);
11574
- --pf-c-masthead__content--Order: var(--pf-c-masthead--m-display-inline__content--Order);
11575
- --pf-c-masthead__content--PaddingTop: var(--pf-c-masthead--m-display-inline__content--PaddingTop);
11576
- --pf-c-masthead__content--PaddingBottom: var(--pf-c-masthead--m-display-inline__content--PaddingBottom);
11577
- --pf-c-masthead__content--MarginLeft: var(--pf-c-masthead--m-display-inline__content--MarginLeft);
11578
- --pf-c-masthead__content--c-nav--m-horizontal--MarginRight: var(--pf-c-masthead--m-display-inline__content--c-nav--m-horizontal--MarginRight);
11579
- --pf-c-masthead__content--c-nav--m-horizontal--MarginLeft: var(--pf-c-masthead--m-display-inline__content--c-nav--m-horizontal--MarginLeft);
11580
- }
11581
-
11582
- .pf-c-masthead.pf-m-inset-none {
11583
- --pf-c-masthead--inset: 0;
11584
- }
11585
-
11586
- .pf-c-masthead.pf-m-inset-sm {
11587
- --pf-c-masthead--inset: var(--pf-global--spacer--sm);
11588
- }
11589
-
11590
- .pf-c-masthead.pf-m-inset-md {
11591
- --pf-c-masthead--inset: var(--pf-global--spacer--md);
11592
- }
11593
-
11594
- .pf-c-masthead.pf-m-inset-lg {
11595
- --pf-c-masthead--inset: var(--pf-global--spacer--lg);
11596
- }
11597
-
11598
- .pf-c-masthead.pf-m-inset-xl {
11599
- --pf-c-masthead--inset: var(--pf-global--spacer--xl);
11600
- }
11601
-
11602
- .pf-c-masthead.pf-m-inset-2xl {
11603
- --pf-c-masthead--inset: var(--pf-global--spacer--2xl);
11604
- }
11605
-
11606
- @media (min-width: 576px) {
11607
- .pf-c-masthead.pf-m-display-stack-on-sm {
11608
- --pf-c-masthead--GridTemplateColumns: var(--pf-c-masthead--m-display-stack--GridTemplateColumns);
11609
- --pf-c-masthead__main--GridColumn: var(--pf-c-masthead--m-display-stack__main--GridColumn);
11610
- --pf-c-masthead__main--MinHeight: var(--pf-c-masthead--m-display-stack__main--MinHeight);
11611
- --pf-c-masthead__main--Order: var(--pf-c-masthead--m-display-stack__main--Order);
11612
- --pf-c-masthead__main--FlexBasis: var(--pf-c-masthead--m-display-stack__main--FlexBasis);
11613
- --pf-c-masthead__main--PaddingTop: var(--pf-c-masthead--m-display-stack__main--PaddingTop);
11614
- --pf-c-masthead__main--PaddingBottom: var(--pf-c-masthead--m-display-stack__main--PaddingBottom);
11615
- --pf-c-masthead__main--MarginRight: var(--pf-c-masthead--m-display-stack__main--MarginRight);
11616
- --pf-c-masthead__main--before--BorderBottom: var(--pf-c-masthead--m-display-stack__main--before--BorderBottom);
11617
- --pf-c-masthead__content--GridColumn: var(--pf-c-masthead--m-display-stack__content--GridColumn);
11618
- --pf-c-masthead__content--MinHeight: var(--pf-c-masthead--m-display-stack__content--MinHeight);
11619
- --pf-c-masthead__content--Order: var(--pf-c-masthead--m-display-stack__content--Order);
11620
- --pf-c-masthead__content--PaddingTop: var(--pf-c-masthead--m-display-stack__content--PaddingTop);
11621
- --pf-c-masthead__content--PaddingBottom: var(--pf-c-masthead--m-display-stack__content--PaddingBottom);
11622
- --pf-c-masthead__content--MarginLeft: var(--pf-c-masthead--m-display-stack__content--MarginLeft);
11623
- --pf-c-masthead__content--c-nav--m-horizontal--MarginRight: var(--pf-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginRight);
11624
- --pf-c-masthead__content--c-nav--m-horizontal--MarginLeft: var(--pf-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginLeft);
11625
- }
11626
-
11627
- .pf-c-masthead.pf-m-display-inline-on-sm {
11628
- --pf-c-masthead--GridTemplateColumns: var(--pf-c-masthead--m-display-inline--GridTemplateColumns);
11629
- --pf-c-masthead__main--GridColumn: var(--pf-c-masthead--m-display-inline__main--GridColumn);
11630
- --pf-c-masthead__main--MinHeight: var(--pf-c-masthead--m-display-inline__main--MinHeight);
11631
- --pf-c-masthead__main--Order: var(--pf-c-masthead--m-display-inline__main--Order);
11632
- --pf-c-masthead__main--FlexBasis: var(--pf-c-masthead--m-display-inline__main--FlexBasis);
11633
- --pf-c-masthead__main--PaddingTop: var(--pf-c-masthead--m-display-inline__main--PaddingTop);
11634
- --pf-c-masthead__main--PaddingBottom: var(--pf-c-masthead--m-display-inline__main--PaddingBottom);
11635
- --pf-c-masthead__main--MarginRight: var(--pf-c-masthead--m-display-inline__main--MarginRight);
11636
- --pf-c-masthead__main--before--BorderBottom: var(--pf-c-masthead--m-display-inline__main--BorderBottom);
11637
- --pf-c-masthead__content--GridColumn: var(--pf-c-masthead--m-display-inline__content--GridColumn);
11638
- --pf-c-masthead__content--MinHeight: var(--pf-c-masthead--m-display-inline__content--MinHeight);
11639
- --pf-c-masthead__content--Order: var(--pf-c-masthead--m-display-inline__content--Order);
11640
- --pf-c-masthead__content--PaddingTop: var(--pf-c-masthead--m-display-inline__content--PaddingTop);
11641
- --pf-c-masthead__content--PaddingBottom: var(--pf-c-masthead--m-display-inline__content--PaddingBottom);
11642
- --pf-c-masthead__content--MarginLeft: var(--pf-c-masthead--m-display-inline__content--MarginLeft);
11643
- --pf-c-masthead__content--c-nav--m-horizontal--MarginRight: var(--pf-c-masthead--m-display-inline__content--c-nav--m-horizontal--MarginRight);
11644
- --pf-c-masthead__content--c-nav--m-horizontal--MarginLeft: var(--pf-c-masthead--m-display-inline__content--c-nav--m-horizontal--MarginLeft);
11645
- }
11646
- }
11647
- @media (min-width: 576px) {
11648
- .pf-c-masthead.pf-m-inset-none-on-sm {
11649
- --pf-c-masthead--inset: 0;
11438
+ @media (min-width: 576px) {
11439
+ .pf-c-masthead.pf-m-inset-none-on-sm {
11440
+ --pf-c-masthead--inset: 0;
11650
11441
  }
11651
11442
 
11652
11443
  .pf-c-masthead.pf-m-inset-sm-on-sm {
@@ -11842,98 +11633,446 @@ ul.pf-c-list {
11842
11633
  --pf-c-masthead__content--c-nav--m-horizontal--MarginLeft: var(--pf-c-masthead--m-display-inline__content--c-nav--m-horizontal--MarginLeft);
11843
11634
  }
11844
11635
  }
11845
- @media (min-width: 1200px) {
11846
- .pf-c-masthead.pf-m-inset-none-on-xl {
11847
- --pf-c-masthead--inset: 0;
11848
- }
11636
+ @media (min-width: 1200px) {
11637
+ .pf-c-masthead.pf-m-inset-none-on-xl {
11638
+ --pf-c-masthead--inset: 0;
11639
+ }
11640
+
11641
+ .pf-c-masthead.pf-m-inset-sm-on-xl {
11642
+ --pf-c-masthead--inset: var(--pf-global--spacer--sm);
11643
+ }
11644
+
11645
+ .pf-c-masthead.pf-m-inset-md-on-xl {
11646
+ --pf-c-masthead--inset: var(--pf-global--spacer--md);
11647
+ }
11648
+
11649
+ .pf-c-masthead.pf-m-inset-lg-on-xl {
11650
+ --pf-c-masthead--inset: var(--pf-global--spacer--lg);
11651
+ }
11652
+
11653
+ .pf-c-masthead.pf-m-inset-xl-on-xl {
11654
+ --pf-c-masthead--inset: var(--pf-global--spacer--xl);
11655
+ }
11656
+
11657
+ .pf-c-masthead.pf-m-inset-2xl-on-xl {
11658
+ --pf-c-masthead--inset: var(--pf-global--spacer--2xl);
11659
+ }
11660
+ }
11661
+ @media (min-width: 1450px) {
11662
+ .pf-c-masthead.pf-m-display-stack-on-2xl {
11663
+ --pf-c-masthead--GridTemplateColumns: var(--pf-c-masthead--m-display-stack--GridTemplateColumns);
11664
+ --pf-c-masthead__main--GridColumn: var(--pf-c-masthead--m-display-stack__main--GridColumn);
11665
+ --pf-c-masthead__main--MinHeight: var(--pf-c-masthead--m-display-stack__main--MinHeight);
11666
+ --pf-c-masthead__main--Order: var(--pf-c-masthead--m-display-stack__main--Order);
11667
+ --pf-c-masthead__main--FlexBasis: var(--pf-c-masthead--m-display-stack__main--FlexBasis);
11668
+ --pf-c-masthead__main--PaddingTop: var(--pf-c-masthead--m-display-stack__main--PaddingTop);
11669
+ --pf-c-masthead__main--PaddingBottom: var(--pf-c-masthead--m-display-stack__main--PaddingBottom);
11670
+ --pf-c-masthead__main--MarginRight: var(--pf-c-masthead--m-display-stack__main--MarginRight);
11671
+ --pf-c-masthead__main--before--BorderBottom: var(--pf-c-masthead--m-display-stack__main--before--BorderBottom);
11672
+ --pf-c-masthead__content--GridColumn: var(--pf-c-masthead--m-display-stack__content--GridColumn);
11673
+ --pf-c-masthead__content--MinHeight: var(--pf-c-masthead--m-display-stack__content--MinHeight);
11674
+ --pf-c-masthead__content--Order: var(--pf-c-masthead--m-display-stack__content--Order);
11675
+ --pf-c-masthead__content--PaddingTop: var(--pf-c-masthead--m-display-stack__content--PaddingTop);
11676
+ --pf-c-masthead__content--PaddingBottom: var(--pf-c-masthead--m-display-stack__content--PaddingBottom);
11677
+ --pf-c-masthead__content--MarginLeft: var(--pf-c-masthead--m-display-stack__content--MarginLeft);
11678
+ --pf-c-masthead__content--c-nav--m-horizontal--MarginRight: var(--pf-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginRight);
11679
+ --pf-c-masthead__content--c-nav--m-horizontal--MarginLeft: var(--pf-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginLeft);
11680
+ }
11681
+
11682
+ .pf-c-masthead.pf-m-display-inline-on-2xl {
11683
+ --pf-c-masthead--GridTemplateColumns: var(--pf-c-masthead--m-display-inline--GridTemplateColumns);
11684
+ --pf-c-masthead__main--GridColumn: var(--pf-c-masthead--m-display-inline__main--GridColumn);
11685
+ --pf-c-masthead__main--MinHeight: var(--pf-c-masthead--m-display-inline__main--MinHeight);
11686
+ --pf-c-masthead__main--Order: var(--pf-c-masthead--m-display-inline__main--Order);
11687
+ --pf-c-masthead__main--FlexBasis: var(--pf-c-masthead--m-display-inline__main--FlexBasis);
11688
+ --pf-c-masthead__main--PaddingTop: var(--pf-c-masthead--m-display-inline__main--PaddingTop);
11689
+ --pf-c-masthead__main--PaddingBottom: var(--pf-c-masthead--m-display-inline__main--PaddingBottom);
11690
+ --pf-c-masthead__main--MarginRight: var(--pf-c-masthead--m-display-inline__main--MarginRight);
11691
+ --pf-c-masthead__main--before--BorderBottom: var(--pf-c-masthead--m-display-inline__main--BorderBottom);
11692
+ --pf-c-masthead__content--GridColumn: var(--pf-c-masthead--m-display-inline__content--GridColumn);
11693
+ --pf-c-masthead__content--MinHeight: var(--pf-c-masthead--m-display-inline__content--MinHeight);
11694
+ --pf-c-masthead__content--Order: var(--pf-c-masthead--m-display-inline__content--Order);
11695
+ --pf-c-masthead__content--PaddingTop: var(--pf-c-masthead--m-display-inline__content--PaddingTop);
11696
+ --pf-c-masthead__content--PaddingBottom: var(--pf-c-masthead--m-display-inline__content--PaddingBottom);
11697
+ --pf-c-masthead__content--MarginLeft: var(--pf-c-masthead--m-display-inline__content--MarginLeft);
11698
+ --pf-c-masthead__content--c-nav--m-horizontal--MarginRight: var(--pf-c-masthead--m-display-inline__content--c-nav--m-horizontal--MarginRight);
11699
+ --pf-c-masthead__content--c-nav--m-horizontal--MarginLeft: var(--pf-c-masthead--m-display-inline__content--c-nav--m-horizontal--MarginLeft);
11700
+ }
11701
+ }
11702
+ @media (min-width: 1450px) {
11703
+ .pf-c-masthead.pf-m-inset-none-on-2xl {
11704
+ --pf-c-masthead--inset: 0;
11705
+ }
11706
+
11707
+ .pf-c-masthead.pf-m-inset-sm-on-2xl {
11708
+ --pf-c-masthead--inset: var(--pf-global--spacer--sm);
11709
+ }
11710
+
11711
+ .pf-c-masthead.pf-m-inset-md-on-2xl {
11712
+ --pf-c-masthead--inset: var(--pf-global--spacer--md);
11713
+ }
11714
+
11715
+ .pf-c-masthead.pf-m-inset-lg-on-2xl {
11716
+ --pf-c-masthead--inset: var(--pf-global--spacer--lg);
11717
+ }
11718
+
11719
+ .pf-c-masthead.pf-m-inset-xl-on-2xl {
11720
+ --pf-c-masthead--inset: var(--pf-global--spacer--xl);
11721
+ }
11722
+
11723
+ .pf-c-masthead.pf-m-inset-2xl-on-2xl {
11724
+ --pf-c-masthead--inset: var(--pf-global--spacer--2xl);
11725
+ }
11726
+ }
11727
+ :where(.pf-theme-dark) .pf-c-masthead {
11728
+ --pf-global--Color--100: #e0e0e0;
11729
+ --pf-global--Color--200: #aaabac;
11730
+ --pf-global--BorderColor--100: #444548;
11731
+ --pf-global--primary-color--100: #1fa7f8;
11732
+ --pf-global--link--Color: #1fa7f8;
11733
+ --pf-global--link--Color--hover: #73bcf7;
11734
+ --pf-global--BackgroundColor--100: #1b1d21;
11735
+ }
11736
+
11737
+ :where(.pf-theme-dark) .pf-c-masthead .pf-c-card {
11738
+ --pf-c-card--BackgroundColor: var(--pf-global--BackgroundColor--100);
11739
+ }
11740
+
11741
+ :where(.pf-theme-dark) .pf-c-masthead .pf-c-button {
11742
+ --pf-c-button--m-primary--Color: var(--pf-global--Color--light-100);
11743
+ --pf-c-button--m-primary--hover--Color: var(--pf-global--Color--light-100);
11744
+ --pf-c-button--m-primary--focus--Color: var(--pf-global--Color--light-100);
11745
+ --pf-c-button--m-primary--active--Color: var(--pf-global--Color--light-100);
11746
+ --pf-c-button--m-primary--BackgroundColor: var(--pf-global--primary-color--300);
11747
+ --pf-c-button--m-primary--hover--BackgroundColor: var(--pf-global--primary-color--200);
11748
+ --pf-c-button--m-primary--focus--BackgroundColor: var(--pf-global--primary-color--200);
11749
+ --pf-c-button--m-primary--active--BackgroundColor: var(--pf-global--primary-color--200);
11750
+ --pf-c-button--m-secondary--Color: var(--pf-global--primary-color--100);
11751
+ --pf-c-button--m-secondary--hover--Color: var(--pf-global--primary-color--100);
11752
+ --pf-c-button--m-secondary--focus--Color: var(--pf-global--primary-color--100);
11753
+ --pf-c-button--m-secondary--active--Color: var(--pf-global--primary-color--100);
11754
+ }
11755
+
11756
+ :where(.pf-theme-dark) .pf-c-masthead {
11757
+ --pf-c-masthead--BackgroundColor: var(--pf-global--palette--black-1000);
11758
+ color: var(--pf-global--Color--100);
11759
+ }
11760
+
11761
+ :where(.pf-theme-dark) .pf-c-masthead .pf-c-toolbar {
11762
+ --pf-c-toolbar--BackgroundColor: var(--pf-global--palette--black-1000);
11763
+ }
11764
+
11765
+ .pf-c-login__footer, .pf-c-login__header {
11766
+ --pf-global--Color--100: var(--pf-global--Color--light-100);
11767
+ --pf-global--Color--200: var(--pf-global--Color--light-200);
11768
+ --pf-global--BorderColor--100: var(--pf-global--BorderColor--light-100);
11769
+ --pf-global--primary-color--100: var(--pf-global--primary-color--light-100);
11770
+ --pf-global--link--Color: var(--pf-global--link--Color--light);
11771
+ --pf-global--link--Color--hover: var(--pf-global--link--Color--light);
11772
+ --pf-global--BackgroundColor--100: var(--pf-global--BackgroundColor--dark-100);
11773
+ }
11774
+
11775
+ .pf-c-login__footer .pf-c-card, .pf-c-login__header .pf-c-card {
11776
+ --pf-c-card--BackgroundColor: var(--pf-global--BackgroundColor--dark-transparent-200);
11777
+ }
11778
+
11779
+ .pf-c-login__footer .pf-c-button, .pf-c-login__header .pf-c-button {
11780
+ --pf-c-button--m-primary--Color: var(--pf-global--primary-color--dark-100);
11781
+ --pf-c-button--m-primary--hover--Color: var(--pf-global--primary-color--dark-100);
11782
+ --pf-c-button--m-primary--focus--Color: var(--pf-global--primary-color--dark-100);
11783
+ --pf-c-button--m-primary--active--Color: var(--pf-global--primary-color--dark-100);
11784
+ --pf-c-button--m-primary--BackgroundColor: var(--pf-global--BackgroundColor--light-100);
11785
+ --pf-c-button--m-primary--hover--BackgroundColor: var(--pf-global--BackgroundColor--light-300);
11786
+ --pf-c-button--m-primary--focus--BackgroundColor: var(--pf-global--BackgroundColor--light-300);
11787
+ --pf-c-button--m-primary--active--BackgroundColor: var(--pf-global--BackgroundColor--light-300);
11788
+ --pf-c-button--m-secondary--Color: var(--pf-global--Color--light-100);
11789
+ --pf-c-button--m-secondary--hover--Color: var(--pf-global--Color--light-100);
11790
+ --pf-c-button--m-secondary--focus--Color: var(--pf-global--Color--light-100);
11791
+ --pf-c-button--m-secondary--active--Color: var(--pf-global--Color--light-100);
11792
+ --pf-c-button--m-secondary--BorderColor: var(--pf-global--Color--light-100);
11793
+ --pf-c-button--m-secondary--hover--BorderColor: var(--pf-global--Color--light-100);
11794
+ --pf-c-button--m-secondary--focus--BorderColor: var(--pf-global--Color--light-100);
11795
+ --pf-c-button--m-secondary--active--BorderColor: var(--pf-global--Color--light-100);
11796
+ }
11797
+
11798
+ .pf-c-login {
11799
+ --pf-c-login--PaddingTop: var(--pf-global--spacer--lg);
11800
+ --pf-c-login--PaddingBottom: var(--pf-global--spacer--lg);
11801
+ --pf-c-login--xl--BackgroundImage: none;
11802
+ --pf-c-login__container--xl--GridColumnGap: var(--pf-global--spacer--3xl);
11803
+ --pf-c-login__container--MaxWidth: 31.25rem;
11804
+ --pf-c-login__container--xl--MaxWidth: none;
11805
+ --pf-c-login__container--PaddingLeft: 6.125rem;
11806
+ --pf-c-login__container--PaddingRight: 6.125rem;
11807
+ --pf-c-login__container--xl--GridTemplateColumns: 34rem minmax(auto, 34rem);
11808
+ --pf-c-login__header--MarginBottom: var(--pf-global--spacer--md);
11809
+ --pf-c-login__header--PaddingLeft: var(--pf-global--spacer--md);
11810
+ --pf-c-login__header--PaddingRight: var(--pf-global--spacer--md);
11811
+ --pf-c-login__header--xl--MarginBottom: var(--pf-global--spacer--2xl);
11812
+ --pf-c-login__header--xl--MarginTop: var(--pf-global--spacer--3xl);
11813
+ --pf-c-login__header--c-brand--MarginBottom: var(--pf-global--spacer--lg);
11814
+ --pf-c-login__header--c-brand--xl--MarginBottom: var(--pf-global--spacer--2xl);
11815
+ --pf-c-login__main--BackgroundColor: var(--pf-global--BackgroundColor--light-100);
11816
+ --pf-c-login__main--MarginBottom: var(--pf-global--spacer--lg);
11817
+ --pf-c-login__main-header--PaddingTop: var(--pf-global--spacer--2xl);
11818
+ --pf-c-login__main-header--PaddingRight: var(--pf-global--spacer--xl);
11819
+ --pf-c-login__main-header--PaddingBottom: var(--pf-global--spacer--md);
11820
+ --pf-c-login__main-header--PaddingLeft: var(--pf-global--spacer--xl);
11821
+ --pf-c-login__main-header--md--PaddingRight: var(--pf-global--spacer--2xl);
11822
+ --pf-c-login__main-header--md--PaddingLeft: var(--pf-global--spacer--2xl);
11823
+ --pf-c-login__main-header--ColumnGap: var(--pf-global--spacer--md);
11824
+ --pf-c-login__main-header--RowGap: var(--pf-global--spacer--md);
11825
+ --pf-c-login__main-header-desc--MarginBottom: var(--pf-global--spacer--sm);
11826
+ --pf-c-login__main-header-desc--md--MarginBottom: 0;
11827
+ --pf-c-login__main-header-desc--FontSize: var(--pf-global--FontSize--sm);
11828
+ --pf-c-login__main-body--PaddingRight: var(--pf-global--spacer--xl);
11829
+ --pf-c-login__main-body--PaddingBottom: var(--pf-global--spacer--xl);
11830
+ --pf-c-login__main-body--PaddingLeft: var(--pf-global--spacer--xl);
11831
+ --pf-c-login__main-body--md--PaddingRight: var(--pf-global--spacer--2xl);
11832
+ --pf-c-login__main-body--md--PaddingLeft: var(--pf-global--spacer--2xl);
11833
+ --pf-c-login__main-footer--PaddingBottom: var(--pf-global--spacer--3xl);
11834
+ --pf-c-login__main-footer--c-title--MarginBottom: var(--pf-global--spacer--md);
11835
+ --pf-c-login__main-footer-links--PaddingTop: var(--pf-global--spacer--sm);
11836
+ --pf-c-login__main-footer-links--PaddingRight: var(--pf-global--spacer--3xl);
11837
+ --pf-c-login__main-footer-links--PaddingBottom: var(--pf-global--spacer--xl);
11838
+ --pf-c-login__main-footer-links--PaddingLeft: var(--pf-global--spacer--3xl);
11839
+ --pf-c-login__main-footer-links-item--PaddingRight: var(--pf-global--spacer--md);
11840
+ --pf-c-login__main-footer-links-item--PaddingLeft: var(--pf-global--spacer--md);
11841
+ --pf-c-login__main-footer-links-item--MarginBottom: var(--pf-global--spacer--sm);
11842
+ --pf-c-login__main-footer-links-item-link-svg--Fill: var(--pf-global--icon--Color--light);
11843
+ --pf-c-login__main-footer-links-item-link-svg--Width: var(--pf-global--icon--FontSize--lg);
11844
+ --pf-c-login__main-footer-links-item-link-svg--Height: var(--pf-global--icon--FontSize--lg);
11845
+ --pf-c-login__main-footer-links-item-link-svg--hover--Fill: var(--pf-global--icon--Color--dark);
11846
+ --pf-c-login__main-footer-band--PaddingTop: var(--pf-global--spacer--lg);
11847
+ --pf-c-login__main-footer-band--PaddingRight: var(--pf-global--spacer--md);
11848
+ --pf-c-login__main-footer-band--PaddingBottom: var(--pf-global--spacer--lg);
11849
+ --pf-c-login__main-footer-band--PaddingLeft: var(--pf-global--spacer--md);
11850
+ --pf-c-login__main-footer-band--BackgroundColor: var(--pf-global--BackgroundColor--200);
11851
+ --pf-c-login__main-footer-band-item--PaddingTop: var(--pf-global--spacer--md);
11852
+ --pf-c-login__footer--PaddingLeft: var(--pf-global--spacer--md);
11853
+ --pf-c-login__footer--PaddingRight: var(--pf-global--spacer--md);
11854
+ --pf-c-login__footer--c-list--PaddingTop: var(--pf-global--spacer--md);
11855
+ --pf-c-login__footer--c-list--xl--PaddingTop: var(--pf-global--spacer--2xl);
11856
+ display: flex;
11857
+ justify-content: center;
11858
+ min-height: 100vh;
11859
+ padding-top: var(--pf-c-login--PaddingTop);
11860
+ padding-bottom: var(--pf-c-login--PaddingBottom);
11861
+ }
11862
+
11863
+ @media (min-width: 1200px) {
11864
+ .pf-c-login {
11865
+ --pf-c-login__container--MaxWidth: var(--pf-c-login__container--xl--MaxWidth);
11866
+ }
11867
+ }
11868
+ @media (min-width: 576px) {
11869
+ .pf-c-login {
11870
+ --pf-c-login__header--PaddingRight: 0;
11871
+ --pf-c-login__header--PaddingLeft: 0;
11872
+ }
11873
+ }
11874
+ @media (min-width: 1200px) {
11875
+ .pf-c-login {
11876
+ --pf-c-login__header--MarginBottom: var(--pf-c-login__header--xl--MarginBottom);
11877
+ --pf-c-login__header--c-brand--MarginBottom: var(--pf-c-login__header--c-brand--xl--MarginBottom);
11878
+ }
11879
+ }
11880
+ @media (min-width: 1200px) {
11881
+ .pf-c-login {
11882
+ --pf-c-login__main--MarginBottom: 0;
11883
+ }
11884
+ }
11885
+ @media (min-width: 768px) {
11886
+ .pf-c-login {
11887
+ --pf-c-login__main-header--PaddingRight: var(--pf-c-login__main-header--md--PaddingRight);
11888
+ --pf-c-login__main-header--PaddingLeft: var(--pf-c-login__main-header--md--PaddingLeft);
11889
+ --pf-c-login__main-header-desc--MarginBottom: var(--pf-c-login__main-header-desc--md--MarginBottom);
11890
+ }
11891
+ }
11892
+ @media (min-width: 768px) {
11893
+ .pf-c-login {
11894
+ --pf-c-login__main-body--PaddingRight: var(--pf-c-login__main-body--md--PaddingRight);
11895
+ --pf-c-login__main-body--PaddingLeft: var(--pf-c-login__main-body--md--PaddingLeft);
11896
+ }
11897
+ }
11898
+ @media (min-width: 576px) {
11899
+ .pf-c-login {
11900
+ --pf-c-login__footer--PaddingRight: 0;
11901
+ --pf-c-login__footer--PaddingLeft: 0;
11902
+ }
11903
+ }
11904
+ @media (min-width: 1200px) {
11905
+ .pf-c-login {
11906
+ --pf-c-login__footer--c-list--PaddingTop: var(--pf-c-login__footer--c-list--xl--PaddingTop);
11907
+ }
11908
+ }
11909
+ @media (min-width: 1200px) {
11910
+ .pf-c-login {
11911
+ background-image: var(--pf-c-login--xl--BackgroundImage);
11912
+ }
11913
+ }
11914
+ @media (min-width: 576px) {
11915
+ .pf-c-login {
11916
+ align-items: center;
11917
+ }
11918
+ }
11919
+ .pf-c-login__container {
11920
+ width: 100%;
11921
+ max-width: var(--pf-c-login__container--MaxWidth);
11922
+ }
11923
+
11924
+ @media (min-width: 1200px) {
11925
+ .pf-c-login__container {
11926
+ display: grid;
11927
+ justify-content: center;
11928
+ grid-column-gap: var(--pf-c-login__container--xl--GridColumnGap);
11929
+ grid-template-columns: var(--pf-c-login__container--xl--GridTemplateColumns);
11930
+ grid-template-areas: "main header" "main footer" "main .";
11931
+ padding-right: var(--pf-c-login__container--PaddingRight);
11932
+ padding-left: var(--pf-c-login__container--PaddingLeft);
11933
+ }
11934
+ }
11935
+ .pf-c-login__header {
11936
+ color: var(--pf-global--Color--100);
11937
+ grid-area: header;
11938
+ padding-right: var(--pf-c-login__header--PaddingRight);
11939
+ padding-left: var(--pf-c-login__header--PaddingLeft);
11940
+ }
11941
+
11942
+ @media (min-width: 1200px) {
11943
+ .pf-c-login__header {
11944
+ margin-top: var(--pf-c-login__header--xl--MarginTop);
11945
+ }
11946
+ }
11947
+ .pf-c-login__header .pf-c-brand {
11948
+ margin-bottom: var(--pf-c-login__header--c-brand--MarginBottom);
11949
+ }
11950
+
11951
+ .pf-c-login__main {
11952
+ align-self: start;
11953
+ margin-bottom: var(--pf-c-login__main--MarginBottom);
11954
+ background-color: var(--pf-c-login__main--BackgroundColor);
11955
+ grid-area: main;
11956
+ }
11957
+
11958
+ .pf-c-login__main > :first-child:not(.pf-c-login__main-header) {
11959
+ padding-top: var(--pf-c-login__main-header--PaddingTop);
11960
+ }
11961
+
11962
+ .pf-c-login__main > :last-child:not(.pf-c-login__main-footer) {
11963
+ padding-bottom: var(--pf-c-login__main-footer--PaddingBottom);
11964
+ }
11965
+
11966
+ .pf-c-login__main-header {
11967
+ display: grid;
11968
+ grid-template-columns: 100%;
11969
+ column-gap: var(--pf-c-login__main-header--ColumnGap);
11970
+ row-gap: var(--pf-c-login__main-header--RowGap);
11971
+ align-items: center;
11972
+ 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);
11973
+ }
11974
+
11975
+ @media (min-width: 768px) {
11976
+ .pf-c-login__main-header {
11977
+ grid-template-columns: 1fr auto;
11978
+ }
11979
+ }
11980
+ .pf-c-login__main-header-utilities,
11981
+ .pf-c-login__main-header .pf-c-dropdown {
11982
+ grid-column: auto;
11983
+ grid-row: auto;
11984
+ }
11985
+
11986
+ @media (min-width: 768px) {
11987
+ .pf-c-login__main-header-utilities,
11988
+ .pf-c-login__main-header .pf-c-dropdown {
11989
+ grid-column: 2/3;
11990
+ grid-row: 1;
11991
+ }
11992
+ }
11993
+ .pf-c-login__main-header-utilities .pf-c-dropdown {
11994
+ grid-column: auto;
11995
+ grid-row: auto;
11996
+ }
11849
11997
 
11850
- .pf-c-masthead.pf-m-inset-sm-on-xl {
11851
- --pf-c-masthead--inset: var(--pf-global--spacer--sm);
11852
- }
11998
+ .pf-c-login__main-header-desc {
11999
+ margin-bottom: var(--pf-c-login__main-header-desc--MarginBottom);
12000
+ font-size: var(--pf-c-login__main-header-desc--FontSize);
12001
+ grid-column: 1/-1;
12002
+ }
11853
12003
 
11854
- .pf-c-masthead.pf-m-inset-md-on-xl {
11855
- --pf-c-masthead--inset: var(--pf-global--spacer--md);
11856
- }
12004
+ .pf-c-login__main-body {
12005
+ padding-right: var(--pf-c-login__main-body--PaddingRight);
12006
+ padding-bottom: var(--pf-c-login__main-body--PaddingBottom);
12007
+ padding-left: var(--pf-c-login__main-body--PaddingLeft);
12008
+ }
11857
12009
 
11858
- .pf-c-masthead.pf-m-inset-lg-on-xl {
11859
- --pf-c-masthead--inset: var(--pf-global--spacer--lg);
11860
- }
12010
+ .pf-c-login__main-footer {
12011
+ display: flex;
12012
+ flex-wrap: wrap;
12013
+ }
11861
12014
 
11862
- .pf-c-masthead.pf-m-inset-xl-on-xl {
11863
- --pf-c-masthead--inset: var(--pf-global--spacer--xl);
11864
- }
12015
+ .pf-c-login__main-footer .pf-c-title {
12016
+ margin-bottom: var(--pf-c-login__main-footer--c-title--MarginBottom);
12017
+ text-align: center;
12018
+ }
11865
12019
 
11866
- .pf-c-masthead.pf-m-inset-2xl-on-xl {
11867
- --pf-c-masthead--inset: var(--pf-global--spacer--2xl);
11868
- }
12020
+ .pf-c-login__main-footer > * {
12021
+ flex-basis: 100%;
11869
12022
  }
11870
- @media (min-width: 1450px) {
11871
- .pf-c-masthead.pf-m-display-stack-on-2xl {
11872
- --pf-c-masthead--GridTemplateColumns: var(--pf-c-masthead--m-display-stack--GridTemplateColumns);
11873
- --pf-c-masthead__main--GridColumn: var(--pf-c-masthead--m-display-stack__main--GridColumn);
11874
- --pf-c-masthead__main--MinHeight: var(--pf-c-masthead--m-display-stack__main--MinHeight);
11875
- --pf-c-masthead__main--Order: var(--pf-c-masthead--m-display-stack__main--Order);
11876
- --pf-c-masthead__main--FlexBasis: var(--pf-c-masthead--m-display-stack__main--FlexBasis);
11877
- --pf-c-masthead__main--PaddingTop: var(--pf-c-masthead--m-display-stack__main--PaddingTop);
11878
- --pf-c-masthead__main--PaddingBottom: var(--pf-c-masthead--m-display-stack__main--PaddingBottom);
11879
- --pf-c-masthead__main--MarginRight: var(--pf-c-masthead--m-display-stack__main--MarginRight);
11880
- --pf-c-masthead__main--before--BorderBottom: var(--pf-c-masthead--m-display-stack__main--before--BorderBottom);
11881
- --pf-c-masthead__content--GridColumn: var(--pf-c-masthead--m-display-stack__content--GridColumn);
11882
- --pf-c-masthead__content--MinHeight: var(--pf-c-masthead--m-display-stack__content--MinHeight);
11883
- --pf-c-masthead__content--Order: var(--pf-c-masthead--m-display-stack__content--Order);
11884
- --pf-c-masthead__content--PaddingTop: var(--pf-c-masthead--m-display-stack__content--PaddingTop);
11885
- --pf-c-masthead__content--PaddingBottom: var(--pf-c-masthead--m-display-stack__content--PaddingBottom);
11886
- --pf-c-masthead__content--MarginLeft: var(--pf-c-masthead--m-display-stack__content--MarginLeft);
11887
- --pf-c-masthead__content--c-nav--m-horizontal--MarginRight: var(--pf-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginRight);
11888
- --pf-c-masthead__content--c-nav--m-horizontal--MarginLeft: var(--pf-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginLeft);
11889
- }
11890
12023
 
11891
- .pf-c-masthead.pf-m-display-inline-on-2xl {
11892
- --pf-c-masthead--GridTemplateColumns: var(--pf-c-masthead--m-display-inline--GridTemplateColumns);
11893
- --pf-c-masthead__main--GridColumn: var(--pf-c-masthead--m-display-inline__main--GridColumn);
11894
- --pf-c-masthead__main--MinHeight: var(--pf-c-masthead--m-display-inline__main--MinHeight);
11895
- --pf-c-masthead__main--Order: var(--pf-c-masthead--m-display-inline__main--Order);
11896
- --pf-c-masthead__main--FlexBasis: var(--pf-c-masthead--m-display-inline__main--FlexBasis);
11897
- --pf-c-masthead__main--PaddingTop: var(--pf-c-masthead--m-display-inline__main--PaddingTop);
11898
- --pf-c-masthead__main--PaddingBottom: var(--pf-c-masthead--m-display-inline__main--PaddingBottom);
11899
- --pf-c-masthead__main--MarginRight: var(--pf-c-masthead--m-display-inline__main--MarginRight);
11900
- --pf-c-masthead__main--before--BorderBottom: var(--pf-c-masthead--m-display-inline__main--BorderBottom);
11901
- --pf-c-masthead__content--GridColumn: var(--pf-c-masthead--m-display-inline__content--GridColumn);
11902
- --pf-c-masthead__content--MinHeight: var(--pf-c-masthead--m-display-inline__content--MinHeight);
11903
- --pf-c-masthead__content--Order: var(--pf-c-masthead--m-display-inline__content--Order);
11904
- --pf-c-masthead__content--PaddingTop: var(--pf-c-masthead--m-display-inline__content--PaddingTop);
11905
- --pf-c-masthead__content--PaddingBottom: var(--pf-c-masthead--m-display-inline__content--PaddingBottom);
11906
- --pf-c-masthead__content--MarginLeft: var(--pf-c-masthead--m-display-inline__content--MarginLeft);
11907
- --pf-c-masthead__content--c-nav--m-horizontal--MarginRight: var(--pf-c-masthead--m-display-inline__content--c-nav--m-horizontal--MarginRight);
11908
- --pf-c-masthead__content--c-nav--m-horizontal--MarginLeft: var(--pf-c-masthead--m-display-inline__content--c-nav--m-horizontal--MarginLeft);
11909
- }
12024
+ .pf-c-login__main-footer-links {
12025
+ display: flex;
12026
+ flex-wrap: wrap;
12027
+ justify-content: center;
12028
+ 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);
11910
12029
  }
11911
- @media (min-width: 1450px) {
11912
- .pf-c-masthead.pf-m-inset-none-on-2xl {
11913
- --pf-c-masthead--inset: 0;
11914
- }
11915
12030
 
11916
- .pf-c-masthead.pf-m-inset-sm-on-2xl {
11917
- --pf-c-masthead--inset: var(--pf-global--spacer--sm);
11918
- }
12031
+ .pf-c-login__main-footer-links-item {
12032
+ padding-right: var(--pf-c-login__main-footer-links-item--PaddingRight);
12033
+ padding-left: var(--pf-c-login__main-footer-links-item--PaddingLeft);
12034
+ margin-bottom: var(--pf-c-login__main-footer-links-item--MarginBottom);
12035
+ }
11919
12036
 
11920
- .pf-c-masthead.pf-m-inset-md-on-2xl {
11921
- --pf-c-masthead--inset: var(--pf-global--spacer--md);
11922
- }
12037
+ .pf-c-login__main-footer-links-item-link svg {
12038
+ fill: var(--pf-c-login__main-footer-links-item-link-svg--Fill);
12039
+ width: 100%;
12040
+ max-width: var(--pf-c-login__main-footer-links-item-link-svg--Width);
12041
+ height: 100%;
12042
+ max-height: var(--pf-c-login__main-footer-links-item-link-svg--Height);
12043
+ }
11923
12044
 
11924
- .pf-c-masthead.pf-m-inset-lg-on-2xl {
11925
- --pf-c-masthead--inset: var(--pf-global--spacer--lg);
11926
- }
12045
+ .pf-c-login__main-footer-links-item-link:hover svg {
12046
+ fill: var(--pf-c-login__main-footer-links-item-link-svg--hover--Fill);
12047
+ }
11927
12048
 
11928
- .pf-c-masthead.pf-m-inset-xl-on-2xl {
11929
- --pf-c-masthead--inset: var(--pf-global--spacer--xl);
11930
- }
12049
+ .pf-c-login__main-footer-band {
12050
+ 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);
12051
+ text-align: center;
12052
+ background-color: var(--pf-c-login__main-footer-band--BackgroundColor);
12053
+ }
11931
12054
 
11932
- .pf-c-masthead.pf-m-inset-2xl-on-2xl {
11933
- --pf-c-masthead--inset: var(--pf-global--spacer--2xl);
11934
- }
12055
+ .pf-c-login__main-footer-band > * + * {
12056
+ padding-top: var(--pf-c-login__main-footer-band-item--PaddingTop);
11935
12057
  }
11936
- :where(.pf-theme-dark) .pf-c-masthead {
12058
+
12059
+ .pf-c-login__footer {
12060
+ color: var(--pf-global--Color--100);
12061
+ grid-area: footer;
12062
+ padding-right: var(--pf-c-login__footer--PaddingRight);
12063
+ padding-left: var(--pf-c-login__footer--PaddingLeft);
12064
+ }
12065
+
12066
+ .pf-c-login__footer .pf-c-list a {
12067
+ color: unset;
12068
+ }
12069
+
12070
+ .pf-c-login__footer .pf-c-list:not(:only-child) {
12071
+ padding-top: var(--pf-c-login__footer--c-list--PaddingTop);
12072
+ }
12073
+
12074
+ :where(.pf-theme-dark) .pf-c-login__header,
12075
+ :where(.pf-theme-dark) .pf-c-login__footer {
11937
12076
  --pf-global--Color--100: #e0e0e0;
11938
12077
  --pf-global--Color--200: #aaabac;
11939
12078
  --pf-global--BorderColor--100: #444548;
@@ -11943,11 +12082,13 @@ ul.pf-c-list {
11943
12082
  --pf-global--BackgroundColor--100: #1b1d21;
11944
12083
  }
11945
12084
 
11946
- :where(.pf-theme-dark) .pf-c-masthead .pf-c-card {
12085
+ :where(.pf-theme-dark) .pf-c-login__header .pf-c-card,
12086
+ :where(.pf-theme-dark) .pf-c-login__footer .pf-c-card {
11947
12087
  --pf-c-card--BackgroundColor: var(--pf-global--BackgroundColor--100);
11948
12088
  }
11949
12089
 
11950
- :where(.pf-theme-dark) .pf-c-masthead .pf-c-button {
12090
+ :where(.pf-theme-dark) .pf-c-login__header .pf-c-button,
12091
+ :where(.pf-theme-dark) .pf-c-login__footer .pf-c-button {
11951
12092
  --pf-c-button--m-primary--Color: var(--pf-global--Color--light-100);
11952
12093
  --pf-c-button--m-primary--hover--Color: var(--pf-global--Color--light-100);
11953
12094
  --pf-c-button--m-primary--focus--Color: var(--pf-global--Color--light-100);
@@ -11962,15 +12103,11 @@ ul.pf-c-list {
11962
12103
  --pf-c-button--m-secondary--active--Color: var(--pf-global--primary-color--100);
11963
12104
  }
11964
12105
 
11965
- :where(.pf-theme-dark) .pf-c-masthead {
11966
- --pf-c-masthead--BackgroundColor: var(--pf-global--palette--black-1000);
12106
+ :where(.pf-theme-dark) .pf-c-login__header,
12107
+ :where(.pf-theme-dark) .pf-c-login__footer {
11967
12108
  color: var(--pf-global--Color--100);
11968
12109
  }
11969
12110
 
11970
- :where(.pf-theme-dark) .pf-c-masthead .pf-c-toolbar {
11971
- --pf-c-toolbar--BackgroundColor: var(--pf-global--palette--black-1000);
11972
- }
11973
-
11974
12111
  .pf-c-menu {
11975
12112
  --pf-global--Color--100: var(--pf-global--Color--dark-100);
11976
12113
  --pf-global--Color--200: var(--pf-global--Color--dark-200);
@@ -22655,52 +22792,6 @@ svg.pf-c-spinner.pf-m-xl {
22655
22792
  --pf-c-tooltip__arrow--Height: 0.9375rem;
22656
22793
  }
22657
22794
 
22658
- .pf-c-number-input .pf-c-form-control {
22659
- appearance: textfield;
22660
- }
22661
-
22662
- .pf-c-number-input .pf-c-form-control::-webkit-inner-spin-button, .pf-c-number-input .pf-c-form-control::-webkit-outer-spin-button {
22663
- appearance: none;
22664
- margin: 0;
22665
- }
22666
-
22667
- .pf-c-number-input {
22668
- --pf-c-number-input__unit--c-input-group--MarginLeft: var(--pf-global--spacer--sm);
22669
- --pf-c-number-input__icon--FontSize: var(--pf-global--FontSize--xs);
22670
- --pf-c-number-input--c-form-control--width-base: calc(var(--pf-global--spacer--sm) * 2 + var(--pf-global--BorderWidth--sm) * 2);
22671
- --pf-c-number-input--c-form-control--width-icon: 0px;
22672
- --pf-c-number-input--m-status--c-form-control--width-icon: var(--pf-global--spacer--xl);
22673
- --pf-c-number-input--c-form-control--width-chars: 4;
22674
- --pf-c-number-input--c-form-control--Width:
22675
- calc(
22676
- calc(
22677
- var(--pf-c-number-input--c-form-control--width-base) + var(--pf-c-number-input--c-form-control--width-chars) * 1ch
22678
- ) + var(--pf-c-number-input--c-form-control--width-icon)
22679
- );
22680
- display: inline-flex;
22681
- align-items: center;
22682
- }
22683
-
22684
- .pf-c-number-input.pf-m-status {
22685
- --pf-c-number-input--c-form-control--width-icon: var(--pf-c-number-input--m-status--c-form-control--width-icon);
22686
- }
22687
-
22688
- .pf-c-number-input .pf-c-form-control {
22689
- display: inline-flex;
22690
- width: var(--pf-c-number-input--c-form-control--Width);
22691
- text-align: right;
22692
- }
22693
-
22694
- .pf-c-input-group + .pf-c-number-input__unit,
22695
- .pf-c-number-input__unit + .pf-c-input-group {
22696
- margin-left: var(--pf-c-number-input__unit--c-input-group--MarginLeft);
22697
- }
22698
-
22699
- .pf-c-number-input__icon {
22700
- display: flex;
22701
- font-size: var(--pf-c-number-input__icon--FontSize);
22702
- }
22703
-
22704
22795
  .pf-c-tree-view {
22705
22796
  --pf-c-tree-view--PaddingTop: var(--pf-global--spacer--sm);
22706
22797
  --pf-c-tree-view--PaddingBottom: var(--pf-global--spacer--sm);
@@ -23791,6 +23882,52 @@ label.pf-c-tree-view__node-text {
23791
23882
  color: var(--pf-global--Color--100);
23792
23883
  }
23793
23884
 
23885
+ .pf-c-number-input .pf-c-form-control {
23886
+ appearance: textfield;
23887
+ }
23888
+
23889
+ .pf-c-number-input .pf-c-form-control::-webkit-inner-spin-button, .pf-c-number-input .pf-c-form-control::-webkit-outer-spin-button {
23890
+ appearance: none;
23891
+ margin: 0;
23892
+ }
23893
+
23894
+ .pf-c-number-input {
23895
+ --pf-c-number-input__unit--c-input-group--MarginLeft: var(--pf-global--spacer--sm);
23896
+ --pf-c-number-input__icon--FontSize: var(--pf-global--FontSize--xs);
23897
+ --pf-c-number-input--c-form-control--width-base: calc(var(--pf-global--spacer--sm) * 2 + var(--pf-global--BorderWidth--sm) * 2);
23898
+ --pf-c-number-input--c-form-control--width-icon: 0px;
23899
+ --pf-c-number-input--m-status--c-form-control--width-icon: var(--pf-global--spacer--xl);
23900
+ --pf-c-number-input--c-form-control--width-chars: 4;
23901
+ --pf-c-number-input--c-form-control--Width:
23902
+ calc(
23903
+ calc(
23904
+ var(--pf-c-number-input--c-form-control--width-base) + var(--pf-c-number-input--c-form-control--width-chars) * 1ch
23905
+ ) + var(--pf-c-number-input--c-form-control--width-icon)
23906
+ );
23907
+ display: inline-flex;
23908
+ align-items: center;
23909
+ }
23910
+
23911
+ .pf-c-number-input.pf-m-status {
23912
+ --pf-c-number-input--c-form-control--width-icon: var(--pf-c-number-input--m-status--c-form-control--width-icon);
23913
+ }
23914
+
23915
+ .pf-c-number-input .pf-c-form-control {
23916
+ display: inline-flex;
23917
+ width: var(--pf-c-number-input--c-form-control--Width);
23918
+ text-align: right;
23919
+ }
23920
+
23921
+ .pf-c-input-group + .pf-c-number-input__unit,
23922
+ .pf-c-number-input__unit + .pf-c-input-group {
23923
+ margin-left: var(--pf-c-number-input__unit--c-input-group--MarginLeft);
23924
+ }
23925
+
23926
+ .pf-c-number-input__icon {
23927
+ display: flex;
23928
+ font-size: var(--pf-c-number-input__icon--FontSize);
23929
+ }
23930
+
23794
23931
  .pf-c-draggable {
23795
23932
  --pf-c-draggable--Cursor: auto;
23796
23933
  --pf-c-draggable--m-dragging--Cursor: grabbing;