diff --git a/src/sass/general.scss b/src/sass/general.scss
index c1bc1b3..a7d1b2f 100644
--- a/src/sass/general.scss
+++ b/src/sass/general.scss
@@ -167,54 +167,32 @@ button.clear-input{
         outline: none;
     }
 }
-
-.checkbox {
-    display: inline-block;
-    position: relative;
-}
-  
-/* Hide the browser's default checkbox */
-.checkbox input {
-    position: absolute;
-    opacity: 0;
-    cursor: pointer;
-    height: 0;
-    width: 0;
-}
-
-/* Create a custom checkbox */
-.checkmark {
-    cursor: pointer;
-    position: absolute;
-    top: -2px;
-    left: -15px;
-    height: 12px;
-    width: 12px;
-    background-color: #ffffff;
-    border: 1px solid #a3a3a3;
-}
-  
-/* When the checkbox is checked, add a blue background */
-  .checkbox input:checked ~ .checkmark {
-    background-color: $primary;
-    border: 1px solid $primary;
-    box-shadow: 0px 0px 0px 3px $primaryTransparency !important;
-}
-  
-/* Create the checkmark/indicator (hidden when not checked) */
-.checkmark:after {
-    content: "";
-    position: absolute;
-    display: none;
-}
-  
-/* Show the checkmark when checked */
-.checkbox input:checked ~ .checkmark:after {
-    display: block;
-}
-.col-centered {
-    display: block;
-    margin-left: auto;
-    margin-right: auto;
-    text-align: center;
+.custom-control-input {
+    &:checked ~ .custom-control-label::before {
+		border: none !important;
+        color: $primary !important;
+		background-color: $primary !important;
+        box-shadow: 0px 0px 0px 2px $primaryTransparency !important;
+    }
+	&:active ~ .custom-control-label::before {
+		border: none !important;
+        color: $primary !important;
+		background-color: $primary !important;
+    }
+    &:focus ~ .custom-control-label::before {
+		border: none !important;
+        box-shadow: 0px 0px 0px 2px $primaryTransparency !important;
+    }
+    &:focus:not(:checked) ~ .custom-control-label::before {
+        border: none !important;
+    }
+    &:not(:disabled):active ~ .custom-control-label::before {
+        border: none !important;
+        color: $primary !important;
+        box-shadow: 0px 0px 0px 2px $primaryTransparency !important;
+	}
+	&:hover ~ .custom-control-label::before {
+		border: none !important;
+		background-color: $primaryTransparency;
+	}
 }