.data-container {
    width: 100%;
}

    .data-container .sub-container {
        width: 82%;
    }

    .data-container .sub-heading {
        font-size: 1.5em;
        font-weight: bold;
        background-color: Var(--bg-bgblue);
        border-bottom: 1px solid #afcee2;
        padding: 0.2em 0em 0.2em 0.5em;
    }

    .data-container .sub-heading-ncd {
        font-size: 1.5em;
        font-weight: bold;
        background-color: #fcd2be;
        border-bottom: 1px solid #d2937a;
        padding: 0.2em 0em 0.2em 0.5em;
    }

    .data-container .sub-heading-cvd {
        font-size: 1.5em;
        font-weight: bold;
        background-color: Var(--bg-bgblue);
        border-bottom: 1px solid #afcee2;
        padding: 0.2em 0em 0.2em 0.5em;
    }

    .data-container .sub-heading-tobacco {
        font-size: 1.5em;
        font-weight: bold;
        background-color: #e8f6d0;
        border-bottom: 1px solid #94b166;
        padding: 0.2em 0em 0.2em 0.5em;
    }

    .data-container .top-continer {
        padding-bottom: 3em;
    }

        .data-container .top-continer .card-header {
            border-bottom: none !important;
        }

    .data-container .cust-btn {
        width: 100% !important;
    }

    .data-container .cust-btn-open {
        width: 100% !important;
        color: Var(--tx-orange) !important;
        background: none !important;
    }

        .data-container .cust-btn-open .icon-col {
            color: Var(--tx-orange) !important;
        }

    .data-container .cust-btn:hover {
        color: Var(--tx-orange) !important;
    }

        .data-container .cust-btn:hover .icon-col {
            color: Var(--tx-orange) !important;
        }

    .data-container .cvd-btn {
        width: 100% !important;
    }

    .data-container .cvd-btn-open {
        width: 100% !important;
        color: Var(--tx-blue) !important;
        background: none !important;
    }

        .data-container .cvd-btn-open .icon-col {
            color: Var(--tx-blue) !important;
        }

    .data-container .cvd-btn:hover {
        color: Var(--tx-blue) !important;
    }

        .data-container .cvd-btn:hover .icon-col {
            color: Var(--tx-blue) !important;
        }

    .data-container .tobacco-btn {
        width: 100% !important;
    }

    .data-container .tobacco-btn-open {
        width: 100% !important;
        color: Var(--tx-green) !important;
        background: none !important;
    }

        .data-container .tobacco-btn-open .icon-col {
            color: Var(--tx-green) !important;
        }

    .data-container .tobacco-btn:hover {
        color: Var(--tx-green) !important;
    }

        .data-container .tobacco-btn:hover .icon-col {
            color: Var(--tx-green) !important;
        }

    .data-container .main-row {
        width: 100%;
        font-size: 1.2em;
        font-family: 'SourceSansPro-Regular';
    }

    .data-container .main-row .main-col {
        width: 82%;
        font-weight: bold;
        text-align: start;
        font-size: 1em;
        padding-right: 1em;
    }

    .data-container .main-row .main-col-1 {
        width: 30%;
        text-align: start;
        font-weight: bold;
    }

    .data-container .main-row .icon-col {
        color: Var(--bg-bgblue);
        font-size: initial;
    }

    .data-container .main-col-i {
        font-weight: bold;
        font-size: 2em;
    }

    .data-container .yearchart {
        width: 100%;
        height: 20em;
        position: relative;
        padding-left: 2em;
        margin-top: 1.5em;
    }

    .data-container .heading-one {
        font-size: 1.5em;
        font-weight: bold;
        color: black;
        padding: 2em 0.5em .5em;
        border-bottom: 1px solid #b6b6b6;
    }

    .data-container .icon-error {
        font-size: 0.8em;
        padding-right: 0.5em;
        position: relative;
        top: 3px;
        padding-right: 0.25em;
        transform: rotate(180deg);
    }

    .data-container .icon-error-cvd {
        font-size: 0.8em;
        padding-right: 0.5em;
        position: relative;
        top: 10px;
        padding-right: 0.25em;
        transform: rotate(180deg);
    }

    .data-container .icon-error-cvd.tool {
        font-size: 1.125em !important;
    }

    .data-container .country-container {
        padding: 1em;
        margin-top: 1em;
    }

    .data-container .filter-container {
        font-size: .9em;
        width: 15%;
        justify-content: space-between;
    }

    .data-container .filter-col {
        padding: 0 0.5em 0 0.5em;
        color: #a9a9a9;
        text-decoration: none;
        background-color: white !important;
        border:none;
        width: 50%;
        margin: 0 0.5em;
    }
    .data-container .filter-col:hover {
        border: 1px solid orange !important;
        border-radius: 25px;
    }  
    .data-container .filter-col:active {
        border: 1px solid orange !important;
        border-radius: 25px;
    }

    .data-container .filter-col-1 {
        padding: 0 1em;
        border: 1px solid orange;
        background-color: white !important;
        border-radius: 25px;
        width: 50%;
        margin: 0 0.5em;
    }

    .data-container .filter-col-2 {
        width: 30%;
    }

    .data-container .card {
        border-right: none;
        border-left: none;
    }

    .data-container .card .card-header {
        background: none !important;
        padding: 0 !important;
        margin-top: 0.5em;
    }


    .data-container .chart-container .icon-square {
        font-size: 20px;
        color: orange;
        padding-right: 0.5em;
    }

    .data-container .chart-container .icon-square-1 {
        font-size: 20px;
        color: purple;
        padding-right: 0.5em;
        padding-left: 4em;
    }

    .data-container .chart-container .icon-square-2 {
        font-size: 20px;
        color: #7bbf2f;
        padding-right: 0.5em;
        padding-left: 4em;
    }

    .data-container .chart-container .icon-gender {
        font-size: 40px;
        color: Var(--tx-green) !important;
        padding-right: 0.5em;
    }

    .data-container .chart-container .icon-gender-1 {
        font-size: 40px;
        color: orange;
        padding-right: 0.5em;
        padding-left: 1.5em;
    }

    .data-container .chart-container .icon-gender-2 {
        font-size: 40px;
        color: #5b2783;
        padding-right: 0.5em;
        padding-left: 1.5em;
    }

    .data-container .select-year {
        border: 1px solid orange;
        border-radius: 7em;
        height: 2em;
        display: flex;
        padding: 0 0.5em;
        align-items: center;
    }

    .data-container .select-year .select {
        width: 9em;
        border: 0;
    }

@media only screen and (min-width: 1599px){
    .data-container .main-row .main-col{
        font-size: 1.2em;
    }
    .progressMonitor .rowBtn{
        font-size: 1em;
    }
}

.linear-canvas {
    height: 320px;
}
@media only screen and (max-width: 1499px){
    .data-container .filter-container {
        width: 25%;
    }
}
span.hasTooltip.cp-tip {
    padding-left: 3px;
    top: 4px;
}
    span.hasTooltip.cp-tip i {
        transform: rotate(180deg);
    }
.hasTooltip.cp-tip .toolytip {
    right: -5em !important;
    left: unset !important;
}
.hasTooltip.cp-tip:hover::after {
    top: 1em !important;
}
.cvd-chart-tooltip.hasTooltip:hover::after {
    top: 1.5em !important;
}
.hasTooltip .toolytip.cvdtip.cvd-top-tip {
    top : 30px;
}
@media (min-width: 1399px){
    .hasTooltip .toolytip.cvdtip.cvd-top-tip {
        top: 34px;
    }
}
.pm-btn{
    cursor: default !important;
}
@media (min-width: 1024px) and (max-width: 1299px){
    .hasTooltip.pm-tip .toolytip{
        left: -100px !important;
    }
}
.trend-block.sid-trend-block {
    height: 100%;
}