@charset "utf-8";

@-webkit-keyframes shimmering { 
  100% { background-position-x: 0px; }
}

@keyframes shimmering { 
  100% { background-position-x: 0px; }
}

.notification { display: none; --theme-color: #e61e00; --offset-sticky-margin: 16px; background-color: rgb(255, 255, 255); bottom: 0px; left: 0px; overflow: hidden; padding: 12px 16px 16px; position: fixed; right: 0px; transform: translateY(calc(100% + 20px)); transition: transform 0.5s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.5s cubic-bezier(0.645, 0.045, 0.355, 1); z-index: 20; }

@media (prefers-reduced-motion: reduce) {
  .notification { transition: none; }
}

@media (min-width: 880px) {
  .notification { --initial-offset-sticky: -16px; border-radius: 8px; box-shadow: rgba(32, 32, 32, 0.2) 0px 0px 20px 0px; left: auto; right: 16px; width: 375px; }
}

.notification::before { background: var(--theme-color,#fff); content: ""; height: 4px; left: 0px; position: absolute; top: 0px; width: 100%; }

.notification__head { -webkit-box-pack: justify; justify-content: space-between; }

.notification__head, .notification__title-wrapper { display: flex; }

.notification__title-wrapper { column-gap: 2px; -webkit-box-align: center; align-items: center; }

.notification__title { color: rgb(32, 32, 32); font-family: BrownBold, sans-serif; font-size: 1.8rem; font-weight: 700; line-height: 135%; }

.notification__title::first-letter { text-transform: capitalize; }

.notification__title-icon { color: var(--theme-color); flex-shrink: 0; }

.notification__body { column-gap: 12px; display: flex; margin: 4px 0px 12px; -webkit-box-align: center; align-items: center; }

@media (min-width: 880px) {
  .notification__body { margin: 8px 0px 12px; }
}

.notification__global-link { border-radius: 4px; display: block; outline-offset: 2px; text-decoration: none; }

.notification__global-link .notification__body:hover .notification__description { text-decoration: underline; text-underline-offset: 4px; }

.notification__description { color: rgb(32, 32, 32); display: -webkit-box; font-family: BrownRegular, sans-serif; font-size: 1.4rem; font-weight: 400; line-height: 125%; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }

.notification__description a { border-bottom: 1px solid; color: rgb(66, 66, 66); text-decoration: none; }

.notification__description a:focus-visible, .notification__description a:hover { border-bottom: 1px solid; cursor: pointer; text-decoration: none; }

.notification__description a:active { background: rgb(221, 221, 221); border-radius: 2px; box-shadow: rgb(221, 221, 221) 0px 0px 0px 2px; }

.notification__description a:focus-visible { border-radius: 2px; outline: 2px solid var(--outline-color,#2c69f6); outline-offset: var(--outline-offset,2px); }

.notification__description a:visited { color: rgb(118, 118, 118); }

.notification__description a[target="_blank"] { padding-bottom: 2px; }

.notification__description a[target="_blank"]::after { background-color: rgb(66, 66, 66); content: "-"; display: inline; mask: url("external-link-e092162c.svg") center center no-repeat; padding-top: 1px; vertical-align: middle; }

.notification__description a[target="_blank"]:visited::after { background-color: rgb(118, 118, 118); }

.notification__description a[target="_blank"]::after { margin-left: 2px; padding-left: 14px; }

.notification__img { border-radius: 4px; display: none; min-height: 56px; min-width: 56px; }

@media (min-width: 880px) {
  .notification__img { display: block; }
}

.notification--display { display: block; }

.notification--visible { transform: translateY(var(--offset-sticky,0)); }

@media (min-width: 880px) {
  .notification--visible { transform: translateY(min(var(--offset-sticky,0),var(--initial-offset-sticky))); }
}
