diff --git a/1/ecolyo.7fb7d9c25df12fbcc2f3.js b/1/ecolyo.6b43dacbc8ffbba102a3.js
similarity index 99%
rename from 1/ecolyo.7fb7d9c25df12fbcc2f3.js
rename to 1/ecolyo.6b43dacbc8ffbba102a3.js
index cc2dd36312ce19ea6634c6205698df9c14495afa..b11fa8553e62de024e1c14abfe168f8b3c608037 100644
--- a/1/ecolyo.7fb7d9c25df12fbcc2f3.js
+++ b/1/ecolyo.6b43dacbc8ffbba102a3.js
@@ -3622,6 +3622,8 @@ var _slicedToArray2 = _interopRequireDefault(__webpack_require__("J4zp"));
 
 var _enums = __webpack_require__("gnxY");
 
+var _luxon = __webpack_require__("ExVU");
+
 var _react = _interopRequireWildcard(__webpack_require__("q1tI"));
 
 var _hooks = __webpack_require__("Zlw4");
@@ -3660,7 +3662,7 @@ var DataloadConsumptionVisualizer = function DataloadConsumptionVisualizer(_ref)
     });
   }, []);
 
-  if (!dataload) {
+  if (!dataload || dataload.date > _luxon.DateTime.local()) {
     return /*#__PURE__*/_react.default.createElement("div", {
       className: "dataloadvisualizer-root"
     });
@@ -5893,7 +5895,7 @@ var FluidChart = function FluidChart(_ref) {
     return /*#__PURE__*/_react.default.createElement("div", {
       className: "lastValidData"
     }, /*#__PURE__*/_react.default.createElement("span", {
-      className: "text-16-normal date",
+      className: "text-16-bold date",
       onClick: moveToDate
     }, t('consumption_visualizer.last_valid_data', {
       date: (currentFluidStatus === null || currentFluidStatus === void 0 ? void 0 : (_currentFluidStatus$l = currentFluidStatus.lastDataDate) === null || _currentFluidStatus$l === void 0 ? void 0 : _currentFluidStatus$l.toFormat('dd/MM/yy')) || '-'
@@ -7932,7 +7934,7 @@ var InfoDataConsumptionVisualizer = function InfoDataConsumptionVisualizer(_ref)
       },
       className: "error-line"
     }, /*#__PURE__*/_react.default.createElement("span", {
-      className: "text-16-normal underlined-error"
+      className: "text-16-bold underlined-error"
     }, fluidType === _enums.FluidType.MULTIFLUID ? t('consumption_visualizer.last_valid_data_multi', {
       date: lastDate
     }) : t('consumption_visualizer.last_available_data', {
diff --git a/7/ecolyo.03964c0031ba71f39f0a.js b/7/ecolyo.3259106169383ae5d5ef.js
similarity index 99%
rename from 7/ecolyo.03964c0031ba71f39f0a.js
rename to 7/ecolyo.3259106169383ae5d5ef.js
index c931a8f3c4241e191e24c4fed2fd7e3f716c70d0..9f83ac491baa5ca767cc94dcd407f776b2f2eb3e 100644
--- a/7/ecolyo.03964c0031ba71f39f0a.js
+++ b/7/ecolyo.3259106169383ae5d5ef.js
@@ -116,6 +116,10 @@ var BarChart = function BarChart(_ref) {
     return d.date.toLocaleString(_luxon.DateTime.DATETIME_SHORT);
   })).range([0, getContentWidth()]).padding(0.2);
   var yScale = (0, _d3Scale.scaleLinear)().domain([0, getMaxLoad()]).range([getContentHeight(), 0]);
+  var sum = chartData.actualData.reduce(function (a, b) {
+    return a + b.value;
+  }, 0);
+  var averageConsumption = sum / chartData.actualData.length;
   return /*#__PURE__*/_react.default.createElement("svg", {
     width: width,
     height: height
@@ -143,7 +147,8 @@ var BarChart = function BarChart(_ref) {
       height: getContentHeight(),
       isSwitching: isSwitching,
       isMultiMissingFluid: d.state === _enums.DataloadState.AGGREGATED_WITH_EMPTY || d.state === _enums.DataloadState.AGGREGATED_WITH_COMING || d.state === _enums.DataloadState.AGGREGATED_WITH_HOLE_OR_MISSING ? true : false,
-      clickable: clickable
+      clickable: clickable,
+      average: averageConsumption
     });
   })), /*#__PURE__*/_react.default.createElement(_AxisBottom.default, {
     data: chartData.actualData,
diff --git a/app/ecolyo.50bff22dbecb1e1ebc82.js b/app/ecolyo.3cd41c1e46b25de50196.js
similarity index 99%
rename from app/ecolyo.50bff22dbecb1e1ebc82.js
rename to app/ecolyo.3cd41c1e46b25de50196.js
index c1cf63b113d51097a86614ab400a66be37f17d07..dea1a8fb116a441937129ddd37955ddde2c2dd33 100644
--- a/app/ecolyo.50bff22dbecb1e1ebc82.js
+++ b/app/ecolyo.3cd41c1e46b25de50196.js
@@ -64,7 +64,7 @@
 /******/
 /******/ 	// script path function
 /******/ 	function jsonpScriptSrc(chunkId) {
-/******/ 		return __webpack_require__.p + "" + ({}[chunkId]||chunkId) + "/ecolyo." + {"1":"7fb7d9c25df12fbcc2f3","2":"ee6e82fa75e665d74560","4":"d2bf69e982254c3ce239","5":"376cdd52c18eb6f092a0","6":"07e8fd2b54e9d8d82c0d","7":"03964c0031ba71f39f0a","8":"79baa4590f4f0a94be8c","9":"30da7dc1931663d9bbdf","10":"24e1a14cab96b50d3fbd"}[chunkId] + ".js"
+/******/ 		return __webpack_require__.p + "" + ({}[chunkId]||chunkId) + "/ecolyo." + {"1":"6b43dacbc8ffbba102a3","2":"ee6e82fa75e665d74560","4":"d2bf69e982254c3ce239","5":"376cdd52c18eb6f092a0","6":"07e8fd2b54e9d8d82c0d","7":"3259106169383ae5d5ef","8":"79baa4590f4f0a94be8c","9":"30da7dc1931663d9bbdf","10":"24e1a14cab96b50d3fbd"}[chunkId] + ".js"
 /******/ 	}
 /******/
 /******/ 	// The require function
@@ -31844,7 +31844,7 @@ exports.i(__webpack_require__("tgIe"), "");
 exports.push([module.i, "@import url(https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap);", ""]);
 
 // Module
-exports.push([module.i, "/* Cozy UI utilities classes */\n/* Cozy UI React components styles */\n/* App styles */\n/** BLACK **/\n/** RED **/\n/** YELLOW **/\n/** ORANGE **/\n/** BLUE **/\n/** GREEN **/\n/** WHITE **/\n/** GREY **/\n/** App colors **/\n/** TABS GRADIENT **/\n/** SCROLLBAR **/\nhtml {\n  background: #121212;\n}\n\nbody {\n  background: #121212;\n  overflow: unset !important;\n}\n\n.column {\n  display: flex;\n  flex-direction: column;\n}\n\n.row {\n  display: flex;\n  flex-direction: row;\n}\n\n.cozy-bar {\n  width: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-left: 0;\n}\n\n[role=banner] .coz-bar-container {\n  background-color: #ffffff;\n}\n@media only screen and (max-width : 768px) {\n  [role=banner] .coz-bar-container {\n    padding: 0.6rem 0 0 0;\n    background-color: unset;\n  }\n}\n\n.coz-bar-wrapper {\n  box-shadow: unset !important;\n  background: unset !important;\n}\n\n.coz-label {\n  color: #32363f;\n}\n\n.content-view-loading {\n  height: 80vh;\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  color: #e0e0e0;\n}\n.content-view-loading .content-view-loading-text {\n  padding-top: 1rem;\n  margin: 0 2rem;\n  text-align: center;\n}\n.content-view-loading .content-view-loading-button {\n  max-width: 50vw;\n  margin-top: 1rem;\n}\n\n[role=main] {\n  /* width */\n  /* Track */\n  /* Handle */\n}\n[role=main]::-webkit-scrollbar {\n  width: 10px;\n}\n[role=main]::-webkit-scrollbar-track {\n  background: #3e4045;\n}\n[role=main]::-webkit-scrollbar-thumb {\n  background: #6f7074;\n}\n\n/** BLACK **/\n/** RED **/\n/** YELLOW **/\n/** ORANGE **/\n/** BLUE **/\n/** GREEN **/\n/** WHITE **/\n/** GREY **/\n/** App colors **/\n/** TABS GRADIENT **/\n/** SCROLLBAR **/\n/** BLACK **/\n/** RED **/\n/** YELLOW **/\n/** ORANGE **/\n/** BLUE **/\n/** GREEN **/\n/** WHITE **/\n/** GREY **/\n/** App colors **/\n/** TABS GRADIENT **/\n/** SCROLLBAR **/\n* {\n  font-family: Lato, sans-serif;\n}\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\np {\n  color: #a0a0a0;\n  font-family: Lato, sans-serif;\n}\n\n.home-title {\n  font-size: 1rem;\n  font-family: Lato, sans-serif;\n  font-style: normal;\n  font-weight: normal;\n  line-height: 120%;\n  text-transform: uppercase;\n}\n\n.app-title {\n  font-family: Lato, sans-serif;\n  font-style: normal;\n  font-weight: bold;\n  font-size: 21px;\n  line-height: 24px;\n  text-align: center;\n  letter-spacing: 0.15px;\n  color: #e0e0e0;\n  text-shadow: 0px -1px 0px #060609, 0px 1px 0px rgba(255, 255, 255, 0.07);\n}\n\n.text-10, .text-10-italic, .text-10-bold, .text-10-bold-capitalize, .text-10-bold-uppercase, .text-10-normal, .text-10-normal-150, .text-10-normal-uppercase {\n  font-style: normal;\n  font-size: 0.625rem;\n  line-height: 120%;\n}\n.text-10-normal, .text-10-normal-150, .text-10-normal-uppercase {\n  font-weight: normal;\n}\n.text-10-normal-uppercase {\n  text-transform: uppercase;\n}\n.text-10-normal-150 {\n  line-height: 150%;\n}\n.text-10-bold, .text-10-bold-capitalize, .text-10-bold-uppercase {\n  font-weight: 700;\n}\n.text-10-bold-uppercase {\n  text-transform: uppercase;\n}\n.text-10-bold-capitalize {\n  text-transform: capitalize;\n}\n.text-10-italic {\n  font-style: italic;\n  font-weight: normal;\n}\n\n.text-14, .text-14-italic, .text-14-bold, .text-14-bold-capitalize, .text-14-bold-uppercase, .text-14-normal, .text-14-normal-150, .text-14-normal-uppercase {\n  font-style: normal;\n  font-size: 0.875rem;\n  line-height: 120%;\n}\n.text-14-normal, .text-14-normal-150, .text-14-normal-uppercase {\n  font-weight: normal;\n}\n.text-14-normal-uppercase {\n  text-transform: uppercase;\n}\n.text-14-normal-150 {\n  line-height: 150%;\n}\n.text-14-bold, .text-14-bold-capitalize, .text-14-bold-uppercase {\n  font-weight: 700;\n}\n.text-14-bold-uppercase {\n  text-transform: uppercase;\n}\n.text-14-bold-capitalize {\n  text-transform: capitalize;\n}\n.text-14-italic {\n  font-style: italic;\n  font-weight: normal;\n}\n\n.text-15, .text-15-italic, .text-15-bold, .text-15-bold-capitalize, .text-15-bold-uppercase, .text-15-normal, .text-15-normal-150, .text-15-normal-uppercase {\n  font-style: normal;\n  font-size: 0.938rem;\n  line-height: 120%;\n}\n.text-15-normal, .text-15-normal-150, .text-15-normal-uppercase {\n  font-weight: normal;\n}\n.text-15-normal-uppercase {\n  text-transform: uppercase;\n}\n.text-15-normal-150 {\n  line-height: 150%;\n}\n.text-15-bold, .text-15-bold-capitalize, .text-15-bold-uppercase {\n  font-weight: 700;\n}\n.text-15-bold-uppercase {\n  text-transform: uppercase;\n}\n.text-15-bold-capitalize {\n  text-transform: capitalize;\n}\n.text-15-italic {\n  font-style: italic;\n  font-weight: normal;\n}\n\n.text-16, .text-16-italic, .text-16-bold, .text-16-bold-capitalize, .text-16-bold-uppercase, .text-16-normal, .text-16-normal-150, .text-16-normal-uppercase {\n  font-style: normal;\n  font-size: 1rem;\n  line-height: 120%;\n}\n.text-16-normal, .text-16-normal-150, .text-16-normal-uppercase {\n  font-weight: normal;\n}\n.text-16-normal-uppercase {\n  text-transform: uppercase;\n}\n.text-16-normal-150 {\n  line-height: 150%;\n}\n.text-16-bold, .text-16-bold-capitalize, .text-16-bold-uppercase {\n  font-weight: 700;\n}\n.text-16-bold-uppercase {\n  text-transform: uppercase;\n}\n.text-16-bold-capitalize {\n  text-transform: capitalize;\n}\n.text-16-italic {\n  font-style: italic;\n  font-weight: normal;\n}\n\n.text-18, .text-18-italic, .text-18-bold, .text-18-bold-capitalize, .text-18-bold-uppercase, .text-18-normal, .text-18-normal-150, .text-18-normal-uppercase {\n  font-style: normal;\n  font-size: 1.125rem;\n  line-height: 120%;\n}\n.text-18-normal, .text-18-normal-150, .text-18-normal-uppercase {\n  font-weight: normal;\n}\n.text-18-normal-uppercase {\n  text-transform: uppercase;\n}\n.text-18-normal-150 {\n  line-height: 150%;\n}\n.text-18-bold, .text-18-bold-capitalize, .text-18-bold-uppercase {\n  font-weight: 700;\n}\n.text-18-bold-uppercase {\n  text-transform: uppercase;\n}\n.text-18-bold-capitalize {\n  text-transform: capitalize;\n}\n.text-18-italic {\n  font-style: italic;\n  font-weight: normal;\n}\n\n.text-19, .text-19-italic, .text-19-bold, .text-19-bold-capitalize, .text-19-bold-uppercase, .text-19-normal, .text-19-normal-150, .text-19-normal-uppercase {\n  font-style: normal;\n  font-size: 1.188rem;\n  line-height: 120%;\n}\n.text-19-normal, .text-19-normal-150, .text-19-normal-uppercase {\n  font-weight: normal;\n}\n.text-19-normal-uppercase {\n  text-transform: uppercase;\n}\n.text-19-normal-150 {\n  line-height: 150%;\n}\n.text-19-bold, .text-19-bold-capitalize, .text-19-bold-uppercase {\n  font-weight: 700;\n}\n.text-19-bold-uppercase {\n  text-transform: uppercase;\n}\n.text-19-bold-capitalize {\n  text-transform: capitalize;\n}\n.text-19-italic {\n  font-style: italic;\n  font-weight: normal;\n}\n\n.text-20, .text-20-italic, .text-20-bold, .text-20-bold-capitalize, .text-20-bold-uppercase, .text-20-normal, .text-20-normal-150, .text-20-normal-uppercase {\n  font-style: normal;\n  font-size: 1.25rem;\n  line-height: 120%;\n}\n.text-20-normal, .text-20-normal-150, .text-20-normal-uppercase {\n  font-weight: normal;\n}\n.text-20-normal-uppercase {\n  text-transform: uppercase;\n}\n.text-20-normal-150 {\n  line-height: 150%;\n}\n.text-20-bold, .text-20-bold-capitalize, .text-20-bold-uppercase {\n  font-weight: 700;\n}\n.text-20-bold-uppercase {\n  text-transform: uppercase;\n}\n.text-20-bold-capitalize {\n  text-transform: capitalize;\n}\n.text-20-italic {\n  font-style: italic;\n  font-weight: normal;\n}\n\n.text-21, .text-21-italic, .text-21-bold, .text-21-bold-capitalize, .text-21-bold-uppercase, .text-21-normal, .text-21-normal-150, .text-21-normal-uppercase {\n  font-style: normal;\n  font-size: 1.313rem;\n  line-height: 120%;\n}\n.text-21-normal, .text-21-normal-150, .text-21-normal-uppercase {\n  font-weight: normal;\n}\n.text-21-normal-uppercase {\n  text-transform: uppercase;\n}\n.text-21-normal-150 {\n  line-height: 150%;\n}\n.text-21-bold, .text-21-bold-capitalize, .text-21-bold-uppercase {\n  font-weight: 700;\n}\n.text-21-bold-uppercase {\n  text-transform: uppercase;\n}\n.text-21-bold-capitalize {\n  text-transform: capitalize;\n}\n.text-21-italic {\n  font-style: italic;\n  font-weight: normal;\n}\n\n.text-22, .text-22-italic, .text-22-bold, .text-22-bold-capitalize, .text-22-bold-uppercase, .text-22-normal, .text-22-normal-150, .text-22-normal-uppercase {\n  font-style: normal;\n  font-size: 1.375rem;\n  line-height: 120%;\n}\n.text-22-normal, .text-22-normal-150, .text-22-normal-uppercase {\n  font-weight: normal;\n}\n.text-22-normal-uppercase {\n  text-transform: uppercase;\n}\n.text-22-normal-150 {\n  line-height: 150%;\n}\n.text-22-bold, .text-22-bold-capitalize, .text-22-bold-uppercase {\n  font-weight: 700;\n}\n.text-22-bold-uppercase {\n  text-transform: uppercase;\n}\n.text-22-bold-capitalize {\n  text-transform: capitalize;\n}\n.text-22-italic {\n  font-style: italic;\n  font-weight: normal;\n}\n\n.text-24, .text-24-italic, .text-24-bold, .text-24-bold-capitalize, .text-24-bold-uppercase, .text-24-normal, .text-24-normal-150, .text-24-normal-uppercase {\n  font-style: normal;\n  font-size: 1.5rem;\n  line-height: 120%;\n}\n.text-24-normal, .text-24-normal-150, .text-24-normal-uppercase {\n  font-weight: normal;\n}\n.text-24-normal-uppercase {\n  text-transform: uppercase;\n}\n.text-24-normal-150 {\n  line-height: 150%;\n}\n.text-24-bold, .text-24-bold-capitalize, .text-24-bold-uppercase {\n  font-weight: 700;\n}\n.text-24-bold-uppercase {\n  text-transform: uppercase;\n}\n.text-24-bold-capitalize {\n  text-transform: capitalize;\n}\n.text-24-italic {\n  font-style: italic;\n  font-weight: normal;\n}\n\n.text-26, .text-26-italic, .text-26-bold, .text-26-bold-capitalize, .text-26-bold-uppercase, .text-26-normal, .text-26-normal-150, .text-26-normal-uppercase {\n  font-style: normal;\n  font-size: 1.625rem;\n  line-height: 120%;\n}\n.text-26-normal, .text-26-normal-150, .text-26-normal-uppercase {\n  font-weight: normal;\n}\n.text-26-normal-uppercase {\n  text-transform: uppercase;\n}\n.text-26-normal-150 {\n  line-height: 150%;\n}\n.text-26-bold, .text-26-bold-capitalize, .text-26-bold-uppercase {\n  font-weight: 700;\n}\n.text-26-bold-uppercase {\n  text-transform: uppercase;\n}\n.text-26-bold-capitalize {\n  text-transform: capitalize;\n}\n.text-26-italic {\n  font-style: italic;\n  font-weight: normal;\n}\n\n.text-28, .text-28-italic, .text-28-bold, .text-28-bold-capitalize, .text-28-bold-uppercase, .text-28-normal, .text-28-normal-150, .text-28-normal-uppercase {\n  font-style: normal;\n  font-size: 1.75rem;\n  line-height: 120%;\n}\n.text-28-normal, .text-28-normal-150, .text-28-normal-uppercase {\n  font-weight: normal;\n}\n.text-28-normal-uppercase {\n  text-transform: uppercase;\n}\n.text-28-normal-150 {\n  line-height: 150%;\n}\n.text-28-bold, .text-28-bold-capitalize, .text-28-bold-uppercase {\n  font-weight: 700;\n}\n.text-28-bold-uppercase {\n  text-transform: uppercase;\n}\n.text-28-bold-capitalize {\n  text-transform: capitalize;\n}\n.text-28-italic {\n  font-style: italic;\n  font-weight: normal;\n}\n\n.text-36, .text-36-italic, .text-36-bold, .text-36-bold-capitalize, .text-36-bold-uppercase, .text-36-normal, .text-36-normal-150, .text-36-normal-uppercase {\n  font-style: normal;\n  font-size: 2.25rem;\n  line-height: 120%;\n}\n.text-36-normal, .text-36-normal-150, .text-36-normal-uppercase {\n  font-weight: normal;\n}\n.text-36-normal-uppercase {\n  text-transform: uppercase;\n}\n.text-36-normal-150 {\n  line-height: 150%;\n}\n.text-36-bold, .text-36-bold-capitalize, .text-36-bold-uppercase {\n  font-weight: 700;\n}\n.text-36-bold-uppercase {\n  text-transform: uppercase;\n}\n.text-36-bold-capitalize {\n  text-transform: capitalize;\n}\n.text-36-italic {\n  font-style: italic;\n  font-weight: normal;\n}\n\n/* Card */\n.card-title-on {\n  font-family: Lato, sans-serif;\n  font-style: normal;\n  font-weight: normal;\n  font-size: 1.125rem;\n  line-height: 120%;\n  color: #e0e0e0;\n}\n\n.card-text-bold {\n  font-family: Lato, sans-serif;\n  font-style: normal;\n  font-weight: bold;\n  font-size: 1rem;\n  line-height: 120%;\n  color: #e0e0e0;\n}\n\n.card-indicator {\n  font-family: Lato, sans-serif;\n  font-style: normal;\n  font-weight: normal;\n  font-size: 1rem;\n  line-height: 120%;\n  color: #e0e0e0;\n}\n\n.card-text {\n  font-family: Lato, sans-serif;\n  font-style: normal;\n  font-weight: normal;\n  font-size: 1rem;\n  line-height: 120%;\n  color: #e0e0e0;\n}\n\n/* Chart */\n.chart-ticks-x-text {\n  font-family: Lato, sans-serif;\n  font-style: normal;\n  font-weight: normal;\n  font-size: 1rem;\n  line-height: 120%;\n}\n@media only screen and (max-width : 768px) {\n  .chart-ticks-x-text {\n    font-size: 0.685rem;\n  }\n}\n\n.chart-ticks-y-text {\n  font-family: Lato, sans-serif;\n  font-style: normal;\n  font-weight: normal;\n  font-size: 0.9rem;\n  line-height: 120%;\n}\n@media only screen and (max-width : 768px) {\n  .chart-ticks-y-text {\n    font-size: 0.75rem;\n  }\n}\n\n/* Cozy bar */\n.cozybar {\n  font-family: Lato, sans-serif;\n  font-style: normal;\n  font-weight: bold;\n  font-size: 1.3125rem;\n  line-height: 120%;\n  color: #e0e0e0;\n}\n\n/** BLACK **/\n/** RED **/\n/** YELLOW **/\n/** ORANGE **/\n/** BLUE **/\n/** GREEN **/\n/** WHITE **/\n/** GREY **/\n/** App colors **/\n/** TABS GRADIENT **/\n/** SCROLLBAR **/\n.axis {\n  color: #7b7b7b;\n}\n.axis .tick-text {\n  fill: #7b7b7b;\n}\n.axis .tick-text.tick-text-selected {\n  fill: #e0e0e0;\n}\n.axis .separator {\n  text-align: center;\n  margin: 0 2px;\n  font-size: 1rem !important;\n}\n\n.value-text {\n  fill: #7b7b7b;\n}\n.value-text.selected {\n  fill: #e0e0e0;\n}\n\n.barContainer.disabled *,\n.barFill.disabled * {\n  cursor: default !important;\n}\n.barContainer:hover,\n.barFill:hover {\n  cursor: pointer;\n}\n\n.background-true {\n  opacity: 0.1;\n}\n.background-true:hover {\n  cursor: pointer;\n}\n\n.background-false {\n  opacity: 0;\n}\n\n.bar-compare-ELECTRICITY:hover,\n.bar-compare-GAS:hover,\n.bar-compare-WATER:hover,\n.bar-compare-MULTIFLUID:hover,\n.bar-MULTIFLUID:hover,\n.bar-WATER:hover,\n.bar-GAS:hover,\n.bar-ELECTRICITY:hover {\n  cursor: pointer;\n}\n.bar-compare-ELECTRICITY:hover.disabled,\n.bar-compare-GAS:hover.disabled,\n.bar-compare-WATER:hover.disabled,\n.bar-compare-MULTIFLUID:hover.disabled,\n.bar-MULTIFLUID:hover.disabled,\n.bar-WATER:hover.disabled,\n.bar-GAS:hover.disabled,\n.bar-ELECTRICITY:hover.disabled {\n  cursor: default;\n}\n\n.bar-ELECTRICITY {\n  fill: #5d3d2a;\n}\n.bar-ELECTRICITY.selected {\n  fill: #d87b39;\n  filter: drop-shadow(0 -0.1rem 0.2rem #d87b39);\n}\n\n.bar-compare-ELECTRICITY {\n  fill: #795c47;\n}\n.bar-compare-ELECTRICITY.selected {\n  fill: #e2bca1;\n  filter: drop-shadow(0 -0.1rem 0.2rem #e2bca1);\n}\n\n.bar-WATER {\n  fill: #20415e;\n}\n.bar-WATER.selected {\n  fill: #3a98ec;\n  filter: drop-shadow(0 -0.1rem 0.2rem #3a98ec);\n}\n\n.bar-compare-WATER {\n  fill: #4d5c6e;\n}\n.bar-compare-WATER.selected {\n  fill: #abd4fa;\n  filter: drop-shadow(0 -0.1rem 0.2rem #abd4fa);\n}\n\n.bar-GAS {\n  fill: #184940;\n}\n.bar-GAS.selected {\n  fill: #45d1b8;\n  filter: drop-shadow(0 -0.1rem 0.2rem #45d1b8);\n}\n\n.bar-compare-GAS {\n  fill: #597773;\n}\n.bar-compare-GAS.selected {\n  fill: #a8f7e9;\n  filter: drop-shadow(0 -0.1rem 0.2rem #a8f7e9);\n}\n\n.bar-MULTIFLUID {\n  fill: #705d1d;\n}\n.bar-MULTIFLUID.selected {\n  fill: #e3b82a;\n  filter: drop-shadow(0 -0.1rem 0.2rem #e3b82a);\n}\n.bar-MULTIFLUID.disabled:hover {\n  cursor: default;\n}\n\n.bar-duel {\n  fill: #61f0f2;\n}\n.bar-duel.selected {\n  fill: #61f0f2;\n  filter: drop-shadow(0 -0.1rem 0.2rem #61f0f2);\n}\n.bar-duel.disabled:hover {\n  cursor: default;\n}\n\n.bar-UNCOMING {\n  fill: #242633;\n  opacity: 0.6;\n}\n.bar-UNCOMING.selected {\n  fill: #e3b82a;\n  filter: drop-shadow(0 -0.1rem 0.2rem #e3b82a);\n}\n.bar-UNCOMING.disabled:hover {\n  cursor: default;\n}\n\n.bar-compare-MULTIFLUID {\n  fill: #7d6a4e;\n}\n.bar-compare-MULTIFLUID.selected {\n  fill: #ffd597;\n  filter: drop-shadow(0 -0.1rem 0.2rem #e3b82a);\n}\n\n.bar-average {\n  stroke-width: 2;\n  stroke: #e3b82a;\n}\n\n.week {\n  fill: #e2bca1;\n}\n.week.selected {\n  fill: #e2bca1;\n  filter: drop-shadow(0 -0.1rem 0.2rem #e2bca1);\n}\n\n.weekend {\n  fill: #ffd597;\n}\n.weekend.selected {\n  fill: #ffd597;\n  filter: drop-shadow(0 -0.1rem 0.2rem #e3b82a);\n}\n\n/** Animation **/\n.bounce-1 {\n  animation-name: bounce-1;\n  animation-timing-function: cubic-bezier(1, 1, 0.42, 1);\n  animation-iteration-count: 1;\n  transform-origin: bottom center;\n  transform-box: fill-box;\n}\n\n@keyframes bounce-1 {\n  0% {\n    transform: scale(0.1, 0.1);\n  }\n  28% {\n    transform: scale(0.1, 1.1);\n  }\n  45% {\n    transform: scale(0.8, 0.95);\n  }\n  55% {\n    transform: scale(1, 1);\n  }\n  65% {\n    transform: scale(1, 0.98);\n  }\n  75% {\n    transform: scale(1, 1);\n  }\n}\n.bounce-2 {\n  animation-name: bounce-2;\n  animation-timing-function: cubic-bezier(1, 1, 0.42, 1);\n  animation-iteration-count: 1;\n  transform-origin: bottom center;\n  transform-box: fill-box;\n}\n\n@keyframes bounce-2 {\n  0% {\n    transform: scale(1, 1);\n  }\n  28% {\n    transform: scale(1, 1.1);\n  }\n  45% {\n    transform: scale(0.8, 0.95);\n  }\n  55% {\n    transform: scale(1, 1);\n  }\n  65% {\n    transform: scale(1, 0.98);\n  }\n  75% {\n    transform: scale(1, 1);\n  }\n}\n.bounce-3 {\n  animation-name: bounce-3;\n  animation-timing-function: cubic-bezier(1, 1, 0.42, 1);\n  animation-iteration-count: 1;\n  transform-origin: bottom center;\n}\n\n@keyframes bounce-3 {\n  0% {\n    opacity: 0.6;\n    transform: scaleY(1);\n  }\n  50% {\n    transform: scaleY(1.1);\n    opacity: 0.8;\n  }\n  100% {\n    transform: scaleY(1);\n    opacity: 1;\n  }\n}\n/** Animatio ndelay **/\n.delay {\n  animation-duration: 0.4s;\n}\n\n.delay--0 {\n  animation-duration: 0.6s;\n}\n\n.delay--1 {\n  animation-duration: 0.7s;\n}\n\n.delay--2 {\n  animation-duration: 0.8s;\n}\n\n.delay--3 {\n  animation-duration: 0.9s;\n}\n\n.delay--4 {\n  animation-duration: 1s;\n}\n\n.delay--5 {\n  animation-duration: 1.1s;\n}\n\n.delay--6 {\n  animation-duration: 1.2s;\n}\n\n.delay--7 {\n  animation-duration: 1.3s;\n}\n\n.delay--8 {\n  animation-duration: 1.4s;\n}\n\n.delay--9 {\n  animation-duration: 1.5s;\n}\n\n.delay--10 {\n  animation-duration: 1.6s;\n}\n\n.delay--11 {\n  animation-duration: 1.8s;\n}\n\n.delay--12 {\n  animation-duration: 1.9s;\n}\n\n/** BLACK **/\n/** RED **/\n/** YELLOW **/\n/** ORANGE **/\n/** BLUE **/\n/** GREEN **/\n/** WHITE **/\n/** GREY **/\n/** App colors **/\n/** TABS GRADIENT **/\n/** SCROLLBAR **/\nbutton.btn-highlight {\n  background: radial-gradient(105.25% 64.58% at 49.68% 70.83%, rgba(226, 137, 4, 0.5) 0%, rgba(255, 255, 255, 0) 100%), #f1c017;\n  background-color: #e3b82a;\n  border: none;\n  border-radius: 2px;\n  margin: 1.5rem 0 0;\n  width: 100%;\n  text-transform: initial;\n  cursor: pointer;\n}\nbutton.btn-highlight span:first-child {\n  color: #000000;\n}\nbutton.btn-highlight:hover, button.btn-highlight:focus, button.btn-highlight.active, button.btn-highlight:disabled {\n  background-color: #b89318;\n}\nbutton.btn-highlight:disabled {\n  cursor: not-allowed;\n  opacity: 0.5;\n}\nbutton.btn-primary-positive {\n  background: transparent;\n  background-color: transparent;\n  border: 1px solid #121212;\n  border-radius: 2px;\n  margin: 1.5rem 0 0;\n  width: 100%;\n  text-transform: initial;\n  cursor: pointer;\n}\nbutton.btn-primary-positive span:first-child {\n  color: #e3b82a;\n}\nbutton.btn-primary-positive:hover, button.btn-primary-positive:focus, button.btn-primary-positive.active, button.btn-primary-positive:disabled {\n  background-color: rgba(18, 18, 18, 0.2);\n}\nbutton.btn-primary-positive:hover span:first-child, button.btn-primary-positive:focus span:first-child, button.btn-primary-positive.active span:first-child, button.btn-primary-positive:disabled span:first-child {\n  color: rgba(227, 184, 42, 0.7);\n}\nbutton.btn-primary-positive:disabled {\n  cursor: not-allowed;\n  opacity: 0.5;\n}\nbutton.btn-primary-challenge {\n  background: transparent;\n  background-color: #61f0f2;\n  border: 1px solid #61f0f2;\n  border-radius: 2px;\n  margin: 1.5rem 0 0;\n  width: 100%;\n  text-transform: initial;\n  cursor: pointer;\n}\nbutton.btn-primary-challenge span:first-child {\n  color: black;\n}\nbutton.btn-primary-challenge:hover, button.btn-primary-challenge:focus, button.btn-primary-challenge.active, button.btn-primary-challenge:disabled {\n  background-color: rgba(97, 240, 242, 0.2);\n}\nbutton.btn-primary-challenge:hover span:first-child, button.btn-primary-challenge:focus span:first-child, button.btn-primary-challenge.active span:first-child, button.btn-primary-challenge:disabled span:first-child {\n  color: black;\n}\nbutton.btn-primary-challenge:disabled {\n  cursor: not-allowed;\n  opacity: 0.5;\n}\nbutton.btn-secondary {\n  background: transparent;\n  background-color: transparent;\n  border: 1px solid #7b7b7b;\n  border-radius: 2px;\n  margin: 1.5rem 0 0;\n  width: 100%;\n  text-transform: initial;\n  cursor: pointer;\n}\nbutton.btn-secondary span:first-child {\n  color: #f1c017;\n}\nbutton.btn-secondary:disabled {\n  cursor: not-allowed;\n  opacity: 0.5;\n}\nbutton.btn-secondary-positive {\n  background: transparent;\n  background-color: transparent;\n  border: 1px solid #121212;\n  border-radius: 2px;\n  margin: 1.5rem 0 0;\n  width: 100%;\n  text-transform: initial;\n  cursor: pointer;\n}\nbutton.btn-secondary-positive span:first-child {\n  color: #e0e0e0;\n}\nbutton.btn-secondary-positive:hover, button.btn-secondary-positive:focus, button.btn-secondary-positive.active, button.btn-secondary-positive:disabled {\n  background-color: rgba(18, 18, 18, 0.2);\n}\nbutton.btn-secondary-positive:hover span:first-child, button.btn-secondary-positive:focus span:first-child, button.btn-secondary-positive.active span:first-child, button.btn-secondary-positive:disabled span:first-child {\n  color: rgba(224, 224, 224, 0.7);\n}\nbutton.btn-secondary-positive:disabled {\n  cursor: not-allowed;\n  opacity: 0.5;\n}\nbutton.btn-secondary-negative {\n  background: transparent;\n  background-color: transparent;\n  border: 1px solid #7b7b7b;\n  border-radius: 2px;\n  margin: 1.5rem 0 0;\n  width: 100%;\n  text-transform: initial;\n  cursor: pointer;\n}\nbutton.btn-secondary-negative span:first-child {\n  color: #e0e0e0;\n}\nbutton.btn-secondary-negative:hover, button.btn-secondary-negative:focus, button.btn-secondary-negative.active, button.btn-secondary-negative:disabled {\n  background-color: rgba(123, 123, 123, 0.2);\n}\nbutton.btn-secondary-negative:hover span:first-child, button.btn-secondary-negative:focus span:first-child, button.btn-secondary-negative.active span:first-child, button.btn-secondary-negative:disabled span:first-child {\n  color: rgba(224, 224, 224, 0.7);\n}\nbutton.btn-secondary-negative:disabled {\n  cursor: not-allowed;\n  opacity: 0.5;\n}\nbutton.btn-duel-off {\n  background: #121212;\n  background-color: #121212;\n  border: 1px solid rgba(97, 240, 242, 0.5);\n  border-radius: 2px;\n  margin: 1.5rem 0 0;\n  width: 100%;\n  text-transform: initial;\n  cursor: pointer;\n}\nbutton.btn-duel-off span:first-child {\n  color: #ffffff;\n}\nbutton.btn-duel-off:hover, button.btn-duel-off:focus, button.btn-duel-off.active, button.btn-duel-off:disabled {\n  background-color: black;\n}\nbutton.btn-duel-off:disabled {\n  cursor: not-allowed;\n  opacity: 0.5;\n}\nbutton.btn-duel-active {\n  border-radius: 4px !important;\n  background: radial-gradient(105.25% 64.58% at 49.68% 70.83%, rgba(1, 153, 163, 0.5) 0%, rgba(255, 255, 255, 0) 100%), #58ffff;\n  background-color: radial-gradient(105.25% 64.58% at 49.68% 70.83%, rgba(1, 153, 163, 0.5) 0%, rgba(255, 255, 255, 0) 100%), #58ffff;\n  border: none;\n  border-radius: 2px;\n  margin: 1.5rem 0 0;\n  width: 100%;\n  text-transform: initial;\n  cursor: pointer;\n}\nbutton.btn-duel-active span:first-child {\n  color: #121212;\n}\nbutton.btn-duel-active:disabled {\n  cursor: not-allowed;\n  opacity: 0.5;\n}\nbutton.btn-duel-on {\n  background: radial-gradient(60.65% 30.62% at 50% 3.13%, #2a2b30 0%, #1b1c22 100%);\n  background-color: #121212;\n  border: 1px solid #58ffff;\n  border-radius: 2px;\n  margin: 1.5rem 0 0;\n  width: 100%;\n  text-transform: initial;\n  cursor: pointer;\n}\nbutton.btn-duel-on span:first-child {\n  color: #ffffff;\n}\nbutton.btn-duel-on:hover, button.btn-duel-on:focus, button.btn-duel-on.active, button.btn-duel-on:disabled {\n  background-color: black;\n}\nbutton.btn-duel-on:disabled {\n  cursor: not-allowed;\n  opacity: 0.5;\n}\nbutton.btn-profile-next {\n  background: radial-gradient(105.25% 64.58% at 49.68% 70.83%, rgba(226, 137, 4, 0.5) 0%, rgba(255, 255, 255, 0) 100%), #f1c017;\n  background-color: #e3b82a;\n  border: 1px solid #e3b82a;\n  border-radius: 2px;\n  margin: 1.5rem 0 0;\n  width: 100%;\n  text-transform: initial;\n  cursor: pointer;\n}\nbutton.btn-profile-next span:first-child {\n  color: #000000;\n}\nbutton.btn-profile-next:hover, button.btn-profile-next:focus, button.btn-profile-next.active, button.btn-profile-next:disabled {\n  background-color: #b89318;\n}\nbutton.btn-profile-next:disabled {\n  cursor: not-allowed;\n  opacity: 0.5;\n}\nbutton.btn-profile-back {\n  background: none;\n  background-color: none;\n  border: 1px solid #e0e0e0;\n  border-radius: 2px;\n  margin: 1.5rem 0 0;\n  width: 100%;\n  text-transform: initial;\n  cursor: pointer;\n}\nbutton.btn-profile-back span:first-child {\n  color: #e0e0e0;\n}\nbutton.btn-profile-back:disabled {\n  cursor: not-allowed;\n  opacity: 0.5;\n}\n\n/** BLACK **/\n/** RED **/\n/** YELLOW **/\n/** ORANGE **/\n/** BLUE **/\n/** GREEN **/\n/** WHITE **/\n/** GREY **/\n/** App colors **/\n/** TABS GRADIENT **/\n/** SCROLLBAR **/\n.card {\n  background: linear-gradient(180deg, #323339 0%, #25262b 100%);\n  box-sizing: border-box;\n  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.75);\n  border-radius: 4px;\n  padding: 16px;\n}\n.card:hover {\n  background: linear-gradient(180deg, rgba(70, 71, 77, 0.7) 0%, rgba(57, 58, 63, 0.7) 100%);\n}\n.card.rich-card {\n  padding: 16px;\n}\n\n/** BLACK **/\n/** RED **/\n/** YELLOW **/\n/** ORANGE **/\n/** BLUE **/\n/** GREEN **/\n/** WHITE **/\n/** GREY **/\n/** App colors **/\n/** TABS GRADIENT **/\n/** SCROLLBAR **/\ndiv.modal-root .MuiBackdrop-root {\n  background-color: hsla(231deg, 11%, 12%, 0.85);\n}\n\ndiv.modal-paper {\n  background: linear-gradient(180deg, #323339 0%, #25262b 100%);\n  width: 36rem;\n  max-width: 100%;\n  max-height: 90vh;\n  padding: 2rem;\n  box-sizing: border-box;\n  box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.55);\n  border-radius: 4px;\n  margin: 0 0 0 13.75rem;\n  align-items: center;\n  color: #ffffff;\n}\n@media only screen and (max-width : 1023px) {\n  div.modal-paper {\n    width: 35rem;\n    margin: 0;\n  }\n}\n@media only screen and (max-width : 768px) {\n  div.modal-paper {\n    padding: 1rem 1rem 1.5rem;\n    width: 85%;\n    max-width: 35rem;\n    margin: 0;\n  }\n}\ndiv.modal-paper.no-padding {\n  padding: 0;\n}\ndiv.modal-paper.blue-border {\n  border: 1px solid rgba(88, 255, 255, 0.2509803922);\n}\ndiv.modal-paper.blue-light-border {\n  border: 1px solid #61f0f2;\n}\ndiv.modal-paper.yellow-border {\n  border: 1px solid rgba(227, 184, 42, 0.4);\n}\ndiv.modal-paper .modal-paper-close-button {\n  position: absolute;\n  top: 0.5rem;\n  right: 0.5rem;\n  padding: 5px 5px;\n  z-index: 10;\n}\n\ndiv.modal-paper-full-screen {\n  background: linear-gradient(180deg, #323339 0%, #25262b 100%);\n  width: 100%;\n  max-width: 100%;\n  height: 100%;\n  max-height: 100%;\n  padding: 0;\n  margin: 0;\n  box-sizing: border-box;\n  box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.55);\n  border-radius: 4px;\n  color: #ffffff;\n  display: flex;\n  align-items: center;\n}\ndiv.modal-paper-full-screen.dark-background {\n  background: #121212;\n}\n\n/** BLACK **/\n/** RED **/\n/** YELLOW **/\n/** ORANGE **/\n/** BLUE **/\n/** GREEN **/\n/** WHITE **/\n/** GREY **/\n/** App colors **/\n/** TABS GRADIENT **/\n/** SCROLLBAR **/\ndiv.expansion-panel-root {\n  margin: 1.2rem 0;\n  color: #e0e0e0;\n  background: linear-gradient(180deg, #323339 0%, #25262b 100%);\n  border-radius: 4px;\n  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.75);\n  transition: background-color 0.6s ease;\n  box-sizing: border-box;\n}\ndiv.expansion-panel-root.Mui-expanded:first-child {\n  margin: 1.2rem 0;\n}\ndiv.expansion-panel-root.Mui-expanded:last-child {\n  margin: 1.2rem 0;\n}\ndiv.expansion-panel-root.red-border {\n  border: 1px solid #d25959;\n}\n\ndiv.expansion-panel-summary {\n  padding: 0.25rem 1.2rem;\n  min-height: 4rem;\n}\ndiv.expansion-panel-summary.Mui-focused {\n  border-radius: 4px;\n  background-color: unset;\n  box-shadow: 0 0 0 1px #e0e0e0;\n}\ndiv.expansion-panel-summary.Mui-expanded {\n  min-height: 4rem;\n}\ndiv.expansion-panel-summary.Mui-expanded.small {\n  min-height: 3rem;\n}\ndiv.expansion-panel-summary.small {\n  padding: 0 1.2rem;\n  min-height: 3rem;\n}\ndiv.expansion-panel-summary.bold-text {\n  font-weight: bold;\n}\n\ndiv.expansion-panel-content {\n  display: flex;\n  align-items: center;\n}\ndiv.expansion-panel-content.Mui-expanded {\n  margin: 0.75rem 0;\n}\n\ndiv.expansion-panel-details {\n  padding: 0 1.2rem 1.2rem;\n}\n\n/** BLACK **/\n/** RED **/\n/** YELLOW **/\n/** ORANGE **/\n/** BLUE **/\n/** GREEN **/\n/** WHITE **/\n/** GREY **/\n/** App colors **/\n/** TABS GRADIENT **/\n/** SCROLLBAR **/\na {\n  color: #deaf0e;\n}\na:visited {\n  color: #deaf0e;\n}\n\na:focus {\n  outline: none;\n  box-shadow: inset 0 0 0 1px #e0e0e0;\n}\na:focus > div:first-child {\n  box-shadow: 0 0 0 1px #e0e0e0;\n}\n\na.MuiLink-underlineHover:hover {\n  text-decoration: none;\n}\n\na.MuiTypography-colorPrimary {\n  color: #e0e0e0;\n}\n\n:root {\n  white-space: pre-line;\n  --blue: #58ffff;\n  --blue40: rgba(88, 255, 255, 0.2509803922);\n  --blueBackground: radial-gradient(105.25% 64.58% at 49.68% 70.83%, rgba(1, 153, 163, 0.5) 0%, rgba(255, 255, 255, 0) 100%), #58ffff;\n  --blueRadialGradient: radial-gradient(105.25% 64.58% at 49.68% 70.83%, rgba(1, 153, 163, 0.5) 0%, rgba(255, 255, 255, 0) 100%), #58ffff;\n  --blueRadialGradientTrans: radial-gradient(circle, #58ffff 0%, rgba(255, 255, 255, 0) 100%);\n  --elecColor: #d87b39;\n  --elecColor40: rgba(216, 123, 57, 0.4);\n  --elecCompareColor: #e2bca1;\n  --gasColor: #45d1b8;\n  --gasColor40: rgba(69, 209, 184, 0.4);\n  --gasCompareColor: #a8f7e9;\n  --waterColor: #3a98ec;\n  --waterColor40: rgba(58, 152, 236, 0.4);\n  --waterCompareColor: #abd4fa;\n  --multiColor: #e3b82a;\n  --multiCompareColor: #ffd597;\n  --redPrimary: #d25959;\n  --greyBright: #e0e0e0;\n  --greyDark: #7b7b7b;\n  --textWhite: #ffffff;\n  --softGrey: #a0a0a0;\n  --darkLight: #25262b;\n  --darkLight2: #121212;\n  --textFont: Lato, sans-serif;\n  --greyLinearGradientBackground: linear-gradient(180deg, #323339 0%, #25262b 100%);\n  --multiColorRadialGradientTrans: radial-gradient(circle, #e3b82a 0%, rgba(255, 255, 255, 0) 100%);\n  --elecColorRadialGradientTrans: radial-gradient(circle, #d87b39 0%, rgba(255, 255, 255, 0) 100%);\n  --waterColorRadialGradientTrans: radial-gradient(circle, #3a98ec 0%, rgba(255, 255, 255, 0) 100%);\n  --gasColorRadialGradientTrans: radial-gradient(circle, #e3b82a 0%, rgba(255, 255, 255, 0) 100%);\n  --multiColorRadialGradient: radial-gradient(105.25% 64.58% at 49.68% 70.83%, rgba(226, 137, 4, 0.5) 0%, rgba(255, 255, 255, 0) 100%), #f1c017;\n  --elecColorRadialGradient: radial-gradient(105.25% 64.58% at 49.68% 70.83%, rgba(158, 67, 2, 0.5) 0%, rgba(255, 255, 255, 0) 100%), #d87b39;\n  --gasColorRadialGradient: radial-gradient(105.25% 64.58% at 49.68% 70.83%, rgba(4, 106, 88, 0.5) 0%, rgba(255, 255, 255, 0) 100%), #45d1b8;\n  --waterColorRadialGradient: radial-gradient(105.25% 64.58% at 49.68% 70.83%, rgba(2, 93, 174, 0.5) 0%, rgba(255, 255, 255, 0) 100%), #3a98ec;\n}\n\n.application {\n  overflow-x: hidden;\n  background-color: #121212;\n}\n\n.accordion-icon {\n  color: #ffffff;\n}\n\n.loaderContainer {\n  height: 80vh;\n  display: flex;\n  flex: 1;\n  justify-content: center;\n  align-items: center;\n}", ""]);
+exports.push([module.i, "/* Cozy UI utilities classes */\n/* Cozy UI React components styles */\n/* App styles */\n/** BLACK **/\n/** RED **/\n/** YELLOW **/\n/** ORANGE **/\n/** BLUE **/\n/** GREEN **/\n/** WHITE **/\n/** GREY **/\n/** App colors **/\n/** TABS GRADIENT **/\n/** SCROLLBAR **/\nhtml {\n  background: #121212;\n}\n\nbody {\n  background: #121212;\n  overflow: unset !important;\n}\n\n.column {\n  display: flex;\n  flex-direction: column;\n}\n\n.row {\n  display: flex;\n  flex-direction: row;\n}\n\n.cozy-bar {\n  width: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-left: 0;\n}\n\n[role=banner] .coz-bar-container {\n  background-color: #ffffff;\n}\n@media only screen and (max-width : 768px) {\n  [role=banner] .coz-bar-container {\n    padding: 0.6rem 0 0 0;\n    background-color: unset;\n  }\n}\n\n.coz-bar-wrapper {\n  box-shadow: unset !important;\n  background: unset !important;\n}\n\n.coz-label {\n  color: #32363f;\n}\n\n.content-view-loading {\n  height: 80vh;\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  color: #e0e0e0;\n}\n.content-view-loading .content-view-loading-text {\n  padding-top: 1rem;\n  margin: 0 2rem;\n  text-align: center;\n}\n.content-view-loading .content-view-loading-button {\n  max-width: 50vw;\n  margin-top: 1rem;\n}\n\n[role=main] {\n  /* width */\n  /* Track */\n  /* Handle */\n}\n[role=main]::-webkit-scrollbar {\n  width: 10px;\n}\n[role=main]::-webkit-scrollbar-track {\n  background: #3e4045;\n}\n[role=main]::-webkit-scrollbar-thumb {\n  background: #6f7074;\n}\n\n/** BLACK **/\n/** RED **/\n/** YELLOW **/\n/** ORANGE **/\n/** BLUE **/\n/** GREEN **/\n/** WHITE **/\n/** GREY **/\n/** App colors **/\n/** TABS GRADIENT **/\n/** SCROLLBAR **/\n/** BLACK **/\n/** RED **/\n/** YELLOW **/\n/** ORANGE **/\n/** BLUE **/\n/** GREEN **/\n/** WHITE **/\n/** GREY **/\n/** App colors **/\n/** TABS GRADIENT **/\n/** SCROLLBAR **/\n* {\n  font-family: Lato, sans-serif;\n}\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\np {\n  color: #a0a0a0;\n  font-family: Lato, sans-serif;\n}\n\n.home-title {\n  font-size: 1rem;\n  font-family: Lato, sans-serif;\n  font-style: normal;\n  font-weight: normal;\n  line-height: 120%;\n  text-transform: uppercase;\n}\n\n.app-title {\n  font-family: Lato, sans-serif;\n  font-style: normal;\n  font-weight: bold;\n  font-size: 21px;\n  line-height: 24px;\n  text-align: center;\n  letter-spacing: 0.15px;\n  color: #e0e0e0;\n  text-shadow: 0px -1px 0px #060609, 0px 1px 0px rgba(255, 255, 255, 0.07);\n}\n\n.text-10, .text-10-italic, .text-10-bold, .text-10-bold-capitalize, .text-10-bold-uppercase, .text-10-normal, .text-10-normal-150, .text-10-normal-uppercase {\n  font-style: normal;\n  font-size: 0.625rem;\n  line-height: 120%;\n}\n.text-10-normal, .text-10-normal-150, .text-10-normal-uppercase {\n  font-weight: normal;\n}\n.text-10-normal-uppercase {\n  text-transform: uppercase;\n}\n.text-10-normal-150 {\n  line-height: 150%;\n}\n.text-10-bold, .text-10-bold-capitalize, .text-10-bold-uppercase {\n  font-weight: 700;\n}\n.text-10-bold-uppercase {\n  text-transform: uppercase;\n}\n.text-10-bold-capitalize {\n  text-transform: capitalize;\n}\n.text-10-italic {\n  font-style: italic;\n  font-weight: normal;\n}\n\n.text-14, .text-14-italic, .text-14-bold, .text-14-bold-capitalize, .text-14-bold-uppercase, .text-14-normal, .text-14-normal-150, .text-14-normal-uppercase {\n  font-style: normal;\n  font-size: 0.875rem;\n  line-height: 120%;\n}\n.text-14-normal, .text-14-normal-150, .text-14-normal-uppercase {\n  font-weight: normal;\n}\n.text-14-normal-uppercase {\n  text-transform: uppercase;\n}\n.text-14-normal-150 {\n  line-height: 150%;\n}\n.text-14-bold, .text-14-bold-capitalize, .text-14-bold-uppercase {\n  font-weight: 700;\n}\n.text-14-bold-uppercase {\n  text-transform: uppercase;\n}\n.text-14-bold-capitalize {\n  text-transform: capitalize;\n}\n.text-14-italic {\n  font-style: italic;\n  font-weight: normal;\n}\n\n.text-15, .text-15-italic, .text-15-bold, .text-15-bold-capitalize, .text-15-bold-uppercase, .text-15-normal, .text-15-normal-150, .text-15-normal-uppercase {\n  font-style: normal;\n  font-size: 0.938rem;\n  line-height: 120%;\n}\n.text-15-normal, .text-15-normal-150, .text-15-normal-uppercase {\n  font-weight: normal;\n}\n.text-15-normal-uppercase {\n  text-transform: uppercase;\n}\n.text-15-normal-150 {\n  line-height: 150%;\n}\n.text-15-bold, .text-15-bold-capitalize, .text-15-bold-uppercase {\n  font-weight: 700;\n}\n.text-15-bold-uppercase {\n  text-transform: uppercase;\n}\n.text-15-bold-capitalize {\n  text-transform: capitalize;\n}\n.text-15-italic {\n  font-style: italic;\n  font-weight: normal;\n}\n\n.text-16, .text-16-italic, .text-16-bold, .text-16-bold-capitalize, .text-16-bold-uppercase, .text-16-normal, .text-16-normal-150, .text-16-normal-uppercase {\n  font-style: normal;\n  font-size: 1rem;\n  line-height: 120%;\n}\n.text-16-normal, .text-16-normal-150, .text-16-normal-uppercase {\n  font-weight: normal;\n}\n.text-16-normal-uppercase {\n  text-transform: uppercase;\n}\n.text-16-normal-150 {\n  line-height: 150%;\n}\n.text-16-bold, .text-16-bold-capitalize, .text-16-bold-uppercase {\n  font-weight: 700;\n}\n.text-16-bold-uppercase {\n  text-transform: uppercase;\n}\n.text-16-bold-capitalize {\n  text-transform: capitalize;\n}\n.text-16-italic {\n  font-style: italic;\n  font-weight: normal;\n}\n\n.text-18, .text-18-italic, .text-18-bold, .text-18-bold-capitalize, .text-18-bold-uppercase, .text-18-normal, .text-18-normal-150, .text-18-normal-uppercase {\n  font-style: normal;\n  font-size: 1.125rem;\n  line-height: 120%;\n}\n.text-18-normal, .text-18-normal-150, .text-18-normal-uppercase {\n  font-weight: normal;\n}\n.text-18-normal-uppercase {\n  text-transform: uppercase;\n}\n.text-18-normal-150 {\n  line-height: 150%;\n}\n.text-18-bold, .text-18-bold-capitalize, .text-18-bold-uppercase {\n  font-weight: 700;\n}\n.text-18-bold-uppercase {\n  text-transform: uppercase;\n}\n.text-18-bold-capitalize {\n  text-transform: capitalize;\n}\n.text-18-italic {\n  font-style: italic;\n  font-weight: normal;\n}\n\n.text-19, .text-19-italic, .text-19-bold, .text-19-bold-capitalize, .text-19-bold-uppercase, .text-19-normal, .text-19-normal-150, .text-19-normal-uppercase {\n  font-style: normal;\n  font-size: 1.188rem;\n  line-height: 120%;\n}\n.text-19-normal, .text-19-normal-150, .text-19-normal-uppercase {\n  font-weight: normal;\n}\n.text-19-normal-uppercase {\n  text-transform: uppercase;\n}\n.text-19-normal-150 {\n  line-height: 150%;\n}\n.text-19-bold, .text-19-bold-capitalize, .text-19-bold-uppercase {\n  font-weight: 700;\n}\n.text-19-bold-uppercase {\n  text-transform: uppercase;\n}\n.text-19-bold-capitalize {\n  text-transform: capitalize;\n}\n.text-19-italic {\n  font-style: italic;\n  font-weight: normal;\n}\n\n.text-20, .text-20-italic, .text-20-bold, .text-20-bold-capitalize, .text-20-bold-uppercase, .text-20-normal, .text-20-normal-150, .text-20-normal-uppercase {\n  font-style: normal;\n  font-size: 1.25rem;\n  line-height: 120%;\n}\n.text-20-normal, .text-20-normal-150, .text-20-normal-uppercase {\n  font-weight: normal;\n}\n.text-20-normal-uppercase {\n  text-transform: uppercase;\n}\n.text-20-normal-150 {\n  line-height: 150%;\n}\n.text-20-bold, .text-20-bold-capitalize, .text-20-bold-uppercase {\n  font-weight: 700;\n}\n.text-20-bold-uppercase {\n  text-transform: uppercase;\n}\n.text-20-bold-capitalize {\n  text-transform: capitalize;\n}\n.text-20-italic {\n  font-style: italic;\n  font-weight: normal;\n}\n\n.text-21, .text-21-italic, .text-21-bold, .text-21-bold-capitalize, .text-21-bold-uppercase, .text-21-normal, .text-21-normal-150, .text-21-normal-uppercase {\n  font-style: normal;\n  font-size: 1.313rem;\n  line-height: 120%;\n}\n.text-21-normal, .text-21-normal-150, .text-21-normal-uppercase {\n  font-weight: normal;\n}\n.text-21-normal-uppercase {\n  text-transform: uppercase;\n}\n.text-21-normal-150 {\n  line-height: 150%;\n}\n.text-21-bold, .text-21-bold-capitalize, .text-21-bold-uppercase {\n  font-weight: 700;\n}\n.text-21-bold-uppercase {\n  text-transform: uppercase;\n}\n.text-21-bold-capitalize {\n  text-transform: capitalize;\n}\n.text-21-italic {\n  font-style: italic;\n  font-weight: normal;\n}\n\n.text-22, .text-22-italic, .text-22-bold, .text-22-bold-capitalize, .text-22-bold-uppercase, .text-22-normal, .text-22-normal-150, .text-22-normal-uppercase {\n  font-style: normal;\n  font-size: 1.375rem;\n  line-height: 120%;\n}\n.text-22-normal, .text-22-normal-150, .text-22-normal-uppercase {\n  font-weight: normal;\n}\n.text-22-normal-uppercase {\n  text-transform: uppercase;\n}\n.text-22-normal-150 {\n  line-height: 150%;\n}\n.text-22-bold, .text-22-bold-capitalize, .text-22-bold-uppercase {\n  font-weight: 700;\n}\n.text-22-bold-uppercase {\n  text-transform: uppercase;\n}\n.text-22-bold-capitalize {\n  text-transform: capitalize;\n}\n.text-22-italic {\n  font-style: italic;\n  font-weight: normal;\n}\n\n.text-24, .text-24-italic, .text-24-bold, .text-24-bold-capitalize, .text-24-bold-uppercase, .text-24-normal, .text-24-normal-150, .text-24-normal-uppercase {\n  font-style: normal;\n  font-size: 1.5rem;\n  line-height: 120%;\n}\n.text-24-normal, .text-24-normal-150, .text-24-normal-uppercase {\n  font-weight: normal;\n}\n.text-24-normal-uppercase {\n  text-transform: uppercase;\n}\n.text-24-normal-150 {\n  line-height: 150%;\n}\n.text-24-bold, .text-24-bold-capitalize, .text-24-bold-uppercase {\n  font-weight: 700;\n}\n.text-24-bold-uppercase {\n  text-transform: uppercase;\n}\n.text-24-bold-capitalize {\n  text-transform: capitalize;\n}\n.text-24-italic {\n  font-style: italic;\n  font-weight: normal;\n}\n\n.text-26, .text-26-italic, .text-26-bold, .text-26-bold-capitalize, .text-26-bold-uppercase, .text-26-normal, .text-26-normal-150, .text-26-normal-uppercase {\n  font-style: normal;\n  font-size: 1.625rem;\n  line-height: 120%;\n}\n.text-26-normal, .text-26-normal-150, .text-26-normal-uppercase {\n  font-weight: normal;\n}\n.text-26-normal-uppercase {\n  text-transform: uppercase;\n}\n.text-26-normal-150 {\n  line-height: 150%;\n}\n.text-26-bold, .text-26-bold-capitalize, .text-26-bold-uppercase {\n  font-weight: 700;\n}\n.text-26-bold-uppercase {\n  text-transform: uppercase;\n}\n.text-26-bold-capitalize {\n  text-transform: capitalize;\n}\n.text-26-italic {\n  font-style: italic;\n  font-weight: normal;\n}\n\n.text-28, .text-28-italic, .text-28-bold, .text-28-bold-capitalize, .text-28-bold-uppercase, .text-28-normal, .text-28-normal-150, .text-28-normal-uppercase {\n  font-style: normal;\n  font-size: 1.75rem;\n  line-height: 120%;\n}\n.text-28-normal, .text-28-normal-150, .text-28-normal-uppercase {\n  font-weight: normal;\n}\n.text-28-normal-uppercase {\n  text-transform: uppercase;\n}\n.text-28-normal-150 {\n  line-height: 150%;\n}\n.text-28-bold, .text-28-bold-capitalize, .text-28-bold-uppercase {\n  font-weight: 700;\n}\n.text-28-bold-uppercase {\n  text-transform: uppercase;\n}\n.text-28-bold-capitalize {\n  text-transform: capitalize;\n}\n.text-28-italic {\n  font-style: italic;\n  font-weight: normal;\n}\n\n.text-36, .text-36-italic, .text-36-bold, .text-36-bold-capitalize, .text-36-bold-uppercase, .text-36-normal, .text-36-normal-150, .text-36-normal-uppercase {\n  font-style: normal;\n  font-size: 2.25rem;\n  line-height: 120%;\n}\n.text-36-normal, .text-36-normal-150, .text-36-normal-uppercase {\n  font-weight: normal;\n}\n.text-36-normal-uppercase {\n  text-transform: uppercase;\n}\n.text-36-normal-150 {\n  line-height: 150%;\n}\n.text-36-bold, .text-36-bold-capitalize, .text-36-bold-uppercase {\n  font-weight: 700;\n}\n.text-36-bold-uppercase {\n  text-transform: uppercase;\n}\n.text-36-bold-capitalize {\n  text-transform: capitalize;\n}\n.text-36-italic {\n  font-style: italic;\n  font-weight: normal;\n}\n\n/* Card */\n.card-title-on {\n  font-family: Lato, sans-serif;\n  font-style: normal;\n  font-weight: normal;\n  font-size: 1.125rem;\n  line-height: 120%;\n  color: #e0e0e0;\n}\n\n.card-text-bold {\n  font-family: Lato, sans-serif;\n  font-style: normal;\n  font-weight: bold;\n  font-size: 1rem;\n  line-height: 120%;\n  color: #e0e0e0;\n}\n\n.card-indicator {\n  font-family: Lato, sans-serif;\n  font-style: normal;\n  font-weight: normal;\n  font-size: 1rem;\n  line-height: 120%;\n  color: #e0e0e0;\n}\n\n.card-text {\n  font-family: Lato, sans-serif;\n  font-style: normal;\n  font-weight: normal;\n  font-size: 1rem;\n  line-height: 120%;\n  color: #e0e0e0;\n}\n\n/* Chart */\n.chart-ticks-x-text {\n  font-family: Lato, sans-serif;\n  font-style: normal;\n  font-weight: normal;\n  font-size: 1rem;\n  line-height: 120%;\n}\n@media only screen and (max-width : 768px) {\n  .chart-ticks-x-text {\n    font-size: 0.685rem;\n  }\n}\n\n.chart-ticks-y-text {\n  font-family: Lato, sans-serif;\n  font-style: normal;\n  font-weight: normal;\n  font-size: 0.9rem;\n  line-height: 120%;\n}\n@media only screen and (max-width : 768px) {\n  .chart-ticks-y-text {\n    font-size: 0.75rem;\n  }\n}\n\n/* Cozy bar */\n.cozybar {\n  font-family: Lato, sans-serif;\n  font-style: normal;\n  font-weight: bold;\n  font-size: 1.3125rem;\n  line-height: 120%;\n  color: #e0e0e0;\n}\n\n/** BLACK **/\n/** RED **/\n/** YELLOW **/\n/** ORANGE **/\n/** BLUE **/\n/** GREEN **/\n/** WHITE **/\n/** GREY **/\n/** App colors **/\n/** TABS GRADIENT **/\n/** SCROLLBAR **/\n.axis {\n  color: #7b7b7b;\n}\n.axis .tick-text {\n  fill: #7b7b7b;\n}\n.axis .tick-text.tick-text-selected {\n  fill: #e0e0e0;\n}\n.axis .separator {\n  text-align: center;\n  margin: 0 2px;\n  font-size: 1rem !important;\n}\n\n.value-text {\n  fill: #7b7b7b;\n}\n.value-text.selected {\n  fill: #e0e0e0;\n}\n\n.barContainer.disabled *,\n.barFill.disabled * {\n  cursor: default !important;\n}\n.barContainer:hover,\n.barFill:hover {\n  cursor: pointer;\n}\n\n.background-true {\n  opacity: 0.1;\n}\n.background-true:hover {\n  cursor: pointer;\n}\n\n.background-false {\n  opacity: 0;\n}\n\n.bar-compare-ELECTRICITY:hover,\n.bar-compare-GAS:hover,\n.bar-compare-WATER:hover,\n.bar-compare-MULTIFLUID:hover,\n.bar-MULTIFLUID:hover,\n.bar-WATER:hover,\n.bar-GAS:hover,\n.bar-ELECTRICITY:hover {\n  cursor: pointer;\n}\n.bar-compare-ELECTRICITY:hover.disabled,\n.bar-compare-GAS:hover.disabled,\n.bar-compare-WATER:hover.disabled,\n.bar-compare-MULTIFLUID:hover.disabled,\n.bar-MULTIFLUID:hover.disabled,\n.bar-WATER:hover.disabled,\n.bar-GAS:hover.disabled,\n.bar-ELECTRICITY:hover.disabled {\n  cursor: default;\n}\n\n.bar-ELECTRICITY {\n  fill: #5d3d2a;\n}\n.bar-ELECTRICITY.selected {\n  fill: #d87b39;\n  filter: drop-shadow(0 -0.1rem 0.2rem #d87b39);\n}\n\n.bar-compare-ELECTRICITY {\n  fill: #795c47;\n}\n.bar-compare-ELECTRICITY.selected {\n  fill: #e2bca1;\n  filter: drop-shadow(0 -0.1rem 0.2rem #e2bca1);\n}\n\n.bar-WATER {\n  fill: #20415e;\n}\n.bar-WATER.selected {\n  fill: #3a98ec;\n  filter: drop-shadow(0 -0.1rem 0.2rem #3a98ec);\n}\n\n.bar-compare-WATER {\n  fill: #4d5c6e;\n}\n.bar-compare-WATER.selected {\n  fill: #abd4fa;\n  filter: drop-shadow(0 -0.1rem 0.2rem #abd4fa);\n}\n\n.bar-GAS {\n  fill: #184940;\n}\n.bar-GAS.selected {\n  fill: #45d1b8;\n  filter: drop-shadow(0 -0.1rem 0.2rem #45d1b8);\n}\n\n.bar-compare-GAS {\n  fill: #597773;\n}\n.bar-compare-GAS.selected {\n  fill: #a8f7e9;\n  filter: drop-shadow(0 -0.1rem 0.2rem #a8f7e9);\n}\n\n.bar-MULTIFLUID {\n  fill: #705d1d;\n}\n.bar-MULTIFLUID.selected {\n  fill: #e3b82a;\n  filter: drop-shadow(0 -0.1rem 0.2rem #e3b82a);\n}\n.bar-MULTIFLUID.disabled:hover {\n  cursor: default;\n}\n\n.bar-duel {\n  fill: #61f0f2;\n}\n.bar-duel.selected {\n  fill: #61f0f2;\n  filter: drop-shadow(0 -0.1rem 0.2rem #61f0f2);\n}\n.bar-duel.disabled:hover {\n  cursor: default;\n}\n\n.bar-UNCOMING {\n  fill: #7b7b7b;\n  opacity: 0.6;\n}\n.bar-UNCOMING.selected {\n  fill: #7b7b7b;\n}\n.bar-UNCOMING.disabled:hover {\n  cursor: default;\n}\n\n.bar-compare-MULTIFLUID {\n  fill: #7d6a4e;\n}\n.bar-compare-MULTIFLUID.selected {\n  fill: #ffd597;\n  filter: drop-shadow(0 -0.1rem 0.2rem #e3b82a);\n}\n\n.bar-average {\n  stroke-width: 2;\n  stroke: #e3b82a;\n}\n\n.week {\n  fill: #e2bca1;\n}\n.week.selected {\n  fill: #e2bca1;\n  filter: drop-shadow(0 -0.1rem 0.2rem #e2bca1);\n}\n\n.weekend {\n  fill: #ffd597;\n}\n.weekend.selected {\n  fill: #ffd597;\n  filter: drop-shadow(0 -0.1rem 0.2rem #e3b82a);\n}\n\n/** Animation **/\n.bounce-1 {\n  animation-name: bounce-1;\n  animation-timing-function: cubic-bezier(1, 1, 0.42, 1);\n  animation-iteration-count: 1;\n  transform-origin: bottom center;\n  transform-box: fill-box;\n}\n\n@keyframes bounce-1 {\n  0% {\n    transform: scale(0.1, 0.1);\n  }\n  28% {\n    transform: scale(0.1, 1.1);\n  }\n  45% {\n    transform: scale(0.8, 0.95);\n  }\n  55% {\n    transform: scale(1, 1);\n  }\n  65% {\n    transform: scale(1, 0.98);\n  }\n  75% {\n    transform: scale(1, 1);\n  }\n}\n.bounce-2 {\n  animation-name: bounce-2;\n  animation-timing-function: cubic-bezier(1, 1, 0.42, 1);\n  animation-iteration-count: 1;\n  transform-origin: bottom center;\n  transform-box: fill-box;\n}\n\n@keyframes bounce-2 {\n  0% {\n    transform: scale(1, 1);\n  }\n  28% {\n    transform: scale(1, 1.1);\n  }\n  45% {\n    transform: scale(0.8, 0.95);\n  }\n  55% {\n    transform: scale(1, 1);\n  }\n  65% {\n    transform: scale(1, 0.98);\n  }\n  75% {\n    transform: scale(1, 1);\n  }\n}\n.bounce-3 {\n  animation-name: bounce-3;\n  animation-timing-function: cubic-bezier(1, 1, 0.42, 1);\n  animation-iteration-count: 1;\n  transform-origin: bottom center;\n}\n\n@keyframes bounce-3 {\n  0% {\n    opacity: 0.6;\n    transform: scaleY(1);\n  }\n  50% {\n    transform: scaleY(1.1);\n    opacity: 0.8;\n  }\n  100% {\n    transform: scaleY(1);\n    opacity: 1;\n  }\n}\n/** Animation delay **/\n.delay {\n  animation-duration: 0.4s;\n}\n\n.delay--0 {\n  animation-duration: 0.4s;\n}\n\n.delay--1 {\n  animation-duration: 0.48s;\n}\n\n.delay--2 {\n  animation-duration: 0.56s;\n}\n\n.delay--3 {\n  animation-duration: 0.64s;\n}\n\n.delay--4 {\n  animation-duration: 0.72s;\n}\n\n.delay--5 {\n  animation-duration: 0.8s;\n}\n\n.delay--6 {\n  animation-duration: 0.88s;\n}\n\n.delay--7 {\n  animation-duration: 0.96s;\n}\n\n.delay--8 {\n  animation-duration: 1.04s;\n}\n\n.delay--9 {\n  animation-duration: 1.12s;\n}\n\n.delay--10 {\n  animation-duration: 1.2s;\n}\n\n.delay--11 {\n  animation-duration: 1.28s;\n}\n\n.delay--12 {\n  animation-duration: 1.36s;\n}\n\n.delay--13 {\n  animation-duration: 1.44s;\n}\n\n.delay--14 {\n  animation-duration: 1.52s;\n}\n\n.delay--15 {\n  animation-duration: 1.6s;\n}\n\n.delay--16 {\n  animation-duration: 1.68s;\n}\n\n.delay--17 {\n  animation-duration: 1.76s;\n}\n\n.delay--18 {\n  animation-duration: 1.84s;\n}\n\n.delay--19 {\n  animation-duration: 1.92s;\n}\n\n.delay--20 {\n  animation-duration: 2s;\n}\n\n.delay--21 {\n  animation-duration: 2.08s;\n}\n\n.delay--22 {\n  animation-duration: 2.16s;\n}\n\n.delay--23 {\n  animation-duration: 2.24s;\n}\n\n.delay--24 {\n  animation-duration: 2.32s;\n}\n\n.delay--25 {\n  animation-duration: 2.4s;\n}\n\n.delay--26 {\n  animation-duration: 2.48s;\n}\n\n.delay--27 {\n  animation-duration: 2.56s;\n}\n\n.delay--28 {\n  animation-duration: 2.64s;\n}\n\n.delay--29 {\n  animation-duration: 2.72s;\n}\n\n.delay--30 {\n  animation-duration: 2.8s;\n}\n\n.delay--31 {\n  animation-duration: 2.88s;\n}\n\n.delay--32 {\n  animation-duration: 2.96s;\n}\n\n.delay--33 {\n  animation-duration: 3.04s;\n}\n\n.delay--34 {\n  animation-duration: 3.12s;\n}\n\n.delay--35 {\n  animation-duration: 3.2s;\n}\n\n.delay--36 {\n  animation-duration: 3.28s;\n}\n\n.delay--37 {\n  animation-duration: 3.36s;\n}\n\n.delay--38 {\n  animation-duration: 3.44s;\n}\n\n.delay--39 {\n  animation-duration: 3.52s;\n}\n\n.delay--40 {\n  animation-duration: 3.6s;\n}\n\n.delay--41 {\n  animation-duration: 3.68s;\n}\n\n.delay--42 {\n  animation-duration: 3.76s;\n}\n\n.delay--43 {\n  animation-duration: 3.84s;\n}\n\n.delay--44 {\n  animation-duration: 3.92s;\n}\n\n.delay--45 {\n  animation-duration: 4s;\n}\n\n.delay--46 {\n  animation-duration: 4.08s;\n}\n\n.delay--47 {\n  animation-duration: 4.16s;\n}\n\n.delay--48 {\n  animation-duration: 4.24s;\n}\n\n/** BLACK **/\n/** RED **/\n/** YELLOW **/\n/** ORANGE **/\n/** BLUE **/\n/** GREEN **/\n/** WHITE **/\n/** GREY **/\n/** App colors **/\n/** TABS GRADIENT **/\n/** SCROLLBAR **/\nbutton.btn-highlight {\n  background: radial-gradient(105.25% 64.58% at 49.68% 70.83%, rgba(226, 137, 4, 0.5) 0%, rgba(255, 255, 255, 0) 100%), #f1c017;\n  background-color: #e3b82a;\n  border: none;\n  border-radius: 2px;\n  margin: 1.5rem 0 0;\n  width: 100%;\n  text-transform: initial;\n  cursor: pointer;\n}\nbutton.btn-highlight span:first-child {\n  color: #000000;\n}\nbutton.btn-highlight:hover, button.btn-highlight:focus, button.btn-highlight.active, button.btn-highlight:disabled {\n  background-color: #b89318;\n}\nbutton.btn-highlight:disabled {\n  cursor: not-allowed;\n  opacity: 0.5;\n}\nbutton.btn-primary-positive {\n  background: transparent;\n  background-color: transparent;\n  border: 1px solid #121212;\n  border-radius: 2px;\n  margin: 1.5rem 0 0;\n  width: 100%;\n  text-transform: initial;\n  cursor: pointer;\n}\nbutton.btn-primary-positive span:first-child {\n  color: #e3b82a;\n}\nbutton.btn-primary-positive:hover, button.btn-primary-positive:focus, button.btn-primary-positive.active, button.btn-primary-positive:disabled {\n  background-color: rgba(18, 18, 18, 0.2);\n}\nbutton.btn-primary-positive:hover span:first-child, button.btn-primary-positive:focus span:first-child, button.btn-primary-positive.active span:first-child, button.btn-primary-positive:disabled span:first-child {\n  color: rgba(227, 184, 42, 0.7);\n}\nbutton.btn-primary-positive:disabled {\n  cursor: not-allowed;\n  opacity: 0.5;\n}\nbutton.btn-primary-challenge {\n  background: transparent;\n  background-color: #61f0f2;\n  border: 1px solid #61f0f2;\n  border-radius: 2px;\n  margin: 1.5rem 0 0;\n  width: 100%;\n  text-transform: initial;\n  cursor: pointer;\n}\nbutton.btn-primary-challenge span:first-child {\n  color: black;\n}\nbutton.btn-primary-challenge:hover, button.btn-primary-challenge:focus, button.btn-primary-challenge.active, button.btn-primary-challenge:disabled {\n  background-color: rgba(97, 240, 242, 0.2);\n}\nbutton.btn-primary-challenge:hover span:first-child, button.btn-primary-challenge:focus span:first-child, button.btn-primary-challenge.active span:first-child, button.btn-primary-challenge:disabled span:first-child {\n  color: black;\n}\nbutton.btn-primary-challenge:disabled {\n  cursor: not-allowed;\n  opacity: 0.5;\n}\nbutton.btn-secondary {\n  background: transparent;\n  background-color: transparent;\n  border: 1px solid #7b7b7b;\n  border-radius: 2px;\n  margin: 1.5rem 0 0;\n  width: 100%;\n  text-transform: initial;\n  cursor: pointer;\n}\nbutton.btn-secondary span:first-child {\n  color: #f1c017;\n}\nbutton.btn-secondary:disabled {\n  cursor: not-allowed;\n  opacity: 0.5;\n}\nbutton.btn-secondary-positive {\n  background: transparent;\n  background-color: transparent;\n  border: 1px solid #121212;\n  border-radius: 2px;\n  margin: 1.5rem 0 0;\n  width: 100%;\n  text-transform: initial;\n  cursor: pointer;\n}\nbutton.btn-secondary-positive span:first-child {\n  color: #e0e0e0;\n}\nbutton.btn-secondary-positive:hover, button.btn-secondary-positive:focus, button.btn-secondary-positive.active, button.btn-secondary-positive:disabled {\n  background-color: rgba(18, 18, 18, 0.2);\n}\nbutton.btn-secondary-positive:hover span:first-child, button.btn-secondary-positive:focus span:first-child, button.btn-secondary-positive.active span:first-child, button.btn-secondary-positive:disabled span:first-child {\n  color: rgba(224, 224, 224, 0.7);\n}\nbutton.btn-secondary-positive:disabled {\n  cursor: not-allowed;\n  opacity: 0.5;\n}\nbutton.btn-secondary-negative {\n  background: transparent;\n  background-color: transparent;\n  border: 1px solid #7b7b7b;\n  border-radius: 2px;\n  margin: 1.5rem 0 0;\n  width: 100%;\n  text-transform: initial;\n  cursor: pointer;\n}\nbutton.btn-secondary-negative span:first-child {\n  color: #e0e0e0;\n}\nbutton.btn-secondary-negative:hover, button.btn-secondary-negative:focus, button.btn-secondary-negative.active, button.btn-secondary-negative:disabled {\n  background-color: rgba(123, 123, 123, 0.2);\n}\nbutton.btn-secondary-negative:hover span:first-child, button.btn-secondary-negative:focus span:first-child, button.btn-secondary-negative.active span:first-child, button.btn-secondary-negative:disabled span:first-child {\n  color: rgba(224, 224, 224, 0.7);\n}\nbutton.btn-secondary-negative:disabled {\n  cursor: not-allowed;\n  opacity: 0.5;\n}\nbutton.btn-duel-off {\n  background: #121212;\n  background-color: #121212;\n  border: 1px solid rgba(97, 240, 242, 0.5);\n  border-radius: 2px;\n  margin: 1.5rem 0 0;\n  width: 100%;\n  text-transform: initial;\n  cursor: pointer;\n}\nbutton.btn-duel-off span:first-child {\n  color: #ffffff;\n}\nbutton.btn-duel-off:hover, button.btn-duel-off:focus, button.btn-duel-off.active, button.btn-duel-off:disabled {\n  background-color: black;\n}\nbutton.btn-duel-off:disabled {\n  cursor: not-allowed;\n  opacity: 0.5;\n}\nbutton.btn-duel-active {\n  border-radius: 4px !important;\n  background: radial-gradient(105.25% 64.58% at 49.68% 70.83%, rgba(1, 153, 163, 0.5) 0%, rgba(255, 255, 255, 0) 100%), #58ffff;\n  background-color: radial-gradient(105.25% 64.58% at 49.68% 70.83%, rgba(1, 153, 163, 0.5) 0%, rgba(255, 255, 255, 0) 100%), #58ffff;\n  border: none;\n  border-radius: 2px;\n  margin: 1.5rem 0 0;\n  width: 100%;\n  text-transform: initial;\n  cursor: pointer;\n}\nbutton.btn-duel-active span:first-child {\n  color: #121212;\n}\nbutton.btn-duel-active:disabled {\n  cursor: not-allowed;\n  opacity: 0.5;\n}\nbutton.btn-duel-on {\n  background: radial-gradient(60.65% 30.62% at 50% 3.13%, #2a2b30 0%, #1b1c22 100%);\n  background-color: #121212;\n  border: 1px solid #58ffff;\n  border-radius: 2px;\n  margin: 1.5rem 0 0;\n  width: 100%;\n  text-transform: initial;\n  cursor: pointer;\n}\nbutton.btn-duel-on span:first-child {\n  color: #ffffff;\n}\nbutton.btn-duel-on:hover, button.btn-duel-on:focus, button.btn-duel-on.active, button.btn-duel-on:disabled {\n  background-color: black;\n}\nbutton.btn-duel-on:disabled {\n  cursor: not-allowed;\n  opacity: 0.5;\n}\nbutton.btn-profile-next {\n  background: radial-gradient(105.25% 64.58% at 49.68% 70.83%, rgba(226, 137, 4, 0.5) 0%, rgba(255, 255, 255, 0) 100%), #f1c017;\n  background-color: #e3b82a;\n  border: 1px solid #e3b82a;\n  border-radius: 2px;\n  margin: 1.5rem 0 0;\n  width: 100%;\n  text-transform: initial;\n  cursor: pointer;\n}\nbutton.btn-profile-next span:first-child {\n  color: #000000;\n}\nbutton.btn-profile-next:hover, button.btn-profile-next:focus, button.btn-profile-next.active, button.btn-profile-next:disabled {\n  background-color: #b89318;\n}\nbutton.btn-profile-next:disabled {\n  cursor: not-allowed;\n  opacity: 0.5;\n}\nbutton.btn-profile-back {\n  background: none;\n  background-color: none;\n  border: 1px solid #e0e0e0;\n  border-radius: 2px;\n  margin: 1.5rem 0 0;\n  width: 100%;\n  text-transform: initial;\n  cursor: pointer;\n}\nbutton.btn-profile-back span:first-child {\n  color: #e0e0e0;\n}\nbutton.btn-profile-back:disabled {\n  cursor: not-allowed;\n  opacity: 0.5;\n}\n\n/** BLACK **/\n/** RED **/\n/** YELLOW **/\n/** ORANGE **/\n/** BLUE **/\n/** GREEN **/\n/** WHITE **/\n/** GREY **/\n/** App colors **/\n/** TABS GRADIENT **/\n/** SCROLLBAR **/\n.card {\n  background: linear-gradient(180deg, #323339 0%, #25262b 100%);\n  box-sizing: border-box;\n  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.75);\n  border-radius: 4px;\n  padding: 16px;\n}\n.card:hover {\n  background: linear-gradient(180deg, rgba(70, 71, 77, 0.7) 0%, rgba(57, 58, 63, 0.7) 100%);\n}\n.card.rich-card {\n  padding: 16px;\n}\n\n/** BLACK **/\n/** RED **/\n/** YELLOW **/\n/** ORANGE **/\n/** BLUE **/\n/** GREEN **/\n/** WHITE **/\n/** GREY **/\n/** App colors **/\n/** TABS GRADIENT **/\n/** SCROLLBAR **/\ndiv.modal-root .MuiBackdrop-root {\n  background-color: hsla(231deg, 11%, 12%, 0.85);\n}\n\ndiv.modal-paper {\n  background: linear-gradient(180deg, #323339 0%, #25262b 100%);\n  width: 36rem;\n  max-width: 100%;\n  max-height: 90vh;\n  padding: 2rem;\n  box-sizing: border-box;\n  box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.55);\n  border-radius: 4px;\n  margin: 0 0 0 13.75rem;\n  align-items: center;\n  color: #ffffff;\n}\n@media only screen and (max-width : 1023px) {\n  div.modal-paper {\n    width: 35rem;\n    margin: 0;\n  }\n}\n@media only screen and (max-width : 768px) {\n  div.modal-paper {\n    padding: 1rem 1rem 1.5rem;\n    width: 85%;\n    max-width: 35rem;\n    margin: 0;\n  }\n}\ndiv.modal-paper.no-padding {\n  padding: 0;\n}\ndiv.modal-paper.blue-border {\n  border: 1px solid rgba(88, 255, 255, 0.2509803922);\n}\ndiv.modal-paper.blue-light-border {\n  border: 1px solid #61f0f2;\n}\ndiv.modal-paper.yellow-border {\n  border: 1px solid rgba(227, 184, 42, 0.4);\n}\ndiv.modal-paper .modal-paper-close-button {\n  position: absolute;\n  top: 0.5rem;\n  right: 0.5rem;\n  padding: 5px 5px;\n  z-index: 10;\n}\n\ndiv.modal-paper-full-screen {\n  background: linear-gradient(180deg, #323339 0%, #25262b 100%);\n  width: 100%;\n  max-width: 100%;\n  height: 100%;\n  max-height: 100%;\n  padding: 0;\n  margin: 0;\n  box-sizing: border-box;\n  box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.55);\n  border-radius: 4px;\n  color: #ffffff;\n  display: flex;\n  align-items: center;\n}\ndiv.modal-paper-full-screen.dark-background {\n  background: #121212;\n}\n\n/** BLACK **/\n/** RED **/\n/** YELLOW **/\n/** ORANGE **/\n/** BLUE **/\n/** GREEN **/\n/** WHITE **/\n/** GREY **/\n/** App colors **/\n/** TABS GRADIENT **/\n/** SCROLLBAR **/\ndiv.expansion-panel-root {\n  margin: 1.2rem 0;\n  color: #e0e0e0;\n  background: linear-gradient(180deg, #323339 0%, #25262b 100%);\n  border-radius: 4px;\n  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.75);\n  transition: background-color 0.6s ease;\n  box-sizing: border-box;\n}\ndiv.expansion-panel-root.Mui-expanded:first-child {\n  margin: 1.2rem 0;\n}\ndiv.expansion-panel-root.Mui-expanded:last-child {\n  margin: 1.2rem 0;\n}\ndiv.expansion-panel-root.red-border {\n  border: 1px solid #d25959;\n}\n\ndiv.expansion-panel-summary {\n  padding: 0.25rem 1.2rem;\n  min-height: 4rem;\n}\ndiv.expansion-panel-summary.Mui-focused {\n  border-radius: 4px;\n  background-color: unset;\n  box-shadow: 0 0 0 1px #e0e0e0;\n}\ndiv.expansion-panel-summary.Mui-expanded {\n  min-height: 4rem;\n}\ndiv.expansion-panel-summary.Mui-expanded.small {\n  min-height: 3rem;\n}\ndiv.expansion-panel-summary.small {\n  padding: 0 1.2rem;\n  min-height: 3rem;\n}\ndiv.expansion-panel-summary.bold-text {\n  font-weight: bold;\n}\n\ndiv.expansion-panel-content {\n  display: flex;\n  align-items: center;\n}\ndiv.expansion-panel-content.Mui-expanded {\n  margin: 0.75rem 0;\n}\n\ndiv.expansion-panel-details {\n  padding: 0 1.2rem 1.2rem;\n}\n\n/** BLACK **/\n/** RED **/\n/** YELLOW **/\n/** ORANGE **/\n/** BLUE **/\n/** GREEN **/\n/** WHITE **/\n/** GREY **/\n/** App colors **/\n/** TABS GRADIENT **/\n/** SCROLLBAR **/\na {\n  color: #deaf0e;\n}\na:visited {\n  color: #deaf0e;\n}\n\na:focus {\n  outline: none;\n  box-shadow: inset 0 0 0 1px #e0e0e0;\n}\na:focus > div:first-child {\n  box-shadow: 0 0 0 1px #e0e0e0;\n}\n\na.MuiLink-underlineHover:hover {\n  text-decoration: none;\n}\n\na.MuiTypography-colorPrimary {\n  color: #e0e0e0;\n}\n\n:root {\n  white-space: pre-line;\n  --blue: #58ffff;\n  --blue40: rgba(88, 255, 255, 0.2509803922);\n  --blueBackground: radial-gradient(105.25% 64.58% at 49.68% 70.83%, rgba(1, 153, 163, 0.5) 0%, rgba(255, 255, 255, 0) 100%), #58ffff;\n  --blueRadialGradient: radial-gradient(105.25% 64.58% at 49.68% 70.83%, rgba(1, 153, 163, 0.5) 0%, rgba(255, 255, 255, 0) 100%), #58ffff;\n  --blueRadialGradientTrans: radial-gradient(circle, #58ffff 0%, rgba(255, 255, 255, 0) 100%);\n  --elecColor: #d87b39;\n  --elecColor40: rgba(216, 123, 57, 0.4);\n  --elecCompareColor: #e2bca1;\n  --gasColor: #45d1b8;\n  --gasColor40: rgba(69, 209, 184, 0.4);\n  --gasCompareColor: #a8f7e9;\n  --waterColor: #3a98ec;\n  --waterColor40: rgba(58, 152, 236, 0.4);\n  --waterCompareColor: #abd4fa;\n  --multiColor: #e3b82a;\n  --multiCompareColor: #ffd597;\n  --redPrimary: #d25959;\n  --greyBright: #e0e0e0;\n  --greyDark: #7b7b7b;\n  --textWhite: #ffffff;\n  --softGrey: #a0a0a0;\n  --darkLight: #25262b;\n  --darkLight2: #121212;\n  --textFont: Lato, sans-serif;\n  --greyLinearGradientBackground: linear-gradient(180deg, #323339 0%, #25262b 100%);\n  --multiColorRadialGradientTrans: radial-gradient(circle, #e3b82a 0%, rgba(255, 255, 255, 0) 100%);\n  --elecColorRadialGradientTrans: radial-gradient(circle, #d87b39 0%, rgba(255, 255, 255, 0) 100%);\n  --waterColorRadialGradientTrans: radial-gradient(circle, #3a98ec 0%, rgba(255, 255, 255, 0) 100%);\n  --gasColorRadialGradientTrans: radial-gradient(circle, #e3b82a 0%, rgba(255, 255, 255, 0) 100%);\n  --multiColorRadialGradient: radial-gradient(105.25% 64.58% at 49.68% 70.83%, rgba(226, 137, 4, 0.5) 0%, rgba(255, 255, 255, 0) 100%), #f1c017;\n  --elecColorRadialGradient: radial-gradient(105.25% 64.58% at 49.68% 70.83%, rgba(158, 67, 2, 0.5) 0%, rgba(255, 255, 255, 0) 100%), #d87b39;\n  --gasColorRadialGradient: radial-gradient(105.25% 64.58% at 49.68% 70.83%, rgba(4, 106, 88, 0.5) 0%, rgba(255, 255, 255, 0) 100%), #45d1b8;\n  --waterColorRadialGradient: radial-gradient(105.25% 64.58% at 49.68% 70.83%, rgba(2, 93, 174, 0.5) 0%, rgba(255, 255, 255, 0) 100%), #3a98ec;\n}\n\n.application {\n  overflow-x: hidden;\n  background-color: #121212;\n}\n\n.accordion-icon {\n  color: #ffffff;\n}\n\n.loaderContainer {\n  height: 80vh;\n  display: flex;\n  flex: 1;\n  justify-content: center;\n  align-items: center;\n}", ""]);
 
 
 
@@ -32083,6 +32083,8 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
 var Bar = function Bar(_ref) {
+  var _yScale, _yScale2, _compareDataload$valu, _xScale;
+
   var index = _ref.index,
       dataload = _ref.dataload,
       compareDataload = _ref.compareDataload,
@@ -32097,7 +32099,8 @@ var Bar = function Bar(_ref) {
       isMultiMissingFluid = _ref.isMultiMissingFluid,
       weekdays = _ref.weekdays,
       _ref$clickable = _ref.clickable,
-      clickable = _ref$clickable === void 0 ? true : _ref$clickable;
+      clickable = _ref$clickable === void 0 ? true : _ref$clickable,
+      average = _ref.average;
   var dispatch = (0, _hooks.useAppDispatch)();
 
   var _useAppSelector = (0, _hooks.useAppSelector)(function (state) {
@@ -32140,59 +32143,56 @@ var Bar = function Bar(_ref) {
     setCompareAnimationEnded(true);
   };
 
-  var tempYScale = yScale(dataload.value);
-  var yScaleValue = tempYScale ? tempYScale : 0;
-  var tempCompareYScale = yScale(compareDataload ? compareDataload.value : 0);
-  var yScaleCompareValue = tempCompareYScale ? tempCompareYScale : 0;
-  var tempXScale = xScale(dataload.date.toLocaleString(_luxon.DateTime.DATETIME_SHORT));
-  var xScaleValue = tempXScale ? tempXScale : 0;
+  var value = dataload.value;
+  /**
+   * Use 10% of average as the placeholder if average is above 1,
+   * otherwise use a minimum of 1 as the placeholder.
+   */
+
+  if (value === -1 && average) {
+    value = average > 1 ? average * 0.1 : 1;
+  }
+
+  var yScaleValue = (_yScale = yScale(value)) !== null && _yScale !== void 0 ? _yScale : 0;
+  var yScaleCompareValue = (_yScale2 = yScale((_compareDataload$valu = compareDataload === null || compareDataload === void 0 ? void 0 : compareDataload.value) !== null && _compareDataload$valu !== void 0 ? _compareDataload$valu : 0)) !== null && _yScale2 !== void 0 ? _yScale2 : 0;
+  var xScaleValue = (_xScale = xScale(dataload.date.toLocaleString(_luxon.DateTime.DATETIME_SHORT))) !== null && _xScale !== void 0 ? _xScale : 0;
   var isSelectedDate = isDuel ? false : new _dateChart.default().compareStepDate(timeStep, selectedDate, dataload.date);
-  var delayIndex = index % 13;
-  var edgeBrowser = browser && browser.name !== 'edge';
-  var selected = isSelectedDate ? ' selected' : '';
-  var bounce = edgeBrowser ? '1' : '3';
-  var disabled = "".concat(clickable ? '' : 'disabled');
+  var clickedAnim = clicked ? 'bounce-2 delay' : '';
+  var disabled = clickable ? '' : 'disabled';
+  var selected = isSelectedDate ? 'selected' : '';
 
   var getBarClass = function getBarClass() {
-    var bounceDelay = " bounce-".concat(bounce, " delay--").concat(delayIndex);
-    var fluidWeekdays = "bar-".concat(fluidStyle, " ").concat(weekdays);
+    var upcoming = dataload.value === -1 ? 'bar-UNCOMING' : '';
+    var edgeBrowser = browser && browser.name !== 'edge';
+    var bounce = edgeBrowser ? '1' : '3';
+    var baseStyles = "bar-".concat(fluidStyle, " ").concat(upcoming, " ").concat(weekdays, " ").concat(selected, " ").concat(disabled);
 
     if (clicked) {
-      return "".concat(fluidWeekdays).concat(selected, " bounce-2 delay");
-    } else if (animationEnded) {
-      return "".concat(fluidWeekdays).concat(selected, " ").concat(disabled);
+      return "".concat(baseStyles, " ").concat(clickedAnim);
     }
 
-    return "".concat(fluidWeekdays).concat(bounceDelay).concat(selected, " ").concat(disabled);
-  };
-
-  var getCompareBarClass = function getCompareBarClass() {
-    var bounceValue = clicked ? edgeBrowser ? '2' : '3' : bounce;
-    var bounceDelay = " bounce-".concat(bounceValue, " delay--").concat(clicked ? 0 : delayIndex);
-    var fluidStyleClass = "bar-compare-".concat(fluidStyle);
-
-    if (clicked) {
-      return "".concat(fluidStyleClass, " ").concat(selected).concat(bounceDelay);
+    if (animationEnded) {
+      return baseStyles;
     }
 
-    if (isSelectedDate) {
-      return compareAnimationEnded ? "".concat(fluidStyleClass, " ").concat(selected) : "".concat(fluidStyleClass, " ").concat(selected).concat(bounceDelay);
-    }
+    return "".concat(baseStyles, " bounce-").concat(bounce, " delay--").concat(index);
+  };
 
-    return compareAnimationEnded ? fluidStyleClass : "".concat(fluidStyleClass, " ").concat(bounceDelay);
+  var getCompareBarClass = function getCompareBarClass() {
+    var animate = "bounce-2 delay--".concat(clicked ? 0 : index);
+    var animationClass = compareAnimationEnded ? '' : animate;
+    return "bar-compare-".concat(fluidStyle, " ").concat(selected, " ").concat(animationClass, " ").concat(clickedAnim);
   };
 
-  var compareBarClass = getCompareBarClass();
-  var barClass = getBarClass();
   var barBackgroundClass = isSelectedDate;
 
   var getBandWidth = function getBandWidth() {
     return compare ? xScale.bandwidth() / 2 : xScale.bandwidth();
   };
 
-  var topRoundedRect = function topRoundedRect(_x, _y, _width, _height) {
-    var radius = _height > 4 ? 4 : _height / 4;
-    return 'M' + _x + ',' + (_y + radius) + ' a' + radius + ',' + radius + ' 0 0 1 ' + radius + ',' + -radius + 'h' + (_width - 2 * radius) + 'a' + radius + ',' + radius + ' 0 0 1 ' + radius + ',' + radius + 'v' + (_height - radius) + 'h' + -_width + 'z';
+  var topRoundedRect = function topRoundedRect(x, y, width, height) {
+    var radius = height > 4 ? 4 : height / 4;
+    return "\n      M".concat(x, ",").concat(y + radius, "\n      a").concat(radius, ",").concat(radius, " 0 0 1 ").concat(radius, ",").concat(-radius, "\n      h").concat(width - 2 * radius, "\n      a").concat(radius, ",").concat(radius, " 0 0 1 ").concat(radius, ",").concat(radius, "\n      v").concat(height - radius, "\n      h").concat(-width, "\n      z");
   };
 
   (0, _react.useEffect)(function () {
@@ -32214,13 +32214,35 @@ var Bar = function Bar(_ref) {
     height: height + 40,
     className: "background-".concat(barBackgroundClass),
     fill: "#E0E0E0"
+  })), height > 0 && dataload.state === _enums.DataloadState.COMING && dataload.date < _luxon.DateTime.local() && /*#__PURE__*/_react.default.createElement("g", {
+    transform: "translate(".concat(xScaleValue, ", ").concat(yScaleValue, ")"),
+    className: "barFill"
+  }, /*#__PURE__*/_react.default.createElement("defs", null, /*#__PURE__*/_react.default.createElement("linearGradient", {
+    id: "gradient",
+    x1: "0",
+    x2: "0",
+    y1: "0",
+    y2: "1"
+  }, /*#__PURE__*/_react.default.createElement("stop", {
+    id: "stop-color-1",
+    offset: "0%"
+  }), /*#__PURE__*/_react.default.createElement("stop", {
+    id: "stop-color-2",
+    offset: "100%"
+  }))), /*#__PURE__*/_react.default.createElement("path", {
+    d: topRoundedRect(compare ? getBandWidth() : 0, 0, weekdays ? 3 : getBandWidth(), height - yScaleValue),
+    className: getBarClass(),
+    onClick: !weekdays ? handleClick : function () {
+      return undefined;
+    },
+    onAnimationEnd: onAnimationEnd
   })), height > 0 && dataload.value >= 0 && isMultiMissingFluid ? /*#__PURE__*/_react.default.createElement("g", {
     transform: "translate(".concat(xScaleValue, ", ").concat(yScaleValue, ")"),
     fill: "#00000",
     className: "barFill"
   }, /*#__PURE__*/_react.default.createElement("defs", null, /*#__PURE__*/_react.default.createElement("linearGradient", {
     id: "gradient",
-    className: barClass,
+    className: getBarClass(),
     x1: "0",
     x2: "0",
     y1: "0",
@@ -32268,8 +32290,7 @@ var Bar = function Bar(_ref) {
   }))), /*#__PURE__*/_react.default.createElement("path", {
     d: topRoundedRect(compare ? getBandWidth() : 0, 0, getBandWidth(), height - yScaleValue),
     stroke: !isSelectedDate ? '#71612E' : '#e3b82a',
-    fill: isSelectedDate ? 'url(#diagonalHatchSelected)' : 'url(#diagonalHatch)' // className={isDuel ? 'bar-duel' : barClass}
-    ,
+    fill: isSelectedDate ? 'url(#diagonalHatchSelected)' : 'url(#diagonalHatch)',
     onClick: !weekdays ? handleClick : function () {
       return undefined;
     },
@@ -32278,7 +32299,7 @@ var Bar = function Bar(_ref) {
     transform: "translate(".concat(xScaleValue, ", ").concat(yScaleValue, ")")
   }, /*#__PURE__*/_react.default.createElement("defs", null, /*#__PURE__*/_react.default.createElement("linearGradient", {
     id: "gradient",
-    className: barClass,
+    className: getBarClass(),
     x1: "0",
     x2: "0",
     y1: "0",
@@ -32291,8 +32312,7 @@ var Bar = function Bar(_ref) {
     offset: "100%"
   }))), /*#__PURE__*/_react.default.createElement("path", {
     d: topRoundedRect(compare ? getBandWidth() : 0, 0, weekdays ? 3 : getBandWidth(), height - yScaleValue),
-    fill: "url(#gradient)",
-    className: isDuel ? 'bar-duel' : barClass,
+    className: isDuel ? 'bar-duel' : getBarClass(),
     onClick: !weekdays ? handleClick : function () {
       return undefined;
     },
@@ -32301,7 +32321,7 @@ var Bar = function Bar(_ref) {
     transform: "translate(".concat(xScaleValue, ", ").concat(yScaleCompareValue, ")")
   }, /*#__PURE__*/_react.default.createElement("defs", null, /*#__PURE__*/_react.default.createElement("linearGradient", {
     id: "gradient-compare",
-    className: compareBarClass,
+    className: getCompareBarClass(),
     x1: "0",
     x2: "0",
     y1: "0",
@@ -32314,8 +32334,7 @@ var Bar = function Bar(_ref) {
     offset: "100%"
   }))), /*#__PURE__*/_react.default.createElement("path", {
     d: topRoundedRect(0, 0, getBandWidth(), height - yScaleCompareValue),
-    fill: "url(#gradient-compare)",
-    className: compareBarClass,
+    className: getCompareBarClass(),
     onClick: handleClick,
     onAnimationEnd: onCompareAnimationEnd
   })));
diff --git a/index.html b/index.html
index f8449d350eba1197da1c3b5e8f054b47d3157edf..4853ebcd286fc953078ddba51f2567762e45745d 100644
--- a/index.html
+++ b/index.html
@@ -1 +1 @@
-<!DOCTYPE html><html lang="{{.Locale}}"><head><meta charset="utf-8"><title>Ecolyo</title><link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32"><link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16"><!-- PWA Manifest --><link rel="manifest" href="/manifest.json" crossorigin="use-credentials"><link rel="mask-icon" href="/safari-pinned-tab.svg" color="#297EF2"><meta name="viewport" content="width=device-width,height=device-height,initial-scale=1,viewport-fit=cover"><!-- PWA Chrome --><link rel="icon" sizes="192x192" href="/android-chrome-192x192.png"><link rel="icon" sizes="512x512" href="/android-chrome-512x512.png"><!-- PWA iOS --><link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"><link rel="apple-touch-startup-image" href="/apple-touch-icon.png"><meta name="apple-mobile-web-app-title" content="Ecolyo"><meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-status-bar-style" content="black"><!-- PWA Colors --><meta name="theme-color" content="#343641"><meta name="background-color" content="#121212">{{.ThemeCSS}} {{.CozyBar}}<script src="//{{.Domain}}/assets/js/piwik.js"></script></head><body><div role="application" class="application" data-cozy="{{.CozyData}}"><script src="vendors/ecolyo.fbf1f65c47dc10085503.js"></script><script src="app/ecolyo.50bff22dbecb1e1ebc82.js"></script></div></body></html>
\ No newline at end of file
+<!DOCTYPE html><html lang="{{.Locale}}"><head><meta charset="utf-8"><title>Ecolyo</title><link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32"><link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16"><!-- PWA Manifest --><link rel="manifest" href="/manifest.json" crossorigin="use-credentials"><link rel="mask-icon" href="/safari-pinned-tab.svg" color="#297EF2"><meta name="viewport" content="width=device-width,height=device-height,initial-scale=1,viewport-fit=cover"><!-- PWA Chrome --><link rel="icon" sizes="192x192" href="/android-chrome-192x192.png"><link rel="icon" sizes="512x512" href="/android-chrome-512x512.png"><!-- PWA iOS --><link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"><link rel="apple-touch-startup-image" href="/apple-touch-icon.png"><meta name="apple-mobile-web-app-title" content="Ecolyo"><meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-status-bar-style" content="black"><!-- PWA Colors --><meta name="theme-color" content="#343641"><meta name="background-color" content="#121212">{{.ThemeCSS}} {{.CozyBar}}<script src="//{{.Domain}}/assets/js/piwik.js"></script></head><body><div role="application" class="application" data-cozy="{{.CozyData}}"><script src="vendors/ecolyo.fbf1f65c47dc10085503.js"></script><script src="app/ecolyo.3cd41c1e46b25de50196.js"></script></div></body></html>
\ No newline at end of file