Validation and standardisation

public/css/newStyle.css

@@ -18,8 +18,9 @@
 
 /* @import url("https://fonts.googleapis.com/css?family=Muli&display=swap"); */
 
-.vfl-label {
-    text-transform: uppercase;
+.vfl-label .vfl-has-label {
+    text-align: left;
+    color: black;
 }
 
 .vfl-label-on-input {
@@ -30,21 +31,31 @@
     color: rgb(27, 117, 187) !important;
 }
 
-.uniSelect {
-    border-color: rgb(27, 117, 187);
+.uniInput {
     border-width: 2px;
+    border-color: #1b75bb;
+    padding: 10px 14px;
+    box-shadow: none;
+    color: black;
+    font-size: 15px;
+    font-weight: 400;
     font-family: "Muli";
-    color: rgb(118, 118, 118);
-    padding-left: 10px;
-    text-transform: uppercase;
+}
+
+.uniSelect {
+    border-width: 2px;
+    border-color: #1b75bb;
+    padding: 10px 14px;
+    box-shadow: none;
+    color: black;
     font-size: 15px;
     font-weight: 400;
+    font-family: "Muli";
 }
 
 .uniSelect option {
     color: rgb(118, 118, 118);
     font-family: inherit;
-    text-transform: inherit;
 }
 
 .uniSelectLabel {
@@ -56,7 +67,6 @@
     font-size: 15px;
     color: rgb(118, 118, 118);
     pointer-events: none;
-    text-transform: uppercase;
 }
 
 .quillWrapper .ql-snow.ql-toolbar {
@@ -81,16 +91,6 @@
     font-weight: 400;
 }
 
-.uniInput {
-    border-width: 2px;
-    border-color: #1b75bb;
-    padding: 10px 14px;
-    box-shadow: none;
-    font-size: 15px;
-    font-weight: 400;
-    font-family: "Muli";
-}
-
 body {
     color: #444;
     font-family: "Muli";
@@ -541,7 +541,6 @@ h3 {
     font-size: 22px;
     outline: none;
     font-weight: 700;
-    text-transform: uppercase;
 }
 
 .nav-menu li:hover>a,
@@ -577,6 +576,33 @@ h3 {
     color: #1b75bb;
 }
 
+.nav-tabs li a {
+    border-top: none;
+    border-left: none;
+    border-right: none;
+    background-color: white;
+    border-bottom-color: rgb(221, 221, 221);
+}
+
+.nav-tabs li :hover {
+    color: white;
+    background-color: rgb(27, 117, 187);
+}
+
+.nav-tabs li a.active {
+    border-top: none;
+    border-left: none;
+    border-right: none;
+    color: white;
+    background-color: rgb(80, 133, 240);
+    border-bottom-color: rgb(221, 221, 221);
+}
+
+.nav-tabs li a :hover {
+    background-color: transparent;
+    color: white;
+}
+
 
 /* Mobile Nav Toggle */
 
@@ -1035,7 +1061,6 @@ h4 {
     font-size: 18px;
     margin-bottom: 15px;
     font-weight: bold;
-    text-transform: uppercase;
     color: #1b75bb;
 }
 
@@ -1148,7 +1173,6 @@ h4 {
     font-size: 18px;
     margin-bottom: 15px;
     font-weight: bold;
-    text-transform: uppercase;
     color: #1b75bb;
 }
 
@@ -1212,7 +1236,13 @@ h4 {
     box-shadow: none;
     font-size: 15px;
     color: #1b75bb;
-    text-transform: uppercase;
+}
+
+#contact2 .form select {
+    border: 2px solid #1b75bb;
+    box-shadow: none;
+    font-size: 15px;
+    color: black;
 }
 
 #contact2 .form button[type="submit"] {
@@ -1393,51 +1423,6 @@ h4 {
     padding: 2rem;
 }
 
-.form-signin {
-    width: 100%;
-}
-
-.form-signin .btn {
-    font-size: 80%;
-    border-radius: 0rem;
-    letter-spacing: 0.1rem;
-    font-weight: bold;
-    padding: 1rem;
-    transition: all 0.2s;
-}
-
-.form-label-group {
-    position: relative;
-    margin-bottom: 1rem;
-}
-
-.form-label-group input {
-    height: auto;
-}
-
-.form-label-group>input,
-.form-label-group>label {
-    padding: var(--input-padding-y) var(--input-padding-x);
-}
-
-.form-label-group>label {
-    position: absolute;
-    top: 0;
-    left: 0;
-    display: block;
-    width: 100%;
-    margin-bottom: 0;
-    line-height: 1.5;
-    color: #495057;
-    border: 1px solid transparent;
-    border-radius: 0.25rem;
-    transition: all 0.1s ease-in-out;
-}
-
-.form-control:focus {
-    box-shadow: 10px 0px 0px 0px #ffffff !important;
-}
-
 .btn-google {
     color: white;
     background-color: #ea4335;
@@ -1464,51 +1449,6 @@ h4 {
     padding: 2rem;
 }
 
-.form-signin {
-    width: 100%;
-}
-
-.form-signin .btn {
-    font-size: 80%;
-    border-radius: 0rem;
-    letter-spacing: 0.1rem;
-    font-weight: bold;
-    padding: 1rem;
-    transition: all 0.2s;
-}
-
-.form-label-group {
-    position: relative;
-    margin-bottom: 1rem;
-}
-
-.form-label-group input {
-    height: auto;
-}
-
-.form-label-group>input,
-.form-label-group>label {
-    padding: var(--input-padding-y) var(--input-padding-x);
-}
-
-.form-label-group>label {
-    position: absolute;
-    top: 0;
-    left: 0;
-    display: block;
-    width: 100%;
-    margin-bottom: 0;
-    line-height: 1.5;
-    color: #495057;
-    border: 1px solid transparent;
-    border-radius: 0.25rem;
-    transition: all 0.1s ease-in-out;
-}
-
-.form-control:focus {
-    box-shadow: 10px 0px 0px 0px #ffffff !important;
-}
-
 .btn-google {
     color: white;
     background-color: #ea4335;
@@ -1535,51 +1475,6 @@ h4 {
     padding: 2rem;
 }
 
-.form-signin {
-    width: 100%;
-}
-
-.form-signin .btn {
-    font-size: 80%;
-    border-radius: 0rem;
-    letter-spacing: 0.1rem;
-    font-weight: bold;
-    padding: 1rem;
-    transition: all 0.2s;
-}
-
-.form-label-group {
-    position: relative;
-    margin-bottom: 1rem;
-}
-
-.form-label-group input {
-    height: auto;
-}
-
-.form-label-group>input,
-.form-label-group>label {
-    padding: var(--input-padding-y) var(--input-padding-x);
-}
-
-.form-label-group>label {
-    position: absolute;
-    top: 0;
-    left: 0;
-    display: block;
-    width: 100%;
-    margin-bottom: 0;
-    line-height: 1.5;
-    color: #495057;
-    border: 1px solid transparent;
-    border-radius: 0.25rem;
-    transition: all 0.1s ease-in-out;
-}
-
-.form-control:focus {
-    box-shadow: 10px 0px 0px 0px #ffffff !important;
-}
-
 .btn-google {
     color: white;
     background-color: #ea4335;
@@ -1651,6 +1546,22 @@ h4 {
     box-shadow: 10px 0px 0px 0px #ffffff !important;
 }
 
+.form input,
+.form textarea {
+    padding: 10px 14px;
+    border: 2px solid #1b75bb;
+    box-shadow: none;
+    font-size: 15px;
+    color: #1b75bb;
+}
+
+.form select {
+    border: 2px solid #1b75bb;
+    box-shadow: none;
+    font-size: 15px;
+    color: #1b75bb;
+}
+
 .btn-google {
     color: white;
     background-color: #ea4335;