.notification-count-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  z-index: 2;
  padding: 0.15em 0.3em;
  min-width: 1.25em;
  font-size: 0.6rem;
  line-height: 1;
  text-align: center;
}

.notification-icon-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.5rem;
}

.list-group-flush .dropdown-notifications-item[class*='notification-edge-'] {
  border: 0;
  border-left-width: 4px;
  border-left-style: solid;
}

.list-group-flush .dropdown-notifications-item.notification-edge-primary   { border-left-color: var(--bs-primary); }
.list-group-flush .dropdown-notifications-item.notification-edge-secondary { border-left-color: var(--bs-secondary); }
.list-group-flush .dropdown-notifications-item.notification-edge-success   { border-left-color: var(--bs-success); }
.list-group-flush .dropdown-notifications-item.notification-edge-danger    { border-left-color: var(--bs-danger); }
.list-group-flush .dropdown-notifications-item.notification-edge-warning   { border-left-color: var(--bs-warning); }
.list-group-flush .dropdown-notifications-item.notification-edge-info      { border-left-color: var(--bs-info); }
.list-group-flush .dropdown-notifications-item.notification-edge-light      { border-left-color: var(--bs-light); }
.list-group-flush .dropdown-notifications-item.notification-edge-dark      { border-left-color: var(--bs-dark); }

.dropdown-notifications-item .notification-tint-primary   { background-color: rgba(var(--bs-primary-rgb), 0.06); }
.dropdown-notifications-item .notification-tint-secondary { background-color: rgba(var(--bs-secondary-rgb), 0.06); }
.dropdown-notifications-item .notification-tint-success   { background-color: rgba(var(--bs-success-rgb), 0.06); }
.dropdown-notifications-item .notification-tint-danger    { background-color: rgba(var(--bs-danger-rgb), 0.06); }
.dropdown-notifications-item .notification-tint-warning   { background-color: rgba(var(--bs-warning-rgb), 0.06); }
.dropdown-notifications-item .notification-tint-info      { background-color: rgba(var(--bs-info-rgb), 0.06); }
.dropdown-notifications-item .notification-tint-light     { background-color: rgba(var(--bs-light-rgb), 0.06); }
.dropdown-notifications-item .notification-tint-dark      { background-color: rgba(var(--bs-dark-rgb), 0.06); }

.dropdown-notifications-item.marked-as-read .notification-details,
.dropdown-notifications-item.marked-as-read .notification-time,
.dropdown-notifications-item.marked-as-read .notification-icon-chip { opacity: 0.7; }
.dropdown-notifications-item.marked-as-read [class*='notification-tint-'] { background-color: transparent; }
.list-group-flush .dropdown-notifications-item.marked-as-read[class*='notification-edge-'] { border-left-width: 0; }

.dropdown-notifications > div > .notification-count-badge{
  --bs-badge-padding-y: 0.25em;
  --bs-badge-padding-x : 0.453em;
}

/* Force notification scrollbar visiblity with PerfectScrollbar */
.dropdown-notifications-list.ps--active-y > .ps__rail-y { opacity: 0.7; }
.dropdown-notifications-list .ps__rail-y { width: 8px; }
.dropdown-notifications-list .ps__rail-y > .ps__thumb-y { width: 6px; right: 1px; }

html.light-style .notification-title { color: #000; }
html.light-style .notification-details,
html.light-style .notification-time { color: #636578; }

html.dark-style .notification-title { color: #fff; }
html.dark-style .notification-details,
html.dark-style .notification-time { color: #a0a1b8; }