Add latest changes from gitlab-org/gitlab@13-4-stable-ee

90 files changed, 7373 insertions, 876 deletions

diff --git a/app/assets/stylesheets/_page_specific_files.scss b/app/assets/stylesheets/_page_specific_files.scss
new file mode 100644
index 00000000000..f706b615e7e
--- /dev/null
+++ b/app/assets/stylesheets/_page_specific_files.scss
@@ -0,0 +1,65 @@
+@import './pages/admin';
+@import './pages/alert_management/details';
+@import './pages/alert_management/severity-icons';
+@import './pages/boards';
+@import './pages/branches';
+@import './pages/builds';
+@import './pages/ci_projects';
+@import './pages/clusters';
+@import './pages/commits';
+@import './pages/cycle_analytics';
+@import './pages/deploy_keys';
+@import './pages/detail_page';
+@import './pages/dev_ops_report';
+@import './pages/diff';
+@import './pages/editor';
+@import './pages/environment_logs';
+@import './pages/environments';
+@import './pages/error_details';
+@import './pages/error_list';
+@import './pages/error_tracking_list';
+@import './pages/events';
+@import './pages/experience_level';
+@import './pages/experimental_separate_sign_up';
+@import './pages/graph';
+@import './pages/groups';
+@import './pages/help';
+@import './pages/import';
+@import './pages/incident_management_list';
+@import './pages/issuable';
+@import './pages/issues/issue_count_badge';
+@import './pages/issues/issues_list';
+@import './pages/issues';
+@import './pages/labels';
+@import './pages/login';
+@import './pages/members';
+@import './pages/merge_conflicts';
+@import './pages/merge_requests';
+@import './pages/milestone';
+@import './pages/monitor';
+@import './pages/note_form';
+@import './pages/notes';
+@import './pages/notifications';
+@import './pages/pages';
+@import './pages/pipeline_schedules';
+@import './pages/pipelines';
+@import './pages/profile';
+@import './pages/profiles/preferences';
+@import './pages/projects';
+@import './pages/prometheus';
+@import './pages/reports';
+@import './pages/runners';
+@import './pages/search';
+@import './pages/serverless';
+@import './pages/service_desk';
+@import './pages/settings';
+@import './pages/settings_ci_cd';
+@import './pages/sherlock';
+@import './pages/status';
+@import './pages/storage_quota';
+@import './pages/tags';
+@import './pages/tree';
+@import './pages/trials';
+@import './pages/ui_dev_kit';
+@import './pages/users';
+@import './pages/wiki';
diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
index f5393ef47d6..8acd338fff8 100644
--- a/app/assets/stylesheets/application.scss
+++ b/app/assets/stylesheets/application.scss
@@ -13,7 +13,7 @@
 // directory.
 @import '@gitlab/at.js/dist/css/jquery.atwho';
 @import 'dropzone/dist/basic';
-@import 'select2/select2';
+@import 'select2';
 
 // GitLab UI framework
 @import 'framework';
@@ -22,7 +22,7 @@
 @import 'fontawesome_custom';
 
 // Page specific styles (issues, projects etc):
-@import 'pages/**/*';
+@import 'page_specific_files';
 
 // Component specific styles, will be moved to gitlab-ui
 @import 'components/**/*';
diff --git a/app/assets/stylesheets/components/batch_comments/review_bar.scss b/app/assets/stylesheets/components/batch_comments/review_bar.scss
new file mode 100644
index 00000000000..76bf7ac81e8
--- /dev/null
+++ b/app/assets/stylesheets/components/batch_comments/review_bar.scss
@@ -0,0 +1,122 @@
+.review-bar-component {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  background: $white;
+  z-index: 300;
+  padding: 7px 0 6px; // to keep aligned with "collapse sidebar" button on the left sidebar
+  border-top: 1px solid $border-color;
+  padding-left: $contextual-sidebar-width;
+  padding-right: $gutter_collapsed_width;
+  transition: padding $sidebar-transition-duration;
+
+  .page-with-icon-sidebar & {
+    padding-left: $contextual-sidebar-collapsed-width;
+  }
+
+  .right-sidebar-expanded & {
+    padding-right: $gutter_width;
+  }
+
+  @media (max-width: map-get($grid-breakpoints, sm)-1) {
+    padding-left: 0;
+    padding-right: 0;
+  }
+
+  .dropdown {
+    margin-left: $grid-size;
+  }
+}
+
+.review-bar-content {
+  max-width: $limited-layout-width;
+  padding: 0 $gl-padding;
+  width: 100%;
+  margin: 0 auto;
+}
+
+.review-preview-dropdown {
+  .review-preview-item.menu-item {
+    display: flex;
+    flex-wrap: wrap;
+    padding: 8px 16px;
+    cursor: pointer;
+
+    &:not(.is-last) {
+      border-bottom: 1px solid $list-border;
+    }
+  }
+
+  .dropdown-menu {
+    top: auto;
+    bottom: 36px;
+
+    &.show {
+      max-height: 400px;
+
+      @include media-breakpoint-down(xs) {
+        width: calc(100vw - 32px);
+      }
+    }
+  }
+
+  .dropdown-content {
+    max-height: 300px;
+  }
+
+  .dropdown-title {
+    padding: $grid-size 25px $gl-padding;
+    margin-bottom: 0;
+  }
+
+  .dropdown-footer {
+    margin-top: 0;
+  }
+
+  .dropdown-menu-close {
+    top: 6px;
+  }
+}
+
+.review-preview-dropdown-toggle {
+  svg.s16 {
+    width: 15px;
+    height: 15px;
+    margin-top: -1px;
+    top: 3px;
+    margin-left: 4px;
+  }
+}
+
+.review-preview-item-header {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  margin-bottom: 4px;
+
+  > .bold {
+    display: flex;
+    min-width: 0;
+    line-height: 16px;
+  }
+}
+
+.review-preview-item-footer {
+  display: flex;
+  align-items: center;
+  margin-top: 4px;
+}
+
+.review-preview-item-content {
+  width: 100%;
+
+  p {
+    display: block;
+    width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    margin-bottom: 0;
+  }
+}
diff --git a/app/assets/stylesheets/components/design_management/design.scss b/app/assets/stylesheets/components/design_management/design.scss
index 80421598966..21133316291 100644
--- a/app/assets/stylesheets/components/design_management/design.scss
+++ b/app/assets/stylesheets/components/design_management/design.scss
@@ -34,6 +34,10 @@
       background-color: $gray-500;
     }
   }
+
+  .design-detail-overlay-add-comment {
+    cursor: crosshair;
+  }
 }
 
 .design-presentation-wrapper {
diff --git a/app/assets/stylesheets/components/related_items_list.scss b/app/assets/stylesheets/components/related_items_list.scss
index c0699844387..7c668666d70 100644
--- a/app/assets/stylesheets/components/related_items_list.scss
+++ b/app/assets/stylesheets/components/related_items_list.scss
@@ -48,7 +48,7 @@ $item-remove-button-space: 42px;
   }
 
   .confidential-icon {
-    color: $orange-600;
+    color: $orange-500;
   }
 
   .item-title-wrapper {
@@ -123,21 +123,11 @@ $item-remove-button-space: 42px;
   .item-milestone {
     text-decoration: none;
     max-width: $item-milestone-max-width;
-
-    .ic-clock {
-      margin-right: $gl-padding-4;
-    }
   }
 
   .item-weight {
     max-width: $item-weight-max-width;
   }
-
-  .item-milestone .ic-clock,
-  .item-weight .ic-weight,
-  .item-due-date .ic-calendar {
-    color: $gl-text-color-secondary;
-  }
 }
 
 .item-assignees {
diff --git a/app/assets/stylesheets/components/rich_content_editor.scss b/app/assets/stylesheets/components/rich_content_editor.scss
index ade1bb2099d..b1189137d59 100644
--- a/app/assets/stylesheets/components/rich_content_editor.scss
+++ b/app/assets/stylesheets/components/rich_content_editor.scss
@@ -6,7 +6,7 @@
 
   // Toolbar buttons
   .tui-editor-defaultUI-toolbar .toolbar-button {
-    color: $gl-gray-600;
+    color: $gray-500;
     border: 0;
 
     &:hover,
diff --git a/app/assets/stylesheets/components/whats_new.scss b/app/assets/stylesheets/components/whats_new.scss
new file mode 100644
index 00000000000..4fff900f5a5
--- /dev/null
+++ b/app/assets/stylesheets/components/whats_new.scss
@@ -0,0 +1,9 @@
+.gl-badge.whats-new-item-badge {
+  background-color: $purple-light;
+  color: $purple;
+  font-weight: bold;
+}
+
+.whats-new-item-image {
+  border-color: $gray-50;
+}
diff --git a/app/assets/stylesheets/fontawesome_custom.scss b/app/assets/stylesheets/fontawesome_custom.scss
index a2117e9c012..30d56d99e1c 100644
--- a/app/assets/stylesheets/fontawesome_custom.scss
+++ b/app/assets/stylesheets/fontawesome_custom.scss
@@ -84,10 +84,6 @@
   color: $white;
 }
 
-.fa-question-circle::before {
-  content: '\f059';
-}
-
 .fa-chevron-down::before {
   content: '\f078';
 }
@@ -130,18 +126,10 @@
   content: '\f101';
 }
 
-.fa-trash::before {
-  content: '\f1f8';
-}
-
 .fa-angle-double-left::before {
   content: '\f100';
 }
 
-.fa-arrow-left::before {
-  content: '\f060';
-}
-
 .fa-trash-o::before {
   content: '\f014';
 }
@@ -170,14 +158,6 @@
   content: '\f0c6';
 }
 
-.fa-tag::before {
-  content: '\f02b';
-}
-
-.fa-arrow-up::before {
-  content: '\f062';
-}
-
 .fa-bug::before {
   content: '\f188';
 }
@@ -186,10 +166,6 @@
   content: '\f1a0';
 }
 
-.fa-user::before {
-  content: '\f007';
-}
-
 .fa-exclamation-circle::before {
   content: '\f06a';
 }
@@ -198,10 +174,6 @@
   content: '\f0f3';
 }
 
-.fa-arrow-down::before {
-  content: '\f063';
-}
-
 .fa-bitbucket-square::before {
   content: '\f172';
 }
@@ -210,14 +182,6 @@
   content: '\f016';
 }
 
-.fa-users::before {
-  content: '\f0c0';
-}
-
-.fa-tags::before {
-  content: '\f02c';
-}
-
 .fa-lightbulb-o::before {
   content: '\f0eb';
 }
@@ -250,10 +214,6 @@
   content: '\f06d';
 }
 
-.fa-download::before {
-  content: '\f019';
-}
-
 .fa-globe::before {
   content: '\f0ac';
 }
@@ -266,14 +226,6 @@
   content: '\f04b';
 }
 
-.fa-arrow-right::before {
-  content: '\f061';
-}
-
-.fa-user-secret::before {
-  content: '\f21b';
-}
-
 .fa-search-plus::before {
   content: '\f00e';
 }
diff --git a/app/assets/stylesheets/framework.scss b/app/assets/stylesheets/framework.scss
index 413e0dde535..f875420b9c9 100644
--- a/app/assets/stylesheets/framework.scss
+++ b/app/assets/stylesheets/framework.scss
@@ -23,7 +23,6 @@
 @import 'framework/flash';
 @import 'framework/forms';
 @import 'framework/gfm';
-@import 'framework/gitlab_theme';
 @import 'framework/header';
 @import 'framework/highlight';
 @import 'framework/issue_box';
diff --git a/app/assets/stylesheets/framework/buttons.scss b/app/assets/stylesheets/framework/buttons.scss
index 893a494d240..a9c1652d00d 100644
--- a/app/assets/stylesheets/framework/buttons.scss
+++ b/app/assets/stylesheets/framework/buttons.scss
@@ -112,7 +112,7 @@
 }
 
 @mixin btn-orange {
-  @include btn-color($orange-500, $orange-600, $orange-600, $orange-700, $orange-700, $orange-800, $white);
+  @include btn-color($orange-500, $orange-600, $orange-500, $orange-600, $orange-600, $orange-800, $white);
 }
 
 @mixin btn-red {
@@ -182,7 +182,7 @@
     }
 
     &.btn-warning {
-      @include btn-outline($white, $orange-500, $orange-500, $orange-100, $orange-700, $orange-500, $orange-200, $orange-600, $orange-800);
+      @include btn-outline($white, $orange-500, $orange-500, $orange-50, $orange-600, $orange-600, $orange-100, $orange-700, $orange-700);
     }
 
     &.btn-primary,
@@ -202,7 +202,7 @@
 
   &.btn-close,
   &.btn-close-color {
-    @include btn-outline($white, $orange-600, $orange-500, $orange-100, $orange-700, $orange-500, $orange-200, $orange-600, $orange-800);
+    @include btn-outline($white, $orange-500, $orange-500, $orange-50, $orange-600, $orange-600, $orange-100, $orange-700, $orange-700);
   }
 
   &.btn-spam {
@@ -229,7 +229,7 @@
   }
 
   &.btn-icon {
-    color: $gl-gray-700;
+    color: $gray-700;
   }
 
   .fa-caret-down,
@@ -394,7 +394,7 @@
 }
 
 .clone-dropdown-btn a {
-  color: $gl-gray-700;
+  color: $gray-700;
 
   &:hover {
     text-decoration: none;
@@ -542,3 +542,13 @@ fieldset[disabled] .btn,
 .btn-no-padding {
   padding: 0;
 }
+
+// This class helps convert `.gl-button` children so that they consistently
+// match the style of `.btn` elements which might be around them. Ideally we
+// wouldn't need this class.
+//
+// Remove by upgrading all buttons in a container to use the new `.gl-button` style.
+.gl-button-deprecated-adapter .gl-button {
+  box-shadow: none;
+  border-width: 1px;
+}
diff --git a/app/assets/stylesheets/framework/callout.scss b/app/assets/stylesheets/framework/callout.scss
index c5bb2a1256a..d0d2328ea98 100644
--- a/app/assets/stylesheets/framework/callout.scss
+++ b/app/assets/stylesheets/framework/callout.scss
@@ -37,12 +37,12 @@
 }
 
 .bs-callout-warning {
-  background-color: $orange-100;
+  background-color: $orange-50;
   border-color: $orange-200;
-  color: $orange-900;
+  color: $gray-900;
 
   a {
-    color: $orange-900;
+    color: $blue-600;
   }
 }
 
diff --git a/app/assets/stylesheets/framework/common.scss b/app/assets/stylesheets/framework/common.scss
index 00679cf20fa..714ef8b2175 100644
--- a/app/assets/stylesheets/framework/common.scss
+++ b/app/assets/stylesheets/framework/common.scss
@@ -74,7 +74,7 @@
 
 .hint {
   font-style: italic;
-  color: $gl-gray-200;
+  color: $gray-200;
 }
 
 .light { color: $gl-text-color; }
@@ -162,13 +162,13 @@ table {
 .loading {
   margin: 20px auto;
   height: 40px;
-  color: $gl-gray-700;
+  color: $gray-700;
   font-size: 32px;
   text-align: center;
 }
 
 p.time {
-  color: $gl-gray-200;
+  color: $gray-200;
   font-size: 90%;
   margin: 30px 3px 3px 2px;
 }
@@ -237,7 +237,7 @@ li.note {
 }
 
 .warning_message {
-  @include message($orange-100, $orange-200, $orange-800);
+  @include message($orange-50, $orange-200, $gray-900);
 }
 
 .danger_message {
@@ -246,7 +246,7 @@ li.note {
 
 .gitlab-promo {
   a {
-    color: $gl-gray-350;
+    color: $gray-300;
     margin-right: 30px;
   }
 }
@@ -416,7 +416,6 @@ img.emoji {
 .flex-no-shrink { flex-shrink: 0; }
 .ws-initial { white-space: initial; }
 .ws-normal { white-space: normal; }
-.ws-pre-wrap { white-space: pre-wrap; }
 .overflow-auto { overflow: auto; }
 .overflow-visible { overflow: visible; }
 
@@ -454,35 +453,6 @@ img.emoji {
   }
 }
 
-/** COMMON SPACING CLASSES **/
-/**
-  🚨 Do not use these classes — they are deprecated and being removed. 🚨
-  See https://gitlab.com/gitlab-org/gitlab/issues/36857 for more details.
-
-  Instead, if you need a spacing class, please use one from Gitlab UI —
-  https://unpkg.com/browse/@gitlab/ui/src/scss/utilities.scss — which uses the following scale.
-    $gl-spacing-scale-0: 0;
-    $gl-spacing-scale-1: 2px;
-    $gl-spacing-scale-2: 4px;
-    $gl-spacing-scale-3: 8px;
-    $gl-spacing-scale-4: 12px;
-    $gl-spacing-scale-5: 16px;
-    $gl-spacing-scale-6: 24px;
-    $gl-spacing-scale-7: 32px;
-    $gl-spacing-scale-8: 40px;
-    $gl-spacing-scale-9: 48px;
-    $gl-spacing-scale-10: 56px;
-    $gl-spacing-scale-11: 64px;
-    $gl-spacing-scale-12: 80px;
-    $gl-spacing-scale-13: 96px;
-**/
-@each $index, $padding in $spacing-scale {
-  #{'.gl-p-#{$index}-deprecated-no-really-do-not-use-me'} { padding: $padding; }
-  #{'.gl-pl-#{$index}-deprecated-no-really-do-not-use-me'} { padding-left: $padding; }
-  #{'.gl-pr-#{$index}-deprecated-no-really-do-not-use-me'} { padding-right: $padding; }
-  #{'.gl-pt-#{$index}-deprecated-no-really-do-not-use-me'} { padding-top: $padding; }
-  #{'.gl-pb-#{$index}-deprecated-no-really-do-not-use-me'} { padding-bottom: $padding; }
-}
 
 /**
  * Removes browser specific clear icon from input fields in
@@ -557,4 +527,3 @@ img.emoji {
 See https://gitlab.com/gitlab-org/gitlab/issues/36857 for more details.
 **/
 .gl-line-height-14 { line-height: $gl-line-height-14; }
-.gl-font-size-20 { font-size: $gl-font-size-20; }
diff --git a/app/assets/stylesheets/framework/dropdowns.scss b/app/assets/stylesheets/framework/dropdowns.scss
index 6b742853f8f..ad5864ef6d9 100644
--- a/app/assets/stylesheets/framework/dropdowns.scss
+++ b/app/assets/stylesheets/framework/dropdowns.scss
@@ -164,14 +164,20 @@
     right: 8px;
   }
 
-  .ic-chevron-down {
+  .dropdown-menu-toggle-icon {
     position: absolute;
-    top: $gl-padding-8;
     right: $gl-padding-8;
     color: $gray-darkest;
   }
 }
 
+.labels {
+  // Prevent double scroll-bars for labels dropdown.
+  .dropdown-menu-toggle.wide + .dropdown-select {
+    max-height: unset;
+  }
+}
+
 .gl-dropdown .dropdown-menu-toggle {
   padding-right: $gl-padding-8;
 
@@ -410,7 +416,7 @@
       flex-direction: column;
 
       .reference {
-        color: $gl-gray-400;
+        color: $gray-300;
         margin-top: $gl-padding-4;
       }
     }
@@ -590,11 +596,8 @@
 }
 
 .dropdown-title-button {
-  position: absolute;
-  top: 0;
   padding: 0;
   color: $dropdown-title-btn-color;
-  font-size: 14px;
   border: 0;
   background: none;
   outline: 0;
@@ -604,20 +607,9 @@
   }
 }
 
-.dropdown-menu-close {
-  top: $gl-padding-4;
-  right: $gl-padding-8;
-  width: 20px;
-  height: 20px;
-}
-
-.dropdown-menu-close-icon {
-  vertical-align: middle;
-}
-
 .dropdown-menu-back {
-  left: 7px;
-  top: 2px;
+  left: 10px;
+  top: $gl-padding-8;
 }
 
 .dropdown-input {
@@ -627,7 +619,8 @@
 
   .fa,
   .input-icon,
-  .ic-search {
+  .dropdown-input-clear,
+  .dropdown-input-search {
     position: absolute;
     top: $gl-padding-8;
     right: 20px;
@@ -666,25 +659,27 @@
   width: 100%;
   min-height: 30px;
   padding: 0 7px;
-  color: $gl-gray-700;
+  color: $gray-700;
   line-height: 30px;
   border: 1px solid $dropdown-divider-bg;
   border-radius: 2px;
   outline: 0;
 
   &:focus {
-    color: $gl-gray-700;
+    color: $gray-700;
     border-color: $blue-300;
     box-shadow: 0 0 4px $dropdown-input-focus-shadow;
 
-    ~ .fa {
-      color: $gl-gray-700;
+    ~ .fa,
+    ~ .dropdown-input-clear {
+      color: $gray-700;
     }
   }
 
   &:hover {
-    ~ .fa {
-      color: $gl-gray-700;
+    ~ .fa,
+    ~ .dropdown-input-clear {
+      color: $gray-700;
     }
   }
 }
@@ -1070,7 +1065,7 @@ header.header-content .dropdown-menu.frequent-items-dropdown-menu {
       color: $dropdown-title-btn-color;
 
       &:hover {
-        color: $gl-gray-400;
+        color: $gray-300;
       }
     }
   }
@@ -1105,3 +1100,42 @@ header.header-content .dropdown-menu.frequent-items-dropdown-menu {
     }
   }
 }
+
+// This class won't be needed once we can directly add utility classes to the child
+// https://github.com/bootstrap-vue/bootstrap-vue/issues/5669
+.gl-dropdown-text-py-0 {
+  .b-dropdown-text {
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+}
+
+// This class won't be needed once we can directly add utility classes to the child
+// https://github.com/bootstrap-vue/bootstrap-vue/issues/5669
+.gl-dropdown-text-block {
+  .b-dropdown-text {
+    display: block;
+  }
+}
+
+// This class won't be needed once we can add a prop for this in the GitLab UI component
+// https://gitlab.com/gitlab-org/gitlab-ui/-/issues/966
+.gl-new-dropdown {
+  .gl-dropdown-menu-wide {
+    width: $gl-dropdown-width-wide;
+  }
+}
+
+.gl-dropdown-item-deprecated-adapter {
+  .dropdown-item {
+    align-items: flex-start;
+
+    .gl-new-dropdown-item-text-primary {
+      @include gl-font-weight-bold;
+    }
+
+    .gl-new-dropdown-item-text-secondary {
+      color: inherit;
+    }
+  }
+}
diff --git a/app/assets/stylesheets/framework/files.scss b/app/assets/stylesheets/framework/files.scss
index ef7d39a5e7e..76c6e03377c 100644
--- a/app/assets/stylesheets/framework/files.scss
+++ b/app/assets/stylesheets/framework/files.scss
@@ -183,7 +183,7 @@
 
         &.line-numbers {
           float: none;
-          border-left: 1px solid $gl-gray-100;
+          border-left: 1px solid $gray-100;
 
           i {
             float: none;
@@ -300,7 +300,7 @@ span.idiff {
 
   .renamed-file {
     a {
-      color: $orange-600;
+      color: $orange-500;
     }
   }
 
@@ -495,9 +495,12 @@ span.idiff {
   max-height: 20rem;
 }
 
-#js-openapi-viewer pre.version {
-  background-color: transparent;
-  border: transparent;
+#js-openapi-viewer {
+  pre.version,
+  code {
+    background-color: transparent;
+    border: transparent;
+  }
 }
 
 .code-navigation-line:hover {
diff --git a/app/assets/stylesheets/framework/filters.scss b/app/assets/stylesheets/framework/filters.scss
index ed4281123cd..1a394ad124b 100644
--- a/app/assets/stylesheets/framework/filters.scss
+++ b/app/assets/stylesheets/framework/filters.scss
@@ -243,7 +243,7 @@
     }
   }
 
-  .fa-times {
+  .clear-search-icon {
     right: 10px;
     color: $gray-darkest;
   }
@@ -255,7 +255,7 @@
     outline: none;
     z-index: 1;
 
-    &:hover .fa-times {
+    &:hover .clear-search-icon {
       color: $common-gray-dark;
     }
   }
@@ -348,11 +348,11 @@
 }
 
 @include media-breakpoint-down(sm) {
-  .issues-details-filters {
-    padding-top: 0;
-    padding-bottom: 0;
+  .issues-details-filters,
+  .epics-details-filters {
+    padding-top: $gl-padding-8;
+    padding-bottom: $gl-padding-8;
     background-color: $white;
-    border-top: 0;
   }
 
   .boards-switcher {
diff --git a/app/assets/stylesheets/framework/flash.scss b/app/assets/stylesheets/framework/flash.scss
index d604d97d270..0fb91db0afb 100644
--- a/app/assets/stylesheets/framework/flash.scss
+++ b/app/assets/stylesheets/framework/flash.scss
@@ -65,8 +65,8 @@ $notification-box-shadow-color: rgba(0, 0, 0, 0.25);
   }
 
   .flash-warning {
-    background-color: $orange-100;
-    color: $orange-800;
+    background-color: $orange-50;
+    color: $gray-900;
     cursor: default;
   }
 
diff --git a/app/assets/stylesheets/framework/gfm.scss b/app/assets/stylesheets/framework/gfm.scss
index fbafb22cf37..579a68ac8e4 100644
--- a/app/assets/stylesheets/framework/gfm.scss
+++ b/app/assets/stylesheets/framework/gfm.scss
@@ -13,7 +13,7 @@
   border-radius: $border-radius-default;
 
   &.current-user {
-    background-color: $orange-100;
+    background-color: $orange-50;
   }
 }
 
diff --git a/app/assets/stylesheets/framework/gitlab_theme.scss b/app/assets/stylesheets/framework/gitlab_theme.scss
deleted file mode 100644
index 97bd6ca6fe2..00000000000
--- a/app/assets/stylesheets/framework/gitlab_theme.scss
+++ /dev/null
@@ -1,431 +0,0 @@
-/**
- * Styles the GitLab application with a specific color theme
- */
-
-@mixin gitlab-theme(
-  $search-and-nav-links,
-  $active-tab-border,
-  $border-and-box-shadow,
-  $sidebar-text,
-  $nav-svg-color,
-  $color-alternate
-) {
-  // Header
-
-  .navbar-gitlab {
-    background-color: $nav-svg-color;
-
-    .navbar-collapse {
-      color: $search-and-nav-links;
-    }
-
-    .container-fluid {
-      .navbar-toggler {
-        border-left: 1px solid lighten($border-and-box-shadow, 10%);
-
-        svg {
-          fill: $search-and-nav-links;
-        }
-      }
-    }
-
-    .navbar-sub-nav,
-    .navbar-nav {
-      > li {
-        > a,
-        > button {
-          &:hover,
-          &:focus {
-            background-color: rgba($search-and-nav-links, 0.2);
-          }
-        }
-
-        &.active,
-        &.dropdown.show {
-          > a,
-          > button {
-            color: $nav-svg-color;
-            background-color: $color-alternate;
-          }
-        }
-
-        &.line-separator {
-          border-left: 1px solid rgba($search-and-nav-links, 0.2);
-        }
-      }
-    }
-
-    .navbar-sub-nav {
-      color: $search-and-nav-links;
-    }
-
-    .nav {
-      > li {
-        color: $search-and-nav-links;
-
-        > a {
-          &.header-user-dropdown-toggle {
-            .header-user-avatar {
-              border-color: $search-and-nav-links;
-            }
-
-            .header-user-notification-dot {
-              border: 2px solid $nav-svg-color;
-            }
-          }
-
-          &:hover,
-          &:focus {
-            @include media-breakpoint-up(sm) {
-              background-color: rgba($search-and-nav-links, 0.2);
-            }
-
-            svg {
-              fill: currentColor;
-            }
-
-            &.header-user-dropdown-toggle .header-user-notification-dot {
-              border-color: $nav-svg-color + 33;
-            }
-          }
-        }
-
-        &.active > a,
-        &.dropdown.show > a {
-          color: $nav-svg-color;
-          background-color: $color-alternate;
-
-          &:hover {
-            svg {
-              fill: $nav-svg-color;
-            }
-          }
-
-          &.header-user-dropdown-toggle .header-user-notification-dot {
-            border-color: $white;
-          }
-        }
-
-        .impersonated-user,
-        .impersonated-user:hover {
-          svg {
-            fill: $nav-svg-color;
-          }
-        }
-      }
-    }
-  }
-
-  .navbar .title {
-    > a {
-      &:hover,
-      &:focus {
-        background-color: rgba($search-and-nav-links, 0.2);
-      }
-    }
-  }
-
-  .search {
-    form {
-      background-color: rgba($search-and-nav-links, 0.2);
-
-      &:hover {
-        background-color: rgba($search-and-nav-links, 0.3);
-      }
-    }
-
-    .search-input::placeholder {
-      color: rgba($search-and-nav-links, 0.8);
-    }
-
-    .search-input-wrap {
-      .search-icon,
-      .clear-icon {
-        fill: rgba($search-and-nav-links, 0.8);
-      }
-    }
-
-    &.search-active {
-      form {
-        background-color: $white;
-      }
-
-      .search-input-wrap {
-        .search-icon {
-          fill: rgba($search-and-nav-links, 0.8);
-        }
-      }
-    }
-  }
-
-  // Sidebar
-  .nav-sidebar li.active {
-    box-shadow: inset 4px 0 0 $border-and-box-shadow;
-
-    > a {
-      color: $sidebar-text;
-    }
-
-    .nav-icon-container svg {
-      fill: $sidebar-text;
-    }
-  }
-
-  .sidebar-top-level-items > li.active .badge.badge-pill {
-    color: $sidebar-text;
-  }
-
-  .nav-links li {
-    &.active a,
-    &.md-header-tab.active button,
-    a.active {
-      border-bottom: 2px solid $active-tab-border;
-
-      .badge.badge-pill {
-        font-weight: $gl-font-weight-bold;
-      }
-    }
-  }
-
-  .branch-header-title {
-    color: $border-and-box-shadow;
-  }
-
-  .ide-sidebar-link {
-    &.active {
-      color: $border-and-box-shadow;
-      box-shadow: inset 3px 0 $border-and-box-shadow;
-
-      &.is-right {
-        box-shadow: inset -3px 0 $border-and-box-shadow;
-      }
-    }
-  }
-}
-
-body {
-  &.ui-indigo {
-    @include gitlab-theme(
-      $indigo-200,
-      $indigo-500,
-      $indigo-700,
-      $indigo-800,
-      $indigo-900,
-      $white
-    );
-  }
-
-  &.ui-light-indigo {
-    @include gitlab-theme(
-      $indigo-200,
-      $indigo-500,
-      $indigo-500,
-      $indigo-700,
-      $indigo-700,
-      $white
-    );
-  }
-
-  &.ui-blue {
-    @include gitlab-theme(
-      $theme-blue-200,
-      $theme-blue-500,
-      $theme-blue-700,
-      $theme-blue-800,
-      $theme-blue-900,
-      $white
-    );
-  }
-
-  &.ui-light-blue {
-    @include gitlab-theme(
-      $theme-light-blue-200,
-      $theme-light-blue-500,
-      $theme-light-blue-500,
-      $theme-light-blue-700,
-      $theme-light-blue-700,
-      $white
-    );
-  }
-
-  &.ui-green {
-    @include gitlab-theme(
-      $theme-green-200,
-      $theme-green-500,
-      $theme-green-700,
-      $theme-green-800,
-      $theme-green-900,
-      $white
-    );
-  }
-
-  &.ui-light-green {
-    @include gitlab-theme(
-      $theme-green-200,
-      $theme-green-500,
-      $theme-green-500,
-      $theme-light-green-700,
-      $theme-light-green-700,
-      $white
-    );
-  }
-
-  &.ui-red {
-    @include gitlab-theme(
-      $theme-red-200,
-      $theme-red-500,
-      $theme-red-700,
-      $theme-red-800,
-      $theme-red-900,
-      $white
-    );
-  }
-
-  &.ui-light-red {
-    @include gitlab-theme(
-      $theme-light-red-200,
-      $theme-light-red-500,
-      $theme-light-red-500,
-      $theme-light-red-700,
-      $theme-light-red-700,
-      $white
-    );
-  }
-
-  &.ui-dark {
-    @include gitlab-theme(
-      $gray-200,
-      $gray-300,
-      $gray-500,
-      $gray-700,
-      $gray-900,
-      $white
-    );
-  }
-
-  &.ui-light {
-    @include gitlab-theme(
-      $gray-500,
-      $gray-700,
-      $gray-500,
-      $gray-500,
-      $gray-50,
-      $gray-500
-    );
-
-    .navbar-gitlab {
-      background-color: $gray-50;
-      box-shadow: 0 1px 0 0 $border-color;
-
-      .logo-text svg {
-        fill: $gray-900;
-      }
-
-      .navbar-sub-nav,
-      .navbar-nav {
-        > li {
-          > a:hover,
-          > a:focus,
-          > button:hover {
-            color: $gray-900;
-          }
-
-          &.active > a,
-          &.active > a:hover,
-          &.active > button {
-            color: $white;
-          }
-        }
-      }
-
-      .container-fluid {
-        .navbar-toggler,
-        .navbar-toggler:hover {
-          color: $gray-500;
-          border-left: 1px solid $gray-100;
-        }
-      }
-    }
-
-    .search {
-      form {
-        background-color: $white;
-        box-shadow: inset 0 0 0 1px $border-color;
-
-        &:hover {
-          background-color: $white;
-          box-shadow: inset 0 0 0 1px $blue-200;
-        }
-      }
-
-      .search-input-wrap {
-        .search-icon {
-          fill: $gray-100;
-        }
-
-        .search-input {
-          color: $gl-text-color;
-        }
-      }
-    }
-
-    .nav-sidebar li.active {
-      > a {
-        color: $gray-900;
-      }
-
-      svg {
-        fill: $gray-900;
-      }
-    }
-
-    .sidebar-top-level-items > li.active .badge.badge-pill {
-      color: $gray-900;
-    }
-  }
-
-  &.gl-dark {
-    .logo-text svg {
-      fill: $gl-text-color;
-    }
-
-    .navbar-gitlab {
-      background-color: $gray-50;
-
-      .navbar-sub-nav,
-      .navbar-nav {
-        li {
-          > a:hover,
-          > a:focus,
-          > button:hover,
-          > button:focus {
-            color: $gl-text-color;
-            background-color: $gray-200;
-          }
-        }
-
-        li.active,
-        li.dropdown.show {
-          > a,
-          > button {
-            color: $gl-text-color;
-            background-color: $gray-200;
-          }
-        }
-      }
-
-      .search {
-        form {
-          background-color: $gray-100;
-          box-shadow: inset 0 0 0 1px $border-color;
-
-          &:active,
-          &:hover {
-            background-color: $gray-100;
-            box-shadow: inset 0 0 0 1px $blue-200;
-          }
-        }
-      }
-    }
-  }
-}
diff --git a/app/assets/stylesheets/framework/header.scss b/app/assets/stylesheets/framework/header.scss
index 50628c7de82..cf21c23cb17 100644
--- a/app/assets/stylesheets/framework/header.scss
+++ b/app/assets/stylesheets/framework/header.scss
@@ -235,9 +235,8 @@
         border-top-left-radius: 0;
         border-bottom-left-radius: 0;
 
-        i {
+        svg {
           color: $orange-500;
-          font-size: 20px;
         }
       }
     }
@@ -459,15 +458,15 @@
     box-shadow: 0 1px 0 rgba($gl-header-color, 0.2);
 
     &.green-badge {
-      background-color: $green-500;
+      background-color: $green-400;
     }
 
     &.merge-requests-count {
-      background-color: $orange-600;
+      background-color: $orange-400;
     }
 
     &.todos-count {
-      background-color: $blue-500;
+      background-color: $blue-400;
     }
   }
 
diff --git a/app/assets/stylesheets/framework/job_log.scss b/app/assets/stylesheets/framework/job_log.scss
index 2448be1bca3..d48a5116677 100644
--- a/app/assets/stylesheets/framework/job_log.scss
+++ b/app/assets/stylesheets/framework/job_log.scss
@@ -17,7 +17,7 @@
 }
 
 .line-number {
-  color: $gl-gray-500;
+  color: $gray-500;
   padding: 0 $gl-padding-8;
   min-width: $job-line-number-width;
   margin-left: -$job-line-number-margin;
@@ -28,7 +28,7 @@
   &:active,
   &:visited {
     text-decoration: underline;
-    color: $gl-gray-500;
+    color: $gray-500;
   }
 }
 
@@ -43,7 +43,7 @@
 }
 
 .log-duration-badge {
-  background: $gl-gray-400;
+  background: $gray-300;
 }
 
 .loader-animation {
diff --git a/app/assets/stylesheets/framework/lists.scss b/app/assets/stylesheets/framework/lists.scss
index 738150dbd2e..2464ea3607b 100644
--- a/app/assets/stylesheets/framework/lists.scss
+++ b/app/assets/stylesheets/framework/lists.scss
@@ -34,17 +34,6 @@
       }
     }
 
-    &.warning-row {
-      background-color: $orange-100;
-      border-color: $orange-200;
-      color: $orange-700;
-
-      &:hover {
-        background: $orange-100;
-      }
-
-    }
-
     &.smoke { background-color: $gray-light; }
 
     &:last-child {
@@ -132,10 +121,10 @@ ul.content-list {
 
     a {
       color: $gl-text-color;
-    }
 
-    .member-group-link {
-      color: $blue-600;
+      &.inline-link {
+        color: $blue-600;
+      }
     }
 
     .description {
diff --git a/app/assets/stylesheets/framework/secondary_navigation_elements.scss b/app/assets/stylesheets/framework/secondary_navigation_elements.scss
index 1352fa13e1a..292d57f132c 100644
--- a/app/assets/stylesheets/framework/secondary_navigation_elements.scss
+++ b/app/assets/stylesheets/framework/secondary_navigation_elements.scss
@@ -97,13 +97,8 @@
     }
 
     /* Small devices (phones, tablets, 768px and lower) */
-    @include media-breakpoint-down(xs) {
+    @include media-breakpoint-down(sm) {
       width: 100%;
-
-      &.mobile-separator {
-        border-bottom: 1px solid $border-color;
-        margin-bottom: $gl-padding-8;
-      }
     }
   }
 
diff --git a/app/assets/stylesheets/framework/selects.scss b/app/assets/stylesheets/framework/selects.scss
index e81ecfb43d5..86a5aa1a16e 100644
--- a/app/assets/stylesheets/framework/selects.scss
+++ b/app/assets/stylesheets/framework/selects.scss
@@ -300,7 +300,7 @@
   }
 
   .group-path {
-    color: $gl-gray-400;
+    color: $gray-300;
   }
 }
 
@@ -310,7 +310,7 @@
   }
 
   .project-path {
-    color: $gl-gray-400;
+    color: $gray-300;
   }
 }
 
@@ -332,7 +332,7 @@
 
 .namespace-result {
   .namespace-kind {
-    color: $gl-gray-350;
+    color: $gray-300;
     font-weight: $gl-font-weight-normal;
   }
 
diff --git a/app/assets/stylesheets/framework/sidebar.scss b/app/assets/stylesheets/framework/sidebar.scss
index 4ba9db811b7..d867cc96dbc 100644
--- a/app/assets/stylesheets/framework/sidebar.scss
+++ b/app/assets/stylesheets/framework/sidebar.scss
@@ -145,6 +145,13 @@
   .value.dont-hide ~ .selectbox {
     padding-top: $gl-padding-8;
   }
+
+  // This is for sidebar components using gl-button for the Edit button to be consistent with the
+  // rest of the sidebar, and could be removed once the sidebar has been fully converted to use
+  // gitlab-ui components.
+  .title .gl-button {
+    color: $gl-text-color;
+  }
 }
 
 .pikaday-container {
diff --git a/app/assets/stylesheets/framework/spinner.scss b/app/assets/stylesheets/framework/spinner.scss
index d734895c7dc..a74aeb9f220 100644
--- a/app/assets/stylesheets/framework/spinner.scss
+++ b/app/assets/stylesheets/framework/spinner.scss
@@ -31,7 +31,7 @@
   border-style: solid;
   display: inline-flex;
   @include spinner-size(16px, 2px);
-  @include spinner-color($orange-600);
+  @include spinner-color($orange-400);
 
   &.spinner-md {
     @include spinner-size(32px, 3px);
diff --git a/app/assets/stylesheets/framework/stacked_progress_bar.scss b/app/assets/stylesheets/framework/stacked_progress_bar.scss
index a3037549881..37283db8b71 100644
--- a/app/assets/stylesheets/framework/stacked_progress_bar.scss
+++ b/app/assets/stylesheets/framework/stacked_progress_bar.scss
@@ -37,7 +37,7 @@
 
   .status-neutral {
     background-color: $gray-100;
-    color: $gl-gray-dark;
+    color: $gray-900;
 
     &:hover {
       background-color: $gray-200;
diff --git a/app/assets/stylesheets/framework/tables.scss b/app/assets/stylesheets/framework/tables.scss
index 1f60485aa36..59e83608d9d 100644
--- a/app/assets/stylesheets/framework/tables.scss
+++ b/app/assets/stylesheets/framework/tables.scss
@@ -180,3 +180,37 @@ table {
     border-top: 0;
   }
 }
+
+.vulnerability-list {
+  @media (min-width: $breakpoint-sm) {
+    .checkbox {
+      padding-left: $gl-spacing-scale-4;
+      padding-right: 0;
+
+      + td,
+      + th {
+        padding-left: $gl-spacing-scale-4;
+      }
+    }
+
+    .detected {
+      width: 9%;
+    }
+
+    .status {
+      width: 8%;
+    }
+
+    .severity {
+      width: 10%;
+    }
+
+    .identifier {
+      width: 16%;
+    }
+
+    .scanner {
+      width: 15%;
+    }
+  }
+}
diff --git a/app/assets/stylesheets/framework/typography.scss b/app/assets/stylesheets/framework/typography.scss
index 8758fe15870..8b5fa6c1b6c 100644
--- a/app/assets/stylesheets/framework/typography.scss
+++ b/app/assets/stylesheets/framework/typography.scss
@@ -84,7 +84,7 @@
     padding: 3px 5px;
     font-size: 11px;
     line-height: 10px;
-    color: $gl-gray-700;
+    color: $gray-700;
     vertical-align: middle;
     background-color: $gray-10;
     border-width: 1px;
diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index 69e00f9b2c4..8cebfc430e0 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -104,15 +104,6 @@ $t-gray-a-04: rgba($black, 0.04) !default;
 $t-gray-a-06: rgba($black, 0.06) !default;
 $t-gray-a-08: rgba($black, 0.08) !default;
 
-$gl-gray-100: #ddd !default;
-$gl-gray-200: #ccc !default;
-$gl-gray-350: #aaa !default;
-$gl-gray-400: #999 !default;
-$gl-gray-500: #777 !default;
-$gl-gray-600: #666 !default;
-$gl-gray-700: #555 !default;
-$gl-gray-800: #333 !default;
-
 $green-50: #ecf4ee !default;
 $green-100: #c3e6cd !default;
 $green-200: #91d4a8 !default;
@@ -137,17 +128,17 @@ $blue-800: #064787 !default;
 $blue-900: #033464 !default;
 $blue-950: #002850 !default;
 
-$orange-50: #fffaf4 !default;
-$orange-100: #fff1de !default;
-$orange-200: #fed69f !default;
-$orange-300: #fdbc60 !default;
-$orange-400: #fca429 !default;
-$orange-500: #fc9403 !default;
-$orange-600: #de7e00 !default;
-$orange-700: #c26700 !default;
-$orange-800: #a35200 !default;
-$orange-900: #853c00 !default;
-$orange-950: #592800 !default;
+$orange-50: #fdf1dd !default;
+$orange-100: #f5d9a8 !default;
+$orange-200: #e9be74 !default;
+$orange-300: #d99530 !default;
+$orange-400: #c17d10 !default;
+$orange-500: #ab6100 !default;
+$orange-600: #9e5400 !default;
+$orange-700: #8f4700 !default;
+$orange-800: #703800 !default;
+$orange-900: #5c2900 !default;
+$orange-950: #421f00 !default;
 
 $red-50: #fcf1ef !default;
 $red-100: #fdd4cd !default;
@@ -161,6 +152,18 @@ $red-800: #8d1300 !default;
 $red-900: #660e00 !default;
 $red-950: #4d0a00 !default;
 
+$purple-50: #f4f0ff !default;
+$purple-100: #e1d8f9 !default;
+$purple-200: #cbbbf2 !default;
+$purple-300: #ac93e6 !default;
+$purple-400: #9475db !default;
+$purple-500: #7b58cf !default;
+$purple-600: #694cc0 !default;
+$purple-700: #5943b6 !default;
+$purple-800: #453894 !default;
+$purple-900: #2f2a6b !default;
+$purple-950: #232150 !default;
+
 $gray-10: #fafafa !default;
 $gray-50: #f0f0f0 !default;
 $gray-100: #dbdbdb !default;
@@ -230,6 +233,20 @@ $reds: (
   '950': $red-950
 );
 
+$purples: (
+  '50': $purple-50,
+  '100': $purple-100,
+  '200': $purple-200,
+  '300': $purple-300,
+  '400': $purple-400,
+  '500': $purple-500,
+  '600': $purple-600,
+  '700': $purple-700,
+  '800': $purple-800,
+  '900': $purple-900,
+  '950': $purple-950
+);
+
 $grays: (
   '10': $gray-10,
   '50': $gray-50,
@@ -357,13 +374,10 @@ $gl-text-color-inverted: $white;
 $gl-text-color-secondary-inverted: rgba($white, 0.85);
 $gl-text-color-disabled: $gray-400;
 $gl-grayish-blue: #7f8fa4;
-$gl-gray-dark: #313236;
-$gl-gray-light: #5c5c5c;
 $gl-header-color: #4c4e54;
 $gl-font-size-12: 12px;
 $gl-font-size-14: 14px;
 $gl-font-size-16: 16px;
-$gl-font-size-20: 20px;
 $gl-font-size-28: 28px;
 $gl-font-size-42: 42px;
 
@@ -484,6 +498,22 @@ $line-added: #ecfdf0;
 $line-added-dark: #c7f0d2 !default;
 $line-removed: #fbe9eb;
 $line-removed-dark: #fac5cd !default;
+/*
+ * The transparent colors are used in Monaco editor. Using full opacity colors
+ * would hide other layers (selected text, matching brackets).
+ *
+ * When the transparent colors get layered on white background, they create their
+ * full opacity counterparts (computed with https://stackoverflow.com/a/12228643/606571):
+ *
+ *  - white + $line-added-transparent = $line-added
+ *  - white + $line-added-transparent + $line-added-dark-transparent = $line-added-dark
+ *
+ * More details: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/41553
+ */
+$line-added-transparent: rgba(160, 245, 180, 0.2);
+$line-added-dark-transparent: rgba(51, 188, 90, 0.2);
+$line-removed-transparent: rgba(235, 145, 155, 0.2);
+$line-removed-dark-transparent: rgba(246, 53, 85, 0.2);
 $line-number-old: #f9d7dc;
 $line-number-new: #ddfbe6;
 $line-number-select: #fbf2da;
@@ -588,7 +618,6 @@ $award-emoji-width-xs: 90%;
 $search-input-border-color: rgba($blue-400, 0.8);
 $search-input-width: 200px;
 $search-input-xl-width: 320px;
-$location-icon-color: #e7e9ed;
 
 /*
  *  Notes
@@ -894,8 +923,3 @@ $compare-branches-sticky-header-height: 68px;
  - Issue: https://gitlab.com/gitlab-org/design.gitlab.com/issues/242
  */
 $enable-validation-icons: false;
-
-/*
-Licenses
-*/
-$license-header-cell-width: 150px;
diff --git a/app/assets/stylesheets/framework/wells.scss b/app/assets/stylesheets/framework/wells.scss
index 3eff1807403..55996a074c6 100644
--- a/app/assets/stylesheets/framework/wells.scss
+++ b/app/assets/stylesheets/framework/wells.scss
@@ -110,10 +110,6 @@
 
 .dark-well {
   background-color: $gray-normal;
-
-  .btn {
-    width: 100%;
-  }
 }
 
 .card.card-body-centered {
diff --git a/app/assets/stylesheets/framework/zen.scss b/app/assets/stylesheets/framework/zen.scss
index dd5b99be57e..62abf4a7683 100644
--- a/app/assets/stylesheets/framework/zen.scss
+++ b/app/assets/stylesheets/framework/zen.scss
@@ -35,7 +35,7 @@
 
 .zen-control {
   padding: 0;
-  color: $gl-gray-700;
+  color: $gray-700;
   background: none;
   border: 0;
 }
diff --git a/app/assets/stylesheets/mailer.scss b/app/assets/stylesheets/mailer.scss
index f188b29a113..a5fc92237df 100644
--- a/app/assets/stylesheets/mailer.scss
+++ b/app/assets/stylesheets/mailer.scss
@@ -48,6 +48,22 @@ a {
   font-weight: 500;
 }
 
+.invite-header {
+  margin-top: 0;
+}
+
+.invite-actions {
+  margin-top: 24px;
+}
+
+.invite-btn-join {
+  border-radius: $border-radius-default;
+  padding: $gl-btn-vert-padding $gl-btn-horz-padding;
+  cursor: pointer;
+  background-color: $purple;
+  color: $white;
+}
+
 tr td {
   font-family: $mailer-font;
 }
diff --git a/app/assets/stylesheets/notify.scss b/app/assets/stylesheets/notify.scss
index 6320c10fb51..d281f62c370 100644
--- a/app/assets/stylesheets/notify.scss
+++ b/app/assets/stylesheets/notify.scss
@@ -7,12 +7,12 @@ img {
 
 p.details {
   font-style: italic;
-  color: $gl-gray-500;
+  color: $gray-500;
 }
 
 .footer > p {
   font-size: small;
-  color: $gl-gray-500;
+  color: $gray-500;
 }
 
 pre.commit-message {
diff --git a/app/assets/stylesheets/page_bundles/_ide_monaco_overrides.scss b/app/assets/stylesheets/page_bundles/_ide_monaco_overrides.scss
index 0b847902525..57053c7f0cb 100644
--- a/app/assets/stylesheets/page_bundles/_ide_monaco_overrides.scss
+++ b/app/assets/stylesheets/page_bundles/_ide_monaco_overrides.scss
@@ -19,14 +19,6 @@
     display: none;
   }
 
-  .monaco-editor .selected-text {
-    z-index: 1;
-  }
-
-  .monaco-editor .view-lines {
-    z-index: 2;
-  }
-
   .is-readonly .editor.original {
     .view-lines {
       cursor: default;
@@ -98,11 +90,11 @@
     }
 
     .char-insert {
-      background-color: $line-added-dark;
+      background-color: $line-added-dark-transparent;
     }
 
     .char-delete {
-      background-color: $line-removed-dark;
+      background-color: $line-removed-dark-transparent;
     }
 
     .line-numbers {
@@ -111,11 +103,11 @@
 
     .view-overlays {
       .line-insert {
-        background-color: $line-added;
+        background-color: $line-added-transparent;
       }
 
       .line-delete {
-        background-color: $line-removed;
+        background-color: $line-removed-transparent;
       }
     }
 
diff --git a/app/assets/stylesheets/page_bundles/_ide_theme_overrides.scss b/app/assets/stylesheets/page_bundles/_ide_theme_overrides.scss
index dfd7fd355a4..1e239877428 100644
--- a/app/assets/stylesheets/page_bundles/_ide_theme_overrides.scss
+++ b/app/assets/stylesheets/page_bundles/_ide_theme_overrides.scss
@@ -84,7 +84,8 @@
     color: var(--ide-input-border, $gl-text-color-tertiary);
   }
 
-  .dropdown-input .fa {
+  .dropdown-input .fa,
+  .dropdown-input .dropdown-input-clear {
     color: var(--ide-input-border, $dropdown-input-fa-color);
   }
 
diff --git a/app/assets/stylesheets/page_bundles/_mixins_and_variables_and_functions.scss b/app/assets/stylesheets/page_bundles/_mixins_and_variables_and_functions.scss
new file mode 100644
index 00000000000..0e8ea5e2d52
--- /dev/null
+++ b/app/assets/stylesheets/page_bundles/_mixins_and_variables_and_functions.scss
@@ -0,0 +1,21 @@
+/**
+  This file contains only imports of Bootstrap, GitLab UI and GitLab mixins,
+  variables and functions, in the correct order.
+
+  It is meant to be used in page_bundles, but SHOULD NOT introduce any
+  styles of it's own. We actually check in CI that compiling _this_ file doesn't
+  result in any additional styles.
+
+  See: scripts/frontend/check_page_bundle_mixins_css_for_sideeffects.js
+ */
+@import 'framework/variables';
+@import 'framework/variables_overrides';
+@import 'framework/mixins';
+
+@import 'bootstrap/scss/functions';
+@import 'bootstrap/scss/variables';
+@import 'bootstrap/scss/mixins';
+
+@import '@gitlab/ui/src/scss/functions';
+@import '@gitlab/ui/src/scss/variables';
+@import '@gitlab/ui/src/scss/utility-mixins/index';
diff --git a/app/assets/stylesheets/page_bundles/ide.scss b/app/assets/stylesheets/page_bundles/ide.scss
index 36587ecde3d..71e74297ee8 100644
--- a/app/assets/stylesheets/page_bundles/ide.scss
+++ b/app/assets/stylesheets/page_bundles/ide.scss
@@ -1080,7 +1080,7 @@ $ide-commit-header-height: 48px;
   max-width: 24px;
   padding: 0;
   margin: 0 ($grid-size / 2);
-  color: var(--ide-text-color-secondary, $gl-gray-light);
+  color: var(--ide-text-color-secondary, $gray-600);
 
   &:first-child {
     margin-left: 0;
diff --git a/app/assets/stylesheets/page_bundles/jira_connect.scss b/app/assets/stylesheets/page_bundles/jira_connect.scss
new file mode 100644
index 00000000000..83d16f29d49
--- /dev/null
+++ b/app/assets/stylesheets/page_bundles/jira_connect.scss
@@ -0,0 +1,33 @@
+@import 'framework/variables';
+
+$atlaskit-border-color: #dfe1e6;
+
+.ac-content {
+  margin: 20px;
+
+  .subscription-form {
+    margin-bottom: 20px;
+
+    .field-group-input {
+      display: flex;
+      padding-top: $gl-padding-4;
+
+      .ak-button {
+        height: auto;
+        margin-left: $btn-margin-5;
+      }
+    }
+  }
+}
+
+.subscriptions {
+  tbody {
+    tr {
+      border-bottom: 1px solid $atlaskit-border-color;
+    }
+
+    td {
+      padding: $gl-padding-8;
+    }
+  }
+}
diff --git a/app/assets/stylesheets/pages/todos.scss b/app/assets/stylesheets/page_bundles/todos.scss
index c6f104a024b..3eec5b53a30 100644
--- a/app/assets/stylesheets/pages/todos.scss
+++ b/app/assets/stylesheets/page_bundles/todos.scss
@@ -1,3 +1,5 @@
+@import 'mixins_and_variables_and_functions';
+
 /**
  * Dashboard Todos
  *
@@ -10,8 +12,8 @@
   flex-direction: row;
 
   &:hover {
-    background-color: $blue-50;
-    border-color: $blue-200;
+    background-color: var(--blue-50, $blue-50);
+    border-color: var(--blue-200, $blue-200);
     cursor: pointer;
   }
 
@@ -20,7 +22,7 @@
     border-bottom: 1px solid transparent;
 
     &:hover {
-      border-color: $blue-200;
+      border-color: var(--blue-200, $blue-200);
     }
   }
 
@@ -44,11 +46,9 @@
   }
 
   &.todo-pending.done-reversible {
-    background-color: $white;
-
     &:hover {
-      border-color: $white-normal;
-      background-color: $gray-light;
+      border-color: var(--border-color, $border-color);
+      background-color: var(--gray-50, $gray-50);
       border-top: 1px solid transparent;
 
       .todo-avatar,
@@ -63,7 +63,7 @@
     }
 
     .btn {
-      background-color: $gray-light;
+      background-color: var(--gray-50, $gray-50);
     }
   }
 }
@@ -103,15 +103,15 @@
   .todo-label,
   .todo-project {
     a {
-      color: $blue-600;
       font-weight: $gl-font-weight-normal;
+      color: var(--blue-600, $blue-600);
     }
   }
 
   .todo-body {
     .badge.badge-pill,
     p {
-      color: $gl-text-color;
+      color: var(--gl-text-color, $gl-text-color);
     }
 
     .md {
@@ -125,9 +125,9 @@
 
     pre {
       border: 0;
-      background: $gray-light;
+      background: var(--gray-50, $gray-50);
       border-radius: 0;
-      color: $gl-gray-500;
+      color: var(--gray-500, $gray-500);
       margin: 0 20px;
       overflow: hidden;
     }
@@ -149,18 +149,6 @@
   }
 }
 
-@include media-breakpoint-down(sm) {
-  .todos-filters {
-    .dropdown-menu-toggle {
-      width: 130px;
-    }
-
-    .dropdown-menu-toggle-sort {
-      width: auto;
-    }
-  }
-}
-
 @include media-breakpoint-down(lg) {
   .todos-filters {
     .filter-categories {
@@ -174,6 +162,10 @@
 }
 
 @include media-breakpoint-down(sm) {
+  .container-fluid .todos-list-container {
+    margin: 0 (-$gl-padding);
+  }
+
   .todo {
     .avatar {
       display: none;
@@ -191,7 +183,7 @@
 
     .todo-body {
       margin: 0;
-      border-left: 2px solid $gl-gray-100;
+      border-left: 2px solid var(--border-color, $border-color);
       padding-left: 10px;
     }
   }
@@ -204,6 +196,10 @@
     .dropdown-menu-toggle {
       width: 100%;
     }
+
+    .dropdown-menu-toggle-sort {
+      width: auto;
+    }
   }
 }
 
diff --git a/app/assets/stylesheets/pages/alert_management/details.scss b/app/assets/stylesheets/pages/alert_management/details.scss
index 0f889935583..a104c06c853 100644
--- a/app/assets/stylesheets/pages/alert_management/details.scss
+++ b/app/assets/stylesheets/pages/alert_management/details.scss
@@ -1,39 +1,4 @@
 .alert-management-details {
-  // these styles need to be deleted once GlTable component looks in GitLab same as in @gitlab/ui
-  table {
-    tr {
-      td {
-        @include gl-border-0;
-        @include gl-p-5;
-        border-color: transparent;
-        border-bottom: 1px solid $table-border-color;
-
-        &:first-child {
-          div {
-            font-weight: bold;
-          }
-        }
-
-        &:not(:first-child) {
-          &::before {
-            color: $gray-500;
-            font-weight: normal !important;
-          }
-
-          div {
-            color: $gray-500;
-          }
-        }
-
-        @include media-breakpoint-up(sm) {
-          div {
-            text-align: left !important;
-          }
-        }
-      }
-    }
-  }
-
   @include media-breakpoint-down(xs) {
     .alert-details-incident-button {
       width: 100%;
@@ -67,6 +32,10 @@
     }
   }
 
+  .main-notes-list::before {
+    left: 15px !important;
+  }
+
   .note-header-info {
     @include gl-mt-1;
   }
diff --git a/app/assets/stylesheets/pages/alert_management/severity-icons.scss b/app/assets/stylesheets/pages/alert_management/severity-icons.scss
index 6004697b3e1..f58ad87a673 100644
--- a/app/assets/stylesheets/pages/alert_management/severity-icons.scss
+++ b/app/assets/stylesheets/pages/alert_management/severity-icons.scss
@@ -1,3 +1,4 @@
+.incident-severity,
 .incident-management-list,
 .alert-management-details {
   .icon-critical {
diff --git a/app/assets/stylesheets/pages/boards.scss b/app/assets/stylesheets/pages/boards.scss
index 51a65b88cd0..c4852974a4d 100644
--- a/app/assets/stylesheets/pages/boards.scss
+++ b/app/assets/stylesheets/pages/boards.scss
@@ -116,7 +116,6 @@
 
     .board-title {
       flex-direction: column;
-      height: 100%;
     }
 
     .board-title-caret {
@@ -284,7 +283,7 @@
   }
 
   .confidential-icon {
-    color: $orange-600;
+    color: $orange-500;
     cursor: help;
   }
 
diff --git a/app/assets/stylesheets/pages/branches.scss b/app/assets/stylesheets/pages/branches.scss
index 3c49cc54ac4..d34d309eea3 100644
--- a/app/assets/stylesheets/pages/branches.scss
+++ b/app/assets/stylesheets/pages/branches.scss
@@ -23,7 +23,7 @@
 
     .bar {
       height: 4px;
-      background-color: $gl-gray-100;
+      background-color: $gray-100;
     }
 
     .count {
@@ -34,7 +34,7 @@
   .graph-separator {
     width: $graph-separator-width;
     height: 18px;
-    background-color: $gl-gray-100;
+    background-color: $gray-100;
   }
 }
 
diff --git a/app/assets/stylesheets/pages/builds.scss b/app/assets/stylesheets/pages/builds.scss
index f367d9ea4d8..04167cbee1b 100644
--- a/app/assets/stylesheets/pages/builds.scss
+++ b/app/assets/stylesheets/pages/builds.scss
@@ -50,7 +50,7 @@
     top: $header-height;
     border-radius: 2px 2px 0 0;
     color: $orange-600;
-    background-color: $orange-100;
+    background-color: $orange-50;
     border: 1px solid $border-gray-normal;
     padding: 3px 12px;
     margin: auto;
@@ -63,7 +63,7 @@
   }
 
   .top-bar {
-    @include build-trace-top-bar(35px);
+    @include build-trace-top-bar(50px);
 
     &.has-archived-block {
       top: $header-height + 28px;
diff --git a/app/assets/stylesheets/pages/clusters.scss b/app/assets/stylesheets/pages/clusters.scss
index 29422c1f7fa..4e27f438e36 100644
--- a/app/assets/stylesheets/pages/clusters.scss
+++ b/app/assets/stylesheets/pages/clusters.scss
@@ -69,7 +69,7 @@
   align-self: flex-start;
   font-weight: 500;
   font-size: 20px;
-  color: $orange-900;
+  color: $orange-500;
   opacity: 1;
   margin: $gl-padding-8 14px 0 0;
 }
@@ -124,7 +124,7 @@
       background-color: none;
       border: 0;
       font-weight: bold;
-      color: $gl-gray-500;
+      color: $gray-500;
     }
   }
 }
@@ -156,7 +156,7 @@
 }
 
 .cluster-deployments-warning {
-  color: $orange-600;
+  color: $orange-500;
 }
 
 .badge.pods-badge {
diff --git a/app/assets/stylesheets/pages/cycle_analytics.scss b/app/assets/stylesheets/pages/cycle_analytics.scss
index b97709e140f..c509bf121bc 100644
--- a/app/assets/stylesheets/pages/cycle_analytics.scss
+++ b/app/assets/stylesheets/pages/cycle_analytics.scss
@@ -41,15 +41,6 @@
       width: 20%;
     }
 
-    .fa,
-    svg {
-      color: $cycle-analytics-light-gray;
-
-      &:hover {
-        color: $gl-text-color;
-      }
-    }
-
     .stage-header {
       width: 20.5%;
     }
@@ -360,23 +351,3 @@
     }
   }
 }
-
-.cycle-analytics-overview {
-  padding-top: 100px;
-
-  .overview-details {
-    display: flex;
-    align-items: center;
-  }
-
-  .overview-image {
-    text-align: right;
-  }
-
-  .overview-icon {
-    svg {
-      width: 365px;
-      height: 227px;
-    }
-  }
-}
diff --git a/app/assets/stylesheets/pages/dev_ops_score.scss b/app/assets/stylesheets/pages/dev_ops_report.scss
index b9ee905f4b6..871cd9c4f02 100644
--- a/app/assets/stylesheets/pages/dev_ops_score.scss
+++ b/app/assets/stylesheets/pages/dev_ops_report.scss
@@ -25,6 +25,10 @@ $space-between-cards: 8px;
     margin-left: 8px;
     font-weight: $gl-font-weight-normal;
 
+    .devops-header-icon {
+      vertical-align: px-to-rem(-$gl-spacing-scale-1);
+    }
+
     a {
       font-size: 18px;
       color: $gl-text-color-secondary;
@@ -88,7 +92,7 @@ $space-between-cards: 8px;
 }
 
 .devops-card-average {
-  border-top-color: $orange-400;
+  border-top-color: $orange-200;
 
   .board-card-score-big {
     background-color: $orange-50;
@@ -247,7 +251,7 @@ $space-between-cards: 8px;
 }
 
 .devops-average-score {
-  color: $orange-400;
+  color: $orange-500;
 }
 
 .devops-low-score {
diff --git a/app/assets/stylesheets/pages/diff.scss b/app/assets/stylesheets/pages/diff.scss
index a7b93c9eab7..62af7103b39 100644
--- a/app/assets/stylesheets/pages/diff.scss
+++ b/app/assets/stylesheets/pages/diff.scss
@@ -102,7 +102,7 @@
 
     .file-mode-changed {
       padding: 10px;
-      color: $gl-gray-500;
+      color: $gray-500;
     }
 
     .suppressed-container {
@@ -181,7 +181,7 @@
 
       .swipe-wrap {
         overflow: hidden;
-        border-right: 1px solid $gl-gray-400;
+        border-right: 1px solid $gray-300;
         position: absolute;
         display: block;
         top: 13px;
@@ -190,7 +190,7 @@
         &.left-oriented {
           /* only for commit view (different swipe viewer) */
           border-right: 0;
-          border-left: 1px solid $gl-gray-400;
+          border-left: 1px solid $gray-300;
         }
       }
 
@@ -1062,7 +1062,7 @@ table.code {
 .diff-tree-list {
   position: -webkit-sticky;
   position: sticky;
-  $top-pos: $header-height + $mr-tabs-height + $mr-version-controls-height + 11px;
+  $top-pos: $header-height + $mr-tabs-height + $mr-version-controls-height + 15px;
   top: $top-pos;
   max-height: calc(100vh - #{$top-pos});
   z-index: 202;
diff --git a/app/assets/stylesheets/pages/environments.scss b/app/assets/stylesheets/pages/environments.scss
index ef7b56ac210..5ce500dad1d 100644
--- a/app/assets/stylesheets/pages/environments.scss
+++ b/app/assets/stylesheets/pages/environments.scss
@@ -83,7 +83,7 @@
 
 .x-axis path,
 .y-axis path {
-  stroke: $gl-gray-350;
+  stroke: $gray-300;
 }
 
 .label-x-axis-line,
@@ -93,7 +93,7 @@
 
 .y-axis {
   line {
-    stroke: $gl-gray-350;
+    stroke: $gray-300;
     stroke-width: 1;
   }
 }
@@ -117,7 +117,7 @@
 }
 
 .selected-metric-line {
-  stroke: $gl-gray-dark;
+  stroke: $gray-900;
   stroke-width: 1;
 }
 
diff --git a/app/assets/stylesheets/pages/events.scss b/app/assets/stylesheets/pages/events.scss
index 500f5816d38..5738cbb4b31 100644
--- a/app/assets/stylesheets/pages/events.scss
+++ b/app/assets/stylesheets/pages/events.scss
@@ -94,7 +94,7 @@
         border: 0;
         background: $gray-light;
         border-radius: 0;
-        color: $gl-gray-500;
+        color: $gray-500;
         overflow: hidden;
       }
 
@@ -111,7 +111,7 @@
     }
 
     .event-note-icon {
-      color: $gl-gray-500;
+      color: $gray-500;
       float: left;
       font-size: $gl-font-size;
       margin-right: 5px;
diff --git a/app/assets/stylesheets/pages/graph.scss b/app/assets/stylesheets/pages/graph.scss
index c4b6cdd703d..bca4d50973a 100644
--- a/app/assets/stylesheets/pages/graph.scss
+++ b/app/assets/stylesheets/pages/graph.scss
@@ -43,7 +43,7 @@
 
   .y-axis-label {
     line {
-      stroke: $gl-gray-350;
+      stroke: $gray-300;
     }
 
     text {
diff --git a/app/assets/stylesheets/pages/groups.scss b/app/assets/stylesheets/pages/groups.scss
index c309c8d157a..69fd094f83b 100644
--- a/app/assets/stylesheets/pages/groups.scss
+++ b/app/assets/stylesheets/pages/groups.scss
@@ -52,7 +52,7 @@
 .save-group-loader {
   margin-top: $gl-padding-50;
   margin-bottom: $gl-padding-50;
-  color: $gl-gray-700;
+  color: $gray-700;
 }
 
 .group-nav-container .nav-controls {
diff --git a/app/assets/stylesheets/pages/help.scss b/app/assets/stylesheets/pages/help.scss
index ab281bc7f23..540060d60de 100644
--- a/app/assets/stylesheets/pages/help.scss
+++ b/app/assets/stylesheets/pages/help.scss
@@ -1,6 +1,6 @@
 .shortcut-mappings {
   font-size: 12px;
-  color: $gl-gray-700;
+  color: $gray-700;
 
   tbody:first-child tr:first-child {
     padding-top: 0;
@@ -22,7 +22,7 @@
 
   .shortcut {
     padding-right: 10px;
-    color: $gl-gray-400;
+    color: $gray-300;
     text-align: right;
     white-space: nowrap;
   }
diff --git a/app/assets/stylesheets/pages/incident_management_list.scss b/app/assets/stylesheets/pages/incident_management_list.scss
index 00ca3cc73e0..316066694a8 100644
--- a/app/assets/stylesheets/pages/incident_management_list.scss
+++ b/app/assets/stylesheets/pages/incident_management_list.scss
@@ -108,7 +108,7 @@
     border-bottom-width: 0;
 
     .gl-tab-nav-item {
-      color: $gl-gray-600;
+      color: $gray-500;
 
       > .gl-tab-counter-badge {
         color: inherit;
diff --git a/app/assets/stylesheets/pages/issuable.scss b/app/assets/stylesheets/pages/issuable.scss
index 2f28361f62c..53525a4d877 100644
--- a/app/assets/stylesheets/pages/issuable.scss
+++ b/app/assets/stylesheets/pages/issuable.scss
@@ -1,5 +1,5 @@
 .issuable-warning-icon {
-  background-color: $orange-100;
+  background-color: $orange-50;
   border-radius: $border-radius-default;
   width: $issuable-warning-size;
   height: $issuable-warning-size;
@@ -50,6 +50,7 @@
 
   .title-container {
     display: flex;
+    align-items: flex-start;
   }
 
   .title {
@@ -65,7 +66,6 @@
 
   .btn-edit {
     margin-left: auto;
-    height: $gl-padding * 2;
   }
 
   .emoji-block {
@@ -119,11 +119,11 @@
 
 .assignee {
   .merge-icon {
-    color: $orange-500;
+    color: $orange-400;
     position: absolute;
     bottom: 0;
     right: 0;
-    text-shadow: -1px -1px 0 $white, 1px -1px 0 $white, -1px 1px 0 $white, 1px 1px 0 $white;
+    text-shadow: -1px -1px 2px $white, 1px -1px 2px $white, -1px 1px 2px $white, 1px 1px 2px $white;
   }
 }
 
@@ -234,8 +234,8 @@
 
   .title {
     color: $gl-text-color;
-    margin-bottom: $gl-padding-8;
-    line-height: 1;
+    margin-bottom: $gl-padding-4;
+    line-height: $gl-line-height-20;
 
     .avatar {
       margin-left: 0;
@@ -252,7 +252,8 @@
     }
   }
 
-  .cross-project-reference {
+  .cross-project-reference,
+  .sidebar-mr-source-branch {
     color: inherit;
 
     span {
@@ -360,13 +361,6 @@
       margin: 0;
     }
 
-    .username {
-      display: block;
-      margin-top: 4px;
-      font-size: 13px;
-      font-weight: $gl-font-weight-normal;
-    }
-
     .hide-expanded {
       display: none;
     }
@@ -389,7 +383,8 @@
       border-bottom: 0;
       overflow: hidden;
 
-      &:hover {
+      &.with-sub-blocks .sub-block:hover,
+      &:not(.with-sub-blocks):hover {
         background-color: $gray-100;
       }
 
@@ -444,11 +439,6 @@
         }
       }
 
-      span {
-        display: block;
-        margin-top: 0;
-      }
-
       .sidebar-avatar-counter {
         padding-top: 2px;
       }
@@ -741,7 +731,6 @@
     .issuable-info-container {
       flex: 1;
       display: flex;
-      padding-right: $gl-padding;
 
       .issuable-main-info {
         flex: 1 auto;
@@ -919,12 +908,12 @@
 }
 
 .issuable-todo-btn {
-  .fa-spinner {
+  .gl-spinner {
     display: none;
   }
 
   &.is-loading {
-    .fa-spinner {
+    .gl-spinner {
       display: inline-block;
     }
 
@@ -982,7 +971,7 @@
 }
 
 .suggestion-confidential {
-  color: $orange-600;
+  color: $orange-500;
 }
 
 .suggestion-state-open {
@@ -1006,3 +995,15 @@
     border: 0;
   }
 }
+
+@include media-breakpoint-down(sm) {
+  // Overriding the following rule with the negative margin
+  // https://gitlab.com/gitlab-org/gitlab/-/blob/146c43c931c3743a140529307aea616e4aa9ff21/app/assets/stylesheets/framework/sidebar.scss#L1-5
+  .container-fluid {
+    .issuable-list,
+    .issues-filters,
+    .epics-filters {
+      margin: 0 (-$gl-padding);
+    }
+  }
+}
diff --git a/app/assets/stylesheets/pages/issues.scss b/app/assets/stylesheets/pages/issues.scss
index 0c349ab73a3..03603f637c8 100644
--- a/app/assets/stylesheets/pages/issues.scss
+++ b/app/assets/stylesheets/pages/issues.scss
@@ -14,7 +14,7 @@
   }
 
   .issue {
-    padding: 10px 0 10px $gl-padding;
+    padding: 10px $gl-padding;
     position: relative;
 
     .title {
@@ -294,12 +294,12 @@ ul.related-merge-requests > li {
 
       &::after {
         content: image-url('icon_anchor.svg');
-        @include invisible(hidden);
+        visibility: hidden;
       }
     }
 
     &:hover > a.anchor::after {
-      @include invisible(visible);
+      visibility: visible;
     }
   }
 }
diff --git a/app/assets/stylesheets/pages/members.scss b/app/assets/stylesheets/pages/members.scss
index 54bca80194f..2d9a9f3029f 100644
--- a/app/assets/stylesheets/pages/members.scss
+++ b/app/assets/stylesheets/pages/members.scss
@@ -180,10 +180,6 @@
     word-break: break-all;
   }
 
-  .member-group-link {
-    display: inline-block;
-  }
-
   .form-control {
     width: inherit;
   }
diff --git a/app/assets/stylesheets/pages/merge_requests.scss b/app/assets/stylesheets/pages/merge_requests.scss
index a6d1fc11c3f..8aaeb92eb7a 100644
--- a/app/assets/stylesheets/pages/merge_requests.scss
+++ b/app/assets/stylesheets/pages/merge_requests.scss
@@ -64,7 +64,7 @@ $mr-widget-min-height: 69px;
   background-color: $gray-light;
 
   &.clickable:hover {
-    background-color: $gl-gray-100;
+    background-color: $gray-100;
     cursor: pointer;
   }
 }
@@ -311,7 +311,7 @@ $mr-widget-min-height: 69px;
 
     .bold {
       font-weight: $gl-font-weight-bold;
-      color: $gl-gray-light;
+      color: $gray-600;
       margin-left: 10px;
     }
 
@@ -873,7 +873,6 @@ $mr-widget-min-height: 69px;
   .merge-request-tabs-container,
   .epic-tabs-container {
     flex-direction: column-reverse;
-    padding-top: $gl-padding-8;
   }
 }
 
@@ -883,7 +882,6 @@ $mr-widget-min-height: 69px;
     .epic-tabs-container {
       flex-direction: column-reverse;
       align-items: flex-start;
-      padding-top: $gl-padding-8;
     }
   }
 }
@@ -980,7 +978,7 @@ $mr-widget-min-height: 69px;
     opacity: 0.65;
 
     &:hover {
-      color: $gl-gray-500;
+      color: $gray-500;
       text-decoration: none;
     }
   }
@@ -1035,3 +1033,9 @@ $mr-widget-min-height: 69px;
 .diff-file-row.is-active {
   background-color: $gray-50;
 }
+
+.merge-request-container {
+  .flash-container {
+    @include gl-mb-4;
+  }
+}
diff --git a/app/assets/stylesheets/pages/milestone.scss b/app/assets/stylesheets/pages/milestone.scss
index c473cc44637..e9eb79b071c 100644
--- a/app/assets/stylesheets/pages/milestone.scss
+++ b/app/assets/stylesheets/pages/milestone.scss
@@ -178,7 +178,6 @@ $status-box-line-height: 26px;
 
 .milestone-detail {
   border-bottom: 1px solid $border-color;
-  padding: 20px 0;
 }
 
 @include media-breakpoint-down(xs) {
diff --git a/app/assets/stylesheets/pages/note_form.scss b/app/assets/stylesheets/pages/note_form.scss
index 35a15214f68..8b3d3268a8c 100644
--- a/app/assets/stylesheets/pages/note_form.scss
+++ b/app/assets/stylesheets/pages/note_form.scss
@@ -97,7 +97,7 @@
 
 .issuable-note-warning {
   color: $orange-600;
-  background-color: $orange-100;
+  background-color: $orange-50;
   border-radius: $border-radius-default $border-radius-default 0 0;
   border: 1px solid $border-gray-normal;
   border-bottom: 0;
diff --git a/app/assets/stylesheets/pages/notes.scss b/app/assets/stylesheets/pages/notes.scss
index e4e54501627..c144fb13322 100644
--- a/app/assets/stylesheets/pages/notes.scss
+++ b/app/assets/stylesheets/pages/notes.scss
@@ -186,8 +186,8 @@ $note-form-margin-left: 72px;
       padding: $gl-padding;
 
       .dummy-avatar {
-        background-color: $gl-gray-100;
-        border: 1px solid darken($gl-gray-100, 25%);
+        background-color: $gray-100;
+        border: 1px solid darken($gray-100, 25%);
       }
 
       .note-headline-light,
@@ -835,7 +835,7 @@ $note-form-margin-left: 72px;
   &[disabled] {
     background: $white;
     border-color: $gray-200;
-    color: $gl-gray-400;
+    color: $gray-300;
     cursor: not-allowed;
   }
 }
diff --git a/app/assets/stylesheets/pages/packages.scss b/app/assets/stylesheets/pages/packages.scss
deleted file mode 100644
index 8f6eee524e5..00000000000
--- a/app/assets/stylesheets/pages/packages.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-.commit-row-description {
-  border: 0;
-  border-left: 3px solid $white-dark;
-}
-
-.package-list-table[aria-busy='true'] {
-  td {
-    padding-bottom: 0;
-    padding-top: 0;
-  }
-}
diff --git a/app/assets/stylesheets/pages/pipelines.scss b/app/assets/stylesheets/pages/pipelines.scss
index fc3b786b365..8b104ce9017 100644
--- a/app/assets/stylesheets/pages/pipelines.scss
+++ b/app/assets/stylesheets/pages/pipelines.scss
@@ -193,7 +193,6 @@
 
   .icon-container {
     display: inline-block;
-    width: 10px;
 
     &.commit-icon {
       width: 15px;
@@ -782,7 +781,7 @@
   &.ci-status-icon-pending,
   &.ci-status-icon-waiting-for-resource,
   &.ci-status-icon-success-with-warnings {
-    @include mini-pipeline-graph-color($white, $orange-100, $orange-200, $orange-500, $orange-600, $orange-700);
+    @include mini-pipeline-graph-color($white, $orange-50, $orange-100, $orange-500, $orange-600, $orange-700);
   }
 
   &.ci-status-icon-preparing,
@@ -1082,3 +1081,19 @@ button.mini-pipeline-graph-dropdown-toggle {
 .progress-bar.bg-primary {
   background-color: $blue-500 !important;
 }
+
+.pipeline-stage-pill {
+  width: 10rem;
+}
+
+.pipeline-job-pill {
+  width: 8rem;
+}
+
+.stage-left-rounded {
+  border-radius: 2rem 0 0 2rem;
+}
+
+.stage-right-rounded {
+  border-radius: 0 2rem 2rem 0;
+}
diff --git a/app/assets/stylesheets/pages/profile.scss b/app/assets/stylesheets/pages/profile.scss
index 85836962b06..4dc1f2034f3 100644
--- a/app/assets/stylesheets/pages/profile.scss
+++ b/app/assets/stylesheets/pages/profile.scss
@@ -257,7 +257,8 @@
   }
 }
 
-table.u2f-registrations {
+table.u2f-registrations,
+.webauthn-registrations {
   th:not(:last-child),
   td:not(:last-child) {
     border-right: solid 1px transparent;
diff --git a/app/assets/stylesheets/pages/projects.scss b/app/assets/stylesheets/pages/projects.scss
index d4d6583312c..a2f8447c0b6 100644
--- a/app/assets/stylesheets/pages/projects.scss
+++ b/app/assets/stylesheets/pages/projects.scss
@@ -353,7 +353,7 @@
 .save-project-loader {
   margin-top: 50px;
   margin-bottom: 50px;
-  color: $gl-gray-700;
+  color: $gray-700;
 }
 
 .transfer-project .select2-container {
@@ -429,7 +429,7 @@
 
   > li + li::before {
     padding: 0 3px;
-    color: $gl-gray-400;
+    color: $gray-300;
   }
 
   a {
@@ -1268,18 +1268,10 @@ pre.light-well {
   position: relative;
 
   .clear-icon {
-    @extend .fa-times;
     display: none;
     position: absolute;
-    right: 7px;
-    top: 7px;
-    color: $location-icon-color;
-
-    &::before {
-      font-family: FontAwesome;
-      font-weight: $gl-font-weight-normal;
-      font-style: normal;
-    }
+    right: 9px;
+    top: 9px;
   }
 
   &.has-value {
@@ -1444,7 +1436,7 @@ pre.light-well {
 
 .project-filters {
   .btn svg {
-    color: $gl-gray-700;
+    color: $gray-700;
   }
 
   .button-filter-group {
diff --git a/app/assets/stylesheets/pages/search.scss b/app/assets/stylesheets/pages/search.scss
index 1fc6ad62237..4b8e1da4867 100644
--- a/app/assets/stylesheets/pages/search.scss
+++ b/app/assets/stylesheets/pages/search.scss
@@ -105,7 +105,7 @@ input[type='checkbox']:hover {
     }
 
     .dropdown-header {
-      // Necessary because glDropdown doesn't support a second style of headers
+      // Necessary because deprecatedJQueryDropdown doesn't support a second style of headers
       font-weight: $gl-font-weight-bold;
       color: $gl-text-color;
       font-size: $gl-font-size;
diff --git a/app/assets/stylesheets/pages/settings.scss b/app/assets/stylesheets/pages/settings.scss
index b82c638a5b7..7b18e3774d8 100644
--- a/app/assets/stylesheets/pages/settings.scss
+++ b/app/assets/stylesheets/pages/settings.scss
@@ -124,8 +124,8 @@
 .settings-message {
   padding: 5px;
   line-height: 1.3;
-  color: $orange-700;
-  background-color: $orange-100;
+  color: $gray-900;
+  background-color: $orange-50;
   border: 1px solid $orange-200;
   border-radius: $border-radius-base;
 }
@@ -135,7 +135,7 @@
 }
 
 .warning-title {
-  color: $orange-500;
+  color: $gray-900;
 }
 
 .danger-title {
@@ -301,7 +301,7 @@
   }
 
   .loading-metrics .metrics-load-spinner {
-    color: $gl-gray-700;
+    color: $gray-700;
   }
 
   .metrics-list {
@@ -384,6 +384,13 @@
         font-weight: $gl-font-weight-bold;
         border: 0;
       }
+
+      // When tables are "stacked", restore td padding
+      @media(max-width: map-get($grid-breakpoints, lg)) {
+        td {
+          padding-left: $gl-spacing-scale-5;
+        }
+      }
     }
   }
 
diff --git a/app/assets/stylesheets/pages/status.scss b/app/assets/stylesheets/pages/status.scss
index 4ad2dcbe92f..b37c5172ad2 100644
--- a/app/assets/stylesheets/pages/status.scss
+++ b/app/assets/stylesheets/pages/status.scss
@@ -43,7 +43,7 @@
   &.ci-waiting-for-resource,
   &.ci-failed-with-warnings,
   &.ci-success-with-warnings {
-    @include status-color($orange-100, $orange-500, $orange-700);
+    @include status-color($orange-50, $orange-500, $orange-700);
   }
 
   &.ci-info,
diff --git a/app/assets/stylesheets/pages/tree.scss b/app/assets/stylesheets/pages/tree.scss
index b6af395a802..73fe76f139f 100644
--- a/app/assets/stylesheets/pages/tree.scss
+++ b/app/assets/stylesheets/pages/tree.scss
@@ -173,7 +173,7 @@
 
   .tree-truncated-warning {
     color: $orange-600;
-    background-color: $orange-100;
+    background-color: $orange-50;
   }
 
   .tree-time-ago {
diff --git a/app/assets/stylesheets/pages/ui_dev_kit.scss b/app/assets/stylesheets/pages/ui_dev_kit.scss
index 7744fd814d0..288da4da5c3 100644
--- a/app/assets/stylesheets/pages/ui_dev_kit.scss
+++ b/app/assets/stylesheets/pages/ui_dev_kit.scss
@@ -6,7 +6,7 @@
 
   .example {
     padding: 15px;
-    border: 1px dashed $gl-gray-100;
+    border: 1px dashed $gray-100;
     margin-bottom: 15px;
 
     &::before {
diff --git a/app/assets/stylesheets/pages/wiki.scss b/app/assets/stylesheets/pages/wiki.scss
index 8c4bfdf68cc..ccf11058b5b 100644
--- a/app/assets/stylesheets/pages/wiki.scss
+++ b/app/assets/stylesheets/pages/wiki.scss
@@ -151,3 +151,7 @@ ul.wiki-pages-list.content-list {
 .empty-state-wiki .text-content {
   max-width: 490px; // Widen to allow for the Confluence button
 }
+
+.wiki-form .markdown-area {
+  max-height: none;
+}
diff --git a/app/assets/stylesheets/performance_bar.scss b/app/assets/stylesheets/performance_bar.scss
index daeab80d373..dc127cd2554 100644
--- a/app/assets/stylesheets/performance_bar.scss
+++ b/app/assets/stylesheets/performance_bar.scss
@@ -11,15 +11,15 @@
   height: $performance-bar-height;
   background: $black;
   line-height: $performance-bar-height;
-  color: $gl-gray-400;
+  color: $gray-300;
 
   select {
-    color: $gl-gray-400;
+    color: $gray-300;
     width: 200px;
   }
 
   input {
-    color: $gl-gray-400;
+    color: $gray-300;
     width: $input-short-width - 60px;
   }
 
@@ -61,7 +61,7 @@
     padding: 4px 6px;
     font-family: Consolas, 'Liberation Mono', Courier, monospace;
     line-height: 1;
-    color: $gl-gray-100;
+    color: $gray-100;
     border-radius: 3px;
     box-shadow: 0 1px 0 $perf-bar-bucket-box-shadow-from,
       inset 0 1px 2px $perf-bar-bucket-box-shadow-to;
diff --git a/app/assets/stylesheets/startup/startup-dark.scss b/app/assets/stylesheets/startup/startup-dark.scss
new file mode 100644
index 00000000000..d875f758ead
--- /dev/null
+++ b/app/assets/stylesheets/startup/startup-dark.scss
@@ -0,0 +1,1912 @@
+@charset "UTF-8";
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+html {
+  font-family: sans-serif;
+  line-height: 1.15;
+}
+ header, nav, section {
+  display: block;
+}
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", Ubuntu, Cantarell, "Helvetica Neue", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  font-size: 1rem;
+  font-weight: 400;
+  line-height: 1.5;
+  color: #fafafa;
+  text-align: left;
+  background-color: #2e2e2e;
+}
+h1, h2, h3 {
+  margin-top: 0;
+  margin-bottom: 0.25rem;
+}
+p {
+  margin-top: 0;
+  margin-bottom: 1rem;
+}
+
+ul {
+  margin-top: 0;
+  margin-bottom: 1rem;
+}
+
+ul ul {
+  margin-bottom: 0;
+}
+
+strong {
+  font-weight: bolder;
+}
+sub {
+  position: relative;
+  font-size: 75%;
+  line-height: 0;
+  vertical-align: baseline;
+}
+sub {
+  bottom: -.25em;
+}
+a {
+  color: #007bff;
+  text-decoration: none;
+  background-color: transparent;
+}
+a:not([href]) {
+  color: inherit;
+  text-decoration: none;
+}
+pre,
+code {
+  font-family: "Menlo", "DejaVu Sans Mono", "Liberation Mono", "Consolas", "Ubuntu Mono", "Courier New", "andale mono", "lucida console", monospace;
+  font-size: 1em;
+}
+pre {
+  margin-top: 0;
+  margin-bottom: 1rem;
+  overflow: auto;
+}
+img {
+  vertical-align: middle;
+  border-style: none;
+}
+svg {
+  overflow: hidden;
+  vertical-align: middle;
+}
+table {
+  border-collapse: collapse;
+}
+th {
+  text-align: inherit;
+}
+button {
+  border-radius: 0;
+}
+input,
+button,
+textarea {
+  margin: 0;
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+}
+button,
+input {
+  overflow: visible;
+}
+button {
+  text-transform: none;
+}
+button:not(:disabled),
+[type="button"]:not(:disabled),
+[type="reset"]:not(:disabled) {
+  cursor: pointer;
+}
+button::-moz-focus-inner,
+[type="button"]::-moz-focus-inner,
+[type="reset"]::-moz-focus-inner {
+  padding: 0;
+  border-style: none;
+}
+textarea {
+  overflow: auto;
+  resize: vertical;
+}
+[type="search"] {
+  outline-offset: -2px;
+}
+summary {
+  display: list-item;
+  cursor: pointer;
+}
+template {
+  display: none;
+}
+[hidden] {
+  display: none !important;
+}
+h1, h2, h3,
+.h1, .h2, .h3 {
+  margin-bottom: 0.25rem;
+  font-weight: 600;
+  line-height: 1.2;
+  color: #fafafa;
+}
+h1, .h1 {
+  font-size: 2.1875rem;
+}
+h2, .h2 {
+  font-size: 1.75rem;
+}
+h3, .h3 {
+  font-size: 1.53125rem;
+}
+.list-unstyled {
+  padding-left: 0;
+  list-style: none;
+}
+code {
+  font-size: 90%;
+  color: #fff;
+  word-wrap: break-word;
+}
+a > code {
+  color: inherit;
+}
+pre {
+  display: block;
+  font-size: 90%;
+  color: #fafafa;
+}
+pre code {
+  font-size: inherit;
+  color: inherit;
+  word-break: normal;
+}
+.container {
+  width: 100%;
+  padding-right: 15px;
+  padding-left: 15px;
+  margin-right: auto;
+  margin-left: auto;
+}
+
+@media (min-width: 576px) {
+  .container {
+    max-width: 540px;
+  }
+}
+
+@media (min-width: 768px) {
+  .container {
+    max-width: 720px;
+  }
+}
+
+@media (min-width: 992px) {
+  .container {
+    max-width: 960px;
+  }
+}
+
+@media (min-width: 1200px) {
+  .container {
+    max-width: 1140px;
+  }
+}
+.container-fluid {
+  width: 100%;
+  padding-right: 15px;
+  padding-left: 15px;
+  margin-right: auto;
+  margin-left: auto;
+}
+
+@media (min-width: 576px) {
+  .container {
+    max-width: 540px;
+  }
+}
+
+@media (min-width: 768px) {
+  .container {
+    max-width: 720px;
+  }
+}
+
+@media (min-width: 992px) {
+  .container {
+    max-width: 960px;
+  }
+}
+
+@media (min-width: 1200px) {
+  .container {
+    max-width: 1140px;
+  }
+}
+.row {
+  display: flex;
+  flex-wrap: wrap;
+  margin-right: -15px;
+  margin-left: -15px;
+}
+.table {
+  width: 100%;
+  margin-bottom: 0.5rem;
+  color: #fafafa;
+}
+.table th,
+.table td {
+  padding: 0.75rem;
+  vertical-align: top;
+  border-top: 1px solid #4f4f4f;
+}
+ .search form {
+  display: block;
+  width: 100%;
+  height: 34px;
+  padding: 0.375rem 0.75rem;
+  font-size: 0.875rem;
+  font-weight: 400;
+  line-height: 1.5;
+  color: #fafafa;
+  background-color: #4f4f4f;
+  background-clip: padding-box;
+  border: 1px solid #4f4f4f;
+  border-radius: 0.25rem;
+}
+
+@media (prefers-reduced-motion: reduce) {
+}
+ .search form:-moz-focusring {
+  color: transparent;
+  text-shadow: 0 0 0 #fafafa;
+}
+ .search form::placeholder {
+  color: #ccc;
+  opacity: 1;
+}
+ .search form:disabled {
+  background-color: #2e2e2e;
+  opacity: 1;
+}
+.form-inline {
+  display: flex;
+  flex-flow: row wrap;
+  align-items: center;
+}
+
+@media (min-width: 576px) {
+   .form-inline .search form, .search .form-inline form {
+    display: inline-block;
+    width: auto;
+    vertical-align: middle;
+  }
+}
+.btn {
+  display: inline-block;
+  font-weight: 400;
+  color: #fafafa;
+  text-align: center;
+  vertical-align: middle;
+  cursor: pointer;
+  user-select: none;
+  background-color: transparent;
+  border: 1px solid transparent;
+  padding: 0.375rem 0.75rem;
+  font-size: 1rem;
+  line-height: 20px;
+  border-radius: 0.25rem;
+}
+
+@media (prefers-reduced-motion: reduce) {
+}
+.btn.disabled, .btn:disabled {
+  opacity: 0.65;
+}
+a.btn.disabled {
+  pointer-events: none;
+}
+.collapse:not(.show) {
+  display: none;
+}
+
+.dropdown {
+  position: relative;
+}
+ .dropdown-menu-toggle {
+  white-space: nowrap;
+}
+ .dropdown-menu-toggle::after {
+  display: inline-block;
+  margin-left: 0.255em;
+  vertical-align: 0.255em;
+  content: "";
+  border-top: 0.3em solid;
+  border-right: 0.3em solid transparent;
+  border-bottom: 0;
+  border-left: 0.3em solid transparent;
+}
+ .dropdown-menu-toggle:empty::after {
+  margin-left: 0;
+}
+.dropdown-menu {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  z-index: 1000;
+  display: none;
+  float: left;
+  min-width: 10rem;
+  padding: 0.5rem 0;
+  margin: 0.125rem 0 0;
+  font-size: 1rem;
+  color: #fafafa;
+  text-align: left;
+  list-style: none;
+  background-color: #333;
+  background-clip: padding-box;
+  border: 1px solid rgba(255, 255, 255, 0.15);
+  border-radius: 0.25rem;
+}
+.dropdown-menu-right {
+  right: 0;
+  left: auto;
+}
+ .divider {
+  height: 0;
+  margin: 4px 0;
+  overflow: hidden;
+  border-top: 1px solid #4f4f4f;
+}
+.dropdown-menu.show {
+  display: block;
+}
+.nav {
+  display: flex;
+  flex-wrap: wrap;
+  padding-left: 0;
+  margin-bottom: 0;
+  list-style: none;
+}
+.navbar {
+  position: relative;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.25rem 0.5rem;
+}
+.navbar .container,
+.navbar .container-fluid {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+}
+.navbar-nav {
+  display: flex;
+  flex-direction: column;
+  padding-left: 0;
+  margin-bottom: 0;
+  list-style: none;
+}
+.navbar-nav .dropdown-menu {
+  position: static;
+  float: none;
+}
+.navbar-collapse {
+  flex-basis: 100%;
+  flex-grow: 1;
+  align-items: center;
+}
+.navbar-toggler {
+  padding: 0.25rem 0.75rem;
+  font-size: 1.25rem;
+  line-height: 1;
+  background-color: transparent;
+  border: 1px solid transparent;
+  border-radius: 0.25rem;
+}
+
+@media (max-width: 575.98px) {
+  .navbar-expand-sm > .container,
+  .navbar-expand-sm > .container-fluid {
+    padding-right: 0;
+    padding-left: 0;
+  }
+}
+
+@media (min-width: 576px) {
+  .navbar-expand-sm {
+    flex-flow: row nowrap;
+    justify-content: flex-start;
+  }
+  .navbar-expand-sm .navbar-nav {
+    flex-direction: row;
+  }
+  .navbar-expand-sm .navbar-nav .dropdown-menu {
+    position: absolute;
+  }
+  .navbar-expand-sm > .container,
+  .navbar-expand-sm > .container-fluid {
+    flex-wrap: nowrap;
+  }
+  .navbar-expand-sm .navbar-collapse {
+    display: flex !important;
+    flex-basis: auto;
+  }
+  .navbar-expand-sm .navbar-toggler {
+    display: none;
+  }
+}
+.card {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  word-wrap: break-word;
+  background-color: #333;
+  background-clip: border-box;
+  border: 1px solid #4f4f4f;
+  border-radius: 0.25rem;
+}
+.badge {
+  display: inline-block;
+  padding: 0.25em 0.4em;
+  font-size: 75%;
+  font-weight: 600;
+  line-height: 1;
+  text-align: center;
+  white-space: nowrap;
+  vertical-align: baseline;
+  border-radius: 0.25rem;
+}
+
+@media (prefers-reduced-motion: reduce) {
+}
+.badge:empty {
+  display: none;
+}
+.btn .badge {
+  position: relative;
+  top: -1px;
+}
+.badge-pill {
+  padding-right: 0.6em;
+  padding-left: 0.6em;
+  border-radius: 10rem;
+}
+.media {
+  display: flex;
+  align-items: flex-start;
+}
+.close {
+  float: right;
+  font-size: 1.5rem;
+  font-weight: 600;
+  line-height: 1;
+  color: #fff;
+  text-shadow: 0 1px 0 #333;
+  opacity: .5;
+}
+button.close {
+  padding: 0;
+  background-color: transparent;
+  border: 0;
+  appearance: none;
+}
+a.close.disabled {
+  pointer-events: none;
+}
+.modal-dialog {
+  position: relative;
+  width: auto;
+  margin: 0.5rem;
+  pointer-events: none;
+}
+
+@media (min-width: 576px) {
+  .modal-dialog {
+    max-width: 500px;
+    margin: 1.75rem auto;
+  }
+}
+.bg-transparent {
+  background-color: transparent !important;
+}
+.border {
+  border: 1px solid #4f4f4f !important;
+}
+.border-top {
+  border-top: 1px solid #4f4f4f !important;
+}
+.border-right {
+  border-right: 1px solid #4f4f4f !important;
+}
+.border-bottom {
+  border-bottom: 1px solid #4f4f4f !important;
+}
+.border-left {
+  border-left: 1px solid #4f4f4f !important;
+}
+.rounded {
+  border-radius: 0.25rem !important;
+}
+.clearfix::after {
+  display: block;
+  clear: both;
+  content: "";
+}
+.d-none {
+  display: none !important;
+}
+.d-inline-block {
+  display: inline-block !important;
+}
+.d-block {
+  display: block !important;
+}
+
+@media (min-width: 576px) {
+  .d-sm-none {
+    display: none !important;
+  }
+}
+
+@media (min-width: 768px) {
+  .d-md-block {
+    display: block !important;
+  }
+}
+
+@media (min-width: 992px) {
+  .d-lg-none {
+    display: none !important;
+  }
+  .d-lg-block {
+    display: block !important;
+  }
+}
+
+@media (min-width: 1200px) {
+  .d-xl-block {
+    display: block !important;
+  }
+}
+.flex-wrap {
+  flex-wrap: wrap !important;
+}
+.float-right {
+  float: right !important;
+}
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+.m-auto {
+  margin: auto !important;
+}
+.text-nowrap {
+  white-space: nowrap !important;
+}
+.visible {
+  visibility: visible !important;
+}
+ .search form.focus {
+  color: #fafafa;
+  background-color: #4f4f4f;
+  border-color: #80bdff;
+  outline: 0;
+  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
+}
+.gl-badge {
+  display: inline-flex;
+  align-items: center;
+  font-size: 0.75rem;
+  font-weight: 400;
+  line-height: 1rem;
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+  outline: none;
+}
+body, .search form,
+.search form {
+  font-size: 0.875rem;
+}
+button,
+html [type='button'],
+[type='reset'],
+[role='button'] {
+  cursor: pointer;
+}
+h1,
+.h1,
+h2,
+.h2,
+h3,
+.h3 {
+  margin-top: 20px;
+  margin-bottom: 10px;
+}
+input[type='file'] {
+  line-height: 1;
+}
+
+strong {
+  font-weight: bold;
+}
+a {
+  color: #418cd8;
+}
+code {
+  padding: 2px 4px;
+  color: #fff;
+  background-color: #2e2e2e;
+  border-radius: 4px;
+}
+.code > code {
+  background-color: inherit;
+  padding: unset;
+}
+table {
+  border-spacing: 0;
+}
+.hidden {
+  display: none !important;
+  visibility: hidden !important;
+}
+.hide {
+  display: none;
+}
+ .dropdown-menu-toggle::after {
+  display: none;
+}
+.badge:not(.gl-badge) {
+  padding: 4px 5px;
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 400;
+  display: inline-block;
+}
+pre code {
+  white-space: pre-wrap;
+}
+.toggle-sidebar-button .collapse-text,
+.toggle-sidebar-button .icon-chevron-double-lg-left,
+.toggle-sidebar-button .icon-chevron-double-lg-right {
+  color: #bababa;
+}
+svg {
+  vertical-align: baseline;
+}
+html {
+  overflow-y: scroll;
+}
+body {
+  text-decoration-skip: ink;
+}
+.content-wrapper {
+  margin-top: 40px;
+  padding-bottom: 100px;
+}
+.container {
+  padding-top: 0;
+  z-index: 5;
+}
+.container .content {
+  margin: 0;
+}
+
+@media (max-width: 575.98px) {
+  .container .content {
+    margin-top: 20px;
+  }
+}
+
+@media (max-width: 575.98px) {
+  .container .container .title {
+    padding-left: 15px !important;
+  }
+}
+.btn {
+  border-radius: 4px;
+  font-size: 0.875rem;
+  font-weight: 400;
+  padding: 6px 10px;
+  background-color: #333;
+  border-color: #4f4f4f;
+  color: #fafafa;
+  color: #fafafa;
+  white-space: nowrap;
+}
+.btn:active, .btn.active {
+  box-shadow: rgba(0, 0, 0, 0.16);
+  background-color: #444;
+  border-color: #fafafa;
+  color: #fafafa;
+}
+.btn svg {
+  height: 15px;
+  width: 15px;
+}
+.btn svg:not(:last-child),
+.btn .fa:not(:last-child) {
+  margin-right: 5px;
+}
+.badge.badge-pill:not(.gl-badge) {
+  font-weight: 400;
+  background-color: rgba(0, 0, 0, 0.07);
+  color: #dfdfdf;
+  vertical-align: baseline;
+}
+.hint {
+  font-style: italic;
+  color: #707070;
+}
+.bold {
+  font-weight: 600;
+}
+pre.wrap {
+  word-break: break-word;
+  white-space: pre-wrap;
+}
+table a code {
+  position: relative;
+  top: -2px;
+  margin-right: 3px;
+}
+.loading {
+  margin: 20px auto;
+  height: 40px;
+  color: #dfdfdf;
+  font-size: 32px;
+  text-align: center;
+}
+.highlight {
+  text-shadow: none;
+}
+.chart {
+  overflow: hidden;
+  height: 220px;
+}
+.break-word {
+  word-wrap: break-word;
+}
+.center {
+  text-align: center;
+}
+.block {
+  display: block;
+}
+.flex {
+  display: flex;
+}
+.flex-grow {
+  flex-grow: 1;
+}
+.dropdown {
+  position: relative;
+}
+.show.dropdown .dropdown-menu {
+  transform: translateY(0);
+  display: block;
+  min-height: 40px;
+  max-height: 312px;
+  overflow-y: auto;
+}
+
+@media (max-width: 575.98px) {
+  .show.dropdown .dropdown-menu {
+    width: 100%;
+  }
+}
+ .show.dropdown .dropdown-menu-toggle,
+.show.dropdown .dropdown-menu-toggle {
+  border-color: #c4c4c4;
+}
+.show.dropdown [data-toggle='dropdown'] {
+  outline: 0;
+}
+.search-input-container .dropdown-menu {
+  margin-top: 11px;
+}
+ .dropdown-menu-toggle {
+  padding: 6px 8px 6px 10px;
+  background-color: #333;
+  color: #fafafa;
+  font-size: 14px;
+  text-align: left;
+  border: 1px solid #4f4f4f;
+  border-radius: 0.25rem;
+  white-space: nowrap;
+}
+ .no-outline.dropdown-menu-toggle {
+  outline: 0;
+}
+ .dropdown-menu-toggle .fa {
+  color: #c4c4c4;
+}
+.dropdown-menu-toggle {
+  padding-right: 25px;
+  position: relative;
+  width: 160px;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+.dropdown-menu-toggle .fa {
+  position: absolute;
+}
+.dropdown-menu {
+  display: none;
+  position: absolute;
+  width: auto;
+  top: 100%;
+  z-index: 300;
+  min-width: 240px;
+  max-width: 500px;
+  margin-top: 4px;
+  margin-bottom: 24px;
+  font-size: 14px;
+  font-weight: 400;
+  padding: 8px 0;
+  background-color: #333;
+  border: 1px solid #4f4f4f;
+  border-radius: 0.25rem;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+.dropdown-menu ul {
+  margin: 0;
+  padding: 0;
+}
+.dropdown-menu li {
+  display: block;
+  text-align: left;
+  list-style: none;
+  padding: 0 1px;
+}
+.dropdown-menu li > a,
+.dropdown-menu li button {
+  background: transparent;
+  border: 0;
+  border-radius: 0;
+  box-shadow: none;
+  display: block;
+  font-weight: 400;
+  position: relative;
+  padding: 8px 12px;
+  color: #fafafa;
+  line-height: 16px;
+  white-space: normal;
+  overflow: hidden;
+  text-align: left;
+  width: 100%;
+}
+.dropdown-menu .divider {
+  height: 1px;
+  margin: 0.25rem 0;
+  padding: 0;
+  background-color: #4f4f4f;
+}
+.dropdown-menu .badge.badge-pill + span:not(.badge.badge-pill) {
+  margin-right: 40px;
+}
+.dropdown-select {
+  width: 300px;
+}
+
+@media (max-width: 767.98px) {
+  .dropdown-select {
+    width: 100%;
+  }
+}
+.dropdown-content {
+  max-height: 252px;
+  overflow-y: auto;
+}
+.dropdown-loading {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  display: none;
+  z-index: 9;
+  background-color: rgba(51, 51, 51, 0.6);
+  font-size: 28px;
+}
+.dropdown-loading .fa {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  margin-top: -14px;
+  margin-left: -14px;
+}
+
+@media (max-width: 575.98px) {
+  .navbar-gitlab li.dropdown {
+    position: static;
+  }
+  header.navbar-gitlab .dropdown .dropdown-menu {
+    width: 100%;
+    min-width: 100%;
+  }
+}
+
+@media (max-width: 767.98px) {
+  .dropdown-menu-toggle {
+    width: 100%;
+  }
+}
+textarea {
+  resize: vertical;
+}
+input {
+  border-radius: 0.25rem;
+  color: #fafafa;
+  background-color: #4f4f4f;
+}
+ .search form {
+  border-radius: 4px;
+  padding: 6px 10px;
+}
+ .search form::placeholder {
+  color: #a7a7a7;
+}
+body.ui-indigo .navbar-gitlab {
+  background-color: #292961;
+}
+body.ui-indigo .navbar-gitlab .navbar-collapse {
+  color: #d1d1f0;
+}
+body.ui-indigo .navbar-gitlab .container-fluid .navbar-toggler {
+  border-left: 1px solid #6868b9;
+}
+body.ui-indigo .navbar-gitlab .container-fluid .navbar-toggler svg {
+  fill: #d1d1f0;
+}
+body.ui-indigo .navbar-gitlab .navbar-sub-nav > li.active > a,
+body.ui-indigo .navbar-gitlab .navbar-sub-nav > li.active > button, body.ui-indigo .navbar-gitlab .navbar-sub-nav > li.dropdown.show > a,
+body.ui-indigo .navbar-gitlab .navbar-sub-nav > li.dropdown.show > button,
+body.ui-indigo .navbar-gitlab .navbar-nav > li.active > a,
+body.ui-indigo .navbar-gitlab .navbar-nav > li.active > button,
+body.ui-indigo .navbar-gitlab .navbar-nav > li.dropdown.show > a,
+body.ui-indigo .navbar-gitlab .navbar-nav > li.dropdown.show > button {
+  color: #292961;
+  background-color: #333;
+}
+body.ui-indigo .navbar-gitlab .navbar-sub-nav {
+  color: #d1d1f0;
+}
+body.ui-indigo .navbar-gitlab .nav > li {
+  color: #d1d1f0;
+}
+body.ui-indigo .navbar-gitlab .nav > li > a.header-user-dropdown-toggle .header-user-avatar {
+  border-color: #d1d1f0;
+}
+body.ui-indigo .navbar-gitlab .nav > li.active > a,
+body.ui-indigo .navbar-gitlab .nav > li.dropdown.show > a {
+  color: #292961;
+  background-color: #333;
+}
+body.ui-indigo .search form {
+  background-color: rgba(209, 209, 240, 0.2);
+}
+body.ui-indigo .search .search-input::placeholder {
+  color: rgba(209, 209, 240, 0.8);
+}
+body.ui-indigo .search .search-input-wrap .search-icon,
+body.ui-indigo .search .search-input-wrap .clear-icon {
+  fill: rgba(209, 209, 240, 0.8);
+}
+body.ui-indigo .nav-sidebar li.active {
+  box-shadow: inset 4px 0 0 #4b4ba3;
+}
+body.ui-indigo .nav-sidebar li.active > a {
+  color: #393982;
+}
+body.ui-indigo .nav-sidebar li.active .nav-icon-container svg {
+  fill: #393982;
+}
+body.ui-indigo .sidebar-top-level-items > li.active .badge.badge-pill {
+  color: #393982;
+}
+body.gl-dark .logo-text svg {
+  fill: #fafafa;
+}
+body.gl-dark .navbar-gitlab {
+  background-color: #2e2e2e;
+}
+body.gl-dark .navbar-gitlab .navbar-sub-nav li.active > a,
+body.gl-dark .navbar-gitlab .navbar-sub-nav li.active > button,
+body.gl-dark .navbar-gitlab .navbar-sub-nav li.dropdown.show > a,
+body.gl-dark .navbar-gitlab .navbar-sub-nav li.dropdown.show > button,
+body.gl-dark .navbar-gitlab .navbar-nav li.active > a,
+body.gl-dark .navbar-gitlab .navbar-nav li.active > button,
+body.gl-dark .navbar-gitlab .navbar-nav li.dropdown.show > a,
+body.gl-dark .navbar-gitlab .navbar-nav li.dropdown.show > button {
+  color: #fafafa;
+  background-color: #707070;
+}
+body.gl-dark .navbar-gitlab .search form {
+  background-color: #4f4f4f;
+  box-shadow: inset 0 0 0 1px #4f4f4f;
+}
+.navbar-gitlab {
+  padding: 0 16px;
+  z-index: 1000;
+  margin-bottom: 0;
+  min-height: 40px;
+  border: 0;
+  border-bottom: 1px solid #4f4f4f;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  border-radius: 0;
+}
+.navbar-gitlab .logo-text {
+  line-height: initial;
+}
+.navbar-gitlab .logo-text svg {
+  width: 55px;
+  height: 14px;
+  margin: 0;
+  fill: #333;
+}
+.navbar-gitlab .close-icon {
+  display: none;
+}
+.navbar-gitlab .header-content {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  position: relative;
+  min-height: 40px;
+  padding-left: 0;
+}
+.navbar-gitlab .header-content .title-container {
+  display: flex;
+  align-items: stretch;
+  flex: 1 1 auto;
+  padding-top: 0;
+  overflow: visible;
+}
+.navbar-gitlab .header-content .title {
+  padding-right: 0;
+  color: currentColor;
+  display: flex;
+  position: relative;
+  margin: 0;
+  font-size: 18px;
+  vertical-align: top;
+  white-space: nowrap;
+}
+.navbar-gitlab .header-content .title img {
+  height: 28px;
+}
+.navbar-gitlab .header-content .title img + .logo-text {
+  margin-left: 8px;
+}
+.navbar-gitlab .header-content .title.wrap {
+  white-space: normal;
+}
+.navbar-gitlab .header-content .title a {
+  display: flex;
+  align-items: center;
+  padding: 2px 8px;
+  margin: 5px 2px 5px -8px;
+  border-radius: 4px;
+}
+.navbar-gitlab .header-content .dropdown.open > a {
+  border-bottom-color: #333;
+}
+.navbar-gitlab .header-content .navbar-collapse > ul.nav > li:not(.d-none) {
+  margin: 0 2px;
+}
+.navbar-gitlab .navbar-collapse {
+  flex: 0 0 auto;
+  border-top: 0;
+  padding: 0;
+}
+
+@media (max-width: 575.98px) {
+  .navbar-gitlab .navbar-collapse {
+    flex: 1 1 auto;
+  }
+}
+.navbar-gitlab .navbar-collapse .nav {
+  flex-wrap: nowrap;
+}
+
+@media (max-width: 575.98px) {
+  .navbar-gitlab .navbar-collapse .nav > li:not(.d-none) a {
+    margin-left: 0;
+  }
+}
+.navbar-gitlab .container-fluid {
+  padding: 0;
+}
+.navbar-gitlab .container-fluid .user-counter svg {
+  margin-right: 3px;
+}
+.navbar-gitlab .container-fluid .navbar-toggler {
+  position: relative;
+  right: -10px;
+  border-radius: 0;
+  min-width: 45px;
+  padding: 0;
+  margin: 8px -7px 8px 0;
+  font-size: 14px;
+  text-align: center;
+  color: currentColor;
+}
+
+@media (max-width: 575.98px) {
+  .navbar-gitlab .container-fluid .navbar-nav {
+    display: flex;
+    padding-right: 10px;
+    flex-direction: row;
+  }
+}
+.navbar-gitlab .container-fluid .navbar-nav li .badge.badge-pill {
+  box-shadow: none;
+  font-weight: 600;
+}
+
+@media (max-width: 575.98px) {
+  .navbar-gitlab .container-fluid .nav > li.header-user {
+    padding-left: 10px;
+  }
+}
+.navbar-gitlab .container-fluid .nav > li > a {
+  will-change: color;
+  margin: 4px 0;
+  padding: 6px 8px;
+  height: 32px;
+}
+
+@media (max-width: 575.98px) {
+  .navbar-gitlab .container-fluid .nav > li > a {
+    padding: 0;
+  }
+}
+.navbar-gitlab .container-fluid .nav > li > a.header-user-dropdown-toggle {
+  margin-left: 2px;
+}
+.navbar-gitlab .container-fluid .nav > li > a.header-user-dropdown-toggle .header-user-avatar {
+  margin-right: 0;
+}
+.navbar-gitlab .container-fluid .nav > li .header-new-dropdown-toggle {
+  margin-right: 0;
+}
+.navbar-sub-nav > li > a,
+.navbar-sub-nav > li > button,
+.navbar-nav > li > a,
+.navbar-nav > li > button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 6px 8px;
+  margin: 4px 2px;
+  font-size: 12px;
+  color: currentColor;
+  border-radius: 4px;
+  height: 32px;
+  font-weight: 600;
+}
+.navbar-sub-nav > li > button,
+.navbar-nav > li > button {
+  background: transparent;
+  border: 0;
+}
+.navbar-sub-nav .dropdown-menu,
+.navbar-nav .dropdown-menu {
+  position: absolute;
+}
+.navbar-sub-nav {
+  display: flex;
+  margin: 0 0 0 6px;
+}
+.caret-down,
+.btn .caret-down {
+  top: 0;
+  height: 11px;
+  width: 11px;
+  margin-left: 4px;
+  fill: currentColor;
+}
+.header-user .dropdown-menu,
+.header-new .dropdown-menu {
+  margin-top: 4px;
+}
+.btn-sign-in {
+  background-color: #ebebfa;
+  color: #292961;
+  font-weight: 600;
+  line-height: 18px;
+  margin: 4px 0 4px 2px;
+}
+.title-container .badge.badge-pill,
+.navbar-nav .badge.badge-pill {
+  position: inherit;
+  font-weight: 400;
+  margin-left: -6px;
+  font-size: 11px;
+  color: #333;
+  padding: 0 5px;
+  line-height: 12px;
+  border-radius: 7px;
+  box-shadow: 0 1px 0 rgba(76, 78, 84, 0.2);
+}
+.title-container .badge.badge-pill.green-badge,
+.navbar-nav .badge.badge-pill.green-badge {
+  background-color: #1aaa55;
+}
+.title-container .badge.badge-pill.merge-requests-count,
+.navbar-nav .badge.badge-pill.merge-requests-count {
+  background-color: #fca429;
+}
+.title-container .badge.badge-pill.todos-count,
+.navbar-nav .badge.badge-pill.todos-count {
+  background-color: #1f78d1;
+}
+.title-container .canary-badge .badge,
+.navbar-nav .canary-badge .badge {
+  font-size: 12px;
+  line-height: 16px;
+  padding: 0 0.5rem;
+}
+
+@media (max-width: 575.98px) {
+  .navbar-gitlab .container-fluid {
+    font-size: 18px;
+  }
+  .navbar-gitlab .container-fluid .navbar-nav {
+    table-layout: fixed;
+    width: 100%;
+    margin: 0;
+    text-align: right;
+  }
+  .navbar-gitlab .container-fluid .navbar-collapse {
+    margin-left: -8px;
+    margin-right: -10px;
+  }
+  .navbar-gitlab .container-fluid .navbar-collapse .nav > li:not(.d-none) {
+    flex: 1;
+  }
+  .header-user-dropdown-toggle {
+    text-align: center;
+  }
+  .header-user-avatar {
+    float: none;
+  }
+}
+.header-user.show .dropdown-menu {
+  margin-top: 4px;
+  color: #fafafa;
+  left: auto;
+  max-height: 445px;
+}
+.header-user.show .dropdown-menu svg {
+  vertical-align: text-top;
+}
+.header-user-avatar {
+  float: left;
+  margin-right: 5px;
+  border-radius: 50%;
+  border: 1px solid #333;
+}
+.media {
+  display: flex;
+  align-items: flex-start;
+}
+.card {
+  margin-bottom: 16px;
+}
+.content-wrapper {
+  width: 100%;
+}
+.content-wrapper .container-fluid {
+  padding: 0 16px;
+}
+
+@media (min-width: 768px) {
+  .page-with-contextual-sidebar {
+    padding-left: 50px;
+  }
+}
+
+@media (min-width: 1200px) {
+  .page-with-contextual-sidebar {
+    padding-left: 220px;
+  }
+}
+.context-header {
+  position: relative;
+  margin-right: 2px;
+  width: 220px;
+}
+.context-header > a,
+.context-header > button {
+  font-weight: 600;
+  display: flex;
+  width: 100%;
+  align-items: center;
+  padding: 10px 16px 10px 10px;
+  color: #fafafa;
+  background-color: transparent;
+  border: 0;
+  text-align: left;
+}
+.context-header .avatar-container {
+  flex: 0 0 40px;
+  background-color: #333;
+}
+.context-header .sidebar-context-title {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.context-header .sidebar-context-title.text-secondary {
+  font-weight: normal;
+  font-size: 0.8em;
+}
+.nav-sidebar {
+  position: fixed;
+  z-index: 600;
+  width: 220px;
+  top: 40px;
+  bottom: 0;
+  left: 0;
+  background-color: #2e2e2e;
+  box-shadow: inset -1px 0 0 #4f4f4f;
+  transform: translate3d(0, 0, 0);
+}
+
+@media (min-width: 576px) and (max-width: 576px) {
+  .nav-sidebar:not(.sidebar-collapsed-desktop) {
+    box-shadow: inset -1px 0 0 #4f4f4f, 2px 1px 3px rgba(0, 0, 0, 0.1);
+  }
+}
+.nav-sidebar.sidebar-collapsed-desktop {
+  width: 50px;
+}
+.nav-sidebar.sidebar-collapsed-desktop .nav-sidebar-inner-scroll {
+  overflow-x: hidden;
+}
+.nav-sidebar.sidebar-collapsed-desktop .badge.badge-pill:not(.fly-out-badge),
+.nav-sidebar.sidebar-collapsed-desktop .sidebar-context-title,
+.nav-sidebar.sidebar-collapsed-desktop .nav-item-name {
+  border: 0;
+  clip: rect(0, 0, 0, 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}
+.nav-sidebar.sidebar-collapsed-desktop .sidebar-top-level-items > li > a {
+  min-height: 45px;
+}
+.nav-sidebar.sidebar-collapsed-desktop .fly-out-top-item {
+  display: block;
+}
+.nav-sidebar.sidebar-collapsed-desktop .avatar-container {
+  margin: 0 auto;
+}
+.nav-sidebar.sidebar-expanded-mobile {
+  left: 0;
+}
+.nav-sidebar a {
+  text-decoration: none;
+}
+.nav-sidebar ul {
+  padding-left: 0;
+  list-style: none;
+}
+.nav-sidebar li {
+  white-space: nowrap;
+}
+.nav-sidebar li a {
+  display: flex;
+  align-items: center;
+  padding: 12px 16px;
+  color: #bababa;
+}
+.nav-sidebar li .nav-item-name {
+  flex: 1;
+}
+.nav-sidebar li.active > a {
+  font-weight: 600;
+}
+
+@media (max-width: 767.98px) {
+  .nav-sidebar {
+    left: -220px;
+  }
+}
+.nav-sidebar .nav-icon-container {
+  display: flex;
+  margin-right: 8px;
+}
+.nav-sidebar .fly-out-top-item {
+  display: none;
+}
+.nav-sidebar svg {
+  height: 16px;
+  width: 16px;
+}
+
+@media (min-width: 768px) and (max-width: 1199px) {
+  .nav-sidebar:not(.sidebar-expanded-mobile) {
+    width: 50px;
+  }
+  .nav-sidebar:not(.sidebar-expanded-mobile) .nav-sidebar-inner-scroll {
+    overflow-x: hidden;
+  }
+  .nav-sidebar:not(.sidebar-expanded-mobile) .badge.badge-pill:not(.fly-out-badge),
+  .nav-sidebar:not(.sidebar-expanded-mobile) .sidebar-context-title,
+  .nav-sidebar:not(.sidebar-expanded-mobile) .nav-item-name {
+    border: 0;
+    clip: rect(0, 0, 0, 0);
+    height: 1px;
+    margin: -1px;
+    overflow: hidden;
+    padding: 0;
+    position: absolute;
+    white-space: nowrap;
+    width: 1px;
+  }
+  .nav-sidebar:not(.sidebar-expanded-mobile) .sidebar-top-level-items > li > a {
+    min-height: 45px;
+  }
+  .nav-sidebar:not(.sidebar-expanded-mobile) .fly-out-top-item {
+    display: block;
+  }
+  .nav-sidebar:not(.sidebar-expanded-mobile) .avatar-container {
+    margin: 0 auto;
+  }
+  .nav-sidebar:not(.sidebar-expanded-mobile) .context-header {
+    height: 60px;
+    width: 50px;
+  }
+  .nav-sidebar:not(.sidebar-expanded-mobile) .context-header a {
+    padding: 10px 4px;
+  }
+  .nav-sidebar:not(.sidebar-expanded-mobile) .sidebar-top-level-items > li .sidebar-sub-level-items:not(.flyout-list) {
+    display: none;
+  }
+  .nav-sidebar:not(.sidebar-expanded-mobile) .nav-icon-container {
+    margin-right: 0;
+  }
+  .nav-sidebar:not(.sidebar-expanded-mobile) .toggle-sidebar-button {
+    padding: 16px;
+    width: 49px;
+  }
+  .nav-sidebar:not(.sidebar-expanded-mobile) .toggle-sidebar-button .collapse-text,
+  .nav-sidebar:not(.sidebar-expanded-mobile) .toggle-sidebar-button .icon-chevron-double-lg-left {
+    display: none;
+  }
+  .nav-sidebar:not(.sidebar-expanded-mobile) .toggle-sidebar-button .icon-chevron-double-lg-right {
+    display: block;
+    margin: 0;
+  }
+}
+.nav-sidebar-inner-scroll {
+  height: 100%;
+  width: 100%;
+  overflow: auto;
+}
+.sidebar-sub-level-items {
+  display: none;
+  padding-bottom: 8px;
+}
+.sidebar-sub-level-items > li a {
+  padding: 8px 16px 8px 40px;
+}
+.sidebar-top-level-items {
+  margin-bottom: 60px;
+}
+
+@media (min-width: 576px) {
+  .sidebar-top-level-items > li > a {
+    margin-right: 1px;
+  }
+}
+.sidebar-top-level-items > li .badge.badge-pill {
+  background-color: rgba(255, 255, 255, 0.08);
+  color: #bababa;
+}
+.sidebar-top-level-items > li.active {
+  background: rgba(255, 255, 255, 0.04);
+}
+.sidebar-top-level-items > li.active > a {
+  margin-left: 4px;
+  padding-left: 12px;
+}
+.sidebar-top-level-items > li.active .badge.badge-pill {
+  font-weight: 600;
+}
+.sidebar-top-level-items > li.active .sidebar-sub-level-items:not(.is-fly-out-only) {
+  display: block;
+}
+.toggle-sidebar-button,
+.close-nav-button {
+  width: 219px;
+  position: fixed;
+  height: 48px;
+  bottom: 0;
+  padding: 0 16px;
+  background-color: #2e2e2e;
+  border: 0;
+  border-top: 1px solid #4f4f4f;
+  color: #bababa;
+  display: flex;
+  align-items: center;
+}
+.toggle-sidebar-button svg,
+.close-nav-button svg {
+  margin-right: 8px;
+}
+.toggle-sidebar-button .icon-chevron-double-lg-right,
+.close-nav-button .icon-chevron-double-lg-right {
+  display: none;
+}
+.collapse-text {
+  white-space: nowrap;
+  overflow: hidden;
+}
+.sidebar-collapsed-desktop .context-header {
+  height: 60px;
+  width: 50px;
+}
+.sidebar-collapsed-desktop .context-header a {
+  padding: 10px 4px;
+}
+.sidebar-collapsed-desktop .sidebar-top-level-items > li .sidebar-sub-level-items:not(.flyout-list) {
+  display: none;
+}
+.sidebar-collapsed-desktop .nav-icon-container {
+  margin-right: 0;
+}
+.sidebar-collapsed-desktop .toggle-sidebar-button {
+  padding: 16px;
+  width: 49px;
+}
+.sidebar-collapsed-desktop .toggle-sidebar-button .collapse-text,
+.sidebar-collapsed-desktop .toggle-sidebar-button .icon-chevron-double-lg-left {
+  display: none;
+}
+.sidebar-collapsed-desktop .toggle-sidebar-button .icon-chevron-double-lg-right {
+  display: block;
+  margin: 0;
+}
+.fly-out-top-item > a {
+  display: flex;
+}
+.fly-out-top-item .fly-out-badge {
+  margin-left: 8px;
+}
+.fly-out-top-item-name {
+  flex: 1;
+}
+.close-nav-button {
+  display: none;
+}
+
+@media (max-width: 767.98px) {
+  .close-nav-button {
+    display: flex;
+  }
+  .toggle-sidebar-button {
+    display: none;
+  }
+}
+table.table {
+  margin-bottom: 16px;
+}
+table.table .dropdown-menu a {
+  text-decoration: none;
+}
+table.table .success,
+table.table .info {
+  color: #333;
+}
+table.table .success a:not(.btn),
+table.table .info a:not(.btn) {
+  text-decoration: underline;
+  color: #333;
+}
+pre {
+  font-family: "Menlo", "DejaVu Sans Mono", "Liberation Mono", "Consolas", "Ubuntu Mono", "Courier New", "andale mono", "lucida console", monospace;
+  display: block;
+  padding: 8px 12px;
+  margin: 0 0 8px;
+  font-size: 13px;
+  word-break: break-all;
+  word-wrap: break-word;
+  color: #fafafa;
+  background-color: #2e2e2e;
+  border: 1px solid #4f4f4f;
+  border-radius: 2px;
+}
+.monospace {
+  font-family: "Menlo", "DejaVu Sans Mono", "Liberation Mono", "Consolas", "Ubuntu Mono", "Courier New", "andale mono", "lucida console", monospace;
+}
+input::-moz-placeholder,
+textarea::-moz-placeholder {
+  color: #a7a7a7;
+  opacity: 1;
+}
+input::-ms-input-placeholder,
+textarea::-ms-input-placeholder {
+  color: #a7a7a7;
+}
+input:-ms-input-placeholder,
+textarea:-ms-input-placeholder {
+  color: #a7a7a7;
+}
+svg {
+  fill: currentColor;
+}
+
+svg.s12 {
+  width: 12px;
+  height: 12px;
+}
+
+svg.s16 {
+  width: 16px;
+  height: 16px;
+}
+
+svg.s18 {
+  width: 18px;
+  height: 18px;
+}
+
+svg.s12 {
+  vertical-align: -1px;
+}
+
+svg.s16 {
+  vertical-align: -3px;
+}
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
+}
+table.code {
+  width: 100%;
+  font-family: "Menlo", "DejaVu Sans Mono", "Liberation Mono", "Consolas", "Ubuntu Mono", "Courier New", "andale mono", "lucida console", monospace;
+  border: 0;
+  border-collapse: separate;
+  margin: 0;
+  padding: 0;
+  table-layout: fixed;
+  border-radius: 0 0 4px 4px;
+}
+.frame .badge.badge-pill {
+  position: absolute;
+  background-color: #1b69b6;
+  color: #333;
+  border: #333 1px solid;
+  min-height: 16px;
+  padding: 5px 8px;
+  border-radius: 12px;
+}
+.frame .badge.badge-pill {
+  transform: translate(-50%, -50%);
+}
+.color-label {
+  padding: 0 0.5rem;
+  line-height: 16px;
+  border-radius: 100px;
+  color: #333;
+}
+.label-link {
+  display: inline-flex;
+  vertical-align: text-bottom;
+}
+.milestones {
+  padding: 8px;
+  margin-top: 8px;
+  border-radius: 4px;
+  background-color: #4f4f4f;
+}
+.search {
+  margin: 0 8px;
+}
+.search form {
+  margin: 0;
+  padding: 4px;
+  width: 200px;
+  line-height: 24px;
+  height: 32px;
+  border: 0;
+  border-radius: 4px;
+}
+
+@media (min-width: 1200px) {
+  .search form {
+    width: 320px;
+  }
+}
+.search .search-input {
+  border: 0;
+  font-size: 14px;
+  padding: 0 20px 0 0;
+  margin-left: 5px;
+  line-height: 25px;
+  width: 98%;
+  color: #333;
+  background: none;
+}
+.search .search-input-container {
+  display: flex;
+  position: relative;
+}
+.search .search-input-wrap {
+  width: 100%;
+}
+.search .search-input-wrap .search-icon,
+.search .search-input-wrap .clear-icon {
+  position: absolute;
+  right: 5px;
+  top: 4px;
+}
+.search .search-input-wrap .search-icon {
+  -moz-user-select: none;
+  user-select: none;
+}
+.search .search-input-wrap .clear-icon {
+  display: none;
+}
+.search .search-input-wrap .dropdown {
+  position: static;
+}
+.search .search-input-wrap .dropdown-menu {
+  left: -5px;
+  max-height: 400px;
+  overflow: auto;
+}
+
+@media (min-width: 1200px) {
+  .search .search-input-wrap .dropdown-menu {
+    width: 320px;
+  }
+}
+.search .search-input-wrap .dropdown-content {
+  max-height: 382px;
+}
+.settings {
+  border-top: 1px solid #4f4f4f;
+}
+.settings:first-of-type {
+  margin-top: 10px;
+  border: 0;
+}
+.settings + div .settings:first-of-type {
+  margin-top: 0;
+  border-top: 1px solid #4f4f4f;
+}
+.avatar, .avatar-container {
+  float: left;
+  margin-right: 16px;
+  border-radius: 50%;
+  border: 1px solid #333;
+}
+.s16.avatar, .s16.avatar-container {
+  width: 16px;
+  height: 16px;
+  margin-right: 8px;
+}
+.s18.avatar, .s18.avatar-container {
+  width: 18px;
+  height: 18px;
+  margin-right: 8px;
+}
+.s40.avatar, .s40.avatar-container {
+  width: 40px;
+  height: 40px;
+  margin-right: 8px;
+}
+.avatar {
+  transition-property: none;
+  width: 40px;
+  height: 40px;
+  padding: 0;
+  background: #222;
+  overflow: hidden;
+  border-color: rgba(255, 255, 255, 0.1);
+}
+.avatar.center {
+  font-size: 14px;
+  line-height: 1.8em;
+  text-align: center;
+}
+.avatar.avatar-tile {
+  border-radius: 0;
+  border: 0;
+}
+.avatar-container {
+  overflow: hidden;
+  display: flex;
+}
+.avatar-container a {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  text-decoration: none;
+}
+.avatar-container .avatar {
+  border-radius: 0;
+  border: 0;
+  height: auto;
+  width: 100%;
+  margin: 0;
+  align-self: center;
+}
+.avatar-container.s40 {
+  min-width: 40px;
+  min-height: 40px;
+}
+.rect-avatar {
+  border-radius: 2px;
+}
+.rect-avatar.s16 {
+  border-radius: 2px;
+}
+.rect-avatar.s18 {
+  border-radius: 2px;
+}
+.rect-avatar.s40 {
+  border-radius: 4px;
+}
+.tab-width-8 {
+  -moz-tab-size: 8;
+  tab-size: 8;
+}
+.gl-sr-only {
+  border: 0;
+  clip: rect(0, 0, 0, 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}
+.gl-ml-3 {
+  margin-left: 0.5rem;
+}
+.content-wrapper > .alert-wrapper,
+#content-body, .modal-dialog {
+  display: block;
+}
+@import 'cloaking';
+@include cloak-startup-scss(none);
diff --git a/app/assets/stylesheets/startup/startup-general.scss b/app/assets/stylesheets/startup/startup-general.scss
index 2a7a9255ded..a98e91b32eb 100644
--- a/app/assets/stylesheets/startup/startup-general.scss
+++ b/app/assets/stylesheets/startup/startup-general.scss
@@ -1,5 +1,1833 @@
-@charset "UTF-8";*,::after,::before{box-sizing:border-box}html{font-family:sans-serif;line-height:1.15;overflow-y:scroll}header,nav{display:block}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Noto Sans",Ubuntu,Cantarell,"Helvetica Neue",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";font-weight:400;line-height:1.5;color:#303030;text-align:left;background-color:#fff}hr{box-sizing:content-box;height:0;margin-top:.5rem;margin-bottom:.5rem;border:0;border-top:1px solid rgba(0,0,0,.1);overflow:hidden;margin:24px 0;border-top:1px solid #eee}p,ul{margin-top:0;margin-bottom:1rem}ul ul{margin-bottom:0}strong{font-weight:700}a{text-decoration:none;background-color:transparent;color:#1068bf}a:not([href]){color:inherit;text-decoration:none}code{font-family:"Menlo","DejaVu Sans Mono","Liberation Mono","Consolas","Ubuntu Mono","Courier New","andale mono","lucida console",monospace;font-size:90%;word-wrap:break-word;padding:2px 4px;color:#1f1f1f;background-color:#f0f0f0;border-radius:4px}img{vertical-align:middle;border-style:none}svg{overflow:hidden;vertical-align:baseline;fill:currentColor}button{border-radius:0;text-transform:none}button,input{margin:0;font-family:inherit;font-size:inherit;line-height:inherit;overflow:visible}[type=button]:not(:disabled),button:not(:disabled){cursor:pointer}[type=button]::-moz-focus-inner,button::-moz-focus-inner{padding:0;border-style:none}[type=search]{outline-offset:-2px}summary{display:list-item;cursor:pointer}[hidden]{display:none!important}.h1,h1{margin-bottom:.25rem;font-weight:600;line-height:1.2;color:#303030;font-size:2.1875rem}.list-unstyled{padding-left:0;list-style:none}a>code{color:inherit}.container{width:100%;padding-right:15px;padding-left:15px;margin-right:auto;margin-left:auto}@media (min-width:576px){.container{max-width:540px}}@media (min-width:768px){.container{max-width:720px}}@media (min-width:992px){.container{max-width:960px}}@media (min-width:1200px){.container{max-width:1140px}}.container-fluid{width:100%;padding-right:15px;padding-left:15px;margin-right:auto;margin-left:auto}@media (min-width:576px){.container{max-width:540px}}@media (min-width:768px){.container{max-width:720px}}@media (min-width:992px){.container{max-width:960px}}@media (min-width:1200px){.container{max-width:1140px}}.search form{display:block;padding:.375rem .75rem;font-weight:400;color:#303030;background-color:#fff;background-clip:padding-box;border-radius:.25rem}.search form::-ms-expand{background-color:transparent;border:0}.search form:-moz-focusring{color:transparent;text-shadow:0 0 0 #303030}.search form::placeholder{opacity:1;color:#919191}.search form:disabled{background-color:#fafafa;opacity:1}.form-inline{display:flex;flex-flow:row wrap;align-items:center}@media (min-width:576px){.form-inline .search form,.search .form-inline form{display:inline-block;width:auto;vertical-align:middle}}.btn{display:inline-block;text-align:center;vertical-align:middle;cursor:pointer;user-select:none;border:1px solid transparent;padding:.375rem .75rem;line-height:20px;border-radius:.25rem}.btn:disabled{opacity:.65}.btn-success{color:#fff;background-color:#108548;border-color:#108548}.btn-success:disabled{color:#fff;background-color:#108548;border-color:#108548}.btn-success:not(:disabled):not(.disabled).active,.btn-success:not(:disabled):not(.disabled):active,.show>.btn-success.dropdown-menu-toggle{color:#fff;background-color:#0b572f;border-color:#094c29}.btn-sm{padding:.25rem .5rem;font-size:.875rem;line-height:1.5;border-radius:.2rem}.collapse:not(.show){display:none}.dropdown-menu-toggle::after{margin-left:.255em;vertical-align:.255em;content:"";border-top:.3em solid;border-right:.3em solid transparent;border-bottom:0;border-left:.3em solid transparent}.dropdown-menu-toggle:empty::after{margin-left:0}.dropdown-menu{left:0;float:left;min-width:10rem;padding:.5rem 0;margin:.125rem 0 0;font-size:1rem;color:#303030;text-align:left;list-style:none;background-clip:padding-box;border:1px solid rgba(0,0,0,.15)}.dropdown-menu-right{right:0;left:auto}.divider{height:0;margin:4px 0;overflow:hidden;border-top:1px solid #dbdbdb}.dropdown-menu.show{display:block}.nav{display:flex;flex-wrap:wrap;padding-left:0;margin-bottom:0;list-style:none}.navbar{position:relative;padding:.25rem .5rem}.navbar,.navbar .container,.navbar .container-fluid{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between}.navbar-nav{display:flex;flex-direction:column;padding-left:0;margin-bottom:0;list-style:none}.navbar-nav .dropdown-menu{float:none}.navbar-collapse{flex-basis:100%;flex-grow:1;align-items:center}.navbar-toggler{padding:.25rem .75rem;font-size:1.25rem;line-height:1;background-color:transparent;border:1px solid transparent;border-radius:.25rem}@media (max-width:575.98px){.navbar-expand-sm>.container,.navbar-expand-sm>.container-fluid{padding-right:0;padding-left:0}}@media (min-width:576px){.navbar-expand-sm{flex-flow:row nowrap;justify-content:flex-start}.navbar-expand-sm .navbar-nav{flex-direction:row}.navbar-expand-sm .navbar-nav .dropdown-menu{position:absolute}.navbar-expand-sm>.container,.navbar-expand-sm>.container-fluid{flex-wrap:nowrap}.navbar-expand-sm .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand-sm .navbar-toggler{display:none}}.badge,.card{border-radius:.25rem}.card{position:relative;display:flex;flex-direction:column;min-width:0;word-wrap:break-word;background-color:#fff;background-clip:border-box;border:1px solid #dbdbdb}.card>hr{margin-right:0;margin-left:0}.badge{display:inline-block;padding:.25em .4em;font-size:75%;font-weight:600;line-height:1;text-align:center;white-space:nowrap;vertical-align:baseline}.badge:empty{display:none}.btn .badge{position:relative;top:-1px}.badge-pill{padding-right:.6em;padding-left:.6em;border-radius:10rem}.close{float:right;font-size:1.5rem;font-weight:600;line-height:1;color:#000;text-shadow:0 1px 0 #fff;opacity:.5}button.close{padding:0;background-color:transparent;border:0;appearance:none}.bg-transparent{background-color:transparent!important}.border{border:1px solid #dbdbdb!important}.rounded{border-radius:.25rem!important}.d-none{display:none!important}.d-inline-block{display:inline-block!important}.d-block{display:block!important}@media (min-width:576px){.d-sm-none{display:none!important}}@media (min-width:768px){.d-md-block{display:block!important}}@media (min-width:992px){.d-lg-none{display:none!important}.d-lg-block{display:block!important}}@media (min-width:1200px){.d-xl-block{display:block!important}}.float-right{float:right!important}.sr-only{white-space:nowrap}.m-auto{margin:auto!important}.text-nowrap{white-space:nowrap!important}.search form,body{font-size:.875rem}[role=button],button,html [type=button]{cursor:pointer}.h1,h1{margin-top:20px;margin-bottom:10px}input[type=file]{line-height:1}.code>code{background-color:inherit;padding:unset}.hidden{display:none!important;visibility:hidden!important}.dropdown-menu-toggle::after,.hide{display:none}.badge:not(.gl-badge){padding:4px 5px;font-size:12px;font-style:normal;font-weight:400;display:inline-block}.toggle-sidebar-button .collapse-text,.toggle-sidebar-button .icon-chevron-double-lg-left,.toggle-sidebar-button .icon-chevron-double-lg-right{color:#707070}body{text-decoration-skip:ink}.container{padding-top:0;z-index:5}.container .content{margin:0}@media (max-width:575.98px){.container .content{margin-top:20px}.container .container .title{padding-left:15px!important}}.btn{border-radius:4px;font-size:.875rem;font-weight:400;padding:6px 10px;background-color:#fff;border-color:#dbdbdb;color:#303030;white-space:nowrap}.btn:active{box-shadow:none}.btn.active,.btn:active{box-shadow:rgba(0,0,0,.16);background-color:#eaeaea;border-color:#e3e3e3;color:#303030}.btn.btn-sm{padding:4px 10px;font-size:13px;line-height:18px}.btn.btn-success{background-color:#108548;border-color:#217645;color:#fff}.btn.btn-success.active,.btn.btn-success:active{box-shadow:rgba(0,0,0,.16);background-color:#24663b;border-color:#0d532a;color:#fff}.btn svg{height:15px;width:15px;position:relative;top:2px}.btn .fa:not(:last-child),.btn svg:not(:last-child){margin-right:5px}.badge.badge-pill:not(.gl-badge){font-weight:400;background-color:rgba(0,0,0,.07);color:#4f4f4f;vertical-align:baseline}.loading{margin:20px auto;height:40px;color:#555;font-size:32px;text-align:center}.chart{overflow:hidden;height:220px}.center{text-align:center}.flex{display:flex}.dropdown{position:relative}.show.dropdown .dropdown-menu{transform:translateY(0);display:block;min-height:40px;max-height:312px;overflow-y:auto}@media (max-width:575.98px){.show.dropdown .dropdown-menu{width:100%}}.show.dropdown .dropdown-menu-toggle{border-color:#c4c4c4}.search-input-container .dropdown-menu{margin-top:11px}.dropdown-menu,.dropdown-menu-toggle{font-size:14px;background-color:#fff;border:1px solid #dbdbdb;border-radius:.25rem}.dropdown-menu-toggle{color:#303030;text-align:left;white-space:nowrap;padding:6px 25px 6px 10px;position:relative;width:160px;text-overflow:ellipsis;overflow:hidden}.no-outline.dropdown-menu-toggle,.show.dropdown [data-toggle=dropdown]{outline:0}.dropdown-menu-toggle .fa{color:#c4c4c4;position:absolute}.dropdown-menu{display:none;position:absolute;width:auto;top:100%;z-index:300;min-width:240px;max-width:500px;margin-top:4px;margin-bottom:24px;font-weight:400;padding:8px 0;box-shadow:0 2px 4px rgba(0,0,0,.1)}.dropdown-menu ul{margin:0;padding:0}.dropdown-menu li{display:block;text-align:left;list-style:none;padding:0 1px}.dropdown-menu li button,.dropdown-menu li>a{background:0 0;border:0;border-radius:0;box-shadow:none;display:block;font-weight:400;position:relative;padding:8px 12px;color:#303030;line-height:16px;white-space:normal;overflow:hidden;text-align:left;width:100%}.dropdown-menu li button:active,.dropdown-menu li>a:active{background-color:#eee;color:#303030;outline:0;text-decoration:none}.dropdown-menu li button:active .avatar,.dropdown-menu li>a:active .avatar{border-color:#fff}.dropdown-menu li button:active .badge.badge-pill,.dropdown-menu li>a:active .badge.badge-pill{background-color:#d3e7f9}.dropdown-menu .divider{height:1px;margin:.25rem 0;padding:0;background-color:#dbdbdb}.dropdown-menu .badge.badge-pill+span:not(.badge.badge-pill){margin-right:40px}.dropdown-select{width:300px}@media (max-width:767.98px){.dropdown-select{width:100%}}.dropdown-content{max-height:252px;overflow-y:auto}.dropdown-loading{position:absolute;top:0;right:0;bottom:0;left:0;display:none;z-index:9;background-color:rgba(255,255,255,.6);font-size:28px}.dropdown-loading .fa{position:absolute;top:50%;left:50%;margin-top:-14px;margin-left:-14px}@media (max-width:575.98px){.navbar-gitlab li.dropdown{position:static}header.navbar-gitlab .dropdown .dropdown-menu{width:100%;min-width:100%}}@media (max-width:767.98px){.dropdown-menu-toggle{width:100%}}input{border-radius:.25rem;color:#303030;background-color:#fff}.search form{margin:0;padding:4px;width:200px;line-height:24px;height:32px;border:0;border-radius:4px}body.ui-indigo .navbar-gitlab{background-color:#292961}body.ui-indigo .navbar-gitlab .nav>li,body.ui-indigo .navbar-gitlab .navbar-collapse,body.ui-indigo .navbar-gitlab .navbar-sub-nav{color:#d1d1f0}body.ui-indigo .navbar-gitlab .container-fluid .navbar-toggler{border-left:1px solid #6868b9}body.ui-indigo .navbar-gitlab .container-fluid .navbar-toggler svg{fill:#d1d1f0}body.ui-indigo .navbar-gitlab .nav>li.active>a,body.ui-indigo .navbar-gitlab .nav>li.dropdown.show>a,body.ui-indigo .navbar-gitlab .navbar-nav>li.active>a,body.ui-indigo .navbar-gitlab .navbar-nav>li.active>button,body.ui-indigo .navbar-gitlab .navbar-nav>li.dropdown.show>a,body.ui-indigo .navbar-gitlab .navbar-nav>li.dropdown.show>button,body.ui-indigo .navbar-gitlab .navbar-sub-nav>li.active>a,body.ui-indigo .navbar-gitlab .navbar-sub-nav>li.active>button,body.ui-indigo .navbar-gitlab .navbar-sub-nav>li.dropdown.show>a,body.ui-indigo .navbar-gitlab .navbar-sub-nav>li.dropdown.show>button{color:#292961;background-color:#fff}body.ui-indigo .navbar-gitlab .nav>li>a.header-user-dropdown-toggle .header-user-avatar{border-color:#d1d1f0}body.ui-indigo .search form{background-color:rgba(209,209,240,.2)}body.ui-indigo .search .search-input::placeholder{color:rgba(209,209,240,.8)}body.ui-indigo .search .search-input-wrap .clear-icon,body.ui-indigo .search .search-input-wrap .search-icon{fill:rgba(209,209,240,.8)}body.ui-indigo .nav-sidebar li.active{box-shadow:inset 4px 0 0 #4b4ba3}body.ui-indigo .nav-sidebar li.active>a,body.ui-indigo .sidebar-top-level-items>li.active .badge.badge-pill{color:#393982}body.ui-indigo .nav-sidebar li.active .nav-icon-container svg{fill:#393982}.navbar-gitlab{padding:0 16px;z-index:1000;margin-bottom:0;min-height:40px;border:0;border-bottom:1px solid #dbdbdb;position:fixed;top:0;left:0;right:0;border-radius:0}.navbar-gitlab .logo-text{line-height:initial}.navbar-gitlab .logo-text svg{width:55px;height:14px;margin:0;fill:#fff}.navbar-gitlab .close-icon{display:none}.navbar-gitlab .header-content{width:100%;display:flex;justify-content:space-between;position:relative;min-height:40px;padding-left:0}.navbar-gitlab .header-content .title-container{display:flex;align-items:stretch;flex:1 1 auto;padding-top:0;overflow:visible}.navbar-gitlab .header-content .title{padding-right:0;color:currentColor;display:flex;position:relative;margin:0;font-size:18px;vertical-align:top;white-space:nowrap}.navbar-gitlab .header-content .title img{height:28px}.navbar-gitlab .header-content .title img+.logo-text{margin-left:8px}.navbar-gitlab .header-content .title a{display:flex;align-items:center;padding:2px 8px;margin:5px 2px 5px -8px;border-radius:4px}.navbar-gitlab .header-content .dropdown.open>a{border-bottom-color:#fff}.navbar-gitlab .header-content .navbar-collapse>ul.nav>li:not(.d-none){margin:0 2px}.navbar-gitlab .navbar-collapse{flex:0 0 auto;border-top:0;padding:0}@media (max-width:575.98px){.navbar-gitlab .navbar-collapse{flex:1 1 auto}}.navbar-gitlab .navbar-collapse .nav{flex-wrap:nowrap}@media (max-width:575.98px){.navbar-gitlab .navbar-collapse .nav>li:not(.d-none) a{margin-left:0}}.navbar-gitlab .container-fluid{padding:0}.navbar-gitlab .container-fluid .user-counter svg{margin-right:3px}.navbar-gitlab .container-fluid .navbar-toggler{position:relative;right:-10px;border-radius:0;min-width:45px;padding:0;margin:8px -7px 8px 0;font-size:14px;text-align:center;color:currentColor}.navbar-gitlab .container-fluid .navbar-toggler.active{color:currentColor;background-color:transparent}@media (max-width:575.98px){.navbar-gitlab .container-fluid .navbar-nav{display:flex;padding-right:10px;flex-direction:row}}.navbar-gitlab .container-fluid .navbar-nav li .badge.badge-pill{box-shadow:none;font-weight:600}@media (max-width:575.98px){.navbar-gitlab .container-fluid .nav>li.header-user{padding-left:10px}}.navbar-gitlab .container-fluid .nav>li>a{will-change:color;margin:4px 0;padding:6px 8px;height:32px}@media (max-width:575.98px){.navbar-gitlab .container-fluid .nav>li>a{padding:0}}.navbar-gitlab .container-fluid .nav>li>a.header-user-dropdown-toggle{margin-left:2px}.navbar-gitlab .container-fluid .nav>li .header-new-dropdown-toggle,.navbar-gitlab .container-fluid .nav>li>a.header-user-dropdown-toggle .header-user-avatar{margin-right:0}.navbar-nav>li>a,.navbar-nav>li>button,.navbar-sub-nav>li>a,.navbar-sub-nav>li>button{display:flex;align-items:center;justify-content:center;padding:6px 8px;margin:4px 2px;font-size:12px;color:currentColor;border-radius:4px;height:32px;font-weight:600}.navbar-nav>li>button,.navbar-sub-nav>li>button{background:0 0;border:0}.navbar-nav .dropdown-menu,.navbar-sub-nav .dropdown-menu{position:absolute}.navbar-sub-nav{display:flex;margin:0 0 0 6px}.btn .caret-down,.caret-down{top:0;height:11px;width:11px;margin-left:4px;fill:currentColor}.header-new .dropdown-menu,.header-user .dropdown-menu{margin-top:4px}.btn-sign-in{background-color:#ebebfa;color:#292961;font-weight:600;line-height:18px;margin:4px 0 4px 2px}.navbar-nav .badge.badge-pill,.title-container .badge.badge-pill{position:inherit;font-weight:400;margin-left:-6px;font-size:11px;color:#fff;padding:0 5px;line-height:12px;border-radius:7px;box-shadow:0 1px 0 rgba(76,78,84,.2)}.navbar-nav .badge.badge-pill.green-badge,.title-container .badge.badge-pill.green-badge{background-color:#108548}.navbar-nav .badge.badge-pill.merge-requests-count,.title-container .badge.badge-pill.merge-requests-count{background-color:#de7e00}.navbar-nav .badge.badge-pill.todos-count,.title-container .badge.badge-pill.todos-count{background-color:#1f75cb}.navbar-nav .canary-badge .badge,.title-container .canary-badge .badge{font-size:12px;line-height:16px;padding:0 .5rem}@media (max-width:575.98px){.navbar-gitlab .container-fluid{font-size:18px}.navbar-gitlab .container-fluid .navbar-nav{table-layout:fixed;width:100%;margin:0;text-align:right}.navbar-gitlab .container-fluid .navbar-collapse{margin-left:-8px;margin-right:-10px}.navbar-gitlab .container-fluid .navbar-collapse .nav>li:not(.d-none){flex:1}.header-user-dropdown-toggle{text-align:center}.header-user-avatar{float:none}}.header-user.show .dropdown-menu{margin-top:4px;color:#303030;left:auto;max-height:445px}.header-user.show .dropdown-menu svg{vertical-align:text-top}.header-user-avatar{float:left;margin-right:5px;border-radius:50%;border:1px solid #f5f5f5}.media{display:flex;align-items:flex-start}.card{margin-bottom:16px}@media (min-width:768px){.page-with-contextual-sidebar{padding-left:50px}}@media (min-width:1200px){.page-with-contextual-sidebar{padding-left:220px}}.context-header{position:relative;margin-right:2px;width:220px}.context-header>a,.context-header>button{font-weight:600;display:flex;width:100%;align-items:center;padding:10px 16px 10px 10px;color:#303030;background-color:transparent;border:0;text-align:left}.context-header .avatar-container{flex:0 0 40px;background-color:#fff}.context-header .sidebar-context-title{overflow:hidden;text-overflow:ellipsis}.context-header .sidebar-context-title.text-secondary{font-weight:400;font-size:.8em}.nav-sidebar{position:fixed;z-index:600;width:220px;top:40px;bottom:0;left:0;background-color:#fafafa;box-shadow:inset -1px 0 0 #dbdbdb;transform:translate3d(0,0,0)}@media (min-width:576px) and (max-width:576px){.nav-sidebar:not(.sidebar-collapsed-desktop){box-shadow:inset -1px 0 0 #dbdbdb,2px 1px 3px rgba(0,0,0,.1)}}.nav-sidebar a{text-decoration:none}.nav-sidebar ul{padding-left:0;list-style:none}.nav-sidebar li{white-space:nowrap}.nav-sidebar li a{display:flex;align-items:center;padding:12px 16px;color:#707070}.nav-sidebar li .nav-item-name{flex:1}.nav-sidebar li.active>a,.sidebar-top-level-items>li.active .badge.badge-pill{font-weight:600}@media (max-width:767.98px){.nav-sidebar{left:-220px}}.nav-sidebar .nav-icon-container{display:flex;margin-right:8px}.nav-sidebar .fly-out-top-item{display:none}.nav-sidebar svg{height:16px;width:16px}@media (min-width:768px) and (max-width:1199px){.nav-sidebar:not(.sidebar-expanded-mobile){width:50px}.nav-sidebar:not(.sidebar-expanded-mobile) .nav-sidebar-inner-scroll{overflow-x:hidden}.nav-sidebar:not(.sidebar-expanded-mobile) .badge.badge-pill:not(.fly-out-badge),.nav-sidebar:not(.sidebar-expanded-mobile) .nav-item-name,.nav-sidebar:not(.sidebar-expanded-mobile) .sidebar-context-title{border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.nav-sidebar:not(.sidebar-expanded-mobile) .sidebar-top-level-items>li>a{min-height:45px}.nav-sidebar:not(.sidebar-expanded-mobile) .fly-out-top-item{display:block}.nav-sidebar:not(.sidebar-expanded-mobile) .avatar-container{margin:0 auto}.nav-sidebar:not(.sidebar-expanded-mobile) .context-header{height:60px;width:50px}.nav-sidebar:not(.sidebar-expanded-mobile) .context-header a{padding:10px 4px}.nav-sidebar:not(.sidebar-expanded-mobile) .sidebar-top-level-items>li .sidebar-sub-level-items:not(.flyout-list),.nav-sidebar:not(.sidebar-expanded-mobile) .toggle-sidebar-button .collapse-text,.nav-sidebar:not(.sidebar-expanded-mobile) .toggle-sidebar-button .icon-chevron-double-lg-left{display:none}.nav-sidebar:not(.sidebar-expanded-mobile) .nav-icon-container{margin-right:0}.nav-sidebar:not(.sidebar-expanded-mobile) .toggle-sidebar-button{padding:16px;width:49px}.nav-sidebar:not(.sidebar-expanded-mobile) .toggle-sidebar-button .icon-chevron-double-lg-right{display:block;margin:0}}.nav-sidebar-inner-scroll{height:100%;width:100%;overflow:auto}.sidebar-sub-level-items{display:none;padding-bottom:8px}.sidebar-sub-level-items>li a{padding:8px 16px 8px 40px}.sidebar-sub-level-items>li.active a,.sidebar-top-level-items>li.active{background:rgba(0,0,0,.04)}.sidebar-top-level-items{margin-bottom:60px}@media (min-width:576px){.sidebar-top-level-items>li>a{margin-right:1px}}.sidebar-top-level-items>li .badge.badge-pill{background-color:rgba(0,0,0,.08);color:#707070}.sidebar-top-level-items>li.active>a{margin-left:4px;padding-left:12px}.sidebar-top-level-items>li.active .sidebar-sub-level-items:not(.is-fly-out-only){display:block}.close-nav-button,.toggle-sidebar-button{width:219px;position:fixed;height:48px;bottom:0;padding:0 16px;background-color:#fafafa;border:0;border-top:1px solid #dbdbdb;color:#707070;display:flex;align-items:center}.close-nav-button svg,.toggle-sidebar-button svg{margin-right:8px}.close-nav-button .icon-chevron-double-lg-right,.toggle-sidebar-button .icon-chevron-double-lg-right{display:none}.collapse-text{white-space:nowrap;overflow:hidden}.fly-out-top-item>a{display:flex}.fly-out-top-item .fly-out-badge{margin-left:8px}.fly-out-top-item-name{flex:1}.close-nav-button{display:none}@media (max-width:767.98px){.close-nav-button{display:flex}.toggle-sidebar-button{display:none}}input::-moz-placeholder{color:#919191;opacity:1}input:-ms-input-placeholder,input::-ms-input-placeholder{color:#919191}svg.s12{width:12px;height:12px}svg.s16{width:16px;height:16px}svg.s18{width:18px;height:18px}.feature-highlight-popover-sub-content{padding:16px 12px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}.color-label{padding:0 .5rem;line-height:16px;border-radius:100px;color:#fff}.label-link{display:inline-flex;vertical-align:text-bottom}.milestones{padding:8px;margin-top:8px;border-radius:4px;background-color:#dbdbdb}.search{margin:0 8px}@media (min-width:1200px){.search form{width:320px}}.search .search-input{border:0;font-size:14px;padding:0 20px 0 0;margin-left:5px;line-height:25px;width:98%;color:#fff;background:0 0}.search .search-input-container{display:flex;position:relative}.search .search-input-wrap{width:100%}.search .search-input-wrap .clear-icon,.search .search-input-wrap .search-icon{position:absolute;right:5px;top:4px}.search .search-input-wrap .search-icon{-moz-user-select:none;user-select:none}.search .search-input-wrap .clear-icon{display:none}.search .search-input-wrap .dropdown{position:static}.search .search-input-wrap .dropdown-menu{left:-5px;max-height:400px;overflow:auto}@media (min-width:1200px){.search .search-input-wrap .dropdown-menu{width:320px}}.search .search-input-wrap .dropdown-content{max-height:382px}.search .identicon{flex-basis:16px;flex-shrink:0;margin-right:4px}.settings{border-top:1px solid #dbdbdb}.settings:first-of-type{margin-top:10px;border:0}.settings+div .settings:first-of-type{margin-top:0;border-top:1px solid #dbdbdb}.avatar,.avatar-container{float:left;margin-right:16px;border-radius:50%;border:1px solid #f5f5f5}.s16.avatar,.s16.avatar-container{width:16px;height:16px;margin-right:8px}.s18.avatar,.s18.avatar-container{width:18px;height:18px;margin-right:8px}.s40.avatar,.s40.avatar-container{width:40px;height:40px;margin-right:8px}.avatar{transition-property:none;width:40px;height:40px;padding:0;background:#fdfdfd;overflow:hidden;border-color:rgba(0,0,0,.1)}.avatar.center{font-size:14px;line-height:1.8em;text-align:center}.avatar.avatar-tile{border-radius:0;border:0}.identicon{text-align:center;vertical-align:top;color:#4f4f4f;background-color:#eee}.identicon.s16{font-size:10px;line-height:16px}.identicon.s40{font-size:16px;line-height:38px}.avatar-container{overflow:hidden;display:flex}.avatar-container a{width:100%;height:100%;display:flex;text-decoration:none}.avatar-container .avatar{border-radius:0;border:0;height:auto;width:100%;margin:0;align-self:center}.avatar-container.s40{min-width:40px;min-height:40px}.rect-avatar,.rect-avatar.s16,.rect-avatar.s18{border-radius:2px}.rect-avatar.s40{border-radius:4px}.tab-width-8{-moz-tab-size:8;tab-size:8}.gl-sr-only{border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.gl-ml-3{margin-left:.5rem}
+@charset "UTF-8";
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+html {
+  font-family: sans-serif;
+  line-height: 1.15;
+}
+ header, nav, section {
+  display: block;
+}
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", Ubuntu, Cantarell, "Helvetica Neue", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  font-size: 1rem;
+  font-weight: 400;
+  line-height: 1.5;
+  color: #303030;
+  text-align: left;
+  background-color: #fff;
+}
+h1, h2, h3 {
+  margin-top: 0;
+  margin-bottom: 0.25rem;
+}
+p {
+  margin-top: 0;
+  margin-bottom: 1rem;
+}
 
-/* Cloaking in order to prevent flickering of content */
+ul {
+  margin-top: 0;
+  margin-bottom: 1rem;
+}
+
+ul ul {
+  margin-bottom: 0;
+}
+
+strong {
+  font-weight: bolder;
+}
+sub {
+  position: relative;
+  font-size: 75%;
+  line-height: 0;
+  vertical-align: baseline;
+}
+sub {
+  bottom: -.25em;
+}
+a {
+  color: #007bff;
+  text-decoration: none;
+  background-color: transparent;
+}
+a:not([href]) {
+  color: inherit;
+  text-decoration: none;
+}
+pre,
+code {
+  font-family: "Menlo", "DejaVu Sans Mono", "Liberation Mono", "Consolas", "Ubuntu Mono", "Courier New", "andale mono", "lucida console", monospace;
+  font-size: 1em;
+}
+pre {
+  margin-top: 0;
+  margin-bottom: 1rem;
+  overflow: auto;
+}
+img {
+  vertical-align: middle;
+  border-style: none;
+}
+svg {
+  overflow: hidden;
+  vertical-align: middle;
+}
+table {
+  border-collapse: collapse;
+}
+th {
+  text-align: inherit;
+}
+button {
+  border-radius: 0;
+}
+input,
+button,
+textarea {
+  margin: 0;
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+}
+button,
+input {
+  overflow: visible;
+}
+button {
+  text-transform: none;
+}
+button:not(:disabled),
+[type="button"]:not(:disabled),
+[type="reset"]:not(:disabled) {
+  cursor: pointer;
+}
+button::-moz-focus-inner,
+[type="button"]::-moz-focus-inner,
+[type="reset"]::-moz-focus-inner {
+  padding: 0;
+  border-style: none;
+}
+textarea {
+  overflow: auto;
+  resize: vertical;
+}
+[type="search"] {
+  outline-offset: -2px;
+}
+summary {
+  display: list-item;
+  cursor: pointer;
+}
+template {
+  display: none;
+}
+[hidden] {
+  display: none !important;
+}
+h1, h2, h3,
+.h1, .h2, .h3 {
+  margin-bottom: 0.25rem;
+  font-weight: 600;
+  line-height: 1.2;
+  color: #303030;
+}
+h1, .h1 {
+  font-size: 2.1875rem;
+}
+h2, .h2 {
+  font-size: 1.75rem;
+}
+h3, .h3 {
+  font-size: 1.53125rem;
+}
+.list-unstyled {
+  padding-left: 0;
+  list-style: none;
+}
+code {
+  font-size: 90%;
+  color: #1f1f1f;
+  word-wrap: break-word;
+}
+a > code {
+  color: inherit;
+}
+pre {
+  display: block;
+  font-size: 90%;
+  color: #303030;
+}
+pre code {
+  font-size: inherit;
+  color: inherit;
+  word-break: normal;
+}
+.container {
+  width: 100%;
+  padding-right: 15px;
+  padding-left: 15px;
+  margin-right: auto;
+  margin-left: auto;
+}
+
+@media (min-width: 576px) {
+  .container {
+    max-width: 540px;
+  }
+}
+
+@media (min-width: 768px) {
+  .container {
+    max-width: 720px;
+  }
+}
+
+@media (min-width: 992px) {
+  .container {
+    max-width: 960px;
+  }
+}
+
+@media (min-width: 1200px) {
+  .container {
+    max-width: 1140px;
+  }
+}
+.container-fluid {
+  width: 100%;
+  padding-right: 15px;
+  padding-left: 15px;
+  margin-right: auto;
+  margin-left: auto;
+}
+
+@media (min-width: 576px) {
+  .container {
+    max-width: 540px;
+  }
+}
+
+@media (min-width: 768px) {
+  .container {
+    max-width: 720px;
+  }
+}
+
+@media (min-width: 992px) {
+  .container {
+    max-width: 960px;
+  }
+}
+
+@media (min-width: 1200px) {
+  .container {
+    max-width: 1140px;
+  }
+}
+.row {
+  display: flex;
+  flex-wrap: wrap;
+  margin-right: -15px;
+  margin-left: -15px;
+}
+.table {
+  width: 100%;
+  margin-bottom: 0.5rem;
+  color: #303030;
+}
+.table th,
+.table td {
+  padding: 0.75rem;
+  vertical-align: top;
+  border-top: 1px solid #dbdbdb;
+}
+ .search form {
+  display: block;
+  width: 100%;
+  height: 34px;
+  padding: 0.375rem 0.75rem;
+  font-size: 0.875rem;
+  font-weight: 400;
+  line-height: 1.5;
+  color: #303030;
+  background-color: #fff;
+  background-clip: padding-box;
+  border: 1px solid #dbdbdb;
+  border-radius: 0.25rem;
+}
+
+@media (prefers-reduced-motion: reduce) {
+}
+ .search form:-moz-focusring {
+  color: transparent;
+  text-shadow: 0 0 0 #303030;
+}
+ .search form::placeholder {
+  color: #5e5e5e;
+  opacity: 1;
+}
+ .search form:disabled {
+  background-color: #fafafa;
+  opacity: 1;
+}
+.form-inline {
+  display: flex;
+  flex-flow: row wrap;
+  align-items: center;
+}
+
+@media (min-width: 576px) {
+   .form-inline .search form, .search .form-inline form {
+    display: inline-block;
+    width: auto;
+    vertical-align: middle;
+  }
+}
+.btn {
+  display: inline-block;
+  font-weight: 400;
+  color: #303030;
+  text-align: center;
+  vertical-align: middle;
+  cursor: pointer;
+  user-select: none;
+  background-color: transparent;
+  border: 1px solid transparent;
+  padding: 0.375rem 0.75rem;
+  font-size: 1rem;
+  line-height: 20px;
+  border-radius: 0.25rem;
+}
+
+@media (prefers-reduced-motion: reduce) {
+}
+.btn.disabled, .btn:disabled {
+  opacity: 0.65;
+}
+a.btn.disabled {
+  pointer-events: none;
+}
+.collapse:not(.show) {
+  display: none;
+}
+
+.dropdown {
+  position: relative;
+}
+ .dropdown-menu-toggle {
+  white-space: nowrap;
+}
+ .dropdown-menu-toggle::after {
+  display: inline-block;
+  margin-left: 0.255em;
+  vertical-align: 0.255em;
+  content: "";
+  border-top: 0.3em solid;
+  border-right: 0.3em solid transparent;
+  border-bottom: 0;
+  border-left: 0.3em solid transparent;
+}
+ .dropdown-menu-toggle:empty::after {
+  margin-left: 0;
+}
+.dropdown-menu {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  z-index: 1000;
+  display: none;
+  float: left;
+  min-width: 10rem;
+  padding: 0.5rem 0;
+  margin: 0.125rem 0 0;
+  font-size: 1rem;
+  color: #303030;
+  text-align: left;
+  list-style: none;
+  background-color: #fff;
+  background-clip: padding-box;
+  border: 1px solid rgba(0, 0, 0, 0.15);
+  border-radius: 0.25rem;
+}
+.dropdown-menu-right {
+  right: 0;
+  left: auto;
+}
+ .divider {
+  height: 0;
+  margin: 4px 0;
+  overflow: hidden;
+  border-top: 1px solid #dbdbdb;
+}
+.dropdown-menu.show {
+  display: block;
+}
+.nav {
+  display: flex;
+  flex-wrap: wrap;
+  padding-left: 0;
+  margin-bottom: 0;
+  list-style: none;
+}
+.navbar {
+  position: relative;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.25rem 0.5rem;
+}
+.navbar .container,
+.navbar .container-fluid {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+}
+.navbar-nav {
+  display: flex;
+  flex-direction: column;
+  padding-left: 0;
+  margin-bottom: 0;
+  list-style: none;
+}
+.navbar-nav .dropdown-menu {
+  position: static;
+  float: none;
+}
+.navbar-collapse {
+  flex-basis: 100%;
+  flex-grow: 1;
+  align-items: center;
+}
+.navbar-toggler {
+  padding: 0.25rem 0.75rem;
+  font-size: 1.25rem;
+  line-height: 1;
+  background-color: transparent;
+  border: 1px solid transparent;
+  border-radius: 0.25rem;
+}
+
+@media (max-width: 575.98px) {
+  .navbar-expand-sm > .container,
+  .navbar-expand-sm > .container-fluid {
+    padding-right: 0;
+    padding-left: 0;
+  }
+}
+
+@media (min-width: 576px) {
+  .navbar-expand-sm {
+    flex-flow: row nowrap;
+    justify-content: flex-start;
+  }
+  .navbar-expand-sm .navbar-nav {
+    flex-direction: row;
+  }
+  .navbar-expand-sm .navbar-nav .dropdown-menu {
+    position: absolute;
+  }
+  .navbar-expand-sm > .container,
+  .navbar-expand-sm > .container-fluid {
+    flex-wrap: nowrap;
+  }
+  .navbar-expand-sm .navbar-collapse {
+    display: flex !important;
+    flex-basis: auto;
+  }
+  .navbar-expand-sm .navbar-toggler {
+    display: none;
+  }
+}
+.card {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  word-wrap: break-word;
+  background-color: #fff;
+  background-clip: border-box;
+  border: 1px solid #dbdbdb;
+  border-radius: 0.25rem;
+}
+.badge {
+  display: inline-block;
+  padding: 0.25em 0.4em;
+  font-size: 75%;
+  font-weight: 600;
+  line-height: 1;
+  text-align: center;
+  white-space: nowrap;
+  vertical-align: baseline;
+  border-radius: 0.25rem;
+}
+
+@media (prefers-reduced-motion: reduce) {
+}
+.badge:empty {
+  display: none;
+}
+.btn .badge {
+  position: relative;
+  top: -1px;
+}
+.badge-pill {
+  padding-right: 0.6em;
+  padding-left: 0.6em;
+  border-radius: 10rem;
+}
+.media {
+  display: flex;
+  align-items: flex-start;
+}
+.close {
+  float: right;
+  font-size: 1.5rem;
+  font-weight: 600;
+  line-height: 1;
+  color: #000;
+  text-shadow: 0 1px 0 #fff;
+  opacity: .5;
+}
+button.close {
+  padding: 0;
+  background-color: transparent;
+  border: 0;
+  appearance: none;
+}
+a.close.disabled {
+  pointer-events: none;
+}
+.modal-dialog {
+  position: relative;
+  width: auto;
+  margin: 0.5rem;
+  pointer-events: none;
+}
+
+@media (min-width: 576px) {
+  .modal-dialog {
+    max-width: 500px;
+    margin: 1.75rem auto;
+  }
+}
+.bg-transparent {
+  background-color: transparent !important;
+}
+.border {
+  border: 1px solid #dbdbdb !important;
+}
+.border-top {
+  border-top: 1px solid #dbdbdb !important;
+}
+.border-right {
+  border-right: 1px solid #dbdbdb !important;
+}
+.border-bottom {
+  border-bottom: 1px solid #dbdbdb !important;
+}
+.border-left {
+  border-left: 1px solid #dbdbdb !important;
+}
+.rounded {
+  border-radius: 0.25rem !important;
+}
+.clearfix::after {
+  display: block;
+  clear: both;
+  content: "";
+}
+.d-none {
+  display: none !important;
+}
+.d-inline-block {
+  display: inline-block !important;
+}
+.d-block {
+  display: block !important;
+}
+
+@media (min-width: 576px) {
+  .d-sm-none {
+    display: none !important;
+  }
+}
+
+@media (min-width: 768px) {
+  .d-md-block {
+    display: block !important;
+  }
+}
+
+@media (min-width: 992px) {
+  .d-lg-none {
+    display: none !important;
+  }
+  .d-lg-block {
+    display: block !important;
+  }
+}
+
+@media (min-width: 1200px) {
+  .d-xl-block {
+    display: block !important;
+  }
+}
+.flex-wrap {
+  flex-wrap: wrap !important;
+}
+.float-right {
+  float: right !important;
+}
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+.m-auto {
+  margin: auto !important;
+}
+.text-nowrap {
+  white-space: nowrap !important;
+}
+.visible {
+  visibility: visible !important;
+}
+ .search form.focus {
+  color: #303030;
+  background-color: #fff;
+  border-color: #80bdff;
+  outline: 0;
+  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
+}
+.gl-badge {
+  display: inline-flex;
+  align-items: center;
+  font-size: 0.75rem;
+  font-weight: 400;
+  line-height: 1rem;
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+  outline: none;
+}
+body, .search form,
+.search form {
+  font-size: 0.875rem;
+}
+button,
+html [type='button'],
+[type='reset'],
+[role='button'] {
+  cursor: pointer;
+}
+h1,
+.h1,
+h2,
+.h2,
+h3,
+.h3 {
+  margin-top: 20px;
+  margin-bottom: 10px;
+}
+input[type='file'] {
+  line-height: 1;
+}
+
+strong {
+  font-weight: bold;
+}
+a {
+  color: #1068bf;
+}
+code {
+  padding: 2px 4px;
+  color: #1f1f1f;
+  background-color: #f0f0f0;
+  border-radius: 4px;
+}
+.code > code {
+  background-color: inherit;
+  padding: unset;
+}
+table {
+  border-spacing: 0;
+}
+.hidden {
+  display: none !important;
+  visibility: hidden !important;
+}
+.hide {
+  display: none;
+}
+ .dropdown-menu-toggle::after {
+  display: none;
+}
+.badge:not(.gl-badge) {
+  padding: 4px 5px;
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 400;
+  display: inline-block;
+}
+pre code {
+  white-space: pre-wrap;
+}
+.toggle-sidebar-button .collapse-text,
+.toggle-sidebar-button .icon-chevron-double-lg-left,
+.toggle-sidebar-button .icon-chevron-double-lg-right {
+  color: #666;
+}
+svg {
+  vertical-align: baseline;
+}
+html {
+  overflow-y: scroll;
+}
+body {
+  text-decoration-skip: ink;
+}
+.content-wrapper {
+  margin-top: 40px;
+  padding-bottom: 100px;
+}
+.container {
+  padding-top: 0;
+  z-index: 5;
+}
+.container .content {
+  margin: 0;
+}
+
+@media (max-width: 575.98px) {
+  .container .content {
+    margin-top: 20px;
+  }
+}
+
+@media (max-width: 575.98px) {
+  .container .container .title {
+    padding-left: 15px !important;
+  }
+}
+.btn {
+  border-radius: 4px;
+  font-size: 0.875rem;
+  font-weight: 400;
+  padding: 6px 10px;
+  background-color: #fff;
+  border-color: #dbdbdb;
+  color: #303030;
+  color: #303030;
+  white-space: nowrap;
+}
+.btn:active, .btn.active {
+  box-shadow: rgba(0, 0, 0, 0.16);
+  background-color: #eaeaea;
+  border-color: #e3e3e3;
+  color: #303030;
+}
+.btn svg {
+  height: 15px;
+  width: 15px;
+}
+.btn svg:not(:last-child),
+.btn .fa:not(:last-child) {
+  margin-right: 5px;
+}
+.badge.badge-pill:not(.gl-badge) {
+  font-weight: 400;
+  background-color: rgba(0, 0, 0, 0.07);
+  color: #525252;
+  vertical-align: baseline;
+}
+.hint {
+  font-style: italic;
+  color: #bfbfbf;
+}
+.bold {
+  font-weight: 600;
+}
+pre.wrap {
+  word-break: break-word;
+  white-space: pre-wrap;
+}
+table a code {
+  position: relative;
+  top: -2px;
+  margin-right: 3px;
+}
+.loading {
+  margin: 20px auto;
+  height: 40px;
+  color: #525252;
+  font-size: 32px;
+  text-align: center;
+}
+.highlight {
+  text-shadow: none;
+}
+.chart {
+  overflow: hidden;
+  height: 220px;
+}
+.break-word {
+  word-wrap: break-word;
+}
+.center {
+  text-align: center;
+}
+.block {
+  display: block;
+}
+.flex {
+  display: flex;
+}
+.flex-grow {
+  flex-grow: 1;
+}
+.dropdown {
+  position: relative;
+}
+.show.dropdown .dropdown-menu {
+  transform: translateY(0);
+  display: block;
+  min-height: 40px;
+  max-height: 312px;
+  overflow-y: auto;
+}
+
+@media (max-width: 575.98px) {
+  .show.dropdown .dropdown-menu {
+    width: 100%;
+  }
+}
+ .show.dropdown .dropdown-menu-toggle,
+.show.dropdown .dropdown-menu-toggle {
+  border-color: #c4c4c4;
+}
+.show.dropdown [data-toggle='dropdown'] {
+  outline: 0;
+}
+.search-input-container .dropdown-menu {
+  margin-top: 11px;
+}
+ .dropdown-menu-toggle {
+  padding: 6px 8px 6px 10px;
+  background-color: #fff;
+  color: #303030;
+  font-size: 14px;
+  text-align: left;
+  border: 1px solid #dbdbdb;
+  border-radius: 0.25rem;
+  white-space: nowrap;
+}
+ .no-outline.dropdown-menu-toggle {
+  outline: 0;
+}
+ .dropdown-menu-toggle .fa {
+  color: #c4c4c4;
+}
+.dropdown-menu-toggle {
+  padding-right: 25px;
+  position: relative;
+  width: 160px;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+.dropdown-menu-toggle .fa {
+  position: absolute;
+}
+.dropdown-menu {
+  display: none;
+  position: absolute;
+  width: auto;
+  top: 100%;
+  z-index: 300;
+  min-width: 240px;
+  max-width: 500px;
+  margin-top: 4px;
+  margin-bottom: 24px;
+  font-size: 14px;
+  font-weight: 400;
+  padding: 8px 0;
+  background-color: #fff;
+  border: 1px solid #dbdbdb;
+  border-radius: 0.25rem;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+.dropdown-menu ul {
+  margin: 0;
+  padding: 0;
+}
+.dropdown-menu li {
+  display: block;
+  text-align: left;
+  list-style: none;
+  padding: 0 1px;
+}
+.dropdown-menu li > a,
+.dropdown-menu li button {
+  background: transparent;
+  border: 0;
+  border-radius: 0;
+  box-shadow: none;
+  display: block;
+  font-weight: 400;
+  position: relative;
+  padding: 8px 12px;
+  color: #303030;
+  line-height: 16px;
+  white-space: normal;
+  overflow: hidden;
+  text-align: left;
+  width: 100%;
+}
+.dropdown-menu .divider {
+  height: 1px;
+  margin: 0.25rem 0;
+  padding: 0;
+  background-color: #dbdbdb;
+}
+.dropdown-menu .badge.badge-pill + span:not(.badge.badge-pill) {
+  margin-right: 40px;
+}
+.dropdown-select {
+  width: 300px;
+}
+
+@media (max-width: 767.98px) {
+  .dropdown-select {
+    width: 100%;
+  }
+}
+.dropdown-content {
+  max-height: 252px;
+  overflow-y: auto;
+}
+.dropdown-loading {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  display: none;
+  z-index: 9;
+  background-color: rgba(255, 255, 255, 0.6);
+  font-size: 28px;
+}
+.dropdown-loading .fa {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  margin-top: -14px;
+  margin-left: -14px;
+}
+
+@media (max-width: 575.98px) {
+  .navbar-gitlab li.dropdown {
+    position: static;
+  }
+  header.navbar-gitlab .dropdown .dropdown-menu {
+    width: 100%;
+    min-width: 100%;
+  }
+}
+
+@media (max-width: 767.98px) {
+  .dropdown-menu-toggle {
+    width: 100%;
+  }
+}
+textarea {
+  resize: vertical;
+}
+input {
+  border-radius: 0.25rem;
+  color: #303030;
+  background-color: #fff;
+}
+ .search form {
+  border-radius: 4px;
+  padding: 6px 10px;
+}
+ .search form::placeholder {
+  color: #868686;
+}
+.navbar-gitlab {
+  padding: 0 16px;
+  z-index: 1000;
+  margin-bottom: 0;
+  min-height: 40px;
+  border: 0;
+  border-bottom: 1px solid #dbdbdb;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  border-radius: 0;
+}
+.navbar-gitlab .logo-text {
+  line-height: initial;
+}
+.navbar-gitlab .logo-text svg {
+  width: 55px;
+  height: 14px;
+  margin: 0;
+  fill: #fff;
+}
+.navbar-gitlab .close-icon {
+  display: none;
+}
+.navbar-gitlab .header-content {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  position: relative;
+  min-height: 40px;
+  padding-left: 0;
+}
+.navbar-gitlab .header-content .title-container {
+  display: flex;
+  align-items: stretch;
+  flex: 1 1 auto;
+  padding-top: 0;
+  overflow: visible;
+}
+.navbar-gitlab .header-content .title {
+  padding-right: 0;
+  color: currentColor;
+  display: flex;
+  position: relative;
+  margin: 0;
+  font-size: 18px;
+  vertical-align: top;
+  white-space: nowrap;
+}
+.navbar-gitlab .header-content .title img {
+  height: 28px;
+}
+.navbar-gitlab .header-content .title img + .logo-text {
+  margin-left: 8px;
+}
+.navbar-gitlab .header-content .title.wrap {
+  white-space: normal;
+}
+.navbar-gitlab .header-content .title a {
+  display: flex;
+  align-items: center;
+  padding: 2px 8px;
+  margin: 5px 2px 5px -8px;
+  border-radius: 4px;
+}
+.navbar-gitlab .header-content .dropdown.open > a {
+  border-bottom-color: #fff;
+}
+.navbar-gitlab .header-content .navbar-collapse > ul.nav > li:not(.d-none) {
+  margin: 0 2px;
+}
+.navbar-gitlab .navbar-collapse {
+  flex: 0 0 auto;
+  border-top: 0;
+  padding: 0;
+}
+
+@media (max-width: 575.98px) {
+  .navbar-gitlab .navbar-collapse {
+    flex: 1 1 auto;
+  }
+}
+.navbar-gitlab .navbar-collapse .nav {
+  flex-wrap: nowrap;
+}
+
+@media (max-width: 575.98px) {
+  .navbar-gitlab .navbar-collapse .nav > li:not(.d-none) a {
+    margin-left: 0;
+  }
+}
+.navbar-gitlab .container-fluid {
+  padding: 0;
+}
+.navbar-gitlab .container-fluid .user-counter svg {
+  margin-right: 3px;
+}
+.navbar-gitlab .container-fluid .navbar-toggler {
+  position: relative;
+  right: -10px;
+  border-radius: 0;
+  min-width: 45px;
+  padding: 0;
+  margin: 8px -7px 8px 0;
+  font-size: 14px;
+  text-align: center;
+  color: currentColor;
+}
+
+@media (max-width: 575.98px) {
+  .navbar-gitlab .container-fluid .navbar-nav {
+    display: flex;
+    padding-right: 10px;
+    flex-direction: row;
+  }
+}
+.navbar-gitlab .container-fluid .navbar-nav li .badge.badge-pill {
+  box-shadow: none;
+  font-weight: 600;
+}
+
+@media (max-width: 575.98px) {
+  .navbar-gitlab .container-fluid .nav > li.header-user {
+    padding-left: 10px;
+  }
+}
+.navbar-gitlab .container-fluid .nav > li > a {
+  will-change: color;
+  margin: 4px 0;
+  padding: 6px 8px;
+  height: 32px;
+}
+
+@media (max-width: 575.98px) {
+  .navbar-gitlab .container-fluid .nav > li > a {
+    padding: 0;
+  }
+}
+.navbar-gitlab .container-fluid .nav > li > a.header-user-dropdown-toggle {
+  margin-left: 2px;
+}
+.navbar-gitlab .container-fluid .nav > li > a.header-user-dropdown-toggle .header-user-avatar {
+  margin-right: 0;
+}
+.navbar-gitlab .container-fluid .nav > li .header-new-dropdown-toggle {
+  margin-right: 0;
+}
+.navbar-sub-nav > li > a,
+.navbar-sub-nav > li > button,
+.navbar-nav > li > a,
+.navbar-nav > li > button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 6px 8px;
+  margin: 4px 2px;
+  font-size: 12px;
+  color: currentColor;
+  border-radius: 4px;
+  height: 32px;
+  font-weight: 600;
+}
+.navbar-sub-nav > li > button,
+.navbar-nav > li > button {
+  background: transparent;
+  border: 0;
+}
+.navbar-sub-nav .dropdown-menu,
+.navbar-nav .dropdown-menu {
+  position: absolute;
+}
+.navbar-sub-nav {
+  display: flex;
+  margin: 0 0 0 6px;
+}
+.caret-down,
+.btn .caret-down {
+  top: 0;
+  height: 11px;
+  width: 11px;
+  margin-left: 4px;
+  fill: currentColor;
+}
+.header-user .dropdown-menu,
+.header-new .dropdown-menu {
+  margin-top: 4px;
+}
+.btn-sign-in {
+  background-color: #ebebfa;
+  color: #292961;
+  font-weight: 600;
+  line-height: 18px;
+  margin: 4px 0 4px 2px;
+}
+.title-container .badge.badge-pill,
+.navbar-nav .badge.badge-pill {
+  position: inherit;
+  font-weight: 400;
+  margin-left: -6px;
+  font-size: 11px;
+  color: #fff;
+  padding: 0 5px;
+  line-height: 12px;
+  border-radius: 7px;
+  box-shadow: 0 1px 0 rgba(76, 78, 84, 0.2);
+}
+.title-container .badge.badge-pill.green-badge,
+.navbar-nav .badge.badge-pill.green-badge {
+  background-color: #108548;
+}
+.title-container .badge.badge-pill.merge-requests-count,
+.navbar-nav .badge.badge-pill.merge-requests-count {
+  background-color: #de7e00;
+}
+.title-container .badge.badge-pill.todos-count,
+.navbar-nav .badge.badge-pill.todos-count {
+  background-color: #1f75cb;
+}
+.title-container .canary-badge .badge,
+.navbar-nav .canary-badge .badge {
+  font-size: 12px;
+  line-height: 16px;
+  padding: 0 0.5rem;
+}
+
+@media (max-width: 575.98px) {
+  .navbar-gitlab .container-fluid {
+    font-size: 18px;
+  }
+  .navbar-gitlab .container-fluid .navbar-nav {
+    table-layout: fixed;
+    width: 100%;
+    margin: 0;
+    text-align: right;
+  }
+  .navbar-gitlab .container-fluid .navbar-collapse {
+    margin-left: -8px;
+    margin-right: -10px;
+  }
+  .navbar-gitlab .container-fluid .navbar-collapse .nav > li:not(.d-none) {
+    flex: 1;
+  }
+  .header-user-dropdown-toggle {
+    text-align: center;
+  }
+  .header-user-avatar {
+    float: none;
+  }
+}
+.header-user.show .dropdown-menu {
+  margin-top: 4px;
+  color: #303030;
+  left: auto;
+  max-height: 445px;
+}
+.header-user.show .dropdown-menu svg {
+  vertical-align: text-top;
+}
+.header-user-avatar {
+  float: left;
+  margin-right: 5px;
+  border-radius: 50%;
+  border: 1px solid #f5f5f5;
+}
+.media {
+  display: flex;
+  align-items: flex-start;
+}
+.card {
+  margin-bottom: 16px;
+}
+.content-wrapper {
+  width: 100%;
+}
+.content-wrapper .container-fluid {
+  padding: 0 16px;
+}
+
+@media (min-width: 768px) {
+  .page-with-contextual-sidebar {
+    padding-left: 50px;
+  }
+}
+
+@media (min-width: 1200px) {
+  .page-with-contextual-sidebar {
+    padding-left: 220px;
+  }
+}
+.context-header {
+  position: relative;
+  margin-right: 2px;
+  width: 220px;
+}
+.context-header > a,
+.context-header > button {
+  font-weight: 600;
+  display: flex;
+  width: 100%;
+  align-items: center;
+  padding: 10px 16px 10px 10px;
+  color: #303030;
+  background-color: transparent;
+  border: 0;
+  text-align: left;
+}
+.context-header .avatar-container {
+  flex: 0 0 40px;
+  background-color: #fff;
+}
+.context-header .sidebar-context-title {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.context-header .sidebar-context-title.text-secondary {
+  font-weight: normal;
+  font-size: 0.8em;
+}
+.nav-sidebar {
+  position: fixed;
+  z-index: 600;
+  width: 220px;
+  top: 40px;
+  bottom: 0;
+  left: 0;
+  background-color: #fafafa;
+  box-shadow: inset -1px 0 0 #dbdbdb;
+  transform: translate3d(0, 0, 0);
+}
+
+@media (min-width: 576px) and (max-width: 576px) {
+  .nav-sidebar:not(.sidebar-collapsed-desktop) {
+    box-shadow: inset -1px 0 0 #dbdbdb, 2px 1px 3px rgba(0, 0, 0, 0.1);
+  }
+}
+.nav-sidebar.sidebar-collapsed-desktop {
+  width: 50px;
+}
+.nav-sidebar.sidebar-collapsed-desktop .nav-sidebar-inner-scroll {
+  overflow-x: hidden;
+}
+.nav-sidebar.sidebar-collapsed-desktop .badge.badge-pill:not(.fly-out-badge),
+.nav-sidebar.sidebar-collapsed-desktop .sidebar-context-title,
+.nav-sidebar.sidebar-collapsed-desktop .nav-item-name {
+  border: 0;
+  clip: rect(0, 0, 0, 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}
+.nav-sidebar.sidebar-collapsed-desktop .sidebar-top-level-items > li > a {
+  min-height: 45px;
+}
+.nav-sidebar.sidebar-collapsed-desktop .fly-out-top-item {
+  display: block;
+}
+.nav-sidebar.sidebar-collapsed-desktop .avatar-container {
+  margin: 0 auto;
+}
+.nav-sidebar.sidebar-expanded-mobile {
+  left: 0;
+}
+.nav-sidebar a {
+  text-decoration: none;
+}
+.nav-sidebar ul {
+  padding-left: 0;
+  list-style: none;
+}
+.nav-sidebar li {
+  white-space: nowrap;
+}
+.nav-sidebar li a {
+  display: flex;
+  align-items: center;
+  padding: 12px 16px;
+  color: #666;
+}
+.nav-sidebar li .nav-item-name {
+  flex: 1;
+}
+.nav-sidebar li.active > a {
+  font-weight: 600;
+}
+
+@media (max-width: 767.98px) {
+  .nav-sidebar {
+    left: -220px;
+  }
+}
+.nav-sidebar .nav-icon-container {
+  display: flex;
+  margin-right: 8px;
+}
+.nav-sidebar .fly-out-top-item {
+  display: none;
+}
+.nav-sidebar svg {
+  height: 16px;
+  width: 16px;
+}
+
+@media (min-width: 768px) and (max-width: 1199px) {
+  .nav-sidebar:not(.sidebar-expanded-mobile) {
+    width: 50px;
+  }
+  .nav-sidebar:not(.sidebar-expanded-mobile) .nav-sidebar-inner-scroll {
+    overflow-x: hidden;
+  }
+  .nav-sidebar:not(.sidebar-expanded-mobile) .badge.badge-pill:not(.fly-out-badge),
+  .nav-sidebar:not(.sidebar-expanded-mobile) .sidebar-context-title,
+  .nav-sidebar:not(.sidebar-expanded-mobile) .nav-item-name {
+    border: 0;
+    clip: rect(0, 0, 0, 0);
+    height: 1px;
+    margin: -1px;
+    overflow: hidden;
+    padding: 0;
+    position: absolute;
+    white-space: nowrap;
+    width: 1px;
+  }
+  .nav-sidebar:not(.sidebar-expanded-mobile) .sidebar-top-level-items > li > a {
+    min-height: 45px;
+  }
+  .nav-sidebar:not(.sidebar-expanded-mobile) .fly-out-top-item {
+    display: block;
+  }
+  .nav-sidebar:not(.sidebar-expanded-mobile) .avatar-container {
+    margin: 0 auto;
+  }
+  .nav-sidebar:not(.sidebar-expanded-mobile) .context-header {
+    height: 60px;
+    width: 50px;
+  }
+  .nav-sidebar:not(.sidebar-expanded-mobile) .context-header a {
+    padding: 10px 4px;
+  }
+  .nav-sidebar:not(.sidebar-expanded-mobile) .sidebar-top-level-items > li .sidebar-sub-level-items:not(.flyout-list) {
+    display: none;
+  }
+  .nav-sidebar:not(.sidebar-expanded-mobile) .nav-icon-container {
+    margin-right: 0;
+  }
+  .nav-sidebar:not(.sidebar-expanded-mobile) .toggle-sidebar-button {
+    padding: 16px;
+    width: 49px;
+  }
+  .nav-sidebar:not(.sidebar-expanded-mobile) .toggle-sidebar-button .collapse-text,
+  .nav-sidebar:not(.sidebar-expanded-mobile) .toggle-sidebar-button .icon-chevron-double-lg-left {
+    display: none;
+  }
+  .nav-sidebar:not(.sidebar-expanded-mobile) .toggle-sidebar-button .icon-chevron-double-lg-right {
+    display: block;
+    margin: 0;
+  }
+}
+.nav-sidebar-inner-scroll {
+  height: 100%;
+  width: 100%;
+  overflow: auto;
+}
+.sidebar-sub-level-items {
+  display: none;
+  padding-bottom: 8px;
+}
+.sidebar-sub-level-items > li a {
+  padding: 8px 16px 8px 40px;
+}
+.sidebar-top-level-items {
+  margin-bottom: 60px;
+}
+
+@media (min-width: 576px) {
+  .sidebar-top-level-items > li > a {
+    margin-right: 1px;
+  }
+}
+.sidebar-top-level-items > li .badge.badge-pill {
+  background-color: rgba(0, 0, 0, 0.08);
+  color: #666;
+}
+.sidebar-top-level-items > li.active {
+  background: rgba(0, 0, 0, 0.04);
+}
+.sidebar-top-level-items > li.active > a {
+  margin-left: 4px;
+  padding-left: 12px;
+}
+.sidebar-top-level-items > li.active .badge.badge-pill {
+  font-weight: 600;
+}
+.sidebar-top-level-items > li.active .sidebar-sub-level-items:not(.is-fly-out-only) {
+  display: block;
+}
+.toggle-sidebar-button,
+.close-nav-button {
+  width: 219px;
+  position: fixed;
+  height: 48px;
+  bottom: 0;
+  padding: 0 16px;
+  background-color: #fafafa;
+  border: 0;
+  border-top: 1px solid #dbdbdb;
+  color: #666;
+  display: flex;
+  align-items: center;
+}
+.toggle-sidebar-button svg,
+.close-nav-button svg {
+  margin-right: 8px;
+}
+.toggle-sidebar-button .icon-chevron-double-lg-right,
+.close-nav-button .icon-chevron-double-lg-right {
+  display: none;
+}
+.collapse-text {
+  white-space: nowrap;
+  overflow: hidden;
+}
+.sidebar-collapsed-desktop .context-header {
+  height: 60px;
+  width: 50px;
+}
+.sidebar-collapsed-desktop .context-header a {
+  padding: 10px 4px;
+}
+.sidebar-collapsed-desktop .sidebar-top-level-items > li .sidebar-sub-level-items:not(.flyout-list) {
+  display: none;
+}
+.sidebar-collapsed-desktop .nav-icon-container {
+  margin-right: 0;
+}
+.sidebar-collapsed-desktop .toggle-sidebar-button {
+  padding: 16px;
+  width: 49px;
+}
+.sidebar-collapsed-desktop .toggle-sidebar-button .collapse-text,
+.sidebar-collapsed-desktop .toggle-sidebar-button .icon-chevron-double-lg-left {
+  display: none;
+}
+.sidebar-collapsed-desktop .toggle-sidebar-button .icon-chevron-double-lg-right {
+  display: block;
+  margin: 0;
+}
+.fly-out-top-item > a {
+  display: flex;
+}
+.fly-out-top-item .fly-out-badge {
+  margin-left: 8px;
+}
+.fly-out-top-item-name {
+  flex: 1;
+}
+.close-nav-button {
+  display: none;
+}
+
+@media (max-width: 767.98px) {
+  .close-nav-button {
+    display: flex;
+  }
+  .toggle-sidebar-button {
+    display: none;
+  }
+}
+table.table {
+  margin-bottom: 16px;
+}
+table.table .dropdown-menu a {
+  text-decoration: none;
+}
+table.table .success,
+table.table .info {
+  color: #fff;
+}
+table.table .success a:not(.btn),
+table.table .info a:not(.btn) {
+  text-decoration: underline;
+  color: #fff;
+}
+pre {
+  font-family: "Menlo", "DejaVu Sans Mono", "Liberation Mono", "Consolas", "Ubuntu Mono", "Courier New", "andale mono", "lucida console", monospace;
+  display: block;
+  padding: 8px 12px;
+  margin: 0 0 8px;
+  font-size: 13px;
+  word-break: break-all;
+  word-wrap: break-word;
+  color: #303030;
+  background-color: #fafafa;
+  border: 1px solid #dbdbdb;
+  border-radius: 2px;
+}
+.monospace {
+  font-family: "Menlo", "DejaVu Sans Mono", "Liberation Mono", "Consolas", "Ubuntu Mono", "Courier New", "andale mono", "lucida console", monospace;
+}
+input::-moz-placeholder,
+textarea::-moz-placeholder {
+  color: #868686;
+  opacity: 1;
+}
+input::-ms-input-placeholder,
+textarea::-ms-input-placeholder {
+  color: #868686;
+}
+input:-ms-input-placeholder,
+textarea:-ms-input-placeholder {
+  color: #868686;
+}
+svg {
+  fill: currentColor;
+}
+
+svg.s12 {
+  width: 12px;
+  height: 12px;
+}
+
+svg.s16 {
+  width: 16px;
+  height: 16px;
+}
+
+svg.s18 {
+  width: 18px;
+  height: 18px;
+}
+
+svg.s12 {
+  vertical-align: -1px;
+}
+
+svg.s16 {
+  vertical-align: -3px;
+}
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
+}
+table.code {
+  width: 100%;
+  font-family: "Menlo", "DejaVu Sans Mono", "Liberation Mono", "Consolas", "Ubuntu Mono", "Courier New", "andale mono", "lucida console", monospace;
+  border: 0;
+  border-collapse: separate;
+  margin: 0;
+  padding: 0;
+  table-layout: fixed;
+  border-radius: 0 0 4px 4px;
+}
+.frame .badge.badge-pill {
+  position: absolute;
+  background-color: #428fdc;
+  color: #fff;
+  border: #fff 1px solid;
+  min-height: 16px;
+  padding: 5px 8px;
+  border-radius: 12px;
+}
+.frame .badge.badge-pill {
+  transform: translate(-50%, -50%);
+}
+.color-label {
+  padding: 0 0.5rem;
+  line-height: 16px;
+  border-radius: 100px;
+  color: #fff;
+}
+.label-link {
+  display: inline-flex;
+  vertical-align: text-bottom;
+}
+.milestones {
+  padding: 8px;
+  margin-top: 8px;
+  border-radius: 4px;
+  background-color: #dbdbdb;
+}
+.search {
+  margin: 0 8px;
+}
+.search form {
+  margin: 0;
+  padding: 4px;
+  width: 200px;
+  line-height: 24px;
+  height: 32px;
+  border: 0;
+  border-radius: 4px;
+}
+
+@media (min-width: 1200px) {
+  .search form {
+    width: 320px;
+  }
+}
+.search .search-input {
+  border: 0;
+  font-size: 14px;
+  padding: 0 20px 0 0;
+  margin-left: 5px;
+  line-height: 25px;
+  width: 98%;
+  color: #fff;
+  background: none;
+}
+.search .search-input-container {
+  display: flex;
+  position: relative;
+}
+.search .search-input-wrap {
+  width: 100%;
+}
+.search .search-input-wrap .search-icon,
+.search .search-input-wrap .clear-icon {
+  position: absolute;
+  right: 5px;
+  top: 4px;
+}
+.search .search-input-wrap .search-icon {
+  -moz-user-select: none;
+  user-select: none;
+}
+.search .search-input-wrap .clear-icon {
+  display: none;
+}
+.search .search-input-wrap .dropdown {
+  position: static;
+}
+.search .search-input-wrap .dropdown-menu {
+  left: -5px;
+  max-height: 400px;
+  overflow: auto;
+}
+
+@media (min-width: 1200px) {
+  .search .search-input-wrap .dropdown-menu {
+    width: 320px;
+  }
+}
+.search .search-input-wrap .dropdown-content {
+  max-height: 382px;
+}
+.settings {
+  border-top: 1px solid #dbdbdb;
+}
+.settings:first-of-type {
+  margin-top: 10px;
+  border: 0;
+}
+.settings + div .settings:first-of-type {
+  margin-top: 0;
+  border-top: 1px solid #dbdbdb;
+}
+.avatar, .avatar-container {
+  float: left;
+  margin-right: 16px;
+  border-radius: 50%;
+  border: 1px solid #f5f5f5;
+}
+.s16.avatar, .s16.avatar-container {
+  width: 16px;
+  height: 16px;
+  margin-right: 8px;
+}
+.s18.avatar, .s18.avatar-container {
+  width: 18px;
+  height: 18px;
+  margin-right: 8px;
+}
+.s40.avatar, .s40.avatar-container {
+  width: 40px;
+  height: 40px;
+  margin-right: 8px;
+}
+.avatar {
+  transition-property: none;
+  width: 40px;
+  height: 40px;
+  padding: 0;
+  background: #fdfdfd;
+  overflow: hidden;
+  border-color: rgba(0, 0, 0, 0.1);
+}
+.avatar.center {
+  font-size: 14px;
+  line-height: 1.8em;
+  text-align: center;
+}
+.avatar.avatar-tile {
+  border-radius: 0;
+  border: 0;
+}
+.avatar-container {
+  overflow: hidden;
+  display: flex;
+}
+.avatar-container a {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  text-decoration: none;
+}
+.avatar-container .avatar {
+  border-radius: 0;
+  border: 0;
+  height: auto;
+  width: 100%;
+  margin: 0;
+  align-self: center;
+}
+.avatar-container.s40 {
+  min-width: 40px;
+  min-height: 40px;
+}
+.rect-avatar {
+  border-radius: 2px;
+}
+.rect-avatar.s16 {
+  border-radius: 2px;
+}
+.rect-avatar.s18 {
+  border-radius: 2px;
+}
+.rect-avatar.s40 {
+  border-radius: 4px;
+}
+.tab-width-8 {
+  -moz-tab-size: 8;
+  tab-size: 8;
+}
+.gl-sr-only {
+  border: 0;
+  clip: rect(0, 0, 0, 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}
+.gl-ml-3 {
+  margin-left: 0.5rem;
+}
+.content-wrapper > .alert-wrapper,
+#content-body, .modal-dialog {
+  display: block;
+}
 @import 'cloaking';
 @include cloak-startup-scss(none);
diff --git a/app/assets/stylesheets/startup/startup-signin.scss b/app/assets/stylesheets/startup/startup-signin.scss
new file mode 100644
index 00000000000..b3e53e35f6e
--- /dev/null
+++ b/app/assets/stylesheets/startup/startup-signin.scss
@@ -0,0 +1,2409 @@
+@charset "UTF-8";
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+html {
+  font-family: sans-serif;
+  line-height: 1.15;
+}
+ header, nav, section {
+  display: block;
+}
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", Ubuntu, Cantarell, "Helvetica Neue", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  font-size: 1rem;
+  font-weight: 400;
+  line-height: 1.5;
+  color: #303030;
+  text-align: left;
+  background-color: #fff;
+}
+hr {
+  box-sizing: content-box;
+  height: 0;
+  overflow: visible;
+}
+h1, h2, h3 {
+  margin-top: 0;
+  margin-bottom: 0.25rem;
+}
+p {
+  margin-top: 0;
+  margin-bottom: 1rem;
+}
+address {
+  margin-bottom: 1rem;
+  font-style: normal;
+  line-height: inherit;
+}
+
+ul {
+  margin-top: 0;
+  margin-bottom: 1rem;
+}
+
+ul ul {
+  margin-bottom: 0;
+}
+
+strong {
+  font-weight: bolder;
+}
+sub {
+  position: relative;
+  font-size: 75%;
+  line-height: 0;
+  vertical-align: baseline;
+}
+sub {
+  bottom: -.25em;
+}
+a {
+  color: #007bff;
+  text-decoration: none;
+  background-color: transparent;
+}
+a:not([href]) {
+  color: inherit;
+  text-decoration: none;
+}
+pre,
+code {
+  font-family: "Menlo", "DejaVu Sans Mono", "Liberation Mono", "Consolas", "Ubuntu Mono", "Courier New", "andale mono", "lucida console", monospace;
+  font-size: 1em;
+}
+pre {
+  margin-top: 0;
+  margin-bottom: 1rem;
+  overflow: auto;
+}
+img {
+  vertical-align: middle;
+  border-style: none;
+}
+svg {
+  overflow: hidden;
+  vertical-align: middle;
+}
+table {
+  border-collapse: collapse;
+}
+th {
+  text-align: inherit;
+}
+label {
+  display: inline-block;
+  margin-bottom: 0.5rem;
+}
+button {
+  border-radius: 0;
+}
+input,
+button,
+textarea {
+  margin: 0;
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+}
+button,
+input {
+  overflow: visible;
+}
+button {
+  text-transform: none;
+}
+button:not(:disabled),
+[type="button"]:not(:disabled),
+[type="reset"]:not(:disabled),
+[type="submit"]:not(:disabled) {
+  cursor: pointer;
+}
+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="checkbox"] {
+  box-sizing: border-box;
+  padding: 0;
+}
+textarea {
+  overflow: auto;
+  resize: vertical;
+}
+fieldset {
+  min-width: 0;
+  padding: 0;
+  margin: 0;
+  border: 0;
+}
+[type="search"] {
+  outline-offset: -2px;
+}
+summary {
+  display: list-item;
+  cursor: pointer;
+}
+template {
+  display: none;
+}
+[hidden] {
+  display: none !important;
+}
+h1, h2, h3,
+.h1, .h2, .h3 {
+  margin-bottom: 0.25rem;
+  font-weight: 600;
+  line-height: 1.2;
+  color: #303030;
+}
+h1, .h1 {
+  font-size: 2.1875rem;
+}
+h2, .h2 {
+  font-size: 1.75rem;
+}
+h3, .h3 {
+  font-size: 1.53125rem;
+}
+hr {
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
+  border: 0;
+  border-top: 1px solid rgba(0, 0, 0, 0.1);
+}
+.list-unstyled {
+  padding-left: 0;
+  list-style: none;
+}
+code {
+  font-size: 90%;
+  color: #1f1f1f;
+  word-wrap: break-word;
+}
+a > code {
+  color: inherit;
+}
+pre {
+  display: block;
+  font-size: 90%;
+  color: #303030;
+}
+pre code {
+  font-size: inherit;
+  color: inherit;
+  word-break: normal;
+}
+.container {
+  width: 100%;
+  padding-right: 15px;
+  padding-left: 15px;
+  margin-right: auto;
+  margin-left: auto;
+}
+
+@media (min-width: 576px) {
+  .container {
+    max-width: 540px;
+  }
+}
+
+@media (min-width: 768px) {
+  .container {
+    max-width: 720px;
+  }
+}
+
+@media (min-width: 992px) {
+  .container {
+    max-width: 960px;
+  }
+}
+
+@media (min-width: 1200px) {
+  .container {
+    max-width: 1140px;
+  }
+}
+.container-fluid {
+  width: 100%;
+  padding-right: 15px;
+  padding-left: 15px;
+  margin-right: auto;
+  margin-left: auto;
+}
+
+@media (min-width: 576px) {
+  .container {
+    max-width: 540px;
+  }
+}
+
+@media (min-width: 768px) {
+  .container {
+    max-width: 720px;
+  }
+}
+
+@media (min-width: 992px) {
+  .container {
+    max-width: 960px;
+  }
+}
+
+@media (min-width: 1200px) {
+  .container {
+    max-width: 1140px;
+  }
+}
+.row {
+  display: flex;
+  flex-wrap: wrap;
+  margin-right: -15px;
+  margin-left: -15px;
+}
+ .col-sm-5, .col-sm-7, .col-sm-12 {
+  position: relative;
+  width: 100%;
+  padding-right: 15px;
+  padding-left: 15px;
+}
+.order-1 {
+  order: 1;
+}
+.order-12 {
+  order: 12;
+}
+
+@media (min-width: 576px) {
+  .col-sm-5 {
+    flex: 0 0 41.66667%;
+    max-width: 41.66667%;
+  }
+  .col-sm-7 {
+    flex: 0 0 58.33333%;
+    max-width: 58.33333%;
+  }
+  .col-sm-12 {
+    flex: 0 0 100%;
+    max-width: 100%;
+  }
+  .order-sm-1 {
+    order: 1;
+  }
+  .order-sm-12 {
+    order: 12;
+  }
+}
+.table {
+  width: 100%;
+  margin-bottom: 0.5rem;
+  color: #303030;
+}
+.table th,
+.table td {
+  padding: 0.75rem;
+  vertical-align: top;
+  border-top: 1px solid #dbdbdb;
+}
+.form-control, .search form {
+  display: block;
+  width: 100%;
+  height: 34px;
+  padding: 0.375rem 0.75rem;
+  font-size: 0.875rem;
+  font-weight: 400;
+  line-height: 1.5;
+  color: #303030;
+  background-color: #fff;
+  background-clip: padding-box;
+  border: 1px solid #dbdbdb;
+  border-radius: 0.25rem;
+}
+
+@media (prefers-reduced-motion: reduce) {
+}
+.form-control:-moz-focusring, .search form:-moz-focusring {
+  color: transparent;
+  text-shadow: 0 0 0 #303030;
+}
+.form-control::placeholder, .search form::placeholder {
+  color: #5e5e5e;
+  opacity: 1;
+}
+.form-control:disabled, .search form:disabled {
+  background-color: #fafafa;
+  opacity: 1;
+}
+textarea.form-control {
+  height: auto;
+}
+.form-group {
+  margin-bottom: 1rem;
+}
+.form-inline {
+  display: flex;
+  flex-flow: row wrap;
+  align-items: center;
+}
+
+@media (min-width: 576px) {
+  .form-inline label {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-bottom: 0;
+  }
+  .form-inline .form-group {
+    display: flex;
+    flex: 0 0 auto;
+    flex-flow: row wrap;
+    align-items: center;
+    margin-bottom: 0;
+  }
+  .form-inline .form-control, .form-inline .search form, .search .form-inline form {
+    display: inline-block;
+    width: auto;
+    vertical-align: middle;
+  }
+}
+.btn {
+  display: inline-block;
+  font-weight: 400;
+  color: #303030;
+  text-align: center;
+  vertical-align: middle;
+  cursor: pointer;
+  user-select: none;
+  background-color: transparent;
+  border: 1px solid transparent;
+  padding: 0.375rem 0.75rem;
+  font-size: 1rem;
+  line-height: 20px;
+  border-radius: 0.25rem;
+}
+
+@media (prefers-reduced-motion: reduce) {
+}
+.btn.disabled, .btn:disabled {
+  opacity: 0.65;
+}
+a.btn.disabled,
+fieldset:disabled a.btn {
+  pointer-events: none;
+}
+.btn-success {
+  color: #fff;
+  background-color: #108548;
+  border-color: #108548;
+}
+.btn-success.disabled, .btn-success:disabled {
+  color: #fff;
+  background-color: #108548;
+  border-color: #108548;
+}
+.btn-success:not(:disabled):not(.disabled):active, .btn-success:not(:disabled):not(.disabled).active,
+.show > .btn-success.dropdown-menu-toggle {
+  color: #fff;
+  background-color: #0b572f;
+  border-color: #094c29;
+}
+ .login-page input[type='submit'] {
+  display: block;
+  width: 100%;
+}
+ .login-page input[type='submit'] + input[type='submit'] {
+  margin-top: 0.5rem;
+}
+ .login-page input[type="submit"][type='submit'],
+.login-page input[type="reset"][type='submit'],
+.login-page input[type="button"][type='submit'] {
+  width: 100%;
+}
+.collapse:not(.show) {
+  display: none;
+}
+
+.dropdown {
+  position: relative;
+}
+ .dropdown-menu-toggle {
+  white-space: nowrap;
+}
+ .dropdown-menu-toggle::after {
+  display: inline-block;
+  margin-left: 0.255em;
+  vertical-align: 0.255em;
+  content: "";
+  border-top: 0.3em solid;
+  border-right: 0.3em solid transparent;
+  border-bottom: 0;
+  border-left: 0.3em solid transparent;
+}
+ .dropdown-menu-toggle:empty::after {
+  margin-left: 0;
+}
+.dropdown-menu {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  z-index: 1000;
+  display: none;
+  float: left;
+  min-width: 10rem;
+  padding: 0.5rem 0;
+  margin: 0.125rem 0 0;
+  font-size: 1rem;
+  color: #303030;
+  text-align: left;
+  list-style: none;
+  background-color: #fff;
+  background-clip: padding-box;
+  border: 1px solid rgba(0, 0, 0, 0.15);
+  border-radius: 0.25rem;
+}
+.dropdown-menu-right {
+  right: 0;
+  left: auto;
+}
+ .divider {
+  height: 0;
+  margin: 4px 0;
+  overflow: hidden;
+  border-top: 1px solid #dbdbdb;
+}
+.dropdown-menu.show {
+  display: block;
+}
+.nav {
+  display: flex;
+  flex-wrap: wrap;
+  padding-left: 0;
+  margin-bottom: 0;
+  list-style: none;
+}
+.nav-link {
+  display: block;
+  padding: 0.5rem 1rem;
+}
+.nav-link.disabled {
+  color: #5e5e5e;
+  pointer-events: none;
+  cursor: default;
+}
+.nav-tabs {
+  border-bottom: 1px solid #999;
+}
+.nav-tabs .nav-item {
+  margin-bottom: -1px;
+}
+.nav-tabs .nav-link {
+  border: 1px solid transparent;
+  border-top-left-radius: 0.25rem;
+  border-top-right-radius: 0.25rem;
+}
+.nav-tabs .nav-link.disabled {
+  color: #5e5e5e;
+  background-color: transparent;
+  border-color: transparent;
+}
+.nav-tabs .nav-link.active,
+.nav-tabs .nav-item.show .nav-link {
+  color: #525252;
+  background-color: #fff;
+  border-color: #999 #999 #fff;
+}
+.nav-tabs .dropdown-menu {
+  margin-top: -1px;
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+}
+.tab-content > .tab-pane {
+  display: none;
+}
+.tab-content > .active {
+  display: block;
+}
+.navbar {
+  position: relative;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.25rem 0.5rem;
+}
+.navbar .container,
+.navbar .container-fluid {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+}
+.navbar-nav {
+  display: flex;
+  flex-direction: column;
+  padding-left: 0;
+  margin-bottom: 0;
+  list-style: none;
+}
+.navbar-nav .nav-link {
+  padding-right: 0;
+  padding-left: 0;
+}
+.navbar-nav .dropdown-menu {
+  position: static;
+  float: none;
+}
+.navbar-collapse {
+  flex-basis: 100%;
+  flex-grow: 1;
+  align-items: center;
+}
+.navbar-toggler {
+  padding: 0.25rem 0.75rem;
+  font-size: 1.25rem;
+  line-height: 1;
+  background-color: transparent;
+  border: 1px solid transparent;
+  border-radius: 0.25rem;
+}
+
+@media (max-width: 575.98px) {
+  .navbar-expand-sm > .container,
+  .navbar-expand-sm > .container-fluid {
+    padding-right: 0;
+    padding-left: 0;
+  }
+}
+
+@media (min-width: 576px) {
+  .navbar-expand-sm {
+    flex-flow: row nowrap;
+    justify-content: flex-start;
+  }
+  .navbar-expand-sm .navbar-nav {
+    flex-direction: row;
+  }
+  .navbar-expand-sm .navbar-nav .dropdown-menu {
+    position: absolute;
+  }
+  .navbar-expand-sm .navbar-nav .nav-link {
+    padding-right: 0.5rem;
+    padding-left: 0.5rem;
+  }
+  .navbar-expand-sm > .container,
+  .navbar-expand-sm > .container-fluid {
+    flex-wrap: nowrap;
+  }
+  .navbar-expand-sm .navbar-collapse {
+    display: flex !important;
+    flex-basis: auto;
+  }
+  .navbar-expand-sm .navbar-toggler {
+    display: none;
+  }
+}
+.card {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  word-wrap: break-word;
+  background-color: #fff;
+  background-clip: border-box;
+  border: 1px solid #dbdbdb;
+  border-radius: 0.25rem;
+}
+.card > hr {
+  margin-right: 0;
+  margin-left: 0;
+}
+.badge {
+  display: inline-block;
+  padding: 0.25em 0.4em;
+  font-size: 75%;
+  font-weight: 600;
+  line-height: 1;
+  text-align: center;
+  white-space: nowrap;
+  vertical-align: baseline;
+  border-radius: 0.25rem;
+}
+
+@media (prefers-reduced-motion: reduce) {
+}
+.badge:empty {
+  display: none;
+}
+.btn .badge {
+  position: relative;
+  top: -1px;
+}
+.badge-pill {
+  padding-right: 0.6em;
+  padding-left: 0.6em;
+  border-radius: 10rem;
+}
+.media {
+  display: flex;
+  align-items: flex-start;
+}
+.close {
+  float: right;
+  font-size: 1.5rem;
+  font-weight: 600;
+  line-height: 1;
+  color: #000;
+  text-shadow: 0 1px 0 #fff;
+  opacity: .5;
+}
+button.close {
+  padding: 0;
+  background-color: transparent;
+  border: 0;
+  appearance: none;
+}
+a.close.disabled {
+  pointer-events: none;
+}
+.modal-dialog {
+  position: relative;
+  width: auto;
+  margin: 0.5rem;
+  pointer-events: none;
+}
+
+@media (min-width: 576px) {
+  .modal-dialog {
+    max-width: 500px;
+    margin: 1.75rem auto;
+  }
+}
+.bg-transparent {
+  background-color: transparent !important;
+}
+.border {
+  border: 1px solid #dbdbdb !important;
+}
+.border-top {
+  border-top: 1px solid #dbdbdb !important;
+}
+.border-right {
+  border-right: 1px solid #dbdbdb !important;
+}
+.border-bottom {
+  border-bottom: 1px solid #dbdbdb !important;
+}
+.border-left {
+  border-left: 1px solid #dbdbdb !important;
+}
+.rounded {
+  border-radius: 0.25rem !important;
+}
+.clearfix::after {
+  display: block;
+  clear: both;
+  content: "";
+}
+.d-none {
+  display: none !important;
+}
+.d-inline-block {
+  display: inline-block !important;
+}
+.d-block {
+  display: block !important;
+}
+.d-flex {
+  display: flex !important;
+}
+
+@media (min-width: 576px) {
+  .d-sm-none {
+    display: none !important;
+  }
+}
+
+@media (min-width: 768px) {
+  .d-md-block {
+    display: block !important;
+  }
+}
+
+@media (min-width: 992px) {
+  .d-lg-none {
+    display: none !important;
+  }
+  .d-lg-block {
+    display: block !important;
+  }
+}
+
+@media (min-width: 1200px) {
+  .d-xl-block {
+    display: block !important;
+  }
+}
+.flex-wrap {
+  flex-wrap: wrap !important;
+}
+.justify-content-between {
+  justify-content: space-between !important;
+}
+.align-items-center {
+  align-items: center !important;
+}
+.float-right {
+  float: right !important;
+}
+.fixed-top {
+  position: fixed;
+  top: 0;
+  right: 0;
+  left: 0;
+  z-index: 1030;
+}
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+.mt-3 {
+  margin-top: 1rem !important;
+}
+.mb-3 {
+  margin-bottom: 1rem !important;
+}
+.m-auto {
+  margin: auto !important;
+}
+
+@media (min-width: 576px) {
+  .mt-sm-0 {
+    margin-top: 0 !important;
+  }
+}
+.text-nowrap {
+  white-space: nowrap !important;
+}
+.text-left {
+  text-align: left !important;
+}
+.font-weight-normal {
+  font-weight: 400 !important;
+}
+.visible {
+  visibility: visible !important;
+}
+.form-control.focus, .search form.focus {
+  color: #303030;
+  background-color: #fff;
+  border-color: #80bdff;
+  outline: 0;
+  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
+}
+input[type="color"].form-control {
+  height: 34px;
+  padding: 0.125rem 0.25rem;
+}
+input[type="color"].form-control:disabled {
+  background-color: #666;
+  opacity: 0.65;
+}
+.gl-badge {
+  display: inline-flex;
+  align-items: center;
+  font-size: 0.75rem;
+  font-weight: 400;
+  line-height: 1rem;
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+  outline: none;
+}
+body, .form-control, .search form,
+.search form {
+  font-size: 0.875rem;
+}
+button,
+html [type='button'],
+[type='reset'],
+[type='submit'],
+[role='button'] {
+  cursor: pointer;
+}
+h1,
+.h1,
+h2,
+.h2,
+h3,
+.h3 {
+  margin-top: 20px;
+  margin-bottom: 10px;
+}
+input[type='file'] {
+  line-height: 1;
+}
+
+strong {
+  font-weight: bold;
+}
+a {
+  color: #1068bf;
+}
+hr {
+  overflow: hidden;
+}
+code {
+  padding: 2px 4px;
+  color: #1f1f1f;
+  background-color: #f0f0f0;
+  border-radius: 4px;
+}
+.code > code {
+  background-color: inherit;
+  padding: unset;
+}
+table {
+  border-spacing: 0;
+}
+.hidden {
+  display: none !important;
+  visibility: hidden !important;
+}
+.hide {
+  display: none;
+}
+ .dropdown-menu-toggle::after {
+  display: none;
+}
+.badge:not(.gl-badge),
+.label {
+  padding: 4px 5px;
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 400;
+  display: inline-block;
+}
+.nav-tabs {
+  border-bottom: 0;
+}
+.nav-tabs .nav-link {
+  border-top: 0;
+  border-left: 0;
+  border-right: 0;
+}
+.nav-tabs .nav-item {
+  margin-bottom: 0;
+}
+pre code {
+  white-space: pre-wrap;
+}
+input[type="color"].form-control {
+  height: 34px;
+}
+.toggle-sidebar-button .collapse-text,
+.toggle-sidebar-button .icon-chevron-double-lg-left,
+.toggle-sidebar-button .icon-chevron-double-lg-right {
+  color: #666;
+}
+svg {
+  vertical-align: baseline;
+}
+html {
+  overflow-y: scroll;
+}
+body {
+  text-decoration-skip: ink;
+}
+body.navless {
+  background-color: #fff !important;
+}
+.content-wrapper {
+  margin-top: 40px;
+  padding-bottom: 100px;
+}
+.container {
+  padding-top: 0;
+  z-index: 5;
+}
+.container .content {
+  margin: 0;
+}
+
+@media (max-width: 575.98px) {
+  .container .content {
+    margin-top: 20px;
+  }
+}
+
+@media (max-width: 575.98px) {
+  .container .container .title {
+    padding-left: 15px !important;
+  }
+}
+.navless-container {
+  margin-top: 40px;
+  padding-top: 32px;
+}
+.btn {
+  border-radius: 4px;
+  font-size: 0.875rem;
+  font-weight: 400;
+  padding: 6px 10px;
+  background-color: #fff;
+  border-color: #dbdbdb;
+  color: #303030;
+  color: #303030;
+  white-space: nowrap;
+}
+.btn:active, .btn.active {
+  box-shadow: rgba(0, 0, 0, 0.16);
+  background-color: #eaeaea;
+  border-color: #e3e3e3;
+  color: #303030;
+}
+.btn.btn-success, .btn.btn-register {
+  background-color: #108548;
+  border-color: #217645;
+  color: #fff;
+}
+.btn.btn-success:active, .btn.btn-success.active, .btn.btn-register:active, .btn.btn-register.active {
+  box-shadow: rgba(0, 0, 0, 0.16);
+  background-color: #24663b;
+  border-color: #0d532a;
+  color: #fff;
+}
+.btn svg {
+  height: 15px;
+  width: 15px;
+}
+.btn svg:not(:last-child),
+.btn .fa:not(:last-child) {
+  margin-right: 5px;
+}
+ .login-page input[type='submit'] {
+  width: 100%;
+  margin: 0;
+  margin-bottom: 15px;
+}
+ .login-page input.btn[type='submit'] {
+  padding: 6px 0;
+}
+.badge.badge-pill:not(.gl-badge) {
+  font-weight: 400;
+  background-color: rgba(0, 0, 0, 0.07);
+  color: #525252;
+  vertical-align: baseline;
+}
+.hint {
+  font-style: italic;
+  color: #bfbfbf;
+}
+.bold {
+  font-weight: 600;
+}
+.tab-content {
+  overflow: visible;
+}
+pre.wrap {
+  word-break: break-word;
+  white-space: pre-wrap;
+}
+hr {
+  margin: 24px 0;
+  border-top: 1px solid #eee;
+}
+table a code {
+  position: relative;
+  top: -2px;
+  margin-right: 3px;
+}
+.loading {
+  margin: 20px auto;
+  height: 40px;
+  color: #525252;
+  font-size: 32px;
+  text-align: center;
+}
+.highlight {
+  text-shadow: none;
+}
+.chart {
+  overflow: hidden;
+  height: 220px;
+}
+.footer-links {
+  margin-bottom: 20px;
+}
+.footer-links a {
+  margin-right: 15px;
+}
+.break-word {
+  word-wrap: break-word;
+}
+.append-bottom-20 {
+  margin-bottom: 20px;
+}
+.center {
+  text-align: center;
+}
+.block {
+  display: block;
+}
+.flex {
+  display: flex;
+}
+.flex-grow {
+  flex-grow: 1;
+}
+.dropdown {
+  position: relative;
+}
+.show.dropdown .dropdown-menu {
+  transform: translateY(0);
+  display: block;
+  min-height: 40px;
+  max-height: 312px;
+  overflow-y: auto;
+}
+
+@media (max-width: 575.98px) {
+  .show.dropdown .dropdown-menu {
+    width: 100%;
+  }
+}
+ .show.dropdown .dropdown-menu-toggle,
+.show.dropdown .dropdown-menu-toggle {
+  border-color: #c4c4c4;
+}
+.show.dropdown [data-toggle='dropdown'] {
+  outline: 0;
+}
+.search-input-container .dropdown-menu {
+  margin-top: 11px;
+}
+ .dropdown-menu-toggle {
+  padding: 6px 8px 6px 10px;
+  background-color: #fff;
+  color: #303030;
+  font-size: 14px;
+  text-align: left;
+  border: 1px solid #dbdbdb;
+  border-radius: 0.25rem;
+  white-space: nowrap;
+}
+ .no-outline.dropdown-menu-toggle {
+  outline: 0;
+}
+ .dropdown-menu-toggle .fa {
+  color: #c4c4c4;
+}
+.dropdown-menu-toggle {
+  padding-right: 25px;
+  position: relative;
+  width: 160px;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+.dropdown-menu-toggle .fa {
+  position: absolute;
+}
+.dropdown-menu {
+  display: none;
+  position: absolute;
+  width: auto;
+  top: 100%;
+  z-index: 300;
+  min-width: 240px;
+  max-width: 500px;
+  margin-top: 4px;
+  margin-bottom: 24px;
+  font-size: 14px;
+  font-weight: 400;
+  padding: 8px 0;
+  background-color: #fff;
+  border: 1px solid #dbdbdb;
+  border-radius: 0.25rem;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+.dropdown-menu ul {
+  margin: 0;
+  padding: 0;
+}
+.dropdown-menu li {
+  display: block;
+  text-align: left;
+  list-style: none;
+  padding: 0 1px;
+}
+.dropdown-menu li > a,
+.dropdown-menu li button {
+  background: transparent;
+  border: 0;
+  border-radius: 0;
+  box-shadow: none;
+  display: block;
+  font-weight: 400;
+  position: relative;
+  padding: 8px 12px;
+  color: #303030;
+  line-height: 16px;
+  white-space: normal;
+  overflow: hidden;
+  text-align: left;
+  width: 100%;
+}
+.dropdown-menu .divider {
+  height: 1px;
+  margin: 0.25rem 0;
+  padding: 0;
+  background-color: #dbdbdb;
+}
+.dropdown-menu .badge.badge-pill + span:not(.badge.badge-pill) {
+  margin-right: 40px;
+}
+.dropdown-select {
+  width: 300px;
+}
+
+@media (max-width: 767.98px) {
+  .dropdown-select {
+    width: 100%;
+  }
+}
+.dropdown-content {
+  max-height: 252px;
+  overflow-y: auto;
+}
+.dropdown-loading {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  display: none;
+  z-index: 9;
+  background-color: rgba(255, 255, 255, 0.6);
+  font-size: 28px;
+}
+.dropdown-loading .fa {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  margin-top: -14px;
+  margin-left: -14px;
+}
+
+@media (max-width: 575.98px) {
+  .navbar-gitlab li.dropdown {
+    position: static;
+  }
+  header.navbar-gitlab .dropdown .dropdown-menu {
+    width: 100%;
+    min-width: 100%;
+  }
+}
+
+@media (max-width: 767.98px) {
+  .dropdown-menu-toggle {
+    width: 100%;
+  }
+}
+.flash-container {
+  margin: 0;
+  margin-bottom: 16px;
+  font-size: 14px;
+  position: relative;
+  z-index: 1;
+}
+.flash-container.sticky {
+  position: sticky;
+  position: -webkit-sticky;
+  top: 48px;
+  z-index: 251;
+}
+.flash-container.flash-container-page {
+  margin-bottom: 0;
+}
+.flash-container:empty {
+  margin: 0;
+}
+textarea {
+  resize: vertical;
+}
+input {
+  border-radius: 0.25rem;
+  color: #303030;
+  background-color: #fff;
+}
+label {
+  font-weight: 600;
+}
+label.label-bold {
+  font-weight: 600;
+}
+.form-control, .search form {
+  border-radius: 4px;
+  padding: 6px 10px;
+}
+.form-control::placeholder, .search form::placeholder {
+  color: #868686;
+}
+.gl-field-error {
+  color: #dd2b0e;
+  font-size: 0.875rem;
+}
+.gl-show-field-errors .form-control:not(textarea), .gl-show-field-errors .search form:not(textarea), .search .gl-show-field-errors form:not(textarea) {
+  height: 34px;
+}
+.gl-show-field-errors .gl-field-hint {
+  color: #303030;
+}
+
+@media (max-width: 575.98px) {
+  .remember-me .remember-me-checkbox {
+    margin-top: 0;
+  }
+}
+body.ui-indigo .navbar-gitlab {
+  background-color: #292961;
+}
+body.ui-indigo .navbar-gitlab .navbar-collapse {
+  color: #d1d1f0;
+}
+body.ui-indigo .navbar-gitlab .container-fluid .navbar-toggler {
+  border-left: 1px solid #6868b9;
+}
+body.ui-indigo .navbar-gitlab .container-fluid .navbar-toggler svg {
+  fill: #d1d1f0;
+}
+body.ui-indigo .navbar-gitlab .navbar-sub-nav > li.active > a,
+body.ui-indigo .navbar-gitlab .navbar-sub-nav > li.active > button, body.ui-indigo .navbar-gitlab .navbar-sub-nav > li.dropdown.show > a,
+body.ui-indigo .navbar-gitlab .navbar-sub-nav > li.dropdown.show > button,
+body.ui-indigo .navbar-gitlab .navbar-nav > li.active > a,
+body.ui-indigo .navbar-gitlab .navbar-nav > li.active > button,
+body.ui-indigo .navbar-gitlab .navbar-nav > li.dropdown.show > a,
+body.ui-indigo .navbar-gitlab .navbar-nav > li.dropdown.show > button {
+  color: #292961;
+  background-color: #fff;
+}
+body.ui-indigo .navbar-gitlab .navbar-sub-nav {
+  color: #d1d1f0;
+}
+body.ui-indigo .navbar-gitlab .nav > li {
+  color: #d1d1f0;
+}
+body.ui-indigo .navbar-gitlab .nav > li > a.header-user-dropdown-toggle .header-user-avatar {
+  border-color: #d1d1f0;
+}
+body.ui-indigo .navbar-gitlab .nav > li.active > a,
+body.ui-indigo .navbar-gitlab .nav > li.dropdown.show > a {
+  color: #292961;
+  background-color: #fff;
+}
+body.ui-indigo .search form {
+  background-color: rgba(209, 209, 240, 0.2);
+}
+body.ui-indigo .search .search-input::placeholder {
+  color: rgba(209, 209, 240, 0.8);
+}
+body.ui-indigo .search .search-input-wrap .search-icon,
+body.ui-indigo .search .search-input-wrap .clear-icon {
+  fill: rgba(209, 209, 240, 0.8);
+}
+body.ui-indigo .nav-sidebar li.active {
+  box-shadow: inset 4px 0 0 #4b4ba3;
+}
+body.ui-indigo .nav-sidebar li.active > a {
+  color: #393982;
+}
+body.ui-indigo .nav-sidebar li.active .nav-icon-container svg {
+  fill: #393982;
+}
+body.ui-indigo .sidebar-top-level-items > li.active .badge.badge-pill {
+  color: #393982;
+}
+body.ui-indigo .nav-links li.active a,
+body.ui-indigo .nav-links li a.active {
+  border-bottom: 2px solid #6666c4;
+}
+body.ui-indigo .nav-links li.active a .badge.badge-pill,
+body.ui-indigo .nav-links li a.active .badge.badge-pill {
+  font-weight: 600;
+}
+.navbar-gitlab {
+  padding: 0 16px;
+  z-index: 1000;
+  margin-bottom: 0;
+  min-height: 40px;
+  border: 0;
+  border-bottom: 1px solid #dbdbdb;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  border-radius: 0;
+}
+.navbar-gitlab .logo-text {
+  line-height: initial;
+}
+.navbar-gitlab .logo-text svg {
+  width: 55px;
+  height: 14px;
+  margin: 0;
+  fill: #fff;
+}
+.navbar-gitlab .close-icon {
+  display: none;
+}
+.navbar-gitlab .header-content {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  position: relative;
+  min-height: 40px;
+  padding-left: 0;
+}
+.navbar-gitlab .header-content .title-container {
+  display: flex;
+  align-items: stretch;
+  flex: 1 1 auto;
+  padding-top: 0;
+  overflow: visible;
+}
+.navbar-gitlab .header-content .title {
+  padding-right: 0;
+  color: currentColor;
+  display: flex;
+  position: relative;
+  margin: 0;
+  font-size: 18px;
+  vertical-align: top;
+  white-space: nowrap;
+}
+.navbar-gitlab .header-content .title img {
+  height: 28px;
+}
+.navbar-gitlab .header-content .title img + .logo-text {
+  margin-left: 8px;
+}
+.navbar-gitlab .header-content .title.wrap {
+  white-space: normal;
+}
+.navbar-gitlab .header-content .title a {
+  display: flex;
+  align-items: center;
+  padding: 2px 8px;
+  margin: 5px 2px 5px -8px;
+  border-radius: 4px;
+}
+.navbar-gitlab .header-content .dropdown.open > a {
+  border-bottom-color: #fff;
+}
+.navbar-gitlab .header-content .navbar-collapse > ul.nav > li:not(.d-none) {
+  margin: 0 2px;
+}
+.navbar-gitlab .navbar-collapse {
+  flex: 0 0 auto;
+  border-top: 0;
+  padding: 0;
+}
+
+@media (max-width: 575.98px) {
+  .navbar-gitlab .navbar-collapse {
+    flex: 1 1 auto;
+  }
+}
+.navbar-gitlab .navbar-collapse .nav {
+  flex-wrap: nowrap;
+}
+
+@media (max-width: 575.98px) {
+  .navbar-gitlab .navbar-collapse .nav > li:not(.d-none) a {
+    margin-left: 0;
+  }
+}
+.navbar-gitlab .container-fluid {
+  padding: 0;
+}
+.navbar-gitlab .container-fluid .user-counter svg {
+  margin-right: 3px;
+}
+.navbar-gitlab .container-fluid .navbar-toggler {
+  position: relative;
+  right: -10px;
+  border-radius: 0;
+  min-width: 45px;
+  padding: 0;
+  margin: 8px -7px 8px 0;
+  font-size: 14px;
+  text-align: center;
+  color: currentColor;
+}
+
+@media (max-width: 575.98px) {
+  .navbar-gitlab .container-fluid .navbar-nav {
+    display: flex;
+    padding-right: 10px;
+    flex-direction: row;
+  }
+}
+.navbar-gitlab .container-fluid .navbar-nav li .badge.badge-pill {
+  box-shadow: none;
+  font-weight: 600;
+}
+
+@media (max-width: 575.98px) {
+  .navbar-gitlab .container-fluid .nav > li.header-user {
+    padding-left: 10px;
+  }
+}
+.navbar-gitlab .container-fluid .nav > li > a {
+  will-change: color;
+  margin: 4px 0;
+  padding: 6px 8px;
+  height: 32px;
+}
+
+@media (max-width: 575.98px) {
+  .navbar-gitlab .container-fluid .nav > li > a {
+    padding: 0;
+  }
+}
+.navbar-gitlab .container-fluid .nav > li > a.header-user-dropdown-toggle {
+  margin-left: 2px;
+}
+.navbar-gitlab .container-fluid .nav > li > a.header-user-dropdown-toggle .header-user-avatar {
+  margin-right: 0;
+}
+.navbar-gitlab .container-fluid .nav > li .header-new-dropdown-toggle {
+  margin-right: 0;
+}
+.navbar-sub-nav > li > a,
+.navbar-sub-nav > li > button,
+.navbar-nav > li > a,
+.navbar-nav > li > button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 6px 8px;
+  margin: 4px 2px;
+  font-size: 12px;
+  color: currentColor;
+  border-radius: 4px;
+  height: 32px;
+  font-weight: 600;
+}
+.navbar-sub-nav > li > button,
+.navbar-nav > li > button {
+  background: transparent;
+  border: 0;
+}
+.navbar-sub-nav .dropdown-menu,
+.navbar-nav .dropdown-menu {
+  position: absolute;
+}
+.navbar-sub-nav {
+  display: flex;
+  margin: 0 0 0 6px;
+}
+.caret-down,
+.btn .caret-down {
+  top: 0;
+  height: 11px;
+  width: 11px;
+  margin-left: 4px;
+  fill: currentColor;
+}
+.header-user .dropdown-menu,
+.header-new .dropdown-menu {
+  margin-top: 4px;
+}
+.btn-sign-in {
+  background-color: #ebebfa;
+  color: #292961;
+  font-weight: 600;
+  line-height: 18px;
+  margin: 4px 0 4px 2px;
+}
+.title-container .badge.badge-pill,
+.navbar-nav .badge.badge-pill {
+  position: inherit;
+  font-weight: 400;
+  margin-left: -6px;
+  font-size: 11px;
+  color: #fff;
+  padding: 0 5px;
+  line-height: 12px;
+  border-radius: 7px;
+  box-shadow: 0 1px 0 rgba(76, 78, 84, 0.2);
+}
+.title-container .badge.badge-pill.green-badge,
+.navbar-nav .badge.badge-pill.green-badge {
+  background-color: #108548;
+}
+.title-container .badge.badge-pill.merge-requests-count,
+.navbar-nav .badge.badge-pill.merge-requests-count {
+  background-color: #de7e00;
+}
+.title-container .badge.badge-pill.todos-count,
+.navbar-nav .badge.badge-pill.todos-count {
+  background-color: #1f75cb;
+}
+.title-container .canary-badge .badge,
+.navbar-nav .canary-badge .badge {
+  font-size: 12px;
+  line-height: 16px;
+  padding: 0 0.5rem;
+}
+
+@media (max-width: 575.98px) {
+  .navbar-gitlab .container-fluid {
+    font-size: 18px;
+  }
+  .navbar-gitlab .container-fluid .navbar-nav {
+    table-layout: fixed;
+    width: 100%;
+    margin: 0;
+    text-align: right;
+  }
+  .navbar-gitlab .container-fluid .navbar-collapse {
+    margin-left: -8px;
+    margin-right: -10px;
+  }
+  .navbar-gitlab .container-fluid .navbar-collapse .nav > li:not(.d-none) {
+    flex: 1;
+  }
+  .header-user-dropdown-toggle {
+    text-align: center;
+  }
+  .header-user-avatar {
+    float: none;
+  }
+}
+.header-user.show .dropdown-menu {
+  margin-top: 4px;
+  color: #303030;
+  left: auto;
+  max-height: 445px;
+}
+.header-user.show .dropdown-menu svg {
+  vertical-align: text-top;
+}
+.header-user-avatar {
+  float: left;
+  margin-right: 5px;
+  border-radius: 50%;
+  border: 1px solid #f5f5f5;
+}
+.navbar-empty {
+  justify-content: center;
+  height: 40px;
+  background: #fff;
+  border-bottom: 1px solid #f0f0f0;
+}
+
+@media (max-width: 575.98px) {
+  .nav-links > li > a .badge.badge-pill {
+    display: none;
+  }
+}
+
+@media (max-width: 575.98px) {
+  .nav-links > li > a {
+    margin-right: 3px;
+  }
+}
+.media {
+  display: flex;
+  align-items: flex-start;
+}
+.card {
+  margin-bottom: 16px;
+}
+.nav-links:not(.quick-links) {
+  display: flex;
+  padding: 0;
+  margin: 0;
+  list-style: none;
+  height: auto;
+  border-bottom: 1px solid #dbdbdb;
+}
+.content-wrapper {
+  width: 100%;
+}
+.content-wrapper .container-fluid {
+  padding: 0 16px;
+}
+
+@media (min-width: 768px) {
+  .page-with-contextual-sidebar {
+    padding-left: 50px;
+  }
+}
+
+@media (min-width: 1200px) {
+  .page-with-contextual-sidebar {
+    padding-left: 220px;
+  }
+}
+.context-header {
+  position: relative;
+  margin-right: 2px;
+  width: 220px;
+}
+.context-header > a,
+.context-header > button {
+  font-weight: 600;
+  display: flex;
+  width: 100%;
+  align-items: center;
+  padding: 10px 16px 10px 10px;
+  color: #303030;
+  background-color: transparent;
+  border: 0;
+  text-align: left;
+}
+.context-header .avatar-container {
+  flex: 0 0 40px;
+  background-color: #fff;
+}
+.context-header .sidebar-context-title {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.context-header .sidebar-context-title.text-secondary {
+  font-weight: normal;
+  font-size: 0.8em;
+}
+.nav-sidebar {
+  position: fixed;
+  z-index: 600;
+  width: 220px;
+  top: 40px;
+  bottom: 0;
+  left: 0;
+  background-color: #fafafa;
+  box-shadow: inset -1px 0 0 #dbdbdb;
+  transform: translate3d(0, 0, 0);
+}
+
+@media (min-width: 576px) and (max-width: 576px) {
+  .nav-sidebar:not(.sidebar-collapsed-desktop) {
+    box-shadow: inset -1px 0 0 #dbdbdb, 2px 1px 3px rgba(0, 0, 0, 0.1);
+  }
+}
+.nav-sidebar.sidebar-collapsed-desktop {
+  width: 50px;
+}
+.nav-sidebar.sidebar-collapsed-desktop .nav-sidebar-inner-scroll {
+  overflow-x: hidden;
+}
+.nav-sidebar.sidebar-collapsed-desktop .badge.badge-pill:not(.fly-out-badge),
+.nav-sidebar.sidebar-collapsed-desktop .sidebar-context-title,
+.nav-sidebar.sidebar-collapsed-desktop .nav-item-name {
+  border: 0;
+  clip: rect(0, 0, 0, 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}
+.nav-sidebar.sidebar-collapsed-desktop .sidebar-top-level-items > li > a {
+  min-height: 45px;
+}
+.nav-sidebar.sidebar-collapsed-desktop .fly-out-top-item {
+  display: block;
+}
+.nav-sidebar.sidebar-collapsed-desktop .avatar-container {
+  margin: 0 auto;
+}
+.nav-sidebar.sidebar-expanded-mobile {
+  left: 0;
+}
+.nav-sidebar a {
+  text-decoration: none;
+}
+.nav-sidebar ul {
+  padding-left: 0;
+  list-style: none;
+}
+.nav-sidebar li {
+  white-space: nowrap;
+}
+.nav-sidebar li a {
+  display: flex;
+  align-items: center;
+  padding: 12px 16px;
+  color: #666;
+}
+.nav-sidebar li .nav-item-name {
+  flex: 1;
+}
+.nav-sidebar li.active > a {
+  font-weight: 600;
+}
+
+@media (max-width: 767.98px) {
+  .nav-sidebar {
+    left: -220px;
+  }
+}
+.nav-sidebar .nav-icon-container {
+  display: flex;
+  margin-right: 8px;
+}
+.nav-sidebar .fly-out-top-item {
+  display: none;
+}
+.nav-sidebar svg {
+  height: 16px;
+  width: 16px;
+}
+
+@media (min-width: 768px) and (max-width: 1199px) {
+  .nav-sidebar:not(.sidebar-expanded-mobile) {
+    width: 50px;
+  }
+  .nav-sidebar:not(.sidebar-expanded-mobile) .nav-sidebar-inner-scroll {
+    overflow-x: hidden;
+  }
+  .nav-sidebar:not(.sidebar-expanded-mobile) .badge.badge-pill:not(.fly-out-badge),
+  .nav-sidebar:not(.sidebar-expanded-mobile) .sidebar-context-title,
+  .nav-sidebar:not(.sidebar-expanded-mobile) .nav-item-name {
+    border: 0;
+    clip: rect(0, 0, 0, 0);
+    height: 1px;
+    margin: -1px;
+    overflow: hidden;
+    padding: 0;
+    position: absolute;
+    white-space: nowrap;
+    width: 1px;
+  }
+  .nav-sidebar:not(.sidebar-expanded-mobile) .sidebar-top-level-items > li > a {
+    min-height: 45px;
+  }
+  .nav-sidebar:not(.sidebar-expanded-mobile) .fly-out-top-item {
+    display: block;
+  }
+  .nav-sidebar:not(.sidebar-expanded-mobile) .avatar-container {
+    margin: 0 auto;
+  }
+  .nav-sidebar:not(.sidebar-expanded-mobile) .context-header {
+    height: 60px;
+    width: 50px;
+  }
+  .nav-sidebar:not(.sidebar-expanded-mobile) .context-header a {
+    padding: 10px 4px;
+  }
+  .nav-sidebar:not(.sidebar-expanded-mobile) .sidebar-top-level-items > li .sidebar-sub-level-items:not(.flyout-list) {
+    display: none;
+  }
+  .nav-sidebar:not(.sidebar-expanded-mobile) .nav-icon-container {
+    margin-right: 0;
+  }
+  .nav-sidebar:not(.sidebar-expanded-mobile) .toggle-sidebar-button {
+    padding: 16px;
+    width: 49px;
+  }
+  .nav-sidebar:not(.sidebar-expanded-mobile) .toggle-sidebar-button .collapse-text,
+  .nav-sidebar:not(.sidebar-expanded-mobile) .toggle-sidebar-button .icon-chevron-double-lg-left {
+    display: none;
+  }
+  .nav-sidebar:not(.sidebar-expanded-mobile) .toggle-sidebar-button .icon-chevron-double-lg-right {
+    display: block;
+    margin: 0;
+  }
+}
+.nav-sidebar-inner-scroll {
+  height: 100%;
+  width: 100%;
+  overflow: auto;
+}
+.sidebar-sub-level-items {
+  display: none;
+  padding-bottom: 8px;
+}
+.sidebar-sub-level-items > li a {
+  padding: 8px 16px 8px 40px;
+}
+.sidebar-top-level-items {
+  margin-bottom: 60px;
+}
+
+@media (min-width: 576px) {
+  .sidebar-top-level-items > li > a {
+    margin-right: 1px;
+  }
+}
+.sidebar-top-level-items > li .badge.badge-pill {
+  background-color: rgba(0, 0, 0, 0.08);
+  color: #666;
+}
+.sidebar-top-level-items > li.active {
+  background: rgba(0, 0, 0, 0.04);
+}
+.sidebar-top-level-items > li.active > a {
+  margin-left: 4px;
+  padding-left: 12px;
+}
+.sidebar-top-level-items > li.active .badge.badge-pill {
+  font-weight: 600;
+}
+.sidebar-top-level-items > li.active .sidebar-sub-level-items:not(.is-fly-out-only) {
+  display: block;
+}
+.toggle-sidebar-button,
+.close-nav-button {
+  width: 219px;
+  position: fixed;
+  height: 48px;
+  bottom: 0;
+  padding: 0 16px;
+  background-color: #fafafa;
+  border: 0;
+  border-top: 1px solid #dbdbdb;
+  color: #666;
+  display: flex;
+  align-items: center;
+}
+.toggle-sidebar-button svg,
+.close-nav-button svg {
+  margin-right: 8px;
+}
+.toggle-sidebar-button .icon-chevron-double-lg-right,
+.close-nav-button .icon-chevron-double-lg-right {
+  display: none;
+}
+.collapse-text {
+  white-space: nowrap;
+  overflow: hidden;
+}
+.sidebar-collapsed-desktop .context-header {
+  height: 60px;
+  width: 50px;
+}
+.sidebar-collapsed-desktop .context-header a {
+  padding: 10px 4px;
+}
+.sidebar-collapsed-desktop .sidebar-top-level-items > li .sidebar-sub-level-items:not(.flyout-list) {
+  display: none;
+}
+.sidebar-collapsed-desktop .nav-icon-container {
+  margin-right: 0;
+}
+.sidebar-collapsed-desktop .toggle-sidebar-button {
+  padding: 16px;
+  width: 49px;
+}
+.sidebar-collapsed-desktop .toggle-sidebar-button .collapse-text,
+.sidebar-collapsed-desktop .toggle-sidebar-button .icon-chevron-double-lg-left {
+  display: none;
+}
+.sidebar-collapsed-desktop .toggle-sidebar-button .icon-chevron-double-lg-right {
+  display: block;
+  margin: 0;
+}
+.fly-out-top-item > a {
+  display: flex;
+}
+.fly-out-top-item .fly-out-badge {
+  margin-left: 8px;
+}
+.fly-out-top-item-name {
+  flex: 1;
+}
+.close-nav-button {
+  display: none;
+}
+
+@media (max-width: 767.98px) {
+  .close-nav-button {
+    display: flex;
+  }
+  .toggle-sidebar-button {
+    display: none;
+  }
+}
+table.table {
+  margin-bottom: 16px;
+}
+table.table .dropdown-menu a {
+  text-decoration: none;
+}
+table.table .success,
+table.table .info {
+  color: #fff;
+}
+table.table .success a:not(.btn),
+table.table .info a:not(.btn) {
+  text-decoration: underline;
+  color: #fff;
+}
+pre {
+  font-family: "Menlo", "DejaVu Sans Mono", "Liberation Mono", "Consolas", "Ubuntu Mono", "Courier New", "andale mono", "lucida console", monospace;
+  display: block;
+  padding: 8px 12px;
+  margin: 0 0 8px;
+  font-size: 13px;
+  word-break: break-all;
+  word-wrap: break-word;
+  color: #303030;
+  background-color: #fafafa;
+  border: 1px solid #dbdbdb;
+  border-radius: 2px;
+}
+.monospace {
+  font-family: "Menlo", "DejaVu Sans Mono", "Liberation Mono", "Consolas", "Ubuntu Mono", "Courier New", "andale mono", "lucida console", monospace;
+}
+input::-moz-placeholder,
+textarea::-moz-placeholder {
+  color: #868686;
+  opacity: 1;
+}
+input::-ms-input-placeholder,
+textarea::-ms-input-placeholder {
+  color: #868686;
+}
+input:-ms-input-placeholder,
+textarea:-ms-input-placeholder {
+  color: #868686;
+}
+svg {
+  fill: currentColor;
+}
+
+svg.s12 {
+  width: 12px;
+  height: 12px;
+}
+
+svg.s16 {
+  width: 16px;
+  height: 16px;
+}
+
+svg.s18 {
+  width: 18px;
+  height: 18px;
+}
+
+svg.s12 {
+  vertical-align: -1px;
+}
+
+svg.s16 {
+  vertical-align: -3px;
+}
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
+}
+table.code {
+  width: 100%;
+  font-family: "Menlo", "DejaVu Sans Mono", "Liberation Mono", "Consolas", "Ubuntu Mono", "Courier New", "andale mono", "lucida console", monospace;
+  border: 0;
+  border-collapse: separate;
+  margin: 0;
+  padding: 0;
+  table-layout: fixed;
+  border-radius: 0 0 4px 4px;
+}
+.frame .badge.badge-pill {
+  position: absolute;
+  background-color: #428fdc;
+  color: #fff;
+  border: #fff 1px solid;
+  min-height: 16px;
+  padding: 5px 8px;
+  border-radius: 12px;
+}
+.frame .badge.badge-pill {
+  transform: translate(-50%, -50%);
+}
+.color-label {
+  padding: 0 0.5rem;
+  line-height: 16px;
+  border-radius: 100px;
+  color: #fff;
+}
+.label-link {
+  display: inline-flex;
+  vertical-align: text-bottom;
+}
+.label-link .label {
+  vertical-align: inherit;
+  font-size: 12px;
+}
+.login-page .container {
+  max-width: 960px;
+}
+.login-page .navbar-gitlab .container {
+  max-width: none;
+}
+.login-page .flash-container {
+  margin-bottom: 16px;
+}
+.login-page .brand-holder {
+  font-size: 18px;
+  line-height: 1.5;
+}
+.login-page .brand-holder p {
+  font-size: 16px;
+  color: #888;
+}
+.login-page .brand-holder h3 {
+  font-size: 22px;
+}
+.login-page .brand-holder img {
+  max-width: 100%;
+  margin-bottom: 30px;
+}
+.login-page .brand-holder a {
+  font-weight: 600;
+}
+.login-page p {
+  font-size: 13px;
+}
+.login-page .login-box,
+.login-page .omniauth-container {
+  box-shadow: 0 0 0 1px #dbdbdb;
+  border-bottom-right-radius: 0.25rem;
+  border-bottom-left-radius: 0.25rem;
+  padding: 15px;
+}
+.login-page .login-box .nav .active a,
+.login-page .omniauth-container .nav .active a {
+  background: transparent;
+}
+.login-page .login-box .login-body,
+.login-page .omniauth-container .login-body {
+  font-size: 13px;
+}
+.login-page .login-box .login-body input + p,
+.login-page .login-box .login-body input ~ p.field-validation,
+.login-page .omniauth-container .login-body input + p,
+.login-page .omniauth-container .login-body input ~ p.field-validation {
+  margin-top: 5px;
+}
+.login-page .login-box .login-body .username .validation-success,
+.login-page .omniauth-container .login-body .username .validation-success {
+  color: #217645;
+}
+.login-page .login-box .login-body .username .validation-error,
+.login-page .omniauth-container .login-body .username .validation-error {
+  color: #dd2b0e;
+}
+.login-page .omniauth-container {
+  border-radius: 0.25rem;
+  font-size: 13px;
+}
+.login-page .omniauth-container p {
+  margin: 0;
+}
+.login-page .omniauth-container form {
+  width: 48%;
+  padding: 0;
+  border: 0;
+  background: none;
+  margin-bottom: 16px;
+}
+
+@media (max-width: 991.98px) {
+  .login-page .omniauth-container form {
+    width: 100%;
+  }
+}
+.login-page .omniauth-container .omniauth-btn {
+  width: 100%;
+  padding: 8px;
+}
+.login-page .omniauth-container .omniauth-btn img {
+  width: 1.125rem;
+  height: 1.125rem;
+  margin-right: 16px;
+}
+.login-page .new-session-tabs {
+  display: flex;
+  box-shadow: 0 0 0 1px #dbdbdb;
+  border-top-right-radius: 4px;
+  border-top-left-radius: 4px;
+}
+.login-page .new-session-tabs li {
+  flex: 1;
+  text-align: center;
+  border-left: 1px solid #dbdbdb;
+}
+.login-page .new-session-tabs li:first-of-type {
+  border-left: 0;
+  border-top-left-radius: 4px;
+}
+.login-page .new-session-tabs li:last-of-type {
+  border-top-right-radius: 4px;
+}
+.login-page .new-session-tabs li:not(.active) {
+  background-color: #fafafa;
+}
+.login-page .new-session-tabs li a {
+  width: 100%;
+  font-size: 18px;
+}
+.login-page .new-session-tabs li.active > a {
+  cursor: default;
+}
+.login-page .submit-container {
+  margin-top: 16px;
+}
+.login-page input[type='submit'] {
+  margin-bottom: 0;
+}
+.login-page .devise-errors h2 {
+  margin-top: 0;
+  font-size: 14px;
+  color: #ae1800;
+}
+.devise-layout-html {
+  margin: 0;
+  padding: 0;
+  height: 100%;
+}
+.devise-layout-html body {
+  height: calc(100% - 51px);
+  margin: 0;
+  padding: 0;
+}
+.devise-layout-html body.navless {
+  height: calc(100% - 11px);
+}
+.devise-layout-html body .page-wrap {
+  min-height: 100%;
+  position: relative;
+}
+.devise-layout-html body .footer-container,
+.devise-layout-html body hr.footer-fixed {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 40px;
+  background: #fff;
+}
+.devise-layout-html body .login-page-broadcast {
+  margin-top: 40px;
+}
+.devise-layout-html body .navless-container {
+  padding: 65px 15px;
+}
+
+@media (max-width: 575.98px) {
+  .devise-layout-html body .navless-container {
+    padding: 0 15px 65px;
+  }
+}
+.milestones {
+  padding: 8px;
+  margin-top: 8px;
+  border-radius: 4px;
+  background-color: #dbdbdb;
+}
+.search {
+  margin: 0 8px;
+}
+.search form {
+  margin: 0;
+  padding: 4px;
+  width: 200px;
+  line-height: 24px;
+  height: 32px;
+  border: 0;
+  border-radius: 4px;
+}
+
+@media (min-width: 1200px) {
+  .search form {
+    width: 320px;
+  }
+}
+.search .search-input {
+  border: 0;
+  font-size: 14px;
+  padding: 0 20px 0 0;
+  margin-left: 5px;
+  line-height: 25px;
+  width: 98%;
+  color: #fff;
+  background: none;
+}
+.search .search-input-container {
+  display: flex;
+  position: relative;
+}
+.search .search-input-wrap {
+  width: 100%;
+}
+.search .search-input-wrap .search-icon,
+.search .search-input-wrap .clear-icon {
+  position: absolute;
+  right: 5px;
+  top: 4px;
+}
+.search .search-input-wrap .search-icon {
+  -moz-user-select: none;
+  user-select: none;
+}
+.search .search-input-wrap .clear-icon {
+  display: none;
+}
+.search .search-input-wrap .dropdown {
+  position: static;
+}
+.search .search-input-wrap .dropdown-menu {
+  left: -5px;
+  max-height: 400px;
+  overflow: auto;
+}
+
+@media (min-width: 1200px) {
+  .search .search-input-wrap .dropdown-menu {
+    width: 320px;
+  }
+}
+.search .search-input-wrap .dropdown-content {
+  max-height: 382px;
+}
+.settings {
+  border-top: 1px solid #dbdbdb;
+}
+.settings:first-of-type {
+  margin-top: 10px;
+  border: 0;
+}
+.settings + div .settings:first-of-type {
+  margin-top: 0;
+  border-top: 1px solid #dbdbdb;
+}
+.avatar, .avatar-container {
+  float: left;
+  margin-right: 16px;
+  border-radius: 50%;
+  border: 1px solid #f5f5f5;
+}
+.s16.avatar, .s16.avatar-container {
+  width: 16px;
+  height: 16px;
+  margin-right: 8px;
+}
+.s18.avatar, .s18.avatar-container {
+  width: 18px;
+  height: 18px;
+  margin-right: 8px;
+}
+.s40.avatar, .s40.avatar-container {
+  width: 40px;
+  height: 40px;
+  margin-right: 8px;
+}
+.avatar {
+  transition-property: none;
+  width: 40px;
+  height: 40px;
+  padding: 0;
+  background: #fdfdfd;
+  overflow: hidden;
+  border-color: rgba(0, 0, 0, 0.1);
+}
+.avatar.center {
+  font-size: 14px;
+  line-height: 1.8em;
+  text-align: center;
+}
+.avatar.avatar-tile {
+  border-radius: 0;
+  border: 0;
+}
+.avatar-container {
+  overflow: hidden;
+  display: flex;
+}
+.avatar-container a {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  text-decoration: none;
+}
+.avatar-container .avatar {
+  border-radius: 0;
+  border: 0;
+  height: auto;
+  width: 100%;
+  margin: 0;
+  align-self: center;
+}
+.avatar-container.s40 {
+  min-width: 40px;
+  min-height: 40px;
+}
+.rect-avatar {
+  border-radius: 2px;
+}
+.rect-avatar.s16 {
+  border-radius: 2px;
+}
+.rect-avatar.s18 {
+  border-radius: 2px;
+}
+.rect-avatar.s40 {
+  border-radius: 4px;
+}
+.tab-width-8 {
+  -moz-tab-size: 8;
+  tab-size: 8;
+}
+.gl-sr-only {
+  border: 0;
+  clip: rect(0, 0, 0, 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}
+.gl-mt-5 {
+  margin-top: 1rem;
+}
+.gl-ml-3 {
+  margin-left: 0.5rem;
+}
+.content-wrapper > .alert-wrapper,
+#content-body, .modal-dialog {
+  display: block;
+}
+@import 'cloaking';
+@include cloak-startup-scss(none);
diff --git a/app/assets/stylesheets/themes/_dark.scss b/app/assets/stylesheets/themes/_dark.scss
index e2b4d6b8e7a..bfbcb8c13c6 100644
--- a/app/assets/stylesheets/themes/_dark.scss
+++ b/app/assets/stylesheets/themes/_dark.scss
@@ -11,15 +11,6 @@ $gray-800: #f2f2f2;
 $gray-900: #fafafa;
 $gray-950: #fff;
 
-$gl-gray-100: #333;
-$gl-gray-200: #555;
-$gl-gray-350: #666;
-$gl-gray-400: #777;
-$gl-gray-500: #999;
-$gl-gray-600: #aaa;
-$gl-gray-700: #ccc;
-$gl-gray-800: #ddd;
-
 $green-50: #072b15;
 $green-100: #0a4020;
 $green-200: #0e5a2d;
@@ -94,6 +85,86 @@ $white-light: #2b2b2b;
 $white-normal: #333;
 $white-dark: #444;
 
+$border-color: #4f4f4f;
+
+body.gl-dark {
+  --gray-10: #{$gray-10};
+  --gray-50: #{$gray-50};
+  --gray-100: #{$gray-100};
+  --gray-200: #{$gray-200};
+  --gray-300: #{$gray-300};
+  --gray-400: #{$gray-400};
+  --gray-500: #{$gray-500};
+  --gray-600: #{$gray-600};
+  --gray-700: #{$gray-700};
+  --gray-800: #{$gray-800};
+  --gray-900: #{$gray-900};
+  --gray-950: #{$gray-950};
+
+  --green-50: #{$green-50};
+  --green-100: #{$green-100};
+  --green-200: #{$green-200};
+  --green-300: #{$green-300};
+  --green-400: #{$green-400};
+  --green-500: #{$green-500};
+  --green-600: #{$green-600};
+  --green-700: #{$green-700};
+  --green-800: #{$green-800};
+  --green-900: #{$green-900};
+  --green-950: #{$green-950};
+
+  --blue-50: #{$blue-50};
+  --blue-100: #{$blue-100};
+  --blue-200: #{$blue-200};
+  --blue-300: #{$blue-300};
+  --blue-400: #{$blue-400};
+  --blue-500: #{$blue-500};
+  --blue-600: #{$blue-600};
+  --blue-700: #{$blue-700};
+  --blue-800: #{$blue-800};
+  --blue-900: #{$blue-900};
+  --blue-950: #{$blue-950};
+
+  --orange-50: #{$orange-50};
+  --orange-100: #{$orange-100};
+  --orange-200: #{$orange-200};
+  --orange-300: #{$orange-300};
+  --orange-400: #{$orange-400};
+  --orange-500: #{$orange-500};
+  --orange-600: #{$orange-600};
+  --orange-700: #{$orange-700};
+  --orange-800: #{$orange-800};
+  --orange-900: #{$orange-900};
+  --orange-950: #{$orange-950};
+
+  --red-50: #{$red-50};
+  --red-100: #{$red-100};
+  --red-200: #{$red-200};
+  --red-300: #{$red-300};
+  --red-400: #{$red-400};
+  --red-500: #{$red-500};
+  --red-600: #{$red-600};
+  --red-700: #{$red-700};
+  --red-800: #{$red-800};
+  --red-900: #{$red-900};
+  --red-950: #{$red-950};
+
+  --indigo-50: #{$indigo-50};
+  --indigo-100: #{$indigo-100};
+  --indigo-200: #{$indigo-200};
+  --indigo-300: #{$indigo-300};
+  --indigo-400: #{$indigo-400};
+  --indigo-500: #{$indigo-500};
+  --indigo-600: #{$indigo-600};
+  --indigo-700: #{$indigo-700};
+  --indigo-800: #{$indigo-800};
+  --indigo-900: #{$indigo-900};
+  --indigo-950: #{$indigo-950};
+
+  --gl-text-color: #{$gray-900};
+  --border-color: #{$border-color};
+}
+
 $border-white-light: $gray-900;
 $border-white-normal: $gray-900;
 
diff --git a/app/assets/stylesheets/themes/theme_blue.scss b/app/assets/stylesheets/themes/theme_blue.scss
new file mode 100644
index 00000000000..9f9802f77f4
--- /dev/null
+++ b/app/assets/stylesheets/themes/theme_blue.scss
@@ -0,0 +1,14 @@
+@import './theme_helper';
+
+body {
+  &.ui-blue {
+    @include gitlab-theme(
+      $theme-blue-200,
+      $theme-blue-500,
+      $theme-blue-700,
+      $theme-blue-800,
+      $theme-blue-900,
+      $white
+    );
+  }
+}
diff --git a/app/assets/stylesheets/themes/theme_dark.scss b/app/assets/stylesheets/themes/theme_dark.scss
new file mode 100644
index 00000000000..e6db6cd2a5e
--- /dev/null
+++ b/app/assets/stylesheets/themes/theme_dark.scss
@@ -0,0 +1,14 @@
+@import './theme_helper';
+
+body {
+  &.ui-dark {
+    @include gitlab-theme(
+      $gray-200,
+      $gray-300,
+      $gray-500,
+      $gray-700,
+      $gray-900,
+      $white
+    );
+  }
+}
diff --git a/app/assets/stylesheets/themes/theme_green.scss b/app/assets/stylesheets/themes/theme_green.scss
new file mode 100644
index 00000000000..6dcad6e1301
--- /dev/null
+++ b/app/assets/stylesheets/themes/theme_green.scss
@@ -0,0 +1,14 @@
+@import './theme_helper';
+
+body {
+  &.ui-green {
+    @include gitlab-theme(
+      $theme-green-200,
+      $theme-green-500,
+      $theme-green-700,
+      $theme-green-800,
+      $theme-green-900,
+      $white
+    );
+  }
+}
diff --git a/app/assets/stylesheets/themes/theme_helper.scss b/app/assets/stylesheets/themes/theme_helper.scss
new file mode 100644
index 00000000000..85115cfd5d9
--- /dev/null
+++ b/app/assets/stylesheets/themes/theme_helper.scss
@@ -0,0 +1,204 @@
+@import '../page_bundles/mixins_and_variables_and_functions';
+/**
+ * Styles the GitLab application with a specific color theme
+ */
+@mixin gitlab-theme(
+  $search-and-nav-links,
+  $active-tab-border,
+  $border-and-box-shadow,
+  $sidebar-text,
+  $nav-svg-color,
+  $color-alternate
+) {
+  // Header
+
+  .navbar-gitlab {
+    background-color: $nav-svg-color;
+
+    .navbar-collapse {
+      color: $search-and-nav-links;
+    }
+
+    .container-fluid {
+      .navbar-toggler {
+        border-left: 1px solid lighten($border-and-box-shadow, 10%);
+
+        svg {
+          fill: $search-and-nav-links;
+        }
+      }
+    }
+
+    .navbar-sub-nav,
+    .navbar-nav {
+      > li {
+        > a,
+        > button {
+          &:hover,
+          &:focus {
+            background-color: rgba($search-and-nav-links, 0.2);
+          }
+        }
+
+        &.active,
+        &.dropdown.show {
+          > a,
+          > button {
+            color: $nav-svg-color;
+            background-color: $color-alternate;
+          }
+        }
+
+        &.line-separator {
+          border-left: 1px solid rgba($search-and-nav-links, 0.2);
+        }
+      }
+    }
+
+    .navbar-sub-nav {
+      color: $search-and-nav-links;
+    }
+
+    .nav {
+      > li {
+        color: $search-and-nav-links;
+
+        > a {
+          &.header-user-dropdown-toggle {
+            .header-user-avatar {
+              border-color: $search-and-nav-links;
+            }
+
+            .header-user-notification-dot {
+              border: 2px solid $nav-svg-color;
+            }
+          }
+
+          &:hover,
+          &:focus {
+            @include media-breakpoint-up(sm) {
+              background-color: rgba($search-and-nav-links, 0.2);
+            }
+
+            svg {
+              fill: currentColor;
+            }
+
+            &.header-user-dropdown-toggle .header-user-notification-dot {
+              border-color: $nav-svg-color + 33;
+            }
+          }
+        }
+
+        &.active > a,
+        &.dropdown.show > a {
+          color: $nav-svg-color;
+          background-color: $color-alternate;
+
+          &:hover {
+            svg {
+              fill: $nav-svg-color;
+            }
+          }
+
+          &.header-user-dropdown-toggle .header-user-notification-dot {
+            border-color: $white;
+          }
+        }
+
+        .impersonated-user,
+        .impersonated-user:hover {
+          svg {
+            fill: $nav-svg-color;
+          }
+        }
+      }
+    }
+  }
+
+  .navbar .title {
+    > a {
+      &:hover,
+      &:focus {
+        background-color: rgba($search-and-nav-links, 0.2);
+      }
+    }
+  }
+
+  .search {
+    form {
+      background-color: rgba($search-and-nav-links, 0.2);
+
+      &:hover {
+        background-color: rgba($search-and-nav-links, 0.3);
+      }
+    }
+
+    .search-input::placeholder {
+      color: rgba($search-and-nav-links, 0.8);
+    }
+
+    .search-input-wrap {
+      .search-icon,
+      .clear-icon {
+        fill: rgba($search-and-nav-links, 0.8);
+      }
+    }
+
+    &.search-active {
+      form {
+        background-color: $white;
+      }
+
+      .search-input-wrap {
+        .search-icon {
+          fill: rgba($search-and-nav-links, 0.8);
+        }
+      }
+    }
+  }
+
+  // Sidebar
+  .nav-sidebar li.active {
+    box-shadow: inset 4px 0 0 $border-and-box-shadow;
+
+    > a {
+      color: $sidebar-text;
+    }
+
+    .nav-icon-container svg {
+      fill: $sidebar-text;
+    }
+  }
+
+  .sidebar-top-level-items > li.active .badge.badge-pill {
+    color: $sidebar-text;
+  }
+
+  .nav-links li {
+    &.active a,
+    &.md-header-tab.active button,
+    a.active {
+      border-bottom: 2px solid $active-tab-border;
+
+      .badge.badge-pill {
+        font-weight: $gl-font-weight-bold;
+      }
+    }
+  }
+
+  .branch-header-title {
+    color: $border-and-box-shadow;
+  }
+
+  .ide-sidebar-link {
+    &.active {
+      color: $border-and-box-shadow;
+      box-shadow: inset 3px 0 $border-and-box-shadow;
+
+      &.is-right {
+        box-shadow: inset -3px 0 $border-and-box-shadow;
+      }
+    }
+  }
+}
diff --git a/app/assets/stylesheets/themes/theme_indigo.scss b/app/assets/stylesheets/themes/theme_indigo.scss
new file mode 100644
index 00000000000..bbf14afcca2
--- /dev/null
+++ b/app/assets/stylesheets/themes/theme_indigo.scss
@@ -0,0 +1,14 @@
+@import './theme_helper';
+
+body {
+  &.ui-indigo {
+    @include gitlab-theme(
+      $indigo-200,
+      $indigo-500,
+      $indigo-700,
+      $indigo-800,
+      $indigo-900,
+      $white
+    );
+  }
+}
diff --git a/app/assets/stylesheets/themes/theme_light.scss b/app/assets/stylesheets/themes/theme_light.scss
new file mode 100644
index 00000000000..58003db4236
--- /dev/null
+++ b/app/assets/stylesheets/themes/theme_light.scss
@@ -0,0 +1,129 @@
+@import './theme_helper';
+
+body {
+  &.ui-light {
+    @include gitlab-theme(
+      $gray-500,
+      $gray-700,
+      $gray-500,
+      $gray-500,
+      $gray-50,
+      $gray-500
+    );
+
+    .navbar-gitlab {
+      background-color: $gray-50;
+      box-shadow: 0 1px 0 0 $border-color;
+
+      .logo-text svg {
+        fill: $gray-900;
+      }
+
+      .navbar-sub-nav,
+      .navbar-nav {
+        > li {
+          > a:hover,
+          > a:focus,
+          > button:hover {
+            color: $gray-900;
+          }
+
+          &.active > a,
+          &.active > a:hover,
+          &.active > button {
+            color: $white;
+          }
+        }
+      }
+
+      .container-fluid {
+        .navbar-toggler,
+        .navbar-toggler:hover {
+          color: $gray-500;
+          border-left: 1px solid $gray-100;
+        }
+      }
+    }
+
+    .search {
+      form {
+        background-color: $white;
+        box-shadow: inset 0 0 0 1px $border-color;
+
+        &:hover {
+          background-color: $white;
+          box-shadow: inset 0 0 0 1px $blue-200;
+        }
+      }
+
+      .search-input-wrap {
+        .search-icon {
+          fill: $gray-100;
+        }
+
+        .search-input {
+          color: $gl-text-color;
+        }
+      }
+    }
+
+    .nav-sidebar li.active {
+      > a {
+        color: $gray-900;
+      }
+
+      svg {
+        fill: $gray-900;
+      }
+    }
+
+    .sidebar-top-level-items > li.active .badge.badge-pill {
+      color: $gray-900;
+    }
+  }
+
+  &.gl-dark {
+    .logo-text svg {
+      fill: $gl-text-color;
+    }
+
+    .navbar-gitlab {
+      background-color: $gray-50;
+
+      .navbar-sub-nav,
+      .navbar-nav {
+        li {
+          > a:hover,
+          > a:focus,
+          > button:hover,
+          > button:focus {
+            color: $gl-text-color;
+            background-color: $gray-200;
+          }
+        }
+
+        li.active,
+        li.dropdown.show {
+          > a,
+          > button {
+            color: $gl-text-color;
+            background-color: $gray-200;
+          }
+        }
+      }
+
+      .search {
+        form {
+          background-color: $gray-100;
+          box-shadow: inset 0 0 0 1px $border-color;
+
+          &:active,
+          &:hover {
+            background-color: $gray-100;
+            box-shadow: inset 0 0 0 1px $blue-200;
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/app/assets/stylesheets/themes/theme_light_blue.scss b/app/assets/stylesheets/themes/theme_light_blue.scss
new file mode 100644
index 00000000000..07d1c60a4c6
--- /dev/null
+++ b/app/assets/stylesheets/themes/theme_light_blue.scss
@@ -0,0 +1,14 @@
+@import './theme_helper';
+
+body {
+  &.ui-light-blue {
+    @include gitlab-theme(
+      $theme-light-blue-200,
+      $theme-light-blue-500,
+      $theme-light-blue-500,
+      $theme-light-blue-700,
+      $theme-light-blue-700,
+      $white
+    );
+  }
+}
diff --git a/app/assets/stylesheets/themes/theme_light_green.scss b/app/assets/stylesheets/themes/theme_light_green.scss
new file mode 100644
index 00000000000..e122501b93c
--- /dev/null
+++ b/app/assets/stylesheets/themes/theme_light_green.scss
@@ -0,0 +1,14 @@
+@import './theme_helper';
+
+body {
+  &.ui-light-green {
+    @include gitlab-theme(
+      $theme-green-200,
+      $theme-green-500,
+      $theme-green-500,
+      $theme-light-green-700,
+      $theme-light-green-700,
+      $white
+    );
+  }
+}
diff --git a/app/assets/stylesheets/themes/theme_light_indigo.scss b/app/assets/stylesheets/themes/theme_light_indigo.scss
new file mode 100644
index 00000000000..5b607238ed9
--- /dev/null
+++ b/app/assets/stylesheets/themes/theme_light_indigo.scss
@@ -0,0 +1,14 @@
+@import './theme_helper';
+
+body {
+  &.ui-light-indigo {
+    @include gitlab-theme(
+      $indigo-200,
+      $indigo-500,
+      $indigo-500,
+      $indigo-700,
+      $indigo-700,
+      $white
+    );
+  }
+}
diff --git a/app/assets/stylesheets/themes/theme_light_red.scss b/app/assets/stylesheets/themes/theme_light_red.scss
new file mode 100644
index 00000000000..fd3980183f3
--- /dev/null
+++ b/app/assets/stylesheets/themes/theme_light_red.scss
@@ -0,0 +1,14 @@
+@import './theme_helper';
+
+body {
+  &.ui-light-red {
+    @include gitlab-theme(
+      $theme-light-red-200,
+      $theme-light-red-500,
+      $theme-light-red-500,
+      $theme-light-red-700,
+      $theme-light-red-700,
+      $white
+    );
+  }
+}
diff --git a/app/assets/stylesheets/themes/theme_red.scss b/app/assets/stylesheets/themes/theme_red.scss
new file mode 100644
index 00000000000..fa5ecc09f50
--- /dev/null
+++ b/app/assets/stylesheets/themes/theme_red.scss
@@ -0,0 +1,14 @@
+@import './theme_helper';
+
+body {
+  &.ui-red {
+    @include gitlab-theme(
+      $theme-red-200,
+      $theme-red-500,
+      $theme-red-700,
+      $theme-red-800,
+      $theme-red-900,
+      $white
+    );
+  }
+}
diff --git a/app/assets/stylesheets/utilities.scss b/app/assets/stylesheets/utilities.scss
index 99a13cc4e44..9c666331c4f 100644
--- a/app/assets/stylesheets/utilities.scss
+++ b/app/assets/stylesheets/utilities.scss
@@ -112,10 +112,47 @@
   top: 66vh;
 }
 
-// Remove when https://gitlab.com/gitlab-org/gitlab-ui/-/issues/871
-// gets fixed on GitLab UI
-.gl-sm-w-auto\! {
+.gl-shadow-x0-y0-b3-s1-blue-500 {
+  box-shadow: inset 0 0 3px $gl-border-size-1 $blue-500;
+}
+
+
+.gl-sm-align-items-flex-end {
+  @media (min-width: $breakpoint-sm) {
+    align-items: flex-end;
+  }
+}
+
+.gl-sm-text-body {
+  @media (min-width: $breakpoint-sm) {
+    color: $body-color;
+  }
+}
+
+.gl-sm-font-weight-bold {
   @media (min-width: $breakpoint-sm) {
+    font-weight: $gl-font-weight-bold;
+  }
+}
+
+.gl-min-h-6 {
+  min-height: $gl-spacing-scale-6;
+}
+
+.gl-md-justify-content-end {
+  @media (min-width: $breakpoint-md) {
     width: auto !important;
   }
 }
+
+.gl-display-md-flex {
+  @media (min-width: $breakpoint-md) {
+    display: flex;
+  }
+}
+
+.gl-display-md-none {
+  @media (min-width: $breakpoint-md) {
+    display: none;
+  }
+}
diff --git a/app/assets/stylesheets/vendors/atwho.scss b/app/assets/stylesheets/vendors/atwho.scss
index f855c5c0d3d..f31dbbeafe8 100644
--- a/app/assets/stylesheets/vendors/atwho.scss
+++ b/app/assets/stylesheets/vendors/atwho.scss
@@ -24,8 +24,8 @@
 
   .has-warning {
     .description {
-      color: $orange-700;
-      background-color: $orange-100;
+      color: $gray-900;
+      background-color: $orange-50;
     }
   }
 
@@ -58,7 +58,7 @@
         }
 
         &.has-warning {
-          color: $orange-700;
+          color: $orange-500;
         }
       }
 
diff --git a/app/assets/stylesheets/vendors/tribute.scss b/app/assets/stylesheets/vendors/tribute.scss
index 309cdf7245c..65f3d1b6199 100644
--- a/app/assets/stylesheets/vendors/tribute.scss
+++ b/app/assets/stylesheets/vendors/tribute.scss
@@ -1,6 +1,6 @@
 .tribute-container {
   background: $white;
-  border: 1px solid $gl-gray-100;
+  border: 1px solid $gray-100;
   border-radius: $border-radius-base;
   box-shadow: 0 0 5px $issue-boards-card-shadow;
   color: $black;
@@ -22,7 +22,7 @@
     white-space: nowrap;
 
     small {
-      color: $gl-gray-500;
+      color: $gray-500;
     }
 
     &.highlight {