diff --git a/frontend/less/espo/bootstrap/button-groups.less b/frontend/less/espo/bootstrap/button-groups.less
index 0eda170e8d..c572e21384 100644
--- a/frontend/less/espo/bootstrap/button-groups.less
+++ b/frontend/less/espo/bootstrap/button-groups.less
@@ -1,6 +1,4 @@
-//
 // Button groups
-// --------------------------------------------------
 
 // Make the div behave like a button
 .btn-group,
@@ -44,7 +42,7 @@
   > .btn,
   > .btn-group,
   > .input-group {
-    margin-left: 5px;
+    margin-left: var(--5px);
   }
 }
 
@@ -191,7 +189,6 @@
   .border-top-radius(0);
 }
 
-
 // Justified button groups
 // ----------------------
 
@@ -214,28 +211,3 @@
     left: auto;
   }
 }
-
-
-// Checkbox and radio options
-//
-// In order to support the browser's form validation feedback, powered by the
-// `required` attribute, we have to "hide" the inputs via `clip`. We cannot use
-// `display: none;` or `visibility: hidden;` as that also hides the popover.
-// Simply visually hiding the inputs via `opacity` would leave them clickable in
-// certain cases which is prevented by using `clip` and `pointer-events`.
-// This way, we ensure a DOM element is visible to position the popover from.
-//
-// See https://github.com/twbs/bootstrap/pull/12794 and
-// https://github.com/twbs/bootstrap/pull/14559 for more information.
-
-[data-toggle="buttons"] {
-  > .btn,
-  > .btn-group > .btn {
-    input[type="radio"],
-    input[type="checkbox"] {
-      position: absolute;
-      clip: rect(0,0,0,0);
-      pointer-events: none;
-    }
-  }
-}
diff --git a/frontend/less/espo/bootstrap/close.less b/frontend/less/espo/bootstrap/close.less
index 061a9b1498..a12d98a419 100644
--- a/frontend/less/espo/bootstrap/close.less
+++ b/frontend/less/espo/bootstrap/close.less
@@ -1,7 +1,4 @@
-//
-// Close icons
-// --------------------------------------------------
-
+// Close
 
 .close {
   float: right;
diff --git a/frontend/less/espo/bootstrap/code.less b/frontend/less/espo/bootstrap/code.less
index d4b352c495..d79b7a820a 100644
--- a/frontend/less/espo/bootstrap/code.less
+++ b/frontend/less/espo/bootstrap/code.less
@@ -1,7 +1,4 @@
-//
 // Code (inline and block)
-// --------------------------------------------------
-
 
 // Inline and block code styles
 code,
@@ -13,19 +10,18 @@ samp {
 
 // Inline code
 code {
-  padding: 2px 4px;
+  padding: var(--2px) var(--4px);
   font-size: 90%;
-  color: @code-color;
-  background-color: @code-bg;
+  color:var(--code-color);
+  background-color: var(--code-bg);
 }
 
 // User input typically entered via keyboard
 kbd {
-  padding: 2px 4px;
+  padding: var(--2px) var(--4px);
   font-size: 90%;
-  color: @kbd-color;
-  background-color: @kbd-bg;
-  box-shadow: inset 0 -1px 0 rgba(0,0,0,.25);
+  color: var(--code-color);
+  background-color: var(--code-bg);
 
   kbd {
     padding: 0;
@@ -38,15 +34,16 @@ kbd {
 // Blocks of code
 pre {
   display: block;
-  padding: calc((var(--line-height-computed) - 1px) / 2);
+  padding: calc((var(--line-height-computed) - var(--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;
+  color: var(--code-color);
+  background-color: var(--code-bg);
+  border: var(--1px) solid var(--code-border-color);
+  border-radius: var(--border-radius-small);
 
   // Account for some code outputs that place code tags in pre tags
   code {
diff --git a/frontend/less/espo/bootstrap/variables.less b/frontend/less/espo/bootstrap/variables.less
index cffb603046..5ebf8515ca 100644
--- a/frontend/less/espo/bootstrap/variables.less
+++ b/frontend/less/espo/bootstrap/variables.less
@@ -510,18 +510,7 @@
 
 
 //== Code
-//
-//##
 
-@code-color:                  #c7254e;
-@code-bg:                     #f9f2f4;
-
-@kbd-color:                   #fff;
-@kbd-bg:                      #333;
-
-@pre-bg:                      #f5f5f5;
-@pre-color:                   @gray-dark;
-@pre-border-color:            #ccc;
 @pre-scrollable-max-height:   340px;
 
 
diff --git a/frontend/less/espo/variables.less b/frontend/less/espo/variables.less
index f753a6abf6..2a04b0c2ad 100644
--- a/frontend/less/espo/variables.less
+++ b/frontend/less/espo/variables.less
@@ -103,16 +103,6 @@
 @panel-primary-border: var(--panel-primary-border);
 
 @table-bg-accent: var(--table-bg-accent);
-@code-bg: var(--code-bg);
-@code-color: @text-color;
-
-@pre-bg: @code-bg;
-@pre-color: @code-color;
-@pre-border-color: var(--code-border-color);
-
-
-@pre-border-color: @main-gray;
-@pre-bg: @code-bg;
 
 @navbar-inverse-color: var(--navbar-inverse-color);
 @navbar-inverse-bg: var(--navbar-inverse-bg);