:root {
  /* Colors */
  --color-amaranth: #dc0077;
  --color-blue-star: #004f6f;
  --color-digital-zinnia: #6A7029;
  --color-gray-stone: #5c514e;
  --color-charcoal: #454545;
  --color-light-blue: #f2f7f7;
  --color-light-gray: #fbf9f6;
  --color-light-gray-content: #606060;
  --color-dove-gray: #707070;
  --color-silver-chalicey: #adadad;
  --color-white: #fff;
  --color-black: #000;
  --color-fall-green: #E6E7B9;
  --color-black-16: rgb(0, 0, 0, .16);
  --color-tundra: #454545;
  --color-regal-blue: #014F6E;
  --bs-body-color: #454545;
  --gray-90: #21272A;

  /* Fonts */
  --font-trade-gothic-next: 'DM Sans';
  --font-trade-gothic-next-compressed: 'DM Sans';
  --font-trade-gothic-next-condensed: 'DM Sans';

  /* Sizes */
  --isi-width: 374px;
  --nav-height: 143px;
}

.slds-fade-in-open {
  z-index: 100002;
}

.slds-backdrop {
  z-index: 100001;
}

.bg-light-blue {
  background-color: var(--color-light-blue);
}

.bg-light-gray {
  background-color: var(--color-light-gray);
}

.bg-blue {
  background-color: var(--color-blue-star);
}

.fc-blue {
  color: var(--color-blue-star) !important;
}

.fc-black {
  color: var(--color-black);
}

.fc-amaranth {
  color: var(--color-amaranth) !important;
}

.fc-gray {
  color: var(--gray-90) !important;
}

body {
  overflow-x: hidden;
}

.table {
  margin-bottom: 0;
}

h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4 {
  font-family: var(--font-trade-gothic-next), sans-serif;
  font-style: normal;
}

p,
.body,
li {
  font-family: var(--font-trade-gothic-next), sans-serif;
  font-weight: 200;
}

p.footnotes {
  font-size: 14px;
  line-height: 18px;
}

.close {
  font-family: var(--font-trade-gothic-next), sans-serif;
  font-weight: 200;
  font-size: 15px;
}

.body-disclaimer {
  font-size: 14px;
  letter-spacing: .1px;
}

.body-disclaimer,
.body-disclaimer .slds-rich-text-editor__output {
  line-height: 16px;
}

.slds-rich-text-editor__output {
  line-height: unset;
}

h1,
.h1 {
  color: var(--color-charcoal) !important;
  font-weight: 200;
  letter-spacing: -1.2px;
}

h1+hr,
.h1+hr {
  border-color: var(--color-black-16) !important;
  margin-top: 15px !important;
}

h2,
.h2 {
  color: var(--color-blue-star) !important;
  font-weight: 600;
  letter-spacing: -.8px;
}

h3,
.h3 {
  letter-spacing: -.3px;
  color: var(--color-charcoal);
  font-weight: 200;
}

h3+p,
.h3+p {
  margin-top: 10px;
}

.fs-bold,
strong,
b {
  font-weight: 600;
  color: var(--color-tundra);
}

.fs-bold-black {
  font-weight: 700;
  color: var(--color-black);
  font-family: var(--font-trade-gothic-next);
}

.fw-bold {
  font-weight: 700;
}

.fs-shadow {
  text-shadow: var(--color-black) 0px 0px 5px;
}

.fs-italic {
  font-style: italic;
}

.mb-20 {
  margin-bottom: 20px;
}

.mt-20 {
  margin-top: 20px;
}

.mb-15 {
  margin-bottom: 15px;
}

.mt-15 {
  margin-top: 15px;
}

.pt-15 {
  padding-top: 15px;
}

.pt-20 {
  padding-top: 20px;
}

.body-list {
  list-style-type: disc;
}

.fc-white {
  color: var(--color-white);
}

.body-list .internal-body-list li:before {
  border-top: 2px solid var(--color-black);
  content: '';
  display: inline-block;
  height: 2px;
  left: 0;
  position: absolute;
  top: 12px;
  width: 5px;
}

.ordered-body-list {
  padding-left: 26px;
  list-style: decimal;
}

.ordered-body-list li {
  padding-left: 10px;
  margin-bottom: 10px;
}

.ordered-body-list li::marker {
  font-weight: 600;
  color: #454545;
}


.list-custom>li::before {
  position: absolute;
  content: '';
  display: inline-block;
  background-image: var(--logo_bullet);
  background-repeat: no-repeat;
  background-size: contain;
}

.list-custom>li {
  position: relative
}

.list-custom>li::before {
  top: -11px;
  left: -63px;
  width: 56px;
  height: 57px;
}

.btn-primary:hover,
.btn-secondary:hover,
.primary-link:hover,
.secondary-link:hover,
.btn-primary:focus,
.btn-secondary:focus,
.primary-link:focus,
.secondary-link:focus {
  text-decoration: none !important;
}

.btn-primary,
.btn-secondary,
.primary-link {
  font-family: var(--font-trade-gothic-next-compressed), sans-serif;
  font-size: 19px;
  letter-spacing: -0.05em;
}

.secondary-link {
  font-family: var(--font-trade-gothic-next), sans-serif;
  font-style: normal;
  font-weight: 200;
}

.btn-primary {
  color: var(--color-amaranth) !important;
  font-size: 22px;
  font-style: normal;
  font-weight: 600;
  line-height: 24px;
  letter-spacing: 2.05px;
}

.btn-secondary {
  background-color: var(--color-amaranth) !important;
  color: var(--color-white) !important;
  font-style: normal;
  font-weight: 600;
  letter-spacing: 2.05px;
  position: relative;
}

.btn-secondary::before,
.btn-secondary::after {
  background-color: var(--color-amaranth) !important;
  border-bottom-right-radius: 16px;
  content: '';
  display: block;
  height: 100%;
  position: absolute;
  top: 0;
}

.btn-secondary::before {
  transform: skew(-30deg) rotate(540deg);
}

.btn-secondary::after {
  transform: skew(-30deg);
}

.primary-link {
  color: var(--color-amaranth) !important;
  font-size: 17px;
  font-style: normal;
  font-weight: 600;
  line-height: 24px !important;
  letter-spacing: 0px;
  position: relative;
}

.primary-link.primary-link--arrow::after {
  background-image: var(--right_arrow);
  background-repeat: no-repeat;
  background-size: contain;
  content: '';
  height: 18px;
  width: 24px;
  display: inline-block;
  margin-left: 12px;
  position: relative;
  top: 2px;
}

.primary-link.primary-link--arrow:hover::after {
  filter: brightness(0) saturate(100%) invert(21%) sepia(21%) saturate(4930%) hue-rotate(170deg) brightness(98%) contrast(101%);
}

.primary-link.primary-link--download::after {
  background-image: var(--download_icon);
  background-repeat: no-repeat;
  background-size: contain;
  content: '';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.primary-link.primary-link--download.white::after {
  background-image: var(--download_icon);
  background-repeat: no-repeat;
  background-size: contain;
  content: '';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  filter: brightness(0) saturate(100%) invert(21%) sepia(93%) saturate(6145%) hue-rotate(316deg) brightness(91%) contrast(90%);
}


.primary-link.primary-link--download:hover::after {
  filter: brightness(0) saturate(100%) invert(21%) sepia(21%) saturate(4930%) hue-rotate(170deg) brightness(98%) contrast(101%);
}

.secondary-link {
  color: var(--color-amaranth) !important;
  font-size: 16px;
  line-height: 18px;
}

.primary-link:hover,
.secondary-link:hover {
  color: var(--color-blue-star) !important
}

.small-dagger {
  font-size: 58%;
  top: -0.7em;
}

.nobreak {
  white-space: nowrap;
}

@media only screen and (max-width: 991px) {
  .mt-header {
    margin-top: 62px;
  }

  .mb-footer {
    margin-bottom: 46px;
  }

  footer {
    padding-bottom: 12.5vh;
  }

  h1,
  .h1 {
    font-size: 38px;
    line-height: 42px;
  }

  h2,
  .h2 {
    font-size: 28px;
    line-height: 32px;
  }

  h2 .slds-rich-text-editor__output {
    line-height: 32px;
  }

  h3,
  .h3 {
    font-size: 20px;
    line-height: 24px;
  }

  p,
  .body {
    font-size: 16px;
    line-height: 22px;
  }

  h1+hr,
  .h1+hr {
    margin-bottom: 44px !important;
  }

  h2+p,
  .h2+p {
    margin-top: 16px;
  }

  p:not(.body-disclaimer)+h2,
  .body+h2 {
    margin-top: 43px;
  }

  .body-list {
    padding-left: 18px;
  }

  .body-list.has-internal-list li {
    padding-left: 1px;
  }

  .body-list>li:not(:last-child) {
    margin-bottom: 4px;
    line-height: 22px;
  }

  .body-list .internal-body-list {
    margin-top: 6px;
  }

  .body-list .internal-body-list li {
    padding-left: 19px;
    position: relative;
  }

  .list-custom {
    padding-left: 41px;
  }

  .list-custom>li {
    margin-bottom: 35px;
  }

  .btn-secondary {
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 1.2px;
    padding: 15px 28px 15px 24px;
    margin-left: -12px;
  }

  .btn-secondary::before {
    left: -33px;
    width: 61px;
    z-index: -1;
  }

  .btn-secondary::after {
    right: -33px;
    width: 47px;
  }



  .info-box-container {
    width: calc(100% - 60px);
  }

  .primary-link {
    width: 90%;
  }

  .primary-link.primary-link--arrow::after {
    position: absolute;
    top: 2px;
    right: -23px;
  }

  .treating-cscc .primary-link.primary-link--arrow::after {
    position: absolute !important;
    right: -30px !important;
  }
}

@media only screen and (min-width: 992px) {

  header,
  .community_byo-scoped-header-and-footer__main,
  footer {
    max-width: calc(100vw - var(--isi-width));
  }

  .mt-header {
    margin-top: 71px;
  }

  .mb-lg-70 {
    margin-bottom: 70px;
  }

  .mb-lg-20 {
    margin-bottom: 20px;
  }

  .mt-lg-20 {
    margin-top: 20px;
  }

  h1,
  .h1 {
    font-size: 48px;
    line-height: 56px;
  }

  h2,
  .h2 {
    font-size: 30px;
    line-height: 34px;
  }

  h2 .slds-rich-text-editor__output {
    line-height: 34px;
  }

  h3,
  .h3 {
    font-size: 22px;
    line-height: 26px;
  }

  p,
  .body {
    font-size: 18px;
    line-height: 24px;
  }

  h1+hr,
  .h1+hr {
    margin-bottom: 50px !important;
  }

  h2+p,
  .h2+p {
    margin-top: 19px;
  }

  p:not(.body-disclaimer)+h2,
  .body+h2 {
    margin-top: 57px;
  }

  .mb-42 {
    margin-bottom: 42px !important;
  }

  .btn-secondary {
    font-size: 16px;
    letter-spacing: 1.4px;
    line-height: 24px;
    padding: 15px 28px;
  }

  .btn-secondary::before,
  .btn-secondary::after {
    width: 51px;
  }

  .btn-secondary::before {
    left: -34px;
  }

  .btn-secondary::after {
    right: -34px;
  }

  /* .primary-link.primary-link--arrow::after {
    height: 18px;
    right: -42px;
    width: 23px;
  } */

  .primary-link.primary-link--download::after {
    height: 19.5px;
    right: -31px;
    width: 19.5px;
  }

  .body-img {
    margin: 19px auto 15px;
  }

  .body-list {
    padding-left: 15px;
  }

  .body-list.has-internal-list li {
    padding-left: 14px;
  }

  .body-list>li:not(:last-child) {
    margin-bottom: 20px;
  }

  .body-list .internal-body-list li {
    padding-left: 15px;
    position: relative;
  }

  .list-custom {
    padding-left: 44px;
  }

  .list-custom>li {
    margin-bottom: 21px;
  }

  .list-custom>li ul {
    margin-top: 8px;
  }

  .list-custom>li h2+ul {
    margin-top: 10px;
  }
}

@media only screen and (min-width: 1200px) {
  .mt-xl-65 {
    margin-top: 65px;
  }

}

@media only screen and (min-width: 1440px) {
  .container {
    max-width: 932px;
    font-family: var(--font-trade-gothic-next), sans-serif;
    font-weight: 200;
  }
}

@media only screen and (max-width: 767px) {
  .container {
    max-width: 91%;
  }

  .stories--story-content--italic-body {
    text-align: left !important;
  }

  .stories--story-content-h1 {
    justify-self: revert !important;
  }
}

sub {
  bottom: 0 !important;
}

sup.small {
  font-size: 50%;
  top: -0.7em;
}

.stories {
  background: var(--color-blue-star) !important;
}


/* Libtayo consumer patient stories card css start - Rahul 07/05/26 */

.card--collapse {
  color: white;
  font-family: 'DM Sans';
  display: flex;
  justify-content: space-evenly;
  gap: 10px;
  align-items: center;
  position: absolute;
  bottom: 50px;
  right: 20px;
  cursor: pointer;

  &:after {
    content: '';
    display: block;
    height: 13px;
    width: 13px;
    border-top: 2px solid white;
    border-left: 2px solid white;
    rotate: 45deg;
  }
}

.stories-card {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  gap: 30px;
  max-width: 390px;
  margin: auto;

  .card {
    border: none;
    background-color: unset;
    background-image: var(--bg-img-mobile);
    background-size: contain;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
    height: 354px;

    .card--content {
      padding-top: 60px;
      padding-left: 29px;
      padding-right: 83px;
    }

    .card--title {
      font-size: 17px;
      font-weight: bold;
      color: var(--color-blue-star);
    }



    .card--overview {
      color: #5C514E;
      font-size: 16px;
      font-weight: 400;
      margin-top: 11px;
      font-style: italic;
      line-height: 1.4;
    }

    .card--link {
      display: none;
    }

    .card--watch {
      border: none;
      font-family: var(--font-trade-gothic-next), sans-serif;
      background: unset;
      margin-top: 12px;
      color: var(--color-amaranth);
      font-weight: 700;
      padding: 0;
      font-size: 13px;
      text-transform: uppercase;
      display: flex;
      align-items: center;
      gap: 8px;

      &:after {
        content: '';
        display: block;
        background: url('data:image/svg+xml,<svg width="14" height="8" viewBox="0 0 14 8" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13 1L7 7L1 1" stroke="%23DC0077" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
        width: 12px;
        height: 7px;
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
      }
    }
  }
}

@media only screen and (min-width: 1025px) {
  .visible-mobile {
    display: none !important;
  }

  .stories-card {
    max-width: none;
    justify-content: center;
    margin-left: 60px;

    .card:not(.card--extended) {
      justify-content: center;
      height: auto;
      position: relative;
      background-repeat: no-repeat;
      display: flex;
      flex-direction: row;
      align-items: stretch;

      .card--content {
        padding-top: 0;
        height: 162px;
        justify-content: center;
        display: flex;
        flex-direction: column;
        background: #f2f7f7;
        position: relative;
        z-index: 9;
        left: -140px;
        margin-right: -140px;
        flex: 1;
        min-width: 0;

        .card-content-part {
          padding-left: 140px;
        }
      }

      .card--title {
        font-size: 24px;
      }

      .card--overview {
        font-size: 16px;
        margin: 13px 0;
        line-height: 21px;

      }

      .card--watch {
        margin-top: 5px;
        font-size: 18px;

        &:after {
          width: 14px;
          height: 7px;
        }
      }

      .card-bg-image {
        background: var(--bg-img-desktop);
        height: 162px;
        width: 240px;
        background-repeat: no-repeat;
        position: relative;
        z-index: 999;
        flex-shrink: 0;
      }
    }

    .card.card--extended {
      background-image: unset !important;
      background-color: var(--color-blue-star) !important;
      height: 450px !important;
      border-radius: 0 !important;
      border-top-left-radius: 93px !important;

      .card--content {
        padding-top: 50px !important;
        padding-left: 60px !important;
        padding-right: 60px !important;
        display: grid !important;
        gap: 40px !important;
        grid-template: 'header header'
          'video content';
        grid-template-columns: 418px auto;
      }

      .card--title {
        font-size: 45px !important;
        grid-area: header;
        margin-top: 0;
      }

      .card--video-content {
        border: none !important;
        grid-area: video !important;
        margin-top: 0 !important;
        padding: 0 !important;

        iframe.video-frame {
          width: 418px !important;
          height: 245px !important;
          min-width: 395px !important;
        }

        .footnotes {
          margin-top: 10px !important;
        }
      }

      .card-details {
        margin-top: 0 !important;
        margin-right: auto !important;
        height: fit-content !important;
        max-width: 370px;

        .card--link {
          padding: 10px 10px !important;
        }
      }
    }
  }

  .stories-card>.card:not(.card--extended):nth-child(even) {
    .card--content {
      background: #FBF9F6;
    }
  }
}

@media only screen and (min-width: 1440px) {
  .card--collapse {
    bottom: 2em;
    right: 35px;
  }
}


.card--video-content {
  display: none;
}

/* card extended mobile */
.card.card--extended {
  background-image: url('data:image/svg+xml,<svg width="391" height="740" viewBox="0 0 391 740" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0.5 0L292.491 46.7335C349.248 55.8175 391 104.784 391 162.263V739.5L83.0122 690.206C35.4721 682.597 0.5 641.583 0.5 593.438V0Z" fill="%23004F6F"/></svg>') !important;
  background-size: contain !important;
  background-position: top center !important;
  height: 770px !important;

  .card--content {
    padding-top: 75px !important;
    padding-left: 15px !important;
    padding-right: 12px !important;
  }

  .card--title {
    color: white !important;
    font-size: 40px !important;
    line-height: 1;
    font-weight: 300 !important;
    margin-top: 30px;
  }

  .card--overview {
    /* text-align: center;*/
    text-align: left;
    font-weight: 400 !important;
    color: #21272A !important;
    font-size: 16px;

  }

  .card--video-content {
    display: flex !important;
    border-top: solid white 1px !important;
    margin-top: 30px !important;
    padding-top: 18px !important;
    flex-direction: column !important;
    align-items: center !important;

    iframe.video-frame {
      width: 300px !important;
      height: 195px !important;
      min-width: 300px !important;
      position: relative !important;
      left: 0 !important;
      right: 0 !important;
    }

    .footnotes {
      color: white !important;
      font-size: 12px !important;
      padding: 2px 13px !important;
    }
  }

  .card-details {
    background: white !important;
    border-radius: 8px !important;
    padding: 11px 10px !important;
    margin-top: 26px !important;
    grid-area: content !important;

    .card--overview {
      margin: 0 !important;
      font-weight: 400 !important;
      color: #21272A !important;

    }

    .card--link {
      background: var(--color-amaranth) !important;
      color: white !important;
      width: 100% !important;
      display: flex !important;
      padding: 10px 0 !important;
      margin-top: 18px !important;
      font-size: 15px !important;
      border-radius: 20px !important;
      font-family: var(--font-trade-gothic-next), sans-serif !important;
      font-weight: 500 !important;
      justify-content: center !important;
      gap: 10px !important;

      &:after {
        content: '';
        display: block;
        background: url('data:image/svg+xml,<svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 4.66732L13.8333 10.5007L8 16.334" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>');
        width: 20px;
        height: 20px;
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
      }

    }
  }

  .card--watch {
    display: none
  }
}

@media only screen and (max-width: 1024px) {
  .visible-desktop {
    display: none !important;
  }

  .stories-card {
    .card {
      background-size: 100% !important;
    }
  }

  .stories--story-video--buttons {
    justify-self: left !important;
  }

  .card.card--extended {
    background-size: cover !important;

    .card--video-content {
      iframe.video-frame {
        width: 100% !important;
        height: 220px !important;
      }
    }
  }

  .stories-card-mobile {
    max-width: 430px;
    gap: 0;

    .card:not(.card--extended) {
      height: 400px;
      /*margin: -40px -20px 0 -20px;*/
      margin: -40px 0 0 0;

      .bg-image-box {
        width: 246px;
        height: 165px;
        background-size: contain;
        background-position: center bottom 0;
        z-index: 9;
        background-image: var(--bg-img-mobile);
        background-repeat: no-repeat;
        position: absolute;
        bottom: 4px;
        right: 0;
      }

      .shape-wrap {
        max-width: 100%;
        height: 400px;
        position: absolute;
        left: 0;
        top: 0;
        aspect-ratio: 390 / 353;

        /*height: auto;*/
        svg {
          width: 100%;
          height: 100%;
          display: block;
        }
      }

      .card--content {
        position: absolute;
        padding-right: 45px;

        .card--title {
          padding-right: 100px;
          font-size: 20px;
          line-height: 22px;
        }

        /*.card--overview {
          font-size:15px;
          font-weight: 200;
          color: var(--color-light-gray-content);
        }*/
      }

      &:first-child {
        /*margin: 0px -20px 0 -20px;*/
        margin: 0;
      }

      .card--watch {
        font-size: 16px;
      }
    }
  }

  .stories-card-mobile>.card:not(.card--extended):nth-child(even) {
    .shape-wrap {
      svg path {
        fill: #FBF9F6 !important;
      }
    }
  }

  .f-s-normal.mob-dis-block {
    display: block;
  }
}

/* Libtayo consumer patient stories card css end */

.f-s-normal {
  font-style: normal !important;
}

.tbwa-p-cscc__patient-stories--intro-desc {
  color: #080808;
  font-size: 18px;
  font-weight: 400;
  line-height: 24px;
}

@media only screen and (max-width: 440px) {
  .stories--story-content-h1 {
    padding-bottom: 20px !important;
  }
}