/* MCL DOSING - DOSAGE ADMINISTRATION - CSS */
/* /content/dam/intelligentcontent/brands/calquencehcp/us/en/css/dosage-administration.css */
/* id: dosage-administration */

.dosage-icons--container > div {
    max-width: 325px;
}

.dosage-icons--container > div > p {
    max-width: 180px;
    min-width: 150px;
    line-height: 28px;
}

#dosage-administration .elevate-tn-callout ul li {
    text-indent: 0;
}

#dosage-administration .elevate-tn-callout ul li::before {
    content: '';
}

#dosage-administration #for-patients h2 {
    line-height: 36px;
}



/* IMG to HTML */
#cll-dosage-administration #recommended-dosage .img-to--html {
    background: url('/content/dam/intelligentcontent/brands/calquencehcp/us/en/images/cll-dosing/mb_continuous_regimen.svg') no-repeat center;
    width: 344px;
    height: 12px;
}

#cll-dosage-administration #recommended-dosage .amplify-sd--html-3 p {
    font-size: 4.5px;
    line-height: 100%;
}


#cll-dosage-administration #recommended-dosage .amplify-sd--html-4 p {
    font-size: 6.37px;
    line-height: 100%;
}

#cll-dosage-administration #recommended-dosage .amplify-sd--html-3 {
    width: 28px;
    top: 4px;
    left: 3px;
}

#cll-dosage-administration #recommended-dosage .amplify-sd--html-4 {
    width: 210px;
    top: 2px;
    left: 88px;
}

/* IMG to HTML 2*/

.dos-adm--img {
    background: url('/content/dam/intelligentcontent/brands/calquencehcp/us/en/images/cll-dosing/mb_Administration_CAL_Obi%201.svg') no-repeat center;
    width: 350px;
    height: 98px;
    position: relative;
}

.dos-adm--img-2 {
    background: url('/content/dam/intelligentcontent/brands/calquencehcp/us/en/images/cll-dosing/mb_Administration_CAL_Ven%201.svg') no-repeat center;
    width: 350px;
    height: 98px;
    position: relative;
}

.dos-adm--img p {
    margin-bottom: 0;
    position: absolute;
    width: fit-content;
}

.dos-adm--top p {
    font-weight: 400;
    font-size: 4.06px;
    line-height: 100%;
    color: #FFFFFF;
}

.dos-adm--left p {
    font-size: 4.37px;
    line-height: 100%;
    color: #FFFFFF;
}

.dos-adm--right p {
    font-weight: 400;
    font-size: 6.25px;
    line-height: 100%;
    color: #FFFFFF;
}

.dos-adm--right-gray p {
    font-weight: 400;
    font-size: 4.06px;
    line-height: 100%;
    color: #FFFFFF;
}

.dos-adm--img--footnote {
    font-size: 4.37px;
    line-height: 100%;
    color: #58595B;
    text-align: center;
    top: 91px;
    left: 37px;
}

.bet-arrows {
    font-size: 4.37px;
    line-height: 100%;
    font-weight: 700 !important;
    color: #58595B !important;
    text-align: center;
    top: 2px;
    left: 44px;
}

.adm--top-1 {
    top: 15px;
    left: 48px;
}
.adm--top-2 {
    top: 15px;
    left: 87px;
}
.adm--top-3 {
    top: 15px;
    left: 126px;
}
.adm--top-4 {
    top: 15px;
    left: 165px;
}
.adm--top-5 {
    top: 15px;
    left: 204px;
}
.adm--top-6 {
    top: 15px;
    left: 243px;
}
.adm--top-7 {
    top: 15px;
    left: 281px;
}

.adm--left-1 {
    top: 28.5px;
    left: 2.5px;
}
.adm--left-2 {
    top: 63px;
    left: 1px;
}

.adm--right-1 {
    top: 27px;
    left: 85px;
}
.adm--right-2 {
    top: 45px;
    left: 141px;
}

.right-gray-1 {
    top: 58px;
    left: 80px;
}
.right-gray-2 {
    top: 65px;
    left: 120px;
}
.right-gray-3 {
    top: 65px;
    left: 159px;
}
.right-gray-4 {
    top: 65px;
    left: 197px;
}
.right-gray-5 {
    top: 65px;
    left: 236px;
}
.right-gray-6 {
    top: 65px;
    left: 275px;
}

.yellow-stop--sign {
    font-weight: 800;
    font-size: 3.49px;
    line-height: 100%;
    color: #58595B;
    top: 44px;
    left: 322.5px;
}

.below-right-gray {
    top: 83px;
    left: 118px;
    color: #58595B !important;
}

.dos-adm--img-2 .dos-adm--img--footnote {
    top: 94px;
    left: 40px;
}

.dos-adm--img-2 .bet-arrows {
    top: 4px;
    left: 60px;
}

.dos-adm--img-2 .adm--top-1 {
    top: 13px;
    left: 50px;
}

.dos-adm--img-2 .adm--top-2 {
    top: 13px;
    left: 89px;
}

.dos-adm--img-2 .adm--top-3 {
    top: 13px;
    left: 127px;
}

.dos-adm--img-2 .adm--top-5 {
    top: 13px;
    left: 222px;
}

.dos-adm--img-2 .adm--left-1 {
    top: 26px;
    left: 4.5px;
}

.dos-adm--img-2 .adm--left-2 {
    top: 63px;
    left: 7px;
}

.dos-adm--img-2 .adm--right-1 {
    top: 25px;
    left: 104px;
}

.dos-adm--img-2 .adm--right-2 {
    top: 40px;
    left: 161px;
}

.dos-adm--img-2 .right-gray-1 {
    top: 53px;
    left: 119px;
    line-height: 130%;
}

.dos-adm--img-2 .right-gray-2 {
    top: 65px;
    left: 225px;
}

@media (min-width: 991px) {
    #dosage-administration .elevate-tn-callout {
        gap: 33px
    }
    
    #dosage-administration .dosage-icons--container {
        /*max-width: 985px;*/
        max-width: 1001px;
        padding-left: 16px !important;
    }
    
    #cll-dosage-administration .wrapper.dosage-icons--container {
        max-width: 986px;
    }
    
    #dosage-administration .dosage-icons--container > div:nth-child(2) {
        transform: translateX(26px);
    }
    
    #dosage-administration .dosage-icons--container > div:nth-child(3) {
        transform: translateX(16px);
    }

    /* IMG to HTML */
    #cll-dosage-administration #recommended-dosage .img-to--html {
        background: url('/content/dam/intelligentcontent/brands/calquencehcp/us/en/images/cll-dosing/continuous_regimen.svg') no-repeat center;
        width: 954px;
        height: 31px;
    }

    #cll-dosage-administration #recommended-dosage .amplify-sd--html-3 p {
        font-size: 12px;
    }


    #cll-dosage-administration #recommended-dosage .amplify-sd--html-4 p {
        font-size: 17px;
    }

    #cll-dosage-administration #recommended-dosage .amplify-sd--html-3 {
        width: 74px;
        top: 10px;
        left: 36px;
    }

    #cll-dosage-administration #recommended-dosage .amplify-sd--html-4 {
        /*width: 548px;*/
        width: 554px;
        top: 6px;
        left: 255px;
    }

    /* IMG to HTML 2*/

    .dos-adm--img {
        background: url('/content/dam/intelligentcontent/brands/calquencehcp/us/en/images/cll-dosing/Administration_CAL_Obi%201.svg') no-repeat center;
        width: 954px;
        height: 254px;
    }

    .dos-adm--img-2 {
        background: url('/content/dam/intelligentcontent/brands/calquencehcp/us/en/images/cll-dosing/Administration_CAL_Ven%201.svg') no-repeat center;
        width: 954px;
        height: 272px;
    }

    .dos-adm--top p {
        font-size: 11.05px;
    }

    .dos-adm--left p {
        font-size: 11.9px;
    }

    .dos-adm--right p {
        font-size: 17px;
    }

    .dos-adm--right-gray p {
        font-size: 11.05px;
    }

    .dos-adm--img--footnote {
        font-size: 11.9px;
        top: 239px;
        left: 102px;
    }

    .bet-arrows {
        font-size: 11.9px;
        top: 0;
        left: 121px;
    }

    .adm--top-1 {
        top: 32px;
        left: 133px;
    }
    .adm--top-2 {
        top: 32px;
        left: 238px;
    }
    .adm--top-3 {
        top: 32px;
        left: 343px;
    }
    .adm--top-4 {
        top: 32px;
        left: 449px;
    }
    .adm--top-5 {
        top: 32px;
        left: 555px;
    }
    .adm--top-6 {
        top: 32px;
        left: 662px;
    }
    .adm--top-7 {
        top: 32px;
        left: 765px;
    }

    .adm--left-1 {
        top: 68px;
        left: 8px;
    }
    .adm--left-2 {
        top: 161px;
        left: 4px;
    }

    .adm--right-1 {
        top: 64px;
        left: 233px;
    }
    .adm--right-2 {
        top: 115px;
        left: 383px;
    }

    .right-gray-1 {
        top: 152px;
        left: 218px;
    }
    .right-gray-2 {
        top: 168px;
        left: 326px;
    }
    .right-gray-3 {
        top: 168px;
        left: 432px;
    }
    .right-gray-4 {
        top: 168px;
        left: 539px;
    }
    .right-gray-5 {
        top: 168px;
        left: 644px;
    }
    .right-gray-6 {
        top: 168px;
        left: 749px;
    }

    .yellow-stop--sign {
        font-size: 9.6px;
        top: 120px;
        left: 880px;
    }

    .dos-adm--img-2 .bet-arrows {
        top: 12px;
        left: 157px;
    }

    .dos-adm--img-2 .adm--top-1 {
        top: 34px;
        left: 133px;
    }

    .dos-adm--img-2 .adm--top-2 {
        top: 34px;
        left: 238px;
    }

    .dos-adm--img-2 .adm--top-3 {
        top: 34px;
        left: 343px;
    }

    .dos-adm--img-2 .adm--top-5 {
        top: 34px;
        left: 610px;
    }

    .dos-adm--img-2 .adm--left-1 {
        top: 71px;
        left: 8px;
    }

    .dos-adm--img-2 .adm--left-2 {
        top: 173px;
        left: 12px;
    }

    .dos-adm--img-2 .adm--right-1 {
        top: 68px;
        left: 281px;
    }

    .dos-adm--img-2 .adm--right-2 {
        top: 111px;
        left: 442px;
    }

    .dos-adm--img-2 .right-gray-1 {
        top: 148px;
        left: 325px;
        line-height: 130%;
    }

    .dos-adm--img-2 .right-gray-2 {
        top: 177px;
        left: 618px;
    }

    .below-right-gray {
        top: 226px;
        left: 325px;
    }

    .dos-adm--img-2 .dos-adm--img--footnote {
        top: 256px;
        left: 102px;
    }
    
    #dosage-administration .dosage_adm_grid .graph_content .forritu .right-s .Scontent {
        text-decoration: underline;
        text-underline-offset: 5px;
    }

}

@media (max-width: 991px) {
    .mobile_pb-25px {
        padding-bottom: 25px;
    }
    .dosage-icons--container img {
        width: 120px;
        min-width: 120px;
    }
    
    #cll-dosage-administration .dosage-icons--container > div:nth-child(2) img {
        width: 132px;
        min-width: 132px;
    }
    
    #cll-dosage-administration .dosage-icons--container > div:nth-child(3) img {
        width: 140px;
        min-width: 140px;
    }
    
    #dosage-administration #references {
        padding-top: 25px;
    }
}


.dosage_adm_grid {
    display: flex;
    flex-direction: row;
    gap: 16px;
    width: 945px;
    height: 274px;
    background-image: url('/content/dam/intelligentcontent/brands/calquencehcp/us/en/images/mcl/Dosage-adm_CalBR-desk.svg');
    background-size: contain;
    background-repeat: no-repeat;
    color: white;
    position: relative;
}

.dosage_adm_grid .graph_ind,
.dosage_adm_grid .graph_content {
    position: relative;
}

.dosage_adm_grid .graph_ind {
    width: 88px;
    flex-shrink: 0;
    font-size: 12px;
    font-weight: 700;
    line-height: 100%;
}

.dosage_adm_grid .graph_ind * {
    position: absolute;
    width: 100%;
    left: 0px;
    text-align: center;
}

.dosage_adm_grid .graph_ind .cal {
    top: 11px;
}

.dosage_adm_grid .graph_ind .bend {
    top: 74px;
}

.dosage_adm_grid .graph_ind .ritu {
    top: 165px;
}

.dosage_adm_grid .graph_content {
    font-size: 14px;
    line-height: 100%;
    position: relative;
    left: 4px;
    display: flex;
    gap: 4.44px;
    flex-direction: column;
    margin-top: 0px;
}

.dosage_adm_grid .graph_content>* {
    display: flex;
    line-height: 125%;
}

.dosage_adm_grid .graph_content .forcalq {
    align-items: center;
    justify-content: center;
    height: 32px;
}

#dosage-administration .dosage_adm_grid .graph_content .forcalq {
    font-size: 17px;
}

.dosage_adm_grid .graph_content .forbend {
    width: 158px;
    height: 84px;
    flex-direction: column;
    justify-content: center;
    padding: 14px 16.41px 15.97px 12.25px;
}

.dosage_adm_grid .graph_content .forritu {
    height: 88px;
    flex-direction: row;
    gap: 5.44px;
}

.dosage_adm_grid .graph_content .forritu .left-s {
    width: 157px;
    padding: 23.26px 28.41px 27.59px 12.25px;
    align-items: center;
}

.dosage_adm_grid .graph_content .forritu .left-s b{
    display:block;
}

.dosage_adm_grid .graph_content .forritu .right-s {
    width: 609.53px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-top: 8px;
    padding-bottom: 10.43px;
}

.dosage_adm_grid .graph_content .forritu .right-s .Fcontent {
    font-size: 16px;
    margin-bottom: 11.73px;
    margin-left: 10px;
}

.dosage_adm_grid .graph_content .forritu .right-s .Scontent {
    font-size: 16px;
    margin-bottom: 3.16px;
    margin-left: 10px;
}

.dosage_adm_grid .graph_content .forritu .right-s .Tcontent {
    font-size: 14px;
}


@media (max-width:390px) {
    .dosage_adm_grid {
        zoom: calc(100vw / 390px)
    }
}

@media (max-width:991px) {
    
    .dosage-icons--container > div > p {
         min-width: 180px;
    }

    .dosage_adm_grid {
        flex-direction: column;
        gap: 4px;
        width: 345px;
        height: 1095px;
        background-image: url('/content/dam/intelligentcontent/brands/calquencehcp/us/en/images/mcl/Dosage-adm_CalBR-mob.svg');
    }

    .dosage_adm_grid .graph_ind {
        display: flex;
        flex-direction: row-reverse;
        gap: 4px;
        justify-content: center;
        align-items: center;
        width: 267px;
        height: 36px;
        margin-left: auto;
        margin-top: 26px;
    }

    .dosage_adm_grid .graph_ind * {
        position: static;
        flex-shrink: 0;
        font-size: 12px;
        font-weight: 800;
    }

    .dosage_adm_grid .graph_ind .cal {
        width: 62px;
        font-size: 9px;
    }

    .dosage_adm_grid .graph_ind .bend {
        width: 92px;
    }

    .dosage_adm_grid .graph_ind .ritu {
        width: 106px;
    }

    .dosage_adm_grid .graph_content {
        flex-direction: row-reverse;
        width: 269px;
        margin-left: auto;
        margin-top: 0;
        left: 0;
    }

    .dosage_adm_grid .graph_content .forcalq {
        width: 61px;
        height: 1021.48px;
        writing-mode: vertical-rl;
        text-orientation: sideways;
        font-weight: 800;
        justify-content: flex-start;
        padding-top: 125px;
    }
    
    #dosage-administration .dosage_adm_grid .graph_content .forcalq {
        font-size: 20.79px;
    }

    .dosage_adm_grid .graph_content .forbend {
        width: 89px;
        height: 191.6px;
        padding: 19px 17.82px 15.97px 4.63px;
        justify-content: flex-start;
    }

    .dosage_adm_grid .graph_content .forbend .br {
        display: block;
    }

    .dosage_adm_grid .graph_content .forritu {
        width: 108px;
        height: 1021.48px;
        justify-content: flex-start;
        flex-direction: column;
        gap: 6.65px;
    }

    .dosage_adm_grid .graph_content .forritu .left-s {
        width: 100%;
        height: 191.6px;
        padding: 15px 21.47px 114.51px 4.56px;
        align-items: center;
    }

    .dosage_adm_grid .graph_content .forritu .right-s {
        width: 100%;
        height: 745px;
        justify-content: flex-start;
        padding-top: 68px;
        text-align: center;
    }

    .dosage_adm_grid .graph_content .forritu .right-s .Fcontent {
        padding-left: 7px;
        padding-right: 9px;
        margin-left: 0;
        margin-bottom: 33.4px;
    }

    .dosage_adm_grid .graph_content .forritu .right-s .Scontent {
        font-weight: 700;
        margin-left: 0;
        margin-top: 36.8px;
        margin-bottom: 0px;
    }

    .dosage_adm_grid .graph_content .forritu .right-s .Tcontent {
        padding-left: 10px;
        padding-right: 10px;
    }
}


/* Compatibility issues - 16-03-2026 */
@media (max-width: 389px) {
    #cll-dosage-administration .img-to--html,
    #cll-dosage-administration .dos-adm--img,
    .dosage-icons--container img {
        zoom: 0.8;
    }
}

#cll-dosage-administration #references .cmp-accordion__panel,
#cll-dosage-modifications #references .cmp-accordion__panel {
    padding-bottom: 0;
}