/*************************************************
 *  Dark themed components
 **************************************************/

body.dark,
.dark .docs-toc-link,
.dark .docs-sidebar .nav > li:not(.active) > a,
.dark .modal button.close,
.dark input,
.dark .form-control,
.dark .form-control:focus {
  color: rgb(248, 248, 242);
  background: $sta-dark-background;
}

.dark .form-control {
  background-color: rgb(68, 71, 90);
}

.dark .form-control:focus {
  background-color: rgb(68, 71, 90);
  border-color: $sta-primary;
  box-shadow: 0 0 0 .2rem $sta-primary-dark;
}

.dark h1,
.dark h2,
.dark h3,
.dark h4,
.dark h5,
.dark h6 {
  color: rgb(152, 166, 173);
}

.dark pre,
.dark code {
  color: rgb(139, 233, 253);
  background-color: rgb(68, 71, 90);
}

.dark pre {
  background-color: rgb(68, 71, 90);
  border-color: rgb(68, 71, 90);
}

.dark .markup-quote {
  background-image: linear-gradient(to bottom, rgba(233, 231, 245, 0.2), rgba(233, 231, 245, 0.2));
}

.dark #MathJax_Zoom {
  background-color: rgb(68, 71, 90) !important;
}

.dark ul.share li a {
  background-color: $sta-primary;
}

.dark table table {
  background-color: rgb(40, 42, 54);
}

/* Table Striped */
.dark table > tbody > tr:nth-child(odd) > td,
.dark table > tbody > tr:nth-child(odd) > th {
  background-color: rgb(50, 52, 64);
}

/* Table Hover */
.dark table > tbody > tr:hover > td,
.dark table > tbody > tr:hover > th {
  background-color: rgb(60, 62, 74);
}

.dark .article-title a {
  color: #fff;
}

.dark .portrait-title h2 {
  color: #fff;
}

.dark .portrait-title h3 {
  color: rgba(255, 255, 255, 0.54);
}

.dark ul.ul-edu li .description p.institution {
  color: rgba(255, 255, 255, 0.6);
}

.dark .pub-icon {
  color: rgba(255, 255, 255, 0.54);
}

.dark .talk-metadata {
  color: rgba(255, 255, 255, 0.54);
}

.dark .pagination li > a, .pagination li > span {
  background-color: rgb(40, 42, 54);
  border: 1px solid #ddd;
}

.dark .card {
  background: #343a40;
}

.dark .card h4 a {
  color: $sta-primary;
  border-bottom: solid 1px transparent;
}

.dark .card .card-image.hover-overlay::before {
  background: #666;
}

.dark .card .card-image.hover-overlay::after {
  color: #fff;
}

.dark .navbar-light {
  background: #2d303c !important;
  box-shadow: 0 0.125rem 0.25rem 0 #22212900;
  border-color: #070707;
}

.dark .navbar-brand{
  color: #fff;
}

.dark .nav-link{
  color: #fff !important;
}

.dark select {
  background: rgb(40, 42, 54);
  color: rgb(248, 248, 242);
}

/* Algolia search input */
.dark .ais-search-box--input {
  background-color: rgb(68, 71, 90);
}

.dark #search-query {
  background-color: rgb(68, 71, 90);
}

.dark .badge-light {
  color: rgba(255, 255, 255, .68);
  background: rgba(255, 255, 255, .2);
}

.dark .badge-light[href]:focus,
.dark .badge-light[href]:hover {
  background: rgba(255, 255, 255, .3);
}

.dark a.badge:focus,
.dark a.badge:hover {
  color: rgba(255, 255, 255, .68);
}

.dark .btn-primary,
.dark .btn.btn-primary.active {
  color: initial;
}


.dark .btn-outline-dark,
.dark .btn.btn-outline-dark.active {
  color: #fff;
}

.dark .bg-white{
  background: #2d303c !important;
}

.dark .network-icon a:hover {
  background: #272935;
}

.dark .home-section:nth-of-type(even) {
  background-color: #212529 !important;
}