Add latest changes from gitlab-org/gitlab@master

37 files changed, 283 insertions, 4684 deletions

diff --git a/app/assets/javascripts/admin/abuse_report/components/graphql/abuse_report.query.graphql b/app/assets/javascripts/admin/abuse_report/components/graphql/abuse_report.query.graphql
deleted file mode 100644
index f5b075cb9af..00000000000
--- a/app/assets/javascripts/admin/abuse_report/components/graphql/abuse_report.query.graphql
+++ /dev/null
@@ -1,13 +0,0 @@
-query abuseReportQuery($id: AbuseReportID!) {
-  abuseReport(id: $id) {
-    labels {
-      nodes {
-        id
-        title
-        description
-        color
-        textColor
-      }
-    }
-  }
-}
diff --git a/app/assets/javascripts/admin/abuse_report/components/labels_select.vue b/app/assets/javascripts/admin/abuse_report/components/labels_select.vue
index 747c9a1a947..d2d143f0460 100644
--- a/app/assets/javascripts/admin/abuse_report/components/labels_select.vue
+++ b/app/assets/javascripts/admin/abuse_report/components/labels_select.vue
@@ -11,7 +11,7 @@ import DropdownContentsCreateView from '~/sidebar/components/labels/labels_selec
 import DropdownHeader from '~/sidebar/components/labels/labels_select_widget/dropdown_header.vue';
 import DropdownFooter from '~/sidebar/components/labels/labels_select_widget/dropdown_footer.vue';
 import DropdownWidget from '~/vue_shared/components/dropdown/dropdown_widget/dropdown_widget.vue';
-import abuseReportLabelsQuery from './graphql/abuse_report_labels.query.graphql';
+import abuseReportLabelsQuery from '../graphql/abuse_report_labels.query.graphql';
 
 export default {
   components: {
diff --git a/app/assets/javascripts/admin/abuse_report/components/report_details.vue b/app/assets/javascripts/admin/abuse_report/components/report_details.vue
index 10e1dca7f91..89017e6cbd4 100644
--- a/app/assets/javascripts/admin/abuse_report/components/report_details.vue
+++ b/app/assets/javascripts/admin/abuse_report/components/report_details.vue
@@ -1,8 +1,8 @@
 <script>
 import { __ } from '~/locale';
 import { createAlert } from '~/alert';
+import abuseReportQuery from '../graphql/abuse_report.query.graphql';
 import LabelsSelect from './labels_select.vue';
-import abuseReportQuery from './graphql/abuse_report.query.graphql';
 
 export default {
   name: 'ReportDetails',
diff --git a/app/assets/javascripts/admin/abuse_report/graphql/abuse_report.query.graphql b/app/assets/javascripts/admin/abuse_report/graphql/abuse_report.query.graphql
new file mode 100644
index 00000000000..d864b44b39c
--- /dev/null
+++ b/app/assets/javascripts/admin/abuse_report/graphql/abuse_report.query.graphql
@@ -0,0 +1,29 @@
+#import "./notes/abuse_report_note.fragment.graphql"
+#import "./notes/abuse_report_discussion_resolved_status.fragment.graphql"
+
+query abuseReportQuery($id: AbuseReportID!) {
+  abuseReport(id: $id) {
+    id
+    labels {
+      nodes {
+        id
+        title
+        description
+        color
+        textColor
+      }
+    }
+    discussions {
+      nodes {
+        id
+        replyId
+        ...AbuseReportDiscussionResolvedStatus
+        notes {
+          nodes {
+            ...AbuseReportNote
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/app/assets/javascripts/admin/abuse_report/components/graphql/abuse_report_labels.query.graphql b/app/assets/javascripts/admin/abuse_report/graphql/abuse_report_labels.query.graphql
index 4e724b4db2c..4e724b4db2c 100644
--- a/app/assets/javascripts/admin/abuse_report/components/graphql/abuse_report_labels.query.graphql
+++ b/app/assets/javascripts/admin/abuse_report/graphql/abuse_report_labels.query.graphql
diff --git a/app/assets/javascripts/admin/abuse_report/components/graphql/create_abuse_report_label.mutation.graphql b/app/assets/javascripts/admin/abuse_report/graphql/create_abuse_report_label.mutation.graphql
index 0781b8e634b..0781b8e634b 100644
--- a/app/assets/javascripts/admin/abuse_report/components/graphql/create_abuse_report_label.mutation.graphql
+++ b/app/assets/javascripts/admin/abuse_report/graphql/create_abuse_report_label.mutation.graphql
diff --git a/app/assets/javascripts/admin/abuse_report/graphql/notes/abuse_report_discussion_resolved_status.fragment.graphql b/app/assets/javascripts/admin/abuse_report/graphql/notes/abuse_report_discussion_resolved_status.fragment.graphql
new file mode 100644
index 00000000000..5ca56c2ded2
--- /dev/null
+++ b/app/assets/javascripts/admin/abuse_report/graphql/notes/abuse_report_discussion_resolved_status.fragment.graphql
@@ -0,0 +1,11 @@
+fragment AbuseReportDiscussionResolvedStatus on Discussion {
+  id
+  resolvable
+  resolved
+  resolvedAt
+  resolvedBy {
+    id
+    name
+    webUrl
+  }
+}
diff --git a/app/assets/javascripts/admin/abuse_report/graphql/notes/abuse_report_note.fragment.graphql b/app/assets/javascripts/admin/abuse_report/graphql/notes/abuse_report_note.fragment.graphql
new file mode 100644
index 00000000000..43bd2b3a6e6
--- /dev/null
+++ b/app/assets/javascripts/admin/abuse_report/graphql/notes/abuse_report_note.fragment.graphql
@@ -0,0 +1,24 @@
+#import "~/graphql_shared/fragments/author.fragment.graphql"
+#import "./abuse_report_note_permissions.fragment.graphql"
+
+fragment AbuseReportNote on Note {
+  id
+  author {
+    ...Author
+  }
+  body
+  bodyHtml
+  createdAt
+  resolved
+  userPermissions {
+    ...AbuseReportNotePermissions
+  }
+  discussion {
+    id
+    notes {
+      nodes {
+        id
+      }
+    }
+  }
+}
diff --git a/app/assets/javascripts/admin/abuse_report/graphql/notes/abuse_report_note_permissions.fragment.graphql b/app/assets/javascripts/admin/abuse_report/graphql/notes/abuse_report_note_permissions.fragment.graphql
new file mode 100644
index 00000000000..01436436b93
--- /dev/null
+++ b/app/assets/javascripts/admin/abuse_report/graphql/notes/abuse_report_note_permissions.fragment.graphql
@@ -0,0 +1,3 @@
+fragment AbuseReportNotePermissions on NotePermissions {
+  adminNote
+}
diff --git a/app/assets/javascripts/admin/abuse_report/graphql/notes/create_abuse_report_note.mutation.graphql b/app/assets/javascripts/admin/abuse_report/graphql/notes/create_abuse_report_note.mutation.graphql
new file mode 100644
index 00000000000..53ac9468e08
--- /dev/null
+++ b/app/assets/javascripts/admin/abuse_report/graphql/notes/create_abuse_report_note.mutation.graphql
@@ -0,0 +1,18 @@
+#import "./abuse_report_note.fragment.graphql"
+
+mutation createAbuseReportNote($input: CreateNoteInput!) {
+  createNote(input: $input) {
+    note {
+      id
+      discussion {
+        id
+        notes {
+          nodes {
+            ...AbuseReportNote
+          }
+        }
+      }
+    }
+    errors
+  }
+}
diff --git a/app/assets/javascripts/admin/abuse_report/graphql/notes/delete_abuse_report_note.fragment.graphql b/app/assets/javascripts/admin/abuse_report/graphql/notes/delete_abuse_report_note.fragment.graphql
new file mode 100644
index 00000000000..e8ff2933159
--- /dev/null
+++ b/app/assets/javascripts/admin/abuse_report/graphql/notes/delete_abuse_report_note.fragment.graphql
@@ -0,0 +1,8 @@
+mutation deleteAbuseReportNote($input: DestroyNoteInput!) {
+  destroyNote(input: $input) {
+    errors
+    note {
+      id
+    }
+  }
+}
diff --git a/app/assets/javascripts/admin/abuse_report/graphql/notes/update_abuse_report_note.mutation.graphql b/app/assets/javascripts/admin/abuse_report/graphql/notes/update_abuse_report_note.mutation.graphql
new file mode 100644
index 00000000000..e11165074c9
--- /dev/null
+++ b/app/assets/javascripts/admin/abuse_report/graphql/notes/update_abuse_report_note.mutation.graphql
@@ -0,0 +1,10 @@
+#import "./abuse_report_note.fragment.graphql"
+
+mutation updateAbuseReportNote($input: UpdateNoteInput!) {
+  updateNote(input: $input) {
+    note {
+      ...AbuseReportNote
+    }
+    errors
+  }
+}
diff --git a/app/assets/javascripts/graphql_shared/possible_types.json b/app/assets/javascripts/graphql_shared/possible_types.json
index 4e0b1413f71..e0cd18a8643 100644
--- a/app/assets/javascripts/graphql_shared/possible_types.json
+++ b/app/assets/javascripts/graphql_shared/possible_types.json
@@ -70,6 +70,7 @@
     "ProjectMember"
   ],
   "NoteableInterface": [
+    "AbuseReport",
     "AlertManagementAlert",
     "BoardEpic",
     "Design",
diff --git a/app/assets/javascripts/members/components/table/role_dropdown.vue b/app/assets/javascripts/members/components/table/role_dropdown.vue
index cd0d42fd452..2b72a3fe6e8 100644
--- a/app/assets/javascripts/members/components/table/role_dropdown.vue
+++ b/app/assets/javascripts/members/components/table/role_dropdown.vue
@@ -4,8 +4,9 @@ import { GlBreakpointInstance as bp } from '@gitlab/ui/dist/utils';
 // eslint-disable-next-line no-restricted-imports
 import { mapActions } from 'vuex';
 import * as Sentry from '~/sentry/sentry_browser_wrapper';
-import { s__ } from '~/locale';
 import { guestOverageConfirmAction } from 'ee_else_ce/members/guest_overage_confirm_action';
+import { roleDropdownItems, initialSelectedRole } from 'ee_else_ce/members/utils';
+import { s__ } from '~/locale';
 
 export default {
   name: 'RoleDropdown',
@@ -29,7 +30,7 @@ export default {
     return {
       isDesktop: false,
       busy: false,
-      selectedRoleValue: this.member.accessLevel.integerValue,
+      selectedRole: null,
     };
   },
   computed: {
@@ -37,12 +38,12 @@ export default {
       return this.permissions.canOverride && !this.member.isOverridden;
     },
     dropdownItems() {
-      return Object.entries(this.member.validRoles).map(([name, value]) => ({
-        value,
-        text: name,
-      }));
+      return roleDropdownItems(this.member);
     },
   },
+  created() {
+    this.selectedRole = initialSelectedRole(this.dropdownItems.flatten, this.member);
+  },
   mounted() {
     this.isDesktop = bp.isDesktop();
   },
@@ -52,44 +53,39 @@ export default {
         return dispatch(`${this.namespace}/updateMemberRole`, payload);
       },
     }),
-    async handleOverageConfirm(currentRoleValue, newRoleValue, newRoleName) {
-      return guestOverageConfirmAction({
-        currentRoleValue,
-        newRoleValue,
-        newRoleName,
-        group: this.group,
-        memberId: this.member.id,
-        memberType: this.namespace,
-      });
-    },
-    async handleSelect(newRoleValue) {
-      const currentRoleValue = this.member.accessLevel.integerValue;
-      if (newRoleValue === currentRoleValue) {
-        return;
-      }
-
+    async handleSelect(value) {
       this.busy = true;
 
-      const { text: newRoleName } = this.dropdownItems.find((item) => item.value === newRoleValue);
-      const confirmed = await this.handleOverageConfirm(
-        currentRoleValue,
-        newRoleValue,
-        newRoleName,
-      );
-      if (!confirmed) {
-        this.selectedRoleValue = currentRoleValue;
-        this.busy = false;
-        return;
-      }
+      const newRole = this.dropdownItems.flatten.find((item) => item.value === value);
+      const previousRole = this.selectedRole;
 
       try {
+        const confirmed = await guestOverageConfirmAction({
+          currentRoleValue: this.member.accessLevel.integerValue,
+          newRoleValue: newRole.accessLevel,
+          newRoleName: newRole.text,
+          newMemberRoleId: newRole.memberRoleId,
+          group: this.group,
+          memberId: this.member.id,
+          memberType: this.namespace,
+        });
+        if (!confirmed) {
+          return;
+        }
+
+        this.selectedRole = value;
+
         await this.updateMemberRole({
           memberId: this.member.id,
-          accessLevel: { integerValue: newRoleValue, stringValue: newRoleName },
+          accessLevel: {
+            integerValue: newRole.accessLevel,
+            memberRoleId: newRole.memberRoleId,
+          },
         });
 
         this.$toast.show(s__('Members|Role updated successfully.'));
       } catch (error) {
+        this.selectedRole = previousRole;
         Sentry.captureException(error);
       } finally {
         this.busy = false;
@@ -101,14 +97,14 @@ export default {
 
 <template>
   <gl-collapsible-listbox
-    v-model="selectedRoleValue"
     :placement="isDesktop ? 'left' : 'right'"
     :toggle-text="member.accessLevel.stringValue"
     :header-text="__('Change role')"
     :disabled="disabled"
     :loading="busy"
     data-qa-selector="access_level_dropdown"
-    :items="dropdownItems"
+    :items="dropdownItems.formatted"
+    :selected="selectedRole"
     @select="handleSelect"
   >
     <template #list-item="{ item }">
diff --git a/app/assets/javascripts/members/store/actions.js b/app/assets/javascripts/members/store/actions.js
index 712f0d6caa7..d696f618a3c 100644
--- a/app/assets/javascripts/members/store/actions.js
+++ b/app/assets/javascripts/members/store/actions.js
@@ -6,7 +6,10 @@ export const updateMemberRole = async ({ state, commit }, { memberId, accessLeve
   try {
     await axios.put(
       state.memberPath.replace(/:id$/, memberId),
-      state.requestFormatter({ accessLevel: accessLevel.integerValue }),
+      state.requestFormatter({
+        accessLevel: accessLevel.integerValue,
+        memberRoleId: accessLevel.memberRoleId,
+      }),
     );
 
     commit(types.RECEIVE_MEMBER_ROLE_SUCCESS, { memberId, accessLevel });
diff --git a/app/assets/javascripts/members/utils.js b/app/assets/javascripts/members/utils.js
index 09e4b5e8a6f..1304fb0fee1 100644
--- a/app/assets/javascripts/members/utils.js
+++ b/app/assets/javascripts/members/utils.js
@@ -1,4 +1,4 @@
-import { isUndefined } from 'lodash';
+import { isUndefined, uniqueId } from 'lodash';
 import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
 import { getParameterByName, setUrlParams } from '~/lib/utils/url_utility';
 import {
@@ -35,6 +35,36 @@ export const generateBadges = ({ member, isCurrentUser, canManageMembers }) => [
   },
 ];
 
+/**
+ * Creates the dropdowns options for static roles
+ *
+ * @param {object} member
+ *   @param {Map<string, number>} member.validRoles
+ */
+export const roleDropdownItems = ({ validRoles }) => {
+  const staticRoleDropdownItems = Object.entries(validRoles).map(([name, value]) => ({
+    accessLevel: value,
+    memberRoleId: null, // The value `null` is need to downgrade from custom role to static role. See: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/133430#note_1595153555
+    text: name,
+    value: uniqueId('role-static-'),
+  }));
+
+  return { flatten: staticRoleDropdownItems, formatted: staticRoleDropdownItems };
+};
+
+/**
+ * Finds and returns unique value
+ *
+ * @param {Array<{accessLevel: number, memberRoleId: null, text: string, value: string}>} flattenDropdownItems
+ * @param {object} member
+ *   @param {{integerValue: number}} member.accessLevel
+ */
+export const initialSelectedRole = (flattenDropdownItems, member) => {
+  return flattenDropdownItems.find(
+    ({ accessLevel }) => accessLevel === member.accessLevel.integerValue,
+  )?.value;
+};
+
 export const isGroup = (member) => {
   return Boolean(member.sharedWithGroup);
 };
@@ -128,6 +158,7 @@ export const parseDataAttributes = (el) => {
 
 export const baseRequestFormatter = (basePropertyName, accessLevelPropertyName) => ({
   accessLevel,
+  memberRoleId,
   ...otherProperties
 }) => {
   const accessLevelProperty = !isUndefined(accessLevel)
@@ -137,6 +168,7 @@ export const baseRequestFormatter = (basePropertyName, accessLevelPropertyName)
   return {
     [basePropertyName]: {
       ...accessLevelProperty,
+      member_role_id: memberRoleId ?? null,
       ...otherProperties,
     },
   };
diff --git a/app/assets/javascripts/sidebar/queries/constants.js b/app/assets/javascripts/sidebar/queries/constants.js
index 0844abc4599..6bcdc01a003 100644
--- a/app/assets/javascripts/sidebar/queries/constants.js
+++ b/app/assets/javascripts/sidebar/queries/constants.js
@@ -12,8 +12,8 @@ import {
   WORKSPACE_PROJECT,
 } from '~/issues/constants';
 import updateAlertAssigneesMutation from '~/vue_shared/alert_details/graphql/mutations/alert_set_assignees.mutation.graphql';
-import abuseReportLabelsQuery from '~/admin/abuse_report/components/graphql/abuse_report_labels.query.graphql';
-import createAbuseReportLabelMutation from '~/admin/abuse_report/components/graphql/create_abuse_report_label.mutation.graphql';
+import abuseReportLabelsQuery from '~/admin/abuse_report/graphql/abuse_report_labels.query.graphql';
+import createAbuseReportLabelMutation from '~/admin/abuse_report/graphql/create_abuse_report_label.mutation.graphql';
 import createGroupOrProjectLabelMutation from '../components/labels/labels_select_widget/graphql/create_label.mutation.graphql';
 import updateTestCaseLabelsMutation from '../components/labels/labels_select_widget/graphql/update_test_case_labels.mutation.graphql';
 import epicLabelsQuery from '../components/labels/labels_select_widget/graphql/epic_labels.query.graphql';
diff --git a/app/assets/javascripts/vue_merge_request_widget/extensions/security_reports/mr_widget_security_reports.vue b/app/assets/javascripts/vue_merge_request_widget/extensions/security_reports/mr_widget_security_reports.vue
index e7d8de97f20..a36a58c68de 100644
--- a/app/assets/javascripts/vue_merge_request_widget/extensions/security_reports/mr_widget_security_reports.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/extensions/security_reports/mr_widget_security_reports.vue
@@ -1,5 +1,5 @@
 <script>
-import { GlDropdown, GlDropdownItem, GlTooltipDirective as GlTooltip } from '@gitlab/ui';
+import { GlDisclosureDropdown } from '@gitlab/ui';
 import MrWidget from '~/vue_merge_request_widget/components/widget/widget.vue';
 import { helpPagePath } from '~/helpers/help_page_helper';
 import { s__, sprintf } from '~/locale';
@@ -10,11 +10,7 @@ export default {
   name: 'WidgetSecurityReportsCE',
   components: {
     MrWidget,
-    GlDropdown,
-    GlDropdownItem,
-  },
-  directives: {
-    GlTooltip,
+    GlDisclosureDropdown,
   },
   i18n: {
     apiError: s__(
@@ -76,17 +72,23 @@ export default {
     summary() {
       return { title: this.$options.i18n.scansHaveRun };
     },
+    listboxOptions() {
+      return this.artifacts.map(({ name, path }) => ({
+        text: sprintf(s__('SecurityReports|Download %{artifactName}'), {
+          artifactName: name,
+        }),
+        href: path,
+        extraAttrs: {
+          download: '',
+          rel: 'nofollow',
+        },
+      }));
+    },
   },
   methods: {
     handleIsLoading(value) {
       this.isLoading = value;
     },
-
-    artifactText({ name }) {
-      return sprintf(s__('SecurityReports|Download %{artifactName}'), {
-        artifactName: name,
-      });
-    },
   },
   widgetHelpPopover: {
     options: { title: s__('ciReport|Security scan results') },
@@ -116,26 +118,12 @@ export default {
     @is-loading="handleIsLoading"
   >
     <template #action-buttons>
-      <div class="gl-ml-3">
-        <gl-dropdown
-          v-gl-tooltip
-          icon="download"
-          size="small"
-          category="tertiary"
-          variant="confirm"
-          right
-        >
-          <gl-dropdown-item
-            v-for="artifact in artifacts"
-            :key="artifact.path"
-            :href="artifact.path"
-            :data-testid="`download-${artifact.name}`"
-            download
-          >
-            {{ artifactText(artifact) }}
-          </gl-dropdown-item>
-        </gl-dropdown>
-      </div>
+      <gl-disclosure-dropdown
+        class="gl-ml-3"
+        size="small"
+        icon="download"
+        :items="listboxOptions"
+      />
     </template>
   </mr-widget>
 </template>
diff --git a/app/assets/stylesheets/startup/_cloaking.scss b/app/assets/stylesheets/startup/_cloaking.scss
deleted file mode 100644
index f60d72a51fb..00000000000
--- a/app/assets/stylesheets/startup/_cloaking.scss
+++ /dev/null
@@ -1,15 +0,0 @@
-/**
-  Prevent flashing of content when using startup.css
- */
-@mixin cloak-startup-scss($display) {
-  // General selector for cloaking until ready
-  .cloak-startup,
-  // Breadcrumbs and alerts on the top of the page
-  .content-wrapper > .alert-wrapper,
-  // Content on pages
-  #content-body,
-  // Prevent flashing of haml generated modal contents
-  .modal-dialog {
-    display: $display;
-  }
-}
diff --git a/app/assets/stylesheets/startup/startup-dark.scss b/app/assets/stylesheets/startup/startup-dark.scss
deleted file mode 100644
index 60cbcffd506..00000000000
--- a/app/assets/stylesheets/startup/startup-dark.scss
+++ /dev/null
@@ -1,1928 +0,0 @@
-// DO NOT EDIT! This is auto-generated from "yarn run generate:startup_css"
-// Please see the feedback issue for more details and help:
-// https://gitlab.com/gitlab-org/gitlab/-/issues/331812
-@charset "UTF-8";
-:root {
-  --white: #333238;
-}
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
-}
-html {
-  font-family: sans-serif;
-  line-height: 1.15;
-}
-aside,
-header {
-  display: block;
-}
-body {
-  margin: 0;
-  font-family: var(--default-regular-font, "GitLab Sans"), -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: #ececef;
-  text-align: left;
-  background-color: #1f1e24;
-}
-ul {
-  margin-top: 0;
-  margin-bottom: 1rem;
-}
-ul ul {
-  margin-bottom: 0;
-}
-strong {
-  font-weight: bolder;
-}
-a {
-  color: #428fdc;
-  text-decoration: none;
-  background-color: transparent;
-}
-a:not([href]):not([class]) {
-  color: inherit;
-  text-decoration: none;
-}
-kbd {
-  font-family: var(--default-mono-font, "GitLab Mono"), "JetBrains Mono",
-    "Menlo", "DejaVu Sans Mono", "Liberation Mono", "Consolas", "Ubuntu Mono",
-    "Courier New", "andale mono", "lucida console", monospace;
-  font-size: 1em;
-}
-img {
-  vertical-align: middle;
-  border-style: none;
-}
-svg {
-  overflow: hidden;
-  vertical-align: middle;
-}
-button {
-  border-radius: 0;
-}
-input,
-button {
-  margin: 0;
-  font-family: inherit;
-  font-size: inherit;
-  line-height: inherit;
-}
-button,
-input {
-  overflow: visible;
-}
-button {
-  text-transform: none;
-}
-[role="button"] {
-  cursor: pointer;
-}
-button:not(:disabled),
-[type="button"]:not(:disabled) {
-  cursor: pointer;
-}
-button::-moz-focus-inner,
-[type="button"]::-moz-focus-inner {
-  padding: 0;
-  border-style: none;
-}
-[type="search"] {
-  outline-offset: -2px;
-}
-.list-unstyled {
-  padding-left: 0;
-  list-style: none;
-}
-kbd {
-  padding: 0.2rem 0.4rem;
-  font-size: 90%;
-  color: #333238;
-  background-color: #ececef;
-  border-radius: 0.2rem;
-}
-kbd kbd {
-  padding: 0;
-  font-size: 100%;
-  font-weight: 600;
-}
-.container-fluid {
-  width: 100%;
-  padding-right: 15px;
-  padding-left: 15px;
-  margin-right: auto;
-  margin-left: auto;
-}
-.form-control {
-  display: block;
-  width: 100%;
-  height: 32px;
-  padding: 0.375rem 0.75rem;
-  font-size: 0.875rem;
-  font-weight: 400;
-  line-height: 1.5;
-  color: #ececef;
-  background-color: #333238;
-  background-clip: padding-box;
-  border: 1px solid #737278;
-  border-radius: 0.25rem;
-}
-@media (prefers-reduced-motion: reduce) {
-}
-.form-control::placeholder {
-  color: #a4a3a8;
-  opacity: 1;
-}
-.form-control:disabled {
-  background-color: #24232a;
-  opacity: 1;
-}
-.btn {
-  display: inline-block;
-  font-weight: 400;
-  color: #ececef;
-  text-align: center;
-  vertical-align: middle;
-  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 {
-  opacity: 0.65;
-}
-.btn:not(:disabled):not(.disabled) {
-  cursor: pointer;
-}
-.collapse:not(.show) {
-  display: none;
-}
-.dropdown {
-  position: relative;
-}
-.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: #ececef;
-  text-align: left;
-  list-style: none;
-  background-color: #333238;
-  background-clip: padding-box;
-  border: 1px solid rgba(255, 255, 255, 0.15);
-  border-radius: 0.25rem;
-}
-.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-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-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-fluid {
-    flex-wrap: nowrap;
-  }
-  .navbar-expand-sm .navbar-collapse {
-    display: flex !important;
-    flex-basis: auto;
-  }
-  .navbar-expand-sm .navbar-toggler {
-    display: none;
-  }
-}
-.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;
-}
-.badge-success {
-  color: #fbfafd;
-  background-color: #2da160;
-}
-.badge-info {
-  color: #fbfafd;
-  background-color: #428fdc;
-}
-.badge-warning {
-  color: #fbfafd;
-  background-color: #c17d10;
-}
-.rounded-circle {
-  border-radius: 50% !important;
-}
-.d-none {
-  display: none !important;
-}
-.d-block {
-  display: block !important;
-}
-@media (min-width: 576px) {
-  .d-sm-none {
-    display: none !important;
-  }
-  .d-sm-inline-block {
-    display: inline-block !important;
-  }
-}
-@media (min-width: 768px) {
-  .d-md-block {
-    display: block !important;
-  }
-}
-@media (min-width: 992px) {
-  .d-lg-none {
-    display: none !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;
-}
-.gl-avatar {
-  display: inline-flex;
-  border-width: 1px;
-  border-style: solid;
-  border-color: rgba(251, 250, 253, 0.08);
-  overflow: hidden;
-  flex-shrink: 0;
-}
-.gl-avatar-s24 {
-  width: 1.5rem;
-  height: 1.5rem;
-  font-size: 0.75rem;
-  line-height: 1rem;
-  border-radius: 0.25rem;
-}
-.gl-avatar-circle {
-  border-radius: 50%;
-}
-.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;
-}
-.gl-badge.sm {
-  padding-top: 0;
-  padding-bottom: 0;
-}
-.gl-badge.badge-info {
-  background-color: #064787;
-  color: #9dc7f1;
-}
-a.gl-badge.badge-info.active,
-a.gl-badge.badge-info:active {
-  color: #e9f3fc;
-  background-color: #0b5cad;
-}
-a.gl-badge.badge-info:active {
-  box-shadow: 0 0 0 1px #333238, 0 0 0 3px #1f75cb;
-  outline: none;
-}
-.gl-badge.badge-success {
-  background-color: #0d532a;
-  color: #91d4a8;
-}
-a.gl-badge.badge-success.active,
-a.gl-badge.badge-success:active {
-  color: #ecf4ee;
-  background-color: #24663b;
-}
-a.gl-badge.badge-success:active {
-  box-shadow: 0 0 0 1px #333238, 0 0 0 3px #1f75cb;
-  outline: none;
-}
-.gl-badge.badge-warning {
-  background-color: #703800;
-  color: #e9be74;
-}
-a.gl-badge.badge-warning.active,
-a.gl-badge.badge-warning:active {
-  color: #fdf1dd;
-  background-color: #8f4700;
-}
-a.gl-badge.badge-warning:active {
-  box-shadow: 0 0 0 1px #333238, 0 0 0 3px #1f75cb;
-  outline: none;
-}
-.gl-button .gl-badge {
-  top: 0;
-}
-.gl-form-input,
-.gl-form-input.form-control {
-  background-color: #333238;
-  font-family: var(--default-regular-font, "GitLab Sans"), -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: 0.875rem;
-  line-height: 1rem;
-  padding-top: 0.5rem;
-  padding-bottom: 0.5rem;
-  padding-left: 0.75rem;
-  padding-right: 0.75rem;
-  height: auto;
-  color: #ececef;
-  box-shadow: inset 0 0 0 1px #737278;
-  border-style: none;
-  appearance: none;
-  -moz-appearance: none;
-}
-.gl-form-input:disabled,
-.gl-form-input:not(.form-control-plaintext):not([type="color"]):read-only,
-.gl-form-input.form-control:disabled,
-.gl-form-input.form-control:not(.form-control-plaintext):not([type="color"]):read-only {
-  background-color: #1f1e24;
-  box-shadow: inset 0 0 0 1px #434248;
-}
-.gl-form-input:disabled,
-.gl-form-input.form-control:disabled {
-  cursor: not-allowed;
-  color: #89888d;
-}
-.gl-form-input::placeholder,
-.gl-form-input.form-control::placeholder {
-  color: #737278;
-}
-.gl-icon {
-  fill: currentColor;
-}
-.gl-icon.s12 {
-  width: 12px;
-  height: 12px;
-}
-.gl-icon.s16 {
-  width: 16px;
-  height: 16px;
-}
-.gl-icon.s32 {
-  width: 32px;
-  height: 32px;
-}
-.gl-link {
-  font-size: 0.875rem;
-  color: #428fdc;
-}
-.gl-link:active {
-  color: #9dc7f1;
-}
-.gl-link:active {
-  text-decoration: underline;
-  outline: 2px solid #1f75cb;
-  outline-offset: 2px;
-}
-.gl-button {
-  display: inline-flex;
-}
-.gl-button:not(.btn-link):active {
-  text-decoration: none;
-}
-.gl-button.gl-button {
-  border-width: 0;
-  padding-top: 0.5rem;
-  padding-bottom: 0.5rem;
-  padding-left: 0.75rem;
-  padding-right: 0.75rem;
-  background-color: transparent;
-  line-height: 1rem;
-  color: #ececef;
-  fill: currentColor;
-  box-shadow: inset 0 0 0 1px #535158;
-  justify-content: center;
-  align-items: center;
-  font-size: 0.875rem;
-  border-radius: 0.25rem;
-}
-.gl-button.gl-button .gl-button-text {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  padding-top: 1px;
-  padding-bottom: 1px;
-  margin-top: -1px;
-  margin-bottom: -1px;
-}
-.gl-button.gl-button.btn-default {
-  background-color: #333238;
-}
-.gl-button.gl-button.btn-default:active,
-.gl-button.gl-button.btn-default.active {
-  box-shadow: inset 0 0 0 1px #a4a3a8, 0 0 0 1px #333238, 0 0 0 3px #1f75cb;
-  outline: none;
-  background-color: #434248;
-}
-.gl-button.gl-button.btn-default:active .gl-icon,
-.gl-button.gl-button.btn-default.active .gl-icon {
-  color: #ececef;
-}
-.gl-button.gl-button.btn-default .gl-icon {
-  color: #89888d;
-}
-.gl-search-box-by-type-search-icon {
-  color: #89888d;
-  width: 1rem;
-  position: absolute;
-  left: 0.5rem;
-  top: calc(50% - 16px / 2);
-}
-.gl-search-box-by-type {
-  display: flex;
-  position: relative;
-}
-.gl-search-box-by-type-input,
-.gl-search-box-by-type-input.gl-form-input {
-  height: 2rem;
-  padding-right: 2rem;
-  padding-left: 1.75rem;
-}
-body {
-  font-size: 0.875rem;
-}
-button,
-html [type="button"],
-[role="button"] {
-  cursor: pointer;
-}
-strong {
-  font-weight: bold;
-}
-svg {
-  vertical-align: baseline;
-}
-.form-control {
-  font-size: 0.875rem;
-}
-.hidden {
-  display: none !important;
-  visibility: hidden !important;
-}
-.badge:not(.gl-badge) {
-  padding: 4px 5px;
-  font-size: 12px;
-  font-style: normal;
-  font-weight: 400;
-  display: inline-block;
-}
-.divider {
-  height: 0;
-  margin: 4px 0;
-  overflow: hidden;
-  border-top: 1px solid #434248;
-}
-.toggle-sidebar-button .collapse-text,
-.toggle-sidebar-button .icon-chevron-double-lg-left {
-  color: #bfbfc3;
-}
-html {
-  overflow-y: scroll;
-}
-.layout-page {
-  padding-top: calc(
-    var(--header-height, 48px) +
-      calc(var(--system-header-height) + var(--performance-bar-height))
-  );
-  padding-bottom: var(--system-footer-height);
-}
-@media (min-width: 576px) {
-  .logged-out-marketing-header {
-    --header-height: 72px;
-  }
-}
-.btn {
-  border-radius: 4px;
-  font-size: 0.875rem;
-  font-weight: 400;
-  padding: 6px 10px;
-  background-color: #333238;
-  border-color: #434248;
-  color: #ececef;
-  color: #ececef;
-  white-space: nowrap;
-}
-.btn:active {
-  background-color: #333238;
-  box-shadow: none;
-}
-.btn:active,
-.btn.active {
-  background-color: #434248;
-  border-color: #4f4f4f;
-  color: #ececef;
-}
-.btn svg {
-  height: 15px;
-  width: 15px;
-}
-.btn svg:not(:last-child) {
-  margin-right: 5px;
-}
-.badge.badge-pill:not(.gl-badge) {
-  font-weight: 400;
-  background-color: rgba(255, 255, 255, 0.07);
-  color: #bfbfc3;
-  vertical-align: baseline;
-}
-:root {
-  --performance-bar-height: 0px;
-  --system-header-height: 0px;
-  --top-bar-height: 0px;
-  --system-footer-height: 0px;
-  --mr-review-bar-height: 0px;
-  --breakpoint-xs: 0;
-  --breakpoint-sm: 576px;
-  --breakpoint-md: 768px;
-  --breakpoint-lg: 992px;
-  --breakpoint-xl: 1200px;
-}
-.with-top-bar {
-  --top-bar-height: 48px;
-}
-@media (min-width: 768px) {
-  .page-with-contextual-sidebar {
-    --application-bar-left: 56px;
-  }
-}
-@media (min-width: 1200px) {
-  .page-with-contextual-sidebar {
-    --application-bar-left: 256px;
-  }
-  .page-with-icon-sidebar {
-    --application-bar-left: 56px;
-  }
-  .page-with-super-sidebar {
-    --application-bar-left: 256px;
-  }
-  .page-with-super-sidebar-collapsed {
-    --application-bar-left: 0px;
-  }
-}
-.gl-font-sm {
-  font-size: 12px;
-}
-.dropdown {
-  position: relative;
-}
-.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: 0.875rem;
-  font-weight: 400;
-  padding: 8px 0;
-  background-color: #333238;
-  border: 1px solid #434248;
-  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;
-}
-.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: #ececef;
-  line-height: 16px;
-  white-space: normal;
-  overflow: hidden;
-  text-align: left;
-  width: 100%;
-}
-.dropdown-menu li > a:active,
-.dropdown-menu li > button:active {
-  background-color: #4e4c53;
-  color: #ececef;
-  outline: 0;
-  text-decoration: none;
-}
-.dropdown-menu li > a:active,
-.dropdown-menu li > button:active {
-  box-shadow: inset 0 0 0 2px #1f75cb, inset 0 0 0 3px #333238,
-    inset 0 0 0 1px #333238;
-  outline: none;
-}
-.dropdown-menu .divider {
-  height: 1px;
-  margin: 0.25rem 0;
-  padding: 0;
-  background-color: #434248;
-}
-.dropdown-menu .badge.badge-pill + span:not(.badge):not(.badge-pill) {
-  margin-right: 40px;
-}
-@media (max-width: 575.98px) {
-  .navbar-gitlab li.dropdown {
-    position: static;
-  }
-  .navbar-gitlab li.dropdown.user-counter {
-    margin-left: 8px !important;
-  }
-  .navbar-gitlab li.dropdown.user-counter > a {
-    padding: 0 4px !important;
-  }
-  header.navbar-gitlab .dropdown .dropdown-menu {
-    width: 100%;
-    min-width: 100%;
-  }
-}
-input {
-  border-radius: 0.25rem;
-  color: #ececef;
-  background-color: #333238;
-}
-input[type="search"] {
-  appearance: textfield;
-}
-.form-control {
-  border-radius: 4px;
-  padding: 6px 10px;
-}
-.form-control::placeholder {
-  color: #737278;
-}
-kbd {
-  display: inline-block;
-  padding: 3px 5px;
-  font-size: 0.75rem;
-  line-height: 10px;
-  color: var(--gray-700, #bfbfc3);
-  vertical-align: unset;
-  background-color: var(--gray-10, #1f1e24);
-  border-width: 1px;
-  border-style: solid;
-  border-color: var(--gray-100, #434248) var(--gray-100, #434248)
-    var(--gray-200, #535158);
-  border-image: none;
-  border-radius: 3px;
-  box-shadow: 0 -1px 0 var(--gray-200, #535158) inset;
-}
-.navbar-gitlab {
-  padding: 0 16px;
-  z-index: 1000;
-  margin-bottom: 0;
-  min-height: var(--header-height, 48px);
-  border: 0;
-  position: fixed;
-  top: calc(var(--system-header-height) + var(--performance-bar-height));
-  left: 0;
-  right: 0;
-  border-radius: 0;
-}
-.navbar-gitlab .close-icon {
-  display: none;
-}
-.navbar-gitlab .header-content {
-  width: 100%;
-  display: flex;
-  justify-content: space-between;
-  position: relative;
-  min-height: var(--header-height, 48px);
-  padding-left: 0;
-}
-.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: 24px;
-}
-.navbar-gitlab .header-content .title a:not(.canary-badge) {
-  display: flex;
-  align-items: center;
-  padding: 2px 8px;
-  margin: 4px 2px 4px -8px;
-  border-radius: 4px;
-}
-.navbar-gitlab .header-content .title a:not(.canary-badge):active {
-  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.6), 0 0 0 3px #1068bf;
-  outline: none;
-}
-.navbar-gitlab .header-content .navbar-collapse > ul.nav > li:not(.d-none) {
-  margin: 0 2px;
-}
-.navbar-gitlab .header-search-form {
-  min-width: 320px;
-}
-@media (min-width: 768px) and (max-width: 1199.98px) {
-  .navbar-gitlab .header-search-form {
-    min-width: 200px;
-  }
-}
-.navbar-gitlab .header-search-form .keyboard-shortcut-helper {
-  transform: translateY(calc(50% - 2px));
-  box-shadow: none;
-  border-color: transparent;
-}
-.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 8px 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:not(.gl-badge) {
-  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 > a:active,
-.navbar-sub-nav > li > button:active,
-.navbar-nav > li > a:active,
-.navbar-nav > li > button:active {
-  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.6), 0 0 0 3px #1068bf;
-  outline: none;
-}
-.navbar-sub-nav > li .top-nav-toggle,
-.navbar-sub-nav > li > button,
-.navbar-nav > li .top-nav-toggle,
-.navbar-nav > li > button {
-  background: transparent;
-  border: 0;
-}
-.navbar-sub-nav .dropdown-menu,
-.navbar-nav .dropdown-menu {
-  position: absolute;
-}
-.navbar-sub-nav {
-  display: flex;
-  align-items: center;
-  height: 100%;
-  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;
-}
-@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-avatar {
-  float: left;
-  margin-right: 5px;
-  border-radius: 50%;
-  border: 1px solid #333238;
-}
-.notification-dot {
-  background-color: #9e5400;
-  height: 12px;
-  width: 12px;
-  pointer-events: none;
-  visibility: hidden;
-  top: 3px;
-}
-.tanuki-logo .tanuki {
-  fill: #e24329;
-}
-.tanuki-logo .left-cheek,
-.tanuki-logo .right-cheek {
-  fill: #fc6d26;
-}
-.tanuki-logo .chin {
-  fill: #fca326;
-}
-.context-header {
-  position: relative;
-  margin-right: 2px;
-  width: 256px;
-}
-.context-header > a,
-.context-header > button {
-  font-weight: 600;
-  display: flex;
-  width: 100%;
-  align-items: center;
-  padding: 10px 16px 10px 10px;
-  color: #ececef;
-  background-color: transparent;
-  border: 0;
-  text-align: left;
-}
-.context-header .avatar-container {
-  flex: 0 0 32px;
-  background-color: #333238;
-}
-.context-header .sidebar-context-title {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  color: #ececef;
-}
-@media (min-width: 768px) {
-  .page-with-contextual-sidebar {
-    padding-left: 56px;
-  }
-}
-@media (min-width: 1200px) {
-  .page-with-contextual-sidebar {
-    padding-left: 256px;
-  }
-}
-@media (min-width: 768px) {
-  .page-with-icon-sidebar {
-    padding-left: 56px;
-  }
-}
-.nav-sidebar {
-  position: fixed;
-  bottom: var(--system-footer-height);
-  left: 0;
-  z-index: 600;
-  width: 256px;
-  top: calc(
-    var(--header-height, 48px) +
-      calc(var(--system-header-height) + var(--performance-bar-height)) +
-      var(--top-bar-height)
-  );
-  background-color: #1f1e24;
-  border-right: 1px solid #e9e9e9;
-  transform: translate3d(0, 0, 0);
-}
-.nav-sidebar.sidebar-collapsed-desktop {
-  width: 56px;
-}
-.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 .nav-item-name,
-.nav-sidebar.sidebar-collapsed-desktop .collapse-text {
-  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: unset;
-}
-.nav-sidebar.sidebar-collapsed-desktop .fly-out-top-item:not(.divider) {
-  display: block !important;
-}
-.nav-sidebar.sidebar-collapsed-desktop .avatar-container {
-  margin: 0 auto;
-}
-.nav-sidebar.sidebar-collapsed-desktop li.active:not(.fly-out-top-item) > a {
-  background-color: rgba(41, 41, 97, 0.08);
-}
-.nav-sidebar a {
-  text-decoration: none;
-  color: #ececef;
-}
-.nav-sidebar li {
-  white-space: nowrap;
-}
-.nav-sidebar li .nav-item-name {
-  flex: 1;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-.nav-sidebar li > a,
-.nav-sidebar li > .fly-out-top-item-container {
-  height: 2rem;
-  padding-left: 0.75rem;
-  padding-right: 0.75rem;
-  display: flex;
-  align-items: center;
-  border-radius: 0.25rem;
-  width: auto;
-  margin: 1px 8px;
-}
-.nav-sidebar li.active > a {
-  font-weight: 600;
-}
-.nav-sidebar li.active:not(.fly-out-top-item) > a:not(.has-sub-items) {
-  background-color: rgba(251, 250, 253, 0.08);
-}
-.nav-sidebar ul {
-  padding-left: 0;
-  list-style: none;
-}
-@media (max-width: 767.98px) {
-  .nav-sidebar {
-    left: -256px;
-  }
-}
-.nav-sidebar .nav-icon-container {
-  display: flex;
-  margin-right: 8px;
-}
-.nav-sidebar
-  a:not(.has-sub-items)
-  + .sidebar-sub-level-items
-  .fly-out-top-item {
-  display: none;
-}
-.nav-sidebar
-  a:not(.has-sub-items)
-  + .sidebar-sub-level-items
-  .fly-out-top-item
-  a,
-.nav-sidebar
-  a:not(.has-sub-items)
-  + .sidebar-sub-level-items
-  .fly-out-top-item.active
-  a,
-.nav-sidebar
-  a:not(.has-sub-items)
-  + .sidebar-sub-level-items
-  .fly-out-top-item
-  .fly-out-top-item-container {
-  margin-left: 0;
-  margin-right: 0;
-  padding-left: 1rem;
-  padding-right: 1rem;
-  cursor: default;
-  pointer-events: none;
-  font-size: 0.75rem;
-  margin-top: -0.25rem;
-  margin-bottom: -0.25rem;
-  margin-top: 0;
-  position: relative;
-  color: #333238;
-  background: var(--black, #fff);
-}
-.nav-sidebar
-  a:not(.has-sub-items)
-  + .sidebar-sub-level-items
-  .fly-out-top-item
-  a
-  strong,
-.nav-sidebar
-  a:not(.has-sub-items)
-  + .sidebar-sub-level-items
-  .fly-out-top-item.active
-  a
-  strong,
-.nav-sidebar
-  a:not(.has-sub-items)
-  + .sidebar-sub-level-items
-  .fly-out-top-item
-  .fly-out-top-item-container
-  strong {
-  font-weight: 400;
-}
-.nav-sidebar
-  a:not(.has-sub-items)
-  + .sidebar-sub-level-items
-  .fly-out-top-item
-  a::before,
-.nav-sidebar
-  a:not(.has-sub-items)
-  + .sidebar-sub-level-items
-  .fly-out-top-item.active
-  a::before,
-.nav-sidebar
-  a:not(.has-sub-items)
-  + .sidebar-sub-level-items
-  .fly-out-top-item
-  .fly-out-top-item-container::before {
-  position: absolute;
-  content: "";
-  display: block;
-  top: 50%;
-  left: -0.25rem;
-  margin-top: -0.25rem;
-  width: 0;
-  height: 0;
-  border-top: 0.25rem solid transparent;
-  border-bottom: 0.25rem solid transparent;
-  border-right: 0.25rem solid #fff;
-  border-right-color: var(--black, #fff);
-}
-@media (min-width: 576px) {
-  .nav-sidebar a.has-sub-items + .sidebar-sub-level-items {
-    min-width: 150px;
-  }
-}
-.nav-sidebar a.has-sub-items + .sidebar-sub-level-items .fly-out-top-item {
-  display: none;
-}
-.nav-sidebar a.has-sub-items + .sidebar-sub-level-items .fly-out-top-item a,
-.nav-sidebar
-  a.has-sub-items
-  + .sidebar-sub-level-items
-  .fly-out-top-item.active
-  a,
-.nav-sidebar
-  a.has-sub-items
-  + .sidebar-sub-level-items
-  .fly-out-top-item
-  .fly-out-top-item-container {
-  margin-left: 0;
-  margin-right: 0;
-  padding-left: 1rem;
-  padding-right: 1rem;
-  cursor: default;
-  pointer-events: none;
-  font-size: 0.75rem;
-  margin-top: 0;
-  border-bottom-left-radius: 0;
-  border-bottom-right-radius: 0;
-}
-@media (min-width: 768px) and (max-width: 1199px) {
-  .nav-sidebar:not(.sidebar-expanded-mobile) {
-    width: 56px;
-  }
-  .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) .collapse-text {
-    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: unset;
-  }
-  .nav-sidebar:not(.sidebar-expanded-mobile) .fly-out-top-item:not(.divider) {
-    display: block !important;
-  }
-  .nav-sidebar:not(.sidebar-expanded-mobile) .avatar-container {
-    margin: 0 auto;
-  }
-  .nav-sidebar:not(.sidebar-expanded-mobile)
-    li.active:not(.fly-out-top-item)
-    > a {
-    background-color: rgba(41, 41, 97, 0.08);
-  }
-  .nav-sidebar:not(.sidebar-expanded-mobile) .context-header {
-    height: 60px;
-    width: 56px;
-  }
-  .nav-sidebar:not(.sidebar-expanded-mobile) .context-header a {
-    padding: 10px 4px;
-  }
-  .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) .context-header {
-    height: auto;
-  }
-  .nav-sidebar:not(.sidebar-expanded-mobile) .context-header a {
-    padding: 0.25rem;
-  }
-  .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 {
-    width: 55px;
-    padding: 0 21px;
-  }
-  .nav-sidebar:not(.sidebar-expanded-mobile)
-    .toggle-sidebar-button
-    .collapse-text {
-    display: none;
-  }
-  .nav-sidebar:not(.sidebar-expanded-mobile)
-    .toggle-sidebar-button
-    .icon-chevron-double-lg-left {
-    transform: rotate(180deg);
-    margin: 0;
-  }
-}
-.nav-sidebar-inner-scroll {
-  height: 100%;
-  width: 100%;
-  overflow-x: hidden;
-  overflow-y: auto;
-}
-.nav-sidebar-inner-scroll > div.context-header {
-  margin-top: 0.25rem;
-}
-.nav-sidebar-inner-scroll > div.context-header a {
-  height: 2rem;
-  padding-left: 0.75rem;
-  padding-right: 0.75rem;
-  display: flex;
-  align-items: center;
-  border-radius: 0.25rem;
-  width: auto;
-  margin: 1px 8px;
-  padding: 0.25rem;
-  margin-bottom: 0.25rem;
-  margin-top: 0.125rem;
-  height: auto;
-}
-.nav-sidebar-inner-scroll > div.context-header a .avatar-container {
-  font-weight: 400;
-  flex: none;
-}
-.sidebar-top-level-items {
-  margin-bottom: 60px;
-}
-.sidebar-top-level-items .context-header a {
-  padding: 0.25rem;
-  margin-bottom: 0.25rem;
-  margin-top: 0.125rem;
-  height: auto;
-}
-.sidebar-top-level-items .context-header a .avatar-container {
-  font-weight: 400;
-  flex: none;
-}
-.sidebar-top-level-items
-  > li.active
-  .sidebar-sub-level-items:not(.is-fly-out-only) {
-  display: block;
-}
-.sidebar-top-level-items li > a.gl-link {
-  color: #ececef;
-}
-.sidebar-top-level-items li > a.gl-link:active {
-  text-decoration: none;
-}
-.sidebar-sub-level-items {
-  padding-top: 0;
-  padding-bottom: 0;
-  display: none;
-}
-.sidebar-sub-level-items:not(.fly-out-list) li > a {
-  padding-left: 2.25rem;
-}
-.toggle-sidebar-button,
-.close-nav-button {
-  height: 48px;
-  padding: 0 16px;
-  background-color: #24232a;
-  border: 0;
-  color: #bfbfc3;
-  display: flex;
-  align-items: center;
-  background-color: #1f1e24;
-  position: fixed;
-  bottom: 0;
-  width: 255px;
-}
-.toggle-sidebar-button .collapse-text,
-.toggle-sidebar-button .icon-chevron-double-lg-left,
-.close-nav-button .collapse-text,
-.close-nav-button .icon-chevron-double-lg-left {
-  color: inherit;
-}
-.collapse-text {
-  white-space: nowrap;
-  overflow: hidden;
-}
-.sidebar-collapsed-desktop .context-header {
-  height: 60px;
-  width: 56px;
-}
-.sidebar-collapsed-desktop .context-header a {
-  padding: 10px 4px;
-}
-.sidebar-collapsed-desktop .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;
-}
-.sidebar-collapsed-desktop .context-header {
-  height: auto;
-}
-.sidebar-collapsed-desktop .context-header a {
-  padding: 0.25rem;
-}
-.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 {
-  width: 55px;
-  padding: 0 21px;
-}
-.sidebar-collapsed-desktop .toggle-sidebar-button .collapse-text {
-  display: none;
-}
-.sidebar-collapsed-desktop .toggle-sidebar-button .icon-chevron-double-lg-left {
-  transform: rotate(180deg);
-  margin: 0;
-}
-.close-nav-button {
-  display: none;
-}
-@media (max-width: 767.98px) {
-  .close-nav-button {
-    display: flex;
-  }
-  .toggle-sidebar-button {
-    display: none;
-  }
-}
-.super-sidebar {
-  display: flex;
-  flex-direction: column;
-  position: fixed;
-  top: calc(
-    var(--header-height, 48px) +
-      calc(var(--system-header-height) + var(--performance-bar-height))
-  );
-  bottom: var(--system-footer-height);
-  left: 0;
-  background-color: var(--gray-10, #1f1e24);
-  border-right: 1px solid rgba(251, 250, 253, 0.08);
-  transform: translate3d(0, 0, 0);
-  width: 256px;
-  z-index: 600;
-}
-.super-sidebar.super-sidebar-loading {
-  transform: translate3d(-100%, 0, 0);
-}
-@media (min-width: 1200px) {
-  .super-sidebar.super-sidebar-loading {
-    transform: translate3d(0, 0, 0);
-  }
-}
-@media (prefers-reduced-motion: no-preference) {
-}
-.page-with-super-sidebar {
-  padding-left: 0;
-}
-@media (prefers-reduced-motion: no-preference) {
-}
-@media (min-width: 1200px) {
-  .page-with-super-sidebar {
-    padding-left: 256px;
-  }
-}
-.page-with-super-sidebar-collapsed .super-sidebar {
-  transform: translate3d(-100%, 0, 0);
-}
-@media (min-width: 1200px) {
-  .page-with-super-sidebar-collapsed {
-    padding-left: 0;
-  }
-}
-input::-moz-placeholder {
-  color: #737278;
-  opacity: 1;
-}
-input::-ms-input-placeholder {
-  color: #737278;
-}
-input:-ms-input-placeholder {
-  color: #737278;
-}
-svg {
-  fill: currentColor;
-}
-svg.s12 {
-  width: 12px;
-  height: 12px;
-}
-svg.s16 {
-  width: 16px;
-  height: 16px;
-}
-svg.s32 {
-  width: 32px;
-  height: 32px;
-}
-svg.s12 {
-  vertical-align: -1px;
-}
-svg.s16 {
-  vertical-align: -3px;
-}
-.avatar,
-.avatar-container {
-  float: left;
-  margin-right: 16px;
-  border-radius: 50%;
-}
-.avatar.s16,
-.avatar-container.s16 {
-  width: 16px;
-  height: 16px;
-  margin-right: 8px;
-}
-.avatar.s32,
-.avatar-container.s32 {
-  width: 32px;
-  height: 32px;
-  margin-right: 8px;
-}
-.avatar {
-  transition-property: none;
-  width: 40px;
-  height: 40px;
-  padding: 0;
-  background: #212027;
-  overflow: hidden;
-  box-shadow: inset 0 0 0 1px rgba(251, 250, 253, 0.1);
-}
-.avatar.avatar-tile {
-  border-radius: 0;
-  border: 0;
-}
-.identicon {
-  text-align: center;
-  vertical-align: top;
-  color: #ececef;
-  background-color: #333238;
-}
-.identicon.s16 {
-  font-size: 10px;
-  line-height: 16px;
-}
-.identicon.s32 {
-  font-size: 14px;
-  line-height: 32px;
-}
-.identicon.bg1 {
-  background-color: #660e00;
-}
-.identicon.bg2 {
-  background-color: #232150;
-}
-.identicon.bg3 {
-  background-color: #1a1a40;
-}
-.identicon.bg4 {
-  background-color: #033464;
-}
-.identicon.bg5 {
-  background-color: #0a4020;
-}
-.identicon.bg6 {
-  background-color: #5c2900;
-}
-.identicon.bg7 {
-  background-color: #333238;
-}
-.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;
-}
-.rect-avatar {
-  border-radius: 2px;
-}
-.rect-avatar.s16 {
-  border-radius: 2px;
-}
-.rect-avatar.s16 .avatar {
-  border-radius: 2px;
-}
-.rect-avatar.s32 {
-  border-radius: 4px;
-}
-.rect-avatar.s32 .avatar {
-  border-radius: 4px;
-}
-:root {
-  color-scheme: dark;
-  --gray-10: #1f1e24;
-  --gray-50: #333238;
-  --gray-100: #434248;
-  --gray-200: #535158;
-  --gray-700: #bfbfc3;
-  --gray-900: #ececef;
-  --border-color: #434248;
-  --white: #333238;
-  --black: #fff;
-}
-body.gl-dark {
-  color-scheme: dark;
-  --gray-10: #1f1e24;
-  --border-color: #434248;
-  --white: #333238;
-  --black: #fff;
-}
-.nav-sidebar,
-.toggle-sidebar-button,
-.close-nav-button {
-  background-color: #29282d;
-  border-right: 1px solid #333238;
-}
-.gl-avatar:not(.gl-avatar-identicon),
-.avatar-container,
-.avatar {
-  background: rgba(251, 250, 253, 0.04);
-}
-.gl-avatar {
-  border-style: none;
-  box-shadow: inset 0 0 0 1px rgba(251, 250, 253, 0.1);
-}
-body.gl-dark {
-  --gl-theme-accent: #737278;
-}
-body.gl-dark .navbar-gitlab {
-  background-color: #ececef;
-}
-body.gl-dark .navbar-gitlab .navbar-collapse {
-  color: #ececef;
-}
-body.gl-dark .navbar-gitlab .container-fluid .navbar-toggler {
-  border-left: 1px solid #a3a2a6;
-  color: #ececef;
-}
-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-nav > li.active > a,
-body.gl-dark .navbar-gitlab .navbar-nav > li.active > button {
-  color: #ececef;
-  background-color: #333238;
-}
-body.gl-dark .navbar-gitlab .navbar-sub-nav {
-  color: #ececef;
-}
-body.gl-dark .navbar-gitlab .nav > li {
-  color: #ececef;
-}
-body.gl-dark .navbar-gitlab .nav > li.header-search {
-  color: #ececef;
-}
-body.gl-dark .navbar-gitlab .nav > li > a .notification-dot {
-  border: 2px solid #ececef;
-}
-body.gl-dark
-  .navbar-gitlab
-  .nav
-  > li
-  > a.header-help-dropdown-toggle
-  .notification-dot {
-  background-color: #ececef;
-}
-body.gl-dark
-  .navbar-gitlab
-  .nav
-  > li
-  > a.header-user-dropdown-toggle
-  .header-user-avatar {
-  border-color: #ececef;
-}
-body.gl-dark .navbar-gitlab .nav > li.active > a {
-  color: #ececef;
-  background-color: #333238;
-}
-body.gl-dark .navbar-gitlab .nav > li.active > a .notification-dot {
-  border-color: #333238;
-}
-body.gl-dark
-  .navbar-gitlab
-  .nav
-  > li.active
-  > a.header-help-dropdown-toggle
-  .notification-dot {
-  background-color: #ececef;
-}
-body.gl-dark .header-search-form {
-  background-color: rgba(236, 236, 239, 0.2) !important;
-  border-radius: 4px;
-}
-body.gl-dark .header-search-form svg.gl-search-box-by-type-search-icon {
-  color: rgba(236, 236, 239, 0.8);
-}
-body.gl-dark .header-search-form input {
-  background-color: transparent;
-  color: rgba(236, 236, 239, 0.8);
-  box-shadow: inset 0 0 0 1px rgba(236, 236, 239, 0.4);
-}
-body.gl-dark .header-search-form input::placeholder {
-  color: rgba(236, 236, 239, 0.8);
-}
-body.gl-dark .header-search-form input:active::placeholder {
-  color: #737278;
-}
-body.gl-dark .header-search-form .keyboard-shortcut-helper {
-  color: #ececef;
-  background-color: rgba(236, 236, 239, 0.2);
-}
-body.gl-dark .nav-sidebar li.active > a {
-  color: #ececef;
-}
-body.gl-dark .nav-sidebar .fly-out-top-item a,
-body.gl-dark .nav-sidebar .fly-out-top-item.active a,
-body.gl-dark .nav-sidebar .fly-out-top-item .fly-out-top-item-container {
-  background-color: var(--gray-100, #333238);
-  color: var(--gray-900, #ececef);
-}
-body.gl-dark .navbar-gitlab {
-  background-color: var(--gray-50);
-  box-shadow: 0 1px 0 0 var(--gray-100);
-}
-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-nav li.active > a,
-body.gl-dark .navbar-gitlab .navbar-nav li.active > button {
-  color: var(--gl-text-color);
-  background-color: var(--gray-200);
-}
-body.gl-dark .navbar-gitlab .header-search-form {
-  background-color: var(--gray-100) !important;
-  box-shadow: inset 0 0 0 1px var(--border-color) !important;
-}
-body.gl-dark .navbar-gitlab .header-search-form:active {
-  background-color: var(--gray-100) !important;
-  box-shadow: inset 0 0 0 1px var(--blue-200) !important;
-}
-
-.tab-width-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-border-none\! {
-  border-style: none !important;
-}
-.gl-display-none {
-  display: none;
-}
-.gl-display-flex {
-  display: flex;
-}
-@media (min-width: 992px) {
-  .gl-lg-display-flex {
-    display: flex;
-  }
-}
-@media (min-width: 576px) {
-  .gl-sm-display-block {
-    display: block;
-  }
-}
-@media (min-width: 992px) {
-  .gl-lg-display-block {
-    display: block;
-  }
-}
-.gl-align-items-center {
-  align-items: center;
-}
-.gl-align-items-stretch {
-  align-items: stretch;
-}
-.gl-flex-grow-0\! {
-  flex-grow: 0 !important;
-}
-.gl-flex-grow-1 {
-  flex-grow: 1;
-}
-.gl-flex-basis-half\! {
-  flex-basis: 50% !important;
-}
-.gl-justify-content-end {
-  justify-content: flex-end;
-}
-.gl-relative {
-  position: relative;
-}
-.gl-absolute {
-  position: absolute;
-}
-.gl-top-0 {
-  top: 0;
-}
-.gl-right-3 {
-  right: 0.5rem;
-}
-.gl-w-full {
-  width: 100%;
-}
-.gl-px-3 {
-  padding-left: 0.5rem;
-  padding-right: 0.5rem;
-}
-.gl-pr-2 {
-  padding-right: 0.25rem;
-}
-.gl-pt-0 {
-  padding-top: 0;
-}
-.gl-mr-auto {
-  margin-right: auto;
-}
-.gl-mr-3 {
-  margin-right: 0.5rem;
-}
-.gl-ml-n2 {
-  margin-left: -0.25rem;
-}
-.gl-ml-3 {
-  margin-left: 0.5rem;
-}
-.gl-mx-0\! {
-  margin-left: 0 !important;
-  margin-right: 0 !important;
-}
-.gl-text-right {
-  text-align: right;
-}
-.gl-white-space-nowrap {
-  white-space: nowrap;
-}
-.gl-font-sm {
-  font-size: 0.75rem;
-}
-.gl-font-weight-bold {
-  font-weight: 600;
-}
-.gl-z-index-1 {
-  z-index: 1;
-}
-
-@import "startup/cloaking";
-@include cloak-startup-scss(none);
diff --git a/app/assets/stylesheets/startup/startup-general.scss b/app/assets/stylesheets/startup/startup-general.scss
deleted file mode 100644
index 04c44dd9603..00000000000
--- a/app/assets/stylesheets/startup/startup-general.scss
+++ /dev/null
@@ -1,1781 +0,0 @@
-// DO NOT EDIT! This is auto-generated from "yarn run generate:startup_css"
-// Please see the feedback issue for more details and help:
-// https://gitlab.com/gitlab-org/gitlab/-/issues/331812
-@charset "UTF-8";
-:root {
-  --white: #fff;
-}
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
-}
-html {
-  font-family: sans-serif;
-  line-height: 1.15;
-}
-aside,
-header {
-  display: block;
-}
-body {
-  margin: 0;
-  font-family: var(--default-regular-font, "GitLab Sans"), -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: #333238;
-  text-align: left;
-  background-color: #fff;
-}
-ul {
-  margin-top: 0;
-  margin-bottom: 1rem;
-}
-ul ul {
-  margin-bottom: 0;
-}
-strong {
-  font-weight: bolder;
-}
-a {
-  color: #1f75cb;
-  text-decoration: none;
-  background-color: transparent;
-}
-a:not([href]):not([class]) {
-  color: inherit;
-  text-decoration: none;
-}
-kbd {
-  font-family: var(--default-mono-font, "GitLab Mono"), "JetBrains Mono",
-    "Menlo", "DejaVu Sans Mono", "Liberation Mono", "Consolas", "Ubuntu Mono",
-    "Courier New", "andale mono", "lucida console", monospace;
-  font-size: 1em;
-}
-img {
-  vertical-align: middle;
-  border-style: none;
-}
-svg {
-  overflow: hidden;
-  vertical-align: middle;
-}
-button {
-  border-radius: 0;
-}
-input,
-button {
-  margin: 0;
-  font-family: inherit;
-  font-size: inherit;
-  line-height: inherit;
-}
-button,
-input {
-  overflow: visible;
-}
-button {
-  text-transform: none;
-}
-[role="button"] {
-  cursor: pointer;
-}
-button:not(:disabled),
-[type="button"]:not(:disabled) {
-  cursor: pointer;
-}
-button::-moz-focus-inner,
-[type="button"]::-moz-focus-inner {
-  padding: 0;
-  border-style: none;
-}
-[type="search"] {
-  outline-offset: -2px;
-}
-.list-unstyled {
-  padding-left: 0;
-  list-style: none;
-}
-kbd {
-  padding: 0.2rem 0.4rem;
-  font-size: 90%;
-  color: #fff;
-  background-color: #333238;
-  border-radius: 0.2rem;
-}
-kbd kbd {
-  padding: 0;
-  font-size: 100%;
-  font-weight: 600;
-}
-.container-fluid {
-  width: 100%;
-  padding-right: 15px;
-  padding-left: 15px;
-  margin-right: auto;
-  margin-left: auto;
-}
-.form-control {
-  display: block;
-  width: 100%;
-  height: 32px;
-  padding: 0.375rem 0.75rem;
-  font-size: 0.875rem;
-  font-weight: 400;
-  line-height: 1.5;
-  color: #333238;
-  background-color: #fff;
-  background-clip: padding-box;
-  border: 1px solid #89888d;
-  border-radius: 0.25rem;
-}
-@media (prefers-reduced-motion: reduce) {
-}
-.form-control::placeholder {
-  color: #626168;
-  opacity: 1;
-}
-.form-control:disabled {
-  background-color: #fbfafd;
-  opacity: 1;
-}
-.btn {
-  display: inline-block;
-  font-weight: 400;
-  color: #333238;
-  text-align: center;
-  vertical-align: middle;
-  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 {
-  opacity: 0.65;
-}
-.btn:not(:disabled):not(.disabled) {
-  cursor: pointer;
-}
-.collapse:not(.show) {
-  display: none;
-}
-.dropdown {
-  position: relative;
-}
-.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: #333238;
-  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;
-}
-.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-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-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-fluid {
-    flex-wrap: nowrap;
-  }
-  .navbar-expand-sm .navbar-collapse {
-    display: flex !important;
-    flex-basis: auto;
-  }
-  .navbar-expand-sm .navbar-toggler {
-    display: none;
-  }
-}
-.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;
-}
-.badge-success {
-  color: #fff;
-  background-color: #108548;
-}
-.badge-info {
-  color: #fff;
-  background-color: #1f75cb;
-}
-.badge-warning {
-  color: #fff;
-  background-color: #ab6100;
-}
-.rounded-circle {
-  border-radius: 50% !important;
-}
-.d-none {
-  display: none !important;
-}
-.d-block {
-  display: block !important;
-}
-@media (min-width: 576px) {
-  .d-sm-none {
-    display: none !important;
-  }
-  .d-sm-inline-block {
-    display: inline-block !important;
-  }
-}
-@media (min-width: 768px) {
-  .d-md-block {
-    display: block !important;
-  }
-}
-@media (min-width: 992px) {
-  .d-lg-none {
-    display: none !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;
-}
-.gl-avatar {
-  display: inline-flex;
-  border-width: 1px;
-  border-style: solid;
-  border-color: rgba(31, 30, 36, 0.08);
-  overflow: hidden;
-  flex-shrink: 0;
-}
-.gl-avatar-s24 {
-  width: 1.5rem;
-  height: 1.5rem;
-  font-size: 0.75rem;
-  line-height: 1rem;
-  border-radius: 0.25rem;
-}
-.gl-avatar-circle {
-  border-radius: 50%;
-}
-.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;
-}
-.gl-badge.sm {
-  padding-top: 0;
-  padding-bottom: 0;
-}
-.gl-badge.badge-info {
-  background-color: #cbe2f9;
-  color: #0b5cad;
-}
-a.gl-badge.badge-info.active,
-a.gl-badge.badge-info:active {
-  color: #033464;
-  background-color: #9dc7f1;
-}
-a.gl-badge.badge-info:active {
-  box-shadow: 0 0 0 1px #fff, 0 0 0 3px #428fdc;
-  outline: none;
-}
-.gl-badge.badge-success {
-  background-color: #c3e6cd;
-  color: #24663b;
-}
-a.gl-badge.badge-success.active,
-a.gl-badge.badge-success:active {
-  color: #0a4020;
-  background-color: #91d4a8;
-}
-a.gl-badge.badge-success:active {
-  box-shadow: 0 0 0 1px #fff, 0 0 0 3px #428fdc;
-  outline: none;
-}
-.gl-badge.badge-warning {
-  background-color: #f5d9a8;
-  color: #8f4700;
-}
-a.gl-badge.badge-warning.active,
-a.gl-badge.badge-warning:active {
-  color: #5c2900;
-  background-color: #e9be74;
-}
-a.gl-badge.badge-warning:active {
-  box-shadow: 0 0 0 1px #fff, 0 0 0 3px #428fdc;
-  outline: none;
-}
-.gl-button .gl-badge {
-  top: 0;
-}
-.gl-form-input,
-.gl-form-input.form-control {
-  background-color: #fff;
-  font-family: var(--default-regular-font, "GitLab Sans"), -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: 0.875rem;
-  line-height: 1rem;
-  padding-top: 0.5rem;
-  padding-bottom: 0.5rem;
-  padding-left: 0.75rem;
-  padding-right: 0.75rem;
-  height: auto;
-  color: #333238;
-  box-shadow: inset 0 0 0 1px #89888d;
-  border-style: none;
-  appearance: none;
-  -moz-appearance: none;
-}
-.gl-form-input:disabled,
-.gl-form-input:not(.form-control-plaintext):not([type="color"]):read-only,
-.gl-form-input.form-control:disabled,
-.gl-form-input.form-control:not(.form-control-plaintext):not([type="color"]):read-only {
-  background-color: #fbfafd;
-  box-shadow: inset 0 0 0 1px #dcdcde;
-}
-.gl-form-input:disabled,
-.gl-form-input.form-control:disabled {
-  cursor: not-allowed;
-  color: #737278;
-}
-.gl-form-input::placeholder,
-.gl-form-input.form-control::placeholder {
-  color: #89888d;
-}
-.gl-icon {
-  fill: currentColor;
-}
-.gl-icon.s12 {
-  width: 12px;
-  height: 12px;
-}
-.gl-icon.s16 {
-  width: 16px;
-  height: 16px;
-}
-.gl-icon.s32 {
-  width: 32px;
-  height: 32px;
-}
-.gl-link {
-  font-size: 0.875rem;
-  color: #1f75cb;
-}
-.gl-link:active {
-  color: #0b5cad;
-}
-.gl-link:active {
-  text-decoration: underline;
-  outline: 2px solid #428fdc;
-  outline-offset: 2px;
-}
-.gl-button {
-  display: inline-flex;
-}
-.gl-button:not(.btn-link):active {
-  text-decoration: none;
-}
-.gl-button.gl-button {
-  border-width: 0;
-  padding-top: 0.5rem;
-  padding-bottom: 0.5rem;
-  padding-left: 0.75rem;
-  padding-right: 0.75rem;
-  background-color: transparent;
-  line-height: 1rem;
-  color: #333238;
-  fill: currentColor;
-  box-shadow: inset 0 0 0 1px #bfbfc3;
-  justify-content: center;
-  align-items: center;
-  font-size: 0.875rem;
-  border-radius: 0.25rem;
-}
-.gl-button.gl-button .gl-button-text {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  padding-top: 1px;
-  padding-bottom: 1px;
-  margin-top: -1px;
-  margin-bottom: -1px;
-}
-.gl-button.gl-button.btn-default {
-  background-color: #fff;
-}
-.gl-button.gl-button.btn-default:active,
-.gl-button.gl-button.btn-default.active {
-  box-shadow: inset 0 0 0 1px #626168, 0 0 0 1px #fff, 0 0 0 3px #428fdc;
-  outline: none;
-  background-color: #dcdcde;
-}
-.gl-button.gl-button.btn-default:active .gl-icon,
-.gl-button.gl-button.btn-default.active .gl-icon {
-  color: #333238;
-}
-.gl-button.gl-button.btn-default .gl-icon {
-  color: #737278;
-}
-.gl-search-box-by-type-search-icon {
-  color: #737278;
-  width: 1rem;
-  position: absolute;
-  left: 0.5rem;
-  top: calc(50% - 16px / 2);
-}
-.gl-search-box-by-type {
-  display: flex;
-  position: relative;
-}
-.gl-search-box-by-type-input,
-.gl-search-box-by-type-input.gl-form-input {
-  height: 2rem;
-  padding-right: 2rem;
-  padding-left: 1.75rem;
-}
-body {
-  font-size: 0.875rem;
-}
-button,
-html [type="button"],
-[role="button"] {
-  cursor: pointer;
-}
-strong {
-  font-weight: bold;
-}
-svg {
-  vertical-align: baseline;
-}
-.form-control {
-  font-size: 0.875rem;
-}
-.hidden {
-  display: none !important;
-  visibility: hidden !important;
-}
-.badge:not(.gl-badge) {
-  padding: 4px 5px;
-  font-size: 12px;
-  font-style: normal;
-  font-weight: 400;
-  display: inline-block;
-}
-.divider {
-  height: 0;
-  margin: 4px 0;
-  overflow: hidden;
-  border-top: 1px solid #dcdcde;
-}
-.toggle-sidebar-button .collapse-text,
-.toggle-sidebar-button .icon-chevron-double-lg-left {
-  color: #737278;
-}
-html {
-  overflow-y: scroll;
-}
-.layout-page {
-  padding-top: calc(
-    var(--header-height, 48px) +
-      calc(var(--system-header-height) + var(--performance-bar-height))
-  );
-  padding-bottom: var(--system-footer-height);
-}
-@media (min-width: 576px) {
-  .logged-out-marketing-header {
-    --header-height: 72px;
-  }
-}
-.btn {
-  border-radius: 4px;
-  font-size: 0.875rem;
-  font-weight: 400;
-  padding: 6px 10px;
-  background-color: #fff;
-  border-color: #dcdcde;
-  color: #333238;
-  color: #333238;
-  white-space: nowrap;
-}
-.btn:active {
-  background-color: #ececef;
-  box-shadow: none;
-}
-.btn:active,
-.btn.active {
-  background-color: #e6e6ea;
-  border-color: #dedee3;
-  color: #333238;
-}
-.btn svg {
-  height: 15px;
-  width: 15px;
-}
-.btn svg:not(:last-child) {
-  margin-right: 5px;
-}
-.badge.badge-pill:not(.gl-badge) {
-  font-weight: 400;
-  background-color: rgba(0, 0, 0, 0.07);
-  color: #535158;
-  vertical-align: baseline;
-}
-:root {
-  --performance-bar-height: 0px;
-  --system-header-height: 0px;
-  --top-bar-height: 0px;
-  --system-footer-height: 0px;
-  --mr-review-bar-height: 0px;
-  --breakpoint-xs: 0;
-  --breakpoint-sm: 576px;
-  --breakpoint-md: 768px;
-  --breakpoint-lg: 992px;
-  --breakpoint-xl: 1200px;
-}
-.with-top-bar {
-  --top-bar-height: 48px;
-}
-@media (min-width: 768px) {
-  .page-with-contextual-sidebar {
-    --application-bar-left: 56px;
-  }
-}
-@media (min-width: 1200px) {
-  .page-with-contextual-sidebar {
-    --application-bar-left: 256px;
-  }
-  .page-with-icon-sidebar {
-    --application-bar-left: 56px;
-  }
-  .page-with-super-sidebar {
-    --application-bar-left: 256px;
-  }
-  .page-with-super-sidebar-collapsed {
-    --application-bar-left: 0px;
-  }
-}
-.gl-font-sm {
-  font-size: 12px;
-}
-.dropdown {
-  position: relative;
-}
-.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: 0.875rem;
-  font-weight: 400;
-  padding: 8px 0;
-  background-color: #fff;
-  border: 1px solid #dcdcde;
-  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;
-}
-.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: #333238;
-  line-height: 16px;
-  white-space: normal;
-  overflow: hidden;
-  text-align: left;
-  width: 100%;
-}
-.dropdown-menu li > a:active,
-.dropdown-menu li > button:active {
-  background-color: #ececef;
-  color: #333238;
-  outline: 0;
-  text-decoration: none;
-}
-.dropdown-menu li > a:active,
-.dropdown-menu li > button:active {
-  box-shadow: inset 0 0 0 2px #428fdc, inset 0 0 0 3px #fff,
-    inset 0 0 0 1px #fff;
-  outline: none;
-}
-.dropdown-menu .divider {
-  height: 1px;
-  margin: 0.25rem 0;
-  padding: 0;
-  background-color: #dcdcde;
-}
-.dropdown-menu .badge.badge-pill + span:not(.badge):not(.badge-pill) {
-  margin-right: 40px;
-}
-@media (max-width: 575.98px) {
-  .navbar-gitlab li.dropdown {
-    position: static;
-  }
-  .navbar-gitlab li.dropdown.user-counter {
-    margin-left: 8px !important;
-  }
-  .navbar-gitlab li.dropdown.user-counter > a {
-    padding: 0 4px !important;
-  }
-  header.navbar-gitlab .dropdown .dropdown-menu {
-    width: 100%;
-    min-width: 100%;
-  }
-}
-input {
-  border-radius: 0.25rem;
-  color: #333238;
-  background-color: #fff;
-}
-input[type="search"] {
-  appearance: textfield;
-}
-.form-control {
-  border-radius: 4px;
-  padding: 6px 10px;
-}
-.form-control::placeholder {
-  color: #89888d;
-}
-kbd {
-  display: inline-block;
-  padding: 3px 5px;
-  font-size: 0.75rem;
-  line-height: 10px;
-  color: var(--gray-700, #535158);
-  vertical-align: unset;
-  background-color: var(--gray-10, #fbfafd);
-  border-width: 1px;
-  border-style: solid;
-  border-color: var(--gray-100, #dcdcde) var(--gray-100, #dcdcde)
-    var(--gray-200, #bfbfc3);
-  border-image: none;
-  border-radius: 3px;
-  box-shadow: 0 -1px 0 var(--gray-200, #bfbfc3) inset;
-}
-.navbar-gitlab {
-  padding: 0 16px;
-  z-index: 1000;
-  margin-bottom: 0;
-  min-height: var(--header-height, 48px);
-  border: 0;
-  position: fixed;
-  top: calc(var(--system-header-height) + var(--performance-bar-height));
-  left: 0;
-  right: 0;
-  border-radius: 0;
-}
-.navbar-gitlab .close-icon {
-  display: none;
-}
-.navbar-gitlab .header-content {
-  width: 100%;
-  display: flex;
-  justify-content: space-between;
-  position: relative;
-  min-height: var(--header-height, 48px);
-  padding-left: 0;
-}
-.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: 24px;
-}
-.navbar-gitlab .header-content .title a:not(.canary-badge) {
-  display: flex;
-  align-items: center;
-  padding: 2px 8px;
-  margin: 4px 2px 4px -8px;
-  border-radius: 4px;
-}
-.navbar-gitlab .header-content .title a:not(.canary-badge):active {
-  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6), 0 0 0 3px #63a6e9;
-  outline: none;
-}
-.navbar-gitlab .header-content .navbar-collapse > ul.nav > li:not(.d-none) {
-  margin: 0 2px;
-}
-.navbar-gitlab .header-search-form {
-  min-width: 320px;
-}
-@media (min-width: 768px) and (max-width: 1199.98px) {
-  .navbar-gitlab .header-search-form {
-    min-width: 200px;
-  }
-}
-.navbar-gitlab .header-search-form .keyboard-shortcut-helper {
-  transform: translateY(calc(50% - 2px));
-  box-shadow: none;
-  border-color: transparent;
-}
-.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 8px 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:not(.gl-badge) {
-  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 > a:active,
-.navbar-sub-nav > li > button:active,
-.navbar-nav > li > a:active,
-.navbar-nav > li > button:active {
-  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6), 0 0 0 3px #63a6e9;
-  outline: none;
-}
-.navbar-sub-nav > li .top-nav-toggle,
-.navbar-sub-nav > li > button,
-.navbar-nav > li .top-nav-toggle,
-.navbar-nav > li > button {
-  background: transparent;
-  border: 0;
-}
-.navbar-sub-nav .dropdown-menu,
-.navbar-nav .dropdown-menu {
-  position: absolute;
-}
-.navbar-sub-nav {
-  display: flex;
-  align-items: center;
-  height: 100%;
-  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;
-}
-@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-avatar {
-  float: left;
-  margin-right: 5px;
-  border-radius: 50%;
-  border: 1px solid #f2f2f4;
-}
-.notification-dot {
-  background-color: #d99530;
-  height: 12px;
-  width: 12px;
-  pointer-events: none;
-  visibility: hidden;
-  top: 3px;
-}
-.tanuki-logo .tanuki {
-  fill: #e24329;
-}
-.tanuki-logo .left-cheek,
-.tanuki-logo .right-cheek {
-  fill: #fc6d26;
-}
-.tanuki-logo .chin {
-  fill: #fca326;
-}
-.context-header {
-  position: relative;
-  margin-right: 2px;
-  width: 256px;
-}
-.context-header > a,
-.context-header > button {
-  font-weight: 600;
-  display: flex;
-  width: 100%;
-  align-items: center;
-  padding: 10px 16px 10px 10px;
-  color: #333238;
-  background-color: transparent;
-  border: 0;
-  text-align: left;
-}
-.context-header .avatar-container {
-  flex: 0 0 32px;
-  background-color: #fff;
-}
-.context-header .sidebar-context-title {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  color: #333238;
-}
-@media (min-width: 768px) {
-  .page-with-contextual-sidebar {
-    padding-left: 56px;
-  }
-}
-@media (min-width: 1200px) {
-  .page-with-contextual-sidebar {
-    padding-left: 256px;
-  }
-}
-@media (min-width: 768px) {
-  .page-with-icon-sidebar {
-    padding-left: 56px;
-  }
-}
-.nav-sidebar {
-  position: fixed;
-  bottom: var(--system-footer-height);
-  left: 0;
-  z-index: 600;
-  width: 256px;
-  top: calc(
-    var(--header-height, 48px) +
-      calc(var(--system-header-height) + var(--performance-bar-height)) +
-      var(--top-bar-height)
-  );
-  background-color: #fbfafd;
-  border-right: 1px solid #e9e9e9;
-  transform: translate3d(0, 0, 0);
-}
-.nav-sidebar.sidebar-collapsed-desktop {
-  width: 56px;
-}
-.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 .nav-item-name,
-.nav-sidebar.sidebar-collapsed-desktop .collapse-text {
-  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: unset;
-}
-.nav-sidebar.sidebar-collapsed-desktop .fly-out-top-item:not(.divider) {
-  display: block !important;
-}
-.nav-sidebar.sidebar-collapsed-desktop .avatar-container {
-  margin: 0 auto;
-}
-.nav-sidebar.sidebar-collapsed-desktop li.active:not(.fly-out-top-item) > a {
-  background-color: rgba(41, 41, 97, 0.08);
-}
-.nav-sidebar a {
-  text-decoration: none;
-  color: #333238;
-}
-.nav-sidebar li {
-  white-space: nowrap;
-}
-.nav-sidebar li .nav-item-name {
-  flex: 1;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-.nav-sidebar li > a,
-.nav-sidebar li > .fly-out-top-item-container {
-  height: 2rem;
-  padding-left: 0.75rem;
-  padding-right: 0.75rem;
-  display: flex;
-  align-items: center;
-  border-radius: 0.25rem;
-  width: auto;
-  margin: 1px 8px;
-}
-.nav-sidebar li.active > a {
-  font-weight: 600;
-}
-.nav-sidebar li.active:not(.fly-out-top-item) > a:not(.has-sub-items) {
-  background-color: rgba(31, 30, 36, 0.08);
-}
-.nav-sidebar ul {
-  padding-left: 0;
-  list-style: none;
-}
-@media (max-width: 767.98px) {
-  .nav-sidebar {
-    left: -256px;
-  }
-}
-.nav-sidebar .nav-icon-container {
-  display: flex;
-  margin-right: 8px;
-}
-.nav-sidebar
-  a:not(.has-sub-items)
-  + .sidebar-sub-level-items
-  .fly-out-top-item {
-  display: none;
-}
-.nav-sidebar
-  a:not(.has-sub-items)
-  + .sidebar-sub-level-items
-  .fly-out-top-item
-  a,
-.nav-sidebar
-  a:not(.has-sub-items)
-  + .sidebar-sub-level-items
-  .fly-out-top-item.active
-  a,
-.nav-sidebar
-  a:not(.has-sub-items)
-  + .sidebar-sub-level-items
-  .fly-out-top-item
-  .fly-out-top-item-container {
-  margin-left: 0;
-  margin-right: 0;
-  padding-left: 1rem;
-  padding-right: 1rem;
-  cursor: default;
-  pointer-events: none;
-  font-size: 0.75rem;
-  margin-top: -0.25rem;
-  margin-bottom: -0.25rem;
-  margin-top: 0;
-  position: relative;
-  color: #fff;
-  background: var(--black, #000);
-}
-.nav-sidebar
-  a:not(.has-sub-items)
-  + .sidebar-sub-level-items
-  .fly-out-top-item
-  a
-  strong,
-.nav-sidebar
-  a:not(.has-sub-items)
-  + .sidebar-sub-level-items
-  .fly-out-top-item.active
-  a
-  strong,
-.nav-sidebar
-  a:not(.has-sub-items)
-  + .sidebar-sub-level-items
-  .fly-out-top-item
-  .fly-out-top-item-container
-  strong {
-  font-weight: 400;
-}
-.nav-sidebar
-  a:not(.has-sub-items)
-  + .sidebar-sub-level-items
-  .fly-out-top-item
-  a::before,
-.nav-sidebar
-  a:not(.has-sub-items)
-  + .sidebar-sub-level-items
-  .fly-out-top-item.active
-  a::before,
-.nav-sidebar
-  a:not(.has-sub-items)
-  + .sidebar-sub-level-items
-  .fly-out-top-item
-  .fly-out-top-item-container::before {
-  position: absolute;
-  content: "";
-  display: block;
-  top: 50%;
-  left: -0.25rem;
-  margin-top: -0.25rem;
-  width: 0;
-  height: 0;
-  border-top: 0.25rem solid transparent;
-  border-bottom: 0.25rem solid transparent;
-  border-right: 0.25rem solid #000;
-  border-right-color: var(--black, #000);
-}
-@media (min-width: 576px) {
-  .nav-sidebar a.has-sub-items + .sidebar-sub-level-items {
-    min-width: 150px;
-  }
-}
-.nav-sidebar a.has-sub-items + .sidebar-sub-level-items .fly-out-top-item {
-  display: none;
-}
-.nav-sidebar a.has-sub-items + .sidebar-sub-level-items .fly-out-top-item a,
-.nav-sidebar
-  a.has-sub-items
-  + .sidebar-sub-level-items
-  .fly-out-top-item.active
-  a,
-.nav-sidebar
-  a.has-sub-items
-  + .sidebar-sub-level-items
-  .fly-out-top-item
-  .fly-out-top-item-container {
-  margin-left: 0;
-  margin-right: 0;
-  padding-left: 1rem;
-  padding-right: 1rem;
-  cursor: default;
-  pointer-events: none;
-  font-size: 0.75rem;
-  margin-top: 0;
-  border-bottom-left-radius: 0;
-  border-bottom-right-radius: 0;
-}
-@media (min-width: 768px) and (max-width: 1199px) {
-  .nav-sidebar:not(.sidebar-expanded-mobile) {
-    width: 56px;
-  }
-  .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) .collapse-text {
-    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: unset;
-  }
-  .nav-sidebar:not(.sidebar-expanded-mobile) .fly-out-top-item:not(.divider) {
-    display: block !important;
-  }
-  .nav-sidebar:not(.sidebar-expanded-mobile) .avatar-container {
-    margin: 0 auto;
-  }
-  .nav-sidebar:not(.sidebar-expanded-mobile)
-    li.active:not(.fly-out-top-item)
-    > a {
-    background-color: rgba(41, 41, 97, 0.08);
-  }
-  .nav-sidebar:not(.sidebar-expanded-mobile) .context-header {
-    height: 60px;
-    width: 56px;
-  }
-  .nav-sidebar:not(.sidebar-expanded-mobile) .context-header a {
-    padding: 10px 4px;
-  }
-  .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) .context-header {
-    height: auto;
-  }
-  .nav-sidebar:not(.sidebar-expanded-mobile) .context-header a {
-    padding: 0.25rem;
-  }
-  .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 {
-    width: 55px;
-    padding: 0 21px;
-  }
-  .nav-sidebar:not(.sidebar-expanded-mobile)
-    .toggle-sidebar-button
-    .collapse-text {
-    display: none;
-  }
-  .nav-sidebar:not(.sidebar-expanded-mobile)
-    .toggle-sidebar-button
-    .icon-chevron-double-lg-left {
-    transform: rotate(180deg);
-    margin: 0;
-  }
-}
-.nav-sidebar-inner-scroll {
-  height: 100%;
-  width: 100%;
-  overflow-x: hidden;
-  overflow-y: auto;
-}
-.nav-sidebar-inner-scroll > div.context-header {
-  margin-top: 0.25rem;
-}
-.nav-sidebar-inner-scroll > div.context-header a {
-  height: 2rem;
-  padding-left: 0.75rem;
-  padding-right: 0.75rem;
-  display: flex;
-  align-items: center;
-  border-radius: 0.25rem;
-  width: auto;
-  margin: 1px 8px;
-  padding: 0.25rem;
-  margin-bottom: 0.25rem;
-  margin-top: 0.125rem;
-  height: auto;
-}
-.nav-sidebar-inner-scroll > div.context-header a .avatar-container {
-  font-weight: 400;
-  flex: none;
-}
-.sidebar-top-level-items {
-  margin-bottom: 60px;
-}
-.sidebar-top-level-items .context-header a {
-  padding: 0.25rem;
-  margin-bottom: 0.25rem;
-  margin-top: 0.125rem;
-  height: auto;
-}
-.sidebar-top-level-items .context-header a .avatar-container {
-  font-weight: 400;
-  flex: none;
-}
-.sidebar-top-level-items
-  > li.active
-  .sidebar-sub-level-items:not(.is-fly-out-only) {
-  display: block;
-}
-.sidebar-top-level-items li > a.gl-link {
-  color: #333238;
-}
-.sidebar-top-level-items li > a.gl-link:active {
-  text-decoration: none;
-}
-.sidebar-sub-level-items {
-  padding-top: 0;
-  padding-bottom: 0;
-  display: none;
-}
-.sidebar-sub-level-items:not(.fly-out-list) li > a {
-  padding-left: 2.25rem;
-}
-.toggle-sidebar-button,
-.close-nav-button {
-  height: 48px;
-  padding: 0 16px;
-  background-color: #fbfafd;
-  border: 0;
-  color: #737278;
-  display: flex;
-  align-items: center;
-  background-color: #fbfafd;
-  position: fixed;
-  bottom: 0;
-  width: 255px;
-}
-.toggle-sidebar-button .collapse-text,
-.toggle-sidebar-button .icon-chevron-double-lg-left,
-.close-nav-button .collapse-text,
-.close-nav-button .icon-chevron-double-lg-left {
-  color: inherit;
-}
-.collapse-text {
-  white-space: nowrap;
-  overflow: hidden;
-}
-.sidebar-collapsed-desktop .context-header {
-  height: 60px;
-  width: 56px;
-}
-.sidebar-collapsed-desktop .context-header a {
-  padding: 10px 4px;
-}
-.sidebar-collapsed-desktop .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;
-}
-.sidebar-collapsed-desktop .context-header {
-  height: auto;
-}
-.sidebar-collapsed-desktop .context-header a {
-  padding: 0.25rem;
-}
-.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 {
-  width: 55px;
-  padding: 0 21px;
-}
-.sidebar-collapsed-desktop .toggle-sidebar-button .collapse-text {
-  display: none;
-}
-.sidebar-collapsed-desktop .toggle-sidebar-button .icon-chevron-double-lg-left {
-  transform: rotate(180deg);
-  margin: 0;
-}
-.close-nav-button {
-  display: none;
-}
-@media (max-width: 767.98px) {
-  .close-nav-button {
-    display: flex;
-  }
-  .toggle-sidebar-button {
-    display: none;
-  }
-}
-.super-sidebar {
-  display: flex;
-  flex-direction: column;
-  position: fixed;
-  top: calc(
-    var(--header-height, 48px) +
-      calc(var(--system-header-height) + var(--performance-bar-height))
-  );
-  bottom: var(--system-footer-height);
-  left: 0;
-  background-color: var(--gray-10, #fbfafd);
-  border-right: 1px solid rgba(31, 30, 36, 0.08);
-  transform: translate3d(0, 0, 0);
-  width: 256px;
-  z-index: 600;
-}
-.super-sidebar.super-sidebar-loading {
-  transform: translate3d(-100%, 0, 0);
-}
-@media (min-width: 1200px) {
-  .super-sidebar.super-sidebar-loading {
-    transform: translate3d(0, 0, 0);
-  }
-}
-@media (prefers-reduced-motion: no-preference) {
-}
-.page-with-super-sidebar {
-  padding-left: 0;
-}
-@media (prefers-reduced-motion: no-preference) {
-}
-@media (min-width: 1200px) {
-  .page-with-super-sidebar {
-    padding-left: 256px;
-  }
-}
-.page-with-super-sidebar-collapsed .super-sidebar {
-  transform: translate3d(-100%, 0, 0);
-}
-@media (min-width: 1200px) {
-  .page-with-super-sidebar-collapsed {
-    padding-left: 0;
-  }
-}
-input::-moz-placeholder {
-  color: #89888d;
-  opacity: 1;
-}
-input::-ms-input-placeholder {
-  color: #89888d;
-}
-input:-ms-input-placeholder {
-  color: #89888d;
-}
-svg {
-  fill: currentColor;
-}
-svg.s12 {
-  width: 12px;
-  height: 12px;
-}
-svg.s16 {
-  width: 16px;
-  height: 16px;
-}
-svg.s32 {
-  width: 32px;
-  height: 32px;
-}
-svg.s12 {
-  vertical-align: -1px;
-}
-svg.s16 {
-  vertical-align: -3px;
-}
-.avatar,
-.avatar-container {
-  float: left;
-  margin-right: 16px;
-  border-radius: 50%;
-}
-.avatar.s16,
-.avatar-container.s16 {
-  width: 16px;
-  height: 16px;
-  margin-right: 8px;
-}
-.avatar.s32,
-.avatar-container.s32 {
-  width: 32px;
-  height: 32px;
-  margin-right: 8px;
-}
-.avatar {
-  transition-property: none;
-  width: 40px;
-  height: 40px;
-  padding: 0;
-  background: #fefefe;
-  overflow: hidden;
-  box-shadow: inset 0 0 0 1px rgba(31, 30, 36, 0.1);
-}
-.avatar.avatar-tile {
-  border-radius: 0;
-  border: 0;
-}
-.identicon {
-  text-align: center;
-  vertical-align: top;
-  color: #333238;
-  background-color: #ececef;
-}
-.identicon.s16 {
-  font-size: 10px;
-  line-height: 16px;
-}
-.identicon.s32 {
-  font-size: 14px;
-  line-height: 32px;
-}
-.identicon.bg1 {
-  background-color: #fcf1ef;
-}
-.identicon.bg2 {
-  background-color: #f4f0ff;
-}
-.identicon.bg3 {
-  background-color: #f1f1ff;
-}
-.identicon.bg4 {
-  background-color: #e9f3fc;
-}
-.identicon.bg5 {
-  background-color: #ecf4ee;
-}
-.identicon.bg6 {
-  background-color: #fdf1dd;
-}
-.identicon.bg7 {
-  background-color: #ececef;
-}
-.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;
-}
-.rect-avatar {
-  border-radius: 2px;
-}
-.rect-avatar.s16 {
-  border-radius: 2px;
-}
-.rect-avatar.s16 .avatar {
-  border-radius: 2px;
-}
-.rect-avatar.s32 {
-  border-radius: 4px;
-}
-.rect-avatar.s32 .avatar {
-  border-radius: 4px;
-}
-
-.tab-width-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-border-none\! {
-  border-style: none !important;
-}
-.gl-display-none {
-  display: none;
-}
-.gl-display-flex {
-  display: flex;
-}
-@media (min-width: 992px) {
-  .gl-lg-display-flex {
-    display: flex;
-  }
-}
-@media (min-width: 576px) {
-  .gl-sm-display-block {
-    display: block;
-  }
-}
-@media (min-width: 992px) {
-  .gl-lg-display-block {
-    display: block;
-  }
-}
-.gl-align-items-center {
-  align-items: center;
-}
-.gl-align-items-stretch {
-  align-items: stretch;
-}
-.gl-flex-grow-0\! {
-  flex-grow: 0 !important;
-}
-.gl-flex-grow-1 {
-  flex-grow: 1;
-}
-.gl-flex-basis-half\! {
-  flex-basis: 50% !important;
-}
-.gl-justify-content-end {
-  justify-content: flex-end;
-}
-.gl-relative {
-  position: relative;
-}
-.gl-absolute {
-  position: absolute;
-}
-.gl-top-0 {
-  top: 0;
-}
-.gl-right-3 {
-  right: 0.5rem;
-}
-.gl-w-full {
-  width: 100%;
-}
-.gl-px-3 {
-  padding-left: 0.5rem;
-  padding-right: 0.5rem;
-}
-.gl-pr-2 {
-  padding-right: 0.25rem;
-}
-.gl-pt-0 {
-  padding-top: 0;
-}
-.gl-mr-auto {
-  margin-right: auto;
-}
-.gl-mr-3 {
-  margin-right: 0.5rem;
-}
-.gl-ml-n2 {
-  margin-left: -0.25rem;
-}
-.gl-ml-3 {
-  margin-left: 0.5rem;
-}
-.gl-mx-0\! {
-  margin-left: 0 !important;
-  margin-right: 0 !important;
-}
-.gl-text-right {
-  text-align: right;
-}
-.gl-white-space-nowrap {
-  white-space: nowrap;
-}
-.gl-font-sm {
-  font-size: 0.75rem;
-}
-.gl-font-weight-bold {
-  font-weight: 600;
-}
-.gl-z-index-1 {
-  z-index: 1;
-}
-
-@import "startup/cloaking";
-@include cloak-startup-scss(none);
diff --git a/app/assets/stylesheets/startup/startup-signin.scss b/app/assets/stylesheets/startup/startup-signin.scss
deleted file mode 100644
index 32da8e1bb6b..00000000000
--- a/app/assets/stylesheets/startup/startup-signin.scss
+++ /dev/null
@@ -1,852 +0,0 @@
-// DO NOT EDIT! This is auto-generated from "yarn run generate:startup_css"
-// Please see the feedback issue for more details and help:
-// https://gitlab.com/gitlab-org/gitlab/-/issues/331812
-@charset "UTF-8";
-:root {
-  --white: #fff;
-}
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
-}
-html {
-  font-family: sans-serif;
-  line-height: 1.15;
-}
-header {
-  display: block;
-}
-body {
-  margin: 0;
-  font-family: var(--default-regular-font, "GitLab Sans"), -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: #333238;
-  text-align: left;
-  background-color: #fff;
-}
-hr {
-  box-sizing: content-box;
-  height: 0;
-  overflow: visible;
-}
-h1,
-h3 {
-  margin-top: 0;
-  margin-bottom: 0.25rem;
-}
-p {
-  margin-top: 0;
-  margin-bottom: 1rem;
-}
-a {
-  color: #1f75cb;
-  text-decoration: none;
-  background-color: transparent;
-}
-a:not([href]):not([class]) {
-  color: inherit;
-  text-decoration: none;
-}
-img {
-  vertical-align: middle;
-  border-style: none;
-}
-svg {
-  overflow: hidden;
-  vertical-align: middle;
-}
-label {
-  display: inline-block;
-  margin-bottom: 0.5rem;
-}
-button {
-  border-radius: 0;
-}
-input,
-button {
-  margin: 0;
-  font-family: inherit;
-  font-size: inherit;
-  line-height: inherit;
-}
-button,
-input {
-  overflow: visible;
-}
-button {
-  text-transform: none;
-}
-button:not(:disabled),
-[type="submit"]:not(:disabled) {
-  cursor: pointer;
-}
-button::-moz-focus-inner,
-[type="submit"]::-moz-focus-inner {
-  padding: 0;
-  border-style: none;
-}
-input[type="checkbox"] {
-  box-sizing: border-box;
-  padding: 0;
-}
-fieldset {
-  min-width: 0;
-  padding: 0;
-  margin: 0;
-  border: 0;
-}
-[hidden] {
-  display: none !important;
-}
-h1,
-h3 {
-  margin-bottom: 0.25rem;
-  font-weight: 600;
-  line-height: 1.2;
-  color: #333238;
-}
-h1 {
-  font-size: 2.1875rem;
-}
-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);
-}
-.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;
-  }
-}
-.row {
-  display: flex;
-  flex-wrap: wrap;
-  margin-right: -15px;
-  margin-left: -15px;
-}
-.col-md-6,
-.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-12 {
-    flex: 0 0 100%;
-    max-width: 100%;
-  }
-  .order-sm-1 {
-    order: 1;
-  }
-  .order-sm-12 {
-    order: 12;
-  }
-}
-@media (min-width: 768px) {
-  .col-md-6 {
-    flex: 0 0 50%;
-    max-width: 50%;
-  }
-}
-.form-control {
-  display: block;
-  width: 100%;
-  height: 32px;
-  padding: 0.375rem 0.75rem;
-  font-size: 0.875rem;
-  font-weight: 400;
-  line-height: 1.5;
-  color: #333238;
-  background-color: #fff;
-  background-clip: padding-box;
-  border: 1px solid #89888d;
-  border-radius: 0.25rem;
-}
-@media (prefers-reduced-motion: reduce) {
-}
-.form-control::placeholder {
-  color: #626168;
-  opacity: 1;
-}
-.form-control:disabled {
-  background-color: #fbfafd;
-  opacity: 1;
-}
-.form-group {
-  margin-bottom: 1rem;
-}
-.form-text {
-  display: block;
-  margin-top: 0.25rem;
-}
-.btn {
-  display: inline-block;
-  font-weight: 400;
-  color: #333238;
-  text-align: center;
-  vertical-align: middle;
-  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 {
-  opacity: 0.65;
-}
-.btn:not(:disabled):not(.disabled) {
-  cursor: pointer;
-}
-fieldset:disabled a.btn {
-  pointer-events: none;
-}
-.btn-block {
-  display: block;
-  width: 100%;
-}
-.btn-block + .btn-block {
-  margin-top: 0.5rem;
-}
-input.btn-block[type="submit"] {
-  width: 100%;
-}
-.custom-control {
-  position: relative;
-  z-index: 1;
-  display: block;
-  min-height: 1.5rem;
-  padding-left: 1.5rem;
-  print-color-adjust: exact;
-}
-.custom-control-input {
-  position: absolute;
-  left: 0;
-  z-index: -1;
-  width: 1rem;
-  height: 1.25rem;
-  opacity: 0;
-}
-.custom-control-input:checked ~ .custom-control-label::before {
-  color: #fff;
-  border-color: #007bff;
-  background-color: #007bff;
-}
-.custom-control-input:not(:disabled):active ~ .custom-control-label::before {
-  color: #fff;
-  background-color: #b3d7ff;
-  border-color: #b3d7ff;
-}
-.custom-control-input:disabled ~ .custom-control-label {
-  color: #626168;
-}
-.custom-control-input:disabled ~ .custom-control-label::before {
-  background-color: #fbfafd;
-}
-.custom-control-label {
-  position: relative;
-  margin-bottom: 0;
-  vertical-align: top;
-}
-.custom-control-label::before {
-  position: absolute;
-  top: 0.25rem;
-  left: -1.5rem;
-  display: block;
-  width: 1rem;
-  height: 1rem;
-  pointer-events: none;
-  content: "";
-  background-color: #fff;
-  border: 1px solid #737278;
-}
-.custom-control-label::after {
-  position: absolute;
-  top: 0.25rem;
-  left: -1.5rem;
-  display: block;
-  width: 1rem;
-  height: 1rem;
-  content: "";
-  background: 50% / 50% 50% no-repeat;
-}
-.custom-checkbox .custom-control-label::before {
-  border-radius: 0.25rem;
-}
-.custom-checkbox .custom-control-input:checked ~ .custom-control-label::after {
-  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26l2.974 2.99L8 2.193z'/%3e%3c/svg%3e");
-}
-.custom-checkbox
-  .custom-control-input:indeterminate
-  ~ .custom-control-label::before {
-  border-color: #007bff;
-  background-color: #007bff;
-}
-.custom-checkbox
-  .custom-control-input:indeterminate
-  ~ .custom-control-label::after {
-  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'%3e%3cpath stroke='%23fff' d='M0 2h4'/%3e%3c/svg%3e");
-}
-.custom-checkbox
-  .custom-control-input:disabled:checked
-  ~ .custom-control-label::before {
-  background-color: rgba(0, 123, 255, 0.5);
-}
-.custom-checkbox
-  .custom-control-input:disabled:indeterminate
-  ~ .custom-control-label::before {
-  background-color: rgba(0, 123, 255, 0.5);
-}
-@media (prefers-reduced-motion: reduce) {
-}
-.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 {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  justify-content: space-between;
-}
-.fixed-top {
-  position: fixed;
-  top: 0;
-  right: 0;
-  left: 0;
-  z-index: 1030;
-}
-.mt-3 {
-  margin-top: 1rem !important;
-}
-.mb-3 {
-  margin-bottom: 1rem !important;
-}
-.text-nowrap {
-  white-space: nowrap !important;
-}
-.font-weight-normal {
-  font-weight: 400 !important;
-}
-.gl-form-input,
-.gl-form-input.form-control {
-  background-color: #fff;
-  font-family: var(--default-regular-font, "GitLab Sans"), -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: 0.875rem;
-  line-height: 1rem;
-  padding-top: 0.5rem;
-  padding-bottom: 0.5rem;
-  padding-left: 0.75rem;
-  padding-right: 0.75rem;
-  height: auto;
-  color: #333238;
-  box-shadow: inset 0 0 0 1px #89888d;
-  border-style: none;
-  appearance: none;
-  -moz-appearance: none;
-}
-.gl-form-input:disabled,
-.gl-form-input:not(.form-control-plaintext):not([type="color"]):read-only,
-.gl-form-input.form-control:disabled,
-.gl-form-input.form-control:not(.form-control-plaintext):not([type="color"]):read-only {
-  background-color: #fbfafd;
-  box-shadow: inset 0 0 0 1px #dcdcde;
-}
-.gl-form-input:disabled,
-.gl-form-input.form-control:disabled {
-  cursor: not-allowed;
-  color: #737278;
-}
-.gl-form-input::placeholder,
-.gl-form-input.form-control::placeholder {
-  color: #89888d;
-}
-.gl-form-checkbox {
-  font-size: 0.875rem;
-  line-height: 1rem;
-  color: #333238;
-}
-.gl-form-checkbox .custom-control-input:disabled,
-.gl-form-checkbox .custom-control-input:disabled ~ .custom-control-label {
-  cursor: not-allowed;
-  color: #89888d;
-}
-.gl-form-checkbox.custom-control {
-  padding-left: 1rem;
-}
-.gl-form-checkbox.custom-control .custom-control-input ~ .custom-control-label {
-  cursor: pointer;
-  padding-left: 0.5rem;
-  margin-bottom: 0.5rem;
-}
-.gl-form-checkbox.custom-control
-  .custom-control-input
-  ~ .custom-control-label::before,
-.gl-form-checkbox.custom-control
-  .custom-control-input
-  ~ .custom-control-label::after {
-  top: 0;
-  left: -1rem;
-}
-.gl-form-checkbox.custom-control
-  .custom-control-input
-  ~ .custom-control-label::before {
-  background-color: #fff;
-  border-color: #89888d;
-}
-.gl-form-checkbox.custom-control
-  .custom-control-input:checked
-  ~ .custom-control-label::before {
-  background-color: #1f75cb;
-  border-color: #1f75cb;
-}
-.gl-form-checkbox.custom-control
-  .custom-control-input[type="checkbox"]:checked
-  ~ .custom-control-label::after,
-.gl-form-checkbox.custom-control
-  .custom-control-input[type="checkbox"]:indeterminate
-  ~ .custom-control-label::after {
-  background: none;
-  background-color: #fff;
-  mask-repeat: no-repeat;
-  mask-position: center center;
-}
-.gl-form-checkbox.custom-control
-  .custom-control-input[type="checkbox"]:checked
-  ~ .custom-control-label::after {
-  mask-image: url('data:image/svg+xml,%3Csvg width="8" height="7" viewBox="0 0 8 7" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M1 3.05299L2.99123 5L7 1" stroke="white" stroke-width="2"/%3E%3C/svg%3E%0A');
-}
-.gl-form-checkbox.custom-control
-  .custom-control-input[type="checkbox"]:indeterminate
-  ~ .custom-control-label::after {
-  mask-image: url('data:image/svg+xml,%3Csvg width="8" height="2" viewBox="0 0 8 2" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M0 1L8 1" stroke="white" stroke-width="2"/%3E%3C/svg%3E%0A');
-}
-.gl-form-checkbox.custom-control.custom-checkbox
-  .custom-control-input:indeterminate
-  ~ .custom-control-label::before {
-  background-color: #1f75cb;
-  border-color: #1f75cb;
-}
-.gl-form-checkbox.custom-control
-  .custom-control-input:disabled
-  ~ .custom-control-label {
-  cursor: not-allowed;
-}
-.gl-form-checkbox.custom-control
-  .custom-control-input:disabled
-  ~ .custom-control-label::before {
-  background-color: #ececef;
-  border-color: #dcdcde;
-  pointer-events: auto;
-}
-.gl-form-checkbox.custom-control
-  .custom-control-input:checked:disabled
-  ~ .custom-control-label::before,
-.gl-form-checkbox.custom-control
-  .custom-control-input[type="checkbox"]:indeterminate:disabled
-  ~ .custom-control-label::before {
-  background-color: #dcdcde;
-  border-color: #dcdcde;
-}
-.gl-form-checkbox.custom-control
-  .custom-control-input:checked:disabled
-  ~ .custom-control-label::after,
-.gl-form-checkbox.custom-control
-  .custom-control-input[type="checkbox"]:indeterminate:disabled
-  ~ .custom-control-label::after {
-  background-color: #737278;
-}
-.gl-button {
-  display: inline-flex;
-}
-.gl-button:not(.btn-link):active {
-  text-decoration: none;
-}
-.gl-button.gl-button,
-.gl-button.gl-button.btn-block {
-  border-width: 0;
-  padding-top: 0.5rem;
-  padding-bottom: 0.5rem;
-  padding-left: 0.75rem;
-  padding-right: 0.75rem;
-  background-color: transparent;
-  line-height: 1rem;
-  color: #333238;
-  fill: currentColor;
-  box-shadow: inset 0 0 0 1px #bfbfc3;
-  justify-content: center;
-  align-items: center;
-  font-size: 0.875rem;
-  border-radius: 0.25rem;
-}
-.gl-button.gl-button .gl-button-text,
-.gl-button.gl-button.btn-block .gl-button-text {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  padding-top: 1px;
-  padding-bottom: 1px;
-  margin-top: -1px;
-  margin-bottom: -1px;
-}
-.gl-button.gl-button .gl-button-icon,
-.gl-button.gl-button.btn-block .gl-button-icon {
-  height: 1rem;
-  width: 1rem;
-  flex-shrink: 0;
-  margin-right: 0.25rem;
-  top: auto;
-}
-.gl-button.gl-button.btn-default,
-.gl-button.gl-button.btn-block.btn-default {
-  background-color: #fff;
-}
-.gl-button.gl-button.btn-default:active,
-.gl-button.gl-button.btn-default.active,
-.gl-button.gl-button.btn-block.btn-default:active,
-.gl-button.gl-button.btn-block.btn-default.active {
-  box-shadow: inset 0 0 0 1px #626168, 0 0 0 1px #fff, 0 0 0 3px #428fdc;
-  outline: none;
-  background-color: #dcdcde;
-}
-.gl-button.gl-button.btn-confirm,
-.gl-button.gl-button.btn-block.btn-confirm {
-  color: #fff;
-}
-.gl-button.gl-button.btn-confirm,
-.gl-button.gl-button.btn-block.btn-confirm {
-  background-color: #1f75cb;
-  box-shadow: inset 0 0 0 1px #1068bf;
-}
-.gl-button.gl-button.btn-confirm:active,
-.gl-button.gl-button.btn-confirm.active,
-.gl-button.gl-button.btn-block.btn-confirm:active,
-.gl-button.gl-button.btn-block.btn-confirm.active {
-  box-shadow: inset 0 0 0 1px #033464, 0 0 0 1px #fff, 0 0 0 3px #428fdc;
-  outline: none;
-  background-color: #0b5cad;
-}
-body {
-  font-size: 0.875rem;
-}
-button,
-[type="submit"] {
-  cursor: pointer;
-}
-h1,
-h3 {
-  margin-top: 20px;
-  margin-bottom: 10px;
-}
-hr {
-  overflow: hidden;
-}
-svg {
-  vertical-align: baseline;
-}
-.form-control {
-  font-size: 0.875rem;
-}
-.hidden {
-  display: none !important;
-  visibility: hidden !important;
-}
-html {
-  overflow-y: scroll;
-}
-body.navless {
-  background-color: #fff !important;
-}
-.container {
-  padding-top: 0;
-  z-index: 5;
-}
-.container .content {
-  margin: 0;
-}
-@media (max-width: 575.98px) {
-  .container .content {
-    margin-top: 20px;
-  }
-}
-.btn {
-  border-radius: 4px;
-  font-size: 0.875rem;
-  font-weight: 400;
-  padding: 6px 10px;
-  background-color: #fff;
-  border-color: #dcdcde;
-  color: #333238;
-  color: #333238;
-  white-space: nowrap;
-}
-.btn:active {
-  background-color: #ececef;
-  box-shadow: none;
-}
-.btn:active,
-.btn.active {
-  background-color: #e6e6ea;
-  border-color: #dedee3;
-  color: #333238;
-}
-.btn svg {
-  height: 15px;
-  width: 15px;
-}
-.btn svg:not(:last-child) {
-  margin-right: 5px;
-}
-.btn-block {
-  width: 100%;
-  margin: 0;
-}
-.btn-block.btn {
-  padding: 6px 0;
-}
-:root {
-  --performance-bar-height: 0px;
-  --system-header-height: 0px;
-  --top-bar-height: 0px;
-  --system-footer-height: 0px;
-  --mr-review-bar-height: 0px;
-  --breakpoint-xs: 0;
-  --breakpoint-sm: 576px;
-  --breakpoint-md: 768px;
-  --breakpoint-lg: 992px;
-  --breakpoint-xl: 1200px;
-}
-.tab-content {
-  overflow: visible;
-}
-@media (max-width: 767.98px) {
-  .tab-content {
-    isolation: isolate;
-  }
-}
-hr {
-  margin: 1.5rem 0;
-  border-top: 1px solid #ececef;
-}
-.flash-container {
-  margin: 0;
-  margin-bottom: 16px;
-  font-size: 14px;
-  position: relative;
-  z-index: 1;
-}
-.flash-container.sticky {
-  position: sticky;
-  top: calc(
-    var(--header-height, 48px) +
-      calc(var(--system-header-height) + var(--performance-bar-height)) +
-      var(--top-bar-height)
-  );
-  z-index: 251;
-}
-.flash-container.flash-container-page {
-  margin-bottom: 0;
-}
-.flash-container:empty {
-  margin: 0;
-}
-input {
-  border-radius: 0.25rem;
-  color: #333238;
-  background-color: #fff;
-}
-label {
-  font-weight: 600;
-}
-label.custom-control-label {
-  font-weight: 400;
-}
-.form-control {
-  border-radius: 4px;
-  padding: 6px 10px;
-}
-.form-control::placeholder {
-  color: #89888d;
-}
-.gl-show-field-errors .form-control:not(textarea) {
-  height: 32px;
-}
-.navbar-empty {
-  justify-content: center;
-  height: var(--header-height, 48px);
-  background: #fff;
-  border-bottom: 1px solid #dcdcde;
-}
-.navbar-empty .tanuki-logo,
-.navbar-empty .brand-header-logo {
-  max-height: 100%;
-}
-.tanuki-logo .tanuki {
-  fill: #e24329;
-}
-.tanuki-logo .left-cheek,
-.tanuki-logo .right-cheek {
-  fill: #fc6d26;
-}
-.tanuki-logo .chin {
-  fill: #fca326;
-}
-input::-moz-placeholder {
-  color: #89888d;
-  opacity: 1;
-}
-input::-ms-input-placeholder {
-  color: #89888d;
-}
-input:-ms-input-placeholder {
-  color: #89888d;
-}
-svg {
-  fill: currentColor;
-}
-
-.fixed-top {
-  top: calc(var(--system-header-height) + var(--performance-bar-height));
-}
-.gl-display-flex {
-  display: flex;
-}
-.gl-align-items-center {
-  align-items: center;
-}
-.gl-flex-wrap {
-  flex-wrap: wrap;
-}
-.gl-justify-content-space-between {
-  justify-content: space-between;
-}
-.gl-align-self-end {
-  align-self: flex-end;
-}
-.gl-w-10 {
-  width: 3.5rem;
-}
-.gl-w-half {
-  width: 50%;
-}
-.gl-w-full {
-  width: 100%;
-}
-@media (max-width: 575.98px) {
-  .gl-xs-w-full {
-    width: 100%;
-  }
-}
-.gl-h-full {
-  height: 100%;
-}
-.gl-p-5 {
-  padding: 1rem;
-}
-.gl-px-5 {
-  padding-left: 1rem;
-  padding-right: 1rem;
-}
-.gl-py-5 {
-  padding-top: 1rem;
-  padding-bottom: 1rem;
-}
-.gl-m-0 {
-  margin: 0;
-}
-.gl-mt-3 {
-  margin-top: 0.5rem;
-}
-.gl-mt-5 {
-  margin-top: 1rem;
-}
-.gl-mr-auto {
-  margin-right: auto;
-}
-.gl-mb-2 {
-  margin-bottom: 0.25rem;
-}
-.gl-mb-3 {
-  margin-bottom: 0.5rem;
-}
-.gl-ml-auto {
-  margin-left: auto;
-}
-.gl-gap-5 {
-  gap: 1rem;
-}
-@media (min-width: 576px) {
-  .gl-sm-mt-0 {
-    margin-top: 0;
-  }
-}
-.gl-text-center {
-  text-align: center;
-}
-.gl-text-right {
-  text-align: right;
-}
-.gl-font-size-h2 {
-  font-size: 1.1875rem;
-}
-.gl-font-weight-bold {
-  font-weight: 600;
-}
-
-@import "startup/cloaking";
-@include cloak-startup-scss(none);
diff --git a/app/controllers/projects/pipelines_controller.rb b/app/controllers/projects/pipelines_controller.rb
index 036ea45cc78..cd2db2dad2c 100644
--- a/app/controllers/projects/pipelines_controller.rb
+++ b/app/controllers/projects/pipelines_controller.rb
@@ -18,7 +18,8 @@ class Projects::PipelinesController < Projects::ApplicationController
   before_action :authorize_read_build!, only: [:index, :show]
   before_action :authorize_read_ci_cd_analytics!, only: [:charts]
   before_action :authorize_create_pipeline!, only: [:new, :create]
-  before_action :authorize_update_pipeline!, only: [:retry, :cancel]
+  before_action :authorize_update_pipeline!, only: [:retry]
+  before_action :authorize_cancel_pipeline!, only: [:cancel]
   before_action :ensure_pipeline, only: [:show, :downloadable_artifacts]
   before_action :reject_if_build_artifacts_size_refreshing!, only: [:destroy]
 
@@ -303,6 +304,10 @@ class Projects::PipelinesController < Projects::ApplicationController
     return access_denied! unless can?(current_user, :update_pipeline, @pipeline)
   end
 
+  def authorize_cancel_pipeline!
+    return access_denied! unless can?(current_user, :cancel_pipeline, @pipeline)
+  end
+
   def limited_pipelines_count(project, scope = nil)
     finder = Ci::PipelinesFinder.new(project, current_user, index_params.merge(scope: scope))
 
diff --git a/app/finders/packages/pypi/packages_finder.rb b/app/finders/packages/pypi/packages_finder.rb
index 17138134eb3..944824bee6e 100644
--- a/app/finders/packages/pypi/packages_finder.rb
+++ b/app/finders/packages/pypi/packages_finder.rb
@@ -3,6 +3,8 @@
 module Packages
   module Pypi
     class PackagesFinder < ::Packages::GroupOrProjectPackageFinder
+      extend ::Gitlab::Utils::Override
+
       def execute
         return packages unless @params[:package_name]
 
@@ -14,6 +16,15 @@ module Packages
       def packages
         base.pypi.has_version
       end
+
+      override :group_packages
+      def group_packages
+        packages_visible_to_user(
+          @current_user,
+          within_group: @project_or_group,
+          with_package_registry_enabled: true
+        )
+      end
     end
   end
 end
diff --git a/app/graphql/mutations/ci/pipeline/cancel.rb b/app/graphql/mutations/ci/pipeline/cancel.rb
index 810f458fd75..1014462d0b1 100644
--- a/app/graphql/mutations/ci/pipeline/cancel.rb
+++ b/app/graphql/mutations/ci/pipeline/cancel.rb
@@ -6,7 +6,7 @@ module Mutations
       class Cancel < Base
         graphql_name 'PipelineCancel'
 
-        authorize :update_pipeline
+        authorize :cancel_pipeline
 
         def resolve(id:)
           pipeline = authorized_find!(id: id)
diff --git a/app/graphql/types/abuse_report_type.rb b/app/graphql/types/abuse_report_type.rb
index 012e709cdb5..2532530cfa9 100644
--- a/app/graphql/types/abuse_report_type.rb
+++ b/app/graphql/types/abuse_report_type.rb
@@ -3,9 +3,18 @@
 module Types
   class AbuseReportType < BaseObject
     graphql_name 'AbuseReport'
+
+    implements Types::Notes::NoteableInterface
+
     description 'An abuse report'
+
     authorize :read_abuse_report
 
+    expose_permissions Types::PermissionTypes::AbuseReport
+
+    field :id, Types::GlobalIDType[::AbuseReport],
+      null: false, description: 'Global ID of the abuse report.'
+
     field :labels, ::Types::LabelType.connection_type,
       null: true, description: 'Labels of the abuse report.'
   end
diff --git a/app/graphql/types/notes/noteable_interface.rb b/app/graphql/types/notes/noteable_interface.rb
index 9971511d6ce..7c75f213e24 100644
--- a/app/graphql/types/notes/noteable_interface.rb
+++ b/app/graphql/types/notes/noteable_interface.rb
@@ -21,6 +21,8 @@ module Types
           Types::DesignManagement::DesignType
         when ::AlertManagement::Alert
           Types::AlertManagement::AlertType
+        when AbuseReport
+          Types::AbuseReportType
         else
           raise "Unknown GraphQL type for #{object}"
         end
diff --git a/app/graphql/types/permission_types/abuse_report.rb b/app/graphql/types/permission_types/abuse_report.rb
new file mode 100644
index 00000000000..abd5d545d02
--- /dev/null
+++ b/app/graphql/types/permission_types/abuse_report.rb
@@ -0,0 +1,11 @@
+# frozen_string_literal: true
+
+module Types
+  module PermissionTypes
+    class AbuseReport < BasePermissionType
+      graphql_name 'AbuseReportPermissions'
+
+      abilities :read_abuse_report, :create_note
+    end
+  end
+end
diff --git a/app/models/abuse_report.rb b/app/models/abuse_report.rb
index 872dedf07b1..de6b644c536 100644
--- a/app/models/abuse_report.rb
+++ b/app/models/abuse_report.rb
@@ -139,11 +139,11 @@ class AbuseReport < ApplicationRecord
   def reported_content
     case report_type
     when :issue
-      project.issues.iid_in(route_hash[:id]).pick(:description_html)
+      reported_project.issues.iid_in(route_hash[:id]).pick(:description_html)
     when :merge_request
-      project.merge_requests.iid_in(route_hash[:id]).pick(:description_html)
+      reported_project.merge_requests.iid_in(route_hash[:id]).pick(:description_html)
     when :comment
-      project.notes.id_in(note_id_from_url).pick(:note_html)
+      reported_project.notes.id_in(note_id_from_url).pick(:note_html)
     end
   end
 
@@ -157,13 +157,19 @@ class AbuseReport < ApplicationRecord
     user.abuse_reports.open.by_category(category).id_not_in(id).includes(:reporter)
   end
 
+  # createNote mutation calls noteable.project,
+  # which in case of abuse reports is nil
+  def project
+    nil
+  end
+
   private
 
-  def project
+  def reported_project
     Project.find_by_full_path(route_hash.values_at(:namespace_id, :project_id).join('/'))
   end
 
-  def group
+  def reported_group
     Group.find_by_full_path(route_hash[:group_id])
   end
 
diff --git a/app/models/ci/catalog/components_project.rb b/app/models/ci/catalog/components_project.rb
index 2bc33a6f050..783a2d358c5 100644
--- a/app/models/ci/catalog/components_project.rb
+++ b/app/models/ci/catalog/components_project.rb
@@ -10,6 +10,7 @@ module Ci
       TEMPLATE_FILE = 'template.yml'
       TEMPLATES_DIR = 'templates'
       TEMPLATE_PATH_REGEX = '^templates\/\w+\-?\w+(?:\/template)?\.yml$'
+      COMPONENTS_LIMIT = 10
 
       ComponentData = Struct.new(:content, :path, keyword_init: true)
 
@@ -18,8 +19,8 @@ module Ci
         @sha = sha
       end
 
-      def fetch_component_paths(sha)
-        project.repository.search_files_by_regexp(TEMPLATE_PATH_REGEX, sha)
+      def fetch_component_paths(sha, limit: COMPONENTS_LIMIT)
+        project.repository.search_files_by_regexp(TEMPLATE_PATH_REGEX, sha, limit: limit)
       end
 
       def extract_component_name(path)
diff --git a/app/policies/abuse_report_policy.rb b/app/policies/abuse_report_policy.rb
index f1f994e6a42..043dbd0cb89 100644
--- a/app/policies/abuse_report_policy.rb
+++ b/app/policies/abuse_report_policy.rb
@@ -3,5 +3,6 @@
 class AbuseReportPolicy < ::BasePolicy
   rule { admin }.policy do
     enable :read_abuse_report
+    enable :create_note
   end
 end
diff --git a/app/policies/ci/pipeline_policy.rb b/app/policies/ci/pipeline_policy.rb
index 1d60b1e79de..bd6e580c33a 100644
--- a/app/policies/ci/pipeline_policy.rb
+++ b/app/policies/ci/pipeline_policy.rb
@@ -45,6 +45,15 @@ module Ci
       enable :read_pipeline_variable
     end
 
+    # TODO: splitting out cancel from update in Issue #20207
+    rule { can?(:update_pipeline) }.policy do
+      enable :cancel_pipeline
+    end
+
+    rule { ~can?(:update_pipeline) }.policy do
+      prevent :cancel_pipeline
+    end
+
     rule { project_allows_read_dependency }.policy do
       enable :read_dependency
     end
diff --git a/app/policies/project_policy.rb b/app/policies/project_policy.rb
index 28ba819cb60..74d2272b670 100644
--- a/app/policies/project_policy.rb
+++ b/app/policies/project_policy.rb
@@ -511,6 +511,7 @@ class ProjectPolicy < BasePolicy
   rule { can?(:developer_access) & user_confirmed? }.policy do
     enable :create_pipeline
     enable :update_pipeline
+    enable :cancel_pipeline
     enable :create_pipeline_schedule
   end
 
@@ -651,6 +652,7 @@ class ProjectPolicy < BasePolicy
   #   - We prevent the user from accessing Pipelines
   rule { (builds_disabled & ~internal_builds_disabled) | repository_disabled }.policy do
     prevent(*create_read_update_admin_destroy(:pipeline))
+    prevent :cancel_pipeline
     prevent(*create_read_update_admin_destroy(:commit_status))
   end
 
diff --git a/app/serializers/ci/pipeline_entity.rb b/app/serializers/ci/pipeline_entity.rb
index 832ca619edc..4ff56c67d13 100644
--- a/app/serializers/ci/pipeline_entity.rb
+++ b/app/serializers/ci/pipeline_entity.rb
@@ -106,7 +106,7 @@ class Ci::PipelineEntity < Grape::Entity
   end
 
   def can_cancel?
-    can?(request.current_user, :update_pipeline, pipeline) &&
+    can?(request.current_user, :cancel_pipeline, pipeline) &&
       pipeline.cancelable?
   end
 
diff --git a/app/services/ci/cancel_pipeline_service.rb b/app/services/ci/cancel_pipeline_service.rb
index 0fd63768400..52d38520fc3 100644
--- a/app/services/ci/cancel_pipeline_service.rb
+++ b/app/services/ci/cancel_pipeline_service.rb
@@ -24,7 +24,7 @@ module Ci
     end
 
     def execute
-      unless can?(current_user, :update_pipeline, pipeline)
+      unless can?(current_user, :cancel_pipeline, pipeline)
         return ServiceResponse.error(
           message: 'Insufficient permissions to cancel the pipeline',
           reason: :insufficient_permissions)
diff --git a/app/services/ci/catalog/resources/validate_service.rb b/app/services/ci/catalog/resources/validate_service.rb
index 9e8986ba6fc..186b1699d03 100644
--- a/app/services/ci/catalog/resources/validate_service.rb
+++ b/app/services/ci/catalog/resources/validate_service.rb
@@ -4,7 +4,7 @@ module Ci
   module Catalog
     module Resources
       class ValidateService
-        attr_reader :project
+        MINIMUM_AMOUNT_OF_COMPONENTS = 1
 
         def initialize(project, ref)
           @project = project
@@ -13,30 +13,38 @@ module Ci
         end
 
         def execute
-          check_project_readme
-          check_project_description
+          verify_presence_project_readme
+          verify_presence_project_description
+          scan_directory_for_components
 
           if errors.empty?
             ServiceResponse.success
           else
-            ServiceResponse.error(message: errors.join(' , '))
+            ServiceResponse.error(message: errors.join(', '))
           end
         end
 
         private
 
-        attr_reader :ref, :errors
+        attr_reader :project, :ref, :errors
 
-        def check_project_description
+        def verify_presence_project_readme
+          return if project_has_readme?
+
+          errors << 'Project must have a README'
+        end
+
+        def verify_presence_project_description
           return if project.description.present?
 
           errors << 'Project must have a description'
         end
 
-        def check_project_readme
-          return if project_has_readme?
+        def scan_directory_for_components
+          return if Ci::Catalog::ComponentsProject.new(project).fetch_component_paths(ref,
+            limit: MINIMUM_AMOUNT_OF_COMPONENTS).any?
 
-          errors << 'Project must have a README'
+          errors << 'Project must contain components'
         end
 
         def project_has_readme?
diff --git a/app/views/admin/application_settings/_usage.html.haml b/app/views/admin/application_settings/_usage.html.haml
index 7f90db73468..dd9820d064a 100644
--- a/app/views/admin/application_settings/_usage.html.haml
+++ b/app/views/admin/application_settings/_usage.html.haml
@@ -13,7 +13,7 @@
     .form-group
       - can_be_configured = @application_setting.usage_ping_can_be_configured?
       - service_ping_link_start = link_start % { url: help_page_path('development/internal_analytics/service_ping/index') }
-      - deactivating_service_ping_link_start = link_start % { url: help_page_path('administration/settings/usage_statistics', anchor: 'disable-usage-statistics-with-the-configuration-file') }
+      - deactivating_service_ping_link_start = link_start % { url: help_page_path('administration/settings/usage_statistics', anchor: 'through-the-configuration-file') }
       - usage_ping_help_text = s_('AdminSettings|To help improve GitLab and its user experience, GitLab periodically collects usage information. %{link_start}What information is shared with GitLab Inc.?%{link_end}').html_safe % { link_start: service_ping_link_start, link_end: link_end }
       - disabled_help_text = s_('AdminSettings|Service ping is disabled in your configuration file, and cannot be enabled through this form. For more information, see the documentation on %{link_start}deactivating service ping%{link_end}.').html_safe % { link_start: deactivating_service_ping_link_start, link_end: link_end }
       = f.gitlab_ui_checkbox_component :usage_ping_enabled, s_('AdminSettings|Enable Service Ping'),