/* Final night-mode cascade fixes loaded after _head.css.tpl */
html body.night-mode {
  --vf-night-final-bg: #0b1119;
  --vf-night-final-nav: #0b1624;
  --vf-night-final-surface: #121b28;
  --vf-night-final-surface-soft: #172334;
  --vf-night-final-control: #1a273a;
  --vf-night-final-control-hover: #22324a;
  --vf-night-final-border: rgba(148, 163, 184, 0.24);
  --vf-night-final-border-strong: rgba(148, 163, 184, 0.36);
  --vf-night-final-text: #e5edf7;
  --vf-night-final-muted: #9fb0c6;
  background: var(--vf-night-final-bg) !important;
  color: var(--vf-night-final-text) !important;
}

html body.night-mode .main-wrapper .main-header,
html body.night-mode.vf-page-index .main-wrapper .main-header,
html body.night-mode.vf-page-index .main-header,
html body.night-mode .main-header,
html body.night-mode.modal-open .main-wrapper .main-header,
html body.night-mode.n_activated .main-wrapper .main-header,
html body.night-mode.n_live .main-wrapper .main-header {
  background: var(--vf-night-final-nav) !important;
  background-color: var(--vf-night-final-nav) !important;
  background-image: none !important;
  border-bottom-color: rgba(148, 163, 184, 0.16) !important;
  color: #f8fbff !important;
}

html body.night-mode .main-wrapper .main-header::before,
html body.night-mode.vf-page-index .main-wrapper .main-header::before,
html body.night-mode.vf-page-index .main-header::before,
html body.night-mode .main-header::before {
  display: none !important;
  content: none !important;
  background: none !important;
  background-image: none !important;
  opacity: 0 !important;
}

html body.night-mode .main-wrapper .main-header .search-wrapper .form-control,
html body.night-mode .main-wrapper .main-header .vf-header-search-input,
html body.night-mode .main-wrapper .main-header .navbar-wrapper > ul > li > a,
html body.night-mode .main-wrapper .main-header .navbar-wrapper > ul > li > .dropdown-toggle,
html body.night-mode .main-wrapper .main-header .menu-icon,
html body.night-mode .main-wrapper .main-header .home-icon {
  background: var(--vf-night-final-control) !important;
  border-color: var(--vf-night-final-border) !important;
  color: #f8fbff !important;
}

html body.night-mode.vf-page-index .main-wrapper .vf-newsfeed-shell .vf-stories-card,
html body.night-mode.vf-page-index .main-wrapper .vf-newsfeed-shell .vf-stories-card .card-body,
html body.night-mode.vf-page-index .main-wrapper .vf-newsfeed-shell .vf-stories-card .stories-wrapper,
html body.night-mode.vf-page-index .main-wrapper .vf-newsfeed-shell .vf-stories-card .stories.sngine.carousel,
html body.night-mode.vf-page-index .main-wrapper .vf-newsfeed-shell .vf-stories-card #stories {
  background: var(--vf-night-final-surface) !important;
  background-color: var(--vf-night-final-surface) !important;
  background-image: none !important;
  border-color: var(--vf-night-final-border) !important;
  color: var(--vf-night-final-text) !important;
}

html body.night-mode.vf-page-index .main-wrapper .vf-newsfeed-shell .vf-stories-card .card-header {
  background: var(--vf-night-final-surface-soft) !important;
  border-bottom-color: var(--vf-night-final-border) !important;
  color: var(--vf-night-final-text) !important;
}

html body.night-mode.vf-page-index .main-wrapper .vf-newsfeed-shell .vf-stories-card.vf-stories-card-empty .add-story,
html body.night-mode.vf-page-index .main-wrapper .vf-newsfeed-shell .vf-stories-card .add-story,
html body.night-mode.vf-page-index .main-wrapper .vf-newsfeed-shell .vf-stories-card .story {
  background: var(--vf-night-final-control) !important;
  background-color: var(--vf-night-final-control) !important;
  background-image: none !important;
  border-color: var(--vf-night-final-border) !important;
  color: var(--vf-night-final-text) !important;
}

html body.night-mode.vf-page-index .main-wrapper .vf-newsfeed-shell .vf-stories-card.vf-stories-card-empty .add-story::after,
html body.night-mode.vf-page-index .main-wrapper .vf-newsfeed-shell .vf-stories-card .add-story::after {
  color: var(--vf-night-final-text) !important;
}

html body.night-mode.vf-page-index .main-wrapper .vf-newsfeed-shell .vf-stories-card.vf-stories-card-empty .add-story::before,
html body.night-mode.vf-page-index .main-wrapper .vf-newsfeed-shell .vf-stories-card .add-story::before {
  color: var(--vf-night-final-muted) !important;
}

html body.night-mode.vf-page-index .main-wrapper .vf-newsfeed-shell .composer-launcher,
html body.night-mode.vf-page-index .main-wrapper .vf-newsfeed-shell .composer-launcher .card-body,
html body.night-mode.vf-page-index .main-wrapper .vf-newsfeed-shell .main-side-nav-card,
html body.night-mode.vf-page-index .main-wrapper .vf-newsfeed-shell .main-side-nav-card .card-body,
html body.night-mode.vf-page-index .main-wrapper .vf-newsfeed-shell .vf-side-rail .card {
  background: var(--vf-night-final-surface) !important;
  border-color: var(--vf-night-final-border) !important;
  color: var(--vf-night-final-text) !important;
}

html body.night-mode.vf-page-index .main-wrapper .vf-newsfeed-shell .composer-launcher-input,
html body.night-mode.vf-page-index .main-wrapper .vf-newsfeed-shell .vf-composer-quick-actions button,
html body.night-mode.vf-page-index .main-wrapper .vf-newsfeed-shell .vf-posts-filter .btn,
html body.night-mode.vf-page-index .main-wrapper .vf-newsfeed-shell .vf-posts-filter .countries-filter {
  background: var(--vf-night-final-control) !important;
  border-color: var(--vf-night-final-border) !important;
  color: var(--vf-night-final-text) !important;
  box-shadow: none !important;
}

html body.night-mode.vf-page-index .main-wrapper .vf-newsfeed-shell .composer-launcher-input .vf-composer-prompt,
html body.night-mode.vf-page-index .main-wrapper .vf-newsfeed-shell .composer-launcher-input span {
  color: var(--vf-night-final-muted) !important;
}

html body.night-mode.vf-page-index .main-wrapper .vf-newsfeed-shell .vf-composer-quick-actions button:hover,
html body.night-mode.vf-page-index .main-wrapper .vf-newsfeed-shell .vf-posts-filter .btn:hover,
html body.night-mode.vf-page-index .main-wrapper .vf-newsfeed-shell .vf-posts-filter .countries-filter:hover {
  background: var(--vf-night-final-control-hover) !important;
  border-color: var(--vf-night-final-border-strong) !important;
  color: #ffffff !important;
}
