#navnotifications {
  position: relative;
  display: inline-block !important;
  margin-right: 12px !important;
}

#astral-notification-toggle {
  position: relative;
}

.astral-notification-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 14px;
  height: 14px;
  margin-left: 4px;
  padding: 0 3px;
  border: 1px solid #6c222a;
  border-radius: 8px;
  background: #d64c5b;
  color: #fff;
  font-size: 9px;
  font-family: Verdana, sans-serif;
  line-height: 1;
  box-shadow: 0 0 5px rgba(214, 76, 91, .35);
}

.astral-notification-popover {
  position: absolute;
  z-index: 1200;
  top: calc(100% + 7px);
  right: 0;
  width: 370px;
  max-height: 470px;
  overflow: hidden;
  border: 1px solid #363b44;
  background: #131619;
  box-shadow: 0 16px 44px rgba(0, 0, 0, .58);
  text-align: left;
}

.astral-notification-popover[hidden],
.astral-notification-count[hidden] {
  display: none !important;
}

.astral-notification-popover-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-bottom: 1px solid #292e35;
  background: #191d22;
}

.astral-notification-popover-head strong {
  color: #eef3f8;
  font-size: 12px;
}

.astral-notification-popover-head button {
  border: 0;
  background: transparent;
  color: #69aaff;
  cursor: pointer;
  font-size: 10px;
}

.astral-notification-popover-head button:disabled {
  color: #616a75;
  cursor: default;
}

.astral-notification-popover-list {
  max-height: 382px;
  overflow-y: auto;
}

.astral-notification-popover-item,
.astral-notification-page-item {
  display: flex !important;
  gap: 10px;
  padding: 10px 12px !important;
  border-bottom: 1px solid #242930;
  background: #14181c;
  color: #c9d1da !important;
  text-decoration: none !important;
}

.astral-notification-popover-item:hover,
.astral-notification-page-item:hover {
  background: #1b2026;
}

.astral-notification-popover-item.is-unread,
.astral-notification-page-item.is-unread {
  background: linear-gradient(90deg, rgba(68, 134, 230, .16), #15191e 46%);
  box-shadow: inset 2px 0 #4e91ee;
}

.astral-notification-type {
  display: inline-flex;
  flex: 0 0 27px;
  align-items: center;
  justify-content: center;
  width: 27px;
  height: 27px;
  border: 1px solid #343b45;
  border-radius: 50%;
  background: #20252c;
  color: #74aefc;
  font-weight: bold;
  line-height: 1;
}

.astral-notification-type[data-type="badge"] { color: #ffd76a; }
.astral-notification-type[data-type="reputation"] { color: #68d69b; }
.astral-notification-type[data-type="mention"] { color: #b69cff; }
.astral-notification-type[data-type="quote"] { color: #e6a86a; }
.astral-notification-type[data-type="private_message"] { color: #6fcce5; }
.astral-notification-type[data-type="staff"] { color: #f18d96; }

.astral-notification-copy {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
  gap: 2px;
}

.astral-notification-copy strong {
  overflow: hidden;
  color: #f1f4f7;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.astral-notification-copy > span {
  color: #939daa;
  font-size: 10px;
  line-height: 1.35;
}

.astral-notification-copy time {
  color: #626d79;
  font-size: 9px;
}

.astral-notification-popover-footer {
  display: block !important;
  padding: 9px !important;
  background: #191d22;
  color: #69aaff !important;
  text-align: center;
}

.astral-notification-empty {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 28px 14px;
  color: #77818c;
  text-align: center;
}

.astral-notification-empty strong {
  color: #c7cfd8;
}

.astral-notifications-page .inbox {
  padding: 12px;
}

.astral-notifications-page-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.astral-notification-page-list {
  border: 1px solid #333940;
}

.astral-notification-page-item {
  align-items: center;
}

.astral-notification-page-item time {
  flex: 0 0 125px;
  color: #697481;
  font-size: 9px;
  text-align: right;
}

@media (max-width: 640px) {
  .astral-notification-popover {
    position: fixed;
    top: 66px;
    right: 10px;
    left: 10px;
    width: auto;
  }
  .astral-notification-page-item time {
    display: none;
  }
}