From 45593c0e269fde5f74c76e63787361c70930466c Mon Sep 17 00:00:00 2001
From: Alexander Yuzhin <alexander.yuzhin@onlyoffice.com>
Date: Tue, 15 Nov 2016 15:32:11 +0300
Subject: [PATCH] [DE mobile] Less to modules

---
 .../common/mobile/resources/less/_mixins.less |   6 +
 .../mobile/resources/less/ios/_about.less     |  45 ++
 .../mobile/resources/less/ios/_button.less    |   8 +
 .../resources/less/ios/_color-palette.less    |  48 ++
 .../mobile/resources/less/ios/_container.less |  76 +++
 .../resources/less/ios/_contextmenu.less      |  88 +++
 .../mobile/resources/less/ios/_dataview.less  |  34 +
 .../mobile/resources/less/ios/_listview.less  |  86 +++
 .../resources/less/material/_about.less       |  45 ++
 .../resources/less/material/_button.less      |   9 +
 .../less/material/_color-palette.less         |  48 ++
 .../resources/less/material/_container.less   |  72 ++
 .../resources/less/material/_contextmenu.less |  20 +
 .../resources/less/material/_dataview.less    |  31 +
 .../resources/less/material/_listview.less    |  68 ++
 .../mobile/resources/css/app-ios.css          | 399 +++++++-----
 .../mobile/resources/css/app-material.css     | 261 ++++----
 .../mobile/resources/less/app-ios.less        | 613 +-----------------
 .../mobile/resources/less/app-material.less   | 534 +--------------
 .../mobile/resources/less/ios/_icons.less     | 198 ++++++
 .../mobile/resources/less/ios/_search.less    | 107 +++
 .../resources/less/material/_icons.less       | 224 +++++++
 .../resources/less/material/_search.less      |   0
 23 files changed, 1587 insertions(+), 1433 deletions(-)
 create mode 100644 apps/common/mobile/resources/less/_mixins.less
 create mode 100644 apps/common/mobile/resources/less/ios/_about.less
 create mode 100644 apps/common/mobile/resources/less/ios/_button.less
 create mode 100644 apps/common/mobile/resources/less/ios/_color-palette.less
 create mode 100644 apps/common/mobile/resources/less/ios/_container.less
 create mode 100644 apps/common/mobile/resources/less/ios/_contextmenu.less
 create mode 100644 apps/common/mobile/resources/less/ios/_dataview.less
 create mode 100644 apps/common/mobile/resources/less/ios/_listview.less
 create mode 100644 apps/common/mobile/resources/less/material/_about.less
 create mode 100644 apps/common/mobile/resources/less/material/_button.less
 create mode 100644 apps/common/mobile/resources/less/material/_color-palette.less
 create mode 100644 apps/common/mobile/resources/less/material/_container.less
 create mode 100644 apps/common/mobile/resources/less/material/_contextmenu.less
 create mode 100644 apps/common/mobile/resources/less/material/_dataview.less
 create mode 100644 apps/common/mobile/resources/less/material/_listview.less
 create mode 100644 apps/documenteditor/mobile/resources/less/ios/_icons.less
 create mode 100644 apps/documenteditor/mobile/resources/less/ios/_search.less
 create mode 100644 apps/documenteditor/mobile/resources/less/material/_icons.less
 create mode 100644 apps/documenteditor/mobile/resources/less/material/_search.less

diff --git a/apps/common/mobile/resources/less/_mixins.less b/apps/common/mobile/resources/less/_mixins.less
new file mode 100644
index 000000000..9e206f133
--- /dev/null
+++ b/apps/common/mobile/resources/less/_mixins.less
@@ -0,0 +1,6 @@
+// Encoded SVG Background
+.encoded-svg-mask(@svg) {
+  @url: `encodeURIComponent(@{svg})`;
+  background-color: @themeColor;
+  -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,@{url}");
+}
\ No newline at end of file
diff --git a/apps/common/mobile/resources/less/ios/_about.less b/apps/common/mobile/resources/less/ios/_about.less
new file mode 100644
index 000000000..fd808f139
--- /dev/null
+++ b/apps/common/mobile/resources/less/ios/_about.less
@@ -0,0 +1,45 @@
+// About
+.about {
+  .page-content {
+    text-align: center;
+  }
+
+  .content-block:first-child {
+    margin: 15px 0;
+  }
+
+  .content-block {
+    margin: 0 auto 15px;
+
+    a {
+      color: #000;
+    }
+  }
+
+  h3 {
+    font-weight: normal;
+    margin: 0;
+
+    &.vendor {
+      color: #000;
+      font-weight: bold;
+      margin-top: 15px;
+    }
+  }
+
+  p > label {
+    margin-right: 5px;
+  }
+
+  .logo {
+    background-image: url('../../../../common/mobile/resources/img/about/onlyoffice.png');
+
+    @media
+    only screen and (-webkit-min-device-pixel-ratio: 2),
+    only screen and (min-resolution: 2dppx),
+    only screen and (min-resolution: 192dpi) {
+      background-image: url('../../../../common/mobile/resources/img/about/onlyoffice@2x.png');
+      background-size: auto;
+    }
+  }
+}
\ No newline at end of file
diff --git a/apps/common/mobile/resources/less/ios/_button.less b/apps/common/mobile/resources/less/ios/_button.less
new file mode 100644
index 000000000..da6c4d105
--- /dev/null
+++ b/apps/common/mobile/resources/less/ios/_button.less
@@ -0,0 +1,8 @@
+// Active button icon color
+.button {
+  &.active {
+    i.icon {
+      background-color: #fff;
+    }
+  }
+}
\ No newline at end of file
diff --git a/apps/common/mobile/resources/less/ios/_color-palette.less b/apps/common/mobile/resources/less/ios/_color-palette.less
new file mode 100644
index 000000000..735003d49
--- /dev/null
+++ b/apps/common/mobile/resources/less/ios/_color-palette.less
@@ -0,0 +1,48 @@
+// Color palette
+
+.color-palette {
+  a {
+    flex-grow: 1;
+    position: relative;
+    min-width: 10px;
+    min-height: 26px;
+    margin: 1px 1px 0 0;
+    border: 0.5px solid #c4c4c4;
+    html.pixel-ratio-2 & {
+      border: 0.5px solid #c4c4c4;
+    }
+    html.pixel-ratio-3 & {
+      border: 0.33px solid #c4c4c4;
+    }
+
+    &.active {
+      &:after {
+        content:' ';
+        position: absolute;
+        left: 50%;
+        margin-left: -6px;
+        top: 50%;
+        margin-top: -4px;
+        width: 12px;
+        height: 9px;
+        background: no-repeat center;
+        .encoded-svg-background("<svg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' viewBox='0 0 12 9' xml:space='preserve'><polygon fill='#fff' points='12,0.7 11.3,0 3.9,7.4 0.7,4.2 0,4.9 3.9,8.8 3.9,8.8 3.9,8.8 '/></svg>");
+        -webkit-background-size: 12px 9px;
+        background-size: 12px 9px;
+        filter: drop-shadow(0px 0px 1px #000);
+      }
+    }
+
+    &.transparent {
+      background-repeat: no-repeat;
+      background-size: 100% 100%;
+      .encoded-svg-background("<svg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' viewBox='0 0 22 22' xml:space='preserve'><line stroke='#ff0000' stroke-linecap='undefined' stroke-linejoin='undefined' id='svg_1' y2='0' x2='22' y1='22' x1='0' stroke-width='2' fill='none'/></svg>");
+    }
+  }
+
+  .theme-colors {
+    .item-inner {
+      display: inline-block;
+    }
+  }
+}
\ No newline at end of file
diff --git a/apps/common/mobile/resources/less/ios/_container.less b/apps/common/mobile/resources/less/ios/_container.less
new file mode 100644
index 000000000..48bfa040b
--- /dev/null
+++ b/apps/common/mobile/resources/less/ios/_container.less
@@ -0,0 +1,76 @@
+// Container
+.phone.ios {
+  .container-edit {
+    .navbar {
+      .hairline(top, @toolbarBorderColor);
+    }
+
+    .page-content {
+      .list-block:first-child {
+        margin-top: -1px;
+      }
+    }
+  }
+}
+
+.container-edit,
+.container-add,
+.container-settings {
+  &.popover {
+    width: 360px;
+  }
+
+  &.popup,
+  &.popover {
+    .list-block {
+
+      ul {
+        border-radius: 0 !important;
+        background: #fff;
+      }
+
+      &:first-child {
+        margin-top: 0;
+      }
+
+      li:first-child a,
+      li:last-child a {
+        border-radius: 0 !important;
+      }
+    }
+
+    &,
+    .popover-inner {
+      > .content-block {
+        width: 100%;
+        height: 100%;
+        margin: 0;
+        padding: 0;
+        color: #000;
+      }
+    }
+
+    .popover-view {
+      border-radius: 13px;
+
+      > .pages {
+        border-radius: 13px;
+      }
+    }
+  }
+
+  .categories {
+    width: 100%;
+
+    > .buttons-row {
+      width: 100%;
+
+      .button {
+        padding: 0 1px;
+      }
+    }
+  }
+  .popover-inner {
+    height: 400px;
+  }
+}
\ No newline at end of file
diff --git a/apps/common/mobile/resources/less/ios/_contextmenu.less b/apps/common/mobile/resources/less/ios/_contextmenu.less
new file mode 100644
index 000000000..39c726203
--- /dev/null
+++ b/apps/common/mobile/resources/less/ios/_contextmenu.less
@@ -0,0 +1,88 @@
+// Context menu
+
+.document-menu {
+  @contextMenuBg: rgba(0,0,0,0.9);
+  @modalHairlineColor: rgba(230,230,230,0.9);
+  @modalButtonColor : rgba(200,200,200,0.9);
+
+  background-color: @contextMenuBg;
+  width: auto;
+  border-radius: 8px;
+
+  .popover-angle {
+    &:after {
+      background: @contextMenuBg;
+    }
+  }
+
+  .list-block {
+    font-size: 14px;
+
+    &:first-child {
+      ul {
+        .hairline-remove(left);
+        border-radius: 7px 0 0 7px;
+      }
+      li:first-child a{
+        border-radius: 7px 0 0 7px;
+      }
+    }
+    &:last-child {
+      ul {
+        .hairline-remove(right);
+        border-radius: 0 7px 7px 0;
+      }
+      li:last-child a{
+        border-radius: 0 7px 7px 0;
+      }
+    }
+    &:first-child:last-child {
+      li:first-child:last-child a, ul:first-child:last-child {
+        border-radius: 7px;
+      }
+    }
+
+    .item-link {
+      display: inline-block;
+
+      html:not(.watch-active-state) &:active, &.active-state {
+        //.transition(0ms);
+        background-color: #d9d9d9;
+        .item-inner {
+          .hairline-color(right, transparent);
+        }
+      }
+      &.list-button {
+        color: @white;
+        .hairline(right, @modalHairlineColor);
+        line-height: 36px;
+      }
+    }
+
+    // List items
+    li {
+      display: inline-block;
+    }
+
+    // Last-childs
+    li {
+      &:last-child {
+        .list-button {
+          .hairline-remove(right);
+        }
+      }
+      &:last-child, &:last-child li:last-child {
+        .item-inner {
+          .hairline-remove(right);
+        }
+      }
+      li:last-child, &:last-child li {
+        .item-inner {
+          .hairline(right, @modalHairlineColor);
+        }
+      }
+    }
+    .no-hairlines();
+    .no-hairlines-between()
+  }
+}
\ No newline at end of file
diff --git a/apps/common/mobile/resources/less/ios/_dataview.less b/apps/common/mobile/resources/less/ios/_dataview.less
new file mode 100644
index 000000000..3c4497719
--- /dev/null
+++ b/apps/common/mobile/resources/less/ios/_dataview.less
@@ -0,0 +1,34 @@
+// Data view
+
+.dataview {
+  &.page-content {
+    background: @white;
+  }
+
+  .row {
+    justify-content: space-around;
+  }
+
+  ul {
+    padding: 0 10px;
+    list-style: none;
+
+    li {
+      display: inline-block;
+    }
+  }
+
+  .active {
+    position: relative;
+
+    &::after {
+      content: '';
+      width: 20px;
+      height: 20px;
+      background-color: red;
+      position: absolute;
+      right: 0;
+      bottom: 0;
+    }
+  }
+}
\ No newline at end of file
diff --git a/apps/common/mobile/resources/less/ios/_listview.less b/apps/common/mobile/resources/less/ios/_listview.less
new file mode 100644
index 000000000..922c86558
--- /dev/null
+++ b/apps/common/mobile/resources/less/ios/_listview.less
@@ -0,0 +1,86 @@
+// List extend
+
+.item-content {
+  .item-after {
+    &.splitter {
+      color: #000;
+
+      label {
+        margin: 0 5px;
+      }
+
+      .buttons-row {
+        min-width: 90px;
+        margin-left: 10px;
+      }
+    }
+
+    &.value {
+      display: block;
+      min-width: 60px;
+      color: @black;
+      margin-left: 10px;
+      text-align: right;
+    }
+  }
+
+  &.buttons {
+    .item-inner {
+      padding-top: 0;
+      padding-bottom: 0;
+      align-items: stretch;
+
+      > .row {
+        width: 100%;
+        align-items: stretch;
+
+        .button {
+          flex: 1;
+          border: none;
+          height: inherit;
+          border-radius: 0;
+          font-size: 17px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
+      }
+    }
+  }
+
+  .item-after .color-preview {
+    width: 75px;
+    height: 30px;
+    margin-top: -3px;
+    border: 1px solid #c4c4c4;
+    html.pixel-ratio-2 & {
+      border: 0.5px solid #c4c4c4;
+    }
+    html.pixel-ratio-3 & {
+      border: 0.33px solid #c4c4c4;
+    }
+  }
+
+  i .color-preview {
+    width: 22px;
+    height: 8px;
+    display: inline-block;
+    margin-top: 21px;
+    box-sizing: border-box;
+    border: 1px solid #c4c4c4;
+    html.pixel-ratio-2 & {
+      border: 0.5px solid #c4c4c4;
+    }
+    html.pixel-ratio-3 & {
+      border: 0.33px solid #c4c4c4;
+    }
+  }
+}
+
+.item-link {
+  &.no-indicator {
+    .item-inner {
+      background-image: none;
+    }
+  }
+}
\ No newline at end of file
diff --git a/apps/common/mobile/resources/less/material/_about.less b/apps/common/mobile/resources/less/material/_about.less
new file mode 100644
index 000000000..3ed030ff3
--- /dev/null
+++ b/apps/common/mobile/resources/less/material/_about.less
@@ -0,0 +1,45 @@
+// About
+
+.about {
+  .page-content {
+    text-align: center;
+  }
+
+  .content-block:first-child {
+    margin: 15px 0;
+  }
+
+  .content-block {
+    margin: 0 auto 15px;
+
+    a {
+      color: #000;
+    }
+  }
+
+  h3 {
+    font-weight: normal;
+    margin: 0;
+
+    &.vendor {
+      color: #000;
+      font-weight: bold;
+      margin-top: 15px;
+    }
+  }
+
+  p > label {
+    margin-right: 5px;
+  }
+
+  .logo {
+    background: url('../../../../common/mobile/resources/img/about/onlyoffice.png') 50% 50% no-repeat;
+
+    @media
+    only screen and (-webkit-min-device-pixel-ratio: 2),
+    only screen and (min-resolution: 2dppx),
+    only screen and (min-resolution: 192dpi) {
+      background-image: url('../../../../common/mobile/resources/img/about/onlyoffice@2x.png');
+    }
+  }
+}
\ No newline at end of file
diff --git a/apps/common/mobile/resources/less/material/_button.less b/apps/common/mobile/resources/less/material/_button.less
new file mode 100644
index 000000000..f680dcb57
--- /dev/null
+++ b/apps/common/mobile/resources/less/material/_button.less
@@ -0,0 +1,9 @@
+// Active button icon color
+
+.button {
+  &.active {
+    i.icon {
+      background-color: #fff;
+    }
+  }
+}
diff --git a/apps/common/mobile/resources/less/material/_color-palette.less b/apps/common/mobile/resources/less/material/_color-palette.less
new file mode 100644
index 000000000..a85ccca82
--- /dev/null
+++ b/apps/common/mobile/resources/less/material/_color-palette.less
@@ -0,0 +1,48 @@
+// Color palette
+
+.color-palette {
+  a {
+    flex-grow: 1;
+    position: relative;
+    min-width: 10px;
+    min-height: 26px;
+    margin: 1px 1px 0 0;
+    border: 1px solid #c4c4c4;
+    html.pixel-ratio-2 & {
+      border: 0.5px solid #c4c4c4;
+    }
+    html.pixel-ratio-3 & {
+      border: 0.33px solid #c4c4c4;
+    }
+
+    &.active {
+      &:after {
+        content:' ';
+        position: absolute;
+        left: 50%;
+        margin-left: -6px;
+        top: 50%;
+        margin-top: -4px;
+        width: 12px;
+        height: 9px;
+        background: no-repeat center;
+        .encoded-svg-background("<svg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' viewBox='0 0 12 9' xml:space='preserve'><polygon fill='#fff' points='12,0.7 11.3,0 3.9,7.4 0.7,4.2 0,4.9 3.9,8.8 3.9,8.8 3.9,8.8 '/></svg>");
+        -webkit-background-size: 12px 9px;
+        background-size: 12px 9px;
+        filter: drop-shadow(0px 0px 1px #000);
+      }
+    }
+
+    &.transparent {
+      background-repeat: no-repeat;
+      background-size: 100% 100%;
+      .encoded-svg-background("<svg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' viewBox='0 0 22 22' xml:space='preserve'><line stroke='#ff0000' stroke-linecap='undefined' stroke-linejoin='undefined' id='svg_1' y2='0' x2='22' y1='22' x1='0' stroke-width='2' fill='none'/></svg>");
+    }
+  }
+
+  .theme-colors {
+    .item-inner {
+      display: inline-block;
+    }
+  }
+}
\ No newline at end of file
diff --git a/apps/common/mobile/resources/less/material/_container.less b/apps/common/mobile/resources/less/material/_container.less
new file mode 100644
index 000000000..ae3210438
--- /dev/null
+++ b/apps/common/mobile/resources/less/material/_container.less
@@ -0,0 +1,72 @@
+// Container
+
+.phone.android {
+  .container-edit {
+
+    .page-content {
+      .list-block:first-child {
+        margin-top: -1px;
+      }
+    }
+  }
+}
+
+.container-edit,
+.container-add,
+.container-settings {
+  &.popover {
+    width: 360px;
+  }
+
+  &.popup,
+  &.popover {
+    .list-block {
+
+      ul {
+        border-radius: 0;
+        background: #fff;
+      }
+
+      &:first-child {
+        margin-top: 0;
+
+        li:first-child a {
+          border-radius: 0;
+        }
+      }
+    }
+
+    &,
+    .popover-inner {
+      > .content-block {
+        width: 100%;
+        height: 100%;
+        margin: 0;
+        padding: 0;
+      }
+    }
+
+    .popover-view {
+      border-radius: 3px;
+
+      > .pages {
+        border-radius: 3px;
+      }
+    }
+  }
+
+  .categories {
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    padding: 0;
+
+    > .toolbar {
+      top: 0;
+      height: 100%;
+    }
+  }
+  .popover-inner {
+    height: 400px;
+  }
+}
\ No newline at end of file
diff --git a/apps/common/mobile/resources/less/material/_contextmenu.less b/apps/common/mobile/resources/less/material/_contextmenu.less
new file mode 100644
index 000000000..906bb1911
--- /dev/null
+++ b/apps/common/mobile/resources/less/material/_contextmenu.less
@@ -0,0 +1,20 @@
+// Context menu
+
+.document-menu {
+  width: auto;
+  line-height: 1 !important;
+
+  .popover-inner {
+    overflow: hidden;
+  }
+
+  .list-block {
+    ul {
+      height: 48px;
+    }
+
+    li {
+      display: inline-block;
+    }
+  }
+}
\ No newline at end of file
diff --git a/apps/common/mobile/resources/less/material/_dataview.less b/apps/common/mobile/resources/less/material/_dataview.less
new file mode 100644
index 000000000..570a14650
--- /dev/null
+++ b/apps/common/mobile/resources/less/material/_dataview.less
@@ -0,0 +1,31 @@
+// Data view
+
+.dataview {
+  .row {
+    justify-content: space-around;
+  }
+
+  ul {
+    padding: 0 10px;
+    list-style: none;
+    justify-content: space-around;
+
+    li {
+      display: inline-block;
+    }
+  }
+
+  .active {
+    position: relative;
+
+    &::after {
+      content: '';
+      width: 20px;
+      height: 20px;
+      background-color: red;
+      position: absolute;
+      right: 0;
+      bottom: 0;
+    }
+  }
+}
\ No newline at end of file
diff --git a/apps/common/mobile/resources/less/material/_listview.less b/apps/common/mobile/resources/less/material/_listview.less
new file mode 100644
index 000000000..a95e80645
--- /dev/null
+++ b/apps/common/mobile/resources/less/material/_listview.less
@@ -0,0 +1,68 @@
+// List extend
+
+.item-content{
+  .item-after {
+    &.splitter {
+      label {
+        color: #000;
+        margin:0 5px;
+        line-height: 36px;
+      }
+
+      .button {
+        min-width: 40px;
+        margin-left: 0;
+      }
+    }
+
+    &.value {
+      display: block;
+      min-width: 50px;
+      color: @black;
+      margin-left: 10px;
+      text-align: right;
+    }
+  }
+
+  &.buttons {
+    .item-inner {
+      padding-top: 0;
+      padding-bottom: 0;
+
+      > .row {
+        width: 100%;
+
+        .button {
+          flex: 1;
+          font-size: 17px;
+          margin-left: 5px;
+
+          &:first-child {
+            margin-left: 0;
+          }
+
+          &.active {
+            color: #fff;
+            background-color: @themeColor;
+          }
+        }
+      }
+    }
+  }
+
+  .color-preview {
+    width: 30px;
+    height: 30px;
+    border-radius: 16px;
+    margin-top: -3px;
+    border: 0.5px solid gray;
+  }
+}
+
+.item-link {
+  &.no-indicator {
+    .item-inner {
+      background-image: none;
+    }
+  }
+}
\ No newline at end of file
diff --git a/apps/documenteditor/mobile/resources/css/app-ios.css b/apps/documenteditor/mobile/resources/css/app-ios.css
index 8675686bb..0ccd17873 100644
--- a/apps/documenteditor/mobile/resources/css/app-ios.css
+++ b/apps/documenteditor/mobile/resources/css/app-ios.css
@@ -5834,13 +5834,6 @@ html:not(.phone) #editor-navbar.navbar .right a + a,
 html:not(.phone) #editor-navbar.navbar .left a + a {
   margin-left: 10px;
 }
-.searchbar.document {
-  background: #e4e4e6;
-}
-.searchbar.document .buttons-row {
-  margin-left: 10px;
-  margin-right: 5px;
-}
 .phone.ios .container-edit .navbar:before {
   content: '';
   position: absolute;
@@ -5867,9 +5860,6 @@ html.pixel-ratio-3 .phone.ios .container-edit .navbar:before {
 .phone.ios .container-edit .page-content .list-block:first-child {
   margin-top: -1px;
 }
-.container-edit.popup,
-.container-add.popup,
-.container-settings.popup,
 .container-edit.popover,
 .container-add.popover,
 .container-settings.popover {
@@ -5960,6 +5950,31 @@ html.pixel-ratio-3 .phone.ios .container-edit .navbar:before {
 .container-settings .popover-inner {
   height: 400px;
 }
+.dataview.page-content {
+  background: #ffffff;
+}
+.dataview .row {
+  justify-content: space-around;
+}
+.dataview ul {
+  padding: 0 10px;
+  list-style: none;
+}
+.dataview ul li {
+  display: inline-block;
+}
+.dataview .active {
+  position: relative;
+}
+.dataview .active::after {
+  content: '';
+  width: 20px;
+  height: 20px;
+  background-color: red;
+  position: absolute;
+  right: 0;
+  bottom: 0;
+}
 .item-content .item-after.splitter {
   color: #000;
 }
@@ -6025,173 +6040,9 @@ html.pixel-ratio-3 .item-content i .color-preview {
 .item-link.no-indicator .item-inner {
   background-image: none;
 }
-.about .page-content {
-  text-align: center;
-}
-.about .content-block:first-child {
-  margin: 15px 0;
-}
-.about .content-block {
-  margin: 0 auto 15px;
-}
-.about .content-block a {
-  color: #000;
-}
-.about h3 {
-  font-weight: normal;
-  margin: 0;
-}
-.about h3.vendor {
-  color: #000;
-  font-weight: bold;
-  margin-top: 15px;
-}
-.about p > label {
-  margin-right: 5px;
-}
-.about .logo {
-  background-image: url('../../../../common/mobile/resources/img/about/onlyoffice.png');
-}
-@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-resolution: 2dppx), only screen and (min-resolution: 192dpi) {
-  .about .logo {
-    background-image: url('../../../../common/mobile/resources/img/about/onlyoffice@2x.png');
-    background-size: auto;
-  }
-}
-#add-table .page,
-#add-shape .page {
-  background-color: #fff;
-}
-.dataview.page-content {
-  background: #ffffff;
-}
-.dataview .row {
-  justify-content: space-around;
-}
-.dataview ul {
-  padding: 0 10px;
-  list-style: none;
-}
-.dataview ul li {
-  display: inline-block;
-}
-.dataview .active {
-  position: relative;
-}
-.dataview .active::after {
-  content: '';
-  width: 20px;
-  height: 20px;
-  background-color: red;
-  position: absolute;
-  right: 0;
-  bottom: 0;
-}
-.table-styles .row,
-.table-styles .row li {
-  margin-bottom: 12px;
-}
-.table-styles li {
-  margin: 0;
-  padding: 1px;
-}
-.table-styles li img {
-  width: 70px;
-  height: 50px;
-}
-.shapes li {
-  width: 70px;
-  height: 70px;
-  margin: 0 1px;
-}
-.shapes li .thumb {
-  width: 100%;
-  height: 100%;
-  background-color: #4066D7;
-}
-.chart-types li {
-  width: 60px;
-  height: 60px;
-  margin: 6px;
-}
-.chart-types li .thumb {
-  width: 100%;
-  height: 100%;
-  background-size: contain;
-}
-.bullets ul,
-.numbers ul {
-  margin-top: 10px;
-}
-.bullets li,
-.numbers li {
-  width: 70px;
-  height: 70px;
-  margin-right: 1px;
-  border: 1px solid #c4c4c4;
-}
-html.pixel-ratio-2 .bullets li,
-html.pixel-ratio-2 .numbers li {
-  border: 0.5px solid #c4c4c4;
-}
-html.pixel-ratio-3 .bullets li,
-html.pixel-ratio-3 .numbers li {
-  border: 0.33px solid #c4c4c4;
-}
-.bullets li .thumb,
-.numbers li .thumb {
-  width: 100%;
-  height: 100%;
-  background-color: #ffffff;
-  background-size: cover;
-}
-.bullets li .thumb label,
-.numbers li .thumb label {
-  width: 100%;
-  text-align: center;
-  position: absolute;
-  top: 34%;
-}
 .button.active i.icon {
   background-color: #fff;
 }
-.color-palette a {
-  flex-grow: 1;
-  position: relative;
-  min-width: 10px;
-  min-height: 26px;
-  margin: 1px 1px 0 0;
-  border: 0.5px solid #c4c4c4;
-}
-html.pixel-ratio-2 .color-palette a {
-  border: 0.5px solid #c4c4c4;
-}
-html.pixel-ratio-3 .color-palette a {
-  border: 0.33px solid #c4c4c4;
-}
-.color-palette a.active:after {
-  content: ' ';
-  position: absolute;
-  left: 50%;
-  margin-left: -6px;
-  top: 50%;
-  margin-top: -4px;
-  width: 12px;
-  height: 9px;
-  background: no-repeat center;
-  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20x%3D'0px'%20y%3D'0px'%20viewBox%3D'0%200%2012%209'%20xml%3Aspace%3D'preserve'%3E%3Cpolygon%20fill%3D'%23fff'%20points%3D'12%2C0.7%2011.3%2C0%203.9%2C7.4%200.7%2C4.2%200%2C4.9%203.9%2C8.8%203.9%2C8.8%203.9%2C8.8%20'%2F%3E%3C%2Fsvg%3E");
-  -webkit-background-size: 12px 9px;
-  background-size: 12px 9px;
-  filter: drop-shadow(0px 0px 1px #000);
-}
-.color-palette a.transparent {
-  background-repeat: no-repeat;
-  background-size: 100% 100%;
-  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20x%3D'0px'%20y%3D'0px'%20viewBox%3D'0%200%2022%2022'%20xml%3Aspace%3D'preserve'%3E%3Cline%20stroke%3D'%23ff0000'%20stroke-linecap%3D'undefined'%20stroke-linejoin%3D'undefined'%20id%3D'svg_1'%20y2%3D'0'%20x2%3D'22'%20y1%3D'22'%20x1%3D'0'%20stroke-width%3D'2'%20fill%3D'none'%2F%3E%3C%2Fsvg%3E");
-}
-.color-palette .theme-colors .item-inner {
-  display: inline-block;
-}
 .document-menu {
   background-color: rgba(0, 0, 0, 0.9);
   width: auto;
@@ -6316,6 +6167,137 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after
 .document-menu .list-block.no-hairlines-between .list-group-title:after {
   display: none;
 }
+.color-palette a {
+  flex-grow: 1;
+  position: relative;
+  min-width: 10px;
+  min-height: 26px;
+  margin: 1px 1px 0 0;
+  border: 0.5px solid #c4c4c4;
+}
+html.pixel-ratio-2 .color-palette a {
+  border: 0.5px solid #c4c4c4;
+}
+html.pixel-ratio-3 .color-palette a {
+  border: 0.33px solid #c4c4c4;
+}
+.color-palette a.active:after {
+  content: ' ';
+  position: absolute;
+  left: 50%;
+  margin-left: -6px;
+  top: 50%;
+  margin-top: -4px;
+  width: 12px;
+  height: 9px;
+  background: no-repeat center;
+  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20x%3D'0px'%20y%3D'0px'%20viewBox%3D'0%200%2012%209'%20xml%3Aspace%3D'preserve'%3E%3Cpolygon%20fill%3D'%23fff'%20points%3D'12%2C0.7%2011.3%2C0%203.9%2C7.4%200.7%2C4.2%200%2C4.9%203.9%2C8.8%203.9%2C8.8%203.9%2C8.8%20'%2F%3E%3C%2Fsvg%3E");
+  -webkit-background-size: 12px 9px;
+  background-size: 12px 9px;
+  filter: drop-shadow(0px 0px 1px #000);
+}
+.color-palette a.transparent {
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20x%3D'0px'%20y%3D'0px'%20viewBox%3D'0%200%2022%2022'%20xml%3Aspace%3D'preserve'%3E%3Cline%20stroke%3D'%23ff0000'%20stroke-linecap%3D'undefined'%20stroke-linejoin%3D'undefined'%20id%3D'svg_1'%20y2%3D'0'%20x2%3D'22'%20y1%3D'22'%20x1%3D'0'%20stroke-width%3D'2'%20fill%3D'none'%2F%3E%3C%2Fsvg%3E");
+}
+.color-palette .theme-colors .item-inner {
+  display: inline-block;
+}
+.about .page-content {
+  text-align: center;
+}
+.about .content-block:first-child {
+  margin: 15px 0;
+}
+.about .content-block {
+  margin: 0 auto 15px;
+}
+.about .content-block a {
+  color: #000;
+}
+.about h3 {
+  font-weight: normal;
+  margin: 0;
+}
+.about h3.vendor {
+  color: #000;
+  font-weight: bold;
+  margin-top: 15px;
+}
+.about p > label {
+  margin-right: 5px;
+}
+.about .logo {
+  background-image: url('../../../../common/mobile/resources/img/about/onlyoffice.png');
+}
+@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-resolution: 2dppx), only screen and (min-resolution: 192dpi) {
+  .about .logo {
+    background-image: url('../../../../common/mobile/resources/img/about/onlyoffice@2x.png');
+    background-size: auto;
+  }
+}
+.tablet .searchbar.document.replace .center .searchbar-input:first-child {
+  margin-right: 10px;
+}
+.tablet .searchbar.document.replace .center .replace {
+  display: block;
+}
+.tablet .searchbar.document.replace .right .replace {
+  display: flex;
+  margin: 0 10px;
+}
+.tablet .searchbar.document .center {
+  width: 100%;
+}
+.tablet .searchbar.document .center .replace {
+  display: none;
+}
+.tablet .searchbar.document .right .prev {
+  margin-left: 0;
+}
+.tablet .searchbar.document .right .replace {
+  display: none;
+}
+.phone .searchbar.document.replace {
+  height: 88px;
+}
+.phone .searchbar.document.replace .left {
+  margin-top: -44px;
+}
+.phone .searchbar.document.replace .center .searchbar-input {
+  margin: 8px 0;
+}
+.phone .searchbar.document.replace .center .replace {
+  display: block;
+}
+.phone .searchbar.document.replace .right .replace {
+  display: flex;
+}
+.phone .searchbar.document .left,
+.phone .searchbar.document .center,
+.phone .searchbar.document .right {
+  flex-direction: column;
+}
+.phone .searchbar.document .left {
+  min-width: 22px;
+  max-width: 22px;
+}
+.phone .searchbar.document .center {
+  width: 100%;
+}
+.phone .searchbar.document .center .replace {
+  display: none;
+}
+.phone .searchbar.document .right > p {
+  margin: 0;
+}
+.phone .searchbar.document .right .replace {
+  display: none;
+}
+.searchbar.document {
+  background: #e4e4e6;
+}
 i.icon.icon-search {
   width: 22px;
   height: 22px;
@@ -6517,3 +6499,72 @@ i.icon.icon-link {
   height: 22px;
   background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2022%2022%22%20fill%3D%22%234066D7%22%3E%3Cg%3E%3Cpath%20d%3D%22M12.4%2C9.8c0%2C0-2.1-0.1-3.8%2C1.2c-2.8%2C2-3.3%2C4.3-3.3%2C4.3s1.6-1.7%2C3.5-2.5c1.7-0.7%2C3.7-0.4%2C3.7-0.4v1.9l4.8-3.3V11l-4.8-3.3V9.8z%20M11%2C1C5.5%2C1%2C1%2C5.5%2C1%2C11c0%2C5.5%2C4.5%2C10%2C10%2C10s10-4.5%2C10-10C21%2C5.5%2C16.5%2C1%2C11%2C1z%20M11%2C20c-5%2C0-9-4.1-9-9C2%2C6%2C6%2C2%2C11%2C2s9%2C4.1%2C9%2C9C20%2C16%2C16%2C20%2C11%2C20z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
 }
+#add-table .page,
+#add-shape .page {
+  background-color: #fff;
+}
+.table-styles .row,
+.table-styles .row li {
+  margin-bottom: 12px;
+}
+.table-styles li {
+  margin: 0;
+  padding: 1px;
+}
+.table-styles li img {
+  width: 70px;
+  height: 50px;
+}
+.shapes li {
+  width: 70px;
+  height: 70px;
+  margin: 0 1px;
+}
+.shapes li .thumb {
+  width: 100%;
+  height: 100%;
+  background-color: #4066D7;
+}
+.chart-types li {
+  width: 60px;
+  height: 60px;
+  margin: 6px;
+}
+.chart-types li .thumb {
+  width: 100%;
+  height: 100%;
+  background-size: contain;
+}
+.bullets ul,
+.numbers ul {
+  margin-top: 10px;
+}
+.bullets li,
+.numbers li {
+  width: 70px;
+  height: 70px;
+  margin-right: 1px;
+  border: 1px solid #c4c4c4;
+}
+html.pixel-ratio-2 .bullets li,
+html.pixel-ratio-2 .numbers li {
+  border: 0.5px solid #c4c4c4;
+}
+html.pixel-ratio-3 .bullets li,
+html.pixel-ratio-3 .numbers li {
+  border: 0.33px solid #c4c4c4;
+}
+.bullets li .thumb,
+.numbers li .thumb {
+  width: 100%;
+  height: 100%;
+  background-color: #ffffff;
+  background-size: cover;
+}
+.bullets li .thumb label,
+.numbers li .thumb label {
+  width: 100%;
+  text-align: center;
+  position: absolute;
+  top: 34%;
+}
diff --git a/apps/documenteditor/mobile/resources/css/app-material.css b/apps/documenteditor/mobile/resources/css/app-material.css
index f4affec33..dad5c542e 100644
--- a/apps/documenteditor/mobile/resources/css/app-material.css
+++ b/apps/documenteditor/mobile/resources/css/app-material.css
@@ -5631,9 +5631,6 @@ a.item-link,
 .phone.android .container-edit .page-content .list-block:first-child {
   margin-top: -1px;
 }
-.container-edit.popup,
-.container-add.popup,
-.container-settings.popup,
 .container-edit.popover,
 .container-add.popover,
 .container-settings.popover {
@@ -5716,6 +5713,29 @@ a.item-link,
 .container-settings .popover-inner {
   height: 400px;
 }
+.dataview .row {
+  justify-content: space-around;
+}
+.dataview ul {
+  padding: 0 10px;
+  list-style: none;
+  justify-content: space-around;
+}
+.dataview ul li {
+  display: inline-block;
+}
+.dataview .active {
+  position: relative;
+}
+.dataview .active::after {
+  content: '';
+  width: 20px;
+  height: 20px;
+  background-color: red;
+  position: absolute;
+  right: 0;
+  bottom: 0;
+}
 .item-content .item-after.splitter label {
   color: #000;
   margin: 0 5px;
@@ -5761,130 +5781,22 @@ a.item-link,
 .item-link.no-indicator .item-inner {
   background-image: none;
 }
-.about .page-content {
-  text-align: center;
-}
-.about .content-block:first-child {
-  margin: 15px 0;
-}
-.about .content-block {
-  margin: 0 auto 15px;
-}
-.about .content-block a {
-  color: #000;
-}
-.about h3 {
-  font-weight: normal;
-  margin: 0;
-}
-.about h3.vendor {
-  color: #000;
-  font-weight: bold;
-  margin-top: 15px;
-}
-.about p > label {
-  margin-right: 5px;
-}
-.about .logo {
-  background: url('../../../../common/mobile/resources/img/about/onlyoffice.png') 50% 50% no-repeat;
-}
-@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-resolution: 2dppx), only screen and (min-resolution: 192dpi) {
-  .about .logo {
-    background-image: url('../../../../common/mobile/resources/img/about/onlyoffice@2x.png');
-  }
-}
-#add-table .page,
-#add-shape .page {
+.button.active i.icon {
   background-color: #fff;
 }
-.dataview .row {
-  justify-content: space-around;
+.document-menu {
+  width: auto;
+  line-height: 1 !important;
 }
-.dataview ul {
-  padding: 0 10px;
-  list-style: none;
-  justify-content: space-around;
+.document-menu .popover-inner {
+  overflow: hidden;
 }
-.dataview ul li {
+.document-menu .list-block ul {
+  height: 48px;
+}
+.document-menu .list-block li {
   display: inline-block;
 }
-.dataview .active {
-  position: relative;
-}
-.dataview .active::after {
-  content: '';
-  width: 20px;
-  height: 20px;
-  background-color: red;
-  position: absolute;
-  right: 0;
-  bottom: 0;
-}
-.table-styles .row,
-.table-styles .row li {
-  margin-bottom: 12px;
-}
-.table-styles li {
-  margin: 0;
-  padding: 1px;
-}
-.table-styles li img {
-  width: 70px;
-  height: 50px;
-}
-.shapes li {
-  width: 70px;
-  height: 70px;
-  margin: 0 1px;
-}
-.shapes li .thumb {
-  width: 100%;
-  height: 100%;
-  background-color: #5a7dc9;
-}
-.chart-types li {
-  width: 60px;
-  height: 60px;
-  margin: 6px;
-}
-.chart-types li .thumb {
-  width: 100%;
-  height: 100%;
-  background-size: contain;
-}
-.bullets ul,
-.numbers ul {
-  margin-top: 10px;
-}
-.bullets li,
-.numbers li {
-  width: 70px;
-  height: 70px;
-  margin-right: 1px;
-  border: 1px solid #c4c4c4;
-}
-html.pixel-ratio-2 .bullets li,
-html.pixel-ratio-2 .numbers li {
-  border: 0.5px solid #c4c4c4;
-}
-html.pixel-ratio-3 .bullets li,
-html.pixel-ratio-3 .numbers li {
-  border: 0.33px solid #c4c4c4;
-}
-.bullets li .thumb,
-.numbers li .thumb {
-  width: 100%;
-  height: 100%;
-  background-color: #ffffff;
-  background-size: cover;
-}
-.bullets li .thumb label,
-.numbers li .thumb label {
-  width: 100%;
-  text-align: center;
-  position: absolute;
-  top: 34%;
-}
 .color-palette a {
   flex-grow: 1;
   position: relative;
@@ -5922,21 +5834,37 @@ html.pixel-ratio-3 .color-palette a {
 .color-palette .theme-colors .item-inner {
   display: inline-block;
 }
-.document-menu {
-  width: auto;
-  line-height: 1 !important;
+.about .page-content {
+  text-align: center;
 }
-.document-menu .popover-inner {
-  overflow: hidden;
+.about .content-block:first-child {
+  margin: 15px 0;
 }
-.document-menu .list-block ul {
-  height: 48px;
+.about .content-block {
+  margin: 0 auto 15px;
 }
-.document-menu .list-block li {
-  display: inline-block;
+.about .content-block a {
+  color: #000;
 }
-.button.active i.icon {
-  background-color: #fff;
+.about h3 {
+  font-weight: normal;
+  margin: 0;
+}
+.about h3.vendor {
+  color: #000;
+  font-weight: bold;
+  margin-top: 15px;
+}
+.about p > label {
+  margin-right: 5px;
+}
+.about .logo {
+  background: url('../../../../common/mobile/resources/img/about/onlyoffice.png') 50% 50% no-repeat;
+}
+@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-resolution: 2dppx), only screen and (min-resolution: 192dpi) {
+  .about .logo {
+    background-image: url('../../../../common/mobile/resources/img/about/onlyoffice@2x.png');
+  }
 }
 i.icon.icon-expand-up {
   width: 17px;
@@ -6129,3 +6057,72 @@ i.icon.icon-link {
   height: 22px;
   background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2022%2022%22%20fill%3D%22%23fff%22%3E%3Cg%3E%3Cpolygon%20points%3D%2210.9%2C16.9%202%2C8.1%204.1%2C6%2011.1%2C12.8%2017.9%2C6%2020%2C8.1%2011.2%2C16.9%2011.1%2C17%20%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
 }
+#add-table .page,
+#add-shape .page {
+  background-color: #fff;
+}
+.table-styles .row,
+.table-styles .row li {
+  margin-bottom: 12px;
+}
+.table-styles li {
+  margin: 0;
+  padding: 1px;
+}
+.table-styles li img {
+  width: 70px;
+  height: 50px;
+}
+.shapes li {
+  width: 70px;
+  height: 70px;
+  margin: 0 1px;
+}
+.shapes li .thumb {
+  width: 100%;
+  height: 100%;
+  background-color: #5a7dc9;
+}
+.chart-types li {
+  width: 60px;
+  height: 60px;
+  margin: 6px;
+}
+.chart-types li .thumb {
+  width: 100%;
+  height: 100%;
+  background-size: contain;
+}
+.bullets ul,
+.numbers ul {
+  margin-top: 10px;
+}
+.bullets li,
+.numbers li {
+  width: 70px;
+  height: 70px;
+  margin-right: 1px;
+  border: 1px solid #c4c4c4;
+}
+html.pixel-ratio-2 .bullets li,
+html.pixel-ratio-2 .numbers li {
+  border: 0.5px solid #c4c4c4;
+}
+html.pixel-ratio-3 .bullets li,
+html.pixel-ratio-3 .numbers li {
+  border: 0.33px solid #c4c4c4;
+}
+.bullets li .thumb,
+.numbers li .thumb {
+  width: 100%;
+  height: 100%;
+  background-color: #ffffff;
+  background-size: cover;
+}
+.bullets li .thumb label,
+.numbers li .thumb label {
+  width: 100%;
+  text-align: center;
+  position: absolute;
+  top: 34%;
+}
diff --git a/apps/documenteditor/mobile/resources/less/app-ios.less b/apps/documenteditor/mobile/resources/less/app-ios.less
index b22647010..3af65d20e 100644
--- a/apps/documenteditor/mobile/resources/less/app-ios.less
+++ b/apps/documenteditor/mobile/resources/less/app-ios.less
@@ -51,222 +51,17 @@
   }
 }
 
-// Search
-.searchbar.document {
-  background: lighten(@searchbarBg, 10%);
+@import url('../../../../common/mobile/resources/less/_mixins.less');
+@import url('../../../../common/mobile/resources/less/ios/_container.less');
+@import url('../../../../common/mobile/resources/less/ios/_dataview.less');
+@import url('../../../../common/mobile/resources/less/ios/_listview.less');
+@import url('../../../../common/mobile/resources/less/ios/_button.less');
+@import url('../../../../common/mobile/resources/less/ios/_contextmenu.less');
+@import url('../../../../common/mobile/resources/less/ios/_color-palette.less');
+@import url('../../../../common/mobile/resources/less/ios/_about.less');
 
-  .buttons-row {
-    margin-left: 10px;
-    margin-right: 5px;
-  }
-}
-
-// Edit container
-.phone.ios {
-  .container-edit {
-    .navbar {
-      .hairline(top, @toolbarBorderColor);
-    }
-
-    .page-content {
-      .list-block:first-child {
-        margin-top: -1px;
-      }
-    }
-  }
-}
-
-.container-edit,
-.container-add,
-.container-settings {
-  &.popup,
-  &.popover {
-    width: 360px;
-
-    .list-block {
-
-      ul {
-        border-radius: 0 !important;
-        background: #fff;
-      }
-
-      &:first-child {
-        margin-top: 0;
-      }
-
-      li:first-child a,
-      li:last-child a {
-        border-radius: 0 !important;
-      }
-    }
-
-    &,
-    .popover-inner {
-      > .content-block {
-        width: 100%;
-        height: 100%;
-        margin: 0;
-        padding: 0;
-        color: #000;
-      }
-    }
-
-    .popover-view {
-      border-radius: 13px;
-
-      > .pages {
-        border-radius: 13px;
-      }
-    }
-  }
-
-  .categories {
-    width: 100%;
-
-    > .buttons-row {
-      width: 100%;
-
-      .button {
-        padding: 0 1px;
-      }
-    }
-  }
-  .popover-inner {
-    height: 400px;
-  }
-}
-
-// List extend
-.item-content {
-  .item-after {
-    &.splitter {
-      color: #000;
-
-      label {
-        margin: 0 5px;
-      }
-
-      .buttons-row {
-        min-width: 90px;
-        margin-left: 10px;
-      }
-    }
-
-    &.value {
-      display: block;
-      min-width: 60px;
-      color: @black;
-      margin-left: 10px;
-      text-align: right;
-    }
-  }
-
-  &.buttons {
-    .item-inner {
-      padding-top: 0;
-      padding-bottom: 0;
-      align-items: stretch;
-
-      > .row {
-        width: 100%;
-        align-items: stretch;
-
-        .button {
-          flex: 1;
-          border: none;
-          height: inherit;
-          border-radius: 0;
-          font-size: 17px;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-        }
-      }
-    }
-  }
-
-  .item-after .color-preview {
-    width: 75px;
-    height: 30px;
-    margin-top: -3px;
-    border: 1px solid #c4c4c4;
-    html.pixel-ratio-2 & {
-      border: 0.5px solid #c4c4c4;
-    }
-    html.pixel-ratio-3 & {
-      border: 0.33px solid #c4c4c4;
-    }
-  }
-
-  i .color-preview {
-    width: 22px;
-    height: 8px;
-    display: inline-block;
-    margin-top: 21px;
-    box-sizing: border-box;
-    border: 1px solid #c4c4c4;
-    html.pixel-ratio-2 & {
-      border: 0.5px solid #c4c4c4;
-    }
-    html.pixel-ratio-3 & {
-      border: 0.33px solid #c4c4c4;
-    }
-  }
-}
-
-.item-link {
-  &.no-indicator {
-    .item-inner {
-      background-image: none;
-    }
-  }
-}
-
-// About
-.about {
-  .page-content {
-    text-align: center;
-  }
-
-  .content-block:first-child {
-    margin: 15px 0;
-  }
-
-  .content-block {
-    margin: 0 auto 15px;
-
-    a {
-      color: #000;
-    }
-  }
-
-  h3 {
-    font-weight: normal;
-    margin: 0;
-
-    &.vendor {
-      color: #000;
-      font-weight: bold;
-      margin-top: 15px;
-    }
-  }
-
-  p > label {
-    margin-right: 5px;
-  }
-
-  .logo {
-    background-image: url('../../../../common/mobile/resources/img/about/onlyoffice.png');
-
-    @media
-    only screen and (-webkit-min-device-pixel-ratio: 2),
-    only screen and (min-resolution: 2dppx),
-    only screen and (min-resolution: 192dpi) {
-      background-image: url('../../../../common/mobile/resources/img/about/onlyoffice@2x.png');
-      background-size: auto;
-    }
-  }
-}
+@import url('ios/_search.less');
+@import url('ios/_icons.less');
 
 // Add Container
 
@@ -277,41 +72,6 @@
   }
 }
 
-// Data view
-
-.dataview {
-  &.page-content {
-    background: @white;
-  }
-
-  .row {
-    justify-content: space-around;
-  }
-
-  ul {
-    padding: 0 10px;
-    list-style: none;
-
-    li {
-      display: inline-block;
-    }
-  }
-
-  .active {
-    position: relative;
-
-    &::after {
-      content: '';
-      width: 20px;
-      height: 20px;
-      background-color: red;
-      position: absolute;
-      right: 0;
-      bottom: 0;
-    }
-  }
-}
-
 // Table styles
 
 .table-styles {
@@ -402,357 +162,4 @@
       }
     }
   }
-}
-
-// Active button icon color
-.button {
-  &.active {
-    i.icon {
-      background-color: #fff;
-    }
-  }
-}
-
-// Color palette
-
-.color-palette {
-  a {
-    flex-grow: 1;
-    position: relative;
-    min-width: 10px;
-    min-height: 26px;
-    margin: 1px 1px 0 0;
-    border: 0.5px solid #c4c4c4;
-    html.pixel-ratio-2 & {
-      border: 0.5px solid #c4c4c4;
-    }
-    html.pixel-ratio-3 & {
-      border: 0.33px solid #c4c4c4;
-    }
-
-    &.active {
-      &:after {
-        content:' ';
-        position: absolute;
-        left: 50%;
-        margin-left: -6px;
-        top: 50%;
-        margin-top: -4px;
-        width: 12px;
-        height: 9px;
-        background: no-repeat center;
-        .encoded-svg-background("<svg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' viewBox='0 0 12 9' xml:space='preserve'><polygon fill='#fff' points='12,0.7 11.3,0 3.9,7.4 0.7,4.2 0,4.9 3.9,8.8 3.9,8.8 3.9,8.8 '/></svg>");
-        -webkit-background-size: 12px 9px;
-        background-size: 12px 9px;
-        filter: drop-shadow(0px 0px 1px #000);
-      }
-    }
-
-    &.transparent {
-      background-repeat: no-repeat;
-      background-size: 100% 100%;
-      .encoded-svg-background("<svg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' viewBox='0 0 22 22' xml:space='preserve'><line stroke='#ff0000' stroke-linecap='undefined' stroke-linejoin='undefined' id='svg_1' y2='0' x2='22' y1='22' x1='0' stroke-width='2' fill='none'/></svg>");
-    }
-  }
-
-  .theme-colors {
-    .item-inner {
-      display: inline-block;
-    }
-  }
-}
-
-// Context menu
-
-.document-menu {
-  @contextMenuBg: rgba(0,0,0,0.9);
-  @modalHairlineColor: rgba(230,230,230,0.9);
-  @modalButtonColor : rgba(200,200,200,0.9);
-
-  background-color: @contextMenuBg;
-  width: auto;
-  border-radius: 8px;
-
-  .popover-angle {
-    &:after {
-      background: @contextMenuBg;
-    }
-  }
-
-  .list-block {
-    font-size: 14px;
-
-    &:first-child {
-      ul {
-        .hairline-remove(left);
-        border-radius: 7px 0 0 7px;
-      }
-      li:first-child a{
-        border-radius: 7px 0 0 7px;
-      }
-    }
-    &:last-child {
-      ul {
-        .hairline-remove(right);
-        border-radius: 0 7px 7px 0;
-      }
-      li:last-child a{
-        border-radius: 0 7px 7px 0;
-      }
-    }
-    &:first-child:last-child {
-      li:first-child:last-child a, ul:first-child:last-child {
-        border-radius: 7px;
-      }
-    }
-
-    .item-link {
-      display: inline-block;
-
-      html:not(.watch-active-state) &:active, &.active-state {
-        //.transition(0ms);
-        background-color: #d9d9d9;
-        .item-inner {
-          .hairline-color(right, transparent);
-        }
-      }
-      &.list-button {
-        color: @white;
-        .hairline(right, @modalHairlineColor);
-        line-height: 36px;
-      }
-    }
-
-    // List items
-    li {
-      display: inline-block;
-    }
-
-    // Last-childs
-    li {
-      &:last-child {
-        .list-button {
-          .hairline-remove(right);
-        }
-      }
-      &:last-child, &:last-child li:last-child {
-        .item-inner {
-          .hairline-remove(right);
-        }
-      }
-      li:last-child, &:last-child li {
-        .item-inner {
-          .hairline(right, @modalHairlineColor);
-        }
-      }
-    }
-    .no-hairlines();
-    .no-hairlines-between()
-  }
-}
-
-// Encoded SVG Background
-.encoded-svg-mask(@svg) {
-  @url: `encodeURIComponent(@{svg})`;
-  background-color: @themeColor;
-  -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,@{url}");
-}
-
-// Icons
-i.icon {
-  &.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="@{themeColor}"><g><path d="M15.8,15c1.4-1.6,2.2-3.7,2.2-5.9c0-5-4-9-9-9C4,0,0,4,0,9c0,5,4,9,9,9c2.3,0,4.4-0.9,5.9-2.2l5.8,5.8l0.2-0.6l0.7-0.2L15.8,15z M9,17c-4.4,0-8-3.6-8-8c0-4.4,3.6-8,8-8c4.4,0,8,3.6,8,8C17,13.5,13.5,17,9,17z"/></g></svg>');
-  }
-  &.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="0 0 22 22" fill="@{themeColor}"><g><rect x="2" y="17" width="18" height="1"/><rect x="2" y="13" width="18" height="1"/><rect x="2" y="9" width="18" height="1"/><rect x="2" y="5" width="18" height="1"/></g></svg>');
-  }
-  &.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="@{themeColor}"><g><path d="M0,20h22v1H0V20z"/><polygon points="19.3,5.3 6.1,18.4 4.6,16.9 17.8,3.8 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>');
-  }
-  &.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="@{themeColor}"><g><path d="M22,16v2h-1v-2l0,0c0-2.9-2.1-5-5-5l0,0H1.9L5,14c0.1,0.1,0.1,0.2,0,0.3l-0.4,0.4c-0.1,0.1-0.2,0.1-0.3,0l-4.2-4.2c-0.1-0.1-0.1-0.2,0-0.3l0.4-0.4h0.1L4.4,6c0.1-0.1,0.2-0.1,0.3,0l0.5,0.4c0.1,0.1,0.1,0.2,0,0.3L1.9,10H16l0,0C19.3,10,22,12.7,22,16L22,16z"/></g></svg>');
-  }
-  &.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="@{themeColor}"><g><path d="M0,16c0-3.3,2.7-6,6-6v0h14.1l-3.3-3.3c-0.1-0.1-0.1-0.2,0-0.3L17.3,6c0.1-0.1,0.2-0.1,0.3,0l3.8,3.8c0,0,0.1,0,0.1,0l0.4,0.4c0.1,0.1,0.1,0.2,0,0.3l-4.2,4.2c-0.1,0.1-0.2,0.1-0.3,0l-0.4-0.4c-0.1-0.1-0.1-0.2,0-0.3l3.1-3H6v0c-2.9,0-5,2.1-5,5h0v2H0L0,16L0,16z"/></g></svg>');
-  }
-  &.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="@{themeColor}"><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>');
-  }
-  &.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" x="0px" y="0px" viewBox="-1 3 22 28" fill="@{themeColor}"><g><polygon points="10,5.6 10,21.2 11,21.2 11,5.6 14.6,9.3 15.3,8.5 10.5,3.6 5.7,8.5 6.4,9.3 	"/><polygon points="13,12 13,13 19,13 19,30 2,30 2,13 8,13 8,12 1,12 1,13 1,30 1,31 20,31 20,30 20,13 20,12 	"/></g></svg>');
-  }
-  &.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="@{themeColor}"><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>');
-  }
-  &.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="@{themeColor}"><g><path d="M22,12H12v10h-1V12H1v-1h10V1h1v10h10V12z"/></g></svg>');
-  }
-  &.icon-settings {
-    width: 24px;
-    height: 24px;
-    .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="@{themeColor}"><g><path d="M11.8,3l0.4,2c0.1,0.7,0.6,1.1,1.3,1.1c0.3,0,0.5-0.1,0.7-0.2l1.9-1.2l1.1,1.1l-1.1,1.8C15.8,8,15.8,8.5,16,8.9c0.2,0.4,0.5,0.7,1,0.8l2.1,0.5v1.6L17,12.2c-0.5,0.1-0.8,0.4-1,0.8c-0.2,0.4-0.1,0.9,0.1,1.2l1.2,1.9l-1.1,1.1l-1.8-1.1c-0.2-0.2-0.5-0.2-0.8-0.2c-0.6,0-1.2,0.5-1.3,1.1l-0.5,2.1h-1.6l-0.4-2C9.7,16.4,9.2,16,8.5,16c-0.3,0-0.5,0.1-0.7,0.2l-1.9,1.2l-1.1-1.1l1.1-1.8c0.3-0.4,0.3-0.9,0.1-1.3c-0.2-0.4-0.5-0.7-1-0.8l-2.1-0.5v-1.6l2-0.4c0.5-0.1,0.8-0.4,1-0.8C6.1,8.7,6,8.2,5.8,7.9l-1-2l1.1-1.1l1.8,1.1C8,6.1,8.2,6.2,8.5,6.2c0.6,0,1.2-0.5,1.3-1.1L10.3,3H11.8 M11,15.5c2.5,0,4.5-2,4.5-4.5s-2-4.5-4.5-4.5s-4.5,2-4.5,4.5S8.5,15.5,11,15.5 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.2c-0.1,0-0.2,0-0.3,0.1l-2.1,1.3C13.6,5,13.6,5,13.5,5c-0.1,0-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>');
-  }
-  &.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="@{themeColor}"><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>');
-  }
-  &.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="@{themeColor}"><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>');
-  }
-  &.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="@{themeColor}"><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>');
-  }
-  &.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="@{themeColor}"><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="@{themeColor}"><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="@{themeColor}"><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="@{themeColor}"><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="@{themeColor}"><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="@{themeColor}"><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="@{themeColor}"><g><path d="M1,3v1h21V3H1z M4,7v1h14V7H4z M1,12h21v-1H1V12z M4,15v1h14v-1H4z M1,20h21v-1H1V20z"/></g></svg>');
-  }
-  &.icon-text-align-jast {
-    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="@{themeColor}"><g><path d="M1,3v1h21V3H1z M1,8h21V7H1V8z M1,12h21v-1H1V12z M1,16h21v-1H1V16z M1,20h21v-1H1V20z"/></g></svg>');
-  }
-  &.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="@{themeColor}"><g><path d="M1,3v1h21V3H1z M15,7H1v1h14V7z M1,12h21v-1H1V12z M15,15H1v1h14V15z M1,20h21v-1H1V20z"/></g></svg>');
-  }
-  &.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="@{themeColor}"><g><path d="M1,3v1h21V3H1z M8,8h14V7H8V8z M22,11H1v1h21V11z M8,16h14v-1H8V16z M22,19H1v1h21V19z"/></g></svg>');
-  }
-  &.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="@{themeColor}"><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>');
-  }
-  &.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="@{themeColor}"><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>');
-  }
-  &.icon-prev {
-    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="@{themeColor}"><g><path d="M16,20.5L15,21.5L4.5,11l0,0l0,0L15,0.5L16,1.5L6.6,11L16,20.5z"/></g></svg>');
-  }
-  &.icon-next {
-    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="@{themeColor}"><g><path d="M15.5,11L6,1.5l1.1-1.1L17.5,11l0,0l0,0L7.1,21.5L6,20.5L15.5,11z"/></g></svg>');
-  }
-  &.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="@{themeColor}"><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>');
-  }
-  &.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="@{themeColor}"><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>');
-  }
-  &.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="@{themeColor}"><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>');
-  }
-  &.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="@{themeColor}"><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>');
-  }
-  &.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="@{themeColor}"><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>');
-  }
-  &.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="@{themeColor}"><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>');
-  }
-  &.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="@{themeColor}"><g><path d="M20.5,6.5l1.1,1.1L11,18l0,0l0,0L0.5,7.5l1.1-1.1l9.5,9.5L20.5,6.5z"/></g></svg>');
-  }
-  &.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="@{themeColor}"><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>');
-  }
-  &.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="@{themeColor}"><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>');
-  }
-  &.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="@{themeColor}"><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>');
-  }
-  &.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="@{themeColor}"><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>');
-  }
-  &.icon-link {
-    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="@{themeColor}"><g><path d="M12.4,9.8c0,0-2.1-0.1-3.8,1.2c-2.8,2-3.3,4.3-3.3,4.3s1.6-1.7,3.5-2.5c1.7-0.7,3.7-0.4,3.7-0.4v1.9l4.8-3.3V11l-4.8-3.3V9.8z M11,1C5.5,1,1,5.5,1,11c0,5.5,4.5,10,10,10s10-4.5,10-10C21,5.5,16.5,1,11,1z M11,20c-5,0-9-4.1-9-9C2,6,6,2,11,2s9,4.1,9,9C20,16,16,20,11,20z"/></g></svg>');
-  }
 }
\ No newline at end of file
diff --git a/apps/documenteditor/mobile/resources/less/app-material.less b/apps/documenteditor/mobile/resources/less/app-material.less
index bafaac01f..595267ff8 100644
--- a/apps/documenteditor/mobile/resources/less/app-material.less
+++ b/apps/documenteditor/mobile/resources/less/app-material.less
@@ -44,189 +44,17 @@
 @import url('../../../../../vendor/framework7/src/less/material/disabled.less');
 
 
-// Edit container
-.phone.android {
-  .container-edit {
+@import url('../../../../common/mobile/resources/less/_mixins.less');
+@import url('../../../../common/mobile/resources/less/material/_container.less');
+@import url('../../../../common/mobile/resources/less/material/_dataview.less');
+@import url('../../../../common/mobile/resources/less/material/_listview.less');
+@import url('../../../../common/mobile/resources/less/material/_button.less');
+@import url('../../../../common/mobile/resources/less/material/_contextmenu.less');
+@import url('../../../../common/mobile/resources/less/material/_color-palette.less');
+@import url('../../../../common/mobile/resources/less/material/_about.less');
 
-    .page-content {
-      .list-block:first-child {
-        margin-top: -1px;
-      }
-    }
-  }
-}
-
-// Edit container
-.container-edit,
-.container-add,
-.container-settings {
-  &.popup,
-  &.popover {
-    width: 360px;
-
-    .list-block {
-
-      ul {
-        border-radius: 0;
-        background: #fff;
-      }
-
-      &:first-child {
-        margin-top: 0;
-
-        li:first-child a {
-          border-radius: 0;
-        }
-      }
-    }
-
-    &,
-    .popover-inner {
-      > .content-block {
-        width: 100%;
-        height: 100%;
-        margin: 0;
-        padding: 0;
-      }
-    }
-
-    .popover-view {
-      border-radius: 3px;
-
-      > .pages {
-        border-radius: 3px;
-      }
-    }
-  }
-
-  .categories {
-    width: 100%;
-    height: 100%;
-    margin: 0;
-    padding: 0;
-
-    > .toolbar {
-      top: 0;
-      height: 100%;
-    }
-  }
-  .popover-inner {
-    height: 400px;
-  }
-}
-
-// List extend
-.item-content{
-  .item-after {
-    &.splitter {
-      label {
-        color: #000;
-        margin:0 5px;
-        line-height: 36px;
-      }
-
-      .button {
-        min-width: 40px;
-        margin-left: 0;
-      }
-    }
-
-    &.value {
-      display: block;
-      min-width: 50px;
-      color: @black;
-      margin-left: 10px;
-      text-align: right;
-    }
-  }
-
-  &.buttons {
-    .item-inner {
-      padding-top: 0;
-      padding-bottom: 0;
-
-      > .row {
-        width: 100%;
-
-        .button {
-          flex: 1;
-          font-size: 17px;
-          margin-left: 5px;
-
-          &:first-child {
-            margin-left: 0;
-          }
-
-          &.active {
-            color: #fff;
-            background-color: @themeColor;
-          }
-        }
-      }
-    }
-  }
-
-  .color-preview {
-    width: 30px;
-    height: 30px;
-    border-radius: 16px;
-    margin-top: -3px;
-    border: 0.5px solid gray;
-  }
-}
-
-.item-link {
-  &.no-indicator {
-    .item-inner {
-      background-image: none;
-    }
-  }
-}
-
-// About
-.about {
-  .page-content {
-    text-align: center;
-  }
-
-  .content-block:first-child {
-    margin: 15px 0;
-  }
-
-  .content-block {
-    margin: 0 auto 15px;
-
-    a {
-      color: #000;
-    }
-  }
-
-  h3 {
-    font-weight: normal;
-    margin: 0;
-
-    &.vendor {
-      color: #000;
-      font-weight: bold;
-      margin-top: 15px;
-    }
-  }
-
-  p > label {
-    margin-right: 5px;
-  }
-
-  .logo {
-    background: url('../../../../common/mobile/resources/img/about/onlyoffice.png') 50% 50% no-repeat;
-
-    @media
-    only screen and (-webkit-min-device-pixel-ratio: 2),
-    only screen and (min-resolution: 2dppx),
-    only screen and (min-resolution: 192dpi) {
-      background-image: url('../../../../common/mobile/resources/img/about/onlyoffice@2x.png');
-    }
-  }
-}
+@import url('material/_search.less');
+@import url('material/_icons.less');
 
 // Add Container
 
@@ -237,37 +65,6 @@
   }
 }
 
-// Data view
-
-.dataview {
-  .row {
-    justify-content: space-around;
-  }
-
-  ul {
-    padding: 0 10px;
-    list-style: none;
-    justify-content: space-around;
-
-    li {
-      display: inline-block;
-    }
-  }
-
-  .active {
-    position: relative;
-
-    &::after {
-      content: '';
-      width: 20px;
-      height: 20px;
-      background-color: red;
-      position: absolute;
-      right: 0;
-      bottom: 0;
-    }
-  }
-}
 // Table styles
 
 .table-styles {
@@ -359,314 +156,3 @@
     }
   }
 }
-
-// Color palette
-
-.color-palette {
-  a {
-    flex-grow: 1;
-    position: relative;
-    min-width: 10px;
-    min-height: 26px;
-    margin: 1px 1px 0 0;
-    border: 1px solid #c4c4c4;
-    html.pixel-ratio-2 & {
-      border: 0.5px solid #c4c4c4;
-    }
-    html.pixel-ratio-3 & {
-      border: 0.33px solid #c4c4c4;
-    }
-
-    &.active {
-      &:after {
-        content:' ';
-        position: absolute;
-        left: 50%;
-        margin-left: -6px;
-        top: 50%;
-        margin-top: -4px;
-        width: 12px;
-        height: 9px;
-        background: no-repeat center;
-        .encoded-svg-background("<svg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' viewBox='0 0 12 9' xml:space='preserve'><polygon fill='#fff' points='12,0.7 11.3,0 3.9,7.4 0.7,4.2 0,4.9 3.9,8.8 3.9,8.8 3.9,8.8 '/></svg>");
-        -webkit-background-size: 12px 9px;
-        background-size: 12px 9px;
-        filter: drop-shadow(0px 0px 1px #000);
-      }
-    }
-
-    &.transparent {
-      background-repeat: no-repeat;
-      background-size: 100% 100%;
-      .encoded-svg-background("<svg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' viewBox='0 0 22 22' xml:space='preserve'><line stroke='#ff0000' stroke-linecap='undefined' stroke-linejoin='undefined' id='svg_1' y2='0' x2='22' y1='22' x1='0' stroke-width='2' fill='none'/></svg>");
-    }
-  }
-
-  .theme-colors {
-    .item-inner {
-      display: inline-block;
-    }
-  }
-}
-
-// Context menu
-
-.document-menu {
-  width: auto;
-  line-height: 1 !important;
-
-  .popover-inner {
-    overflow: hidden;
-  }
-
-  .list-block {
-    ul {
-      height: 48px;
-    }
-
-    li {
-      display: inline-block;
-    }
-  }
-}
-
-// Encoded SVG Background
-.encoded-svg-mask(@svg) {
-  @url: `encodeURIComponent(@{svg})`;
-  background-color: @themeColor;
-  -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,@{url}");
-}
-
-// Active button icon color
-.button {
-  &.active {
-    i.icon {
-      background-color: #fff;
-    }
-  }
-}
-
-// Icons
-i.icon {
-  &.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>');
-  }
-  &.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>');
-  }
-  &.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="@{themeColor}"><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>');
-  }
-  &.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="@{themeColor}"><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>');
-  }
-  &.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="@{themeColor}"><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>');
-  }
-  &.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" x="0px" y="0px" viewBox="-1 3 22 28" fill="@{themeColor}"><g><polygon id="XMLID_3_" points="10,5.6 10,21.2 11,21.2 11,5.6 14.6,9.3 15.3,8.5 10.5,3.6 5.7,8.5 6.4,9.3 	"/><polygon id="XMLID_6_" points="13,12 13,13 19,13 19,30 2,30 2,13 8,13 8,12 1,12 1,13 1,30 1,31 20,31 20,30 20,13 20,12 	"/></g></svg>');
-  }
-  &.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="@{themeColor}"><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>');
-  }
-  &.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="@{themeColor}"><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>');
-  }
-  &.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="@{themeColor}"><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>');
-  }
-  &.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="@{themeColor}"><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>');
-  }
-  //&.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="@{themeColor}"><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="@{themeColor}"><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="@{themeColor}"><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="@{themeColor}"><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="@{themeColor}"><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="@{themeColor}"><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="@{themeColor}"><g><path d="M1,3v1h21V3H1z M4,7v1h14V7H4z M1,12h21v-1H1V12z M4,15v1h14v-1H4z M1,20h21v-1H1V20z"/></g></svg>');
-  }
-  &.icon-text-align-jast {
-    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="@{themeColor}"><g><path d="M1,3v1h21V3H1z M1,8h21V7H1V8z M1,12h21v-1H1V12z M1,16h21v-1H1V16z M1,20h21v-1H1V20z"/></g></svg>');
-  }
-  &.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="@{themeColor}"><g><path d="M1,3v1h21V3H1z M15,7H1v1h14V7z M1,12h21v-1H1V12z M15,15H1v1h14V15z M1,20h21v-1H1V20z"/></g></svg>');
-  }
-  &.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="@{themeColor}"><g><path d="M1,3v1h21V3H1z M8,8h14V7H8V8z M22,11H1v1h21V11z M8,16h14v-1H8V16z M22,19H1v1h21V19z"/></g></svg>');
-  }
-  &.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="@{themeColor}"><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>');
-  }
-  &.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="@{themeColor}"><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>');
-  }
-  &.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="@{themeColor}"><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>');
-  }
-  &.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="@{themeColor}"><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>');
-  }
-  &.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="@{themeColor}"><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>');
-  }
-  &.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="@{themeColor}"><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>');
-  }
-  &.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="@{themeColor}"><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>');
-  }
-  &.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="@{themeColor}"><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>');
-  }
-  &.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="@{themeColor}"><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>');
-  }
-  &.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="@{themeColor}"><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>');
-  }
-  &.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="@{themeColor}"><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>');
-  }
-  &.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="@{themeColor}"><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>');
-  }
-  &.icon-link {
-    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="@{themeColor}"><g><path d="M12.4,9.8c0,0-2.1-0.1-3.8,1.2c-2.8,2-3.3,4.3-3.3,4.3s1.6-1.7,3.5-2.5c1.7-0.7,3.7-0.4,3.7-0.4v1.9l4.8-3.3V11l-4.8-3.3V9.8z M11,1C5.5,1,1,5.5,1,11c0,5.5,4.5,10,10,10s10-4.5,10-10C21,5.5,16.5,1,11,1z M11,20c-5,0-9-4.1-9-9C2,6,6,2,11,2s9,4.1,9,9C20,16,16,20,11,20z"/></g></svg>');
-  }
-}
-
-// Overwrite color for toolbar
-.navbar {
-  i.icon {
-    &.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>');
-    }
-    &.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>');
-    }
-    &.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>');
-    }
-    &.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>');
-    }
-    &.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>');
-    }
-    &.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>');
-    }
-    &.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>');
-    }
-    &.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>');
-    }
-    &.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>');
-    }
-    &.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>');
-    }
-  }
-}
diff --git a/apps/documenteditor/mobile/resources/less/ios/_icons.less b/apps/documenteditor/mobile/resources/less/ios/_icons.less
new file mode 100644
index 000000000..9f7395ebc
--- /dev/null
+++ b/apps/documenteditor/mobile/resources/less/ios/_icons.less
@@ -0,0 +1,198 @@
+// Icons
+i.icon {
+  &.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="@{themeColor}"><g><path d="M15.8,15c1.4-1.6,2.2-3.7,2.2-5.9c0-5-4-9-9-9C4,0,0,4,0,9c0,5,4,9,9,9c2.3,0,4.4-0.9,5.9-2.2l5.8,5.8l0.2-0.6l0.7-0.2L15.8,15z M9,17c-4.4,0-8-3.6-8-8c0-4.4,3.6-8,8-8c4.4,0,8,3.6,8,8C17,13.5,13.5,17,9,17z"/></g></svg>');
+  }
+  &.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="0 0 22 22" fill="@{themeColor}"><g><rect x="2" y="17" width="18" height="1"/><rect x="2" y="13" width="18" height="1"/><rect x="2" y="9" width="18" height="1"/><rect x="2" y="5" width="18" height="1"/></g></svg>');
+  }
+  &.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="@{themeColor}"><g><path d="M0,20h22v1H0V20z"/><polygon points="19.3,5.3 6.1,18.4 4.6,16.9 17.8,3.8 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>');
+  }
+  &.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="@{themeColor}"><g><path d="M22,16v2h-1v-2l0,0c0-2.9-2.1-5-5-5l0,0H1.9L5,14c0.1,0.1,0.1,0.2,0,0.3l-0.4,0.4c-0.1,0.1-0.2,0.1-0.3,0l-4.2-4.2c-0.1-0.1-0.1-0.2,0-0.3l0.4-0.4h0.1L4.4,6c0.1-0.1,0.2-0.1,0.3,0l0.5,0.4c0.1,0.1,0.1,0.2,0,0.3L1.9,10H16l0,0C19.3,10,22,12.7,22,16L22,16z"/></g></svg>');
+  }
+  &.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="@{themeColor}"><g><path d="M0,16c0-3.3,2.7-6,6-6v0h14.1l-3.3-3.3c-0.1-0.1-0.1-0.2,0-0.3L17.3,6c0.1-0.1,0.2-0.1,0.3,0l3.8,3.8c0,0,0.1,0,0.1,0l0.4,0.4c0.1,0.1,0.1,0.2,0,0.3l-4.2,4.2c-0.1,0.1-0.2,0.1-0.3,0l-0.4-0.4c-0.1-0.1-0.1-0.2,0-0.3l3.1-3H6v0c-2.9,0-5,2.1-5,5h0v2H0L0,16L0,16z"/></g></svg>');
+  }
+  &.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="@{themeColor}"><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>');
+  }
+  &.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" x="0px" y="0px" viewBox="-1 3 22 28" fill="@{themeColor}"><g><polygon points="10,5.6 10,21.2 11,21.2 11,5.6 14.6,9.3 15.3,8.5 10.5,3.6 5.7,8.5 6.4,9.3 	"/><polygon points="13,12 13,13 19,13 19,30 2,30 2,13 8,13 8,12 1,12 1,13 1,30 1,31 20,31 20,30 20,13 20,12 	"/></g></svg>');
+  }
+  &.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="@{themeColor}"><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>');
+  }
+  &.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="@{themeColor}"><g><path d="M22,12H12v10h-1V12H1v-1h10V1h1v10h10V12z"/></g></svg>');
+  }
+  &.icon-settings {
+    width: 24px;
+    height: 24px;
+    .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="@{themeColor}"><g><path d="M11.8,3l0.4,2c0.1,0.7,0.6,1.1,1.3,1.1c0.3,0,0.5-0.1,0.7-0.2l1.9-1.2l1.1,1.1l-1.1,1.8C15.8,8,15.8,8.5,16,8.9c0.2,0.4,0.5,0.7,1,0.8l2.1,0.5v1.6L17,12.2c-0.5,0.1-0.8,0.4-1,0.8c-0.2,0.4-0.1,0.9,0.1,1.2l1.2,1.9l-1.1,1.1l-1.8-1.1c-0.2-0.2-0.5-0.2-0.8-0.2c-0.6,0-1.2,0.5-1.3,1.1l-0.5,2.1h-1.6l-0.4-2C9.7,16.4,9.2,16,8.5,16c-0.3,0-0.5,0.1-0.7,0.2l-1.9,1.2l-1.1-1.1l1.1-1.8c0.3-0.4,0.3-0.9,0.1-1.3c-0.2-0.4-0.5-0.7-1-0.8l-2.1-0.5v-1.6l2-0.4c0.5-0.1,0.8-0.4,1-0.8C6.1,8.7,6,8.2,5.8,7.9l-1-2l1.1-1.1l1.8,1.1C8,6.1,8.2,6.2,8.5,6.2c0.6,0,1.2-0.5,1.3-1.1L10.3,3H11.8 M11,15.5c2.5,0,4.5-2,4.5-4.5s-2-4.5-4.5-4.5s-4.5,2-4.5,4.5S8.5,15.5,11,15.5 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.2c-0.1,0-0.2,0-0.3,0.1l-2.1,1.3C13.6,5,13.6,5,13.5,5c-0.1,0-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>');
+  }
+  &.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="@{themeColor}"><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>');
+  }
+  &.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="@{themeColor}"><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>');
+  }
+  &.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="@{themeColor}"><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>');
+  }
+  &.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="@{themeColor}"><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="@{themeColor}"><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="@{themeColor}"><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="@{themeColor}"><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="@{themeColor}"><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="@{themeColor}"><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="@{themeColor}"><g><path d="M1,3v1h21V3H1z M4,7v1h14V7H4z M1,12h21v-1H1V12z M4,15v1h14v-1H4z M1,20h21v-1H1V20z"/></g></svg>');
+  }
+  &.icon-text-align-jast {
+    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="@{themeColor}"><g><path d="M1,3v1h21V3H1z M1,8h21V7H1V8z M1,12h21v-1H1V12z M1,16h21v-1H1V16z M1,20h21v-1H1V20z"/></g></svg>');
+  }
+  &.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="@{themeColor}"><g><path d="M1,3v1h21V3H1z M15,7H1v1h14V7z M1,12h21v-1H1V12z M15,15H1v1h14V15z M1,20h21v-1H1V20z"/></g></svg>');
+  }
+  &.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="@{themeColor}"><g><path d="M1,3v1h21V3H1z M8,8h14V7H8V8z M22,11H1v1h21V11z M8,16h14v-1H8V16z M22,19H1v1h21V19z"/></g></svg>');
+  }
+  &.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="@{themeColor}"><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>');
+  }
+  &.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="@{themeColor}"><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>');
+  }
+  &.icon-prev {
+    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="@{themeColor}"><g><path d="M16,20.5L15,21.5L4.5,11l0,0l0,0L15,0.5L16,1.5L6.6,11L16,20.5z"/></g></svg>');
+  }
+  &.icon-next {
+    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="@{themeColor}"><g><path d="M15.5,11L6,1.5l1.1-1.1L17.5,11l0,0l0,0L7.1,21.5L6,20.5L15.5,11z"/></g></svg>');
+  }
+  &.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="@{themeColor}"><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>');
+  }
+  &.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="@{themeColor}"><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>');
+  }
+  &.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="@{themeColor}"><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>');
+  }
+  &.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="@{themeColor}"><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>');
+  }
+  &.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="@{themeColor}"><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>');
+  }
+  &.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="@{themeColor}"><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>');
+  }
+  &.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="@{themeColor}"><g><path d="M20.5,6.5l1.1,1.1L11,18l0,0l0,0L0.5,7.5l1.1-1.1l9.5,9.5L20.5,6.5z"/></g></svg>');
+  }
+  &.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="@{themeColor}"><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>');
+  }
+  &.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="@{themeColor}"><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>');
+  }
+  &.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="@{themeColor}"><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>');
+  }
+  &.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="@{themeColor}"><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>');
+  }
+  &.icon-link {
+    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="@{themeColor}"><g><path d="M12.4,9.8c0,0-2.1-0.1-3.8,1.2c-2.8,2-3.3,4.3-3.3,4.3s1.6-1.7,3.5-2.5c1.7-0.7,3.7-0.4,3.7-0.4v1.9l4.8-3.3V11l-4.8-3.3V9.8z M11,1C5.5,1,1,5.5,1,11c0,5.5,4.5,10,10,10s10-4.5,10-10C21,5.5,16.5,1,11,1z M11,20c-5,0-9-4.1-9-9C2,6,6,2,11,2s9,4.1,9,9C20,16,16,20,11,20z"/></g></svg>');
+  }
+}
\ No newline at end of file
diff --git a/apps/documenteditor/mobile/resources/less/ios/_search.less b/apps/documenteditor/mobile/resources/less/ios/_search.less
new file mode 100644
index 000000000..f032af5a0
--- /dev/null
+++ b/apps/documenteditor/mobile/resources/less/ios/_search.less
@@ -0,0 +1,107 @@
+// Search
+
+.tablet {
+  // Replace mode
+  .searchbar.document.replace {
+    .center {
+      .searchbar-input:first-child {
+        margin-right: 10px;
+      }
+
+      .replace {
+        display: block;
+      }
+    }
+
+    .right {
+      .replace {
+        display: flex;
+        margin: 0 10px;
+      }
+    }
+  }
+
+  // Search mode
+  .searchbar.document {
+    .center {
+      width: 100%;
+
+      .replace {
+        display: none;
+      }
+    }
+
+    .right {
+      .prev {
+        margin-left: 0;
+      }
+
+      .replace {
+        display: none;
+      }
+    }
+  }
+}
+
+.phone {
+  // Replace mode
+  .searchbar.document.replace {
+    height: 88px;
+
+    .left {
+      margin-top: -44px;
+    }
+
+    .center {
+      .searchbar-input {
+        margin: 8px 0;
+      }
+
+      .replace {
+        display: block;
+      }
+    }
+
+    .right {
+      .replace {
+        display: flex;
+      }
+    }
+  }
+
+  // Search mode
+  .searchbar.document {
+    .left,
+    .center,
+    .right {
+      flex-direction: column;
+    }
+
+    .left {
+      min-width: 22px;
+      max-width: 22px;
+    }
+
+    .center {
+      width: 100%;
+
+      .replace {
+        display: none;
+      }
+    }
+
+    .right {
+      > p {
+        margin: 0;
+      }
+
+      .replace {
+        display: none;
+      }
+    }
+  }
+}
+
+.searchbar.document {
+  background: lighten(@searchbarBg, 10%);
+}
\ No newline at end of file
diff --git a/apps/documenteditor/mobile/resources/less/material/_icons.less b/apps/documenteditor/mobile/resources/less/material/_icons.less
new file mode 100644
index 000000000..321b5376d
--- /dev/null
+++ b/apps/documenteditor/mobile/resources/less/material/_icons.less
@@ -0,0 +1,224 @@
+// Icons
+i.icon {
+  &.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>');
+  }
+  &.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>');
+  }
+  &.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="@{themeColor}"><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>');
+  }
+  &.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="@{themeColor}"><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>');
+  }
+  &.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="@{themeColor}"><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>');
+  }
+  &.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" x="0px" y="0px" viewBox="-1 3 22 28" fill="@{themeColor}"><g><polygon id="XMLID_3_" points="10,5.6 10,21.2 11,21.2 11,5.6 14.6,9.3 15.3,8.5 10.5,3.6 5.7,8.5 6.4,9.3 	"/><polygon id="XMLID_6_" points="13,12 13,13 19,13 19,30 2,30 2,13 8,13 8,12 1,12 1,13 1,30 1,31 20,31 20,30 20,13 20,12 	"/></g></svg>');
+  }
+  &.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="@{themeColor}"><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>');
+  }
+  &.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="@{themeColor}"><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>');
+  }
+  &.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="@{themeColor}"><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>');
+  }
+  &.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="@{themeColor}"><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>');
+  }
+  //&.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="@{themeColor}"><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="@{themeColor}"><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="@{themeColor}"><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="@{themeColor}"><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="@{themeColor}"><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="@{themeColor}"><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="@{themeColor}"><g><path d="M1,3v1h21V3H1z M4,7v1h14V7H4z M1,12h21v-1H1V12z M4,15v1h14v-1H4z M1,20h21v-1H1V20z"/></g></svg>');
+  }
+  &.icon-text-align-jast {
+    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="@{themeColor}"><g><path d="M1,3v1h21V3H1z M1,8h21V7H1V8z M1,12h21v-1H1V12z M1,16h21v-1H1V16z M1,20h21v-1H1V20z"/></g></svg>');
+  }
+  &.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="@{themeColor}"><g><path d="M1,3v1h21V3H1z M15,7H1v1h14V7z M1,12h21v-1H1V12z M15,15H1v1h14V15z M1,20h21v-1H1V20z"/></g></svg>');
+  }
+  &.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="@{themeColor}"><g><path d="M1,3v1h21V3H1z M8,8h14V7H8V8z M22,11H1v1h21V11z M8,16h14v-1H8V16z M22,19H1v1h21V19z"/></g></svg>');
+  }
+  &.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="@{themeColor}"><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>');
+  }
+  &.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="@{themeColor}"><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>');
+  }
+  &.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="@{themeColor}"><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>');
+  }
+  &.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="@{themeColor}"><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>');
+  }
+  &.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="@{themeColor}"><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>');
+  }
+  &.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="@{themeColor}"><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>');
+  }
+  &.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="@{themeColor}"><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>');
+  }
+  &.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="@{themeColor}"><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>');
+  }
+  &.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="@{themeColor}"><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>');
+  }
+  &.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="@{themeColor}"><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>');
+  }
+  &.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="@{themeColor}"><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>');
+  }
+  &.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="@{themeColor}"><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>');
+  }
+  &.icon-link {
+    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="@{themeColor}"><g><path d="M12.4,9.8c0,0-2.1-0.1-3.8,1.2c-2.8,2-3.3,4.3-3.3,4.3s1.6-1.7,3.5-2.5c1.7-0.7,3.7-0.4,3.7-0.4v1.9l4.8-3.3V11l-4.8-3.3V9.8z M11,1C5.5,1,1,5.5,1,11c0,5.5,4.5,10,10,10s10-4.5,10-10C21,5.5,16.5,1,11,1z M11,20c-5,0-9-4.1-9-9C2,6,6,2,11,2s9,4.1,9,9C20,16,16,20,11,20z"/></g></svg>');
+  }
+}
+
+// Overwrite color for toolbar
+.navbar {
+  i.icon {
+    &.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>');
+    }
+    &.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>');
+    }
+    &.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>');
+    }
+    &.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>');
+    }
+    &.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>');
+    }
+    &.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>');
+    }
+    &.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>');
+    }
+    &.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>');
+    }
+    &.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>');
+    }
+    &.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>');
+    }
+  }
+}
\ No newline at end of file
diff --git a/apps/documenteditor/mobile/resources/less/material/_search.less b/apps/documenteditor/mobile/resources/less/material/_search.less
new file mode 100644
index 000000000..e69de29bb