diff --git a/client/css/misc/layout-manager-rows.css b/client/css/misc/layout-manager-rows.css
index c5e4729635..aa47585dcf 100644
--- a/client/css/misc/layout-manager-rows.css
+++ b/client/css/misc/layout-manager-rows.css
@@ -37,7 +37,7 @@
 }
 
 #layout ul > li .width {
-    font-size: small;
+    font-size: var(--font-size-small);
 }
 
 #layout ul.disabled > li .width {
diff --git a/client/modules/crm/css/vis.css b/client/modules/crm/css/vis.css
index f698cbeb23..09518a9859 100644
--- a/client/modules/crm/css/vis.css
+++ b/client/modules/crm/css/vis.css
@@ -24,12 +24,12 @@ div.vis-configuration {
     position:relative;
     display:block;
     float:left;
-    font-size:12px;
+    font-size: var(--font-size-small);
 }
 
 div.vis-configuration-wrapper {
     display:block;
-    width:700px;
+    width: 700px;
 }
 
 div.vis-configuration-wrapper::after {
@@ -40,13 +40,13 @@ div.vis-configuration-wrapper::after {
 
 div.vis-configuration.vis-config-option-container{
     display:block;
-    width:495px;
+    width: 495px;
     background-color: #ffffff;
-    border:2px solid #f7f8fa;
-    border-radius:4px;
-    margin-top:20px;
-    left:10px;
-    padding-left:5px;
+    border: 2px solid #f7f8fa;
+    border-radius: 4px;
+    margin-top: 20px;
+    left: 10px;
+    padding-left: 5px;
 }
 
 div.vis-configuration.vis-config-button{
@@ -96,12 +96,12 @@ div.vis-configuration.vis-config-item.vis-config-s3{
 div.vis-configuration.vis-config-item.vis-config-s4{
     left:30px;
     background-color: #cfd8e6;
-    padding-left:5px;
-    border-radius:3px;
+    padding-left: 5px;
+    border-radius: 3px;
 }
 
 div.vis-configuration.vis-config-header{
-    font-size:18px;
+    font-size: var(--18px);
     font-weight: bold;
 }
 
@@ -119,13 +119,12 @@ div.vis-configuration.vis-config-label.vis-config-s4{
 }
 
 div.vis-configuration.vis-config-colorBlock{
-    top:1px;
-    width:30px;
-    height:19px;
-    border:1px solid #444444;
-    border-radius:2px;
-    padding:0px;
-    margin:0px;
+    top: 1px;
+    width: 30px;
+    height: 19px;
+    border: 1px solid #444444;
+    padding: 0;
+    margin: 0;
     cursor:pointer;
 }
 
@@ -279,10 +278,7 @@ input.vis-configuration.vis-config-range:focus::-ms-fill-upper {
     width:150px;
     text-align:center;
     color: #ffffff;
-    font-size:14px;
-    border-radius:4px;
-    -webkit-transition: opacity 0.3s ease-in-out;
-    -moz-transition: opacity 0.3s ease-in-out;
+    font-size: var(--14px);
     transition: opacity 0.3s ease-in-out;
 }
 .vis-configuration-popup:after, .vis-configuration-popup:before {
@@ -784,7 +780,6 @@ input.vis-configuration.vis-config-range:focus::-ms-fill-upper {
 }
 
 .vis-legend-text {
-  /*font-size: 10px;*/
   white-space: nowrap;
   display: inline-block
 }
@@ -953,7 +948,7 @@ div.vis-network div.vis-manipulation div.vis-button,
 div.vis-network div.vis-edit-mode div.vis-button {
   float:left;
   font-family: verdana;
-  font-size: 12px;
+  font-size: var(--font-size-small);
   -moz-border-radius: 15px;
   border-radius: 15px;
   display:inline-block;
@@ -1051,7 +1046,7 @@ div.vis-network-tooltip {
   white-space: nowrap;
 
   font-family: verdana;
-  font-size:14px;
+  font-size: var(--14px);
   color:#000000;
   background-color: #f5f4ed;
 
@@ -1215,7 +1210,7 @@ div.vis-color-picker div.vis-new-color {
   left:159px;
   text-align:right;
   padding-right:2px;
-  font-size:10px;
+  font-size: var(--10px);
   color:rgba(0,0,0,0.4);
   vertical-align:middle;
   line-height:20px;
@@ -1232,7 +1227,7 @@ div.vis-color-picker div.vis-initial-color {
   left:10px;
   text-align:left;
   padding-left:2px;
-  font-size:10px;
+  font-size: var(--10px);
   color:rgba(0,0,0,0.4);
   vertical-align:middle;
   line-height:20px;
@@ -1301,4 +1296,4 @@ div.vis-color-picker input.vis-range-brightness {
 
 div.vis-color-picker input.vis-saturation-range {
   width: 289px !important;
-}*/
\ No newline at end of file
+}*/
diff --git a/client/modules/crm/src/views/dashlets/abstract/chart.js b/client/modules/crm/src/views/dashlets/abstract/chart.js
index f75d116c96..be6dfaebb5 100644
--- a/client/modules/crm/src/views/dashlets/abstract/chart.js
+++ b/client/modules/crm/src/views/dashlets/abstract/chart.js
@@ -51,6 +51,8 @@ define('crm:views/dashlets/abstract/chart', ['views/dashlets/abstract/base','lib
         init: function () {
             Dep.prototype.init.call(this);
 
+            this.fontSizeFactor = this.getThemeManager().getFontSizeFactor();
+
             this.flotr = Flotr;
 
             this.successColor = this.getThemeManager().getParam('chartSuccessColor') || this.successColor;
@@ -181,18 +183,22 @@ define('crm:views/dashlets/abstract/chart', ['views/dashlets/abstract/base','lib
         },
 
         getLegendColumnNumber: function () {
-            var width = this.$el.closest('.panel-body').width();
-            var legendColumnNumber = Math.floor(width / this.legendColumnWidth);
+            const width = this.$el.closest('.panel-body').width();
+
+            const legendColumnNumber = Math.floor(width / (this.legendColumnWidth * this.fontSizeFactor));
 
             return legendColumnNumber || this.legendColumnNumber;
         },
 
         getLegendHeight: function () {
-            var lineNumber = Math.ceil(this.chartData.length / this.getLegendColumnNumber());
-            var legendHeight = 0;
+            const lineNumber = Math.ceil(this.chartData.length / this.getLegendColumnNumber());
+            let legendHeight = 0;
 
-            var lineHeight = this.getThemeManager().getParam('dashletChartLegendRowHeight') || 19;
-            var paddingTopHeight = this.getThemeManager().getParam('dashletChartLegendPaddingTopHeight') || 7;
+            const lineHeight = (this.getThemeManager().getParam('dashletChartLegendRowHeight') || 19) *
+                this.fontSizeFactor;
+
+            const paddingTopHeight = (this.getThemeManager().getParam('dashletChartLegendPaddingTopHeight') || 7) *
+                this.fontSizeFactor;
 
             if (lineNumber > 0) {
                 legendHeight = lineHeight * lineNumber + paddingTopHeight;
@@ -202,26 +208,27 @@ define('crm:views/dashlets/abstract/chart', ['views/dashlets/abstract/base','lib
         },
 
         adjustContainer: function () {
-            var legendHeight = this.getLegendHeight();
-            var heightCss = 'calc(100% - ' + legendHeight.toString() + 'px)';
+            const legendHeight = this.getLegendHeight();
+            const heightCss = `calc(100% - ${legendHeight.toString()}px)`;
 
             this.$container.css('height', heightCss);
         },
 
         adjustLegend: function () {
-            var number = this.getLegendColumnNumber();
+            const number = this.getLegendColumnNumber();
 
             if (!number) {
                 return;
             }
 
-            var dashletChartLegendBoxWidth = this.getThemeManager().getParam('dashletChartLegendBoxWidth') || 21;
+            const dashletChartLegendBoxWidth = (this.getThemeManager().getParam('dashletChartLegendBoxWidth') || 21) *
+                this.fontSizeFactor;
 
-            var containerWidth = this.$legendContainer.width();
-            var width = Math.floor((containerWidth - dashletChartLegendBoxWidth * number) / number);
-            var columnNumber = this.$legendContainer.find('> table tr:first-child > td').length / 2;
+            const containerWidth = this.$legendContainer.width();
+            const width = Math.floor((containerWidth - dashletChartLegendBoxWidth * number) / number);
+            const columnNumber = this.$legendContainer.find('> table tr:first-child > td').length / 2;
 
-            var tableWidth = (width + dashletChartLegendBoxWidth) * columnNumber;
+            const tableWidth = (width + dashletChartLegendBoxWidth) * columnNumber;
 
             this.$legendContainer.find('> table')
                 .css('table-layout', 'fixed')
@@ -287,23 +294,21 @@ define('crm:views/dashlets/abstract/chart', ['views/dashlets/abstract/base','lib
         },
 
         showNoData: function () {
-            var fontSize = this.getThemeManager().getParam('fontSize') || 14;
             this.$container.empty();
-            var textFontSize = fontSize * 1.2;
 
             var $text = $('<span>').html(this.translate('No Data')).addClass('text-muted');
 
-            var $div = $('<div>')
+            const $div = $('<div>')
                 .css('text-align', 'center')
-                 .css('font-size', textFontSize + 'px')
-                 .css('display', 'table')
-                 .css('width', '100%')
-                 .css('height', '100%');
+                .css('font-size', 'calc(var(--font-size-base) * 1.2)')
+                .css('display', 'table')
+                .css('width', '100%')
+                .css('height', '100%');
 
             $text
                 .css('display', 'table-cell')
                 .css('vertical-align', 'middle')
-                .css('padding-bottom', fontSize * 1.5 + 'px');
+                .css('padding-bottom', 'calc(var(--font-size-base) * 1.5)');
 
 
             $div.append($text);
diff --git a/client/modules/crm/src/views/dashlets/opportunities-by-lead-source.js b/client/modules/crm/src/views/dashlets/opportunities-by-lead-source.js
index 293e3dbcec..82a1a8cd5d 100644
--- a/client/modules/crm/src/views/dashlets/opportunities-by-lead-source.js
+++ b/client/modules/crm/src/views/dashlets/opportunities-by-lead-source.js
@@ -78,7 +78,7 @@ define('crm:views/dashlets/opportunities-by-lead-source', ['crm:views/dashlets/a
                 pie: {
                     show: true,
                     explode: 0,
-                    lineWidth: 1,
+                    lineWidth: 1 * this.fontSizeFactor,
                     fillOpacity: 1,
                     sizeRatio: 0.8,
                     labelFormatter: (total, value) => {
diff --git a/client/modules/crm/src/views/dashlets/opportunities-by-stage.js b/client/modules/crm/src/views/dashlets/opportunities-by-stage.js
index fda7e01ed1..5fa642f39f 100644
--- a/client/modules/crm/src/views/dashlets/opportunities-by-stage.js
+++ b/client/modules/crm/src/views/dashlets/opportunities-by-stage.js
@@ -118,7 +118,7 @@ define('crm:views/dashlets/opportunities-by-stage', ['crm:views/dashlets/abstrac
                     show: true,
                     horizontal: true,
                     shadowSize: 0,
-                    lineWidth: 1,
+                    lineWidth: 1 * this.fontSizeFactor,
                     fillOpacity: 1,
                     barWidth: 0.5,
                 },
diff --git a/client/modules/crm/src/views/dashlets/sales-by-month.js b/client/modules/crm/src/views/dashlets/sales-by-month.js
index a5514d8c97..6b6c4797c2 100644
--- a/client/modules/crm/src/views/dashlets/sales-by-month.js
+++ b/client/modules/crm/src/views/dashlets/sales-by-month.js
@@ -110,7 +110,7 @@ define('crm:views/dashlets/sales-by-month', ['crm:views/dashlets/abstract/chart'
         getTickNumber: function () {
             var containerWidth = this.$container.width();
 
-            return Math.floor(containerWidth / this.columnWidth);
+            return Math.floor(containerWidth / this.columnWidth * this.fontSizeFactor);
         },
 
         draw: function () {
@@ -122,7 +122,7 @@ define('crm:views/dashlets/sales-by-month', ['crm:views/dashlets/abstract/chart'
                     show: true,
                     horizontal: false,
                     shadowSize: 0,
-                    lineWidth: 1,
+                    lineWidth: 1 * this.fontSizeFactor,
                     fillOpacity: 1,
                     barWidth: 0.5,
                 },
diff --git a/client/modules/crm/src/views/dashlets/sales-pipeline.js b/client/modules/crm/src/views/dashlets/sales-pipeline.js
index d6e38ffa25..64edaea246 100644
--- a/client/modules/crm/src/views/dashlets/sales-pipeline.js
+++ b/client/modules/crm/src/views/dashlets/sales-pipeline.js
@@ -152,9 +152,9 @@ function (Dep) {
 
                 let stageTranslated = this.getHelper().escapeString(item.stageTranslated);
 
-                let box = '<div style="border:1px solid transparent;padding:1px">'+
-                    '<div style="width:13px;height:9px;border:1px solid ' + item.color + '">'+
-                    '<div style="width:14px;height:10px;background-color:' + item.color + ';"></div></div></div>';
+                let box = '<div style="border: var(--1px) solid transparent; padding: var(--1px)">'+
+                    '<div style="width: var(--13px); height: var(--9px); border: var(--1px) solid ' + item.color + '">'+
+                    '<div style="width: var(--14px); height: var(--10px); background-color:' + item.color + ';"></div></div></div>';
 
                 html += '<td class="flotr-legend-color-box">' + box + '</td>';
 
diff --git a/client/src/helpers/list/misc/sticky-bar.js b/client/src/helpers/list/misc/sticky-bar.js
index 03cbb05082..147082b671 100644
--- a/client/src/helpers/list/misc/sticky-bar.js
+++ b/client/src/helpers/list/misc/sticky-bar.js
@@ -55,7 +55,14 @@ class StickyBarHelper {
      */
     constructor(view, options = {}) {
         this.view = view;
+
+        /**
+         * @private
+         * @type {import('theme-manager').default}
+         */
+
         this.themeManager = this.view.getThemeManager();
+
         this.$el = view.$el;
 
         /** @private */
@@ -170,7 +177,7 @@ class StickyBarHelper {
      * @param {HTMLElement} element
      */
     _getOffsetTop(element) {
-        const navbarHeight = this.themeManager.getParam('navbarHeight');
+        const navbarHeight = this.themeManager.getParam('navbarHeight') * this.themeManager.getFontSizeFactor();
         const withHeader = !this.isSmallWindow && !this.isModal;
 
         let offsetTop = 0;
diff --git a/client/src/helpers/record/list/column-resize.js b/client/src/helpers/record/list/column-resize.js
index 2a29b25d13..95b3abf1cb 100644
--- a/client/src/helpers/record/list/column-resize.js
+++ b/client/src/helpers/record/list/column-resize.js
@@ -66,6 +66,12 @@ export default class ListColumnResizeHelper {
         /** @private */
         this.helper = helper;
 
+        /**
+         * @private
+         * @type {number}
+         */
+        this.fontSizeFactor = view.getThemeManager().getFontSizeFactor();
+
         this.onMouseUpBind = this.onMouseUp.bind(this);
         this.onMouseMoveBind = this.onMouseMove.bind(this);
 
@@ -112,7 +118,7 @@ export default class ListColumnResizeHelper {
      * @param {number} width
      */
     isWidthOk(width) {
-        if (width < this.minWidth) {
+        if (width < this.minWidth * this.fontSizeFactor) {
             return false;
         }
 
@@ -121,7 +127,7 @@ export default class ListColumnResizeHelper {
                 continue;
             }
 
-            if (th.clientWidth < this.minWidth) {
+            if (th.clientWidth < this.minWidth * this.fontSizeFactor) {
                 return false;
             }
         }
@@ -195,6 +201,10 @@ export default class ListColumnResizeHelper {
             value = widthPercentsRounded;
         }
 
+        if (this.item.inPx) {
+            value = value / this.fontSizeFactor;
+        }
+
         this.helper.storeColumnWidth(this.item.name, {value: value, unit: unit});
 
         this.disableResizingState();
diff --git a/client/src/helpers/record/misc/sticky-bar.js b/client/src/helpers/record/misc/sticky-bar.js
index fab6320b1e..4404ad1bcf 100644
--- a/client/src/helpers/record/misc/sticky-bar.js
+++ b/client/src/helpers/record/misc/sticky-bar.js
@@ -58,7 +58,7 @@ class StickyBarHelper {
             return;
         }
 
-        const navbarHeight = this.themeManager.getParam('navbarHeight');
+        const navbarHeight = this.themeManager.getParam('navbarHeight') * this.themeManager.getFontSizeFactor();
         const screenWidthXs = this.themeManager.getParam('screenWidthXs');
 
         const isSmallScreen = $(window.document).width() < screenWidthXs;
diff --git a/client/src/theme-manager.js b/client/src/theme-manager.js
index fdcbc30ded..6ee2352800 100644
--- a/client/src/theme-manager.js
+++ b/client/src/theme-manager.js
@@ -289,6 +289,20 @@ class ThemeManager {
 
         return name !== this.config.get('theme');
     }
+
+    /**
+     * Get a font-size factor. To adjust px sizes based on font-size.
+     *
+     * @return {number}
+     * @since 9.0.0
+     * @internal Experimental.
+     */
+    getFontSizeFactor() {
+        const paramFontSize = this.getParam('fontSize') || 14;
+        const fontSize = parseInt(getComputedStyle(document.body).fontSize);
+
+        return Math.round(fontSize / paramFontSize * 10000) / 10000;
+    }
 }
 
 export default ThemeManager;
diff --git a/client/src/view-helper.js b/client/src/view-helper.js
index 14c7d0f934..49311f77b2 100644
--- a/client/src/view-helper.js
+++ b/client/src/view-helper.js
@@ -682,7 +682,8 @@ class ViewHelper {
             .attr('src', `${basePath}?entryPoint=avatar&size=${size}&id=${id}&t=${t}`)
             .attr('alt', 'avatar')
             .addClass(className)
-            .attr('width', width.toString())
+            .attr('data-width', width.toString())
+            .css('width', `var(--${width.toString()}px)`)
             .attr('draggable', 'false')
             .get(0).outerHTML;
     }
diff --git a/client/src/views/dashboard.js b/client/src/views/dashboard.js
index 5ab20ccef5..9118226f13 100644
--- a/client/src/views/dashboard.js
+++ b/client/src/views/dashboard.js
@@ -343,10 +343,18 @@ class DashboardView extends View {
             disableResize = true;
         }
 
+        const paramCellHeight = this.getThemeManager().getParam('dashboardCellHeight');
+        const paramCellMargin = this.getThemeManager().getParam('dashboardCellMargin');
+
+        const factor = this.getThemeManager().getFontSizeFactor();
+
+        const cellHeight = Math.ceil(factor * paramCellHeight * 1.14);
+        const margin = Math.round(factor * paramCellMargin / 2);
+
         const grid = this.grid = GridStack.init(
             {
-                cellHeight: this.getThemeManager().getParam('dashboardCellHeight') * 1.14,
-                margin: this.getThemeManager().getParam('dashboardCellMargin') / 2,
+                cellHeight: cellHeight,
+                margin: margin,
                 column: 12,
                 handle: '.panel-heading',
                 disableDrag: disableDrag,
diff --git a/client/src/views/email/list.js b/client/src/views/email/list.js
index 9fe166f9e5..56ffeda38e 100644
--- a/client/src/views/email/list.js
+++ b/client/src/views/email/list.js
@@ -670,8 +670,10 @@ class EmailListView extends ListView {
         const screenWidthXs = this.getThemeManager().getParam('screenWidthXs');
         const isSmallScreen = $(window.document).width() < screenWidthXs;
 
-        const offset = this.getThemeManager().getParam('navbarHeight') +
-            (this.getThemeManager().getParam('buttonsContainerHeight') || 47);
+        const factor = this.getThemeManager().getFontSizeFactor();
+
+        const offset = this.getThemeManager().getParam('navbarHeight') * factor +
+            (this.getThemeManager().getParam('buttonsContainerHeight') || 47) * factor;
 
         const bottomSpaceHeight = parseInt(window.getComputedStyle($('#content').get(0)).paddingBottom, 10);
 
diff --git a/client/src/views/fields/barcode.js b/client/src/views/fields/barcode.js
index c4ba11aff0..a8e9db6678 100644
--- a/client/src/views/fields/barcode.js
+++ b/client/src/views/fields/barcode.js
@@ -188,11 +188,13 @@ class BarcodeFieldView extends VarcharFieldView {
     }
 
     initBarcode(value) {
+        const factor = this.getThemeManager().getFontSizeFactor();
+
         try {
             JsBarcode(this.getSelector() + ' .barcode', value, {
                 format: this.params.codeType,
-                height: 50,
-                fontSize: 14,
+                height: 50 * factor,
+                fontSize: 14 * factor,
                 margin: 0,
                 lastChar: this.params.lastChar,
             });
diff --git a/client/src/views/fields/complex-expression.js b/client/src/views/fields/complex-expression.js
index 70357647ba..1ecdf511ab 100644
--- a/client/src/views/fields/complex-expression.js
+++ b/client/src/views/fields/complex-expression.js
@@ -133,7 +133,7 @@ class ComplexExpressionFieldView extends TextFieldView {
                 this.mode === this.MODE_LIST
             )
         ) {
-            this.$editor.css('fontSize', '14px');
+            this.$editor.css('fontSize', 'var(--font-size-base)');
 
             if (this.mode === this.MODE_EDIT) {
                 this.$editor.css('minHeight', this.height + 'px');
diff --git a/client/src/views/fields/formula.js b/client/src/views/fields/formula.js
index c1777ee5de..71fbd67da6 100644
--- a/client/src/views/fields/formula.js
+++ b/client/src/views/fields/formula.js
@@ -145,7 +145,7 @@ class FormulaFieldView extends TextFieldView {
                 this.mode === this.MODE_LIST
             )
         ) {
-            this.$editor.css('fontSize', '14px');
+            this.$editor.css('fontSize', 'var(--font-size-base)');
 
             if (this.mode === this.MODE_EDIT) {
                 this.$editor.css('minHeight', this.height + 'px');
diff --git a/client/src/views/record/kanban.js b/client/src/views/record/kanban.js
index 49123ad8b0..99713c1e59 100644
--- a/client/src/views/record/kanban.js
+++ b/client/src/views/record/kanban.js
@@ -477,7 +477,8 @@ class KanbanRecordView extends ListRecordView {
      */
     initStickableHeader() {
         const $container = this.$headContainer = this.$el.find('.kanban-head-container');
-        const topBarHeight = this.getThemeManager().getParam('navbarHeight') || 30;
+        const topBarHeight = (this.getThemeManager().getParam('navbarHeight') || 30) *
+            this.getThemeManager().getFontSizeFactor();
 
         const screenWidthXs = this.getThemeManager().getParam('screenWidthXs');
 
diff --git a/client/src/views/record/list.js b/client/src/views/record/list.js
index 2ba6309383..8570d8d0fd 100644
--- a/client/src/views/record/list.js
+++ b/client/src/views/record/list.js
@@ -1005,6 +1005,8 @@ class ListRecordView extends View {
                 };
             }) : [];
 
+        const checkboxColumnWidth = (this.checkboxColumnWidth * this._fontSizeFactor).toString() + 'px';
+
         return {
             scope: this.scope,
             collectionLength: this.collection.models.length,
@@ -1029,7 +1031,7 @@ class ListRecordView extends View {
             displayActionsButtonGroup: displayActionsButtonGroup,
             totalCountFormatted: this.getNumberUtil().formatInt(this.collection.total),
             moreCountFormatted: this.getNumberUtil().formatInt(moreCount),
-            checkboxColumnWidth: this.checkboxColumnWidth + 'px',
+            checkboxColumnWidth: checkboxColumnWidth,
             noDataDisabled: noDataDisabled,
             hasStickyBar: hasStickyBar,
         };
@@ -1095,6 +1097,8 @@ class ListRecordView extends View {
         }
 
         this.rootData = this.options.rootData || {};
+
+        this._fontSizeFactor = this.getThemeManager().getFontSizeFactor();
     }
 
     /**
@@ -2615,7 +2619,7 @@ class ListRecordView extends View {
             } else if ('width' in col && col.width !== null) {
                 width = col.width + '%';
             } else if ('widthPx' in col) {
-                width = col.widthPx + 'px';
+                width = (col.widthPx * this._fontSizeFactor).toString() + 'px';
             } else {
                 emptyWidthMet = true;
             }
@@ -2675,8 +2679,10 @@ class ListRecordView extends View {
                         .get(0).outerHTML
             }
 
+            const width = (this._fontSizeFactor * this.rowActionsColumnWidth).toString() + 'px';
+
             defs.push({
-                width: this.rowActionsColumnWidth + 'px',
+                width: width,
                 html: html,
                 className: 'action-cell',
             });
@@ -3485,6 +3491,8 @@ class ListRecordView extends View {
             return;
         }
 
+        const factor = this._fontSizeFactor;
+
         let totalWidth = 0;
         let totalWidthPx = 0;
         let emptyCount = 0;
@@ -3518,11 +3526,11 @@ class ListRecordView extends View {
 
         let minWidth;
 
-        if (totalWidth >= 100) {
-            minWidth = columnCount * this.minColumnWidth;
+        if (totalWidth >= 100 * factor) {
+            minWidth = columnCount * this.minColumnWidth * factor;
         }
         else {
-            minWidth = (totalWidthPx + this.minColumnWidth * emptyCount) / (1 - totalWidth / 100);
+            minWidth = (totalWidthPx + this.minColumnWidth * emptyCount * factor) / (1 - totalWidth / 100);
             minWidth = Math.round(minWidth);
         }
 
diff --git a/client/src/views/role/record/table.js b/client/src/views/role/record/table.js
index 43a4cd3b3c..bca2759334 100644
--- a/client/src/views/role/record/table.js
+++ b/client/src/views/role/record/table.js
@@ -788,6 +788,9 @@ class RoleRecordTableView extends View {
             return;
         }
 
+        const navbarHeight = this.getThemeManager().getParam('navbarHeight') *
+            this.getThemeManager().getFontSizeFactor();
+
         const handle = () => {
             if ($(window.document).width() < screenWidthXs) {
                 $sticky.addClass('hidden');
@@ -802,7 +805,7 @@ class RoleRecordTableView extends View {
 
             topEdge -= $buttonContainer.height();
             topEdge += $table.find('tr > th').height();
-            topEdge -= this.getThemeManager().getParam('navbarHeight');
+            topEdge -= navbarHeight;
 
             const bottomEdge = topEdge + $table.outerHeight(true) - $buttonContainer.height();
             const scrollTop = $window.scrollTop();
diff --git a/client/src/views/site/navbar.js b/client/src/views/site/navbar.js
index f02b748320..880bcaacd0 100644
--- a/client/src/views/site/navbar.js
+++ b/client/src/views/site/navbar.js
@@ -586,7 +586,7 @@ class NavbarSiteView extends View {
             $navbar.css('overflow', 'visible');
         }
 
-        const navbarBaseWidth = this.getThemeManager().getParam('navbarBaseWidth') || 555;
+        const navbarBaseWidth = this.getFontSizeFactor() * (this.getThemeManager().getParam('navbarBaseWidth') || 550);
 
         const tabCount = this.tabList.length;
 
@@ -732,7 +732,7 @@ class NavbarSiteView extends View {
     }
 
     getNavbarHeight() {
-        return this.getThemeManager().getParam('navbarHeight') || 43;
+        return this.getFontSizeFactor() * (this.getThemeManager().getParam('navbarHeight') || 43);
     }
 
     isSide() {
@@ -740,7 +740,14 @@ class NavbarSiteView extends View {
     }
 
     getStaticItemsHeight() {
-        return this.getThemeManager().getParam('navbarStaticItemsHeight') || 97;
+        return this.getFontSizeFactor() * (this.getThemeManager().getParam('navbarStaticItemsHeight') || 97);
+    }
+
+    /**
+     * @private
+     */
+    getFontSizeFactor() {
+        return this.getThemeManager().getFontSizeFactor();
     }
 
     adjustBodyMinHeight() {
diff --git a/client/src/views/template/fields/style.js b/client/src/views/template/fields/style.js
index c72e93d117..909a923b51 100644
--- a/client/src/views/template/fields/style.js
+++ b/client/src/views/template/fields/style.js
@@ -127,7 +127,7 @@ class TemplateStyleFieldView extends TextFieldView {
                 this.mode === this.MODE_LIST
             )
         ) {
-            this.$editor.css('fontSize', '14px');
+            this.$editor.css('fontSize', 'var(--font-size-base)');
 
             if (this.mode === this.MODE_EDIT) {
                 this.$editor.css('minHeight', this.height + 'px');
diff --git a/frontend/less/espo-rtl/bootstrap-rtl/bootstrap-flipped.less b/frontend/less/espo-rtl/bootstrap-rtl/bootstrap-flipped.less
index b07d9d1982..d4bb593213 100644
--- a/frontend/less/espo-rtl/bootstrap-rtl/bootstrap-flipped.less
+++ b/frontend/less/espo-rtl/bootstrap-rtl/bootstrap-flipped.less
@@ -47,8 +47,6 @@
 @import "pager-rtl.less";
 //@import "labels.less";
 @import "badges-rtl.less";
-//@import "jumbotron.less";
-//@import "thumbnails.less";
 @import "alerts-rtl.less";
 @import "progress-bars-rtl.less";
 @import "media-rtl.less";
diff --git a/frontend/less/espo-rtl/bootstrap-rtl/bootstrap-rtl.less b/frontend/less/espo-rtl/bootstrap-rtl/bootstrap-rtl.less
index 7d0219903d..1751567789 100644
--- a/frontend/less/espo-rtl/bootstrap-rtl/bootstrap-rtl.less
+++ b/frontend/less/espo-rtl/bootstrap-rtl/bootstrap-rtl.less
@@ -35,8 +35,6 @@
 @import "pager-rtl.less";
 //@import "labels.less";
 @import "badges-rtl.less";
-//@import "jumbotron.less";
-//@import "thumbnails.less";
 @import "alerts-rtl.less";
 @import "progress-bars-rtl.less";
 @import "media-rtl.less";
diff --git a/frontend/less/espo-rtl/bootstrap-rtl/button-groups-rtl.less b/frontend/less/espo-rtl/bootstrap-rtl/button-groups-rtl.less
index c4e2fa1af2..f7064008ca 100644
--- a/frontend/less/espo-rtl/bootstrap-rtl/button-groups-rtl.less
+++ b/frontend/less/espo-rtl/bootstrap-rtl/button-groups-rtl.less
@@ -42,16 +42,12 @@
 .btn-group > .btn:first-child {
   margin-right: 0;
   &:not(:last-child):not(.dropdown-toggle) {
-    border-top-right-radius: @border-radius-base;
-    border-bottom-right-radius: @border-radius-base;
     .border-left-radius(0);
   }
 }
 // Need .dropdown-toggle since :last-child doesn't apply given a .dropdown-menu immediately after it
 .btn-group > .btn:last-child:not(:first-child),
 .btn-group > .dropdown-toggle:not(:first-child) {
-    border-top-left-radius: @border-radius-base;
-    border-bottom-left-radius: @border-radius-base;
   .border-right-radius(0);
 }
 
@@ -71,14 +67,10 @@
 .btn-group > .btn-group:first-child {
   > .btn:last-child,
   > .dropdown-toggle {
-    border-top-right-radius: @border-radius-base;
-    border-bottom-right-radius: @border-radius-base;
     .border-left-radius(0);
   }
 }
 .btn-group > .btn-group:last-child > .btn:first-child {
-    border-top-left-radius: @border-radius-base;
-    border-bottom-left-radius: @border-radius-base;
   .border-right-radius(0);
 }
 
diff --git a/frontend/less/espo-rtl/bootstrap-rtl/flipped.less b/frontend/less/espo-rtl/bootstrap-rtl/flipped.less
index fb5d26f228..4d5a57a6d6 100644
--- a/frontend/less/espo-rtl/bootstrap-rtl/flipped.less
+++ b/frontend/less/espo-rtl/bootstrap-rtl/flipped.less
@@ -37,8 +37,6 @@
   .navbar-left  { .pull-left(); }
   .navbar-right {
     .pull-right();
-    margin-left: -@navbar-padding-horizontal;
-    margin-right: initial;
 
     ~ .navbar-right {
       margin-left: 0;
diff --git a/frontend/less/espo-rtl/bootstrap-rtl/forms-rtl.less b/frontend/less/espo-rtl/bootstrap-rtl/forms-rtl.less
index 3a91b9cfe2..dce7fbad07 100644
--- a/frontend/less/espo-rtl/bootstrap-rtl/forms-rtl.less
+++ b/frontend/less/espo-rtl/bootstrap-rtl/forms-rtl.less
@@ -35,7 +35,7 @@
 
   // Ensure icons don't overlap text
   .form-control {
-    padding-left: (@input-height-base * 1.25);
+    padding-left: calc(var(--input-height-base) * 1.25);
     padding-right: 12px;
   }
 }
@@ -96,7 +96,7 @@
   // Reposition the icon because it's now within a grid column and columns have
   // `position: relative;` on them. Also accounts for the grid gutter padding.
   .has-feedback .form-control-feedback {
-    left: (@grid-gutter-width / 2);
+    left: var(--grid-gutter-width-half);
     right: auto;
   }
 }
diff --git a/frontend/less/espo-rtl/bootstrap-rtl/input-groups-rtl.less b/frontend/less/espo-rtl/bootstrap-rtl/input-groups-rtl.less
index f8a828a52a..f04c21d2bf 100644
--- a/frontend/less/espo-rtl/bootstrap-rtl/input-groups-rtl.less
+++ b/frontend/less/espo-rtl/bootstrap-rtl/input-groups-rtl.less
@@ -36,7 +36,6 @@
 .input-group-btn:last-child > .dropdown-toggle,
 .input-group-btn:first-child > .btn:not(:first-child),
 .input-group-btn:first-child > .btn-group:not(:first-child) > .btn {
-  .border-left-radius(@border-radius-base);
   .border-right-radius(0);
 }
 .input-group-addon:last-child {
diff --git a/frontend/less/espo-rtl/bootstrap-rtl/mixins-flipped.less b/frontend/less/espo-rtl/bootstrap-rtl/mixins-flipped.less
index 8c5d1e715f..816d2c7435 100644
--- a/frontend/less/espo-rtl/bootstrap-rtl/mixins-flipped.less
+++ b/frontend/less/espo-rtl/bootstrap-rtl/mixins-flipped.less
@@ -34,6 +34,5 @@
 // Layout
 @import "../bootstrap/less/mixins/clearfix.less";
 @import "../bootstrap/less/mixins/center-block.less";
-@import "../bootstrap/less/mixins/nav-vertical-align.less";
 @import "mixins/grid-framework-rtl.less"; // RTL
 @import "mixins/grid-rtl.less"; // RTL
diff --git a/frontend/less/espo-rtl/bootstrap-rtl/mixins-rtl.less b/frontend/less/espo-rtl/bootstrap-rtl/mixins-rtl.less
index e8c121ba2d..09034f656f 100644
--- a/frontend/less/espo-rtl/bootstrap-rtl/mixins-rtl.less
+++ b/frontend/less/espo-rtl/bootstrap-rtl/mixins-rtl.less
@@ -34,6 +34,5 @@
 // Layout
 @import "../../espo/bootstrap/mixins/clearfix.less";
 @import "../../espo/bootstrap/mixins/center-block.less";
-@import "../../espo/bootstrap/mixins/nav-vertical-align.less";
 @import "mixins/grid-framework-rtl.less"; // RTL
 @import "mixins/grid-rtl.less"; // RTL
diff --git a/frontend/less/espo-rtl/bootstrap-rtl/mixins/grid-framework-rtl.less b/frontend/less/espo-rtl/bootstrap-rtl/mixins/grid-framework-rtl.less
index fd736be24c..3d36c62a2d 100644
--- a/frontend/less/espo-rtl/bootstrap-rtl/mixins/grid-framework-rtl.less
+++ b/frontend/less/espo-rtl/bootstrap-rtl/mixins/grid-framework-rtl.less
@@ -19,8 +19,8 @@
       // Prevent columns from collapsing when empty
       min-height: 1px;
       // Inner gutter via padding
-      padding-left:  (@grid-gutter-width / 2);
-      padding-right: (@grid-gutter-width / 2);
+      padding-left: var(--grid-gutter-width-half);
+      padding-right: var(--grid-gutter-width-half);
     }
   }
   .col(1); // kickstart it
diff --git a/frontend/less/espo-rtl/bootstrap-rtl/mixins/grid-rtl.less b/frontend/less/espo-rtl/bootstrap-rtl/mixins/grid-rtl.less
index f6e186983e..58ef91ef80 100644
--- a/frontend/less/espo-rtl/bootstrap-rtl/mixins/grid-rtl.less
+++ b/frontend/less/espo-rtl/bootstrap-rtl/mixins/grid-rtl.less
@@ -3,7 +3,7 @@
 // Generate semantic rtl grid columns with these mixins.
 
 // Generate the extra small columns
-.make-xs-column(@columns; @gutter: @grid-gutter-width) {
+.make-xs-column(@columns) {
   float: right;
 }
 .make-xs-column-offset(@columns) {
@@ -20,7 +20,7 @@
 }
 
 // Generate the small columns
-.make-sm-column(@columns; @gutter: @grid-gutter-width) {
+.make-sm-column(@columns) {
 
   @media (min-width: @screen-sm-min) {
     float: right;
@@ -46,7 +46,7 @@
 }
 
 // Generate the medium columns
-.make-md-column(@columns; @gutter: @grid-gutter-width) {
+.make-md-column(@columns) {
 
   @media (min-width: @screen-md-min) {
     float: right;
@@ -72,7 +72,7 @@
 }
 
 // Generate the large columns
-.make-lg-column(@columns; @gutter: @grid-gutter-width) {
+.make-lg-column(@columns) {
 
   @media (min-width: @screen-lg-min) {
     float: right;
diff --git a/frontend/less/espo-rtl/bootstrap-rtl/navbar-rtl.less b/frontend/less/espo-rtl/bootstrap-rtl/navbar-rtl.less
index 792376cf1b..fe4c040514 100644
--- a/frontend/less/espo-rtl/bootstrap-rtl/navbar-rtl.less
+++ b/frontend/less/espo-rtl/bootstrap-rtl/navbar-rtl.less
@@ -15,35 +15,10 @@
   }
 }
 
-
-// Navbar collapse (body)
-//
-// Group your navbar content into this for easy collapsing and expanding across
-// various device sizes. By default, this content is collapsed when <768px, but
-// will expand past that for a horizontal display.
-//
-// To start (on mobile devices) the navbar links, forms, and buttons are stacked
-// vertically and include a `max-height` to overflow in case you have too much
-// content for the user's viewport.
-
-.navbar-collapse {
-  padding-right: @navbar-padding-horizontal;
-  padding-left:  @navbar-padding-horizontal;
-}
-
-
 // Brand/project name
 
 .navbar-brand {
   float: right;
-
-  @media (min-width: @grid-float-breakpoint) {
-    .navbar > .container &,
-    .navbar > .container-fluid & {
-      margin-right: -@navbar-padding-horizontal;
-      margin-left: auto;
-    }
-  }
 }
 
 
@@ -54,8 +29,6 @@
 
 .navbar-toggle {
   float: left;
-  margin-left: @navbar-padding-horizontal;
-  margin-right: auto;
 }
 
 
@@ -97,15 +70,9 @@
 
   .navbar-right {
     float: left !important;
-    &:last-child {
-      margin-left: -@navbar-padding-horizontal;
-      margin-right: auto;
-    }
 
     &.flip {
       float: left !important;
-      margin-left: -@navbar-padding-horizontal;
-      margin-right: auto;
     }
 
     .dropdown-menu {
@@ -114,22 +81,3 @@
     }
   }
 }
-
-// Text in navbars
-//
-// Add a class to make any element properly align itself vertically within the navbars.
-
-.navbar-text {
-
-  @media (min-width: @grid-float-breakpoint) {
-    float: right;
-
-    // Outdent the form if last child to line up with content down the page
-    &.navbar-right:last-child {
-      margin-left: 0;
-      margin-right: auto;
-    }
-  }
-}
-
-
diff --git a/frontend/less/espo-rtl/bootstrap-rtl/navs-rtl.less b/frontend/less/espo-rtl/bootstrap-rtl/navs-rtl.less
index 6810031094..ad43b11de8 100644
--- a/frontend/less/espo-rtl/bootstrap-rtl/navs-rtl.less
+++ b/frontend/less/espo-rtl/bootstrap-rtl/navs-rtl.less
@@ -24,7 +24,6 @@
     > a {
       margin-left: auto;
       margin-right: -2px;
-      border-radius: @border-radius-base @border-radius-base 0 0;
     }
   }
 }
@@ -36,10 +35,6 @@
   > li {
     float: right;
 
-    // Links rendered as pills
-    > a {
-      border-radius: @nav-pills-border-radius;
-    }
     + li {
       margin-right: 2px;
       margin-left: auto;
@@ -67,12 +62,12 @@
 // -------------------------
 
 .nav-justified {
-  
+
   //To fix the overridden style by line 21
   > li{
     float: none;
   }
-  
+
   > .dropdown .dropdown-menu {
     right: auto;
   }
@@ -88,10 +83,4 @@
     margin-left: 0;
     margin-right: auto;
   }
-
-  @media (min-width: @screen-sm-min) {
-    > li > a {
-      border-radius: @border-radius-base @border-radius-base 0 0;
-    }
-  }
 }
diff --git a/frontend/less/espo-rtl/bootstrap-rtl/pagination-rtl.less b/frontend/less/espo-rtl/bootstrap-rtl/pagination-rtl.less
index 04355eb5a7..b68f2791b8 100644
--- a/frontend/less/espo-rtl/bootstrap-rtl/pagination-rtl.less
+++ b/frontend/less/espo-rtl/bootstrap-rtl/pagination-rtl.less
@@ -15,18 +15,13 @@
       > a,
       > span {
         margin-left: 0;
-        .border-right-radius(@border-radius-base);
-        .border-left-radius(0);
       }
     }
     &:last-child {
       > a,
       > span {
         margin-right: -1px;
-        .border-left-radius(@border-radius-base);
-        .border-right-radius(0);
       }
     }
   }
-
 }
diff --git a/frontend/less/espo-rtl/custom.less b/frontend/less/espo-rtl/custom.less
index de5f9feb21..1af2dbcff1 100644
--- a/frontend/less/espo-rtl/custom.less
+++ b/frontend/less/espo-rtl/custom.less
@@ -21,7 +21,7 @@
 
 .list-buttons-container > div {
     float: right;
-    margin-left: @panel-padding;
+    margin-left: var(--panel-padding);
     margin-right: 0;
 }
 
@@ -51,41 +51,41 @@ ul.dropdown-menu > li.checkbox {
 
 .modal-body > div > .list > table td:first-child,
 .modal-body > div > .list > table th:first-child {
-     padding-right: @panel-padding;
-     padding-left: @table-cell-padding / 2;
+     padding-right: var(--panel-padding);
+     padding-left: var(--table-cell-padding-half);
 }
 .modal-body > div > .list > table td:last-child,
 .modal-body > div > .list > table th:last-child {
-    padding-left: @panel-padding;
-    padding-right: @table-cell-padding / 2;
+    padding-left: var(--panel-padding);
+    padding-right: var(--table-cell-padding-half);
 }
 
 #main > .list-container > .list {
-    margin-left: -@container-padding;
-    margin-right: -@container-padding;
+    margin-left: calc(var(--container-padding) * -1);
+    margin-right: calc(var(--container-padding) * -1);
 }
 #main > .list-container > .list > table td:first-child,
 #main > .list-container > .list > table th:first-child {
-     padding-right: @panel-padding;
-     padding-left: @table-cell-padding / 2;
+     padding-right: var(--panel-padding);
+     padding-left: var(--table-cell-padding-half);
 }
 #main > .list-container > .list > table td:last-child,
 #main > .list-container > .list > table th:last-child {
-    padding-left: @panel-padding;
-    padding-right: @table-cell-padding / 2;
+    padding-left: var(--panel-padding);
+    padding-right: var(--table-cell-padding-half);
 }
 
 .panel-body .no-side-margin {
     > table td:first-child,
     > table th:first-child {
-        padding-right: @panel-padding;
-        padding-left: @table-cell-padding / 2;
+        padding-right: var(--panel-padding);
+        padding-left: var(--table-cell-padding-half);
     }
 
     > table td:last-child,
     > table th:last-child {
-        padding-left: @panel-padding;
-        padding-right: @table-cell-padding / 2;
+        padding-left: var(--panel-padding);
+        padding-right: var(--table-cell-padding-half);
     }
 }
 
@@ -435,12 +435,12 @@ table.table-admin-panel tr > td:first-child > div > a {
     }
 
     &.margin-right {
-        margin-left: @padding-base-horizontal;
+        margin-left: var(--padding-base-horizontal);
         margin-right: 0;
     }
 
     &.margin-left {
-        margin-right: @padding-base-horizontal;
+        margin-right: var(--padding-base-horizontal);
         margin-left: 0;
     }
 }
@@ -451,19 +451,19 @@ table.table-admin-panel tr > td:first-child > div > a {
         > tr {
         > th:first-child,
         > td:first-child {
-            padding-right: @padding-base-horizontal;
+            padding-right: var(--padding-base-horizontal);
 
             @media screen and (max-width: (@screen-sm-min - 1px)) {
-                padding-right: @table-cell-padding;
+                padding-right: var(--table-cell-padding);
             }
         }
 
         > th:last-child,
         > td:last-child {
-            padding-left: @padding-base-horizontal;
+            padding-left: var(--padding-base-horizontal);
 
                 @media screen and (max-width: (@screen-sm-min - 1px)) {
-                    padding-left: @table-cell-padding;
+                    padding-left: var(--table-cell-padding);
                 }
             }
         }
diff --git a/frontend/less/espo-rtl/layout-side.less b/frontend/less/espo-rtl/layout-side.less
index 68d4f5f124..6cd340a016 100644
--- a/frontend/less/espo-rtl/layout-side.less
+++ b/frontend/less/espo-rtl/layout-side.less
@@ -18,8 +18,8 @@ body[data-navbar="side"] {
 
                 .nav li.tab-group {
                     span.full-label {
-                        padding-left: 8px;
-                        padding-right: @navbar-tab-text-left-padding;
+                        padding-left: var(--8px);
+                        padding-right: var(--navbar-tab-text-left-padding);
                     }
 
                     .group-caret {
@@ -30,7 +30,7 @@ body[data-navbar="side"] {
                 }
 
                 a.minimizer {
-                    margin-right: @navbar-tab-left-padding + 3px;
+                    margin-right: calc(var(--navbar-tab-left-padding) + var(--3px));
                     margin-left: 0;
                 }
 
@@ -66,13 +66,13 @@ body[data-navbar="side"] {
                     }
 
                     li > a {
-                        padding-right: @navbar-tab-left-padding;
-                        padding-left: @navbar-tab-right-padding;
+                        padding-right: var(--navbar-tab-left-padding);
+                        padding-left: var(--navbar-tab-right-padding);
                     }
 
                     li.tab > a {
-                        padding-right: @navbar-tab-left-padding - @navbar-color-border-width;
-                        padding-left: @navbar-tab-right-padding;
+                        padding-right: var(--navbar-tab-left-padding);
+                        padding-left: var(--navbar-tab-right-padding);
                     }
                 }
             }
@@ -103,12 +103,12 @@ body[data-navbar="side"] {
         ul.tabs {
             > li.more > ul > li > a > span.full-label {
                 padding-left: 0;
-                padding-right: @navbar-tab-text-left-padding;
+                padding-right: var(--navbar-tab-text-left-padding);
             }
 
             > li a > span.full-label {
                 padding-left: 0;
-                padding-right: @navbar-tab-text-left-padding;
+                padding-right: var(--navbar-tab-text-left-padding);
             }
         }
 
@@ -120,7 +120,7 @@ body[data-navbar="side"] {
         }
 
         .navbar li.tab > a {
-            border-right-width: @navbar-color-border-width;
+            border-right-width: 0;
             border-right-style: solid;
         }
     }
@@ -144,12 +144,12 @@ body[data-navbar="side"] {
 
                 ul.tabs {
                     > li > a {
-                        padding-right: @navbar-tab-left-padding;
+                        padding-right: var(--navbar-tab-left-padding);
                         padding-left: 0;
                     }
 
                     > li.tab > a {
-                        padding-right: @navbar-tab-left-padding - @navbar-color-border-width;
+                        padding-right: var(--navbar-tab-left-padding);
                         padding-left: 0;
                     }
 
@@ -174,7 +174,7 @@ body[data-navbar="side"] {
 
             #content {
                 padding-left: 15px;
-                padding-right: @navbar-minimized-width + @container-padding;
+                padding-right: ~"calc(" @navbar-minimized-width ~" + var(--container-padding))";
             }
 
             #footer {
@@ -190,7 +190,7 @@ body[data-navbar="side"] {
 
         &.has-navbar > .content {
             padding-left: 15px;
-            padding-right: @navbar-width + @container-padding;
+            padding-right: ~"calc(" @navbar-width ~" + var(--container-padding))";
         }
 
         > footer {
diff --git a/frontend/less/espo-rtl/layout-top.less b/frontend/less/espo-rtl/layout-top.less
index 478104e3e2..4dc822e1db 100644
--- a/frontend/less/espo-rtl/layout-top.less
+++ b/frontend/less/espo-rtl/layout-top.less
@@ -57,7 +57,7 @@ body:not([data-navbar="side"]) {
         th.group-header {
             > div {
                 padding-left: 0;
-                padding-right: @table-cell-padding;
+                padding-right: var(--table-cell-padding);
             }
 
             > div:before,
diff --git a/frontend/less/espo/bootstrap/alerts.less b/frontend/less/espo/bootstrap/alerts.less
index d8dbe93c55..c356b74cc6 100644
--- a/frontend/less/espo/bootstrap/alerts.less
+++ b/frontend/less/espo/bootstrap/alerts.less
@@ -8,9 +8,8 @@
 
 .alert {
   padding: @alert-padding;
-  margin-bottom: @line-height-computed;
+  margin-bottom: var(--line-height-computed);
   border: 1px solid transparent;
-  border-radius: @alert-border-radius;
 
   // Headings for larger alerts
   h4 {
diff --git a/frontend/less/espo/bootstrap/badges.less b/frontend/less/espo/bootstrap/badges.less
index 6ee16dca41..daaaf747ca 100644
--- a/frontend/less/espo/bootstrap/badges.less
+++ b/frontend/less/espo/bootstrap/badges.less
@@ -8,7 +8,7 @@
   display: inline-block;
   min-width: 10px;
   padding: 3px 7px;
-  font-size: @font-size-small;
+  font-size: var(--font-size-small);
   font-weight: @badge-font-weight;
   color: @badge-color;
   line-height: @badge-line-height;
diff --git a/frontend/less/espo/bootstrap/bootstrap.less b/frontend/less/espo/bootstrap/bootstrap.less
index 0166f4a39e..bce2c88940 100644
--- a/frontend/less/espo/bootstrap/bootstrap.less
+++ b/frontend/less/espo/bootstrap/bootstrap.less
@@ -34,8 +34,6 @@
 @import "pager.less";
 @import "labels.less";
 @import "badges.less";
-@import "jumbotron.less";
-@import "thumbnails.less";
 @import "alerts.less";
 @import "progress-bars.less";
 @import "media.less";
diff --git a/frontend/less/espo/bootstrap/breadcrumbs.less b/frontend/less/espo/bootstrap/breadcrumbs.less
index cb01d503fb..ef74a1175b 100644
--- a/frontend/less/espo/bootstrap/breadcrumbs.less
+++ b/frontend/less/espo/bootstrap/breadcrumbs.less
@@ -5,10 +5,9 @@
 
 .breadcrumb {
   padding: @breadcrumb-padding-vertical @breadcrumb-padding-horizontal;
-  margin-bottom: @line-height-computed;
+  margin-bottom: var(--line-height-computed);
   list-style: none;
   background-color: @breadcrumb-bg;
-  border-radius: @border-radius-base;
 
   > li {
     display: inline-block;
diff --git a/frontend/less/espo/bootstrap/button-groups.less b/frontend/less/espo/bootstrap/button-groups.less
index 59ab4a89cf..7570a56f63 100644
--- a/frontend/less/espo/bootstrap/button-groups.less
+++ b/frontend/less/espo/bootstrap/button-groups.less
@@ -173,12 +173,10 @@
     border-radius: 0;
   }
   &:first-child:not(:last-child) {
-    .border-top-radius(@btn-border-radius-base);
     .border-bottom-radius(0);
   }
   &:last-child:not(:first-child) {
     .border-top-radius(0);
-    .border-bottom-radius(@btn-border-radius-base);
   }
 }
 .btn-group-vertical > .btn-group:not(:first-child):not(:last-child) > .btn {
diff --git a/frontend/less/espo/bootstrap/buttons.less b/frontend/less/espo/bootstrap/buttons.less
index 29aafb5ad4..3f5cc96797 100644
--- a/frontend/less/espo/bootstrap/buttons.less
+++ b/frontend/less/espo/bootstrap/buttons.less
@@ -1,11 +1,3 @@
-//
-// Buttons
-// --------------------------------------------------
-
-
-// Base styles
-// --------------------------------------------------
-
 .btn {
   display: inline-block;
   margin-bottom: 0; // For input.btn
@@ -17,7 +9,7 @@
   background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
   border: 1px solid transparent;
   white-space: nowrap;
-  .button-size(@padding-base-vertical; @padding-base-horizontal; @font-size-base; @line-height-base; @btn-border-radius-base);
+  .button-size(var(--padding-base-vertical); var(--padding-base-horizontal); var(--font-size-base); var(--line-height-base));
   .user-select(none);
 
   &,
@@ -36,17 +28,6 @@
     text-decoration: none;
   }
 
-// Espo-fix
-/*
-  &:active:hover,
-  &.active {
-    outline: 0;
-    background-image: none;
-      box-shadow: var(--input-);
-    .box-shadow(inset 0 3px 5px rgba(0,0,0,.125));
-  }
- */
-
   &.disabled,
   &[disabled],
   fieldset[disabled] & {
@@ -82,8 +63,7 @@
   &:active {
     border-color: transparent;
   }
-  &:hover/*, Espo-fix
-  &:focus */{
+  &:hover {
     color: @link-hover-color;
     text-decoration: @link-hover-decoration;
     background-color: transparent;
@@ -99,24 +79,12 @@
 }
 
 
-// Button Sizes
-// --------------------------------------------------
-
 .btn-lg {
-  // line-height: ensure even-numbered height of button next to large input
-  .button-size(@padding-large-vertical; @padding-large-horizontal; @font-size-large; @line-height-large; @btn-border-radius-large);
+  .button-size(var(--padding-large-vertical); var(--padding-large-horizontal); var(--font-size-large); var(--line-height-large));
 }
 .btn-sm {
-  // line-height: ensure proper height of button next to small input
-  .button-size(@padding-small-vertical; @padding-small-horizontal; @font-size-small; @line-height-small; @btn-border-radius-small);
+  .button-size(var(--padding-small-vertical); var(--padding-small-horizontal); var(--font-size-small); var(--line-height-small));
 }
-.btn-xs {
-  .button-size(@padding-xs-vertical; @padding-xs-horizontal; @font-size-small; @line-height-small; @btn-border-radius-small);
-}
-
-
-// Block button
-// --------------------------------------------------
 
 .btn-block {
   display: block;
diff --git a/frontend/less/espo/bootstrap/close.less b/frontend/less/espo/bootstrap/close.less
index a59b5efdbd..061a9b1498 100644
--- a/frontend/less/espo/bootstrap/close.less
+++ b/frontend/less/espo/bootstrap/close.less
@@ -5,7 +5,7 @@
 
 .close {
   float: right;
-  font-size: (@font-size-base * 1.5);
+  font-size: calc(var(--font-size-base) * 1.5);
   font-weight: @close-font-weight;
   line-height: 1;
   color: @close-color;
diff --git a/frontend/less/espo/bootstrap/code.less b/frontend/less/espo/bootstrap/code.less
index a08b4d48c4..d4b352c495 100644
--- a/frontend/less/espo/bootstrap/code.less
+++ b/frontend/less/espo/bootstrap/code.less
@@ -17,7 +17,6 @@ code {
   font-size: 90%;
   color: @code-color;
   background-color: @code-bg;
-  border-radius: @border-radius-base;
 }
 
 // User input typically entered via keyboard
@@ -26,7 +25,6 @@ kbd {
   font-size: 90%;
   color: @kbd-color;
   background-color: @kbd-bg;
-  border-radius: @border-radius-small;
   box-shadow: inset 0 -1px 0 rgba(0,0,0,.25);
 
   kbd {
@@ -40,16 +38,15 @@ kbd {
 // Blocks of code
 pre {
   display: block;
-  padding: ((@line-height-computed - 1) / 2);
-  margin: 0 0 (@line-height-computed / 2);
-  font-size: (@font-size-base - 1); // 14px to 13px
-  line-height: @line-height-base;
+  padding: calc((var(--line-height-computed) - 1px) / 2);
+  margin: 0 0 var(--line-height-computed-half);
+  font-size: calc(var(--font-size-base) - var(--1px));
+  line-height: var(--line-height-base);
   word-break: break-all;
   word-wrap: break-word;
   color: @pre-color;
   background-color: @pre-bg;
   border: 1px solid @pre-border-color;
-  border-radius: @border-radius-base;
 
   // Account for some code outputs that place code tags in pre tags
   code {
diff --git a/frontend/less/espo/bootstrap/dropdowns.less b/frontend/less/espo/bootstrap/dropdowns.less
index cea9854e73..67178e33ba 100644
--- a/frontend/less/espo/bootstrap/dropdowns.less
+++ b/frontend/less/espo/bootstrap/dropdowns.less
@@ -8,10 +8,10 @@
   display: inline-block;
   width: 0;
   height: 0;
-  margin-left: 2px;
+  margin-left: var(--2px);
   vertical-align: middle;
-  border-top:   @caret-width-base dashed;
-  border-top:   @caret-width-base solid ~"\9"; // IE8
+  border-top: @caret-width-base dashed;
+  //border-top:   @caret-width-base solid ~"\9"; // IE8
   border-right: @caret-width-base solid transparent;
   border-left:  @caret-width-base solid transparent;
 }
@@ -39,12 +39,10 @@
   padding: 5px 0;
   margin: 2px 0 0; // override default ul
   list-style: none;
-  font-size: @font-size-base;
+  font-size: var(--font-size-base);
   text-align: left; // Ensures proper alignment if parent has it changed (e.g., modal footer)
   background-color: @dropdown-bg;
-  border: 1px solid @dropdown-fallback-border; // IE8 fallback
   border: 1px solid @dropdown-border;
-  border-radius: @border-radius-base;
   .box-shadow(0 6px 12px rgba(0,0,0,.175));
   background-clip: padding-box;
 
@@ -67,7 +65,7 @@
     padding: 3px 20px;
     clear: both;
     font-weight: normal;
-    line-height: @line-height-base;
+    line-height: var(--line-height-base);
     color: @dropdown-link-color;
     white-space: nowrap; // prevent links from randomly breaking onto new lines
   }
@@ -153,8 +151,8 @@
 .dropdown-header {
   display: block;
   padding: 3px 20px;
-  font-size: @font-size-smaller;
-  line-height: @line-height-base;
+  font-size: calc(var(--font-size-small) + var(--1px));
+  line-height: var(--line-height-base);
   color: @dropdown-header-color;
   white-space: nowrap; // as with > li > a
 }
@@ -180,8 +178,7 @@
 // Just add .dropup after the standard .dropdown class and you're set, bro.
 // TODO: abstract this so that the navbar fixed styles are not placed here?
 
-.dropup,
-.navbar-fixed-bottom .dropdown {
+.dropup {
   // Reverse the caret
   .caret {
     border-top: 0;
diff --git a/frontend/less/espo/bootstrap/forms.less b/frontend/less/espo/bootstrap/forms.less
index 9d087c31b5..f999177982 100644
--- a/frontend/less/espo/bootstrap/forms.less
+++ b/frontend/less/espo/bootstrap/forms.less
@@ -21,8 +21,8 @@ legend {
   display: block;
   width: 100%;
   padding: 0;
-  margin-bottom: @line-height-computed;
-  font-size: (@font-size-base * 1.5);
+  margin-bottom: var(--line-height-computed);
+  font-size: calc(var(--font-size-base) * 1.5);
   line-height: inherit;
   color: @legend-color;
   border: 0;
@@ -82,9 +82,9 @@ input[type="checkbox"]:focus {
 // Adjust output element
 output {
   display: block;
-  padding-top: (@padding-base-vertical + 1);
-  font-size: @font-size-base;
-  line-height: @line-height-base;
+  padding-top: var(--padding-base-vertical);
+  font-size: var(--font-size-base);
+  line-height: var(--line-height-base);
   color: @input-color;
 }
 
@@ -114,20 +114,13 @@ output {
 .form-control {
   display: block;
   width: 100%;
-  height: @input-height-base; // Make inputs at least the height of their button counterpart (base line-height + padding + border)
-  padding: @padding-base-vertical @padding-base-horizontal;
-  font-size: @font-size-base;
-  line-height: @line-height-base;
+  height: var(--input-height-base); // Make inputs at least the height of their button counterpart (base line-height + padding + border)
+  padding: var(--padding-base-vertical) var(--padding-base-horizontal);
+  font-size: var(--font-size-base);
+  line-height: var(--line-height-base);
   color: @input-color;
   background-color: @input-bg;
   background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
-  //border: 1px solid @input-border;
-  //border-radius: @input-border-radius; // Note: This has no effect on <select>s in some browsers, due to the limited stylability of <select>s in CSS.
-  //.box-shadow(inset 0 1px 1px rgba(0,0,0,.075));
-  //.transition(~"border-color ease-in-out .15s, box-shadow ease-in-out .15s");
-
-  // Customize the `:focus` state to imitate native WebKit styles.
-  //.form-control-focus-espo();
 
   // Placeholder
   .placeholder();
@@ -189,17 +182,17 @@ input[type="search"] {
   input[type="datetime-local"],
   input[type="month"] {
     &.form-control {
-      line-height: @input-height-base;
+      line-height: var(--input-height-base);
     }
 
     &.input-sm,
     .input-group-sm & {
-      line-height: @input-height-small;
+      line-height: var(--input-height-small);
     }
 
     &.input-lg,
     .input-group-lg & {
-      line-height: @input-height-large;
+      line-height: var(--input-height-large);
     }
   }
 }
@@ -211,7 +204,7 @@ input[type="search"] {
 // horizontal forms, use the predefined grid classes.
 
 .form-group {
-  margin-bottom: @form-group-margin-bottom;
+  margin-bottom: var(--form-group-margin-bottom);
 }
 
 
@@ -227,7 +220,7 @@ input[type="search"] {
   margin-bottom: 10px;
 
   label {
-    min-height: @line-height-computed; // Ensure the input doesn't jump when there is no text
+    min-height: var(--line-height-computed); // Ensure the input doesn't jump when there is no text
     padding-left: 20px;
     margin-bottom: 0;
     font-weight: normal;
@@ -296,28 +289,6 @@ input[type="checkbox"] {
   }
 }
 
-
-// Static form control text
-//
-// Apply class to a `p` element to make any string of text align with labels in
-// a horizontal form layout.
-
-.form-control-static {
-  // Size it appropriately next to real form controls
-  padding-top: (@padding-base-vertical + 1);
-  padding-bottom: (@padding-base-vertical + 1);
-  // Remove default margin from `p`
-  margin-bottom: 0;
-  min-height: (@line-height-computed + @font-size-base);
-
-  &.input-lg,
-  &.input-sm {
-    padding-left: 0;
-    padding-right: 0;
-  }
-}
-
-
 // Form control sizing
 //
 // Build on `.form-control` with modifier classes to decrease or increase the
@@ -327,58 +298,56 @@ input[type="checkbox"] {
 // issue documented in https://github.com/twbs/bootstrap/issues/15074.
 
 .input-sm {
-  .input-size(@input-height-small; @padding-small-vertical; @padding-small-horizontal; @font-size-small; @line-height-small; @input-border-radius-small);
+  .input-size(var(--input-height-small); var(--padding-small-vertical); var(--padding-small-horizontal); var(--font-size-small); var(--line-height-small));
 }
 .form-group-sm {
   .form-control {
-    height: @input-height-small;
-    padding: @padding-small-vertical @padding-small-horizontal;
-    font-size: @font-size-small;
-    line-height: @line-height-small;
-    border-radius: @input-border-radius-small;
+    height: var(--input-height-small);
+    padding: var(--padding-small-vertical) var(--padding-small-horizontal);
+    font-size: var(--font-size-small);
+    line-height: var(--line-height-small);
   }
   select.form-control {
-    height: @input-height-small;
-    line-height: @input-height-small;
+    height: var(--input-height-small);
+    line-height: var(--input-height-small);
   }
   textarea.form-control,
   select[multiple].form-control {
     height: auto;
   }
   .form-control-static {
-    height: @input-height-small;
-    min-height: (@line-height-computed + @font-size-small);
-    padding: (@padding-small-vertical + 1) @padding-small-horizontal;
-    font-size: @font-size-small;
-    line-height: @line-height-small;
+    height: var(--input-height-small);
+    min-height: calc(var(--line-height-computed) + var(--font-size-small));
+    padding: calc(var(--padding-small-vertical) + var(--1px)) var(--padding-small-horizontal);
+    font-size: var(--font-size-small);
+    line-height: var(--line-height-small);
   }
 }
 
 .input-lg {
-  .input-size(@input-height-large; @padding-large-vertical; @padding-large-horizontal; @font-size-large; @line-height-large; @input-border-radius-large);
+  .input-size(var(--input-height-large); var(--padding-large-vertical); var(--padding-large-horizontal); var(--font-size-large); var(--line-height-large));
 }
 .form-group-lg {
   .form-control {
-    height: @input-height-large;
-    padding: @padding-large-vertical @padding-large-horizontal;
-    font-size: @font-size-large;
-    line-height: @line-height-large;
-    border-radius: @input-border-radius-large;
+    height: var(--input-height-large);
+    padding: var(--padding-large-vertical) var(--padding-large-horizontal);
+    font-size: var(--font-size-large);
+    line-height: var(--line-height-large);
   }
   select.form-control {
-    height: @input-height-large;
-    line-height: @input-height-large;
+    height: var(--input-height-large);
+    line-height: var(--input-height-large);
   }
   textarea.form-control,
   select[multiple].form-control {
     height: auto;
   }
   .form-control-static {
-    height: @input-height-large;
-    min-height: (@line-height-computed + @font-size-large);
-    padding: (@padding-large-vertical + 1) @padding-large-horizontal;
-    font-size: @font-size-large;
-    line-height: @line-height-large;
+    height: var(--input-height-large);
+    min-height: calc(var(--line-height-computed) + var(--font-size-large));
+    padding: calc(var(--padding-large-vertical) + var(--1px)) var(--padding-large-horizontal);
+    font-size: var(--font-size-large);
+    line-height: var(--line-height-large);
   }
 }
 
@@ -393,7 +362,7 @@ input[type="checkbox"] {
 
   // Ensure icons don't overlap text
   .form-control {
-    padding-right: (@input-height-base * 1.25);
+    padding-right: calc(var(--input-height-base) * 1.25);
   }
 }
 // Feedback icon (requires .glyphicon classes)
@@ -403,25 +372,25 @@ input[type="checkbox"] {
   right: 0;
   z-index: 2; // Ensure icon is above input groups
   display: block;
-  width: @input-height-base;
-  height: @input-height-base;
-  line-height: @input-height-base;
+  width: var(--input-height-base);
+  height: var(--input-height-base);
+  line-height: var(--input-height-base);
   text-align: center;
   pointer-events: none;
 }
 .input-lg + .form-control-feedback,
 .input-group-lg + .form-control-feedback,
 .form-group-lg .form-control + .form-control-feedback {
-  width: @input-height-large;
-  height: @input-height-large;
-  line-height: @input-height-large;
+  width: var(--input-height-large);
+  height: var(--input-height-large);
+  line-height: var(--input-height-large);
 }
 .input-sm + .form-control-feedback,
 .input-group-sm + .form-control-feedback,
 .form-group-sm .form-control + .form-control-feedback {
-  width: @input-height-small;
-  height: @input-height-small;
-  line-height: @input-height-small;
+  width: var(--input-height-small);
+  height: var(--input-height-small);
+  line-height: var(--input-height-small);
 }
 
 // Feedback states
@@ -457,7 +426,7 @@ input[type="checkbox"] {
 .has-feedback label {
 
   & ~ .form-control-feedback {
-    top: (@line-height-computed + 5); // Height of the `label` and its margin
+    top: calc(var(--line-height-computed) + 5px); // Height of the `label` and its margin
   }
   &.sr-only ~ .form-control-feedback {
     top: 0;
@@ -577,13 +546,13 @@ input[type="checkbox"] {
   .checkbox-inline {
     margin-top: 0;
     margin-bottom: 0;
-    padding-top: (@padding-base-vertical + 1); // Default padding plus a border
+    padding-top: var(--padding-base-vertical);
   }
   // Account for padding we're adding to ensure the alignment and of help text
   // and other content below items
   .radio,
   .checkbox {
-    min-height: (@line-height-computed + (@padding-base-vertical + 1));
+    min-height: calc(var(--line-height-computed) + var(--padding-base-vertical))
   }
 
   // Make form groups behave like rows
@@ -597,7 +566,7 @@ input[type="checkbox"] {
     .control-label {
       text-align: right;
       margin-bottom: 0;
-      padding-top: (@padding-base-vertical + 1); // Default padding plus a border
+      padding-top: var(--padding-base-vertical);
     }
   }
 
@@ -606,7 +575,7 @@ input[type="checkbox"] {
   // Reposition the icon because it's now within a grid column and columns have
   // `position: relative;` on them. Also accounts for the grid gutter padding.
   .has-feedback .form-control-feedback {
-    right: floor((@grid-gutter-width / 2));
+    right: var(--grid-gutter-width-half);
   }
 
   // Form group sizes
@@ -616,16 +585,16 @@ input[type="checkbox"] {
   .form-group-lg {
     @media (min-width: @screen-sm-min) {
       .control-label {
-        padding-top: (@padding-large-vertical + 1);
-        font-size: @font-size-large;
+        padding-top: calc(var(--padding-large-vertical) + var(--1px));
+        font-size: var(--font-size-large);
       }
     }
   }
   .form-group-sm {
     @media (min-width: @screen-sm-min) {
       .control-label {
-        padding-top: (@padding-small-vertical + 1);
-        font-size: @font-size-small;
+        padding-top: calc(var(--padding-small-vertical) + var(--1px));
+        font-size: var(--font-size-small);
       }
     }
   }
diff --git a/frontend/less/espo/bootstrap/grid.less b/frontend/less/espo/bootstrap/grid.less
index e100655b70..2b088ec462 100644
--- a/frontend/less/espo/bootstrap/grid.less
+++ b/frontend/less/espo/bootstrap/grid.less
@@ -9,16 +9,6 @@
 
 .container {
   .container-fixed();
-
-  @media (min-width: @screen-sm-min) {
-    width: @container-sm;
-  }
-  @media (min-width: @screen-md-min) {
-    width: @container-md;
-  }
-  @media (min-width: @screen-lg-min) {
-    width: @container-lg;
-  }
 }
 
 
diff --git a/frontend/less/espo/bootstrap/input-groups.less b/frontend/less/espo/bootstrap/input-groups.less
index d0763db7ff..28b69d44bc 100644
--- a/frontend/less/espo/bootstrap/input-groups.less
+++ b/frontend/less/espo/bootstrap/input-groups.less
@@ -75,26 +75,23 @@
 // Text input groups
 // -------------------------
 .input-group-addon {
-  padding: @padding-base-vertical @padding-base-horizontal;
-  font-size: @font-size-base;
+  padding: var(--padding-base-vertical) var(--padding-base-horizontal);
+  font-size: var(--font-size-base);
   font-weight: normal;
   line-height: 1;
   color: @input-color;
   text-align: center;
   background-color: @input-group-addon-bg;
   border: 1px solid @input-group-addon-border-color;
-  border-radius: @input-border-radius;
 
   // Sizing
   &.input-sm {
-    padding: @padding-small-vertical @padding-small-horizontal;
-    font-size: @font-size-small;
-    border-radius: @input-border-radius-small;
+    padding: var(--padding-small-vertical) var(--padding-small-horizontal);
+    font-size: var(--font-size-small);
   }
   &.input-lg {
-    padding: @padding-large-vertical @padding-large-horizontal;
-    font-size: @font-size-large;
-    border-radius: @input-border-radius-large;
+    padding: var(--padding-large-vertical) var(--padding-large-horizontal);
+    font-size: var(--font-size-large);
   }
 
   // Nuke default margins from checkboxes and radios to vertically center within.
diff --git a/frontend/less/espo/bootstrap/jumbotron.less b/frontend/less/espo/bootstrap/jumbotron.less
deleted file mode 100644
index 7328b4d19e..0000000000
--- a/frontend/less/espo/bootstrap/jumbotron.less
+++ /dev/null
@@ -1,54 +0,0 @@
-//
-// Jumbotron
-// --------------------------------------------------
-
-
-.jumbotron {
-  padding-top:    @jumbotron-padding;
-  padding-bottom: @jumbotron-padding;
-  margin-bottom: @jumbotron-padding;
-  color: @jumbotron-color;
-  background-color: @jumbotron-bg;
-
-  h1,
-  .h1 {
-    color: @jumbotron-heading-color;
-  }
-
-  p {
-    margin-bottom: (@jumbotron-padding / 2);
-    font-size: @jumbotron-font-size;
-    font-weight: 200;
-  }
-
-  > hr {
-    border-top-color: var(--gray-lighter-10);
-  }
-
-  .container &,
-  .container-fluid & {
-    border-radius: @border-radius-large; // Only round corners at higher resolutions if contained in a container
-    padding-left:  (@grid-gutter-width / 2);
-    padding-right: (@grid-gutter-width / 2);
-  }
-
-  .container {
-    max-width: 100%;
-  }
-
-  @media screen and (min-width: @screen-sm-min) {
-    padding-top:    (@jumbotron-padding * 1.6);
-    padding-bottom: (@jumbotron-padding * 1.6);
-
-    .container &,
-    .container-fluid & {
-      padding-left:  (@jumbotron-padding * 2);
-      padding-right: (@jumbotron-padding * 2);
-    }
-
-    h1,
-    .h1 {
-      font-size: @jumbotron-heading-font-size;
-    }
-  }
-}
diff --git a/frontend/less/espo/bootstrap/list-group.less b/frontend/less/espo/bootstrap/list-group.less
index de4a4a1655..1416c0b4ca 100644
--- a/frontend/less/espo/bootstrap/list-group.less
+++ b/frontend/less/espo/bootstrap/list-group.less
@@ -29,11 +29,9 @@
 
   // Round the first and last items
   &:first-child {
-    .border-top-radius(@list-group-border-radius);
   }
   &:last-child {
     margin-bottom: 0;
-    .border-bottom-radius(@list-group-border-radius);
   }
 }
 
diff --git a/frontend/less/espo/bootstrap/media.less b/frontend/less/espo/bootstrap/media.less
index 8c835e861e..a6bf781924 100644
--- a/frontend/less/espo/bootstrap/media.less
+++ b/frontend/less/espo/bootstrap/media.less
@@ -19,11 +19,6 @@
 
 .media-object {
   display: block;
-
-  // Fix collapse in webkit from max-width: 100% and display: table-cell.
-  &.img-thumbnail {
-    max-width: none;
-  }
 }
 
 .media-right,
diff --git a/frontend/less/espo/bootstrap/mixins.less b/frontend/less/espo/bootstrap/mixins.less
index befcd70134..9cbd210f3b 100644
--- a/frontend/less/espo/bootstrap/mixins.less
+++ b/frontend/less/espo/bootstrap/mixins.less
@@ -35,6 +35,5 @@
 // Layout
 @import "mixins/clearfix.less";
 @import "mixins/center-block.less";
-@import "mixins/nav-vertical-align.less";
 @import "mixins/grid-framework.less";
 @import "mixins/grid.less";
diff --git a/frontend/less/espo/bootstrap/mixins/buttons.less b/frontend/less/espo/bootstrap/mixins/buttons.less
index b294d8c210..e86e1b5124 100644
--- a/frontend/less/espo/bootstrap/mixins/buttons.less
+++ b/frontend/less/espo/bootstrap/mixins/buttons.less
@@ -57,9 +57,8 @@
 }
 
 // Button sizes
-.button-size(@padding-vertical; @padding-horizontal; @font-size; @line-height; @border-radius) {
+.button-size(@padding-vertical; @padding-horizontal; @font-size; @line-height) {
   padding: @padding-vertical @padding-horizontal;
   font-size: @font-size;
   line-height: @line-height;
-  border-radius: @border-radius;
 }
diff --git a/frontend/less/espo/bootstrap/mixins/forms.less b/frontend/less/espo/bootstrap/mixins/forms.less
index 6f55ed9670..faa607f9d4 100644
--- a/frontend/less/espo/bootstrap/mixins/forms.less
+++ b/frontend/less/espo/bootstrap/mixins/forms.less
@@ -66,12 +66,11 @@
 // Relative text size, padding, and border-radii changes for form controls. For
 // horizontal sizing, wrap controls in the predefined grid classes. `<select>`
 // element gets special love because it's special, and that's a fact!
-.input-size(@input-height; @padding-vertical; @padding-horizontal; @font-size; @line-height; @border-radius) {
+.input-size(@input-height; @padding-vertical; @padding-horizontal; @font-size; @line-height) {
   height: @input-height;
   padding: @padding-vertical @padding-horizontal;
   font-size: @font-size;
   line-height: @line-height;
-  border-radius: @border-radius;
 
   select& {
     height: @input-height;
diff --git a/frontend/less/espo/bootstrap/mixins/grid-framework.less b/frontend/less/espo/bootstrap/mixins/grid-framework.less
index 8c23eed24e..b1cb4adcd3 100644
--- a/frontend/less/espo/bootstrap/mixins/grid-framework.less
+++ b/frontend/less/espo/bootstrap/mixins/grid-framework.less
@@ -19,8 +19,8 @@
       // Prevent columns from collapsing when empty
       min-height: 1px;
       // Inner gutter via padding
-      padding-left:  ceil((@grid-gutter-width / 2));
-      padding-right: floor((@grid-gutter-width / 2));
+      padding-left: var(--grid-gutter-width-half);
+      padding-right: var(--grid-gutter-width-half);
     }
   }
   .col(1); // kickstart it
diff --git a/frontend/less/espo/bootstrap/mixins/grid.less b/frontend/less/espo/bootstrap/mixins/grid.less
index df496d0b3c..2ea805e226 100644
--- a/frontend/less/espo/bootstrap/mixins/grid.less
+++ b/frontend/less/espo/bootstrap/mixins/grid.less
@@ -3,29 +3,31 @@
 // Generate semantic grid columns with these mixins.
 
 // Centered container element
-.container-fixed(@gutter: @grid-gutter-width) {
-  margin-right: auto;
-  margin-left: auto;
-  padding-left:  floor((@gutter / 2));
-  padding-right: ceil((@gutter / 2));
-  &:extend(.clearfix all);
+.container-fixed() {
+    margin-right: auto;
+    margin-left: auto;
+    padding-left: var(--grid-gutter-width-half);
+    padding-right: var(--grid-gutter-width-half);
+
+    &:extend(.clearfix all);
 }
 
 // Creates a wrapper for a series of columns
-.make-row(@gutter: @grid-gutter-width) {
-  margin-left:  ceil((@gutter / -2));
-  margin-right: floor((@gutter / -2));
-  &:extend(.clearfix all);
+.make-row() {
+    margin-left: calc(var(--grid-gutter-width-half) * -1);
+    margin-right: calc(var(--grid-gutter-width-half) * -1);
+
+    &:extend(.clearfix all);
 }
 
 // Generate the extra small columns
-.make-xs-column(@columns; @gutter: @grid-gutter-width) {
-  position: relative;
-  float: left;
-  width: percentage((@columns / @grid-columns));
-  min-height: 1px;
-  padding-left:  (@gutter / 2);
-  padding-right: (@gutter / 2);
+.make-xs-column(@columns) {
+    position: relative;
+    float: left;
+    width: percentage((@columns / @grid-columns));
+    min-height: 1px;
+    padding-left: var(--grid-gutter-width-half);
+    padding-right: var(--grid-gutter-width-half);
 }
 .make-xs-column-offset(@columns) {
   margin-left: percentage((@columns / @grid-columns));
@@ -38,11 +40,11 @@
 }
 
 // Generate the small columns
-.make-sm-column(@columns; @gutter: @grid-gutter-width) {
-  position: relative;
-  min-height: 1px;
-  padding-left:  (@gutter / 2);
-  padding-right: (@gutter / 2);
+.make-sm-column(@columns) {
+    position: relative;
+    min-height: 1px;
+    padding-left: var(--grid-gutter-width-half);
+    padding-right: var(--grid-gutter-width-half);
 
   @media (min-width: @screen-sm-min) {
     float: left;
@@ -66,26 +68,26 @@
 }
 
 // Generate the medium columns
-.make-md-column(@columns; @gutter: @grid-gutter-width) {
-  position: relative;
-  min-height: 1px;
-  padding-left:  (@gutter / 2);
-  padding-right: (@gutter / 2);
+.make-md-column(@columns) {
+    position: relative;
+    min-height: 1px;
+    padding-left: var(--grid-gutter-width-half);
+    padding-right: var(--grid-gutter-width-half);
 
-  @media (min-width: @screen-md-min) {
-    float: left;
-    width: percentage((@columns / @grid-columns));
-  }
+    @media (min-width: @screen-md-min) {
+      float: left;
+      width: percentage((@columns / @grid-columns));
+    }
 }
 .make-md-column-offset(@columns) {
-  @media (min-width: @screen-md-min) {
-    margin-left: percentage((@columns / @grid-columns));
-  }
+    @media (min-width: @screen-md-min) {
+        margin-left: percentage((@columns / @grid-columns));
+    }
 }
 .make-md-column-push(@columns) {
-  @media (min-width: @screen-md-min) {
-    left: percentage((@columns / @grid-columns));
-  }
+    @media (min-width: @screen-md-min) {
+        left: percentage((@columns / @grid-columns));
+    }
 }
 .make-md-column-pull(@columns) {
   @media (min-width: @screen-md-min) {
@@ -94,29 +96,29 @@
 }
 
 // Generate the large columns
-.make-lg-column(@columns; @gutter: @grid-gutter-width) {
-  position: relative;
-  min-height: 1px;
-  padding-left:  (@gutter / 2);
-  padding-right: (@gutter / 2);
+.make-lg-column(@columns) {
+    position: relative;
+    min-height: 1px;
+    padding-left: var(--grid-gutter-width-half);
+    padding-right: var(--grid-gutter-width-half);
 
-  @media (min-width: @screen-lg-min) {
-    float: left;
-    width: percentage((@columns / @grid-columns));
-  }
+    @media (min-width: @screen-lg-min) {
+        float: left;
+        width: percentage((@columns / @grid-columns));
+    }
 }
 .make-lg-column-offset(@columns) {
-  @media (min-width: @screen-lg-min) {
-    margin-left: percentage((@columns / @grid-columns));
-  }
+    @media (min-width: @screen-lg-min) {
+        margin-left: percentage((@columns / @grid-columns));
+    }
 }
 .make-lg-column-push(@columns) {
-  @media (min-width: @screen-lg-min) {
-    left: percentage((@columns / @grid-columns));
-  }
+    @media (min-width: @screen-lg-min) {
+        left: percentage((@columns / @grid-columns));
+    }
 }
 .make-lg-column-pull(@columns) {
-  @media (min-width: @screen-lg-min) {
-    right: percentage((@columns / @grid-columns));
-  }
+    @media (min-width: @screen-lg-min) {
+        right: percentage((@columns / @grid-columns));
+    }
 }
diff --git a/frontend/less/espo/bootstrap/mixins/nav-divider.less b/frontend/less/espo/bootstrap/mixins/nav-divider.less
index feb1e9ed0d..5e112042ff 100644
--- a/frontend/less/espo/bootstrap/mixins/nav-divider.less
+++ b/frontend/less/espo/bootstrap/mixins/nav-divider.less
@@ -4,7 +4,7 @@
 
 .nav-divider(@color: #e5e5e5) {
   height: 1px;
-  margin: ((@line-height-computed / 2) - 1) 0;
+  margin: calc(var(--line-height-computed-half) - 1px) 0;
   overflow: hidden;
   background-color: @color;
 }
diff --git a/frontend/less/espo/bootstrap/mixins/nav-vertical-align.less b/frontend/less/espo/bootstrap/mixins/nav-vertical-align.less
deleted file mode 100644
index d458c78613..0000000000
--- a/frontend/less/espo/bootstrap/mixins/nav-vertical-align.less
+++ /dev/null
@@ -1,9 +0,0 @@
-// Navbar vertical align
-//
-// Vertically center elements in the navbar.
-// Example: an element has a height of 30px, so write out `.navbar-vertical-align(30px);` to calculate the appropriate top margin.
-
-.navbar-vertical-align(@element-height) {
-  margin-top: ((@navbar-height - @element-height) / 2);
-  margin-bottom: ((@navbar-height - @element-height) / 2);
-}
diff --git a/frontend/less/espo/bootstrap/mixins/reset-text.less b/frontend/less/espo/bootstrap/mixins/reset-text.less
index 58dd4d19b4..8e57ab011d 100644
--- a/frontend/less/espo/bootstrap/mixins/reset-text.less
+++ b/frontend/less/espo/bootstrap/mixins/reset-text.less
@@ -5,8 +5,7 @@
   font-weight: normal;
   letter-spacing: normal;
   line-break: auto;
-  line-height: @line-height-base;
-  text-align: left; // Fallback for where `start` is not supported
+  line-height: var(--line-height-base);
   text-align: start;
   text-decoration: none;
   text-shadow: none;
diff --git a/frontend/less/espo/bootstrap/mixins/vendor-prefixes.less b/frontend/less/espo/bootstrap/mixins/vendor-prefixes.less
index 2b5e74b99e..84b4d1d1b5 100644
--- a/frontend/less/espo/bootstrap/mixins/vendor-prefixes.less
+++ b/frontend/less/espo/bootstrap/mixins/vendor-prefixes.less
@@ -55,8 +55,6 @@
 // Default value is `visible`, but can be changed to `hidden`
 
 .backface-visibility(@visibility) {
-  -webkit-backface-visibility: @visibility;
-     -moz-backface-visibility: @visibility;
           backface-visibility: @visibility;
 }
 
@@ -66,35 +64,24 @@
 // supported browsers that have box shadow capabilities now support it.
 
 .box-shadow(@shadow) {
-  -webkit-box-shadow: @shadow; // iOS <4.3 & Android <4.1
           box-shadow: @shadow;
 }
 
 // Box sizing
 .box-sizing(@boxmodel) {
-  -webkit-box-sizing: @boxmodel;
-     -moz-box-sizing: @boxmodel;
           box-sizing: @boxmodel;
 }
 
 // CSS3 Content Columns
-.content-columns(@column-count; @column-gap: @grid-gutter-width) {
-  -webkit-column-count: @column-count;
-     -moz-column-count: @column-count;
+.content-columns(@column-count) {
           column-count: @column-count;
-  -webkit-column-gap: @column-gap;
-     -moz-column-gap: @column-gap;
-          column-gap: @column-gap;
+          column-gap: var(--grid-gutter-width);
 }
 
 // Optional hyphenation
 .hyphens(@mode: auto) {
   word-wrap: break-word;
-  -webkit-hyphens: @mode;
-     -moz-hyphens: @mode;
-      -ms-hyphens: @mode; // IE10+
-       -o-hyphens: @mode;
-          hyphens: @mode;
+  hyphens: @mode;
 }
 
 // Placeholder text
@@ -110,77 +97,42 @@
 
 // Transformations
 .scale(@ratio) {
-  -webkit-transform: scale(@ratio);
-      -ms-transform: scale(@ratio); // IE9 only
-       -o-transform: scale(@ratio);
           transform: scale(@ratio);
 }
 .scale(@ratioX; @ratioY) {
-  -webkit-transform: scale(@ratioX, @ratioY);
-      -ms-transform: scale(@ratioX, @ratioY); // IE9 only
-       -o-transform: scale(@ratioX, @ratioY);
           transform: scale(@ratioX, @ratioY);
 }
 .scaleX(@ratio) {
-  -webkit-transform: scaleX(@ratio);
-      -ms-transform: scaleX(@ratio); // IE9 only
-       -o-transform: scaleX(@ratio);
           transform: scaleX(@ratio);
 }
 .scaleY(@ratio) {
-  -webkit-transform: scaleY(@ratio);
-      -ms-transform: scaleY(@ratio); // IE9 only
-       -o-transform: scaleY(@ratio);
           transform: scaleY(@ratio);
 }
 .skew(@x; @y) {
-  -webkit-transform: skewX(@x) skewY(@y);
-      -ms-transform: skewX(@x) skewY(@y); // See https://github.com/twbs/bootstrap/issues/4885; IE9+
-       -o-transform: skewX(@x) skewY(@y);
           transform: skewX(@x) skewY(@y);
 }
 .translate(@x; @y) {
-  -webkit-transform: translate(@x, @y);
-      -ms-transform: translate(@x, @y); // IE9 only
-       -o-transform: translate(@x, @y);
           transform: translate(@x, @y);
 }
 .translate3d(@x; @y; @z) {
-  -webkit-transform: translate3d(@x, @y, @z);
           transform: translate3d(@x, @y, @z);
 }
 .rotate(@degrees) {
-  -webkit-transform: rotate(@degrees);
-      -ms-transform: rotate(@degrees); // IE9 only
-       -o-transform: rotate(@degrees);
           transform: rotate(@degrees);
 }
 .rotateX(@degrees) {
-  -webkit-transform: rotateX(@degrees);
-      -ms-transform: rotateX(@degrees); // IE9 only
-       -o-transform: rotateX(@degrees);
           transform: rotateX(@degrees);
 }
 .rotateY(@degrees) {
-  -webkit-transform: rotateY(@degrees);
-      -ms-transform: rotateY(@degrees); // IE9 only
-       -o-transform: rotateY(@degrees);
           transform: rotateY(@degrees);
 }
 .perspective(@perspective) {
-  -webkit-perspective: @perspective;
-     -moz-perspective: @perspective;
           perspective: @perspective;
 }
 .perspective-origin(@perspective) {
-  -webkit-perspective-origin: @perspective;
-     -moz-perspective-origin: @perspective;
           perspective-origin: @perspective;
 }
 .transform-origin(@origin) {
-  -webkit-transform-origin: @origin;
-     -moz-transform-origin: @origin;
-      -ms-transform-origin: @origin; // IE9 only
           transform-origin: @origin;
 }
 
@@ -188,30 +140,21 @@
 // Transitions
 
 .transition(@transition) {
-  -webkit-transition: @transition;
-       -o-transition: @transition;
           transition: @transition;
 }
 .transition-property(@transition-property) {
-  -webkit-transition-property: @transition-property;
           transition-property: @transition-property;
 }
 .transition-delay(@transition-delay) {
-  -webkit-transition-delay: @transition-delay;
           transition-delay: @transition-delay;
 }
 .transition-duration(@transition-duration) {
-  -webkit-transition-duration: @transition-duration;
           transition-duration: @transition-duration;
 }
 .transition-timing-function(@timing-function) {
-  -webkit-transition-timing-function: @timing-function;
           transition-timing-function: @timing-function;
 }
 .transition-transform(@transition) {
-  -webkit-transition: -webkit-transform @transition;
-     -moz-transition: -moz-transform @transition;
-       -o-transition: -o-transform @transition;
           transition: transform @transition;
 }
 
@@ -220,8 +163,5 @@
 // For selecting text on the page
 
 .user-select(@select) {
-  -webkit-user-select: @select;
-     -moz-user-select: @select;
-      -ms-user-select: @select; // IE10+
           user-select: @select;
 }
diff --git a/frontend/less/espo/bootstrap/modals.less b/frontend/less/espo/bootstrap/modals.less
index 767ce36ba3..f84cf00149 100644
--- a/frontend/less/espo/bootstrap/modals.less
+++ b/frontend/less/espo/bootstrap/modals.less
@@ -2,11 +2,6 @@
 // Modals
 // --------------------------------------------------
 
-// .modal-open      - body class for killing the scroll
-// .modal           - container to scroll within
-// .modal-dialog    - positioning shell for the actual modal
-// .modal-content   - actual modal w/ bg and corners and shit
-
 // Kill the scroll on the body
 .modal-open {
   overflow: hidden;
@@ -27,13 +22,6 @@
   // Prevent Chrome on Windows from adding a focus outline. For details, see
   // https://github.com/twbs/bootstrap/pull/10951.
   outline: 0;
-
-  // When fading in the modal, animate it to slide down
-  &.fade .modal-dialog {
-    .translate(0, -25%);
-    .transition-transform(~"0.3s ease-out");
-  }
-  &.in .modal-dialog { .translate(0, 0) }
 }
 .modal-open .modal {
   overflow-x: hidden;
@@ -51,10 +39,7 @@
 .modal-content {
   position: relative;
   background-color: @modal-content-bg;
-  border: 1px solid @modal-content-fallback-border-color; //old browsers fallback (ie8 etc)
   border: 1px solid @modal-content-border-color;
-  border-radius: @border-radius-large;
-  .box-shadow(0 3px 9px rgba(0,0,0,.5));
   background-clip: padding-box;
   // Remove focus outline from opened modal
   outline: 0;
@@ -77,7 +62,7 @@
 // Modal header
 // Top section of the modal w/ title and dismiss
 .modal-header {
-  padding: @modal-title-padding;
+  padding: var(--modal-title-padding);
   border-bottom: 1px solid @modal-header-border-color;
   &:extend(.clearfix all);
 }
@@ -89,19 +74,19 @@
 // Title text within header
 .modal-title {
   margin: 0;
-  line-height: @modal-title-line-height;
+  line-height: var(--modal-title-line-height);
 }
 
 // Modal body
 // Where all modal content resides (sibling of .modal-header and .modal-footer)
 .modal-body {
   position: relative;
-  padding: @modal-inner-padding;
+  padding: var(--modal-inner-padding);
 }
 
 // Footer (for actions)
 .modal-footer {
-  padding: @modal-inner-padding;
+  padding: var(--modal-inner-padding);
   text-align: right; // right align buttons
   border-top: 1px solid @modal-footer-border-color;
   &:extend(.clearfix all); // clear it in case folks use .pull-* classes on buttons
@@ -120,25 +105,12 @@
     margin-left: 0;
   }
 }
-
-// Measure scrollbar width for padding body during modal show/hide
-.modal-scrollbar-measure {
-  position: absolute;
-  top: -9999px;
-  width: 50px;
-  height: 50px;
-  overflow: scroll;
-}
-
 // Scale up the modal
 @media (min-width: @screen-sm-min) {
   // Automatically set modal's width for larger viewports
   .modal-dialog {
     width: @modal-md;
-    margin: 30px auto;
-  }
-  .modal-content {
-    .box-shadow(0 5px 15px rgba(0,0,0,.5));
+    margin: var(--30px) auto;
   }
 
   // Modal sizes
diff --git a/frontend/less/espo/bootstrap/navbar.less b/frontend/less/espo/bootstrap/navbar.less
index 3726b2bcdb..a28c6c6bf4 100644
--- a/frontend/less/espo/bootstrap/navbar.less
+++ b/frontend/less/espo/bootstrap/navbar.less
@@ -10,16 +10,11 @@
 
 .navbar {
   position: relative;
-  min-height: @navbar-height; // Ensure a navbar always shows (e.g., without a .navbar-brand in collapsed mode)
-  margin-bottom: @navbar-margin-bottom;
-  //border: 1px solid transparent;
+  min-height: var(--navbar-height); // Ensure a navbar always shows (e.g., without a .navbar-brand in collapsed mode)
+  margin-bottom: var(--line-height-computed);
 
   // Prevent floats from breaking the navbar
   &:extend(.clearfix all);
-
-  @media (min-width: @grid-float-breakpoint) {
-    border-radius: @navbar-border-radius;
-  }
 }
 
 
@@ -49,8 +44,6 @@
 
 .navbar-collapse {
   overflow-x: visible;
-  padding-right: @navbar-padding-horizontal;
-  padding-left:  @navbar-padding-horizontal;
   border-top: 1px solid transparent;
   box-shadow: inset 0 1px 0 rgba(255,255,255,.1);
   &:extend(.clearfix all);
@@ -75,97 +68,15 @@
     &.in {
       overflow-y: visible;
     }
-
-    // Undo the collapse side padding for navbars with containers to ensure
-    // alignment of right-aligned contents.
-    .navbar-fixed-top &,
-    .navbar-static-top &,
-    .navbar-fixed-bottom & {
-      padding-left: 0;
-      padding-right: 0;
-    }
   }
 }
 
-.navbar-fixed-top,
-.navbar-fixed-bottom {
-  .navbar-collapse {
-    max-height: @navbar-collapse-max-height;
-
-    @media (max-device-width: @screen-xs-min) and (orientation: landscape) {
-      max-height: 200px;
-    }
-  }
-}
-
-
-// Both navbar header and collapse
-//
-// When a container is present, change the behavior of the header and collapse.
-
-.container,
-.container-fluid {
-  > .navbar-header,
-  > .navbar-collapse {
-    margin-right: -@navbar-padding-horizontal;
-    margin-left:  -@navbar-padding-horizontal;
-
-    @media (min-width: @grid-float-breakpoint) {
-      margin-right: 0;
-      margin-left:  0;
-    }
-  }
-}
-
-
-//
-// Navbar alignment options
-//
-// Display the navbar across the entirety of the page or fixed it to the top or
-// bottom of the page.
-
-// Static top (unfixed, but 100% wide) navbar
-.navbar-static-top {
-  z-index: @zindex-navbar;
-  border-width: 0 0 1px;
-
-  @media (min-width: @grid-float-breakpoint) {
-    border-radius: 0;
-  }
-}
-
-// Fix the top/bottom navbars when screen real estate supports it
-.navbar-fixed-top,
-.navbar-fixed-bottom {
-  position: fixed;
-  right: 0;
-  left: 0;
-  z-index: @zindex-navbar-fixed;
-
-  // Undo the rounded corners
-  @media (min-width: @grid-float-breakpoint) {
-    border-radius: 0;
-  }
-}
-.navbar-fixed-top {
-  top: 0;
-  border-width: 0 0 1px;
-}
-.navbar-fixed-bottom {
-  bottom: 0;
-  margin-bottom: 0; // override .navbar defaults
-  border-width: 1px 0 0;
-}
-
-
 // Brand/project name
 
 .navbar-brand {
   float: left;
-  padding: @navbar-padding-vertical @navbar-padding-horizontal;
-  font-size: @font-size-large;
-  line-height: @line-height-computed;
-  height: @navbar-height;
+  line-height: var(--line-height-computed);
+  height: var(--navbar-height);
 
   &:hover,
   &:focus {
@@ -175,13 +86,6 @@
   > img {
     display: block;
   }
-
-  @media (min-width: @grid-float-breakpoint) {
-    .navbar > .container &,
-    .navbar > .container-fluid & {
-      margin-left: -@navbar-padding-horizontal;
-    }
-  }
 }
 
 
@@ -193,13 +97,10 @@
 .navbar-toggle {
   position: relative;
   float: right;
-  margin-right: @navbar-padding-horizontal;
   padding: 9px 10px;
-  .navbar-vertical-align(34px);
   background-color: transparent;
   background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
   border: 1px solid transparent;
-  border-radius: @border-radius-base;
 
   // We remove the `outline` here, but later compensate by attaching `:hover`
   // styles to `:focus`.
@@ -230,12 +131,11 @@
 // the nav the full height of the horizontal nav (above 768px).
 
 .navbar-nav {
-  margin: (@navbar-padding-vertical / 2) -@navbar-padding-horizontal;
 
   > li > a {
     padding-top:    10px;
     padding-bottom: 10px;
-    line-height: @line-height-computed;
+    line-height: var(--line-height-computed);
   }
 
   @media (max-width: @grid-float-breakpoint-max) {
@@ -253,7 +153,7 @@
         padding: 5px 15px 5px 25px;
       }
       > li > a {
-        line-height: @line-height-computed;
+        line-height: var(--line-height-computed);
         &:hover,
         &:focus {
           background-image: none;
@@ -270,8 +170,8 @@
     > li {
       float: left;
       > a {
-        padding-top:    @navbar-padding-vertical;
-        padding-bottom: @navbar-padding-vertical;
+        padding-top: var(--navbar-padding-vertical);
+        padding-bottom: var(--navbar-padding-vertical);
       }
     }
   }
@@ -284,14 +184,6 @@
 // our navbars.
 
 .navbar-form {
-  margin-left: -@navbar-padding-horizontal;
-  margin-right: -@navbar-padding-horizontal;
-  padding: 10px @navbar-padding-horizontal;
-  border-top: 1px solid transparent;
-  border-bottom: 1px solid transparent;
-  @shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.1);
-  .box-shadow(@shadow);
-
   // Mixin behavior for optimum display
   .form-inline();
 
@@ -305,9 +197,6 @@
     }
   }
 
-  // Vertically center in expanded, horizontal navbar
-  .navbar-vertical-align(@input-height-base);
-
   // Undo 100% width for pull classes
   @media (min-width: @grid-float-breakpoint) {
     width: auto;
@@ -328,44 +217,6 @@
   margin-top: 0;
   .border-top-radius(0);
 }
-// Menu position and menu caret support for dropups via extra dropup class
-.navbar-fixed-bottom .navbar-nav > li > .dropdown-menu {
-  margin-bottom: 0;
-  .border-top-radius(@navbar-border-radius);
-  .border-bottom-radius(0);
-}
-
-
-// Buttons in navbars
-//
-// Vertically center a button within a navbar (when *not* in a form).
-
-.navbar-btn {
-  .navbar-vertical-align(@input-height-base);
-
-  &.btn-sm {
-    .navbar-vertical-align(@input-height-small);
-  }
-  &.btn-xs {
-    .navbar-vertical-align(22);
-  }
-}
-
-
-// Text in navbars
-//
-// Add a class to make any element properly align itself vertically within the navbars.
-
-.navbar-text {
-  .navbar-vertical-align(@line-height-computed);
-
-  @media (min-width: @grid-float-breakpoint) {
-    float: left;
-    margin-left: @navbar-padding-horizontal;
-    margin-right: @navbar-padding-horizontal;
-  }
-}
-
 
 // Component alignment
 //
@@ -379,7 +230,6 @@
   .navbar-left  { .pull-left(); }
   .navbar-right {
     .pull-right();
-    margin-right: -@navbar-padding-horizontal;
 
     ~ .navbar-right {
       margin-right: 0;
@@ -405,10 +255,6 @@
     }
   }
 
-  .navbar-text {
-    color: @navbar-default-color;
-  }
-
   .navbar-nav {
     > li > a {
       color: @navbar-default-link-color;
@@ -539,10 +385,6 @@
     }
   }
 
-  .navbar-text {
-    color: @navbar-inverse-color;
-  }
-
   .navbar-nav {
     > li > a {
       color: @navbar-inverse-link-color;
diff --git a/frontend/less/espo/bootstrap/navs.less b/frontend/less/espo/bootstrap/navs.less
index a3d11b1362..8835ba7de2 100644
--- a/frontend/less/espo/bootstrap/navs.less
+++ b/frontend/less/espo/bootstrap/navs.less
@@ -83,9 +83,8 @@
     // Actual tabs (as links)
     > a {
       margin-right: 2px;
-      line-height: @line-height-base;
+      line-height: var(--line-height-base);
       border: 1px solid transparent;
-      border-radius: @border-radius-base @border-radius-base 0 0;
       &:hover {
         border-color: @nav-tabs-link-hover-border-color @nav-tabs-link-hover-border-color @nav-tabs-border-color;
       }
@@ -118,10 +117,6 @@
   > li {
     float: left;
 
-    // Links rendered as pills
-    > a {
-      border-radius: @nav-pills-border-radius;
-    }
     + li {
       margin-left: 2px;
     }
@@ -193,7 +188,6 @@
   > li > a {
     // Override margin from .nav-tabs
     margin-right: 0;
-    border-radius: @border-radius-base;
   }
 
   > .active > a,
@@ -205,7 +199,6 @@
   @media (min-width: @screen-sm-min) {
     > li > a {
       border-bottom: 1px solid @nav-tabs-justified-link-border-color;
-      border-radius: @border-radius-base @border-radius-base 0 0;
     }
     > .active > a,
     > .active > a:hover,
diff --git a/frontend/less/espo/bootstrap/pager.less b/frontend/less/espo/bootstrap/pager.less
index 41abaaadc5..4fa72759be 100644
--- a/frontend/less/espo/bootstrap/pager.less
+++ b/frontend/less/espo/bootstrap/pager.less
@@ -5,7 +5,7 @@
 
 .pager {
   padding-left: 0;
-  margin: @line-height-computed 0;
+  margin: var(--line-height-computed) 0;
   list-style: none;
   text-align: center;
   &:extend(.clearfix all);
diff --git a/frontend/less/espo/bootstrap/panels.less b/frontend/less/espo/bootstrap/panels.less
index 9a6324755b..2edf4c2367 100644
--- a/frontend/less/espo/bootstrap/panels.less
+++ b/frontend/less/espo/bootstrap/panels.less
@@ -5,7 +5,7 @@
 
 // Base class
 .panel {
-  margin-bottom: @line-height-computed;
+  margin-bottom: var(--line-height-computed);
   background-color: @panel-bg;
   border: 1px solid transparent;
   //border-radius: @panel-border-radius;
@@ -14,13 +14,12 @@
 
 // Panel contents
 .panel-body {
-  padding: @panel-body-padding;
   &:extend(.clearfix all);
 }
 
 // Optional heading
 .panel-heading {
-  padding: @panel-heading-padding;
+  padding: var(--6px) var(--10px);
   border-bottom: 1px solid transparent;
   //.border-top-radius((@panel-border-radius));
 
@@ -33,7 +32,6 @@
 .panel-title {
   margin-top: 0;
   margin-bottom: 0;
-  font-size: ceil((@font-size-base * 1.125));
   color: inherit;
 
   > a,
@@ -47,7 +45,7 @@
 
 // Optional footer (stays gray in every modifier class)
 .panel-footer {
-  padding: @panel-footer-padding;
+  padding: var(--6px) var(--10px);
   background-color: @panel-footer-bg;
   border-top: 1px solid @panel-inner-border;
   //.border-bottom-radius((@panel-border-radius - 1));
@@ -111,56 +109,8 @@
   > .table-responsive > .table,
   > .panel-collapse > .table {
     margin-bottom: 0;
-
-    caption {
-      padding-left: @panel-body-padding;
-      padding-right: @panel-body-padding;
-    }
   }
-  // Add border top radius for first one
-  > .table:first-child,
-  > .table-responsive:first-child > .table:first-child {
-    //.border-top-radius((@panel-border-radius));
 
-    > thead:first-child,
-    > tbody:first-child {
-      > tr:first-child {
-        //border-top-left-radius: (@panel-border-radius);
-        //border-top-right-radius: (@panel-border-radius);
-
-        td:first-child,
-        th:first-child {
-          //border-top-left-radius: (@panel-border-radius);
-        }
-        td:last-child,
-        th:last-child {
-          //border-top-right-radius: (@panel-border-radius);
-        }
-      }
-    }
-  }
-  // Add border bottom radius for last one
-  > .table:last-child,
-  > .table-responsive:last-child > .table:last-child {
-    //.border-bottom-radius((@panel-border-radius));
-
-    > tbody:last-child,
-    > tfoot:last-child {
-      > tr:last-child {
-        //border-bottom-left-radius: (@panel-border-radius);
-        //border-bottom-right-radius: (@panel-border-radius);
-
-        td:first-child,
-        th:first-child {
-          //border-bottom-left-radius: (@panel-border-radius);
-        }
-        td:last-child,
-        th:last-child {
-          //border-bottom-right-radius: (@panel-border-radius);
-        }
-      }
-    }
-  }
   > .panel-body + .table,
   > .panel-body + .table-responsive,
   > .table + .panel-body,
@@ -220,7 +170,7 @@
 // the help of our collapse JavaScript plugin.
 
 .panel-group {
-  margin-bottom: @line-height-computed;
+  margin-bottom: var(--line-height-computed);
 
   // Tighten up margin so it's only between panels
   .panel {
diff --git a/frontend/less/espo/bootstrap/popovers.less b/frontend/less/espo/bootstrap/popovers.less
index f01cc8fe30..39efb9dc09 100644
--- a/frontend/less/espo/bootstrap/popovers.less
+++ b/frontend/less/espo/bootstrap/popovers.less
@@ -14,13 +14,11 @@
   // Our parent element can be arbitrary since popovers are by default inserted as a sibling of their target element.
   // So reset our font and text properties to avoid inheriting weird values.
   .reset-text();
-  font-size: @font-size-base;
+  font-size: var(--font-size-base);
 
   background-color: @popover-bg;
   background-clip: padding-box;
-  border: 1px solid @popover-fallback-border-color;
   border: 1px solid @popover-border-color;
-  border-radius: @border-radius-large;
   .box-shadow(0 5px 10px rgba(0,0,0,.2));
 
   // Offset the popover to account for the popover arrow
@@ -33,10 +31,7 @@
 .popover-title {
   margin: 0; // reset heading margin
   padding: 8px 14px;
-  font-size: @font-size-base;
-  //background-color: @popover-title-bg;
-  //border-bottom: 1px solid var(--white-color-5);
-  //border-radius: (@border-radius-large - 1) (@border-radius-large - 1) 0 0;
+  font-size: var(--font-size-base);
 }
 
 .popover-content {
diff --git a/frontend/less/espo/bootstrap/progress-bars.less b/frontend/less/espo/bootstrap/progress-bars.less
index 8868a1feef..7c29e74cc3 100644
--- a/frontend/less/espo/bootstrap/progress-bars.less
+++ b/frontend/less/espo/bootstrap/progress-bars.less
@@ -25,10 +25,9 @@
 // Outer container
 .progress {
   overflow: hidden;
-  height: @line-height-computed;
-  margin-bottom: @line-height-computed;
+  height: var(--line-height-computed);
+  margin-bottom: var(--line-height-computed);
   background-color: @progress-bg;
-  border-radius: @progress-border-radius;
   .box-shadow(inset 0 1px 2px rgba(0,0,0,.1));
 }
 
@@ -37,8 +36,8 @@
   float: left;
   width: 0%;
   height: 100%;
-  font-size: @font-size-small;
-  line-height: @line-height-computed;
+  font-size: var(--font-size-small);
+  line-height: var(--line-height-computed);
   color: @progress-bar-color;
   text-align: center;
   background-color: @progress-bar-bg;
diff --git a/frontend/less/espo/bootstrap/scaffolding.less b/frontend/less/espo/bootstrap/scaffolding.less
index baae1feaed..fa07770f32 100644
--- a/frontend/less/espo/bootstrap/scaffolding.less
+++ b/frontend/less/espo/bootstrap/scaffolding.less
@@ -20,14 +20,13 @@
 // Body reset
 
 html {
-  font-size: 10px;
   -webkit-tap-highlight-color: rgba(0,0,0,0);
 }
 
 body {
   font-family: @font-family-base;
-  font-size: @font-size-base;
-  line-height: @line-height-base;
+  font-size: var(--font-size-base);
+  line-height: var(--line-height-base);
   color: @text-color;
   background-color: @body-bg;
 }
@@ -83,26 +82,6 @@ img {
   .img-responsive();
 }
 
-// Rounded corners
-.img-rounded {
-  border-radius: @border-radius-large;
-}
-
-// Image thumbnails
-//
-// Heads up! This is mixin-ed into thumbnails.less for `.thumbnail`.
-.img-thumbnail {
-  padding: @thumbnail-padding;
-  line-height: @line-height-base;
-  background-color: @thumbnail-bg;
-  border: 1px solid @thumbnail-border;
-  border-radius: @thumbnail-border-radius;
-  .transition(all .2s ease-in-out);
-
-  // Keep them at most 100% wide
-  .img-responsive(inline-block);
-}
-
 // Perfect circle
 .img-circle {
   border-radius: 50%; // set radius in percents
@@ -112,8 +91,8 @@ img {
 // Horizontal rules
 
 hr {
-  margin-top:    @line-height-computed;
-  margin-bottom: @line-height-computed;
+  margin-top: var(--line-height-computed);
+  margin-bottom: var(--line-height-computed);
   border: 0;
   border-top: 1px solid @hr-border;
 }
diff --git a/frontend/less/espo/bootstrap/tables.less b/frontend/less/espo/bootstrap/tables.less
index 2075a4cb58..a223a2fa8d 100644
--- a/frontend/less/espo/bootstrap/tables.less
+++ b/frontend/less/espo/bootstrap/tables.less
@@ -7,8 +7,8 @@ table {
   //background-color: @table-bg;
 }
 caption {
-  padding-top: @table-cell-padding;
-  padding-bottom: @table-cell-padding;
+  padding-top: var(--table-cell-padding);
+  padding-bottom: var(--table-cell-padding);
   color: @text-muted;
   text-align: left;
 }
@@ -22,7 +22,7 @@ th {
 .table {
   width: 100%;
   max-width: 100%;
-  margin-bottom: @line-height-computed;
+  margin-bottom: var(--line-height-computed);
   // Cells
   > thead,
   > tbody,
@@ -30,8 +30,8 @@ th {
     > tr {
       > th,
       > td {
-        padding: @table-cell-padding;
-        line-height: @line-height-base;
+        padding: var(--table-cell-padding);
+        line-height: var(--line-height-base);
         vertical-align: top;
         border-top: 1px solid @table-border-color;
       }
@@ -64,23 +64,6 @@ th {
   }
 }
 
-
-// Condensed table w/ half padding
-
-.table-condensed {
-  > thead,
-  > tbody,
-  > tfoot {
-    > tr {
-      > th,
-      > td {
-        padding: @table-condensed-cell-padding;
-      }
-    }
-  }
-}
-
-
 // Bordered version
 //
 // Add borders all around the table and between all the columns.
@@ -175,7 +158,7 @@ table {
 
   @media screen and (max-width: @screen-xs-max) {
     width: 100%;
-    margin-bottom: (@line-height-computed * 0.75);
+    margin-bottom: calc(var(--line-height-computed) * 0.75);
     overflow-y: hidden;
     -ms-overflow-style: -ms-autohiding-scrollbar;
     border: 1px solid @table-border-color;
diff --git a/frontend/less/espo/bootstrap/theme.less b/frontend/less/espo/bootstrap/theme.less
index 228652dc05..b65222021d 100644
--- a/frontend/less/espo/bootstrap/theme.less
+++ b/frontend/less/espo/bootstrap/theme.less
@@ -96,16 +96,6 @@
 .btn-danger  { .btn-styles(@btn-danger-bg); }
 
 
-//
-// Images
-// --------------------------------------------------
-
-.thumbnail,
-.img-thumbnail {
-  .box-shadow(0 1px 2px rgba(0,0,0,.075));
-}
-
-
 //
 // Dropdowns
 // --------------------------------------------------
@@ -131,7 +121,6 @@
 .navbar-default {
   #gradient > .vertical(@start-color: lighten(@navbar-default-bg, 10%); @end-color: @navbar-default-bg);
   .reset-filter(); // Remove gradient in IE<10 to fix bug where dropdowns don't get triggered
-  border-radius: @navbar-border-radius;
   @shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 1px 5px rgba(0,0,0,.075);
   .box-shadow(@shadow);
 
@@ -150,7 +139,6 @@
 .navbar-inverse {
   #gradient > .vertical(@start-color: lighten(@navbar-inverse-bg, 10%); @end-color: @navbar-inverse-bg);
   .reset-filter(); // Remove gradient in IE<10 to fix bug where dropdowns don't get triggered; see https://github.com/twbs/bootstrap/issues/10257
-  border-radius: @navbar-border-radius;
   .navbar-nav > .open > a,
   .navbar-nav > .active > a {
     //#gradient > .vertical(@start-color: @navbar-inverse-link-active-bg; @end-color: lighten(@navbar-inverse-link-active-bg, 2.5%));
@@ -163,13 +151,6 @@
   }
 }
 
-// Undo rounded corners in static and fixed navbars
-.navbar-static-top,
-.navbar-fixed-top,
-.navbar-fixed-bottom {
-  border-radius: 0;
-}
-
 // Fix active state of dropdown items in collapsed mode
 @media (max-width: @grid-float-breakpoint-max) {
   .navbar .navbar-nav .open .dropdown-menu > .active > a {
@@ -240,7 +221,6 @@
 // --------------------------------------------------
 
 .list-group {
-  border-radius: @border-radius-base;
   .box-shadow(0 1px 2px rgba(0,0,0,.075));
 }
 .list-group-item.active,
diff --git a/frontend/less/espo/bootstrap/thumbnails.less b/frontend/less/espo/bootstrap/thumbnails.less
deleted file mode 100644
index 0713e67d00..0000000000
--- a/frontend/less/espo/bootstrap/thumbnails.less
+++ /dev/null
@@ -1,36 +0,0 @@
-//
-// Thumbnails
-// --------------------------------------------------
-
-
-// Mixin and adjust the regular image class
-.thumbnail {
-  display: block;
-  padding: @thumbnail-padding;
-  margin-bottom: @line-height-computed;
-  line-height: @line-height-base;
-  background-color: @thumbnail-bg;
-  border: 1px solid @thumbnail-border;
-  border-radius: @thumbnail-border-radius;
-  .transition(border .2s ease-in-out);
-
-  > img,
-  a > img {
-    &:extend(.img-responsive);
-    margin-left: auto;
-    margin-right: auto;
-  }
-
-  // Add a hover state for linked versions only
-  a&:hover,
-  a&:focus,
-  a&.active {
-    border-color: @link-color;
-  }
-
-  // Image captions
-  .caption {
-    padding: @thumbnail-caption-padding;
-    color: @thumbnail-caption-color;
-  }
-}
diff --git a/frontend/less/espo/bootstrap/tooltip.less b/frontend/less/espo/bootstrap/tooltip.less
index e9410a861a..99d60e5680 100644
--- a/frontend/less/espo/bootstrap/tooltip.less
+++ b/frontend/less/espo/bootstrap/tooltip.less
@@ -11,7 +11,7 @@
   // Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element.
   // So reset our font and text properties to avoid inheriting weird values.
   .reset-text();
-  font-size: @font-size-small;
+  font-size: var(--font-size-small);
 
   .opacity(0);
 
diff --git a/frontend/less/espo/bootstrap/type.less b/frontend/less/espo/bootstrap/type.less
index 80d12fe3ca..11f7f9a654 100644
--- a/frontend/less/espo/bootstrap/type.less
+++ b/frontend/less/espo/bootstrap/type.less
@@ -8,7 +8,6 @@
 
 h1, h2, h3, h4, h5, h6,
 .h1, .h2, .h3, .h4, .h5, .h6 {
-  font-family: @headings-font-family;
   font-weight: @headings-font-weight;
   line-height: @headings-line-height;
   color: @headings-color;
@@ -24,8 +23,8 @@ h1, h2, h3, h4, h5, h6,
 h1, .h1,
 h2, .h2,
 h3, .h3 {
-  margin-top: @line-height-computed;
-  margin-bottom: (@line-height-computed / 2);
+  margin-top: var(--line-height-computed);
+  margin-bottom: calc(var(--line-height-computed) / 2);
 
   small,
   .small {
@@ -35,8 +34,8 @@ h3, .h3 {
 h4, .h4,
 h5, .h5,
 h6, .h6 {
-  margin-top: (@line-height-computed / 2);
-  margin-bottom: (@line-height-computed / 2);
+  margin-top: calc(var(--line-height-computed) / 2);
+  margin-bottom: calc(var(--line-height-computed) / 2);
 
   small,
   .small {
@@ -44,40 +43,12 @@ h6, .h6 {
   }
 }
 
-h1, .h1 { font-size: @font-size-h1; }
-h2, .h2 { font-size: @font-size-h2; }
-h3, .h3 { font-size: @font-size-h3; }
-h4, .h4 { font-size: @font-size-h4; }
-h5, .h5 { font-size: @font-size-h5; }
-h6, .h6 { font-size: @font-size-h6; }
-
 
 // Body text
 // -------------------------
 
 p {
-  margin: 0 0 (@line-height-computed / 2);
-}
-
-.lead {
-  margin-bottom: @line-height-computed;
-  font-size: floor((@font-size-base * 1.15));
-  font-weight: 300;
-  line-height: 1.4;
-
-  @media (min-width: @screen-sm-min) {
-    font-size: (@font-size-base * 1.5);
-  }
-}
-
-
-// Emphasis & misc
-// -------------------------
-
-// Ex: (12px small font / 14px base font) * 100% = about 85%
-small,
-.small {
-  font-size: floor((100% * @font-size-small / @font-size-base));
+  margin: 0 0 var(--line-height-computed-half);
 }
 
 mark,
@@ -108,8 +79,8 @@ mark,
 // -------------------------
 
 .page-header {
-  padding-bottom: ((@line-height-computed / 2) - 1);
-  margin: (@line-height-computed * 2) 0 @line-height-computed;
+  padding-bottom: calc(var(--line-height-computed-half) - 1px);
+  margin: calc(var(--line-height-computed) * 2) 0 var(--line-height-computed);
   border-bottom: 1px solid @page-header-border-color;
 }
 
@@ -121,7 +92,7 @@ mark,
 ul,
 ol {
   margin-top: 0;
-  margin-bottom: (@line-height-computed / 2);
+  margin-bottom: var(--line-height-computed-half);
   ul,
   ol {
     margin-bottom: 0;
@@ -151,11 +122,11 @@ ol {
 // Description Lists
 dl {
   margin-top: 0; // Remove browser default
-  margin-bottom: @line-height-computed;
+  margin-bottom: var(--line-height-computed);
 }
 dt,
 dd {
-  line-height: @line-height-base;
+  line-height: var(--line-height-base);
 }
 dt {
   font-weight: bold;
@@ -206,9 +177,9 @@ abbr[data-original-title] {
 
 // Blockquotes
 blockquote {
-  padding: (@line-height-computed / 2) @line-height-computed;
-  margin: 0 0 @line-height-computed;
-  font-size: @blockquote-font-size;
+  padding: var(--line-height-computed-half) var(--line-height-computed);
+  margin: 0 0 var(--line-height-computed);
+  font-size: calc(var(--font-size-base) * 1.25);
   border-left: 5px solid @blockquote-border-color;
 
   p,
@@ -226,7 +197,7 @@ blockquote {
   .small {
     display: block;
     font-size: 80%; // back to default font-size
-    line-height: @line-height-base;
+    line-height: var(--line-height-base);
     color: @blockquote-small-color;
 
     &:before {
@@ -259,7 +230,7 @@ blockquote.pull-right {
 
 // Addresses
 address {
-  margin-bottom: @line-height-computed;
+  margin-bottom: var(--line-height-computed);
   font-style: normal;
-  line-height: @line-height-base;
+  line-height: var(--line-height-base);
 }
diff --git a/frontend/less/espo/bootstrap/variables.less b/frontend/less/espo/bootstrap/variables.less
index f3fa7ec3cd..861a43ac93 100644
--- a/frontend/less/espo/bootstrap/variables.less
+++ b/frontend/less/espo/bootstrap/variables.less
@@ -48,26 +48,8 @@
 @font-family-monospace:   Menlo, Monaco, Consolas, "Courier New", monospace;
 @font-family-base:        @font-family-sans-serif;
 
-@font-size-base:          14px;
-@font-size-large:         ceil((@font-size-base * 1.25)); // ~18px
-@font-size-small:         ceil((@font-size-base * 0.85)); // ~12px
-
-@font-size-h1:            floor((@font-size-base * 2.6)); // ~36px
-@font-size-h2:            floor((@font-size-base * 2.15)); // ~30px
-@font-size-h3:            ceil((@font-size-base * 1.7)); // ~24px
-@font-size-h4:            ceil((@font-size-base * 1.25)); // ~18px
-@font-size-h5:            @font-size-base;
-@font-size-h6:            ceil((@font-size-base * 0.85)); // ~12px
-
-//** Unit-less `line-height` for use in components like buttons.
-@line-height-base:        1.428571429; // 20/14
-//** Computed "line-height" (`font-size` * `line-height`) for use with `margin`, `padding`, etc.
-@line-height-computed:    floor((@font-size-base * @line-height-base)); // ~20px
-
 //** By default, this inherits from the `<body>`.
-@headings-font-family:    inherit;
 @headings-font-weight:    500;
-@headings-line-height:    1.1;
 @headings-color:          inherit;
 
 
@@ -83,49 +65,21 @@
 @icon-font-svg-id:        "glyphicons_halflingsregular";
 
 
-//== Components
-//
-//## Define common padding and border radius sizes and more. Values based on 14px text and 1.428 line-height (~20px to start).
-
-@padding-base-vertical:     6px;
-@padding-base-horizontal:   12px;
-
-@padding-large-vertical:    10px;
-@padding-large-horizontal:  16px;
-
-@padding-small-vertical:    5px;
-@padding-small-horizontal:  10px;
-
-@padding-xs-vertical:       1px;
-@padding-xs-horizontal:     5px;
-
-@line-height-large:         1.3333333; // extra decimals for Win 8.1 Chrome
-@line-height-small:         1.5;
-
-@border-radius-base:        4px;
-@border-radius-large:       6px;
-@border-radius-small:       3px;
-
 //** Global color for active items (e.g., navs or dropdowns).
 @component-active-color:    #fff;
 //** Global background color for active items (e.g., navs or dropdowns).
 @component-active-bg:       @brand-primary;
 
 //** Width of the `border` for generating carets that indicate dropdowns.
-@caret-width-base:          4px;
+@caret-width-base: var(--4px);
 //** Carets increase slightly in size for larger components.
-@caret-width-large:         5px;
+@caret-width-large: var(--5px);
 
 
 //== Tables
 //
 //## Customizes the `.table` component with basic values, each used across all table variations.
 
-//** Padding for `<th>`s and `<td>`s.
-@table-cell-padding:            8px;
-//** Padding for cells in `.table-condensed`.
-@table-condensed-cell-padding:  5px;
-
 //** Default background color used for all tables.
 @table-bg:                      transparent;
 //** Background color used for `.table-striped`.
@@ -170,12 +124,6 @@
 
 @btn-link-disabled-color:        @gray-light;
 
-// Allows for customizing button radius independently from global border radius
-@btn-border-radius-base:         @border-radius-base;
-@btn-border-radius-large:        @border-radius-large;
-@btn-border-radius-small:        @border-radius-small;
-
-
 //== Forms
 //
 //##
@@ -190,31 +138,12 @@
 //** `<input>` border color
 @input-border:                   #ccc;
 
-// TODO: Rename `@input-border-radius` to `@input-border-radius-base` in v4
-//** Default `.form-control` border radius
-// This has no effect on `<select>`s in some browsers, due to the limited stylability of `<select>`s in CSS.
-@input-border-radius:            @border-radius-base;
-//** Large `.form-control` border radius
-@input-border-radius-large:      @border-radius-large;
-//** Small `.form-control` border radius
-@input-border-radius-small:      @border-radius-small;
-
 //** Border color for inputs on focus
 @input-border-focus:             #66afe9;
 
 //** Placeholder text color
 @input-color-placeholder:        #999;
 
-//** Default `.form-control` height
-@input-height-base:              (@line-height-computed + (@padding-base-vertical * 2) + 2);
-//** Large `.form-control` height
-@input-height-large:             (ceil(@font-size-large * @line-height-large) + (@padding-large-vertical * 2) + 2);
-//** Small `.form-control` height
-@input-height-small:             (floor(@font-size-small * @line-height-small) + (@padding-small-vertical * 2) + 2);
-
-//** `.form-group` margin
-@form-group-margin-bottom:       15px;
-
 @legend-color:                   @gray-dark;
 @legend-border-color:            #e5e5e5;
 
@@ -317,51 +246,19 @@
 @screen-md-max:              (@screen-lg-min - 1);
 
 
-//== Grid system
-//
-//## Define your custom responsive grid.
+@grid-columns: 12;
 
-//** Number of columns in the grid.
-@grid-columns:              12;
-//** Padding between columns. Gets divided in half for the left and right.
-@grid-gutter-width:         30px;
-// Navbar collapse
 //** Point at which the navbar becomes uncollapsed.
 @grid-float-breakpoint:     @screen-sm-min;
 //** Point at which the navbar begins collapsing.
 @grid-float-breakpoint-max: (@grid-float-breakpoint - 1);
 
 
-//== Container sizes
-//
-//## Define the maximum width of `.container` for different screen sizes.
-
-// Small screen / tablet
-@container-tablet:             (720px + @grid-gutter-width);
-//** For `@screen-sm-min` and up.
-@container-sm:                 @container-tablet;
-
-// Medium screen / desktop
-@container-desktop:            (940px + @grid-gutter-width);
-//** For `@screen-md-min` and up.
-@container-md:                 @container-desktop;
-
-// Large screen / wide desktop
-@container-large-desktop:      (1140px + @grid-gutter-width);
-//** For `@screen-lg-min` and up.
-@container-lg:                 @container-large-desktop;
-
 
 //== Navbar
 //
 //##
 
-// Basics of a navbar
-@navbar-height:                    50px;
-@navbar-margin-bottom:             @line-height-computed;
-@navbar-border-radius:             @border-radius-base;
-@navbar-padding-horizontal:        floor((@grid-gutter-width / 2));
-@navbar-padding-vertical:          ((@navbar-height - @line-height-computed) / 2);
 @navbar-collapse-max-height:       340px;
 
 @navbar-default-color:             #777;
@@ -438,7 +335,6 @@
 @nav-tabs-justified-active-link-border-color:     @body-bg;
 
 //== Pills
-@nav-pills-border-radius:                   @border-radius-base;
 @nav-pills-active-link-hover-bg:            @component-active-bg;
 @nav-pills-active-link-hover-color:         @component-active-color;
 
@@ -471,27 +367,12 @@
 @pager-bg:                             @pagination-bg;
 @pager-border:                         @pagination-border;
 @pager-border-radius:                  15px;
-
 @pager-hover-bg:                       @pagination-hover-bg;
-
 @pager-active-bg:                      @pagination-active-bg;
 @pager-active-color:                   @pagination-active-color;
-
 @pager-disabled-color:                 @pagination-disabled-color;
 
 
-//== Jumbotron
-//
-//##
-
-@jumbotron-padding:              30px;
-@jumbotron-color:                inherit;
-@jumbotron-bg:                   @gray-lighter;
-@jumbotron-heading-color:        inherit;
-@jumbotron-font-size:            ceil((@font-size-base * 1.5));
-@jumbotron-heading-font-size:    ceil((@font-size-base * 4.5));
-
-
 //== Form states and alerts
 //
 //## Define colors for form feedback states and, by default, alerts.
@@ -587,13 +468,6 @@
 //
 //##
 
-//** Padding applied to the modal body
-@modal-inner-padding:         15px;
-
-//** Padding applied to the modal title
-@modal-title-padding:         15px;
-//** Modal title line-height
-@modal-title-line-height:     @line-height-base;
 
 //** Background color of modal content area
 @modal-content-bg:                             #fff;
@@ -621,7 +495,6 @@
 //## Define alert colors, border radius, and padding.
 
 @alert-padding:               15px;
-@alert-border-radius:         @border-radius-base;
 @alert-link-font-weight:      bold;
 
 @alert-success-bg:            @state-success-bg;
@@ -649,8 +522,6 @@
 @progress-bg:                 #f5f5f5;
 //** Progress bar text color
 @progress-bar-color:          #fff;
-//** Variable for setting rounded corners on progress bar.
-@progress-border-radius:      @border-radius-base;
 
 //** Default progress bar color
 @progress-bar-bg:             @brand-primary;
@@ -672,8 +543,6 @@
 @list-group-bg:                 #fff;
 //** `.list-group-item` border color
 @list-group-border:             #ddd;
-//** List group border radius
-@list-group-border-radius:      @border-radius-base;
 
 //** Background color of single list items on hover
 @list-group-hover-bg:           #f5f5f5;
@@ -703,10 +572,6 @@
 //##
 
 @panel-bg:                    #fff;
-@panel-body-padding:          15px;
-@panel-heading-padding:       10px 15px;
-@panel-footer-padding:        @panel-heading-padding;
-//@panel-border-radius:         @border-radius-base;
 
 //** Border color for elements within panels
 @panel-inner-border:          #ddd;
@@ -737,25 +602,6 @@
 @panel-danger-heading-bg:     @state-danger-bg;
 
 
-//== Thumbnails
-//
-//##
-
-//** Padding around the thumbnail image
-@thumbnail-padding:           4px;
-//** Thumbnail background color
-@thumbnail-bg:                @body-bg;
-//** Thumbnail border color
-@thumbnail-border:            #ddd;
-//** Thumbnail border radius
-@thumbnail-border-radius:     @border-radius-base;
-
-//** Custom text color for thumbnail captions
-@thumbnail-caption-color:     @text-color;
-//** Padding around the thumbnail caption
-@thumbnail-caption-padding:   9px;
-
-
 //== Wells
 //
 //##
@@ -855,8 +701,6 @@
 @headings-small-color:        @gray-light;
 //** Blockquote small color
 @blockquote-small-color:      @gray-light;
-//** Blockquote font size
-@blockquote-font-size:        (@font-size-base * 1.25);
 //** Blockquote border color
 @blockquote-border-color:     @gray-lighter;
 //** Page header border color
diff --git a/frontend/less/espo/bootstrap/wells.less b/frontend/less/espo/bootstrap/wells.less
index 15d072b0cd..9c526d9cfc 100644
--- a/frontend/less/espo/bootstrap/wells.less
+++ b/frontend/less/espo/bootstrap/wells.less
@@ -10,7 +10,6 @@
   margin-bottom: 20px;
   background-color: @well-bg;
   border: 1px solid @well-border;
-  border-radius: @border-radius-base;
   .box-shadow(inset 0 1px 1px rgba(0,0,0,.05));
   blockquote {
     border-color: #ddd;
@@ -21,9 +20,7 @@
 // Sizes
 .well-lg {
   padding: 24px;
-  border-radius: @border-radius-large;
 }
 .well-sm {
   padding: 9px;
-  border-radius: @border-radius-small;
 }
diff --git a/frontend/less/espo/custom.less b/frontend/less/espo/custom.less
index 5799cdef84..7368f6c07f 100644
--- a/frontend/less/espo/custom.less
+++ b/frontend/less/espo/custom.less
@@ -150,19 +150,19 @@ img.image-preview {
     margin: 15px 0;
     border-bottom: 0;
     padding-bottom: 0;
-    min-height: @input-height-base;
+    min-height: var(--input-height-base);
 
     .header-title,
     > h3 {
-        margin-bottom: 7px;
-        font-size: 22px;
+        margin-bottom: var(--7px);
+        font-size: var(--22px);
         font-weight: 400;
     }
 
     @media screen and (max-width: (@screen-sm-min - 1px)) {
         .header-title,
         > h3 {
-            font-size: 21px;
+            font-size: var(--21px);
         }
 
         .header-buttons {
@@ -191,15 +191,15 @@ img.image-preview {
     }
 
     .page-header-row {
-        margin-left: ceil((@grid-gutter-width / -2));
-        margin-right: floor((@grid-gutter-width / -2));
+        margin-left: calc(var(--grid-gutter-width-half) * -1);
+        margin-right: calc(var(--grid-gutter-width-half) * -1);
         &:extend(.clearfix all);
         > div {
             float: left;
             position: relative;
             min-height: 1px;
-            padding-left: ceil((@grid-gutter-width / 2));
-            padding-right: floor((@grid-gutter-width / 2));
+            padding-left: var(--grid-gutter-width-half);
+            padding-right: var(--grid-gutter-width-half);
         }
 
         .page-header-column-1 {
@@ -246,7 +246,7 @@ img.image-preview {
     }
 
     h3 {
-        margin-top: 0px;
+        margin-top: 0;
         margin-bottom: 4px;
     }
 
@@ -297,7 +297,7 @@ img.image-preview {
 }
 
 .page-header > .row {
-    min-height: @input-height-base;
+    min-height: var(--input-height-base);
 }
 
 .form-group {
@@ -442,7 +442,7 @@ input.numeric-text {
 }
 
 .filter .selectize-input {
-    min-height: @input-height-small;
+    min-height: var(--input-height-small);
 }
 
 .btn.active {
@@ -480,15 +480,15 @@ input.numeric-text {
 }
 
 input.global-search-input {
-    padding-right: 10px;
+    padding-right: var(--10px);
 }
 
 .global-search-button {
     border: 0;
-    padding: 5px 10px;
+    padding: var(--5px) var(--10px);
 
     > span.icon {
-        line-height: 21px;
+        line-height: var(--21px);
     }
 }
 
@@ -531,7 +531,7 @@ input.global-search-input {
 }
 
 .list-container .list-buttons-container {
-    margin-bottom: @padding-large-vertical;
+    margin-bottom: var(--padding-large-vertical);
     min-height: 35px;
 }
 
@@ -539,13 +539,13 @@ input.global-search-input {
     position: fixed;
     background-color: var(--navbar-bg);
     z-index: 1000;
-    padding-top: @padding-small-vertical;
-    padding-bottom: @padding-small-vertical;
+    padding-top: var(--padding-small-vertical);
+    padding-bottom: var(--padding-small-vertical);
     padding-right: 15px;
 }
 
 .list-buttons-container > .actions {
-    min-height: @input-height-base;
+    min-height: var(--input-height-base);
 }
 
 .list-buttons-container > div.total-count {
@@ -613,11 +613,11 @@ input.global-search-input {
 .radio-container {
     > div {
         > label {
-            margin-right: 10px;
+            margin-right: var(--10px);
             margin-bottom: 0;
             font-weight: normal;
-            font-size: 15px;
-            height: 20px;
+            font-size: var(--15px);
+            height: var(--20px);
             cursor: pointer;
 
             input[type="radio"] {
@@ -636,7 +636,7 @@ input.global-search-input {
 
 .floated-row > div  {
     float: left;
-    margin-right: @panel-padding;
+    margin-right: var(--panel-padding);
 }
 
 .cell > .field {
@@ -868,7 +868,7 @@ input.global-search-input {
         overflow: hidden;
         white-space: nowrap;
         text-overflow: ellipsis;
-        padding-bottom: 4px;
+        padding-bottom: var(--4px);
 
         &:last-child {
             padding-bottom: 1px;
@@ -888,24 +888,24 @@ input.global-search-input {
 
 .filter > .form-group .field {
     .link-container {
-        font-size: @font-size-small;
+        font-size: var(--font-size-small);
         .fa-times {
-            font-size: 12px;
+            font-size: var(--12px);
         }
         > .list-group-item {
-            padding-top: 4px;
-            padding-bottom: 4px;
-            line-height: @line-height-small-computed;
+            padding-top: var(--4px);
+            padding-bottom: var(--4px);
+            line-height: var(--20px);
         }
     }
     .input-group {
         input {
-            font-size: @font-size-small;
-            height: @input-height-small;
+            font-size: var(--font-size-small);
+            height: var(--input-height-small);
         }
         button.btn {
-            font-size: @font-size-small;
-            height: @input-height-small;
+            font-size: var(--font-size-small);
+            height: var(--input-height-small);
         }
     }
 }
@@ -922,36 +922,36 @@ input.global-search-input {
         }
 
         > a.pull-right {
-            margin-left: 4px;
+            margin-left: var(--4px);
         }
 
         > img.avatar {
-            margin-right: 7px;
-            top: 2px;
+            margin-right: var(--7px);
+            top: var(--2px);
         }
 
         .link-item-name {
             > img.avatar {
-                margin-right: 7px;
-                top: 2px;
+                margin-right: var(--7px);
+                top: var(--2px);
             }
         }
     }
 }
 
 .filter .field .link-container .list-group-item a[role="button"] {
-    margin-top: 1px;
-    margin-left: 2px;
+    margin-top: var(--1px);
+    margin-left: var(--2px);
 }
 
 .field .link-container .list-group-item a[role="button"] {
-    margin-top: 1px;
-    margin-left: 2px;
+    margin-top: var(--1px);
+    margin-left: var(--2px);
 }
 
 .field .link-container > .list-group-item.link-with-role > a[role="button"],
 .field .link-container > .list-group-item.link-with-role > div > a[role="button"] {
-    margin-top: 7px;
+    margin-top: var(--7px);
 }
 
 .field .link-container > .list-group-item.link-group-item-with-columns,
@@ -997,7 +997,7 @@ input.global-search-input {
 
 .list-container.list-container-panel {
     > .no-data {
-        padding: @panel-padding;
+        padding: var(--panel-padding);
     }
 }
 
@@ -1032,7 +1032,7 @@ input.global-search-input {
 }
 
 .list-expanded .list-group > .list-group-item .list-row-buttons button {
-    margin-top: 3px;
+    margin-top: var(--3px);
 }
 
 .list {
@@ -1176,7 +1176,7 @@ input.global-search-input {
         display: none;
 
         .fas, .far {
-            line-height: 21px;
+            line-height: var(--21px);
             position: relative;
             top: 1px;
         }
@@ -1221,8 +1221,8 @@ section {
 }
 
 .panel-body > div > .list-expanded {
-    margin-left: -@panel-padding;
-    margin-right: -@panel-padding;
+    margin-left: calc(0rem - var(--panel-padding));
+    margin-right: calc(0rem - var(--panel-padding));
 
     > .list-group-item {
         border-left-width: 0;
@@ -1230,29 +1230,29 @@ section {
     }
 }
 .panel-body > div > .list {
-    margin-left: -@panel-padding;
-    margin-right: -@panel-padding;
+    margin-left: calc(0rem - var(--panel-padding));
+    margin-right: calc(0rem - var(--panel-padding));
 }
 .panel-body > div > .list > table td:first-child,
 .panel-body > div > .list > table th:first-child {
-    padding-left: @panel-padding;
+    padding-left: var(--panel-padding);
 }
 .panel-body > div > .list > table td:last-child,
 .panel-body > div > .list > table th:last-child {
-    padding-right: @panel-padding;
+    padding-right: var(--panel-padding);
 }
 
 .modal-body > div > .list {
-    margin-left: -@panel-padding;
-    margin-right: -@panel-padding;
+    margin-left: calc(0rem - var(--panel-padding));
+    margin-right: calc(0rem - var(--panel-padding));
 }
 .modal-body > div > .list > table td:first-child,
 .modal-body > div > .list > table th:first-child {
-     padding-left: @panel-padding;
+     padding-left: var(--panel-padding);
 }
 .modal-body > div > .list > table td:last-child,
 .modal-body > div > .list > table th:last-child {
-    padding-right: @panel-padding;
+    padding-right: var(--panel-padding);
 }
 
 .modal-body > div > .list-expanded > ul > li {
@@ -1261,8 +1261,8 @@ section {
 }
 
 #main > .list-container > .list {
-    margin-left: -@container-padding;
-    margin-right: -@container-padding;
+    margin-left: calc(var(--container-padding) * -1);
+    margin-right: calc(var(--container-padding) * -1);
 }
 
 #main > .list-container,
@@ -1313,8 +1313,8 @@ section {
 
 #main > .list-container > .list-tree > ul,
 .modal-body > .list-container > .list-tree > ul {
-    padding-top: @table-cell-padding;
-    padding-bottom: @table-cell-padding;
+    padding-top: var(--table-cell-padding);
+    padding-bottom: var(--table-cell-padding);
 }
 
 .modal-body > ul.no-side-margin > li {
@@ -1326,11 +1326,11 @@ section {
     #main > .list-container > .list {
         > table td:first-child,
         > table th:first-child {
-            padding-left: @container-padding;
+            padding-left: var(--container-padding);
         }
         > table td:last-child,
         > table th:last-child {
-            padding-right: @container-padding;
+            padding-right: var(--container-padding);
         }
     }
 
@@ -1338,7 +1338,7 @@ section {
     .list-categories-column + .list-main-column .list-container,
     .left-container + .list-container {
         .list {
-            margin-right: -@container-padding;
+            margin-right: calc(var(--container-padding) * -1);
             border-top-left-radius: var(--panel-border-radius);
             border-bottom-left-radius: var(--panel-border-radius);
 
@@ -1347,7 +1347,7 @@ section {
                 border-bottom-left-radius: var(--panel-border-radius);
 
                 td:last-child, th:last-child {
-                    padding-right: @container-padding;
+                    padding-right: var(--container-padding);
                 }
 
                 td.cell[data-name="buttons"] > .btn-group {
@@ -1376,11 +1376,11 @@ section {
 
     .modal-body .categories-container + .list-container {
         > .list {
-            margin-right: -@modal-inner-padding;
+            margin-right: calc(0rem - var(--modal-inner-padding));
 
             > table {
                 td:last-child, th:last-child {
-                    padding-right: @modal-inner-padding;
+                    padding-right: var(--modal-inner-padding);
                 }
             }
         }
@@ -1388,19 +1388,19 @@ section {
 
     .list-main-column:first-child > .nested-categories-container:not(.hidden) + .list-container {
         .list {
-            margin-right: -@container-padding;
-            margin-left: -@container-padding;
+            margin-right: calc(var(--container-padding) * -1);
+            margin-left: calc(var(--container-padding) * -1);
 
             border-left-width: 0;
             border-right-width: 0;
 
             > table td:first-child,
             > table th:first-child {
-                padding-left: @container-padding;
+                padding-left: var(--container-padding);
             }
             > table td:last-child,
             > table th:last-child {
-                padding-right: @container-padding;
+                padding-right: var(--container-padding);
             }
         }
     }
@@ -1416,12 +1416,13 @@ section {
             .cell[data-name="name"] {
                 &:has(> a.link) {
                     &::before {
+                        //noinspection CssNoGenericFontName
                         font-family: 'Font Awesome 6 Free';
                         font-weight: 900;
                         content: "\f005";
-                        font-size: 10px;
-                        padding-right: 4px;
-                        top: 3px;
+                        font-size: var(--10px);
+                        padding-right: var(--4px);
+                        top: var(--3px);
                         position: relative;
                         color: var(--state-warning-text);
                         float: left;
@@ -1524,17 +1525,17 @@ section {
 }
 
 .panel-body > div:first-child > .list-expanded:first-child {
-    margin-top: -@panel-padding;
+    margin-top: calc(0rem - var(--panel-padding));
 }
 .panel-body > div:last-child > .list-expanded:last-child {
-    margin-bottom: -@panel-padding;
+    margin-bottom: calc(0rem - var(--panel-padding));
 }
 
 .panel-body > div:first-child > .list:first-child {
-    margin-top: -@panel-padding;
+    margin-top: calc(0rem - var(--panel-padding));
 }
 .panel-body > div:last-child > .list:last-child {
-    margin-bottom: -@panel-padding;
+    margin-bottom: calc(0rem - var(--panel-padding));
 }
 
 .expanded-row {
@@ -1631,25 +1632,25 @@ section {
     overflow: visible;
     white-space: nowrap;
     .select-all-container {
-        line-height: @line-height-computed;
-        height: @line-height-computed;
+        line-height: var(--line-height-computed);
+        height: var(--line-height-computed);
         float: left;
     }
 }
 
 .list .checkbox-dropdown {
-    margin-left: 2px;
-    top: -2px;
+    margin-left: var(--2px);
+    top: calc(var(--2px) * -1);
 }
 
 .list .checkbox-dropdown > a {
     padding: 0;
     line-height: 1;
-    height: 14px;
+    height: var(--14px);
 }
 
 .list .record-checkbox-container {
-    height: @line-height-computed;
+    height: var(--line-height-computed);
     display: block;
 }
 
@@ -1709,8 +1710,8 @@ table.less-padding td.cell[data-name="buttons"] > .btn-group {
 }
 
 .panel.dashlet > .panel-heading > .btn-group > .btn + .dropdown-toggle {
-    padding-left: @padding-small-horizontal;
-    padding-right: @padding-small-horizontal;
+    padding-left: var(--padding-small-horizontal);
+    padding-right: var(--padding-small-horizontal);
 }
 
 .panel.dashlet > .panel-heading {
@@ -1718,7 +1719,7 @@ table.less-padding td.cell[data-name="buttons"] > .btn-group {
         .fas,
         .far,
         .fa {
-            font-size: 12px;
+            font-size: var(--12px);
         }
     }
 }
@@ -1779,6 +1780,8 @@ table.less-padding td.cell[data-name="buttons"] > .btn-group {
 .panel.dashlet > .panel-body {
     overflow-y: auto;
     overflow-x: hidden;
+
+    width: 100%;
 }
 
 .dashlets.grid-stack {
@@ -1839,7 +1842,7 @@ table.less-padding td.cell[data-name="buttons"] > .btn-group {
 
 .show-more > .btn-block {
     text-align: left;
-    padding: 7px 10px 7px @panel-padding;
+    padding: var(--7px) var(--10px) var(--7px) var(--panel-padding);
 }
 
 label.attach-file-label {
@@ -1947,14 +1950,14 @@ label.attach-file-label {
 
 .list-row > .cell {
     > .attachment-block-container > .attachment-block > .attachment-preview {
-        margin-bottom: -@table-cell-padding + 2px;
-        margin-top: -@table-cell-padding + 2px;
+        margin-bottom: calc(var(--2px) - var(--table-cell-padding));
+        margin-top: calc(var(--2px) - var(--table-cell-padding));
 
         &:not(.no-shrink) {
-            max-height: @line-height-computed + @table-cell-padding + @table-cell-padding - 4px;
+            max-height: calc(var(--line-height-computed) + var(--table-cell-padding) * 2 - var(--4px));
 
             img {
-                max-height: @line-height-computed + @table-cell-padding + @table-cell-padding - 4px;
+                max-height: calc(var(--line-height-computed) + var(--table-cell-padding) * 2 - var(--4px));
                 vertical-align: top;
             }
         }
@@ -1971,7 +1974,7 @@ label.attach-file-label {
 
 .stick-sub.button-container {
     background-color: var(--navbar-bg);
-    padding: @padding-small-vertical @container-padding @padding-small-vertical @container-padding;
+    padding: var(--padding-small-vertical) var(--container-padding) var(--padding-small-vertical) var(--container-padding);
     width: 100%;
 }
 
@@ -1984,11 +1987,11 @@ label.attach-file-label {
 .notifications-badge-container > .notifications-button > .number-badge {
     position: absolute;
     z-index: 10;
-    font-size: 9px;
-    padding: 2px 5px;
+    font-size: var(--9px);
+    padding: var(--2px) var(--5px);
     display: inline-block;
-    top: 7px;
-    left: 27px;
+    top: var(--7px);
+    left: var(--27px);
     background-color: var(--brand-danger);
     color: @white-color;
 }
@@ -2002,25 +2005,14 @@ label.attach-file-label {
 }
 
 .icon-rotate-180 {
-    -webkit-transform: rotate(180deg);
-    -moz-transform: rotate(180deg);
-    -ms-transform: rotate(180deg);
-    -o-transform: rotate(180deg);
     transform: rotate(180deg);
 }
 
 .icon-rotate-90 {
-    -webkit-transform: rotate(90deg);
-    -moz-transform: rotate(90deg);
-    -ms-transform: rotate(90deg);
-    -o-transform: rotate(90deg);
     transform: rotate(90deg);
 }
 
 .icon-flip-horizontal {
-   -moz-transform: scaleX(-1);
-    -webkit-transform: scaleX(-1);
-    -o-transform: scaleX(-1);
     transform: scaleX(-1);
 }
 
@@ -2055,7 +2047,7 @@ textarea.auto-height {
             max-height: @navbar-panel-body-max-height;
             overflow-y: auto;
             overflow-x: hidden;
-            padding-bottom: @panel-padding;
+            padding-bottom: var(--panel-padding);
         }
     }
 }
@@ -2126,6 +2118,7 @@ textarea.auto-height {
 
 span.color-icon {
     font-size: 50%;
+    line-height: var(--15px);
     top: -2px;
     left: 1px;
     margin-right: 1px;
@@ -2308,12 +2301,12 @@ img.avatar.avatar-link {
     vertical-align: top;
     top: 1px;
 
-    &[width="16"] {
+    &[data-width="16"] {
         top: 3px;
         vertical-align: baseline;
     }
 
-    &[width="20"] {
+    &[data-width="20"] {
         top: 0;
     }
 }
@@ -2327,14 +2320,14 @@ img.avatar.avatar-link {
 
 div:has(.avatar-in-input):not(:has(.being-typed)) {
     > .input-group > input {
-        padding-left: 33px;
+        padding-left: var(--33px);
     }
 
     > .avatar-in-input {
         display: inline-block;
         position: absolute;
-        top: 32px;
-        left: 18px;
+        top: var(--32px);
+        left: var(--18px);
         z-index: 3;
         user-select: none;
         pointer-events: none;
@@ -2349,7 +2342,7 @@ div:has(.avatar-in-input) {
 
 .email-address-detail-item {
     > img.avatar {
-        margin-right: 5px;
+        margin-right: var(--5px);
     }
 }
 
@@ -2365,8 +2358,8 @@ div[data-scope="ApiUser"] {
 }
 
 .link-container .list-group-item {
-    padding: @padding-base-vertical @padding-base-horizontal;
-    line-height: @line-height-computed;
+    padding: var(--padding-base-vertical) var(--padding-base-horizontal);
+    line-height: var(--line-height-computed);
 }
 
 .flotr-labels {
@@ -2375,7 +2368,7 @@ div[data-scope="ApiUser"] {
 
 .flotr-mouse-value {
     cursor: default;
-    font-size: 13px;
+    font-size: var(--13px);
     text-align: center;
     user-select: none;
 }
@@ -2393,21 +2386,21 @@ div[data-scope="ApiUser"] {
     max-height: 1.2em;
     line-height: 1.1em;
     overflow: hidden;
-    padding: 0 1px 1px;
+    padding: 0 var(--1px) var(--1px);
     user-select: none;
 }
 
 .legend-container {
     overflow-x: hidden;
     overflow-y: hidden;
-    padding-top: 7px;
+    padding-top: var(--7px);
 
     > table {
         margin: 0 auto;
     }
 
     table td {
-        padding: 2px 2px;
+        padding: var(--2px) var(--2px);
         line-height: 1em;
     }
 
@@ -2423,7 +2416,7 @@ div[data-scope="ApiUser"] {
         text-overflow: ellipsis;
         overflow: hidden;
         line-height: 1.3em;
-        max-height: 15px;
+        max-height: var(--15px);
     }
 
     .flotr-legend-color-box > div {
@@ -2435,10 +2428,10 @@ div[data-scope="ApiUser"] {
 
             > div {
                 position: relative;
-                top: -1px;
+                top: calc(var(--1px) * -1);
                 left: 0;
                 border-radius: var(--border-radius-small);
-                margin: -1px;
+                margin: calc(var(--1px) * -1);
             }
         }
     }
@@ -2519,23 +2512,23 @@ table.table td.cell .html-container {
 
 .complex-text.complex-text-memo {
     h1 {
-        font-size: floor(@font-size-base * 1.8);
+        font-size: calc(var(--font-size-base) * 1.8);
         font-weight: 500;
-        margin-top: (@line-height-computed / 2) * 2;
-        margin-bottom: (@line-height-computed / 2) * 1.3;
+        margin-top: var(--line-height-computed);
+        margin-bottom: calc(var(--line-height-computed-half) * 1.3);
     }
 
     h2 {
-        font-size: floor(@font-size-base * 1.5);
+        font-size: calc(var(--font-size-base) * 1.5);
         font-weight: 500;
-        margin-top: (@line-height-computed / 2) * 1.4;
-        margin-bottom: (@line-height-computed / 2) * 1.2;
+        margin-top: calc(var(--line-height-computed-half) * 1.4);
+        margin-bottom: calc(var(--line-height-computed-half) * 1.2);
     }
 
     h3, h4, h5, h6 {
-        font-size: floor(@font-size-base * 1.1);
-        margin-top: (@line-height-computed / 2) * 1.2;
-        margin-bottom: (@line-height-computed / 2);
+        font-size: calc(var(--font-size-base) * 1.1);
+        margin-top: calc(var(--line-height-computed-half) * 1.2);
+        margin-bottom: var(--line-height-computed-half);
     }
 }
 
@@ -2569,27 +2562,27 @@ table.table td.cell .html-container {
     }
     h1 {
         font-weight: 600;
-        margin-top: @line-height-computed;
-        margin-bottom: (@line-height-computed / 2);
+        margin-top: var(--line-height-computed);
+        margin-bottom: calc(var(--line-height-computed) / 2);
     }
     h2, h3 {
         font-weight: 600;
-        margin-top: (@line-height-computed / 2) * 1.2;
-        margin-bottom: (@line-height-computed / 2);
+        margin-top: calc(var(--line-height-computed) / 2 * 1.2);
+        margin-bottom: calc(var(--line-height-computed) / 2);
     }
     h4, h5, h6 {
         font-weight: normal;
-        margin-top: (@line-height-computed / 2);
-        margin-bottom: (@line-height-computed / 2);
+        margin-top: calc(var(--line-height-computed) / 2);
+        margin-bottom: calc(var(--line-height-computed) / 2);
     }
     h1 {
-        font-size: floor(@font-size-base * 1.2);
+        font-size: calc(var(--font-size-base) * 1.2);
     }
     h2 {
-        font-size: floor(@font-size-base * 1.1);
+        font-size: calc(var(--font-size-base) * 1.1);
     }
     h3, h4, h5, h6 {
-        font-size: floor(@font-size-base);
+        font-size: var(--font-size-base);
     }
 
     p,
@@ -2597,7 +2590,7 @@ table.table td.cell .html-container {
     ol,
     pre,
     blockquote {
-        margin-top: (@line-height-computed / 2);
+        margin-top: var(--line-height-computed-half);
     }
 
     p:last-child,
@@ -2647,7 +2640,7 @@ table.table td.cell .html-container {
     ul,
     ol {
         padding-left: 30px;
-        margin-bottom: (@line-height-computed / 2);
+        margin-bottom: var(--line-height-computed-half);
     }
 
     > p:last-child,
@@ -2668,7 +2661,7 @@ table.table td.cell .html-container {
     ol,
     pre,
     blockquote {
-        margin-top: (@line-height-computed / 2);
+        margin-top: var(--line-height-computed-half);
     }
 }
 
@@ -2677,7 +2670,7 @@ table.table td.cell .html-container {
 }
 .list-group-tree > li {
     border: 0;
-    padding: 0 0 0 @panel-padding;
+    padding: 0 0 0 var(--panel-padding);
 }
 
 .list-group-tree > li .cell {
@@ -2739,20 +2732,20 @@ table.table td.cell .html-container {
 
 @media screen and (max-width: (@screen-sm-min - 1px)) {
     .folders-container {
-        margin-left: -(@container-padding);
-        margin-right: -(@container-padding);
+        margin-left: calc(var(--container-padding) * -1);
+        margin-right: calc(var(--container-padding) * -1);
     }
 }
 
 @media screen and (min-width: @screen-sm-min) {
     .folders-container {
-        margin-left: -(@container-padding);
+        margin-left: calc(var(--container-padding) * -1);
         margin-right: -1px; // Fix 1px shift on sticked.
     }
 
     .folders-container.sticked {
         position: fixed;
-        margin-left: -(@container-padding);
+        margin-left: calc(var(--container-padding) * -1);
 
         .list-group-side {
             margin-bottom: 0;
@@ -2767,7 +2760,7 @@ table.table td.cell .html-container {
 
     > li {
         border: 0;
-        padding: 5px 4px 5px (@container-padding - 3px);
+        padding: 5px 4px 5px calc(var(--container-padding) - var(--3px));
         border-left: 3px solid transparent;
         border-top-right-radius: var(--border-radius);
         border-bottom-right-radius: var(--border-radius);
@@ -2829,7 +2822,7 @@ table.table td.cell .html-container {
             text-align: center;
 
             > span {
-                font-size: 12px;
+                font-size: var(--12px);
                 position: relative;
                 top: -1px;
             }
@@ -2848,7 +2841,9 @@ table.table td.cell .html-container {
     position: relative;
     top: -2px;
     padding: 0 4px;
+    //noinspection CssReplaceWithShorthandSafely
     margin: 0;
+    //noinspection CssOverwrittenProperties,CssReplaceWithShorthandSafely
     margin-bottom: 0;
     border: 0;
     line-height: 1.3;
@@ -3022,7 +3017,7 @@ table.table td.cell .html-container {
     }
 
     div.group-head {
-        line-height: @input-height-base;
+        line-height: var(--input-height-base);
 
         a[data-action="remove"] {
             margin-right: 5px;
@@ -3064,7 +3059,7 @@ table.table td.cell .html-container {
 .dynamic-logic-options {
     a.remove-option-list,
     a.add-option-list {
-        line-height: @input-height-base;
+        line-height: var(--input-height-base);
     }
     .option-list-item-header {
         margin-top: -10px;
@@ -3216,9 +3211,9 @@ table.table-admin-panel {
 }
 
 .list-nested-categories {
-    margin-bottom: @padding-base-horizontal;
+    margin-bottom: var(--padding-base-horizontal);
     .category-item {
-        padding: @padding-base-horizontal @padding-base-horizontal @padding-base-horizontal 0;
+        padding: var(--padding-base-horizontal) var(--padding-base-horizontal) var(--padding-base-horizontal) 0;
         overflow: hidden;
         text-overflow: ellipsis;
         white-space: nowrap;
@@ -3296,7 +3291,7 @@ table.table-admin-panel {
     border: var(--panel-border-width) solid var(--default-border-color);
 
     > h4 {
-        padding: @padding-base-vertical @padding-base-horizontal;
+        padding: var(--padding-base-vertical) var(--padding-base-horizontal);
         padding-bottom: 7px;
         margin-bottom: 0;
         margin-top: 0;
@@ -3307,8 +3302,8 @@ table.table-admin-panel {
     }
 
     > div > .section {
-        padding-left: @padding-base-horizontal;
-        padding-right: @padding-base-horizontal;
+        padding-left: var(--padding-base-horizontal);
+        padding-right: var(--padding-base-horizontal);
         padding-top: 10px;
         padding-bottom: 10px;
         border-bottom: 1px solid @panel-default-border;
@@ -3320,16 +3315,16 @@ table.table-admin-panel {
     }
 
     > div > .section.extension > p:first-child {
-        font-size: 16px;
+        font-size: var(--16px);
     }
 
     > div > .section.extension > p:last-child {
         > .btn {
-            margin-top: 4px;
+            margin-top: var(--4px);
         }
         .price {
-            margin-top: -3px;
-            font-size: 16px;
+            margin-top: calc(var(--3px) * -1);
+            font-size: var(--16px);
         }
         > a.text-danger {
             font-weight: 600;
@@ -3360,11 +3355,11 @@ table.table-admin-panel {
     }
 
     vertical-align: middle;
-    line-height: 32px;
+    line-height: var(--32px);
 }
 
 .search-container {
-    margin-bottom: @padding-base-vertical;
+    margin-bottom: var(--padding-base-vertical);
 }
 
 .search-row {
@@ -3467,7 +3462,7 @@ table.table-admin-panel {
     }
 
     .categories-container > .list {
-        margin: @panel-padding 0;
+        margin: var(--panel-padding) 0;
     }
 
     .panel-body > div:first-child > .list:first-child {
@@ -3485,16 +3480,16 @@ table.table-admin-panel {
 
     .list-categories-column + .list-main-column {
         .list-container > .list {
-            margin-left: -@container-padding;
-            margin-right: -@container-padding;
+            margin-left: calc(var(--container-padding) * -1);
+            margin-right: calc(var(--container-padding) * -1);
         }
     }
 
     .list-main-column {
         > .nested-categories-container + .list-container {
             > .list {
-                margin-left: -@container-padding;
-                margin-right: -@container-padding;
+                margin-left: calc(var(--container-padding) * -1);
+                margin-right: calc(var(--container-padding) * -1);
                 border-left: 0;
                 border-right: 0;
             }
@@ -3504,29 +3499,29 @@ table.table-admin-panel {
     .modal-body {
         .categories-container + .list-container {
             .list {
-                margin-left: -@modal-inner-padding;
-                margin-right: -@modal-inner-padding;
+                margin-left: calc(0rem - var(--modal-inner-padding));
+                margin-right: calc(0rem - var(--modal-inner-padding));
             }
         }
     }
 
     .left-container + .list-container {
         .list {
-            margin-left: -@container-padding;
-            margin-right: -@container-padding;
+            margin-left: calc(var(--container-padding) * -1);
+            margin-right: calc(var(--container-padding) * -1);
         }
     }
 
     .calendar-container {
         .button-container > div:first-child{
-            margin-bottom: 10px;
+            margin-bottom: var(--10px);
         }
         .date-title {
-            margin-bottom: 10px;
-            margin-top: 6px;
+            margin-bottom: var(--10px);
+            margin-top: var(--6px);
             h4 {
                 margin-top: 0;
-                font-size: 15px;
+                font-size: var(--15px);
             }
             white-space: nowrap;
             overflow: hidden;
@@ -3544,25 +3539,25 @@ table.table-admin-panel {
             grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
 
             > li {
-                padding-right: 10px;
+                padding-right: var(--10px);
             }
         }
     }
 
     .page-header {
-        margin: 10px 0;
+        margin: var(--10px) 0;
     }
 }
 
 a.field-info > span.fa-info-circle {
-    font-size: 12px;
+    font-size: var(--12px);
     position: relative;
-    top: -1px;
+    top: calc(var(--1px) * -1);
 }
 
 .fas, .far, .fa {
-    font-size: 16px;
-    line-height: 21px;
+    font-size: var(--16px);
+    line-height: var(--21px);
 }
 
 .fas.fa-sm,
@@ -3573,21 +3568,18 @@ a.field-info > span.fa-info-circle {
 .small .fas,
 .fas.small,
 .far.small {
-    font-size: 12px;
-    line-height: 18px;
+    font-size: var(--12px);
+    line-height: var(--18px);
 }
 
 .btn-sm {
     > .fa-ellipsis-h,
     > .fa-plus {
-        font-size: 14px;
+        font-size: var(--14px);
     }
 }
 
 .icon-is-replied {
-    -moz-transform: scaleX(-1);
-    -webkit-transform: scaleX(-1);
-    -o-transform: scaleX(-1);
     transform: scaleX(-1);
 
     &::before {
@@ -3602,36 +3594,22 @@ a.field-info > span.fa-info-circle {
 
 .transform-flip,
 .transform-flip-x {
-    -webkit-transform: scaleX(-1);
     transform: scaleX(-1);
 }
 
 .transform-flip-y {
-    -webkit-transform: scaleY(-1);
     transform: scaleY(-1);
 }
 
 .transform-rotate-90 {
-    -webkit-transform: rotate(90deg);
-    -moz-transform: rotate(90deg);
-    -o-transform: rotate(90deg);
-    -ms-transform: rotate(90deg);
     transform: rotate(90deg);
 }
 
 .transform-rotate-180 {
-    -webkit-transform: rotate(180deg);
-    -moz-transform: rotate(180deg);
-    -o-transform: rotate(180deg);
-    -ms-transform: rotate(180deg);
     transform: rotate(180deg);
 }
 
 .transform-rotate-270 {
-    -webkit-transform: rotate(270deg);
-    -moz-transform: rotate(270deg);
-    -o-transform: rotate(270deg);
-    -ms-transform: rotate(270deg);
     transform: rotate(270deg);
 }
 
@@ -3799,9 +3777,6 @@ body:has(.modal-backdrop) {
 
         -webkit-touch-callout: none;
         -webkit-user-select: none;
-        -khtml-user-select: none;
-        -moz-user-select: none;
-        -ms-user-select: none;
         user-select: none;
     }
 }
@@ -3811,7 +3786,7 @@ body:has(.modal-backdrop) {
     background-color: var(--state-info-bg);
     border: 1px solid var(--state-info-bg-10);
     color: var(--state-info-text);
-    padding: @padding-base-vertical 20px;
+    padding: var(--padding-base-vertical) var(--20px);
     font-weight: 600;
     opacity: 1;
     position: absolute;
diff --git a/frontend/less/espo/elements/buttons.less b/frontend/less/espo/elements/buttons.less
index b924ee67e0..9a83b449cd 100644
--- a/frontend/less/espo/elements/buttons.less
+++ b/frontend/less/espo/elements/buttons.less
@@ -12,39 +12,39 @@
     }
 
     &.margin-right {
-        margin-right: @padding-base-horizontal;
+        margin-right: var(--padding-base-horizontal);
     }
 
     &.margin-left {
-        margin-left: @padding-base-horizontal;
+        margin-left: var(--padding-base-horizontal);
     }
 }
 
 .btn {
-    height: @input-height-base;
+    height: var(--input-height-base);
 }
 
 .btn-lg {
-    height: @input-height-large;
+    height: var(--input-height-large);
 }
 
 .btn-sm {
-    height: @input-height-small;
+    height: var(--input-height-small);
 }
 
 .btn {
     .fas, .far {
-        line-height: 22px;
+        line-height: var(--22px);
 
         &.fa-sm {
-            line-height: 18px;
+            line-height: var(--18px);
         }
     }
 }
 
 .btn-sm {
     .fas, .far {
-        line-height: 18px;
+        line-height: var(--18px);
     }
 }
 
@@ -78,27 +78,27 @@ a.btn {
 .input-group {
     .input-group-btn > {
         .btn {
-            height: @input-height-base;
+            height: var(--input-height-base);
         }
     }
 
     &.input-group-sm {
         .input-group-btn > {
             .btn {
-                height: @input-height-small;
+                height: var(--input-height-small);
             }
         }
     }
     &.input-group-lg {
         .input-group-btn > {
             .btn {
-                height: @input-height-large;
+                height: var(--input-height-large);
             }
         }
     }
 
     .input-group-btn .btn.btn-sm {
-        height: @input-height-small;
+        height: var(--input-height-small);
     }
 }
 
@@ -136,12 +136,12 @@ a.btn {
 }
 
 .btn-icon.btn-sm {
-    width: 34px;
+    width: var(--34px);
 
     .fa, .fas {
-        font-size: 12px;
-        width: 12px;
-        line-height: 18px;
+        font-size: var(--12px);
+        width: var(--12px);
+        line-height: var(--18px);
     }
 }
 
diff --git a/frontend/less/espo/elements/dropdown.less b/frontend/less/espo/elements/dropdown.less
index 7f4a549ebd..aaa2664e63 100644
--- a/frontend/less/espo/elements/dropdown.less
+++ b/frontend/less/espo/elements/dropdown.less
@@ -99,7 +99,7 @@ ul.dropdown-menu {
         -webkit-user-drag: none;
         -moz-user-select: none;
         user-select: none;
-        line-height: @line-height-computed;
+        line-height: var(--line-height-computed);
 
         &.active {
             background-color: @gray-lighter;
diff --git a/frontend/less/espo/elements/form.less b/frontend/less/espo/elements/form.less
index 810c1f3da9..b6427cefb0 100644
--- a/frontend/less/espo/elements/form.less
+++ b/frontend/less/espo/elements/form.less
@@ -320,26 +320,26 @@ input[type="checkbox"].form-checkbox {
     margin: 0;
     border-radius: var(--border-radius);
     border: 1px solid var(--input-border);
-    height: @line-height-computed;
-    width: @line-height-computed;
+    height: var(--line-height-computed);
+    width: var(--line-height-computed);
     display: grid;
     place-content: center;
     cursor: pointer;
     font-family: 'Font Awesome 6 Free';
     font-weight: 900;
-    font-size: 15px;
+    font-size: var(--15px);
 
     &.form-checkbox-simple {
         border-width: 0;
     }
 
     &.form-checkbox-small {
-        height: 15px;
-        width: 15px;
+        height: var(--15px);
+        width: var(--15px);
         border-radius: var(--border-radius-small);
 
         &::before {
-            font-size: 12px;
+            font-size: var(--12px);
         }
     }
 
@@ -390,8 +390,8 @@ input[type="radio"].form-radio {
     margin: 0;
     border-radius: 50%;
     border: 1px solid var(--input-border);
-    height: @line-height-computed;
-    width: @line-height-computed;
+    height: var(--line-height-computed);
+    width: var(--line-height-computed);
     display: grid;
     place-content: center;
     cursor: pointer;
diff --git a/frontend/less/espo/elements/grid.less b/frontend/less/espo/elements/grid.less
index c2a7c512d7..7437c58514 100644
--- a/frontend/less/espo/elements/grid.less
+++ b/frontend/less/espo/elements/grid.less
@@ -1,15 +1,15 @@
 .grid-auto-fill-xs,
 .grid-auto-fill-sm,
 .grid-auto-fill-md {
-    margin-left: ceil((@grid-gutter-width / -2));
-    margin-right: floor((@grid-gutter-width / -2));
+    margin-left: calc(var(--grid-gutter-width-half) * -1);
+    margin-right: calc(var(--grid-gutter-width-half) * -1);
     &:extend(.clearfix all);
     > div {
         float: left;
         position: relative;
         min-height: 1px;
-        padding-left: ceil((@grid-gutter-width / 2));
-        padding-right: floor((@grid-gutter-width / 2));
+        padding-left: var(--grid-gutter-width-half);
+        padding-right: var(--grid-gutter-width-half);
     }
 }
 
@@ -67,7 +67,7 @@
     .grid-auto-fill-sm,
     .grid-auto-fill-md {
         display: grid;
-        grid-column-gap: @grid-gutter-width;
+        grid-column-gap: var(--grid-gutter-width);
         margin-left: 0;
         margin-right: 0;
         > div {
@@ -85,34 +85,32 @@
     }
 
     .grid-auto-fill-xxs {
-        grid-template-columns: repeat(auto-fill, minmax(@grid-column-width-xxsmall, 1fr));
+        grid-template-columns: repeat(auto-fill, minmax(var(--grid-column-width-xxsmall), 1fr));
     }
     .grid-auto-fill-xs {
-        grid-template-columns: repeat(auto-fill, minmax(@grid-column-width-xsmall, 1fr));
+        grid-template-columns: repeat(auto-fill, minmax(var(--grid-column-width-xsmall), 1fr));
     }
     .grid-auto-fill-sm {
-        grid-template-columns: repeat(auto-fill, minmax(@grid-column-width-small, 1fr));
+        grid-template-columns: repeat(auto-fill, minmax(var(--grid-column-width-small), 1fr));
     }
     .grid-auto-fill-md {
-        grid-template-columns: repeat(auto-fill, minmax(@grid-column-width-medium, 1fr));
+        grid-template-columns: repeat(auto-fill, minmax(var(--grid-column-width-medium), 1fr));
     }
 
     .grid-auto-fit-xxs,
     .grid-auto-fit-xs,
     .grid-auto-fit-sm {
         display: grid;
-        grid-column-gap: @grid-gutter-width;
+        grid-column-gap: var(--grid-gutter-width);
     }
 
     .grid-auto-fit-xxs {
-        grid-template-columns: repeat(auto-fit, minmax(@grid-column-width-xxsmall, 1fr));
+        grid-template-columns: repeat(auto-fit, minmax(var(--grid-column-width-xxsmall), 1fr));
     }
     .grid-auto-fit-xs {
-        grid-template-columns: repeat(auto-fit, minmax(@grid-column-width-xsmall, 1fr));
+        grid-template-columns: repeat(auto-fit, minmax(var(--grid-column-width-xsmall), 1fr));
     }
     .grid-auto-fit-sm {
-        grid-template-columns: repeat(auto-fit, minmax(@grid-column-width-small, 1fr));
+        grid-template-columns: repeat(auto-fit, minmax(var(--grid-column-width-small), 1fr));
     }
 }
-
-
diff --git a/frontend/less/espo/elements/modal.less b/frontend/less/espo/elements/modal.less
index 326907ea3f..3fddb61824 100644
--- a/frontend/less/espo/elements/modal.less
+++ b/frontend/less/espo/elements/modal.less
@@ -4,17 +4,17 @@
 
 .modal-header {
     background-color: @modal-header-bg;
-    padding: @modal-title-padding @panel-padding;
+    padding: var(--modal-title-padding) var(--panel-padding);
     border-bottom: 0 solid @modal-header-border-color;
-    min-height: (@modal-title-padding + @modal-title-line-height);
+    min-height: calc(var(--modal-title-line-height) + var(--modal-title-padding));
 
     &.fixed-height {
-        height: 43px;
-        max-height: 43px;
+        height: var(--43px);
+        max-height: var(--43px);
         overflow: hidden;
 
         .modal-title {
-            width: ~"calc(100% - 20px)";
+            width: calc(100% - var(--20px));
             > .modal-title-text {
                 max-width: 100%;
                 overflow: hidden;
@@ -27,10 +27,10 @@
                     &:before {
                         content: " ";
                         position: absolute;
-                        right: 34px;
+                        right: var(--34px);
                         background: linear-gradient(to right, transparent, @modal-header-bg);
-                        height: 30px;
-                        width: 60px;
+                        height: var(--30px);
+                        width: calc(var(--30px) * 2);
                     }
                 }
             }
@@ -48,14 +48,14 @@
     }
 
     .close {
-        font-size: 31px;
+        font-size: var(--31px);
         font-weight: normal;
-        margin-top: -4px;
-        max-height: @font-size-h3;
+        margin-top: calc(var(--6px) * -1);
+        max-height: var(--24px);
         > span {
             position: relative;
-            max-height: @font-size-h3;
-            height: @font-size-h3;
+            max-height: var(--24px);
+            height: var(--24px);
             display: inline-block;
         }
         opacity: 1;
@@ -79,9 +79,9 @@
 
     .collapse-button {
         float: right;
-        padding-right: 17px;
-        padding-left: 17px;
-        top: 3px;
+        padding-right: var(--17px);
+        padding-left: var(--17px);
+        top: var(--3px);
         position: relative;
 
         &,
@@ -101,8 +101,8 @@
 }
 
 .modal-footer {
-    margin-top: @modal-title-padding;
-    padding: @panel-padding @panel-padding @panel-padding;
+    margin-top: var(--modal-title-padding);
+    padding: var(--panel-padding) var(--panel-padding) var(--panel-padding);
     background-color: @modal-footer-bg;
 
     &.shadowed:not(.has-sticked-bar) {
@@ -136,13 +136,13 @@
 
 .modal-footer {
     margin-top: 0;
-    padding-top: @modal-title-padding;
-    padding-bottom: @modal-title-padding;
+    padding-top: var(--modal-title-padding);
+    padding-bottom: var(--modal-title-padding);
 }
 
 .modal-header {
-    padding-top: 8px;
-    padding-bottom: 8px;
+    padding-top: var(--8px);
+    padding-bottom: var(--8px);
 }
 
 .modal-header + .modal-footer {
@@ -164,7 +164,7 @@
         margin: 0 0 0 auto;
     }
     .modal-content .note-editor > .modal > .modal-dialog {
-        margin: 0 0 0 -@container-padding;
+        margin: 0 0 0 calc(var(--container-padding) * -1);
     }
 
     .dialog-confirm > .modal-dialog,
@@ -180,12 +180,12 @@
 }
 
 .modal-dialog .modal-body .list-sticky-bar {
-    top: 94px !important;
+    top: var(--94px) !important;
     width: 100% !important;
     right: 0 !important;
     left: unset !important;
-    padding-left: @container-padding - 1px;
-    padding-right: calc(@container-padding - ~'1px + var(--scroll-width)');
+    padding-left: calc(var(--container-padding) - 1px);
+    padding-right: calc(var(--container-padding) - 1px + var(--scroll-width));
 }
 
 @media screen and (max-width: (@screen-sm-min - 1px)) {
@@ -193,8 +193,8 @@
         margin: 0 0;
     }
     .modal-dialog .image-container {
-        margin-left: -@panel-padding;
-        margin-right: -@panel-padding;
+        margin-left: calc(0rem - var(--panel-padding));
+        margin-right: calc(0rem - var(--panel-padding));
     }
 }
 
@@ -204,18 +204,18 @@
 
 @media screen and (min-width: @screen-sm-min) {
     .modal-dialog {
-        width: 740px;
+        width: ~"min(var(--740px), 94vw)";
     }
 }
 
 @media screen and (min-width: @screen-md-min) {
     .modal-dialog {
-        width: 900px;
+        width: ~"min(var(--900px), 90vw)";
     }
 
     .dialog-confirm > .modal-dialog,
     .dialog-centered > .modal-dialog {
-        width: 550px;
+        width: ~"min(var(--550px), 90vw)";
     }
 }
 
@@ -243,17 +243,18 @@
 }
 
 .modal-body > .no-side-margin {
-    margin-left: -@panel-padding;
-    margin-right: -@panel-padding;
+    margin-left: calc(0rem - var(--panel-padding));
+    margin-right: calc(0rem - var(--panel-padding));
 
     > .negate-no-side-margin {
-        margin-left: @panel-padding;
-        margin-right: @panel-padding;
+        margin-left: var(--panel-padding);
+        margin-right: var(--panel-padding);
     }
 }
 
 .modal.in .modal.in {
     overflow: visible !important;
+    //noinspection CssOverwrittenProperties
     overflow-y: visible !important;
 }
 
diff --git a/frontend/less/espo/elements/navbar.less b/frontend/less/espo/elements/navbar.less
index cd97fd9e0a..1168c39c4b 100644
--- a/frontend/less/espo/elements/navbar.less
+++ b/frontend/less/espo/elements/navbar.less
@@ -42,9 +42,9 @@
     }
 
     .tab span.color-icon {
-        left: -1px;
+        left: calc(var(--1px) * -1);
         font-size: 86%;
-        top: -1px;
+        top: calc(var(--1px) * -1);
     }
 
     ul.tabs {
@@ -56,9 +56,9 @@
 
         li > a > .group-caret {
             position: absolute;
-            top: 9px;
-            right: 13px;
-            font-size: 12px;
+            top: var(--9px);
+            right: var(--13px);
+            font-size: var(--12px);
             opacity: 0.6;
         }
 
@@ -121,13 +121,13 @@
 
 @media screen and (max-width: (@screen-sm-min - 1px)) {
     #navbar .navbar {
-        min-height: @navbar-height-xsmall;
+        min-height: var(--navbar-height);
         border-width: 0;
 
         .navbar-nav > li > a {
-            padding-top: @navbar-tab-vertical-padding;
-            padding-bottom: @navbar-tab-vertical-padding;
-            height: @navbar-height-xsmall;
+            padding-top: var(--navbar-tab-vertical-padding);
+            padding-bottom: var(--navbar-tab-vertical-padding);
+            height: var(--navbar-height);
         }
 
         .navbar-form.global-search-container {
@@ -160,25 +160,25 @@
         }
 
         .navbar-brand {
-            height: @navbar-height-xsmall !important;
+            height: var(--navbar-height) !important;
 
             > img.logo {
-                height: @navbar-logo-height-xsmall !important;
+                height: var(--navbar-height) !important;
             }
         }
 
         ul.tabs {
             li > a {
-                padding-top: @navbar-tab-vertical-padding;
-                padding-bottom: @navbar-tab-vertical-padding;
+                padding-top: var(--navbar-tab-vertical-padding);
+                padding-bottom: var(--navbar-tab-vertical-padding);
             }
 
             > li.more {
                 &.open {
                     > ul {
                         li > a {
-                            padding-top: @navbar-tab-vertical-padding;
-                            padding-bottom: @navbar-tab-vertical-padding;
+                            padding-top: var(--navbar-tab-vertical-padding);
+                            padding-bottom: var(--navbar-tab-vertical-padding);
                             padding-left: 15px;
                             padding-right: 15px;
                         }
@@ -196,15 +196,11 @@
             }
 
             li > a > .group-caret {
-                -webkit-transform: rotate(90deg);
-                -moz-transform: rotate(90deg);
-                -ms-transform: rotate(90deg);
-                -o-transform: rotate(90deg);
                 transform: rotate(90deg);
             }
 
             li > a {
-                height: @navbar-height-xsmall;
+                height: var(--navbar-height);
             }
 
             li.tab-group {
@@ -252,8 +248,8 @@
         }
 
         .navbar-toggle {
-            padding-top: @navbar-tab-vertical-padding;
-            padding-bottom: @navbar-tab-vertical-padding;
+            padding-top: var(--navbar-tab-vertical-padding);
+            padding-bottom: var(--navbar-tab-vertical-padding);
             border: 0;
         }
     }
diff --git a/frontend/less/espo/elements/panel.less b/frontend/less/espo/elements/panel.less
index 1f17eba7d7..1118c08d0f 100644
--- a/frontend/less/espo/elements/panel.less
+++ b/frontend/less/espo/elements/panel.less
@@ -6,7 +6,7 @@
 }
 
 .panel-body {
-    padding: @panel-padding;
+    padding: var(--panel-padding);
     .clearfix();
 }
 
@@ -27,10 +27,10 @@
 }
 
 .panel > .panel-body.panel-body-form {
-    padding-bottom: @panel-padding - @form-group-margin-bottom;
+    padding-bottom: calc(var(--panel-padding) - var(--form-group-margin-bottom));
 
     > .alert {
-        margin-bottom: @form-group-margin-bottom;
+        margin-bottom: var(--form-group-margin-bottom);
     }
 
     > .button-container {
@@ -39,16 +39,16 @@
 }
 
 .panel-body > .no-margin {
-    margin: -@panel-padding;
+    margin: calc(0rem - var(--panel-padding));
 }
 
 .panel-body > .no-side-margin .revert-margin {
-    margin-left: @panel-padding;
-    margin-right: @panel-padding;
+    margin-left: var(--panel-padding);
+    margin-right: var(--panel-padding);
 }
 
 .panel-body > .no-margin .revert-margin {
-    margin: @panel-padding;
+    margin: var(--panel-padding);
 }
 
 .panel-body.no-padding {
@@ -142,17 +142,17 @@
 }
 
 .panel-body .no-side-margin {
-    margin-left: -@panel-padding;
-    margin-right: -@panel-padding;
+    margin-left: calc(0rem - var(--panel-padding));
+    margin-right: calc(0rem - var(--panel-padding));
 
     > table td:first-child,
     > table th:first-child {
-        padding-left: @panel-padding;
+        padding-left: var(--panel-padding);
     }
 
     > table td:last-child,
     > table th:last-child {
-        padding-right: @panel-padding;
+        padding-right: var(--panel-padding);
     }
 
     > .list-group-item {
@@ -177,7 +177,7 @@
 }
 
 .panel-body .no-bottom-margin {
-    margin-bottom: -@panel-padding !important;
+    margin-bottom: calc(0rem - var(--panel-padding)) !important;
 }
 
 .panel {
@@ -256,8 +256,8 @@
         }
 
         > .btn-group > .btn + .dropdown-toggle {
-            padding-left: @padding-small-horizontal;
-            padding-right: @padding-small-horizontal;
+            padding-left: var(--padding-small-horizontal);
+            padding-right: var(--padding-small-horizontal);
         }
     }
 }
@@ -469,8 +469,8 @@ body {
 }
 
 .panel.sticked {
-    margin-top: ~"calc(-1 * var(--vertical-gap))";
-    border-top-width: ~"max(var(--panel-border-width), 1px)";
+    margin-top: calc(-1 * var(--vertical-gap));
+    border-top-width: max(var(--panel-border-width), 1px);
 }
 
 .panel {
@@ -729,14 +729,14 @@ body {
 
 .panel > .panel-heading {
     .panel-actions-container-left {
-        margin-left: -10px;
+        margin-left: calc(var(--10px) * -1);
     }
 
     .panel-actions-container {
         > span {
             display: inline-block;
-            padding: 4px 10px;
-            font-size: 14px;
+            padding: var(--4px) var(--10px);
+            font-size: var(--14px);
             line-height: 1.5;
             float: left;
         }
diff --git a/frontend/less/espo/elements/placement.less b/frontend/less/espo/elements/placement.less
index dd4c163944..f66f730a68 100644
--- a/frontend/less/espo/elements/placement.less
+++ b/frontend/less/espo/elements/placement.less
@@ -1,41 +1,37 @@
 .margin {
-    margin: @table-cell-padding 0;
+    margin: var(--table-cell-padding) 0;
 }
 
 .margin-top-sm {
-    margin-top: calc(@table-cell-padding / 2);
+    margin-top: var(--table-cell-padding-half);
 }
 
 .margin-top {
-    margin-top: @table-cell-padding;
+    margin-top: var(--table-cell-padding);
 }
 
 .margin-top-2x {
-    margin-top: @table-cell-padding * 2;
+    margin-top: calc(var(--table-cell-padding) * 2);
 }
 
 .margin-bottom-sm {
-    margin-bottom: calc(@table-cell-padding / 2);
+    margin-bottom: var(--table-cell-padding-half);
 }
 
 .margin-bottom {
-    margin-bottom: @table-cell-padding;
-}
-
-.margin-bottom-sm {
-    margin-bottom: calc(@table-cell-padding / 2);
+    margin-bottom: var(--table-cell-padding);
 }
 
 .margin-bottom-2x {
-    margin-bottom: @table-cell-padding * 2;
+    margin-bottom: calc(var(--table-cell-padding) * 2);
 }
 
 .margin-bottom-3x {
-    margin-bottom: @table-cell-padding * 3;
+    margin-bottom: calc(var(--table-cell-padding) * 3);
 }
 
 .margin-bottom-4x {
-    margin-bottom: @table-cell-padding * 4;
+    margin-bottom: calc(var(--table-cell-padding) * 4);
 }
 
 .margin-bottom.margin {
diff --git a/frontend/less/espo/elements/popup-notification.less b/frontend/less/espo/elements/popup-notification.less
index e3d9c8c1ad..1224642a55 100644
--- a/frontend/less/espo/elements/popup-notification.less
+++ b/frontend/less/espo/elements/popup-notification.less
@@ -11,7 +11,7 @@
 
 .popup-notification {
     width: 400px;
-    padding: @panel-padding;
+    padding: var(--panel-padding);
     background-color: @panel-bg;
     border: 2px solid @main-gray;
     margin-top: 10px;
diff --git a/frontend/less/espo/elements/record.less b/frontend/less/espo/elements/record.less
index 24bde5e826..435e56e3ae 100644
--- a/frontend/less/espo/elements/record.less
+++ b/frontend/less/espo/elements/record.less
@@ -1,6 +1,6 @@
 .record .record-grid {
     display: grid;
-    grid-column-gap: @container-padding;
+    grid-column-gap: var(--container-padding);
 
     grid-template-columns: minmax(auto, 67%) minmax(auto, 33%);
 
@@ -29,7 +29,7 @@
 
 .modal-body {
     .record .record-grid {
-        grid-column-gap: @padding-base-horizontal;
+        grid-column-gap: var(--padding-base-horizontal);
     }
 }
 
@@ -46,7 +46,7 @@
 .record {
     .tabs {
         > button.btn {
-            font-size: 15px;
+            font-size: var(--15px);
             height: 40px;
 
             &.invalid {
@@ -122,7 +122,7 @@
     }
 
     .panel + .panel.panels-show-more-delimiter {
-        padding: @padding-large-vertical @panel-padding;
+        padding: var(--padding-large-vertical) var(--panel-padding);
         border-top-width: 0;
     }
 
diff --git a/frontend/less/espo/elements/table.less b/frontend/less/espo/elements/table.less
index 69183220b3..9ca81a3332 100644
--- a/frontend/less/espo/elements/table.less
+++ b/frontend/less/espo/elements/table.less
@@ -13,19 +13,19 @@ table.table,
         > tr {
             > th:first-child,
             > td:first-child {
-                padding-left: @padding-base-horizontal;
+                padding-left: var(--padding-base-horizontal);
 
                 @media screen and (max-width: (@screen-sm-min - 1px)) {
-                    padding-left: @table-cell-padding;
+                    padding-left: var(--table-cell-padding);
                 }
             }
 
             > th:last-child,
             > td:last-child {
-                padding-right: @padding-base-horizontal;
+                padding-right: var(--padding-base-horizontal);
 
                 @media screen and (max-width: (@screen-sm-min - 1px)) {
-                    padding-right: @table-cell-padding;
+                    padding-right: var(--table-cell-padding);
                 }
             }
         }
@@ -100,9 +100,9 @@ table.table-bottom-bordered {
 
 table.table > tbody td > .list-row-buttons button {
     position: relative;
-    margin-top: 3px;
-    padding-left: 8px;
-    padding-right: 8px;
+    margin-top: var(--3px);
+    padding-left: var(--table-cell-padding);
+    padding-right: var(--table-cell-padding);
 }
 
 .table.table-no-overflow {
@@ -119,12 +119,12 @@ table.table-fixed {
 }
 
 .table.less-padding > thead > tr > th,
-.table.less-padding > tbody >tr > th,
-.table.less-padding > tfoot >tr > th,
-.table.less-padding > thead >tr > td,
-.table.less-padding > tbody >tr > td,
-.table.less-padding > tfoot >tr > td {
-    padding: @table-cell-padding @table-cell-less-padding @table-cell-padding @table-cell-less-padding;
+.table.less-padding > tbody > tr > th,
+.table.less-padding > tfoot > tr > th,
+.table.less-padding > thead > tr > td,
+.table.less-padding > tbody > tr > td,
+.table.less-padding > tfoot > tr > td {
+    padding: var(--table-cell-padding) var(--table-cell-less-padding) var(--table-cell-padding) var(--table-cell-less-padding);
 }
 
 table.no-margin {
diff --git a/frontend/less/espo/elements/type.less b/frontend/less/espo/elements/type.less
index 7833887f7c..715d260788 100644
--- a/frontend/less/espo/elements/type.less
+++ b/frontend/less/espo/elements/type.less
@@ -1,84 +1,40 @@
-.margin {
-    margin: @table-cell-padding 0;
-}
-
-.margin-top-sm {
-    margin-top: calc(@table-cell-padding / 2);
-}
-
-.margin-top {
-    margin-top: @table-cell-padding;
-}
-
-.margin-top-2x {
-    margin-top: @table-cell-padding * 2;
-}
-
-.margin-bottom-sm {
-    margin-bottom: calc(@table-cell-padding / 2);
-}
-
-.margin-bottom {
-    margin-bottom: @table-cell-padding;
-}
-
-.margin-bottom-sm {
-    margin-bottom: calc(@table-cell-padding / 2);
-}
-
-.margin-bottom-2x {
-    margin-bottom: @table-cell-padding * 2;
-}
-
-.margin-bottom-3x {
-    margin-bottom: @table-cell-padding * 3;
-}
-
-.margin-bottom-4x {
-    margin-bottom: @table-cell-padding * 4;
-}
-
-.margin-bottom.margin {
-    margin-top: 0;
-}
-
 .center-align {
     text-align: center;
 }
 
 h1 {
-    font-size: 30px;
-    margin-top: 20px;
-    margin-bottom: 20px;
+    font-size: var(--30px);
+    margin-top: var(--20px);
+    margin-bottom: var(--20px);
 }
 
 h2 {
-    font-size: 26px;
-    margin-top: 19px;
-    margin-bottom: 16px;
+    font-size: var(--26px);
+    margin-top: var(--19px);
+    margin-bottom: var(--16px);
 }
 
 h3 {
-    font-size: 22px;
-     margin-bottom: 12px;
+    font-size: var(--22px);
+    margin-bottom: var(--12px);
 }
 
 h4 {
-    font-size: 18px;
+    font-size: var(--18px);
 }
 
 h5 {
     font-weight: 600;
-    margin-top: 10px;
-    margin-bottom: 10px;
-    font-size: 15px;
+    margin-top: var(--10px);
+    margin-bottom: var(--10px);
+    font-size: var(--15px);
     color: @gray-soft;
 }
 
 h6 {
     font-weight: 600;
     color: @gray-soft;
-    font-size: 14px;
+    font-size: var(--14px);
 }
 
 code {
@@ -94,7 +50,7 @@ b, strong {
 }
 
 .text-smaller {
-    font-size: @font-size-smaller;
+    font-size: calc(var(--font-size-small) + var(--1px));
 }
 
 .text-italic {
@@ -142,7 +98,7 @@ hr {
 }
 
 blockquote {
-    font-size: @font-size-base;
+    font-size: var(--font-size-base);
     border-left: 3px solid var(--blockquote-border-color);
 }
 
@@ -151,7 +107,7 @@ blockquote {
 }
 
 .well {
-    padding: @well-padding;
+    padding: var(--panel-padding);
 }
 
 .badge {
@@ -159,13 +115,13 @@ blockquote {
 }
 
 .badge-circle {
-    width: 8px;
-    height: 8px;
-    border-radius: 4px;
+    width: var(--8px);
+    height: var(--8px);
+    border-radius: var(--4px);
     text-align: center;
     display: table-cell;
-    font-size: 5px;
-    line-height: 8px;
+    font-size: var(--5px);
+    line-height: var(--8px);
     background-color: @main-gray;
 }
 
@@ -179,7 +135,7 @@ blockquote {
 
 label {
     font-weight: 400;
-    margin-bottom: 3px;
+    margin-bottom: var(--3px);
 }
 
 .label {
@@ -193,7 +149,7 @@ label {
 .label-md {
     font-weight: normal;
     font-size: 100%;
-    padding: @label-padding-medium;
+    padding: var(--1px) var(--7px) var(--2px);
     top: 0;
     line-height: 1.8;
 }
@@ -238,6 +194,11 @@ label {
     }
 }
 
+small,
+.small {
+    font-size: 0.85em;
+}
+
 .small .label-md,
 .label-lg.small {
     font-size: 75%;
diff --git a/frontend/less/espo/iframe/iframe.less b/frontend/less/espo/iframe/iframe.less
index 94418e6780..015725f57c 100644
--- a/frontend/less/espo/iframe/iframe.less
+++ b/frontend/less/espo/iframe/iframe.less
@@ -1,6 +1,6 @@
 
 body, table {
-    font-size: @font-size-base;
+    font-size: var(--font-size-base);
     font-family: @font-family-base;
     color: @text-color;
 }
@@ -15,7 +15,7 @@ body {
     }
 
     background-color: var(--panel-bg);
-    line-height: @line-height-base;
+    line-height: var(--line-height-base);
 }
 
 body {
@@ -62,26 +62,24 @@ table {
 .table>thead>tr>td,
 .table>tbody>tr>td,
 .table>tfoot>tr>td {
-    padding: @table-cell-padding;
-    line-height: @line-height-base;
+    padding: var(--table-cell-padding);
+    line-height: var(--line-height-base);
     vertical-align: top;
     border-top: 1px solid @default-border-color;
 }
 
 pre {
     display: block;
-    padding: ((@line-height-computed - 1) / 2);
-    margin: 0 0 (@line-height-computed / 2);
-    font-size: (@font-size-base - 1);
-    line-height: @line-height-base;
+    padding: calc((var(--line-height-computed) - 1px) / 2);
+    margin: 0 0 var(--line-height-computed-half);
+    font-size: calc(var(--font-size-base) - var(--1px));
+    line-height: var(--line-height-base);
     word-break: break-all;
     word-wrap: break-word;
     color: var(--code-color);
     background-color: var(--code-bg);
     border: 1px solid var(--code-border-color);
 
-    border-radius: @border-radius-base;
-
     code {
         padding: 0;
         font-size: inherit;
diff --git a/frontend/less/espo/layout-side.less b/frontend/less/espo/layout-side.less
index b56a81579b..6be2751ebb 100644
--- a/frontend/less/espo/layout-side.less
+++ b/frontend/less/espo/layout-side.less
@@ -2,9 +2,10 @@ body[data-navbar="side"] {
     #navbar .navbar {
         .navbar-right-container {
             input.global-search-input {
-                width: 260px;
-                padding-bottom: 4px;
-                padding-top: 4px;
+                width: var(--260px);
+                padding-bottom: var(--4px);
+                padding-top: var(--4px);
+                max-width: 50vw;
             }
         }
     }
@@ -84,7 +85,7 @@ body[data-navbar="side"] {
 
                 .nav li.tab-group {
                     span.full-label {
-                        padding-right: 8px;
+                        padding-right: var(--8px);
                     }
 
                     .group-caret {
@@ -98,15 +99,15 @@ body[data-navbar="side"] {
                     overflow-y: hidden;
 
                     > li.tab-group .group-caret {
-                        right: 13px;
+                        right: var(--13px);
                     }
 
                     > li.tab-divider {
                         > div {
-                            padding-top: calc(@navbar-tab-vertical-padding + 4px);
-                            padding-bottom: @navbar-tab-vertical-padding;
-                            padding-left: @navbar-tab-left-padding;
-                            padding-right: @navbar-tab-right-padding;
+                            padding-top: calc(var(--navbar-tab-vertical-padding) + var(--4px));
+                            padding-bottom: var(--navbar-tab-vertical-padding);
+                            padding-left: var(--navbar-tab-left-padding);
+                            padding-right: var(--navbar-tab-right-padding);
                             display: block;
 
                             > .label-text {
@@ -124,12 +125,12 @@ body[data-navbar="side"] {
                     > li.more {
                         > ul {
                             > li.tab-divider {
-                                min-height: 10px;
-                                margin-top: 9px;
+                                min-height: var(--10px);
+                                margin-top: var(--9px);
 
                                 &:not(:first-child):before {
-                                    height: 1px;
-                                    margin: 9.5px 0;
+                                    height: var(--1px);
+                                    margin: calc(var(--19px) / 2) 0;
                                     overflow: hidden;
                                     background-color: var(--dropdown-divider-bg);
                                     display: block;
@@ -138,7 +139,7 @@ body[data-navbar="side"] {
 
                                 &:first-child {
                                     > div {
-                                        padding-top: @navbar-tab-vertical-padding;
+                                        padding-top: var(--navbar-tab-vertical-padding);
                                     }
                                 }
 
@@ -147,10 +148,10 @@ body[data-navbar="side"] {
                                         display: none;
                                     }
 
-                                    padding-top: calc(@navbar-tab-vertical-padding - 3px);
-                                    padding-bottom: @navbar-tab-vertical-padding;
-                                    padding-left: @navbar-tab-left-padding;
-                                    padding-right: @navbar-tab-right-padding;
+                                    padding-top: calc(var(--navbar-tab-vertical-padding) - var(--3px));
+                                    padding-bottom: var(--navbar-tab-vertical-padding);
+                                    padding-left: var(--navbar-tab-left-padding);
+                                    padding-right: var(--navbar-tab-right-padding);
 
                                     > .label-text {
                                         color: var(--gray-light);
@@ -165,9 +166,9 @@ body[data-navbar="side"] {
                 a.minimizer {
                     color: @navbar-inverse-link-color;
                     text-decoration: none;
-                    margin-top: 5px;
+                    margin-top: var(--5px);
                     display: inline-block;
-                    margin-left: @navbar-tab-left-padding + 3px;
+                    margin-left: calc(var(--navbar-tab-left-padding) + var(--3px));
                 }
 
                 a.minimizer > span.left {
@@ -180,26 +181,26 @@ body[data-navbar="side"] {
 
                 a.side-menu-button {
                     width: @navbar-minimized-width;
-                    padding-top: @navbar-tab-vertical-padding;
-                    padding-bottom: @navbar-tab-vertical-padding;
+                    padding-top: var(--navbar-tab-vertical-padding);
+                    padding-bottom: var(--navbar-tab-vertical-padding);
                     text-align: center;
                     display: none;
 
                     > span {
-                        width: 16px;
+                        width: var(--16px);
                         text-align: center;
                     }
 
-                    height: @navbar-logo-height;
+                    height: var(--navbar-height);
                 }
 
                 .side-menu-backdrop {
                     z-index: 1200;
                     position: fixed;
-                    bottom: 20px;
+                    bottom: var(--20px);
                     top: 0;
                     left: 0;
-                    height: @tob-bar-height;
+                    height: var(--top-bar-height);
                     width: 100%;
                     margin-left: @navbar-width;
                 }
@@ -219,26 +220,26 @@ body[data-navbar="side"] {
 
                 .navbar-brand img {
                     max-width: @navbar-width - @navbar-minimized-width;
-                    height: @navbar-logo-height;
+                    height: var(--navbar-height);
                 }
 
                 a.navbar-brand {
                     max-width: @navbar-width - @navbar-minimized-width;
-                    height: @navbar-logo-height;
+                    height: var(--navbar-height);
                     margin-left: 0;
                 }
 
                 .navbar-header {
                     width: @navbar-width;
-                    height: @navbar-header-height;
+                    height: var(--navbar-header-height);
                     display: block;
-                    padding-bottom: @navbar-header-vertical-padding;
-                    padding-top: @navbar-header-vertical-padding;
+                    padding-bottom: calc((var(--navbar-header-height) - var(--navbar-height)) / 2);
+                    padding-top: calc((var(--navbar-header-height) - var(--navbar-height)) / 2);
                 }
 
                 .navbar-header > a.minimizer {
-                    width: 30px;
-                    height: 30px;
+                    width: var(--30px);
+                    height: var(--30px);
                     float: right;
                 }
 
@@ -254,11 +255,11 @@ body[data-navbar="side"] {
                     justify-content: flex-end;
 
                     position: fixed;
-                    bottom: 20px;
+                    bottom: var(--20px);
                     top: 0;
                     left: 0;
-                    height: @tob-bar-height;
-                    width: calc(100vw - 18px);
+                    height: var(--top-bar-height);
+                    width: calc(100vw - var(--18px));
                     background-color: var(--navbar-bg);
                     margin-left: @navbar-width;
                     padding-right: @navbar-width;
@@ -269,7 +270,7 @@ body[data-navbar="side"] {
                         flex-direction: row;
 
                         > a {
-                            width: 34px;
+                            width: var(--34px);
 
                             &:focus {
                                 background-color: transparent;
@@ -279,7 +280,7 @@ body[data-navbar="side"] {
 
                     .global-search-container a.global-search-button {
                         color: var(--navbar-link-color);
-                        height: @tob-bar-height;
+                        height: var(--top-bar-height);
 
                         &:hover {
                             color: var(--navbar-link-hover-color);
@@ -287,11 +288,11 @@ body[data-navbar="side"] {
                     }
 
                     .quick-create-container {
-                        width: 34px;
+                        width: var(--34px);
                     }
 
                     .menu-container {
-                        width: 34px;
+                        width: var(--34px);
                     }
 
                     > li > a {
@@ -302,7 +303,7 @@ body[data-navbar="side"] {
                             background-color: transparent;
                         }
 
-                        padding: 5px 10px;
+                        padding: var(--5px) var(--10px);
                     }
 
                     > li.open > a {
@@ -316,7 +317,7 @@ body[data-navbar="side"] {
                     }
 
                     .notifications-badge-container {
-                        width: 34px;
+                        width: var(--34px);
                     }
                 }
 
@@ -328,16 +329,16 @@ body[data-navbar="side"] {
                     }
 
                     li > a {
-                        padding-top: @navbar-tab-vertical-padding;
-                        padding-bottom: @navbar-tab-vertical-padding;
-                        padding-left: @navbar-tab-left-padding;
-                        padding-right: @navbar-tab-right-padding;
-                        height: @navbar-logo-height;
+                        padding-top: var(--navbar-tab-vertical-padding);
+                        padding-bottom: var(--navbar-tab-vertical-padding);
+                        padding-left: var(--navbar-tab-left-padding);
+                        padding-right: var(--navbar-tab-right-padding);
+                        height: var(--navbar-height);
                     }
 
                     li.tab > a {
-                        padding-left: @navbar-tab-left-padding - @navbar-color-border-width;
-                        padding-right: @navbar-tab-right-padding;
+                        padding-left: var(--navbar-tab-left-padding);
+                        padding-right: var(--navbar-tab-right-padding);
                     }
                 }
 
@@ -437,23 +438,24 @@ body[data-navbar="side"] {
 
         #global-search-input {
             width: 100% !important;
+            max-width: unset;
         }
     }
 
     #navbar {
         ul.tabs {
             > li > a {
-                height: @navbar-logo-height;
+                height: var(--navbar-height);
             }
 
             > li.more > ul > li > a > span.full-label {
-                padding-left: @navbar-tab-text-left-padding;
+                padding-left: var(--navbar-tab-text-left-padding);
                 position: static;
             }
 
             > li a > span.full-label {
                 position: static;
-                padding-left: @navbar-tab-text-left-padding;
+                padding-left: var(--navbar-tab-text-left-padding);
             }
 
             > li a > span.short-label {
@@ -471,7 +473,7 @@ body[data-navbar="side"] {
 
             > li span.short-label > span {
                 display: inline-block;
-                width: 16px;
+                width: var(--16px);
                 text-align: center;
             }
 
@@ -486,8 +488,8 @@ body[data-navbar="side"] {
 
         .navbar-header {
             > a.minimizer span {
-                margin-top: 7px;
-                margin-left: 8px;
+                margin-top: var(--7px);
+                margin-left: var(--8px);
             }
         }
 
@@ -503,7 +505,7 @@ body[data-navbar="side"] {
         }
 
         .navbar li.tab > a {
-            border-left-width: @navbar-color-border-width;
+            border-left-width: 0;
             border-left-style: solid;
             border-color: transparent;
 
@@ -542,7 +544,7 @@ body[data-navbar="side"] {
 
                 .navbar-header {
                     width: @navbar-minimized-width;
-                    height: @navbar-header-height;
+                    height: var(--navbar-header-height);
                 }
 
                 a.minimizer > span.left {
@@ -561,11 +563,11 @@ body[data-navbar="side"] {
                     width: @navbar-minimized-width;
 
                     > li > a {
-                        padding-left: @navbar-tab-left-padding;
+                        padding-left: var(--navbar-tab-left-padding);
                     }
 
                     > li.tab > a {
-                        padding-left: @navbar-tab-left-padding - @navbar-color-border-width;
+                        padding-left: var(--navbar-tab-left-padding);
                     }
 
                     > li > a > span.short-label {
@@ -582,12 +584,12 @@ body[data-navbar="side"] {
 
                     > li > a > span.short-label > .short-label-text {
                         position: relative;
-                        left: -1px;
+                        left: calc(var(--1px) * -1);
                         visibility: visible;
                     }
 
                     > li.tab-group .group-caret {
-                        right: 5px;
+                        right: var(--5px);
                     }
                 }
 
@@ -598,7 +600,7 @@ body[data-navbar="side"] {
             }
 
             #content {
-                padding-left: @navbar-minimized-width + @container-padding;
+                padding-left: ~"calc(" @navbar-minimized-width ~" + var(--container-padding))";
                 max-width: @container-max-width + @navbar-minimized-width;
             }
 
@@ -650,34 +652,34 @@ body[data-navbar="side"] {
         }
 
         &.has-navbar > .content {
-            padding-left: @navbar-width + @container-padding;
+            padding-left: ~"calc(" @navbar-width ~" + var(--container-padding))";
             max-width: @container-max-width + @navbar-width;
         }
 
-        padding-top: @tob-bar-height;
+        padding-top: var(--top-bar-height);
         height: 100%;
 
 
         > .content {
             height: auto;
             min-height: 100%;
-            padding-bottom: 42px;
+            padding-bottom: calc(var(--21px) * 2);
         }
 
         > footer {
             clear: both;
             position: relative;
-            height: 26px;
-            margin-top: -26px;
+            height: var(--26px);
+            margin-top: calc(var(--26px) * -1);
             margin-left: @navbar-width;
 
             p {
-                padding: 4px @panel-padding;
+                padding: var(--4px) var(--panel-padding);
             }
         }
 
         input.global-search-input {
-            height: @tob-bar-height !important;
+            height: var(--top-bar-height) !important;
             margin-top: 0 !important;
         }
     }
@@ -710,8 +712,8 @@ body[data-navbar="side"] {
     .list-sticky-bar {
         width: calc(~"100% - " @navbar-width);
         left: @navbar-width;
-        top: @tob-bar-height;
-        padding-left: @container-padding;
+        top: var(--top-bar-height);
+        padding-left: var(--container-padding);
     }
 
     &.minimized .list-sticky-bar {
@@ -736,28 +738,29 @@ body[data-navbar="side"] {
             .navbar-right-container {
                 input.global-search-input {
                     width: 100%;
+                    max-width: unset;
                 }
             }
         }
 
         > .content {
-            margin-top: -42px;
-            padding-top: 42px;
+            margin-top: calc(var(--21px) * -2);
+            padding-top: calc(var(--21px) * 2);
         }
 
         > header + .content {
-            margin-top: -95px;
-            padding-top: 95px;
-            margin-bottom: -20px;
-            padding-bottom: 20px;
+            margin-top: calc(var(--95px) * -1);
+            padding-top: var(--95px);
+            margin-bottom: calc(var(--20px) * -1);
+            padding-bottom: var(--20px);
         }
 
         > footer {
-            margin-top: 19px;
+            margin-top: var(--19px);
             height: unset;
 
             p {
-                padding: 2px @panel-padding 2px;
+                padding: var(--2px) var(--panel-padding) var(--2px);
             }
         }
 
@@ -779,12 +782,12 @@ body[data-navbar="side"] {
 
                     > table td:first-child,
                     > table th:first-child {
-                        padding-left: @panel-padding;
+                        padding-left: var(--panel-padding);
                     }
 
                     > table td:last-child,
                     > table th:last-child {
-                        padding-right: @panel-padding;
+                        padding-right: var(--panel-padding);
                     }
 
                     .list-with-border-radius();
@@ -817,12 +820,12 @@ body[data-navbar="side"] {
 
                         > table td:first-child,
                         > table th:first-child {
-                            padding-left: @panel-padding;
+                            padding-left: var(--panel-padding);
                         }
 
                         > table td:last-child,
                         > table th:last-child {
-                            padding-right: @panel-padding;
+                            padding-right: var(--panel-padding);
                         }
 
                         .list-with-border-radius();
@@ -848,12 +851,12 @@ body[data-navbar="side"] {
 
     .list-kanban {
         .kanban-head-container.sticked {
-            margin-top: @tob-bar-height;
+            margin-top: var(--top-bar-height);
         }
     }
 
     .stick-sub {
-        margin-top: @tob-bar-height;
+        margin-top: var(--top-bar-height);
 
         @media screen and (max-width: (@screen-sm-min - 1px)) {
             margin-top: 0;
@@ -862,21 +865,18 @@ body[data-navbar="side"] {
 
     @media screen and (min-width: @screen-sm-min) {
         .folders-container.sticked {
-            top: 75px;
-            //left: @navbar-width;
+            top: calc(var(--10px) * 7 + var(--5px));
         }
     }
 
     &.minimized {
         @media screen and (min-width: @screen-sm-min) {
-            .folders-container.sticked {
-                //left: @navbar-minimized-width;
-            }
+            .folders-container.sticked {}
         }
     }
 
     .alert {
-        min-height: @tob-bar-height;
+        min-height: var(--top-bar-height);
     }
 
     #navbar {
@@ -918,17 +918,17 @@ body[data-navbar="side"] {
         }
 
         #global-search-panel {
-            margin-top: @tob-bar-height;
+            margin-top: var(--top-bar-height);
         }
 
         #notifications-panel {
-            margin-top: @tob-bar-height;
+            margin-top: var(--top-bar-height);
         }
 
         .notifications-badge-container {
             > .notifications-button > .number-badge {
-                top: 3px;
-                left: 22px;
+                top: var(--3px);
+                left: var(--22px);
             }
         }
 
diff --git a/frontend/less/espo/layout-top.less b/frontend/less/espo/layout-top.less
index 08c42daf65..97c1674c00 100644
--- a/frontend/less/espo/layout-top.less
+++ b/frontend/less/espo/layout-top.less
@@ -1,21 +1,21 @@
 body:not([data-navbar="side"]) {
-    padding-top: 52px;
+    padding-top: calc(var(--10px) * 5 + var(--2px));
     height: 100%;
 
     > .content {
         height: auto;
         min-height: 100%;
-        padding-bottom: 42px;
+        padding-bottom: var(--42px);
     }
 
      > footer {
-        margin-top: -28px;
+        margin-top: calc(var(--28px) * -1);
         clear: both;
         position: relative;
-        height: 26px;
+        height: var(--26px);
 
         p {
-            padding: 6px @panel-padding 4px;
+            padding: var(--6px) var(--panel-padding) var(--4px);
         }
     }
 
@@ -23,23 +23,23 @@ body:not([data-navbar="side"]) {
         padding-top: 0;
 
         > .content {
-            margin-top: -42px;
-            padding-top: 42px;
+            margin-top: calc(var(--42px) * -1);
+            padding-top: var(--42px);
         }
 
         > header + .content {
-            margin-top: -95px;
-            padding-top: 95px;
-            margin-bottom: -20px;
-            padding-bottom: 20px;
+            margin-top: calc(var(--95px) * -1);
+            padding-top: var(--95px);
+            margin-bottom: calc(var(--20px) * -1);
+            padding-bottom: var(--20px);
         }
 
         > footer {
-            margin-top: 19px;
+            margin-top: var(--19px);
             height: unset;
 
             p {
-                padding: 2px @panel-padding 2px;
+                padding: var(--2px) var(--panel-padding) var(--2px);
             }
         }
     }
@@ -81,7 +81,7 @@ body:not([data-navbar="side"]) {
                     float: none;
                     flex-grow: 1;
                     justify-content: end;
-                    padding-right: 18px;
+                    padding-right: var(--18px);
                 }
 
                 @supports selector(::-webkit-scrollbar) {
@@ -98,11 +98,11 @@ body:not([data-navbar="side"]) {
 
         .navbar-brand {
             padding: 0;
-            width: @logo-width;
-            height: @logo-height;
+            width: var(--logo-width);
+            height: var(--navbar-height);
 
             img.logo {
-                max-width: @logo-width;
+                max-width: var(--logo-width);
             }
         }
 
@@ -129,7 +129,7 @@ body:not([data-navbar="side"]) {
 
             span.short-label > span {
                 display: inline-block;
-                width: 16px;
+                width: var(--16px);
                 text-align: center;
             }
 
@@ -147,12 +147,12 @@ body:not([data-navbar="side"]) {
 
                 > ul > li > ul > li > a,
                 > ul > li > a {
-                    padding-top: @navbar-tab-vertical-padding;
-                    padding-bottom: @navbar-tab-vertical-padding;
-                    height: 38px;
+                    padding-top: var(--navbar-tab-vertical-padding);
+                    padding-bottom: var(--navbar-tab-vertical-padding);
+                    height: var(--38px);
 
                     > span.full-label {
-                        padding-left: 30px;
+                        padding-left: var(--30px);
                         position: static;
                     }
 
@@ -175,24 +175,24 @@ body:not([data-navbar="side"]) {
 
         .navbar-right {
             > li > a {
-                width: 44px;
+                width: calc(var(--4px) * 10 + var(--4px));
             }
         }
 
         @media screen and (min-width: @screen-sm-min) {
             input.global-search-input {
-                width: 195px;
-                height: 30px;
-                padding-bottom: 4px;
-                padding-top: 4px;
+                width: calc(var(--190px));
+                height: var(--30px);
+                padding-bottom: var(--4px);
+                padding-top: var(--4px);
             }
 
             #global-search-panel {
-                margin-top: 1px;
+                margin-top: var(--1px);
             }
 
             .global-search-button {
-                margin-top: -1px;
+                margin-top: calc(var(--1px) * -1);
             }
 
             .navbar-right {
@@ -220,7 +220,7 @@ body:not([data-navbar="side"]) {
             }
 
             li.tab > a {
-                border-right-width: @navbar-color-border-width;
+                border-right-width: 0;
                 border-right-style: solid;
                 border-color: transparent;
             }
@@ -228,7 +228,7 @@ body:not([data-navbar="side"]) {
             ul.tabs {
                 > li a > span.full-label {
                     position: static;
-                    padding-left: 30px;
+                    padding-left: var(--30px);
                 }
 
                 > li a > span.short-label {
@@ -243,14 +243,14 @@ body:not([data-navbar="side"]) {
             }
 
             .global-search-button {
-                height: 33px;
+                height: var(--33px);
             }
         }
     }
 
     @media screen and (min-width: @screen-sm-min) {
         #navbar .navbar {
-            max-height: @navbar-height;
+            max-height: var(--navbar-height);
             overflow: hidden;
 
             ul.tabs {
@@ -258,31 +258,27 @@ body:not([data-navbar="side"]) {
                     display: block;
                     float: left;
                     position: relative;
-                    left: -4px;
-                    margin-right: 4px;
+                    left: calc(var(--4px) * -1);
+                    margin-right: var(--4px);
                 }
 
                 li.more > li > a {
-                    padding-left: 10px;
+                    padding-left: var(--10px);
                 }
             }
 
-            .navbar-header {
-                //width: @logo-width + 10px;
-            }
-
             ul.nav > li.tab > a {
-                border-bottom-width: @navbar-color-border-width;
+                border-bottom-width: 0;
                 border-bottom-style: solid;
                 border-color: transparent;
-                padding-bottom: floor(@navbar-padding-vertical - @navbar-color-border-width);
+                padding-bottom: var(--navbar-padding-vertical);
             }
 
             ul.dropdown-menu > li.tab > a {
-                border-left-width: @navbar-color-border-width;
+                border-left-width: 0;
                 border-left-style: solid;
                 border-color: transparent;
-                padding-left: 15px - @navbar-color-border-width;
+                padding-left: calc(1rem - var(--1px));
             }
 
             .nav > li.more > .dropdown-menu > li.tab-group > ul.dropdown-menu,
@@ -296,27 +292,23 @@ body:not([data-navbar="side"]) {
 
             .nav li.tab-group {
                 span.full-label {
-                    padding-right: 8px;
+                    padding-right: var(--8px);
                 }
             }
 
             ul.nav > li.tab-group > a {
                 > span.full-label {
-                    padding-right: 10px;
+                    padding-right: var(--10px);
                 }
 
                 > span.group-caret {
-                    top: 17px;
-                    -webkit-transform: rotate(90deg);
-                    -moz-transform: rotate(90deg);
-                    -ms-transform: rotate(90deg);
-                    -o-transform: rotate(90deg);
+                    top: var(--17px);
                     transform: rotate(90deg);
                 }
             }
 
             .navbar-form {
-                padding-top: 4px;
+                padding-top: var(--4px);
                 margin-top: 0;
                 margin-bottom: 0;
             }
@@ -338,8 +330,8 @@ body:not([data-navbar="side"]) {
     .list-sticky-bar {
         width: 100%;
         left: 0;
-        top: @navbar-height;
-        padding-left: @container-padding;
+        top: var(--navbar-height);
+        padding-left: var(--container-padding);
     }
 
     @media screen and (max-width: (@screen-sm-min - 1px)) {
@@ -361,12 +353,12 @@ body:not([data-navbar="side"]) {
 
                     > table td:first-child,
                     > table th:first-child {
-                        padding-left: @panel-padding;
+                        padding-left: var(--panel-padding);
                     }
 
                     > table td:last-child,
                     > table th:last-child {
-                        padding-right: @panel-padding;
+                        padding-right: var(--panel-padding);
                     }
 
                     .list-with-border-radius();
@@ -392,12 +384,12 @@ body:not([data-navbar="side"]) {
 
     .list-kanban {
         .kanban-head-container.sticked {
-            margin-top: @navbar-height;
+            margin-top: var(--navbar-height);
         }
     }
 
     .stick-sub {
-        margin-top: @navbar-height;
+        margin-top: var(--navbar-height);
 
         @media screen and (max-width: (@screen-sm-min - 1px)) {
             margin-top: 0;
@@ -406,8 +398,7 @@ body:not([data-navbar="side"]) {
 
     @media screen and (min-width: @screen-sm-min) {
         .folders-container.sticked {
-            top: 87px;
-            //left: 0;
+            top: calc(var(--8px) * 10 + var(--7px));
         }
     }
 }
diff --git a/frontend/less/espo/misc/colorpicker/colorpicker.less b/frontend/less/espo/misc/colorpicker/colorpicker.less
index bbd3cea314..aa049e2307 100644
--- a/frontend/less/espo/misc/colorpicker/colorpicker.less
+++ b/frontend/less/espo/misc/colorpicker/colorpicker.less
@@ -12,12 +12,6 @@
   background-image: url("@{imgBase64}");
 }
 
-.borderRadius(@size) {
-  -webkit-border-radius: @size;
-  -moz-border-radius: @size;
-  border-radius: @size;
-}
-
 .colorpicker-saturation {
   width: 100px;
   height: 100px;
@@ -29,7 +23,6 @@
     height: 5px;
     width: 5px;
     border: 1px solid #000;
-    .borderRadius(5px);
     position: absolute;
     top: 0;
     left: 0;
@@ -39,7 +32,6 @@
       height: 5px;
       width: 5px;
       border: 1px solid #fff;
-      .borderRadius(5px);
     }
   }
 }
@@ -86,7 +78,6 @@
   padding: 4px;
   min-width: 130px;
   margin-top: 1px;
-  .borderRadius(4px);
   z-index: 2500;
 }
 
diff --git a/frontend/less/espo/misc/datepicker/datepicker.less b/frontend/less/espo/misc/datepicker/datepicker.less
index 7bce99b50d..fafccfad04 100644
--- a/frontend/less/espo/misc/datepicker/datepicker.less
+++ b/frontend/less/espo/misc/datepicker/datepicker.less
@@ -15,7 +15,6 @@
 }
 
 .datepicker {
-  border-radius: @border-radius-base;
   &-inline {
     width: 220px;
   }
@@ -69,18 +68,13 @@
   }
   table {
     margin: 0;
-    -webkit-touch-callout: none;
-    -webkit-user-select: none;
-    -khtml-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
     user-select: none;
     tr {
       td, th {
         text-align: center;
         width: 30px;
         height: 30px;
-        border-radius: 4px;
+        border-radius: var(--border-radius-small);
         border: none;
       }
     }
@@ -246,8 +240,8 @@
     span {
       display: block;
       width: 23%;
-      height: 54px;
-      line-height: 54px;
+      height: calc(var(--32px) + var(--22px));
+      line-height: calc(var(--32px) + var(--22px));
       float: left;
       margin: 1%;
       cursor: pointer;
@@ -306,9 +300,9 @@
 
   // Basic styling for calendar-week cells
   .cw {
-    font-size: 10px;
-    width: 12px;
-    padding: 0 2px 0 5px;
+    font-size: var(--10px);
+    width: var(--12px);
+    padding: 0 var(--2px)0 var(--5px);
     vertical-align: middle;
   }
 }
@@ -328,11 +322,11 @@
   }
   .input-group-addon {
     width: auto;
-    min-width: 16px;
-    padding: 4px 5px;
-    line-height: @line-height-base;
+    min-width: var(--16px);
+    padding: var(--4px) var(--5px);
+    line-height: var(--line-height-base);
     border-width: 1px 0;
-    margin-left: -5px;
-    margin-right: -5px;
+    margin-left: calc(var(--5px) * -1);
+    margin-right: calc(var(--5px) * -1);
   }
 }
diff --git a/frontend/less/espo/misc/gridstack/gridstack.less b/frontend/less/espo/misc/gridstack/gridstack.less
index 4e9fc5d42e..083ea5d151 100644
--- a/frontend/less/espo/misc/gridstack/gridstack.less
+++ b/frontend/less/espo/misc/gridstack/gridstack.less
@@ -57,17 +57,9 @@
     background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjE2cHgiIGhlaWdodD0iMTZweCIgdmlld0JveD0iMCAwIDUxMS42MjYgNTExLjYyNyIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNTExLjYyNiA1MTEuNjI3OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxnPgoJPHBhdGggZD0iTTMyOC45MDYsNDAxLjk5NGgtMzYuNTUzVjEwOS42MzZoMzYuNTUzYzQuOTQ4LDAsOS4yMzYtMS44MDksMTIuODQ3LTUuNDI2YzMuNjEzLTMuNjE1LDUuNDIxLTcuODk4LDUuNDIxLTEyLjg0NSAgIGMwLTQuOTQ5LTEuODAxLTkuMjMxLTUuNDI4LTEyLjg1MWwtNzMuMDg3LTczLjA5QzI2NS4wNDQsMS44MDksMjYwLjc2LDAsMjU1LjgxMywwYy00Ljk0OCwwLTkuMjI5LDEuODA5LTEyLjg0Nyw1LjQyNCAgIGwtNzMuMDg4LDczLjA5Yy0zLjYxOCwzLjYxOS01LjQyNCw3LjkwMi01LjQyNCwxMi44NTFjMCw0Ljk0NiwxLjgwNyw5LjIyOSw1LjQyNCwxMi44NDVjMy42MTksMy42MTcsNy45MDEsNS40MjYsMTIuODUsNS40MjYgICBoMzYuNTQ1djI5Mi4zNThoLTM2LjU0MmMtNC45NTIsMC05LjIzNSwxLjgwOC0xMi44NSw1LjQyMWMtMy42MTcsMy42MjEtNS40MjQsNy45MDUtNS40MjQsMTIuODU0ICAgYzAsNC45NDUsMS44MDcsOS4yMjcsNS40MjQsMTIuODQ3bDczLjA4OSw3My4wODhjMy42MTcsMy42MTcsNy44OTgsNS40MjQsMTIuODQ3LDUuNDI0YzQuOTUsMCw5LjIzNC0xLjgwNywxMi44NDktNS40MjQgICBsNzMuMDg3LTczLjA4OGMzLjYxMy0zLjYyLDUuNDIxLTcuOTAxLDUuNDIxLTEyLjg0N2MwLTQuOTQ4LTEuODA4LTkuMjMyLTUuNDIxLTEyLjg1NCAgIEMzMzguMTQyLDQwMy44MDIsMzMzLjg1Nyw0MDEuOTk0LDMyOC45MDYsNDAxLjk5NHoiIGZpbGw9IiM2NjY2NjYiLz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8L3N2Zz4K);
     background-repeat: no-repeat;
     background-position: center;
-    -webkit-transform: rotate(45deg);
-    -moz-transform: rotate(45deg);
-    -ms-transform: rotate(45deg);
-    -o-transform: rotate(45deg);
     transform: rotate(45deg);
 }
 .grid-stack > .grid-stack-item > .ui-resizable-se {
-    -webkit-transform: rotate(-45deg);
-    -moz-transform: rotate(-45deg);
-    -ms-transform: rotate(-45deg);
-    -o-transform: rotate(-45deg);
     transform: rotate(-45deg);
 }
 .grid-stack > .grid-stack-item > .ui-resizable-nw {
@@ -122,16 +114,16 @@
     display: none !important;
 }
 .grid-stack > .grid-stack-item[gs-w="0"] {
-    width: 0%;
+    width: 0;
 }
 .grid-stack > .grid-stack-item[gs-x="0"] {
-    left: 0%;
+    left: 0;
 }
 .grid-stack > .grid-stack-item[gs-min-w="0"] {
-    min-width: 0%;
+    min-width: 0;
 }
 .grid-stack > .grid-stack-item[gs-max-w="0"] {
-    max-width: 0%;
+    max-width: 0;
 }
 .grid-stack > .grid-stack-item[gs-w="1"] {
     width: 8.3333333333%;
diff --git a/frontend/less/espo/misc/kanban.less b/frontend/less/espo/misc/kanban.less
index 43a74de62d..87650dff51 100644
--- a/frontend/less/espo/misc/kanban.less
+++ b/frontend/less/espo/misc/kanban.less
@@ -40,11 +40,10 @@ div.list-kanban > div > table {
         }
 
         > div {
-            padding-left: @table-cell-padding;
+            padding-left: var(--table-cell-padding);
             position: relative;
-            line-height: 28px;
+            line-height: var(--28px);
             height: 100%;
-            //width: ~"calc(100% - 7px)";
             background-color: var(--label-default-bg);
 
             .create-button {
@@ -164,7 +163,7 @@ div.list-kanban > div > table {
     td.group-column {
         vertical-align: top;
 
-        padding-top: @padding-base-horizontal;
+        padding-top: var(--padding-base-horizontal);
 
         > div {
             height: 100%;
@@ -207,11 +206,11 @@ div.list-kanban > div > table {
                 .field {
                     overflow-wrap: break-word;
                     word-wrap: break-word;
-                    font-size: @font-size-base;
+                    font-size: var(--font-size-base);
                     overflow: hidden;
 
                     &.field-large {
-                        font-size: @font-size-large;
+                        font-size: var(--font-size-large);
                         color: var(--gray);
 
                         &.text-muted {
@@ -232,7 +231,7 @@ div.list-kanban > div > table {
             }
 
             .panel-body {
-                padding: @table-cell-padding;
+                padding: var(--table-cell-padding);
             }
 
             .item-menu-container {
@@ -251,7 +250,7 @@ div.list-kanban > div > table {
             }
         }
 
-        margin-bottom: @padding-base-horizontal;
+        margin-bottom: var(--padding-base-horizontal);
 
         &.ui-sortable-helper {
             cursor: grabbing;
@@ -274,11 +273,11 @@ div.list-kanban > div > table {
     //padding-right: 3px;
 
     > .kanban-columns-container {
-        margin-left: -@padding-base-horizontal;
-        margin-right: -@padding-base-horizontal;
+        margin-left: calc(0rem - var(--padding-base-horizontal));
+        margin-right: calc(0rem - var(--padding-base-horizontal));
         > table {
             border-collapse: separate;
-            border-spacing: @padding-base-horizontal 0;
+            border-spacing: var(--padding-base-horizontal) 0;
         }
     }
 
@@ -316,7 +315,7 @@ div.list-kanban > div > table {
                         display: block !important;
                     }
                     display: grid !important;
-                    grid-column-gap: @padding-base-horizontal;
+                    grid-column-gap: var(--padding-base-horizontal);
                     grid-auto-columns: 1fr;
                     > td, th {
                         grid-row: 1;
diff --git a/frontend/less/espo/misc/selectize/custom.less b/frontend/less/espo/misc/selectize/custom.less
index 84944f8161..2775685aa0 100644
--- a/frontend/less/espo/misc/selectize/custom.less
+++ b/frontend/less/espo/misc/selectize/custom.less
@@ -2,7 +2,7 @@
 .selectize-control.input-sm.form-control {
     &.multi {
         .selectize-input {
-            font-size: @font-size-small;
+            font-size: var(--font-size-small);
             padding: 2px 7px 0;
 
             > .item {
@@ -17,12 +17,12 @@
 
     &.single {
         .selectize-input {
-            font-size: @font-size-small;
+            font-size: var(--font-size-small);
             padding: 3px 19px 3px 10px;
-            min-height: @input-height-small;
+            min-height: var(--input-height-small);
         }
 
-        height: @input-height-small;
+        height: var(--input-height-small);
     }
 
     .selectize-dropdown-content {
@@ -46,7 +46,7 @@
 }
 
 .form-control.selectize-control.single {
-    height: @input-height-base;
+    height: var(--input-height-base);
 }
 
 .selectize-control {
@@ -54,7 +54,7 @@
         > .selectize-input {
             > .item {
                 width: 100%;
-                height: @line-height-computed;
+                height: var(--line-height-computed);
                 overflow: hidden;
                 vertical-align: top;
                 text-overflow: ellipsis;
diff --git a/frontend/less/espo/misc/selectize/plugins/dropdown_header.less b/frontend/less/espo/misc/selectize/plugins/dropdown_header.less
index d93f822b44..55b1fd6da1 100644
--- a/frontend/less/espo/misc/selectize/plugins/dropdown_header.less
+++ b/frontend/less/espo/misc/selectize/plugins/dropdown_header.less
@@ -4,7 +4,6 @@
 	border-bottom: 1px solid @selectize-color-border;
 	//background: mix(@selectize-color-dropdown, @selectize-color-border, 85%);
 	background: @selectize-color-dropdown;
-	.selectize-border-radius(@selectize-border-radius @selectize-border-radius 0 0);
 }
 .selectize-dropdown-header-close {
 	position: absolute;
@@ -12,10 +11,10 @@
 	top: 50%;
 	color: @selectize-color-text;
 	opacity: 0.4;
-	margin-top: -12px;
-	line-height: 20px;
-	font-size: 20px !important;
+	margin-top: calc(var(--12px) * -1);
+	line-height: var(--20px);
+	font-size: var(--20px) !important;
 }
 .selectize-dropdown-header-close:hover {
 	color: var(--gray-dark-25);
-}
\ No newline at end of file
+}
diff --git a/frontend/less/espo/misc/selectize/plugins/remove_button.less b/frontend/less/espo/misc/selectize/plugins/remove_button.less
index aeb4e47a01..2032d07d16 100644
--- a/frontend/less/espo/misc/selectize/plugins/remove_button.less
+++ b/frontend/less/espo/misc/selectize/plugins/remove_button.less
@@ -12,7 +12,7 @@
 		width: 17px;
 		text-align: center;
 		font-weight: bold;
-		font-size: 12px;
+		font-size: var(--12px);
 		color: inherit;
 		text-decoration: none;
 		vertical-align: middle;
@@ -38,6 +38,6 @@
 		position: absolute;
 		right: 0;
 		top: 0;
-		font-size: 23px;
+		font-size: var(--23px);
 	}
 }
diff --git a/frontend/less/espo/misc/selectize/selectize.bootstrap3.less b/frontend/less/espo/misc/selectize/selectize.bootstrap3.less
index 673b9e4586..e62cd77703 100644
--- a/frontend/less/espo/misc/selectize/selectize.bootstrap3.less
+++ b/frontend/less/espo/misc/selectize/selectize.bootstrap3.less
@@ -20,7 +20,7 @@
 
 @selectize-font-family: inherit;
 @selectize-font-size: inherit;
-@selectize-line-height: @line-height-computed;
+@selectize-line-height: var(--line-height-computed);
 
 //@selectize-color-text: @text-color;
 @selectize-color-highlight: rgba(255,237,40,0.4);
@@ -49,22 +49,21 @@
 @selectize-shadow-input-error: inset 0 1px 1px rgba(0, 0, 0, .075);
 //@selectize-shadow-input-error-focus: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px lighten(@selectize-color-input-error, 20%);
 @selectize-border: 1px solid @input-border;
-@selectize-border-radius: @input-border-radius;
 
 @selectize-width-item-border: 0;
-@selectize-padding-x: @padding-base-horizontal;
-@selectize-padding-y: @padding-base-vertical;
-@selectize-padding-dropdown-item-x: @padding-base-horizontal;
+@selectize-padding-x: var(--padding-base-horizontal);
+@selectize-padding-y: var(--padding-base-vertical);
+@selectize-padding-dropdown-item-x: var(--padding-base-horizontal);
 @selectize-padding-dropdown-item-y: 3px;
 @selectize-padding-item-x: 3px;
-@selectize-padding-item-y: 1px;
+@selectize-padding-item-y: var(--1px);
 @selectize-margin-item-x: 3px;
 @selectize-margin-item-y: 3px;
 @selectize-caret-margin: 0;
 
 @selectize-arrow-size: 5px;
 @selectize-arrow-color: @selectize-color-text;
-@selectize-arrow-offset: @selectize-padding-x + 5px;
+@selectize-arrow-offset: calc(var(--padding-base-horizontal) + var(--5px));
 
 .selectize-dropdown, .selectize-dropdown.form-control {
 	height: auto;
@@ -72,16 +71,13 @@
 	margin: 2px 0 0 0;
 	z-index: @zindex-dropdown;
 	background: @selectize-color-dropdown;
-	border: 1px solid @dropdown-fallback-border;
 	border: 1px solid @dropdown-border;
-	.selectize-border-radius(@border-radius-base);
 	.selectize-box-shadow(0 6px 12px rgba(0,0,0,.175));
 }
 
 .selectize-dropdown {
 	.optgroup-header {
-		font-size: @font-size-small;
-		line-height: @line-height-base;
+		line-height: var(--line-height-base);
 	}
 	.optgroup:first-child:before {
 		display: none;
@@ -90,8 +86,8 @@
 		content: ' ';
 		display: block;
 		.nav-divider();
-		margin-left: @selectize-padding-dropdown-item-x * -1;
-		margin-right: @selectize-padding-dropdown-item-x * -1;
+		margin-left: calc(0rem - var(--padding-base-horizontal));
+		margin-right: calc(0rem - var(--padding-base-horizontal));
 	}
 }
 
@@ -108,11 +104,8 @@
 }
 
 .selectize-input {
-	min-height: @input-height-base;
+	min-height: var(--input-height-base);
 
-	&.dropdown-active {
-		.selectize-border-radius(@selectize-border-radius);
-	}
 	&.dropdown-active::before {
 		display: none;
 	}
@@ -138,11 +131,8 @@
 .selectize-control {
 	&.multi {
 		.selectize-input.has-items {
-			padding-left: @selectize-padding-x - @selectize-padding-item-x;
-			padding-right: @selectize-padding-x - @selectize-padding-item-x;
-		}
-		.selectize-input > div {
-			.selectize-border-radius(@selectize-border-radius - 1px);
+			padding-left: calc(var(--padding-base-horizontal) - var(--3px));
+			padding-right: calc(var(--padding-base-horizontal) - var(--3px));
 		}
 	}
 }
diff --git a/frontend/less/espo/misc/selectize/selectize.less b/frontend/less/espo/misc/selectize/selectize.less
index c2d8273b6f..71a20f1549 100644
--- a/frontend/less/espo/misc/selectize/selectize.less
+++ b/frontend/less/espo/misc/selectize/selectize.less
@@ -5,11 +5,6 @@
 
 // base styles
 
-@selectize-font-family: inherit;
-@selectize-font-smoothing: inherit;
-@selectize-font-size: 13px;
-@selectize-line-height: 18px;
-
 //@selectize-color-text: #303030;
 @selectize-color-border: #d0d0d0;
 @selectize-color-highlight: rgba(125,168,208,0.2);
@@ -40,7 +35,6 @@
 @selectize-shadow-input-focus: inset 0 1px 2px rgba(0,0,0,0.15);
 @selectize-border: 1px solid @selectize-color-border;
 @selectize-dropdown-border: 1px solid @selectize-color-dropdown-border;
-@selectize-border-radius: 3px;
 
 @selectize-width-item-border: 0;
 @selectize-max-height-dropdown: 200px;
@@ -98,10 +92,7 @@
 
 .selectize-dropdown, .selectize-input, .selectize-input input {
 	color: @selectize-color-text;
-	font-family: @selectize-font-family;
-	font-size: @selectize-font-size;
 	line-height: @selectize-line-height;
-	-webkit-font-smoothing: @selectize-font-smoothing;
 }
 
 .selectize-input, .selectize-control.single .selectize-input.input-active {
@@ -120,12 +111,13 @@
 	z-index: 1;
 	.selectize-box-sizing(border-box);
 	.selectize-box-shadow(@selectize-shadow-input);
-	.selectize-border-radius(@selectize-border-radius);
 
 	.selectize-control.multi &.has-items {
 		@padding-x: @selectize-padding-x;
-		@padding-top: @selectize-padding-y - @selectize-padding-item-y - @selectize-width-item-border;
-		@padding-bottom: @selectize-padding-y - @selectize-padding-item-y - @selectize-margin-item-y - @selectize-width-item-border;
+
+        @padding-top: calc(var(--padding-base-vertical) - var(--1px));
+        @padding-bottom: calc(var(--padding-base-vertical) - var(--1px) - var(--3px));
+
 		padding: @padding-top @padding-x @padding-bottom;
 	}
 
@@ -138,9 +130,6 @@
 	&.focus {
 		.selectize-box-shadow(@selectize-shadow-input-focus);
 	}
-	&.dropdown-active {
-		.selectize-border-radius(@selectize-border-radius @selectize-border-radius 0 0);
-	}
 
 	> * {
 		vertical-align: baseline;
@@ -219,7 +208,6 @@
 	border-top: 0 none;
 	.selectize-box-sizing(border-box);
 	.selectize-box-shadow(0 1px 3px rgba(0,0,0,0.1));
-	.selectize-border-radius(0 0 @selectize-border-radius @selectize-border-radius);
 
 	[data-selectable] {
 		cursor: pointer;
diff --git a/frontend/less/espo/misc/summernote/elements.less b/frontend/less/espo/misc/summernote/elements.less
index 8a3cf5048f..a082c4cbf8 100644
--- a/frontend/less/espo/misc/summernote/elements.less
+++ b/frontend/less/espo/misc/summernote/elements.less
@@ -64,12 +64,8 @@
   .background-clip(padding-box);
 }
 .opacity(@opacity: 0.5) {
-  -webkit-opacity: @opacity;
-  -khtml-opacity: @opacity;
-  -moz-opacity: @opacity;
   opacity: @opacity;
   @opperc: @opacity * 100;
-  -ms-filter: ~"progid:DXImageTransform.Microsoft.Alpha(opacity=@{opperc})";
   filter: ~"alpha(opacity=@{opperc})";
 }
 .transition-duration(@duration: 0.2s) {
@@ -79,10 +75,6 @@
   transition-duration: @duration;
 }
 .transform(...) {
-  -webkit-transform: @arguments;
-  -moz-transform: @arguments;
-  -o-transform: @arguments;
-  -ms-transform: @arguments;
   transform: @arguments;
 }
 .rotation(@deg:5deg){
@@ -108,9 +100,6 @@
   box-shadow: @arguments;
 }
 .box-sizing(@sizing: border-box) {
-  -ms-box-sizing: @sizing;
-  -moz-box-sizing: @sizing;
-  -webkit-box-sizing: @sizing;
   box-sizing: @sizing;
 }
 .user-select(@argument: none) {
diff --git a/frontend/less/espo/misc/summernote/summernote.less b/frontend/less/espo/misc/summernote/summernote.less
index a432eff17a..1a56df0f5c 100644
--- a/frontend/less/espo/misc/summernote/summernote.less
+++ b/frontend/less/espo/misc/summernote/summernote.less
@@ -28,7 +28,7 @@
       display: table-cell;
       vertical-align: middle;
       text-align: center;
-      font-size: 28px;
+      font-size: var(--28px);
       font-weight: bold;
     }
 
@@ -106,7 +106,7 @@
       border: none;
       box-shadow: none;
       font-family: Menlo, Monaco, monospace, sans-serif;
-      font-size: 14px;
+      font-size: var(--14px);
       color: #ccc;
       background-color: #222;
       resize: none;
@@ -191,7 +191,7 @@
       min-width: 0;
       padding: 5px;
       .note-dimension-picker {
-        font-size: 18px;
+        font-size: var(--18px);
         .note-dimension-picker-mousecatcher {
           position: absolute !important;
           z-index: 3;
@@ -239,7 +239,7 @@
         }
 
         .note-palette-title {
-          font-size: 12px;
+          font-size: var(--12px);
           margin: 2px 7px;
           text-align: center;
           border-bottom: 1px solid #eee;
@@ -249,7 +249,7 @@
           margin: 3px;
           padding: 0 3px;
           width: 100%;
-          font-size: 11px;
+          font-size: var(--11px);
           cursor: pointer;
           .rounded(5px);
         }
@@ -301,7 +301,7 @@
   }
 
   .note-fontsize-10 {
-    font-size: 10px;
+    font-size: var(--10px);
   }
 
   /* color palette for toolbar and popover */
@@ -338,7 +338,7 @@
   .note-image-dialog {
     .note-dropzone {
       min-height: 100px;
-      font-size: 30px;
+      font-size: var(--30px);
       line-height: 4; /* vertical-align */
       color: lightgray;
       text-align: center;
@@ -435,7 +435,7 @@
       margin: 5px;
       color: white;
       background-color: black;
-      font-size: 12px;
+      font-size: var(--12px);
       .rounded(5px);
       .opacity(0.7);
     }
diff --git a/frontend/less/espo/misc/timeline/timeline.less b/frontend/less/espo/misc/timeline/timeline.less
index 99457b1e66..22ecd7f24b 100644
--- a/frontend/less/espo/misc/timeline/timeline.less
+++ b/frontend/less/espo/misc/timeline/timeline.less
@@ -18,7 +18,7 @@
     white-space: nowrap;
     text-overflow: ellipsis;
     overflow: hidden;
-    padding: @table-cell-padding;
+    padding: var(--table-cell-padding);
 }
 
 .vis-foreground .vis-group,
diff --git a/frontend/less/espo/misc/wysiwyg.less b/frontend/less/espo/misc/wysiwyg.less
index 4dde420da1..be7cc065fa 100644
--- a/frontend/less/espo/misc/wysiwyg.less
+++ b/frontend/less/espo/misc/wysiwyg.less
@@ -8,7 +8,7 @@
 }
 
 .note-editable blockquote {
-    font-size: @font-size-base;
+    font-size: var(--font-size-base);
 }
 
 .note-editor {
@@ -36,8 +36,8 @@
     .note-editing-area {
         ul,
         ol {
-            margin-top: (@line-height-computed / 2);
-            margin-bottom: (@line-height-computed / 2);
+            margin-top: var(--line-height-computed-half);
+            margin-bottom: var(--line-height-computed-half);
 
             &:first-child {
                 margin-top: 0;
@@ -74,11 +74,11 @@
 
     .panel-heading {
         padding: 5px 5px 0 5px;
-        min-height: calc(30px + 10px);
+        min-height: calc(var(--30px)+ var(--10px));
     }
 
     .note-editable {
-        min-height: 39px;
+        min-height: var(--39px);
 
         table.bordered {
             &, th, td {
@@ -103,7 +103,7 @@
             background-color: var(--input-bg);
             border-bottom-left-radius: var(--border-radius);
             border-bottom-right-radius: var(--border-radius);
-            height: 8px;
+            height: var(--8px);
         }
 
         output.note-status-output {
@@ -154,18 +154,18 @@ body .note-editor {
 .note-editor,
 .wysiwyg-iframe-container {
     + .show-quote-button {
-        padding: 1px 4px;
-        height: 14px;
-        line-height: 4px;
-        width: 26px;
+        padding: var(--1px) var(--4px);
+        height: var(--14px);
+        line-height: var(--4px);
+        width: var(--26px);
     }
 }
 
 .note-editor {
     + .show-quote-button {
         position: relative;
-        top: -27px;
-        left: 10px;
+        top: calc(var(--27px) * -1);
+        left: var(--10px);
     }
 
     &.codeview {
@@ -176,7 +176,7 @@ body .note-editor {
 
     &:has(+ .show-quote-button):not(.codeview) {
         .note-editable {
-           padding-bottom: 26px;
+           padding-bottom: var(--26px);
         }
     }
 }
diff --git a/frontend/less/espo/root-variables.less b/frontend/less/espo/root-variables.less
index efd66eb732..fb53a31463 100644
--- a/frontend/less/espo/root-variables.less
+++ b/frontend/less/espo/root-variables.less
@@ -1,4 +1,124 @@
 :root {
+
+    --1px: 0.0625rem;
+    --2px: 0.125rem;
+    --3px: 0.1875rem;
+    --4px: 0.25rem;
+    --5px: 0.3125rem;
+    --6px: 0.375rem;
+    --7px: 0.4375rem;
+    --8px: 0.5rem;
+    --9px: 0.5625rem;
+    --10px: 0.625rem;
+    --11px: 0.688rem;
+    --12px: 0.75rem;
+    --13px: 0.8125rem;
+    --14px: 0.875rem;
+    --15px: 0.9375rem;
+    --16px: 1rem;
+    --17px: 1.0625rem;
+    --18px: 1.125rem;
+    --19px: 1.1875rem;
+    --20px: 1.25rem;
+    --21px: 1.3125rem;
+    --22px: 1.375rem;
+    --23px: 1,4375rem;
+    --24px: 1.5rem;
+    --25px: 1.5625rem;
+    --26px: 1.625rem;
+    --27px: 1.6875rem;
+    --28px: 1.75rem;
+    --29px: 1.8125rem;
+    --30px: 1.875rem;
+    --31px: 1.9375rem;
+    --32px: 2rem;
+    --33px: 2.0625rem;
+    --34px: 2.125rem;
+    --35px: 2.1875rem;
+    --36px: 2.25rem;
+
+    --38px: 2.375rem;
+    --39px: 2.4375rem;
+    --42px: 2.625rem;
+    --43px: 2.6875rem;
+    --46px: 2.875.rem;
+    --65px: 4.0625rem;
+    --94px: 5.875rem;
+    --95px: 5.9375rem;
+    --100px: 6.25rem;
+    --164px: 10.25rem;
+    --190px: 11.875rem;
+    --246px: 15.375rem;
+    --260px: 16.25rem;
+    --340px: 21.25rem;
+    --500px: 31.25rem;
+    --550px: 34.375rem;
+    --600px: 37.5rem;
+    --640px: 40rem;
+    --740px: 46.25rem;
+    --900px: 56.25rem;
+
+    --font-size-base: var(--14px);
+    --font-size-large: var(--18px);
+    --font-size-small: var(--12px);
+
+    --line-height-base: 1.5;
+    --line-height-large: 1.3333333;
+    --line-height-small: 1.5;
+
+    --line-height-computed: var(--21px);
+
+    --table-cell-padding: var(--8px);
+    --table-cell-less-padding: var(--3px);
+
+    --navbar-height: var(--39px);
+    --navbar-header-height: var(--65px);
+    --navbar-tab-vertical-padding: var(--9px);
+    --navbar-tab-left-padding: var(--15px);
+    --navbar-tab-right-padding: var(--20px);
+    --navbar-tab-text-left-padding: var(--36px);
+
+    --top-bar-height: var(--30px);
+    --logo-width: var(--164px);
+
+    --grid-gutter-width: var(--16px);
+
+    --container-padding: var(--15px);
+
+    --panel-padding: var(--14px);
+
+    --form-group-margin-bottom: var(--12px);
+
+    --padding-base-vertical: var(--6px);
+    --padding-base-horizontal: var(--10px);
+    --padding-small-vertical: var(--5px);
+    --padding-small-horizontal: var(--10px);
+    --padding-large-vertical: var(--10px);
+    --padding-large-horizontal: var(--16px);
+
+    --modal-inner-padding: var(--panel-padding);
+    --modal-title-padding: var(--padding-base-horizontal);
+    --modal-title-line-height: var(--27px);
+
+    // @todo Compute by adding font-size, two vertical paddings and two borders?
+    --input-height-base: var(--35px);
+    --input-height-small: var(--29px);
+    --input-height-large: var(--46px);
+
+    --grid-column-width-xxsmall: var(--100px);
+    --grid-column-width-xsmall: var(--190px);
+    --grid-column-width-small: var(--246px);
+    --grid-column-width-medium: var(--340px);
+
+    // computed
+
+    --navbar-padding-vertical: calc((var(--navbar-height) - var(--line-height-computed)) / 2);
+    --line-height-computed-half: calc(var(--line-height-computed) / 2);
+    --table-cell-padding-half: calc(var(--table-cell-padding) / 2);
+    --grid-gutter-width-half: calc(var(--grid-gutter-width) / 2);
+
+    // color and style
+
     --body-bg: @body-bg-value;
     --panel-bg: @panel-bg-value;
     --main-gray: @main-gray-value;
diff --git a/frontend/less/espo/value-variables.less b/frontend/less/espo/value-variables.less
index 2cc5120486..0d68452dbd 100644
--- a/frontend/less/espo/value-variables.less
+++ b/frontend/less/espo/value-variables.less
@@ -93,13 +93,13 @@
 @link-color-value: @brand-primary-value;
 @link-hover-color-value: darken(@link-color-value, 15%);
 
-@panel-bg-value: #ffffff;
-// Should be in px units to work in CSS math functions.
-@panel-border-width-value: 0px;
-@panel-heading-height-value: 30px;
-@panel-heading-font-size-value: 15px;
+// Should be in with unit to work in CSS math functions.
+@panel-border-width-value: 0rem;
+@panel-heading-height-value: var(--30px);
+@panel-heading-font-size-value: var(--15px);
+@vertical-gap-value: var(--16px);
 
-@vertical-gap-value: 16px;
+@panel-bg-value: #ffffff;
 
 @table-bg-value: @panel-bg-value;
 @table-bg-accent-value: #f9f9f9;
diff --git a/frontend/less/espo/variables.less b/frontend/less/espo/variables.less
index ea260a5a28..376ed3c8b3 100644
--- a/frontend/less/espo/variables.less
+++ b/frontend/less/espo/variables.less
@@ -1,14 +1,7 @@
 // Side navbar.
-@tob-bar-height: 30px;
 @navbar-width: 232px;
-@navbar-header-height: 65px;
-@navbar-logo-height: 39px;
-@navbar-header-vertical-padding: ((@navbar-header-height - @navbar-logo-height) / 2);
+
 @navbar-minimized-width: 48px;
-@navbar-tab-text-left-padding: 36px;
-@navbar-tab-left-padding: 15px;
-@navbar-tab-right-padding: 20px;
-@navbar-tab-vertical-padding: 9px;
 @navbar-tabs-margin-top: 0;
 @navbar-dropdown-min-width: 180px;
 
@@ -61,81 +54,36 @@
 
 @list-group-active-text-color: var(--main-gray-lighten-40);
 
-@input-height-small: 29px;
-
 @input-color: var(--input-color);
 @input-bg: var(--input-bg);
 @input-border: var(--input-border);
 @input-border-focus: var(--input-border-focus);
 @input-bg-disabled: var(--input-bg-disabled);
 
-@line-height-base: 1.5;
-@line-height-computed: floor(@font-size-base * @line-height-base);
 @headings-line-height: 1;
 
 @font-family-sans-serif: Inter, sans-serif;
 @font-family-base: @font-family-sans-serif;
-@headings-font-family: @font-family-base;
 
 @icon-font-path: "../../fonts/";
 
-@border-radius-base: 0;
-@border-radius-large: 0;
-@border-radius-small: 0;
-
-@container-tablet: none;
-@container-desktop: none;
-@container-large-desktop: none;
-
-@container-lg: @container-large-desktop;
-
-@panel-padding: 14px;
-@panel-heading-padding: 6px 10px;
-
-@container-padding: 15px;
-@grid-gutter-width: 16px;
-
-@modal-inner-padding: @panel-padding;
-
 @modal-header-border-color: var(--modal-header-border-color);
 @modal-header-bg: var(--modal-header-bg);
 @modal-footer-bg: var(--modal-footer-bg);
 @modal-content-bg: var(--modal-content-bg);
 
+// @todo Move.
 .container-fixed() {
     margin-right: auto;
     margin-left: auto;
-    padding-left: @container-padding;
-    padding-right: @container-padding;
+    padding-left: var(--container-padding);
+    padding-right: var(--container-padding);
+
     .clearfix();
 }
 
-//@line-height-small-computed: floor((@font-size-base * @line-height-small));
-@line-height-small-computed: 20px;
-
-@font-size-smaller: 13px;
-
-@table-cell-padding: 8px;
-
-@table-cell-less-padding: 3px;
-
-@button-radius: 0px;
-
-@modal-title-padding: 10px;
 @modal-backdrop-bg: var(--modal-backdrop-bg);
 
-@padding-base-vertical: 6px;
-@padding-base-horizontal: 10px;
-
-@padding-large-vertical: 10px;
-@padding-large-horizontal:  16px;
-
-@padding-small-vertical: 5px;
-@padding-small-horizontal: 10px;
-
-@navbar-height: 39px;
-@navbar-padding-vertical: ((@navbar-height - @line-height-computed) / 2);
-
 @state-success-bg: var(--state-success-bg);
 @state-success-text: var(--state-success-text);
 
@@ -231,7 +179,6 @@
 @list-group-border: @default-border-color;
 @panel-inner-border: @default-border-color;
 
-@thumbnail-border: @default-border-color;
 @table-border-color: @default-border-color;
 
 @navbar-default-toggle-hover-bg: @default-border-color;
@@ -251,44 +198,21 @@
 @zindex-tooltip: 2600;
 @navbar-collapse-max-height: none;
 
-@navbar-height-xsmall: 39px;
-@navbar-logo-height-xsmall: 39px;
-
 @login-panel-heading-bg: var(--login-panel-heading-bg);
 
 @login-logo-width: 181px;
 @login-logo-height: 43px;
 
-@logo-width: 164px;
-@logo-height: @navbar-height;
-
-@dashlet-unit-height: 155px;
-
-@navbar-panel-body-max-height: 600px;
-
-@form-group-margin-bottom: 12px;
-
-@modal-title-line-height: floor(@font-size-h4 * @line-height-base);
-
-@navbar-color-border-width: 0;
-
 @container-max-width: 1440px;
 
-@grid-column-width-xxsmall: 100px;
-@grid-column-width-xsmall: 190px;
-@grid-column-width-small: 246px;
-@grid-column-width-medium: 340px;
-
 @navbar-inverse-toggle-border-color: transparent;
 
 @label-padding-small: .09em .5em .2em;
-@label-padding-medium: 1px 7px 2px;
 
-@list-table-sm-screen-min-width: 500px;
-@notifications-panel-width: 640px;
-@global-search-panel-width: 600px;
-
-@well-padding: 14px;
+@list-table-sm-screen-min-width: var(--500px);
+@navbar-panel-body-max-height: var(--600px);
+@notifications-panel-width: ~"min(var(--640px), 80vw)";
+@global-search-panel-width: ~"min(var(--600px), 80vw)";
 
 @dropdown-bg: var(--dropdown-bg);
 @dropdown-link-hover-color: var(--dropdown-link-hover-color);
diff --git a/public/install/css/install.css b/public/install/css/install.css
index bfd0e9e8de..106a8dcd21 100644
--- a/public/install/css/install.css
+++ b/public/install/css/install.css
@@ -132,7 +132,7 @@ span.ok {
 }
 
 .likes p {
-	font-size: 15px;
+	font-size: var(--15px);
 }
 
 .main-header.panel-heading {