diff --git a/apps/common/locale.js b/apps/common/locale.js
index 0c55b3ba9..63e31c5b6 100644
--- a/apps/common/locale.js
+++ b/apps/common/locale.js
@@ -171,10 +171,15 @@ Common.Locale = new(function() {
         } else require(polyfills, _requireLang);
     } else _requireLang();
 
+    const _isCurrentRtl = function () {
+        return false;
+    };
+
     return {
         apply: _applyLocalization,
         get: _get,
         getCurrentLanguage: _getCurrentLanguage,
+        isCurrentLanguageRtl: _isCurrentRtl,
         getDefaultLanguage: _getDefaultLanguage
     };
     
diff --git a/apps/common/main/lib/component/ColorButton.js b/apps/common/main/lib/component/ColorButton.js
index 8e2a2280b..90c428b8c 100644
--- a/apps/common/main/lib/component/ColorButton.js
+++ b/apps/common/main/lib/component/ColorButton.js
@@ -91,7 +91,7 @@ define([
                     auto.push({
                         id: id + '-color-auto',
                         caption: (typeof options.auto == 'object') ? options.auto.caption || this.textAutoColor : this.textAutoColor,
-                        template: _.template('<a tabindex="-1" type="menuitem"><span class="menu-item-icon color-auto" style="background-image: none; width: 12px; height: 12px; margin: 1px 7px 0 1px; background-color: #' + this.autocolor + ';"></span><%= caption %></a>')
+                        template: _.template('<a tabindex="-1" type="menuitem"><span class="menu-item-icon color-auto" style="background-color: #' + this.autocolor + ';"></span><%= caption %></a>')
                     });
                     auto.push({caption: '--'});
                 }
diff --git a/apps/common/main/lib/component/ComboBorderSize.js b/apps/common/main/lib/component/ComboBorderSize.js
index 6401e6867..fd2b89f5f 100644
--- a/apps/common/main/lib/component/ComboBorderSize.js
+++ b/apps/common/main/lib/component/ComboBorderSize.js
@@ -190,10 +190,17 @@ 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">',
+                        '<% if (!isRTL) { %>',
                             '<span><%= item.displayValue %></span>',
                             '<% if (item.offsety!==undefined) { %>',
                              '<img src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" align="right" style="background-position: 0 -<%= item.offsety %>px;">',
                             '<% } %>',
+                        '<% } else { %>',
+                            '<% if (item.offsety!==undefined) { %>',
+                            '<img src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" align="left" style="background-position: 0 -<%= item.offsety %>px;">',
+                            '<% } %>',
+                            '<span><%= item.displayValue %></span>',
+                        '<% } %>',
                         '</a></li>',
                     '<% }); %>',
                 '</ul>',
@@ -234,7 +241,7 @@ define([
 
     Common.UI.ComboBorderType = Common.UI.ComboBorderSize.extend(_.extend({
         template: _.template([
-            '<div class="input-group combobox combo-border-size input-group-nr <%= cls %>" id="<%= id %>" style="<%= style %>">',
+            '<div class="input-group combobox combo-border-size combo-border-type input-group-nr <%= cls %>" id="<%= id %>" style="<%= style %>">',
                 '<div class="form-control" style="<%= style %>" data-hint="<%= dataHint %>" data-hint-direction="<%= dataHintDirection %>" data-hint-offset="<%= dataHintOffset %>">',
                     '<i class="image"></i>',
                 '</div>',
@@ -244,10 +251,10 @@ define([
                 '</button>',
                 '<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: 2px 0 2px 10px;">',
+                        '<li id="<%= item.id %>" data-value="<%= item.value %>"><a tabindex="-1" type="menuitem">',
                             '<span style="margin-top: 0;"></span>',
                             '<% if (item.offsety!==undefined) { %>',
-                                '<img src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" align="left" style="background-position: 0 -<%= item.offsety %>px;">',
+                                '<img src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" style="background-position: 0 -<%= item.offsety %>px;">',
                             '<% } %>',
                         '</a></li>',
                     '<% }); %>',
@@ -300,9 +307,9 @@ define([
 
     Common.UI.ComboBoxColor = Common.UI.ComboBox.extend(_.extend({
         template: _.template([
-            '<div class="input-group combobox combo-color input-group-nr <%= cls %>" id="<%= id %>" style="<%= style %>">',
-            '<div class="form-control" style="padding:2px 14px 2px 3px; <%= style %> display: block;">',
-                '<div style="display: inline-block;overflow: hidden;width: 100%;height: 100%;"></div>',
+            '<div class="input-group combobox combo-color combobox-color input-group-nr <%= cls %>" id="<%= id %>" style="<%= style %>">',
+            '<div class="form-control" style="<%= style %>">',
+                '<div></div>',
             '</div>',
             '<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">',
                 '<span class="caret"></span>',
@@ -313,7 +320,7 @@ define([
                     '<li id="<%= item.id %>" data-value="<%= item.value %>"><a tabindex="-1" type="menuitem"><%= scope.getDisplayValue(item) %></a></li>',
                 '<% } else { %>',
                     '<li id="<%= item.id %>" data-value="<%= item.value %>">',
-                    '<a tabindex="-1" type="menuitem" style="padding: 5px;"><div style="height: 15px;<%= item.styleStr %>"><%= scope.getDisplayValue(item) %></div></a>',
+                    '<a tabindex="-1" type="menuitem"><div style="<%= item.styleStr %>"><%= scope.getDisplayValue(item) %></div></a>',
                     '</li>',
                 '<% } %>',
             '<% }); %>',
@@ -380,7 +387,7 @@ define([
                     '<li id="<%= item.id %>" data-value="<%= item.value %>"><a tabindex="-1" type="menuitem"><%= scope.getDisplayValue(item) %></a></li>',
                     '<% } else { %>',
                     '<li id="<%= item.id %>" data-value="<%= item.value %>">',
-                    '<a tabindex="-1" type="menuitem" style="padding: 5px;"><div style="height: 15px;<%= item.styleStr %>"><%= scope.getDisplayValue(item) %></div></a>',
+                    '<a tabindex="-1" type="menuitem""><div style="<%= item.styleStr %>"><%= scope.getDisplayValue(item) %></div></a>',
                     '</li>',
                     '<% } %>',
                     '<% }); %>'
@@ -407,9 +414,9 @@ define([
 
     Common.UI.ComboBoxIcons= Common.UI.ComboBox.extend(_.extend({
         template: _.template([
-            '<div class="input-group combobox combo-color input-group-nr <%= cls %>" id="<%= id %>" style="<%= style %>">',
-                '<div class="form-control" style="padding:2px 0 2px 3px; <%= style %> display: block;">',
-                    '<div style="display: inline-block;overflow: hidden;width: 100%;height: 100%;"></div>',
+            '<div class="input-group combobox combobox-icons combo-color input-group-nr <%= cls %>" id="<%= id %>" style="<%= style %>">',
+                '<div class="form-control" style="<%= style %>">',
+                    '<div></div>',
                 '</div>',
                 '<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">',
                     '<span class="caret"></span>',
@@ -420,9 +427,9 @@ define([
                             '<li id="<%= item.id %>" data-value="<%= item.value %>"><a tabindex="-1" type="menuitem"><%= scope.getDisplayValue(item) %></a></li>',
                         '<% } else { %>',
                             '<li id="<%= item.id %>" data-value="<%= item.value %>">',
-                                '<a tabindex="-1" type="menuitem" style="padding: 5px;">',
+                                '<a tabindex="-1" type="menuitem">',
                                     '<% _.each(item.data.iconSet, function(icon) { %>',
-                                    '<img src="<%= item.data.icons.at(icon-1).get(\'icon\') %>" style="width:16px;height:16px;margin-right: 5px;">',
+                                    '<img src="<%= item.data.icons.at(icon-1).get(\'icon\') %>">',
                                     '<% }) %>',
                                 '</a>',
                             '</li>',
@@ -454,7 +461,7 @@ define([
             if (record.get('value')!=-1) {
                 var str = '';
                 _.each(record.get('data').iconSet, function(icon) {
-                    str += '<img src="' + record.get('data').icons.at(icon-1).get("icon") + '" style="width:16px;height:16px;margin-right: 5px;">';
+                    str += '<img src="' + record.get('data').icons.at(icon-1).get("icon") + '">';
                 });
                 formcontrol[0].innerHTML = str;
                 formcontrol.css({'margin-top': '0'});
@@ -495,7 +502,7 @@ define([
                     '<li id="<%= item.id %>" data-value="<%= item.value %>">',
                         '<a tabindex="-1" type="menuitem" style="padding: 5px;">',
                             '<% _.each(item.data.iconSet, function(icon) { %>',
-                                '<img src="<%= item.data.icons.at(icon-1).get(\'icon\') %>" style="width:16px;height:16px;margin-right: 5px;">',
+                                '<img src="<%= item.data.icons.at(icon-1).get(\'icon\') %>">',
                             '<% }) %>',
                         '</a>',
                     '</li>',
diff --git a/apps/common/main/lib/component/ComboBox.js b/apps/common/main/lib/component/ComboBox.js
index 0c61d7784..7d6af572c 100644
--- a/apps/common/main/lib/component/ComboBox.js
+++ b/apps/common/main/lib/component/ComboBox.js
@@ -153,7 +153,8 @@ define([
                         scope       : me,
                         dataHint    : this.options.dataHint,
                         dataHintDirection: this.options.dataHintDirection,
-                        dataHintOffset: this.options.dataHintOffset
+                        dataHintOffset: this.options.dataHintOffset,
+                        isRTL       : Common.UI.isRTL()
                     }));
                     if (this.itemsTemplate)
                         this.cmpEl.find('ul').html(
diff --git a/apps/common/main/lib/component/ComboDataView.js b/apps/common/main/lib/component/ComboDataView.js
index 513253b89..799840cf4 100644
--- a/apps/common/main/lib/component/ComboDataView.js
+++ b/apps/common/main/lib/component/ComboDataView.js
@@ -115,7 +115,7 @@ define([
             this.openButton = new Common.UI.Button({
                 cls: 'open-menu',
                 menu: new Common.UI.Menu({
-                    menuAlign: 'tl-tl',
+                    menuAlign: Common.UI.isRTL() ? 'tr-tr' : 'tl-tl',
                     offset: [0, 3],
                     items: [
                         {template: _.template('<div class="menu-picker-container"></div>')}
@@ -299,7 +299,7 @@ define([
                 var itemMargins = parseFloat(itemEl.css('margin-left')) + parseFloat(itemEl.css('margin-right'));
 
                 var fieldPickerEl = this.fieldPicker.$el;
-                var fieldPickerPadding = parseFloat(fieldPickerEl.css('padding-right'));
+                var fieldPickerPadding = parseFloat(fieldPickerEl.css(Common.UI.isRTL() ? 'padding-left' : 'padding-right'));
                 var fieldPickerBorder = parseFloat(fieldPickerEl.css('border-width'));
                 var dataviewPaddings = parseFloat(this.fieldPicker.$el.find('.dataview').css('padding-left')) + parseFloat(this.fieldPicker.$el.find('.dataview').css('padding-right'));
 
diff --git a/apps/common/main/lib/component/ComboDataViewShape.js b/apps/common/main/lib/component/ComboDataViewShape.js
index 5de245ba7..7a68fc268 100644
--- a/apps/common/main/lib/component/ComboDataViewShape.js
+++ b/apps/common/main/lib/component/ComboDataViewShape.js
@@ -368,7 +368,10 @@ define([
             if (menu.cmpEl) {
                 menu.menuAlignEl = this.cmpEl;
                 var offset = this.cmpEl.width() - this.openButton.$el.width() - this.menuWidth + 1;
-                menu.setOffset(Math.min(offset, 0));
+                if (Common.UI.isRTL()) {
+                    offset = this.openButton.$el.width() - 1;
+                }
+                menu.setOffset(Common.UI.isRTL() ? offset : Math.min(offset, 0));
             }
 
             if (this.options.hint) {
diff --git a/apps/common/main/lib/component/DimensionPicker.js b/apps/common/main/lib/component/DimensionPicker.js
index 24aece99f..e6dda50f8 100644
--- a/apps/common/main/lib/component/DimensionPicker.js
+++ b/apps/common/main/lib/component/DimensionPicker.js
@@ -53,12 +53,13 @@ define([
                 minRows     : 5,
                 minColumns  : 5,
                 maxRows     : 20,
-                maxColumns  : 20
+                maxColumns  : 20,
+                direction   : undefined // 'left', 'right'
             },
 
             template:_.template([
                 '<div style="width: 100%; height: 100%;">',
-                    '<div class="dimension-picker-status">0x0</div>',
+                    '<div dir="ltr" class="dimension-picker-status">0x0</div>',
                     '<div class="dimension-picker-observecontainer">',
                         '<div class="dimension-picker-mousecatcher"></div>',
                         '<div class="dimension-picker-unhighlighted"></div>',
@@ -84,12 +85,24 @@ define([
                 me.maxRows     = me.options.maxRows;
                 me.maxColumns  = me.options.maxColumns;
 
+                me.direction   = me.options.direction;
+                if (Common.UI.isRTL() && !me.direction) {
+                    me.direction = 'right';
+                }
+
                 me.curColumns = 0;
                 me.curRows = 0;
 
                 var onMouseMove = function(event){
+                    var offsetX;
+                    if (me.direction === 'right' && me.areaMouseCatcher) {
+                        var width = me.areaMouseCatcher.width();
+                        offsetX = event.offsetX === undefined ? (width - event.originalEvent.layerX) : (width - event.offsetX)*Common.Utils.zoom()
+                    } else {
+                        offsetX = event.offsetX === undefined ? event.originalEvent.layerX : event.offsetX*Common.Utils.zoom();
+                    }
                     me.setTableSize(
-                        Math.ceil((event.offsetX === undefined ? event.originalEvent.layerX : event.offsetX*Common.Utils.zoom()) / me.itemSize),
+                        Math.ceil(offsetX / me.itemSize),
                         Math.ceil((event.offsetY === undefined ? event.originalEvent.layerY : event.offsetY*Common.Utils.zoom()) / me.itemSize),
                         event
                     );
@@ -104,27 +117,31 @@ define([
                 };
 
                 if (rootEl){
-                    var areaMouseCatcher    = rootEl.find('.dimension-picker-mousecatcher');
+                    me.areaMouseCatcher    = rootEl.find('.dimension-picker-mousecatcher');
                     me.areaUnHighLighted   = rootEl.find('.dimension-picker-unhighlighted');
                     me.areaHighLighted     = rootEl.find('.dimension-picker-highlighted');
                     me.areaStatus          = rootEl.find('.dimension-picker-status');
 
                     rootEl.css({width: me.minColumns + 'em'});
-                    areaMouseCatcher.css('z-index', 1);
-                    areaMouseCatcher.width(me.maxColumns + 'em').height(me.maxRows + 'em');
+                    me.areaMouseCatcher.css('z-index', 1);
+                    me.areaMouseCatcher.width(me.maxColumns + 'em').height(me.maxRows + 'em');
                     me.areaUnHighLighted.width(me.minColumns + 'em').height(me.minRows + 'em');
-                    me.areaStatus.html(me.curColumns + ' x ' + me.curRows);
+                    me.areaStatus.html(!Common.UI.isRTL() ? this.curColumns + ' x ' + this.curRows : this.curRows + ' x ' + this.curColumns);
                     me.areaStatus.width(me.areaUnHighLighted.width());
 
-                    areaMouseCatcher.on('mousemove', onMouseMove);
+                    me.areaMouseCatcher.on('mousemove', onMouseMove);
                     me.areaHighLighted.on('mousemove', onMouseMove);
                     me.areaUnHighLighted.on('mousemove', onMouseMove);
-                    areaMouseCatcher.on('mouseleave', onMouseLeave);
+                    me.areaMouseCatcher.on('mouseleave', onMouseLeave);
                     me.areaHighLighted.on('mouseleave', onMouseLeave);
                     me.areaUnHighLighted.on('mouseleave', onMouseLeave);
-                    areaMouseCatcher.on('click', onHighLightedMouseClick);
+                    me.areaMouseCatcher.on('click', onHighLightedMouseClick);
                     me.areaHighLighted.on('click', onHighLightedMouseClick);
                     me.areaUnHighLighted.on('click', onHighLightedMouseClick);
+
+                    if (me.direction === 'right') {
+                        me.areaHighLighted.css({left: 'auto', right: '0'});
+                    }
                 }
             },
 
@@ -157,7 +174,7 @@ define([
                     );
 
                     this.cmpEl.width(this.areaUnHighLighted.width());
-                    this.areaStatus.html(this.curColumns + ' x ' + this.curRows);
+                    this.areaStatus.html(!Common.UI.isRTL() ? this.curColumns + ' x ' + this.curRows : this.curRows + ' x ' + this.curColumns);
                     this.areaStatus.width(this.areaUnHighLighted.width());
 
                     this.trigger('change', this, this.curColumns, this.curRows, event);
diff --git a/apps/common/main/lib/component/Layout.js b/apps/common/main/lib/component/Layout.js
index 50428d26c..bf46aab2a 100644
--- a/apps/common/main/lib/component/Layout.js
+++ b/apps/common/main/lib/component/Layout.js
@@ -261,7 +261,7 @@ define([
             var panel             = e.data.panel;
             this.resize.type      = e.data.type;
             this.resize.$el       = panel.el;
-            this.resize.min       = panel.minpos;
+            this.resize.min       = panel.minpos > 0 ? panel.minpos : this.resize.$el.parent().width() + panel.minpos;
             this.resize.fmin      = panel.fmin;
             this.resize.fmax      = panel.fmax;
             this.resize.behaviour = panel.behaviour;
@@ -365,15 +365,15 @@ define([
                 oldValue = parseInt(panel.css(prop));
             } else {
                 panel = this.resize.$el.next();
-                next = this.resize.$el.next();
+                next = this.resize.$el.prev();
                 oldValue = parseInt(panel.css(prop));
                 value = panel.parent()[prop]() - (value + this.resize[prop]);
             }
 
             if (this.resize.type == 'vertical')
                 value -= panel.position().top;
-            if (this.resize.type == 'horizontal')
-                value -= panel.position().left;
+            // if (this.resize.type == 'horizontal')
+            //     value -= panel.position().left;
 
             panel.css(prop, value + 'px');
 
diff --git a/apps/common/main/lib/component/Menu.js b/apps/common/main/lib/component/Menu.js
index a7d82bca9..34ba6d863 100644
--- a/apps/common/main/lib/component/Menu.js
+++ b/apps/common/main/lib/component/Menu.js
@@ -173,6 +173,18 @@ define([
                 this.search = this.options.search;
                 this.outerMenu      = this.options.outerMenu;
 
+                if (Common.UI.isRTL()) {
+                    if (this.menuAlign === 'tl-tr') {
+                        this.menuAlign = 'tr-tl';
+                    } else if (this.menuAlign === 'tl-bl') {
+                        this.menuAlign = 'tr-br';
+                    } else if (this.menuAlign === 'tr-br') {
+                        this.menuAlign = 'tl-bl';
+                    } else if (this.menuAlign === 'bl-tl') {
+                        this.menuAlign = 'br-tr';
+                    }
+                }
+
                 if (this.options.restoreHeight) {
                     this.options.restoreHeight = (typeof (this.options.restoreHeight) == "number") ? this.options.restoreHeight : (this.options.maxHeight ? this.options.maxHeight : 100000);
                     !this.options.maxHeight && (this.options.maxHeight = this.options.restoreHeight);
@@ -787,6 +799,18 @@ define([
             this.scrollAlwaysVisible = this.options.scrollAlwaysVisible;
             this.search = this.options.search;
 
+            if (Common.UI.isRTL()) {
+                if (this.menuAlign === 'tl-tr') {
+                    this.menuAlign = 'tr-tl';
+                } else if (this.menuAlign === 'tl-bl') {
+                    this.menuAlign = 'tr-br';
+                } else if (this.menuAlign === 'tr-br') {
+                    this.menuAlign = 'tl-bl';
+                } else if (this.menuAlign === 'bl-tl') {
+                    this.menuAlign = 'br-tr';
+                }
+            }
+
             if (this.options.restoreHeight) {
                 this.options.restoreHeight = (typeof (this.options.restoreHeight) == "number") ? this.options.restoreHeight : (this.options.maxHeight ? this.options.maxHeight : 100000);
                 !this.options.maxHeight && (this.options.maxHeight = this.options.restoreHeight);
diff --git a/apps/common/main/lib/component/Mixtbar.js b/apps/common/main/lib/component/Mixtbar.js
index 0361f6c1d..692d3b43c 100644
--- a/apps/common/main/lib/component/Mixtbar.js
+++ b/apps/common/main/lib/component/Mixtbar.js
@@ -56,7 +56,7 @@ define([
 
         var onScrollTabs = function(opts, e) {
             var sv = $boxTabs.scrollLeft();
-            if ( sv || opts == 'right' ) {
+            if (sv || opts == 'right' || Common.UI.isRTL() && opts == 'left') {
                 $boxTabs.animate({scrollLeft: opts == 'left' ? sv - 100 : sv + 100}, 200);
             }
         };
@@ -93,6 +93,7 @@ define([
                 Common.UI.BaseView.prototype.initialize.call(this, options);
 
                 var _template_tabs =
+                    !Common.UI.isRTL() ?
                     '<section class="tabs">' +
                         '<a class="scroll left" data-hint="0" data-hint-direction="bottom" data-hint-offset="-7, 0" data-hint-title="V"></a>' +
                         '<ul>' +
@@ -108,6 +109,22 @@ define([
                             '<% } %>' +
                         '</ul>' +
                         '<a class="scroll right" data-hint="0" data-hint-direction="bottom" data-hint-offset="-7, 0" data-hint-title="R"></a>' +
+                    '</section>' :
+                    '<section class="tabs">' +
+                        '<a class="scroll right" data-hint="0" data-hint-direction="bottom" data-hint-offset="-7, 0" data-hint-title="R"></a>' +
+                        '<ul>' +
+                            '<% for(var i in items) { %>' +
+                                '<% if (typeof items[i] == "object") { %>' +
+                                '<li class="ribtab' +
+                                        '<% if (items[i].haspanel===false) print(" x-lone") %>' +
+                                        '<% if (items[i].extcls) print(\' \' + items[i].extcls) %>"' +
+                                        '<% if (typeof items[i].layoutname == "string") print(" data-layout-name=" + \' \' +  items[i].layoutname) + \' \' %>>' +
+                                    '<a data-tab="<%= items[i].action %>" data-title="<%= items[i].caption %>" data-hint="0" data-hint-direction="bottom" data-hint-offset="small" <% if (typeof items[i].dataHintTitle !== "undefined") { %> data-hint-title="<%= items[i].dataHintTitle %>" <% } %>><%= items[i].caption %></a>' +
+                                '</li>' +
+                                '<% } %>' +
+                            '<% } %>' +
+                        '</ul>' +
+                        '<a class="scroll left" data-hint="0" data-hint-direction="bottom" data-hint-offset="-7, 0" data-hint-title="V"></a>' +
                     '</section>';
 
                 this.$layout = $(options.template({
@@ -365,13 +382,13 @@ define([
                 var _left_bound_ = Math.round($boxTabs.offset().left),
                     _right_bound_ = Math.round(_left_bound_ + $boxTabs.width());
 
-                var tab = this.$tabs.filter(':visible:first').get(0);
+                var tab = this.$tabs.filter(Common.UI.isRTL() ? ':visible:last' : ':visible:first').get(0);
                 if ( !tab ) return false;
 
                 var rect = tab.getBoundingClientRect();
 
                 if ( !(Math.round(rect.left) < _left_bound_) ) {
-                    tab = this.$tabs.filter(':visible:last').get(0);
+                    tab = this.$tabs.filter(Common.UI.isRTL() ? ':visible:first' : ':visible:last').get(0);
                     rect = tab.getBoundingClientRect();
 
                     if (!(Math.round(rect.right) > _right_bound_))
@@ -393,7 +410,9 @@ define([
                 function _fc() {
                     var $active = panel || me.$panels.filter('.active');
                     if ( $active && $active.length ) {
-                        var _maxright = $active.parents('.box-controls').width();
+                        var _maxright = $active.parents('.box-controls').width(),
+                            _staticPanelWidth = $active.parents('.box-controls').find('.panel.static').outerWidth();
+                        if (!_staticPanelWidth) _staticPanelWidth = 0;
                         var data = $active.data(),
                             _rightedge = data.rightedge,
                             _btns = data.buttons,
@@ -403,7 +422,7 @@ define([
                             me.setMoreButton($active.attr('data-tab'), $active);
                         }
                         if ( !_rightedge ) {
-                            _rightedge = $active.get(0).getBoundingClientRect().right;
+                            _rightedge = $active.outerWidth() + _staticPanelWidth;
                         }
                         if ( !_btns ) {
                             _btns = [];
@@ -421,12 +440,12 @@ define([
                             data.flex = _flex;
                         }
 
-                        if ( (_rightedge > _maxright)) {
+                        if (_rightedge > _maxright) {
                             if (!more_section.is(':visible') ) {
                                 if (_flex.length>0) {
                                     for (var i=0; i<_flex.length; i++) {
                                         var item = _flex[i].el;
-                                        _rightedge = $active.get(0).getBoundingClientRect().right;
+                                        _rightedge = $active.outerWidth() + _staticPanelWidth;
                                         if (item.outerWidth() > parseInt(item.css('min-width'))) {
                                             data.rightedge = _rightedge;
                                             return;
@@ -438,7 +457,7 @@ define([
                                     var btn = _btns[i];
                                     if ( !btn.hasClass('compactwidth') && !btn.hasClass('slot-btn-more')) {
                                         btn.addClass('compactwidth');
-                                        _rightedge = $active.get(0).getBoundingClientRect().right;
+                                        _rightedge = $active.outerWidth() + _staticPanelWidth;
                                         if (_rightedge <= _maxright)
                                             break;
                                     }
@@ -453,10 +472,10 @@ define([
                                     var btn = _btns[i];
                                     if ( btn.hasClass('compactwidth') ) {
                                         btn.removeClass('compactwidth');
-                                        _rightedge = $active.get(0).getBoundingClientRect().right;
-                                        if ( _rightedge > _maxright) {
+                                        _rightedge = $active.outerWidth() + _staticPanelWidth;
+                                        if (_rightedge > _maxright) {
                                             btn.addClass('compactwidth');
-                                            _rightedge = $active.get(0).getBoundingClientRect().right;
+                                            _rightedge = $active.outerWidth() + _staticPanelWidth;
                                             break;
                                         }
                                     }
@@ -506,7 +525,7 @@ define([
                 var me = this;
                 if (!btnsMore[tab]) {
                     var top = panel.position().top;
-                    var box = $('<div class="more-box" style="position: absolute;right: 0; top:'+ top +'px; padding-left: 12px;padding-right: 6px;display: none;">' +
+                    var box = $('<div class="more-box" style="top:'+ top +'px;">' +
                         '<div class="separator long" style="position: relative;display: table-cell;"></div>' +
                         '<div class="group" style=""><span class="btn-slot text x-huge slot-btn-more"></span></div>' +
                         '</div>');
@@ -533,7 +552,7 @@ define([
                 var panel = this.$panels.filter('[data-tab=' + tab + ']');
                 if ( panel.length ) {
                     var data = panel.data();
-                    data.buttons = data.flex = data.rightedge = undefined;
+                    data.buttons = data.flex = data.rightedge = data.leftedge = undefined;
                     panel.find('.more-box').remove();
                 }
                 if (btnsMore[tab]) {
@@ -554,8 +573,10 @@ define([
 
                 var more_section_width = parseInt(more_section.css('width')) || 0,
                     box_controls_width = $active.parents('.box-controls').width(),
-                    _maxright = box_controls_width,
-                    _rightedge = $active.get(0).getBoundingClientRect().right,
+                    _staticPanelWidth = $active.parents('.box-controls').find('.panel.static').outerWidth(),
+                    _maxright = box_controls_width;
+                if (!_staticPanelWidth) _staticPanelWidth = 0;
+                var _rightedge = $active.outerWidth() + _staticPanelWidth,
                     delta = (this._prevBoxWidth) ? (_maxright - this._prevBoxWidth) : -1,
                     hideAllMenus = false;
                 this._prevBoxWidth = _maxright;
@@ -567,7 +588,7 @@ define([
 
                 if ( (reset || delta<0) && (_rightedge > _maxright)) { // from toolbar to more section
                     if (!more_section.is(':visible') ) {
-                        more_section.css('display', "");
+                        more_section.css('display', "block");
                         _maxright -= parseInt(more_section.css('width'));
                     }
                     var last_separator = null,
@@ -589,11 +610,12 @@ define([
                             this.$moreBar.prepend(item);
                             hideAllMenus = true;
                         } else if (item.hasClass('group')) {
-                            _rightedge = $active.get(0).getBoundingClientRect().right;
+                            //_rightedge = $active.get(0).getBoundingClientRect().right;
+                            _rightedge = $active.outerWidth() + _staticPanelWidth;
                             if (_rightedge <= _maxright) // stop moving items
                                 break;
 
-                            var offset = item.offset(),
+                            var rect = item.get(0).getBoundingClientRect(),
                                 item_width = item.outerWidth(),
                                 children = item.children();
                             if (!item.attr('inner-width') && item.attr('group-state') !== 'open') {
@@ -603,7 +625,7 @@ define([
                                     child.attr('inner-width', child.outerWidth());
                                 }
                             }
-                            if ((offset.left > _maxright || children.length==1) && item.attr('group-state') != 'open') {
+                            if (((rect.left > _maxright || Common.UI.isRTL() && box_controls_width - rect.right > _maxright) || children.length==1) && item.attr('group-state') != 'open') {
                                 // move group
                                 this.$moreBar.prepend(item);
                                 if (last_separator) {
@@ -611,7 +633,7 @@ define([
                                     last_separator.removeAttr('hidden-on-resize');
                                 }
                                 hideAllMenus = true;
-                            } else if ( offset.left+item_width > _maxright ) {
+                            } else if ((Common.UI.isRTL() ? box_controls_width - rect.right : rect.left)+item_width > _maxright ) {
                                 // move buttons from group
                                 for (var j=children.length-1; j>=0; j--) {
                                     var child = $(children[j]);
@@ -624,9 +646,9 @@ define([
                                         hideAllMenus = true;
                                         break;
                                     } else {
-                                        var child_offset = child.offset(),
+                                        var child_rect = child.get(0).getBoundingClientRect(),
                                             child_width = child.outerWidth();
-                                        if (child_offset.left+child_width>_maxright) {
+                                        if ((Common.UI.isRTL() ? box_controls_width - child_rect.right : child_rect.left)+child_width>_maxright) {
                                             if (!last_group) {
                                                 last_group = $('<div></div>');
                                                 last_group.addClass(items[i].className);
@@ -689,7 +711,7 @@ define([
                         // from more panel to toolbar
                         for (var i=0; i<items.length; i++) {
                             var item = $(items[i]);
-                            _rightedge = $active.get(0).getBoundingClientRect().right;
+                            _rightedge = $active.outerWidth() + _staticPanelWidth;
                             if (!item.is(':visible') && item.attr('data-hidden-tb-item')) { // move invisible items as is
                                 item.removeAttr('data-hidden-tb-item');
                                 more_section.before(item);
@@ -724,7 +746,7 @@ define([
                                     for (var j=0; j<children.length; j++) {
                                         if (islast && j==children.length-1)
                                              _maxright = box_controls_width; // try to move last item from last group
-                                        _rightedge = $active.get(0).getBoundingClientRect().right;
+                                        _rightedge = $active.outerWidth() + _staticPanelWidth;
                                         var child = $(children[j]);
                                         if (child.hasClass('elset')) { // don't add group - no enough space
                                             need_break = true;
@@ -809,7 +831,8 @@ define([
                     right = Common.Utils.innerWidth() - (showxy.left - parentxy.left + target.width()),
                     top = showxy.top - parentxy.top + target.height() + 10;
 
-                moreContainer.css({right: right, left: 'auto', top : top, 'max-width': Common.Utils.innerWidth() + 'px'});
+                var styles = Common.UI.isRTL() ? {left: '6px', right: 'auto', top : top, 'max-width': Common.Utils.innerWidth() + 'px'} : {right: right, left: 'auto', top : top, 'max-width': Common.Utils.innerWidth() + 'px'}
+                moreContainer.css(styles);
                 moreContainer.show();
             },
 
diff --git a/apps/common/main/lib/component/Slider.js b/apps/common/main/lib/component/Slider.js
index 492cf8f66..701b54ce5 100644
--- a/apps/common/main/lib/component/Slider.js
+++ b/apps/common/main/lib/component/Slider.js
@@ -156,7 +156,7 @@ define([
                 $(document).off('mousemove', onMouseMove);
 
                 me._dragstart = undefined;
-                me.trigger('changecomplete', me, me.value, me.lastValue);
+                me.trigger('changecomplete', me, Common.UI.isRTL() ? me.maxValue - me.value : me.value, me.lastValue);
             };
 
             var onMouseMove = function (e) {
@@ -175,7 +175,7 @@ define([
                 me.value = pos/me.delta + me.minValue;
 
                 if (Math.abs(me.value-me.lastValue)>0.001)
-                    me.trigger('change', me, me.value, me.lastValue);
+                    me.trigger('change', me, Common.UI.isRTL() ? me.maxValue - me.value : me.value, me.lastValue);
             };
 
             var onMouseDown = function (e) {
@@ -201,8 +201,8 @@ define([
                 me.lastValue = me.value;
                 me.value = pos/me.delta + me.minValue;
 
-                me.trigger('change', me, me.value, me.lastValue);
-                me.trigger('changecomplete', me, me.value, me.lastValue);
+                me.trigger('change', me, Common.UI.isRTL() ? me.maxValue - me.value : me.value, me.lastValue);
+                me.trigger('changecomplete', me, Common.UI.isRTL() ? me.maxValue - me.value : me.value, me.lastValue);
             };
 
             var updateslider;
@@ -211,7 +211,7 @@ define([
                 me.lastValue = me.value;
                 me.value = Math.max(me.minValue, Math.min(me.maxValue, me.value + ((increase) ? me.step : -me.step)));
                 me.setThumbPosition(Math.round((me.value-me.minValue)*me.delta));
-                me.trigger('change', me, me.value, me.lastValue);
+                me.trigger('change', me, Common.UI.isRTL() ? me.maxValue - me.value : me.value, me.lastValue);
             };
 
             var onKeyDown = function (e) {
@@ -234,7 +234,7 @@ define([
                     clearInterval(updateslider);
                     moveThumb(e.keyCode==Common.UI.Keys.UP || e.keyCode==Common.UI.Keys.RIGHT);
                     el.on('keydown', 'input', onKeyDown);
-                    me.trigger('changecomplete', me, me.value, me.lastValue);
+                    me.trigger('changecomplete', me, Common.UI.isRTL() ? me.maxValue - me.value : me.value, me.lastValue);
                 }
             };
 
@@ -264,7 +264,7 @@ define([
         setValue: function(value) {
             this.lastValue = this.value;
             this.value = Math.max(this.minValue, Math.min(this.maxValue, value));
-            this.setThumbPosition(Math.round((value-this.minValue)*this.delta));
+            this.setThumbPosition(Math.round(((Common.UI.isRTL() ? this.maxValue - value : value)-this.minValue)*this.delta));
         },
 
         getValue: function() {
diff --git a/apps/common/main/lib/component/TabBar.js b/apps/common/main/lib/component/TabBar.js
index d7a16a04c..cfeadd6ac 100644
--- a/apps/common/main/lib/component/TabBar.js
+++ b/apps/common/main/lib/component/TabBar.js
@@ -569,8 +569,8 @@ define([
 
         checkInvisible: function(suppress) {
             var result = {
-                first: !this.isTabVisible(0),
-                last: !this.isTabVisible(this.tabs.length-1)
+                first: !this.isTabVisible(Common.UI.isRTL() ? this.tabs.length-1 : 0),
+                last: !this.isTabVisible(Common.UI.isRTL() ? 0 : this.tabs.length-1)
             };
 
             !suppress && this.fireEvent('tab:invisible', this, result);
diff --git a/apps/common/main/lib/component/ThemeColorPalette.js b/apps/common/main/lib/component/ThemeColorPalette.js
index be48719c0..f50b7a928 100644
--- a/apps/common/main/lib/component/ThemeColorPalette.js
+++ b/apps/common/main/lib/component/ThemeColorPalette.js
@@ -64,11 +64,11 @@ define([
 
         template    :
             _.template(
-                '<div style="padding: 4px 0 0 12px;">' +
+                '<div class="palette-inner">' +
                 '<% var me = this; var idx = 0; %>' +
                 '<% $(colors).each(function(num, item) { %>' +
-                    '<% if (me.isBlankSeparator(item)) { %> <div class="palette-color-spacer" style="width:100%;height:8px;float:left;"></div>' +
-                    '<% } else if (me.isSeparator(item)) { %> </div><div class="divider" style="width:100%;float:left;"></div><div style="padding: 12px;">' +
+                    '<% if (me.isBlankSeparator(item)) { %> <div class="palette-color-spacer"></div>' +
+                    '<% } else if (me.isSeparator(item)) { %> </div><div class="divider"></div><div style="padding: 12px;">' +
                     '<% } else if (me.isColor(item)) { %> ' +
                         '<a class="palette-color color-<%=item%>" style="background:#<%=item%>" idx="<%=idx++%>">' +
                         '<em><span style="background:#<%=item%>;" unselectable="on">&#160;</span></em>' +
@@ -79,7 +79,7 @@ define([
                         '</a>' +
                     '<% } else if (me.isEffect(item)) { %>' +
                         '<% if (idx>0 && me.columns>0 && idx%me.columns===0) { %> ' +
-                        '<div style="width:100%;height:0;float:left;"></div>' +
+                        '<div class="color-divider"></div>' +
                         '<% } %>' +
                         '<a effectid="<%=item.effectId%>" effectvalue="<%=item.effectValue%>" class="palette-color-effect color-<%=item.color%>" style="background:#<%=item.color%>" idx="<%=idx++%>">' +
                         '<em><span style="background:#<%=item.color%>;" unselectable="on">&#160;</span></em>' +
@@ -90,8 +90,8 @@ define([
                 '<% }); %>' +
                 '</div>' +
                 '<% if (me.options.dynamiccolors!==undefined) { %>' +
-                '<div class="palette-color-dynamiccolors" style="padding: 4px 0 0 12px">' +
-                    '<div class="palette-color-spacer" style="width:100%;height:8px;float:left;"></div>' +
+                '<div class="palette-color-dynamiccolors">' +
+                    '<div class="palette-color-spacer"></div>' +
                     '<div class="palette-color-caption"><%=me.textRecentColors%></div>' +
                     '<% for (var i=0; i<me.options.dynamiccolors; i++) { %>' +
                         '<a class="color-dynamic-<%=i%> dynamic-empty-color <%= me.emptyColorsClass %>" color="" idx="<%=idx++%>">' +
diff --git a/apps/common/main/lib/component/TreeView.js b/apps/common/main/lib/component/TreeView.js
index 2b2ac7add..ec4795d0e 100644
--- a/apps/common/main/lib/component/TreeView.js
+++ b/apps/common/main/lib/component/TreeView.js
@@ -170,7 +170,7 @@ define([
             initialize : function(options) {
                 options.store = options.store || new Common.UI.TreeViewStore();
                 options.emptyItemText = options.emptyItemText || '';
-                options.itemTemplate = options.itemTemplate || _.template([
+                options.itemTemplate = options.itemTemplate || !Common.UI.isRTL() ? _.template([
                     '<div id="<%= id %>" class="tree-item <% if (!isVisible) { %>' + 'hidden' + '<% } %>" style="display: block;padding-left: <%= level*16 + 24 %>px;">',
                     '<% if (hasSubItems) { %>',
                         '<div class="tree-caret img-commonctrl ' + '<% if (!isExpanded) { %>' + 'up' + '<% } %>' + '" style="margin-left: <%= level*16 %>px;"></div>',
@@ -183,6 +183,19 @@ define([
                         '<div class="name"><%= Common.Utils.String.htmlEncode(name) %></div>',
                     '<% } %>',
                     '</div>'
+                ].join('')) : _.template([
+                    '<div id="<%= id %>" class="tree-item <% if (!isVisible) { %>' + 'hidden' + '<% } %>" style="display: block;padding-right: <%= level*16 + 24 %>px;">',
+                    '<% if (hasSubItems) { %>',
+                        '<div class="tree-caret img-commonctrl ' + '<% if (!isExpanded) { %>' + 'up' + '<% } %>' + '" style="margin-right: <%= level*16 %>px;"></div>',
+                    '<% } %>',
+                    '<% if (isNotHeader) { %>',
+                        '<div class="name not-header"><%= Common.Utils.String.htmlEncode(name) %></div>',
+                    '<% } else if (isEmptyItem) { %>',
+                        '<div class="name empty">' + options.emptyItemText + '</div>',
+                    '<% } else { %>',
+                        '<div class="name"><%= Common.Utils.String.htmlEncode(name) %></div>',
+                    '<% } %>',
+                    '</div>'
                 ].join(''));
                 Common.UI.DataView.prototype.initialize.call(this, options);
             },
diff --git a/apps/common/main/lib/component/Window.js b/apps/common/main/lib/component/Window.js
index ff2f458f4..622a5c6f6 100644
--- a/apps/common/main/lib/component/Window.js
+++ b/apps/common/main/lib/component/Window.js
@@ -476,7 +476,7 @@ define([
             
             var template =  '<div class="info-box">' +
                                 '<% if (typeof iconCls !== "undefined") { %><div class="icon <%= iconCls %>"></div><% } %>' +
-                                '<div class="text" <% if (typeof iconCls == "undefined") { %> style="padding-left:10px;" <% } %>><span><%= msg %></span>' +
+                                '<div class="text" dir="ltr" <% if (typeof iconCls == "undefined") { %> style="padding-left:10px;" <% } %>><span><%= msg %></span>' +
                                     '<% if (dontshow) { %><div class="dont-show-checkbox"></div><% } %>' +
                                 '</div>' +
                             '</div>' +
@@ -511,7 +511,8 @@ define([
                     text_cnt.height(Math.max(text.height(), icon_height) + ((check.length>0) ? (check.height() + parseInt(check.css('margin-top'))) : 0));
                     body.height(parseInt(text_cnt.css('height')) + parseInt(footer.css('height')));
                     var span_el = check.find('span');
-                     window.setSize(Math.max(text.width(), span_el.length>0 ? span_el.position().left + span_el.width() : 0) + text.position().left + parseInt(text_cnt.css('padding-right')),
+                    window.setSize(Math.max(text.width(), span_el.length>0 ? span_el.position().left + span_el.width() : 0) + text.position().left + parseInt(text_cnt.css('padding-right')) +
+                        (Common.UI.isRTL() && icon.length > 0 ? icon.width() + parseInt(icon.css('margin-right')) + parseInt(icon.css('margin-left')) : 0),
                         parseInt(body.css('height')) + parseInt(header.css('height')));
                 } else {
                     text.css('white-space', 'normal');
diff --git a/apps/common/main/lib/controller/Plugins.js b/apps/common/main/lib/controller/Plugins.js
index 8b589d926..2cd7d2b91 100644
--- a/apps/common/main/lib/controller/Plugins.js
+++ b/apps/common/main/lib/controller/Plugins.js
@@ -263,7 +263,7 @@ define([
                     } else {
                         _group.appendTo(me.$toolbarPanelPlugins);
                         $('<div class="separator long invisible"></div>').appendTo(me.$toolbarPanelPlugins);
-                        _group = $('<div class="group" style="padding-left: 0;"></div>');
+                        _group = $('<div class="group" style="' + (Common.UI.isRTL() ? 'padding-right: 0;' : 'padding-left: 0;') + '"></div>');
                     }
 
                     var btn = me.panelPlugins.createPluginButton(model);
diff --git a/apps/common/main/lib/template/CommentsPanel.template b/apps/common/main/lib/template/CommentsPanel.template
index 5a0bb9a5a..34ed29581 100644
--- a/apps/common/main/lib/template/CommentsPanel.template
+++ b/apps/common/main/lib/template/CommentsPanel.template
@@ -12,7 +12,7 @@
     </div>
     <div id="comments-header" class="">
         <label><%=textComments%></label>
-        <div id="comments-btn-close" style="float:right;margin-left: 4px;"></div>
-        <div id="comments-btn-sort" style="float:right;"></div>
+        <div id="comments-btn-close"></div>
+        <div id="comments-btn-sort"></div>
     </div>
 </div>
diff --git a/apps/common/main/lib/template/ExtendedColorDialog.template b/apps/common/main/lib/template/ExtendedColorDialog.template
index e7321fc99..65cda0513 100644
--- a/apps/common/main/lib/template/ExtendedColorDialog.template
+++ b/apps/common/main/lib/template/ExtendedColorDialog.template
@@ -2,7 +2,7 @@
     <div id="id-hsb-colorpicker" style="vertical-align:top;">
     </div>
     <div class="color-info" style="">
-        <div style="margin-left:15px;">
+        <div class="color-preview">
             <label class="color-label"><%= txtNew %></label>
             <div id="field-new-color" class="color-cnt top"></div>
             <div id="field-start-color" class="color-cnt bottom"></div>
diff --git a/apps/common/main/lib/util/htmlutils.js b/apps/common/main/lib/util/htmlutils.js
index aa0312061..bfd279b71 100644
--- a/apps/common/main/lib/util/htmlutils.js
+++ b/apps/common/main/lib/util/htmlutils.js
@@ -1,3 +1,17 @@
+var checkLocalStorage = (function () {
+    try {
+        var storage = window['localStorage'];
+        return true;
+    }
+    catch(e) {
+        return false;
+    }
+})();
+
+if ( checkLocalStorage && localStorage.getItem("ui-rtl") === '1' ) {
+    document.body.setAttribute('dir', 'rtl');
+    document.body.classList.add('rtl');
+}
 
 function checkScaling() {
     var matches = {
@@ -42,16 +56,6 @@ var params = (function() {
     return urlParams;
 })();
 
-var checkLocalStorage = (function () {
-    try {
-        var storage = window['localStorage'];
-        return true;
-    }
-    catch(e) {
-        return false;
-    }
-})();
-
 if ( window.desktop ) {
     var theme = desktop.theme
 
diff --git a/apps/common/main/lib/util/utils.js b/apps/common/main/lib/util/utils.js
index e75a4b527..70e9a173b 100644
--- a/apps/common/main/lib/util/utils.js
+++ b/apps/common/main/lib/util/utils.js
@@ -1096,3 +1096,12 @@ Common.Utils.getKeyByValue = function(obj, value) {
         }
     }
 };
+
+Common.UI.isRTL = function () {
+    if ( window.isrtl == undefined ) {
+        window.isrtl = Common.localStorage.itemExists('ui-rtl') ?
+                            Common.localStorage.getBool("ui-rtl") : Common.Locale.isCurrentLanguageRtl();
+    }
+
+    return window.isrtl;
+};
\ No newline at end of file
diff --git a/apps/common/main/lib/view/InsertTableDialog.js b/apps/common/main/lib/view/InsertTableDialog.js
index 39521c44f..0c77d0301 100644
--- a/apps/common/main/lib/view/InsertTableDialog.js
+++ b/apps/common/main/lib/view/InsertTableDialog.js
@@ -51,6 +51,7 @@ define([
             height: 157,
             style: 'min-width: 230px;',
             cls: 'modal-dlg',
+            id: 'window-insert-table',
             split: false,
             buttons: ['ok', 'cancel']
         },
@@ -63,10 +64,10 @@ define([
             this.template = [
                 '<div class="box">',
                     '<div class="input-row">',
-                        '<label class="text columns-text" style="width: 130px;">' + this.txtColumns + '</label><div class="columns-val" style="float: right;"></div>',
+                        '<label class="text columns-text" style="width: 130px;">' + this.txtColumns + '</label><div class="columns-val"></div>',
                     '</div>',
                     '<div class="input-row" style="margin-top: 10px;">',
-                        '<label class="text rows-text" style="width: 130px;">' + this.txtRows + '</label><div class="rows-val" style="float: right;"></div>',
+                        '<label class="text rows-text" style="width: 130px;">' + this.txtRows + '</label><div class="rows-val"></div>',
                     '</div>',
                 '</div>'
             ].join('');
diff --git a/apps/common/main/lib/view/LanguageDialog.js b/apps/common/main/lib/view/LanguageDialog.js
index e36d87523..e26b87f62 100644
--- a/apps/common/main/lib/view/LanguageDialog.js
+++ b/apps/common/main/lib/view/LanguageDialog.js
@@ -93,7 +93,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: 28px !important;" langval="<%= item.value %>">',
+                            '<a tabindex="-1" type="menuitem" langval="<%= item.value %>">',
                                 '<i class="icon <% if (item.spellcheck) { %> toolbar__icon btn-ic-docspell spellcheck-lang <% } %>"></i>',
                                 '<%= scope.getDisplayValue(item) %>',
                             '</a>',
@@ -137,7 +137,7 @@ define([
 
     onLangSelect: function(cmb, rec, e) {
         cmb.$el.find('.input-icon').toggleClass('spellcheck-lang', rec && rec.spellcheck);
-        cmb._input.css('padding-left', rec && rec.spellcheck ? 25 : 3);
+        cmb._input.css(Common.UI.isRTL() ? 'padding-right' : 'padding-left', rec && rec.spellcheck ? 25 : 3);
     },
 
     onPrimary: function() {
diff --git a/apps/common/main/lib/view/ListSettingsDialog.js b/apps/common/main/lib/view/ListSettingsDialog.js
index 8a0feeecb..6714cf849 100644
--- a/apps/common/main/lib/view/ListSettingsDialog.js
+++ b/apps/common/main/lib/view/ListSettingsDialog.js
@@ -64,6 +64,7 @@ define([
             height: 261,
             style: 'min-width: 240px;',
             cls: 'modal-dlg',
+            id: 'window-list-settings',
             split: false,
             buttons: ['ok', 'cancel']
         },
@@ -78,35 +79,35 @@ define([
             this.template = [
                 '<div class="box">',
                     '<div style="margin-bottom: 16px;">',
-                        '<button type="button" class="btn btn-text-default auto" id="id-dlg-list-bullet" style="border-top-right-radius: 0;border-bottom-right-radius: 0;">', this.textBulleted,'</button>',
-                        '<button type="button" class="btn btn-text-default auto" id="id-dlg-list-numbering" style="border-top-left-radius: 0;border-bottom-left-radius: 0;border-left-width: 0;margin-left: -1px;">', this.textNumbering,'</button>',
+                        '<button type="button" class="btn btn-text-default auto" id="id-dlg-list-bullet">', this.textBulleted,'</button>',
+                        '<button type="button" class="btn btn-text-default auto" id="id-dlg-list-numbering">', this.textNumbering,'</button>',
                     '</div>',
                     '<div style="height:120px;">',
                         '<table cols="3">',
                             '<tr>',
-                                '<td style="padding-right: 5px;padding-bottom: 8px;min-width: 50px;">',
+                                '<td class="padding-right" style="padding-bottom: 8px;min-width: 50px;">',
                                     '<label class="text">' + this.txtType + '</label>',
                                 '</td>',
-                                '<td style="padding-right: 5px;padding-bottom: 8px;width: 105px;">',
+                                '<td class="padding-right" 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 style="padding-right: 5px;padding-bottom: 8px;min-width: 50px;">',
+                                '<td class="padding-right" style="padding-bottom: 8px;min-width: 50px;">',
                                     '<label class="text">' + this.txtImport + '</label>',
                                 '</td>',
-                                '<td style="padding-right: 5px;padding-bottom: 8px;width: 105px;">',
+                                '<td class="padding-right" 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 style="padding-right: 5px;padding-bottom: 8px;min-width: 50px;">',
+                                '<td class="padding-right" style="padding-bottom: 8px;min-width: 50px;">',
                                     '<label class="text">' + this.txtSize + '</label>',
                                 '</td>',
-                                '<td style="padding-right: 5px;padding-bottom: 8px;width: 105px;">',
+                                '<td class="padding-right" style="padding-bottom: 8px;width: 105px;">',
                                     '<div id="id-dlg-list-size"></div>',
                                 '</td>',
                                 '<td style="padding-bottom: 8px;">',
@@ -114,19 +115,19 @@ define([
                                 '</td>',
                             '</tr>',
                             '<tr class="numbering">',
-                                '<td style="padding-right: 5px;padding-bottom: 8px;min-width: 50px;">',
+                                '<td class="padding-right" style="padding-bottom: 8px;min-width: 50px;">',
                                     '<label class="text" style="white-space: nowrap;">' + this.txtStart + '</label>',
                                 '</td>',
-                                '<td style="padding-right: 5px;padding-bottom: 8px;width: 105px;">',
+                                '<td class="padding-right" 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 style="padding-right: 5px;padding-bottom: 8px;min-width: 50px;">',
+                                '<td class="padding-right" style="padding-bottom: 8px;min-width: 50px;">',
                                     '<label class="text">' + this.txtColor + '</label>',
                                 '</td>',
-                                '<td style="padding-right: 5px;padding-bottom: 8px;width: 105px;">',
+                                '<td class="padding-right" 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/SymbolTableDialog.js b/apps/common/main/lib/view/SymbolTableDialog.js
index 008a89954..defc7dd50 100644
--- a/apps/common/main/lib/view/SymbolTableDialog.js
+++ b/apps/common/main/lib/view/SymbolTableDialog.js
@@ -411,17 +411,17 @@ define([
             this.template = [
                 '<div class="box">',
                     '<div style="margin-bottom: 16px;" class="'+ (this.special ? '' : 'hidden') +'">',
-                        '<button type="button" class="btn btn-text-default auto" id="symbol-table-symbols" style="border-top-right-radius: 0;border-bottom-right-radius: 0;">', this.textSymbols,'</button>',
-                        '<button type="button" class="btn btn-text-default auto" id="symbol-table-special" style="border-top-left-radius: 0;border-bottom-left-radius: 0;border-left-width: 0;margin-left: -1px;">', this.textSpecial,'</button>',
+                        '<button type="button" class="btn btn-text-default auto" id="symbol-table-symbols">', this.textSymbols,'</button>',
+                        '<button type="button" class="btn btn-text-default auto" id="symbol-table-special">', this.textSpecial,'</button>',
                     '</div>',
                     '<div id="symbol-table-pnl-symbols">',
                         '<table cols="2" style="width: 100%;max-width: 497px;">',
                             '<tr>',
-                                '<td style="padding-right: 5px;padding-bottom: 8px;width: 50%;">',
+                                '<td class="padding-right" style="padding-bottom: 8px;width: 50%;">',
                                     '<label class="input-label">' + this.textFont + '</label>',
                                     '<div id="symbol-table-cmb-fonts"></div>',
                                 '</td>',
-                                '<td style="padding-left: 5px;padding-bottom: 8px;">',
+                                '<td class="padding-left" style="padding-bottom: 8px;">',
                                     '<label class="input-label">' + this.textRange + '</label>',
                                     '<div id="symbol-table-cmb-range"></div>',
                                 '</td>',
@@ -450,17 +450,17 @@ define([
                         '</table>',
                         '<table cols="2" style="width: 100%;max-width: 497px;">',
                             '<tr>',
-                                '<td style="padding-right: 5px; width: 50%;">',
+                                '<td class="padding-right" style="width: 50%;">',
                                     '<label class="input-label">' + this.textCode + '</label>',
                                 '</td>',
-                                '<td style="padding-left: 5px;">',
+                                '<td class="padding-left">',
                                 '</td>',
                             '</tr>',
                             '<tr>',
-                                '<td style="padding-right: 5px;">',
+                                '<td class="padding-right">',
                                     '<div id="symbol-table-text-code" oo_editor_input="true"></div>',
                                 '</td>',
-                                '<td style="padding-left: 5px;">',
+                                '<td class="padding-left">',
                                     '<div id="symbol-table-label-font" style="overflow: hidden; text-overflow: ellipsis;white-space: nowrap;max-width: 160px;"></div>',
                                 '</td>',
                             '</tr>',
@@ -471,7 +471,7 @@ define([
                             '<tr>',
                                 '<td>',
                                     '<label>' + this.textCharacter + '</label>',
-                                    '<label id="symbol-table-lbl-shortcut" style="float: right; width: 107px;">' + this.textShortcut + '</label>',
+                                    '<label id="symbol-table-lbl-shortcut" style="width: 107px;">' + this.textShortcut + '</label>',
                                 '</td>',
                             '</tr>',
                             '<tr>',
@@ -1093,7 +1093,7 @@ define([
                 oCell.css('border-bottom', 'none');
                 oRecentsDiv.append(oCell);
                 if(i === (nCols - 1)){
-                    oCell.css('border-right', 'none');
+                    oCell.css(Common.UI.isRTL() ? 'border-left' : 'border-right', 'none');
                 }
             }
         },
diff --git a/apps/common/main/resources/less/advanced-settings-window.less b/apps/common/main/resources/less/advanced-settings-window.less
index 98c132b44..4125a2bcf 100644
--- a/apps/common/main/resources/less/advanced-settings-window.less
+++ b/apps/common/main/resources/less/advanced-settings-window.less
@@ -22,6 +22,11 @@
                 line-height: normal;
                 height: auto;
                 white-space: normal;
+
+                .rtl & {
+                    text-align: right;
+                    padding: 9px 12px 9px 2px;
+                }
             }
         }
 
@@ -89,3 +94,52 @@
     width:44px;
     height:20px;
 }
+
+#window-list-settings {
+    #id-dlg-list-bullet {
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 0;
+
+        .rtl & {
+            .border-radius(@border-radius-small);
+            border-top-left-radius: 0;
+            border-bottom-left-radius: 0;
+        }
+    }
+
+    #id-dlg-list-numbering {
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
+        border-left-width: 0;
+        margin-left: -1px;
+
+        .rtl & {
+            border: @scaled-one-px-value solid @border-regular-control;
+            .border-radius(@border-radius-small);
+            margin-left: 0;
+            border-top-right-radius: 0;
+            border-bottom-right-radius: 0;
+            border-right-width: 0;
+            margin-right: -1px;
+        }
+    }
+
+    .padding-right {
+        padding-right: 5px;
+
+        .rtl & {
+            padding-right: 0;
+            padding-left: 5px;
+        }
+    }
+}
+
+#window-insert-table {
+    .columns-val, .rows-val {
+        float: right;
+
+        .rtl & {
+            float: left;
+        }
+    }
+}
diff --git a/apps/common/main/resources/less/buttons.less b/apps/common/main/resources/less/buttons.less
index 310f80c68..d5c28f8b0 100644
--- a/apps/common/main/resources/less/buttons.less
+++ b/apps/common/main/resources/less/buttons.less
@@ -260,6 +260,10 @@
 
                 .caret {
                     margin: 0 1px 0 4px;
+
+                    .rtl & {
+                        margin: 0 4px 0 1px;
+                    }
                 }
             }
         }
@@ -477,6 +481,10 @@
 
     &.align-left {
         text-align: left;
+
+        .rtl & {
+            text-align: right;
+        }
     }
 }
 
@@ -532,12 +540,40 @@
     > .btn {
         + .dropdown-toggle {
             padding: 0 4px 0 3px;
+
+            .rtl & {
+                padding: 0 3px 0 4px;
+            }
+        }
+
+        .rtl & {
+            float: right;
+        }
+
+        &:first-child:not(:last-child):not(.dropdown-toggle) {
+            .rtl & {
+                .border-radius(@border-radius-small);
+                border-top-left-radius: 0;
+                border-bottom-left-radius: 0;
+            }
         }
     }
 
     > .dropdown-toggle:first-child {
         .inner-box-caret {
             padding: 0 4px 0 3px;
+
+            .rtl & {
+                padding: 0 3px 0 4px;
+            }
+        }
+    }
+
+    > .dropdown-toggle:not(first-child) {
+        .rtl & {
+            .border-radius(@border-radius-small);
+            border-top-right-radius: 0;
+            border-bottom-right-radius: 0;
         }
     }
 
@@ -675,6 +711,11 @@
     border:@scaled-one-px-value solid @border-regular-control;
     .border-radius(@border-radius-small);
 
+    .rtl & {
+        padding: @scaled-one-px-value-ie @scaled-one-px-value-ie @scaled-one-px-value-ie 11px;
+        padding: @scaled-one-px-value @scaled-one-px-value @scaled-one-px-value 11px ;
+    }
+
     span:nth-child(1) {
         float: left;
         width: 100%;
@@ -688,6 +729,11 @@
         position: absolute;
         right: 0;
         top: 2px;
+
+        .rtl & {
+            right: auto;
+            left: 0;
+        }
     }
 
     &,
@@ -713,6 +759,12 @@
             height: 34px;
             transform: translate(16px, -9px) rotate(62deg);
             left: 0;
+
+            .rtl & {
+                left: auto;
+                right: 0;
+                transform: translate(-16px, -9px) rotate(62deg);
+            }
         }
     }
 
@@ -734,13 +786,26 @@
 
 // for color button auto color
 .dropdown-menu {
-    li > a.selected,
-    li > a:hover {
+    li > a {
         span.color-auto {
-            outline: @scaled-one-px-value-ie solid @icon-normal-ie;
-            outline: @scaled-one-px-value solid @icon-normal;
-            border: @scaled-one-px-value-ie solid @background-normal-ie;
-            border: @scaled-one-px-value solid @background-normal;
+            background-image: none;
+            width: 12px;
+            height: 12px;
+            margin: 1px 7px 0 1px;
+
+            .rtl & {
+                margin: 1px 1px 0 7px;
+            }
+        }
+
+        &.selected,
+        &:hover {
+            span.color-auto {
+                outline: @scaled-one-px-value-ie solid @icon-normal-ie;
+                outline: @scaled-one-px-value solid @icon-normal;
+                border: @scaled-one-px-value-ie solid @background-normal-ie;
+                border: @scaled-one-px-value solid @background-normal;
+            }
         }
     }
 }
@@ -862,6 +927,11 @@
         position: absolute;
         right: 5px;
         margin-top: 5px;
+
+        .rtl & {
+            right: auto;
+            left: 5px;
+        }
     }
 
     &:hover:not(.disabled),
@@ -904,6 +974,12 @@
 
     &:not(.dropdown-toggle) {
         border-right: none;
+
+        .rtl & {
+            border: @scaled-one-px-value-ie solid @border-regular-control-ie;
+            border: @scaled-one-px-value solid @border-regular-control;
+            border-left: none;
+        }
     }
 
     &:hover:not(.disabled),
@@ -1004,6 +1080,11 @@
         border: @scaled-one-px-value-ie solid @border-regular-control-ie;
         border: @scaled-one-px-value solid @border-regular-control;
         position: relative;
+
+        .rtl & {
+            margin-right: 0;
+            margin-left: 3px;
+        }
     }
 
     &.sheet-template-table {
diff --git a/apps/common/main/resources/less/chat.less b/apps/common/main/resources/less/chat.less
index caac2aa52..70f5b1628 100644
--- a/apps/common/main/resources/less/chat.less
+++ b/apps/common/main/resources/less/chat.less
@@ -20,6 +20,11 @@
         margin-top: 5px;
         margin-bottom: 5px;
         right: 4px !important;
+
+        .rtl & {
+            right: unset !important;
+            left: 4px !important;
+        }
     }
 
     #chat-title {
@@ -60,6 +65,10 @@
             height: 12px;
             border: 1px solid @border-toolbar-ie;
             border: 1px solid @border-toolbar;
+
+            .rtl & {
+                margin: 0 0 3px 5px;
+            }
         }
 
         .name {
@@ -119,6 +128,10 @@
                     border: 1px solid @border-toolbar;
                     margin: 0 5px 3px 0;
                     vertical-align: middle;
+
+                    .rtl & {
+                        margin: 0 0 3px 5px;
+                    }
                 }
 
                 .message {
diff --git a/apps/common/main/resources/less/checkbox.less b/apps/common/main/resources/less/checkbox.less
index b0d588c75..110f871ef 100644
--- a/apps/common/main/resources/less/checkbox.less
+++ b/apps/common/main/resources/less/checkbox.less
@@ -6,6 +6,11 @@
     position: relative;
     min-height: 1em;
 
+    .rtl & {
+        padding-left: 0;
+        padding-right: 22px;
+    }
+
     input[type=checkbox] {
         display: none;
 
@@ -21,6 +26,11 @@
             left: 0;
             margin-top: auto;
 
+            .rtl & {
+                left: auto;
+                right: 0;
+            }
+
             + span {
                 outline: @scaled-one-px-value-ie dotted transparent;
                 outline: @scaled-one-px-value dotted transparent;
diff --git a/apps/common/main/resources/less/combo-border-size.less b/apps/common/main/resources/less/combo-border-size.less
index 7bb139b2f..27e968fe9 100644
--- a/apps/common/main/resources/less/combo-border-size.less
+++ b/apps/common/main/resources/less/combo-border-size.less
@@ -14,6 +14,11 @@
     li {
         a {
             white-space: normal;
+            padding: 2px 0 2px 10px;
+
+            .rtl & {
+                padding: 2px 10px 2px 0;
+            }
         }
 
         span {
@@ -28,6 +33,7 @@
             height:20px;
             background-color: transparent;
             image-rendering: pixelated;
+            float: left;
         }
     }
 
@@ -61,6 +67,16 @@
             background-image: ~"url(@{common-image-const-path}/combo-border-size/BorderSize@2x.png)";
         }
     }
+
+    &.combo-border-type {
+        .rtl & li img {
+            float: right;
+        }
+    }
+
+    &:not(.combo-border-type) .dropdown-menu li a {
+        padding: 5px 20px;
+    }
 }
 
 .combo-color {
diff --git a/apps/common/main/resources/less/combo-dataview.less b/apps/common/main/resources/less/combo-dataview.less
index dbd9da995..d05a065f6 100644
--- a/apps/common/main/resources/less/combo-dataview.less
+++ b/apps/common/main/resources/less/combo-dataview.less
@@ -15,6 +15,10 @@
         background-color: @background-normal-ie;
         background-color: @background-normal;
 
+        .rtl & {
+            float: right;
+        }
+
         .dataview {
             padding: 1px;
         }
@@ -24,6 +28,10 @@
         display: inline-block;
         float: right;
 
+        .rtl & {
+            float: left;
+        }
+
         button {
             border-radius:0 @border-radius-small @border-radius-small 0;
             border: @scaled-one-px-value-ie solid @border-regular-control-ie;
@@ -31,6 +39,10 @@
             background-color: @background-normal-ie;
             background-color: @background-normal;
 
+            .rtl & {
+                border-radius:@border-radius-small 0 0 @border-radius-small;
+            }
+
             &.dropdown-toggle {
                 .inner-box-caret {
                     padding: 0 1px 0 0;
@@ -101,6 +113,16 @@
 
         .border-left-radius(0);
 
+        .rtl & {
+            margin-right: 0;
+            padding-right: 0;
+            margin-left: -@combo-dataview-button-width;
+            padding-left: @combo-dataview-button-width;
+
+            .border-radius(@border-radius-small);
+            .border-right-radius(0);
+        }
+
         .dataview {
             @minus-px: calc(-1px / @pixel-ratio-factor);
             height: @combo-dataview-height;
@@ -243,6 +265,13 @@
         margin-right: -@combo-dataview-button-width;
         padding-right: @combo-dataview-button-width;
 
+        .rtl & {
+            margin-right: 0;
+            padding-right: 0;
+            margin-left: -@combo-dataview-button-width;
+            padding-left: @combo-dataview-button-width;
+        }
+
         .dataview {
             padding: 2px;
         }
@@ -281,6 +310,13 @@
     .view {
         margin-right: -@combo-dataview-button-width;
         padding-right: @combo-dataview-button-width;
+
+        .rtl & {
+            margin-right: 0;
+            padding-right: 0;
+            margin-left: -@combo-dataview-button-width;
+            padding-left: @combo-dataview-button-width;
+        }
     }
 
     .button {
@@ -291,6 +327,10 @@
     .item {
         margin: @combo-dataview-item-margins 0 @combo-dataview-item-margins @combo-dataview-item-margins;
         .box-shadow(none);
+
+        .rtl & {
+            margin: @combo-dataview-item-margins @combo-dataview-item-margins @combo-dataview-item-margins 0;
+        }
     }
 
     &.disabled {
@@ -337,6 +377,11 @@
         margin-left: 4px;
         .box-shadow(0 0 0 @scaled-one-px-value-ie @border-regular-control-ie);
         .box-shadow(0 0 0 @scaled-one-px-value @border-regular-control);
+
+        .rtl & {
+            margin: 2px 0 2px 2px;
+            margin-right: 4px;
+        }
     }
 
     &.disabled {
@@ -361,6 +406,11 @@
     position: absolute;
     padding-right: 12px;
 
+    .rtl & {
+        padding-right: 0;
+        padding-left: 12px;
+    }
+
     .more-container & {
         position: static;
     }
@@ -390,6 +440,11 @@
             .group-description {
                 padding: 3px 0 3px 10px;
                 .font-weight-bold();
+
+                .rtl & {
+                    padding: 3px 10px 3px 0;
+                    text-align: right;
+                }
             } 
         }
     }
@@ -412,6 +467,13 @@
     .view {
         margin-right: -@combo-dataview-button-width;
         padding-right: calc(@combo-dataview-button-width - @scaled-one-px-value);
+
+        .rtl & {
+            margin-right: 0;
+            padding-right: 0;
+            margin-left: -@combo-dataview-button-width;
+            padding-left: 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 d2c284c20..08f71c548 100644
--- a/apps/common/main/resources/less/combobox.less
+++ b/apps/common/main/resources/less/combobox.less
@@ -17,11 +17,28 @@
 
         border-top-right-radius: 2px !important;
         border-bottom-right-radius: 2px !important;
+
+        .rtl & {
+            border-top-left-radius: 2px !important;
+            border-bottom-left-radius: 2px !important;
+        }
+    }
+
+    &.input-group-nr > .btn {
+        .rtl & {
+            border-top-right-radius: 0 !important;
+            border-bottom-right-radius: 0 !important;
+        }
     }
 
     &.input-group-nr > .form-control {
         padding-right: 7px + 2 * @padding-base-horizontal;
         .font-size-normal();
+
+        .rtl & {
+            padding-right: 3px;
+            padding-left: 7px + 2 * @padding-base-horizontal;
+        }
     }
 
     .form-control {
@@ -40,6 +57,12 @@
             line-height: 20px;
             padding-left: 2px;
         }
+
+        .rtl & {
+            border: @scaled-one-px-value-ie solid @border-regular-control-ie;
+            border: @scaled-one-px-value solid @border-regular-control;
+            border-left: 0;
+        }
     }
 
     .btn {
@@ -53,6 +76,16 @@
         position: absolute;
         top: 0;
         right: 0;
+
+        .rtl & {
+            border: @scaled-one-px-value-ie solid;
+            border: @scaled-one-px-value solid;
+            border-top-right-radius: 0;
+            border-bottom-right-radius: 0;
+            border-right: 0;
+            right: unset;
+            left: 0;
+        }
     }
 
     .btn-default:not(.disabled),
@@ -62,6 +95,11 @@
         border-color: @border-regular-control-ie;
         border-color: @border-regular-control;
         padding-right: 5px;
+
+        .rtl & {
+            padding-right: 3px;
+            padding-left: 5px;
+        }
     }
 
     .btn-default.disabled {
@@ -69,6 +107,11 @@
         border-top-color: transparent;
         border-bottom-color: transparent;
 
+        .rtl & {
+            border-left-color: @border-regular-control-ie;
+            border-left-color: @border-regular-control;
+        }
+
         &:hover, &:focus {
             background-color: transparent;
             border-right-color: @border-regular-control-ie;
@@ -178,6 +221,10 @@
 
     .dropdown-menu.menu-absolute {
         position: fixed;
+
+        .rtl & {
+            right: unset;
+        }
     }
 
     .dropdown-menu.show-top {
@@ -192,6 +239,57 @@
             }
         }
     }
+
+    &.combobox-icons {
+        .form-control {
+            padding:2px 0 2px 3px;
+            display: block;
+            div {
+                display: inline-block;
+                overflow: hidden;
+                width: 100%;
+                height: 100%;
+            }
+        }
+
+        li a {
+            padding: 5px;
+            img {
+                width:16px;
+                height:16px;
+                margin-right: 5px;
+               .rtl & {
+                   margin-right: 0;
+                   margin-left: 5px;
+               }
+            }
+        }
+    }
+
+    &.combobox-color {
+        .form-control {
+            display: block;
+            padding: 2px 14px 2px 3px;
+
+            div {
+                display: inline-block;
+                overflow: hidden;
+                width: 100%;
+                height: 100%;
+            }
+
+            .rtl & {
+                padding: 2px 3px 2px 14px;
+            }
+        }
+        li a {
+            padding: 5px;
+
+            div {
+                height: 15px;
+            }
+        }
+    }
 }
 
 .open > .combobox.combo-dataview-menu {
diff --git a/apps/common/main/resources/less/comments.less b/apps/common/main/resources/less/comments.less
index 249fa44f7..00460e501 100644
--- a/apps/common/main/resources/less/comments.less
+++ b/apps/common/main/resources/less/comments.less
@@ -23,6 +23,25 @@
             .font-weight-bold();
             margin-top: 2px;
         }
+
+        #comments-btn-close {
+            float: right;
+            margin-left: 4px;
+
+            .rtl & {
+                float: left;
+                margin-left: 0;
+                margin-right: 4px;
+            }
+        }
+
+        #comments-btn-sort {
+            float: right;
+
+            .rtl & {
+                float: left;
+            }
+        }
     }
 
     .messages-ct {
@@ -44,6 +63,11 @@
             margin-top: 5px;
             margin-bottom: 5px;
             right: 4px !important;
+
+            .rtl & {
+                right: unset !important;
+                left: 4px !important;
+            }
         }
 
         .dataview-ct.inner {
@@ -110,9 +134,19 @@
     .btn {
         &.add {
             margin-left: 20px;
+
+            .rtl & {
+                margin-left: 0;
+                margin-right: 20px;
+            }
         }
         &.cancel {
             margin-left: 7px;
+
+            .rtl & {
+                margin-left: 0;
+                margin-right: 7px;
+            }
         }
     }
 }
@@ -175,6 +209,10 @@
         padding: 10px 65px 0 0px;
         height: 26px;
         cursor: default;
+
+        .rtl & {
+            padding: 10px 0px 0 65px;
+        }
     }
 
     .color {
@@ -184,6 +222,10 @@
         border: @scaled-one-px-value solid @border-toolbar;
         margin: 0 5px 3px 0;
         vertical-align: middle;
+
+        .rtl & {
+            margin: 0 0 3px 5px;
+        }
     }
 
     .user-name-colored {
@@ -273,6 +315,12 @@
         top: 0;
         margin: 11px 21px 10px 10px;
         height: 20px;
+
+        .rtl & {
+            right: unset;
+            left: 0;
+            margin: 11px 10px 10px 21px;
+        }
     }
 
     .btns-reply-ct {
@@ -281,6 +329,11 @@
         top: 0;
         height: 30px;
         margin-top: 11px;
+
+        .rtl & {
+            right: unset;
+            left: 0;
+        }
     }
 
     .reply-item-ct {
@@ -292,6 +345,10 @@
     div[class^=btn-] {
         float: left;
         cursor: pointer;
+
+        .rtl & {
+            float: right;
+        }
     }
 
     .btn-edit,.btn-delete, .btn-resolve, .icon-resolve, .btn-resolve-check, .btn-accept, .btn-reject, .btn-goto {
@@ -299,6 +356,10 @@
         height: 16px;
         margin: 0 0 0 5px;
         background-color: transparent;
+
+        .rtl & {
+            margin: 0 5px 0 0;
+        }
     }
 
     .icon-resolve {
diff --git a/apps/common/main/resources/less/common.less b/apps/common/main/resources/less/common.less
index b7c6f6918..55d7e525d 100644
--- a/apps/common/main/resources/less/common.less
+++ b/apps/common/main/resources/less/common.less
@@ -57,6 +57,11 @@ label {
         .tool-menu-btns {
             border-right: @scaled-one-px-value-ie solid @border-toolbar-ie;
             border-right: @scaled-one-px-value solid @border-toolbar;
+
+            .rtl & {
+                border-left: @scaled-one-px-value solid @border-toolbar;
+                border-right: 0 none;
+            }
         }
     }
 
@@ -69,6 +74,14 @@ label {
             background-color: @background-toolbar;
             right: 0;
             overflow: hidden;
+
+            .rtl & {
+                left: 0;
+                right: auto;
+
+                border-right: @scaled-one-px-value solid @border-toolbar;
+                border-left: 0 none;
+            }
         }
     }
 }
@@ -91,6 +104,13 @@ label {
     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;
+    }
+
     #left-panel-chat {
         height: 100%;
     }
@@ -114,6 +134,11 @@ label {
     border-left: @scaled-one-px-value-ie solid @border-toolbar-ie;
     border-left: @scaled-one-px-value solid @border-toolbar;
     line-height: 15px;
+
+    .rtl & {
+        border-right: @scaled-one-px-value solid @border-toolbar;
+        border-left: 0 none;
+    }
 }
 
 .statusbar {
@@ -146,6 +171,13 @@ label {
         border-right: @scaled-one-px-value solid @border-toolbar;
         background-color: @background-toolbar-ie;
         background-color: @background-toolbar;
+
+        .rtl & {
+            float: right;
+            border-right: none;
+            border-left: @scaled-one-px-value-ie solid @border-toolbar-ie;
+            border-left: @scaled-one-px-value solid @border-toolbar;
+        }
     }
 
     .flex-settings {
@@ -229,6 +261,11 @@ label {
         color: @text-normal-ie;
         color: @text-normal;
     }
+
+    .rtl & {
+        left: unset;
+        right: 0;
+    }
 }
 
 textarea {
@@ -298,7 +335,32 @@ body {
     &.pixel-ratio__1_75 {
         image-rendering: crisp-edges; // FF only
     }
-
     font-family: @font-family-sans-serif;
     font-family: @font-family-base;
+}
+
+.rtl .ps-scrollbar-y-rail {
+    right: unset !important;
+    left: 1px !important;
+    .ps-scrollbar-y {
+        left: 0 !important;
+    }
+}
+
+.menu-margins {
+    .margin-vertical {
+        display: inline-block;
+        margin-right: 20px;
+        min-width: 80px;
+        .rtl & {
+            margin-right: 0;
+            margin-left: 20px;
+        }
+    }
+    .margin-horizontal {
+        display: inline-block;
+    }
+    label {
+        display: block;
+    }
 }
\ No newline at end of file
diff --git a/apps/common/main/resources/less/dataview.less b/apps/common/main/resources/less/dataview.less
index c0e45566a..899e3082b 100644
--- a/apps/common/main/resources/less/dataview.less
+++ b/apps/common/main/resources/less/dataview.less
@@ -27,6 +27,10 @@
         .box-shadow(0 0 0 @scaled-one-px-value-ie @border-regular-control-ie);
         .box-shadow(0 0 0 @scaled-one-px-value @border-regular-control);
 
+        .rtl & {
+            float: right;
+        }
+
         &:hover,
         &.selected {
             .box-shadow(0 0 0 2px @border-preview-select-ie);
@@ -42,10 +46,25 @@
         clear: left;
         overflow: hidden;
 
+        .rtl & {
+            clear: right;
+        }
+
         &.inline {
             display: inline-block;
+
+            .rtl & {
+                float: right;
+                clear: none;
+            }
+
             &.margin .group-items-container {
                 margin-right: 20px;
+
+                .rtl & {
+                    margin-right: 0;
+                    margin-left: 20px;
+                }
             }
         }
 
@@ -62,6 +81,10 @@
                 float: left;
                 margin: 2px 4px 4px;
 
+                .rtl & {
+                    float: right;
+                }
+
                 &:not(.disabled) {
                     cursor: pointer;
                 }
@@ -99,9 +122,20 @@
 .menu-insert-shape, .menu-change-shape {
     width: 362px;
     padding: 10px 5px 10px 10px !important;
+
+    .rtl & {
+        padding: 10px 10px 10px 5px !important;
+    }
+
     .group-description {
         padding: 3px 0 3px 4px;
+
+        .rtl & {
+            padding: 3px 4px 3px 0;
+            text-align: right;
+        }
     }
+
     .dataview .grouped-data .group-items-container .item {
         box-shadow: none;
         margin: 2px 2px 2px;
diff --git a/apps/common/main/resources/less/dropdown-menu.less b/apps/common/main/resources/less/dropdown-menu.less
index f6bf2ae7d..eacb20656 100644
--- a/apps/common/main/resources/less/dropdown-menu.less
+++ b/apps/common/main/resources/less/dropdown-menu.less
@@ -53,6 +53,10 @@
                 background-color: @highlight-button-hover-ie;
                 background-color: @highlight-button-hover;
             }
+
+            .rtl & {
+                text-align: right;
+            }
         }
 
         &.over > a {
@@ -77,6 +81,12 @@
                 float: left;
                 margin-left: -18px;
                 background-position: @menu-check-offset-x @menu-check-offset-y;
+
+                .rtl & {
+                    float: right;
+                    margin-left: 0;
+                    margin-right: -18px;
+                }
             }
             &.custom-scale:before {
                 margin-top: 3px;
@@ -96,6 +106,11 @@
             margin: -2px 5px 0 -15px;
             background-repeat: no-repeat;
             opacity: @component-normal-icon-opacity;
+
+            .rtl & {
+                float: right;
+                margin: -2px -15px 0 5px;
+            }
         }
 
         .no-checkmark.checked {
@@ -138,9 +153,16 @@
         li {
             & > a {
                 padding-left: 28px;
+                .rtl & {
+                    padding-left: 20px;
+                    padding-right: 28px;
+                }
             }
             .menu-item-icon {
                 margin: -2px 0 0 -24px;
+                .rtl & {
+                    margin: -2px -24px 0 0;
+                }
             }
             .checked:not(.no-checkmark):before  {
                 margin-left: -22px;
diff --git a/apps/common/main/resources/less/dropdown-submenu.less b/apps/common/main/resources/less/dropdown-submenu.less
index e422dfd3f..48aa8f284 100644
--- a/apps/common/main/resources/less/dropdown-submenu.less
+++ b/apps/common/main/resources/less/dropdown-submenu.less
@@ -8,6 +8,10 @@
         margin-left: -1px;
       	border-radius:@border-radius-base;
 
+        .rtl & {
+            margin-left: 1px;
+        }
+
         &.pull-right {
             right: 100%;
             left: auto;
@@ -27,6 +31,16 @@
         border-left-color: @icon-normal;
         margin-top: 5px;
         margin-right: -7px;
+
+        .rtl & {
+            float: left;
+            margin-right: 0;
+            margin-left: -7px;
+            border-color: transparent;
+            border-width: 3px 3px 3px 0;
+            border-right-color: @icon-normal-ie;
+            border-right-color: @icon-normal;
+        }
     }
 
     &.over:not(.disabled) > .dropdown-menu {
diff --git a/apps/common/main/resources/less/extended-color-picker.less b/apps/common/main/resources/less/extended-color-picker.less
index bff022489..b75e28e74 100644
--- a/apps/common/main/resources/less/extended-color-picker.less
+++ b/apps/common/main/resources/less/extended-color-picker.less
@@ -57,6 +57,10 @@
             &:before {
                 height: 64px;
                 transform: translate(29px, -22px) rotate(73deg);
+
+                .rtl & {
+                    transform: translate(-29px, -22px) rotate(73deg);
+                }
             }
         }
     }
@@ -78,4 +82,13 @@
             }
         }
     }
+
+    .color-preview {
+        margin-left: 15px;
+
+        .rtl & {
+            margin-left: 0;
+            margin-right: 15px;
+        }
+    }
 }
\ No newline at end of file
diff --git a/apps/common/main/resources/less/hsb-colorpicker.less b/apps/common/main/resources/less/hsb-colorpicker.less
index 2716d14bf..f6a6d9115 100644
--- a/apps/common/main/resources/less/hsb-colorpicker.less
+++ b/apps/common/main/resources/less/hsb-colorpicker.less
@@ -82,6 +82,12 @@
         margin-left: calc(-4px - @scaled-one-px-value);
         position: absolute;
         background-position: -168px -200px;
+
+        .rtl & {
+            margin-left: 0;
+            margin-right: -4px;
+            margin-right: calc(-3px - @scaled-one-px-value);
+        }
     }
 
     .empty-color {
diff --git a/apps/common/main/resources/less/input.less b/apps/common/main/resources/less/input.less
index 8412036eb..8aa6b8bd9 100644
--- a/apps/common/main/resources/less/input.less
+++ b/apps/common/main/resources/less/input.less
@@ -50,6 +50,11 @@
         height: 16px;
         background-position: @input-error-offset-x @input-error-offset-y;
         filter: none;
+
+        .rtl & {
+            right: unset;
+            left: 3px;
+        }
     }
 }
 
@@ -58,6 +63,10 @@
     .input-error {
         float: left;
         position: relative;
+
+        .rtl & {
+            float: right;
+        }
     }
 
     &.form-control:focus,
@@ -138,14 +147,30 @@ textarea.form-control:focus {
             height: 20px;
             height: calc(22px - @scaled-one-px-value * 2);
         }
+
+        .rtl & {
+            right: unset;
+            left: @scaled-one-px-value-ie;
+            left: @scaled-one-px-value;
+        }
     }
 
     .input-error {
         &:before {
             right: 22px;
+
+            .rtl & {
+                right: unset;
+                left: 22px;
+            }
         }
     }
     input {
         padding-right: 20px;
+
+        .rtl & {
+            padding-right: 3px;
+            padding-left: 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 04731f1e7..dee71416b 100644
--- a/apps/common/main/resources/less/language-dialog.less
+++ b/apps/common/main/resources/less/language-dialog.less
@@ -8,6 +8,9 @@
 li {
   .icon.spellcheck-lang {
     margin: -3px 4px 0 -24px;
+    .rtl & {
+      margin: -3px -24px 0 4px;
+    }
   }
 
   &.selected, a.checked {
@@ -39,6 +42,13 @@ li {
     li .icon.lang-flag {
       margin-top: 1px;
     }
+    li a {
+      padding-left: 28px !important;
+      .rtl & {
+        padding-left: 0 !important;
+        padding-right: 28px !important;
+      }
+    }
   }
 
   .input-icon {
@@ -46,10 +56,18 @@ li {
     &.spellcheck-lang { // spell check indicator
       left: 2px;
       top: 1px;
+      .rtl & {
+        left: auto;
+        right: 2px;
+      }
     }
     &.lang-flag { // language flags
       left: 5px;
       top: 5px;
+      .rtl & {
+        left: auto;
+        right: 5px;
+      }
     }
   }
 }
diff --git a/apps/common/main/resources/less/radiobox.less b/apps/common/main/resources/less/radiobox.less
index 56c440701..d1289aedf 100644
--- a/apps/common/main/resources/less/radiobox.less
+++ b/apps/common/main/resources/less/radiobox.less
@@ -10,6 +10,12 @@
 
     svg {
         margin-right: 8px;
+
+        .rtl & {
+            margin-right: 0;
+            margin-left: 8px;
+        }
+
         .rb-circle {
             fill: @background-normal-ie;
             fill: @background-normal;
diff --git a/apps/common/main/resources/less/searchdialog.less b/apps/common/main/resources/less/searchdialog.less
index 6f015fcab..9ffcb7e54 100644
--- a/apps/common/main/resources/less/searchdialog.less
+++ b/apps/common/main/resources/less/searchdialog.less
@@ -132,6 +132,10 @@
 
         #search-btn-close {
             float: right;
+
+            .rtl & {
+                float: left;
+            }
         }
     }
 
@@ -167,6 +171,11 @@
         .search-nav-btns {
             display: inline-block;
             float: right;
+
+            .rtl & {
+                float: left;
+            }
+
             div {
                 display: inline-block;
             }
@@ -197,6 +206,11 @@
         cursor: pointer;
         margin-left: 15px;
 
+        .rtl & {
+            margin-left: 0;
+            margin-right: 15px;
+        }
+
         .search-options-txt {
             display: inline-block;
             padding: 5px 0;
@@ -211,6 +225,13 @@
             left: 0;
             cursor: pointer;
             margin-left: 8px;
+
+            .rtl & {
+                margin-left: 0;
+                margin-right: 8px;
+                left: unset;
+                right: 0;
+            }
         }
 
     }
@@ -231,6 +252,10 @@
         }
         .search-options-caret {
             transform: rotate(270deg);
+
+            .rtl & {
+                transform: rotate(90deg);
+            }
         }
     }
 
diff --git a/apps/common/main/resources/less/separator.less b/apps/common/main/resources/less/separator.less
index d54ba5aed..e570c479d 100644
--- a/apps/common/main/resources/less/separator.less
+++ b/apps/common/main/resources/less/separator.less
@@ -15,6 +15,12 @@
     padding: 0;
     width: 0;
 
+    .rtl & {
+        border-left: none;
+        border-right: @scaled-one-px-value-ie solid @border-divider-ie;
+        border-right: @scaled-one-px-value solid @border-divider;
+    }
+
     &.horizontal {
         height: 0;
         display: block;
diff --git a/apps/common/main/resources/less/spinner.less b/apps/common/main/resources/less/spinner.less
index 9776d05d8..740d5576e 100644
--- a/apps/common/main/resources/less/spinner.less
+++ b/apps/common/main/resources/less/spinner.less
@@ -9,6 +9,12 @@
         padding-left: 1px;
         padding-right: @trigger-width + 2px;
 
+        .rtl & {
+            text-align: left;
+            padding-left: @trigger-width + 2px;
+            padding-right: 1px;
+        }
+
         &:focus {
             // border-color: @border-preview-select;
         }
@@ -46,6 +52,12 @@
         border-bottom: @scaled-one-px-value-ie solid transparent;
         border-bottom: @scaled-one-px-value solid transparent;
         font-size: 11px; // must be const value
+
+        .rtl & {
+            right: unset;
+            left: 1px;
+        }
+
         i {
             display: inline-block;
             width: 4px;
diff --git a/apps/common/main/resources/less/symboltable.less b/apps/common/main/resources/less/symboltable.less
index fbabd91f8..e44f4181c 100644
--- a/apps/common/main/resources/less/symboltable.less
+++ b/apps/common/main/resources/less/symboltable.less
@@ -24,6 +24,12 @@
     cursor: default;
     overflow:hidden;
     display: inline-block;
+
+    .rtl & {
+      border-right: none;
+      border-left: @scaled-one-px-value-ie solid @border-regular-control-ie;
+      border-left: @scaled-one-px-value solid @border-regular-control;
+    }
   }
 
   .cell-selected{
@@ -58,3 +64,60 @@
     overflow:hidden;
   }
 }
+
+#symbol-table-symbols {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+
+  .rtl & {
+    .border-radius(@border-radius-small);
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+}
+
+#symbol-table-special {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+  border-left-width: 0;
+  margin-left: -1px;
+
+  .rtl & {
+    border: @scaled-one-px-value solid @border-regular-control;
+    .border-radius(@border-radius-small);
+    margin-left: 0;
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+    border-right-width: 0;
+    margin-right: -1px;
+  }
+}
+
+#symbol-table-pnl-symbols {
+  .padding-right {
+    padding-right: 5px;
+
+    .rtl & {
+      padding-right: 0;
+      padding-left: 5px;
+    }
+  }
+
+  .padding-left {
+    padding-left: 5px;
+
+    .rtl & {
+      padding-left: 0;
+      padding-right: 5px;
+    }
+  }
+}
+
+#symbol-table-lbl-shortcut {
+  float: right;
+
+  .rtl & {
+    float: left;
+  }
+}
+
diff --git a/apps/common/main/resources/less/theme-colorpalette.less b/apps/common/main/resources/less/theme-colorpalette.less
index f49260b6d..d2e87b729 100644
--- a/apps/common/main/resources/less/theme-colorpalette.less
+++ b/apps/common/main/resources/less/theme-colorpalette.less
@@ -32,6 +32,10 @@
         outline: 0 none;
         cursor: pointer;
 
+        .rtl & {
+            float: right;
+        }
+
         em span {
             border: @scaled-one-px-value-ie solid @border-color-shading-ie;
             border: @scaled-one-px-value solid @border-color-shading;
@@ -66,10 +70,48 @@
         }
     }
 
+    .palette-inner {
+        padding: 4px 0 0 12px;
+        .rtl & {
+            padding: 4px 12px 0 0;
+        }
+    }
+
     .palette-color-caption {
         width:100%;
         float:left;
         .font-size-normal();
+        .rtl & {
+            float: right;
+            text-align: right;
+        }
+    }
+
+    .palette-color-spacer {
+        width: 100%;
+        height: 8px;
+        float: left;
+        .rtl & {
+            float: right;
+        }
+    }
+
+    .palette-color-dynamiccolors {
+        padding: 4px 0 0 12px;
+        .rtl & {
+            padding: 4px 12px 0 0;
+        }
+    }
+
+    .divider {
+        width: 100%;
+        float: left;
+    }
+
+    .color-divider {
+        width:100%;
+        height:0;
+        float:left;
     }
 }
 
diff --git a/apps/common/main/resources/less/toolbar.less b/apps/common/main/resources/less/toolbar.less
index 37410609c..413bdb2b6 100644
--- a/apps/common/main/resources/less/toolbar.less
+++ b/apps/common/main/resources/less/toolbar.less
@@ -169,6 +169,11 @@
                 &:after {
                     transform: rotate(135deg);
                     margin-left: 8px;
+
+                    .rtl & {
+                        margin-left: 0;
+                        margin-right: 4px;
+                    }
                 }
             }
             &.right{
@@ -178,6 +183,11 @@
                 &:after {
                     transform: rotate(-45deg);
                     margin-left: 4px;
+
+                    .rtl & {
+                        margin-left: 0;
+                        margin-right: 8px;
+                    }
                 }
             }
 
@@ -211,6 +221,11 @@
         -ms-flex: 1;
         padding-right: 6px;
 
+        .rtl & {
+            padding-right: 0;
+            padding-left: 6px;
+        }
+
         .panel:not(.active) {
             display: none;
         }
@@ -245,6 +260,9 @@
         padding: 12px 10px 7px 0;
         border-radius: 0;
         z-index:999;
+        .rtl & {
+            padding: 12px 0 7px 10px;
+        }
         .compactwidth {
             .btn-group, .btn-toolbar {
                 &.x-huge {
@@ -280,6 +298,18 @@
     .more-box {
         background-color: @background-toolbar-ie;
         background-color: @background-toolbar;
+        position: absolute;
+        right: 0;
+        padding-left: 12px;
+        padding-right: 6px;
+        display: none;
+
+        .rtl & {
+            right: unset;
+            left: 0;
+            padding-left: 6px;
+            padding-right: 12px;
+        }
     }
 
     background-color: @background-toolbar-ie;
@@ -296,11 +326,26 @@
         padding-left: 6px;
         font-size: 0;
 
+        .rtl & {
+            padding-left: 0;
+            padding-right: 6px;
+        }
+
         &.small {
             padding-left: 10px;
 
+            .rtl & {
+                padding-left: 0;
+                padding-right: 10px;
+            }
+
             + .separator:not(.invisible) {
                 margin-left: 10px;
+
+                .rtl & {
+                    margin-left: 0;
+                    margin-right: 10px;
+                }
             }
         }
 
@@ -695,6 +740,10 @@
     height: 46px;
     .view {
         padding-right: 14px;
+        .rtl & {
+            padding-right: 0;
+            padding-left: 14px;
+        }
     }
     .dataview.field-picker {
         height: 100%;
@@ -769,13 +818,27 @@
 .menu-insertchart {
     margin: 5px 5px 0 10px;
 
+    .rtl & {
+        margin: 5px 10px 0 5px;
+    }
+
     .group-description {
         padding-left: 4px;
+
+        .rtl & {
+            padding: 0;
+            padding-right: 4px;
+            text-align: right;
+        }
     }
 
     .group-items-container {
         float: left;
         position: relative;
+
+        .rtl & {
+            float: right;
+        }
     }
 }
 
@@ -800,6 +863,10 @@
         &.colors {
             display: inline-block;
             margin-right: 15px;
+            .rtl & {
+                margin-right: 0;
+                margin-left: 15px;
+            }
         }
 
         &.color {
@@ -870,8 +937,22 @@
 .menu-iconsets {
     margin: 5px 5px 0 10px;
 
+    .rtl & {
+        margin: 5px 10px 0 5px;
+    }
+
+    .group-description {
+        text-align: right;
+    }
+
     .group-items-container > div {
         margin-right: 8px !important;
+
+        .rtl & {
+            margin-right: 4px !important;
+            margin-left: 8px !important;
+        }
+
         &:not(:hover),
         &:not(.selected) {
             .box-shadow(none);
@@ -880,6 +961,10 @@
     .item-iconset {
         img {
             margin: 2px;
+
+            .rtl & {
+                float: right;
+            }
         }
 
         width: 100px;
diff --git a/apps/common/main/resources/less/treeview.less b/apps/common/main/resources/less/treeview.less
index 059dfddff..78b5875f4 100644
--- a/apps/common/main/resources/less/treeview.less
+++ b/apps/common/main/resources/less/treeview.less
@@ -79,8 +79,17 @@
     left: 0;
     cursor: pointer;
 
+    .rtl & {
+      left: unset;
+      right: 0;
+    }
+
     &.up {
       transform: rotate(270deg);
+
+      .rtl & {
+        transform: rotate(90deg);
+      }
     }
   }
 }
diff --git a/apps/common/main/resources/less/window.less b/apps/common/main/resources/less/window.less
index 77a2b5099..c744a42db 100644
--- a/apps/common/main/resources/less/window.less
+++ b/apps/common/main/resources/less/window.less
@@ -205,6 +205,11 @@
         .icon {
             float: left;
             margin: 0 0 0 10px;
+
+            .rtl & {
+                float: right;
+                margin: 0 10px 0 10px;
+            }
         }
 
         min-height: 90px;
@@ -215,9 +220,18 @@
                 padding: 20px 20px 20px 10px;
                 height: 50px;
 
+                .rtl & {
+                    padding: 20px 10px 20px 20px;
+                }
+
                 .text {
                     padding-left: 60px;
 
+                    .rtl & {
+                        padding-left: 0;
+                        padding-right: 60px;
+                    }
+
                     span {
                         .font-size-medium();
                         white-space: nowrap;
@@ -256,6 +270,11 @@
             button {
                 &:not(:first-child) {
                     margin-left: 10px;
+
+                    .rtl & {
+                        margin-left: 0;
+                        margin-right: 10px;
+                    }
                 }
             }
         }
@@ -314,6 +333,11 @@
         button {
             &:not(:first-child) {
                 margin-left: 10px;
+
+                .rtl & {
+                    margin-left: 0;
+                    margin-right: 10px;
+                }
             }
         }
     }
diff --git a/apps/documenteditor/main/app/controller/Main.js b/apps/documenteditor/main/app/controller/Main.js
index abd1e5867..73ae8e8cd 100644
--- a/apps/documenteditor/main/app/controller/Main.js
+++ b/apps/documenteditor/main/app/controller/Main.js
@@ -442,6 +442,7 @@ define([
                 this.appOptions.canFeatureComparison = true;
                 this.appOptions.canFeatureContentControl = true;
                 this.appOptions.canFeatureForms = !!this.api.asc_isSupportFeature("forms");
+                this.appOptions.uiRtl = Common.localStorage.getBool("ui-rtl");
 
                 this.appOptions.mentionShare = !((typeof (this.appOptions.customization) == 'object') && (this.appOptions.customization.mentionShare==false));
 
diff --git a/apps/documenteditor/main/app/controller/Viewport.js b/apps/documenteditor/main/app/controller/Viewport.js
index 898460665..42edcf4c5 100644
--- a/apps/documenteditor/main/app/controller/Viewport.js
+++ b/apps/documenteditor/main/app/controller/Viewport.js
@@ -220,7 +220,7 @@ define([
                 this.viewport.hlayout.doLayout();
                 break;
             case 'history':
-                var panel = this.viewport.hlayout.items[1];
+                var panel = this.viewport.hlayout.getItem('history');
                 if (panel.resize.el) {
                     this.boxSdk.css('border-left', '');
                     panel.resize.el.show();
@@ -228,7 +228,7 @@ define([
                 this.viewport.hlayout.doLayout();
                 break;
             case 'leftmenu':
-                var panel = this.viewport.hlayout.items[0];
+                var panel = this.viewport.hlayout.getItem('left');
                 if (panel.resize.el) {
                     if (panel.el.width() > 40) {
                         this.boxSdk.css('border-left', '');
diff --git a/apps/documenteditor/main/app/template/HeaderFooterSettings.template b/apps/documenteditor/main/app/template/HeaderFooterSettings.template
index b63bc9bd6..c12357ac8 100644
--- a/apps/documenteditor/main/app/template/HeaderFooterSettings.template
+++ b/apps/documenteditor/main/app/template/HeaderFooterSettings.template
@@ -52,9 +52,9 @@
     </tr>
     <tr>
         <td class="padding-small">
-            <div id="headerfooter-button-top-left" style="display: inline-block; margin-right:5px;"></div>
-            <div id="headerfooter-button-top-center" style="display: inline-block; margin-right:5px;"></div>
-            <div id="headerfooter-button-top-right" style="display: inline-block; margin-right:5px;"></div>
+            <div id="headerfooter-button-top-left"></div>
+            <div id="headerfooter-button-top-center"></div>
+            <div id="headerfooter-button-top-right"></div>
         </td>
     </tr>
     <tr>
@@ -64,9 +64,9 @@
     </tr>
     <tr>
         <td class="padding-small">
-            <div id="headerfooter-button-bottom-left" style="display: inline-block; margin-right:5px;"></div>
-            <div id="headerfooter-button-bottom-center" style="display: inline-block; margin-right:5px;"></div>
-            <div id="headerfooter-button-bottom-right" style="display: inline-block; margin-right:5px;"></div>
+            <div id="headerfooter-button-bottom-left"></div>
+            <div id="headerfooter-button-bottom-center"></div>
+            <div id="headerfooter-button-bottom-right"></div>
         </td>
     </tr>
     <tr>
@@ -86,9 +86,9 @@
     </tr>
     <tr>
         <td class="padding-small">
-            <div id="headerfooter-radio-prev"  style="margin-bottom: 5px;"></div>
-            <div id="headerfooter-radio-from" style="display: inline-block;vertical-align: middle; margin-right: 2px;"></div>
-            <div id="headerfooter-spin-from" style="display: inline-block;vertical-align: middle;"></div>
+            <div id="headerfooter-radio-prev"></div>
+            <div id="headerfooter-radio-from"></div>
+            <div id="headerfooter-spin-from"></div>
         </td>
     </tr>
     <tr class="finish-cell"></tr>
diff --git a/apps/documenteditor/main/app/template/ImageSettings.template b/apps/documenteditor/main/app/template/ImageSettings.template
index af368f5f7..4495f4a15 100644
--- a/apps/documenteditor/main/app/template/ImageSettings.template
+++ b/apps/documenteditor/main/app/template/ImageSettings.template
@@ -41,15 +41,15 @@
         <td class="padding-small" width="50%">
             <label class="input-label"><%= scope.textRotate90 %></label>
             <div>
-                <div id="image-button-270" style="display: inline-block;margin-right: 4px;"></div>
-                <div id="image-button-90" style="display: inline-block;"></div>
+                <div id="image-button-270"></div>
+                <div id="image-button-90"></div>
             </div>
         </td>
         <td class="padding-small" width="50%">
             <label class="input-label"><%= scope.textFlip %></label>
             <div>
-                <div id="image-button-fliph" style="display: inline-block;margin-right: 4px;"></div>
-                <div id="image-button-flipv" style="display: inline-block;"></div>
+                <div id="image-button-fliph"></div>
+                <div id="image-button-flipv"></div>
             </div>
         </td>
     </tr>
diff --git a/apps/documenteditor/main/app/template/ImageSettingsAdvanced.template b/apps/documenteditor/main/app/template/ImageSettingsAdvanced.template
index 8af0473dc..47630167d 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" style="padding-right: 15px;">
+            <td class="padding-large padding-right">
                 <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" style="padding-right: 15px;">
+            <td class="padding-large padding-right">
                 <label class="input-label"><%= scope.textRelativeWH %></label>
                 <div id="shape-advanced-spin-height-rel"></div>
             </td>
@@ -94,7 +94,7 @@
     <div class="inner-content  padding-large">
         <div style="width: 100%;">
             <label class="input-label"><%= scope.textAngle %></label>
-            <div id="image-advanced-spin-angle" style="display: inline-block; margin-left: 5px;"></div>
+            <div id="image-advanced-spin-angle" style="display: inline-block;"></div>
         </div>
     </div>
     <div class="separator horizontal padding-large"></div>
@@ -102,7 +102,7 @@
         <table cols="2">
             <tr>
                 <td rowspan="2" class="padding-small" style="vertical-align: top;">
-                    <label class="input-label" style="margin-right: 15px;vertical-align: top;"><%= scope.textFlipped %></label>
+                    <label class="input-label flipped" style="vertical-align: top;"><%= scope.textFlipped %></label>
                 </td>
                 <td class="padding-small">
                     <div id="image-advanced-checkbox-hor"></div>
@@ -120,14 +120,14 @@
     <div class="inner-content padding-large">
         <label class="header padding-small"><%= scope.textWrap %></label>
         <div class="padding-small">
-            <div id="image-advanced-button-wrap-inline" style="display: inline-block; margin-right:7px;"></div>
-            <div id="image-advanced-button-wrap-square" style="display: inline-block; margin-right:7px;"></div>
-            <div id="image-advanced-button-wrap-tight" style="display: inline-block; margin-right:7px;"></div>
-            <div id="image-advanced-button-wrap-through" style="display: inline-block; margin-right:7px;"></div>
+            <div id="image-advanced-button-wrap-inline" class="margin-right" style="display: inline-block;"></div>
+            <div id="image-advanced-button-wrap-square" class="margin-right" style="display: inline-block;"></div>
+            <div id="image-advanced-button-wrap-tight" class="margin-right" style="display: inline-block;"></div>
+            <div id="image-advanced-button-wrap-through" class="margin-right" style="display: inline-block;"></div>
         </div>
         <div class="padding-small">
-            <div id="image-advanced-button-wrap-topbottom" style="display: inline-block; margin-right:7px;"></div>
-            <div id="image-advanced-button-wrap-infront" style="display: inline-block; margin-right:7px;"></div>
+            <div id="image-advanced-button-wrap-topbottom" class="margin-right" style="display: inline-block;"></div>
+            <div id="image-advanced-button-wrap-infront" class="margin-right" style="display: inline-block;"></div>
             <div id="image-advanced-button-wrap-behind" style="display: inline-block;"></div>
         </div>
     </div>
diff --git a/apps/documenteditor/main/app/template/MailMerge.template b/apps/documenteditor/main/app/template/MailMerge.template
index 1d7d07e5f..69b5c8410 100644
--- a/apps/documenteditor/main/app/template/MailMerge.template
+++ b/apps/documenteditor/main/app/template/MailMerge.template
@@ -32,11 +32,11 @@
     </tr>
     <tr>
         <td class="padding-small">
-            <div id="mmerge-button-first" style="display: inline-block;margin-right: 4px;"></div>
-            <div id="mmerge-button-prev" style="display: inline-block;margin-right: 4px;"></div>
-            <div id="mmerge-field-num" style="display:inline-block;vertical-align: middle;"></div>
-            <div id="mmerge-button-next" style="display: inline-block;margin-left: 4px;"></div>
-            <div id="mmerge-button-last" style="display: inline-block;margin-left: 4px;"></div>
+            <div id="mmerge-button-first"></div>
+            <div id="mmerge-button-prev"></div>
+            <div id="mmerge-field-num"></div>
+            <div id="mmerge-button-next"></div>
+            <div id="mmerge-button-last"></div>
         </td>
     </tr>
     <tr>
@@ -62,12 +62,12 @@
     </tr>
     <tr>
         <td class="padding-large">
-            <div id="mmerge-radio-all" style="margin-bottom: 5px;"></div>
-            <div id="mmerge-radio-current"  style="margin-bottom: 5px;"></div>
-            <div id="mmerge-radio-from-to" style="display: inline-block;vertical-align: middle; margin-right: 2px;"></div>
-            <div id="mmerge-field-from" style="display: inline-block;vertical-align: middle;"></div>
-            <label style="width: 30px; text-align: right; vertical-align: middle; margin-right: 2px;"><%= scope.textTo %></label>
-            <div id="mmerge-field-to" style="display: inline-block;vertical-align: middle;"></div>
+            <div id="mmerge-radio-all"></div>
+            <div id="mmerge-radio-current"></div>
+            <div id="mmerge-radio-from-to"></div>
+            <div id="mmerge-field-from"></div>
+            <label class="text-to-label"><%= scope.textTo %></label>
+            <div id="mmerge-field-to"></div>
         </td>
     </tr>
 </table>
@@ -77,7 +77,7 @@
             <button type="button" class="btn btn-text-default" id="mmerge-button-download" style="width:90px;" data-hint="1" data-hint-direction="bottom" data-hint-offset="big"><%= scope.textDownload %></button>
             <button type="button" class="btn btn-text-default hidden" id="mmerge-button-merge" style="width:90px;" data-hint="1" data-hint-direction="bottom" data-hint-offset="big"><%= scope.textMerge %></button>
         </td>
-        <td width="50%" style="text-align: right;">
+        <td class="portal-button" width="50%">
             <button type="button" class="btn btn-text-default" id="mmerge-button-portal" style="width:90px;" data-hint="1" data-hint-direction="bottom" data-hint-offset="big"><%= scope.textPortal %></button>
         </td>
     </tr>
diff --git a/apps/documenteditor/main/app/template/ParagraphSettings.template b/apps/documenteditor/main/app/template/ParagraphSettings.template
index 1d4a607b6..e778772e5 100644
--- a/apps/documenteditor/main/app/template/ParagraphSettings.template
+++ b/apps/documenteditor/main/app/template/ParagraphSettings.template
@@ -73,7 +73,7 @@
     <tr class="text-only">
         <td class="padding-small" colspan=2>
             <div id="paragraph-color-btn" style="display: inline-block;"></div>
-            <label class="input-label" style="margin-left: 5px;"><%= scope.textBackColor %></label>
+            <label class="input-label margin"><%= scope.textBackColor %></label>
         </td>
     </tr>
     <tr>
diff --git a/apps/documenteditor/main/app/template/ParagraphSettingsAdvanced.template b/apps/documenteditor/main/app/template/ParagraphSettingsAdvanced.template
index 22de247ca..e955e7855 100644
--- a/apps/documenteditor/main/app/template/ParagraphSettingsAdvanced.template
+++ b/apps/documenteditor/main/app/template/ParagraphSettingsAdvanced.template
@@ -5,18 +5,18 @@
                     <label class="input-label"><%= scope.textAlign %></label>
                     <div id="paragraphadv-spin-text-alignment"></div>
                 </div>
-                <div class="padding-large text-only" style="float: right;">
+                <div class="padding-large text-only outline-level">
                     <label class="input-label"><%= scope.strIndentsOutlinelevel %></label>
                     <div id="paragraphadv-spin-outline-level"></div>
                 </div>
             </div>
             <div><label class="header padding-very-small"><%= scope.strIndent %></label></div>
             <div>
-                <div class="padding-large" style="display: inline-block;margin-right: 3px;">
+                <div class="padding-large margin-right" style="display: inline-block;">
                  <label class="input-label"><%= scope.strIndentsLeftText %></label>
                     <div id="paragraphadv-spin-indent-left"></div>
                 </div><!--
-             --><div class="padding-large" style="display: inline-block;margin-right: 3px;">
+             --><div class="padding-large margin-right" style="display: inline-block;">
                     <label class="input-label"><%= scope.strIndentsRightText %></label>
                     <div id="paragraphadv-spin-indent-right"></div>
                 </div><!--
@@ -25,18 +25,18 @@
                         <label class="input-label"><%= scope.strIndentsSpecial %></label>
                     </div>
                 <div>
-                        <div id="paragraphadv-spin-special" style="display: inline-block; margin-right: 3px;"></div><!--
+                        <div id="paragraphadv-spin-special" class="margin-right" style="display: inline-block;"></div><!--
                      --><div id="paragraphadv-spin-special-by" style="display: inline-block;"></div>
                     </div>
                 </div>
             </div>
             <div><label class="header padding-very-small"><%= scope.strSpacing %></label></div>
             <div>
-                <div style="display: inline-block;margin-right: 3px;">
+                <div class="margin-right" style="display: inline-block;">
                     <label class="input-label"><%= scope.strIndentsSpacingBefore %></label>
                     <div id="paragraphadv-spin-spacing-before"></div>
                 </div><!--
-             --><div style="display: inline-block;margin-right: 3px;">
+             --><div class="margin-right" style="display: inline-block;">
                     <label class="input-label"><%= scope.strIndentsSpacingAfter %></label>
                     <div id="paragraphadv-spin-spacing-after"></div>
                 </div><!--
@@ -45,7 +45,7 @@
                         <label class="input-label"><%= scope.strIndentsLineSpacing %></label>
                     </div>
                     <div>
-                        <div id="paragraphadv-spin-line-rule" style="display: inline-block;margin-right: 3px;"></div><!--
+                        <div id="paragraphadv-spin-line-rule" class="margin-right" style="display: inline-block;"></div><!--
                      --><div id="paragraphadv-spin-line-height" style="display: inline-block;"></div>
                     </div>
                 </div>
@@ -92,7 +92,7 @@
         <div style="width: 100%;" class="padding-small">
             <label class="input-label"><%= scope.textBorderWidth %></label>
             <div id="paragraphadv-combo-border-size" style="display: inline-block; vertical-align: middle; width: 93px;"></div>
-            <div style="display: inline-block; vertical-align: middle; padding-left: 20px;">
+            <div class="border-color" style="display: inline-block; vertical-align: middle;">
                 <label class="input-label" ><%= scope.textBorderColor %></label>
                 <div id="paragraphadv-border-color-btn" style="display: inline-block;"></div>
             </div>
@@ -100,7 +100,7 @@
         <label class="input-label padding-small" style="width: 100%;"><%= scope.textBorderDesc %></label>
         <div style="width: 100%;" class="padding-large">
             <div id="id-deparagraphstyler" style="display: inline-block; vertical-align: middle; width: 200px; height: 170px;outline: 1px solid #ccc; margin-top: 2px;"></div>
-            <div style="display: inline-block; vertical-align: top; width: 76px; text-align: right; height: 170px; padding-top: 0px; margin-left: 9px;">
+            <div class="border-types" style="display: inline-block; vertical-align: top; width: 76px; height: 170px; padding-top: 0px;">
                 <div id="paragraphadv-button-border-top" style="display: inline-block;"></div>
                 <div id="paragraphadv-button-border-inner-hor" style="display: inline-block;"></div>
                 <div id="paragraphadv-button-border-bottom" style="display: inline-block;"></div>
@@ -112,7 +112,7 @@
             </div>
         </div>
         <div style="width: 100%;" class="padding-small">
-            <label class="input-label" style="margin-right: 5px;"><%= scope.textBackColor %></label>
+            <label class="input-label back-color"><%= scope.textBackColor %></label>
             <div id="paragraphadv-back-color-btn" style="display: inline-block;"></div>
         </div>
     </div>
@@ -127,7 +127,7 @@
                 <td class="padding-small">
                     <div id="paragraphadv-checkbox-strike"></div>
                 </td>
-                <td class="padding-small" style="padding-left: 40px;">
+                <td class="padding-small padding-left">
                     <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" style="padding-left: 40px;">
+                <td class="padding-small padding-left">
                     <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" style="padding-left: 40px;">
+                <td class="padding-large padding-left">
                     <div id="paragraphadv-checkbox-all-caps"></div>
                 </td>
             </tr>
@@ -156,7 +156,7 @@
                 <label class="input-label"><%= scope.textSpacing %></label>
                 <div id="paragraphadv-spin-spacing"></div>
             </div>
-            <div class="text-only" style="display: inline-block; margin-left: 15px;">
+            <div class="text-only position" style="display: inline-block;">
                 <label class="input-label"><%= scope.textPosition %></label>
                 <div id="paragraphadv-spin-position"></div>
             </div>
@@ -166,7 +166,7 @@
         </div>
         <div class="padding-large">
             <label class="input-label"><%= scope.textLigatures %></label>
-            <div id="paragraphadv-cmb-ligatures" style="display: inline-block; vertical-align: baseline; margin-left: 5px;"></div>
+            <div id="paragraphadv-cmb-ligatures" class="ligatures" style="display: inline-block; vertical-align: baseline;"></div>
         </div>
         <div class="doc-content-color" style="outline: 1px solid #cbcbcb;">
             <div id="paragraphadv-font-img" style="width: 300px; height: 80px; position: relative; margin: 0 auto;"></div>
@@ -181,11 +181,11 @@
 
             </div>
             <div>
-                <div class="padding-large" style="display: inline-block; margin-right: 8px;">
+                <div class="padding-large tab-position" style="display: inline-block;">
                     <label class="input-label"><%= scope.textTabPosition %></label>
                     <div id="paraadv-spin-tab"></div>
                 </div>
-                <div class="padding-large" style=" display: inline-block; margin-right: 9px;">
+                <div class="padding-large margin-right" style=" display: inline-block;">
                     <label class="input-label"><%= scope.textAlign %></label>
                     <div id="paraadv-cmb-align"></div>
                 </div>
@@ -200,8 +200,8 @@
                 </div>
             </div>
             <div>
-                <button type="button" class="btn btn-text-default" id="paraadv-button-add-tab" style="width:108px;margin-right: 9px; display: inline-block;"><%= scope.textSet %></button>
-                <button type="button" class="btn btn-text-default" id="paraadv-button-remove-tab" style="width:108px;margin-right: 9px; display: inline-block;"><%= scope.textRemove %></button>
+                <button type="button" class="btn btn-text-default margin-right" id="paraadv-button-add-tab" style="width: 108px; display: inline-block;"><%= scope.textSet %></button>
+                <button type="button" class="btn btn-text-default margin-right" id="paraadv-button-remove-tab" style="width:108px; display: inline-block;"><%= scope.textRemove %></button>
                 <button type="button" class="btn btn-text-default" id="paraadv-button-remove-all" style="width:108px;display: inline-block;"><%= scope.textRemoveAll %></button>
             </div>
     </div>
@@ -213,7 +213,7 @@
                     <label class="input-label"><%= scope.textTop %></label>
                     <div id="paraadv-number-margin-top"></div>
                 </div>
-                <div class="padding-small" style="display: inline-block; padding-left: 15px;">
+                <div class="padding-small padding-left" 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" style="display: inline-block; padding-left: 15px;">
+                <div class="padding-small padding-left" 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/template/ShapeSettings.template b/apps/documenteditor/main/app/template/ShapeSettings.template
index fe544f539..8cde82cf0 100644
--- a/apps/documenteditor/main/app/template/ShapeSettings.template
+++ b/apps/documenteditor/main/app/template/ShapeSettings.template
@@ -26,7 +26,7 @@
                         <div id="shape-combo-fill-type" style="width: 90px;"></div>
                     </td>
                     <td rowspan="2">
-                        <div style="width: 90px; height: 80px; padding: 14px 20px; border: 1px solid #AFAFAF; border-radius: 2px; background: #ffffff;float:right;">
+                        <div class="texture-img">
                             <div id="shape-texture-img" style="width: 50px;height: 50px;"></div>
                         </div>
                     </td>
@@ -44,11 +44,11 @@
                 <div id="shape-combo-pattern" style="width: 100%; height: 42px; margin-bottom: 8px;"></div>
                 <div style="width: 100%; height: 25px; margin-bottom: 8px;">
                     <label class="input-label" style="margin-top: 3px;"><%= scope.strForeground %></label>
-                    <div id="shape-foreground-color-btn" style="display: inline-block; float:right;"></div>
+                    <div id="shape-foreground-color-btn"></div>
                 </div>
                 <div style="width: 100%; height: 25px;">
                     <label class="input-label" style="margin-top: 3px;"><%= scope.strBackground %></label>
-                    <div id="shape-background-color-btn" style="display: inline-block; float:right;"></div>
+                    <div id="shape-background-color-btn"></div>
                 </div>
             </div>
             <div id="shape-panel-gradient-fill" class="settings-hidden padding-small" style="width: 100%;">
@@ -61,7 +61,7 @@
                             </div>
                         </td>
                         <td rowspan="2" style="width: 100%;">
-                            <div style="float: right;">
+                            <div class="shape-direction">
                                 <label class="input-label"><%= scope.textDirection %></label>
                                 <div id="shape-button-direction"></div>
                             </div>
@@ -69,7 +69,7 @@
                     </tr>
                     <tr valign="bottom">
                         <td>
-                            <label class="input-label" style="margin-right: 5px;margin-bottom: 3px;"><%= scope.textAngle %></label>
+                            <label class="input-label angle-label"><%= scope.textAngle %></label>
                         </td>
                         <td>
                             <div id="shape-spin-gradient-angle" style="display: inline-block; width: 60px;"></div>
@@ -86,7 +86,7 @@
                         <label class="input-label" style=""><%= scope.strColor %></label>
                         <div id="shape-gradient-color-btn"></div>
                     </div>
-                    <div style="margin-left: 10px;">
+                    <div class="gradient-position">
                         <label class="input-label" style=""><%= scope.textPosition %></label>
                         <div id="shape-gradient-position"></div>
                     </div>
@@ -101,14 +101,14 @@
     </tr>
     <tr class="no-form">
         <td>
-            <div class="padding-small" id="shape-panel-transparent-fill" style="width: 100%;">
-                <label class="header" style="display:block;"><%= scope.strTransparency %></label>
-                <div style="display: inline-block; margin-top: 3px;">
+            <div class="padding-small" id="shape-panel-transparent-fill">
+                <label class="header"><%= scope.strTransparency %></label>
+                <div class="shape-slider">
                     <label id="shape-lbl-transparency-start">0</label>
-                    <div id="shape-slider-transparency" style="display: inline-block;margin: 0 4px; vertical-align: middle;"></div>
+                    <div id="shape-slider-transparency"></div>
                     <label id="shape-lbl-transparency-end">100</label>
                 </div>
-                <div id="shape-spin-transparency" style="display: inline-block;float: right;"></div>
+                <div id="shape-spin-transparency"></div>
             </div>
         </td>
     </tr>
@@ -159,15 +159,15 @@
                     <td class="padding-small" width="50%">
                         <label class="input-label"><%= scope.textRotate90 %></label>
                         <div>
-                            <div id="shape-button-270" style="display: inline-block;margin-right: 4px;"></div>
-                            <div id="shape-button-90" style="display: inline-block;"></div>
+                            <div id="shape-button-270"></div>
+                            <div id="shape-button-90"></div>
                         </div>
                     </td>
                     <td class="padding-small" width="50%">
                         <label class="input-label"><%= scope.textFlip %></label>
                         <div>
-                            <div id="shape-button-fliph" style="display: inline-block;margin-right: 4px;"></div>
-                            <div id="shape-button-flipv" style="display: inline-block;"></div>
+                            <div id="shape-button-fliph"></div>
+                            <div id="shape-button-flipv"></div>
                         </div>
                     </td>
                 </tr>
@@ -199,8 +199,8 @@
     </tr>
     <tr class="change-type">
         <td class="padding-small">
-            <label class="header" style="margin-top: 3px;"><%= scope.strChange %></label>
-            <div id="shape-btn-change" style="display: inline-block; float:right;"></div>
+            <label class="header"><%= scope.strChange %></label>
+            <div id="shape-btn-change"></div>
         </td>
     </tr>
     <tr class="no-form">
diff --git a/apps/documenteditor/main/app/template/StatusBar.template b/apps/documenteditor/main/app/template/StatusBar.template
index 18bd8e80d..0b69c92fb 100644
--- a/apps/documenteditor/main/app/template/StatusBar.template
+++ b/apps/documenteditor/main/app/template/StatusBar.template
@@ -1,9 +1,9 @@
 
 <div class="statusbar" style="display:table;">
     <div class="status-group dropup">
-        <label id="label-pages" class="status-label dropdown-toggle margin-top-large" style="margin-left: 40px;" data-toggle="dropdown" data-hint="0" data-hint-direction="top"><%= textPageNumber %></label>
+        <label id="label-pages" class="status-label dropdown-toggle margin-top-large" data-toggle="dropdown" data-hint="0" data-hint-direction="top"><%= textPageNumber %></label>
         <div id="status-goto-box" class="dropdown-menu">
-            <label style="float:left;line-height:22px;"><%= textGotoPage %></label>
+            <label><%= textGotoPage %></label>
             <div id="status-goto-page" style="display:inline-block;"></div>
         </div>
     </div>
@@ -35,6 +35,6 @@
                 <label id="label-zoom" class="status-label">Zoom 100%</label>
             </div>
         </div>
-        <button id="btn-zoom-up" type="button" class="btn small btn-toolbar margin-top-small" style="margin-right:40px;"><span class="icon toolbar__icon btn-zoomup">&nbsp;</span></button>
+        <button id="btn-zoom-up" type="button" class="btn small btn-toolbar margin-top-small"><span class="icon toolbar__icon btn-zoomup">&nbsp;</span></button>
     </div>
 </div>
diff --git a/apps/documenteditor/main/app/template/TableSettings.template b/apps/documenteditor/main/app/template/TableSettings.template
index 43682ae7c..46a015fec 100644
--- a/apps/documenteditor/main/app/template/TableSettings.template
+++ b/apps/documenteditor/main/app/template/TableSettings.template
@@ -53,10 +53,10 @@
     </tr>
     <tr>
         <td class="padding-small" colspan=2>
-            <div id="table-combo-border-size" style="display: inline-block; vertical-align: middle; width: 93px;"></div>
-            <div style="display: inline-block; float:right;vertical-align: middle;">
-                <label class="input-label" style="margin-right: 5px;"><%= scope.textBorderColor %></label>
-                <div id="table-border-color-btn" style="display: inline-block;"></div>
+            <div id="table-combo-border-size"></div>
+            <div class="table-color">
+                <label class="input-label"><%= scope.textBorderColor %></label>
+                <div id="table-border-color-btn"></div>
             </div>
         </td>
     </tr>
@@ -85,7 +85,7 @@
     </tr>
     <tr>
         <td class="padding-small" colspan=2 align="right">
-            <label class="input-label" style="margin-right: 5px;"><%= scope.textBackColor %></label>
+            <label class="input-label margin"><%= scope.textBackColor %></label>
             <div id="table-back-color-btn" style="display: inline-block;text-align:left;"></div>
         </td>
     </tr>
@@ -112,15 +112,15 @@
     <tr>
         <td class="padding-small" colspan=2>
             <label style="margin-top: 3px;"><%= scope.textHeight %></label>
-            <div id="table-btn-distrub-rows" style="display: inline-block; float:right; margin-left: 4px;"></div>
-            <div id="table-spin-cell-height" style="display: inline-block; float:right;"></div>
+            <div id="table-btn-distrub-rows"></div>
+            <div id="table-spin-cell-height"></div>
         </td>
     </tr>
     <tr>
         <td class="padding-small" colspan=2>
             <label style="margin-top: 3px;"><%= scope.textWidth %></label>
-            <div id="table-btn-distrub-cols" style="display: inline-block; float:right; margin-left: 4px;"></div>
-            <div id="table-spin-cell-width" style="display: inline-block; float:right;"></div>
+            <div id="table-btn-distrub-cols"></div>
+            <div id="table-spin-cell-width"></div>
         </td>
     </tr>
     <tr>
diff --git a/apps/documenteditor/main/app/template/TableSettingsAdvanced.template b/apps/documenteditor/main/app/template/TableSettingsAdvanced.template
index ad82ecbe2..1b1c8edc4 100644
--- a/apps/documenteditor/main/app/template/TableSettingsAdvanced.template
+++ b/apps/documenteditor/main/app/template/TableSettingsAdvanced.template
@@ -12,7 +12,7 @@
                 </td>
                 <td class="padding-small">
                     <label class="input-label"><%= scope.textWidth %></label>
-                    <div id="tableadv-number-width" style="margin-right: 10px;"></div>
+                    <div id="tableadv-number-width" class="margin-right"></div>
                 </td>
                 <td class="padding-small">
                     <label class="input-label"><%= scope.textMeasure %></label>
@@ -88,7 +88,7 @@
                 </td>
                 <td class="padding-large">
                     <label class="input-label"><%= scope.textPrefWidth %></label>
-                    <div id="tableadv-number-prefwidth" style="margin-right: 10px;"></div>
+                    <div id="tableadv-number-prefwidth" class="margin-right"></div>
                 </td>
                 <td class="padding-large">
                     <label class="input-label"><%= scope.textMeasure %></label>
@@ -147,18 +147,18 @@
 <div id="id-adv-table-wrap" class="settings-panel">
     <div class="inner-content padding-large">
         <label class="header padding-small" style="display: block;"><%= scope.textWrappingStyle %></label>
-        <div id="tableadv-button-wrap-none" style="display: inline-block; margin-right:5px;"></div>
-        <div id="tableadv-button-wrap-parallel" style="display: inline-block; margin-right:5px;"></div>
+        <div id="tableadv-button-wrap-none" class="margin-right" style="display: inline-block;"></div>
+        <div id="tableadv-button-wrap-parallel" class="margin-right" style="display: inline-block;"></div>
     </div>
     <div class="padding-small"></div>
     <div class="inner-content">
         <div id="tableadv-panel-align" style="width: 100%;">
             <label class="header padding-small"><%= scope.textAlign %></label>
             <div class="padding-large">
-                <div id="tableadv-button-align-left" style="display: inline-block; margin-right:5px;"></div>
-                <div id="tableadv-button-align-center" style="display: inline-block; margin-right:5px;"></div>
-                <div id="tableadv-button-align-right" style="display: inline-block; margin-right:5px;"></div>
-                <div style="display: inline-block; vertical-align: bottom; margin-left: 20px; margin-bottom: 1px;">
+                <div id="tableadv-button-align-left" class="margin-right" style="display: inline-block;"></div>
+                <div id="tableadv-button-align-center" class="margin-right" style="display: inline-block;"></div>
+                <div id="tableadv-button-align-right" class="margin-right" style="display: inline-block;"></div>
+                <div class="number-indent" style="display: inline-block; vertical-align: bottom; margin-bottom: 1px;">
                     <label class="input-label" style="display: block;"><%= scope.textIndLeft %></label>
                     <div id="tableadv-number-indent"></div>
                 </div>
@@ -200,7 +200,7 @@
         <div style="width: 100%;">
             <label class="input-label"><%= scope.textBorderWidth %></label>
             <div id="tableadv-combo-border-size" style="display: inline-block; vertical-align: middle; width: 93px;"></div>
-            <div style="display: inline-block; float:right;vertical-align: middle;">
+            <div class="border-color" style="display: inline-block; vertical-align: middle;">
                 <label class="input-label" ><%= scope.textBorderColor %></label>
                 <div id="tableadv-border-color-btn" style="display: inline-block;"></div>
             </div>
@@ -210,7 +210,7 @@
         <label class="input-label padding-large" style="width: 100%;"><%= scope.textBorderDesc %></label>
         <div id="tableadv-panel-borders" style="width: 100%;" class="padding-large">
             <div id="id-detablestyler" style="display: inline-block; vertical-align: middle; width: 200px; height: 200px;outline: 1px solid #ccc;"></div>
-            <div style="display: inline-block; vertical-align: middle; width: 76px; height: 200px; padding-top: 10px; padding-left: 10px;">
+            <div class="border-types" style="display: inline-block; vertical-align: middle; width: 76px; height: 200px; padding-top: 10px;">
                 <div id="tableadv-button-border-all"></div>
                 <div id="tableadv-button-border-none"></div>
                 <div id="tableadv-button-border-inner"></div>
@@ -236,7 +236,7 @@
                 <div id="tableadv-button-back-color" style="display: inline-block;"></div>
             </div>
             <div id="tableadv-panel-table-back" style="display: inline-block;">
-                <label class="input-label" style="margin-right: 5px;"><%= scope.textTableBackColor %></label>
+                <label class="input-label back-color"><%= scope.textTableBackColor %></label>
                 <div id="tableadv-button-table-back-color" style="display: inline-block;"></div>
             </div>
         </div>
diff --git a/apps/documenteditor/main/app/template/TextArtSettings.template b/apps/documenteditor/main/app/template/TextArtSettings.template
index 7ca7e0e6c..f33e1ab9c 100644
--- a/apps/documenteditor/main/app/template/TextArtSettings.template
+++ b/apps/documenteditor/main/app/template/TextArtSettings.template
@@ -39,7 +39,7 @@
                             </div>
                         </td>
                         <td rowspan="2" style="width: 100%;">
-                            <div style="float: right;">
+                            <div class="textart-direction">
                                 <label class="input-label"><%= scope.textDirection %></label>
                                 <div id="textart-button-direction"></div>
                             </div>
@@ -47,7 +47,7 @@
                     </tr>
                     <tr valign="bottom">
                         <td>
-                            <label class="input-label" style="margin-right: 5px;margin-bottom: 3px;"><%= scope.textAngle %></label>
+                            <label class="input-label angle-label"><%= scope.textAngle %></label>
                         </td>
                         <td>
                             <div id="textart-spin-gradient-angle" style="display: inline-block; width: 60px;"></div>
@@ -64,7 +64,7 @@
                         <label class="input-label" style=""><%= scope.strColor %></label>
                         <div id="textart-gradient-color-btn"></div>
                     </div>
-                    <div style="margin-left: 10px;">
+                    <div class="gradient-position">
                         <label class="input-label" style=""><%= scope.textPosition %></label>
                         <div id="textart-gradient-position"></div>
                     </div>
@@ -86,7 +86,7 @@
                     <div id="textart-slider-transparency" style="display: inline-block;margin: 0 4px; vertical-align: middle;"></div>
                     <label id="textart-lbl-transparency-end">100</label>
                 </div>
-                <div id="textart-spin-transparency" style="display: inline-block;float: right;"></div>
+                <div id="textart-spin-transparency"></div>
             </div>
         </td>
     </tr>
diff --git a/apps/documenteditor/main/app/view/BookmarksDialog.js b/apps/documenteditor/main/app/view/BookmarksDialog.js
index 1d69c9716..5a9336441 100644
--- a/apps/documenteditor/main/app/view/BookmarksDialog.js
+++ b/apps/documenteditor/main/app/view/BookmarksDialog.js
@@ -52,7 +52,8 @@ define([
         options: {
             contentWidth: 310,
             height: 366,
-            buttons: null
+            buttons: null,
+            id: 'window-bookmarks'
         },
 
         initialize : function(options) {
@@ -72,13 +73,13 @@ define([
                                     '</tr>',
                                     '<tr>',
                                         '<td class="padding-large">',
-                                            '<div id="bookmarks-txt-name" style="display:inline-block;vertical-align: top;margin-right: 10px;"></div>',
+                                            '<div id="bookmarks-txt-name" class="margin-right" style="display:inline-block;vertical-align: top;"></div>',
                                             '<button type="button" result="add" class="btn btn-text-default" id="bookmarks-btn-add" style="vertical-align: top;">', me.textAdd,'</button>',
                                         '</td>',
                                     '</tr>',
                                     '<tr>',
                                         '<td class="padding-extra-small">',
-                                            '<label class="header" style="margin-right: 10px;">', me.textSort,'</label>',
+                                            '<label class="header margin-right">', me.textSort,'</label>',
                                             '<div id="bookmarks-radio-name"></div>',
                                             '<div id="bookmarks-radio-location"></div>',
                                         '</td>',
@@ -90,15 +91,15 @@ define([
                                     '</tr>',
                                     '<tr>',
                                         '<td class="padding-large">',
-                                            '<button type="button" class="btn btn-text-default" id="bookmarks-btn-goto" style="margin-right: 5px;">', me.textGoto,'</button>',
+                                            '<button type="button" class="btn btn-text-default" id="bookmarks-btn-goto">', me.textGoto,'</button>',
                                             '<div style="display: inline-block; position: relative;">',
                                                 '<button type="button" class="btn btn-text-default auto dropdown-toggle move-focus" id="bookmarks-btn-link" style="min-width: 75px;" data-toggle="dropdown">', me.textGetLink,'</button>',
                                                 '<div id="id-clip-copy-box" class="dropdown-menu" style="width: 291px; left: -80px; padding: 10px;">',
                                                     '<div id="id-dlg-clip-copy"></div>',
-                                                    '<button id="id-dlg-copy-btn" class="btn btn-text-default" style="margin-left: 5px; width: 86px;">' + me.textCopy + '</button>',
+                                                    '<button id="id-dlg-copy-btn" class="btn btn-text-default" style="width: 86px;">' + me.textCopy + '</button>',
                                                 '</div>',
                                             '</div>',
-                                            '<button type="button" class="btn btn-text-default" id="bookmarks-btn-delete" style="float: right;">', me.textDelete,'</button>',
+                                            '<button type="button" class="btn btn-text-default" id="bookmarks-btn-delete">', me.textDelete,'</button>',
                                         '</td>',
                                     '</tr>',
                                     '<tr>',
diff --git a/apps/documenteditor/main/app/view/CaptionDialog.js b/apps/documenteditor/main/app/view/CaptionDialog.js
index ca5c85884..c7eae492b 100644
--- a/apps/documenteditor/main/app/view/CaptionDialog.js
+++ b/apps/documenteditor/main/app/view/CaptionDialog.js
@@ -49,7 +49,8 @@ define([
     DE.Views.CaptionDialog = Common.Views.AdvancedSettingsWindow.extend(_.extend({
         options: {
             contentWidth: 351,
-            height: 350
+            height: 350,
+            id: 'window-caption'
         },
 
         initialize : function(options) {
@@ -65,7 +66,7 @@ define([
                                     '<tr>',
                                         '<td colspan="3" class="padding-small">',
                                             '<label class="input-label">', me.textCaption,'</label>',
-                                            '<div id="caption-txt-caption" style="margin-right: 10px;"></div>',
+                                            '<div id="caption-txt-caption" class="margin-right"></div>',
                                         '</td>',
                                         '<td class="padding-small">',
                                             '<label class="input-label">', me.textInsert,'</label>',
@@ -75,10 +76,10 @@ define([
                                     '<tr>',
                                         '<td colspan="2" class="padding-small">',
                                             '<label class="input-label">', me.textLabel,'</label>',
-                                            '<div id="caption-combo-label" class="input-group-nr" style="width:160px;margin-right: 10px;"></div>',
+                                            '<div id="caption-combo-label" class="input-group-nr margin-right" style="width:160px;"></div>',
                                         '</td>',
                                         '<td class="padding-small" style="vertical-align: bottom;">',
-                                            '<button type="button" result="add" class="btn btn-text-default" id="caption-btn-add" style="margin-right: 10px;">', me.textAdd,'</button>',
+                                            '<button type="button" result="add" class="btn btn-text-default margin-right" id="caption-btn-add">', me.textAdd,'</button>',
                                         '</td>',
                                         '<td class="padding-small" style="vertical-align: bottom;">',
                                             '<button type="button" result="add" class="btn btn-text-default" id="caption-btn-delete">', me.textDelete,'</button>',
@@ -107,7 +108,7 @@ define([
                                     '<tr>',
                                         '<td colspan="2" class="padding-small">',
                                             '<label class="input-label">', me.textChapter,'</label>',
-                                            '<div id="caption-combo-chapter" class="input-group-nr" style="width:160px;margin-right: 10px;"></div>',
+                                            '<div id="caption-combo-chapter" class="input-group-nr margin-right" style="width:160px;"></div>',
                                         '</td>',
                                         '<td colspan="2" class="padding-small">',
                                             '<label class="input-label" >', me.textSeparator,'</label>',
diff --git a/apps/documenteditor/main/app/view/CrossReferenceDialog.js b/apps/documenteditor/main/app/view/CrossReferenceDialog.js
index fa8174f5c..bf58e6bc8 100644
--- a/apps/documenteditor/main/app/view/CrossReferenceDialog.js
+++ b/apps/documenteditor/main/app/view/CrossReferenceDialog.js
@@ -49,7 +49,8 @@ define([
             height: 410,
             style: 'min-width: 240px;',
             cls: 'modal-dlg',
-            modal: false
+            modal: false,
+            id: 'window-cross-ref'
         },
 
         initialize : function(options) {
@@ -62,11 +63,11 @@ define([
                 '<div class="box">',
                     '<table cols="2" style="width: 100%;">',
                         '<tr>',
-                            '<td style="padding-right: 5px;">',
+                            '<td class="padding-right">',
                                 '<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 style="padding-left: 5px;">',
+                            '<td class="padding-left">',
                                 '<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>',
@@ -83,7 +84,7 @@ define([
                         '</tr>',
                         '<tr>',
                             '<td colspan="2" style="padding-bottom: 10px;">',
-                                '<div id="id-dlg-cross-separate" style="display: inline-block;vertical-align: middle;margin-right: 10px;"></div>',
+                                '<div id="id-dlg-cross-separate" style="display: inline-block;vertical-align: middle;"></div>',
                                 '<div id="id-dlg-cross-separator" style="display: inline-block;vertical-align: middle;"></div>',
                             '</td>',
                         '</tr>',
diff --git a/apps/documenteditor/main/app/view/CustomColumnsDialog.js b/apps/documenteditor/main/app/view/CustomColumnsDialog.js
index 8e9eacafb..f37e99785 100644
--- a/apps/documenteditor/main/app/view/CustomColumnsDialog.js
+++ b/apps/documenteditor/main/app/view/CustomColumnsDialog.js
@@ -50,6 +50,7 @@ define([
             header: true,
             style: 'min-width: 216px;',
             cls: 'modal-dlg',
+            id: 'window-custom-columns',
             buttons: ['ok', 'cancel']
         },
 
@@ -61,10 +62,10 @@ define([
             this.template = [
                 '<div class="box" style="height: 90px;">',
                     '<div class="input-row" style="margin: 10px 0;">',
-                        '<label class="input-label">' + this.textColumns + '</label><div id="custom-columns-spin-num" style="float: right;"></div>',
+                        '<label class="input-label">' + this.textColumns + '</label><div id="custom-columns-spin-num"></div>',
                     '</div>',
                     '<div class="input-row" style="margin: 10px 0;">',
-                        '<label class="input-label">' + this.textSpacing + '</label><div id="custom-columns-spin-spacing" style="float: right;"></div>',
+                        '<label class="input-label">' + this.textSpacing + '</label><div id="custom-columns-spin-spacing"></div>',
                     '</div>',
                     '<div class="input-row" style="margin: 10px 0;">',
                         '<div id="custom-columns-separator"></div>',
diff --git a/apps/documenteditor/main/app/view/DateTimeDialog.js b/apps/documenteditor/main/app/view/DateTimeDialog.js
index 9cc15d177..7ae3512ee 100644
--- a/apps/documenteditor/main/app/view/DateTimeDialog.js
+++ b/apps/documenteditor/main/app/view/DateTimeDialog.js
@@ -50,6 +50,7 @@ define([
             width: 350,
             style: 'min-width: 230px;',
             cls: 'modal-dlg',
+            id: 'window-date-time',
             buttons: ['ok', 'cancel']
         },
 
@@ -73,7 +74,7 @@ define([
                     '<div id="datetime-dlg-format" class="" style="margin-bottom: 10px;width: 100%; height: 162px; overflow: hidden;"></div>',
                     '<div class="input-row">',
                         '<div id="datetime-dlg-update" style="margin-top: 3px;"></div>',
-                        '<button type="button" class="btn btn-text-default auto" id="datetime-dlg-default" style="float: right;">' + this.textDefault + '</button>',
+                        '<button type="button" class="btn btn-text-default auto" id="datetime-dlg-default">' + this.textDefault + '</button>',
                     '</div>',
                 '</div>'
             ].join('');
diff --git a/apps/documenteditor/main/app/view/FileMenuPanels.js b/apps/documenteditor/main/app/view/FileMenuPanels.js
index 89259450d..2700d5389 100644
--- a/apps/documenteditor/main/app/view/FileMenuPanels.js
+++ b/apps/documenteditor/main/app/view/FileMenuPanels.js
@@ -397,6 +397,9 @@ define([
                 '<tr>',
                     '<td colspan="2"><div id="fms-chb-use-alt-key"></div></td>',
                 '</tr>',
+                '<tr>',
+                    '<td colspan="2"><div id="fms-chb-rtl-ui"></div></td>',
+                '</tr>',
                 '<tr class="quick-print">',
                     '<td colspan="2"><div style="display: flex;"><div id="fms-chb-quick-print"></div>',
                     '<span style ="display: flex; flex-direction: column;"><label><%= scope.txtQuickPrint %></label>',
@@ -406,8 +409,8 @@ define([
                 '<tr class="themes">',
                     '<td><label><%= scope.strTheme %></label></td>',
                     '<td>',
-                        '<div><div id="fms-cmb-theme" style="display: inline-block; margin-right: 15px;vertical-align: middle;"></div>',
-                        '<div id="fms-chb-dark-mode" style="display: inline-block; vertical-align: middle;margin-top: 2px;"></div></div></td>',
+                        '<div><div id="fms-cmb-theme"></div>',
+                        '<div id="fms-chb-dark-mode"></div></div></td>',
                 '</tr>',
                 '<tr class="edit">',
                     '<td><label><%= scope.strUnit %></label></td>',
@@ -424,7 +427,7 @@ define([
                 '<tr class="macros">',
                     '<td><label><%= scope.strMacrosSettings %></label></td>',
                     '<td>',
-                        '<div><div id="fms-cmb-macros" style="display: inline-block; margin-right: 15px; vertical-align: middle;"></div>',
+                        '<div><div id="fms-cmb-macros"></div>',
                 '</tr>',
                 '<tr class ="divider-group"></tr>',
                 '<tr class="fms-btn-apply">',
@@ -761,6 +764,14 @@ define([
                 })).on('click', _.bind(me.applySettings, me));
             });
 
+            this.chRTL = new Common.UI.CheckBox({
+                el: $markup.findById('#fms-chb-rtl-ui'),
+                labelText: this.strRTLSupport,
+                dataHint: '2',
+                dataHintDirection: 'left',
+                dataHintOffset: 'small'
+            });
+
             this.chQuickPrint = new Common.UI.CheckBox({
                 el: $markup.findById('#fms-chb-quick-print'),
                 labelText: '',
@@ -768,6 +779,7 @@ define([
                 dataHintDirection: 'left',
                 dataHintOffset: 'small'
             });
+
             this.chQuickPrint.$el.parent().on('click', function (){
                 me.chQuickPrint.setValue(!me.chQuickPrint.isChecked());
             });
@@ -923,6 +935,7 @@ define([
             }
             this.chDarkMode.setValue(Common.UI.Themes.isContentThemeDark());
             this.chDarkMode.setDisabled(!Common.UI.Themes.isDarkTheme());
+            this.chRTL.setValue(Common.localStorage.getBool("ui-rtl"));
 
             if (this.mode.canViewReview) {
                 value = Common.Utils.InternalSettings.get("de-settings-review-hover-mode");
@@ -979,6 +992,7 @@ define([
             }
 
             Common.localStorage.setItem("de-settings-paste-button", this.chPaste.isChecked() ? 1 : 0);
+            Common.localStorage.setBool("ui-rtl", this.chRTL.isChecked());
             Common.localStorage.setBool("de-settings-quick-print-button", this.chQuickPrint.isChecked());
 
             Common.localStorage.save();
@@ -1050,6 +1064,7 @@ define([
         textForceSave: 'Save to Server',
         textOldVersions: 'Make the files compatible with older MS Word versions when saved as DOCX',
         txtCacheMode: 'Default cache mode',
+        strRTLSupport: 'RTL interface',
         strMacrosSettings: 'Macros Settings',
         txtWarnMacros: 'Show Notification',
         txtRunMacros: 'Enable All',
@@ -1974,7 +1989,7 @@ define([
                         '<td class="right"><div id="id-info-rights"></div></td>',
                     '</tr>',
                     '<tr class="edit-rights">',
-                        '<td class="left"></td><td class="right"><button id="id-info-btn-edit" class="btn normal dlg-btn primary custom" style="margin-right: 10px;">' + this.txtBtnAccessRights + '</button></td>',
+                        '<td class="left"></td><td class="right"><button id="id-info-btn-edit" class="btn normal dlg-btn primary custom">' + this.txtBtnAccessRights + '</button></td>',
                     '</tr>',
                 '</table>'
             ].join(''));
@@ -2094,7 +2109,7 @@ define([
         template: _.template([
             '<div style="width:100%; height:100%; position: relative;">',
                 '<div id="id-help-contents" style="position: absolute; width:220px; top: 0; bottom: 0;" class="no-padding"></div>',
-                '<div id="id-help-frame" style="position: absolute; left: 220px; top: 0; right: 0; bottom: 0;" class="no-padding"></div>',
+                '<div id="id-help-frame" class="no-padding"></div>',
             '</div>'
         ].join('')),
 
diff --git a/apps/documenteditor/main/app/view/HyperlinkSettingsDialog.js b/apps/documenteditor/main/app/view/HyperlinkSettingsDialog.js
index 9fc36273c..19f53afaf 100644
--- a/apps/documenteditor/main/app/view/HyperlinkSettingsDialog.js
+++ b/apps/documenteditor/main/app/view/HyperlinkSettingsDialog.js
@@ -58,6 +58,7 @@ define([
             width: 350,
             style: 'min-width: 230px;',
             cls: 'modal-dlg',
+            id: 'window-hyperlink',
             buttons: ['ok', 'cancel']
         },
 
@@ -69,8 +70,8 @@ define([
             this.template = [
                 '<div class="box" style="height: 319px;">',
                     '<div class="input-row" style="margin-bottom: 10px;">',
-                        '<button type="button" class="btn btn-text-default auto" id="id-dlg-hyperlink-external" style="border-top-right-radius: 0;border-bottom-right-radius: 0;">', this.textExternal,'</button>',
-                        '<button type="button" class="btn btn-text-default auto" id="id-dlg-hyperlink-internal" style="border-top-left-radius: 0;border-bottom-left-radius: 0;border-left-width: 0;margin-left: -1px;">', this.textInternal,'</button>',
+                        '<button type="button" class="btn btn-text-default auto" id="id-dlg-hyperlink-external">', this.textExternal,'</button>',
+                        '<button type="button" class="btn btn-text-default auto" id="id-dlg-hyperlink-internal">', this.textInternal,'</button>',
                     '</div>',
                     '<div id="id-external-link">',
                         '<div class="input-row">',
diff --git a/apps/documenteditor/main/app/view/LineNumbersDialog.js b/apps/documenteditor/main/app/view/LineNumbersDialog.js
index 4183e5dff..3bf4471a7 100644
--- a/apps/documenteditor/main/app/view/LineNumbersDialog.js
+++ b/apps/documenteditor/main/app/view/LineNumbersDialog.js
@@ -51,6 +51,7 @@ define([
             header: true,
             style: 'min-width: 290px;',
             cls: 'modal-dlg',
+            id: 'window-line-numbers',
             buttons: ['ok', 'cancel']
         },
 
@@ -63,8 +64,8 @@ define([
                 '<div class="box" style="">',
                 '<div id="line-numbers-add-line-numbering" style="margin-bottom: 15px;"></div>',
                 '<div style="margin-bottom: 15px;">',
-                    '<div style="display: inline-block; margin-right: 9px;"><label>' + this.textStartAt + '</label><div id="line-numbers-start-at"></div></div>',
-                    '<div style="display: inline-block; margin-right: 9px;"><label>' + this.textFromText + '</label><div id="line-numbers-from-text"></div></div>',
+                    '<div class="margin-right" style="display: inline-block;"><label>' + this.textStartAt + '</label><div id="line-numbers-start-at"></div></div>',
+                    '<div class="margin-right" style="display: inline-block;"><label>' + this.textFromText + '</label><div id="line-numbers-from-text"></div></div>',
                     '<div style="display: inline-block;"><label>' + this.textCountBy + '</label><div id="line-numbers-count-by"></div></div>',
                 '</div>',
                 '<div style="margin-bottom: 8px;"><label>' + this.textNumbering + '</label></div>',
diff --git a/apps/documenteditor/main/app/view/Links.js b/apps/documenteditor/main/app/view/Links.js
index 4f5de8e50..f7b5547c0 100644
--- a/apps/documenteditor/main/app/view/Links.js
+++ b/apps/documenteditor/main/app/view/Links.js
@@ -333,27 +333,47 @@ define([
                                 {caption: me.mniInsEndnote, value: 'ins_endnote'},
                                 {caption: '--'},
                                 new Common.UI.MenuItem({
-                                    template: _.template([
+                                    template: !Common.UI.isRTL() ? _.template([
                                         '<div class="menu-zoom" style="height: 26px;" ',
                                         '<% if(!_.isUndefined(options.stopPropagation)) { %>',
                                         'data-stopPropagation="true"',
                                         '<% } %>', '>',
                                         '<label class="title">' + me.textGotoFootnote + '</label>',
-                                        '<button id="id-menu-goto-footnote-next-' + index + '" type="button" style="float:right; margin: 2px 5px 0 0;" class="btn small btn-toolbar"><i class="icon menu__icon btn-nextitem">&nbsp;</i></button>',
-                                        '<button id="id-menu-goto-footnote-prev-' + index + '" type="button" style="float:right; margin-top: 2px;" class="btn small btn-toolbar"><i class="icon menu__icon btn-previtem">&nbsp;</i></button>',
+                                        '<button id="id-menu-goto-footnote-next-' + index + '" type="button" class="btn small btn-toolbar next"><i class="icon menu__icon btn-nextitem">&nbsp;</i></button>',
+                                        '<button id="id-menu-goto-footnote-prev-' + index + '" type="button" class="btn small btn-toolbar prev"><i class="icon menu__icon btn-previtem">&nbsp;</i></button>',
+                                        '</div>'
+                                    ].join('')) :
+                                    _.template([
+                                        '<div class="menu-zoom" style="height: 26px;" ',
+                                        '<% if(!_.isUndefined(options.stopPropagation)) { %>',
+                                        'data-stopPropagation="true"',
+                                        '<% } %>', '>',
+                                        '<label class="title">' + me.textGotoFootnote + '</label>',
+                                        '<button id="id-menu-goto-footnote-prev-' + index + '" type="button" class="btn small btn-toolbar prev"><i class="icon menu__icon btn-previtem">&nbsp;</i></button>',
+                                        '<button id="id-menu-goto-footnote-next-' + index + '" type="button" class="btn small btn-toolbar next"><i class="icon menu__icon btn-nextitem">&nbsp;</i></button>',
                                         '</div>'
                                     ].join('')),
                                     stopPropagation: true
                                 }),
                                 new Common.UI.MenuItem({
-                                    template: _.template([
+                                    template: !Common.UI.isRTL() ? _.template([
                                         '<div class="menu-zoom" style="height: 26px;" ',
                                         '<% if(!_.isUndefined(options.stopPropagation)) { %>',
                                         'data-stopPropagation="true"',
                                         '<% } %>', '>',
                                         '<label class="title">' + me.textGotoEndnote + '</label>',
-                                        '<button id="id-menu-goto-endnote-next-' + index + '" type="button" style="float:right; margin: 2px 5px 0 0;" class="btn small btn-toolbar"><i class="icon menu__icon btn-nextitem">&nbsp;</i></button>',
-                                        '<button id="id-menu-goto-endnote-prev-' + index + '" type="button" style="float:right; margin-top: 2px;" class="btn small btn-toolbar"><i class="icon menu__icon btn-previtem">&nbsp;</i></button>',
+                                        '<button id="id-menu-goto-endnote-next-' + index + '" type="button" class="btn small btn-toolbar next"><i class="icon menu__icon btn-nextitem">&nbsp;</i></button>',
+                                        '<button id="id-menu-goto-endnote-prev-' + index + '" type="button" class="btn small btn-toolbar prev"><i class="icon menu__icon btn-previtem">&nbsp;</i></button>',
+                                        '</div>'
+                                    ].join('')) :
+                                    _.template([
+                                        '<div class="menu-zoom" style="height: 26px;" ',
+                                        '<% if(!_.isUndefined(options.stopPropagation)) { %>',
+                                        'data-stopPropagation="true"',
+                                        '<% } %>', '>',
+                                        '<label class="title">' + me.textGotoEndnote + '</label>',
+                                        '<button id="id-menu-goto-endnote-prev-' + index + '" type="button" class="btn small btn-toolbar prev"><i class="icon menu__icon btn-previtem">&nbsp;</i></button>',
+                                        '<button id="id-menu-goto-endnote-next-' + index + '" type="button" class="btn small btn-toolbar next"><i class="icon menu__icon btn-nextitem">&nbsp;</i></button>',
                                         '</div>'
                                     ].join('')),
                                     stopPropagation: true
diff --git a/apps/documenteditor/main/app/view/ListSettingsDialog.js b/apps/documenteditor/main/app/view/ListSettingsDialog.js
index debd1b0d4..1cc113b23 100644
--- a/apps/documenteditor/main/app/view/ListSettingsDialog.js
+++ b/apps/documenteditor/main/app/view/ListSettingsDialog.js
@@ -72,11 +72,11 @@ define([
         }, options || {});
 
             this.template = [
-                '<div class="box">',
+                '<div class="box list-settings">',
                 '<% if (type == 2) { %>',
                     '<table cols="4" style="width: 100%;">',
                         '<tr>',
-                            '<td style="padding-right: 5px;">',
+                            '<td class="padding-right">',
                                 '<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>',
@@ -88,7 +88,7 @@ define([
                                 '<label class="input-label">' + this.txtSize + '</label>',
                                 '<div id="id-dlg-bullet-size" class="input-group-nr" style="width: 100%;margin-bottom: 10px;"></div>',
                             '</td>',
-                            '<td style="padding-left: 5px;">',
+                            '<td class="padding-left">',
                                 '<label class="input-label">' + this.txtColor + '</label>',
                                 '<div id="id-dlg-bullet-color" style="margin-bottom: 10px;"></div>',
                             '</td>',
@@ -97,7 +97,7 @@ define([
                 '<% } else {%>',
                     '<table cols="2" style="width: 100%;">',
                         '<tr>',
-                            '<td style="padding-right: 5px;">',
+                            '<td class="padding-right">',
                                 '<% if (type == 0) { %>',
                                 '<label class="input-label">' + this.txtBullet + '</label>',
                                 '<button type="button" class="btn btn-text-default" id="id-dlg-bullet-font" style="width: 100%;margin-bottom: 10px;">' + this.txtFont + '</button>',
@@ -106,17 +106,17 @@ define([
                                 '<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">',
                                 '<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>',
                         '</tr>',
                         '<tr>',
-                            '<td style="padding-right: 5px;">',
+                            '<td class="padding-right">',
                                 '<label class="input-label">' + this.txtSize + '</label>',
                                 '<div id="id-dlg-bullet-size" class="input-group-nr" style="width: 100%;margin-bottom: 10px;"></div>',
                             '</td>',
-                            '<td style="padding-left: 5px;">',
+                            '<td class="padding-left">',
                                 '<label class="input-label">' + this.txtColor + '</label>',
                                 '<div id="id-dlg-bullet-color" style="margin-bottom: 10px;"></div>',
                             '</td>',
@@ -125,7 +125,7 @@ define([
                 '<% } %>',
                 '<table cols="2" style="width: 100%;">',
                         '<tr>',
-                            '<td class="<% if (type != 2) { %> hidden <% } %>" style="width: 50px; padding-right: 10px;">',
+                            '<td class="padding-right-big <% if (type != 2) { %> hidden <% } %>" style="width: 50px;">',
                                 '<label>' + this.textLevel + '</label>',
                                 '<div id="levels-list" class="no-borders" style="width:100%; height:208px;margin-top: 2px; "></div>',
                             '</td>',
diff --git a/apps/documenteditor/main/app/view/MailMergeSettings.js b/apps/documenteditor/main/app/view/MailMergeSettings.js
index 728f06278..271bfaa27 100644
--- a/apps/documenteditor/main/app/view/MailMergeSettings.js
+++ b/apps/documenteditor/main/app/view/MailMergeSettings.js
@@ -197,7 +197,7 @@ define([
             this.btnFirst = new Common.UI.Button({
                 parentEl: $('#mmerge-button-first', me.$el),
                 cls: 'btn-toolbar',
-                iconCls: 'toolbar__icon btn-firstitem',
+                iconCls: 'toolbar__icon ' + (!Common.UI.isRTL() ? 'btn-firstitem' : 'btn-lastitem'),
                 disabled: true,
                 value: 0,
                 hint: this.txtFirst,
@@ -211,7 +211,7 @@ define([
             this.btnPrev = new Common.UI.Button({
                 parentEl: $('#mmerge-button-prev', me.$el),
                 cls: 'btn-toolbar',
-                iconCls: 'toolbar__icon btn-previtem',
+                iconCls: 'toolbar__icon ' + (!Common.UI.isRTL() ? 'btn-previtem' : 'btn-nextitem'),
                 disabled: true,
                 value: 1,
                 hint: this.txtPrev,
@@ -225,7 +225,7 @@ define([
             this.btnNext = new Common.UI.Button({
                 parentEl: $('#mmerge-button-next', me.$el),
                 cls: 'btn-toolbar',
-                iconCls: 'toolbar__icon btn-nextitem',
+                iconCls: 'toolbar__icon ' + (!Common.UI.isRTL() ? 'btn-nextitem' : 'btn-previtem'),
                 value: 2,
                 hint: this.txtNext,
                 lock: [_set.noRecipients, _set.lostConnect],
@@ -238,7 +238,7 @@ define([
             this.btnLast = new Common.UI.Button({
                 parentEl: $('#mmerge-button-last', me.$el),
                 cls: 'btn-toolbar',
-                iconCls: 'toolbar__icon btn-lastitem',
+                iconCls: 'toolbar__icon ' + (!Common.UI.isRTL() ? 'btn-lastitem' : 'btn-firstitem'),
                 value: 3,
                 hint: this.txtLast,
                 lock: [_set.noRecipients, _set.lostConnect],
diff --git a/apps/documenteditor/main/app/view/Navigation.js b/apps/documenteditor/main/app/view/Navigation.js
index 3fec05e5f..d9ce8ce20 100644
--- a/apps/documenteditor/main/app/view/Navigation.js
+++ b/apps/documenteditor/main/app/view/Navigation.js
@@ -51,8 +51,8 @@ define([
             '<div id="navigation-box" class="layout-ct vbox">',
             '<div id="navigation-header" className="">',
                 '<label><%= scope.strNavigate%></label>',
-                '<div id="navigation-btn-close" style="float:right;margin-left: 4px;"></div>',
-                '<div id="navigation-btn-settings" style="float:right;"></div>',
+                '<div id="navigation-btn-close"></div>',
+                '<div id="navigation-btn-settings"></div>',
             '</div>',
                 '<div id="navigation-list" class="">',
                 '</div>',
diff --git a/apps/documenteditor/main/app/view/NoteSettingsDialog.js b/apps/documenteditor/main/app/view/NoteSettingsDialog.js
index 72d518d72..fe2c7426c 100644
--- a/apps/documenteditor/main/app/view/NoteSettingsDialog.js
+++ b/apps/documenteditor/main/app/view/NoteSettingsDialog.js
@@ -50,6 +50,7 @@ define([
         options: {
             contentWidth: 300,
             height: 395,
+            id: 'window-note-settings',
             buttons: null
         },
 
@@ -71,13 +72,13 @@ define([
                                     '<tr>',
                                         '<td class="padding-small">',
                                             '<div id="note-settings-radio-foot" style="margin-top: 4px;display: inline-block"></div>',
-                                            '<div id="note-settings-combo-footnote" class="input-group-nr" style="display: inline-block; width:150px;float:right;"></div>',
+                                            '<div id="note-settings-combo-footnote" class="input-group-nr" style="display: inline-block; width:150px;"></div>',
                                         '</td>',
                                     '</tr>',
                                     '<tr>',
                                         '<td class="padding-large">',
                                             '<div id="note-settings-radio-end" style="margin-top: 4px;display: inline-block"></div>',
-                                            '<div id="note-settings-combo-endnote" class="input-group-nr" style="display: inline-block; width:150px;float:right;"></div>',
+                                            '<div id="note-settings-combo-endnote" class="input-group-nr" style="display: inline-block; width:150px;"></div>',
                                         '</td>',
                                     '</tr>',
                                     '<tr>',
@@ -87,7 +88,7 @@ define([
                                     '</tr>',
                                     '<tr>',
                                         '<td class="padding-small">',
-                                            '<div style="display: inline-block; margin-right: 10px; vertical-align: middle;">',
+                                            '<div class="margin-right" style="display: inline-block; vertical-align: middle;">',
                                                 '<label class="input-label">', me.textNumFormat,'</label>',
                                                 '<div id="note-settings-combo-format" class="input-group-nr" style="width:150px;"></div>',
                                             '</div>','<div style="display: inline-block; vertical-align: middle;">',
diff --git a/apps/documenteditor/main/app/view/PageMarginsDialog.js b/apps/documenteditor/main/app/view/PageMarginsDialog.js
index 9a65bdb86..6fa5cd983 100644
--- a/apps/documenteditor/main/app/view/PageMarginsDialog.js
+++ b/apps/documenteditor/main/app/view/PageMarginsDialog.js
@@ -60,14 +60,14 @@ define([
 
             this.template = [
                 '<div class="box" style="height: 245px;">',
-                    '<div style="float: left;">',
+                    '<div class="margins-settings">',
                         '<label style="font-weight: bold;">' + this.textTitle + '</label>',
                         '<div style="margin-top: 2px;">',
                             '<div style="display: inline-block;">',
                                 '<label class="input-label">' + this.textTop + '</label>',
                                 '<div id="page-margins-spin-top"></div>',
                             '</div>',
-                            '<div style="display: inline-block; margin-left: 8px;">',
+                            '<div class="margin-left" style="display: inline-block;">',
                                 '<label class="input-label">' + this.textBottom + '</label>',
                                 '<div id="page-margins-spin-bottom"></div>',
                             '</div>',
@@ -77,7 +77,7 @@ define([
                                 '<label class="input-label" id="margin-left-label">' + this.textLeft + '</label>',
                                 '<div id="page-margins-spin-left"></div>',
                             '</div>',
-                            '<div style="display: inline-block; margin-left: 8px;">',
+                            '<div class="margin-left" style="display: inline-block;">',
                                 '<label class="input-label" id="margin-right-label">' + this.textRight + '</label>',
                                 '<div id="page-margins-spin-right"></div>',
                             '</div>',
@@ -86,7 +86,7 @@ define([
                             '<label style="font-weight: bold;">' + this.textGutterPosition + '</label>',
                             '<div>',
                                 '<div style="display: inline-block;" id="page-margins-spin-gutter"></div>',
-                                '<div style="display: inline-block; margin-left: 8px;" id="page-margins-spin-gutter-position"></div>',
+                                '<div style="display: inline-block;" id="page-margins-spin-gutter-position" class="margin-left"></div>',
                             '</div>',
                         '</div>',
                         '<div style="margin-top: 10px;">',
@@ -98,7 +98,7 @@ define([
                             '<div id="page-margins-cmb-multiple-pages"></div>',
                         '</div>',
                     '</div>',
-                    '<div style="float: right;">',
+                    '<div class="margins-preview">',
                         '<label style="font-weight: bold;">' + this.textPreview + '</label>',
                         '<div id="page-margins-preview" style="margin-top: 2px; height: 120px; width: 162px;"></div>',
                     '</div>',
diff --git a/apps/documenteditor/main/app/view/PageSizeDialog.js b/apps/documenteditor/main/app/view/PageSizeDialog.js
index 44655c846..ef66d699b 100644
--- a/apps/documenteditor/main/app/view/PageSizeDialog.js
+++ b/apps/documenteditor/main/app/view/PageSizeDialog.js
@@ -68,7 +68,7 @@ define([
                             '</td>',
                         '</tr>',
                         '<tr>',
-                            '<td style="padding-right: 10px;">',
+                            '<td class="padding-right">',
                                 '<label class="input-label">' + this.textWidth + '</label>',
                                 '<div id="page-size-spin-width"></div>',
                             '</td>',
diff --git a/apps/documenteditor/main/app/view/ParagraphSettingsAdvanced.js b/apps/documenteditor/main/app/view/ParagraphSettingsAdvanced.js
index f152be7fe..cfebd34a5 100644
--- a/apps/documenteditor/main/app/view/ParagraphSettingsAdvanced.js
+++ b/apps/documenteditor/main/app/view/ParagraphSettingsAdvanced.js
@@ -412,7 +412,6 @@ define([    'text!documenteditor/main/app/template/ParagraphSettingsAdvanced.tem
             _.each(_arrBorderPresets, function(item, index, list){
                 var _btn = new Common.UI.Button({
                     parentEl: $('#'+item[2]),
-                    style: 'margin-left: 4px; margin-bottom: 4px;',
                     cls: 'btn-options large border-off',
                     iconCls: item[1],
                     strId   :item[0],
diff --git a/apps/documenteditor/main/app/view/ShapeSettings.js b/apps/documenteditor/main/app/view/ShapeSettings.js
index 52f81af38..5fed3323b 100644
--- a/apps/documenteditor/main/app/view/ShapeSettings.js
+++ b/apps/documenteditor/main/app/view/ShapeSettings.js
@@ -532,7 +532,8 @@ define([
 
         onGradientChange: function(slider, newValue, oldValue){
             this.GradColor.values = slider.getValues();
-            this.spnGradPosition.setValue(this.GradColor.values[this.GradColor.currentIdx], true);
+            var curValue = this.GradColor.values[this.GradColor.currentIdx];
+            this.spnGradPosition.setValue(Common.UI.isRTL() ? this.sldrGradient.maxValue - curValue : curValue, true);
             this._sliderChanged = true;
             if (this.api && !this._noApply) {
                 if (this._sendUndoPoint)  {
@@ -1013,7 +1014,8 @@ define([
                         me.GradColor.currentIdx = 0;
                     }
                     me.sldrGradient.setActiveThumb(me.GradColor.currentIdx);
-                    this.spnGradPosition.setValue(this.GradColor.values[this.GradColor.currentIdx]);
+                    var curValue = this.GradColor.values[this.GradColor.currentIdx];
+                    this.spnGradPosition.setValue(Common.UI.isRTL() ? this.sldrGradient.maxValue - curValue : curValue);
                     this.OriginalFillType = Asc.c_oAscFill.FILL_TYPE_GRAD;
                     this.FGColor = {Value: 1, Color: this.GradColor.colors[0]};
                     this.BGColor = {Value: 1, Color: 'ffffff'};
@@ -1453,7 +1455,7 @@ define([
                 me.btnGradColor.setColor(color);
                 me.colorsGrad.select(color,false);
                 var pos = me.GradColor.values[me.GradColor.currentIdx];
-                me.spnGradPosition.setValue(pos, true);
+                me.spnGradPosition.setValue(Common.UI.isRTL() ? me.sldrGradient.maxValue - pos : pos, true);
             });
             this.sldrGradient.on('thumbdblclick', function(cmp){
                 me.btnGradColor.cmpEl.find('button').dropdown('toggle');
@@ -2018,8 +2020,11 @@ define([
         },
 
         onPositionChange: function(btn) {
-            var pos = btn.getNumberValue(),
-                minValue = (this.GradColor.currentIdx-1<0) ? 0 : this.GradColor.values[this.GradColor.currentIdx-1],
+            var pos = btn.getNumberValue();
+            if (Common.UI.isRTL()) {
+                pos = this.sldrGradient.maxValue - pos;
+            }
+            var minValue = (this.GradColor.currentIdx-1<0) ? 0 : this.GradColor.values[this.GradColor.currentIdx-1],
                 maxValue = (this.GradColor.currentIdx+1<this.GradColor.values.length) ? this.GradColor.values[this.GradColor.currentIdx+1] : 100,
                 needSort = pos < minValue || pos > maxValue;
             if (this.api) {
diff --git a/apps/documenteditor/main/app/view/Statusbar.js b/apps/documenteditor/main/app/view/Statusbar.js
index d6f3f662e..235404fb8 100644
--- a/apps/documenteditor/main/app/view/Statusbar.js
+++ b/apps/documenteditor/main/app/view/Statusbar.js
@@ -249,7 +249,7 @@ define([
                     style: 'margin-top:-5px;',
                     restoreHeight: 285,
                     itemTemplate: _.template([
-                        '<a id="<%= id %>" tabindex="-1" type="menuitem" style="padding-left: 28px !important;" langval="<%= value.value %>" class="<% if (checked) { %> checked <% } %>">',
+                        '<a id="<%= id %>" tabindex="-1" type="menuitem" langval="<%= value.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/TableOfContentsSettings.js b/apps/documenteditor/main/app/view/TableOfContentsSettings.js
index 498e43ac2..2e4ea4e27 100644
--- a/apps/documenteditor/main/app/view/TableOfContentsSettings.js
+++ b/apps/documenteditor/main/app/view/TableOfContentsSettings.js
@@ -49,7 +49,8 @@ define([
     DE.Views.TableOfContentsSettings = Common.Views.AdvancedSettingsWindow.extend(_.extend({
         options: {
             contentWidth: 500,
-            height: 455
+            height: 455,
+            id: 'window-table-contents'
         },
 
         initialize : function(options) {
@@ -69,7 +70,7 @@ define([
                                         '<div id="tableofcontents-chb-pages"></div>',
                                         '</td>',
                                         '<td rowspan="5" class="padding-small" style="vertical-align: top;">',
-                                        '<div class="canvas-box" style="width: 240px; height: 182px; float: right;position:relative;overflow:hidden;">',
+                                        '<div class="canvas-box" style="width: 240px; height: 182px; position:relative; overflow:hidden;">',
                                             '<div id="tableofcontents-img" style="width: 230px; height: 100%;"></div>',
                                         '</div>',
                                         '</td>',
@@ -82,7 +83,7 @@ define([
                                     '<tr>',
                                         '<td class="padding-large">',
                                             '<label class="input-label">' + me.textLeader + '</label>',
-                                            '<div id="tableofcontents-combo-leader" class="input-group-nr" style="display: inline-block; width:95px; margin-left: 10px;"></div>',
+                                            '<div id="tableofcontents-combo-leader" class="input-group-nr margin-left" style="display: inline-block; width:95px;"></div>',
                                         '</td>',
                                     '</tr>',
                                     '<tr>',
@@ -116,11 +117,11 @@ define([
                                         '<% } else { %>',
                                             '<div id="tableofcontents-from-levels" style="width:220px;">',
                                                 '<label class="input-label">' + me.textLevels + '</label>',
-                                                '<div id="tableofcontents-spin-levels" style="display: inline-block; width:95px; margin-left: 10px;"></div>',
+                                                '<div id="tableofcontents-spin-levels" class="margin-left" style="display: inline-block; width:95px;"></div>',
                                             '</div>',
                                             '<div id="tableofcontents-from-styles" class="hidden">',
                                                 '<table><tr><td style="height: 25px;">',
-                                                        '<label class="input-label" style="width: 144px; margin-left: 23px;">' + me.textStyle + '</label>',
+                                                        '<label class="input-label label-style" style="width: 144px;">' + me.textStyle + '</label>',
                                                         '<label class="input-label" style="">' + me.textLevel + '</label>',
                                                     '</td></tr>',
                                                     '<tr><td>',
@@ -130,8 +131,8 @@ define([
                                         '<% } %>',
                                         '</td>',
                                         '<td class="padding-small" style="vertical-align: top;">',
-                                            '<label class="input-label" style="margin-left: 10px;">' + me.textStyles + '</label>',
-                                            '<div id="tableofcontents-combo-styles" class="input-group-nr" style="display: inline-block; width:95px; margin-left: 10px;"></div>',
+                                            '<label class="input-label margin-left">' + me.textStyles + '</label>',
+                                            '<div id="tableofcontents-combo-styles" class="input-group-nr margin-left" style="display: inline-block; width:95px;"></div>',
                                         '</td>',
                                     '</tr>',
                                 '</table>',
diff --git a/apps/documenteditor/main/app/view/TableSettings.js b/apps/documenteditor/main/app/view/TableSettings.js
index 33335fbbf..3be33c095 100644
--- a/apps/documenteditor/main/app/view/TableSettings.js
+++ b/apps/documenteditor/main/app/view/TableSettings.js
@@ -484,7 +484,6 @@ define([
                 cls         : 'btn-toolbar',
                 iconCls     : 'toolbar__icon table-to-text',
                 caption     : this.textConvert,
-                style       : 'width: 100%;text-align: left;',
                 dataHint    : '1',
                 dataHintDirection: 'left',
                 dataHintOffset: 'medium'
@@ -871,7 +870,7 @@ define([
                     menu        : new Common.UI.Menu({
                         style: 'width: 588px;',
                         items: [
-                            { template: _.template('<div id="id-table-menu-template" class="menu-table-template"  style="margin: 5px 5px 5px 10px;"></div>') }
+                            { template: _.template('<div id="id-table-menu-template" class="menu-table-template"></div>') }
                         ]
                     }),
                     dataHint: '1',
diff --git a/apps/documenteditor/main/app/view/TableSettingsAdvanced.js b/apps/documenteditor/main/app/view/TableSettingsAdvanced.js
index 7f07822cd..b16a2db6a 100644
--- a/apps/documenteditor/main/app/view/TableSettingsAdvanced.js
+++ b/apps/documenteditor/main/app/view/TableSettingsAdvanced.js
@@ -948,7 +948,6 @@ define([    'text!documenteditor/main/app/template/TableSettingsAdvanced.templat
             _.each(_arrBorderPresets, function(item, index, list){
                 var _btn = new Common.UI.Button({
                     parentEl: $('#'+item[2]),
-                    style: 'margin-left: 4px; margin-bottom: 4px;',
                     cls: 'btn-options large border-off',
                     iconCls: item[1],
                     strId   :item[0],
diff --git a/apps/documenteditor/main/app/view/TextArtSettings.js b/apps/documenteditor/main/app/view/TextArtSettings.js
index ad8f8a59e..851b7f435 100644
--- a/apps/documenteditor/main/app/view/TextArtSettings.js
+++ b/apps/documenteditor/main/app/view/TextArtSettings.js
@@ -398,7 +398,8 @@ define([
 
         onGradientChange: function(slider, newValue, oldValue){
             this.GradColor.values = slider.getValues();
-            this.spnGradPosition.setValue(this.GradColor.values[this.GradColor.currentIdx], true);
+            var curValue = this.GradColor.values[this.GradColor.currentIdx];
+            this.spnGradPosition.setValue(Common.UI.isRTL() ? this.sldrGradient.maxValue - curValue : curValue, true);
             this._sliderChanged = true;
             if (this.api && !this._noApply) {
                 if (this._sendUndoPoint)  {
@@ -678,7 +679,8 @@ define([
                         me.GradColor.currentIdx = 0;
                     }
                     me.sldrGradient.setActiveThumb(me.GradColor.currentIdx);
-                    this.spnGradPosition.setValue(this.GradColor.values[this.GradColor.currentIdx]);
+                    var curValue = this.GradColor.values[this.GradColor.currentIdx];
+                    this.spnGradPosition.setValue(Common.UI.isRTL() ? me.sldrGradient.maxValue - curValue : curValue);
                     this.OriginalFillType = Asc.c_oAscFill.FILL_TYPE_GRAD;
                     this.ShapeColor = {Value: 1, Color: this.GradColor.colors[0]};
                 }
@@ -996,7 +998,7 @@ define([
                 me.btnGradColor.setColor(color);
                 me.colorsGrad.select(color,false);
                 var pos = me.GradColor.values[me.GradColor.currentIdx];
-                me.spnGradPosition.setValue(pos, true);
+                me.spnGradPosition.setValue(Common.UI.isRTL() ? me.sldrGradient.maxValue - pos : pos, true);
             });
             this.sldrGradient.on('thumbdblclick', function(cmp){
                 me.btnGradColor.cmpEl.find('button').dropdown('toggle');
@@ -1308,8 +1310,11 @@ define([
         },
 
         onPositionChange: function(btn) {
-            var pos = btn.getNumberValue(),
-                minValue = (this.GradColor.currentIdx-1<0) ? 0 : this.GradColor.values[this.GradColor.currentIdx-1],
+            var pos = btn.getNumberValue();
+            if (Common.UI.isRTL()) {
+                pos = this.sldrGradient.maxValue - pos;
+            }
+            var minValue = (this.GradColor.currentIdx-1<0) ? 0 : this.GradColor.values[this.GradColor.currentIdx-1],
                 maxValue = (this.GradColor.currentIdx+1<this.GradColor.values.length) ? this.GradColor.values[this.GradColor.currentIdx+1] : 100,
                 needSort = pos < minValue || pos > maxValue;
             if (this.api) {
diff --git a/apps/documenteditor/main/app/view/Toolbar.js b/apps/documenteditor/main/app/view/Toolbar.js
index c0cda6699..3efb3908b 100644
--- a/apps/documenteditor/main/app/view/Toolbar.js
+++ b/apps/documenteditor/main/app/view/Toolbar.js
@@ -705,7 +705,7 @@ define([
                         menu: new Common.UI.Menu({
                             cls: 'menu-shapes',
                             items: [
-                                {template: _.template('<div id="id-toolbar-menu-insart" style="width: 239px; margin-left: 5px;"></div>')}
+                                {template: _.template('<div id="id-toolbar-menu-insart" style="width: 239px;"></div>')}
                             ]
                         }),
                         dataHint: '1',
@@ -1054,12 +1054,21 @@ define([
                     this.toolbarControls.push(this.btnPageOrient);
 
 
-                    var pageMarginsTemplate = _.template('<a id="<%= id %>" tabindex="-1" type="menuitem"><div><b><%= caption %></b></div>' +
-                        '<% if (options.value !== null) { %><div style="display: inline-block;margin-right: 20px;min-width: 80px;">' +
-                        '<label style="display: block;">' + this.textTop + '<%= parseFloat(Common.Utils.Metric.fnRecalcFromMM(options.value[0]).toFixed(2)) %> <%= Common.Utils.Metric.getCurrentMetricName() %></label>' +
-                        '<label style="display: block;">' + this.textLeft + '<%= parseFloat(Common.Utils.Metric.fnRecalcFromMM(options.value[1]).toFixed(2)) %> <%= Common.Utils.Metric.getCurrentMetricName() %></label></div><div style="display: inline-block;">' +
-                        '<label style="display: block;">' + this.textBottom + '<%= parseFloat(Common.Utils.Metric.fnRecalcFromMM(options.value[2]).toFixed(2)) %> <%= Common.Utils.Metric.getCurrentMetricName() %></label>' +
-                        '<label style="display: block;">' + this.textRight + '<%= parseFloat(Common.Utils.Metric.fnRecalcFromMM(options.value[3]).toFixed(2)) %> <%= Common.Utils.Metric.getCurrentMetricName() %></label></div>' +
+                    var pageMarginsTemplate = !Common.UI.isRTL() ? _.template('<a id="<%= id %>" tabindex="-1" type="menuitem"><div><b><%= caption %></b></div>' +
+                        '<% if (options.value !== null) { %><div class="margin-vertical">' +
+                        '<label>' + this.textTop + '<%= parseFloat(Common.Utils.Metric.fnRecalcFromMM(options.value[0]).toFixed(2)) %> <%= Common.Utils.Metric.getCurrentMetricName() %></label>' +
+                        '<label>' + this.textLeft + '<%= parseFloat(Common.Utils.Metric.fnRecalcFromMM(options.value[1]).toFixed(2)) %> <%= Common.Utils.Metric.getCurrentMetricName() %></label></div>' +
+                        '<div class="margin-horizontal">' +
+                        '<label>' + this.textBottom + '<%= parseFloat(Common.Utils.Metric.fnRecalcFromMM(options.value[2]).toFixed(2)) %> <%= Common.Utils.Metric.getCurrentMetricName() %></label>' +
+                        '<label>' + this.textRight + '<%= parseFloat(Common.Utils.Metric.fnRecalcFromMM(options.value[3]).toFixed(2)) %> <%= Common.Utils.Metric.getCurrentMetricName() %></label></div>' +
+                        '<% } %></a>') :
+                        _.template('<a id="<%= id %>" tabindex="-1" type="menuitem"><div><b><%= caption %></b></div>' +
+                        '<% if (options.value !== null) { %><div class="margin-vertical">' +
+                        '<label><%= Common.Utils.Metric.getCurrentMetricName() %> <%= parseFloat(Common.Utils.Metric.fnRecalcFromMM(options.value[0]).toFixed(2)) %>' + this.textTop + '</label>' +
+                        '<label><%= Common.Utils.Metric.getCurrentMetricName() %> <%= parseFloat(Common.Utils.Metric.fnRecalcFromMM(options.value[1]).toFixed(2)) %>' + this.textLeft + '</label></div>' +
+                        '<div class="margin-horizontal">' +
+                        '<label><%= Common.Utils.Metric.getCurrentMetricName() %> <%= parseFloat(Common.Utils.Metric.fnRecalcFromMM(options.value[2]).toFixed(2)) %>' + this.textBottom + '</label>' +
+                        '<label><%= Common.Utils.Metric.getCurrentMetricName() %> <%= parseFloat(Common.Utils.Metric.fnRecalcFromMM(options.value[3]).toFixed(2)) %>' + this.textRight + '</label></div>' +
                         '<% } %></a>');
 
                     this.btnPageMargins = new Common.UI.Button({
@@ -1069,6 +1078,7 @@ define([
                         lock: [_set.docPropsLock, _set.previewReviewMode, _set.viewFormMode, _set.lostConnect, _set.disableOnStart, _set.docLockView, _set.docLockForms, _set.docLockComments],
                         caption: me.capBtnMargins,
                         menu: new Common.UI.Menu({
+                            cls: 'menu-margins',
                             items: [
                                 {
                                     caption: this.textMarginsLast,
@@ -1121,9 +1131,12 @@ define([
                     });
                     this.toolbarControls.push(this.btnPageMargins);
 
-                    var pageSizeTemplate = _.template('<a id="<%= id %>" tabindex="-1" type="menuitem"><div><b><%= caption %></b></div>' +
-                        '<div><%= parseFloat(Common.Utils.Metric.fnRecalcFromMM(options.value[0]).toFixed(2)) %> <%= Common.Utils.Metric.getCurrentMetricName() %> x ' +
-                        '<%= parseFloat(Common.Utils.Metric.fnRecalcFromMM(options.value[1]).toFixed(2)) %> <%= Common.Utils.Metric.getCurrentMetricName() %></div></a>');
+                    var pageSizeTemplate = !Common.UI.isRTL() ? _.template('<a id="<%= id %>" tabindex="-1" type="menuitem"><div><b><%= caption %></b></div>' +
+                        '<div dir="ltr"><%= parseFloat(Common.Utils.Metric.fnRecalcFromMM(options.value[0]).toFixed(2)) %> <%= Common.Utils.Metric.getCurrentMetricName() %> x ' +
+                        '<%= parseFloat(Common.Utils.Metric.fnRecalcFromMM(options.value[1]).toFixed(2)) %> <%= Common.Utils.Metric.getCurrentMetricName() %></div></a>') :
+                        _.template('<a id="<%= id %>" tabindex="-1" type="menuitem"><div><b><%= caption %></b></div>' +
+                        '<div dir="ltr"><%= Common.Utils.Metric.getCurrentMetricName() %> <%= parseFloat(Common.Utils.Metric.fnRecalcFromMM(options.value[1]).toFixed(2)) %> x ' +
+                        '<%= Common.Utils.Metric.getCurrentMetricName() %> <%= parseFloat(Common.Utils.Metric.fnRecalcFromMM(options.value[0]).toFixed(2)) %></div></a>');
 
                     this.btnPageSize = new Common.UI.Button({
                         id: 'tlbtn-pagesize',
@@ -1545,7 +1558,10 @@ define([
                                 if (menuWidth>Common.Utils.innerWidth())
                                     menuWidth = Math.max(Math.floor(Common.Utils.innerWidth()/(itemMargin + _width)), 2) * (itemMargin + _width);
                                 var offset = cmp.cmpEl.width() - cmp.openButton.$el.width() - Math.min(menuWidth, buttonOffsetLeft) - 1;
-                                menu.setOffset(Math.min(offset, 0));
+                                if (Common.UI.isRTL()) {
+                                    offset = cmp.openButton.$el.width();
+                                }
+                                menu.setOffset(Common.UI.isRTL() ? offset : Math.min(offset, 0));
 
                                 menu.cmpEl.css({
                                     'width': menuWidth,
@@ -2084,11 +2100,11 @@ define([
                         cls: 'shifted-left',
                         style: 'min-width: 145px',
                         items: [
-                            {template: _.template('<div id="id-toolbar-menu-markers" class="menu-markers" style="width: 153px; margin: 0 0 0 9px;"></div>')},
+                            {template: _.template('<div id="id-toolbar-menu-markers" class="menu-markers" style="width: 153px;"></div>')},
                             {caption: '--'},
                             this.mnuMarkerChangeLevel = new Common.UI.MenuItem({
+                                cls: 'list-level',
                                 caption: this.textChangeLevel,
-                                style: 'padding-right:20px;',
                                 disabled: (this.mnuMarkersPicker.conf.index || 0)==0,
                                 menu: new Common.UI.Menu({
                                     cls: 'list-settings-level',
@@ -2115,11 +2131,11 @@ define([
                     new Common.UI.Menu({
                         cls: 'shifted-left',
                         items: [
-                            {template: _.template('<div id="id-toolbar-menu-numbering" class="menu-markers" style="width: 361px; margin: 0 0 0 9px;"></div>')},
+                            {template: _.template('<div id="id-toolbar-menu-numbering" class="menu-markers" style="width: 361px;"></div>')},
                             {caption: '--'},
                             this.mnuNumberChangeLevel = new Common.UI.MenuItem({
+                                cls: 'list-level',
                                 caption: this.textChangeLevel,
-                                style: 'padding-right:20px;',
                                 disabled: (this.mnuNumbersPicker.conf.index || 0)==0,
                                 menu: new Common.UI.Menu({
                                     cls: 'list-settings-level',
@@ -2146,11 +2162,11 @@ define([
                         cls: 'shifted-left',
                         style: 'min-width: 177px',
                         items: [
-                            {template: _.template('<div id="id-toolbar-menu-multilevels" class="menu-markers" style="width: 362px; margin: 0 0 0 9px;"></div>')},
+                            {template: _.template('<div id="id-toolbar-menu-multilevels" class="menu-markers" style="width: 362px;"></div>')},
                             {caption: '--'},
                             this.mnuMultiChangeLevel = new Common.UI.MenuItem({
+                                cls: 'list-level',
                                 caption: this.textChangeLevel,
-                                style: 'padding-right:20px;',
                                 disabled: (this.mnuMultilevelPicker.conf.index || 0)==0,
                                 menu: new Common.UI.Menu({
                                     cls: 'list-settings-level',
diff --git a/apps/documenteditor/main/app/view/Viewport.js b/apps/documenteditor/main/app/view/Viewport.js
index 799325fd3..3c05a1c55 100644
--- a/apps/documenteditor/main/app/view/Viewport.js
+++ b/apps/documenteditor/main/app/view/Viewport.js
@@ -104,33 +104,46 @@ define([
 
             $container = $('#viewport-hbox-layout', this.$el);
             var items = $container.find(' > .layout-item');
+            let iarray = [{ // left menu chat & comment
+                el: items[0],
+                rely: true,
+                alias: 'left',
+                resize: {
+                    hidden: true,
+                    autohide: false,
+                    min: 300,
+                    max: 600
+                }}, { // history versions
+                el: items[3],
+                rely: true,
+                alias: 'history',
+                resize: {
+                    hidden: true,
+                    autohide: false,
+                    min: 300,
+                    max: 600
+                }
+            }, { // sdk
+                el: items[1],
+                stretch: true
+            }, { // right menu
+                el: $(items[2]).hide(),
+                rely: true
+            }
+            ];
+
+            if ( Common.UI.isRTL() ) {
+                iarray[0].resize.min = -600;
+                iarray[0].resize.max = -300;
+                [iarray[1].resize.min, iarray[1].resize.max] = [-600, -300];
+
+                [iarray[0], iarray[3]] = [iarray[3], iarray[0]];
+                [iarray[1], iarray[2]] = [iarray[2], iarray[1]];
+            }
+
             this.hlayout = new Common.UI.HBoxLayout({
                 box: $container,
-                items: [{ // left menu chat & comment
-                        el: items[0],
-                        rely: true,
-                        resize: {
-                            hidden: true,
-                            autohide: false,
-                            min: 300,
-                            max: 600
-                    }}, { // history versions
-                        el: items[3],
-                        rely: true,
-                        resize: {
-                                hidden: true,
-                                autohide: false,
-                                min: 300,
-                                max: 600
-                        }
-                    }, { // sdk
-                        el: items[1],
-                        stretch: true
-                    }, { // right menu
-                        el: $(items[2]).hide(),
-                        rely: true
-                    }
-                ]
+                items: iarray
             });
 
             return this;
diff --git a/apps/documenteditor/main/resources/less/advanced-settings.less b/apps/documenteditor/main/resources/less/advanced-settings.less
index 0ab664c52..6fb57d2d0 100644
--- a/apps/documenteditor/main/resources/less/advanced-settings.less
+++ b/apps/documenteditor/main/resources/less/advanced-settings.less
@@ -63,17 +63,252 @@
     }
 }
 
-#bookmarks-radio-name {
-    display: inline-block;
-    margin-right: 10px;
-    vertical-align: middle;
-}
-
 #id-text-table-spn-fixed, #bookmarks-radio-location {
     display: inline-block;
     vertical-align: middle;
 }
 
+#id-adv-paragraph-indents {
+    .outline-level {
+        float: right;
+
+        .rtl & {
+            float: left;
+        }
+    }
+
+    .margin-right {
+        margin-right: 3px;
+
+        .rtl & {
+            margin-right: 0;
+            margin-left: 3px;
+        }
+    }
+}
+
+#id-adv-paragraph-borders {
+    .border-color {
+        padding-left: 20px;
+
+        .rtl & {
+            padding-left: 0;
+            padding-right: 20px;
+        }
+    }
+
+    .back-color {
+        margin-right: 5px;
+
+        .rtl & {
+            margin-right: 0;
+            margin-left: 5px;
+        }
+    }
+
+    .border-types {
+        text-align: right;
+        margin-left: 9px;
+
+        .rtl & {
+            text-align: left;
+            margin-left: 0;
+            margin-right: 9px;
+        }
+
+        .btn {
+            margin-left: 4px;
+            margin-bottom: 4px;
+
+            .rtl & {
+                margin-left: 0;
+                margin-right: 4px;
+            }
+        }
+    }
+}
+
+#id-adv-paragraph-font {
+    .padding-left {
+        padding-left: 40px;
+
+        .rtl & {
+            padding-left: 0;
+            padding-right: 40px;
+        }
+    }
+
+    .position {
+        margin-left: 15px;
+
+        .rtl & {
+            margin-left: 0;
+            margin-right: 15px;
+        }
+    }
+
+    .ligatures {
+        margin-left: 5px;
+
+        .rtl & {
+            margin-left: 0;
+            margin-right: 5px;
+        }
+    }
+}
+
+#id-adv-paragraph-tabs {
+    .tab-position {
+        margin-right: 8px;
+
+        .rtl & {
+            margin-right: 0;
+            margin-left: 8px;
+        }
+    }
+
+    .margin-right {
+        margin-right: 9px;
+
+        .rtl & {
+            margin-right: 0;
+            margin-left: 9px;
+        }
+    }
+}
+
+#id-adv-paragraph-margins {
+    .padding-left {
+        padding-left: 15px;
+
+        .rtl & {
+            padding-left: 0;
+            padding-right: 15px;
+        }
+    }
+}
+
+#id-adv-table-width, #id-adv-table-cell-props {
+    .margin-right {
+        margin-right: 10px;
+
+        .rtl & {
+            margin-right: 0;
+            margin-left: 10px;
+        }
+    }
+}
+
+#id-adv-table-borders {
+    .border-color {
+        float: right;
+
+        .rtl & {
+            float: left;
+        }
+    }
+
+    .border-types {
+        padding-left: 10px;
+
+        .rtl & {
+            padding-left: 0;
+            padding-right: 10px;
+        }
+
+        .btn {
+            margin-left: 4px;
+            margin-bottom: 4px;
+
+            .rtl & {
+                margin-left: 0;
+                margin-right: 4px;
+            }
+        }
+    }
+
+    .back-color {
+        margin-right: 5px;
+
+        .rtl & {
+            margin-right: 0;
+            margin-left: 5px;
+        }
+    }
+}
+
+#id-adv-table-wrap {
+    .margin-right {
+        margin-right: 5px;
+
+        .rtl & {
+            margin-right: 0;
+            margin-left: 5px;
+        }
+    }
+
+    .number-indent {
+        margin-left: 20px;
+
+        .rtl & {
+            margin-left: 0;
+            margin-right: 20px;
+        }
+    }
+}
+
+#id-adv-image-rotate {
+    #image-advanced-spin-angle {
+        margin-left: 5px;
+
+        .rtl & {
+            margin-left: 0;
+            margin-right: 5px;
+        }
+    }
+
+    .flipped {
+        margin-right: 15px;
+
+        .rtl & {
+            margin-right: 0;
+            margin-left: 15px;
+        }
+    }
+}
+
+#id-adv-image-wrap {
+    .margin-right {
+        margin-right: 7px;
+
+        .rtl & {
+            margin-right: 0;
+            margin-left: 7px;
+        }
+    }
+}
+
+#id-adv-shape-size {
+    .padding-right {
+        padding-right: 15px;
+
+        .rtl & {
+            padding-right: 0;
+            padding-left: 15px;
+        }
+    }
+}
+
+#window-date-time {
+    #datetime-dlg-default {
+        float: right;
+
+        .rtl & {
+            float: left;
+        }
+    }
+}
+
 .advanced-settings-dlg {
     .roles-tableview {
         &.no-borders > .listview .item {
diff --git a/apps/documenteditor/main/resources/less/filemenu.less b/apps/documenteditor/main/resources/less/filemenu.less
index 78a26633f..966fb2071 100644
--- a/apps/documenteditor/main/resources/less/filemenu.less
+++ b/apps/documenteditor/main/resources/less/filemenu.less
@@ -66,6 +66,11 @@
     background-color: @background-normal-ie;
     background-color: @background-normal;
 
+    .rtl & {
+      padding-left: 0;
+      padding-right: 260px;
+    }
+
     .content-box {
       height: 100%;
       padding: 0 20px;
@@ -82,15 +87,36 @@
   }
 }
 
+#id-help-frame {
+    position: absolute;
+    left: 220px;
+    top: 0;
+    right: 0;
+    bottom: 0;
+
+    .rtl & {
+        left: 0;
+        right: 220px;
+    }
+}
+
 #file-menu-panel .panel-context {
   #panel-saveas, #panel-savecopy {
     &.content-box {
       padding: 0 0 0 20px;
+
+      .rtl & {
+        padding: 0 20px 0 0;
+      }
     }
 
     .content-container {
       margin: 30px 0 0 10px;
 
+      .rtl & {
+        margin: 30px 10px 0 0;
+      }
+
       .header {
         .font-size-very-huge();
         margin-bottom: 20px;
@@ -101,6 +127,11 @@
           float: left;
           margin: 0 24px 34px 0;
 
+          .rtl & {
+            float: right;
+            margin: 0 0 34px 24px;
+          }
+
           .btn-doc-format {
             width: 70px;
             height: 90px;
@@ -278,6 +309,34 @@
       }
     }
   }
+
+  #fms-cmb-theme {
+    display: inline-block;
+    margin-right: 15px;
+    vertical-align: middle;
+
+    .rtl & {
+      margin-right: 0;
+      margin-left: 15px;
+    }
+  }
+
+  #fms-chb-dark-mode {
+    display: inline-block;
+    vertical-align: middle;
+    margin-top: 2px;
+  }
+
+  #fms-cmb-macros {
+    display: inline-block;
+    margin-right: 15px;
+    vertical-align: middle;
+
+    .rtl & {
+      margin-right: 0;
+      margin-left: 15px;
+    }
+  }
 }
 
 #panel-createnew {
@@ -287,6 +346,10 @@
     white-space: nowrap;
     margin-top: 30px;
     margin-bottom: 20px;
+
+    .rtl & {
+      padding: 0 10px 10px 0;
+    }
   }
 
   hr {
@@ -415,6 +478,12 @@
     border-right: @scaled-one-px-value-ie solid @border-toolbar-ie;
     border-right: @scaled-one-px-value solid @border-toolbar;
 
+    .rtl & {
+      border-right: none;
+      border-left: @scaled-one-px-value-ie solid @border-toolbar-ie;
+      border-left: @scaled-one-px-value solid @border-toolbar;
+    }
+
     & > .item {
       display: block;
       border: none;
@@ -442,11 +511,19 @@
 
     .help-item-wrap {
       padding: 4px 2px 4px 20px;
+
+      .rtl & {
+        padding: 4px 20px 4px 2px;
+      }
     }
 
     .header-name {
       padding: 16px 2px 4px 10px;
       .font-size-medium();
+
+      .rtl & {
+        padding: 16px 10px 4px 2px;
+      }
     }
   }
 }
@@ -456,6 +533,15 @@
     padding: 0 30px;
   }
 
+  #id-info-btn-edit {
+    margin-right: 10px;
+
+    .rtl & {
+      margin-right: 0;
+      margin-left: 10px;
+    }
+  }
+
   .header {
     margin: 30px 0 20px 0;
     .font-size-very-huge();
@@ -476,11 +562,19 @@
       td {
         padding: 0 20px 5px 0;
 
+        .rtl & {
+          padding: 0 0 5px 20px;
+        }
+
         &.left {
           padding: 5px 10px;
           text-align: right;
           width: 200px;
 
+          .rtl & {
+            text-align: left;
+          }
+
           label {
             .font-weight-bold();
           }
@@ -582,10 +676,18 @@
 
   #fms-btn-delete-pwd {
     margin-left: 16px;
+    .rtl & {
+      margin-left: 0;
+      margin-right: 16px;
+    }
   }
 
   .signature-view-link {
     margin-right: 20px;
+    .rtl & {
+      margin-right: 0;
+      margin-left: 20px;
+    }
   }
 
   .signature-tip {
@@ -714,4 +816,4 @@
       height: calc(100% - 50px);
     }
   }
-}
+}
\ No newline at end of file
diff --git a/apps/documenteditor/main/resources/less/leftmenu.less b/apps/documenteditor/main/resources/less/leftmenu.less
index 6f2b7e151..8aeb99b29 100644
--- a/apps/documenteditor/main/resources/less/leftmenu.less
+++ b/apps/documenteditor/main/resources/less/leftmenu.less
@@ -16,6 +16,11 @@
     background-color: @background-toolbar-ie;
     background-color: @background-toolbar;
     overflow: hidden;
+
+    .rtl & {
+        left: 0;
+        right: 40px;
+    }
 }
 
 #developer-hint, #beta-hint, #limit-hint {
diff --git a/apps/documenteditor/main/resources/less/navigation.less b/apps/documenteditor/main/resources/less/navigation.less
index 06f246f4d..0f5ff0beb 100644
--- a/apps/documenteditor/main/resources/less/navigation.less
+++ b/apps/documenteditor/main/resources/less/navigation.less
@@ -18,6 +18,25 @@
             .font-weight-bold();
             margin-top: 2px;
         }
+
+        #navigation-btn-close {
+            float: right;
+            margin-left: 4px;
+
+            .rtl & {
+                float: left;
+                margin-left: 0;
+                margin-right: 4px;
+            }
+        }
+
+        #navigation-btn-settings {
+            float: right;
+
+            .rtl & {
+                float: left;
+            }
+        }
     }
 
     #navigation-list {
diff --git a/apps/documenteditor/main/resources/less/rightmenu.less b/apps/documenteditor/main/resources/less/rightmenu.less
index 5c210ca99..30e52d9f9 100644
--- a/apps/documenteditor/main/resources/less/rightmenu.less
+++ b/apps/documenteditor/main/resources/less/rightmenu.less
@@ -9,9 +9,395 @@
     }
 }
 .right-panel .settings-panel {
-    label.input-label{
+    label.input-label {
         vertical-align: baseline;
     }
+
+    &#id-paragraph-settings {
+        .input-label.margin {
+            margin-left: 5px;
+
+            .rtl & {
+                margin-left: 0;
+                margin-right: 5px;
+            }
+        }
+    }
+
+    &#id-table-settings {
+        #id-table-menu-template {
+            margin: 5px 5px 5px 10px;
+
+            .rtl & {
+                margin: 5px 10px 5px 5px;
+            }
+
+            .group-description {
+                padding: 3px 0 3px 10px;
+
+                .rtl & {
+                    padding: 3px 10px 3px 0;
+                    text-align: right;
+                }
+            }
+        }
+
+        #table-combo-border-size {
+            display: inline-block;
+            vertical-align: middle;
+            width: 93px;
+        }
+
+        .table-color {
+            display: inline-block;
+            float: right;
+            vertical-align: middle;
+
+            .rtl & {
+                float: left;
+            }
+
+            .input-label {
+                margin-right: 5px;
+
+                .rtl & {
+                    margin-right: 0;
+                    margin-left: 5px;
+                }
+            }
+
+            #table-border-color-btn {
+                display: inline-block;
+            }
+        }
+
+        .input-label.margin {
+            margin-right: 5px;
+
+            .rtl & {
+                margin-right: 0;
+                margin-left: 5px;
+            }
+        }
+
+        #table-btn-distrub-rows, #table-btn-distrub-cols,
+        #table-spin-cell-height, #table-spin-cell-width {
+            display: inline-block;
+            float: right;
+
+            .rtl & {
+                float: left;
+            }
+        }
+
+        #table-btn-distrub-rows, #table-btn-distrub-cols {
+            margin-left: 4px;
+
+            .rtl & {
+                margin-left: 0;
+                margin-right: 4px;
+            }
+        }
+
+        #table-btn-convert-to-text {
+            .btn {
+                width: 100%;
+                text-align: left;
+
+                .rtl & {
+                    text-align: right;
+                }
+            }
+        }
+    }
+
+    &#id-shape-settings {
+        #shape-panel-transparent-fill {
+            width: 100%;
+
+            .header {
+                display: block;
+            }
+
+            .shape-slider {
+                display: inline-block;
+                margin-top: 3px;
+            }
+
+            #shape-spin-transparency {
+                display: inline-block;
+                float: right;
+
+                .rtl & {
+                    float: left;
+                }
+            }
+
+            #shape-slider-transparency {
+                display: inline-block;
+                margin: 0 4px;
+                vertical-align: middle;
+            }
+        }
+
+        #shape-button-270, #shape-button-fliph {
+            display: inline-block;
+            margin-right: 4px;
+
+            .rtl & {
+                margin-right: 0;
+                margin-left: 4px;
+            }
+        }
+
+        #shape-button-90, #shape-button-flipv {
+            display: inline-block;
+        }
+
+        .change-type {
+            .header {
+                margin-top: 3px;
+            }
+
+            #shape-btn-change {
+                display: inline-block;
+                float: right;
+
+                .rtl & {
+                    float: left;
+                }
+            }
+        }
+
+        .shape-direction {
+            float: right;
+
+            .rtl & {
+                float: left;
+            }
+        }
+
+        .angle-label {
+            margin-right: 5px;
+            margin-bottom: 3px;
+
+            .rtl & {
+                margin-right: 0;
+                margin-left: 5px;
+            }
+        }
+
+        .gradient-position {
+            margin-left: 10px;
+
+            .rtl & {
+                margin-left: 0;
+                margin-right: 10px;
+            }
+        }
+
+        #id-shape-menu-direction {
+            .dataview .item {
+                .rtl & {
+                    float: left;
+                }
+            }
+        }
+
+        .texture-img {
+            width: 90px;
+            height: 80px;
+            padding: 14px 20px;
+            border: 1px solid #AFAFAF;
+            border-radius: 2px;
+            background: #ffffff;
+            float:right;
+
+            .rtl & {
+                float: left;
+            }
+        }
+
+        #shape-foreground-color-btn, #shape-background-color-btn {
+            display: inline-block;
+            float:right;
+
+            .rtl & {
+                float: left;
+            }
+        }
+    }
+
+    &#id-image-settings {
+        #image-button-270, #image-button-fliph {
+            display: inline-block;
+            margin-right: 4px;
+
+            .rtl & {
+                margin-right: 0;
+                margin-left: 4px;
+            }
+        }
+
+        #image-button-90, #image-button-flipv {
+            display: inline-block;
+        }
+    }
+
+    &#id-header-settings {
+        #headerfooter-radio-from {
+            display: inline-block;
+            vertical-align: middle;
+            margin-right: 2px;
+
+            .rtl & {
+                margin-right: 0;
+                margin-left: 2px;
+            }
+        }
+
+        #headerfooter-radio-prev {
+            margin-bottom: 5px;
+        }
+
+        #headerfooter-spin-from {
+            display: inline-block;
+            vertical-align: middle;
+        }
+
+        #headerfooter-button-top-left,
+        #headerfooter-button-top-center,
+        #headerfooter-button-top-right,
+        #headerfooter-button-bottom-left,
+        #headerfooter-button-bottom-center,
+        #headerfooter-button-bottom-right {
+            display: inline-block;
+            margin-right: 5px;
+
+            .rtl & {
+                margin-right: 0;
+                margin-left: 5px;
+            }
+        }
+    }
+
+    &#id-textart-settings {
+        #textart-spin-transparency {
+            display: inline-block;
+            float: right;
+
+            .rtl & {
+                float: left;
+            }
+        }
+
+        #textart-panel-gradient-fill {
+            .textart-direction {
+                float: right;
+
+                .rtl & {
+                    float: left;
+                }
+            }
+        }
+
+        .angle-label {
+            margin-bottom: 3px;
+            margin-right: 5px;
+
+            .rtl & {
+                margin-right: 0;
+                margin-left: 5px;
+            }
+        }
+
+        #id-textart-menu-direction {
+            .dataview .item {
+                .rtl & {
+                    float: left;
+                }
+            }
+        }
+
+        .gradient-position {
+            margin-left: 10px;
+
+            .rtl & {
+                margin-left: 0;
+                margin-right: 10px;
+            }
+        }
+    }
+
+    &#id-mail-merge-settings {
+        #mmerge-button-first,
+        #mmerge-button-prev {
+            display: inline-block;
+            margin-right: 4px;
+
+            .rtl & {
+                margin-right: 0;
+                margin-left: 4px;
+            }
+        }
+
+        #mmerge-field-num {
+            display:inline-block;
+            vertical-align: middle;
+        }
+
+        #mmerge-button-next,
+        #mmerge-button-last {
+            display: inline-block;
+            margin-left: 4px;
+
+            .rtl & {
+                margin-left: 0;
+                margin-right: 4px;
+            }
+        }
+
+        #mmerge-radio-all, #mmerge-radio-current {
+            margin-bottom: 5px;
+        }
+
+        #mmerge-radio-from-to {
+            display: inline-block;
+            vertical-align: middle;
+            margin-right: 2px;
+
+            .rtl & {
+                margin-right: 0;
+                margin-left: 2px;
+            }
+        }
+
+        #mmerge-field-from, #mmerge-field-to {
+            display: inline-block;
+            vertical-align: middle;
+        }
+
+        .text-to-label {
+            width: 30px;
+            text-align: right;
+            vertical-align: middle;
+            margin-right: 2px;
+
+            .rtl & {
+                text-align: left;
+                margin-right: 0;
+                margin-left: 2px;
+            }
+        }
+
+        .portal-button {
+            text-align: right;
+
+            .rtl & {
+                text-align: left;
+            }
+        }
+    }
 }
 
 .ie {
diff --git a/apps/documenteditor/main/resources/less/statusbar.less b/apps/documenteditor/main/resources/less/statusbar.less
index 7a995d090..e9f168a4f 100644
--- a/apps/documenteditor/main/resources/less/statusbar.less
+++ b/apps/documenteditor/main/resources/less/statusbar.less
@@ -6,6 +6,22 @@
         position: relative;
     }
 
+    #label-pages {
+        margin-left: 40px;
+        .rtl & {
+            margin-left: 0;
+            margin-right: 40px;
+        }
+    }
+
+    #btn-zoom-up {
+        margin-right: 40px;
+        .rtl & {
+            margin-right: 0;
+            margin-left: 40px;
+        }
+    }
+
     #label-pages, #label-zoom {
         cursor: pointer;
     }
@@ -26,12 +42,12 @@
         text-align: center;
     }
 
-    #btn-zoom-topage {
-        margin-right: 8px;
-    }
-
-    #btn-zoom-towidth {
+    #btn-zoom-topage, #btn-zoom-towidth {
         margin-right: 8px;
+        .rtl & {
+            margin-right: 0;
+            margin-left: 8px;
+        }
     }
 
     .status-group {
@@ -81,6 +97,11 @@
             min-width: 80px;
             margin-left: -4px;
 
+            .rtl & {
+                margin-left: 0;
+                margin-right: -4px;
+            }
+
             li {
                 text-align: center;
 
@@ -97,6 +118,9 @@
 
         li {
             text-align: left;
+            .rtl & {
+                text-align: right;
+            }
         }
     }
 
@@ -106,9 +130,21 @@
         margin-bottom: 2px;
         min-width: 130px;
 
+        .rtl & {
+            margin-left: 0;
+            margin-right: 40px;
+        }
+
         > label {
             display: inline-block;
             margin-right: 10px;
+            float:left;
+            line-height:22px;
+            .rtl & {
+                margin-right: 0;
+                margin-left: 10px;
+                float: right;
+            }
         }
 
         > input[type=text] {
@@ -125,6 +161,12 @@
         width: 285px;
         .font-size-medium();
 
+        .rtl & {
+            padding: 14px 14px 14px 0;
+            margin-left: 0;
+            margin-right: 137px;
+        }
+
         > label {
             white-space: normal;
         }
@@ -145,6 +187,11 @@
                     margin-right: 15px;
                     overflow: hidden;
 
+                    .rtl & {
+                        margin-right: 0;
+                        margin-left: 15px;
+                    }
+
                     &.offline, &.viewmode {
                         display: none;
                     }
@@ -167,6 +214,10 @@
                 white-space: nowrap;
                 text-overflow: ellipsis;
                 vertical-align: middle;
+                .rtl & {
+                    padding-left: 0;
+                    padding-right: 16px;
+                }
             }
         }
     }
@@ -177,5 +228,19 @@
 
     #btn-select-tool {
         margin-right: 8px;
+        .rtl & {
+            margin-right: 0;
+            margin-left: 8px;
+        }
+    }
+
+    .lang-menu {
+        li a {
+            padding-left: 28px !important;
+            .rtl & {
+                padding-left: 20px !important;
+                padding-right: 28px !important;
+            }
+        }
     }
 }
diff --git a/apps/documenteditor/main/resources/less/toolbar.less b/apps/documenteditor/main/resources/less/toolbar.less
index c8fbe2209..538db9bb7 100644
--- a/apps/documenteditor/main/resources/less/toolbar.less
+++ b/apps/documenteditor/main/resources/less/toolbar.less
@@ -113,6 +113,11 @@
         //max-width: 95px;
         overflow: hidden;
         text-overflow: ellipsis;
+
+        .rtl & {
+            float: right;
+            padding: 5px 20px 5px 5px;
+        }
     }
 
     .zoom {
@@ -121,6 +126,24 @@
         min-width: 40px;
         text-align: center;
     }
+
+    .next {
+        float: right;
+        margin: 2px 5px 0 0;
+        .rtl & {
+            float: left;
+            margin: 2px 0 0 0 !important;
+        }
+    }
+
+    .prev {
+        float: right;
+        margin-top: 2px;
+        .rtl & {
+            float: left;
+            margin: 2px 0 0 5px;
+        }
+    }
 }
 
 
@@ -205,6 +228,283 @@
         }
     }
 }
+
+#id-toolbar-btn-markers,
+#id-toolbar-btn-numbering,
+#id-toolbar-btn-multilevels {
+    .menu-markers {
+        margin: 0 0 0 9px;
+
+        .rtl & {
+            margin: 0 9px 0 0;
+        }
+    }
+
+    .list-level > a {
+        padding-right: 20px;
+
+        .rtl & {
+            padding-right: 12px;
+            padding-left: 20px;
+        }
+    }
+}
+
+.list-settings {
+    .padding-right {
+        padding-right: 5px;
+
+        .rtl & {
+            padding-right: 0;
+            padding-left: 5px;
+        }
+    }
+
+    .padding-left {
+        padding-left: 5px;
+
+        .rtl & {
+            padding-left: 0;
+            padding-right: 5px;
+        }
+    }
+
+    .padding-right-big {
+        padding-right: 10px;
+
+        .rtl & {
+            padding-right: 0;
+            padding-left: 10px;
+        }
+    }
+}
+
+#window-page-margins {
+    .margins-settings {
+        float: left;
+
+        .rtl & {
+            float: right;
+        }
+    }
+
+    .margins-preview {
+        float: right;
+
+        .rtl & {
+            float: left;
+        }
+    }
+
+    .margin-left {
+        margin-left: 8px;
+
+        .rtl & {
+            margin-left: 0;
+            margin-right: 8px;
+        }
+    }
+}
+
+#window-page-size {
+    .padding-right {
+        padding-right: 10px;
+
+        .rtl & {
+            padding-right: 0;
+            padding-left: 10px;
+        }
+    }
+}
+
+#window-line-numbers {
+    .margin-right {
+        margin-right: 9px;
+
+        .rtl & {
+            margin-right: 0;
+            margin-left: 9px;
+        }
+    }
+}
+
+#window-custom-columns {
+    #custom-columns-spin-num, #custom-columns-spin-spacing {
+        float: right;
+
+        .rtl & {
+            float: left;
+        }
+    }
+}
+
+#window-note-settings {
+    #note-settings-combo-footnote,
+    #note-settings-combo-endnote {
+        float: right;
+
+        .rtl & {
+            float: left;
+        }
+    }
+
+    .margin-right {
+        margin-right: 10px;
+
+        .rtl & {
+            margin-right: 0;
+            margin-left: 10px;
+        }
+    }
+}
+
+#window-table-contents {
+    .canvas-box {
+        float: right;
+
+        .rtl & {
+            float: left;
+        }
+    }
+
+    .margin-left {
+        margin-left: 10px;
+
+        .rtl & {
+            margin-left: 0;
+            margin-right: 10px;
+        }
+    }
+
+    .label-style {
+        margin-left: 23px;
+
+        .rtl & {
+            margin-left: 0;
+            margin-right: 23px;
+        }
+    }
+}
+
+#window-hyperlink {
+    #id-dlg-hyperlink-external {
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 0;
+
+        .rtl & {
+            .border-radius(@border-radius-small);
+            border-top-left-radius: 0;
+            border-bottom-left-radius: 0;
+
+        }
+    }
+
+    #id-dlg-hyperlink-internal {
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
+        border-left-width: 0;
+        margin-left: -1px;
+
+        .rtl & {
+            border: @scaled-one-px-value solid @border-regular-control;
+            .border-radius(@border-radius-small);
+            margin-left: 0;
+            border-top-right-radius: 0;
+            border-bottom-right-radius: 0;
+            border-right-width: 0;
+            margin-right: -1px;
+        }
+    }
+}
+
+#window-bookmarks {
+    .margin-right {
+        margin-right: 10px;
+
+        .rtl & {
+            margin-right: 0;
+            margin-left: 10px;
+        }
+    }
+
+    #bookmarks-btn-goto {
+        margin-right: 5px;
+
+        .rtl & {
+            margin-right: 0;
+            margin-left: 5px;
+        }
+    }
+
+    #id-dlg-copy-btn {
+        margin-left: 5px;
+
+        .rtl & {
+            margin-left: 0;
+            margin-right: 5px;
+        }
+    }
+
+    #bookmarks-btn-delete {
+        float: right;
+
+        .rtl & {
+            float: left;
+        }
+    }
+
+    #bookmarks-radio-name {
+        display: inline-block;
+        margin-right: 10px;
+        vertical-align: middle;
+
+        .rtl & {
+            margin-right: 0;
+            margin-left: 10px;
+        }
+    }
+}
+
+#window-caption {
+    .margin-right {
+        margin-right: 10px;
+
+        .rtl & {
+            margin-right: 0;
+            margin-left: 10px;
+        }
+    }
+}
+
+#window-cross-ref {
+    .padding-right {
+        padding-right: 5px;
+
+        .rtl & {
+            padding-right: 0;
+            padding-left: 5px;
+        }
+    }
+
+    .padding-left {
+        padding-left: 5px;
+
+        .rtl & {
+            padding-left: 0;
+            padding-right: 5px;
+        }
+    }
+
+    #id-dlg-cross-separate {
+        margin-right: 10px;
+
+        .rtl & {
+            margin-right: 0;
+            margin-left: 10px;
+        }
+    }
+}
+
 .dropdown-menu.menu-roles,
 .input-group-nr.menu-roles {
     span.color {
@@ -216,4 +516,12 @@
         border: @scaled-one-px-value-ie solid @border-color-shading-ie;
         border: @scaled-one-px-value solid @border-color-shading;
     }
-}
\ No newline at end of file
+}
+
+#id-toolbar-menu-insart {
+    margin-left: 5px;
+    .rtl & {
+        margin-left: 0;
+        margin-right: 5px;
+    }
+}
diff --git a/apps/presentationeditor/main/app/controller/Main.js b/apps/presentationeditor/main/app/controller/Main.js
index 8f28d6424..58abd61bc 100644
--- a/apps/presentationeditor/main/app/controller/Main.js
+++ b/apps/presentationeditor/main/app/controller/Main.js
@@ -394,6 +394,7 @@ define([
                 this.appOptions.compatibleFeatures = (typeof (this.appOptions.customization) == 'object') && !!this.appOptions.customization.compatibleFeatures;
                 this.appOptions.canRequestSharingSettings = this.editorConfig.canRequestSharingSettings;
                 this.appOptions.mentionShare = !((typeof (this.appOptions.customization) == 'object') && (this.appOptions.customization.mentionShare==false));
+                this.appOptions.uiRtl = Common.localStorage.getBool("ui-rtl");
 
                 this.appOptions.user.guest && this.appOptions.canRenameAnonymous && Common.NotificationCenter.on('user:rename', _.bind(this.showRenameUserDialog, this));
 
diff --git a/apps/presentationeditor/main/app/controller/Viewport.js b/apps/presentationeditor/main/app/controller/Viewport.js
index 11dab34ef..38ddd1020 100644
--- a/apps/presentationeditor/main/app/controller/Viewport.js
+++ b/apps/presentationeditor/main/app/controller/Viewport.js
@@ -222,7 +222,7 @@ define([
                 this.viewport.hlayout.doLayout();
                 break;
             case 'history':
-                var panel = this.viewport.hlayout.items[1];
+                var panel = this.viewport.hlayout.getItem('history');
                 if (panel.resize.el) {
                     this.boxSdk.css('border-left', '');
                     panel.resize.el.show();
@@ -230,7 +230,7 @@ define([
                 this.viewport.hlayout.doLayout();
                 break;
             case 'leftmenu':
-                var panel = this.viewport.hlayout.items[0];
+                var panel = this.viewport.hlayout.getItem('left');
                 if (panel.resize.el) {
                     if (panel.el.width() > 40) {
                         this.boxSdk.css('border-left', '');
diff --git a/apps/presentationeditor/main/app/template/HeaderFooterDialog.template b/apps/presentationeditor/main/app/template/HeaderFooterDialog.template
index 386e70bae..0b5c3a1a1 100644
--- a/apps/presentationeditor/main/app/template/HeaderFooterDialog.template
+++ b/apps/presentationeditor/main/app/template/HeaderFooterDialog.template
@@ -3,18 +3,18 @@
         <div id="hf-dlg-chb-datetime"></div>
     </td></tr>
     <tr><td class="padding-large">
-        <table id="hf-dlg-tbl-datetime" cols="2" style="margin-left: 22px;">
+        <table id="hf-dlg-tbl-datetime" cols="2">
             <tr>
                 <td colspan="2" class="padding-very-small">
                     <div id="hf-dlg-radio-update"></div>
                 </td>
             </tr>
             <tr>
-                <td class="padding-small" style="padding-left: 22px;">
+                <td class="padding-small format-combo">
                     <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" style="padding-left: 5px;">
+                <td class="padding-small lang-combo">
                     <label  style="display:block;" class="input-label"><%= scope.textLang %></label>
                     <div id="hf-dlg-combo-lang" style="width: 100%;"></div>
                 </td>
@@ -26,7 +26,7 @@
             </tr>
             <tr>
                 <td colspan="2">
-                    <div id="hf-dlg-input-fixed" class="input-row" style="margin-left: 22px;"></div>
+                    <div id="hf-dlg-input-fixed" class="input-row"></div>
                 </td>
             </tr>
         </table>
@@ -38,7 +38,7 @@
         <div id="hf-dlg-chb-text"></div>
     </td></tr>
     <tr><td class="padding-large">
-        <div id="hf-dlg-text" class="input-row" style="margin-left: 22px;"></div>
+        <div id="hf-dlg-text" class="input-row"></div>
     </td></tr>
     <tr><td class="padding-small"></td></tr>
     <tr><td class="padding-small">
diff --git a/apps/presentationeditor/main/app/template/ImageSettings.template b/apps/presentationeditor/main/app/template/ImageSettings.template
index 1341a2ed0..be505152e 100644
--- a/apps/presentationeditor/main/app/template/ImageSettings.template
+++ b/apps/presentationeditor/main/app/template/ImageSettings.template
@@ -41,15 +41,15 @@
         <td class="padding-small" width="50%">
             <label class="input-label"><%= scope.textRotate90 %></label>
             <div>
-                <div id="image-button-270" style="display: inline-block;margin-right: 4px;"></div>
-                <div id="image-button-90" style="display: inline-block;"></div>
+                <div id="image-button-270"></div>
+                <div id="image-button-90"></div>
             </div>
         </td>
         <td class="padding-small" width="50%">
             <label class="input-label"><%= scope.textFlip %></label>
             <div>
-                <div id="image-button-fliph" style="display: inline-block;margin-right: 4px;"></div>
-                <div id="image-button-flipv" style="display: inline-block;"></div>
+                <div id="image-button-fliph"></div>
+                <div id="image-button-flipv"></div>
             </div>
         </td>
     </tr>
diff --git a/apps/presentationeditor/main/app/template/ImageSettingsAdvanced.template b/apps/presentationeditor/main/app/template/ImageSettingsAdvanced.template
index bd32ccc50..74c05616f 100644
--- a/apps/presentationeditor/main/app/template/ImageSettingsAdvanced.template
+++ b/apps/presentationeditor/main/app/template/ImageSettingsAdvanced.template
@@ -58,7 +58,7 @@
     <div class="inner-content  padding-large">
         <div style="width: 100%;">
             <label class="input-label"><%= scope.textAngle %></label>
-            <div id="image-advanced-spin-angle" style="display: inline-block; margin-left: 5px;"></div>
+            <div id="image-advanced-spin-angle" style="display: inline-block;"></div>
         </div>
     </div>
     <div class="separator horizontal padding-large"></div>
@@ -66,7 +66,7 @@
         <table cols="2">
             <tr>
                 <td rowspan="2" class="padding-small" style="vertical-align: top;">
-                    <label class="input-label" style="margin-right: 15px;vertical-align: top;"><%= scope.textFlipped %></label>
+                    <label class="input-label flipped" style="vertical-align: top;"><%= scope.textFlipped %></label>
                 </td>
                 <td class="padding-small">
                     <div id="image-advanced-checkbox-hor"></div>
diff --git a/apps/presentationeditor/main/app/template/ParagraphSettingsAdvanced.template b/apps/presentationeditor/main/app/template/ParagraphSettingsAdvanced.template
index 397e41ebd..fb2079162 100644
--- a/apps/presentationeditor/main/app/template/ParagraphSettingsAdvanced.template
+++ b/apps/presentationeditor/main/app/template/ParagraphSettingsAdvanced.template
@@ -8,11 +8,11 @@
         </div>
         <div class="padding-very-small"><label class="header"><%= scope.strIndent %></label></div>
         <div>
-            <div class="padding-large" style="display: inline-block;margin-right: 3px;">
+            <div class="padding-large margin-right" style="display: inline-block;">
                 <label class="input-label"><%= scope.strIndentsLeftText %></label>
                 <div id="paragraphadv-spin-indent-left"></div>
             </div><!--
-         --><div class="padding-large" style="display: inline-block;margin-right: 3px;">
+         --><div class="padding-large margin-right" style="display: inline-block;">
                 <label class="input-label"><%= scope.strIndentsRightText %></label>
                 <div id="paragraphadv-spin-indent-right"></div>
             </div><!--
@@ -21,18 +21,18 @@
                     <label class="input-label"><%= scope.strIndentsSpecial %></label>
                 </div>
                 <div>
-                    <div id="paragraphadv-spin-special" style="display: inline-block;margin-right: 3px;"></div><!--
+                    <div id="paragraphadv-spin-special" class="margin-right" style="display: inline-block;"></div><!--
                  --><div id="paragraphadv-spin-special-by" style="display: inline-block;"></div>
                 </div>
             </div>
         </div>
         <div class="padding-very-small"><label class="header"><%= scope.strSpacing %></label></div>
         <div>
-            <div style="display: inline-block;margin-right: 3px;">
+            <div class="margin-right" style="display: inline-block;">
                 <label class="input-label"><%= scope.strIndentsSpacingBefore %></label>
                 <div id="paragraphadv-spin-spacing-before"></div>
             </div><!--
-         --><div style="display: inline-block;margin-right: 3px;">
+         --><div class="margin-right" style="display: inline-block;">
                 <label class="input-label"><%= scope.strIndentsSpacingAfter %></label>
                 <div id="paragraphadv-spin-spacing-after"></div>
             </div><!--
@@ -41,7 +41,7 @@
                     <label class="input-label"><%= scope.strIndentsLineSpacing %></label>
                 </div>
                 <div>
-                    <div id="paragraphadv-spin-line-rule" style="display: inline-block;margin-right: 3px;"></div><!--
+                    <div id="paragraphadv-spin-line-rule" class="margin-right" style="display: inline-block;"></div><!--
                  --><div id="paragraphadv-spin-line-height" style="display: inline-block;"></div>
                 </div>
             </div>
@@ -63,7 +63,7 @@
                 <td class="padding-small">
                     <div id="paragraphadv-checkbox-strike"></div>
                 </td>
-                <td class="padding-small" style="padding-left: 40px;">
+                <td class="padding-small padding-left">
                     <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" style="padding-left: 40px;">
+                <td class="padding-small padding-left">
                     <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" style="padding-left: 40px;">
+                <td class="padding-large padding-left">
                     <div id="paragraphadv-checkbox-all-caps"></div>
                 </td>
             </tr>
@@ -105,11 +105,11 @@
 
         </div>
         <div>
-            <div class="padding-large" style="display: inline-block; margin-right: 9px;">
+            <div class="padding-large margin-right" style="display: inline-block;">
                 <label class="input-label"><%= scope.textTabPosition %></label>
                 <div id="paraadv-spin-tab"></div>
             </div>
-            <div class="padding-large" style=" display: inline-block; margin-right: 9px;">
+            <div class="padding-large margin-right" style=" display: inline-block;">
                 <label class="input-label"><%= scope.textAlign %></label>
                 <div id="paraadv-cmb-align"></div>
             </div>
@@ -120,8 +120,8 @@
             </div>
         </div>
         <div>
-            <button type="button" class="btn btn-text-default" id="paraadv-button-add-tab" style="width:108px;margin-right: 9px; display: inline-block;"><%= scope.textSet %></button>
-            <button type="button" class="btn btn-text-default" id="paraadv-button-remove-tab" style="width:108px;margin-right: 9px; display: inline-block;"><%= scope.textRemove %></button>
+            <button type="button" class="btn btn-text-default margin-right" id="paraadv-button-add-tab" style="width:108px; display: inline-block;"><%= scope.textSet %></button>
+            <button type="button" class="btn btn-text-default margin-right" id="paraadv-button-remove-tab" style="width:108px; display: inline-block;"><%= scope.textRemove %></button>
             <button type="button" class="btn btn-text-default" id="paraadv-button-remove-all" style="width:108px;display: inline-block;"><%= scope.textRemoveAll %></button>
         </div>
     </div>
diff --git a/apps/presentationeditor/main/app/template/ShapeSettings.template b/apps/presentationeditor/main/app/template/ShapeSettings.template
index 4d8534512..87464cb90 100644
--- a/apps/presentationeditor/main/app/template/ShapeSettings.template
+++ b/apps/presentationeditor/main/app/template/ShapeSettings.template
@@ -26,7 +26,7 @@
                         <div id="shape-combo-fill-type" style="width: 90px;"></div>
                     </td>
                     <td rowspan="2">
-                        <div style="width: 90px; height: 80px; padding: 14px 20px; border: 1px solid #AFAFAF; border-radius: 2px; background: #ffffff;float:right;">
+                        <div class="texture-img" style="width: 90px; height: 80px;">
                             <div id="shape-texture-img" style="width: 50px;height: 50px;"></div>
                         </div>
                     </td>
@@ -44,11 +44,11 @@
                 <div id="shape-combo-pattern" style="width: 100%; height: 42px; margin-bottom: 8px;"></div>
                 <div style="width: 100%; height: 25px; margin-bottom: 8px;">
                     <label class="input-label" style="margin-top: 3px;"><%= scope.strForeground %></label>
-                    <div id="shape-foreground-color-btn" style="display: inline-block; float:right;"></div>
+                    <div id="shape-foreground-color-btn"></div>
                 </div>
                 <div style="width: 100%; height: 25px;">
                     <label class="input-label" style="margin-top: 3px;"><%= scope.strBackground %></label>
-                    <div id="shape-background-color-btn" style="display: inline-block; float:right;"></div>
+                    <div id="shape-background-color-btn"></div>
                 </div>
             </div>
             <div id="shape-panel-gradient-fill" class="settings-hidden padding-small" style="width: 100%;">
@@ -61,7 +61,7 @@
                             </div>
                         </td>
                         <td rowspan="2" style="width: 100%;">
-                            <div style="float: right;">
+                            <div class="grad-direction">
                                 <label class="input-label"><%= scope.textDirection %></label>
                                 <div id="shape-button-direction"></div>
                             </div>
@@ -69,7 +69,7 @@
                     </tr>
                     <tr valign="bottom">
                         <td>
-                            <label class="input-label" style="margin-right: 5px;margin-bottom: 3px;"><%= scope.textAngle %></label>
+                            <label class="input-label angle-label"><%= scope.textAngle %></label>
                         </td>
                         <td>
                             <div id="shape-spin-gradient-angle" style="display: inline-block; width: 60px;"></div>
@@ -86,7 +86,7 @@
                         <label class="input-label" style=""><%= scope.strColor %></label>
                         <div id="shape-gradient-color-btn"></div>
                     </div>
-                    <div style="margin-left: 10px;">
+                    <div class="gradient-position">
                         <label class="input-label" style=""><%= scope.textPosition %></label>
                         <div id="shape-gradient-position"></div>
                     </div>
@@ -108,7 +108,7 @@
                     <div id="shape-slider-transparency" style="display: inline-block;margin: 0 4px; vertical-align: middle;"></div>
                     <label id="shape-lbl-transparency-end">100</label>
                 </div>
-                <div id="shape-spin-transparency" style="display: inline-block;float: right;"></div>
+                <div id="shape-spin-transparency"></div>
             </div>
         </td>
     </tr>
@@ -159,15 +159,15 @@
                     <td class="padding-small" width="50%">
                         <label class="input-label"><%= scope.textRotate90 %></label>
                         <div>
-                            <div id="shape-button-270" style="display: inline-block;margin-right: 4px;"></div>
-                            <div id="shape-button-90" style="display: inline-block;"></div>
+                            <div id="shape-button-270"></div>
+                            <div id="shape-button-90"></div>
                         </div>
                     </td>
                     <td class="padding-small" width="50%">
                         <label class="input-label"><%= scope.textFlip %></label>
                         <div>
-                            <div id="shape-button-fliph" style="display: inline-block;margin-right: 4px;"></div>
-                            <div id="shape-button-flipv" style="display: inline-block;"></div>
+                            <div id="shape-button-fliph"></div>
+                            <div id="shape-button-flipv"></div>
                         </div>
                     </td>
                 </tr>
@@ -182,7 +182,7 @@
     <tr class="change-type">
         <td class="padding-small">
             <label class="header" style="margin-top: 3px;"><%= scope.strChange %></label>
-            <div id="shape-btn-change" style="display: inline-block; float:right;"></div>
+            <div id="shape-btn-change"></div>
         </td>
     </tr>
     <tr>
diff --git a/apps/presentationeditor/main/app/template/ShapeSettingsAdvanced.template b/apps/presentationeditor/main/app/template/ShapeSettingsAdvanced.template
index d8da572f2..49b3bc75a 100644
--- a/apps/presentationeditor/main/app/template/ShapeSettingsAdvanced.template
+++ b/apps/presentationeditor/main/app/template/ShapeSettingsAdvanced.template
@@ -56,7 +56,7 @@
     <div class="inner-content  padding-large">
         <div style="width: 100%;">
             <label class="input-label"><%= scope.textAngle %></label>
-            <div id="shape-advanced-spin-angle" style="display: inline-block; margin-left: 5px;"></div>
+            <div id="shape-advanced-spin-angle" style="display: inline-block;"></div>
         </div>
     </div>
     <div class="separator horizontal padding-large"></div>
@@ -64,7 +64,7 @@
         <table cols="2">
             <tr>
                 <td rowspan="2" class="padding-small" style="vertical-align: top;">
-                    <label class="input-label" style="margin-right: 15px;vertical-align: top;"><%= scope.textFlipped %></label>
+                    <label class="input-label flipped" style="vertical-align: top;"><%= scope.textFlipped %></label>
                 </td>
                 <td class="padding-small">
                     <div id="shape-advanced-checkbox-hor"></div>
diff --git a/apps/presentationeditor/main/app/template/SlideSettings.template b/apps/presentationeditor/main/app/template/SlideSettings.template
index df87a6486..91ec7097c 100644
--- a/apps/presentationeditor/main/app/template/SlideSettings.template
+++ b/apps/presentationeditor/main/app/template/SlideSettings.template
@@ -44,11 +44,11 @@
                 <div id="slide-combo-pattern" style="width: 100%; height: 42px; margin-bottom: 8px;"></div>
                 <div style="width: 100%; height: 25px; margin-bottom: 8px;">
                     <label class="input-label" style="margin-top: 3px;"><%= scope.strForeground %></label>
-                    <div id="slide-foreground-color-btn" style="display: inline-block; float:right;"></div>
+                    <div id="slide-foreground-color-btn"></div>
                 </div>
                 <div style="width: 100%; height: 25px;">
                     <label class="input-label" style="margin-top: 3px;"><%= scope.strBackground %></label>
-                    <div id="slide-background-color-btn" style="display: inline-block; float:right;"></div>
+                    <div id="slide-background-color-btn"></div>
                 </div>
             </div>
             <div id="slide-panel-gradient-fill" class="settings-hidden padding-small" style="width: 100%;">
@@ -61,7 +61,7 @@
                             </div>
                         </td>
                         <td rowspan="2" style="width: 100%;">
-                            <div style="float: right;">
+                            <div class="slide-direction">
                                 <label class="input-label"><%= scope.textDirection %></label>
                                 <div id="slide-button-direction"></div>
                             </div>
@@ -69,7 +69,7 @@
                     </tr>
                     <tr valign="bottom">
                         <td>
-                            <label class="input-label" style="margin-right: 5px;margin-bottom: 3px;"><%= scope.textAngle %></label>
+                            <label class="input-label angle-label"><%= scope.textAngle %></label>
                         </td>
                         <td>
                             <div id="slide-spin-gradient-angle" style="display: inline-block; width: 60px;"></div>
@@ -86,7 +86,7 @@
                         <label class="input-label" style=""><%= scope.strColor %></label>
                         <div id="slide-gradient-color-btn"></div>
                     </div>
-                    <div style="margin-left: 10px;">
+                    <div class="gradient-position">
                         <label class="input-label" style=""><%= scope.textPosition %></label>
                         <div id="slide-gradient-position"></div>
                     </div>
@@ -108,7 +108,7 @@
                     <div id="slide-slider-transparency" style="display: inline-block;margin: 0 4px; vertical-align: middle;"></div>
                     <label id="slide-lbl-transparency-end">100</label>
                 </div>
-                <div id="slide-spin-transparency" style="display: inline-block;float: right;"></div>
+                <div id="slide-spin-transparency"></div>
             </div>
         </td>
     </tr>
diff --git a/apps/presentationeditor/main/app/template/StatusBar.template b/apps/presentationeditor/main/app/template/StatusBar.template
index 8df4781e6..fd7cd0465 100644
--- a/apps/presentationeditor/main/app/template/StatusBar.template
+++ b/apps/presentationeditor/main/app/template/StatusBar.template
@@ -1,27 +1,27 @@
 
 <div class="statusbar" style="display:table;">
     <div class="status-group">
-        <div id="slot-status-btn-preview" style="display: inline-block;margin-left: 9px;" class="margin-top-small"></div>
+        <div id="slot-status-btn-preview" style="display: inline-block;" class="margin-top-small"></div>
     </div>
     <div class="status-group dropup">
-        <label id="status-label-pages" class="status-label dropdown-toggle margin-top-large" style="margin-left: 7px; display: none;" data-toggle="dropdown" data-hint="0" data-hint-direction="top" data-hint-offset="-3, 0"><%= Common.Utils.String.format(scope.pageIndexText, 1, 1) %></label>
+        <label id="status-label-pages" class="status-label dropdown-toggle margin-top-large" style="display: none;" data-toggle="dropdown" data-hint="0" data-hint-direction="top" data-hint-offset="-3, 0"><%= Common.Utils.String.format(scope.pageIndexText, 1, 1) %></label>
         <div id="status-goto-box" class="dropdown-menu">
-            <label style="float:left;line-height:22px;"><%= scope.goToPageText %></label>
+            <label><%= scope.goToPageText %></label>
             <div id="status-goto-page" style="display:inline-block;"></div>
         </div>
     </div>
     <div id="status-users-ct" class="status-group dropup" style="display:none;">
-        <div class="separator short" style="margin-right: 12px; margin-left: 40px;"></div>
+        <div class="separator short"></div>
         <div id="status-users-block" style="display:inline-block; cursor:pointer;">
             <span id="status-users-icon" class="img-commonctrl" style="margin-bottom: 2px;"></span>
             <label id="status-users-count" class="status-label" style="font-size: 14px; font-weight: normal; margin-top: -1px;">+</label>
         </div>
         <div id="status-users-menu" class="dropdown-menu">
-            <label style="display: block;margin-right: 14px;"><%= scope.tipUsers %></label>
+            <label class="tip-users" style="display: block;"><%= scope.tipUsers %></label>
             <div id="status-users-list"></div>
             <label id="status-change-rights" class="link" style="margin-top: 15px;"><%= scope.txAccessRights %></label>
         </div>
-        <div class="separator short" style="margin-left: 10px;"></div>
+        <div class="separator short"></div>
     </div>
     <div class="status-group" style="width:100%; text-align:center;">
         <label id="status-label-action" class="status-label margin-top-large" data-layout-name="statusBar-actionStatus"></label>
@@ -40,6 +40,6 @@
                 <label id="status-label-zoom" class="status-label">Zoom 100%</label>
             </div>
         </div>
-        <button id="btn-zoom-up" type="button" class="btn small btn-toolbar margin-top-small" style="margin-right:40px;"><span class="icon toolbar__icon btn-zoomup">&nbsp;</span></button>
+        <button id="btn-zoom-up" type="button" class="btn small btn-toolbar margin-top-small"><span class="icon toolbar__icon btn-zoomup">&nbsp;</span></button>
     </div>
 </div>
diff --git a/apps/presentationeditor/main/app/template/TableSettings.template b/apps/presentationeditor/main/app/template/TableSettings.template
index 673ed83a9..33f3ae690 100644
--- a/apps/presentationeditor/main/app/template/TableSettings.template
+++ b/apps/presentationeditor/main/app/template/TableSettings.template
@@ -54,8 +54,8 @@
     <tr>
         <td class="padding-small" colspan=2>
             <div id="table-combo-border-size" style="display: inline-block; vertical-align: middle; width: 93px;"></div>
-            <div style="display: inline-block; float:right;vertical-align: middle;">
-                <label class="input-label" style="margin-right: 5px;"><%= scope.textBorderColor %></label>
+            <div class="border-color">
+                <label class="input-label color-label"><%= scope.textBorderColor %></label>
                 <div id="table-border-color-btn" style="display: inline-block;"></div>
             </div>
         </td>
@@ -85,7 +85,7 @@
     </tr>
     <tr>
         <td class="padding-small" colspan=2 align="right">
-            <label class="input-label" style="margin-right: 5px;"><%= scope.textBackColor %></label>
+            <label class="input-label color-label"><%= scope.textBackColor %></label>
             <div id="table-back-color-btn" style="display: inline-block;text-align:left;"></div>
         </td>
     </tr>
@@ -112,13 +112,13 @@
     <tr>
         <td class="padding-small" colspan=2>
             <label style="margin-top: 3px;"><%= scope.textHeight %></label>
-            <div id="table-spin-cell-height" style="display: inline-block; float:right;"></div>
+            <div id="table-spin-cell-height"></div>
         </td>
     </tr>
     <tr>
         <td class="padding-small" colspan=2>
             <label style="margin-top: 3px;"><%= scope.textWidth %></label>
-            <div id="table-spin-cell-width" style="display: inline-block; float:right;"></div>
+            <div id="table-spin-cell-width"></div>
         </td>
     </tr>
     <tr>
diff --git a/apps/presentationeditor/main/app/template/TextArtSettings.template b/apps/presentationeditor/main/app/template/TextArtSettings.template
index 38d4e8846..8956defd1 100644
--- a/apps/presentationeditor/main/app/template/TextArtSettings.template
+++ b/apps/presentationeditor/main/app/template/TextArtSettings.template
@@ -36,7 +36,7 @@
                         <button type="button" class="btn btn-text-default" id="textart-button-from-file" style="width:90px;" data-hint="1" data-hint-direction="bottom" data-hint-offset="big"><%= scope.textFromFile %></button>
                     </td>
                     <td class="padding-small" width="50%">
-                        <button type="button" class="btn btn-text-default" id="textart-button-from-url" style="width:90px;float:right;" data-hint="1" data-hint-direction="bottom" data-hint-offset="big"><%= scope.textFromUrl %></button>
+                        <button type="button" class="btn btn-text-default" id="textart-button-from-url" style="width:90px;" data-hint="1" data-hint-direction="bottom" data-hint-offset="big"><%= scope.textFromUrl %></button>
                     </td>
                 </tr>
                 <tr>
@@ -44,7 +44,7 @@
                         <div id="textart-combo-fill-type" style="width: 90px;"></div>
                     </td>
                     <td rowspan="2">
-                        <div style="width: 90px; height: 80px; padding: 14px 20px; border: 1px solid #AFAFAF; border-radius: 2px; background: #ffffff;float:right;">
+                        <div class="texture-img" style="width: 90px; height: 80px;">
                             <div id="textart-texture-img" style="width: 50px;height: 50px;"></div>
                         </div>
                     </td>
@@ -62,11 +62,11 @@
                 <div id="textart-combo-pattern" style="width: 100%; height: 42px; margin-bottom: 8px;"></div>
                 <div style="width: 100%; height: 25px; margin-bottom: 8px;">
                     <label class="input-label" style="margin-top: 3px;"><%= scope.strForeground %></label>
-                    <div id="textart-foreground-color-btn" style="display: inline-block; float:right;"></div>
+                    <div id="textart-foreground-color-btn"></div>
                 </div>
                 <div style="width: 100%; height: 25px;">
                     <label class="input-label" style="margin-top: 3px;"><%= scope.strBackground %></label>
-                    <div id="textart-background-color-btn" style="display: inline-block; float:right;"></div>
+                    <div id="textart-background-color-btn"></div>
                 </div>
             </div>
             <div id="textart-panel-gradient-fill" class="settings-hidden padding-small" style="width: 100%;">
@@ -79,7 +79,7 @@
                             </div>
                         </td>
                         <td rowspan="2" style="width: 100%;">
-                            <div style="float: right;">
+                            <div class="grad-direction">
                                 <label class="input-label"><%= scope.textDirection %></label>
                                 <div id="textart-button-direction"></div>
                             </div>
@@ -87,7 +87,7 @@
                     </tr>
                     <tr valign="bottom">
                         <td>
-                            <label class="input-label" style="margin-right: 5px;margin-bottom: 3px;"><%= scope.textAngle %></label>
+                            <label class="input-label angle-label"><%= scope.textAngle %></label>
                         </td>
                         <td>
                             <div id="textart-spin-gradient-angle" style="display: inline-block; width: 60px;"></div>
@@ -104,7 +104,7 @@
                         <label class="input-label" style=""><%= scope.strColor %></label>
                         <div id="textart-gradient-color-btn"></div>
                     </div>
-                    <div style="margin-left: 10px;">
+                    <div class="gradient-position" style="margin-left: 10px;">
                         <label class="input-label" style=""><%= scope.textPosition %></label>
                         <div id="textart-gradient-position"></div>
                     </div>
@@ -126,7 +126,7 @@
                     <div id="textart-slider-transparency" style="display: inline-block;margin: 0 4px; vertical-align: middle;"></div>
                     <label id="textart-lbl-transparency-end">100</label>
                 </div>
-                <div id="textart-spin-transparency" style="display: inline-block;float: right;"></div>
+                <div id="textart-spin-transparency"></div>
             </div>
         </td>
     </tr>
diff --git a/apps/presentationeditor/main/app/template/Toolbar.template b/apps/presentationeditor/main/app/template/Toolbar.template
index 837d0642f..5571fe19d 100644
--- a/apps/presentationeditor/main/app/template/Toolbar.template
+++ b/apps/presentationeditor/main/app/template/Toolbar.template
@@ -46,7 +46,7 @@
                         <span class="btn-slot split" id="slot-btn-changeslide"></span>
                     </div>
                     <div class="elset">
-                        <span class="btn-slot" id="slot-btn-preview"></span>
+                        <span class="btn-slot split" id="slot-btn-preview"></span>
                     </div>
                 </div>
                 <div class="separator long"></div>
diff --git a/apps/presentationeditor/main/app/view/Animation.js b/apps/presentationeditor/main/app/view/Animation.js
index 6d1f4d87d..2b285698f 100644
--- a/apps/presentationeditor/main/app/view/Animation.js
+++ b/apps/presentationeditor/main/app/view/Animation.js
@@ -226,7 +226,7 @@ define([
 
                         if (menu.cmpEl) {
                             menu.menuAlignEl = cmp.cmpEl;
-                            menu.menuAlign = 'tl-tl';
+                            menu.menuAlign = Common.UI.isRTL() ? 'tr-tr' : 'tl-tl';
                             menu.cmpEl.css({
                                 'width': cmp.cmpEl.width() - cmp.openButton.$el.width(),
                                 'min-height': cmp.cmpEl.height()
diff --git a/apps/presentationeditor/main/app/view/DateTimeDialog.js b/apps/presentationeditor/main/app/view/DateTimeDialog.js
index 3e5f3072e..f993cd09e 100644
--- a/apps/presentationeditor/main/app/view/DateTimeDialog.js
+++ b/apps/presentationeditor/main/app/view/DateTimeDialog.js
@@ -50,6 +50,7 @@ define([
             width: 350,
             style: 'min-width: 230px;',
             cls: 'modal-dlg',
+            id: 'window-date-time',
             buttons: ['ok', 'cancel']
         },
 
@@ -73,7 +74,7 @@ define([
                     '<div id="datetime-dlg-format" class="" style="margin-bottom: 10px;width: 100%; height: 162px; overflow: hidden;"></div>',
                     '<div class="input-row">',
                         '<div id="datetime-dlg-update" style="margin-top: 3px;"></div>',
-                        '<button type="button" class="btn btn-text-default auto" id="datetime-dlg-default" style="float: right;">' + this.textDefault + '</button>',
+                        '<button type="button" class="btn btn-text-default auto" id="datetime-dlg-default">' + this.textDefault + '</button>',
                     '</div>',
                 '</div>'
             ].join('');
diff --git a/apps/presentationeditor/main/app/view/FileMenuPanels.js b/apps/presentationeditor/main/app/view/FileMenuPanels.js
index 875b52601..50b6fdb83 100644
--- a/apps/presentationeditor/main/app/view/FileMenuPanels.js
+++ b/apps/presentationeditor/main/app/view/FileMenuPanels.js
@@ -323,6 +323,9 @@ define([
                 '<tr>',
                     '<td colspan="2"><div id="fms-chb-use-alt-key"></div></td>',
                 '</tr>',
+                '<tr>',
+                    '<td colspan="2"><div id="fms-chb-rtl-ui"></div></td>',
+                '</tr>',
                 '<tr class="quick-print">',
                     '<td colspan="2"><div style="display: flex;"><div id="fms-chb-quick-print"></div>',
                         '<span style ="display: flex; flex-direction: column;"><label><%= scope.txtQuickPrint %></label>',
@@ -592,6 +595,14 @@ define([
                 dataHintOffset: 'big'
             });
 
+            this.chRTL = new Common.UI.CheckBox({
+                el: $markup.findById('#fms-chb-rtl-ui'),
+                labelText: this.strRTLSupport,
+                dataHint: '2',
+                dataHintDirection: 'left',
+                dataHintOffset: 'small'
+            });
+
             $markup.find('.btn.primary').each(function(index, el){
                 (new Common.UI.Button({
                     el: $(el)
@@ -732,6 +743,7 @@ define([
             this.lblMacrosDesc.text(item ? item.get('descValue') : this.txtWarnMacrosDesc);
 
             this.chPaste.setValue(Common.Utils.InternalSettings.get("pe-settings-paste-button"));
+            this.chRTL.setValue(Common.localStorage.getBool("ui-rtl"));
             this.chQuickPrint.setValue(Common.Utils.InternalSettings.get("pe-settings-quick-print-button"));
 
             var data = [];
@@ -779,6 +791,7 @@ define([
             Common.Utils.InternalSettings.set("pe-macros-mode", this.cmbMacros.getValue());
 
             Common.localStorage.setItem("pe-settings-paste-button", this.chPaste.isChecked() ? 1 : 0);
+            Common.localStorage.setBool("ui-rtl", this.chRTL.isChecked());
             Common.localStorage.setBool("pe-settings-quick-print-button", this.chQuickPrint.isChecked());
 
             Common.localStorage.save();
@@ -832,6 +845,7 @@ define([
         textForceSave: 'Save to Server',
         txtSpellCheck: 'Spell Checking',
         txtCacheMode: 'Default cache mode',
+        strRTLSupport: 'RTL interface',
         strMacrosSettings: 'Macros Settings',
         txtWarnMacros: 'Show Notification',
         txtRunMacros: 'Enable All',
@@ -1471,7 +1485,7 @@ define([
                         '<td class="right"><div id="id-info-rights"></div></td>',
                     '</tr>',
                     '<tr class="edit-rights">',
-                        '<td class="left"></td><td class="right"><button id="id-info-btn-edit" class="btn normal dlg-btn primary custom" style="margin-right: 10px;">' + this.txtBtnAccessRights + '</button></td>',
+                        '<td class="left"></td><td class="right"><button id="id-info-btn-edit" class="btn normal dlg-btn primary custom">' + this.txtBtnAccessRights + '</button></td>',
                     '</tr>',
                 '</table>'
             ].join(''));
@@ -1588,7 +1602,7 @@ define([
         template: _.template([
             '<div style="width:100%; height:100%; position: relative;">',
                 '<div id="id-help-contents" style="position: absolute; width:220px; top: 0; bottom: 0;" class="no-padding"></div>',
-                '<div id="id-help-frame" style="position: absolute; left: 220px; top: 0; right: 0; bottom: 0;" class="no-padding"></div>',
+                '<div id="id-help-frame" class="no-padding"></div>',
             '</div>'
         ].join('')),
 
diff --git a/apps/presentationeditor/main/app/view/GridSettings.js b/apps/presentationeditor/main/app/view/GridSettings.js
index c39cab567..66f7923de 100644
--- a/apps/presentationeditor/main/app/view/GridSettings.js
+++ b/apps/presentationeditor/main/app/view/GridSettings.js
@@ -64,8 +64,8 @@ define([
                     '<div class="input-row">',
                         '<label class="text">' + this.textSpacing + '</label>',
                     '</div>',
-                    '<div id="grid-spacing-combo" class="input-group-nr" style="display: inline-block;width:86px;"></div>',
-                    '<div id="grid-spacing-spin" style="display: inline-block;margin-left: 10px;"></div>',
+                    '<div id="grid-spacing-combo" class="input-group-nr"></div>',
+                    '<div id="grid-spacing-spin"></div>',
                 '</div>',
                 '<div class="separator horizontal"></div>'
             ].join('');
diff --git a/apps/presentationeditor/main/app/view/HeaderFooterDialog.js b/apps/presentationeditor/main/app/view/HeaderFooterDialog.js
index 54c98e3ad..6adb99a76 100644
--- a/apps/presentationeditor/main/app/view/HeaderFooterDialog.js
+++ b/apps/presentationeditor/main/app/view/HeaderFooterDialog.js
@@ -49,7 +49,8 @@ define(['text!presentationeditor/main/app/template/HeaderFooterDialog.template',
         options: {
             contentWidth: 360,
             height: 380,
-            buttons: null
+            buttons: null,
+            id: 'window-header-footer'
         },
 
         initialize : function(options) {
@@ -67,8 +68,8 @@ define(['text!presentationeditor/main/app/template/HeaderFooterDialog.template',
                             '</div>',
                             '<div class="separator"></div>',
                             '<div class="menu-panel" style="width: 130px; padding-top: 17px;">',
-                                '<label  style="display:block; margin-left: 15px;" class="input-label">' + me.textPreview + '</label>',
-                                '<div style="width: 100px; height: 80px; padding: 5px; margin-left: 15px; border: 1px solid #AFAFAF; border-radius: 2px; background: #ffffff;">',
+                                '<label  style="display:block;" class="input-label preview-label">' + me.textPreview + '</label>',
+                                '<div class="preview-canvas" style="width: 100px; height: 80px; padding: 5px; border: 1px solid #AFAFAF; border-radius: 2px; background: #ffffff;">',
                                     '<div id="hf-dlg-canvas-preview" style="width: 100%;height: 100%;"></div>',
                                 '</div>',
                             '</div>',
diff --git a/apps/presentationeditor/main/app/view/HyperlinkSettingsDialog.js b/apps/presentationeditor/main/app/view/HyperlinkSettingsDialog.js
index ba97812f9..0e9ac49e5 100644
--- a/apps/presentationeditor/main/app/view/HyperlinkSettingsDialog.js
+++ b/apps/presentationeditor/main/app/view/HyperlinkSettingsDialog.js
@@ -71,8 +71,8 @@ define([
             this.template = [
                 '<div class="box" style="height: 319px;">',
                     '<div class="input-row" style="margin-bottom: 10px;">',
-                        '<button type="button" class="btn btn-text-default auto" id="id-dlg-hyperlink-external" style="border-top-right-radius: 0;border-bottom-right-radius: 0;">', this.textExternalLink,'</button>',
-                        '<button type="button" class="btn btn-text-default auto" id="id-dlg-hyperlink-internal" style="border-top-left-radius: 0;border-bottom-left-radius: 0;border-left-width: 0;margin-left: -1px;">', this.textInternalLink,'</button>',
+                        '<button type="button" class="btn btn-text-default auto" id="id-dlg-hyperlink-external">', this.textExternalLink,'</button>',
+                        '<button type="button" class="btn btn-text-default auto" id="id-dlg-hyperlink-internal">', this.textInternalLink,'</button>',
                     '</div>',
                     '<div id="id-external-link">',
                         '<div class="input-row">',
diff --git a/apps/presentationeditor/main/app/view/ShapeSettings.js b/apps/presentationeditor/main/app/view/ShapeSettings.js
index e1cdbb06a..003275aae 100644
--- a/apps/presentationeditor/main/app/view/ShapeSettings.js
+++ b/apps/presentationeditor/main/app/view/ShapeSettings.js
@@ -510,7 +510,8 @@ define([
 
         onGradientChange: function(slider, newValue, oldValue){
             this.GradColor.values = slider.getValues();
-            this.spnGradPosition.setValue(this.GradColor.values[this.GradColor.currentIdx], true);
+            var curValue = this.GradColor.values[this.GradColor.currentIdx];
+            this.spnGradPosition.setValue(Common.UI.isRTL() ? this.sldrGradient.maxValue - curValue : curValue, true);
             this._sliderChanged = true;
             if (this.api && !this._noApply) {
                 if (this._sendUndoPoint)  {
@@ -943,7 +944,8 @@ define([
                         me.GradColor.currentIdx = 0;
                     }
                     this.sldrGradient.setActiveThumb(me.GradColor.currentIdx);
-                    this.spnGradPosition.setValue(this.GradColor.values[this.GradColor.currentIdx]);
+                    var curValue = me.GradColor.values[me.GradColor.currentIdx];
+                    this.spnGradPosition.setValue(Common.UI.isRTL() ? me.sldrGradient.maxValue - curValue : curValue);
                     this.OriginalFillType = Asc.c_oAscFill.FILL_TYPE_GRAD;
                     this.FGColor = {Value: 1, Color: this.GradColor.colors[0]};
                     this.BGColor = {Value: 1, Color: 'ffffff'};
@@ -1360,7 +1362,7 @@ define([
                 me.btnGradColor.setColor(color);
                 me.colorsGrad.select(color,false);
                 var pos = me.GradColor.values[me.GradColor.currentIdx];
-                me.spnGradPosition.setValue(pos, true);
+                me.spnGradPosition.setValue(Common.UI.isRTL() ? me.sldrGradient.maxValue - pos : pos, true);
             });
             this.sldrGradient.on('thumbdblclick', function(cmp){
                 me.btnGradColor.cmpEl.find('button').dropdown('toggle');
@@ -1876,8 +1878,11 @@ define([
         },
 
         onPositionChange: function(btn) {
-            var pos = btn.getNumberValue(),
-                minValue = (this.GradColor.currentIdx-1<0) ? 0 : this.GradColor.values[this.GradColor.currentIdx-1],
+            var pos = btn.getNumberValue();
+            if (Common.UI.isRTL()) {
+                pos = this.sldrGradient.maxValue - pos;
+            }
+            var minValue = (this.GradColor.currentIdx-1<0) ? 0 : this.GradColor.values[this.GradColor.currentIdx-1],
                 maxValue = (this.GradColor.currentIdx+1<this.GradColor.values.length) ? this.GradColor.values[this.GradColor.currentIdx+1] : 100,
                 needSort = pos < minValue || pos > maxValue;
             if (this.api) {
diff --git a/apps/presentationeditor/main/app/view/SlideSettings.js b/apps/presentationeditor/main/app/view/SlideSettings.js
index 1bb821d15..94bfb4918 100644
--- a/apps/presentationeditor/main/app/view/SlideSettings.js
+++ b/apps/presentationeditor/main/app/view/SlideSettings.js
@@ -581,7 +581,8 @@ define([
 
         onGradientChange: function(slider, newValue, oldValue){
             this.GradColor.values = slider.getValues();
-            this.spnGradPosition.setValue(this.GradColor.values[this.GradColor.currentIdx], true);
+            var curValue = this.GradColor.values[this.GradColor.currentIdx];
+            this.spnGradPosition.setValue(Common.UI.isRTL() ? this.sldrGradient.maxValue - curValue : curValue, true);
             this._sliderChanged = true;
             if (this.api && !this._noApply) {
                 if (this._sendUndoPoint)  {
@@ -856,7 +857,7 @@ define([
                 me.btnGradColor.setColor(color);
                 me.colorsGrad.select(color,false);
                 var pos = me.GradColor.values[me.GradColor.currentIdx];
-                me.spnGradPosition.setValue(pos, true);
+                me.spnGradPosition.setValue(Common.UI.isRTL() ? me.sldrGradient.maxValue - pos : pos, true);
             });
             this.sldrGradient.on('thumbdblclick', function(cmp){
                 me.btnGradColor.cmpEl.find('button').dropdown('toggle');
@@ -1295,7 +1296,8 @@ define([
                         me.GradColor.currentIdx = 0;
                     }
                     me.sldrGradient.setActiveThumb(me.GradColor.currentIdx);
-                    this.spnGradPosition.setValue(this.GradColor.values[this.GradColor.currentIdx]);
+                    var curValue = this.GradColor.values[this.GradColor.currentIdx];
+                    this.spnGradPosition.setValue(Common.UI.isRTL() ? this.sldrGradient.maxValue - curValue : curValue);
                     this.OriginalFillType = Asc.c_oAscFill.FILL_TYPE_GRAD;
                     this.FGColor = {Value: 1, Color: this.GradColor.colors[0]};
                     this.BGColor = {Value: 1, Color: 'ffffff'};
@@ -1450,8 +1452,11 @@ define([
         },
 
         onPositionChange: function(btn) {
-            var pos = btn.getNumberValue(),
-                minValue = (this.GradColor.currentIdx-1<0) ? 0 : this.GradColor.values[this.GradColor.currentIdx-1],
+            var pos = btn.getNumberValue();
+            if (Common.UI.isRTL()) {
+                pos = this.sldrGradient.maxValue - pos;
+            }
+            var minValue = (this.GradColor.currentIdx-1<0) ? 0 : this.GradColor.values[this.GradColor.currentIdx-1],
                 maxValue = (this.GradColor.currentIdx+1<this.GradColor.values.length) ? this.GradColor.values[this.GradColor.currentIdx+1] : 100,
                 needSort = pos < minValue || pos > maxValue;
             if (this.api) {
diff --git a/apps/presentationeditor/main/app/view/SlideSizeSettings.js b/apps/presentationeditor/main/app/view/SlideSizeSettings.js
index eb183f4c9..95ced9d9f 100644
--- a/apps/presentationeditor/main/app/view/SlideSizeSettings.js
+++ b/apps/presentationeditor/main/app/view/SlideSizeSettings.js
@@ -66,11 +66,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" style="padding-right: 10px;">',
+                            '<td class="padding-small padding-right">',
                                 '<label class="input-label" style="font-weight: bold;">' + this.textWidth + '</label>',
                                 '<div id="slide-size-spin-width"></div>',
                             '</td>',
-                            '<td class="padding-small" style="padding-left: 10px;">',
+                            '<td class="padding-small padding-left">',
                                 '<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/app/view/Statusbar.js b/apps/presentationeditor/main/app/view/Statusbar.js
index e0895aa1e..33015369e 100644
--- a/apps/presentationeditor/main/app/view/Statusbar.js
+++ b/apps/presentationeditor/main/app/view/Statusbar.js
@@ -257,7 +257,7 @@ define([
                     style: 'margin-top:-5px;',
                     restoreHeight: 285,
                     itemTemplate: _.template([
-                        '<a id="<%= id %>" tabindex="-1" type="menuitem" style="padding-left: 28px !important;" langval="<%= value.value %>" class="<% if (checked) { %> checked <% } %>">',
+                        '<a id="<%= id %>" tabindex="-1" type="menuitem" langval="<%= value.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/TableSettings.js b/apps/presentationeditor/main/app/view/TableSettings.js
index 0e12a775f..ec25614c5 100644
--- a/apps/presentationeditor/main/app/view/TableSettings.js
+++ b/apps/presentationeditor/main/app/view/TableSettings.js
@@ -799,7 +799,7 @@ define([
                     menu        : new Common.UI.Menu({
                         style: 'width: 588px;',
                         items: [
-                            { template: _.template('<div id="id-table-menu-template" class="menu-table-template"  style="margin: 5px 5px 5px 10px;"></div>') }
+                            { template: _.template('<div id="id-table-menu-template" class="menu-table-template"></div>') }
                         ]
                     }),
                     dataHint: '1',
diff --git a/apps/presentationeditor/main/app/view/TextArtSettings.js b/apps/presentationeditor/main/app/view/TextArtSettings.js
index c3a3a7197..f3e679160 100644
--- a/apps/presentationeditor/main/app/view/TextArtSettings.js
+++ b/apps/presentationeditor/main/app/view/TextArtSettings.js
@@ -515,7 +515,8 @@ define([
 
         onGradientChange: function(slider, newValue, oldValue){
             this.GradColor.values = slider.getValues();
-            this.spnGradPosition.setValue(this.GradColor.values[this.GradColor.currentIdx], true);
+            var curValue = this.GradColor.values[this.GradColor.currentIdx];
+            this.spnGradPosition.setValue(Common.UI.isRTL() ? this.sldrGradient.maxValue - curValue : curValue, true);
             this._sliderChanged = true;
             if (this.api && !this._noApply) {
                 if (this._sendUndoPoint)  {
@@ -877,7 +878,8 @@ define([
                         me.GradColor.currentIdx = 0;
                     }
                     me.sldrGradient.setActiveThumb(me.GradColor.currentIdx);
-                    this.spnGradPosition.setValue(this.GradColor.values[this.GradColor.currentIdx]);
+                    var curValue = me.GradColor.values[me.GradColor.currentIdx];
+                    this.spnGradPosition.setValue(Common.UI.isRTL() ? me.sldrGradient.maxValue - curValue : curValue);
                     this.OriginalFillType = Asc.c_oAscFill.FILL_TYPE_GRAD;
                     this.FGColor = {Value: 1, Color: this.GradColor.colors[0]};
                     this.BGColor = {Value: 1, Color: 'ffffff'};
@@ -1316,7 +1318,7 @@ define([
                 me.btnGradColor.setColor(color);
                 me.colorsGrad.select(color,false);
                 var pos = me.GradColor.values[me.GradColor.currentIdx];
-                me.spnGradPosition.setValue(pos, true);
+                me.spnGradPosition.setValue(Common.UI.isRTL() ? me.sldrGradient.maxValue - pos : pos, true);
             });
             this.sldrGradient.on('thumbdblclick', function(cmp){
                 me.btnGradColor.cmpEl.find('button').dropdown('toggle');
@@ -1760,8 +1762,11 @@ define([
         },
 
         onPositionChange: function(btn) {
-            var pos = btn.getNumberValue(),
-                minValue = (this.GradColor.currentIdx-1<0) ? 0 : this.GradColor.values[this.GradColor.currentIdx-1],
+            var pos = btn.getNumberValue();
+            if (Common.UI.isRTL()) {
+                pos = this.sldrGradient.maxValue - pos;
+            }
+            var minValue = (this.GradColor.currentIdx-1<0) ? 0 : this.GradColor.values[this.GradColor.currentIdx-1],
                 maxValue = (this.GradColor.currentIdx+1<this.GradColor.values.length) ? this.GradColor.values[this.GradColor.currentIdx+1] : 100,
                 needSort = pos < minValue || pos > maxValue;
             if (this.api) {
diff --git a/apps/presentationeditor/main/app/view/Toolbar.js b/apps/presentationeditor/main/app/view/Toolbar.js
index b64f788f9..1f8fcb6fa 100644
--- a/apps/presentationeditor/main/app/view/Toolbar.js
+++ b/apps/presentationeditor/main/app/view/Toolbar.js
@@ -1113,7 +1113,10 @@ define([
                                 if (menuWidth>Common.Utils.innerWidth())
                                     menuWidth = Math.max(Math.floor(Common.Utils.innerWidth()/(itemMargin + itemWidth)), 2) * (itemMargin + itemWidth);
                                 var offset = cmp.cmpEl.width() - cmp.openButton.$el.width() - Math.min(menuWidth, buttonOffsetLeft) - 1;
-                                menu.setOffset(Math.min(offset, 0));
+                                if (Common.UI.isRTL()) {
+                                    offset = cmp.openButton.$el.width();
+                                }
+                                menu.setOffset(Common.UI.isRTL() ? offset : Math.min(offset, 0));
 
                                 menu.cmpEl.css({
                                     'width': menuWidth,
diff --git a/apps/presentationeditor/main/app/view/Transitions.js b/apps/presentationeditor/main/app/view/Transitions.js
index 23232d924..7df0fd513 100644
--- a/apps/presentationeditor/main/app/view/Transitions.js
+++ b/apps/presentationeditor/main/app/view/Transitions.js
@@ -162,7 +162,7 @@ define([
                         if (menu.cmpEl) {
 
                             menu.menuAlignEl = cmp.cmpEl;
-                            menu.menuAlign = 'tl-tl';
+                            menu.menuAlign = Common.UI.isRTL() ? 'tr-tr' : 'tl-tl';
                             menu.cmpEl.css({
                                 'width': cmp.cmpEl.width() - cmp.openButton.$el.width(),
                                 'min-height': cmp.cmpEl.height()
diff --git a/apps/presentationeditor/main/app/view/Viewport.js b/apps/presentationeditor/main/app/view/Viewport.js
index 029f5fc1f..9aed7937a 100644
--- a/apps/presentationeditor/main/app/view/Viewport.js
+++ b/apps/presentationeditor/main/app/view/Viewport.js
@@ -105,33 +105,45 @@ define([
 
             $container = $('#viewport-hbox-layout', el);
             items = $container.find(' > .layout-item');
+
+            let iarray =  [{
+                el: items[0],
+                rely: true,
+                alias: 'left',
+                resize: {
+                    hidden: true,
+                    autohide: false,
+                    min: 300,
+                    max: 600
+                }}, { // history versions
+                el: items[3],
+                rely: true,
+                alias: 'history',
+                resize: {
+                    hidden: true,
+                    autohide: false,
+                    min: 300,
+                    max: 600
+                }
+            }, {
+                el: items[1],
+                stretch: true
+            }, {
+                el: $(items[2]).hide(),
+                rely: true
+            }];
+
+            if ( Common.UI.isRTL() ) {
+                [iarray[0].resize.min, iarray[0].resize.max] = [-600, -300];
+                [iarray[1].resize.min, iarray[1].resize.max] = [-600, -300];
+
+                [iarray[0], iarray[3]] = [iarray[3], iarray[0]];
+                [iarray[1], iarray[2]] = [iarray[2], iarray[1]];
+            }
+
             this.hlayout = new Common.UI.HBoxLayout({
                 box: $container,
-                items: [{
-                    el: items[0],
-                    rely: true,
-                    resize: {
-                        hidden: true,
-                        autohide: false,
-                        min: 300,
-                        max: 600
-                }}, { // history versions
-                    el: items[3],
-                    rely: true,
-                    resize: {
-                        hidden: true,
-                        autohide: false,
-                        min: 300,
-                        max: 600
-                    }
-                }, {
-                    el: items[1],
-                    stretch: true
-                }, {
-                    el: $(items[2]).hide(),
-                    rely: true
-                }
-                ]
+                items: iarray
             });
 
             return this;
diff --git a/apps/presentationeditor/main/resources/less/advanced-settings.less b/apps/presentationeditor/main/resources/less/advanced-settings.less
index 1e1239e46..6359c57bf 100644
--- a/apps/presentationeditor/main/resources/less/advanced-settings.less
+++ b/apps/presentationeditor/main/resources/less/advanced-settings.less
@@ -7,4 +7,176 @@
     }
 }
 
+#id-adv-shape-rotate,
+#id-adv-image-rotate {
+    #shape-advanced-spin-angle, #image-advanced-spin-angle {
+        margin-left: 5px;
+
+        .rtl & {
+            margin-left: 0;
+            margin-right: 5px;
+        }
+    }
+
+    .flipped {
+        margin-right: 15px;
+
+        .rtl & {
+            margin-right: 0;
+            margin-left: 15px;
+        }
+    }
+}
+
+#id-adv-paragraph-indents {
+    .margin-right {
+        margin-right: 3px;
+
+        .rtl & {
+            margin-right: 0;
+            margin-left: 3px;
+        }
+    }
+}
+
+#id-adv-paragraph-font {
+    .padding-left {
+        padding-left: 40px;
+
+        .rtl & {
+            padding-left: 0;
+            padding-right: 40px;
+        }
+    }
+}
+
+#id-adv-paragraph-tabs {
+    .margin-right {
+        margin-right: 9px;
+
+        .rtl & {
+            margin-right: 0;
+            margin-left: 9px;
+        }
+    }
+}
+
+#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 {
+    #hf-dlg-tbl-datetime,
+    #hf-dlg-input-fixed,
+    #hf-dlg-text {
+        margin-left: 22px;
+
+        .rtl & {
+            margin-left: 0;
+            margin-right: 22px;
+        }
+    }
+
+    .format-combo {
+        padding-left: 22px;
+
+        .rtl & {
+            padding-left: 0;
+            padding-right: 22px;
+        }
+    }
+
+    .lang-combo {
+        padding-left: 5px;
+
+        .rtl & {
+            padding-left: 0;
+            padding-right: 5px;
+        }
+    }
+
+    .preview-label,
+    .preview-canvas {
+        margin-left: 15px;
+
+        .rtl & {
+            margin-left: 0;
+            margin-right: 15px;
+        }
+    }
+}
+
+#window-hyperlink-settings {
+    #id-dlg-hyperlink-external {
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 0;
+
+        .rtl & {
+            .border-radius(@border-radius-small);
+            border-top-left-radius: 0;
+            border-bottom-left-radius: 0;
+
+        }
+    }
+
+    #id-dlg-hyperlink-internal {
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
+        border-left-width: 0;
+        margin-left: -1px;
+
+        .rtl & {
+            border: @scaled-one-px-value solid @border-regular-control;
+            .border-radius(@border-radius-small);
+            margin-left: 0;
+            border-top-right-radius: 0;
+            border-bottom-right-radius: 0;
+            border-right-width: 0;
+            margin-right: -1px;
+        }
+    }
+}
+
+#window-date-time {
+    #datetime-dlg-default {
+        float: right;
+
+        .rtl & {
+            float: left;
+        }
+    }
+}
+
+#window-grid-settings {
+    #grid-spacing-combo {
+        display: inline-block;
+        width:86px;
+    }
+
+    #grid-spacing-spin {
+        margin-left: 10px;
+        display: inline-block;
+
+        .rtl & {
+            margin-left: 0;
+            margin-right: 10px;
+        }
+    }
+}
 
diff --git a/apps/presentationeditor/main/resources/less/animation.less b/apps/presentationeditor/main/resources/less/animation.less
index 2c8cb5021..8b2d7ed7f 100644
--- a/apps/presentationeditor/main/resources/less/animation.less
+++ b/apps/presentationeditor/main/resources/less/animation.less
@@ -10,14 +10,26 @@
 .menu-animation .dataview {
   padding: 0 0 0 2px;
 
+  .rtl & {
+    padding: 0 2px 0 0;
+  }
+
   .group-description {
     padding: 3px 0 3px 10px;
     .font-weight-bold();
+
+    .rtl & {
+      padding: 3px 10px 3px 0;
+      text-align: right;
+    }
   }
 
   .grouped-data .group-items-container {
     float: left;
     position: relative;
+    .rtl & {
+      float: right;
+    }
     .item {
         box-shadow: none;
         margin: @scaled-two-px-value;
diff --git a/apps/presentationeditor/main/resources/less/app.less b/apps/presentationeditor/main/resources/less/app.less
index ca8f4f151..f0bbe5d34 100644
--- a/apps/presentationeditor/main/resources/less/app.less
+++ b/apps/presentationeditor/main/resources/less/app.less
@@ -212,14 +212,6 @@
     }
 }
 
-#slide-texture-img-box {
-    background: @background-normal;
-    border: @scaled-one-px-value solid @border-regular-control;
-    border-radius: 2px;
-    float: right;
-    padding: 14px 20px;
-}
-
 // Skeleton of document
 
 .doc-placeholder {
diff --git a/apps/presentationeditor/main/resources/less/leftmenu.less b/apps/presentationeditor/main/resources/less/leftmenu.less
index 63fe72998..f83be671d 100644
--- a/apps/presentationeditor/main/resources/less/leftmenu.less
+++ b/apps/presentationeditor/main/resources/less/leftmenu.less
@@ -31,6 +31,11 @@
     background-color: @background-toolbar-ie;
     background-color: @background-toolbar;
     overflow: hidden;
+
+    .rtl & {
+        left: 0;
+        right: 40px;
+    }
 }
 
 .btn-doc-format {
@@ -177,6 +182,11 @@
         background-color: @background-normal-ie;
         background-color: @background-normal;
 
+        .rtl & {
+            padding-left: 0;
+            padding-right: 260px;
+        }
+
         .content-box {
             height: 100%;
             padding: 0 20px;
@@ -194,11 +204,19 @@
         #panel-saveas, #panel-savecopy {
             &.content-box {
                 padding: 0 0 0 20px;
+
+                .rtl & {
+                    padding: 0 20px 0 0;
+                }
             }
 
             .content-container {
                 margin: 30px 0 0 10px;
 
+                .rtl & {
+                    margin: 30px 10px 0 0;
+                }
+
                 .header {
                     .font-size-very-huge();
                     margin-bottom: 20px;
@@ -209,6 +227,11 @@
                         float: left;
                         margin: 0 24px 34px 0;
 
+                        .rtl & {
+                            float: right;
+                            margin: 0 0 34px 24px;
+                        }
+
                         .btn-doc-format {
                             width: 70px;
                             height: 90px;
@@ -293,6 +316,22 @@
                 white-space: nowrap;
                 margin-top: 30px;
                 margin-bottom: 20px;
+
+                .rtl & {
+                    padding: 0 10px 10px 0;
+                }
+            }
+
+            .blank-document-info {
+                vertical-align: top;
+                width: 445px;
+                display: inline-block;
+
+                h3 {
+                    padding-left: 0;
+                    padding-top: 45px;
+                    white-space: nowrap;
+                }
             }
 
             hr {
@@ -422,6 +461,12 @@
                 border-right: @scaled-one-px-value-ie solid @border-toolbar-ie;
                 border-right: @scaled-one-px-value solid @border-toolbar;
 
+                .rtl & {
+                    border-right: none;
+                    border-left: @scaled-one-px-value-ie solid @border-toolbar-ie;
+                    border-left: @scaled-one-px-value solid @border-toolbar;
+                }
+
                 & > div:not([class^=ps-scrollbar]) {
                     display: block;
                     border: none;
@@ -449,10 +494,18 @@
 
                 .help-item-wrap {
                     padding: 4px 2px 4px 20px;
+
+                    .rtl & {
+                        padding: 4px 20px 4px 2px;
+                    }
                 }
 
                 .header-name {
                     padding: 16px 2px 4px 10px;
+
+                    .rtl & {
+                        padding: 16px 10px 4px 2px;
+                    }
                 }
             }
         }
@@ -480,11 +533,19 @@
                     td {
                         padding: 0 20px 5px 0;
 
+                        .rtl & {
+                            padding: 0 0 5px 20px;
+                        }
+
                         &.left {
                             padding: 5px 10px;
                             text-align: right;
                             width: 200px;
 
+                            .rtl & {
+                                text-align: left;
+                            }
+
                             label {
                                 .font-weight-bold();
                             }
@@ -563,10 +624,18 @@
 
             #fms-btn-delete-pwd {
                 margin-left: 16px;
+                .rtl & {
+                    margin-left: 0;
+                    margin-right: 16px;
+                }
             }
 
             .signature-view-link {
                 margin-right: 20px;
+                .rtl & {
+                    margin-right: 0;
+                    margin-left: 20px;
+                }
             }
 
             .signature-tip {
@@ -656,6 +725,16 @@
                     }
                 }
             }
+
+            #fms-btn-delete-pwd {
+                margin-left: 20px;
+
+                .rtl & {
+                    margin-left: 0;
+                    margin-right: 20px;
+                }
+            }
+
             #print-navigation {
                 height: 50px;
                 padding-left: 20px;
@@ -715,6 +794,19 @@
     }
 }
 
+#id-help-frame {
+    position: absolute;
+    left: 220px;
+    top: 0;
+    right: 0;
+    bottom: 0;
+
+    .rtl & {
+        left: 0;
+        right: 220px;
+    }
+}
+
 #developer-hint, #beta-hint, #limit-hint {
     position: absolute;
     left: 0;
diff --git a/apps/presentationeditor/main/resources/less/rightmenu.less b/apps/presentationeditor/main/resources/less/rightmenu.less
index 61bc8f511..b5d1d0a8d 100644
--- a/apps/presentationeditor/main/resources/less/rightmenu.less
+++ b/apps/presentationeditor/main/resources/less/rightmenu.less
@@ -6,6 +6,316 @@
     label.input-label{
         vertical-align: baseline;
     }
+
+    &#id-slide-settings {
+        #slide-spin-transparency {
+            display: inline-block;
+            float: right;
+
+            .rtl & {
+                float: left;
+            }
+        }
+
+        .slide-direction {
+            float: right;
+
+            .rtl & {
+                float: left;
+            }
+        }
+
+        .angle-label {
+            margin-right: 5px;
+            margin-bottom: 3px;
+
+            .rtl & {
+                margin-right: 0;
+                margin-left: 5px;
+            }
+        }
+
+        .gradient-position {
+            margin-left: 10px;
+
+            .rtl & {
+                margin-left: 0;
+                margin-right: 10px;
+            }
+        }
+
+        #id-slide-menu-direction {
+            .dataview .item {
+                .rtl & {
+                    float: left;
+                }
+            }
+        }
+
+        #slide-texture-img-box {
+            background: @background-normal;
+            border: @scaled-one-px-value solid @border-regular-control;
+            border-radius: 2px;
+            float: right;
+            padding: 14px 20px;
+
+            .rtl & {
+                float: left;
+            }
+        }
+
+        #slide-foreground-color-btn, #slide-background-color-btn {
+            display: inline-block;
+            float:right;
+
+            .rtl & {
+                float: left;
+            }
+        }
+    }
+
+    &#id-shape-settings {
+        #shape-spin-transparency {
+            display: inline-block;
+            float: right;
+
+            .rtl & {
+                float: left;
+            }
+        }
+
+        #shape-button-270, #shape-button-fliph {
+            display: inline-block;
+            margin-right: 4px;
+
+            .rtl & {
+                margin-right: 0;
+                margin-left: 4px;
+            }
+        }
+
+        #shape-button-90, #shape-button-flipv {
+            display: inline-block;
+        }
+
+        #shape-btn-change {
+            display: inline-block;
+            float:right;
+
+            .rtl & {
+                float: left;
+            }
+        }
+
+        .grad-direction {
+            float: right;
+
+            .rtl & {
+                float: left;
+            }
+
+            #id-shape-menu-direction {
+                .dataview .item {
+                    .rtl & {
+                        float: left;
+                    }
+                }
+            }
+        }
+
+        .angle-label {
+            margin-right: 5px;
+            margin-bottom: 3px;
+
+            .rtl & {
+                margin-right: 0;
+                margin-left: 5px;
+            }
+        }
+
+        .gradient-position {
+            margin-left: 10px;
+
+            .rtl & {
+                margin-left: 0;
+                margin-right: 10px;
+            }
+        }
+
+        .texture-img {
+            padding: 14px 20px;
+            border: 1px solid #AFAFAF;
+            border-radius: 2px;
+            background: #ffffff;
+            float:right;
+
+            .rtl & {
+                float: left;
+            }
+        }
+
+        #shape-foreground-color-btn, #shape-background-color-btn {
+            display: inline-block;
+            float: right;
+
+            .rtl & {
+                float: left;
+            }
+        }
+    }
+
+    &#id-image-settings {
+        #image-button-270, #image-button-fliph {
+            display: inline-block;
+            margin-right: 4px;
+
+            .rtl & {
+                margin-right: 0;
+                margin-left: 4px;
+            }
+        }
+
+        #image-button-90, #image-button-flipv {
+            display: inline-block;
+        }
+    }
+
+    &#id-table-settings {
+        #id-table-menu-template {
+            margin: 5px 5px 5px 10px;
+
+            .rtl & {
+                margin: 5px 10px 5px 5px;
+            }
+
+            .group-description {
+                padding: 3px 0 3px 10px;
+                .font-weight-bold();
+
+                .rtl & {
+                    padding: 3px 10px 3px 0;
+                    text-align: right;
+                }
+            }
+
+            .group-items-container {
+                .item {
+                    &:hover {
+                        .box-shadow(0 0 0 2px @border-preview-hover-ie) !important;
+                        .box-shadow(0 0 0 @scaled-two-px-value @border-preview-hover) !important;
+                    }
+
+                    &.selected {
+                        .box-shadow(0 0 0 2px @border-preview-select-ie) !important;
+                        .box-shadow(0 0 0 @scaled-two-px-value @border-preview-select) !important;
+                    }
+                }
+            }
+        }
+
+        .border-color {
+            display: inline-block;
+            float: right;
+            vertical-align: middle;
+
+            .rtl & {
+                float: left;
+            }
+        }
+
+        .color-label {
+            margin-right: 5px;
+
+            .rtl & {
+                margin-right: 0;
+                margin-left: 5px;
+            }
+        }
+
+        #table-spin-cell-height, #table-spin-cell-width {
+            display: inline-block;
+            float:right;
+
+            .rtl & {
+                float: left;
+            }
+        }
+    }
+
+    &#id-textart-settings {
+        #textart-spin-transparency {
+            display: inline-block;
+            float: right;
+
+            .rtl & {
+                float: left;
+            }
+        }
+
+        .grad-direction {
+            float: right;
+
+            .rtl & {
+                float: left;
+            }
+
+            #id-textart-menu-direction {
+                .dataview .item {
+                    .rtl & {
+                        float: left;
+                    }
+                }
+            }
+        }
+
+        .angle-label {
+            margin-right: 5px;
+            margin-bottom: 3px;
+
+            .rtl & {
+                margin-right: 0;
+                margin-left: 5px;
+            }
+        }
+
+        .gradient-position {
+            margin-left: 10px;
+
+            .rtl & {
+                margin-left: 0;
+                margin-right: 10px;
+            }
+        }
+
+        #textart-button-from-url {
+            float: right;
+
+            .rtl & {
+                float: left;
+            }
+        }
+
+        .texture-img {
+            padding: 14px 20px;
+            border: 1px solid #AFAFAF;
+            border-radius: 2px;
+            background: #ffffff;
+            float: right;
+
+            .rtl & {
+                float: left;
+            }
+        }
+
+        #textart-foreground-color-btn, #textart-background-color-btn {
+            display: inline-block;
+            float:right;
+
+            .rtl & {
+                float: left;
+            }
+        }
+    }
 }
 
 .item-wrap {
@@ -102,26 +412,4 @@
             }
         }
     }
-}
-
-#id-table-menu-template {
-    .group-description {
-        padding: 3px 0 3px 10px;
-        .font-weight-bold();
-        
-    } 
-
-    .group-items-container {
-        .item {
-            &:hover {
-                .box-shadow(0 0 0 2px @border-preview-hover-ie) !important;
-                .box-shadow(0 0 0 @scaled-two-px-value @border-preview-hover) !important;
-            }
-      
-            &.selected {
-                .box-shadow(0 0 0 2px @border-preview-select-ie) !important;
-                .box-shadow(0 0 0 @scaled-two-px-value @border-preview-select) !important;
-            }
-        }
-    }
 }
\ 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 156ecae0e..79db1d4d3 100644
--- a/apps/presentationeditor/main/resources/less/statusbar.less
+++ b/apps/presentationeditor/main/resources/less/statusbar.less
@@ -27,12 +27,12 @@
         text-align: center;
     }
 
-    #btn-zoom-topage {
-        margin-right: 8px;
-    }
-
-    #btn-zoom-towidth {
+    #btn-zoom-topage, #btn-zoom-towidth {
         margin-right: 8px;
+        .rtl & {
+            margin-right: 0;
+            margin-left: 8px;
+        }
     }
 
     .status-group {
@@ -52,6 +52,30 @@
         .margin-top-small > .btn-group {
             margin-top: 3px;
         }
+
+        #slot-status-btn-preview {
+            margin-left: 9px;
+            .rtl & {
+                margin-left: 0;
+                margin-right: 9px;
+            }
+        }
+
+        #status-label-pages {
+            margin-left: 7px;
+            .rtl & {
+                margin-left: 0;
+                margin-right: 7px;
+            }
+        }
+
+        #btn-zoom-up {
+            margin-right: 40px;
+            .rtl & {
+                margin-right: 0;
+                margin-left: 40px;
+            }
+        }
     }
 
     .separator {
@@ -81,6 +105,11 @@
             min-width: 80px;
             margin-left: -4px;
 
+            .rtl & {
+                margin-left: 0;
+                margin-right: -4px;
+            }
+
             li {
                 text-align: center;
 
@@ -98,9 +127,21 @@
         margin-bottom: 2px;
         min-width: 130px;
 
+        .rtl & {
+            margin-left: 0;
+            margin-right: 40px;
+        }
+
         > label {
             display: inline-block;
             margin-right: 10px;
+            float: left;
+            line-height: 22px;
+            .rtl & {
+                margin-right: 0;
+                margin-left: 10px;
+                float: right;
+            }
         }
 
         > input[type=text] {
@@ -116,6 +157,12 @@
         width: 285px;
         .font-size-medium();
 
+        .rtl & {
+            padding: 14px 14px 14px 0;
+            margin-left: 0;
+            margin-right: 142px;
+        }
+
         > label {
             white-space: normal;
         }
@@ -136,6 +183,11 @@
                     margin-right: 15px;
                     overflow: hidden;
 
+                    .rtl & {
+                        margin-right: 0;
+                        margin-left: 15px;
+                    }
+
                     &.offline, &.viewmode {
                         display: none;
                     }
@@ -158,6 +210,51 @@
                 white-space: nowrap;
                 text-overflow: ellipsis;
                 vertical-align: middle;
+
+                .rtl & {
+                    padding-left: 0;
+                    padding-right: 16px;
+                }
+            }
+        }
+
+        .tip-users {
+            margin-right: 14px;
+            .rtl & {
+                margin-right: 0;
+                margin-left: 14px;
+            }
+        }
+    }
+
+    #status-users-ct {
+        .separator {
+            &:first-of-type {
+                margin-right: 12px;
+                margin-left: 40px;
+                .rtl & {
+                    margin-right: 40px;
+                    margin-left: 12px;
+                }
+            }
+
+            &:last-of-type {
+                margin-left: 10px;
+                .rtl & {
+                    margin-left: 0;
+                    margin-right: 10px;
+                }
+            }
+        }
+
+    }
+
+    .lang-menu {
+        li a {
+            padding-left: 28px !important;
+            .rtl & {
+                padding-left: 20px !important;
+                padding-right: 28px !important;
             }
         }
     }
diff --git a/apps/spreadsheeteditor/main/app/controller/Main.js b/apps/spreadsheeteditor/main/app/controller/Main.js
index 20bb89dda..d96997c49 100644
--- a/apps/spreadsheeteditor/main/app/controller/Main.js
+++ b/apps/spreadsheeteditor/main/app/controller/Main.js
@@ -440,6 +440,7 @@ define([
                 this.appOptions.canMakeActionLink = this.editorConfig.canMakeActionLink;
                 this.appOptions.canFeaturePivot = true;
                 this.appOptions.canFeatureViews = true;
+                this.appOptions.uiRtl = Common.localStorage.getBool("ui-rtl");
                 this.appOptions.canRequestReferenceData = this.editorConfig.canRequestReferenceData;
 
                 if (this.appOptions.user.guest && this.appOptions.canRenameAnonymous && !this.appOptions.isEditDiagram && !this.appOptions.isEditMailMerge && !this.appOptions.isEditOle)
diff --git a/apps/spreadsheeteditor/main/app/controller/Viewport.js b/apps/spreadsheeteditor/main/app/controller/Viewport.js
index c85618494..0714b4e66 100644
--- a/apps/spreadsheeteditor/main/app/controller/Viewport.js
+++ b/apps/spreadsheeteditor/main/app/controller/Viewport.js
@@ -240,7 +240,7 @@ define([
                 this.viewport.hlayout.doLayout();
                 break;
             case 'history':
-                var panel = this.viewport.hlayout.items[1];
+                var panel = this.viewport.hlayout.getItem('history');
                 if (panel.resize.el) {
                     this.boxSdk.css('border-left', '');
                     panel.resize.el.show();
@@ -248,7 +248,7 @@ define([
                 this.viewport.hlayout.doLayout();
                 break;
             case 'leftmenu':
-                var panel = this.viewport.hlayout.items[0];
+                var panel = this.viewport.hlayout.getItem('left');
                 if (panel.resize.el) {
                     if (panel.el.width() > 40) {
                         this.boxSdk.css('border-left', '');
diff --git a/apps/spreadsheeteditor/main/app/template/CellSettings.template b/apps/spreadsheeteditor/main/app/template/CellSettings.template
index ab127387f..644612f68 100644
--- a/apps/spreadsheeteditor/main/app/template/CellSettings.template
+++ b/apps/spreadsheeteditor/main/app/template/CellSettings.template
@@ -19,22 +19,22 @@
                 <div id="cell-combo-pattern" style="width: 100%; height: 42px; margin-bottom: 8px;"></div>
                 <div style="width: 100%; height: 25px; margin-bottom: 8px;">
                     <label class="input-label" style="margin-top: 3px;"><%= scope.textForeground %></label>
-                    <div id="cell-foreground-color-btn" style="display: inline-block; float:right;"></div>
+                    <div id="cell-foreground-color-btn"></div>
                 </div>
                 <div style="width: 100%; height: 25px;">
                     <label class="input-label" style="margin-top: 3px;"><%= scope.textBackground %></label>
-                    <div id="cell-background-color-btn" style="display: inline-block; float:right;"></div>
+                    <div id="cell-background-color-btn"></div>
                 </div>
             </div>
             <div id="cell-panel-gradient-fill" class="settings-hidden padding-small" style="width: 100%;">
                 <div style="height:80px;">
                     <div style="display: inline-block;">
-                        <label class="input-label" style=""><%= scope.textAngle %></label>
+                        <label class="input-label" ><%= scope.textAngle %></label>
                         <div id="cell-spin-gradient-angle" style="width: 90px;"></div>
                     </div>
-                    <div style="display: inline-block;float: right;">
-                        <label class="input-label" style=""><%= scope.textDirection %></label>
-                        <div id="cell-button-direction" style=""></div>
+                    <div class="cell-direction">
+                        <label class="input-label"><%= scope.textDirection %></label>
+                        <div id="cell-button-direction"></div>
                     </div>
                 </div>
                 <label class="header" style="display:block;margin-bottom: 5px;"><%= scope.textGradient %></label>
@@ -47,7 +47,7 @@
                         <label class="input-label" style=""><%= scope.textGradientColor %></label>
                         <div id="cell-gradient-color-btn"></div>
                     </div>
-                    <div style="margin-left: 10px;">
+                    <div class="gradient-position">
                         <label class="input-label" style=""><%= scope.textPosition %></label>
                         <div id="cell-gradient-position"></div>
                     </div>
@@ -72,10 +72,10 @@
     </tr>
     <tr>
         <td class="padding-small" colspan=2>
-            <div id="cell-combo-border-type" style="display: inline-block; vertical-align: middle; width: 93px;"></div>
-            <div style="display: inline-block; float:right;vertical-align: middle;">
-                <label class="input-label" style="margin-right: 5px;"><%= scope.textBorderColor %></label>
-                <div id="cell-border-color-btn" style="display: inline-block;"></div>
+            <div id="cell-combo-border-type"></div>
+            <div class="border-color">
+                <label class="input-label"><%= scope.textBorderColor %></label>
+                <div id="cell-border-color-btn"></div>
             </div>
         </td>
     </tr>
@@ -127,7 +127,7 @@
     <tr>
         <td class="padding-large" colspan=2>
             <label class="input-label"><%= scope.textAngle %></label>
-            <div id="cell-spin-angle" style="display: inline-block;margin-left:5px;"></div>
+            <div id="cell-spin-angle"></div>
         </td>
     </tr>
     <tr>
diff --git a/apps/spreadsheeteditor/main/app/template/ChartSettingsDlg.template b/apps/spreadsheeteditor/main/app/template/ChartSettingsDlg.template
index 34d49c39e..97b619b78 100644
--- a/apps/spreadsheeteditor/main/app/template/ChartSettingsDlg.template
+++ b/apps/spreadsheeteditor/main/app/template/ChartSettingsDlg.template
@@ -16,37 +16,37 @@
             <tr>
                 <td class="padding-small" width="50%">
                     <label class="input-label"><%= scope.textChartTitle %></label>
-                    <div id="chart-dlg-combo-chart-title" class="input-group-nr" style="margin-right: 7px;"></div>
+                    <div id="chart-dlg-combo-chart-title" class="input-group-nr margin-right"></div>
                 </td>
                 <td class="padding-small" width="50%">
-                    <label class="input-label" style="margin-left: 7px;"><%= scope.textLegendPos %></label>
-                    <div id="chart-dlg-combo-legend-pos" class="input-group-nr" style="margin-left: 7px;"></div>
+                    <label class="input-label margin-left"><%= scope.textLegendPos %></label>
+                    <div id="chart-dlg-combo-legend-pos" class="input-group-nr margin-left"></div>
                 </td>
             </tr>
             <tr>
                 <td class="padding-small" width="50%">
                     <label class="input-label"><%= scope.textDataLabels %></label>
-                    <div id="chart-dlg-combo-data-labels" class="input-group-nr" style="margin-right: 7px;"></div>
+                    <div id="chart-dlg-combo-data-labels" class="input-group-nr margin-right"></div>
                 </td>
                 <td rowspan="2" class="padding-small" width="50%">
-                    <div id="chart-dlg-check-series" style="margin: 20px 0 9px 7px;"></div>
-                    <div id="chart-dlg-check-category" style="margin: 0 0 9px 7px;"></div>
-                    <div id="chart-dlg-check-value" style="margin: 0 0 5px 7px;"></div>
+                    <div id="chart-dlg-check-series"></div>
+                    <div id="chart-dlg-check-category"></div>
+                    <div id="chart-dlg-check-value"></div>
                 </td>
             </tr>
             <tr>
                 <td class="padding-small" width="50%">
                     <label class="input-label"><%= scope.textSeparator %></label>
-                    <div id="chart-dlg-txt-separator" class="input-row"  style="margin-right: 7px;"></div>
+                    <div id="chart-dlg-txt-separator" class="input-row margin-right"></div>
                 </td>
             </tr>
             <tr>
                 <td width="50%">
                     <label id="chart-dlg-label-lines" class="input-label"><%= scope.textLines %></label>
-                    <div id="chart-dlg-combo-lines" class="input-group-nr padding-small" style="margin-right: 7px;"></div>
+                    <div id="chart-dlg-combo-lines" class="input-group-nr padding-small margin-right"></div>
                 </td>
                 <td style="vertical-align: bottom;" width="50%">
-                    <div id="chart-dlg-check-markers" style="margin: 0 0 12px 7px;"></div>
+                    <div id="chart-dlg-check-markers"></div>
                 </td>
             </tr>
         </table>
@@ -66,8 +66,8 @@
                     <div id="chart-dlg-combo-vert-title-0" class="input-group-nr"></div>
                 </td>
                 <td class="padding-large">
-                    <label class="input-label" style="margin-left: 15px;"><%= scope.textGridLines %></label>
-                    <div id="chart-dlg-combo-vert-grid-0" class="input-group-nr" style="margin-left: 15px;"></div>
+                    <label class="input-label margin-left"><%= scope.textGridLines %></label>
+                    <div id="chart-dlg-combo-vert-grid-0" class="input-group-nr margin-left"></div>
                 </td>
             </tr>
         </table>
@@ -76,7 +76,7 @@
                 <td class="padding-small" width="100">
                     <label class="input-label"><%= scope.textMinValue %></label>
                 </td>
-                <td class="padding-small" width="115" style="padding-right: 10px;">
+                <td class="padding-small padding-right" 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" width="115" style="padding-right: 10px;">
+                <td class="padding-small padding-right" 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" width="115" style="padding-right: 10px;">
+                <td class="padding-large padding-right" width="115">
                     <div id="chart-dlg-combo-v-crosstype-0"></div>
                 </td>
                 <td class="padding-large" width="90">
@@ -125,9 +125,9 @@
                     <div id="chart-dlg-check-v-logscale-0"></div>
                 </td>
                 <td class="padding-large">
-                    <div style="float: right;">
+                    <div class="base">
                         <label class="input-label"><%= scope.textBase %></label>
-                        <div id="chart-dlg-input-base-0" style="display: inline-block;margin-left: 5px;"></div>
+                        <div id="chart-dlg-input-base-0" style="display: inline-block;"></div>
                     </div>
                 </td>
             </tr>
@@ -146,8 +146,8 @@
                     <div id="chart-dlg-combo-v-major-type-0" class="input-group-nr"></div>
                 </td>
                 <td class="padding-large">
-                    <label class="input-label" style="margin-left: 15px;"><%= scope.textMinorType %></label>
-                    <div id="chart-dlg-combo-v-minor-type-0" class="input-group-nr" style="margin-left: 15px;"></div>
+                    <label class="input-label margin-left"><%= scope.textMinorType %></label>
+                    <div id="chart-dlg-combo-v-minor-type-0" class="input-group-nr margin-left"></div>
                 </td>
             </tr>
             <tr>
@@ -167,7 +167,7 @@
                     <div id="chart-dlg-combo-v-label-pos-0" class="input-group-nr"></div>
                 </td>
                 <td>
-                    <button type="button" class="btn btn-text-default auto" id="chart-dlg-btn-v-format-0" style="min-width: 100px;margin-left: 15px;"><%= scope.textFormat %></button>
+                    <button type="button" class="btn btn-text-default auto margin-left" id="chart-dlg-btn-v-format-0" style="min-width: 100px;"><%= scope.textFormat %></button>
                 </td>
             </tr>
         </table>
@@ -187,8 +187,8 @@
                     <div id="chart-dlg-combo-vert-title-1" class="input-group-nr"></div>
                 </td>
                 <td class="padding-large">
-                    <label class="input-label" style="margin-left: 15px;"><%= scope.textGridLines %></label>
-                    <div id="chart-dlg-combo-vert-grid-1" class="input-group-nr" style="margin-left: 15px;"></div>
+                    <label class="input-label margin-left"><%= scope.textGridLines %></label>
+                    <div id="chart-dlg-combo-vert-grid-1" class="input-group-nr margin-left"></div>
                 </td>
             </tr>
         </table>
@@ -197,7 +197,7 @@
                 <td class="padding-small" width="100">
                     <label class="input-label"><%= scope.textMinValue %></label>
                 </td>
-                <td class="padding-small" width="115" style="padding-right: 10px;">
+                <td class="padding-small padding-right" 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" width="115" style="padding-right: 10px;">
+                <td class="padding-small padding-right" 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" width="115" style="padding-right: 10px;">
+                <td class="padding-large padding-right" width="115">
                     <div id="chart-dlg-combo-v-crosstype-1"></div>
                 </td>
                 <td class="padding-large" width="90">
@@ -246,9 +246,9 @@
                     <div id="chart-dlg-check-v-logscale-1"></div>
                 </td>
                 <td class="padding-large">
-                    <div style="float: right;">
+                    <div class="base">
                         <label class="input-label"><%= scope.textBase %></label>
-                        <div id="chart-dlg-input-base-1" style="display: inline-block;margin-left: 5px;"></div>
+                        <div id="chart-dlg-input-base-1" style="display: inline-block;"></div>
                     </div>
                 </td>
             </tr>
@@ -267,8 +267,8 @@
                     <div id="chart-dlg-combo-v-major-type-1" class="input-group-nr"></div>
                 </td>
                 <td class="padding-large">
-                    <label class="input-label" style="margin-left: 15px;"><%= scope.textMinorType %></label>
-                    <div id="chart-dlg-combo-v-minor-type-1" class="input-group-nr" style="margin-left: 15px;"></div>
+                    <label class="input-label margin-left"><%= scope.textMinorType %></label>
+                    <div id="chart-dlg-combo-v-minor-type-1" class="input-group-nr margin-left"></div>
                 </td>
             </tr>
             <tr>
@@ -288,7 +288,7 @@
                     <div id="chart-dlg-combo-v-label-pos-1" class="input-group-nr" ></div>
                 </td>
                 <td>
-                    <button type="button" class="btn btn-text-default auto" id="chart-dlg-btn-v-format-1" style="min-width: 100px;margin-left: 15px;"><%= scope.textFormat %></button>
+                    <button type="button" class="btn btn-text-default auto margin-left" id="chart-dlg-btn-v-format-1" style="min-width: 100px;"><%= scope.textFormat %></button>
                 </td>
             </tr>
         </table>
@@ -308,8 +308,8 @@
                     <div id="chart-dlg-combo-hor-title-0" class="input-group-nr"></div>
                 </td>
                 <td class="padding-large">
-                    <label class="input-label" style="margin-left: 15px;"><%= scope.textGridLines %></label>
-                    <div id="chart-dlg-combo-hor-grid-0" class="input-group-nr" style="margin-left: 15px;"></div>
+                    <label class="input-label margin-left"><%= scope.textGridLines %></label>
+                    <div id="chart-dlg-combo-hor-grid-0" class="input-group-nr margin-left"></div>
                 </td>
             </tr>
         </table>
@@ -318,7 +318,7 @@
                 <td class="padding-small" width="100">
                     <label class="input-label"><%= scope.textAxisCrosses %></label>
                 </td>
-                <td class="padding-small" width="115" style="padding-right: 10px;">
+                <td class="padding-small axis-crosses-combo" width="115">
                     <div id="chart-dlg-combo-h-crosstype-0"></div>
                 </td>
                 <td class="padding-small" width="90">
@@ -353,8 +353,8 @@
                     <div id="chart-dlg-combo-h-major-type-0" class="input-group-nr"></div>
                 </td>
                 <td class="padding-small">
-                    <label class="input-label" style="margin-left: 15px;"><%= scope.textMinorType %></label>
-                    <div id="chart-dlg-combo-h-minor-type-0" class="input-group-nr" style="margin-left: 15px;"></div>
+                    <label class="input-label margin-left"><%= scope.textMinorType %></label>
+                    <div id="chart-dlg-combo-h-minor-type-0" class="input-group-nr margin-left"></div>
                 </td>
             </tr>
             <tr>
@@ -384,8 +384,8 @@
                     <div id="chart-dlg-combo-h-label-pos-0" class="input-group-nr"></div>
                 </td>
                 <td class="padding-small">
-                    <label class="input-label" style="margin-left: 15px;"><%= scope.textLabelDist %></label>
-                    <div id="chart-dlg-input-label-dist-0" style="margin-left: 15px;"></div>
+                    <label class="input-label margin-left"><%= scope.textLabelDist %></label>
+                    <div id="chart-dlg-input-label-dist-0" class="margin-left"></div>
                 </td>
             </tr>
             <tr>
@@ -396,8 +396,8 @@
             <tr>
                 <td width="100%" colspan="2">
                     <div id="chart-dlg-combo-label-int-0" class="input-group-nr" style="display: inline-block;width: 100px;vertical-align: middle;"></div>
-                    <div id="chart-dlg-input-label-int-0" style="display: inline-block;margin-left: 3px;width: 60px;vertical-align: middle;"></div>
-                    <button type="button" class="btn btn-text-default auto" id="chart-dlg-btn-h-format-0" style="min-width:100px; margin-left: 5px;vertical-align: middle;float: right;"><%= scope.textFormat %></button>
+                    <div id="chart-dlg-input-label-int-0" style="display: inline-block;width: 60px;vertical-align: middle;"></div>
+                    <button type="button" class="btn btn-text-default auto" id="chart-dlg-btn-h-format-0" style="min-width:100px; vertical-align: middle;"><%= scope.textFormat %></button>
                 </td>
             </tr>
         </table>
@@ -417,8 +417,8 @@
                     <div id="chart-dlg-combo-hor-title-1" class="input-group-nr"></div>
                 </td>
                 <td class="padding-large">
-                    <label class="input-label" style="margin-left: 15px;"><%= scope.textGridLines %></label>
-                    <div id="chart-dlg-combo-hor-grid-1" class="input-group-nr" style="margin-left: 15px;"></div>
+                    <label class="input-label margin-left"><%= scope.textGridLines %></label>
+                    <div id="chart-dlg-combo-hor-grid-1" class="input-group-nr margin-left"></div>
                 </td>
             </tr>
         </table>
@@ -427,7 +427,7 @@
                 <td class="padding-small" width="100">
                     <label class="input-label"><%= scope.textAxisCrosses %></label>
                 </td>
-                <td class="padding-small" width="115" style="padding-right: 10px;">
+                <td class="padding-small padding-right" width="115">
                     <div id="chart-dlg-combo-h-crosstype-1"></div>
                 </td>
                 <td class="padding-small" width="90">
@@ -462,8 +462,8 @@
                     <div id="chart-dlg-combo-h-major-type-1" class="input-group-nr"></div>
                 </td>
                 <td class="padding-small">
-                    <label class="input-label" style="margin-left: 15px;"><%= scope.textMinorType %></label>
-                    <div id="chart-dlg-combo-h-minor-type-1" class="input-group-nr" style="margin-left: 15px;"></div>
+                    <label class="input-label margin-left"><%= scope.textMinorType %></label>
+                    <div id="chart-dlg-combo-h-minor-type-1" class="input-group-nr margin-left"></div>
                 </td>
             </tr>
             <tr>
@@ -493,8 +493,8 @@
                     <div id="chart-dlg-combo-h-label-pos-1" class="input-group-nr"></div>
                 </td>
                 <td class="padding-small">
-                    <label class="input-label" style="margin-left: 15px;"><%= scope.textLabelDist %></label>
-                    <div id="chart-dlg-input-label-dist-1" style="margin-left: 15px;"></div>
+                    <label class="input-label margin-left"><%= scope.textLabelDist %></label>
+                    <div id="chart-dlg-input-label-dist-1" class="margin-left"></div>
                 </td>
             </tr>
             <tr>
@@ -506,7 +506,7 @@
                 <td width="100%" colspan="2">
                     <div id="chart-dlg-combo-label-int-1" class="input-group-nr" style="display: inline-block;width: 100px;vertical-align: middle;"></div>
                     <div id="chart-dlg-input-label-int-1" style="display: inline-block;margin-left: 3px;width: 60px;vertical-align: middle;"></div>
-                    <button type="button" class="btn btn-text-default auto" id="chart-dlg-btn-h-format-1" style="min-width:100px; margin-left: 5px;vertical-align: middle;float: right;"><%= scope.textFormat %></button>
+                    <button type="button" class="btn btn-text-default auto" id="chart-dlg-btn-h-format-1" style="min-width:100px;vertical-align: middle;"><%= scope.textFormat %></button>
                 </td>
             </tr>
         </table>
@@ -518,7 +518,7 @@
             <tr>
                 <td class="padding-large">
                     <label class="header"><%= scope.textType %></label>
-                    <div id="spark-dlg-button-type" style="margin-right: 15px;"></div>
+                    <div id="spark-dlg-button-type"></div>
                 </td>
                 <td class="padding-large">
                     <label class="header"><%= scope.textStyle %></label>
@@ -537,7 +537,7 @@
             <tr>
                 <td class="padding-small" width="230">
                     <label class="input-label"><%= scope.textShowEmptyCells %></label>
-                    <div id="spark-dlg-combo-empty" class="input-group-nr" style="margin-right: 10px;"></div>
+                    <div id="spark-dlg-combo-empty" class="input-group-nr"></div>
                 </td>
                 <td></td>
             </tr>
@@ -566,7 +566,7 @@
                 <td class="padding-small" width="100">
                     <label class="input-label"><%= scope.textMinValue %></label>
                 </td>
-                <td class="padding-small" width="115" style="padding-right: 10px;">
+                <td class="padding-small padding-right" 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" width="115" style="padding-right: 10px;">
+                <td class="padding-large padding-right" width="115">
                     <div id="spark-dlg-combo-maxtype"></div>
                 </td>
                 <td class="padding-large" width="90">
diff --git a/apps/spreadsheeteditor/main/app/template/ImageSettings.template b/apps/spreadsheeteditor/main/app/template/ImageSettings.template
index 9d7e446a7..27e002faf 100644
--- a/apps/spreadsheeteditor/main/app/template/ImageSettings.template
+++ b/apps/spreadsheeteditor/main/app/template/ImageSettings.template
@@ -43,15 +43,15 @@
         <td class="padding-small" width="50%">
             <label class="input-label"><%= scope.textRotate90 %></label>
             <div>
-                <div id="image-button-270" style="display: inline-block;margin-right: 4px;"></div>
-                <div id="image-button-90" style="display: inline-block;"></div>
+                <div id="image-button-270"></div>
+                <div id="image-button-90"></div>
             </div>
         </td>
         <td class="padding-small" width="50%">
             <label class="input-label"><%= scope.textFlip %></label>
             <div>
-                <div id="image-button-fliph" style="display: inline-block;margin-right: 4px;"></div>
-                <div id="image-button-flipv" style="display: inline-block;"></div>
+                <div id="image-button-fliph"></div>
+                <div id="image-button-flipv"></div>
             </div>
         </td>
     </tr>
diff --git a/apps/spreadsheeteditor/main/app/template/ImageSettingsAdvanced.template b/apps/spreadsheeteditor/main/app/template/ImageSettingsAdvanced.template
index 9c5fb1c05..252d13ee3 100644
--- a/apps/spreadsheeteditor/main/app/template/ImageSettingsAdvanced.template
+++ b/apps/spreadsheeteditor/main/app/template/ImageSettingsAdvanced.template
@@ -2,7 +2,7 @@
     <div class="inner-content  padding-large">
         <div style="width: 100%;">
             <label class="input-label"><%= scope.textAngle %></label>
-            <div id="image-advanced-spin-angle" style="display: inline-block; margin-left: 5px;"></div>
+            <div id="image-advanced-spin-angle" style="display: inline-block;"></div>
         </div>
     </div>
     <div class="separator horizontal padding-large"></div>
@@ -10,7 +10,7 @@
         <table cols="2">
             <tr>
                 <td rowspan="2" class="padding-small" style="vertical-align: top;">
-                    <label class="input-label" style="margin-right: 15px;vertical-align: top;"><%= scope.textFlipped %></label>
+                    <label class="input-label flipped" style="vertical-align: top;"><%= scope.textFlipped %></label>
                 </td>
                 <td class="padding-small">
                     <div id="image-advanced-checkbox-hor"></div>
diff --git a/apps/spreadsheeteditor/main/app/template/NameManagerDlg.template b/apps/spreadsheeteditor/main/app/template/NameManagerDlg.template
index 8ae841cca..ef016148f 100644
--- a/apps/spreadsheeteditor/main/app/template/NameManagerDlg.template
+++ b/apps/spreadsheeteditor/main/app/template/NameManagerDlg.template
@@ -25,7 +25,7 @@
             </tr>
             <tr>
                 <td class="padding-large">
-                    <button type="button" class="btn btn-text-default" id="name-manager-btn-new" style="min-width: 100px;margin-right:5px;"><%= scope.textNew %></button>
+                    <button type="button" class="btn btn-text-default" id="name-manager-btn-new" style="min-width: 100px;"><%= scope.textNew %></button>
                     <button type="button" class="btn btn-text-default" id="name-manager-btn-edit" style="min-width: 100px;"><%= scope.textEdit %></button>
                 </td>
                 <td class="padding-large" style="text-align: right;width:90px;">
diff --git a/apps/spreadsheeteditor/main/app/template/ParagraphSettingsAdvanced.template b/apps/spreadsheeteditor/main/app/template/ParagraphSettingsAdvanced.template
index 397e41ebd..fb2079162 100644
--- a/apps/spreadsheeteditor/main/app/template/ParagraphSettingsAdvanced.template
+++ b/apps/spreadsheeteditor/main/app/template/ParagraphSettingsAdvanced.template
@@ -8,11 +8,11 @@
         </div>
         <div class="padding-very-small"><label class="header"><%= scope.strIndent %></label></div>
         <div>
-            <div class="padding-large" style="display: inline-block;margin-right: 3px;">
+            <div class="padding-large margin-right" style="display: inline-block;">
                 <label class="input-label"><%= scope.strIndentsLeftText %></label>
                 <div id="paragraphadv-spin-indent-left"></div>
             </div><!--
-         --><div class="padding-large" style="display: inline-block;margin-right: 3px;">
+         --><div class="padding-large margin-right" style="display: inline-block;">
                 <label class="input-label"><%= scope.strIndentsRightText %></label>
                 <div id="paragraphadv-spin-indent-right"></div>
             </div><!--
@@ -21,18 +21,18 @@
                     <label class="input-label"><%= scope.strIndentsSpecial %></label>
                 </div>
                 <div>
-                    <div id="paragraphadv-spin-special" style="display: inline-block;margin-right: 3px;"></div><!--
+                    <div id="paragraphadv-spin-special" class="margin-right" style="display: inline-block;"></div><!--
                  --><div id="paragraphadv-spin-special-by" style="display: inline-block;"></div>
                 </div>
             </div>
         </div>
         <div class="padding-very-small"><label class="header"><%= scope.strSpacing %></label></div>
         <div>
-            <div style="display: inline-block;margin-right: 3px;">
+            <div class="margin-right" style="display: inline-block;">
                 <label class="input-label"><%= scope.strIndentsSpacingBefore %></label>
                 <div id="paragraphadv-spin-spacing-before"></div>
             </div><!--
-         --><div style="display: inline-block;margin-right: 3px;">
+         --><div class="margin-right" style="display: inline-block;">
                 <label class="input-label"><%= scope.strIndentsSpacingAfter %></label>
                 <div id="paragraphadv-spin-spacing-after"></div>
             </div><!--
@@ -41,7 +41,7 @@
                     <label class="input-label"><%= scope.strIndentsLineSpacing %></label>
                 </div>
                 <div>
-                    <div id="paragraphadv-spin-line-rule" style="display: inline-block;margin-right: 3px;"></div><!--
+                    <div id="paragraphadv-spin-line-rule" class="margin-right" style="display: inline-block;"></div><!--
                  --><div id="paragraphadv-spin-line-height" style="display: inline-block;"></div>
                 </div>
             </div>
@@ -63,7 +63,7 @@
                 <td class="padding-small">
                     <div id="paragraphadv-checkbox-strike"></div>
                 </td>
-                <td class="padding-small" style="padding-left: 40px;">
+                <td class="padding-small padding-left">
                     <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" style="padding-left: 40px;">
+                <td class="padding-small padding-left">
                     <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" style="padding-left: 40px;">
+                <td class="padding-large padding-left">
                     <div id="paragraphadv-checkbox-all-caps"></div>
                 </td>
             </tr>
@@ -105,11 +105,11 @@
 
         </div>
         <div>
-            <div class="padding-large" style="display: inline-block; margin-right: 9px;">
+            <div class="padding-large margin-right" style="display: inline-block;">
                 <label class="input-label"><%= scope.textTabPosition %></label>
                 <div id="paraadv-spin-tab"></div>
             </div>
-            <div class="padding-large" style=" display: inline-block; margin-right: 9px;">
+            <div class="padding-large margin-right" style=" display: inline-block;">
                 <label class="input-label"><%= scope.textAlign %></label>
                 <div id="paraadv-cmb-align"></div>
             </div>
@@ -120,8 +120,8 @@
             </div>
         </div>
         <div>
-            <button type="button" class="btn btn-text-default" id="paraadv-button-add-tab" style="width:108px;margin-right: 9px; display: inline-block;"><%= scope.textSet %></button>
-            <button type="button" class="btn btn-text-default" id="paraadv-button-remove-tab" style="width:108px;margin-right: 9px; display: inline-block;"><%= scope.textRemove %></button>
+            <button type="button" class="btn btn-text-default margin-right" id="paraadv-button-add-tab" style="width:108px; display: inline-block;"><%= scope.textSet %></button>
+            <button type="button" class="btn btn-text-default margin-right" id="paraadv-button-remove-tab" style="width:108px; display: inline-block;"><%= scope.textRemove %></button>
             <button type="button" class="btn btn-text-default" id="paraadv-button-remove-all" style="width:108px;display: inline-block;"><%= scope.textRemoveAll %></button>
         </div>
     </div>
diff --git a/apps/spreadsheeteditor/main/app/template/PivotSettingsAdvanced.template b/apps/spreadsheeteditor/main/app/template/PivotSettingsAdvanced.template
index f782fa415..53d6b2620 100644
--- a/apps/spreadsheeteditor/main/app/template/PivotSettingsAdvanced.template
+++ b/apps/spreadsheeteditor/main/app/template/PivotSettingsAdvanced.template
@@ -42,7 +42,7 @@
                     <label id="pivot-adv-label-wrap" class="input-label"></label>
                 </td>
                 <td class="padding-large">
-                    <div id="pivot-adv-spin-wrap" style="float: right; width: 85px;"></div>
+                    <div id="pivot-adv-spin-wrap" style="width: 85px;"></div>
                 </td>
             </tr>
             <tr>
diff --git a/apps/spreadsheeteditor/main/app/template/ShapeSettings.template b/apps/spreadsheeteditor/main/app/template/ShapeSettings.template
index 4d8534512..4e01cc82c 100644
--- a/apps/spreadsheeteditor/main/app/template/ShapeSettings.template
+++ b/apps/spreadsheeteditor/main/app/template/ShapeSettings.template
@@ -26,7 +26,7 @@
                         <div id="shape-combo-fill-type" style="width: 90px;"></div>
                     </td>
                     <td rowspan="2">
-                        <div style="width: 90px; height: 80px; padding: 14px 20px; border: 1px solid #AFAFAF; border-radius: 2px; background: #ffffff;float:right;">
+                        <div class="texture-img">
                             <div id="shape-texture-img" style="width: 50px;height: 50px;"></div>
                         </div>
                     </td>
@@ -44,11 +44,11 @@
                 <div id="shape-combo-pattern" style="width: 100%; height: 42px; margin-bottom: 8px;"></div>
                 <div style="width: 100%; height: 25px; margin-bottom: 8px;">
                     <label class="input-label" style="margin-top: 3px;"><%= scope.strForeground %></label>
-                    <div id="shape-foreground-color-btn" style="display: inline-block; float:right;"></div>
+                    <div id="shape-foreground-color-btn"></div>
                 </div>
                 <div style="width: 100%; height: 25px;">
                     <label class="input-label" style="margin-top: 3px;"><%= scope.strBackground %></label>
-                    <div id="shape-background-color-btn" style="display: inline-block; float:right;"></div>
+                    <div id="shape-background-color-btn"></div>
                 </div>
             </div>
             <div id="shape-panel-gradient-fill" class="settings-hidden padding-small" style="width: 100%;">
@@ -61,7 +61,7 @@
                             </div>
                         </td>
                         <td rowspan="2" style="width: 100%;">
-                            <div style="float: right;">
+                            <div class="shape-direction">
                                 <label class="input-label"><%= scope.textDirection %></label>
                                 <div id="shape-button-direction"></div>
                             </div>
@@ -69,7 +69,7 @@
                     </tr>
                     <tr valign="bottom">
                         <td>
-                            <label class="input-label" style="margin-right: 5px;margin-bottom: 3px;"><%= scope.textAngle %></label>
+                            <label class="input-label angle-label"><%= scope.textAngle %></label>
                         </td>
                         <td>
                             <div id="shape-spin-gradient-angle" style="display: inline-block; width: 60px;"></div>
@@ -86,7 +86,7 @@
                         <label class="input-label" style=""><%= scope.strColor %></label>
                         <div id="shape-gradient-color-btn"></div>
                     </div>
-                    <div style="margin-left: 10px;">
+                    <div class="gradient-position">
                         <label class="input-label" style=""><%= scope.textPosition %></label>
                         <div id="shape-gradient-position"></div>
                     </div>
@@ -108,7 +108,7 @@
                     <div id="shape-slider-transparency" style="display: inline-block;margin: 0 4px; vertical-align: middle;"></div>
                     <label id="shape-lbl-transparency-end">100</label>
                 </div>
-                <div id="shape-spin-transparency" style="display: inline-block;float: right;"></div>
+                <div id="shape-spin-transparency"></div>
             </div>
         </td>
     </tr>
@@ -159,15 +159,15 @@
                     <td class="padding-small" width="50%">
                         <label class="input-label"><%= scope.textRotate90 %></label>
                         <div>
-                            <div id="shape-button-270" style="display: inline-block;margin-right: 4px;"></div>
-                            <div id="shape-button-90" style="display: inline-block;"></div>
+                            <div id="shape-button-270"></div>
+                            <div id="shape-button-90"></div>
                         </div>
                     </td>
                     <td class="padding-small" width="50%">
                         <label class="input-label"><%= scope.textFlip %></label>
                         <div>
-                            <div id="shape-button-fliph" style="display: inline-block;margin-right: 4px;"></div>
-                            <div id="shape-button-flipv" style="display: inline-block;"></div>
+                            <div id="shape-button-fliph"></div>
+                            <div id="shape-button-flipv"></div>
                         </div>
                     </td>
                 </tr>
@@ -182,7 +182,7 @@
     <tr class="change-type">
         <td class="padding-small">
             <label class="header" style="margin-top: 3px;"><%= scope.strChange %></label>
-            <div id="shape-btn-change" style="display: inline-block; float:right;"></div>
+            <div id="shape-btn-change"></div>
         </td>
     </tr>
     <tr>
diff --git a/apps/spreadsheeteditor/main/app/template/ShapeSettingsAdvanced.template b/apps/spreadsheeteditor/main/app/template/ShapeSettingsAdvanced.template
index b33dd3e97..81aca2a20 100644
--- a/apps/spreadsheeteditor/main/app/template/ShapeSettingsAdvanced.template
+++ b/apps/spreadsheeteditor/main/app/template/ShapeSettingsAdvanced.template
@@ -21,7 +21,7 @@
     <div class="inner-content  padding-large">
         <div style="width: 100%;">
             <label class="input-label"><%= scope.textAngle %></label>
-            <div id="shape-advanced-spin-angle" style="display: inline-block; margin-left: 5px;"></div>
+            <div id="shape-advanced-spin-angle" style="display: inline-block;"></div>
         </div>
     </div>
     <div class="separator horizontal padding-large"></div>
@@ -29,7 +29,7 @@
         <table cols="2">
             <tr>
                 <td rowspan="2" class="padding-small" style="vertical-align: top;">
-                    <label class="input-label" style="margin-right: 15px;vertical-align: top;"><%= scope.textFlipped %></label>
+                    <label class="input-label flipped" style="vertical-align: top;"><%= scope.textFlipped %></label>
                 </td>
                 <td class="padding-small">
                     <div id="shape-advanced-checkbox-hor"></div>
diff --git a/apps/spreadsheeteditor/main/app/template/SlicerSettings.template b/apps/spreadsheeteditor/main/app/template/SlicerSettings.template
index 27b937ffe..840bf7fd2 100644
--- a/apps/spreadsheeteditor/main/app/template/SlicerSettings.template
+++ b/apps/spreadsheeteditor/main/app/template/SlicerSettings.template
@@ -47,7 +47,7 @@
     <tr>
         <td class="padding-small" colspan=2>
             <label class="input-label"><%= scope.textColumns %></label>
-            <div id="slicer-spin-cols" style="display: inline-block;margin-left:5px;"></div>
+            <div id="slicer-spin-cols"></div>
         </td>
     </tr>
     <tr>
diff --git a/apps/spreadsheeteditor/main/app/template/SlicerSettingsAdvanced.template b/apps/spreadsheeteditor/main/app/template/SlicerSettingsAdvanced.template
index 93668bc1a..a2b276810 100644
--- a/apps/spreadsheeteditor/main/app/template/SlicerSettingsAdvanced.template
+++ b/apps/spreadsheeteditor/main/app/template/SlicerSettingsAdvanced.template
@@ -13,11 +13,11 @@
         </div>
         <div class="padding-very-small"><label class="header"><%= scope.strSize %></label></div>
         <div>
-            <div class="padding-large" style="display: inline-block; margin-right: 5px;">
+            <div class="padding-large margin-right" style="display: inline-block;">
                 <label class="input-label"><%= scope.strWidth %></label>
                 <div id="sliceradv-spin-width"></div>
             </div>
-            <div id="sliceradv-button-ratio" style="display: inline-block; margin-right: 5px;"></div>
+            <div id="sliceradv-button-ratio" class="margin-right" style="display: inline-block;"></div>
             <div class="padding-large" style="display: inline-block;">
                 <label class="input-label"><%= scope.strHeight %></label>
                 <div id="sliceradv-spin-height"></div>
@@ -25,7 +25,7 @@
         </div>
         <div class="padding-very-small"><label class="header"><%= scope.strButtons %></label></div>
         <div>
-            <div style="display: inline-block; margin-right: 5px;">
+            <div class="margin-right" style="display: inline-block;">
                 <label class="input-label"><%= scope.strColumns %></label>
                 <div id="sliceradv-spin-columns"></div>
             </div>
diff --git a/apps/spreadsheeteditor/main/app/template/StatusBar.template b/apps/spreadsheeteditor/main/app/template/StatusBar.template
index e7ab60c19..8ee23cdb7 100644
--- a/apps/spreadsheeteditor/main/app/template/StatusBar.template
+++ b/apps/spreadsheeteditor/main/app/template/StatusBar.template
@@ -1,6 +1,6 @@
 
 <div class="statusbar">
-    <div id="status-tabs-scroll" class="status-group">
+    <div id="status-tabs-scroll" class="status-group" dir="ltr">
         <button id="status-btn-tabback" type="button" class="btn small btn-toolbar" data-hint="0" data-hint-direction="top" data-hint-offset="small" data-hint-title="G"><i class="icon toolbar__icon btn-previtem">&nbsp;</i></button>
         <button id="status-btn-tabnext" type="button" class="btn small btn-toolbar" data-hint="0" data-hint-direction="top" data-hint-offset="small" data-hint-title="J"><i class="icon toolbar__icon btn-nextitem">&nbsp;</i></button>
     </div>
@@ -18,7 +18,7 @@
                 <label id="status-label-zoom" class="status-label">Zoom 100%</label>
             </div>
         </div>
-        <button id="status-btn-zoomup" type="button" class="btn small btn-toolbar" style="margin-right:40px;"><i class="icon toolbar__icon btn-zoomup">&nbsp;</i></button>
+        <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 class="separator short"></div>
diff --git a/apps/spreadsheeteditor/main/app/template/TextArtSettings.template b/apps/spreadsheeteditor/main/app/template/TextArtSettings.template
index 38d4e8846..ac22734b7 100644
--- a/apps/spreadsheeteditor/main/app/template/TextArtSettings.template
+++ b/apps/spreadsheeteditor/main/app/template/TextArtSettings.template
@@ -36,7 +36,7 @@
                         <button type="button" class="btn btn-text-default" id="textart-button-from-file" style="width:90px;" data-hint="1" data-hint-direction="bottom" data-hint-offset="big"><%= scope.textFromFile %></button>
                     </td>
                     <td class="padding-small" width="50%">
-                        <button type="button" class="btn btn-text-default" id="textart-button-from-url" style="width:90px;float:right;" data-hint="1" data-hint-direction="bottom" data-hint-offset="big"><%= scope.textFromUrl %></button>
+                        <button type="button" class="btn btn-text-default" id="textart-button-from-url" style="width:90px;" data-hint="1" data-hint-direction="bottom" data-hint-offset="big"><%= scope.textFromUrl %></button>
                     </td>
                 </tr>
                 <tr>
@@ -44,7 +44,7 @@
                         <div id="textart-combo-fill-type" style="width: 90px;"></div>
                     </td>
                     <td rowspan="2">
-                        <div style="width: 90px; height: 80px; padding: 14px 20px; border: 1px solid #AFAFAF; border-radius: 2px; background: #ffffff;float:right;">
+                        <div class="texture-img" style="width: 90px; height: 80px;">
                             <div id="textart-texture-img" style="width: 50px;height: 50px;"></div>
                         </div>
                     </td>
@@ -62,11 +62,11 @@
                 <div id="textart-combo-pattern" style="width: 100%; height: 42px; margin-bottom: 8px;"></div>
                 <div style="width: 100%; height: 25px; margin-bottom: 8px;">
                     <label class="input-label" style="margin-top: 3px;"><%= scope.strForeground %></label>
-                    <div id="textart-foreground-color-btn" style="display: inline-block; float:right;"></div>
+                    <div id="textart-foreground-color-btn"></div>
                 </div>
                 <div style="width: 100%; height: 25px;">
                     <label class="input-label" style="margin-top: 3px;"><%= scope.strBackground %></label>
-                    <div id="textart-background-color-btn" style="display: inline-block; float:right;"></div>
+                    <div id="textart-background-color-btn"></div>
                 </div>
             </div>
             <div id="textart-panel-gradient-fill" class="settings-hidden padding-small" style="width: 100%;">
@@ -79,7 +79,7 @@
                             </div>
                         </td>
                         <td rowspan="2" style="width: 100%;">
-                            <div style="float: right;">
+                            <div class="textar-direction">
                                 <label class="input-label"><%= scope.textDirection %></label>
                                 <div id="textart-button-direction"></div>
                             </div>
@@ -87,7 +87,7 @@
                     </tr>
                     <tr valign="bottom">
                         <td>
-                            <label class="input-label" style="margin-right: 5px;margin-bottom: 3px;"><%= scope.textAngle %></label>
+                            <label class="input-label angle-label"><%= scope.textAngle %></label>
                         </td>
                         <td>
                             <div id="textart-spin-gradient-angle" style="display: inline-block; width: 60px;"></div>
@@ -104,7 +104,7 @@
                         <label class="input-label" style=""><%= scope.strColor %></label>
                         <div id="textart-gradient-color-btn"></div>
                     </div>
-                    <div style="margin-left: 10px;">
+                    <div class="gradient-position">
                         <label class="input-label" style=""><%= scope.textPosition %></label>
                         <div id="textart-gradient-position"></div>
                     </div>
@@ -126,7 +126,7 @@
                     <div id="textart-slider-transparency" style="display: inline-block;margin: 0 4px; vertical-align: middle;"></div>
                     <label id="textart-lbl-transparency-end">100</label>
                 </div>
-                <div id="textart-spin-transparency" style="display: inline-block;float: right;"></div>
+                <div id="textart-spin-transparency"></div>
             </div>
         </td>
     </tr>
diff --git a/apps/spreadsheeteditor/main/app/view/CellSettings.js b/apps/spreadsheeteditor/main/app/view/CellSettings.js
index 690341383..d9183286e 100644
--- a/apps/spreadsheeteditor/main/app/view/CellSettings.js
+++ b/apps/spreadsheeteditor/main/app/view/CellSettings.js
@@ -288,7 +288,8 @@ define([
                 var color = me.GradColor.colors[me.GradColor.currentIdx];
                 me.btnGradColor.setColor(color);
                 me.colorsGrad.select(color,false);
-                me.spnGradPosition.setValue(me.GradColor.values[me.GradColor.currentIdx]);
+                var curValue = me.GradColor.values[me.GradColor.currentIdx];
+                me.spnGradPosition.setValue(Common.UI.isRTL() ? me.sldrGradient.maxValue - curValue : curValue);
             });
             this.sldrGradient.on('thumbdblclick', function(cmp){
                 me.btnGradColor.cmpEl.find('button').dropdown('toggle');
@@ -958,7 +959,8 @@ define([
                         me.sldrGradient.setActiveThumb(me.GradColor.currentIdx);
 
                         // Step position
-                        this.spnGradPosition.setValue(this.GradColor.values[this.GradColor.currentIdx]);
+                        var curValue = this.GradColor.values[this.GradColor.currentIdx];
+                        this.spnGradPosition.setValue(Common.UI.isRTL() ? this.sldrGradient.maxValue - curValue : curValue);
 
                         this.OriginalFillType = Asc.c_oAscFill.FILL_TYPE_GRAD;
                         this.FGColor = {
@@ -1410,7 +1412,8 @@ define([
 
         onGradientChange: function(slider, newValue, oldValue) {
             this.GradColor.values = slider.getValues();
-            this.spnGradPosition.setValue(this.GradColor.values[this.GradColor.currentIdx], true);
+            var curValue = this.GradColor.values[this.GradColor.currentIdx];
+            this.spnGradPosition.setValue(Common.UI.isRTL() ? this.sldrGradient.maxValue - curValue : curValue, true);
             this._sliderChanged = true;
             if (this.api && !this._noApply) {
                 if (this._sendUndoPoint)  {
@@ -1512,8 +1515,11 @@ define([
 
         onPositionChange: function(btn) {
             var me = this,
-                pos = btn.getNumberValue(),
-                minValue = (this.GradColor.currentIdx-1<0) ? 0 : this.GradColor.values[this.GradColor.currentIdx-1],
+                pos = btn.getNumberValue();
+            if (Common.UI.isRTL()) {
+                pos = this.sldrGradient.maxValue - pos;
+            }
+            var minValue = (this.GradColor.currentIdx-1<0) ? 0 : this.GradColor.values[this.GradColor.currentIdx-1],
                 maxValue = (this.GradColor.currentIdx+1<this.GradColor.values.length) ? this.GradColor.values[this.GradColor.currentIdx+1] : 100,
                 needSort = pos < minValue || pos > maxValue;
             if (this.api) {
diff --git a/apps/spreadsheeteditor/main/app/view/ChartDataDialog.js b/apps/spreadsheeteditor/main/app/view/ChartDataDialog.js
index 98e599c10..400376053 100644
--- a/apps/spreadsheeteditor/main/app/view/ChartDataDialog.js
+++ b/apps/spreadsheeteditor/main/app/view/ChartDataDialog.js
@@ -50,7 +50,8 @@ define([
     SSE.Views.ChartDataDialog = Common.Views.AdvancedSettingsWindow.extend(_.extend({
         options: {
             contentWidth: 370,
-            height: 490
+            height: 490,
+            id: 'window-chart-data'
         },
 
         initialize : function(options) {
@@ -81,12 +82,12 @@ define([
                                 '</tr>',
                                 '<tr>',
                                     '<td class="padding-large">',
-                                        '<button type="button" class="btn btn-text-default auto" id="chart-dlg-btn-add" style="min-width: 70px;margin-right:5px;">', me.textAdd, '</button>',
-                                        '<button type="button" class="btn btn-text-default auto" id="chart-dlg-btn-edit" style="min-width: 70px;margin-right:5px;">', me.textEdit, '</button>',
-                                        '<button type="button" class="btn btn-text-default auto" id="chart-dlg-btn-delete" style="min-width: 70px;margin-right:5px;">', me.textDelete, '</button>',
-                                        '<div style="display: inline-block; float: right;">',
-                                        '<div id="chart-dlg-btn-up" style="display: inline-block;margin-right: 2px;"></div>',
-                                        '<div id="chart-dlg-btn-down" style="display: inline-block;"></div>',
+                                        '<button type="button" class="btn btn-text-default auto" id="chart-dlg-btn-add">', me.textAdd, '</button>',
+                                        '<button type="button" class="btn btn-text-default auto" id="chart-dlg-btn-edit">', me.textEdit, '</button>',
+                                        '<button type="button" class="btn btn-text-default auto" id="chart-dlg-btn-delete">', me.textDelete, '</button>',
+                                        '<div class="up-down-btns">',
+                                        '<div id="chart-dlg-btn-up"></div>',
+                                        '<div id="chart-dlg-btn-down"></div>',
                                         '</div>',
                                     '</td>',
                                 '</tr>',
diff --git a/apps/spreadsheeteditor/main/app/view/ChartDataRangeDialog.js b/apps/spreadsheeteditor/main/app/view/ChartDataRangeDialog.js
index 8bf492c6c..204b48c45 100644
--- a/apps/spreadsheeteditor/main/app/view/ChartDataRangeDialog.js
+++ b/apps/spreadsheeteditor/main/app/view/ChartDataRangeDialog.js
@@ -76,7 +76,7 @@ define([
                         '<div id="id-dlg-chart-range-range1"></div>',
                     '</td>',
                     '<td style="padding-bottom: 8px;">',
-                        '<label id="id-dlg-chart-range-lbl1" style="width: 120px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-left: 5px;margin-top: 4px;">' + this.txtChoose + '</label>',
+                        '<label id="id-dlg-chart-range-lbl1" style="width: 120px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 4px;">' + this.txtChoose + '</label>',
                     '</td>',
                 '</tr>',
                 '<% if (type==1) { %>',
@@ -90,7 +90,7 @@ define([
                         '<div id="id-dlg-chart-range-range2"></div>',
                     '</td>',
                     '<td style="padding-bottom: 8px;">',
-                        '<label id="id-dlg-chart-range-lbl2" style="width: 120px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-left: 5px;margin-top: 4px;"></label>',
+                        '<label id="id-dlg-chart-range-lbl2" style="width: 120px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 4px;"></label>',
                     '</td>',
                 '</tr>',
                 '<% if (isScatter) { %>',
@@ -104,7 +104,7 @@ define([
                         '<div id="id-dlg-chart-range-range3"></div>',
                     '</td>',
                     '<td style="padding-bottom: 8px;">',
-                        '<label id="id-dlg-chart-range-lbl3" style="width: 120px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-left: 5px;margin-top: 4px;"></label>',
+                        '<label id="id-dlg-chart-range-lbl3" style="width: 120px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 4px;"></label>',
                     '</td>',
                 '</tr>',
                 '<% } %>',
diff --git a/apps/spreadsheeteditor/main/app/view/ChartSettings.js b/apps/spreadsheeteditor/main/app/view/ChartSettings.js
index e4f07f647..2baec0f81 100644
--- a/apps/spreadsheeteditor/main/app/view/ChartSettings.js
+++ b/apps/spreadsheeteditor/main/app/view/ChartSettings.js
@@ -797,7 +797,6 @@ define([
                 cls         : 'btn-toolbar',
                 iconCls     : 'toolbar__icon btn-menu-chart',
                 caption     : this.textChangeType,
-                style       : 'width: 100%;text-align: left;',
                 dataHint    : '1',
                 dataHintDirection: 'left',
                 dataHintOffset: 'small'
@@ -810,7 +809,6 @@ define([
                 cls         : 'btn-toolbar',
                 iconCls     : 'toolbar__icon btn-select-range',
                 caption     : this.textSelectData,
-                style       : 'width: 100%;text-align: left;',
                 dataHint    : '1',
                 dataHintDirection: 'left',
                 dataHintOffset: 'small'
@@ -823,7 +821,6 @@ define([
                 cls         : 'btn-toolbar',
                 iconCls     : 'toolbar__icon switch_row_column',
                 caption     : this.textSwitch,
-                style       : 'width: 100%;text-align: left;',
                 dataHint    : '1',
                 dataHintDirection: 'left',
                 dataHintOffset: 'small'
diff --git a/apps/spreadsheeteditor/main/app/view/ChartTypeDialog.js b/apps/spreadsheeteditor/main/app/view/ChartTypeDialog.js
index 13a6a14e8..7083d0b12 100644
--- a/apps/spreadsheeteditor/main/app/view/ChartTypeDialog.js
+++ b/apps/spreadsheeteditor/main/app/view/ChartTypeDialog.js
@@ -197,10 +197,10 @@ define([
                 template: _.template(['<div class="listview inner" style=""></div>'].join('')),
                 itemTemplate: _.template([
                     '<div class="list-item" style="width: 100%;" id="chart-type-dlg-item-<%= seriesIndex %>">',
-                        '<div style="width:8px;height:12px;display: inline-block;vertical-align: middle;" id="chart-type-dlg-series-preview-<%= seriesIndex %>"></div>',
-                        '<div style="width:95px;padding-left: 5px;display: inline-block;vertical-align: middle;overflow: hidden; text-overflow: ellipsis;white-space: nowrap;"><%= value %></div>',
-                        '<div style="width: 110px;padding-left: 5px;display: inline-block;vertical-align: middle;"><div id="chart-type-dlg-cmb-series-<%= seriesIndex %>" class="input-group-nr" style=""></div></div>',
-                        '<div style="padding-left: 55px;display: inline-block;vertical-align: middle;"><div id="chart-type-dlg-chk-series-<%= seriesIndex %>" style=""></div></div>',
+                        '<div class="series-color" id="chart-type-dlg-series-preview-<%= seriesIndex %>"></div>',
+                        '<div class="series-value"><%= value %></div>',
+                        '<div class="series-cmb"><div id="chart-type-dlg-cmb-series-<%= seriesIndex %>" class="input-group-nr" style=""></div></div>',
+                        '<div class="series-chk"><div id="chart-type-dlg-chk-series-<%= seriesIndex %>" style=""></div></div>',
                     '</div>'
                 ].join(''))
             });
diff --git a/apps/spreadsheeteditor/main/app/view/CreatePivotDialog.js b/apps/spreadsheeteditor/main/app/view/CreatePivotDialog.js
index 908ab8bfa..da51ea34b 100644
--- a/apps/spreadsheeteditor/main/app/view/CreatePivotDialog.js
+++ b/apps/spreadsheeteditor/main/app/view/CreatePivotDialog.js
@@ -48,7 +48,8 @@ define([
     SSE.Views.CreatePivotDialog = Common.Views.AdvancedSettingsWindow.extend(_.extend({
         options: {
             contentWidth: 310,
-            height: 250
+            height: 250,
+            id: 'window-create-pivot'
         },
 
         initialize : function(options) {
@@ -87,7 +88,7 @@ define([
                                         '</td>',
                                     '</tr>',
                                     '<tr>',
-                                        '<td style="padding-left: 22px;">',
+                                        '<td class="input-dest">',
                                             '<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 bd5c85296..6f5fd9c74 100644
--- a/apps/spreadsheeteditor/main/app/view/ExternalLinksDlg.js
+++ b/apps/spreadsheeteditor/main/app/view/ExternalLinksDlg.js
@@ -67,8 +67,8 @@ define([
                                 '<table cols="1" style="width: 100%;">',
                                     '<tr>',
                                         '<td class="padding-large">',
-                                            '<div id="external-links-btn-update" style="display: inline-block;margin-right: 5px;"></div>',
-                                            '<div id="external-links-btn-delete" style="display: inline-block;margin-right: 5px;"></div>',
+                                            '<div id="external-links-btn-update" style="display: inline-block;"></div>',
+                                            '<div id="external-links-btn-delete" style="display: inline-block;"></div>',
                                             // '<button type="button" class="btn btn-text-default auto sort-dialog-btn-text" id="external-links-btn-open">', me.textOpen ,'</button>',
                                             // '<button type="button" class="btn btn-text-default auto sort-dialog-btn-text" id="external-links-btn-change">', me.textChange ,'</button>',
                                         '</td>',
diff --git a/apps/spreadsheeteditor/main/app/view/FileMenuPanels.js b/apps/spreadsheeteditor/main/app/view/FileMenuPanels.js
index d03a5bc85..869569b42 100644
--- a/apps/spreadsheeteditor/main/app/view/FileMenuPanels.js
+++ b/apps/spreadsheeteditor/main/app/view/FileMenuPanels.js
@@ -301,6 +301,9 @@ define([
                 '<tr>',
                     '<td colspan="2"><div id="fms-chb-use-alt-key"></div></td>',
                 '</tr>',
+                '<tr>',
+                    '<td colspan="2"><div id="fms-chb-rtl-ui"></div></td>',
+                '</tr>',
                 '<tr class="quick-print">',
                     '<td colspan="2"><div style="display: flex;"><div id="fms-chb-quick-print"></div>',
                         '<span style ="display: flex; flex-direction: column;"><label><%= scope.txtQuickPrint %></label>',
@@ -326,7 +329,7 @@ define([
                 '<tr class="macros">',
                     '<td><label><%= scope.strMacrosSettings %></label></td>',
                     '<td>',
-                        '<div><div id="fms-cmb-macros" style="display: inline-block; margin-right: 15px;vertical-align: middle;"></div>',
+                        '<div><div id="fms-cmb-macros"></div>',
                     '</td>',
                 '</tr>',
                 '<tr class ="divider-group"></tr>',
@@ -336,14 +339,14 @@ define([
                 '<tr class="">',
                     '<td><label><%= scope.strFuncLocale %></label></td>',
                     '<td>',
-                        '<div><div id="fms-cmb-func-locale" style="display: inline-block; margin-right: 15px;vertical-align: middle;"></div>',
-                        '<label id="fms-lbl-func-locale" style="vertical-align: middle;"><%= scope.strFuncLocaleEx %></label></div></td>',
+                        '<div><div id="fms-cmb-func-locale"></div>',
+                        '<label id="fms-lbl-func-locale"><%= scope.strFuncLocaleEx %></label></div></td>',
                 '</tr>',
                 '<tr>',
                     '<td><label><%= scope.txtRegion %></label></td>',
                     '<td>',
-                        '<div><div id="fms-cmb-reg-settings" style="display: inline-block; margin-right: 15px;vertical-align: middle;"></div>',
-                        '<label id="fms-lbl-reg-settings" style="vertical-align: middle;"></label></div></td>',
+                        '<div><div id="fms-cmb-reg-settings"></div>',
+                        '<label id="fms-lbl-reg-settings"></label></div></td>',
                 '</tr>',
                 '<tr>',
                     '<td colspan="2"><div id="fms-chb-separator-settings"></div></td>',
@@ -776,6 +779,14 @@ define([
             });
             this.btnAutoCorrect.on('click', _.bind(this.autoCorrect, this));
 
+            this.chRTL = new Common.UI.CheckBox({
+                el: $markup.findById('#fms-chb-rtl-ui'),
+                labelText: this.strRTLSupport,
+                dataHint: '2',
+                dataHintDirection: 'left',
+                dataHintOffset: 'small'
+            });
+
             $markup.find('.btn.primary').each(function(index, el){
                 (new Common.UI.Button({
                     el: $(el)
@@ -953,6 +964,7 @@ define([
             this.cmbMacros.setValue(item ? item.get('value') : 0);
 
             this.chPaste.setValue(Common.Utils.InternalSettings.get("sse-settings-paste-button"));
+            this.chRTL.setValue(Common.localStorage.getBool("ui-rtl"));
             this.chQuickPrint.setValue(Common.Utils.InternalSettings.get("sse-settings-quick-print-button"));
 
             var data = [];
@@ -1057,6 +1069,7 @@ define([
             Common.Utils.InternalSettings.set("sse-macros-mode", this.cmbMacros.getValue());
 
             Common.localStorage.setItem("sse-settings-paste-button", this.chPaste.isChecked() ? 1 : 0);
+            Common.localStorage.setBool("ui-rtl", this.chRTL.isChecked());
             Common.localStorage.setBool("sse-settings-quick-print-button", this.chQuickPrint.isChecked());
 
             Common.localStorage.save();
@@ -1184,6 +1197,7 @@ define([
         strDecimalSeparator: 'Decimal separator',
         strThousandsSeparator: 'Thousands separator',
         txtCacheMode: 'Default cache mode',
+        strRTLSupport: 'RTL interface',
         strMacrosSettings: 'Macros Settings',
         txtWarnMacros: 'Show Notification',
         txtRunMacros: 'Enable All',
@@ -1862,7 +1876,7 @@ SSE.Views.FileMenuPanels.RecentFiles = Common.UI.BaseView.extend({
                         '<td class="right"><div id="id-info-rights"></div></td>',
                     '</tr>',
                     '<tr class="edit-rights">',
-                        '<td class="left"></td><td class="right"><button id="id-info-btn-edit" class="btn normal dlg-btn primary custom" style="margin-right: 10px;">' + this.txtBtnAccessRights + '</button></td>',
+                        '<td class="left"></td><td class="right"><button id="id-info-btn-edit" class="btn normal dlg-btn primary custom">' + this.txtBtnAccessRights + '</button></td>',
                     '</tr>',
                 '</table>'
             ].join(''));
@@ -1977,7 +1991,7 @@ SSE.Views.FileMenuPanels.RecentFiles = Common.UI.BaseView.extend({
         template: _.template([
             '<div style="width:100%; height:100%; position: relative;">',
                 '<div id="id-help-contents" style="position: absolute; width:220px; top: 0; bottom: 0;" class="no-padding"></div>',
-                '<div id="id-help-frame" style="position: absolute; left: 220px; top: 0; right: 0; bottom: 0;" class="no-padding"></div>',
+                '<div id="id-help-frame" class="no-padding"></div>',
             '</div>'
         ].join('')),
 
@@ -2384,14 +2398,14 @@ SSE.Views.FileMenuPanels.RecentFiles = Common.UI.BaseView.extend({
                                     '<tr><td><label><%= scope.txtRepeatRowsAtTop %></label></td></tr>',
                                     '<tr><td class="padding-small">',
                                         '<table><tbody><tr>',
-                                            '<td><div id="print-txt-top" style="width: 163px; margin-right: 8px;"></div></td>',
+                                            '<td><div id="print-txt-top" style="width: 163px;"></div></td>',
                                             '<td><div id="print-presets-top" style="width: 77px;"></div></td>',
                                         '</tr></tbody></table>',
                                     '</td></tr>',
                                     '<tr><td><label><%= scope.txtRepeatColumnsAtLeft %></label></td></tr>',
                                     '<tr><td class="padding-large">',
                                         '<table><tbody><tr>',
-                                            '<td><div id="print-txt-left" style="width: 163px; margin-right: 8px;"></div></td>',
+                                            '<td><div id="print-txt-left" style="width: 163px;"></div></td>',
                                             '<td><div id="print-presets-left" style="width: 77px;"></div></td>',
                                         '</tr></tbody></table>',
                                     '</td></tr>',
@@ -2404,8 +2418,8 @@ SSE.Views.FileMenuPanels.RecentFiles = Common.UI.BaseView.extend({
                                                     '<td><label><%= scope.txtBottom %></label></td>',
                                                 '</tr>',
                                                 '<tr>',
-                                                    '<td class="padding-small"><div id="print-spin-margin-top" style="margin-right: 8px;"></div></td>',
-                                                    '<td class="padding-small"><div id="print-spin-margin-bottom" style="margin-right: 8px;"></div></td>',
+                                                    '<td class="padding-small"><div id="print-spin-margin-top"></div></td>',
+                                                    '<td class="padding-small"><div id="print-spin-margin-bottom"></div></td>',
                                                 '</tr>',
                                                 '<tr>',
                                                     '<td><label><%= scope.txtLeft %></label></td>',
@@ -2440,11 +2454,16 @@ SSE.Views.FileMenuPanels.RecentFiles = Common.UI.BaseView.extend({
                         '</div>',
                     '</div>',
                 '</div>',
-                '<div id="print-preview-box" style="position: absolute; left: 280px; top: 0; right: 0; bottom: 0;" class="no-padding">',
+                '<div id="print-preview-box" class="no-padding">',
                     '<div id="print-preview"></div>',
                     '<div id="print-navigation">',
-                        '<div id="print-prev-page" style="display: inline-block; margin-right: 4px;"></div>',
-                        '<div id="print-next-page" style="display: inline-block;"></div>',
+                        '<% if (!isRTL) { %>',
+                        '<div id="print-prev-page"></div>',
+                        '<div id="print-next-page"></div>',
+                        '<% } else { %>',
+                        '<div id="print-next-page"></div>',
+                        '<div id="print-prev-page"></div>',
+                        '<% } %>',
                         '<div class="page-number">',
                             '<label><%= scope.txtPage %></label>',
                             '<div id="print-number-page"></div>',
@@ -2471,7 +2490,7 @@ SSE.Views.FileMenuPanels.RecentFiles = Common.UI.BaseView.extend({
         render: function(node) {
             var me = this;
 
-            var $markup = $(this.template({scope: this}));
+            var $markup = $(this.template({scope: this, isRTL: Common.UI.isRTL()}));
 
             this.cmbRange = new Common.UI.ComboBox({
                 el: $markup.findById('#print-combo-range'),
diff --git a/apps/spreadsheeteditor/main/app/view/HeaderFooterDialog.js b/apps/spreadsheeteditor/main/app/view/HeaderFooterDialog.js
index 711839b95..d082600cc 100644
--- a/apps/spreadsheeteditor/main/app/view/HeaderFooterDialog.js
+++ b/apps/spreadsheeteditor/main/app/view/HeaderFooterDialog.js
@@ -52,7 +52,8 @@ define([
             style: 'min-width: 350px;',
             cls: 'modal-dlg enable-key-events',
             animate: {mask: false},
-            buttons: ['ok', 'cancel']
+            buttons: ['ok', 'cancel'],
+            id: 'window-header-footer'
         },
 
         initialize : function(options) {
@@ -103,24 +104,24 @@ define([
                     '<div class="input-row input-row--tabs" style="margin-bottom: 15px;">',
                         '<button type="button" class="btn btn-text-default auto" id="id-dlg-hf-btn-all" style="border-radius: 0;">', this.textAll,'</button>',
                         '<button type="button" class="btn btn-text-default auto hidden" id="id-dlg-hf-btn-odd" style="border-radius: 0;">', this.textOdd,'</button>',
-                        '<button type="button" class="btn btn-text-default auto hidden" id="id-dlg-hf-btn-even" style="border-radius: 0; margin-left:-1px;">', this.textEven,'</button>',
-                        '<button type="button" class="btn btn-text-default auto hidden" id="id-dlg-hf-btn-first" style="border-radius: 0; margin-left:-1px;">', this.textFirst,'</button>',
+                        '<button type="button" class="btn btn-text-default auto hidden" id="id-dlg-hf-btn-even" style="border-radius: 0;">', this.textEven,'</button>',
+                        '<button type="button" class="btn btn-text-default auto hidden" id="id-dlg-hf-btn-first" style="border-radius: 0;">', this.textFirst,'</button>',
                     '</div>',
                     '<label style="display: block; margin-bottom: 3px;">' + this.textHeader + '</label>',
                     '<div id="id-dlg-h-presets" class="input-row" style="display: inline-block; vertical-align: middle;"></div>',
-                    '<div id="id-dlg-h-insert" class="input-row" style="display: inline-block; vertical-align: middle; margin-left: 2px;"></div>',
-                    '<div id="id-dlg-h-fonts" class="input-row" style="display: inline-block; vertical-align: middle; margin-left: 2px;"></div>',
-                    '<div id="id-dlg-h-font-size" class="input-row" style="display: inline-block; vertical-align: middle; margin-left: 2px;"></div>',
-                    '<div id="id-dlg-h-textcolor" style="display: inline-block;margin-left: 6px;"></div>',
-                    '<div id="id-dlg-h-bold" style="display: inline-block;margin-left: 2px;"></div>','<div id="id-dlg-h-italic" style="display: inline-block;margin-left: 6px;"></div>',
-                    '<div id="id-dlg-h-underline" style="display: inline-block;margin-left: 6px;"></div>','<div id="id-dlg-h-strikeout" style="display: inline-block;margin-left: 6px;"></div>',
-                    '<div id="id-dlg-h-subscript" style="display: inline-block;margin-left: 6px;"></div>','<div id="id-dlg-h-superscript" style="display: inline-block;margin-left: 6px;"></div>',
-                        '<div style="display: inline-block;margin-right: -1px;margin-top: 7px;vertical-align: middle;">',
+                    '<div id="id-dlg-h-insert" class="input-row margin-left-small" style="display: inline-block; vertical-align: middle;"></div>',
+                    '<div id="id-dlg-h-fonts" class="input-row margin-left-small" style="display: inline-block; vertical-align: middle;"></div>',
+                    '<div id="id-dlg-h-font-size" class="input-row margin-left-small" style="display: inline-block; vertical-align: middle;"></div>',
+                    '<div id="id-dlg-h-textcolor" class="margin-left-big" style="display: inline-block;"></div>',
+                    '<div id="id-dlg-h-bold" class="margin-left-small" style="display: inline-block;"></div>','<div id="id-dlg-h-italic" class="margin-left-big" style="display: inline-block;"></div>',
+                    '<div id="id-dlg-h-underline" class="margin-left-big" style="display: inline-block;"></div>','<div id="id-dlg-h-strikeout" class="margin-left-big" style="display: inline-block;"></div>',
+                    '<div id="id-dlg-h-subscript" class="margin-left-big" style="display: inline-block;"></div>','<div id="id-dlg-h-superscript" class="margin-left-big" style="display: inline-block;"></div>',
+                        '<div class="preview-container" style="display: inline-block;margin-top: 7px;vertical-align: middle;">',
                             '<div class="preview-canvas-container" style="width: 206px; height: 92px; position:relative; overflow:hidden;">',
                                 '<div id="header-left-img" style="width: 190px; height: 100%;"></div>',
                             '</div>',
                         '</div>',
-                        '<div style="display: inline-block;margin-right: -1px;margin-top: 7px;vertical-align: middle;">',
+                        '<div class="preview-container" style="display: inline-block;margin-top: 7px;vertical-align: middle;">',
                             '<div class="preview-canvas-container" style="width: 206px; height: 92px; position:relative; overflow:hidden;">',
                                 '<div id="header-center-img" style="width: 190px; height: 100%;"></div>',
                             '</div>',
@@ -132,19 +133,19 @@ define([
                         '</div>',
                     '<label style="display: block; margin-top: 10px;margin-bottom: 3px;">' + this.textFooter + '</label>',
                     '<div id="id-dlg-f-presets" class="input-row" style="display: inline-block; vertical-align: middle;"></div>',
-                    '<div id="id-dlg-f-insert" class="input-row" style="display: inline-block; vertical-align: middle; margin-left: 2px;"></div>',
-                    '<div id="id-dlg-f-fonts" class="input-row" style="display: inline-block; vertical-align: middle; margin-left: 2px;"></div>',
-                    '<div id="id-dlg-f-font-size" class="input-row" style="display: inline-block; vertical-align: middle; margin-left: 2px;"></div>',
-                    '<div id="id-dlg-f-textcolor" style="display: inline-block;margin-left: 6px;"></div>',
-                    '<div id="id-dlg-f-bold" style="display: inline-block;margin-left: 2px;"></div>','<div id="id-dlg-f-italic" style="display: inline-block;margin-left: 6px;"></div>',
-                    '<div id="id-dlg-f-underline" style="display: inline-block;margin-left: 6px;"></div>','<div id="id-dlg-f-strikeout" style="display: inline-block;margin-left: 6px;"></div>',
-                    '<div id="id-dlg-f-subscript" style="display: inline-block;margin-left: 6px;"></div>','<div id="id-dlg-f-superscript" style="display: inline-block;margin-left: 6px;"></div>',
-                        '<div style="display: inline-block;margin-right: -1px;margin-top: 7px;vertical-align: middle;">',
+                    '<div id="id-dlg-f-insert" class="input-row margin-left-small" style="display: inline-block; vertical-align: middle;"></div>',
+                    '<div id="id-dlg-f-fonts" class="input-row margin-left-small" style="display: inline-block; vertical-align: middle;"></div>',
+                    '<div id="id-dlg-f-font-size" class="input-row margin-left-small" style="display: inline-block; vertical-align: middle;"></div>',
+                    '<div id="id-dlg-f-textcolor" class="margin-left-big" style="display: inline-block;"></div>',
+                    '<div id="id-dlg-f-bold" class="margin-left-small" style="display: inline-block;"></div>','<div id="id-dlg-f-italic" class="margin-left-big" style="display: inline-block;"></div>',
+                    '<div id="id-dlg-f-underline" class="margin-left-big" style="display: inline-block;"></div>','<div class="margin-left-big" id="id-dlg-f-strikeout" style="display: inline-block;"></div>',
+                    '<div id="id-dlg-f-subscript" class="margin-left-big" style="display: inline-block;"></div>','<div id="id-dlg-f-superscript" class="margin-left-big" style="display: inline-block;"></div>',
+                        '<div class="preview-container" style="display: inline-block;margin-top: 7px;vertical-align: middle;">',
                             '<div class="preview-canvas-container" style="width: 206px; height: 92px; position:relative; overflow:hidden;">',
                                 '<div id="footer-left-img" style="width: 190px; height: 100%;"></div>',
                             '</div>',
                         '</div>',
-                        '<div style="display: inline-block;margin-right: -1px;margin-top: 7px;vertical-align: middle;">',
+                        '<div class="preview-container" style="display: inline-block;margin-top: 7px;vertical-align: middle;">',
                             '<div class="preview-canvas-container" style="width: 206px; height: 92px; position:relative; overflow:hidden;">',
                                 '<div id="footer-center-img" style="width: 190px; height: 100%;"></div>',
                             '</div>',
diff --git a/apps/spreadsheeteditor/main/app/view/HyperlinkSettingsDialog.js b/apps/spreadsheeteditor/main/app/view/HyperlinkSettingsDialog.js
index e5202bbda..e81acef09 100644
--- a/apps/spreadsheeteditor/main/app/view/HyperlinkSettingsDialog.js
+++ b/apps/spreadsheeteditor/main/app/view/HyperlinkSettingsDialog.js
@@ -55,6 +55,7 @@ define([
             width   : 350,
             style   : 'min-width: 230px;',
             cls     : 'modal-dlg',
+            id      : 'window-hyperlink',
             buttons: ['ok', 'cancel']
         },
 
@@ -65,41 +66,41 @@ define([
 
             this.template = [
                 '<div class="box" style="height: 313px;">',
-                    '<div class="input-row" style="margin-bottom: 10px;">',
-                        '<button type="button" class="btn btn-text-default auto" id="id-dlg-hyperlink-external" style="border-top-right-radius: 0;border-bottom-right-radius: 0;">', this.textExternalLink,'</button>',
-                        '<button type="button" class="btn btn-text-default auto" id="id-dlg-hyperlink-internal" style="border-top-left-radius: 0;border-bottom-left-radius: 0;border-left-width: 0;margin-left: -1px;">', this.textInternalLink,'</button>',
+                    '<div class="input-row margin-bottom-big">',
+                        '<button type="button" class="btn btn-text-default auto" id="id-dlg-hyperlink-external">', this.textExternalLink,'</button>',
+                        '<button type="button" class="btn btn-text-default auto" id="id-dlg-hyperlink-internal">', this.textInternalLink,'</button>',
                     '</div>',
                     '<div id="id-external-link">',
                         '<div class="input-row">',
                             '<label>' + this.strLinkTo + '</label>',
                         '</div>',
-                        '<div id="id-dlg-hyperlink-url" class="input-row" style="margin-bottom: 5px;"></div>',
+                        '<div id="id-dlg-hyperlink-url" class="input-row margin-bottom"></div>',
                     '</div>',
                     '<div id="id-internal-link" class="hidden">',
                         '<div class="input-row">',
                             '<label>' + this.strLinkTo + '</label>',
-                            '<div style="display: inline-block; position: relative;min-width: 150px;float: right;">',
-                                '<label class="link dropdown-toggle" data-toggle="dropdown" id="id-dlg-hyperlink-get-link" style="line-height: 14px; margin-top: 3px;float: right;">' + this.textGetLink + '</label>',
-                                '<div id="id-clip-copy-box" class="dropdown-menu" style="width: 291px; left: -139px; padding: 10px;">',
+                            '<div class="get-link">',
+                                '<label class="link dropdown-toggle" data-toggle="dropdown" id="id-dlg-hyperlink-get-link">' + this.textGetLink + '</label>',
+                                '<div id="id-clip-copy-box" class="dropdown-menu">',
                                     '<div id="id-dlg-clip-copy"></div>',
-                                    '<button id="id-dlg-copy-btn" class="btn btn-text-default" style="margin-left: 5px; width: 86px;">' + this.textCopy + '</button>',
+                                    '<button id="id-dlg-copy-btn" class="btn btn-text-default">' + this.textCopy + '</button>',
                                 '</div>',
                             '</div>',
                         '</div>',
-                        '<div id="id-dlg-hyperlink-list" style="width:100%; height: 115px;"></div>',
+                        '<div id="id-dlg-hyperlink-list"></div>',
                         '<div class="input-row">',
                             '<label>' + this.strRange + '</label>',
                         '</div>',
-                        '<div id="id-dlg-hyperlink-range" class="input-row" style="margin-bottom: 5px;"></div>',
+                        '<div id="id-dlg-hyperlink-range" class="input-row margin-bottom"></div>',
                     '</div>',
                     '<div class="input-row">',
                         '<label>' + this.strDisplay + '</label>',
                     '</div>',
-                    '<div id="id-dlg-hyperlink-display" class="input-row" style="margin-bottom: 5px;"></div>',
+                    '<div id="id-dlg-hyperlink-display" class="input-row margin-bottom"></div>',
                     '<div class="input-row">',
                         '<label>' + this.textTipText + '</label>',
                     '</div>',
-                    '<div id="id-dlg-hyperlink-tip" class="input-row" style="margin-bottom: 5px;"></div>',
+                    '<div id="id-dlg-hyperlink-tip" class="input-row margin-bottom"></div>',
                 '</div>'
             ].join('');
 
diff --git a/apps/spreadsheeteditor/main/app/view/NameManagerDlg.js b/apps/spreadsheeteditor/main/app/view/NameManagerDlg.js
index 328e0ab7b..20ba92c6b 100644
--- a/apps/spreadsheeteditor/main/app/view/NameManagerDlg.js
+++ b/apps/spreadsheeteditor/main/app/view/NameManagerDlg.js
@@ -54,7 +54,8 @@ define([  'text!spreadsheeteditor/main/app/template/NameManagerDlg.template',
             alias: 'NameManagerDlg',
             contentWidth: 525,
             height: 353,
-            buttons: null
+            buttons: null,
+            id: 'window-name-manager'
         },
 
         initialize: function (options) {
diff --git a/apps/spreadsheeteditor/main/app/view/PageMarginsDialog.js b/apps/spreadsheeteditor/main/app/view/PageMarginsDialog.js
index 8a12e4371..9f321c478 100644
--- a/apps/spreadsheeteditor/main/app/view/PageMarginsDialog.js
+++ b/apps/spreadsheeteditor/main/app/view/PageMarginsDialog.js
@@ -62,7 +62,7 @@ define([
                 '<div class="box" style="height: 85px;">',
                     '<table cols="2" style="width: 100%;margin-bottom: 10px;">',
                         '<tr>',
-                            '<td style="padding-right: 10px;padding-bottom: 8px;">',
+                            '<td class="padding-right" style="padding-bottom: 8px;">',
                                 '<label class="input-label">' + this.textTop + '</label>',
                                 '<div id="page-margins-spin-top"></div>',
                             '</td>',
@@ -72,7 +72,7 @@ define([
                             '</td>',
                         '</tr>',
                         '<tr>',
-                            '<td class="padding-small" style="padding-right: 10px;">',
+                            '<td class="padding-small padding-right">',
                                 '<label class="input-label">' + this.textLeft + '</label>',
                                 '<div id="page-margins-spin-left"></div>',
                             '</td>',
diff --git a/apps/spreadsheeteditor/main/app/view/PivotTable.js b/apps/spreadsheeteditor/main/app/view/PivotTable.js
index bfe698038..786d3f25e 100644
--- a/apps/spreadsheeteditor/main/app/view/PivotTable.js
+++ b/apps/spreadsheeteditor/main/app/view/PivotTable.js
@@ -306,7 +306,10 @@ define([
                             if (menuWidth>Common.Utils.innerWidth())
                                 menuWidth = Math.max(Math.floor((Common.Utils.innerWidth()-17)/(itemMargin + itemWidth)), 2) * (itemMargin + itemWidth) + 17;
                             var offset = cmp.cmpEl.width() - cmp.openButton.$el.width() - Math.min(menuWidth, buttonOffsetLeft) - 1;
-                            menu.setOffset(Math.min(offset, 0));
+                            if (Common.UI.isRTL()) {
+                                offset = cmp.openButton.$el.width() + parseFloat($(cmp.$el.find('.combo-dataview').get(0)).css('padding-left'));
+                            }
+                            menu.setOffset(Common.UI.isRTL() ? offset : Math.min(offset, 0));
 
                             menu.cmpEl.css({
                                 'width': menuWidth,
diff --git a/apps/spreadsheeteditor/main/app/view/ProtectDialog.js b/apps/spreadsheeteditor/main/app/view/ProtectDialog.js
index 433b5e9e2..6b6b50461 100644
--- a/apps/spreadsheeteditor/main/app/view/ProtectDialog.js
+++ b/apps/spreadsheeteditor/main/app/view/ProtectDialog.js
@@ -144,11 +144,11 @@ define([
                     template: _.template(['<div class="listview inner" style=""></div>'].join('')),
                     itemTemplate: _.template([
                         '<div>',
-                        '<label class="checkbox-indeterminate" style="position:absolute;">',
+                        '<label class="checkbox-indeterminate">',
                         '<input id="pdcheckbox-<%= id %>" type="checkbox" class="button__checkbox">',
                         '<label for="pdcheckbox-<%= id %>" class="checkbox__shape" ></label>',
                         '</label>',
-                        '<div id="<%= id %>" class="list-item" style="pointer-events:none; margin-left: 20px;display: flex;">',
+                        '<div id="<%= id %>" class="list-item">',
                         '<div style="flex-grow: 1;"><%= Common.Utils.String.htmlEncode(value) %></div>',
                         '</div>',
                         '</div>'
diff --git a/apps/spreadsheeteditor/main/app/view/ScaleDialog.js b/apps/spreadsheeteditor/main/app/view/ScaleDialog.js
index 9f02ce49c..3421f5597 100644
--- a/apps/spreadsheeteditor/main/app/view/ScaleDialog.js
+++ b/apps/spreadsheeteditor/main/app/view/ScaleDialog.js
@@ -50,6 +50,7 @@ define([
             header: true,
             style: 'min-width: 215px;',
             cls: 'modal-dlg',
+            id: 'window-scale',
             buttons: ['ok', 'cancel']
         },
 
@@ -66,7 +67,7 @@ define([
             this.template = [
                 '<div class="box">',
                 '<div id="radio-fit-to" style="margin-bottom: 4px;"></div>',
-                '<div style="padding-left: 22px;">',
+                '<div class="padding-left">',
                     '<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 +78,7 @@ define([
                     '</div>',
                 '</div>',
                 '<div id="radio-scale-to" style="margin-bottom: 6px;"></div>',
-                '<div id="scale" style="padding-left: 22px; margin-bottom: 6px;"></div>',
+                '<div id="scale" class="padding-left" style="margin-bottom: 6px;"></div>',
                 '</div>'
             ].join('');
 
diff --git a/apps/spreadsheeteditor/main/app/view/ShapeSettings.js b/apps/spreadsheeteditor/main/app/view/ShapeSettings.js
index c036ade37..ce5ae2990 100644
--- a/apps/spreadsheeteditor/main/app/view/ShapeSettings.js
+++ b/apps/spreadsheeteditor/main/app/view/ShapeSettings.js
@@ -525,7 +525,8 @@ define([
 
         onGradientChange: function(slider, newValue, oldValue){
             this.GradColor.values = slider.getValues();
-            this.spnGradPosition.setValue(this.GradColor.values[this.GradColor.currentIdx], true);
+            var curValue = this.GradColor.values[this.GradColor.currentIdx];
+            this.spnGradPosition.setValue(Common.UI.isRTL() ? this.sldrGradient.maxValue - curValue : curValue, true);
             this._sliderChanged = true;
             if (this.api && !this._noApply) {
                 if (this._sendUndoPoint)  {
@@ -938,7 +939,8 @@ define([
                     }
                     me.sldrGradient.setActiveThumb(me.GradColor.currentIdx);
 
-                    this.spnGradPosition.setValue(this.GradColor.values[this.GradColor.currentIdx]);
+                    var curValue = me.GradColor.values[me.GradColor.currentIdx];
+                    this.spnGradPosition.setValue(Common.UI.isRTL() ? me.sldrGradient.maxValue - curValue : curValue);
 
                     this.OriginalFillType = Asc.c_oAscFill.FILL_TYPE_GRAD;
                     this.FGColor = {Value: 1, Color: this.GradColor.colors[0]};
@@ -1375,7 +1377,7 @@ define([
                 me.btnGradColor.setColor(color);
                 me.colorsGrad.select(color,false);
                 var pos = me.GradColor.values[me.GradColor.currentIdx];
-                me.spnGradPosition.setValue(pos, true);
+                me.spnGradPosition.setValue(Common.UI.isRTL() ? me.sldrGradient.maxValue - pos : pos, true);
             });
             this.sldrGradient.on('thumbdblclick', function(cmp){
                 me.btnGradColor.cmpEl.find('button').dropdown('toggle');
@@ -1894,8 +1896,11 @@ define([
         },
 
         onPositionChange: function(btn) {
-            var pos = btn.getNumberValue(),
-                minValue = (this.GradColor.currentIdx-1<0) ? 0 : this.GradColor.values[this.GradColor.currentIdx-1],
+            var pos = btn.getNumberValue();
+            if (Common.UI.isRTL()) {
+                pos = this.sldrGradient.maxValue - pos;
+            }
+            var minValue = (this.GradColor.currentIdx-1<0) ? 0 : this.GradColor.values[this.GradColor.currentIdx-1],
                 maxValue = (this.GradColor.currentIdx+1<this.GradColor.values.length) ? this.GradColor.values[this.GradColor.currentIdx+1] : 100,
                 needSort = pos < minValue || pos > maxValue;
             if (this.api) {
diff --git a/apps/spreadsheeteditor/main/app/view/Spellcheck.js b/apps/spreadsheeteditor/main/app/view/Spellcheck.js
index 82bcf0673..a4de2cce1 100644
--- a/apps/spreadsheeteditor/main/app/view/Spellcheck.js
+++ b/apps/spreadsheeteditor/main/app/view/Spellcheck.js
@@ -65,7 +65,7 @@ define([
                         '<label class="header" style="display: block;"><%= scope.txtDictionaryLanguage %></label>',
                         '<div id="spellcheck-dictionary-language"></div>',
                         '<div id="spellcheck-complete" class="hidden">',
-                            '<i class="btn-resolve" style="display: inline-block;margin-right: 10px;"></i>',
+                            '<i class="btn-resolve"></i>',
                             '<%= scope.txtComplete %>' ,
                         '</div>',
                     '</div>',
@@ -110,7 +110,6 @@ define([
 
             this.buttonNext = new Common.UI.Button({
                 parentEl: $('#spellcheck-next'),
-                style: 'margin-left: 5px;',
                 cls: 'btn-toolbar bg-white',
                 iconCls: 'toolbar__icon btn-nextitem',
                 hint: this.txtNextTip,
diff --git a/apps/spreadsheeteditor/main/app/view/Statusbar.js b/apps/spreadsheeteditor/main/app/view/Statusbar.js
index 8a013f483..823a9fc63 100644
--- a/apps/spreadsheeteditor/main/app/view/Statusbar.js
+++ b/apps/spreadsheeteditor/main/app/view/Statusbar.js
@@ -763,7 +763,8 @@ define([
                         this.tabMenu.atposition = (function () {
                             return {
                                 top : rect.top,
-                                left: rect.left - parentPos.left - 2
+                                left: rect.left - parentPos.left - 2,
+                                right: rect.right - parentPos.left + 2
                             };
                         })();
 
@@ -779,7 +780,7 @@ define([
 
             onTabMenuAfterShow: function (obj) {
                 if (obj.atposition) {
-                    obj.setOffset(obj.atposition.left);
+                    obj.setOffset(Common.UI.isRTL() ? (obj.atposition.right - $(obj.el).width()) : obj.atposition.left);
                 }
 
                 this.enableKeyEvents = true;
@@ -824,12 +825,20 @@ define([
                 var visible = false;
                 var right = parseInt(this.boxZoom.css('width'));
                 if (this.boxMath.is(':visible')) {
-                    this.boxMath.css({'right': right + 'px'});
+                    if (Common.UI.isRTL()) {
+                        this.boxMath.css({'left': right + 'px'});
+                    } else {
+                        this.boxMath.css({'right': right + 'px'});
+                    }
                     right += parseInt(this.boxMath.css('width'));
                     visible = true;
                 }
                 if (this.boxFiltered.is(':visible')) {
-                    this.boxFiltered.css({'right': right + 'px'});
+                    if (Common.UI.isRTL()) {
+                        this.boxFiltered.css({'left': right + 'px'});
+                    } else {
+                        this.boxFiltered.css({'right': right + 'px'});
+                    }
                     right += parseInt(this.boxFiltered.css('width'));
                     visible = true;
                 }
@@ -840,11 +849,21 @@ define([
                         var actionWidth = this.actionWidth || 140;
                         if (Common.Utils.innerWidth() - right - 129 - actionWidth - tabsWidth > 0) { // docWidth - right - left - this.boxAction.width
                             var left = tabsWidth + 129;
-                            this.boxAction.css({'right': right + 'px', 'left': left + 'px', 'width': 'auto'});
-                            this.boxAction.find('.separator').css('border-left-color', 'transparent');
+                            if (Common.UI.isRTL()) {
+                                this.boxAction.css({'left': right + 'px', 'right': left + 'px', 'width': 'auto'});
+                                this.boxAction.find('.separator').css('border-right-color', 'transparent');
+                            } else {
+                                this.boxAction.css({'right': right + 'px', 'left': left + 'px', 'width': 'auto'});
+                                this.boxAction.find('.separator').css('border-left-color', 'transparent');
+                            }
                         } else {
-                            this.boxAction.css({'right': right + 'px', 'left': 'auto', 'width': actionWidth + 'px'});
-                            this.boxAction.find('.separator').css('border-left-color', '');
+                            if (Common.UI.isRTL()) {
+                                this.boxAction.css({'left': right + 'px', 'right': 'auto', 'width': actionWidth + 'px'});
+                                this.boxAction.find('.separator').css('border-right-color', '');
+                            } else {
+                                this.boxAction.css({'right': right + 'px', 'left': 'auto', 'width': actionWidth + 'px'});
+                                this.boxAction.find('.separator').css('border-left-color', '');
+                            }
                             visible = true;
                         }
                         right += parseInt(this.boxAction.css('width'));
@@ -853,18 +872,32 @@ define([
                     this.boxMath.is(':visible') && this.boxMath.css({'top': '0px', 'bottom': 'auto'});
                     this.boxFiltered.is(':visible') && this.boxFiltered.css({'top': '0px', 'bottom': 'auto'});
                     this.boxZoom.css({'top': '0px', 'bottom': 'auto'});
-                    this.tabBarBox.css('right', right + 'px');
+                    if (Common.UI.isRTL()) {
+                        this.tabBarBox.css('left', right + 'px');
+                    } else {
+                        this.tabBarBox.css('right', right + 'px');
+                    }
                 } else {
                     if (this.boxAction.is(':visible')) {
-                        this.boxAction.css({'right': right + 'px', 'left': '135px', 'width': 'auto'});
-                        this.boxAction.find('.separator').css('border-left-color', 'transparent');
+                        if (Common.UI.isRTL()) {
+                            this.boxAction.css({'left': right + 'px', 'right': '135px', 'width': 'auto'});
+                            this.boxAction.find('.separator').css('border-right-color', 'transparent');
+                        } else {
+                            this.boxAction.css({'right': right + 'px', 'left': '135px', 'width': 'auto'});
+                            this.boxAction.find('.separator').css('border-left-color', 'transparent');
+                        }
                     }
                     this.boxMath.is(':visible') && this.boxMath.css({'top': 'auto', 'bottom': '0px'});
                     this.boxFiltered.is(':visible') && this.boxFiltered.css({'top': 'auto', 'bottom': '0px'});
                     this.boxZoom.css({'top': 'auto', 'bottom': '0px'});
-                    this.tabBarBox.css('right', '0px');
+                    if (Common.UI.isRTL()) {
+                        this.tabBarBox.css('left', '0px');
+                        this.boxZoom.find('.separator').css('border-right-color', visible ? '' : 'transparent');
+                    } else {
+                        this.tabBarBox.css('right', '0px');
+                        this.boxZoom.find('.separator').css('border-left-color', visible ? '' : 'transparent');
+                    }
                 }
-                this.boxZoom.find('.separator').css('border-left-color', visible ? '' : 'transparent');
 
                 if (this.statusMessage) {
                     var status = this.getStatusMessage(this.statusMessage);
@@ -890,11 +923,12 @@ define([
             },
 
             changeViewMode: function (mode) {
-                var edit = mode.isEdit;
+                var edit = mode.isEdit,
+                    styleLeft = Common.UI.isRTL() ? 'right' : 'left';
                 if (edit) {
-                    this.tabBarBox.css('left', '129px');
+                    this.tabBarBox.css(styleLeft, '129px');
                 } else {
-                    this.tabBarBox.css('left', '');
+                    this.tabBarBox.css(styleLeft, '');
                 }
 
                 this.tabbar.options.draggable = edit;
@@ -919,7 +953,7 @@ define([
                 if (obj.atposition) {
                     var statusHeight = $(this.el).height(),
                         offsetTop = !this.isCompact && (obj.atposition.top - $(this.el).offset().top > statusHeight/2) ? statusHeight/2 : 0;
-                    obj.setOffset(obj.atposition.left, offsetTop);
+                    obj.setOffset(Common.UI.isRTL() ? (obj.atposition.left - $(this.el).width() + 2) : obj.atposition.left, offsetTop);
                 }
                 this.enableKeyEvents = true;
             },
diff --git a/apps/spreadsheeteditor/main/app/view/TextArtSettings.js b/apps/spreadsheeteditor/main/app/view/TextArtSettings.js
index 29ca2d396..97f67a80b 100644
--- a/apps/spreadsheeteditor/main/app/view/TextArtSettings.js
+++ b/apps/spreadsheeteditor/main/app/view/TextArtSettings.js
@@ -517,7 +517,8 @@ define([
 
         onGradientChange: function(slider, newValue, oldValue){
             this.GradColor.values = slider.getValues();
-            this.spnGradPosition.setValue(this.GradColor.values[this.GradColor.currentIdx], true);
+            var curValue = this.GradColor.values[this.GradColor.currentIdx];
+            this.spnGradPosition.setValue(Common.UI.isRTL() ? this.sldrGradient.maxValue - curValue : curValue, true);
             this._sliderChanged = true;
             if (this.api && !this._noApply) {
                 if (this._sendUndoPoint)  {
@@ -874,7 +875,8 @@ define([
                         me.GradColor.currentIdx = 0;
                     }
                     me.sldrGradient.setActiveThumb(me.GradColor.currentIdx);
-                    this.spnGradPosition.setValue(this.GradColor.values[this.GradColor.currentIdx]);
+                    var curValue = me.GradColor.values[me.GradColor.currentIdx];
+                    this.spnGradPosition.setValue(Common.UI.isRTL() ? me.sldrGradient.maxValue - curValue : curValue);
                     this.OriginalFillType = Asc.c_oAscFill.FILL_TYPE_GRAD;
                     this.FGColor = {Value: 1, Color: this.GradColor.colors[0]};
                     this.BGColor = {Value: 1, Color: 'ffffff'};
@@ -1313,7 +1315,7 @@ define([
                 me.btnGradColor.setColor(color);
                 me.colorsGrad.select(color,false);
                 var pos = me.GradColor.values[me.GradColor.currentIdx];
-                me.spnGradPosition.setValue(pos, true);
+                me.spnGradPosition.setValue(Common.UI.isRTL() ? me.sldrGradient.maxValue - pos : pos, true);
             });
             this.sldrGradient.on('thumbdblclick', function(cmp){
                 me.btnGradColor.cmpEl.find('button').dropdown('toggle');
@@ -1757,8 +1759,11 @@ define([
         },
 
         onPositionChange: function(btn) {
-            var pos = btn.getNumberValue(),
-                minValue = (this.GradColor.currentIdx-1<0) ? 0 : this.GradColor.values[this.GradColor.currentIdx-1],
+            var pos = btn.getNumberValue();
+            if (Common.UI.isRTL()) {
+                pos = this.sldrGradient.maxValue - pos;
+            }
+            var minValue = (this.GradColor.currentIdx-1<0) ? 0 : this.GradColor.values[this.GradColor.currentIdx-1],
                 maxValue = (this.GradColor.currentIdx+1<this.GradColor.values.length) ? this.GradColor.values[this.GradColor.currentIdx+1] : 100,
                 needSort = pos < minValue || pos > maxValue;
             if (this.api) {
diff --git a/apps/spreadsheeteditor/main/app/view/Toolbar.js b/apps/spreadsheeteditor/main/app/view/Toolbar.js
index 840f7be89..2b9578f5c 100644
--- a/apps/spreadsheeteditor/main/app/view/Toolbar.js
+++ b/apps/spreadsheeteditor/main/app/view/Toolbar.js
@@ -269,8 +269,8 @@ define([
                         _.template([
                             '<% _.each(items, function(item) { %>',
                             '<li id="<%= item.id %>" data-value="<%= item.value %>"><a tabindex="-1" type="menuitem">',
-                            '<div style="position: relative;"><div style="position: absolute; left: 0; width: 100px;"><%= scope.getDisplayValue(item) %></div>',
-                            '<div style="display: inline-block; width: 100%; max-width: 300px; overflow: hidden; text-overflow: ellipsis; text-align: right; vertical-align: bottom; padding-left: 100px; color: silver;white-space: nowrap;"><%= item.exampleval ? item.exampleval : "" %></div>',
+                            '<div style="position: relative;"><div class="display-value"><%= scope.getDisplayValue(item) %></div>',
+                            '<div class="example-val"><%= item.exampleval ? item.exampleval : "" %></div>',
                             '</div></a></li>',
                             '<% }); %>',
                             '<li class="divider">',
@@ -1260,7 +1260,7 @@ define([
                     menu        : new Common.UI.Menu({
                         cls: 'menu-shapes',
                         items: [
-                            {template: _.template('<div id="id-toolbar-menu-insart" style="width: 239px; margin-left: 5px;"></div>')}
+                            {template: _.template('<div id="id-toolbar-menu-insart" style="width: 239px;"></div>')}
                         ]
                     }),
                     dataHint    : '1',
@@ -1367,7 +1367,11 @@ define([
                             if (menuWidth>Common.Utils.innerWidth())
                                 menuWidth = Math.max(Math.floor((Common.Utils.innerWidth()-paddings)/(itemMargin + itemWidth)), 2) * (itemMargin + itemWidth) + paddings;
                             var offset = cmp.cmpEl.width() - cmp.openButton.$el.width() - Math.min(menuWidth, buttonOffsetLeft) - 1;
-                            menu.setOffset(Math.min(offset, 0));
+                            if (Common.UI.isRTL()) {
+                                offset = cmp.openButton.$el.width();
+                            }
+                            menu.setOffset(Common.UI.isRTL() ? offset : Math.min(offset, 0));
+
                             menu.cmpEl.css({
                                 'width': menuWidth,
                                 'min-height': cmp.cmpEl.height()
@@ -1380,8 +1384,8 @@ define([
                     _.template([
                         '<% _.each(items, function(item) { %>',
                         '<li id="<%= item.id %>" data-value="<%= item.value %>"><a tabindex="-1" type="menuitem">',
-                        '<div style="position: relative;"><div style="position: absolute; left: 0; width: 100px;"><%= scope.getDisplayValue(item) %></div>',
-                        '<div style="display: inline-block; width: 100%; max-width: 300px; overflow: hidden; text-overflow: ellipsis; text-align: right; vertical-align: bottom; padding-left: 100px; color: silver;white-space: nowrap;"><%= item.exampleval ? item.exampleval : "" %></div>',
+                        '<div style="position: relative;"><div class="display-value"><%= scope.getDisplayValue(item) %></div>',
+                        '<div class="example-val"><%= item.exampleval ? item.exampleval : "" %></div>',
                         '</div></a></li>',
                         '<% }); %>',
                         '<li class="divider">',
@@ -1703,12 +1707,21 @@ define([
                     dataHintOffset: 'small'
                 });
 
-                var pageMarginsTemplate = _.template('<a id="<%= id %>" tabindex="-1" type="menuitem"><div><b><%= caption %></b></div>' +
-                    '<% if (options.value !== null) { %><div style="display: inline-block;margin-right: 20px;min-width: 80px;">' +
-                    '<label style="display: block;">' + this.textTop + '<%= parseFloat(Common.Utils.Metric.fnRecalcFromMM(options.value[0]).toFixed(2)) %> <%= Common.Utils.Metric.getCurrentMetricName() %></label>' +
-                    '<label style="display: block;">' + this.textLeft + '<%= parseFloat(Common.Utils.Metric.fnRecalcFromMM(options.value[1]).toFixed(2)) %> <%= Common.Utils.Metric.getCurrentMetricName() %></label></div><div style="display: inline-block;">' +
-                    '<label style="display: block;">' + this.textBottom + '<%= parseFloat(Common.Utils.Metric.fnRecalcFromMM(options.value[2]).toFixed(2)) %> <%= Common.Utils.Metric.getCurrentMetricName() %></label>' +
-                    '<label style="display: block;">' + this.textRight + '<%= parseFloat(Common.Utils.Metric.fnRecalcFromMM(options.value[3]).toFixed(2)) %> <%= Common.Utils.Metric.getCurrentMetricName() %></label></div>' +
+                var pageMarginsTemplate = !Common.UI.isRTL() ? _.template('<a id="<%= id %>" tabindex="-1" type="menuitem"><div><b><%= caption %></b></div>' +
+                    '<% if (options.value !== null) { %><div class="margin-vertical">' +
+                    '<label>' + this.textTop + '<%= parseFloat(Common.Utils.Metric.fnRecalcFromMM(options.value[0]).toFixed(2)) %> <%= Common.Utils.Metric.getCurrentMetricName() %></label>' +
+                    '<label>' + this.textLeft + '<%= parseFloat(Common.Utils.Metric.fnRecalcFromMM(options.value[1]).toFixed(2)) %> <%= Common.Utils.Metric.getCurrentMetricName() %></label></div>' +
+                    '<div class="margin-horizontal">' +
+                    '<label>' + this.textBottom + '<%= parseFloat(Common.Utils.Metric.fnRecalcFromMM(options.value[2]).toFixed(2)) %> <%= Common.Utils.Metric.getCurrentMetricName() %></label>' +
+                    '<label>' + this.textRight + '<%= parseFloat(Common.Utils.Metric.fnRecalcFromMM(options.value[3]).toFixed(2)) %> <%= Common.Utils.Metric.getCurrentMetricName() %></label></div>' +
+                    '<% } %></a>') :
+                    _.template('<a id="<%= id %>" tabindex="-1" type="menuitem"><div><b><%= caption %></b></div>' +
+                    '<% if (options.value !== null) { %><div class="margin-vertical">' +
+                    '<label><%= Common.Utils.Metric.getCurrentMetricName() %> <%= parseFloat(Common.Utils.Metric.fnRecalcFromMM(options.value[0]).toFixed(2)) %>' + this.textTop + '</label>' +
+                    '<label><%= Common.Utils.Metric.getCurrentMetricName() %> <%= parseFloat(Common.Utils.Metric.fnRecalcFromMM(options.value[1]).toFixed(2)) %>' + this.textLeft + '</label></div>' +
+                    '<div class="margin-horizontal">' +
+                    '<label><%= Common.Utils.Metric.getCurrentMetricName() %> <%= parseFloat(Common.Utils.Metric.fnRecalcFromMM(options.value[2]).toFixed(2)) %>' + this.textBottom + '</label>' +
+                    '<label><%= Common.Utils.Metric.getCurrentMetricName() %> <%= parseFloat(Common.Utils.Metric.fnRecalcFromMM(options.value[3]).toFixed(2)) %>' + this.textRight + '</label></div>' +
                     '<% } %></a>');
 
                 me.btnPageMargins = new Common.UI.Button({
@@ -1718,6 +1731,7 @@ define([
                     caption: me.capBtnMargins,
                     lock        : [_set.docPropsLock, _set.lostConnect, _set.coAuth, _set.editCell, _set.selRangeEdit],
                     menu: new Common.UI.Menu({
+                        cls: 'menu-margins',
                         items: [
                             {
                                 caption: me.textMarginsLast,
@@ -1755,9 +1769,12 @@ define([
                     dataHintOffset: 'small'
                 });
 
-                var pageSizeTemplate = _.template('<a id="<%= id %>" tabindex="-1" type="menuitem"><div><b><%= caption %></b></div>' +
-                    '<div><%= parseFloat(Common.Utils.Metric.fnRecalcFromMM(options.value[0]).toFixed(2)) %> <%= Common.Utils.Metric.getCurrentMetricName() %> x ' +
-                    '<%= parseFloat(Common.Utils.Metric.fnRecalcFromMM(options.value[1]).toFixed(2)) %> <%= Common.Utils.Metric.getCurrentMetricName() %></div></a>');
+                var pageSizeTemplate = !Common.UI.isRTL() ? _.template('<a id="<%= id %>" tabindex="-1" type="menuitem"><div><b><%= caption %></b></div>' +
+                    '<div dir="ltr"><%= parseFloat(Common.Utils.Metric.fnRecalcFromMM(options.value[0]).toFixed(2)) %> <%= Common.Utils.Metric.getCurrentMetricName() %> x ' +
+                    '<%= parseFloat(Common.Utils.Metric.fnRecalcFromMM(options.value[1]).toFixed(2)) %> <%= Common.Utils.Metric.getCurrentMetricName() %></div></a>') :
+                    _.template('<a id="<%= id %>" tabindex="-1" type="menuitem"><div><b><%= caption %></b></div>' +
+                    '<div dir="ltr"><%= Common.Utils.Metric.getCurrentMetricName() %> <%= parseFloat(Common.Utils.Metric.fnRecalcFromMM(options.value[1]).toFixed(2)) %> x ' +
+                    '<%= Common.Utils.Metric.getCurrentMetricName() %> <%= parseFloat(Common.Utils.Metric.fnRecalcFromMM(options.value[0]).toFixed(2)) %></div></a>');
 
                 me.btnPageSize = new Common.UI.Button({
                     id: 'tlbtn-pagesize',
@@ -1913,14 +1930,14 @@ define([
 
                 me.mnuCustomScale = new Common.UI.MenuItem({
                     template: _.template([
-                        '<div class="checkable custom-scale font-size-normal" style="padding: 5px 5px 5px 20px;font-weight: normal;height: 32px;"',
+                        '<div class="checkable custom-scale font-size-normal"',
                         '<% if(!_.isUndefined(options.stopPropagation)) { %>',
                         'data-stopPropagation="true"',
                         '<% } %>', '>',
-                        '<label class="title" style="padding-top: 3px;padding-right: 5px;">' + me.textScale + '</label>',
-                        '<button id="custom-scale-up" type="button" style="float:right;" class="btn small btn-toolbar"><i class="icon toolbar__icon btn-zoomup">&nbsp;</i></button>',
-                        '<label id="value-custom-scale" style="float:right;padding: 3px 3px;min-width: 40px; text-align: center;"></label>',
-                        '<button id="custom-scale-down" type="button" style="float:right;" class="btn small btn-toolbar"><i class="icon toolbar__icon btn-zoomdown">&nbsp;</i></button>',
+                        '<label class="title">' + me.textScale + '</label>',
+                        '<button id="custom-scale-up" type="button" class="btn small btn-toolbar"><i class="icon toolbar__icon btn-zoomup">&nbsp;</i></button>',
+                        '<label id="value-custom-scale"></label>',
+                        '<button id="custom-scale-down" type="button" class="btn small btn-toolbar"><i class="icon toolbar__icon btn-zoomdown">&nbsp;</i></button>',
                         '</div>'
                     ].join('')),
                     stopPropagation: true,
@@ -2514,7 +2531,7 @@ define([
                             id          : 'id-toolbar-mnu-item-border-color',
                             caption     : this.textBordersColor,
                             iconCls     : 'mnu-icon-item mnu-border-color',
-                            template    : _.template('<a id="<%= id %>"tabindex="-1" type="menuitem"><span class="menu-item-icon" style="background-image: none; width: 12px; height: 12px; margin: 2px 9px 0 -11px; border-style: solid; border-width: 3px; border-color: #000;"></span><%= caption %></a>'),
+                            template    : _.template('<a id="<%= id %>"tabindex="-1" type="menuitem"><span class="menu-item-icon"></span><%= caption %></a>'),
                             menu        : new Common.UI.Menu({
                                 menuAlign   : 'tl-tr',
                                 cls: 'shifted-left',
@@ -2522,7 +2539,7 @@ define([
                                     {
                                         id: 'id-toolbar-menu-auto-bordercolor',
                                         caption: this.textAutoColor,
-                                        template: _.template('<a tabindex="-1" type="menuitem"><span class="menu-item-icon color-auto" style="background-image: none; width: 12px; height: 12px; margin: 1px 7px 0 1px; background-color: #000;"></span><%= caption %></a>'),
+                                        template: _.template('<a tabindex="-1" type="menuitem"><span class="menu-item-icon color-auto"></span><%= caption %></a>'),
                                         stopPropagation: true
                                     },
                                     {caption: '--'},
@@ -2530,7 +2547,7 @@ define([
                                     {caption: '--'},
                                     {
                                         id: "id-toolbar-menu-new-bordercolor",
-                                        template: _.template('<a tabindex="-1" type="menuitem" style="padding-left:12px;">' + this.textNewColor + '</a>'),
+                                        template: _.template('<a tabindex="-1" type="menuitem">' + this.textNewColor + '</a>'),
                                         stopPropagation: true
                                     }
                                 ]
diff --git a/apps/spreadsheeteditor/main/app/view/Viewport.js b/apps/spreadsheeteditor/main/app/view/Viewport.js
index b1235c765..4a5847315 100644
--- a/apps/spreadsheeteditor/main/app/view/Viewport.js
+++ b/apps/spreadsheeteditor/main/app/view/Viewport.js
@@ -106,34 +106,47 @@ define([
 
             $container = $('#viewport-hbox-layout', el);
             items = $container.find(' > .layout-item');
+
+            let iarray = [{
+                el: items[0],
+                rely: true,
+                alias: 'left',
+                resize: {
+                    hidden: true,
+                    autohide: false,
+                    min: 300,
+                    max: 600,
+                    offset: 4
+                }
+            }, { // history versions
+                el: items[3],
+                rely: true,
+                alias: 'history',
+                resize: {
+                    hidden: true,
+                    autohide: false,
+                    min: 300,
+                    max: 600
+                }
+            }, {
+                el: items[1],
+                stretch: true
+            }, {
+                el: $(items[2]).hide(),
+                rely: true
+            }];
+
+            if ( Common.UI.isRTL() ) {
+                [iarray[0].resize.min, iarray[0].resize.max] = [-600, -300];
+                [iarray[1].resize.min, iarray[1].resize.max] = [-600, -300];
+
+                [iarray[0], iarray[3]] = [iarray[3], iarray[0]];
+                [iarray[1], iarray[2]] = [iarray[2], iarray[1]];
+            }
+
             this.hlayout = new Common.UI.HBoxLayout({
                 box: $container,
-                items: [{
-                    el: items[0],
-                    rely: true,
-                    resize: {
-                        hidden: true,
-                        autohide: false,
-                        min: 300,
-                        max: 600,
-                        offset: 4
-                    }
-                }, { // history versions
-                    el: items[3],
-                    rely: true,
-                    resize: {
-                        hidden: true,
-                        autohide: false,
-                        min: 300,
-                        max: 600
-                    }
-                }, {
-                    el: items[1],
-                    stretch: true
-                }, {
-                    el: $(items[2]).hide(),
-                    rely: true
-                }]
+                items: iarray
             });
 
             $container = $container.find('.layout-ct.vbox');
diff --git a/apps/spreadsheeteditor/main/resources/less/advanced-settings.less b/apps/spreadsheeteditor/main/resources/less/advanced-settings.less
index 8f3b3fdf5..41e75262c 100644
--- a/apps/spreadsheeteditor/main/resources/less/advanced-settings.less
+++ b/apps/spreadsheeteditor/main/resources/less/advanced-settings.less
@@ -74,6 +74,11 @@
 .sort-dialog-btn-text {
     min-width: 100px;
     margin-right: 5px;
+
+    .rtl & {
+        margin-right: 0;
+        margin-left: 5px;
+    }
 }
 
 .input-row--tabs {
@@ -86,6 +91,525 @@
     border: @scaled-one-px-value solid @border-regular-control;
 }
 
+#id-adv-shape-rotate, #id-adv-image-rotate {
+    #shape-advanced-spin-angle, #image-advanced-spin-angle {
+        margin-left: 5px;
+
+        .rtl & {
+            margin-left: 0;
+            margin-right: 5px;
+        }
+    }
+
+    .flipped {
+        margin-right: 15px;
+
+        .rtl & {
+            margin-right: 0;
+            margin-left: 15px;
+        }
+    }
+}
+
+#id-chart-settings-dlg-layout {
+    .margin-right {
+        margin-right: 7px;
+
+        .rtl & {
+            margin-right: 0;
+            margin-left: 7px;
+        }
+    }
+
+    .margin-left {
+        margin-left: 7px;
+
+        .rtl & {
+            margin-left: 0;
+            margin-right: 7px;
+        }
+    }
+
+    #chart-dlg-check-series {
+        margin: 20px 0 9px 7px;
+
+        .rtl & {
+            margin: 20px 7px 9px 0;
+        }
+    }
+
+    #chart-dlg-check-category {
+        margin: 0 0 9px 7px;
+
+        .rtl & {
+            margin: 0 7px 9px 0;
+        }
+    }
+
+    #chart-dlg-check-value {
+        margin: 0 0 5px 7px;
+
+        .rtl & {
+            margin: 0 7px 5px 0;
+        }
+    }
+
+    #hart-dlg-check-markers {
+        margin: 0 0 12px 7px;
+
+        .rtl & {
+            margin: 0 7px 12px 0;
+        }
+    }
+}
+
+#id-chart-settings-dlg-vert,
+#id-chart-settings-dlg-vert-sec,
+#id-chart-settings-dlg-hor-sec,
+#id-spark-settings-dlg-axis {
+    .margin-left {
+        margin-left: 15px;
+
+        .rtl & {
+            margin-left: 0;
+            margin-right: 15px;
+        }
+    }
+
+    .padding-right {
+        padding-right: 10px;
+
+        .rtl & {
+            padding-right: 0;
+            padding-left: 10px;
+        }
+    }
+
+    .base, #chart-dlg-btn-h-format-1 {
+        float: right;
+
+        .rtl & {
+            float: left;
+        }
+    }
+
+    #chart-dlg-input-base-0,
+    #chart-dlg-input-base-1,
+    #chart-dlg-btn-h-format-1 {
+        margin-left: 5px;
+
+        .rtl & {
+            margin-left: 0;
+            margin-right: 5px;
+        }
+    }
+}
+
+#id-chart-settings-dlg-hor {
+    .margin-left {
+        margin-left: 15px;
+
+        .rtl & {
+            margin-left: 0;
+            margin-right: 15px;
+        }
+    }
+
+    #chart-dlg-input-label-int-0 {
+        margin-left: 3px;
+
+        .rtl & {
+            margin-left: 0;
+            margin-right: 3px;
+        }
+    }
+
+    #chart-dlg-btn-h-format-0 {
+        margin-left: 5px;
+        float: right;
+
+        .rtl & {
+            margin-left: 0;
+            margin-right: 5px;
+            float: left;
+        }
+    }
+
+    .axis-crosses-combo {
+        padding-right: 10px;
+
+        .rtl & {
+            padding-right: 0;
+            padding-left: 10px;
+        }
+    }
+}
+
+#id-spark-settings-dlg-style {
+    #spark-dlg-button-type {
+        margin-right: 15px;
+
+        .rtl & {
+            margin-right: 0;
+            margin-left: 15px;
+        }
+    }
+
+    #spark-dlg-combo-empty {
+        margin-right: 10px;
+
+        .rtl & {
+            margin-right: 0;
+            margin-left: 10px;
+        }
+    }
+}
+
+#id-adv-paragraph-indents {
+    .margin-right {
+        margin-right: 3px;
+
+        .rtl & {
+            margin-right: 0;
+            margin-left: 3px;
+        }
+    }
+}
+
+#id-adv-paragraph-font {
+    .padding-left {
+        padding-left: 40px;
+
+        .rtl & {
+            padding-left: 0;
+            padding-right: 40px;
+        }
+    }
+}
+
+#id-adv-paragraph-tabs {
+    .margin-right {
+        margin-right: 9px;
+
+        .rtl & {
+            margin-right: 0;
+            margin-left: 9px;
+        }
+    }
+}
+
+#id-adv-pivot-layout {
+    #pivot-adv-spin-wrap {
+        float: right;
+
+        .rtl & {
+            float: left;
+        }
+    }
+}
+
+#id-adv-slicer-style {
+    .margin-right {
+        margin-right: 5px;
+
+        .rtl & {
+            margin-right: 0;
+            margin-left: 5px;
+        }
+    }
+}
+
+#window-chart-data {
+    .up-down-btns {
+        display: inline-block;
+        float: right;
+
+        .rtl & {
+            float: left;
+        }
+
+        #chart-dlg-btn-up {
+            display: inline-block;
+            margin-right: 2px;
+
+            .rtl & {
+                margin-right: 0;
+                margin-left: 2px;
+            }
+        }
+
+        #chart-dlg-btn-down {
+            display: inline-block;
+        }
+    }
+
+    #chart-dlg-btn-add,
+    #chart-dlg-btn-edit,
+    #chart-dlg-btn-delete {
+        min-width: 70px;
+        margin-right: 5px;
+
+        .rtl & {
+            margin-right: 0;
+            margin-left: 5px;
+        }
+    }
+}
+
+#id-dlg-chart-range-lbl1,
+#id-dlg-chart-range-lbl2,
+#id-dlg-chart-range-lbl3 {
+    margin-left: 5px;
+
+    .rtl & {
+        margin-left: 0;
+        margin-right: 5px;
+    }
+}
+
+#chart-type-dlg-series-list {
+    .series-color {
+        width: 8px;
+        height: 12px;
+        display: inline-block;
+        vertical-align: middle;
+    }
+
+    .series-value {
+        width: 95px;
+        padding-left: 5px;
+        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;
+        display: inline-block;
+        vertical-align: middle;
+
+        .rtl & {
+            padding-left: 0;
+            padding-right: 5px;
+        }
+    }
+
+    .series-chk {
+        padding-left: 55px;
+        display: inline-block;
+        vertical-align: middle;
+
+        .rtl & {
+            padding-left: 0;
+            padding-right: 55px;
+        }
+    }
+}
+
+#window-header-footer {
+    #id-dlg-hf-btn-even,
+    #id-dlg-hf-btn-first {
+        margin-left: -1px;
+
+        .rtl & {
+            margin-left: 0;
+            margin-right: -1px;
+        }
+    }
+
+    .margin-left-small {
+        margin-left: 2px;
+
+        .rtl & {
+            margin-left: 0;
+            margin-right: 2px;
+        }
+    }
+
+    .margin-left-big {
+        margin-left: 6px;
+
+        .rtl & {
+            margin-left: 0;
+            margin-right: 6px;
+        }
+    }
+
+    .preview-container {
+        margin-right: -1px;
+
+        .rtl & {
+            margin-right: 0;
+            margin-left: -1px;
+        }
+    }
+}
+
+#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;
+        border-bottom-right-radius: 0;
+
+        .rtl & {
+            .border-radius(@border-radius-small);
+            border-top-left-radius: 0;
+            border-bottom-left-radius: 0;
+        }
+    }
+
+    #id-dlg-hyperlink-internal {
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
+        border-left-width: 0;
+        margin-left: -1px;
+
+        .rtl & {
+            border: @scaled-one-px-value solid @border-regular-control;
+            .border-radius(@border-radius-small);
+            margin-left: 0;
+            border-top-right-radius: 0;
+            border-bottom-right-radius: 0;
+            border-right-width: 0;
+            margin-right: -1px;
+        }
+    }
+
+    .get-link {
+        display: inline-block;
+        position: relative;
+        min-width: 150px;
+        float: right;
+
+        .rtl & {
+            float: left;
+        }
+
+        #id-dlg-hyperlink-get-link {
+            line-height: 14px;
+            margin-top: 3px;
+            float: right;
+
+            .rtl & {
+                float: left;
+            }
+        }
+
+        #id-clip-copy-box {
+            width: 291px;
+            left: -139px;
+            padding: 10px;
+
+            .rtl & {
+                left: auto;
+                right: -139px;
+            }
+
+            #id-dlg-copy-btn {
+                margin-left: 5px;
+                width: 86px;
+
+                .rtl & {
+                    margin-left: 0;
+                    margin-right: 5px;
+                }
+            }
+        }
+    }
+
+    #id-dlg-hyperlink-list {
+        width:100%;
+        height: 115px;
+    }
+
+    .margin-bottom {
+        margin-bottom: 5px;
+    }
+
+    .margin-bottom-big {
+        margin-bottom: 10px;
+    }
+}
+
+
+#external-links-btn-update,
+#external-links-btn-delete {
+    margin-right: 5px;
+
+    .rtl & {
+        margin-right: 0;
+        margin-left: 5px;
+    }
+}
+
+#protect-dlg-options {
+    .list-item {
+        pointer-events:none;
+        margin-left: 20px;
+        display: flex;
+
+        .rtl & {
+            margin-left: 0;
+            margin-right: 20px;
+        }
+    }
+
+    .checkbox-indeterminate {
+        position:absolute;
+    }
+}
+
+#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-btn-new {
+        margin-right: 5px;
+
+        .rtl & {
+            margin-right: 0;
+            margin-left: 5px;
+        }
+    }
+}
+
 #printadv-dlg-pages {
     margin-top: 16px;
 
diff --git a/apps/spreadsheeteditor/main/resources/less/leftmenu.less b/apps/spreadsheeteditor/main/resources/less/leftmenu.less
index cd5559429..2f599184d 100644
--- a/apps/spreadsheeteditor/main/resources/less/leftmenu.less
+++ b/apps/spreadsheeteditor/main/resources/less/leftmenu.less
@@ -31,6 +31,11 @@
     background-color: @background-toolbar-ie;
     background-color: @background-toolbar;
     overflow: hidden;
+
+    .rtl & {
+        left: 0;
+        right: 40px;
+    }
 }
 
 .btn-doc-format {
@@ -168,6 +173,11 @@
         background-color: @background-normal-ie;
         background-color: @background-normal;
 
+        .rtl & {
+            padding-left: 0;
+            padding-right: 260px;
+        }
+
         .content-box {
             height: 100%;
             padding: 0 20px;
@@ -185,11 +195,19 @@
         #panel-saveas, #panel-savecopy  {
             &.content-box {
                 padding: 0 0 0 20px;
+
+                .rtl & {
+                    padding: 0 20px 0 0;
+                }
             }
 
             .content-container {
                 margin: 30px 0 0 10px;
 
+                .rtl & {
+                    margin: 30px 10px 0 0;
+                }
+
                 .header {
                     .font-size-very-huge();
                     margin-bottom: 20px;
@@ -200,6 +218,11 @@
                         float: left;
                         margin: 0 24px 34px 0;
 
+                        .rtl & {
+                            float: right;
+                            margin: 0 0 34px 24px;
+                        }
+
                         .btn-doc-format {
                             width: 70px;
                             height: 90px;
@@ -350,6 +373,24 @@
                     display: block;
                 }
             }
+
+            #fms-cmb-macros,
+            #fms-cmb-func-locale,
+            #fms-cmb-reg-settings {
+                display: inline-block;
+                margin-right: 15px;
+                vertical-align: middle;
+
+                .rtl & {
+                    margin-right: 0;
+                    margin-left: 15px;
+                }
+            }
+
+            #fms-lbl-func-locale,
+            #fms-lbl-reg-settings {
+                vertical-align: middle;
+            }
         }
 
         #panel-createnew {
@@ -359,6 +400,22 @@
                 white-space: nowrap;
                 margin-top: 30px;
                 margin-bottom: 20px;
+
+                .rtl & {
+                    padding: 0 10px 10px 0;
+                }
+            }
+
+            .blank-document-info {
+                vertical-align: top;
+                width: 445px;
+                display: inline-block;
+
+                h3 {
+                    padding-left: 0;
+                    padding-top: 45px;
+                    white-space: nowrap;
+                }
             }
 
             hr {
@@ -488,6 +545,12 @@
                 border-right: @scaled-one-px-value-ie solid @border-toolbar-ie;
                 border-right: @scaled-one-px-value solid @border-toolbar;
 
+                .rtl & {
+                    border-right: none;
+                    border-left: @scaled-one-px-value-ie solid @border-toolbar-ie;
+                    border-left: @scaled-one-px-value solid @border-toolbar;
+                }
+
                 & > div:not([class^=ps-scrollbar]) {
                     display: block;
                     border: none;
@@ -515,10 +578,18 @@
 
                 .help-item-wrap {
                     padding: 4px 2px 4px 20px;
+
+                    .rtl & {
+                        padding: 4px 20px 4px 2px;
+                    }
                 }
 
                 .header-name {
                     padding: 16px 2px 4px 10px;
+
+                    .rtl & {
+                        padding: 16px 10px 4px 2px;
+                    }
                 }
             }
         }
@@ -539,11 +610,19 @@
                     td {
                         padding: 0 20px 5px 0;
 
+                        .rtl & {
+                            padding: 0 0 5px 20px;
+                        }
+
                         &.left {
                             padding: 5px 10px;
                             text-align: right;
                             width: 200px;
 
+                            .rtl & {
+                                text-align: left;
+                            }
+
                             label {
                                 .font-weight-bold();
                             }
@@ -622,10 +701,18 @@
 
             #fms-btn-delete-pwd {
                 margin-left: 16px;
+                .rtl & {
+                    margin-left: 0;
+                    margin-right: 16px;
+                }
             }
 
             .signature-view-link {
                 margin-right: 20px;
+                .rtl & {
+                    margin-right: 0;
+                    margin-left: 20px;
+                }
             }
 
             .signature-tip {
@@ -644,6 +731,14 @@
                 padding-left: 12px;
                 padding-right: 12px;
             }
+
+            #fms-btn-delete-pwd {
+                margin-left: 20px;
+                .rtl & {
+                    margin-left: 0;
+                    margin-right: 20px;
+                }
+            }
         }
 
         #panel-print {
@@ -666,6 +761,11 @@
                 justify-content: center;
                 align-items: center;
 
+                .rtl & {
+                    right: 280px;
+                    left: 0;
+                }
+
                 div {
                     text-align: center;
                 }
@@ -684,6 +784,11 @@
                 flex-direction: column;
                 border-right: @scaled-one-px-value-ie solid @border-toolbar-ie;
                 border-right: @scaled-one-px-value solid @border-toolbar;
+                .rtl & {
+                    border-right: none;
+                    border-left: @scaled-one-px-value-ie solid @border-toolbar-ie;
+                    border-left: @scaled-one-px-value solid @border-toolbar;
+                }
                 label {
                     .font-size-normal();
                     &.header {
@@ -693,6 +798,10 @@
                 .pages {
                     label, #print-spin-pages-from {
                         margin-right: 6px;
+                        .rtl & {
+                            margin-right: 0;
+                            margin-left: 6px;
+                        }
                     }
                     label, div {
                         display: inline-block;
@@ -704,6 +813,10 @@
                 .footer {
                     .btn:not(:last-child) {
                         margin-right: 8px;
+                        .rtl & {
+                            margin-right: 0;
+                            margin-left: 8px;
+                        }
                     }
                 }
                 .settings-container {
@@ -737,6 +850,19 @@
                         }
                     }
                 }
+
+                #print-txt-top,
+                #print-txt-left,
+                #print-spin-margin-top,
+                #print-spin-margin-bottom {
+                    margin-right: 8px;
+
+                    .rtl & {
+                        margin-right: 0;
+                        margin-left: 8px;
+                    }
+                }
+
                 .footer-with-pdf {
                     table {
                         width: 247px;
@@ -757,6 +883,13 @@
                 padding-left: 20px;
                 padding-top: 10px;
                 display: flex;
+                #print-prev-page {
+                    display: inline-block;
+                    margin-right: 4px;
+                }
+                #print-next-page {
+                    display: inline-block;
+                }
                 .btn-prev-page, .btn-next-page {
                     background-color: transparent;
                     padding: 0;
@@ -797,26 +930,62 @@
                     align-items: center;
                     height: 20px;
                     margin-left: 10px;
+                    .rtl & {
+                        margin-left: 0;
+                        margin-right: 10px;
+                    }
                     label {
                         .font-weight-bold();
                     }
                     #print-count-page, #print-number-page {
                         margin-left: 4px;
+                        .rtl & {
+                            margin-left: 0;
+                            margin-right: 4px;
+                        }
                     }
                 }
                 #print-active-sheet {
                     margin-left: 12px;
                     height: 20px;
                     line-height: 20px;
+                    .rtl & {
+                        margin-left: 0;
+                        margin-right: 12px;
+                    }
                 }
             }
             #print-preview {
                 height: calc(100% - 50px);
             }
+            #print-preview-box {
+                position: absolute;
+                left: 280px;
+                top: 0;
+                right: 0;
+                bottom: 0;
+                .rtl & {
+                    right: 280px;
+                    left: 0;
+                }
+            }
         }
     }
 }
 
+#id-help-frame {
+    position: absolute;
+    left: 220px;
+    top: 0;
+    right: 0;
+    bottom: 0;
+
+    .rtl & {
+        left: 0;
+        right: 220px;
+    }
+}
+
 #developer-hint, #beta-hint, #limit-hint {
     position: absolute;
     left: 0;
@@ -873,6 +1042,11 @@
                 &:last-child {
                     width: 36%;
                 }
+
+                .rtl & {
+                    padding-left: 0;
+                    padding-right: 4px;
+                }
             }
         }
         .search-items {
@@ -896,6 +1070,11 @@
                     &: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 ab461caf7..fc682e31a 100644
--- a/apps/spreadsheeteditor/main/resources/less/rightmenu.less
+++ b/apps/spreadsheeteditor/main/resources/less/rightmenu.less
@@ -6,6 +6,314 @@
     label.input-label{
         vertical-align: baseline;
     }
+
+    &#id-cell-settings {
+        #cell-combo-border-type {
+            display: inline-block;
+            vertical-align: middle;
+            width: 93px;
+        }
+
+        .border-color {
+            display: inline-block;
+            float: right;
+            vertical-align: middle;
+
+            .rtl & {
+                float: left;
+            }
+
+            .input-label {
+                margin-right: 5px;
+
+                .rtl & {
+                    margin-right: 0;
+                    margin-left: 5px;
+                }
+            }
+
+            #cell-border-color-btn {
+                display: inline-block;
+            }
+        }
+
+        #cell-spin-angle {
+            display: inline-block;
+            margin-left: 5px;
+
+            .rtl & {
+                margin-left: 0;
+                margin-right: 5px;
+            }
+        }
+
+        #cell-panel-gradient-fill {
+            .cell-direction {
+                display: inline-block;
+                float: right;
+
+                .rtl & {
+                    float: left;
+                }
+
+                #cell-button-direction {
+                    .dataview .item {
+                        .rtl & {
+                            float: left;
+                        }
+                    }
+                }
+            }
+
+            .gradient-position {
+                margin-left: 10px;
+
+                .rtl & {
+                    margin-left: 0;
+                    margin-right: 10px;
+                }
+            }
+        }
+
+        #cell-foreground-color-btn, #cell-background-color-btn {
+            display: inline-block;
+            float: right;
+
+            .rtl & {
+                float: left;
+            }
+        }
+    }
+
+    &#id-table-settings {
+        #id-table-menu-template {
+            .group-description {
+                padding: 3px 0 3px 10px;
+                .font-weight-bold();
+
+                .rtl & {
+                    text-align: right;
+                    padding: 3px 10px 3px 0;
+                }
+            }
+
+            .group-items-container {
+                .item {
+                    &:hover {
+                        .box-shadow(0 0 0 2px @border-preview-hover-ie) !important;
+                        .box-shadow(0 0 0 @scaled-two-px-value @border-preview-hover) !important;
+                    }
+
+                    &.selected {
+                        .box-shadow(0 0 0 2px @border-preview-select-ie) !important;
+                        .box-shadow(0 0 0 @scaled-two-px-value @border-preview-select) !important;
+                    }
+                }
+            }
+        }
+    }
+
+    &#id-shape-settings {
+        #shape-spin-transparency {
+            display: inline-block;
+            float: right;
+
+            .rtl & {
+                float: left;
+            }
+        }
+
+        #shape-button-270, #shape-button-fliph {
+            display: inline-block;
+            margin-right: 4px;
+
+            .rtl & {
+                margin-right: 0;
+                margin-left: 4px;
+            }
+        }
+
+        #shape-button-90, #shape-button-flipv {
+            display: inline-block;
+        }
+
+        #shape-btn-change {
+            display: inline-block;
+            float: right;
+
+            .rtl & {
+                float: left;
+            }
+        }
+
+        .shape-direction {
+            float: right;
+
+            .rtl & {
+                float: left;
+            }
+        }
+
+        .angle-label {
+            margin-right: 5px;
+            margin-bottom: 3px;
+
+            .rtl & {
+                margin-right: 0;
+                margin-left: 5px;
+            }
+        }
+
+        .gradient-position {
+            margin-left: 10px;
+
+            .rtl & {
+                margin-left: 0;
+                margin-right: 10px;
+            }
+        }
+
+        .texture-img {
+            width: 90px;
+            height: 80px;
+            padding: 14px 20px;
+            border: 1px solid #AFAFAF;
+            border-radius: 2px;
+            background: #ffffff;
+            float: right;
+
+            .rtl & {
+                float: left;
+            }
+        }
+
+        #shape-foreground-color-btn,
+        #shape-background-color-btn {
+            display: inline-block;
+            float:right;
+
+            .rtl & {
+                float: left;
+            }
+        }
+    }
+
+    &#id-image-settings {
+        #image-button-270, #image-button-fliph {
+            display: inline-block;
+            margin-right: 4px;
+
+            .rtl & {
+                margin-right: 0;
+                margin-left: 4px;
+            }
+        }
+
+        #image-button-90, #image-button-flipv {
+            display: inline-block;
+        }
+    }
+
+    &#id-chart-settings {
+        #chart-btn-change-type .btn,
+        #chart-btn-select-data .btn,
+        #chart-btn-switch .btn {
+            width: 100%;
+            text-align: left;
+
+            .rtl & {
+                text-align: right;
+            }
+        }
+    }
+
+    &#id-textart-settings {
+        #textart-spin-transparency {
+            display: inline-block;
+            float: right;
+
+            .rtl & {
+                float: left;
+            }
+        }
+
+        .textar-direction {
+            float: right;
+
+            .rtl & {
+                float: left;
+            }
+        }
+
+        .angle-label {
+            margin-right: 5px;
+            margin-bottom: 3px;
+
+            .rtl & {
+                margin-right: 0;
+                margin-left: 5px;
+            }
+        }
+
+        .gradient-position {
+            margin-left: 10px;
+
+            .rtl & {
+                margin-left: 0;
+                margin-right: 10px;
+            }
+        }
+
+        .texture-img {
+            padding: 14px 20px;
+            border: 1px solid #AFAFAF;
+            border-radius: 2px;
+            background: #ffffff;
+            float: right;
+
+            .rtl & {
+                float: left;
+            }
+        }
+
+        #textart-button-from-url {
+            float: right;
+
+            .rtl & {
+                float: left;
+            }
+        }
+
+        #id-textart-menu-direction {
+            .dataview .item {
+                .rtl & {
+                    float: left;
+                }
+            }
+        }
+
+        #textart-foreground-color-btn,
+        #textart-background-color-btn {
+            display: inline-block;
+            float: right;
+
+            .rtl & {
+                float: left;
+            }
+        }
+    }
+
+    &#id-slicer-settings {
+        #slicer-spin-cols {
+            display: inline-block;
+            margin-left: 5px;
+
+            .rtl & {
+                margin-left: 0;
+                margin-right: 5px;
+            }
+        }
+    }
 }
 
 .combo-pattern-item {
@@ -57,12 +365,17 @@
 
     .list-item {
         width: 146px;
-        margin-left:20px;
+        margin-left: 20px;
         display: inline-block;
         white-space: pre;
         overflow: hidden;
         text-overflow: ellipsis;
         vertical-align: middle;
+
+        .rtl & {
+            margin-left: 0;
+            margin-right: 20px;
+        }
     }
 
     .listitem-icon {
@@ -221,26 +534,4 @@
     .dataview > .item:not(:hover):not(.selected) {
         .box-shadow(none);
     }
-}
-
-#id-table-menu-template {
-    .group-description {
-        padding: 3px 0 3px 10px;
-        .font-weight-bold();
-        
-    } 
-
-    .group-items-container {
-        .item {
-            &:hover {
-                .box-shadow(0 0 0 2px @border-preview-hover-ie) !important;
-                .box-shadow(0 0 0 @scaled-two-px-value @border-preview-hover) !important;
-            }
-      
-            &.selected {
-                .box-shadow(0 0 0 2px @border-preview-select-ie) !important;
-                .box-shadow(0 0 0 @scaled-two-px-value @border-preview-select) !important;
-            }
-        }
-    }
 }
\ No newline at end of file
diff --git a/apps/spreadsheeteditor/main/resources/less/spellcheck.less b/apps/spreadsheeteditor/main/resources/less/spellcheck.less
index bacb14b02..11d4f7999 100644
--- a/apps/spreadsheeteditor/main/resources/less/spellcheck.less
+++ b/apps/spreadsheeteditor/main/resources/less/spellcheck.less
@@ -44,6 +44,11 @@
                 margin-top: 5px;
                 margin-bottom: 5px;
                 right: 4px !important;
+
+                .rtl & {
+                    right: unset !important;
+                    left: 4px !important;
+                }
             }
         }
     }
@@ -56,6 +61,15 @@
 
     #spellcheck-next {
         display: inline-block;
+
+        .btn {
+            margin-left: 5px;
+
+            .rtl & {
+                margin-left: 0;
+                margin-right: 5px;
+            }
+        }
     }
 
     #spellcheck-suggestions-list {
@@ -74,6 +88,11 @@
     #spellcheck-ignore {
         margin-left: 9px;
         display: inline-block;
+
+        .rtl & {
+            margin-left: 0;
+            margin-right: 9px;
+        }
     }
 
     #spellcheck-add-to-dictionary {
@@ -91,6 +110,16 @@
     #spellcheck-complete {
         display: flex;
         .font-size-normal();
+
+        .btn-resolve {
+            display: inline-block;
+            margin-right: 10px;
+
+            .rtl & {
+                margin-right: 0;
+                margin-left: 10px;
+            }
+        }
     }
     .btn-resolve
     {
diff --git a/apps/spreadsheeteditor/main/resources/less/statusbar.less b/apps/spreadsheeteditor/main/resources/less/statusbar.less
index 176c46356..5fb1513b6 100644
--- a/apps/spreadsheeteditor/main/resources/less/statusbar.less
+++ b/apps/spreadsheeteditor/main/resources/less/statusbar.less
@@ -7,6 +7,11 @@
         float: left;
         padding: 3px 12px 0 10px;
         height: 25px;
+
+        .rtl & {
+            float: right;
+            padding: 3px 10px 0 12px;
+        }
     }
 
     #status-zoom-box {
@@ -16,12 +21,30 @@
         right: 0;
         height: 25px;
 
+        .rtl & {
+            right: auto;
+            left: 0;
+        }
+
         .separator {
             margin-top: -3px;
         }
 
+        #status-btn-zoomup {
+            margin-right: 40px;
+            .rtl & {
+                margin-right: 0;
+                margin-left: 40px;
+            }
+        }
+
         #status-btn-zoomdown {
             margin-left: 10px;
+
+            .rtl & {
+                margin-left: 0;
+                margin-right: 10px;
+            }
         }
 
         #status-label-zoom {
@@ -39,6 +62,10 @@
         float: right;
         height: 100%;
 
+        .rtl & {
+            float: left;
+        }
+
         #status-users-icon,#status-users-count {
             display: inline-block;
             cursor: pointer;
@@ -67,6 +94,14 @@
             left: auto;
             right: 0;
 
+            .rtl & {
+                padding: 14px 14px 14px 0;
+                margin-right: 0;
+                margin-left: 160px;
+                right: auto;
+                left: 0;
+            }
+
             > label {
                 white-space: normal;
             }
@@ -87,6 +122,11 @@
                         margin-right: 15px;
                         overflow: hidden;
 
+                        .rtl & {
+                            margin-right: 0;
+                            margin-left: 15px;
+                        }
+
                         &.offline, &.viewmode {
                             display: none;
                         }
@@ -109,6 +149,11 @@
                     white-space: nowrap;
                     text-overflow: ellipsis;
                     vertical-align: middle;
+
+                    .rtl & {
+                        padding-left: 0;
+                        padding-right: 16px;
+                    }
                 }
             }
         }
@@ -122,6 +167,10 @@
         border-right: @scaled-one-px-value-ie solid @border-toolbar-ie;
         border-right: @scaled-one-px-value solid @border-toolbar;
         height: 25px;
+
+        .rtl & {
+            float: right;
+        }
     }
 
     #status-math-box,
@@ -136,21 +185,42 @@
             position: relative;
             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;
+            }
         }
     }
 
     #status-filtered-box {
         padding-right: 14px;
+        .rtl & {
+            padding-right: 0;
+            padding-left: 14px;
+        }
         label {
             &:not(:last-child) {
                 padding-right: 10px;
+                .rtl & {
+                    padding-right: 0;
+                    padding-left: 10px;
+                }
             }
         }
     }
@@ -162,6 +232,11 @@
         left: 66px;
         right: 160px;
         //margin-right: 3px;
+
+        .rtl & {
+            left: 160px;
+            right: 66px;
+        }
     }
 
     #status-sheets-bar {
@@ -183,12 +258,21 @@
                 &:first-of-type {
                     span {
                         border-left: none;
+                        .rtl & {
+                            border-left: @scaled-one-px-value-ie solid @border-toolbar-ie;
+                            border-left: @scaled-one-px-value solid @border-toolbar;
+                            border-right: none;
+                        }
                     }
                 }
 
                 &:last-of-type {
                     span {
                         margin-right: 0;
+
+                        .rtl & {
+                            margin-left: 0;
+                        }
                     }
                 }
 
@@ -215,6 +299,11 @@
                     border-top: @scaled-one-px-value-ie solid @border-toolbar-ie;
                     border-top: @scaled-one-px-value solid @border-toolbar;
 
+                    .rtl & {
+                        margin-right: 0;
+                        margin-left: -1px;
+                    }
+
                     &:hover {
                         border-top-color: @border-toolbar-ie;
                         border-top-color: @border-toolbar;
@@ -272,12 +361,25 @@
                         bottom: 0;
                         margin-left: -7px;
                         left: 100%;
+
+                        .rtl & {
+                            border-left: none;
+                            border-right: 7px solid transparent;
+                            margin-left: 0;
+                            margin-right: -7px;
+                            left: auto;
+                            right: 100%;
+                        }
                     }
                 }
 
                 &.icon-visible {
                     > span {
                         padding-left: 25px;
+                        .rtl & {
+                            padding-left: 0;
+                            padding-right: 25px;
+                        }
                         > .toolbar__icon {
                             width: 20px;
                             height: 20px;
@@ -285,6 +387,10 @@
                             top: 0;
                             left: 0;
                             margin: 3px;
+                            .rtl & {
+                                left: auto;
+                                right: 0;
+                            }
                         }
                     }
                 }
@@ -305,6 +411,10 @@
                     &:first-child {
                         > span {
                             padding-left: 8px;
+                            .rtl & {
+                                padding-left: 0;
+                                padding-right: 8px;
+                            }
                         }
                     }
 
@@ -312,6 +422,13 @@
                         border-left: 2px solid @text-normal-ie;
                         border-left: 2px solid @text-normal;
                         padding-left: 9px;
+                        .rtl & {
+                            border-left: none;
+                            padding-left: 0;
+                            border-right: 2px solid @text-normal-ie;
+                            border-right: 2px solid @text-normal;
+                            padding-right: 9px;
+                        }
                     }
                     
                     &.right {
@@ -322,15 +439,33 @@
                             border-right: 2px solid @text-normal;
                             padding-right: 9px;
                             padding-left: 10px;
+                            .rtl & {
+                                border-left: none;
+                                border-right: none;
+                                border-right: @scaled-one-px-value-ie solid @border-toolbar-ie;
+                                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;
+                            }
                         }
                         &.right {
                             > span {
                                 padding-left: 25px;
+                                .rtl & {
+                                    padding-left: 0;
+                                    padding-right: 25px;
+                                }
                             }
                         }
                     }
@@ -340,6 +475,10 @@
                     margin-left: 20px;
                     width: @scaled-one-px-value-ie;
                     width: @scaled-one-px-value;
+                    .rtl & {
+                        margin-left: 0;
+                        margin-right: 20px;
+                    }
                     > span {
                         display: none;
                         padding: 0;
@@ -421,23 +560,43 @@
             min-width: 112px;
             margin-left: -4px;
 
+            .rtl & {
+                margin-left: 0;
+                margin-right: -4px;
+            }
+
             li {
                 text-align: left;
+                .rtl & {
+                    text-align: right;
+                }
                 a {
                     position: relative;
                     padding-left: 26px;
+                    .rtl & {
+                        padding-left: 0;
+                        padding-right: 26px;
+                    }
                     .color {
                         height: 21px;
                         width: 4px;
                         position: absolute;
                         top: 2px;
                         left: 0;
+                        .rtl & {
+                            left: auto;
+                            right: 0;
+                        }
                     }
                 }
                 .hidden-mark {
                     margin-left: 12px;
                     font-style: italic;
                     color: @text-secondary;
+                    .rtl & {
+                        margin-left: 0;
+                        margin-right: 12px;
+                    }
                 }
             }
         }
@@ -452,6 +611,11 @@
             min-width: 80px;
             margin-left: -4px;
 
+            .rtl & {
+                margin-left: 0;
+                margin-right: -4px;
+            }
+
             li {
                 text-align: center;
 
@@ -468,6 +632,9 @@
 
         li {
             text-align: left;
+            .rtl & {
+                text-align: right;
+            }
         }
     }
 
@@ -482,11 +649,22 @@
     .dropdown-menu {
         margin-top: 0;
         margin-left: -7px;
+        .rtl & {
+            margin-left: 0;
+            margin-right: -7px;
+        }
         li {
             > a {
                 padding: 5px 12px 5px 26px;
+                .rtl & {
+                    padding: 5px 26px 5px 12px;
+                }
                 &::before {
                     margin-left: -22px;
+                    .rtl & {
+                        margin-left: 0;
+                        margin-right: -22px;
+                    }
                 }
                 .item-caption {
                     min-width: 98px;
@@ -500,6 +678,11 @@
                     padding-left: 5px;
                     color: silver;
                     cursor: pointer;
+                    .rtl & {
+                        text-align: left;
+                        padding-left: 0;
+                        padding-right: 5px;
+                    }
                 }
             }
         }
@@ -516,8 +699,16 @@
     background-color: @background-toolbar-ie;
     background-color: @background-toolbar;
     z-index: @zindex-modal - 1;
+    .rtl & {
+        left: auto;
+        right: 115px;
+    }
 }
 
 .over-box {
     display: none;
+}
+
+.rtl .nav {
+    padding-right: 0;
 }
\ No newline at end of file
diff --git a/apps/spreadsheeteditor/main/resources/less/toolbar.less b/apps/spreadsheeteditor/main/resources/less/toolbar.less
index 03bef2c55..e4dc4a544 100644
--- a/apps/spreadsheeteditor/main/resources/less/toolbar.less
+++ b/apps/spreadsheeteditor/main/resources/less/toolbar.less
@@ -158,6 +158,47 @@
     }
 }
 
+.custom-scale {
+    padding: 5px 5px 5px 20px;
+    font-weight: normal;
+    line-height: 1.42857143;
+    font-size: 11px;
+    height: 32px;
+    .rtl & {
+        padding: 5px 20px 5px 5px;
+    }
+    .title {
+        padding-top: 3px;
+        padding-right: 5px;
+        .rtl & {
+            padding-right: 0;
+            padding-left: 5px;
+            float: right;
+        }
+    }
+    #custom-scale-up {
+        float:right;
+        .rtl & {
+            float: left;
+        }
+    }
+    #value-custom-scale {
+        float:right;
+        padding: 3px 3px;
+        min-width: 40px;
+        text-align: center;
+        .rtl & {
+            float: left;
+        }
+    }
+    #custom-scale-down {
+        float:right;
+        .rtl & {
+            float: left;
+        }
+    }
+}
+
 #id-toolbar-menu-table-templates {
     .group-description {
         padding: 3px 0 3px 10px;
@@ -197,6 +238,11 @@
     .group-description {
         padding: 3px 0 3px 10px;
         .font-weight-bold();
+
+        .rtl & {
+            padding: 3px 10px 3px 0;
+            text-align: right;
+        }
     } 
     
     .group-items-container {
@@ -219,8 +265,90 @@
         }
     }
 }
+
+#id-toolbar-mnu-item-border-color {
+    > span {
+        background-image: none;
+        width: 12px;
+        height: 12px;
+        margin: 2px 9px 0 -11px;
+        border-style: solid;
+        border-width: 3px;
+        border-color: #000;
+
+        .rtl & {
+            margin: 2px -11px 0 9px;
+        }
+    }
+}
+
+#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;
+        width: 12px;
+        height: 12px;
+        margin: 1px 7px 0 1px;
+        background-color: #000;
+
+        .rtl & {
+            margin: 1px 1px 0 7px;
+        }
+    }
+}
+
+#slot-btn-format {
+    .display-value {
+        position: absolute;
+        left: 0;
+        width: 100px;
+
+        .rtl & {
+            left: auto;
+            right: 0;
+        }
+    }
+
+    .example-val {
+        display: inline-block;
+        width: 100%;
+        max-width: 300px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        text-align: right;
+        vertical-align: bottom;
+        padding-left: 100px;
+        color: silver;
+        white-space: nowrap;
+
+        .rtl & {
+            text-align: left;
+            padding-left: 0;
+            padding-right: 100px;
+        }
+    }
+}
+
 #id-toolbar-btn-cstyle {
     .style  {
         background-color: @canvas-content-background;
     }
-}
\ No newline at end of file
+}
+
+#id-toolbar-menu-insart {
+    margin-left: 5px;
+    .rtl & {
+        margin-left: 0;
+        margin-right: 5px;
+    }
+}