:root {
/* Color palettes - Root colors*/
/* Rootcolors*/
/* Grey family*/
  --pf-v5-global--palette--white: #fff;
  --pf-v5-global--palette--black-100: #f8f8f9;
  --pf-v5-global--palette--black-150: #f0f0f1;
  --pf-v5-global--palette--black-200: #eaebed;
  --pf-v5-global--palette--black-300: #e1e2e3;
  --pf-v5-global--palette--black-400: #c3c7cd;
  --pf-v5-global--palette--black-500: #acb1b9;
  --pf-v5-global--palette--black-600: #6d7583;
  --pf-v5-global--palette--black-700: #485160;
  --pf-v5-global--palette--black-800: #2f384e;
  --pf-v5-global--palette--black-850: #1f2534;
  --pf-v5-global--palette--black-900: #10131a;
  --pf-v5-global--palette--black-1000: #000;



/* Blue family*/
 --pf-v5-global--palette--blue-50: #d5f3fe;
 --pf-v5-global--palette--blue-100: #a3e0f5;
 --pf-v5-global--palette--blue-200: #5fc9ed;
 --pf-v5-global--palette--blue-300: #46b9e8;
 --pf-v5-global--palette--blue-400: #0277a6;
 --pf-v5-global--palette--blue-500: #014d6d;
 --pf-v5-global--palette--blue-600: #013042;
 --pf-v5-global--palette--blue-700: #001821;


/* Lightblue family*/
  --pf-v5-global--palette--light-blue-100: #d5f3fe;
  --pf-v5-global--palette--light-blue-200: #a3e0f5;
  --pf-v5-global--palette--light-blue-300: #35caed;
  --pf-v5-global--palette--light-blue-400: #46b9e8;
  --pf-v5-global--palette--light-blue-500: #0277a6;
  --pf-v5-global--palette--light-blue-600: #014d6d;
  --pf-v5-global--palette--light-blue-700: #013042;


/* Green family*/
  --pf-v5-global--palette--green-50: #e9f8e7;
  --pf-v5-global--palette--green-100: #a8e29f;
  --pf-v5-global--palette--green-200: #7dd470;
  --pf-v5-global--palette--green-300: #51c540;
  --pf-v5-global--palette--green-400: #3c992e;
  --pf-v5-global--palette--green-500: #2d7323;
  --pf-v5-global--palette--green-600: #1e4c17;
  --pf-v5-global--palette--green-700: #0f260c;

/* Gold family*/
  --pf-v5-global--palette--gold-50: #fbf1ce;
  --pf-v5-global--palette--gold-100: #f7e39e;
  --pf-v5-global--palette--gold-200: #f3d56d;
  --pf-v5-global--palette--gold-300: #efc63c;
  --pf-v5-global--palette--gold-400: #e3b413;
  --pf-v5-global--palette--gold-500: #aa870e;
  --pf-v5-global--palette--gold-600: #725a09;
  --pf-v5-global--palette--gold-700: #392d05;

/* Purple family*/
  --pf-v5-global--palette--purple-50: #d9e1f6;
  --pf-v5-global--palette--purple-100: #b4c4ed;
  --pf-v5-global--palette--purple-200: #8ea7e5;
  --pf-v5-global--palette--purple-300: #688bdc;
  --pf-v5-global--palette--purple-400: #436dd3;
  --pf-v5-global--palette--purple-500: #2c56bc;
  --pf-v5-global--palette--purple-600: #234596;
  --pf-v5-global--palette--purple-700: #12234b;


/* Red family*/
  --pf-v5-global--palette--red-50: #fde5ea;
  --pf-v5-global--palette--red-100: #d70f37;
  --pf-v5-global--palette--red-200: #ad1035;
  --pf-v5-global--palette--red-300: #6c081b;
  --pf-v5-global--palette--red-400: #36040e;
  --pf-v5-global--palette--red-500: #180206;


/* Cyan family - no secunet color*/
  --pf-v5-global--palette--cyan-50: #f2f9f9;
  --pf-v5-global--palette--cyan-100: #a2d9d9;
  --pf-v5-global--palette--cyan-200: #73c5c5;
  --pf-v5-global--palette--cyan-300: #009596;
  --pf-v5-global--palette--cyan-400: #005f60;
  --pf-v5-global--palette--cyan-500: #003737;
  --pf-v5-global--palette--cyan-600: #003d44;
  --pf-v5-global--palette--cyan-700: #001f22;


/* Lightgreen - no secunet color*/
  --pf-v5-global--palette--light-green-100: #e4f5bc;
  --pf-v5-global--palette--light-green-200: #c8eb79;
  --pf-v5-global--palette--light-green-300: #ace12e;
  --pf-v5-global--palette--light-green-400: #92d400;
  --pf-v5-global--palette--light-green-500: #6ca100;
  --pf-v5-global--palette--light-green-600: #486b00;
  --pf-v5-global--palette--light-green-700: #253600;


/* Orange no secunet color family*/
  --pf-v5-global--palette--orange-50: #fff6ec;
  --pf-v5-global--palette--orange-100: #f4b678;
  --pf-v5-global--palette--orange-200: #ef9234;
  --pf-v5-global--palette--orange-300: #ec7a08;
  --pf-v5-global--palette--orange-400: #c46100;
  --pf-v5-global--palette--orange-500: #8f4700;
  --pf-v5-global--palette--orange-600: #773d00;
  --pf-v5-global--palette--orange-700: #3b1f00;

/* Primary and secondary colors*/
  --pf-v5-global--primary-color--100:var(--pf-v5-global--palette--blue-400);
  --pf-v5-global--primary-color--200:var(--pf-v5-global--palette--blue-500);

  --pf-v5-global--primary-color--light-100:var(--pf-v5-global--palette--blue-300);
  --pf-v5-global--primary-color--light-200:var(--pf-v5-global--palette--blue-200);
  --pf-v5-global--secondary-color--100:var(--pf-v5-global--palette--black-600);


/* Backgrounds*/
  --pf-v5-global--BackgroundColor--100:var(--pf-v5-global--palette--white);
  --pf-v5-global--BackgroundColor--150:var(--pf-v5-global--palette--black-100);
  --pf-v5-global--BackgroundColor--200:var(--pf-v5-global--palette--black-150);
  --pf-v5-global--BackgroundColor--light-100:var(--pf-v5-global--palette--white);
  --pf-v5-global--BackgroundColor--light-200:var(--pf-v5-global--palette--black-150);
  --pf-v5-global--BackgroundColor--light-300:#ededed;
  --pf-v5-global--BackgroundColor--dark-100:var(--pf-v5-global--palette--black-800);
  --pf-v5-global--BackgroundColor--dark-200:var(--pf-v5-global--palette--black-700);
  --pf-v5-global--BackgroundColor--dark-300:var(--pf-v5-global--palette--black-850);
  --pf-v5-global--BackgroundColor--dark-400:var(--pf-v5-global--palette--black-700);
  --pf-v5-global--BackgroundColor--dark-transparent-100:rgba(47, 56, 78, 0.62);
  --pf-v5-global--BackgroundColor--dark-transparent-200:rgba(47, 56, 78, 0.32);

  /* Text and Links */
  /* Charts */
  --pf-chart-color-blue-300-area--opacity: rgba(2, 119, 166, 0.4);

  /* Lighttheme */
  --pf-v5-global--Color--100:var(--pf-v5-global--palette--black-1000);
  --pf-v5-global--Color--200:var(--pf-v5-global--palette--black-600);
  --pf-v5-global--Color--300:var(--pf-v5-global--palette--black-800);
  --pf-v5-global--link--Color:var(--pf-v5-global--palette--blue-400);
  --pf-v5-global--link--Color-hover:var(--pf-v5-global--palette--blue-500);

  /* Darktheme */
  --pf-v5-global--Color--light-100:var(--pf-v5-global--palette--white);
  --pf-v5-global--Color--light-200:var(--pf-v5-global--palette--black-150);
  --pf-v5-global--Color--light-300:var(--pf-v5-global--palette--black-300);

  /* Cockpit colors */
  --ct-color-fg                 : var(--pf-v5-global--Color--100);
  --ct-color-bg                 : var(--pf-v5-global--BackgroundColor--150);
  --ct-color-text               : var(--ct-color-fg);

  --ct-color-nav-menu           : var(--pf-v5-global--BackgroundColor--200);
  --ct-color-nav-menu-text      : var(--ct-color-text);
  --ct-color-nav-highlight      : var(--pf-v5-global--BackgroundColor--100);
  --ct-color-nav-highlight-text : var(--ct-color-text);
  --ct-color-nav-search         : var(--ct-color-nav-menu);

  --ct-color-host-accent        : var(--pf-v5-global--active-color--100);
  --ct-topnav-background        : var(--pf-v5-global--BackgroundColor--dark-200);
  --ct-topnav-text              : var(--pf-v5-global--BackgroundColor--100);

  --ct-color-list-text          : var(--ct-color-text);
  --ct-color-list-link          : var(--ct-color-link);
  --ct-color-list-bg            : var(--ct-color-bg);

  --ct-color-button-primary-bg  : var(--pf-v5-global--primary-color--100);
}

.ct-switcher > .pf-v5-c-select {
  background: no-repeat 10% 20% / 50% url("logo.svg");
  background-color: var(--ct-topnav-background);
  color: var(--ct-topnav-text);
}

.pf-v5-c-select__toggle-wrapper {
  display: flex;
  justify-content: flex-end;
}

#host-toggle {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
}

/* hack to remove theme and language selection from menu */
.pf-v5-c-masthead .pf-v5-c-dropdown__menu section {
  display: none;
}
.pf-v5-c-masthead .pf-v5-c-dropdown__menu :nth-child(n+2):nth-child(-n+5) {
  display: none;
}

.pf-v5-c-select__toggle-text {
  display: flex;
  flex-flow: row nowrap;
}

.pf-v5-c-dropdown {
  --pf-v5-c-dropdown__toggle--before--BorderWidth: 0;
}

.pf-v5-c-table {
  --pf-v5-c-menu-toggle--m-primary--BackgroundColor: initial;
}

.ct-overview-header {
  background-color: var(--ct-topnav-background);
}

.area-ct-subnav {
  background-color: var(--ct-color-nav-menu);
  color: var(--ct-color-nav-menu-text);
}

.area-ct-subnav .search {
  /* display: none; */
  visibility: hidden;
  color: var(--ct-color-nav-highlight-text);
  /*background: var(--ct-color-nav-menu) !important;*/
  background-color: var(--ct-color-nav-highlight);

  /*.pf-v5-c-text-input-group__icon {
      color: var(--pf-v5-global--palette--black-200);
  }*/
}

.area-ct-subnav .search .pf-v5-c-text-input-group__text-input {
  color: var(--ct-color-nav-highlight-text);
  background-color: var(--ct-color-nav-highlight);
}

.nav-group-heading {
  display: none;
}

/*.area-ct-subnav .search .pf-v5-c-text-input-group__icon {
  color: var(--ct-color-bg);
}*/

.host-apps .pf-v5-c-nav__section-title {
  color: var(--ct-color-nav-menu-text);
  background-color: var(--ct-color-nav-menu);
}

.host-apps .pf-v5-c-nav__link {
  color: var(--ct-color-nav-menu-text);
  background-color: var(--ct-color-nav-menu);
}

.host-apps .pf-v5-c-nav__link:hover {
  color: var(--ct-color-nav-highlight-text);
  background-color: var(--ct-color-nav-highlight);
}

.host-apps .pf-v5-c-nav__link.pf-m-current,
.host-apps .pf-v5-c-nav__link.pf-m-current:hover {
  color: var(--ct-color-nav-highlight-text);
  background-color: var(--ct-color-nav-highlight);
}

.host-apps {
  scrollbar-color: var(--ct-color-nav-menu) var(--ct-color-nav-highlight);
}

.pf-v5-c-page__main-section {
  color: var(--ct-color-fg);
  background-color: var(--ct-color-nav-highlight);
  /*box-shadow: */
}

.pf-v5-c-card {
  color: var(--ct-color-text);
  background-color: var(--ct-color-bg);
}

.pf-v5-c-table {
  color: var(--ct-color-text);
  background-color: var(--ct-color-bg);
}

.pf-v5-l-gallery.ct-system-overview .pf-v5-c-card__title-text {
  font-size: var(--pf-v5-global--FontSize--2xl);
}

.pf-v5-c-button {
  background-color: var(--ct-color-button-primary-bg);
}

/* login page css */
body.login-pf {
  background-image: url("background.svg");
  background-repeat: no-repeat;
  background-position: 100% 0 !important;
  background-size: cover;
}

@media (min-width: 1024px) {
  body.login-pf {
    grid-template-areas:
      ". banner  banner ."
      ". .       .      ."
      ". login   .      ."
      ". details .      ."
      ". recent  .      ."
      ". .       .      .";
    /* grid-template-rows: auto auto auto auto auto;
    grid-template-columns: auto auto auto;
    grid-gap: 0 4rem; */
  }
}

#badge {
  height: 40px;
    /*background-image: url("logo.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;*/
}

#login-details {
  visibility: hidden;
}

#brand {
  font-size: 18pt;
  text-transform: uppercase;
}

#brand:before {
  content: "secunetwall <b>lpf</b>";
}

#index-brand:before {
  content: "secunetwall <b>lpf</b>";
}