diff --git a/frontend/less/espo/custom.less b/frontend/less/espo/custom.less
index 12706de45e..3cc3a58e8b 100644
--- a/frontend/less/espo/custom.less
+++ b/frontend/less/espo/custom.less
@@ -3905,7 +3905,7 @@ body > .autocomplete-suggestions.text-search-suggestions {
         .iti__country-list {
             margin-top: var(--1px); // To match positioning of other dropdowns.
             z-index: 5;
-            max-height: var(--300px);
+            max-height: calc(var(--300px) + var(--5px));
             background-color: var(--dropdown-bg);
             border: var(--dropdown-border) solid var(--dropdown-border-width);
             border-radius: var(--dropdown-border-radius);
@@ -3926,6 +3926,7 @@ body > .autocomplete-suggestions.text-search-suggestions {
 
             .iti__divider {
                 border-bottom-color: var(--dropdown-divider-bg);
+                margin-bottom: var(--5px);
             }
 
             padding: var(--5px) 0;
diff --git a/frontend/less/espo/elements/panel.less b/frontend/less/espo/elements/panel.less
index d6a16b541d..17520d46d9 100644
--- a/frontend/less/espo/elements/panel.less
+++ b/frontend/less/espo/elements/panel.less
@@ -188,8 +188,8 @@
         user-select: none;
 
         &.panel-heading-no-title {
-            padding-top: 6px;
-            padding-bottom: 6px;
+            padding-top: var(--6px);
+            padding-bottom: var(--6px);
         }
 
         padding-top: 0;
diff --git a/frontend/less/espo/misc/datepicker/datepicker.less b/frontend/less/espo/misc/datepicker/datepicker.less
index d44eae19f9..ad6514193b 100644
--- a/frontend/less/espo/misc/datepicker/datepicker.less
+++ b/frontend/less/espo/misc/datepicker/datepicker.less
@@ -43,18 +43,18 @@
     &:after {
       content: '';
       display: inline-block;
-      border-left:   6px solid transparent;
-      border-right:  6px solid transparent;
-      border-bottom: 6px solid var(--dropdown-bg);
+      border-left: var(--6px) solid transparent;
+      border-right: var(--6px)solid transparent;
+      border-bottom: var(--6px) solid var(--dropdown-bg);
       border-top:    0;
       position: absolute;
     }
-    &.datepicker-orient-left:before   { left: 6px; }
-    &.datepicker-orient-left:after    { left: 7px; }
-    &.datepicker-orient-right:before  { right: 6px; }
-    &.datepicker-orient-right:after   { right: 7px; }
-    &.datepicker-orient-bottom:before { top: -7px; }
-    &.datepicker-orient-bottom:after  { top: -6px; }
+    &.datepicker-orient-left:before   { left: var(--6px); }
+    &.datepicker-orient-left:after    { left: var(--7px); }
+    &.datepicker-orient-right:before  { right: var(--6px); }
+    &.datepicker-orient-right:after   { right: var(--7px); }
+    &.datepicker-orient-bottom:before { top: var(--minus-7px); }
+    &.datepicker-orient-bottom:after  { top: var(--minus-6px); }
     &.datepicker-orient-top:before {
       bottom: var(--minus-7px);
       border-bottom: 0;
@@ -245,7 +245,7 @@
       float: left;
       margin: 1%;
       cursor: pointer;
-      border-radius: 4px;
+      border-radius: var(--border-radius-small);
       &:hover,
       &.focused {
         background: var(--dropdown-link-hover-bg);
diff --git a/frontend/less/espo/misc/intl-tel-input/intlTelInput.less b/frontend/less/espo/misc/intl-tel-input/intlTelInput.less
index 47e76aefd3..98e25c76a5 100644
--- a/frontend/less/espo/misc/intl-tel-input/intlTelInput.less
+++ b/frontend/less/espo/misc/intl-tel-input/intlTelInput.less
@@ -18,7 +18,7 @@
   z-index: 0;
   margin-top: 0 !important;
   margin-bottom: 0 !important;
-  padding-right: 36px;
+  padding-right: var(--36px);
   margin-right: 0;
 }
 .iti__flag-container {
@@ -34,42 +34,43 @@
   display: flex;
   align-items: center;
   height: 100%;
-  padding: 0 6px 0 8px;
+  padding: 0 var(--6px) 0 var(--8px);
 }
 .iti__arrow {
-  margin-left: 6px;
+  margin-left: var(--6px);
   width: 0;
   height: 0;
-  border-left: 3px solid transparent;
-  border-right: 3px solid transparent;
-  border-top: 4px solid #555;
+  border-left: var(--3px) solid transparent;
+  border-right: var(--3px) solid transparent;
+  border-top: var(--4px) solid #555;
 }
 [dir=rtl] .iti__arrow {
-  margin-right: 6px;
+  margin-right: var(--6px);
   margin-left: 0;
 }
 .iti__arrow--up {
   border-top: none;
-  border-bottom: 4px solid #555;
+  border-bottom: var(--4px) solid #555;
 }
 .iti__country-list {
   position: absolute;
   z-index: 2;
   list-style: none;
   padding: 0;
-  margin: 0 0 0 -1px;
-  box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.2);
+  margin: 0 0 0 var(--minus-1px);
+  box-shadow: var(--1px) var(--1px) var(--4px) rgba(0, 0, 0, 0.2);
   background-color: white;
   border: 1px solid #ccc;
   white-space: nowrap;
-  max-height: 200px;
+  max-height: var(--200px);
   overflow-y: scroll;
   -webkit-overflow-scrolling: touch;
 }
 .iti__country-list--dropup {
   bottom: 100%;
-  margin-bottom: -1px;
+  margin-bottom: var(--minus-1px);
 }
+
 @media (max-width: 500px) {
   .iti__country-list {
     white-space: normal;
@@ -77,17 +78,17 @@
 }
 .iti__flag-box {
   display: inline-block;
-  width: 20px;
+  width: var(--20px);
 }
 .iti__divider {
-  padding-bottom: 5px;
-  margin-bottom: 5px;
-  border-bottom: 1px solid #ccc;
+  padding-bottom: var(--5px);
+  margin-bottom: var(--5px);
+  border-bottom: var(--1px) solid #ccc;
 }
 .iti__country {
   display: flex;
   align-items: center;
-  padding: 5px 10px;
+  padding: var(--5px) var(--10px);
   outline: none;
 }
 .iti__dial-code {
@@ -97,19 +98,19 @@
   background-color: rgba(0, 0, 0, 0.05);
 }
 .iti__flag-box, .iti__country-name {
-  margin-right: 6px;
+  margin-right: var(--6px);
 }
 [dir=rtl] .iti__flag-box, [dir=rtl] .iti__country-name {
   margin-right: 0;
-  margin-left: 6px;
+  margin-left: var(--6px);
 }
 .iti--allow-dropdown input,
 .iti--allow-dropdown input[type=text],
 .iti--allow-dropdown input[type=tel], .iti--separate-dial-code input,
 .iti--separate-dial-code input[type=text],
 .iti--separate-dial-code input[type=tel] {
-  padding-right: 6px;
-  padding-left: 52px;
+  padding-right: var(--6px);
+  padding-left: var(--50px);
   margin-left: 0;
 }
 [dir=rtl] .iti--allow-dropdown input,
@@ -117,8 +118,8 @@
 [dir=rtl] .iti--allow-dropdown input[type=tel], [dir=rtl] .iti--separate-dial-code input,
 [dir=rtl] .iti--separate-dial-code input[type=text],
 [dir=rtl] .iti--separate-dial-code input[type=tel] {
-  padding-right: 52px;
-  padding-left: 6px;
+  padding-right: var(--50px);
+  padding-left: var(--6px);
   margin-right: 0;
 }
 .iti--allow-dropdown .iti__flag-container, .iti--separate-dial-code .iti__flag-container {
@@ -147,11 +148,11 @@
   background-color: rgba(0, 0, 0, 0.05);
 }
 .iti--separate-dial-code.iti--show-flags .iti__selected-dial-code {
-  margin-left: 6px;
+  margin-left: var(--6px);
 }
 [dir=rtl] .iti--separate-dial-code.iti--show-flags .iti__selected-dial-code {
   margin-left: 0;
-  margin-right: 6px;
+  margin-right: var(--6px);
 }
 .iti--container {
   position: absolute;
@@ -165,10 +166,10 @@
 }
 
 .iti-mobile .iti--container {
-  top: 30px;
-  bottom: 30px;
-  left: 30px;
-  right: 30px;
+  top: var(--30px);
+  bottom: var(--30px);
+  left: var(--30px);
+  right: var(--30px);
   position: fixed;
 }
 .iti-mobile .iti__country-list {
@@ -1260,12 +1261,12 @@
 }
 
 .iti__flag {
-  height: 15px;
+  height: var(--15px);
   box-shadow: 0px 0px 1px 0px #888;
   background-image: url("../img/flags.png?1");
   background-repeat: no-repeat;
   background-color: #dbdbdb;
-  background-position: 20px 0;
+  background-position: var(--20px) 0;
 }
 @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
   .iti__flag {
@@ -1275,4 +1276,4 @@
 
 .iti__flag.iti__np {
   background-color: transparent;
-}
\ No newline at end of file
+}
diff --git a/frontend/less/espo/misc/kanban.less b/frontend/less/espo/misc/kanban.less
index 87650dff51..da234ee2d5 100644
--- a/frontend/less/espo/misc/kanban.less
+++ b/frontend/less/espo/misc/kanban.less
@@ -13,29 +13,10 @@ div.list-kanban > div > table {
         margin: 0;
         overflow: hidden;
 
-        /*&:first-child {
-            > div {
-                border-top-left-radius: var(--border-radius);
-                border-bottom-left-radius: var(--border-radius);
-            }
-        }*/
 
         &:last-child {
             > div {
                 width: 100%;
-
-                /*&:before,
-                &:after {
-                    display: none;
-                    content: "";
-                }*/
-
-                /*.create-button {
-                    right: 14px;
-                }*/
-
-                /*border-top-right-radius: var(--border-radius);
-                border-bottom-right-radius: var(--border-radius);*/
             }
         }
 
@@ -59,105 +40,38 @@ div.list-kanban > div > table {
 
             border-radius: var(--border-radius);
         }
-
-        /*> div:before,
-        > div:after {
-            content: " ";
-            display: inline-block;
-            width: 0;
-            height: 0;
-            border-top-width: 14px;
-            border-left-width: 15px;
-            border-bottom-width: 14px;
-            border-right-width: 0;
-            border-color: var(--label-default-bg);
-            border-style: solid;
-            position: absolute;
-        }
-
-        > div:before {
-            left: ~"calc(100%)";
-            z-index: 2;
-            border-top-color: transparent;
-            border-bottom-color: transparent;
-        }
-
-        > div:after {
-            border-left-color: transparent;
-            left: ~"calc(100% + 2px)";
-        }*/
     }
 
     th.group-header {
         &.group-header-success {
             > div {
                 background-color: var(--brand-success);
-                /*&:before {
-                    border-left-color: var(--brand-success);
-                }*/
             }
         }
-        /*&.group-header-before-success {
-            > div:after {
-                border-color: var(--brand-success) var(--brand-success) var(--brand-success) transparent;
-            }
-        }*/
 
         &.group-header-danger {
             > div {
                 background-color: var(--brand-danger);
-                /*&:before {
-                    border-left-color: var(--brand-danger);
-                }*/
             }
         }
-        &.group-header-before-danger {
-            /*> div:after {
-                border-color: var(--brand-danger) var(--brand-danger) var(--brand-danger) transparent;
-            }*/
-        }
 
         &.group-header-warning {
             > div {
                 background-color: var(--brand-warning);
-                /*&:before {
-                    border-left-color: var(--brand-warning);
-                }*/
             }
         }
-        &.group-header-before-warning {
-            /*> div:after {
-                border-color: var(--brand-warning) var(--brand-warning) var(--brand-warning) transparent;
-            }*/
-        }
 
         &.group-header-primary {
             > div {
                 background-color: var(--brand-primary);
-                /*&:before {
-                    border-left-color: var(--brand-primary);
-                }*/
             }
         }
-        &.group-header-before-primary {
-            /*> div:after {
-                border-color: var(--brand-primary) var(--brand-primary) var(--brand-primary) transparent;
-            }*/
-        }
 
         &.group-header-info {
             > div {
                 background-color: var(--brand-info);
-                /*&:before {
-                    border-left-color: var(--brand-info);
-                }*/
             }
         }
-        &.group-header-before-info {
-            /*> div:after {
-                border-color: var(--brand-info) var(--brand-info) var(--brand-info) transparent;
-            }*/
-        }
     }
 
     td.group-column {
@@ -170,19 +84,19 @@ div.list-kanban > div > table {
         }
 
         .show-more a {
-            margin: 0 auto 8px;
+            margin: 0 auto var(--8px);
             display: block;
-            height: 20px;
+            height: var(--20px);
 
             > span {
-                top: -4px;
+                top: var(--minus-4px);
                 color: @text-muted;
                 position: relative;
             }
         }
 
         .group-column-list {
-            min-height: 100px;
+            min-height: var(--100px);
         }
 
         .group-column-list.drop-active {
@@ -190,14 +104,14 @@ div.list-kanban > div > table {
         }
 
         .group-column-list.drop-hover {
-            border-top: 2px solid @gray-light;
+            border-top: var(--2px) solid @gray-light;
         }
     }
 
     .item {
         .panel {
             .form-group {
-                margin-bottom: 3px;
+                margin-bottom: var(--3px);
 
                 .field-right-align {
                     text-align: right;
@@ -235,8 +149,8 @@ div.list-kanban > div > table {
             }
 
             .item-menu-container {
-                margin-top: -10px;
-                margin-right: -10px;
+                margin-top: var(--minus-10px);
+                margin-right: var(--minus-10px);
 
                 .dropdown-toggle:focus:focus-visible {
                     outline: none;
@@ -282,11 +196,7 @@ div.list-kanban > div > table {
     }
 
     .kanban-head-placeholder {
-        height: 28px;
-    }
-
-    .kanban-head-container {
-        //box-shadow: var(--default-box-shadow);
+        height: var(--28px);
     }
 
     .kanban-head-container.sticked {
@@ -336,10 +246,10 @@ div.list-kanban > div > table {
                     > th {
                         overflow: visible;
                         min-width: 0;
-                        max-height: 28px;
+                        max-height: var(--28px);
                         .kanban-group-label {
                             display: inline-block;
-                            max-width: ~"calc(100% - 15px)";
+                            max-width: ~"calc(100% - var(--15px))";
                             overflow: hidden;
                             text-overflow: ellipsis;
                             white-space: nowrap;
@@ -347,7 +257,7 @@ div.list-kanban > div > table {
 
                         &:hover {
                             .kanban-group-label {
-                                max-width: ~"calc(100% - 30px)";
+                                max-width: ~"calc(100% - var(--30px))";
                             }
                         }