MUI-theme.scss

.mui-theme:root {
  // Alert
  --mui-alert--BoxShadow: none;
  --mui-alert-warning-text: #663c00;
  --mui-alert-warning-FontWeight: 400;
  --mui-alert--PaddingBlockStart: 6px;
  --mui-alert--PaddingBlockEnd: 6px;
  --mui-alert--PaddingInlineStart: 16px;
  --mui-alert--PaddingInlineEnd: 16px;
  --mui-alert__icon--MarginInlineEnd: 12px;
  --mui-alert__icon--MarginBlockStart: 7px;
  --mui-alert__icon--MarginBlockStart: 7px;
  --mui-alert__icon--MarginBlockEnd: 7px;
  --mui-alert__icon--FontSize: 22px;

  // Button
  --mui-button-FontWeight: 500;
  --mui-button--hover--BorderWidth: 1px;
  --mui-button--PaddingBlockStart: 6px;
  --mui-button--PaddingBlockEnd: 6px;
  --mui-button--PaddingInlineStart: 16px;
  --mui-button--PaddingInlineEnd: 16px;
  --mui-button--LineHeight: 1.75;
  --mui-link-underlineColor: rgba(33, 150, 243, 0.4);

  // Helper text
  --mui-helper-text__item--FontWeight: 400;

  // Menu item
  --mui-menu__item--PaddingBlockStart: 6px;
  --mui-menu__item--PaddingBlockEnd: 6px;
  --mui-menu__item--PaddingInlineStart: 16px;
  --mui-menu__item--PaddingInlineEnd: 16px;
  --mui-menu__item--FontSize: 1rem;

  // Menu toggle
  --mui-menu-toggle__toggle-icon--MinHeight: auto;
  --mui-menu-toggle__controls--MinWidth: 0;
  --mui-menu-toggle--expanded--BackgroundColor: none;
  --mui-menu-toggle--expanded--BorderColor: none;
  --mui-menu-toggle--LineHeight: 1.75;
  --mui-menu-toggle--PaddingBlockStart: 6px;
  --mui-menu-toggle--PaddingBlockEnd: 6px;
  --mui-menu-toggle--PaddingInlineStart: 16px;
  --mui-menu-toggle--PaddingInlineEnd: 16px;
  --mui-menu-toggle--ColumnGap: 0;
  --mui-menu-toggle--expanded--Color: black;
  --mui-menu-toggle--hover--BorderColor: none;
  --mui-menu-toggle--BorderColor: #cec7c7;
  --mui-menu-toggle--PaddingInlineStart: 10px;
  --mui-menu-toggle--PaddingInlineEnd: 10px;

  // Radio
  --mui-radio--margin: 10px 0;
  --mui-radio-PaddingLeft: 30px;
  --mui-radio__label--Width: 20px;
  --mui-radio__label--Height: 20px;
  --mui-radio__input--Width: 10px;
  --mui-radio__input--Height: 10px;

  // Sidebar from https://github.com/kubeflow/kubeflow/blob/4275d99754ac91f6cf5654b03824a73825e9fe55/components/centraldashboard/public/components/main-page.css#L7C1-L13C51
  --kf-central-primary-background-color: #0a3b71;
  --kf-central-sidebar-default-color: #ffffff90;
  --kf-central-app-drawer-width: 240px;
  --kf-central-app-bar-height: 24px;

  // Table
  --mui-table__button--BackgroundColor: none;
  --mui-table__button--hover--BackgroundColor: none;
  --mui-table__button--Color: var(--pf-v6-c-table--cell--Color);
  --mui-table__button--PaddingBlockStart: 0;
  --mui-table__button--PaddingBlockEnd: 0;
  --mui-table__button--PaddingInlineStart: 0;
  --mui-table__button--PaddingInlineEnd: 0;
  --mui-table--cell--PaddingInlineStart: 16px;
  --mui-table--cell--PaddingInlineEnd: 16px;
  --mui-table--cell--PaddingBlockStart: 16px;
  --mui-table--cell--PaddingBlockEnd: 16px;
  --mui-table--cell--first-last-child--PaddingInline: 0px;
  --mui-table__thead--cell--FontSize: 14px;
  --mui-table__sort-indicator--MarginInlineStart: 4px;

  letter-spacing: 0.01071em;

  // Tabs
  --mui-tabs__link--hover--BackgroundColor: transparent;
  --mui-tabs__item--PaddingBlockStart: 0;
  --mui-tabs__item--PaddingBlockEnd: 0;
  --mui-tabs__item--PaddingInlineStart: 0;
  --mui-tabs__item--PaddingInlineEnd: 0;
  --mui-tabs__link--PaddingBlockStart: 12px;
  --mui-tabs__link--PaddingBlockEnd: 12px;
  --mui-tabs__link--PaddingInlineStart: 16px;
  --mui-tabs__link--PaddingInlineEnd: 16px;
  --mui-tabs__item--m-current__link--Color: var(--pf-t--global--text--color--brand--default);
  --mui-tabs__item--m-current__link--after--BorderWidth: 2px;
  --mui-tabs__link--FontSize: 0.875rem;

  --mui-text-transform: uppercase;

  --mui-spacing-4px: calc(0.5 * var(--mui-spacing));
  --mui-spacing-8px: var(--mui-spacing);
  --mui-spacing-16px: calc(2 * var(--mui-spacing));

  --pf-t--global--border--width--box--status--default: 1px;
  --pf-t--global--border--radius--pill: var(--mui-shape-borderRadius);
  --pf-t--global--border--radius--medium: var(--mui-shape-borderRadius);
  --pf-t--global--text--color--brand--default: var(--mui-palette-primary-main);

  --pf-t--global--color--nonstatus--blue--default: var(--mui-palette-primary-main);
  --pf-t--global--text--color--inverse: var(--mui-palette-common-white);

  --pf-t--global--font--family--100: Roboto, Helvetica, Arial, sans-serif;
  --pf-t--global--font--family--200: Roboto, Helvetica, Arial, sans-serif;
  --pf-t--global--font--family--300: Roboto, Courier, monospace;
}

.mui-theme .pf-v6-c-action-list__item .pf-v6-c-button {
  border-radius: var(--mui-shape-borderRadius);
}

.mui-theme .pf-v6-c-alert {
  --pf-v6-c-alert--m-warning__title--Color: var(
    --pf-t--global--text--color--status--warning--default
  );
  --pf-v6-c-alert__icon--MarginInlineEnd: var(--mui-alert__icon--MarginInlineEnd);
  --pf-v6-c-alert__title--FontWeight: var(--mui-alert-warning-FontWeight);
  --pf-v6-c-alert__icon--MarginBlockStart: var(--mui-alert__icon--MarginBlockStart);
  --pf-v6-c-alert__icon--FontSize: var(--mui-alert__icon--FontSize);
  --pf-v6-c-alert--BoxShadow: var(--mui-alert--BoxShadow);
  --pf-v6-c-alert--PaddingBlockStart: var(--mui-alert--PaddingBlockStart);
  --pf-v6-c-alert--PaddingBlockEnd: var(--mui-alert--PaddingBlockEnd);
  --pf-v6-c-alert--PaddingInlineStart: var(--mui-alert--PaddingInlineStart);
  --pf-v6-c-alert--PaddingInlineEnd: var(--mui-alert--PaddingInlineEnd);
}

.mui-theme .pf-v6-c-alert__title {
  padding-block: var(--mui-spacing);
}

.mui-theme .pf-v6-c-alert__icon {
  --pf-v6-c-alert__icon--MarginBlockEnd: var(--mui-alert__icon--MarginBlockEnd);
}

.mui-theme .pf-v6-c-brand.kubeflow_brand {
  padding: var(--pf-t--global--spacer--md);
}

.mui-theme .pf-v6-c-button {
  --pf-v6-c-button--FontWeight: var(--mui-button-FontWeight);
  --pf-v6-c-button--PaddingBlockStart: var(--mui-button--PaddingBlockStart);
  --pf-v6-c-button--PaddingBlockEnd: var(--mui-button--PaddingBlockEnd);
  --pf-v6-c-button--PaddingInlineStart: var(--mui-button--PaddingInlineStart);
  --pf-v6-c-button--PaddingInlineEnd: var(--mui-button--PaddingInlineEnd);
  --pf-v6-c-button--LineHeight: var(--mui-button--LineHeight);
  --pf-v6-c-button--m-plain--BorderRadius: 50%;

  text-transform: var(--mui-text-transform);
  letter-spacing: 0.02857em;
}

.mui-theme .pf-v6-c-button.pf-m-link.pf-m-inline {
  --pf-v6-c-button--hover--Color: var(--mui-palette-primary-main);
  text-decoration-color: var(--mui-link-underlineColor);

  &:hover {
    text-decoration-color: initial;
  }
}

.mui-theme .pf-v6-c-button.pf-m-link.pf-m-inline .pf-v6-c-button__icon {
  // Keep icon color the same on hover
  color: inherit;
}

.mui-theme .pf-v6-c-button.pf-m-secondary:hover {
  --pf-v6-c-button--BorderWidth: var(--mui-button--hover--BorderWidth);
  --pf-v6-c-button--BackgroundColor: rgba(33, 150, 243, 0.04);
}

.mui-theme .pf-v6-c-description-list__text .pf-v6-l-split__item.pf-m-fill {
  align-content: center;
}

.mui-theme .pf-v6-c-form {
  --pf-v6-c-form--GridGap: none;
}

.mui-theme .pf-v6-c-form__group {
  position: relative;
}

.mui-theme .pf-v6-c-form__group.model-description .pf-v6-c-form__group-label,
.mui-theme .pf-v6-c-form__group.version-description .pf-v6-c-form__group-label,
.mui-theme .pf-v6-c-form__group.location-path {
  padding-block-start: 10px;
}

.mui-theme .pf-v6-c-form__group.form-group-disabled .pf-v6-c-form__label {
  color: var(--mui-palette-text-disabled);
}

.mui-theme .pf-v6-c-form__group.form-group-error .pf-v6-c-form__label {
  color: var(--mui-palette-error-main);
}

.mui-theme .pf-v6-c-form__helper-text.path-helper-text {
  margin-inline-start: var(--pf-t--global--spacer--lg);
}

.mui-theme .pf-v6-c-helper-text .pf-v6-c-helper-text__item-icon {
  display: none;
}

.mui-theme .pf-v6-c-form__section-title {
  --pf-v6-c-form__section-title--MarginBlockStart: 0px;
  --pf-v6-c-form__section-title--MarginInlineStart: 0px;
  --pf-v6-c-form__section-title--MarginBlockEnd: 0.35em;
  --pf-v6-c-form__section-title--MarginInlineEnd: 0px;
}

.mui-theme .pf-v6-c-form__label {
  position: absolute;
  top: 35%;
  left: 12px;
  font-size: 14px;
  color: var(--mui-palette-grey-600);
  pointer-events: none;
  transition: all 0.2s ease;
  transform-origin: left center;
  transform: translateY(-50%) scale(0.75);
  background-color: var(--mui-palette-common-white);
  padding: 0 4px;
  z-index: 1;
  --pf-v6-c-form__label-required--Color: currentColor;
}

.mui-theme .pf-v6-c-form-control input::placeholder {
  --pf-v6-c-form-control--m-placeholder--Color: var(--mui-palette-grey-600);
}

.mui-theme .pf-v6-c-form-control {
  --pf-v6-c-form-control--m-disabled--BackgroundColor: var(--mui-palette-common-white);
  --pf-v6-c-form-control--m-disabled--Color: var(--mui-palette-text-disabled);
  --pf-v6-c-form-control--m-error--after--BorderColor: var(--mui-palette-error-main);
  --pf-v6-c-form-control--m-error--hover--after--BorderColor: var(--mui-palette-error-main);
}

.mui-theme .pf-v6-c-form-control {
  // Resize is disabled in MUI.
  resize: none;
  --pf-v6-c-form-control--PaddingBlockStart: var(--mui-spacing-16px);
  --pf-v6-c-form-control--PaddingBlockEnd: var(--mui-spacing-16px);
}

.mui-theme .pf-v6-c-form__section {
  --pf-v6-c-form__section--Gap: 0px;
}

.mui-theme .toolbar-fieldset-wrapper .pf-v6-c-form-control input {
  padding: 8px 14px;
}

.mui-theme .tr-fieldset-wrapper .form-fieldset {
  inset: 0px;
}

.mui-theme .pf-v6-c-form-control {
  // Using CSS property here since PF vars for input padding do not exist.
  // PF can add custom vars for padding on text input, text area, and form select

  --pf-v6-c-form-control--PaddingBlockStart: 16.5px;
  --pf-v6-c-form-control--PaddingBlockEnd: 16.5px;
  --pf-v6-c-form-control--PaddingInlineStart: 14px;
  --pf-v6-c-form-control--PaddingInlineEnd: 14px;
}

.mui-theme .pf-v6-c-text-input-group::before {
  border: none;
}

.mui-theme .pf-v6-c-text-input-group {
  --pf-v6-c-text-input-group__text-input--PaddingBlockStart: 16.5px;
  --pf-v6-c-text-input-group__text-input--PaddingInlineStart: 32px;
  --pf-v6-c-text-input-group__text-input--PaddingBlockEnd: 14px;
  --pf-v6-c-text-input-group__text-input--PaddingInlineEnd: 14px;
}

.mui-theme .pf-v6-c-text-input-group {
  --pf-v6-c-text-input-group__icon--Color: rgba(0, 0, 0, 0.38);
}

.mui-theme .pf-v6-c-form__group-control textarea {
  position: relative;
  box-sizing: border-box;
}

.mui-theme .pf-v6-c-form-control > :is(input, select, textarea):focus {
  --pf-v6-c-form-control--OutlineOffset: none;
  outline: none;
}

.mui-theme .pf-v6-c-text-input-group__text-input:focus {
  --pf-v6-c-form-control--OutlineOffset: none;
  outline: none;
}

.form-fieldset-wrapper {
  position: relative;
  width: 100%;
}

.pf-v6-c-form__group .form-fieldset-legend {
  float: unset;
  width: auto;
  overflow: hidden;
  display: block;
  padding: 0;
  height: 11px;
  font-size: 0.75em;
  visibility: hidden;
  max-width: 0.01px;
  white-space: nowrap;
  max-width: 100%;
}

.form-fieldset-wrapper:hover .form-fieldset {
  border-color: black;
}

.form-fieldset-wrapper:focus-within span.pf-v6-c-form-control.pf-m-disabled ~ .form-fieldset {
  border-color: rgba(0, 0, 0, 0.23);
}

.form-fieldset-wrapper span.pf-v6-c-form-control.pf-m-error ~ .form-fieldset {
  border-color: var(--mui-palette-error-main);
}

.form-fieldset-wrapper .pf-v6-c-input-group span.pf-v6-c-form-control .pf-m-error ~ .form-fieldset {
  border-color: var(--mui-palette-error-main);
}

.form-fieldset-wrapper .pf-v6-c-input-group__item button {
  // Aligns EyeIcon in password input
  --pf-v6-c-button--PaddingBlockStart: var(--mui-spacing-16px);
  --pf-v6-c-button--PaddingBlockEnd: var(--mui-spacing-16px);
  --pf-v6-c-button--BorderColor: var(--mui-palette-common-white);
  --pf-v6-c-button--BorderRadius: 50%;
}

.form-fieldset-wrapper:focus-within .form-fieldset {
  border-color: var(--mui-palette-primary-main);
  border-width: 2px;
  padding: 7px 7px;
}

.form-fieldset-legend {
  float: unset;
  width: auto;
  overflow: hidden;
  display: block;
  padding: 0 5px 0 5px;
  font-size: 0.75em;
  max-width: 0.01px;
  white-space: nowrap;
  max-width: 100%;
}

.form-fieldset-wrapper:focus-within {
  color: var(--mui-palette-primary-main);
}

.form-fieldset-wrapper,
.toolbar-fieldset-wrapper,
.tr-fieldset-wrapper {
  position: relative;
  width: 100%;
}

.form-fieldset-wrapper .form-fieldset:hover {
  border-color: var(--mui-palette-common-black);
}

.toolbar-fieldset-wrapper:focus-within .form-fieldset,
.tr-fieldset-wrapper:focus-within .form-fieldset {
  border-color: var(--mui-palette-primary-main);
  border-width: 2px;
  padding: 7px 7px;
}

.toolbar-fieldset-wrapper .form-fieldset,
.form-fieldset {
  text-align: left;
  position: absolute;
  inset: -5px 0px 0px;
  margin: 0;
  padding: 0 8px;
  pointer-events: none;
  border-radius: inherit;
  border-style: solid;
  border-width: 1px;
  overflow: hidden;
  min-width: 0%;
  border-color: rgba(0, 0, 0, 0.23);
  border-radius: var(--mui-shape-borderRadius);
}

.toolbar-fieldset-wrapper .form-fieldset-legend {
  float: unset;
  width: auto;
  overflow: hidden;
  display: block;
  padding: 0 5px 0 5px;
  font-size: 0.75em;
  max-width: 0.01px;
  white-space: nowrap;
  max-width: 100%;
}

.toolbar-fieldset-wrapper .form-fieldset-legend span {
  font-weight: var(--pf-t--global--font--weight--200);
}

.toolbar-fieldset-wrapper:focus-within {
  color: var(--mui-palette-primary-main);
}

.toolbar-fieldset-wrapper:focus-within .form-fieldset-legend {
  color: var(--mui-palette-primary-main);
}

.tr-fieldset-wrapper .pf-v6-c-form-control,
.toolbar-fieldset-wrapper .pf-v6-c-form-control,
.form-fieldset-wrapper .pf-v6-c-form-control {
  --pf-v6-c-form-control--before--BorderColor: transparent !important;
  --pf-v6-c-form-control--after--BorderColor: transparent !important;
}

.pf-v6-c-form__group .pf-v6-c-form-control:focus-within + .pf-v6-c-form__label,
.pf-v6-c-form__group .pf-v6-c-form-control:not(:placeholder-shown) + .pf-v6-c-form__label {
  color: var(--mui-palette-primary-main);
}

.pf-v6-c-form__group:focus-within .pf-v6-c-form-control {
  --pf-v6-c-form-control--after--BorderWidth: 2px;
}

.pf-v6-c-form-control.pf-m-error {
  --pf-v6-c-form-control--after--BorderColor: var(--mui-palette-error-main);
}

.mui-theme .pf-v6-c-form-control__utilities {
  display: none;
}

.pf-v6-c-helper-text__item.pf-m-error {
  --pf-v6-c-helper-text__item-text--Color: var(--mui-palette-error-main);
  --pf-v6-c-helper-text__item-text--FontWeight: var(--mui-helper-text__item--FontWeight);
  margin-left: 14px;
  margin-top: 3px;
}

.pf-v6-c-form__group.pf-m-error .pf-v6-c-form__label {
  // Using CSS property here since --pf-v6-c-form__label--Color does not exist.

  color: var(--mui-palette-error-main);
}

.mui-theme .pf-v6-c-form__group.pf-m-error fieldset.form-fieldset {
  border-color: var(--mui-palette-error-main);
}

.pf-v6-c-form__group:not(.pf-m-error):focus-within .pf-v6-c-form__label {
  // Using CSS property here since --pf-v6-c-form__label--Color does not exist.

  /* Change color of the label when the input is focused */
  color: var(--mui-palette-primary-main);
}

.mui-theme .pf-v6-c-menu {
  --pf-v6-c-menu--BoxShadow: var(--mui-shadows-8);
  --pf-v6-c-menu--BorderRadius: var(--mui-shape-borderRadius);
  --pf-v6-c-menu--PaddingBlockStart: var(--mui-spacing);
  --pf-v6-c-menu--PaddingBlockEnd: var(--mui-spacing);
  --pf-v6-c-menu--PaddingInlineStart: var(--mui-spacing);
  --pf-v6-c-menu--PaddingInlineEnd: var(--mui-spacing);
  --pf-v6-c-menu__item--PaddingBlockStart: var(--mui-menu__item--PaddingBlockStart);
  --pf-v6-c-menu__item--PaddingBlockEnd: var(--mui-menu__item--PaddingBlockEnd);
  --pf-v6-c-menu__item--PaddingInlineStart: var(--mui-menu__item--PaddingInlineStart);
  --pf-v6-c-menu__item--PaddingInlineEnd: var(--mui-menu__item--PaddingInlineEnd);
  --pf-v6-c-menu__item--FontSize: var(--mui-menu__item--FontSize);
}

.mui-theme .pf-v6-c-menu-toggle {
  --pf-v6-c-menu-toggle__toggle-icon--MinHeight: var(--mui-menu-toggle__toggle-icon--MinHeight);
  --pf-v6-c-menu-toggle__controls--MinWidth: var(--mui-menu-toggle__controls--MinWidth);
  --pf-v6-c-menu-toggle--expanded--BackgroundColor: var(
    --mui-menu-toggle--expanded--BackgroundColor
  );
  --pf-v6-c-menu-toggle--expanded--BorderColor: var(--mui-menu-toggle--expanded--BorderColor);
  --pf-v6-c-menu-toggle--PaddingInlineStart: var(--mui-menu-toggle--PaddingInlineStart);
  --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--mui-menu-toggle--PaddingInlineEnd);
  --pf-v6-c-menu-toggle--ColumnGap: var(--mui-menu-toggle--ColumnGap);
  --pf-v6-c-menu-toggle--expanded--Color: var(--mui-palette-common-black);
  --pf-v6-c-menu-toggle--hover--BorderColor: var(--mui-menu-toggle--hover--BorderColor);
  --pf-v6-c-menu-toggle--BorderColor: var(--mui-menu-toggle--BorderColor);
  --pf-v6-c-menu-toggle--hover--BackgroundColor: var(
    --pf-t--global--background--color--action--plain--hover
  );
  --pf-v6-c-menu-toggle--m-split-button--m-action--m-primary--expanded--child--BackgroundColor: var(
    --pf-t--global--color--brand--default
  );
  --pf-v6-c-menu-toggle--m-split-button--m-action--m-primary--child--BorderInlineStartColor: var(
    --mui-palette-primary-dark
  );
  --pf-v6-c-menu-toggle--disabled--BackgroundColor: var(--mui-palette-common-white);
  --pf-v6-c-menu-toggle--disabled--Color: var(--mui-palette-text-disabled);
  --pf-v6-c-menu-toggle--disabled__toggle-icon--Color: var(--mui-palette-action-disabled);

  border-radius: var(--mui-shape-borderRadius);
  text-transform: var(--mui-text-transform);
  font-weight: var(--mui-button-FontWeight);
  letter-spacing: 0.02857em;
}

.mui-theme .pf-v6-c-menu-toggle__button {
  text-transform: var(--mui-text-transform);
  font-weight: var(--mui-button-FontWeight);
  letter-spacing: 0.02857em;
  align-self: stretch;
}

.mui-theme .pf-v6-c-menu-toggle.pf-m-disabled {
  border: solid 1px var(--mui-palette-action-disabled);
}

.mui-theme .pf-v6-c-menu-toggle.pf-m-plain {
  --pf-v6-c-menu-toggle--BorderRadius: 50%;
}

.mui-theme .pf-v6-c-menu-toggle.pf-m-primary {
  --pf-v6-c-menu-toggle--expanded--Color: var(--mui-palette-common-white);
  --pf-v6-c-menu-toggle--expanded--BackgroundColor: var(--mui-palette-primary-main);
  --pf-v6-c-menu-toggle--hover--BackgroundColor: var(--mui-palette-primary-dark);
}

.mui-theme .pf-v6-c-menu-toggle.pf-m-primary.pf-m-split-button {
  --pf-v6-c-menu-toggle--expanded--Color: var(--pf-t--global--text--color--on-brand--clicked);
}

.mui-theme
  .pf-v6-c-menu-toggle.pf-m-primary.pf-m-split-button
  .pf-v6-c-menu-toggle__button[aria-expanded='true'] {
  --pf-v6-c-menu-toggle--m-split-button--m-action--m-primary--child--BackgroundColor: var(
    --mui-palette-primary-dark
  );
}

.mui-theme .pf-v6-c-menu-toggle__button:has(.pf-v6-c-menu-toggle__toggle-icon) {
  --pf-v6-c-menu-toggle--PaddingBlockStart: var(--mui-spacing-4);
  --pf-v6-c-menu-toggle--PaddingBlockEnd: var(--mui-spacing-4);
  --pf-v6-c-menu-toggle--PaddingInlineStart: var(--mui-menu-toggle--PaddingInlineStart);
  --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--mui-menu-toggle--PaddingInlineEnd);
}

.mui-theme .pf-v6-c-menu-toggle__button .pf-v6-c-menu-toggle__toggle-icon .pf-v6-svg {
  vertical-align: revert;
}

.mui-theme .pf-v6-c-menu-toggle__toggle-icon {
  font-size: 20px;
}

.mui-theme .pf-v6-c-menu-toggle:not(.pf-m-split-button) .pf-v6-c-menu-toggle__toggle-icon {
  margin-right: calc(var(--mui-spacing) * -1 + 4px);
  margin-left: var(--mui-spacing);
}

.mui-theme .pf-v6-c-menu-toggle__icon {
  display: block;
}

.mui-theme .pf-v6-c-nav {
  padding-block-start: 0;
}

.mui-theme .pf-v6-c-nav__link {
  --pf-v6-c-nav__link--BorderRadius: 0px;
  --pf-v6-c-nav__link--hover--BackgroundColor: #ffffff1b;
  --pf-v6-c-nav__link--Color: var(--kf-central-sidebar-default-color);
  --pf-v6-c-nav__link--hover--Color: var(--kf-central-sidebar-default-color);
  --pf-v6-c-nav__link--FontSize: var(--pf-t--global--font--size--md);

  &.active {
    border-left: 3px solid var(--mui-palette-common-white);
    --pf-v6-c-nav__link--Color: var(--mui-palette-common-white);
    --pf-v6-c-nav__link--hover--Color: var(--mui-palette-common-white);
  }

  &.pf-v6-c-brand {
    --pf-v6-c-nav__link--hover--BackgroundColor: none;
  }
}

.mui-theme .pf-v6-c-nav__link:focus {
  --pf-v6-c-nav__link--Color: var(--mui-palette-common-white);
}

.mui-theme .pf-v6-c-nav__list {
  row-gap: none;
}

.mui-theme .pf-v6-radio {
  --pf-v6-c-radio--AccentColor: var(--mui-palette-primary-main);
}

.mui-theme .pf-v6-c-radio {
  display: flex;
  align-items: center;
  margin: var(--mui-radio--margin);
}

.mui-theme .pf-v6-c-radio__input {
  /* Hide default radio button */
  display: none;
}

.mui-theme .pf-v6-c-radio__label {
  --pf-v6-c-radio__label--FontSize: 16px;
  padding-left: var(--mui-radio-PaddingLeft);
  position: relative;
  cursor: pointer;
  user-select: none;
}

/* Custom radio circle */
.mui-theme .pf-v6-c-radio__label::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: var(--mui-radio__label--Width);
  height: var(--mui-radio__label--Height);
  border: 2px solid var(--mui-palette-primary-main);
  border-radius: 50%;
  background: var(--mui-palette-common-white);
}

/* When radio is checked */
.mui-theme .pf-v6-c-radio__input:checked + .pf-v6-c-radio__label::before {
  background: var(--mui-palette-common-white);
  border-color: var(--mui-palette-primary-main);
}

.mui-theme .pf-v6-c-page__sidebar {
  --pf-v6-c-page__sidebar--BackgroundColor: var(--kf-central-primary-background-color);
}

.mui-theme .pf-v6-c-page__sidebar-body {
  --pf-v6-c-page__sidebar-body--PaddingInlineStart: 0px;
  --pf-v6-c-page__sidebar-body--PaddingInlineEnd: 0px;
}

/* Inner dot for checked state */
.mui-theme .pf-v6-c-radio__input:checked + .pf-v6-c-radio__label::after {
  content: '';
  position: absolute;
  left: 5px;
  /* Center the dot */
  top: 50%;
  transform: translateY(-50%);
  width: var(--mui-radio__input--Width);
  /* Size of inner dot */
  height: var(--mui-radio__input--Height);
  border-radius: 50%;
  background: var(--mui-palette-primary-main);
}

.mui-theme .pf-v6-c-table {
  --pf-v6-c-table__sort--m-selected__button--Color: var(--mui-palette-text-primary);
  --pf-v6-c-table__sort-indicator--Color: var(--mui-palette-text-secondary);
  --pf-v6-c-table__sort__button--hover__sort-indicator--Color: var(--mui-palette-text-secondary);
  --pf-v6-c-table__sort__button--hover__text--Color: var(--mui-palette-text-secondary);
  --pf-v6-c-table--cell--Color: var(--mui-palette-text-primary);
  --pf-v6-c-table__button--hover--BackgroundColor: var(--mui-table__button--BackgroundColor);
  --pf-v6-c-table__button--Color: var(--pf-v6-c-table--cell--Color);
  --pf-v6-c-table__button--PaddingBlockStart: var(--mui-table__button--PaddingBlockStart);
  --pf-v6-c-table__button--PaddingBlockEnd: var(--mui-table__button--PaddingBlockEnd);
  --pf-v6-c-table__button--PaddingInlineStart: var(--mui-table__button--PaddingInlineStart);
  --pf-v6-c-table__button--PaddingInlineEnd: var(--mui-table__button--PaddingInlineEnd);
  --pf-v6-c-table--cell--PaddingInlineStart: var(--mui-table--cell--PaddingInlineStart);
  --pf-v6-c-table--cell--PaddingInlineEnd: var(--mui-table--cell--PaddingInlineEnd);
  --pf-v6-c-table--cell--PaddingBlockStart: var(--mui-table--cell--PaddingBlockStart);
  --pf-v6-c-table--cell--PaddingBlockEnd: var(--mui-table--cell--PaddingBlockEnd);
  --pf-v6-c-table--cell--first-last-child--PaddingInline: var(
    --mui-table--cell--first-last-child--PaddingInline
  );
  --pf-v6-c-table__thead--cell--FontWeight: var(--mui-button-FontWeight);
  --pf-v6-c-table__thead--cell--FontSize: var(--mui-table__thead--cell--FontSize);
  --pf-v6-c-table__tr--BorderBlockEndColor: var(--mui-palette-grey-300);
  --pf-v6-c-table__sort-indicator--MarginInlineStart: var(
    --mui-table__sort-indicator--MarginInlineStart
  );

  letter-spacing: 0.01071em;
}

.mui-theme .pf-v6-c-table .pf-m-align-right {
  text-align: right;
}

.mui-theme .pf-v6-c-table__sort-indicator {
  font-size: 18px;
  opacity: 0;
  transition:
    opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
    transform 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
  transform-origin: center center;
  align-self: start;
}

/* CSS workaround to use MUI icon for sort icon */
.mui-theme .pf-v6-c-table__sort-indicator::before {
  display: block;
  width: 1em;
  height: 1em;
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' focusable='false' aria-hidden='true' viewBox='0 0 24 24' data-testid='ArrowDownwardIcon'%3E%3Cpath d='M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z'%3E%3C/path%3E%3C/svg%3E");
}

/* Hide PF's default icon for the CSS workaround to use MUI's icon */
.mui-theme .pf-v6-c-table__sort-indicator svg {
  display: none;
}

.mui-theme .pf-v6-c-table__button:is(:hover, :focus) .pf-v6-c-table__sort-indicator,
.mui-theme .pf-v6-c-table__sort.pf-m-selected .pf-v6-c-table__sort-indicator {
  opacity: 0.6;
}

.mui-theme .pf-v6-c-table__sort[aria-sort='ascending'] .pf-v6-c-table__sort-indicator {
  transform: rotate(180deg);
  align-self: end;
}

.mui-theme .pf-v6-c-table__sort[aria-sort='descending'] .pf-v6-c-table__sort-indicator {
  align-self: start;
}

.mui-theme .pf-v6-c-tab-content {
  --pf-v6-c-tab-content__body--m-padding--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
  --pf-v6-c-tab-content__body--m-padding--PaddingBlockStart: var(--pf-t--global--spacer--lg);
  --pf-v6-c-tab-content__body--m-padding--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
  --pf-v6-c-tab-content__body--m-padding--PaddingInlineStart: var(--pf-t--global--spacer--lg);
}

.mui-theme .pf-v6-c-tabs {
  --pf-v6-c-tabs__link--hover--BackgroundColor: var(--mui-tabs__link--hover--BackgroundColor);
  --pf-v6-c-tabs__item--PaddingBlockStart: var(--mui-tabs__item--PaddingBlockStart);
  --pf-v6-c-tabs__item--PaddingBlockEnd: var(--mui-tabs__item--PaddingBlockEnd);
  --pf-v6-c-tabs__item--PaddingInlineStart: none;
  --pf-v6-c-tabs__item--PaddingInlineEnd: var(--mui-tabs__item--PaddingInlineEnd);
  --pf-v6-c-tabs__link--PaddingBlockStart: var(--mui-tabs__link--PaddingBlockStart);
  --pf-v6-c-tabs__link--PaddingBlockEnd: var(--mui-tabs__link--PaddingBlockEnd);
  --pf-v6-c-tabs__link--PaddingInlineStart: var(--mui-tabs__link--PaddingInlineStart);
  --pf-v6-c-tabs__link--PaddingInlineEnd: var(--mui-tabs__link--PaddingInlineEnd);
  --pf-v6-c-tabs__item--m-current__link--Color: var(--pf-t--global--text--color--brand--default);
  --pf-v6-c-tabs__item--m-current__link--after--BorderWidth: var(
    --mui-tabs__item--m-current__link--after--BorderWidth
  );
  --pf-v6-c-tabs__link--FontSize: 0.875rem;
}

.mui-theme .pf-v6-c-tabs__link {
  text-transform: var(--mui-text-transform);
  font-weight: var(--mui-button-FontWeight);
  line-height: var(--mui-button-line-height);
  letter-spacing: 0.02857em;
}

.mui-theme .pf-v6-c-tab-content {
  --pf-v6-c-tab-content__body--m-padding--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
  --pf-v6-c-tab-content__body--m-padding--PaddingBlockStart: var(--pf-t--global--spacer--lg);
  --pf-v6-c-tab-content__body--m-padding--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
  --pf-v6-c-tab-content__body--m-padding--PaddingInlineStart: var(--pf-t--global--spacer--lg);
}

.mui-theme .pf-v6-c-table__td.pf-v6-c-table__action.pf-m-width-10 {
  align-content: center;
}

.mui-theme .pf-v6-c-toolbar__item.kubeflow-u-namespace-select > .pf-v6-c-menu-toggle.pf-m-disabled {
  border: none;
}

.mui-theme .pf-v6-c-label {
  --pf-v6-c-label--BorderRadius: 16px;
  --pf-v6-c-label--FontSize: 0.8125rem;
  --pf-v6-c-label--PaddingInlineEnd: var(--mui-spacing-8px);
  --pf-v6-c-label--PaddingInlineStart: var(--mui-spacing-8px);
  --pf-v6-c-label--PaddingBlockStart: 0;
  --pf-v6-c-label--PaddingBlockEnd: 0;
  height: 24px;
}

.mui-theme .pf-v6-c-label.pf-m-overflow {
  border: 1px solid var(--mui-palette-grey-400);

  .pf-v6-c-label__text {
    color: var(--mui-palette-common-black);
  }
}

.mui-theme .pf-v6-c-label.pf-m-filled .pf-v6-c-label__actions .pf-v6-c-button {
  --pf-v6-c-button__icon--Color: var(--mui-palette-common-white);
  --pf-v6-c-button--PaddingInlineStart: var(--mui-spacing-4px);
  --pf-v6-c-button--PaddingInlineEnd: var(--mui-spacing-4px);
}

.mui-theme .pf-v6-c-label {
  --pf-v6-c-label--m-blue--Color: var(--pf-t--global--text--color--inverse);
}

.mui-theme .pf-v6-c-label-group.pf-m-category {
  --pf-v6-c-label-group--m-category--BorderWidth: 0px;
  --pf-v6-c-label-group--m-category--BorderRadius: var(--mui-shape-borderRadius);
  box-shadow: var(--mui-shadows-1);
}

.mui-theme .pf-v6-c-label.pf-m-outline {
  --pf-v6-c-label--BorderColor: none;
  --pf-v6-c-label--BackgroundColor: var(--mui-palette-grey-200);
  padding: 4px;
}

.mui-theme .pf-v6-c-masthead {
  --pf-v6-c-masthead--BackgroundColor: var(--mui-palette-common-white);
  box-shadow: var(--mui-shadows-1);
  min-height: var(--kf-central-app-bar-height);
}

.mui-theme .pf-v6-c-modal-box {
  --pf-v6-c-modal-box--BorderRadius: 0;
  border: 2px solid var(--mui-palette-common-black);
}

.mui-theme .pf-v6-c-button.pf-m-plain {
  --pf-v6-c-button--BorderRadius: 50%;
  --pf-v6-c-button--PaddingInlineStart: none;
  --pf-v6-c-button--PaddingInlineEnd: none;
}

.mui-theme .pf-v6-c-page {
  --pf-v6-c-page--BackgroundColor: var(--mui-palette-common-white);
}

.mui-theme .pf-v6-c-pagination {
  --pf-v6-c-pagination__total-items--Display: block;
}

.mui-theme .pf-v6-c-pagination__total-items b {
  font-weight: normal;
}

.mui-theme .pf-v6-c-pagination__page-menu {
  order: -1;
}

.mui-theme .pf-v6-c-pagination__page-menu .pf-v6-c-menu-toggle {
  --pf-v6-c-menu-toggle--expanded--BackgroundColor: none;
  --pf-v6-c-menu-toggle--hover--BackgroundColor: none;
  text-transform: none;
}

.mui-theme .pf-v6-c-pagination__page-menu::before {
  content: 'Rows per page:';
}

.mui-theme .pf-v6-c-page__sidebar {
  position: absolute;
  --pf-v6-c-page__sidebar--Width: var(--kf-central-app-drawer-width);
  /* Sidebar width */
  height: 100vh;
  /* Take full height of viewport */
  z-index: 300;
  /* Position sidebar above the masthead */
}

/* Hide Masthead Toggle by default */
.mui-theme .pf-v6-c-masthead__toggle {
  display: none;
}

/* Show Masthead Toggle on viewports below 1270px */
@media (max-width: 1200px) {
  .mui-theme .pf-v6-c-masthead__toggle {
    display: block;
    padding-block-start: var(--mui-spacing-4px);
  }

  .mui-theme .pf-v6-c-page__main-container {
    margin-left: 0;
  }
}

.mui-theme .pf-v6-c-page__sidebar:not(.pf-m-collapsed) + .pf-v6-c-page__main-container,
.mui-theme .pf-v6-c-page__sidebar:not(.pf-m-collapsed) + .pf-v6-c-page__drawer,
.mui-theme .pf-v6-c-page__sidebar:not(.pf-m-collapsed) + .pf-v6-c-page__main-breadcrumb {
  --pf-v6-c-page__main-container--MarginInlineStart: calc(-2 * var(--mui-spacing-16px));
  --pf-v6-c-page__main-section--PaddingInlineStart: none;
  --pf-v6-c-page__main-section--PaddingInlineEnd: none;
  --pf-v6-c-page__main-breadcrumb--PaddingInlineStart: none;
}

.pf-v6-c-page__sidebar.pf-m-collapsed+.pf-v6-c-page__main-container {
  --pf-v6-c-page__main-container--MarginInlineStart: calc(-1 * var(--mui-spacing-8px));
  --pf-v6-c-page__main-container--MarginInlineEnd: calc(-1 * var(--mui-spacing-8px));
}