:root {
  --pf-global--palette--blue-50: #dbdfe5;
  --pf-global--palette--blue-100: #c9ccd1;
  --pf-global--palette--blue-200: #a5afbd;
  --pf-global--palette--blue-300: #5c7499;
  --pf-global--palette--blue-400: #4b5f7c;
  --pf-global--palette--blue-500: #2e3a4d;
  --pf-global--palette--blue-600: #202733;
  --pf-global--palette--blue-700: #10141a;
  --pf-global--palette--light-blue-500: #2d8dad;
  --pf-global--BackgroundColor--dark-100:var(--pf-global--palette--blue-600);
  --pf-global--BackgroundColor--dark-200:var(--pf-global--palette--blue-600);
  --pf-global--BackgroundColor--dark-300:var(--pf-global--palette--blue-500);
  --pf-global--BackgroundColor--dark-400:var(--pf-global--palette--blue-500);
  --pf-global--Color--100: var(--pf-global--palette--black-900);
  --pf-global--Color--dark-100: var(--pf-global--palette--black-900);
  --pf-global--active-color--100: var(--pf-global--palette--blue-400);
  --pf-global--active-color--200: var(--pf-global--palette--blue-100);
  --pf-global--active-color--300: var(--pf-global--palette--blue-300);
  --pf-global--active-color--400: var(--pf-global--palette--blue-200);
  --pf-global--primary-color--100: var(--pf-global--palette--light-blue-500);
  --pf-global--primary-color--200: var(--pf-global--palette--light-blue-600);
  --pf-global--primary-color--light-100: var(--pf-global--palette--light-blue-300);
  --pf-global--primary-color--dark-100: var(--pf-global--palette--light-blue-500);
  --pf-global--default-color--100: var(--pf-global--palette--blue-300);
  --pf-global--default-color--200: var(--pf-global--palette--blue-400);
  --pf-global--default-color--300: var(--pf-global--palette--blue-500);
  --pf-global--info-color--100: var(--pf-global--palette--blue-300);
  --pf-global--info-color--200: var(--pf-global--palette--blue-600);
  --pf-global--font-path: "../web_modules/@patternfly/react-core/dist/styles/assets/fonts";
  --pf-global--fonticon-path: "../web_modules/@patternfly/react-core/dist/styles/assets/pficon";
  --pf-global--link--Color: var(--pf-global--palette--light-blue-500);
  --pf-global--link--Color--hover: var(--pf-global--palette--light-blue-600);
  --pf-global--link--Color--light: var(--pf-global--palette--light-blue-400);
  --pf-global--link--Color--light--hover: var(--pf-global--palette--light-blue-300);
  --pf-global--link--Color--dark: var(--pf-global--palette--light-blue-500);
  --pf-global--link--Color--dark--hover: var(--pf-global--palette--light-blue-600);
  --pf-global--icon--Color--dark: var(--pf-global--palette--black-900);
}

body > #welcomeScreen *,
body > #main_react_container * {
  --pf-global--BackgroundColor--dark-100:var(--pf-global--palette--blue-500);
  --pf-global--BackgroundColor--dark-200:var(--pf-global--palette--blue-500);
  --pf-global--BackgroundColor--dark-300:var(--pf-global--palette--blue-400);
  --pf-global--BackgroundColor--dark-400:var(--pf-global--palette--blue-400);
  --pf-global--ButtonColor--100: var(--pf-global--Color--light-200);
  --pf-global--ButtonColor--200: var(--pf-global--Color--light-300);
  --pf-global--disabled-color--100: #6a6e73;
  --pf-global--disabled-color--200: #d2d2d2;
  --pf-global--disabled-color--300: #f0f0f0;
  --pf-c-page__sidebar-body--PaddingTop: 0;
  --pf-c-page__main-section--BackgroundColor: var(--pf-c-page__main-section--m-light--BackgroundColor);
  --pf-c-avatar--BorderColor: var(--pf-c-avatar--m-light--BorderColor);
  --pf-c-avatar--BorderWidth: var(--pf-c-avatar--m-light--BorderWidth);
  --pf-global--Color--100: var(--pf-global--Color--dark-100);
  --pf-global--Color--200: var(--pf-global--Color--dark-200);
  --pf-global--BorderColor--100: var(--pf-global--BorderColor--dark-100);
  --pf-global--primary-color--100: var(--pf-global--primary-color--dark-100);
  --pf-global--link--Color: var(--pf-global--link--Color--dark);
  --pf-global--link--Color--hover: var(--pf-global--link--Color--dark--hover);
  --pf-global--BackgroundColor--100: var(--pf-global--BackgroundColor--light-100);
  --pf-c-masthead--BackgroundColor: var(--pf-c-masthead--m-light--BackgroundColor);
  --pf-c-masthead__main--BorderBottomColor: var(--pf-c-masthead--m-light__main--BorderBottomColor);
  --pf-c-nav__item--before--BorderColor: var(--pf-c-nav--m-light__item--before--BorderColor);
  --pf-c-nav__item--m-current--not--m-expanded__link--BackgroundColor: var(--pf-c-nav--m-light__item--m-current--not--m-expanded__link--BackgroundColor);
  --pf-c-nav__link--Color: var(--pf-c-nav--m-light__link--Color);
  --pf-c-nav__link--hover--Color: var(--pf-c-nav--m-light__link--hover--Color);
  --pf-c-nav__link--focus--Color: var(--pf-c-nav--m-light__link--focus--Color);
  --pf-c-nav__link--active--Color: var(--pf-c-nav--m-light__link--active--Color);
  --pf-c-nav__link--m-current--Color: var(--pf-c-nav--m-light__link--m-current--Color);
  --pf-c-nav__link--hover--BackgroundColor: var(--pf-c-nav--m-light__link--hover--BackgroundColor);
  --pf-c-nav__link--focus--BackgroundColor: var(--pf-c-nav--m-light__link--focus--BackgroundColor);
  --pf-c-nav__link--active--BackgroundColor: var(--pf-c-nav--m-light__link--active--BackgroundColor);
  --pf-c-nav__link--m-current--BackgroundColor: var(--pf-c-nav--m-light__link--m-current--BackgroundColor);
  --pf-c-nav__link--before--BorderColor: var(--pf-c-nav--m-light__link--before--BorderColor);
  --pf-c-nav__link--after--BorderColor: var(--pf-c-nav--m-light__link--after--BorderColor);
  --pf-c-nav__link--m-current--after--BorderColor: var(--pf-c-nav--m-light__link--m-current--after--BorderColor);
  --pf-c-nav__subnav__link--hover--after--BorderColor: var(--pf-c-nav--m-light__subnav__link--hover--after--BorderColor);
  --pf-c-nav__subnav__link--focus--after--BorderColor: var(--pf-c-nav--m-light__subnav__link--focus--after--BorderColor);
  --pf-c-nav__subnav__link--active--after--BorderColor: var(--pf-c-nav--m-light__subnav__link--active--after--BorderColor);
  --pf-c-nav__subnav__link--m-current--after--BorderColor: var(--pf-c-nav--m-light__subnav__link--m-current--after--BorderColor);
  --pf-c-nav__section-title--Color: var(--pf-c-nav--m-light__section-title--Color);
  --pf-c-nav__section-title--BorderBottomColor: var(--pf-c-nav--m-light__section-title--BorderBottomColor);
  --pf-c-divider--after--BackgroundColor: var(--pf-c-nav--m-light--c-divider--BackgroundColor);
  --pf-c-page__sidebar--BackgroundColor: var(--pf-c-page__sidebar--m-light--BackgroundColor);
}
body.light-theme {
  color: var(--pf-global--Color--100)
}
body.dark-theme > #welcomeScreen *,
body.dark-theme > #main_react_container * {
  --pf-global--ButtonColor--100: var(--pf-global--Color--100);
  --pf-global--ButtonColor--200: var(--pf-global--Color--200);
  --pf-global--disabled-color--100: var(--pf-global--BackgroundColor--dark-100);
  --pf-global--disabled-color--200: var(--pf-global--BackgroundColor--dark-200);
  --pf-global--disabled-color--300: var(--pf-global--BackgroundColor--dark-400);
  --pf-c-page__sidebar-body--PaddingTop: var(--pf-global--spacer--sm);
  --pf-c-page__main-section--BackgroundColor: var(--pf-global--BackgroundColor--dark-400);
  --pf-c-avatar--BorderColor: var(--pf-c-avatar--m-dark--BorderColor);
  --pf-c-avatar--BorderWidth: var(--pf-c-avatar--m-dark--BorderWidth);
  --pf-global--Color--100: var(--pf-global--Color--light-200);
  --pf-global--Color--200: var(--pf-global--Color--light-300);
  --pf-global--BorderColor--100: var(--pf-global--BorderColor--light-100);
  --pf-global--primary-color--100: var(--pf-global--primary-color--light-100);
  --pf-global--link--Color: var(--pf-global--link--Color--light);
  --pf-global--link--Color--hover: var(--pf-global--link--Color--light);
  --pf-global--BackgroundColor--100: var(--pf-global--BackgroundColor--dark-100);
  --pf-c-masthead--BackgroundColor: var(--pf-global--BackgroundColor--dark-100);
  --pf-c-masthead__main--BorderBottomColor: transparent;
  --pf-c-nav__item--before--BorderColor: var(--pf-global--BackgroundColor--dark-200);
  --pf-c-nav__item--m-current--not--m-expanded__link--BackgroundColor: var(--pf-global--BackgroundColor--dark-400);
  --pf-c-nav__link--Color: var(--pf-global--Color--light-200);
  --pf-c-nav__link--hover--Color: var(--pf-global--Color--light-200);
  --pf-c-nav__link--focus--Color: var(--pf-global--Color--light-200);
  --pf-c-nav__link--active--Color: var(--pf-global--Color--light-200);
  --pf-c-nav__link--m-current--Color: var(--pf-global--Color--light-200);
  --pf-c-nav__link--hover--BackgroundColor: var(--pf-global--BackgroundColor--dark-200);
  --pf-c-nav__link--focus--BackgroundColor: var(--pf-global--BackgroundColor--dark-200);
  --pf-c-nav__link--active--BackgroundColor: var(--pf-global--BackgroundColor--dark-200);
  --pf-c-nav__link--m-current--BackgroundColor: var(--pf-global--BackgroundColor--dark-400);
  --pf-c-nav__link--before--BorderColor: var(--pf-c-nav--m-light__link--before--BorderColor);
  --pf-c-nav__link--after--BorderColor: var(--pf-c-nav--m-light__link--after--BorderColor);
  --pf-c-nav__link--m-current--after--BorderColor: var(--pf-c-nav--m-light__link--m-current--after--BorderColor);
  --pf-c-nav__subnav__link--hover--after--BorderColor: var(--pf-c-nav--m-light__subnav__link--hover--after--BorderColor);
  --pf-c-nav__subnav__link--focus--after--BorderColor: var(--pf-c-nav--m-light__subnav__link--focus--after--BorderColor);
  --pf-c-nav__subnav__link--active--after--BorderColor: var(--pf-c-nav--m-light__subnav__link--active--after--BorderColor);
  --pf-c-nav__subnav__link--m-current--after--BorderColor: var(--pf-c-nav--m-light__subnav__link--m-current--after--BorderColor);
  --pf-c-nav__section-title--Color: var(--pf-global--Color--light-200);
  --pf-c-nav__section-title--BorderBottomColor: var(--pf-global--BackgroundColor--dark-200);
  --pf-c-divider--after--BackgroundColor: var(--pf-c-divider--BackgroundColor);
  --pf-c-page__sidebar--BackgroundColor: var(--pf-global--BackgroundColor--dark-300);
}

@media (prefers-color-scheme: dark) {
  body > #welcomeScreen *,
  body > #main_react_container * {
    --pf-global--BackgroundColor--dark-100:var(--pf-global--palette--blue-600);
    --pf-global--BackgroundColor--dark-200:var(--pf-global--palette--blue-600);
    --pf-global--BackgroundColor--dark-300:var(--pf-global--palette--blue-500);
    --pf-global--BackgroundColor--dark-400:var(--pf-global--palette--blue-500);
    --pf-global--ButtonColor--100: var(--pf-global--Color--100);
    --pf-global--ButtonColor--200: var(--pf-global--Color--200);
    --pf-global--disabled-color--100: var(--pf-global--BackgroundColor--dark-100);
    --pf-global--disabled-color--200: var(--pf-global--BackgroundColor--dark-200);
    --pf-global--disabled-color--300: var(--pf-global--BackgroundColor--dark-400);
    --pf-c-page__sidebar-body--PaddingTop: var(--pf-global--spacer--sm);
    --pf-c-page__main-section--BackgroundColor: var(--pf-global--BackgroundColor--dark-400);
    --pf-c-avatar--BorderColor: var(--pf-c-avatar--m-dark--BorderColor);
    --pf-c-avatar--BorderWidth: var(--pf-c-avatar--m-dark--BorderWidth);
    --pf-global--Color--100: var(--pf-global--Color--light-200);
    --pf-global--Color--200: var(--pf-global--Color--light-300);
    --pf-global--BorderColor--100: var(--pf-global--BorderColor--light-100);
    --pf-global--primary-color--100: var(--pf-global--primary-color--light-100);
    --pf-global--link--Color: var(--pf-global--link--Color--light);
    --pf-global--link--Color--hover: var(--pf-global--link--Color--light);
    --pf-global--BackgroundColor--100: var(--pf-global--BackgroundColor--dark-100);
    --pf-c-masthead--BackgroundColor: var(--pf-global--BackgroundColor--dark-100);
    --pf-c-masthead__main--BorderBottomColor: transparent;
    --pf-c-nav__item--before--BorderColor: var(--pf-global--BackgroundColor--dark-200);
    --pf-c-nav__item--m-current--not--m-expanded__link--BackgroundColor: var(--pf-global--BackgroundColor--dark-400);
    --pf-c-nav__link--Color: var(--pf-global--Color--light-200);
    --pf-c-nav__link--hover--Color: var(--pf-global--Color--light-200);
    --pf-c-nav__link--focus--Color: var(--pf-global--Color--light-200);
    --pf-c-nav__link--active--Color: var(--pf-global--Color--light-200);
    --pf-c-nav__link--m-current--Color: var(--pf-global--Color--light-200);
    --pf-c-nav__link--hover--BackgroundColor: var(--pf-global--BackgroundColor--dark-200);
    --pf-c-nav__link--focus--BackgroundColor: var(--pf-global--BackgroundColor--dark-200);
    --pf-c-nav__link--active--BackgroundColor: var(--pf-global--BackgroundColor--dark-200);
    --pf-c-nav__link--m-current--BackgroundColor: var(--pf-global--BackgroundColor--dark-400);
    --pf-c-nav__link--before--BorderColor: var(--pf-c-nav--m-light__link--before--BorderColor);
    --pf-c-nav__link--after--BorderColor: var(--pf-c-nav--m-light__link--after--BorderColor);
    --pf-c-nav__link--m-current--after--BorderColor: var(--pf-c-nav--m-light__link--m-current--after--BorderColor);
    --pf-c-nav__subnav__link--hover--after--BorderColor: var(--pf-c-nav--m-light__subnav__link--hover--after--BorderColor);
    --pf-c-nav__subnav__link--focus--after--BorderColor: var(--pf-c-nav--m-light__subnav__link--focus--after--BorderColor);
    --pf-c-nav__subnav__link--active--after--BorderColor: var(--pf-c-nav--m-light__subnav__link--active--after--BorderColor);
    --pf-c-nav__subnav__link--m-current--after--BorderColor: var(--pf-c-nav--m-light__subnav__link--m-current--after--BorderColor);
    --pf-c-nav__section-title--Color: var(--pf-global--Color--light-200);
    --pf-c-nav__section-title--BorderBottomColor: var(--pf-global--BackgroundColor--dark-200);
    --pf-c-divider--after--BackgroundColor: var(--pf-c-divider--BackgroundColor);
    --pf-c-page__sidebar--BackgroundColor: var(--pf-global--BackgroundColor--dark-300);
  }
  body.light-theme > #welcomeScreen *,
  body.light-theme > #main_react_container * {
    --pf-global--ButtonColor--100: var(--pf-global--Color--light-200);
    --pf-global--ButtonColor--200: var(--pf-global--Color--light-300);
    --pf-global--disabled-color--100: #6a6e73;
    --pf-global--disabled-color--200: #d2d2d2;
    --pf-global--disabled-color--300: #f0f0f0;
    --pf-c-page__sidebar-body--PaddingTop: 0;
    --pf-c-page__main-section--BackgroundColor: var(--pf-c-page__main-section--m-light--BackgroundColor);
    --pf-c-avatar--BorderColor: var(--pf-c-avatar--m-light--BorderColor);
    --pf-c-avatar--BorderWidth: var(--pf-c-avatar--m-light--BorderWidth);
    --pf-global--Color--100: var(--pf-global--Color--dark-100);
    --pf-global--Color--200: var(--pf-global--Color--dark-200);
    --pf-global--BorderColor--100: var(--pf-global--BorderColor--dark-100);
    --pf-global--primary-color--100: var(--pf-global--primary-color--dark-100);
    --pf-global--link--Color: var(--pf-global--link--Color--dark);
    --pf-global--link--Color--hover: var(--pf-global--link--Color--dark--hover);
    --pf-global--BackgroundColor--100: var(--pf-global--BackgroundColor--light-100);
    --pf-c-masthead--BackgroundColor: var(--pf-c-masthead--m-light--BackgroundColor);
    --pf-c-masthead__main--BorderBottomColor: var(--pf-c-masthead--m-light__main--BorderBottomColor);
    --pf-c-nav__item--before--BorderColor: var(--pf-c-nav--m-light__item--before--BorderColor);
    --pf-c-nav__item--m-current--not--m-expanded__link--BackgroundColor: var(--pf-c-nav--m-light__item--m-current--not--m-expanded__link--BackgroundColor);
    --pf-c-nav__link--Color: var(--pf-c-nav--m-light__link--Color);
    --pf-c-nav__link--hover--Color: var(--pf-c-nav--m-light__link--hover--Color);
    --pf-c-nav__link--focus--Color: var(--pf-c-nav--m-light__link--focus--Color);
    --pf-c-nav__link--active--Color: var(--pf-c-nav--m-light__link--active--Color);
    --pf-c-nav__link--m-current--Color: var(--pf-c-nav--m-light__link--m-current--Color);
    --pf-c-nav__link--hover--BackgroundColor: var(--pf-c-nav--m-light__link--hover--BackgroundColor);
    --pf-c-nav__link--focus--BackgroundColor: var(--pf-c-nav--m-light__link--focus--BackgroundColor);
    --pf-c-nav__link--active--BackgroundColor: var(--pf-c-nav--m-light__link--active--BackgroundColor);
    --pf-c-nav__link--m-current--BackgroundColor: var(--pf-c-nav--m-light__link--m-current--BackgroundColor);
    --pf-c-nav__link--before--BorderColor: var(--pf-c-nav--m-light__link--before--BorderColor);
    --pf-c-nav__link--after--BorderColor: var(--pf-c-nav--m-light__link--after--BorderColor);
    --pf-c-nav__link--m-current--after--BorderColor: var(--pf-c-nav--m-light__link--m-current--after--BorderColor);
    --pf-c-nav__subnav__link--hover--after--BorderColor: var(--pf-c-nav--m-light__subnav__link--hover--after--BorderColor);
    --pf-c-nav__subnav__link--focus--after--BorderColor: var(--pf-c-nav--m-light__subnav__link--focus--after--BorderColor);
    --pf-c-nav__subnav__link--active--after--BorderColor: var(--pf-c-nav--m-light__subnav__link--active--after--BorderColor);
    --pf-c-nav__subnav__link--m-current--after--BorderColor: var(--pf-c-nav--m-light__subnav__link--m-current--after--BorderColor);
    --pf-c-nav__section-title--Color: var(--pf-c-nav--m-light__section-title--Color);
    --pf-c-nav__section-title--BorderBottomColor: var(--pf-c-nav--m-light__section-title--BorderBottomColor);
    --pf-c-divider--after--BackgroundColor: var(--pf-c-nav--m-light--c-divider--BackgroundColor);
    --pf-c-page__sidebar--BackgroundColor: var(--pf-c-page__sidebar--m-light--BackgroundColor);
  }

  body.light-theme {
    --pf-global--Color--100: var(--pf-global--Color--dark-100);
    color: var(--pf-global--Color--100)
  }
}

main {
  color: var(--pf-global--Color--100);
}

.pf-t-dark.pf-m-opaque-200 {
   background-color: var(--pf-global--palette--black-900);
 }