/*
  Salesforce Knowledge article body styles
  Scope: .article-column article.content
  Source: adapted from Zendesk SCSS component partials provided by user
  Notes:
  - Intentionally scoped to article body only
  - Font Awesome dependencies removed or softened
  - Zendesk-specific asset helpers removed
*/

.article-column article.content {
  --fl-white: #ffffff;
  --fl-black: #000000;
  --fl-salt-100: #ffffff;
  --fl-salt-200: #fafbfb;
  --fl-salt-300: #f1f3f5;
  --fl-salt-400: #e5e9ec;
  --fl-salt-500: #d5dbe0;
  --fl-salt-600: #c0c8cf;
  --fl-pepper-100: #a6b0b9;
  --fl-pepper-200: #87939e;
  --fl-pepper-300: #65727d;
  --fl-plum-100: #f9eafa;
  --fl-plum-200: #efc4f3;
  --fl-plum-500: #a05da6;
  --fl-plum-600: #7e4082;
  --fl-plum-700: #402b56;
  --fl-mint-400: #6bccb3;
  --fl-peach-400: #e56a54;
  --fl-berry-400: #4ec3e0;
  --fl-berry-500: #2c96b0;
  --fl-banana-300: #f6dc6b;
  --fl-red: #d52106;
  --fl-text: #555;
  --fl-link: var(--fl-berry-500);
  --fl-radius: 6px;
  --fl-shadow: 0 1px 5px rgba(0, 0, 0, 0.14);
  --fa-style-family-classic: "Font Awesome 7 Pro";
  --fa-style-family-brands: "Font Awesome 7 Brands";
  --fa-font-solid: normal 900 1em/1 var(--fa-style-family-classic);
  --fa-font-regular: normal 400 1em/1 var(--fa-style-family-classic);
  --fa-font-light: normal 300 1em/1 var(--fa-style-family-classic);
  --fa-font-brands: normal 400 1em/1 var(--fa-style-family-brands);
  color: var(--fl-text);
}

/* Base links inside article content */
.article-column article.content a {
  color: var(--fl-link);
}

.article-column article.content a:hover {
  color: var(--fl-plum-700);
}

/* Images */
.article-column article.content img {
  max-width: 100%;
  height: auto;
}

.article-column article.content figure {
  margin: 1.5rem 0;
  max-width: 100%;
}

.article-column article.content figure img {
  margin-left: auto;
  margin-right: auto;
}

.article-column article.content figcaption,
.article-column article.content .figcaption {
  margin-top: 0.5rem;
  color: var(--fl-pepper-300);
  font-size: 0.875rem;
  font-style: italic;
}

.article-column article.content p + figcaption,
.article-column article.content p + .figcaption {
  margin-top: -1rem;
}

/* Code */
.article-column article.content code,
.article-column article.content pre,
.article-column article.content samp {
  font-family: "Courier New", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", Monaco, monospace;
}

.article-column article.content code {
  background: var(--fl-salt-300);
  border: 1px solid var(--fl-salt-500);
  border-radius: 4px;
  padding: 0.1rem 0.35rem;
  font-size: 0.92em;
  word-break: break-word;
}

.article-column article.content pre {
  background: var(--fl-pepper-300);
  color: var(--fl-white);
  border-radius: var(--fl-radius);
  padding: 1rem 1.25rem;
  overflow-x: auto;
  line-height: 1.5;
  margin: 1.5rem 0;
}

.article-column article.content pre code {
  background: transparent;
  border: 0;
  color: inherit;
  padding: 0;
  font-size: inherit;
}

/* Keyboard */
.article-column article.content kbd,
.article-column article.content .key {
  display: inline-block;
  min-width: 1em;
  padding: 0.3em 0.5em;
  margin: 2px;
  font-weight: 400;
  font-size: 0.85rem;
  font-family: "Lato", "Open Sans", sans-serif;
  text-align: center;
  text-decoration: none;
  line-height: 1;
  border-radius: 0.3em;
  border: 1px solid var(--fl-salt-600);
  background: var(--fl-white);
  white-space: nowrap;
  user-select: none;
}

/* Blurb */
.article-column article.content .blurb {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 20px;
  margin: 0 0 1em;
}

.article-column article.content .blurb a:not(.fl-btn):not(.fl-button):not(.btn):not(.button):not(button) {
  color: var(--fl-text) !important;
  transition: color 0.2s ease;
}

.article-column article.content .blurb a:not(.fl-btn):not(.fl-button):not(.btn):not(.button):not(button):hover {
  text-decoration: none;
}

.article-column article.content .blurb-image,
.article-column article.content .blurb-icon {
  font-size: 3em;
  margin-right: 0;
  transition: color 0.2s ease;
}

.article-column article.content .blurb-image.-boxed > *,
.article-column article.content .blurb-icon.-boxed > * {
  background-color: var(--fl-salt-600);
  align-self: center;
  font-size: 0.7em;
  color: var(--fl-white);
  border-radius: 6px;
  min-width: 58px;
  min-height: 58px;
  padding: 0.28em;
  display: flex;
  justify-content: center;
  align-items: center;
}

.article-column article.content .blurb-icon.-boxed.-purple > *,
.article-column article.content .blurb-image.-boxed.-purple > * { background-color: var(--fl-plum-600); }
.article-column article.content .blurb-icon.-boxed.-dk-purple > *,
.article-column article.content .blurb-image.-boxed.-dk-purple > * { background-color: var(--fl-plum-700); }
.article-column article.content .blurb-icon.-boxed.-teal > *,
.article-column article.content .blurb-image.-boxed.-teal > * { background-color: var(--fl-mint-400); color: var(--fl-text); }
.article-column article.content .blurb-icon.-boxed.-orange > *,
.article-column article.content .blurb-image.-boxed.-orange > * { background-color: var(--fl-peach-400); }
.article-column article.content .blurb-icon.-boxed.-blue > *,
.article-column article.content .blurb-image.-boxed.-blue > * { background-color: var(--fl-berry-400); color: var(--fl-text); }

.article-column article.content .blurb-icon.-purple > *,
.article-column article.content .blurb-image.-purple > * { color: var(--fl-plum-600); }
.article-column article.content .blurb-icon.-dk-purple > *,
.article-column article.content .blurb-image.-dk-purple > * { color: var(--fl-plum-700); }
.article-column article.content .blurb-icon.-teal > *,
.article-column article.content .blurb-image.-teal > * { color: var(--fl-mint-400); }
.article-column article.content .blurb-icon.-orange > *,
.article-column article.content .blurb-image.-orange > * { color: var(--fl-peach-400); }
.article-column article.content .blurb-icon.-blue > *,
.article-column article.content .blurb-image.-blue > * { color: var(--fl-berry-400); }

.article-column article.content .blurb-content {
  flex: 1 1 auto;
}

.article-column article.content .blurb-content h1,
.article-column article.content .blurb-content h2,
.article-column article.content .blurb-content h3,
.article-column article.content .blurb-content h4 {
  margin-top: 0;
  margin-bottom: 0.4em;
  transition: color 0.2s ease;
}

.article-column article.content .blurb-description p:first-child {
  margin-top: 0;
}

.article-column article.content .blurb-description.-text-small {
  font-size: 85%;
  line-height: 1.5em;
}

.article-column article.content .blurb.-center {
  flex-direction: column;
  align-self: center;
  margin: 0;
}

.article-column article.content .blurb.-center .blurb-image,
.article-column article.content .blurb.-center .blurb-icon {
  align-self: center;
  margin-bottom: 20px;
}

.article-column article.content .blurb.-center .blurb-content {
  align-self: center;
  text-align: center;
}

.article-column article.content .blurb.hover {
  color: var(--fl-berry-400);
  cursor: pointer;
}

.article-column article.content .blurb.hover a {
  color: var(--fl-berry-400) !important;
}

/* Dividers */
.article-column article.content hr {
  border: 0;
  height: 1px;
  background: var(--fl-salt-600);
  margin: 2em 0;
  overflow: visible;
}

.article-column article.content hr.blank {
  background: transparent;
}

.article-column article.content hr.-dk-gray { background: var(--fl-pepper-300); }
.article-column article.content hr.-teal { background: var(--fl-mint-400); }
.article-column article.content hr.-blue { background: var(--fl-berry-400); }
.article-column article.content hr.-purple { background: var(--fl-plum-600); }
.article-column article.content hr.-dk-purple { background: var(--fl-plum-700); }

.article-column article.content hr.-dk-gray::before { color: var(--fl-pepper-300); }
.article-column article.content hr.-teal::before { color: var(--fl-mint-400); }
.article-column article.content hr.-blue::before { color: var(--fl-berry-400); }
.article-column article.content hr.-purple::before { color: var(--fl-plum-600); }
.article-column article.content hr.-dk-purple::before { color: var(--fl-plum-700); }

.article-column article.content hr[class*="-icon-"] {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 1.5em;
  margin: 2em 0;
  height: 2px;
}

.article-column article.content hr[class*="-icon-"]::before {
  width: 1.5em;
  height: 1.5em;
  background-color: var(--fl-white);
  border-radius: 3em;
  display: flex;
  align-items: center;
  justify-content: center;
  font: var(--fa-font-solid);
  font-style: normal;
  font-variant: normal;
  font-weight: 900;
  speak: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: auto;
}

.article-column article.content hr.-icon-angle-down::before { content: "\f107"; }
.article-column article.content hr.-icon-circle-info::before { content: "\f05a"; }
.article-column article.content hr.-icon-gear::before { content: "\f013"; }

.article-column article.content hr.morse {
  background: repeating-linear-gradient(
    to right,
    var(--fl-salt-600) 0 8px,
    transparent 8px 12px,
    var(--fl-salt-600) 12px 16px,
    transparent 16px 24px
  );
  height: 12px;
  width: 100%;
}

.article-column article.content hr.morse.-dk-gray {
  background-image: repeating-linear-gradient(to right, var(--fl-pepper-300) 0 8px, transparent 8px 12px, var(--fl-pepper-300) 12px 16px, transparent 16px 24px);
}

.article-column article.content hr.morse.-teal {
  background-image: repeating-linear-gradient(to right, var(--fl-mint-400) 0 8px, transparent 8px 12px, var(--fl-mint-400) 12px 16px, transparent 16px 24px);
}

.article-column article.content hr.morse.-blue {
  background-image: repeating-linear-gradient(to right, var(--fl-berry-400) 0 8px, transparent 8px 12px, var(--fl-berry-400) 12px 16px, transparent 16px 24px);
}

.article-column article.content hr.morse.-purple {
  background-image: repeating-linear-gradient(to right, var(--fl-plum-600) 0 8px, transparent 8px 12px, var(--fl-plum-600) 12px 16px, transparent 16px 24px);
}

.article-column article.content hr.morse.-dk-purple {
  background-image: repeating-linear-gradient(to right, var(--fl-plum-700) 0 8px, transparent 8px 12px, var(--fl-plum-700) 12px 16px, transparent 16px 24px);
}

/* Lists */
.article-column article.content ul,
.article-column article.content ol {
  margin: 0 0 0.8em;
}

.article-column article.content ul {
  list-style: disc;
  padding-left: 20px;
}

.article-column article.content ul ul {
  margin: 0.8em 0 0;
  list-style: disc;
}

.article-column article.content ol {
  padding-left: 2em;
}

.article-column article.content li {
  margin-bottom: 0.8em;
}

.article-column article.content li > table {
  margin-top: 1em;
}

.article-column article.content li p + table {
  margin-top: 0;
}

.article-column article.content ul.-plain {
  list-style: none;
  padding-left: 0;
}

.article-column article.content ul.takeaway {
  list-style: none;
  padding-left: 0;
  margin: 0 0 0.8em;
}

.article-column article.content ul.takeaway ul {
  padding-left: 0;
  list-style: disc inside;
}

.article-column article.content ul.takeaway > li {
  position: relative;
  padding-left: 40px;
}

.article-column article.content ul.takeaway > li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0.1em;
  font-size: 25px;
  color: var(--fl-mint-400);
  line-height: 1;
}

.article-column article.content ul.takeaway > li.negative::before {
  content: "✕";
  color: var(--fl-peach-400);
}

/* Paths */
.article-column article.content ol.path,
.article-column article.content ul.path {
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 1em;
  margin-left: 0;
  padding-left: 0;
  text-indent: 0;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  list-style: none;
}

.article-column article.content ol.path li,
.article-column article.content ul.path li {
  background: #eeeeee;
  position: relative;
  height: 40px;
  line-height: 40px;
  padding: 0 8px 0 0;
  text-align: center;
  margin-right: 24px;
  margin-bottom: 0;
  color: var(--fl-text);
  flex: 1;
  white-space: nowrap;
  list-style: none;
}

.article-column article.content ol.path li::before,
.article-column article.content ol.path li::after,
.article-column article.content ul.path li::before,
.article-column article.content ul.path li::after {
  content: "";
  position: absolute;
  top: 0;
  border: 0 solid #eeeeee;
  border-width: 20px 10px;
  width: 0;
  height: 0;
  border-radius: 0 !important;
  background-clip: padding-box;
}

.article-column article.content ol.path li::before,
.article-column article.content ul.path li::before {
  left: -20px;
  border-left-color: transparent;
}

.article-column article.content ol.path li::after,
.article-column article.content ul.path li::after {
  left: 100%;
  border-color: transparent;
  border-left-color: #eeeeee;
}

.article-column article.content ol.path li:first-child,
.article-column article.content ul.path li:first-child {
  border-radius: 4px 0 0 4px;
  padding-left: 20px;
}

.article-column article.content ol.path li:first-child::before,
.article-column article.content ul.path li:first-child::before {
  border: none;
}

.article-column article.content ol.path li:last-child,
.article-column article.content ul.path li:last-child {
  padding-right: 20px;
  border-radius: 0 4px 4px 0;
  margin-right: 0;
}

.article-column article.content ol.path li:last-child::after,
.article-column article.content ul.path li:last-child::after {
  border: none;
}

.article-column article.content .path li.-purple { background-color: var(--fl-plum-600); color: var(--fl-white); }
.article-column article.content .path li.-purple::before { border-color: var(--fl-plum-600); border-left-color: transparent; }
.article-column article.content .path li.-purple::after { border-left-color: var(--fl-plum-600); }
.article-column article.content .path li.-teal { background-color: var(--fl-mint-400); color: var(--fl-text); }
.article-column article.content .path li.-teal::before { border-color: var(--fl-mint-400); border-left-color: transparent; }
.article-column article.content .path li.-teal::after { border-left-color: var(--fl-mint-400); }
.article-column article.content .path li.-blue { background-color: var(--fl-berry-400); color: var(--fl-text); }
.article-column article.content .path li.-blue::before { border-color: var(--fl-berry-400); border-left-color: transparent; }
.article-column article.content .path li.-blue::after { border-left-color: var(--fl-berry-400); }
.article-column article.content .path li.-orange { background-color: var(--fl-peach-400); color: var(--fl-white); }
.article-column article.content .path li.-orange::before { border-color: var(--fl-peach-400); border-left-color: transparent; }
.article-column article.content .path li.-orange::after { border-left-color: var(--fl-peach-400); }

/* Pills */
.article-column article.content .pill {
  color: var(--fl-text);
  background-color: var(--fl-salt-600);
  font-size: 80%;
  font-weight: 700;
  padding: 3px 5px;
  border-radius: 3px;
  margin: 0 0.2rem;
  display: inline-block;
  line-height: 1;
  text-align: center;
}

.article-column article.content .pill.-purple { background-color: var(--fl-plum-600); color: var(--fl-white); }
.article-column article.content .pill.-teal { background-color: var(--fl-mint-400); color: var(--fl-text); }
.article-column article.content .pill.-orange { background-color: var(--fl-peach-400); color: var(--fl-white); }
.article-column article.content .pill.-blue { background-color: var(--fl-berry-400); color: var(--fl-text); }

.article-column article.content li[class*="pill"]::after {
  color: var(--fl-text);
  background-color: var(--fl-salt-600);
  font-size: 80%;
  font-weight: 700;
  padding: 3px 5px;
  border-radius: 3px;
  margin: 0 0.5rem;
  display: inline-block;
  line-height: 1;
  text-align: center;
}

.article-column article.content li.pill-plm::after { content: "PLM"; text-transform: uppercase; }
.article-column article.content li.pill-eem::after { content: "EEM"; text-transform: uppercase; }
.article-column article.content li.pill-new::after { content: "New"; text-transform: uppercase; }
.article-column article.content li.pill-updated::after { content: "Updated"; text-transform: uppercase; }
.article-column article.content li.pill-plan::after { content: "Plan"; text-transform: uppercase; }
.article-column article.content li.pill-service::after { content: "Service"; text-transform: uppercase; }

/* Boxed content */
.article-column article.content .boxed {
  border: 1px solid var(--fl-salt-500);
  border-radius: 6px;
  box-shadow: var(--fl-shadow);
  background-clip: padding-box;
  max-width: 100%;
  padding: 22px 25px 25px;
  margin-top: 1.5em;
  margin-bottom: 1.5em;
}

.article-column article.content .boxed h1 {
  font-size: 24px;
  font-weight: 700;
}

.article-column article.content .boxed > *:first-child {
  margin-top: 0 !important;
}

.article-column article.content .boxed > *:last-child {
  margin-bottom: 0 !important;
}

.article-column article.content .boxed.-plain {
  box-shadow: none;
}

/* Callouts */
.article-column article.content .callout {
  position: relative;
  width: auto;
  padding: 25px 35px;
  margin: 28px 0;
  background-color: var(--fl-salt-300);
  border: 1px solid var(--fl-salt-500);
  border-radius: var(--fl-radius);
}

.article-column article.content .callout > h2:first-child,
.article-column article.content .callout > h3:first-child,
.article-column article.content .callout > h4:first-child {
  margin-bottom: 0.5em;
  color: inherit;
}

.article-column article.content .callout a {
  font-weight: 700;
}

.article-column article.content .callout p {
  margin: 0 0 1em;
}

.article-column article.content .callout p:only-child,
.article-column article.content .callout p:last-child,
.article-column article.content .callout *:last-child {
  margin-bottom: 0;
}

.article-column article.content .callout *:first-child {
  margin-top: 0;
}

.article-column article.content .callout.-square { border-radius: 0; }
.article-column article.content .callout.-shadow { box-shadow: var(--fl-shadow); }
.article-column article.content .callout.-slim { padding: 15px 25px; }

.article-column article.content .callout[class*="-icon"] {
  padding-left: 75px;
}

.article-column article.content .callout[class*="-icon"]::before {
  position: absolute;
  left: 25px;
  top: 24px;
  font-size: 28px;
  line-height: 1;
  color: var(--fl-pepper-200);
  content: var(--fa);
  font: var(--fa-font-solid);
  font-style: normal;
  font-variant: normal;
  font-weight: 900;
  speak: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: auto;
  display: inline-block;
}

.article-column article.content table .callout[class*="-icon"] {
  padding-left: 50px;
}

.article-column article.content table .callout[class*="-icon"]::before {
  font-size: 1.3em;
  line-height: 1.25em;
  left: 15px;
}

.article-column article.content .callout.-icon-bell::before { --fa: "\f0f3"; }
.article-column article.content .callout.-icon-browser::before { --fa: "\f37e"; }
.article-column article.content .callout.-icon-external::before { --fa: "\f08e"; }
.article-column article.content .callout.-icon-download::before { --fa: "\f019"; }
.article-column article.content .callout.-icon-file::before { --fa: "\f15b"; }
.article-column article.content .callout.-icon-graduate::before { --fa: "\f19d"; }
.article-column article.content .callout.-icon-info::before { --fa: "\f05a"; }
.article-column article.content .callout.-icon-internal::before { --fa: "\f070"; }
.article-column article.content .callout.-icon-lightbulb::before { --fa: "\f672"; }
.article-column article.content .callout.-icon-link::before { --fa: "\f0c1"; }
.article-column article.content .callout.-icon-lock::before { --fa: "\f023"; }
.article-column article.content .callout.-icon-note::before { --fa: "\f31c"; }
.article-column article.content .callout.-icon-pdf::before { --fa: "\f1c1"; }
.article-column article.content .callout.-icon-pointer::before { --fa: "\f245"; }
.article-column article.content .callout.-icon-rabbit::before { --fa: "\f709"; }
.article-column article.content .callout.-icon-school::before { --fa: "\f549"; }
.article-column article.content .callout.-icon-shield::before { --fa: "\f2f7"; }
.article-column article.content .callout.-icon-stats::before { --fa: "\f080"; }
.article-column article.content .callout.-icon-stopwatch::before { --fa: "\f2f2"; }
.article-column article.content .callout.-icon-teacher::before { --fa: "\f5d1"; }
.article-column article.content .callout.-icon-tip::before { --fa: "\e2ca"; }
.article-column article.content .callout.-icon-video::before { --fa: "\f03d"; }
.article-column article.content .callout.-icon-warning::before { --fa: "\f071"; }

.article-column article.content .callout.-purple {
  background-color: #efc4f3;
  border-color: var(--fl-plum-600);
  color: var(--fl-text);
}
.article-column article.content .callout.-purple a:not(.btn):not(.fl-btn):not(.fl-button):not(.button):not(button) { color: var(--fl-plum-600); }
.article-column article.content .callout.-teal {
  background-color: #d8f5ed;
  border-color: var(--fl-mint-400);
}
.article-column article.content .callout.-teal a:not(.btn):not(.fl-btn):not(.fl-button):not(.button):not(button) { color: #2e7362; }
.article-column article.content .callout.-blue {
  background-color: #d4f2fa;
  border-color: var(--fl-berry-400);
}
.article-column article.content .callout.-blue a:not(.btn):not(.fl-btn):not(.fl-button):not(.button):not(button) { color: var(--fl-link); }
.article-column article.content .callout.-yellow {
  background-color: #fcf6d7;
  border-color: var(--fl-banana-300);
}
.article-column article.content .callout.-yellow a:not(.btn):not(.fl-btn):not(.fl-button):not(.button):not(button) { color: #946a07; }
.article-column article.content .callout.-orange {
  background-color: #fbe3dc;
  border-color: var(--fl-peach-400);
}
.article-column article.content .callout.-orange a:not(.btn):not(.fl-btn):not(.fl-button):not(.button):not(button) { color: var(--fl-peach-400); }
.article-column article.content .callout.-white {
  background-color: var(--fl-white);
  border-color: var(--fl-salt-600);
}
.article-column article.content .callout.-red {
  background-color: #f7c2bb;
  border-color: var(--fl-red);
}
.article-column article.content .callout.-red a:not(.btn):not(.fl-btn):not(.fl-button):not(.button):not(button) { color: var(--fl-red); }

/* Learning paths */
.article-column article.content div[class^="learning-path"] > :first-child {
  margin-top: 0;
}

.article-column article.content div[class^="learning-path"] > :last-child {
  margin-bottom: 0;
}

.article-column article.content .learning-path {
  border-left: 2px dashed var(--fl-salt-500);
  padding-left: 0 !important;
  list-style: none;
  margin-left: 0.85em;
}

.article-column article.content .learning-path li {
  display: grid;
  grid-template-columns: min-content 1fr;
  grid-template-rows: auto auto;
  gap: 10px 12px;
  justify-items: stretch;
  align-items: stretch;
  margin-left: -0.85em;
}

.article-column article.content .learning-path li:not(:last-of-type) {
  margin-bottom: 30px;
}

.article-column article.content .learning-path li > p:has(> span[class*="fa-"]) {
  margin: 0;
  padding: 0;
  display: contents !important;
}

.article-column article.content .learning-path li span[class*="fa-"] {
  background-color: var(--fl-plum-600);
  color: var(--fl-white);
  border-radius: var(--fl-radius);
  width: calc(1em + 0.6em);
  height: calc(1em + 0.6em);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1em;
  grid-row: span 2;
  margin: 0;
}

.article-column article.content .learning-path li h3 {
  margin: 0;
  font-size: 19px;
  line-height: 23px;
}

.article-column article.content .learning-path.-dk-gray li span[class*="fa-"] { background-color: var(--fl-pepper-300); }
.article-column article.content .learning-path.-dk-purple li span[class*="fa-"] { background-color: var(--fl-plum-700); }
.article-column article.content .learning-path.-teal li span[class*="fa-"] { background-color: var(--fl-mint-400); color: var(--fl-text); }
.article-column article.content .learning-path.-blue li span[class*="fa-"] { background-color: var(--fl-berry-400); color: var(--fl-text); }

/* Section list */
.article-column article.content .section-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-left: 0;
  list-style: none;
}

.article-column article.content .section-list-item a {
  border: 1px solid var(--fl-salt-500);
  padding: 4px 10px;
  border-radius: var(--fl-radius);
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 8px;
  color: var(--fl-plum-600);
  text-decoration: none;
}

.article-column article.content .section-list-item a span {
  flex: 1;
}

.article-column article.content .section-list-item a::before {
  content: "📁";
  color: var(--fl-pepper-200);
}

.article-column article.content .section-list-item a:hover {
  border-color: var(--fl-plum-500);
  background-color: var(--fl-plum-100);
  color: var(--fl-text);
}

.article-column article.content .section-list-item a:hover::after {
  content: "›";
  display: block;
}

/* Tables */
.article-column article.content table {
  border: 0;
  border-collapse: separate;
  border-spacing: 0;
  text-align: left;
  width: 100%;
  margin-bottom: 1.5em;
  background: var(--fl-white);
  border-radius: var(--fl-radius);
}

.article-column article.content table *.center {
  text-align: center;
}

.article-column article.content table *.align-vertical {
  vertical-align: middle;
}

.article-column article.content table thead > tr > * {
  background: var(--fl-plum-700);
  color: var(--fl-white);
  font-weight: 700;
  border: 1px solid var(--fl-plum-700);
}

.article-column article.content table thead > tr > *:first-child {
  border-top-left-radius: var(--fl-radius);
}

.article-column article.content table thead > tr > *:last-child {
  border-top-right-radius: var(--fl-radius);
}

.article-column article.content table thead tr a {
  color: var(--fl-berry-400);
}

.article-column article.content table thead tr a:hover {
  color: var(--fl-plum-200);
  text-decoration: none;
}

.article-column article.content table tbody a {
  color: var(--fl-berry-400);
}

.article-column article.content table tbody tr > *:first-child {
  border-left: 1px solid var(--fl-salt-400);
}

.article-column article.content table tbody tr > *:last-child {
  border-right: 1px solid var(--fl-salt-400);
}

.article-column article.content table tbody tr:nth-child(odd) th {
  background-color: #e8ebed;
}

.article-column article.content table tbody tr:nth-child(odd) td {
  background-color: var(--fl-salt-300);
}

.article-column article.content table tbody tr:first-child > * {
  border-top: 1px solid var(--fl-salt-400);
}

.article-column article.content table tbody tr:first-child > *:first-child {
  border-top-left-radius: var(--fl-radius);
}

.article-column article.content table tbody tr:first-child > *:last-child {
  border-top-right-radius: var(--fl-radius);
}

.article-column article.content table tbody tr:last-child > * {
  border-bottom: 1px solid var(--fl-salt-400);
}

.article-column article.content table tbody tr:last-child > *:first-child {
  border-bottom-left-radius: var(--fl-radius);
}

.article-column article.content table tbody tr:last-child > *:last-child {
  border-bottom-right-radius: var(--fl-radius);
}

.article-column article.content table tbody tr.only-child > *,
.article-column article.content table tbody tr:only-child > * {
  border-bottom: 1px solid var(--fl-salt-400) !important;
}

.article-column article.content table tbody tr.head td {
  background: var(--fl-plum-700) !important;
  color: var(--fl-white);
  font-weight: 700;
  border: 1px solid var(--fl-plum-700);
}

.article-column article.content table td,
.article-column article.content table th {
  padding: 12px;
  border: 0;
}

.article-column article.content table td p:first-child,
.article-column article.content table th p:first-child {
  margin-top: 0;
}

.article-column article.content table td p:last-child,
.article-column article.content table th p:last-child {
  margin-bottom: 0;
}

.article-column article.content table td.breakword,
.article-column article.content table th.breakword {
  word-wrap: break-word;
  word-break: break-word;
  overflow-wrap: break-word;
  max-width: 1px;
  hyphens: auto;
}

.article-column article.content table h1,
.article-column article.content table h2,
.article-column article.content table h3,
.article-column article.content table h4 {
  margin-top: 0 !important;
}

.article-column article.content figure.wysiwyg-table {
  overflow-x: auto;
  margin: 1.5rem 0;
}

.article-column article.content figure.wysiwyg-table table {
  min-width: 640px;
}

/* Tabs */
.article-column article.content .ui-tabs {
  margin-top: 2em;
  margin-bottom: 2em;
}

.article-column article.content .ui-tabs-nav {
  margin: 0 !important;
  padding: 0 !important;
  display: flex;
  align-items: stretch;
}

.article-column article.content .ui-tabs-tab {
  margin: 0 !important;
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: stretch;
}

.article-column article.content .ui-tabs-tab a {
  color: var(--fl-pepper-300) !important;
  text-decoration: none;
  text-align: center;
  width: 100%;
  outline: none;
  display: block;
  padding: 5px 30px 4px;
  border: 1px solid transparent;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
}

.article-column article.content .ui-tabs-tab a:hover,
.article-column article.content .ui-tabs-tab a:focus,
.article-column article.content .ui-tabs-tab:hover,
.article-column article.content .ui-tabs-tab:focus {
  outline: none;
}

.article-column article.content .ui-tabs-tab [class^='far'],
.article-column article.content .ui-tabs-tab [class^='fas'],
.article-column article.content .ui-tabs-tab [class^='fal'],
.article-column article.content .ui-tabs-tab [class^='fab'] {
  margin-right: 5px;
}

.article-column article.content .ui-tabs-active a {
  color: var(--fl-berry-400) !important;
  border-color: var(--fl-salt-500);
  border-bottom: 1px solid var(--fl-white);
}

.article-column article.content .ui-tabs-panel {
  border: 1px solid var(--fl-salt-500);
  border-radius: 6px;
  padding: 30px;
  margin-top: -1px;
}

.article-column article.content .ui-tabs-panel > *:first-child,
.article-column article.content .ui-tabs-panel > *:only-child {
  margin-top: 0 !important;
}

.article-column article.content .ui-tabs-panel > *:only-child,
.article-column article.content .ui-tabs-panel > *:last-child {
  margin-bottom: 0 !important;
}

.article-column article.content .ui-tabs.-plain .ui-tabs-panel {
  border-color: transparent;
  border-top: 1px solid var(--fl-salt-500);
  padding: 30px 5px;
  border-radius: 0;
}

.article-column article.content .ui-tabs-panel[aria-hidden="false"]:first-of-type {
  border-top-left-radius: 0;
}

/* Toggles */
.article-column article.content .toggle,
.article-column article.content .accordion {
  margin-bottom: 2em;
}

.article-column article.content .toggle > h3,
.article-column article.content .accordion > h3 {
  cursor: pointer;
  font-weight: 700;
  margin: 20px 15px 0 20px;
  padding: 0 0 0 15px;
  text-indent: -0.8em;
  line-height: 1.5em;
}

.article-column article.content .toggle > h3:first-of-type,
.article-column article.content .accordion > h3:first-of-type {
  margin-top: 0;
}

.article-column article.content .toggle i,
.article-column article.content .toggle span.ui-accordion-header-icon,
.article-column article.content .accordion i,
.article-column article.content .accordion span.ui-accordion-header-icon {
  margin-right: 0.5em;
  color: var(--fl-pepper-100);
}

.article-column article.content .toggle.-purple i,
.article-column article.content .toggle.-purple span.ui-accordion-header-icon,
.article-column article.content .accordion.-purple i,
.article-column article.content .accordion.-purple span.ui-accordion-header-icon { color: var(--fl-plum-600); }
.article-column article.content .toggle.-teal i,
.article-column article.content .toggle.-teal span.ui-accordion-header-icon,
.article-column article.content .accordion.-teal i,
.article-column article.content .accordion.-teal span.ui-accordion-header-icon { color: var(--fl-mint-400); }
.article-column article.content .toggle.-blue i,
.article-column article.content .toggle.-blue span.ui-accordion-header-icon,
.article-column article.content .accordion.-blue i,
.article-column article.content .accordion.-blue span.ui-accordion-header-icon { color: var(--fl-berry-400); }

.article-column article.content .toggle > div,
.article-column article.content .accordion > div {
  margin-top: 15px;
  padding-left: 30px;
}

.article-column article.content .toggle > div > *,
.article-column article.content .accordion > div > * {
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 1em;
}

.article-column article.content .toggle > div > *:only-child,
.article-column article.content .toggle > div > *:last-child,
.article-column article.content .accordion > div > *:only-child,
.article-column article.content .accordion > div > *:last-child {
  margin-bottom: 0;
}

.article-column article.content .accordion.-sections h3 {
  margin-left: 0;
  padding-left: 0;
  text-indent: 0;
}

.article-column article.content .accordion.-sections h3 span.ui-accordion-header-icon {
  padding-left: 15px;
}

.article-column article.content .accordion.-sections h3:not(:first-child)::before {
  border-top: 1px solid var(--fl-salt-600);
  content: "";
  display: block;
  margin-bottom: 1em;
}

.article-column article.content .accordion.-sections > div {
  padding-left: 3em;
}

/* Responsive adjustments */
@media (max-width: 767px) {
  .article-column article.content .ui-tabs-nav {
    flex-direction: column;
  }

  .article-column article.content .ui-tabs-tab {
    width: 100%;
  }

  .article-column article.content .ui-tabs-tab a {
    border-color: var(--fl-salt-500);
    border-top: none;
    border-radius: 0;
  }

  .article-column article.content .ui-tabs-tab:first-child a {
    border-top: 1px solid var(--fl-salt-500);
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
  }

  .article-column article.content .ui-tabs-active a {
    border-bottom: 2px solid var(--fl-berry-400);
  }

  .article-column article.content .ui-tabs-panel {
    padding: 20px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }

  .article-column article.content .path,
  .article-column article.content ol.path,
  .article-column article.content ul.path {
    flex-direction: column;
  }

  .article-column article.content .path li,
  .article-column article.content ol.path li,
  .article-column article.content ul.path li {
    width: calc(100% - 30px);
    left: 20px;
    margin-bottom: 6px;
  }

  .article-column article.content .path li:first-child,
  .article-column article.content ol.path li:first-child,
  .article-column article.content ul.path li:first-child {
    left: 0;
    width: calc(100% - 10px);
  }

  .article-column article.content .path li:last-child,
  .article-column article.content ol.path li:last-child,
  .article-column article.content ul.path li:last-child {
    width: calc(100% - 30px);
  }

  .article-column article.content table {
    table-layout: fixed;
  }
}

/* Salesforce article component JS compatibility
   Supports vanilla JS classes added by frontlineArticleComponents.
   Broadened scope handles partner themes where article.content is not wrapped by .article-column.
*/
:where(.article-column article.content, article.content) .tabs {
  margin-top: 2em;
  margin-bottom: 2em;
}

:where(.article-column article.content, article.content) .tabs > ul {
  margin: 0 !important;
  padding: 0 !important;
  display: flex;
  align-items: stretch;
  list-style: none;
}

:where(.article-column article.content, article.content) .tabs > ul > li {
  margin: 0 !important;
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: stretch;
}

:where(.article-column article.content, article.content) .tabs > ul > li > a,
:where(.article-column article.content, article.content) .tabs-link {
  color: var(--fl-pepper-300) !important;
  text-decoration: none;
  text-align: center;
  width: 100%;
  outline: none;
  display: block;
  padding: 5px 30px 4px;
  border: 1px solid transparent;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
}

:where(.article-column article.content, article.content) .tabs > ul > li > a:hover,
:where(.article-column article.content, article.content) .tabs > ul > li > a:focus,
:where(.article-column article.content, article.content) .tabs-link:hover,
:where(.article-column article.content, article.content) .tabs-link:focus {
  outline: none;
}

:where(.article-column article.content, article.content) .tabs-link.active {
  color: var(--fl-berry-400) !important;
  border-color: var(--fl-salt-500);
  border-bottom: 1px solid var(--fl-white);
}

:where(.article-column article.content, article.content) .tabs-panel {
  border: 1px solid var(--fl-salt-500);
  border-radius: 6px;
  padding: 30px;
  margin-top: -1px;
}

:where(.article-column article.content, article.content) .tabs-panel[hidden] {
  display: none !important;
}

:where(.article-column article.content, article.content) .tabs-panel > *:first-child,
:where(.article-column article.content, article.content) .tabs-panel > *:only-child {
  margin-top: 0 !important;
}

:where(.article-column article.content, article.content) .tabs-panel > *:only-child,
:where(.article-column article.content, article.content) .tabs-panel > *:last-child {
  margin-bottom: 0 !important;
}

:where(.article-column article.content, article.content) .tabs.-plain .tabs-panel {
  border-color: transparent;
  border-top: 1px solid var(--fl-salt-500);
  padding: 30px 5px;
  border-radius: 0;
}

:where(.article-column article.content, article.content) .print-tab-hdr {
  display: none;
}

:where(.article-column article.content, article.content) .fl-faq,
:where(.article-column article.content, article.content) .fl-toggle,
:where(.article-column article.content, article.content) .toggle,
:where(.article-column article.content, article.content) .accordion {
  margin-bottom: 2em;
}

:where(.article-column article.content, article.content) .fl-faq > h3,
:where(.article-column article.content, article.content) .fl-toggle > h3,
:where(.article-column article.content, article.content) .toggle > h3,
:where(.article-column article.content, article.content) .accordion > h3,
:where(.article-column article.content, article.content) .toggle-question,
:where(.article-column article.content, article.content) .accordion-question {
  cursor: pointer;
  font-weight: 700;
  margin: 20px 15px 0 20px;
  padding: 0 0 0 15px;
  text-indent: -0.8em;
  line-height: 1.5em;
}

:where(.article-column article.content, article.content) .fl-faq > h3:first-of-type,
:where(.article-column article.content, article.content) .fl-toggle > h3:first-of-type,
:where(.article-column article.content, article.content) .toggle > h3:first-of-type,
:where(.article-column article.content, article.content) .accordion > h3:first-of-type {
  margin-top: 0;
}

:where(.article-column article.content, article.content) .toggle-icon,
:where(.article-column article.content, article.content) .accordion-icon,
:where(.article-column article.content, article.content) .toggle i,
:where(.article-column article.content, article.content) .accordion i {
  margin-right: 0.5em;
  color: var(--fl-pepper-100);
}

:where(.article-column article.content, article.content) .fl-faq.-purple .toggle-icon,
:where(.article-column article.content, article.content) .fl-toggle.-purple .toggle-icon,
:where(.article-column article.content, article.content) .toggle.-purple .toggle-icon,
:where(.article-column article.content, article.content) .accordion.-purple .accordion-icon { color: var(--fl-plum-600); }

:where(.article-column article.content, article.content) .fl-faq.-teal .toggle-icon,
:where(.article-column article.content, article.content) .fl-toggle.-teal .toggle-icon,
:where(.article-column article.content, article.content) .toggle.-teal .toggle-icon,
:where(.article-column article.content, article.content) .accordion.-teal .accordion-icon { color: var(--fl-mint-400); }

:where(.article-column article.content, article.content) .fl-faq.-blue .toggle-icon,
:where(.article-column article.content, article.content) .fl-toggle.-blue .toggle-icon,
:where(.article-column article.content, article.content) .toggle.-blue .toggle-icon,
:where(.article-column article.content, article.content) .accordion.-blue .accordion-icon { color: var(--fl-berry-400); }

:where(.article-column article.content, article.content) .fl-faq > div,
:where(.article-column article.content, article.content) .fl-toggle > div,
:where(.article-column article.content, article.content) .toggle > div,
:where(.article-column article.content, article.content) .accordion > div,
:where(.article-column article.content, article.content) .toggle-content,
:where(.article-column article.content, article.content) .accordion-content {
  margin-top: 15px;
  padding-left: 30px;
}

:where(.article-column article.content, article.content) .toggle-content[hidden],
:where(.article-column article.content, article.content) .accordion-content[hidden] {
  display: none !important;
}

:where(.article-column article.content, article.content) .fl-faq > div > *,
:where(.article-column article.content, article.content) .fl-toggle > div > *,
:where(.article-column article.content, article.content) .toggle > div > *,
:where(.article-column article.content, article.content) .accordion > div > * {
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 1em;
}

:where(.article-column article.content, article.content) .fl-faq > div > *:only-child,
:where(.article-column article.content, article.content) .fl-faq > div > *:last-child,
:where(.article-column article.content, article.content) .fl-toggle > div > *:only-child,
:where(.article-column article.content, article.content) .fl-toggle > div > *:last-child,
:where(.article-column article.content, article.content) .toggle > div > *:only-child,
:where(.article-column article.content, article.content) .toggle > div > *:last-child,
:where(.article-column article.content, article.content) .accordion > div > *:only-child,
:where(.article-column article.content, article.content) .accordion > div > *:last-child {
  margin-bottom: 0;
}

@media (max-width: 767px) {
  :where(.article-column article.content, article.content) .tabs > ul {
    flex-direction: column;
  }

  :where(.article-column article.content, article.content) .tabs > ul > li {
    width: 100%;
  }

  :where(.article-column article.content, article.content) .tabs > ul > li > a,
  :where(.article-column article.content, article.content) .tabs-link {
    border-color: var(--fl-salt-500);
    border-top: none;
    border-radius: 0;
  }

  :where(.article-column article.content, article.content) .tabs > ul > li:first-child > a {
    border-top: 1px solid var(--fl-salt-500);
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
  }

  :where(.article-column article.content, article.content) .tabs-link.active {
    border-bottom: 2px solid var(--fl-berry-400);
  }

  :where(.article-column article.content, article.content) .tabs-panel {
    padding: 20px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }
}

@media print {
  :where(.article-column article.content, article.content) .tabs > ul {
    display: none !important;
  }

  :where(.article-column article.content, article.content) .tabs-panel[hidden] {
    display: block !important;
  }

  :where(.article-column article.content, article.content) .tabs-panel {
    border: 0;
    padding: 0;
    margin: 1.5em 0;
  }

  :where(.article-column article.content, article.content) .print-tab-hdr {
    display: block;
    font-weight: 700;
    font-size: 1.15em;
    margin: 1em 0 0.5em;
  }
}