More global styling, improved modal form styling

src/components/utilities/Modal.vue

@@ -275,23 +275,37 @@ function handleResize() {
       display: inline;
 
       .form-fields {
-        display: flex;
-        flex-direction: column;
-        margin-bottom: 20px;
+        .form-field {
+          display: flex;
+          flex-direction: column;
+          margin-bottom: 20px;
 
-        label {
-          margin-bottom: 10px;
-          font-family: 'Poppins';
-        }
+          label {
+            margin-bottom: 5px;
+            font-family: $titles;
+          }
 
-        input {
-          max-width: 250px;
-          font-family: 'Poppins';
-          border: 1px solid $cyan;
-          border-radius: 5px;
-          background-color: rgba($white, 0.8);
-          padding: 8px 10px;
+          input {
+            max-width: 250px;
+            font-family: $titles;
+            border-radius: 5px;
+            padding: 8px 10px;
+          }
+
+          &.two-col {
+            flex-direction: row;
+            gap: 20px;
+            .field {
+              display: flex;
+              flex-direction: column;
+              margin-bottom: 0;
+              input {
+                max-width: 105px;
+              }
+            }
+          }
         }
+        
       }
     }
   }