$dark-mode-background: #191f25;
$dark-mode-foreground: #7e848f;
$dark-mode-foreground-lighter: #abaeb3;
$dark-mode-text-link-hover: #bfd7f9;
$dark-mode-text-primary-blue: #9bb7dd;
$dark-mode-text-primary-blue-darker: #8db2e5;
$dark-mode-text-primary-red: #e46181;
$dark-mode-bg-primary-blue: #002348;
$dark-mode-bg-primary-red: #80132e;


.dark-mode body {
  background-color: $dark-mode-background;
}

.dark-mode {
  background-color: $dark-mode-background;
  & p,
  & ol,
  & ul:not(.navbar-nav),
  & .typography__h2,
  & .typography__h5,
  & .typography__h6 {
    color: $dark-mode-foreground;
  }
  & .typography__h4 {
    color: $dark-mode-text-primary-red;
  }
  & .accordion__typography--card-header .btn-link,
  & .typography__h3,
  & .typography__header-global--nav-top {
    color: $dark-mode-text-primary-blue;
  }
  & .footer-icons,
  & .buttons__action,
  & .header-global,
  & iframe[title="calendar"],
  & .hero-slider__slider,
  & #emergencyAlerts {
    filter: brightness(.75);
  }
  & .buttons__action:hover {
    background-color: $dark-mode-bg-primary-blue;
    border-color: rgba(255,255,255,.4);
  }
  & footer {
    background-color: #14191d;
    border-top-color: rgba(256,256,256,.5);
    border-top-width: 1px;
    border-top-style: solid;
  }
  & .breadcrumbs {
    border-bottom-color: rgba(256,256,256,.5)
  }
  & .background__color--tan {
    background-color: #302c24;
  }
  & .benefits__background-color {
    background-color: #354d53;
  }
  & .news__h3 {
    color: $dark-mode-foreground-lighter;
  }
  & .header-global .dropdown-menu {
    background-color: #151a1e;
    & .dropdown-item {
      color: #ccc;
    }
    & .dropdown-item:hover,
    & .dropdown-item:focus {
      background-color: #000;
      color: #efefef
    }
  }
  & .benefits__typography--img-cap {
    color: $dark-mode-foreground-lighter;
  }
  & .news__li {
    border-bottom-color: $dark-mode-foreground-lighter;
  }
  & .svg--fill-blue {
    stroke: $dark-mode-foreground-lighter;
  }
  & .svg__fill--blue {
    fill: $dark-mode-foreground-lighter;
  }
  & .benefits__borders--circle-img {
    border-color: #000;
    filter: drop-shadow(5px 5px 12px rgba(0,0,0,.5)) brightness(.75);
  }
  & .news__span {
    box-shadow: inset 0 0 0 1.4px $dark-mode-foreground;
  }
  & .news__div--img {
    border: solid thin #ccc;
    filter: brightness(.75);
  }
  & .btn-primary {
    background-color: $dark-mode-bg-primary-blue;
    border-color: $dark-mode-text-primary-blue-darker;
    &:hover {
      background-color: $dark-mode-text-primary-blue-darker;
      color: $dark-mode-bg-primary-blue !important;
    }
  }
  & .alert-warning {
    background-color: #664d03;
    border-color: #fff3cd;
    & p {
      color: #fff3cd;
    }
  }
  & a:not(.nav-link),
  & .links__darker-link {
    color: $dark-mode-text-primary-blue-darker;
  }
  & a:not(.btn):hover,
  & .links__darker-link:hover {
    color: $dark-mode-text-link-hover;
   }
  & iframe[title="calendar"] {
    filter: contrast(0.5);
  }
  & .header-global__nav-top {
    background-color: $dark-mode-bg-primary-blue;
  }
  & .header-global__nav-bottom {
    background-color: $dark-mode-bg-primary-red;
  }
  & .buttons__action {
    color: $white !important;
    background-color: $dark-mode-bg-primary-red;
  }
  & img {
    filter: brightness(.75);
  }
  & .card {
    background-color: #151a1c;
    border-color: rgba(256,256,256,.4);
  }
  & .card-body {
    background-color: #192125;
  }
  & .accordion>.card>.card-header {
    margin-bottom: 0;
    border-bottom-color: rgba(256,256,256,.125);
  }
  & .accordion__button::before {
    border-style: solid;
    border-color: rgba(256,256,256,.25);
    border-width: thin;
  }
  & .nav-tabs .nav-link {
    border-left-color: rgba(256,256,256,.325);
    border-right-color: rgba(256,256,256,.325);
    border-top-color: rgba(256,256,256,.325);
    border-bottom-color: rgba(256,256,256,.5);
    background-color: #151a1c;
  }
  & .nav-tabs .nav-link.active {
    border-color: rgba(256,256,256,.6) !important;
    background-color: #192125;
    border-bottom: thin solid #192125 !important;
  }
  & .nav-tabs {
    border-bottom-color: rgba(256,256,256,.5);
  }
  & .nav-tabs .nav-item.show .nav-link,
  & .nav-tabs .nav-link.active {
    color: $dark-mode-foreground-lighter;
  }
  & .tab-pane {
    background-color: #192125;
    border-bottom: thin solid rgba(256,256,256,.5);
    border-left: thin solid rgba(256,256,256,.5);
    border-right: thin solid rgba(256,256,256,.5);
    border-bottom-left-radius: .25rem;
    border-bottom-right-radius: .25rem;
    padding: .5rem;
  }
  & td,
  & th,
  & thead th {
    border-color: #454d55;
  }
  & .table {
    background-color: #262a2e;
    color: $dark-mode-foreground-lighter
  }
  & .table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(255,255,255,.05);
  }
  & .table-hover tbody tr:hover {
    background-color: rgba(0,0,0,.125);
  }
  & .modal-content {
    background-color: #2a2f34;
    border-color: rgba(255,255,255,.4);
  }
  & .modal-header {
    border-bottom-color: rgba(256,256,256,.5);
    color: $dark-mode-foreground-lighter
  }
  & .modal-footer {
    border-bottom-color: rgba(256,256,256,.5)
  }
  & .close {
    color: $dark-mode-foreground-lighter;
    &:hover,
    &:focus {
      color: rgba(256,256,256,.6);
    }
  }
  & .header-global__navbar--toggler .navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30'%3E%3Cpath stroke='rgba(255, 255, 255, 0.75)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
  }
  & .header-global__navbar--toggler {
    border-color: rgba(256,256,256,.5);
  }
  & #headerGlobalNavbarContent.collapse.show .navbar-nav,
  & #headerGlobalNavbarContent.collapsing .navbar-nav {
    background-color: #14181d;
  }
  & #___gcse_0 {
    filter: invert(1);
  }
}

@media screen and (min-width: 992px) {
  .dark-mode .header-global__navbar--search-toggle:before {
    background-color: $dark-mode-bg-primary-blue;
  }
  .dark-mode .header-global__nav-bottom .dropdown:hover {
      background-color: #0f1417;
  }
  .dark-mode .header-global .dropdown-menu {
    border: thin solid rgba(255,255,255,.325);
  }
}

@media screen and (max-width: 991px) {
  .dark-mode .header-global__core:after {
    background-color: #272b30;
    border-top: 1px solid #b1b1b1;
  }
  .dark-mode .header-global .dropdown-menu {
    border: thin solid rgba(255,255,255,.325);
  }
}

// Styles for the BOT page.
.dark-mode #board-of-trustees {  // on about/BOT page
  border: none !important;
}
.dark-mode #agendas-and-minutes {  // on about/BOT page
  border: none !important;
}

.dark-mode #v-pills-tabContent .tab-pane { // on about/BOT page
  border: none;
}

.dark-mode .sub-nav__navbar {
  background-color: #141a1c !important;
}

.dark-mode .sub-nav__nav-link {
  color: $dark-mode-text-primary-blue-darker;
}

.dark-mode .typography__sub-nav--red-h2,
.dark-mode .typography__section--heading {
  color: $dark-mode-text-primary-red;
}

.dark-mode .error__main-heading {
  color: $dark-mode-text-primary-red;
}

.dark-mode .error__sub-heading {
  color: $dark-mode-text-primary-blue;
}