/* CLL / SAFETY / ELEVATE-TN / AE - CSS */
/* /content/dam/intelligentcontent/brands/calquencehcp/us/en/css/cll-safety-elevate-tn.css */
/* id: cll-safety-elevate-tn-ae */



#cll-safety-elevate-tn-ae .orange-bullet--list li,
#cll-safety-elevate-tn-dr .orange-bullet--list li {
    text-indent: -5px;
}

#cll-safety-elevate-tn-ae .echo-table .row-bg-orange {
    background-color: #A73F11;
}

#cll-safety-elevate-tn-ae .echo-table .row-bg-black {
    background-color: #DC4405;
}

#cll-safety-elevate-tn-ae .echo-table tbody>tr>td:nth-child(2) {
    background-color: #A73F110D !important;
}
#cll-safety-elevate-tn-ae .echo-table tbody>tr>td:nth-child(3) {
    background-color: #A73F110D !important;
}
#cll-safety-elevate-tn-ae .echo-table tbody>tr>td:nth-child(4) {
    background-color: #F15D2212 !important;
}
#cll-safety-elevate-tn-ae .echo-table tbody>tr>td:nth-child(5) {
    background-color: #F15D2212 !important;
}

/* IMG to HTML */
.elevate-tn--chart-left {
    width: 210px;
}

.chart-left--txt {
    font-size: 16px;
    line-height: 22px;
    text-align: center;
    color: #58595B;
}

.orange-big--number {
    font-weight: 800;
    font-size: 64px;
    line-height: 100%;
    color: #DA4827;
}

.orange-big--number > sup {
    font-size: 28.8px;
}

.elevate-tn--chart-right {
    background: url('/content/dam/intelligentcontent/brands/calquencehcp/us/en/images/cll-safety-elevate-tn/mb_ELEVATE-TN_Atr.svg') no-repeat center;
    width: 270px;
    height: 770px;
    position: relative;
    margin-left: 85px;
}

.elevate-tn--chart-hyp .elevate-tn--chart-right {
    background: url('/content/dam/intelligentcontent/brands/calquencehcp/us/en/images/cll-safety-elevate-tn/mb_ELEVATE-TN_Hyp.svg') no-repeat center;
    width: 270px;
    height: 770px;
    position: relative;
    margin-left: 85px;
}

.elevate-tn--chart-maj .elevate-tn--chart-right {
    background: url('/content/dam/intelligentcontent/brands/calquencehcp/us/en/images/cll-safety-elevate-tn/mb_ELEVATE-TN_Maj.svg') no-repeat center;
    width: 270px;
    height: 770px;
    position: relative;
    margin-left: 85px;
}

.elevate-tn--chart-right p {
    position: absolute;
    width: fit-content;
}

.y-axis {
    font-weight: 800;
    font-size: 12px;
    line-height: 100%;
    top: 4px;
    left: 74px;
}

.balloon-txt {
    font-size: 15px;
    line-height: 160%;
    color: #FFFFFF;
    text-align: center;
}

.balloon-txt > .fw-800 {
    font-size: 26px;
}

.inside-graph--txt {
    font-weight: 700;
    font-size: 18.99px;
    line-height: 100%;
    color: #FFFFFF;
}

.outside-graph--txt {
    font-weight: 700;
    font-size: 18.99px;
    line-height: 100%;
    color: #58595B;
}

.x-axis--txt {
    font-weight: 700;
    font-size: 16px;
    line-height: 100%;
    color: #58595B;
    max-width: 92px;
    text-align: left;
}

.chart-key--txt {
    font-size: 12px;
    line-height: 100%;
    color: #58595B;
}

.balloon-1 {
    top: 159px;
    left: 129px;
}

.balloon-2 {
    top: 380px;
    left: 136px;
}

.balloon-3 {
    top: 604px;
    left: 154px;
}

.inside-graph--1 {
    top: 170px;
    left: 27px;
}

.inside-graph--2 {
    top: 394px;
    left: 28px;
}

.inside-graph--3 {
    top: 615px;
    left: 43px;
}

.outside-graph--1 {
    top: 257px;
    left: 30px;
}

.outside-graph--2 {
    top: 480px;
    left: 30px;
}

.outside-graph--3 {
    top: 697px;
    left: 35px;
}

.x-axis--1 {
    top: 177px;
    left: -77px;
}

.x-axis--2 {
    top: 398px;
    left: -77px;
}

.x-axis--3 {
    top: 608px;
    left: -77px;
}

.chart-key--1 {
    bottom: -10px;
    left: 32px;
}

.chart-key--2 {
    bottom: 1px;
    left: 132px;
}

/* Hypertension */

.elevate-tn--chart-hyp .balloon-txt {
    font-size: 13px;
}

.elevate-tn--chart-hyp .balloon-txt > .fw-800 {
    font-size: 20px;
}

.elevate-tn--chart-hyp .balloon-1 {
    top: 171px;
    left: 141px;
    line-height: 140%;
}

.elevate-tn--chart-hyp .balloon-2 {
    top: 360px;
    left: 160px;
    line-height: 140%;
}

.elevate-tn--chart-hyp .balloon-3 {
    top: 545px;
    left: 184px;
    line-height: 140%;
}

.elevate-tn--chart-hyp .inside-graph--1 {
    top: 254px;
    left: 42px;
    color: #58595B;
}

.elevate-tn--chart-hyp .inside-graph--2 {
    top: 368px;
    left: 14px;
    font-size: 15.68px;
}

.elevate-tn--chart-hyp .inside-graph--3 {
    top: 553px;
    left: 26px;
    font-size: 15.68px;
}

.elevate-tn--chart-hyp .inside-graph--4 {
    top: 180px;
    left: 44px;
    font-size: 16px;
}

.elevate-tn--chart-hyp .inside-graph--5 {
    top: 367px;
    left: 65px;
    font-size: 16px;
}

.elevate-tn--chart-hyp .inside-graph--6 {
    top: 552px;
    left: 84px;
    font-size: 16px;
}

.elevate-tn--chart-hyp .x-axis--1 {
    top: 172px;
    left: -80px;
}

.elevate-tn--chart-hyp .x-axis--2 {
    top: 360px;
    left: -80px;
}

.elevate-tn--chart-hyp .x-axis--3 {
    top: 546px;
    left: -80px;
}

.elevate-tn--chart-hyp .chart-key--1 {
    bottom: 38px;
    left: 34px;
}

.elevate-tn--chart-hyp .chart-key--2 {
    bottom: 38px;
    left: 135px;
}


/* Major bleeding */

.elevate-tn--chart-maj .balloon-txt {
    font-size: 13px;
}

.elevate-tn--chart-maj .balloon-txt > .fw-800 {
    font-size: 20px;
}

.elevate-tn--chart-maj .balloon-1 {
    top: 171px;
    left: 109px;
    line-height: 140%;
}

.elevate-tn--chart-maj .balloon-2 {
    top: 360px;
    left: 122px;
    line-height: 140%;
}

.elevate-tn--chart-maj .balloon-3 {
    top: 545px;
    left: 131px;
    line-height: 140%;
}

.elevate-tn--chart-maj .inside-graph--1 {
    top: 277px;
    left: 38px;
    color: #58595B;
    font-size: 12px;
}

.elevate-tn--chart-maj .inside-graph--2 {
    top: 370px;
    left: 15px;
    font-size: 12px;
}

.elevate-tn--chart-maj .inside-graph--3 {
    top: 555px;
    left: 20px;
    font-size: 12px;
}

.elevate-tn--chart-maj .outside-graph--1 {
    top: 254px;
    left: 57px;
    font-size: 12px;
}

.elevate-tn--chart-maj .outside-graph--2 {
    top: 444px;
    left: 70px;
    font-size: 12px;
}

.elevate-tn--chart-maj .outside-graph--3 {
    top: 630px;
    left: 81px;
    font-size: 12px;
}

.elevate-tn--chart-maj .x-axis--1 {
    top: 172px;
    left: -80px;
}

.elevate-tn--chart-maj .x-axis--2 {
    top: 360px;
    left: -80px;
}

.elevate-tn--chart-maj .x-axis--3 {
    top: 546px;
    left: -80px;
}

.elevate-tn--chart-maj .chart-key--1 {
    bottom: 27px;
    left: 34px;
}

.elevate-tn--chart-maj .chart-key--2 {
    bottom: 38px;
    left: 135px;
}

@media (min-width: 992px) {
    #cll-safety-elevate-tn-dr .donut-chart img {
        min-width: 186px;
    }

    #cll-safety-elevate-tn-ae h1 {
        letter-spacing: -0.26px !important;
    }
    
    .desktop_ls-3px {
        letter-spacing: 0.3px;
    }
    
    #cll-safety-elevate-tn-ae #atrial-fibrillation img {
        margin-top: -16px;
        padding-left: 24px;
    }
    
    #cll-safety-elevate-tn-ae #hypertension img {
        margin-top: -16px;
    }
    
    #cll-safety-elevate-tn-ae #major-bleeding img {
        margin-top: -16px;
        padding-left: 24px;
        padding-right: 110px !important;
    }

    /* IMG to HTML */
    .elevate-tn--chart-left {
        top: -24px;
    }

    .elevate-tn--chart-right {
        background: url('/content/dam/intelligentcontent/brands/calquencehcp/us/en/images/cll-safety-elevate-tn/ELEVATE-TN_Atr.svg') no-repeat center;
        width: 596px;
        height: 294px;
        margin-left: 0px;
    }

    .elevate-tn--chart-hyp .elevate-tn--chart-right {
        background: url('/content/dam/intelligentcontent/brands/calquencehcp/us/en/images/cll-safety-elevate-tn/ELEVATE-TN_Hyp.svg') no-repeat center;
        width: 596px;
        height: 294px;
        margin-left: 0px;
    }

    .elevate-tn--chart-maj .elevate-tn--chart-right {
        background: url('/content/dam/intelligentcontent/brands/calquencehcp/us/en/images/cll-safety-elevate-tn/ELEVATE-TN_Maj.svg') no-repeat center;
        width: 596px;
        height: 294px;
        margin-left: 0px;
    }

    .y-axis {
        font-size: 18px;
        transform: rotate(-90deg);
        top: 112px;
        left: -70px;
    }

    .balloon-txt {
        font-size: 13px;
        line-height: 140%;
    }

    .balloon-txt > .fw-800 {
        font-size: 20px;
    }

    .chart-left--txt {
        font-size: 18px;
    }

    .inside-graph--txt {
        font-size: 16px;
    }

    .outside-graph--txt {
        font-size: 16px;
    }

    .x-axis--txt {
        font-size: 14px;
        max-width: 125px;
    }

    .balloon-1 {
        top: 83px;
        left: 101px;
        line-height: 140%;
    }

    .balloon-2 {
        left: 287px;
        top: 77px;
        line-height: 140%;
    }

    .balloon-3 {
        left: 475px;
        top: 62px;
        line-height: 140%;
    }

    .inside-graph--1 {
        top: 195px;
        left: 122px;
    }

    .inside-graph--2 {
        top: 192px;
        left: 308px;
    }

    .inside-graph--3 {
        top: 182px;
        left: 494px;
    }

    .outside-graph--1 {
        top: 199px;
        left: 194px;
    }

    .outside-graph--2 {
        top: 198px;
        left: 382px;
    }

    .outside-graph--3 {
        top: 194px;
        left: 565px;
    }

    .x-axis--1 {
        top: 234px;
        left: 74px;
    }

    .x-axis--2 {
        top: 234px;
        left: 258px;
    }

    .x-axis--3 {
        top: 234px;
        left: 444px;
    }

    .chart-key--1 {
        bottom: 0px;
        left: 259px;
    }

    .chart-key--2 {
        bottom: 11px;
        left: 369px;
    }

    /* Hypertension */

    .elevate-tn--chart-hyp .balloon-1 {
        top: 62px;
        left: 101px;
        line-height: 140%;
    }

    .elevate-tn--chart-hyp .balloon-2 {
        left: 287px;
        top: 43px;
        line-height: 140%;
    }

    .elevate-tn--chart-hyp .balloon-3 {
        left: 474px;
        top: 18px;
        line-height: 140%;
    }

    .elevate-tn--chart-hyp .inside-graph--1 {
        top: 215px;
        left: 114px;
        color: #FFFFFF;
    }

    .elevate-tn--chart-hyp .inside-graph--2 {
        top: 210px;
        left: 301px;
    }

    .elevate-tn--chart-hyp .inside-graph--3 {
        top: 204px;
        left: 494px;
    }

    .elevate-tn--chart-hyp .inside-graph--4 {
        top: 179px;
        left: 114px;
    }

    .elevate-tn--chart-hyp .inside-graph--5 {
        top: 162px;
        left: 308px;
    }

    .elevate-tn--chart-hyp .inside-graph--6 {
        top: 146px;
        left: 494px;
    }

    .elevate-tn--chart-hyp .x-axis--1 {
        top: 245px;
        left: 74px;
    }

    .elevate-tn--chart-hyp .x-axis--2 {
        top: 245px;
        left: 258px;
    }

    .elevate-tn--chart-hyp .x-axis--3 {
        top: 245px;
        left: 444px;
    }

    .elevate-tn--chart-hyp .chart-key--1 {
        bottom: 0px;
        left: 259px;
    }

    .elevate-tn--chart-hyp .chart-key--2 {
        bottom: 0px;
        left: 369px;
    }

    
    /* Major bleeding */

    .elevate-tn--chart-maj .balloon-1 {
        top: 80px;
        left: 100px;
        line-height: 140%;
    }

    .elevate-tn--chart-maj .balloon-2 {
        left: 288px;
        top: 69px;
        line-height: 140%;
    }

    .elevate-tn--chart-maj .balloon-3 {
        left: 473px;
        top: 61px;
        line-height: 140%;
    }

    .elevate-tn--chart-maj .inside-graph--1 {
        top: 204px;
        left: 117px;
        font-size: 16px;
        color: #FFFFFF;
    }

    .elevate-tn--chart-maj .inside-graph--2 {
        top: 197px;
        left: 303px;
        font-size: 16px;
    }

    .elevate-tn--chart-maj .inside-graph--3 {
        top: 191px;
        left: 489px;
        font-size: 16px;
    }

    .elevate-tn--chart-maj .outside-graph--1 {
        top: 165px;
        left: 194px;
        font-size: 16px;
    }

    .elevate-tn--chart-maj .outside-graph--2 {
        top: 151px;
        left: 382px;
        font-size: 16px;
    }

    .elevate-tn--chart-maj .outside-graph--3 {
        top: 140px;
        left: 567px;
        font-size: 16px;
    }

    .elevate-tn--chart-maj .x-axis--1 {
        top: 234px;
        left: 74px;
    }

    .elevate-tn--chart-maj .x-axis--2 {
        top: 234px;
        left: 258px;
    }

    .elevate-tn--chart-maj .x-axis--3 {
        top: 234px;
        left: 444px;
    }

    .elevate-tn--chart-maj .chart-key--1 {
        bottom: 0px;
        left: 259px;
    }

    .elevate-tn--chart-maj .chart-key--2 {
        bottom: 11px;
        left: 369px;
    }
}

/* CLL / SAFETY / ELEVATE-TN / Discontinuation Rates - CSS */
/* /content/dam/intelligentcontent/brands/calquencehcp/us/en/css/cll-safety-elevate-tn.css */
/* id: cll-safety-elevate-tn-dr */

#cll-safety-elevate-tn-dr .donut-chart img {
    min-width: 166px;
}

#cll-safety-elevate-tn-dr .donut-chart.circle-chart-1 p.circle-chart--number {
    font-size: 46.88px;
    top: 70px;
    left: 44px;
    color: #A74325;
}

#cll-safety-elevate-tn-dr .donut-chart.circle-chart-1 p.fw-700 {
    font-size: 18px;
    top: 122px;
    left: 48px;
    color: #A74325;
    font-weight: 800 !important;
}

#cll-safety-elevate-tn-dr .donut-chart.circle-chart-2 p.circle-chart--number { 
    font-size: 46.88px; 
    top: 70px;
    left: 48px;
    color: #DA4726;
}

#cll-safety-elevate-tn-dr .donut-chart.circle-chart-2 p.fw-700 { 
    font-size: 18px;
    top: 122px;
    left: 52px;
    color: #DA4726;
    font-weight: 800 !important;
}

@media (max-width: 991px) {
    .mobile_ls-3px {
        letter-spacing: 0.3px;
    }
    
    #cll-safety-elevate-tn-dr .orange-bullet--list li::before {
        left: -7px;
    }
    
    #cll-safety-elevate-tn-ae #atrial-fibrillation img,
    #cll-safety-elevate-tn-ae #hypertension img,
    #cll-safety-elevate-tn-ae #major-bleeding img {
        margin-top: -16px;
    }

    #cll-safety-elevate-tn-dr .circle-chart img {
        max-width: 166px;
        width: 166px;
        height: 166px;
    }

    #cll-safety-elevate-tn-dr .donut-chart.circle-chart-1 p.circle-chart--number {
        font-size: 41.78px;
        top: 56px;
        left: 36px;
    }

    #cll-safety-elevate-tn-dr .donut-chart.circle-chart-1 p.fw-700 {
        font-size: 16.04px;
        top: 103px;
        left: 44px;
    }

    #cll-safety-elevate-tn-dr .donut-chart.circle-chart-2 p.circle-chart--number { 
        font-size: 41.78px; 
        top: 56px;
        left: 40px;
    }

    #cll-safety-elevate-tn-dr .donut-chart.circle-chart-2 p.fw-700 { 
        font-size: 16.04px;
        top: 103px;
        left: 44px;
    }
    
    #cll-safety-elevate-tn-ae #breadcrumb .listToDropdown,
    #cll-safety-elevate-tn-dr #breadcrumb .listToDropdown {
        margin-top: -29px;
    }
}


@media (max-width: 389px) {
    
    #cll-safety-elevate-tn-ae .breadcrumb-title p,
    #cll-safety-elevate-tn-dr .breadcrumb-title p,
    #cll-safety-elevate-rr-ae .breadcrumb-title p,
    #cll-safety-elevate-rr-dr .breadcrumb-title p{
        font-size: 14px;
    }
    
    #cll-safety-elevate-tn-ae .echo-table table {
        zoom: 0.65;
    }
    .elevate-tn--chart-right {
        zoom: 0.8;
    }
}