body:not(.login-body) .qms-offline-status,
body.login-body .qms-offline-status {
  align-items: center;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 12px;
  bottom: 18px;
  box-shadow: 0 14px 32px rgb(15 45 67 / 18%);
  color: #17324d;
  display: flex;
  font-size: 0.78rem;
  gap: 10px;
  inset-inline-end: 18px;
  max-width: min(430px, calc(100vw - 36px));
  padding: 10px 12px;
  position: fixed;
  z-index: 2000;
}

.qms-offline-status[hidden] {
  display: none !important;
}

.qms-offline-status::before {
  background: #159a75;
  border-radius: 50%;
  content: "";
  flex: 0 0 9px;
  height: 9px;
  width: 9px;
}

.qms-offline-status.is-offline {
  background: #fffaf0;
  border-color: #f0c36d;
  color: #7a4a00;
}

.qms-offline-status.is-offline::before {
  background: #d97706;
}

.qms-offline-status.is-warning {
  background: #fff7ed;
  border-color: #fdba74;
  color: #9a3412;
}

.qms-offline-status.is-warning::before {
  background: #ea580c;
}

.qms-offline-status-text {
  flex: 1 1 auto;
  line-height: 1.45;
}

.qms-offline-status-action {
  background: #17324d;
  border: 0;
  border-radius: 7px;
  color: #ffffff;
  cursor: pointer;
  flex: 0 0 auto;
  font: inherit;
  font-weight: 800;
  padding: 7px 9px;
}

.qms-offline-status-action:hover {
  background: #075c4b;
}

@media (max-width: 640px) {
  body:not(.login-body) .qms-offline-status,
  body.login-body .qms-offline-status {
    align-items: stretch;
    flex-wrap: wrap;
    inset-inline: 12px;
    width: auto;
  }

  .qms-offline-status-action {
    margin-inline-start: 19px;
  }
}