/**
 * Do not edit directly
 * Generated on Wed, 06 Apr 2022 19:04:53 GMT
 */
:host {
  display: block;
  position: sticky;
  z-index: 50;
  top: 0;
  left: 0;
  height: 100px;
  width: -webkit-fill-available;
  width: -moz-available;
  width: stretch;
  padding: 0 1.875rem;
  box-sizing: border-box;
  background-color: var(--gsb-color-background);
  -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-palette-neutral-000);
  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-palette-neutral-000);
  background-color: var(--color-palette-neutral-1000);
  border-radius: var(--radius-base);
  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(*) {
  --tag-shadow-inner-off: inset 0px 0px 5px 0px rgb(164, 171, 182);
  --tag-shadow-inner-critical: inset 0px 0px 5px 0px rgb(255, 56, 56);
  --tag-shadow-inner-normal: inset 0px 0px 5px 0px rgb(86, 240, 0);
  --scrollbar-shadow-inner-horizontal: inset 1px 3px 3px 0px rgba(0, 0, 0, 0.5);
  --scrollbar-shadow-inner-vertical: inset 3px 3px 3px 0px rgba(0, 0, 0, 0.5);
  --gsb-color-text: #ffffff;
  --gsb-color-background: #172635;
  --gsb-icon-color-fill-hover: #92cbff;
  --gsb-icon-color-fill-default: #4dacff;
  --status-symbol-color-border-off: #a4abb6;
  --status-symbol-color-border-standby: #2dccff;
  --status-symbol-color-border-normal: #56f000;
  --status-symbol-color-border-caution: #fce83a;
  --status-symbol-color-border-serious: #ffb302;
  --status-symbol-color-border-critical: #ff3838;
  --status-symbol-color-fill-off: #a4abb6;
  --status-symbol-color-fill-standby: #2dccff;
  --status-symbol-color-fill-normal: #56f000;
  --status-symbol-color-fill-caution: #fce83a;
  --status-symbol-color-fill-serious: #ffb302;
  --status-symbol-color-fill-critical: #ff3838;
  --notification-banner-color-background-off: #bbc1c9;
  --notification-banner-color-background-standby: #5ce2ff;
  --notification-banner-color-background-normal: #99f666;
  --notification-banner-color-background-caution: #fded61;
  --notification-banner-color-background-serious: #ffcc57;
  --notification-banner-color-background-critical: #ff5f60;
  --notification-banner-icon-color-fill-off: #51555b;
  --notification-banner-icon-color-fill-standby: #35798e;
  --notification-banner-icon-color-fill-normal: #007a33;
  --notification-banner-icon-color-fill-caution: #917d01;
  --notification-banner-icon-color-fill-serious: #975f0e;
  --notification-banner-icon-color-fill-critical: #8b1703;
  --dialog-shadow-outer: 0px 0px 4px 0px rgba(0, 0, 0, 0.25), 0px 4px 4px 3px rgba(0, 0, 0, 0.12), 0px 4px 4px 0px rgba(0, 0, 0, 0.4);
  --classification-banner-color-background-unclassified: #007a33;
  --classification-banner-color-background-cui: #502b85;
  --classification-banner-color-background-confidential: #0033a0;
  --classification-banner-color-background-secret: #c8102e;
  --classification-banner-color-background-topsecret: #ff8c00;
  --classification-banner-color-background-topsecretsci: #fce83a;
  --container-color-border: #000000;
  --card-color-border: #51555b;
  --popup-menu-caret-color-fill: #2b659b;
  --color-classification-unclassified: #007a33;
  --color-classification-cui: #502b85;
  --color-classification-confidential: #0033a0;
  --color-classification-secret: #c8102e;
  --color-classification-topsecret: #ff8c00;
  --color-classification-topsecretsci: #fce83a;
  --color-status-off: #a4abb6;
  --color-status-standby: #64d9ff;
  --color-status-normal: #56f000;
  --color-status-caution: #fce83a;
  --color-status-serious: #ffb302;
  --color-status-critical: #ff3838;
  --color-border-interactive-muted: #2b659b;
  --color-border-interactive-hover: #92cbff;
  --color-border-interactive-default: #4dacff;
  --color-text-error: #ff3838;
  --color-text-black: #000000;
  --color-text-white: #ffffff;
  --color-text-interactive-hover: #92cbff;
  --color-text-interactive-default: #4dacff;
  --color-text-inverse: #080c11;
  --color-text-placeholder: #a4abb6;
  --color-text-secondary: #d4d8dd;
  --color-text-primary: #ffffff;
  --color-background-interactive-hover: #92cbff;
  --color-background-interactive-default: #4dacff;
  --color-background-surface-hover: #1c3851;
  --color-background-surface-selected: #1c3f5e;
  --color-background-surface-header: #172635;
  --color-background-surface-default: #1b2d3e;
  --color-background-base-selected: #1c3f5e;
  --color-background-base-header: #172635;
  --color-background-base-hover: #142435;
  --color-background-base-default: #101923;
}