
  .level-describe {
    margin: 40px 0 20px 65px;
}
 .level-describe p{
    font-size: 12px;
    line-height: 1.3;
    margin-bottom: 3px;
 }
    .double-chart {
    width: 100%;
    height: 350px;
    border-bottom: 3px solid #086129;
    border-left: 3px solid #086129;
    padding: 0;
    text-align: center;
}
.number-data {
    width: 60px;
    text-align: right;
}
.devide-space {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
}
ul.data-number {
    display: block;
    font-size: 13px;
    /* position: absolute; */
    bottom: 0;
    /* right: 0; */
    list-style: none;
}
ul.double-img-list{
    list-style: none;
}

ul.data-number li {
    margin-top: 30px;
    list-style: none;
}
.pie-chart-double h5{
    font-size: 17px;
    text-align: center;
    margin-bottom: 10px;
    color: #086129;
    margin-top: 50px;
margin-left:90px;
margin-bottom:-20px;

}
.double-chart {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}

.double-img-first {
    width: 33%;
    text-align: center;
    display: inline-flex;
    flex-direction: row;
    justify-content: center;
}

ul.double-img-list li img {
    width: 35px;
    height: auto;
    line-height: 1;
    margin-bottom: 0px;
    transform: rotate(180deg);
}
ul.double-img-list {
    width: 40px;
}
.double-img-first {
    transform: rotate(180deg);
}
p.number-year {
    width: 100%;
    text-align: center;
    display: block;
    position: absolute;
    /* bottom: 0px; */
    top: -30px;
    font-size: 14px;
    transform: rotate(181deg);
}
li.count {
    font-size: 11px;
    margin: 5px 0;
    transform: rotate(179deg);
}
img.water-comp {
    width: 26px;
    margin-right: 5px;
}


.double-img-list li {
  animation: fadein 1s ease-in 0s 1 forwards;
  opacity: 0;
}
.double-img-list li:nth-child(0) {
  animation-delay: 0s;
}
.double-img-list li:nth-child(1) {
  animation-delay: 0.1s;
}
.double-img-list li:nth-child(2) {
  animation-delay: 0.2s;
}
.double-img-list li:nth-child(3) {
  animation-delay: 0.3s;
}
.double-img-list li:nth-child(4) {
  animation-delay: 0.4s;
}
.double-img-list li:nth-child(5) {
  animation-delay: 0.5s;
}
.double-img-list li:nth-child(6) {
  animation-delay: 0.6s;
}
.double-img-list li:nth-child(7) {
  animation-delay: 0.7s;
}
.double-img-list li:nth-child(8) {
  animation-delay: 0.8s;
}
.double-img-list li:nth-child(9) {
  animation-delay: 0.9s;
}
.double-img-list li:nth-child(10) {
  animation-delay: 1.1s;
}
.double-img-list li:nth-child(11) {
  animation-delay: 1.5s;
}

.double-img-list li:nth-child(12) {
  animation-delay: 1.8s;
}

.double-img-list li:nth-child(13) {
  animation-delay: 2s;
}

.double-img-list li:nth-child(14) {
  animation-delay: 2.3s;
}

.double-img-list li:nth-child(15) {
  animation-delay: 2.5s;
}



@keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}


.main-div .first, .second-div, .third-div, .four-div, .five-div{
animation: fadein 1s ease-in 0s 1 forwards;
  opacity: 0;
}

.main-div .first {
  animation-delay: 0s;
}

.main-div .second-div {
  animation-delay: 1s;
}

.main-div .third-div {
  animation-delay: 1.5s;
}

.main-div .four-div {
  animation-delay: 2s;
}

.main-div .five-div {
  animation-delay: 2.5s;
}





li.line {
    line-height: 0;
    margin-bottom: -2px;
}
.graph {
    padding: 5% 0 8% 0;
}
 li.black-line {
    line-height: 0;
    margin-bottom: -2px;
}
li.count.blck-line {
    background: #d91111;
    margin: 0;
    font-size: 12px;
    color: #fff;
}


li.black-line img {
    width: 38px!important;
}

    .main-div {
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin-top: 165px;
}
.main-div img{
    width: 40px;
}
.first {
    margin: 2px -23px 0 7px;
    z-index: 99;
}

.second-div {
   width: 135px;
    background: #d6df22;
    height: 4px;
    transform: rotate(18deg);
    margin: 60px -20px 0 0;

}
.third-div {
    margin: 40px 2px 0 -4px;
    z-index: 99;
}
.four-div {
    width: 133px;
    background: #d6df22;
    height: 4px;
    transform: rotate(329deg);
    margin: 47px 1px 0 -32px;
}
li.rope-tc {
    background: #000;
    color: #fff;
    transform: rotate(180deg);
     width: 99%;
    margin-left: 1%;
}

li.black-line img {
    width: 101%!important;
}

li.count.blck-line {
    width: 101%!important;
}

.five-div {
    margin: -24px 2px 0 -31px;
    z-index: 99;
}

ul.bio-graph {
       display: flex;
    flex-direction: row;
    width: 100%;
    position: absolute;
    bottom: 20px;
    justify-content: center;
    padding-left: 40px;
}

ul.bio-graph li {
    width: 30%;
    text-align: center;
}
.second-div.gp-1 {
       width: 130px;
    background: #d6df22;
    height: 4px;
    transform: rotate(319deg);
    margin: 30px -38px 0 0;
    }
    .four-div.gp-1 {
    width: 142px;
    background: #d6df22;
    height: 4px;
    transform: rotate(12deg);
    margin: 4px -22px 0 -20px;
}
.five-div.gp-1 {
    margin: -20px 0 0 0;
}
.first.gp-1 {
    margin: 32px -36px 0 7px;
    z-index: 9;
}
.third-div.gp-1 {
    margin: -50px 0 0 0;
}

ul.data-number.emis li {
    margin-top: 23px;
}

ul.data-number.Freshwater li {
    margin-top: 18px;
}

ul.data-number.total-water li {
    margin-top: 14px;
}

ul.data-number.none-hazard li {
    margin-top: 38px;
}

ul.data-number.generate-inmt li {
    margin-top: 18px;
}
.second-div.gp-base-graph-1{
    width: 181px;
    background: #d6df22;
    height: 4px;
    transform: rotate(317deg);
    margin: -22px -35px 0 -22px;
}



.third-div.gp-base-graph-1 {
    margin: -122px 2px 0 -10px;
    z-index: 99;
}

.four-div.gp-base-graph-1 {
    width: 133px;
    background: #d6df22;
    height: 4px;
    transform: rotate(29deg);
    margin: -51px 1px 0 -33px;
}

.five-div.gp-base-graph-1 {
    margin: -57px 2px 0 -32px;
    z-index: 99;
}
.main-div.base-graph-1{
      margin-top: 156px;
}
.main-div.base-graph-2{
  margin-top: 102px;
}

.second-div.gp-base-graph-2 {
    width: 140px;
    background: #d6df22;
    height: 4px;
    transform: rotate(339deg);
    margin: 35px -20px 0 0;
    margin: 15px -20px 0 0;
}

.third-div.gp-base-graph-2 {
    margin: -48px 2px 0 -5px;
    z-index: 99;
}

.four-div.gp-base-graph-2 {
    width: 133px;
    background: #d6df22;
    height: 4px;
    transform: rotate(17deg);
    margin: 10px 1px 0 -26px;
}

.five-div.gp-base-graph-2 {
    margin: -8px 2px 0 -24px;
    z-index: 99;
}

.main-div.base-graph-3{
  margin-top: 175px;
}

.four-div.gp-base-graph-3 {
    width: 133px;
    background: #d6df22;
    height: 4px;
    transform: rotate(16deg);
    margin: 98px 1px 0 -29px;
}
.five-div.gp-base-graph-3{
  margin: 78px 2px 0 -25px;
}
.main-div.base-graph-4{
  margin-top: 134px;
}

.second-div.gp-base-graph-4 {
    width: 135px;
    background: #d6df22;
    height: 4px;
    transform: rotate(6deg);
    margin: 35px -20px 0 0;
    margin: 49px -15px 0 0;
}

.third-div.gp-base-graph-4{
      margin: 16px 2px 0 -6px;
}

.four-div.gp-base-graph-4 {
    width: 133px;
    background: #d6df22;
    height: 4px;
    transform: rotate(19deg);
    margin: 76px 1px 0 -29px;
}

.five-div.gp-base-graph-4{
  margin: 57px 2px 0 -25px;
}

.main-div.base-graph-5{
  margin-top: 190px;
}

.second-div.gp-base-graph-5{
      width: 135px;
    background: #d6df22;
    height: 4px;
    transform: rotate(3deg);
    margin: 46px -12px 0 0;
}
.third-div.gp-base-graph-5{
  margin: 9px 2px 0 -10px;
}

.four-div.gp-base-graph-5 {
    width: 139px;
    background: #d6df22;
    height: 4px;
    transform: rotate(10deg);
    margin: 61px 1px 0 -22px;
}
.five-div.gp-base-graph-5{
  margin: 34px 2px 0 -22px;
}
.first.gp-base-graph-5{
  margin: 3px -20px 0 7px;
}
.first.gp-base-graph-2 {
    margin: 1px -25px 0 0px;
    }

   .first.gp-base-graph-4 {
    margin: 1px -22px 0 0px;}







    /*responsive*/

    @media (max-width: 991px) {

.number-data {
    width: 70px;
    text-align: right;
}
.second-div {
width: 110px;
}

.four-div {
width: 110px;
}
ul.bio-graph{
    padding-left: 30px;
}
.second-div.gp-1 {
width: 120px;
}
.four-div.gp-1 {
width: 135px;
}
.level-describe {
    margin: 37px 0 20px 45px;
}

.second-div.gp-base-graph-4 {
    width: 115px;
margin: 50px -15px 0 0;}

    .four-div.gp-base-graph-4 {
    width: 115px;
margin: 74px 1px 0 -29px;}

    .second-div.gp-base-graph-5 {
    width: 115px;}

.five-div.gp-base-graph-4 {
    margin: 53px 2px 0 -25px;
}
.first.gp-base-graph-4 {
    margin: 4px -22px 0 0px;
}
.four-div.gp-base-graph-3{
    margin: 94px 1px 0 -29px;
}
.five-div.gp-base-graph-3 {
    margin: 72px 2px 0 -25px;
}

.second-div.gp-base-graph-2 {
    width: 110px;
    margin: 12px -20px 0 0;
}
.four-div.gp-base-graph-2 {
    width: 110px;
}
.five-div.gp-base-graph-2 {
    margin: -15px 2px 0 -24px;
    z-index: 99;
}
.second-div.gp-base-graph-1 {
    width: 194px;
    transform: rotate(302deg);
    margin: 0px -56px 0 -43px;
}
.first.gp-base-graph-1 {
    margin: 44px -23px 0 0;
}
.main-div.base-graph-2 {
    margin-top: 104px;
}

.four-div.gp-base-graph-5 {
    width: 100px;
margin: 58px 1px 0 -22px;
}

.five-div.gp-base-graph-5 {
    margin: 27px 2px 0 -23px;
}
.third-div {
    margin: 34px 2px 0 -4px;}

.four-div {
    width: 133px;
    transform: rotate(325deg);
    margin: 41px 1px 0 -33px;
}
.five-div {
    margin: -34px 2px 0 -34px;
}

.pie-chart-double h5 {
    font-size: 14px;
    text-align: center;
    margin-bottom: 10px;
    color: #086129;
    margin-top: 0px;
    margin-left: 74px;
    margin-bottom: -20px;
}


}

@media(min-width: 992px) {
     .pie-chart-double.left-space-needly {
    margin-left: 0;
}



}
