change(utilities): values need important rule

We need utilities to override default styles as such the values need to be important

theme/themes/eea/globals/utilities.less

@@ -1,24 +1,24 @@
 // Color utilities
-.color-fg-primary { color: @primaryColor; }
-.color-fg-secondary { color: @secondaryColor; }
-.color-fg-tertiary { color: @tertiaryColor; }
-.color-fg-white { color: @white; }
+.color-fg-primary { color: @primaryColor !important; }
+.color-fg-secondary { color: @secondaryColor !important; }
+.color-fg-tertiary { color: @tertiaryColor !important; }
+.color-fg-white { color: @white !important; }
 
-.color-bg-primary { background-color: @primaryColor; }
-.color-bg-secondary { background-color: @secondaryColor; }
-.color-bg-tertiary { background-color: @tertiaryColor; }
-.color-bg-grey { background-color: #F9F9F9; }
+.color-bg-primary { background-color: @primaryColor !important; }
+.color-bg-secondary { background-color: @secondaryColor !important; }
+.color-bg-tertiary { background-color: @tertiaryColor !important; }
+.color-bg-grey { background-color: #F9F9F9 !important; }
 
 // Display utilities
 .d-flex { display: flex !important; }
-.flex-items-start { align-items: flex-start; }
-.flex-items-end { align-items: flex-end; }
-.flex-items-center { align-items: center; }
+.flex-items-start { align-items: flex-start !important; }
+.flex-items-end { align-items: flex-end !important; }
+.flex-items-center { align-items: center !important; }
 
 // Align text utilities
-.text-left { text-align: left; }
-.text-center { text-align: center;}
-.text-right { text-align: right; }
+.text-left { text-align: left !important; }
+.text-center { text-align: center !important;}
+.text-right { text-align: right !important; }
 
 //Quotes utilities
 .quoted::before {
@@ -28,4 +28,4 @@
 .quoted::after {
   content: "\ec52";
   font-family: 'remixicon' !important;
-}
+}