From ef291f4be0e330a760b28da9efbed533bf45d05c Mon Sep 17 00:00:00 2001
From: Scott Idem <stidem@gmail.com>
Date: Tue, 8 Jul 2025 18:47:54 -0400
Subject: [PATCH] Recovery Meeting editing looks pretty good now.

---
 .../bb/ae_idaa_comp__post_obj_id_edit.svelte  |   4 +-
 .../ae_idaa_comp__event_obj_id_edit.svelte    | 123 ++++++++++--------
 2 files changed, 75 insertions(+), 52 deletions(-)

diff --git a/src/routes/idaa/(idaa)/bb/ae_idaa_comp__post_obj_id_edit.svelte b/src/routes/idaa/(idaa)/bb/ae_idaa_comp__post_obj_id_edit.svelte
index 92123436..6c139297 100644
--- a/src/routes/idaa/(idaa)/bb/ae_idaa_comp__post_obj_id_edit.svelte
+++ b/src/routes/idaa/(idaa)/bb/ae_idaa_comp__post_obj_id_edit.svelte
@@ -753,7 +753,9 @@ $effect(() => {
                     name="external_person_id"
                     value={($idaa_slct.post_obj.external_person_id ? $idaa_slct.post_obj.external_person_id : $idaa_loc.novi_uuid)}
                     readonly={true}
-                    class="input w-96 preset-tonal-surface hover:preset-filled-surface-100-900 form-control"
+                    class="
+                        input w-96 preset-tonal-surface hover:preset-filled-surface-100-900 form-control
+                        "
                     >
             {:else}
                 <div class="ae_highlight text-sm bg-yellow-100 p-2">
diff --git a/src/routes/idaa/(idaa)/recovery_meetings/ae_idaa_comp__event_obj_id_edit.svelte b/src/routes/idaa/(idaa)/recovery_meetings/ae_idaa_comp__event_obj_id_edit.svelte
index f0b9721b..c725950c 100644
--- a/src/routes/idaa/(idaa)/recovery_meetings/ae_idaa_comp__event_obj_id_edit.svelte
+++ b/src/routes/idaa/(idaa)/recovery_meetings/ae_idaa_comp__event_obj_id_edit.svelte
@@ -736,25 +736,25 @@ function send_staff_notification_email() {
         <h3 class="h2">How to Attended</h3>
 
         <fieldset class="event__physical_virtual">
-            <legend class="legend">Face-to-Face or Virtual</legend>
+            <legend class="legend text-sm font-semibold text-surface-600-400">Face-to-Face or Virtual</legend>
             <p>Is this a face-to-face/in person meeting, a virtual/online meeting, or both?</p>
-            <div class="ae_group border border-gray-200 rounded-md p-2 space-y-1">
-                <label for="physical" class="">Face-to-Face/In person
+            <div class="ae_group border border-gray-200 rounded-md p-2 space-y-1 ">
+                <label for="physical" class="form-check-label preset-tonal-surface hover:preset-filled-surface-100-900">Face-to-Face/In person
                     <input
                         type="checkbox"
                         name="physical"
                         id="physical"
                         bind:checked={$idaa_slct.event_obj.physical}
-                        class="checkbox"
+                        class="checkbox form-check-input d-inline-block"
                         >
                 </label>
-                <label for="virtual" class="">Virtual/Online
+                <label for="virtual" class="form-check-label preset-tonal-surface hover:preset-filled-surface-100-900">Virtual/Online
                     <input
                         type="checkbox"
                         name="virtual"
                         id="virtual"
                         bind:checked={$idaa_slct.event_obj.virtual}
-                        class="checkbox"
+                        class="checkbox form-check-input d-inline-block"
                         >
                 </label>
             </div>
@@ -770,19 +770,19 @@ function send_staff_notification_email() {
             <input id="" name="address_location_id_random" type="hidden" value="{$lq__event_obj?.address_location_id_random}">
 
             <label for="address_name">Location name
-                <input type="text" class="input w-72" id="address_name" name="address_name" placeholder="The name of the place or location" value="{($lq__event_obj?.location_address_json && $lq__event_obj?.location_address_json?.name ? $lq__event_obj?.location_address_json?.name : $lq__event_obj?.address_name ?? '')}" autocomplete="off">
+                <input type="text" class="input w-72 preset-tonal-surface hover:preset-filled-surface-100-900 form-control" id="address_name" name="address_name" placeholder="The name of the place or location" value="{($lq__event_obj?.location_address_json && $lq__event_obj?.location_address_json?.name ? $lq__event_obj?.location_address_json?.name : $lq__event_obj?.address_name ?? '')}" autocomplete="off">
             </label>
 
             <label for="address_line_1">Line 1
-                <input type="text" class="input w-72" id="address_line_1" name="address_line_1" placeholder="Address line 1" value="{($lq__event_obj?.location_address_json && $lq__event_obj?.location_address_json.line_1 ? $lq__event_obj?.location_address_json.line_1 : $lq__event_obj?.address_line_1 ?? '')}" autocomplete="address-line1">
+                <input type="text" class="input w-72 preset-tonal-surface hover:preset-filled-surface-100-900 form-control" id="address_line_1" name="address_line_1" placeholder="Address line 1" value="{($lq__event_obj?.location_address_json && $lq__event_obj?.location_address_json.line_1 ? $lq__event_obj?.location_address_json.line_1 : $lq__event_obj?.address_line_1 ?? '')}" autocomplete="address-line1">
             </label>
 
             <label for="address_line_2">Line 2
-                <input type="text" class="input w-72" id="address_line_2" name="address_line_2" placeholder="Address line 2" value="{($lq__event_obj?.location_address_json && $lq__event_obj?.location_address_json.line_2 ? $lq__event_obj?.location_address_json.line_2 : $lq__event_obj?.address_line_2 ?? '')}" autocomplete="address-line2">
+                <input type="text" class="input w-72 preset-tonal-surface hover:preset-filled-surface-100-900 form-control" id="address_line_2" name="address_line_2" placeholder="Address line 2" value="{($lq__event_obj?.location_address_json && $lq__event_obj?.location_address_json.line_2 ? $lq__event_obj?.location_address_json.line_2 : $lq__event_obj?.address_line_2 ?? '')}" autocomplete="address-line2">
             </label>
 
             <label for="address_line_3">Line 3
-                <input type="text" class="input w-72" id="address_line_3" name="address_line_3" placeholder="Address line 3" value="{($lq__event_obj?.location_address_json && $lq__event_obj?.location_address_json.line_3 ? $lq__event_obj?.location_address_json.line_3 : $lq__event_obj?.address_line_3 ?? '')}" autocomplete="address-line3">
+                <input type="text" class="input w-72 preset-tonal-surface hover:preset-filled-surface-100-900 form-control" id="address_line_3" name="address_line_3" placeholder="Address line 3" value="{($lq__event_obj?.location_address_json && $lq__event_obj?.location_address_json.line_3 ? $lq__event_obj?.location_address_json.line_3 : $lq__event_obj?.address_line_3 ?? '')}" autocomplete="address-line3">
             </label>
 
         </fieldset>
@@ -792,7 +792,7 @@ function send_staff_notification_email() {
             class="physical_city_state_province_postal_code_country space-y-1">
 
             <label for="address_city">City
-                <input type="text" class="input w-40" id="address_city" name="address_city" placeholder="Name of the city" value="{($lq__event_obj?.location_address_json && $lq__event_obj?.location_address_json.city ? $lq__event_obj?.location_address_json.city : $lq__event_obj?.address_city ?? '')}" autocomplete="address-level2">
+                <input type="text" class="input w-40 preset-tonal-surface hover:preset-filled-surface-100-900 form-control" id="address_city" name="address_city" placeholder="Name of the city" value="{($lq__event_obj?.location_address_json && $lq__event_obj?.location_address_json.city ? $lq__event_obj?.location_address_json.city : $lq__event_obj?.address_city ?? '')}" autocomplete="address-level2">
             </label>
 
             {#if lu_country_subdivision_list}
@@ -811,12 +811,12 @@ function send_staff_notification_email() {
             </label>
             {:else}
             <label for="address_country_subdivision_code">State or province code
-                <input type="text" class="input w-40" id="address_country_subdivision_code" name="address_country_subdivision_code" placeholder="State or province code" value="{($lq__event_obj?.location_address_json && $lq__event_obj?.location_address_json.country_subdivision_code ? $lq__event_obj?.location_address_json.country_subdivision_code : $lq__event_obj?.address_country_subdivision_code)}" autocomplete="address-level1">
+                <input type="text" class="input w-40 preset-tonal-surface hover:preset-filled-surface-100-900 form-control" id="address_country_subdivision_code" name="address_country_subdivision_code" placeholder="State or province code" value="{($lq__event_obj?.location_address_json && $lq__event_obj?.location_address_json.country_subdivision_code ? $lq__event_obj?.location_address_json.country_subdivision_code : $lq__event_obj?.address_country_subdivision_code)}" autocomplete="address-level1">
             </label>
             {/if}
 
             <label for="address_postal_code">Postal code or zip code
-                <input type="text" class="input w-32" id="address_postal_code" name="address_postal_code" placeholder="Postal code or zip code" value="{($lq__event_obj?.location_address_json && $lq__event_obj?.location_address_json.postal_code ? $lq__event_obj?.location_address_json.postal_code : $lq__event_obj?.address_postal_code ?? '')}" autocomplete="postal-code">
+                <input type="text" class="input w-32 preset-tonal-surface hover:preset-filled-surface-100-900 form-control" id="address_postal_code" name="address_postal_code" placeholder="Postal code or zip code" value="{($lq__event_obj?.location_address_json && $lq__event_obj?.location_address_json.postal_code ? $lq__event_obj?.location_address_json.postal_code : $lq__event_obj?.address_postal_code ?? '')}" autocomplete="postal-code">
             </label>
 
             {#if lu_country_list}
@@ -835,7 +835,7 @@ function send_staff_notification_email() {
             </label>
             {:else}
             <label for="address_country_alpha_2_code">Country
-                <input type="text" class="input" id="address_country_alpha_2_code" name="address_country_alpha_2_code" placeholder="Country alpha 2 code" value="{($lq__event_obj?.location_address_json && $lq__event_obj?.location_address_json.country_alpha_2_code ? $lq__event_obj?.location_address_json.country_alpha_2_code : $lq__event_obj?.address_country_alpha_2_code)}" autocomplete="country">
+                <input type="text" class="input preset-tonal-surface hover:preset-filled-surface-100-900 form-control" id="address_country_alpha_2_code" name="address_country_alpha_2_code" placeholder="Country alpha 2 code" value="{($lq__event_obj?.location_address_json && $lq__event_obj?.location_address_json.country_alpha_2_code ? $lq__event_obj?.location_address_json.country_alpha_2_code : $lq__event_obj?.address_country_alpha_2_code)}" autocomplete="country">
             </label>
             {/if}
 
@@ -877,17 +877,17 @@ function send_staff_notification_email() {
             <legend>Virtual/Online</legend>
 
             <label for="attend_url">URL to access the virtual meeting
-                <input type="url" class="input w-72" id="attend_url" name="attend_url" placeholder="URL to access the virtual meeting" value={$lq__event_obj?.attend_url ?? ''} autocomplete="url">
+                <input type="url" class="input w-72 preset-tonal-surface hover:preset-filled-surface-100-900 form-control" id="attend_url" name="attend_url" placeholder="URL to access the virtual meeting" value={$lq__event_obj?.attend_url ?? ''} autocomplete="url">
             </label>
             <label for="attend_url_passcode">Passcode to join at URL
-                <input type="text" class="input w-72" id="attend_url_passcode" name="attend_url_passcode" placeholder="Passcode to join at URL" value={$lq__event_obj?.attend_url_passcode ?? ''} autocomplete="off">
+                <input type="text" class="input w-72 preset-tonal-surface hover:preset-filled-surface-100-900 form-control" id="attend_url_passcode" name="attend_url_passcode" placeholder="Passcode to join at URL" value={$lq__event_obj?.attend_url_passcode ?? ''} autocomplete="off">
             </label>
 
             <label for="attend_phone">Phone number for meeting conference call
-                <input type="tel" class="input w-72" id="attend_phone" name="attend_phone" placeholder="Phone number for meeting conference call" value={$lq__event_obj?.attend_phone ?? ''} autocomplete="tel">
+                <input type="tel" class="input w-72 preset-tonal-surface hover:preset-filled-surface-100-900 form-control" id="attend_phone" name="attend_phone" placeholder="Phone number for meeting conference call" value={$lq__event_obj?.attend_phone ?? ''} autocomplete="tel">
             </label>
             <label for="attend_phone_passcode">Passcode to join conference call
-                <input type="text" class="input w-72" id="attend_phone_passcode" name="attend_phone_passcode" placeholder="Passcode to join conference call" value={$lq__event_obj?.attend_phone_passcode ?? ''} autocomplete="off">
+                <input type="text" class="input w-72 preset-tonal-surface hover:preset-filled-surface-100-900 form-control" id="attend_phone_passcode" name="attend_phone_passcode" placeholder="Passcode to join conference call" value={$lq__event_obj?.attend_phone_passcode ?? ''} autocomplete="off">
             </label>
 
         </fieldset>
@@ -981,33 +981,33 @@ function send_staff_notification_email() {
             </label>
         </fieldset>
 
-        <fieldset class="event__days_of_week flex flex-col md:flex-row flex-wrap gap-1 items-center justify-center">
-            <label class="label w-32">
-                <input type="checkbox" name="weekday_sunday" value="Sunday" bind:checked={($idaa_slct.event_obj.weekday_sunday)} class="checkbox">
+        <fieldset class="flex flex-col sm:flex-row flex-wrap gap-1 items-start justify-start">
+            <label class="label w-32 form-check-label preset-tonal-surface hover:preset-filled-surface-100-900">
+                <input type="checkbox" name="weekday_sunday" value="Sunday" bind:checked={($idaa_slct.event_obj.weekday_sunday)} class="checkbox form-check-input d-inline-block">
                 Sunday
             </label>
-            <label class="label w-32">
-                <input type="checkbox" name="weekday_monday" value="Monday" bind:checked={($idaa_slct.event_obj.weekday_monday)} class="checkbox">
+            <label class="label w-32 form-check-label preset-tonal-surface hover:preset-filled-surface-100-900">
+                <input type="checkbox" name="weekday_monday" value="Monday" bind:checked={($idaa_slct.event_obj.weekday_monday)} class="checkbox form-check-input d-inline-block">
                 Monday
             </label>
-            <label class="label w-32">
-                <input type="checkbox" name="weekday_tuesday" value="Tuesday" bind:checked={($idaa_slct.event_obj.weekday_tuesday)} class="checkbox">
+            <label class="label w-32 form-check-label preset-tonal-surface hover:preset-filled-surface-100-900">
+                <input type="checkbox" name="weekday_tuesday" value="Tuesday" bind:checked={($idaa_slct.event_obj.weekday_tuesday)} class="checkbox form-check-input d-inline-block">
                 Tuesday
             </label>
-            <label class="label w-32">
-                <input type="checkbox" name="weekday_wednesday" value="Wednesday" bind:checked={($idaa_slct.event_obj.weekday_wednesday)} class="checkbox">
+            <label class="label w-32 form-check-label preset-tonal-surface hover:preset-filled-surface-100-900">
+                <input type="checkbox" name="weekday_wednesday" value="Wednesday" bind:checked={($idaa_slct.event_obj.weekday_wednesday)} class="checkbox form-check-input d-inline-block">
                 Wednesday
             </label>
-            <label class="label w-32">
-                <input type="checkbox" name="weekday_thursday" value="Thursday" bind:checked={($idaa_slct.event_obj.weekday_thursday)} class="checkbox">
+            <label class="label w-32 form-check-label preset-tonal-surface hover:preset-filled-surface-100-900">
+                <input type="checkbox" name="weekday_thursday" value="Thursday" bind:checked={($idaa_slct.event_obj.weekday_thursday)} class="checkbox form-check-input d-inline-block">
                 Thursday
             </label>
-            <label class="label w-32">
-                <input type="checkbox" name="weekday_friday" value="Friday" bind:checked={($idaa_slct.event_obj.weekday_friday)} class="checkbox">
+            <label class="label w-32 form-check-label preset-tonal-surface hover:preset-filled-surface-100-900">
+                <input type="checkbox" name="weekday_friday" value="Friday" bind:checked={($idaa_slct.event_obj.weekday_friday)} class="checkbox form-check-input d-inline-block">
                 Friday
             </label>
-            <label class="label w-32">
-                <input type="checkbox" name="weekday_saturday" value="Saturday" bind:checked={($idaa_slct.event_obj.weekday_saturday)} class="checkbox">
+            <label class="label w-32 form-check-label preset-tonal-surface hover:preset-filled-surface-100-900">
+                <input type="checkbox" name="weekday_saturday" value="Saturday" bind:checked={($idaa_slct.event_obj.weekday_saturday)} class="checkbox form-check-input d-inline-block">
                 Saturday
             </label>
         </fieldset>
@@ -1156,7 +1156,14 @@ function send_staff_notification_email() {
         <h3 class="h3">Contacts</h3>
 
         <!-- {#if $ae_loc.trusted_access} -->
-        <label for="external_person_id"><span class="fas fa-link"></span> Linked with Novi ID
+        <div>
+        <label
+            for="external_person_id"
+            class="block form-group d-block w-100"
+            >
+            <span class="text-sm font-semibold text-surface-600-400">
+                <span class="fas fa-link"></span> Linked with Novi ID
+            </span>
             {#if !$ae_loc.trusted_access}
                 <span class="fas fa-lock" title="Field is locked"></span>
                 <input
@@ -1165,7 +1172,9 @@ function send_staff_notification_email() {
                     name="external_person_id"
                     value={($lq__event_obj?.external_person_id ? $lq__event_obj?.external_person_id : $idaa_loc.novi_uuid)}
                     readonly={true}
-                    class="ae_width_lg input"
+                    class="
+                        input w-96 preset-tonal-surface hover:preset-filled-surface-100-900 form-control
+                        "
                     >
             {:else}
                 <div class="ae_highlight">Primary link using the Novi API UUID. This must be empty, a staff person, or an active member of IDAA and should be the primary contact for this meeting.</div>
@@ -1176,10 +1185,13 @@ function send_staff_notification_email() {
                     name="external_person_id"
                     value={($lq__event_obj?.external_person_id ? $lq__event_obj?.external_person_id : '')}
                     readonly={false}
-                    class="ae_width_lg input"
+                    class="
+                        input w-96 preset-tonal-surface hover:preset-filled-surface-100-900 form-control
+                        "
                     >
             {/if}
         </label>
+        </div>
         <!-- {/if} -->
 
         <div
@@ -1206,7 +1218,11 @@ function send_staff_notification_email() {
                             return false;
                         }
                     }}
-                    class="novi_btn novi_smaller ae_btn_info"
+                    class="
+                        novi_btn novi_smaller ae_btn_info
+                        btn btn-sm
+                        preset-filled-tertiary-200-800
+                        "
                     >
                     <span class="fas fa-lock" title="Field is locked"></span> Name and email locked
                 </button>
@@ -1216,14 +1232,19 @@ function send_staff_notification_email() {
                     on:click|preventDefault={() => {
                         $idaa_slct.event_obj.contact_li_json[0].unlock = false;
                     }}
-                    class="novi_btn novi_smaller ae_btn_info"
+                    class="
+                        novi_btn novi_smaller ae_btn_info
+                        btn btn-sm
+                        preset-filled-tertiary-200-800
+                        "
                     >
                     <span class="fas fa-unlock" title="Field is unlocked"></span>
                     Unlocked
                 </button>
             {/if}
 
-            <label for="contact_1_full_name">Full name
+            <label for="contact_1_full_name">
+                Full name
                 {#if !($ae_loc.administrator_access || ($idaa_slct.event_obj?.contact_li_json?.length && $idaa_slct.event_obj?.contact_li_json[0]?.unlock))}
                     <span class="fas fa-lock" title="Field is locked"></span>
                 {:else}
@@ -1231,7 +1252,7 @@ function send_staff_notification_email() {
                 {/if}
                 <input
                     type="text"
-                    class="input w-72"
+                    class="input w-72 preset-tonal-surface hover:preset-filled-surface-100-900  form-control"
                     id="contact_1_full_name" name="contact_1_full_name"
                     placeholder="Full name"
                     value={($lq__event_obj?.contact_li_json && $lq__event_obj?.contact_li_json[0] && $lq__event_obj?.contact_li_json[0].full_name ? $lq__event_obj?.contact_li_json[0].full_name : '')}
@@ -1248,7 +1269,7 @@ function send_staff_notification_email() {
                 {/if}
                 <input
                     type="email"
-                    class="input w-72"
+                    class="input w-72 preset-tonal-surface hover:preset-filled-surface-100-900 form-control"
                     id="contact_1_email"
                     name="contact_1_email"
                     placeholder="Email"
@@ -1261,13 +1282,13 @@ function send_staff_notification_email() {
             </span>
             <span class="ae_group">
             <label for="contact_1_phone_mobile">Mobile phone
-                <input type="tel" class="input w-40" id="contact_1_phone_mobile" name="contact_1_phone_mobile" placeholder="Mobile phone" value={($lq__event_obj?.contact_li_json && $lq__event_obj?.contact_li_json[0] && $lq__event_obj?.contact_li_json[0].phone_mobile ? $lq__event_obj?.contact_li_json[0].phone_mobile : '')} autocomplete="tel">
+                <input type="tel" class="input w-40 preset-tonal-surface hover:preset-filled-surface-100-900 form-control" id="contact_1_phone_mobile" name="contact_1_phone_mobile" placeholder="Mobile phone" value={($lq__event_obj?.contact_li_json && $lq__event_obj?.contact_li_json[0] && $lq__event_obj?.contact_li_json[0].phone_mobile ? $lq__event_obj?.contact_li_json[0].phone_mobile : '')} autocomplete="tel">
             </label>
             <label for="contact_1_phone_home">Home phone
-                <input type="tel" class="input w-40" id="contact_1_phone_home" name="contact_1_phone_home" placeholder="Home phone" value={($lq__event_obj?.contact_li_json && $lq__event_obj?.contact_li_json[0] && $lq__event_obj?.contact_li_json[0].phone_home ? $lq__event_obj?.contact_li_json[0].phone_home : '')} autocomplete="tel">
+                <input type="tel" class="input w-40 preset-tonal-surface hover:preset-filled-surface-100-900 form-control" id="contact_1_phone_home" name="contact_1_phone_home" placeholder="Home phone" value={($lq__event_obj?.contact_li_json && $lq__event_obj?.contact_li_json[0] && $lq__event_obj?.contact_li_json[0].phone_home ? $lq__event_obj?.contact_li_json[0].phone_home : '')} autocomplete="tel">
             </label>
             <label for="contact_1_phone_office">Office phone
-                <input type="tel" class="input w-40" id="contact_1_phone_office" name="contact_1_phone_office" placeholder="Office phone" value={($lq__event_obj?.contact_li_json && $lq__event_obj?.contact_li_json[0] && $lq__event_obj?.contact_li_json[0].phone_office ? $lq__event_obj?.contact_li_json[0].phone_office : '')} autocomplete="tel">
+                <input type="tel" class="input w-40 preset-tonal-surface hover:preset-filled-surface-100-900 form-control" id="contact_1_phone_office" name="contact_1_phone_office" placeholder="Office phone" value={($lq__event_obj?.contact_li_json && $lq__event_obj?.contact_li_json[0] && $lq__event_obj?.contact_li_json[0].phone_office ? $lq__event_obj?.contact_li_json[0].phone_office : '')} autocomplete="tel">
             </label>
             </span>
         </fieldset>
@@ -1276,21 +1297,21 @@ function send_staff_notification_email() {
             <legend class="legend">Contact 2</legend>
             <span class="ae_group">
             <label for="contact_2_full_name">Full name
-                <input type="text" class="input w-72" id="contact_2_full_name" name="contact_2_full_name" placeholder="Full name" value={($lq__event_obj?.contact_li_json && $lq__event_obj?.contact_li_json[1] && $lq__event_obj?.contact_li_json[1].full_name ? $lq__event_obj?.contact_li_json[1].full_name : '')} autocomplete="name">
+                <input type="text" class="input w-72 preset-tonal-surface hover:preset-filled-surface-100-900 form-control" id="contact_2_full_name" name="contact_2_full_name" placeholder="Full name" value={($lq__event_obj?.contact_li_json && $lq__event_obj?.contact_li_json[1] && $lq__event_obj?.contact_li_json[1].full_name ? $lq__event_obj?.contact_li_json[1].full_name : '')} autocomplete="name">
             </label>
             <label for="contact_2_email">Email
-                <input type="email" class="input w-72" id="contact_2_email" name="contact_2_email" placeholder="Email" value={($lq__event_obj?.contact_li_json && $lq__event_obj?.contact_li_json[1] && $lq__event_obj?.contact_li_json[1].email ? $lq__event_obj?.contact_li_json[1].email : '')} autocomplete="email">
+                <input type="email" class="input w-72 preset-tonal-surface hover:preset-filled-surface-100-900 form-control" id="contact_2_email" name="contact_2_email" placeholder="Email" value={($lq__event_obj?.contact_li_json && $lq__event_obj?.contact_li_json[1] && $lq__event_obj?.contact_li_json[1].email ? $lq__event_obj?.contact_li_json[1].email : '')} autocomplete="email">
             </label>
             </span>
             <span class="ae_group">
             <label for="contact_2_phone_mobile">Mobile phone
-                <input type="tel" class="input w-40" id="contact_2_phone_mobile" name="contact_2_phone_mobile" placeholder="Mobile phone" value={($lq__event_obj?.contact_li_json && $lq__event_obj?.contact_li_json[1] && $lq__event_obj?.contact_li_json[1].phone_mobile ? $lq__event_obj?.contact_li_json[1].phone_mobile : '')} autocomplete="tel">
+                <input type="tel" class="input w-40 preset-tonal-surface hover:preset-filled-surface-100-900 form-control" id="contact_2_phone_mobile" name="contact_2_phone_mobile" placeholder="Mobile phone" value={($lq__event_obj?.contact_li_json && $lq__event_obj?.contact_li_json[1] && $lq__event_obj?.contact_li_json[1].phone_mobile ? $lq__event_obj?.contact_li_json[1].phone_mobile : '')} autocomplete="tel">
             </label>
             <label for="contact_2_phone_home">Home phone
-                <input type="tel" class="input w-40" id="contact_2_phone_home" name="contact_2_phone_home" placeholder="Home phone" value={($lq__event_obj?.contact_li_json && $lq__event_obj?.contact_li_json[1] && $lq__event_obj?.contact_li_json[1].phone_home ? $lq__event_obj?.contact_li_json[1].phone_home : '')} autocomplete="tel">
+                <input type="tel" class="input w-40 preset-tonal-surface hover:preset-filled-surface-100-900 form-control" id="contact_2_phone_home" name="contact_2_phone_home" placeholder="Home phone" value={($lq__event_obj?.contact_li_json && $lq__event_obj?.contact_li_json[1] && $lq__event_obj?.contact_li_json[1].phone_home ? $lq__event_obj?.contact_li_json[1].phone_home : '')} autocomplete="tel">
             </label>
             <label for="contact_2_phone_office">Office phone
-                <input type="tel" class="input w-40" id="contact_2_phone_office" name="contact_2_phone_office" placeholder="Office phone" value={($lq__event_obj?.contact_li_json && $lq__event_obj?.contact_li_json[1] && $lq__event_obj?.contact_li_json[1].phone_office ? $lq__event_obj?.contact_li_json[1].phone_office : '')} autocomplete="tel">
+                <input type="tel" class="input w-40 preset-tonal-surface hover:preset-filled-surface-100-900 form-control" id="contact_2_phone_office" name="contact_2_phone_office" placeholder="Office phone" value={($lq__event_obj?.contact_li_json && $lq__event_obj?.contact_li_json[1] && $lq__event_obj?.contact_li_json[1].phone_office ? $lq__event_obj?.contact_li_json[1].phone_office : '')} autocomplete="tel">
             </label>
             </span>
         </fieldset>
@@ -1617,11 +1638,11 @@ function send_staff_notification_email() {
 }
 
 
-.event__days_of_week {
+/* .event__days_of_week {
     display: flex;
     flex-direction: row;
     justify-content: space-between;
     align-items: center;
-}
+} */
 
 </style>