#dart.container {
    max-width: 100%;
    padding: 0;
}

#diclWrapper {
    padding-bottom: 30px;
}

#diclWrapper .legendchartSpace1,
#diclWrapper .legendchartSpace2 {
    transform: translate(-428px, -64px);
}

#diclWrapper .piechartSpace1,
#diclWrapper .piechartSpace2 {
    transform: translateX(104px);
}

#diclWrapper .chartContent1 {
    padding-top: 50px;
    display: flex;
}

#diclWrapper .svg-container {
    display: inline-block;
    position: relative;
    width: 100%;
    padding-bottom: 100%;
    /* aspect ratio */
    vertical-align: top;
    /* overflow: hidden; */
    /* transform: translateY(-15px); */
}

#diclWrapper .svg-content-responsive {
    display: inline-block;
    position: absolute;
    top: 10px;
    left: 0;
}

#diclWrapper .filterTypeSection {
    background-color: #54565a;
}

#diclWrapper .typesColumn {
    width: min(100%, 1144px);
    justify-content: space-between;
    margin: 0 auto;
}

#diclWrapper .typesColumn p {
    color: #fff;
    font-family: "Open Sans", sans-serif;
    font-size: 12px;
    font-style: italic;
    font-weight: 400;
    line-height: normal;
    padding-top: 11px;
    padding-bottom: 11px;
}

#diclWrapper .typesColumn span {
    font-style: normal;
    font-weight: 700;
}

#diclWrapper .typesColumnList {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 0px 0px 11px;
    margin: 0;
}

#diclWrapper .typesColumnList .typeList {
    border-radius: 20px;
    border: #fff 1px solid;
    text-align: center;
    /* margin-right: 13px; */
    margin: 0;
    color: #fff;
    cursor: pointer;
    padding: 3px 11px;
    font-family: "Open Sans", sans-serif;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    /* line-height: normal; */
}

#diclWrapper .pieContain {
    height: 200px;
    margin-top: 20px;
}

#diclWrapper .textNote {
    font-family: "Open Sans", sans-serif;
    font-size: 9px;
    font-style: italic;
    font-weight: 400;
    line-height: 13px;
    display: flex;
    justify-content: end;
    margin-top: -15px;


}

#diclWrapper .vl {
    border-left: 0.5px solid #fff;
    height: 25px;
    margin-left: 0;
}

#diclWrapper .typesColumnList .typeList.selected {
    background-color: #a9d2d0;
    color: #54565a;
    border: #a9d2d0;
    font-weight: 700;
}

#diclWrapper .chartContent {

    display: flex;
    justify-content: center;
}

#diclWrapper .chartContent1 .piechartBox.pieSet {
    background-color: #f2f2f2;
    padding: 30px;
    max-width: 564px;
    height: 564px;
}

#diclWrapper .chartContent1 .piechartBox {
    background-color: #f2f2f2;
    padding: 30px;
    max-width: 564px;
    height: 383px;
}

#diclWrapper .bgGrey {
    display: none;
}

#diclWrapper .chartContent1 #chartq13 {
    margin-right: 18px;
}

#diclWrapper .percentText {
    font-family: "Open Sans", sans-serif;
    font-size: 32px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    margin: 0;
}

#diclWrapper #chartq13 .percentText {
    color: #458629;
}

#diclWrapper #chartq14 .percentText {
    color: #3c828e;
}

#diclWrapper .reportText {
    color: #000;
    font-family: "Open Sans", sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
    margin-bottom: 0;
}

#diclWrapper .typesColumn li {
    list-style: none;
}

#diclWrapper .chartContent .contentBox {
    background-color: #f2f2f2;
    width: 1144px;
    height: 275px;
}

#diclWrapper .chartContent2 .percentHead {
    max-width: 50%;
    padding-top: 20px;
    padding-left: 32px;
}

#diclWrapper .chartContent2 .percentText {
    color: #0c1c40;
}

#diclWrapper .textClass {
    text-anchor: middle;
    font-size: 14px;
}

#diclWrapper .chartContent1 .textNote {
    margin-top: 14px;
}

#diclWrapper .graphText {
    font-family: "Open Sans", sans-serif;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 27.24px;
    color: #000;
    padding: 0px;
    padding-top: 13px;
    margin: auto;
    width: min(100%, 1144px);
    justify-content: left;
}

#diclWrapper .graphText p {
    font-family: "Open Sans", sans-serif;
    font-style: normal;
    margin-bottom: 44px;
    max-width: 85%;
}

#diclWrapper .bgGrey svg {
    /* transform: translate(12px,0) */
    /* padding-left: 1rem ;
    padding-right: 1rem; */
}

#diclWrapper .bgGrey .col-md-4 {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

/* mobile  css  */
@media only screen and (max-width: 991px) {
    #diclWrapper .chartContent1 {
        flex-direction: column;
    }

    #diclWrapper .chartContent1 #chartq13 {
        margin-right: 0px;
    }

    #diclWrapper .typesColumnList {
        flex-direction: column;
    }

    #diclWrapper .typesColumnList .typeList {
        margin: 7.5px 0px;
        padding: 7.5px 11px;
    }

    #diclWrapper .vl {
        display: none;
    }

    #diclWrapper .filterTypeSection {
        padding: 0px 30px 0px 30px;
    }

    #diclWrapper .graphText p {
        font-family: "Open Sans", sans-serif;
        font-style: normal;
        max-width: 100%;
        margin-left: 0px;
        padding: 0 10px;
    }

    #diclWrapper .typeList.init::after {
        content: "";
        display: inline-block;
        background-image: url("/assets/Arrow.svg");
        background-repeat: no-repeat;
        width: 20px;
        height: 20px;
        background-position: right;
        vertical-align: middle;
    }

    #diclWrapper .typesColumnList .typeList.init {
        background-color: #a9d2d0;
        color: #54565a;
    }

    #diclWrapper .typesColumnList .typeList {
        border: #54565a 1px solid;
        color: #54565a;
        background-color: #fff;
    }

    #diclWrapper .hideStrong {
        display: none !important;
    }

    #diclWrapper .filterTypeSection.bg {
        background: linear-gradient(0deg, #fff 78%, #54565a 40%);
    }

    #diclWrapper .filterTypeSection.nobg {
        background: #54565a;
    }

    #diclWrapper .typesColumn p {
        margin-bottom: 5px;
        max-width: 75%;
        margin: 0 0 5px 0;
    }

    #diclWrapper .qsubHeading {
        text-align: center;
    }

    #diclWrapper .typesColumnList {
        padding: 0px 0px 0px;
    }

    #diclWrapper .chartContent2 #chartq21 {
        transform: translate(0, -264px);
    }

    #diclWrapper .chartContent .contentBox {
        height: 480px;
    }

    #diclWrapper .slices {
        transform: translate(250px, 108px);
    }

    /* .chartContent2 .textNote{
        transform: translate(-15px,304px);
    } */
    #diclWrapper .chartContent2 .percentHead {
        width: 100%;
        max-width: 90%;
    }

    #diclWrapper .chartContent2 .contentBox .textNote {
        transform: translate(15px, 332px);
    }
}

#diclWrapper polyline {
    stroke: #76787b;
    stroke-width: 1px;
    fill: none;
}

/* new css below chart */
#diclWrapper .qsubHeading {
    font-family: "Open Sans", sans-serif;
    font-size: 12px;
    font-style: bold;
    font-weight: 700;
    line-height: 18px;
    margin: 0 auto;
    padding-bottom: 10px;
}

#diclWrapper .bgGrey {
    background-color: #dbdddd;
}

#diclWrapper .pieLableset {
    font-family: "Open Sans", sans-serif;
    font-size: 40px;
    color: #ffffff;
    font-weight: 700;
    font-style: bold;
    transform: translate(2px, 5px) scale(0.4);
}

#diclWrapper .subPieDesc {
    font-family: "Open Sans", sans-serif;
    font-size: 9px;
    font-weight: 700;
    font-style: normal;
    line-height: 12px;
    text-align: center;
    padding: 0 3px;
}

#diclWrapper #chartq21 {
    transform: translate(-8px, -392px);
}

#chartq21 .label {
    font-size: 14px;
}

#diclWrapper .chartContent2 .textNote {
    transform: translate(-15px, 155px);
}

.legend text {
    font-family: "Open Sans", sans-serif;
}

#diclWrapper .chartContent {
    align-items: center;
}