.multi-graph{
  width: 100%;
  height: 75px;
  position: relative;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
  box-sizing : border-box;
}
.multi-graph:before{
  content: '';
  width: 75px;
  content: '';
  width: 62.5px;
  height: 35px;
  border: 10px solid VAR(--WH01);
  border-bottom: none;
  position: absolute;
  box-sizing: border-box;
  transform-origin: 50% 0%;
  border-radius: 50px 50px 0 0;
  /* left: 69px; */
  top: 44px;
}
.graph{
  width: 100px;
  height: 50px;
  border:15px solid var(--fill);
  border-top: none;
  position: absolute;
  transform-origin :50%  0% 0;
  border-radius: 0 0 300px 300px ;
  /* left: 50px; */
  top: 100%;
  z-index: 0;
  animation : 1s fillGraphAnimation ease-in;
  transform: rotate( calc( 1deg * ( var(--percentage) * 1.8 ) ) );
  box-sizing : border-box;
  cursor: pointer;
}
.graph:after{
  // content: attr(data-name) ;
  content: attr(data-name) ' ' counter(varible) '%';
  counter-reset: varible var(--percentage);
  background: var(--fill) ;
  box-sizing : border-box;
  border-radius : 2px;
  color: #fff;
  font-weight: 200;
  font-size: 12px;
  height: 20px;
  padding: 3px 5px;
  top: 0px;
  position: absolute;
  /* left: 0; */
  transform: rotate(calc( -1deg * var(--percentage) * 1.8 ))  translate(-30px , 0px);
  transition:0.2s ease-in;
  transform-origin: 0 50% 0;
  opacity: 0;
}
.graph:after:hover{
  opacity: 0.8;
}
.graph:after:hover:after{
  opacity: 1;
  left: 30px;
}
@keyframes fillAnimation{
  0%{transform : rotate(-45deg);}
  50%{transform: rotate(135deg);}
}

@keyframes fillGraphAnimation{
  0%{transform: rotate(0deg);}
  50%{transform: rotate(180deg);}
}


.multi-graph-big{
  width: 100%;
  height: 75px;
  position: relative;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
  box-sizing : border-box;
}
.multi-graph-big:before{
  content: '';
  width: 150px;
  content: '';
  width: 104px;
  height: 60px;
  border: 10px solid VAR(--WH01);
  border-bottom: none;
  position: absolute;
  box-sizing: border-box;
  transform-origin: 50% 0%;
  border-radius: 50px 50px 0 0;
  /* left: 48; */
  top: 24px;
}
.graph-big{
  width: 150px;
  height: 75px;
  border:15px solid var(--fill);
  border-top: none;
  position: absolute;
  transform-origin :50%  0% 0;
  border-radius: 0 0 300px 300px ;
  /* left: 25px; */
  top: 100%;
  z-index: 0;
  animation : 1s fillGraphAnimation ease-in;
  transform: rotate( calc( 1deg * ( var(--percentage) * 1.8 ) ) );
  box-sizing : border-box;
  cursor: pointer;
}
.graph-big:after{
  // content: attr(data-name) ;
  content: attr(data-name) ' ' counter(varible) '%';
  counter-reset: varible var(--percentage);
  background: var(--fill) ;
  box-sizing : border-box;
  border-radius : 2px;
  color: #fff;
  font-weight: 200;
  font-size: 12px;
  height: 20px;
  padding: 3px 5px;
  top: 0px;
  position: absolute;
  /* left: 0; */
  transform: rotate(calc( -1deg * var(--percentage) * 1.8 ))  translate(-30px , 0px);
  transition:0.2s ease-in;
  transform-origin: 0 50% 0;
  opacity: 0;
}
.graph-big:after:hover{
  opacity: 0.8;
}
.graph-big:after:hover:after{
  opacity: 1;
  /* left: 30px; */
}

.container-bar .bar{
  /* width:100%; */
  height:10px;
  animation : 1s fillBarAnimation ease-in;
}
@media only screen and (min-width: 75em) and (max-width:100em) and (pointer:fine){
  /* .multi-graph-big:before{
    width: 40px;
    height: 30px;
    left: 45px;
    top: 55px;
    border-width:7px;
  }
  .graph-big{
    width: 80px;
    height: 40px;
  } */
}

@media only screen and (min-width:48em) AND (max-width:84em) and (pointer:fine){
  /* .multi-graph-big:before{
    width: 40px;
    height: 30px;
    left: 45px;
    top: 55px;
    border-width:7px;
  }
  .graph-big{
    width: 80px;
    height: 40px;
  } */
}


@keyframes fillBarAnimation{
  0%{width:0%}
  33%{width:33%}
}