/* One hardware-quality status bar for every Brawus interactive phone shell. */
html body .brawus-status-bar[data-brawus-status-bar] {
  position: absolute !important;
  z-index: 140;
  top: 0 !important;
  right: 0 !important;
  bottom: auto !important;
  left: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center !important;
  justify-content: initial !important;
  width: 100%;
  height: 46px !important;
  margin: 0 !important;
  padding: 0 25px 0 27px !important;
  border: 0 !important;
  background: transparent !important;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif !important;
  font-size: 11px !important;
  font-style: normal !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: -.018em !important;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}

html body .brawus-status-bar[data-brawus-status-theme="light"] {
  color: rgba(255, 255, 255, .96) !important;
}

html body .brawus-status-bar[data-brawus-status-theme="dark"] {
  color: rgba(14, 17, 22, .96) !important;
}

html body .brawus-status-bar__time {
  grid-column: 1;
  justify-self: start;
  min-width: 2.8em;
  color: inherit;
  font: inherit;
  line-height: inherit;
  text-decoration: none;
  white-space: nowrap;
}

html body .brawus-status-bar__icons {
  grid-column: 3;
  justify-self: end;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  width: auto !important;
  height: 13px !important;
  color: inherit;
  font-size: 0 !important;
  line-height: 0 !important;
}

html body .brawus-status-bar__icon {
  display: block !important;
  flex: 0 0 auto;
  overflow: visible;
  color: inherit;
}

html body .brawus-status-bar__icon--cellular {
  width: 17px !important;
  height: 12px !important;
  fill: currentColor;
}

html body .brawus-status-bar__icon--wifi {
  width: 17px !important;
  height: 13px !important;
  stroke: currentColor;
  stroke-width: 1.65;
  stroke-linecap: round;
}

html body .brawus-status-bar__icon--battery {
  width: 24px !important;
  height: 12px !important;
  stroke: currentColor;
  stroke-width: 1.35;
}

@media (prefers-reduced-motion: reduce) {
  html body .brawus-status-bar[data-brawus-status-bar] {
    transition: none !important;
  }
}