/* For Newly Diagnosed MCL CSS */

#newly-diagnosed-mcl sup {
    font-size: 65%;
    top: 1px;
}

#newly-diagnosed-mcl .cmp-text p:not(:last-child), #newly-diagnosed-mcl .cmp-text {
    margin-bottom: 0;
}

/*#newly-diagnosed-mcl .mcl-title-sub p, #newly-diagnosed-mcl .cmp-text p {*/
/*    font-size: 14px;*/
/*    line-height: 18px;*/
/*}*/

/*#newly-diagnosed-mcl .wrapper {*/
/*    padding: 0 22px 0 26px;*/
/*}*/

#newly-diagnosed-mcl .mcl-title-sub p {
    width: 99%;
}
#newly-diagnosed-mcl .extra-class-foot{
    padding: 5px 0px 10px 4px;
}

/* VS Section CSS - STARTS */

.graph-vs-left, .graph-vs-right {
    /*max-width: 280px;*/
        max-width: 300px;
}

.graph-vs-left {
    color: var(--mcl-darkteal);
}

.graph-vs-right {
    color: var(--common-placebo);
}

.graph-vs-number p:first-child {
    font-size: 85px !important;
    line-height: 22.67px !important;
    font-weight: 800 !important;
    height: 64px;
    display: flex;
    align-items: center;
    margin-bottom: 8px;
    letter-spacing: -3px;
}

.graph-vs-number p:last-child {
    font-size: 21px !important;
    line-height: 22.67px !important;
    font-weight: 800 !important;
}

.graph-vs-icon {
    height: 36px;
    width: 36px;
    background-color: #000000;
    color: #FFFFFF;
    border-radius: 50%;
    transform: translateY(20px);
}

.graph-vs-icon p {
    font-weight: 500 !important;
    font-size: 14px !important;
    line-height: 13px !important;
    text-align: center;
}

.graph-vs-text {
    max-width: 230px;
    /*transform: translateX(30px);*/
    transform: translateX(90px);
}

.graph-vs-text p:first-child {
    font-size: 21px !important;
    font-weight: 900 !important;
}


/* VS Section CSS - ENDS */


/* Infographic CSS - STARTS */

.graph-percentage {
    overflow: hidden;
}

.graph-percentage-left, .graph-percentage-right {
    width: 465px;
    max-width: 100vw;
}

.graph-box {
    height: 70px;
}

.graph-percentage-left .graph-box {
    background-color: #C2E1E5;
}

.graph-percentage-right .graph-box {
    background-color: #E2E2E2;
}

.graph-percentage-left {
    color: var(--mcl-darkteal);
}

.graph-percentage-right {
    color: #696A6A;
}

.graph-box p:first-child, .graph-image-number p:first-child {
    font-size: 48.17px !important;
    line-height: 10.84px !important;
    min-width: 78px;
    display: flex;
}

.graph-image-number p:first-child {
    height: 26px;
    margin-top: 10px;
    transform: translateX(10px);
}

.graph-box p:last-child {
    font-size: 15.72px !important;
    line-height: 20.22px !important;
}

#newly-diagnosed-mcl .graph-box p:first-child sup {
    font-size: 18.07px;
    line-height: 10.84px;
    transform: translateY(-14px);
}

#newly-diagnosed-mcl .graph-image-number p:first-child sup {
    font-size: 18.07px;
    line-height: 10.84px;
    transform: translateY(-10px);
}

.graph-percentage-left .graph-image {
    background-image: url('/content/dam/intelligentcontent/brands/dtc-calquence/us/en/images/mcl/newly-diagnosed/infographic-green-circle-with-lines-mbl.png');
    height: 255px;
    transform: translate(0px, -40px);
    background-repeat: no-repeat;
}

.graph-percentage-right .graph-image {
    background-image: url('/content/dam/intelligentcontent/brands/dtc-calquence/us/en/images/mcl/newly-diagnosed/infographic-grey-circle-with-lines-mbl.png');
    height: 240px;
    transform: translate(0px, -20px);
    background-repeat: no-repeat;
}

.graph-percentage-left .graph-image-text {
    padding-top: 55px;
    padding-left: 160px;
}

.graph-percentage-right .graph-image-text {
    padding-top: 37px;
    padding-left: 160px;
}

.graph-percentage-left .graph-image-text > div,
.graph-percentage-right .graph-image-text > div {
    padding-right: 4px;
}

.graph-image-number p:last-child {
    font-weight: 800 !important;
    font-size: 9.39px !important;
    line-height: 10.84px !important;
}

.graph-image-info>p, .graph-image-info-2>p {
    font-weight: 800 !important;
    font-size: 15.72px !important;
    line-height: 20.22px !important;
    margin-top: -4px;
}

.graph-percentage-left .graph-image-info-2 {
    color: #649299 !important;
}

.graph-percentage-right .graph-image-info-2 {
    color: #989898 !important;
}

/* Infographic CSS - ENDS */

.footnotes li {
    font-size: 12px !important;
    line-height: 14px !important;
    text-indent: -4px;
    padding-left: 4px;
}

#newly-diagnosed-mcl .extra-class-foot {
    font-size: 12px !important;
    line-height: 14px !important;
}

.cmp-text .footnotes li {
    display: block;
}

.cmp-text .footnotes li:not(:last-of-type) {
    margin-bottom: 4px;
}

.cmp-text .footnotes li::before {
    content: "";
    margin: 0;
    padding: 0;
    width: 0;
}


/* Desktop CSS - STARTS */

@media screen and (min-width: 992px) {
    #newly-diagnosed-mcl .extra-class-foot{
    padding: 5px 0px 18px 18px;
    }
    .laptop_w-full {
        width: 100%;
    }

    .graph-percentage-container {
        max-height: 320px;
    }

    .graph-percentage-left .graph-image {
        background-image: url('/content/dam/intelligentcontent/brands/dtc-calquence/us/en/images/mcl/newly-diagnosed/infographic-green-circle-with-lines.png');
        height: 375px;
        width: 505px;
        transform: translate(-40px, -60px);
    }

    .graph-percentage-right .graph-image {
        background-image: url('/content/dam/intelligentcontent/brands/dtc-calquence/us/en/images/mcl/newly-diagnosed/infographic-grey-circle-with-lines.png');
        height: 325px;
        width: 485px;
        transform: translate(-20px, -36px);
    }

    .graph-percentage-left .graph-image-text {
        padding-top: 100px;
        padding-left: 58%;
    }

    .graph-percentage-right .graph-image-text {
        padding-top: 70px;
        padding-left: 54%;
    }
}

/* Desktop CSS - ENDS */

@media (min-width: 450px) and (max-width: 991px) {
    .graph-percentage-left .graph-image-text {
        padding-top: 15%;
    }

    .graph-percentage-right .graph-image-text {
        padding-top: 12%;
    }
}

@media screen and (max-width: 991px) { 
    .cmp-text .footnotes li:not(:last-of-type) {
        margin-bottom: 2px;
    }
    
    
    
    .graph-vs-left .graph-vs-number {
        transform: translateX(-8px);
    }
    
    .graph-vs-right .graph-vs-number {
        transform: translateX(-20px);
    }
    
    
    .graph-vs-left .graph-vs-number p:last-child, .graph-vs-right .graph-vs-number p:last-child {
        transform: translateY(4px);
    }
    
    .graph-vs-text {
        transform: translateX(14px);
    }
    
    
    
}

#newly-diagnosed-mcl .newly-diagnosed-extra-mcl{
  padding-bottom: 0px;
}

#newly-diagnosed-mcl .new-banner--footnote-white p:first-child {
    padding-right: 95px;
}

#newly-diagnosed-mcl .new-banner--footnote-white {
    padding-left: 0;
    padding-right: 240px;
}

@media (max-width: 991px) {
    #newly-diagnosed-mcl .graph-percentage-left .graph-image-text > div,
    #newly-diagnosed-mcl .graph-percentage-right .graph-image-text > div {
        max-width: 260px;
    }
    
    #newly-diagnosed-mcl .new-banner--footnote-white p:first-child {
        padding-right: 37px;
    }
    
    #newly-diagnosed-mcl .new-banner--footnote-white {
        padding-left: 0;
        padding-right: 70px;
    }
}

@media (min-width: 415px) and (max-width: 450px) {
    #newly-diagnosed-mcl .graph-percentage-left .graph-image-text {
        padding-top: 65px;
    }
    #newly-diagnosed-mcl .graph-percentage-right .graph-image-text {
        padding-top: 52px;
    }
}


@media (max-width: 389px) {
    #newly-diagnosed-mcl .graph-image-info>p, #newly-diagnosed-mcl .graph-image-info-2>p {
        font-size: 11px !important;
        line-height: 14px !important;
    }
}

@media (min-width: 327px) and (max-width: 389px) {
    #newly-diagnosed-mcl .graph-percentage-left .graph-image-text {
        padding-top: 72px;
    }
    
    #newly-diagnosed-mcl .graph-percentage-right .graph-image-text {
        padding-top: 55px;
    }
}


/* Batch-2 Updates */

#newly-diagnosed-mcl .percentage-detail {
    font-size: 9.39px !important;
    line-height: 10.84px !important;
    position: relative;
    top: 20px;
    right: 9px;
}

#newly-diagnosed-mcl .white-box {
    background-color: #FFFFFF !important;
}


#newly-diagnosed-mcl .graph-percentage-left>div:last-child {
    color: #649299;
}

#newly-diagnosed-mcl .graph-percentage-right>div:last-child {
    color: #989898;
}



/*New CSS*/

@media (max-width: 991px) {

    #newly-diagnosed-mcl .new-banner--footnote{
          position: relative;
          top: -8px;
    }
     #newly-diagnosed-mcl .new-banner--footnote p{
          font-size: 10px;
          line-height: 7px;
     }
}