diff --git a/dev/Styles/Components.less b/dev/Styles/Components.less
index 545b690a7..1f942f19b 100644
--- a/dev/Styles/Components.less
+++ b/dev/Styles/Components.less
@@ -61,6 +61,7 @@
 		opacity:0;
 		position:absolute;
 		top:0;
+		left:0;
 	}
 
 	&:focus-within {
@@ -76,23 +77,18 @@
 .e-checkbox.material-design {
 
 	line-height: 20px;
+	padding-left: 18px;
+	position: relative;
 	width: auto !important;
 
 	> div {
-		position: relative;
-		width: 18px;
-		height: 18px;
-		vertical-align: top;
-	}
-
-	> div > div {
 		position: absolute;
 		margin-top: 1px;
 		.checkbox-box-sizes();
 		animation: checkmark-to-box 200ms ease-out forwards;
 	}
 
-	input:checked + div div {
+	input:checked + div {
 		.checkbox-mark-sizes();
 		animation: box-to-checkmark 200ms ease-out forwards;
 	}
diff --git a/snappymail/v/0.0.0/app/templates/Views/Components/Checkbox.html b/snappymail/v/0.0.0/app/templates/Views/Components/Checkbox.html
index c5028969e..8d04e0c23 100644
--- a/snappymail/v/0.0.0/app/templates/Views/Components/Checkbox.html
+++ b/snappymail/v/0.0.0/app/templates/Views/Components/Checkbox.html
@@ -1,6 +1,6 @@
 <label class="e-component e-checkbox material-design" data-bind="css: { 'disabled': !enable() }">
 	<input type="checkbox" value="1" data-bind="checked: value, enable: enable, attr: {name: name}"/>
-	<div role="checkbox"><div></div></div>
+	<div role="checkbox"></div>
 <!-- ko if: label -->
 	<span data-bind="attr: {'data-i18n': label}"></span>
 <!-- /ko -->