Added El Salvador specific KYC form

css/main.css

@@ -46,7 +46,7 @@ body[data-theme=dark] ::-webkit-calendar-picker-indicator {
 p,
 strong {
   font-size: 0.9rem;
-  max-width: 65ch;
+  max-width: 75ch;
   line-height: 1.7;
   color: rgba(var(--text-color), 0.9);
 }
@@ -192,6 +192,23 @@ details[open] > summary .down-arrow {
   transform: rotate(180deg);
 }
 
+input[type=date] {
+  display: flex;
+  width: 100%;
+  padding: 0.8rem 0.6rem;
+  border: none;
+  border-radius: 0.5rem;
+  font-weight: 500;
+  font-family: inherit;
+  font-size: inherit;
+  color: inherit;
+  background-color: rgba(var(--text-color), 0.06);
+}
+input[type=date]:focus {
+  outline: none;
+  box-shadow: 0 0 0 0.1rem var(--accent-color);
+}
+
 sm-input,
 sm-textarea {
   font-size: 0.9rem;
@@ -230,10 +247,6 @@ sm-chip {
      -moz-user-select: none;
           user-select: none;
 }
-sm-chip[selected] {
-  --background: var(--accent-color);
-  color: rgba(var(--background-color), 1);
-}
 
 sm-select::part(options) {
   max-height: 40vh;
@@ -250,6 +263,14 @@ ul {
   list-style: none;
 }
 
+ol li {
+  margin-left: 1rem;
+  font-size: 0.9rem;
+  max-width: 75ch;
+  line-height: 1.7;
+  color: rgba(var(--text-color), 0.9);
+}
+
 fieldset {
   display: grid;
   gap: 0.5rem;
@@ -258,7 +279,6 @@ fieldset {
   border: solid 1px rgba(var(--text-color), 0.3);
 }
 fieldset legend {
-  font-size: 0.9rem;
   font-weight: 500;
 }
 
@@ -372,10 +392,14 @@ h3 {
   text-align: right;
 }
 
-.align-start {
+.align-content-start {
   align-content: flex-start;
 }
 
+.align-items-start {
+  align-items: flex-start;
+}
+
 .align-center {
   align-items: center;
 }
@@ -794,9 +818,6 @@ h3 {
   overflow: visible;
 }
 
-#file_upload_section {
-  margin-bottom: 3rem;
-}
 #file_upload_section fieldset {
   padding: 0.5rem;
 }

css/main.scss

@@ -45,7 +45,7 @@ body[data-theme="dark"] {
 p,
 strong {
   font-size: 0.9rem;
-  max-width: 65ch;
+  max-width: 75ch;
   line-height: 1.7;
   color: rgba(var(--text-color), 0.9);
 
@@ -175,6 +175,22 @@ details[open] {
     transform: rotate(180deg);
   }
 }
+input[type="date"] {
+  display: flex;
+  width: 100%;
+  padding: 0.8rem 0.6rem;
+  border: none;
+  border-radius: 0.5rem;
+  font-weight: 500;
+  font-family: inherit;
+  font-size: inherit;
+  color: inherit;
+  background-color: rgba(var(--text-color), 0.06);
+  &:focus {
+    outline: none;
+    box-shadow: 0 0 0 0.1rem var(--accent-color);
+  }
+}
 
 sm-input,
 sm-textarea {
@@ -208,10 +224,6 @@ sm-chip {
   --padding: 0.5rem 0.8rem;
   --background: rgba(var(--text-color), 0.06);
   user-select: none;
-  &[selected] {
-    --background: var(--accent-color);
-    color: rgba(var(--background-color), 1);
-  }
 }
 sm-select {
   &::part(options) {
@@ -227,6 +239,15 @@ sm-option {
 ul {
   list-style: none;
 }
+ol {
+  li {
+    margin-left: 1rem;
+    font-size: 0.9rem;
+    max-width: 75ch;
+    line-height: 1.7;
+    color: rgba(var(--text-color), 0.9);
+  }
+}
 fieldset {
   display: grid;
   gap: 0.5rem;
@@ -234,7 +255,6 @@ fieldset {
   border-radius: 0.5rem;
   border: solid 1px rgba(var(--text-color), 0.3);
   legend {
-    font-size: 0.9rem;
     font-weight: 500;
   }
 }
@@ -342,9 +362,12 @@ h3 {
   text-align: right;
 }
 
-.align-start {
+.align-content-start {
   align-content: flex-start;
 }
+.align-items-start {
+  align-items: flex-start;
+}
 
 .align-center {
   align-items: center;
@@ -758,7 +781,6 @@ h3 {
 }
 
 #file_upload_section {
-  margin-bottom: 3rem;
   fieldset {
     padding: 0.5rem;
   }