diff --git a/src/opnsense/www/themes/opnsense/assets/stylesheets/bootstrap/_code.scss b/src/opnsense/www/themes/opnsense/assets/stylesheets/bootstrap/_code.scss
index 8d83b14d7..3a434b946 100644
--- a/src/opnsense/www/themes/opnsense/assets/stylesheets/bootstrap/_code.scss
+++ b/src/opnsense/www/themes/opnsense/assets/stylesheets/bootstrap/_code.scss
@@ -39,8 +39,8 @@ kbd {
 // Blocks of code
 pre {
   display: block;
-  padding: (($line-height-computed - 1) / 2);
-  margin: 0 0 ($line-height-computed / 2);
+  padding: calc(($line-height-computed - 100%) / 2);
+  margin: 0 0 calc($line-height-computed / 2);
   font-size: ($font-size-base - 1); // 14px to 13px
   line-height: $line-height-base;
   word-break: break-all;
diff --git a/src/opnsense/www/themes/opnsense/assets/stylesheets/bootstrap/_forms.scss b/src/opnsense/www/themes/opnsense/assets/stylesheets/bootstrap/_forms.scss
index ea6b36a7a..3aaf044c2 100644
--- a/src/opnsense/www/themes/opnsense/assets/stylesheets/bootstrap/_forms.scss
+++ b/src/opnsense/www/themes/opnsense/assets/stylesheets/bootstrap/_forms.scss
@@ -510,7 +510,7 @@ input[type="checkbox"] {
   // `position: relative;` on them. Also accounts for the grid gutter padding.
   .has-feedback control-feedback {
     top: 0;
-    right: ($grid-gutter-width / 2);
+    right: calc($grid-gutter-width / 2);
   }
 
   // Form group sizes
diff --git a/src/opnsense/www/themes/opnsense/assets/stylesheets/bootstrap/_jumbotron.scss b/src/opnsense/www/themes/opnsense/assets/stylesheets/bootstrap/_jumbotron.scss
index 75efe64e0..110c97f54 100644
--- a/src/opnsense/www/themes/opnsense/assets/stylesheets/bootstrap/_jumbotron.scss
+++ b/src/opnsense/www/themes/opnsense/assets/stylesheets/bootstrap/_jumbotron.scss
@@ -14,7 +14,7 @@
     color: $jumbotron-heading-color;
   }
   p {
-    margin-bottom: ($jumbotron-padding / 2);
+    margin-bottom: calc($jumbotron-padding / 2);
     font-size: $jumbotron-font-size;
     font-weight: 200;
   }
diff --git a/src/opnsense/www/themes/opnsense/assets/stylesheets/bootstrap/_navbar.scss b/src/opnsense/www/themes/opnsense/assets/stylesheets/bootstrap/_navbar.scss
index cadafc2d3..6cee973c3 100644
--- a/src/opnsense/www/themes/opnsense/assets/stylesheets/bootstrap/_navbar.scss
+++ b/src/opnsense/www/themes/opnsense/assets/stylesheets/bootstrap/_navbar.scss
@@ -226,7 +226,7 @@
 // the nav the full height of the horizontal nav (above 768px).
 
 .navbar-nav {
-  margin: ($navbar-padding-vertical / 2) (-$navbar-padding-horizontal);
+  margin: calc($navbar-padding-vertical / 2) (-$navbar-padding-horizontal);
 
   > li > a {
     padding-top:    10px;
@@ -362,7 +362,7 @@
     @include navbar-vertical-align($input-height-small);
   }
   &.btn-xs {
-    @include navbar-vertical-align(22);
+    @include navbar-vertical-align(22px);
   }
 }
 
diff --git a/src/opnsense/www/themes/opnsense/assets/stylesheets/bootstrap/_type.scss b/src/opnsense/www/themes/opnsense/assets/stylesheets/bootstrap/_type.scss
index 413fc54da..154e4fd04 100644
--- a/src/opnsense/www/themes/opnsense/assets/stylesheets/bootstrap/_type.scss
+++ b/src/opnsense/www/themes/opnsense/assets/stylesheets/bootstrap/_type.scss
@@ -25,7 +25,7 @@ h1, .h1,
 h2, .h2,
 h3, .h3 {
   margin-top: $line-height-computed;
-  margin-bottom: ($line-height-computed / 2);
+  margin-bottom: calc($line-height-computed / 2);
 
   small,
   .small {
@@ -35,8 +35,8 @@ h3, .h3 {
 h4, .h4,
 h5, .h5,
 h6, .h6 {
-  margin-top: ($line-height-computed / 2);
-  margin-bottom: ($line-height-computed / 2);
+  margin-top: calc($line-height-computed / 2);
+  margin-bottom: calc($line-height-computed / 2);
 
   small,
   .small {
@@ -56,17 +56,17 @@ h6, .h6 { font-size: $font-size-h6; }
 // -------------------------
 
 p {
-  margin: 0 0 ($line-height-computed / 2);
+  margin: 0 0 calc($line-height-computed / 2);
 }
 
 .lead {
   margin-bottom: $line-height-computed;
-  font-size: floor(($font-size-base * 1.15));
+  font-size: floor(calc($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);
+    font-size: calc($font-size-base * 1.5);
   }
 }
 
@@ -77,7 +77,7 @@ p {
 // Ex: (12px small font / 14px base font) * 100% = about 85%
 small,
 .small {
-  font-size: floor((100% * $font-size-small / $font-size-base));
+  font-size: floor(calc(100% * $font-size-small / $font-size-base));
 }
 
 // Undo browser default styling
@@ -141,8 +141,8 @@ mark,
 // -------------------------
 
 .page-header {
-  padding-bottom: (($line-height-computed / 2) - 1);
-  margin: ($line-height-computed * 2) 0 $line-height-computed;
+  padding-bottom: (calc($line-height-computed / 2) - 1);
+  margin: calc($line-height-computed * 2) 0 $line-height-computed;
   border-bottom: 1px solid $page-header-border-color;
 }
 
@@ -154,7 +154,7 @@ mark,
 ul,
 ol {
   margin-top: 0;
-  margin-bottom: ($line-height-computed / 2);
+  margin-bottom: calc($line-height-computed / 2);
   ul,
   ol {
     margin-bottom: 0;
@@ -239,7 +239,7 @@ abbr[data-original-title] {
 
 // Blockquotes
 blockquote {
-  padding: ($line-height-computed / 2) $line-height-computed;
+  padding: calc($line-height-computed / 2) $line-height-computed;
   margin: 0 0 $line-height-computed;
   font-size: $blockquote-font-size;
   border-left: 5px solid $blockquote-border-color;
diff --git a/src/opnsense/www/themes/opnsense/assets/stylesheets/bootstrap/_variables.scss b/src/opnsense/www/themes/opnsense/assets/stylesheets/bootstrap/_variables.scss
index 3acdcb0c7..93435f597 100644
--- a/src/opnsense/www/themes/opnsense/assets/stylesheets/bootstrap/_variables.scss
+++ b/src/opnsense/www/themes/opnsense/assets/stylesheets/bootstrap/_variables.scss
@@ -346,7 +346,7 @@ $container-lg:                 $container-large-desktop !default;
 $navbar-height:                    50px !default;
 $navbar-margin-bottom:             0;
 $navbar-border-radius:             0;
-$navbar-padding-horizontal:        floor(($grid-gutter-width / 2)) !default;
+$navbar-padding-horizontal:        floor((calc($grid-gutter-width / 2))) !default;
 $navbar-padding-vertical:          15px;
 $navbar-collapse-max-height:       340px !default;
 
diff --git a/src/opnsense/www/themes/opnsense/assets/stylesheets/bootstrap/mixins/_grid-framework.scss b/src/opnsense/www/themes/opnsense/assets/stylesheets/bootstrap/mixins/_grid-framework.scss
index fb28cb47d..d6df41f0f 100644
--- a/src/opnsense/www/themes/opnsense/assets/stylesheets/bootstrap/mixins/_grid-framework.scss
+++ b/src/opnsense/www/themes/opnsense/assets/stylesheets/bootstrap/mixins/_grid-framework.scss
@@ -13,8 +13,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:  calc($grid-gutter-width / 2);
+    padding-right: calc($grid-gutter-width / 2);
   }
 }
 
@@ -33,12 +33,12 @@
 @mixin calc-grid-column($index, $class, $type) {
   @if ($type == width) and ($index > 0) {
     .col-#{$class}-#{$index} {
-      width: percentage(($index / $grid-columns));
+      width: percentage(calc($index / $grid-columns));
     }
   }
   @if ($type == push) and ($index > 0) {
     .col-#{$class}-push-#{$index} {
-      left: percentage(($index / $grid-columns));
+      left: percentage(calc($index / $grid-columns));
     }
   }
   @if ($type == push) and ($index == 0) {
@@ -48,7 +48,7 @@
   }
   @if ($type == pull) and ($index > 0) {
     .col-#{$class}-pull-#{$index} {
-      right: percentage(($index / $grid-columns));
+      right: percentage(calc($index / $grid-columns));
     }
   }
   @if ($type == pull) and ($index == 0) {
@@ -58,7 +58,7 @@
   }
   @if ($type == offset) {
     .col-#{$class}-offset-#{$index} {
-      margin-left: percentage(($index / $grid-columns));
+      margin-left: percentage(calc($index / $grid-columns));
     }
   }
 }
diff --git a/src/opnsense/www/themes/opnsense/assets/stylesheets/bootstrap/mixins/_grid.scss b/src/opnsense/www/themes/opnsense/assets/stylesheets/bootstrap/mixins/_grid.scss
index 1601f6ab5..635801628 100644
--- a/src/opnsense/www/themes/opnsense/assets/stylesheets/bootstrap/mixins/_grid.scss
+++ b/src/opnsense/www/themes/opnsense/assets/stylesheets/bootstrap/mixins/_grid.scss
@@ -6,15 +6,15 @@
 @mixin container-fixed($gutter: $grid-gutter-width) {
   margin-right: auto;
   margin-left: auto;
-  padding-left:  ($gutter / 2);
-  padding-right: ($gutter / 2);
+  padding-left:  calc($gutter / 2);
+  padding-right: calc($gutter / 2);
   @include clearfix();
 }
 
 // Creates a wrapper for a series of columns
 @mixin make-row($gutter: $grid-gutter-width) {
-  margin-left:  ($gutter / -2);
-  margin-right: ($gutter / -2);
+  margin-left:  calc($gutter / -2);
+  margin-right: calc($gutter / -2);
   @include clearfix();
 }
 
@@ -24,8 +24,8 @@
   float: left;
   width: percentage(($columns / $grid-columns));
   min-height: 1px;
-  padding-left:  ($gutter / 2);
-  padding-right: ($gutter / 2);
+  padding-left:  calc($gutter / 2);
+  padding-right: calc($gutter / 2);
 }
 @mixin make-xs-column-offset($columns) {
   margin-left: percentage(($columns / $grid-columns));
@@ -41,27 +41,27 @@
 @mixin make-sm-column($columns, $gutter: $grid-gutter-width) {
   position: relative;
   min-height: 1px;
-  padding-left:  ($gutter / 2);
-  padding-right: ($gutter / 2);
+  padding-left:  calc($gutter / 2);
+  padding-right: calc($gutter / 2);
 
   @media (min-width: $screen-sm-min) {
     float: left;
-    width: percentage(($columns / $grid-columns));
+    width: percentage(calc($columns / $grid-columns));
   }
 }
 @mixin make-sm-column-offset($columns) {
   @media (min-width: $screen-sm-min) {
-    margin-left: percentage(($columns / $grid-columns));
+    margin-left: percentage(calc($columns / $grid-columns));
   }
 }
 @mixin make-sm-column-push($columns) {
   @media (min-width: $screen-sm-min) {
-    left: percentage(($columns / $grid-columns));
+    left: percentage(calc($columns / $grid-columns));
   }
 }
 @mixin make-sm-column-pull($columns) {
   @media (min-width: $screen-sm-min) {
-    right: percentage(($columns / $grid-columns));
+    right: percentage(calc($columns / $grid-columns));
   }
 }
 
@@ -74,22 +74,22 @@
 
   @media (min-width: $screen-md-min) {
     float: left;
-    width: percentage(($columns / $grid-columns));
+    width: percentage(calc($columns / $grid-columns));
   }
 }
 @mixin make-md-column-offset($columns) {
   @media (min-width: $screen-md-min) {
-    margin-left: percentage(($columns / $grid-columns));
+    margin-left: percentage(calc($columns / $grid-columns));
   }
 }
 @mixin make-md-column-push($columns) {
   @media (min-width: $screen-md-min) {
-    left: percentage(($columns / $grid-columns));
+    left: percentage(calc($columns / $grid-columns));
   }
 }
 @mixin make-md-column-pull($columns) {
   @media (min-width: $screen-md-min) {
-    right: percentage(($columns / $grid-columns));
+    right: percentage(calc($columns / $grid-columns));
   }
 }
 
@@ -102,21 +102,21 @@
 
   @media (min-width: $screen-lg-min) {
     float: left;
-    width: percentage(($columns / $grid-columns));
+    width: percentage(calc($columns / $grid-columns));
   }
 }
 @mixin make-lg-column-offset($columns) {
   @media (min-width: $screen-lg-min) {
-    margin-left: percentage(($columns / $grid-columns));
+    margin-left: percentage(calc($columns / $grid-columns));
   }
 }
 @mixin make-lg-column-push($columns) {
   @media (min-width: $screen-lg-min) {
-    left: percentage(($columns / $grid-columns));
+    left: percentage(calc($columns / $grid-columns));
   }
 }
 @mixin make-lg-column-pull($columns) {
   @media (min-width: $screen-lg-min) {
-    right: percentage(($columns / $grid-columns));
+    right: percentage(calc($columns / $grid-columns));
   }
 }
diff --git a/src/opnsense/www/themes/opnsense/assets/stylesheets/bootstrap/mixins/_nav-divider.scss b/src/opnsense/www/themes/opnsense/assets/stylesheets/bootstrap/mixins/_nav-divider.scss
index 2e6da02a4..21f2cd5be 100644
--- a/src/opnsense/www/themes/opnsense/assets/stylesheets/bootstrap/mixins/_nav-divider.scss
+++ b/src/opnsense/www/themes/opnsense/assets/stylesheets/bootstrap/mixins/_nav-divider.scss
@@ -4,7 +4,7 @@
 
 @mixin nav-divider($color: #e5e5e5) {
   height: 1px;
-  margin: (($line-height-computed / 2) - 1) 0;
+  margin: (calc($line-height-computed / 2) - 1) 0;
   overflow: hidden;
   background-color: $color;
 }
diff --git a/src/opnsense/www/themes/opnsense/assets/stylesheets/bootstrap/mixins/_nav-vertical-align.scss b/src/opnsense/www/themes/opnsense/assets/stylesheets/bootstrap/mixins/_nav-vertical-align.scss
index c8fbf1a7d..c774a327e 100644
--- a/src/opnsense/www/themes/opnsense/assets/stylesheets/bootstrap/mixins/_nav-vertical-align.scss
+++ b/src/opnsense/www/themes/opnsense/assets/stylesheets/bootstrap/mixins/_nav-vertical-align.scss
@@ -4,6 +4,6 @@
 // Example: an element has a height of 30px, so write out `.navbar-vertical-align(30px);` to calculate the appropriate top margin.
 
 @mixin navbar-vertical-align($element-height) {
-  margin-top: (($navbar-height - $element-height) / 2);
-  margin-bottom: (($navbar-height - $element-height) / 2);
+  margin-top: calc(($navbar-height - $element-height) / 2);
+  margin-bottom: calc(($navbar-height - $element-height) / 2);
 }
diff --git a/src/opnsense/www/themes/opnsense/assets/stylesheets/main.scss b/src/opnsense/www/themes/opnsense/assets/stylesheets/main.scss
index 6dfac7cac..c3af962fc 100644
--- a/src/opnsense/www/themes/opnsense/assets/stylesheets/main.scss
+++ b/src/opnsense/www/themes/opnsense/assets/stylesheets/main.scss
@@ -245,7 +245,7 @@ div.content-box.wizard {
 }
 
 .page-content-main section[class^="col-"] + section[class^="col-"]{
-  padding-top: ($grid-gutter-width/2);
+  padding-top: calc($grid-gutter-width/2);
 }
 
 .brand-logo{