diff --git a/frontend/less/espo-rtl/custom.less b/frontend/less/espo-rtl/custom.less
index 1af2dbcff1..ef7ee269a4 100644
--- a/frontend/less/espo-rtl/custom.less
+++ b/frontend/less/espo-rtl/custom.less
@@ -292,7 +292,7 @@ td.cell[data-name="buttons"] > .btn-group {
     }
 }
 
-@media screen and (max-width: (@screen-sm-min - 1px)) {
+@media screen and (max-width: @screen-xs-max) {
     .search-row .search-right-buttons-group {
         float: left;
     }
@@ -344,7 +344,7 @@ div.list-kanban > div > table {
      left: 9px;
      right: auto;
 
-     @media screen and (max-width: (@screen-sm-min - 1px)) {
+     @media screen and (max-width: @screen-xs-max) {
          right: auto;
          left: 5px;
      }
@@ -453,7 +453,7 @@ table.table-admin-panel tr > td:first-child > div > a {
         > td:first-child {
             padding-right: var(--padding-base-horizontal);
 
-            @media screen and (max-width: (@screen-sm-min - 1px)) {
+            @media screen and (max-width: @screen-xs-max) {
                 padding-right: var(--table-cell-padding);
             }
         }
@@ -462,7 +462,7 @@ table.table-admin-panel tr > td:first-child > div > a {
         > td:last-child {
             padding-left: var(--padding-base-horizontal);
 
-                @media screen and (max-width: (@screen-sm-min - 1px)) {
+                @media screen and (max-width: @screen-xs-max) {
                     padding-left: var(--table-cell-padding);
                 }
             }
diff --git a/frontend/less/espo-rtl/layout-top.less b/frontend/less/espo-rtl/layout-top.less
index 4dc822e1db..0ee15c6abf 100644
--- a/frontend/less/espo-rtl/layout-top.less
+++ b/frontend/less/espo-rtl/layout-top.less
@@ -42,7 +42,7 @@ body:not([data-navbar="side"]) {
         }
     }
 
-    @media screen and (max-width: (@screen-sm-min - 1px)) {
+    @media screen and (max-width: @screen-xs-max) {
         #navbar .navbar {
             ul.tabs {
                 > li a > span.full-label {
diff --git a/frontend/less/espo/bootstrap/variables.less b/frontend/less/espo/bootstrap/variables.less
index beb5be3ea5..9214cb48dd 100644
--- a/frontend/less/espo/bootstrap/variables.less
+++ b/frontend/less/espo/bootstrap/variables.less
@@ -5,7 +5,6 @@
 @headings-font-weight: 500;
 @headings-color: inherit;
 
-@icon-font-path: "../fonts/";
 @icon-font-name: "glyphicons-halflings-regular";
 @icon-font-svg-id: "glyphicons_halflingsregular";
 
@@ -20,12 +19,8 @@
 
 @cursor-disabled:  not-allowed;
 
-//-- Z-index master list
-//
 // Warning: Avoid customizing these values. They're used for a bird's eye view
 // of components dependent on the z-axis and are designed to all work together.
-//
-// Note: These variables are not generated into the Customizer.
 
 @zindex-navbar:            1000;
 @zindex-dropdown:          1000;
@@ -39,30 +34,27 @@
 @screen-md-min: 992px;
 @screen-lg-min: 1200px;
 
-@screen-xs-max: (@screen-sm-min - 1);
-@screen-sm-max: (@screen-md-min - 1);
-@screen-md-max: (@screen-lg-min - 1);
+@screen-xs-max: (@screen-sm-min - 1px);
+@screen-sm-max: (@screen-md-min - 1px);
+@screen-md-max: (@screen-lg-min - 1px);
 
 @grid-columns: 12;
 
-//** 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);
 
+@navbar-inverse-brand-color:  @navbar-inverse-link-color;
+@navbar-inverse-brand-hover-bg: transparent;
 
-@navbar-inverse-brand-color:                @navbar-inverse-link-color;
-@navbar-inverse-brand-hover-bg:             transparent;
+@nav-link-padding: var(--10px) var(--15px);
+@nav-link-hover-bg: @gray-lighter;
 
-@nav-link-padding:                          var(--10px) var(--15px);
-@nav-link-hover-bg:                         @gray-lighter;
+@nav-disabled-link-color: @gray-light;
+@nav-disabled-link-hover-color:  @gray-light;
 
-@nav-disabled-link-color:                   @gray-light;
-@nav-disabled-link-hover-color:             @gray-light;
-
-@nav-tabs-link-hover-border-color:          @gray-lighter;
-@nav-tabs-active-link-hover-bg:             @body-bg;
-@nav-tabs-active-link-hover-color:          @gray;
+@nav-tabs-link-hover-border-color: @gray-lighter;
+@nav-tabs-active-link-hover-bg: @body-bg;
+@nav-tabs-active-link-hover-color: @gray;
 @nav-tabs-justified-active-link-border-color:     @body-bg;
 
 @tooltip-opacity: .9;
@@ -72,21 +64,21 @@
 
 @modal-backdrop-opacity: .5;
 
-@alert-success-bg:            @state-success-bg;
-@alert-success-text:          @state-success-text;
-@alert-success-border:        @state-success-border;
+@alert-success-bg:  @state-success-bg;
+@alert-success-text: @state-success-text;
+@alert-success-border: @state-success-border;
 
-@alert-info-bg:               @state-info-bg;
-@alert-info-text:             @state-info-text;
-@alert-info-border:           @state-info-border;
+@alert-info-bg: @state-info-bg;
+@alert-info-text: @state-info-text;
+@alert-info-border: @state-info-border;
 
-@alert-warning-bg:            @state-warning-bg;
-@alert-warning-text:          @state-warning-text;
-@alert-warning-border:        @state-warning-border;
+@alert-warning-bg: @state-warning-bg;
+@alert-warning-text: @state-warning-text;
+@alert-warning-border: @state-warning-border;
 
-@alert-danger-bg:             @state-danger-bg;
-@alert-danger-text:           @state-danger-text;
-@alert-danger-border:         @state-danger-border;
+@alert-danger-bg: @state-danger-bg;
+@alert-danger-text: @state-danger-text;
+@alert-danger-border: @state-danger-border;
 
 @list-group-disabled-color: @gray-light;
 @list-group-disabled-bg: @gray-lighter;
@@ -96,5 +88,5 @@
 @headings-small-color: @gray-light;
 @blockquote-small-color: @gray-light;
 @blockquote-border-color: @gray-lighter;
-@page-header-border-color:  @gray-lighter;
-@hr-border:  @gray-lighter;
+@page-header-border-color: @gray-lighter;
+@hr-border: @gray-lighter;
diff --git a/frontend/less/espo/custom.less b/frontend/less/espo/custom.less
index 940f61729d..12706de45e 100644
--- a/frontend/less/espo/custom.less
+++ b/frontend/less/espo/custom.less
@@ -164,7 +164,7 @@ img.image-preview {
         font-weight: 400;
     }
 
-    @media screen and (max-width: (@screen-sm-min - 1px)) {
+    @media screen and (max-width: @screen-xs-max) {
         .header-title,
         > h3 {
             font-size: var(--21px);
@@ -214,7 +214,7 @@ img.image-preview {
             width: 33.33333333%
         }
 
-        @media screen and (max-width: (@screen-sm-min - 1px)) {
+        @media screen and (max-width: @screen-xs-max) {
             .page-header-column-1,
             .page-header-column-2 {
                 width: 100%;
@@ -230,7 +230,7 @@ img.image-preview {
             margin-left: 0;
             margin-right: 0;
 
-            @media screen and (max-width: (@screen-sm-min - 1px)) {
+            @media screen and (max-width: @screen-xs-max) {
                 grid-template-columns: auto;
             }
             &::before,
@@ -281,7 +281,7 @@ img.image-preview {
                 }
 
                 margin-right: var(--30px);
-                @media screen and (max-width: (@screen-sm-min - 1px)) {
+                @media screen and (max-width: @screen-xs-max) {
                     margin-right: 0;
                 }
             }
@@ -1680,7 +1680,7 @@ section {
     a {
         right: var(--8px);
 
-        @media screen and (max-width: (@screen-sm-min - 1px)) {
+        @media screen and (max-width: @screen-xs-max) {
             right: var(--3px);
         }
     }
@@ -1736,7 +1736,7 @@ table.less-padding td.cell[data-name="buttons"] > .btn-group {
 
     margin: var(--minus-8px);
 
-    @media screen and (max-width: (@screen-sm-min - 1px)) {
+    @media screen and (max-width: @screen-xs-max) {
         margin-top: 0;
         margin-bottom: 0
     }
@@ -1977,7 +1977,7 @@ label.attach-file-label {
     width: 100%;
 }
 
-@media screen and (max-width: (@screen-sm-min - 1px)) {
+@media screen and (max-width: @screen-xs-max) {
     .stick-sub {
         margin-top: 0;
     }
@@ -2080,7 +2080,7 @@ textarea.auto-height {
             .show-more a {
                 border-bottom-right-radius: 0;
 
-                @media screen and (max-width: (@screen-sm-min - 1px)) {
+                @media screen and (max-width: @screen-xs-max) {
                     border-bottom-left-radius: 0;
                 }
             }
@@ -2138,7 +2138,7 @@ td > span.color-icon {
     margin-right: var(--5px);
 }
 
-@media screen and (max-width: (@screen-sm-min - 1px)) {
+@media screen and (max-width: @screen-xs-max) {
     .list {
         width: auto;
         overflow-y: hidden;
@@ -2729,7 +2729,7 @@ table.table td.cell .html-container {
     }
 }
 
-@media screen and (max-width: (@screen-sm-min - 1px)) {
+@media screen and (max-width: @screen-xs-max) {
     .folders-container {
         margin-left: calc(var(--container-padding) * -1);
         margin-right: calc(var(--container-padding) * -1);
@@ -2915,7 +2915,7 @@ table.table td.cell .html-container {
             .show-more a {
                 border-bottom-right-radius: 0;
 
-                @media screen and (max-width: (@screen-sm-min - 1px)) {
+                @media screen and (max-width: @screen-xs-max) {
                     border-bottom-left-radius: 0;
                 }
             }
@@ -3386,7 +3386,7 @@ table.table-admin-panel {
     }
 }
 
-@media screen and (max-width: (@screen-sm-min - 1px)) {
+@media screen and (max-width: @screen-xs-max) {
     #notifications-panel {
         position: fixed;
         width: 100%;
@@ -3723,7 +3723,7 @@ body:has(.modal-backdrop) {
     width: calc(100% - var(--100px));
     justify-content: end;
 
-    @media screen and (max-width: (@screen-sm-min - 1px)) {
+    @media screen and (max-width: @screen-xs-max) {
         width: 100%;
     }
 
diff --git a/frontend/less/espo/elements/form.less b/frontend/less/espo/elements/form.less
index c814715aa1..37cfaea9ee 100644
--- a/frontend/less/espo/elements/form.less
+++ b/frontend/less/espo/elements/form.less
@@ -292,7 +292,7 @@ fieldset[disabled] .form-control {
 
 
 .form-inline .form-control {
-    @media screen and (max-width: (@screen-sm-min - 1px)) {
+    @media screen and (max-width: @screen-xs-max) {
         display: inline-block;
         width: auto;
         vertical-align: middle;
diff --git a/frontend/less/espo/elements/grid.less b/frontend/less/espo/elements/grid.less
index 1eeadac692..4153a61028 100644
--- a/frontend/less/espo/elements/grid.less
+++ b/frontend/less/espo/elements/grid.less
@@ -29,7 +29,7 @@
     }
 }
 
-@media screen and (max-width: (@screen-md-min - 1px)) {
+@media screen and (max-width: @screen-sm-max) {
     .grid-auto-fill-xs {
         > div {
             width: 25%;
@@ -47,7 +47,7 @@
     }
 }
 
-@media screen and (max-width: (@screen-sm-min - 1px)) {
+@media screen and (max-width: @screen-xs-max) {
     .grid-auto-fill-xs {
         > div {
             width: 50%;
diff --git a/frontend/less/espo/elements/modal.less b/frontend/less/espo/elements/modal.less
index af92ba2400..a873f1b1cf 100644
--- a/frontend/less/espo/elements/modal.less
+++ b/frontend/less/espo/elements/modal.less
@@ -188,7 +188,7 @@
     padding-right: calc(var(--container-padding) - var(--1px) + var(--scroll-width));
 }
 
-@media screen and (max-width: (@screen-sm-min - 1px)) {
+@media screen and (max-width: @screen-xs-max) {
     .modal-dialog {
         margin: 0 0;
     }
diff --git a/frontend/less/espo/elements/navbar.less b/frontend/less/espo/elements/navbar.less
index 53b521e229..9936db9337 100644
--- a/frontend/less/espo/elements/navbar.less
+++ b/frontend/less/espo/elements/navbar.less
@@ -13,7 +13,7 @@
     }
 
     .navbar-right {
-        @media screen and (max-width: (@screen-sm-min - 1px)) {
+        @media screen and (max-width: @screen-xs-max) {
             margin-right: var(--minus-2px);
         }
 
@@ -104,7 +104,7 @@
         }
     }
 
-    @media screen and (max-width: (@screen-sm-min - 1px)) {
+    @media screen and (max-width: @screen-xs-max) {
         li.show-more {
             display: none;
         }
@@ -119,7 +119,7 @@
     }
 }
 
-@media screen and (max-width: (@screen-sm-min - 1px)) {
+@media screen and (max-width: @screen-xs-max) {
     #navbar .navbar {
         min-height: var(--navbar-height);
         border-width: 0;
@@ -255,7 +255,7 @@
     }
 }
 
-@media screen and (max-width: (@screen-sm-min - 1px)) {
+@media screen and (max-width: @screen-xs-max) {
     #navbar .navbar {
         .navbar-body:not(.in) {
             border-top-width: 0;
@@ -333,7 +333,7 @@ body[data-navbar="side"] {
     }
 }
 
-@media screen and (max-width: (@screen-sm-min - 1px)) {
+@media screen and (max-width: @screen-xs-max) {
     #navbar {
         .navbar-inverse .navbar-nav {
             > li > a {
@@ -353,7 +353,7 @@ body[data-navbar="side"] {
     }
 }
 
-@media screen and (max-width: (@screen-sm-min - 1px)) {
+@media screen and (max-width: @screen-xs-max) {
     body[data-navbar="top"] {
         #navbar {
             .navbar-inverse .navbar-nav {
diff --git a/frontend/less/espo/elements/panel.less b/frontend/less/espo/elements/panel.less
index b6c2b1fdbf..d6a16b541d 100644
--- a/frontend/less/espo/elements/panel.less
+++ b/frontend/less/espo/elements/panel.less
@@ -89,7 +89,7 @@
                 border-bottom-left-radius: 0;
             }
 
-            @media screen and (max-width: (@screen-sm-min - 1px)) {
+            @media screen and (max-width: @screen-xs-max) {
                 &,
                 &.first::before,
                 &.last::before {
@@ -112,7 +112,7 @@
                 border-bottom-right-radius: 0;
             }
 
-            @media screen and (max-width: (@screen-sm-min - 1px)) {
+            @media screen and (max-width: @screen-xs-max) {
                 &,
                 &.first::before,
                 &.last::before {
diff --git a/frontend/less/espo/elements/popup-notification.less b/frontend/less/espo/elements/popup-notification.less
index 13b08f624e..6aa044779a 100644
--- a/frontend/less/espo/elements/popup-notification.less
+++ b/frontend/less/espo/elements/popup-notification.less
@@ -81,7 +81,7 @@
     }
 }
 
-@media screen and (max-width: (@screen-sm-min - 1px)) {
+@media screen and (max-width: @screen-xs-max) {
     #popup-notifications-container {
         width: 100%;
     }
diff --git a/frontend/less/espo/elements/record.less b/frontend/less/espo/elements/record.less
index 4e1cb2ccd8..678606026e 100644
--- a/frontend/less/espo/elements/record.less
+++ b/frontend/less/espo/elements/record.less
@@ -33,7 +33,7 @@
     }
 }
 
-@media screen and (max-width: (@screen-md-min - 1px)) {
+@media screen and (max-width: @screen-sm-max) {
     .record .record-grid {
         grid-template-columns: 100%;
 
diff --git a/frontend/less/espo/elements/table.less b/frontend/less/espo/elements/table.less
index 1a49ab7b4a..972a1b1838 100644
--- a/frontend/less/espo/elements/table.less
+++ b/frontend/less/espo/elements/table.less
@@ -15,7 +15,7 @@ table.table,
             > td:first-child {
                 padding-left: var(--padding-base-horizontal);
 
-                @media screen and (max-width: (@screen-sm-min - 1px)) {
+                @media screen and (max-width: @screen-xs-max) {
                     padding-left: var(--table-cell-padding);
                 }
             }
@@ -24,7 +24,7 @@ table.table,
             > td:last-child {
                 padding-right: var(--padding-base-horizontal);
 
-                @media screen and (max-width: (@screen-sm-min - 1px)) {
+                @media screen and (max-width: @screen-xs-max) {
                     padding-right: var(--table-cell-padding);
                 }
             }
diff --git a/frontend/less/espo/layout-side.less b/frontend/less/espo/layout-side.less
index da1db0cacf..2f563254fd 100644
--- a/frontend/less/espo/layout-side.less
+++ b/frontend/less/espo/layout-side.less
@@ -417,7 +417,7 @@ body[data-navbar="side"] {
         }
     }
 
-    @media screen and (max-width: (@screen-sm-min - 1px)) {
+    @media screen and (max-width: @screen-xs-max) {
         #navbar {
             a.minimizer {
                 display: none;
@@ -721,7 +721,7 @@ body[data-navbar="side"] {
         left: var(--navbar-minimized-width);
     }
 
-    @media screen and (max-width: (@screen-sm-min - 1px)) {
+    @media screen and (max-width: @screen-xs-max) {
         .stick-sub,
         &.minimized .stick-sub {
             left: 0;
@@ -858,7 +858,7 @@ body[data-navbar="side"] {
     .stick-sub {
         margin-top: var(--top-bar-height);
 
-        @media screen and (max-width: (@screen-sm-min - 1px)) {
+        @media screen and (max-width: @screen-xs-max) {
             margin-top: 0;
         }
     }
diff --git a/frontend/less/espo/layout-top.less b/frontend/less/espo/layout-top.less
index b8870294e8..1d0abbfb9e 100644
--- a/frontend/less/espo/layout-top.less
+++ b/frontend/less/espo/layout-top.less
@@ -19,7 +19,7 @@ body:not([data-navbar="side"]) {
         }
     }
 
-    @media screen and (max-width: (@screen-sm-min - 1px)) {
+    @media screen and (max-width: @screen-xs-max) {
         padding-top: 0;
 
         > .content {
@@ -211,7 +211,7 @@ body:not([data-navbar="side"]) {
         }
     }
 
-    @media screen and (max-width: (@screen-sm-min - 1px)) {
+    @media screen and (max-width: @screen-xs-max) {
         #navbar .navbar {
             position: static;
 
@@ -334,7 +334,7 @@ body:not([data-navbar="side"]) {
         padding-left: var(--container-padding);
     }
 
-    @media screen and (max-width: (@screen-sm-min - 1px)) {
+    @media screen and (max-width: @screen-xs-max) {
         .list-sticky-bar,
         &.minimized .list-sticky-bar {
             width: 100%;
@@ -391,7 +391,7 @@ body:not([data-navbar="side"]) {
     .stick-sub {
         margin-top: var(--navbar-height);
 
-        @media screen and (max-width: (@screen-sm-min - 1px)) {
+        @media screen and (max-width: @screen-xs-max) {
             margin-top: 0;
         }
     }
diff --git a/frontend/less/espo/misc/fullcalendar/fullcalendar.less b/frontend/less/espo/misc/fullcalendar/fullcalendar.less
index 1b86a40089..1a0be78891 100644
--- a/frontend/less/espo/misc/fullcalendar/fullcalendar.less
+++ b/frontend/less/espo/misc/fullcalendar/fullcalendar.less
@@ -25,7 +25,7 @@
 
 //-----
 
-@media screen and (max-width: (@screen-sm-min - 1px)) {
+@media screen and (max-width: @screen-xs-max) {
     .fc {
         font-size: 85%;
     }
diff --git a/frontend/less/espo/misc/timeline/timeline.less b/frontend/less/espo/misc/timeline/timeline.less
index 47a1f1b2fb..db68a2b69b 100644
--- a/frontend/less/espo/misc/timeline/timeline.less
+++ b/frontend/less/espo/misc/timeline/timeline.less
@@ -110,7 +110,7 @@
     }
 }
 
-@media screen and (max-width: (@screen-sm-min - 1px)) {
+@media screen and (max-width: @screen-xs-max) {
     .vis-timeline {
         font-size: 93%;
     }