From 9bf34e2baf6aa4161d421404c4d72eb6d24ff7d9 Mon Sep 17 00:00:00 2001
From: Julia Radzhabova <Julia.Radzhabova@onlyoffice.com>
Date: Tue, 13 Jun 2023 21:59:40 +0300
Subject: [PATCH] Fix paddings for rtl

---
 apps/common/main/lib/component/Window.js      |   2 +-
 .../common/main/lib/view/AutoCorrectDialog.js |   2 +-
 apps/common/main/lib/view/History.js          |   2 +-
 .../main/lib/view/ListSettingsDialog.js       |  20 +--
 apps/common/main/lib/view/OpenDialog.js       |   2 +-
 apps/common/main/lib/view/ReviewChanges.js    |   4 +-
 apps/common/main/lib/view/SignDialog.js       |   2 +-
 .../common/main/lib/view/SymbolTableDialog.js |  16 +--
 .../less/advanced-settings-window.less        |   6 +-
 .../main/resources/less/asc-mixins.less       | 122 ++++++++++++++++++
 apps/common/main/resources/less/buttons.less  |  25 ++--
 apps/common/main/resources/less/chat.less     |  10 ++
 apps/common/main/resources/less/checkbox.less |   7 +-
 .../main/resources/less/combo-dataview.less   |  41 ++----
 apps/common/main/resources/less/combobox.less |  23 ++--
 apps/common/main/resources/less/comments.less |   7 +-
 apps/common/main/resources/less/common.less   |   5 +-
 apps/common/main/resources/less/dataview.less |   3 +
 .../main/resources/less/dropdown-menu.less    |   6 +-
 apps/common/main/resources/less/header.less   |   6 +
 apps/common/main/resources/less/history.less  |  21 +--
 apps/common/main/resources/less/input.less    |   7 +-
 .../main/resources/less/language-dialog.less  |   6 +-
 apps/common/main/resources/less/listview.less |   9 +-
 .../main/resources/less/opendialog.less       |   3 +
 apps/common/main/resources/less/plugins.less  |   6 +-
 .../main/resources/less/searchdialog.less     |  10 +-
 apps/common/main/resources/less/slider.less   |   7 +-
 apps/common/main/resources/less/spinner.less  |  12 +-
 .../main/resources/less/synchronize-tip.less  |   8 +-
 apps/common/main/resources/less/toolbar.less  |  42 ++----
 apps/common/main/resources/less/treeview.less |   3 +
 .../main/resources/less/updown-picker.less    |  11 +-
 apps/common/main/resources/less/window.less   |  33 +----
 .../template/DropcapSettingsAdvanced.template |  14 +-
 .../main/app/template/FormSettings.template   |   4 +-
 .../template/ImageSettingsAdvanced.template   |   4 +-
 .../ParagraphSettingsAdvanced.template        |  12 +-
 .../main/app/view/CrossReferenceDialog.js     |   4 +-
 .../main/app/view/CustomColumnsDialog.js      |   2 +-
 .../main/app/view/DocumentHolder.js           |   2 +-
 .../main/app/view/FileMenuPanels.js           |   4 +-
 .../main/app/view/FormSettings.js             |   4 +-
 .../main/app/view/ListIndentsDialog.js        |   2 +-
 .../main/app/view/ListSettingsDialog.js       |  40 +++---
 .../main/app/view/PageSizeDialog.js           |   2 +-
 .../main/app/view/RoleEditDlg.js              |   4 +-
 .../main/app/view/RolesManagerDlg.js          |   4 +-
 .../main/app/view/SaveFormDlg.js              |   2 +-
 .../main/app/view/TableFormulaDialog.js       |   2 +-
 apps/documenteditor/main/app/view/Toolbar.js  |   2 +-
 .../resources/less/advanced-settings.less     |  76 +----------
 .../main/resources/less/filemenu.less         |  27 +---
 .../main/resources/less/leftmenu.less         |   2 +-
 .../main/resources/less/rightmenu.less        |   4 +
 .../main/resources/less/statusbar.less        |   6 +-
 .../main/resources/less/thumbnails.less       |   5 +-
 .../main/resources/less/toolbar.less          |  32 +----
 .../app/template/HeaderFooterDialog.template  |   4 +-
 .../ParagraphSettingsAdvanced.template        |   6 +-
 .../main/app/view/DocumentHolder.js           |   2 +-
 .../main/app/view/FileMenuPanels.js           |   4 +-
 .../main/app/view/SlideSizeSettings.js        |   4 +-
 .../resources/less/advanced-settings.less     |  51 --------
 .../main/resources/less/leftmenu.less         |  28 +---
 .../main/resources/less/rightmenu.less        |   4 +
 .../main/resources/less/statusbar.less        |   6 +-
 .../app/template/ChartSettingsDlg.template    |  20 +--
 .../template/DataValidationDialog.template    |   8 +-
 .../ParagraphSettingsAdvanced.template        |   6 +-
 .../main/app/template/StatusBar.template      |   2 +-
 .../main/app/template/ToolbarAnother.template |   2 +-
 .../main/app/view/CreatePivotDialog.js        |   2 +-
 .../main/app/view/ExternalLinksDlg.js         |   2 +-
 .../main/app/view/FileMenuPanels.js           |   4 +-
 .../main/app/view/FormatRulesEditDlg.js       |   2 +-
 .../main/app/view/FormulaWizard.js            |   4 +-
 .../main/app/view/ImportFromXmlDialog.js      |   2 +-
 .../main/app/view/NamedRangePasteDlg.js       |   2 +-
 .../main/app/view/PageMarginsDialog.js        |   4 +-
 .../main/app/view/PivotGroupDialog.js         |   8 +-
 .../main/app/view/PrintTitlesDialog.js        |   8 +-
 .../main/app/view/ProtectDialog.js            |   4 +-
 .../main/app/view/ProtectRangesDlg.js         |   4 +-
 .../app/view/ProtectedRangesManagerDlg.js     |   4 +-
 .../main/app/view/ScaleDialog.js              |   4 +-
 .../main/app/view/Statusbar.js                |   2 +-
 .../main/app/view/WatchDialog.js              |  10 +-
 .../resources/less/advanced-settings.less     |  93 +------------
 .../main/resources/less/filterdialog.less     |   2 +-
 .../main/resources/less/leftmenu.less         |  53 +++-----
 .../main/resources/less/rightmenu.less        |   6 +-
 .../main/resources/less/statusbar.less        |  76 ++---------
 .../main/resources/less/toolbar.less          |  18 +--
 94 files changed, 445 insertions(+), 765 deletions(-)

diff --git a/apps/common/main/lib/component/Window.js b/apps/common/main/lib/component/Window.js
index 4e9b3a2380..33a78463bc 100644
--- a/apps/common/main/lib/component/Window.js
+++ b/apps/common/main/lib/component/Window.js
@@ -475,7 +475,7 @@ define([
             
             var template =  '<div class="info-box">' +
                                 '<% if (typeof iconCls !== "undefined") { %><div class="icon <%= iconCls %>"></div><% } %>' +
-                                '<div class="text" dir="ltr" <% if (typeof iconCls == "undefined") { %> style="padding-left:10px;" <% } %>><span><%= msg %></span>' +
+                                '<div class="text" dir="ltr" <% if (typeof iconCls == "undefined") { %>' + (Common.UI.isRTL() ? ' style="padding-right:10px;"' : ' style="padding-left:10px;"') + '<% } %>><span><%= msg %></span>' +
                                     '<% if (dontshow) { %><div class="dont-show-checkbox"></div><% } %>' +
                                 '</div>' +
                             '</div>' +
diff --git a/apps/common/main/lib/view/AutoCorrectDialog.js b/apps/common/main/lib/view/AutoCorrectDialog.js
index a6c287918a..26c327c1ca 100644
--- a/apps/common/main/lib/view/AutoCorrectDialog.js
+++ b/apps/common/main/lib/view/AutoCorrectDialog.js
@@ -151,7 +151,7 @@ define([ 'text!common/main/lib/template/AutoCorrectDialog.template',
                 template: _.template(['<div class="listview inner" style=""></div>'].join('')),
                 itemTemplate: _.template([
                     '<div id="<%= id %>" class="list-item" style="pointer-events:none;width: 100%;display:flex;">',
-                        '<div style="width:110px;padding-right: 5px;overflow: hidden;text-overflow: ellipsis;<% if (defaultDisabled) { %> font-style:italic; opacity: 0.5;<% } %>"><%= replaced %></div>',
+                        '<div class="padding-right-5" style="width:110px;overflow: hidden;text-overflow: ellipsis;<% if (defaultDisabled) { %> font-style:italic; opacity: 0.5;<% } %>"><%= replaced %></div>',
                         '<div style="width:230px;overflow-x: clip;overflow-y:visible;text-overflow: ellipsis;flex-grow:1;font-family: Cambria Math;font-size:13px;white-space: nowrap;<% if (defaultDisabled) { %> font-style:italic; opacity: 0.5;<% } %>"><%= by %></div>',
                     '</div>'
                 ].join('')),
diff --git a/apps/common/main/lib/view/History.js b/apps/common/main/lib/view/History.js
index 16040af9c2..aa0172b25f 100644
--- a/apps/common/main/lib/view/History.js
+++ b/apps/common/main/lib/view/History.js
@@ -82,7 +82,7 @@ define([
                 enableKeyEvents: false,
                 itemTemplate: _.template([
                     '<div id="<%= id %>" class="history-item-wrap ' + '<% if (!isVisible) { %>' + 'hidden' + '<% } %>' + '" ',
-                    'style="display: block; ' + '<% if (!isRevision) { %>' + 'padding-left: 40px;' + '<% } %>' + '<% if (canRestore && selected) { %>' + 'padding-bottom: 6px;' + '<% } %>' +'">',
+                    'style="display: block; ' + '<% if (!isRevision) { %>' + (Common.UI.isRTL() ? 'padding-right: 40px;' : 'padding-left: 40px;') + '<% } %>' + '<% if (canRestore && selected) { %>' + 'padding-bottom: 6px;' + '<% } %>' +'">',
                         '<div class="user-date"><%= created %></div>',
                         '<% if (markedAsVersion) { %>',
                         '<div class="user-version">' + this.textVer + '<%=version%></div>',
diff --git a/apps/common/main/lib/view/ListSettingsDialog.js b/apps/common/main/lib/view/ListSettingsDialog.js
index 9d1ad05214..31e852a4ee 100644
--- a/apps/common/main/lib/view/ListSettingsDialog.js
+++ b/apps/common/main/lib/view/ListSettingsDialog.js
@@ -84,29 +84,29 @@ define([
                     '<div style="height:120px;">',
                         '<table cols="3">',
                             '<tr>',
-                                '<td class="padding-right" style="padding-bottom: 8px;min-width: 50px;">',
+                                '<td class="padding-right-5" style="padding-bottom: 8px;min-width: 50px;">',
                                     '<label class="text">' + this.txtType + '</label>',
                                 '</td>',
-                                '<td class="padding-right" style="padding-bottom: 8px;width: 105px;">',
+                                '<td class="padding-right-5" style="padding-bottom: 8px;width: 105px;">',
                                     '<div id="id-dlg-list-numbering-format" class="input-group-nr" style="width: 105px;"></div>',
                                     '<div id="id-dlg-list-bullet-format" class="input-group-nr" style="width: 105px;"></div>',
                                 '</td>',
                                 '<td style="padding-bottom: 8px;"></td>',
                             '</tr>',
                             '<tr class="image">',
-                                '<td class="padding-right" style="padding-bottom: 8px;min-width: 50px;">',
+                                '<td class="padding-right-5" style="padding-bottom: 8px;min-width: 50px;">',
                                     '<label class="text">' + this.txtImport + '</label>',
                                 '</td>',
-                                '<td class="padding-right" style="padding-bottom: 8px;width: 105px;">',
+                                '<td class="padding-right-5" style="padding-bottom: 8px;width: 105px;">',
                                     '<div id="id-dlg-list-image" style="width: 105px;"></div>',
                                 '</td>',
                                 '<td style="padding-bottom: 8px;"></td>',
                             '</tr>',
                             '<tr>',
-                                '<td class="padding-right" style="padding-bottom: 8px;min-width: 50px;">',
+                                '<td class="padding-right-5" style="padding-bottom: 8px;min-width: 50px;">',
                                     '<label class="text">' + this.txtSize + '</label>',
                                 '</td>',
-                                '<td class="padding-right" style="padding-bottom: 8px;width: 105px;">',
+                                '<td class="padding-right-5" style="padding-bottom: 8px;width: 105px;">',
                                     '<div id="id-dlg-list-size"></div>',
                                 '</td>',
                                 '<td style="padding-bottom: 8px;">',
@@ -114,19 +114,19 @@ define([
                                 '</td>',
                             '</tr>',
                             '<tr class="numbering">',
-                                '<td class="padding-right" style="padding-bottom: 8px;min-width: 50px;">',
+                                '<td class="padding-right-5" style="padding-bottom: 8px;min-width: 50px;">',
                                     '<label class="text" style="white-space: nowrap;">' + this.txtStart + '</label>',
                                 '</td>',
-                                '<td class="padding-right" style="padding-bottom: 8px;width: 105px;">',
+                                '<td class="padding-right-5" style="padding-bottom: 8px;width: 105px;">',
                                     '<div id="id-dlg-list-start"></div>',
                                 '</td>',
                                 '<td style="padding-bottom: 8px;"></td>',
                             '</tr>',
                             '<tr class="color">',
-                                '<td class="padding-right" style="padding-bottom: 8px;min-width: 50px;">',
+                                '<td class="padding-right-5" style="padding-bottom: 8px;min-width: 50px;">',
                                     '<label class="text">' + this.txtColor + '</label>',
                                 '</td>',
-                                '<td class="padding-right" style="padding-bottom: 8px;width: 105px;">',
+                                '<td class="padding-right-5" style="padding-bottom: 8px;width: 105px;">',
                                     '<div id="id-dlg-list-color"></div>',
                                 '</td>',
                                 '<td style="padding-bottom: 8px;"></td>',
diff --git a/apps/common/main/lib/view/OpenDialog.js b/apps/common/main/lib/view/OpenDialog.js
index af4cefd967..c717d1b2ca 100644
--- a/apps/common/main/lib/view/OpenDialog.js
+++ b/apps/common/main/lib/view/OpenDialog.js
@@ -99,7 +99,7 @@ define([
                         '<% if (warning) { %>',
                         '<div>',
                             '<div class="icon warn"></div>',
-                            '<div style="padding-left: 50px;"><div style="font-size: 12px;">' + (typeof _options.warningMsg=='string' ? _options.warningMsg : t.txtProtected) + '</div>',
+                            '<div class="padding-left-50"><div style="font-size: 12px;">' + (typeof _options.warningMsg=='string' ? _options.warningMsg : t.txtProtected) + '</div>',
                                 '<label class="header" style="margin-top: 15px;">' + t.txtPassword + '</label>',
                                 '<div id="id-password-txt" style="width: 290px;"></div></div>',
                         '</div>',
diff --git a/apps/common/main/lib/view/ReviewChanges.js b/apps/common/main/lib/view/ReviewChanges.js
index 9aab98af7c..664eb1212a 100644
--- a/apps/common/main/lib/view/ReviewChanges.js
+++ b/apps/common/main/lib/view/ReviewChanges.js
@@ -90,10 +90,10 @@ define([
                 '<div class="group">' +
                     '<span id="btn-review-on" class="btn-slot text x-huge"></span>' +
                 '</div>' +
-                '<div class="group no-group-mask review" style="padding-left: 0;">' +
+                '<div class="group no-group-mask review" style="padding-left: 0;padding-right:0;">' +
                     '<span id="btn-review-view" class="btn-slot text x-huge"></span>' +
                 '</div>' +
-                '<div class="group move-changes" style="padding-left: 0;">' +
+                '<div class="group move-changes" style="padding-left: 0;padding-right:0;">' +
                     '<span id="btn-change-prev" class="btn-slot text x-huge"></span>' +
                     '<span id="btn-change-next" class="btn-slot text x-huge"></span>' +
                     '<span id="btn-change-accept" class="btn-slot text x-huge"></span>' +
diff --git a/apps/common/main/lib/view/SignDialog.js b/apps/common/main/lib/view/SignDialog.js
index 7ea37f36f2..7289e3d13b 100644
--- a/apps/common/main/lib/view/SignDialog.js
+++ b/apps/common/main/lib/view/SignDialog.js
@@ -104,7 +104,7 @@ define([
                     '<table style="margin-top: 30px;">',
                         '<tr>',
                             '<td><label style="font-weight: bold;margin-bottom: 3px;">' + this.textCertificate + '</label></td>' +
-                            '<td rowspan="2" style="vertical-align: top; padding-left: 20px;"><button id="id-dlg-sign-change" class="btn btn-text-default float-right">' + this.textSelect + '</button></td>',
+                            '<td rowspan="2" class="padding-left-20" style="vertical-align: top;"><button id="id-dlg-sign-change" class="btn btn-text-default float-right">' + this.textSelect + '</button></td>',
                         '</tr>',
                         '<tr><td><div id="id-dlg-sign-certificate" class="hidden" style="max-width: 240px;overflow: hidden;white-space: nowrap;"></td></tr>',
                     '</table>',
diff --git a/apps/common/main/lib/view/SymbolTableDialog.js b/apps/common/main/lib/view/SymbolTableDialog.js
index 43d154fef3..cc68c3fcfa 100644
--- a/apps/common/main/lib/view/SymbolTableDialog.js
+++ b/apps/common/main/lib/view/SymbolTableDialog.js
@@ -416,11 +416,11 @@ define([
                     '<div id="symbol-table-pnl-symbols">',
                         '<table cols="2" style="width: 100%;max-width: 497px;">',
                             '<tr>',
-                                '<td class="padding-right" style="padding-bottom: 8px;width: 50%;">',
+                                '<td class="padding-right-5" style="padding-bottom: 8px;width: 50%;">',
                                     '<label class="input-label">' + this.textFont + '</label>',
                                     '<div id="symbol-table-cmb-fonts"></div>',
                                 '</td>',
-                                '<td class="padding-left" style="padding-bottom: 8px;">',
+                                '<td class="padding-left-5" style="padding-bottom: 8px;">',
                                     '<label class="input-label">' + this.textRange + '</label>',
                                     '<div id="symbol-table-cmb-range"></div>',
                                 '</td>',
@@ -449,17 +449,17 @@ define([
                         '</table>',
                         '<table cols="2" style="width: 100%;max-width: 497px;">',
                             '<tr>',
-                                '<td class="padding-right" style="width: 50%;">',
+                                '<td class="padding-right-5" style="width: 50%;">',
                                     '<label class="input-label">' + this.textCode + '</label>',
                                 '</td>',
-                                '<td class="padding-left">',
+                                '<td class="padding-left-5">',
                                 '</td>',
                             '</tr>',
                             '<tr>',
-                                '<td class="padding-right">',
+                                '<td class="padding-right-5">',
                                     '<div id="symbol-table-text-code" oo_editor_input="true"></div>',
                                 '</td>',
-                                '<td class="padding-left">',
+                                '<td class="padding-left-5">',
                                     '<div id="symbol-table-label-font" style="overflow: hidden; text-overflow: ellipsis;white-space: nowrap;max-width: 160px;"></div>',
                                 '</td>',
                             '</tr>',
@@ -754,8 +754,8 @@ define([
                 cls: 'dbl-clickable',
                 itemTemplate: _.template([
                     '<div id="<%= id %>" class="list-item" style="width: 100%;display:flex;">',
-                        '<div style="width:70px;text-align: center; padding-right: 5px;"><%= symbol %></div>',
-                        '<div style="flex-grow:1;padding-right: 5px;"><%= description %></div>',
+                        '<div class="padding-right-5" style="width:70px;text-align: center;"><%= symbol %></div>',
+                        '<div class="padding-right-5" style="flex-grow:1;"><%= description %></div>',
                         '<% if (' + this.showShortcutKey + ') { %>',
                             '<div style="width:105px;"><%= shortcutKey %></div>',
                         '<% } %>',
diff --git a/apps/common/main/resources/less/advanced-settings-window.less b/apps/common/main/resources/less/advanced-settings-window.less
index 25e8a5a1cc..95c299abe3 100644
--- a/apps/common/main/resources/less/advanced-settings-window.less
+++ b/apps/common/main/resources/less/advanced-settings-window.less
@@ -36,7 +36,9 @@
         .content-panel {
             vertical-align: top;
             padding: 5px 15px 0 10px;
-
+            .rtl & {
+                padding: 5px 10px 0 15px;
+            }
             .inner-content {
                 padding-left: 10px;
                 padding-right: 10px;
@@ -74,7 +76,7 @@
             margin: auto;
             text-align: center;
             overflow: hidden;
-            padding-right: 4px;
+            .padding-right-4();
             .svg-mirror{
                 margin-right: 1px;
             }
diff --git a/apps/common/main/resources/less/asc-mixins.less b/apps/common/main/resources/less/asc-mixins.less
index 2f23254f5f..4a3cc192fc 100644
--- a/apps/common/main/resources/less/asc-mixins.less
+++ b/apps/common/main/resources/less/asc-mixins.less
@@ -582,6 +582,128 @@
     .margin-left(22px);
 }
 
+.padding-x(@left, @right) {
+    padding-left: @left;
+    padding-right: @right;
+
+    .rtl & {
+        padding-left: @right;
+        padding-right: @left;
+    }
+}
+
+.padding-left(@value) {
+    padding-left: @value;
+    padding-right: 0;
+
+    .rtl & {
+        padding-left: 0;
+        padding-right: @value;
+    }
+}
+
+.padding-left-4 {
+    .padding-left(4px);
+}
+
+.padding-left-5 {
+    .padding-left(5px);
+}
+
+.padding-left-6 {
+    .padding-left(6px);
+}
+
+.padding-left-8 {
+    .padding-left(8px);
+}
+
+.padding-left-10 {
+    .padding-left(10px);
+}
+
+.padding-left-12 {
+    .padding-left(12px);
+}
+
+.padding-left-15 {
+    .padding-left(15px);
+}
+
+.padding-left-20 {
+    .padding-left(20px);
+}
+
+.padding-left-22 {
+    .padding-left(22px);
+}
+
+.padding-left-28 {
+    .padding-left(28px);
+}
+
+.padding-left-32 {
+    .padding-left(32px);
+}
+
+.padding-left-40 {
+    .padding-left(40px);
+}
+
+.padding-left-50 {
+    .padding-left(50px);
+}
+
+.padding-right(@value) {
+    padding-right: @value;
+    padding-left: 0;
+
+    .rtl & {
+        padding-right: 0;
+        padding-left: @value;
+    }
+}
+
+.padding-right-1 {
+    .padding-right(1px);
+}
+
+.padding-right-4 {
+    .padding-right(4px);
+}
+
+.padding-right-5 {
+    .padding-right(5px);
+}
+
+.padding-right-6 {
+    .padding-right(6px);
+}
+
+.padding-right-8 {
+    .padding-right(8px);
+}
+
+.padding-right-10 {
+    .padding-right(10px);
+}
+
+.padding-right-12 {
+    .padding-right(12px);
+}
+
+.padding-right-15 {
+    .padding-right(15px);
+}
+
+.padding-right-20 {
+    .padding-right(20px);
+}
+
+.padding-right-40 {
+    .padding-right(40px);
+}
+
 //.adaptive-solid-border(@width, @color, @borderside: all) {
 //    @lb-border: if((@borderside = all), border, e('border-@{borderside}'));
 //    @lb-border-width: if((@borderside = all), border-width, e('border-@{borderside}-width'));
diff --git a/apps/common/main/resources/less/buttons.less b/apps/common/main/resources/less/buttons.less
index 0344b913e5..da254f03c3 100644
--- a/apps/common/main/resources/less/buttons.less
+++ b/apps/common/main/resources/less/buttons.less
@@ -307,7 +307,7 @@
                     margin: 0 1px 0 4px;
 
                     .rtl & {
-                        margin: 0 4px 0 1px;
+                        margin: 0 4px 0 3px;
                     }
                 }
 
@@ -326,6 +326,10 @@
             .pixel-ratio__2_5 & {
                 width: 100%;
             }
+
+            .rtl & {
+                padding: 1px 3px 1px 4px;
+            }
         }
 
         .icon:not(svg) {
@@ -400,14 +404,6 @@
     }
 }
 
-.icon-top.btn-group {
-    &.x-huge, .x-huge {
-        .inner-box-caption {
-            padding-right: 4px;
-        }
-    }
-}
-
 .icon-top {
     &.x-huge  {
         .btn&, .btn-group& .btn-toolbar {
@@ -901,13 +897,7 @@
 
 .color-menu.dropdown-menu.shifted-right {
     li > a {
-        padding-left: 32px;
-
-        .rtl & {
-            padding-left: 20px;
-            padding-right: 32px;
-        }
-
+        .padding-x(32px, 20px);
         span.color-auto {
             .margin-left(-18px);
             margin-top: 1px;
@@ -1147,6 +1137,9 @@
 
     &:not(.btn-toolbar).dropdown-toggle:first-child .inner-box-caret {
       padding: 0 1px 0 2px;
+        .rtl & {
+            padding: 0 2px 0 1px;
+        }
     }
 
     &:hover:not(.disabled),
diff --git a/apps/common/main/resources/less/chat.less b/apps/common/main/resources/less/chat.less
index 70f5b16287..f175a33404 100644
--- a/apps/common/main/resources/less/chat.less
+++ b/apps/common/main/resources/less/chat.less
@@ -54,6 +54,9 @@
                 &.offline {
                     display: none;
                 }
+                .rtl & {
+                    padding: 2px 20px 2px 0;
+                }
             }
         }
 
@@ -81,6 +84,9 @@
             overflow: hidden;
             line-height: normal;
             height: 16px;
+            .rtl & {
+                padding: 0 0 0 10px;
+            }
         }
     }
 
@@ -104,6 +110,10 @@
                 white-space: -o-pre-wrap;
                 word-wrap: break-word;
 
+                .rtl & {
+                    padding: 5px 20px 8px 10px;
+                }
+
                 .user {
                     .font-weight-bold();
                     white-space: nowrap;
diff --git a/apps/common/main/resources/less/checkbox.less b/apps/common/main/resources/less/checkbox.less
index 110f871efd..1c0e508a58 100644
--- a/apps/common/main/resources/less/checkbox.less
+++ b/apps/common/main/resources/less/checkbox.less
@@ -1,16 +1,11 @@
 .checkbox-indeterminate {
-    padding-left: 22px;
+    .padding-left-22();
     margin-bottom: 0;
     .font-size-normal();
     font-weight: normal;
     position: relative;
     min-height: 1em;
 
-    .rtl & {
-        padding-left: 0;
-        padding-right: 22px;
-    }
-
     input[type=checkbox] {
         display: none;
 
diff --git a/apps/common/main/resources/less/combo-dataview.less b/apps/common/main/resources/less/combo-dataview.less
index 17c521868c..03c3a7bf22 100644
--- a/apps/common/main/resources/less/combo-dataview.less
+++ b/apps/common/main/resources/less/combo-dataview.less
@@ -37,9 +37,11 @@
 
             &.dropdown-toggle {
                 .inner-box-caret {
-                    padding: 0 1px 0 0;
+                    &,
+                    .rtl & {
+                        padding: 0 1px 0 0;
+                    }
                 }
-
                 .caret {
 //                    width: 7px;
 //                    height: 7px;
@@ -101,7 +103,7 @@
 
     .view {
         .margin-right(-@combo-dataview-button-width);
-        padding-right: calc(@combo-dataview-button-width - @scaled-two-px-value);
+        .padding-right(calc(@combo-dataview-button-width - @scaled-two-px-value));
 
         .border-left-radius(0);
 
@@ -114,9 +116,6 @@
             margin: @minus-px 0 0 @minus-px;
         }
         .rtl & {
-            padding-right: 0;
-            padding-left: calc(@combo-dataview-button-width - @scaled-two-px-value);
-
             .border-radius(@border-radius-small);
             .border-right-radius(0);
 
@@ -258,12 +257,7 @@
 
     .view {
         .margin-right(-@combo-dataview-button-width);
-        padding-right: @combo-dataview-button-width;
-
-        .rtl & {
-            padding-right: 0;
-            padding-left: @combo-dataview-button-width;
-        }
+        .padding-right(@combo-dataview-button-width);
 
         .dataview {
             padding: 2px;
@@ -302,12 +296,7 @@
 
     .view {
         .margin-right(-@combo-dataview-button-width);
-        padding-right: @combo-dataview-button-width;
-
-        .rtl & {
-            padding-right: 0;
-            padding-left: @combo-dataview-button-width;
-        }
+        .padding-right(@combo-dataview-button-width);
     }
 
     .button {
@@ -344,7 +333,7 @@
     }
 
     .dropdown-menu {
-        padding-right: 2px;
+        .padding-x(1px, 2px);
     }
 
     .ps-scrollbar-y-rail {
@@ -395,12 +384,7 @@
 
     top: -4px;
     position: absolute;
-    padding-right: 12px;
-
-    .rtl & {
-        padding-right: 0;
-        padding-left: 12px;
-    }
+    .padding-right-12();
 
     .more-container & {
         position: static;
@@ -456,12 +440,7 @@
 
     .view {
         .margin-right(-@combo-dataview-button-width);
-        padding-right: calc(@combo-dataview-button-width - @scaled-one-px-value);
-
-        .rtl & {
-            padding-right: 0;
-            padding-left: calc(@combo-dataview-button-width - @scaled-one-px-value);
-        }
+        .padding-right(calc(@combo-dataview-button-width - @scaled-one-px-value));
     }
 
     .view .dataview, .dropdown-menu {
diff --git a/apps/common/main/resources/less/combobox.less b/apps/common/main/resources/less/combobox.less
index f1519a36bb..9a1b737f5a 100644
--- a/apps/common/main/resources/less/combobox.less
+++ b/apps/common/main/resources/less/combobox.less
@@ -32,13 +32,8 @@
     }
 
     &.input-group-nr > .form-control {
-        padding-right: 7px + 2 * @padding-base-horizontal;
+        .padding-x(3px, 7px + 2 * @padding-base-horizontal);
         .font-size-normal();
-
-        .rtl & {
-            padding-right: 3px;
-            padding-left: 7px + 2 * @padding-base-horizontal;
-        }
     }
 
     .form-control {
@@ -55,7 +50,7 @@
 
         .text {
             line-height: 20px;
-            padding-left: 2px;
+            .padding-left(2px);
         }
 
         .rtl & {
@@ -85,6 +80,8 @@
             border-right: 0;
             right: unset;
             left: 0;
+            margin-left: 0;
+            margin-right: -1px;
         }
     }
 
@@ -94,16 +91,11 @@
         background-color: @background-normal;
         border-color: @border-regular-control-ie;
         border-color: @border-regular-control;
-        padding-right: 5px;
-
-        .rtl & {
-            padding-right: 3px;
-            padding-left: 5px;
-        }
+        .padding-x(3px, 5px);
     }
 
     .btn-default.disabled {
-        padding-right: 5px;
+        .padding-x(3px, 5px);
         border-top-color: transparent;
         border-bottom-color: transparent;
 
@@ -257,6 +249,9 @@
                 width: 100%;
                 height: 100%;
             }
+            .rtl & {
+                padding: 2px 3px 2px 0;
+            }
         }
 
         li a {
diff --git a/apps/common/main/resources/less/comments.less b/apps/common/main/resources/less/comments.less
index 5a64b962c7..a20dc6122c 100644
--- a/apps/common/main/resources/less/comments.less
+++ b/apps/common/main/resources/less/comments.less
@@ -315,12 +315,7 @@
     .reply-item-ct {
         position: relative;
         padding-bottom: 10px;
-        padding-left: 20px;
-
-        .rtl & {
-            padding-left: 0;
-            padding-right: 20px;
-        }
+        .padding-left-20();
     }
 
     div[class^=btn-] {
diff --git a/apps/common/main/resources/less/common.less b/apps/common/main/resources/less/common.less
index fe007a1b2f..2948004e9c 100644
--- a/apps/common/main/resources/less/common.less
+++ b/apps/common/main/resources/less/common.less
@@ -104,14 +104,12 @@ label {
 }
 
 .left-panel {
-    padding-left: 40px;
+    .padding-left-40();
     height: 100%;
     border-right: @scaled-one-px-value-ie solid @border-toolbar-ie;
     border-right: @scaled-one-px-value solid @border-toolbar;
 
     .rtl & {
-        padding-right: 40px;
-        padding-left: 0;
         border-left: @scaled-one-px-value solid @border-toolbar;
         border-right: 0 none;
     }
@@ -143,6 +141,7 @@ label {
     .rtl & {
         border-right: @scaled-one-px-value solid @border-toolbar;
         border-left: 0 none;
+        padding: 0 15px 0 10px;
     }
 }
 
diff --git a/apps/common/main/resources/less/dataview.less b/apps/common/main/resources/less/dataview.less
index bd014b2dbb..ffb2aec6cc 100644
--- a/apps/common/main/resources/less/dataview.less
+++ b/apps/common/main/resources/less/dataview.less
@@ -100,6 +100,9 @@
         padding: 10px 2px 12px 4px;
         .font-weight-bold();
         cursor: default;
+        .rtl & {
+            padding: 10px 4px 12px 2px;
+        }
     }
 
     &.bordered {
diff --git a/apps/common/main/resources/less/dropdown-menu.less b/apps/common/main/resources/less/dropdown-menu.less
index 5bf13828bb..14c35187d0 100644
--- a/apps/common/main/resources/less/dropdown-menu.less
+++ b/apps/common/main/resources/less/dropdown-menu.less
@@ -139,11 +139,7 @@
     &.shifted-right {
         li {
             & > a {
-                padding-left: 28px;
-                .rtl & {
-                    padding-left: 20px;
-                    padding-right: 28px;
-                }
+                .padding-x(28px, 20px);
             }
             .menu-item-icon {
                 margin: -2px 0 0 -24px;
diff --git a/apps/common/main/resources/less/header.less b/apps/common/main/resources/less/header.less
index 471d050d28..3e086fe61b 100644
--- a/apps/common/main/resources/less/header.less
+++ b/apps/common/main/resources/less/header.less
@@ -145,6 +145,9 @@
         max-width: 200px;
         height: 100%;
         padding: 6px 24px 6px 12px;
+        .rtl & {
+            padding: 6px 12px 6px 24px;
+        }
 
         i {
             cursor: pointer;
@@ -163,6 +166,9 @@
 
         #box-document-title & {
             padding: 4px 24px 4px 12px;
+            .rtl & {
+                padding: 4px 12px 4px 24px;
+            }
         }
     }
 }
diff --git a/apps/common/main/resources/less/history.less b/apps/common/main/resources/less/history.less
index abcaef11b2..1ae582bcb7 100644
--- a/apps/common/main/resources/less/history.less
+++ b/apps/common/main/resources/less/history.less
@@ -18,7 +18,7 @@
         height: 27px;
         margin-top: 15px;
         padding-top: 4px;
-        padding-left: 20px;
+        .padding-left-20();
         .font-size-large();
         cursor: pointer;
 
@@ -26,11 +26,6 @@
             background-color: @highlight-button-hover-ie;
             background-color: @highlight-button-hover;
         }
-
-        .rtl & {
-            padding-left: 0;
-            padding-right: 20px;
-        }
     }
 }
 
@@ -48,15 +43,10 @@
         height: 27px;
         margin-top: 8px;
         padding-top: 4px;
-        padding-left: 20px;
+        .padding-left-20();
         .font-size-large();
         cursor: pointer;
 
-        .rtl & {
-            padding-left: 0;
-            padding-right: 20px;
-        }
-
         &:hover {
             background-color: @highlight-button-hover-ie;
             background-color: @highlight-button-hover;
@@ -145,12 +135,7 @@
             .font-weight-bold();
             cursor: pointer;
             text-overflow: ellipsis;
-            padding-right: 35px;
-
-            .rtl & {
-                padding-right: 0;
-                padding-left: 35px;
-            }
+            .padding-right(35px);
         }
 
         .color {
diff --git a/apps/common/main/resources/less/input.less b/apps/common/main/resources/less/input.less
index 3da3521615..d2c8f85a16 100644
--- a/apps/common/main/resources/less/input.less
+++ b/apps/common/main/resources/less/input.less
@@ -166,11 +166,6 @@ textarea.form-control:focus {
         }
     }
     input {
-        padding-right: 20px;
-
-        .rtl & {
-            padding-right: 3px;
-            padding-left: 20px;
-        }
+        .padding-x(3px, 20px);
     }
 }
\ No newline at end of file
diff --git a/apps/common/main/resources/less/language-dialog.less b/apps/common/main/resources/less/language-dialog.less
index dee71416be..7d5b7b8b65 100644
--- a/apps/common/main/resources/less/language-dialog.less
+++ b/apps/common/main/resources/less/language-dialog.less
@@ -43,11 +43,7 @@ li {
       margin-top: 1px;
     }
     li a {
-      padding-left: 28px !important;
-      .rtl & {
-        padding-left: 0 !important;
-        padding-right: 28px !important;
-      }
+      .padding-x(28px, 20px);
     }
   }
 
diff --git a/apps/common/main/resources/less/listview.less b/apps/common/main/resources/less/listview.less
index 31705702c3..673763e85d 100644
--- a/apps/common/main/resources/less/listview.less
+++ b/apps/common/main/resources/less/listview.less
@@ -121,16 +121,11 @@
           display: flex;
           align-items: center;
           overflow: hidden;
-          padding-right: 1px;
+          .padding-right-1();
           cursor: pointer;
   
           label {
-            padding-right: 6px;
-
-            .rtl & {
-              padding-right: 0px;
-              padding-left: 6px;
-            }
+            .padding-right-6();
           }
   
           .caret {
diff --git a/apps/common/main/resources/less/opendialog.less b/apps/common/main/resources/less/opendialog.less
index 06ced50e0f..54522bf9a4 100644
--- a/apps/common/main/resources/less/opendialog.less
+++ b/apps/common/main/resources/less/opendialog.less
@@ -65,6 +65,9 @@
         min-width: 30px;
         height: 17px;
         white-space: nowrap;
+        .rtl & {
+          padding: 1px 0 1px 8px;
+        }
       }
 
       td:last-child {
diff --git a/apps/common/main/resources/less/plugins.less b/apps/common/main/resources/less/plugins.less
index 19d5d8d788..184e63991f 100644
--- a/apps/common/main/resources/less/plugins.less
+++ b/apps/common/main/resources/less/plugins.less
@@ -92,7 +92,7 @@
         label {
             width: 100%;
             margin-top: 2px;
-            padding-right: 20px;
+            .padding-right-20();
             .font-size-medium();
             .font-weight-bold();
             overflow: hidden;
@@ -107,6 +107,10 @@
         height: 20px;
         top: 12px;
         right: 12px;
+        .rtl & {
+            right: auto;
+            left: 12px;
+        }
     }
 
     #current-plugin-frame {
diff --git a/apps/common/main/resources/less/searchdialog.less b/apps/common/main/resources/less/searchdialog.less
index 3bd2631864..223860ee5a 100644
--- a/apps/common/main/resources/less/searchdialog.less
+++ b/apps/common/main/resources/less/searchdialog.less
@@ -92,11 +92,7 @@
             position: relative;
             input[type=text] {
                 width: 192px;
-                padding-right: 25px;
-                .rtl & {
-                    padding-right: 3px;
-                    padding-left: 25px;
-                }
+                .padding-x(3px, 25px);
             }
             #search-bar-results {
                 position: absolute;
@@ -299,6 +295,10 @@
         .ps-scrollbar-y-rail {
             &.set-left {
                 right: 11px !important;
+                .rtl & {
+                    left: 11px !important;
+                    right: auto !important;
+                }
             }
         }
     }
diff --git a/apps/common/main/resources/less/slider.less b/apps/common/main/resources/less/slider.less
index 16a0a1c01c..2659185736 100644
--- a/apps/common/main/resources/less/slider.less
+++ b/apps/common/main/resources/less/slider.less
@@ -39,7 +39,7 @@
             height: auto;
             width: 18px;
             padding-top: 0;
-            padding-left: 7px;
+            .padding-left(7px);
             .track {
                 position: absolute;
                 @track-height: 4px;
@@ -55,11 +55,6 @@
                 margin-left: 0;
                 margin-top: (@thumb-width / -2);
             }
-
-            .rtl & {
-                padding-left: 0;
-                padding-right: 7px;
-            }
         }
     }
 
diff --git a/apps/common/main/resources/less/spinner.less b/apps/common/main/resources/less/spinner.less
index 05c65b4365..d48f4ee050 100644
--- a/apps/common/main/resources/less/spinner.less
+++ b/apps/common/main/resources/less/spinner.less
@@ -6,17 +6,7 @@
     input {
         height: @spin-height;
         .text-align-right();
-        padding-left: 1px;
-        padding-right: @trigger-width + 2px;
-
-        .rtl & {
-            padding-left: @trigger-width + 2px;
-            padding-right: 1px;
-        }
-
-        &:focus {
-            // border-color: @border-preview-select;
-        }
+        .padding-x(1px, @trigger-width + 2px);
     }
 
     button {
diff --git a/apps/common/main/resources/less/synchronize-tip.less b/apps/common/main/resources/less/synchronize-tip.less
index 1787fa02e3..2300df36c6 100644
--- a/apps/common/main/resources/less/synchronize-tip.less
+++ b/apps/common/main/resources/less/synchronize-tip.less
@@ -23,7 +23,7 @@
 
     &.closable {
         .asc-synchronizetip {
-            padding-right: 30px;
+            .padding-x(15px, 30px);
         }
     }
 
@@ -509,10 +509,14 @@
     height: 16px;
     margin: 5px;
     cursor: pointer;
-
     opacity: 0.7;
     transition: transform .3s;
 
+    .rtl & {
+        right: auto;
+        left: 0;
+    }
+
     &:hover {
         transform: scale(1.1);
         opacity: 1;
diff --git a/apps/common/main/resources/less/toolbar.less b/apps/common/main/resources/less/toolbar.less
index f8eff2035b..d6007272b8 100644
--- a/apps/common/main/resources/less/toolbar.less
+++ b/apps/common/main/resources/less/toolbar.less
@@ -222,12 +222,7 @@
     .box-panels {
         flex-grow: 1;
         -ms-flex: 1;
-        padding-right: 6px;
-
-        .rtl & {
-            padding-right: 0;
-            padding-left: 6px;
-        }
+        .padding-right-6();
 
         .panel:not(.active) {
             display: none;
@@ -291,6 +286,9 @@
         }
         &[data-tab=pivot] {
             padding: 5px 10px 0 0;
+            .rtl & {
+                padding: 5px 0 0 10px;
+            }
             .group {
                 height: 60px !important;
             }
@@ -306,15 +304,12 @@
         background-color: @background-toolbar;
         position: absolute;
         right: 0;
-        padding-left: 12px;
-        padding-right: 6px;
+        .padding-x(12px, 6px);
         display: none;
 
         .rtl & {
             right: unset;
             left: 0;
-            padding-left: 6px;
-            padding-right: 12px;
         }
     }
 
@@ -329,21 +324,11 @@
         display: table-cell;
         vertical-align: middle;
         white-space: nowrap;
-        padding-left: 6px;
+        .padding-left-6();
         font-size: 0;
 
-        .rtl & {
-            padding-left: 0;
-            padding-right: 6px;
-        }
-
         &.small {
-            padding-left: 10px;
-
-            .rtl & {
-                padding-left: 0;
-                padding-right: 10px;
-            }
+            .padding-left-10();
 
             + .separator:not(.invisible) {
                 .margin-left-10();
@@ -764,11 +749,7 @@
     width: 150px;
     height: 46px;
     .view {
-        padding-right: 14px;
-        .rtl & {
-            padding-right: 0;
-            padding-left: 14px;
-        }
+        .padding-right(14px);
     }
     .dataview.field-picker {
         height: 100%;
@@ -848,12 +829,7 @@
     }
 
     .group-description {
-        padding-left: 4px;
-
-        .rtl & {
-            padding: 0;
-            padding-right: 4px;
-        }
+        .padding-left-4();
     }
 
     .group-items-container {
diff --git a/apps/common/main/resources/less/treeview.less b/apps/common/main/resources/less/treeview.less
index 78b5875f49..8f511874ab 100644
--- a/apps/common/main/resources/less/treeview.less
+++ b/apps/common/main/resources/less/treeview.less
@@ -54,6 +54,9 @@
     width: 100%;
     min-height: 28px;
     padding: 0px 12px 0 24px;
+    .rtl & {
+      padding: 0px 24px 0 12px;
+    }
   }
 
   .name {
diff --git a/apps/common/main/resources/less/updown-picker.less b/apps/common/main/resources/less/updown-picker.less
index c2fb1adcb1..f6a419f530 100644
--- a/apps/common/main/resources/less/updown-picker.less
+++ b/apps/common/main/resources/less/updown-picker.less
@@ -10,18 +10,11 @@
 
   .title {
     padding-top: 3px;
-    padding-right: 5px;
-    .rtl & {
-      padding-right: 0;
-      padding-left: 5px;
-    }
+    .padding-right-5();
   }
 
   .shifted-left & {
-    padding-left: 12px;
-    .rtl & {
-      padding-right: 12px;
-    }
+    .padding-x(12px, 5px);
   }
 
   .updown-picker-value {
diff --git a/apps/common/main/resources/less/window.less b/apps/common/main/resources/less/window.less
index 67332dd428..6b4b40bc85 100644
--- a/apps/common/main/resources/less/window.less
+++ b/apps/common/main/resources/less/window.less
@@ -119,25 +119,21 @@
         .tools {
             position: absolute;
             right: 0;
-            padding-right: 8px;
+            .padding-right-8();
 
             .rtl & {
                 right: auto;
                 left: 0;
-                padding-right: 0;
-                padding-left: 6px;
             }
 
             &.left {
                 left: 0;
                 right: auto;
-                padding-left: 6px;
+                .padding-left-6();
 
                 .rtl & {
                     left: auto;
                     right: 0;
-                    padding-left: 0;
-                    padding-right: 6px;
                 }
             }
         }
@@ -242,12 +238,7 @@
                 }
 
                 .text {
-                    padding-left: 60px;
-
-                    .rtl & {
-                        padding-left: 0;
-                        padding-right: 60px;
-                    }
+                    .padding-left(60px);
 
                     span {
                         .font-size-medium();
@@ -370,24 +361,6 @@
         label {
             .font-size-normal();
         }
-
-        .padding-right {
-            padding-right: 5px;
-
-            .rtl & {
-                padding-right: 0;
-                padding-left: 5px;
-            }
-        }
-
-        .padding-left {
-            padding-left: 5px;
-
-            .rtl & {
-                padding-left: 0;
-                padding-right: 5px;
-            }
-        }
     }
 
     .footer {
diff --git a/apps/documenteditor/main/app/template/DropcapSettingsAdvanced.template b/apps/documenteditor/main/app/template/DropcapSettingsAdvanced.template
index 718d712c36..e50e91f3c2 100644
--- a/apps/documenteditor/main/app/template/DropcapSettingsAdvanced.template
+++ b/apps/documenteditor/main/app/template/DropcapSettingsAdvanced.template
@@ -22,7 +22,7 @@
                 <td class="settins-cell padding-small" width="80">
                     <label class="input-label"><%= scope.textWidth %></label>
                 </td>
-                <td class="settins-cell padding-small" width="130" style="padding-right: 10px;">
+                <td class="settins-cell padding-small padding-right-10" width="130">
                     <div id="frame-advanced-input-widthtype"></div>
                 </td>
                 <td class="settins-cell padding-small" width="95">
@@ -33,7 +33,7 @@
                 <td class="settins-cell padding-small" width="80">
                     <label class="input-label"><%= scope.textHeight %></label>
                 </td>
-                <td class="settins-cell padding-small" width="130" style="padding-right: 10px;">
+                <td class="settins-cell padding-small padding-right-10" width="130">
                     <div id="frame-advanced-input-heighttype"></div>
                 </td>
                 <td class="settins-cell padding-small" width="95">
@@ -60,7 +60,7 @@
                 <td class="settins-cell padding-small" width="80">
                     <label class="input-label"><%= scope.textPosition %></label>
                 </td>
-                <td class="settins-cell padding-small" width="130" style="padding-right: 10px;">
+                <td class="settins-cell padding-small padding-right-10" width="130">
                     <div id="frame-advanced-input-hposition"></div>
                 </td>
                 <td class="settins-cell padding-small" width="95">
@@ -68,7 +68,7 @@
                 </td>
             </tr>
             <tr>
-                <td class="settins-cell padding-small" colspan="2" style="padding-right: 10px;">
+                <td class="settins-cell padding-small padding-right-10" colspan="2">
                     <label class="input-label float-right"><%= scope.textDistance %></label>
                 </td>
                 <td class="settins-cell padding-small">
@@ -95,7 +95,7 @@
                 <td class="settins-cell padding-small" width="80">
                     <label class="input-label"><%= scope.textPosition %></label>
                 </td>
-                <td class="settins-cell padding-small" width="130" style="padding-right: 10px;">
+                <td class="settins-cell padding-small padding-right-10" width="130">
                     <div id="frame-advanced-input-vposition"></div>
                 </td>
                 <td class="settins-cell padding-small" width="95">
@@ -103,7 +103,7 @@
                 </td>
             </tr>
             <tr>
-                <td class="settins-cell padding-small" colspan="2" style="padding-right: 10px;">
+                <td class="settins-cell padding-small padding-right-10" colspan="2">
                     <label class="input-label float-right"><%= scope.textDistance %></label>
                 </td>
                 <td class="settins-cell padding-small">
@@ -158,7 +158,7 @@
         <label class="input-label padding-small" style="width: 100%;"><%= scope.textBorderDesc %></label>
         <div style="width: 100%;" class="padding-large">
             <div id="drop-advanced-borderstyler" style="display: inline-block; vertical-align: middle; width: 200px; height: 170px;outline: 1px solid #ccc;"></div>
-            <div style="display: inline-block; vertical-align: middle; width: 80px; height: 170px; padding-top: 10px; padding-left: 4px;" class="float-right">
+            <div style="display: inline-block; vertical-align: middle; width: 80px; height: 170px; padding-top: 10px;" class="float-right padding-left-4">
                 <div id="drop-advanced-button-borderline-00" style="display: inline-block;"></div>
                 <div id="drop-advanced-button-borderline-01" style="display: inline-block;"></div>
                 <div id="drop-advanced-button-borderline-10" style="display: inline-block;"></div>
diff --git a/apps/documenteditor/main/app/template/FormSettings.template b/apps/documenteditor/main/app/template/FormSettings.template
index 14c657edcd..81c1e5242c 100644
--- a/apps/documenteditor/main/app/template/FormSettings.template
+++ b/apps/documenteditor/main/app/template/FormSettings.template
@@ -191,12 +191,12 @@
 </table>
 <table cols="2">
     <tr class="form-textfield">
-        <td colspan=2 style="padding-left: 22px;">
+        <td colspan=2 class="padding-left-22">
             <label class="input-label"><%= scope.textWidth %></label>
         </td>
     </tr>
     <tr class="form-textfield">
-        <td class="padding-small" style="padding-left: 22px;">
+        <td class="padding-small padding-left-22">
             <div id="form-combo-width-rule" style="width: 82px;"></div>
         </td>
         <td class="padding-small">
diff --git a/apps/documenteditor/main/app/template/ImageSettingsAdvanced.template b/apps/documenteditor/main/app/template/ImageSettingsAdvanced.template
index c0f7aedae8..5d5b7d386f 100644
--- a/apps/documenteditor/main/app/template/ImageSettingsAdvanced.template
+++ b/apps/documenteditor/main/app/template/ImageSettingsAdvanced.template
@@ -41,7 +41,7 @@
             <td style="vertical-align: bottom; padding-bottom: 19px;">
                 <div id="shape-radio-hsizepc"></div>
             </td>
-            <td class="padding-large padding-right">
+            <td class="padding-large padding-right-15">
                 <label class="input-label"><%= scope.textRelativeWH %></label>
                 <div id="shape-advanced-spin-width-rel"></div>
             </td>
@@ -68,7 +68,7 @@
             <td style="vertical-align: bottom; padding-bottom: 19px;">
                 <div id="shape-radio-vsizepc"></div>
             </td>
-            <td class="padding-large padding-right">
+            <td class="padding-large padding-right-15">
                 <label class="input-label"><%= scope.textRelativeWH %></label>
                 <div id="shape-advanced-spin-height-rel"></div>
             </td>
diff --git a/apps/documenteditor/main/app/template/ParagraphSettingsAdvanced.template b/apps/documenteditor/main/app/template/ParagraphSettingsAdvanced.template
index 375fb3a0be..4106b1a45b 100644
--- a/apps/documenteditor/main/app/template/ParagraphSettingsAdvanced.template
+++ b/apps/documenteditor/main/app/template/ParagraphSettingsAdvanced.template
@@ -61,7 +61,7 @@
     </div>
 </div>
 <div id="id-adv-paragraph-line" class="settings-panel">
-    <div class="inner-content text-only" style="padding-right: 0px;" >
+    <div class="inner-content text-only padding-left-10" >
         <table cols="2" style="width: 100%;">
             <tr>
                 <td class="padding-small">
@@ -127,7 +127,7 @@
                 <td class="padding-small">
                     <div id="paragraphadv-checkbox-strike"></div>
                 </td>
-                <td class="padding-small padding-left">
+                <td class="padding-small padding-left-40">
                     <div id="paragraphadv-checkbox-subscript"></div>
                 </td>
             </tr>
@@ -135,7 +135,7 @@
                 <td class="padding-small">
                     <div id="paragraphadv-checkbox-double-strike"></div>
                 </td>
-                <td class="padding-small padding-left">
+                <td class="padding-small padding-left-40">
                     <div id="paragraphadv-checkbox-small-caps"></div>
                 </td>
             </tr>
@@ -143,7 +143,7 @@
                 <td class="padding-large">
                     <div id="paragraphadv-checkbox-superscript"></div>
                 </td>
-                <td class="padding-large padding-left">
+                <td class="padding-large padding-left-40">
                     <div id="paragraphadv-checkbox-all-caps"></div>
                 </td>
             </tr>
@@ -213,7 +213,7 @@
                     <label class="input-label"><%= scope.textTop %></label>
                     <div id="paraadv-number-margin-top"></div>
                 </div>
-                <div class="padding-small padding-left" style="display: inline-block;">
+                <div class="padding-small padding-left-15" style="display: inline-block;">
                     <label class="input-label"><%= scope.textLeft %></label>
                     <div id="paraadv-number-margin-left"></div>
                 </div>
@@ -223,7 +223,7 @@
                     <label class="input-label"><%= scope.textBottom %></label>
                     <div id="paraadv-number-margin-bottom"></div>
                 </div>
-                <div class="padding-small padding-left" style="display: inline-block;">
+                <div class="padding-small padding-left-15" style="display: inline-block;">
                     <label class="input-label"><%= scope.textRight %></label>
                     <div id="paraadv-number-margin-right"></div>
                 </div>
diff --git a/apps/documenteditor/main/app/view/CrossReferenceDialog.js b/apps/documenteditor/main/app/view/CrossReferenceDialog.js
index 5953d7b0bc..15c00c805b 100644
--- a/apps/documenteditor/main/app/view/CrossReferenceDialog.js
+++ b/apps/documenteditor/main/app/view/CrossReferenceDialog.js
@@ -62,11 +62,11 @@ define([
                 '<div class="box">',
                     '<table cols="2" style="width: 100%;">',
                         '<tr>',
-                            '<td class="padding-right">',
+                            '<td class="padding-right-5">',
                                 '<label class="input-label">' + this.txtType + '</label>',
                                 '<div id="id-dlg-cross-type" class="input-group-nr" style="width: 100%;margin-bottom: 10px;"></div>',
                             '</td>',
-                            '<td class="padding-left">',
+                            '<td class="padding-left-5">',
                                 '<label class="input-label">' + this.txtReference + '</label>',
                                 '<div id="id-dlg-cross-ref" class="input-group-nr" style="width: 100%;margin-bottom: 10px;"></div>',
                             '</td>',
diff --git a/apps/documenteditor/main/app/view/CustomColumnsDialog.js b/apps/documenteditor/main/app/view/CustomColumnsDialog.js
index 085210bbf3..76c2f859a6 100644
--- a/apps/documenteditor/main/app/view/CustomColumnsDialog.js
+++ b/apps/documenteditor/main/app/view/CustomColumnsDialog.js
@@ -187,7 +187,7 @@ define([
                 ],
                 itemTemplate: _.template([
                     '<div id="custom-columns-list-item-<%= index %>" class="list-item" style="display:flex; align-items:center; width=100%;">',
-                        '<label class="level-caption" style="padding-right:5px; flex-shrink:0; width:20px;"><%= index + 1 %></label>',
+                        '<label class="level-caption padding-right-5" style="flex-shrink:0; width:20px;"><%= index + 1 %></label>',
                         '<div style="display:inline-block;flex-grow: 1;">',
                                 '<div style="padding: 0 5px;display: inline-block;vertical-align: top;"><div id="custom-columns-list-item-spin-width-<%= index %>" class="input-group-nr" style=""></div></div>',
                                 '<div style="padding: 0 5px;display: inline-block;vertical-align: top;"><div id="custom-columns-list-item-spin-spacing-<%= index %>" class="input-group-nr"></div></div>',
diff --git a/apps/documenteditor/main/app/view/DocumentHolder.js b/apps/documenteditor/main/app/view/DocumentHolder.js
index 3ad92c4c97..d25902b57c 100644
--- a/apps/documenteditor/main/app/view/DocumentHolder.js
+++ b/apps/documenteditor/main/app/view/DocumentHolder.js
@@ -967,7 +967,7 @@ define([
             });
 
             var langTemplate = _.template([
-                '<a id="<%= id %>" tabindex="-1" type="menuitem" style="padding-left: 28px !important;" langval="<%= value %>" class="<% if (checked) { %> checked <% } %>">',
+                '<a id="<%= id %>" tabindex="-1" type="menuitem" langval="<%= value %>" class="<% if (checked) { %> checked <% } %>">',
                 '<i class="icon <% if (spellcheck) { %> toolbar__icon btn-ic-docspell spellcheck-lang <% } %>"></i>',
                 '<%= caption %>',
                 '</a>'
diff --git a/apps/documenteditor/main/app/view/FileMenuPanels.js b/apps/documenteditor/main/app/view/FileMenuPanels.js
index 4c011b79d8..1a1f559d69 100644
--- a/apps/documenteditor/main/app/view/FileMenuPanels.js
+++ b/apps/documenteditor/main/app/view/FileMenuPanels.js
@@ -2525,8 +2525,8 @@ define([
                                 '<tr><td class="padding-large"><div id="print-combo-range" style="width: 248px;"></div></td></tr>',
                                 '<tr><td class="padding-large">',
                                     '<table style="width: 100%;"><tbody>',
-                                        '<tr><td class="padding-large"><%= scope.txtPages %>:</td><td class="padding-large" style="width: 100%;"><div id="print-txt-pages" style="width: 100%;"></div></td></tr>',
-                                        '<tr><td><%= scope.txtCopies %>:</td><td style="width: 100%;"><div id="print-txt-copies" style="width: 60px;"></div></td></tr>',
+                                        '<tr><td class="padding-large"><%= scope.txtPages %>:</td><td class="padding-large" style="width: 100%;"><div id="print-txt-pages" class="padding-left-5" style="width: 100%;"></div></td></tr>',
+                                        '<tr><td><%= scope.txtCopies %>:</td><td style="width: 100%;"><div id="print-txt-copies" class="padding-left-5" style="width: 60px;"></div></td></tr>',
                                     '</tbody></table>',
                                 '</td></tr>',
                                 '<tr><td><label class="header"><%= scope.txtPrintSides %></label></td></tr>',
diff --git a/apps/documenteditor/main/app/view/FormSettings.js b/apps/documenteditor/main/app/view/FormSettings.js
index 7335ff2411..0d1d2bde46 100644
--- a/apps/documenteditor/main/app/view/FormSettings.js
+++ b/apps/documenteditor/main/app/view/FormSettings.js
@@ -573,7 +573,7 @@ define([
             var itemsTemplate =
                 [
                     '<% _.each(items, function(item) { %>',
-                        '<li id="<%= item.id %>" data-value="<%= Common.Utils.String.htmlEncode(item.value) %>"><a tabindex="-1" type="menuitem" style="padding-left: 10px;overflow: hidden; text-overflow: ellipsis;">',
+                        '<li id="<%= item.id %>" data-value="<%= Common.Utils.String.htmlEncode(item.value) %>"><a tabindex="-1" type="menuitem" style="' + (Common.UI.isRTL() ? 'padding-right: 10px;': 'padding-left: 10px;') + 'overflow: hidden; text-overflow: ellipsis;">',
                             '<span class="color" style="background: <%= item.color %>;"></span>',
                             '<%= Common.Utils.String.htmlEncode(item.displayValue) %>',
                         '</a></li>',
@@ -1662,7 +1662,7 @@ define([
                     parentEl: (this.$el || $(this.el)).findById('#form-color-btn'),
                     additionalItems: [
                         this.mnuNoBorder = new Common.UI.MenuItem({
-                            style: 'padding-left:20px;',
+                            style: Common.UI.isRTL() ? 'padding-right:20px;' : 'padding-left:20px;',
                             caption: this.textNoBorder,
                             toggleGroup: 'form-settings-no-border',
                             checkable: true
diff --git a/apps/documenteditor/main/app/view/ListIndentsDialog.js b/apps/documenteditor/main/app/view/ListIndentsDialog.js
index 2debcb19c8..a475fae3ca 100644
--- a/apps/documenteditor/main/app/view/ListIndentsDialog.js
+++ b/apps/documenteditor/main/app/view/ListIndentsDialog.js
@@ -65,7 +65,7 @@ define([
                 '<div class="box" style="height: 85px;">',
                     '<table cols="2" style="width: 100%;">',
                         '<tr>',
-                            '<td style="padding-right: 10px;">',
+                            '<td class="padding-right-10">',
                                 '<label class="input-label">' + (this.isBullet ? this.txtPosBullet : this.txtPosNumber) + '</label>',
                                 '<div id="id-dlg-indents-align-at" style="margin-bottom: 10px;"></div>',
                             '</td>',
diff --git a/apps/documenteditor/main/app/view/ListSettingsDialog.js b/apps/documenteditor/main/app/view/ListSettingsDialog.js
index 8c0ad70868..89597d9e8e 100644
--- a/apps/documenteditor/main/app/view/ListSettingsDialog.js
+++ b/apps/documenteditor/main/app/view/ListSettingsDialog.js
@@ -81,24 +81,24 @@ define([
                 '<% if (type == 2) { %>',
                     '<table style="width: 100%;">',
                         '<tr>',
-                            '<td class="padding-right" style="width: 100%;">',
+                            '<td class="padding-right-5" style="width: 100%;">',
                                 '<label class="input-label">' + this.txtType + '</label>',
                                 '<div id="id-dlg-numbering-format" class="input-group-nr" style="width: 100%;margin-bottom: 10px;"></div>',
                             '</td>',
-                            '<td style="padding-left: 5px;">',
+                            '<td class="padding-left-5">',
                                 '<label class="input-label">' + this.txtSize + '</label>',
                                 '<div id="id-dlg-bullet-size" class="input-group-nr" style="width: 115px;margin-bottom: 10px;"></div>',
                             '</td>',
                             '</td>',
-                            '<td style="padding-left: 5px;">',
+                            '<td class="padding-left-5">',
                                 '<label class="input-label"></label>',
                                 '<div id="id-dlg-numbering-bold" style="margin-bottom: 10px;"></div>',
                             '</td>',
-                            '<td style="padding-left: 5px;">',
+                            '<td class="padding-left-5">',
                                 '<label class="input-label"></label>',
                                 '<div id="id-dlg-numbering-italic" style="margin-bottom: 10px;"></div>',
                             '</td>',
-                            '<td  class="padding-left">',
+                            '<td class="padding-left-5">',
                                 '<label class="input-label"></label>',
                                 '<div id="id-dlg-bullet-color" style="margin-bottom: 10px;"></div>',
                             '</td>',
@@ -106,11 +106,11 @@ define([
                     '</table>',
                     '<table style="width: 100%;">',
                         '<tr>',
-                            '<td style="padding-right: 5px;width: 100%;">',
+                            '<td class="padding-right-5" style="width: 100%;">',
                                 '<label class="input-label">' + this.txtNumFormatString + '</label>',
                                 '<div id="id-dlg-numbering-format-str" style="width: 100%;height:22px;margin-bottom: 10px;"></div>',
                             '</td>',
-                            '<td style="padding-left: 5px;">',
+                            '<td class="padding-left-5">',
                                 '<label class="input-label"></label>',
                                 '<div id="id-dlg-btn-more" style="width: 100%;height:22px;margin-bottom: 10px;"></div>',
                             '</td>',
@@ -119,11 +119,11 @@ define([
                 '<% } else if (type == 0) {%>', // bullets
                     '<table cols="2" style="width: 100%;">',
                         '<tr>',
-                            '<td style="padding-right: 5px;">',
+                            '<td class="padding-right-5">',
                                 '<label class="input-label">' + this.txtType + '</label>',
                                 '<div id="id-dlg-numbering-format" class="input-group-nr" style="width: 100%;margin-bottom: 10px;"></div>',
                             '</td>',
-                            '<td style="padding-left: 5px;">',
+                            '<td class="padding-left-5">',
                                 '<label class="input-label">' + this.txtAlign + '</label>',
                                 '<div id="id-dlg-bullet-align" class="input-group-nr" style="width: 100%;margin-bottom: 10px;"></div>',
                             '</td>',
@@ -141,11 +141,11 @@ define([
                 '<% } else { %>', // numbering
                     '<table cols="2" style="width: 100%;">',
                         '<tr>',
-                            '<td class="padding-right">',
+                            '<td class="padding-right-5">',
                                 '<label class="input-label">' + this.txtType + '</label>',
                                 '<div id="id-dlg-numbering-format" class="input-group-nr" style="width: 100%;margin-bottom: 10px;"></div>',
                             '</td>',
-                            '<td class="padding-left">',
+                            '<td class="padding-left-5">',
                                 '<label class="input-label">' + this.txtAlign + '</label>',
                                 '<div id="id-dlg-bullet-align" class="input-group-nr" style="width: 100%;margin-bottom: 10px;"></div>',
                             '</td>',
@@ -159,14 +159,14 @@ define([
                     '</table>',
                     '<table cols="2" style="width: 100%;">',
                         '<tr>',
-                            '<td class="padding-right">',
+                            '<td class="padding-right-5">',
                                 '<label class="input-label" style="display: block;">' + this.txtFontName + '</label>',
                                 '<div id="id-dlg-numbering-font-name" style="display: inline-block;width: 90px;height:22px;margin-bottom: 10px;vertical-align: middle;"></div>',
                                 '<div id="id-dlg-numbering-bold" class="margin-left-4" style="display: inline-block;margin-bottom: 10px;vertical-align: middle;"></div>',
                                 '<div id="id-dlg-numbering-italic" class="margin-left-4" style="display: inline-block;margin-bottom: 10px;vertical-align: middle;"></div>',
                                 '<div id="id-dlg-bullet-color" class="margin-left-4" style="display: inline-block;margin-bottom: 10px;vertical-align: middle;"></div>',
                             '</td>',
-                            '<td class="padding-left">',
+                            '<td class="padding-left-5">',
                                 '<label class="input-label">' + this.txtSize + '</label>',
                                 '<div id="id-dlg-bullet-size" class="input-group-nr" style="width: 85px;margin-bottom: 10px;"></div>',
                             '</td>',
@@ -180,7 +180,7 @@ define([
                             '</td>',
                         '</tr>',
                         '<tr>',
-                            '<td class="padding-right-big <% if (type != 2) { %> hidden <% } %>" style="width: 50px;vertical-align: top;">',
+                            '<td class="padding-right-10 <% if (type != 2) { %> hidden <% } %>" style="width: 50px;vertical-align: top;">',
                                 '<div id="levels-list" class="no-borders" style="width:100%; height:235px;"></div>',
                             '</td>',
                             '<td>',
@@ -196,7 +196,7 @@ define([
                 '</td>',
                 '<% if (type == 2) { %>',
                 '<td style="width: ' + this.rightPanelWidth + 'px;vertical-align: top;">',
-                    '<div id="id-dlg-panel-more-settings" style="padding-left: 20px;width: ' + this.rightPanelWidth + 'px;">',
+                    '<div id="id-dlg-panel-more-settings" class="padding-left-20" style="width: ' + this.rightPanelWidth + 'px;">',
                     '<table cols="2" style="width: 100%;">',
                         '<tr>',
                             '<td colspan="2">',
@@ -225,7 +225,7 @@ define([
                             '<td>',
                                 '<label class="input-label">' + this.txtAlign + '</label>',
                             '</td>',
-                            '<td style="padding-left: 5px;vertical-align:bottom;">',
+                            '<td class="padding-left-5" style="vertical-align:bottom;">',
                                 '<label class="input-label">' + this.txtAlignAt + '</label>',
                             '</td>',
                         '</tr>',
@@ -233,7 +233,7 @@ define([
                             '<td>',
                                 '<div id="id-dlg-bullet-align" class="input-group-nr" style="width: 100%;margin-bottom: 10px;"></div>',
                             '</td>',
-                            '<td style="padding-left: 5px;">',
+                            '<td class="padding-left-5">',
                                 '<div id="id-dlg-numbering-align-at" style="width: 100%;min-width40px;margin-bottom: 10px;"></div>',
                             '</td>',
                         '</tr>',
@@ -255,7 +255,7 @@ define([
                             '</td>',
                         '</tr>',
                         '<tr>',
-                            '<td colspan="2" style="padding-left: 22px;">',
+                            '<td colspan="2" class="padding-left-22">',
                                 '<div id="id-dlg-num-tabstop" style="width: 100%;"></div>',
                             '</td>',
                         '</tr>',
@@ -306,14 +306,14 @@ define([
                         caption: this.txtLikeText,
                         checkable: true,
                         toggleGroup: 'list-settings-color',
-                        style: 'padding-left: 20px;'
+                        style: Common.UI.isRTL() ? 'padding-right:20px;' : 'padding-left:20px;',
                     },
                     {
                         id: 'id-dlg-bullet-auto-color',
                         caption: this.textAuto,
                         checkable: true,
                         toggleGroup: 'list-settings-color',
-                        style: 'padding-left: 20px;'
+                        style: Common.UI.isRTL() ? 'padding-right:20px;' : 'padding-left:20px;',
                     },
                     {caption: '--'}],
                 additionalAlign: this.menuAddAlign
diff --git a/apps/documenteditor/main/app/view/PageSizeDialog.js b/apps/documenteditor/main/app/view/PageSizeDialog.js
index 840dd30663..932f1fa664 100644
--- a/apps/documenteditor/main/app/view/PageSizeDialog.js
+++ b/apps/documenteditor/main/app/view/PageSizeDialog.js
@@ -67,7 +67,7 @@ define([
                             '</td>',
                         '</tr>',
                         '<tr>',
-                            '<td class="padding-right">',
+                            '<td class="padding-right-10">',
                                 '<label class="input-label">' + this.textWidth + '</label>',
                                 '<div id="page-size-spin-width"></div>',
                             '</td>',
diff --git a/apps/documenteditor/main/app/view/RoleEditDlg.js b/apps/documenteditor/main/app/view/RoleEditDlg.js
index 3f78747db2..98b698dd80 100644
--- a/apps/documenteditor/main/app/view/RoleEditDlg.js
+++ b/apps/documenteditor/main/app/view/RoleEditDlg.js
@@ -56,7 +56,7 @@ define([
                 '<div class="box">',
                     '<table cols="2" style="width: 100%;">',
                         '<tr>',
-                            '<td style="width: 50px; padding-right: 10px;">',
+                            '<td class="padding-right-10" style="width: 50px;">',
                                 '<label></label>',
                                 '<div id="id-dlg-role-color" style="margin-bottom: 10px;"></div>',
                             '</td>',
@@ -107,7 +107,7 @@ define([
                                       id: 'id-dlg-role-menu-no-highlight',
                                       caption: this.textNoHighlight,
                                       checkable: true,
-                                      style: 'padding-left: 20px;'
+                                      style: Common.UI.isRTL() ? 'padding-right:20px;' : 'padding-left:20px;',
                                   }),
                                   {caption: '--'}],
                 additionalAlign: this.menuAddAlign,
diff --git a/apps/documenteditor/main/app/view/RolesManagerDlg.js b/apps/documenteditor/main/app/view/RolesManagerDlg.js
index 076f516d3b..eed537ee94 100644
--- a/apps/documenteditor/main/app/view/RolesManagerDlg.js
+++ b/apps/documenteditor/main/app/view/RolesManagerDlg.js
@@ -94,11 +94,11 @@ define([  'text!documenteditor/main/app/template/RolesManagerDlg.template',
                 itemTemplate: _.template([
                     '<div id="<%= id %>" class="list-item" style="">',
                     '<div class="listitem-icon" style="flex-shrink: 0;"><svg class=""><use xlink:href="#svg-icon-<%= scope.getIconCls(index) %>"></use></svg></div>',
-                    '<div style="width: 25px;text-align:center; padding-right: 5px;flex-shrink: 0;"><%= index+1 %></div>',
+                    '<div class="padding-right-5" style="width: 25px;text-align:center;flex-shrink: 0;"><%= index+1 %></div>',
                     '<div style="width: 25px;flex-shrink: 0;">',
                         '<span class="color" style="background: <% if (color) { %>#<%= color %><% } else { %> transparent <% } %>;"></span>',
                     '</div>',
-                    '<div style="flex-grow: 1;padding-right: 5px;"><%= Common.Utils.String.htmlEncode(name) %></div>',
+                    '<div class="padding-right-5" style="flex-grow: 1;"><%= Common.Utils.String.htmlEncode(name) %></div>',
                     '<div class="text-align-right" style="width: 25px;opacity: 0.8;flex-shrink: 0;"><%= fields %></div>',
                     '</div>'
                 ].join('')),
diff --git a/apps/documenteditor/main/app/view/SaveFormDlg.js b/apps/documenteditor/main/app/view/SaveFormDlg.js
index 6b062788ba..06fbb4f93a 100644
--- a/apps/documenteditor/main/app/view/SaveFormDlg.js
+++ b/apps/documenteditor/main/app/view/SaveFormDlg.js
@@ -112,7 +112,7 @@ define([  'common/main/lib/view/AdvancedSettingsWindow',
                 itemTemplate: _.template([
                     '<div id="<%= id %>" class="list-item" style="border-color: transparent;">',
                     '<div class="listitem-icon" style="flex-shrink: 0;"><svg class=""><use xlink:href="#svg-icon-<%= scope.getIconCls(index) %>"></use></svg></div>',
-                    '<div style="flex-grow: 1;padding-right: 5px;"><%= Common.Utils.String.htmlEncode(name) %></div>',
+                    '<div class="padding-right-5" style="flex-grow: 1;"><%= Common.Utils.String.htmlEncode(name) %></div>',
                     '</div>'
                 ].join(''))
             });
diff --git a/apps/documenteditor/main/app/view/TableFormulaDialog.js b/apps/documenteditor/main/app/view/TableFormulaDialog.js
index 469109132a..ab0d779de8 100644
--- a/apps/documenteditor/main/app/view/TableFormulaDialog.js
+++ b/apps/documenteditor/main/app/view/TableFormulaDialog.js
@@ -66,7 +66,7 @@ define([
                     '</div>',
                     '<div id="id-dlg-formula-format" class="input-row" style="margin-bottom: 20px;"></div>',
                     '<div class="input-row">',
-                        '<div id="id-dlg-formula-function" style="display: inline-block; width: 50%; padding-right: 10px;" class="float-left"></div>',
+                        '<div id="id-dlg-formula-function" style="display: inline-block; width: 50%;" class="float-left padding-right-10"></div>',
                         '<div id="id-dlg-formula-bookmark" style="display: inline-block; width: 50%;"></div>',
                     '</div>',
                     '</div>'
diff --git a/apps/documenteditor/main/app/view/Toolbar.js b/apps/documenteditor/main/app/view/Toolbar.js
index 268e9e862d..bf8c81119d 100644
--- a/apps/documenteditor/main/app/view/Toolbar.js
+++ b/apps/documenteditor/main/app/view/Toolbar.js
@@ -947,7 +947,7 @@ define([
                                             {caption: '--'},
                                             {
                                                 id: 'id-toolbar-menu-new-control-color',
-                                                template: _.template('<a tabindex="-1" type="menuitem" style="padding-left:12px;">' + this.textNewColor + '</a>')
+                                                template: _.template('<a tabindex="-1" type="menuitem" style="' + (Common.UI.isRTL() ? 'padding-right:12px;' : 'padding-left:12px;') + '">' + this.textNewColor + '</a>')
                                             }
                                         ]
                                     })
diff --git a/apps/documenteditor/main/resources/less/advanced-settings.less b/apps/documenteditor/main/resources/less/advanced-settings.less
index eed82d1839..61ca58eeb1 100644
--- a/apps/documenteditor/main/resources/less/advanced-settings.less
+++ b/apps/documenteditor/main/resources/less/advanced-settings.less
@@ -6,8 +6,7 @@
         &:nth-child(1) {
             width:160px;
             height: 16px;
-            padding-left:16px;
-            padding-right: 5px;
+            .padding-x(16px, 5px);
 
             &.checked {
                 &:before {
@@ -22,9 +21,6 @@
             }
 
             .rtl & {
-                padding-right:16px;
-                padding-left: 5px;
-
                 &.checked {
                     &:before {
                         float: right;
@@ -35,17 +31,12 @@
             }
         }
 
-        padding-right: 6px;
+        .padding-right-6();
         vertical-align: middle;
         display: inline-block;
         text-overflow: ellipsis;
         overflow: hidden;
         white-space: pre;
-
-        .rtl & {
-            padding-right: 0;
-            padding-left: 6px;
-        }
     }
 }
 
@@ -94,12 +85,7 @@
     .border-color {
         display: flex;
         align-items: center;
-        padding-left: 20px;
-
-        .rtl & {
-            padding-left: 0;
-            padding-right: 20px;
-        }
+        .padding-left-20();
     }
 
     .border-types {
@@ -112,28 +98,6 @@
     }
 }
 
-#id-adv-paragraph-font {
-    .padding-left {
-        padding-left: 40px;
-
-        .rtl & {
-            padding-left: 0;
-            padding-right: 40px;
-        }
-    }
-}
-
-#id-adv-paragraph-margins {
-    .padding-left {
-        padding-left: 15px;
-
-        .rtl & {
-            padding-left: 0;
-            padding-right: 15px;
-        }
-    }
-}
-
 #id-adv-table-borders {
     .settings-wrap {
         width: 100%;
@@ -146,24 +110,13 @@
     }
 
     .border-color {
-        padding-left: 20px;
+        .padding-left-20();
         display: flex;
         align-items: center;
-
-        .rtl & {
-            padding-left: 0;
-            padding-right: 20px;
-        }
     }
 
     .border-types {
-        padding-left: 10px;
-
-        .rtl & {
-            padding-left: 0;
-            padding-right: 10px;
-        }
-
+        .padding-left-10();
         .btn {
             .margin-left-4();
             margin-bottom: 4px;
@@ -177,17 +130,6 @@
     }
 }
 
-#id-adv-shape-size {
-    .padding-right {
-        padding-right: 15px;
-
-        .rtl & {
-            padding-right: 0;
-            padding-left: 15px;
-        }
-    }
-}
-
 .advanced-settings-dlg {
     .roles-tableview {
         &.no-borders > .listview .item {
@@ -223,7 +165,7 @@
         .listitem-icon {
             width: @item-width;
             height: @item-height;
-            margin-right: 5px;
+            .margin-right-5();
 
             svg {
                 width: @item-width;
@@ -256,11 +198,7 @@
     }
     .text {
         width: 215px;
-        padding-left: 5px;
-        .rtl & {
-            padding-left: 0;
-            padding-right: 5px;
-        }
+        .padding-left-5();
         .input-label {
             display: block;
         }
diff --git a/apps/documenteditor/main/resources/less/filemenu.less b/apps/documenteditor/main/resources/less/filemenu.less
index b483e8f66d..6065a21382 100644
--- a/apps/documenteditor/main/resources/less/filemenu.less
+++ b/apps/documenteditor/main/resources/less/filemenu.less
@@ -62,15 +62,10 @@
 
   .panel-context {
     width: 100%;
-    padding-left: 260px;
+    .padding-left(260px);
     background-color: @background-normal-ie;
     background-color: @background-normal;
 
-    .rtl & {
-      padding-left: 0;
-      padding-right: 260px;
-    }
-
     .content-box {
       height: 100%;
       padding: 0 20px;
@@ -587,6 +582,10 @@
     &.sharedLink {
       background-position: -24px -273px;
     }
+
+    .rtl & {
+      padding: 0 17px 0 0;
+    }
   }
 
   label, span {
@@ -729,28 +728,16 @@
         .footer {
           margin-top: 24px;
         }
-        #print-txt-pages, #print-txt-copies {
-          padding-left: 5px;
-          .rtl & {
-            padding-left: 0;
-            padding-right: 5px;
-          }
-        }
         #print-combo-sides {
           .dropdown-menu li > a {
-            padding-right: 5px;
-            padding-left: 20px;
-            .rtl & {
-              padding-right: 20px;
-              padding-left: 5px;
-            }
+            .padding-x(20px, 5px);
           }
         }
       }
     }
     #print-navigation {
       height: 50px;
-      padding-left: 20px;
+      .padding-left-20();
       padding-top: 10px;
       display: flex;
       #print-prev-page {
diff --git a/apps/documenteditor/main/resources/less/leftmenu.less b/apps/documenteditor/main/resources/less/leftmenu.less
index fd5855a948..c414fd7e0e 100644
--- a/apps/documenteditor/main/resources/less/leftmenu.less
+++ b/apps/documenteditor/main/resources/less/leftmenu.less
@@ -9,7 +9,7 @@
     width: 100%;
     height: 100%;
     left: 40px;
-    padding-right: 40px;
+    .padding-right-40();
     top: 0;
     position: absolute;
     z-index: @zindex-dropdown - 5;
diff --git a/apps/documenteditor/main/resources/less/rightmenu.less b/apps/documenteditor/main/resources/less/rightmenu.less
index 068f920a24..4130bdc205 100644
--- a/apps/documenteditor/main/resources/less/rightmenu.less
+++ b/apps/documenteditor/main/resources/less/rightmenu.less
@@ -320,6 +320,10 @@
                 right: 26px;
             }
         }
+
+        .rtl & {
+            padding: 5px 15px 5px 2px;
+        }
     }
 }
 
diff --git a/apps/documenteditor/main/resources/less/statusbar.less b/apps/documenteditor/main/resources/less/statusbar.less
index 6f6740d5c5..f079ad36d6 100644
--- a/apps/documenteditor/main/resources/less/statusbar.less
+++ b/apps/documenteditor/main/resources/less/statusbar.less
@@ -119,11 +119,7 @@
 
     .lang-menu {
         li a {
-            padding-left: 28px !important;
-            .rtl & {
-                padding-left: 20px !important;
-                padding-right: 28px !important;
-            }
+            .padding-x(28px, 20px);
         }
     }
 }
diff --git a/apps/documenteditor/main/resources/less/thumbnails.less b/apps/documenteditor/main/resources/less/thumbnails.less
index 13c73b635b..4d6430444f 100644
--- a/apps/documenteditor/main/resources/less/thumbnails.less
+++ b/apps/documenteditor/main/resources/less/thumbnails.less
@@ -24,16 +24,17 @@
         }
 
         #thumbnails-size {
+            .text-align-left();
             label {
                 .font-size-normal();
                 font-weight: normal;
                 margin: 0;
-                padding-left: 12px;
+                .padding-left-12();
                 line-height: 25px;
             }
             .thumbnails-sld-box {
                 height: 25px;
-                padding-left: 8px;
+                .padding-left-8();
                 .menu-item-icon {
                     position: relative;
                     float: none;
diff --git a/apps/documenteditor/main/resources/less/toolbar.less b/apps/documenteditor/main/resources/less/toolbar.less
index d98a27ffbe..7ff933ba47 100644
--- a/apps/documenteditor/main/resources/less/toolbar.less
+++ b/apps/documenteditor/main/resources/less/toolbar.less
@@ -232,34 +232,7 @@
     }
 
     .list-level > a {
-        padding-right: 20px;
-
-        .rtl & {
-            padding-right: 12px;
-            padding-left: 20px;
-        }
-    }
-}
-
-.list-settings {
-    .padding-right-big {
-        padding-right: 10px;
-
-        .rtl & {
-            padding-right: 0;
-            padding-left: 10px;
-        }
-    }
-}
-
-#window-page-size {
-    .padding-right {
-        padding-right: 10px;
-
-        .rtl & {
-            padding-right: 0;
-            padding-left: 10px;
-        }
+        .padding-x(12px, 20px);
     }
 }
 
@@ -309,5 +282,8 @@
         margin: 0 8px 0 2px;
         border: @scaled-one-px-value-ie solid @border-color-shading-ie;
         border: @scaled-one-px-value solid @border-color-shading;
+        .rtl & {
+            margin: 0 2px 0 8px;
+        }
     }
 }
diff --git a/apps/presentationeditor/main/app/template/HeaderFooterDialog.template b/apps/presentationeditor/main/app/template/HeaderFooterDialog.template
index f4d53117c1..3122db464d 100644
--- a/apps/presentationeditor/main/app/template/HeaderFooterDialog.template
+++ b/apps/presentationeditor/main/app/template/HeaderFooterDialog.template
@@ -10,11 +10,11 @@
                 </td>
             </tr>
             <tr>
-                <td class="padding-small format-combo">
+                <td class="padding-small padding-left-22">
                     <label  style="display:block;" class="input-label"><%= scope.textFormat %></label>
                     <div id="hf-dlg-combo-format" style="width: 100%;"></div>
                 </td>
-                <td class="padding-small lang-combo">
+                <td class="padding-small padding-left-5">
                     <label  style="display:block;" class="input-label"><%= scope.textLang %></label>
                     <div id="hf-dlg-combo-lang" style="width: 100%;"></div>
                 </td>
diff --git a/apps/presentationeditor/main/app/template/ParagraphSettingsAdvanced.template b/apps/presentationeditor/main/app/template/ParagraphSettingsAdvanced.template
index 9cddf5707e..ff8f6a8927 100644
--- a/apps/presentationeditor/main/app/template/ParagraphSettingsAdvanced.template
+++ b/apps/presentationeditor/main/app/template/ParagraphSettingsAdvanced.template
@@ -63,7 +63,7 @@
                 <td class="padding-small">
                     <div id="paragraphadv-checkbox-strike"></div>
                 </td>
-                <td class="padding-small padding-left">
+                <td class="padding-small padding-left-40">
                     <div id="paragraphadv-checkbox-subscript"></div>
                 </td>
             </tr>
@@ -71,7 +71,7 @@
                 <td class="padding-small">
                     <div id="paragraphadv-checkbox-double-strike"></div>
                 </td>
-                <td class="padding-small padding-left">
+                <td class="padding-small padding-left-40">
                     <div id="paragraphadv-checkbox-small-caps"></div>
                 </td>
             </tr>
@@ -79,7 +79,7 @@
                 <td class="padding-large">
                     <div id="paragraphadv-checkbox-superscript"></div>
                 </td>
-                <td class="padding-large padding-left">
+                <td class="padding-large padding-left-40">
                     <div id="paragraphadv-checkbox-all-caps"></div>
                 </td>
             </tr>
diff --git a/apps/presentationeditor/main/app/view/DocumentHolder.js b/apps/presentationeditor/main/app/view/DocumentHolder.js
index 019704a14b..6b18be85a8 100644
--- a/apps/presentationeditor/main/app/view/DocumentHolder.js
+++ b/apps/presentationeditor/main/app/view/DocumentHolder.js
@@ -1363,7 +1363,7 @@ define([
             });
 
             var langTemplate = _.template([
-                '<a id="<%= id %>" tabindex="-1" type="menuitem" style="padding-left: 28px !important;" langval="<%= value %>" class="<% if (checked) { %> checked <% } %>">',
+                '<a id="<%= id %>" tabindex="-1" type="menuitem" langval="<%= value %>" class="<% if (checked) { %> checked <% } %>">',
                 '<i class="icon <% if (spellcheck) { %> toolbar__icon btn-ic-docspell spellcheck-lang <% } %>"></i>',
                 '<%= caption %>',
                 '</a>'
diff --git a/apps/presentationeditor/main/app/view/FileMenuPanels.js b/apps/presentationeditor/main/app/view/FileMenuPanels.js
index 5ad8530d32..5c80ab0626 100644
--- a/apps/presentationeditor/main/app/view/FileMenuPanels.js
+++ b/apps/presentationeditor/main/app/view/FileMenuPanels.js
@@ -1994,8 +1994,8 @@ define([
                                     '<tr><td class="padding-large"><div id="print-combo-range" style="width: 248px;"></div></td></tr>',
                                     '<tr><td class="padding-large">',
                                         '<table style="width: 100%;"><tbody>',
-                                        '<tr><td class="padding-large"><%= scope.txtPages %>:</td><td class="padding-large" style="width: 100%;"><div id="print-txt-pages" style="width: 100%;"></div></td></tr>',
-                                        '<tr><td><%= scope.txtCopies %>:</td><td style="width: 100%;"><div id="print-txt-copies" style="width: 60px;"></div></td></tr>',
+                                        '<tr><td class="padding-large"><%= scope.txtPages %>:</td><td class="padding-large" style="width: 100%;"><div id="print-txt-pages" class="padding-left-5" style="width: 100%;"></div></td></tr>',
+                                        '<tr><td><%= scope.txtCopies %>:</td><td style="width: 100%;"><div id="print-txt-copies" class="padding-left-5" style="width: 60px;"></div></td></tr>',
                                         '</tr></tbody></table>',
                                     '</td></tr>',
                                     '<tr><td><label class="header"><%= scope.txtPrintSides %></label></td></tr>',
diff --git a/apps/presentationeditor/main/app/view/SlideSizeSettings.js b/apps/presentationeditor/main/app/view/SlideSizeSettings.js
index 7670e94fae..41316aed61 100644
--- a/apps/presentationeditor/main/app/view/SlideSizeSettings.js
+++ b/apps/presentationeditor/main/app/view/SlideSizeSettings.js
@@ -65,11 +65,11 @@ define([
                     '<div id="slide-size-combo" class="" style="margin-bottom: 10px;"></div>',
                     '<table cols="2" style="width: 100%;margin-bottom: 7px;">',
                         '<tr>',
-                            '<td class="padding-small padding-right">',
+                            '<td class="padding-small padding-right-10">',
                                 '<label class="input-label" style="font-weight: bold;">' + this.textWidth + '</label>',
                                 '<div id="slide-size-spin-width"></div>',
                             '</td>',
-                            '<td class="padding-small padding-left">',
+                            '<td class="padding-small padding-left-10">',
                                 '<label class="input-label" style="font-weight: bold;">' + this.textHeight + '</label>',
                                 '<div id="slide-size-spin-height"></div>',
                             '</td>',
diff --git a/apps/presentationeditor/main/resources/less/advanced-settings.less b/apps/presentationeditor/main/resources/less/advanced-settings.less
index bb3232f158..0f54dcaa8b 100644
--- a/apps/presentationeditor/main/resources/less/advanced-settings.less
+++ b/apps/presentationeditor/main/resources/less/advanced-settings.less
@@ -1,54 +1,3 @@
-#id-adv-paragraph-font {
-    .padding-left {
-        padding-left: 40px;
-
-        .rtl & {
-            padding-left: 0;
-            padding-right: 40px;
-        }
-    }
-}
-
-#window-slide-size-settings {
-    .padding-right {
-        padding-right: 10px;
-
-        .rtl & {
-            padding-right: 0;
-            padding-left: 10px;
-        }
-    }
-
-    .padding-left {
-        padding-left: 10px;
-
-        .rtl & {
-            padding-left: 0;
-            padding-right: 10px;
-        }
-    }
-}
-
-#window-header-footer {
-    .format-combo {
-        padding-left: 22px;
-
-        .rtl & {
-            padding-left: 0;
-            padding-right: 22px;
-        }
-    }
-
-    .lang-combo {
-        padding-left: 5px;
-
-        .rtl & {
-            padding-left: 0;
-            padding-right: 5px;
-        }
-    }
-}
-
 #window-hyperlink-settings {
     #id-dlg-hyperlink-external {
         border-top-right-radius: 0;
diff --git a/apps/presentationeditor/main/resources/less/leftmenu.less b/apps/presentationeditor/main/resources/less/leftmenu.less
index 16b74738f8..320faeabb6 100644
--- a/apps/presentationeditor/main/resources/less/leftmenu.less
+++ b/apps/presentationeditor/main/resources/less/leftmenu.less
@@ -24,7 +24,7 @@
     width: 100%;
     height: 100%;
     left: 40px;
-    padding-right: 40px;
+    .padding-right-40();
     top: 0;
     position: absolute;
     z-index: @zindex-dropdown - 5;
@@ -178,15 +178,10 @@
 
     .panel-context {
         width: 100%;
-        padding-left: 260px;
+        .padding-left(260px);
         background-color: @background-normal-ie;
         background-color: @background-normal;
 
-        .rtl & {
-            padding-left: 0;
-            padding-right: 260px;
-        }
-
         .content-box {
             height: 100%;
             padding: 0 20px;
@@ -578,6 +573,9 @@
                 &.sharedLink {
                     background-position: -24px -273px;
                 }
+                .rtl & {
+                    padding: 0 17px 0 0;
+                }
             }
 
             label, span {
@@ -712,21 +710,9 @@
                     .footer {
                         margin-top: 24px;
                     }
-                    #print-txt-pages, #print-txt-copies {
-                        padding-left: 5px;
-                        .rtl & {
-                            padding-left: 0;
-                            padding-right: 5px;
-                        }
-                    }
                     #print-combo-sides {
                         .dropdown-menu li > a {
-                            padding-right: 5px;
-                            padding-left: 20px;
-                            .rtl & {
-                                padding-right: 20px;
-                                padding-left: 5px;
-                            }
+                            .padding-x(20px, 5px);
                         }
                     }
                 }
@@ -734,7 +720,7 @@
 
             #print-navigation {
                 height: 50px;
-                padding-left: 20px;
+                .padding-left-20();
                 padding-top: 10px;
                 display: flex;
                 #print-prev-page {
diff --git a/apps/presentationeditor/main/resources/less/rightmenu.less b/apps/presentationeditor/main/resources/less/rightmenu.less
index f96562eca1..fd60a2476d 100644
--- a/apps/presentationeditor/main/resources/less/rightmenu.less
+++ b/apps/presentationeditor/main/resources/less/rightmenu.less
@@ -237,5 +237,9 @@
                 right: 26px;
             }
         }
+
+        .rtl & {
+            padding: 5px 15px 5px 2px;
+        }
     }
 }
\ No newline at end of file
diff --git a/apps/presentationeditor/main/resources/less/statusbar.less b/apps/presentationeditor/main/resources/less/statusbar.less
index cb40149140..1463374330 100644
--- a/apps/presentationeditor/main/resources/less/statusbar.less
+++ b/apps/presentationeditor/main/resources/less/statusbar.less
@@ -98,11 +98,7 @@
     
     .lang-menu {
         li a {
-            padding-left: 28px !important;
-            .rtl & {
-                padding-left: 20px !important;
-                padding-right: 28px !important;
-            }
+            .padding-x(28px, 20px);
         }
     }
 
diff --git a/apps/spreadsheeteditor/main/app/template/ChartSettingsDlg.template b/apps/spreadsheeteditor/main/app/template/ChartSettingsDlg.template
index a1bb750662..f45225e7d7 100644
--- a/apps/spreadsheeteditor/main/app/template/ChartSettingsDlg.template
+++ b/apps/spreadsheeteditor/main/app/template/ChartSettingsDlg.template
@@ -76,7 +76,7 @@
                 <td class="padding-small" width="100">
                     <label class="input-label"><%= scope.textMinValue %></label>
                 </td>
-                <td class="padding-small padding-right" width="115">
+                <td class="padding-small padding-right-10" width="115">
                     <div id="chart-dlg-combo-mintype-0"></div>
                 </td>
                 <td class="padding-small" width="90">
@@ -87,7 +87,7 @@
                 <td class="padding-small" width="100">
                     <label class="input-label"><%= scope.textMaxValue %></label>
                 </td>
-                <td class="padding-small padding-right" width="115">
+                <td class="padding-small padding-right-10" width="115">
                     <div id="chart-dlg-combo-maxtype-0"></div>
                 </td>
                 <td class="padding-small" width="90">
@@ -98,7 +98,7 @@
                 <td class="padding-large" width="100">
                     <label class="input-label"><%= scope.textAxisCrosses %></label>
                 </td>
-                <td class="padding-large padding-right" width="115">
+                <td class="padding-large padding-right-10" width="115">
                     <div id="chart-dlg-combo-v-crosstype-0"></div>
                 </td>
                 <td class="padding-large" width="90">
@@ -197,7 +197,7 @@
                 <td class="padding-small" width="100">
                     <label class="input-label"><%= scope.textMinValue %></label>
                 </td>
-                <td class="padding-small padding-right" width="115">
+                <td class="padding-small padding-right-10" width="115">
                     <div id="chart-dlg-combo-mintype-1"></div>
                 </td>
                 <td class="padding-small" width="90">
@@ -208,7 +208,7 @@
                 <td class="padding-small" width="100">
                     <label class="input-label"><%= scope.textMaxValue %></label>
                 </td>
-                <td class="padding-small padding-right" width="115">
+                <td class="padding-small padding-right-10" width="115">
                     <div id="chart-dlg-combo-maxtype-1"></div>
                 </td>
                 <td class="padding-small" width="90">
@@ -219,7 +219,7 @@
                 <td class="padding-large" width="100">
                     <label class="input-label"><%= scope.textAxisCrosses %></label>
                 </td>
-                <td class="padding-large padding-right" width="115">
+                <td class="padding-large padding-right-10" width="115">
                     <div id="chart-dlg-combo-v-crosstype-1"></div>
                 </td>
                 <td class="padding-large" width="90">
@@ -318,7 +318,7 @@
                 <td class="padding-small" width="100">
                     <label class="input-label"><%= scope.textAxisCrosses %></label>
                 </td>
-                <td class="padding-small axis-crosses-combo" width="115">
+                <td class="padding-small padding-right-10" width="115">
                     <div id="chart-dlg-combo-h-crosstype-0"></div>
                 </td>
                 <td class="padding-small" width="90">
@@ -427,7 +427,7 @@
                 <td class="padding-small" width="100">
                     <label class="input-label"><%= scope.textAxisCrosses %></label>
                 </td>
-                <td class="padding-small padding-right" width="115">
+                <td class="padding-small padding-right-10" width="115">
                     <div id="chart-dlg-combo-h-crosstype-1"></div>
                 </td>
                 <td class="padding-small" width="90">
@@ -566,7 +566,7 @@
                 <td class="padding-small" width="100">
                     <label class="input-label"><%= scope.textMinValue %></label>
                 </td>
-                <td class="padding-small padding-right" width="115">
+                <td class="padding-small padding-right-10" width="115">
                     <div id="spark-dlg-combo-mintype"></div>
                 </td>
                 <td class="padding-small" width="90">
@@ -577,7 +577,7 @@
                 <td class="padding-large" width="100">
                     <label class="input-label"><%= scope.textMaxValue %></label>
                 </td>
-                <td class="padding-large padding-right" width="115">
+                <td class="padding-large padding-right-10" width="115">
                     <div id="spark-dlg-combo-maxtype"></div>
                 </td>
                 <td class="padding-large" width="90">
diff --git a/apps/spreadsheeteditor/main/app/template/DataValidationDialog.template b/apps/spreadsheeteditor/main/app/template/DataValidationDialog.template
index 16ae7e641b..85104f52cf 100644
--- a/apps/spreadsheeteditor/main/app/template/DataValidationDialog.template
+++ b/apps/spreadsheeteditor/main/app/template/DataValidationDialog.template
@@ -2,11 +2,11 @@
     <div class="inner-content" style="height: 100%;">
         <table cols="2" style="width: 100%;height: 100%;">
             <tr>
-                <td class="padding-small" style="padding-right: 5px;">
+                <td class="padding-small padding-right-5">
                     <label class="input-label"><%= scope.textAllow %></label>
                     <div id="data-validation-cmb-allow"></div>
                 </td>
-                <td class="padding-small" style="padding-left: 5px;">
+                <td class="padding-small padding-left-5">
                     <label class="input-label"><%= scope.textData %></label>
                     <div id="data-validation-cmb-data"></div>
                 </td>
@@ -17,11 +17,11 @@
                 </td>
             </tr>
             <tr>
-                <td class="padding-small" style="padding-right: 5px;">
+                <td class="padding-small padding-right-5">
                     <label id="data-validation-label-min" class="input-label"><%= scope.textMin %></label>
                     <div id="data-validation-txt-min"></div>
                 </td>
-                <td class="padding-small" style="padding-left: 5px;">
+                <td class="padding-small padding-left-5">
                     <label id="data-validation-label-max" class="input-label"><%= scope.textMax %></label>
                     <div id="data-validation-txt-max"></div>
                 </td>
diff --git a/apps/spreadsheeteditor/main/app/template/ParagraphSettingsAdvanced.template b/apps/spreadsheeteditor/main/app/template/ParagraphSettingsAdvanced.template
index 9cddf5707e..ff8f6a8927 100644
--- a/apps/spreadsheeteditor/main/app/template/ParagraphSettingsAdvanced.template
+++ b/apps/spreadsheeteditor/main/app/template/ParagraphSettingsAdvanced.template
@@ -63,7 +63,7 @@
                 <td class="padding-small">
                     <div id="paragraphadv-checkbox-strike"></div>
                 </td>
-                <td class="padding-small padding-left">
+                <td class="padding-small padding-left-40">
                     <div id="paragraphadv-checkbox-subscript"></div>
                 </td>
             </tr>
@@ -71,7 +71,7 @@
                 <td class="padding-small">
                     <div id="paragraphadv-checkbox-double-strike"></div>
                 </td>
-                <td class="padding-small padding-left">
+                <td class="padding-small padding-left-40">
                     <div id="paragraphadv-checkbox-small-caps"></div>
                 </td>
             </tr>
@@ -79,7 +79,7 @@
                 <td class="padding-large">
                     <div id="paragraphadv-checkbox-superscript"></div>
                 </td>
-                <td class="padding-large padding-left">
+                <td class="padding-large padding-left-40">
                     <div id="paragraphadv-checkbox-all-caps"></div>
                 </td>
             </tr>
diff --git a/apps/spreadsheeteditor/main/app/template/StatusBar.template b/apps/spreadsheeteditor/main/app/template/StatusBar.template
index 4dce05ecb8..6322320ec9 100644
--- a/apps/spreadsheeteditor/main/app/template/StatusBar.template
+++ b/apps/spreadsheeteditor/main/app/template/StatusBar.template
@@ -20,7 +20,7 @@
         </div>
         <button id="status-btn-zoomup" type="button" class="btn small btn-toolbar"><i class="icon toolbar__icon btn-zoomup">&nbsp;</i></button>
     </div>
-    <div id="status-math-box" class="status-group">
+    <div id="status-math-box" class="status-group padding-right-4">
         <div class="separator short"></div>
         <label id="status-math-average">AVERAGE: 10</label>
         <label id="status-math-count">COUNT: 3</label>
diff --git a/apps/spreadsheeteditor/main/app/template/ToolbarAnother.template b/apps/spreadsheeteditor/main/app/template/ToolbarAnother.template
index d1cb8e71a5..28050c9a16 100644
--- a/apps/spreadsheeteditor/main/app/template/ToolbarAnother.template
+++ b/apps/spreadsheeteditor/main/app/template/ToolbarAnother.template
@@ -130,7 +130,7 @@
                 </div>
             </div>
             <div class="group" style="width: 100%;padding-left: 0;"></div>
-            <div class="group small" style="padding-right: 10px;">
+            <div class="group small padding-right-10">
                 <div class="elset">
                     <span class="btn-slot float-left" id="slot-btn-visible-area" style="width: auto;"></span>
                     <span class="btn-slot float-left" id="slot-btn-visible-area-close" style="width: auto;"></span>
diff --git a/apps/spreadsheeteditor/main/app/view/CreatePivotDialog.js b/apps/spreadsheeteditor/main/app/view/CreatePivotDialog.js
index 55b19dba21..f1e97c4844 100644
--- a/apps/spreadsheeteditor/main/app/view/CreatePivotDialog.js
+++ b/apps/spreadsheeteditor/main/app/view/CreatePivotDialog.js
@@ -87,7 +87,7 @@ define([
                                         '</td>',
                                     '</tr>',
                                     '<tr>',
-                                        '<td class="input-dest">',
+                                        '<td class="padding-left-22">',
                                             '<div id="create-pivot-input-dest" class="input-row" style=""></div>',
                                         '</td>',
                                     '</tr>',
diff --git a/apps/spreadsheeteditor/main/app/view/ExternalLinksDlg.js b/apps/spreadsheeteditor/main/app/view/ExternalLinksDlg.js
index c00286e182..8260424c97 100644
--- a/apps/spreadsheeteditor/main/app/view/ExternalLinksDlg.js
+++ b/apps/spreadsheeteditor/main/app/view/ExternalLinksDlg.js
@@ -115,7 +115,7 @@ define([
                 ],
                 itemTemplate: _.template([
                     '<div id="<%= id %>" class="list-item" style="width: 100%;display:inline-block;">',
-                        '<div style="width:240px;padding-right: 5px;" data-toggle="tooltip"><%= value %></div>',
+                        '<div class="padding-right-5" style="width:240px;" data-toggle="tooltip"><%= value %></div>',
                         '<div style="width:175px;" data-toggle="tooltip"><%= status %></div>',
                     '</div>'
                 ].join('')),
diff --git a/apps/spreadsheeteditor/main/app/view/FileMenuPanels.js b/apps/spreadsheeteditor/main/app/view/FileMenuPanels.js
index 9c232ecb0c..e42fbf926d 100644
--- a/apps/spreadsheeteditor/main/app/view/FileMenuPanels.js
+++ b/apps/spreadsheeteditor/main/app/view/FileMenuPanels.js
@@ -611,7 +611,7 @@ define([
                 data        : regdata,
                 template: _.template([
                     '<span class="input-group combobox <%= cls %> combo-langs" id="<%= id %>" style="<%= style %>">',
-                    '<input type="text" class="form-control" style="padding-left: 25px !important;" data-hint="2" data-hint-direction="bottom" data-hint-offset="big">',
+                    '<input type="text" class="form-control" style="' + (Common.UI.isRTL() ? 'padding-right' : 'padding-left') + ':25px !important;" data-hint="2" data-hint-direction="bottom" data-hint-offset="big">',
                     '<span class="icon input-icon lang-flag"></span>',
                         '<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">',
                             '<span class="caret" />',
@@ -619,7 +619,7 @@ define([
                         '<ul class="dropdown-menu <%= menuCls %>" style="<%= menuStyle %>" role="menu">',
                             '<% _.each(items, function(item) { %>',
                                 '<li id="<%= item.id %>" data-value="<%= item.value %>">',
-                                    '<a tabindex="-1" type="menuitem" style="padding-left: 26px !important;">',
+                                    '<a tabindex="-1" type="menuitem" style="' + (Common.UI.isRTL() ? 'padding-right' : 'padding-left') + ':26px !important;">',
                                         '<i class="icon lang-flag <%= item.langName %>" style="position: absolute;"></i>',
                                         '<%= scope.getDisplayValue(item) %>',
                                     '</a>',
diff --git a/apps/spreadsheeteditor/main/app/view/FormatRulesEditDlg.js b/apps/spreadsheeteditor/main/app/view/FormatRulesEditDlg.js
index 243069f950..e426145df1 100644
--- a/apps/spreadsheeteditor/main/app/view/FormatRulesEditDlg.js
+++ b/apps/spreadsheeteditor/main/app/view/FormatRulesEditDlg.js
@@ -543,7 +543,7 @@ define([ 'text!spreadsheeteditor/main/app/template/FormatRulesEditDlg.template',
                                     {caption: '--'},
                                     {
                                         id: "format-rules-borders-menu-new-bordercolor",
-                                        template: _.template('<a tabindex="-1" type="menuitem" style="padding-left:12px;">' + this.textNewColor + '</a>'),
+                                        template: _.template('<a tabindex="-1" type="menuitem" style="' + (Common.UI.isRTL() ? 'padding-right: 12px;': 'padding-left: 12px;') + '">' + this.textNewColor + '</a>'),
                                         stopPropagation: true
                                     }
                                 ]
diff --git a/apps/spreadsheeteditor/main/app/view/FormulaWizard.js b/apps/spreadsheeteditor/main/app/view/FormulaWizard.js
index 248cb9b61c..db9eb40631 100644
--- a/apps/spreadsheeteditor/main/app/view/FormulaWizard.js
+++ b/apps/spreadsheeteditor/main/app/view/FormulaWizard.js
@@ -306,8 +306,8 @@ define([
 
         setControls: function(argcount, argtype, argval, argres) {
             var me = this,
-                argtpl = '<tr><td style="padding-right: 10px;padding-bottom: 8px;vertical-align: middle;"><div id="formula-wizard-lbl-name-arg{0}" style="min-width:' + this.minArgWidth + 'px;white-space: nowrap;margin-top: 1px;"></div></td>' +
-                        '<td style="padding-right: 5px;padding-bottom: 8px;width: 100%;vertical-align: middle;"><div id="formula-wizard-txt-arg{0}"></div></td>' +
+                argtpl = '<tr><td class="padding-right-10" style="padding-bottom: 8px;vertical-align: middle;"><div id="formula-wizard-lbl-name-arg{0}" style="min-width:' + this.minArgWidth + 'px;white-space: nowrap;margin-top: 1px;"></div></td>' +
+                        '<td class="padding-right-5" style="padding-bottom: 8px;width: 100%;vertical-align: middle;"><div id="formula-wizard-txt-arg{0}"></div></td>' +
                         '<td style="padding-bottom: 8px;vertical-align: middle;"><div id="formula-wizard-lbl-val-arg{0}" class="input-label" style="margin-top: 1px;width: 200px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;"></div></td></tr>',
                 div = $(Common.Utils.String.format(argtpl, argcount));
             this.tableArgs.append(div);
diff --git a/apps/spreadsheeteditor/main/app/view/ImportFromXmlDialog.js b/apps/spreadsheeteditor/main/app/view/ImportFromXmlDialog.js
index 2fac9cf040..fd09c73fa0 100644
--- a/apps/spreadsheeteditor/main/app/view/ImportFromXmlDialog.js
+++ b/apps/spreadsheeteditor/main/app/view/ImportFromXmlDialog.js
@@ -76,7 +76,7 @@ define([
                                         '</td>',
                                     '</tr>',
                                     '<tr>',
-                                        '<td style="padding-left: 22px;">',
+                                        '<td class="padding-left-22">',
                                             '<div id="import-xml-input-dest" class="input-row" style=""></div>',
                                         '</td>',
                                     '</tr>',
diff --git a/apps/spreadsheeteditor/main/app/view/NamedRangePasteDlg.js b/apps/spreadsheeteditor/main/app/view/NamedRangePasteDlg.js
index d6b2f8a283..42c3912d28 100644
--- a/apps/spreadsheeteditor/main/app/view/NamedRangePasteDlg.js
+++ b/apps/spreadsheeteditor/main/app/view/NamedRangePasteDlg.js
@@ -94,7 +94,7 @@ define([
                     '<div style="pointer-events:none;">',
                         '<div id="<%= id %>" class="list-item" style="width: 100%;display:inline-block;">',
                             '<div class="listitem-icon toolbar__icon margin-right-5 <% print(isTable?"btn-menu-table":(isSlicer ? "btn-slicer" : "btn-named-range")) %>"></div>',
-                            '<div style="width:186px;padding-right: 5px;"><%= Common.Utils.String.htmlEncode(name) %></div>',
+                            '<div class="padding-right-5" style="width:186px;"><%= Common.Utils.String.htmlEncode(name) %></div>',
                         '</div>',
                     '</div>'
                 ].join(''))
diff --git a/apps/spreadsheeteditor/main/app/view/PageMarginsDialog.js b/apps/spreadsheeteditor/main/app/view/PageMarginsDialog.js
index 8fbf5365ea..904b537c0c 100644
--- a/apps/spreadsheeteditor/main/app/view/PageMarginsDialog.js
+++ b/apps/spreadsheeteditor/main/app/view/PageMarginsDialog.js
@@ -61,7 +61,7 @@ define([
                 '<div class="box" style="height: 85px;">',
                     '<table cols="2" style="width: 100%;margin-bottom: 10px;">',
                         '<tr>',
-                            '<td class="padding-right" style="padding-bottom: 8px;">',
+                            '<td class="padding-right-10" style="padding-bottom: 8px;">',
                                 '<label class="input-label">' + this.textTop + '</label>',
                                 '<div id="page-margins-spin-top"></div>',
                             '</td>',
@@ -71,7 +71,7 @@ define([
                             '</td>',
                         '</tr>',
                         '<tr>',
-                            '<td class="padding-small padding-right">',
+                            '<td class="padding-small padding-right-10">',
                                 '<label class="input-label">' + this.textLeft + '</label>',
                                 '<div id="page-margins-spin-left"></div>',
                             '</td>',
diff --git a/apps/spreadsheeteditor/main/app/view/PivotGroupDialog.js b/apps/spreadsheeteditor/main/app/view/PivotGroupDialog.js
index 9676a7fb40..e5a0d7c4a4 100644
--- a/apps/spreadsheeteditor/main/app/view/PivotGroupDialog.js
+++ b/apps/spreadsheeteditor/main/app/view/PivotGroupDialog.js
@@ -67,7 +67,7 @@ define([
                                 '</td>',
                             '</tr>',
                             '<tr>',
-                                '<td style="padding-right: 10px;padding-bottom: 8px;width: 100%;">',
+                                '<td class="padding-right-10" style="padding-bottom: 8px;width: 100%;">',
                                     '<div id="pivot-group-dlg-chk-start" style="margin-top: 2px;"></div>',
                                 '</td>',
                                 '<td style="padding-bottom: 8px;">',
@@ -75,7 +75,7 @@ define([
                                 '</td>',
                             '</tr>',
                             '<tr>',
-                                '<td style="padding-right: 10px;padding-bottom: 8px;width: 100%;">',
+                                '<td class="padding-right-10" style="padding-bottom: 8px;width: 100%;">',
                                     '<div id="pivot-group-dlg-chk-end" style="margin-top: 2px;"></div>',
                                 '</td>',
                                 '<td style="padding-bottom: 8px;">',
@@ -83,7 +83,7 @@ define([
                                 '</td>',
                             '</tr>',
                             '<tr class="group-number">',
-                                '<td style="padding-right: 10px;padding-bottom: 8px;width: 100%;">',
+                                '<td class="padding-right-10" style="padding-bottom: 8px;width: 100%;">',
                                     '<label class="margin-left-22" style="margin-top:2px;">' + t.textBy + '</label>',
                                 '</td>',
                                 '<td style="padding-bottom: 8px;">',
@@ -101,7 +101,7 @@ define([
                                 '</td>',
                             '</tr>',
                             '<tr class="group-date">',
-                                '<td style="padding-right: 10px;width: 100%;">',
+                                '<td class="padding-right-10" style="width: 100%;">',
                                     '<label style="margin-top:2px;">' + t.textNumDays + '</label>',
                                 '</td>',
                                 '<td>',
diff --git a/apps/spreadsheeteditor/main/app/view/PrintTitlesDialog.js b/apps/spreadsheeteditor/main/app/view/PrintTitlesDialog.js
index 5dd7fc7b45..92fdf52621 100644
--- a/apps/spreadsheeteditor/main/app/view/PrintTitlesDialog.js
+++ b/apps/spreadsheeteditor/main/app/view/PrintTitlesDialog.js
@@ -61,12 +61,12 @@ define([
                 '<div class="box" style="height: 100px;">',
                 '<table cols="2" style="width: 100%;margin-bottom: 10px;">',
                     '<tr>',
-                        '<td colspan="2" style="padding-right: 10px;">',
+                        '<td colspan="2" class="padding-right-10">',
                             '<label class="input-label">' + this.textTop + '</label>',
                         '</td>',
                     '</tr>',
                     '<tr>',
-                        '<td style="padding-right: 10px;padding-bottom: 16px;">',
+                        '<td class="padding-right-10" style="padding-bottom: 16px;">',
                             '<div id="print-titles-txt-top"></div>',
                         '</td>',
                         '<td style="padding-bottom: 16px;">',
@@ -74,12 +74,12 @@ define([
                         '</td>',
                     '</tr>',
                     '<tr>',
-                        '<td colspan="2" style="padding-right: 10px;">',
+                        '<td colspan="2" class="padding-right-10">',
                             '<label class="input-label">' + this.textLeft + '</label>',
                         '</td>',
                     '</tr>',
                     '<tr>',
-                        '<td style="padding-right: 10px;">',
+                        '<td class="padding-right-10">',
                             '<div id="print-titles-txt-left"></div>',
                         '</td>',
                         '<td>',
diff --git a/apps/spreadsheeteditor/main/app/view/ProtectDialog.js b/apps/spreadsheeteditor/main/app/view/ProtectDialog.js
index 38a106c6fd..075318f998 100644
--- a/apps/spreadsheeteditor/main/app/view/ProtectDialog.js
+++ b/apps/spreadsheeteditor/main/app/view/ProtectDialog.js
@@ -92,11 +92,11 @@ define([
                         '<% if (type=="sheet") { %>',
                         '<table cols="2" style="width: 100%;">',
                             '<tr>',
-                                '<td class="padding-right" style="width:50%;">',
+                                '<td class="padding-right-5" style="width:50%;">',
                                     '<label class="input-label">' + t.txtPassword + ' (' + t.txtOptional + ')' + '</label>',
                                     '<div id="' + t.winId + '-id-password-txt" class="input-row" style="width: 100%;margin-bottom: 10px;"></div>',
                                 '</td>',
-                                '<td class="padding-left" style="width:50%;">',
+                                '<td class="padding-left-5" style="width:50%;">',
                                     '<label class="input-label">' + t.txtRepeat + '</label>',
                                     '<div id="' + t.winId + '-id-repeat-txt" class="input-row" style="width: 100%;margin-bottom: 10px;"></div>',
                                 '</td>',
diff --git a/apps/spreadsheeteditor/main/app/view/ProtectRangesDlg.js b/apps/spreadsheeteditor/main/app/view/ProtectRangesDlg.js
index e510128fbc..7dc311b38c 100644
--- a/apps/spreadsheeteditor/main/app/view/ProtectRangesDlg.js
+++ b/apps/spreadsheeteditor/main/app/view/ProtectRangesDlg.js
@@ -104,8 +104,8 @@ define([  'text!spreadsheeteditor/main/app/template/ProtectRangesDlg.template',
                 ],
                 itemTemplate: _.template([
                         '<div id="<%= id %>" class="list-item" style="width: 100%;display:inline-block;<% if (!lock) { %>pointer-events:none;<% } %>">',
-                            '<div style="width:184px;padding-right: 5px;"><%= Common.Utils.String.htmlEncode(name) %></div>',
-                            '<div style="width:180px;padding-right: 5px;"><%= range %></div>',
+                            '<div class="padding-right-5" style="width:184px;"><%= Common.Utils.String.htmlEncode(name) %></div>',
+                            '<div class="padding-right-5" style="width:180px;"><%= range %></div>',
                             '<div style="width:70px;"><% if (pwd) { %>', me.txtYes, '<% } else { %>', me.txtNo, '<% } %></div>',
                             '<% if (lock) { %>',
                                 '<div class="lock-user"><%=lockuser%></div>',
diff --git a/apps/spreadsheeteditor/main/app/view/ProtectedRangesManagerDlg.js b/apps/spreadsheeteditor/main/app/view/ProtectedRangesManagerDlg.js
index fabfec8045..140d0ae625 100644
--- a/apps/spreadsheeteditor/main/app/view/ProtectedRangesManagerDlg.js
+++ b/apps/spreadsheeteditor/main/app/view/ProtectedRangesManagerDlg.js
@@ -113,8 +113,8 @@ define([  'text!spreadsheeteditor/main/app/template/ProtectedRangesManagerDlg.te
                 ],
                 itemTemplate: _.template([
                     '<div id="<%= id %>" class="list-item" style="width: 100%;display:inline-block;<% if (!lock) { %>pointer-events:none;<% } %>">',
-                    '<div style="width:184px;padding-right: 5px;"><%= Common.Utils.String.htmlEncode(name) %></div>',
-                    '<div style="width:191px;padding-right: 5px;"><%= range %></div>',
+                    '<div class="padding-right-5" style="width:184px;"><%= Common.Utils.String.htmlEncode(name) %></div>',
+                    '<div class="padding-right-5" style="width:191px;"><%= range %></div>',
                     '<div style="width:70px;"><% if (canEdit) { %>', me.txtEdit, '<% } else { %>', me.txtView, '<% } %></div>',
                     '<% if (lock) { %>',
                     '<div class="lock-user"><%=lockuser%></div>',
diff --git a/apps/spreadsheeteditor/main/app/view/ScaleDialog.js b/apps/spreadsheeteditor/main/app/view/ScaleDialog.js
index e2a6d43105..a8df8d78d7 100644
--- a/apps/spreadsheeteditor/main/app/view/ScaleDialog.js
+++ b/apps/spreadsheeteditor/main/app/view/ScaleDialog.js
@@ -66,7 +66,7 @@ define([
             this.template = [
                 '<div class="box">',
                 '<div id="radio-fit-to" style="margin-bottom: 4px;"></div>',
-                '<div class="padding-left">',
+                '<div class="padding-left-22">',
                     '<div>',
                         '<label style="height: 22px;width: 55px;padding-top: 4px;display: inline-block;margin-bottom: 4px;">' + this.textWidth + '</label>',
                         '<div id="scale-width" style="display: inline-block;margin-bottom: 4px;"></div>',
@@ -77,7 +77,7 @@ define([
                     '</div>',
                 '</div>',
                 '<div id="radio-scale-to" style="margin-bottom: 6px;"></div>',
-                '<div id="scale" class="padding-left" style="margin-bottom: 6px;"></div>',
+                '<div id="scale" class="padding-left-22" style="margin-bottom: 6px;"></div>',
                 '</div>'
             ].join('');
 
diff --git a/apps/spreadsheeteditor/main/app/view/Statusbar.js b/apps/spreadsheeteditor/main/app/view/Statusbar.js
index d3df4897f1..5107555738 100644
--- a/apps/spreadsheeteditor/main/app/view/Statusbar.js
+++ b/apps/spreadsheeteditor/main/app/view/Statusbar.js
@@ -322,7 +322,7 @@ define([
                         {caption: '--'},
                         {
                             id: "id-tab-menu-new-color",
-                            template: _.template('<a tabindex="-1" type="menuitem" style="padding-left:12px;">' + me.textNewColor + '</a>')
+                            template: _.template('<a tabindex="-1" type="menuitem" style="' + (Common.UI.isRTL() ? 'padding-right: 12px;': 'padding-left: 12px;') + '">' + me.textNewColor + '</a>')
                         }
                     ]
                 });
diff --git a/apps/spreadsheeteditor/main/app/view/WatchDialog.js b/apps/spreadsheeteditor/main/app/view/WatchDialog.js
index e2ce922750..55c2828812 100644
--- a/apps/spreadsheeteditor/main/app/view/WatchDialog.js
+++ b/apps/spreadsheeteditor/main/app/view/WatchDialog.js
@@ -98,11 +98,11 @@ define([  'text!spreadsheeteditor/main/app/template/WatchDialog.template',
                 ],
                 itemTemplate: _.template([
                     '<div id="<%= id %>" class="list-item" style="width: 100%;display:inline-block;">',
-                        '<div style="width:70px;padding-right: 5px;"><%= Common.Utils.String.htmlEncode(book) %></div>',
-                        '<div style="width:70px;padding-right: 5px;"><%= Common.Utils.String.htmlEncode(sheet) %></div>',
-                        '<div style="width:70px;padding-right: 5px;"><%= Common.Utils.String.htmlEncode(name) %></div>',
-                        '<div style="width:70px;padding-right: 5px;"><%= cell %></div>',
-                        '<div style="width:110px;padding-right: 5px;" data-toggle="tooltip"><%= Common.Utils.String.htmlEncode(value) %></div>',
+                        '<div class="padding-right-5" style="width:70px;"><%= Common.Utils.String.htmlEncode(book) %></div>',
+                        '<div class="padding-right-5" style="width:70px;"><%= Common.Utils.String.htmlEncode(sheet) %></div>',
+                        '<div class="padding-right-5" style="width:70px;"><%= Common.Utils.String.htmlEncode(name) %></div>',
+                        '<div class="padding-right-5" style="width:70px;"><%= cell %></div>',
+                        '<div class="padding-right-5" style="width:110px;" data-toggle="tooltip"><%= Common.Utils.String.htmlEncode(value) %></div>',
                         '<div style="width:135px;" data-toggle="tooltip"><%= formula %></div>',
                     '</div>'
                 ].join('')),
diff --git a/apps/spreadsheeteditor/main/resources/less/advanced-settings.less b/apps/spreadsheeteditor/main/resources/less/advanced-settings.less
index b342d1c316..4138ce4eeb 100644
--- a/apps/spreadsheeteditor/main/resources/less/advanced-settings.less
+++ b/apps/spreadsheeteditor/main/resources/less/advanced-settings.less
@@ -5,6 +5,9 @@
         .font-weight-bold();
         .font-size-normal();
         white-space: nowrap;
+        .rtl & {
+            padding: 0 10px 0 0;
+        }
     }
 
     .header-sorted {
@@ -122,42 +125,6 @@
     }
 }
 
-#id-chart-settings-dlg-vert,
-#id-chart-settings-dlg-vert-sec,
-#id-chart-settings-dlg-hor-sec,
-#id-spark-settings-dlg-axis {
-    .padding-right {
-        padding-right: 10px;
-
-        .rtl & {
-            padding-right: 0;
-            padding-left: 10px;
-        }
-    }
-}
-
-#id-chart-settings-dlg-hor {
-    .axis-crosses-combo {
-        padding-right: 10px;
-
-        .rtl & {
-            padding-right: 0;
-            padding-left: 10px;
-        }
-    }
-}
-
-#id-adv-paragraph-font {
-    .padding-left {
-        padding-left: 40px;
-
-        .rtl & {
-            padding-left: 0;
-            padding-right: 40px;
-        }
-    }
-}
-
 #window-chart-data {
     .up-down-btns {
         display: inline-block;
@@ -185,40 +152,25 @@
 
     .series-value {
         width: 95px;
-        padding-left: 5px;
+        .padding-left-5();
         display: inline-block;
         vertical-align: middle;
         overflow: hidden;
         text-overflow: ellipsis;
         white-space: nowrap;
-
-        .rtl & {
-            padding-left: 0;
-            padding-right: 5px;
-        }
     }
 
     .series-cmb {
         width: 110px;
-        padding-left: 5px;
+        .padding-left-5();
         display: inline-block;
         vertical-align: middle;
-
-        .rtl & {
-            padding-left: 0;
-            padding-right: 5px;
-        }
     }
 
     .series-chk {
-        padding-left: 55px;
+        .padding-left(55px);
         display: inline-block;
         vertical-align: middle;
-
-        .rtl & {
-            padding-left: 0;
-            padding-right: 55px;
-        }
     }
 }
 
@@ -233,17 +185,6 @@
     }
 }
 
-#window-create-pivot {
-    .input-dest {
-        padding-left: 22px;
-
-        .rtl & {
-            padding-left: 0;
-            padding-right: 22px;
-        }
-    }
-}
-
 #window-hyperlink {
     #id-dlg-hyperlink-external {
         border-top-right-radius: 0;
@@ -322,28 +263,6 @@
     }
 }
 
-#window-page-margins {
-    .padding-right {
-        padding-right: 10px;
-
-        .rtl & {
-            padding-right: 0;
-            padding-left: 10px;
-        }
-    }
-}
-
-#window-scale {
-    .padding-left {
-        padding-left: 22px;
-
-        .rtl & {
-            padding-left: 0;
-            padding-right: 22px;
-        }
-    }
-}
-
 #window-name-manager {
     #name-manager-group-btn {
         vertical-align: bottom;
diff --git a/apps/spreadsheeteditor/main/resources/less/filterdialog.less b/apps/spreadsheeteditor/main/resources/less/filterdialog.less
index a2324368b4..1fd473409c 100644
--- a/apps/spreadsheeteditor/main/resources/less/filterdialog.less
+++ b/apps/spreadsheeteditor/main/resources/less/filterdialog.less
@@ -10,7 +10,7 @@
     }
 
     .item {
-      padding-right: 12px;
+      .padding-x(6px, 12px);
     }
   }
 
diff --git a/apps/spreadsheeteditor/main/resources/less/leftmenu.less b/apps/spreadsheeteditor/main/resources/less/leftmenu.less
index d5e1923e21..a5dd2c3b10 100644
--- a/apps/spreadsheeteditor/main/resources/less/leftmenu.less
+++ b/apps/spreadsheeteditor/main/resources/less/leftmenu.less
@@ -24,7 +24,7 @@
     width: 100%;
     height: 100%;
     left: 40px;
-    padding-right: 40px;
+    .padding-right-40();
     top: 0;
     position: absolute;
     z-index: @zindex-dropdown - 5;
@@ -169,15 +169,10 @@
 
     .panel-context {
         width: 100%;
-        padding-left: 260px;
+        .padding-left(260px);
         background-color: @background-normal-ie;
         background-color: @background-normal;
 
-        .rtl & {
-            padding-left: 0;
-            padding-right: 260px;
-        }
-
         .content-box {
             height: 100%;
             padding: 0 20px;
@@ -366,6 +361,10 @@
                         & > div {
                             margin-bottom: 15px;
                         }
+
+                        .rtl & {
+                            padding: 0 0 0 20px;
+                        }
                     }
                 }
             }
@@ -408,7 +407,7 @@
                 margin-bottom: 20px;
 
                 .rtl & {
-                    padding: 0 10px 10px 0;
+                    padding: 0 10px 0 0;
                 }
             }
 
@@ -655,6 +654,9 @@
                 &.sharedLink {
                     background-position: -24px -273px;
                 }
+                .rtl & {
+                    padding: 0 17px 0 0;
+                }
             }
 
             label, span {
@@ -815,13 +817,7 @@
                     }
                     #print-combo-sides {
                         .dropdown-menu li > a {
-                            padding-right: 5px;
-                            padding-left: 20px;
-
-                            .rtl & {
-                                padding-right: 20px;
-                                padding-left: 5px;
-                            }
+                            .padding-x(20px, 5px);
                         }
                     }
                     .print-titles-header {
@@ -843,13 +839,8 @@
                         }
                         .header {
                             cursor: pointer;
-                            padding-left: 15px;
+                            .padding-left-15();
                             line-height: 24px;
-
-                            .rtl & {
-                                padding-left: 0;
-                                padding-right: 15px;
-                            }
                         }
                     }
                     .no-expand {
@@ -870,7 +861,7 @@
                     }
                 }
                 .fms-flex-apply {
-                    padding-left: 16px;
+                    .padding-left(16px);
                     .footer {
                         .btn {
                             margin-top: 16px;
@@ -891,7 +882,7 @@
                         width: 247px;
                     }
                     td:not(:last-child) {
-                        padding-right: 5px;
+                        .padding-right-5();
                     }
                     .btn-text-default.auto {
                         padding-left: 3px;
@@ -903,7 +894,7 @@
             }
             #print-navigation {
                 height: 50px;
-                padding-left: 20px;
+                .padding-left-20();
                 padding-top: 10px;
                 display: flex;
                 #print-prev-page {
@@ -1040,7 +1031,7 @@
                 height: 18px;
                 text-align: start;
                 font-weight: normal;
-                padding-left: 4px;
+                .padding-left-4();
                 padding-top: 2px;
                 overflow: hidden;
                 white-space: nowrap;
@@ -1052,11 +1043,6 @@
                 &:last-child {
                     width: 36%;
                 }
-
-                .rtl & {
-                    padding-left: 0;
-                    padding-right: 4px;
-                }
             }
         }
         .search-items {
@@ -1072,7 +1058,7 @@
                 display: flex;
                 div {
                     width: 16%;
-                    padding-left: 4px;
+                    .padding-left-4();
                     height: 28px;
                     line-height: 28px;
                     white-space: nowrap;
@@ -1081,11 +1067,6 @@
                     &:last-child {
                         width: 36%;
                     }
-
-                    .rtl & {
-                        padding-left: 0;
-                        padding-right: 4px;
-                    }
                 }
             }
         }
diff --git a/apps/spreadsheeteditor/main/resources/less/rightmenu.less b/apps/spreadsheeteditor/main/resources/less/rightmenu.less
index 6dd61c0cd9..7623049885 100644
--- a/apps/spreadsheeteditor/main/resources/less/rightmenu.less
+++ b/apps/spreadsheeteditor/main/resources/less/rightmenu.less
@@ -192,7 +192,7 @@
     height: 250px;
 
     .item {
-        padding-right: 3px;
+        padding: 3px;
     }
 
     .list-item {
@@ -313,6 +313,10 @@
                 right: 26px;
             }
         }
+
+        .rtl & {
+            padding: 5px 15px 5px 2px;
+        }
     }
 }
 
diff --git a/apps/spreadsheeteditor/main/resources/less/statusbar.less b/apps/spreadsheeteditor/main/resources/less/statusbar.less
index 8db08e9e20..f07e117dae 100644
--- a/apps/spreadsheeteditor/main/resources/less/statusbar.less
+++ b/apps/spreadsheeteditor/main/resources/less/statusbar.less
@@ -65,44 +65,22 @@
 
         .separator {
             position: relative;
-            padding-right: 11px;
+            .padding-right(11px);
             margin-top: -6px;
-
-            .rtl & {
-                padding-right: 0;
-                padding-left: 11px;
-            }
         }
     }
 
     #status-math-box {
-        padding-right: 4px;
-        .rtl & {
-            padding-right: 0;
-            padding-left: 4px;
-        }
         label {
-            padding-right: 10px;
-            .rtl & {
-                padding-right: 0;
-                padding-left: 10px;
-            }
+            .padding-right-10();
         }
     }
 
     #status-filtered-box {
-        padding-right: 14px;
-        .rtl & {
-            padding-right: 0;
-            padding-left: 14px;
-        }
+        .padding-right(14px);
         label {
             &:not(:last-child) {
-                padding-right: 10px;
-                .rtl & {
-                    padding-right: 0;
-                    padding-left: 10px;
-                }
+                .padding-right-10();
             }
         }
     }
@@ -251,11 +229,7 @@
 
                 &.icon-visible {
                     > span {
-                        padding-left: 25px;
-                        .rtl & {
-                            padding-left: 0;
-                            padding-right: 25px;
-                        }
+                        .padding-x(25px, 10px);
                         > .toolbar__icon {
                             width: 20px;
                             height: 20px;
@@ -286,24 +260,18 @@
 
                     &:first-child {
                         > span {
-                            padding-left: 8px;
-                            .rtl & {
-                                padding-left: 0;
-                                padding-right: 8px;
-                            }
+                            .padding-x(8px, 10px);
                         }
                     }
 
                     > span {
                         border-left: 2px solid @text-normal-ie;
                         border-left: 2px solid @text-normal;
-                        padding-left: 9px;
+                        .padding-x(9px, 10px);
                         .rtl & {
                             border-left: none;
-                            padding-left: 0;
                             border-right: 2px solid @text-normal-ie;
                             border-right: 2px solid @text-normal;
-                            padding-right: 9px;
                         }
                     }
                     
@@ -313,8 +281,7 @@
                             border-left: @scaled-one-px-value solid @border-toolbar;
                             border-right: 2px solid @text-normal-ie;
                             border-right: 2px solid @text-normal;
-                            padding-right: 9px;
-                            padding-left: 10px;
+                            .padding-x(10px, 9px);
                             .rtl & {
                                 border-left: none;
                                 border-right: none;
@@ -322,26 +289,16 @@
                                 border-right: @scaled-one-px-value solid @border-toolbar;
                                 border-left: 2px solid @text-normal-ie;
                                 border-left: 2px solid @text-normal;
-                                padding-right: 10px;
-                                padding-left: 9px;
                             }
                         }
                     }
                     &.icon-visible {
                         > span {
-                            padding-left: 24px;
-                            .rtl & {
-                                padding-left: 0;
-                                padding-right: 24px;
-                            }
+                            .padding-x(24px, 10px);
                         }
                         &.right {
                             > span {
-                                padding-left: 25px;
-                                .rtl & {
-                                    padding-left: 0;
-                                    padding-right: 25px;
-                                }
+                                .padding-x(25px, 10px);
                             }
                         }
                     }
@@ -436,12 +393,7 @@
                 .text-align-left();
                 a {
                     position: relative;
-                    padding-left: 26px;
-                    padding-right: 20px;
-                    .rtl & {
-                        padding-left: 20px;
-                        padding-right: 26px;
-                    }
+                    .padding-x(26px, 20px);
                     .color {
                         height: 21px;
                         width: 4px;
@@ -521,14 +473,10 @@
                     overflow: hidden;
                     text-overflow: ellipsis;
                     .text-align-right();
+                    .padding-left-5();
                     vertical-align: bottom;
-                    padding-left: 5px;
                     color: silver;
                     cursor: pointer;
-                    .rtl & {
-                        padding-left: 0;
-                        padding-right: 5px;
-                    }
                 }
             }
         }
diff --git a/apps/spreadsheeteditor/main/resources/less/toolbar.less b/apps/spreadsheeteditor/main/resources/less/toolbar.less
index dbeefe0941..7d5b5006e8 100644
--- a/apps/spreadsheeteditor/main/resources/less/toolbar.less
+++ b/apps/spreadsheeteditor/main/resources/less/toolbar.less
@@ -234,17 +234,6 @@
     }
 }
 
-#id-toolbar-menu-new-bordercolor {
-    > a {
-        padding-left: 12px;
-
-        .rtl & {
-            padding-left: 0;
-            padding-right: 12px;
-        }
-    }
-}
-
 #id-toolbar-menu-auto-bordercolor {
     .color-auto {
         background-image: none;
@@ -281,14 +270,9 @@
         text-overflow: ellipsis;
         .text-align-right();
         vertical-align: bottom;
-        padding-left: 125px;
+        .padding-left(125px);
         color: silver;
         white-space: nowrap;
-
-        .rtl & {
-            padding-left: 0;
-            padding-right: 100px;
-        }
     }
 }