/**
 * Do not edit directly
 * Generated on Thu, 18 Nov 2021 20:26:50 GMT
 */
:host {
  display: block;
  position: sticky;
  z-index: 50;
  top: 0;
  left: 0;
  height: 100px;
  width: 100%;
  padding: 0 1.875rem;
  box-sizing: border-box;
  background-color: var(--color-gsb-global-status-bar);
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  contain: layout;
  /* This improves CSS performance see: https://developers.google.com/web/updates/2016/06/css-containment */
}

:host([hidden]) {
  display: none;
}

header {
  overflow: hidden;
  display: flex;
  height: 100%;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
}

slot[name=left-side] > *,
::slotted(*[slot=left-side]) {
  margin-right: 10px;
}

slot[name=left-side] > rux-icon,
::slotted(rux-icon[slot=left-side]) {
  height: 34px;
}

slot[name=left-side] > .shifted-up,
::slotted(.shifted-up[slot=left-side]) {
  height: 54px;
}

.app-meta,
::slotted(*[slot=app-meta]) {
  display: inline-flex;
  flex-wrap: wrap;
  padding: 0;
  margin: 0 auto 0 0;
  color: var(--color-global-basics-white);
  white-space: nowrap;
}

.app-info-wrapper {
  flex-basis: 100%;
  display: flex;
  align-items: baseline;
  margin-bottom: 6px;
  min-width: 170px;
}

.app-meta h1 {
  margin-bottom: 0;
  margin-top: 0;
  height: 32px;
  font-family: var(--font-heading-1-font-family);
  font-size: var(--font-heading-1-font-size);
  font-weight: var(--font-heading-1-font-weight);
  letter-spacing: var(--font-heading-1-letter-spacing);
}

.app-meta h1.app-domain {
  margin-right: 13px;
  font-family: var(--font-heading-1-bold-font-family);
  font-size: var(--font-heading-1-bold-font-size);
  font-weight: var(--font-heading-1-bold-font-weight);
  letter-spacing: var(--font-heading-1-bold-letter-spacing);
}

.app-name {
  margin-right: 0.3em;
}

.app-version {
  display: inline-block;
  font-size: var(--font-heading-6-font-size);
  font-weight: var(--font-heading-6-font-weight);
}

.app-state-wrapper {
  display: flex;
}

.app-state {
  box-sizing: border-box;
  color: var(--color-global-basics-white);
  background-color: var(--color-global-basics-black);
  border-radius: var(--app-state-radius);
  font-family: var(--font-body-2-font-family);
  font-size: var(--font-body-2-font-size);
  font-weight: var(--font-body-2-font-weight);
  letter-spacing: var(--font-body-2-letter-spacing);
  padding: 2px 6px;
  text-align: center;
  height: 22px;
  margin-right: 6px;
  white-space: nowrap;
}

.username {
  box-sizing: border-box;
  flex-basis: 50%;
  font-family: var(--font-body-2-font-family);
  font-size: var(--font-body-2-font-size);
  font-weight: var(--font-body-2-font-weight);
  letter-spacing: var(--font-body-2-letter-spacing);
  padding: 2px 0;
  height: 22px;
}

.slotted-content {
  display: inline-flex;
  justify-content: center;
  flex-basis: 100%;
}

::slotted(*) {
  --color-dialog-header: #172533;
  --color-classification-top-secret-sci: #fce83a;
  --color-classification-top-secret: #ff8c00;
  --color-classification-secret: #c8102e;
  --color-classification-confidential: #0033a0;
  --color-classification-cui: #502b85;
  --color-classification-unclassified: #007a33;
  --color-status-off-banner: #ced6e4;
  --color-status-standby-under-border: rgba(45, 204, 255, 0);
  --color-status-standby-banner: #5ce2ff;
  --color-status-normal-banner: #99f666;
  --color-status-caution-banner: #fded61;
  --color-status-critical-banner: #ff5f60;
  --color-status-border: rgba(0, 0, 0, 0);
  --color-status-off-border: rgba(158, 167, 173, 0);
  --color-status-off-fill: #9ea7ad;
  --color-status-standby-fill: #2dccff;
  --color-status-normal-fill: #56f000;
  --color-status-caution-fill: #fce83a;
  --color-status-serious-fill: #ffb302;
  --color-status-critical-fill: #ff3838;
  --color-gsb-default-text: #ffffff;
  --color-gsb-primary: #4dacff;
  --color-gsb-global-status-bar: #172635;
  --color-banner-text-dark: #000000;
  --color-banner-text-light: #ffffff;
  --color-banner-clear: rgba(8, 12, 17, 0.3);
  --color-dialog-shadow3: rgba(0, 0, 0, 0.2);
  --color-dialog-shadow2: rgba(0, 0, 0, 0.12);
  --color-dialog-shadow1: rgba(0, 0, 0, 0.25);
  --color-table-header-shadow: #000000;
  --color-scrollbar-shadow: rgba(0, 0, 0, 0.5);
  --color-list-hover: #142435;
  --color-table-hover: rgba(146, 203, 255, 0.3);
  --color-hover: #92cbff;
  --color-selected: #1c3f5e;
  --color-active: #2b659b;
  --color-primary-alt: #3a87cf;
  --color-primary: #4dacff;
  --color-inverse-text: #080c11;
  --color-placeholder-text: #9fa3a7;
  --color-secondary-text: #d4d8dd;
  --color-default-text: #ffffff;
  --color-surface: #1b2d3e;
  --color-background: #101923;
}