diff --git a/frontend/less/espo-rtl/bootstrap-rtl/popovers-rtl.less b/frontend/less/espo-rtl/bootstrap-rtl/popovers-rtl.less
index ce62b02e13..8de29cb137 100644
--- a/frontend/less/espo-rtl/bootstrap-rtl/popovers-rtl.less
+++ b/frontend/less/espo-rtl/bootstrap-rtl/popovers-rtl.less
@@ -1,8 +1,3 @@
-//
-// Popovers
-// --------------------------------------------------
-
-
 .popover {
   left: auto;
   text-align: right;
@@ -12,22 +7,21 @@
   &.top > .arrow {
     right: 50%;
     left: auto;
-    margin-right: -@popover-arrow-outer-width;
+    margin-right: var(--popover-arrow-outer-width-negative);
     margin-left: auto;
     &:after {
-      margin-right: -@popover-arrow-width;
+      margin-right: var(--popover-arrow-width-negative);
       margin-left: auto;
     }
   }
   &.bottom > .arrow {
     right: 50%;
     left: auto;
-    margin-right: -@popover-arrow-outer-width;
+    margin-right: var(--popover-arrow-outer-width-negative);
     margin-left: auto;
     &:after {
-      margin-right: -@popover-arrow-width;
+      margin-right: var(--popover-arrow-width-negative);
       margin-left: auto;
     }
   }
-
 }
diff --git a/frontend/less/espo/bootstrap/popovers.less b/frontend/less/espo/bootstrap/popovers.less
index cc6df5c2a8..2cf6b1c4a0 100644
--- a/frontend/less/espo/bootstrap/popovers.less
+++ b/frontend/less/espo/bootstrap/popovers.less
@@ -6,22 +6,19 @@
   left: 0;
   z-index: @zindex-popover;
   display: none;
-  max-width: @popover-max-width;
   padding: var(--1px);
   // 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: var(--font-size-base);
 
-  background-color: @popover-bg;
+  background-color: var(--popover-bg);
   background-clip: padding-box;
-  border: var(--1px) solid @popover-border-color;
 
-  // Offset the popover to account for the popover arrow
-  &.top     { margin-top: -@popover-arrow-width; }
-  &.right   { margin-left: @popover-arrow-width; }
-  &.bottom  { margin-top: @popover-arrow-width; }
-  &.left    { margin-left: -@popover-arrow-width; }
+  &.top     { margin-top: var(--popover-arrow-width-negative); }
+  &.right   { margin-left: var(--popover-arrow-width); }
+  &.bottom  { margin-top: var(--popover-arrow-width); }
+  &.left    { margin-left: var(--popover-arrow-width-negative); }
 }
 
 .popover-title {
@@ -46,69 +43,69 @@
   }
 }
 .popover > .arrow {
-  border-width: @popover-arrow-outer-width;
+  border-width: var(--popover-arrow-outer-width);
 }
 .popover > .arrow:after {
-  border-width: @popover-arrow-width;
+  border-width: var(--popover-arrow-width);
   content: "";
 }
 
 .popover {
   &.top > .arrow {
     left: 50%;
-    margin-left: -@popover-arrow-outer-width;
+    margin-left: var(--popover-arrow-outer-width-negative);
     border-bottom-width: 0;
-    border-top-color: @popover-arrow-outer-color;
-    bottom: -@popover-arrow-outer-width;
+    border-top-color: var(--dropdown-border);
+    bottom: var(--popover-arrow-outer-width-negative);
     &:after {
       content: " ";
       bottom: var(--1px);
-      margin-left: -@popover-arrow-width;
+      margin-left: var(--popover-arrow-width-negative);
       border-bottom-width: 0;
-      border-top-color: @popover-arrow-color;
+      border-top-color: var(--dropdown-bg);
     }
   }
   &.right > .arrow {
     top: 50%;
-    left: -@popover-arrow-outer-width;
-    margin-top: -@popover-arrow-outer-width;
+    left: var(--popover-arrow-outer-width-negative);
+    margin-top: var(--popover-arrow-outer-width-negative);
     border-left-width: 0;
-    border-right-color: @popover-arrow-outer-color;
+    border-right-color: var(--dropdown-border);
     &:after {
       content: " ";
-      left: 1px;
-      bottom: -@popover-arrow-width;
+      left: var(--1px);
+      bottom: var(--popover-arrow-width-negative);
       border-left-width: 0;
-      border-right-color: @popover-arrow-color;
+      border-right-color: var(--dropdown-bg);
     }
   }
   &.bottom > .arrow {
     left: 50%;
-    margin-left: -@popover-arrow-outer-width;
+    margin-left: var(--popover-arrow-outer-width-negative);
     border-top-width: 0;
-    border-bottom-color: @popover-arrow-outer-color;
-    top: -@popover-arrow-outer-width;
+    border-bottom-color: var(--dropdown-border);
+    top: var(--popover-arrow-outer-width-negative);
     &:after {
       content: " ";
       top: var(--1px);
-      margin-left: -@popover-arrow-width;
+      margin-left: var(--popover-arrow-width-negative);
       border-top-width: 0;
-      border-bottom-color: @popover-arrow-color;
+      border-bottom-color: var(--dropdown-bg);
     }
   }
 
   &.left > .arrow {
     top: 50%;
-    right: -@popover-arrow-outer-width;
-    margin-top: -@popover-arrow-outer-width;
+    right: var(--popover-arrow-outer-width-negative);
+    margin-top: var(--popover-arrow-outer-width-negative);
     border-right-width: 0;
-    border-left-color: @popover-arrow-outer-color;
+    border-left-color: var(--dropdown-border);
     &:after {
       content: " ";
       right: var(--1px);
       border-right-width: 0;
-      border-left-color: @popover-arrow-color;
-      bottom: -@popover-arrow-width;
+      border-left-color: var(--dropdown-bg);
+      bottom: var(--popover-arrow-width-negative);
     }
   }
 }
diff --git a/frontend/less/espo/bootstrap/variables.less b/frontend/less/espo/bootstrap/variables.less
index 09e5d01225..4ba90d3761 100644
--- a/frontend/less/espo/bootstrap/variables.less
+++ b/frontend/less/espo/bootstrap/variables.less
@@ -162,34 +162,6 @@
 @tooltip-arrow-width-negative: var(--minus-5px);
 @tooltip-arrow-color: var(--dropdown-bg);
 
-
-// Popovers
-
-//** Popover body background color
-@popover-bg:                          #fff;
-//** Popover maximum width
-@popover-max-width:                   276px;
-//** Popover border color
-@popover-border-color:                rgba(0,0,0,.2);
-//** Popover fallback border color
-@popover-fallback-border-color:       #ccc;
-
-//** Popover title background color
-//@popover-title-bg:                    darken(@popover-bg, 3%);
-
-//** Popover arrow width
-@popover-arrow-width:                 10px;
-//** Popover arrow color
-@popover-arrow-color:                 @popover-bg;
-
-//** Popover outer arrow width
-@popover-arrow-outer-width:           (@popover-arrow-width + 1);
-//** Popover outer arrow color
-@popover-arrow-outer-color:           fadein(@popover-border-color, 5%);
-//** Popover outer arrow fallback color
-@popover-arrow-outer-fallback-color:  darken(@popover-fallback-border-color, 20%);
-
-
 //== Labels
 //
 //##
diff --git a/frontend/less/espo/root-variables.less b/frontend/less/espo/root-variables.less
index b18de6b278..6685a386e4 100644
--- a/frontend/less/espo/root-variables.less
+++ b/frontend/less/espo/root-variables.less
@@ -127,6 +127,8 @@
     --modal-title-padding: var(--padding-base-horizontal);
     --modal-title-line-height: var(--27px);
 
+    --popover-arrow-width: var(--10px);
+
     // @todo Compute by adding font-size, two vertical paddings and two borders?
     --input-height-base: var(--35px);
     --input-height-small: var(--29px);
@@ -140,6 +142,9 @@
     --record-grid-max-width: var(--1300px);
 
     // computed
+    --popover-arrow-width-negative: calc(var(--popover-arrow-width) * -1);
+    --popover-arrow-outer-width: calc(var(--popover-arrow-width) + var(--1px));
+    --popover-arrow-outer-width-negative: calc(var(--popover-arrow-outer-width) * -1);
 
     --navbar-padding-vertical: calc((var(--navbar-height) - var(--line-height-computed)) / 2);
     --line-height-computed-half: calc(var(--line-height-computed) / 2);