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

#dosage-modifications .key-card {
    flex: 0.3333;
}

#dosage-modifications .grey-card .card-header {
    background-color: #58595B;
}

#dosage-modifications .card-content {
    padding: 11px 2px 11px 14px;
}

.card-content p {
    font-size: 16px;
    line-height: 22px;
    margin-bottom: 0;
}

.key-cards--container > div:nth-child(2) > .card-content {
    border-left: 1px solid #00000033;
}

span.modifications-Lato {
    margin-left: -8px;
}

@media (max-width: 991px) {
    #dosage-modifications .card-header p {
        font-size: 18px;
    }

    #dosage-modifications .card-content {
        padding: 11px 18px 11px 16px;
        border: none;
    }
}

/* ================= DESKTOP GRID ================= */
.dosage_mod_grid {
    display: grid;
    grid-template-columns: 224.22px 1fr 1fr 1fr;
    gap: 0;
    background-image: url('/content/dam/intelligentcontent/brands/calquencehcp/us/en/images/mcl/Dosage-mod-bg-desk.svg');
    background-size: contain;
    background-repeat: no-repeat;
}

.dosage_mod_grid.dosage_mono {
    width: 954px;
    height: 216px;
    grid-template-columns: 229.27px 1fr 1fr 1fr;
    background-image: url('/content/dam/intelligentcontent/brands/calquencehcp/us/en/images/mcl/Dosage-mono-bg-desk.svg');
}

.dosage_mod_grid .dosage_mod_grid__row {
    display: contents;
}

.dosage_mod_grid .cell {
    padding: 20px 22px 0px 31px;
    position: relative;
}

.dosage_mod_grid.dosage_mono .cell {
    padding: 10px 22px 0px 12px;
}

.dosage_mod_grid .title {
    font-weight: 700;
    color: #595A5C;
    font-size: 20px;
    line-height: 100%;
    margin: 0 0 5px;
}

.dosage_mod_grid.dosage_mono .title {
    font-size: 14px;
    margin: 0 0 1px;
}

.dosage_mod_grid.dosage_mono .title .br {
    display: block;
}

.dosage_mod_grid .subtitle {
    color: #595A5C;
    font-size: 14px;
    line-height: 125%;
    margin: 0;
}

.dosage_mod_grid.dosage_mono .subtitle {
    line-height: 140%;
    margin: 0 0 4px;
}

.dosage_mod_grid .badge {
    display: inline-grid;
    grid-auto-flow: column;
    align-items: center;
    gap: 7px;
    margin: 2px 0 2px;
    color: #DA4826;
    font-size: 20px;
    font-weight: 700;
}

.dosage_mod_grid.dosage_mono .badge {
    color: #236E6E;
    gap: 2px;
    margin: 2px 0 8px;
}

.dosage_mod_grid .dosage_mod_grid__row>.c2 .badge {
    gap: 0;
}

.dosage_mod_grid .dosage_mod_grid__row>.c2 .badge .dot {
    margin-right: 2.76px;
}

.dosage_mod_grid .dot {
    width: 34.37px;
    height: 34.37px;
    background: #DA4826;
    color: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 21.28px;
    box-shadow: 1.66px 1.66px 3.32px 0px #231F2059;
}

.dosage_mod_grid.dosage_mono .dot {
    width: 37px;
    height: 37px;
}

.dosage_mod_grid .dot .sub {
    font-size: 14.18px;
}

.dosage_mod_grid.dosage_mono .dot .sub {
    font-size: 15.12px;
}

.or-txt {
    font-size: 14px;
    margin-left: 2px;
    margin-right: 9.32px;
    margin-top: 5px;
}

.and-txt {
    font-size: 20px;
}

.ocr {
    margin-top: -8px;
}

.dosage_mod_grid.dosage_mono .ocr {
    margin-left: 6px;
}

.dosage_mod_grid .label {
    color: #e4542f;
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: .2px;
}

.dosage_mod_grid .steps {
    margin: 0;
    padding-left: 7px;
    list-style: none;
    max-width: 189px;
    text-align: left;
}

.dosage_mod_grid.dosage_mono .steps {
    max-width: 200px;
}

.dosage_mod_grid .dosage_mod_grid__row>.c2 .steps {
    padding-left: 10px;
}

.dosage_mod_grid .dosage_mod_grid__row>.c3 .steps {
    padding-left: 6px;
}

.dosage_mod_grid .steps li {
    margin: 6px 0 4px 0;
    font-size: 14px;
    line-height: 118%;
    padding-left: 3px;
}

.dosage_mod_grid.dosage_mono .steps li {
    margin: 4px 0 4px 0;
    font-size: 14px;
    line-height: 142%;
    padding-left: 3px;
}

.dosage_mod_grid .steps li::marker {
    color: #e4542f;
    content: "•";
}

.dosage_mod_grid .dosage_mod_grid__footer {
    grid-column: 1 / -1;
    color: #ffffff;
    padding: 17px 22px 21px;
    text-align: center;
}

.dosage_mod_grid .dosage_mod_grid__footer .heading {
    font-weight: 700;
    margin: 2px 0 8px;
    font-size: 20px;
    line-height: 100%;
}

.dosage_mod_grid .dosage_mod_grid__footer .text {
    font-size: 14px;
}

/* ================= DESKTOP COLUMN MAPPING================= */
.dosage_mod_grid .dosage_mod_grid__row>.head {
    grid-column: 1;
    padding: 30px 20px 0px 15px;
}

.dosage_mod_grid.dosage_mono .dosage_mod_grid__row>.head {
    padding: 25px 20px 0px 19px;
}

.dosage_mod_grid .dosage_mod_grid__row>.c1 {
    grid-column: 2;
}

.dosage_mod_grid .dosage_mod_grid__row>.c2 {
    grid-column: 3;
    padding: 21px 22px 10px 20px;
}

.dosage_mod_grid.dosage_mono .dosage_mod_grid__row>.c2 {
    padding: 10px 19px 10px 23px;
}

.dosage_mod_grid.dosage_mono .dosage_mod_grid__row>.c2 .ocr {
    margin-left: 8px;
}

.dosage_mod_grid .dosage_mod_grid__row>.c3 {
    grid-column: 4;
    padding: 20px 15px 10px 37px;
}

.dosage_mod_grid.dosage_mono .dosage_mod_grid__row>.c3 {
    padding: 10px 15px 10px 21px;
}

/* ================= MOBILE ================= */
@media (max-width: 390px) {
    .dosage_mod_grid {
        zoom: calc(100vw / 390px)
    }
}

@media (max-width: 991px) {
    .dosage_mod_grid {
        grid-template-columns: 1fr;
        background-image: url('/content/dam/intelligentcontent/brands/calquencehcp/us/en/images/mcl/Dosage-mod-bg-mob.svg');
        max-width: 350px;
    }

    .dosage_mod_grid.dosage_mono {
        max-width: 350px;
        height: 668px;
        grid-template-columns: 1fr;
        background-image: url('/content/dam/intelligentcontent/brands/calquencehcp/us/en/images/mcl/Dosage-mono-bg-mob.svg');
    }

    .dosage_mod_grid .cell {
        padding: 5px 16px 0px 10px;
    }

    .dosage_mod_grid .dosage_mod_grid__row>.head {
        text-align: center;
        padding: 10px 10px 0px 10px;
        height: 100px;
    }

    .dosage_mod_grid.dosage_mono .dosage_mod_grid__row>.head {
        padding: 10px 20px 0px 21px;
        height: 177px;
    }

    .dosage_mod_grid.dosage_mono .title {
        font-size: 20px;
        margin: 0 0 1px;
    }

    .dosage_mod_grid.dosage_mono .title .br {
        display: inline;
    }

    .dosage_mod_grid.dosage_mono .steps {
        max-width: 279px;
    }

    .dosage_mod_grid.dosage_mono .steps li {
        font-size: 12px;
        margin-top: -2px;
        line-height: 170%;
    }

    .dosage_mod_grid .dosage_mod_grid__row>.c1 {
        grid-column: 2;
        height: 140px;
    }

    .dosage_mod_grid.dosage_mono .dosage_mod_grid__row>.c1 {
        height: 140px;
        padding: 10px 12px 0px 16px;
    }

    .dosage_mod_grid.dosage_mono .dosage_mod_grid__row>.c1 .badge {
        margin: 2px 0 0px;
    }

    .dosage_mod_grid .dosage_mod_grid__row>.c2 {
        padding: 20px 0px 0px 0px;
        height: 110px;
    }

    .dosage_mod_grid.dosage_mono .dosage_mod_grid__row>.c2 {
        padding: 5px 6px 10px 13px;
    }

    .dosage_mod_grid .dosage_mod_grid__row>.c3 {
        padding: 20px 18px 0px 13px;
        height: 98px;
    }

    .dosage_mod_grid.dosage_mono .dosage_mod_grid__row>.c3 {
        padding: 41px 14px 10px 17px;
    }

    .dosage_mod_grid .dosage_mod_grid__row {
        display: grid;
        grid-template-columns: 1fr;
    }

    .dosage_mod_grid .dosage_mod_grid__row.r2>.head {
        height: 115px;
    }

    .dosage_mod_grid .dosage_mod_grid__row.r2>.c2 {
        padding: 10px 0px 0px 0px;
        height: 100px;
    }

    .dosage_mod_grid .dosage_mod_grid__row.r2>.c3 {
        height: 110px;
    }

    .dosage_mod_grid .dosage_mod_grid__row.r3>.c2 {
        padding: 10px 0px 0px 0px;
    }

    .dosage_mod_grid .dosage_mod_grid__row.r3>.c3 {
        height: 157px;
    }

    .dosage_mod_grid .dosage_mod_grid__row>.head,
    .dosage_mod_grid .dosage_mod_grid__row>.c1,
    .dosage_mod_grid .dosage_mod_grid__row>.c2,
    .dosage_mod_grid .dosage_mod_grid__row>.c3 {
        grid-column: 1;
        text-align: center;
    }

    .dosage_mod_grid .steps {
        max-width: max-content;
        padding-left: 8px;
        margin-top: 9px;
        padding-right: 10px;
    }

    .dosage_mod_grid .dosage_mod_grid__footer {
        padding: 6px 11px 8px;
    }

    .dosage_mod_grid .dosage_mod_grid__footer .heading {
        margin: 2px 0 3px;
    }

    .dosage_mod_grid .dosage_mod_grid__footer .text {
        line-height: 19px;
    }
    
    
    .dosage_mod_grid .steps li {
        list-style: none;
        text-indent: -15px;
    }
    
    .dosage_mod_grid .steps li::before {
        content: "•";
        color: #e4542f;
        margin-right: 0.5em;
        position: relative;
        left: 5px;
    }
    
    .dosage_mod_grid .steps li::marker {
        content: "";
        display: none;
    }
    
}