.announcement-bar-wrap { width: 100%; background-color: hsl(var(--white)); }
.announcement-bar { width: 100%; display: flex; align-items: center; padding: 0.75rem; }
.announcement-bar-emergency { background-color: hsl(354, 70%, 54%); /* Bootstrap Red */ color: hsl(var(--white)); }
.announcement-bar-special { background-color: hsla(45, 100%, 51%, 75%); /* Bootstrap Yellow */ color: hsl(var(--black)); }
.announcement-bar-special .announcement-bar-modal-btn,
.announcement-bar-special .announcement-bar-close-btn,
.announcement-bar-special .announcement-bar-modal-btn:hover,
.announcement-bar-special .announcement-bar-close-btn:hover { color: hsl(var(--black)); }
.announcement-bar-regular { background-color: hsl(var(--siteColor1)); color: hsl(var(--white)); }
.announcement-bar-icon { display: flex; margin-right: 0.65rem; }
.announcement-bar-content { display: flex; flex-wrap: wrap; align-items: center; margin-right: auto; }
.announcement-bar-title { margin-right: 1rem; }
.announcement-bar-modal-btn { margin: 0; padding: 0.5rem 1rem; background-color: hsl(var(--white)); color: hsl(var(--bodyFontColor)); }
.announcement-bar-modal-btn:hover { color: hsl(var(--bodyFontColor)); box-shadow: 0 0 0 0.125rem hsla(var(--white), 0.25) !important; }
.announcement-bar-close-btn { opacity: 0.5; display: flex; padding: 0.25rem; color: hsl(var(--white)); }
.announcement-bar-close-btn:hover { opacity: 1; background-color: hsla(var(--white), 25%); color: hsl(var(--white)); box-shadow: 0 0 0 0.125rem hsla(var(--white), 0.25) !important; }