@media (max-width:768px) {
  #chartdiv {
    width: 100% !important; 
    height: 30rem !important;
    position:relative;
    margin: 0 auto;
    padding: 0 !important;
  }
  #chartdiv-2 {
    width: 100% !important; 
    height: 30rem !important;
    position:relative;
    margin: 0 auto;
    padding: 0 !important;
  }
  #chartdiv4 {
    width: 100% !important; 
    height: 30rem !important;
    position:relative;
    margin: 0 auto;
    padding: 0 !important;
  }  
  #chartdiv4-2 {
    height: 30rem !important;
    width: 100% !important; 
    position:relative;
    margin: 0 auto;
    padding: 0 !important;
  }


  #chartdiv canvas{
    width: 100% !important;
   
  }
  #chartdiv-2 canvas{
    width: 100% !important;
  }
  #chartdiv4 canvas{
    width: 100% !important;
  }  
  #chartdiv4-2 canvas{
    width: 100% !important;
  }
}

#chartdiv {
  height: 50rem;
  width: 50%; 
  font-family: "Akrobat";
  border-top: 0 none;
}

#chartdiv-2{
  height: 50rem;
  width: 50%; 
  font-family: "Akrobat";
  border-top: 0 none;
}
 

#chartdiv4 {
  height: 50rem;
  width: 50%; 
  font-family: "Akrobat";
  border-top: 0 none;
}
#chartdiv4-2{
  height: 50rem;
  width: 50%; 
  font-family: "Akrobat";
  border-top: 0 none;
}
 








 /* @media screen and (max-width:1023px){

  #chartdiv ,#chartdiv4{
      position: absolute;
      width: 50%; 
      top: 0;
      left: 0;
      right: 0;
      bottom: 50%;
    font-family: "Akrobat";
  }
  #chartdiv-2,#chartdiv4-2 {
    position: absolute;
    width: 50%; 
      top: 50%;
      left: 0;
      right: 0;
      bottom: 0;
    font-family: "Akrobat";
  }
} */
/* 
  .row {
display: flex;
}

.column {
flex: 100%;
} */

  /* .container-water{
    padding-top:100%; 
    position: relative;
    width: 100%;
  } */
  /* 75% 4:3 , 56.25% 16:9 , 42.85% 21:9*/
  
   /* #chartdiv4,#chartdiv {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;


    


    }*/

/*@media screen and (max-width:1023px){
  #chartdiv4,#chartdiv {
       width: 100%; 
     
      margin: auto;
      border-top: 0 none;



  }

}*/










/* chart-3 */


/* 

#chartdiv{
    position: absolute;
    width: 56.25%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    font-family: "Akrobat";
  }

  #chartdiv-2{
    position: absolute;
    width: 56.25%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    font-family: "Akrobat";
  } */
/* 
  #chartdiv {
    left: 50%;
    height: 50rem;
  }

  #chartdiv-2 {
    right: 50%;
    height: 50rem;
  } */
/* 
  @media screen and (max-width:1023px) {

    #chartdiv4,
    #chartdiv {
      width: 100%;


      border-top: 0 none;
      bottom: 200px
    }

    #chartdiv4-2,
    #chartdiv-2 {
      width: 100%;

      bottom: 0;
      border-top: 0 none;
      top: 200px
    }

  } */
/* 

  .container-water {
    padding-top: 100%;
    position: relative;
    width: 100%;
  } */



  /* @media screen and (max-width:1023px){
    #chartdiv4,#chartdiv4-2 {
         width: 50%; 
       
        margin: auto;
        border-top: 0 none;



    }

  } */
      /* #chartdiv4 {
        position: absolute;
        width: 50%; 
        top: 0;
        left: 50%;
        right: 0;
        bottom: 0;
      font-family: "Akrobat";
    }
    #chartdiv4-2 {
      position: absolute;
      width: 50%; 
        top: 0;
        left: 0;
        right: 50%;
        bottom: 0;
      font-family: "Akrobat";
    } */
    
    /* .row {
  display: flex;
}

.column {
  flex: 100%;
} */


/* 
#chartdiv ,#chartdiv4{
  position: absolute;
  width: 56.25%; 
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
font-family: "Akrobat";
}
#chartdiv-2,#chartdiv4-2 {
position: absolute;
width: 56.25%; 
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
    margin: auto;
font-family: "Akrobat";
}

@media screen and (max-width:1023px){
#chartdiv4,#chartdiv {
   width: 100%; 
 
 
  border-top: 0 none;
bottom:200px


}
#chartdiv4-2,#chartdiv-2  {
   width: 100%; 

        bottom:0;
   border-top: 0 none;
   top:200px



}

} */

/* 
.container-water{
padding-top:100%; 
position: relative;
width: 100%;
}
 */


/* 
@media screen and (max-width:1023px){
  #chartdiv,#chartdiv4 {
    position: absolute;
      width: 50%; 
      top: 0;
      left: 50%;
      right: 0;
      bottom: 0;
      border-top: 0 none;



  } */
  /* #chartdiv-2#chartdiv4-2{
    position: absolute;
      width: 50%; 
      top: 0;
      left: 50%;
      right: 0;
      bottom: 0;
    font-family: "Akrobat";
    border-top: 0 none;
  }

} */
    /* #chartdiv,#chartdiv4 {
      position: absolute;
      width: 50%; 
      top: 0;
      left: 50%;
      right: 0;
      bottom: 0;
    font-family: "Akrobat";
    border-top: 0 none;
  }
  #chartdiv-2, #chartdiv4-2 {
    position: absolute;
    width: 50%; 
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
    font-family: "Akrobat";
    border-top: 0 none;
  } */
  /* .row {
display: flex;
}

.column {
flex: 50%;
} */

  /* .container-water{
    padding-top:100%; 
    position: relative;
    width: 100%;
  } */
  /* 75% 4:3 , 56.25% 16:9 , 42.85% 21:9*/
  
   /* #chartdiv4,#chartdiv {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;


    


    }*/

/*@media screen and (max-width:1023px){
  #chartdiv4,#chartdiv {
       width: 100%; 
     
      margin: auto;
      border-top: 0 none;



  }

}*/