#error article {
  box-sizing: border-box;
  min-height: calc(100vh - 120px);
  padding: 25vh 10px 0;
  text-align: center;

  h1 {
    font-size: 140px;
    margin: 0;
    color: var(--neutral-800);
    display: flex;
    justify-content: center;

    span {
      display: inline-block;
      padding: 0 16px;
      animation: number_movement 8s ease-in-out infinite;
    }

    div {
      overflow: hidden;
      &:nth-last-of-type(3) span { animation-delay: .2s }
      &:nth-last-of-type(2) span { animation-delay: .4s }
      &:nth-last-of-type(1) span { animation-delay: .6s }
    }
  }

  .error_description {
    font-size: 24px;
    margin: 0;
  }

  .error_sub_description {
    font-size: 14px;
    display: block;
    margin-top: 10px;
  }
}

@keyframes number_movement {
  0% { translate: 0; }
  20% { translate: 0; }
  30% { translate: 0 400px; }
  31% { translate: 400px -400px; }
  32% { translate: 0 -400px; }
  42% { translate: 0; }
  100% { translate: 0; }
}
.filters {
  display: flex;
  @media (max-width: 1110px) { display: none; }
  padding: 80px 0 0;
  margin: 0 auto;
  align-items: center;
  max-width: 1060px;
  border-bottom: 1px solid var(--neutral-30);

  [data-space="Partners"] & { display: none; }

  a {
    cursor: pointer;
    padding: 10px;
    display: block;
    margin-bottom: -1px;
    border-bottom: 1px solid var(--neutral-30);
    color: var(--blue-500);
    text-decoration: none !important;

    &:hover { color: var(--blue-300); }

    &.selected {
      border-bottom: 1px solid var(--neutral-800);
      color: var(--neutral-800);
      pointer-events: none;
    }
  }
}
#main_nav {
  height: 60px;
  box-sizing: border-box;
  position: fixed;
  width: 100%;
  background: var(--neutral-0);
  z-index: 2000;
  top: 0;
  border-bottom: 1px solid var(--neutral-30);

  .wrap { padding: 0 10px; }

  .logo {
    height: 48px;
    display: flex;
    align-items: center;

    span {
      font-size: 24px;
      margin-left: 8px;
    }

    &:hover {
      text-decoration: none;
      color: var(--blue-200);
    }

    img {
      height: 100%;
      width: auto;
    }
  }

  #ht-search {
    height: 38px;
    max-width: 730px;
    width: 100%;
  }

  .menu_icon {
    i {
      font-size: 32px;
      padding-right: 5px;
      color: var(--neutral-800);
    }

    .fa-times { display: none; }
    &.open_menu .fa-times { display: block; }
    &.open_menu .fa-bars { display: none; }
  }
}

@media screen and (max-width: 1110px) {
  #main_nav {
    height: 49px;

    .wrap {
      padding: 0;
      display: block;

      > section {
        display: flex;
        justify-content: space-between;
        padding: 0 10px;
        align-items: center;
      }

      #ht-search {
        border: 1px solid var(--neutral-60);
        border-left: none;
        border-right: none;
        max-width: none;

        .search-input {
          border: none;
          border-radius: 0;
        }
      }
    }
  }
}
.ht-search-input {
  position: relative;
  height: 100%;

  ::placeholder { color: var(--neutral-200); }
  form { height: 100%; }

  .search-input {
    height: 100%;
    width: 100%;
    box-sizing: border-box;
    padding: 0 20px 0 42px;
    font-size: 18px;
    border-radius: var(--border-radius);
    border: 1px solid var(--neutral-60);
    line-height: 1;

    &:focus { outline-color: var(--blue-300); }
  }

  i.fa-search {
    position: absolute;
    left: 15px;
    top: 0;
    bottom: 0;
    margin: auto !important;
    height: 16px;
    font-size: 16px;
    color: var(--neutral-200);
  }
}

.ht-search-dropdown {
  display: none;
  position: absolute;
  background: var(--neutral-0);
  border: 1px solid var(--neutral-30);
  width: 100%;
  padding: 8px;
  box-sizing: border-box;
  z-index: 1000;
  box-shadow: 0 5px 10px var(--neutral-40);
  max-height: 80vh;
  overflow: auto;

  &.open { display: block; }

  ul {
    list-style: none;
    padding-left: 0;
    margin: 0;

    li { margin: 0; }
  }

  a {
    text-decoration: none;
    display: flex;
    align-items: center;
    padding: 8px;
    line-height: 1.25;
    color: var(--blue-400);
    position: relative;
    border-radius: var(--border-radius);

    &.hover {
      background: var(--blue-400);
      color: var(--neutral-0);

      .search_label {
        color: var(--blue-400);
        background: var(--neutral-0)
      }
    }
  }

  .search-key {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--neutral-30);

    .search-key-button {
      color: var(--neutral-800);

      b {
        margin-left: 5px;
        color: var(--blue-500);
      }

      &.hover,
      &.hover b { color: var(--neutral-0); }
    }
  }

  .search_title { margin-right: auto; }
  .quicksearch_result a section { display: flex; }
}

@media screen and (max-width: 1110px) {
  .ht-search-input {
    .search-input { padding-left: 35px; }
    i.fa-search { left: 10px; }
  }

  .ht-search-dropdown {
    padding: 8px 0;
    max-height: calc(100vh - 88px);
    border: none;
    border-top: 1px solid var(--neutral-60);

    .quicksearch_result {
      padding: 5px 0;
      border-bottom: 1px solid var(--neutral-30);

      a {
        border-radius: 0;
        display: block;

        .search_label {
          font-size: 10px;
          margin: 6px 6px 0 0;
        }
      }
    }

    .search-key {
      margin-top: 0;
      border: none;
    }
  }
}
aside {
  position: fixed;
  top: 60px;
  bottom: 0px;
  left: calc(50% - 540px);
  width: 350px;
  z-index: 1000;
  background: var(--neutral-20);
  height: calc(100vh - 50px);

  [data-space="Partners"] &::before { height: 30px; }

  &::before,
  &::after {
    content: "";
    width: calc(100% - 20px);
    right: 20px;
    display: block;
    position: absolute;
    z-index: 10;
  }

  &::before {
    background: linear-gradient( var(--neutral-20) 10%, rgba(244, 245, 247, .15) 100%);
    top: 0;
    height: 44px;
  }

  &::after {
    background: linear-gradient(rgba(244, 245, 247, .1) 0%, var(--neutral-20) 70%);
    bottom: 0;
    height: 115px;
    pointer-events: none;
  }
}

details.filters { display: none; }

.page_list {
  font-size: 16px;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 45px 20px 108px 0;
  box-sizing: border-box;
  height: calc(100vh - 60px);

  [data-space="Partners"] & { padding-top: 20px; }

  .open > .fa-angle-right::before {
    content: "\f107";
    margin-left: -2px;
  }

  ul, li { margin: 0; }

  ul {
    list-style: none;
    padding-left: 20px;

    li {
      position: relative;
      width: 100%;
    }
  }

  a {
    display: block;
    padding: 5px 0;
    height: 28px;
    box-sizing: border-box;
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--blue-500);
    text-decoration: none;
    font-size: 15px;

    &:hover { color: var(--blue-200); }

    &.current {
      font-weight: 500;
      color: var(--neutral-800);

      &:hover { text-decoration: none; }
    }
  }

  .collapsed .page_list_sub { display: none; }

  .page_link_toggle {
    position: absolute;
    cursor: pointer;
    left: -20px;
    top: 0;
    height: 28px;
    width: 20px;
    text-decoration: none;
    color: var(--neutral-400);
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

@media screen and (max-width: 1110px) {
  aside {
    display: block !important;
    opacity: 1;
    left: -100%;
    top: 88px;
    width: 100%;
    transition: .4s;

    &::before {
      background: linear-gradient( var(--neutral-20) 50%, rgba(244, 245, 247, .15) 100%);
      height: 12px;
      top: 37px;
    }

    &::after { height: 135px; }
    &.open_menu { left: 0; }
  }

  details.filters {
    position: fixed;
    width: 100%;
    z-index: 1000;
    background: var(--neutral-0);
    display: block;
    margin: 0;
    padding: 0;
    border: none;

    summary {
      border-bottom: 1px solid var(--neutral-60);
      padding: 6px 10px;
      background: var(--neutral-30);
      color: var(--neutral-200);
      display: flex;
      align-items: center;

      &::after {
        font-family: "Font Awesome 7 Pro";
        content: "\f067";
        font-weight: 300;
        font-size: 14px;
        color: var(--neutral-400);
        background: var(--neutral-0);
        display: block;
        margin-left: auto;
        border-radius: var(--border-radius);
        padding: 6px 8px;
        border: 1px solid var(--neutral-400);
      }

      span:first-of-type { margin-right: 6px; }
      span:last-of-type { color: var(--neutral-800); }
    }
  }

  details[open].filters {
    summary::after { content: "\f068"; }

    a {
      margin: 0;
      border-bottom: 1px solid var(--neutral-30);
      padding: 10px;

      &.selected { font-weight: 500; }
      &:last-of-type { box-shadow: 0 5px 6px rgba(0, 0, 0, .15); }
    }
  }

  .page_list_top { padding: 0; }

  .page_list {
    padding: 45px 10px 145px 0;

    .page_link_toggle {
      left: auto;
      top: 4px;
      right: 0;
      display: flex;
      width: 24px;
      height: 24px;
      border-radius: var(--border-radius);
      padding: 2px;
      border: 1px solid var(--neutral-400);
      text-align: center;
    }

    .fa-angle-right::before { content: "\f067"; }

    .open > .fa-angle-right:before {
      content: "\f068";
      margin-left: 0;
    }

    ul a {
      padding: 10px 0;
      margin-right: 48px;
      height: auto;
      white-space: normal;
      text-overflow: clip;
    }
  }
}
/*
 * Confluence Cloud renders the expand macro differently from Data Center: there is no aui-button and
 * no aui-iconfont-chevron-* icon to swap, only an .expand-control-icon, an .expand-control-text and an
 * expand-hidden class on the content. The chevron therefore follows expand-hidden rather than being
 * toggled, and custom.js only has to toggle that one class.
 */

.expand-container {
  .expand-control {
    margin: 10px 0 15px;
    cursor: pointer;
    position: relative;
    padding-left: 12px;

    &:hover .expand-control-text { text-decoration: underline; }
  }

  .expand-control-icon {
    position: absolute;
    left: 0;

    &::before {
      font-family: "Font Awesome 7 Pro";
      font-weight: 300;
      content: "\f078";
      margin-left: -4px;
    }
  }

  .expand-control-text {
    color: var(--blue-400);
    font-size: 14px;
  }

  /* Collapsed is the state Confluence renders, and the state custom.js toggles back to */
  &:has(.expand-hidden) .expand-control-icon::before {
    content: "\f054";
    margin-left: 0;
  }

  .expand-content.expand-hidden { display: none; }
}
.confluence-information-macro {
  background: var(--neutral-20);
  border: 1px solid var(--neutral-50);
  border-radius: var(--border-radius);
  margin: 15px 0;
  min-height: 20px;
  padding: 10px 10px 10px 36px;
  position: relative;

  &.has-no-icon { padding-left: 15px; }

  .confluence-information-macro-icon {
    left: 10px;
    position: absolute;
    font-size: 18px;
    font-family: "Font Awesome 7 Duotone";
    font-weight: 900;

    &::before {
      opacity: 0;
      position: absolute;
    }

    &::after { font-feature-settings: "ss01"; }

    /* circle-info in blue, rather than the neutral square-info of the icon font */
    &.aui-iconfont-info {
      color: var(--blue-400);

      &::before,
      &::after { content: "\f05a"; }
    }

    &.aui-iconfont-error {
      color: var(--red-500);

      &::before,
      &::after { content: "\f06a"; }
    }

    &.aui-iconfont-warning {
      color: var(--yellow-500);

      &::before,
      &::after { content: "\f071"; }
    }

    &.aui-iconfont-approve {
      color: var(--green-500);

      &::before,
      &::after { content: "\f14a"; }
    }
  }

  .confluence-information-macro-body {
    display: flex;
    flex-direction: column;
    gap: 10px;

    > * { margin: 0; }
    > p:empty { display: none; }
  }

  > .title { font-weight: 600; }
}

.confluence-information-macro-warning {
  background: var(--red-50);
  border-color: var(--red-200);
}

.confluence-information-macro-information {
  background: var(--blue-50);
  border-color: var(--blue-200);
}

.confluence-information-macro-tip {
  background-color: var(--green-50);
  border-color: var(--green-200);
}

.confluence-information-macro-note {
  background: var(--yellow-50);
  border-color: var(--yellow-200);
}
.status-macro {
  min-width: auto;
  padding: 3px 6px;
}

.toc-macro.hidden-outline span.toc-outline { display: none; }

.aui-lozenge {
  display: inline-block;
  color: var(--neutral-0);
  background: var(--neutral-400);
  border-radius: var(--border-radius);
  font-size: 10px;
  font-weight: 700;
  padding: 2px 4px !important;
}

.aui-lozenge-success { background: var(--green-400); }
.aui-lozenge-current { background: var(--blue-400); }
/* What Confluence Cloud renders where Data Center rendered aui-lozenge-current, as on the "EAZYBI"
   tag beside every MDX function name. aui-lozenge-visual-refresh and a lone aui-lozenge-subtle carry
   no colour of their own, so they keep the grey above. */
.aui-lozenge-complete { background: var(--blue-400); }
.aui-lozenge-error { background: var(--red-400); }
.aui-lozenge-moved { background: var(--yellow-500); }
#home aside { display: none; }

.home_content {
  max-width: 1080px;
  padding: 20px 0 100px;
  margin: auto;
  position: relative;

  [data-space="Partners"] & { padding: 100px 0; }

  .eazybi_banner {
    margin: 5px 0 20px;
    padding: 0 10px;
  }

  footer { margin: 20px; }
}

.eazy_cards {
  display: none;
  flex-wrap: wrap;
  justify-content: center;

  [data-space="Partners"] & { display: flex; }

  .panel {
    width: 340px;
    margin: 0 10px 15px;
    padding: 20px 20px 35px;
    box-sizing: border-box;
    border-color: var(--neutral-30);
    border-radius: 0 var(--border-radius) var(--border-radius) 0;
    border-width: 3px 1px 1px 1px !important;
    border-style: solid;
    transition: 0.2s;

    &:hover { box-shadow: 0 9px 20px -8px rgba(0,0,0,0.15); }

    a:hover { text-decoration: underline; }

    &:nth-of-type(1) { border-top-color: var(--green-200); }
    &:nth-of-type(1) .fad { color: var(--green-200); }

    &:nth-of-type(2) { border-top-color: var(--blue-100); }
    &:nth-of-type(2) .fad { color: var(--blue-100); }

    &:nth-of-type(3) { border-top-color: var(--purple-200); }
    &:nth-of-type(3) .fad { color: var(--purple-200); }

    &:nth-of-type(4) { border-top-color: var(--red-200); }
    &:nth-of-type(4) .fad { color: var(--red-200); }

    &:nth-of-type(5) { border-top-color: var(--yellow-200); }
    &:nth-of-type(5) .fad { color: var(--yellow-200); }

    &:nth-of-type(6) { border-top-color: var(--teal-200); }
    &:nth-of-type(6) .fad { color: var(--teal-200); }

    .panelContent {
      padding: 0;
      text-align: center;

      > h2 {
        margin: 30px auto 15px;
        font-weight: 400;
      }

      /* An <i> from the Data Center html macro, a <span> from the span macro that replaces it */
      .fad {
        display: block;
        font-size: 48px;
        margin: 20px 0 25px;
      }

      > p {
        margin: 6px auto;
        font-size: 15px;
      }
    }
  }
}

@media screen and (max-width: 1110px) {
  .home_content {
    padding: 110px 0 0;
    h2 { padding: 0 20px; }
    footer { padding: 0 0 100px; }
  }
}

@media screen and (max-width: 700px) {
  .eazy_cards .panel { margin: 0 20px 20px; }

  .home_content .eazybi_banner {
    padding: 0 25px;
    margin: 0 0 10px;
  }
}
.page_content {
  margin: 105px 0 50px;
  background: var(--neutral-0);
  max-width: 730px;
  padding: 20px;
  box-sizing: border-box;
  position: absolute;
  right: calc(50% - 540px);
  width: 100%;
  border: 1px solid var(--neutral-30);

  [data-space="Partners"] & { margin-top: 80px; }

  h1.content_header {
    display: flex;
    justify-content: space-between;
    margin: 0 0 20px;
  }

  .filters {
    margin: -57px -20px 20px;
    line-height: 1;
    padding: 0;
    border: none;
  }

  footer {
    left: 0;
    bottom: -120px;
    padding: 0 20px 70px;
    position: absolute;
    width: 100%;
  }
}

.wiki-content {
  font-size: 15px;
  line-height: 1.25;
  word-wrap: break-word;

  h2, h3 { margin: 15px 0 5px; }
  p { margin: 0 0 15px; }

  blockquote {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin: 0 0 15px;
    padding: 2px 10px;
    border-left: 3px solid var(--neutral-50);

    > * { margin: 0; }
  }

  img {
    cursor: auto;
    height: auto;
  }

  hr {
    border: none;
    height: 1px;
    background: var(--neutral-60);
  }

  ul, ol { margin: 0 0 15px; }

  li > ul,
  li > ol,
  ul > ul,
  ol > ol { margin-top: 10px; }

  li:not(:last-of-type) { margin-bottom: 5px; }

  a:hover {
    text-decoration: underline;
    color: var(--blue-300);
  }

  .confluence-embedded-file-wrapper .confluence-embedded-image {
    margin: 0;
    max-width: 100%;
  }

  /* Cloud renders a standalone image in a bare inline span, where Data Center had it in a paragraph,
     so the gap before the following paragraph has to be put back — on the image, as the span is inline. */
  .confluence-embedded-file-wrapper:has(+ p) .confluence-embedded-image { margin-bottom: 15px; }

  /* The file name ContentHtml puts next to the image of an attachment card belongs under it, not beside
     it: the wrapper span is inline, so the link has to be the one to break the line. */
  .confluence-embedded-file-wrapper:has(.confluence-embedded-image) .confluence-embedded-file {
    display: block;
  }

  .wistia_responsive_padding { margin-bottom: 20px; }

  .wistia_embed {
    border: 5px solid var(--neutral-50);
    display: block !important;
    margin: 0;
  }

  pre.syntaxhighlighter-pre {
    padding: 10px;
    overflow-x: auto;
    background: var(--neutral-20);
  }

  .code.panel { margin: 0 0 15px; }
  .pdl.codeContent {  border-radius: var(--border-radius); }

  code {
    display: inline-block;
    padding: 2px 4px;
    margin: 2px 0;
    border-radius: var(--border-radius);
    background: var(--neutral-20);
    word-break: break-all;
  }

  th code { word-break: normal; }
}

.table-wrap {
  overflow-x: auto;
  & + p { margin-top: 15px; }
}

.confluenceTable {
  border-collapse: collapse;

  .confluenceTh,
  .confluenceTd {
    min-width: 8px;
    border: 1px solid var(--neutral-50);
    padding: 7px 10px;
    vertical-align: top;

    p + .content-wrapper { margin-top: 10px; }
  }

  .confluenceTh {
    text-align: left;
    background: var(--neutral-20);

    &,
    p,
    pre,
    code { font-weight: 600; }

    > * {
      margin: 0 0 10px;
      &:last-of-type { margin-bottom: 0; }
    }
  }

  .confluenceTd.highlight-red { background: var(--red-50); }
}

.content-wrapper + .content-wrapper { margin-top: 10px; }

@media screen and (max-width: 1110px) {
  .page_content {
    max-width: 100%;
    position: static;
    margin: 88px 0 0;
    min-height: calc(100vh - 88px);
    border: none;
    padding: 10px;

    footer {
      position: static;
      padding: 20px 0 100px;
    }
  }
}

@media screen and (max-width: 700px) {
  .wiki-content {
    .image-right-wrapper {
      float: none;
      margin: 0;
    }

    .wistia_embed { width: auto !important; }
  }

  h1.content_header {
    display: block;
    .page_labels span { margin: 6px 6px 0 0; }
  }
}
.wiki-content {
  .eazy_list {
    position: relative;
    padding-left: 50px;
    margin-bottom: 20px;

    h2, h3 {
      margin: 0;
      padding: 0;
    }

    &:last-of-type { margin-bottom: 0; }
  }

  .eazy_list_item {
    display: flex;
    position: absolute;
    height: calc(100% - 10px);
    width: 14px;
    left: 0;
    top: 0;
    color: var(--neutral-800);
    border-right: 2px solid var(--neutral-800);
    margin: auto;
    padding: 5px;
    justify-content: flex-start;
    align-items: center;
    font-weight: bold;
    font-size: 18px;

    + strong { color: var(--neutral-800); }

    &.getting-started { border-color: var(--green-200); }
    &.set-up-and-administer { border-color: var(--blue-100); }
    &.data-import { border-color: var(--purple-200); }
    &.analyze-and-visualize { border-color: var(--red-200); }
    &.publish-reports { border-color: var(--yellow-200); }
    &.learn-more { border-color: var(--teal-200); }
  }
}
.integration_logo_links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;

  a {
    display: block;
    line-height: 0;
    cursor: pointer;
    width: 344px;
    @media (max-width: 600px) { width: 156px; }

    img {
      cursor: pointer !important;
      max-width: 100%;
    }
  }
}
.content_search_header {
  color: var(--neutral-600);
  font-size: 20px;
  font-weight: 400;
  display: block;

  span {
    font-weight: 600;
    color: var(--neutral-800);
    font-size: 22px;
  }
}

.search_results { margin: 0 -20px 20px; }

.search-result {
  padding: 20px;
  display: block;
  text-decoration: none !important;
  border-left: 2px solid transparent;
  border-bottom: 1px solid var(--neutral-30);

  &:hover {
    border-left-color: var(--blue-400);
    background: var(--blue-50);
  }

  &:first-of-type { border-top: 1px solid var(--neutral-30); }

  header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    position: relative;
  }

  h2 {
    color: var(--blue-400);
    font-size: 16px;
    margin: 0;

    .sp-search-highlight {
      color: var(--blue-500);
      font-weight: 600;
      font-size: 18px;
    }
  }

  p {
    margin: 0;
    color: var(--neutral-600);
    line-height: 21px;
  }

  .search-result-desc .sp-search-highlight {
    color: var(--neutral-800);
    font-weight: 600;
  }
}

.search-result-content { overflow-x: hidden; }

.pager {
  text-align: center;
  a:hover { text-decoration: underline; }
}


@media screen and (max-width: 600px) {
  .content_search_header { margin: 0 0 10px; }

  .search-result header {
    display: block;
    .page_labels span { margin: 6px 6px 0 0; }
  }
}
/*
 * Product filter for the page tree.
 *
 * The server renders the whole tree, so the filter hides the pages that do not match rather than
 * leaving them out. The data-filter attribute is set on <html> by the inline script in <head>,
 * before the tree is painted, so nothing flashes.
 *
 * Pages carrying no product label of their own get data-labels="eazybi-all" and stay visible
 * under every filter.
 */


html[data-filter="eazybi-for-jira"] .page_list li[data-labels]:not([data-labels~="eazybi-for-jira"]):not([data-labels~="eazybi-all"]),
html[data-filter="eazybi-for-confluence"] .page_list li[data-labels]:not([data-labels~="eazybi-for-confluence"]):not([data-labels~="eazybi-all"]),
html[data-filter="private-eazybi"] .page_list li[data-labels]:not([data-labels~="private-eazybi"]):not([data-labels~="eazybi-all"]) {
  display: none;
}
/*
 * Markup that only Confluence Cloud emits, and that no other stylesheet has a place for. Everything
 * else about the Cloud 'view' output matches what the theme already expects, so this file stays small
 * and the rules that belong beside their neighbours live there instead - the expand macro in
 * components/macros/expand.css and the status lozenges in components/macros/misc.css.
 *
 * Migrating the space turned the inline colours of the storage format into legacy-color-text-* classes.
 * The mapping below was derived by correlating the class counts of body.view against the colour counts
 * of body.storage on the same pages, and only the classes worth a rule have one:
 *
 *   blue3 (1659) and default (724) are the body text colour, so they are deliberately left alone.
 *   Colouring them would also strip the colour from the link text many of them wrap.
 *
 *   blue1 (5), blue5 (2), orange2 (3), green2 (1) and inverse (1) are too rare to have derived a
 *   colour for, and inherited body text is closer to each of them than a guess would be.
 */

.wiki-content {
  /* Callout numbers beside a screenshot, as in "Chart type selector [1]". Storage says #c9372c. */
  .legacy-color-text-red2 { color: var(--red-500); }

  /* Storage says #ae2e24 */
  .legacy-color-text-orange1 { color: var(--red-500); }

  /* Storage says #44546f */
  .legacy-color-text-gray2 { color: var(--neutral-500); }

  /* Purple despite the name: storage says #6e5dc6 */
  .legacy-color-text-gray1 { color: var(--purple-300); }

  /*
   * Links the migration could not resolve. They point at nothing, so they must not invite a click.
   * Repointing them is content work; this only keeps them from looking like working links meanwhile.
   */
  a.unresolved {
    color: inherit;
    text-decoration: none;
    cursor: default;
    pointer-events: none;
  }
}
/*
 * Loaded after the external FontAwesome stylesheet, which is the only reason the stylesheets
 * are split into two manifests.
 *















 */