More work on getting post and comment editing working.

src/routes/idaa/(idaa)/bb/+page.svelte

@@ -55,6 +55,13 @@ $: lq__post_comment_obj_li = liveQuery(async () => {
     return results;
 });
 
+$: lq__post_comment_obj = liveQuery(async () => {
+    let results = await db_posts.comment
+        .get($idaa_slct.post_comment_id);
+
+    return results;
+});
+
 </script>
 
 
@@ -123,6 +130,7 @@ $: lq__post_comment_obj_li = liveQuery(async () => {
     <Comp__post_obj_id_view
         lq__post_obj={lq__post_obj}
         lq__post_comment_obj_li={lq__post_comment_obj_li}
+        lq__post_comment_obj={lq__post_comment_obj}
         />
 
-</Modal>
+</Modal>

src/routes/idaa/(idaa)/bb/ae_idaa_comp__post_comment_obj_id_edit.svelte

@@ -0,0 +1,399 @@
+<script lang="ts">
+export let log_lvl = 1;
+import { createEventDispatcher, onDestroy, onMount } from 'svelte';
+import { fade } from 'svelte/transition';
+
+import { ae_util } from '$lib/ae_utils/ae_utils';
+import { core_func } from '$lib/ae_core/ae_core_functions';
+import { api } from '$lib/api';
+import { ae_snip, ae_loc, ae_sess, ae_api, ae_trig, slct, slct_trigger } from '$lib/ae_stores';
+import { idaa_loc, idaa_sess, idaa_slct } from '$lib/ae_idaa_stores';
+import { posts_func } from '$lib/ae_posts/ae_posts_functions';
+import Tiptap_editor from '$lib/element_tiptap_editor.svelte';
+
+export let lq__post_comment_obj: any;
+
+const dispatch = createEventDispatcher();
+
+type key_val = {
+    [key: string]: any;
+};
+
+let prom_api__post_comment_obj: any;
+
+let disable_submit_btn = true;
+
+
+async function handle_submit_form(event: any) {
+    console.log('*** handle_submit_form() ***');
+
+    disable_submit_btn = true;
+
+    let form_data = new FormData(event.target);
+    console.log(form_data);
+
+    disable_submit_btn = false;
+
+    return true;
+}
+
+async function handle_delete_post_comment_obj({post_id, method}: key_val) {
+    console.log('*** handle_delete_post_comment_obj() ***');
+
+
+    return true;
+}
+
+</script>
+
+
+<section
+    class="svelte_component ae_section ae_edit post_comment_obj edit__post_comment_obj space-y-2 p-2 border border-1 rounded"
+    class:ae_create={!$idaa_slct.post_id}
+    bind:clientHeight={$ae_loc.iframe_height_modal_body}
+    >
+
+<form on:submit|preventDefault={handle_submit_form} class="space-y-1">
+
+    {#await prom_api__post_comment_obj}
+        <div class="awaiting alert_msg_pulse" out:fade={{ duration: 2000 }}>Saving...</div>
+    {:then}
+        {#if prom_api__post_comment_obj}
+            <!-- <div class="awaiting" out:fade={{ duration: 2000 }}>Finished saving</div> -->
+        {:else}
+            <!-- <div class="awaiting" out:fade={{ duration: 2000 }}>Nothing here yet</div> -->
+        {/if}
+    {/await}
+
+    <section class="text-center"> <!-- BEGIN: section post__options -->
+        <button
+            on:click={() => {
+                $idaa_sess.bb.show__inline_edit__post_comment_id = false;
+            }}
+            class="btn btn-sm variant-ghost-warning hover:variant-filled-warning transition"
+            title="Cancel editing of post comment for {$idaa_slct.post_comment_obj.full_name} (ID: {$idaa_slct.post_comment_obj.post_id}"
+            >
+            <span class="fas fa-edit m-1"></span> Cancel Edit
+        </button>
+    </section> <!-- END: section post__options -->
+
+    <h3 class="h3">Post Comment</h3>
+
+    <input type="hidden" value={$idaa_slct.post_id} />
+
+    <section class="ae_section post__general_information space-y-1"> <!-- BEGIN: section post__general_information -->
+
+        <!-- <label for="title">Title of BB Post:
+        <input type="text" id="title" name="title" required max="200" value={$lq__post_comment_obj?.title} placeholder="Title of Post" autocomplete="off" class="input w-96" />
+        </label> -->
+
+        <label for="description" class="ae_label post__description">Content (comment body):
+
+            <Tiptap_editor
+                default_minimal={true}
+                bind:html_text={$idaa_slct.post_comment_obj.description}
+                show_button_kv={{'heading__h1': false, 'heading__h2': false, 'heading__h3': false}}
+                bind:new_html={$idaa_slct.post_comment_obj.description_new_html}
+                placeholder="Your post content here..."
+                />
+
+        </label>
+
+        <div>
+            <label class="">
+                BB post topic:
+                <select
+                    name="type"
+                    class="select w-96"
+                    value={$lq__post_comment_obj?.type}
+                    >
+                    <option value="">-- None --</option>
+                    <option value={16}>Licensing/ monitoring/ credentialing issues</option>
+                    <option value={17}>Return to practice</option>
+                    <option value={18}>Contacts/ sponsorship in my area</option>
+                    <option value={19}>Professional positions</option>
+                    <option value={21}
+                        disabled={!$ae_loc.trusted_access}
+                        >
+                        Announcement
+                    </option>
+                </select>
+            </label>
+        </div>
+
+
+        <h3 class="h3">Poster's Information</h3>
+        <fieldset class="">
+            <legend class="">Post as Anonymous</legend>
+            <div class="flex flex-row gap-2">
+                <input
+                    type="radio"
+                    id="anonymous_no"
+                    name="anonymous"
+                    value={false}
+                    bind:group={$slct.post_comment_obj.anonymous}
+                    class="radio"
+                    >
+                <label for="anonymous_no">No, include my name and email address</label>
+            </div>
+            <div class="flex flex-row gap-2">
+                <input
+                    type="radio"
+                    id="anonymous_yes"
+                    name="anonymous"
+                    value={true}
+                    bind:group={$slct.post_comment_obj.anonymous}
+                    class="radio"
+                    >
+                <label for="anonymous_yes">Yes, the post will be listed as Anonymous</label>
+            </div>
+        </fieldset>
+
+        <label for="external_person_id"><span class="fas fa-link"></span> Linked with Novi ID
+            {#if !$ae_loc.trusted_access}
+                <span class="fas fa-lock" title="Field is locked"></span>
+                <input
+                    type="text"
+                    id="external_person_id"
+                    name="external_person_id"
+                    value={($slct.post_comment_obj.external_person_id ? $slct.post_comment_obj.external_person_id : $idaa_loc.novi_uuid)}
+                    readonly={true}
+                    class="input w-96"
+                    >
+            {:else}
+                <div class="ae_highlight text-sm bg-yellow-100 p-2">
+                    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>
+                <span class="fas fa-unlock m-1" title="Field is unlocked"></span>
+                <input
+                    type="text"
+                    id="external_person_id"
+                    name="external_person_id"
+                    value={($slct.post_comment_obj.external_person_id ? $slct.post_comment_obj.external_person_id : '')}
+                    readonly={false}
+                    class="input w-96"
+                    >
+            {/if}
+        </label>
+
+        <label for="full_name">Name
+            {#if !$ae_loc.trusted_access}
+                <span class="fas fa-lock m-1" title="Field is locked"></span>
+            {:else}
+                <span class="fas fa-unlock m-1" title="Field is unlocked"></span>
+            {/if}
+            <input
+                type="text"
+                id="full_name"
+                name="full_name"
+                value={($slct.post_comment_obj.full_name ? $slct.post_comment_obj.full_name : $idaa_loc.novi_full_name)}
+                readonly={!$ae_loc.trusted_access}
+                class="input w-96"
+                >
+        </label>
+
+        {#if $ae_loc.trusted_access}
+        <label for="email">Email
+            {#if !$ae_loc.trusted_access}
+                <span class="fas fa-lock m-1" title="Field is locked"></span>
+            {:else}
+                <span class="fas fa-unlock m-1" title="Field is unlocked"></span>
+            {/if}
+            <input
+                type="text"
+                name="email"
+                value={($slct.post_comment_obj.email ? $slct.post_comment_obj.email : $idaa_loc.novi_email)}
+                readonly={!$ae_loc.trusted_access}
+                class="input w-96"
+                >
+            <span class="ae_highlight">Secondary link using the Novi email address</span>
+        </label>
+        {/if}
+
+    </section> <!-- END: section post__general_information -->
+
+    <button
+        type="button"
+        class="ae_btn ae_d_none_toggle ae_float_right ae_smallest btn btn-xs btn-info btn-sm variant-ghost-warning hover:variant-filled-warning transition"
+        on:click={() => {
+            // document.querySelector('.ae_d_none_content').classList.toggle('ae_fade_out'); document.querySelector('.ae_d_none_content').classList.toggle('ae_fade_in');
+            $idaa_loc.show__admin_options = !$idaa_loc.show__admin_options;
+        }}
+        >
+        <span class="fas fa-eye m-1"></span>
+        {$idaa_loc.show__admin_options ? 'Hide' : ''} Admin Options?
+    </button>
+
+    <section
+        class="ae_section post__admin_options"
+        class:hidden={!$ae_loc.trusted_access || !$idaa_loc.show__admin_options}
+        > <!-- BEGIN: section post__admin_options -->
+
+        <h3 class="h4">
+            Admin Options
+
+        </h3>
+
+        <span
+
+            >
+
+            <span
+                class="flex flex-row flex-wrap items-center justify-between"
+                >
+                <label>Hide
+                    <input
+                        type="checkbox"
+                        name="hide"
+                        id="hide"
+                        bind:checked={$idaa_slct.post_comment_obj.hide}
+                        class="checkbox"
+                        >
+                </label>
+
+                <label>Priority
+                    <input
+                        type="checkbox"
+                        name="priority"
+                        id="priority"
+                        bind:checked={$idaa_slct.post_comment_obj.priority}
+                        class="checkbox"
+                        >
+                </label>
+
+                <label>Sort <input type="number" name="sort" value={$lq__post_comment_obj?.sort} class="input w-24" /></label>
+
+                <label>Group <input type="text" name="group" value={$lq__post_comment_obj?.group ? $lq__post_comment_obj?.group : ''} max="100" class="input w-40" /></label>
+
+                {#if $ae_loc.administrator_access}
+                <label>Enable
+                    <input
+                        type="checkbox"
+                        name="enable"
+                        id="enable"
+                        bind:checked={$idaa_slct.post_comment_obj.enable}
+                        class="checkbox"
+                        >
+                </label>
+                {/if}
+            </span>
+
+            {#if $ae_loc.trusted_access}
+            <label
+                for="notes"
+                >
+                Internal Staff Notes
+                <Tiptap_editor
+                    default_minimal={true}
+                    bind:html_text={$idaa_slct.post_comment_obj.notes}
+                    show_button_kv={{'heading__h1': false, 'heading__h2': false, 'heading__h3': false}}
+                    bind:new_html={$idaa_slct.post_comment_obj.notes_new_html}
+                    />
+            </label>
+            {/if}
+
+        </span> <!-- END: span ae_show_hide_content -->
+
+    </section> <!-- END: section post__admin_options -->
+
+
+    <section class="ae_section ae_options ae_row ae_actions post__options post__actions flex flex-row gap-1 items-center justify-between">
+        <div>
+        <!-- BEGIN: section post__options -->
+        {#if $idaa_slct.post_id}
+            <button
+                type="submit"
+                disabled={(disable_submit_btn)}
+                class="ae_btn btn_primary btn btn-primary variant-ghost-primary hover:variant-filled-primary transition"
+                >
+                {#await prom_api__post_comment_obj}
+                    <span class="fas fa-spinner fa-spin m-1"></span> Saving
+                {:then}
+                    <span class="fas fa-save m-1"></span> Save
+                {/await}
+            </button>
+        {:else}
+            <button
+                type="submit"
+                disabled={(disable_submit_btn)}
+                on:click={() => {
+                    if (!confirm('Are you sure you want to create this post?')) {return false;}
+                    // handle_save_post_comment_obj({post_id: $idaa_slct.post_id, method: 'create'});
+                }}
+                class="ae_btn btn_primary btn btn-primary variant-ghost-primary hover:variant-filled-primary transition"
+                >
+                {#await prom_api__post_comment_obj}
+                    <span class="fas fa-spinner fa-spin m-1"></span> Saving
+                {:then}
+                    <span class="fas fa-plus m-1"></span> Save New Event
+                {/await}
+            </button>
+        {/if}
+
+        {#if $idaa_slct.post_id}
+        {#if $ae_loc.administrator_access}
+        <button
+            on:click={() => {
+                if (!confirm('Are you sure you want to delete this post?')) {return false;}
+                handle_delete_post_comment_obj({post_id: $idaa_slct.post_id, method: 'delete'});
+
+                $idaa_slct.post_id = null;
+                // $lq__post_comment_obj = {};
+            }}
+            class="btn btn-sm variant-soft-warning" type="button"
+            title="Delete record permanently"
+            >
+            <span class="fas fa-minus m-1"></span> Delete
+        </button>
+        {:else if $ae_loc.trusted_access}
+        <button
+            on:click={() => {
+                if (!confirm('Are you sure you want to disable this post?')) {return false;}
+                handle_delete_post_comment_obj({post_id: $idaa_slct.post_id, method: 'disable'});
+
+                $idaa_slct.post_id = null;
+                // $lq__post_comment_obj = {};
+            }}
+            class="btn btn-sm variant-soft-warning" type="button"
+            title="Disable record to delete"
+            >
+            <span class="fas fa-minus m-1"></span> Delete
+        </button>
+        {:else}
+        <button
+            on:click={() => {
+                if (!confirm('Are you sure you want to hide this post?')) {return false;}
+                handle_delete_post_comment_obj({post_id: $idaa_slct.post_id, method: 'hide'});
+
+                $idaa_slct.post_id = null;
+                // $lq__post_comment_obj = {};
+            }}
+            class="btn btn-sm variant-soft-warning" type="button"
+            title="Hide record to delete"
+            >
+            <span class="fas fa-comment-slash m-1"></span> Delete
+        </button>
+        {/if}
+        {/if}
+        </div>
+
+        <div>
+        <button
+            on:click={() => {
+                $idaa_sess.bb.show__inline_edit__post_comment_id = false;
+            }}
+            class="btn btn-sm variant-ghost-warning hover:variant-filled-warning transition"
+            title="Cancel editing of post for {$idaa_slct.post_comment_obj.full_name} (ID: {$idaa_slct.post_comment_obj.post_id}"
+            >
+            <span class="fas fa-edit m-1"></span> Cancel Edit
+        </button>
+        </div>
+    </section>
+
+</form>
+
+</section>
+
+
+<style lang="scss">
+</style>

src/routes/idaa/(idaa)/bb/ae_idaa_comp__post_obj_id_edit.svelte

@@ -339,7 +339,7 @@ async function handle_delete_post_obj({post_id, method}: key_val) {
                 handle_delete_post_obj({post_id: $idaa_slct.post_id, method: 'delete'});
 
                 $idaa_slct.post_id = null;
-                $lq__post_obj = {};
+                // $lq__post_obj = {};
             }}
             class="btn btn-sm variant-soft-warning" type="button"
             title="Delete record permanently"
@@ -353,7 +353,7 @@ async function handle_delete_post_obj({post_id, method}: key_val) {
                 handle_delete_post_obj({post_id: $idaa_slct.post_id, method: 'disable'});
 
                 $idaa_slct.post_id = null;
-                $lq__post_obj = {};
+                // $lq__post_obj = {};
             }}
             class="btn btn-sm variant-soft-warning" type="button"
             title="Disable record to delete"
@@ -367,7 +367,7 @@ async function handle_delete_post_obj({post_id, method}: key_val) {
                 handle_delete_post_obj({post_id: $idaa_slct.post_id, method: 'hide'});
 
                 $idaa_slct.post_id = null;
-                $lq__post_obj = {};
+                // $lq__post_obj = {};
             }}
             class="btn btn-sm variant-soft-warning" type="button"
             title="Hide record to delete"
@@ -394,3 +394,7 @@ async function handle_delete_post_obj({post_id, method}: key_val) {
 </form>
 
 </section>
+
+
+<style lang="scss">
+</style>

src/routes/idaa/(idaa)/bb/ae_idaa_comp__post_obj_id_view.svelte

@@ -9,9 +9,11 @@ import { ae_snip, ae_loc, ae_sess, ae_api, ae_trig, slct, slct_trigger } from '$
 import { idaa_loc, idaa_sess, idaa_slct, idaa_trigger } from '$lib/ae_idaa_stores';
 
 import Comp__post_obj_id_edit from './ae_idaa_comp__post_obj_id_edit.svelte';
+import Comp__post_comment_obj_id_edit from './ae_idaa_comp__post_comment_obj_id_edit.svelte';
 
 export let lq__post_obj: any;
 export let lq__post_comment_obj_li: any;
+export let lq__post_comment_obj: any;
 
 // import Edit_post_comment_obj from './10_edit__post_comment_obj.svelte';
 
@@ -172,48 +174,22 @@ function handle_post_comment_obj_deleted(event) {
 {/if}
 
 
-{#if $idaa_sess.bb.show_edit__post_comment}
-<section class="bb_post_comment_crud">
 
-        <Modal
-            title="{$lq__post_obj?.title} - {$lq__post_obj?.id}"
-            bind:open={$idaa_sess.bb.show__modal_view}
-            autoclose={false}
-            outsideclose={true}
-            placement="top-center"
-            size="lg"
-            class="bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-200 rounded-lg border-gray-200 dark:border-gray-700 divide-gray-200 dark:divide-gray-700 shadow-md relative flex flex-col mx-auto w-full divide-y"
-
-            on:close={ () => {
-                $idaa_slct.post_comment_id = null;
-                $idaa_slct.post_comment_obj = {};
-
-                // $idaa_sess.bb.show_post_list = true;
-                // $idaa_sess.bb.show_edit__post_id = false;
-                // $idaa_sess.bb.show_view__post_id = false;
-                $idaa_sess.bb.show_edit__post_comment = false;
-            }}
-            >
-            <span slot="header_title">Comment on: {($idaa_slct.post_obj.title ? $idaa_slct.post_obj.title : '')}</span>
-
-            <span slot="body">
-            <section class="post_comment_obj_view">
-                <!-- <Edit_post_comment_obj
-                    on:post_comment_obj_created={handle_post_comment_obj_created} on:post_comment_obj_updated={handle_post_comment_obj_updated} on:post_comment_obj_deleted={handle_post_comment_obj_deleted} /> -->
-            </section>
-            </span>
-        </Modal>
-</section>
-{/if}
 
 {#if $lq__post_comment_obj_li?.length}
 <section class="post_comment_obj_li space-y-2 border border-1 rounded p-2 border-y-4">
-{#each $lq__post_comment_obj_li as idaa_post_comment_obj, index}
+{#each $lq__post_comment_obj_li as post_comment_obj, index}
 
 <div class="p-2 border border-1 rounded">
 
+    {#if $idaa_sess.bb.show__inline_edit__post_comment_id == post_comment_obj.post_comment_id}
+        <Comp__post_comment_obj_id_edit
+            lq__post_comment_obj={lq__post_comment_obj}
+            />
+    {:else}
+
     <div class="post_comment__content">
-        <pre class="post_comment__content p-2 bg-white shadow-md rounded-lg text-wrap text-sm font-normal whitespace-pre-wrap">{@html idaa_post_comment_obj.content}</pre>
+        <pre class="post_comment__content p-2 bg-white shadow-md rounded-lg text-wrap text-sm font-normal whitespace-pre-wrap">{@html post_comment_obj.content}</pre>
     </div>
 
     <section class="ae_section ae_meta post_comment__meta text-xs text-gray-500 mt-4 flex flex-row gap-2 items-center justify-between">
@@ -221,36 +197,34 @@ function handle_post_comment_obj_deleted(event) {
         <div class="flex flex-col gap-1">
             <span class="post_comment__posted_by `comment_by_container">
                 <span class="comment_by_lable">Comment by:</span>
-                {#if idaa_post_comment_obj.anonymous}
+                {#if post_comment_obj.anonymous}
                     <span class="fas fa-user-secret"></span>
                     <span class="comment_by_full_name anonymous">Anonymous</span>
                 {:else}
                     <span class="fas fa-user"></span>
-                    <span class="comment_by_full_name">{idaa_post_comment_obj.full_name}</span>
+                    <span class="comment_by_full_name">{post_comment_obj.full_name}</span>
                 {/if}
             </span>
             <span class="post_comment__created_on_updated_on">
                 Created on:
-                <span class="post_comment__created_on">{ae_util.iso_datetime_formatter(idaa_post_comment_obj.created_on, 'datetime_iso_no_seconds')}
-                {#if idaa_post_comment_obj.updated_on}
+                <span class="post_comment__created_on">{ae_util.iso_datetime_formatter(post_comment_obj.created_on, 'datetime_iso_no_seconds')}
+                {#if post_comment_obj.updated_on}
                     Updated on:
-                    {ae_util.iso_datetime_formatter(idaa_post_comment_obj.updated_on, 'datetime_iso_no_seconds')}
+                    {ae_util.iso_datetime_formatter(post_comment_obj.updated_on, 'datetime_iso_no_seconds')}
                 {/if}
             </span>
         </div>
 
-        {#if $ae_loc.trusted_access || idaa_post_comment_obj.external_person_id === $idaa_loc.novi_uuid}
+        {#if $ae_loc.trusted_access || post_comment_obj.external_person_id === $idaa_loc.novi_uuid}
         <div class="ae_options">
             <button on:click={() => {
-                    $idaa_slct.post_comment_id = idaa_post_comment_obj.post_comment_id_random;
-                    $idaa_slct.post_comment_obj = idaa_post_comment_obj;
+                    $idaa_slct.post_comment_id = post_comment_obj.post_comment_id_random;
+                    $idaa_slct.post_comment_obj = post_comment_obj;
 
-                    // $idaa_sess.bb.show_post_comment_list = false;
-                    $idaa_sess.bb.show_edit__post_comment = true;
-                    // $idaa_sess.bb.show_view__post_id = false;
+                    $idaa_sess.bb.show__inline_edit__post_comment_id = post_comment_obj.post_comment_id;
                 }}
                 class="btn btn-sm variant-ghost-warning hover:variant-filled-warning transition"
-                title="Edit comment by {idaa_post_comment_obj?.full_name} (for post ID {$lq__post_obj?.id})"
+                title="Edit comment by {post_comment_obj?.full_name} (for post ID {$lq__post_obj?.id})"
                 >
                 <span class="fas fa-edit"></span> Edit Comment
             </button>
@@ -258,6 +232,7 @@ function handle_post_comment_obj_deleted(event) {
         {/if}
 
     </section>
+    {/if}
 
 </div>
 
@@ -268,30 +243,5 @@ function handle_post_comment_obj_deleted(event) {
 </section>
 
 
-<style>
-.post_obj .ae_meta {
-    /* flex-direction: column; */
-    /* justify-content: space-between; */
-}
-
-/* .post_obj .ae_meta .ae_group {
-    flex-direction: row;
-} */
-
-/* .post_obj .ae_meta .ae_options {
-    flex-direction: row;
-    justify-content: space-between;
-} */
-
-.post__posted_by, .post_comment__posted_by {
-    /* font-size: smaller; */
-    /* background-color: hsla(0,80%,50%,1); */
-    /* color: hsla(0,0%,50%,1); */
-}
-
-.post__created_on_updated_on, .post_comment__created_on_updated_on {
-    /* font-size: smaller; */
-    /* background-color: hsla(0,80%,50%,1); */
-    /* color: hsla(0,0%,50%,1); */
-}
+<style lang="scss">
 </style>

src/routes/idaa/(idaa)/bb/ae_idaa_comp__post_obj_li.svelte

@@ -135,4 +135,4 @@ onMount(() => {
     No posts found at this time
 {/if}
 </section>
-<!-- {/if} -->
+<!-- {/if} -->

src/routes/idaa/(idaa)/recovery_meetings/ae_idaa_comp__event_obj_id_edit.svelte

@@ -1312,10 +1312,7 @@ async function handle_delete_event_obj({event_id, method='disable'}) {
 </section>
 
 
-<style>
-/* .ae_section .ae_options {
-    align-self: center;
-} */
+<style lang="scss">
 
 .event__physical_virtual .ae_group {
     display: flex;

src/routes/idaa/(idaa)/recovery_meetings/ae_idaa_comp__event_obj_id_view.svelte

@@ -328,7 +328,7 @@ onMount(() => {
 </section>
 
 
-<style>
+<style lang="scss">
 .ae_label {
     font-size: smaller;
     color: #777;