/* Overrides header/footer chrome independently of the selected primary color theme. */

/* --- Light chrome: white header/footer, primary-colored text --- */
body.layout-chrome-light .layout-wrapper .layout-topbar {
  background: #ffffff !important;
  background-image: none !important;
  color: var(--primary-color, #00a6d2) !important;
  border-bottom: 1px solid #e8eaed !important;
}

body.layout-chrome-light .layout-wrapper .layout-topbar .logo,
body.layout-chrome-light .layout-wrapper .layout-topbar #menu-button,
body.layout-chrome-light .layout-wrapper .layout-topbar::after {
  background-color: #ffffff !important;
}

body.layout-chrome-light .layout-wrapper .layout-topbar .layout-menuitem-toggler,
body.layout-chrome-light .layout-wrapper .layout-topbar #menu-button,
body.layout-chrome-light .layout-wrapper .layout-topbar #menu-button i,
body.layout-chrome-light .layout-wrapper .layout-topbar #right-sidebar-button,
body.layout-chrome-light .layout-wrapper .layout-topbar #right-sidebar-button i,
body.layout-chrome-light .layout-wrapper .layout-topbar #topbar-menu-button,
body.layout-chrome-light .layout-wrapper .layout-topbar #topbar-menu-button span,
body.layout-chrome-light .layout-wrapper .layout-topbar .usermenu > li > a,
body.layout-chrome-light .layout-wrapper .layout-topbar .usermenu > li > a i,
body.layout-chrome-light .layout-wrapper .layout-topbar .usermenu > li > a span,
body.layout-chrome-light .layout-wrapper .layout-topbar .usermenu > li.menuitem-active > a i,
body.layout-chrome-light .layout-wrapper .layout-topbar .usermenu > li.menuitem-active > a span,
body.layout-chrome-light .layout-wrapper .layout-topbar .layout-topbar-brand,
body.layout-chrome-light .layout-wrapper .layout-topbar .layout-topbar-brand__name {
  color: var(--primary-color, #00a6d2) !important;
}

body.layout-chrome-light .layout-wrapper .layout-topbar .layout-topbar-brand__initial {
  background: var(--primary-50, #e8f7fc) !important;
  color: var(--primary-color, #00a6d2) !important;
}

body.layout-chrome-light .layout-wrapper .layout-topbar .route-bar-breadcrumb,
body.layout-chrome-light .layout-wrapper .layout-topbar .route-bar-breadcrumb a,
body.layout-chrome-light .layout-wrapper .layout-topbar .route-bar-breadcrumb span,
body.layout-chrome-light .layout-wrapper .layout-topbar .route-bar-breadcrumb i {
  color: var(--primary-color, #00a6d2) !important;
  opacity: 0.92;
}

body.layout-chrome-light .layout-wrapper .layout-topbar .route-bar-breadcrumb a:hover {
  color: var(--primary-color, #00a6d2) !important;
  opacity: 1;
}

body.layout-chrome-light .layout-wrapper .layout-topbar .layout-topbar-icon-btn {
  border-color: color-mix(in srgb, var(--primary-color, #00a6d2) 28%, #ffffff) !important;
  background: #ffffff !important;
  color: var(--primary-color, #00a6d2) !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
}

body.layout-chrome-light .layout-wrapper .layout-topbar .layout-topbar-icon-btn:hover,
body.layout-chrome-light .layout-wrapper .layout-topbar .layout-topbar-icon-btn:focus-visible,
body.layout-chrome-light .layout-wrapper .layout-topbar .layout-topbar-icon-btn.layout-topbar-icon-btn-active {
  background: var(--primary-50, #e8f7fc) !important;
  border-color: var(--primary-color, #00a6d2) !important;
  color: var(--primary-color, #00a6d2) !important;
}

body.layout-chrome-light .layout-wrapper .layout-topbar .layout-topbar-user-trigger {
  border-color: color-mix(in srgb, var(--primary-color, #00a6d2) 28%, #ffffff) !important;
  background: #ffffff !important;
  color: var(--primary-color, #00a6d2) !important;
}

body.layout-chrome-light .layout-wrapper .layout-topbar .layout-topbar-user-trigger .pi {
  color: var(--primary-color, #00a6d2) !important;
}

body.layout-chrome-light .layout-wrapper .layout-topbar .layout-topbar-user-avatar {
  background: var(--primary-50, #e8f7fc) !important;
  color: var(--primary-color, #00a6d2) !important;
}

body.layout-chrome-light .layout-wrapper .layout-topbar .layout-topbar-user-name,
body.layout-chrome-light .layout-wrapper .layout-topbar .layout-topbar-user-branch {
  color: var(--primary-color, #00a6d2) !important;
}

body.layout-chrome-light .layout-footer {
  background-color: #ffffff !important;
  color: var(--primary-color, #00a6d2) !important;
  border-top: 1px solid #e8eaed !important;
}

body.layout-chrome-light .layout-footer h3,
body.layout-chrome-light .layout-footer p,
body.layout-chrome-light .layout-footer a,
body.layout-chrome-light .layout-footer .layout-footer-version,
body.layout-chrome-light .layout-footer .layout-footer-credit,
body.layout-chrome-light .layout-footer .layout-footer-credit a {
  color: var(--primary-color, #00a6d2) !important;
}

/* --- Primary chrome: colored header/footer, light text --- */
body.layout-chrome-primary .layout-wrapper .layout-topbar {
  background: var(--primary-color) !important;
  background-image: none !important;
  color: #ffffff;
  border-bottom-color: transparent !important;
}

body.layout-chrome-primary .layout-wrapper .layout-topbar .logo,
body.layout-chrome-primary .layout-wrapper .layout-topbar #menu-button,
body.layout-chrome-primary .layout-wrapper .layout-topbar::after {
  background-color: transparent !important;
}

body.layout-chrome-primary .layout-wrapper .layout-topbar .layout-menuitem-toggler,
body.layout-chrome-primary .layout-wrapper .layout-topbar #menu-button,
body.layout-chrome-primary .layout-wrapper .layout-topbar #menu-button i,
body.layout-chrome-primary .layout-wrapper .layout-topbar .usermenu > li > a,
body.layout-chrome-primary .layout-wrapper .layout-topbar .usermenu > li > a i,
body.layout-chrome-primary .layout-wrapper .layout-topbar .usermenu > li > a span,
body.layout-chrome-primary .layout-wrapper .layout-topbar .layout-topbar-brand,
body.layout-chrome-primary .layout-wrapper .layout-topbar .layout-topbar-brand__name {
  color: #ffffff !important;
}

body.layout-chrome-primary .layout-wrapper .layout-topbar .layout-topbar-brand__initial {
  background: rgba(255, 255, 255, 0.18) !important;
  color: #ffffff !important;
}

body.layout-chrome-primary .layout-wrapper .layout-topbar .route-bar-breadcrumb,
body.layout-chrome-primary .layout-wrapper .layout-topbar .route-bar-breadcrumb a,
body.layout-chrome-primary .layout-wrapper .layout-topbar .route-bar-breadcrumb span,
body.layout-chrome-primary .layout-wrapper .layout-topbar .route-bar-breadcrumb i {
  color: rgba(255, 255, 255, 0.92) !important;
}

body.layout-chrome-primary .layout-wrapper .layout-topbar .route-bar-breadcrumb a:hover {
  color: #ffffff !important;
}

body.layout-chrome-primary .layout-wrapper .layout-topbar .layout-topbar-icon-btn {
  border-color: rgba(255, 255, 255, 0.28) !important;
  background: rgba(255, 255, 255, 0.14) !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

body.layout-chrome-primary .layout-wrapper .layout-topbar .layout-topbar-icon-btn:hover,
body.layout-chrome-primary .layout-wrapper .layout-topbar .layout-topbar-icon-btn:focus-visible {
  background: rgba(255, 255, 255, 0.22) !important;
  border-color: rgba(255, 255, 255, 0.4) !important;
  color: #ffffff !important;
}

body.layout-chrome-primary .layout-wrapper .layout-topbar .layout-topbar-user-trigger {
  border-color: rgba(255, 255, 255, 0.28) !important;
  background: rgba(255, 255, 255, 0.14) !important;
  color: #ffffff !important;
}

body.layout-chrome-primary .layout-wrapper .layout-topbar .layout-topbar-user-name,
body.layout-chrome-primary .layout-wrapper .layout-topbar .layout-topbar-user-branch,
body.layout-chrome-primary .layout-wrapper .layout-topbar .layout-topbar-user-trigger .pi {
  color: #ffffff !important;
}

body.layout-chrome-primary .layout-wrapper .layout-topbar .layout-topbar-user-branch {
  color: rgba(255, 255, 255, 0.85) !important;
}

body.layout-chrome-primary .layout-footer {
  background-color: var(--primary-color) !important;
  color: #ffffff !important;
  border-top: none !important;
}

body.layout-chrome-primary .layout-footer h3,
body.layout-chrome-primary .layout-footer p,
body.layout-chrome-primary .layout-footer a,
body.layout-chrome-primary .layout-footer .layout-footer-version,
body.layout-chrome-primary .layout-footer .layout-footer-credit,
body.layout-chrome-primary .layout-footer .layout-footer-credit a {
  color: #ffffff !important;
}