/* Layout */
.site-section-spacing {
  padding-top: 2.75rem;
  padding-bottom: 2.75rem;
  padding-left: 61px;
  padding-right: 61px;
  background-color: #fff;
  max-width: 1440px;
  margin: 0 auto;
}

.site-section-spacing.forum {
  padding: 40px 16px 80px 16px;
  max-width: 676px;
}

.site-section-spacing.gpo {
  max-width: 1110px;
  padding-top: 60px;
  padding-bottom: 60px;
}

.component-wrapper-spacer {
  --dxp-s-component-wrapper-spacer-size: 0;
  /* removes default component margin that was applying to hidden components on Enhanced LWR */
}

.article-section {
  padding: 1rem;
  background-color: #fff;
}

@media only screen and (max-width: 768px) {
  .site-section-spacing {
    padding: 1rem;
  }

  .site-section-spacing.gpo {
    padding: 40px 16px;
  }
}

/* End Layout */

/* Text */
:root {
  --font-family-default: "FS Elliot Pro", arial, sans-serif;
  --font-family-bold: "FS Elliot Pro - Bold", arial, sans-serif;
  --font-family-light: "FS Elliot Pro - Light", arial, sans-serif;
  --font-color-default: #333;
  --font-color-default-light: #616267;
  --color-primary: #0061a0;
  --color-primary-alt: #003865;
  --color-accent: #dcf94d;
  --color-accent-alt: #bad244;
  --color-section-background-optional: #fbfbfb;

  --dxp-g-root-font-family: var(--font-family-default);
  --dxp-s-body-font-family: var(--font-family-default);
  /* slds-text-body_regular */
  --dxp-s-text-body-font-family: var(--font-family-default);
  --dxp-s-text-body-font-weight: normal;
  --dxp-s-text-body-font-size: 18px;
  --dxp-s-text-body-line-height: 28px;
  --dxp-s-text-body-color: var(--font-color-default);
  /* slds-text-body_small */
  --dxp-s-body-small-font-family: var(--font-family-default);
  --dxp-s-body-small-font-weight: normal;
  --dxp-s-body-small-font-size: 14px;
  --dxp-s-body-small-line-height: 24px;
  --dxp-s-body-small-color: var(--font-color-default);
  --dxp-g-heading-font-family: var(--font-family-bold);

  /* slds-text-heading_large */
  --dxp-s-text-heading-large-font-family: var(--font-family-light);
  --dxp-s-text-heading-large-font-weight: normal;
  --dxp-s-text-heading-large-letter-spacing: 0.5px;
  --dxp-s-text-heading-large-font-size: 70px;
  --dxp-s-text-heading-large-line-height: 72px;
  --dxp-s-text-heading-large-color: var(--dxp-s-body-color);
  /* slds-text-heading_medium */
  --dxp-s-text-heading-medium-font-family: var(--font-family-light);
  --dxp-s-text-heading-medium-font-weight: normal;
  --dxp-s-text-heading-medium-font-size: 50px;
  --dxp-s-text-heading-medium-line-height: 60px;
  --dxp-s-text-heading-medium-color: var(--font-color-default);
  /* slds-text-heading_small */
  --dxp-s-text-heading-small-font-family: var(--font-family-bold);
  --dxp-s-text-heading-small-font-weight: normal;
  --dxp-s-text-heading-small-font-size: 36px;
  --dxp-s-text-heading-small-line-height: 40px;
  --dxp-s-text-heading-small-color: var(--color-primary);
  /* slds-text-heading_xsmall */
  --dxp-s-text-heading-xsmall-font-family: var(--font-family-bold);
  --dxp-s-text-heading-xsmall-font-weight: normal;
  --dxp-s-text-heading-xsmall-font-size: 30px;
  --dxp-s-text-heading-xsmall-line-height: 33px;
  --dxp-s-text-heading-xsmall-color: var(--color-primary);

  /* slds-text-title_small */
  --dxp-c-title-small-font-family: var(--font-family-bold);
  --dxp-c-title-small-font-weight: normal;
  --dxp-c-title-small-font-size: 14px;
  --dxp-c-title-small-line-height: 15px;
  --dxp-c-title-small-text-color: var(--color-primary-alt);
  /* slds-text-title */
  --dxp-c-title-font-family: var(--font-family-bold);
  --dxp-c-title-font-weight: normal;
  --dxp-c-title-font-size: 18px;
  --dxp-c-title-line-height: 28px;
  --dxp-c-title-text-color: var(--font-color-default);
  /* slds-text-title_plus */
  --dxp-c-title-plus-font-family: var(--font-family-bold);
  --dxp-c-title-plus-font-weight: normal;
  --dxp-c-title-plus-font-size: 20px;
  --dxp-c-title-plus-line-height: 32px;
  --dxp-c-title-text-color: var(--font-color-default);
  /* slds-text-title_large */
  --dxp-c-title-large-font-weight: normal;
  --dxp-c-title-large-font-family: var(--font-family-bold);
  --dxp-c-title-large-font-size: 22px;
  --dxp-c-title-large-line-height: 28px;
  --dxp-c-title-large-text-color: var(--font-color-default);
  /* slds-text-title_xlarge */
  --dxp-c-title-xlarge-font-weight: normal;
  --dxp-c-title-xlarge-font-family: var(--font-family-bold);
  --dxp-c-title-xlarge-font-size: 26px;
  --dxp-c-title-xlarge-line-height: 35px;
  --dxp-c-title-xlarge-text-color: var(--font-color-default);
}

.slds-rich-text-editor__output {
  line-height: inherit !important;
}

b,
strong,
.slds-rich-text-editor__output b,
.slds-rich-text-editor__output strong {
  font-family: "FS Elliot Pro - Bold";
  font-weight: normal;
}

.default-light-text {
  color: var(--font-color-default-light);
}

.dxp-text-body,
.slds-text-body--regular,
.slds-text-body_regular {
  color: var(--dxp-s-text-body-color);
  font-family: var(--dxp-s-text-body-font-family);
  font-size: var(--dxp-s-text-body-font-size);
  font-weight: var(--dxp-s-text-body-font-weight);
  line-height: var(--dxp-s-text-body-line-height);
}

.slds-text-heading_xsmall {
  font-family: var(--dxp-s-text-heading-xsmall-font-family);
  font-weight: var(--dxp-s-text-heading-xsmall-font-weight);
  font-size: var(--dxp-s-text-heading-xsmall-font-size);
  line-height: var(--dxp-s-text-heading-xsmall-line-height);
  color: var(--dxp-s-text-heading-xsmall-color);
}

.slds-text-title_small {
  font-family: var(--dxp-c-title-small-font-family);
  font-weight: var(--dxp-c-title-small-font-weight);
  font-size: var(--dxp-c-title-small-font-size);
  line-height: var(--dxp-c-title-small-line-height);
  color: var(--dxp-c-title-small-text-color);
}

.slds-text-title {
  font-family: var(--dxp-c-title-font-family);
}

.slds-text-title_plus {
  font-family: var(--dxp-c-title-plus-font-family);
  font-weight: var(--dxp-c-title-plus-font-weight);
  font-size: var(--dxp-c-title-plus-font-size);
  line-height: var(--dxp-c-title-plus-line-height);
  color: var(--dxp-c-title-plus-text-color);
}

.slds-text-title_large {
  font-family: var(--dxp-c-title-large-font-family);
  font-weight: var(--dxp-c-title-large-font-weight);
  font-size: var(--dxp-c-title-large-font-size);
  line-height: var(--dxp-c-title-large-line-height);
  color: var(--dxp-c-title-large-text-color);
}

.slds-text-title_xlarge {
  font-family: var(--dxp-c-title-xlarge-font-family);
  font-weight: var(--dxp-c-title-xlarge-font-weight);
  font-size: var(--dxp-c-title-xlarge-font-size);
  line-height: var(--dxp-c-title-xlarge-line-height);
  color: var(--dxp-c-title-xlarge-text-color);
}

.box-truncate,
.slds-rich-text-editor__oputput.box-truncate {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--truncate-box-max-lines, 2);
  overflow: hidden;
}

.box-truncate.truncate-1 {
  --truncate-box-max-lines: 1;
}

.box-truncate,
.box-truncate.truncate-2 {
  --truncate-box-max-lines: 2;
}

.box-truncate.truncate-3 {
  --truncate-box-max-lines: 3;
}

.box-truncate.truncate-4 {
  --truncate-box-max-lines: 4;
}

.box-truncate.truncate-5 {
  --truncate-box-max-lines: 5;
}

.slds-text-body_regular.box-truncate {
  height: calc(
    var(--dxp-s-text-body-line-height) * var(--truncate-box-max-lines)
  );
}

.slds-text-body_small.box-truncate {
  height: calc(
    var(--dxp-s-body-small-line-height) * var(--truncate-box-max-lines)
  );
}

.slds-text-title.box-truncate {
  height: calc(var(--dxp-c-title-line-height) * var(--truncate-box-max-lines));
}

.slds-text-title_plus.box-truncate {
  height: calc(
    var(--dxp-c-title-plus-line-height) * var(--truncate-box-max-lines)
  );
}

.slds-text-heading_small.box-truncate.truncate-5 {
  height: calc(
    var(--dxp-s-text-heading-small-line-height) * var(--truncate-box-max-lines)
  );
}

/* End Text*/

/* Buttons */
:root {
  --dxp-s-button-font-family: "FS Elliot Pro";
  --dxp-s-button-font-size: 14px;
  --dxp-s-button-line-height: 32px;
  --sds-c-button-text-color: var(--color-primary);
  --slds-c-button-color-background: #e8f6fc;
  --slds-c-button-color-border: var(--color-primary);
  --slds-c-button-sizing-border: 2px;
  --sds-c-button-radius-border: 50px;
  --sds-c-button-spacing-block-start: 0px;
  --sds-c-button-spacing-inline-end: 16px;
  --sds-c-button-spacing-block-end: 0px;
  --sds-c-button-spacing-inline-start: 16px;

  --sds-c-button-text-color-hover: var(--color-primary);
  --slds-c-button-color-background-hover: #bbe6fc;
  --slds-c-button-color-border-hover: var(--color-primary);

  --sds-c-button-color-background-active: var(--color-primary);
  --sds-c-button-color-border-active: var(--color-primary);
  --sds-c-button-text-color-active: #fff;
  --sds-c-button-shadow-focus: none;

  /**
    * Bare (use with class and variant "bare")
    * transparent with default color text
    */
  --sds-c-button-bare-text-color: var(--color-primary);
  --slds-c-button-bare-color-background: transparent;
  --slds-c-button-bare-color-border: transparent;
  --sds-c-button-bare-text-color-hover: var(--color-primary-alt);
  --slds-c-button-bare-color-background-hover: transparent;
  --slds-c-button-bare-color-border-hover: transparent;
  --sds-c-button-bare-text-color-active: var(--color-primary-alt);
  --sds-c-button-bare-color-background-active: transparent;
  --sds-c-button-bare-color-border-active: transparent;

  --sds-c-button-bare-sizing-border: 0;
  --sds-c-button-bare-font-family: var(--font-family-bold);
  --sds-c-button-bare-spacing-inline-end: 5px;
  --sds-c-button-bare-spacing-inline-start: 5px;
  --sds-c-button-bare-text-decoration-hover: underline;

  /**
    * Neutral
    * white with blue text
    */
  --sds-c-button-neutral-text-color: var(--color-primary);
  --sds-c-button-neutral-color-background: #fff;
  --sds-c-button-neutral-color-border: var(--color-primary);
  --sds-c-button-neutral-text-color-hover: var(--color-primary);
  --sds-c-button-neutral-color-background-hover: #d0f0ff;
  --sds-c-button-neutral-color-border-hover: #d0f0ff;
  --sds-c-button-neutral-text-color-active: #fff;
  --sds-c-button-neutral-color-background-active: var(--color-primary);
  --sds-c-button-neutral-color-border-active: var(--color-primary);

  --sds-c-button-neutral-sizing-border: 1px;
  --sds-c-button-neutral-font-family: var(--font-family-bold);

  /**
    * brand
    * dark blue with white text
    */
  --sds-c-button-brand-text-color: #fff;
  --slds-c-button-brand-color-background: var(--color-primary);
  --slds-c-button-brand-color-border: var(--color-primary);
  --sds-c-button-brand-text-color-hover: #fff;
  --slds-c-button-brand-color-background-hover: var(--color-primary-alt);
  --slds-c-button-brand-color-border-hover: var(--color-primary-alt);
  --sds-c-button-brand-text-color-active: var(--color-primary);
  --sds-c-button-brand-color-background-active: #fff;
  --sds-c-button-brand-color-border-active: var(--color-primary);

  --sds-c-button-brand-sizing-border: 1px;
  --sds-c-button-brand-font-family: var(--font-family-bold);

  /**
    * brand.light
    * light blue with dark blue text
    */
  --sds-c-button-brand-light-text-color: var(--color-primary-alt);
  --slds-c-button-brand-light-color-background: #94d8fa;
  --slds-c-button-brand-light-color-border: #94d8fa;
  --sds-c-button-brand-light-text-color-hover: var(--color-primary-alt);
  --slds-c-button-brand-light-color-background-hover: #7bbfe1;
  --slds-c-button-brand-light-color-border-hover: #7bbfe1;
  --sds-c-button-brand-light-text-color-active: #002a4d;
  --sds-c-button-brand-light-color-background-active: #61a5c7;
  --sds-c-button-brand-light-color-border-active: #61a5c7;

  --sds-c-button-brand-light-sizing-border: 1px;
  --sds-c-button-brand-light-font-family: var(--font-family-bold);

  /**
    * inverse
    * transparent background with white text and outline
    */
  --sds-c-button-inverse-text-color: var(
    --component-button-default-inverted-text,
    #fff
  );
  --sds-c-button-inverse-color-background: var(
    --component-button-default-inverted-bg,
    rgba(0, 0, 0, 0)
  );
  --sds-c-button-inverse-color-border: var(
    --component-button-default-inverted-border,
    #fff
  );
  --sds-c-button-inverse-text-color-hover: var(
    --component-button-default-inverted-text,
    #fff
  );
  --sds-c-button-inverse-color-background-hover: var(
    --component-button-default-inverted-hover-bg,
    rgba(0, 0, 0, 0.2)
  );
  --sds-c-button-inverse-color-border-hover: var(
    --component-button-default-inverted-border,
    #fff
  );
  --sds-c-button-inverse-text-color-active: var(
    --component-button-default-inverted-text,
    #fff
  );
  --sds-c-button-inverse-color-background-active: var(
    --component-button-default-inverted-active-bg,
    rgba(0, 0, 0, 0.3)
  );
  --sds-c-button-inverse-color-border-active: var(
    --component-button-default-inverted-border,
    #fff
  );

  --sds-c-button-inverse-sizing-border: 1px;
  --sds-c-button-inverse-font-family: var(--font-family-bold);

  /**
    * brand-outline
    * green with blue text
    */
  --sds-c-button-outline-brand-text-color: var(--color-primary);
  --sds-c-button-outline-brand-color-background: var(--color-accent);
  --sds-c-button-outline-brand-color-border: var(--color-accent);
  --sds-c-button-outline-brand-text-color-hover: var(--color-primary);
  --sds-c-button-outline-brand-color-background-hover: var(--color-accent-alt);
  --sds-c-button-outline-brand-color-border-hover: var(--color-accent-alt);
  --sds-c-button-outline-brand-text-color-active: var(--color-accent-alt);
  --sds-c-button-outline-brand-color-background-active: var(--color-primary);
  --sds-c-button-outline-brand-color-border-active: var(--color-primary);

  --sds-c-button-outline-brand-sizing-border: 1px;
  --sds-c-button-outline-brand-font-family: var(--font-family-bold);

  /**
    * brand.special
    * green with blue text
    * use brand variant with added class "special"
    */
  --sds-c-button-special-brand-text-color: var(--color-accent);
  --slds-c-button-special-brand-color-background: var(--color-primary);
  --slds-c-button-special-brand-color-border: var(--color-primary);
  --sds-c-button-special-brand-text-color-hover: var(--color-accent);
  --slds-c-button-special-brand-color-background-hover: var(
    --color-primary-alt
  );
  --slds-c-button-special-brand-color-border-hover: var(--color-primary-alt);
  --sds-c-button-special-brand-text-color-active: var(--color-primary-alt);
  --sds-c-button-special-brand-color-background-active: var(--color-accent-alt);
  --sds-c-button-special-brand-color-border-active: var(--color-accent-alt);

  --sds-c-button-special-brand-sizing-border: 1px;
  --sds-c-button-special-brand-font-family: var(--font-family-bold);
}

/*class "bare"*/
.bare .slds-button,
.bare .slds-button.slds-button_neutral {
  --sds-c-button-neutral-text-color: var(--sds-c-button-bare-text-color);
  --slds-c-button-neutral-color-background: var(
    --slds-c-button-bare-color-background
  );
  --slds-c-button-neutral-color-border: var(--slds-c-button-bare-color-border);
  --sds-c-button-neutral-text-color-hover: var(
    --sds-c-button-bare-text-color-hover
  );
  --sds-c-button-neutral-color-background-hover: var(
    --slds-c-button-bare-color-background-hover
  );
  --slds-c-button-neutral-color-border-hover: var(
    --slds-c-button-bare-color-border-hover
  );
  --sds-c-button-neutral-text-color-active: var(
    --sds-c-button-bare-text-color-active
  );
  --sds-c-button-neutral-color-background-active: var(
    --sds-c-button-bare-color-background-active
  );
  --sds-c-button-neutral-color-border-active: var(
    --sds-c-button-bare-color-border-active
  );

  --sds-c-button-neutral-sizing-border: var(--sds-c-button-bare-sizing-border);
  --dxp-s-button-neutral-font-family: var(--sds-c-button-bare-font-family);
  --sds-c-button-neutral-spacing-inline-end: var(
    --sds-c-button-bare-spacing-inline-end
  );
  --sds-c-button-neutral-spacing-inline-start: var(
    --sds-c-button-bare-spacing-inline-start
  );
  --dxp-s-button-text-decoration-hover: var(
    --sds-c-button-bare-text-decoration-hover
  );
  text-underline-offset: 5px;
}

/*class "light"*/
lightning-button.light .slds-button_brand,
.slds-button_brand.light {
  --sds-c-button-brand-text-color: var(--sds-c-button-brand-light-text-color);
  --sds-c-button-brand-color-background: var(
    --slds-c-button-brand-light-color-background
  );
  --slds-c-button-brand-color-border: var(
    --slds-c-button-brand-light-color-border
  );
  --sds-c-button-brand-text-color-hover: var(
    --sds-c-button-brand-light-text-color-hover
  );
  --sds-c-button-brand-color-background-hover: var(
    --slds-c-button-brand-light-color-background-hover
  );
  --slds-c-button-brand-color-border-hover: var(
    --slds-c-button-brand-light-color-border-hover
  );
  --sds-c-button-brand-text-color-active: var(
    --sds-c-button-brand-light-text-color-active
  );
  --slds-c-button-brand-color-background-active: var(
    --sds-c-button-brand-light-color-background-active
  );
  --sds-c-button-brand-color-border-active: var(
    --sds-c-button-brand-light-color-border-active
  );

  --sds-c-button-brand-sizing-border: var(
    --sds-c-button-brand-light-sizing-border
  );
  --sds-c-button-brand-font-family: var(--sds-c-button-brand-light-font-family);
}

/*class "special"*/
lightning-button.special .slds-button_brand {
  --sds-c-button-brand-text-color: var(--sds-c-button-special-brand-text-color);
  --slds-c-button-brand-color-background: var(
    --slds-c-button-special-brand-color-background
  );
  --slds-c-button-brand-color-border: var(
    --slds-c-button-special-brand-color-border
  );
  --sds-c-button-brand-text-color-hover: var(
    --sds-c-button-special-brand-text-color-hover
  );
  --slds-c-button-brand-color-background-hover: var(
    --slds-c-button-special-brand-color-background-hover
  );
  --slds-c-button-brand-color-border-hover: var(
    --slds-c-button-special-brand-color-border-hover
  );
  --sds-c-button-brand-text-color-active: var(
    --sds-c-button-special-brand-text-color-active
  );
  --sds-c-button-brand-color-background-active: var(
    --sds-c-button-special-brand-color-background-active
  );
  --sds-c-button-brand-color-border-active: var(
    --sds-c-button-special-brand-color-border-active
  );

  --sds-c-button-brand-sizing-border: var(
    --sds-c-button-special-brand-sizing-border
  );
  --sds-c-button-brand-font-family: var(
    --sds-c-button-special-brand-font-family
  );
}

.slds-button_full-width .slds-button {
  width: 100%;
}

.slds-button_full-width
  .slds-button:not(
    .slds-button_neutral,
    .slds-button_brand,
    .slds-button_outline-brand
  ) {
  text-align: left;
}

.slds-button {
  padding-left: var(--sds-c-button-spacing-inline-start) !important;
  padding-right: var(--sds-c-button-spacing-inline-end) !important;
  white-space: var(--custom-button-white-space, normal);
}

.slds-button_neutral {
  font-family: var(--sds-c-button-neutral-font-family);
  border-width: var(--sds-c-button-neutral-sizing-border);
}

.slds-button_brand {
  font-family: var(--sds-c-button-brand-font-family);
  border-width: var(--sds-c-button-brand-sizing-border);
}

.slds-button_inverse {
  color: var(--sds-c-button-inverse-text-color);
  font-family: var(--sds-c-button-inverse-font-family);
  border-width: var(--sds-c-button-inverse-sizing-border);
  line-height: 32px;
}

.slds-button_inverse:hover,
.slds-button_inverse:focus {
  background-color: var(--sds-c-button-inverse-color-background-hover);
  color: var(--sds-c-button-inverse-text-color-hover);
}

.slds-button_inverse:active {
  background-color: var(--sds-c-button-inverse-color-background-active);
  color: var(--sds-c-button-inverse-text-color-active);
}

.slds-button_outline-brand {
  font-family: var(--sds-c-button-outline-brand-font-family);
  border-width: var(--sds-c-button-outline-brand-sizing-border);
}

.slds-button_brand:focus {
  color: var(--sds-c-button-brand-text-color-hover);
}

lightning-button:not(.bare) .slds-button:not(.slds-button_inverse):active {
  color: var(--sds-c-button-text-color-active) !important;
  border-color: var(--sds-c-button-color-border-active) !important;
  background-color: var(--sds-c-button-color-background-active) !important;
}

.slds-button_neutral:active {
  color: var(--sds-c-button-neutral-text-color-active) !important;
  border-color: var(--sds-c-button-neutral-color-border-active) !important;
  background-color: var(
    --sds-c-button-neutral-color-background-active
  ) !important;
}

.slds-button_brand:active {
  color: var(--sds-c-button-brand-text-color-active) !important;
  border-color: var(--sds-c-button-brand-color-border-active) !important;
  /* background-color: var(--sds-c-button-brand-color-background-active) !important; */
}

.slds-button_outline-brand:active {
  color: var(--sds-c-button-outline-brand-text-color-active) !important;
  border-color: var(
    --sds-c-button-outline-brand-color-border-active
  ) !important;
  background-color: var(
    --sds-c-button-outline-brand-color-background-active
  ) !important;
}

.slds-button.large,
.large .slds-button {
  --dxp-s-button-font-size: 16px;
  --dxp-s-button-line-height: 48px;
  --sds-c-button-spacing-block-start: 0px;
  --sds-c-button-spacing-inline-end: 32px;
  --sds-c-button-spacing-block-end: 0px;
  --sds-c-button-spacing-inline-start: 32px;
}

.slds-button_icon,
.slds-progress__marker {
  --sds-c-button-spacing-inline-start: 0px;
  --sds-c-button-spacing-inline-end: 0px;
  --sds-c-button-spacing-block-start: 0px;
  --sds-c-button-spacing-block-end: 0px;
}

.slds-button_icon {
  --slds-c-button-color-background: transparent;
  --slds-c-button-color-border: transparent;
  --slds-c-button-color-background-hover: transparent;
  --slds-c-button-color-border-hover: transparent;
  --sds-c-button-color-background-active: transparent;
  --sds-c-button-color-border-active: transparent;
}

.slds-modal__header .slds-modal__close:after {
  right: 0;
}

.slds-button_brand,
.slds-button_neutral {
  min-width: 0;
}

lightning-pill {
  --sds-c-pill-color-background: #f6f6f8;
  --sds-c-pill-color-border: #e8e8e8;
  --sds-c-pill-spacing-block-start: 4px;
  --sds-c-pill-spacing-block-end: 4px;
  --sds-c-pill-spacing-inline-start: 16px;
  --sds-c-pill-spacing-inline-end: 8px;
  --sds-c-pill-radius-border: 8px;
  text-transform: uppercase;
  color: #616267;
}

lightning-pill .slds-pill__remove {
  height: 32px;
  margin-top: -125rem;
  margin-bottom: -125rem;
  width: 22px;
  margin-right: -6px;
}

lightning-pill.remove-tag {
  --sds-c-pill-spacing-inline-end: 16px;
  /* 8px; temporary until remove logic is implemented */
}

lightning-pill.remove-tag .slds-pill__remove {
  display: none !important;
  /* temporary until remove logic is implemented - Lex B. */
}

lightning-pill .slds-pill__remove:hover,
lightning-pill .slds-pill__remove:focus,
lightning-pill .slds-pill__remove:active {
  background-color: var(--slds-c-button-brand-color-background-hover);
  --slds-c-icon-color-foreground: var(--sds-c-button-brand-text-color-hover);
  --sds-c-button-text-color-hover: var(--sds-c-button-brand-text-color-hover);
}

lightning-pill .slds-pill {
  overflow: hidden;
}

/* End Buttons */

/* Lightning Card */
:root {
  --slds-c-card-color-background: linear-gradient(
    180deg,
    #f6f6f6 0%,
    #ffffff 8.9%
  );
  --slds-c-card-shadow: none;
  --slds-c-card-color-border: transparent;
  --slds-c-card-footer-color-border: transparent;
  --slds-c-card-radius-border: 25px;
  --slds-c-card-header-spacing-inline-start: 0;
  --slds-c-card-header-spacing-inline-end: 0;
  --slds-c-card-header-spacing-block-start: 0;
  --slds-c-card-header-spacing-block-end: 0;
  --slds-c-card-body-spacing-inline-start: 0;
  --slds-c-card-body-spacing-inline-end: 0;
  --slds-c-card-body-spacing-block-start: 0;
  --slds-c-card-body-spacing-block-end: 0;
  --slds-c-card-footer-spacing-inline-start: 0;
  --slds-c-card-footer-spacing-inline-end: 0;
  --slds-c-card-footer-spacing-block-start: 0;
  --slds-c-card-footer-spacing-block-end: 0;
}

.slds-card {
  overflow: hidden;
  --slds-c-card-sizing-border: 0;
}

/* End Lightning Card */

/* Inputs */
:root {
  --c-slds-input-font-family: var(--font-family-bold);
  --dxp-s-form-element-label-color: var(--color-primary);
  --dxp-s-form-element-label-font-size: 18px;
  --sds-c-input-radius-border: 4px;
  --dxp-c-input-width-border: 1px;
  --sds-c-input-color-border: #616267;
  --slds-c-input-spacing-horizontal-start: 16px;
  --slds-c-input-spacing-horizontal-end: 16px;
  --slds-c-input-spacing-vertical-start: 10px;
  --slds-c-input-spacing-vertical-end: 10px;
  --dxp-c-input-text-font-size: 16px;
  --c-dxp-option-font-size: 16px;
}

.slds-form-element {
  --dxp-g-spacing-medium: 23px;
  font-family: var(--c-slds-input-font-family);
}

input,
select,
textarea {
  font-family: var(--c-slds-input-font-family);
}

.slds-input,
.slds-input_faux {
  padding-top: var(--slds-c-input-spacing-vertical-start);
  padding-bottom: var(--slds-c-input-spacing-vertical-end);
  padding-left: var(--slds-c-input-spacing-horizontal-start);
  padding-right: var(--slds-c-input-spacing-horizontal-end);
}

input:placeholder-shown,
.input-rich-text-placeholder {
  color: #8d8d8f !important;
  font-family: var(--font-family-default) !important;
}

.slds-form-element__label {
  font-family: var(--font-family-bold);
  line-height: 24px;
  margin-bottom: 10px;
}

.slds-input[readonly] {
  --slds-c-input-spacing-horizontal-start: 17px;
  --slds-c-input-color-border: #8d8d8f;
  --sds-c-input-color-border: #8d8d8f;
  --slds-c-input-color-background: transparent;
  font-size: var(--dxp-c-input-text-font-size);
}

.slds-combobox__input {
  --slds-c-input-radius-border: 4px;
  font-size: var(--dxp-c-input-text-font-size);
  border-width: var(--dxp-c-input-width-border);
  border-color: var(--sds-c-input-color-border);
}

.slds-combobox__input.slds-has-focus,
.slds-combobox__input:focus {
  border-color: var(--sds-c-input-color-border-focus);
  -webkit-box-shadow: var(--slds-c-input-shadow);
  box-shadow: var(--slds-c-input-shadow);
}

/* .slds-combobox .slds-input__icon-group .slds-icon {
    display: none;
} */

/* .slds-combobox .slds-input__icon-group:after {
    display: inline-block;
    content: "";
    height: 12px;
    width: 12px;
    border-right: 1px solid var(--sds-c-input-color-border);
    border-bottom: 1px solid var(--sds-c-input-color-border);
    transform: rotate(45deg);
    position: absolute;
    right: 20px;
    top: -3px !important;
} */

.slds-input_faux:not(.slds-combobox__input-value) {
  font-family: var(--font-family-default);
}

.support-form--container .slds-combobox .slds-input__icon-group:after {
  display: none;
}

.slds-dropdown {
  font-size: var(--c-dxp-option-font-size);
  border-radius: var(--sds-c-input-radius-border);
}

.slds-required {
  display: none;
}

/* Must add class to the lightning-combobox LWC in addition to "disabled=true" */
lightning-input[disabled],
lightning-combobox.disabled {
  filter: grayscale(1) opacity(0.5);
}

.bare.slds-dropdown-trigger_click.slds-is-open .slds-dropdown {
  top: 40px;
  left: unset;
  right: -22px;
  --dxp-s-dropdown-text-color: var(--font-color-default);
  --c-dxp-option-font-size: 14px;
  --dxp-s-dropdown-text-color-hover: var(--color-primary);
  --dxp-s-dropdown-color-background-hover: #f6f6f8;
}

.bare.slds-dropdown-trigger_click.slds-is-open .slds-dropdown:after,
.bare.slds-dropdown-trigger_click.slds-is-open .slds-dropdown:before {
  content: "";
  border-style: solid;
  border-width: 0 14px 14px 14px;
  position: absolute;
  right: 20px;
}

.bare.slds-dropdown-trigger_click.slds-is-open .slds-dropdown:before {
  border-color: transparent transparent #ccc transparent;
  top: -14px;
}

.bare.slds-dropdown-trigger_click.slds-is-open .slds-dropdown:after {
  border-color: transparent transparent #fff transparent;
  top: -13px;
}

.bare.slds-dropdown-trigger_click.slds-is-open
  .slds-dropdown__list
  .slds-text-title {
  white-space: nowrap;
  padding: 12px;
  --dxp-c-title-font-size: 16px;
}

.bare.slds-dropdown-trigger_click.slds-is-open
  .slds-dropdown__list
  .slds-dropdown__item
  > a:hover,
.bare.slds-dropdown-trigger_click.slds-is-open
  .slds-dropdown__list
  .slds-dropdown__item
  > a:focus,
.bare.slds-dropdown-trigger_click.slds-is-open
  .slds-dropdown__list
  .slds-dropdown__item
  > a:active {
  font-family: var(--font-family-bold);
}

.rich-text-input
  .slds-button-group-list
  .slds-button.slds-button_icon-border-filled {
  --sds-c-button-spacing-inline-start: 20px;
  --sds-c-button-spacing-inline-end: 20px;
  --slds-c-button-spacing-block-start: 10px;
  --slds-c-button-spacing-block-end: 10px;
  --dxp-g-neutral-1: transparent;
  --dxp-s-button-font-size: 24px;
}

.slds-rich-text-editor,
.slds-rich-text-editor__toolbar {
  border-color: var(--sds-c-input-color-border);
}

.slds-rich-text-editor__toolbar {
  justify-content: space-between;
}

.slds-rich-text-editor__toolbar ul:nth-child(3),
.slds-rich-text-editor__toolbar ul:nth-child(4),
.slds-rich-text-editor__toolbar ul:nth-child(5),
.slds-rich-text-editor__toolbar slot {
  display: none;
}

.slds-dropdown_fluid {
  max-width: 700px;
}

/* End Inputs */

/* Modals */
:root {
  --slds-c-modal-color-background: #fff;
  --slds-c-modal-header-color-background: transparent;
  --slds-c-modal-content-color-background: transparent;
  --slds-c-modal-footer-color-background: transparent;
}

.slds-modal__header .slds-modal__close {
  height: 26px;
  width: 26px;
  top: 24px;
  right: 24px;
  --lwc-buttonColorBorderPrimary: transparent;
  --slds-c-icon-color-foreground: transparent;
  --slds-c-button-text-color-hover: transparent;
  --slds-c-button-text-color-active: transparent;
}

.slds-modal__header .slds-modal__close:before,
.slds-modal__header .slds-modal__close:after {
  content: "";
  position: absolute;
  width: 22px;
  height: 2px;
  background-color: #000;
  top: 10px;
}

.slds-modal__header .slds-modal__close:before {
  transform: rotate(45deg);
  left: 0;
}

.slds-modal__header .slds-modal__close:after {
  transform: rotate(-45deg);
  right: 1px;
}

.slds-modal__footer {
  padding: 0;
  border: 0;
  box-shadow: none;
}

.slds-modal__footer:empty {
  padding: 0;
}

/* End Modals */

/* Tabs */
.library-spotlight-container lightning-tab-bar {
  display: block;
  max-width: calc(100% - 140px);
}

.library-spotlight-container .slds-tabs_default {
  max-width: calc(100vw - 140px);
  /* site gutters are set to 70px in themes */
}

lightning-tab-bar lightning-button-menu button {
  content: url(/sfsites/c/resource/iconEllipsis);
  --slds-c-button-color-background: transparent;
  --slds-c-button-color-border: transparent;
  --slds-c-button-color-background-hover: #f6f6f8;
  --slds-c-button-color-border-hover: transparent;
  --sds-c-button-color-background-active: #e8e8e8;
  --sds-c-button-color-border-active: transparent;
  --sds-c-button-spacing-inline-start: 5px;
  --sds-c-button-spacing-inline-end: var(--sds-c-button-spacing-inline-start);
  --sds-c-button-spacing-block-start: var(--sds-c-button-spacing-inline-start);
  --sds-c-button-spacing-block-end: var(--sds-c-button-spacing-inline-start);
}

lightning-tab-bar .slds-tabs_default__overflow-button {
  --slds-c-tabs-item-color-border-hover: transparent;
}

lightning-tab-bar {
  --slds-c-tabs-list-color-border: var(--pds-semantic-border-default, #c5c6c5);
  --slds-c-tabs-item-color-border-active: var(
    --pds-semantic-text-interactive-default,
    #0061a0
  );
  --dxp-c-link-text-color: var(--pds-semantic-text-subtle, #616267);
}

lightning-tab-bar .slds-tabs_default__item.slds-is-active a {
  --dxp-c-link-text-color: var(
    --pds-semantic-text-interactive-default,
    #0061a0
  );
}

lightning-tabset li {
  font-size: 16px !important;
}

@media only screen and (max-width: 47.9375em) {
  .library-spotlight-container lightning-tab-bar {
    max-width: unset;
  }

  .library-spotlight-container .slds-tabs_default {
    max-width: calc(100vw - 3rem);
  }

  lightning-tabset li {
    font-size: 13px !important;
  }
}

/* End Tabs */

/* SLDS-GRID */
.slds-gutters {
  margin-top: -1rem;
  margin-bottom: -1rem;
}

.slds-gutters .slds-col {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.slds-gutters_x-small {
  margin-top: -0.5rem;
  margin-bottom: -0.5rem;
}

.slds-gutters_x-small .slds-col {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

/* End SLDS-GRID */

/* Misc Components */

/* Defaults the svg icons to white if they don't have a fill embedded. The 'Fill' property can be used to change icon color */
.nav-bar-icon .slds-icon {
  fill: var(
    --slds-c-icon-color-foreground,
    var(
      --sds-c-icon-color-foreground,
      var(--slds-g-color-neutral-base-100, #fff)
    )
  );
  height: 20px;
  width: 20px;
}

.avatar.default.slds-avatar_circle,
.avatar.default .slds-avatar_circle {
  background: white !important;
}

.avatar.default img {
  position: relative;
  left: 12px;
  top: 10px;
}

.gpo .slds-form-element.slds-has-error .slds-form-element__help {
  font-family: "FS Elliot Pro - Bold";
}

@media only screen and (max-width: 47.9375em) {
  .avatar.default img {
    position: relative;
    left: 3px;
    top: 5px;
  }

  .mobile-progress .slds-progress-ring {
    height: 75px;
    width: 75px;
    border-radius: 75px;
    background-color: #a7a7a7;
  }

  .mobile-progress .slds-progress-ring__content {
    background-color: #f0fbfe;
    border-radius: 75px;
  }

  .mobile-progress .slds-progress-ring svg {
    overflow: visible;
  }

  lightning-button-menu .slds-dropdown.slds-dropdown_right {
    left: -80px;
    width: fit-content;
  }
}

/* End Misc Components */

/* Fix conflicts with PDS */
.columns-content .col,
.columns-content [class*="col-"] {
  padding-top: var(--dxp-c-column-container-spacing-block-start, 0) !important;
  padding-right: var(--dxp-c-column-container-spacing-inline-end, 0) !important;
  padding-bottom: var(--dxp-c-column-container-spacing-block-end, 0) !important;
  padding-left: var(
    --dxp-c-column-container-spacing-inline-start,
    0
  ) !important;
}

h1[class*="pds-u-typography-title-"],
h2[class*="pds-u-typography-title-"],
h3[class*="pds-u-typography-title-"],
h4[class*="pds-u-typography-title-"],
h5[class*="pds-u-typography-title-"],
h6[class*="pds-u-typography-title-"] {
  font-family: var(--typography-font-secondary, var(--font-family-bold));
}

h6.pds-u-typography-title-xs {
  font-size: 1.125rem;
  line-height: 1.75rem;
}

.pds-u-typography-title-lg {
  font-size: 2rem;
  line-height: 2.5rem;
}

.pds-u-typography-title-default {
  font-size: 1.5rem;
  line-height: 2.25rem;
}

.pds-u-typography-title-sm {
  font-size: 1.25rem;
  line-height: 2rem;
}

[class*="pds-u-typography-display-"] {
  font-family: var(--typography-font-light, var(--font-family-light));
}

.pds-u-typography-display-default {
  font-size: 3rem;
  line-height: 3.375rem;
}

.pds-u-typography-display-sm {
  font-size: 2.5rem;
  line-height: 3rem;
}

[class*="pds-u-typography-body-"] {
  font-family: var(--typography-font-primary, var(--font-family-default));
}

.pds-u-typography-body-sm {
  font-size: 0.875rem;
  line-height: 1.5rem;
}

.pds-u-typography-body-default {
  font-size: 1rem;
  line-height: 1.75rem;
}

a:hover,
a:focus,
a:active {
  text-decoration: none !important;
  border-bottom: 1px solid;
}

hr {
  border-top: 0;
  border-bottom: 1px solid #c5c6c5;
  --dxp-c-hr-margin-block-start: 0;
  --dxp-c-hr-margin-block-end: 0;
}

c-pds-skeleton-loader {
  display: block;
  width: var(--pds-component-skeleton-loader-width, calc(100% - 40px));
  margin: auto;
}

.mock-heading,
.mock-subtitle,
.mock-text {
  margin-bottom: 20px;
}