evt {
  padding: 0px 4px 2px 4px;
  font-weight: bold;
  color: white;
  display: inline-block;
}
evt div {
  border-radius: 5px;
  padding-left: 4px;
  padding-right: 4px;
}
circle-demo {
  cursor: pointer;
  width: 100%;
  height: 300px;
  display: block;
}
circle-demo .circle {
  fill: none;
  stroke: rgba(0, 0, 0, 0.5);
  stroke-dasharray: 4, 4;
}
circle-demo .center-point,
circle-demo .outer-point {
  fill: #e74c3c;
}
circle-demo .center-line {
  stroke: #e74c3c;
  stroke-width: 4;
}
circle-demo .arc {
  fill: #3498db;
  stroke: none;
}
circle-demo .radius-label {
  fill: #e74c3c;
  text-anchor: middle;
}
circle-demo .diameter-g {
  stroke: #2ecc71;
  stroke-width: 4;
}
pi-demo {
  width: 100%;
  height: 300px;
  display: block;
}
pi-demo .circle {
  fill: none;
  stroke: rgba(0, 0, 0, 0.4);
  stroke-dasharray: 2, 2;
}
pi-demo .circum {
  fill: none;
  stroke: #3498db;
  stroke-width: 4;
}
pi-demo .diameter {
  stroke: #2ecc71;
  stroke-width: 4;
}
pi-demo .diameter-dash {
  stroke: #2ecc71;
  stroke-dasharray: 2, 2;
}
pi-demo .circum-dash {
  stroke: #3498db;
  stroke-dasharray: 2, 2;
}
pi-demo .circum-label-g,
pi-demo .diameter-label-g {
  text-anchor: middle;
}
pi-demo .circum-label {
  fill: #3498db;
}
pi-demo .diameter-label {
  fill: #2ecc71;
}
pi-demo .pi-label-g {
  font-size: 28px;
}
pi-demo .pi-label-g line {
  stroke: black;
  shape-rendering: crispEdges;
}