body.has-mandatory-notification {
  overflow: hidden;
  overscroll-behavior: none;
}

.mandatory-notification {
  position: fixed !important;
  inset: 0 !important;
  z-index: 2147483000;
  display: flex !important;
  box-sizing: border-box;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  align-items: center;
  justify-content: center;
  overflow: auto;
  padding: 1.25rem;
  background: rgb(3 6 12 / 82%);
  backdrop-filter: blur(10px);
  isolation: isolate;
}

.mandatory-notification__dialog {
  position: relative;
  box-sizing: border-box;
  width: min(760px, 100%);
  max-height: calc(100vh - 2.5rem);
  max-height: calc(100dvh - 2.5rem);
  margin: auto;
  overflow: auto;
  padding: clamp(1.35rem, 4vw, 2.5rem);
  border: 1px solid var(--color-warning, #f2b84b);
  border-radius: 1.25rem;
  background: var(--surface, #111722);
  box-shadow: 0 2rem 6rem rgb(0 0 0 / 55%);
}

.mandatory-notification__dialog h1 {
  margin: .25rem 0 1rem;
}

.mandatory-notification__body {
  font-size: 1.05rem;
  line-height: 1.65;
  overflow-wrap: anywhere;
}

.mandatory-notification__hint {
  margin: 1.25rem 0;
  padding: .85rem 1rem;
  border-radius: .75rem;
  background: rgb(78 145 255 / 12%);
}

.mandatory-notification__confirm {
  display: flex;
  gap: .7rem;
  align-items: flex-start;
  font-weight: 700;
}

.mandatory-notification__confirm input {
  margin-top: .2rem;
}

.notification-preview {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.form-card {
  max-width: 860px;
}

.notification-delete-dialog__panel {
  width: min(36rem, calc(100vw - 2rem));
}

.notification-delete-dialog__panel > p {
  margin: 0;
  color: var(--muted);
}

.notification-delete-dialog__actions {
  align-items: center;
}

.notification-delete-dialog__actions form {
  margin: 0;
}