svg {

  &#join-vs-union {
    max-width: 525px;
    width: 100%;
    margin-bottom: 2rem;

    .st0{fill: $svg-table-code-bg;}
  	.st1{fill: $svg-table-header;}
  	.st2{fill: $svg-table-row-alt1;}
  	.st3{fill:none;stroke: $svg-table-stroke;stroke-width:2;stroke-miterlimit:10;}
  	.st4{fill:none;stroke: $svg-table-stroke;stroke-width:4;stroke-miterlimit:10;}
  	.st5{fill: $svg-table-row-alt2;}
  	.st6{fill: $svg-table-code;}
  	.st7{font-family:'Roboto Mono';}
  	.st8{font-size:14.2px;}
  	.st9{fill: $svg-table-code-operator;}
  	.st10{fill: $svg-table-code-string;}
  }

  &[id^='geo-s2-cells-'] {
    max-width: 250px;
    .geo-cell{fill:rgba($svg-geo-s2-cell, 0.25);stroke:$svg-geo-s2-cell;stroke-width:3;stroke-linejoin:round;stroke-miterlimit:10;}
  	.geo-region{fill:rgba($svg-geo-region, 0.35);stroke:$svg-geo-region;stroke-width:3;stroke-linejoin:round;stroke-miterlimit:10;}
  	.geo-point{fill:$svg-geo-point;}
  }

  &#timed-moving-average {
    margin: 1rem 0 3rem;
    max-width: 425px;
    .st0 {stroke: $article-text;}
    .st1 {fill: $article-text;}
    .st2 {font-family: $rubik; font-weight: $medium}
  }
}

//////////////////////////// Styles for SVG legends ////////////////////////////

span.key-geo-cell {
  display: inline-block;
  vertical-align: middle;
  margin: 0 .5rem .25rem 0;
  width: 1.1em;
  height: 1.1em;
  border: 2px solid $svg-geo-s2-cell;
  background: rgba($svg-geo-s2-cell, .25);
  border-radius: 2px;
}
span.key-geo-region {
  display: inline-block;
  vertical-align: middle;
  margin: 0 .5rem .25rem 0;
  width: 1.1em;
  height: 1.1em;
  border: 2px solid $svg-geo-region;
  background: rgba($svg-geo-region, .35);
  border-radius: 2px;
}
span.key-geo-point {
  display: inline-block;
  margin: 0 .7rem 0 .25rem;
  width: .65rem;
  height: .65rem;
  border-radius: 50%;
  background: $svg-geo-point;
}
