diff --git a/frappe/public/scss/global.scss b/frappe/public/scss/global.scss
index 7ed5e7f66a..86e2825a57 100644
--- a/frappe/public/scss/global.scss
+++ b/frappe/public/scss/global.scss
@@ -299,17 +299,16 @@ select.input-xs {
 }
 
 /* checkbox */
-$checkbox-size: 14px;
 input[type="checkbox"] {
 	position: relative;
 	width: 0 !important;
-	height: $checkbox-size;
-	margin-right: calc(#{$checkbox-size} + var(--checkbox-right-margin)) !important;
-	font-size: calc(#{$checkbox-size} - 1px);
+	height: var(--custom-checkbox-size);
+	margin-right: calc(var(--custom-checkbox-size) + var(--checkbox-right-margin)) !important;
+	font-size: calc(var(--custom-checkbox-size) - 1px);
 
 	&:before {
-		width: $checkbox-size;
-		height: $checkbox-size;
+		width: var(--custom-checkbox-size);
+		height: var(--custom-checkbox-size);
 		position: absolute;
 		top: 0;
 		display: inline-block;
@@ -351,8 +350,13 @@ input[type="checkbox"] {
 
 // Firefox doesn't support pseudo elements on checkbox
 @supports (-moz-appearance: none) or (-ms-ime-align:auto) {
+	:root {
+		--custom-checkbox-size: 0px;
+	}
 	input[type="checkbox"] {
-		width: $checkbox-size !important
+		width: var(--base-checkbox-size) !important;
+		height: var(--base-checkbox-size);
+		margin-right: var(--checkbox-right-margin) !important;
 	}
 }
 
diff --git a/frappe/public/scss/list.scss b/frappe/public/scss/list.scss
index 6e388a6e45..712ad1ab05 100644
--- a/frappe/public/scss/list.scss
+++ b/frappe/public/scss/list.scss
@@ -190,7 +190,7 @@ $level-margin-right: 8px;
 
 input.list-check-all, input.list-row-checkbox {
 	margin-top: 0px;
-	margin-left: calc(#{$checkbox-size}/2);
+	margin-left: calc(var(--custom-checkbox-size)/2);
 	--checkbox-right-margin: #{$level-margin-right};
 }
 
diff --git a/frappe/public/scss/variables.scss b/frappe/public/scss/variables.scss
index b4d6469fb1..b64c3f0b04 100644
--- a/frappe/public/scss/variables.scss
+++ b/frappe/public/scss/variables.scss
@@ -120,14 +120,14 @@ $card-box-shadow: 0px 0px 1px rgba(17, 43, 66, 0.16), 0px 1px 3px rgba(17, 43, 6
 
 
 	--padding-xs: 5px;
-	--padding-sm: 10px;
+	--padding-sm: 8px;
 	--padding-md: 15px;
 	--padding-lg: 20px;
 	--padding-xl: 30px;
 	--padding-2xl: 40px;
 
 	--margin-xs: 5px;
-	--margin-sm: 10px;
+	--margin-sm: 8px;
 	--margin-md: 15px;
 	--margin-lg: 20px;
 	--margin-xl: 30px;
@@ -190,6 +190,8 @@ $card-box-shadow: 0px 0px 1px rgba(17, 43, 66, 0.16), 0px 1px 3px rgba(17, 43, 6
 	--border-radius-lg: 12px;
 
 	--checkbox-right-margin: var(--margin-xs);
+	--base-checkbox-size: 14px;
+	--custom-checkbox-size: 14px;
 
 	--primary-color: #{$primary};