adding mission trip form

static/css/main.css

@@ -27,7 +27,9 @@
     --color-gray-700: oklch(37.3% 0.034 259.733);
     --color-gray-800: oklch(27.8% 0.033 256.848);
     --color-gray-900: oklch(21% 0.034 264.665);
+    --color-neutral-50: oklch(98.5% 0 0);
     --color-neutral-100: oklch(97% 0 0);
+    --color-neutral-300: oklch(87% 0 0);
     --color-neutral-500: oklch(55.6% 0 0);
     --color-black: #000;
     --color-white: #fff;
@@ -311,6 +313,9 @@
   .m-300 {
     margin: calc(var(--spacing) * 300);
   }
+  .mx-2 {
+    margin-inline: calc(var(--spacing) * 2);
+  }
   .mx-8 {
     margin-inline: calc(var(--spacing) * 8);
   }
@@ -329,8 +334,8 @@
   .my-8 {
     margin-block: calc(var(--spacing) * 8);
   }
-  .mt-0 {
-    margin-top: calc(var(--spacing) * 0);
+  .my-10 {
+    margin-block: calc(var(--spacing) * 10);
   }
   .mt-2 {
     margin-top: calc(var(--spacing) * 2);
@@ -549,6 +554,9 @@
   .flex-auto {
     flex: auto;
   }
+  .flex-initial {
+    flex: 0 auto;
+  }
   .flex-none {
     flex: none;
   }
@@ -558,6 +566,12 @@
   .grow {
     flex-grow: 1;
   }
+  .basis-1\/2 {
+    flex-basis: calc(1/2 * 100%);
+  }
+  .basis-1\/3 {
+    flex-basis: calc(1/3 * 100%);
+  }
   .basis-full {
     flex-basis: 100%;
   }
@@ -777,6 +791,9 @@
   .bg-indigo-500 {
     background-color: var(--color-indigo-500);
   }
+  .bg-neutral-500 {
+    background-color: var(--color-neutral-500);
+  }
   .bg-white {
     background-color: var(--color-white);
   }
@@ -873,6 +890,9 @@
   .text-left {
     text-align: left;
   }
+  .align-middle {
+    vertical-align: middle;
+  }
   .align-sub {
     vertical-align: sub;
   }
@@ -957,6 +977,9 @@
   .text-gray-900 {
     color: var(--color-gray-900);
   }
+  .text-neutral-50 {
+    color: var(--color-neutral-50);
+  }
   .text-white {
     color: var(--color-white);
   }
@@ -985,6 +1008,11 @@
       color: var(--color-gray-900);
     }
   }
+  .placeholder-neutral-300 {
+    &::placeholder {
+      color: var(--color-neutral-300);
+    }
+  }
   .opacity-0 {
     opacity: 0%;
   }
@@ -1173,6 +1201,11 @@
       color: var(--color-gray-900);
     }
   }
+  .checked\:text-neutral-500 {
+    &:checked {
+      color: var(--color-neutral-500);
+    }
+  }
   .invalid\:text-\[\#F39\] {
     &:invalid {
       color: #F39;
@@ -1198,20 +1231,6 @@
       }
     }
   }
-  .hover\:\!bg-blue-200 {
-    &:hover {
-      @media (hover: hover) {
-        background-color: var(--color-blue-200) !important;
-      }
-    }
-  }
-  .hover\:\!bg-blue-300 {
-    &:hover {
-      @media (hover: hover) {
-        background-color: var(--color-blue-300) !important;
-      }
-    }
-  }
   .hover\:\!bg-blue-500 {
     &:hover {
       @media (hover: hover) {
@@ -1219,20 +1238,6 @@
       }
     }
   }
-  .hover\:\!bg-blue-700 {
-    &:hover {
-      @media (hover: hover) {
-        background-color: var(--color-blue-700) !important;
-      }
-    }
-  }
-  .hover\:bg-blue-900 {
-    &:hover {
-      @media (hover: hover) {
-        background-color: var(--color-blue-900);
-      }
-    }
-  }
   .hover\:bg-gray-200 {
     &:hover {
       @media (hover: hover) {
@@ -1275,6 +1280,13 @@
       }
     }
   }
+  .hover\:bg-neutral-500 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--color-neutral-500);
+      }
+    }
+  }
   .hover\:text-3xl {
     &:hover {
       @media (hover: hover) {
@@ -1357,11 +1369,6 @@
       }
     }
   }
-  .focus\:bg-blue-900 {
-    &:focus {
-      background-color: var(--color-blue-900);
-    }
-  }
   .focus\:ring {
     &:focus {
       --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
@@ -1379,11 +1386,6 @@
       --tw-ring-color: var(--color-blue-500);
     }
   }
-  .focus\:ring-blue-700 {
-    &:focus {
-      --tw-ring-color: var(--color-blue-700);
-    }
-  }
   .focus\:ring-white {
     &:focus {
       --tw-ring-color: var(--color-white);
@@ -1559,6 +1561,11 @@
       margin-top: calc(var(--spacing) * 0);
     }
   }
+  .md\:flex {
+    @media (width >= 48rem) {
+      display: flex;
+    }
+  }
   .md\:h-72 {
     @media (width >= 48rem) {
       height: calc(var(--spacing) * 72);
@@ -1647,6 +1654,11 @@
       display: block;
     }
   }
+  .lg\:flex {
+    @media (width >= 64rem) {
+      display: flex;
+    }
+  }
   .lg\:hidden {
     @media (width >= 64rem) {
       display: none;
@@ -1657,6 +1669,16 @@
       height: calc(var(--spacing) * 72);
     }
   }
+  .lg\:basis-1\/2 {
+    @media (width >= 64rem) {
+      flex-basis: calc(1/2 * 100%);
+    }
+  }
+  .lg\:basis-1\/4 {
+    @media (width >= 64rem) {
+      flex-basis: calc(1/4 * 100%);
+    }
+  }
   .lg\:grid-cols-4 {
     @media (width >= 64rem) {
       grid-template-columns: repeat(4, minmax(0, 1fr));