From cd16fa0c323f7e57e746c7b20031eec8171469b0 Mon Sep 17 00:00:00 2001
From: SergeyEzhin <ezhin@mail.ru>
Date: Fri, 5 Nov 2021 21:48:28 +0400
Subject: [PATCH] [PE mobile] Add variables

---
 .../resources/less/colors-table-dark.less     |   8 +-
 .../mobile/resources/less/colors-table.less   |   8 +-
 .../resources/less/common-material.less       |   6 +-
 .../less/material/_sailfish_fix.less          |   2 +-
 .../mobile/resources/less/material/icons.less |   8 +-
 .../mobile/src/less/app-material.less         |   2 +-
 .../mobile/src/less/app.less                  |   2 +
 .../mobile/src/less/icons-material.less       | 194 +++++++++---------
 8 files changed, 120 insertions(+), 110 deletions(-)

diff --git a/apps/common/mobile/resources/less/colors-table-dark.less b/apps/common/mobile/resources/less/colors-table-dark.less
index f2c790eff..9fa78999d 100644
--- a/apps/common/mobile/resources/less/colors-table-dark.less
+++ b/apps/common/mobile/resources/less/colors-table-dark.less
@@ -23,8 +23,12 @@
         --brand-secondary: #FFAF49;
         --brand-text-on-brand: #000;
 
-        --toolbar-background: #232323;
-        --toolbar-icons: #208BFF;
+        --toolbar-de-background: #232323;
+        --toolbar-pe-background: #232323;
+        --toolbar-sse-background: #232323;
+        --toolbar-de-icons: #208BFF;
+        --toolbar-pe-icons: #FF4A31;
+        --toolbar-sse-icons: #34C759;
         --toolbar-segment: #FFF;
         --toolbar-tab-normal: #757575;
 
diff --git a/apps/common/mobile/resources/less/colors-table.less b/apps/common/mobile/resources/less/colors-table.less
index 5addf7759..4bd2ee5ad 100644
--- a/apps/common/mobile/resources/less/colors-table.less
+++ b/apps/common/mobile/resources/less/colors-table.less
@@ -21,8 +21,12 @@
     --fill-black: #000;
     --fill-white: #FFF;
 
-    --toolbar-background: #446995;
-    --toolbar-icons: #FFF;
+    --toolbar-de-background: #446995;
+    --toolbar-pe-background: #AA5252;
+    --toolbar-sse-background: #40865C;
+    --toolbar-de-icons: #FFF;
+    --toolbar-pe-icons: #FFF;
+    --toolbar-sse-icons: #FFF;
     --toolbar-segment: #446995;
     --toolbar-tab-normal:fade(#FFF, 50%);
 
diff --git a/apps/common/mobile/resources/less/common-material.less b/apps/common/mobile/resources/less/common-material.less
index 00116f40d..5eb42cad3 100644
--- a/apps/common/mobile/resources/less/common-material.less
+++ b/apps/common/mobile/resources/less/common-material.less
@@ -1,5 +1,5 @@
 
-.device-android {
+.device-android, .device-android .theme-type-dark {
     @tabLinkColor: rgba(255,255,255,.7);
     @red: #f44336;
     @white: #fff;
@@ -12,12 +12,12 @@
 
     --f7-theme-color: @brandColor;
 
-    --f7-navbar-bg-color: @brandColor;
+    --f7-navbar-bg-color: @toolbar-background;
     --f7-navbar-link-color: @navBarIconColor;
     --f7-navbar-text-color: @navBarIconColor;
     --f7-navbar-height: 56px;
 
-    --f7-subnavbar-bg-color: @brandColor;
+    --f7-subnavbar-bg-color: @toolbar-background;
     --f7-subnavbar-link-color: @navBarIconColor;
     --f7-subnavbar-text-color: @navBarIconColor;
     --f7-subnavbar-height: 56px;
diff --git a/apps/common/mobile/resources/less/material/_sailfish_fix.less b/apps/common/mobile/resources/less/material/_sailfish_fix.less
index 1b9053a30..fa6985cfb 100644
--- a/apps/common/mobile/resources/less/material/_sailfish_fix.less
+++ b/apps/common/mobile/resources/less/material/_sailfish_fix.less
@@ -36,7 +36,7 @@
     .icon-redefine(icon-text-valign-bottom,'<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 22 22" fill="@{brandColor}"><g><rect x="2" y="18" width="19" height="1"/><rect x="2" y="20" width="19" height="1"/><polygon points="11 4 12 4 12 15.17 14.35 13.2 15 14.06 11.5 17 8 14 8.65 13.2 11 15.17 11 4"/></g></svg>');
 
     .item-content.buttons .item-inner > .row .button.active {
-        background-color: @brandColorLight;
+        background-color: @themeColorLight;
     }
 
     .dataview.shapes {
diff --git a/apps/common/mobile/resources/less/material/icons.less b/apps/common/mobile/resources/less/material/icons.less
index 79d5915b7..8fe8ff97f 100644
--- a/apps/common/mobile/resources/less/material/icons.less
+++ b/apps/common/mobile/resources/less/material/icons.less
@@ -13,7 +13,7 @@
         &.icon-prev {
             width: 20px;
             height: 20px;
-            .encoded-svg-background('<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 22 22" fill="@{brandColor}"><g><polygon points="5.1,10.9 13.9,2 16,4.1 9.2,11.1 16,17.9 13.9,20 5.1,11.2 5,11.1 "/></g></svg>');
+            .encoded-svg-mask('<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 22 22" fill="@{brandColor}"><g><polygon points="5.1,10.9 13.9,2 16,4.1 9.2,11.1 16,17.9 13.9,20 5.1,11.2 5,11.1 "/></g></svg>', @brandColor);
             &:after {
               display: none;
             }
@@ -21,7 +21,7 @@
         &.icon-next {
             width: 20px;
             height: 20px;
-            .encoded-svg-background('<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 22 22" fill="@{brandColor}"><g><polygon points="16.9,10.9 8.1,2 6,4.1 12.8,11.1 6,17.9 8.1,20 16.9,11.2 17,11.1 "/></g></svg>');
+            .encoded-svg-mask('<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 22 22" fill="@{brandColor}"><g><polygon points="16.9,10.9 8.1,2 6,4.1 12.8,11.1 6,17.9 8.1,20 16.9,11.2 17,11.1 "/></g></svg>', @brandColor);
             &:after {
                 display: none;
             }
@@ -32,12 +32,12 @@
             &.icon-collaboration {
                 width: 24px;
                 height: 24px;
-                .encoded-svg-background('<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M14.9912 6C14.9912 8.18203 14.4464 9.76912 13.7789 10.7492C13.101 11.7447 12.4042 12 11.9912 12C11.5782 12 10.8814 11.7447 10.2035 10.7492C9.53601 9.76912 8.99121 8.18203 8.99121 6C8.99121 4.23017 10.4571 3 11.9912 3C13.5254 3 14.9912 4.23017 14.9912 6ZM13.4917 13.6397C13.0059 13.8771 12.4989 14 11.9912 14C11.4861 14 10.9817 13.8784 10.4983 13.6434C8.53188 14.3681 6.94518 15.0737 5.78927 15.7768C4.10512 16.8011 4 17.4079 4 17.5C4 17.7664 4.1014 18.3077 5.27104 18.8939C6.50029 19.5099 8.64545 19.9999 12 20C15.3546 20 17.4997 19.5099 18.7289 18.8939C19.8986 18.3078 20 17.7664 20 17.5C20 17.4079 19.8949 16.8011 18.2107 15.7768C17.0529 15.0726 15.4627 14.3657 13.4917 13.6397ZM15.2272 12.1594C16.2765 10.7825 16.9912 8.67814 16.9912 6C16.9912 3 14.5 1 11.9912 1C9.48242 1 6.99121 3 6.99121 6C6.99121 8.68159 7.70777 10.7879 8.75931 12.1647C4.60309 13.7964 2 15.4951 2 17.5C2 19.9852 5 21.9999 12 22C19 22 22 19.9852 22 17.5C22 15.4929 19.3913 13.7927 15.2272 12.1594Z" fill="@{navBarIconColor}"/></svg>');
+                .encoded-svg-mask('<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M14.9912 6C14.9912 8.18203 14.4464 9.76912 13.7789 10.7492C13.101 11.7447 12.4042 12 11.9912 12C11.5782 12 10.8814 11.7447 10.2035 10.7492C9.53601 9.76912 8.99121 8.18203 8.99121 6C8.99121 4.23017 10.4571 3 11.9912 3C13.5254 3 14.9912 4.23017 14.9912 6ZM13.4917 13.6397C13.0059 13.8771 12.4989 14 11.9912 14C11.4861 14 10.9817 13.8784 10.4983 13.6434C8.53188 14.3681 6.94518 15.0737 5.78927 15.7768C4.10512 16.8011 4 17.4079 4 17.5C4 17.7664 4.1014 18.3077 5.27104 18.8939C6.50029 19.5099 8.64545 19.9999 12 20C15.3546 20 17.4997 19.5099 18.7289 18.8939C19.8986 18.3078 20 17.7664 20 17.5C20 17.4079 19.8949 16.8011 18.2107 15.7768C17.0529 15.0726 15.4627 14.3657 13.4917 13.6397ZM15.2272 12.1594C16.2765 10.7825 16.9912 8.67814 16.9912 6C16.9912 3 14.5 1 11.9912 1C9.48242 1 6.99121 3 6.99121 6C6.99121 8.68159 7.70777 10.7879 8.75931 12.1647C4.60309 13.7964 2 15.4951 2 17.5C2 19.9852 5 21.9999 12 22C19 22 22 19.9852 22 17.5C22 15.4929 19.3913 13.7927 15.2272 12.1594Z"/></svg>', @brandColor);
             }
             &.icon-edit {
                 width: 22px;
                 height: 22px;
-                .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{navBarIconColor}"><g><path d="M0,20h22v1H0V20z"/><polygon points="17.1,3.1 3.5,16.7 3,20 6.3,19.5 19.9,5.9 	"/><path d="M20.5,5.3L22,3.8c0,0-0.2-1.2-0.9-1.9C20.4,1.1,19.2,1,19.2,1l-1.5,1.5L20.5,5.3z"/></g></svg>');
+                .encoded-svg-mask('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{brandColor}"><g><path d="M0,20h22v1H0V20z"/><polygon points="17.1,3.1 3.5,16.7 3,20 6.3,19.5 19.9,5.9"/><path d="M20.5,5.3L22,3.8c0,0-0.2-1.2-0.9-1.9C20.4,1.1,19.2,1,19.2,1l-1.5,1.5L20.5,5.3z"/></g></svg>', @brandColor);
             }
         }
     }
diff --git a/apps/presentationeditor/mobile/src/less/app-material.less b/apps/presentationeditor/mobile/src/less/app-material.less
index f19bd5354..e9df4e23b 100644
--- a/apps/presentationeditor/mobile/src/less/app-material.less
+++ b/apps/presentationeditor/mobile/src/less/app-material.less
@@ -1,6 +1,6 @@
 
 // Colors
-@brandColorLight: #a2bdde;
+@themeColorLight: #a2bdde;
 @navBarIconColor: #fff;
 
 
diff --git a/apps/presentationeditor/mobile/src/less/app.less b/apps/presentationeditor/mobile/src/less/app.less
index 99be0a72f..81b37faed 100644
--- a/apps/presentationeditor/mobile/src/less/app.less
+++ b/apps/presentationeditor/mobile/src/less/app.less
@@ -5,6 +5,8 @@
 @import '../../../../common/mobile/resources/less/colors-table-dark.less';
 
 @brandColor: var(--brand-slide);
+@toolbar-background: var(--toolbar-pe-background);
+// @navBarIconColor: var(--toolbar-pe-icons);
 
 @import '../../../../common/mobile/resources/less/collaboration.less';
 @import '../../../../common/mobile/resources/less/common.less';
diff --git a/apps/presentationeditor/mobile/src/less/icons-material.less b/apps/presentationeditor/mobile/src/less/icons-material.less
index 4939aba31..babce4172 100644
--- a/apps/presentationeditor/mobile/src/less/icons-material.less
+++ b/apps/presentationeditor/mobile/src/less/icons-material.less
@@ -4,241 +4,241 @@
     &.icon-expand-up {
       width: 17px;
       height: 17px;
-      .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{black}"><g><polygon points="10.9,5.1 2,13.9 4.1,16 11.1,9.2 17.9,16 20,13.9 11.2,5.1 11.1,5 "/></g></svg>');
+      .encoded-svg-mask('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{black}"><g><polygon points="10.9,5.1 2,13.9 4.1,16 11.1,9.2 17.9,16 20,13.9 11.2,5.1 11.1,5 "/></g></svg>', @black);
     }
 
     &.icon-expand-down {
       width: 17px;
       height: 17px;
-      .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{black}"><g><polygon points="10.9,16.9 2,8.1 4.1,6 11.1,12.8 17.9,6 20,8.1 11.2,16.9 11.1,17 "/></g></svg>');
+      .encoded-svg-mask('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{black}"><g><polygon points="10.9,16.9 2,8.1 4.1,6 11.1,12.8 17.9,6 20,8.1 11.2,16.9 11.1,17 "/></g></svg>', @black);
     }
 
     &.icon-search {
       width: 22px;
       height: 22px;
-      .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{brandColor}"><g><path d="M19.5,16.8L16,13.3c0.7-1.1,1.1-2.4,1.1-3.8C17,5.4,13.6,2,9.5,2S2,5.4,2,9.5S5.4,17,9.5,17c1.4,0,2.7-0.4,3.8-1.1l3.5,3.5c0.7,0.7,1.9,0.7,2.6,0C20.2,18.7,20.2,17.6,19.5,16.8z M9.5,15.3c-3.2,0-5.8-2.6-5.8-5.8s2.6-5.8,5.8-5.8s5.8,2.6,5.8,5.8S12.7,15.3,9.5,15.3z"/></g></svg>');
+      .encoded-svg-mask('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{brandColor}"><g><path d="M19.5,16.8L16,13.3c0.7-1.1,1.1-2.4,1.1-3.8C17,5.4,13.6,2,9.5,2S2,5.4,2,9.5S5.4,17,9.5,17c1.4,0,2.7-0.4,3.8-1.1l3.5,3.5c0.7,0.7,1.9,0.7,2.6,0C20.2,18.7,20.2,17.6,19.5,16.8z M9.5,15.3c-3.2,0-5.8-2.6-5.8-5.8s2.6-5.8,5.8-5.8s5.8,2.6,5.8,5.8S12.7,15.3,9.5,15.3z"/></g></svg>', @brandColor);
     }
 
     &.icon-edit {
       width: 22px;
       height: 22px;
-      .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{brandColor}"><g><path d="M0,20h22v1H0V20z"/><polygon points="17.1,3.1 3.5,16.7 3,20 6.3,19.5 19.9,5.9 	"/><path d="M20.5,5.3L22,3.8c0,0-0.2-1.2-0.9-1.9C20.4,1.1,19.2,1,19.2,1l-1.5,1.5L20.5,5.3z"/></g></svg>');
+      .encoded-svg-mask('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{brandColor}"><g><path d="M0,20h22v1H0V20z"/><polygon points="17.1,3.1 3.5,16.7 3,20 6.3,19.5 19.9,5.9"/><path d="M20.5,5.3L22,3.8c0,0-0.2-1.2-0.9-1.9C20.4,1.1,19.2,1,19.2,1l-1.5,1.5L20.5,5.3z"/></g></svg>', @brandColor);
     }
 
     &.icon-edit-settings {
       width: 22px;
       height: 22px;
-      .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 22 22" fill="@{brandColor}"><g><path d="M2.5 15L8 1h2l4.4146 11.2574-1.6009 1.6008L12.12012 12h-6.25L4.75 15zM9 3.66998L6.62012 10h4.75976z" clip-rule="evenodd" fill="#fff" fill-rule="evenodd"/><path d="M10 19.50035V22h2.49965l7.37231-7.37231-2.49965-2.49965zm11.805-6.80572c.26-.25997.26-.67991 0-.93987l-1.5598-1.559787c-.25992-.259964-.67986-.259964-.93983 0L18.08554 11.4148l2.49966 2.49966z" fill="#fff"/></g></svg>');
+      .encoded-svg-mask('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 22 22"><g><path d="M2.5 15L8 1h2l4.4146 11.2574-1.6009 1.6008L12.12012 12h-6.25L4.75 15zM9 3.66998L6.62012 10h4.75976z" clip-rule="evenodd" fill-rule="evenodd"/><path d="M10 19.50035V22h2.49965l7.37231-7.37231-2.49965-2.49965zm11.805-6.80572c.26-.25997.26-.67991 0-.93987l-1.5598-1.559787c-.25992-.259964-.67986-.259964-.93983 0L18.08554 11.4148l2.49966 2.49966z"/></g></svg>', @navBarIconColor);
     }
 
     &.icon-play {
       width: 22px;
       height: 22px;
-      .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{brandColor}"><g><path d="M4.0464363,2.9884553c0.006526,0.00296,0.0142345,0.006835,0.0231438,0.0119021 c0.5908604,0.3357637,12.7118397,7.2924433,13.8977489,8.0268402c-0.5831585,0.3417759-13.0137587,7.4879274-13.934659,7.9826727 L4.0464363,2.9884553 M3.9889357,2C3.4427795,2.0000577,3.000525,2.4533575,3.000525,3.015348	c0,0.573487,0,15.1632957,0,15.9945221C3.000525,19.622963,3.4796104,20,3.9940588,20 c0.1729372,0,0.3499191-0.0426311,0.5139763-0.1332226c0.8905602-0.491045,13.1880894-7.5583372,13.9407387-7.9994459 c0.6751213-0.3955202,0.6867313-1.337512,0-1.7326603C17.4031754,9.5333271,5.1523852,2.501852,4.5393953,2.1535165 C4.3526201,2.0472794,4.165401,1.9999813,3.9889357,2L3.9889357,2z"/></g></svg>');
+      .encoded-svg-mask('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{brandColor}"><g><path d="M4.0464363,2.9884553c0.006526,0.00296,0.0142345,0.006835,0.0231438,0.0119021 c0.5908604,0.3357637,12.7118397,7.2924433,13.8977489,8.0268402c-0.5831585,0.3417759-13.0137587,7.4879274-13.934659,7.9826727 L4.0464363,2.9884553 M3.9889357,2C3.4427795,2.0000577,3.000525,2.4533575,3.000525,3.015348	c0,0.573487,0,15.1632957,0,15.9945221C3.000525,19.622963,3.4796104,20,3.9940588,20 c0.1729372,0,0.3499191-0.0426311,0.5139763-0.1332226c0.8905602-0.491045,13.1880894-7.5583372,13.9407387-7.9994459 c0.6751213-0.3955202,0.6867313-1.337512,0-1.7326603C17.4031754,9.5333271,5.1523852,2.501852,4.5393953,2.1535165 C4.3526201,2.0472794,4.165401,1.9999813,3.9889357,2L3.9889357,2z"/></g></svg>', @brandColor);
     }
 
     &.icon-reader {
       width: 22px;
       height: 22px;
-      .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{brandColor}"><g><path d="M17,21H1V9h6V2l0,0h10v5h1V1H6.2L0,7.6V22h18v-3h-1V21z M6,2.8V8H1.1L6,2.8z M13,8c-5.1,0-9,5-9,5s4.1,5,9,5c5,0,9-5,9-5S18,8,13,8z M8.7,15.5C6.8,14.4,6.4,13,6.4,13s0.4-1.5,2.4-2.6C8.3,11.2,8,12,8,13C8,13.9,8.3,14.8,8.7,15.5z M13,16.7c-2.1,0-3.7-1.7-3.7-3.7c0-2.1,1.7-3.7,3.7-3.7c2.1,0,3.7,1.7,3.7,3.7C16.7,15.1,15.1,16.7,13,16.7z M17.3,15.5c0.4-0.7,0.7-1.6,0.7-2.5c0-1-0.3-1.8-0.7-2.6c2,1.1,3.4,2.6,3.4,2.6S19.2,14.4,17.3,15.5z M13,11.7c-0.7,0-1.3,0.6-1.3,1.3s0.6,1.3,1.3,1.3s1.3-0.6,1.3-1.3S13.7,11.7,13,11.7z"/></g></svg>');
+      .encoded-svg-mask('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{brandColor}"><g><path d="M17,21H1V9h6V2l0,0h10v5h1V1H6.2L0,7.6V22h18v-3h-1V21z M6,2.8V8H1.1L6,2.8z M13,8c-5.1,0-9,5-9,5s4.1,5,9,5c5,0,9-5,9-5S18,8,13,8z M8.7,15.5C6.8,14.4,6.4,13,6.4,13s0.4-1.5,2.4-2.6C8.3,11.2,8,12,8,13C8,13.9,8.3,14.8,8.7,15.5z M13,16.7c-2.1,0-3.7-1.7-3.7-3.7c0-2.1,1.7-3.7,3.7-3.7c2.1,0,3.7,1.7,3.7,3.7C16.7,15.1,15.1,16.7,13,16.7z M17.3,15.5c0.4-0.7,0.7-1.6,0.7-2.5c0-1-0.3-1.8-0.7-2.6c2,1.1,3.4,2.6,3.4,2.6S19.2,14.4,17.3,15.5z M13,11.7c-0.7,0-1.3,0.6-1.3,1.3s0.6,1.3,1.3,1.3s1.3-0.6,1.3-1.3S13.7,11.7,13,11.7z"/></g></svg>', @brandColor);
     }
 
     &.icon-download {
       width: 22px;
-      height: 28px;
-      .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 22 22" y="0px" x="0px" fill="@{brandColor}"><path d="M12 0H11L11 14L7.39999 10.3L6.69999 11.1L11.5 16L16.3 11.1L15.6 10.3L12 14L12 0Z"/><path d="M14 5V6H19V20H4V6H9V5H3V21H20V5H14Z"/></svg>');
+      height: 22px;
+      .encoded-svg-mask('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 22 22" y="0px" x="0px" fill="@{brandColor}"><path d="M12 0H11L11 14L7.39999 10.3L6.69999 11.1L11.5 16L16.3 11.1L15.6 10.3L12 14L12 0Z"/><path d="M14 5V6H19V20H4V6H9V5H3V21H20V5H14Z"/></svg>', @brandColor);
     }
 
     &.icon-print {
       width: 22px;
-      height: 28px;
-      .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="-0 0 22 22" y="0px" x="0px" fill="@{brandColor}"><g><path fill-rule="evenodd" clip-rule="evenodd" d="M5 1H17V6H21V17H17V21H5V17H1V6H5V1ZM6 6H16V2H6V6ZM5 16V13H2V16H5ZM2 12H20V7H2V12ZM20 13H17V16H20V13ZM16 13H6V20H16V13ZM14 16H8V15H14V16ZM14 18H8V17H14V18Z"/></g></svg>');
+      height: 22px;
+      .encoded-svg-mask('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="-0 0 22 22" y="0px" x="0px" fill="@{brandColor}"><g><path fill-rule="evenodd" clip-rule="evenodd" d="M5 1H17V6H21V17H17V21H5V17H1V6H5V1ZM6 6H16V2H6V6ZM5 16V13H2V16H5ZM2 12H20V7H2V12ZM20 13H17V16H20V13ZM16 13H6V20H16V13ZM14 16H8V15H14V16ZM14 18H8V17H14V18Z"/></g></svg>', @brandColor);
     }
 
     &.icon-spellcheck {
       width: 22px;
       height: 22px;
-      .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 22 22" fill="@{brandColor}"><g><path fill-rule="evenodd" clip-rule="evenodd" d="M8 1L3 15H4.2L5.97686 10H11.0231L11.6768 11.8394C11.955 11.5504 12.262 11.2892 12.593 11.0605L9 1H8ZM8.5 2.9L10.6678 9H6.33223L8.5 2.9Z"/><path fill-rule="evenodd" clip-rule="evenodd" d="M16 21C18.7614 21 21 18.7614 21 16C21 13.2386 18.7614 11 16 11C13.2386 11 11 13.2386 11 16C11 18.7614 13.2386 21 16 21ZM15.3536 18.3536L19.3536 14.3536L18.6464 13.6464L15 17.2929L13.3536 15.6464L12.6464 16.3536L14.6464 18.3536L15 18.7071L15.3536 18.3536Z"/></g></svg>');
+      .encoded-svg-mask('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 22 22" fill="@{brandColor}"><g><path fill-rule="evenodd" clip-rule="evenodd" d="M8 1L3 15H4.2L5.97686 10H11.0231L11.6768 11.8394C11.955 11.5504 12.262 11.2892 12.593 11.0605L9 1H8ZM8.5 2.9L10.6678 9H6.33223L8.5 2.9Z"/><path fill-rule="evenodd" clip-rule="evenodd" d="M16 21C18.7614 21 21 18.7614 21 16C21 13.2386 18.7614 11 16 11C13.2386 11 11 13.2386 11 16C11 18.7614 13.2386 21 16 21ZM15.3536 18.3536L19.3536 14.3536L18.6464 13.6464L15 17.2929L13.3536 15.6464L12.6464 16.3536L14.6464 18.3536L15 18.7071L15.3536 18.3536Z"/></g></svg>', @brandColor);
     }
 
     &.icon-info {
       width: 22px;
       height: 22px;
-      .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{brandColor}"><g><path d="M10,17h2V8h-2V17z M11,1C5.5,1,1,5.5,1,11s4.5,10,10,10s10-4.5,10-10S16.5,1,11,1z M11,20c-5,0-9-4-9-9s4-9,9-9s9,4,9,9S16,20,11,20z M10,7h2V5h-2V7z"/></g></svg>');
+      .encoded-svg-mask('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{brandColor}"><g><path d="M10,17h2V8h-2V17z M11,1C5.5,1,1,5.5,1,11s4.5,10,10,10s10-4.5,10-10S16.5,1,11,1z M11,20c-5,0-9-4-9-9s4-9,9-9s9,4,9,9S16,20,11,20z M10,7h2V5h-2V7z"/></g></svg>', @brandColor);
     }
 
     &.icon-about {
       width: 22px;
       height: 22px;
-      .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="-1 7 22 22" fill="@{brandColor}"><g><path d="M21,18.5c0-0.3-0.1-0.6-0.7-0.9l-2.6-1.2l2.6-1.2c0.6-0.3,0.7-0.6,0.7-0.9c0-0.3-0.1-0.6-0.7-0.9l-8.9-4.1c-0.7-0.4-1.9-0.4-2.8,0l-8.9,4.1C-0.9,13.8-1,14.1-1,14.3s0.1,0.6,0.7,0.9l2.6,1.2l-2.6,1.2C-0.9,18-1,18.4-1,18.5c0,0.2,0.1,0.6,0.7,0.9l2.5,1.2l-2.5,1.2C-0.9,22.1-1,22.5-1,22.7c0,0.3,0.1,0.6,0.7,0.9l8.9,4.1c0.5,0.2,0.8,0.3,1.4,0.3s1-0.1,1.4-0.3l8.9-4.1c0.6-0.4,0.7-0.6,0.7-0.9c0-0.3-0.1-0.6-0.7-0.9l-2.5-1.2l2.5-1.2C20.9,19.2,21,18.8,21,18.5z M-0.2,14.3L-0.2,14.3c0,0,0.1-0.1,0.3-0.2L9,10c0.6-0.3,1.5-0.3,2,0l8.9,4.1c0.2,0.1,0.3,0.2,0.3,0.2l0,0c0,0-0.1,0.1-0.3,0.2L11,18.6c-0.6,0.3-1.5,0.3-2,0l-8.9-4.1C-0.1,14.4-0.2,14.3-0.2,14.3z M20.2,22.7L20.2,22.7c0,0-0.1,0.1-0.3,0.2L11,27.1c-0.6,0.3-1.5,0.3-2,0l-8.9-4.1c-0.2-0.1-0.3-0.2-0.3-0.2l0,0c0,0,0.1-0.1,0.3-0.2l3-1.5l5.5,2.6c0.7,0.4,1.9,0.4,2.8,0l5.5-2.6l3,1.5C20.1,22.7,20.2,22.7,20.2,22.7z M19.9,18.7L11,22.8c-0.6,0.3-1.5,0.3-2,0l-8.9-4.1c-0.2-0.1-0.3-0.2-0.3-0.2l0,0c0,0,0.1-0.1,0.3-0.2l3-1.5l5.5,2.6c0.7,0.4,1.9,0.4,2.8,0l5.5-2.6l3,1.5c0.2,0.1,0.3,0.2,0.3,0.2l0,0C20.2,18.5,20.1,18.6,19.9,18.7z"/></g></svg>');
+      .encoded-svg-mask('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="-1 7 22 22" fill="@{brandColor}"><g><path d="M21,18.5c0-0.3-0.1-0.6-0.7-0.9l-2.6-1.2l2.6-1.2c0.6-0.3,0.7-0.6,0.7-0.9c0-0.3-0.1-0.6-0.7-0.9l-8.9-4.1c-0.7-0.4-1.9-0.4-2.8,0l-8.9,4.1C-0.9,13.8-1,14.1-1,14.3s0.1,0.6,0.7,0.9l2.6,1.2l-2.6,1.2C-0.9,18-1,18.4-1,18.5c0,0.2,0.1,0.6,0.7,0.9l2.5,1.2l-2.5,1.2C-0.9,22.1-1,22.5-1,22.7c0,0.3,0.1,0.6,0.7,0.9l8.9,4.1c0.5,0.2,0.8,0.3,1.4,0.3s1-0.1,1.4-0.3l8.9-4.1c0.6-0.4,0.7-0.6,0.7-0.9c0-0.3-0.1-0.6-0.7-0.9l-2.5-1.2l2.5-1.2C20.9,19.2,21,18.8,21,18.5z M-0.2,14.3L-0.2,14.3c0,0,0.1-0.1,0.3-0.2L9,10c0.6-0.3,1.5-0.3,2,0l8.9,4.1c0.2,0.1,0.3,0.2,0.3,0.2l0,0c0,0-0.1,0.1-0.3,0.2L11,18.6c-0.6,0.3-1.5,0.3-2,0l-8.9-4.1C-0.1,14.4-0.2,14.3-0.2,14.3z M20.2,22.7L20.2,22.7c0,0-0.1,0.1-0.3,0.2L11,27.1c-0.6,0.3-1.5,0.3-2,0l-8.9-4.1c-0.2-0.1-0.3-0.2-0.3-0.2l0,0c0,0,0.1-0.1,0.3-0.2l3-1.5l5.5,2.6c0.7,0.4,1.9,0.4,2.8,0l5.5-2.6l3,1.5C20.1,22.7,20.2,22.7,20.2,22.7z M19.9,18.7L11,22.8c-0.6,0.3-1.5,0.3-2,0l-8.9-4.1c-0.2-0.1-0.3-0.2-0.3-0.2l0,0c0,0,0.1-0.1,0.3-0.2l3-1.5l5.5,2.6c0.7,0.4,1.9,0.4,2.8,0l5.5-2.6l3,1.5c0.2,0.1,0.3,0.2,0.3,0.2l0,0C20.2,18.5,20.1,18.6,19.9,18.7z"/></g></svg>', @brandColor);
     }
 
     &.icon-help {
       width: 22px;
       height: 22px;
-      .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{brandColor}"><g><path d="M11.6,1.3c-3.3,0-6,2.8-6,6.2c0.3,0,0.7,0,0.9,0c0-2.9,2.3-5.2,5.1-5.2s5.1,2.3,5.1,5.2c0,1.7-1.9,3.2-3,4.3C12.9,12.6,11,14.2,11,16c0,1.2,0,2.2,0,2.7c0.3,0,0.6,0,0.9,0c0-0.6,0-1.6,0-2.5c0-1.4,1.1-2.4,2.2-3.5c1.7-1.5,3.5-3.1,3.5-5.2C17.6,4.1,14.9,1.3,11.6,1.3z M11.5,20.2c-0.3,0-0.5,0.2-0.5,0.5v0.8c0,0.3,0.2,0.5,0.5,0.5s0.5-0.2,0.5-0.5v-0.8C11.9,20.4,11.7,20.2,11.5,20.2z"/></g></svg>');
+      .encoded-svg-mask('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{brandColor}"><g><path d="M11.6,1.3c-3.3,0-6,2.8-6,6.2c0.3,0,0.7,0,0.9,0c0-2.9,2.3-5.2,5.1-5.2s5.1,2.3,5.1,5.2c0,1.7-1.9,3.2-3,4.3C12.9,12.6,11,14.2,11,16c0,1.2,0,2.2,0,2.7c0.3,0,0.6,0,0.9,0c0-0.6,0-1.6,0-2.5c0-1.4,1.1-2.4,2.2-3.5c1.7-1.5,3.5-3.1,3.5-5.2C17.6,4.1,14.9,1.3,11.6,1.3z M11.5,20.2c-0.3,0-0.5,0.2-0.5,0.5v0.8c0,0.3,0.2,0.5,0.5,0.5s0.5-0.2,0.5-0.5v-0.8C11.9,20.4,11.7,20.2,11.5,20.2z"/></g></svg>', @brandColor);
     }
 
     &.icon-setup {
       width: 22px;
       height: 22px;
-      .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{brandColor}"><g><path d="M0,3v16h22V3H0z M21,17H1V5h20V17z M16.5,5.9l-7.2,7.2L8.8,15H4v1c0,0,3.2,0,5,0c0.4,0,0.2,0,0.2-0.2l2.2-0.6L18.7,8L16.5,5.9z M9.9,13.1l6.5-6.4L18,8l-6.5,6.4L9.9,13.1z"/></g></svg>');
+      .encoded-svg-mask('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{brandColor}"><g><path d="M0,3v16h22V3H0z M21,17H1V5h20V17z M16.5,5.9l-7.2,7.2L8.8,15H4v1c0,0,3.2,0,5,0c0.4,0,0.2,0,0.2-0.2l2.2-0.6L18.7,8L16.5,5.9z M9.9,13.1l6.5-6.4L18,8l-6.5,6.4L9.9,13.1z"/></g></svg>', @brandColor);
     }
 
     &.icon-versions {
       width: 22px;
       height: 22px;
-      .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="-1 7 22 22" fill="@{brandColor}"><g><path d="M19,12c0-1.1-0.9-2-2-2c0-1.1-0.9-2-2-2H5c-1.1,0-2,0.9-2,2c-1.1,0-2,0.9-2,2c-1.1,0-2,0.9-2,2v12c0,1.1,0.9,2,2,2h18c1.1,0,2-0.9,2-2V14C21,12.9,20.1,12,19,12z M5,9h10c0.6,0,1,0.4,1,1H4C4,9.4,4.4,9,5,9z M3,11h14c0.6,0,1,0.4,1,1H2C2,11.4,2.4,11,3,11z M20,26c0,0.6-0.4,1-1,1H1c-0.6,0-1-0.4-1-1V14c0-0.6,0.4-1,1-1h18c0.6,0,1,0.4,1,1V26z"/></g></svg>');
+      .encoded-svg-mask('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="-1 7 22 22" fill="@{brandColor}"><g><path d="M19,12c0-1.1-0.9-2-2-2c0-1.1-0.9-2-2-2H5c-1.1,0-2,0.9-2,2c-1.1,0-2,0.9-2,2c-1.1,0-2,0.9-2,2v12c0,1.1,0.9,2,2,2h18c1.1,0,2-0.9,2-2V14C21,12.9,20.1,12,19,12z M5,9h10c0.6,0,1,0.4,1,1H4C4,9.4,4.4,9,5,9z M3,11h14c0.6,0,1,0.4,1,1H2C2,11.4,2.4,11,3,11z M20,26c0,0.6-0.4,1-1,1H1c-0.6,0-1-0.4-1-1V14c0-0.6,0.4-1,1-1h18c0.6,0,1,0.4,1,1V26z"/></g></svg>', @brandColor);
     }
 
     //&.icon-text-additional {
     //  width: 22px;
     //  height: 22px;
-    //  .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{brandColor}"><g><path d="M18.5,15.5c-1.1,0-2,0.9-2,2s0.9,2,2,2s2-0.9,2-2S19.6,15.5,18.5,15.5z M18.5,18.5c-0.6,0-1-0.4-1-1c0-0.6,0.4-1,1-1s1,0.4,1,1C19.5,18.1,19.1,18.5,18.5,18.5z M18.5,7.5c1.1,0,2-0.9,2-2c0-1.1-0.9-2-2-2s-2,0.9-2,2C16.5,6.6,17.4,7.5,18.5,7.5z M18.5,4.5c0.6,0,1,0.4,1,1s-0.4,1-1,1s-1-0.4-1-1S17.9,4.5,18.5,4.5z M18.5,9.5c-1.1,0-2,0.9-2,2s0.9,2,2,2s2-0.9,2-2S19.6,9.5,18.5,9.5z M18.5,12.5c-0.6,0-1-0.4-1-1c0-0.6,0.4-1,1-1s1,0.4,1,1C19.5,12.1,19.1,12.5,18.5,12.5z M6.9,3.8L1,18.9h1.5l1.8-4.7h6.9l1.7,4.7h1.5L8.6,3.8H6.9z M4.7,12.9l3-7.9l3,7.9H4.7z"/></g></svg>');
+    //  .encoded-svg-mask('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{brandColor}"><g><path d="M18.5,15.5c-1.1,0-2,0.9-2,2s0.9,2,2,2s2-0.9,2-2S19.6,15.5,18.5,15.5z M18.5,18.5c-0.6,0-1-0.4-1-1c0-0.6,0.4-1,1-1s1,0.4,1,1C19.5,18.1,19.1,18.5,18.5,18.5z M18.5,7.5c1.1,0,2-0.9,2-2c0-1.1-0.9-2-2-2s-2,0.9-2,2C16.5,6.6,17.4,7.5,18.5,7.5z M18.5,4.5c0.6,0,1,0.4,1,1s-0.4,1-1,1s-1-0.4-1-1S17.9,4.5,18.5,4.5z M18.5,9.5c-1.1,0-2,0.9-2,2s0.9,2,2,2s2-0.9,2-2S19.6,9.5,18.5,9.5z M18.5,12.5c-0.6,0-1-0.4-1-1c0-0.6,0.4-1,1-1s1,0.4,1,1C19.5,12.1,19.1,12.5,18.5,12.5z M6.9,3.8L1,18.9h1.5l1.8-4.7h6.9l1.7,4.7h1.5L8.6,3.8H6.9z M4.7,12.9l3-7.9l3,7.9H4.7z"/></g></svg>');
     //}
     //&.icon-text-color {
     //  width: 22px;
     //  height: 22px;
-    //  .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{brandColor}"><g><path d="M8.9,12l2.3-6.3l2.2,6.3H8.9z M4.7,17.8h2l1.6-4.3h5.6l1.5,4.3h2.1L12.3,3.5h-2.2L4.7,17.8z"/></g></svg>');
+    //  .encoded-svg-mask('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{brandColor}"><g><path d="M8.9,12l2.3-6.3l2.2,6.3H8.9z M4.7,17.8h2l1.6-4.3h5.6l1.5,4.3h2.1L12.3,3.5h-2.2L4.7,17.8z"/></g></svg>');
     //}
     //&.icon-text-selection {
     //  width: 22px;
     //  height: 22px;
-    //  .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{brandColor}"><g><path d="M7.6,10.3c0.2,0.3,0.4,0.4,0.5,0.5c0.3,0.2,0.6,0.3,1,0.3c0.7,0,1.3-0.3,1.7-0.8c0.4-0.5,0.6-1.2,0.6-2.1c0-0.9-0.2-1.5-0.6-2c-0.4-0.4-0.9-0.7-1.6-0.7c-0.3,0-0.6,0.1-0.9,0.2C8,6,7.8,6.2,7.6,6.4V3.8H6.8V11h0.8V10.3z M8,6.9c0.3-0.3,0.7-0.4,1.1-0.4c0.5,0,0.8,0.2,1,0.5c0.2,0.4,0.4,0.8,0.4,1.4c0,0.6-0.1,1.1-0.4,1.5c-0.2,0.4-0.6,0.6-1.1,0.6c-0.6,0-1.1-0.3-1.3-0.9C7.6,9.2,7.6,8.8,7.6,8.3C7.6,7.7,7.7,7.2,8,6.9z M5.7,10.4c-0.1,0-0.2,0-0.2-0.1c0-0.1-0.1-0.1-0.1-0.2v-3c0-0.5-0.2-0.9-0.6-1.1C4.4,5.8,4,5.6,3.3,5.6c-0.5,0-1,0.1-1.4,0.4C1.5,6.3,1.3,6.7,1.3,7.4h0.8c0-0.3,0.1-0.5,0.2-0.6c0.2-0.2,0.5-0.4,1-0.4c0.4,0,0.7,0.1,0.9,0.2c0.2,0.1,0.3,0.4,0.3,0.7c0,0.1,0,0.3-0.1,0.3C4.4,7.7,4.3,7.8,4.1,7.8L2.7,8C2.2,8.1,1.8,8.2,1.5,8.5C1.2,8.8,1,9.1,1,9.6c0,0.4,0.2,0.8,0.5,1.1c0.3,0.3,0.7,0.4,1.2,0.4c0.4,0,0.8-0.1,1.1-0.3c0.3-0.2,0.6-0.4,0.8-0.6c0,0.2,0.1,0.4,0.2,0.5c0.1,0.2,0.4,0.3,0.7,0.3c0.1,0,0.2,0,0.3,0c0.1,0,0.2,0,0.3-0.1v-0.6c-0.1,0-0.1,0-0.2,0C5.8,10.4,5.7,10.4,5.7,10.4z M4.5,9.1c0,0.5-0.2,0.9-0.7,1.2c-0.3,0.1-0.6,0.2-0.9,0.2c-0.3,0-0.5-0.1-0.7-0.2C2,10.1,2,9.9,2,9.6C2,9.3,2.1,9,2.4,8.9c0.2-0.1,0.4-0.2,0.7-0.2l0.5-0.1c0.2,0,0.3-0.1,0.5-0.1c0.2,0,0.3-0.1,0.4-0.2V9.1z M18.5,5L8.3,15.3l-0.5,2c-0.6,0.4-1.3,0.3-1.5,0.6c-0.3,0.4,0.9,0.4,1.5,0.3c0.4,0,0.5,0,0.5-0.2l2.2-0.6L20.7,7.1L18.5,5z M9,15.3l9.5-9.5L20,7.1l-9.5,9.5L9,15.3z"/></g></svg>');
+    //  .encoded-svg-mask('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{brandColor}"><g><path d="M7.6,10.3c0.2,0.3,0.4,0.4,0.5,0.5c0.3,0.2,0.6,0.3,1,0.3c0.7,0,1.3-0.3,1.7-0.8c0.4-0.5,0.6-1.2,0.6-2.1c0-0.9-0.2-1.5-0.6-2c-0.4-0.4-0.9-0.7-1.6-0.7c-0.3,0-0.6,0.1-0.9,0.2C8,6,7.8,6.2,7.6,6.4V3.8H6.8V11h0.8V10.3z M8,6.9c0.3-0.3,0.7-0.4,1.1-0.4c0.5,0,0.8,0.2,1,0.5c0.2,0.4,0.4,0.8,0.4,1.4c0,0.6-0.1,1.1-0.4,1.5c-0.2,0.4-0.6,0.6-1.1,0.6c-0.6,0-1.1-0.3-1.3-0.9C7.6,9.2,7.6,8.8,7.6,8.3C7.6,7.7,7.7,7.2,8,6.9z M5.7,10.4c-0.1,0-0.2,0-0.2-0.1c0-0.1-0.1-0.1-0.1-0.2v-3c0-0.5-0.2-0.9-0.6-1.1C4.4,5.8,4,5.6,3.3,5.6c-0.5,0-1,0.1-1.4,0.4C1.5,6.3,1.3,6.7,1.3,7.4h0.8c0-0.3,0.1-0.5,0.2-0.6c0.2-0.2,0.5-0.4,1-0.4c0.4,0,0.7,0.1,0.9,0.2c0.2,0.1,0.3,0.4,0.3,0.7c0,0.1,0,0.3-0.1,0.3C4.4,7.7,4.3,7.8,4.1,7.8L2.7,8C2.2,8.1,1.8,8.2,1.5,8.5C1.2,8.8,1,9.1,1,9.6c0,0.4,0.2,0.8,0.5,1.1c0.3,0.3,0.7,0.4,1.2,0.4c0.4,0,0.8-0.1,1.1-0.3c0.3-0.2,0.6-0.4,0.8-0.6c0,0.2,0.1,0.4,0.2,0.5c0.1,0.2,0.4,0.3,0.7,0.3c0.1,0,0.2,0,0.3,0c0.1,0,0.2,0,0.3-0.1v-0.6c-0.1,0-0.1,0-0.2,0C5.8,10.4,5.7,10.4,5.7,10.4z M4.5,9.1c0,0.5-0.2,0.9-0.7,1.2c-0.3,0.1-0.6,0.2-0.9,0.2c-0.3,0-0.5-0.1-0.7-0.2C2,10.1,2,9.9,2,9.6C2,9.3,2.1,9,2.4,8.9c0.2-0.1,0.4-0.2,0.7-0.2l0.5-0.1c0.2,0,0.3-0.1,0.5-0.1c0.2,0,0.3-0.1,0.4-0.2V9.1z M18.5,5L8.3,15.3l-0.5,2c-0.6,0.4-1.3,0.3-1.5,0.6c-0.3,0.4,0.9,0.4,1.5,0.3c0.4,0,0.5,0,0.5-0.2l2.2-0.6L20.7,7.1L18.5,5z M9,15.3l9.5-9.5L20,7.1l-9.5,9.5L9,15.3z"/></g></svg>');
     //}
     //&.icon-bullets {
     //  width: 22px;
     //  height: 22px;
-    //  .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{brandColor}"><g><path d="M7,4v1h15V4H7z M1,6h3V3H1V6z M7,12h15v-1H7V12z M1,13h3v-3H1V13z M7,19h15v-1H7V19z M1,20h3v-3H1V20z"/></g></svg>');
+    //  .encoded-svg-mask('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{brandColor}"><g><path d="M7,4v1h15V4H7z M1,6h3V3H1V6z M7,12h15v-1H7V12z M1,13h3v-3H1V13z M7,19h15v-1H7V19z M1,20h3v-3H1V20z"/></g></svg>');
     //}
     //&.icon-numbers {
     //  width: 22px;
     //  height: 22px;
-    //  .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{brandColor}"><g><path d="M7,3.8v1h15v-1H7z M7,11.8h15v-1H7V11.8z M7,18.8h15v-1H7V18.8z M3.1,6.9h0.7V2H3.3C3.2,2.4,3.1,2.6,2.9,2.7C2.7,2.8,2.4,2.9,2,2.9v0.5h1.2V6.9z M3.3,9C2.6,9,2.1,9.2,1.9,9.7c-0.2,0.3-0.2,0.6-0.2,1h0.6c0-0.3,0.1-0.5,0.1-0.7c0.2-0.3,0.5-0.5,0.9-0.5c0.3,0,0.5,0.1,0.7,0.3s0.3,0.4,0.3,0.7c0,0.2-0.1,0.5-0.3,0.7c-0.1,0.1-0.3,0.3-0.6,0.4l-0.7,0.4c-0.4,0.3-0.7,0.5-0.9,0.9c-0.2,0.3-0.2,0.7-0.3,1.1h3.4v-0.6H2.2c0.1-0.2,0.2-0.5,0.4-0.7c0.1-0.1,0.3-0.2,0.5-0.4L3.6,12c0.4-0.2,0.7-0.4,0.9-0.6c0.3-0.3,0.4-0.6,0.4-1c0-0.4-0.1-0.7-0.4-1C4.3,9.1,3.9,9,3.3,9z M4.1,18.3c0.2-0.1,0.3-0.2,0.4-0.3c0.2-0.2,0.2-0.4,0.2-0.7c0-0.4-0.1-0.7-0.4-1C4,16.1,3.6,16,3.1,16c-0.6,0-1.1,0.2-1.3,0.7c-0.1,0.3-0.2,0.6-0.2,0.9h0.6c0-0.3,0.1-0.5,0.1-0.6c0.2-0.3,0.4-0.4,0.9-0.4c0.2,0,0.4,0.1,0.6,0.2C4,16.9,4.1,17,4.1,17.3c0,0.3-0.1,0.6-0.4,0.7c-0.1,0.1-0.3,0.1-0.6,0.1c-0.1,0-0.1,0-0.1,0c0,0-0.1,0-0.2,0v0.5c0,0,0.1,0,0.1,0c0,0,0.1,0,0.1,0c0.4,0,0.7,0.1,0.9,0.2c0.2,0.1,0.3,0.4,0.3,0.7c0,0.3-0.1,0.5-0.3,0.7c-0.2,0.2-0.5,0.3-0.8,0.3c-0.4,0-0.7-0.1-0.9-0.4c-0.1-0.1-0.2-0.4-0.2-0.7H1.5c0,0.5,0.1,0.8,0.4,1.2C2.1,20.8,2.5,21,3.1,21c0.6,0,1-0.1,1.3-0.4c0.3-0.3,0.5-0.7,0.5-1.1c0-0.3-0.1-0.5-0.2-0.7C4.5,18.5,4.3,18.3,4.1,18.3z"/></g></svg>');
+    //  .encoded-svg-mask('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{brandColor}"><g><path d="M7,3.8v1h15v-1H7z M7,11.8h15v-1H7V11.8z M7,18.8h15v-1H7V18.8z M3.1,6.9h0.7V2H3.3C3.2,2.4,3.1,2.6,2.9,2.7C2.7,2.8,2.4,2.9,2,2.9v0.5h1.2V6.9z M3.3,9C2.6,9,2.1,9.2,1.9,9.7c-0.2,0.3-0.2,0.6-0.2,1h0.6c0-0.3,0.1-0.5,0.1-0.7c0.2-0.3,0.5-0.5,0.9-0.5c0.3,0,0.5,0.1,0.7,0.3s0.3,0.4,0.3,0.7c0,0.2-0.1,0.5-0.3,0.7c-0.1,0.1-0.3,0.3-0.6,0.4l-0.7,0.4c-0.4,0.3-0.7,0.5-0.9,0.9c-0.2,0.3-0.2,0.7-0.3,1.1h3.4v-0.6H2.2c0.1-0.2,0.2-0.5,0.4-0.7c0.1-0.1,0.3-0.2,0.5-0.4L3.6,12c0.4-0.2,0.7-0.4,0.9-0.6c0.3-0.3,0.4-0.6,0.4-1c0-0.4-0.1-0.7-0.4-1C4.3,9.1,3.9,9,3.3,9z M4.1,18.3c0.2-0.1,0.3-0.2,0.4-0.3c0.2-0.2,0.2-0.4,0.2-0.7c0-0.4-0.1-0.7-0.4-1C4,16.1,3.6,16,3.1,16c-0.6,0-1.1,0.2-1.3,0.7c-0.1,0.3-0.2,0.6-0.2,0.9h0.6c0-0.3,0.1-0.5,0.1-0.6c0.2-0.3,0.4-0.4,0.9-0.4c0.2,0,0.4,0.1,0.6,0.2C4,16.9,4.1,17,4.1,17.3c0,0.3-0.1,0.6-0.4,0.7c-0.1,0.1-0.3,0.1-0.6,0.1c-0.1,0-0.1,0-0.1,0c0,0-0.1,0-0.2,0v0.5c0,0,0.1,0,0.1,0c0,0,0.1,0,0.1,0c0.4,0,0.7,0.1,0.9,0.2c0.2,0.1,0.3,0.4,0.3,0.7c0,0.3-0.1,0.5-0.3,0.7c-0.2,0.2-0.5,0.3-0.8,0.3c-0.4,0-0.7-0.1-0.9-0.4c-0.1-0.1-0.2-0.4-0.2-0.7H1.5c0,0.5,0.1,0.8,0.4,1.2C2.1,20.8,2.5,21,3.1,21c0.6,0,1-0.1,1.3-0.4c0.3-0.3,0.5-0.7,0.5-1.1c0-0.3-0.1-0.5-0.2-0.7C4.5,18.5,4.3,18.3,4.1,18.3z"/></g></svg>');
     //}
     //&.icon-linespacing {
     //  width: 22px;
     //  height: 22px;
-    //  .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{brandColor}"><g><polygon id="XMLID_7_" points="22,4 22,3 12,3 11,3 1,3 1,4 11,4 11,4.3 8,7.4 8.7,8.1 11,5.7 11,17.3 8.7,14.9 8,15.6 11,18.7 11,19 1,19 1,20 11,20 12,20 22,20 22,19 12,19 12,18.6 15,15.6 14.3,14.9 12,17.2 12,5.8 14.3,8.1 15,7.4 12,4.4 12,4 	"/></g></svg>');
+    //  .encoded-svg-mask('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{brandColor}"><g><polygon id="XMLID_7_" points="22,4 22,3 12,3 11,3 1,3 1,4 11,4 11,4.3 8,7.4 8.7,8.1 11,5.7 11,17.3 8.7,14.9 8,15.6 11,18.7 11,19 1,19 1,20 11,20 12,20 22,20 22,19 12,19 12,18.6 15,15.6 14.3,14.9 12,17.2 12,5.8 14.3,8.1 15,7.4 12,4.4 12,4 	"/></g></svg>');
     //}
     &.icon-text-align-center {
       width: 22px;
       height: 22px;
-      .encoded-svg-mask('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{brandColor}"><g><path d="M1,3v1h21V3H1z M4,7v1h14V7H4z M1,12h21v-1H1V12z M4,15v1h14v-1H4z M1,20h21v-1H1V20z"/></g></svg>');
+      .encoded-svg-mask('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{brandColor}"><g><path d="M1,3v1h21V3H1z M4,7v1h14V7H4z M1,12h21v-1H1V12z M4,15v1h14v-1H4z M1,20h21v-1H1V20z"/></g></svg>', @brandColor);
     }
 
     &.icon-text-align-just {
       width: 22px;
       height: 22px;
-      .encoded-svg-mask('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{brandColor}"><g><path d="M1,3v1h21V3H1z M1,8h21V7H1V8z M1,12h21v-1H1V12z M1,16h21v-1H1V16z M1,20h21v-1H1V20z"/></g></svg>');
+      .encoded-svg-mask('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{brandColor}"><g><path d="M1,3v1h21V3H1z M1,8h21V7H1V8z M1,12h21v-1H1V12z M1,16h21v-1H1V16z M1,20h21v-1H1V20z"/></g></svg>', @brandColor);
     }
 
     &.icon-text-align-left {
       width: 22px;
       height: 22px;
-      .encoded-svg-mask('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{brandColor}"><g><path d="M1,3v1h21V3H1z M15,7H1v1h14V7z M1,12h21v-1H1V12z M15,15H1v1h14V15z M1,20h21v-1H1V20z"/></g></svg>');
+      .encoded-svg-mask('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{brandColor}"><g><path d="M1,3v1h21V3H1z M15,7H1v1h14V7z M1,12h21v-1H1V12z M15,15H1v1h14V15z M1,20h21v-1H1V20z"/></g></svg>', @brandColor);
     }
 
     &.icon-text-align-right {
       width: 22px;
       height: 22px;
-      .encoded-svg-mask('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{brandColor}"><g><path d="M1,3v1h21V3H1z M8,8h14V7H8V8z M22,11H1v1h21V11z M8,16h14v-1H8V16z M22,19H1v1h21V19z"/></g></svg>');
+      .encoded-svg-mask('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{brandColor}"><g><path d="M1,3v1h21V3H1z M8,8h14V7H8V8z M22,11H1v1h21V11z M8,16h14v-1H8V16z M22,19H1v1h21V19z"/></g></svg>', @brandColor);
     }
 
     &.icon-de-indent {
       width: 22px;
       height: 22px;
-      .encoded-svg-mask('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{brandColor}"><g><path d="M1,20v-1h21v1H1z M11,15h11v1H11V15z M11,11h11v1H11V11z M11,7h11v1H11V7z M6.3,7L7,7.7l-3.8,3.8L7,15.3L6.3,16L2,11.8l-0.2-0.3L2,11.2L6.3,7z M1,3h21v1H1V3z"/></g></svg>');
+      .encoded-svg-mask('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{brandColor}"><g><path d="M1,20v-1h21v1H1z M11,15h11v1H11V15z M11,11h11v1H11V11z M11,7h11v1H11V7z M6.3,7L7,7.7l-3.8,3.8L7,15.3L6.3,16L2,11.8l-0.2-0.3L2,11.2L6.3,7z M1,3h21v1H1V3z"/></g></svg>', @brandColor);
     }
 
     &.icon-in-indent {
       width: 22px;
       height: 22px;
-      .encoded-svg-mask('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{brandColor}"><g><path d="M1,20v-1h21v1H1z M12,16H1v-1h11V16z M12,12H1v-1h11V12z M12,8H1V7h11V8z M21,11.2l0.2,0.3L21,11.8L16.7,16L16,15.3l3.8-3.8L16,7.7L16.7,7L21,11.2z M22,4H1V3h21V4z"/></g></svg>');
+      .encoded-svg-mask('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{brandColor}"><g><path d="M1,20v-1h21v1H1z M12,16H1v-1h11V16z M12,12H1v-1h11V12z M12,8H1V7h11V8z M21,11.2l0.2,0.3L21,11.8L16.7,16L16,15.3l3.8-3.8L16,7.7L16.7,7L21,11.2z M22,4H1V3h21V4z"/></g></svg>', @brandColor);
     }
 
     &.icon-table-add-column-left {
       width: 22px;
       height: 22px;
-      .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{brandColor}"><g><path d="M15,19h-1H8H7v-1v-3H0V2h7h1h14v4v1v3v1v3v1v3v1H15z M15,18h6v-3h-6V18z M15,14h6v-3h-6V14z M8,18h6v-3H8V18z M8,14h6v-3H8V14z M14,10V7H8v3H14z M8,3v3h6V3H8z M21,3h-6v3h6V3z M15,7v3h6V7H15z M3,16h1v2h2v1H4v2H3v-2H1v-1h2V16z"/></g></svg>');
+      .encoded-svg-mask('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{brandColor}"><g><path d="M15,19h-1H8H7v-1v-3H0V2h7h1h14v4v1v3v1v3v1v3v1H15z M15,18h6v-3h-6V18z M15,14h6v-3h-6V14z M8,18h6v-3H8V18z M8,14h6v-3H8V14z M14,10V7H8v3H14z M8,3v3h6V3H8z M21,3h-6v3h6V3z M15,7v3h6V7H15z M3,16h1v2h2v1H4v2H3v-2H1v-1h2V16z"/></g></svg>', @brandColor);
     }
 
     &.icon-table-add-column-right {
       width: 22px;
       height: 22px;
-      .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{brandColor}"><g><path d="M0,19l0-1l0-3l0-1l0-3l0-1l0-3l0-1l0-4h14h1h7v13h-7v3v1h-1H8H7H0z M7,15H1v3h6V15z M7,11H1v3h6V11z M14,15H8v3h6V15z M14,11H8v3h6V11z M14,10V7H8v3H14z M8,3v3h6V3H8z M1,6h6V3H1V6z M1,7v3h6V7H1z M19,18h2v1h-2v2h-1v-2h-2v-1h2v-2h1V18z"/></g></svg>');
+      .encoded-svg-mask('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{brandColor}"><g><path d="M0,19l0-1l0-3l0-1l0-3l0-1l0-3l0-1l0-4h14h1h7v13h-7v3v1h-1H8H7H0z M7,15H1v3h6V15z M7,11H1v3h6V11z M14,15H8v3h6V15z M14,11H8v3h6V11z M14,10V7H8v3H14z M8,3v3h6V3H8z M1,6h6V3H1V6z M1,7v3h6V7H1z M19,18h2v1h-2v2h-1v-2h-2v-1h2v-2h1V18z"/></g></svg>', @brandColor);
     }
 
     &.icon-table-add-row-above {
       width: 22px;
       height: 22px;
-      .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{brandColor}"><g><path d="M21,20h-6h-1H8H7H0v-1v-3v-1v-3v-1V8V7V1h15v6h6h1v1v3v1v3v1v3v1H21z M7,8H1v3h6V8z M7,12H1v3h6V12z M7,16H1v3h6V16z M8,19h6v-3H8V19z M8,15h6v-3H8V15z M8,11h6V8H8V11z M21,8h-6v3h6V8z M21,12h-6v3h6V12z M21,16h-6v3h6V16z M19,6h-1V4h-2V3h2V1h1v2h2v1h-2V6z"/></g></svg>');
+      .encoded-svg-mask('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{brandColor}"><g><path d="M21,20h-6h-1H8H7H0v-1v-3v-1v-3v-1V8V7V1h15v6h6h1v1v3v1v3v1v3v1H21z M7,8H1v3h6V8z M7,12H1v3h6V12z M7,16H1v3h6V16z M8,19h6v-3H8V19z M8,15h6v-3H8V15z M8,11h6V8H8V11z M21,8h-6v3h6V8z M21,12h-6v3h6V12z M21,16h-6v3h6V16z M19,6h-1V4h-2V3h2V1h1v2h2v1h-2V6z"/></g></svg>', @brandColor);
     }
 
     &.icon-table-add-row-below {
       width: 22px;
       height: 22px;
-      .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{brandColor}"><g><path d="M22,1v1v3v1v3v1v3v1h-1h-6v6H0v-6v-1v-3V9V6V5V2V1h7h1h6h1h6H22z M7,10H1v3h6V10z M7,6H1v3h6V6z M7,2H1v3h6V2z M8,5h6V2H8V5z M8,9h6V6H8V9z M8,13h6v-3H8V13z M21,10h-6v3h6V10z M21,6h-6v3h6V6z M21,2h-6v3h6V2z M19,17h2v1h-2v2h-1v-2h-2v-1h2v-2h1V17z"/></g></svg>');
+      .encoded-svg-mask('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{brandColor}"><g><path d="M22,1v1v3v1v3v1v3v1h-1h-6v6H0v-6v-1v-3V9V6V5V2V1h7h1h6h1h6H22z M7,10H1v3h6V10z M7,6H1v3h6V6z M7,2H1v3h6V2z M8,5h6V2H8V5z M8,9h6V6H8V9z M8,13h6v-3H8V13z M21,10h-6v3h6V10z M21,6h-6v3h6V6z M21,2h-6v3h6V2z M19,17h2v1h-2v2h-1v-2h-2v-1h2v-2h1V17z"/></g></svg>', @brandColor);
     }
 
     &.icon-table-remove-column {
       width: 22px;
       height: 22px;
-      .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{brandColor}"><g><path d="M21,19h-6h-1h-1.6c-0.9,1.8-2.7,3-4.9,3s-4-1.2-4.9-3H1H0v-1v-3v-1v-3v-1V7V6V3V2h7h1h6h1h6h1v1v3v1v3v1v3v1v3v1H21z M7.5,12C5,12,3,14,3,16.5S5,21,7.5,21s4.5-2,4.5-4.5S10,12,7.5,12z M14,3H8v3h6V3z M14,7H8v3h6V7z M14,11H8v0.1c1.9,0.2,3.5,1.3,4.4,2.9H14V11z M14,15h-1.2c0.1,0.5,0.2,1,0.2,1.5c0,0.5-0.1,1-0.2,1.5H14V15z M21,3h-6v3h6V3z M21,7h-6v3h6V7z M21,11h-6v3h6V11z M21,15h-6v3h6V15z M9.6,19.3l-2.1-2.1l-2.1,2.1l-0.7-0.7l2.1-2.1l-2.1-2.1l0.7-0.7l2.1,2.1l2.1-2.1l0.7,0.7l-2.1,2.1l2.1,2.1L9.6,19.3z"/></g></svg>');
+      .encoded-svg-mask('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{brandColor}"><g><path d="M21,19h-6h-1h-1.6c-0.9,1.8-2.7,3-4.9,3s-4-1.2-4.9-3H1H0v-1v-3v-1v-3v-1V7V6V3V2h7h1h6h1h6h1v1v3v1v3v1v3v1v3v1H21z M7.5,12C5,12,3,14,3,16.5S5,21,7.5,21s4.5-2,4.5-4.5S10,12,7.5,12z M14,3H8v3h6V3z M14,7H8v3h6V7z M14,11H8v0.1c1.9,0.2,3.5,1.3,4.4,2.9H14V11z M14,15h-1.2c0.1,0.5,0.2,1,0.2,1.5c0,0.5-0.1,1-0.2,1.5H14V15z M21,3h-6v3h6V3z M21,7h-6v3h6V7z M21,11h-6v3h6V11z M21,15h-6v3h6V15z M9.6,19.3l-2.1-2.1l-2.1,2.1l-0.7-0.7l2.1-2.1l-2.1-2.1l0.7-0.7l2.1,2.1l2.1-2.1l0.7,0.7l-2.1,2.1l2.1,2.1L9.6,19.3z"/></g></svg>', @brandColor);
     }
 
     &.icon-table-remove-row {
       width: 22px;
       height: 22px;
-      .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{brandColor}"><g><path d="M21,19h-6h-1h-1.6c-0.9,1.8-2.7,3-4.9,3s-4-1.2-4.9-3H1H0v-1v-3v-1v-3v-1V7V6V3V2h7h1h6h1h6h1v1v3v1v3v1v3v1v3v1H21z M1,18h1.2C2.1,17.5,2,17,2,16.5c0-0.5,0.1-1,0.2-1.5H1V18z M7,3H1v3h6V3z M7,7H1v3h6V7z M7.5,12C5,12,3,14,3,16.5S5,21,7.5,21s4.5-2,4.5-4.5S10,12,7.5,12z M14,3H8v3h6V3z M14,7H8v3h6V7z M14,15h-1.2c0.1,0.5,0.2,1,0.2,1.5c0,0.5-0.1,1-0.2,1.5H14V15z M21,3h-6v3h6V3z M21,7h-6v3h6V7z M21,15h-6v3h6V15z M9.6,19.3l-2.1-2.1l-2.1,2.1l-0.7-0.7l2.1-2.1l-2.1-2.1l0.7-0.7l2.1,2.1l2.1-2.1l0.7,0.7l-2.1,2.1l2.1,2.1L9.6,19.3z"/></g></svg>');
+      .encoded-svg-mask('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{brandColor}"><g><path d="M21,19h-6h-1h-1.6c-0.9,1.8-2.7,3-4.9,3s-4-1.2-4.9-3H1H0v-1v-3v-1v-3v-1V7V6V3V2h7h1h6h1h6h1v1v3v1v3v1v3v1v3v1H21z M1,18h1.2C2.1,17.5,2,17,2,16.5c0-0.5,0.1-1,0.2-1.5H1V18z M7,3H1v3h6V3z M7,7H1v3h6V7z M7.5,12C5,12,3,14,3,16.5S5,21,7.5,21s4.5-2,4.5-4.5S10,12,7.5,12z M14,3H8v3h6V3z M14,7H8v3h6V7z M14,15h-1.2c0.1,0.5,0.2,1,0.2,1.5c0,0.5-0.1,1-0.2,1.5H14V15z M21,3h-6v3h6V3z M21,7h-6v3h6V7z M21,15h-6v3h6V15z M9.6,19.3l-2.1-2.1l-2.1,2.1l-0.7-0.7l2.1-2.1l-2.1-2.1l0.7-0.7l2.1,2.1l2.1-2.1l0.7,0.7l-2.1,2.1l2.1,2.1L9.6,19.3z"/></g></svg>', @brandColor);
     }
 
     &.icon-pagebreak {
       width: 22px;
       height: 22px;
-      .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{brandColor}"><g><path d="M8,14v1h1v-1H8z M6,14v1h1v-1H6z M18,21H3v-6H2v7h17v-7h-1V21z M4,14v1h1v-1H4z M14,14v1h1v-1H14z M10,14v1h1v-1H10z M8.2,1L2,7.6V14h1V9h6V2l0,0h9v12h1V1H8.2z M8,8H3.1L8,2.8V8z M12,14v1h1v-1H12z M16,14v1h1v-1H16z"/></g></svg>');
+      .encoded-svg-mask('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{brandColor}"><g><path d="M8,14v1h1v-1H8z M6,14v1h1v-1H6z M18,21H3v-6H2v7h17v-7h-1V21z M4,14v1h1v-1H4z M14,14v1h1v-1H14z M10,14v1h1v-1H10z M8.2,1L2,7.6V14h1V9h6V2l0,0h9v12h1V1H8.2z M8,8H3.1L8,2.8V8z M12,14v1h1v-1H12z M16,14v1h1v-1H16z"/></g></svg>', @brandColor);
     }
 
     &.icon-sectionbreak {
       width: 22px;
       height: 22px;
-      .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{brandColor}"><g><path d="M20,14V2H3v12H2V1h19v13H20z M5,14v1H4v-1H5z M7,14v1H6v-1H7z M9,14v1H8v-1H9z M11,14v1h-1v-1H11z M13,14v1h-1v-1H13z M15,14v1h-1v-1H15z M17,14v1h-1v-1H17z M18,14h1v1h-1V14z M3,21h17v-6h1v7H2v-7h1V21z"/></g></svg>');
+      .encoded-svg-mask('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{brandColor}"><g><path d="M20,14V2H3v12H2V1h19v13H20z M5,14v1H4v-1H5z M7,14v1H6v-1H7z M9,14v1H8v-1H9z M11,14v1h-1v-1H11z M13,14v1h-1v-1H13z M15,14v1h-1v-1H15z M17,14v1h-1v-1H17z M18,14h1v1h-1V14z M3,21h17v-6h1v7H2v-7h1V21z"/></g></svg>', @brandColor);
     }
 
     &.icon-stringbreak {
       width: 22px;
       height: 22px;
-      .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{brandColor}"><g><path d="M18,12H5.1L9,15.9l-0.7,0.7l-4.5-4.5l-0.6-0.6l0.6-0.6l4.5-4.5L9,7.1L5.1,11H18V5h1v6v1H18z"/></g></svg>');
+      .encoded-svg-mask('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{brandColor}"><g><path d="M18,12H5.1L9,15.9l-0.7,0.7l-4.5-4.5l-0.6-0.6l0.6-0.6l4.5-4.5L9,7.1L5.1,11H18V5h1v6v1H18z"/></g></svg>', @brandColor);
     }
 
     &.icon-pagenumber {
       width: 22px;
       height: 22px;
-      .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{brandColor}"><g><path d="M8.2,1L2,7.6V22h17V1H8.2z M8,2.8V8H3.1L8,2.8z M18,21H3V9h6V2l0,0h9V21z M12,19h1v-4h-0.7c0,0.2-0.1-0.1-0.1,0c-0.1,0.1-0.2,0-0.3,0c-0.1,0.1-0.2,0.1-0.4,0.1c-0.1,0-0.3,0-0.4,0V16H12V19z M15.3,17.3C15,17.9,15.1,18.4,15,19h0.9c0-0.3,0-0.6,0.1-0.9c0.1-0.3,0.1-0.6,0.3-0.9c0.1-0.3,0.3-0.6,0.4-0.9c0.2-0.3,0.1-0.3,0.3-0.5V15h-3v1h1.9C15.6,16.4,15.5,16.7,15.3,17.3z"/></g></svg>');
+      .encoded-svg-mask('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{brandColor}"><g><path d="M8.2,1L2,7.6V22h17V1H8.2z M8,2.8V8H3.1L8,2.8z M18,21H3V9h6V2l0,0h9V21z M12,19h1v-4h-0.7c0,0.2-0.1-0.1-0.1,0c-0.1,0.1-0.2,0-0.3,0c-0.1,0.1-0.2,0.1-0.4,0.1c-0.1,0-0.3,0-0.4,0V16H12V19z M15.3,17.3C15,17.9,15.1,18.4,15,19h0.9c0-0.3,0-0.6,0.1-0.9c0.1-0.3,0.1-0.6,0.3-0.9c0.1-0.3,0.3-0.6,0.4-0.9c0.2-0.3,0.1-0.3,0.3-0.5V15h-3v1h1.9C15.6,16.4,15.5,16.7,15.3,17.3z"/></g></svg>', @brandColor);
     }
 
     &.icon-image-library {
       width: 24px;
       height: 24px;
-      .encoded-svg-background('<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0)"><path fill-rule="evenodd" clip-rule="evenodd" d="M20 5.5H4C3.72386 5.5 3.5 5.72386 3.5 6V15.5822L8.03349 11.6898C8.47476 11.3109 9.11904 11.2865 9.58778 11.6308L13.5726 14.5579L15.9619 12.6774C16.4488 12.2942 17.1428 12.3255 17.5933 12.7509L20.5 15.4962V6C20.5 5.72386 20.2761 5.5 20 5.5ZM20.5 17.5294L20.485 17.5453L16.7201 13.9895L14.3509 15.8542C13.9095 16.2016 13.2905 16.2119 12.8378 15.8793L8.85988 12.9573L3.5 17.5592V18C3.5 18.2761 3.72386 18.5 4 18.5H20C20.2761 18.5 20.5 18.2761 20.5 18V17.5294ZM4 4C2.89543 4 2 4.89543 2 6V18C2 19.1046 2.89543 20 4 20H20C21.1046 20 22 19.1046 22 18V6C22 4.89543 21.1046 4 20 4H4ZM16.5 9.5C16.5 11.1569 15.1569 12.5 13.5 12.5C11.8431 12.5 10.5 11.1569 10.5 9.5C10.5 7.84315 11.8431 6.5 13.5 6.5C15.1569 6.5 16.5 7.84315 16.5 9.5ZM13.5 11C14.3284 11 15 10.3284 15 9.5C15 8.67157 14.3284 8 13.5 8C12.6716 8 12 8.67157 12 9.5C12 10.3284 12.6716 11 13.5 11Z" fill="@{brandColor}"/></g><defs><clipPath id="clip0"><path d="M0 0H24V24H0V0Z" fill="transparent"/></clipPath></defs></svg>');
+      .encoded-svg-mask('<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0)"><path fill-rule="evenodd" clip-rule="evenodd" d="M20 5.5H4C3.72386 5.5 3.5 5.72386 3.5 6V15.5822L8.03349 11.6898C8.47476 11.3109 9.11904 11.2865 9.58778 11.6308L13.5726 14.5579L15.9619 12.6774C16.4488 12.2942 17.1428 12.3255 17.5933 12.7509L20.5 15.4962V6C20.5 5.72386 20.2761 5.5 20 5.5ZM20.5 17.5294L20.485 17.5453L16.7201 13.9895L14.3509 15.8542C13.9095 16.2016 13.2905 16.2119 12.8378 15.8793L8.85988 12.9573L3.5 17.5592V18C3.5 18.2761 3.72386 18.5 4 18.5H20C20.2761 18.5 20.5 18.2761 20.5 18V17.5294ZM4 4C2.89543 4 2 4.89543 2 6V18C2 19.1046 2.89543 20 4 20H20C21.1046 20 22 19.1046 22 18V6C22 4.89543 21.1046 4 20 4H4ZM16.5 9.5C16.5 11.1569 15.1569 12.5 13.5 12.5C11.8431 12.5 10.5 11.1569 10.5 9.5C10.5 7.84315 11.8431 6.5 13.5 6.5C15.1569 6.5 16.5 7.84315 16.5 9.5ZM13.5 11C14.3284 11 15 10.3284 15 9.5C15 8.67157 14.3284 8 13.5 8C12.6716 8 12 8.67157 12 9.5C12 10.3284 12.6716 11 13.5 11Z" fill="@{brandColor}"/></g><defs><clipPath id="clip0"><path d="M0 0H24V24H0V0Z" fill="transparent"/></clipPath></defs></svg>', @brandColor);
     }
 
     &.icon-text-valign-top {
       width: 22px;
       height: 22px;
-      .encoded-svg-mask('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{brandColor}"><g><rect class="cls-1" x="2" y="2" width="19" height="1"/><rect class="cls-1" x="2" y="4" width="19" height="1"/><polygon class="cls-1" points="12 18 11 18 11 7.83 8.65 9.8 8 8.94 11.5 6 15 9 14.35 9.8 12 7.83 12 18"/></g></svg>');
+      .encoded-svg-mask('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{brandColor}"><g><rect class="cls-1" x="2" y="2" width="19" height="1"/><rect class="cls-1" x="2" y="4" width="19" height="1"/><polygon class="cls-1" points="12 18 11 18 11 7.83 8.65 9.8 8 8.94 11.5 6 15 9 14.35 9.8 12 7.83 12 18"/></g></svg>', @brandColor);
     }
 
     &.icon-text-valign-middle {
       width: 22px;
       height: 22px;
-      .encoded-svg-mask('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{brandColor}"><g><rect class="cls-1" x="2" y="10" width="19" height="1"/><rect class="cls-1" x="2" y="12" width="19" height="1"/><polygon class="cls-1" points="11 2 12 2 12 7.17 14.35 5.2 15 6.06 11.5 9 8 6 8.65 5.2 11 7.17 11 2"/><polygon class="cls-1" points="12 21 11 21 11 15.83 8.65 17.8 8 16.94 11.5 14 15 17 14.35 17.8 12 15.83 12 21"/></g></svg>');
+      .encoded-svg-mask('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{brandColor}"><g><rect class="cls-1" x="2" y="10" width="19" height="1"/><rect class="cls-1" x="2" y="12" width="19" height="1"/><polygon class="cls-1" points="11 2 12 2 12 7.17 14.35 5.2 15 6.06 11.5 9 8 6 8.65 5.2 11 7.17 11 2"/><polygon class="cls-1" points="12 21 11 21 11 15.83 8.65 17.8 8 16.94 11.5 14 15 17 14.35 17.8 12 15.83 12 21"/></g></svg>', @brandColor);
     }
 
     &.icon-text-valign-bottom {
       width: 22px;
       height: 22px;
-      .encoded-svg-mask('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{brandColor}"><g><rect class="cls-1" x="2" y="18" width="19" height="1"/><rect class="cls-1" x="2" y="20" width="19" height="1"/><polygon class="cls-1" points="11 4 12 4 12 15.17 14.35 13.2 15 14.06 11.5 17 8 14 8.65 13.2 11 15.17 11 4"/></g></svg>');
+      .encoded-svg-mask('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{brandColor}"><g><rect class="cls-1" x="2" y="18" width="19" height="1"/><rect class="cls-1" x="2" y="20" width="19" height="1"/><polygon class="cls-1" points="11 4 12 4 12 15.17 14.35 13.2 15 14.06 11.5 17 8 14 8.65 13.2 11 15.17 11 4"/></g></svg>', @brandColor);
     }
 
     // Presets of table borders
@@ -246,61 +246,61 @@
     &.icon-table-borders-all {
       width: 28px;
       height: 28px;
-      .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 28 28" fill="@{brandColor}"><g><path d="M26.9,0H0V27H27V0H26.9ZM13,26H1V14H13V26Zm0-13H1V1H13V13ZM26,26H14V14H26V26Zm0-13H14V1H26V13Z"/></g></svg>');
+      .encoded-svg-mask('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 28 28" fill="@{brandColor}"><g><path d="M26.9,0H0V27H27V0H26.9ZM13,26H1V14H13V26Zm0-13H1V1H13V13ZM26,26H14V14H26V26Zm0-13H14V1H26V13Z"/></g></svg>', @brandColor);
     }
 
     &.icon-table-borders-none {
       width: 28px;
       height: 28px;
-      .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 28 28" fill="@{brandColor}"><g><path opacity="0.3" d="M26.9,0H0V27H27V0H26.9ZM13,26H1V14H13V26Zm0-13H1V1H13V13ZM26,26H14V14H26V26Zm0-13H14V1H26V13Z"/></g></svg>');
+      .encoded-svg-mask('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 28 28" fill="@{brandColor}"><g><path opacity="0.3" d="M26.9,0H0V27H27V0H26.9ZM13,26H1V14H13V26Zm0-13H1V1H13V13ZM26,26H14V14H26V26Zm0-13H14V1H26V13Z"/></g></svg>', @brandColor);
     }
 
     &.icon-table-borders-inner {
       width: 28px;
       height: 28px;
-      .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 28 28" fill="@{brandColor}"><g><polygon points="26 13 14 13 14 1 13 1 13 13 1 13 1 14 13 14 13 26 14 26 14 14 26 14 26 13"/><path opacity="0.3" d="M27,0H0V27H27V0ZM1,26V1H26V26H1Z"/></g></svg>');
+      .encoded-svg-mask('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 28 28" fill="@{brandColor}"><g><polygon points="26 13 14 13 14 1 13 1 13 13 1 13 1 14 13 14 13 26 14 26 14 14 26 14 26 13"/><path opacity="0.3" d="M27,0H0V27H27V0ZM1,26V1H26V26H1Z"/></g></svg>', @brandColor);
     }
 
     &.icon-table-borders-outer {
       width: 28px;
       height: 28px;
-      .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 28 28" fill="@{brandColor}"><g><path d="M27,0H0V27H27V0ZM1,26V1H26V26H1Z"/></g></svg>');
+      .encoded-svg-mask('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 28 28" fill="@{brandColor}"><g><path d="M27,0H0V27H27V0ZM1,26V1H26V26H1Z"/></g></svg>', @brandColor);
     }
 
     &.icon-table-borders-left {
       width: 28px;
       height: 28px;
-      .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 28 28" fill="@{brandColor}"><g><path opacity="0.3" d="M27,0H0V27H27V0ZM1,26V1H26V26H1Z"/><rect width="1" height="27"/></g></svg>');
+      .encoded-svg-mask('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 28 28" fill="@{brandColor}"><g><path opacity="0.3" d="M27,0H0V27H27V0ZM1,26V1H26V26H1Z"/><rect width="1" height="27"/></g></svg>', @brandColor);
     }
 
     &.icon-table-borders-center {
       width: 28px;
       height: 28px;
-      .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 28 28" fill="@{brandColor}"><g><path opacity="0.3" d="M27,0H0V27H27V0ZM1,26V1H26V26H1Z"/><rect x="13" width="1" height="27"/></g></svg>');
+      .encoded-svg-mask('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 28 28" fill="@{brandColor}"><g><path opacity="0.3" d="M27,0H0V27H27V0ZM1,26V1H26V26H1Z"/><rect x="13" width="1" height="27"/></g></svg>', @brandColor);
     }
 
     &.icon-table-borders-right {
       width: 28px;
       height: 28px;
-      .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 28 28" fill="@{brandColor}"><g><path opacity="0.3" d="M27,0H0V27H27V0ZM1,26V1H26V26H1Z"/><rect x="26" width="1" height="27"/></g></svg>');
+      .encoded-svg-mask('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 28 28" fill="@{brandColor}"><g><path opacity="0.3" d="M27,0H0V27H27V0ZM1,26V1H26V26H1Z"/><rect x="26" width="1" height="27"/></g></svg>', @brandColor);
     }
 
     &.icon-table-borders-top {
       width: 28px;
       height: 28px;
-      .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 28 28" fill="@{brandColor}"><g><path opacity="0.3" d="M27,0H0V27H27V0ZM1,26V1H26V26H1Z"/><rect width="27" height="1"/></g></svg>');
+      .encoded-svg-mask('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 28 28" fill="@{brandColor}"><g><path opacity="0.3" d="M27,0H0V27H27V0ZM1,26V1H26V26H1Z"/><rect width="27" height="1"/></g></svg>', @brandColor);
     }
 
     &.icon-table-borders-middle {
       width: 28px;
       height: 28px;
-      .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 28 28" fill="@{brandColor}"><g><path opacity="0.3" d="M27,0H0V27H27V0ZM1,26V1H26V26H1Z"/><rect y="13" width="27" height="1"/></g></svg>');
+      .encoded-svg-mask('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 28 28" fill="@{brandColor}"><g><path opacity="0.3" d="M27,0H0V27H27V0ZM1,26V1H26V26H1Z"/><rect y="13" width="27" height="1"/></g></svg>', @brandColor);
     }
 
     &.icon-table-borders-bottom {
       width: 28px;
       height: 28px;
-      .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 28 28" fill="@{brandColor}"><g><path opacity="0.3" d="M27,0H0V27H27V0ZM1,26V1H26V26H1Z"/><rect y="26" width="27" height="1"/></g></svg>');
+      .encoded-svg-mask('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 28 28" fill="@{brandColor}"><g><path opacity="0.3" d="M27,0H0V27H27V0ZM1,26V1H26V26H1Z"/><rect y="26" width="27" height="1"/></g></svg>', @brandColor);
     }
 
     // Reorder
@@ -308,73 +308,73 @@
     &.icon-move-backward {
       width: 28px;
       height: 28px;
-      .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 28 28" fill="@{brandColor}"><g><rect opacity="0.3" x="1" y="1" width="17" height="17"/><path d="M10,10V27H27V10H10ZM26,26H11V11H26V26Z"/></g></svg>');
+      .encoded-svg-mask('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 28 28" fill="@{brandColor}"><g><rect opacity="0.3" x="1" y="1" width="17" height="17"/><path d="M10,10V27H27V10H10ZM26,26H11V11H26V26Z"/></g></svg>', @brandColor);
     }
 
     &.icon-move-forward {
       width: 28px;
       height: 28px;
-      .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 28 28" fill="@{brandColor}"><g><path opacity="0.3" d="M10,10V27H27V10H10ZM26,26H11V11H26V26Z"/><rect x="1" y="1" width="17" height="17"/></g></svg>');
+      .encoded-svg-mask('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 28 28" fill="@{brandColor}"><g><path opacity="0.3" d="M10,10V27H27V10H10ZM26,26H11V11H26V26Z"/><rect x="1" y="1" width="17" height="17"/></g></svg>', @brandColor);
     }
 
     &.icon-move-background {
       width: 28px;
       height: 28px;
-      .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 28 28" fill="@{brandColor}"><g><rect opacity="0.3" x="8" y="8" width="13" height="13"/><path d="M1,1V13H13V1H1ZM12,12H2V2H12V12Z"/><path d="M15,15V27H27V15H15ZM26,26H16V16H26V26Z"/></g></svg>');
+      .encoded-svg-mask('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 28 28" fill="@{brandColor}"><g><rect opacity="0.3" x="8" y="8" width="13" height="13"/><path d="M1,1V13H13V1H1ZM12,12H2V2H12V12Z"/><path d="M15,15V27H27V15H15ZM26,26H16V16H26V26Z"/></g></svg>', @brandColor);
     }
 
     &.icon-move-foreground {
       width: 28px;
       height: 28px;
-      .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 28 28" fill="@{brandColor}"><g><path opacity="0.3" d="M1,1V13H13V1H1ZM12,12H2V2H12V12Z"/><path opacity="0.3" d="M15,15V27H27V15H15ZM26,26H16V16H26V26Z"/><rect x="8" y="8" width="13" height="13"/></g></svg>');
+      .encoded-svg-mask('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 28 28" fill="@{brandColor}"><g><path opacity="0.3" d="M1,1V13H13V1H1ZM12,12H2V2H12V12Z"/><path opacity="0.3" d="M15,15V27H27V15H15ZM26,26H16V16H26V26Z"/><rect x="8" y="8" width="13" height="13"/></g></svg>', @brandColor);
     }
 
     &.icon-align-left {
       width: 22px;
       height: 22px;
-      .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" style="enable-background:new 0 0 22 22;" xml:space="preserve" fill="@{brandColor}"><style type="text/css">.st0{fill-rule:evenodd;clip-rule:evenodd;}</style><g><g id="XMLID_35_"><path id="XMLID_36_" class="st0" d="M1,21h1V1H1V21z M4,13v4h16v-4H4z M12,5H4v4h8V5z"/></g></g></svg>');
+      .encoded-svg-mask('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" style="enable-background:new 0 0 22 22;" xml:space="preserve" fill="@{brandColor}"><style type="text/css">.st0{fill-rule:evenodd;clip-rule:evenodd;}</style><g><g id="XMLID_35_"><path id="XMLID_36_" class="st0" d="M1,21h1V1H1V21z M4,13v4h16v-4H4z M12,5H4v4h8V5z"/></g></g></svg>', @brandColor);
     }
 
     &.icon-align-center {
       width: 22px;
       height: 22px;
-      .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" style="enable-background:new 0 0 22 22;" xml:space="preserve" fill="@{brandColor}"><style type="text/css">.st0{fill-rule:evenodd;clip-rule:evenodd;}</style><g id="XMLID_5_"><g id="XMLID_24_"><polygon id="XMLID_25_" class="st0" points="19,13 11,13 11,9 15,9 15,5 11,5 11,1 10,1 10,5 6,5 6,9 10,9 10,13 2,13 2,17 10,17 10,21 11,21 11,17 19,17 		"/></g></g></svg>');
+      .encoded-svg-mask('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" style="enable-background:new 0 0 22 22;" xml:space="preserve" fill="@{brandColor}"><style type="text/css">.st0{fill-rule:evenodd;clip-rule:evenodd;}</style><g id="XMLID_5_"><g id="XMLID_24_"><polygon id="XMLID_25_" class="st0" points="19,13 11,13 11,9 15,9 15,5 11,5 11,1 10,1 10,5 6,5 6,9 10,9 10,13 2,13 2,17 10,17 10,21 11,21 11,17 19,17 		"/></g></g></svg>', @brandColor);
     }
 
     &.icon-align-right {
       width: 22px;
       height: 22px;
-      .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" style="enable-background:new 0 0 22 22;" xml:space="preserve" fill="@{brandColor}"><style type="text/css">.st0{fill-rule:evenodd;clip-rule:evenodd;}</style><g id="XMLID_5_"><g id="XMLID_42_"><path id="XMLID_44_" class="st0" d="M20,1v20h1V1H20z M2,17h16v-4H2V17z M10,9h8V5h-8V9z"/></g></g></svg>');
+      .encoded-svg-mask('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" style="enable-background:new 0 0 22 22;" xml:space="preserve" fill="@{brandColor}"><style type="text/css">.st0{fill-rule:evenodd;clip-rule:evenodd;}</style><g id="XMLID_5_"><g id="XMLID_42_"><path id="XMLID_44_" class="st0" d="M20,1v20h1V1H20z M2,17h16v-4H2V17z M10,9h8V5h-8V9z"/></g></g></svg>', @brandColor);
     }
 
     &.icon-align-top {
       width: 22px;
       height: 22px;
-      .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" style="enable-background:new 0 0 22 22;" xml:space="preserve" fill="@{brandColor}"><g><g id="XMLID_35_"><path id="XMLID_36_" d="M1,1v1h20V1H1z M9,4H5v16h4V4z M17,12V4h-4v8H17z"/></g></g></svg>');
+      .encoded-svg-mask('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" style="enable-background:new 0 0 22 22;" xml:space="preserve" fill="@{brandColor}"><g><g id="XMLID_35_"><path id="XMLID_36_" d="M1,1v1h20V1H1z M9,4H5v16h4V4z M17,12V4h-4v8H17z"/></g></g></svg>', @brandColor);
     }
 
     &.icon-align-middle {
       width: 22px;
       height: 22px;
-      .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" style="enable-background:new 0 0 22 22;" xml:space="preserve" fill="@{brandColor}"><style type="text/css">.st0{fill-rule:evenodd;clip-rule:evenodd;}</style><g id="XMLID_5_"><g id="XMLID_24_"><polygon id="XMLID_25_" class="st0" points="13,2 13,10 9,10 9,6 5,6 5,10 1,10 1,11 5,11 5,15 9,15 9,11 13,11 13,19 17,19 17,11 21,11 21,10 17,10 17,2 		"/></g></g></svg>');
+      .encoded-svg-mask('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" style="enable-background:new 0 0 22 22;" xml:space="preserve" fill="@{brandColor}"><style type="text/css">.st0{fill-rule:evenodd;clip-rule:evenodd;}</style><g id="XMLID_5_"><g id="XMLID_24_"><polygon id="XMLID_25_" class="st0" points="13,2 13,10 9,10 9,6 5,6 5,10 1,10 1,11 5,11 5,15 9,15 9,11 13,11 13,19 17,19 17,11 21,11 21,10 17,10 17,2 		"/></g></g></svg>', @brandColor);
     }
 
     &.icon-align-bottom {
       width: 22px;
       height: 22px;
-      .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" style="enable-background:new 0 0 22 22;" xml:space="preserve" fill="@{brandColor}"><g><g id="XMLID_35_"><path id="XMLID_36_" d="M21,20v-1H1v1H21z M9,1H5v16h4V1z M13,9v8h4V9H13z"/></g></g></svg>');
+      .encoded-svg-mask('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" style="enable-background:new 0 0 22 22;" xml:space="preserve" fill="@{brandColor}"><g><g id="XMLID_35_"><path id="XMLID_36_" d="M21,20v-1H1v1H21z M9,1H5v16h4V1z M13,9v8h4V9H13z"/></g></g></svg>', @brandColor);
     }
 
     &.icon-align-horizontal {
       width: 22px;
       height: 22px;
-      .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" style="enable-background:new 0 0 22 22;" xml:space="preserve" fill="@{brandColor}"><g><g id="XMLID_35_"><path id="XMLID_36_" d="M1,1v1h20V1H1z M0.999999,19.0000076V20h20v-0.9999924H0.999999z M9.000001,2.9999995h-4v15h4V2.9999995z M17,13.999999V6.9999986h-3.999999v7.0000005H17z"/></g></g></svg>');
+      .encoded-svg-mask('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" style="enable-background:new 0 0 22 22;" xml:space="preserve" fill="@{brandColor}"><g><g id="XMLID_35_"><path id="XMLID_36_" d="M1,1v1h20V1H1z M0.999999,19.0000076V20h20v-0.9999924H0.999999z M9.000001,2.9999995h-4v15h4V2.9999995z M17,13.999999V6.9999986h-3.999999v7.0000005H17z"/></g></g></svg>', @brandColor);
     }
 
     &.icon-align-vertical {
       width: 22px;
       height: 22px;
-      .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" style="enable-background:new 0 0 22 22;" xml:space="preserve" fill="@{brandColor}"><g><g id="XMLID_35_"><path id="XMLID_36_" d="M0.9999998,21h1v-20h-1V21z M19.0000076,21H20v-20h-0.9999924V21z M2.9999995,12.999999v3.999999h15 v-3.999999H2.9999995z M13.999999,4.999999H6.9999986v4h7.0000005V4.999999z"/></g></g></svg>');
+      .encoded-svg-mask('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" style="enable-background:new 0 0 22 22;" xml:space="preserve" fill="@{brandColor}"><g><g id="XMLID_35_"><path id="XMLID_36_" d="M0.9999998,21h1v-20h-1V21z M19.0000076,21H20v-20h-0.9999924V21z M2.9999995,12.999999v3.999999h15 v-3.999999H2.9999995z M13.999999,4.999999H6.9999986v4h7.0000005V4.999999z"/></g></g></svg>', @brandColor);
     }
 
     // Formats
@@ -382,104 +382,104 @@
     &.icon-format-pdf {
       width: 30px;
       height: 30px;
-      .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="33px" height="33px" viewBox="-3.363 -3.658 33 33" xml:space="preserve"><defs><style>.cls-1{fill:@{brandColor};}</style></defs><path class="cls-1" d="M8.512,14.989c0.8-1.567,1.709-3.334,2.438-5.107l0,0l0.287-0.699  c-0.949-3.616-1.52-6.52-1.011-8.396l0,0C10.362,0.297,10.929,0,11.535,0l0,0l0.368,0.005h0.068c0.83-0.013,1.22,1.042,1.264,1.453  l0,0c0.073,0.684-0.242,1.839-0.242,1.839l0,0c0-0.467,0.018-1.221-0.276-1.873l0,0c-0.343-0.753-0.671-1.203-0.965-1.274l0,0  C11.604,0.25,11.46,0.455,11.411,0.85l0,0c-0.104,0.553-0.134,1.252-0.134,1.611l0,0c0,1.272,0.25,2.952,0.743,4.684l0,0  c0.093-0.269,0.174-0.526,0.24-0.768l0,0c0.101-0.38,0.743-2.9,0.743-2.9l0,0c0,0-0.162,3.354-0.388,4.371l0,0  c-0.049,0.215-0.103,0.427-0.158,0.644l0,0c0.812,2.268,2.121,4.292,3.68,5.75l0,0c0.615,0.575,1.393,1.038,2.128,1.461l0,0  c1.605-0.229,3.084-0.338,4.318-0.324l0,0c1.637,0.021,2.838,0.265,3.324,0.743l0,0c0.237,0.232,0.335,0.514,0.364,0.83l0,0  c0.007,0.122-0.053,0.41-0.069,0.482l0,0c0.018-0.088,0.018-0.519-1.298-0.938l0,0c-1.033-0.33-2.971-0.32-5.295-0.073l0,0  c2.688,1.315,5.308,1.969,6.138,1.577l0,0c0.203-0.1,0.448-0.437,0.448-0.437l0,0c0,0-0.146,0.665-0.252,0.831l0,0  c-0.134,0.18-0.396,0.376-0.646,0.44l0,0c-1.312,0.351-4.722-0.459-7.695-2.158l0,0c-3.322,0.489-6.972,1.394-9.896,2.354l0,0  c-2.874,5.036-5.036,7.35-6.793,6.47l0,0l-0.646-0.325c-0.263-0.149-0.303-0.516-0.242-0.813l0,0  c0.205-1.003,1.462-2.513,3.988-4.021l0,0c0.272-0.165,1.483-0.805,1.483-0.805l0,0c0,0-0.896,0.868-1.106,1.038l0,0  c-2.016,1.652-3.504,3.73-3.467,4.536l0,0l0.007,0.069C2.643,24.936,5.21,21.45,8.512,14.989 M9.559,15.525  c-0.551,1.038-1.09,2.001-1.588,2.886l0,0c2.752-1.153,5.715-1.892,8.535-2.416l0,0c-0.379-0.262-0.746-0.539-1.093-0.832l0,0  c-1.555-1.313-2.737-2.955-3.596-4.681l0,0C11.273,11.948,10.626,13.507,9.559,15.525" /></svg>');
+      .encoded-svg-mask('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="33px" height="33px" viewBox="-3.363 -3.658 33 33" xml:space="preserve"><defs><style>.cls-1{fill:@{brandColor};}</style></defs><path class="cls-1" d="M8.512,14.989c0.8-1.567,1.709-3.334,2.438-5.107l0,0l0.287-0.699  c-0.949-3.616-1.52-6.52-1.011-8.396l0,0C10.362,0.297,10.929,0,11.535,0l0,0l0.368,0.005h0.068c0.83-0.013,1.22,1.042,1.264,1.453  l0,0c0.073,0.684-0.242,1.839-0.242,1.839l0,0c0-0.467,0.018-1.221-0.276-1.873l0,0c-0.343-0.753-0.671-1.203-0.965-1.274l0,0  C11.604,0.25,11.46,0.455,11.411,0.85l0,0c-0.104,0.553-0.134,1.252-0.134,1.611l0,0c0,1.272,0.25,2.952,0.743,4.684l0,0  c0.093-0.269,0.174-0.526,0.24-0.768l0,0c0.101-0.38,0.743-2.9,0.743-2.9l0,0c0,0-0.162,3.354-0.388,4.371l0,0  c-0.049,0.215-0.103,0.427-0.158,0.644l0,0c0.812,2.268,2.121,4.292,3.68,5.75l0,0c0.615,0.575,1.393,1.038,2.128,1.461l0,0  c1.605-0.229,3.084-0.338,4.318-0.324l0,0c1.637,0.021,2.838,0.265,3.324,0.743l0,0c0.237,0.232,0.335,0.514,0.364,0.83l0,0  c0.007,0.122-0.053,0.41-0.069,0.482l0,0c0.018-0.088,0.018-0.519-1.298-0.938l0,0c-1.033-0.33-2.971-0.32-5.295-0.073l0,0  c2.688,1.315,5.308,1.969,6.138,1.577l0,0c0.203-0.1,0.448-0.437,0.448-0.437l0,0c0,0-0.146,0.665-0.252,0.831l0,0  c-0.134,0.18-0.396,0.376-0.646,0.44l0,0c-1.312,0.351-4.722-0.459-7.695-2.158l0,0c-3.322,0.489-6.972,1.394-9.896,2.354l0,0  c-2.874,5.036-5.036,7.35-6.793,6.47l0,0l-0.646-0.325c-0.263-0.149-0.303-0.516-0.242-0.813l0,0  c0.205-1.003,1.462-2.513,3.988-4.021l0,0c0.272-0.165,1.483-0.805,1.483-0.805l0,0c0,0-0.896,0.868-1.106,1.038l0,0  c-2.016,1.652-3.504,3.73-3.467,4.536l0,0l0.007,0.069C2.643,24.936,5.21,21.45,8.512,14.989 M9.559,15.525  c-0.551,1.038-1.09,2.001-1.588,2.886l0,0c2.752-1.153,5.715-1.892,8.535-2.416l0,0c-0.379-0.262-0.746-0.539-1.093-0.832l0,0  c-1.555-1.313-2.737-2.955-3.596-4.681l0,0C11.273,11.948,10.626,13.507,9.559,15.525" /></svg>', @brandColor);
     }
 
     &.icon-format-pdfa {
       width: 30px;
       height: 30px;
-      .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 33 33" height="33px" width="33px" y="0px" x="0px"><defs><style>.cls-1{fill:@{brandColor};}</style></defs><path fill-rule="evenodd" clip-rule="evenodd" d="M11.875 18.648L11.9617 18.4783C12.7401 16.954 13.6102 15.2503 14.312 13.541L14.6 12.841C13.65 9.225 13.08 6.322 13.589 4.445C13.726 3.956 14.293 3.659 14.899 3.659L15.268 3.664H15.336C16.166 3.651 16.556 4.706 16.6 5.117C16.673 5.8 16.357 6.956 16.357 6.956L16.3571 6.87946C16.358 6.40944 16.3594 5.70047 16.081 5.083C15.738 4.33 15.41 3.879 15.116 3.808C14.968 3.907 14.824 4.112 14.774 4.507C14.671 5.06 14.641 5.759 14.641 6.119C14.641 7.391 14.891 9.071 15.384 10.802C15.477 10.534 15.558 10.276 15.624 10.035C15.725 9.655 16.367 7.134 16.367 7.134C16.367 7.134 16.205 10.489 15.979 11.505C15.931 11.72 15.877 11.932 15.821 12.149C16.633 14.417 17.942 16.441 19.501 17.899C19.9467 18.3157 20.4779 18.6735 21.0164 19H29C30.1046 19 31 19.8954 31 21V29C31 30.1046 30.1046 31 29 31H17C15.8954 31 15 30.1046 15 29V21.5492C13.6156 21.9019 12.2807 22.2896 11.07 22.687C8.19599 27.724 6.03499 30.038 4.27699 29.158L3.62999 28.833C3.36699 28.683 3.32699 28.317 3.38799 28.02C3.59299 27.017 4.84999 25.507 7.37599 23.999C7.64799 23.834 8.85899 23.194 8.85899 23.194C8.85899 23.194 7.96299 24.062 7.75299 24.232C5.73699 25.884 4.24899 27.962 4.28599 28.768L4.29299 28.837C6.00499 28.594 8.57299 25.109 11.875 18.648ZM18.775 18.822C18.8461 18.882 18.918 18.9413 18.9906 19H17C15.9681 19 15.1187 19.7815 15.0114 20.785C13.7648 21.146 12.529 21.5689 11.333 22.07C11.831 21.185 12.37 20.222 12.921 19.184C13.989 17.166 14.636 15.607 15.18 14.141C16.038 15.867 17.221 17.508 18.775 18.822ZM21.5553 27.3521H24.4447L24.9995 29H26.7518L23.7581 21.002H22.231L19.2537 29H21.006L21.5553 27.3521ZM23.9998 26.0172H22.0002L22.9945 23.0234L23.9998 26.0172Z" class="cls-1"/></svg>');
+      .encoded-svg-mask('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 33 33" height="33px" width="33px" y="0px" x="0px"><defs><style>.cls-1{fill:@{brandColor};}</style></defs><path fill-rule="evenodd" clip-rule="evenodd" d="M11.875 18.648L11.9617 18.4783C12.7401 16.954 13.6102 15.2503 14.312 13.541L14.6 12.841C13.65 9.225 13.08 6.322 13.589 4.445C13.726 3.956 14.293 3.659 14.899 3.659L15.268 3.664H15.336C16.166 3.651 16.556 4.706 16.6 5.117C16.673 5.8 16.357 6.956 16.357 6.956L16.3571 6.87946C16.358 6.40944 16.3594 5.70047 16.081 5.083C15.738 4.33 15.41 3.879 15.116 3.808C14.968 3.907 14.824 4.112 14.774 4.507C14.671 5.06 14.641 5.759 14.641 6.119C14.641 7.391 14.891 9.071 15.384 10.802C15.477 10.534 15.558 10.276 15.624 10.035C15.725 9.655 16.367 7.134 16.367 7.134C16.367 7.134 16.205 10.489 15.979 11.505C15.931 11.72 15.877 11.932 15.821 12.149C16.633 14.417 17.942 16.441 19.501 17.899C19.9467 18.3157 20.4779 18.6735 21.0164 19H29C30.1046 19 31 19.8954 31 21V29C31 30.1046 30.1046 31 29 31H17C15.8954 31 15 30.1046 15 29V21.5492C13.6156 21.9019 12.2807 22.2896 11.07 22.687C8.19599 27.724 6.03499 30.038 4.27699 29.158L3.62999 28.833C3.36699 28.683 3.32699 28.317 3.38799 28.02C3.59299 27.017 4.84999 25.507 7.37599 23.999C7.64799 23.834 8.85899 23.194 8.85899 23.194C8.85899 23.194 7.96299 24.062 7.75299 24.232C5.73699 25.884 4.24899 27.962 4.28599 28.768L4.29299 28.837C6.00499 28.594 8.57299 25.109 11.875 18.648ZM18.775 18.822C18.8461 18.882 18.918 18.9413 18.9906 19H17C15.9681 19 15.1187 19.7815 15.0114 20.785C13.7648 21.146 12.529 21.5689 11.333 22.07C11.831 21.185 12.37 20.222 12.921 19.184C13.989 17.166 14.636 15.607 15.18 14.141C16.038 15.867 17.221 17.508 18.775 18.822ZM21.5553 27.3521H24.4447L24.9995 29H26.7518L23.7581 21.002H22.231L19.2537 29H21.006L21.5553 27.3521ZM23.9998 26.0172H22.0002L22.9945 23.0234L23.9998 26.0172Z" class="cls-1"/></svg>', @brandColor);
     }
 
     &.icon-format-pptx {
       width: 30px;
       height: 30px;
-      .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="65" height="65" viewBox="19.951 32.432 65.000002 65.000003" xml:space="preserve" ><defs><style>.cls-1{fill:@{brandColor};}</style></defs><path class="cls-1" d="M 51.31066,44.356609 C 47.702785,44.433229 43.9488,45.107 40.5548,44.9445 c -0.149,13.35 -0.123719,26.7115 -0.01172,40.0625 2.476001,0.199 4.9625,0.412 7.4375,0.625 -0.011,-4.888 6.72e-4,-9.776062 0.01367,-14.664062 3.088,0.100999 6.336828,0.300562 9.173828,-1.148438 7.988,-3.913 9.413391,-15.938562 4.025391,-22.476562 -2.8125,-2.544001 -6.274937,-3.062954 -9.882812,-2.986329 z m -0.416016,7.244141 c 1.641035,0.04387 3.222344,0.409844 4.261719,1.855469 1.425,2.45 1.350109,5.676172 0.162109,8.201172 -1.425,2.575 -4.650672,2.325 -7.138672,2.625 -0.262,-4.188 -0.236218,-8.377172 -0.199219,-12.576172 0.923626,-0.04237 1.929442,-0.131789 2.914063,-0.105469 z" /></svg>');
+      .encoded-svg-mask('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="65" height="65" viewBox="19.951 32.432 65.000002 65.000003" xml:space="preserve" ><defs><style>.cls-1{fill:@{brandColor};}</style></defs><path class="cls-1" d="M 51.31066,44.356609 C 47.702785,44.433229 43.9488,45.107 40.5548,44.9445 c -0.149,13.35 -0.123719,26.7115 -0.01172,40.0625 2.476001,0.199 4.9625,0.412 7.4375,0.625 -0.011,-4.888 6.72e-4,-9.776062 0.01367,-14.664062 3.088,0.100999 6.336828,0.300562 9.173828,-1.148438 7.988,-3.913 9.413391,-15.938562 4.025391,-22.476562 -2.8125,-2.544001 -6.274937,-3.062954 -9.882812,-2.986329 z m -0.416016,7.244141 c 1.641035,0.04387 3.222344,0.409844 4.261719,1.855469 1.425,2.45 1.350109,5.676172 0.162109,8.201172 -1.425,2.575 -4.650672,2.325 -7.138672,2.625 -0.262,-4.188 -0.236218,-8.377172 -0.199219,-12.576172 0.923626,-0.04237 1.929442,-0.131789 2.914063,-0.105469 z" /></svg>', @brandColor);
     }
 
     &.icon-format-potx {
       width: 30px;
       height: 30px;
-      .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="33" height="33" viewBox="0 0 33 33"><defs><clipPath id="clip-potx"><rect width="33" height="33"/></clipPath><style>.cls-1{fill:@{brandColor};}</style></defs><g id="potx" clip-path="url(#clip-potx)"><rect id="Rectangle_20" data-name="Rectangle 20" width="33" height="33" fill="none"/><g id="Group_5" data-name="Group 5" transform="translate(16 16)"><path id="Path_44" data-name="Path 44" d="M1.011,0H13.989A1.011,1.011,0,0,1,15,1.011V13.989A1.011,1.011,0,0,1,13.989,15H1.011A1.011,1.011,0,0,1,0,13.989V1.011A1.011,1.011,0,0,1,1.011,0Z" class="cls-1"/><path id="Path_39" data-name="Path 39" d="M5.794,13.25V3.911H9.258V2.25h-9V3.911H3.729V13.25Z" transform="translate(2.742 -0.25)" fill="#fff"/></g><path id="Path_25" data-name="Path 25" d="M412.988,119c-1.658.033-3.382.327-4.94.257-.068,5.822-.057,11.646,0,17.467,1.136.087,2.279.18,3.415.273,0-2.132,0-4.263.006-6.395a8.88,8.88,0,0,0,4.213-.5c3.669-1.707,4.323-6.95,1.85-9.8a6.428,6.428,0,0,0-4.538-1.3Zm-.192,3.159a2.353,2.353,0,0,1,1.956.809,3.776,3.776,0,0,1,.075,3.576c-.655,1.124-2.136,1.014-3.278,1.145-.121-1.826-.108-3.652-.093-5.484C411.881,122.189,412.343,122.15,412.8,122.162Z" transform="translate(-404 -117)" class="cls-1"/></g></svg>');
+      .encoded-svg-mask('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="33" height="33" viewBox="0 0 33 33"><defs><clipPath id="clip-potx"><rect width="33" height="33"/></clipPath><style>.cls-1{fill:@{brandColor};}</style></defs><g id="potx" clip-path="url(#clip-potx)"><rect id="Rectangle_20" data-name="Rectangle 20" width="33" height="33" fill="none"/><g id="Group_5" data-name="Group 5" transform="translate(16 16)"><path id="Path_44" data-name="Path 44" d="M1.011,0H13.989A1.011,1.011,0,0,1,15,1.011V13.989A1.011,1.011,0,0,1,13.989,15H1.011A1.011,1.011,0,0,1,0,13.989V1.011A1.011,1.011,0,0,1,1.011,0Z" class="cls-1"/><path id="Path_39" data-name="Path 39" d="M5.794,13.25V3.911H9.258V2.25h-9V3.911H3.729V13.25Z" transform="translate(2.742 -0.25)" fill="#fff"/></g><path id="Path_25" data-name="Path 25" d="M412.988,119c-1.658.033-3.382.327-4.94.257-.068,5.822-.057,11.646,0,17.467,1.136.087,2.279.18,3.415.273,0-2.132,0-4.263.006-6.395a8.88,8.88,0,0,0,4.213-.5c3.669-1.707,4.323-6.95,1.85-9.8a6.428,6.428,0,0,0-4.538-1.3Zm-.192,3.159a2.353,2.353,0,0,1,1.956.809,3.776,3.776,0,0,1,.075,3.576c-.655,1.124-2.136,1.014-3.278,1.145-.121-1.826-.108-3.652-.093-5.484C411.881,122.189,412.343,122.15,412.8,122.162Z" transform="translate(-404 -117)" class="cls-1"/></g></svg>', @brandColor);
     }
 
     &.icon-format-odp {
       width: 30px;
       height: 30px;
-      .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 -54.11 193.63 193.63" height="193.63px" width="193.63px" y="0px" x="0px" xml:space="preserve"><defs><style>.cls-1{fill:@{brandColor};}</style></defs><path d="M193.16,5.615V5.609c-0.334-0.173-0.671-0.334-1.005-0.497  c-5.356-2.586-11.256-4.287-17.525-4.88c-11.083-1.049-21.673,1.496-30.622,6.678c-6.13-3.477-13.071-5.741-20.542-6.448  c-10.298-0.974-20.17,1.16-28.697,5.629c-0.084,0.044-0.17,0.095-0.251,0.135c-0.207,0.162-0.347,0.414-0.347,0.697  c0,0.492,0.392,0.89,0.889,0.89c0.046,0,0.091-0.007,0.139-0.017c0.021-0.002,0.042-0.011,0.061-0.015  c4.586-0.848,9.368-1.088,14.243-0.627c13.684,1.293,25.609,5.521,33.975,15.011c0.437,0.455,0.822,0.427,1.266-0.024  c10.523-12.2,26.662-17.021,44.006-15.382c0.968,0.094,1.921,0.213,2.871,0.355c0.33,0.05,0.836,0.134,1.133,0.167  c0.572,0.063,0.88-0.397,0.88-0.891C193.629,6.056,193.485,5.776,193.16,5.615L193.16,5.615z" class="cls-1" /><path d="M173.054,48.544c-0.057-0.028-0.107-0.046-0.154-0.065  c-10.518-4.35-22.021-6.758-34.094-6.758c-19.293,0-37.154,6.127-51.757,16.524c-11.146-4.993-23.497-7.776-36.496-7.776  c-18.485,0-35.648,5.617-49.895,15.237c-0.047,0.029-0.095,0.066-0.149,0.104C0.205,66.044,0,66.418,0,66.848  c0,0.729,0.592,1.323,1.323,1.323c0.086,0,0.174-0.013,0.259-0.03c0.058-0.015,0.107-0.027,0.161-0.048  c8.166-2.456,16.832-3.791,25.798-3.791c23.836,0,45.083,5.634,61.08,20.681c0.038,0.028,0.071,0.065,0.111,0.104  c0.232,0.205,0.53,0.325,0.863,0.325c0.412,0,0.774-0.188,1.018-0.486c0.006,0.005,0.515-0.72,0.773-1.069  c16.246-22.217,43.03-33.172,72.845-33.172c2.129,0,4.246,0.08,6.338,0.225c0.602,0.047,1.873,0.144,1.902,0.144  c0.727,0,1.322-0.591,1.322-1.323C173.796,49.203,173.492,48.752,173.054,48.544L173.054,48.544z" class="cls-1" /></svg>');
+      .encoded-svg-mask('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 -54.11 193.63 193.63" height="193.63px" width="193.63px" y="0px" x="0px" xml:space="preserve"><defs><style>.cls-1{fill:@{brandColor};}</style></defs><path d="M193.16,5.615V5.609c-0.334-0.173-0.671-0.334-1.005-0.497  c-5.356-2.586-11.256-4.287-17.525-4.88c-11.083-1.049-21.673,1.496-30.622,6.678c-6.13-3.477-13.071-5.741-20.542-6.448  c-10.298-0.974-20.17,1.16-28.697,5.629c-0.084,0.044-0.17,0.095-0.251,0.135c-0.207,0.162-0.347,0.414-0.347,0.697  c0,0.492,0.392,0.89,0.889,0.89c0.046,0,0.091-0.007,0.139-0.017c0.021-0.002,0.042-0.011,0.061-0.015  c4.586-0.848,9.368-1.088,14.243-0.627c13.684,1.293,25.609,5.521,33.975,15.011c0.437,0.455,0.822,0.427,1.266-0.024  c10.523-12.2,26.662-17.021,44.006-15.382c0.968,0.094,1.921,0.213,2.871,0.355c0.33,0.05,0.836,0.134,1.133,0.167  c0.572,0.063,0.88-0.397,0.88-0.891C193.629,6.056,193.485,5.776,193.16,5.615L193.16,5.615z" class="cls-1" /><path d="M173.054,48.544c-0.057-0.028-0.107-0.046-0.154-0.065  c-10.518-4.35-22.021-6.758-34.094-6.758c-19.293,0-37.154,6.127-51.757,16.524c-11.146-4.993-23.497-7.776-36.496-7.776  c-18.485,0-35.648,5.617-49.895,15.237c-0.047,0.029-0.095,0.066-0.149,0.104C0.205,66.044,0,66.418,0,66.848  c0,0.729,0.592,1.323,1.323,1.323c0.086,0,0.174-0.013,0.259-0.03c0.058-0.015,0.107-0.027,0.161-0.048  c8.166-2.456,16.832-3.791,25.798-3.791c23.836,0,45.083,5.634,61.08,20.681c0.038,0.028,0.071,0.065,0.111,0.104  c0.232,0.205,0.53,0.325,0.863,0.325c0.412,0,0.774-0.188,1.018-0.486c0.006,0.005,0.515-0.72,0.773-1.069  c16.246-22.217,43.03-33.172,72.845-33.172c2.129,0,4.246,0.08,6.338,0.225c0.602,0.047,1.873,0.144,1.902,0.144  c0.727,0,1.322-0.591,1.322-1.323C173.796,49.203,173.492,48.752,173.054,48.544L173.054,48.544z" class="cls-1" /></svg>', @brandColor);
     }
 
     &.icon-format-otp {
       width: 30px;
       height: 30px;
-      .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="33" height="33" viewBox="0 0 33 33"><defs><clipPath id="clip-otp"><rect width="33" height="33"/></clipPath><style>.cls-1{fill:@{brandColor};}</style></defs><g id="otp" clip-path="url(#clip-otp)"><rect id="Rectangle_20" data-name="Rectangle 20" width="33" height="33" fill="none"/><path id="Path_33" data-name="Path 33" d="M125.173,121h0c-.046-.03-.093-.059-.141-.088a6.133,6.133,0,0,0-2.467-.869,6.014,6.014,0,0,0-4.309,1.188,6.223,6.223,0,0,0-2.892-1.147,5.965,5.965,0,0,0-4.039,1l-.036.024a.176.176,0,0,0-.049.125.145.145,0,0,0,.126.158l.019,0a.019.019,0,0,0,.009,0,5.781,5.781,0,0,1,2.005-.111,6.41,6.41,0,0,1,4.782,2.669c.06.081.115.076.178,0a6.288,6.288,0,0,1,6.194-2.735c.136.017.27.038.4.064.047.009.119.024.161.03.08.011.123-.071.123-.159A.155.155,0,0,0,125.173,121Z" transform="translate(-94.24 -116)" class="cls-1"/><path id="Path_34" data-name="Path 34" d="M126.894,125.978a.175.175,0,0,0-.022-.011,11.686,11.686,0,0,0-4.905-1.082,11.924,11.924,0,0,0-7.444,2.647,11.725,11.725,0,0,0-5.251-1.245,11.884,11.884,0,0,0-7.176,2.441.229.229,0,0,0-.022.016.217.217,0,0,0-.073.167.2.2,0,0,0,.191.211.167.167,0,0,0,.037,0,.118.118,0,0,0,.023-.008,11.679,11.679,0,0,1,3.71-.608c3.429,0,6.486.9,8.787,3.315a.093.093,0,0,1,.016.016.172.172,0,0,0,.123.052.18.18,0,0,0,.147-.078s.075-.115.111-.171a12.1,12.1,0,0,1,10.479-5.315c.306,0,.611.014.912.037l.273.022a.2.2,0,0,0,.191-.211A.211.211,0,0,0,126.894,125.978Z" transform="translate(-100 -115.885)" class="cls-1"/><g id="Group_5" data-name="Group 5" transform="translate(16 16)"><path id="Path_44" data-name="Path 44" d="M1.011,0H13.989A1.011,1.011,0,0,1,15,1.011V13.989A1.011,1.011,0,0,1,13.989,15H1.011A1.011,1.011,0,0,1,0,13.989V1.011A1.011,1.011,0,0,1,1.011,0Z" class="cls-1"/><path id="Path_39" data-name="Path 39" d="M5.794,13.25V3.911H9.258V2.25h-9V3.911H3.729V13.25Z" transform="translate(2.742 -0.25)" fill="#fff"/></g></g></svg>');
+      .encoded-svg-mask('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="33" height="33" viewBox="0 0 33 33"><defs><clipPath id="clip-otp"><rect width="33" height="33"/></clipPath><style>.cls-1{fill:@{brandColor};}</style></defs><g id="otp" clip-path="url(#clip-otp)"><rect id="Rectangle_20" data-name="Rectangle 20" width="33" height="33" fill="none"/><path id="Path_33" data-name="Path 33" d="M125.173,121h0c-.046-.03-.093-.059-.141-.088a6.133,6.133,0,0,0-2.467-.869,6.014,6.014,0,0,0-4.309,1.188,6.223,6.223,0,0,0-2.892-1.147,5.965,5.965,0,0,0-4.039,1l-.036.024a.176.176,0,0,0-.049.125.145.145,0,0,0,.126.158l.019,0a.019.019,0,0,0,.009,0,5.781,5.781,0,0,1,2.005-.111,6.41,6.41,0,0,1,4.782,2.669c.06.081.115.076.178,0a6.288,6.288,0,0,1,6.194-2.735c.136.017.27.038.4.064.047.009.119.024.161.03.08.011.123-.071.123-.159A.155.155,0,0,0,125.173,121Z" transform="translate(-94.24 -116)" class="cls-1"/><path id="Path_34" data-name="Path 34" d="M126.894,125.978a.175.175,0,0,0-.022-.011,11.686,11.686,0,0,0-4.905-1.082,11.924,11.924,0,0,0-7.444,2.647,11.725,11.725,0,0,0-5.251-1.245,11.884,11.884,0,0,0-7.176,2.441.229.229,0,0,0-.022.016.217.217,0,0,0-.073.167.2.2,0,0,0,.191.211.167.167,0,0,0,.037,0,.118.118,0,0,0,.023-.008,11.679,11.679,0,0,1,3.71-.608c3.429,0,6.486.9,8.787,3.315a.093.093,0,0,1,.016.016.172.172,0,0,0,.123.052.18.18,0,0,0,.147-.078s.075-.115.111-.171a12.1,12.1,0,0,1,10.479-5.315c.306,0,.611.014.912.037l.273.022a.2.2,0,0,0,.191-.211A.211.211,0,0,0,126.894,125.978Z" transform="translate(-100 -115.885)" class="cls-1"/><g id="Group_5" data-name="Group 5" transform="translate(16 16)"><path id="Path_44" data-name="Path 44" d="M1.011,0H13.989A1.011,1.011,0,0,1,15,1.011V13.989A1.011,1.011,0,0,1,13.989,15H1.011A1.011,1.011,0,0,1,0,13.989V1.011A1.011,1.011,0,0,1,1.011,0Z" class="cls-1"/><path id="Path_39" data-name="Path 39" d="M5.794,13.25V3.911H9.258V2.25h-9V3.911H3.729V13.25Z" transform="translate(2.742 -0.25)" fill="#fff"/></g></g></svg>', @brandColor);
     }
 
     //  Collaboration
     &.icon-users {
       width: 24px;
       height: 24px;
-      .encoded-svg-background('<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M15.5 7C15.5 9.26153 14.9357 10.9518 14.201 12.0307C13.4584 13.121 12.6234 13.5 12 13.5C11.3766 13.5 10.5416 13.121 9.79901 12.0307C9.0643 10.9518 8.5 9.26153 8.5 7C8.5 4.92262 10.2222 3.5 12 3.5C13.7778 3.5 15.5 4.92262 15.5 7ZM14.8461 13.6216C14.006 14.5191 13.0044 15 12 15C10.9956 15 9.99399 14.5191 9.15395 13.6216C7.69714 14.1996 6.4782 14.7725 5.52945 15.3496C3.82884 16.3839 3.5 17.1203 3.5 17.5C3.5 18.0104 3.76355 18.6977 5.04703 19.3409C6.37522 20.0065 8.60909 20.4999 12 20.5C15.3909 20.5 17.6248 20.0065 18.953 19.3409C20.2364 18.6977 20.5 18.0104 20.5 17.5C20.5 17.1203 20.1712 16.3839 18.4705 15.3496C17.5218 14.7725 16.3029 14.1996 14.8461 13.6216ZM15.7544 12.37C16.5137 11.0279 17 9.20917 17 7C17 4 14.5088 2 12 2C9.49121 2 7 4 7 7C7 9.20917 7.48633 11.0279 8.24563 12.37C4.38973 13.9392 2 15.579 2 17.5C2 19.9852 5 21.9999 12 22C19 22 22 19.9852 22 17.5C22 15.579 19.6103 13.9392 15.7544 12.37Z" fill="@{brandColor}"/></svg>');
+      .encoded-svg-mask('<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M15.5 7C15.5 9.26153 14.9357 10.9518 14.201 12.0307C13.4584 13.121 12.6234 13.5 12 13.5C11.3766 13.5 10.5416 13.121 9.79901 12.0307C9.0643 10.9518 8.5 9.26153 8.5 7C8.5 4.92262 10.2222 3.5 12 3.5C13.7778 3.5 15.5 4.92262 15.5 7ZM14.8461 13.6216C14.006 14.5191 13.0044 15 12 15C10.9956 15 9.99399 14.5191 9.15395 13.6216C7.69714 14.1996 6.4782 14.7725 5.52945 15.3496C3.82884 16.3839 3.5 17.1203 3.5 17.5C3.5 18.0104 3.76355 18.6977 5.04703 19.3409C6.37522 20.0065 8.60909 20.4999 12 20.5C15.3909 20.5 17.6248 20.0065 18.953 19.3409C20.2364 18.6977 20.5 18.0104 20.5 17.5C20.5 17.1203 20.1712 16.3839 18.4705 15.3496C17.5218 14.7725 16.3029 14.1996 14.8461 13.6216ZM15.7544 12.37C16.5137 11.0279 17 9.20917 17 7C17 4 14.5088 2 12 2C9.49121 2 7 4 7 7C7 9.20917 7.48633 11.0279 8.24563 12.37C4.38973 13.9392 2 15.579 2 17.5C2 19.9852 5 21.9999 12 22C19 22 22 19.9852 22 17.5C22 15.579 19.6103 13.9392 15.7544 12.37Z" fill="@{brandColor}"/></svg>', @brandColor);
     }
 
     &.icon-app-settings {
       width: 24px;
       height: 24px;
-      .encoded-svg-background('<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M7 14H16C18.2091 14 20 15.7909 20 18C20 20.2091 18.2091 22 16 22H7C4.79086 22 3 20.2091 3 18C3 15.7909 4.79086 14 7 14ZM16 13C18.7614 13 21 15.2386 21 18C21 20.7614 18.7614 23 16 23H7C4.23858 23 2 20.7614 2 18C2 15.2386 4.23858 13 7 13H16Z" fill="@{brandColor}"/><path fill-rule="evenodd" clip-rule="evenodd" d="M16 20C14.8954 20 14 19.1046 14 18C14 16.8954 14.8954 16 16 16C17.1046 16 18 16.8954 18 18C18 19.1046 17.1046 20 16 20ZM16 21C14.3431 21 13 19.6569 13 18C13 16.3431 14.3431 15 16 15C17.6569 15 19 16.3431 19 18C19 19.6569 17.6569 21 16 21Z" fill="@{brandColor}"/><path fill-rule="evenodd" clip-rule="evenodd" d="M16 3H7C4.79086 3 3 4.79086 3 7C3 9.20914 4.79086 11 7 11H16C18.2091 11 20 9.20914 20 7C20 4.79086 18.2091 3 16 3ZM7 2C4.23858 2 2 4.23858 2 7C2 9.76142 4.23858 12 7 12H16C18.7614 12 21 9.76142 21 7C21 4.23858 18.7614 2 16 2H7Z" fill="@{brandColor}"/><path fill-rule="evenodd" clip-rule="evenodd" d="M7 9C8.10457 9 9 8.10457 9 7C9 5.89543 8.10457 5 7 5C5.89543 5 5 5.89543 5 7C5 8.10457 5.89543 9 7 9ZM7 10C8.65685 10 10 8.65685 10 7C10 5.34315 8.65685 4 7 4C5.34315 4 4 5.34315 4 7C4 8.65685 5.34315 10 7 10Z" fill="@{brandColor}"/></svg>');
+      .encoded-svg-mask('<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M7 14H16C18.2091 14 20 15.7909 20 18C20 20.2091 18.2091 22 16 22H7C4.79086 22 3 20.2091 3 18C3 15.7909 4.79086 14 7 14ZM16 13C18.7614 13 21 15.2386 21 18C21 20.7614 18.7614 23 16 23H7C4.23858 23 2 20.7614 2 18C2 15.2386 4.23858 13 7 13H16Z" fill="@{brandColor}"/><path fill-rule="evenodd" clip-rule="evenodd" d="M16 20C14.8954 20 14 19.1046 14 18C14 16.8954 14.8954 16 16 16C17.1046 16 18 16.8954 18 18C18 19.1046 17.1046 20 16 20ZM16 21C14.3431 21 13 19.6569 13 18C13 16.3431 14.3431 15 16 15C17.6569 15 19 16.3431 19 18C19 19.6569 17.6569 21 16 21Z" fill="@{brandColor}"/><path fill-rule="evenodd" clip-rule="evenodd" d="M16 3H7C4.79086 3 3 4.79086 3 7C3 9.20914 4.79086 11 7 11H16C18.2091 11 20 9.20914 20 7C20 4.79086 18.2091 3 16 3ZM7 2C4.23858 2 2 4.23858 2 7C2 9.76142 4.23858 12 7 12H16C18.7614 12 21 9.76142 21 7C21 4.23858 18.7614 2 16 2H7Z" fill="@{brandColor}"/><path fill-rule="evenodd" clip-rule="evenodd" d="M7 9C8.10457 9 9 8.10457 9 7C9 5.89543 8.10457 5 7 5C5.89543 5 5 5.89543 5 7C5 8.10457 5.89543 9 7 9ZM7 10C8.65685 10 10 8.65685 10 7C10 5.34315 8.65685 4 7 4C5.34315 4 4 5.34315 4 7C4 8.65685 5.34315 10 7 10Z" fill="@{brandColor}"/></svg>', @brandColor);
     }
 
     //Comments
     &.icon-menu-comment {
       width: 24px;
       height: 24px;
-      .encoded-svg-background('<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M16.6047 16.5848C17.0078 16.1793 17.4729 15.9766 18 15.9766C18.5271 15.9766 18.9922 16.1793 19.3953 16.5848C19.7984 16.9903 20 17.4581 20 17.9883C20 18.5185 19.7984 18.9864 19.3953 19.3918C18.9922 19.7973 18.5271 20 18 20C17.4729 20 17.0078 19.7973 16.6047 19.3918C16.2016 18.9864 16 18.5185 16 17.9883C16 17.4581 16.2016 16.9903 16.6047 16.5848ZM16.6047 10.5965C17.0078 10.191 17.4729 9.9883 18 9.9883C18.5271 9.9883 18.9922 10.191 19.3953 10.5965C19.7984 11.0019 20 11.4698 20 12C20 12.5302 19.7984 12.9981 19.3953 13.4035C18.9922 13.809 18.5271 14.0117 18 14.0117C17.4729 14.0117 17.0078 13.809 16.6047 13.4035C16.2016 12.9981 16 12.5302 16 12C16 11.4698 16.2016 11.0019 16.6047 10.5965ZM19.3953 7.4152C18.9922 7.82066 18.5271 8.02339 18 8.02339C17.4729 8.02339 17.0078 7.82066 16.6047 7.4152C16.2016 7.00975 16 6.54191 16 6.0117C16 5.48148 16.2016 5.01365 16.6047 4.60819C17.0078 4.20273 17.4729 4 18 4C18.5271 4 18.9922 4.20273 19.3953 4.60819C19.7984 5.01365 20 5.48148 20 6.0117C20 6.54191 19.7984 7.00975 19.3953 7.4152Z" fill="black" fill-opacity="0.6"/></svg>');
+      .encoded-svg-mask('<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M16.6047 16.5848C17.0078 16.1793 17.4729 15.9766 18 15.9766C18.5271 15.9766 18.9922 16.1793 19.3953 16.5848C19.7984 16.9903 20 17.4581 20 17.9883C20 18.5185 19.7984 18.9864 19.3953 19.3918C18.9922 19.7973 18.5271 20 18 20C17.4729 20 17.0078 19.7973 16.6047 19.3918C16.2016 18.9864 16 18.5185 16 17.9883C16 17.4581 16.2016 16.9903 16.6047 16.5848ZM16.6047 10.5965C17.0078 10.191 17.4729 9.9883 18 9.9883C18.5271 9.9883 18.9922 10.191 19.3953 10.5965C19.7984 11.0019 20 11.4698 20 12C20 12.5302 19.7984 12.9981 19.3953 13.4035C18.9922 13.809 18.5271 14.0117 18 14.0117C17.4729 14.0117 17.0078 13.809 16.6047 13.4035C16.2016 12.9981 16 12.5302 16 12C16 11.4698 16.2016 11.0019 16.6047 10.5965ZM19.3953 7.4152C18.9922 7.82066 18.5271 8.02339 18 8.02339C17.4729 8.02339 17.0078 7.82066 16.6047 7.4152C16.2016 7.00975 16 6.54191 16 6.0117C16 5.48148 16.2016 5.01365 16.6047 4.60819C17.0078 4.20273 17.4729 4 18 4C18.5271 4 18.9922 4.20273 19.3953 4.60819C19.7984 5.01365 20 5.48148 20 6.0117C20 6.54191 19.7984 7.00975 19.3953 7.4152Z" fill="black" fill-opacity="0.6"/></svg>', @brandColor);
     }
 
     &.icon-resolve-comment {
       width: 24px;
       height: 24px;
-      .encoded-svg-background('<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9 16.1719L19.5938 5.57812L21 6.98438L9 18.9844L3.42188 13.4062L4.82812 12L9 16.1719Z" fill="black" fill-opacity="0.6"/></svg>');
+      .encoded-svg-mask('<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9 16.1719L19.5938 5.57812L21 6.98438L9 18.9844L3.42188 13.4062L4.82812 12L9 16.1719Z" fill="black" fill-opacity="0.6"/></svg>', @brandColor);
     }
 
     &.icon-resolve-comment.check {
       width: 24px;
       height: 24px;
-      .encoded-svg-background('<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9 16.1719L19.5938 5.57812L21 6.98438L9 18.9844L3.42188 13.4062L4.82812 12L9 16.1719Z" fill="#40865C" fill-opacity="0.6"/></svg>');
+      .encoded-svg-mask('<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9 16.1719L19.5938 5.57812L21 6.98438L9 18.9844L3.42188 13.4062L4.82812 12L9 16.1719Z" fill="#40865C" fill-opacity="0.6"/></svg>', @brandColor);
     }
 
     &.icon-done-comment {
       width: 24px;
       height: 24px;
-      .encoded-svg-background('<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9 16.1719L19.5938 5.57812L21 6.98438L9 18.9844L3.42188 13.4062L4.82812 12L9 16.1719Z" fill="@{brandColor}"/></svg>');
+      .encoded-svg-mask('<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9 16.1719L19.5938 5.57812L21 6.98438L9 18.9844L3.42188 13.4062L4.82812 12L9 16.1719Z" fill="@{brandColor}"/></svg>', @brandColor);
     }
 
     &.icon-insert-comment {
       width: 24px;
       height: 24px;
-      .encoded-svg-background('<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M19.5 3H4.5C3.18908 3 2 4.2153 2 5.50295V15.0346C2 16.3222 3.18908 17.013 4.5 17.013H5.5C5.82773 17.013 6 17.1917 6 17.5136V21L12 17H20C21.1046 17 22 16.1046 22 15V8H20.5V14.5C20.5 15.0523 20.0523 15.5 19.5 15.5H11.5L7.5 18V15.5H4.5C3.94772 15.5 3.5 15.0523 3.5 14.5V5.5C3.5 4.94772 3.94772 4.5 4.5 4.5H19.5C20.0523 4.5 20.5 4.94772 20.5 5.5V8H22V5.50295C22 4.2153 20.8109 3 19.5 3Z" fill="@{brandColor}"/><path d="M6 7.5H18V9H6L6 7.5Z" fill="@{brandColor}"/><path d="M6 11H18V12.5H6V11Z" fill="@{brandColor}"/></svg>');
+      .encoded-svg-mask('<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M19.5 3H4.5C3.18908 3 2 4.2153 2 5.50295V15.0346C2 16.3222 3.18908 17.013 4.5 17.013H5.5C5.82773 17.013 6 17.1917 6 17.5136V21L12 17H20C21.1046 17 22 16.1046 22 15V8H20.5V14.5C20.5 15.0523 20.0523 15.5 19.5 15.5H11.5L7.5 18V15.5H4.5C3.94772 15.5 3.5 15.0523 3.5 14.5V5.5C3.5 4.94772 3.94772 4.5 4.5 4.5H19.5C20.0523 4.5 20.5 4.94772 20.5 5.5V8H22V5.50295C22 4.2153 20.8109 3 19.5 3Z" fill="@{brandColor}"/><path d="M6 7.5H18V9H6L6 7.5Z" fill="@{brandColor}"/><path d="M6 11H18V12.5H6V11Z" fill="@{brandColor}"/></svg>', @brandColor);
     }
 
     &.icon-done-comment-white {
       width: 24px;
       height: 24px;
-      .encoded-svg-background('<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9 16.1719L19.5938 5.57812L21 6.98438L9 18.9844L3.42188 13.4062L4.82812 12L9 16.1719Z" fill="#FFFFFF"/></svg>');
+      .encoded-svg-mask('<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9 16.1719L19.5938 5.57812L21 6.98438L9 18.9844L3.42188 13.4062L4.82812 12L9 16.1719Z" fill="#FFFFFF"/></svg>', @brandColor);
     }
 
     &.icon-add-table {
       width: 24px;
       height: 24px;
-      .encoded-svg-background('<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4 5.59961H11.2V8.79961H4V5.59961Z" fill="@{brandColor}"/><path d="M12.8 5.59961H20V8.79961H12.8V5.59961Z" fill="@{brandColor}"/><path d="M4 10.3996H11.2V13.5996H4V10.3996Z" fill="@{brandColor}"/><path d="M12.8 10.3996H20V13.5996H12.8V10.3996Z" fill="@{brandColor}"/><path d="M4 15.1996H11.2V18.3996H4V15.1996Z" fill="@{brandColor}"/><path d="M12.8 15.1996H20V18.3996H12.8V15.1996Z" fill="@{brandColor}"/></svg>');
+      .encoded-svg-mask('<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4 5.59961H11.2V8.79961H4V5.59961Z" fill="@{brandColor}"/><path d="M12.8 5.59961H20V8.79961H12.8V5.59961Z" fill="@{brandColor}"/><path d="M4 10.3996H11.2V13.5996H4V10.3996Z" fill="@{brandColor}"/><path d="M12.8 10.3996H20V13.5996H12.8V10.3996Z" fill="@{brandColor}"/><path d="M4 15.1996H11.2V18.3996H4V15.1996Z" fill="@{brandColor}"/><path d="M12.8 15.1996H20V18.3996H12.8V15.1996Z" fill="@{brandColor}"/></svg>', @brandColor);
     }
 
     &.icon-link {
       width: 24px;
       height: 24px;
-      .encoded-svg-background('<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M17.0235 7C18.4006 7 19.5743 7.49845 20.5446 8.49534C21.5149 9.46108 22 10.6293 22 12C22 13.3708 21.5149 14.5546 20.5446 15.5515C19.5743 16.5172 18.4006 17.0001 17.0235 17.0001H13V15H17C17.8451 15 18.5884 14.7882 19.1831 14.1963C19.8091 13.5733 20 12.8411 20 12C20 11.1589 19.8091 10.4424 19.1831 9.85049C18.5884 9.22743 17.8685 9 17.0235 9H13V7H17.0235ZM8.00939 12.9814V11.0187H15.9906V12.9814H8.00939ZM4.76995 9.85049C4.17527 10.4424 4 11.1589 4 12C4 12.8411 4.17527 13.5733 4.76995 14.1963C5.39593 14.7882 6.15493 15 7 15H11.0141V17.0001H6.97653C5.59937 17.0001 4.42567 16.5172 3.4554 15.5515C2.48513 14.5546 2 13.3708 2 12C2 10.6293 2.48513 9.46108 3.4554 8.49534C4.42567 7.49845 5.59937 7 6.97653 7H11.0141V9H6.97653C6.13146 9 5.39593 9.22743 4.76995 9.85049Z" fill="@{brandColor}"/></svg>');
+      .encoded-svg-mask('<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M17.0235 7C18.4006 7 19.5743 7.49845 20.5446 8.49534C21.5149 9.46108 22 10.6293 22 12C22 13.3708 21.5149 14.5546 20.5446 15.5515C19.5743 16.5172 18.4006 17.0001 17.0235 17.0001H13V15H17C17.8451 15 18.5884 14.7882 19.1831 14.1963C19.8091 13.5733 20 12.8411 20 12C20 11.1589 19.8091 10.4424 19.1831 9.85049C18.5884 9.22743 17.8685 9 17.0235 9H13V7H17.0235ZM8.00939 12.9814V11.0187H15.9906V12.9814H8.00939ZM4.76995 9.85049C4.17527 10.4424 4 11.1589 4 12C4 12.8411 4.17527 13.5733 4.76995 14.1963C5.39593 14.7882 6.15493 15 7 15H11.0141V17.0001H6.97653C5.59937 17.0001 4.42567 16.5172 3.4554 15.5515C2.48513 14.5546 2 13.3708 2 12C2 10.6293 2.48513 9.46108 3.4554 8.49534C4.42567 7.49845 5.59937 7 6.97653 7H11.0141V9H6.97653C6.13146 9 5.39593 9.22743 4.76995 9.85049Z" fill="@{brandColor}"/></svg>', @brandColor);
     }
     &.icon-plus {
       width: 22px;
       height: 22px;
-      .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{navBarIconColor}"><g><path d="M21,12h-9v9h-2v-9H1v-2h9V1h2v9h9V12z"/></g></svg>');
+      .encoded-svg-mask('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{navBarIconColor}"><g><path d="M21,12h-9v9h-2v-9H1v-2h9V1h2v9h9V12z"/></g></svg>', @navBarIconColor);
     }
   }
 
@@ -495,91 +495,91 @@
       &.icon-undo {
         width: 22px;
         height: 22px;
-        .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{navBarIconColor}"><g><path d="M20,17v-2c0-1.7-1.3-3-3-3H3.7l3.4,3.4l-1.4,1.4l-5.2-5.2L0,11l0.5-0.6l5.2-5.2l1.4,1.4L3.7,10H17c2.8,0,5,2.2,5,5v2H20z"/></g></svg>');
+        .encoded-svg-mask('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{navBarIconColor}"><g><path d="M20,17v-2c0-1.7-1.3-3-3-3H3.7l3.4,3.4l-1.4,1.4l-5.2-5.2L0,11l0.5-0.6l5.2-5.2l1.4,1.4L3.7,10H17c2.8,0,5,2.2,5,5v2H20z"/></g></svg>', @navBarIconColor);
       }
 
       &.icon-redo {
         width: 22px;
         height: 22px;
-        .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{navBarIconColor}"><g><path d="M0,17v-2c0-2.8,2.2-5,5-5h13.3l-3.4-3.4l1.4-1.4l5.2,5.2L22,11l-0.5,0.6l-5.2,5.2l-1.4-1.4l3.4-3.4H5c-1.7,0-3,1.3-3,3v2H0z"/></g></svg>');
+        .encoded-svg-mask('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{navBarIconColor}"><g><path d="M0,17v-2c0-2.8,2.2-5,5-5h13.3l-3.4-3.4l1.4-1.4l5.2,5.2L22,11l-0.5,0.6l-5.2,5.2l-1.4-1.4l3.4-3.4H5c-1.7,0-3,1.3-3,3v2H0z"/></g></svg>', @navBarIconColor);
       }
 
       &.icon-search {
         width: 22px;
         height: 22px;
-        .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{navBarIconColor}"><g><path d="M19.5,16.8L16,13.3c0.7-1.1,1.1-2.4,1.1-3.8C17,5.4,13.6,2,9.5,2S2,5.4,2,9.5S5.4,17,9.5,17c1.4,0,2.7-0.4,3.8-1.1l3.5,3.5c0.7,0.7,1.9,0.7,2.6,0C20.2,18.7,20.2,17.6,19.5,16.8z M9.5,15.3c-3.2,0-5.8-2.6-5.8-5.8s2.6-5.8,5.8-5.8s5.8,2.6,5.8,5.8S12.7,15.3,9.5,15.3z"/></g></svg>');
+        .encoded-svg-mask('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{navBarIconColor}"><g><path d="M19.5,16.8L16,13.3c0.7-1.1,1.1-2.4,1.1-3.8C17,5.4,13.6,2,9.5,2S2,5.4,2,9.5S5.4,17,9.5,17c1.4,0,2.7-0.4,3.8-1.1l3.5,3.5c0.7,0.7,1.9,0.7,2.6,0C20.2,18.7,20.2,17.6,19.5,16.8z M9.5,15.3c-3.2,0-5.8-2.6-5.8-5.8s2.6-5.8,5.8-5.8s5.8,2.6,5.8,5.8S12.7,15.3,9.5,15.3z"/></g></svg>', @navBarIconColor);
       }
 
       &.icon-burger {
         width: 22px;
         height: 22px;
-        .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="-8 1 22 22" fill="@{navBarIconColor}"><g><path d="M-6,6v2h18V6H-6z M-6,13h18v-2H-6V13z M-6,18h18v-2H-6V18z"/></g></svg>');
+        .encoded-svg-mask('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="-8 1 22 22" fill="@{navBarIconColor}"><g><path d="M-6,6v2h18V6H-6z M-6,13h18v-2H-6V13z M-6,18h18v-2H-6V18z"/></g></svg>', @navBarIconColor);
       }
 
       &.icon-plus {
         width: 22px;
         height: 22px;
-        .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{navBarIconColor}"><g><path d="M21,12h-9v9h-2v-9H1v-2h9V1h2v9h9V12z"/></g></svg>');
+        .encoded-svg-mask('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{navBarIconColor}"><g><path d="M21,12h-9v9h-2v-9H1v-2h9V1h2v9h9V12z"/></g></svg>', @navBarIconColor);
       }
 
       &.icon-play {
         width: 22px;
         height: 22px;
-        .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{navBarIconColor}"><g><path d="M4.0464363,2.9884553c0.006526,0.00296,0.0142345,0.006835,0.0231438,0.0119021 c0.5908604,0.3357637,12.7118397,7.2924433,13.8977489,8.0268402c-0.5831585,0.3417759-13.0137587,7.4879274-13.934659,7.9826727 L4.0464363,2.9884553 M3.9889357,2C3.4427795,2.0000577,3.000525,2.4533575,3.000525,3.015348	c0,0.573487,0,15.1632957,0,15.9945221C3.000525,19.622963,3.4796104,20,3.9940588,20 c0.1729372,0,0.3499191-0.0426311,0.5139763-0.1332226c0.8905602-0.491045,13.1880894-7.5583372,13.9407387-7.9994459 c0.6751213-0.3955202,0.6867313-1.337512,0-1.7326603C17.4031754,9.5333271,5.1523852,2.501852,4.5393953,2.1535165 C4.3526201,2.0472794,4.165401,1.9999813,3.9889357,2L3.9889357,2z"/></g></svg>');
+        .encoded-svg-mask('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{navBarIconColor}"><g><path d="M4.0464363,2.9884553c0.006526,0.00296,0.0142345,0.006835,0.0231438,0.0119021 c0.5908604,0.3357637,12.7118397,7.2924433,13.8977489,8.0268402c-0.5831585,0.3417759-13.0137587,7.4879274-13.934659,7.9826727 L4.0464363,2.9884553 M3.9889357,2C3.4427795,2.0000577,3.000525,2.4533575,3.000525,3.015348	c0,0.573487,0,15.1632957,0,15.9945221C3.000525,19.622963,3.4796104,20,3.9940588,20 c0.1729372,0,0.3499191-0.0426311,0.5139763-0.1332226c0.8905602-0.491045,13.1880894-7.5583372,13.9407387-7.9994459 c0.6751213-0.3955202,0.6867313-1.337512,0-1.7326603C17.4031754,9.5333271,5.1523852,2.501852,4.5393953,2.1535165 C4.3526201,2.0472794,4.165401,1.9999813,3.9889357,2L3.9889357,2z"/></g></svg>', @navBarIconColor);
       }
 
       &.icon-settings {
         width: 22px;
         height: 22px;
-        .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{navBarIconColor}"><g><path d="M12.1,2H9.9C9.6,2,9.4,2.2,9.3,2.5L8.8,4.9c0,0.2-0.2,0.3-0.3,0.3s-0.1,0-0.2-0.1L6.2,3.8C6.1,3.7,6,3.7,5.8,3.7c-0.1,0-0.3,0-0.4,0.1L3.8,5.4c-0.1,0.2-0.2,0.5,0,0.8l1.3,2.1c0.1,0.2,0.1,0.4-0.2,0.5L2.5,9.3C2.2,9.4,2,9.6,2,9.9v2.2c0,0.3,0.2,0.5,0.5,0.6l2.4,0.5c0.3,0.1,0.4,0.3,0.2,0.5l-1.3,2.1c-0.2,0.2-0.1,0.6,0.1,0.8l1.6,1.6c0.1,0.1,0.3,0.2,0.4,0.2s0.2,0,0.3-0.1L8.3,17c0.1-0.1,0.1-0.1,0.2-0.1s0.3,0.1,0.3,0.3l0.5,2.3C9.4,19.8,9.6,20,9.9,20h2.2c0.3,0,0.5-0.2,0.6-0.5l0.5-2.4c0-0.2,0.1-0.3,0.3-0.3c0.1,0,0.1,0,0.2,0.1l2.1,1.3c0.1,0.1,0.2,0.1,0.3,0.1c0.2,0,0.3-0.1,0.4-0.2l1.6-1.6c0.2-0.2,0.2-0.5,0.1-0.8l-1.3-2.1c-0.2-0.2-0.1-0.5,0.2-0.5l2.4-0.5c0.3-0.1,0.5-0.3,0.5-0.6V9.8c0-0.3-0.2-0.5-0.5-0.6l-2.4-0.5c-0.3-0.1-0.4-0.3-0.2-0.5l1.3-2.1c0.2-0.2,0.1-0.6-0.1-0.8l-1.6-1.6c-0.1-0.1-0.3-0.2-0.4-0.2s-0.2,0-0.3,0.1l-2.1,1.3C13.6,5,13.6,5,13.5,5s-0.3-0.1-0.3-0.3l-0.5-2.2C12.6,2.2,12.4,2,12.1,2L12.1,2z M11,14.5c-1.9,0-3.5-1.6-3.5-3.5S9.1,7.5,11,7.5s3.5,1.6,3.5,3.5S12.9,14.5,11,14.5L11,14.5z"/></g></svg>');
+        .encoded-svg-mask('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{navBarIconColor}"><g><path d="M12.1,2H9.9C9.6,2,9.4,2.2,9.3,2.5L8.8,4.9c0,0.2-0.2,0.3-0.3,0.3s-0.1,0-0.2-0.1L6.2,3.8C6.1,3.7,6,3.7,5.8,3.7c-0.1,0-0.3,0-0.4,0.1L3.8,5.4c-0.1,0.2-0.2,0.5,0,0.8l1.3,2.1c0.1,0.2,0.1,0.4-0.2,0.5L2.5,9.3C2.2,9.4,2,9.6,2,9.9v2.2c0,0.3,0.2,0.5,0.5,0.6l2.4,0.5c0.3,0.1,0.4,0.3,0.2,0.5l-1.3,2.1c-0.2,0.2-0.1,0.6,0.1,0.8l1.6,1.6c0.1,0.1,0.3,0.2,0.4,0.2s0.2,0,0.3-0.1L8.3,17c0.1-0.1,0.1-0.1,0.2-0.1s0.3,0.1,0.3,0.3l0.5,2.3C9.4,19.8,9.6,20,9.9,20h2.2c0.3,0,0.5-0.2,0.6-0.5l0.5-2.4c0-0.2,0.1-0.3,0.3-0.3c0.1,0,0.1,0,0.2,0.1l2.1,1.3c0.1,0.1,0.2,0.1,0.3,0.1c0.2,0,0.3-0.1,0.4-0.2l1.6-1.6c0.2-0.2,0.2-0.5,0.1-0.8l-1.3-2.1c-0.2-0.2-0.1-0.5,0.2-0.5l2.4-0.5c0.3-0.1,0.5-0.3,0.5-0.6V9.8c0-0.3-0.2-0.5-0.5-0.6l-2.4-0.5c-0.3-0.1-0.4-0.3-0.2-0.5l1.3-2.1c0.2-0.2,0.1-0.6-0.1-0.8l-1.6-1.6c-0.1-0.1-0.3-0.2-0.4-0.2s-0.2,0-0.3,0.1l-2.1,1.3C13.6,5,13.6,5,13.5,5s-0.3-0.1-0.3-0.3l-0.5-2.2C12.6,2.2,12.4,2,12.1,2L12.1,2z M11,14.5c-1.9,0-3.5-1.6-3.5-3.5S9.1,7.5,11,7.5s3.5,1.6,3.5,3.5S12.9,14.5,11,14.5L11,14.5z"/></g></svg>', @navBarIconColor);
       }
 
       &.icon-prev {
         width: 20px;
         height: 20px;
-        .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{navBarIconColor}"><g><polygon points="5.1,10.9 13.9,2 16,4.1 9.2,11.1 16,17.9 13.9,20 5.1,11.2 5,11.1 "/></g></svg>');
+        .encoded-svg-mask('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{navBarIconColor}"><g><polygon points="5.1,10.9 13.9,2 16,4.1 9.2,11.1 16,17.9 13.9,20 5.1,11.2 5,11.1 "/></g></svg>', @navBarIconColor);
       }
 
       &.icon-next {
         width: 20px;
         height: 20px;
-        .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{navBarIconColor}"><g><polygon points="16.9,10.9 8.1,2 6,4.1 12.8,11.1 6,17.9 8.1,20 16.9,11.2 17,11.1 "/></g></svg>');
+        .encoded-svg-mask('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{navBarIconColor}"><g><polygon points="16.9,10.9 8.1,2 6,4.1 12.8,11.1 6,17.9 8.1,20 16.9,11.2 17,11.1 "/></g></svg>', @navBarIconColor);
       }
 
       &.icon-expand-down {
         width: 22px;
         height: 22px;
-        .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{navBarIconColor}"><g><polygon points="10.9,16.9 2,8.1 4.1,6 11.1,12.8 17.9,6 20,8.1 11.2,16.9 11.1,17 "/></g></svg>');
+        .encoded-svg-mask('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{navBarIconColor}"><g><polygon points="10.9,16.9 2,8.1 4.1,6 11.1,12.8 17.9,6 20,8.1 11.2,16.9 11.1,17 "/></g></svg>', @navBarIconColor);
       }
 
       &.icon-add-slide {
         width: 24px;
         height: 24px;
-        .encoded-svg-background('<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M2 4C2 2.89543 2.89543 2 4 2H20C21.1046 2 22 2.89543 22 4V20C22 21.1046 21.1046 22 20 22H4C2.89543 22 2 21.1046 2 20V4ZM11 11V7.00001H13V11H17V13H13V17H11V13H7V11H11Z" fill="@{navBarIconColor}"/></svg>');
+        .encoded-svg-mask('<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M2 4C2 2.89543 2.89543 2 4 2H20C21.1046 2 22 2.89543 22 4V20C22 21.1046 21.1046 22 20 22H4C2.89543 22 2 21.1046 2 20V4ZM11 11V7.00001H13V11H17V13H13V17H11V13H7V11H11Z" fill="@{navBarIconColor}"/></svg>', @navBarIconColor);
       }
 
       &.icon-add-shape {
         width: 24px;
         height: 24px;
-        .encoded-svg-background('<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="16" cy="15" r="7" fill="@{navBarIconColor}"/><path fill-rule="evenodd" clip-rule="evenodd" d="M3 3C2.44772 3 2 3.44772 2 4V17C2 17.5523 2.44772 18 3 18H8.58152C8.20651 17.0736 8 16.0609 8 15C8 10.5817 11.5817 7 16 7C16.6906 7 17.3608 7.08751 18 7.25204V4C18 3.44772 17.5523 3 17 3H3Z" fill="@{navBarIconColor}"/></svg>');
+        .encoded-svg-mask('<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="16" cy="15" r="7" fill="@{navBarIconColor}"/><path fill-rule="evenodd" clip-rule="evenodd" d="M3 3C2.44772 3 2 3.44772 2 4V17C2 17.5523 2.44772 18 3 18H8.58152C8.20651 17.0736 8 16.0609 8 15C8 10.5817 11.5817 7 16 7C16.6906 7 17.3608 7.08751 18 7.25204V4C18 3.44772 17.5523 3 17 3H3Z" fill="@{navBarIconColor}"/></svg>', @navBarIconColor);
       }
 
       &.icon-add-image {
         width: 24px;
         height: 24px;
-        .encoded-svg-background('<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0)"><path fill-rule="evenodd" clip-rule="evenodd" d="M4.23958 18L8.09375 13.5L10.9062 16.5L14.7604 12L19.7604 18H4.23958ZM21.3229 20.3906C21.7743 19.9844 22 19.5156 22 18.9844V5.01562C22 4.48438 21.7743 4.01562 21.3229 3.60938C20.8715 3.20313 20.3507 3 19.7604 3H4.23958C3.64931 3 3.12847 3.20313 2.67708 3.60938C2.22569 4.01562 2 4.48438 2 5.01562V18.9844C2 19.5156 2.22569 19.9844 2.67708 20.3906C3.12847 20.7969 3.64931 21 4.23958 21H19.7604C20.3507 21 20.8715 20.7969 21.3229 20.3906ZM8 11C9.10457 11 10 10.1046 10 9C10 7.89543 9.10457 7 8 7C6.89543 7 6 7.89543 6 9C6 10.1046 6.89543 11 8 11Z" fill="@{navBarIconColor}"/></g><defs><clipPath id="clip0"><path d="M0.000477791 0H24.0005V24H0.000477791V0Z" fill="transparent"/></clipPath></defs></svg>');
+        .encoded-svg-mask('<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0)"><path fill-rule="evenodd" clip-rule="evenodd" d="M4.23958 18L8.09375 13.5L10.9062 16.5L14.7604 12L19.7604 18H4.23958ZM21.3229 20.3906C21.7743 19.9844 22 19.5156 22 18.9844V5.01562C22 4.48438 21.7743 4.01562 21.3229 3.60938C20.8715 3.20313 20.3507 3 19.7604 3H4.23958C3.64931 3 3.12847 3.20313 2.67708 3.60938C2.22569 4.01562 2 4.48438 2 5.01562V18.9844C2 19.5156 2.22569 19.9844 2.67708 20.3906C3.12847 20.7969 3.64931 21 4.23958 21H19.7604C20.3507 21 20.8715 20.7969 21.3229 20.3906ZM8 11C9.10457 11 10 10.1046 10 9C10 7.89543 9.10457 7 8 7C6.89543 7 6 7.89543 6 9C6 10.1046 6.89543 11 8 11Z" fill="@{navBarIconColor}"/></g><defs><clipPath id="clip0"><path d="M0.000477791 0H24.0005V24H0.000477791V0Z" fill="transparent"/></clipPath></defs></svg>', @navBarIconColor);
       }
 
       &.icon-add-other {
         width: 24px;
         height: 24px;
-        .encoded-svg-background('<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M7 12C7 13.6569 5.65685 15 4 15C2.34315 15 1 13.6569 1 12C1 10.3431 2.34315 9 4 9C5.65685 9 7 10.3431 7 12ZM15 12C15 13.6569 13.6569 15 12 15C10.3431 15 9 13.6569 9 12C9 10.3431 10.3431 9 12 9C13.6569 9 15 10.3431 15 12ZM20 15C21.6569 15 23 13.6569 23 12C23 10.3431 21.6569 9 20 9C18.3431 9 17 10.3431 17 12C17 13.6569 18.3431 15 20 15Z" fill="@{navBarIconColor}"/></svg>');
+        .encoded-svg-mask('<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M7 12C7 13.6569 5.65685 15 4 15C2.34315 15 1 13.6569 1 12C1 10.3431 2.34315 9 4 9C5.65685 9 7 10.3431 7 12ZM15 12C15 13.6569 13.6569 15 12 15C10.3431 15 9 13.6569 9 12C9 10.3431 10.3431 9 12 9C13.6569 9 15 10.3431 15 12ZM20 15C21.6569 15 23 13.6569 23 12C23 10.3431 21.6569 9 20 9C18.3431 9 17 10.3431 17 12C17 13.6569 18.3431 15 20 15Z" fill="@{navBarIconColor}"/></svg>', @navBarIconColor);
       }
 
       &.icon-close-comment {
         width: 24px;
         height: 24px;
-        .encoded-svg-background('<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M18.9844 6.42188L13.4062 12L18.9844 17.5781L17.5781 18.9844L12 13.4062L6.42188 18.9844L5.01562 17.5781L10.5938 12L5.01562 6.42188L6.42188 5.01562L12 10.5938L17.5781 5.01562L18.9844 6.42188Z" fill="@{navBarIconColor}"/></svg>');
+        .encoded-svg-mask('<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M18.9844 6.42188L13.4062 12L18.9844 17.5781L17.5781 18.9844L12 13.4062L6.42188 18.9844L5.01562 17.5781L10.5938 12L5.01562 6.42188L6.42188 5.01562L12 10.5938L17.5781 5.01562L18.9844 6.42188Z" fill="@{navBarIconColor}"/></svg>', @navBarIconColor);
       }
     }
   }