div.critical-comms {
  --critical-comms-background-color: var(--color-background-negative);
  --critical-comms-title-color: var(--color-content-negative);
  --critical-comms-subtitle-color: var(--color-content-secondary);
  --critical-comms-subtitle-color-padding-left: var(--size-16);
  --critical-comms-vertical-spacing: var(--size-8);
  background-color: rgba(255,135,135,0.10196);
  background-color: var(--critical-comms-background-color);
  display: flex;
  justify-content: center;
  align-items: center;
}
.np-theme-personal div.critical-comms,
.np-theme-personal--dark div.critical-comms {
  --critical-comms-background-color: var(--color-sentiment-negative);
  --critical-comms-title-color: var(--color-contrast);
  --critical-comms-subtitle-color: var(--color-contrast);
  --critical-comms-subtitle-color-padding-left: 0;
  --critical-comms-vertical-spacing: var(--size-16);
  padding: 24px;
  padding: var(--padding-medium);
}
.np-theme-personal div.critical-comms .tw-icon-alert-circle-fill,
.np-theme-personal--dark div.critical-comms .tw-icon-alert-circle-fill {
  color: var(--color-contrast);
}
.np-theme-personal div.critical-comms .tw-icon-alert-circle-fill svg,
.np-theme-personal--dark div.critical-comms .tw-icon-alert-circle-fill svg {
  width: 48px;
  height: 48px;
}
.np-theme-personal div.critical-comms .cta-btn,
.np-theme-personal--dark div.critical-comms .cta-btn {
  background-color: var(--color-contrast);
}
.np-theme-personal div.critical-comms .cta-btn:not(.disabled):not(:disabled):focus,
.np-theme-personal--dark div.critical-comms .cta-btn:not(.disabled):not(:disabled):focus {
  outline-color: var(--color-contrast);
}
@media (max-width: 767px) {
  div.critical-comms {
    display: inline;
    display: initial;
  }
}
div.critical-comms .critical-comms--title {
  color: var(--critical-comms-title-color);
}
div.critical-comms .critical-comms--subtitle {
  color: var(--critical-comms-subtitle-color);
}
div.critical-comms .critical-comms--cta {
  padding-left: 0;
}
@media (max-width: 767px) {
  div.critical-comms .critical-comms--cta {
    padding-left: var(--critical-comms-subtitle-color-padding-left);
    padding-top: var(--critical-comms-vertical-spacing);
    min-width: 100%;
  }
}
div.critical-comms .critical-comms-body {
  display: flex;
  width: 100%;
}
@media (max-width: 767px) {
  div.critical-comms .critical-comms-body {
    flex-direction: column;
  }
}
@media (max-width: 767px) {
  div.critical-comms .critical-comms-content {
    padding-top: var(--critical-comms-vertical-spacing);
    flex-wrap: wrap;
  }
}
