.chart_panel {
  position: relative;
}
.chart_panel.chart_disabled {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.chart_activate {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  background-color: #4e8e8b;
  color: #FFF;
  padding: 6px 10px;
  border: 1px solid #FFF;
  cursor: pointer;
}
.chart_holder {
  width: 100%;
  height: 390px;
}
.chart_animate_element {
  width:12px;
  height:12px;
  border-radius:100%;
  box-sizing:border-box;
  border-color:#20ccc1;
  background-color:#20ccc1;
  animation:animate 2s 0s ease-out infinite
}
.tooltip_chart {
  position:absolute;
  width:150px;
  height:150px;
  left:-69px;
  top:-69px;
}
@-webkit-keyframes fade {
  from { opacity: .4 }
  to { opacity: 1 }
}
@keyframes fade {
  from { opacity: .4 }
  to { opacity: 1 }
}
.chart_fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 0.5s
}
@-webkit-keyframes animate{
  0%{box-shadow:0 0 4px 3px rgba(32, 204, 193, 0), 0 0 0px 0px rgba(255, 255, 255, 0.5), 0 0 0px 0px rgba(32, 204, 193, 0);}
  10%{box-shadow:0 0 4px 3px rgba(32, 204, 193, 0.5), 0 0 6px 5px rgba(255, 255, 255, 0.5), 0 0 6px 7px rgba(32, 204, 193, 0.5);}
  100%{box-shadow:0 0 4px 3px rgba(32, 204, 193, 0), 0 0 0px 20px rgba(255, 255, 255, 0.5), 0 0 0px 20px rgba(32, 204, 193, 0);}
}
@keyframes animate{
  0%{box-shadow:0 0 4px 3px rgba(32, 204, 193, 0), 0 0 0px 0px rgba(255, 255, 255, 0.5), 0 0 0px 0px rgba(32, 204, 193, 0);}
  10%{box-shadow:0 0 4px 3px rgba(32, 204, 193, 0.5), 0 0 6px 5px rgba(255, 255, 255, 0.5), 0 0 6px 7px rgba(32, 204, 193, 0.5);}
  100%{box-shadow:0 0 4px 3px rgba(32, 204, 193, 0), 0 0 0px 20px rgba(255, 255, 255, 0.5), 0 0 0px 20px rgba(32, 204, 193, 0);}
}