.ring { cursor: pointer; }

.hit {
  fill: none;
  stroke: transparent;
  stroke-width: 30;   /* big click target */
  pointer-events: stroke;
}

.shape {
  fill: none;
  stroke: red;
  stroke-width: 13;
}

.ring.active {
  stroke: #FFBF2C;
  fill: #FFBF2C;
}


.ring.innerMore {
  stroke: #829D02;
  stroke-width: 12;
}

.ring.innerLess {
  stroke: #C3F684;
  stroke-width: 10;
}

.ring.outerMore {
  stroke: #9D4602;
  stroke-width: 120;
}

.ring.outerLess {
  stroke: #F68484;
  stroke-width: 10;
}

.ring.heightHigher {
  stroke: #025D9D;
  stroke-width: 12;
}

.ring.heightLower {
  stroke: #84C9F6;
  stroke-width: 10;
}

.ring.default {
  stroke: #CECECE;
  stroke-width: 11;
}