@eclipse-scout/chart 22.0.29 → 22.0.33

package/dist/eclipse-scout-chart-theme.css

@@ -32,11 +32,11 @@
  *     BSI Business Systems Integration AG - initial API and implementation
  */
 /*
- * Copyright (c) 2010-2021 BSI Business Systems Integration AG.
+ * Copyright (c) 2010-2022 BSI Business Systems Integration AG.
  * All rights reserved. This program and the accompanying materials
  * are made available under the terms of the Eclipse Public License v1.0
  * which accompanies this distribution, and is available at
- * http://www.eclipse.org/legal/epl-v10.html
+ * https://www.eclipse.org/legal/epl-v10.html
  *
  * Contributors:
  *     BSI Business Systems Integration AG - initial API and implementation
@@ -3434,726 +3434,968 @@
 .color-rainbow .radar-chart > .elements .color5.legend {
   fill: #00856c;
 }
-.bubble-chart {
+.bubble-chart,
+.scatter-chart {
   min-width: 75px;
 }
-.bubble-chart > .elements {
+.bubble-chart > .elements,
+.scatter-chart > .elements {
   fill: #1561A7;
 }
-.bubble-chart > .elements > .label {
+.bubble-chart > .elements > .label,
+.scatter-chart > .elements > .label {
   fill: #666666;
 }
-.inverted > .bubble-chart > .elements > .label {
+.inverted > .bubble-chart > .elements > .label,
+.inverted > .scatter-chart > .elements > .label {
   fill: #fff;
 }
-.bubble-chart > .elements > .datalabel {
+.bubble-chart > .elements > .datalabel,
+.scatter-chart > .elements > .datalabel {
   fill: #fff;
 }
-.bubble-chart > .elements > .axis-label {
+.bubble-chart > .elements > .axis-label,
+.scatter-chart > .elements > .axis-label {
   fill: #666666;
 }
-.inverted > .bubble-chart > .elements > .axis-label {
+.inverted > .bubble-chart > .elements > .axis-label,
+.inverted > .scatter-chart > .elements > .axis-label {
   fill: #fff;
 }
 .bubble-chart > .elements > .grid,
-.bubble-chart > .elements > .scale-ticks {
+.scatter-chart > .elements > .grid,
+.bubble-chart > .elements > .scale-ticks,
+.scatter-chart > .elements > .scale-ticks {
   fill: #DADADA;
 }
 .inverted > .bubble-chart > .elements > .grid,
-.inverted > .bubble-chart > .elements > .scale-ticks {
+.inverted > .scatter-chart > .elements > .grid,
+.inverted > .bubble-chart > .elements > .scale-ticks,
+.inverted > .scatter-chart > .elements > .scale-ticks {
   fill: rgba(218, 218, 218, 0.3);
 }
-.bubble-chart > .elements .color0 {
+.bubble-chart > .elements .color0,
+.scatter-chart > .elements .color0 {
   fill: rgba(21, 97, 167, 0.2);
 }
-.bubble-chart > .elements .color1 {
+.bubble-chart > .elements .color1,
+.scatter-chart > .elements .color1 {
   fill: rgba(24, 110, 190, 0.2);
 }
-.bubble-chart > .elements .color2 {
+.bubble-chart > .elements .color2,
+.scatter-chart > .elements .color2 {
   fill: rgba(116, 168, 216, 0.2);
 }
-.bubble-chart > .elements .color3 {
+.bubble-chart > .elements .color3,
+.scatter-chart > .elements .color3 {
   fill: rgba(193, 222, 249, 0.2);
 }
-.bubble-chart > .elements .color4 {
+.bubble-chart > .elements .color4,
+.scatter-chart > .elements .color4 {
   fill: rgba(1, 71, 134, 0.2);
 }
-.bubble-chart > .elements .color5 {
+.bubble-chart > .elements .color5,
+.scatter-chart > .elements .color5 {
   fill: rgba(47, 60, 69, 0.2);
 }
-.inverted .bubble-chart > .elements {
+.inverted .bubble-chart > .elements,
+.inverted .scatter-chart > .elements {
   fill: #C1DEF9;
 }
-.inverted .bubble-chart > .elements .color0 {
+.inverted .bubble-chart > .elements .color0,
+.inverted .scatter-chart > .elements .color0 {
   fill: rgba(193, 222, 249, 0.2);
 }
-.inverted .bubble-chart > .elements .color1 {
+.inverted .bubble-chart > .elements .color1,
+.inverted .scatter-chart > .elements .color1 {
   fill: rgba(147, 197, 244, 0.2);
 }
-.inverted .bubble-chart > .elements .color2 {
+.inverted .bubble-chart > .elements .color2,
+.inverted .scatter-chart > .elements .color2 {
   fill: rgba(116, 168, 216, 0.2);
 }
-.inverted .bubble-chart > .elements .color3 {
+.inverted .bubble-chart > .elements .color3,
+.inverted .scatter-chart > .elements .color3 {
   fill: rgba(76, 143, 205, 0.2);
 }
-.inverted .bubble-chart > .elements .color4 {
+.inverted .bubble-chart > .elements .color4,
+.inverted .scatter-chart > .elements .color4 {
   fill: rgba(1, 71, 134, 0.2);
 }
-.inverted .bubble-chart > .elements .color5 {
+.inverted .bubble-chart > .elements .color5,
+.inverted .scatter-chart > .elements .color5 {
   fill: rgba(47, 60, 69, 0.2);
 }
-.color-alternative .bubble-chart > .elements {
+.color-alternative .bubble-chart > .elements,
+.color-alternative .scatter-chart > .elements {
   fill: #0DA98C;
 }
-.color-alternative .bubble-chart > .elements .color0 {
+.color-alternative .bubble-chart > .elements .color0,
+.color-alternative .scatter-chart > .elements .color0 {
   fill: rgba(13, 169, 140, 0.2);
 }
-.color-alternative .bubble-chart > .elements .color1 {
+.color-alternative .bubble-chart > .elements .color1,
+.color-alternative .scatter-chart > .elements .color1 {
   fill: rgba(15, 193, 160, 0.2);
 }
-.color-alternative .bubble-chart > .elements .color2 {
+.color-alternative .bubble-chart > .elements .color2,
+.color-alternative .scatter-chart > .elements .color2 {
   fill: rgba(31, 201, 170, 0.2);
 }
-.color-alternative .bubble-chart > .elements .color3 {
+.color-alternative .bubble-chart > .elements .color3,
+.color-alternative .scatter-chart > .elements .color3 {
   fill: rgba(103, 233, 209, 0.2);
 }
-.color-alternative .bubble-chart > .elements .color4 {
+.color-alternative .bubble-chart > .elements .color4,
+.color-alternative .scatter-chart > .elements .color4 {
   fill: rgba(189, 242, 232, 0.2);
 }
-.color-alternative .bubble-chart > .elements .color5 {
+.color-alternative .bubble-chart > .elements .color5,
+.color-alternative .scatter-chart > .elements .color5 {
   fill: rgba(0, 133, 108, 0.2);
 }
-.color-alternative.inverted .bubble-chart > .elements {
+.color-alternative.inverted .bubble-chart > .elements,
+.color-alternative.inverted .scatter-chart > .elements {
   fill: #BDF2E8;
 }
-.color-alternative.inverted .bubble-chart > .elements .color0 {
+.color-alternative.inverted .bubble-chart > .elements .color0,
+.color-alternative.inverted .scatter-chart > .elements .color0 {
   fill: rgba(189, 242, 232, 0.2);
 }
-.color-alternative.inverted .bubble-chart > .elements .color1 {
+.color-alternative.inverted .bubble-chart > .elements .color1,
+.color-alternative.inverted .scatter-chart > .elements .color1 {
   fill: rgba(103, 233, 209, 0.2);
 }
-.color-alternative.inverted .bubble-chart > .elements .color2 {
+.color-alternative.inverted .bubble-chart > .elements .color2,
+.color-alternative.inverted .scatter-chart > .elements .color2 {
   fill: rgba(31, 201, 170, 0.2);
 }
-.color-alternative.inverted .bubble-chart > .elements .color3 {
+.color-alternative.inverted .bubble-chart > .elements .color3,
+.color-alternative.inverted .scatter-chart > .elements .color3 {
   fill: rgba(13, 169, 140, 0.2);
 }
-.color-alternative.inverted .bubble-chart > .elements .color4 {
+.color-alternative.inverted .bubble-chart > .elements .color4,
+.color-alternative.inverted .scatter-chart > .elements .color4 {
   fill: rgba(0, 133, 108, 0.2);
 }
-.color-alternative.inverted .bubble-chart > .elements .color5 {
+.color-alternative.inverted .bubble-chart > .elements .color5,
+.color-alternative.inverted .scatter-chart > .elements .color5 {
   fill: rgba(0, 82, 67, 0.2);
 }
-.color-rainbow .bubble-chart > .elements {
+.color-rainbow .bubble-chart > .elements,
+.color-rainbow .scatter-chart > .elements {
   fill: #1561A7;
 }
-.color-rainbow .bubble-chart > .elements .color0 {
+.color-rainbow .bubble-chart > .elements .color0,
+.color-rainbow .scatter-chart > .elements .color0 {
   fill: rgba(21, 97, 167, 0.2);
 }
-.color-rainbow .bubble-chart > .elements .color1 {
+.color-rainbow .bubble-chart > .elements .color1,
+.color-rainbow .scatter-chart > .elements .color1 {
   fill: rgba(254, 153, 21, 0.2);
 }
-.color-rainbow .bubble-chart > .elements .color2 {
+.color-rainbow .bubble-chart > .elements .color2,
+.color-rainbow .scatter-chart > .elements .color2 {
   fill: rgba(31, 201, 170, 0.2);
 }
-.color-rainbow .bubble-chart > .elements .color3 {
+.color-rainbow .bubble-chart > .elements .color3,
+.color-rainbow .scatter-chart > .elements .color3 {
   fill: rgba(102, 102, 102, 0.2);
 }
-.color-rainbow .bubble-chart > .elements .color4 {
+.color-rainbow .bubble-chart > .elements .color4,
+.color-rainbow .scatter-chart > .elements .color4 {
   fill: rgba(255, 85, 85, 0.2);
 }
-.color-rainbow .bubble-chart > .elements .color5 {
+.color-rainbow .bubble-chart > .elements .color5,
+.color-rainbow .scatter-chart > .elements .color5 {
   fill: rgba(0, 133, 108, 0.2);
 }
-.bubble-chart > .elements .stroke-color0 {
+.bubble-chart > .elements .stroke-color0,
+.scatter-chart > .elements .stroke-color0 {
   stroke: #1561a7;
 }
-.bubble-chart > .elements .stroke-color1 {
+.bubble-chart > .elements .stroke-color1,
+.scatter-chart > .elements .stroke-color1 {
   stroke: #186ebe;
 }
-.bubble-chart > .elements .stroke-color2 {
+.bubble-chart > .elements .stroke-color2,
+.scatter-chart > .elements .stroke-color2 {
   stroke: #74a8d8;
 }
-.bubble-chart > .elements .stroke-color3 {
+.bubble-chart > .elements .stroke-color3,
+.scatter-chart > .elements .stroke-color3 {
   stroke: #c1def9;
 }
-.bubble-chart > .elements .stroke-color4 {
+.bubble-chart > .elements .stroke-color4,
+.scatter-chart > .elements .stroke-color4 {
   stroke: #014786;
 }
-.bubble-chart > .elements .stroke-color5 {
+.bubble-chart > .elements .stroke-color5,
+.scatter-chart > .elements .stroke-color5 {
   stroke: #2f3c45;
 }
-.inverted .bubble-chart > .elements .stroke-color0 {
+.inverted .bubble-chart > .elements .stroke-color0,
+.inverted .scatter-chart > .elements .stroke-color0 {
   stroke: #c1def9;
 }
-.inverted .bubble-chart > .elements .stroke-color1 {
+.inverted .bubble-chart > .elements .stroke-color1,
+.inverted .scatter-chart > .elements .stroke-color1 {
   stroke: #93c5f4;
 }
-.inverted .bubble-chart > .elements .stroke-color2 {
+.inverted .bubble-chart > .elements .stroke-color2,
+.inverted .scatter-chart > .elements .stroke-color2 {
   stroke: #74a8d8;
 }
-.inverted .bubble-chart > .elements .stroke-color3 {
+.inverted .bubble-chart > .elements .stroke-color3,
+.inverted .scatter-chart > .elements .stroke-color3 {
   stroke: #4c8fcd;
 }
-.inverted .bubble-chart > .elements .stroke-color4 {
+.inverted .bubble-chart > .elements .stroke-color4,
+.inverted .scatter-chart > .elements .stroke-color4 {
   stroke: #014786;
 }
-.inverted .bubble-chart > .elements .stroke-color5 {
+.inverted .bubble-chart > .elements .stroke-color5,
+.inverted .scatter-chart > .elements .stroke-color5 {
   stroke: #2f3c45;
 }
-.color-alternative .bubble-chart > .elements .stroke-color0 {
+.color-alternative .bubble-chart > .elements .stroke-color0,
+.color-alternative .scatter-chart > .elements .stroke-color0 {
   stroke: #0da98c;
 }
-.color-alternative .bubble-chart > .elements .stroke-color1 {
+.color-alternative .bubble-chart > .elements .stroke-color1,
+.color-alternative .scatter-chart > .elements .stroke-color1 {
   stroke: #0fc1a0;
 }
-.color-alternative .bubble-chart > .elements .stroke-color2 {
+.color-alternative .bubble-chart > .elements .stroke-color2,
+.color-alternative .scatter-chart > .elements .stroke-color2 {
   stroke: #1fc9aa;
 }
-.color-alternative .bubble-chart > .elements .stroke-color3 {
+.color-alternative .bubble-chart > .elements .stroke-color3,
+.color-alternative .scatter-chart > .elements .stroke-color3 {
   stroke: #67e9d1;
 }
-.color-alternative .bubble-chart > .elements .stroke-color4 {
+.color-alternative .bubble-chart > .elements .stroke-color4,
+.color-alternative .scatter-chart > .elements .stroke-color4 {
   stroke: #bdf2e8;
 }
-.color-alternative .bubble-chart > .elements .stroke-color5 {
+.color-alternative .bubble-chart > .elements .stroke-color5,
+.color-alternative .scatter-chart > .elements .stroke-color5 {
   stroke: #00856c;
 }
-.color-alternative.inverted .bubble-chart > .elements .stroke-color0 {
+.color-alternative.inverted .bubble-chart > .elements .stroke-color0,
+.color-alternative.inverted .scatter-chart > .elements .stroke-color0 {
   stroke: #bdf2e8;
 }
-.color-alternative.inverted .bubble-chart > .elements .stroke-color1 {
+.color-alternative.inverted .bubble-chart > .elements .stroke-color1,
+.color-alternative.inverted .scatter-chart > .elements .stroke-color1 {
   stroke: #67e9d1;
 }
-.color-alternative.inverted .bubble-chart > .elements .stroke-color2 {
+.color-alternative.inverted .bubble-chart > .elements .stroke-color2,
+.color-alternative.inverted .scatter-chart > .elements .stroke-color2 {
   stroke: #1fc9aa;
 }
-.color-alternative.inverted .bubble-chart > .elements .stroke-color3 {
+.color-alternative.inverted .bubble-chart > .elements .stroke-color3,
+.color-alternative.inverted .scatter-chart > .elements .stroke-color3 {
   stroke: #0da98c;
 }
-.color-alternative.inverted .bubble-chart > .elements .stroke-color4 {
+.color-alternative.inverted .bubble-chart > .elements .stroke-color4,
+.color-alternative.inverted .scatter-chart > .elements .stroke-color4 {
   stroke: #00856c;
 }
-.color-alternative.inverted .bubble-chart > .elements .stroke-color5 {
+.color-alternative.inverted .bubble-chart > .elements .stroke-color5,
+.color-alternative.inverted .scatter-chart > .elements .stroke-color5 {
   stroke: #005243;
 }
-.color-rainbow .bubble-chart > .elements .stroke-color0 {
+.color-rainbow .bubble-chart > .elements .stroke-color0,
+.color-rainbow .scatter-chart > .elements .stroke-color0 {
   stroke: #1561a7;
 }
-.color-rainbow .bubble-chart > .elements .stroke-color1 {
+.color-rainbow .bubble-chart > .elements .stroke-color1,
+.color-rainbow .scatter-chart > .elements .stroke-color1 {
   stroke: #fe9915;
 }
-.color-rainbow .bubble-chart > .elements .stroke-color2 {
+.color-rainbow .bubble-chart > .elements .stroke-color2,
+.color-rainbow .scatter-chart > .elements .stroke-color2 {
   stroke: #1fc9aa;
 }
-.color-rainbow .bubble-chart > .elements .stroke-color3 {
+.color-rainbow .bubble-chart > .elements .stroke-color3,
+.color-rainbow .scatter-chart > .elements .stroke-color3 {
   stroke: #666666;
 }
-.color-rainbow .bubble-chart > .elements .stroke-color4 {
+.color-rainbow .bubble-chart > .elements .stroke-color4,
+.color-rainbow .scatter-chart > .elements .stroke-color4 {
   stroke: #ff5555;
 }
-.color-rainbow .bubble-chart > .elements .stroke-color5 {
+.color-rainbow .bubble-chart > .elements .stroke-color5,
+.color-rainbow .scatter-chart > .elements .stroke-color5 {
   stroke: #00856c;
 }
-.bubble-chart > .elements .color0.hover {
+.bubble-chart > .elements .color0.hover,
+.scatter-chart > .elements .color0.hover {
   fill: rgba(21, 97, 167, 0.35);
 }
-.bubble-chart > .elements .color1.hover {
+.bubble-chart > .elements .color1.hover,
+.scatter-chart > .elements .color1.hover {
   fill: rgba(24, 110, 190, 0.35);
 }
-.bubble-chart > .elements .color2.hover {
+.bubble-chart > .elements .color2.hover,
+.scatter-chart > .elements .color2.hover {
   fill: rgba(116, 168, 216, 0.35);
 }
-.bubble-chart > .elements .color3.hover {
+.bubble-chart > .elements .color3.hover,
+.scatter-chart > .elements .color3.hover {
   fill: rgba(193, 222, 249, 0.35);
 }
-.bubble-chart > .elements .color4.hover {
+.bubble-chart > .elements .color4.hover,
+.scatter-chart > .elements .color4.hover {
   fill: rgba(1, 71, 134, 0.35);
 }
-.bubble-chart > .elements .color5.hover {
+.bubble-chart > .elements .color5.hover,
+.scatter-chart > .elements .color5.hover {
   fill: rgba(47, 60, 69, 0.35);
 }
-.inverted .bubble-chart > .elements {
+.inverted .bubble-chart > .elements,
+.inverted .scatter-chart > .elements {
   fill: #C1DEF9;
 }
-.inverted .bubble-chart > .elements .color0.hover {
+.inverted .bubble-chart > .elements .color0.hover,
+.inverted .scatter-chart > .elements .color0.hover {
   fill: rgba(193, 222, 249, 0.35);
 }
-.inverted .bubble-chart > .elements .color1.hover {
+.inverted .bubble-chart > .elements .color1.hover,
+.inverted .scatter-chart > .elements .color1.hover {
   fill: rgba(147, 197, 244, 0.35);
 }
-.inverted .bubble-chart > .elements .color2.hover {
+.inverted .bubble-chart > .elements .color2.hover,
+.inverted .scatter-chart > .elements .color2.hover {
   fill: rgba(116, 168, 216, 0.35);
 }
-.inverted .bubble-chart > .elements .color3.hover {
+.inverted .bubble-chart > .elements .color3.hover,
+.inverted .scatter-chart > .elements .color3.hover {
   fill: rgba(76, 143, 205, 0.35);
 }
-.inverted .bubble-chart > .elements .color4.hover {
+.inverted .bubble-chart > .elements .color4.hover,
+.inverted .scatter-chart > .elements .color4.hover {
   fill: rgba(1, 71, 134, 0.35);
 }
-.inverted .bubble-chart > .elements .color5.hover {
+.inverted .bubble-chart > .elements .color5.hover,
+.inverted .scatter-chart > .elements .color5.hover {
   fill: rgba(47, 60, 69, 0.35);
 }
-.color-alternative .bubble-chart > .elements {
+.color-alternative .bubble-chart > .elements,
+.color-alternative .scatter-chart > .elements {
   fill: #0DA98C;
 }
-.color-alternative .bubble-chart > .elements .color0.hover {
+.color-alternative .bubble-chart > .elements .color0.hover,
+.color-alternative .scatter-chart > .elements .color0.hover {
   fill: rgba(13, 169, 140, 0.35);
 }
-.color-alternative .bubble-chart > .elements .color1.hover {
+.color-alternative .bubble-chart > .elements .color1.hover,
+.color-alternative .scatter-chart > .elements .color1.hover {
   fill: rgba(15, 193, 160, 0.35);
 }
-.color-alternative .bubble-chart > .elements .color2.hover {
+.color-alternative .bubble-chart > .elements .color2.hover,
+.color-alternative .scatter-chart > .elements .color2.hover {
   fill: rgba(31, 201, 170, 0.35);
 }
-.color-alternative .bubble-chart > .elements .color3.hover {
+.color-alternative .bubble-chart > .elements .color3.hover,
+.color-alternative .scatter-chart > .elements .color3.hover {
   fill: rgba(103, 233, 209, 0.35);
 }
-.color-alternative .bubble-chart > .elements .color4.hover {
+.color-alternative .bubble-chart > .elements .color4.hover,
+.color-alternative .scatter-chart > .elements .color4.hover {
   fill: rgba(189, 242, 232, 0.35);
 }
-.color-alternative .bubble-chart > .elements .color5.hover {
+.color-alternative .bubble-chart > .elements .color5.hover,
+.color-alternative .scatter-chart > .elements .color5.hover {
   fill: rgba(0, 133, 108, 0.35);
 }
-.color-alternative.inverted .bubble-chart > .elements {
+.color-alternative.inverted .bubble-chart > .elements,
+.color-alternative.inverted .scatter-chart > .elements {
   fill: #BDF2E8;
 }
-.color-alternative.inverted .bubble-chart > .elements .color0.hover {
+.color-alternative.inverted .bubble-chart > .elements .color0.hover,
+.color-alternative.inverted .scatter-chart > .elements .color0.hover {
   fill: rgba(189, 242, 232, 0.35);
 }
-.color-alternative.inverted .bubble-chart > .elements .color1.hover {
+.color-alternative.inverted .bubble-chart > .elements .color1.hover,
+.color-alternative.inverted .scatter-chart > .elements .color1.hover {
   fill: rgba(103, 233, 209, 0.35);
 }
-.color-alternative.inverted .bubble-chart > .elements .color2.hover {
+.color-alternative.inverted .bubble-chart > .elements .color2.hover,
+.color-alternative.inverted .scatter-chart > .elements .color2.hover {
   fill: rgba(31, 201, 170, 0.35);
 }
-.color-alternative.inverted .bubble-chart > .elements .color3.hover {
+.color-alternative.inverted .bubble-chart > .elements .color3.hover,
+.color-alternative.inverted .scatter-chart > .elements .color3.hover {
   fill: rgba(13, 169, 140, 0.35);
 }
-.color-alternative.inverted .bubble-chart > .elements .color4.hover {
+.color-alternative.inverted .bubble-chart > .elements .color4.hover,
+.color-alternative.inverted .scatter-chart > .elements .color4.hover {
   fill: rgba(0, 133, 108, 0.35);
 }
-.color-alternative.inverted .bubble-chart > .elements .color5.hover {
+.color-alternative.inverted .bubble-chart > .elements .color5.hover,
+.color-alternative.inverted .scatter-chart > .elements .color5.hover {
   fill: rgba(0, 82, 67, 0.35);
 }
-.color-rainbow .bubble-chart > .elements {
+.color-rainbow .bubble-chart > .elements,
+.color-rainbow .scatter-chart > .elements {
   fill: #1561A7;
 }
-.color-rainbow .bubble-chart > .elements .color0.hover {
+.color-rainbow .bubble-chart > .elements .color0.hover,
+.color-rainbow .scatter-chart > .elements .color0.hover {
   fill: rgba(21, 97, 167, 0.35);
 }
-.color-rainbow .bubble-chart > .elements .color1.hover {
+.color-rainbow .bubble-chart > .elements .color1.hover,
+.color-rainbow .scatter-chart > .elements .color1.hover {
   fill: rgba(254, 153, 21, 0.35);
 }
-.color-rainbow .bubble-chart > .elements .color2.hover {
+.color-rainbow .bubble-chart > .elements .color2.hover,
+.color-rainbow .scatter-chart > .elements .color2.hover {
   fill: rgba(31, 201, 170, 0.35);
 }
-.color-rainbow .bubble-chart > .elements .color3.hover {
+.color-rainbow .bubble-chart > .elements .color3.hover,
+.color-rainbow .scatter-chart > .elements .color3.hover {
   fill: rgba(102, 102, 102, 0.35);
 }
-.color-rainbow .bubble-chart > .elements .color4.hover {
+.color-rainbow .bubble-chart > .elements .color4.hover,
+.color-rainbow .scatter-chart > .elements .color4.hover {
   fill: rgba(255, 85, 85, 0.35);
 }
-.color-rainbow .bubble-chart > .elements .color5.hover {
+.color-rainbow .bubble-chart > .elements .color5.hover,
+.color-rainbow .scatter-chart > .elements .color5.hover {
   fill: rgba(0, 133, 108, 0.35);
 }
-.bubble-chart > .elements .stroke-color0.hover {
+.bubble-chart > .elements .stroke-color0.hover,
+.scatter-chart > .elements .stroke-color0.hover {
   stroke: #0f477a;
 }
-.bubble-chart > .elements .stroke-color1.hover {
+.bubble-chart > .elements .stroke-color1.hover,
+.scatter-chart > .elements .stroke-color1.hover {
   stroke: #125490;
 }
-.bubble-chart > .elements .stroke-color2.hover {
+.bubble-chart > .elements .stroke-color2.hover,
+.scatter-chart > .elements .stroke-color2.hover {
   stroke: #4c8fcd;
 }
-.bubble-chart > .elements .stroke-color3.hover {
+.bubble-chart > .elements .stroke-color3.hover,
+.scatter-chart > .elements .stroke-color3.hover {
   stroke: #93c5f4;
 }
-.bubble-chart > .elements .stroke-color4.hover {
+.bubble-chart > .elements .stroke-color4.hover,
+.scatter-chart > .elements .stroke-color4.hover {
   stroke: #012c53;
 }
-.bubble-chart > .elements .stroke-color5.hover {
+.bubble-chart > .elements .stroke-color5.hover,
+.scatter-chart > .elements .stroke-color5.hover {
   stroke: #1a2227;
 }
-.inverted .bubble-chart > .elements .stroke-color0.hover {
+.inverted .bubble-chart > .elements .stroke-color0.hover,
+.inverted .scatter-chart > .elements .stroke-color0.hover {
   stroke: #93c5f4;
 }
-.inverted .bubble-chart > .elements .stroke-color1.hover {
+.inverted .bubble-chart > .elements .stroke-color1.hover,
+.inverted .scatter-chart > .elements .stroke-color1.hover {
   stroke: #64adf0;
 }
-.inverted .bubble-chart > .elements .stroke-color2.hover {
+.inverted .bubble-chart > .elements .stroke-color2.hover,
+.inverted .scatter-chart > .elements .stroke-color2.hover {
   stroke: #4c8fcd;
 }
-.inverted .bubble-chart > .elements .stroke-color3.hover {
+.inverted .bubble-chart > .elements .stroke-color3.hover,
+.inverted .scatter-chart > .elements .stroke-color3.hover {
   stroke: #3276b4;
 }
-.inverted .bubble-chart > .elements .stroke-color4.hover {
+.inverted .bubble-chart > .elements .stroke-color4.hover,
+.inverted .scatter-chart > .elements .stroke-color4.hover {
   stroke: #012c53;
 }
-.inverted .bubble-chart > .elements .stroke-color5.hover {
+.inverted .bubble-chart > .elements .stroke-color5.hover,
+.inverted .scatter-chart > .elements .stroke-color5.hover {
   stroke: #1a2227;
 }
-.color-alternative .bubble-chart > .elements .stroke-color0.hover {
+.color-alternative .bubble-chart > .elements .stroke-color0.hover,
+.color-alternative .scatter-chart > .elements .stroke-color0.hover {
   stroke: #097a65;
 }
-.color-alternative .bubble-chart > .elements .stroke-color1.hover {
+.color-alternative .bubble-chart > .elements .stroke-color1.hover,
+.color-alternative .scatter-chart > .elements .stroke-color1.hover {
   stroke: #0b9178;
 }
-.color-alternative .bubble-chart > .elements .stroke-color2.hover {
+.color-alternative .bubble-chart > .elements .stroke-color2.hover,
+.color-alternative .scatter-chart > .elements .stroke-color2.hover {
   stroke: #189d85;
 }
-.color-alternative .bubble-chart > .elements .stroke-color3.hover {
+.color-alternative .bubble-chart > .elements .stroke-color3.hover,
+.color-alternative .scatter-chart > .elements .stroke-color3.hover {
   stroke: #3ae3c4;
 }
-.color-alternative .bubble-chart > .elements .stroke-color4.hover {
+.color-alternative .bubble-chart > .elements .stroke-color4.hover,
+.color-alternative .scatter-chart > .elements .stroke-color4.hover {
   stroke: #92ead9;
 }
-.color-alternative .bubble-chart > .elements .stroke-color5.hover {
+.color-alternative .bubble-chart > .elements .stroke-color5.hover,
+.color-alternative .scatter-chart > .elements .stroke-color5.hover {
   stroke: #005243;
 }
-.color-alternative.inverted .bubble-chart > .elements .stroke-color0.hover {
+.color-alternative.inverted .bubble-chart > .elements .stroke-color0.hover,
+.color-alternative.inverted .scatter-chart > .elements .stroke-color0.hover {
   stroke: #92ead9;
 }
-.color-alternative.inverted .bubble-chart > .elements .stroke-color1.hover {
+.color-alternative.inverted .bubble-chart > .elements .stroke-color1.hover,
+.color-alternative.inverted .scatter-chart > .elements .stroke-color1.hover {
   stroke: #3ae3c4;
 }
-.color-alternative.inverted .bubble-chart > .elements .stroke-color2.hover {
+.color-alternative.inverted .bubble-chart > .elements .stroke-color2.hover,
+.color-alternative.inverted .scatter-chart > .elements .stroke-color2.hover {
   stroke: #189d85;
 }
-.color-alternative.inverted .bubble-chart > .elements .stroke-color3.hover {
+.color-alternative.inverted .bubble-chart > .elements .stroke-color3.hover,
+.color-alternative.inverted .scatter-chart > .elements .stroke-color3.hover {
   stroke: #097a65;
 }
-.color-alternative.inverted .bubble-chart > .elements .stroke-color4.hover {
+.color-alternative.inverted .bubble-chart > .elements .stroke-color4.hover,
+.color-alternative.inverted .scatter-chart > .elements .stroke-color4.hover {
   stroke: #005243;
 }
-.color-alternative.inverted .bubble-chart > .elements .stroke-color5.hover {
+.color-alternative.inverted .bubble-chart > .elements .stroke-color5.hover,
+.color-alternative.inverted .scatter-chart > .elements .stroke-color5.hover {
   stroke: #001f19;
 }
-.color-rainbow .bubble-chart > .elements .stroke-color0.hover {
+.color-rainbow .bubble-chart > .elements .stroke-color0.hover,
+.color-rainbow .scatter-chart > .elements .stroke-color0.hover {
   stroke: #0f477a;
 }
-.color-rainbow .bubble-chart > .elements .stroke-color1.hover {
+.color-rainbow .bubble-chart > .elements .stroke-color1.hover,
+.color-rainbow .scatter-chart > .elements .stroke-color1.hover {
   stroke: #df7f01;
 }
-.color-rainbow .bubble-chart > .elements .stroke-color2.hover {
+.color-rainbow .bubble-chart > .elements .stroke-color2.hover,
+.color-rainbow .scatter-chart > .elements .stroke-color2.hover {
   stroke: #189d85;
 }
-.color-rainbow .bubble-chart > .elements .stroke-color3.hover {
+.color-rainbow .bubble-chart > .elements .stroke-color3.hover,
+.color-rainbow .scatter-chart > .elements .stroke-color3.hover {
   stroke: #4d4d4d;
 }
-.color-rainbow .bubble-chart > .elements .stroke-color4.hover {
+.color-rainbow .bubble-chart > .elements .stroke-color4.hover,
+.color-rainbow .scatter-chart > .elements .stroke-color4.hover {
   stroke: #ff2222;
 }
-.color-rainbow .bubble-chart > .elements .stroke-color5.hover {
+.color-rainbow .bubble-chart > .elements .stroke-color5.hover,
+.color-rainbow .scatter-chart > .elements .stroke-color5.hover {
   stroke: #005243;
 }
-.checkable.bubble-chart > .elements {
+.checkable.bubble-chart > .elements,
+.checkable.scatter-chart > .elements {
   fill: #1561A7;
 }
-.checkable.bubble-chart > .elements .color0.checked {
+.checkable.bubble-chart > .elements .color0.checked,
+.checkable.scatter-chart > .elements .color0.checked {
   fill: #1561a7;
 }
-.checkable.bubble-chart > .elements .color1.checked {
+.checkable.bubble-chart > .elements .color1.checked,
+.checkable.scatter-chart > .elements .color1.checked {
   fill: #186ebe;
 }
-.checkable.bubble-chart > .elements .color2.checked {
+.checkable.bubble-chart > .elements .color2.checked,
+.checkable.scatter-chart > .elements .color2.checked {
   fill: #74a8d8;
 }
-.checkable.bubble-chart > .elements .color3.checked {
+.checkable.bubble-chart > .elements .color3.checked,
+.checkable.scatter-chart > .elements .color3.checked {
   fill: #c1def9;
 }
-.checkable.bubble-chart > .elements .color4.checked {
+.checkable.bubble-chart > .elements .color4.checked,
+.checkable.scatter-chart > .elements .color4.checked {
   fill: #014786;
 }
-.checkable.bubble-chart > .elements .color5.checked {
+.checkable.bubble-chart > .elements .color5.checked,
+.checkable.scatter-chart > .elements .color5.checked {
   fill: #2f3c45;
 }
-.inverted .checkable.bubble-chart > .elements {
+.inverted .checkable.bubble-chart > .elements,
+.inverted .checkable.scatter-chart > .elements {
   fill: #C1DEF9;
 }
-.inverted .checkable.bubble-chart > .elements .color0.checked {
+.inverted .checkable.bubble-chart > .elements .color0.checked,
+.inverted .checkable.scatter-chart > .elements .color0.checked {
   fill: #c1def9;
 }
-.inverted .checkable.bubble-chart > .elements .color1.checked {
+.inverted .checkable.bubble-chart > .elements .color1.checked,
+.inverted .checkable.scatter-chart > .elements .color1.checked {
   fill: #93c5f4;
 }
-.inverted .checkable.bubble-chart > .elements .color2.checked {
+.inverted .checkable.bubble-chart > .elements .color2.checked,
+.inverted .checkable.scatter-chart > .elements .color2.checked {
   fill: #74a8d8;
 }
-.inverted .checkable.bubble-chart > .elements .color3.checked {
+.inverted .checkable.bubble-chart > .elements .color3.checked,
+.inverted .checkable.scatter-chart > .elements .color3.checked {
   fill: #4c8fcd;
 }
-.inverted .checkable.bubble-chart > .elements .color4.checked {
+.inverted .checkable.bubble-chart > .elements .color4.checked,
+.inverted .checkable.scatter-chart > .elements .color4.checked {
   fill: #014786;
 }
-.inverted .checkable.bubble-chart > .elements .color5.checked {
+.inverted .checkable.bubble-chart > .elements .color5.checked,
+.inverted .checkable.scatter-chart > .elements .color5.checked {
   fill: #2f3c45;
 }
-.color-alternative .checkable.bubble-chart > .elements {
+.color-alternative .checkable.bubble-chart > .elements,
+.color-alternative .checkable.scatter-chart > .elements {
   fill: #0DA98C;
 }
-.color-alternative .checkable.bubble-chart > .elements .color0.checked {
+.color-alternative .checkable.bubble-chart > .elements .color0.checked,
+.color-alternative .checkable.scatter-chart > .elements .color0.checked {
   fill: #0da98c;
 }
-.color-alternative .checkable.bubble-chart > .elements .color1.checked {
+.color-alternative .checkable.bubble-chart > .elements .color1.checked,
+.color-alternative .checkable.scatter-chart > .elements .color1.checked {
   fill: #0fc1a0;
 }
-.color-alternative .checkable.bubble-chart > .elements .color2.checked {
+.color-alternative .checkable.bubble-chart > .elements .color2.checked,
+.color-alternative .checkable.scatter-chart > .elements .color2.checked {
   fill: #1fc9aa;
 }
-.color-alternative .checkable.bubble-chart > .elements .color3.checked {
+.color-alternative .checkable.bubble-chart > .elements .color3.checked,
+.color-alternative .checkable.scatter-chart > .elements .color3.checked {
   fill: #67e9d1;
 }
-.color-alternative .checkable.bubble-chart > .elements .color4.checked {
+.color-alternative .checkable.bubble-chart > .elements .color4.checked,
+.color-alternative .checkable.scatter-chart > .elements .color4.checked {
   fill: #bdf2e8;
 }
-.color-alternative .checkable.bubble-chart > .elements .color5.checked {
+.color-alternative .checkable.bubble-chart > .elements .color5.checked,
+.color-alternative .checkable.scatter-chart > .elements .color5.checked {
   fill: #00856c;
 }
-.color-alternative.inverted .checkable.bubble-chart > .elements {
+.color-alternative.inverted .checkable.bubble-chart > .elements,
+.color-alternative.inverted .checkable.scatter-chart > .elements {
   fill: #BDF2E8;
 }
-.color-alternative.inverted .checkable.bubble-chart > .elements .color0.checked {
+.color-alternative.inverted .checkable.bubble-chart > .elements .color0.checked,
+.color-alternative.inverted .checkable.scatter-chart > .elements .color0.checked {
   fill: #bdf2e8;
 }
-.color-alternative.inverted .checkable.bubble-chart > .elements .color1.checked {
+.color-alternative.inverted .checkable.bubble-chart > .elements .color1.checked,
+.color-alternative.inverted .checkable.scatter-chart > .elements .color1.checked {
   fill: #67e9d1;
 }
-.color-alternative.inverted .checkable.bubble-chart > .elements .color2.checked {
+.color-alternative.inverted .checkable.bubble-chart > .elements .color2.checked,
+.color-alternative.inverted .checkable.scatter-chart > .elements .color2.checked {
   fill: #1fc9aa;
 }
-.color-alternative.inverted .checkable.bubble-chart > .elements .color3.checked {
+.color-alternative.inverted .checkable.bubble-chart > .elements .color3.checked,
+.color-alternative.inverted .checkable.scatter-chart > .elements .color3.checked {
   fill: #0da98c;
 }
-.color-alternative.inverted .checkable.bubble-chart > .elements .color4.checked {
+.color-alternative.inverted .checkable.bubble-chart > .elements .color4.checked,
+.color-alternative.inverted .checkable.scatter-chart > .elements .color4.checked {
   fill: #00856c;
 }
-.color-alternative.inverted .checkable.bubble-chart > .elements .color5.checked {
+.color-alternative.inverted .checkable.bubble-chart > .elements .color5.checked,
+.color-alternative.inverted .checkable.scatter-chart > .elements .color5.checked {
   fill: #005243;
 }
-.color-rainbow .checkable.bubble-chart > .elements {
+.color-rainbow .checkable.bubble-chart > .elements,
+.color-rainbow .checkable.scatter-chart > .elements {
   fill: #1561A7;
 }
-.color-rainbow .checkable.bubble-chart > .elements .color0.checked {
+.color-rainbow .checkable.bubble-chart > .elements .color0.checked,
+.color-rainbow .checkable.scatter-chart > .elements .color0.checked {
   fill: #1561a7;
 }
-.color-rainbow .checkable.bubble-chart > .elements .color1.checked {
+.color-rainbow .checkable.bubble-chart > .elements .color1.checked,
+.color-rainbow .checkable.scatter-chart > .elements .color1.checked {
   fill: #fe9915;
 }
-.color-rainbow .checkable.bubble-chart > .elements .color2.checked {
+.color-rainbow .checkable.bubble-chart > .elements .color2.checked,
+.color-rainbow .checkable.scatter-chart > .elements .color2.checked {
   fill: #1fc9aa;
 }
-.color-rainbow .checkable.bubble-chart > .elements .color3.checked {
+.color-rainbow .checkable.bubble-chart > .elements .color3.checked,
+.color-rainbow .checkable.scatter-chart > .elements .color3.checked {
   fill: #666666;
 }
-.color-rainbow .checkable.bubble-chart > .elements .color4.checked {
+.color-rainbow .checkable.bubble-chart > .elements .color4.checked,
+.color-rainbow .checkable.scatter-chart > .elements .color4.checked {
   fill: #ff5555;
 }
-.color-rainbow .checkable.bubble-chart > .elements .color5.checked {
+.color-rainbow .checkable.bubble-chart > .elements .color5.checked,
+.color-rainbow .checkable.scatter-chart > .elements .color5.checked {
   fill: #00856c;
 }
-.checkable.bubble-chart > .elements .color0.hover.checked {
+.checkable.bubble-chart > .elements .color0.hover.checked,
+.checkable.scatter-chart > .elements .color0.hover.checked {
   fill: #0f477a;
 }
-.checkable.bubble-chart > .elements .color1.hover.checked {
+.checkable.bubble-chart > .elements .color1.hover.checked,
+.checkable.scatter-chart > .elements .color1.hover.checked {
   fill: #125490;
 }
-.checkable.bubble-chart > .elements .color2.hover.checked {
+.checkable.bubble-chart > .elements .color2.hover.checked,
+.checkable.scatter-chart > .elements .color2.hover.checked {
   fill: #4c8fcd;
 }
-.checkable.bubble-chart > .elements .color3.hover.checked {
+.checkable.bubble-chart > .elements .color3.hover.checked,
+.checkable.scatter-chart > .elements .color3.hover.checked {
   fill: #93c5f4;
 }
-.checkable.bubble-chart > .elements .color4.hover.checked {
+.checkable.bubble-chart > .elements .color4.hover.checked,
+.checkable.scatter-chart > .elements .color4.hover.checked {
   fill: #012c53;
 }
-.checkable.bubble-chart > .elements .color5.hover.checked {
+.checkable.bubble-chart > .elements .color5.hover.checked,
+.checkable.scatter-chart > .elements .color5.hover.checked {
   fill: #1a2227;
 }
-.inverted .checkable.bubble-chart > .elements {
+.inverted .checkable.bubble-chart > .elements,
+.inverted .checkable.scatter-chart > .elements {
   fill: #C1DEF9;
 }
-.inverted .checkable.bubble-chart > .elements .color0.hover.checked {
+.inverted .checkable.bubble-chart > .elements .color0.hover.checked,
+.inverted .checkable.scatter-chart > .elements .color0.hover.checked {
   fill: #93c5f4;
 }
-.inverted .checkable.bubble-chart > .elements .color1.hover.checked {
+.inverted .checkable.bubble-chart > .elements .color1.hover.checked,
+.inverted .checkable.scatter-chart > .elements .color1.hover.checked {
   fill: #64adf0;
 }
-.inverted .checkable.bubble-chart > .elements .color2.hover.checked {
+.inverted .checkable.bubble-chart > .elements .color2.hover.checked,
+.inverted .checkable.scatter-chart > .elements .color2.hover.checked {
   fill: #4c8fcd;
 }
-.inverted .checkable.bubble-chart > .elements .color3.hover.checked {
+.inverted .checkable.bubble-chart > .elements .color3.hover.checked,
+.inverted .checkable.scatter-chart > .elements .color3.hover.checked {
   fill: #3276b4;
 }
-.inverted .checkable.bubble-chart > .elements .color4.hover.checked {
+.inverted .checkable.bubble-chart > .elements .color4.hover.checked,
+.inverted .checkable.scatter-chart > .elements .color4.hover.checked {
   fill: #012c53;
 }
-.inverted .checkable.bubble-chart > .elements .color5.hover.checked {
+.inverted .checkable.bubble-chart > .elements .color5.hover.checked,
+.inverted .checkable.scatter-chart > .elements .color5.hover.checked {
   fill: #1a2227;
 }
-.color-alternative .checkable.bubble-chart > .elements {
+.color-alternative .checkable.bubble-chart > .elements,
+.color-alternative .checkable.scatter-chart > .elements {
   fill: #0DA98C;
 }
-.color-alternative .checkable.bubble-chart > .elements .color0.hover.checked {
+.color-alternative .checkable.bubble-chart > .elements .color0.hover.checked,
+.color-alternative .checkable.scatter-chart > .elements .color0.hover.checked {
   fill: #097a65;
 }
-.color-alternative .checkable.bubble-chart > .elements .color1.hover.checked {
+.color-alternative .checkable.bubble-chart > .elements .color1.hover.checked,
+.color-alternative .checkable.scatter-chart > .elements .color1.hover.checked {
   fill: #0b9178;
 }
-.color-alternative .checkable.bubble-chart > .elements .color2.hover.checked {
+.color-alternative .checkable.bubble-chart > .elements .color2.hover.checked,
+.color-alternative .checkable.scatter-chart > .elements .color2.hover.checked {
   fill: #189d85;
 }
-.color-alternative .checkable.bubble-chart > .elements .color3.hover.checked {
+.color-alternative .checkable.bubble-chart > .elements .color3.hover.checked,
+.color-alternative .checkable.scatter-chart > .elements .color3.hover.checked {
   fill: #3ae3c4;
 }
-.color-alternative .checkable.bubble-chart > .elements .color4.hover.checked {
+.color-alternative .checkable.bubble-chart > .elements .color4.hover.checked,
+.color-alternative .checkable.scatter-chart > .elements .color4.hover.checked {
   fill: #92ead9;
 }
-.color-alternative .checkable.bubble-chart > .elements .color5.hover.checked {
+.color-alternative .checkable.bubble-chart > .elements .color5.hover.checked,
+.color-alternative .checkable.scatter-chart > .elements .color5.hover.checked {
   fill: #005243;
 }
-.color-alternative.inverted .checkable.bubble-chart > .elements {
+.color-alternative.inverted .checkable.bubble-chart > .elements,
+.color-alternative.inverted .checkable.scatter-chart > .elements {
   fill: #BDF2E8;
 }
-.color-alternative.inverted .checkable.bubble-chart > .elements .color0.hover.checked {
+.color-alternative.inverted .checkable.bubble-chart > .elements .color0.hover.checked,
+.color-alternative.inverted .checkable.scatter-chart > .elements .color0.hover.checked {
   fill: #92ead9;
 }
-.color-alternative.inverted .checkable.bubble-chart > .elements .color1.hover.checked {
+.color-alternative.inverted .checkable.bubble-chart > .elements .color1.hover.checked,
+.color-alternative.inverted .checkable.scatter-chart > .elements .color1.hover.checked {
   fill: #3ae3c4;
 }
-.color-alternative.inverted .checkable.bubble-chart > .elements .color2.hover.checked {
+.color-alternative.inverted .checkable.bubble-chart > .elements .color2.hover.checked,
+.color-alternative.inverted .checkable.scatter-chart > .elements .color2.hover.checked {
   fill: #189d85;
 }
-.color-alternative.inverted .checkable.bubble-chart > .elements .color3.hover.checked {
+.color-alternative.inverted .checkable.bubble-chart > .elements .color3.hover.checked,
+.color-alternative.inverted .checkable.scatter-chart > .elements .color3.hover.checked {
   fill: #097a65;
 }
-.color-alternative.inverted .checkable.bubble-chart > .elements .color4.hover.checked {
+.color-alternative.inverted .checkable.bubble-chart > .elements .color4.hover.checked,
+.color-alternative.inverted .checkable.scatter-chart > .elements .color4.hover.checked {
   fill: #005243;
 }
-.color-alternative.inverted .checkable.bubble-chart > .elements .color5.hover.checked {
+.color-alternative.inverted .checkable.bubble-chart > .elements .color5.hover.checked,
+.color-alternative.inverted .checkable.scatter-chart > .elements .color5.hover.checked {
   fill: #001f19;
 }
-.color-rainbow .checkable.bubble-chart > .elements {
+.color-rainbow .checkable.bubble-chart > .elements,
+.color-rainbow .checkable.scatter-chart > .elements {
   fill: #1561A7;
 }
-.color-rainbow .checkable.bubble-chart > .elements .color0.hover.checked {
+.color-rainbow .checkable.bubble-chart > .elements .color0.hover.checked,
+.color-rainbow .checkable.scatter-chart > .elements .color0.hover.checked {
   fill: #0f477a;
 }
-.color-rainbow .checkable.bubble-chart > .elements .color1.hover.checked {
+.color-rainbow .checkable.bubble-chart > .elements .color1.hover.checked,
+.color-rainbow .checkable.scatter-chart > .elements .color1.hover.checked {
   fill: #df7f01;
 }
-.color-rainbow .checkable.bubble-chart > .elements .color2.hover.checked {
+.color-rainbow .checkable.bubble-chart > .elements .color2.hover.checked,
+.color-rainbow .checkable.scatter-chart > .elements .color2.hover.checked {
   fill: #189d85;
 }
-.color-rainbow .checkable.bubble-chart > .elements .color3.hover.checked {
+.color-rainbow .checkable.bubble-chart > .elements .color3.hover.checked,
+.color-rainbow .checkable.scatter-chart > .elements .color3.hover.checked {
   fill: #4d4d4d;
 }
-.color-rainbow .checkable.bubble-chart > .elements .color4.hover.checked {
+.color-rainbow .checkable.bubble-chart > .elements .color4.hover.checked,
+.color-rainbow .checkable.scatter-chart > .elements .color4.hover.checked {
   fill: #ff2222;
 }
-.color-rainbow .checkable.bubble-chart > .elements .color5.hover.checked {
+.color-rainbow .checkable.bubble-chart > .elements .color5.hover.checked,
+.color-rainbow .checkable.scatter-chart > .elements .color5.hover.checked {
   fill: #005243;
 }
-.bubble-chart > .elements .color0.legend {
+.bubble-chart > .elements .color0.legend,
+.scatter-chart > .elements .color0.legend {
   fill: #1561a7;
 }
-.bubble-chart > .elements .color1.legend {
+.bubble-chart > .elements .color1.legend,
+.scatter-chart > .elements .color1.legend {
   fill: #186ebe;
 }
-.bubble-chart > .elements .color2.legend {
+.bubble-chart > .elements .color2.legend,
+.scatter-chart > .elements .color2.legend {
   fill: #74a8d8;
 }
-.bubble-chart > .elements .color3.legend {
+.bubble-chart > .elements .color3.legend,
+.scatter-chart > .elements .color3.legend {
   fill: #c1def9;
 }
-.bubble-chart > .elements .color4.legend {
+.bubble-chart > .elements .color4.legend,
+.scatter-chart > .elements .color4.legend {
   fill: #014786;
 }
-.bubble-chart > .elements .color5.legend {
+.bubble-chart > .elements .color5.legend,
+.scatter-chart > .elements .color5.legend {
   fill: #2f3c45;
 }
-.inverted .bubble-chart > .elements {
+.inverted .bubble-chart > .elements,
+.inverted .scatter-chart > .elements {
   fill: #C1DEF9;
 }
-.inverted .bubble-chart > .elements .color0.legend {
+.inverted .bubble-chart > .elements .color0.legend,
+.inverted .scatter-chart > .elements .color0.legend {
   fill: #c1def9;
 }
-.inverted .bubble-chart > .elements .color1.legend {
+.inverted .bubble-chart > .elements .color1.legend,
+.inverted .scatter-chart > .elements .color1.legend {
   fill: #93c5f4;
 }
-.inverted .bubble-chart > .elements .color2.legend {
+.inverted .bubble-chart > .elements .color2.legend,
+.inverted .scatter-chart > .elements .color2.legend {
   fill: #74a8d8;
 }
-.inverted .bubble-chart > .elements .color3.legend {
+.inverted .bubble-chart > .elements .color3.legend,
+.inverted .scatter-chart > .elements .color3.legend {
   fill: #4c8fcd;
 }
-.inverted .bubble-chart > .elements .color4.legend {
+.inverted .bubble-chart > .elements .color4.legend,
+.inverted .scatter-chart > .elements .color4.legend {
   fill: #014786;
 }
-.inverted .bubble-chart > .elements .color5.legend {
+.inverted .bubble-chart > .elements .color5.legend,
+.inverted .scatter-chart > .elements .color5.legend {
   fill: #2f3c45;
 }
-.color-alternative .bubble-chart > .elements {
+.color-alternative .bubble-chart > .elements,
+.color-alternative .scatter-chart > .elements {
   fill: #0DA98C;
 }
-.color-alternative .bubble-chart > .elements .color0.legend {
+.color-alternative .bubble-chart > .elements .color0.legend,
+.color-alternative .scatter-chart > .elements .color0.legend {
   fill: #0da98c;
 }
-.color-alternative .bubble-chart > .elements .color1.legend {
+.color-alternative .bubble-chart > .elements .color1.legend,
+.color-alternative .scatter-chart > .elements .color1.legend {
   fill: #0fc1a0;
 }
-.color-alternative .bubble-chart > .elements .color2.legend {
+.color-alternative .bubble-chart > .elements .color2.legend,
+.color-alternative .scatter-chart > .elements .color2.legend {
   fill: #1fc9aa;
 }
-.color-alternative .bubble-chart > .elements .color3.legend {
+.color-alternative .bubble-chart > .elements .color3.legend,
+.color-alternative .scatter-chart > .elements .color3.legend {
   fill: #67e9d1;
 }
-.color-alternative .bubble-chart > .elements .color4.legend {
+.color-alternative .bubble-chart > .elements .color4.legend,
+.color-alternative .scatter-chart > .elements .color4.legend {
   fill: #bdf2e8;
 }
-.color-alternative .bubble-chart > .elements .color5.legend {
+.color-alternative .bubble-chart > .elements .color5.legend,
+.color-alternative .scatter-chart > .elements .color5.legend {
   fill: #00856c;
 }
-.color-alternative.inverted .bubble-chart > .elements {
+.color-alternative.inverted .bubble-chart > .elements,
+.color-alternative.inverted .scatter-chart > .elements {
   fill: #BDF2E8;
 }
-.color-alternative.inverted .bubble-chart > .elements .color0.legend {
+.color-alternative.inverted .bubble-chart > .elements .color0.legend,
+.color-alternative.inverted .scatter-chart > .elements .color0.legend {
   fill: #bdf2e8;
 }
-.color-alternative.inverted .bubble-chart > .elements .color1.legend {
+.color-alternative.inverted .bubble-chart > .elements .color1.legend,
+.color-alternative.inverted .scatter-chart > .elements .color1.legend {
   fill: #67e9d1;
 }
-.color-alternative.inverted .bubble-chart > .elements .color2.legend {
+.color-alternative.inverted .bubble-chart > .elements .color2.legend,
+.color-alternative.inverted .scatter-chart > .elements .color2.legend {
   fill: #1fc9aa;
 }
-.color-alternative.inverted .bubble-chart > .elements .color3.legend {
+.color-alternative.inverted .bubble-chart > .elements .color3.legend,
+.color-alternative.inverted .scatter-chart > .elements .color3.legend {
   fill: #0da98c;
 }
-.color-alternative.inverted .bubble-chart > .elements .color4.legend {
+.color-alternative.inverted .bubble-chart > .elements .color4.legend,
+.color-alternative.inverted .scatter-chart > .elements .color4.legend {
   fill: #00856c;
 }
-.color-alternative.inverted .bubble-chart > .elements .color5.legend {
+.color-alternative.inverted .bubble-chart > .elements .color5.legend,
+.color-alternative.inverted .scatter-chart > .elements .color5.legend {
   fill: #005243;
 }
-.color-rainbow .bubble-chart > .elements {
+.color-rainbow .bubble-chart > .elements,
+.color-rainbow .scatter-chart > .elements {
   fill: #1561A7;
 }
-.color-rainbow .bubble-chart > .elements .color0.legend {
+.color-rainbow .bubble-chart > .elements .color0.legend,
+.color-rainbow .scatter-chart > .elements .color0.legend {
   fill: #1561a7;
 }
-.color-rainbow .bubble-chart > .elements .color1.legend {
+.color-rainbow .bubble-chart > .elements .color1.legend,
+.color-rainbow .scatter-chart > .elements .color1.legend {
   fill: #fe9915;
 }
-.color-rainbow .bubble-chart > .elements .color2.legend {
+.color-rainbow .bubble-chart > .elements .color2.legend,
+.color-rainbow .scatter-chart > .elements .color2.legend {
   fill: #1fc9aa;
 }
-.color-rainbow .bubble-chart > .elements .color3.legend {
+.color-rainbow .bubble-chart > .elements .color3.legend,
+.color-rainbow .scatter-chart > .elements .color3.legend {
   fill: #666666;
 }
-.color-rainbow .bubble-chart > .elements .color4.legend {
+.color-rainbow .bubble-chart > .elements .color4.legend,
+.color-rainbow .scatter-chart > .elements .color4.legend {
   fill: #ff5555;
 }
-.color-rainbow .bubble-chart > .elements .color5.legend {
+.color-rainbow .bubble-chart > .elements .color5.legend,
+.color-rainbow .scatter-chart > .elements .color5.legend {
   fill: #00856c;
 }
 text.line-label {
@@ -4491,6 +4733,7 @@ text.venn-legend {
 }
 /*** chart tooltip ***/
 .tooltip.chart-tooltip {
+  max-width: 400px;
   --chart-tooltip-font-family: Arial, sans-serif;
   --chart-tooltip-label-width: 70px;
 }
@@ -4547,6 +4790,49 @@ text.venn-legend {
 .tooltip.chart-tooltip > .tooltip-content > .attribute.title > .value {
   text-align: left;
 }
+.tooltip.chart-tooltip > .tooltip-content > table > tbody > .attribute {
+  padding-top: 2px;
+  padding-bottom: 2px;
+}
+.tooltip.chart-tooltip > .tooltip-content > table > tbody > .attribute:first-child {
+  padding-top: 0;
+}
+.tooltip.chart-tooltip > .tooltip-content > table > tbody > .attribute:last-child {
+  padding-bottom: 0;
+}
+.tooltip.chart-tooltip > .tooltip-content > table > tbody > .attribute .color-cell > .color {
+  height: 10px;
+  width: 10px;
+  border-radius: 50%;
+  margin-right: 5px;
+}
+.tooltip.chart-tooltip > .tooltip-content > table > tbody > .attribute > .label {
+  max-width: 120px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  padding-right: 10px;
+  white-space: nowrap;
+  font-size: 12px;
+  padding-top: 1px;
+}
+.tooltip.chart-tooltip > .tooltip-content > table > tbody > .attribute > .value {
+  white-space: nowrap;
+  text-align: right;
+  font-size: 13px;
+  font-weight: normal;
+  font-family: var(--chart-tooltip-font-family);
+  padding-right: 10px;
+}
+.tooltip.chart-tooltip > .tooltip-content > table > tbody > .attribute > .value:last-child {
+  padding-right: 0;
+}
+.tooltip.chart-tooltip > .tooltip-content > table > tbody > .attribute.title > .value {
+  text-align: left;
+  max-width: 120px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
 /*
  * Copyright (c) 2010-2021 BSI Business Systems Integration AG.
  * All rights reserved. This program and the accompanying materials