.notification-bell-link{
  width:42px;
  height:42px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--bs-body-color);
  position:relative;
  text-decoration:none;
}
.notification-bell-link:hover{
  background:var(--bs-tertiary-bg);
}
.notification-bell-badge{
  position:absolute;
  top:-2px;
  right:-4px;
  min-width:19px;
  height:19px;
  padding:0 5px;
  border-radius:20px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:10px;
  line-height:1;
  font-weight:800;
  border:2px solid var(--bs-body-bg);
}
.notification-dropdown{
  width:min(430px,calc(100vw - 24px));
  border-radius:1rem;
  overflow:hidden;
}
.notification-center-list{
  max-height:470px;
  overflow-y:auto;
}
.notification-center-item{
  display:block;
  color:inherit;
  text-decoration:none;
  padding:.85rem 1rem;
  border-bottom:1px solid var(--bs-border-color);
  background:var(--bs-body-bg);
}
.notification-center-item:hover{
  background:var(--bs-tertiary-bg);
  color:inherit;
}
.notification-center-item.is-unread{
  background:rgba(var(--bs-primary-rgb),.055);
}
.notification-center-item.is-resolved{
  opacity:.72;
}
.notification-center-icon{
  width:38px;
  height:38px;
  flex:0 0 38px;
  border-radius:.8rem;
  display:flex;
  align-items:center;
  justify-content:center;
}
.notification-center-title{
  font-size:.88rem;
  font-weight:800;
  line-height:1.25;
}
.notification-center-message{
  font-size:.78rem;
  color:var(--bs-secondary-color);
  margin-top:.22rem;
  line-height:1.35;
}
.notification-center-meta{
  font-size:.7rem;
  color:var(--bs-secondary-color);
  margin-top:.35rem;
}
.notification-center-empty{
  padding:2rem 1rem;
  text-align:center;
  color:var(--bs-secondary-color);
}
.notification-history-item{
  border:1px solid var(--bs-border-color);
  border-radius:1rem;
  padding:1rem;
  background:var(--bs-body-bg);
}
.notification-history-item + .notification-history-item{
  margin-top:.75rem;
}
.notification-history-item.is-unread{
  border-left:4px solid var(--bs-primary);
}
.notification-history-item.is-resolved{
  opacity:.72;
}
@media(max-width:575.98px){
  .notification-dropdown{
    width:calc(100vw - 16px);
  }
  .notification-center-list{
    max-height:65vh;
  }
}