From 6c7ebc300a85c933f80e648866cb37097052843b Mon Sep 17 00:00:00 2001
From: Julia Radzhabova <julia.radzhabova@onlyoffice.com>
Date: Fri, 26 Feb 2021 16:36:24 +0300
Subject: [PATCH] Update icons

---
 apps/common/main/resources/less/toolbar.less  |  16 +-
 .../main/app/controller/Toolbar.js            |   8 +-
 .../main/resources/img/cf-icons.svg           | 655 ++++++++++--------
 3 files changed, 361 insertions(+), 318 deletions(-)

diff --git a/apps/common/main/resources/less/toolbar.less b/apps/common/main/resources/less/toolbar.less
index 7fb35ebc9..4a969b7a5 100644
--- a/apps/common/main/resources/less/toolbar.less
+++ b/apps/common/main/resources/less/toolbar.less
@@ -637,8 +637,8 @@
 
 .item-databar {
     .icon {
-        width: 20px;
-        height: 22px;
+        width: 25px;
+        height: 25px;
     }
 
     svg.icon {
@@ -648,14 +648,14 @@
         fill: @icon-normal;
     }
 
-    width: 20px;
-    height: 22px;
+    width: 25px;
+    height: 25px;
 }
 
 .item-colorscale {
     .icon {
-        width: 20px;
-        height: 21px;
+        width: 25px;
+        height: 25px;
     }
 
     svg.icon {
@@ -665,8 +665,8 @@
         fill: @icon-normal;
     }
 
-    width: 20px;
-    height: 21px;
+    width: 25px;
+    height: 25px;
 }
 
 .menu-iconsets {
diff --git a/apps/spreadsheeteditor/main/app/controller/Toolbar.js b/apps/spreadsheeteditor/main/app/controller/Toolbar.js
index 610701660..127741f1e 100644
--- a/apps/spreadsheeteditor/main/app/controller/Toolbar.js
+++ b/apps/spreadsheeteditor/main/app/controller/Toolbar.js
@@ -1597,12 +1597,12 @@ define([
             var me = this;
             var menuItem = this.toolbar.mnuDataBars;
             menuItem.menu.addItem(new Common.UI.MenuItem({
-                template: _.template('<div id="id-toolbar-menu-databar" class="menu-shapes" style="margin-left: 5px; width: 173px;"></div>')
+                template: _.template('<div id="id-toolbar-menu-databar" class="menu-shapes" style="margin-left: 5px; width: 203px;"></div>')
             }));
             var picker = new Common.UI.DataViewSimple({
                 el: $('#id-toolbar-menu-databar', menuItem.$el),
                 parentMenu: menuItem.menu,
-                itemTemplate: _.template('<div class="item-databar" id="<%= id %>"><svg width="20" height="22" class=\"icon\"><use xlink:href=\"#bar-<%= data.name %>\"></use></svg></div>')
+                itemTemplate: _.template('<div class="item-databar" id="<%= id %>"><svg width="25" height="25" class=\"icon\"><use xlink:href=\"#bar-<%= data.name %>\"></use></svg></div>')
             });
             picker.on('item:click', function(picker, item, record, e) {
                 if (me.api) {
@@ -1632,12 +1632,12 @@ define([
 
             menuItem = this.toolbar.mnuColorScales;
             menuItem.menu.addItem(new Common.UI.MenuItem({
-                template: _.template('<div id="id-toolbar-menu-colorscales" class="menu-shapes" style="margin-left: 5px; width: 117px;"></div>')
+                template: _.template('<div id="id-toolbar-menu-colorscales" class="menu-shapes" style="margin-left: 5px; width: 136px;"></div>')
             }));
             picker = new Common.UI.DataViewSimple({
                 el: $('#id-toolbar-menu-colorscales', menuItem.$el),
                 parentMenu: menuItem.menu,
-                itemTemplate: _.template('<div class="item-colorscale" id="<%= id %>"><svg width="20" height="21" class=\"icon\"><use xlink:href=\"#color-scale-<%= data.name %>\"></use></svg></div>')
+                itemTemplate: _.template('<div class="item-colorscale" id="<%= id %>"><svg width="25" height="25" class=\"icon\"><use xlink:href=\"#color-scale-<%= data.name %>\"></use></svg></div>')
             });
             picker.on('item:click', function(picker, item, record, e) {
                 if (me.api) {
diff --git a/apps/spreadsheeteditor/main/resources/img/cf-icons.svg b/apps/spreadsheeteditor/main/resources/img/cf-icons.svg
index 9952806d9..44cd0d1c8 100644
--- a/apps/spreadsheeteditor/main/resources/img/cf-icons.svg
+++ b/apps/spreadsheeteditor/main/resources/img/cf-icons.svg
@@ -1,330 +1,373 @@
 <svg aria-hidden="true" style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-<symbol id="color-scale-blue-white-red" viewBox="0 0 20 21">
-<rect id="Rectangle 874" x="0.5" y="0.5" width="19" height="4" stroke="#444444"/>
-<rect id="Rectangle 876" x="0.5" y="4.5" width="19" height="4" stroke="#444444"/>
-<rect id="Rectangle 878" x="0.5" y="8.5" width="19" height="4" stroke="#444444"/>
-<rect id="Rectangle 882" x="0.5" y="12.5" width="19" height="4" stroke="#444444"/>
-<rect id="Rectangle 879" x="1" y="9" width="18" height="3" fill="white"/>
-<rect id="Rectangle 883" x="1" y="13" width="18" height="3" fill="#FAB2B5"/>
-<rect id="Rectangle 881" x="1" y="5" width="18" height="3" fill="#ABC3E3"/>
-<rect id="Rectangle 880" x="1" y="1" width="18" height="3" fill="#5A8AC6"/>
-<rect id="Rectangle 882_2" x="0.5" y="16.5" width="19" height="4" stroke="#444444"/>
-<rect id="Rectangle 883_2" x="1" y="17" width="18" height="3" fill="#F8696B"/>
-</symbol>
+    <symbol id="bar-solid-blue" viewBox="0 0 25 25">
+        <rect id="Rectangle 874" x="2.5" y="2.5" width="20" height="5" fill="white" stroke="#888888"/>
+        <rect id="Rectangle 878" x="2.5" y="7.5" width="20" height="5" fill="white" stroke="#888888"/>
+        <rect id="Rectangle 882" x="2.5" y="12.5" width="20" height="5" fill="white" stroke="#888888"/>
+        <rect id="Rectangle 879" x="3" y="8" width="5" height="4" fill="#4D82B8"/>
+        <rect id="Rectangle 883" x="3" y="13" width="10" height="4" fill="#4D82B8"/>
+        <rect id="Rectangle 880" x="3" y="3" width="14" height="4" fill="#4D82B8"/>
+        <rect id="Rectangle 882_2" x="2.5" y="17.5" width="20" height="5" fill="white" stroke="#888888"/>
+        <rect id="Rectangle 883_2" x="3" y="18" width="19" height="4" fill="#4D82B8"/>
+    </symbol>
 
-<symbol id="color-scale-green-white" viewBox="0 0 20 21">
-<rect id="Rectangle 874" x="0.5" y="0.5" width="19" height="4" stroke="#444444"/>
-<rect id="Rectangle 876" x="0.5" y="4.5" width="19" height="4" stroke="#444444"/>
-<rect id="Rectangle 878" x="0.5" y="8.5" width="19" height="4" stroke="#444444"/>
-<rect id="Rectangle 882" x="0.5" y="12.5" width="19" height="4" stroke="#444444"/>
-<rect id="Rectangle 879" x="1" y="9" width="18" height="3" fill="#B0DDBD"/>
-<rect id="Rectangle 883" x="1" y="13" width="18" height="3" fill="#D6EDDE"/>
-<rect id="Rectangle 881" x="1" y="5" width="18" height="3" fill="#8ACE9C"/>
-<rect id="Rectangle 880" x="1" y="1" width="18" height="3" fill="#63BE7B"/>
-<rect id="Rectangle 882_2" x="0.5" y="16.5" width="19" height="4" stroke="#444444"/>
-<rect id="Rectangle 883_2" x="1" y="17" width="18" height="3" fill="white"/>
-</symbol>
+    <symbol id="bar-solid-green" viewBox="0 0 25 25">
+        <rect id="Rectangle 874" x="2.5" y="2.5" width="20" height="5" fill="white" stroke="#888888"/>
+        <rect id="Rectangle 878" x="2.5" y="7.5" width="20" height="5" fill="white" stroke="#888888"/>
+        <rect id="Rectangle 882" x="2.5" y="12.5" width="20" height="5" fill="white" stroke="#888888"/>
+        <rect id="Rectangle 879" x="3" y="8" width="5" height="4" fill="#63C384"/>
+        <rect id="Rectangle 883" x="3" y="13" width="10" height="4" fill="#63C384"/>
+        <rect id="Rectangle 880" x="3" y="3" width="14" height="4" fill="#63C384"/>
+        <rect id="Rectangle 882_2" x="2.5" y="17.5" width="20" height="5" fill="white" stroke="#888888"/>
+        <rect id="Rectangle 883_2" x="3" y="18" width="19" height="4" fill="#63C384"/>
+    </symbol>
 
-<symbol id="color-scale-green-white-red" viewBox="0 0 20 21">
-<rect id="Rectangle 874" x="0.5" y="0.5" width="19" height="4" stroke="#444444"/>
-<rect id="Rectangle 876" x="0.5" y="4.5" width="19" height="4" stroke="#444444"/>
-<rect id="Rectangle 878" x="0.5" y="8.5" width="19" height="4" stroke="#444444"/>
-<rect id="Rectangle 882" x="0.5" y="12.5" width="19" height="4" stroke="#444444"/>
-<rect id="Rectangle 879" x="1" y="9" width="18" height="3" fill="white"/>
-<rect id="Rectangle 883" x="1" y="13" width="18" height="3" fill="#FAB2B5"/>
-<rect id="Rectangle 881" x="1" y="5" width="18" height="3" fill="#B0DDBD"/>
-<rect id="Rectangle 880" x="1" y="1" width="18" height="3" fill="#63BE7B"/>
-<rect id="Rectangle 882_2" x="0.5" y="16.5" width="19" height="4" stroke="#444444"/>
-<rect id="Rectangle 883_2" x="1" y="17" width="18" height="3" fill="#F8696B"/>
-</symbol>
+    <symbol id="bar-solid-lightblue" viewBox="0 0 25 25">
+        <rect id="Rectangle 874" x="2.5" y="2.5" width="20" height="5" fill="white" stroke="#888888"/>
+        <rect id="Rectangle 878" x="2.5" y="7.5" width="20" height="5" fill="white" stroke="#888888"/>
+        <rect id="Rectangle 882" x="2.5" y="12.5" width="20" height="5" fill="white" stroke="#888888"/>
+        <rect id="Rectangle 879" x="3" y="8" width="5" height="4" fill="#008AEF"/>
+        <rect id="Rectangle 883" x="3" y="13" width="10" height="4" fill="#008AEF"/>
+        <rect id="Rectangle 880" x="3" y="3" width="14" height="4" fill="#008AEF"/>
+        <rect id="Rectangle 882_2" x="2.5" y="17.5" width="20" height="5" fill="white" stroke="#888888"/>
+        <rect id="Rectangle 883_2" x="3" y="18" width="19" height="4" fill="#008AEF"/>
+    </symbol>
 
-<symbol id="color-scale-green-yellow" viewBox="0 0 20 21">
-<rect id="Rectangle 874" x="0.5" y="0.5" width="19" height="4" stroke="#444444"/>
-<rect id="Rectangle 876" x="0.5" y="4.5" width="19" height="4" stroke="#444444"/>
-<rect id="Rectangle 878" x="0.5" y="8.5" width="19" height="4" stroke="#444444"/>
-<rect id="Rectangle 882" x="0.5" y="12.5" width="19" height="4" stroke="#444444"/>
-<rect id="Rectangle 879" x="1" y="9" width="18" height="3" fill="#B1D78C"/>
-<rect id="Rectangle 883" x="1" y="13" width="18" height="3" fill="#D8E394"/>
-<rect id="Rectangle 881" x="1" y="5" width="18" height="3" fill="#8ACB84"/>
-<rect id="Rectangle 880" x="1" y="1" width="18" height="3" fill="#63BE7B"/>
-<rect id="Rectangle 882_2" x="0.5" y="16.5" width="19" height="4" stroke="#444444"/>
-<rect id="Rectangle 883_2" x="1" y="17" width="18" height="3" fill="#FFEF9C"/>
-</symbol>
+    <symbol id="bar-solid-purple" viewBox="0 0 25 25">
+        <rect id="Rectangle 874" x="2.5" y="2.5" width="20" height="5" fill="white" stroke="#888888"/>
+        <rect id="Rectangle 878" x="2.5" y="7.5" width="20" height="5" fill="white" stroke="#888888"/>
+        <rect id="Rectangle 882" x="2.5" y="12.5" width="20" height="5" fill="white" stroke="#888888"/>
+        <rect id="Rectangle 879" x="3" y="8" width="5" height="4" fill="#D6007B"/>
+        <rect id="Rectangle 883" x="3" y="13" width="10" height="4" fill="#D6007B"/>
+        <rect id="Rectangle 880" x="3" y="3" width="14" height="4" fill="#D6007B"/>
+        <rect id="Rectangle 882_2" x="2.5" y="17.5" width="20" height="5" fill="white" stroke="#888888"/>
+        <rect id="Rectangle 883_2" x="3" y="18" width="19" height="4" fill="#D6007B"/>
+    </symbol>
 
-<symbol id="color-scale-green-yellow-red" viewBox="0 0 20 21">
-<rect id="Rectangle 874" x="0.5" y="0.5" width="19" height="4" stroke="#444444"/>
-<rect id="Rectangle 876" x="0.5" y="4.5" width="19" height="4" stroke="#444444"/>
-<rect id="Rectangle 878" x="0.5" y="8.5" width="19" height="4" stroke="#444444"/>
-<rect id="Rectangle 882" x="0.5" y="12.5" width="19" height="4" stroke="#444444"/>
-<rect id="Rectangle 879" x="1" y="9" width="18" height="3" fill="#FFEB84"/>
-<rect id="Rectangle 883" x="1" y="13" width="18" height="3" fill="#FBAA77"/>
-<rect id="Rectangle 881" x="1" y="5" width="18" height="3" fill="#CCE3AB"/>
-<rect id="Rectangle 880" x="1" y="1" width="18" height="3" fill="#63BE7B"/>
-<rect id="Rectangle 882_2" x="0.5" y="16.5" width="19" height="4" stroke="#444444"/>
-<rect id="Rectangle 883_2" x="1" y="17" width="18" height="3" fill="#F8696B"/>
-</symbol>
+    <symbol id="bar-solid-red" viewBox="0 0 25 25">
+        <rect id="Rectangle 874" x="2.5" y="2.5" width="20" height="5" fill="white" stroke="#888888"/>
+        <rect id="Rectangle 878" x="2.5" y="7.5" width="20" height="5" fill="white" stroke="#888888"/>
+        <rect id="Rectangle 882" x="2.5" y="12.5" width="20" height="5" fill="white" stroke="#888888"/>
+        <rect id="Rectangle 879" x="3" y="8" width="5" height="4" fill="#FF555A"/>
+        <rect id="Rectangle 883" x="3" y="13" width="10" height="4" fill="#FF555A"/>
+        <rect id="Rectangle 880" x="3" y="3" width="14" height="4" fill="#FF555A"/>
+        <rect id="Rectangle 882_2" x="2.5" y="17.5" width="20" height="5" fill="white" stroke="#888888"/>
+        <rect id="Rectangle 883_2" x="3" y="18" width="19" height="4" fill="#FF555A"/>
+    </symbol>
 
-<symbol id="color-scale-red-white" viewBox="0 0 20 21">
-<rect id="Rectangle 874" x="19.5" y="20.5" width="19" height="4" transform="rotate(-180 19.5 20.5)" stroke="#444444"/>
-<rect id="Rectangle 876" x="19.5" y="16.5" width="19" height="4" transform="rotate(-180 19.5 16.5)" stroke="#444444"/>
-<rect id="Rectangle 878" x="19.5" y="12.5" width="19" height="4" transform="rotate(-180 19.5 12.5)" stroke="#444444"/>
-<rect id="Rectangle 882" x="19.5" y="8.5" width="19" height="4" transform="rotate(-180 19.5 8.5)" stroke="#444444"/>
-<rect id="Rectangle 879" x="19" y="12" width="18" height="3" transform="rotate(-180 19 12)" fill="#FAB3B5"/>
-<rect id="Rectangle 883" x="19" y="8" width="18" height="3" transform="rotate(-180 19 8)" fill="#F98E90"/>
-<rect id="Rectangle 881" x="19" y="16" width="18" height="3" transform="rotate(-180 19 16)" fill="#FBD8DA"/>
-<rect id="Rectangle 880" x="19" y="20" width="18" height="3" transform="rotate(-180 19 20)" fill="white"/>
-<rect id="Rectangle 882_2" x="19.5" y="4.5" width="19" height="4" transform="rotate(-180 19.5 4.5)" stroke="#444444"/>
-<rect id="Rectangle 883_2" x="19" y="4" width="18" height="3" transform="rotate(-180 19 4)" fill="#F8696B"/>
-</symbol>
+    <symbol id="bar-solid-yellow" viewBox="0 0 25 25">
+        <rect id="Rectangle 874" x="2.5" y="2.5" width="20" height="5" fill="white" stroke="#888888"/>
+        <rect id="Rectangle 878" x="2.5" y="7.5" width="20" height="5" fill="white" stroke="#888888"/>
+        <rect id="Rectangle 882" x="2.5" y="12.5" width="20" height="5" fill="white" stroke="#888888"/>
+        <rect id="Rectangle 879" x="3" y="8" width="5" height="4" fill="#FFB628"/>
+        <rect id="Rectangle 883" x="3" y="13" width="10" height="4" fill="#FFB628"/>
+        <rect id="Rectangle 880" x="3" y="3" width="14" height="4" fill="#FFB628"/>
+        <rect id="Rectangle 882_2" x="2.5" y="17.5" width="20" height="5" fill="white" stroke="#888888"/>
+        <rect id="Rectangle 883_2" x="3" y="18" width="19" height="4" fill="#FFB628"/>
+    </symbol>
 
-<symbol id="color-scale-red-white-blue" viewBox="0 0 20 21">
-<rect id="Rectangle 874" x="19.5" y="20.5" width="19" height="4" transform="rotate(-180 19.5 20.5)" stroke="#444444"/>
-<rect id="Rectangle 876" x="19.5" y="16.5" width="19" height="4" transform="rotate(-180 19.5 16.5)" stroke="#444444"/>
-<rect id="Rectangle 878" x="19.5" y="12.5" width="19" height="4" transform="rotate(-180 19.5 12.5)" stroke="#444444"/>
-<rect id="Rectangle 882" x="19.5" y="8.5" width="19" height="4" transform="rotate(-180 19.5 8.5)" stroke="#444444"/>
-<rect id="Rectangle 879" x="19" y="12" width="18" height="3" transform="rotate(-180 19 12)" fill="white"/>
-<rect id="Rectangle 883" x="19" y="8" width="18" height="3" transform="rotate(-180 19 8)" fill="#FAB2B5"/>
-<rect id="Rectangle 881" x="19" y="16" width="18" height="3" transform="rotate(-180 19 16)" fill="#ABC3E3"/>
-<rect id="Rectangle 880" x="19" y="20" width="18" height="3" transform="rotate(-180 19 20)" fill="#5A8AC6"/>
-<rect id="Rectangle 882_2" x="19.5" y="4.5" width="19" height="4" transform="rotate(-180 19.5 4.5)" stroke="#444444"/>
-<rect id="Rectangle 883_2" x="19" y="4" width="18" height="3" transform="rotate(-180 19 4)" fill="#F8696B"/>
-</symbol>
+    <symbol id="color-scale-blue-white-red" viewBox="0 0 25 25">
+        <rect id="Rectangle 874" x="2.5" y="2.5" width="20" height="5" stroke="#888888"/>
+        <rect id="Rectangle 878" x="2.5" y="7.5" width="20" height="5" stroke="#888888"/>
+        <rect id="Rectangle 882" x="2.5" y="12.5" width="20" height="5" stroke="#888888"/>
+        <rect id="Rectangle 879" x="3" y="8" width="19" height="4" fill="#ABC3E3"/>
+        <rect id="Rectangle 883" x="3" y="13" width="19" height="4" fill="white"/>
+        <rect id="Rectangle 880" x="3" y="3" width="19" height="4" fill="#5A8AC6"/>
+        <rect id="Rectangle 882_2" x="2.5" y="17.5" width="20" height="5" stroke="#888888"/>
+        <rect id="Rectangle 883_2" x="3" y="18" width="19" height="4" fill="#F8696B"/>
+    </symbol>
 
-<symbol id="color-scale-red-white-green" viewBox="0 0 20 21">
-<rect id="Rectangle 874" x="0.5" y="0.5" width="19" height="4" stroke="#444444"/>
-<rect id="Rectangle 876" x="0.5" y="4.5" width="19" height="4" stroke="#444444"/>
-<rect id="Rectangle 878" x="0.5" y="8.5" width="19" height="4" stroke="#444444"/>
-<rect id="Rectangle 882" x="0.5" y="12.5" width="19" height="4" stroke="#444444"/>
-<rect id="Rectangle 879" x="1" y="9" width="18" height="3" fill="white"/>
-<rect id="Rectangle 883" x="1" y="13" width="18" height="3" fill="#B0DDBD"/>
-<rect id="Rectangle 881" x="1" y="5" width="18" height="3" fill="#FAB2B5"/>
-<rect id="Rectangle 880" x="1" y="1" width="18" height="3" fill="#F8696B"/>
-<rect id="Rectangle 882_2" x="0.5" y="16.5" width="19" height="4" stroke="#444444"/>
-<rect id="Rectangle 883_2" x="1" y="17" width="18" height="3" fill="#63BE7B"/>
-</symbol>
+    <symbol id="color-scale-green-white" viewBox="0 0 25 25">
+        <rect id="Rectangle 874" x="2.5" y="2.5" width="20" height="5" stroke="#888888"/>
+        <rect id="Rectangle 878" x="2.5" y="7.5" width="20" height="5" stroke="#888888"/>
+        <rect id="Rectangle 882" x="2.5" y="12.5" width="20" height="5" stroke="#888888"/>
+        <rect id="Rectangle 879" x="3" y="8" width="19" height="4" fill="#8ACE9C"/>
+        <rect id="Rectangle 883" x="3" y="13" width="19" height="4" fill="#D6EDDE"/>
+        <rect id="Rectangle 880" x="3" y="3" width="19" height="4" fill="#63BE7B"/>
+        <rect id="Rectangle 882_2" x="2.5" y="17.5" width="20" height="5" stroke="#888888"/>
+        <rect id="Rectangle 883_2" x="3" y="18" width="19" height="4" fill="white"/>
+    </symbol>
 
-<symbol id="color-scale-red-yellow-green" viewBox="0 0 20 21">
-<rect id="Rectangle 874" x="0.5" y="0.5" width="19" height="4" stroke="#444444"/>
-<rect id="Rectangle 876" x="0.5" y="4.5" width="19" height="4" stroke="#444444"/>
-<rect id="Rectangle 878" x="0.5" y="8.5" width="19" height="4" stroke="#444444"/>
-<rect id="Rectangle 882" x="0.5" y="12.5" width="19" height="4" stroke="#444444"/>
-<rect id="Rectangle 879" x="1" y="9" width="18" height="3" fill="#EDC87E"/>
-<rect id="Rectangle 883" x="1" y="13" width="18" height="3" fill="#B1D580"/>
-<rect id="Rectangle 881" x="1" y="5" width="18" height="3" fill="#FBAA77"/>
-<rect id="Rectangle 880" x="1" y="1" width="18" height="3" fill="#F8696B"/>
-<rect id="Rectangle 882_2" x="0.5" y="16.5" width="19" height="4" stroke="#444444"/>
-<rect id="Rectangle 883_2" x="1" y="17" width="18" height="3" fill="#63BE7B"/>
-</symbol>
+    <symbol id="color-scale-green-white-red" viewBox="0 0 25 25">
+        <rect id="Rectangle 874" x="2.5" y="2.5" width="20" height="5" stroke="#888888"/>
+        <rect id="Rectangle 878" x="2.5" y="7.5" width="20" height="5" stroke="#888888"/>
+        <rect id="Rectangle 882" x="2.5" y="12.5" width="20" height="5" stroke="#888888"/>
+        <rect id="Rectangle 879" x="3" y="8" width="19" height="4" fill="#B0DDBD"/>
+        <rect id="Rectangle 883" x="3" y="13" width="19" height="4" fill="white"/>
+        <rect id="Rectangle 880" x="3" y="3" width="19" height="4" fill="#63BE7B"/>
+        <rect id="Rectangle 882_2" x="2.5" y="17.5" width="20" height="5" stroke="#888888"/>
+        <rect id="Rectangle 883_2" x="3" y="18" width="19" height="4" fill="#F8696B"/>
+    </symbol>
 
-<symbol id="color-scale-white-green" viewBox="0 0 20 21">
-<rect id="Rectangle 874" x="19.5" y="20.5" width="19" height="4" transform="rotate(-180 19.5 20.5)" stroke="#444444"/>
-<rect id="Rectangle 876" x="19.5" y="16.5" width="19" height="4" transform="rotate(-180 19.5 16.5)" stroke="#444444"/>
-<rect id="Rectangle 878" x="19.5" y="12.5" width="19" height="4" transform="rotate(-180 19.5 12.5)" stroke="#444444"/>
-<rect id="Rectangle 882" x="19.5" y="8.5" width="19" height="4" transform="rotate(-180 19.5 8.5)" stroke="#444444"/>
-<rect id="Rectangle 879" x="19" y="12" width="18" height="3" transform="rotate(-180 19 12)" fill="#B0DDBD"/>
-<rect id="Rectangle 883" x="19" y="8" width="18" height="3" transform="rotate(-180 19 8)" fill="#D6EDDE"/>
-<rect id="Rectangle 881" x="19" y="16" width="18" height="3" transform="rotate(-180 19 16)" fill="#CCE3AB"/>
-<rect id="Rectangle 880" x="19" y="20" width="18" height="3" transform="rotate(-180 19 20)" fill="#63BE7B"/>
-<rect id="Rectangle 882_2" x="19.5" y="4.5" width="19" height="4" transform="rotate(-180 19.5 4.5)" stroke="#444444"/>
-<rect id="Rectangle 883_2" x="19" y="4" width="18" height="3" transform="rotate(-180 19 4)" fill="white"/>
-</symbol>
+    <symbol id="color-scale-green-yellow" viewBox="0 0 25 25">
+        <rect id="Rectangle 874" x="2.5" y="2.5" width="20" height="5" stroke="#888888"/>
+        <rect id="Rectangle 878" x="2.5" y="7.5" width="20" height="5" stroke="#888888"/>
+        <rect id="Rectangle 882" x="2.5" y="12.5" width="20" height="5" stroke="#888888"/>
+        <rect id="Rectangle 879" x="3" y="8" width="19" height="4" fill="#8ACB84"/>
+        <rect id="Rectangle 883" x="3" y="13" width="19" height="4" fill="#D8E394"/>
+        <rect id="Rectangle 880" x="3" y="3" width="19" height="4" fill="#63BE7B"/>
+        <rect id="Rectangle 882_2" x="2.5" y="17.5" width="20" height="5" stroke="#888888"/>
+        <rect id="Rectangle 883_2" x="3" y="18" width="19" height="4" fill="#FFEF9C"/>
+    </symbol>
 
-<symbol id="color-scale-white-red" viewBox="0 0 20 21">
-<rect id="Rectangle 874" x="0.5" y="0.5" width="19" height="4" stroke="#444444"/>
-<rect id="Rectangle 876" x="0.5" y="4.5" width="19" height="4" stroke="#444444"/>
-<rect id="Rectangle 878" x="0.5" y="8.5" width="19" height="4" stroke="#444444"/>
-<rect id="Rectangle 882" x="0.5" y="12.5" width="19" height="4" stroke="#444444"/>
-<rect id="Rectangle 879" x="1" y="9" width="18" height="3" fill="#FAB3B5"/>
-<rect id="Rectangle 883" x="1" y="13" width="18" height="3" fill="#F98E90"/>
-<rect id="Rectangle 881" x="1" y="5" width="18" height="3" fill="#FBD8DA"/>
-<rect id="Rectangle 880" x="1" y="1" width="18" height="3" fill="white"/>
-<rect id="Rectangle 882_2" x="0.5" y="16.5" width="19" height="4" stroke="#444444"/>
-<rect id="Rectangle 883_2" x="1" y="17" width="18" height="3" fill="#F8696B"/>
-</symbol>
+    <symbol id="color-scale-green-yellow-red" viewBox="0 0 25 25">
+        <rect id="Rectangle 874" x="2.5" y="2.5" width="20" height="5" stroke="#888888"/>
+        <rect id="Rectangle 878" x="2.5" y="7.5" width="20" height="5" stroke="#888888"/>
+        <rect id="Rectangle 882" x="2.5" y="12.5" width="20" height="5" stroke="#888888"/>
+        <rect id="Rectangle 879" x="3" y="8" width="19" height="4" fill="#FFEB84"/>
+        <rect id="Rectangle 883" x="3" y="13" width="19" height="4" fill="#FBAA77"/>
+        <rect id="Rectangle 880" x="3" y="3" width="19" height="4" fill="#63BE7B"/>
+        <rect id="Rectangle 882_2" x="2.5" y="17.5" width="20" height="5" stroke="#888888"/>
+        <rect id="Rectangle 883_2" x="3" y="18" width="19" height="4" fill="#F8696B"/>
+    </symbol>
 
-<symbol id="color-scale-yellow-green" viewBox="0 0 20 21">
-<rect id="Rectangle 874" x="19.5" y="20.5" width="19" height="4" transform="rotate(-180 19.5 20.5)" stroke="#444444"/>
-<rect id="Rectangle 876" x="19.5" y="16.5" width="19" height="4" transform="rotate(-180 19.5 16.5)" stroke="#444444"/>
-<rect id="Rectangle 878" x="19.5" y="12.5" width="19" height="4" transform="rotate(-180 19.5 12.5)" stroke="#444444"/>
-<rect id="Rectangle 882" x="19.5" y="8.5" width="19" height="4" transform="rotate(-180 19.5 8.5)" stroke="#444444"/>
-<rect id="Rectangle 879" x="19" y="12" width="18" height="3" transform="rotate(-180 19 12)" fill="#B1D78C"/>
-<rect id="Rectangle 883" x="19" y="8" width="18" height="3" transform="rotate(-180 19 8)" fill="#D8E394"/>
-<rect id="Rectangle 881" x="19" y="16" width="18" height="3" transform="rotate(-180 19 16)" fill="#8ACB84"/>
-<rect id="Rectangle 880" x="19" y="20" width="18" height="3" transform="rotate(-180 19 20)" fill="#63BE7B"/>
-<rect id="Rectangle 882_2" x="19.5" y="4.5" width="19" height="4" transform="rotate(-180 19.5 4.5)" stroke="#444444"/>
-<rect id="Rectangle 883_2" x="19" y="4" width="18" height="3" transform="rotate(-180 19 4)" fill="#FFEF9C"/>
-</symbol>
+    <symbol id="color-scale-red-white" viewBox="0 0 25 25">
+        <rect id="Rectangle 874" x="2.5" y="2.5" width="20" height="5" stroke="#888888"/>
+        <rect id="Rectangle 878" x="2.5" y="7.5" width="20" height="5" stroke="#888888"/>
+        <rect id="Rectangle 882" x="2.5" y="12.5" width="20" height="5" stroke="#888888"/>
+        <rect id="Rectangle 879" x="3" y="8" width="19" height="4" fill="#F98E90"/>
+        <rect id="Rectangle 883" x="3" y="13" width="19" height="4" fill="#FBD8DA"/>
+        <rect id="Rectangle 880" x="3" y="3" width="19" height="4" fill="#F8696B"/>
+        <rect id="Rectangle 882_2" x="2.5" y="17.5" width="20" height="5" stroke="#888888"/>
+        <rect id="Rectangle 883_2" x="3" y="18" width="19" height="4" fill="white"/>
+    </symbol>
 
-<symbol id="bar-solid-blue" viewBox="0 0 20 22">
-    <path id="Rectangle 874 (Stroke)" fill-rule="evenodd" clip-rule="evenodd" d="M19 1H1V7H19V1ZM0 0V8H20V0H0Z" fill="#444444"/>
-    <path id="Rectangle 876 (Stroke)" fill-rule="evenodd" clip-rule="evenodd" d="M19 8H1V14H19V8ZM0 7V15H20V7H0Z" fill="#444444"/>
-    <path id="Rectangle 878 (Stroke)" fill-rule="evenodd" clip-rule="evenodd" d="M19 15H1V21H19V15ZM0 14V22H20V14H0Z" fill="#444444"/>
-    <path id="Rectangle 875" d="M1 1H14V7H1V1Z" fill="#4D82B8"/>
-    <path id="Rectangle 877" d="M1 8H9V14H1V8Z" fill="#4D82B8"/>
-    <path id="Rectangle 879" d="M1 15H19V21H1V15Z" fill="#4D82B8"/>
-</symbol>
+    <symbol id="color-scale-red-white-blue" viewBox="0 0 25 25">
+        <rect id="Rectangle 874" x="2.5" y="2.5" width="20" height="5" stroke="#888888"/>
+        <rect id="Rectangle 878" x="2.5" y="7.5" width="20" height="5" stroke="#888888"/>
+        <rect id="Rectangle 882" x="2.5" y="12.5" width="20" height="5" stroke="#888888"/>
+        <rect id="Rectangle 879" x="3" y="8" width="19" height="4" fill="white"/>
+        <rect id="Rectangle 883" x="3" y="13" width="19" height="4" fill="#ABC3E3"/>
+        <rect id="Rectangle 880" x="3" y="3" width="19" height="4" fill="#F8696B"/>
+        <rect id="Rectangle 882_2" x="2.5" y="17.5" width="20" height="5" stroke="#888888"/>
+        <rect id="Rectangle 883_2" x="3" y="18" width="19" height="4" fill="#5A8AC6"/>
+    </symbol>
 
-<symbol id="bar-solid-green" viewBox="0 0 20 22">
-    <path id="Rectangle 874 (Stroke)" fill-rule="evenodd" clip-rule="evenodd" d="M19 1H1V7H19V1ZM0 0V8H20V0H0Z" fill="#444444"/>
-    <path id="Rectangle 876 (Stroke)" fill-rule="evenodd" clip-rule="evenodd" d="M19 8H1V14H19V8ZM0 7V15H20V7H0Z" fill="#444444"/>
-    <path id="Rectangle 878 (Stroke)" fill-rule="evenodd" clip-rule="evenodd" d="M19 15H1V21H19V15ZM0 14V22H20V14H0Z" fill="#444444"/>
-    <path id="Rectangle 875" d="M1 1H14V7H1V1Z" fill="#63C384"/>
-    <path id="Rectangle 877" d="M1 8H9V14H1V8Z" fill="#63C384"/>
-    <path id="Rectangle 879" d="M1 15H19V21H1V15Z" fill="#63C384"/>
-</symbol>
+    <symbol id="color-scale-red-white-green" viewBox="0 0 25 25">
+        <rect id="Rectangle 874" x="2.5" y="2.5" width="20" height="5" stroke="#888888"/>
+        <rect id="Rectangle 878" x="2.5" y="7.5" width="20" height="5" stroke="#888888"/>
+        <rect id="Rectangle 882" x="2.5" y="12.5" width="20" height="5" stroke="#888888"/>
+        <rect id="Rectangle 879" x="3" y="8" width="19" height="4" fill="white"/>
+        <rect id="Rectangle 883" x="3" y="13" width="19" height="4" fill="#B0DDBD"/>
+        <rect id="Rectangle 880" x="3" y="3" width="19" height="4" fill="#F8696B"/>
+        <rect id="Rectangle 882_2" x="2.5" y="17.5" width="20" height="5" stroke="#888888"/>
+        <rect id="Rectangle 883_2" x="3" y="18" width="19" height="4" fill="#63BE7B"/>
+    </symbol>
 
-<symbol id="bar-solid-lightblue" viewBox="0 0 20 22">
-    <path id="Rectangle 874 (Stroke)" fill-rule="evenodd" clip-rule="evenodd" d="M19 1H1V7H19V1ZM0 0V8H20V0H0Z" fill="#444444"/>
-    <path id="Rectangle 876 (Stroke)" fill-rule="evenodd" clip-rule="evenodd" d="M19 8H1V14H19V8ZM0 7V15H20V7H0Z" fill="#444444"/>
-    <path id="Rectangle 878 (Stroke)" fill-rule="evenodd" clip-rule="evenodd" d="M19 15H1V21H19V15ZM0 14V22H20V14H0Z" fill="#444444"/>
-    <path id="Rectangle 875" d="M1 1H14V7H1V1Z" fill="#008AEF"/>
-    <path id="Rectangle 877" d="M1 8H9V14H1V8Z" fill="#008AEF"/>
-    <path id="Rectangle 879" d="M1 15H19V21H1V15Z" fill="#008AEF"/>
-</symbol>
+    <symbol id="color-scale-red-yellow-green" viewBox="0 0 25 25">
+        <rect id="Rectangle 874" x="2.5" y="2.5" width="20" height="5" stroke="#888888"/>
+        <rect id="Rectangle 878" x="2.5" y="7.5" width="20" height="5" stroke="#888888"/>
+        <rect id="Rectangle 882" x="2.5" y="12.5" width="20" height="5" stroke="#888888"/>
+        <rect id="Rectangle 879" x="3" y="8" width="19" height="4" fill="#FBAA77"/>
+        <rect id="Rectangle 883" x="3" y="13" width="19" height="4" fill="#FFEB84"/>
+        <rect id="Rectangle 880" x="3" y="3" width="19" height="4" fill="#F8696B"/>
+        <rect id="Rectangle 882_2" x="2.5" y="17.5" width="20" height="5" stroke="#888888"/>
+        <rect id="Rectangle 883_2" x="3" y="18" width="19" height="4" fill="#63BE7B"/>
+    </symbol>
 
-<symbol id="bar-solid-purple" viewBox="0 0 20 22">
-    <path id="Rectangle 874 (Stroke)" fill-rule="evenodd" clip-rule="evenodd" d="M19 1H1V7H19V1ZM0 0V8H20V0H0Z" fill="#444444"/>
-    <path id="Rectangle 876 (Stroke)" fill-rule="evenodd" clip-rule="evenodd" d="M19 8H1V14H19V8ZM0 7V15H20V7H0Z" fill="#444444"/>
-    <path id="Rectangle 878 (Stroke)" fill-rule="evenodd" clip-rule="evenodd" d="M19 15H1V21H19V15ZM0 14V22H20V14H0Z" fill="#444444"/>
-    <path id="Rectangle 875" d="M1 1H14V7H1V1Z" fill="#D6007B"/>
-    <path id="Rectangle 877" d="M1 8H9V14H1V8Z" fill="#D6007B"/>
-    <path id="Rectangle 879" d="M1 15H19V21H1V15Z" fill="#D6007B"/>
-</symbol>
+    <symbol id="color-scale-white-green" viewBox="0 0 25 25">
+        <rect id="Rectangle 874" x="2.5" y="2.5" width="20" height="5" stroke="#888888"/>
+        <rect id="Rectangle 878" x="2.5" y="7.5" width="20" height="5" stroke="#888888"/>
+        <rect id="Rectangle 882" x="2.5" y="12.5" width="20" height="5" stroke="#888888"/>
+        <rect id="Rectangle 879" x="3" y="8" width="19" height="4" fill="#D6EDDE"/>
+        <rect id="Rectangle 883" x="3" y="13" width="19" height="4" fill="#8ACE9C"/>
+        <rect id="Rectangle 880" x="3" y="3" width="19" height="4" fill="white"/>
+        <rect id="Rectangle 882_2" x="2.5" y="17.5" width="20" height="5" stroke="#888888"/>
+        <rect id="Rectangle 883_2" x="3" y="18" width="19" height="4" fill="#63BE7B"/>
+    </symbol>
 
-<symbol id="bar-solid-red" viewBox="0 0 20 22">
-    <path id="Rectangle 874 (Stroke)" fill-rule="evenodd" clip-rule="evenodd" d="M19 1H1V7H19V1ZM0 0V8H20V0H0Z" fill="#444444"/>
-    <path id="Rectangle 876 (Stroke)" fill-rule="evenodd" clip-rule="evenodd" d="M19 8H1V14H19V8ZM0 7V15H20V7H0Z" fill="#444444"/>
-    <path id="Rectangle 878 (Stroke)" fill-rule="evenodd" clip-rule="evenodd" d="M19 15H1V21H19V15ZM0 14V22H20V14H0Z" fill="#444444"/>
-    <path id="Rectangle 875" d="M1 1H14V7H1V1Z" fill="#FF555A"/>
-    <path id="Rectangle 877" d="M1 8H9V14H1V8Z" fill="#FF555A"/>
-    <path id="Rectangle 879" d="M1 15H19V21H1V15Z" fill="#FF555A"/>
-</symbol>
+    <symbol id="color-scale-white-red" viewBox="0 0 25 25">
+        <rect id="Rectangle 874" x="2.5" y="2.5" width="20" height="5" stroke="#888888"/>
+        <rect id="Rectangle 878" x="2.5" y="7.5" width="20" height="5" stroke="#888888"/>
+        <rect id="Rectangle 882" x="2.5" y="12.5" width="20" height="5" stroke="#888888"/>
+        <rect id="Rectangle 879" x="3" y="8" width="19" height="4" fill="#FBD8DA"/>
+        <rect id="Rectangle 883" x="3" y="13" width="19" height="4" fill="#F98E90"/>
+        <rect id="Rectangle 880" x="3" y="3" width="19" height="4" fill="white"/>
+        <rect id="Rectangle 882_2" x="2.5" y="17.5" width="20" height="5" stroke="#888888"/>
+        <rect id="Rectangle 883_2" x="3" y="18" width="19" height="4" fill="#F8696B"/>
+    </symbol>
 
-<symbol id="bar-solid-yellow" viewBox="0 0 20 22">
-    <path id="Rectangle 874 (Stroke)" fill-rule="evenodd" clip-rule="evenodd" d="M19 1H1V7H19V1ZM0 0V8H20V0H0Z" fill="#444444"/>
-    <path id="Rectangle 876 (Stroke)" fill-rule="evenodd" clip-rule="evenodd" d="M19 8H1V14H19V8ZM0 7V15H20V7H0Z" fill="#444444"/>
-    <path id="Rectangle 878 (Stroke)" fill-rule="evenodd" clip-rule="evenodd" d="M19 15H1V21H19V15ZM0 14V22H20V14H0Z" fill="#444444"/>
-    <path id="Rectangle 875" d="M1 1H14V7H1V1Z" fill="#FFB628"/>
-    <path id="Rectangle 877" d="M1 8H9V14H1V8Z" fill="#FFB628"/>
-    <path id="Rectangle 879" d="M1 15H19V21H1V15Z" fill="#FFB628"/>
-</symbol>
-<symbol id="bar-gradient-blue" viewBox="0 0 20 22">
-<rect id="Rectangle 874" x="0.5" y="0.5" width="19" height="7" fill="url(#paint0_linear)" stroke="#444444"/>
-<rect id="Rectangle 876" x="0.5" y="7.5" width="19" height="7" fill="url(#paint1_linear)" stroke="#444444"/>
-<rect id="Rectangle 878" x="0.5" y="14.5" width="19" height="7" fill="url(#paint2_linear)" stroke="#444444"/>
-</symbol>
-<defs>
-<linearGradient id="paint0_linear" x1="3" y1="4" x2="18.9998" y2="4.06004" gradientUnits="userSpaceOnUse">
-<stop stop-color="#4D82B8"/>
-<stop offset="1" stop-color="white" stop-opacity="0"/>
-</linearGradient>
-<linearGradient id="paint1_linear" x1="1" y1="11" x2="19" y2="11" gradientUnits="userSpaceOnUse">
-<stop stop-color="#4D82B8"/>
-<stop offset="1" stop-color="white" stop-opacity="0"/>
-</linearGradient>
-<linearGradient id="paint2_linear" x1="5" y1="18" x2="19" y2="18.0015" gradientUnits="userSpaceOnUse">
-<stop stop-color="#4D82B8"/>
-<stop offset="1" stop-color="white" stop-opacity="0"/>
-</linearGradient>
-</defs>
+    <symbol id="color-scale-yellow-green" viewBox="0 0 25 25">
+        <rect id="Rectangle 874" x="2.5" y="2.5" width="20" height="5" stroke="#888888"/>
+        <rect id="Rectangle 878" x="2.5" y="7.5" width="20" height="5" stroke="#888888"/>
+        <rect id="Rectangle 882" x="2.5" y="12.5" width="20" height="5" stroke="#888888"/>
+        <rect id="Rectangle 879" x="3" y="8" width="19" height="4" fill="#D8E394"/>
+        <rect id="Rectangle 883" x="3" y="13" width="19" height="4" fill="#8ACB84"/>
+        <rect id="Rectangle 880" x="3" y="3" width="19" height="4" fill="#FFEF9C"/>
+        <rect id="Rectangle 882_2" x="2.5" y="17.5" width="20" height="5" stroke="#888888"/>
+        <rect id="Rectangle 883_2" x="3" y="18" width="19" height="4" fill="#63BE7B"/>
+    </symbol>
 
-<symbol id="bar-gradient-green" viewBox="0 0 20 22">
-<rect id="Rectangle 874" x="0.5" y="0.5" width="19" height="7" fill="url(#paint3_linear)" stroke="#444444"/>
-<rect id="Rectangle 876" x="0.5" y="7.5" width="19" height="7" fill="url(#paint4_linear)" stroke="#444444"/>
-<rect id="Rectangle 878" x="0.5" y="14.5" width="19" height="7" fill="url(#paint5_linear)" stroke="#444444"/>
-</symbol>
-<defs>
-<linearGradient id="paint3_linear" x1="3" y1="4" x2="19" y2="4.00008" gradientUnits="userSpaceOnUse">
-<stop stop-color="#63C384"/>
-<stop offset="1" stop-color="white" stop-opacity="0"/>
-</linearGradient>
-<linearGradient id="paint4_linear" x1="1" y1="11" x2="19" y2="11.0001" gradientUnits="userSpaceOnUse">
-<stop stop-color="#63C384"/>
-<stop offset="1" stop-color="white" stop-opacity="0"/>
-</linearGradient>
-<linearGradient id="paint5_linear" x1="5" y1="18" x2="18.9998" y2="18.0525" gradientUnits="userSpaceOnUse">
-<stop stop-color="#63C384"/>
-<stop offset="1" stop-color="white" stop-opacity="0"/>
-</linearGradient>
-</defs>
+    <symbol id="bar-gradient-blue" viewBox="0 0 25 25">
+        <rect id="Rectangle 874" x="2.5" y="2.5" width="20" height="5" fill="white" stroke="#888888"/>
+        <rect id="Rectangle 878" x="2.5" y="7.5" width="20" height="5" fill="white" stroke="#888888"/>
+        <rect id="Rectangle 882" x="2.5" y="12.5" width="20" height="5" fill="white" stroke="#888888"/>
+        <rect id="Rectangle 879" x="3" y="8" width="5" height="4" fill="url(#paint0_linear)"/>
+        <rect id="Rectangle 883" x="3" y="13" width="10" height="4" fill="url(#paint1_linear)"/>
+        <rect id="Rectangle 880" x="3" y="3" width="14" height="4" fill="url(#paint2_linear)"/>
+        <rect id="Rectangle 882_2" x="2.5" y="17.5" width="20" height="5" fill="white" stroke="#888888"/>
+        <rect id="Rectangle 883_2" x="3" y="18" width="19" height="4" fill="url(#paint3_linear)"/>
+        <defs>
+            <linearGradient id="paint0_linear" x1="3.75" y1="10" x2="7.74999" y2="10.0075" gradientUnits="userSpaceOnUse">
+                <stop stop-color="#4D82B8"/>
+                <stop offset="1" stop-color="white" stop-opacity="0"/>
+            </linearGradient>
+            <linearGradient id="paint1_linear" x1="4.5" y1="15" x2="12.4999" y2="15.03" gradientUnits="userSpaceOnUse">
+                <stop stop-color="#4D82B8"/>
+                <stop offset="1" stop-color="white" stop-opacity="0"/>
+            </linearGradient>
+            <linearGradient id="paint2_linear" x1="5.1" y1="5" x2="16.2997" y2="5.05883" gradientUnits="userSpaceOnUse">
+                <stop stop-color="#4D82B8"/>
+                <stop offset="1" stop-color="white" stop-opacity="0"/>
+            </linearGradient>
+            <linearGradient id="paint3_linear" x1="5.85" y1="20" x2="21.0492" y2="20.1084" gradientUnits="userSpaceOnUse">
+                <stop stop-color="#4D82B8"/>
+                <stop offset="1" stop-color="white" stop-opacity="0"/>
+            </linearGradient>
+        </defs>
+    </symbol>
 
-<symbol id="bar-gradient-lightblue" viewBox="0 0 20 22">
-<rect id="Rectangle 874" x="0.5" y="0.5" width="19" height="7" fill="url(#paint6_linear)" stroke="#444444"/>
-<rect id="Rectangle 876" x="0.5" y="7.5" width="19" height="7" fill="url(#paint7_linear)" stroke="#444444"/>
-<rect id="Rectangle 878" x="0.5" y="14.5" width="19" height="7" fill="url(#paint8_linear)" stroke="#444444"/>
-</symbol>
-<defs>
-<linearGradient id="paint6_linear" x1="3" y1="4" x2="19" y2="4.00009" gradientUnits="userSpaceOnUse">
-<stop stop-color="#008AEF"/>
-<stop offset="1" stop-color="white" stop-opacity="0"/>
-</linearGradient>
-<linearGradient id="paint7_linear" x1="1" y1="11" x2="19" y2="10.9999" gradientUnits="userSpaceOnUse">
-<stop stop-color="#008AEF"/>
-<stop offset="1" stop-color="white" stop-opacity="0"/>
-</linearGradient>
-<linearGradient id="paint8_linear" x1="5" y1="18" x2="19" y2="17.9999" gradientUnits="userSpaceOnUse">
-<stop stop-color="#008AEF"/>
-<stop offset="1" stop-color="white" stop-opacity="0"/>
-</linearGradient>
-</defs>
+    <symbol id="bar-gradient-green" viewBox="0 0 25 25">
+        <rect id="Rectangle 874" x="2.5" y="2.5" width="20" height="5" fill="white" stroke="#888888"/>
+        <rect id="Rectangle 878" x="2.5" y="7.5" width="20" height="5" fill="white" stroke="#888888"/>
+        <rect id="Rectangle 882" x="2.5" y="12.5" width="20" height="5" fill="white" stroke="#888888"/>
+        <rect id="Rectangle 879" x="3" y="8" width="5" height="4" fill="url(#paint10_linear)"/>
+        <rect id="Rectangle 883" x="3" y="13" width="10" height="4" fill="url(#paint11_linear)"/>
+        <rect id="Rectangle 880" x="3" y="3" width="14" height="4" fill="url(#paint12_linear)"/>
+        <rect id="Rectangle 882_2" x="2.5" y="17.5" width="20" height="5" fill="white" stroke="#888888"/>
+        <rect id="Rectangle 883_2" x="3" y="18" width="19" height="4" fill="url(#paint13_linear)"/>
+        <defs>
+            <linearGradient id="paint10_linear" x1="3.75" y1="10" x2="7.75" y2="10" gradientUnits="userSpaceOnUse">
+                <stop stop-color="#63C384"/>
+                <stop offset="1" stop-color="white" stop-opacity="0"/>
+            </linearGradient>
+            <linearGradient id="paint11_linear" x1="4.5" y1="15" x2="12.5" y2="15" gradientUnits="userSpaceOnUse">
+                <stop stop-color="#63C384"/>
+                <stop offset="1" stop-color="white" stop-opacity="0"/>
+            </linearGradient>
+            <linearGradient id="paint12_linear" x1="5.1" y1="5" x2="16.3" y2="5.00008" gradientUnits="userSpaceOnUse">
+                <stop stop-color="#63C384"/>
+                <stop offset="1" stop-color="white" stop-opacity="0"/>
+            </linearGradient>
+            <linearGradient id="paint13_linear" x1="5.85" y1="20" x2="21.05" y2="20.0002" gradientUnits="userSpaceOnUse">
+                <stop stop-color="#63C384"/>
+                <stop offset="1" stop-color="white" stop-opacity="0"/>
+            </linearGradient>
+        </defs>
+    </symbol>
 
-<symbol id="bar-gradient-purple" viewBox="0 0 20 22">
-<rect id="Rectangle 879" x="0.5" y="0.5" width="19" height="7" fill="url(#paint9_linear)" stroke="#444444"/>
-<rect id="Rectangle 880" x="0.5" y="7.5" width="19" height="7" fill="url(#paint10_linear)" stroke="#444444"/>
-<rect id="Rectangle 881" x="0.5" y="14.5" width="19" height="7" fill="url(#paint11_linear)" stroke="#444444"/>
-</symbol>
-<defs>
-<linearGradient id="paint9_linear" x1="3" y1="4" x2="19" y2="3.99996" gradientUnits="userSpaceOnUse">
-<stop stop-color="#D6007B"/>
-<stop offset="1" stop-color="white" stop-opacity="0"/>
-</linearGradient>
-<linearGradient id="paint10_linear" x1="1" y1="11" x2="19" y2="11.0001" gradientUnits="userSpaceOnUse">
-<stop stop-color="#D6007B"/>
-<stop offset="1" stop-color="white" stop-opacity="0"/>
-</linearGradient>
-<linearGradient id="paint11_linear" x1="5" y1="18" x2="18.9998" y2="18.0525" gradientUnits="userSpaceOnUse">
-<stop stop-color="#D6007B"/>
-<stop offset="1" stop-color="white" stop-opacity="0"/>
-</linearGradient>
-</defs>
+    <symbol id="bar-gradient-lightblue" viewBox="0 0 25 25">
+        <rect id="Rectangle 874" x="2.5" y="2.5" width="20" height="5" fill="white" stroke="#888888"/>
+        <rect id="Rectangle 878" x="2.5" y="7.5" width="20" height="5" fill="white" stroke="#888888"/>
+        <rect id="Rectangle 882" x="2.5" y="12.5" width="20" height="5" fill="white" stroke="#888888"/>
+        <rect id="Rectangle 879" x="3" y="8" width="5" height="4" fill="url(#paint20_linear)"/>
+        <rect id="Rectangle 883" x="3" y="13" width="10" height="4" fill="url(#paint21_linear)"/>
+        <rect id="Rectangle 880" x="3" y="3" width="14" height="4" fill="url(#paint22_linear)"/>
+        <rect id="Rectangle 882_2" x="2.5" y="17.5" width="20" height="5" fill="white" stroke="#888888"/>
+        <rect id="Rectangle 883_2" x="3" y="18" width="19" height="4" fill="url(#paint23_linear)"/>
+        <defs>
+            <linearGradient id="paint20_linear" x1="3.75" y1="10" x2="7.75" y2="10" gradientUnits="userSpaceOnUse">
+                <stop stop-color="#008AEF"/>
+                <stop offset="1" stop-color="white" stop-opacity="0"/>
+            </linearGradient>
+            <linearGradient id="paint21_linear" x1="4.5" y1="15" x2="12.5" y2="15" gradientUnits="userSpaceOnUse">
+                <stop stop-color="#008AEF"/>
+                <stop offset="1" stop-color="white" stop-opacity="0"/>
+            </linearGradient>
+            <linearGradient id="paint22_linear" x1="5.1" y1="5" x2="16.3" y2="5.00009" gradientUnits="userSpaceOnUse">
+                <stop stop-color="#008AEF"/>
+                <stop offset="1" stop-color="white" stop-opacity="0"/>
+            </linearGradient>
+            <linearGradient id="paint23_linear" x1="5.85" y1="20" x2="21.05" y2="20.0002" gradientUnits="userSpaceOnUse">
+                <stop stop-color="#008AEF"/>
+                <stop offset="1" stop-color="white" stop-opacity="0"/>
+            </linearGradient>
+        </defs>
+    </symbol>
 
-<symbol id="bar-gradient-red" viewBox="0 0 20 22">
-<rect id="Rectangle 874" x="0.5" y="0.5" width="19" height="7" fill="url(#paint12_linear)" stroke="#444444"/>
-<rect id="Rectangle 876" x="0.5" y="7.5" width="19" height="7" fill="url(#paint13_linear)" stroke="#444444"/>
-<rect id="Rectangle 878" x="0.5" y="14.5" width="19" height="7" fill="url(#paint14_linear)" stroke="#444444"/>
-</symbol>
-<defs>
-<linearGradient id="paint12_linear" x1="3" y1="4" x2="19" y2="4.00007" gradientUnits="userSpaceOnUse">
-<stop stop-color="#FF555A"/>
-<stop offset="1" stop-color="white" stop-opacity="0"/>
-</linearGradient>
-<linearGradient id="paint13_linear" x1="1" y1="11" x2="18.9997" y2="11.0675" gradientUnits="userSpaceOnUse">
-<stop stop-color="#FF555A"/>
-<stop offset="1" stop-color="white" stop-opacity="0"/>
-</linearGradient>
-<linearGradient id="paint14_linear" x1="5" y1="18" x2="18.9998" y2="18.0525" gradientUnits="userSpaceOnUse">
-<stop stop-color="#FF555A"/>
-<stop offset="1" stop-color="white" stop-opacity="0"/>
-</linearGradient>
-</defs>
+    <symbol id="bar-gradient-purple" viewBox="0 0 25 25">
+        <rect id="Rectangle 874" x="2.5" y="2.5" width="20" height="5" fill="white" stroke="#888888"/>
+        <rect id="Rectangle 878" x="2.5" y="7.5" width="20" height="5" fill="white" stroke="#888888"/>
+        <rect id="Rectangle 882" x="2.5" y="12.5" width="20" height="5" fill="white" stroke="#888888"/>
+        <rect id="Rectangle 879" x="3" y="8" width="5" height="4" fill="url(#paint30_linear)"/>
+        <rect id="Rectangle 883" x="3" y="13" width="10" height="4" fill="url(#paint31_linear)"/>
+        <rect id="Rectangle 880" x="3" y="3" width="14" height="4" fill="url(#paint32_linear)"/>
+        <rect id="Rectangle 882_2" x="2.5" y="17.5" width="20" height="5" fill="white" stroke="#888888"/>
+        <rect id="Rectangle 883_2" x="3" y="18" width="19" height="4" fill="url(#paint33_linear)"/>
+        <defs>
+            <linearGradient id="paint30_linear" x1="3.25" y1="10" x2="7.75" y2="10" gradientUnits="userSpaceOnUse">
+                <stop stop-color="#D6007B"/>
+                <stop offset="1" stop-color="white" stop-opacity="0"/>
+            </linearGradient>
+            <linearGradient id="paint31_linear" x1="3.5" y1="15" x2="12.5" y2="15" gradientUnits="userSpaceOnUse">
+                <stop stop-color="#D6007B"/>
+                <stop offset="1" stop-color="white" stop-opacity="0"/>
+            </linearGradient>
+            <linearGradient id="paint32_linear" x1="3.7" y1="5" x2="16.3" y2="5.00009" gradientUnits="userSpaceOnUse">
+                <stop stop-color="#D6007B"/>
+                <stop offset="1" stop-color="white" stop-opacity="0"/>
+            </linearGradient>
+            <linearGradient id="paint33_linear" x1="3.95" y1="20" x2="21.05" y2="20.0002" gradientUnits="userSpaceOnUse">
+                <stop stop-color="#D6007B"/>
+                <stop offset="1" stop-color="white" stop-opacity="0"/>
+            </linearGradient>
+        </defs>
+    </symbol>
 
-<symbol id="bar-gradient-yellow" viewBox="0 0 20 22">
-<rect id="Rectangle 874" x="0.5" y="0.5" width="19" height="7" fill="url(#paint15_linear)" stroke="#444444"/>
-<rect id="Rectangle 876" x="0.5" y="7.5" width="19" height="7" fill="url(#paint16_linear)" stroke="#444444"/>
-<rect id="Rectangle 878" x="0.5" y="14.5" width="19" height="7" fill="url(#paint17_linear)" stroke="#444444"/>
-</symbol>
-<defs>
-<linearGradient id="paint15_linear" x1="3" y1="4" x2="18.9998" y2="4.06005" gradientUnits="userSpaceOnUse">
-<stop stop-color="#FFB628"/>
-<stop offset="1" stop-color="white" stop-opacity="0"/>
-</linearGradient>
-<linearGradient id="paint16_linear" x1="1" y1="11" x2="18.9997" y2="11.0676" gradientUnits="userSpaceOnUse">
-<stop stop-color="#FFB628"/>
-<stop offset="1" stop-color="white" stop-opacity="0"/>
-</linearGradient>
-<linearGradient id="paint17_linear" x1="5" y1="18" x2="18.9998" y2="18.0526" gradientUnits="userSpaceOnUse">
-<stop stop-color="#FFB628"/>
-<stop offset="1" stop-color="white" stop-opacity="0"/>
-</linearGradient>
-</defs>
+    <symbol id="bar-gradient-red" viewBox="0 0 25 25">
+        <rect id="Rectangle 874" x="2.5" y="2.5" width="20" height="5" fill="white" stroke="#888888"/>
+        <rect id="Rectangle 878" x="2.5" y="7.5" width="20" height="5" fill="white" stroke="#888888"/>
+        <rect id="Rectangle 882" x="2.5" y="12.5" width="20" height="5" fill="white" stroke="#888888"/>
+        <rect id="Rectangle 879" x="3" y="8" width="5" height="4" fill="url(#paint40_linear)"/>
+        <rect id="Rectangle 883" x="3" y="13" width="10" height="4" fill="url(#paint41_linear)"/>
+        <rect id="Rectangle 880" x="3" y="3" width="14" height="4" fill="url(#paint42_linear)"/>
+        <rect id="Rectangle 882_2" x="2.5" y="17.5" width="20" height="5" fill="white" stroke="#888888"/>
+        <rect id="Rectangle 883_2" x="3" y="18" width="19" height="4" fill="url(#paint43_linear)"/>
+        <defs>
+            <linearGradient id="paint40_linear" x1="3.75" y1="10" x2="7.75" y2="10" gradientUnits="userSpaceOnUse">
+                <stop stop-color="#FF555A"/>
+                <stop offset="1" stop-color="white" stop-opacity="0"/>
+            </linearGradient>
+            <linearGradient id="paint41_linear" x1="4.5" y1="15" x2="12.5" y2="15" gradientUnits="userSpaceOnUse">
+                <stop stop-color="#FF555A"/>
+                <stop offset="1" stop-color="white" stop-opacity="0"/>
+            </linearGradient>
+            <linearGradient id="paint42_linear" x1="5.1" y1="5" x2="16.3" y2="5.00006" gradientUnits="userSpaceOnUse">
+                <stop stop-color="#FF555A"/>
+                <stop offset="1" stop-color="white" stop-opacity="0"/>
+            </linearGradient>
+            <linearGradient id="paint43_linear" x1="5.85" y1="20" x2="21.05" y2="20.0001" gradientUnits="userSpaceOnUse">
+                <stop stop-color="#FF555A"/>
+                <stop offset="1" stop-color="white" stop-opacity="0"/>
+            </linearGradient>
+        </defs>
+    </symbol>
+
+    <symbol id="bar-gradient-yellow" viewBox="0 0 25 25">
+        <rect id="Rectangle 874" x="2.5" y="2.5" width="20" height="5" fill="white" stroke="#888888"/>
+        <rect id="Rectangle 878" x="2.5" y="7.5" width="20" height="5" fill="white" stroke="#888888"/>
+        <rect id="Rectangle 882" x="2.5" y="12.5" width="20" height="5" fill="white" stroke="#888888"/>
+        <rect id="Rectangle 879" x="3" y="8" width="5" height="4" fill="url(#paint50_linear)"/>
+        <rect id="Rectangle 883" x="3" y="13" width="10" height="4" fill="url(#paint51_linear)"/>
+        <rect id="Rectangle 880" x="3" y="3" width="14" height="4" fill="url(#paint52_linear)"/>
+        <rect id="Rectangle 882_2" x="2.5" y="17.5" width="20" height="5" fill="white" stroke="#888888"/>
+        <rect id="Rectangle 883_2" x="3" y="18" width="19" height="4" fill="url(#paint53_linear)"/>
+        <defs>
+            <linearGradient id="paint50_linear" x1="3.75" y1="10" x2="7.74999" y2="10.0075" gradientUnits="userSpaceOnUse">
+                <stop stop-color="#FFB628"/>
+                <stop offset="1" stop-color="white" stop-opacity="0"/>
+            </linearGradient>
+            <linearGradient id="paint51_linear" x1="4.5" y1="15" x2="12.4999" y2="15.03" gradientUnits="userSpaceOnUse">
+                <stop stop-color="#FFB628"/>
+                <stop offset="1" stop-color="white" stop-opacity="0"/>
+            </linearGradient>
+            <linearGradient id="paint52_linear" x1="5.1" y1="5" x2="16.2997" y2="5.05885" gradientUnits="userSpaceOnUse">
+                <stop stop-color="#FFB628"/>
+                <stop offset="1" stop-color="white" stop-opacity="0"/>
+            </linearGradient>
+            <linearGradient id="paint53_linear" x1="5.85" y1="20" x2="21.0492" y2="20.1084" gradientUnits="userSpaceOnUse">
+                <stop stop-color="#FFB628"/>
+                <stop offset="1" stop-color="white" stop-opacity="0"/>
+            </linearGradient>
+        </defs>
+    </symbol>
 </svg>
\ No newline at end of file