@patternfly/react-styles 5.1.0 → 5.1.1-prerelease.2

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 (154) hide show
  1. package/CHANGELOG.md +8 -2
  2. package/css/components/AboutModalBox/about-modal-box.css +20 -13
  3. package/css/components/Accordion/accordion.css +33 -20
  4. package/css/components/Accordion/accordion.d.ts +3 -1
  5. package/css/components/Accordion/accordion.js +3 -1
  6. package/css/components/Accordion/accordion.mjs +3 -1
  7. package/css/components/ActionList/action-list.css +2 -2
  8. package/css/components/Alert/alert-group.css +7 -4
  9. package/css/components/Alert/alert.css +19 -13
  10. package/css/components/Alert/alert.d.ts +3 -1
  11. package/css/components/Alert/alert.js +3 -1
  12. package/css/components/Alert/alert.mjs +3 -1
  13. package/css/components/AppLauncher/app-launcher.css +32 -23
  14. package/css/components/BackToTop/back-to-top.css +2 -2
  15. package/css/components/Backdrop/backdrop.css +2 -2
  16. package/css/components/BackgroundImage/background-image.css +2 -2
  17. package/css/components/Badge/badge.css +2 -2
  18. package/css/components/Banner/banner.css +5 -2
  19. package/css/components/Breadcrumb/breadcrumb.css +9 -3
  20. package/css/components/Breadcrumb/breadcrumb.d.ts +3 -1
  21. package/css/components/Breadcrumb/breadcrumb.js +3 -1
  22. package/css/components/Breadcrumb/breadcrumb.mjs +3 -1
  23. package/css/components/Button/button.css +23 -17
  24. package/css/components/CalendarMonth/calendar-month.css +25 -15
  25. package/css/components/CalendarMonth/calendar-month.d.ts +3 -1
  26. package/css/components/CalendarMonth/calendar-month.js +3 -1
  27. package/css/components/CalendarMonth/calendar-month.mjs +3 -1
  28. package/css/components/Card/card.css +21 -16
  29. package/css/components/Check/check.css +2 -2
  30. package/css/components/Chip/chip-group.css +6 -6
  31. package/css/components/Chip/chip.css +16 -9
  32. package/css/components/Chip/chip.d.ts +1 -0
  33. package/css/components/Chip/chip.js +1 -0
  34. package/css/components/Chip/chip.mjs +1 -0
  35. package/css/components/ClipboardCopy/clipboard-copy.css +19 -10
  36. package/css/components/ClipboardCopy/clipboard-copy.d.ts +3 -1
  37. package/css/components/ClipboardCopy/clipboard-copy.js +3 -1
  38. package/css/components/ClipboardCopy/clipboard-copy.mjs +3 -1
  39. package/css/components/CodeBlock/code-block.css +6 -3
  40. package/css/components/CodeEditor/code-editor.css +31 -22
  41. package/css/components/Content/content.css +33 -30
  42. package/css/components/ContextSelector/context-selector.css +41 -26
  43. package/css/components/DataList/data-list-grid.css +21 -49
  44. package/css/components/DataList/data-list.css +66 -84
  45. package/css/components/DatePicker/date-picker.css +8 -8
  46. package/css/components/DescriptionList/description-list.css +8 -5
  47. package/css/components/DragDrop/drag-drop.css +8 -8
  48. package/css/components/Drawer/drawer.css +75 -60
  49. package/css/components/Dropdown/dropdown.css +75 -66
  50. package/css/components/DualListSelector/dual-list-selector.css +29 -15
  51. package/css/components/DualListSelector/dual-list-selector.d.ts +4 -1
  52. package/css/components/DualListSelector/dual-list-selector.js +4 -1
  53. package/css/components/DualListSelector/dual-list-selector.mjs +4 -1
  54. package/css/components/EmptyState/empty-state.css +7 -4
  55. package/css/components/ExpandableSection/expandable-section.css +17 -10
  56. package/css/components/ExpandableSection/expandable-section.d.ts +3 -1
  57. package/css/components/ExpandableSection/expandable-section.js +3 -1
  58. package/css/components/ExpandableSection/expandable-section.mjs +3 -1
  59. package/css/components/FileUpload/file-upload.css +9 -15
  60. package/css/components/Form/form.css +50 -50
  61. package/css/components/FormControl/form-control.css +21 -11
  62. package/css/components/HelperText/helper-text.css +1 -1
  63. package/css/components/Hint/hint.css +9 -6
  64. package/css/components/Icon/icon.css +1 -1
  65. package/css/components/InlineEdit/inline-edit.css +4 -4
  66. package/css/components/InputGroup/input-group.css +12 -6
  67. package/css/components/JumpLinks/jump-links.css +24 -24
  68. package/css/components/Label/label-group.css +13 -10
  69. package/css/components/Label/label.css +9 -9
  70. package/css/components/List/list.css +9 -9
  71. package/css/components/LogViewer/log-viewer.css +14 -14
  72. package/css/components/Login/login.css +36 -27
  73. package/css/components/Masthead/masthead.css +19 -22
  74. package/css/components/Menu/menu.css +80 -66
  75. package/css/components/Menu/menu.d.ts +3 -1
  76. package/css/components/Menu/menu.js +3 -1
  77. package/css/components/Menu/menu.mjs +3 -1
  78. package/css/components/MenuToggle/menu-toggle.css +41 -29
  79. package/css/components/ModalBox/modal-box.css +19 -19
  80. package/css/components/MultipleFileUpload/multiple-file-upload.css +11 -8
  81. package/css/components/Nav/nav.css +120 -93
  82. package/css/components/Nav/nav.d.ts +3 -1
  83. package/css/components/Nav/nav.js +3 -1
  84. package/css/components/Nav/nav.mjs +3 -1
  85. package/css/components/NotificationBadge/notification-badge.css +13 -7
  86. package/css/components/NotificationDrawer/notification-drawer.css +32 -19
  87. package/css/components/NotificationDrawer/notification-drawer.d.ts +3 -1
  88. package/css/components/NotificationDrawer/notification-drawer.js +3 -1
  89. package/css/components/NotificationDrawer/notification-drawer.mjs +3 -1
  90. package/css/components/NumberInput/number-input.css +3 -3
  91. package/css/components/OptionsMenu/options-menu.css +43 -31
  92. package/css/components/OverflowMenu/overflow-menu.css +2 -2
  93. package/css/components/Page/page.css +123 -65
  94. package/css/components/Page/page.d.ts +3 -1
  95. package/css/components/Page/page.js +3 -1
  96. package/css/components/Page/page.mjs +3 -1
  97. package/css/components/Pagination/pagination.css +28 -18
  98. package/css/components/Pagination/pagination.d.ts +3 -1
  99. package/css/components/Pagination/pagination.js +3 -1
  100. package/css/components/Pagination/pagination.mjs +3 -1
  101. package/css/components/Panel/panel.css +13 -7
  102. package/css/components/Popover/popover.css +24 -21
  103. package/css/components/Progress/progress.css +7 -7
  104. package/css/components/ProgressStepper/progress-stepper.css +26 -20
  105. package/css/components/Radio/radio.css +4 -5
  106. package/css/components/Select/select.css +56 -47
  107. package/css/components/Sidebar/sidebar.css +11 -5
  108. package/css/components/SimpleList/simple-list.css +10 -4
  109. package/css/components/Skeleton/skeleton.css +2 -5
  110. package/css/components/SkipToContent/skip-to-content.css +3 -3
  111. package/css/components/Slider/slider.css +46 -26
  112. package/css/components/Slider/slider.d.ts +3 -1
  113. package/css/components/Slider/slider.js +3 -1
  114. package/css/components/Slider/slider.mjs +3 -1
  115. package/css/components/Switch/switch.css +9 -5
  116. package/css/components/Switch/switch.d.ts +3 -1
  117. package/css/components/Switch/switch.js +3 -1
  118. package/css/components/Switch/switch.mjs +3 -1
  119. package/css/components/TabContent/tab-content.css +4 -1
  120. package/css/components/Table/table-grid.css +256 -219
  121. package/css/components/Table/table-scrollable.css +2 -2
  122. package/css/components/Table/table-tree-view.css +107 -104
  123. package/css/components/Table/table.css +87 -69
  124. package/css/components/Tabs/tabs.css +66 -48
  125. package/css/components/TextInputGroup/text-input-group.css +15 -15
  126. package/css/components/Tile/tile.css +10 -10
  127. package/css/components/ToggleGroup/toggle-group.css +14 -11
  128. package/css/components/Toolbar/toolbar.css +44 -41
  129. package/css/components/Tooltip/tooltip.css +19 -16
  130. package/css/components/TreeView/tree-view.css +42 -27
  131. package/css/components/Wizard/wizard.css +57 -36
  132. package/css/components/Wizard/wizard.d.ts +3 -1
  133. package/css/components/Wizard/wizard.js +3 -1
  134. package/css/components/Wizard/wizard.mjs +3 -1
  135. package/css/docs/components/Button/examples/Button.css +2 -2
  136. package/css/docs/components/DragDrop/examples/DragDrop.css +2 -2
  137. package/css/docs/components/Dropdown/deprecated/Dropdown.css +1 -1
  138. package/css/docs/components/LogViewer/examples/LogViewer.css +2 -2
  139. package/css/docs/components/ModalBox/examples/ModalBox.css +2 -2
  140. package/css/docs/components/Nav/examples/Navigation.css +3 -26
  141. package/css/docs/components/Nav/examples/Navigation.d.ts +1 -1
  142. package/css/docs/components/Nav/examples/Navigation.js +1 -1
  143. package/css/docs/components/Nav/examples/Navigation.mjs +1 -1
  144. package/css/docs/components/Popover/examples/Popover.css +2 -2
  145. package/css/docs/components/Select/deprecated/Select.css +3 -3
  146. package/css/docs/components/Table/examples/Table.css +2 -2
  147. package/css/docs/components/TextInputGroup/examples/TextInputGroup.css +1 -1
  148. package/css/docs/components/Tile/examples/Tile.css +1 -1
  149. package/css/docs/demos/Card/examples/Card.css +3 -3
  150. package/css/docs/utilities/BoxShadow/examples/box-shadow.css +5 -5
  151. package/css/layouts/Flex/flex.css +115 -43
  152. package/css/utilities/Accessibility/accessibility.css +12 -12
  153. package/css/utilities/Spacing/spacing.css +720 -960
  154. package/package.json +4 -8
@@ -39,6 +39,7 @@
39
39
  --pf-v5-c-table--m-compact__tr--responsive--PaddingBottom: var(--pf-v5-global--spacer--sm);
40
40
  --pf-v5-c-table--m-compact__tr__td--responsive--PaddingTop: var(--pf-v5-global--spacer--xs);
41
41
  --pf-v5-c-table--m-compact__tr__td--responsive--PaddingBottom: var(--pf-v5-global--spacer--xs);
42
+ --pf-v5-c-table--m-compact__check--responsive--MarginTop: 0.4375rem;
42
43
  --pf-v5-c-table--m-compact__action--responsive--MarginTop: calc(var(--pf-v5-global--spacer--xs) * -1);
43
44
  --pf-v5-c-table--m-compact__action--responsive--MarginBottom: calc(var(--pf-v5-global--spacer--xs) * -1);
44
45
  --pf-v5-c-table--m-compact__toggle--c-button--responsive--MarginBottom: calc(0.375rem * -1);
@@ -107,26 +108,26 @@
107
108
  display: block;
108
109
  }
109
110
  .pf-m-grid.pf-v5-c-table tbody:where(.pf-v5-c-table__tbody):first-of-type {
110
- border-top: var(--pf-v5-c-table__tbody--responsive--border-width--base) solid var(--pf-v5-c-table--responsive--BorderColor);
111
+ border-block-start: var(--pf-v5-c-table__tbody--responsive--border-width--base) solid var(--pf-v5-c-table--responsive--BorderColor);
111
112
  }
112
113
  .pf-m-grid.pf-v5-c-table .pf-v5-c-table.pf-m-compact > tbody:where(.pf-v5-c-table__tbody) {
113
- border-top: 0;
114
+ border-block-start: 0;
114
115
  }
115
116
  .pf-m-grid.pf-v5-c-table tr:where(.pf-v5-c-table__tr):not(.pf-v5-c-table__expandable-row) {
116
- border-bottom: var(--pf-v5-c-table__tr--responsive--border-width--base) solid var(--pf-v5-c-table--responsive--BorderColor);
117
+ border-block-end: var(--pf-v5-c-table__tr--responsive--border-width--base) solid var(--pf-v5-c-table--responsive--BorderColor);
117
118
  }
118
119
  .pf-m-grid.pf-v5-c-table tr:where(.pf-v5-c-table__tr):last-child,
119
120
  .pf-m-grid.pf-v5-c-table tbody:where(.pf-v5-c-table__tbody):last-of-type:not(:only-of-type) > tr:where(.pf-v5-c-table__tr) {
120
- border-bottom-width: var(--pf-v5-c-table__tr--responsive--last-child--BorderBottomWidth);
121
+ border-block-end-width: var(--pf-v5-c-table__tr--responsive--last-child--BorderBottomWidth);
121
122
  }
122
123
  .pf-m-grid.pf-v5-c-table tbody:where(.pf-v5-c-table__tbody).pf-m-expanded {
123
- border-bottom: var(--pf-v5-c-table--border-width--base) solid var(--pf-v5-c-table--BorderColor);
124
+ border-block-end: var(--pf-v5-c-table--border-width--base) solid var(--pf-v5-c-table--BorderColor);
124
125
  }
125
126
  .pf-m-grid.pf-v5-c-table tbody:where(.pf-v5-c-table__tbody).pf-m-expanded tr:where(.pf-v5-c-table__tr):not(.pf-v5-c-table__expandable-row) {
126
- border-bottom: 0;
127
+ border-block-end: 0;
127
128
  }
128
129
  .pf-m-grid.pf-v5-c-table tbody:where(.pf-v5-c-table__tbody).pf-m-expanded:not(:last-of-type) {
129
- border-bottom: var(--pf-v5-c-table__tbody--responsive--border-width--base) solid var(--pf-v5-c-table--responsive--BorderColor);
130
+ border-block-end: var(--pf-v5-c-table__tbody--responsive--border-width--base) solid var(--pf-v5-c-table--responsive--BorderColor);
130
131
  }
131
132
  .pf-m-grid.pf-v5-c-table tr:where(.pf-v5-c-table__tr).pf-m-selected {
132
133
  --pf-v5-c-table__expandable-row--after--BorderLeftWidth: 0;
@@ -138,10 +139,16 @@
138
139
  height: auto;
139
140
  grid-auto-columns: max-content;
140
141
  grid-column-gap: var(--pf-v5-c-table__tr--responsive--GridColumnGap);
141
- padding: var(--pf-v5-c-table__tr--responsive--PaddingTop) var(--pf-v5-c-table__tr--responsive--PaddingRight) var(--pf-v5-c-table__tr--responsive--PaddingBottom) var(--pf-v5-c-table__tr--responsive--PaddingLeft);
142
+ padding-block-start: var(--pf-v5-c-table__tr--responsive--PaddingTop);
143
+ padding-inline-end: var(--pf-v5-c-table__tr--responsive--PaddingRight);
144
+ padding-block-end: var(--pf-v5-c-table__tr--responsive--PaddingBottom);
145
+ padding-inline-start: var(--pf-v5-c-table__tr--responsive--PaddingLeft);
142
146
  }
143
147
  .pf-m-grid.pf-v5-c-table tr:where(.pf-v5-c-table__tr):not(.pf-v5-c-table__expandable-row) > * {
144
- padding: var(--pf-v5-c-table--cell--responsive--PaddingTop) var(--pf-v5-c-table--cell--responsive--PaddingRight) var(--pf-v5-c-table--cell--responsive--PaddingBottom) var(--pf-v5-c-table--cell--responsive--PaddingLeft);
148
+ padding-block-start: var(--pf-v5-c-table--cell--responsive--PaddingTop);
149
+ padding-inline-end: var(--pf-v5-c-table--cell--responsive--PaddingRight);
150
+ padding-block-end: var(--pf-v5-c-table--cell--responsive--PaddingBottom);
151
+ padding-inline-start: var(--pf-v5-c-table--cell--responsive--PaddingLeft);
145
152
  }
146
153
  .pf-m-grid.pf-v5-c-table tr:where(.pf-v5-c-table__tr):not(.pf-v5-c-table__expandable-row) > *:first-child {
147
154
  --pf-v5-c-table--cell--responsive--PaddingTop: var(--pf-v5-c-table--cell--first-child--responsive--PaddingTop);
@@ -151,17 +158,18 @@
151
158
  --pf-v5-c-table__tr--responsive--PaddingBottom: var(--pf-v5-c-table--m-compact__tr--responsive--PaddingBottom);
152
159
  --pf-v5-c-table--cell--responsive--PaddingTop: var(--pf-v5-c-table--m-compact__tr__td--responsive--PaddingTop);
153
160
  --pf-v5-c-table--cell--responsive--PaddingBottom: var(--pf-v5-c-table--m-compact__tr__td--responsive--PaddingBottom);
161
+ --pf-v5-c-table__check--responsive--MarginTop: var(--pf-v5-c-table--m-compact__check--responsive--MarginTop);
154
162
  --pf-v5-c-table__check--input--MarginTop: 0;
155
163
  }
156
164
  .pf-m-grid.pf-v5-c-table.pf-m-compact .pf-v5-c-table__action {
157
- margin-top: var(--pf-v5-c-table--m-compact__action--responsive--MarginTop);
158
- margin-bottom: var(--pf-v5-c-table--m-compact__action--responsive--MarginTop);
165
+ margin-block-start: var(--pf-v5-c-table--m-compact__action--responsive--MarginTop);
166
+ margin-block-end: var(--pf-v5-c-table--m-compact__action--responsive--MarginTop);
159
167
  }
160
168
  .pf-m-grid.pf-v5-c-table.pf-m-compact .pf-v5-c-table__toggle .pf-v5-c-button {
161
- margin-bottom: var(--pf-v5-c-table--m-compact__toggle--c-button--responsive--MarginBottom);
169
+ margin-block-end: var(--pf-v5-c-table--m-compact__toggle--c-button--responsive--MarginBottom);
162
170
  }
163
171
  .pf-m-grid.pf-v5-c-table .pf-v5-c-table__icon > * {
164
- text-align: left;
172
+ text-align: start;
165
173
  }
166
174
  .pf-m-grid.pf-v5-c-table :where(.pf-v5-c-table__th, .pf-v5-c-table__td)[data-label] {
167
175
  --pf-v5-c-table--cell--hidden-visible--Display: var(--pf-v5-c-table--m-grid--cell--hidden-visible--Display);
@@ -175,7 +183,7 @@
175
183
  }
176
184
  .pf-m-grid.pf-v5-c-table :where(.pf-v5-c-table__th, .pf-v5-c-table__td)[data-label]::before {
177
185
  font-weight: bold;
178
- text-align: left;
186
+ text-align: start;
179
187
  content: attr(data-label);
180
188
  }
181
189
  .pf-m-grid.pf-v5-c-table tr:where(.pf-v5-c-table__tr) > *:first-child {
@@ -204,12 +212,12 @@
204
212
  }
205
213
  .pf-m-grid.pf-v5-c-table tbody:where(.pf-v5-c-table__tbody)::after {
206
214
  position: absolute;
207
- top: 0;
208
- bottom: 0;
209
- left: 0;
215
+ inset-block-start: 0;
216
+ inset-block-end: 0;
217
+ inset-inline-start: 0;
210
218
  content: "";
211
219
  border: 0;
212
- border-left: var(--pf-v5-c-table__tbody--after--BorderLeftWidth) solid var(--pf-v5-c-table__tbody--after--BorderColor);
220
+ border-inline-start: var(--pf-v5-c-table__tbody--after--BorderLeftWidth) solid var(--pf-v5-c-table__tbody--after--BorderColor);
213
221
  }
214
222
  .pf-m-grid.pf-v5-c-table tbody:where(.pf-v5-c-table__tbody).pf-m-expanded {
215
223
  --pf-v5-c-table__tbody--after--BorderLeftWidth: var(--pf-v5-c-table__tbody--after--border-width--base);
@@ -233,7 +241,7 @@
233
241
  display: block;
234
242
  max-height: var(--pf-v5-c-table__expandable-row--MaxHeight);
235
243
  overflow-y: auto;
236
- border-bottom: none;
244
+ border-block-end: none;
237
245
  box-shadow: none;
238
246
  }
239
247
  .pf-m-grid.pf-v5-c-table .pf-v5-c-table__expandable-row > * {
@@ -241,7 +249,7 @@
241
249
  display: block;
242
250
  }
243
251
  .pf-m-grid.pf-v5-c-table .pf-v5-c-table__expandable-row.pf-m-expanded {
244
- border-top-color: var(--pf-v5-c-table--BorderColor);
252
+ border-block-start-color: var(--pf-v5-c-table--BorderColor);
245
253
  }
246
254
  .pf-m-grid.pf-v5-c-table .pf-v5-c-table__expandable-row > :first-child:not(.pf-v5-c-table__check)::after {
247
255
  content: none;
@@ -254,8 +262,8 @@
254
262
  display: none;
255
263
  }
256
264
  .pf-m-grid.pf-v5-c-table .pf-v5-c-table__expandable-row .pf-v5-c-table__expandable-row-content {
257
- padding-right: var(--pf-v5-c-table__expandable-row-content--responsive--PaddingRight);
258
- padding-left: var(--pf-v5-c-table__expandable-row-content--responsive--PaddingLeft);
265
+ padding-inline-end: var(--pf-v5-c-table__expandable-row-content--responsive--PaddingRight);
266
+ padding-inline-start: var(--pf-v5-c-table__expandable-row-content--responsive--PaddingLeft);
259
267
  }
260
268
  .pf-m-grid.pf-v5-c-table tbody:where(.pf-v5-c-table__tbody).pf-m-hoverable {
261
269
  --pf-v5-c-table__tbody--after--BorderLeftWidth: 0;
@@ -268,9 +276,9 @@
268
276
  .pf-m-grid.pf-v5-c-table tbody:where(.pf-v5-c-table__tbody).pf-m-hoverable > tr:where(.pf-v5-c-table__tr)::after {
269
277
  content: "";
270
278
  position: absolute;
271
- top: 0;
272
- bottom: 0;
273
- left: 0;
279
+ inset-block-start: 0;
280
+ inset-block-end: 0;
281
+ inset-inline-start: 0;
274
282
  width: var(--pf-v5-c-table__tbody--after__tr--BorderLeftWidth);
275
283
  background-color: var(--pf-v5-c-table__tbody--after__tr--BorderLeftColor);
276
284
  }
@@ -285,9 +293,9 @@
285
293
  .pf-m-grid.pf-v5-c-table tr:where(.pf-v5-c-table__tr).pf-m-selected::after {
286
294
  content: "";
287
295
  position: absolute;
288
- top: 0;
289
- bottom: 0;
290
- left: 0;
296
+ inset-block-start: 0;
297
+ inset-block-end: 0;
298
+ inset-inline-start: 0;
291
299
  width: var(--pf-v5-c-table__tr--m-selected--after--BorderLeftWidth);
292
300
  background-color: var(--pf-v5-c-table__tr--m-selected--after--BorderLeftColor);
293
301
  }
@@ -302,7 +310,7 @@
302
310
  grid-row-start: 20;
303
311
  grid-column: -1;
304
312
  justify-self: end;
305
- padding-right: 0;
313
+ padding-inline-end: 0;
306
314
  }
307
315
  .pf-m-grid.pf-v5-c-table .pf-v5-c-table__toggle::after {
308
316
  content: none;
@@ -320,33 +328,38 @@
320
328
  grid-column-start: 2;
321
329
  }
322
330
  .pf-m-grid.pf-v5-c-table .pf-v5-c-table__check {
323
- margin-top: var(--pf-v5-c-table__check--responsive--MarginTop);
324
- margin-left: var(--pf-v5-c-table__check--responsive--MarginLeft);
331
+ margin-block-start: var(--pf-v5-c-table__check--responsive--MarginTop);
332
+ margin-inline-start: var(--pf-v5-c-table__check--responsive--MarginLeft);
333
+ line-height: 1;
325
334
  }
326
335
  .pf-m-grid.pf-v5-c-table .pf-v5-c-table__check ~ .pf-v5-c-table__favorite {
327
- margin-left: var(--pf-v5-c-table--m-grid__check--favorite--MarginLeft);
336
+ margin-inline-start: var(--pf-v5-c-table--m-grid__check--favorite--MarginLeft);
328
337
  }
329
338
  .pf-m-grid.pf-v5-c-table .pf-v5-c-table__check ~ .pf-v5-c-table__favorite ~ .pf-v5-c-table__action {
330
- margin-left: var(--pf-v5-c-table--m-grid__check--favorite--action--MarginLeft);
339
+ margin-inline-start: var(--pf-v5-c-table--m-grid__check--favorite--action--MarginLeft);
331
340
  }
332
341
  .pf-m-grid.pf-v5-c-table .pf-v5-c-table__check ~ .pf-v5-c-table__action {
333
- margin-left: var(--pf-v5-c-table__action--responsive--MarginLeft);
342
+ margin-inline-start: var(--pf-v5-c-table__action--responsive--MarginLeft);
343
+ }
344
+ .pf-m-grid.pf-v5-c-table .pf-v5-c-table__check label {
345
+ display: inline-block;
346
+ margin: 0;
334
347
  }
335
348
  .pf-m-grid.pf-v5-c-table .pf-v5-c-table__favorite {
336
- margin-top: var(--pf-v5-c-table--m-grid__favorite--MarginTop);
349
+ margin-block-start: var(--pf-v5-c-table--m-grid__favorite--MarginTop);
337
350
  }
338
351
  .pf-m-grid.pf-v5-c-table .pf-v5-c-table__favorite ~ .pf-v5-c-table__action {
339
- margin-left: var(--pf-v5-c-table--m-grid__favorite--action--MarginLeft);
352
+ margin-inline-start: var(--pf-v5-c-table--m-grid__favorite--action--MarginLeft);
340
353
  }
341
354
  .pf-m-grid.pf-v5-c-table .pf-v5-c-table__action {
342
- margin-top: var(--pf-v5-c-table--m-grid__action--MarginTop);
343
- text-align: right;
355
+ margin-block-start: var(--pf-v5-c-table--m-grid__action--MarginTop);
356
+ text-align: end;
344
357
  }
345
358
  @media screen and (max-width: 576px) {
346
359
  .pf-m-grid.pf-v5-c-table .pf-v5-c-table__action {
347
360
  grid-row-start: 1;
348
361
  grid-column-start: 2;
349
- margin-left: 0;
362
+ margin-inline-start: 0;
350
363
  }
351
364
  }
352
365
  .pf-m-grid.pf-v5-c-table .pf-v5-c-table__inline-edit-action {
@@ -410,26 +423,26 @@
410
423
  display: block;
411
424
  }
412
425
  .pf-m-grid-md.pf-v5-c-table tbody:where(.pf-v5-c-table__tbody):first-of-type {
413
- border-top: var(--pf-v5-c-table__tbody--responsive--border-width--base) solid var(--pf-v5-c-table--responsive--BorderColor);
426
+ border-block-start: var(--pf-v5-c-table__tbody--responsive--border-width--base) solid var(--pf-v5-c-table--responsive--BorderColor);
414
427
  }
415
428
  .pf-m-grid-md.pf-v5-c-table .pf-v5-c-table.pf-m-compact > tbody:where(.pf-v5-c-table__tbody) {
416
- border-top: 0;
429
+ border-block-start: 0;
417
430
  }
418
431
  .pf-m-grid-md.pf-v5-c-table tr:where(.pf-v5-c-table__tr):not(.pf-v5-c-table__expandable-row) {
419
- border-bottom: var(--pf-v5-c-table__tr--responsive--border-width--base) solid var(--pf-v5-c-table--responsive--BorderColor);
432
+ border-block-end: var(--pf-v5-c-table__tr--responsive--border-width--base) solid var(--pf-v5-c-table--responsive--BorderColor);
420
433
  }
421
434
  .pf-m-grid-md.pf-v5-c-table tr:where(.pf-v5-c-table__tr):last-child,
422
435
  .pf-m-grid-md.pf-v5-c-table tbody:where(.pf-v5-c-table__tbody):last-of-type:not(:only-of-type) > tr:where(.pf-v5-c-table__tr) {
423
- border-bottom-width: var(--pf-v5-c-table__tr--responsive--last-child--BorderBottomWidth);
436
+ border-block-end-width: var(--pf-v5-c-table__tr--responsive--last-child--BorderBottomWidth);
424
437
  }
425
438
  .pf-m-grid-md.pf-v5-c-table tbody:where(.pf-v5-c-table__tbody).pf-m-expanded {
426
- border-bottom: var(--pf-v5-c-table--border-width--base) solid var(--pf-v5-c-table--BorderColor);
439
+ border-block-end: var(--pf-v5-c-table--border-width--base) solid var(--pf-v5-c-table--BorderColor);
427
440
  }
428
441
  .pf-m-grid-md.pf-v5-c-table tbody:where(.pf-v5-c-table__tbody).pf-m-expanded tr:where(.pf-v5-c-table__tr):not(.pf-v5-c-table__expandable-row) {
429
- border-bottom: 0;
442
+ border-block-end: 0;
430
443
  }
431
444
  .pf-m-grid-md.pf-v5-c-table tbody:where(.pf-v5-c-table__tbody).pf-m-expanded:not(:last-of-type) {
432
- border-bottom: var(--pf-v5-c-table__tbody--responsive--border-width--base) solid var(--pf-v5-c-table--responsive--BorderColor);
445
+ border-block-end: var(--pf-v5-c-table__tbody--responsive--border-width--base) solid var(--pf-v5-c-table--responsive--BorderColor);
433
446
  }
434
447
  .pf-m-grid-md.pf-v5-c-table tr:where(.pf-v5-c-table__tr).pf-m-selected {
435
448
  --pf-v5-c-table__expandable-row--after--BorderLeftWidth: 0;
@@ -441,10 +454,16 @@
441
454
  height: auto;
442
455
  grid-auto-columns: max-content;
443
456
  grid-column-gap: var(--pf-v5-c-table__tr--responsive--GridColumnGap);
444
- padding: var(--pf-v5-c-table__tr--responsive--PaddingTop) var(--pf-v5-c-table__tr--responsive--PaddingRight) var(--pf-v5-c-table__tr--responsive--PaddingBottom) var(--pf-v5-c-table__tr--responsive--PaddingLeft);
457
+ padding-block-start: var(--pf-v5-c-table__tr--responsive--PaddingTop);
458
+ padding-inline-end: var(--pf-v5-c-table__tr--responsive--PaddingRight);
459
+ padding-block-end: var(--pf-v5-c-table__tr--responsive--PaddingBottom);
460
+ padding-inline-start: var(--pf-v5-c-table__tr--responsive--PaddingLeft);
445
461
  }
446
462
  .pf-m-grid-md.pf-v5-c-table tr:where(.pf-v5-c-table__tr):not(.pf-v5-c-table__expandable-row) > * {
447
- padding: var(--pf-v5-c-table--cell--responsive--PaddingTop) var(--pf-v5-c-table--cell--responsive--PaddingRight) var(--pf-v5-c-table--cell--responsive--PaddingBottom) var(--pf-v5-c-table--cell--responsive--PaddingLeft);
463
+ padding-block-start: var(--pf-v5-c-table--cell--responsive--PaddingTop);
464
+ padding-inline-end: var(--pf-v5-c-table--cell--responsive--PaddingRight);
465
+ padding-block-end: var(--pf-v5-c-table--cell--responsive--PaddingBottom);
466
+ padding-inline-start: var(--pf-v5-c-table--cell--responsive--PaddingLeft);
448
467
  }
449
468
  .pf-m-grid-md.pf-v5-c-table tr:where(.pf-v5-c-table__tr):not(.pf-v5-c-table__expandable-row) > *:first-child {
450
469
  --pf-v5-c-table--cell--responsive--PaddingTop: var(--pf-v5-c-table--cell--first-child--responsive--PaddingTop);
@@ -454,17 +473,18 @@
454
473
  --pf-v5-c-table__tr--responsive--PaddingBottom: var(--pf-v5-c-table--m-compact__tr--responsive--PaddingBottom);
455
474
  --pf-v5-c-table--cell--responsive--PaddingTop: var(--pf-v5-c-table--m-compact__tr__td--responsive--PaddingTop);
456
475
  --pf-v5-c-table--cell--responsive--PaddingBottom: var(--pf-v5-c-table--m-compact__tr__td--responsive--PaddingBottom);
476
+ --pf-v5-c-table__check--responsive--MarginTop: var(--pf-v5-c-table--m-compact__check--responsive--MarginTop);
457
477
  --pf-v5-c-table__check--input--MarginTop: 0;
458
478
  }
459
479
  .pf-m-grid-md.pf-v5-c-table.pf-m-compact .pf-v5-c-table__action {
460
- margin-top: var(--pf-v5-c-table--m-compact__action--responsive--MarginTop);
461
- margin-bottom: var(--pf-v5-c-table--m-compact__action--responsive--MarginTop);
480
+ margin-block-start: var(--pf-v5-c-table--m-compact__action--responsive--MarginTop);
481
+ margin-block-end: var(--pf-v5-c-table--m-compact__action--responsive--MarginTop);
462
482
  }
463
483
  .pf-m-grid-md.pf-v5-c-table.pf-m-compact .pf-v5-c-table__toggle .pf-v5-c-button {
464
- margin-bottom: var(--pf-v5-c-table--m-compact__toggle--c-button--responsive--MarginBottom);
484
+ margin-block-end: var(--pf-v5-c-table--m-compact__toggle--c-button--responsive--MarginBottom);
465
485
  }
466
486
  .pf-m-grid-md.pf-v5-c-table .pf-v5-c-table__icon > * {
467
- text-align: left;
487
+ text-align: start;
468
488
  }
469
489
  .pf-m-grid-md.pf-v5-c-table :where(.pf-v5-c-table__th, .pf-v5-c-table__td)[data-label] {
470
490
  --pf-v5-c-table--cell--hidden-visible--Display: var(--pf-v5-c-table--m-grid--cell--hidden-visible--Display);
@@ -478,7 +498,7 @@
478
498
  }
479
499
  .pf-m-grid-md.pf-v5-c-table :where(.pf-v5-c-table__th, .pf-v5-c-table__td)[data-label]::before {
480
500
  font-weight: bold;
481
- text-align: left;
501
+ text-align: start;
482
502
  content: attr(data-label);
483
503
  }
484
504
  .pf-m-grid-md.pf-v5-c-table tr:where(.pf-v5-c-table__tr) > *:first-child {
@@ -507,12 +527,12 @@
507
527
  }
508
528
  .pf-m-grid-md.pf-v5-c-table tbody:where(.pf-v5-c-table__tbody)::after {
509
529
  position: absolute;
510
- top: 0;
511
- bottom: 0;
512
- left: 0;
530
+ inset-block-start: 0;
531
+ inset-block-end: 0;
532
+ inset-inline-start: 0;
513
533
  content: "";
514
534
  border: 0;
515
- border-left: var(--pf-v5-c-table__tbody--after--BorderLeftWidth) solid var(--pf-v5-c-table__tbody--after--BorderColor);
535
+ border-inline-start: var(--pf-v5-c-table__tbody--after--BorderLeftWidth) solid var(--pf-v5-c-table__tbody--after--BorderColor);
516
536
  }
517
537
  .pf-m-grid-md.pf-v5-c-table tbody:where(.pf-v5-c-table__tbody).pf-m-expanded {
518
538
  --pf-v5-c-table__tbody--after--BorderLeftWidth: var(--pf-v5-c-table__tbody--after--border-width--base);
@@ -536,7 +556,7 @@
536
556
  display: block;
537
557
  max-height: var(--pf-v5-c-table__expandable-row--MaxHeight);
538
558
  overflow-y: auto;
539
- border-bottom: none;
559
+ border-block-end: none;
540
560
  box-shadow: none;
541
561
  }
542
562
  .pf-m-grid-md.pf-v5-c-table .pf-v5-c-table__expandable-row > * {
@@ -544,7 +564,7 @@
544
564
  display: block;
545
565
  }
546
566
  .pf-m-grid-md.pf-v5-c-table .pf-v5-c-table__expandable-row.pf-m-expanded {
547
- border-top-color: var(--pf-v5-c-table--BorderColor);
567
+ border-block-start-color: var(--pf-v5-c-table--BorderColor);
548
568
  }
549
569
  .pf-m-grid-md.pf-v5-c-table .pf-v5-c-table__expandable-row > :first-child:not(.pf-v5-c-table__check)::after {
550
570
  content: none;
@@ -557,8 +577,8 @@
557
577
  display: none;
558
578
  }
559
579
  .pf-m-grid-md.pf-v5-c-table .pf-v5-c-table__expandable-row .pf-v5-c-table__expandable-row-content {
560
- padding-right: var(--pf-v5-c-table__expandable-row-content--responsive--PaddingRight);
561
- padding-left: var(--pf-v5-c-table__expandable-row-content--responsive--PaddingLeft);
580
+ padding-inline-end: var(--pf-v5-c-table__expandable-row-content--responsive--PaddingRight);
581
+ padding-inline-start: var(--pf-v5-c-table__expandable-row-content--responsive--PaddingLeft);
562
582
  }
563
583
  .pf-m-grid-md.pf-v5-c-table tbody:where(.pf-v5-c-table__tbody).pf-m-hoverable {
564
584
  --pf-v5-c-table__tbody--after--BorderLeftWidth: 0;
@@ -571,9 +591,9 @@
571
591
  .pf-m-grid-md.pf-v5-c-table tbody:where(.pf-v5-c-table__tbody).pf-m-hoverable > tr:where(.pf-v5-c-table__tr)::after {
572
592
  content: "";
573
593
  position: absolute;
574
- top: 0;
575
- bottom: 0;
576
- left: 0;
594
+ inset-block-start: 0;
595
+ inset-block-end: 0;
596
+ inset-inline-start: 0;
577
597
  width: var(--pf-v5-c-table__tbody--after__tr--BorderLeftWidth);
578
598
  background-color: var(--pf-v5-c-table__tbody--after__tr--BorderLeftColor);
579
599
  }
@@ -588,9 +608,9 @@
588
608
  .pf-m-grid-md.pf-v5-c-table tr:where(.pf-v5-c-table__tr).pf-m-selected::after {
589
609
  content: "";
590
610
  position: absolute;
591
- top: 0;
592
- bottom: 0;
593
- left: 0;
611
+ inset-block-start: 0;
612
+ inset-block-end: 0;
613
+ inset-inline-start: 0;
594
614
  width: var(--pf-v5-c-table__tr--m-selected--after--BorderLeftWidth);
595
615
  background-color: var(--pf-v5-c-table__tr--m-selected--after--BorderLeftColor);
596
616
  }
@@ -605,7 +625,7 @@
605
625
  grid-row-start: 20;
606
626
  grid-column: -1;
607
627
  justify-self: end;
608
- padding-right: 0;
628
+ padding-inline-end: 0;
609
629
  }
610
630
  .pf-m-grid-md.pf-v5-c-table .pf-v5-c-table__toggle::after {
611
631
  content: none;
@@ -623,34 +643,39 @@
623
643
  grid-column-start: 2;
624
644
  }
625
645
  .pf-m-grid-md.pf-v5-c-table .pf-v5-c-table__check {
626
- margin-top: var(--pf-v5-c-table__check--responsive--MarginTop);
627
- margin-left: var(--pf-v5-c-table__check--responsive--MarginLeft);
646
+ margin-block-start: var(--pf-v5-c-table__check--responsive--MarginTop);
647
+ margin-inline-start: var(--pf-v5-c-table__check--responsive--MarginLeft);
648
+ line-height: 1;
628
649
  }
629
650
  .pf-m-grid-md.pf-v5-c-table .pf-v5-c-table__check ~ .pf-v5-c-table__favorite {
630
- margin-left: var(--pf-v5-c-table--m-grid__check--favorite--MarginLeft);
651
+ margin-inline-start: var(--pf-v5-c-table--m-grid__check--favorite--MarginLeft);
631
652
  }
632
653
  .pf-m-grid-md.pf-v5-c-table .pf-v5-c-table__check ~ .pf-v5-c-table__favorite ~ .pf-v5-c-table__action {
633
- margin-left: var(--pf-v5-c-table--m-grid__check--favorite--action--MarginLeft);
654
+ margin-inline-start: var(--pf-v5-c-table--m-grid__check--favorite--action--MarginLeft);
634
655
  }
635
656
  .pf-m-grid-md.pf-v5-c-table .pf-v5-c-table__check ~ .pf-v5-c-table__action {
636
- margin-left: var(--pf-v5-c-table__action--responsive--MarginLeft);
657
+ margin-inline-start: var(--pf-v5-c-table__action--responsive--MarginLeft);
658
+ }
659
+ .pf-m-grid-md.pf-v5-c-table .pf-v5-c-table__check label {
660
+ display: inline-block;
661
+ margin: 0;
637
662
  }
638
663
  .pf-m-grid-md.pf-v5-c-table .pf-v5-c-table__favorite {
639
- margin-top: var(--pf-v5-c-table--m-grid__favorite--MarginTop);
664
+ margin-block-start: var(--pf-v5-c-table--m-grid__favorite--MarginTop);
640
665
  }
641
666
  .pf-m-grid-md.pf-v5-c-table .pf-v5-c-table__favorite ~ .pf-v5-c-table__action {
642
- margin-left: var(--pf-v5-c-table--m-grid__favorite--action--MarginLeft);
667
+ margin-inline-start: var(--pf-v5-c-table--m-grid__favorite--action--MarginLeft);
643
668
  }
644
669
  .pf-m-grid-md.pf-v5-c-table .pf-v5-c-table__action {
645
- margin-top: var(--pf-v5-c-table--m-grid__action--MarginTop);
646
- text-align: right;
670
+ margin-block-start: var(--pf-v5-c-table--m-grid__action--MarginTop);
671
+ text-align: end;
647
672
  }
648
673
  }
649
674
  @media screen and (max-width: 768px) and (max-width: 576px) {
650
675
  .pf-m-grid-md.pf-v5-c-table .pf-v5-c-table__action {
651
676
  grid-row-start: 1;
652
677
  grid-column-start: 2;
653
- margin-left: 0;
678
+ margin-inline-start: 0;
654
679
  }
655
680
  }
656
681
  @media screen and (max-width: 768px) {
@@ -658,16 +683,12 @@
658
683
  grid-column: 2;
659
684
  grid-row: 2;
660
685
  }
661
- }
662
- @media screen and (max-width: 768px) {
663
686
  .pf-m-grid-md.pf-v5-c-table .pf-v5-c-table__toggle-icon {
664
687
  transition: var(--pf-v5-c-table__toggle__icon--Transition);
665
688
  }
666
689
  .pf-v5-c-button.pf-m-expanded > .pf-m-grid-md.pf-v5-c-table .pf-v5-c-table__toggle-icon {
667
690
  transform: rotate(var(--pf-v5-c-table__toggle--m-expanded__icon--Rotate));
668
691
  }
669
- }
670
- @media screen and (max-width: 768px) {
671
692
  .pf-m-grid-md.pf-v5-c-table :where(.pf-v5-c-table, .pf-v5-c-table__thead, .pf-v5-c-table__tbody, .pf-v5-c-table__tr, .pf-v5-c-table__th, .pf-v5-c-table__td, .pf-v5-c-table__text).pf-m-nowrap {
672
693
  --pf-v5-c-table--cell--Overflow: auto;
673
694
  }
@@ -678,8 +699,6 @@
678
699
  .pf-m-grid-md.pf-v5-c-table :where(.pf-v5-c-table, .pf-v5-c-table__thead, .pf-v5-c-table__tbody, .pf-v5-c-table__tr, .pf-v5-c-table__th, .pf-v5-c-table__td, .pf-v5-c-table__text).pf-m-truncate {
679
700
  --pf-v5-c-table--cell--MaxWidth: 100%;
680
701
  }
681
- }
682
- @media screen and (max-width: 768px) {
683
702
  .pf-m-grid-md.pf-v5-c-table [class*=pf-m-width] {
684
703
  --pf-v5-c-table--cell--Width: auto;
685
704
  }
@@ -722,26 +741,26 @@
722
741
  display: block;
723
742
  }
724
743
  .pf-m-grid-lg.pf-v5-c-table tbody:where(.pf-v5-c-table__tbody):first-of-type {
725
- border-top: var(--pf-v5-c-table__tbody--responsive--border-width--base) solid var(--pf-v5-c-table--responsive--BorderColor);
744
+ border-block-start: var(--pf-v5-c-table__tbody--responsive--border-width--base) solid var(--pf-v5-c-table--responsive--BorderColor);
726
745
  }
727
746
  .pf-m-grid-lg.pf-v5-c-table .pf-v5-c-table.pf-m-compact > tbody:where(.pf-v5-c-table__tbody) {
728
- border-top: 0;
747
+ border-block-start: 0;
729
748
  }
730
749
  .pf-m-grid-lg.pf-v5-c-table tr:where(.pf-v5-c-table__tr):not(.pf-v5-c-table__expandable-row) {
731
- border-bottom: var(--pf-v5-c-table__tr--responsive--border-width--base) solid var(--pf-v5-c-table--responsive--BorderColor);
750
+ border-block-end: var(--pf-v5-c-table__tr--responsive--border-width--base) solid var(--pf-v5-c-table--responsive--BorderColor);
732
751
  }
733
752
  .pf-m-grid-lg.pf-v5-c-table tr:where(.pf-v5-c-table__tr):last-child,
734
753
  .pf-m-grid-lg.pf-v5-c-table tbody:where(.pf-v5-c-table__tbody):last-of-type:not(:only-of-type) > tr:where(.pf-v5-c-table__tr) {
735
- border-bottom-width: var(--pf-v5-c-table__tr--responsive--last-child--BorderBottomWidth);
754
+ border-block-end-width: var(--pf-v5-c-table__tr--responsive--last-child--BorderBottomWidth);
736
755
  }
737
756
  .pf-m-grid-lg.pf-v5-c-table tbody:where(.pf-v5-c-table__tbody).pf-m-expanded {
738
- border-bottom: var(--pf-v5-c-table--border-width--base) solid var(--pf-v5-c-table--BorderColor);
757
+ border-block-end: var(--pf-v5-c-table--border-width--base) solid var(--pf-v5-c-table--BorderColor);
739
758
  }
740
759
  .pf-m-grid-lg.pf-v5-c-table tbody:where(.pf-v5-c-table__tbody).pf-m-expanded tr:where(.pf-v5-c-table__tr):not(.pf-v5-c-table__expandable-row) {
741
- border-bottom: 0;
760
+ border-block-end: 0;
742
761
  }
743
762
  .pf-m-grid-lg.pf-v5-c-table tbody:where(.pf-v5-c-table__tbody).pf-m-expanded:not(:last-of-type) {
744
- border-bottom: var(--pf-v5-c-table__tbody--responsive--border-width--base) solid var(--pf-v5-c-table--responsive--BorderColor);
763
+ border-block-end: var(--pf-v5-c-table__tbody--responsive--border-width--base) solid var(--pf-v5-c-table--responsive--BorderColor);
745
764
  }
746
765
  .pf-m-grid-lg.pf-v5-c-table tr:where(.pf-v5-c-table__tr).pf-m-selected {
747
766
  --pf-v5-c-table__expandable-row--after--BorderLeftWidth: 0;
@@ -753,10 +772,16 @@
753
772
  height: auto;
754
773
  grid-auto-columns: max-content;
755
774
  grid-column-gap: var(--pf-v5-c-table__tr--responsive--GridColumnGap);
756
- padding: var(--pf-v5-c-table__tr--responsive--PaddingTop) var(--pf-v5-c-table__tr--responsive--PaddingRight) var(--pf-v5-c-table__tr--responsive--PaddingBottom) var(--pf-v5-c-table__tr--responsive--PaddingLeft);
775
+ padding-block-start: var(--pf-v5-c-table__tr--responsive--PaddingTop);
776
+ padding-inline-end: var(--pf-v5-c-table__tr--responsive--PaddingRight);
777
+ padding-block-end: var(--pf-v5-c-table__tr--responsive--PaddingBottom);
778
+ padding-inline-start: var(--pf-v5-c-table__tr--responsive--PaddingLeft);
757
779
  }
758
780
  .pf-m-grid-lg.pf-v5-c-table tr:where(.pf-v5-c-table__tr):not(.pf-v5-c-table__expandable-row) > * {
759
- padding: var(--pf-v5-c-table--cell--responsive--PaddingTop) var(--pf-v5-c-table--cell--responsive--PaddingRight) var(--pf-v5-c-table--cell--responsive--PaddingBottom) var(--pf-v5-c-table--cell--responsive--PaddingLeft);
781
+ padding-block-start: var(--pf-v5-c-table--cell--responsive--PaddingTop);
782
+ padding-inline-end: var(--pf-v5-c-table--cell--responsive--PaddingRight);
783
+ padding-block-end: var(--pf-v5-c-table--cell--responsive--PaddingBottom);
784
+ padding-inline-start: var(--pf-v5-c-table--cell--responsive--PaddingLeft);
760
785
  }
761
786
  .pf-m-grid-lg.pf-v5-c-table tr:where(.pf-v5-c-table__tr):not(.pf-v5-c-table__expandable-row) > *:first-child {
762
787
  --pf-v5-c-table--cell--responsive--PaddingTop: var(--pf-v5-c-table--cell--first-child--responsive--PaddingTop);
@@ -766,17 +791,18 @@
766
791
  --pf-v5-c-table__tr--responsive--PaddingBottom: var(--pf-v5-c-table--m-compact__tr--responsive--PaddingBottom);
767
792
  --pf-v5-c-table--cell--responsive--PaddingTop: var(--pf-v5-c-table--m-compact__tr__td--responsive--PaddingTop);
768
793
  --pf-v5-c-table--cell--responsive--PaddingBottom: var(--pf-v5-c-table--m-compact__tr__td--responsive--PaddingBottom);
794
+ --pf-v5-c-table__check--responsive--MarginTop: var(--pf-v5-c-table--m-compact__check--responsive--MarginTop);
769
795
  --pf-v5-c-table__check--input--MarginTop: 0;
770
796
  }
771
797
  .pf-m-grid-lg.pf-v5-c-table.pf-m-compact .pf-v5-c-table__action {
772
- margin-top: var(--pf-v5-c-table--m-compact__action--responsive--MarginTop);
773
- margin-bottom: var(--pf-v5-c-table--m-compact__action--responsive--MarginTop);
798
+ margin-block-start: var(--pf-v5-c-table--m-compact__action--responsive--MarginTop);
799
+ margin-block-end: var(--pf-v5-c-table--m-compact__action--responsive--MarginTop);
774
800
  }
775
801
  .pf-m-grid-lg.pf-v5-c-table.pf-m-compact .pf-v5-c-table__toggle .pf-v5-c-button {
776
- margin-bottom: var(--pf-v5-c-table--m-compact__toggle--c-button--responsive--MarginBottom);
802
+ margin-block-end: var(--pf-v5-c-table--m-compact__toggle--c-button--responsive--MarginBottom);
777
803
  }
778
804
  .pf-m-grid-lg.pf-v5-c-table .pf-v5-c-table__icon > * {
779
- text-align: left;
805
+ text-align: start;
780
806
  }
781
807
  .pf-m-grid-lg.pf-v5-c-table :where(.pf-v5-c-table__th, .pf-v5-c-table__td)[data-label] {
782
808
  --pf-v5-c-table--cell--hidden-visible--Display: var(--pf-v5-c-table--m-grid--cell--hidden-visible--Display);
@@ -790,7 +816,7 @@
790
816
  }
791
817
  .pf-m-grid-lg.pf-v5-c-table :where(.pf-v5-c-table__th, .pf-v5-c-table__td)[data-label]::before {
792
818
  font-weight: bold;
793
- text-align: left;
819
+ text-align: start;
794
820
  content: attr(data-label);
795
821
  }
796
822
  .pf-m-grid-lg.pf-v5-c-table tr:where(.pf-v5-c-table__tr) > *:first-child {
@@ -819,12 +845,12 @@
819
845
  }
820
846
  .pf-m-grid-lg.pf-v5-c-table tbody:where(.pf-v5-c-table__tbody)::after {
821
847
  position: absolute;
822
- top: 0;
823
- bottom: 0;
824
- left: 0;
848
+ inset-block-start: 0;
849
+ inset-block-end: 0;
850
+ inset-inline-start: 0;
825
851
  content: "";
826
852
  border: 0;
827
- border-left: var(--pf-v5-c-table__tbody--after--BorderLeftWidth) solid var(--pf-v5-c-table__tbody--after--BorderColor);
853
+ border-inline-start: var(--pf-v5-c-table__tbody--after--BorderLeftWidth) solid var(--pf-v5-c-table__tbody--after--BorderColor);
828
854
  }
829
855
  .pf-m-grid-lg.pf-v5-c-table tbody:where(.pf-v5-c-table__tbody).pf-m-expanded {
830
856
  --pf-v5-c-table__tbody--after--BorderLeftWidth: var(--pf-v5-c-table__tbody--after--border-width--base);
@@ -848,7 +874,7 @@
848
874
  display: block;
849
875
  max-height: var(--pf-v5-c-table__expandable-row--MaxHeight);
850
876
  overflow-y: auto;
851
- border-bottom: none;
877
+ border-block-end: none;
852
878
  box-shadow: none;
853
879
  }
854
880
  .pf-m-grid-lg.pf-v5-c-table .pf-v5-c-table__expandable-row > * {
@@ -856,7 +882,7 @@
856
882
  display: block;
857
883
  }
858
884
  .pf-m-grid-lg.pf-v5-c-table .pf-v5-c-table__expandable-row.pf-m-expanded {
859
- border-top-color: var(--pf-v5-c-table--BorderColor);
885
+ border-block-start-color: var(--pf-v5-c-table--BorderColor);
860
886
  }
861
887
  .pf-m-grid-lg.pf-v5-c-table .pf-v5-c-table__expandable-row > :first-child:not(.pf-v5-c-table__check)::after {
862
888
  content: none;
@@ -869,8 +895,8 @@
869
895
  display: none;
870
896
  }
871
897
  .pf-m-grid-lg.pf-v5-c-table .pf-v5-c-table__expandable-row .pf-v5-c-table__expandable-row-content {
872
- padding-right: var(--pf-v5-c-table__expandable-row-content--responsive--PaddingRight);
873
- padding-left: var(--pf-v5-c-table__expandable-row-content--responsive--PaddingLeft);
898
+ padding-inline-end: var(--pf-v5-c-table__expandable-row-content--responsive--PaddingRight);
899
+ padding-inline-start: var(--pf-v5-c-table__expandable-row-content--responsive--PaddingLeft);
874
900
  }
875
901
  .pf-m-grid-lg.pf-v5-c-table tbody:where(.pf-v5-c-table__tbody).pf-m-hoverable {
876
902
  --pf-v5-c-table__tbody--after--BorderLeftWidth: 0;
@@ -883,9 +909,9 @@
883
909
  .pf-m-grid-lg.pf-v5-c-table tbody:where(.pf-v5-c-table__tbody).pf-m-hoverable > tr:where(.pf-v5-c-table__tr)::after {
884
910
  content: "";
885
911
  position: absolute;
886
- top: 0;
887
- bottom: 0;
888
- left: 0;
912
+ inset-block-start: 0;
913
+ inset-block-end: 0;
914
+ inset-inline-start: 0;
889
915
  width: var(--pf-v5-c-table__tbody--after__tr--BorderLeftWidth);
890
916
  background-color: var(--pf-v5-c-table__tbody--after__tr--BorderLeftColor);
891
917
  }
@@ -900,9 +926,9 @@
900
926
  .pf-m-grid-lg.pf-v5-c-table tr:where(.pf-v5-c-table__tr).pf-m-selected::after {
901
927
  content: "";
902
928
  position: absolute;
903
- top: 0;
904
- bottom: 0;
905
- left: 0;
929
+ inset-block-start: 0;
930
+ inset-block-end: 0;
931
+ inset-inline-start: 0;
906
932
  width: var(--pf-v5-c-table__tr--m-selected--after--BorderLeftWidth);
907
933
  background-color: var(--pf-v5-c-table__tr--m-selected--after--BorderLeftColor);
908
934
  }
@@ -917,7 +943,7 @@
917
943
  grid-row-start: 20;
918
944
  grid-column: -1;
919
945
  justify-self: end;
920
- padding-right: 0;
946
+ padding-inline-end: 0;
921
947
  }
922
948
  .pf-m-grid-lg.pf-v5-c-table .pf-v5-c-table__toggle::after {
923
949
  content: none;
@@ -935,34 +961,39 @@
935
961
  grid-column-start: 2;
936
962
  }
937
963
  .pf-m-grid-lg.pf-v5-c-table .pf-v5-c-table__check {
938
- margin-top: var(--pf-v5-c-table__check--responsive--MarginTop);
939
- margin-left: var(--pf-v5-c-table__check--responsive--MarginLeft);
964
+ margin-block-start: var(--pf-v5-c-table__check--responsive--MarginTop);
965
+ margin-inline-start: var(--pf-v5-c-table__check--responsive--MarginLeft);
966
+ line-height: 1;
940
967
  }
941
968
  .pf-m-grid-lg.pf-v5-c-table .pf-v5-c-table__check ~ .pf-v5-c-table__favorite {
942
- margin-left: var(--pf-v5-c-table--m-grid__check--favorite--MarginLeft);
969
+ margin-inline-start: var(--pf-v5-c-table--m-grid__check--favorite--MarginLeft);
943
970
  }
944
971
  .pf-m-grid-lg.pf-v5-c-table .pf-v5-c-table__check ~ .pf-v5-c-table__favorite ~ .pf-v5-c-table__action {
945
- margin-left: var(--pf-v5-c-table--m-grid__check--favorite--action--MarginLeft);
972
+ margin-inline-start: var(--pf-v5-c-table--m-grid__check--favorite--action--MarginLeft);
946
973
  }
947
974
  .pf-m-grid-lg.pf-v5-c-table .pf-v5-c-table__check ~ .pf-v5-c-table__action {
948
- margin-left: var(--pf-v5-c-table__action--responsive--MarginLeft);
975
+ margin-inline-start: var(--pf-v5-c-table__action--responsive--MarginLeft);
976
+ }
977
+ .pf-m-grid-lg.pf-v5-c-table .pf-v5-c-table__check label {
978
+ display: inline-block;
979
+ margin: 0;
949
980
  }
950
981
  .pf-m-grid-lg.pf-v5-c-table .pf-v5-c-table__favorite {
951
- margin-top: var(--pf-v5-c-table--m-grid__favorite--MarginTop);
982
+ margin-block-start: var(--pf-v5-c-table--m-grid__favorite--MarginTop);
952
983
  }
953
984
  .pf-m-grid-lg.pf-v5-c-table .pf-v5-c-table__favorite ~ .pf-v5-c-table__action {
954
- margin-left: var(--pf-v5-c-table--m-grid__favorite--action--MarginLeft);
985
+ margin-inline-start: var(--pf-v5-c-table--m-grid__favorite--action--MarginLeft);
955
986
  }
956
987
  .pf-m-grid-lg.pf-v5-c-table .pf-v5-c-table__action {
957
- margin-top: var(--pf-v5-c-table--m-grid__action--MarginTop);
958
- text-align: right;
988
+ margin-block-start: var(--pf-v5-c-table--m-grid__action--MarginTop);
989
+ text-align: end;
959
990
  }
960
991
  }
961
992
  @media screen and (max-width: 992px) and (max-width: 576px) {
962
993
  .pf-m-grid-lg.pf-v5-c-table .pf-v5-c-table__action {
963
994
  grid-row-start: 1;
964
995
  grid-column-start: 2;
965
- margin-left: 0;
996
+ margin-inline-start: 0;
966
997
  }
967
998
  }
968
999
  @media screen and (max-width: 992px) {
@@ -970,16 +1001,12 @@
970
1001
  grid-column: 2;
971
1002
  grid-row: 2;
972
1003
  }
973
- }
974
- @media screen and (max-width: 992px) {
975
1004
  .pf-m-grid-lg.pf-v5-c-table .pf-v5-c-table__toggle-icon {
976
1005
  transition: var(--pf-v5-c-table__toggle__icon--Transition);
977
1006
  }
978
1007
  .pf-v5-c-button.pf-m-expanded > .pf-m-grid-lg.pf-v5-c-table .pf-v5-c-table__toggle-icon {
979
1008
  transform: rotate(var(--pf-v5-c-table__toggle--m-expanded__icon--Rotate));
980
1009
  }
981
- }
982
- @media screen and (max-width: 992px) {
983
1010
  .pf-m-grid-lg.pf-v5-c-table :where(.pf-v5-c-table, .pf-v5-c-table__thead, .pf-v5-c-table__tbody, .pf-v5-c-table__tr, .pf-v5-c-table__th, .pf-v5-c-table__td, .pf-v5-c-table__text).pf-m-nowrap {
984
1011
  --pf-v5-c-table--cell--Overflow: auto;
985
1012
  }
@@ -990,8 +1017,6 @@
990
1017
  .pf-m-grid-lg.pf-v5-c-table :where(.pf-v5-c-table, .pf-v5-c-table__thead, .pf-v5-c-table__tbody, .pf-v5-c-table__tr, .pf-v5-c-table__th, .pf-v5-c-table__td, .pf-v5-c-table__text).pf-m-truncate {
991
1018
  --pf-v5-c-table--cell--MaxWidth: 100%;
992
1019
  }
993
- }
994
- @media screen and (max-width: 992px) {
995
1020
  .pf-m-grid-lg.pf-v5-c-table [class*=pf-m-width] {
996
1021
  --pf-v5-c-table--cell--Width: auto;
997
1022
  }
@@ -1034,26 +1059,26 @@
1034
1059
  display: block;
1035
1060
  }
1036
1061
  .pf-m-grid-xl.pf-v5-c-table tbody:where(.pf-v5-c-table__tbody):first-of-type {
1037
- border-top: var(--pf-v5-c-table__tbody--responsive--border-width--base) solid var(--pf-v5-c-table--responsive--BorderColor);
1062
+ border-block-start: var(--pf-v5-c-table__tbody--responsive--border-width--base) solid var(--pf-v5-c-table--responsive--BorderColor);
1038
1063
  }
1039
1064
  .pf-m-grid-xl.pf-v5-c-table .pf-v5-c-table.pf-m-compact > tbody:where(.pf-v5-c-table__tbody) {
1040
- border-top: 0;
1065
+ border-block-start: 0;
1041
1066
  }
1042
1067
  .pf-m-grid-xl.pf-v5-c-table tr:where(.pf-v5-c-table__tr):not(.pf-v5-c-table__expandable-row) {
1043
- border-bottom: var(--pf-v5-c-table__tr--responsive--border-width--base) solid var(--pf-v5-c-table--responsive--BorderColor);
1068
+ border-block-end: var(--pf-v5-c-table__tr--responsive--border-width--base) solid var(--pf-v5-c-table--responsive--BorderColor);
1044
1069
  }
1045
1070
  .pf-m-grid-xl.pf-v5-c-table tr:where(.pf-v5-c-table__tr):last-child,
1046
1071
  .pf-m-grid-xl.pf-v5-c-table tbody:where(.pf-v5-c-table__tbody):last-of-type:not(:only-of-type) > tr:where(.pf-v5-c-table__tr) {
1047
- border-bottom-width: var(--pf-v5-c-table__tr--responsive--last-child--BorderBottomWidth);
1072
+ border-block-end-width: var(--pf-v5-c-table__tr--responsive--last-child--BorderBottomWidth);
1048
1073
  }
1049
1074
  .pf-m-grid-xl.pf-v5-c-table tbody:where(.pf-v5-c-table__tbody).pf-m-expanded {
1050
- border-bottom: var(--pf-v5-c-table--border-width--base) solid var(--pf-v5-c-table--BorderColor);
1075
+ border-block-end: var(--pf-v5-c-table--border-width--base) solid var(--pf-v5-c-table--BorderColor);
1051
1076
  }
1052
1077
  .pf-m-grid-xl.pf-v5-c-table tbody:where(.pf-v5-c-table__tbody).pf-m-expanded tr:where(.pf-v5-c-table__tr):not(.pf-v5-c-table__expandable-row) {
1053
- border-bottom: 0;
1078
+ border-block-end: 0;
1054
1079
  }
1055
1080
  .pf-m-grid-xl.pf-v5-c-table tbody:where(.pf-v5-c-table__tbody).pf-m-expanded:not(:last-of-type) {
1056
- border-bottom: var(--pf-v5-c-table__tbody--responsive--border-width--base) solid var(--pf-v5-c-table--responsive--BorderColor);
1081
+ border-block-end: var(--pf-v5-c-table__tbody--responsive--border-width--base) solid var(--pf-v5-c-table--responsive--BorderColor);
1057
1082
  }
1058
1083
  .pf-m-grid-xl.pf-v5-c-table tr:where(.pf-v5-c-table__tr).pf-m-selected {
1059
1084
  --pf-v5-c-table__expandable-row--after--BorderLeftWidth: 0;
@@ -1065,10 +1090,16 @@
1065
1090
  height: auto;
1066
1091
  grid-auto-columns: max-content;
1067
1092
  grid-column-gap: var(--pf-v5-c-table__tr--responsive--GridColumnGap);
1068
- padding: var(--pf-v5-c-table__tr--responsive--PaddingTop) var(--pf-v5-c-table__tr--responsive--PaddingRight) var(--pf-v5-c-table__tr--responsive--PaddingBottom) var(--pf-v5-c-table__tr--responsive--PaddingLeft);
1093
+ padding-block-start: var(--pf-v5-c-table__tr--responsive--PaddingTop);
1094
+ padding-inline-end: var(--pf-v5-c-table__tr--responsive--PaddingRight);
1095
+ padding-block-end: var(--pf-v5-c-table__tr--responsive--PaddingBottom);
1096
+ padding-inline-start: var(--pf-v5-c-table__tr--responsive--PaddingLeft);
1069
1097
  }
1070
1098
  .pf-m-grid-xl.pf-v5-c-table tr:where(.pf-v5-c-table__tr):not(.pf-v5-c-table__expandable-row) > * {
1071
- padding: var(--pf-v5-c-table--cell--responsive--PaddingTop) var(--pf-v5-c-table--cell--responsive--PaddingRight) var(--pf-v5-c-table--cell--responsive--PaddingBottom) var(--pf-v5-c-table--cell--responsive--PaddingLeft);
1099
+ padding-block-start: var(--pf-v5-c-table--cell--responsive--PaddingTop);
1100
+ padding-inline-end: var(--pf-v5-c-table--cell--responsive--PaddingRight);
1101
+ padding-block-end: var(--pf-v5-c-table--cell--responsive--PaddingBottom);
1102
+ padding-inline-start: var(--pf-v5-c-table--cell--responsive--PaddingLeft);
1072
1103
  }
1073
1104
  .pf-m-grid-xl.pf-v5-c-table tr:where(.pf-v5-c-table__tr):not(.pf-v5-c-table__expandable-row) > *:first-child {
1074
1105
  --pf-v5-c-table--cell--responsive--PaddingTop: var(--pf-v5-c-table--cell--first-child--responsive--PaddingTop);
@@ -1078,17 +1109,18 @@
1078
1109
  --pf-v5-c-table__tr--responsive--PaddingBottom: var(--pf-v5-c-table--m-compact__tr--responsive--PaddingBottom);
1079
1110
  --pf-v5-c-table--cell--responsive--PaddingTop: var(--pf-v5-c-table--m-compact__tr__td--responsive--PaddingTop);
1080
1111
  --pf-v5-c-table--cell--responsive--PaddingBottom: var(--pf-v5-c-table--m-compact__tr__td--responsive--PaddingBottom);
1112
+ --pf-v5-c-table__check--responsive--MarginTop: var(--pf-v5-c-table--m-compact__check--responsive--MarginTop);
1081
1113
  --pf-v5-c-table__check--input--MarginTop: 0;
1082
1114
  }
1083
1115
  .pf-m-grid-xl.pf-v5-c-table.pf-m-compact .pf-v5-c-table__action {
1084
- margin-top: var(--pf-v5-c-table--m-compact__action--responsive--MarginTop);
1085
- margin-bottom: var(--pf-v5-c-table--m-compact__action--responsive--MarginTop);
1116
+ margin-block-start: var(--pf-v5-c-table--m-compact__action--responsive--MarginTop);
1117
+ margin-block-end: var(--pf-v5-c-table--m-compact__action--responsive--MarginTop);
1086
1118
  }
1087
1119
  .pf-m-grid-xl.pf-v5-c-table.pf-m-compact .pf-v5-c-table__toggle .pf-v5-c-button {
1088
- margin-bottom: var(--pf-v5-c-table--m-compact__toggle--c-button--responsive--MarginBottom);
1120
+ margin-block-end: var(--pf-v5-c-table--m-compact__toggle--c-button--responsive--MarginBottom);
1089
1121
  }
1090
1122
  .pf-m-grid-xl.pf-v5-c-table .pf-v5-c-table__icon > * {
1091
- text-align: left;
1123
+ text-align: start;
1092
1124
  }
1093
1125
  .pf-m-grid-xl.pf-v5-c-table :where(.pf-v5-c-table__th, .pf-v5-c-table__td)[data-label] {
1094
1126
  --pf-v5-c-table--cell--hidden-visible--Display: var(--pf-v5-c-table--m-grid--cell--hidden-visible--Display);
@@ -1102,7 +1134,7 @@
1102
1134
  }
1103
1135
  .pf-m-grid-xl.pf-v5-c-table :where(.pf-v5-c-table__th, .pf-v5-c-table__td)[data-label]::before {
1104
1136
  font-weight: bold;
1105
- text-align: left;
1137
+ text-align: start;
1106
1138
  content: attr(data-label);
1107
1139
  }
1108
1140
  .pf-m-grid-xl.pf-v5-c-table tr:where(.pf-v5-c-table__tr) > *:first-child {
@@ -1131,12 +1163,12 @@
1131
1163
  }
1132
1164
  .pf-m-grid-xl.pf-v5-c-table tbody:where(.pf-v5-c-table__tbody)::after {
1133
1165
  position: absolute;
1134
- top: 0;
1135
- bottom: 0;
1136
- left: 0;
1166
+ inset-block-start: 0;
1167
+ inset-block-end: 0;
1168
+ inset-inline-start: 0;
1137
1169
  content: "";
1138
1170
  border: 0;
1139
- border-left: var(--pf-v5-c-table__tbody--after--BorderLeftWidth) solid var(--pf-v5-c-table__tbody--after--BorderColor);
1171
+ border-inline-start: var(--pf-v5-c-table__tbody--after--BorderLeftWidth) solid var(--pf-v5-c-table__tbody--after--BorderColor);
1140
1172
  }
1141
1173
  .pf-m-grid-xl.pf-v5-c-table tbody:where(.pf-v5-c-table__tbody).pf-m-expanded {
1142
1174
  --pf-v5-c-table__tbody--after--BorderLeftWidth: var(--pf-v5-c-table__tbody--after--border-width--base);
@@ -1160,7 +1192,7 @@
1160
1192
  display: block;
1161
1193
  max-height: var(--pf-v5-c-table__expandable-row--MaxHeight);
1162
1194
  overflow-y: auto;
1163
- border-bottom: none;
1195
+ border-block-end: none;
1164
1196
  box-shadow: none;
1165
1197
  }
1166
1198
  .pf-m-grid-xl.pf-v5-c-table .pf-v5-c-table__expandable-row > * {
@@ -1168,7 +1200,7 @@
1168
1200
  display: block;
1169
1201
  }
1170
1202
  .pf-m-grid-xl.pf-v5-c-table .pf-v5-c-table__expandable-row.pf-m-expanded {
1171
- border-top-color: var(--pf-v5-c-table--BorderColor);
1203
+ border-block-start-color: var(--pf-v5-c-table--BorderColor);
1172
1204
  }
1173
1205
  .pf-m-grid-xl.pf-v5-c-table .pf-v5-c-table__expandable-row > :first-child:not(.pf-v5-c-table__check)::after {
1174
1206
  content: none;
@@ -1181,8 +1213,8 @@
1181
1213
  display: none;
1182
1214
  }
1183
1215
  .pf-m-grid-xl.pf-v5-c-table .pf-v5-c-table__expandable-row .pf-v5-c-table__expandable-row-content {
1184
- padding-right: var(--pf-v5-c-table__expandable-row-content--responsive--PaddingRight);
1185
- padding-left: var(--pf-v5-c-table__expandable-row-content--responsive--PaddingLeft);
1216
+ padding-inline-end: var(--pf-v5-c-table__expandable-row-content--responsive--PaddingRight);
1217
+ padding-inline-start: var(--pf-v5-c-table__expandable-row-content--responsive--PaddingLeft);
1186
1218
  }
1187
1219
  .pf-m-grid-xl.pf-v5-c-table tbody:where(.pf-v5-c-table__tbody).pf-m-hoverable {
1188
1220
  --pf-v5-c-table__tbody--after--BorderLeftWidth: 0;
@@ -1195,9 +1227,9 @@
1195
1227
  .pf-m-grid-xl.pf-v5-c-table tbody:where(.pf-v5-c-table__tbody).pf-m-hoverable > tr:where(.pf-v5-c-table__tr)::after {
1196
1228
  content: "";
1197
1229
  position: absolute;
1198
- top: 0;
1199
- bottom: 0;
1200
- left: 0;
1230
+ inset-block-start: 0;
1231
+ inset-block-end: 0;
1232
+ inset-inline-start: 0;
1201
1233
  width: var(--pf-v5-c-table__tbody--after__tr--BorderLeftWidth);
1202
1234
  background-color: var(--pf-v5-c-table__tbody--after__tr--BorderLeftColor);
1203
1235
  }
@@ -1212,9 +1244,9 @@
1212
1244
  .pf-m-grid-xl.pf-v5-c-table tr:where(.pf-v5-c-table__tr).pf-m-selected::after {
1213
1245
  content: "";
1214
1246
  position: absolute;
1215
- top: 0;
1216
- bottom: 0;
1217
- left: 0;
1247
+ inset-block-start: 0;
1248
+ inset-block-end: 0;
1249
+ inset-inline-start: 0;
1218
1250
  width: var(--pf-v5-c-table__tr--m-selected--after--BorderLeftWidth);
1219
1251
  background-color: var(--pf-v5-c-table__tr--m-selected--after--BorderLeftColor);
1220
1252
  }
@@ -1229,7 +1261,7 @@
1229
1261
  grid-row-start: 20;
1230
1262
  grid-column: -1;
1231
1263
  justify-self: end;
1232
- padding-right: 0;
1264
+ padding-inline-end: 0;
1233
1265
  }
1234
1266
  .pf-m-grid-xl.pf-v5-c-table .pf-v5-c-table__toggle::after {
1235
1267
  content: none;
@@ -1247,34 +1279,39 @@
1247
1279
  grid-column-start: 2;
1248
1280
  }
1249
1281
  .pf-m-grid-xl.pf-v5-c-table .pf-v5-c-table__check {
1250
- margin-top: var(--pf-v5-c-table__check--responsive--MarginTop);
1251
- margin-left: var(--pf-v5-c-table__check--responsive--MarginLeft);
1282
+ margin-block-start: var(--pf-v5-c-table__check--responsive--MarginTop);
1283
+ margin-inline-start: var(--pf-v5-c-table__check--responsive--MarginLeft);
1284
+ line-height: 1;
1252
1285
  }
1253
1286
  .pf-m-grid-xl.pf-v5-c-table .pf-v5-c-table__check ~ .pf-v5-c-table__favorite {
1254
- margin-left: var(--pf-v5-c-table--m-grid__check--favorite--MarginLeft);
1287
+ margin-inline-start: var(--pf-v5-c-table--m-grid__check--favorite--MarginLeft);
1255
1288
  }
1256
1289
  .pf-m-grid-xl.pf-v5-c-table .pf-v5-c-table__check ~ .pf-v5-c-table__favorite ~ .pf-v5-c-table__action {
1257
- margin-left: var(--pf-v5-c-table--m-grid__check--favorite--action--MarginLeft);
1290
+ margin-inline-start: var(--pf-v5-c-table--m-grid__check--favorite--action--MarginLeft);
1258
1291
  }
1259
1292
  .pf-m-grid-xl.pf-v5-c-table .pf-v5-c-table__check ~ .pf-v5-c-table__action {
1260
- margin-left: var(--pf-v5-c-table__action--responsive--MarginLeft);
1293
+ margin-inline-start: var(--pf-v5-c-table__action--responsive--MarginLeft);
1294
+ }
1295
+ .pf-m-grid-xl.pf-v5-c-table .pf-v5-c-table__check label {
1296
+ display: inline-block;
1297
+ margin: 0;
1261
1298
  }
1262
1299
  .pf-m-grid-xl.pf-v5-c-table .pf-v5-c-table__favorite {
1263
- margin-top: var(--pf-v5-c-table--m-grid__favorite--MarginTop);
1300
+ margin-block-start: var(--pf-v5-c-table--m-grid__favorite--MarginTop);
1264
1301
  }
1265
1302
  .pf-m-grid-xl.pf-v5-c-table .pf-v5-c-table__favorite ~ .pf-v5-c-table__action {
1266
- margin-left: var(--pf-v5-c-table--m-grid__favorite--action--MarginLeft);
1303
+ margin-inline-start: var(--pf-v5-c-table--m-grid__favorite--action--MarginLeft);
1267
1304
  }
1268
1305
  .pf-m-grid-xl.pf-v5-c-table .pf-v5-c-table__action {
1269
- margin-top: var(--pf-v5-c-table--m-grid__action--MarginTop);
1270
- text-align: right;
1306
+ margin-block-start: var(--pf-v5-c-table--m-grid__action--MarginTop);
1307
+ text-align: end;
1271
1308
  }
1272
1309
  }
1273
1310
  @media screen and (max-width: 1200px) and (max-width: 576px) {
1274
1311
  .pf-m-grid-xl.pf-v5-c-table .pf-v5-c-table__action {
1275
1312
  grid-row-start: 1;
1276
1313
  grid-column-start: 2;
1277
- margin-left: 0;
1314
+ margin-inline-start: 0;
1278
1315
  }
1279
1316
  }
1280
1317
  @media screen and (max-width: 1200px) {
@@ -1282,16 +1319,12 @@
1282
1319
  grid-column: 2;
1283
1320
  grid-row: 2;
1284
1321
  }
1285
- }
1286
- @media screen and (max-width: 1200px) {
1287
1322
  .pf-m-grid-xl.pf-v5-c-table .pf-v5-c-table__toggle-icon {
1288
1323
  transition: var(--pf-v5-c-table__toggle__icon--Transition);
1289
1324
  }
1290
1325
  .pf-v5-c-button.pf-m-expanded > .pf-m-grid-xl.pf-v5-c-table .pf-v5-c-table__toggle-icon {
1291
1326
  transform: rotate(var(--pf-v5-c-table__toggle--m-expanded__icon--Rotate));
1292
1327
  }
1293
- }
1294
- @media screen and (max-width: 1200px) {
1295
1328
  .pf-m-grid-xl.pf-v5-c-table :where(.pf-v5-c-table, .pf-v5-c-table__thead, .pf-v5-c-table__tbody, .pf-v5-c-table__tr, .pf-v5-c-table__th, .pf-v5-c-table__td, .pf-v5-c-table__text).pf-m-nowrap {
1296
1329
  --pf-v5-c-table--cell--Overflow: auto;
1297
1330
  }
@@ -1302,8 +1335,6 @@
1302
1335
  .pf-m-grid-xl.pf-v5-c-table :where(.pf-v5-c-table, .pf-v5-c-table__thead, .pf-v5-c-table__tbody, .pf-v5-c-table__tr, .pf-v5-c-table__th, .pf-v5-c-table__td, .pf-v5-c-table__text).pf-m-truncate {
1303
1336
  --pf-v5-c-table--cell--MaxWidth: 100%;
1304
1337
  }
1305
- }
1306
- @media screen and (max-width: 1200px) {
1307
1338
  .pf-m-grid-xl.pf-v5-c-table [class*=pf-m-width] {
1308
1339
  --pf-v5-c-table--cell--Width: auto;
1309
1340
  }
@@ -1346,26 +1377,26 @@
1346
1377
  display: block;
1347
1378
  }
1348
1379
  .pf-m-grid-2xl.pf-v5-c-table tbody:where(.pf-v5-c-table__tbody):first-of-type {
1349
- border-top: var(--pf-v5-c-table__tbody--responsive--border-width--base) solid var(--pf-v5-c-table--responsive--BorderColor);
1380
+ border-block-start: var(--pf-v5-c-table__tbody--responsive--border-width--base) solid var(--pf-v5-c-table--responsive--BorderColor);
1350
1381
  }
1351
1382
  .pf-m-grid-2xl.pf-v5-c-table .pf-v5-c-table.pf-m-compact > tbody:where(.pf-v5-c-table__tbody) {
1352
- border-top: 0;
1383
+ border-block-start: 0;
1353
1384
  }
1354
1385
  .pf-m-grid-2xl.pf-v5-c-table tr:where(.pf-v5-c-table__tr):not(.pf-v5-c-table__expandable-row) {
1355
- border-bottom: var(--pf-v5-c-table__tr--responsive--border-width--base) solid var(--pf-v5-c-table--responsive--BorderColor);
1386
+ border-block-end: var(--pf-v5-c-table__tr--responsive--border-width--base) solid var(--pf-v5-c-table--responsive--BorderColor);
1356
1387
  }
1357
1388
  .pf-m-grid-2xl.pf-v5-c-table tr:where(.pf-v5-c-table__tr):last-child,
1358
1389
  .pf-m-grid-2xl.pf-v5-c-table tbody:where(.pf-v5-c-table__tbody):last-of-type:not(:only-of-type) > tr:where(.pf-v5-c-table__tr) {
1359
- border-bottom-width: var(--pf-v5-c-table__tr--responsive--last-child--BorderBottomWidth);
1390
+ border-block-end-width: var(--pf-v5-c-table__tr--responsive--last-child--BorderBottomWidth);
1360
1391
  }
1361
1392
  .pf-m-grid-2xl.pf-v5-c-table tbody:where(.pf-v5-c-table__tbody).pf-m-expanded {
1362
- border-bottom: var(--pf-v5-c-table--border-width--base) solid var(--pf-v5-c-table--BorderColor);
1393
+ border-block-end: var(--pf-v5-c-table--border-width--base) solid var(--pf-v5-c-table--BorderColor);
1363
1394
  }
1364
1395
  .pf-m-grid-2xl.pf-v5-c-table tbody:where(.pf-v5-c-table__tbody).pf-m-expanded tr:where(.pf-v5-c-table__tr):not(.pf-v5-c-table__expandable-row) {
1365
- border-bottom: 0;
1396
+ border-block-end: 0;
1366
1397
  }
1367
1398
  .pf-m-grid-2xl.pf-v5-c-table tbody:where(.pf-v5-c-table__tbody).pf-m-expanded:not(:last-of-type) {
1368
- border-bottom: var(--pf-v5-c-table__tbody--responsive--border-width--base) solid var(--pf-v5-c-table--responsive--BorderColor);
1399
+ border-block-end: var(--pf-v5-c-table__tbody--responsive--border-width--base) solid var(--pf-v5-c-table--responsive--BorderColor);
1369
1400
  }
1370
1401
  .pf-m-grid-2xl.pf-v5-c-table tr:where(.pf-v5-c-table__tr).pf-m-selected {
1371
1402
  --pf-v5-c-table__expandable-row--after--BorderLeftWidth: 0;
@@ -1377,10 +1408,16 @@
1377
1408
  height: auto;
1378
1409
  grid-auto-columns: max-content;
1379
1410
  grid-column-gap: var(--pf-v5-c-table__tr--responsive--GridColumnGap);
1380
- padding: var(--pf-v5-c-table__tr--responsive--PaddingTop) var(--pf-v5-c-table__tr--responsive--PaddingRight) var(--pf-v5-c-table__tr--responsive--PaddingBottom) var(--pf-v5-c-table__tr--responsive--PaddingLeft);
1411
+ padding-block-start: var(--pf-v5-c-table__tr--responsive--PaddingTop);
1412
+ padding-inline-end: var(--pf-v5-c-table__tr--responsive--PaddingRight);
1413
+ padding-block-end: var(--pf-v5-c-table__tr--responsive--PaddingBottom);
1414
+ padding-inline-start: var(--pf-v5-c-table__tr--responsive--PaddingLeft);
1381
1415
  }
1382
1416
  .pf-m-grid-2xl.pf-v5-c-table tr:where(.pf-v5-c-table__tr):not(.pf-v5-c-table__expandable-row) > * {
1383
- padding: var(--pf-v5-c-table--cell--responsive--PaddingTop) var(--pf-v5-c-table--cell--responsive--PaddingRight) var(--pf-v5-c-table--cell--responsive--PaddingBottom) var(--pf-v5-c-table--cell--responsive--PaddingLeft);
1417
+ padding-block-start: var(--pf-v5-c-table--cell--responsive--PaddingTop);
1418
+ padding-inline-end: var(--pf-v5-c-table--cell--responsive--PaddingRight);
1419
+ padding-block-end: var(--pf-v5-c-table--cell--responsive--PaddingBottom);
1420
+ padding-inline-start: var(--pf-v5-c-table--cell--responsive--PaddingLeft);
1384
1421
  }
1385
1422
  .pf-m-grid-2xl.pf-v5-c-table tr:where(.pf-v5-c-table__tr):not(.pf-v5-c-table__expandable-row) > *:first-child {
1386
1423
  --pf-v5-c-table--cell--responsive--PaddingTop: var(--pf-v5-c-table--cell--first-child--responsive--PaddingTop);
@@ -1390,17 +1427,18 @@
1390
1427
  --pf-v5-c-table__tr--responsive--PaddingBottom: var(--pf-v5-c-table--m-compact__tr--responsive--PaddingBottom);
1391
1428
  --pf-v5-c-table--cell--responsive--PaddingTop: var(--pf-v5-c-table--m-compact__tr__td--responsive--PaddingTop);
1392
1429
  --pf-v5-c-table--cell--responsive--PaddingBottom: var(--pf-v5-c-table--m-compact__tr__td--responsive--PaddingBottom);
1430
+ --pf-v5-c-table__check--responsive--MarginTop: var(--pf-v5-c-table--m-compact__check--responsive--MarginTop);
1393
1431
  --pf-v5-c-table__check--input--MarginTop: 0;
1394
1432
  }
1395
1433
  .pf-m-grid-2xl.pf-v5-c-table.pf-m-compact .pf-v5-c-table__action {
1396
- margin-top: var(--pf-v5-c-table--m-compact__action--responsive--MarginTop);
1397
- margin-bottom: var(--pf-v5-c-table--m-compact__action--responsive--MarginTop);
1434
+ margin-block-start: var(--pf-v5-c-table--m-compact__action--responsive--MarginTop);
1435
+ margin-block-end: var(--pf-v5-c-table--m-compact__action--responsive--MarginTop);
1398
1436
  }
1399
1437
  .pf-m-grid-2xl.pf-v5-c-table.pf-m-compact .pf-v5-c-table__toggle .pf-v5-c-button {
1400
- margin-bottom: var(--pf-v5-c-table--m-compact__toggle--c-button--responsive--MarginBottom);
1438
+ margin-block-end: var(--pf-v5-c-table--m-compact__toggle--c-button--responsive--MarginBottom);
1401
1439
  }
1402
1440
  .pf-m-grid-2xl.pf-v5-c-table .pf-v5-c-table__icon > * {
1403
- text-align: left;
1441
+ text-align: start;
1404
1442
  }
1405
1443
  .pf-m-grid-2xl.pf-v5-c-table :where(.pf-v5-c-table__th, .pf-v5-c-table__td)[data-label] {
1406
1444
  --pf-v5-c-table--cell--hidden-visible--Display: var(--pf-v5-c-table--m-grid--cell--hidden-visible--Display);
@@ -1414,7 +1452,7 @@
1414
1452
  }
1415
1453
  .pf-m-grid-2xl.pf-v5-c-table :where(.pf-v5-c-table__th, .pf-v5-c-table__td)[data-label]::before {
1416
1454
  font-weight: bold;
1417
- text-align: left;
1455
+ text-align: start;
1418
1456
  content: attr(data-label);
1419
1457
  }
1420
1458
  .pf-m-grid-2xl.pf-v5-c-table tr:where(.pf-v5-c-table__tr) > *:first-child {
@@ -1443,12 +1481,12 @@
1443
1481
  }
1444
1482
  .pf-m-grid-2xl.pf-v5-c-table tbody:where(.pf-v5-c-table__tbody)::after {
1445
1483
  position: absolute;
1446
- top: 0;
1447
- bottom: 0;
1448
- left: 0;
1484
+ inset-block-start: 0;
1485
+ inset-block-end: 0;
1486
+ inset-inline-start: 0;
1449
1487
  content: "";
1450
1488
  border: 0;
1451
- border-left: var(--pf-v5-c-table__tbody--after--BorderLeftWidth) solid var(--pf-v5-c-table__tbody--after--BorderColor);
1489
+ border-inline-start: var(--pf-v5-c-table__tbody--after--BorderLeftWidth) solid var(--pf-v5-c-table__tbody--after--BorderColor);
1452
1490
  }
1453
1491
  .pf-m-grid-2xl.pf-v5-c-table tbody:where(.pf-v5-c-table__tbody).pf-m-expanded {
1454
1492
  --pf-v5-c-table__tbody--after--BorderLeftWidth: var(--pf-v5-c-table__tbody--after--border-width--base);
@@ -1472,7 +1510,7 @@
1472
1510
  display: block;
1473
1511
  max-height: var(--pf-v5-c-table__expandable-row--MaxHeight);
1474
1512
  overflow-y: auto;
1475
- border-bottom: none;
1513
+ border-block-end: none;
1476
1514
  box-shadow: none;
1477
1515
  }
1478
1516
  .pf-m-grid-2xl.pf-v5-c-table .pf-v5-c-table__expandable-row > * {
@@ -1480,7 +1518,7 @@
1480
1518
  display: block;
1481
1519
  }
1482
1520
  .pf-m-grid-2xl.pf-v5-c-table .pf-v5-c-table__expandable-row.pf-m-expanded {
1483
- border-top-color: var(--pf-v5-c-table--BorderColor);
1521
+ border-block-start-color: var(--pf-v5-c-table--BorderColor);
1484
1522
  }
1485
1523
  .pf-m-grid-2xl.pf-v5-c-table .pf-v5-c-table__expandable-row > :first-child:not(.pf-v5-c-table__check)::after {
1486
1524
  content: none;
@@ -1493,8 +1531,8 @@
1493
1531
  display: none;
1494
1532
  }
1495
1533
  .pf-m-grid-2xl.pf-v5-c-table .pf-v5-c-table__expandable-row .pf-v5-c-table__expandable-row-content {
1496
- padding-right: var(--pf-v5-c-table__expandable-row-content--responsive--PaddingRight);
1497
- padding-left: var(--pf-v5-c-table__expandable-row-content--responsive--PaddingLeft);
1534
+ padding-inline-end: var(--pf-v5-c-table__expandable-row-content--responsive--PaddingRight);
1535
+ padding-inline-start: var(--pf-v5-c-table__expandable-row-content--responsive--PaddingLeft);
1498
1536
  }
1499
1537
  .pf-m-grid-2xl.pf-v5-c-table tbody:where(.pf-v5-c-table__tbody).pf-m-hoverable {
1500
1538
  --pf-v5-c-table__tbody--after--BorderLeftWidth: 0;
@@ -1507,9 +1545,9 @@
1507
1545
  .pf-m-grid-2xl.pf-v5-c-table tbody:where(.pf-v5-c-table__tbody).pf-m-hoverable > tr:where(.pf-v5-c-table__tr)::after {
1508
1546
  content: "";
1509
1547
  position: absolute;
1510
- top: 0;
1511
- bottom: 0;
1512
- left: 0;
1548
+ inset-block-start: 0;
1549
+ inset-block-end: 0;
1550
+ inset-inline-start: 0;
1513
1551
  width: var(--pf-v5-c-table__tbody--after__tr--BorderLeftWidth);
1514
1552
  background-color: var(--pf-v5-c-table__tbody--after__tr--BorderLeftColor);
1515
1553
  }
@@ -1524,9 +1562,9 @@
1524
1562
  .pf-m-grid-2xl.pf-v5-c-table tr:where(.pf-v5-c-table__tr).pf-m-selected::after {
1525
1563
  content: "";
1526
1564
  position: absolute;
1527
- top: 0;
1528
- bottom: 0;
1529
- left: 0;
1565
+ inset-block-start: 0;
1566
+ inset-block-end: 0;
1567
+ inset-inline-start: 0;
1530
1568
  width: var(--pf-v5-c-table__tr--m-selected--after--BorderLeftWidth);
1531
1569
  background-color: var(--pf-v5-c-table__tr--m-selected--after--BorderLeftColor);
1532
1570
  }
@@ -1541,7 +1579,7 @@
1541
1579
  grid-row-start: 20;
1542
1580
  grid-column: -1;
1543
1581
  justify-self: end;
1544
- padding-right: 0;
1582
+ padding-inline-end: 0;
1545
1583
  }
1546
1584
  .pf-m-grid-2xl.pf-v5-c-table .pf-v5-c-table__toggle::after {
1547
1585
  content: none;
@@ -1559,34 +1597,39 @@
1559
1597
  grid-column-start: 2;
1560
1598
  }
1561
1599
  .pf-m-grid-2xl.pf-v5-c-table .pf-v5-c-table__check {
1562
- margin-top: var(--pf-v5-c-table__check--responsive--MarginTop);
1563
- margin-left: var(--pf-v5-c-table__check--responsive--MarginLeft);
1600
+ margin-block-start: var(--pf-v5-c-table__check--responsive--MarginTop);
1601
+ margin-inline-start: var(--pf-v5-c-table__check--responsive--MarginLeft);
1602
+ line-height: 1;
1564
1603
  }
1565
1604
  .pf-m-grid-2xl.pf-v5-c-table .pf-v5-c-table__check ~ .pf-v5-c-table__favorite {
1566
- margin-left: var(--pf-v5-c-table--m-grid__check--favorite--MarginLeft);
1605
+ margin-inline-start: var(--pf-v5-c-table--m-grid__check--favorite--MarginLeft);
1567
1606
  }
1568
1607
  .pf-m-grid-2xl.pf-v5-c-table .pf-v5-c-table__check ~ .pf-v5-c-table__favorite ~ .pf-v5-c-table__action {
1569
- margin-left: var(--pf-v5-c-table--m-grid__check--favorite--action--MarginLeft);
1608
+ margin-inline-start: var(--pf-v5-c-table--m-grid__check--favorite--action--MarginLeft);
1570
1609
  }
1571
1610
  .pf-m-grid-2xl.pf-v5-c-table .pf-v5-c-table__check ~ .pf-v5-c-table__action {
1572
- margin-left: var(--pf-v5-c-table__action--responsive--MarginLeft);
1611
+ margin-inline-start: var(--pf-v5-c-table__action--responsive--MarginLeft);
1612
+ }
1613
+ .pf-m-grid-2xl.pf-v5-c-table .pf-v5-c-table__check label {
1614
+ display: inline-block;
1615
+ margin: 0;
1573
1616
  }
1574
1617
  .pf-m-grid-2xl.pf-v5-c-table .pf-v5-c-table__favorite {
1575
- margin-top: var(--pf-v5-c-table--m-grid__favorite--MarginTop);
1618
+ margin-block-start: var(--pf-v5-c-table--m-grid__favorite--MarginTop);
1576
1619
  }
1577
1620
  .pf-m-grid-2xl.pf-v5-c-table .pf-v5-c-table__favorite ~ .pf-v5-c-table__action {
1578
- margin-left: var(--pf-v5-c-table--m-grid__favorite--action--MarginLeft);
1621
+ margin-inline-start: var(--pf-v5-c-table--m-grid__favorite--action--MarginLeft);
1579
1622
  }
1580
1623
  .pf-m-grid-2xl.pf-v5-c-table .pf-v5-c-table__action {
1581
- margin-top: var(--pf-v5-c-table--m-grid__action--MarginTop);
1582
- text-align: right;
1624
+ margin-block-start: var(--pf-v5-c-table--m-grid__action--MarginTop);
1625
+ text-align: end;
1583
1626
  }
1584
1627
  }
1585
1628
  @media screen and (max-width: 1450px) and (max-width: 576px) {
1586
1629
  .pf-m-grid-2xl.pf-v5-c-table .pf-v5-c-table__action {
1587
1630
  grid-row-start: 1;
1588
1631
  grid-column-start: 2;
1589
- margin-left: 0;
1632
+ margin-inline-start: 0;
1590
1633
  }
1591
1634
  }
1592
1635
  @media screen and (max-width: 1450px) {
@@ -1594,16 +1637,12 @@
1594
1637
  grid-column: 2;
1595
1638
  grid-row: 2;
1596
1639
  }
1597
- }
1598
- @media screen and (max-width: 1450px) {
1599
1640
  .pf-m-grid-2xl.pf-v5-c-table .pf-v5-c-table__toggle-icon {
1600
1641
  transition: var(--pf-v5-c-table__toggle__icon--Transition);
1601
1642
  }
1602
1643
  .pf-v5-c-button.pf-m-expanded > .pf-m-grid-2xl.pf-v5-c-table .pf-v5-c-table__toggle-icon {
1603
1644
  transform: rotate(var(--pf-v5-c-table__toggle--m-expanded__icon--Rotate));
1604
1645
  }
1605
- }
1606
- @media screen and (max-width: 1450px) {
1607
1646
  .pf-m-grid-2xl.pf-v5-c-table :where(.pf-v5-c-table, .pf-v5-c-table__thead, .pf-v5-c-table__tbody, .pf-v5-c-table__tr, .pf-v5-c-table__th, .pf-v5-c-table__td, .pf-v5-c-table__text).pf-m-nowrap {
1608
1647
  --pf-v5-c-table--cell--Overflow: auto;
1609
1648
  }
@@ -1614,8 +1653,6 @@
1614
1653
  .pf-m-grid-2xl.pf-v5-c-table :where(.pf-v5-c-table, .pf-v5-c-table__thead, .pf-v5-c-table__tbody, .pf-v5-c-table__tr, .pf-v5-c-table__th, .pf-v5-c-table__td, .pf-v5-c-table__text).pf-m-truncate {
1615
1654
  --pf-v5-c-table--cell--MaxWidth: 100%;
1616
1655
  }
1617
- }
1618
- @media screen and (max-width: 1450px) {
1619
1656
  .pf-m-grid-2xl.pf-v5-c-table [class*=pf-m-width] {
1620
1657
  --pf-v5-c-table--cell--Width: auto;
1621
1658
  }