#guitar-bg {
  fill: #333;
}

.notes .note {
  stroke-width: 0;
  /* fill: hsla( 209, 55%, 55%, .8 ); */
  fill: #222;
  /* filter: url('/main/svg/filters.svg#drop-shadow'); */
}

/* circle? */
.notes .scale-root .note { 
  fill: #000;
}

.notes .scale-root tspan { 
  fill: #dead10;
}

.notes tspan {
  fill: #eee;
}

.notes .note[data-x="1"] { }

.markers .marker {
  opacity: .6;
}

.sneezeguard {
  opacity: 1;
}

/* octave colors */
.notes g[data-octave="6"] .sneezeguard { fill: hsla( 270, 66%, 44%, .8 ); }
.notes g[data-octave="5"] .sneezeguard { fill: hsla( 270, 66%, 44%, .8 ); }
.notes g[data-octave="4"] .sneezeguard { fill: hsla( 209, 96%, 21%, .8 ); }
.notes g[data-octave="3"] .sneezeguard { fill: hsla( 109, 96%, 21%, .8 ); }
.notes g[data-octave="2"] .sneezeguard { fill: hsla(   9, 96%, 21%, .8 ); }

svg#intervaldots {
  -webkit-user-select: none;
}

svg#intervaldots .num {
  font-family: "trebuchet ms";
  font-size: 8px;
  fill: #eee;
  /* align-content: center; */
  text-anchor: middle;
  alignment-baseline: middle;
  dominant-baseline: middle;
  /* font-family: "avenir", "segoe ui", "menlo", monospace; */
}

svg#intervaldots .num tspan {
  alignment-baseline: middle;
}

svg#intervaldots .interval {
  fill: hsla(207, 4%, 51%, .5);
}

svg#intervaldots .interval.selected {
  fill: hsla( 209, 96%, 21%, .8 );
}

svg#keyboard {
}

svg#keyboard .key {
  fill: hsla(207, 4%, 51%, .5);
}

svg#keyboard .key.selected {
  fill: hsla( 209, 96%, 21%, .7 );  
}

svg#keyboard .key.selected.root {
  fill: #eee;
}