/* Pinned to the top of every BBS page (system/notices.php bbsTopBar): the staging / dev stripe and the notices. */
#bbs_topbar { position: sticky; top: 0; z-index: 950; }

/* staging / dev: a hazard stripe with the tag inside it, 70% transparent (the page shows through); prod: nothing.
   Same look in the IMS (ims/web/input.css). */
.bbs_env { position: relative; height: 16px; display: flex; align-items: center; justify-content: center; }
.bbs_env_staging { background: repeating-linear-gradient(-45deg, rgba(252, 211, 77, .3) 0 10px, rgba(31, 41, 55, .3) 10px 20px); }
.bbs_env_dev { background: repeating-linear-gradient(-45deg, rgba(253, 186, 116, .3) 0 10px, rgba(31, 41, 55, .3) 10px 20px); }
.bbs_env_tag {
  padding: 0 10px; border-radius: 7px; height: 14px;
  font: bold 10px/14px Arial, sans-serif; letter-spacing: .5px; color: #1f2937; white-space: nowrap;
}
.bbs_env_staging .bbs_env_tag { background: rgba(252, 211, 77, .3); }
.bbs_env_dev .bbs_env_tag { background: rgba(253, 186, 116, .3); }

/* notices */
.bbs_notice {
  display: flex; align-items: flex-start; gap: 10px; padding: 7px 14px;
  font: 13px/1.4 Verdana, sans-serif; border-bottom: 1px solid rgba(0, 0, 0, .15);
}
.bbs_notice_text { flex: 1; white-space: pre-line; }
.bbs_notice_info { background: #dbeafe; color: #1e3a8a; }
.bbs_notice_maint { background: #fef3c7; color: #78350f; }
.bbs_notice_down { background: #fee2e2; color: #7f1d1d; font-weight: bold; }
.bbs_notice_x {
  flex: none; border: 0; background: transparent; color: inherit; cursor: pointer;
  font-size: 15px; line-height: 1; padding: 2px 4px; opacity: .7;
}
.bbs_notice_x:hover { opacity: 1; }
@media print { #bbs_topbar { display: none; } }