diff --git a/assets/scss/_sidebar-tree.scss b/assets/scss/_sidebar-tree.scss
index a1e224f67b0..56e3cd32abd 100644
--- a/assets/scss/_sidebar-tree.scss
+++ b/assets/scss/_sidebar-tree.scss
@@ -1,6 +1,7 @@
 .td-sidebar-nav {
     $_max-height: calc(100vh - 8.5rem);
   
+    padding: 0;
     padding-right: 0.5rem;
     margin-right: -15px;
     margin-left: -15px;
@@ -17,9 +18,7 @@
     // box is displayed regardless of the value of sidebar_search_disable:
     &.td-sidebar-nav--search-disabled {
       @include media-breakpoint-up(lg) {
-        // There's no search box so add top padding
-        // and adjust max-height:
-        padding-top: 1rem;
+        padding-top: 0;
   
         @supports (position: sticky) {
           max-height: calc(#{$_max-height} + 4.5rem);
@@ -119,13 +118,13 @@
     @include link-decoration;
   
     @include media-breakpoint-up(md) {
-      padding-top: 4rem;
       background-color: var(--bs-body-tertiary-bg);
-      padding-right: 1rem;
-      border-right: 1px solid var(--bs-border-color);
+      padding-right: var(--sidebar-padding-horizontal);
+      padding-left: var(--sidebar-padding-horizontal);
+      border-right: var(--sidebar-border-width) solid var(--sidebar-border-color);
     }
   
-    padding-bottom: 1rem;
+    padding-bottom: var(--sidebar-padding-vertical);
   
     &__toggle {
       line-height: 1;
@@ -134,7 +133,7 @@
     }
   
     &__search {
-      padding: 1rem 0;
+      padding: 0 0 1rem;
     }
   
     &__inner {
diff --git a/assets/scss/_styles_project.scss b/assets/scss/_styles_project.scss
index 5a34ccd09be..67a8f037958 100644
--- a/assets/scss/_styles_project.scss
+++ b/assets/scss/_styles_project.scss
@@ -234,7 +234,7 @@ a:not([href]):not([class]):hover {
   height: calc(100vh - 5.5rem);
   top: 5.5rem;
   overflow-y: auto;
-  padding-top: 1rem;
+  padding-top: 0;
   margin-top: 0;
   overflow-x: hidden;
   &__inner {
@@ -335,18 +335,20 @@ a:not([href]):not([class]):hover {
 .td-sidebar-toc {
   margin-top: 0rem;
   line-height: 1.25rem;
-  border-left: 1px solid $border-color;
+  border-left: var(--sidebar-border-width) solid var(--sidebar-border-color);
   background-image: linear-gradient(to top,
       #1e2117,
       #1d1912,
       #18120e,
       #0f0a09,
       #000000);
+  padding-left: var(--sidebar-padding-horizontal);
+  padding-right: var(--sidebar-padding-horizontal);
 
   @supports (position: sticky) {
     position: sticky;
     top: 5.5rem;
-    padding-top: 1rem;
+    padding-top: var(--sidebar-padding-vertical);
     height: calc(100vh - 5.5rem);
     overflow-y: auto;
   }
diff --git a/assets/scss/_variables_project.scss b/assets/scss/_variables_project.scss
index 79a27e5ad7b..d79545915ab 100644
--- a/assets/scss/_variables_project.scss
+++ b/assets/scss/_variables_project.scss
@@ -49,6 +49,13 @@ $td-sidebar-border-color: $border-color;
 // Righthand sidebar with intra-page table of contents
 $td-sidebar-toc-bg-color: rgba($dark, 0.5);
 
+:root {
+  --sidebar-padding-vertical: 1rem;
+  --sidebar-padding-horizontal: 1rem;
+  --sidebar-border-width: 1px;
+  --sidebar-border-color: rgba(0, 179, 159, 0.33);
+}
+
 // Background colors for the sections on home page etc. It is a paint by number
 // system, starting at 0, where the number is taken from the shortcode's ordinal
 // if not provided by the user. These colors are all part of the theme palette,