diff --git a/app/css/material-dark.php b/app/css/material-dark.php
index fef671e8..1bc9fb42 100644
--- a/app/css/material-dark.php
+++ b/app/css/material-dark.php
@@ -625,3 +625,18 @@ a.scroll-to-top.rounded i.fas.fa-angle-up {
   padding: 5px;
   box-sizing: border-box;
 }
+
+.was-validated .form-control:valid,
+.was-validated .form-control:invalid {
+    background-position: center right calc(.375em + .4875rem);
+}
+
+.was-validated .form-control:invalid {
+    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23dc3545' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
+    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
+}
+
+.was-validated .form-control:valid {
+    background-size: calc(0.6em + 0.375rem) calc(0.6em + 0.375rem);
+}
+
diff --git a/app/css/material-light.php b/app/css/material-light.php
index f2ad6815..70d018f8 100644
--- a/app/css/material-light.php
+++ b/app/css/material-light.php
@@ -631,3 +631,18 @@ a.scroll-to-top.rounded i.fas.fa-angle-up {
   padding: 5px;
   box-sizing: border-box;
 }
+
+.was-validated .form-control:valid,
+.was-validated .form-control:invalid {
+    background-position: center right calc(.375em + .4875rem);
+}
+
+.was-validated .form-control:invalid {
+    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23dc3545' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
+    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
+}
+
+.was-validated .form-control:valid {
+    background-size: calc(0.6em + 0.375rem) calc(0.6em + 0.375rem);
+}
+