diff --git a/.prettierignore b/.prettierignore
index e4fc2efaa2..863363253a 100644
--- a/.prettierignore
+++ b/.prettierignore
@@ -5,4 +5,5 @@
 frontend/app/assets/javascripts/twitter/
 frontend/vendor/
 public/app/assets/javascripts/bootstrap-accessibility/
-public/vendor/assets/javascripts/
+public/app/assets/stylesheets/foundation
+public/vendor/
diff --git a/.stylelintignore b/.stylelintignore
index 3a72c1d2c0..706b92c8e3 100644
--- a/.stylelintignore
+++ b/.stylelintignore
@@ -1,2 +1,3 @@
 frontend/vendor/
 public/app/assets/stylesheets/foundation
+public/vendor/
diff --git a/.stylelintrc b/.stylelintrc
index 3149bc1e20..91ba02f735 100644
--- a/.stylelintrc
+++ b/.stylelintrc
@@ -11,6 +11,7 @@
     "scss/at-rule-no-unknown": true,
     "no-descending-specificity": null,
     "no-duplicate-selectors": null,
+    "custom-property-empty-line-before": null,
     "font-family-no-missing-generic-family-keyword": [
       true,
       {
diff --git a/public/app/assets/stylesheets/application.scss b/public/app/assets/stylesheets/application.scss
index cfe52ce7eb..66ac247869 100644
--- a/public/app/assets/stylesheets/application.scss
+++ b/public/app/assets/stylesheets/application.scss
@@ -23,6 +23,7 @@
 // "bootstrap-sprockets" must be imported before "bootstrap" and "bootstrap/variables"
 @import 'bootstrap-sprockets';
 @import 'bootstrap';
+@import 'bootstrap-dark/bootstrap-dark';
 
 //font-awesome
 @import 'font-awesome-sprockets';
@@ -31,10 +32,14 @@
 // @import "load-awesome/line-spin-clockwise-fade.css";
 @import 'foundation/_functions.scss';
 @import 'archivesspace/aspace';
+@import 'archivesspace/aspace-dark';
+@import 'archivesspace/bootstrap-dark-overrides.scss';
 @import 'archivesspace/record-type-badge';
 
 @import 'archivesspace/infinite-scroll';
+@import 'archivesspace/infinite-scroll-dark.scss';
 @import 'archivesspace/largetree';
+@import 'archivesspace/largetree-dark.scss';
 @import 'archivesspace/mixed-content';
 
 @import 'archivesspace/helpers.scss';
diff --git a/public/app/assets/stylesheets/archivesspace/aspace-dark.scss b/public/app/assets/stylesheets/archivesspace/aspace-dark.scss
new file mode 100644
index 0000000000..7ff5fbff5d
--- /dev/null
+++ b/public/app/assets/stylesheets/archivesspace/aspace-dark.scss
@@ -0,0 +1,117 @@
+/*
+ * This file overrides some color rules from aspace.scss for 
+ * users who prefer dark mode.
+ *
+ * Color changes in aspace.scss should be considered here as well.
+ */
+@media (prefers-color-scheme: dark) {
+  body {
+    color: var(--primary-text-color);
+    background-color: var(--primary-bg-color);
+  }
+
+  a {
+    color: var(--link-color);
+  }
+  a:hover,
+  a:focus {
+    color: var(--link-hover-color);
+  }
+
+  .tabbing.navbar-default {
+    background-color: var(--primary-bg-color);
+    border-color: transparent;
+  }
+
+  .more-facets {
+    .btn {
+      color: var(--secondary-text-color);
+    }
+  }
+
+  .tabbing.nav-pills > li > a {
+    background-color: var(--btn-primary-bg-color);
+  }
+
+  .tabbing.nav-pills > li > a.disabled-nav-pill:hover {
+    color: var(--disabled-text-color);
+  }
+
+  #sidebar {
+    border: 1px solid var(--secondary-border-color);
+  }
+
+  .recordrow {
+    h3 {
+      color: var(--primary-color);
+    }
+  }
+
+  h3,
+  .h3 {
+    color: var(--primary-color);
+  }
+
+  .searchterm {
+    color: var(--primary-bg-color);
+  }
+
+  button.accession {
+    color: var(--accession-color);
+  }
+  button.digital_object {
+    color: var(--collection-color);
+  }
+  button.object {
+    color: var(--collection-color);
+  }
+  button.collection,
+  button.resource {
+    color: var(--collection-color);
+  }
+  button.subject {
+    /* class subject also turns up in finding aid transforms */
+    color: var(--subject-color);
+  }
+  button.agent {
+    color: var(--agent-color);
+  }
+
+  button.person {
+    color: var(--agent-color);
+  }
+  button.record {
+    color: var(--record-color);
+  }
+  button.classification {
+    color: var(--repository-color);
+  }
+
+  span.required {
+    color: var(--highlight);
+  }
+
+  .breadcrumb > li + li::before {
+    color: var(--secondary-color);
+  }
+
+  .sorter select[name='sort'] {
+    background: var(--secondary-bg-color);
+    color: var(--secondary-text-color);
+    border: 1px solid var(--secondary-border-color);
+    border-radius: 4px;
+  }
+  .sorter select[name='sort']:focus {
+    color: var(--primary-text-color);
+    border-color: var(--primary-color);
+  }
+
+  @media (min-width: 992px) {
+    #sidebar.resizable-sidebar {
+      .resizable-sidebar-handle {
+        background-color: var(--resizable-sidebar-handle-bg-color);
+        border-right: 1px solid var(--secondary-border-color);
+      }
+    }
+  }
+}
diff --git a/public/app/assets/stylesheets/archivesspace/aspace.scss b/public/app/assets/stylesheets/archivesspace/aspace.scss
index e69b36b5ce..be2d974793 100644
--- a/public/app/assets/stylesheets/archivesspace/aspace.scss
+++ b/public/app/assets/stylesheets/archivesspace/aspace.scss
@@ -4,14 +4,14 @@ html {
 }
 
 a {
-  color: $primary-color;
+  color: var(--primary-color);
   text-decoration: none;
   line-height: inherit;
   cursor: pointer;
 }
 a:hover,
 a:focus {
-  color: $dark_against_shade;
+  color: var(--dark-against-shade);
 }
 a img {
   border: 0;
@@ -24,7 +24,7 @@ a img {
     margin-right: 0;
     padding-left: rem-calc(30);
     padding-right: rem-calc(40);
-    border-bottom: rem-calc(4) solid $primary-color;
+    border-bottom: rem-calc(4) solid var(--primary-color);
     width: 100%;
     padding-bottom: rem-calc(1);
   }
@@ -55,9 +55,9 @@ a img {
 }
 
 .top-bar {
-  background: $nvBgDefault !important;
-  border-top: 1px solid $border-accent;
-  border-bottom: rem-calc(1) solid $border-accent;
+  background: var(--nvBgDefault) !important;
+  border-top: 1px solid var(--border-accent);
+  border-bottom: rem-calc(1) solid var(--border-accent);
   float: none !important;
 }
 
@@ -88,14 +88,14 @@ a img {
 
 /* for the "tabbing" effect */
 .tabbing.navbar-default {
-  background-color: $white;
-  border-color: $white;
+  background-color: var(--white);
+  border-color: var(--white);
 }
 
 .more-facets {
   .btn {
     padding-left: 20px;
-    color: $accent-color;
+    color: var(--accent-color);
   }
   .below-the-fold {
     display: none;
@@ -106,8 +106,8 @@ a img {
   margin-bottom: 0;
   margin-left: -10px;
   margin-right: 0;
-  background-color: $secondary-color;
-  color: $white;
+  background-color: var(--secondary-color);
+  color: var(--white);
   border-radius: 0;
 }
 .tabbing.nav-pills > li:first-child a {
@@ -120,8 +120,8 @@ a img {
 }
 
 .tabbing.nav-pills > li > a.active {
-  background-color: $accent-color;
-  color: $white;
+  background-color: var(--accent-color);
+  color: var(--white);
 }
 .tabbing-item li:first-child a {
   border-bottom-right-radius: 0;
@@ -147,26 +147,26 @@ a img {
 */
 
 .navbar-default {
-  background-color: $nvBgDefault;
-  border-color: $nvBgHighlight;
+  background-color: var(--nvBgDefault);
+  border-color: var(--nvBgHighlight);
   .navbar-brand {
-    color: $nvColDefault;
+    color: var(--nvColDefault);
     &:hover,
     &:focus {
-      color: $nvColHighlight;
+      color: var(--nvColHighlight);
     }
   }
   .navbar-text {
-    color: $nvColDefault;
+    color: var(--nvColDefault);
   }
   .navbar-nav {
     > li {
       > a {
-        color: $nvColDefault;
+        color: var(--nvColDefault);
         font-size: 1rem !important;
         &:hover,
         &:focus {
-          color: $nvColHighlight;
+          color: var(--nvColHighlight);
           text-decoration: underline;
         }
       }
@@ -175,8 +175,8 @@ a img {
       > a,
       > a:hover,
       > a:focus {
-        color: $nvColHighlight;
-        background-color: $nvBgHighlight;
+        color: var(--nvColHighlight);
+        background-color: var(--nvBgHighlight);
         text-decoration: underline;
       }
     }
@@ -184,31 +184,31 @@ a img {
       > a,
       > a:hover,
       > a:focus {
-        color: $nvColHighlight;
-        background-color: $nvBgHighlight;
+        color: var(--nvColHighlight);
+        background-color: var(--nvBgHighlight);
         text-decoration: underline;
       }
     }
   }
   .navbar-toggle {
-    border-color: $nvBgHighlight;
+    border-color: var(--nvBgHighlight);
     &:hover,
     &:focus {
-      background-color: $nvBgHighlight;
+      background-color: var(--nvBgHighlight);
     }
     .icon-bar {
-      background-color: $nvColDefault;
+      background-color: var(--nvColDefault);
     }
   }
   .navbar-collapse,
   .navbar-form {
-    border-color: $nvColDefault;
+    border-color: var(--nvColDefault);
   }
   .navbar-link {
-    color: $nvColDefault;
+    color: var(--nvColDefault);
     font-size: 1rem !important;
     &:hover {
-      color: $nvColHighlight;
+      color: var(--nvColHighlight);
       text-decoration: underline;
     }
   }
@@ -216,10 +216,10 @@ a img {
 @media (max-width: 767px) {
   .navbar-default .navbar-nav .open .dropdown-menu {
     > li > a {
-      color: $nvColDefault;
+      color: var(--nvColDefault);
       &:hover,
       &:focus {
-        color: $nvColHighlight;
+        color: var(--nvColHighlight);
         text-decoration: underline;
       }
     }
@@ -227,8 +227,8 @@ a img {
       > a,
       > a:hover,
       > a:focus {
-        color: $nvColHighlight;
-        background-color: $nvBgHighlight;
+        color: var(--nvColHighlight);
+        background-color: var(--nvBgHighlight);
         text-decoration: underline;
       }
     }
@@ -244,7 +244,7 @@ a img {
     width: $row-width;
 
     .small-12 {
-      border: 1px solid $border;
+      border: 1px solid var(--border);
     }
   }
 }
@@ -270,7 +270,7 @@ a img {
 }
 
 #sidebar {
-  border: 1px solid $border;
+  border: 1px solid var(--border);
   padding: rem-calc(10);
 }
 
@@ -279,13 +279,13 @@ a img {
   padding-bottom: rem-calc(20);
   padding-left: rem-calc(20);
   margin-bottom: rem-calc(10);
-  border: 1px solid $border;
+  border: 1px solid var(--border);
   > h3 {
     margin-top: 0;
     margin-left: rem-calc(-20);
-    background-color: $row-background;
-    color: $secondary-color;
-    border-bottom: 1px solid $border-accent;
+    background-color: var(--row-background);
+    color: var(--secondary-color);
+    border-bottom: 1px solid var(--border-accent);
     padding-top: rem-calc(10);
     padding-bottom: rem-calc(10);
     padding-left: rem-calc(10);
@@ -316,7 +316,7 @@ a img {
 
 .record-container.with-border {
   padding: rem-calc(20);
-  border: 1px solid $border;
+  border: 1px solid var(--border);
 }
 
 .record-header {
@@ -362,7 +362,7 @@ a img {
 .record-image {
   float: right;
   padding: rem-calc(20);
-  background-color: $image-background;
+  background-color: var(--image-background);
   text-align: center;
 
   p {
@@ -383,22 +383,22 @@ a img {
 
 .row.context-row {
   margin-top: rem-calc(10);
-  background-color: $row-background;
-  border: 1px solid $border;
+  background-color: var(--row-background);
+  border: 1px solid var(--border);
   padding-left: rem-calc(10);
 }
 
 .recordrow {
   padding: rem-calc(10);
-  border: 1px solid $border;
+  border: 1px solid var(--border);
   margin-bottom: rem-calc(10);
 
   &.featured {
-    background-color: $row-background;
+    background-color: var(--row-background);
   }
 
   h3 {
-    color: $darkest;
+    color: var(--darkest);
     margin-top: 0;
     margin-bottom: 0;
   }
@@ -415,7 +415,7 @@ a img {
 }
 
 a {
-  color: $secondary-color;
+  color: var(--secondary-color);
 }
 
 a:hover {
@@ -427,7 +427,7 @@ h1,
   font-family: $sans-font;
   font-size: rem-calc(30);
   font-weight: bold;
-  color: $primary-color;
+  color: var(--primary-color);
 }
 
 h1,
@@ -449,7 +449,7 @@ h2,
   font-family: $sans-font;
   font-size: rem-calc(24);
   font-weight: bold;
-  color: $primary-color;
+  color: var(--primary-color);
 }
 
 h3,
@@ -457,7 +457,7 @@ h3,
   font-family: $sans-font;
   font-size: rem-calc(20);
   font-weight: bold;
-  color: $secondary-color;
+  color: var(--secondary-color);
 }
 
 h4,
@@ -505,13 +505,13 @@ h5,
   background-color: #d5f7e9;
 }
 .searchterm {
-  background-color: $highlight;
+  background-color: var(--highlight);
 }
 #submit_search {
   width: 100%;
 }
 .searchstatement {
-  background-color: $row-background;
+  background-color: var(--row-background);
 }
 
 .facets h2 {
@@ -542,11 +542,11 @@ ul.no-bullets {
   margin-left: 0;
 
   li {
-    border-top: 1px solid $border;
+    border-top: 1px solid var(--border);
   }
 
   li:last-child {
-    border-bottom: 1px solid $border;
+    border-bottom: 1px solid var(--border);
   }
 
   li > a {
@@ -555,7 +555,7 @@ ul.no-bullets {
 
   li > .recordnumber {
     float: right;
-    color: $secondary-color;
+    color: var(--secondary-color);
 
     /* position: absolute; */
 
@@ -593,55 +593,58 @@ ul.no-bullets {
 .recordtype {
   margin-top: -0.75em;
 }
-.object {
-  color: $collection-color;
+.accession {
+  color: var(--accession-color);
+}
+.digital_object {
+  color: var(--collection-color);
 }
 .collection,
 .resource {
-  color: $collection-color;
+  color: var(--collection-color);
 }
 button.subject {
   /* class subject also turns up in finding aid transforms */
-  color: $subject-color;
+  color: var(--subject-color);
 }
 .agent {
-  color: $agent-color;
+  color: var(--agent-color);
 }
 
 .person {
-  color: $agent-color;
+  color: var(--agent-color);
 }
 .record {
-  color: $record-color;
+  color: var(--record-color);
 }
 .classification {
-  color: $repository-color;
+  color: var(--repository-color);
 }
 
 .page_action {
-  color: $darkest;
+  color: var(--darkest);
   text-decoration: none;
   line-height: inherit;
   cursor: pointer;
-  border: 1px solid $light-neutral;
+  border: 1px solid var(--light-neutral);
 }
 .page_action:hover,
 .page_action:focus {
-  color: $accent_color;
-  background-color: $light-neutral;
+  color: var(--accent-color);
+  background-color: var(--light-neutral);
 }
 
 .top_container {
-  color: $container-color;
+  color: var(--container-color);
 }
 .folder {
-  color: $folder-color;
+  color: var(--folder-color);
 }
 .recordtype.repository {
-  color: $repository-color;
+  color: var(--repository-color);
 }
 .recordtype.classification {
-  color: $classification-color;
+  color: var(--classification-color);
 }
 .digitized {
   float: right;
@@ -822,11 +825,11 @@ span.head {
 }
 
 .breadcrumb > li + li::before {
-  color: $darkest;
-  content: '\007C\00a0';
+  color: var(--darkest);
+  content: '|';
 }
 .breadcrumb * a {
-  color: $breadcrumb-link;
+  color: var(--breadcrumb-link);
 }
 .breadcrumb li br {
   display: none;
diff --git a/public/app/assets/stylesheets/archivesspace/bootstrap-dark-overrides.scss b/public/app/assets/stylesheets/archivesspace/bootstrap-dark-overrides.scss
new file mode 100644
index 0000000000..4941503635
--- /dev/null
+++ b/public/app/assets/stylesheets/archivesspace/bootstrap-dark-overrides.scss
@@ -0,0 +1,246 @@
+@media (prefers-color-scheme: dark) {
+  // buttons
+  .btn,
+  .btn:hover,
+  .btn:focus,
+  .btn.focus {
+    color: var(--btn-text-color);
+  }
+
+  .btn.disabled,
+  .btn:disabled {
+    opacity: 0.8;
+  }
+
+  .btn-default {
+    color: var(--btn-text-color);
+    background-color: var(--btn-default-bg-color);
+    border-color: var(--btn-default-border-color);
+  }
+  .btn-default:hover,
+  .btn-default:focus,
+  .btn-default.focus {
+    color: var(--btn-text-color);
+    background-color: var(--btn-default-hover-bg-color);
+    border-color: var(--btn-default-border-color);
+  }
+  .btn-default:active,
+  .btn-default.active,
+  .btn-default:active:hover,
+  .btn-default:active:focus,
+  .btn-default:active.focus,
+  .btn-default.active:hover,
+  .btn-default.active:focus,
+  .btn-default.active.focus {
+    color: var(--btn-text-color);
+    background-color: var(--btn-default-active-bg-color);
+    border-color: var(--btn-default-border-color);
+  }
+  .btn-default.disabled:hover,
+  .btn-default.disabled:focus,
+  .btn-default.disabled.focus,
+  .btn-default[disabled]:hover,
+  .btn-default[disabled]:focus,
+  .btn-default[disabled].focus,
+  fieldset[disabled] .btn-default:hover,
+  fieldset[disabled] .btn-default:focus,
+  fieldset[disabled] .btn-default.focus {
+    background-color: var(--btn-default-hover-bg-color);
+    border-color: var(--btn-default-border-color);
+  }
+
+  .btn-primary {
+    color: var(--btn-text-color);
+    background-color: var(--btn-primary-bg-color);
+    border-color: var(--btn-primary-border-color);
+  }
+
+  .btn-primary:hover,
+  .btn-primary:focus,
+  .btn-primary.focus,
+  .btn-primary:not(:disabled):not(.disabled):active,
+  .btn-primary:not(:disabled):not(.disabled).active,
+  .show > .btn-primary.dropdown-toggle {
+    background-color: var(--btn-primary-hover-bg-color);
+    border-color: var(--btn-primary-hover-border-color);
+  }
+
+  .close {
+    opacity: 1;
+  }
+
+  .close:hover,
+  .close:focus {
+    opacity: 0.6;
+    color: inherit;
+  }
+
+  // .navbar
+  .navbar {
+    border-radius: 0;
+  }
+
+  // .form-control
+  .form-control {
+    color: var(--primary-text-color);
+    background-color: var(--secondary-bg-color);
+    border: 1px solid var(--secondary-border-color);
+  }
+
+  .form-control:focus {
+    color: var(--primary-text-color);
+    border-color: var(--primary-color);
+  }
+
+  .form-control::placeholder {
+    color: var(--secondary-text-color);
+  }
+
+  .input-group-addon {
+    color: var(--primary-text-color);
+    background-color: var(--primary-bg-color);
+    border: 1px solid var(--secondary-border-color);
+  }
+
+  .has-error .input-group-addon {
+    background-color: var(--primary-bg-color);
+  }
+
+  // Bootstrap v4 replaced panels with cards, so bootstrap-dark doesn't
+  // style the panels used from Bootstrap v3. Some of following panel styles
+  // come from bootstrap-dark card styles.
+
+  .panel-default {
+    border-color: var(--primary-border-color);
+  }
+
+  .panel {
+    background-color: transparent;
+    box-shadow: none;
+  }
+
+  .panel-default > .panel-heading {
+    color: var(--primary-text-color);
+    background-color: var(--secondary-bg-color);
+    border-bottom: 1px solid var(--primary-border-color);
+  }
+
+  .panel-group .panel-heading + .panel-collapse > .panel-body {
+    // 'expand/collapse all' panel bodies
+    border-top-color: transparent;
+  }
+
+  // modal
+  .modal-content {
+    background-color: var(--primary-bg-color);
+    border: 1px solid var(--secondary-border-color);
+  }
+
+  .modal-header {
+    border-bottom: 1px solid var(--secondary-border-color);
+  }
+
+  .modal-footer {
+    border-top: 1px solid var(--secondary-border-color);
+  }
+
+  // main app footer, not expand-all panels
+  footer.panel-footer {
+    background-color: var(--tertiary-bg-color);
+    border-top: 1px solid var(--primary-border-color);
+  }
+
+  // alerts
+  .alert-danger {
+    color: var(--alert-danger-color);
+    background-color: var(--alert-danger-bg-color);
+    border-color: var(--alert-danger-border-color);
+  }
+  .alert-danger hr {
+    border-top-color: var(--alert-danger-border-color);
+  }
+  .alert-danger .alert-link {
+    color: var(--secondary-text-color);
+  }
+
+  .alert-info {
+    color: var(--alert-info-color);
+    background-color: var(--alert-info-bg-color);
+    border-color: var(--alert-info-border-color);
+  }
+  .alert-info hr {
+    border-top-color: var(--primary-color);
+  }
+  .alert-info .alert-link {
+    color: var(--secondary-text-color);
+  }
+
+  .alert-success {
+    color: var(--alert-success-color);
+    background-color: var(--alert-success-bg-color);
+    border-color: var(--alert-success-border-color);
+  }
+  .alert-success hr {
+    border-top-color: var(--alert-success-border-color);
+  }
+  .alert-success .alert-link {
+    color: var(--secondary-text-color);
+  }
+
+  .alert-warning {
+    color: var(--alert-warning-color);
+    background-color: var(--alert-warning-bg-color);
+    border-color: var(--alert-warning-border-color);
+  }
+  .alert-warning hr {
+    border-top-color: var(--alert-warning-border-color);
+  }
+  .alert-warning .alert-link {
+    color: var(--alert-warning-link-color);
+  }
+
+  // thumbnail
+  .thumbnail {
+    background-color: var(--primary-bg-color);
+    border: 1px solid var(--primary-border-color);
+  }
+
+  // pagination, Bootstrap v4 broke v3's `.pagination` component
+  .pagination > li > a,
+  .pagination > li > span {
+    color: var(--primary-text-color);
+    background-color: var(--primary-bg-color);
+    border: 1px solid var(--primary-border-color);
+  }
+
+  .pagination > li > a:hover,
+  .pagination > li > a:focus,
+  .pagination > li > span:hover,
+  .pagination > li > span:focus {
+    color: var(--primary-text-color);
+    background-color: var(--tertiary-bg-color);
+    border-color: var(--primary-border-color);
+  }
+
+  .pagination > .active > a,
+  .pagination > .active > a:hover,
+  .pagination > .active > a:focus,
+  .pagination > .active > span,
+  .pagination > .active > span:hover,
+  .pagination > .active > span:focus {
+    color: var(--btn-text-color);
+    background-color: var(--btn-primary-bg-color);
+    border-color: var(--btn-primary-border-color);
+  }
+
+  .pagination > .disabled > span,
+  .pagination > .disabled > span:hover,
+  .pagination > .disabled > span:focus,
+  .pagination > .disabled > a,
+  .pagination > .disabled > a:hover,
+  .pagination > .disabled > a:focus {
+    color: var(--disabled-text-color);
+    background-color: var(--primary-bg-color);
+    border-color: var(--primary-border-color);
+  }
+}
diff --git a/public/app/assets/stylesheets/archivesspace/colors.scss b/public/app/assets/stylesheets/archivesspace/colors.scss
index 17ef63b2da..f15a4ccd8a 100644
--- a/public/app/assets/stylesheets/archivesspace/colors.scss
+++ b/public/app/assets/stylesheets/archivesspace/colors.scss
@@ -1,46 +1,149 @@
-/* colors and icons for your institution */
-
-$black: #000;
-$darkest: #00171f;
-$white: #fff;
-$darkblue: #041c2f;
-$midblue: #006e99;
-$lightblue: #007cad;
-$darkshade: #888;
-$shade: #ccc;
-$lightshade: #eee;
-$highlight: #f7d309;
-$dark_against_shade: #004f6f; /* for contrast against lightshade */
-
-/* this is where you can change colors for your institution */
-
-$primary-color: $lightblue;
-$secondary-color: $midblue;
-$accent-color: $darkblue;
-$border-accent: $darkblue;
-$border: $shade;
-$image-background: $shade;
-$row-background: $lightshade;
-$button-background: $lightblue;
-$alt-button-background: $lightshade;
-$alt-button-color: $darkshade;
-$light-neutral: $lightshade;
-$breadcrumb-link: $darkblue;
-
-/* this is for the top horizontal nav bar */
-$nvBgDefault: $light-neutral;
-$nvBgHighlight: $light-neutral;
-$nvColDefault: $dark_against_shade;
-$nvColHighlight: $border-accent;
-
-$collection-color: #e01919;
-$subject-color: #941c9a;
-$container-color: #0b5a14;
-$agent-color: #3b52ff;
-$record-color: #0b5a14;
-$repository-color: #7608b5;
-$classification-color: #015189;
-$accession-color: $collection-color;
-$digital-object-color: $collection-color;
-$archival-object-color: #457141;
-$folder-color: #009fcf;
+:root {
+  /* colors and icons for your institution */
+  --black: #000;
+  --darkest: #00171f;
+  --white: #fff;
+  --darkblue: #041c2f;
+  --midblue: #006e99;
+  --lightblue: #007cad;
+  --darkshade: #888;
+  --shade: #ccc;
+  --lightshade: #eee;
+  --highlight: #f7d309;
+  --dark-against-shade: #004f6f; /* for contrast against lightshade */
+
+  /* this is where you can change colors for your institution */
+  --primary-color: var(--lightblue);
+  --secondary-color: var(--midblue);
+  --accent-color: var(--darkblue);
+  --border-accent: var(--darkblue);
+  --border: var(--shade);
+  --image-background: var(--shade);
+  --row-background: var(--lightshade);
+  --button-background: var(--lightblue);
+  --alt-button-background: var(--lightshade);
+  --alt-button-color: var(--darkshade);
+  --light-neutral: var(--lightshade);
+  --breadcrumb-link: var(--darkblue);
+
+  /* this is for the top horizontal nav bar */
+  --nvBgDefault: var(--light-neutral);
+  --nvBgHighlight: var(--light-neutral);
+  --nvColDefault: var(--dark-against-shade);
+  --nvColHighlight: var(--border-accent);
+
+  --collection-color: #e01919;
+  --subject-color: #941c9a;
+  --container-color: #0b5a14;
+  --agent-color: #3b52ff;
+  --record-color: #0b5a14;
+  --repository-color: #7608b5;
+  --classification-color: #015189;
+  --accession-color: var(--collection-color);
+  --digital-object-color: var(--collection-color);
+  --archival-object-color: #457141;
+  --folder-color: #009fcf;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    // Dark theme primitives
+    --blue-100: #6bd0f1;
+    --blue-200: #1ab7ea;
+    --blue-300: #0092cb;
+    --blue-400: #007fb0;
+    --blue-500: #1e73be;
+    --blue-600: #0e6cb6;
+    --blue-700: #002a5c;
+
+    --gray-100: #e1e1e1;
+    --gray-200: #cfcfcf;
+    --gray-300: #b1b1b1;
+    --gray-400: #9e9e9e;
+    --gray-500: #7e7e7e;
+    --gray-600: #626262;
+    --gray-700: #515151;
+    --gray-800: #3b3b3b;
+    --gray-900: #222;
+
+    /* this is where you can change colors for your institution */
+    // Dark theme base
+    --primary-color: var(--blue-200);
+    --secondary-color: var(--blue-300);
+
+    --primary-text-color: var(--gray-100);
+    --secondary-text-color: var(--gray-200);
+    --disabled-text-color: var(--gray-400);
+
+    --primary-bg-color: var(--gray-900);
+    --secondary-bg-color: var(--gray-800);
+    --tertiary-bg-color: var(--gray-700);
+
+    --primary-border-color: var(--gray-200);
+    --secondary-border-color: var(--gray-400);
+
+    // Dark theme specific UI overrides
+    --link-color: var(--blue-100);
+    --link-hover-color: var(--secondary-color);
+
+    --btn-text-color: var(--white);
+
+    --btn-default-bg-color: transparent;
+    --btn-default-border-color: var(--secondary-border-color);
+    --btn-default-hover-bg-color: var(--gray-600);
+    --btn-default-active-bg-color: var(--secondary-bg-color);
+
+    --btn-primary-bg-color: var(--blue-400);
+    --btn-primary-border-color: var(--blue-400);
+    --btn-primary-hover-bg-color: var(--blue-300);
+    --btn-primary-hover-border-color: var(--blue-300);
+
+    --alert-danger-color: #f49b9b;
+    --alert-danger-bg-color: #842029;
+    --alert-danger-border-color: var(--collection-color);
+
+    --alert-info-color: var(--blue-100);
+    --alert-info-bg-color: var(--dark-against-shade);
+    --alert-info-border-color: var(--secondary-color);
+
+    --alert-success-color: #a1d9ae;
+    --alert-success-bg-color: #186429;
+    --alert-success-border-color: var(--archival-object-color);
+
+    --alert-warning-color: #110c00;
+    --alert-warning-bg-color: #997404;
+    --alert-warning-border-color: #f6e05e;
+    --alert-warning-link-color: var(--white);
+
+    --resizable-sidebar-handle-bg-color: var(--gray-600);
+
+    --accent-color: var(--gray-500);
+    --border-accent: var(--gray-100);
+    --border: var(--primary-border-color);
+    --image-background: var(--gray-200);
+    --row-background: var(--gray-700);
+    --button-background: var(--lightblue);
+    --alt-button-background: var(--lightshade);
+    --alt-button-color: var(--darkshade);
+    --light-neutral: var(--lightshade);
+    --breadcrumb-link: var(--primary-color);
+
+    /* this is for the top horizontal nav bar */
+    --nvBgDefault: var(--gray-700);
+    --nvBgHighlight: var(--gray-700);
+    --nvColDefault: var(--white);
+    --nvColHighlight: var(--gray-100);
+
+    --collection-color: #ec5454;
+    --subject-color: #d74bde;
+    --container-color: #139e23;
+    --agent-color: #6a7cff;
+    --record-color: var(--container-color);
+    --repository-color: #be58f8;
+    --classification-color: #028cec;
+    --accession-color: var(--collection-color);
+    --digital-object-color: var(--collection-color);
+    --archival-object-color: #5b9656;
+    --folder-color: #009fcf;
+  }
+}
diff --git a/public/app/assets/stylesheets/archivesspace/infinite-scroll-dark.scss b/public/app/assets/stylesheets/archivesspace/infinite-scroll-dark.scss
new file mode 100644
index 0000000000..2c4c569edd
--- /dev/null
+++ b/public/app/assets/stylesheets/archivesspace/infinite-scroll-dark.scss
@@ -0,0 +1,22 @@
+@media (prefers-color-scheme: dark) {
+  .infinite-record-record {
+    background-image: repeating-linear-gradient(
+      90deg,
+      transparent,
+      transparent ($indent-width - 1),
+      var(--secondary-bg-color) $indent-width
+    );
+  }
+  .infinite-item {
+    background-color: var(--primary-bg-color);
+  }
+
+  .waypoint:last-child {
+    .infinite-record-record:last-child {
+      &::after {
+        border-bottom: 5px solid var(--secondary-border-color);
+        background: var(--primary-bg-color);
+      }
+    }
+  }
+}
diff --git a/public/app/assets/stylesheets/archivesspace/largetree-dark.scss b/public/app/assets/stylesheets/archivesspace/largetree-dark.scss
new file mode 100644
index 0000000000..4acbbfe7d8
--- /dev/null
+++ b/public/app/assets/stylesheets/archivesspace/largetree-dark.scss
@@ -0,0 +1,45 @@
+// Note! This file only overrides some colors from
+// public/vendor/assets/stylesheets/archivesspace/largetree.scss,
+// and is not related to the frontend use of largetree.less.
+
+@media (prefers-color-scheme: dark) {
+  .largetree-container {
+    background-color: var(--primary-bg-color);
+
+    button.expandme {
+      background: none;
+      color: var(--primary-text-color);
+    }
+
+    .current {
+      outline: 1px solid var(--primary-color);
+
+      td,
+      .table-cell {
+        background-color: var(--dark-against-shade);
+      }
+    }
+
+    .indentor {
+      background-color: var(--tertiary-bg-color);
+      background-image: repeating-linear-gradient(
+        90deg,
+        transparent,
+        transparent 23px,
+        var(--primary-bg-color) 24px
+      );
+    }
+
+    .table.root {
+      div.table-row {
+        background-color: var(--primary-bg-color);
+      }
+      div.table-row:nth-of-type(odd) {
+        background-color: var(--secondary-bg-color);
+      }
+      div.table-row:first-child {
+        background-color: var(--tertiary-bg-color);
+      }
+    }
+  }
+}
diff --git a/public/app/assets/stylesheets/archivesspace/record-type-badge.scss b/public/app/assets/stylesheets/archivesspace/record-type-badge.scss
index 34cdec035d..1dd4f19a5a 100644
--- a/public/app/assets/stylesheets/archivesspace/record-type-badge.scss
+++ b/public/app/assets/stylesheets/archivesspace/record-type-badge.scss
@@ -19,33 +19,33 @@
 }
 
 .record-type-badge.resource {
-  @include record-type-badge-colored($collection-color);
+  @include record-type-badge-colored(var(--collection-color));
 }
 
 .record-type-badge.archival_object {
-  @include record-type-badge-colored($archival-object-color);
+  @include record-type-badge-colored(var(--archival-object-color));
 }
 
 .record-type-badge.agent {
-  @include record-type-badge-colored($agent-color);
+  @include record-type-badge-colored(var(--agent-color));
 }
 
 .record-type-badge.accession {
-  @include record-type-badge-colored($accession-color);
+  @include record-type-badge-colored(var(--accession-color));
 }
 
 .record-type-badge.classification {
-  @include record-type-badge-colored($classification-color);
+  @include record-type-badge-colored(var(--classification-color));
 }
 
 .record-type-badge.digital_object {
-  @include record-type-badge-colored($digital-object-color);
+  @include record-type-badge-colored(var(--digital-object-color));
 }
 
 .record-type-badge.repository {
-  @include record-type-badge-colored($repository-color);
+  @include record-type-badge-colored(var(--repository-color));
 }
 
 .record-type-badge.subject {
-  @include record-type-badge-colored($subject-color);
+  @include record-type-badge-colored(var(--subject-color));
 }
diff --git a/public/app/assets/stylesheets/archivesspace/variables.scss b/public/app/assets/stylesheets/archivesspace/variables.scss
index 0dd063798f..e19e5ee3d0 100644
--- a/public/app/assets/stylesheets/archivesspace/variables.scss
+++ b/public/app/assets/stylesheets/archivesspace/variables.scss
@@ -2,8 +2,8 @@ $sans-font: 'PT Sans', 'Helvetica Neue', helvetica, arial, sans-serif;
 $serif-font: 'Roboto Slab', serif;
 $font-family-serif: $serif-font;
 
-$text-color: $darkest;
-$input-color-placeholder: #767676;
+$text-color: #00171f; // Bootstrap scss override
+$input-color-placeholder: #767676; // Bootstrap Sass override
 
 $fi-path: 'foundation-icon-fonts';
 
diff --git a/public/app/views/shared/_footer.html.erb b/public/app/views/shared/_footer.html.erb
index 5d2d24dc84..19e9d7d99f 100644
--- a/public/app/views/shared/_footer.html.erb
+++ b/public/app/views/shared/_footer.html.erb
@@ -1,4 +1,4 @@
-<div class="container-fluid panel-footer">
+<footer class="container-fluid panel-footer">
   <div class="row">
      <div class="col-md-12">
        <p class="footer-items"><a href="<%= AppConfig[:frontend_proxy_url] %>">Staff Interface</a>
@@ -7,4 +7,4 @@
          | <% if AppConfig[:feedback_url] && !AppConfig[:feedback_url].blank? %><a id='aspaceFeedbackLink' href='<%= AppConfig[:feedback_url]%>' target='_blank'>Send Feedback or Report a Problem</a><% end %></p>
      </div>
   </div>
-</div>
+</footer>
diff --git a/public/vendor/assets/stylesheets/bootstrap-dark/bootstrap-dark.css b/public/vendor/assets/stylesheets/bootstrap-dark/bootstrap-dark.css
new file mode 100644
index 0000000000..8c3482b840
--- /dev/null
+++ b/public/vendor/assets/stylesheets/bootstrap-dark/bootstrap-dark.css
@@ -0,0 +1,2124 @@
+@charset "UTF-8";
+/*!
+ * Bootstrap v4.6.0 (https://getbootstrap.com/)
+ * Copyright 2011-2021 The Bootstrap Authors
+ * Copyright 2011-2021 Twitter, Inc.
+ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
+ *
+ * Bootstrap-Dark (https://vinorodrigues.github.io/bootstrap-dark/)
+ * Copyright 2020 Vino Rodrigues
+ * This version is a dual color theme, with the default light mode and the dark
+ * elements optioned in by a `prefers-color-scheme: dark` media query
+ */
+
+/*!
+ * ⚠️ This copy of Bootstrap-Dark v4.6.1. has been edited ⚠️
+ * - everything outside the main dark media query has been removed:
+ *   https://github.com/vinorodrigues/bootstrap-dark/blob/7667bbedcf9851a1f9d93be6b7542c1735c00dd7/scss/bootstrap-dark.scss#L56
+ * - custom properties have been disabled and prefixed with 'bsd-' 
+ *   (they aren't used here and are only included for extending)
+ */
+@media (prefers-color-scheme: dark) {
+  /* :root {
+    color-scheme: dark;
+    --bsd-blue: #375a7f;
+    --bsd-indigo: #6610f2;
+    --bsd-purple: #654ea3;
+    --bsd-pink: #e83e8c;
+    --bsd-red: #e74c3c;
+    --bsd-orange: #fd7e14;
+    --bsd-yellow: #f39c12;
+    --bsd-green: #00bc8c;
+    --bsd-teal: #45b5aa;
+    --bsd-cyan: #17a2b8;
+    --bsd-white: #fafafa;
+    --bsd-gray: #7e7e7e;
+    --bsd-gray-dark: #121212;
+    --bsd-primary: #375a7f;
+    --bsd-secondary: #626262;
+    --bsd-success: #00bc8c;
+    --bsd-info: #17a2b8;
+    --bsd-warning: #f39c12;
+    --bsd-danger: #e74c3c;
+    --bsd-light: #7e7e7e;
+    --bsd-dark: #3b3b3b;
+  } */
+
+  body {
+    color: #e1e1e1;
+    background-color: #222222;
+  }
+
+  a {
+    color: #5080b3;
+    background-color: transparent;
+  }
+  a:hover {
+    color: #85a7ca;
+  }
+
+  caption {
+    color: #626262;
+  }
+
+  hr {
+    border-top: 1px solid rgba(250, 250, 250, 0.1);
+  }
+
+  mark,
+.mark {
+    background-color: rgba(243, 156, 18, 0.3);
+  }
+
+  .img-thumbnail {
+    background-color: #222222;
+    border: 1px solid #515151;
+  }
+
+  .figure-caption {
+    color: #9e9e9e;
+  }
+
+  code {
+    color: #45b5aa;
+  }
+  a > code {
+    color: inherit;
+  }
+
+  kbd {
+    color: #e1e1e1;
+    background-color: #3b3b3b;
+  }
+  pre {
+    color: #e1e1e1;
+  }
+  pre code {
+    color: inherit;
+  }
+
+  .table {
+    color: #e1e1e1;
+  }
+  .table th,
+.table td {
+    border-top: 1px solid #495057;
+  }
+  .table thead th {
+    border-bottom: 2px solid #495057;
+  }
+  .table tbody + tbody {
+    border-top: 2px solid #495057;
+  }
+
+  .table-bordered {
+    border: 1px solid #495057;
+  }
+  .table-bordered th,
+.table-bordered td {
+    border: 1px solid #495057;
+  }
+
+  .table-striped tbody tr:nth-of-type(odd) {
+    background-color: rgba(250, 250, 250, 0.05);
+  }
+
+  .table-hover tbody tr:hover {
+    color: #e1e1e1;
+    background-color: rgba(250, 250, 250, 0.075);
+  }
+
+  .table-primary,
+.table-primary > th,
+.table-primary > td {
+    background-color: #1c2530;
+  }
+  .table-primary th,
+.table-primary td,
+.table-primary thead th,
+.table-primary tbody + tbody {
+    border-color: #25374a;
+  }
+
+  .table-hover .table-primary:hover {
+    background-color: #131920;
+  }
+  .table-hover .table-primary:hover > td,
+.table-hover .table-primary:hover > th {
+    background-color: #131920;
+  }
+
+  .table-secondary,
+.table-secondary > th,
+.table-secondary > td {
+    background-color: #282828;
+  }
+  .table-secondary th,
+.table-secondary td,
+.table-secondary thead th,
+.table-secondary tbody + tbody {
+    border-color: #3b3b3b;
+  }
+
+  .table-hover .table-secondary:hover {
+    background-color: #1b1b1b;
+  }
+  .table-hover .table-secondary:hover > td,
+.table-hover .table-secondary:hover > th {
+    background-color: #1b1b1b;
+  }
+
+  .table-success,
+.table-success > th,
+.table-success > td {
+    background-color: #0c4133;
+  }
+  .table-success th,
+.table-success td,
+.table-success thead th,
+.table-success tbody + tbody {
+    border-color: #086a51;
+  }
+
+  .table-hover .table-success:hover {
+    background-color: #082b22;
+  }
+  .table-hover .table-success:hover > td,
+.table-hover .table-success:hover > th {
+    background-color: #082b22;
+  }
+
+  .table-info,
+.table-info > th,
+.table-info > td {
+    background-color: #133a40;
+  }
+  .table-info th,
+.table-info td,
+.table-info thead th,
+.table-info tbody + tbody {
+    border-color: #145c68;
+  }
+
+  .table-hover .table-info:hover {
+    background-color: #0d282c;
+  }
+  .table-hover .table-info:hover > td,
+.table-hover .table-info:hover > th {
+    background-color: #0d282c;
+  }
+
+  .table-warning,
+.table-warning > th,
+.table-warning > td {
+    background-color: #503811;
+  }
+  .table-warning th,
+.table-warning td,
+.table-warning thead th,
+.table-warning tbody + tbody {
+    border-color: #875912;
+  }
+
+  .table-hover .table-warning:hover {
+    background-color: #3b290d;
+  }
+  .table-hover .table-warning:hover > td,
+.table-hover .table-warning:hover > th {
+    background-color: #3b290d;
+  }
+
+  .table-danger,
+.table-danger > th,
+.table-danger > td {
+    background-color: #4d221d;
+  }
+  .table-danger th,
+.table-danger td,
+.table-danger thead th,
+.table-danger tbody + tbody {
+    border-color: #803027;
+  }
+
+  .table-hover .table-danger:hover {
+    background-color: #3a1a16;
+  }
+  .table-hover .table-danger:hover > td,
+.table-hover .table-danger:hover > th {
+    background-color: #3a1a16;
+  }
+
+  .table-light,
+.table-light > th,
+.table-light > td {
+    background-color: #303030;
+  }
+  .table-light th,
+.table-light td,
+.table-light thead th,
+.table-light tbody + tbody {
+    border-color: #4a4a4a;
+  }
+
+  .table-hover .table-light:hover {
+    background-color: #232323;
+  }
+  .table-hover .table-light:hover > td,
+.table-hover .table-light:hover > th {
+    background-color: #232323;
+  }
+
+  .table-dark,
+.table-dark > th,
+.table-dark > td {
+    background-color: #1d1d1d;
+  }
+  .table-dark th,
+.table-dark td,
+.table-dark thead th,
+.table-dark tbody + tbody {
+    border-color: #272727;
+  }
+
+  .table-hover .table-dark:hover {
+    background-color: #101010;
+  }
+  .table-hover .table-dark:hover > td,
+.table-hover .table-dark:hover > th {
+    background-color: #101010;
+  }
+
+  .table-active,
+.table-active > th,
+.table-active > td {
+    background-color: rgba(250, 250, 250, 0.075);
+  }
+
+  .table-hover .table-active:hover {
+    background-color: rgba(237, 237, 237, 0.075);
+  }
+  .table-hover .table-active:hover > td,
+.table-hover .table-active:hover > th {
+    background-color: rgba(237, 237, 237, 0.075);
+  }
+
+  .table .thead-dark th {
+    color: #fafafa;
+    background-color: #ced4da;
+    border-color: #23272b;
+  }
+  .table .thead-light th {
+    color: #b1b1b1;
+    background-color: #3b3b3b;
+    border-color: #495057;
+  }
+
+  .table-dark {
+    color: #fafafa;
+    background-color: #ced4da;
+  }
+  .table-dark th,
+.table-dark td,
+.table-dark thead th {
+    border-color: #23272b;
+  }
+  .table-dark.table-striped tbody tr:nth-of-type(odd) {
+    background-color: rgba(17, 17, 17, 0.05);
+  }
+  .table-dark.table-hover tbody tr:hover {
+    color: #fafafa;
+    background-color: rgba(17, 17, 17, 0.075);
+  }
+
+  .form-control {
+    color: #b1b1b1;
+    background-color: #3b3b3b;
+    border: 1px solid #515151;
+  }
+  .form-control:focus {
+    color: #b1b1b1;
+    background-color: #3b3b3b;
+    border-color: #3f6791;
+    box-shadow: 0 0 0 0.2rem rgba(55, 90, 127, 0.25);
+  }
+  .form-control:disabled, .form-control[readonly] {
+    background-color: #222222;
+  }
+
+  select.form-control {
+    -webkit-appearance: caret;
+  }
+  select.form-control:-moz-focusring {
+    text-shadow: 0 0 0 #b1b1b1;
+  }
+  select.form-control:focus::-ms-value {
+    color: #b1b1b1;
+    background-color: #3b3b3b;
+  }
+
+  .form-control-plaintext {
+    color: #e1e1e1;
+  }
+
+  .form-check-input[disabled] ~ .form-check-label, .form-check-input:disabled ~ .form-check-label {
+    color: #626262;
+  }
+
+  .valid-feedback {
+    display: none;
+    width: 100%;
+    margin-top: 0.25rem;
+    font-size: 80%;
+    color: #00bc8c;
+  }
+
+  .valid-tooltip {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    z-index: 5;
+    display: none;
+    max-width: 100%;
+    padding: 0.25rem 0.5rem;
+    margin-top: 0.1rem;
+    font-size: 0.875rem;
+    line-height: 1.5;
+    color: #fff;
+    background-color: rgba(0, 188, 140, 0.9);
+    border-radius: 0.25rem;
+  }
+  .form-row > .col > .valid-tooltip, .form-row > [class*=col-] > .valid-tooltip {
+    left: 5px;
+  }
+
+  .was-validated :valid ~ .valid-feedback,
+.was-validated :valid ~ .valid-tooltip,
+.is-valid ~ .valid-feedback,
+.is-valid ~ .valid-tooltip {
+    display: block;
+  }
+
+  .was-validated .form-control:valid, .form-control.is-valid {
+    border-color: #00bc8c;
+    padding-right: calc(1.5em + 0.75rem) !important;
+    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%2300bc8c' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
+    background-repeat: no-repeat;
+    background-position: right calc(0.375em + 0.1875rem) center;
+    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
+  }
+  .was-validated .form-control:valid:focus, .form-control.is-valid:focus {
+    border-color: #00bc8c;
+    box-shadow: 0 0 0 0.2rem rgba(0, 188, 140, 0.25);
+  }
+
+  .was-validated select.form-control:valid, select.form-control.is-valid {
+    padding-right: 3rem !important;
+    background-position: right 1.5rem center;
+  }
+
+  .was-validated textarea.form-control:valid, textarea.form-control.is-valid {
+    padding-right: calc(1.5em + 0.75rem);
+    background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem);
+  }
+
+  .was-validated .custom-select:valid, .custom-select.is-valid {
+    border-color: #00bc8c;
+    padding-right: calc(0.75em + 2.3125rem) !important;
+    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") right 0.75rem center/8px 10px no-repeat, #fff url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%2300bc8c' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e") center right 1.75rem/calc(0.75em + 0.375rem) calc(0.75em + 0.375rem) no-repeat;
+  }
+  .was-validated .custom-select:valid:focus, .custom-select.is-valid:focus {
+    border-color: #00bc8c;
+    box-shadow: 0 0 0 0.2rem rgba(0, 188, 140, 0.25);
+  }
+
+  .was-validated .form-check-input:valid ~ .form-check-label, .form-check-input.is-valid ~ .form-check-label {
+    color: #00bc8c;
+  }
+  .was-validated .form-check-input:valid ~ .valid-feedback,
+.was-validated .form-check-input:valid ~ .valid-tooltip, .form-check-input.is-valid ~ .valid-feedback,
+.form-check-input.is-valid ~ .valid-tooltip {
+    display: block;
+  }
+
+  .was-validated .custom-control-input:valid ~ .custom-control-label, .custom-control-input.is-valid ~ .custom-control-label {
+    color: #00bc8c;
+  }
+  .was-validated .custom-control-input:valid ~ .custom-control-label::before, .custom-control-input.is-valid ~ .custom-control-label::before {
+    border-color: #00bc8c;
+  }
+  .was-validated .custom-control-input:valid:checked ~ .custom-control-label::before, .custom-control-input.is-valid:checked ~ .custom-control-label::before {
+    border-color: #00efb2;
+    background-color: #00efb2;
+  }
+  .was-validated .custom-control-input:valid:focus ~ .custom-control-label::before, .custom-control-input.is-valid:focus ~ .custom-control-label::before {
+    box-shadow: 0 0 0 0.2rem rgba(0, 188, 140, 0.25);
+  }
+  .was-validated .custom-control-input:valid:focus:not(:checked) ~ .custom-control-label::before, .custom-control-input.is-valid:focus:not(:checked) ~ .custom-control-label::before {
+    border-color: #00bc8c;
+  }
+
+  .was-validated .custom-file-input:valid ~ .custom-file-label, .custom-file-input.is-valid ~ .custom-file-label {
+    border-color: #00bc8c;
+  }
+  .was-validated .custom-file-input:valid:focus ~ .custom-file-label, .custom-file-input.is-valid:focus ~ .custom-file-label {
+    border-color: #00bc8c;
+    box-shadow: 0 0 0 0.2rem rgba(0, 188, 140, 0.25);
+  }
+
+  .invalid-feedback {
+    display: none;
+    width: 100%;
+    margin-top: 0.25rem;
+    font-size: 80%;
+    color: #e74c3c;
+  }
+
+  .invalid-tooltip {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    z-index: 5;
+    display: none;
+    max-width: 100%;
+    padding: 0.25rem 0.5rem;
+    margin-top: 0.1rem;
+    font-size: 0.875rem;
+    line-height: 1.5;
+    color: #fff;
+    background-color: rgba(231, 76, 60, 0.9);
+    border-radius: 0.25rem;
+  }
+  .form-row > .col > .invalid-tooltip, .form-row > [class*=col-] > .invalid-tooltip {
+    left: 5px;
+  }
+
+  .was-validated :invalid ~ .invalid-feedback,
+.was-validated :invalid ~ .invalid-tooltip,
+.is-invalid ~ .invalid-feedback,
+.is-invalid ~ .invalid-tooltip {
+    display: block;
+  }
+
+  .was-validated .form-control:invalid, .form-control.is-invalid {
+    border-color: #e74c3c;
+    padding-right: calc(1.5em + 0.75rem) !important;
+    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23e74c3c' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
+    background-repeat: no-repeat;
+    background-position: right calc(0.375em + 0.1875rem) center;
+    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
+  }
+  .was-validated .form-control:invalid:focus, .form-control.is-invalid:focus {
+    border-color: #e74c3c;
+    box-shadow: 0 0 0 0.2rem rgba(231, 76, 60, 0.25);
+  }
+
+  .was-validated select.form-control:invalid, select.form-control.is-invalid {
+    padding-right: 3rem !important;
+    background-position: right 1.5rem center;
+  }
+
+  .was-validated textarea.form-control:invalid, textarea.form-control.is-invalid {
+    padding-right: calc(1.5em + 0.75rem);
+    background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem);
+  }
+
+  .was-validated .custom-select:invalid, .custom-select.is-invalid {
+    border-color: #e74c3c;
+    padding-right: calc(0.75em + 2.3125rem) !important;
+    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") right 0.75rem center/8px 10px no-repeat, #fff url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23e74c3c' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e") center right 1.75rem/calc(0.75em + 0.375rem) calc(0.75em + 0.375rem) no-repeat;
+  }
+  .was-validated .custom-select:invalid:focus, .custom-select.is-invalid:focus {
+    border-color: #e74c3c;
+    box-shadow: 0 0 0 0.2rem rgba(231, 76, 60, 0.25);
+  }
+
+  .was-validated .form-check-input:invalid ~ .form-check-label, .form-check-input.is-invalid ~ .form-check-label {
+    color: #e74c3c;
+  }
+  .was-validated .form-check-input:invalid ~ .invalid-feedback,
+.was-validated .form-check-input:invalid ~ .invalid-tooltip, .form-check-input.is-invalid ~ .invalid-feedback,
+.form-check-input.is-invalid ~ .invalid-tooltip {
+    display: block;
+  }
+
+  .was-validated .custom-control-input:invalid ~ .custom-control-label, .custom-control-input.is-invalid ~ .custom-control-label {
+    color: #e74c3c;
+  }
+  .was-validated .custom-control-input:invalid ~ .custom-control-label::before, .custom-control-input.is-invalid ~ .custom-control-label::before {
+    border-color: #e74c3c;
+  }
+  .was-validated .custom-control-input:invalid:checked ~ .custom-control-label::before, .custom-control-input.is-invalid:checked ~ .custom-control-label::before {
+    border-color: #ed7669;
+    background-color: #ed7669;
+  }
+  .was-validated .custom-control-input:invalid:focus ~ .custom-control-label::before, .custom-control-input.is-invalid:focus ~ .custom-control-label::before {
+    box-shadow: 0 0 0 0.2rem rgba(231, 76, 60, 0.25);
+  }
+  .was-validated .custom-control-input:invalid:focus:not(:checked) ~ .custom-control-label::before, .custom-control-input.is-invalid:focus:not(:checked) ~ .custom-control-label::before {
+    border-color: #e74c3c;
+  }
+
+  .was-validated .custom-file-input:invalid ~ .custom-file-label, .custom-file-input.is-invalid ~ .custom-file-label {
+    border-color: #e74c3c;
+  }
+  .was-validated .custom-file-input:invalid:focus ~ .custom-file-label, .custom-file-input.is-invalid:focus ~ .custom-file-label {
+    border-color: #e74c3c;
+    box-shadow: 0 0 0 0.2rem rgba(231, 76, 60, 0.25);
+  }
+
+  .btn {
+    color: #e1e1e1;
+  }
+  .btn:hover {
+    color: #e1e1e1;
+  }
+  .btn:focus, .btn.focus {
+    box-shadow: 0 0 0 0.2rem rgba(55, 90, 127, 0.25);
+  }
+  .btn.disabled, .btn:disabled {
+    opacity: 0.65;
+  }
+  .btn-primary {
+    color: #fff;
+    background-color: #375a7f;
+    border-color: #375a7f;
+  }
+  .btn-primary:hover {
+    color: #fff;
+    background-color: #2b4764;
+    border-color: #28415b;
+  }
+  .btn-primary:focus, .btn-primary.focus {
+    color: #fff;
+    background-color: #2b4764;
+    border-color: #28415b;
+    box-shadow: 0 0 0 0.2rem rgba(85, 115, 146, 0.5);
+  }
+  .btn-primary.disabled, .btn-primary:disabled {
+    color: #fff;
+    background-color: #375a7f;
+    border-color: #375a7f;
+  }
+  .btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active, .show > .btn-primary.dropdown-toggle {
+    color: #fff;
+    background-color: #28415b;
+    border-color: #243a53;
+  }
+  .btn-primary:not(:disabled):not(.disabled):active:focus, .btn-primary:not(:disabled):not(.disabled).active:focus, .show > .btn-primary.dropdown-toggle:focus {
+    box-shadow: 0 0 0 0.2rem rgba(85, 115, 146, 0.5);
+  }
+
+  .btn-secondary {
+    color: #fff;
+    background-color: #626262;
+    border-color: #626262;
+  }
+  .btn-secondary:hover {
+    color: #fff;
+    background-color: #4f4f4f;
+    border-color: #494949;
+  }
+  .btn-secondary:focus, .btn-secondary.focus {
+    color: #fff;
+    background-color: #4f4f4f;
+    border-color: #494949;
+    box-shadow: 0 0 0 0.2rem rgba(122, 122, 122, 0.5);
+  }
+  .btn-secondary.disabled, .btn-secondary:disabled {
+    color: #fff;
+    background-color: #626262;
+    border-color: #626262;
+  }
+  .btn-secondary:not(:disabled):not(.disabled):active, .btn-secondary:not(:disabled):not(.disabled).active, .show > .btn-secondary.dropdown-toggle {
+    color: #fff;
+    background-color: #494949;
+    border-color: #424242;
+  }
+  .btn-secondary:not(:disabled):not(.disabled):active:focus, .btn-secondary:not(:disabled):not(.disabled).active:focus, .show > .btn-secondary.dropdown-toggle:focus {
+    box-shadow: 0 0 0 0.2rem rgba(122, 122, 122, 0.5);
+  }
+
+  .btn-success {
+    color: #fff;
+    background-color: #00bc8c;
+    border-color: #00bc8c;
+  }
+  .btn-success:hover {
+    color: #fff;
+    background-color: #009670;
+    border-color: #008966;
+  }
+  .btn-success:focus, .btn-success.focus {
+    color: #fff;
+    background-color: #009670;
+    border-color: #008966;
+    box-shadow: 0 0 0 0.2rem rgba(38, 198, 157, 0.5);
+  }
+  .btn-success.disabled, .btn-success:disabled {
+    color: #fff;
+    background-color: #00bc8c;
+    border-color: #00bc8c;
+  }
+  .btn-success:not(:disabled):not(.disabled):active, .btn-success:not(:disabled):not(.disabled).active, .show > .btn-success.dropdown-toggle {
+    color: #fff;
+    background-color: #008966;
+    border-color: #007c5d;
+  }
+  .btn-success:not(:disabled):not(.disabled):active:focus, .btn-success:not(:disabled):not(.disabled).active:focus, .show > .btn-success.dropdown-toggle:focus {
+    box-shadow: 0 0 0 0.2rem rgba(38, 198, 157, 0.5);
+  }
+
+  .btn-info {
+    color: #fff;
+    background-color: #17a2b8;
+    border-color: #17a2b8;
+  }
+  .btn-info:hover {
+    color: #fff;
+    background-color: #138496;
+    border-color: #117a8b;
+  }
+  .btn-info:focus, .btn-info.focus {
+    color: #fff;
+    background-color: #138496;
+    border-color: #117a8b;
+    box-shadow: 0 0 0 0.2rem rgba(58, 176, 195, 0.5);
+  }
+  .btn-info.disabled, .btn-info:disabled {
+    color: #fff;
+    background-color: #17a2b8;
+    border-color: #17a2b8;
+  }
+  .btn-info:not(:disabled):not(.disabled):active, .btn-info:not(:disabled):not(.disabled).active, .show > .btn-info.dropdown-toggle {
+    color: #fff;
+    background-color: #117a8b;
+    border-color: #10707f;
+  }
+  .btn-info:not(:disabled):not(.disabled):active:focus, .btn-info:not(:disabled):not(.disabled).active:focus, .show > .btn-info.dropdown-toggle:focus {
+    box-shadow: 0 0 0 0.2rem rgba(58, 176, 195, 0.5);
+  }
+
+  .btn-warning {
+    color: #212529;
+    background-color: #f39c12;
+    border-color: #f39c12;
+  }
+  .btn-warning:hover {
+    color: #fff;
+    background-color: #d4860b;
+    border-color: #c87f0a;
+  }
+  .btn-warning:focus, .btn-warning.focus {
+    color: #fff;
+    background-color: #d4860b;
+    border-color: #c87f0a;
+    box-shadow: 0 0 0 0.2rem rgba(212, 138, 21, 0.5);
+  }
+  .btn-warning.disabled, .btn-warning:disabled {
+    color: #212529;
+    background-color: #f39c12;
+    border-color: #f39c12;
+  }
+  .btn-warning:not(:disabled):not(.disabled):active, .btn-warning:not(:disabled):not(.disabled).active, .show > .btn-warning.dropdown-toggle {
+    color: #fff;
+    background-color: #c87f0a;
+    border-color: #bc770a;
+  }
+  .btn-warning:not(:disabled):not(.disabled):active:focus, .btn-warning:not(:disabled):not(.disabled).active:focus, .show > .btn-warning.dropdown-toggle:focus {
+    box-shadow: 0 0 0 0.2rem rgba(212, 138, 21, 0.5);
+  }
+
+  .btn-danger {
+    color: #fff;
+    background-color: #e74c3c;
+    border-color: #e74c3c;
+  }
+  .btn-danger:hover {
+    color: #fff;
+    background-color: #e12e1c;
+    border-color: #d62c1a;
+  }
+  .btn-danger:focus, .btn-danger.focus {
+    color: #fff;
+    background-color: #e12e1c;
+    border-color: #d62c1a;
+    box-shadow: 0 0 0 0.2rem rgba(235, 103, 89, 0.5);
+  }
+  .btn-danger.disabled, .btn-danger:disabled {
+    color: #fff;
+    background-color: #e74c3c;
+    border-color: #e74c3c;
+  }
+  .btn-danger:not(:disabled):not(.disabled):active, .btn-danger:not(:disabled):not(.disabled).active, .show > .btn-danger.dropdown-toggle {
+    color: #fff;
+    background-color: #d62c1a;
+    border-color: #ca2a19;
+  }
+  .btn-danger:not(:disabled):not(.disabled):active:focus, .btn-danger:not(:disabled):not(.disabled).active:focus, .show > .btn-danger.dropdown-toggle:focus {
+    box-shadow: 0 0 0 0.2rem rgba(235, 103, 89, 0.5);
+  }
+
+  .btn-light {
+    color: #fff;
+    background-color: #7e7e7e;
+    border-color: #7e7e7e;
+  }
+  .btn-light:hover {
+    color: #fff;
+    background-color: #6b6b6b;
+    border-color: #656565;
+  }
+  .btn-light:focus, .btn-light.focus {
+    color: #fff;
+    background-color: #6b6b6b;
+    border-color: #656565;
+    box-shadow: 0 0 0 0.2rem rgba(145, 145, 145, 0.5);
+  }
+  .btn-light.disabled, .btn-light:disabled {
+    color: #fff;
+    background-color: #7e7e7e;
+    border-color: #7e7e7e;
+  }
+  .btn-light:not(:disabled):not(.disabled):active, .btn-light:not(:disabled):not(.disabled).active, .show > .btn-light.dropdown-toggle {
+    color: #fff;
+    background-color: #656565;
+    border-color: #5e5e5e;
+  }
+  .btn-light:not(:disabled):not(.disabled):active:focus, .btn-light:not(:disabled):not(.disabled).active:focus, .show > .btn-light.dropdown-toggle:focus {
+    box-shadow: 0 0 0 0.2rem rgba(145, 145, 145, 0.5);
+  }
+
+  .btn-dark {
+    color: #fff;
+    background-color: #3b3b3b;
+    border-color: #3b3b3b;
+  }
+  .btn-dark:hover {
+    color: #fff;
+    background-color: #282828;
+    border-color: #222222;
+  }
+  .btn-dark:focus, .btn-dark.focus {
+    color: #fff;
+    background-color: #282828;
+    border-color: #222222;
+    box-shadow: 0 0 0 0.2rem rgba(88, 88, 88, 0.5);
+  }
+  .btn-dark.disabled, .btn-dark:disabled {
+    color: #fff;
+    background-color: #3b3b3b;
+    border-color: #3b3b3b;
+  }
+  .btn-dark:not(:disabled):not(.disabled):active, .btn-dark:not(:disabled):not(.disabled).active, .show > .btn-dark.dropdown-toggle {
+    color: #fff;
+    background-color: #222222;
+    border-color: #1b1b1b;
+  }
+  .btn-dark:not(:disabled):not(.disabled):active:focus, .btn-dark:not(:disabled):not(.disabled).active:focus, .show > .btn-dark.dropdown-toggle:focus {
+    box-shadow: 0 0 0 0.2rem rgba(88, 88, 88, 0.5);
+  }
+
+  .btn-outline-primary {
+    color: #375a7f;
+    border-color: #375a7f;
+  }
+  .btn-outline-primary:hover {
+    color: #fff;
+    background-color: #375a7f;
+    border-color: #375a7f;
+  }
+  .btn-outline-primary:focus, .btn-outline-primary.focus {
+    box-shadow: 0 0 0 0.2rem rgba(55, 90, 127, 0.5);
+  }
+  .btn-outline-primary.disabled, .btn-outline-primary:disabled {
+    color: #375a7f;
+    background-color: transparent;
+  }
+  .btn-outline-primary:not(:disabled):not(.disabled):active, .btn-outline-primary:not(:disabled):not(.disabled).active, .show > .btn-outline-primary.dropdown-toggle {
+    color: #fff;
+    background-color: #375a7f;
+    border-color: #375a7f;
+  }
+  .btn-outline-primary:not(:disabled):not(.disabled):active:focus, .btn-outline-primary:not(:disabled):not(.disabled).active:focus, .show > .btn-outline-primary.dropdown-toggle:focus {
+    box-shadow: 0 0 0 0.2rem rgba(55, 90, 127, 0.5);
+  }
+
+  .btn-outline-secondary {
+    color: #626262;
+    border-color: #626262;
+  }
+  .btn-outline-secondary:hover {
+    color: #fff;
+    background-color: #626262;
+    border-color: #626262;
+  }
+  .btn-outline-secondary:focus, .btn-outline-secondary.focus {
+    box-shadow: 0 0 0 0.2rem rgba(98, 98, 98, 0.5);
+  }
+  .btn-outline-secondary.disabled, .btn-outline-secondary:disabled {
+    color: #626262;
+    background-color: transparent;
+  }
+  .btn-outline-secondary:not(:disabled):not(.disabled):active, .btn-outline-secondary:not(:disabled):not(.disabled).active, .show > .btn-outline-secondary.dropdown-toggle {
+    color: #fff;
+    background-color: #626262;
+    border-color: #626262;
+  }
+  .btn-outline-secondary:not(:disabled):not(.disabled):active:focus, .btn-outline-secondary:not(:disabled):not(.disabled).active:focus, .show > .btn-outline-secondary.dropdown-toggle:focus {
+    box-shadow: 0 0 0 0.2rem rgba(98, 98, 98, 0.5);
+  }
+
+  .btn-outline-success {
+    color: #00bc8c;
+    border-color: #00bc8c;
+  }
+  .btn-outline-success:hover {
+    color: #fff;
+    background-color: #00bc8c;
+    border-color: #00bc8c;
+  }
+  .btn-outline-success:focus, .btn-outline-success.focus {
+    box-shadow: 0 0 0 0.2rem rgba(0, 188, 140, 0.5);
+  }
+  .btn-outline-success.disabled, .btn-outline-success:disabled {
+    color: #00bc8c;
+    background-color: transparent;
+  }
+  .btn-outline-success:not(:disabled):not(.disabled):active, .btn-outline-success:not(:disabled):not(.disabled).active, .show > .btn-outline-success.dropdown-toggle {
+    color: #fff;
+    background-color: #00bc8c;
+    border-color: #00bc8c;
+  }
+  .btn-outline-success:not(:disabled):not(.disabled):active:focus, .btn-outline-success:not(:disabled):not(.disabled).active:focus, .show > .btn-outline-success.dropdown-toggle:focus {
+    box-shadow: 0 0 0 0.2rem rgba(0, 188, 140, 0.5);
+  }
+
+  .btn-outline-info {
+    color: #17a2b8;
+    border-color: #17a2b8;
+  }
+  .btn-outline-info:hover {
+    color: #fff;
+    background-color: #17a2b8;
+    border-color: #17a2b8;
+  }
+  .btn-outline-info:focus, .btn-outline-info.focus {
+    box-shadow: 0 0 0 0.2rem rgba(23, 162, 184, 0.5);
+  }
+  .btn-outline-info.disabled, .btn-outline-info:disabled {
+    color: #17a2b8;
+    background-color: transparent;
+  }
+  .btn-outline-info:not(:disabled):not(.disabled):active, .btn-outline-info:not(:disabled):not(.disabled).active, .show > .btn-outline-info.dropdown-toggle {
+    color: #fff;
+    background-color: #17a2b8;
+    border-color: #17a2b8;
+  }
+  .btn-outline-info:not(:disabled):not(.disabled):active:focus, .btn-outline-info:not(:disabled):not(.disabled).active:focus, .show > .btn-outline-info.dropdown-toggle:focus {
+    box-shadow: 0 0 0 0.2rem rgba(23, 162, 184, 0.5);
+  }
+
+  .btn-outline-warning {
+    color: #f39c12;
+    border-color: #f39c12;
+  }
+  .btn-outline-warning:hover {
+    color: #212529;
+    background-color: #f39c12;
+    border-color: #f39c12;
+  }
+  .btn-outline-warning:focus, .btn-outline-warning.focus {
+    box-shadow: 0 0 0 0.2rem rgba(243, 156, 18, 0.5);
+  }
+  .btn-outline-warning.disabled, .btn-outline-warning:disabled {
+    color: #f39c12;
+    background-color: transparent;
+  }
+  .btn-outline-warning:not(:disabled):not(.disabled):active, .btn-outline-warning:not(:disabled):not(.disabled).active, .show > .btn-outline-warning.dropdown-toggle {
+    color: #212529;
+    background-color: #f39c12;
+    border-color: #f39c12;
+  }
+  .btn-outline-warning:not(:disabled):not(.disabled):active:focus, .btn-outline-warning:not(:disabled):not(.disabled).active:focus, .show > .btn-outline-warning.dropdown-toggle:focus {
+    box-shadow: 0 0 0 0.2rem rgba(243, 156, 18, 0.5);
+  }
+
+  .btn-outline-danger {
+    color: #e74c3c;
+    border-color: #e74c3c;
+  }
+  .btn-outline-danger:hover {
+    color: #fff;
+    background-color: #e74c3c;
+    border-color: #e74c3c;
+  }
+  .btn-outline-danger:focus, .btn-outline-danger.focus {
+    box-shadow: 0 0 0 0.2rem rgba(231, 76, 60, 0.5);
+  }
+  .btn-outline-danger.disabled, .btn-outline-danger:disabled {
+    color: #e74c3c;
+    background-color: transparent;
+  }
+  .btn-outline-danger:not(:disabled):not(.disabled):active, .btn-outline-danger:not(:disabled):not(.disabled).active, .show > .btn-outline-danger.dropdown-toggle {
+    color: #fff;
+    background-color: #e74c3c;
+    border-color: #e74c3c;
+  }
+  .btn-outline-danger:not(:disabled):not(.disabled):active:focus, .btn-outline-danger:not(:disabled):not(.disabled).active:focus, .show > .btn-outline-danger.dropdown-toggle:focus {
+    box-shadow: 0 0 0 0.2rem rgba(231, 76, 60, 0.5);
+  }
+
+  .btn-outline-light {
+    color: #7e7e7e;
+    border-color: #7e7e7e;
+  }
+  .btn-outline-light:hover {
+    color: #fff;
+    background-color: #7e7e7e;
+    border-color: #7e7e7e;
+  }
+  .btn-outline-light:focus, .btn-outline-light.focus {
+    box-shadow: 0 0 0 0.2rem rgba(126, 126, 126, 0.5);
+  }
+  .btn-outline-light.disabled, .btn-outline-light:disabled {
+    color: #7e7e7e;
+    background-color: transparent;
+  }
+  .btn-outline-light:not(:disabled):not(.disabled):active, .btn-outline-light:not(:disabled):not(.disabled).active, .show > .btn-outline-light.dropdown-toggle {
+    color: #fff;
+    background-color: #7e7e7e;
+    border-color: #7e7e7e;
+  }
+  .btn-outline-light:not(:disabled):not(.disabled):active:focus, .btn-outline-light:not(:disabled):not(.disabled).active:focus, .show > .btn-outline-light.dropdown-toggle:focus {
+    box-shadow: 0 0 0 0.2rem rgba(126, 126, 126, 0.5);
+  }
+
+  .btn-outline-dark {
+    color: #3b3b3b;
+    border-color: #3b3b3b;
+  }
+  .btn-outline-dark:hover {
+    color: #fff;
+    background-color: #3b3b3b;
+    border-color: #3b3b3b;
+  }
+  .btn-outline-dark:focus, .btn-outline-dark.focus {
+    box-shadow: 0 0 0 0.2rem rgba(59, 59, 59, 0.5);
+  }
+  .btn-outline-dark.disabled, .btn-outline-dark:disabled {
+    color: #3b3b3b;
+    background-color: transparent;
+  }
+  .btn-outline-dark:not(:disabled):not(.disabled):active, .btn-outline-dark:not(:disabled):not(.disabled).active, .show > .btn-outline-dark.dropdown-toggle {
+    color: #fff;
+    background-color: #3b3b3b;
+    border-color: #3b3b3b;
+  }
+  .btn-outline-dark:not(:disabled):not(.disabled):active:focus, .btn-outline-dark:not(:disabled):not(.disabled).active:focus, .show > .btn-outline-dark.dropdown-toggle:focus {
+    box-shadow: 0 0 0 0.2rem rgba(59, 59, 59, 0.5);
+  }
+
+  .btn-link {
+    color: #5080b3;
+  }
+  .btn-link:hover {
+    color: #85a7ca;
+  }
+  .btn-link:disabled, .btn-link.disabled {
+    color: #6c757d;
+    pointer-events: none;
+  }
+
+  .dropdown-menu {
+    color: #e1e1e1;
+    background-color: #111;
+    border: 1px solid rgba(250, 250, 250, 0.15);
+  }
+
+  .dropdown-divider {
+    height: 0;
+    margin: 0.5rem 0;
+    overflow: hidden;
+    border-top: 1px solid #343a40;
+  }
+
+  .dropdown-item {
+    color: #f8f9fa;
+  }
+  .dropdown-item:hover, .dropdown-item:focus {
+    color: white;
+    background-color: #343a40;
+  }
+  .dropdown-item.active, .dropdown-item:active {
+    color: #fafafa;
+    background-color: #375a7f;
+  }
+  .dropdown-item.disabled, .dropdown-item:disabled {
+    color: #7e7e7e;
+  }
+
+  .dropdown-header {
+    color: #9e9e9e;
+  }
+
+  .dropdown-item-text {
+    color: #f8f9fa;
+  }
+
+  .input-group-text {
+    color: #b1b1b1;
+    background-color: #515151;
+    border: 1px solid #515151;
+  }
+
+  .custom-control-input:checked ~ .custom-control-label::before {
+    color: #fafafa;
+    border-color: #375a7f;
+    background-color: #375a7f;
+  }
+  .custom-control-input:focus ~ .custom-control-label::before {
+    box-shadow: 0 0 0 0.2rem rgba(55, 90, 127, 0.25);
+  }
+  .custom-control-input:focus:not(:checked) ~ .custom-control-label::before {
+    border-color: #3f6791;
+  }
+  .custom-control-input:not(:disabled):active ~ .custom-control-label::before {
+    color: #fafafa;
+    background-color: #97b3d2;
+    border-color: #97b3d2;
+  }
+  .custom-control-input[disabled] ~ .custom-control-label, .custom-control-input:disabled ~ .custom-control-label {
+    color: #5a5a5a;
+  }
+  .custom-control-input[disabled] ~ .custom-control-label::before, .custom-control-input:disabled ~ .custom-control-label::before {
+    background-color: #222222;
+  }
+
+  .custom-control-label::before {
+    background-color: #3b3b3b;
+    border: #7e7e7e solid 1px;
+  }
+
+  .custom-checkbox .custom-control-input:indeterminate ~ .custom-control-label::before {
+    border-color: #375a7f;
+    background-color: #375a7f;
+  }
+  .custom-checkbox .custom-control-input:indeterminate ~ .custom-control-label::after {
+    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'%3e%3cpath stroke='%23fafafa' d='M0 2h4'/%3e%3c/svg%3e");
+  }
+  .custom-checkbox .custom-control-input:disabled:checked ~ .custom-control-label::before {
+    background-color: rgba(55, 90, 127, 0.5);
+  }
+  .custom-checkbox .custom-control-input:disabled:indeterminate ~ .custom-control-label::before {
+    background-color: rgba(55, 90, 127, 0.5);
+  }
+
+  .custom-radio .custom-control-input:checked ~ .custom-control-label::after {
+    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fafafa'/%3e%3c/svg%3e");
+  }
+  .custom-radio .custom-control-input:disabled:checked ~ .custom-control-label::before {
+    background-color: rgba(55, 90, 127, 0.5);
+  }
+
+  .custom-switch .custom-control-label::after {
+    background-color: #7e7e7e;
+  }
+  .custom-switch .custom-control-input:checked ~ .custom-control-label::after {
+    background-color: #3b3b3b;
+  }
+  .custom-switch .custom-control-input:disabled:checked ~ .custom-control-label::before {
+    background-color: rgba(55, 90, 127, 0.5);
+  }
+
+  .custom-select {
+    color: #b1b1b1;
+    background: #3b3b3b url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23cfcfcf' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") right 0.75rem center/8px 10px no-repeat;
+    border: 1px solid #515151;
+  }
+  .custom-select:focus {
+    border-color: #3f6791;
+    box-shadow: 0 0 0 0.2rem rgba(55, 90, 127, 0.25);
+  }
+  .custom-select:focus::-ms-value {
+    color: #b1b1b1;
+    background-color: #3b3b3b;
+  }
+  .custom-select:disabled {
+    color: #9e9e9e;
+    background-color: #3b3b3b;
+  }
+  .custom-select:-moz-focusring {
+    color: transparent;
+    text-shadow: 0 0 0 #b1b1b1;
+  }
+
+  .custom-file-input:focus ~ .custom-file-label {
+    border-color: #3f6791;
+    box-shadow: 0 0 0 0.2rem rgba(55, 90, 127, 0.25);
+  }
+  .custom-file-input[disabled] ~ .custom-file-label, .custom-file-input:disabled ~ .custom-file-label {
+    background-color: #222222;
+  }
+
+  .custom-file-label {
+    color: #b1b1b1;
+    background-color: #3b3b3b;
+    border: 1px solid #515151;
+  }
+  .custom-file-label::after {
+    color: #b1b1b1;
+    background-color: #515151;
+  }
+
+  .custom-range:focus {
+    outline: none;
+  }
+  .custom-range:focus::-webkit-slider-thumb {
+    box-shadow: 0 0 0 1px #e1e1e1, 0 0 0 0.2rem rgba(55, 90, 127, 0.25);
+  }
+  .custom-range:focus::-moz-range-thumb {
+    box-shadow: 0 0 0 1px #e1e1e1, 0 0 0 0.2rem rgba(55, 90, 127, 0.25);
+  }
+  .custom-range:focus::-ms-thumb {
+    box-shadow: 0 0 0 1px #e1e1e1, 0 0 0 0.2rem rgba(55, 90, 127, 0.25);
+  }
+  .custom-range::-webkit-slider-thumb {
+    background-color: #375a7f;
+    border: 0;
+  }
+  .custom-range::-webkit-slider-thumb:active {
+    background-color: #97b3d2;
+  }
+  .custom-range::-webkit-slider-runnable-track {
+    background-color: #515151;
+  }
+  .custom-range::-moz-range-thumb {
+    background-color: #375a7f;
+    border: 0;
+  }
+  .custom-range::-moz-range-thumb:active {
+    background-color: #97b3d2;
+  }
+  .custom-range::-moz-range-track {
+    background-color: #515151;
+  }
+  .custom-range::-ms-thumb {
+    background-color: #375a7f;
+    border: 0;
+  }
+  .custom-range::-ms-thumb:active {
+    background-color: #97b3d2;
+  }
+  .custom-range::-ms-fill-lower {
+    background-color: #515151;
+  }
+  .custom-range::-ms-fill-upper {
+    background-color: #515151;
+  }
+  .custom-range:disabled::-webkit-slider-thumb {
+    background-color: #7e7e7e;
+  }
+  .custom-range:disabled::-moz-range-thumb {
+    background-color: #7e7e7e;
+  }
+  .custom-range:disabled::-ms-thumb {
+    background-color: #7e7e7e;
+  }
+
+  .nav-tabs {
+    border-bottom: 1px solid #515151;
+  }
+  .nav-tabs .nav-link:hover, .nav-tabs .nav-link:focus {
+    border-color: #3b3b3b #3b3b3b #515151;
+  }
+  .nav-tabs .nav-link.disabled {
+    color: #9e9e9e;
+  }
+  .nav-tabs .nav-link.active,
+.nav-tabs .nav-item.show .nav-link {
+    color: #b1b1b1;
+    background-color: #222222;
+    border-color: #515151 #515151 #222222;
+  }
+
+  .nav-pills .nav-link.active,
+.nav-pills .show > .nav-link {
+    color: #fafafa;
+    background-color: #375a7f;
+  }
+
+  .navbar-light .navbar-brand {
+    color: rgba(0, 0, 0, 0.9);
+  }
+  .navbar-light .navbar-brand:hover, .navbar-light .navbar-brand:focus {
+    color: rgba(0, 0, 0, 0.9);
+  }
+  .navbar-light .navbar-nav .nav-link {
+    color: rgba(0, 0, 0, 0.5);
+  }
+  .navbar-light .navbar-nav .nav-link:hover, .navbar-light .navbar-nav .nav-link:focus {
+    color: rgba(0, 0, 0, 0.7);
+  }
+  .navbar-light .navbar-nav .nav-link.disabled {
+    color: rgba(0, 0, 0, 0.3);
+  }
+  .navbar-light .navbar-nav .show > .nav-link,
+.navbar-light .navbar-nav .active > .nav-link,
+.navbar-light .navbar-nav .nav-link.show,
+.navbar-light .navbar-nav .nav-link.active {
+    color: rgba(0, 0, 0, 0.9);
+  }
+  .navbar-light .navbar-toggler {
+    color: rgba(0, 0, 0, 0.5);
+    border-color: rgba(0, 0, 0, 0.1);
+  }
+  .navbar-light .navbar-toggler-icon {
+    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280, 0, 0, 0.5%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
+  }
+  .navbar-light .navbar-text {
+    color: rgba(0, 0, 0, 0.5);
+  }
+  .navbar-light .navbar-text a {
+    color: rgba(0, 0, 0, 0.9);
+  }
+  .navbar-light .navbar-text a:hover, .navbar-light .navbar-text a:focus {
+    color: rgba(0, 0, 0, 0.9);
+  }
+
+  .navbar-dark .navbar-brand {
+    color: #fff;
+  }
+  .navbar-dark .navbar-brand:hover, .navbar-dark .navbar-brand:focus {
+    color: #fff;
+  }
+  .navbar-dark .navbar-nav .nav-link {
+    color: rgba(255, 255, 255, 0.5);
+  }
+  .navbar-dark .navbar-nav .nav-link:hover, .navbar-dark .navbar-nav .nav-link:focus {
+    color: rgba(255, 255, 255, 0.75);
+  }
+  .navbar-dark .navbar-nav .nav-link.disabled {
+    color: rgba(255, 255, 255, 0.25);
+  }
+  .navbar-dark .navbar-nav .show > .nav-link,
+.navbar-dark .navbar-nav .active > .nav-link,
+.navbar-dark .navbar-nav .nav-link.show,
+.navbar-dark .navbar-nav .nav-link.active {
+    color: #fff;
+  }
+  .navbar-dark .navbar-toggler {
+    color: rgba(255, 255, 255, 0.5);
+    border-color: rgba(255, 255, 255, 0.1);
+  }
+  .navbar-dark .navbar-toggler-icon {
+    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.5%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
+  }
+  .navbar-dark .navbar-text {
+    color: rgba(255, 255, 255, 0.5);
+  }
+  .navbar-dark .navbar-text a {
+    color: #fff;
+  }
+  .navbar-dark .navbar-text a:hover, .navbar-dark .navbar-text a:focus {
+    color: #fff;
+  }
+
+  .card {
+    background-color: #2f2f2f;
+    border: 1px solid rgba(250, 250, 250, 0.125);
+  }
+
+  .card-header {
+    background-color: rgba(250, 250, 250, 0.03);
+    border-bottom: 1px solid rgba(250, 250, 250, 0.125);
+  }
+
+  .card-footer {
+    background-color: rgba(250, 250, 250, 0.03);
+    border-top: 1px solid rgba(250, 250, 250, 0.125);
+  }
+
+  .breadcrumb {
+    background-color: #3b3b3b;
+  }
+
+  .breadcrumb-item + .breadcrumb-item::before {
+    color: #9e9e9e;
+    content: "/";
+  }
+  .breadcrumb-item.active {
+    color: #9e9e9e;
+  }
+
+  .page-link {
+    background-color: #3b3b3b;
+    border: 1px solid #515151;
+  }
+  .page-link:hover {
+    color: #85a7ca;
+    background-color: #515151;
+    border-color: #5a5a5a;
+  }
+  .page-link:focus {
+    outline: 0;
+    box-shadow: 0 0 0 0.2rem rgba(55, 90, 127, 0.25);
+  }
+
+  .page-item.active .page-link {
+    color: #fafafa;
+    background-color: #375a7f;
+    border-color: #375a7f;
+  }
+  .page-item.disabled .page-link {
+    color: #5a5a5a;
+    background-color: #222222;
+    border-color: #515151;
+  }
+
+  .badge-primary {
+    color: #fff;
+    background-color: #375a7f;
+  }
+  a.badge-primary:hover, a.badge-primary:focus {
+    color: #fff;
+    background-color: #28415b;
+  }
+  a.badge-primary:focus, a.badge-primary.focus {
+    outline: 0;
+    box-shadow: 0 0 0 0.2rem rgba(55, 90, 127, 0.5);
+  }
+
+  .badge-secondary {
+    color: #fff;
+    background-color: #626262;
+  }
+  a.badge-secondary:hover, a.badge-secondary:focus {
+    color: #fff;
+    background-color: #494949;
+  }
+  a.badge-secondary:focus, a.badge-secondary.focus {
+    outline: 0;
+    box-shadow: 0 0 0 0.2rem rgba(98, 98, 98, 0.5);
+  }
+
+  .badge-success {
+    color: #fff;
+    background-color: #00bc8c;
+  }
+  a.badge-success:hover, a.badge-success:focus {
+    color: #fff;
+    background-color: #008966;
+  }
+  a.badge-success:focus, a.badge-success.focus {
+    outline: 0;
+    box-shadow: 0 0 0 0.2rem rgba(0, 188, 140, 0.5);
+  }
+
+  .badge-info {
+    color: #fff;
+    background-color: #17a2b8;
+  }
+  a.badge-info:hover, a.badge-info:focus {
+    color: #fff;
+    background-color: #117a8b;
+  }
+  a.badge-info:focus, a.badge-info.focus {
+    outline: 0;
+    box-shadow: 0 0 0 0.2rem rgba(23, 162, 184, 0.5);
+  }
+
+  .badge-warning {
+    color: #212529;
+    background-color: #f39c12;
+  }
+  a.badge-warning:hover, a.badge-warning:focus {
+    color: #212529;
+    background-color: #c87f0a;
+  }
+  a.badge-warning:focus, a.badge-warning.focus {
+    outline: 0;
+    box-shadow: 0 0 0 0.2rem rgba(243, 156, 18, 0.5);
+  }
+
+  .badge-danger {
+    color: #fff;
+    background-color: #e74c3c;
+  }
+  a.badge-danger:hover, a.badge-danger:focus {
+    color: #fff;
+    background-color: #d62c1a;
+  }
+  a.badge-danger:focus, a.badge-danger.focus {
+    outline: 0;
+    box-shadow: 0 0 0 0.2rem rgba(231, 76, 60, 0.5);
+  }
+
+  .badge-light {
+    color: #fff;
+    background-color: #7e7e7e;
+  }
+  a.badge-light:hover, a.badge-light:focus {
+    color: #fff;
+    background-color: #656565;
+  }
+  a.badge-light:focus, a.badge-light.focus {
+    outline: 0;
+    box-shadow: 0 0 0 0.2rem rgba(126, 126, 126, 0.5);
+  }
+
+  .badge-dark {
+    color: #fff;
+    background-color: #3b3b3b;
+  }
+  a.badge-dark:hover, a.badge-dark:focus {
+    color: #fff;
+    background-color: #222222;
+  }
+  a.badge-dark:focus, a.badge-dark.focus {
+    outline: 0;
+    box-shadow: 0 0 0 0.2rem rgba(59, 59, 59, 0.5);
+  }
+
+  .jumbotron {
+    background-color: #3b3b3b;
+  }
+
+  .alert-primary {
+    color: #3d9bff;
+    background-color: #004a99;
+    border-color: #0054ad;
+  }
+  .alert-primary hr {
+    border-top-color: #004894;
+  }
+  .alert-primary .alert-link {
+    color: #0a81ff;
+  }
+
+  .alert-secondary {
+    color: #8f969c;
+    background-color: #41464b;
+    border-color: #495055;
+  }
+  .alert-secondary hr {
+    border-top-color: #3d4347;
+  }
+  .alert-secondary .alert-link {
+    color: #747d84;
+  }
+
+  .alert-success {
+    color: #5cbc72;
+    background-color: #186429;
+    border-color: #1b722f;
+  }
+  .alert-success hr {
+    border-top-color: #165d27;
+  }
+  .alert-success .alert-link {
+    color: #43a259;
+  }
+
+  .alert-info {
+    color: #4fb8c9;
+    background-color: #0e616e;
+    border-color: #106e7d;
+  }
+  .alert-info hr {
+    border-top-color: #0d5a66;
+  }
+  .alert-info .alert-link {
+    color: #369eaf;
+  }
+
+  .alert-warning {
+    color: #ffd043;
+    background-color: #997404;
+    border-color: #ad8305;
+  }
+  .alert-warning hr {
+    border-top-color: #947004;
+  }
+  .alert-warning .alert-link {
+    color: #ffc310;
+  }
+
+  .alert-danger {
+    color: #e46572;
+    background-color: #842029;
+    border-color: #96242f;
+  }
+  .alert-danger hr {
+    border-top-color: #811f29;
+  }
+  .alert-danger .alert-link {
+    color: #dc3a4a;
+  }
+
+  .alert-light {
+    color: #fafafb;
+    background-color: #959596;
+    border-color: #a9a9aa;
+  }
+  .alert-light hr {
+    border-top-color: #9c9c9d;
+  }
+  .alert-light .alert-link {
+    color: #dedee4;
+  }
+
+  .alert-dark {
+    color: #65696e;
+    background-color: #1f2326;
+    border-color: #23272c;
+  }
+  .alert-dark hr {
+    border-top-color: #181a1e;
+  }
+  .alert-dark .alert-link {
+    color: #4d5053;
+  }
+
+  .progress {
+    background-color: #3b3b3b;
+  }
+
+  .progress-bar {
+    color: #111;
+    background-color: #375a7f;
+  }
+
+  .list-group-item-action {
+    color: #b1b1b1;
+  }
+  .list-group-item-action:hover, .list-group-item-action:focus {
+    color: #b1b1b1;
+    background-color: #222222;
+  }
+  .list-group-item-action:active {
+    color: #e1e1e1;
+    background-color: #3b3b3b;
+  }
+
+  .list-group-item {
+    background-color: #2f2f2f;
+    border: 1px solid rgba(250, 250, 250, 0.125);
+  }
+  .list-group-item.disabled, .list-group-item:disabled {
+    color: #9e9e9e;
+    background-color: #2f2f2f;
+  }
+  .list-group-item.active {
+    color: #fafafa;
+    background-color: #375a7f;
+    border-color: #375a7f;
+  }
+
+  .list-group-item-primary {
+    color: #004085;
+    background-color: #b8daff;
+  }
+  .list-group-item-primary.list-group-item-action:hover, .list-group-item-primary.list-group-item-action:focus {
+    color: #004085;
+    background-color: #9fcdff;
+  }
+  .list-group-item-primary.list-group-item-action.active {
+    color: #fff;
+    background-color: #004085;
+    border-color: #004085;
+  }
+
+  .list-group-item-secondary {
+    color: #383d41;
+    background-color: #d6d8db;
+  }
+  .list-group-item-secondary.list-group-item-action:hover, .list-group-item-secondary.list-group-item-action:focus {
+    color: #383d41;
+    background-color: #c8cbcf;
+  }
+  .list-group-item-secondary.list-group-item-action.active {
+    color: #fff;
+    background-color: #383d41;
+    border-color: #383d41;
+  }
+
+  .list-group-item-success {
+    color: #155724;
+    background-color: #c3e6cb;
+  }
+  .list-group-item-success.list-group-item-action:hover, .list-group-item-success.list-group-item-action:focus {
+    color: #155724;
+    background-color: #b1dfbb;
+  }
+  .list-group-item-success.list-group-item-action.active {
+    color: #fff;
+    background-color: #155724;
+    border-color: #155724;
+  }
+
+  .list-group-item-info {
+    color: #0c5460;
+    background-color: #bee5eb;
+  }
+  .list-group-item-info.list-group-item-action:hover, .list-group-item-info.list-group-item-action:focus {
+    color: #0c5460;
+    background-color: #abdde5;
+  }
+  .list-group-item-info.list-group-item-action.active {
+    color: #fff;
+    background-color: #0c5460;
+    border-color: #0c5460;
+  }
+
+  .list-group-item-warning {
+    color: #856404;
+    background-color: #ffeeba;
+  }
+  .list-group-item-warning.list-group-item-action:hover, .list-group-item-warning.list-group-item-action:focus {
+    color: #856404;
+    background-color: #ffe8a1;
+  }
+  .list-group-item-warning.list-group-item-action.active {
+    color: #fff;
+    background-color: #856404;
+    border-color: #856404;
+  }
+
+  .list-group-item-danger {
+    color: #721c24;
+    background-color: #f5c6cb;
+  }
+  .list-group-item-danger.list-group-item-action:hover, .list-group-item-danger.list-group-item-action:focus {
+    color: #721c24;
+    background-color: #f1b0b7;
+  }
+  .list-group-item-danger.list-group-item-action.active {
+    color: #fff;
+    background-color: #721c24;
+    border-color: #721c24;
+  }
+
+  .list-group-item-light {
+    color: #818182;
+    background-color: #fdfdfe;
+  }
+  .list-group-item-light.list-group-item-action:hover, .list-group-item-light.list-group-item-action:focus {
+    color: #818182;
+    background-color: #ececf6;
+  }
+  .list-group-item-light.list-group-item-action.active {
+    color: #fff;
+    background-color: #818182;
+    border-color: #818182;
+  }
+
+  .list-group-item-dark {
+    color: #1b1e21;
+    background-color: #c6c8ca;
+  }
+  .list-group-item-dark.list-group-item-action:hover, .list-group-item-dark.list-group-item-action:focus {
+    color: #1b1e21;
+    background-color: #b9bbbe;
+  }
+  .list-group-item-dark.list-group-item-action.active {
+    color: #fff;
+    background-color: #1b1e21;
+    border-color: #1b1e21;
+  }
+
+  .close {
+    color: #fafafa;
+    text-shadow: 0 1px 0 #111;
+  }
+  .close:hover {
+    color: #fafafa;
+  }
+
+  .toast {
+    background-color: rgba(59, 59, 59, 0.85);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    box-shadow: 0 0.25rem 0.75rem rgba(126, 126, 126, 0.1);
+  }
+
+  .toast-header {
+    color: #9e9e9e;
+    background-color: rgba(81, 81, 81, 0.85);
+    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+  }
+
+  .modal-content {
+    background-color: #2f2f2f;
+    border: 1px solid rgba(250, 250, 250, 0.2);
+  }
+
+  .modal-backdrop {
+    background-color: #111;
+  }
+  .modal-backdrop.show {
+    opacity: 0.85;
+  }
+
+  .modal-header {
+    border-bottom: 1px solid #495057;
+  }
+
+  .modal-footer {
+    border-top: 1px solid #495057;
+  }
+
+  .tooltip.show {
+    opacity: 0.9;
+  }
+
+  .bs-tooltip-top .arrow::before, .bs-tooltip-auto[x-placement^=top] .arrow::before {
+    border-top-color: #fafafa;
+  }
+
+  .bs-tooltip-right .arrow::before, .bs-tooltip-auto[x-placement^=right] .arrow::before {
+    border-right-color: #fafafa;
+  }
+
+  .bs-tooltip-bottom .arrow::before, .bs-tooltip-auto[x-placement^=bottom] .arrow::before {
+    border-bottom-color: #fafafa;
+  }
+
+  .bs-tooltip-left .arrow::before, .bs-tooltip-auto[x-placement^=left] .arrow::before {
+    border-left-color: #fafafa;
+  }
+
+  .tooltip-inner {
+    color: #111;
+    background-color: #fafafa;
+  }
+
+  .popover {
+    background-color: #111;
+    border: 1px solid rgba(250, 250, 250, 0.2);
+  }
+
+  .bs-popover-top > .arrow::before, .bs-popover-auto[x-placement^=top] > .arrow::before {
+    border-top-color: rgba(250, 250, 250, 0.25);
+  }
+  .bs-popover-top > .arrow::after, .bs-popover-auto[x-placement^=top] > .arrow::after {
+    border-top-color: #111;
+  }
+
+  .bs-popover-right > .arrow::before, .bs-popover-auto[x-placement^=right] > .arrow::before {
+    border-right-color: rgba(250, 250, 250, 0.25);
+  }
+  .bs-popover-right > .arrow::after, .bs-popover-auto[x-placement^=right] > .arrow::after {
+    border-right-color: #111;
+  }
+
+  .bs-popover-bottom > .arrow::before, .bs-popover-auto[x-placement^=bottom] > .arrow::before {
+    border-bottom-color: rgba(250, 250, 250, 0.25);
+  }
+  .bs-popover-bottom > .arrow::after, .bs-popover-auto[x-placement^=bottom] > .arrow::after {
+    border-bottom-color: #111;
+  }
+  .bs-popover-bottom .popover-header::before, .bs-popover-auto[x-placement^=bottom] .popover-header::before {
+    border-bottom: 1px solid #090909;
+  }
+
+  .bs-popover-left > .arrow::before, .bs-popover-auto[x-placement^=left] > .arrow::before {
+    border-left-color: rgba(250, 250, 250, 0.25);
+  }
+  .bs-popover-left > .arrow::after, .bs-popover-auto[x-placement^=left] > .arrow::after {
+    border-left-color: #111;
+  }
+
+  .popover-header {
+    background-color: #090909;
+    border-bottom: 1px solid black;
+  }
+
+  .popover-body {
+    color: #e1e1e1;
+  }
+
+  .carousel-control-prev,
+.carousel-control-next {
+    color: #fafafa;
+    opacity: 0.5;
+  }
+  .carousel-control-prev:hover, .carousel-control-prev:focus,
+.carousel-control-next:hover,
+.carousel-control-next:focus {
+    color: #fafafa;
+    opacity: 0.9;
+  }
+
+  .carousel-control-prev-icon {
+    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23fafafa' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath d='M5.25 0l-4 4 4 4 1.5-1.5L4.25 4l2.5-2.5L5.25 0z'/%3e%3c/svg%3e");
+  }
+
+  .carousel-control-next-icon {
+    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23fafafa' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath d='M2.75 0l-1.5 1.5L3.75 4l-2.5 2.5L2.75 8l4-4-4-4z'/%3e%3c/svg%3e");
+  }
+
+  .carousel-indicators li {
+    background-color: #111;
+  }
+
+  .carousel-caption {
+    color: #111;
+  }
+
+  .bg-primary {
+    background-color: #375a7f !important;
+  }
+
+  a.bg-primary:hover, a.bg-primary:focus,
+button.bg-primary:hover,
+button.bg-primary:focus {
+    background-color: #28415b !important;
+  }
+
+  .bg-secondary {
+    background-color: #626262 !important;
+  }
+
+  a.bg-secondary:hover, a.bg-secondary:focus,
+button.bg-secondary:hover,
+button.bg-secondary:focus {
+    background-color: #494949 !important;
+  }
+
+  .bg-success {
+    background-color: #00bc8c !important;
+  }
+
+  a.bg-success:hover, a.bg-success:focus,
+button.bg-success:hover,
+button.bg-success:focus {
+    background-color: #008966 !important;
+  }
+
+  .bg-info {
+    background-color: #17a2b8 !important;
+  }
+
+  a.bg-info:hover, a.bg-info:focus,
+button.bg-info:hover,
+button.bg-info:focus {
+    background-color: #117a8b !important;
+  }
+
+  .bg-warning {
+    background-color: #f39c12 !important;
+  }
+
+  a.bg-warning:hover, a.bg-warning:focus,
+button.bg-warning:hover,
+button.bg-warning:focus {
+    background-color: #c87f0a !important;
+  }
+
+  .bg-danger {
+    background-color: #e74c3c !important;
+  }
+
+  a.bg-danger:hover, a.bg-danger:focus,
+button.bg-danger:hover,
+button.bg-danger:focus {
+    background-color: #d62c1a !important;
+  }
+
+  .bg-light {
+    background-color: #7e7e7e !important;
+  }
+
+  a.bg-light:hover, a.bg-light:focus,
+button.bg-light:hover,
+button.bg-light:focus {
+    background-color: #656565 !important;
+  }
+
+  .bg-dark {
+    background-color: #3b3b3b !important;
+  }
+
+  a.bg-dark:hover, a.bg-dark:focus,
+button.bg-dark:hover,
+button.bg-dark:focus {
+    background-color: #222222 !important;
+  }
+
+  .bg-white {
+    background-color: #fafafa !important;
+  }
+
+  .bg-black {
+    background-color: #111 !important;
+  }
+
+  .border {
+    border: 1px solid #495057 !important;
+  }
+
+  .border-top {
+    border-top: 1px solid #495057 !important;
+  }
+
+  .border-right {
+    border-right: 1px solid #495057 !important;
+  }
+
+  .border-bottom {
+    border-bottom: 1px solid #495057 !important;
+  }
+
+  .border-left {
+    border-left: 1px solid #495057 !important;
+  }
+
+  .border-primary {
+    border-color: #375a7f !important;
+  }
+
+  .border-secondary {
+    border-color: #626262 !important;
+  }
+
+  .border-success {
+    border-color: #00bc8c !important;
+  }
+
+  .border-info {
+    border-color: #17a2b8 !important;
+  }
+
+  .border-warning {
+    border-color: #f39c12 !important;
+  }
+
+  .border-danger {
+    border-color: #e74c3c !important;
+  }
+
+  .border-light {
+    border-color: #7e7e7e !important;
+  }
+
+  .border-dark {
+    border-color: #3b3b3b !important;
+  }
+
+  .border-white {
+    border-color: #fafafa !important;
+  }
+
+  .border-black {
+    border-color: #fafafa !important;
+  }
+
+  .shadow-sm {
+    box-shadow: 0 0.125rem 0.25rem rgba(17, 17, 17, 0.075) !important;
+  }
+
+  .shadow {
+    box-shadow: 0 0.5rem 1rem rgba(17, 17, 17, 0.15) !important;
+  }
+
+  .shadow-lg {
+    box-shadow: 0 1rem 3rem rgba(17, 17, 17, 0.175) !important;
+  }
+
+  .text-white {
+    color: #fafafa !important;
+  }
+
+  .text-black {
+    color: #111 !important;
+  }
+
+  .text-primary {
+    color: #375a7f !important;
+  }
+
+  a.text-primary:hover, a.text-primary:focus {
+    color: #20344a !important;
+  }
+
+  .text-secondary {
+    color: #626262 !important;
+  }
+
+  a.text-secondary:hover, a.text-secondary:focus {
+    color: #3c3c3c !important;
+  }
+
+  .text-success {
+    color: #00bc8c !important;
+  }
+
+  a.text-success:hover, a.text-success:focus {
+    color: #007053 !important;
+  }
+
+  .text-info {
+    color: #17a2b8 !important;
+  }
+
+  a.text-info:hover, a.text-info:focus {
+    color: #0f6674 !important;
+  }
+
+  .text-warning {
+    color: #f39c12 !important;
+  }
+
+  a.text-warning:hover, a.text-warning:focus {
+    color: #b06f09 !important;
+  }
+
+  .text-danger {
+    color: #e74c3c !important;
+  }
+
+  a.text-danger:hover, a.text-danger:focus {
+    color: #bf2718 !important;
+  }
+
+  .text-light {
+    color: #7e7e7e !important;
+  }
+
+  a.text-light:hover, a.text-light:focus {
+    color: #585858 !important;
+  }
+
+  .text-dark {
+    color: #3b3b3b !important;
+  }
+
+  a.text-dark:hover, a.text-dark:focus {
+    color: #151515 !important;
+  }
+
+  .text-body {
+    color: #e1e1e1 !important;
+  }
+
+  .text-muted {
+    color: #626262 !important;
+  }
+
+  .text-black-50 {
+    color: rgba(17, 17, 17, 0.5) !important;
+  }
+
+  .text-white-50 {
+    color: rgba(250, 250, 250, 0.5) !important;
+  }
+
+  body::-moz-selection {
+    color: #cfcfcf;
+    background: rgba(23, 162, 184, 0.5);
+  }
+
+  body::selection {
+    color: #cfcfcf;
+    background: rgba(23, 162, 184, 0.5);
+  }
+}