/* article new design charts css */
.chartOne .articleChart,
.chartTwo .articleChart,
.chartThree .articleChart,
.chartFour .articleChart,
.chartFive {
    margin: 1.5rem 0;
    color: #0A3B5F;
}
.chartOne .articleChart .chartSection,
.chartTwo .articleChart .chartSection,
.chartThree .articleChart .chartSection,
.chartFour .articleChart .chartSection,
.chartFive > .wp-block-group__inner-container {
    background: #FFFFFF;
    box-shadow: 0px 0px 13.4951px rgba(0, 0, 0, 0.1);
    border-radius: 11px;
}
.chartOne .articleChart .chartHead,
.chartFour .articleChart .chartHead {
    text-align: center;
    color: #FFFFFF;
    border-radius: 11px 11px 0px 0px;
    background-color: #035897;
}
.chartOne .articleChart .chartHead {
    font-weight: 700;
    font-size: 20px;
    line-height: 28px;
}
.chartOne .articleChart .subHead {
    padding-left: 32px;
    font-size: 16px;
    line-height: 24px;
}
.chartOne .articleChart .chartBody,
.chartTwo .articleChart .chartBody {
    border-bottom: 1px solid #D0D0D0;
}
.chartOne .articleChart .chartBody:last-child,
.chartTwo .articleChart .chartBody:last-child {
    border-bottom: none;
}
.chartOne .articleChart .chartText,
.chartFour .articleChart .chartText {
    background-color: #E6F4FF;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: #2B2E3C;
}
.chartOne .articleChart .chartText p {
    text-align: center;
}
.chartOne .articleChart .chartBody ul, .chartOne .articleChart .chartBody ol {
    padding-top: 0;
    padding-bottom: 0;
}
.chartOne .sourceText, .chartTwo .sourceText, .chartThree .sourceText, .chartFour .sourceText, .chartFiveText .sourceText {
    font-size: 16px;
    line-height: 24px;
    color: #000;
    font-style: italic;
}
.chartOne .articleChart ul {
    list-style-image: url('/images/articles/tick.svg');
}
.chartOne .articleChart ul.disc {
    list-style-type: disc;
    list-style-image: none;
}
.chartTwo .articleChart .chartText {
    text-align: center;
}
.chartTwo .articleChart .chartHead {
    text-align: center;
    padding-top: 1rem;
    color: #32384D;
    border-radius: 11px 11px 0px 0px;
}
.chartTwo .articleChart .chartHead, .chartTwo .articleChart .subHead,
.chartThree .articleChart .chartHead, .chartThree .articleChart .subHead,
.chartFour .articleChart .chartHead, .chartFour .articleChart .subHead,
.chartFive .articleChart .chartHead, .chartFive .articleChart .subHead {
    font-size: 16px;
    line-height: 24px;
    font-weight: 700;
}
.chartTwo .articleChart .chartHead:nth-child(3n+2),
.chartThree .articleChart .chartHead:nth-child(5n+2) {
    background-color: #78E9CE;
}
.chartTwo .articleChart .chartHead:nth-child(3n+3),
.chartThree .articleChart .chartHead:nth-child(5n+3) {
    background-color: #FFC093;
}
.chartTwo .articleChart .chartHead:nth-child(3n+4),
.chartThree .articleChart .chartHead:nth-child(5n+6) {
    background-color: #A2A6ED;
}
.chartTwo .articleChart .chartText:nth-child(3n+2) {
    background-color: #78e9ce26;
}
.chartTwo .articleChart .chartText:nth-child(3n+3) {
    background-color: #ffc09326;
}
.chartTwo .articleChart .chartText:nth-child(3n+4) {
    background-color: #a2a6ed26;
}
.chartTwo .chartBody .yes, .chartFive .articleChart .yes {
    background-image: url('/images/articles/tick-circle.svg');
    background-repeat: no-repeat;
    background-position: center;
    height: 25px;
    text-indent: -9999px;
}
.chartTwo .chartBody .no, .chartFive .articleChart .no {
    background-image: url('/images/articles/no.svg');
    background-repeat: no-repeat;
    background-position: center;
    text-indent: -9999px;
}
.articleChart p {
    margin-bottom: 0;
}
.articleChart .chartText p:not(:first-child) {
    margin-top: 20px;
}
.chartThree .articleChart .chartHead {
    text-align: center;
    color: #32384D;
    border-radius: 11px 11px 0px 0px;
}
.chartThree .articleChart .chartText,
.chartFour .articleChart .chartText,
.chartFive .articleChart .chartText {
    font-size: 16px;
    line-height: 24px;
    color: #2B2E3C;
}
.chartThree .articleChart .chartHead:nth-child(5n+4) {
    background-color: #F98380;
}
.chartThree .articleChart .chartHead:nth-child(5n+5) {
    background-color: #FFD275;
}
.chartOne .articleChart .chartBody:last-child .chartText,
.chartTwo .articleChart .chartBody:last-child .chartText,
.chartThree .articleChart .chartBody:last-child .chartText,
.chartFour .articleChart .chartBody:last-child .chartText  {
    border-radius: 0px 0px 11px 11px;
}
.chartThree .articleChart .chartText:nth-child(5n+2) {
    background-color: #78e9ce26;
}
.chartThree .articleChart .chartText:nth-child(5n+3) {
    background-color: #ffc09326;
}
.chartThree .articleChart .chartText:nth-child(5n+4) {
    background-color: #f9838026;
}
.chartThree .articleChart .chartText:nth-child(5n+5) {
    background-color: #ffd27526;
}
.chartThree .articleChart .chartText:nth-child(5n+6) {
    background-color: #a2a6ed26;
}
.chartFive > .wp-block-group__inner-container {
    padding: 1.5rem;
}
.chartFive .chartBody {
    background-color: #E6F4FF;
    border-radius: 100px;
}
.chartFive .articleChart .subHead {
    display: flex;
    text-align: center;
    justify-content: center;
    align-items: center;
    background-color: #035897;
    color: #FFFFFF;
    border-radius: 100px 100px 100px 100px;
}
.chartFive .articleChart .chartHead,
.chartFive .articleChart .chartText {
    border-right: 1px solid #D0D0D0;
}
.chartFive .articleChart .chartHead:last-child,
.chartFive .articleChart .chartText:last-child {
    border-right: unset;
}

@media (max-width: 767px) {
    .chartOne .articleChart,
    .chartTwo .articleChart,
    .chartThree .articleChart,
    .chartFour .articleChart,
    .chartFive .articleChart {
        overflow-x: auto;
    }
    .articleChart > .wp-block-group__inner-container:first-child {
        width: 120vw;
    }
    .twoColumnChart .articleChart {
        overflow-x: unset;
    }
    .twoColumnChart .articleChart > .wp-block-group__inner-container:first-child {
        width: auto !important;
    }
}
@media (max-width: 575px) {
    .chartOne .articleChart > .wp-block-group__inner-container:first-child,
    .chartTwo .articleChart > .wp-block-group__inner-container:first-child {
        width: 200vw;
    }
    .chartThree .articleChart > .wp-block-group__inner-container:first-child,
    .chartFour .articleChart > .wp-block-group__inner-container:first-child {
        width: 225vw;
    }
    .chartFive .articleChart > .wp-block-group__inner-container:first-child {
        width: 210vw;
    }
}