/*
 ZEXARA NOTIFICATIONS OBSIDIAN GOLD V1
 Only notification page components.
 No navigation, API or notification state changes.
*/

/* PAGE BACKGROUND */
html body #root .notifications-page {
  background: #101318 !important;
  color: #F4F1E9 !important;
  min-height: 100% !important;
}

/* PAGE HEADING */
html body #root .notifications-page .ntv5-page-heading {
  background:
    linear-gradient(145deg, #252C35, #1A2028) !important;
  border: 1px solid rgba(213,170,82,.24) !important;
  box-shadow: 0 10px 26px rgba(0,0,0,.22) !important;
}

html body #root .notifications-page .ntv5-heading-copy,
html body #root .notifications-page .ntv5-heading-copy h1,
html body #root .notifications-page .ntv5-heading-copy strong {
  color: #F6F3ED !important;
}

html body #root .notifications-page .ntv5-heading-copy small,
html body #root .notifications-page .notifications-kicker {
  color: #D9B977 !important;
}

/* HEADING BUTTONS */
html body #root .notifications-page .ntv5-back,
html body #root .notifications-page .ntv5-heading-icon,
html body #root .notifications-page .notifications-back,
html body #root .notifications-page .notifications-head-icon {
  background: #303640 !important;
  color: #F0C779 !important;
  border: 1px solid rgba(222,179,92,.3) !important;
  box-shadow: none !important;
}

html body #root .notifications-page .ntv5-back svg,
html body #root .notifications-page .ntv5-heading-icon svg {
  color: #F0C779 !important;
  stroke: currentColor !important;
}

/* LIST CONTAINER */
html body #root .notifications-page .notifications-list {
  background:
    linear-gradient(155deg, #202630, #191F27) !important;
  border: 1px solid rgba(214,174,91,.2) !important;
  box-shadow: 0 9px 25px rgba(0,0,0,.18) !important;
  color: #F3F0EA !important;
}

/* LIST HEADING */
html body #root .notifications-page .notifications-list-head,
html body #root .notifications-page .notifications-list-title,
html body #root .notifications-page .notifications-list-title strong {
  color: #F7F4EF !important;
}

html body #root .notifications-page .notifications-list-title svg,
html body #root .notifications-page .notifications-list-head svg {
  color: #E7BC69 !important;
  stroke: currentColor !important;
}

/* UNREAD COUNT */
html body #root .notifications-page .notifications-unread-count {
  background: #41321C !important;
  color: #F5CF83 !important;
  border: 1px solid rgba(222,177,85,.35) !important;
  box-shadow: none !important;
}

/* MARK ALL READ */
html body #root .notifications-page .notifications-mark-all {
  background: #303640 !important;
  color: #F1CE88 !important;
  border: 1px solid rgba(222,180,97,.3) !important;
  box-shadow: none !important;
}

html body #root .notifications-page .notifications-mark-all:disabled {
  opacity: .55 !important;
}

/* NOTIFICATION CARD */
html body #root .notifications-page .notify-card,
html body #root .notifications-page .notify-card:first-of-type,
html body #root .notifications-page .notify-card.unread,
html body #root .notifications-page .notify-card:not(.unread) {
  background:
    linear-gradient(150deg, #292F39, #20262F) !important;
  border: 1px solid rgba(212,170,83,.23) !important;
  box-shadow: 0 5px 15px rgba(0,0,0,.14) !important;
  color: #F4F1EB !important;
}

html body #root .notifications-page .notify-card.unread {
  border-color: rgba(235,191,104,.48) !important;
}

/* NOTIFICATION ICON */
html body #root .notifications-page .notify-icon {
  background: #343A43 !important;
  color: #EBC273 !important;
  border: 1px solid rgba(218,174,88,.25) !important;
  box-shadow: none !important;
}

html body #root .notifications-page .notify-icon svg {
  color: #EBC273 !important;
  stroke: currentColor !important;
}

/* TITLE + DESCRIPTION */
html body #root .notifications-page .notify-topline h3 {
  color: #FFFFFF !important;
  font-weight: 800 !important;
  opacity: 1 !important;
}

html body #root .notifications-page .notify-content p {
  color: #CFD5DF !important;
  opacity: 1 !important;
  line-height: 1.55 !important;
}

/* META / DATE / TIME */
html body #root .notifications-page .notify-meta {
  color: #D5DCE4 !important;
}

html body #root .notifications-page .notify-time,
html body #root .notifications-page .notify-unread-label {
  background: #333A43 !important;
  color: #F1D08D !important;
  border: 1px solid rgba(218,179,96,.27) !important;
  opacity: 1 !important;
}

html body #root .notifications-page .notify-date {
  color: #C5CEDA !important;
  opacity: 1 !important;
}

html body #root .notifications-page .notify-dot {
  background: #E9BE6B !important;
  box-shadow: 0 0 8px rgba(233,190,107,.28) !important;
}

/* EMPTY / ERROR STATE */
html body #root .notifications-page .notifications-state {
  color: #CFD7DF !important;
}

html body #root .notifications-page .notifications-state.error {
  color: #F0C477 !important;
}

/* ONLY COLORS; NO FIXED HEIGHTS OR SCROLL OVERRIDES */