/* Keep the account status centered above the Account icon on every phone. */
html body .app-shell .bottom-nav #accountMenuButton,
html body main.app-shell .bottom-nav #accountMenuButton {
  position: relative !important;
}

html body .app-shell .bottom-nav #accountMenuButton > .account-nav-status,
html body main.app-shell .bottom-nav #accountMenuButton > .account-nav-status {
  position: absolute !important;
  top: 2px !important;
  right: auto !important;
  bottom: auto !important;
  left: 50% !important;
  width: 7px !important;
  min-width: 7px !important;
  height: 7px !important;
  min-height: 7px !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 50% !important;
  pointer-events: none !important;
  transform: translate3d(-50%, 0, 0) !important;
  z-index: 4 !important;
}

@media (max-width: 720px), (hover: none) and (pointer: coarse) and (max-width: 1024px) {
  html body .app-shell .bottom-nav #accountMenuButton > .account-nav-status,
  html body main.app-shell .bottom-nav #accountMenuButton > .account-nav-status {
    top: 1px !important;
    left: 50% !important;
    transform: translate3d(-50%, 0, 0) !important;
  }
}