rake update[v4-dev]

56 files changed, 819 insertions, 1292 deletions

diff --git a/assets/stylesheets/_bootstrap-grid.scss b/assets/stylesheets/_bootstrap-grid.scss
index 4c57cc6..bff585c 100644
--- a/assets/stylesheets/_bootstrap-grid.scss
+++ b/assets/stylesheets/_bootstrap-grid.scss
@@ -22,22 +22,16 @@ html {
   box-sizing: inherit;
 }
 
-
-//
-// Variables
-//
-
+@import "bootstrap/custom";
 @import "bootstrap/variables";
 
 //
 // Grid mixins
 //
 
-@import "bootstrap/mixins/clearfix";
 @import "bootstrap/mixins/breakpoints";
 @import "bootstrap/mixins/grid-framework";
 @import "bootstrap/mixins/grid";
 
-@import "bootstrap/custom";
-
 @import "bootstrap/grid";
+@import "bootstrap/utilities/flex";
diff --git a/assets/stylesheets/_bootstrap-reboot.scss b/assets/stylesheets/_bootstrap-reboot.scss
index 2c8a185..6aa25aa 100644
--- a/assets/stylesheets/_bootstrap-reboot.scss
+++ b/assets/stylesheets/_bootstrap-reboot.scss
@@ -2,9 +2,8 @@
 //
 // Includes only Normalize and our custom Reboot reset.
 
+@import "bootstrap/custom";
 @import "bootstrap/variables";
 @import "bootstrap/mixins";
-@import "bootstrap/custom";
 
-@import "bootstrap/normalize";
 @import "bootstrap/reboot";
diff --git a/assets/stylesheets/_bootstrap.scss b/assets/stylesheets/_bootstrap.scss
index 2abc609..88db5f7 100644
--- a/assets/stylesheets/_bootstrap.scss
+++ b/assets/stylesheets/_bootstrap.scss
@@ -6,12 +6,10 @@
  */
 
 // Core variables and mixins
+@import "bootstrap/custom";
 @import "bootstrap/variables";
 @import "bootstrap/mixins";
-@import "bootstrap/custom";
 
-// Reset and dependencies
-@import "bootstrap/normalize";
 @import "bootstrap/print";
 
 // Core CSS
diff --git a/assets/stylesheets/bootstrap/_alert.scss b/assets/stylesheets/bootstrap/_alert.scss
index d9b4e9b..562821a 100644
--- a/assets/stylesheets/bootstrap/_alert.scss
+++ b/assets/stylesheets/bootstrap/_alert.scss
@@ -42,14 +42,14 @@
 // Generate contextual modifier classes for colorizing the alert.
 
 .alert-success {
-  @include alert-variant($alert-success-bg, $alert-success-border, $alert-success-text);
+  @include alert-variant($alert-success-bg, $alert-success-border-color, $alert-success-text);
 }
 .alert-info {
-  @include alert-variant($alert-info-bg, $alert-info-border, $alert-info-text);
+  @include alert-variant($alert-info-bg, $alert-info-border-color, $alert-info-text);
 }
 .alert-warning {
-  @include alert-variant($alert-warning-bg, $alert-warning-border, $alert-warning-text);
+  @include alert-variant($alert-warning-bg, $alert-warning-border-color, $alert-warning-text);
 }
 .alert-danger {
-  @include alert-variant($alert-danger-bg, $alert-danger-border, $alert-danger-text);
+  @include alert-variant($alert-danger-bg, $alert-danger-border-color, $alert-danger-text);
 }
diff --git a/assets/stylesheets/bootstrap/_badge.scss b/assets/stylesheets/bootstrap/_badge.scss
index e5a3298..175b19d 100644
--- a/assets/stylesheets/bootstrap/_badge.scss
+++ b/assets/stylesheets/bootstrap/_badge.scss
@@ -33,7 +33,6 @@ a.badge {
   @include hover-focus {
     color: $badge-link-hover-color;
     text-decoration: none;
-    cursor: pointer;
   }
 }
 // scss-lint:enable QualifyingElement
diff --git a/assets/stylesheets/bootstrap/_breadcrumb.scss b/assets/stylesheets/bootstrap/_breadcrumb.scss
index 1a09bba..2bc0e20 100644
--- a/assets/stylesheets/bootstrap/_breadcrumb.scss
+++ b/assets/stylesheets/bootstrap/_breadcrumb.scss
@@ -1,6 +1,6 @@
 .breadcrumb {
   padding: $breadcrumb-padding-y $breadcrumb-padding-x;
-  margin-bottom: $spacer-y;
+  margin-bottom: 1rem;
   list-style: none;
   background-color: $breadcrumb-bg;
   @include border-radius($border-radius);
diff --git a/assets/stylesheets/bootstrap/_button-group.scss b/assets/stylesheets/bootstrap/_button-group.scss
index 584ed15..d4c79ab 100644
--- a/assets/stylesheets/bootstrap/_button-group.scss
+++ b/assets/stylesheets/bootstrap/_button-group.scss
@@ -10,6 +10,7 @@
   > .btn {
     position: relative;
     flex: 0 1 auto;
+    margin-bottom: 0;
 
     // Bring the hover, focused, and "active" buttons to the fron to overlay
     // the borders properly
@@ -35,6 +36,7 @@
 // Optional: Group multiple button groups together for a toolbar
 .btn-toolbar {
   display: flex;
+  flex-wrap: wrap;
   justify-content: flex-start;
 
   .input-group {
@@ -77,12 +79,6 @@
   @include border-left-radius(0);
 }
 
-// On active and open, don't show outline
-.btn-group .dropdown-toggle:active,
-.btn-group.open .dropdown-toggle {
-  outline: 0;
-}
-
 
 // Sizing
 //
@@ -97,8 +93,8 @@
 //
 
 .btn + .dropdown-toggle-split {
-  padding-right: $btn-padding-x * .75;
-  padding-left: $btn-padding-x * .75;
+  padding-right: $input-btn-padding-x * .75;
+  padding-left: $input-btn-padding-x * .75;
 
   &::after {
     margin-left: 0;
@@ -106,19 +102,19 @@
 }
 
 .btn-sm + .dropdown-toggle-split {
-  padding-right: $btn-padding-x-sm * .75;
-  padding-left: $btn-padding-x-sm * .75;
+  padding-right: $input-btn-padding-x-sm * .75;
+  padding-left: $input-btn-padding-x-sm * .75;
 }
 
 .btn-lg + .dropdown-toggle-split {
-  padding-right: $btn-padding-x-lg * .75;
-  padding-left: $btn-padding-x-lg * .75;
+  padding-right: $input-btn-padding-x-lg * .75;
+  padding-left: $input-btn-padding-x-lg * .75;
 }
 
 
 // The clickable button for toggling the menu
-// Remove the gradient and set the same inset shadow as the :active state
-.btn-group.open .dropdown-toggle {
+// Set the same inset shadow as the :active state
+.btn-group.show .dropdown-toggle {
   @include box-shadow($btn-active-box-shadow);
 
   // Show no shadow for `.btn-link` since it has no other button styles.
diff --git a/assets/stylesheets/bootstrap/_buttons.scss b/assets/stylesheets/bootstrap/_buttons.scss
index e36ff0f..05c54e4 100644
--- a/assets/stylesheets/bootstrap/_buttons.scss
+++ b/assets/stylesheets/bootstrap/_buttons.scss
@@ -7,13 +7,12 @@
 .btn {
   display: inline-block;
   font-weight: $btn-font-weight;
-  line-height: $btn-line-height;
   text-align: center;
   white-space: nowrap;
   vertical-align: middle;
   user-select: none;
   border: $input-btn-border-width solid transparent;
-  @include button-size($btn-padding-y, $btn-padding-x, $font-size-base, $btn-border-radius);
+  @include button-size($input-btn-padding-y, $input-btn-padding-x, $font-size-base, $input-btn-line-height, $btn-border-radius);
   @include transition($btn-transition);
 
   // Share hover and focus styles
@@ -29,7 +28,6 @@
   // Disabled comes first so active can properly restyle
   &.disabled,
   &:disabled {
-    cursor: $cursor-disabled;
     opacity: .65;
     @include box-shadow(none);
   }
@@ -53,42 +51,42 @@ fieldset[disabled] a.btn {
 //
 
 .btn-primary {
-  @include button-variant($btn-primary-color, $btn-primary-bg, $btn-primary-border);
+  @include button-variant($btn-primary-color, $btn-primary-bg, $btn-primary-border-color);
 }
 .btn-secondary {
-  @include button-variant($btn-secondary-color, $btn-secondary-bg, $btn-secondary-border);
+  @include button-variant($btn-secondary-color, $btn-secondary-bg, $btn-secondary-border-color);
 }
 .btn-info {
-  @include button-variant($btn-info-color, $btn-info-bg, $btn-info-border);
+  @include button-variant($btn-info-color, $btn-info-bg, $btn-info-border-color);
 }
 .btn-success {
-  @include button-variant($btn-success-color, $btn-success-bg, $btn-success-border);
+  @include button-variant($btn-success-color, $btn-success-bg, $btn-success-border-color);
 }
 .btn-warning {
-  @include button-variant($btn-warning-color, $btn-warning-bg, $btn-warning-border);
+  @include button-variant($btn-warning-color, $btn-warning-bg, $btn-warning-border-color);
 }
 .btn-danger {
-  @include button-variant($btn-danger-color, $btn-danger-bg, $btn-danger-border);
+  @include button-variant($btn-danger-color, $btn-danger-bg, $btn-danger-border-color);
 }
 
 // Remove all backgrounds
 .btn-outline-primary {
-  @include button-outline-variant($btn-primary-bg);
+  @include button-outline-variant($btn-primary-bg, $btn-primary-color);
 }
 .btn-outline-secondary {
-  @include button-outline-variant($btn-secondary-border);
+  @include button-outline-variant($btn-secondary-border-color, $btn-secondary-color);
 }
 .btn-outline-info {
-  @include button-outline-variant($btn-info-bg);
+  @include button-outline-variant($btn-info-bg, $btn-info-color);
 }
 .btn-outline-success {
-  @include button-outline-variant($btn-success-bg);
+  @include button-outline-variant($btn-success-bg, $btn-success-color);
 }
 .btn-outline-warning {
-  @include button-outline-variant($btn-warning-bg);
+  @include button-outline-variant($btn-warning-bg, $btn-warning-color);
 }
 .btn-outline-danger {
-  @include button-outline-variant($btn-danger-bg);
+  @include button-outline-variant($btn-danger-bg, $btn-danger-color);
 }
 
 
@@ -137,12 +135,11 @@ fieldset[disabled] a.btn {
 //
 
 .btn-lg {
-  // line-height: ensure even-numbered height of button next to large input
-  @include button-size($btn-padding-y-lg, $btn-padding-x-lg, $font-size-lg, $btn-border-radius-lg);
+  @include button-size($input-btn-padding-y-lg, $input-btn-padding-x-lg, $font-size-lg, $line-height-lg, $btn-border-radius-lg);
 }
+
 .btn-sm {
-  // line-height: ensure proper height of button next to small input
-  @include button-size($btn-padding-y-sm, $btn-padding-x-sm, $font-size-sm, $btn-border-radius-sm);
+  @include button-size($input-btn-padding-y-sm, $input-btn-padding-x-sm, $font-size-sm, $line-height-sm, $btn-border-radius-sm);
 }
 
 
diff --git a/assets/stylesheets/bootstrap/_card.scss b/assets/stylesheets/bootstrap/_card.scss
index 9fe70e8..7be2aaf 100644
--- a/assets/stylesheets/bootstrap/_card.scss
+++ b/assets/stylesheets/bootstrap/_card.scss
@@ -20,6 +20,7 @@
 
 .card-title {
   margin-bottom: $card-spacer-y;
+  word-break: break-all;
 }
 
 .card-subtitle {
@@ -124,7 +125,7 @@
   @include card-outline-variant($btn-primary-bg);
 }
 .card-outline-secondary {
-  @include card-outline-variant($btn-secondary-border);
+  @include card-outline-variant($btn-secondary-border-color);
 }
 .card-outline-info {
   @include card-outline-variant($btn-info-bg);
@@ -158,10 +159,6 @@
 }
 
 // Card image
-.card-img {
-  // margin: -1.325rem;
-  @include border-radius($card-border-radius-inner);
-}
 .card-img-overlay {
   position: absolute;
   top: 0;
@@ -171,13 +168,19 @@
   padding: $card-img-overlay-padding;
 }
 
-
+.card-img {
+  width: 100%; // Required because we use flexbox and this inherently applies align-self: stretch
+  @include border-radius($card-border-radius-inner);
+}
 
 // Card image caps
 .card-img-top {
+  width: 100%; // Required because we use flexbox and this inherently applies align-self: stretch
   @include border-top-radius($card-border-radius-inner);
 }
+
 .card-img-bottom {
+  width: 100%; // Required because we use flexbox and this inherently applies align-self: stretch
   @include border-bottom-radius($card-border-radius-inner);
 }
 
@@ -188,17 +191,15 @@
   .card-deck {
     display: flex;
     flex-flow: row wrap;
+    margin-right: -$card-deck-margin;
+    margin-left: -$card-deck-margin;
 
     .card {
       display: flex;
       flex: 1 0 0;
       flex-direction: column;
-
-      // Selectively apply horizontal margins to cards to avoid doing the
-      // negative margin dance like our grid. This differs from the grid
-      // due to the use of margins as gutters instead of padding.
-      &:not(:first-child) { margin-left: $card-deck-margin; }
-      &:not(:last-child) { margin-right: $card-deck-margin; }
+      margin-right: $card-deck-margin;
+      margin-left: $card-deck-margin;
     }
   }
 }
@@ -262,15 +263,18 @@
 // Columns
 //
 
-@include media-breakpoint-up(sm) {
-  .card-columns {
+.card-columns {
+  .card {
+    margin-bottom: $card-columns-margin;
+  }
+
+  @include media-breakpoint-up(sm) {
     column-count: $card-columns-count;
     column-gap: $card-columns-gap;
 
     .card {
       display: inline-block; // Don't let them vertically span multiple columns
       width: 100%; // Don't let their width change
-      margin-bottom: $card-columns-margin;
     }
   }
 }
diff --git a/assets/stylesheets/bootstrap/_carousel.scss b/assets/stylesheets/bootstrap/_carousel.scss
index 54478e4..41eca94 100644
--- a/assets/stylesheets/bootstrap/_carousel.scss
+++ b/assets/stylesheets/bootstrap/_carousel.scss
@@ -12,13 +12,11 @@
 .carousel-item {
   position: relative;
   display: none;
+  align-items: center;
   width: 100%;
-
-  @include if-supports-3d-transforms() {
-    @include transition($carousel-transition);
-    backface-visibility: hidden;
-    perspective: 1000px;
-  }
+  @include transition($carousel-transition);
+  backface-visibility: hidden;
+  perspective: 1000px;
 }
 
 .carousel-item.active,
@@ -34,21 +32,19 @@
 }
 
 // CSS3 transforms when supported by the browser
-@include if-supports-3d-transforms() {
-  .carousel-item-next.carousel-item-left,
-  .carousel-item-prev.carousel-item-right {
-    transform: translate3d(0, 0, 0);
-  }
+.carousel-item-next.carousel-item-left,
+.carousel-item-prev.carousel-item-right {
+  transform: translate3d(0, 0, 0);
+}
 
-  .carousel-item-next,
-  .active.carousel-item-right {
-    transform: translate3d(100%, 0, 0);
-  }
+.carousel-item-next,
+.active.carousel-item-right {
+  transform: translate3d(100%, 0, 0);
+}
 
-  .carousel-item-prev,
-  .active.carousel-item-left {
-    transform: translate3d(-100%, 0, 0);
-  }
+.carousel-item-prev,
+.active.carousel-item-left {
+  transform: translate3d(-100%, 0, 0);
 }
 
 
@@ -131,7 +127,6 @@
     margin-right: $carousel-indicator-spacer;
     margin-left: $carousel-indicator-spacer;
     text-indent: -999px;
-    cursor: pointer;
     background-color: rgba($carousel-indicator-active-bg, .5);
 
     // Use pseudo classes to increase the hit area by 10px on top and bottom.
diff --git a/assets/stylesheets/bootstrap/_close.scss b/assets/stylesheets/bootstrap/_close.scss
index 859990e..f181490 100644
--- a/assets/stylesheets/bootstrap/_close.scss
+++ b/assets/stylesheets/bootstrap/_close.scss
@@ -10,7 +10,6 @@
   @include hover-focus {
     color: $close-color;
     text-decoration: none;
-    cursor: pointer;
     opacity: .75;
   }
 }
@@ -23,7 +22,6 @@
 // scss-lint:disable QualifyingElement
 button.close {
   padding: 0;
-  cursor: pointer;
   background: transparent;
   border: 0;
   -webkit-appearance: none;
diff --git a/assets/stylesheets/bootstrap/_custom-forms.scss b/assets/stylesheets/bootstrap/_custom-forms.scss
index ef2aab3..9133f7d 100644
--- a/assets/stylesheets/bootstrap/_custom-forms.scss
+++ b/assets/stylesheets/bootstrap/_custom-forms.scss
@@ -1,4 +1,4 @@
-// scss-lint:disable PropertyCount
+// scss-lint:disable PropertyCount, VendorPrefix
 
 // Embedded icons from Open Iconic.
 // Released under MIT and copyright 2014 Waybury.
@@ -15,7 +15,6 @@
   min-height: (1rem * $line-height-base);
   padding-left: $custom-control-gutter;
   margin-right: $custom-control-spacer-x;
-  cursor: pointer;
 }
 
 .custom-control-input {
@@ -42,13 +41,11 @@
 
   &:disabled {
     ~ .custom-control-indicator {
-      cursor: $custom-control-disabled-cursor;
       background-color: $custom-control-disabled-indicator-bg;
     }
 
     ~ .custom-control-description {
       color: $custom-control-disabled-description-color;
-      cursor: $custom-control-disabled-cursor;
     }
   }
 }
@@ -136,7 +133,7 @@
 .custom-select {
   display: inline-block;
   max-width: 100%;
-  $select-border-width: ($border-width * 2);
+  $select-border-width: ($custom-select-border-width * 2);
   height: calc(#{$input-height} + #{$select-border-width});
   padding: $custom-select-padding-y ($custom-select-padding-x + $custom-select-indicator-padding) $custom-select-padding-y $custom-select-padding-x;
   line-height: $custom-select-line-height;
@@ -146,9 +143,7 @@
   background-size: $custom-select-bg-size;
   border: $custom-select-border-width solid $custom-select-border-color;
   @include border-radius($custom-select-border-radius);
-  // Use vendor prefixes as `appearance` isn't part of the CSS spec.
-  -moz-appearance: none;
-  -webkit-appearance: none;
+  appearance: none;
 
   &:focus {
     border-color: $custom-select-focus-border-color;
@@ -168,7 +163,6 @@
 
   &:disabled {
     color: $custom-select-disabled-color;
-    cursor: $cursor-disabled;
     background-color: $custom-select-disabled-bg;
   }
 
@@ -200,7 +194,6 @@
   max-width: 100%;
   height: $custom-file-height;
   margin-bottom: 0;
-  cursor: pointer;
 }
 
 .custom-file-input {
@@ -208,7 +201,6 @@
   max-width: 100%;
   height: $custom-file-height;
   margin: 0;
-  filter: alpha(opacity = 0);
   opacity: 0;
 
   &:focus ~ .custom-file-control {
@@ -234,7 +226,7 @@
   @include box-shadow($custom-file-box-shadow);
 
   @each $lang, $text in map-get($custom-file-text, placeholder) {
-    &:lang(#{$lang})::after {
+    &:lang(#{$lang}):empty::after {
       content: $text;
     }
   }
diff --git a/assets/stylesheets/bootstrap/_dropdown.scss b/assets/stylesheets/bootstrap/_dropdown.scss
index 1c2741a..d9e75b0 100644
--- a/assets/stylesheets/bootstrap/_dropdown.scss
+++ b/assets/stylesheets/bootstrap/_dropdown.scss
@@ -18,12 +18,13 @@
     border-left: $caret-width solid transparent;
   }
 
-  // Prevent the focus on the dropdown toggle when closing dropdowns
-  &:focus {
-    outline: 0;
+  &:empty::after {
+    margin-left: 0;
   }
 }
 
+// Allow for dropdowns to go bottom up (aka, dropup-menu)
+// Just add .dropup after the standard .dropdown class and you're set.
 .dropup {
   .dropdown-toggle {
     &::after {
@@ -66,7 +67,7 @@
 .dropdown-item {
   display: block;
   width: 100%; // For `<button>`s
-  padding: 3px $dropdown-item-padding-x;
+  padding: $dropdown-item-padding-y $dropdown-item-padding-x;
   clear: both;
   font-weight: $font-weight-normal;
   color: $dropdown-link-color;
@@ -91,7 +92,6 @@
   &.disabled,
   &:disabled {
     color: $dropdown-link-disabled-color;
-    cursor: $cursor-disabled;
     background-color: transparent;
     // Remove CSS gradients if they're enabled
     @if $enable-gradients {
@@ -102,29 +102,14 @@
 
 // Open state for the dropdown
 .show {
-  // Show the menu
-  > .dropdown-menu {
-    display: block;
-  }
-
   // Remove the outline when :focus is triggered
   > a {
     outline: 0;
   }
 }
 
-// Menu positioning
-//
-// Add extra class to `.dropdown-menu` to flip the alignment of the dropdown
-// menu with the parent.
-.dropdown-menu-right {
-  right: 0;
-  left: auto; // Reset the default from `.dropdown-menu`
-}
-
-.dropdown-menu-left {
-  right: auto;
-  left: 0;
+.dropdown-menu.show {
+  display: block;
 }
 
 // Dropdown section headers
@@ -136,26 +121,3 @@
   color: $dropdown-header-color;
   white-space: nowrap; // as with > li > a
 }
-
-// Backdrop to catch body clicks on mobile, etc.
-.dropdown-backdrop {
-  position: fixed;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  z-index: $zindex-dropdown-backdrop;
-}
-
-// Allow for dropdowns to go bottom up (aka, dropup-menu)
-//
-// Just add .dropup after the standard .dropdown class and you're set.
-
-.dropup {
-  // Different positioning for bottom up menu
-  .dropdown-menu {
-    top: auto;
-    bottom: 100%;
-    margin-bottom: $dropdown-margin-top;
-  }
-}
diff --git a/assets/stylesheets/bootstrap/_forms.scss b/assets/stylesheets/bootstrap/_forms.scss
index 7be62bd..55e8cb4 100644
--- a/assets/stylesheets/bootstrap/_forms.scss
+++ b/assets/stylesheets/bootstrap/_forms.scss
@@ -1,4 +1,4 @@
-// scss-lint:disable QualifyingElement
+// scss-lint:disable QualifyingElement, VendorPrefix
 
 //
 // Textual form controls
@@ -9,9 +9,9 @@
   width: 100%;
   // // Make inputs at least the height of their button counterpart (base line-height + padding + border)
   // height: $input-height;
-  padding: $input-padding-y $input-padding-x;
+  padding: $input-btn-padding-y $input-btn-padding-x;
   font-size: $font-size-base;
-  line-height: $input-line-height;
+  line-height: $input-btn-line-height;
   color: $input-color;
   background-color: $input-bg;
   // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214.
@@ -58,10 +58,6 @@
     // iOS fix for unreadable disabled content; see https://github.com/twbs/bootstrap/issues/11655.
     opacity: 1;
   }
-
-  &:disabled {
-    cursor: $cursor-disabled;
-  }
 }
 
 select.form-control {
@@ -95,20 +91,20 @@ select.form-control {
 // For use with horizontal and inline forms, when you need the label text to
 // align with the form controls.
 .col-form-label {
-  padding-top: calc(#{$input-padding-y} - #{$input-btn-border-width} * 2);
-  padding-bottom: calc(#{$input-padding-y} - #{$input-btn-border-width} * 2);
+  padding-top: calc(#{$input-btn-padding-y} - #{$input-btn-border-width} * 2);
+  padding-bottom: calc(#{$input-btn-padding-y} - #{$input-btn-border-width} * 2);
   margin-bottom: 0; // Override the `<label>` default
 }
 
 .col-form-label-lg {
-  padding-top: calc(#{$input-padding-y-lg} - #{$input-btn-border-width} * 2);
-  padding-bottom: calc(#{$input-padding-y-lg} - #{$input-btn-border-width} * 2);
+  padding-top: calc(#{$input-btn-padding-y-lg} - #{$input-btn-border-width} * 2);
+  padding-bottom: calc(#{$input-btn-padding-y-lg} - #{$input-btn-border-width} * 2);
   font-size: $font-size-lg;
 }
 
 .col-form-label-sm {
-  padding-top: calc(#{$input-padding-y-sm} - #{$input-btn-border-width} * 2);
-  padding-bottom: calc(#{$input-padding-y-sm} - #{$input-btn-border-width} * 2);
+  padding-top: calc(#{$input-btn-padding-y-sm} - #{$input-btn-border-width} * 2);
+  padding-bottom: calc(#{$input-btn-padding-y-sm} - #{$input-btn-border-width} * 2);
   font-size: $font-size-sm;
 }
 
@@ -120,8 +116,8 @@ select.form-control {
 // For use with horizontal and inline forms, when you need the legend text to
 // be the same size as regular labels, and to align with the form controls.
 .col-form-legend {
-  padding-top: $input-padding-y;
-  padding-bottom: $input-padding-y;
+  padding-top: $input-btn-padding-y;
+  padding-bottom: $input-btn-padding-y;
   margin-bottom: 0;
   font-size: $font-size-base;
 }
@@ -133,10 +129,10 @@ select.form-control {
 // horizontal form layout.
 
 .form-control-static {
-  padding-top: $input-padding-y;
-  padding-bottom: $input-padding-y;
+  padding-top: $input-btn-padding-y;
+  padding-bottom: $input-btn-padding-y;
   margin-bottom: 0; // match inputs if this class comes on inputs with default margins
-  line-height: $input-line-height;
+  line-height: $input-btn-line-height;
   border: solid transparent;
   border-width: $input-btn-border-width 0;
 
@@ -157,26 +153,30 @@ select.form-control {
 // issue documented in https://github.com/twbs/bootstrap/issues/15074.
 
 .form-control-sm {
-  padding: $input-padding-y-sm $input-padding-x-sm;
+  padding: $input-btn-padding-y-sm $input-btn-padding-x-sm;
   font-size: $font-size-sm;
+  line-height: $input-btn-line-height-sm;
   @include border-radius($input-border-radius-sm);
 }
 
 select.form-control-sm {
   &:not([size]):not([multiple]) {
-    height: $input-height-sm;
+    $select-border-width: ($border-width * 2);
+    height: calc(#{$input-height-sm} + #{$select-border-width});
   }
 }
 
 .form-control-lg {
-  padding: $input-padding-y-lg $input-padding-x-lg;
+  padding: $input-btn-padding-y-lg $input-btn-padding-x-lg;
   font-size: $font-size-lg;
+  line-height: $input-btn-line-height-lg;
   @include border-radius($input-border-radius-lg);
 }
 
 select.form-control-lg {
   &:not([size]):not([multiple]) {
-    height: $input-height-lg;
+    $select-border-width: ($border-width * 2);
+    height: calc(#{$input-height-lg} + #{$select-border-width});
   }
 }
 
@@ -208,7 +208,6 @@ select.form-control-lg {
   &.disabled {
     .form-check-label {
       color: $text-muted;
-      cursor: $cursor-disabled;
     }
   }
 }
@@ -216,7 +215,6 @@ select.form-control-lg {
 .form-check-label {
   padding-left: $form-check-input-gutter;
   margin-bottom: 0; // Override default `<label>` bottom margin
-  cursor: pointer;
 }
 
 .form-check-input {
@@ -254,7 +252,7 @@ select.form-control-lg {
 .form-control-success,
 .form-control-warning,
 .form-control-danger {
-  padding-right: ($input-padding-x * 3);
+  padding-right: ($input-btn-padding-x * 3);
   background-repeat: no-repeat;
   background-position: center right ($input-height / 4);
   background-size: ($input-height / 2) ($input-height / 2);
diff --git a/assets/stylesheets/bootstrap/_grid.scss b/assets/stylesheets/bootstrap/_grid.scss
index 8c7a9ee..9ab9ae0 100644
--- a/assets/stylesheets/bootstrap/_grid.scss
+++ b/assets/stylesheets/bootstrap/_grid.scss
@@ -11,11 +11,12 @@
 
 // Fluid container
 //
-// Utilizes the mixin meant for fixed width containers, but without any defined
-// width for fluid, full width layouts.
+// Utilizes the mixin meant for fixed width containers, but with 100% width for
+// fluid, full width layouts.
 
 @if $enable-grid-classes {
   .container-fluid {
+    width: 100%;
     @include make-container();
   }
 }
diff --git a/assets/stylesheets/bootstrap/_images.scss b/assets/stylesheets/bootstrap/_images.scss
index a8135a6..50c5610 100644
--- a/assets/stylesheets/bootstrap/_images.scss
+++ b/assets/stylesheets/bootstrap/_images.scss
@@ -33,7 +33,7 @@
 }
 
 .figure-img {
-  margin-bottom: ($spacer-y / 2);
+  margin-bottom: ($spacer / 2);
   line-height: 1;
 }
 
diff --git a/assets/stylesheets/bootstrap/_input-group.scss b/assets/stylesheets/bootstrap/_input-group.scss
index ab44883..0b668bf 100644
--- a/assets/stylesheets/bootstrap/_input-group.scss
+++ b/assets/stylesheets/bootstrap/_input-group.scss
@@ -30,8 +30,7 @@
 .input-group .form-control {
   // Vertically centers the content of the addons within the input group
   display: flex;
-  flex-direction: column;
-  justify-content: center;
+  align-items: center;
 
   &:not(:first-child):not(:last-child) {
     @include border-radius(0);
@@ -67,11 +66,11 @@
 //
 
 .input-group-addon {
-  padding: $input-padding-y $input-padding-x;
+  padding: $input-btn-padding-y $input-btn-padding-x;
   margin-bottom: 0; // Allow use of <label> elements by overriding our default margin-bottom
   font-size: $font-size-base; // Match inputs
   font-weight: $font-weight-normal;
-  line-height: $input-line-height;
+  line-height: $input-btn-line-height;
   color: $input-color;
   text-align: center;
   background-color: $input-group-addon-bg;
@@ -80,12 +79,13 @@
 
   // Sizing
   &.form-control-sm {
-    padding: $input-padding-y-sm $input-padding-x-sm;
+    padding: $input-btn-padding-y-sm $input-btn-padding-x-sm;
     font-size: $font-size-sm;
     @include border-radius($input-border-radius-sm);
   }
+
   &.form-control-lg {
-    padding: $input-padding-y-lg $input-padding-x-lg;
+    padding: $input-btn-padding-y-lg $input-btn-padding-x-lg;
     font-size: $font-size-lg;
     @include border-radius($input-border-radius-lg);
   }
@@ -144,8 +144,6 @@
   // element above the siblings.
   > .btn {
     position: relative;
-    // Vertically stretch the button and center its content
-    flex: 1;
 
     + .btn {
       margin-left: (-$input-btn-border-width);
diff --git a/assets/stylesheets/bootstrap/_jumbotron.scss b/assets/stylesheets/bootstrap/_jumbotron.scss
index b12d465..7966bba 100644
--- a/assets/stylesheets/bootstrap/_jumbotron.scss
+++ b/assets/stylesheets/bootstrap/_jumbotron.scss
@@ -9,10 +9,6 @@
   }
 }
 
-.jumbotron-hr {
-  border-top-color: darken($jumbotron-bg, 10%);
-}
-
 .jumbotron-fluid {
   padding-right: 0;
   padding-left: 0;
diff --git a/assets/stylesheets/bootstrap/_list-group.scss b/assets/stylesheets/bootstrap/_list-group.scss
index ec813c8..fef2c15 100644
--- a/assets/stylesheets/bootstrap/_list-group.scss
+++ b/assets/stylesheets/bootstrap/_list-group.scss
@@ -22,10 +22,6 @@
   color: $list-group-link-color;
   text-align: inherit; // For `<button>`s (anchors inherit)
 
-  .list-group-item-heading {
-    color: $list-group-link-heading-color;
-  }
-
   // Hover state
   @include hover-focus {
     color: $list-group-link-hover-color;
@@ -46,9 +42,7 @@
 
 .list-group-item {
   position: relative;
-  display: flex;
-  flex-flow: row wrap;
-  align-items: center;
+  display: block;
   padding: $list-group-item-padding-y $list-group-item-padding-x;
   // Place the border on the list items and negative margin up for better styling
   margin-bottom: -$list-group-border-width;
@@ -71,16 +65,7 @@
   &.disabled,
   &:disabled {
     color: $list-group-disabled-color;
-    cursor: $cursor-disabled;
     background-color: $list-group-disabled-bg;
-
-    // Force color to inherit for custom content
-    .list-group-item-heading {
-      color: inherit;
-    }
-    .list-group-item-text {
-      color: $list-group-disabled-text-color;
-    }
   }
 
   // Include both here for `<a>`s and `<button>`s
@@ -88,18 +73,7 @@
     z-index: 2; // Place active items above their siblings for proper border styling
     color: $list-group-active-color;
     background-color: $list-group-active-bg;
-    border-color: $list-group-active-border;
-
-    // Force color to inherit for custom content
-    .list-group-item-heading,
-    .list-group-item-heading > small,
-    .list-group-item-heading > .small {
-      color: inherit;
-    }
-
-    .list-group-item-text {
-      color: $list-group-active-text-color;
-    }
+    border-color: $list-group-active-border-color;
   }
 }
 
diff --git a/assets/stylesheets/bootstrap/_mixins.scss b/assets/stylesheets/bootstrap/_mixins.scss
index da47382..cc3394f 100644
--- a/assets/stylesheets/bootstrap/_mixins.scss
+++ b/assets/stylesheets/bootstrap/_mixins.scss
@@ -2,22 +2,6 @@
 //
 // Used in conjunction with global variables to enable certain theme features.
 
-@mixin box-shadow($shadow...) {
-  @if $enable-shadows {
-    box-shadow: $shadow;
-  }
-}
-
-@mixin transition($transition...) {
-  @if $enable-transitions {
-    @if length($transition) == 0 {
-      transition: $transition-base;
-    } @else {
-      transition: $transition;
-    }
-  }
-}
-
 // Utilities
 @import "mixins/breakpoints";
 @import "mixins/hover";
@@ -30,7 +14,6 @@
 @import "mixins/text-emphasis";
 @import "mixins/text-hide";
 @import "mixins/text-truncate";
-@import "mixins/transforms";
 @import "mixins/visibility";
 
 // // Components
@@ -47,7 +30,9 @@
 // // Skins
 @import "mixins/background-variant";
 @import "mixins/border-radius";
+@import "mixins/box-shadow";
 @import "mixins/gradients";
+@import "mixins/transition";
 
 // // Layout
 @import "mixins/clearfix";
diff --git a/assets/stylesheets/bootstrap/_nav.scss b/assets/stylesheets/bootstrap/_nav.scss
index eb316bb..973679e 100644
--- a/assets/stylesheets/bootstrap/_nav.scss
+++ b/assets/stylesheets/bootstrap/_nav.scss
@@ -5,6 +5,7 @@
 
 .nav {
   display: flex;
+  flex-wrap: wrap;
   padding-left: 0;
   margin-bottom: 0;
   list-style: none;
@@ -12,20 +13,18 @@
 
 .nav-link {
   display: block;
-  padding: $nav-link-padding;
+  padding: $nav-link-padding-y $nav-link-padding-x;
 
   @include hover-focus {
     text-decoration: none;
   }
 
-  // Disabled state lightens text and removes hover/tab effects
+  // Disabled state lightens text
   &.disabled {
     color: $nav-disabled-link-color;
-    cursor: $cursor-disabled;
   }
 }
 
-
 //
 // Tabs
 //
@@ -54,9 +53,9 @@
 
   .nav-link.active,
   .nav-item.show .nav-link {
-    color: $nav-tabs-active-link-hover-color;
-    background-color: $nav-tabs-active-link-hover-bg;
-    border-color: $nav-tabs-active-link-hover-border-color $nav-tabs-active-link-hover-border-color $nav-tabs-active-link-hover-bg;
+    color: $nav-tabs-active-link-color;
+    background-color: $nav-tabs-active-link-bg;
+    border-color: $nav-tabs-active-link-border-color $nav-tabs-active-link-border-color $nav-tabs-active-link-bg;
   }
 
   .dropdown-menu {
@@ -75,13 +74,12 @@
 .nav-pills {
   .nav-link {
     @include border-radius($nav-pills-border-radius);
-  }
 
-  .nav-link.active,
-  .nav-item.show .nav-link {
-    color: $nav-pills-active-link-color;
-    cursor: default;
-    background-color: $nav-pills-active-link-bg;
+    &.active,
+    .show & {
+      color: $nav-pills-active-link-color;
+      background-color: $nav-pills-active-link-bg;
+    }
   }
 }
 
@@ -99,7 +97,8 @@
 
 .nav-justified {
   .nav-item {
-    flex: 1 1 100%;
+    flex-basis: 0;
+    flex-grow: 1;
     text-align: center;
   }
 }
diff --git a/assets/stylesheets/bootstrap/_navbar.scss b/assets/stylesheets/bootstrap/_navbar.scss
index 80beec8..59cc52d 100644
--- a/assets/stylesheets/bootstrap/_navbar.scss
+++ b/assets/stylesheets/bootstrap/_navbar.scss
@@ -18,8 +18,26 @@
 .navbar {
   position: relative;
   display: flex;
-  flex-direction: column;
+  flex-wrap: wrap; // allow us to do the line break for collapsing content
+  align-items: center;
+  justify-content: space-between; // space out brand from logo
   padding: $navbar-padding-y $navbar-padding-x;
+
+  // Because flex properties aren't inherited, we need to redeclare these first
+  // few properities so that content nested within behave properly.
+  > .container,
+  > .container-fluid {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: space-between;
+
+    @include media-breakpoint-down(nth(map-keys($grid-breakpoints), 1)) {
+      width: 100%; // prevent flex parent container from collapsing
+      margin-right: 0;
+      margin-left: 0;
+    }
+  }
 }
 
 
@@ -29,10 +47,10 @@
 
 .navbar-brand {
   display: inline-block;
-  padding-top: .25rem;
-  padding-bottom: .25rem;
+  padding-top: $navbar-brand-padding-y;
+  padding-bottom: $navbar-brand-padding-y;
   margin-right: $navbar-padding-x;
-  font-size: $font-size-lg;
+  font-size: $navbar-brand-font-size;
   line-height: inherit;
   white-space: nowrap;
 
@@ -57,6 +75,12 @@
     padding-right: 0;
     padding-left: 0;
   }
+
+  .dropdown-menu {
+    position: static !important;
+    float: none;
+    transform: unset !important;
+  }
 }
 
 
@@ -66,8 +90,8 @@
 
 .navbar-text {
   display: inline-block;
-  padding-top:    .425rem;
-  padding-bottom: .425rem;
+  padding-top: $nav-link-padding-y;
+  padding-bottom: $nav-link-padding-y;
 }
 
 
@@ -76,9 +100,15 @@
 // Custom styles for responsive collapsing and toggling of navbar contents.
 // Powered by the collapse Bootstrap JavaScript plugin.
 
+// When collapsed, prevent the toggleable navbar contents from appearing in
+// the default flexbox row orienation. Requires the use of `flex-wrap: wrap`
+// on the `.navbar` parent.
+.navbar-collapse {
+  flex-basis: 100%;
+}
+
 // Button for toggling the navbar when in its collapsed state
 .navbar-toggler {
-  align-self: flex-start; // Prevent toggler from growing to full width when it's the only visible navbar child
   padding: $navbar-toggler-padding-y $navbar-toggler-padding-x;
   font-size: $navbar-toggler-font-size;
   line-height: 1;
@@ -103,34 +133,17 @@
   background-size: 100% 100%;
 }
 
-// Use `position` on the toggler to prevent it from being auto placed as a flex
-// item and allow easy placement.
-.navbar-toggler-left {
-  position: absolute;
-  left: $navbar-padding-x;
-}
-.navbar-toggler-right {
-  position: absolute;
-  right: $navbar-padding-x;
-}
-
-// Generate series of `.navbar-toggleable-*` responsive classes for configuring
+// Generate series of `.navbar-expand-*` responsive classes for configuring
 // where your navbar collapses.
-.navbar-toggleable {
+.navbar-expand {
   @each $breakpoint in map-keys($grid-breakpoints) {
     $next: breakpoint-next($breakpoint, $grid-breakpoints);
-    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+    $infix: breakpoint-infix($next, $grid-breakpoints);
 
     &#{$infix} {
       @include media-breakpoint-down($breakpoint) {
-        .navbar-nav {
-          .dropdown-menu {
-            position: static;
-            float: none;
-          }
-        }
-
-        > .container {
+        > .container,
+        > .container-fluid {
           padding-right: 0;
           padding-left: 0;
         }
@@ -139,11 +152,16 @@
       @include media-breakpoint-up($next) {
         flex-direction: row;
         flex-wrap: nowrap;
-        align-items: center;
+        justify-content: flex-start;
 
         .navbar-nav {
           flex-direction: row;
 
+          .dropdown-menu {
+            position: absolute !important;
+            top: 100% !important;
+          }
+
           .nav-link {
             padding-right: .5rem;
             padding-left: .5rem;
@@ -151,16 +169,14 @@
         }
 
         // For nesting containers, have to redeclare for alignment purposes
-        > .container {
-          display: flex;
+        > .container,
+        > .container-fluid {
           flex-wrap: nowrap;
-          align-items: center;
         }
 
         // scss-lint:disable ImportantRule
         .navbar-collapse {
           display: flex !important;
-          width: 100%;
         }
         // scss-lint:enable ImportantRule
 
@@ -179,8 +195,7 @@
 
 // Dark links against a light background
 .navbar-light {
-  .navbar-brand,
-  .navbar-toggler {
+  .navbar-brand {
     color: $navbar-light-active-color;
 
     @include hover-focus {
@@ -201,20 +216,21 @@
       }
     }
 
-    .open > .nav-link,
+    .show > .nav-link,
     .active > .nav-link,
-    .nav-link.open,
+    .nav-link.show,
     .nav-link.active {
       color: $navbar-light-active-color;
     }
   }
 
   .navbar-toggler {
-    border-color: $navbar-light-toggler-border;
+    color: $navbar-light-color;
+    border-color: $navbar-light-toggler-border-color;
   }
 
   .navbar-toggler-icon {
-    background-image: $navbar-light-toggler-bg;
+    background-image: $navbar-light-toggler-icon-bg;
   }
 
   .navbar-text {
@@ -224,8 +240,7 @@
 
 // White links against a dark background
 .navbar-inverse {
-  .navbar-brand,
-  .navbar-toggler {
+  .navbar-brand {
     color: $navbar-inverse-active-color;
 
     @include hover-focus {
@@ -246,20 +261,21 @@
       }
     }
 
-    .open > .nav-link,
+    .show > .nav-link,
     .active > .nav-link,
-    .nav-link.open,
+    .nav-link.show,
     .nav-link.active {
       color: $navbar-inverse-active-color;
     }
   }
 
   .navbar-toggler {
-    border-color: $navbar-inverse-toggler-border;
+    color: $navbar-inverse-color;
+    border-color: $navbar-inverse-toggler-border-color;
   }
 
   .navbar-toggler-icon {
-    background-image: $navbar-inverse-toggler-bg;
+    background-image: $navbar-inverse-toggler-icon-bg;
   }
 
   .navbar-text {
diff --git a/assets/stylesheets/bootstrap/_normalize.scss b/assets/stylesheets/bootstrap/_normalize.scss
deleted file mode 100644
index 6bafd53..0000000
--- a/assets/stylesheets/bootstrap/_normalize.scss
+++ /dev/null
@@ -1,461 +0,0 @@
-/*! normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css */
-
-//
-// 1. Change the default font family in all browsers (opinionated).
-// 2. Correct the line height in all browsers.
-// 3. Prevent adjustments of font size after orientation changes in
-//    IE on Windows Phone and in iOS.
-//
-
-// Document
-// ==========================================================================
-
-html {
-  font-family: sans-serif; // 1
-  line-height: 1.15; // 2
-  -ms-text-size-adjust: 100%; // 3
-  -webkit-text-size-adjust: 100%; // 3
-}
-
-// Sections
-// ==========================================================================
-
-//
-// Remove the margin in all browsers (opinionated).
-//
-
-body {
-  margin: 0;
-}
-
-//
-// Add the correct display in IE 9-.
-//
-
-article,
-aside,
-footer,
-header,
-nav,
-section {
-  display: block;
-}
-
-//
-// Correct the font size and margin on `h1` elements within `section` and
-// `article` contexts in Chrome, Firefox, and Safari.
-//
-
-h1 {
-  font-size: 2em;
-  margin: 0.67em 0;
-}
-
-// Grouping content
-// ==========================================================================
-
-//
-// Add the correct display in IE 9-.
-// 1. Add the correct display in IE.
-//
-
-figcaption,
-figure,
-main { // 1
-  display: block;
-}
-
-//
-// Add the correct margin in IE 8.
-//
-
-figure {
-  margin: 1em 40px;
-}
-
-//
-// 1. Add the correct box sizing in Firefox.
-// 2. Show the overflow in Edge and IE.
-//
-
-hr {
-  box-sizing: content-box; // 1
-  height: 0; // 1
-  overflow: visible; // 2
-}
-
-//
-// 1. Correct the inheritance and scaling of font size in all browsers.
-// 2. Correct the odd `em` font sizing in all browsers.
-//
-
-pre {
-  font-family: monospace, monospace; // 1
-  font-size: 1em; // 2
-}
-
-// Text-level semantics
-// ==========================================================================
-
-//
-// 1. Remove the gray background on active links in IE 10.
-// 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
-//
-
-a {
-  background-color: transparent; // 1
-  -webkit-text-decoration-skip: objects; // 2
-}
-
-//
-// Remove the outline on focused links when they are also active or hovered
-// in all browsers (opinionated).
-//
-
-a:active,
-a:hover {
-  outline-width: 0;
-}
-
-//
-// 1. Remove the bottom border in Firefox 39-.
-// 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
-//
-
-abbr[title] {
-  border-bottom: none; // 1
-  text-decoration: underline; // 2
-  text-decoration: underline dotted; // 2
-}
-
-//
-// Prevent the duplicate application of `bolder` by the next rule in Safari 6.
-//
-
-b,
-strong {
-  font-weight: inherit;
-}
-
-//
-// Add the correct font weight in Chrome, Edge, and Safari.
-//
-
-b,
-strong {
-  font-weight: bolder;
-}
-
-//
-// 1. Correct the inheritance and scaling of font size in all browsers.
-// 2. Correct the odd `em` font sizing in all browsers.
-//
-
-code,
-kbd,
-samp {
-  font-family: monospace, monospace; // 1
-  font-size: 1em; // 2
-}
-
-//
-// Add the correct font style in Android 4.3-.
-//
-
-dfn {
-  font-style: italic;
-}
-
-//
-// Add the correct background and color in IE 9-.
-//
-
-mark {
-  background-color: #ff0;
-  color: #000;
-}
-
-//
-// Add the correct font size in all browsers.
-//
-
-small {
-  font-size: 80%;
-}
-
-//
-// Prevent `sub` and `sup` elements from affecting the line height in
-// all browsers.
-//
-
-sub,
-sup {
-  font-size: 75%;
-  line-height: 0;
-  position: relative;
-  vertical-align: baseline;
-}
-
-sub {
-  bottom: -0.25em;
-}
-
-sup {
-  top: -0.5em;
-}
-
-// Embedded content
-// ==========================================================================
-
-//
-// Add the correct display in IE 9-.
-//
-
-audio,
-video {
-  display: inline-block;
-}
-
-//
-// Add the correct display in iOS 4-7.
-//
-
-audio:not([controls]) {
-  display: none;
-  height: 0;
-}
-
-//
-// Remove the border on images inside links in IE 10-.
-//
-
-img {
-  border-style: none;
-}
-
-//
-// Hide the overflow in IE.
-//
-
-svg:not(:root) {
-  overflow: hidden;
-}
-
-// Forms
-// ==========================================================================
-
-//
-// 1. Change the font styles in all browsers (opinionated).
-// 2. Remove the margin in Firefox and Safari.
-//
-
-button,
-input,
-optgroup,
-select,
-textarea {
-  font-family: sans-serif; // 1
-  font-size: 100%; // 1
-  line-height: 1.15; // 1
-  margin: 0; // 2
-}
-
-//
-// Show the overflow in IE.
-// 1. Show the overflow in Edge.
-//
-
-button,
-input { // 1
-  overflow: visible;
-}
-
-//
-// Remove the inheritance of text transform in Edge, Firefox, and IE.
-// 1. Remove the inheritance of text transform in Firefox.
-//
-
-button,
-select { // 1
-  text-transform: none;
-}
-
-//
-// 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
-//    controls in Android 4.
-// 2. Correct the inability to style clickable types in iOS and Safari.
-//
-
-button,
-html [type="button"], // 1
-[type="reset"],
-[type="submit"] {
-  -webkit-appearance: button; // 2
-}
-
-//
-// Remove the inner border and padding in Firefox.
-//
-
-button::-moz-focus-inner,
-[type="button"]::-moz-focus-inner,
-[type="reset"]::-moz-focus-inner,
-[type="submit"]::-moz-focus-inner {
-  border-style: none;
-  padding: 0;
-}
-
-//
-// Restore the focus styles unset by the previous rule.
-//
-
-button:-moz-focusring,
-[type="button"]:-moz-focusring,
-[type="reset"]:-moz-focusring,
-[type="submit"]:-moz-focusring {
-  outline: 1px dotted ButtonText;
-}
-
-//
-// Change the border, margin, and padding in all browsers (opinionated).
-//
-
-fieldset {
-  border: 1px solid #c0c0c0;
-  margin: 0 2px;
-  padding: 0.35em 0.625em 0.75em;
-}
-
-//
-// 1. Correct the text wrapping in Edge and IE.
-// 2. Correct the color inheritance from `fieldset` elements in IE.
-// 3. Remove the padding so developers are not caught out when they zero out
-//    `fieldset` elements in all browsers.
-//
-
-legend {
-  box-sizing: border-box; // 1
-  color: inherit; // 2
-  display: table; // 1
-  max-width: 100%; // 1
-  padding: 0; // 3
-  white-space: normal; // 1
-}
-
-//
-// 1. Add the correct display in IE 9-.
-// 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
-//
-
-progress {
-  display: inline-block; // 1
-  vertical-align: baseline; // 2
-}
-
-//
-// Remove the default vertical scrollbar in IE.
-//
-
-textarea {
-  overflow: auto;
-}
-
-//
-// 1. Add the correct box sizing in IE 10-.
-// 2. Remove the padding in IE 10-.
-//
-
-[type="checkbox"],
-[type="radio"] {
-  box-sizing: border-box; // 1
-  padding: 0; // 2
-}
-
-//
-// Correct the cursor style of increment and decrement buttons in Chrome.
-//
-
-[type="number"]::-webkit-inner-spin-button,
-[type="number"]::-webkit-outer-spin-button {
-  height: auto;
-}
-
-//
-// 1. Correct the odd appearance in Chrome and Safari.
-// 2. Correct the outline style in Safari.
-//
-
-[type="search"] {
-  -webkit-appearance: textfield; // 1
-  outline-offset: -2px; // 2
-}
-
-//
-// Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
-//
-
-[type="search"]::-webkit-search-cancel-button,
-[type="search"]::-webkit-search-decoration {
-  -webkit-appearance: none;
-}
-
-//
-// 1. Correct the inability to style clickable types in iOS and Safari.
-// 2. Change font properties to `inherit` in Safari.
-//
-
-::-webkit-file-upload-button {
-  -webkit-appearance: button; // 1
-  font: inherit; // 2
-}
-
-// Interactive
-// ==========================================================================
-
-//
-// Add the correct display in IE 9-.
-// 1. Add the correct display in Edge, IE, and Firefox.
-//
-
-details, // 1
-menu {
-  display: block;
-}
-
-//
-// Add the correct display in all browsers.
-//
-
-summary {
-  display: list-item;
-}
-
-// Scripting
-// ==========================================================================
-
-//
-// Add the correct display in IE 9-.
-//
-
-canvas {
-  display: inline-block;
-}
-
-//
-// Add the correct display in IE.
-//
-
-template {
-  display: none;
-}
-
-// Hidden
-// ==========================================================================
-
-//
-// Add the correct display in IE 10-.
-//
-
-[hidden] {
-  display: none;
-}
diff --git a/assets/stylesheets/bootstrap/_pagination.scss b/assets/stylesheets/bootstrap/_pagination.scss
index 24aa028..a049299 100644
--- a/assets/stylesheets/bootstrap/_pagination.scss
+++ b/assets/stylesheets/bootstrap/_pagination.scss
@@ -23,15 +23,14 @@
     z-index: 2;
     color: $pagination-active-color;
     background-color: $pagination-active-bg;
-    border-color: $pagination-active-border;
+    border-color: $pagination-active-border-color;
   }
 
   &.disabled .page-link {
     color: $pagination-disabled-color;
     pointer-events: none;
-    cursor: $cursor-disabled; // While `pointer-events: none` removes the cursor in modern browsers, we provide a disabled cursor as a fallback.
     background-color: $pagination-disabled-bg;
-    border-color: $pagination-disabled-border;
+    border-color: $pagination-disabled-border-color;
   }
 }
 
@@ -49,7 +48,7 @@
     color: $pagination-hover-color;
     text-decoration: none;
     background-color: $pagination-hover-bg;
-    border-color: $pagination-hover-border;
+    border-color: $pagination-hover-border-color;
   }
 }
 
diff --git a/assets/stylesheets/bootstrap/_popover.scss b/assets/stylesheets/bootstrap/_popover.scss
index 1b63634..e3a0d9d 100644
--- a/assets/stylesheets/bootstrap/_popover.scss
+++ b/assets/stylesheets/bootstrap/_popover.scss
@@ -18,75 +18,106 @@
   @include border-radius($border-radius-lg);
   @include box-shadow($popover-box-shadow);
 
+  // Arrows
+  //
+  // .arrow is outer, .arrow::after is inner
+
+  .arrow {
+    position: absolute;
+    display: block;
+    width: $popover-arrow-width;
+    height: $popover-arrow-height;
+  }
+
+  .arrow::before,
+  .arrow::after {
+    position: absolute;
+    display: block;
+    border-color: transparent;
+    border-style: solid;
+  }
+
+  .arrow::before {
+    content: "";
+    border-width: $popover-arrow-outer-width;
+  }
+  .arrow::after {
+    content: "";
+    border-width: $popover-arrow-outer-width;
+  }
 
   // Popover directions
 
-  &.popover-top,
-  &.bs-tether-element-attached-bottom {
-    margin-top: -$popover-arrow-width;
+  &.bs-popover-top {
+    margin-bottom: $popover-arrow-width;
 
-    &::before,
-    &::after {
-      left: 50%;
+    .arrow {
+      bottom: 0;
+    }
+
+    .arrow::before,
+    .arrow::after {
       border-bottom-width: 0;
     }
 
-    &::before {
+    .arrow::before {
       bottom: -$popover-arrow-outer-width;
-      margin-left: -$popover-arrow-outer-width;
+      margin-left: -($popover-arrow-outer-width - 5);
       border-top-color: $popover-arrow-outer-color;
     }
 
-    &::after {
+    .arrow::after {
       bottom: -($popover-arrow-outer-width - 1);
-      margin-left: -$popover-arrow-width;
+      margin-left: -($popover-arrow-outer-width - 5);
       border-top-color: $popover-arrow-color;
     }
   }
 
-  &.popover-right,
-  &.bs-tether-element-attached-left {
+  &.bs-popover-right {
     margin-left: $popover-arrow-width;
 
-    &::before,
-    &::after {
-      top: 50%;
+    .arrow {
+      left: 0;
+    }
+
+    .arrow::before,
+    .arrow::after {
+      margin-top: -($popover-arrow-outer-width - 3);
       border-left-width: 0;
     }
 
-    &::before {
+    .arrow::before {
       left: -$popover-arrow-outer-width;
-      margin-top: -$popover-arrow-outer-width;
       border-right-color: $popover-arrow-outer-color;
     }
 
-    &::after {
+    .arrow::after {
       left: -($popover-arrow-outer-width - 1);
-      margin-top: -($popover-arrow-outer-width - 1);
       border-right-color: $popover-arrow-color;
     }
   }
 
-  &.popover-bottom,
-  &.bs-tether-element-attached-top {
+  &.bs-popover-bottom {
     margin-top: $popover-arrow-width;
 
-    &::before,
-    &::after {
-      left: 50%;
+    .arrow {
+      top: 0;
+    }
+
+    .arrow::before,
+    .arrow::after {
+      margin-left: -($popover-arrow-width - 3);
       border-top-width: 0;
     }
 
-    &::before {
+    .arrow::before {
       top: -$popover-arrow-outer-width;
-      margin-left: -$popover-arrow-outer-width;
       border-bottom-color: $popover-arrow-outer-color;
     }
 
-    &::after {
+    .arrow::after {
       top: -($popover-arrow-outer-width - 1);
-      margin-left: -$popover-arrow-width;
-      border-bottom-color: $popover-title-bg;
+      border-bottom-color: $popover-arrow-color;
     }
 
     // This will remove the popover-title's border just below the arrow
@@ -102,28 +133,43 @@
     }
   }
 
-  &.popover-left,
-  &.bs-tether-element-attached-right {
-    margin-left: -$popover-arrow-width;
+  &.bs-popover-left {
+    margin-right: $popover-arrow-width;
 
-    &::before,
-    &::after {
-      top: 50%;
+    .arrow {
+      right: 0;
+    }
+
+    .arrow::before,
+    .arrow::after {
+      margin-top: -($popover-arrow-outer-width - 3);
       border-right-width: 0;
     }
 
-    &::before {
+    .arrow::before {
       right: -$popover-arrow-outer-width;
-      margin-top: -$popover-arrow-outer-width;
       border-left-color: $popover-arrow-outer-color;
     }
 
-    &::after {
+    .arrow::after {
       right: -($popover-arrow-outer-width - 1);
-      margin-top: -($popover-arrow-outer-width - 1);
       border-left-color: $popover-arrow-color;
     }
   }
+  &.bs-popover-auto {
+    &[x-placement^="top"] {
+      @extend .bs-popover-top;
+    }
+    &[x-placement^="right"] {
+      @extend .bs-popover-right;
+    }
+    &[x-placement^="bottom"] {
+      @extend .bs-popover-bottom;
+    }
+    &[x-placement^="left"] {
+      @extend .bs-popover-left;
+    }
+  }
 }
 
 
@@ -132,6 +178,7 @@
   padding: $popover-title-padding-y $popover-title-padding-x;
   margin-bottom: 0; // Reset the default from Reboot
   font-size: $font-size-base;
+  color: $popover-title-color;
   background-color: $popover-title-bg;
   border-bottom: $popover-border-width solid darken($popover-title-bg, 5%);
   $offset-border-width: calc(#{$border-radius-lg} - #{$popover-border-width});
@@ -144,28 +191,5 @@
 
 .popover-content {
   padding: $popover-content-padding-y $popover-content-padding-x;
-}
-
-
-// Arrows
-//
-// .popover-arrow is outer, .popover-arrow::after is inner
-
-.popover::before,
-.popover::after {
-  position: absolute;
-  display: block;
-  width: 0;
-  height: 0;
-  border-color: transparent;
-  border-style: solid;
-}
-
-.popover::before {
-  content: "";
-  border-width: $popover-arrow-outer-width;
-}
-.popover::after {
-  content: "";
-  border-width: $popover-arrow-width;
+  color: $popover-content-color;
 }
diff --git a/assets/stylesheets/bootstrap/_progress.scss b/assets/stylesheets/bootstrap/_progress.scss
index 02e4c3b..f7491a6 100644
--- a/assets/stylesheets/bootstrap/_progress.scss
+++ b/assets/stylesheets/bootstrap/_progress.scss
@@ -1,10 +1,8 @@
-// Progress animations
 @keyframes progress-bar-stripes {
   from { background-position: $progress-height 0; }
   to { background-position: 0 0; }
 }
 
-// Basic progress bar
 .progress {
   display: flex;
   overflow: hidden; // force rounded corners by cropping it
@@ -13,20 +11,22 @@
   text-align: center;
   background-color: $progress-bg;
   @include border-radius($progress-border-radius);
+  @include box-shadow($progress-box-shadow);
 }
+
 .progress-bar {
   height: $progress-height;
+  line-height: $progress-height;
   color: $progress-bar-color;
   background-color: $progress-bar-bg;
+  @include transition($progress-bar-transition);
 }
 
-// Striped
 .progress-bar-striped {
   @include gradient-striped();
   background-size: $progress-height $progress-height;
 }
 
-// Animated
 .progress-bar-animated {
   animation: progress-bar-stripes $progress-bar-animation-timing;
 }
diff --git a/assets/stylesheets/bootstrap/_reboot.scss b/assets/stylesheets/bootstrap/_reboot.scss
index 557829f..33fc2d6 100644
--- a/assets/stylesheets/bootstrap/_reboot.scss
+++ b/assets/stylesheets/bootstrap/_reboot.scss
@@ -1,86 +1,62 @@
-// scss-lint:disable QualifyingElement, DuplicateProperty
+// scss-lint:disable QualifyingElement, DuplicateProperty, VendorPrefix
 
 // Reboot
 //
-// Global resets to common HTML elements and more for easier usage by Bootstrap.
-// Adds additional rules on top of Normalize.css, including several overrides.
+// Normalization of HTML elements, manually forked from Normalize.css to remove
+// styles targeting irrelevant browsers while applying new styles.
+//
+// Normalize is licensed MIT. https://github.com/necolas/normalize.css
 
 
-// Reset the box-sizing
-//
-// Change from `box-sizing: content-box` to `border-box` so that when you add
-// `padding` or `border`s to an element, the overall declared `width` does not
-// change. For example, `width: 100px;` will always be `100px` despite the
-// `border: 10px solid red;` and `padding: 20px;`.
-//
-// Heads up! This reset may cause conflicts with some third-party widgets. For
-// recommendations on resolving such conflicts, see
-// https://getbootstrap.com/getting-started/#third-box-sizing.
+// Document
 //
-// Credit: https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/
+// 1. Change from `box-sizing: content-box` so that `width` is not affected by `padding` or `border`.
+// 2. Change the default font family in all browsers.
+// 3. Correct the line height in all browsers.
+// 4. Prevent adjustments of font size after orientation changes in IE on Windows Phone and in iOS.
+// 5. Setting @viewport causes scrollbars to overlap content in IE11 and Edge, so
+//    we force a non-overlapping, non-auto-hiding scrollbar to counteract.
+// 6. Change the default tap highlight to be completely transparent in iOS.
 
 html {
-  box-sizing: border-box;
+  box-sizing: border-box; // 1
+  font-family: sans-serif; // 2
+  line-height: 1.15; // 3
+  -webkit-text-size-adjust: 100%; // 4
+  -ms-text-size-adjust: 100%; // 4
+  -ms-overflow-style: scrollbar; // 5
+  -webkit-tap-highlight-color: rgba(0,0,0,0); // 6
 }
 
 *,
 *::before,
 *::after {
-  box-sizing: inherit;
+  box-sizing: inherit; // 1
 }
 
-
-// Make viewport responsive
-//
-// @viewport is needed because IE 10+ doesn't honor <meta name="viewport"> in
-// some cases. See https://timkadlec.com/2012/10/ie10-snap-mode-and-responsive-design/.
-// Eventually @viewport will replace <meta name="viewport">.
-//
-// However, `device-width` is broken on IE 10 on Windows (Phone) 8,
-// (see https://timkadlec.com/2013/01/windows-phone-8-and-device-width/ and https://github.com/twbs/bootstrap/issues/10497)
-// and the fix for that involves a snippet of JavaScript to sniff the user agent
-// and apply some conditional CSS.
-//
-// See https://getbootstrap.com/getting-started/#support-ie10-width for the relevant hack.
-//
-// Wrap `@viewport` with `@at-root` for when folks do a nested import (e.g.,
-// `.class-name { @import "bootstrap"; }`).
+// IE10+ doesn't honor `<meta name="viewport">` in some cases.
 @at-root {
   @-ms-viewport { width: device-width; }
 }
 
+// Shim for "new" HTML5 structural elements to display correctly (IE10, older browsers)
+article, aside, dialog, figcaption, figure, footer, header, hgroup, main, nav, section {
+  display: block;
+}
 
+// Body
 //
-// Reset HTML, body, and more
-//
-
-html {
-  // We assume no initial pixel `font-size` for accessibility reasons. This
-  // allows web visitors to customize their browser default font-size, making
-  // your project more inclusive and accessible to everyone.
-
-  // As a side-effect of setting the @viewport above,
-  // IE11 & Edge make the scrollbar overlap the content and automatically hide itself when not in use.
-  // Unfortunately, the auto-showing of the scrollbar is sometimes too sensitive,
-  // thus making it hard to click on stuff near the right edge of the page.
-  // So we add this style to force IE11 & Edge to use a "normal", non-overlapping, non-auto-hiding scrollbar.
-  // See https://github.com/twbs/bootstrap/issues/18543
-  // and https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/7165383/
-  -ms-overflow-style: scrollbar;
-
-  // Changes the default tap highlight to be completely transparent in iOS.
-  -webkit-tap-highlight-color: rgba(0,0,0,0);
-}
+// 1. Remove the margin in all browsers.
+// 2. As a best practice, apply a default `background-color`.
 
 body {
+  margin: 0; // 1
   font-family: $font-family-base;
   font-size: $font-size-base;
   font-weight: $font-weight-base;
   line-height: $line-height-base;
-  // Go easy on the eyes and use something other than `#000` for text
   color: $body-color;
-  // By default, `<body>` has no `background-color` so we set one as a best practice.
-  background-color: $body-bg;
+  background-color: $body-bg; // 2
 }
 
 // Suppress the focus outline on elements that cannot be accessed via keyboard.
@@ -93,6 +69,18 @@ body {
 }
 
 
+// Content grouping
+//
+// 1. Add the correct box sizing in Firefox.
+// 2. Show the overflow in Edge and IE.
+
+hr {
+  box-sizing: content-box; // 1
+  height: 0; // 1
+  overflow: visible; // 2
+}
+
+
 //
 // Typography
 //
@@ -116,10 +104,18 @@ p {
 }
 
 // Abbreviations
+//
+// 1. Remove the bottom border in Firefox 39-.
+// 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+// 3. Add explicit cursor to indicate changed behavior.
+// 4. Duplicate behavior to the data-* attribute for our tooltip plugin
+
 abbr[title],
-// Add data-* attribute to help out our tooltip plugin, per https://github.com/twbs/bootstrap/issues/5257
-abbr[data-original-title] {
-  cursor: help;
+abbr[data-original-title] { // 4
+  text-decoration: underline; // 2
+  text-decoration: underline dotted; // 2
+  cursor: help; // 3
+  border-bottom: 0; // 1
 }
 
 address {
@@ -155,6 +151,35 @@ blockquote {
   margin: 0 0 1rem;
 }
 
+dfn {
+  font-style: italic; // Add the correct font style in Android 4.3-
+}
+
+b,
+strong {
+  font-weight: bolder; // Add the correct font weight in Chrome, Edge, and Safari
+}
+
+small {
+  font-size: 80%; // Add the correct font size in all browsers
+}
+
+//
+// Prevent `sub` and `sup` elements from affecting the line height in
+// all browsers.
+//
+
+sub,
+sup {
+  position: relative;
+  font-size: 75%;
+  line-height: 0;
+  vertical-align: baseline;
+}
+
+sub { bottom: -.25em; }
+sup { top: -.5em; }
+
 
 //
 // Links
@@ -163,8 +188,10 @@ blockquote {
 a {
   color: $link-color;
   text-decoration: $link-decoration;
+  background-color: transparent; // Remove the gray background on active links in IE 10.
+  -webkit-text-decoration-skip: objects; // Remove gaps in links underline in iOS 8+ and Safari 8+.
 
-  @include hover-focus {
+  @include hover {
     color: $link-hover-color;
     text-decoration: $link-hover-decoration;
   }
@@ -195,12 +222,20 @@ a:not([href]):not([tabindex]) {
 // Code
 //
 
+pre,
+code,
+kbd,
+samp {
+  font-family: monospace, monospace; // Correct the inheritance and scaling of font size in all browsers.
+  font-size: 1em; // Correct the odd `em` font sizing in all browsers.
+}
+
 pre {
   // Remove browser default top margin
   margin-top: 0;
   // Reset browser default of `1em` to use `rem`s
   margin-bottom: 1rem;
-  // Normalize v4 removed this property, causing `<pre>` content to break out of wrapping code snippets
+  // Don't allow content to break outside
   overflow: auto;
 }
 
@@ -210,33 +245,22 @@ pre {
 //
 
 figure {
-  // Normalize adds `margin` to `figure`s as browsers apply it inconsistently.
-  // We reset that to create a better flow in-page.
+  // Apply a consistent margin strategy (matches our type styles).
   margin: 0 0 1rem;
 }
 
 
 //
-// Images
+// Images and content
 //
 
 img {
-  // By default, `<img>`s are `inline-block`. This assumes that, and vertically
-  // centers them. This won't apply should you reset them to `block` level.
   vertical-align: middle;
-  // Note: `<img>`s are deliberately not made responsive by default.
-  // For the rationale behind this, see the comments on the `.img-fluid` class.
+  border-style: none; // Remove the border on images inside links in IE 10-.
 }
 
-
-// iOS "clickable elements" fix for role="button"
-//
-// Fixes "clickability" issue (and more generally, the firing of events such as focus as well)
-// for traditionally non-focusable elements with role="button"
-// see https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile
-
-[role="button"] {
-  cursor: pointer;
+svg:not(:root) {
+  overflow: hidden; // Hide the overflow in IE
 }
 
 
@@ -268,10 +292,7 @@ textarea {
 //
 
 table {
-  // No longer part of Normalize since v4
-  border-collapse: collapse;
-  // Reset for nesting within parents with `background-color`.
-  background-color: $table-bg;
+  border-collapse: collapse; // Prevent double borders
 }
 
 caption {
@@ -283,7 +304,7 @@ caption {
 }
 
 th {
-  // Centered by default, but left-align-ed to match the `td`s below.
+  // Matches default `<td>` alignment
   text-align: left;
 }
 
@@ -310,20 +331,47 @@ button:focus {
 input,
 button,
 select,
+optgroup,
 textarea {
-  // Normalize includes `font: inherit;`, so `font-family`. `font-size`, etc are
-  // properly inherited. However, `line-height` isn't inherited there.
+  margin: 0; // Remove the margin in Firefox and Safari
+  font-family: inherit;
+  font-size: inherit;
   line-height: inherit;
 }
 
+button,
+input {
+  overflow: visible; // Show the overflow in Edge
+}
+
+button,
+select {
+  text-transform: none; // Remove the inheritance of text transform in Firefox
+}
+
+// 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
+//    controls in Android 4.
+// 2. Correct the inability to style clickable types in iOS and Safari.
+button,
+html [type="button"], // 1
+[type="reset"],
+[type="submit"] {
+  -webkit-appearance: button; // 2
+}
+
+// Remove inner border and padding from Firefox, but don't restore the outline like Normalize.
+button::-moz-focus-inner,
+[type="button"]::-moz-focus-inner,
+[type="reset"]::-moz-focus-inner,
+[type="submit"]::-moz-focus-inner {
+  padding: 0;
+  border-style: none;
+}
+
 input[type="radio"],
 input[type="checkbox"] {
-  // Apply a disabled cursor for radios and checkboxes.
-  //
-  // Note: Neither radios nor checkboxes can be readonly.
-  &:disabled {
-    cursor: $cursor-disabled;
-  }
+  box-sizing: border-box; // 1. Add the correct box sizing in IE 10-
+  padding: 0; // 2. Remove the padding in IE 10-
 }
 
 
@@ -340,6 +388,7 @@ input[type="month"] {
 }
 
 textarea {
+  overflow: auto; // Remove the default vertical scrollbar in IE.
   // Textareas should really only resize vertically so they don't break their (horizontal) containers.
   resize: vertical;
 }
@@ -357,33 +406,76 @@ fieldset {
   border: 0;
 }
 
+// 1. Correct the text wrapping in Edge and IE.
+// 2. Correct the color inheritance from `fieldset` elements in IE.
 legend {
-  // Reset the entire legend element to match the `fieldset`
   display: block;
   width: 100%;
+  max-width: 100%; // 1
   padding: 0;
   margin-bottom: .5rem;
   font-size: 1.5rem;
   line-height: inherit;
+  color: inherit; // 2
+  white-space: normal; // 1
+}
+
+progress {
+  vertical-align: baseline; // Add the correct vertical alignment in Chrome, Firefox, and Opera.
+}
+
+// Correct the cursor style of increment and decrement buttons in Chrome.
+[type="number"]::-webkit-inner-spin-button,
+[type="number"]::-webkit-outer-spin-button {
+  height: auto;
 }
 
-input[type="search"] {
+[type="search"] {
   // This overrides the extra rounded corners on search inputs in iOS so that our
   // `.form-control` class can properly style them. Note that this cannot simply
   // be added to `.form-control` as it's not specific enough. For details, see
   // https://github.com/twbs/bootstrap/issues/11586.
+  outline-offset: -2px; // 2. Correct the outline style in Safari.
+  -webkit-appearance: none;
+}
+
+//
+// Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
+//
+
+[type="search"]::-webkit-search-cancel-button,
+[type="search"]::-webkit-search-decoration {
   -webkit-appearance: none;
 }
 
-// todo: needed?
+//
+// 1. Correct the inability to style clickable types in iOS and Safari.
+// 2. Change font properties to `inherit` in Safari.
+//
+
+::-webkit-file-upload-button {
+  font: inherit; // 2
+  -webkit-appearance: button; // 1
+}
+
+//
+// Correct element displays
+//
+
 output {
   display: inline-block;
-//  font-size: $font-size-base;
-//  line-height: $line-height;
-//  color: $input-color;
+}
+
+summary {
+  display: list-item; // Add the correct display in all browsers
+}
+
+template {
+  display: none; // Add the correct display in IE
 }
 
 // Always hide an element with the `hidden` HTML attribute (from PureCSS).
+// Needed for proper display in IE 10-.
 [hidden] {
   display: none !important;
 }
diff --git a/assets/stylesheets/bootstrap/_tables.scss b/assets/stylesheets/bootstrap/_tables.scss
index 47be2c5..36c3dab 100644
--- a/assets/stylesheets/bootstrap/_tables.scss
+++ b/assets/stylesheets/bootstrap/_tables.scss
@@ -6,6 +6,7 @@
   width: 100%;
   max-width: 100%;
   margin-bottom: $spacer;
+  background-color: $table-bg; // Reset for nesting within parents with `background-color`.
 
   th,
   td {
@@ -124,14 +125,27 @@
   th,
   td,
   thead th {
-    border-color: $body-bg;
+    border-color: $table-inverse-border-color;
   }
 
   &.table-bordered {
     border: 0;
   }
-}
 
+  &.table-striped {
+    tbody tr:nth-of-type(odd) {
+      background-color: $table-inverse-bg-accent;
+    }
+  }
+
+  &.table-hover {
+    tbody tr {
+      @include hover {
+        background-color: $table-inverse-bg-hover;
+      }
+    }
+  }
+}
 
 
 // Responsive tables
@@ -141,13 +155,15 @@
 // will display normally.
 
 .table-responsive {
-  display: block;
-  width: 100%;
-  overflow-x: auto;
-  -ms-overflow-style: -ms-autohiding-scrollbar; // See https://github.com/twbs/bootstrap/pull/10057
-
-  // Prevent double border on horizontal scroll due to use of `display: block;`
-  &.table-bordered {
-    border: 0;
+  @include media-breakpoint-down(md) {
+    display: block;
+    width: 100%;
+    overflow-x: auto;
+    -ms-overflow-style: -ms-autohiding-scrollbar; // See https://github.com/twbs/bootstrap/pull/10057
+
+    // Prevent double border on horizontal scroll due to use of `display: block;`
+    &.table-bordered {
+      border: 0;
+    }
   }
 }
diff --git a/assets/stylesheets/bootstrap/_tooltip.scss b/assets/stylesheets/bootstrap/_tooltip.scss
index 24e198d..fe97fbb 100644
--- a/assets/stylesheets/bootstrap/_tooltip.scss
+++ b/assets/stylesheets/bootstrap/_tooltip.scss
@@ -3,6 +3,7 @@
   position: absolute;
   z-index: $zindex-tooltip;
   display: block;
+  margin: $tooltip-margin;
   // Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element.
   // So reset our font and text properties to avoid inheriting weird values.
   @include reset-text();
@@ -13,62 +14,86 @@
 
   &.show { opacity: $tooltip-opacity; }
 
-  &.tooltip-top,
-  &.bs-tether-element-attached-bottom {
-    padding: $tooltip-arrow-width 0;
-    margin-top: -$tooltip-margin;
+  .arrow {
+    position: absolute;
+    display: block;
+    width: $tooltip-arrow-width;
+    height: $tooltip-arrow-height;
+  }
 
-    .tooltip-inner::before {
+  &.bs-tooltip-top {
+    padding: $tooltip-arrow-width 0;
+    .arrow {
       bottom: 0;
-      left: 50%;
-      margin-left: -$tooltip-arrow-width;
+    }
+
+    .arrow::before {
+      margin-left: -($tooltip-arrow-width - 2);
       content: "";
       border-width: $tooltip-arrow-width $tooltip-arrow-width 0;
       border-top-color: $tooltip-arrow-color;
     }
   }
-  &.tooltip-right,
-  &.bs-tether-element-attached-left {
+  &.bs-tooltip-right {
     padding: 0 $tooltip-arrow-width;
-    margin-left: $tooltip-margin;
-
-    .tooltip-inner::before {
-      top: 50%;
+    .arrow {
       left: 0;
-      margin-top: -$tooltip-arrow-width;
+    }
+
+    .arrow::before {
+      margin-top: -($tooltip-arrow-width - 2);
       content: "";
       border-width: $tooltip-arrow-width $tooltip-arrow-width $tooltip-arrow-width 0;
       border-right-color: $tooltip-arrow-color;
     }
   }
-  &.tooltip-bottom,
-  &.bs-tether-element-attached-top {
+  &.bs-tooltip-bottom {
     padding: $tooltip-arrow-width 0;
-    margin-top: $tooltip-margin;
-
-    .tooltip-inner::before {
+    .arrow {
       top: 0;
-      left: 50%;
-      margin-left: -$tooltip-arrow-width;
+    }
+
+    .arrow::before {
+      margin-left: -($tooltip-arrow-width - 2);
       content: "";
       border-width: 0 $tooltip-arrow-width $tooltip-arrow-width;
       border-bottom-color: $tooltip-arrow-color;
     }
   }
-  &.tooltip-left,
-  &.bs-tether-element-attached-right {
+  &.bs-tooltip-left {
     padding: 0 $tooltip-arrow-width;
-    margin-left: -$tooltip-margin;
+    .arrow {
+      right: 0;
+    }
 
-    .tooltip-inner::before {
-      top: 50%;
+    .arrow::before {
       right: 0;
-      margin-top: -$tooltip-arrow-width;
+      margin-top: -($tooltip-arrow-width - 2);
       content: "";
       border-width: $tooltip-arrow-width 0 $tooltip-arrow-width $tooltip-arrow-width;
       border-left-color: $tooltip-arrow-color;
     }
   }
+  &.bs-tooltip-auto {
+    &[x-placement^="top"] {
+      @extend .bs-tooltip-top;
+    }
+    &[x-placement^="right"] {
+      @extend .bs-tooltip-right;
+    }
+    &[x-placement^="bottom"] {
+      @extend .bs-tooltip-bottom;
+    }
+    &[x-placement^="left"] {
+      @extend .bs-tooltip-left;
+    }
+  }
+
+  .arrow::before {
+    position: absolute;
+    border-color: transparent;
+    border-style: solid;
+  }
 }
 
 // Wrapper for the tooltip content
@@ -79,12 +104,4 @@
   text-align: center;
   background-color: $tooltip-bg;
   @include border-radius($border-radius);
-
-  &::before {
-    position: absolute;
-    width: 0;
-    height: 0;
-    border-color: transparent;
-    border-style: solid;
-  }
 }
diff --git a/assets/stylesheets/bootstrap/_type.scss b/assets/stylesheets/bootstrap/_type.scss
index 13a64b0..fc9c791 100644
--- a/assets/stylesheets/bootstrap/_type.scss
+++ b/assets/stylesheets/bootstrap/_type.scss
@@ -51,8 +51,8 @@ h6, .h6 { font-size: $font-size-h6; }
 //
 
 hr {
-  margin-top: $spacer-y;
-  margin-bottom: $spacer-y;
+  margin-top: 1rem;
+  margin-bottom: 1rem;
   border: 0;
   border-top: $hr-border-width solid $hr-border-color;
 }
diff --git a/assets/stylesheets/bootstrap/_variables.scss b/assets/stylesheets/bootstrap/_variables.scss
index 36dc429..20826e8 100644
--- a/assets/stylesheets/bootstrap/_variables.scss
+++ b/assets/stylesheets/bootstrap/_variables.scss
@@ -21,8 +21,8 @@
 // Forms
 // Dropdowns
 // Z-index master list
-// Navbar
 // Navs
+// Navbar
 // Pagination
 // Jumbotron
 // Form states and alerts
@@ -138,36 +138,15 @@ $enable-print-styles:       true !default;
 // variables. Mostly focused on spacing.
 // You can add more entries to the $spacers map, should you need more variation.
 
-$spacer:   1rem !default;
-$spacer-x: $spacer !default;
-$spacer-y: $spacer !default;
+$spacer: 1rem !default;
 $spacers: (
-  0: (
-    x: 0,
-    y: 0
-  ),
-  1: (
-    x: ($spacer-x * .25),
-    y: ($spacer-y * .25)
-  ),
-  2: (
-    x: ($spacer-x * .5),
-    y: ($spacer-y * .5)
-  ),
-  3: (
-    x: $spacer-x,
-    y: $spacer-y
-  ),
-  4: (
-    x: ($spacer-x * 1.5),
-    y: ($spacer-y * 1.5)
-  ),
-  5: (
-    x: ($spacer-x * 3),
-    y: ($spacer-y * 3)
-  )
+  0: 0,
+  1: ($spacer * .25),
+  2: ($spacer * .5),
+  3: $spacer,
+  4: ($spacer * 1.5),
+  5: ($spacer * 3)
 ) !default;
-$border-width: 1px !default;
 
 // This variable affects the `.h-*` and `.w-*` classes.
 $sizes: (
@@ -183,9 +162,6 @@ $sizes: (
 
 $body-bg:       $white !default;
 $body-color:    $gray-dark !default;
-$inverse-bg:    $gray-dark !default;
-$inverse-color: $gray-lighter !default;
-
 
 // Links
 //
@@ -240,12 +216,35 @@ $grid-gutter-widths: (
   xl: $grid-gutter-width-base
 ) !default;
 
+
+// Components
+//
+// Define common padding and border radius sizes and more.
+
+$line-height-lg:         1.5 !default;
+$line-height-sm:         1.5 !default;
+
+$border-width: 1px !default;
+
+$border-radius:          .25rem !default;
+$border-radius-lg:       .3rem !default;
+$border-radius-sm:       .2rem !default;
+
+$component-active-color: $white !default;
+$component-active-bg:    $brand-primary !default;
+
+$caret-width:            .3em !default;
+
+$transition-base:        all .2s ease-in-out !default;
+$transition-fade:        opacity .15s linear !default;
+$transition-collapse:    height .35s ease !default;
+
+
 // Fonts
 //
 // Font, line-height, and color for body text, headings, and more.
 
-$font-family-sans-serif: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !default;
-$font-family-serif:      Georgia, "Times New Roman", Times, serif !default;
+$font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !default;
 $font-family-monospace:  Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default;
 $font-family-base:       $font-family-sans-serif !default;
 
@@ -291,8 +290,6 @@ $small-font-size: 80% !default;
 
 $text-muted: $gray-light !default;
 
-$abbr-border-color: $gray-light !default;
-
 $blockquote-small-color:  $gray-light !default;
 $blockquote-font-size:    ($font-size-base * 1.25) !default;
 $blockquote-border-color: $gray-lighter !default;
@@ -311,27 +308,6 @@ $nested-kbd-font-weight: $font-weight-bold !default;
 $list-inline-padding: 5px !default;
 
 
-// Components
-//
-// Define common padding and border radius sizes and more.
-
-$line-height-lg:         (4 / 3) !default;
-$line-height-sm:         1.5 !default;
-
-$border-radius:          .25rem !default;
-$border-radius-lg:       .3rem !default;
-$border-radius-sm:       .2rem !default;
-
-$component-active-color: $white !default;
-$component-active-bg:    $brand-primary !default;
-
-$caret-width:            .3em !default;
-
-$transition-base:        all .2s ease-in-out !default;
-$transition-fade:        opacity .15s linear !default;
-$transition-collapse:    height .35s ease !default;
-
-
 // Tables
 //
 // Customizes the `.table` component with basic values, each used across all table variations.
@@ -340,28 +316,39 @@ $table-cell-padding:            .75rem !default;
 $table-sm-cell-padding:         .3rem !default;
 
 $table-bg:                      transparent !default;
-
-$table-inverse-bg:              $gray-dark !default;
-$table-inverse-color:           $body-bg !default;
-
 $table-bg-accent:               rgba($black,.05) !default;
 $table-bg-hover:                rgba($black,.075) !default;
 $table-bg-active:               $table-bg-hover !default;
 
+$table-border-width:            $border-width !default;
+$table-border-color:            $gray-lighter !default;
+
 $table-head-bg:                 $gray-lighter !default;
 $table-head-color:              $gray !default;
 
-$table-border-width:            $border-width !default;
-$table-border-color:            $gray-lighter !default;
+$table-inverse-bg:              $gray-dark !default;
+$table-inverse-bg-accent:       rgba($white, .05) !default;
+$table-inverse-bg-hover:        rgba($white, .075) !default;
+$table-inverse-border-color:    lighten($gray-dark, 7.5%) !default;
+$table-inverse-color:           $body-bg !default;
 
 
 // Buttons
 //
 // For each of Bootstrap's buttons, define text, background and border color.
 
-$btn-padding-x:                  1rem !default;
-$btn-padding-y:                  .5rem !default;
-$btn-line-height:                1.25 !default;
+$input-btn-padding-y:       .5rem !default;
+$input-btn-padding-x:       1rem !default;
+$input-btn-line-height:     1.25 !default;
+
+$input-btn-padding-y-sm:    .25rem !default;
+$input-btn-padding-x-sm:    .5rem !default;
+$input-btn-line-height-sm:  1.5 !default;
+
+$input-btn-padding-y-lg:    .5rem !default;
+$input-btn-padding-x-lg:    1rem !default;
+$input-btn-line-height-lg:  1.5 !default;
+
 $btn-font-weight:                $font-weight-normal !default;
 $btn-box-shadow:                 inset 0 1px 0 rgba($white,.15), 0 1px 1px rgba($black,.075) !default;
 $btn-focus-box-shadow:           0 0 0 2px rgba($brand-primary, .25) !default;
@@ -369,38 +356,31 @@ $btn-active-box-shadow:          inset 0 3px 5px rgba($black,.125) !default;
 
 $btn-primary-color:              $white !default;
 $btn-primary-bg:                 $brand-primary !default;
-$btn-primary-border:             $btn-primary-bg !default;
+$btn-primary-border-color:       $btn-primary-bg !default;
 
 $btn-secondary-color:            $gray-dark !default;
 $btn-secondary-bg:               $white !default;
-$btn-secondary-border:           #ccc !default;
+$btn-secondary-border-color:     #ccc !default;
 
 $btn-info-color:                 $white !default;
 $btn-info-bg:                    $brand-info !default;
-$btn-info-border:                $btn-info-bg !default;
+$btn-info-border-color:          $btn-info-bg !default;
 
 $btn-success-color:              $white !default;
 $btn-success-bg:                 $brand-success !default;
-$btn-success-border:             $btn-success-bg !default;
+$btn-success-border-color:       $btn-success-bg !default;
 
 $btn-warning-color:              $white !default;
 $btn-warning-bg:                 $brand-warning !default;
-$btn-warning-border:             $btn-warning-bg !default;
+$btn-warning-border-color:       $btn-warning-bg !default;
 
 $btn-danger-color:               $white !default;
 $btn-danger-bg:                  $brand-danger !default;
-$btn-danger-border:              $btn-danger-bg !default;
+$btn-danger-border-color:        $btn-danger-bg !default;
 
 $btn-link-disabled-color:        $gray-light !default;
 
-$btn-padding-x-sm:               .5rem !default;
-$btn-padding-y-sm:               .25rem !default;
-
-$btn-padding-x-lg:               1.5rem !default;
-$btn-padding-y-lg:               .75rem !default;
-
 $btn-block-spacing-y:            .5rem !default;
-$btn-toolbar-margin:             .5rem !default;
 
 // Allows for customizing button radius independently from global border radius
 $btn-border-radius:              $border-radius !default;
@@ -412,10 +392,6 @@ $btn-transition:                 all .2s ease-in-out !default;
 
 // Forms
 
-$input-padding-x:                .75rem !default;
-$input-padding-y:                .5rem !default;
-$input-line-height:              1.25 !default;
-
 $input-bg:                       $white !default;
 $input-bg-disabled:              $gray-lighter !default;
 
@@ -429,21 +405,15 @@ $input-border-radius-lg:         $border-radius-lg !default;
 $input-border-radius-sm:         $border-radius-sm !default;
 
 $input-bg-focus:                 $input-bg !default;
-$input-border-focus:             lighten($brand-primary, 25%) !default;
-$input-box-shadow-focus:         $input-box-shadow, rgba($input-border-focus, .6) !default;
+$input-border-color-focus:       lighten($brand-primary, 25%) !default;
+$input-box-shadow-focus:         $input-box-shadow, rgba($input-border-color-focus, .6) !default;
 $input-color-focus:              $input-color !default;
 
 $input-color-placeholder:        $gray-light !default;
 
-$input-padding-x-sm:             .5rem !default;
-$input-padding-y-sm:             .25rem !default;
-
-$input-padding-x-lg:             1.5rem !default;
-$input-padding-y-lg:             .75rem !default;
-
-$input-height:                   (($font-size-base * $input-line-height) + ($input-padding-y * 2)) !default;
-$input-height-lg:                (($font-size-lg * $line-height-lg) + ($input-padding-y-lg * 2)) !default;
-$input-height-sm:                (($font-size-sm * $line-height-sm) + ($input-padding-y-sm * 2)) !default;
+$input-height:                   (($font-size-base * $input-btn-line-height) + ($input-btn-padding-y * 2)) !default;
+$input-height-lg:                (($font-size-lg * $input-btn-line-height-lg) + ($input-btn-padding-y-lg * 2)) !default;
+$input-height-sm:                (($font-size-sm * $input-btn-line-height-sm) + ($input-btn-padding-y-sm * 2)) !default;
 
 $input-transition:               border-color ease-in-out .15s, box-shadow ease-in-out .15s !default;
 
@@ -457,24 +427,20 @@ $form-check-input-margin-x: .25rem !default;
 
 $form-check-inline-margin-x: .75rem !default;
 
-$form-group-margin-bottom:       $spacer-y !default;
+$form-group-margin-bottom:       1rem !default;
 
 $input-group-addon-bg:           $gray-lighter !default;
 $input-group-addon-border-color: $input-border-color !default;
 
-$cursor-disabled:                not-allowed !default;
-
 $custom-control-gutter:   1.5rem !default;
-$custom-control-spacer-x: 1rem !default;
 $custom-control-spacer-y: .25rem !default;
+$custom-control-spacer-x: 1rem !default;
 
 $custom-control-indicator-size:       1rem !default;
-$custom-control-indicator-margin-y:   (($line-height-base * 1rem) - $custom-control-indicator-size) / -2 !default;
 $custom-control-indicator-bg:         #ddd !default;
 $custom-control-indicator-bg-size:    50% 50% !default;
 $custom-control-indicator-box-shadow: inset 0 .25rem .25rem rgba($black,.1) !default;
 
-$custom-control-disabled-cursor:             $cursor-disabled !default;
 $custom-control-disabled-indicator-bg:       $gray-lighter !default;
 $custom-control-disabled-description-color:  $gray-light !default;
 
@@ -499,10 +465,10 @@ $custom-checkbox-indeterminate-box-shadow: none !default;
 $custom-radio-radius: 50% !default;
 $custom-radio-checked-icon: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='#{$custom-control-checked-indicator-color}'/%3E%3C/svg%3E"), "#", "%23") !default;
 
-$custom-select-padding-x:          .75rem  !default;
 $custom-select-padding-y:          .375rem !default;
+$custom-select-padding-x:          .75rem  !default;
 $custom-select-indicator-padding:   1rem !default; // Extra padding to account for the presence of the background-image based indicator
-$custom-select-line-height:         $input-line-height !default;
+$custom-select-line-height:         $input-btn-line-height !default;
 $custom-select-color:               $input-color !default;
 $custom-select-disabled-color:      $gray-light !default;
 $custom-select-bg:            $white !default;
@@ -517,15 +483,14 @@ $custom-select-border-radius: $border-radius !default;
 $custom-select-focus-border-color: lighten($brand-primary, 25%) !default;
 $custom-select-focus-box-shadow:   inset 0 1px 2px rgba($black, .075), 0 0 5px rgba($custom-select-focus-border-color, .5) !default;
 
-$custom-select-sm-padding-y:  .2rem !default;
 $custom-select-sm-font-size:  75% !default;
 
 $custom-file-height:           2.5rem !default;
 $custom-file-width:            14rem !default;
 $custom-file-focus-box-shadow: 0 0 0 .075rem $white, 0 0 0 .2rem $brand-primary !default;
 
-$custom-file-padding-x:     .5rem !default;
 $custom-file-padding-y:     1rem !default;
+$custom-file-padding-x:     .5rem !default;
 $custom-file-line-height:   1.5 !default;
 $custom-file-color:         $gray !default;
 $custom-file-bg:            $white !default;
@@ -553,7 +518,7 @@ $form-icon-warning-color: $brand-warning !default;
 $form-icon-warning: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='#{$form-icon-warning-color}' d='M4.4 5.324h-.8v-2.46h.8zm0 1.42h-.8V5.89h.8zM3.76.63L.04 7.075c-.115.2.016.425.26.426h7.397c.242 0 .372-.226.258-.426C6.726 4.924 5.47 2.79 4.253.63c-.113-.174-.39-.174-.494 0z'/%3E%3C/svg%3E"), "#", "%23") !default;
 
 $form-icon-danger-color: $brand-danger !default;
-$form-icon-danger: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='#{$form-icon-danger-color}' viewBox='-2 -2 7 7'%3E%3Cpath stroke='%23d9534f' d='M0 0l3 3m0-3L0 3'/%3E%3Ccircle r='.5'/%3E%3Ccircle cx='3' r='.5'/%3E%3Ccircle cy='3' r='.5'/%3E%3Ccircle cx='3' cy='3' r='.5'/%3E%3C/svg%3E"), "#", "%23") !default;
+$form-icon-danger: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='#{$form-icon-danger-color}' viewBox='-2 -2 7 7'%3E%3Cpath stroke='#{$form-icon-danger-color}' d='M0 0l3 3m0-3L0 3'/%3E%3Ccircle r='.5'/%3E%3Ccircle cx='3' r='.5'/%3E%3Ccircle cy='3' r='.5'/%3E%3Ccircle cx='3' cy='3' r='.5'/%3E%3C/svg%3E"), "#", "%23") !default;
 
 
 // Dropdowns
@@ -578,6 +543,7 @@ $dropdown-link-active-bg:        $component-active-bg !default;
 
 $dropdown-link-disabled-color:   $gray-light !default;
 
+$dropdown-item-padding-y:        .25rem !default;
 $dropdown-item-padding-x:        1.5rem !default;
 
 $dropdown-header-color:          $gray-light !default;
@@ -588,27 +554,45 @@ $dropdown-header-color:          $gray-light !default;
 // Warning: Avoid customizing these values. They're used for a bird's eye view
 // of components dependent on the z-axis and are designed to all work together.
 
-$zindex-dropdown-backdrop:  990 !default;
-$zindex-navbar:             1000 !default;
 $zindex-dropdown:           1000 !default;
+$zindex-sticky:             1020 !default;
 $zindex-fixed:              1030 !default;
-$zindex-sticky:             1030 !default;
 $zindex-modal-backdrop:     1040 !default;
 $zindex-modal:              1050 !default;
 $zindex-popover:            1060 !default;
 $zindex-tooltip:            1070 !default;
 
+// Navs
+
+$nav-link-padding-y:            .5rem !default;
+$nav-link-padding-x:            1rem !default;
+$nav-disabled-link-color:       $gray-light !default;
+
+$nav-tabs-border-color:                       #ddd !default;
+$nav-tabs-border-width:                       $border-width !default;
+$nav-tabs-border-radius:                      $border-radius !default;
+$nav-tabs-link-hover-border-color:            $gray-lighter !default;
+$nav-tabs-active-link-color:                  $gray !default;
+$nav-tabs-active-link-bg:                     $body-bg !default;
+$nav-tabs-active-link-border-color:           #ddd !default;
+
+$nav-pills-border-radius:     $border-radius !default;
+$nav-pills-active-link-color: $component-active-color !default;
+$nav-pills-active-link-bg:    $component-active-bg !default;
 
 // Navbar
 
-$navbar-border-radius:              $border-radius !default;
-$navbar-padding-x:                  $spacer !default;
 $navbar-padding-y:                  ($spacer / 2) !default;
+$navbar-padding-x:                  $spacer !default;
 
-$navbar-brand-padding-y:            .25rem !default;
+$navbar-brand-font-size:            $font-size-lg !default;
+// Compute the navbar-brand padding-y so the navbar-brand will have the same height as navbar-text and nav-link
+$nav-link-height:                   $navbar-brand-font-size * $line-height-base !default;
+$navbar-brand-height:               ($font-size-base * $line-height-base + $nav-link-padding-y * 2) !default;
+$navbar-brand-padding-y:            ($navbar-brand-height - $nav-link-height) / 2 !default;
 
-$navbar-toggler-padding-x:           .75rem !default;
 $navbar-toggler-padding-y:           .25rem !default;
+$navbar-toggler-padding-x:           .75rem !default;
 $navbar-toggler-font-size:           $font-size-lg !default;
 $navbar-toggler-border-radius:       $btn-border-radius !default;
 
@@ -616,47 +600,24 @@ $navbar-inverse-color:                 rgba($white,.5) !default;
 $navbar-inverse-hover-color:           rgba($white,.75) !default;
 $navbar-inverse-active-color:          rgba($white,1) !default;
 $navbar-inverse-disabled-color:        rgba($white,.25) !default;
-$navbar-inverse-toggler-bg: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{$navbar-inverse-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E"), "#", "%23") !default;
-$navbar-inverse-toggler-border:        rgba($white,.1) !default;
+$navbar-inverse-toggler-icon-bg: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{$navbar-inverse-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"), "#", "%23") !default;
+$navbar-inverse-toggler-border-color:  rgba($white,.1) !default;
 
 $navbar-light-color:                rgba($black,.5) !default;
 $navbar-light-hover-color:          rgba($black,.7) !default;
 $navbar-light-active-color:         rgba($black,.9) !default;
 $navbar-light-disabled-color:       rgba($black,.3) !default;
-$navbar-light-toggler-bg: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{$navbar-light-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E"), "#", "%23") !default;
-$navbar-light-toggler-border:       rgba($black,.1) !default;
-
-// Navs
-
-$nav-item-margin:               .2rem !default;
-$nav-item-inline-spacer:        1rem !default;
-$nav-link-padding:              .5em 1em !default;
-$nav-link-hover-bg:             $gray-lighter !default;
-$nav-disabled-link-color:       $gray-light !default;
-
-$nav-tabs-border-color:                       #ddd !default;
-$nav-tabs-border-width:                       $border-width !default;
-$nav-tabs-border-radius:                      $border-radius !default;
-$nav-tabs-link-hover-border-color:            $gray-lighter !default;
-$nav-tabs-active-link-hover-color:            $gray !default;
-$nav-tabs-active-link-hover-bg:               $body-bg !default;
-$nav-tabs-active-link-hover-border-color:     #ddd !default;
-$nav-tabs-justified-link-border-color:        #ddd !default;
-$nav-tabs-justified-active-link-border-color: $body-bg !default;
-
-$nav-pills-border-radius:     $border-radius !default;
-$nav-pills-active-link-color: $component-active-color !default;
-$nav-pills-active-link-bg:    $component-active-bg !default;
-
+$navbar-light-toggler-icon-bg: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{$navbar-light-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"), "#", "%23") !default;
+$navbar-light-toggler-border-color: rgba($black,.1) !default;
 
 // Pagination
 
-$pagination-padding-x:                .75rem !default;
 $pagination-padding-y:                .5rem !default;
-$pagination-padding-x-sm:             .5rem !default;
+$pagination-padding-x:                .75rem !default;
 $pagination-padding-y-sm:             .25rem !default;
-$pagination-padding-x-lg:             1.5rem !default;
+$pagination-padding-x-sm:             .5rem !default;
 $pagination-padding-y-lg:             .75rem !default;
+$pagination-padding-x-lg:             1.5rem !default;
 $pagination-line-height:              1.25 !default;
 
 $pagination-color:                     $link-color !default;
@@ -666,15 +627,15 @@ $pagination-border-color:              #ddd !default;
 
 $pagination-hover-color:               $link-hover-color !default;
 $pagination-hover-bg:                  $gray-lighter !default;
-$pagination-hover-border:              #ddd !default;
+$pagination-hover-border-color:        #ddd !default;
 
 $pagination-active-color:              $white !default;
 $pagination-active-bg:                 $brand-primary !default;
-$pagination-active-border:             $brand-primary !default;
+$pagination-active-border-color:       $brand-primary !default;
 
 $pagination-disabled-color:            $gray-light !default;
 $pagination-disabled-bg:               $white !default;
-$pagination-disabled-border:           #ddd !default;
+$pagination-disabled-border-color:     #ddd !default;
 
 
 // Jumbotron
@@ -689,26 +650,26 @@ $jumbotron-bg:                   $gray-lighter !default;
 
 $state-success-text:             #3c763d !default;
 $state-success-bg:               #dff0d8 !default;
-$state-success-border:           darken($state-success-bg, 5%) !default;
+$state-success-border-color:     darken($state-success-bg, 5%) !default;
 
 $state-info-text:                #31708f !default;
 $state-info-bg:                  #d9edf7 !default;
-$state-info-border:              darken($state-info-bg, 7%) !default;
+$state-info-border-color:        darken($state-info-bg, 7%) !default;
 
 $state-warning-text:             #8a6d3b !default;
 $state-warning-bg:               #fcf8e3 !default;
 $mark-bg:                        $state-warning-bg !default;
-$state-warning-border:           darken($state-warning-bg, 5%) !default;
+$state-warning-border-color:     darken($state-warning-bg, 5%) !default;
 
 $state-danger-text:              #a94442 !default;
 $state-danger-bg:                #f2dede !default;
-$state-danger-border:            darken($state-danger-bg, 5%) !default;
+$state-danger-border-color:      darken($state-danger-bg, 5%) !default;
 
 
 // Cards
 
-$card-spacer-x:            1.25rem !default;
 $card-spacer-y:            .75rem !default;
+$card-spacer-x:            1.25rem !default;
 $card-border-width:        1px !default;
 $card-border-radius:       $border-radius !default;
 $card-border-color:        rgba($black,.125) !default;
@@ -735,9 +696,11 @@ $tooltip-bg:                  $black !default;
 $tooltip-opacity:             .9 !default;
 $tooltip-padding-y:           3px !default;
 $tooltip-padding-x:           8px !default;
-$tooltip-margin:              3px !default;
+$tooltip-margin:              0 !default;
+
 
 $tooltip-arrow-width:         5px !default;
+$tooltip-arrow-height:        5px !default;
 $tooltip-arrow-color:         $tooltip-bg !default;
 
 
@@ -751,13 +714,16 @@ $popover-border-color:                rgba($black,.2) !default;
 $popover-box-shadow:                  0 5px 10px rgba($black,.2) !default;
 
 $popover-title-bg:                    darken($popover-bg, 3%) !default;
-$popover-title-padding-x:             14px !default;
+$popover-title-color:                 $headings-color !default;
 $popover-title-padding-y:             8px !default;
+$popover-title-padding-x:             14px !default;
 
-$popover-content-padding-x:           14px !default;
+$popover-content-color:               $body-color !default;
 $popover-content-padding-y:           9px !default;
+$popover-content-padding-x:           14px !default;
 
 $popover-arrow-width:                 10px !default;
+$popover-arrow-height:                5px !default;
 $popover-arrow-color:                 $popover-bg !default;
 
 $popover-arrow-outer-width:           ($popover-arrow-width + 1px) !default;
@@ -777,8 +743,8 @@ $badge-color:                 $white !default;
 $badge-link-hover-color:      $white !default;
 $badge-font-size:             75% !default;
 $badge-font-weight:           $font-weight-bold !default;
-$badge-padding-x:             .4em !default;
 $badge-padding-y:             .25em !default;
+$badge-padding-x:             .4em !default;
 
 $badge-pill-padding-x:        .6em !default;
 // Use a higher than normal value to ensure completely rounded edges when
@@ -821,28 +787,28 @@ $modal-transition:            transform .3s ease-out !default;
 //
 // Define alert colors, border radius, and padding.
 
-$alert-padding-x:             1.25rem !default;
 $alert-padding-y:             .75rem !default;
-$alert-margin-bottom:         $spacer-y !default;
+$alert-padding-x:             1.25rem !default;
+$alert-margin-bottom:         1rem !default;
 $alert-border-radius:         $border-radius !default;
 $alert-link-font-weight:      $font-weight-bold !default;
 $alert-border-width:          $border-width !default;
 
 $alert-success-bg:            $state-success-bg !default;
 $alert-success-text:          $state-success-text !default;
-$alert-success-border:        $state-success-border !default;
+$alert-success-border-color:  $state-success-border-color !default;
 
 $alert-info-bg:               $state-info-bg !default;
 $alert-info-text:             $state-info-text !default;
-$alert-info-border:           $state-info-border !default;
+$alert-info-border-color:     $state-info-border-color !default;
 
 $alert-warning-bg:            $state-warning-bg !default;
 $alert-warning-text:          $state-warning-text !default;
-$alert-warning-border:        $state-warning-border !default;
+$alert-warning-border-color:  $state-warning-border-color !default;
 
 $alert-danger-bg:             $state-danger-bg !default;
 $alert-danger-text:           $state-danger-text !default;
-$alert-danger-border:         $state-danger-border !default;
+$alert-danger-border-color:   $state-danger-border-color !default;
 
 
 // Progress bars
@@ -855,6 +821,7 @@ $progress-box-shadow:           inset 0 .1rem .1rem rgba($black,.1) !default;
 $progress-bar-color:            $white !default;
 $progress-bar-bg:               $brand-primary !default;
 $progress-bar-animation-timing: 1s linear infinite !default;
+$progress-bar-transition:       width .6s ease !default;
 
 // List group
 
@@ -864,21 +831,18 @@ $list-group-border-color:        rgba($black,.125) !default;
 $list-group-border-width:        $border-width !default;
 $list-group-border-radius:       $border-radius !default;
 
-$list-group-item-padding-x:      1.25rem !default;
 $list-group-item-padding-y:      .75rem !default;
+$list-group-item-padding-x:      1.25rem !default;
 
-$list-group-hover-bg:            $gray-lightest !default;
-$list-group-active-color:        $component-active-color !default;
-$list-group-active-bg:           $component-active-bg !default;
-$list-group-active-border:       $list-group-active-bg !default;
-$list-group-active-text-color:   lighten($list-group-active-bg, 50%) !default;
+$list-group-hover-bg:                 $gray-lightest !default;
+$list-group-active-color:             $component-active-color !default;
+$list-group-active-bg:                $component-active-bg !default;
+$list-group-active-border-color:      $list-group-active-bg !default;
 
 $list-group-disabled-color:      $gray-light !default;
 $list-group-disabled-bg:         $list-group-bg !default;
-$list-group-disabled-text-color: $list-group-disabled-color !default;
 
 $list-group-link-color:          $gray !default;
-$list-group-link-heading-color:  $gray-dark !default;
 $list-group-link-hover-color:    $list-group-link-color !default;
 
 $list-group-link-active-color:   $list-group-color !default;
@@ -933,7 +897,7 @@ $carousel-control-icon-width:                 20px !default;
 $carousel-control-prev-icon-bg: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' viewBox='0 0 8 8'%3E%3Cpath d='M4 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E"), "#", "%23") !default;
 $carousel-control-next-icon-bg: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' viewBox='0 0 8 8'%3E%3Cpath d='M1.5 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E"), "#", "%23") !default;
 
-$carousel-transition:           transform .6s ease-in-out !default;
+$carousel-transition:           transform .6s ease !default;
 
 
 // Close
@@ -943,19 +907,16 @@ $close-font-weight:           $font-weight-bold !default;
 $close-color:                 $black !default;
 $close-text-shadow:           0 1px 0 $white !default;
 
-
 // Code
 
 $code-font-size:              90% !default;
-$code-padding-x:              .4rem !default;
 $code-padding-y:              .2rem !default;
+$code-padding-x:              .4rem !default;
 $code-color:                  #bd4147 !default;
 $code-bg:                     $gray-lightest !default;
 
 $kbd-color:                   $white !default;
 $kbd-bg:                      $gray-dark !default;
 
-$pre-bg:                      $gray-lightest !default;
 $pre-color:                   $gray-dark !default;
-$pre-border-color:            #ccc !default;
 $pre-scrollable-max-height:   340px !default;
diff --git a/assets/stylesheets/bootstrap/mixins/_alert.scss b/assets/stylesheets/bootstrap/mixins/_alert.scss
index 6ed3a81..1e9307e 100644
--- a/assets/stylesheets/bootstrap/mixins/_alert.scss
+++ b/assets/stylesheets/bootstrap/mixins/_alert.scss
@@ -1,9 +1,9 @@
 // Alerts
 
 @mixin alert-variant($background, $border, $body-color) {
+  color: $body-color;
   background-color: $background;
   border-color: $border;
-  color: $body-color;
 
   hr {
     border-top-color: darken($border, 5%);
diff --git a/assets/stylesheets/bootstrap/mixins/_border-radius.scss b/assets/stylesheets/bootstrap/mixins/_border-radius.scss
index 54f29f4..2024feb 100644
--- a/assets/stylesheets/bootstrap/mixins/_border-radius.scss
+++ b/assets/stylesheets/bootstrap/mixins/_border-radius.scss
@@ -8,15 +8,15 @@
 
 @mixin border-top-radius($radius) {
   @if $enable-rounded {
-    border-top-right-radius: $radius;
     border-top-left-radius: $radius;
+    border-top-right-radius: $radius;
   }
 }
 
 @mixin border-right-radius($radius) {
   @if $enable-rounded {
-    border-bottom-right-radius: $radius;
     border-top-right-radius: $radius;
+    border-bottom-right-radius: $radius;
   }
 }
 
@@ -29,7 +29,7 @@
 
 @mixin border-left-radius($radius) {
   @if $enable-rounded {
-    border-bottom-left-radius: $radius;
     border-top-left-radius: $radius;
+    border-bottom-left-radius: $radius;
   }
 }
diff --git a/assets/stylesheets/bootstrap/mixins/_box-shadow.scss b/assets/stylesheets/bootstrap/mixins/_box-shadow.scss
new file mode 100644
index 0000000..b2410e5
--- /dev/null
+++ b/assets/stylesheets/bootstrap/mixins/_box-shadow.scss
@@ -0,0 +1,5 @@
+@mixin box-shadow($shadow...) {
+  @if $enable-shadows {
+    box-shadow: $shadow;
+  }
+}
diff --git a/assets/stylesheets/bootstrap/mixins/_breakpoints.scss b/assets/stylesheets/bootstrap/mixins/_breakpoints.scss
index 6fd2e8e..be1d034 100644
--- a/assets/stylesheets/bootstrap/mixins/_breakpoints.scss
+++ b/assets/stylesheets/bootstrap/mixins/_breakpoints.scss
@@ -2,7 +2,7 @@
 //
 // Breakpoints are defined as a map of (name: minimum width), order from small to large:
 //
-//    (xs: 0, sm: 576px, md: 768px)
+//    (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)
 //
 // The map defined in the `$grid-breakpoints` global variable is used as the `$breakpoints` argument by default.
 
@@ -10,9 +10,9 @@
 //
 //    >> breakpoint-next(sm)
 //    md
-//    >> breakpoint-next(sm, (xs: 0, sm: 576px, md: 768px))
+//    >> breakpoint-next(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
 //    md
-//    >> breakpoint-next(sm, $breakpoint-names: (xs sm md))
+//    >> breakpoint-next(sm, $breakpoint-names: (xs sm md lg xl))
 //    md
 @function breakpoint-next($name, $breakpoints: $grid-breakpoints, $breakpoint-names: map-keys($breakpoints)) {
   $n: index($breakpoint-names, $name);
@@ -21,7 +21,7 @@
 
 // Minimum breakpoint width. Null for the smallest (first) breakpoint.
 //
-//    >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px))
+//    >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
 //    576px
 @function breakpoint-min($name, $breakpoints: $grid-breakpoints) {
   $min: map-get($breakpoints, $name);
@@ -31,7 +31,7 @@
 // Maximum breakpoint width. Null for the largest (last) breakpoint.
 // The maximum value is calculated as the minimum of the next one less 0.1.
 //
-//    >> breakpoint-max(sm, (xs: 0, sm: 576px, md: 768px))
+//    >> breakpoint-max(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
 //    767px
 @function breakpoint-max($name, $breakpoints: $grid-breakpoints) {
   $next: breakpoint-next($name, $breakpoints);
@@ -41,9 +41,9 @@
 // Returns a blank string if smallest breakpoint, otherwise returns the name with a dash infront.
 // Useful for making responsive utilities.
 //
-//    >> breakpoint-infix(xs, (xs: 0, sm: 576px, md: 768px))
+//    >> breakpoint-infix(xs, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
 //    ""  (Returns a blank string)
-//    >> breakpoint-infix(sm, (xs: 0, sm: 576px, md: 768px))
+//    >> breakpoint-infix(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
 //    "-sm"
 @function breakpoint-infix($name, $breakpoints: $grid-breakpoints) {
   @return if(breakpoint-min($name, $breakpoints) == null, "", "-#{$name}");
@@ -78,10 +78,11 @@
 // Media that spans multiple breakpoint widths.
 // Makes the @content apply between the min and max breakpoints
 @mixin media-breakpoint-between($lower, $upper, $breakpoints: $grid-breakpoints) {
-  @include media-breakpoint-up($lower, $breakpoints) {
-    @include media-breakpoint-down($upper, $breakpoints) {
-      @content;
-    }
+  $min: breakpoint-max($lower, $breakpoints);
+  $max: breakpoint-max($upper, $breakpoints);
+
+  @media (min-width: $min) and (max-width: $max) {
+    @content;
   }
 }
 
@@ -89,7 +90,10 @@
 // No minimum for the smallest breakpoint, and no maximum for the largest one.
 // Makes the @content apply only to the given breakpoint, not viewports any wider or narrower.
 @mixin media-breakpoint-only($name, $breakpoints: $grid-breakpoints) {
-  @include media-breakpoint-between($name, $name, $breakpoints) {
+  $min: breakpoint-min($name, $breakpoints);
+  $max: breakpoint-max($name, $breakpoints);
+
+  @media (min-width: $min) and (max-width: $max) {
     @content;
   }
 }
diff --git a/assets/stylesheets/bootstrap/mixins/_buttons.scss b/assets/stylesheets/bootstrap/mixins/_buttons.scss
index f9981e3..47f2834 100644
--- a/assets/stylesheets/bootstrap/mixins/_buttons.scss
+++ b/assets/stylesheets/bootstrap/mixins/_buttons.scss
@@ -48,8 +48,8 @@
 
 @mixin button-outline-variant($color, $color-hover: #fff) {
   color: $color;
-  background-image: none;
   background-color: transparent;
+  background-image: none;
   border-color: $color;
 
   @include hover {
@@ -79,8 +79,9 @@
 }
 
 // Button sizes
-@mixin button-size($padding-y, $padding-x, $font-size, $border-radius) {
+@mixin button-size($padding-y, $padding-x, $font-size, $line-height, $border-radius) {
   padding: $padding-y $padding-x;
   font-size: $font-size;
+  line-height: $line-height;
   @include border-radius($border-radius);
 }
diff --git a/assets/stylesheets/bootstrap/mixins/_cards.scss b/assets/stylesheets/bootstrap/mixins/_cards.scss
index 4b1232d..e535b31 100644
--- a/assets/stylesheets/bootstrap/mixins/_cards.scss
+++ b/assets/stylesheets/bootstrap/mixins/_cards.scss
@@ -13,6 +13,12 @@
 @mixin card-outline-variant($color) {
   background-color: transparent;
   border-color: $color;
+
+  .card-header,
+  .card-footer {
+    background-color: transparent;
+    border-color: $color;
+  }
 }
 
 //
diff --git a/assets/stylesheets/bootstrap/mixins/_clearfix.scss b/assets/stylesheets/bootstrap/mixins/_clearfix.scss
index b72cf27..11a977b 100644
--- a/assets/stylesheets/bootstrap/mixins/_clearfix.scss
+++ b/assets/stylesheets/bootstrap/mixins/_clearfix.scss
@@ -1,7 +1,7 @@
 @mixin clearfix() {
   &::after {
     display: block;
-    content: "";
     clear: both;
+    content: "";
   }
 }
diff --git a/assets/stylesheets/bootstrap/mixins/_forms.scss b/assets/stylesheets/bootstrap/mixins/_forms.scss
index c8aea96..8607955 100644
--- a/assets/stylesheets/bootstrap/mixins/_forms.scss
+++ b/assets/stylesheets/bootstrap/mixins/_forms.scss
@@ -14,7 +14,9 @@
   }
 
   // Set the border and box shadow on specific inputs to match
-  .form-control {
+  .form-control,
+  .custom-select,
+  .custom-file-control {
     border-color: $color;
 
     &:focus {
@@ -25,15 +27,15 @@
   // Set validation states also for addons
   .input-group-addon {
     color: $color;
-    border-color: $color;
     background-color: lighten($color, 40%);
+    border-color: $color;
   }
 }
 
 // Form control focus state
 //
 // Generate a customized focus state and for any input with the specified color,
-// which defaults to the `@input-border-focus` variable.
+// which defaults to the `@input-border-color-focus` variable.
 //
 // We highly encourage you to not customize the default value, but instead use
 // this to tweak colors on an as-needed basis. This aesthetic change is based on
@@ -46,34 +48,8 @@
   &:focus {
     color: $input-color-focus;
     background-color: $input-bg-focus;
-    border-color: $input-border-focus;
+    border-color: $input-border-color-focus;
     outline: none;
     @include box-shadow($input-box-shadow-focus);
   }
 }
-
-// Form control sizing
-//
-// Relative text size, padding, and border-radii changes for form controls. For
-// horizontal sizing, wrap controls in the predefined grid classes. `<select>`
-// element gets special love because it's special, and that's a fact!
-
-@mixin input-size($parent, $input-height, $padding-y, $padding-x, $font-size, $line-height, $border-radius) {
-  #{$parent} {
-    height: $input-height;
-    padding: $padding-y $padding-x;
-    font-size: $font-size;
-    line-height: $line-height;
-    @include border-radius($border-radius);
-  }
-
-  select#{$parent} {
-    height: $input-height;
-    line-height: $input-height;
-  }
-
-  textarea#{$parent},
-  select[multiple]#{$parent} {
-    height: auto;
-  }
-}
diff --git a/assets/stylesheets/bootstrap/mixins/_gradients.scss b/assets/stylesheets/bootstrap/mixins/_gradients.scss
index 8bfd97c..bad79f9 100644
--- a/assets/stylesheets/bootstrap/mixins/_gradients.scss
+++ b/assets/stylesheets/bootstrap/mixins/_gradients.scss
@@ -17,8 +17,8 @@
 }
 
 @mixin gradient-directional($start-color: #555, $end-color: #333, $deg: 45deg) {
-  background-repeat: repeat-x;
   background-image: linear-gradient($deg, $start-color, $end-color);
+  background-repeat: repeat-x;
 }
 @mixin gradient-x-three-colors($start-color: #00b3ee, $mid-color: #7a43b6, $color-stop: 50%, $end-color: #c3325f) {
   background-image: linear-gradient(to right, $start-color, $mid-color $color-stop, $end-color);
diff --git a/assets/stylesheets/bootstrap/mixins/_grid-framework.scss b/assets/stylesheets/bootstrap/mixins/_grid-framework.scss
index 0aa814a..ba341a6 100644
--- a/assets/stylesheets/bootstrap/mixins/_grid-framework.scss
+++ b/assets/stylesheets/bootstrap/mixins/_grid-framework.scss
@@ -22,7 +22,8 @@
         @extend %grid-column;
       }
     }
-    .col#{$infix} {
+    .col#{$infix},
+    .col#{$infix}-auto {
       @extend %grid-column;
     }
 
@@ -36,6 +37,7 @@
       .col#{$infix}-auto {
         flex: 0 0 auto;
         width: auto;
+        max-width: none; // Reset earlier grid tiers
       }
 
       @for $i from 1 through $columns {
diff --git a/assets/stylesheets/bootstrap/mixins/_grid.scss b/assets/stylesheets/bootstrap/mixins/_grid.scss
index 9cd8c7b..b6d9805 100644
--- a/assets/stylesheets/bootstrap/mixins/_grid.scss
+++ b/assets/stylesheets/bootstrap/mixins/_grid.scss
@@ -3,9 +3,8 @@
 // Generate semantic grid columns with these mixins.
 
 @mixin make-container($gutters: $grid-gutter-widths) {
-  position: relative;
-  margin-left: auto;
   margin-right: auto;
+  margin-left: auto;
 
   @each $breakpoint in map-keys($gutters) {
     @include media-breakpoint-up($breakpoint) {
@@ -69,7 +68,6 @@
 
 @mixin make-col($size, $columns: $grid-columns) {
   flex: 0 0 percentage($size / $columns);
-  // width: percentage($size / $columns);
   // Add a `max-width` to ensure content within each column does not blow out
   // the width of the column. Applies to IE10+ and Firefox. Chrome and Safari
   // do not appear to require this.
diff --git a/assets/stylesheets/bootstrap/mixins/_hover.scss b/assets/stylesheets/bootstrap/mixins/_hover.scss
index 6dd55e7..4aa4b1d 100644
--- a/assets/stylesheets/bootstrap/mixins/_hover.scss
+++ b/assets/stylesheets/bootstrap/mixins/_hover.scss
@@ -8,16 +8,18 @@
 //    }
 //  }
 //  @else {
+// scss-lint:disable Indentation
     &:hover { @content }
+// scss-lint:enable Indentation
 //  }
 }
 
+
 @mixin hover-focus {
   @if $enable-hover-media-query {
     &:focus { @content }
     @include hover { @content }
-  }
-  @else {
+  } @else {
     &:focus,
     &:hover {
       @content
@@ -32,8 +34,7 @@
       @content
     }
     @include hover { @content }
-  }
-  @else {
+  } @else {
     &,
     &:focus,
     &:hover {
@@ -49,8 +50,7 @@
       @content
     }
     @include hover { @content }
-  }
-  @else {
+  } @else {
     &:focus,
     &:active,
     &:hover {
diff --git a/assets/stylesheets/bootstrap/mixins/_list-group.scss b/assets/stylesheets/bootstrap/mixins/_list-group.scss
index 3db5b09..ba27b50 100644
--- a/assets/stylesheets/bootstrap/mixins/_list-group.scss
+++ b/assets/stylesheets/bootstrap/mixins/_list-group.scss
@@ -6,14 +6,11 @@
     background-color: $background;
   }
 
+  //scss-lint:disable QualifyingElement
   a.list-group-item-#{$state},
   button.list-group-item-#{$state} {
     color: $color;
 
-    .list-group-item-heading {
-      color: inherit;
-    }
-
     @include hover-focus {
       color: $color;
       background-color: darken($background, 5%);
@@ -25,4 +22,5 @@
       border-color: $color;
     }
   }
+  // scss-lint:enable QualifyingElement
 }
diff --git a/assets/stylesheets/bootstrap/mixins/_nav-divider.scss b/assets/stylesheets/bootstrap/mixins/_nav-divider.scss
index fb3d12e..493de03 100644
--- a/assets/stylesheets/bootstrap/mixins/_nav-divider.scss
+++ b/assets/stylesheets/bootstrap/mixins/_nav-divider.scss
@@ -3,8 +3,8 @@
 // Dividers (basically an hr) within dropdowns and nav lists
 
 @mixin nav-divider($color: #e5e5e5) {
-  height: 1px;
-  margin: ($spacer-y / 2) 0;
+  height: 0;
+  margin: ($spacer / 2) 0;
   overflow: hidden;
-  background-color: $color;
+  border-top: 1px solid $color;
 }
diff --git a/assets/stylesheets/bootstrap/mixins/_reset-text.scss b/assets/stylesheets/bootstrap/mixins/_reset-text.scss
index b952730..4cf9e79 100644
--- a/assets/stylesheets/bootstrap/mixins/_reset-text.scss
+++ b/assets/stylesheets/bootstrap/mixins/_reset-text.scss
@@ -1,17 +1,18 @@
+// scss-lint:disable DuplicateProperty
 @mixin reset-text {
   font-family: $font-family-base;
   // We deliberately do NOT reset font-size or word-wrap.
   font-style: normal;
   font-weight: $font-weight-normal;
-  letter-spacing: normal;
-  line-break: auto;
   line-height: $line-height-base;
   text-align: left; // Fallback for where `start` is not supported
   text-align: start;
   text-decoration: none;
   text-shadow: none;
   text-transform: none;
-  white-space: normal;
+  letter-spacing: normal;
   word-break: normal;
   word-spacing: normal;
+  white-space: normal;
+  line-break: auto;
 }
diff --git a/assets/stylesheets/bootstrap/mixins/_resize.scss b/assets/stylesheets/bootstrap/mixins/_resize.scss
index 83fa637..66f233a 100644
--- a/assets/stylesheets/bootstrap/mixins/_resize.scss
+++ b/assets/stylesheets/bootstrap/mixins/_resize.scss
@@ -1,6 +1,6 @@
 // Resize anything
 
 @mixin resizable($direction) {
-  resize: $direction; // Options: horizontal, vertical, both
   overflow: auto; // Per CSS3 UI, `resize` only applies when `overflow` isn't `visible`
+  resize: $direction; // Options: horizontal, vertical, both
 }
diff --git a/assets/stylesheets/bootstrap/mixins/_screen-reader.scss b/assets/stylesheets/bootstrap/mixins/_screen-reader.scss
index c208583..a5fa51c 100644
--- a/assets/stylesheets/bootstrap/mixins/_screen-reader.scss
+++ b/assets/stylesheets/bootstrap/mixins/_screen-reader.scss
@@ -1,15 +1,17 @@
 // Only display content to screen readers
 //
 // See: http://a11yproject.com/posts/how-to-hide-content
+// See: http://hugogiraudel.com/2016/10/13/css-hide-and-seek/
 
 @mixin sr-only {
   position: absolute;
   width: 1px;
   height: 1px;
   padding: 0;
-  margin: -1px;
   overflow: hidden;
   clip: rect(0,0,0,0);
+  white-space: nowrap;
+  clip-path: inset(50%);
   border: 0;
 }
 
@@ -25,8 +27,9 @@
     position: static;
     width: auto;
     height: auto;
-    margin: 0;
     overflow: visible;
     clip: auto;
+    white-space: normal;
+    clip-path: none;
   }
 }
diff --git a/assets/stylesheets/bootstrap/mixins/_text-truncate.scss b/assets/stylesheets/bootstrap/mixins/_text-truncate.scss
index 5a40bf5..3504bb1 100644
--- a/assets/stylesheets/bootstrap/mixins/_text-truncate.scss
+++ b/assets/stylesheets/bootstrap/mixins/_text-truncate.scss
@@ -5,4 +5,4 @@
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-}
\ No newline at end of file
+}
diff --git a/assets/stylesheets/bootstrap/mixins/_transforms.scss b/assets/stylesheets/bootstrap/mixins/_transforms.scss
deleted file mode 100644
index 4005c9d..0000000
--- a/assets/stylesheets/bootstrap/mixins/_transforms.scss
+++ /dev/null
@@ -1,14 +0,0 @@
-// Applies the given styles only when the browser support CSS3 3D transforms.
-@mixin if-supports-3d-transforms() {
-  @media (-webkit-transform-3d) {
-    // Old Safari, Old Android
-    // http://caniuse.com/#feat=css-featurequeries
-    // https://developer.mozilla.org/en-US/docs/Web/CSS/@media/-webkit-transform-3d
-    @content;
-  }
-
-  @supports (transform: translate3d(0,0,0)) {
-    // The Proper Way: Using a CSS feature query
-    @content;
-  }
-}
diff --git a/assets/stylesheets/bootstrap/mixins/_transition.scss b/assets/stylesheets/bootstrap/mixins/_transition.scss
new file mode 100644
index 0000000..7e33dee
--- /dev/null
+++ b/assets/stylesheets/bootstrap/mixins/_transition.scss
@@ -0,0 +1,9 @@
+@mixin transition($transition...) {
+  @if $enable-transitions {
+    @if length($transition) == 0 {
+      transition: $transition-base;
+    } @else {
+      transition: $transition;
+    }
+  }
+}
diff --git a/assets/stylesheets/bootstrap/mixins/_visibility.scss b/assets/stylesheets/bootstrap/mixins/_visibility.scss
index 88c50b0..f67fc1c 100644
--- a/assets/stylesheets/bootstrap/mixins/_visibility.scss
+++ b/assets/stylesheets/bootstrap/mixins/_visibility.scss
@@ -1,5 +1,5 @@
 // Visibility
 
-@mixin invisible {
-  visibility: hidden !important;
+@mixin invisible($visibility) {
+  visibility: $visibility !important;
 }
diff --git a/assets/stylesheets/bootstrap/utilities/_display.scss b/assets/stylesheets/bootstrap/utilities/_display.scss
index ae942a6..4535362 100644
--- a/assets/stylesheets/bootstrap/utilities/_display.scss
+++ b/assets/stylesheets/bootstrap/utilities/_display.scss
@@ -1,5 +1,5 @@
 //
-// Display utilities
+// Utilities for common `display` values
 //
 
 @each $breakpoint in map-keys($grid-breakpoints) {
@@ -16,3 +16,38 @@
     .d#{$infix}-inline-flex  { display: inline-flex !important; }
   }
 }
+
+
+//
+// Utilities for toggling `display` in print
+//
+
+.d-print-block {
+  display: none !important;
+
+  @media print {
+    display: block !important;
+  }
+}
+
+.d-print-inline {
+  display: none !important;
+
+  @media print {
+    display: inline !important;
+  }
+}
+
+.d-print-inline-block {
+  display: none !important;
+
+  @media print {
+    display: inline-block !important;
+  }
+}
+
+.d-print-none {
+  @media print {
+    display: none !important;
+  }
+}
diff --git a/assets/stylesheets/bootstrap/utilities/_flex.scss b/assets/stylesheets/bootstrap/utilities/_flex.scss
index 1b98aaa..cc69678 100644
--- a/assets/stylesheets/bootstrap/utilities/_flex.scss
+++ b/assets/stylesheets/bootstrap/utilities/_flex.scss
@@ -6,9 +6,9 @@
   @include media-breakpoint-up($breakpoint) {
     $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
 
-    .flex#{$infix}-first     { order: -1; }
-    .flex#{$infix}-last      { order: 1; }
-    .flex#{$infix}-unordered { order: 0; }
+    .order#{$infix}-first { order: -1; }
+    .order#{$infix}-last  { order: 1; }
+    .order#{$infix}-0     { order: 0; }
 
     .flex#{$infix}-row            { flex-direction: row !important; }
     .flex#{$infix}-column         { flex-direction: column !important; }
diff --git a/assets/stylesheets/bootstrap/utilities/_spacing.scss b/assets/stylesheets/bootstrap/utilities/_spacing.scss
index 6056e2b..c89816b 100644
--- a/assets/stylesheets/bootstrap/utilities/_spacing.scss
+++ b/assets/stylesheets/bootstrap/utilities/_spacing.scss
@@ -5,22 +5,20 @@
     $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
 
     @each $prop, $abbrev in (margin: m, padding: p) {
-      @each $size, $lengths in $spacers {
-        $length-x: map-get($lengths, x);
-        $length-y: map-get($lengths, y);
+      @each $size, $length in $spacers {
 
-        .#{$abbrev}#{$infix}-#{$size}  { #{$prop}:        $length-y $length-x !important; }
-        .#{$abbrev}t#{$infix}-#{$size} { #{$prop}-top:    $length-y !important; }
-        .#{$abbrev}r#{$infix}-#{$size} { #{$prop}-right:  $length-x !important; }
-        .#{$abbrev}b#{$infix}-#{$size} { #{$prop}-bottom: $length-y !important; }
-        .#{$abbrev}l#{$infix}-#{$size} { #{$prop}-left:   $length-x !important; }
+        .#{$abbrev}#{$infix}-#{$size}  { #{$prop}:        $length !important; }
+        .#{$abbrev}t#{$infix}-#{$size} { #{$prop}-top:    $length !important; }
+        .#{$abbrev}r#{$infix}-#{$size} { #{$prop}-right:  $length !important; }
+        .#{$abbrev}b#{$infix}-#{$size} { #{$prop}-bottom: $length !important; }
+        .#{$abbrev}l#{$infix}-#{$size} { #{$prop}-left:   $length !important; }
         .#{$abbrev}x#{$infix}-#{$size} {
-          #{$prop}-right: $length-x !important;
-          #{$prop}-left:  $length-x !important;
+          #{$prop}-right: $length !important;
+          #{$prop}-left:  $length !important;
         }
         .#{$abbrev}y#{$infix}-#{$size} {
-          #{$prop}-top:    $length-y !important;
-          #{$prop}-bottom: $length-y !important;
+          #{$prop}-top:    $length !important;
+          #{$prop}-bottom: $length !important;
         }
       }
     }
diff --git a/assets/stylesheets/bootstrap/utilities/_visibility.scss b/assets/stylesheets/bootstrap/utilities/_visibility.scss
index fcedc9c..823406d 100644
--- a/assets/stylesheets/bootstrap/utilities/_visibility.scss
+++ b/assets/stylesheets/bootstrap/utilities/_visibility.scss
@@ -2,54 +2,10 @@
 // Visibility utilities
 //
 
-.invisible {
-  @include invisible();
-}
-
-// Responsive visibility utilities
-
-@each $bp in map-keys($grid-breakpoints) {
-  .hidden-#{$bp}-up {
-    @include media-breakpoint-up($bp) {
-      display: none !important;
-    }
-  }
-  .hidden-#{$bp}-down {
-    @include media-breakpoint-down($bp) {
-      display: none !important;
-    }
-  }
+.visible {
+  @include invisible(visible);
 }
 
-
-// Print utilities
-//
-// Media queries are placed on the inside to be mixin-friendly.
-
-.visible-print-block {
-  display: none !important;
-
-  @media print {
-    display: block !important;
-  }
-}
-.visible-print-inline {
-  display: none !important;
-
-  @media print {
-    display: inline !important;
-  }
-}
-.visible-print-inline-block {
-  display: none !important;
-
-  @media print {
-    display: inline-block !important;
-  }
-}
-
-.hidden-print {
-  @media print {
-    display: none !important;
-  }
+.invisible {
+  @include invisible(hidden);
 }