diff --git a/css/connectify.css b/css/connectify.css
index 718541b..5d196c7 100644
--- a/css/connectify.css
+++ b/css/connectify.css
@@ -124,3 +124,23 @@
align-items:start;
text-align: start;
} */
+
+/*
+ We use input-groups with an icon at the start of a text input. That icon
+ disapears on the sm breakpoint via "d-none d-sm-block". When it does disappear
+ it is still the first-child of the input-group and that prevents Bootstrap
+ from applying roundness to the left (start) of the textbox. This class is here
+ so that it can selectively applying "start-roundness" for the sm breakpoint,
+ and regular "squareness" when the icon is visible (md breakpoint and above)
+*/
+.rounded-start-sm {
+ border-bottom-left-radius: var(--bs-border-radius) !important;
+ border-top-left-radius: var(--bs-border-radius) !important
+}
+
+@media (min-width: 576px) {
+ .rounded-start-sm {
+ border-bottom-left-radius: 0 !important;
+ border-top-left-radius: 0 !important
+ }
+}
diff --git a/index.html b/index.html
index cba1652..959fe83 100644
--- a/index.html
+++ b/index.html
@@ -1,20 +1,21 @@
-
+
-
+
+ ConnectiFy
- ConnectiFy
-
+
+
-
-
-
-
+
+
+
+
@@ -56,9 +57,9 @@
ConnectiFy
-
-
+
+
@@ -71,8 +72,8 @@
ConnectiFy
@@ -80,8 +81,8 @@
ConnectiFy
-
-
+
-
-
-
-
-
-
-
-
-
-
+
-
+
-
+
-
+
-
+
@@ -146,7 +144,6 @@
ConnectiFy
-
@@ -164,10 +161,6 @@
ConnectiFy
Use 12 or more characters with a mix of letters, numbers & symbols.