@carbon/charts 0.41.103 → 0.44.0

package/styles-g10.css

@@ -3,12 +3,14 @@
 }
 .bx--cc--chart-wrapper .fill-1-1-1.hovered {
   fill: #5923a6;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .background-1-1-1 {
   background-color: #6929c4;
 }
 .bx--cc--chart-wrapper .background-1-1-1.hovered {
   background-color: #5923a6;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .stroke-1-1-1 {
   stroke: #6929c4;
@@ -18,12 +20,14 @@
 }
 .bx--cc--chart-wrapper .fill-1-2-1.hovered {
   fill: #002378;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .background-1-2-1 {
   background-color: #002d9c;
 }
 .bx--cc--chart-wrapper .background-1-2-1.hovered {
   background-color: #002378;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .stroke-1-2-1 {
   stroke: #002d9c;
@@ -33,12 +37,14 @@
 }
 .bx--cc--chart-wrapper .fill-1-3-1.hovered {
   fill: #0f7dc7;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .background-1-3-1 {
   background-color: #1192e8;
 }
 .bx--cc--chart-wrapper .background-1-3-1.hovered {
   background-color: #0f7dc7;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .stroke-1-3-1 {
   stroke: #1192e8;
@@ -48,12 +54,14 @@
 }
 .bx--cc--chart-wrapper .fill-1-4-1.hovered {
   fill: #005956;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .background-1-4-1 {
   background-color: #007d79;
 }
 .bx--cc--chart-wrapper .background-1-4-1.hovered {
   background-color: #005956;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .stroke-1-4-1 {
   stroke: #007d79;
@@ -63,12 +71,14 @@
 }
 .bx--cc--chart-wrapper .fill-2-1-1.hovered {
   fill: #5923a6;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .background-2-1-1 {
   background-color: #6929c4;
 }
 .bx--cc--chart-wrapper .background-2-1-1.hovered {
   background-color: #5923a6;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .stroke-2-1-1 {
   stroke: #6929c4;
@@ -78,12 +88,14 @@
 }
 .bx--cc--chart-wrapper .fill-2-1-2.hovered {
   fill: #007977;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .background-2-1-2 {
   background-color: #009d9a;
 }
 .bx--cc--chart-wrapper .background-2-1-2.hovered {
   background-color: #007977;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .stroke-2-1-2 {
   stroke: #009d9a;
@@ -93,12 +105,14 @@
 }
 .bx--cc--chart-wrapper .fill-2-2-1.hovered {
   fill: #751cfb;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .background-2-2-1 {
   background-color: #8a3ffc;
 }
 .bx--cc--chart-wrapper .background-2-2-1.hovered {
   background-color: #751cfb;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .stroke-2-2-1 {
   stroke: #8a3ffc;
@@ -108,12 +122,14 @@
 }
 .bx--cc--chart-wrapper .fill-2-2-2.hovered {
   fill: #300205;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .background-2-2-2 {
   background-color: #520408;
 }
 .bx--cc--chart-wrapper .background-2-2-2.hovered {
   background-color: #300205;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .stroke-2-2-2 {
   stroke: #520408;
@@ -123,12 +139,14 @@
 }
 .bx--cc--chart-wrapper .fill-2-3-1.hovered {
   fill: #801343;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .background-2-3-1 {
   background-color: #9f1853;
 }
 .bx--cc--chart-wrapper .background-2-3-1.hovered {
   background-color: #801343;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .stroke-2-3-1 {
   stroke: #9f1853;
@@ -138,12 +156,14 @@
 }
 .bx--cc--chart-wrapper .fill-2-3-2.hovered {
   fill: #300205;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .background-2-3-2 {
   background-color: #520408;
 }
 .bx--cc--chart-wrapper .background-2-3-2.hovered {
   background-color: #300205;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .stroke-2-3-2 {
   stroke: #520408;
@@ -153,12 +173,14 @@
 }
 .bx--cc--chart-wrapper .fill-2-4-1.hovered {
   fill: #0f7dc7;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .background-2-4-1 {
   background-color: #1192e8;
 }
 .bx--cc--chart-wrapper .background-2-4-1.hovered {
   background-color: #0f7dc7;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .stroke-2-4-1 {
   stroke: #1192e8;
@@ -168,12 +190,14 @@
 }
 .bx--cc--chart-wrapper .fill-2-4-2.hovered {
   fill: #003939;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .background-2-4-2 {
   background-color: #005d5d;
 }
 .bx--cc--chart-wrapper .background-2-4-2.hovered {
   background-color: #003939;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .stroke-2-4-2 {
   stroke: #005d5d;
@@ -183,12 +207,14 @@
 }
 .bx--cc--chart-wrapper .fill-2-5-1.hovered {
   fill: #007977;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .background-2-5-1 {
   background-color: #009d9a;
 }
 .bx--cc--chart-wrapper .background-2-5-1.hovered {
   background-color: #007977;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .stroke-2-5-1 {
   stroke: #009d9a;
@@ -198,12 +224,14 @@
 }
 .bx--cc--chart-wrapper .fill-2-5-2.hovered {
   fill: #002378;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .background-2-5-2 {
   background-color: #002d9c;
 }
 .bx--cc--chart-wrapper .background-2-5-2.hovered {
   background-color: #002378;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .stroke-2-5-2 {
   stroke: #002d9c;
@@ -213,12 +241,14 @@
 }
 .bx--cc--chart-wrapper .fill-3-1-1.hovered {
   fill: #eb3382;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .background-3-1-1 {
   background-color: #ee5396;
 }
 .bx--cc--chart-wrapper .background-3-1-1.hovered {
   background-color: #eb3382;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .stroke-3-1-1 {
   stroke: #ee5396;
@@ -228,12 +258,14 @@
 }
 .bx--cc--chart-wrapper .fill-3-1-2.hovered {
   fill: #0f7dc7;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .background-3-1-2 {
   background-color: #1192e8;
 }
 .bx--cc--chart-wrapper .background-3-1-2.hovered {
   background-color: #0f7dc7;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .stroke-3-1-2 {
   stroke: #1192e8;
@@ -243,12 +275,14 @@
 }
 .bx--cc--chart-wrapper .fill-3-1-3.hovered {
   fill: #5923a6;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .background-3-1-3 {
   background-color: #6929c4;
 }
 .bx--cc--chart-wrapper .background-3-1-3.hovered {
   background-color: #5923a6;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .stroke-3-1-3 {
   stroke: #6929c4;
@@ -258,12 +292,14 @@
 }
 .bx--cc--chart-wrapper .fill-3-2-1.hovered {
   fill: #801343;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .background-3-2-1 {
   background-color: #9f1853;
 }
 .bx--cc--chart-wrapper .background-3-2-1.hovered {
   background-color: #801343;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .stroke-3-2-1 {
   stroke: #9f1853;
@@ -273,12 +309,14 @@
 }
 .bx--cc--chart-wrapper .fill-3-2-2.hovered {
   fill: #f92a35;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .background-3-2-2 {
   background-color: #fa4d56;
 }
 .bx--cc--chart-wrapper .background-3-2-2.hovered {
   background-color: #f92a35;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .stroke-3-2-2 {
   stroke: #fa4d56;
@@ -288,12 +326,14 @@
 }
 .bx--cc--chart-wrapper .fill-3-2-3.hovered {
   fill: #300205;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .background-3-2-3 {
   background-color: #520408;
 }
 .bx--cc--chart-wrapper .background-3-2-3.hovered {
   background-color: #300205;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .stroke-3-2-3 {
   stroke: #520408;
@@ -303,12 +343,14 @@
 }
 .bx--cc--chart-wrapper .fill-3-3-1.hovered {
   fill: #8f4aff;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .background-3-3-1 {
   background-color: #a56eff;
 }
 .bx--cc--chart-wrapper .background-3-3-1.hovered {
   background-color: #8f4aff;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .stroke-3-3-1 {
   stroke: #a56eff;
@@ -318,12 +360,14 @@
 }
 .bx--cc--chart-wrapper .fill-3-3-2.hovered {
   fill: #003939;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .background-3-3-2 {
   background-color: #005d5d;
 }
 .bx--cc--chart-wrapper .background-3-3-2.hovered {
   background-color: #003939;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .stroke-3-3-2 {
   stroke: #005d5d;
@@ -333,12 +377,14 @@
 }
 .bx--cc--chart-wrapper .fill-3-3-3.hovered {
   fill: #002378;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .background-3-3-3 {
   background-color: #002d9c;
 }
 .bx--cc--chart-wrapper .background-3-3-3.hovered {
   background-color: #002378;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .stroke-3-3-3 {
   stroke: #002d9c;
@@ -348,12 +394,14 @@
 }
 .bx--cc--chart-wrapper .fill-3-4-1.hovered {
   fill: #8f4aff;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .background-3-4-1 {
   background-color: #a56eff;
 }
 .bx--cc--chart-wrapper .background-3-4-1.hovered {
   background-color: #8f4aff;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .stroke-3-4-1 {
   stroke: #a56eff;
@@ -363,12 +411,14 @@
 }
 .bx--cc--chart-wrapper .fill-3-4-2.hovered {
   fill: #003939;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .background-3-4-2 {
   background-color: #005d5d;
 }
 .bx--cc--chart-wrapper .background-3-4-2.hovered {
   background-color: #003939;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .stroke-3-4-2 {
   stroke: #005d5d;
@@ -378,12 +428,14 @@
 }
 .bx--cc--chart-wrapper .fill-3-4-3.hovered {
   fill: #801343;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .background-3-4-3 {
   background-color: #9f1853;
 }
 .bx--cc--chart-wrapper .background-3-4-3.hovered {
   background-color: #801343;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .stroke-3-4-3 {
   stroke: #9f1853;
@@ -393,12 +445,14 @@
 }
 .bx--cc--chart-wrapper .fill-3-5-1.hovered {
   fill: #011426;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .background-3-5-1 {
   background-color: #012749;
 }
 .bx--cc--chart-wrapper .background-3-5-1.hovered {
   background-color: #011426;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .stroke-3-5-1 {
   stroke: #012749;
@@ -408,12 +462,14 @@
 }
 .bx--cc--chart-wrapper .fill-3-5-2.hovered {
   fill: #5923a6;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .background-3-5-2 {
   background-color: #6929c4;
 }
 .bx--cc--chart-wrapper .background-3-5-2.hovered {
   background-color: #5923a6;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .stroke-3-5-2 {
   stroke: #6929c4;
@@ -423,12 +479,14 @@
 }
 .bx--cc--chart-wrapper .fill-3-5-3.hovered {
   fill: #007977;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .background-3-5-3 {
   background-color: #009d9a;
 }
 .bx--cc--chart-wrapper .background-3-5-3.hovered {
   background-color: #007977;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .stroke-3-5-3 {
   stroke: #009d9a;
@@ -438,12 +496,14 @@
 }
 .bx--cc--chart-wrapper .fill-4-1-1.hovered {
   fill: #5923a6;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .background-4-1-1 {
   background-color: #6929c4;
 }
 .bx--cc--chart-wrapper .background-4-1-1.hovered {
   background-color: #5923a6;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .stroke-4-1-1 {
   stroke: #6929c4;
@@ -453,12 +513,14 @@
 }
 .bx--cc--chart-wrapper .fill-4-1-2.hovered {
   fill: #011426;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .background-4-1-2 {
   background-color: #012749;
 }
 .bx--cc--chart-wrapper .background-4-1-2.hovered {
   background-color: #011426;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .stroke-4-1-2 {
   stroke: #012749;
@@ -468,12 +530,14 @@
 }
 .bx--cc--chart-wrapper .fill-4-1-3.hovered {
   fill: #007977;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .background-4-1-3 {
   background-color: #009d9a;
 }
 .bx--cc--chart-wrapper .background-4-1-3.hovered {
   background-color: #007977;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .stroke-4-1-3 {
   stroke: #009d9a;
@@ -483,12 +547,14 @@
 }
 .bx--cc--chart-wrapper .fill-4-1-4.hovered {
   fill: #eb3382;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .background-4-1-4 {
   background-color: #ee5396;
 }
 .bx--cc--chart-wrapper .background-4-1-4.hovered {
   background-color: #eb3382;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .stroke-4-1-4 {
   stroke: #ee5396;
@@ -498,12 +564,14 @@
 }
 .bx--cc--chart-wrapper .fill-4-2-1.hovered {
   fill: #801343;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .background-4-2-1 {
   background-color: #9f1853;
 }
 .bx--cc--chart-wrapper .background-4-2-1.hovered {
   background-color: #801343;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .stroke-4-2-1 {
   stroke: #9f1853;
@@ -513,12 +581,14 @@
 }
 .bx--cc--chart-wrapper .fill-4-2-2.hovered {
   fill: #f92a35;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .background-4-2-2 {
   background-color: #fa4d56;
 }
 .bx--cc--chart-wrapper .background-4-2-2.hovered {
   background-color: #f92a35;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .stroke-4-2-2 {
   stroke: #fa4d56;
@@ -528,12 +598,14 @@
 }
 .bx--cc--chart-wrapper .fill-4-2-3.hovered {
   fill: #300205;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .background-4-2-3 {
   background-color: #520408;
 }
 .bx--cc--chart-wrapper .background-4-2-3.hovered {
   background-color: #300205;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .stroke-4-2-3 {
   stroke: #520408;
@@ -543,12 +615,14 @@
 }
 .bx--cc--chart-wrapper .fill-4-2-4.hovered {
   fill: #8f4aff;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .background-4-2-4 {
   background-color: #a56eff;
 }
 .bx--cc--chart-wrapper .background-4-2-4.hovered {
   background-color: #8f4aff;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .stroke-4-2-4 {
   stroke: #a56eff;
@@ -558,12 +632,14 @@
 }
 .bx--cc--chart-wrapper .fill-4-3-1.hovered {
   fill: #007977;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .background-4-3-1 {
   background-color: #009d9a;
 }
 .bx--cc--chart-wrapper .background-4-3-1.hovered {
   background-color: #007977;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .stroke-4-3-1 {
   stroke: #009d9a;
@@ -573,12 +649,14 @@
 }
 .bx--cc--chart-wrapper .fill-4-3-2.hovered {
   fill: #002378;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .background-4-3-2 {
   background-color: #002d9c;
 }
 .bx--cc--chart-wrapper .background-4-3-2.hovered {
   background-color: #002378;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .stroke-4-3-2 {
   stroke: #002d9c;
@@ -588,12 +666,14 @@
 }
 .bx--cc--chart-wrapper .fill-4-3-3.hovered {
   fill: #8f4aff;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .background-4-3-3 {
   background-color: #a56eff;
 }
 .bx--cc--chart-wrapper .background-4-3-3.hovered {
   background-color: #8f4aff;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .stroke-4-3-3 {
   stroke: #a56eff;
@@ -603,12 +683,14 @@
 }
 .bx--cc--chart-wrapper .fill-4-3-4.hovered {
   fill: #801343;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .background-4-3-4 {
   background-color: #9f1853;
 }
 .bx--cc--chart-wrapper .background-4-3-4.hovered {
   background-color: #801343;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .stroke-4-3-4 {
   stroke: #9f1853;
@@ -618,12 +700,14 @@
 }
 .bx--cc--chart-wrapper .fill-5-1-1.hovered {
   fill: #5923a6;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .background-5-1-1 {
   background-color: #6929c4;
 }
 .bx--cc--chart-wrapper .background-5-1-1.hovered {
   background-color: #5923a6;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .stroke-5-1-1 {
   stroke: #6929c4;
@@ -633,12 +717,14 @@
 }
 .bx--cc--chart-wrapper .fill-5-1-2.hovered {
   fill: #0f7dc7;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .background-5-1-2 {
   background-color: #1192e8;
 }
 .bx--cc--chart-wrapper .background-5-1-2.hovered {
   background-color: #0f7dc7;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .stroke-5-1-2 {
   stroke: #1192e8;
@@ -648,12 +734,14 @@
 }
 .bx--cc--chart-wrapper .fill-5-1-3.hovered {
   fill: #003939;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .background-5-1-3 {
   background-color: #005d5d;
 }
 .bx--cc--chart-wrapper .background-5-1-3.hovered {
   background-color: #003939;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .stroke-5-1-3 {
   stroke: #005d5d;
@@ -663,12 +751,14 @@
 }
 .bx--cc--chart-wrapper .fill-5-1-4.hovered {
   fill: #801343;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .background-5-1-4 {
   background-color: #9f1853;
 }
 .bx--cc--chart-wrapper .background-5-1-4.hovered {
   background-color: #801343;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .stroke-5-1-4 {
   stroke: #9f1853;
@@ -678,12 +768,14 @@
 }
 .bx--cc--chart-wrapper .fill-5-1-5.hovered {
   fill: #300205;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .background-5-1-5 {
   background-color: #520408;
 }
 .bx--cc--chart-wrapper .background-5-1-5.hovered {
   background-color: #300205;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .stroke-5-1-5 {
   stroke: #520408;
@@ -693,12 +785,14 @@
 }
 .bx--cc--chart-wrapper .fill-5-2-1.hovered {
   fill: #002378;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .background-5-2-1 {
   background-color: #002d9c;
 }
 .bx--cc--chart-wrapper .background-5-2-1.hovered {
   background-color: #002378;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .stroke-5-2-1 {
   stroke: #002d9c;
@@ -708,12 +802,14 @@
 }
 .bx--cc--chart-wrapper .fill-5-2-2.hovered {
   fill: #007977;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .background-5-2-2 {
   background-color: #009d9a;
 }
 .bx--cc--chart-wrapper .background-5-2-2.hovered {
   background-color: #007977;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .stroke-5-2-2 {
   stroke: #009d9a;
@@ -723,12 +819,14 @@
 }
 .bx--cc--chart-wrapper .fill-5-2-3.hovered {
   fill: #801343;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .background-5-2-3 {
   background-color: #9f1853;
 }
 .bx--cc--chart-wrapper .background-5-2-3.hovered {
   background-color: #801343;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .stroke-5-2-3 {
   stroke: #9f1853;
@@ -738,12 +836,14 @@
 }
 .bx--cc--chart-wrapper .fill-5-2-4.hovered {
   fill: #300205;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .background-5-2-4 {
   background-color: #520408;
 }
 .bx--cc--chart-wrapper .background-5-2-4.hovered {
   background-color: #300205;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .stroke-5-2-4 {
   stroke: #520408;
@@ -753,12 +853,14 @@
 }
 .bx--cc--chart-wrapper .fill-5-2-5.hovered {
   fill: #8f4aff;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .background-5-2-5 {
   background-color: #a56eff;
 }
 .bx--cc--chart-wrapper .background-5-2-5.hovered {
   background-color: #8f4aff;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .stroke-5-2-5 {
   stroke: #a56eff;
@@ -768,12 +870,14 @@
 }
 .bx--cc--chart-wrapper .fill-14-1-1.hovered {
   fill: #5923a6;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .background-14-1-1 {
   background-color: #6929c4;
 }
 .bx--cc--chart-wrapper .background-14-1-1.hovered {
   background-color: #5923a6;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .stroke-14-1-1 {
   stroke: #6929c4;
@@ -783,12 +887,14 @@
 }
 .bx--cc--chart-wrapper .fill-14-1-2.hovered {
   fill: #0f7dc7;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .background-14-1-2 {
   background-color: #1192e8;
 }
 .bx--cc--chart-wrapper .background-14-1-2.hovered {
   background-color: #0f7dc7;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .stroke-14-1-2 {
   stroke: #1192e8;
@@ -798,12 +904,14 @@
 }
 .bx--cc--chart-wrapper .fill-14-1-3.hovered {
   fill: #003939;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .background-14-1-3 {
   background-color: #005d5d;
 }
 .bx--cc--chart-wrapper .background-14-1-3.hovered {
   background-color: #003939;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .stroke-14-1-3 {
   stroke: #005d5d;
@@ -813,12 +921,14 @@
 }
 .bx--cc--chart-wrapper .fill-14-1-4.hovered {
   fill: #801343;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .background-14-1-4 {
   background-color: #9f1853;
 }
 .bx--cc--chart-wrapper .background-14-1-4.hovered {
   background-color: #801343;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .stroke-14-1-4 {
   stroke: #9f1853;
@@ -828,12 +938,14 @@
 }
 .bx--cc--chart-wrapper .fill-14-1-5.hovered {
   fill: #f92a35;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .background-14-1-5 {
   background-color: #fa4d56;
 }
 .bx--cc--chart-wrapper .background-14-1-5.hovered {
   background-color: #f92a35;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .stroke-14-1-5 {
   stroke: #fa4d56;
@@ -843,12 +955,14 @@
 }
 .bx--cc--chart-wrapper .fill-14-1-6.hovered {
   fill: #300205;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .background-14-1-6 {
   background-color: #520408;
 }
 .bx--cc--chart-wrapper .background-14-1-6.hovered {
   background-color: #300205;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .stroke-14-1-6 {
   stroke: #520408;
@@ -858,12 +972,14 @@
 }
 .bx--cc--chart-wrapper .fill-14-1-7.hovered {
   fill: #13622b;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .background-14-1-7 {
   background-color: #198038;
 }
 .bx--cc--chart-wrapper .background-14-1-7.hovered {
   background-color: #13622b;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .stroke-14-1-7 {
   stroke: #198038;
@@ -873,12 +989,14 @@
 }
 .bx--cc--chart-wrapper .fill-14-1-8.hovered {
   fill: #002378;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .background-14-1-8 {
   background-color: #002d9c;
 }
 .bx--cc--chart-wrapper .background-14-1-8.hovered {
   background-color: #002378;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .stroke-14-1-8 {
   stroke: #002d9c;
@@ -888,12 +1006,14 @@
 }
 .bx--cc--chart-wrapper .fill-14-1-9.hovered {
   fill: #eb3382;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .background-14-1-9 {
   background-color: #ee5396;
 }
 .bx--cc--chart-wrapper .background-14-1-9.hovered {
   background-color: #eb3382;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .stroke-14-1-9 {
   stroke: #ee5396;
@@ -903,12 +1023,14 @@
 }
 .bx--cc--chart-wrapper .fill-14-1-10.hovered {
   fill: #8e6b00;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .background-14-1-10 {
   background-color: #b28600;
 }
 .bx--cc--chart-wrapper .background-14-1-10.hovered {
   background-color: #8e6b00;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .stroke-14-1-10 {
   stroke: #b28600;
@@ -918,12 +1040,14 @@
 }
 .bx--cc--chart-wrapper .fill-14-1-11.hovered {
   fill: #007977;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .background-14-1-11 {
   background-color: #009d9a;
 }
 .bx--cc--chart-wrapper .background-14-1-11.hovered {
   background-color: #007977;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .stroke-14-1-11 {
   stroke: #009d9a;
@@ -933,12 +1057,14 @@
 }
 .bx--cc--chart-wrapper .fill-14-1-12.hovered {
   fill: #011426;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .background-14-1-12 {
   background-color: #012749;
 }
 .bx--cc--chart-wrapper .background-14-1-12.hovered {
   background-color: #011426;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .stroke-14-1-12 {
   stroke: #012749;
@@ -948,12 +1074,14 @@
 }
 .bx--cc--chart-wrapper .fill-14-1-13.hovered {
   fill: #662a00;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .background-14-1-13 {
   background-color: #8a3800;
 }
 .bx--cc--chart-wrapper .background-14-1-13.hovered {
   background-color: #662a00;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .stroke-14-1-13 {
   stroke: #8a3800;
@@ -963,12 +1091,14 @@
 }
 .bx--cc--chart-wrapper .fill-14-1-14.hovered {
   fill: #8f4aff;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .background-14-1-14 {
   background-color: #a56eff;
 }
 .bx--cc--chart-wrapper .background-14-1-14.hovered {
   background-color: #8f4aff;
+  transition: all 0.1s ease-out;
 }
 .bx--cc--chart-wrapper .stroke-14-1-14 {
   stroke: #a56eff;
@@ -1249,7 +1379,8 @@
   stroke: #0f62fe;
 }
 
-.bx--cc--ruler line.ruler-line {
+.bx--cc--ruler line.ruler-line,
+.bx--cc--ruler-binned line.ruler-line {
   stroke: #000000;
   stroke-width: 1px;
   stroke-dasharray: 2;
@@ -6330,9 +6461,11 @@ a.bx--overflow-menu-options__btn::before {
   display: block;
   width: 100%;
   height: 100%;
+}
+.bx--chart-holder.filled {
   background-color: #f4f4f4;
 }
-.bx--chart-holder .bx--cc--chart-wrapper {
+.bx--chart-holder.filled .bx--cc--chart-wrapper {
   background-color: #f4f4f4;
 }
 .bx--chart-holder .DONT_STYLE_ME_css_styles_verifier {