.chart-container{
    position: relative; 
    width: 980px;
}
.loader{
    background: #348F50;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to bottom, #56B4D3, #348F50);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to bottom, #56B4D3, #348F50); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100vh;
    position: fixed;
    z-index: 10000000;
    clip-path: circle(150% at 100% 0);
    transition: clip-path 0.8s ease-in-out;
  }
  .loader2{
    clip-path: circle(0% at 100% 0);
  }
@media(min-width: 200px) and (max-width: 700px){
    .chart-container{
        width: 330px;
    }
    #example tbody{
        font-size: small;
    }
}
@media(min-width: 768px){
    .chart-container{
        width: 700px;
    }
}
@media(min-width: 820px){
    .chart-container{
        width: 760px;
    }
}

@media(min-width: 912px){
    .chart-container{
        width: 800px;
    }
}

@media(min-width: 1180px){
    .chart-container{
        width: 900px;
    }
}

@media(min-width: 1024px){
    .chart-container{
        width: 950px;
    }
}

@media(min-width: 1920px){
    .chart-container{
        width: 1250px;
    }
}

.color0{
    color: black;
    background-color: aliceblue;
}

.color1{
    color: aliceblue !important;
    background-color: #1476BE !important;
}

.color2{
    color: black !important;
    background-color: #9B9B9B !important;
}

.color3{
    color: azure !important;
    background-color: #0E963C !important;
}

.color4{
    color: azure !important;
    background-color: #E32C2C !important;
}
.color5{
    color: azure !important;
    background-color: #FF6716 !important;
}

.color6{
    color: azure !important;
    background-color: #C9087D !important;
}

.color7{
    color: black !important;
    background-color: #FFFB12 !important;
}

.color8{
    color: azure !important;
    background-color: #8E5D02 !important;
}