:root {
  --visage-alert-box-max-width: 550px;
  --visage-alert-box-padding: 16px 40px;
  --visage-alert-box-padding-narrow: 16px 40px 16px 24px;
  --visage-alert-box-padding-toast-narrow: 16px 64px;
  --visage-alert-box-font-size: var(--visage-text-size-6);
  --visage-alert-box-line-height: var(--visage-text-size-6-line-height);
  --visage-alert-box-link-font-color: var(--visage-link-font-color)
}
@media only screen and (max-width: 1023px) {
  :root {
    --visage-alert-box-max-width: 344px;
    --visage-alert-box-padding: 12px 40px;
    --visage-alert-box-padding-narrow: 12px 40px 12px 16px;
    --visage-alert-box-padding-toast-narrow: 12px 16px;
    --visage-alert-box-font-size: var(--visage-text-size-7);
    --visage-alert-box-line-height: var(--visage-text-size-7-line-height)
  }
}
.alert-box,
.page-alert {
  position: relative;
  display: block;
  max-width: 1344px;
  margin: 0;
  padding: var(--visage-alert-box-padding);
  font-size: var(--visage-alert-box-font-size, var(--visage-text-size-6));
  line-height: var(--visage-alert-box-line-height);
  text-align: var(--visage-alert-box-text-align, center);
  color: var(--visage-alert-box-font-color, #fff);
  background: var(--visage-alert-box-background, var(--visage-color-black));
  border-width: var(--visage-alert-box-border-width, 0);
  border-style: solid;
  border-color: var(--visage-alert-box-border-color, transparent);
  border-radius: var(--visage-alert-box-border-radius, 8px);
  opacity: 1;
  box-shadow: var(--visage-alert-box-box-shadow, 0 10px 20px rgba(0, 0, 0, 0.25))
}
.alert-box p,
.page-alert p {
  margin-top: 0
}
.alert-box a,
.alert-box a:hover,
.page-alert a,
.page-alert a:hover {
  color: var(--visage-alert-box-link-font-color)
}
.alert-box a:hover,
.page-alert a:hover {
  opacity: 0.6
}
.alert-box.alert-box-background-white {
  --visage-alert-box-background: #fff
}
.alert-box-close-button {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  position: absolute;
  top: calc(50% + 3px);
  right: calc(16px - 5px);
  height: 20px;
  width: 20px;
  color: transparent;
  background: transparent;
  border: none;
  border-radius: 0;
  transform: translateY(-50%);
  overflow: hidden;
  cursor: pointer
}
.alert-box-close-button::before {
  content: " ";
  display: block;
  width: 20px;
  height: 20px;
  position: relative;
  background-size: auto auto;
  background-position: center;
  background-repeat: no-repeat;
  filter: var(--visage-icon-filter-dark-grey);
  background-image: var(--visage-icon-url-close-small);
  width: 10px;
  height: 10px;
  position: absolute;
  left: 0;
  filter: var(--visage-icon-filter-white)
}
.firefox .alert-box-close-button:focus {
  outline: 1px solid #000
}
.alert-box-narrow {
  --visage-alert-box-padding: var(--visage-alert-box-padding-narrow);
  max-width: var(--visage-alert-box-max-width);
  text-align: left
}
.alert-box-toast.alert-box-narrow {
  padding: var(--visage-alert-box-padding-toast-narrow);
  text-align: center
}
.alert-box-error,
.alert-box-warning,
.page-alert-error,
.page-alert-warning {
  background: #d24345
}
.alert-box-positive,
.page-alert-positive {
  background: #0a8525
}
.alert-box-legal-warning {
  display: block;
  padding-left: 45px;
  font-size: var(--visage-text-size-5);
  line-height: var(--visage-text-size-5-line-height);
  color: #000;
  background-color: #fff;
  border: 1px solid currentColor
}
.alert-box-legal-warning::before {
  content: " ";
  display: block;
  position: absolute;
  top: 16px;
  left: 8px;
  width: 25px;
  height: 20px;
  background-image: url(../images/legal-warning-2x.png?dyn=1&width=25);
  background-size: 25px 20px
}
@media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 2dppx),
(min-resolution: 192dpi) {
  .alert-box-legal-warning::before {
    background-image: url(../images/legal-warning-2x.png?dyn=1&hires=1&width=25)
  }
}