:root {
    --annotation-color: #ccc;
}
.annotation {
  pointer-events: none;
}
.annotation path {
  stroke: var(--annotation-color);
  fill: none;
}

.chart__genre .annotation path {
  stroke: #fff;
  stroke-opacity: 0.5;
  fill: none;
}

.annotation text,
.annotation .annotation-connector .connector-dot,
.annotation path.connector-arrow,
.annotation.callout.rect path.subject{
  fill: var(--annotation-color);
}

.annotation-note-title {
  font-size: 12px;
}

.annotation-note-label {
  font-size: 12px;
}


.chart__genre .annotation text {
  fill: #fff;
  font-weight: bold;
}


.annotation-note-bg {
  fill: rgba(0, 0, 0, 0);;
}

.annotation.callout.rect path.subject{
  fill-opacity: .1;
}

.annotation.badge path.subject-pointer, .annotation.badge path.subject {
  fill: var(--annotation-color);
  stroke-width: 3px;
  stroke-linecap: round;
} 

.annotation.badge path.subject-ring {
  fill: white;
  stroke-width: 3px;
}

.annotation.badge .badge-text {
  fill: white;
  font-size: .7em;
}

/* Handling edit mode styles */
.editable .annotation-subject, .editable .annotation-note {
  cursor: move;
}

circle.handle {
  stroke-dasharray: 5;
  stroke: var(--annotation-color);
  fill: rgba(255, 255, 255, .2);
  cursor: move;

  stroke-opacity: .4;
}