/* transcript video pages CSS here */


#tess-container {
  max-width: 1120px;
  margin: 0 auto;
  padding-inline: 20px;
  padding-top: 150px;
}

#tess-container .cmp-youtubevideo__thumbnail {
  height: auto;
}

#tess-container .cmp-youtubevideo__player, #tess-container .cmp-youtubevideo__content {
  padding: 0 !important;
}

#bonnie-video-transcript ul.cmp-list-dropdown--list li:nth-child(2) span.cmp-list-dropdown__text, #tess-video-transcript ul.cmp-list-dropdown--list li:nth-child(2) span.cmp-list-dropdown__text {
  color: #333333;
}

#tess-video-transcript .cmp-youtubevideo__holder, #bonnie-video-transcript .cmp-youtubevideo__holder {
  background-size: contain !important;
}

#bonnie-video-transcript p.banner-pdufa-id, #tess-video-transcript p.banner-pdufa-id {
  display: none !important;
}

div#tess-bonnie-content {
    padding-top: 32px !important;
    padding-bottom: 32px!important;
}

#tess-bonnie-content p {
  color: #333;
  font-family: 'Roboto', sans-serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 28px;
  letter-spacing: 0.4px;
  margin-bottom: 20px;
}

#tess-bonnie-content .para-label {
    font-weight: 700;
}

#tess-container .patient-story-wrapper {
  padding: 32px 0 30px 0;
}

#tess-container h1 {
  color: #333;
  font-family: "Passion One", sans-serif;
  font-size: 48px;
  font-weight: 400;
  line-height: 100%;
  text-transform: uppercase;
  margin-top: 110px !important;
  margin-bottom: 32px;
  padding-left: 0;
}

#tess-bonnie-content p:last-child {
  margin-bottom: 0;
}

/*saphnelo-stories start */
#saphnelo-stories #saphnelo-stories-three-cards {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 20px;
}

#saphnelo-stories #saphnelo-stories-three-cards .ghost {
  display: none;
}

#saphnelo-stories #saphnelo-stories-three-cards > div {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: wrap;
}

#saphnelo-stories #saphnelo-stories-three-cards a.play-button::after {
    float: right;
}

#saphnelo-stories p.game-changer sub {
  font: normal normal normal 60px / 45px Passion One;
}

#saphnelo-stories .stories-cards:has(.card__two), #saphnelo-stories .stories-cards:has(.card__four) {
  margin-left: unset;
}

#saphnelo-stories .cards-details:has(.card__one), #saphnelo-stories .cards-details:has(.card__three) {
  margin-right: unset;
}

#saphnelo-stories #saphnelo-stories-three-cards > .aem-Grid {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

#saphnelo-stories #saphnelo-stories-three-cards .cards-details {
  margin-bottom: 0;
}

#saphnelo-stories #saphnelo-stories-three-cards h2.dark-title {
  color: #333;
  text-align: center;
  font-family: "Passion One", sans-serif;
  font-size: 36px;
  font-style: normal;
  font-weight: 400;
  line-height: 36px;
  text-transform: capitalize;
  padding: 0;
  margin-bottom: 8px;
}

#saphnelo-stories #saphnelo-stories-three-cards .stories-video-cards {
  padding: 32px 16px 32px 16px;
}

#saphnelo-stories .stories-video-cards a img {
  padding: 0;
}

#saphnelo-stories .stories-video-cards a.transcript {
  color: #009FB8;
  text-align: right;
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px;
  text-decoration-line: underline;
  text-underline-position: from-font;
}

#saphnelo-stories .stories-video-cards p.patient-talk {
  padding: 0 20px;
  margin-top: 8px;
  margin-bottom: 16px;
  color: #333;
  text-align: center;
  font-family: 'Roboto', sans-serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 28px;
  letter-spacing: 0.4px;
  margin-inline: auto;
}

#saphnelo-stories .stories-video-cards p.game-changer {
  color: #333;
  text-align: center;
  font-family: "Passion One", sans-serif;
  font-size: 28px;
  font-style: normal;
  font-weight: 400;
  line-height: 36px;
  padding-top: 3px;
  padding-left: 0px;
  margin-bottom: 37px;
  margin-inline: auto;
}

#saphnelo-stories span.comma-icon {
  padding-left: 0;
}

#saphnelo-stories span.text-right {
  text-align: right;
  display: inherit;
  padding-top: 2px;
}

#saphnelo-stories .stories-video-cards a.play-button {
  margin-left: 0;
  display: inline-block;
  width: 100%;
  line-height: 22px;
  padding: 20px;
  padding-right: 10px;
  text-transform: uppercase;
}

#saphnelo-stories p.game-changer sub {
  display: block;
  margin-top: 0%;
  color: #8D9C21;
  margin-left: 0 !important;
  text-align: right;
}

#saphnelo-stories .stories-cards:has(.card__one) .game-changer {
  max-width: 88%;
}

#saphnelo-stories .stories-cards:has(.card__two) .game-changer {
  width: 100%;
}

#saphnelo-stories .stories-cards:has(.card__four) .game-changer {
  max-width: 95%;
}

#saphnelo-stories .stories-cards:has(.card__five) .game-changer {
  padding-left: 13px;
}

#saphnelo-stories .stories-cards:has(.card__one) .game-changer sub {
  margin-right: -6%;
}

#saphnelo-stories .stories-cards:has(.card__two) .game-changer sub {
  margin-right: 0%;
}

#saphnelo-stories .stories-cards:has(.card__three) .game-changer sub {
  margin-right: -14%;
}

#saphnelo-stories .stories-cards:has(.card__four) .game-changer sub {
  margin-right: -3%;
}

#saphnelo-stories .stories-cards:has(.card__six) .game-changer sub {
  margin-right: -14%;
}

#saphnelo-stories .stories-cards:has(.card__five) .game-changer {
  max-width: 100%;
}

#saphnelo-stories .stories-cards:has(.card__five) .game-changer sub.modify {
  margin-top: 1% !important;
}

#saphnelo-stories .stories-cards:has(.card__three) .patient-talk {
  margin-top: 29px;
  padding: 0 3px;
}

#saphnelo-stories .stories-cards:has(.card__four) .patient-talk {
  max-width: 90%;
  padding: 0;
  margin-top: 28px;
}

#saphnelo-stories .stories-cards:has(.card__five) .patient-talk {
  max-width: 100%;
  padding: 0;
  margin-top: 28px;
}

#saphnelo-stories .stories-cards:has(.card__six) .patient-talk {
  max-width: 100%;
  padding: 0;
  margin-top: 28px;
}

#saphnelo-stories #saphnelo-stories-three-cards .cards-details {
  background: #f1f1f1;
  border: none;
}

#saphnelo-stories.us-111533-updt a.play-button::after {
  content: '';
  background: url(/content/dam/intelligentcontent/brands/saphnelo/us/en/images/saphnelo-stories/desktop/carrot-right.svg);
  width: 20px;
  height: 20px;
  background-repeat: no-repeat;
}


/*saphnelo-stories end*/


@media only screen and (min-width: 992px) {
  .may-banner #tess-container {
  padding-top: 150px;   
}

#text-b8c889333e > div > div > div.semi-collon-1.semi-right{
            height: 0;
        padding-top: 12px;
}
#community .exit-ramp-modal button.modal__close {
        position: absolute !important;
    top: 151px !important;
    left: 70px !important;
    background: transparent !important;
}
#community .exit-ramp-modal .modal-box{
        margin-top: 151px !important;
    background: unset !important;
}

.top-banner.may-banner #tess-container {
  padding-top: 224px;   
}
#tess-container h1{
    margin-top:30px !important;
}

#about-saphnelo #text-128c6a8854 > div > div > div > p.second-line > a:after{
    content: "";
    width: 1px;
    height: 17px;
    opacity: 1;
    background-color: #D5D5D5;
    display: inline-flex;
    margin-left: 23px;
    margin-right: 23px;
    font-size: 25px;
    height: 52px;
    vertical-align: middle;
}
#about-saphnelo .ddgbladecontainer img.ddgimage{width:301px;height:238px;}    
  div#footer-container {
    padding: 30px 20px 24px 20px;
  }

  #home-page div#home-resources-right-cont {
    margin-top: -10px;
  }

  body#home-page div#home-resources-title h2 {
    padding-bottom: 12px;
  }

  #saphnelo-stories #saphnelo-stories-three-cards > .aem-Grid > .text {
    flex: 0 0 33%;
    max-width: calc(30%);
    box-sizing: border-box;
    height: 100%;
  }

  #saphnelo-stories #saphnelo-stories-three-cards {
    padding: 0 7.7px;
  }

  #saphnelo-stories .stories-cards {
    margin-right: 16px;
    margin-bottom: 16px;
    height: 100%;
  }

  #saphnelo-stories #saphnelo-stories-three-cards > div {
    gap: 0 !important;
  }

  #saphnelo-stories .stories-cards:has(.card__three) .game-changer sub {
    margin-right: -11%;
  }

  #saphnelo-stories .stories-cards:has(.card__six) .game-changer sub {
    margin-right: -11%;
  }

  #saphnelo-stories .stories-cards:has(.card__three) .game-changer {
    width: 82%;
  }

  #saphnelo-stories .stories-cards:has(.card__six) .game-changer {
    max-width: 82%;
    margin-bottom: 50px;
  }

  #saphnelo-stories .stories-cards:has(.card__five) .game-changer {
    margin-bottom: 50px;
  }

  #saphnelo-stories .stories-cards:has(.card__five) .patient-talk,
#saphnelo-stories .stories-cards:has(.card__six) .patient-talk {
    margin-bottom: 30.12px;
  }

  #image-7c4c2eb306 > a > img {
    width: 184px;
    height: 235px;
    box-shadow: #00000073 0 6px 12px;
  }

  #image-742645d2d2 > a > img {
    width: 162px;
    height: 243px;
    box-shadow: #00000073 0 6px 12px;
  }

  #image-b7e04ef711 > a > img {
    width: 166px;
    height: 243px;
    box-shadow: #00000073 0 6px 12px;
  }

  br.moo {
    display: contents;
  }

  #about-saphnelo div#brie-container {
    padding-left: 87px;
    padding-right: 87px;
    max-width: 1440px;
  }

  #saphnelo-stories.us-111533-updt a.play-button::after {
    float: right;
    clear: both;
  }

  #saphnelo-stories.us-111533-updt p.game-changer sub {
    font: normal normal normal 70px / 45px Passion One;
  }

  #saphnelo-stories.us-111533-updt span.comma-icon {
    font: normal normal normal 70px / 60px Passion One;
  }
}
/*desktop css ends */

/*28-10-2026 start*/
#about-saphnelo .briebutton {
  padding-top: 24px;
}

#about-saphnelo p.body-copy {
  padding-bottom: 32px;
}

#about-saphnelo .exploring .global-cta-btn {
  min-width: 194px;
  position: relative;
}

#about-saphnelo .exploring .global-cta-btn:after {
  position: absolute;
  right: 18px;
}

#about-saphnelo #column-width {
  padding: unset;
}
body#saphnelo-stories #column-width {
    padding: unset;
}
#saphnelo-stories .video-wid-img p {
    font-weight: 600;
}
#about-saphnelo #WHO-IS-SAPHNELO-FOR  .wsthreecardcontainer {
    margin-top: 85px;
}
#about-saphnelo .ddgbladecontainer .buttonsection {
    padding-top: unset;
}
@media only screen and (min-width: 991px) and (max-width: 1400px) {
  #about-saphnelo .firstdivco p, #about-saphnelo .seconddivco p, #about-saphnelo .thirddivco p {
    height: auto;
  }
}
@media only screen and (min-width: 991px) and (max-width: 1160px) {
 #about-saphnelo .exploring .self-inject {
    margin-left: unset;
    display: block;
    margin-top: 18px;
}

#about-saphnelo .exploring {
    height: auto;
}
#saphnelo-stories .exploring.explore-two .global-cta-btn {
    display: block;
    margin-left: unset;
    margin-bottom: 15px;
}

body#saphnelo-stories .exploring {
    height: auto;
}
}

/*28-10-2026 end*/

/* media query start here */
@media only screen and (max-width: 991.5px) {
    /*28-10-2026 start*/
  #footer-column2-navigation > ul > li:nth-child(9) span {
    white-space: normal;
  }
  .card3-icon-container .card-text-cont .bbbr {
        padding-top: 31px !important;
    }
  #text-b483b7b74b > div > div.experts-recomments > div > div:nth-child(2) > p {
    padding-right: 22px;
    margin-left: -31px;
}
  body.may-banner #tess-container {
  padding-top: 100px;   
}
body.top-banner.may-banner #tess-container {
      padding-top: 182px;  
}
 body #tess-container h1{
    margin-top:30px !important;
}
  #about-saphnelo .btone.new a {
    align-items: center;
  }

  #about-saphnelo .briebutton img {
    padding-left: 10px;
  }

  #about-saphnelo .not-patient-note p {
    text-shadow: 0 0 2px rgba(0, 0, 0, 0.50);
    font-size:14px;
  }
   #about-saphnelo .not-patient-note {
        top: -45px;
        padding: 20px 15px;
    }

  #about-saphnelo .imthree {
    padding-bottom: 17px;
    padding-top: 30px;
  }

  #about-saphnelo .exploring-icon {
    height: 80px;
  }

  #about-saphnelo .briesection .about-saph-h2 {
    font-size: 36px;
    line-height: 36px;
  }

  #about-saphnelo .exploring.explore-two .exploring-icon {
    height: 80px;
    background-size: contain;
    background-repeat: no-repeat;
  }
    body#saphnelo-stories .exploring-icon {
    height: 80px;
    background-size: contain !important;
}
body#saphnelo-stories .exploring{padding-bottom:35px;}body#saphnelo-stories .exploring-icon {
    height: 80px;
    background-size: contain !important;
}
body#saphnelo-stories .exploring{padding-bottom:35px;}
#saphnelo-stories .women-image a div{text-align:center;}
#saphnelo-stories .not-patient-note p{font-size:14px;text-shadow: 0 0 2px rgba(0, 0, 0, 0.50);}
#saphnelo-stories .not-patient-note {
        top: -45px;
        padding: 20px 15px;
    }
    /*28-10-2026 end*/
  #tess-container {
    padding-inline: 16px;
  }

  #footer-third-column-text > p.update-us-109295 > br:nth-child(3) {
    display: contents;
  }

  #image-7c4c2eb306 > a > img {
    width: 170px;
    height: 212px;
    box-shadow: #0000004D 3px 3px 6px;
    border: #c3c1c129 solid 0.5px;
  }

  #image-742645d2d2 > a > img {
    width: 162px;
    height: 243px;
    box-shadow: #00000073 0 6px 12px;
  }

  #image-b7e04ef711 > a > img {
    width: 166px;
    height: 252px;
    box-shadow: #00000073 0 6px 12px;
  }

  #tess-container h1 {
    font-size: 36px;
  }

  #tess-container .patient-story-wrapper {
    padding: 16px 0 30px 0;
  }

  #tess-bonnie-content p {
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0.32px;
    margin-bottom: 15px;
  }

  #tess-container h1 {
    margin-top: 55px !important;
    margin-bottom: 18px;
  }
  
  /*saphnelo-stories start*/
  
  #saphnelo-stories .stories-video-cards p.patient-talk {
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0.32px;
  }

  #saphnelo-stories .stories-video-cards p.game-changer {
    margin-bottom: 0;
    font-size: 24px;
    line-height: 32px;
    height: 100px;
  }

  #saphnelo-stories .stories-video-cards p.game-changer sub {
    margin-top: 15px !important;
  }

  #saphnelo-stories .stories-cards:has(.card__five) .game-changer sub.modify {
    margin-top: 20px !important;
  }

  #saphnelo-stories #saphnelo-stories-three-cards > .aem-Grid {
    gap: 24px;
  }

  #saphnelo-stories .lupus-control {
    padding: 11px 28px 8px 28px;
  }

  #saphnelo-stories .real-saphnelo-stories .stories-footnote {
    font-size: 14px;
    line-height: 24px;
    letter-spacing: 0.28px;
  }

  #saphnelo-stories p.game-changer sub {
    font: normal normal normal 70px / 20px Passion One !important;
  }

  #saphnelo-stories span.comma-icon {
    width: 29px;
    height: 20px;
    font: normal normal normal 75px / 75px Passion One;
  }

  #saphnelo-stories .stories-video-cards a.play-button {
    font-size: 22px;
    line-height: 22px;
  }

  #saphnelo-stories .game-changer {
    padding-top: 10px;
  }

  #saphnelo-stories .stories-video-cards p.patient-talk {
    padding: 0 !important;
    margin-bottom: 5px;
  }

  #saphnelo-stories .stories-cards:has(.card__six) .game-changer {
    max-width: 100%;
  }

  #saphnelo-stories .stories-cards:has(.card__six) .game-changer sub {
    margin-right: 0;
  }

  #saphnelo-stories .stories-cards:has(.card__five) .game-changer {
    height: 105px;
  }

  #saphnelo-stories .stories-video-cards p.game-changer {
    padding-top: 10px !important;
  }

  #saphnelo-stories .stories-cards:has(.card__four) .patient-talk {
    max-width: 100%;
  }

  #saphnelo-stories .stories-cards:has(.card__three) .game-changer {
    width: 83%;
  }

  #saphnelo-stories .stories-cards:has(.card__three) .game-changer sub {
    margin-right: -11%;
  }

  #saphnelo-stories #saphnelo-stories-three-cards {
    padding: 0 16px;
  }

  #saphnelo-stories.us-111533-updt a.play-button::after {
    margin-right: 7%;
  }
  #text-b8c889333e > div > div > div.semi-collon-1.semi-right{
              padding-top: 20px;
  }

#footer-third-column-text > p.foot-assetids-update > br:nth-child(2),
#footer-third-column-text > p.foot-assetids-update > br:nth-child(3),
#footer-third-column-text > p.foot-assetids-updatebt > br:nth-child(3) {
    display: none;
}

#footer-col-3-container #footer-third-column-text {
    padding-right: 6px !important;
}
  /*saphnelo-stories end*/
}
/*mobile css ends */

/* additional media query for compatibility */
@media only screen and (min-width: 993px) and (max-width: 1300px) {
  #saphnelo-stories #saphnelo-stories-three-cards > .aem-Grid > .text {
    max-width: calc(42%);
    box-sizing: border-box;
    height: 100%;
    flex-grow: 1;
    flex: none;
  }

  #footer-third-column-text > p.update-us-109295 > br.moo,#footer-third-column-text > p.update-us-109295 > br:nth-child(3) {
    display: none;
  }
}

@media only screen and (min-width: 993px) and (max-width: 1200px) {
  #home-page #home-page-parent-container > div:nth-child(5) {
    height: 567px;
  }
}

@media(max-width:380px){
  #saphnelo-stories .stories-cards:has(.card__five) .game-changer{
    height:auto;
  }
  
  #saphnelo-stories .stories-cards:has(.card__five) .game-changer sub.modify {
      margin-top:-7px;
  }
  
  #saphnelo-stories .stories-video-cards p.game-changer {
    margin-bottom: 0;
    font-size: 20px;
    line-height: 25px;
    height: 100px;
  }
    
  #saphnelo-stories .stories-video-cards a.play-button {
    font-size: 20px;
    line-height: 17px;
    padding-right: 30px;
  }
}

@supports (-webkit-touch-callout: none) {
    div#main-nav-container .cmp-list-dropdown--portrait.cmp-list-dropdown--vertical .open+.cmp-list-dropdown--list, div#main-nav-container .cmp-list-dropdown--portrait.cmp-list-dropdown--vertical .open .cmp-list-dropdown__dropdown-menu{
                margin-top: 44px;
    }
}

@media print {
    .header-nav,
    .pageinnercontainerf {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        flex-wrap: nowrap !important;
    }

    .header-menu,
    .page-nav-links {
        display: flex !important;
        align-items: center !important;
        gap: 20px !important;
        flex-wrap: nowrap !important;
        white-space: nowrap !important;
    }

    .header-menu a,
    .page-nav-links a {
        white-space: nowrap !important;
    }

    .header-cta {
        flex-shrink: 0 !important;
    }

    .header-logo {
        flex-shrink: 0 !important;
    }
}
@media print {
    .container {
        width: 100% !important;
        max-width: none !important;
    }
}
@media print {

  #main-nav-container {
    height: auto !important;
    max-width: 100% !important;
  }

  #main-nav-container > div {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
  }

  #main-nav-container .cmp-list-dropdown--list {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: nowrap !important;
    gap: 15px !important;
    width: auto !important;
  }

  #main-nav-container .cmp-list-dropdown__item {
    margin-right: 15px !important;
    white-space: nowrap !important;
  }

  #main-nav-container .cmp-list-dropdown__item a {
    white-space: nowrap !important;
    font-size: 14px !important;
  }

  #main-nav-container div#saphnelo-logo-id img {
    width: 120px !important;
    height: auto !important;
  }

  #main-nav-container li.cmp-list-dropdown__item.cmp-list-dropdown__item-4 {
    display: inline-flex !important;
    flex-shrink: 0 !important;
  }
  #home-resources-bottom-cont-1 img,#home-resources-bottom-cont-2 img, #home-resources-bottom-cont-3 img{
    width: 200px;
    height: 236px;
    margin-bottom: 30px;
    margin-top:30px;
  }
  #home-page .hero-image-copy-sub{
      font-size: 30px !important;
    line-height: 25px !important;
    max-width: 60% !important;
  }
  #home-page .herobannerdesktopcontainer p.h-footnote{
      margin: 0;
    max-width: 35%;
    width: 80%;
  }
  #main-nav-container .cmp-list-dropdown--list{
          padding-left: 0;
  }
  #main-nav-container li.cmp-list-dropdown__item.cmp-list-dropdown__item-4{
          margin-left: -20px;
  }
  #main-nav-container li.cmp-list-dropdown__item.cmp-list-dropdown__item-4 a{
          padding-inline: 20px;
  }
}
.exit-ramp-cancel.close-exit-ramp:hover, .exit-ramp-continue.skip-exit-ramp:hover{
    background: #027d90 0% 0% no-repeat padding-box !important;
    color: #fff !important;
    text-decoration: none !important;
}


/*Updated Footer IDs*/
#home-page .foot-assetids,
#living-with-lupus .foot-assetids,
#about-saphnelo .foot-assetids,
#saphnelo-stories .foot-assetids,
#safety-page .foot-assetids,
#starting-saphnelo .foot-assetids,
#injection .foot-assetids,
#support-affordability .foot-assetids,
#support-and-resource .foot-assetids,
#faqs .foot-assetids,
#bonnie-video-transcript .foot-assetids,
#tess-video-transcript .foot-assetids,
#digital .foot-assetids,
#know_before .foot-assetids,
#prepare .foot-assetids,
#inject .foot-assetids,
#dispose .foot-assetids {
  display: none;
}

#footer-col-3-container {
  top: 25px !important;
}

#home-page #footer-third-column-text .foot-assetids-update,
#living-with-lupus #footer-third-column-text .foot-assetids-update,
#about-saphnelo #footer-third-column-text .foot-assetids-update,
#saphnelo-stories #footer-third-column-text .foot-assetids-update,
#safety-page #footer-third-column-text .foot-assetids-update,
#starting-saphnelo #footer-third-column-text .foot-assetids-update,
#injection #footer-third-column-text .foot-assetids-update,
#support-affordability #footer-third-column-text .foot-assetids-update,
#support-and-resource #footer-third-column-text .foot-assetids-update,
#faqs #footer-third-column-text .foot-assetids-update,
#bonnie-video-transcript #footer-third-column-text .foot-assetids-updatebt,
#tess-video-transcript #footer-third-column-text .foot-assetids-updatebt {
  display: block!important;
}